tildeverse
/
cryptpad
4
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add colortheme settings in forms

This commit is contained in:
yflory 2021-08-31 15:49:25 +02:00
parent 96132d78f9
commit 415552b042
2 changed files with 87 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,6 +16,31 @@
color: @cryptpad_text_col;
background-color: @cp_app-bg;
@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
.cp-form-palette-color@{index}{
&.cp-form-palette {
background-color: @color !important;
}
.cp-form-block { // XXX
background-color: fade(@color, 50%) !important;
}
}
}
// call the loop
.kanban-colors(@kanban-colors; length(@kanban-colors));
.cp-form-palette-nocolor {
&.cp-form-palette {
background-color: @palette0 !important;
}
}
div.alert.cp-burn-after-reading {
margin: 10px !important;
}
@ -136,6 +161,22 @@
margin-bottom: 20px;
}
}
.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.cp-form-filler-container {
width: 300px;

48
www/form/inner.js
View File

@ -2501,6 +2501,10 @@ define([
APP.formBlocks = [];
$container.attr('class', 'cp-form-creator-content');
var color = content.answers.color || 'nocolor';
$container.addClass('cp-form-palette-'+color);
if (APP.isClosed && content.answers.privateKey && !APP.isEditor) {
var sframeChan = framework._.sfCommon.getSframeChannel();
sframeChan.query("Q_FORM_FETCH_ANSWERS", content.answers, function (err, obj) {
@ -2884,6 +2888,7 @@ define([
}
}
var editableCls = editable ? ".editable" : "";
var colorCls = '.cp-form-palette-'+color;
elements.push(h('div.cp-form-block'+editableCls, {
'data-id':uid
}, [
@ -3349,7 +3354,9 @@ define([
var d = picker.parseDate(datePicker.value);
content.answers.endDate = +d;
framework.localChange();
refreshEndDate();
framework._.cpNfInner.chainpad.onSettle(function () {
refreshEndDate();
});
});
var confirmContent = h('div', [
h('div', Messages.form_setEnd),
@ -3366,12 +3373,48 @@ define([
};
refreshEndDate();
Messages.form_colors = "Color theme"; // XXX
var colorContainer = h('div.cp-form-color-container');
var colorTheme = h('div.cp-form-color-theme-container', [
h('span', Messages.form_colors),
colorContainer
]);
var $colors = $(colorContainer);
var refreshColorTheme = function () {
$colors.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 $color = $(h('span.cp-form-palette.fa'));
$color.addClass('cp-form-palette-'+(_color || 'nocolor'));
if (selectedColor === _color) { $color.addClass('fa-check'); }
$color.click(function () {
if (_color === selectedColor) { return; }
content.answers.color = _color;
framework.localChange();
framework._.cpNfInner.chainpad.onSettle(function () {
UI.log(Messages.saved);
selectedColor = _color;
$colors.find('.cp-form-palette').removeClass('fa-check');
$color.addClass('fa-check');
var $container = $('div.cp-form-creator-content');
$container.attr('class', 'cp-form-creator-content');
$container.addClass('cp-form-palette-'+_color);
});
}).appendTo($colors);
});
};
refreshColorTheme();
evOnChange.reg(refreshPublic);
evOnChange.reg(refreshPrivacy);
evOnChange.reg(refreshAnon);
evOnChange.reg(refreshEditable);
evOnChange.reg(refreshEndDate);
evOnChange.reg(refreshColorTheme);
//evOnChange.reg(refreshResponse);
return [
@ -3381,7 +3424,8 @@ define([
privacyContainer,
editableContainer,
resultsType,
responseMsg
responseMsg,
colorTheme
];
};