From 7eece49c4fa8f699ced01012808a4fc335c7aa3d Mon Sep 17 00:00:00 2001 From: Zacharie Date: Mon, 10 Aug 2020 10:38:22 +0200 Subject: [PATCH] Issue #1206: Implement new album manager --- admin/cat_list.php | 82 +-------- admin/themes/clear/theme.css | 53 ++++-- admin/themes/default/template/cat_list.tpl | 189 +++++---------------- admin/themes/default/theme.css | 179 ++++++++++++++++--- admin/themes/roma/theme.css | 15 +- 5 files changed, 237 insertions(+), 281 deletions(-) diff --git a/admin/cat_list.php b/admin/cat_list.php index ab0f7d54d..d5a46b82a 100644 --- a/admin/cat_list.php +++ b/admin/cat_list.php @@ -161,7 +161,7 @@ elseif (isset($_POST['submitAdd'])) $output_create = create_virtual_category( $_POST['virtual_name'], @$_GET['parent_id'] - ); + ); invalidate_user_cache(); if (isset($output_create['error'])) @@ -174,86 +174,6 @@ elseif (isset($_POST['submitAdd'])) $page['infos'][] = $output_create['info'].' '.l10n('Edit album').''; } } -// save manual category ordering -elseif (isset($_POST['submitManualOrder'])) -{ - asort($_POST['catOrd'], SORT_NUMERIC); - save_categories_order(array_keys($_POST['catOrd'])); - - $page['infos'][] = l10n('Album manual order was saved'); -} -elseif (isset($_POST['submitAutoOrder'])) -{ - if (!isset($sort_orders[ $_POST['order_by'] ])) - { - die('Invalid sort order'); - } - - $query = ' -SELECT id - FROM '.CATEGORIES_TABLE.' - WHERE id_uppercat '. - (!isset($_GET['parent_id']) ? 'IS NULL' : '= '.$_GET['parent_id']).' -;'; - $category_ids = array_from_query($query, 'id'); - - if (isset($_POST['recursive'])) - { - $category_ids = get_subcat_ids($category_ids); - } - - $categories = array(); - $sort = array(); - - list($order_by_field, $order_by_asc) = explode(' ', $_POST['order_by']); - - $order_by_date = false; - if (strpos($order_by_field, 'date_') === 0) - { - $order_by_date = true; - - $ref_dates = get_categories_ref_date( - $category_ids, - $order_by_field, - 'ASC' == $order_by_asc ? 'min' : 'max' - ); - } - - $query = ' -SELECT id, name, id_uppercat - FROM '.CATEGORIES_TABLE.' - WHERE id IN ('.implode(',', $category_ids).') -;'; - $result = pwg_query($query); - while ($row = pwg_db_fetch_assoc($result)) - { - if ($order_by_date) - { - $sort[] = $ref_dates[ $row['id'] ]; - } - else - { - $sort[] = remove_accents($row['name']); - } - - $categories[] = array( - 'id' => $row['id'], - 'id_uppercat' => $row['id_uppercat'], - ); - } - - array_multisort( - $sort, - SORT_REGULAR, - 'ASC' == $order_by_asc ? SORT_ASC : SORT_DESC, - $categories - ); - - save_categories_order($categories); - - $page['infos'][] = l10n('Albums automatically sorted'); -} - // +-----------------------------------------------------------------------+ // | Navigation path | // +-----------------------------------------------------------------------+ diff --git a/admin/themes/clear/theme.css b/admin/themes/clear/theme.css index 60d7cf1f6..a0f0ad73e 100644 --- a/admin/themes/clear/theme.css +++ b/admin/themes/clear/theme.css @@ -102,7 +102,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: #F3F3F3; } +.menuLi { background: #F3F3F3; } .menuLi_hidden { background: #ccc !important; } a.Piwigo { font-family: verdana, arial, helvetica, sans-serif !important; @@ -113,10 +113,6 @@ a.Piwigo:hover span.Piwigo { } TABLE.table2 { border: 2px solid #dddddd; } -.categoryUl>li:not(.virtual_cat) { - background:url(images/stripe-cat.png); -} - *, *:focus, *:active, input:active, a:active, input:focus, a:focus { outline: none; -moz-outline-width: 0px; } A{ color:#3A3A3A; @@ -666,13 +662,6 @@ table.dataTable thead th, table.dataTable.no-footer { background-color:#fff; } -FORM#categoryOrdering p.albumTitle a { color: #5B5B5B; } -FORM#categoryOrdering p.albumActions a { border-left:1px solid #D6D6D6; background-color: #E8E8E8;} -.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;} .afterUploadActions a {color: #3C3C3C; font-weight: bold; background-color: #FFA646;} .afterUploadActions a:hover {text-decoration: none; background-color: #ff7700;} .font-checkbox:hover {color: #FFA844;} @@ -738,6 +727,46 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; #batchManagerGlobal .ui-slider-range.ui-widget-header.ui-corner-all {border: 1px solid #ffaf58;} #batchManagerGlobal .font-checkbox.selected {color: #777;} +/* Category List */ +.categoryContainer { + margin: 0; +} + +.categoryBox, .addAlbum{ + background-color: #fafafa; + box-shadow: 0px 2px 5px #00000024; +} + +.addAlbumHead p { + color: #3C3C3C; +} + +.addAlbum form input { + background-color: white; + border: 1px solid #d5d5d5; +} + +.albumTitle { + color: #3c3c3c; +} + +.albumInfos { + color: #aaa; +} + +.albumActions a { + color: #848484; +} + +.albumActions a:hover { + color: #3c3c3c; + text-decoration: none; +} + +.albumActions > span { + color: #c6c6c6; +} + .icon-red { background-color: #ffcfcf; color: #ff5252; diff --git a/admin/themes/default/template/cat_list.tpl b/admin/themes/default/template/cat_list.tpl index 43c82f7eb..f96464157 100644 --- a/admin/themes/default/template/cat_list.tpl +++ b/admin/themes/default/template/cat_list.tpl @@ -2,158 +2,55 @@ {footer_script require='jquery.ui.sortable'}{literal} jQuery(document).ready(function(){ - 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("#formAutoOrder").hide(); - jQuery("#formCreateAlbum").hide(); - } - }); - jQuery("#categoryOrdering").submit(function(){ - ar = jQuery('.categoryUl').sortable('toArray'); - for(i=0;i{$CATEGORIES_NAV} -

- {'create a new album'|@translate} - {if count($categories)}·{'apply automatic sort order'|@translate}{/if} - {if ($PARENT_EDIT)}·{'edit'|@translate}{/if} -

- -{if count($categories)} - - -{/if} +
+ +
+ +
+ {$category.NAME} +
+

{$category.NB_PHOTOS|translate_dec:'%d photo':'%d photos'}

{$category.NB_SUB_PHOTOS|translate_dec:'%d photo':'%d photos'} {$category.NB_SUB_ALBUMS|translate_dec:'in %d sub-album':'in %d sub-albums'}

 -
- - - -{if count($categories)} - -{/if} -
+ {/if} + diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css index 72ac8a42f..b3b3bfe88 100644 --- a/admin/themes/default/theme.css +++ b/admin/themes/default/theme.css @@ -152,36 +152,165 @@ TABLE.plugins TR TD { padding: 4px 10px; } TABLE.languages TR TD { padding: 7px 20px; } -/* categoryOrdering */ -FORM#categoryOrdering .orderParams { - line-height:30px; - margin-bottom:10px; +/* Category List */ +.categoryContainer { + display: flex; + flex-wrap: wrap; + justify-content: center; } -SELECT.categoryList { - width: 100%; +.categoryBox, .addAlbum { + position: relative; + text-align: left; + height: 300px; + width: 220px; + margin: 15px; + border-radius: 10px; } -FORM#categoryOrdering p { - text-align: left; - /* margin-top: 1em; */ - /* margin-bottom: 1em; */ -} -UL.categoryUl { - list-style: none; - padding: 0; - margin: 1em; +.albumIcon { + height: 80px; + display: flex; + align-items: center; + justify-content: center; } -LI.categoryLi { -/* - width: 100%; -*/ - margin-bottom: 20px; - border-radius:5px; +.albumIcon span{ + font-size: 19px; + width: 27px; + padding: 10px; + border-radius: 30px; } +.albumTitle { + font-size: 16px; + padding: 0px 15px; + font-weight: bold; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + text-align: center; +} +.albumInfos { + text-align: center; + color: #aaa; + font-weight: 600; +} + +.albumInfos p { + margin: 0; +} + +.albumActions { + position: absolute; + bottom: 5px; + display: flex; + flex-direction: column; + width: 90%; + overflow: hidden; + margin-left: 20px; + margin-bottom: 10px; +} + +.albumActions a, .albumActions span { + margin: 5px; + font-size: 14px; + text-transform: capitalize; + font-weight: bold; + transition: 0.2s ease; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +.albumActions a span, .albumActions span span{ + margin: 10px; +} + +.addAlbum { + display: flex; + flex-direction: column; + justify-content: space-around; + cursor: pointer; +} + +.addAlbum.input-mode { + cursor: auto; +} + +.addAlbum label { + margin: 0; + border-radius: 5px 5px 0 0; + padding: 2px; + position: absolute; + left: 16px; + font-size: 14px; + color: #3C3C3C; +} + +.addAlbumHead { + font-size: 16px; + display: flex; + flex-direction: column; + align-items: center; + margin-top: -10px; + transform: translateY(75px); + transition: 0.4s ease; + transition-delay: 0.4s; + padding: 110px 0px; +} + +.addAlbum.input-mode .addAlbumHead { + transition-delay: 0s; + padding: 0px; +} + +.addAlbumHead span { + font-size: 19px; + width: 27px; + height: 27px; + padding: 10px; + border-radius: 30px; + margin: 10px auto; +} + +.addAlbumHead p { + font-weight: 700; + margin: 0; +} + +.addAlbum form { + opacity: 0; + pointer-events: none; + transition: 0.4s ease; + transition-delay: 0s; +} + +.addAlbum form input { + margin: 10px; + padding: 10px; + display: inline-block; + width: 159px; + margin-top: 20px; +} + +.addAlbum button, .addAlbum a { + display: table; + margin: 10px auto; + font-weight: bold; +} + +.addAlbum.input-mode .addAlbumHead{ + transform: translateY(0px); +} + +.addAlbum.input-mode form { + opacity: 1; + pointer-events: all; + transition-delay: 0.4s; +} + /* menuOrdering */ FORM#menuOrdering { padding-left: 1em; @@ -2995,7 +3124,6 @@ ul.jqtree-tree .jqtree-element { #addAlbumOpen, #autoOrderOpen {padding: 7px 15px; font-weight: bold; font-size: 11px;} .afterUploadActions {text-align: center; margin-bottom: 30px !important;} .afterUploadActions a {justify-content: center; margin: 35px; font-weight: bold; font-size: 14px; padding: 10px 12px;} -#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;} @@ -4202,7 +4330,6 @@ fieldset#environment legend i[class*="icon-"] { #permissions {display: none!important;} #permissions, .selectFiles {margin-top: 35px; margin-bottom: 20px;} .selectAlbumBlock {display: flex; margin-left: 10px; margin-top: 10px;} -.albumActions a:last-child {border-radius: 0 5px 5px 0;} .icon-plus.cboxElement { padding: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16); font-size: 15px; margin-bottom: 8px; transition: all 125ms ease-out; } @@ -4389,9 +4516,5 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; /* album manager */ .selectedAlbum.cat-list-album-path { - margin: 40px 0 30px 0; + margin: 30px 0 30px 0; } -.selectedAlbum.cat-list-album-path span { - background-color: transparent; -} - diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css index b10076371..06df967b5 100644 --- a/admin/themes/roma/theme.css +++ b/admin/themes/roma/theme.css @@ -97,7 +97,7 @@ 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: #333 } +.menuLi { background: #333 } .menuLi_hidden { background: #333 !important; } a.Piwigo { font-family: verdana, arial, helvetica, sans-serif !important; @@ -107,10 +107,6 @@ a.Piwigo:hover span.Piwigo { border-bottom: 1px solid #FF3363; } -.categoryUl>li:not(.virtual_cat) { - background:url(images/stripe-cat.png); -} - /* RADU - I comment this because it makes FF form controls activation very slow) *, *:focus, *:active, input:active, a:active, input:focus, a:focus { outline: none; -moz-outline-width: 0px; } */ @@ -777,21 +773,12 @@ table.qsearch_help_table td { #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;} .afterUploadActions a {color: #3C3C3C; font-weight: bold; background-color: #FFA646;} .afterUploadActions a:hover {text-decoration: none; background-color: #ff7700;} .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;} LEGEND {color: #c1c1c1;} a#showPermissions {color: #D6D6D6; border: 1px solid #D6D6D6; background-color: #414141;}