Skip to content
Extraits de code Groupes Projets
Valider 1b7a869d rédigé par marcimat@rezo.net's avatar marcimat@rezo.net
Parcourir les fichiers

Présentation différente des documents sur les objets éditoriaux 

- Le nom du fichier n'est pas affiché directement si le document possède un titre
- le début du descriptif est affiché par contre
- les détails du fichiers (extension, nom du fichier, dimensions, poids) sont masquées, mais un lien "détails" permet de les afficher en plus grand.
- les boutons de rotation sont enlevés (il suffit de "modifier" le document pour y avoir accès)
- les actions (changer de mode, supprimer, détacher, modifier) sont placés sur toute la largeur (ce qui prend un peu plus de place en hauteur par défaut, mais évite de disgraceux retours à la ligne qu'on avait parfois).
- les plugins utilisant le pipeline "afficher_metas_document" devront possiblement s'adapter
- le CSS utilise actuellement flexbox (désolé pour les vieux IE)
parent 8fb4f7df
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Masquer les modifications d'espaces
En ligne Côte à côte
lang/medias_fr.php
+ 2
− 0
Voir le fichier @ 1b7a869d
...@@ -52,6 +52,8 @@ $GLOBALS[$GLOBALS['idx_lang']] = array( ...@@ -52,6 +52,8 @@ $GLOBALS[$GLOBALS['idx_lang']] = array(
'des_utilisations' => '@nb@ utilisations', 'des_utilisations' => '@nb@ utilisations',
'des_videos' => '@nb@ séquences', 'des_videos' => '@nb@ séquences',
'descriptif' => 'Description', '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_attache_succes' => 'Le document a bien été ajouté',
'document_copie_locale_succes' => 'Le fichier a bien été copié dans le site', 'document_copie_locale_succes' => 'Le fichier a bien été copié dans le site',
'document_installe_succes' => 'Le fichier a bien été chargé', 'document_installe_succes' => 'Le fichier a bien été chargé',
......
modeles/document_desc.html
+ 74
− 32
Voir le fichier @ 1b7a869d
[(#REM) [(#REM)
Squelette Squelette
(c) xxx (c) xxx
Distribue sous licence GPL Distribue sous licence GPL
] ]
<BOUCLE_docslies(DOCUMENTS documents_liens types_documents){id_document}{id_objet}{objet}{statut?}> <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" <div class="item #MODE vu_#VU statut_#STATUT[(#DISTANT|=={oui}|oui)distant]" id="doc#ID_DOCUMENT" onclick="jQuery(this).toggleClass('hover');">
onclick="jQuery(this).toggleClass('hover');"> <div class="presentation">
[(#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='vignette'>(#LOGO_DOCUMENT{#URL_DOCUMENT,150,150})</div>] [<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:>'/> ] <div class="descriptions">
[<span class="fichier">(#FICHIER*|basename)</span>] <h4 class="titrem">
[<span class="#EDIT{titre} titre">(#TITRE|sinon{<i class="sanstitre"><:info_sans_titre:></i>})</span>] [(#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="image_loading"></span> <span class="#EDIT{titre} titre" title="[(#FICHIER*|basename|attribut_html)]">
</h4> [(#TITRE|oui)#TITRE]
<div class="infos"> [(#TITRE|non)
[(#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))] <i class="sanstitre"><:info_sans_titre:></i>
[(#PIPELINE{afficher_metas_document,#ARRAY{args,#ARRAY{'quoi','document_desc','id_document',#ID_DOCUMENT},data,''}})] <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>
[<div class="mode">(#INCLUS|=={image}|et{#EVAL{_BOUTON_MODE_IMAGE}}|oui) </div>
[(#MODE|=={image}|oui)
[(#BOUTON_ACTION{<:medias:upload_info_mode_document:>,#URL_ACTION_AUTEUR{changer_mode_document,#ID_DOCUMENT-document,#SELF},ajax})] <div class="actions">
][(#MODE|=={image}|non) [(#INCLUS|=={image}|et{#EVAL{_BOUTON_MODE_IMAGE}}|oui)
[(#BOUTON_ACTION{<:medias:upload_info_mode_image:>,#URL_ACTION_AUTEUR{changer_mode_document,#ID_DOCUMENT-image,#SELF},ajax})]] <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>]
<div class="actions"> <BOUCLE_compte(documents_liens){id_document}{0,2} />
<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;})()]})]]
[(#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{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) [(#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> <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> ]<//B_compte>
[(#PIPELINE{document_desc_actions,#ARRAY{args,#ARRAY{id_document,#ID_DOCUMENT,position,document_desc,objet,#OBJET,id_objet,#ID_OBJET},data,''}})] [(#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> </div>
<div class="nettoyeur"></div>
</div>
</BOUCLE_docslies> </BOUCLE_docslies>
\ No newline at end of file
paquet.xml
+ 1
− 1
Voir le fichier @ 1b7a869d
<paquet <paquet
prefix="medias" prefix="medias"
categorie="multimedia" categorie="multimedia"
version="2.15.0" version="2.16.0"
etat="stable" etat="stable"
compatibilite="[3.2.0-dev;]" compatibilite="[3.2.0-dev;]"
logo="prive/themes/spip/images/portfolio-32.png" logo="prive/themes/spip/images/portfolio-32.png"
......
prive/style_prive_plugin_medias.html
+ 49
− 43
Voir le fichier @ 1b7a869d
...@@ -148,18 +148,30 @@ p.actions {clear:both;} ...@@ -148,18 +148,30 @@ p.actions {clear:both;}
.portfolios {} .portfolios {}
.portfolios h3 {background-color:#GET{claire};padding:2px 10px;color:#000;margin-bottom:0;} .portfolios h3 {background-color:#GET{claire};padding:2px 10px;color:#000;margin-bottom:0;}
.portfolios .liste_items {margin-top:0;} .portfolios .liste_items {margin-top:0;}
.portfolios .item {clear:both;padding-#GET{left}:160px;padding-#GET{right}:2px;} .portfolios .item { clear:both; }
.portfolios .item .tourner {display:block;float:#GET{right};} .portfolios .item .presentation { display:flex; flex-direction:[(#ENV{ltr}|choixsiegal{left,row,row-reverse})]; width:100%; }
.portfolios .item .tourner button {border:1px solid #999;padding:0;display:block;float:#GET{left};margin-#GET{left}:4px;} .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 .vignette {margin-#GET{left}:-160px; width: 150px; text-align: center; float:#GET{left};}
.ie6 .portfolios .item .spip_logo {display:inline;position:relative;}
.portfolios .item .titrem {margin:0 0 5px;font-size:1em;} .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 .titrem .titre {display:block;font-size:1.1em;}
.portfolios .item .infos { display: block; margin-bottom: 1em; } .portfolios .item .descriptif { color:#444; margin-bottom:4px; flex-grow: 1; }
.portfolios .item div.mode {display:inline-block;clear:#GET{right};} .portfolios .item .infos .permanentes {
.portfolios .item .actions {display:inline;} 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 div.mode,
.portfolios .item .actions, .portfolios .item .actions,
.portfolios .item div.mode button, .portfolios .item div.mode button,
...@@ -168,25 +180,23 @@ p.actions {clear:both;} ...@@ -168,25 +180,23 @@ p.actions {clear:both;}
.portfolios .item .actions button {display: inline;} .portfolios .item .actions button {display: inline;}
.portfolios .item .actions > *, .portfolios .item .actions > *,
.portfolios .item .tourner,
.portfolios .item .mode {opacity:0.1;} .portfolios .item .mode {opacity:0.1;}
.portfolios .item .actions a.editbox { visibility: visible; opacity: 1; float: #GET{right}; font-weight: bold; } .portfolios .item .actions a.editbox { visibility: visible; opacity: 1; float: #GET{right}; font-weight: bold; }
.portfolios .item:hover .actions > *, .portfolios .item:hover .actions > *,
.portfolios .item:hover .tourner,
.portfolios .item:hover .mode {visibility:visible;opacity:1;z-index:1000;} .portfolios .item:hover .mode {visibility:visible;opacity:1;z-index:1000;}
.portfolios .item.hover .actions > *, .portfolios .item.hover .actions > *,
.portfolios .item.hover .tourner,
.portfolios .item.hover .mode {visibility:visible;opacity:1;z-index:1000;} .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;} .item.vu_oui {background:#f9f9f9;}
/* Types d'affichages des listes de douments */ /* Types d'affichages des listes de douments */
h3 .affichages { h3 .affichages {
float:#GET{right}; float:#GET{right};
} }
...@@ -222,20 +232,14 @@ h3 .affichages { ...@@ -222,20 +232,14 @@ h3 .affichages {
} }
/* Liste courte de documents */ /* Liste courte de documents */
.portfolios .documents_liste .tout_supprimer {
clear:both;
margin-top:.5em;
display:block;
}
.portfolios .documents_liste .item { .portfolios .documents_liste .item {
padding: 7px;
padding-#GET{right}: 100px;
padding-#GET{left}: 75px;
position:relative; position:relative;
padding:7px;
display:flex;
} }
.portfolios .documents_liste .item .vignette { .portfolios .documents_liste .item .vignette {
width:65px; width:65px;
margin-#GET{left}: -75px; min-width: 65px;
} }
.portfolios .documents_liste .item .vignette img { .portfolios .documents_liste .item .vignette img {
max-height: 36px; max-height: 36px;
...@@ -243,8 +247,14 @@ h3 .affichages { ...@@ -243,8 +247,14 @@ h3 .affichages {
height:auto; height:auto;
width: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 .infos,
.portfolios .documents_liste .item .descriptif,
.portfolios .documents_liste .item .mode, .portfolios .documents_liste .item .mode,
.portfolios .documents_liste .item .actions > * { .portfolios .documents_liste .item .actions > * {
display:none; display:none;
...@@ -254,21 +264,17 @@ h3 .affichages { ...@@ -254,21 +264,17 @@ h3 .affichages {
} }
.portfolios .documents_liste .item .titrem .fichier, .portfolios .documents_liste .item .titrem .fichier,
.portfolios .documents_liste .item .titrem .titre { .portfolios .documents_liste .item .titrem .titre {
max-height:1.2em; max-height:2.4em;
line-height:1.2em; line-height:1.2em;
overflow:hidden; overflow:hidden;
white-space: nowrap; white-space: nowrap;
display:block; display:block;
text-overflow:ellipsis; text-overflow:ellipsis; /* necessite des overflow:hidden; sur les parents */
}
.portfolios .documents_liste .item .titrem .titre {
max-height:1.5em;
line-height:1.5em;
} }
.portfolios .documents_liste .item .actions { .portfolios .documents_liste .item .actions {
position:absolute; align-items:center;
#GET{right}:0; margin-#GET{left}:1em;
top:1.2em; padding-#GET{right}:0;
} }
.portfolios .documents_liste .item .actions .editbox, .portfolios .documents_liste .item .actions .editbox,
.portfolios .documents_liste .item .actions .ordoc-deplacer { .portfolios .documents_liste .item .actions .ordoc-deplacer {
...@@ -290,12 +296,11 @@ h3 .affichages { ...@@ -290,12 +296,11 @@ h3 .affichages {
height:130px; height:130px;
display:flex; display:flex;
flex-direction:column; flex-direction:column;
align-items:center;
} }
.portfolios .documents_cases .item .tourner, .portfolios .documents_cases .item .presentation { flex-grow:1; justify-content: center; }
.portfolios .documents_cases .item .infos, .portfolios .documents_cases .item .descriptions,
.portfolios .documents_cases .item .mode, .portfolios .documents_cases .item .mode,
.portfolios .documents_cases .item .titrem,
.portfolios .documents_cases .item .actions > * { .portfolios .documents_cases .item .actions > * {
display:none; display:none;
} }
...@@ -308,14 +313,12 @@ h3 .affichages { ...@@ -308,14 +313,12 @@ h3 .affichages {
float:#GET{left}; float:#GET{left};
} }
.portfolios .documents_cases .item .vignette { .portfolios .documents_cases .item .vignette {
float: none;
margin-#GET{left}: 0;
width:auto; width:auto;
height:auto; height:auto;
flex-grow:1; min-width:auto;
} }
.portfolios .documents_cases .item .vignette img { .portfolios .documents_cases .item .vignette img {
max-height:110px; max-height: 95px;
max-width:110px; max-width:110px;
width: auto; width: auto;
height: auto; height: auto;
...@@ -324,6 +327,9 @@ h3 .affichages { ...@@ -324,6 +327,9 @@ h3 .affichages {
.portfolios .documents_cases .item .actions { .portfolios .documents_cases .item .actions {
display:block; display:block;
width:100%; width:100%;
margin-bottom:0;
box-sizing:border-box;
padding: 4px 6px;
} }
.portfolios .documents_cases .tout_supprimer { .portfolios .documents_cases .tout_supprimer {
flex-basis: 100%; flex-basis: 100%;
......
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter

Forge communautaire SPIP | Charte d'utilisation | Signaler un problème sur ce site