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

Merge branch 'appconfig_ui' of github.com:cryptpad/cryptpad into appconfig_ui

Browse Source
This commit is contained in:
David Benque 2024-06-19 15:39:04 +01:00
commit 8d18f680ea
10 changed files with 169 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
customize.dist/src/less2/include/admin.less Normal file
View File

@ -0,0 +1,36 @@
/*
* SPDX-FileCopyrightText: 2023 XWiki CryptPad Team <contact@cryptpad.org> and contributors
*
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
@import (reference) "./colortheme-all.less";
@import (reference) "./forms.less";
.admin_main() {
--LessLoader_require: LessLoader_currentFile();
}
& {
@palette-colors: @cp_kanban-colors;
div.cp-palette-container {
.cp-palette-nocolor {
display: none;
}
.instance-colors(@palette-colors; @index) when (@index > 0){
// loop through the @colors
.instance-colors(@palette-colors; (@index - 1));
@color: extract(@palette-colors, @index);
// make a numbered class selector for each color
.cp-palette-color@{index}{
background-color: @color !important;
color: contrast(@color, @cryptpad_color_grey_800, @cryptpad_color_grey_200) !important;
}
}
.instance-colors(@palette-colors; length(@palette-colors));
}
}

21
customize.dist/src/less2/include/forms.less
View File

@ -119,6 +119,27 @@
}
}
// The following palette container is just for the UI components
// The specific colors you want to show have to be defined in your app
// using the classes .cp-palette-nocolor .cp-palette-color1 .cp-palette-color2 etc.
div.cp-palette-container {
display: flex;
justify-content: space-between;
.cp-palette-color {
display: inline-block;
border-radius: 50%;
height: 30px;
width: 30px;
text-align: center;
line-height: 30px;
color: @cp_kanban-fg;
border: 1px solid fade(@cp_kanban-fg, 40%);
&.fa-check { // tick on selected color
color: @cryptpad_text_col;
}
}
}
button.btn {
background-color: @cp_buttons-cancel;
box-sizing: border-box;

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

@ -9,6 +9,7 @@
@import (reference) "../../customize/src/less2/include/creation.less";
@import (reference) '../../customize/src/less2/include/framework.less';
@import (reference) '../../customize/src/less2/include/export.less';
@import (reference) '../../customize/src/less2/include/admin.less';
.cp-admin-customize-apps-grid {
padding: 10px;
@ -69,6 +70,7 @@
.sidebar-layout_main();
.limit-bar_main();
.creation_main();
.admin_main();
display: flex;
flex-flow: column;
@ -86,6 +88,16 @@
border-radius: 5px;
background-color: @cryptpad_color_brand;
}
input.cp-admin-color-picker {
vertical-align: middle;
}
.cp-palette-container {
display: inline-flex;
width: ~"calc(100% - 5rem)";
padding-left: 0.5rem;
vertical-align: middle;
}
.cp-admin-color-preview {
& > div {
margin-top: @sidebar_base-margin;

49
www/admin/inner.js
View File

@ -971,7 +971,7 @@ define([
setColor(color, done);
});
let $input = $(input).on('change', () => {
let onColorPicked = () => {
require(['/lib/less.min.js'], (Less) => {
let color = $input.val();
let lColor = Less.color(color.slice(1));
@ -991,7 +991,8 @@ define([
$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`);
});
});
};
let $input = $(input).on('change', onColorPicked).addClass('cp-admin-color-picker');
UI.confirmButton($remove, {
classes: 'btn-danger',
@ -1001,44 +1002,22 @@ define([
setColor('', () => {});
});
var colors;
var content = h('div.cp-onboardscreen-colorpick', [
h('label', {for:'cp-kanban-edit-color'}, Messages.kanban_color),
colors = h('div#cp-kanban-edit-colors'),
]);
var $colors = $(colors);
var palette = [''];
for (var i=1; i<=8; i++) { palette.push('color'+i); }
var selectedColor = '';
palette.forEach(function (color) {
var $color = $(h('div.cp-kanban-palette.cp-kanban-palette-card.fa'), );
$color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
$color.click(function () {
if (color === selectedColor) { return; }
selectedColor = $color.css('background-color');
$colors.find('.cp-kanban-palette').removeClass('fa-check');
var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
$col.addClass('fa-check');
sframeCommand('CHANGE_COLOR', {selectedColor}, (err, response) => {
if (err) {
UI.warn(Messages.error);
console.error(err, response);
// done(false);
return;
}
done(true);
UI.log(Messages.saved);
});
}).appendTo($colors);
var colors = UIElements.makePalette(8, (color, $color) => {
// onselect
let rgb = $color.css('background-color');
let hex = Util.rgbToHex(rgb);
$input.val(hex);
onColorPicked();
});
var $colors = $(colors);
$(label).append(colors);
let form = blocks.form([
labelCurrent,
label
label,
], blocks.nav([btn, remove, btn.spinner]));
cb([form, labelPreview, content]);
cb([form, labelPreview]);
});
// Msg.admin_registrationHint, .admin_registrationTitle

37
www/common/common-ui-elements.js
View File

@ -4285,5 +4285,42 @@ define([
return UI.errorLoadingScreen(msg, false, false);
};
UIElements.makePalette = (maxColors, onSelect) => {
let palette = [''];
for (var i=1; i<=maxColors; i++) { palette.push('color'+i); }
let offline = false;
let selectedColor = '';
let container = h('div.cp-palette-container');
let $container = $(container);
palette.forEach(function (color) {
var $color = $(h('span.cp-palette-color.fa'));
$color.addClass('cp-palette-'+(color || 'nocolor'));
$color.click(function () {
if (offline) { return; }
if (color === selectedColor) { return; }
selectedColor = color;
$container.find('.cp-palette-color').removeClass('fa-check');
$color.addClass('fa-check');
onSelect(color, $color);
}).appendTo($container);
});
container.disable = state => {
offline = !!state;
};
container.getValue = () => {
return selectedColor;
};
container.setValue = color => {
$container.find('.cp-palette-color').removeClass('fa-check');
let $color = $container.find('.cp-palette-'+(color || 'nocolor'));
$color.addClass('fa-check');
selectedColor = color;
};
return container;
};
return UIElements;
});

3
www/common/common-util.js
View File

@ -606,6 +606,9 @@
parseInt(h.slice(4,6), 16),
];
};
Util.rgbToHex = function (rgb) {
return `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(n => parseInt(n, 10).toString(16).padStart(2, '0')).join('')}`;
};
Util.isSmallScreen = function () {
return window.innerHeight < 800 || window.innerWidth < 800;

8
www/install/onboarding.less
View File

@ -3,6 +3,14 @@
@import (reference) "../../customize/src/less2/include/tools.less";
@import (reference) "../../customize/src/less2/include/markdown.less";
@import (reference) "../../customize/src/less2/include/avatar.less";
@import (reference) '../../customize/src/less2/include/admin.less';
&.cp-page-install {
.admin_main();
div.cp-palette-container {
max-width: 400px;
}
}
@cp_palette:
#FFD4D4,

56
www/install/onboardscreen.js
View File

@ -5,9 +5,8 @@ define([
'/common/hyperscript.js',
'/common/common-interface.js',
'/common/common-util.js',
'/api/instance',
'/common/common-ui-elements.js',
'/common/hyperscript.js',
'css!/components/bootstrap/dist/css/bootstrap.min.css',
'css!/components/components-font-awesome/css/font-awesome.min.css',
@ -18,6 +17,7 @@ define([
h,
UI,
Util,
UIElements
) {
//XXX
@ -162,47 +162,33 @@ define([
var colorBlock = function () {
var colors;
let selectorColor = '';
var colors = UIElements.makePalette(8, (color, $color) => {
let rgb = $color.css('background-color');
let hex = Util.rgbToHex(rgb);
selectorColor = hex;
// XXX Save only at the end
sendAdminRpc('CHANGE_COLOR', {selectedColor}, function (e, response) {
if (e || response.error) {
UI.warn(Messages.error);
console.error(e, response);
return;
}
UI.log(Messages.saved);
});
});
var $colors = $(colors).attr('id', 'cp-install-color');
var content = h('div.cp-onboardscreen-colorpick', [
h('label', {for:'cp-kanban-edit-color'}, Messages.kanban_color),
colors = h('div#cp-kanban-edit-colors'),
h('label', {for:'cp-install-color'}, Messages.kanban_color),
colors
]);
var $colors = $(colors);
var palette = [''];
for (var i=1; i<=8; i++) { palette.push('color'+i); }
var selectedColor = '';
palette.forEach(function (color) {
var $color = $(h('div.cp-kanban-palette.cp-kanban-palette-card.fa'), );
$color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
$color.click(function () {
if (color === selectedColor) { return; }
selectedColor = $color.css('background-color');
$colors.find('.cp-kanban-palette').removeClass('fa-check');
var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
$col.addClass('fa-check');
sendAdminRpc('CHANGE_COLOR', {selectedColor}, function (e, response) {
if (e || response.error) {
UI.warn(Messages.error);
console.error(e, response);
// done(false);
return;
}
// flushCache();
// done(true);
// redraw();
// spinner.done();
UI.log(Messages.saved);
});
}).appendTo($colors);
});
return content;
};
var button = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
// XXX Save only at the end
sendAdminDecree('SET_INSTANCE_NAME', [$(titleInput).val().trim()], function (e, response) {
if (e || response.error) {
UI.warn(Messages.error);

27
www/kanban/app-kanban.less
View File

@ -63,11 +63,13 @@
.kanban-colors(@kanban-colors; (@index - 1));
@color: extract(@kanban-colors, @index);
// make a numbered class selector for each color
.cp-kanban-palette-color@{index}{
background-color: @color !important;
.cp-palette-color@{index}{
&.cp-kanban-palette-board {
background-color: @color !important;
}
}
.cp-kanban-palette-color@{index}{
background-color: @color !important;
&.kanban-board-inner {
background-color: fade(@color, 50%) !important;
}
@ -81,10 +83,12 @@
// .cp-kanban-card-color@{index}{
// background-color: @color !important;
// }
.cp-kanban-palette-color@{index}{
.cp-palette-color@{index}{
&.cp-kanban-palette-card {
background-color: @color !important;
}
}
.cp-kanban-palette-color@{index}{
&.kanban-item {
background-color: @color !important;
}
@ -140,23 +144,6 @@
}
margin-bottom: 15px;
}
#cp-kanban-edit-colors {
display: flex;
justify-content: space-between;
.cp-kanban-palette {
display: inline-block;
border-radius: 50%;
height: 30px;
width: 30px;
text-align: center;
line-height: 30px;
color: @cp_kanban-fg;
border: 1px solid fade(@cp_kanban-fg, 40%);
&.fa-check { // tick on selected color
color: @cryptpad_text_col;
}
}
}
#cp-kanban-edit-tags {
.tokenfield {
margin: 0;

34
www/kanban/inner.js
View File

@ -185,6 +185,11 @@ define([
update();
};
var colors = UIElements.makePalette(8, color => {
dataObject.color = color;
commit();
});
var conflicts, conflictContainer, titleInput, tagsDiv, colors, text;
var content = h('div', [
conflictContainer = h('div#cp-kanban-edit-conflicts', [
@ -200,7 +205,7 @@ define([
h('label', {for:'cp-kanban-edit-tags'}, Messages.fm_tagsName),
tagsDiv = h('div#cp-kanban-edit-tags'),
h('label', {for:'cp-kanban-edit-color'}, Messages.kanban_color),
colors = h('div#cp-kanban-edit-colors'),
colors,
]);
var $tags = $(tagsDiv);
@ -362,11 +367,9 @@ define([
// Colors
var $colors = $(colors);
var palette = [''];
for (var i=1; i<=8; i++) { palette.push('color'+i); }
var selectedColor = '';
var resetThemeClass = function () {
$colors.find('.cp-kanban-palette').each(function (i, el) {
$colors.find('.cp-palette-color').each(function (i, el) {
var $c = $(el);
$c.removeClass('cp-kanban-palette-card');
$c.removeClass('cp-kanban-palette-board');
@ -377,31 +380,13 @@ define([
}
});
};
palette.forEach(function (color) {
var $color = $(h('span.cp-kanban-palette.fa'));
$color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
$color.click(function () {
if (offline) { return; }
if (color === selectedColor) { return; }
selectedColor = color;
$colors.find('.cp-kanban-palette').removeClass('fa-check');
var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
$col.addClass('fa-check');
dataObject.color = color;
commit();
}).appendTo($colors);
});
var color = {
getValue: function () {
return selectedColor;
return colors.getValue();
},
setValue: function (color) {
resetThemeClass();
$colors.find('.cp-kanban-palette').removeClass('fa-check');
var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
$col.addClass('fa-check');
selectedColor = color;
colors.setValue(color);
}
};
@ -453,6 +438,7 @@ define([
$modal.find('nav button.danger').prop('disabled', unlocked ? '' : 'disabled');
offline = !unlocked;
palette.disable(offline);
});