The_Great_Archive/cryptpad
1
0
Fork 0
mirror of https://github.com/cryptpad/cryptpad.git synced 2026-09-14 11:05:41 +05:00
Code Issues Packages Projects Releases Wiki Activity

More UI fixes

Browse Source
This commit is contained in:
yflory 2024-03-21 15:59:09 +01:00
parent deb9613689
commit 5cbb7529b3
5 changed files with 195 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
customize.dist/src/less2/include/sidebar-layout.less
View File

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

43
www/admin/app-admin.less
View File

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

226
www/admin/inner.js
View File

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

6
www/common/LessLoader.js
View File

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

12
www/common/inner/sidebar-layout.js
View File

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