Changeset 5088


Ignore:
Timestamp:
03/08/10 23:20:17 (10 years ago)
Author:
grum
Message:

Improve UI : use popup to view values for a metadata, uses title bar to sort values instead of combobox, if there is only one group this one is opened automatically

Location:
extensions/AMetaData
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • extensions/AMetaData/admin/amd_metadata_display.tpl

    r4905 r5088  
    5151      } 
    5252    ); 
     53 
     54    if($("#iGroups li").length == 1) 
     55    { 
     56      manageGroup('1', 'y'); 
     57    } 
    5358  } 
    5459 
  • extensions/AMetaData/admin/amd_metadata_select.tpl

    r5005 r5088  
    33 
    44  var globalTagId; 
     5 
     6  function init() 
     7  { 
     8    computedWidth=$("#content").get(0).clientWidth; 
     9    computedHeight=$("#content").get(0).clientHeight; 
     10    $("#dialogViewDetail") 
     11    .dialog( 
     12      { 
     13        autoOpen: false, 
     14        resizable: false, 
     15        width:computedWidth, 
     16        height:computedHeight, 
     17        modal: true, 
     18        draggable:false, 
     19        title: '{/literal}{"g003_metadata_detail"|@translate}{literal}', 
     20        overlay: 
     21        { 
     22          backgroundColor: '#000', 
     23          opacity: 0.5 
     24        }, 
     25        open: function(event, ui) 
     26        { 
     27          bH=$("div.ui-dialog-buttonpane").get(0).clientHeight; 
     28          $("#dialogViewDetail").css('height', (this.clientHeight-bH)+"px"); 
     29          $("#iListImages").css('height', (this.clientHeight-bH-$("#iListImagesNb").get(0).clientHeight-$("#iHeaderListImages").get(0).clientHeight)+"px"); 
     30        }, 
     31        buttons: 
     32        { 
     33          '{/literal}{"g003_ok"|@translate}{literal}': 
     34            function() 
     35            { 
     36              $(this).dialog('close'); 
     37            } 
     38        } 
     39      } 
     40    ); 
     41  } 
    542 
    643  function loadTagList() 
     
    1148    unusedTag=($("#iExcludeUnusedTagList").get(0).checked)?"y":"n"; 
    1249    selectedOnly=($("#iSelectedTagOnly").get(0).checked)?"y":"n"; 
     50 
     51    displayTagListOrder(); 
    1352 
    1453    $("#iListTags").html( 
     
    2362      "{/literal}{'g003_number_of_filtered_metadata'|@translate}{literal} "+$("#iListTags table tr").length 
    2463    ); 
     64 
     65    //onclick="updateTagSelect('iNumId{$data.numId}', '')" 
     66    $("input.cbiListTags") 
     67      .bind('click', 
     68        function(event) 
     69        { 
     70          event.stopPropagation(); 
     71          updateTagSelect($(this).get(0).id, ''); 
     72        } 
     73      ); 
     74 
     75    $("a.cbiListTags") 
     76      .bind('click', 
     77        function(event) 
     78        { 
     79          event.stopPropagation(); 
     80          loadTagDetail($(this).get(0).id.substr(7)); 
     81        } 
     82      ); 
     83 
     84 
     85 
     86 
    2587    $("body").css("cursor", "default"); 
    2688  } 
     
    2890  function loadTagDetail(tag) 
    2991  { 
     92    $("#dialogViewDetail").dialog('open'); 
     93 
    3094    globalTagId=tag; 
    3195    order=$('#iSelectOrderImageList').val(); 
     
    51115  } 
    52116 
    53   function updateTagSelect(numId) 
     117  function updateTagSelect(numId, mode) 
    54118  { 
    55119    $("body").css("cursor", "wait"); 
     120 
     121    if(mode=='switch') 
     122    { 
     123      $("#"+numId).get(0).checked=!$("#"+numId).get(0).checked; 
     124    } 
     125 
    56126    selected=($("#"+numId).get(0).checked)?"y":"n"; 
    57127 
     
    67137  } 
    68138 
     139  function sortTagList(by) 
     140  { 
     141    $("#iSelectOrderTagList").val(by); 
     142    displayTagListOrder(); 
     143    loadTagList(); 
     144  } 
     145 
     146  function sortTagDetail(by, tag) 
     147  { 
     148    $("#iSelectOrderImageList").val(by); 
     149    displayTagDetailOrder(); 
     150    loadTagDetail(tag); 
     151  } 
     152 
     153  function displayTagListOrder() 
     154  { 
     155    if($("#iSelectOrderTagList").val()=="tag") 
     156    { 
     157      $("#iHLTOrderTag").html("↑"); 
     158      $("#iHLTOrderNum").html(""); 
     159    } 
     160    else 
     161    { 
     162      $("#iHLTOrderTag").html(""); 
     163      $("#iHLTOrderNum").html("↑"); 
     164    } 
     165  } 
     166 
     167  function displayTagDetailOrder() 
     168  { 
     169    if($("#iSelectOrderImageList").val()=="value") 
     170    { 
     171      $("#iHLIOrderValue").html("↑"); 
     172      $("#iHLIOrderNum").html(""); 
     173    } 
     174    else 
     175    { 
     176      $("#iHLIOrderValue").html(""); 
     177      $("#iHLIOrderNum").html("↑"); 
     178    } 
     179  } 
     180 
    69181 
    70182</script> 
     
    75187 
    76188<form> 
    77   <label>{'g003_order'|@translate} 
    78     <select id="iSelectOrderTagList" onchange="loadTagList();"> 
    79       <option value="tag" {if $datas.config_GetListTags_OrderType=="tag"}selected{/if}>{'g003_tagOrder'|@translate}</option> 
    80       <option value="num" {if $datas.config_GetListTags_OrderType=="num"}selected{/if}>{'g003_numOrder'|@translate}</option> 
    81     </select> 
    82   </label> 
     189  <input type="hidden" id="iSelectOrderTagList" value="{$datas.config_GetListTags_OrderType}"/> 
    83190 
    84191  <label>{'g003_filter'|@translate} 
     
    104211<table id='iHeaderListTags' class="littlefont"> 
    105212  <tr> 
    106     <th style="width:35%;min-width:340px;">{'g003_TagId'|@translate}</th> 
     213    <th style="width:35%;min-width:340px;"><span id="iHLTOrderTag"></span><a onclick="sortTagList('tag');">{'g003_TagId'|@translate}</a></th> 
    107214    <th>{'g003_TagLabel'|@translate}</th> 
    108     <th width="80px">{'g003_NumOfImage'|@translate}</th> 
     215    <th width="80px"><span id="iHLTOrderNum"></span><a onclick="sortTagList('num');">{'g003_NumOfImage'|@translate}</a></th> 
    109216    <th width="40px">{'g003_Pct'|@translate}</th> 
    110217    <th width="110px">&nbsp;</th> 
     
    116223 
    117224 
    118 <form> 
    119   <label>{'g003_order'|@translate} 
    120     <select id="iSelectOrderImageList" onchange="loadTagDetail(globalTagId);"> 
    121       <option value="value"  {if $datas.config_GetListImages_OrderType=="value"}selected{/if}>{'g003_valueOrder'|@translate}</option> 
    122       <option value="num"  {if $datas.config_GetListImages_OrderType=="num"}selected{/if}>{'g003_numOrder'|@translate}</option> 
    123     </select> 
    124   </label> 
    125 </form> 
    126  
    127 <table id='iHeaderListImages' class="littlefont"> 
    128   <tr> 
    129     <th>{'g003_Value'|@translate}&nbsp;<span id="iHeaderListImagesTagName"></span></th> 
    130     <th width="80px">{'g003_NumOfImage'|@translate}</th> 
    131     <th width="40px">{'g003_Pct'|@translate}</th> 
    132     <th width="110px">&nbsp;</th> 
    133   </tr> 
    134 </table> 
    135  
    136 <div id='iListImages'> 
    137   <div style="width:100%;text-align:center;padding-top:20px;">{'g003_no_items_selected'|@translate}</div> 
     225<div id="dialogViewDetail"> 
     226  <form> 
     227    <input type="hidden" id="iSelectOrderImageList" value="{$datas.config_GetListImages_OrderType}"/> 
     228  </form> 
     229 
     230  <table id='iHeaderListImages' class="littlefont"> 
     231    <tr> 
     232      <th><span id="iHLIOrderValue"></span><a onclick="sortTagDetail('value', globalTagId);">{'g003_Value'|@translate}</a>&nbsp;<span id="iHeaderListImagesTagName"></span></th> 
     233      <th width="80px"><span id="iHLIOrderNum"></span><a onclick="sortTagDetail('num', globalTagId);">{'g003_NumOfImage'|@translate}</a></th> 
     234      <th width="40px">{'g003_Pct'|@translate}</th> 
     235      <th width="110px">&nbsp;</th> 
     236    </tr> 
     237  </table> 
     238 
     239  <div id='iListImages'> 
     240    <div style="width:100%;text-align:center;padding-top:20px;">{'g003_no_items_selected'|@translate}</div> 
     241  </div> 
     242  <div id="iListImagesNb"></div> 
    138243</div> 
    139 <div id="iListImagesNb"></div> 
    140244 
    141245 
    142246<script type="text/javascript"> 
     247  init(); 
    143248  loadTagList(); 
     249  displayTagDetailOrder(); 
    144250</script> 
  • extensions/AMetaData/admin/amd_metadata_select_iListTags.tpl

    r4905 r5088  
    11<table class="littlefont"> 
    22  {foreach from=$datas key=name item=data} 
    3   <tr onclick="loadTagDetail('{$data.tagId}');"> 
    4     <td style="width:35%;min-width:340px;"><input type="checkbox" id="iNumId{$data.numId}" onclick="updateTagSelect('iNumId{$data.numId}')" {$data.tagChecked}>&nbsp;{$data.tagId}</td> 
     3  <tr onclick="updateTagSelect('iNumId{$data.numId}', 'switch');"> 
     4    <td style="width:35%;min-width:340px;"> 
     5      <a id="iNumIdA{$data.tagId}" class="cbiListTags" >[&nbsp;?&nbsp;]</a>&nbsp; 
     6      <input type="checkbox" id="iNumId{$data.numId}" class="cbiListTags" {$data.tagChecked}>&nbsp;{$data.tagId} 
     7    </td> 
    58    <td>{$data.label}</td> 
    69    <td width="80px">{$data.nb}</td> 
  • extensions/AMetaData/amd.css

    r5025 r5088  
    1010      #iprogressbar_fg { color:#FF3363; width:100%; text-align:center; display: block; z-index:200; position:relative; top:-18px;  } 
    1111      #iHeaderListTags { width:100%; border:1px solid; border-collapse: collapse; margin-top:3px; } 
    12       #iListTags, #iListImages { width:100%; border:1px solid; height:120px; border-top:0px; overflow:auto;} 
    13       #iListTagsNb, #iListImagesNb { width:100%; text-align:right; margin-bottom:20px; padding:2px; font-size:80%; } 
     12      #iListTags { width:100%; border:1px solid; height:280px; border-top:0px; overflow:auto;} 
     13      #iListImages { width:100%; border-bottom:1px solid; overflow:auto;} 
     14      #iListTagsNb, #iListImagesNb { width:99%; text-align:right; margin-bottom:8px; padding:2px; font-size:80%; } 
    1415      #iListTags table, #iListImages table, table.listTags { width:100%; text-align:left; border-collapse: collapse; } 
    1516      #iListTags table tr:hover { cursor:pointer; background:#303030; } 
    1617      #iListImages table tr:hover, table.listTags tr:hover { background:#303030; cursor:default; } 
    17       #iHeaderListImages { width:100%; border:1px solid; margin-top:3px; } 
     18      #iHeaderListImages { width:100%; border-bottom:1px solid; } 
    1819      .warning { color:#dd0000; border:1px solid #dd0000; margin-bottom:8px; margin-top:8px; padding:8px; } 
    1920      .warning p { margin-top:0.5em; margin-bottom:0em; } 
  • extensions/AMetaData/amd_root.class.inc.php

    r5040 r5088  
    9090      #iprogressbar_fg { color:#FF3363; width:100%; text-align:center; display: block; z-index:200; position:relative; top:-18px;  } 
    9191      #iHeaderListTags { width:100%; border:1px solid; border-collapse: collapse; margin-top:3px; } 
    92       #iListTags, #iListImages { width:100%; border:1px solid; height:120px; border-top:0px; overflow:auto;} 
    93       #iListTagsNb, #iListImagesNb { width:100%; text-align:right; margin-bottom:20px; padding:2px; font-size:80%; } 
     92      #iListTags { width:100%; border:1px solid; height:280px; border-top:0px; overflow:auto;} 
     93      #iListImages { width:100%; border-bottom:1px solid; overflow:auto;} 
     94      #iListTagsNb, #iListImagesNb { width:99%; text-align:right; margin-bottom:8px; padding:2px; font-size:80%; } 
    9495      #iListTags table, #iListImages table, table.listTags { width:100%; text-align:left; border-collapse: collapse; } 
    9596      #iListTags table tr:hover { cursor:pointer; background:#303030; } 
    9697      #iListImages table tr:hover, table.listTags tr:hover { background:#303030; cursor:default; } 
    97       #iHeaderListImages { width:100%; border:1px solid; margin-top:3px; } 
     98      #iHeaderListImages { width:100%; border-bottom:1px solid; } 
    9899      .warning { color:#dd0000; border:1px solid #dd0000; margin-bottom:8px; margin-top:8px; padding:8px; } 
    99100      .warning p { margin-top:0.5em; margin-bottom:0em; } 
Note: See TracChangeset for help on using the changeset viewer.