Changeset 101712 in spip-zone


Ignore:
Timestamp:
Jan 14, 2017, 5:31:25 PM (3 years ago)
Author:
marcimat@…
Message:

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)
Location:
_core_/plugins/medias
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • _core_/plugins/medias/lang/medias_fr.php

    r101706 r101712  
    5353        'des_videos' => '@nb@ séquences',
    5454        'descriptif' => 'Description',
     55        'details_document' => 'Détails',
     56        'details_document_afficher_masquer' => 'Afficher / masquer les détails du document',
    5557        'document_attache_succes' => 'Le document a bien été ajouté',
    5658        'document_copie_locale_succes' => 'Le fichier a bien été copié dans le site',
  • _core_/plugins/medias/modeles/document_desc.html

    r96619 r101712  
    11[(#REM)
    22
    3   Squelette
    4   (c) xxx
    5   Distribue sous licence GPL
     3Squelette
     4(c) xxx
     5Distribue sous licence GPL
    66
    77]
    88<BOUCLE_docslies(DOCUMENTS documents_liens types_documents){id_document}{id_objet}{objet}{statut?}>
    9         <div class="item #MODE vu_#VU statut_#STATUT[(#DISTANT|=={oui}|oui)distant]" id="doc#ID_DOCUMENT"
    10                          onclick="jQuery(this).toggleClass('hover');">
    11                 [(#EXTENSION|match{gif|png|jpg}|oui) #SET{id,#ID_VIGNETTE|?{#ID_VIGNETTE,#ID_DOCUMENT}}
    12                 <div class="tourner">
    13                         [(#BOUTON_ACTION{[(#CHEMIN_IMAGE{tourner-gauche-12.png}|balise_img{<:medias:image_tourner_gauche:>})],#URL_ACTION_AUTEUR{tourner,#GET{id}|concat{',-90'},#SELF},ajax})]
    14                         [(#BOUTON_ACTION{[(#CHEMIN_IMAGE{tourner-droite-12.png}|balise_img{<:medias:image_tourner_droite:>})],#URL_ACTION_AUTEUR{tourner,#GET{id}|concat{',90'},#SELF},ajax})]
    15                         [(#BOUTON_ACTION{[(#CHEMIN_IMAGE{tourner-180-12.png}|balise_img{<:medias:image_tourner_180:>})],#URL_ACTION_AUTEUR{tourner,#GET{id}|concat{',180'},#SELF},ajax})]
     9<div class="item #MODE vu_#VU statut_#STATUT[(#DISTANT|=={oui}|oui)distant]" id="doc#ID_DOCUMENT" onclick="jQuery(this).toggleClass('hover');">
     10        <div class="presentation">
     11                [<div class='vignette'>(#LOGO_DOCUMENT{#URL_DOCUMENT,150,150})</div>]
     12
     13                <div class="descriptions">
     14                        <h4 class="titrem">
     15                                [(#VU|=={oui}|oui)<img src='#CHEMIN_IMAGE{vu-16-10.png}' width='16' height='10' alt='<:medias:document_vu:>' title='<:medias:document_vu:>'/> ]
     16                                <span class="#EDIT{titre} titre" title="[(#FICHIER*|basename|attribut_html)]">
     17                                        [(#TITRE|oui)#TITRE]
     18                                        [(#TITRE|non)
     19                                                <i class="sanstitre"><:info_sans_titre:></i>
     20                                                <span class="fichier">[(#FICHIER*|basename)]</span>
     21                                        ]
     22                                        </span>
     23                                <span class="image_loading"></span>
     24                        </h4>
     25
     26                        <div class="descriptif [(#EDIT{descriptif})]">[(#DESCRIPTIF|couper{100})]</div>
     27
     28                        <div class="infos">
     29                                <div class="permanentes">
     30                                        [(#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
     31
     32                                        <a class="lien_details"
     33                                                onClick="$(this).parent().next('.detaillees').toggle(); return true;"
     34                                                title="<:medias:details_document_afficher_masquer|attribut_html:>"><:medias:details_document:></a>
     35                                </div>
     36                                <div class="detaillees">
     37                                        [(#SET{data,[(#VAL{
     38                                        <table class="compact">
     39                                                <tr class="credits">
     40                                                        <th><:medias:label_credits:></th>
     41                                                        <td class="[(#EDIT{credits})]">[(#CREDITS|sinon{<span class="vide">Crédits non renseignés</span>})]</td>
     42                                                </tr>
     43                                                [(#LARGEUR|ou{#HAUTEUR}|oui)
     44                                                <tr>
     45                                                        <th><:medias:entree_dimensions:></th>
     46                                                        <td>[(#VAL{info_largeur_vignette}|_T{#ARRAY{largeur_vignette,#LARGEUR,hauteur_vignette,#HAUTEUR}})]</td>
     47                                                </tr>
     48                                                ]
     49                                                <tr>
     50                                                        <th><:medias:info_taille:></th>
     51                                                        <td>[(#TAILLE|taille_en_octets)]</td>
     52                                                </tr>
     53                                                <tr>
     54                                                        <th><:date:></th>
     55                                                        <td>[(#DATE|affdate)]</td>
     56                                                </tr>
     57                                                </tr>
     58                                                <tr>
     59                                                        <th><:medias:label_fichier:></th>
     60                                                        <td>[(#FICHIER|basename)]</td>
     61                                                </tr>
     62                                        </table>
     63                                        })]})]
     64                                        [(#PIPELINE{afficher_metas_document,#ARRAY{args,#ARRAY{'quoi','document_desc','id_document',#ID_DOCUMENT},data,#GET{data}}})]
     65                                </div>
     66                        </div>
     67                </div>
     68        </div>
     69
     70        <div class="actions">
     71                [(#INCLUS|=={image}|et{#EVAL{_BOUTON_MODE_IMAGE}}|oui)
     72                <div class="mode">
     73                        [(#MODE|=={image}|oui)[(#BOUTON_ACTION{<:medias:upload_info_mode_document:>,#URL_ACTION_AUTEUR{changer_mode_document,#ID_DOCUMENT-document,#SELF},ajax})]
     74                        ][(#MODE|=={image}|non)[(#BOUTON_ACTION{<:medias:upload_info_mode_image:>,#URL_ACTION_AUTEUR{changer_mode_document,#ID_DOCUMENT-image,#SELF},ajax})]]
    1675                </div>]
    17                 [<div class='vignette'>(#LOGO_DOCUMENT{#URL_DOCUMENT,150,150})</div>]
    18                 <h4 class="titrem">
    19                         [(#VU|=={oui}|oui)<img src='#CHEMIN_IMAGE{vu-16-10.png}' width='16' height='10' alt='<:medias:document_vu:>' title='<:medias:document_vu:>'/> ]
    20                         [<span class="fichier">(#FICHIER*|basename)</span>]
    21                         [<span class="#EDIT{titre} titre">(#TITRE|sinon{<i class="sanstitre"><:info_sans_titre:></i>})</span>]
    22                         <span class="image_loading"></span>
    23                 </h4>
    24                 <div class="infos">
    25                 [(#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))]
    26                 [(#PIPELINE{afficher_metas_document,#ARRAY{args,#ARRAY{'quoi','document_desc','id_document',#ID_DOCUMENT},data,''}})]
    27                 </div>
    28                 [<div class="mode">(#INCLUS|=={image}|et{#EVAL{_BOUTON_MODE_IMAGE}}|oui)
    29                         [(#MODE|=={image}|oui)
    30                         [(#BOUTON_ACTION{<:medias:upload_info_mode_document:>,#URL_ACTION_AUTEUR{changer_mode_document,#ID_DOCUMENT-document,#SELF},ajax})]
    31                         ][(#MODE|=={image}|non)
    32                         [(#BOUTON_ACTION{<:medias:upload_info_mode_image:>,#URL_ACTION_AUTEUR{changer_mode_document,#ID_DOCUMENT-image,#SELF},ajax})]]
    33                 </div>]
    34                 <div class="actions">
    35                         <BOUCLE_compte(documents_liens){id_document}{0,2} />
    36                         [(#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;})()]})]]
    37                         [(#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;})()]})]]
     76                <BOUCLE_compte(documents_liens){id_document}{0,2} />
     77                [(#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;})()]})]]
     78                [(#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;})()]})]]
    3879                        [(#AUTORISER{modifier,document,#ID_DOCUMENT}|oui)
    3980                        <a href="#URL_ECRIRE{document_edit,id_document=#ID_DOCUMENT}" target="_blank" class="editbox" tabindex="0" role="button"><:medias:bouton_modifier_document:></a>
    4081                        ]<//B_compte>
    41                         [(#PIPELINE{document_desc_actions,#ARRAY{args,#ARRAY{id_document,#ID_DOCUMENT,position,document_desc,objet,#OBJET,id_objet,#ID_OBJET},data,''}})]
    42                 </div>
    43                 <div class="nettoyeur"></div>
     82                [(#PIPELINE{document_desc_actions,#ARRAY{args,#ARRAY{id_document,#ID_DOCUMENT,position,document_desc,objet,#OBJET,id_objet,#ID_OBJET},data,''}})]
    4483        </div>
     84
     85        <div class="nettoyeur"></div>
     86</div>
    4587</BOUCLE_docslies>
  • _core_/plugins/medias/paquet.xml

    r101688 r101712  
    22        prefix="medias"
    33        categorie="multimedia"
    4         version="2.15.0"
     4        version="2.16.0"
    55        etat="stable"
    66        compatibilite="[3.2.0-dev;]"
  • _core_/plugins/medias/prive/style_prive_plugin_medias.html

    r101688 r101712  
    149149.portfolios h3 {background-color:#GET{claire};padding:2px 10px;color:#000;margin-bottom:0;}
    150150.portfolios .liste_items {margin-top:0;}
    151 .portfolios .item {clear:both;padding-#GET{left}:160px;padding-#GET{right}:2px;}
    152 .portfolios .item .tourner {display:block;float:#GET{right};}
    153 .portfolios .item .tourner button {border:1px solid #999;padding:0;display:block;float:#GET{left};margin-#GET{left}:4px;}
    154 
    155 .portfolios .item .vignette {margin-#GET{left}:-160px; width: 150px; text-align: center; float:#GET{left};}
    156 .ie6 .portfolios .item .spip_logo {display:inline;position:relative;}
     151.portfolios .item { clear:both; }
     152.portfolios .item .presentation { display:flex; flex-direction:[(#ENV{ltr}|choixsiegal{left,row,row-reverse})]; width:100%; }
     153.portfolios .item .vignette { width: 150px; min-width:150px; text-align: center; }
     154.portfolios .item .descriptions {  display:flex; flex-direction: column; padding-#GET{right}: 0.6925em; margin-#GET{left}:1em; width: 100%; flex-grow:1; }
    157155.portfolios .item .titrem {margin:0 0 5px;font-size:1em;}
    158 .portfolios .item .titrem .fichier {font-weight:normal;font-size:0.9em;font-style:italic;}
     156.portfolios .item .titrem .fichier {font-weight:normal;font-size:0.9em; font-style:italic; display:block; }
    159157.portfolios .item .titrem .titre {display:block;font-size:1.1em;}
    160 .portfolios .item .infos { display: block; margin-bottom: 1em; }
    161 .portfolios .item div.mode {display:inline-block;clear:#GET{right};}
    162 .portfolios .item .actions {display:inline;}
     158.portfolios .item .descriptif { color:#444; margin-bottom:4px; flex-grow: 1; }
     159.portfolios .item .infos .permanentes {
     160        display: block;
     161        padding:2px 4px; margin-top:.5em; color:rgba(0,0,0,.8);
     162        border-top:1px solid rgba(100, 100, 100, .1);
     163        border-bottom:1px solid rgba(100, 100, 100, .1);
     164}
     165.portfolios .item .infos .lien_details { float:#GET{right}; cursor:pointer; }
     166.portfolios .item .infos .detaillees { display:none; margin-top:1em; }
     167.portfolios .item table.compact th,
     168.portfolios .item table.compact td { padding:.3em .3em; }
     169.portfolios .item table.compact tr { border-top:1px solid rgba(100, 100, 100, .1); border-bottom:1px solid rgba(100, 100, 100, .1);  }
     170.portfolios .item table.compact tr:nth-child(2n) td,
     171.portfolios .item table.compact tr:nth-child(2n) th { background:none; }
     172.portfolios .item .infos .credits .vide {  font-style:italic; opacity:.5; }
     173.portfolios .item div.mode {display:inline-block; clear:#GET{right};}
     174.portfolios .item .actions { clear:both; overflow:visible; margin-top:.6925em; padding: 0 .6925em; margin-bottom:-3px; }
    163175.portfolios .item div.mode,
    164176.portfolios .item .actions,
     
    169181
    170182.portfolios .item .actions > *,
    171 .portfolios .item .tourner,
    172183.portfolios .item .mode {opacity:0.1;}
    173184.portfolios .item .actions a.editbox { visibility: visible; opacity: 1; float: #GET{right}; font-weight: bold; }
    174185.portfolios .item:hover .actions > *,
    175 .portfolios .item:hover .tourner,
    176186.portfolios .item:hover .mode {visibility:visible;opacity:1;z-index:1000;}
    177187.portfolios .item.hover .actions > *,
    178 .portfolios .item.hover .tourner,
    179188.portfolios .item.hover .mode {visibility:visible;opacity:1;z-index:1000;}
    180189
    181 .portfolios .item .titre > .sanstitre {opacity:0.1;}
    182 
    183 .portfolios .tout_supprimer span {display:block;text-align:#GET{right};}
     190.portfolios .item .titre > .sanstitre,
     191.portfolios .item .titre > .sanstitre + .fichier {opacity:0.4;}
     192
     193.portfolios .tout_supprimer { clear:both; margin-top:.6925em; display:block; }
     194.portfolios .tout_supprimer span {display:block; text-align:#GET{right};}
    184195
    185196.item.vu_oui {background:#f9f9f9;}
     
    187198
    188199/* Types d'affichages des listes de douments */
    189 
    190200h3 .affichages {
    191201        float:#GET{right};
     
    223233
    224234/* Liste courte de documents */
    225 .portfolios .documents_liste .tout_supprimer {
    226         clear:both;
    227         margin-top:.5em;
    228         display:block;
    229 }
    230235.portfolios .documents_liste .item  {
    231         padding: 7px;
    232         padding-#GET{right}: 100px;
    233         padding-#GET{left}: 75px;
    234236        position:relative;
     237        padding:7px;
     238        display:flex;
    235239}
    236240.portfolios .documents_liste .item .vignette {
    237241        width:65px;
    238         margin-#GET{left}: -75px;
     242        min-width: 65px;
    239243}
    240244.portfolios .documents_liste .item .vignette img {
     
    244248        width:auto;
    245249}
    246 .portfolios .documents_liste .item .tourner,
     250.portfolios .documents_liste .item .presentation {
     251        align-items:center;
     252        flex-grow:1;
     253        overflow:hidden;
     254}
     255.portfolios .item .descriptions {  overflow: hidden; }
    247256.portfolios .documents_liste .item .infos,
     257.portfolios .documents_liste .item .descriptif,
    248258.portfolios .documents_liste .item .mode,
    249259.portfolios .documents_liste .item .actions > * {
     
    255265.portfolios .documents_liste .item .titrem .fichier,
    256266.portfolios .documents_liste .item .titrem .titre {
    257         max-height:1.2em;
     267        max-height:2.4em;
    258268        line-height:1.2em;
    259269        overflow:hidden;
    260270        white-space: nowrap;
    261271        display:block;
    262         text-overflow:ellipsis;
    263 }
    264 .portfolios .documents_liste .item .titrem .titre {
    265         max-height:1.5em;
    266         line-height:1.5em;
     272        text-overflow:ellipsis; /* necessite des overflow:hidden; sur les parents */
    267273}
    268274.portfolios .documents_liste .item .actions {
    269         position:absolute;
    270         #GET{right}:0;
    271         top:1.2em;
     275        align-items:center;
     276        margin-#GET{left}:1em;
     277        padding-#GET{right}:0;
    272278}
    273279.portfolios .documents_liste .item .actions .editbox,
     
    291297        display:flex;
    292298        flex-direction:column;
    293 
    294 }
    295 .portfolios .documents_cases .item .tourner,
    296 .portfolios .documents_cases .item .infos,
     299        align-items:center;
     300}
     301.portfolios .documents_cases .item .presentation { flex-grow:1; justify-content: center; }
     302.portfolios .documents_cases .item .descriptions,
    297303.portfolios .documents_cases .item .mode,
    298 .portfolios .documents_cases .item .titrem,
    299304.portfolios .documents_cases .item .actions > * {
    300305        display:none;
     
    309314}
    310315.portfolios .documents_cases .item .vignette {
    311         float: none;
    312         margin-#GET{left}: 0;
    313316        width:auto;
    314317        height:auto;
    315         flex-grow:1;
     318        min-width:auto;
    316319}
    317320.portfolios .documents_cases .item .vignette img {
    318         max-height:110px;
     321        max-height: 95px;
    319322        max-width:110px;
    320323        width: auto;
     
    325328        display:block;
    326329        width:100%;
     330        margin-bottom:0;
     331        box-sizing:border-box;
     332        padding: 4px 6px;
    327333}
    328334.portfolios .documents_cases .tout_supprimer {
Note: See TracChangeset for help on using the changeset viewer.