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

Change browser color picker to jscolor picker for cursor color

pull/1/head
ClemDee 2019-07-25 14:13:14 +02:00
parent 0636714829
commit f3bb56925b
2 changed files with 30 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
www/settings/app-settings.less
View File

@ -111,8 +111,14 @@
vertical-align: middle;
margin-right: 5px;
}
input[type="color"] {
width: 100px;
.cp-settings-cursor-color-picker {
display: inline-block;
vertical-align: middle;
height: 25px;
width: 70px;
margin-right: 10px;
cursor: pointer;
border: 1px solid black;
}
.cp-settings-language-selector {
button.btn {

31
www/settings/inner.js
View File

@ -15,6 +15,7 @@ define([
'/settings/make-backup.js',
'/common/common-feedback.js',
'/common/jscolor.js',
'/bower_components/file-saver/FileSaver.min.js',
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
@ -1191,13 +1192,13 @@ define([
var $inputBlock = $('<div>').appendTo($div);
var $colorPicker = $("<div>", { class: "cp-settings-cursor-color-picker"});
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
var $input = $('<input>', {
type: 'color',
}).on('change', function () {
var val = $input.val();
// when jscolor picker value change
var onchange = function (colorL) {
var val = "#" + colorL.toString();
if (!/^#[0-9a-fA-F]{6}$/.test(val)) { return; }
$spinner.show();
$ok.hide();
@ -1205,15 +1206,27 @@ define([
$spinner.hide();
$ok.show();
});
}).appendTo($inputBlock);
$colorPicker.css('bakcground-color', val);
};
// jscolor picker
var jscolorL = new window.jscolor($colorPicker[0],{showOnClick: false, onFineChange: onchange, valueElement:undefined});
$colorPicker.click(function () {
jscolorL.show();
});
// set default color
common.getAttribute(['general', 'cursor', 'color'], function (e, val) {
if (e) { return void console.error(e); }
val = val || "#000";
$colorPicker.css('bakcground-color', val);
jscolorL.fromString(val);
});
$colorPicker.appendTo($inputBlock);
$ok.hide().appendTo($inputBlock);
$spinner.hide().appendTo($inputBlock);
common.getAttribute(['general', 'cursor', 'color'], function (e, val) {
if (e) { return void console.error(e); }
$input.val(val || '');
});
return $div;
};