feature:2884 Display "i" tooltip on themes

+ simplify layout (like plugins_installed)

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

2 files changed, 75 insertions, 52 deletions

diff --git a/admin/themes/default/template/themes_installed.tpl b/admin/themes/default/template/themes_installed.tpl
index c1c5eb66b..d2f0401fb 100644
--- a/admin/themes/default/template/themes_installed.tpl
+++ b/admin/themes/default/template/themes_installed.tpl
@@ -1,8 +1,18 @@
 {include file='include/colorbox.inc.tpl'} 
+
 {footer_script}{literal}
 jQuery(document).ready(function() {
-  $("a.preview-box").colorbox(); 
-}); 
+  $("a.preview-box").colorbox();
+  
+  jQuery('.showInfo').tipTip({
+    'delay' : 0,
+    'fadeIn' : 200,
+    'fadeOut' : 200,
+    'maxWidth':'300px',
+    'keepAlive':true,
+    'activation':'click'
+  });
+});
 {/literal}{/footer_script}
 
 <div class="titrePage">
@@ -11,66 +21,80 @@ jQuery(document).ready(function() {
 
 <div id="themesContent">
 
-<fieldset>
-<legend>{'Active Themes'|@translate}</legend>
-{if isset($active_themes)}
-<div class="themeBoxes">
-{foreach from=$active_themes item=theme}
-  <div class="themeBox{if $theme.is_default} themeDefault{/if}">
-    <div class="themeName">{$theme.name}{if $theme.is_default} <em>({'default'|@translate})</em>{/if} {if $theme.mobile} <em>({'Mobile'|@translate})</em>{/if}</div>
-    <div class="themeShot"><a href="{$theme.screenshot}" class="preview-box" title="{$theme.name}"><img src="{$theme.screenshot}" alt=""></a></div>
-    <div class="themeActions">
-      <div>
-{if $theme.deactivable}
-      <a href="{$deactivate_baseurl}{$theme.id}" class="tiptip" title="{'Forbid this theme to users'|@translate}">{'Deactivate'|@translate}</a>
-{else}
-      <span title="{$theme.deactivate_tooltip}" class="tiptip">{'Deactivate'|@translate}</span>
-{/if}
-      
-{if not $theme.is_default}
-      | <a href="{$set_default_baseurl}{$theme.id}" class="tiptip" title="{'Set as default theme for unregistered and new users'|@translate}">{'Default'|@translate}</a>
-{/if}
-{if isset($theme.admin_uri)}
-      <br><a href="{$theme.admin_uri}" class="tiptip" title="{'Configuration'|@translate}">{'Configuration'|@translate}</a>
-{/if}
-      </div>
-    </div> <!-- themeActions -->
-  </div>
-{/foreach}
-</div> <!-- themeBoxes -->
+{assign var='field_name' value='null'} {* <!-- 'counter' for fieldset management --> *}
+{foreach from=$tpl_themes item=theme}
+    
+{if $field_name != $theme.STATE}
+  {if $field_name != 'null'}
+    </div>
+  </fieldset>
+  {/if}
+  
+  <fieldset>
+    <legend>
+    {if $theme.STATE == 'active'}
+      {'Active Themes'|@translate}
+    {else}
+      {'Inactive Themes'|@translate}
+    {/if}
+    </legend>
+    <div class="themeBoxes">
+  {assign var='field_name' value=$theme.STATE}
 {/if}
-</fieldset>
 
-{if isset($inactive_themes)}
-<fieldset>
-<legend>{'Inactive Themes'|@translate}</legend>
-<div class="themeBoxes">
-{foreach from=$inactive_themes item=theme}
-  <div class="themeBox">
-    <div class="themeName">{$theme.name}{if $theme.mobile} <em>({'Mobile'|@translate})</em>{/if}</div>
-    <div class="themeShot"><a href="{$theme.screenshot}" class="preview-box" title="{$theme.name}"><img src="{$theme.screenshot}" alt=""></a></div>
+  {if not empty($theme.AUTHOR)}
+    {if not empty($theme.AUTHOR_URL)}
+      {assign var='author' value="<a href='%s'>%s</a>"|@sprintf:$theme.AUTHOR_URL:$theme.AUTHOR}
+    {else}
+      {assign var='author' value='<u>'|cat:$theme.AUTHOR|cat:'</u>'}
+    {/if}
+  {/if}
+  {if not empty($theme.VISIT_URL)}
+    {assign var='version' value="<a class='externalLink' href='"|cat:$theme.VISIT_URL|cat:"'>"|cat:$theme.VERSION|cat:"</a>"}
+  {else}
+    {assign var='version' value=$theme.VERSION}
+  {/if}
+  
+  <div class="themeBox{if $theme.IS_DEFAULT} themeDefault{/if}">
+    <div class="themeName">
+      {$theme.NAME} {if $theme.IS_DEFAULT}<em>({'default'|@translate})</em>{/if} {if $theme.IS_MOBILE}<em>({'Mobile'|@translate})</em>{/if}
+      <a class="showInfo" title="{if !empty($author)}{'By %s'|@translate|@sprintf:$author} | {/if}{'Version'|@translate} {$version}<br/>{$theme.DESC|@escape:'html'}">i</a>
+    </div>
+    <div class="themeShot"><a href="{$theme.SCREENSHOT}" class="preview-box" title="{$theme.NAME}"><img src="{$theme.SCREENSHOT}" alt=""></a></div>
     <div class="themeActions">
       <div>
-  {if $theme.activable}
-      <a href="{$activate_baseurl}{$theme.id}" title="{'Make this theme available to users'|@translate}" class="tiptip">{'Activate'|@translate}</a>
+{if $theme.STATE == 'active'}
+  {if $theme.DEACTIVABLE}
+      <a href="{$deactivate_baseurl}{$theme.ID}" class="tiptip" title="{'Forbid this theme to users'|@translate}">{'Deactivate'|@translate}</a>
   {else}
-      <span title="{$theme.activate_tooltip}" class="tiptip">{'Activate'|@translate}</span>
+      <span title="{$theme.DEACTIVATE_TOOLTIP}" class="tiptip">{'Deactivate'|@translate}</span>
   {/if}
 
+  {if not $theme.IS_DEFAULT}
+      | <a href="{$set_default_baseurl}{$theme.ID}" class="tiptip" title="{'Set as default theme for unregistered and new users'|@translate}">{'Default'|@translate}</a>
+  {/if}
+  {if $theme.ADMIN_URI}
+      <br><a href="{$theme.ADMIN_URI}" class="tiptip" title="{'Configuration'|@translate}">{'Configuration'|@translate}</a>
+  {/if}
+{else}
+  {if $theme.ACTIVABLE}
+      <a href="{$activate_baseurl}{$theme.ID}" title="{'Make this theme available to users'|@translate}" class="tiptip">{'Activate'|@translate}</a>
+  {else}
+      <span title="{$theme.ACTIVATE_TOOLTIP}" class="tiptip">{'Activate'|@translate}</span>
+  {/if}
       |
-
-  {if $theme.deletable}
-      <a href="{$delete_baseurl}{$theme.id}" onclick="return confirm('{'Are you sure?'|@translate|@escape:javascript}');" title="{'Delete this theme'|@translate}">{'Delete'|@translate}</a>
+  {if $theme.DELETABLE}
+      <a href="{$delete_baseurl}{$theme.ID}" onclick="return confirm('{'Are you sure?'|@translate|@escape:javascript}');" title="{'Delete this theme'|@translate}">{'Delete'|@translate}</a>
   {else}
-      <span title="{$theme.delete_tooltip}" class="tiptip">{'Delete'|@translate}</span>
+      <span title="{$theme.DELETE_TOOLTIP}" class="tiptip">{'Delete'|@translate}</span>
   {/if}
+{/if}
       </div>
-    </div>
-    
+    </div> <!-- themeActions -->
   </div>
+  
 {/foreach}
 </div> <!-- themeBoxes -->
 </fieldset>
-{/if}
 
 </div> <!-- themesContent -->
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
index a3b27e309..ce8b78b9e 100644
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -758,10 +758,10 @@ html, body {height:100%; margin:0; padding:0;}
 #thePopuphelpPage #pwgHead {display:none}
 #thePopuphelpPage #footer  {display:none}
 
-.themeBox {display:inline-table; text-align:center; height:192px; background-color:#eee; margin:5px; -moz-border-radius:5px; overflow:hidden; }
+.themeBox {display:inline-table; text-align:center; height:192px; background-color:#eee; margin:5px; border-radius:5px; overflow:hidden; }
 
 .themeBox IMG {border:1px solid white; margin:0 15px;}
-.themeName {font-size:1.1em; margin:5px 0;}
+.themeName {font-size:1em; margin:5px 0; position:relative; }
 .themeActions {display: table-row; font-size:12px; height: 43px; }
 .themeActions DIV {display: table-cell; vertical-align: middle; line-height:18px; }
 .themeActions A {}
@@ -864,7 +864,7 @@ h2:lang(en) { text-transform:capitalize; }
 .languageActions {display: table-row; font-size:12px; }
 .languageActions DIV {display: table-cell; vertical-align: middle; line-height:18px; }
 
-#ui-datepicker-div {-moz-border-radius:5px;}
+#ui-datepicker-div {-moz-border-radius:5px; border-radius:5px;}
 #ui-datepicker-div .ui-icon-circle-triangle-w, #ui-datepicker-div .ui-icon-circle-triangle-e {color:transparent;}
 #ui-datepicker-div A.ui-datepicker-prev, #ui-datepicker-div A.ui-datepicker-next {background-color:transparent;}
 #ui-datepicker-div A.ui-datepicker-prev:hover, #ui-datepicker-div A.ui-datepicker-next:hover {-moz-border-radius:5px;}
@@ -1100,7 +1100,6 @@ input[type="text"].dError {border-color:#ff7070; background-color:#FFe5e5;}
   border-radius:10px;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
-  -border-radius:10px;
   margin-left:5px;
 }