From 012f9a741b1efe214a8aa1f5ea47e49951114715 Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 20 Mar 2024 17:40:20 +0100 Subject: [PATCH] Support: UI fixes --- .../src/less2/include/sidebar-layout.less | 4 + customize.dist/src/less2/include/support.less | 15 +++- www/common/outer/support.js | 12 ++- www/moderation/inner.js | 78 ++++++++++++------- www/support/ui.js | 19 ++++- 5 files changed, 93 insertions(+), 35 deletions(-) diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less index fb13a4a3a..dac9029f2 100644 --- a/customize.dist/src/less2/include/sidebar-layout.less +++ b/customize.dist/src/less2/include/sidebar-layout.less @@ -96,6 +96,10 @@ color: @cryptpad_text_col; } + &.cp-sidebar-force-hide { + display: none !important; + } + &:not([data-item]) { // Old sidebar-layout blocks label:not(.noTitle), .cp-default-label { display: block; diff --git a/customize.dist/src/less2/include/support.less b/customize.dist/src/less2/include/support.less index c8fb74f2d..87478dd31 100644 --- a/customize.dist/src/less2/include/support.less +++ b/customize.dist/src/less2/include/support.less @@ -44,12 +44,13 @@ padding: 10px; } } + @ticket-padding: 10px; .cp-support-container { .cp-support-list-ticket { display: flex; flex-flow: column; background-color: @ticket-bg; - padding: 10px; + padding: @ticket-padding; width: 1200px; max-width: 90%; margin: 5px auto; @@ -76,10 +77,22 @@ display: none; } &.cp-not-loaded { + cursor: pointer; + .cp-support-ticket-tags { + cursor: default; + } .cp-support-list-actions { display: none; } } + &:not(.cp-not-loaded) { + .cp-support-ticket-header { + margin-bottom: @ticket-padding; + } + .cp-support-ticket-tags { + margin-bottom: @ticket-padding; + } + } .cp-support-ispremium { padding: 0 5px; background-color: @cp_admin-premium-bg; diff --git a/www/common/outer/support.js b/www/common/outer/support.js index 11bb744a3..402e0861f 100644 --- a/www/common/outer/support.js +++ b/www/common/outer/support.js @@ -696,7 +696,17 @@ define([ let ticket = t.active[chan] || t.pending[chan] || t.closed[chan]; ticket.tags = data.tags || []; Realtime.whenRealtimeSyncs(ctx.adminDoc.realtime, function () { - cb({done:true}); + let allTags = []; + ['active', 'pending', 'closed'].forEach(cat => { + let tickets = t[cat]; + Object.keys(tickets).forEach(id => { + let ticket = tickets[id]; + (ticket.tags || []).forEach(tag => { + if (!allTags.includes(tag)) { allTags.push(tag); } + }); + }); + }); + cb({done:true, allTags}); }); }); }; diff --git a/www/moderation/inner.js b/www/moderation/inner.js index 7e352c4e7..b1ccde813 100644 --- a/www/moderation/inner.js +++ b/www/moderation/inner.js @@ -56,6 +56,12 @@ define([ // XXX Messages.moderationPage = "Support panel"; // XXX + Messages.support_cat_open = "Inbox"; + Messages.support_cat_closed = "Closed"; + Messages.support_cat_search = "Search"; + Messages.support_cat_settings = "Settings"; + Messages.support_cat_legacy = "Legacy"; + Messages.support_pending = "Pending tickets:"; Messages.support_pending_tag = "Pending"; Messages.support_active_tag = "Active"; @@ -271,13 +277,8 @@ define([ console.error(obj && obj.error); return void UI.warn(Messages.error); } - // XXX check deleted tags - (tags || []).forEach(tag => { - if (!APP.allTags.includes(tag)) { APP.allTags.push(tag); } - }); + if (obj.allTags) { APP.allTags = obj.allTags; } events.REFRESH_TAGS.fire(); - //UI.log(Messags.saved); - //refreshAll(); }); }; onTag.getAllTags = () => { @@ -386,23 +387,24 @@ define([ // Make sidebar layout const categories = { 'open': { - icon: undefined, + icon: 'fa fa-inbox', content: [ - 'privacy', + 'refresh', 'filter', 'active-list', 'pending-list', ] }, 'closed': { - icon: undefined, + icon: 'fa fa-archive', content: [ + 'refresh', 'filter', 'closed-list' ] }, 'search': { - icon: undefined, + icon: 'fa fa-search', content: [ 'filter', 'search' @@ -414,20 +416,8 @@ define([ }); } }, - 'settings': { - icon: undefined, - content: [ - 'notifications', - 'recorded' - ], - onOpen: () => { - setTimeout(() => { - $('.cp-support-recorded-id').focus(); - }); - } - }, - 'ticket': { - icon: undefined, + 'new': { + icon: 'fa fa-envelope', content: [ 'open-ticket' ], @@ -439,19 +429,37 @@ define([ } }, 'legacy': { - icon: undefined, + icon: 'fa fa-server', content: [ 'legacy' ] }, - 'refresh': { - icon: undefined, - onClick: () => { refreshAll(); } - } + 'settings': { + icon: 'fa fa-cogs', + content: [ + 'privacy', + 'notifications', + 'recorded' + ], + onOpen: () => { + setTimeout(() => { + $('.cp-support-recorded-id').focus(); + }); + } + }, }; if (!APP.privateKey) { delete categories.legacy; } + sidebar.addItem('refresh', cb => { + let button = blocks.button('secondary', 'fa-refresh', Messages.oo_refresh); + Util.onClickEnter($(button), () => { + refreshAll(); + }); + let content = blocks.block([button]); + cb(content); + }, { noTitle: true, noHint: true }); + sidebar.addCheckboxItem({ key: 'privacy', getState: () => false, @@ -604,7 +612,17 @@ define([ }); var redrawList = function (allTags) { - if (!Array.isArray(allTags)) { return; } + if (!Array.isArray(allTags) || !allTags.length) { + setTimeout(() => { + $list.closest('.cp-sidebarlayout-element') + .toggleClass('cp-sidebar-force-hide', true); + }); + return; + } + setTimeout(() => { + $list.closest('.cp-sidebarlayout-element') + .toggleClass('cp-sidebar-force-hide', false); + }); $list.empty(); $list.removeClass('cp-empty'); if (!allTags.length) { diff --git a/www/support/ui.js b/www/support/ui.js index 5afd2db99..f6f351fb9 100644 --- a/www/support/ui.js +++ b/www/support/ui.js @@ -16,7 +16,7 @@ define([ ], function ($, ApiConfig, h, UI, Hash, Util, Clipboard, UIElements, Messages, Pages) { Messages.support_team = "The Support Team"; // XXX - Messages.support_answerAs = "Answer as {0}"; // XXX + Messages.support_answerAs = "Answering as {0}"; // XXX Messages.support_movePending = "Move to pending"; Messages.support_moveActive = "Move to active"; Messages.support_copyUserData = "Copy user data"; @@ -407,6 +407,7 @@ define([ var adminOpen; var ticket; let tagsContainer, tagsList; + let visible = false; if (ctx.isAdmin) { // Admin custom style adminClasses = `.cp-not-loaded`; @@ -428,7 +429,6 @@ define([ // Load & open ticket let show = h('button.btn.btn-primary.cp-support-expand', Messages.admin_support_open); let $show = $(show); - let visible = false; adminOpen = function (force, cb) { var $ticket = $(ticket); $show.prop('disabled', 'disabled'); @@ -469,7 +469,7 @@ define([ title: Messages.fm_tagsName }); if (onTag.readOnly) { tag = undefined; } - tagsContainer = h('div'); + tagsContainer = h('div.cp-support-ticket-tags'); tagsList = h('div.cp-tags-list'); let $list = $(tagsList); let redrawTags = (tags) => { @@ -504,6 +504,9 @@ define([ _field.tokenfield.on('tokenfield:editedoken', commitTags); _field.tokenfield.on('tokenfield:removedtoken', commitTags); + $(tagsContainer).click(e => { + e.stopPropagation(); + }); Util.onClickEnter($(tag), () => { $list.toggle(); $tags.toggle(); @@ -536,6 +539,16 @@ define([ // Add button handlers var $ticket = $(ticket); + + if (adminOpen) { + $ticket.click(function (e) { + if ($(e.target).is('button')) { return; } + e.preventDefault(); + e.stopPropagation(); + if (!visible) { adminOpen(true); } + }); + } + UI.confirmButton(close, { classes: 'btn-danger' }, function() {