Improve custom limits UI in the admin panel

pull/1/head
yflory 4 years ago
parent a7f747bd54
commit 101b6800ea

@ -35,27 +35,26 @@
code { code {
cursor: pointer; cursor: pointer;
} }
ul.cp-compact { table {
.cp-admin-limit { td:not(:last-child) {
display: flex; padding-right: 20px;
align-items: center;
overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; }
ul { td:last-child {
display: inline; min-width: 0;
overflow: hidden;
white-space: nowrap; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
li { max-width: 500px;
display: inline-block;
&.limit {
width: 130px;
} }
&.plan { @media screen and (max-width: 1200px) {
width: 140px; td.note {
display: none;
} }
} }
@media screen and (max-width: 1400px) {
td.plan {
display: none;
} }
} }
} }

@ -210,8 +210,7 @@ define([
return obj[a].limit > obj[b].limit; return obj[a].limit > obj[b].limit;
}); });
var addClass = ""; var compact = list.length > 10;
if (list.length > 10) { addClass = ".cp-compact"; }
var content = list.map(function (key) { var content = list.map(function (key) {
var user = obj[key]; var user = obj[key];
@ -223,19 +222,30 @@ define([
var keyEl = h('code.cp-limit-key', key); var keyEl = h('code.cp-limit-key', key);
$(keyEl).click(function () { $(keyEl).click(function () {
$('.cp-admin-setlimit-form').find('.cp-setlimit-key').val(key); $('.cp-admin-setlimit-form').find('.cp-setlimit-key').val(key);
$('.cp-admin-setlimit-form').find('.cp-setlimit-quota').val(Math.floor(user.limit/1024));
$('.cp-admin-setlimit-form').find('.cp-setlimit-note').val(user.note);
}); });
return h('li.cp-admin-limit', { if (compact) {
title: addClass ? title : '' return h('tr.cp-admin-limit', {
title: title
}, [ }, [
h('td', keyEl),
h('td.limit', Messages._getKey('admin_limit', [limit])),
h('td.plan', Messages._getKey('admin_limitPlan', [user.plan])),
h('td.note', Messages._getKey('admin_limitNote', [user.note]))
]);
}
return h('li.cp-admin-limit', [
keyEl, keyEl,
h('ul.cp-limit-data', [ h('ul.cp-limit-data', [
h('li.limit', Messages._getKey('admin_limit', [limit])), h('li.limit', Messages._getKey('admin_limit', [limit])),
//h('li.plan', Messages._getKey('admin_limitPlan', [user.plan])), h('li.plan', Messages._getKey('admin_limitPlan', [user.plan])),
h('li.note', Messages._getKey('admin_limitNote', [user.note])) h('li.note', Messages._getKey('admin_limitNote', [user.note]))
]) ])
]); ]);
}); });
$div.append(h('ul.cp-admin-all-limits'+addClass, content)); if (compact) { return $div.append(h('table.cp-admin-all-limits', content)); }
$div.append(h('ul.cp-admin-all-limits', content));
}); });
}; };
APP.refreshLimits(); APP.refreshLimits();
@ -248,8 +258,8 @@ define([
var user = h('input.cp-setlimit-key'); var user = h('input.cp-setlimit-key');
var $key = $(user); var $key = $(user);
var limit = h('input', {type: 'number', min: 0, value: 0}); var limit = h('input.cp-setlimit-quota', {type: 'number', min: 0, value: 0});
var note = h('input'); var note = h('input.cp-setlimit-note');
var remove = h('button.btn.btn-danger', Messages.fc_remove); var remove = h('button.btn.btn-danger', Messages.fc_remove);
var set = h('button.btn.btn-primary', Messages.admin_setlimitButton); var set = h('button.btn.btn-primary', Messages.admin_setlimitButton);
var form = h('div.cp-admin-setlimit-form', [ var form = h('div.cp-admin-setlimit-form', [

Loading…
Cancel
Save