Admin/site_users
1
0
Fork 0
mirror of https://gitlab.unicamp.br/infimecc_drupal11_modules/site_users.git synced 2026-05-03 18:10:42 -03:00
Code Issues Packages Projects Releases Wiki Activity

Adiciona widget UserPhotosWidget para gerenciar fotos do usuário

Browse Source 
Widget unificado para field_user_photos: exibe tira de thumbnails em
linha com destaque (borda azul) na foto padrão; clicar num thumbnail
seleciona-o como padrão. O campo field_user_default_photo é atualizado
ao salvar. Edição/remoção de mídias individuais ficam a cargo do menu
contextual do Drupal. O hook _site_users_add_default_photo_selector()
é ignorado automaticamente quando o widget está ativo.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Quintino A. G. Souza
2026-03-16 10:39:22 -03:00
parent 0b137e8d12
commit 0c7b346530
4 changed files with 370 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
css/user-photos-widget.css Normal file
View File

@@ -0,0 +1,92 @@
/**
* @file
* Widget de tira de thumbnails com seletor de foto padrão.
*/
/* ---- Título da seção ----------------------------------------------------- */
.user-photos-strip-label {
margin: 0 0 0.5rem;
font-weight: 600;
font-size: 0.9rem;
color: #444;
}
/* ---- Tira de thumbnails -------------------------------------------------- */
.user-photos-strip {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.25rem;
}
.user-photos-empty {
color: #666;
font-style: italic;
}
/* ---- Card de foto -------------------------------------------------------- */
.user-photos-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
}
/* O .form-type--radio (ou .form-type-radio) envolve input + label.
Tratamos o bloco inteiro como o card clicável. */
.user-photos-item .form-type--radio,
.user-photos-item .form-type-radio {
position: relative;
cursor: pointer;
}
/* Oculta o círculo do radio sem tirá-lo do fluxo de acessibilidade */
.user-photos-item .form-radio {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
/* Label = thumbnail — recebe borda ao ser selecionado */
.user-photos-item .form-type--radio label,
.user-photos-item .form-type-radio label {
display: block;
cursor: pointer;
border: 3px solid transparent;
border-radius: 6px;
padding: 2px;
transition: border-color 0.15s, background-color 0.15s;
}
/* Destaque na foto padrão selecionada */
.user-photos-item .form-type--radio:has(input[type="radio"]:checked) label,
.user-photos-item .form-type-radio:has(input[type="radio"]:checked) label {
border-color: #0678be;
background-color: #e8f4fd;
}
/* Thumbnail contido dentro do label */
.user-photos-item .form-type--radio label .media,
.user-photos-item .form-type-radio label .media,
.user-photos-item .form-type--radio label img,
.user-photos-item .form-type-radio label img {
display: block;
width: 120px;
height: 100px;
object-fit: cover;
border-radius: 3px;
}
/* ---- Área de upload ------------------------------------------------------ */
.user-photos-widget .js-form-item-new-photo,
.user-photos-widget .form-item-new-photo {
margin-top: 0.5rem;
padding-top: 1rem;
border-top: 1px solid #ddd;
}