Add category filter and improve UI

This commit is contained in:
yflory 2020-06-11 14:49:59 +02:00
parent 9aafd5f3c5
commit e7a6397084
5 changed files with 73 additions and 20 deletions

View file

@ -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;

View file

@ -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();

View file

@ -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); }
};

View file

@ -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;

View file

@ -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);
};