Ticket #4849 : détails UX sur les boutons détacher et cie

prive/squelettes/inclure/portfolio-documents.html

@@ -12,7 +12,7 @@
 [(#REM) Toutes les images]
 <B_illustrations>
 <h3 class="portfolios__titre"><span class="image_loading"></span><:medias:info_illustrations:></h3>
-<div class="liste_items documents ordonner_rang_lien" id="illustrations#ENV{id_unique}"  data-cookie-affichage="illustrations" data-lien="[(#OBJET|concat{'/',#ID_OBJET}|attribut_html)]">
+<div class="liste_items documents ordonner_rang_lien clearfix" id="illustrations#ENV{id_unique}"  data-cookie-affichage="illustrations" data-lien="[(#OBJET|concat{'/',#ID_OBJET}|attribut_html)]">
 [<nav class='pagination'>(#PAGINATION{prive})</nav>]
 <div class="sortable">
 <BOUCLE_illustrations(DOCUMENTS documents_liens types_documents){media=image}{id_objet}{objet}{par rang_lien, num titre, date,id_document}{pagination 50}{statut?}{si #CONST{_COMPORTEMENT_HISTORIQUE_PORTFOLIO}|non}>
@@ -20,10 +20,12 @@
 </BOUCLE_illustrations>
 </div>
 [<nav class='pagination'>(#PAGINATION{prive})</nav>]
-[(#AUTORISER{dissocierdocuments,#OBJET,#ID_OBJET})
-	<div class="actions-liste groupe-btns">
-	[(#BOUTON_ACTION{<:medias:lien_tout_enlever:>,#URL_ACTION_AUTEUR{dissocier_document,#ID_OBJET-#OBJET-I/image,#SELF|ancre_url{illustrations}},'ajax noscroll btn_secondaire',<:medias:lien_tout_enlever_verif:>}|ajouter_class{tout_dissocier})]
-	[(#BOUTON_ACTION{<:medias:lien_tout_desordonner:>,#URL_ACTION_AUTEUR{desordonner_liens_documents,#ID_OBJET-#OBJET-I/image,#SELF|ancre_url{illustrations}},'ajax btn_secondaire',<:medias:lien_tout_desordonner_verif:>}|ajouter_class{tout_desordonner})]
+[(#AUTORISER{dissocierdocuments,#OBJET,#ID_OBJET}|oui)
+	<div class="actions-liste groupe-btns groupe-btns_mini float-end">
+		[(#COMPTEUR_BOUCLE|>{1}|oui)
+			[(#BOUTON_ACTION{<:medias:lien_tout_enlever:>,#URL_ACTION_AUTEUR{dissocier_document,#ID_OBJET-#OBJET-I/image,#SELF|ancre_url{illustrations}},'ajax noscroll btn_secondaire',<:medias:lien_tout_enlever_verif:>}|ajouter_class{tout_dissocier})]
+		][(#REM) Le masquage de ce bouton est géré en JS ]
+		[(#BOUTON_ACTION{<:medias:lien_tout_desordonner:>,#URL_ACTION_AUTEUR{desordonner_liens_documents,#ID_OBJET-#OBJET-I/image,#SELF|ancre_url{illustrations}},'ajax btn_secondaire',<:medias:lien_tout_desordonner_verif:>}|ajouter_class{tout_desordonner})]
 	</div>
 ]
 </div>
@@ -35,7 +37,7 @@
 [(#REM) puis les documents]
 <B_documents>
 <h3 class="portfolios__titre"><:medias:info_documents:></h3>
-<div class="liste_items documents ordonner_rang_lien" id="documents#ENV{id_unique}" data-cookie-affichage="documents" data-lien="[(#OBJET|concat{'/',#ID_OBJET}|attribut_html)]">
+<div class="liste_items documents ordonner_rang_lien clearfix" id="documents#ENV{id_unique}" data-cookie-affichage="documents" data-lien="[(#OBJET|concat{'/',#ID_OBJET}|attribut_html)]">
 [<nav class='pagination'>(#PAGINATION{prive})</nav>]
 <div class="sortable">
 <BOUCLE_documents(DOCUMENTS documents_liens types_documents){media!=image}{mode!=vignette}{id_objet}{objet}{par rang_lien, num titre, date,id_document}{pagination 50}{statut?}>
@@ -43,10 +45,12 @@
 </BOUCLE_documents>
 </div>
 [<nav class='pagination'>(#PAGINATION{prive})</nav>]
-[(#AUTORISER{dissocierdocuments,#OBJET,#ID_OBJET})
-	<div class="actions-liste groupe-btns">
-		[(#BOUTON_ACTION{<:medias:lien_tout_enlever:>,#URL_ACTION_AUTEUR{dissocier_document,#ID_OBJET-#OBJET-D/document,#SELF|ancre_url{documents}},'ajax noscroll tout_dissocier',<:medias:lien_tout_enlever_verif:>})]
-		[(#BOUTON_ACTION{<:medias:lien_tout_desordonner:>,#URL_ACTION_AUTEUR{desordonner_liens_documents,#ID_OBJET-#OBJET-D/document,#SELF|ancre_url{documents}},'ajax tout_desordonner',<:medias:lien_tout_desordonner_verif:>})]
+[(#AUTORISER{dissocierdocuments,#OBJET,#ID_OBJET}|oui)
+	<div class="actions-liste groupe-btns groupe-btns_mini float-end">
+		[(#COMPTEUR_BOUCLE|>{1}|oui)
+			[(#BOUTON_ACTION{<:medias:lien_tout_enlever:>,#URL_ACTION_AUTEUR{dissocier_document,#ID_OBJET-#OBJET-D/document,#SELF|ancre_url{documents}},'ajax noscroll btn_secondaire',<:medias:lien_tout_enlever_verif:>}|ajouter_class{tout_dissocier})]
+		][(#REM) Le masquage de ce bouton est géré en JS ]
+		[(#BOUTON_ACTION{<:medias:lien_tout_desordonner:>,#URL_ACTION_AUTEUR{desordonner_liens_documents,#ID_OBJET-#OBJET-D/document,#SELF|ancre_url{documents}},'ajax btn_secondaire',<:medias:lien_tout_desordonner_verif:>}|ajouter_class{tout_desordonner})]
 	</div>
 ]
 </div>

prive/style_prive_plugin_medias.html

@@ -334,6 +334,9 @@ p.actions {clear:both;}
 	opacity: 1;
 	float: #GET{right};
 }
+.portfolios .item .actions .editbox  {
+	margin: 0;
+}
 .portfolios .item:hover .actions > *,
 .portfolios .item:hover .mode,
 .portfolios .item.hover .actions > *,
@@ -344,12 +347,16 @@ p.actions {clear:both;}
 
 .portfolios .actions-liste { clear:both; margin-top:.6925em; }
 .portfolios .actions-liste > * {display:inline; }
-.portfolios .tout_dissocier span {display:block; text-align:#GET{right};}
 
 .item.vu_oui {background:#f9f9f9;}
 .item.deplacer-document-placeholder { background-color: var(--spip-color-theme-lighter); }
 
-.deplacer-document { float: #GET{left}; margin-top:1px; cursor:move; }
+.deplacer-document {
+	display: inline-flex;
+	float: var(--spip-left);
+	margin-top: 1px;
+	cursor: move;
+}
 .document-en-mouvement { cursor:move; }
 
 
@@ -514,11 +521,11 @@ h3 .affichages {
 .portfolios .documents_cases .item .actions > * {
 	display:none;
 }
-.portfolios .documents_cases .item .actions .deplacer-modifier  {
+.portfolios .documents_cases .item .actions .deplacer-modifier {
 	display: flex;
-	width:100%;
+	width: 100%;
 }
-.portfolios .documents_cases .item .actions .editbox  { float:right; }
+.documents_cases .deplacer-document { flex-shrink: 0 }
 .documents_cases .deplacer-document-placeholder { height:130px; width:113px; padding: 2px; margin: 2px;}
 
 .portfolios .documents_cases .item .vignette {
@@ -545,7 +552,3 @@ h3 .affichages {
 	box-sizing:border-box;
 	padding: 2px 5px 1px 5px;
 }
-.portfolios .documents_cases .tout_dissocier {
-	-ms-flex-preferred-size: 100%;
-	    flex-basis: 100%;
-}