aboutsummaryrefslogtreecommitdiffstats
path: root/admin/themes
diff options
context:
space:
mode:
authorplegall <plg@piwigo.org>2012-02-20 19:28:43 +0000
committerplegall <plg@piwigo.org>2012-02-20 19:28:43 +0000
commit12bf0f72bb1e0c5d897bd7b11bea363cfb0b9e06 (patch)
tree2960b53953ba2ab478fce57bf23df2208256af5f /admin/themes
parent4c19a2443c0e4eab92563533eb6a62516d03cb4f (diff)
feature 2581: new design on albums list management.
icons removed, replaced by text links visible on :hover better ergonomy for automatic order: the "save manual order" submit button only appears when a change is detected in the album ordering. The "automatic sort order" becomes a dedicated fieldset, hidden by default, displayed "on user demand". new virtual album form displayed only "on user demand" cat_list, cat_move and permalinks are 3 tabs for the "Albums > Manage" link in the menubar. permalinks admin page slightly redesign: fieldsets instead of centered h3, "on user demand" form to add/modify permalinks. git-svn-id: http://piwigo.org/svn/trunk@13282 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to 'admin/themes')
-rw-r--r--admin/themes/clear/icon/cat_move.pngbin415 -> 249 bytes
-rw-r--r--admin/themes/clear/theme.css4
-rw-r--r--admin/themes/default/template/admin.tpl2
-rw-r--r--admin/themes/default/template/cat_list.tpl200
-rw-r--r--admin/themes/default/template/cat_move.tpl6
-rw-r--r--admin/themes/default/template/permalinks.tpl67
-rw-r--r--admin/themes/default/theme.css26
-rw-r--r--admin/themes/roma/theme.css4
8 files changed, 194 insertions, 115 deletions
diff --git a/admin/themes/clear/icon/cat_move.png b/admin/themes/clear/icon/cat_move.png
index c58178692..b3f937614 100644
--- a/admin/themes/clear/icon/cat_move.png
+++ b/admin/themes/clear/icon/cat_move.png
Binary files differ
diff --git a/admin/themes/clear/theme.css b/admin/themes/clear/theme.css
index 042f44042..5a717fcb2 100644
--- a/admin/themes/clear/theme.css
+++ b/admin/themes/clear/theme.css
@@ -116,7 +116,7 @@ INPUT.bigbutton:hover { background-color: #ddd; color:#0cc; border: 0; }
.throw { font-size: 120%; line-height: 26px; padding-top: 10px; font-weight: bold; }
label { cursor:pointer }
.categoryLi, .menuLi { background: #ddd }
-.virtual_cat, .menuLi_hidden { background: #ccc !important; }
+.menuLi_hidden { background: #ccc !important; }
a.Piwigo {
font-family: verdana, arial, helvetica, sans-serif !important;
font-size: 11px; font-weight: normal; letter-spacing: 0;
@@ -311,3 +311,5 @@ input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hove
background-color:#ff7700;
color:white;
}
+
+p.albumTitle img {margin-bottom:-3px;} \ No newline at end of file
diff --git a/admin/themes/default/template/admin.tpl b/admin/themes/default/template/admin.tpl
index f9da9fccf..a35aab58a 100644
--- a/admin/themes/default/template/admin.tpl
+++ b/admin/themes/default/template/admin.tpl
@@ -49,9 +49,7 @@ Raphael("menubarUsers", 20, 16).path("").scale(0.6, 0.6, 0, 0).attr({fill: "#464
<dd>
<ul>
<li><a href="{$U_CATEGORIES}">{'Manage'|@translate}</a></li>
- <li><a href="{$U_MOVE}">{'Move'|@translate}</a></li>
<li><a href="{$U_CAT_OPTIONS}">{'Properties'|@translate}</a></li>
- <li><a href="{$U_PERMALINKS}">{'Permalinks'|@translate}</a></li>
</ul>
</dd>
</dl>
diff --git a/admin/themes/default/template/cat_list.tpl b/admin/themes/default/template/cat_list.tpl
index 51c9f9b03..47c32ff75 100644
--- a/admin/themes/default/template/cat_list.tpl
+++ b/admin/themes/default/template/cat_list.tpl
@@ -1,93 +1,118 @@
-{footer_script require='jquery.ui.sortable'}
-jQuery(document).ready(function(){ldelim}
- jQuery(".catPos").hide();
- jQuery(".drag_button").show();
- jQuery(".categoryLi").css("cursor","move");
- jQuery(".categoryUl").sortable({ldelim}
- axis: "y",
- opacity: 0.8
- });
- jQuery("#categoryOrdering").submit(function(){ldelim}
- ar = jQuery('.categoryUl').sortable('toArray');
- for(i=0;i<ar.length;i++) {ldelim}
- cat = ar[i].split('cat_');
- document.getElementsByName('catOrd[' + cat[1] + ']')[0].value = i;
- }
- });
-
- jQuery("input[name=order_type]").click(function () {ldelim}
- jQuery("#automatic_order_params").hide();
- if (jQuery("input[name=order_type]:checked").val() == "automatic") {ldelim}
- jQuery("#automatic_order_params").show();
- }
- });
+{footer_script require='jquery.ui.sortable'}{literal}
+jQuery(document).ready(function(){
+ jQuery(".catPos").hide();
+ jQuery(".drag_button").show();
+ jQuery(".categoryLi").css("cursor","move");
+ jQuery(".categoryUl").sortable({
+ axis: "y",
+ opacity: 0.8,
+ update : function() {
+ jQuery("#manualOrder").show();
+ jQuery("#notManualOrder").hide();
+ jQuery("#autoOrder").hide();
+ jQuery("#createAlbum").hide();
+ },
+ });
+
+ jQuery("#categoryOrdering").submit(function(){
+ ar = jQuery('.categoryUl').sortable('toArray');
+ for(i=0;i<ar.length;i++) {
+ cat = ar[i].split('cat_');
+ document.getElementsByName('catOrd[' + cat[1] + ']')[0].value = i;
+ }
+ });
+
+ jQuery("input[name=order_type]").click(function () {
+ jQuery("#automatic_order_params").hide();
+ if (jQuery("input[name=order_type]:checked").val() == "automatic") {
+ jQuery("#automatic_order_params").show();
+ }
+ });
+
+ jQuery("#addAlbumOpen").click(function(){
+ jQuery("#createAlbum").toggle();
+ jQuery("input[name=virtual_name]").focus();
+ jQuery("#autoOrder").hide();
+ });
+
+ jQuery("#addAlbumClose").click(function(){
+ jQuery("#createAlbum").hide();
+ });
+
+
+ jQuery("#autoOrderOpen").click(function(){
+ jQuery("#autoOrder").toggle();
+ jQuery("#createAlbum").hide();
+ });
+
+ jQuery("#autoOrderClose").click(function(){
+ jQuery("#autoOrder").hide();
+ });
+
+ jQuery("#cancelManualOrder").click(function(){
+ jQuery(".categoryUl").sortable("cancel");
+ jQuery("#manualOrder").hide();
+ jQuery("#notManualOrder").show();
+ });
});
-{/footer_script}
+{/literal}{/footer_script}
+
+<h2><span style="letter-spacing:0">{$CATEGORIES_NAV}</span> &#8250; {'Album list management'|@translate}</h2>
-<h2>{'Album list management'|@translate}</h2>
+<form id="categoryOrdering" action="{$F_ACTION}" method="post">
+<input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
-<h3>{$CATEGORIES_NAV}</h3>
+<p class="showCreateAlbum">
+ <span id="notManualOrder">
+ <a href="#" id="addAlbumOpen">{'create a new album'|@translate}</a>
+ | <a href="#" id="autoOrderOpen">{'apply automatic sort order'|@translate}</a>
+ </span>
+ <span id="manualOrder" style="display:none;">
+ <input class="submit" name="submitManualOrder" type="submit" value="{'Save manual order'|@translate}">
+ {'... or '|@translate} <a href="#" id="cancelManualOrder">{'cancel manual order'|@translate}</a>
+ </span>
+</p>
-<form id="addVirtual" action="{$F_ACTION}" method="post">
- <p>
- <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
- {'Add a virtual album'|@translate} : <input type="text" name="virtual_name">
- <input class="submit" type="submit" value="{'Submit'|@translate}" name="submitAdd">
- {if count($categories)>9 }
- <a href="#EoP" class="button" style="border:0;">
- <img src="{$themeconf.admin_icon_dir}/page_end.png" title="{'Page end'|@translate}" alt="page_end" style="margin-bottom:-0.6em;"></a>
- {/if}
+<fieldset id="createAlbum" style="display:none;">
+ <legend>{'create a new album'|@translate}</legend>
+ <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
+
+ <p><strong>{'Album name'|@translate}</strong>
+ <br><input type="text" name="virtual_name">
</p>
-</form>
+ <p class="actionButtons">
+ <input class="submit" type="submit" value="{'Create'|@translate}" name="submitAdd">
+ <a href="#" id="addAlbumClose">{'Cancel'|@translate}</a>
+ </p>
+</fieldset>
{if count($categories) }
-<form id="categoryOrdering" action="{$F_ACTION}" method="post">
- <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
- <div class="orderParams">
- <input class="submit" name="submitOrder" type="submit" value="{'Save order'|@translate}">
- <label><input type="radio" name="order_type" value="manual" checked="checked"> {'manual order'|@translate}</label>
- <label><input type="radio" name="order_type" value="automatic"> {'automatic order'|@translate}</label>
- <span id="automatic_order_params" style="display:none">
- <select name="ascdesc">
- <option value="asc">{'ascending'|@translate}</option>
- <option value="desc">{'descending'|@translate}</option>
- </select>
- <label><input type="checkbox" name="recursive"> {'Apply to sub-albums'|@translate}</label>
- </span>
- </div>
+<fieldset id="autoOrder" style="display:none;">
+ <legend>{'Automatic sort order'|@translate}</legend>
+ <p><strong>{'Sort order'|@translate}</strong>
+ <br><label><input type="radio" value="asc" name="ascdesc" checked="checked">{'ascending'|@translate}</label>
+ <br><label><input type="radio" value="desc" name="ascdesc">{'descending'|@translate}</label>
+ </p>
+
+ <p>
+ <label><input type="checkbox" name="recursive"> <strong>{'Apply to sub-albums'|@translate}</strong></label>
+ </p>
+
+ <p class="actionButtons">
+ <input class="submit" name="submitAutoOrder" type="submit" value="{'Save order'|@translate}">
+ <a href="#" id="autoOrderClose">{'Cancel'|@translate}</a>
+ </p>
+</fieldset>
<ul class="categoryUl">
{foreach from=$categories item=category}
<li class="categoryLi{if $category.IS_VIRTUAL} virtual_cat{/if}" id="cat_{$category.ID}">
<!-- category {$category.ID} -->
- <ul class="categoryActions">
- {if cat_admin_access($category.ID)}
- <li><a href="{$category.U_JUMPTO}" title="{'jump to album'|@translate}"><img src="{$themeconf.admin_icon_dir}/category_jump-to.png" alt="{'jump to album'|@translate}"></a></li>
- {/if}
- <li><a href="{$category.U_EDIT}" title="{'Edit album'|@translate}"><img src="{$themeconf.admin_icon_dir}/category_edit.png" alt="{'Edit'|@translate}"></a></li>
- {if isset($category.U_MANAGE_ELEMENTS) }
- <li><a href="{$category.U_MANAGE_ELEMENTS}" title="{'manage album photos'|@translate}"><img src="{$themeconf.admin_icon_dir}/category_elements.png" alt="{'Photos'|@translate}"></a></li>
- {/if}
- <li><a href="{$category.U_CHILDREN}" title="{'manage sub-albums'|@translate}"><img src="{$themeconf.admin_icon_dir}/category_children.png" alt="{'sub-albums'|@translate}"></a></li>
- {if isset($category.U_MANAGE_PERMISSIONS) }
- <li><a href="{$category.U_MANAGE_PERMISSIONS}" title="{'Edit album permissions'|@translate}" ><img src="{$themeconf.admin_icon_dir}/category_permissions.png" alt="{'Permissions'|@translate}"></a></li>
- {/if}
- {if isset($category.U_SYNC) }
- <li><a href="{$category.U_SYNC}" title="{'Synchronize'|@translate}"><img src="{$ROOT_URL}{$themeconf.admin_icon_dir}/synchronize.png" alt="{'Synchronize'|@translate}"></a></li>
- {/if}
- {if isset($category.U_DELETE) }
- <li><a href="{$category.U_DELETE}" title="{'delete album'|@translate}" onclick="return confirm('{'Are you sure?'|@translate|@escape:javascript}');"><img src="{$themeconf.admin_icon_dir}/category_delete.png" alt="{'delete album'|@translate}"></a></li>
- {/if}
- </ul>
-
- <p>
- <img src="{$themeconf.admin_icon_dir}/cat_move.png" class="button drag_button" style="display:none;" alt="{'Drag to re-order'|@translate}" title="{'Drag to re-order'|@translate}">
+ <p class="albumTitle">
+<img src="{$themeconf.admin_icon_dir}/cat_move.png" class="button drag_button" style="display:none;" alt="{'Drag to re-order'|@translate}" title="{'Drag to re-order'|@translate}">
<strong><a href="{$category.U_CHILDREN}" title="{'manage sub-albums'|@translate}">{$category.NAME}</a></strong>
- {if $category.IS_VIRTUAL}
- <img src="{$themeconf.admin_icon_dir}/virt_category.png" alt="{'Virtual album'|@translate}">
- {/if}
</p>
<p class="catPos">
@@ -97,10 +122,29 @@ jQuery(document).ready(function(){ldelim}
</label>
</p>
+<p class="albumActions">
+ <a href="{$category.U_EDIT}">{'Edit'|@translate}</a>
+ {if isset($category.U_MANAGE_ELEMENTS) }
+ | <a href="{$category.U_MANAGE_ELEMENTS}">{'manage album photos'|@translate}</a>
+ {/if}
+ | <a href="{$category.U_CHILDREN}">{'manage sub-albums'|@translate}</a>
+ {if isset($category.U_MANAGE_PERMISSIONS) }
+ | <a href="{$category.U_MANAGE_PERMISSIONS}">{'Permissions'|@translate}</a>
+ {/if}
+ {if isset($category.U_SYNC) }
+ | <a href="{$category.U_SYNC}">{'Synchronize'|@translate}</a>
+ {/if}
+ {if isset($category.U_DELETE) }
+ | <a href="{$category.U_DELETE}" onclick="return confirm('{'Are you sure?'|@translate|@escape:javascript}');">{'delete album'|@translate}</a>
+{/if}
+{if cat_admin_access($category.ID)}
+|
+<a href="{$category.U_JUMPTO}">{'jump to album'|@translate} →</a>
+{/if}
+</p>
+
</li>
{/foreach}
</ul>
-</form>
-
-<a name="EoP"></a>
{/if}
+</form>
diff --git a/admin/themes/default/template/cat_move.tpl b/admin/themes/default/template/cat_move.tpl
index d0dc98e13..d8a9c9430 100644
--- a/admin/themes/default/template/cat_move.tpl
+++ b/admin/themes/default/template/cat_move.tpl
@@ -1,6 +1,3 @@
-
-{include file='include/resize.inc.tpl'}
-
<div class="titrePage">
<h2>{'Move albums'|@translate}</h2>
</div>
@@ -28,9 +25,8 @@
</fieldset>
- <p>
+ <p style="text-align:left;">
<input class="submit" type="submit" name="submit" value="{'Submit'|@translate}">
- <input class="submit" type="reset" name="reset" value="{'Reset'|@translate}">
</p>
</form>
diff --git a/admin/themes/default/template/permalinks.tpl b/admin/themes/default/template/permalinks.tpl
index 57d8afa37..8ec0f3a6d 100644
--- a/admin/themes/default/template/permalinks.tpl
+++ b/admin/themes/default/template/permalinks.tpl
@@ -1,32 +1,62 @@
+{footer_script require='jquery.ui.sortable'}{literal}
+jQuery(document).ready(function(){
+ jQuery("#addPermalinkOpen").click(function(){
+ jQuery("#addPermalink").show();
+ jQuery("#showAddPermalink").hide();
+ });
+
+ jQuery("#addPermalinkClose").click(function(){
+ jQuery("#addPermalink").hide();
+ jQuery("#showAddPermalink").show();
+ });
+});
+{/literal}{/footer_script}
+
+{literal}
+<style>
+#showAddPermalink {text-align:left;margin-left:1em;margin-top:0;}
+form fieldset p {margin:0 0 1em 0;}
+form fieldset p.actionButtons {margin-bottom:0}
+</style>
+{/literal}
+
<div class="titrePage">
<h2>{'Permalinks'|@translate}</h2>
</div>
-<form method="post" action="">
-<fieldset><legend>{'Add/delete a permalink'|@translate}</legend>
- <label>{'Album'|@translate}:
+<p id="showAddPermalink"><a href="#" id="addPermalinkOpen">{'Add/delete a permalink'|@translate}</a></p>
+
+<form method="post" action="" id="addPermalink" style="display:none">
+<fieldset>
+ <legend>{'Add/delete a permalink'|@translate}</legend>
+ <p>
+ <strong>{'Album'|@translate}</strong>
+ <br>
<select name="cat_id">
<option value="0">------</option>
{html_options options=$categories selected=$categories_selected}
</select>
- </label>
-
- <label>{'Permalink'|@translate}:
- <input name="permalink">
- </label>
+ </p>
- <label>{'Save to permalink history'|@translate}:
- <input type="checkbox" name="save" checked="checked">
- </label>
+ <p>
+ <strong>{'Permalink'|@translate}</strong>
+ <br><input name="permalink">
+ </p>
<p>
+ <label><input type="checkbox" name="save" checked="checked"> <strong>{'Save to permalink history'|@translate}</strong></label>
+ </p>
+
+ <p class="actionButtons">
<input type="submit" class="submit" name="set_permalink" value="{'Submit'|@translate}">
+ <a href="#" id="addPermalinkClose">{'Cancel'|@translate}</a>
</p>
- </fieldset>
+</fieldset>
</form>
-<h3>{'Permalinks'|@translate}</h3>
-<table class="table2">
+<fieldset>
+ <legend>{'Permalinks'|@translate}</legend>
+<table class="table2" style="margin:0">
<tr class="throw">
<td>Id {$SORT_ID}</td>
<td>{'Album'|@translate} {$SORT_NAME}</td>
@@ -40,16 +70,18 @@
</tr>
{/foreach}
</table>
+</fieldset>
-<h3>{'Permalink history'|@translate} <a name="old_permalinks"></a></h3>
-<table class="table2">
+<fieldset>
+ <legend>{'Permalink history'|@translate} <a name="old_permalinks"></a></legend>
+<table class="table2" style="margin:0">
<tr class="throw">
<td>Id {$SORT_OLD_CAT_ID}</td>
<td>{'Album'|@translate}</td>
<td>{'Permalink'|@translate} {$SORT_OLD_PERMALINK}</td>
<td>{'Deleted on'|@translate} {$SORT_OLD_DATE_DELETED}</td>
<td>{'Last hit'|@translate} {$SORT_OLD_LAST_HIT}</td>
- <td style="width:20px;">{'Hit'|@translate} {$SORT_OLD_HIT}</td>
+ <td>{'Hit'|@translate} {$SORT_OLD_HIT}</td>
<td style="width:5px;"></td>
</tr>
{foreach from=$deleted_permalinks item=permalink}
@@ -64,3 +96,4 @@
</tr>
{/foreach}
</table>
+</fieldset> \ No newline at end of file
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
index dd49c3ee4..53f220fb6 100644
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -151,26 +151,24 @@ SELECT.categoryList {
width: 100%;
}
-FORM#categoryOrdering {
- padding-left: 1em; /* same as FIELDSET margin (there is no fieldset in this form) */
- padding-right: 1em; /* same as FIELDSET margin (there is no fieldset in this form) */
-}
FORM#categoryOrdering p {
text-align: left;
- margin-top: 1em;
- margin-bottom: 1em;
+ /* margin-top: 1em; */
+ /* margin-bottom: 1em; */
}
UL.categoryUl {
list-style: none;
padding: 0;
- margin: 0;
+ margin: 1em;
}
LI.categoryLi {
+/*
width: 100%;
- border: 1px solid #666;
- padding: 0px 5px;
+*/
+ padding: 5px;
margin-bottom: 5px;
+ border-radius:5px;
}
FORM#categoryOrdering UL.categoryActions {
@@ -1072,4 +1070,12 @@ p#uploadModeInfos {text-align:left;margin-top:1em;font-size:90%;color:#999;}
#pendingComments .bottomButtons {
text-align:left;
-} \ No newline at end of file
+}
+
+FORM#categoryOrdering p.albumTitle {margin:0;}
+FORM#categoryOrdering p.albumActions {visibility:hidden; margin:0}
+FORM#categoryOrdering .categoryLi:hover p.albumActions {visibility:visible;}
+
+.showCreateAlbum {text-align:left; margin:0 1em 1em 1em;line-height:22px;}
+#autoOrder p, #createAlbum p {text-align:left; margin:0 0 1em 0;}
+#autoOrder p.actionButtons, #createAlbum p.actionButtons {margin-bottom:0;} \ No newline at end of file
diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css
index 02830f05e..238148a4b 100644
--- a/admin/themes/roma/theme.css
+++ b/admin/themes/roma/theme.css
@@ -85,8 +85,8 @@ INPUT[type="submit"]:hover , INPUT[type="reset"]:hover { cursor: pointer; }
INPUT.bigbutton:hover { background-color: #222; color:#f33; border: 0; }
.throw { font-size: 120%; line-height: 26px; padding-top: 10px; font-weight: bold; color: #ff3363; }
label { cursor:pointer }
-.categoryLi, .menuLi { background: #222 }
-.virtual_cat, .menuLi_hidden { background: #333 !important; }
+.categoryLi, .menuLi { background: #333 }
+.menuLi_hidden { background: #333 !important; }
a.Piwigo {
font-family: verdana, arial, helvetica, sans-serif !important;
font-size: 11px; font-weight: normal; letter-spacing: 0;