From e7a6397084f5da42f27aeeab02384aac73b62533 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 11 Jun 2020 14:49:59 +0200 Subject: [PATCH] Add category filter and improve UI --- customize.dist/src/less2/include/support.less | 12 +++++ www/admin/inner.js | 17 +++++++ www/common/common-ui-elements.js | 4 +- www/support/app-support.less | 9 ++++ www/support/ui.js | 51 ++++++++++++------- 5 files changed, 73 insertions(+), 20 deletions(-) diff --git a/customize.dist/src/less2/include/support.less b/customize.dist/src/less2/include/support.less index 1d62157de..d83746b51 100644 --- a/customize.dist/src/less2/include/support.less +++ b/customize.dist/src/less2/include/support.less @@ -18,6 +18,18 @@ height: 300px; } } + .cp-support-attachments { + display: flex; + .fa { + cursor: pointer; + margin-right: 10px; + } + &> span { + border: 1px solid #ddd; + margin-right: 5px; + padding: 10px; + } + } .cp-support-container { .cp-support-list-ticket { display: flex; diff --git a/www/admin/inner.js b/www/admin/inner.js index 2ff62cf1f..90048e76d 100644 --- a/www/admin/inner.js +++ b/www/admin/inner.js @@ -185,6 +185,20 @@ define([ var $container = makeBlock('support-list'); var $div = $(h('div.cp-support-container')).appendTo($container); + var catContainer = h('div.cp-dropdown-container'); + $div.append(catContainer); + var category = 'all'; + var $drop = APP.support.makeCategoryDropdown(catContainer, function (key) { + category = key; + if (key === 'all') { + $div.find('.cp-support-list-ticket').show(); + return; + } + $div.find('.cp-support-list-ticket').hide(); + $div.find('.cp-support-list-ticket[data-cat="'+key+'"]').show(); + }, true); + $drop.setValue('all'); + var metadataMgr = common.getMetadataMgr(); var privateData = metadataMgr.getPrivateData(); var cat = privateData.category || ''; @@ -277,6 +291,9 @@ define([ UI.alert(Messages.error); }); }); + if (category !== 'all' && $ticket.attr('data-cat') !== category) { + $ticket.hide(); + } } $ticket.append(APP.support.makeMessage(content, hash)); reorder(); diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 4393d1201..4d2f8b3c7 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -2204,7 +2204,9 @@ define([ if (config.isSelect && value) { var $val = $innerblock.find('[data-value="'+value+'"]'); setActive($val); - $innerblock.scrollTop($val.position().top + $innerblock.scrollTop()); + try { + $innerblock.scrollTop($val.position().top + $innerblock.scrollTop()); + } catch (e) {} } if (config.feedback) { Feedback.send(config.feedback); } }; diff --git a/www/support/app-support.less b/www/support/app-support.less index 7684c054e..41af016fd 100644 --- a/www/support/app-support.less +++ b/www/support/app-support.less @@ -18,6 +18,15 @@ display: flex; flex-flow: column; + .cp-support-form-attachments { + .fa { + cursor: pointer; + } + &> span { + padding: 10px; + } + } + .cp-support-language-list { .cp-support-language { margin-left: 5px; diff --git a/www/support/ui.js b/www/support/ui.js index e95a8e8cf..e4d60e919 100644 --- a/www/support/ui.js +++ b/www/support/ui.js @@ -66,7 +66,7 @@ define([ var $cat = $form.find('.cp-support-form-category'); var $title = $form.find('.cp-support-form-title'); var $content = $form.find('.cp-support-form-msg'); - var $attachments = $form.find('.cp-support-form-attachments'); + var $attachments = $form.find('.cp-support-attachments'); var category = $cat.val().trim(); @@ -105,10 +105,32 @@ Messages.support_cat_account = "User account"; // XXX Messages.support_cat_data = "Loss of content"; // XXX Messages.support_cat_bug = "Bug report"; // XXX Messages.support_cat_other = "Other"; // XXX +Messages.support_cat_all = "All"; // XXX Messages.support_category = "Category"; // XXX Messages.support_attachments = "Attachments"; // XXX Messages.support_addAttachment = "Add attachment"; // XXX + var makeCategoryDropdown = function (ctx, container, onChange, all) { + var categories = ['account', 'data', 'bug', 'other']; + if (all) { categories.push('all'); } + categories = categories.map(function (key) { + return { + tag: 'a', + content: h('span', Messages['support_cat_'+key]), + action: function () { + onChange(key); + } + }; + }); + var dropdownCfg = { + text: Messages.support_category, + options: categories, + container: $(container), + isSelect: true + }; + return UIElements.createDropdown(dropdownCfg); + }; + var makeForm = function (ctx, cb, title) { var button; @@ -123,23 +145,10 @@ Messages.support_addAttachment = "Add attachment"; // XXX type: 'hidden', value: '' }); - var categories = ['account', 'data', 'bug', 'other'].map(function (key) { - return { - tag: 'a', - content: h('span', Messages['support_cat_'+key]), - action: function () { - $(category).val(key); - } - }; - }); var catContainer = h('div.cp-dropdown-container' + (title ? '.cp-hidden': '')); - var dropdownCfg = { - text: Messages.support_category, - options: categories, - container: $(catContainer), - isSelect: true - }; - var $drop = UIElements.createDropdown(dropdownCfg); + makeCategoryDropdown(ctx, catContainer, function (key) { + $(category).val(key); + }); var attachments, addAttachment; @@ -157,7 +166,7 @@ Messages.support_addAttachment = "Add attachment"; // XXX placeholder: Messages.support_formMessage }), h('label', Messages.support_attachments), - attachments = h('div.cp-support-form-attachments'), + attachments = h('div.cp-support-attachments'), addAttachment = h('button', Messages.support_addAttachment), h('hr'), button, @@ -240,6 +249,7 @@ Messages.support_addAttachment = "Add attachment"; // XXX } var $ticket = $(h('div.cp-support-list-ticket', { + 'data-cat': content.category, 'data-id': content.id }, [ h('h2', [ticketCategory, ticketTitle, url]), @@ -334,7 +344,7 @@ Messages.support_addAttachment = "Add attachment"; // XXX h('span.cp-support-message-time', content.time ? new Date(content.time).toLocaleString() : '') ]), h('pre.cp-support-message-content', content.message), - h('div', attachments), + h('div.cp-support-attachments', attachments), isAdmin ? userData : undefined, ]); }; @@ -382,6 +392,9 @@ Messages.support_addAttachment = "Add attachment"; // XXX ui.makeForm = function (cb, title) { return makeForm(ctx, cb, title); }; + ui.makeCategoryDropdown = function (container, onChange, all) { + return makeCategoryDropdown(ctx, container, onChange, all); + }; ui.makeTicket = function ($div, content, onHide) { return makeTicket(ctx, $div, content, onHide); };