From 1b7a869d18f62d2146158e48c55e295e1e4f1e3c Mon Sep 17 00:00:00 2001
From: "marcimat@rezo.net" <>
Date: Sat, 14 Jan 2017 17:31:25 +0000
Subject: [PATCH] =?UTF-8?q?Pr=C3=A9sentation=20diff=C3=A9rente=20des=20doc?=
=?UTF-8?q?uments=20sur=20les=20objets=20=C3=A9ditoriaux=20-=20Le=20nom=20?=
=?UTF-8?q?du=20fichier=20n'est=20pas=20affich=C3=A9=20directement=20si=20?=
=?UTF-8?q?le=20document=20poss=C3=A8de=20un=20titre=20-=20le=20d=C3=A9but?=
=?UTF-8?q?=20du=20descriptif=20est=20affich=C3=A9=20par=20contre=20-=20le?=
=?UTF-8?q?s=20d=C3=A9tails=20du=20fichiers=20(extension,=20nom=20du=20fic?=
=?UTF-8?q?hier,=20dimensions,=20poids)=20sont=20masqu=C3=A9es,=20mais=20u?=
=?UTF-8?q?n=20lien=20"d=C3=A9tails"=20permet=20de=20les=20afficher=20en?=
=?UTF-8?q?=20plus=20grand.=20-=20les=20boutons=20de=20rotation=20sont=20e?=
=?UTF-8?q?nlev=C3=A9s=20(il=20suffit=20de=20"modifier"=20le=20document=20?=
=?UTF-8?q?pour=20y=20avoir=20acc=C3=A8s)=20-=20les=20actions=20(changer?=
=?UTF-8?q?=20de=20mode,=20supprimer,=20d=C3=A9tacher,=20modifier)=20sont?=
=?UTF-8?q?=20plac=C3=A9s=20sur=20toute=20la=20largeur=20(ce=20qui=20prend?=
=?UTF-8?q?=20un=20peu=20plus=20de=20place=20en=20hauteur=20par=20d=C3=A9f?=
=?UTF-8?q?aut,=20mais=20=C3=A9vite=20de=20disgraceux=20retours=20=C3=A0?=
=?UTF-8?q?=20la=20ligne=20qu'on=20avait=20parfois).=20-=20les=20plugins?=
=?UTF-8?q?=20utilisant=20le=20pipeline=20"afficher=5Fmetas=5Fdocument"=20?=
=?UTF-8?q?devront=20possiblement=20s'adapter=20-=20le=20CSS=20utilise=20a?=
=?UTF-8?q?ctuellement=20flexbox=20(d=C3=A9sol=C3=A9=20pour=20les=20vieux?=
=?UTF-8?q?=20IE)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
lang/medias_fr.php | 2 +
modeles/document_desc.html | 106 +++++++++++++++++++--------
paquet.xml | 2 +-
prive/style_prive_plugin_medias.html | 92 ++++++++++++-----------
4 files changed, 126 insertions(+), 76 deletions(-)
diff --git a/lang/medias_fr.php b/lang/medias_fr.php
index 2e665f03..e55b0288 100644
--- a/lang/medias_fr.php
+++ b/lang/medias_fr.php
@@ -52,6 +52,8 @@ $GLOBALS[$GLOBALS['idx_lang']] = array(
'des_utilisations' => '@nb@ utilisations',
'des_videos' => '@nb@ séquences',
'descriptif' => 'Description',
+ 'details_document' => 'Détails',
+ 'details_document_afficher_masquer' => 'Afficher / masquer les détails du document',
'document_attache_succes' => 'Le document a bien été ajouté',
'document_copie_locale_succes' => 'Le fichier a bien été copié dans le site',
'document_installe_succes' => 'Le fichier a bien été chargé',
diff --git a/modeles/document_desc.html b/modeles/document_desc.html
index 55d6fa12..62e814bc 100644
--- a/modeles/document_desc.html
+++ b/modeles/document_desc.html
@@ -1,45 +1,87 @@
[(#REM)
- Squelette
- (c) xxx
- Distribue sous licence GPL
+Squelette
+(c) xxx
+Distribue sous licence GPL
]
<BOUCLE_docslies(DOCUMENTS documents_liens types_documents){id_document}{id_objet}{objet}{statut?}>
- <div class="item #MODE vu_#VU statut_#STATUT[(#DISTANT|=={oui}|oui)distant]" id="doc#ID_DOCUMENT"
- onclick="jQuery(this).toggleClass('hover');">
- [(#EXTENSION|match{gif|png|jpg}|oui) #SET{id,#ID_VIGNETTE|?{#ID_VIGNETTE,#ID_DOCUMENT}}
- <div class="tourner">
- [(#BOUTON_ACTION{[(#CHEMIN_IMAGE{tourner-gauche-12.png}|balise_img{<:medias:image_tourner_gauche:>})],#URL_ACTION_AUTEUR{tourner,#GET{id}|concat{',-90'},#SELF},ajax})]
- [(#BOUTON_ACTION{[(#CHEMIN_IMAGE{tourner-droite-12.png}|balise_img{<:medias:image_tourner_droite:>})],#URL_ACTION_AUTEUR{tourner,#GET{id}|concat{',90'},#SELF},ajax})]
- [(#BOUTON_ACTION{[(#CHEMIN_IMAGE{tourner-180-12.png}|balise_img{<:medias:image_tourner_180:>})],#URL_ACTION_AUTEUR{tourner,#GET{id}|concat{',180'},#SELF},ajax})]
- </div>]
+<div class="item #MODE vu_#VU statut_#STATUT[(#DISTANT|=={oui}|oui)distant]" id="doc#ID_DOCUMENT" onclick="jQuery(this).toggleClass('hover');">
+ <div class="presentation">
[<div class='vignette'>(#LOGO_DOCUMENT{#URL_DOCUMENT,150,150})</div>]
- <h4 class="titrem">
- [(#VU|=={oui}|oui)<img src='#CHEMIN_IMAGE{vu-16-10.png}' width='16' height='10' alt='<:medias:document_vu:>' title='<:medias:document_vu:>'/> ]
- [<span class="fichier">(#FICHIER*|basename)</span>]
- [<span class="#EDIT{titre} titre">(#TITRE|sinon{<i class="sanstitre"><:info_sans_titre:></i>})</span>]
- <span class="image_loading"></span>
- </h4>
- <div class="infos">
- [(#DISTANT|=={oui}|oui)<img src='#CHEMIN_IMAGE{distant-16.png}' width='16' height='16' alt='<:medias:fichier_distant:>' title='<:medias:fichier_distant:>'/> ]<:info_numero_abbreviation:>#ID_DOCUMENT - #EXTENSION [ - (#LARGEUR|ou{#HAUTEUR}|oui)[(#VAL{info_largeur_vignette}|_T{#ARRAY{largeur_vignette,#LARGEUR,hauteur_vignette,#HAUTEUR}})]][ ((#TAILLE|taille_en_octets))]
- [(#PIPELINE{afficher_metas_document,#ARRAY{args,#ARRAY{'quoi','document_desc','id_document',#ID_DOCUMENT},data,''}})]
+
+ <div class="descriptions">
+ <h4 class="titrem">
+ [(#VU|=={oui}|oui)<img src='#CHEMIN_IMAGE{vu-16-10.png}' width='16' height='10' alt='<:medias:document_vu:>' title='<:medias:document_vu:>'/> ]
+ <span class="#EDIT{titre} titre" title="[(#FICHIER*|basename|attribut_html)]">
+ [(#TITRE|oui)#TITRE]
+ [(#TITRE|non)
+ <i class="sanstitre"><:info_sans_titre:></i>
+ <span class="fichier">[(#FICHIER*|basename)]</span>
+ ]
+ </span>
+ <span class="image_loading"></span>
+ </h4>
+
+ <div class="descriptif [(#EDIT{descriptif})]">[(#DESCRIPTIF|couper{100})]</div>
+
+ <div class="infos">
+ <div class="permanentes">
+ [(#DISTANT|=={oui}|oui)<img src='#CHEMIN_IMAGE{distant-16.png}' width='16' height='16' alt='<:medias:fichier_distant:>' title='<:medias:fichier_distant:>'/> ]<:info_numero_abbreviation:>#ID_DOCUMENT - #EXTENSION
+
+ <a class="lien_details"
+ onClick="$(this).parent().next('.detaillees').toggle(); return true;"
+ title="<:medias:details_document_afficher_masquer|attribut_html:>"><:medias:details_document:></a>
+ </div>
+ <div class="detaillees">
+ [(#SET{data,[(#VAL{
+ <table class="compact">
+ <tr class="credits">
+ <th><:medias:label_credits:></th>
+ <td class="[(#EDIT{credits})]">[(#CREDITS|sinon{<span class="vide">Crédits non renseignés</span>})]</td>
+ </tr>
+ [(#LARGEUR|ou{#HAUTEUR}|oui)
+ <tr>
+ <th><:medias:entree_dimensions:></th>
+ <td>[(#VAL{info_largeur_vignette}|_T{#ARRAY{largeur_vignette,#LARGEUR,hauteur_vignette,#HAUTEUR}})]</td>
+ </tr>
+ ]
+ <tr>
+ <th><:medias:info_taille:></th>
+ <td>[(#TAILLE|taille_en_octets)]</td>
+ </tr>
+ <tr>
+ <th><:date:></th>
+ <td>[(#DATE|affdate)]</td>
+ </tr>
+ </tr>
+ <tr>
+ <th><:medias:label_fichier:></th>
+ <td>[(#FICHIER|basename)]</td>
+ </tr>
+ </table>
+ })]})]
+ [(#PIPELINE{afficher_metas_document,#ARRAY{args,#ARRAY{'quoi','document_desc','id_document',#ID_DOCUMENT},data,#GET{data}}})]
+ </div>
+ </div>
</div>
- [<div class="mode">(#INCLUS|=={image}|et{#EVAL{_BOUTON_MODE_IMAGE}}|oui)
- [(#MODE|=={image}|oui)
- [(#BOUTON_ACTION{<:medias:upload_info_mode_document:>,#URL_ACTION_AUTEUR{changer_mode_document,#ID_DOCUMENT-document,#SELF},ajax})]
- ][(#MODE|=={image}|non)
- [(#BOUTON_ACTION{<:medias:upload_info_mode_image:>,#URL_ACTION_AUTEUR{changer_mode_document,#ID_DOCUMENT-image,#SELF},ajax})]]
+ </div>
+
+ <div class="actions">
+ [(#INCLUS|=={image}|et{#EVAL{_BOUTON_MODE_IMAGE}}|oui)
+ <div class="mode">
+ [(#MODE|=={image}|oui)[(#BOUTON_ACTION{<:medias:upload_info_mode_document:>,#URL_ACTION_AUTEUR{changer_mode_document,#ID_DOCUMENT-document,#SELF},ajax})]
+ ][(#MODE|=={image}|non)[(#BOUTON_ACTION{<:medias:upload_info_mode_image:>,#URL_ACTION_AUTEUR{changer_mode_document,#ID_DOCUMENT-image,#SELF},ajax})]]
</div>]
- <div class="actions">
- <BOUCLE_compte(documents_liens){id_document}{0,2} />
- [(#TOTAL_BOUCLE|=={1}|et{#AUTORISER{dissocierdocuments,#OBJET,#ID_OBJET}}|et{#VU|=={non}})[(#BOUTON_ACTION{<:medias:bouton_enlever_supprimer_document:>,#URL_ACTION_AUTEUR{dissocier_document,#ID_OBJET-#OBJET-#ID_DOCUMENT-suppr-safe,#SELF},ajax,<:medias:bouton_enlever_supprimer_document_confirmation:>,'',[(function(){jQuery("#doc(#ID_DOCUMENT)").animateRemove();return true;})()]})]]
- [(#AUTORISER{dissocierdocuments,#OBJET,#ID_OBJET})[(#BOUTON_ACTION{<:medias:bouton_enlever_document:>,#URL_ACTION_AUTEUR{dissocier_document,#ID_OBJET-#OBJET-#ID_DOCUMENT--safe,#SELF},ajax,'','',[(function(){jQuery("#doc(#ID_DOCUMENT)").animateRemove();return true;})()]})]]
+ <BOUCLE_compte(documents_liens){id_document}{0,2} />
+ [(#TOTAL_BOUCLE|=={1}|et{#AUTORISER{dissocierdocuments,#OBJET,#ID_OBJET}}|et{#VU|=={non}})[(#BOUTON_ACTION{<:medias:bouton_enlever_supprimer_document:>,#URL_ACTION_AUTEUR{dissocier_document,#ID_OBJET-#OBJET-#ID_DOCUMENT-suppr-safe,#SELF},ajax,<:medias:bouton_enlever_supprimer_document_confirmation:>,'',[(function(){jQuery("#doc(#ID_DOCUMENT)").animateRemove();return true;})()]})]]
+ [(#AUTORISER{dissocierdocuments,#OBJET,#ID_OBJET})[(#BOUTON_ACTION{<:medias:bouton_enlever_document:>,#URL_ACTION_AUTEUR{dissocier_document,#ID_OBJET-#OBJET-#ID_DOCUMENT--safe,#SELF},ajax,'','',[(function(){jQuery("#doc(#ID_DOCUMENT)").animateRemove();return true;})()]})]]
[(#AUTORISER{modifier,document,#ID_DOCUMENT}|oui)
<a href="#URL_ECRIRE{document_edit,id_document=#ID_DOCUMENT}" target="_blank" class="editbox" tabindex="0" role="button"><:medias:bouton_modifier_document:></a>
]<//B_compte>
- [(#PIPELINE{document_desc_actions,#ARRAY{args,#ARRAY{id_document,#ID_DOCUMENT,position,document_desc,objet,#OBJET,id_objet,#ID_OBJET},data,''}})]
- </div>
- <div class="nettoyeur"></div>
+ [(#PIPELINE{document_desc_actions,#ARRAY{args,#ARRAY{id_document,#ID_DOCUMENT,position,document_desc,objet,#OBJET,id_objet,#ID_OBJET},data,''}})]
</div>
+
+ <div class="nettoyeur"></div>
+</div>
</BOUCLE_docslies>
\ No newline at end of file
diff --git a/paquet.xml b/paquet.xml
index d745fbf8..d9a894f1 100644
--- a/paquet.xml
+++ b/paquet.xml
@@ -1,7 +1,7 @@
<paquet
prefix="medias"
categorie="multimedia"
- version="2.15.0"
+ version="2.16.0"
etat="stable"
compatibilite="[3.2.0-dev;]"
logo="prive/themes/spip/images/portfolio-32.png"
diff --git a/prive/style_prive_plugin_medias.html b/prive/style_prive_plugin_medias.html
index e4fb4ccf..0df81e5d 100644
--- a/prive/style_prive_plugin_medias.html
+++ b/prive/style_prive_plugin_medias.html
@@ -148,18 +148,30 @@ p.actions {clear:both;}
.portfolios {}
.portfolios h3 {background-color:#GET{claire};padding:2px 10px;color:#000;margin-bottom:0;}
.portfolios .liste_items {margin-top:0;}
-.portfolios .item {clear:both;padding-#GET{left}:160px;padding-#GET{right}:2px;}
-.portfolios .item .tourner {display:block;float:#GET{right};}
-.portfolios .item .tourner button {border:1px solid #999;padding:0;display:block;float:#GET{left};margin-#GET{left}:4px;}
-
-.portfolios .item .vignette {margin-#GET{left}:-160px; width: 150px; text-align: center; float:#GET{left};}
-.ie6 .portfolios .item .spip_logo {display:inline;position:relative;}
+.portfolios .item { clear:both; }
+.portfolios .item .presentation { display:flex; flex-direction:[(#ENV{ltr}|choixsiegal{left,row,row-reverse})]; width:100%; }
+.portfolios .item .vignette { width: 150px; min-width:150px; text-align: center; }
+.portfolios .item .descriptions { display:flex; flex-direction: column; padding-#GET{right}: 0.6925em; margin-#GET{left}:1em; width: 100%; flex-grow:1; }
.portfolios .item .titrem {margin:0 0 5px;font-size:1em;}
-.portfolios .item .titrem .fichier {font-weight:normal;font-size:0.9em;font-style:italic;}
+.portfolios .item .titrem .fichier {font-weight:normal;font-size:0.9em; font-style:italic; display:block; }
.portfolios .item .titrem .titre {display:block;font-size:1.1em;}
-.portfolios .item .infos { display: block; margin-bottom: 1em; }
-.portfolios .item div.mode {display:inline-block;clear:#GET{right};}
-.portfolios .item .actions {display:inline;}
+.portfolios .item .descriptif { color:#444; margin-bottom:4px; flex-grow: 1; }
+.portfolios .item .infos .permanentes {
+ display: block;
+ padding:2px 4px; margin-top:.5em; color:rgba(0,0,0,.8);
+ border-top:1px solid rgba(100, 100, 100, .1);
+ border-bottom:1px solid rgba(100, 100, 100, .1);
+}
+.portfolios .item .infos .lien_details { float:#GET{right}; cursor:pointer; }
+.portfolios .item .infos .detaillees { display:none; margin-top:1em; }
+.portfolios .item table.compact th,
+.portfolios .item table.compact td { padding:.3em .3em; }
+.portfolios .item table.compact tr { border-top:1px solid rgba(100, 100, 100, .1); border-bottom:1px solid rgba(100, 100, 100, .1); }
+.portfolios .item table.compact tr:nth-child(2n) td,
+.portfolios .item table.compact tr:nth-child(2n) th { background:none; }
+.portfolios .item .infos .credits .vide { font-style:italic; opacity:.5; }
+.portfolios .item div.mode {display:inline-block; clear:#GET{right};}
+.portfolios .item .actions { clear:both; overflow:visible; margin-top:.6925em; padding: 0 .6925em; margin-bottom:-3px; }
.portfolios .item div.mode,
.portfolios .item .actions,
.portfolios .item div.mode button,
@@ -168,25 +180,23 @@ p.actions {clear:both;}
.portfolios .item .actions button {display: inline;}
.portfolios .item .actions > *,
-.portfolios .item .tourner,
.portfolios .item .mode {opacity:0.1;}
.portfolios .item .actions a.editbox { visibility: visible; opacity: 1; float: #GET{right}; font-weight: bold; }
.portfolios .item:hover .actions > *,
-.portfolios .item:hover .tourner,
.portfolios .item:hover .mode {visibility:visible;opacity:1;z-index:1000;}
.portfolios .item.hover .actions > *,
-.portfolios .item.hover .tourner,
.portfolios .item.hover .mode {visibility:visible;opacity:1;z-index:1000;}
-.portfolios .item .titre > .sanstitre {opacity:0.1;}
+.portfolios .item .titre > .sanstitre,
+.portfolios .item .titre > .sanstitre + .fichier {opacity:0.4;}
-.portfolios .tout_supprimer span {display:block;text-align:#GET{right};}
+.portfolios .tout_supprimer { clear:both; margin-top:.6925em; display:block; }
+.portfolios .tout_supprimer span {display:block; text-align:#GET{right};}
.item.vu_oui {background:#f9f9f9;}
/* Types d'affichages des listes de douments */
-
h3 .affichages {
float:#GET{right};
}
@@ -222,20 +232,14 @@ h3 .affichages {
}
/* Liste courte de documents */
-.portfolios .documents_liste .tout_supprimer {
- clear:both;
- margin-top:.5em;
- display:block;
-}
.portfolios .documents_liste .item {
- padding: 7px;
- padding-#GET{right}: 100px;
- padding-#GET{left}: 75px;
position:relative;
+ padding:7px;
+ display:flex;
}
.portfolios .documents_liste .item .vignette {
width:65px;
- margin-#GET{left}: -75px;
+ min-width: 65px;
}
.portfolios .documents_liste .item .vignette img {
max-height: 36px;
@@ -243,8 +247,14 @@ h3 .affichages {
height:auto;
width:auto;
}
-.portfolios .documents_liste .item .tourner,
+.portfolios .documents_liste .item .presentation {
+ align-items:center;
+ flex-grow:1;
+ overflow:hidden;
+}
+.portfolios .item .descriptions { overflow: hidden; }
.portfolios .documents_liste .item .infos,
+.portfolios .documents_liste .item .descriptif,
.portfolios .documents_liste .item .mode,
.portfolios .documents_liste .item .actions > * {
display:none;
@@ -254,21 +264,17 @@ h3 .affichages {
}
.portfolios .documents_liste .item .titrem .fichier,
.portfolios .documents_liste .item .titrem .titre {
- max-height:1.2em;
+ max-height:2.4em;
line-height:1.2em;
overflow:hidden;
white-space: nowrap;
display:block;
- text-overflow:ellipsis;
-}
-.portfolios .documents_liste .item .titrem .titre {
- max-height:1.5em;
- line-height:1.5em;
+ text-overflow:ellipsis; /* necessite des overflow:hidden; sur les parents */
}
.portfolios .documents_liste .item .actions {
- position:absolute;
- #GET{right}:0;
- top:1.2em;
+ align-items:center;
+ margin-#GET{left}:1em;
+ padding-#GET{right}:0;
}
.portfolios .documents_liste .item .actions .editbox,
.portfolios .documents_liste .item .actions .ordoc-deplacer {
@@ -290,12 +296,11 @@ h3 .affichages {
height:130px;
display:flex;
flex-direction:column;
-
+ align-items:center;
}
-.portfolios .documents_cases .item .tourner,
-.portfolios .documents_cases .item .infos,
+.portfolios .documents_cases .item .presentation { flex-grow:1; justify-content: center; }
+.portfolios .documents_cases .item .descriptions,
.portfolios .documents_cases .item .mode,
-.portfolios .documents_cases .item .titrem,
.portfolios .documents_cases .item .actions > * {
display:none;
}
@@ -308,14 +313,12 @@ h3 .affichages {
float:#GET{left};
}
.portfolios .documents_cases .item .vignette {
- float: none;
- margin-#GET{left}: 0;
width:auto;
height:auto;
- flex-grow:1;
+ min-width:auto;
}
.portfolios .documents_cases .item .vignette img {
- max-height:110px;
+ max-height: 95px;
max-width:110px;
width: auto;
height: auto;
@@ -324,6 +327,9 @@ h3 .affichages {
.portfolios .documents_cases .item .actions {
display:block;
width:100%;
+ margin-bottom:0;
+ box-sizing:border-box;
+ padding: 4px 6px;
}
.portfolios .documents_cases .tout_supprimer {
flex-basis: 100%;
--
GitLab