Browse Source

fix(ux): bouton de déplacement moins imposant.

On ne passe pas son temps à réordonner les albums, pas besoin de le mettre en grand sur toute la hauteur.
En petit sur le côté avec les autres boutons ça suffit.

Et il faut une chaîne de langue spécifique.
master
tcharlss 4 months ago
parent
commit
570e0b2daf
  1. 1
      lang/album_fr.php
  2. 2
      prive/objets/resume/album.html
  3. 85
      prive/style_prive_plugin_albums.html

1
lang/album_fr.php

@ -14,6 +14,7 @@ $GLOBALS[$GLOBALS['idx_lang']] = array(
'bouton_dissocier' => 'Détacher l’album',
'bouton_dissocier_explication' => 'Détacher l’album de l’objet',
'bouton_editer_texte_album' => 'Modifier les textes',
'bouton_ordonner_album' => 'Ordonner cet album',
'bouton_supprimer' => 'Supprimer',
'bouton_supprimer_explication' => 'Supprimer définitivement l’album',
'bouton_transvaser' => 'Transvaser',

2
prive/objets/resume/album.html

@ -164,7 +164,7 @@
[(#REM) Bouton pour ordonner par glisser-déposer ]
[(#GET{ordonnable}|oui)
[(#ENV{objet}|et{#ENV{id_objet}}|oui)
<span class="move icone-albums_move" data-move data-rang="#GET{rang_lien}" aria-hidden style="display:none" role="button" title="<:medias:ordonner_ce_document|attribut_html:>"></span>
<span class="move icone-albums_move" data-move data-rang="#GET{rang_lien}" aria-hidden style="display:none" role="button" title="<:album:bouton_ordonner_album|attribut_html:>"></span>
]
]
</div>

85
prive/style_prive_plugin_albums.html

@ -42,6 +42,7 @@
/* Footer */
.box_album .box__footer {
padding: 0;
background-color: transparent;
border-top: 1px solid var(--spip-box-sep-color);
text-align: inherit;
@ -58,10 +59,7 @@
flex: 0 0 auto;
display: flex;
align-items: center;
padding-inline-end: var(--spip-box-spacing-x);
}
.box_album .metas__section:last-child {
padding-inline-end: 0;
padding: calc(var(--spip-box-spacing-y) / 2) var(--spip-box-spacing-x);
}
.box_album .metas a:not(:hover):not(:focus) {
color: inherit;
@ -70,6 +68,8 @@
/* Métas / infos : n°, statut, etc */
.box_album .metas__section_infos {
flex: 0 0 auto;
padding-inline-start: var(--spip-box-spacing-y);
padding-inline-end: var(--spip-box-spacing-y);
}
.box_album .metas__section_infos > *:not(:last-child) {
margin-inline-end: calc(var(--spip-box-spacing-x) / 2);
@ -83,25 +83,57 @@
}
/* Métas / editorial */
.box_album .metas__section_editorial {
flex: 1 1 auto;
flex: 1;
justify-content: center;
}
.box_album .heading {
.box_album .metas__section_editorial .heading {
margin: 0;
font-size: inherit;
font-weight: inherit;
}
.box_album .descriptif {
color: var(--spip-color-gray-dark);
font-size: 0.9em;
margin-top: calc(var(--spip-box-spacing-y) / 2);
margin-bottom: calc(var(--spip-box-spacing-y) / 2);
text-align: center;
}
/* Métas / boutons d'actions et cie */
.box_album .metas__section_actions {}
.box_album .dropdown-menu .btn,
.box_album .dropdown-menu button {
.box_album .metas__section_actions {
padding: 0;
}
.box_album .metas__section_actions > * {
height: 100%;
}
.box_album .metas__section_actions .actions,
.box_album .move {
border-inline-start: 1px solid var(--spip-box-sep-color);
}
.box_album .dropdown-toggle,
.box_album .move {
padding-top: calc(var(--spip-box-spacing-y) / 2);
padding-bottom: calc(var(--spip-box-spacing-y) / 2);
}
.box_album .dropdown-toggle:hover,
.box_album .dropdown-toggle:focus,
.box_album .move:hover,
.box_album .move:focus {
/* background-color: hsla(0, 0%, 0%, 0.066); */
background-color: var(--spip-color-theme);
color: white;
}
.box_album .move {
justify-content: center;
align-items: center;
width: 3em;
transition: all 0.15s;
border-bottom-#RIGHT-radius: var(--spip-box-border-radius);
}
.box_album .move:hover {
cursor: grab;
}
.box_album .dropdown-toggle {
height: 100%;
border-radius: 0;
}
.box_album .dropdown-menu [class*=btn] { /* pour précédence */
text-align: inherit;
justify-content: flex-start;
border-radius: 0;
}
/* Liste documents */
@ -136,29 +168,6 @@
}
/* Variante : drag and drop */
.box_album_ordonnable {
padding-inline-end: 2em;
}
.box_album_ordonnable .box__footer {
position: static;
}
.box_album .move {
justify-content: center;
align-items: center;
position: absolute;
top: 0;
inset-inline-end: 0;
bottom: 0;
width: 2em;
background-color: hsla(0, 0%, 0%, 0.033);
transition: all 0.15s;
border-top-#RIGHT-radius: var(--spip-box-border-radius);
border-bottom-#RIGHT-radius: var(--spip-box-border-radius);
}
.box_album .move:hover {
cursor: grab;
background-color: hsla(0, 0%, 0%, 0.1);
}
.box_album.deplacer-en-mouvement {
border: 1px solid var(--spip-color-theme) !important;
}

Loading…
Cancel
Save