diff --git a/admin/themes/default/js/cat_list.js b/admin/themes/default/js/cat_list.js new file mode 100644 index 000000000..f7cef0d16 --- /dev/null +++ b/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"); + }); +}); \ No newline at end of file diff --git a/admin/themes/default/template/cat_list.tpl b/admin/themes/default/template/cat_list.tpl index 354367f4e..96059caf5 100644 --- a/admin/themes/default/template/cat_list.tpl +++ b/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} -
{$CATEGORIES_NAV}
+
+ {$CATEGORIES_NAV} +
+ +
+
{assign var='color_tab' value=["icon-red", "icon-blue", "icon-yellow", "icon-purple", "icon-green"]}
-
+

{"Add Album"|@translate}

- - + + - {"Cancel"|@translate} + {"Cancel"|@translate}
{if count($categories)} {foreach from=$categories item=category}
- -
- + +
+
+ +
+ +
+ {$category.NAME} +
-
- {$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'}

- {'Edit'|@translate} - {'sub-albums'|@translate} + {'Edit'|@translate} + {'sub-albums'|@translate} {if cat_admin_access($category.ID)} - {'Visit Gallery'|@translate} + {'Visit Gallery'|@translate} {else} - {'Visit Gallery'|@translate} + {'Visit Gallery'|@translate} {/if} - {'Add Photos'|@translate} + {'Add Photos'|@translate}
{/foreach} {/if}
+ + diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css index 30f155ec1..95e0baa5e 100644 --- a/admin/themes/default/theme.css +++ b/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 { diff --git a/language/en_UK/admin.lang.php b/language/en_UK/admin.lang.php index 12ae6c701..14499014b 100644 --- a/language/en_UK/admin.lang.php +++ b/language/en_UK/admin.lang.php @@ -1118,3 +1118,7 @@ $lang['Created on %s'] = 'Created on %s'; $lang['Edited on %s'] = 'Edited on %s'; $lang['%d sub-albums'] = '%d sub-albums'; $lang['Refresh thumbnail'] = 'Refresh thumbnail'; +$lang['Compact View'] = 'Compact View'; +$lang['Tile View'] = 'Tile View'; +$lang['Line View'] = 'Line View'; +$lang['Add Album'] = 'Add Album'; \ No newline at end of file diff --git a/language/fr_FR/admin.lang.php b/language/fr_FR/admin.lang.php index b893d9f8b..2ce54d7a0 100644 --- a/language/fr_FR/admin.lang.php +++ b/language/fr_FR/admin.lang.php @@ -1120,3 +1120,7 @@ $lang['Created on %s'] = 'Créé le %s'; $lang['Edited on %s'] = 'Modifié le %s'; $lang['%d sub-albums'] = '%d sous-albums'; $lang['Refresh thumbnail'] = 'Changer de miniature'; +$lang['Compact View'] = 'Affichage compact'; +$lang['Tile View'] = 'Affichage tuiles'; +$lang['Line View'] = 'Affichage lignes'; +$lang['Add Album'] = 'Ajouter un Album'; \ No newline at end of file diff --git a/themes/default/js/jquery.cookie.js b/themes/default/js/jquery.cookie.js new file mode 100644 index 000000000..c7f3a59b5 --- /dev/null +++ b/themes/default/js/jquery.cookie.js @@ -0,0 +1,117 @@ +/*! + * jQuery Cookie Plugin v1.4.1 + * https://github.com/carhartl/jquery-cookie + * + * Copyright 2013 Klaus Hartl + * Released under the MIT license + */ +(function (factory) { + if (typeof define === 'function' && define.amd) { + // AMD + define(['jquery'], factory); + } else if (typeof exports === 'object') { + // CommonJS + factory(require('jquery')); + } else { + // Browser globals + factory(jQuery); + } +}(function ($) { + + var pluses = /\+/g; + + function encode(s) { + return config.raw ? s : encodeURIComponent(s); + } + + function decode(s) { + return config.raw ? s : decodeURIComponent(s); + } + + function stringifyCookieValue(value) { + return encode(config.json ? JSON.stringify(value) : String(value)); + } + + function parseCookieValue(s) { + if (s.indexOf('"') === 0) { + // This is a quoted cookie as according to RFC2068, unescape... + s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\'); + } + + try { + // Replace server-side written pluses with spaces. + // If we can't decode the cookie, ignore it, it's unusable. + // If we can't parse the cookie, ignore it, it's unusable. + s = decodeURIComponent(s.replace(pluses, ' ')); + return config.json ? JSON.parse(s) : s; + } catch(e) {} + } + + function read(s, converter) { + var value = config.raw ? s : parseCookieValue(s); + return $.isFunction(converter) ? converter(value) : value; + } + + var config = $.cookie = function (key, value, options) { + + // Write + + if (value !== undefined && !$.isFunction(value)) { + options = $.extend({}, config.defaults, options); + + if (typeof options.expires === 'number') { + var days = options.expires, t = options.expires = new Date(); + t.setTime(+t + days * 864e+5); + } + + return (document.cookie = [ + encode(key), '=', stringifyCookieValue(value), + options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE + options.path ? '; path=' + options.path : '', + options.domain ? '; domain=' + options.domain : '', + options.secure ? '; secure' : '' + ].join('')); + } + + // Read + + var result = key ? undefined : {}; + + // To prevent the for loop in the first place assign an empty array + // in case there are no cookies at all. Also prevents odd result when + // calling $.cookie(). + var cookies = document.cookie ? document.cookie.split('; ') : []; + + for (var i = 0, l = cookies.length; i < l; i++) { + var parts = cookies[i].split('='); + var name = decode(parts.shift()); + var cookie = parts.join('='); + + if (key && key === name) { + // If second argument (value) is a function it's a converter... + result = read(cookie, value); + break; + } + + // Prevent storing a cookie that we couldn't decode. + if (!key && (cookie = read(cookie)) !== undefined) { + result[name] = cookie; + } + } + + return result; + }; + + config.defaults = {}; + + $.removeCookie = function (key, options) { + if ($.cookie(key) === undefined) { + return false; + } + + // Must not alter options, thus extending a fresh object... + $.cookie(key, '', $.extend({}, options, { expires: -1 })); + return !$.cookie(key); + }; + +}));