web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add a settings category about the cursor

Browse Source
This commit is contained in:
yflory 2018-12-06 13:48:14 +01:00
parent c81b4d77e8
commit 081fc01694
6 changed files with 143 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
www/common/outer/async-store.js
View File

@ -427,11 +427,11 @@ define([
getColor().toString(16);
};
var getUserColor = function () {
var color = Util.find(store.proxy, ['settings', 'general', 'color']);
var color = Util.find(store.proxy, ['settings', 'general', 'cursor', 'color']);
if (!color) {
color = getRandomColor();
Store.setAttribute(null, {
attr: ['general', 'color'],
attr: ['general', 'cursor', 'color'],
value: color
}, function () {});
}

2
www/common/outer/cursor.js
View File

@ -160,7 +160,7 @@ define([
var updateCursor = function (ctx, data, client, cb) {
var c = ctx.clients[client];
if (!c) { return void cb({error: 'NO_CLIENT'}); }
data.color = Util.find(ctx.store.proxy, ['settings', 'general', 'color']);
data.color = Util.find(ctx.store.proxy, ['settings', 'general', 'cursor', 'color']);
data.name = ctx.store.proxy[Constants.displayNameKey] || Messages.anonymous;
data.avatar = Util.find(ctx.store.proxy, ['profile', 'avatar']);
console.log(data.color);

9
www/common/sframe-common-cursor.js
View File

@ -1,10 +1,15 @@
define([
], function () {
'/common/common-util.js',
], function (Util) {
var module = {};
module.create = function (Common) {
var exp = {};
var sframeChan = Common.getSframeChannel();
var metadataMgr = Common.getMetadataMgr();
var privateData = metadataMgr.getPrivateData();
var share = Util.find(privateData, ['settings', 'general', 'cursor', 'share']);
var show = Util.find(privateData, ['settings', 'general', 'cursor', 'show']);
var execCommand = function (cmd, data, cb) {
sframeChan.query('Q_CURSOR_COMMAND', {cmd: cmd, data: data}, function (err, obj) {
@ -14,6 +19,7 @@ define([
};
exp.updateCursor = function (obj) {
if (share === false) { return; }
execCommand('UPDATE', obj, function (err) {
if (err) { console.error(err); }
});
@ -24,6 +30,7 @@ define([
messageHandlers.push(handler);
};
var onMessage = function (data) {
if (show === false) { return; }
messageHandlers.forEach(function (h) {
try {
h(data);

11
www/common/translations/messages.js
View File

@ -552,6 +552,7 @@ define(function () {
// Settings
out.settings_cat_account = "Account";
out.settings_cat_drive = "CryptDrive";
out.settings_cat_cursor = "Cursor";
out.settings_cat_code = "Code";
out.settings_cat_pad = "Rich text";
out.settings_cat_creation = "New pad";
@ -675,6 +676,16 @@ define(function () {
out.settings_changePasswordPending = "Your password is being updated. Please do not close or reload this page until the process has completed.";
out.settings_changePasswordNewPasswordSameAsOld = "Your new password must be different than your current password.";
// XXX
out.settings_cursorColorTitle = "Cursor color";
out.settings_cursorColorHint = "Change the color associated to your user in collaborative documents.";
out.settings_cursorShareTitle = "Share my cursor position";
out.settings_cursorShareHint = "You can decide if you want other users to see your cursor position in collaborative documents. If shared, your cursor will be displayed in the color picked above.";
out.settings_cursorShareLabel = "Share my cursor position";
out.settings_cursorShowTitle = "Show other users' cursor position";
out.settings_cursorShowHint = "You can choose if you want to see the other users' cursor in collaborative documents.";
out.settings_cursorShowLabel = "Show the cursors";
out.upload_title = "File upload";
out.upload_type = "Type";
out.upload_modal_title = "File upload options";

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

@ -111,6 +111,9 @@
vertical-align: middle;
margin-right: 5px;
}
input[type="color"] {
width: 100px;
}
.cp-settings-language-selector {
button.btn {
width: @sidebar_button-width;

118
www/settings/inner.js
View File

@ -68,6 +68,11 @@ define([
'cp-settings-drive-import-local',
'cp-settings-drive-reset'
],
'cursor': [
'cp-settings-cursor-color',
'cp-settings-cursor-share',
'cp-settings-cursor-show',
],
'pad': [
'cp-settings-pad-width',
],
@ -1103,6 +1108,118 @@ define([
return $div;
};
// Cursor settings
create['cursor-color'] = function () {
var $div = $('<div>', {
'class': 'cp-settings-cursor-color cp-sidebarlayout-element'
});
$('<label>').text(Messages.settings_cursorColorTitle).appendTo($div);
$('<span>', {'class': 'cp-sidebarlayout-description'})
.text(Messages.settings_cursorColorHint).appendTo($div);
var $inputBlock = $('<div>').appendTo($div);
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();
if (!/^#[0-9a-fA-F]{6}$/.test(val)) { return; }
$spinner.show();
$ok.hide();
common.setAttribute(['general', 'cursor', 'color'], val, function () {
$spinner.hide();
$ok.show();
});
}).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;
};
create['cursor-share'] = function () {
var $div = $('<div>', {
'class': 'cp-settings-cursor-share cp-sidebarlayout-element'
});
$('<label>').text(Messages.settings_cursorShareTitle).appendTo($div);
$('<span>', {'class': 'cp-sidebarlayout-description'})
.text(Messages.settings_cursorShareHint).appendTo($div);
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
var $cbox = $(UI.createCheckbox('cp-settings-cursor-share',
Messages.settings_cursorShareLabel,
false, { label: {class: 'noTitle'} }));
var $checkbox = $cbox.find('input').on('change', function () {
$spinner.show();
$ok.hide();
var val = $checkbox.is(':checked');
common.setAttribute(['general', 'cursor', 'share'], val, function () {
$spinner.hide();
$ok.show();
});
});
$cbox.appendTo($div);
$ok.hide().appendTo($cbox);
$spinner.hide().appendTo($cbox);
common.getAttribute(['general', 'cursor', 'share'], function (e, val) {
if (e) { return void console.error(e); }
if (val !== false) {
$checkbox.attr('checked', 'checked');
}
});
return $div;
};
create['cursor-show'] = function () {
var $div = $('<div>', {
'class': 'cp-settings-cursor-show cp-sidebarlayout-element'
});
$('<label>').text(Messages.settings_cursorShowTitle).appendTo($div);
$('<span>', {'class': 'cp-sidebarlayout-description'})
.text(Messages.settings_cursorShowHint).appendTo($div);
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
var $cbox = $(UI.createCheckbox('cp-settings-cursor-show',
Messages.settings_cursorShowLabel,
false, { label: {class: 'noTitle'} }));
var $checkbox = $cbox.find('input').on('change', function () {
$spinner.show();
$ok.hide();
var val = $checkbox.is(':checked');
common.setAttribute(['general', 'cursor', 'show'], val, function () {
$spinner.hide();
$ok.show();
});
});
$cbox.appendTo($div);
$ok.hide().appendTo($cbox);
$spinner.hide().appendTo($cbox);
common.getAttribute(['general', 'cursor', 'show'], function (e, val) {
if (e) { return void console.error(e); }
if (val !== false) {
$checkbox.attr('checked', 'checked');
}
});
return $div;
};
// Rich text pads settings
create['pad-width'] = function () {
@ -1271,6 +1388,7 @@ define([
var $category = $('<div>', {'class': 'cp-sidebarlayout-category'}).appendTo($categories);
if (key === 'account') { $category.append($('<span>', {'class': 'fa fa-user-o'})); }
if (key === 'drive') { $category.append($('<span>', {'class': 'fa fa-hdd-o'})); }
if (key === 'cursor') { $category.append($('<span>', {'class': 'fa fa-i-cursor' })); }
if (key === 'code') { $category.append($('<span>', {'class': 'fa fa-file-code-o' })); }
if (key === 'pad') { $category.append($('<span>', {'class': 'fa fa-file-word-o' })); }
if (key === 'creation') { $category.append($('<span>', {'class': 'fa fa-plus-circle' })); }