(cp 9cebf85) fixes #1336 alternate views for album manager

* in addition to "tile" view introduced in Piwigo 11, we add "compact" and "lines" views
* implemented by @MatthieuLP as cat_list_new in a custom branch, manually merged by @plegall on master

Conflicts:
	language/fr_FR/admin.lang.php

admin/themes/default/js/cat_list.js

@@ -0,0 +1,466 @@
+function setDisplayCompact() {
+
+    removeIconDesc();
+
+    $(".albumActions").css("display", "flex");
+    removeHoverEffect($(".categoryBox"));
+    removeHoverEffect($(".categoryBox").children(".albumActions").children("a"));
+
+    $(".categoryBox").children(".albumActions").children("a").hover(function () {
+        $(this).css({
+            color : "#000000",
+        });
+    }, function () {
+        $(this).css({
+            color : "#848484",
+        });
+    });
+
+    $(".categoryBox").css({
+        minWidth: "230px",
+        maxWidth: "350px",
+        flexDirection: "column",
+        maxHeight: "180px",
+        alignItems: "unset",
+        margin: "15px"
+    });
+
+    $(".albumInfos").css({
+        marginLeft: "0",
+        flexDirection: "column"
+    });
+
+    // $(".albumIcon").css({
+    //     height: "80px"
+    // });
+
+    // $(".albumIcon span").css({
+    //     fontSize: "19px",
+    //     width: "27px",
+    //     padding: "10px"
+    // });
+
+    $(".albumIcon").css({
+        height: "60px"
+    });
+
+    $(".albumIcon span").css({
+        fontSize: "14px",
+        width: "20px",
+        padding: "8px"
+    });
+
+    $(".albumInfos p").css("margin", "0");
+    $(".albumInfos p:last-child").css({
+        width: "auto"
+    });
+
+    $(".albumTop").css({
+        width: "auto",
+        justifyContent: "center",
+        flexDirection: "row",
+        alignItems: "baseline",
+        height: "65px"
+    });
+
+    $(".albumTitle").css("padding", "0 15px");
+
+    $(".addAlbum").css({
+        minWidth : "230px",
+        maxWidth: "350px",
+        flexDirection: "column",
+        maxHeight: "180px",
+        margin: "15px"
+    });
+
+    $(".addAlbum form label").css({
+        display: "none"
+    });
+
+     $(".addAlbumHead").css({
+         flexDirection: "column",
+         transform: "translateY(75px)",
+         alignItems: "center",
+         marginTop: "-10px",
+         transition: "0.4s ease"
+    });
+
+    $(".addAlbum form").css("flex-direction", "column");
+
+    $(".addAlbum form").css({
+        flexDirection: "column",
+        marginTop: "0",
+        marginBottom: "0",
+        transitionDelay: "0s"
+    });
+
+    $(".addAlbum.input-mode form").css({
+        transitionDelay: "0.4s",
+    });
+
+    $(".addAlbum form input").css("margin", "0px 10px 0px 10px");
+    $(".addAlbum form button").css("margin", "10px auto 0 auto");
+    $(".addAlbum p").css("margin-bottom", "0px");
+
+    $(".addAlbumHead p").css("margin-left", "0");
+
+    $(".addAlbumHead span").css({
+        fontSize:"14px",
+        width: "20px",
+        height: "20px",
+        padding: "8px"
+    });
+
+    $(".albumActions").css({
+        flexDirection : "row",
+        marginTop: "auto",
+        width: "100%"
+    });
+
+    $(".albumActions a:first-child").css("margin-left", "35px");
+    $(".albumActions a:last-child").css("margin-right", "35px");
+}
+
+function setDisplayLine() {
+
+    /*********** Hover stuff ***********/
+
+    removeIconDesc();
+    $(".albumActions").css("display", "flex");
+    removeHoverEffect($(".categoryBox"));
+
+    $(".categoryBox").hover(function () {
+        $(this).css("background", "#ffd7ad");
+        $(this).children(".albumInfos").css({
+            color: "#515151"
+        });
+        $(this).children(".albumActions").children("a").css({
+            color: "#515151",
+        });
+
+        $(this).children(".albumTop").children(".albumIcon").children("span").addClass("albumIconLineHover");
+
+    }, function () {
+        $(this).css("background", "#fafafa");
+        $(this).children(".albumInfos").css({
+            color: "#a9a9a9"
+        });
+        $(this).children(".albumActions").children("a").css({
+            color: "#848484"
+        });        
+        
+        $(this).children(".albumTop").children(".albumIcon").children("span").removeClass("albumIconLineHover");
+    })
+
+    $(".categoryBox").children(".albumActions").children("a").hover(function () {
+        $(this).css({
+            color : "#000000",
+        });
+    }, function () {
+        $(this).css({
+            color : "#515151",
+        });
+    });
+
+    /************************************/
+
+    $(".categoryBox").css({
+        minWidth: "90%",
+        maxWidth: "100%",
+        flexDirection: "row",
+        maxHeight: "60px",
+        alignItems: "unset",
+        margin: "5px 15px"
+    });
+
+    $(".albumIcon").css({
+        height: "60px"
+    });
+
+    $(".albumIcon span").css({
+        fontSize: "14px",
+        width: "20px",
+        padding: "8px"
+    });
+    
+    $(".addAlbumHead span").css({
+        fontSize:"14px",
+        width: "20px",
+        height: "20px",
+        padding: "8px"
+    });
+
+    $(".albumInfos").css({
+        marginLeft: "auto",
+        flexDirection: "row",
+        justifyContent: "space-around",
+        width: "auto"
+    });
+
+    $(".albumInfos p").css({
+        textAlign: "right",
+        margin: "0"
+    });
+
+    $(".albumInfos p:last-child").css({
+        width: "270px"
+    });
+
+    $(".albumTop").css({
+        width: "25%",
+        justifyContent: "flex-start",
+        flexDirection: "row",
+        alignItems : "baseline",
+        height: "75px"
+    });
+
+    $(".albumTitle").css("padding", "0 15px");
+
+    $(".addAlbum").css({
+        minWidth: "90%",
+        maxWidth: "100%",
+        flexDirection: "row",
+        maxHeight: "60px",
+        margin: "15px 15px 5px 15px"
+    });
+
+    $(".addAlbum form label").css({
+        display: "none"
+    });
+
+    $(".addAlbumHead").css({
+        flexDirection: "row",
+        transform: "translateY(0)",
+        alignItems: "center",
+        marginTop: "0",
+        transform: "translateX(200px)"
+    });
+
+    $(".addAlbum form").css({
+        flexDirection: "row",
+        marginTop: "0",
+        marginBottom: "0",
+        transitionDelay: "0s"
+    });
+
+    $(".addAlbum.input-mode form").css({
+        transitionDelay: "0s",
+    });
+
+    $(".addAlbum form").css("align-items", "center");
+    $(".addAlbum form input").css("margin", "0px 10px 0px 10px");
+    $(".addAlbum form button").css("margin", "0px 20px");
+    $(".addAlbum p").css("margin-bottom", "0px");
+
+    $(".addAlbumHead p").css("margin-left", "15px");
+
+    $(".albumActions").css({
+        flexDirection : "row",
+        margin: "auto 0px",
+        width: "300px",
+    });
+
+    $(".albumActions a:first-child").css("margin-left", "35px");
+    $(".albumActions a:last-child").css("margin-right", "35px");
+
+}
+
+function setDisplayTile() {
+
+    ShowIconDesc();
+
+    $(".albumActions").css("display", "flex");
+    removeHoverEffect($(".categoryBox"));
+    removeHoverEffect($(".categoryBox").children(".albumActions").children("a"));
+    $(".categoryBox").children(".albumActions").children("a").hover(function () {
+        $(this).css({
+            color : "#FFA646"
+        })
+    }, function () {
+        $(this).css({
+            color : "#848484"
+        })
+    });
+
+    AddHoverOnAlbumActions();
+
+    $(".addAlbum.input-mode form").css({
+        transitionDelay: "0s",
+    });
+
+    $(".categoryBox").css({
+        minWidth: "220px",
+        maxWidth: "280px",
+        flexDirection: "column",
+        maxHeight: "300px",
+        alignItems: "center",
+        margin: "15px"
+    });
+
+    $(".albumActions").css({
+        flexDirection : "column",
+        margin:"auto",
+        alignItems: "flex-start",
+        width: "75%",
+    });
+
+    $(".albumInfos").css({
+        marginLeft: "0",
+        flexDirection: "column",
+    });
+
+    $(".albumInfos p:last-child").css({
+        width: "auto"
+    });
+
+    $(".albumIcon").css({
+        height: "80px"
+    });
+
+    $(".albumIcon span").css({
+        fontSize: "19px",
+        width: "27px",
+        padding: "10px"
+    });
+
+    $(".albumTop").css({
+        width: "85%",
+        flexDirection: "column",
+        alignItems: "unset",
+        height: "110px",
+    });
+
+    $(".albumTitle").css("padding", "0");
+
+    $(".addAlbum").css({
+        minWidth: "220px",
+        maxWidth: "280px",
+        flexDirection: "column",
+        maxHeight: "300px",
+        margin: "15px"
+    });
+
+     $(".addAlbumHead").css({
+        flexDirection: "column",
+        transform: "translateY(75px)",
+        alignItems: "center",
+        marginTop: "10px",
+        transition: "0.4s ease"
+    });
+
+    $(".addAlbum form").css({
+        flexDirection: "column",
+        marginTop: "auto",
+        marginBottom: "20px",
+        transitionDelay: "0s"
+    });
+
+    $(".addAlbum form input").css("margin", "0px 10px 10px 10px");
+    $(".addAlbum form button").css("margin", "10px auto 0 auto");
+    $(".addAlbum p").css("margin-bottom", "20px");
+
+    $(".addAlbum form label").css({
+        display: "flex",
+        margin: "-20px 0 0 10px"
+    });
+
+    $(".addAlbumHead p").css("margin-left", "0");
+
+    $(".addAlbumHead span").css({
+        fontSize:"19px",
+        width: "27px",
+        height: "27px",
+        padding: "10px"
+    });
+
+    $(".albumInfos p").css("margin", "0");
+
+    $(".albumActions a:first-child").css("margin-left", "5px");
+    $(".albumActions a:last-child").css("margin-left", "5px");
+}
+
+function ShowIconDesc() {
+    $(".albumActions span.iconLegend").show();
+}
+
+function removeIconDesc() {
+    $(".albumActions span.iconLegend").hide();
+}
+
+function removeHoverEffect(e) {
+    e.unbind('mouseenter').unbind('mouseleave');
+}
+
+function AddHoverOnAlbumActions() {
+    $(".albumActions").css("display", "none");
+    $(".categoryBox").hover(function () {
+        $(this).children(".albumActions").css("display", "flex");
+    }, function () {
+        $(this).children(".albumActions").css("display", "none");
+    });
+}
+
+
+$(document).ready(function () {
+
+    if (!$.cookie("pwg_album_manager_view")) {
+        $.cookie("pwg_album_manager_view", "tile");
+    }
+
+    $(".addAlbum").on("click", function (e) {
+        if (e.target.className !== "cancelAddAlbum") {
+            $(".addAlbum").addClass('input-mode');
+
+            if ($.cookie("pwg_album_manager_view") !== "tile") {
+                $(".addAlbum p").hide(300);
+            }
+        };
+    });
+
+    $(".cancelAddAlbum").on("click", function () {
+        $('.addAlbum').removeClass('input-mode');
+        $(".addAlbum p").show(800);
+    });
+
+    if ($("#displayCompact").is(":checked")) {
+        setDisplayCompact();
+    };
+
+    if ($("#displayLine").is(":checked")) {
+        setDisplayLine();
+    };
+
+    if ($("#displayTile").is(":checked")) {
+        setDisplayTile();
+    };
+
+    $("#displayCompact").change(function () {
+        setDisplayCompact();
+
+        if ($(".addAlbum").hasClass("input-mode")) {
+            $(".addAlbum p").hide();
+        }
+        
+        $.cookie("pwg_album_manager_view", "compact");
+    });
+
+    $("#displayLine").change(function () {
+        setDisplayLine();
+
+        if ($(".addAlbum").hasClass("input-mode")) {
+            $(".addAlbum p").hide();
+        }
+
+        $.cookie("pwg_album_manager_view", "line");
+    });
+
+    $("#displayTile").change(function () {
+        setDisplayTile();
+
+        if ($(".addAlbum").hasClass("input-mode")) {
+            $(".addAlbum p").show();
+        }
+        
+        $.cookie("pwg_album_manager_view", "tile");
+    });
+});

admin/themes/default/template/cat_list.tpl

@@ -1,5 +1,8 @@
 {combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
 
+{combine_script id='alternativeView' load='footer' path='admin/themes/default/js/cat_list.js'}
+{combine_script id='jquery.cookie' path='themes/default/js/jquery.cookie.js' load='footer'}
+
 {footer_script require='jquery.ui.sortable'}{literal}
 jQuery(document).ready(function(){
   $(".addAlbumHead").click(function () {
@@ -8,51 +11,236 @@ jQuery(document).ready(function(){
 });
 {/literal}{/footer_script}
 
-<div class="selectedAlbum cat-list-album-path"><span class="icon-sitemap">{$CATEGORIES_NAV}</span></div>
+<div class="selectedAlbum cat-list-album-path">
+  <span class="icon-sitemap selectedAlbum-first">{$CATEGORIES_NAV}</span>
+  <div class="AlbumViewSelector">
+    <input type="radio" name="layout" class="switchLayout" id="displayCompact" {if $smarty.cookies.pwg_album_manager_view == 'compact'}checked{/if}/><label for="displayCompact"><span class="icon-th-large firstIcon tiptip" title="{'Compact View'|translate}"></span></label><input type="radio" name="layout" class="switchLayout tiptip" id="displayLine" {if $smarty.cookies.pwg_album_manager_view == 'line'}checked{/if}/><label for="displayLine"><span class="icon-th-list tiptip" title="{'Line View'|translate}"></span></label><input type="radio" name="layout" class="switchLayout" id="displayTile" {if $smarty.cookies.pwg_album_manager_view == 'tile'}checked{/if}/><label for="displayTile"><span class="icon-pause lastIcon tiptip" title="{'Tile View'|translate}"></span></label>
+  </div>
+</div>
 {assign var='color_tab' value=["icon-red", "icon-blue", "icon-yellow", "icon-purple", "icon-green"]}
 <div class="categoryContainer">
   <div class="addAlbum">
-    <div class="addAlbumHead" onclick="$('.addAlbum').addClass('input-mode');">
+    <div class="addAlbumHead">
       <span class="icon-plus-circled icon-blue"></span>
       <p>{"Add Album"|@translate}
     </div>
     <form action="{$F_ACTION}" method="post">
       <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
-      <label for="virtual_name">{"Album Name"|@translate}</label>
-      <input type="text" name="virtual_name" placeholder="{"Portraits..."|@translate}">
+      <label for="virtual_name">{"Album name"|@translate}</label>
+      <input type="text" name="virtual_name" placeholder="{"Album name"|@translate}">
       <button name="submitAdd" type="submit" class="buttonLike">
           <i class="icon-plus"></i> {"Create"|@translate}
         </button>
-      <a onclick="$('.addAlbum').removeClass('input-mode');">{"Cancel"|@translate}</a>
+      <a class="cancelAddAlbum">{"Cancel"|@translate}</a>
     </form>
   </div>
   {if count($categories)}
   {foreach from=$categories item=category}
   <div class="categoryBox{if $category.IS_VIRTUAL} virtual_cat{/if}" id="cat_{$category.ID}">
-    
-    <div class="albumIcon">
-      <span class="
-      {if $category.NB_SUB_ALBUMS == 0}icon-folder-open{else}icon-sitemap{/if} 
-      {$color_tab[$category.ID % 5]}
-      "> </span>
+
+    <div class="albumTop">
+      <div class="albumIcon">
+        <span class="
+        {if $category.NB_SUB_ALBUMS == 0}icon-folder-open{else}icon-sitemap{/if}
+        {$color_tab[$category.ID % 5]}
+        "> </span>
+      </div>
+
+      <div class="albumTitle">
+        {$category.NAME}
+      </div>
     </div>
     
-    <div class="albumTitle">
-      {$category.NAME}
-    </div>
     <span class="albumInfos"><p>{$category.NB_PHOTOS|translate_dec:'%d photo':'%d photos'}</p> <p>{$category.NB_SUB_PHOTOS|translate_dec:'%d photo':'%d photos'} {$category.NB_SUB_ALBUMS|translate_dec:'in %d sub-album':'in %d sub-albums'}</p></span>
 
     <div class="albumActions">
-      <a href="{$category.U_EDIT}" title="{'Edit'|@translate}"><span class="icon-pencil"></span>{'Edit'|@translate}</a>
-      <a href="{$category.U_CHILDREN}" class="actionTitle" title="{'sub-albums'|@translate}"><span class="icon-sitemap"></span>{'sub-albums'|@translate}</a>
+      <a href="{$category.U_EDIT}" class="actionEdit" {*title="{'Edit'|@translate}"*}><span class="icon-pencil tiptip" title="{'Edit'|@translate}"></span><span class="iconLegend">{'Edit'|@translate}</span></a>
+      <a href="{$category.U_CHILDREN}" class="actionTitle" {*title="{'sub-albums'|@translate}"*}><span class="icon-sitemap tiptip" title="{'sub-albums'|@translate}"></span><span class="iconLegend">{'sub-albums'|@translate}</span></a>
       {if cat_admin_access($category.ID)}
-      <a href="{$category.U_JUMPTO}" title="{'Visit Gallery'|@translate}"><span class="icon-eye"></span>{'Visit Gallery'|@translate} </a>
+      <a href="{$category.U_JUMPTO}" class="actionGalery" {*title="{'Visit Gallery'|@translate}"*}><span class="icon-eye tiptip" title="{'Visit Gallery'|@translate}"></span><span class="iconLegend">{'Visit Gallery'|@translate}</span></a>
       {else}
-      <span href="{$category.U_JUMPTO}" title="{'This album is private'|@translate}"><span class="icon-eye"></span>{'Visit Gallery'|@translate} </span>
+      <span href="{$category.U_JUMPTO}" class="actionGalery" {*title="{'This album is private'|@translate}"*}><span class="icon-eye tiptip" title="{'This album is private'|@translate}"></span><span class="iconLegend">{'Visit Gallery'|@translate}</span></span>
       {/if}
-      <a href="{$category.U_ADD_PHOTOS_ALBUM}" title="{'Add Photos'|@translate}"><span class="icon-plus"></span>{'Add Photos'|@translate}</a>
+      <a href="{$category.U_ADD_PHOTOS_ALBUM}" class="actionAdd" {*title="{'Add Photos'|@translate}"*}><span class="icon-plus tiptip" title="{'Add Photos'|@translate}"></span><span class="iconLegend">{'Add Photos'|@translate}</span></a>
     </div>
   </div>
     {/foreach}
     {/if}
 </div>
+
+<style>
+
+
+/*
+ *  Switch btn between views
+ */
+
+ #tabsheet , .selectedAlbum{
+   margin: 0 0 10px 0 !important;
+ }
+
+.selectedAlbum {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  padding: 0 34px 0 22px;
+
+  align-items: baseline;
+}
+
+.selectedAlbum-first {
+  margin-left: 0px;
+}
+
+.AlbumViewSelector {
+  padding: 7px 0px;
+  margin-right: 0px;
+  border-radius: 10px;
+  background: #fafafa !important;
+}
+
+.AlbumViewSelector span {
+  border-radius: 0;
+  padding: 7px;
+}
+
+.addAlbum button {
+  white-space: nowrap;
+}
+
+/* Should be done with :first-child and :last-child but doesn't work */
+
+.AlbumViewSelector label span.firstIcon{
+  border-radius: 7px 0 0 7px;
+}
+
+.AlbumViewSelector label span.lastIcon{
+  border-radius: 0 7px 7px 0;
+}
+
+.icon-th-large, .icon-th-list, .icon-pause {
+  padding: 10px;
+  font-size: 19px;
+
+  transition: 0.3s;
+}
+
+.AlbumViewSelector input:checked + label{
+  background: transparent;
+  color: white !important;
+}
+
+.AlbumViewSelector input:checked + label span{
+  background: orange;
+}
+
+.switchLayout {
+  display: none;
+}
+
+.albumActions a span.iconLegend {
+  font-size: 14px;
+}
+
+
+.categoryContainer {
+  padding: 0 20px 0 20px;
+}
+
+/*
+ *  Tiles display
+ */
+
+.albumTop {
+  display: flex;
+  flex-direction: row;
+
+  padding: 0px 20px;
+  height: 75px;
+
+  align-items: baseline;
+}
+
+.categoryBox, .addAlbum{
+  display: flex;
+  flex-direction: column;
+  max-height: 200px;
+  flex-grow: 1;
+
+  /* Potential Animation */
+  /* transition: 1s linear; */
+}
+
+.albumIcon span{
+  font-size: 19px;
+  width: 27px;
+  padding: 10px;
+  border-radius: 30px;
+}
+
+.albumIconLineHover {
+  background: #f98100! important;
+  color: #ffd7ad;
+  transition: 0.5s ease;
+}
+
+.albumInfos {
+  color: #a9a9a9;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.albumInfos p {
+  margin: 0 20px;
+  text-align: right;
+}
+
+.albumActions {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  margin-top: auto;
+
+  width: 100%;
+  margin-bottom: auto;
+}
+
+.albumActions a:first-child{
+  margin-left: 35px;
+}
+
+.albumActions a:last-child {
+  margin-right: 35px;
+}
+
+.addAlbum form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.addAlbum form input {
+  border: none;
+  box-shadow: 0px 2px 3px #00000024;
+  border-radius: 5px;
+
+  margin: 0px 10px;
+
+  max-width: 200px;
+  width: 75%;
+}
+
+.addAlbum form button {
+  margin-bottom: 0;
+  height: 30px;
+}
+
+.addAlbumHead {
+  padding: 0;
+}
+
+</style>

admin/themes/default/theme.css

@@ -195,7 +195,6 @@ TABLE.languages TR TD { padding: 7px 20px; }
   text-align: center;
   font-weight: 600;
   font-size: 14px;
-  margin-top: 10px;
   display: block;
 }
 
@@ -204,13 +203,10 @@ TABLE.languages TR TD { padding: 7px 20px; }
 }
 
 .albumActions {
-  position: absolute;
   bottom: 5px;
   flex-direction: column;
   width: 90%;
   overflow: hidden;
-  margin-left: 20px;
-  margin-bottom: 10px;
   display: none;
 }
 
@@ -236,7 +232,7 @@ TABLE.languages TR TD { padding: 7px 20px; }
 .addAlbum {
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  justify-content: center;
   cursor: pointer;
 }
 
@@ -244,6 +240,10 @@ TABLE.languages TR TD { padding: 7px 20px; }
   cursor: auto;
 }
 
+.addAlbum.input-mode form {
+  display: flex;
+}
+
 .addAlbum label {
   margin: 0;
   border-radius: 5px 5px 0 0;
@@ -312,7 +312,8 @@ TABLE.languages TR TD { padding: 7px 20px; }
 }
 
 .addAlbum.input-mode .addAlbumHead{
- transform: translateY(0px);
+ transform: translateY(0px) !important;
+ margin-top: 0;
 }
 
 .addAlbum.input-mode form {