From 5cbb7529b36739e58c8192aaeaa1d00efa7eb395 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 21 Mar 2024 15:59:09 +0100 Subject: [PATCH] More UI fixes --- .../src/less2/include/sidebar-layout.less | 44 ++-- www/admin/app-admin.less | 43 ++++ www/admin/inner.js | 226 +++++++++--------- www/common/LessLoader.js | 6 +- www/common/inner/sidebar-layout.js | 12 +- 5 files changed, 195 insertions(+), 136 deletions(-) diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less index dac9029f2..4b564b35a 100644 --- a/customize.dist/src/less2/include/sidebar-layout.less +++ b/customize.dist/src/less2/include/sidebar-layout.less @@ -123,12 +123,11 @@ } input, textarea { font-family: inherit; - } - input, textarea { max-width: @sidebar_block-width; } [type="color"] { width: @sidebar_block-width/5; + padding: 3px; } .cp-labelled-input { margin-top: @sidebar_base-margin; @@ -166,34 +165,33 @@ .cp-sidebar-bigger-alert { font-size: 16px; } - th { - max-width: 60vw; - border: 1px solid #777; - padding: 7px; - } - td { - padding: 0.3rem; - margin-right: 2px; - } .cp-checkmark { padding: @sidebar_base-margin; + padding-left: 0; } - .cp-broadcast-container { - display: flex; - flex-flow: column; + code { + color: @cryptpad_text_col; } - .cp-broadcast-lang { - order: 4; - margin: 30px; - margin-bottom: 0; - display: flex; - flex-flow: column; - align-items: baseline; - } - .cp-sidebar-list { + .cp-sidebar-table { + margin-top: @sidebar_base-margin; pre { margin: 0; } + th { + border: 1px solid @cp_drive-icon-border; + padding: 7px; + } + td { + border: 1px solid @cp_drive-icon-border; + padding: 0.3rem; + margin-right: 2px; + *:not(:last-child) { + margin-right: @sidebar_base-margin; + } + } + tr:nth-child(odd) { + background-color: @cp_sidebar-left-item-bg; + } } .cp-sidebar-input-block { display: inline-flex; diff --git a/www/admin/app-admin.less b/www/admin/app-admin.less index dbf468705..ab2859d9e 100644 --- a/www/admin/app-admin.less +++ b/www/admin/app-admin.less @@ -32,5 +32,48 @@ border-radius: 5px; background-color: @cryptpad_color_brand; } + .cp-admin-color-preview { + & > div { + margin-top: @sidebar_base-margin; + padding: 2*@sidebar_base-margin; + } + .cp-admin-color-preview-dark { + @import (reference) '../../customize/src/less2/include/colortheme-dark.less?force'; + background-color: @cp_sidebar-right-bg; + border: 1px solid @cryptpad_text_col; + a { + color: @cryptpad_color_link !important; + } + } + .cp-admin-color-preview-light { + @import (reference) '../../customize/src/less2/include/colortheme.less?force'; + @import '../../customize/src/less2/include/forms.less?force'; + background-color: @cp_sidebar-right-bg; + border: 1px solid @cryptpad_text_col; + a { + color: @cryptpad_color_link !important; + } + } + } + + .cp-admin-broadcast-form { + & > *:not(:last-child) { + margin-bottom: @sidebar_base-margin; + margin-top: 0; + } + .cp-broadcast-container { + display: flex; + flex-flow: column; + } + .cp-broadcast-lang { + margin-left: 30px; + display: flex; + flex-flow: column; + align-items: baseline; + &:not(:last-child) { + margin-bottom: @sidebar_base-margin; + } + } + } } diff --git a/www/admin/inner.js b/www/admin/inner.js index d9dbde5a5..2132ec102 100644 --- a/www/admin/inner.js +++ b/www/admin/inner.js @@ -856,10 +856,17 @@ define([ let current = blocks.block([], 'cp-admin-color-current'); let labelCurrent = blocks.labelledInput(Messages.admin_colorCurrent, current); let preview = blocks.block([ - blocks.link('CryptPad', '/admin/#customize'), - blocks.button('primary', 'fa-floppy-o', Messages.settings_save), - blocks.button('secondary', 'fa-floppy-o', Messages.settings_save), - ], 'cp-admin-color-preview cp-sidebar-flex-block'); + blocks.block([ + blocks.link('CryptPad', '/admin/#customize'), + blocks.button('primary', 'fa-floppy-o', Messages.settings_save), + blocks.button('secondary', 'fa-floppy-o', Messages.settings_save) + ], 'cp-admin-color-preview-dark cp-sidebar-flex-block'), + blocks.block([ + blocks.link('CryptPad', '/admin/#customize'), + blocks.button('primary', 'fa-floppy-o', Messages.settings_save), + blocks.button('secondary', 'fa-floppy-o', Messages.settings_save) + ], 'cp-admin-color-preview-light cp-sidebar-flex-block') + ], 'cp-admin-color-preview'); let labelPreview = blocks.labelledInput(Messages.admin_colorPreview, preview); let $preview = $(preview); @@ -895,13 +902,16 @@ define([ $preview.find('.btn-primary').css({ 'background-color': color }); - $preview.find('.btn-secondary').css({ + $preview.find('.cp-admin-color-preview-dark .btn-secondary').css({ 'border-color': lightColor, 'color': lightColor, }); - $preview.find('a').css({ - 'color': lightColor, + $preview.find('.cp-admin-color-preview-light .btn-secondary').css({ + 'border-color': color, + 'color': color, }); + $preview.find('.cp-admin-color-preview-dark a').attr('style', `color: ${lightColor} !important`); + $preview.find('.cp-admin-color-preview-light a').attr('style', `color: ${color} !important`); }); }); @@ -1054,7 +1064,7 @@ define([ var data = all[key]; var url = privateData.origin + Hash.hashToHref(key, 'register'); - var del = blocks.button('danger', 'fa fa-trash', Messages.kanban_delete ); + var del = blocks.button('danger', 'fa-trash', Messages.kanban_delete ); var $del = $(del); Util.onClickEnter($del, function () { $del.attr('disabled', 'disabled'); @@ -1064,7 +1074,7 @@ define([ deleteInvite(key); }); }); - var copy = blocks.button('secondary', 'fa fa-clipboard', Messages.admin_invitationCopy); + var copy = blocks.button('secondary', 'fa-clipboard', Messages.admin_invitationCopy); Util.onClickEnter($(copy), function () { Clipboard.copy(url, () => { UI.log(Messages.genericCopySuccess); @@ -3009,118 +3019,118 @@ define([ }); sidebar.addItem('maintenance', function(cb){ - var form = blocks.form([]); + var button = blocks.button('primary', '', Messages.admin_maintenanceButton); + var $button = $(button); + var start = blocks.input({ + type: 'date', + id: 'cp-admin-start-input', + class: 'flatpickr-input' + }); + var end = blocks.input({ + type: 'date', + id: 'cp-admin-end-input', + class: 'flatpickr-input' + }); + var labelStart = blocks.labelledInput(Messages.broadcast_start, start); + var labelEnd = blocks.labelledInput(Messages.broadcast_end, end); + let active = blocks.block([], 'cp-broadcast-active'); + let $active = $(active); + + var form = blocks.form([ + active, + labelStart, + labelEnd, + ], blocks.nav([button])); + var refresh = getApi(function (Broadcast) { - var button = blocks.button('primary', '', Messages.admin_maintenanceButton); - var $button = $(button); - var removeButton = blocks.button('danger', '', Messages.admin_maintenanceCancel ); - var active; + $active.empty(); + var removeButton = blocks.button('danger', '', Messages.admin_maintenanceCancel); if (Broadcast && Broadcast.maintenance) { var m = Broadcast.maintenance; if (m.start && m.end && m.end >= (+new Date())) { - active = h('div.cp-broadcast-active', [ - UI.setHTML(h('p'), Messages._getKey('broadcast_maintenance', [ + $active.append([ + UI.setHTML(h('div'), Messages._getKey('broadcast_maintenance', [ new Date(m.start).toLocaleString(), new Date(m.end).toLocaleString(), ])), - removeButton + blocks.nav([removeButton]) ]); } } - var start = blocks.input({ - type: 'date', - id: 'cp-admin-start-input', - class: 'flatpickr-input' - }); - var end = blocks.input({ - type: 'date', - id: 'cp-admin-end-input', - class: 'flatpickr-input' - }); - var $start = $(start); - var $end = $(end); - var is24h = UIElements.is24h(); - var dateFormat = "Y-m-d H:i"; - if (!is24h) { dateFormat = "Y-m-d h:i K"; } - - var endPickr = Flatpickr(end, { - enableTime: true, - time_24hr: is24h, - dateFormat: dateFormat, - minDate: new Date() - }); - Flatpickr(start, { - enableTime: true, - time_24hr: is24h, - minDate: new Date(), - dateFormat: dateFormat, - onChange: function () { - endPickr.set('minDate', new Date($start.val())); - } - }); - - // Extract form data - var getData = function () { - var start = +new Date($start.val()); - var end = +new Date($end.val()); - if (isNaN(start) || isNaN(end)) { - console.error('Invalid dates'); - return false; - } - return { - start: start, - end: end - }; - }; - - var send = function (data) { - $button.prop('disabled', 'disabled'); - sFrameChan.query('Q_ADMIN_RPC', { - cmd: 'ADMIN_DECREE', - data: ['SET_MAINTENANCE', [data]] - }, function (e, response) { - if (e || response.error) { - UI.warn(Messages.error); - console.error(e, response); - $button.prop('disabled', ''); - return; - } - // Maintenance applied, send notification - common.mailbox.sendTo('BROADCAST_MAINTENANCE', {}, {}, function () { - checkLastBroadcastHash(function () { - setTimeout(refresh, 300); - }); - }); - }); - - }; - Util.onClickEnter($(button), function () { - var data = getData(); - if (data === false) { return void UI.warn(Messages.error); } - send(data); - }); UI.confirmButton(removeButton, { classes: 'btn-danger', }, function () { send(""); }); - $(form).empty().append([ - active, - h('label', Messages.broadcast_start), - start, - h('label', Messages.broadcast_end), - end, - h('br'), - h('div.cp-broadcast-form-submit', [ - button - ]) - ]); - }); refresh(); + var $start = $(start); + var $end = $(end); + var is24h = UIElements.is24h(); + var dateFormat = "Y-m-d H:i"; + if (!is24h) { dateFormat = "Y-m-d h:i K"; } + + var endPickr = Flatpickr(end, { + enableTime: true, + time_24hr: is24h, + dateFormat: dateFormat, + minDate: new Date() + }); + Flatpickr(start, { + enableTime: true, + time_24hr: is24h, + minDate: new Date(), + dateFormat: dateFormat, + onChange: function () { + endPickr.set('minDate', new Date($start.val())); + } + }); + + // Extract form data + var getData = function () { + var start = +new Date($start.val()); + var end = +new Date($end.val()); + if (isNaN(start) || isNaN(end)) { + console.error('Invalid dates'); + return false; + } + return { + start: start, + end: end + }; + }; + + var send = function (data) { + disable($button); + sFrameChan.query('Q_ADMIN_RPC', { + cmd: 'ADMIN_DECREE', + data: ['SET_MAINTENANCE', [data]] + }, function (e, response) { + enable($button); + if (e || response.error) { + UI.warn(Messages.error); + console.error(e, response); + $button.prop('disabled', ''); + return; + } + // Maintenance applied, send notification + common.mailbox.sendTo('BROADCAST_MAINTENANCE', {}, {}, function () { + checkLastBroadcastHash(function () { + setTimeout(refresh, 300); + }); + }); + }); + + }; + Util.onClickEnter($(button), function () { + var data = getData(); + if (data === false) { return void UI.warn(Messages.error); } + send(data); + }); + common.makeUniversal('broadcast', { onEvent: function (obj) { var cmd = obj.ev; @@ -3137,7 +3147,7 @@ define([ var button = blocks.button('primary', '', Messages.admin_surveyButton); var $button = $(button); let nav = blocks.nav([button]); - let active = blocks.block([], ''); + let active = blocks.block([], 'cp-sidebar-flex-block'); let $active = $(active); var input = blocks.input({ @@ -3163,7 +3173,7 @@ define([ e.preventDefault(); common.openUnsafeURL(Broadcast.surveyURL); }); - $active.append(blocks.block([a, removeButton])); + $active.append([a, removeButton]); } }); refresh(); @@ -3258,7 +3268,7 @@ define([ var rowContent = [ 'ID: ' + uid, formattedTime, - el, + $(el).find('.cp-notification-content').text(), removeButton ]; var table = blocks.table([], [rowContent]); @@ -3433,18 +3443,16 @@ define([ // Make the form $form.empty().append([ active, - h('label', Messages.broadcast_translations), + h('div', Messages.broadcast_translations), h('div.cp-broadcast-languages', boxes), container, h('div.cp-broadcast-form-submit', [ - h('br'), button ]) ]); - }); - refresh(); - cb(form); + refresh(); + cb(form); }); diff --git a/www/common/LessLoader.js b/www/common/LessLoader.js index 8fac17fc1..b3f09f861 100644 --- a/www/common/LessLoader.js +++ b/www/common/LessLoader.js @@ -104,7 +104,6 @@ define([ var COLORTHEME = '/customize/src/less2/include/colortheme.less'; var COLORTHEME_DARK = '/customize/src/less2/include/colortheme-dark.less'; - //COLORTHEME_DARK = '/customize/src/less2/include/colortheme.less'; // TODO var getColortheme = function () { return window.CryptPad_theme; }; @@ -112,6 +111,9 @@ define([ if (window.CryptPad_theme === 'dark') { return COLORTHEME_DARK; } return COLORTHEME; }; + var isForcedColortheme = url => { + return url === COLORTHEME+'?force' || url === COLORTHEME_DARK+'?force'; + }; var lessEngine; var tempCache = { key: Math.random() }; @@ -135,6 +137,8 @@ define([ col = true; url = getColorthemeURL(); //console.warn(url); + } else if (isForcedColortheme(url)) { + col = true; } url = fixURL(url); var cached = tempCache[_url]; diff --git a/www/common/inner/sidebar-layout.js b/www/common/inner/sidebar-layout.js index 7027db07a..586ea4f9b 100644 --- a/www/common/inner/sidebar-layout.js +++ b/www/common/inner/sidebar-layout.js @@ -45,8 +45,14 @@ define([ }; blocks.icon = (icon) => { - let prefix = icon.slice(0, icon.indexOf('-')); - let cls = `.${prefix}.${icon}`; + let s = icon.split(' '); + let cls; + if (s.length > 1) { + cls = '.' + s.join('.'); + } else { + let prefix = icon.slice(0, icon.indexOf('-')); + cls = `.${prefix}.${icon}`; + } return h(`i${cls}`); }; blocks.button = (type, icon, text) => { @@ -140,7 +146,7 @@ define([ }; blocks.table = function (header, entries) { - const table = h('table.cp-sidebar-list'); + const table = h('table.cp-sidebar-table'); if (header) { const headerValues = header.map(value => { const lastWord = value.split(' ').pop(); // Extracting the last word