From d4926f31aa9fb50b4066ebbcc34325b0f6cb6e27 Mon Sep 17 00:00:00 2001 From: Zacharie Date: Tue, 19 May 2020 12:08:43 +0200 Subject: [PATCH] Issue #1167 : Group manager action and design fixes * Icon colour standardized with intro page in css * Dark mode colour changes * Load state changes on several actions (especially in delete popin) * Rename group action is now effective if the name didn't change --- admin/themes/clear/theme.css | 33 ++- admin/themes/default/js/group_list.js | 211 +++++++++---------- admin/themes/default/template/group_list.tpl | 11 +- admin/themes/default/template/intro.tpl | 44 ++-- admin/themes/default/theme.css | 41 +--- admin/themes/roma/theme.css | 93 +++++--- include/ws_functions/pwg.groups.php | 1 + 7 files changed, 232 insertions(+), 202 deletions(-) diff --git a/admin/themes/clear/theme.css b/admin/themes/clear/theme.css index d95dcc3eb..08552f570 100644 --- a/admin/themes/clear/theme.css +++ b/admin/themes/clear/theme.css @@ -603,10 +603,14 @@ input:focus + .slider { } .ValidationUserAssociated, .ValidationUserDissociated{ - color:#00aa00; + color:#00aa00 !important; background-color:#c2f5c2; } +.ValidationUserAssociated p, .ValidationUserDissociated p { + color:#00aa00 !important; +} + /*------*/ .userSeparator { @@ -703,4 +707,29 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; .buttonSeparator {color: #3C3C3C;} #uploadForm li.plupload_droptext {background-color: #F5F5F5!important;} .addFilesButtonChanged {background-color: #E5E5E5;} -.addFilesButtonChanged:hover {background-color: #BBB;} \ No newline at end of file +.addFilesButtonChanged:hover {background-color: #BBB;} + +.icon-red { + background-color: #ffcfcf; + color: #ff5252; +} + +.icon-yellow { + color: #ffa744; + background-color: #ffe9cf; +} + +.icon-purple { + background-color: #e0daf4; + color: #896af3; +} + +.icon-blue { + background-color: #cfebff; + color: #2883c3; +} + +.icon-green { + background-color: #d6ffcf; + color: #6ece5e; +} \ No newline at end of file diff --git a/admin/themes/default/js/group_list.js b/admin/themes/default/js/group_list.js index b34c97284..44576b20e 100644 --- a/admin/themes/default/js/group_list.js +++ b/admin/themes/default/js/group_list.js @@ -1,5 +1,17 @@ const DELAY_FEEDBACK = 3000; - +const jConfirm_alert_options = { + icon: 'icon-ok', + titleClass: "groupAlert", + theme:"modern", + closeIcon: true, + draggable: false, + animation: "zoom", + boxWidth: '20%', + useBootstrap: false, + backgroundDismiss: true, + animateFromElement: false, + typeAnimated: false, +} /*------- Group Popin -------*/ @@ -85,7 +97,9 @@ jQuery(document).ready(function () { if (data.stat === "ok") { $(".addGroupFormLabelAndInput input").val(''); group = data.result.groups[0]; - createGroup(group).prependTo(".groups") + groupBox = createGroup(group) + groupBox.prependTo(".groups") + setupGroupBox(groupBox); } else { $("#addGroupForm .groupError").html(str_name_taken); $("#addGroupForm .groupError").fadeIn(); @@ -110,13 +124,13 @@ var createGroup = function(group) { newgroup.find(".input-edit-group-name").attr("placeholder", group.name); newgroup.find(".group_number_users").html(group.nb_users+" " + ((group.nb_users > 1)? str_members_default:str_member_default)); newgroup.find(".group_name-editable").html(group.name); + newgroup.find(".manage-permissions").attr("href", "admin.php?page=group_perm&group_id="+group.id) hideAddGroupForm(); + //Setup the icon color - var colors = [["#ffa744", "#ffe9cf"],["#896af3", "#e0daf4"], ["#6ece5e","#d6ffcf"],["#2883c3","#cfebff"]]; - var colorId = Number(group.id)%4; - newgroup.find(".icon-users-1").attr("style", "color:"+colors[colorId][0]+"; background-color:"+colors[colorId][1]); - - setupGroupBox(newgroup); + var colors = ["icon-red", "icon-blue", "icon-yellow", "icon-purple", "icon-green"]; + var colorId = Number(group.id)%5; + newgroup.find(".icon-users-1").addClass(colors[colorId]); //Place group in first Place newgroup.find(".groupMessage").html(str_group_created); @@ -130,7 +144,8 @@ var createGroup = function(group) { -------*/ jQuery(document).ready(function () { $(".GroupContainer").each(function () { - setupGroupBox($(this)); + if ($(this).attr("id") != "group-template") + setupGroupBox($(this)); }); }); var setupGroupBox = function (groupBox) { @@ -149,48 +164,7 @@ var setupGroupBox = function (groupBox) { /* Set the delete action */ groupBox.find("#GroupDelete").on("click", function () { - $.confirm({ - title: str_delete.replace("%s",groupBox.find("#group_name").html()), - draggable: false, - titleClass: "groupDeleteConfirm", - theme: "modern", - content: "", - animation: "zoom", - boxWidth: '30%', - useBootstrap: false, - type: 'red', - animateFromElement: false, - backgroundDismiss: true, - typeAnimated: false, - buttons: { - confirm: { - text: str_yes_delete_confirmation, - btnClass: 'btn-red', - action: function () { - let groupName = groupBox.find(".Group-name-container p").html(); - deleteGroup(id).then(() => { - $.alert({ - title: str_group_deleted.replace("%s",groupName), - icon: 'icon-ok', - titleClass: "groupDeleteAlert", - theme:"modern", - closeIcon: true, - content: "", - animation: "zoom", - boxWidth: '20%', - useBootstrap: false, - backgroundDismiss: true, - animateFromElement: false, - typeAnimated: false, - }); - }); - } - }, - cancel: { - text: str_no_delete_confirmation - } - } - }); + deleteGroup(id); }); /* Set the rename action */ @@ -204,10 +178,7 @@ var setupGroupBox = function (groupBox) { groupBox.find(".group-rename form").on("submit", function (e) { e.preventDefault(); - if (groupBox.find(".group_name-editable").val() != groupBox.find("#group_name").html()) - renameGroup(id, groupBox.find(".group_name-editable").val()) - else - displayRenameForm(false, id) + renameGroup(id, groupBox.find(".group_name-editable").val()) }); groupBox.find(".group-rename .icon-cancel").on('click', function() { @@ -234,7 +205,7 @@ var setupGroupBox = function (groupBox) { if (groupBox.data("default") == 1) { setupDefaultActions(id, true); } else if (groupBox.data("default") == 0) { - setupDefaultActions(id, false); + setupDefaultActions(id, false); } groupBox.find(".manage-users").on("click", function(){openUserManager(id)}); @@ -290,25 +261,54 @@ var toogleSelection = function(group_id, toggle) { /* Group Ajax and Display Functions */ var deleteGroup = function (id) { - return new Promise((resolve, reject) => { - jQuery.ajax({ - url: "ws.php?format=json&method=pwg.groups.delete", - type: "POST", - data: "group_id=" + id + "&pwg_token=" + pwg_token, - success: function (raw_data) { - data = jQuery.parseJSON(raw_data); - if (data.stat === "ok") { - $("#group-" + id).remove(); - $(".DeleteGroupList div[data-id="+id+"]").remove() - $("#MergeOptionsChoices option[value="+ id +"]").remove() - resolve(); + $.confirm({ + title: str_delete.replace("%s",$("#group-"+id+" #group_name").html()), + draggable: false, + titleClass: "groupDeleteConfirm", + theme: "modern", + content: "", + animation: "zoom", + boxWidth: '30%', + useBootstrap: false, + type: 'red', + animateFromElement: false, + backgroundDismiss: true, + typeAnimated: false, + buttons: { + confirm: { + text: str_yes_delete_confirmation, + btnClass: 'btn-red', + action: function () { + let groupName = $("#group-"+id+" .Group-name-container p").html() + $.alert({ + ...{title : str_group_deleted.replace("%s",groupName), + content: function() { + return jQuery.ajax({ + url: "ws.php?format=json&method=pwg.groups.delete", + type: "POST", + data: "group_id=" + id + "&pwg_token=" + pwg_token, + success: function (raw_data) { + data = jQuery.parseJSON(raw_data); + if (data.stat === "ok") { + $("#group-" + id).remove(); + $(".DeleteGroupList div[data-id="+id+"]").remove() + $("#MergeOptionsChoices option[value="+ id +"]").remove() + } + }, + error: function (err) { + console.log(err); + }, + }) + }}, + ...jConfirm_alert_options + }); + } + }, + cancel: { + text: str_no_delete_confirmation } - }, - error: function (err) { - console.log(err); - }, - }); - }) + } + }); }; var renameGroup = function(id, newName) { @@ -360,20 +360,17 @@ var displayRenameForm = function(doDisplay, grp_id) { } var setDefaultGroup = function (id, is_default) { - $("#group-"+id+" #GroupOptions").hide(); - let loadState = new TemporaryState(); - loadState.removeClass($("#group-" + id + " .is-default-token"), "icon-star"); - loadState.addClass($("#group-" + id + " .is-default-token"), "icon-spin6"); - loadState.addClass($("#group-" + id + " .is-default-token"), "animate-spin"); - loadState.changeAttribute($("#group-" + id + " .is-default-token"), "style", "pointer-events: none; display:block") - loadState.changeAttribute($("#group-" + id + " #GroupDefault"), "style", "pointer-events: none") + $("#group-" + id + " #GroupDefault").css("width", $("#group-" + id + " #GroupDefault").width()) + $("#group-" + id + " #GroupDefault").html(" ") + $("#group-" + id + " #GroupDefault").removeClass("icon-star"); + $("#group-" + id + " #GroupDefault").attr("style", "pointer-events: none; text-align: center;") + $("#group-" + id).find(".is-default-token").addClass("icon-spin6").addClass("animate-spin").removeClass("icon-star") jQuery.ajax({ url: "ws.php?format=json&method=pwg.groups.setInfo", type: "POST", data: "group_id=" + id + "&pwg_token=" + pwg_token + "&is_default="+is_default, success: function (raw_data) { data = jQuery.parseJSON(raw_data); - loadState.reverse(); if (data.stat === "ok") { if (is_default) { setupDefaultActions(id,true) @@ -389,18 +386,20 @@ var setDefaultGroup = function (id, is_default) { }; var setupDefaultActions = function(id, is_default) { + $("#group-" + id + " #GroupDefault").attr("style", ""); + $("#group-" + id + " #GroupDefault").addClass("icon-star") + $("#group-" + id).find(".is-default-token").removeClass("icon-spin6").removeClass("animate-spin").addClass("icon-star") if (is_default) { $("#group-" + id).find("#GroupDefault").html(str_unset_default); $("#group-" + id).find(".is-default-token").attr("title",str_unset_default) - $("#group-" + id).find(".is-default-token").removeClass("deactivate"); $("#group-" + id).find("#GroupDefault").unbind("click"); + $("#group-" + id).find(".is-default-token").removeClass("deactivate"); $("#group-" + id).find("#GroupDefault").on("click", function(){setDefaultGroup(id, false)}) $("#group-" + id).find(".is-default-token").on("click", function(){setDefaultGroup(id, false)}) } else { $("#group-" + id).find("#GroupDefault").html(str_set_default); $("#group-" + id).find(".is-default-token").attr("title",str_set_default) - $("#group-" + id).find(".is-default-token").addClass("deactivate");; - $("#group-" + id).find("#GroupDefault").unbind("click"); + $("#group-" + id).find(".is-default-token").addClass("deactivate"); $("#group-" + id).find("#GroupDefault").on("click", function(){setDefaultGroup(id, true)}) $("#group-" + id).find(".is-default-token").unbind("click"); } @@ -434,12 +433,13 @@ var duplicateAction = function(id) { data: "group_id=" + id + "&pwg_token=" + pwg_token + "©_name=" + copy_name, success: function (raw_data) { data = jQuery.parseJSON(raw_data); - console.log(data); loadState.reverse(); if (data.stat === "ok") { $("#group-"+id+" #GroupOptions").hide(); group = data.result.groups[0]; - createGroup(group).insertAfter($("#group-"+id)); + let groupbox = createGroup(group) + groupbox.insertAfter($("#group-"+id)); + setupGroupBox(groupbox); } }, error: function (err) { @@ -591,7 +591,6 @@ $('.ConfirmMergeButton').on("click", function() { data = jQuery.parseJSON(raw_data); if (data.stat === "ok") { updateSelectionPanel('Selection'); - console.log(data); merge_group.forEach(function(id) { ($("#group-"+id).fadeOut(complete=function(){ $(this).remove(); @@ -602,20 +601,11 @@ $('.ConfirmMergeButton').on("click", function() { $("#MergeOptionsChoices").html(""); $.alert({ - title: str_merged_into + ...{title: str_merged_into .replace("%s1",name_merge.toString()) .replace("%s2",name_dest), - icon: 'icon-ok', - titleClass: "groupDeleteAlert", - theme:"modern", - closeIcon: true, - content: "", - animation: "zoom", - boxWidth: '20%', - useBootstrap: false, - backgroundDismiss: true, - animateFromElement: false, - typeAnimated: false, + content: "",}, + ...jConfirm_alert_options }); $("#group-"+dest_grp + " .group_number_users").html(" "); @@ -675,19 +665,10 @@ $('.ConfirmDeleteButton').on("click", function() { loadState.reverse(); updateSelectionPanel("NoSelection"); $.alert({ - title: str_groups_deleted.replace("%s",names.toString()), - titleClass: "groupDeleteAlert", - theme: "modern", - icon: 'icon-ok', - closeIcon: true, - content: "", - animation: "zoom", - boxWidth: '20%', - useBootstrap: false, - backgroundDismiss: true, - animateFromElement: false, - typeAnimated: false, - backgroundDismiss: true, + ...{title: str_groups_deleted.replace("%s",names.toString()), + content: "", + }, + ...jConfirm_alert_options }); } }, @@ -838,9 +819,9 @@ var getUserDisplay = function(username, user_id, grp_id) { data = jQuery.parseJSON(raw_data); if (data.stat === "ok") { let str = str_user_dissociated.replace("%s", username) + associateUserInfo.fadeOut(); dissociateUserInfo.find("p").html(str); dissociateUserInfo.fadeIn() - dissociateUserInfo.delay(DELAY_FEEDBACK).fadeOut() userBlock.remove() @@ -902,7 +883,9 @@ $(".AddUserBlock button").on("click", function () { } }) let userBlock = getUserDisplay(username, id, grp_id).prependTo(".UsersInGroupList"); - + + dissociateUserInfo.fadeOut() + associateUserInfo.remove() associateUserInfo.insertAfter(userBlock); associateUserInfo.find("p").html(str_user_associated); diff --git a/admin/themes/default/template/group_list.tpl b/admin/themes/default/template/group_list.tpl index 9e5972fbd..b5be4b645 100644 --- a/admin/themes/default/template/group_list.tpl +++ b/admin/themes/default/template/group_list.tpl @@ -46,7 +46,7 @@ var rootUrl = '{$ROOT_URL}'
-
+
@@ -149,7 +149,7 @@ var rootUrl = '{$ROOT_URL}'
-
+

{'Add group'|translate}

@@ -173,17 +173,16 @@ var rootUrl = '{$ROOT_URL}' {* Template Group (for js application) *} {groupContent grp_id="template" grp_name="Template" grp_members=0 grp_is_default=false} - {assign var='color_tab' value=[["#ffa744", "#ffe9cf"],["#896af3", "#e0daf4"], ["#6ece5e","#d6ffcf"],["#2883c3","#cfebff"]]} + {assign var='color_tab' value=["icon-red", "icon-blue", "icon-yellow", "icon-purple", "icon-green"]} {if not empty($groups)} {foreach from=$groups item=group name=group_loop} - {assign var='color_id' value=$group.ID%4} + {assign var='color_id' value=$group.ID%5} {groupContent grp_id=$group.ID grp_name=$group.NAME grp_members=$group.MEMBERS - icon_color=$color_tab[$color_id][0] - icon_background_color=$color_tab[$color_id][1] + grp_color=$color_tab[$color_id] grp_is_default=$group.IS_DEFAULT } diff --git a/admin/themes/default/template/intro.tpl b/admin/themes/default/template/intro.tpl index abae8a33a..a9f253f8d 100644 --- a/admin/themes/default/template/intro.tpl +++ b/admin/themes/default/template/intro.tpl @@ -64,76 +64,76 @@ jQuery().ready(function(){
{if $NB_PHOTOS > 1} - - + + {$NB_PHOTOS|number_format}{'Photos'|translate} {/if} {if $NB_ALBUMS > 1} - - + + {$NB_ALBUMS}{'Albums'|translate} {/if} {if $NB_TAGS > 1} - - + + {$NB_TAGS}{'Tags'|translate} {/if} {if $NB_USERS > 2} - - + + {$NB_USERS}{'Users'|translate} {/if} {if $NB_GROUPS > 0} - - + + {$NB_GROUPS}{'Groups'|translate} {/if} {if $NB_COMMENTS > 1} - - + + {$NB_COMMENTS}{'Comments'|translate} {/if} {if $NB_RATES > 0} - - + + {$NB_RATES}{'Rating'|translate} {/if} {if $NB_VIEWS > 0} - - + + {$NB_VIEWS}{'Pages seen'|translate} {/if} {if $NB_PLUGINS > 0} - - + + {$NB_PLUGINS}{'Plugins'|translate} {/if} -
- +
+ {$STORAGE_USED}{'Storage used'|translate}
{if $NB_PHOTOS > 1} -
- +
+ {$first_added_age}{'First photo added'|translate}
{/if} diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css index e014321d7..78a90abe7 100644 --- a/admin/themes/default/theme.css +++ b/admin/themes/default/theme.css @@ -517,35 +517,12 @@ div.stat-box { .stat-box i { display: inline-block; - background-color: #ffcfcf; - color: #ff5252; border-radius: 50%; font-size: 37px; padding: 20px; margin-bottom: 15px; } -.stat-box-yellow i { - color:#ffa744; - background-color: #ffe9cf; -} -.stat-box-red i { - background-color: #ffcfcf; - color: #ff5252; -} -.stat-box-purple i { - background-color: #e0daf4; - color: #896af3; -} -.stat-box-green i { - background-color: #d6ffcf; - color: #6ece5e; -} -.stat-box-blue i { - background-color: #cfebff; - color: #2883c3; -} - .stat-box .number, .stat-box .caption { display:block; font-size: 16px; @@ -1673,8 +1650,6 @@ input[type="text"].dError {border-color:#ff7070; background-color:#FFe5e5;} .groups .icon-users-1:first-child{ font-size: 19px; - color: #4d4d4d; - background-color: #ffffff; width: 27px; padding: 10px; border-radius: 30px; @@ -2044,17 +2019,17 @@ input:checked + .slider:before { font-size: 13px; } -.groupDeleteConfirm, .groupDeleteAlert { +.groupDeleteConfirm, .groupAlert { padding-bottom: 0 !important; color: #3c3c3c !important; line-height: 28px !important; } -.groupDeleteAlert { +.groupAlert { margin-bottom: -2px !important; } -.groupDeleteConfirm ~ .jconfirm-content-pane, .groupDeleteAlert ~ .jconfirm-content-pane { +.groupDeleteConfirm ~ .jconfirm-content-pane, .groupAlert ~ .jconfirm-content-pane { height: 0px !important; margin: 0px !important; } @@ -2063,7 +2038,7 @@ input:checked + .slider:before { text-transform: none !important; } -.groupDeleteAlert .jconfirm-icon-c i { +.groupAlert .jconfirm-icon-c i { color: #0a0 !important; background-color:#c2f5c2 !important; border-radius: 20px; @@ -2073,10 +2048,14 @@ input:checked + .slider:before { font-size: 45px; } -.groupDeleteAlert .jconfirm-icon-c { +.groupAlert .jconfirm-icon-c { margin-bottom: 25px !important; } +.groupAlert .jconfirm-title { + font-size: 20px !important; +} + /*Group checkbox*/ .Group-checkbox{ @@ -2148,8 +2127,6 @@ input:checked + .slider:before { .groups .icon-plus-circled{ font-size: 19px; - color: rgb(44,132,195); - background-color: #CDE9FD; width: 27px; height: 27px; padding: 10px; diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css index efb8a2111..7c368021a 100644 --- a/admin/themes/roma/theme.css +++ b/admin/themes/roma/theme.css @@ -221,27 +221,6 @@ a.stat-box:hover { color:#aeaeae; } -.stat-box-yellow i { - color:#9b5200; - background-color: #ffa744; -} -.stat-box-red i { - background-color: #c64444; - color: #650101; -} -.stat-box-purple i { - background-color: #ce4baa; - color: #52003b; -} -.stat-box-green i { - background-color: #4ac641; - color: #014400; -} -.stat-box-blue i { - background-color: #379bbc; - color: #003751; -} - /* hacks */ * html[lang="en"] body .content h2 , *+html[lang="en"] body .content h2 { text-transform:capitalize; } /* IE */ *+html .bigtext { left: 70px; } @@ -270,6 +249,10 @@ a.stat-box:hover { .languageBox {background-color:#333;} .languageName {color:#ccc;} .languageDefault {background-color:#555; color:#aaa;} +.groupMessage {color: #c2f5c2 ;background-color: #0a0;} +.groupError {color: #ffd5dc;background-color: #f22;} +.group-rename input {color: #999;} +.GroupBackgroudSelected .Group-name {color: #333 !important;} /* Batch Manager */ #batchManagerGlobal .thumbnails .font-checkbox [class*="icon-check"]::before { @@ -360,7 +343,7 @@ label>p.group_select { } .groups .group_number_users{ - color:#d5d5d5; + color:#777; } .addUserButton:hover{ @@ -423,8 +406,7 @@ label>p.group_select { } .groups #GroupPermission:hover, -.groups #GroupDuplicate:hover, -.groups #GroupDelete:hover{ +.group-dropdown-option:hover{ background-color:#393939; } @@ -510,6 +492,7 @@ input:focus + .slider { .GroupBackgroudSelected{ background-color:#f9852c!important; + box-shadow: none !important; } .OrangeIcon{ @@ -634,12 +617,14 @@ input:focus + .slider { .ValidationUserAssociated, .ValidationUserDissociated{ background-color:#00aa00; - color:#c2f5c2; +} + +.ValidationUserAssociated p, .ValidationUserDissociated p{ + color:#c2f5c2 !important; } .groups .showCreateGroup .icon-plus-circled, #UserList .group-name-block span, -.groups .icon-users-1:first-child, .groups .showCreateGroup .icon-plus-circled{ color:#003751; background-color: #379bbc; @@ -822,3 +807,59 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; color: #a7d6ff; padding: 2px 7px; } + +/* Popin Jconfirm*/ + +.jconfirm .jconfirm-box { + background-color: #333 !important; +} + +.jconfirm-title { + color: #777 !important; +} + +.groupAlert .jconfirm-icon-c i { + color:#c2f5c2 !important; + background-color:#0a0 !important; +} + +.jconfirm .jconfirm-box .jconfirm-buttons button.btn-default { + color: #777 !important; + background-color: #222 !important; +} + +.jconfirm .jconfirm-box .jconfirm-buttons button.btn-default:hover { + color: #222!important; + background-color: #777 !important; +} + +.jconfirm .jconfirm-box.loading::before { + background: #333 !important; +} + +/* Icon colors*/ + +.icon-red { + background-color: #c64444; + color: #650101; +} + +.icon-yellow { + color: #9b5200; + background-color: #ffa744; +} + +.icon-purple { + background-color: #ce4baa; + color: #52003b; +} + +.icon-blue { + background-color: #379bbc; + color: #003751; +} + +.icon-green { + background-color: #4ac641; + color: #014400; +} \ No newline at end of file diff --git a/include/ws_functions/pwg.groups.php b/include/ws_functions/pwg.groups.php index 668385acc..c0c664ba1 100644 --- a/include/ws_functions/pwg.groups.php +++ b/include/ws_functions/pwg.groups.php @@ -150,6 +150,7 @@ SELECT COUNT(*) SELECT COUNT(*) FROM `'. GROUPS_TABLE .'` WHERE name = \''. $params['name'] .'\' + AND id != '.$params['group_id'].' ;'; list($count) = pwg_db_fetch_row(pwg_query($query)); if ($count != 0)