infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Fix colors in forms

pull/1/head
yflory 2021-09-07 17:36:51 +02:00
parent 527bcda1b0
commit 704c50fae3
4 changed files with 102 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
customize.dist/src/less2/include/colortheme-dark.less
View File

@ -77,6 +77,15 @@
#C9FFFE,
#C8D6FF,
#E4CAFF;
@cp_palette-dark:
darken(desaturate(extract(@cp_palette, 1),60%), 60%),
darken(desaturate(extract(@cp_palette, 2),60%), 60%),
darken(desaturate(extract(@cp_palette, 3),55%), 60%),
darken(desaturate(extract(@cp_palette, 4),55%), 70%),
darken(desaturate(extract(@cp_palette, 5),60%), 65%),
darken(desaturate(extract(@cp_palette, 6),60%), 70%),
darken(desaturate(extract(@cp_palette, 7),60%), 60%),
darken(desaturate(extract(@cp_palette, 8),70%), 60%);
@cryptpad_color_link:@cryptpad_color_brand_300;
@ -363,15 +372,7 @@
@cp_kanban-add-hover: fade(@cryptpad_color_black, 10%);
@cp_kanban-trash-bg: @cryptpad_color_warn_red;
@cp_kanban-color0: @cryptpad_color_grey_600;
@cp_kanban-colors:
darken(desaturate(extract(@cp_palette, 1),60%), 60%),
darken(desaturate(extract(@cp_palette, 2),60%), 60%),
darken(desaturate(extract(@cp_palette, 3),55%), 60%),
darken(desaturate(extract(@cp_palette, 4),55%), 70%),
darken(desaturate(extract(@cp_palette, 5),60%), 65%),
darken(desaturate(extract(@cp_palette, 6),60%), 70%),
darken(desaturate(extract(@cp_palette, 7),60%), 60%),
darken(desaturate(extract(@cp_palette, 8),70%), 60%);
@cp_kanban-colors: @cp_palette-dark;
// Notifications
@cp_notif-hover: fade(@cryptpad_color_black, 10%);
@ -448,3 +449,5 @@
@cp_form-poll-maybe: @cryptpad_color_grey_700;
@cp_form-poll-yes-color: @cryptpad_color_green;
@cp_form-invalid: @cryptpad_color_light_red;
@cp_form-palette: @cp_palette-dark;
@cp_form-palette2: @cp_palette;

11
customize.dist/src/less2/include/colortheme.less
View File

@ -76,6 +76,15 @@
#C9FFFE,
#C8D6FF,
#E4CAFF;
@cp_palette-dark:
darken(extract(@cp_palette, 1), 50%),
darken(extract(@cp_palette, 2), 51%),
darken(extract(@cp_palette, 3), 52%),
darken(extract(@cp_palette, 4), 61%),
darken(extract(@cp_palette, 5), 57%),
darken(extract(@cp_palette, 6), 65%),
darken(extract(@cp_palette, 7), 50%),
darken(extract(@cp_palette, 8), 50%);
@cryptpad_color_link: @cryptpad_color_brand;
@ -439,3 +448,5 @@
@cp_form-poll-maybe: @cryptpad_color_grey_300;
@cp_form-poll-yes-color: @cryptpad_color_green;
@cp_form-invalid: @cryptpad_color_red;
@cp_form-palette: @cp_palette;
@cp_form-palette2: @cp_palette-dark;

87
www/form/app-form.less
View File

@ -18,13 +18,18 @@
color: @cryptpad_text_col;
background-color: @cp_app-bg;
.alert {
font-size: 1rem;
&.alert-info {
color: @cryptpad_text_col !important;
}
}
@palette0: @cp_kanban-color0; // Default bg color for header
@kanban-colors: @cp_kanban-colors;
.kanban-colors(@kanban-colors; @index) when (@index > 0){
// loop through the @colors
.kanban-colors(@kanban-colors; (@index - 1));
@color: extract(@kanban-colors, @index);
// make a numbered class selector for each color
@form-colors: @cp_form-palette;
.form-colors(@form-colors; @index) when (@index > 0){
.form-colors(@form-colors; (@index - 1));
@color: extract(@form-colors, @index);
.cp-form-palette-color@{index}{
&.cp-form-palette {
background-color: @color !important;
@ -36,8 +41,38 @@
}
}
}
// call the loop
.kanban-colors(@kanban-colors; length(@kanban-colors));
.form-colors(@form-colors; length(@form-colors));
@form-colors2: @cp_form-palette2;
.checkmark-colors(@form-colors2; @index) when (@index > 0){
.checkmark-colors(@form-colors2; (@index - 1));
@color: extract(@form-colors2, @index);
&.cp-form-palette-color@{index}{
.cp-form-block {
.cp-radio input:checked ~ .cp-radio-mark, .cp-checkmark input:checked ~ .cp-checkmark-mark {
background-color: @color !important;
border-color: @color !important;
}
input, textarea {
border-color: @color !important;
}
}
.cp-form-block-question-text {
color: @color !important;
}
.cp-form-type-sort:hover {
color: @color !important;
.cp-form-sort-order {
border-color: @color !important;
}
}
.cp-form-input-block {
input { color: @color !important; }
border-bottom-color: @color !important;
}
}
}
.checkmark-colors(@form-colors2; length(@form-colors2));
.cp-form-palette {
&.cp-form-palette-nocolor {
@ -196,20 +231,32 @@
}
.cp-form-color-container {
display: flex;
justify-content: space-between;
.cp-form-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%);
cursor: pointer;
& > div {
display: flex;
justify-content: space-between;
margin-top: 5px;
&:last-child {
justify-content: space-evenly;
}
.cp-form-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%);
cursor: pointer;
}
}
}
.cp-form-response-msg-container button {
white-space: initial;
line-height: 25px;
padding: 5.5px 6px;
}
}
div.cp-form-filler-container {
width: 300px;

16
www/form/inner.js
View File

@ -4230,19 +4230,27 @@ define([
refreshEndDate();
Messages.form_colors = "Color theme"; // XXX
var colorContainer = h('div.cp-form-color-container');
var colorLine1 = h('div');
var colorLine2 = h('div');
var colorContainer = h('div.cp-form-color-container', [
colorLine1,
colorLine2
]);
var colorTheme = h('div.cp-form-color-theme-container', [
h('span', Messages.form_colors),
colorContainer
]);
var $colors = $(colorContainer);
var refreshColorTheme = function () {
$colors.empty();
$(colorLine1).empty();
$(colorLine2).empty();
var palette = ['nocolor'];
for (var i=1; i<=8; i++) { palette.push('color'+i); }
var color = content.answers.color || 'nocolor';
var selectedColor = color;
palette.forEach(function (_color) {
var currentContainer = colorLine1;
palette.forEach(function (_color, i) {
if (i === 5) { currentContainer = colorLine2; }
var $color = $(h('span.cp-form-palette.fa'));
$color.addClass('cp-form-palette-'+(_color || 'nocolor'));
if (selectedColor === _color) { $color.addClass('fa-check'); }
@ -4264,7 +4272,7 @@ define([
});
$body.addClass('cp-form-palette-'+_color);
});
}).appendTo($colors);
}).appendTo(currentContainer);
});
};
refreshColorTheme();