Changeset 5088 for extensions/AMetaData


Ignore:
Timestamp:
Mar 8, 2010, 11:20:17 PM (14 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.