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

@@ -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',

admin/cat_search.php

@@ -0,0 +1,61 @@
+<?php
+// +-----------------------------------------------------------------------+
+// | This file is part of Piwigo.                                          |
+// |                                                                       |
+// | For copyright and license information, please view the COPYING.txt    |
+// | file that was distributed with this source code.                      |
+// +-----------------------------------------------------------------------+
+
+if (!defined('PHPWG_ROOT_PATH'))
+{
+  die('Hacking attempt!');
+}
+
+include_once(PHPWG_ROOT_PATH.'admin/include/functions.php');
+
+// +-----------------------------------------------------------------------+
+// | Check Access and exit when user status is not ok                      |
+// +-----------------------------------------------------------------------+
+check_status(ACCESS_ADMINISTRATOR);
+
+
+// +-----------------------------------------------------------------------+
+// | tabs                                                                  |
+// +-----------------------------------------------------------------------+
+
+$page['tab'] = 'search';
+include(PHPWG_ROOT_PATH.'admin/include/albums_tab.inc.php');
+
+// +-----------------------------------------------------------------------+
+// | Get Categories                                                        |
+// +-----------------------------------------------------------------------+
+
+$categories = array();
+
+$query = '
+SELECT id, name, status, uppercats
+  FROM '.CATEGORIES_TABLE;
+
+$result = query2array($query);
+
+foreach ($result as $cat) 
+{ 
+  $private = ($cat['status'] == 'private')? 1:0;
+
+  $parents = explode(',', $cat['uppercats']);
+  
+  $content = array($cat['name'], $parents, $private);
+  $categories[$cat['id']] = $content;
+}
+
+// +-----------------------------------------------------------------------+
+// |                       template initialization                         |
+// +-----------------------------------------------------------------------+
+$template->set_filename('cat_search', 'cat_search.tpl');
+$template->assign('data_cat', $categories);
+
+// +-----------------------------------------------------------------------+
+// |                          sending html code                            |
+// +-----------------------------------------------------------------------+
+$template->assign_var_from_handle('ADMIN_CONTENT', 'cat_search');
+?>

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' => '<span class="icon-menu"></span>'.l10n('List'), 'url' => $my_base_url.'cat_list');
       $sheets['permalinks'] = array('caption' => '<span class="icon-link-1"></span>'.l10n('Permalinks'), 'url' => $my_base_url.'permalinks');
+      $sheets['search'] = array('caption' => '<span class="icon-search"></span>'.l10n('Search'), 'url' => $my_base_url.'cat_search');
       break;
 
     case 'batch_manager':

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;
 

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 += '<a href="' + editLink + id + '">' + c[0] + '</a> <b>/</b> '
+  }
+  html += '<a href="' + editLink + cat[1][cat[1].length - 1] + '">' + cat[0] + '</a>';
+
+  return html
+}
+
+function resultAppear(result) {
+  result.fadeIn();
+  if (result.next().length != 0) {
+    setTimeout(() => {resultAppear(result.next().first())}, 50);
+  }
+}
+
+updateSearch();
+{/literal}
+{/footer_script}
+
+<div class="titrePage">
+  <h2>{'Album search tool'|@translate}</h2>
+</div>
+
+<div class="search-album">
+  <div class="search-album-label">{'Search'|@translate}</div>
+  <div class="search-album-input-container" style="position:relative">
+    <span class="icon-search search-icon"></span>
+    <span class="icon-cancel search-cancel"></span>
+    <input class='search-input' type="text" placeholder="{'Portraits...'|@translate}">
+  </div>
+</div>
+<div class="search-album-help  icon-help-circled">{' Enter a term to search from album'|@translate}</div>
+
+<div class="search-album-ghost">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="search-album-elem-template" style="display:none">
+  <div class="search-album-elem" style="display:none">
+    <span class='search-album-icon'></span>
+    <p class='search-album-name'></p>
+    <div class="search-album-action-cont">
+      <div class="search-album-action">
+        <a class="icon-pencil search-album-edit">Edit album</a>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="search-album-result">
+
+</div>
+
+<div class="search-album-noresult">
+  {"No album found"|@translate}
+</div>
+

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");
         }

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;
 }

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 {