feature 828 added: display tags by letters. Users can switch from "cloud" to

"letters" with a button in the top bar.


git-svn-id: http://piwigo.org/svn/trunk@2362 68402e56-0260-453c-a942-63ccdbb3a9ee

4 files changed, 72 insertions, 1 deletions

diff --git a/template/yoga/default-layout.css b/template/yoga/default-layout.css
index c6b229481..a81263471 100644
--- a/template/yoga/default-layout.css
+++ b/template/yoga/default-layout.css
@@ -268,3 +268,38 @@ BODY#thePopuphelpPage .content UL LI
 BODY#thePopuphelpPage P#pageBottomActions A {
   border: none;
 }
+
+TR.tagLine {
+  border-bottom: 1px solid #ddd;
+  text-align: left;
+}
+TR.tagLine:hover {
+  background-color: #fff;
+}
+TD.nbEntries {
+  text-align: right;
+  font-style: italic;
+  font-size: 90%;
+}
+
+FIELDSET.tagLetter {
+  border: 1px solid #d3d3d3;
+  width: 200px;
+  margin: 0.5em;
+  padding: 10px;
+}
+
+LEGEND.tagLetterLegend {
+  border: 1px solid #d3d3d3;
+  font-size:120%;
+  font-weight: bold;
+  padding: 0 5px;
+  color: #555;
+  font-style: normal;
+}
+
+TABLE.tagLetterContent {
+  width:100%;
+  font-size:80%;
+  border-collapse : collapse;
+}
diff --git a/template/yoga/icon/tag_cloud.png b/template/yoga/icon/tag_cloud.png
new file mode 100644
index 000000000..79d7bc250
--- /dev/null
+++ b/template/yoga/icon/tag_cloud.png
diff --git a/template/yoga/icon/tag_letters.png b/template/yoga/icon/tag_letters.png
new file mode 100644
index 000000000..d452db7ec
--- /dev/null
+++ b/template/yoga/icon/tag_letters.png
diff --git a/template/yoga/tags.tpl b/template/yoga/tags.tpl
index 98a49cd06..56b72bdfb 100644
--- a/template/yoga/tags.tpl
+++ b/template/yoga/tags.tpl
@@ -3,12 +3,21 @@
 
   <div class="titrePage">
     <ul class="categoryActions">
+{if $display_mode == 'letters'}
+      <li><a href="{$U_CLOUD}" title="{'show tag cloud'|@translate}"><img src="{$themeconf.icon_dir}/tag_cloud.png" class="button" alt="{'cloud'|@translate}"/></a></li>
+{/if}
+
+{if $display_mode == 'cloud'}
+      <li><a href="{$U_LETTERS}" title="{'group by letters'|@translate}"><img src="{$themeconf.icon_dir}/tag_letters.png" class="button" alt="{'letters'|@translate}"/></a></li>
+{/if}
+
       <li><a href="{$U_HOME}" title="{'return to homepage'|@translate}"><img src="{$themeconf.icon_dir}/home.png" class="button" alt="{'home'|@translate}"/></a></li>
     </ul>
     <h2>{'Tags'|@translate}</h2>
   </div>
 
-  {if isset($tags)}
+{if isset($tags)}
+  {if $display_mode == 'cloud'}
   <ul id="fullTagCloud">
     {foreach from=$tags item=tag}
     <li><a href="{$tag.URL}" class="{$tag.CLASS}" title="{$tag.TITLE}">{$tag.NAME}</a></li>
@@ -16,4 +25,31 @@
   </ul>
   {/if}
 
+  {if $display_mode == 'letters'}
+  <table>
+    <tr>
+      <td valign="top">
+    {foreach from=$letters item=letter}
+  <fieldset class="tagLetter">
+    <legend class="tagLetterLegend">{$letter.TITLE}</legend>
+    <table class="tagLetterContent">
+      {foreach from=$letter.tags item=tag}
+      <tr class="tagLine">
+        <td><a href="{$tag.URL}">{$tag.NAME}</a></td>
+        <td class="nbEntries"><strong>{$tag.COUNTER}</strong> {'photos'|@translate}</td>
+      </tr>
+      {/foreach}
+    </table>
+  </fieldset>
+      {if $letter.CHANGE_COLUMN}
+      </td>
+      <td valign="top">
+      {/if}
+    {/foreach}
+      </td>
+    </tr>
+  </table>
+  {/if}
+{/if}
+
 </div> <!-- content -->