mirror of
https://github.com/Piwigo/Piwigo.git
synced 2026-07-20 08:33:03 +02:00
issue #1014 album manager redesign
This commit is contained in:
Yann Le Boudec
committed by
Pierrick Le Gall
Pierrick Le Gall
parent
10eacfb44d
commit
c9715d255d
@@ -417,6 +417,7 @@ foreach ($categories as $category)
|
||||
|
||||
'U_CHILDREN' => $cat_list_url.'&parent_id='.$category['id'],
|
||||
'U_EDIT' => $base_url.'album-'.$category['id'],
|
||||
'U_ADD_PHOTOS_ALBUM' => $base_url.'photos_add&album='.$category['id'],
|
||||
|
||||
'IS_VIRTUAL' => empty($category['dir'])
|
||||
);
|
||||
|
||||
@@ -48,7 +48,7 @@ function add_core_tabs($sheets, $tab_id)
|
||||
global $my_base_url;
|
||||
$sheets['list'] = array('caption' => '<span class="icon-menu"></span>'.l10n('List'), 'url' => $my_base_url.'cat_list');
|
||||
$sheets['move'] = array('caption' => '<span class="icon-move"></span>'.l10n('Move'), 'url' => $my_base_url.'cat_move');
|
||||
$sheets['permalinks'] = array('caption' => '<span class="icon-link"></span>'.l10n('Permalinks'), 'url' => $my_base_url.'permalinks');
|
||||
$sheets['permalinks'] = array('caption' => '<span class="icon-link-1"></span>'.l10n('Permalinks'), 'url' => $my_base_url.'permalinks');
|
||||
break;
|
||||
|
||||
case 'batch_manager':
|
||||
|
||||
@@ -104,7 +104,7 @@ TEXTAREA { cursor:text; font-size: 13px; }
|
||||
ul.thumbnails input { color:#666; font-size:10px; margin:0; background-color:#bbb; text-align: center;}
|
||||
.throw { font-size: 120%; line-height: 26px; padding-top: 10px; font-weight: bold; }
|
||||
label { cursor:pointer }
|
||||
.categoryLi, .menuLi { background: #ddd }
|
||||
.categoryLi, .menuLi { background: #F3F3F3; }
|
||||
.menuLi_hidden { background: #ccc !important; }
|
||||
a.Piwigo {
|
||||
font-family: verdana, arial, helvetica, sans-serif !important;
|
||||
@@ -121,7 +121,7 @@ TABLE.table2 { border: 2px solid #dddddd; }
|
||||
|
||||
*, *:focus, *:active, input:active, a:active, input:focus, a:focus { outline: none; -moz-outline-width: 0px; }
|
||||
A{
|
||||
color:#005E89;
|
||||
color:#3A3A3A;
|
||||
}
|
||||
|
||||
A:hover, A:active {
|
||||
@@ -289,14 +289,8 @@ UL.thumbnails li.rank-of-image {background-color: #ddd;}
|
||||
#pwgMain {padding-left:0}
|
||||
|
||||
.buttonLike, input[type="submit"], input[type="button"], input[type="reset"] {
|
||||
font-size:12px;
|
||||
font-weight:bold;
|
||||
letter-spacing:1px;
|
||||
border:none;
|
||||
background-color:#666;
|
||||
color:#fff;
|
||||
padding:4px 7px;
|
||||
margin-left:0;
|
||||
}
|
||||
|
||||
.buttonLike:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover {
|
||||
@@ -316,6 +310,9 @@ UL.thumbnails li.rank-of-image {background-color: #ddd;}
|
||||
cursor:not-allowed;
|
||||
}
|
||||
|
||||
#formCreateAlbum input[name="virtual_name"] {border: 1px solid #D5D5D5; transition: all 125ms ease-out;}
|
||||
#formCreateAlbum input[name="virtual_name"]:hover {border-color: #3C3C3C;}
|
||||
|
||||
p.albumTitle img {margin-bottom:-3px;}
|
||||
|
||||
.groups label>p {
|
||||
@@ -329,7 +326,7 @@ label>p.group_select {
|
||||
}
|
||||
|
||||
.userSeparator {
|
||||
color:#999;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
table.dataTable tr.even {
|
||||
@@ -400,4 +397,15 @@ table.dataTable thead th, table.dataTable.no-footer {
|
||||
border-color: #ff7700;
|
||||
background-color:#fff;
|
||||
}
|
||||
|
||||
FORM#categoryOrdering p.albumTitle a { color: #5B5B5B; }
|
||||
FORM#categoryOrdering p.albumActions a { border-left:1px solid #D6D6D6; }
|
||||
.albumInfos {color: #999999;}
|
||||
FORM#categoryOrdering p.albumActions a:hover {background-color: #FFA844; color: #3A3A3A;}
|
||||
FORM#categoryOrdering p.albumActions .userSeparator {border: 1px solid #E1E1E1;}
|
||||
#addAlbumOpen, #autoOrderOpen {border: 1px solid #D6D6D6; color: #5B5B5B;}
|
||||
#addAlbumOpen:hover, #autoOrderOpen:hover {border: 1px solid #aaa; text-decoration: none;}
|
||||
.font-checkbox:hover {color: #FFA844;}
|
||||
.font-checkbox.selected {color: #ffa646;}
|
||||
|
||||
/* beta-test ends */
|
||||
@@ -20,15 +20,20 @@ jQuery.fn.fontCheckbox = function() {
|
||||
if (!jQuery(this).is(':checked')) {
|
||||
jQuery(this).prev().toggleClass('icon-dot-circled icon-circle-empty');
|
||||
}
|
||||
else {
|
||||
jQuery(this).closest('label').addClass('selected');
|
||||
}
|
||||
});
|
||||
this.find('input[type=radio]').on('change', function() {
|
||||
jQuery('.font-checkbox input[type=radio][name="'+ jQuery(this).attr('name') +'"]').each(function() {
|
||||
jQuery(this).prev().removeClass();
|
||||
jQuery(this).closest('label').removeClass('selected');
|
||||
if (!jQuery(this).is(':checked')) {
|
||||
jQuery(this).prev().addClass('icon-circle-empty');
|
||||
}
|
||||
else {
|
||||
jQuery(this).prev().addClass('icon-dot-circled');
|
||||
jQuery(this).closest('label').addClass('selected');
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
@@ -60,8 +60,8 @@ jQuery(document).ready(function(){
|
||||
|
||||
<h2><span style="letter-spacing:0">{$CATEGORIES_NAV}</span> › {'Album list management'|@translate}</h2>
|
||||
<p class="showCreateAlbum" id="notManualOrder">
|
||||
<a href="#" id="addAlbumOpen" class="icon-plus-circled">{'create a new album'|@translate}</a>
|
||||
{if count($categories)}<span class="userSeparator">·</span><a href="#" id="autoOrderOpen" class="icon-sort-number-up">{'apply automatic sort order'|@translate}</a>{/if}
|
||||
<a href="#" id="addAlbumOpen" class="icon-plus">{'create a new album'|@translate}</a>
|
||||
{if count($categories)}<span class="userSeparator">·</span><a href="#" id="autoOrderOpen" class="icon-sort-alt-down">{'apply automatic sort order'|@translate}</a>{/if}
|
||||
{if ($PARENT_EDIT)}<span class="userSeparator">·</span><a href="{$PARENT_EDIT}" class="icon-pencil"></span>{'edit'|@translate}</a>{/if}
|
||||
</p>
|
||||
<form id="formCreateAlbum" action="{$F_ACTION}" method="post" style="display:none;">
|
||||
@@ -128,27 +128,29 @@ jQuery(document).ready(function(){
|
||||
{foreach from=$categories item=category}
|
||||
<li class="categoryLi{if $category.IS_VIRTUAL} virtual_cat{/if}" id="cat_{$category.ID}">
|
||||
<!-- category {$category.ID} -->
|
||||
<p class="albumTitle">
|
||||
<i class="icon-arrow-combo" title="{'Drag to re-order'|translate}"></i>
|
||||
<strong><a href="{$category.U_CHILDREN}" title="{'manage sub-albums'|@translate}">{$category.NAME}</a></strong>
|
||||
<span class="albumInfos"><span class="userSeparator">·</span> {$category.NB_PHOTOS|translate_dec:'%d photo':'%d photos'} <span class="userSeparator">·</span> {$category.NB_SUB_PHOTOS|translate_dec:'%d photo':'%d photos'} {$category.NB_SUB_ALBUMS|translate_dec:'in %d sub-album':'in %d sub-albums'}</span>
|
||||
</p>
|
||||
<div class="albumflex">
|
||||
<div class="albumflexblock">
|
||||
<p class="albumTitle">
|
||||
<i class="icon-arrow-combo" title="{'Drag to re-order'|translate}"></i>
|
||||
<strong><a href="{$category.U_CHILDREN}" title="{'manage sub-albums'|@translate}">{$category.NAME}</a></strong>
|
||||
</p>
|
||||
<span class="albumInfos"><span class="userSeparator">·</span> {$category.NB_PHOTOS|translate_dec:'%d photo':'%d photos'} <span class="userSeparator">·</span> {$category.NB_SUB_PHOTOS|translate_dec:'%d photo':'%d photos'} {$category.NB_SUB_ALBUMS|translate_dec:'in %d sub-album':'in %d sub-albums'}</span>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="catOrd[{$category.ID}]" value="{$category.RANK}">
|
||||
|
||||
<input type="hidden" name="catOrd[{$category.ID}]" value="{$category.RANK}">
|
||||
|
||||
<p class="albumActions">
|
||||
<a href="{$category.U_EDIT}"><span class="icon-pencil"></span>{'Edit'|@translate}</a>
|
||||
<span class="userSeparator">·</span><a href="{$category.U_CHILDREN}"><span class="icon-sitemap"></span>{'manage sub-albums'|@translate}</a>
|
||||
{if isset($category.U_SYNC) }
|
||||
<span class="userSeparator">·</span><a href="{$category.U_SYNC}"><span class="icon-exchange"></span>{'Synchronize'|@translate}</a>
|
||||
{/if}
|
||||
{if isset($category.U_DELETE) }
|
||||
<span class="userSeparator">·</span><a href="{$category.U_DELETE}" onclick="return confirm('{'Are you sure?'|@translate|@escape:javascript}');"><span class="icon-trash"></span>{'delete album'|@translate}</a>
|
||||
{/if}
|
||||
{if cat_admin_access($category.ID)}
|
||||
<span class="userSeparator">·</span><a href="{$category.U_JUMPTO}">{'jump to album'|@translate} →</a>
|
||||
{/if}
|
||||
</p>
|
||||
<p class="albumActions">
|
||||
<a href="{$category.U_EDIT}"><span class="icon-pencil"></span>{'Edit'|@translate}</a>
|
||||
<a href="{$category.U_CHILDREN}" class="actionTitle"><span class="icon-flow-tree"></span><span>{'sub-albums'|@translate}</span></a>
|
||||
{if isset($category.U_SYNC) }
|
||||
<a href="{$category.U_SYNC}"><span class="icon-exchange"></span>{'Synchronize'|@translate}</a>
|
||||
{/if}
|
||||
{if cat_admin_access($category.ID)}
|
||||
<a href="{$category.U_JUMPTO}"><span class="icon-eye">{'Visit Gallery'|@translate} </a>
|
||||
{/if}
|
||||
<a href="{$category.U_ADD_PHOTOS_ALBUM}"><span class="icon-plus">{'Add Photos'|@translate} </a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
{/foreach}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
/* .Content is on every pages so it is common and it will no longer be a specific css */
|
||||
.content h2 {margin: 0; padding: 5px 0.5em 5px 0.5em; text-align: right; font-size: 120%;}
|
||||
.content .navigationBar { margin: 10px 0; text-align: center; }
|
||||
.content form { text-align: left; }
|
||||
.content form { text-align: left; margin-left: 7px; margin-right: 9px;}
|
||||
.content dt { margin-bottom: 5px; font-style: italic;
|
||||
font-size: 110%; }
|
||||
ul.categoryActions { margin: 0 2px; width: auto; list-style-position:outside;
|
||||
@@ -170,8 +170,7 @@ LI.categoryLi {
|
||||
/*
|
||||
width: 100%;
|
||||
*/
|
||||
padding: 5px;
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 20px;
|
||||
border-radius:5px;
|
||||
}
|
||||
|
||||
@@ -917,7 +916,8 @@ html, body {height:100%; margin:0; padding:0;}
|
||||
.tabsheet a {
|
||||
display:block; font-size:11px; border:0;
|
||||
font-weight:bold; overflow:hidden; padding:10px 20px;
|
||||
text-align:right; text-decoration:none; margin: 0; }
|
||||
text-align:right; text-decoration:none; margin: 0;
|
||||
color: #898989; }
|
||||
.tabsheet a:first-letter { text-transform:capitalize; }
|
||||
.tabsheet li.selected_tab {
|
||||
border-bottom:none;
|
||||
@@ -1173,7 +1173,6 @@ INPUT[type="radio"], INPUT[type="checkbox"] {
|
||||
|
||||
LEGEND {
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
@@ -1234,7 +1233,6 @@ p#uploadWarningsSummary .showInfo {margin-left:3px;}
|
||||
p#uploadWarnings {display:none;text-align:left;margin-bottom:1em;font-size:90%;color:#999;}
|
||||
p#uploadModeInfos {text-align:left;margin-top:1em;font-size:90%;color:#999;}
|
||||
|
||||
#photosAddContent p.showFieldset {text-align:left;margin: 1em;}
|
||||
|
||||
#uploadForm .plupload_buttons, #uploadForm .plupload_progress { display:none !important; }
|
||||
#uploadForm #startUpload { margin:5px 0 15px 15px; padding:5px 10px; font-size:1.1em; }
|
||||
@@ -1329,6 +1327,7 @@ p#uploadModeInfos {text-align:left;margin-top:1em;font-size:90%;color:#999;}
|
||||
}
|
||||
#formCreateAlbum input[name="virtual_name"] {
|
||||
width:300px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Pending Comments */
|
||||
@@ -1347,14 +1346,32 @@ p#uploadModeInfos {text-align:left;margin-top:1em;font-size:90%;color:#999;}
|
||||
.commentFilter {text-align:left;margin:5px 1em;}
|
||||
.commentFilter .navigationBar {float:right; margin:0;}
|
||||
|
||||
FORM#categoryOrdering p.albumTitle {margin:0;}
|
||||
FORM#categoryOrdering p.albumActions, FORM#categoryOrdering span.albumInfos {visibility:hidden; margin:0}
|
||||
FORM#categoryOrdering .categoryLi:hover p.albumActions, FORM#categoryOrdering .categoryLi:hover span.albumInfos {visibility:visible;}
|
||||
FORM#categoryOrdering p.albumActions a {margin-right:0}
|
||||
FORM#categoryOrdering p.albumTitle {margin:0; margin-left: 5px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-bottom: 4px;}
|
||||
FORM#categoryOrdering p.albumTitle a {font-size: 14px; font-weight: 600;}
|
||||
FORM#categoryOrdering p.albumTitle i {display: none;}
|
||||
FORM#categoryOrdering p.albumActions {visibility:hidden; margin:0; height: 40px;}
|
||||
FORM#categoryOrdering .categoryLi:hover p.albumActions {visibility:visible;}
|
||||
FORM#categoryOrdering p.albumActions {display:flex;justify-content:center;align-items:center;}
|
||||
FORM#categoryOrdering p.albumActions a {
|
||||
margin-right:0;
|
||||
font-weight: bold;
|
||||
height: 95%;
|
||||
padding: 0 15px;
|
||||
padding-top: 22px;
|
||||
}
|
||||
|
||||
.albumInfos { font-size: 12px; }
|
||||
.actionTitle span {text-transform: capitalize;}
|
||||
|
||||
FORM#categoryOrdering p.albumActions a:hover {text-decoration: none;}
|
||||
FORM#categoryOrdering p.albumActions .userSeparator {margin:0 5px;}
|
||||
|
||||
.showCreateAlbum {text-align:left; margin:0 1em 1em 1em;line-height:22px;}
|
||||
.albumflex {display: flex; justify-content: space-between; padding: 10px 10px 0 10px;}
|
||||
.albumflex .albumflexblock {display: block; padding-left: 7px; max-width: 45%; height: 50px;}
|
||||
.showCreateAlbum {text-align:left; margin:0 1em 25px 20px; line-height:22px;}
|
||||
.showCreateAlbum .userSeparator {margin:0 5px;}
|
||||
#addAlbumOpen, #autoOrderOpen {padding: 7px 15px; font-weight: bold; font-size: 11px;}
|
||||
#addAlbumOpen::before ,#autoOrderOpen::before {margin-right: 10px; font-weight: bold; font-size: 15px;}
|
||||
#autoOrder p, #createAlbum p {text-align:left; margin:0 0 1em 0;}
|
||||
#autoOrder p.actionButtons, #createAlbum p.actionButtons {margin-bottom:0;}
|
||||
|
||||
@@ -1561,4 +1578,16 @@ fieldset#environment legend i[class*="icon-"] {
|
||||
#headActions a span {
|
||||
display:inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttonLike, input[type="submit"], input[type="button"], input[type="reset"] {
|
||||
font-size:12px;
|
||||
border:none;
|
||||
padding:13px 20px;
|
||||
margin-left:0;
|
||||
font-weight: bold;
|
||||
transition: all 125ms ease-out;
|
||||
}
|
||||
|
||||
.selectAlbum {border: 0;}
|
||||
.selectAlbumflex {display: flex; margin-left: 10px; margin-top: 10px;}
|
||||
|
||||
@@ -183,17 +183,13 @@ body .ui-resizable-autohide .ui-resizable-handle { display: none; } /* use 'body
|
||||
INPUT[type="text"].large { width: 317px; }
|
||||
|
||||
.buttonLike, input[type="button"], input[type="submit"], input[type="reset"] {
|
||||
color: #000;
|
||||
color: #3c3c3c;
|
||||
background-color: #ffa744;
|
||||
border: none;
|
||||
padding: 13px 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.buttonLike:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
|
||||
color:#000;
|
||||
text-decoration: none;
|
||||
|
||||
background-color:#f70;
|
||||
color:#000;
|
||||
cursor:pointer;
|
||||
@@ -385,4 +381,19 @@ table.qsearch_help_table td {
|
||||
color:#aaa;
|
||||
}
|
||||
|
||||
#wImg {border-color:#555;}
|
||||
#wImg {border-color:#555;}
|
||||
|
||||
FORM#categoryOrdering p.albumTitle a { color: #c0c0c0; }
|
||||
FORM#categoryOrdering p.albumActions a { border-left:1px solid #555; }
|
||||
.albumInfos {color: #808080;}
|
||||
FORM#categoryOrdering p.albumActions a:hover {background-color: #ffa646; color: #3A3A3A;}
|
||||
FORM#categoryOrdering p.albumActions .userSeparator {border: 1px solid #d5d5d5;}
|
||||
#addAlbumOpen, #autoOrderOpen {border: 1px solid #777; color: #c0c0c0;}
|
||||
#addAlbumOpen:hover, #autoOrderOpen:hover {border: 1px solid #aaa; text-decoration: none;}
|
||||
.font-checkbox {color: #898888;}
|
||||
.font-checkbox:hover {color: #ffa646;}
|
||||
.with-border legend, .with-border strong {color: #c0c0c0;}
|
||||
.font-checkbox.selected {color: #ffa646;}
|
||||
#formCreateAlbum input[name="virtual_name"] {border: 1px solid #7e7e7e; color: #F8F8F8; transition: all 125ms ease-out;}
|
||||
#formCreateAlbum input[name="virtual_name"]:hover {border-color: #A5A5A5;}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user