From d527c47023aa1bac454fb2816e73b68698a859aa Mon Sep 17 00:00:00 2001 From: Zacharie Date: Thu, 3 Sep 2020 15:18:44 +0200 Subject: [PATCH] Add a new tab to manage album page : search album (based on Hannah mock up), minor changes in button behaviour on add photo page --- admin.php | 1 + admin/cat_search.php | 61 ++++++++ admin/include/add_core_tabs.inc.php | 1 + admin/include/functions.php | 1 + admin/themes/default/template/cat_search.tpl | 133 ++++++++++++++++++ .../default/template/photos_add_direct.tpl | 1 + admin/themes/default/theme.css | 119 ++++++++++++++++ admin/themes/roma/theme.css | 9 +- 8 files changed, 324 insertions(+), 2 deletions(-) create mode 100644 admin/cat_search.php create mode 100644 admin/themes/default/template/cat_search.tpl diff --git a/admin.php b/admin.php index 809eecc78..9051d3893 100644 --- a/admin.php +++ b/admin.php @@ -183,6 +183,7 @@ $template->assign( 'U_CATEGORIES'=> $link_start.'cat_list', 'U_CAT_MOVE'=> $link_start.'cat_move', 'U_CAT_OPTIONS'=> $link_start.'cat_options', + 'U_CAT_SEARCH'=> $link_start.'cat_search', 'U_CAT_UPDATE'=> $link_start.'site_update&site=1', 'U_RATING'=> $link_start.'rating', 'U_RECENT_SET'=> $link_start.'batch_manager&filter=prefilter-last_import', diff --git a/admin/cat_search.php b/admin/cat_search.php new file mode 100644 index 000000000..665181647 --- /dev/null +++ b/admin/cat_search.php @@ -0,0 +1,61 @@ +set_filename('cat_search', 'cat_search.tpl'); +$template->assign('data_cat', $categories); + +// +-----------------------------------------------------------------------+ +// | sending html code | +// +-----------------------------------------------------------------------+ +$template->assign_var_from_handle('ADMIN_CONTENT', 'cat_search'); +?> diff --git a/admin/include/add_core_tabs.inc.php b/admin/include/add_core_tabs.inc.php index e4a686056..7acc498fe 100644 --- a/admin/include/add_core_tabs.inc.php +++ b/admin/include/add_core_tabs.inc.php @@ -33,6 +33,7 @@ function add_core_tabs($sheets, $tab_id) global $my_base_url; $sheets['list'] = array('caption' => ''.l10n('List'), 'url' => $my_base_url.'cat_list'); $sheets['permalinks'] = array('caption' => ''.l10n('Permalinks'), 'url' => $my_base_url.'permalinks'); + $sheets['search'] = array('caption' => ''.l10n('Search'), 'url' => $my_base_url.'cat_search'); break; case 'batch_manager': diff --git a/admin/include/functions.php b/admin/include/functions.php index d81ae8942..cbe761b5b 100644 --- a/admin/include/functions.php +++ b/admin/include/functions.php @@ -2577,6 +2577,7 @@ function get_active_menu($menu_page) case 'cat_list': case 'cat_move': case 'cat_options': + case 'cat_search': case 'permalinks': return 1; diff --git a/admin/themes/default/template/cat_search.tpl b/admin/themes/default/template/cat_search.tpl new file mode 100644 index 000000000..0e9e312fe --- /dev/null +++ b/admin/themes/default/template/cat_search.tpl @@ -0,0 +1,133 @@ +{combine_script id='common' load='footer' path='admin/themes/default/js/common.js'} + +{footer_script} +var data = {json_encode($data_cat)}; +var categories = Object.values(data) +{literal} +var editLink = "admin.php?page=album-"; +var colors = ["icon-red", "icon-blue", "icon-yellow", "icon-purple", "icon-green"]; + +$('.search-input').on('input', () => { + updateSearch(); +}) + +function updateSearch () { + string = $('.search-input').val(); + $('.search-album-result').html(""); + $('.search-album-noresult').hide(); + if (string == '') { + $('.search-album-ghost').fadeIn(); + } else { + $('.search-album-ghost').hide(); + + nbResult = 0; + categories.forEach((c) => { + if (c[0].toString().toLowerCase().search(string.toLowerCase()) != -1) { + addAlbumResult(c); + nbResult++; + } + }) + + if (nbResult != 0) { + resultAppear($('.search-album-result .search-album-elem').first()); + } else { + $('.search-album-noresult').show(); + } + } +} + +function addAlbumResult (cat) { + id = cat[1][cat[1].length - 1]; + template = $('.search-album-elem-template').html(); + newCatNode = $(template); + + hasChildren = false; + categories.forEach((c) => { + for (let i = 0; i < c[1].length - 1; i++) { + if (c[1][i] == id) { + hasChildren = true; + } + } + }) + + if (hasChildren) { + newCatNode.find('.search-album-icon').addClass('icon-sitemap'); + } else { + newCatNode.find('.search-album-icon').addClass('icon-folder-open'); + } + + colorId = id%5; + newCatNode.find('.search-album-icon').addClass(colors[colorId]); + + newCatNode.find('.search-album-name').html(getHtmlPath(cat)); + + href = "admin.php?page=album-" + id; + newCatNode.find('.search-album-edit').attr('href', href); + + $('.search-album-result').append(newCatNode); +} + +function getHtmlPath (cat) { + html = ''; + for (let i = 0; i < cat[1].length - 1; i++) { + id = cat[1][i]; + c = data[id]; + html += '' + c[0] + ' / ' + } + html += '' + cat[0] + ''; + + return html +} + +function resultAppear(result) { + result.fadeIn(); + if (result.next().length != 0) { + setTimeout(() => {resultAppear(result.next().first())}, 50); + } +} + +updateSearch(); +{/literal} +{/footer_script} + +
+

{'Album search tool'|@translate}

+
+ +
+
{'Search'|@translate}
+
+ + + +
+
+
{' Enter a term to search from album'|@translate}
+ +
+
+
+
+
+
+ + + +
+ +
+ +
+ {"No album found"|@translate} +
+ diff --git a/admin/themes/default/template/photos_add_direct.tpl b/admin/themes/default/template/photos_add_direct.tpl index 0af861bd9..2e236f9d2 100644 --- a/admin/themes/default/template/photos_add_direct.tpl +++ b/admin/themes/default/template/photos_add_direct.tpl @@ -143,6 +143,7 @@ jQuery(document).ready(function(){ if (up.files.length == 0) { jQuery('#addFiles').removeClass("addFilesButtonChanged"); + jQuery("#addFiles").removeClass('buttonLike').addClass('buttonGradient'); jQuery('.plupload_filelist_footer').hide(); jQuery('.plupload_filelist').css("overflow-y", "hidden"); } diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css index d8ae3e889..cbc7184e5 100644 --- a/admin/themes/default/theme.css +++ b/admin/themes/default/theme.css @@ -4684,4 +4684,123 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; .icon-toggle-off:before{ font-weight:600; +} + +/* album search */ + +.search-album { + display: flex; + justify-content: center; + align-items: center; +} + +.search-album-label { + font-weight: bold; + font-size: 18px; + padding: 10px; +} + +.search-album-input-container { + position: relative; + display: inline; +} + +.search-album-input-container .search-icon{ + font-size: 20px; +} + +.search-album-help { + text-align: center; + margin: 10px; + font-size: 14px; +} + +.search-album-ghost, .search-album-result { + display: flex; + flex-direction: column; +} + +.search-album-elem, .search-album-ghost div { + height: 64px; + border-radius: 5px; + margin: 10px 20px; + overflow: hidden; +} + +.search-album-ghost div { + background: #f3f3f3; + background-image: linear-gradient(#eee, #fff); + background-attachment: fixed; +} + +.search-album-elem { + box-shadow: 0px 2px 3px #00000024; + background-color: #fafafa; + border-radius: 5px; + color: #777; + padding-left: 20px; + display: flex; + align-items: center; + position: relative; +} + +.search-album-elem span{ + font-size: 20px; + padding: 8px; + display: inline-block; + border-radius: 50%; +} + +.search-album-elem p{ + font-size: 16px; + margin: 10px; + white-space: nowrap; + font-weight: 600; +} + +.search-album-action-cont { + display: none; + position: absolute; + right: 0%; + top : 50%; + height: 100%; + transform: translate(0, -50%); + align-items: center; + flex-direction: row-reverse; + overflow: hidden; +} + +.search-album-elem:hover .search-album-action-cont { + display: flex; +} + +.search-album-action { + display: flex; + align-items: center; +} + +.search-album-action a { + padding: 30px 15px; + font-weight: bold; + cursor: pointer; + height: 100%; + border-left: 1px solid #00000012; + background-color: #00000003; + text-align: center; +} + +.search-album-action a:hover { + color: #444; + text-decoration: none; + background-color: #FFA646; +} + +.search-album-noresult { + opacity: 0.3; + text-align: center; + width: calc(100% - 205px); + font-weight: bold; + font-size: 30px; + position: absolute; + display: none; } \ No newline at end of file diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css index f9866e4d5..423c0ba5c 100644 --- a/admin/themes/roma/theme.css +++ b/admin/themes/roma/theme.css @@ -1029,8 +1029,8 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; background-color:#f22; } -/* Album Move */ -.move-cat-container { +/* Album Move (and album search) */ +.move-cat-container, .search-album-elem { background-color: #333; box-shadow: none; } @@ -1044,6 +1044,11 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; color: white; } +/* Album search */ +.search-album-ghost div { + background-image: linear-gradient(#333, #444); +} + /* Icon colors*/ .icon-red {