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

New checkboxes and radio input everywhere

pull/1/head
yflory 2018-04-17 15:50:24 +02:00
parent 68c26f3164
commit 842952fe1f
10 changed files with 160 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
customize.dist/pages.js
View File

@ -639,6 +639,81 @@ define([
);
};
Pages.createCheckbox = function (id, label, checked, opts) {
opts = opts|| {};
// Input properties
var inputOpts = {
type: 'checkbox',
id: id
};
if (checked) { inputOpts.checked = 'checked'; }
$.extend(inputOpts, opts.input || {});
// Label properties
var labelOpts = {};
$.extend(labelOpts, opts.label || {});
if (labelOpts.class) { labelOpts.class += ' cp-checkmark'; }
// Mark properties
var markOpts = { tabindex: 0 };
$.extend(markOpts, opts.mark || {});
var input = h('input', inputOpts);
var mark = h('span.cp-checkmark-mark', markOpts);
$(mark).keydown(function (e) {
if (e.which === 32) {
e.stopPropagation();
e.preventDefault();
$(input).prop('checked', !$(input).is(':checked'));
}
});
return h('label.cp-checkmark', labelOpts, [
input,
mark,
label
]);
};
Pages.createRadio = function (name, id, label, checked, opts) {
opts = opts|| {};
// Input properties
var inputOpts = {
type: 'radio',
id: id,
name: name
};
if (checked) { inputOpts.checked = 'checked'; }
$.extend(inputOpts, opts.input || {});
// Label properties
var labelOpts = {};
$.extend(labelOpts, opts.label || {});
if (labelOpts.class) { labelOpts.class += ' cp-checkmark'; }
// Mark properties
var markOpts = { tabindex: 0 };
$.extend(markOpts, opts.mark || {});
var input = h('input', inputOpts);
var mark = h('span.cp-radio-mark', markOpts);
$(mark).keydown(function (e) {
if (e.which === 32) {
e.stopPropagation();
e.preventDefault();
$(input).prop('checked', !$(input).is(':checked'));
}
});
return h('label.cp-radio', labelOpts, [
input,
mark,
label
]);
};
var hiddenLoader = function () {
var loader = loadingScreen();
loader.style.display = 'none';
@ -688,27 +763,10 @@ define([
placeholder: Msg.login_confirm,
}),
h('div.checkbox-container', [
h('input#import-recent', {
name: 'import-recent',
type: 'checkbox',
checked: true
}),
// hscript doesn't generate for on label for some
// reason... use jquery as a temporary fallback
setHTML($('<label for="import-recent"></label>')[0], Msg.register_importRecent)
/*h('label', {
'for': 'import-recent',
}, Msg.register_importRecent),*/
Pages.createCheckbox('import-recent', Msg.register_importRecent, true)
]),
h('div.checkbox-container', [
h('input#accept-terms', {
name: 'accept-terms',
type: 'checkbox'
}),
setHTML($('<label for="accept-terms"></label>')[0], Msg.register_acceptTerms)
/*setHTML(h('label', {
'for': 'accept-terms',
}), Msg.register_acceptTerms),*/
$(Pages.createCheckbox('import-recent')).append(Msg.register_acceptTerms)[0]
]),
h('button#register.btn.cp-login-register', Msg.login_register)
])
@ -750,17 +808,7 @@ define([
placeholder: Msg.login_password,
}),
h('div.checkbox-container', [
h('input#import-recent', {
name: 'import-recent',
type: 'checkbox',
checked: true
}),
// hscript doesn't generate for on label for some
// reason... use jquery as a temporary fallback
setHTML($('<label for="import-recent"></label>')[0], Msg.register_importRecent)
/*h('label', {
'for': 'import-recent',
}, Msg.register_importRecent),*/
Pages.createCheckbox('import-recent', Msg.register_importRecent, true),
]),
h('div.extra', [
h('button.login.first.btn', Msg.login_login)

4
customize.dist/src/less2/include/alertify.less
View File

@ -280,7 +280,9 @@
}
&:focus {
border: 1px dotted @alertify-base;
//border: 1px dotted @alertify-base;
box-shadow: 0px 0px 5px @colortheme_alertify-primary;
outline: none;
}
&::-moz-focus-inner {
border: 0;

17
customize.dist/src/less2/include/checkmark.less
View File

@ -17,6 +17,10 @@
-ms-user-select: none;
user-select: none;
& > a {
margin-left: 0.25em;
}
&.cp-checkmark-secondary {
.cp-checkmark-mark {
&:after {
@ -26,6 +30,7 @@
input {
&:checked ~ .cp-checkmark-mark {
background-color: @colortheme_checkmark-back2;
border-color: @colortheme_checkmark-back2;
}
}
}
@ -37,6 +42,7 @@
display: none;
&:checked ~ .cp-checkmark-mark {
background-color: @colortheme_checkmark-back1;
border-color: @colortheme_checkmark-back1;
&:after {
display: block;
}
@ -63,6 +69,11 @@
border: solid @colortheme_checkmark-col1;
border-width: 0 @width @width 0;
}
&:focus {
//border-color: #FF007C !important;
box-shadow: 0px 0px 5px @colortheme_checkmark-back1;
outline: none;
}
}
}
@ -97,6 +108,7 @@
display: none;
&:checked ~ .cp-radio-mark {
background-color: @colortheme_checkmark-back1;
border-color: @colortheme_checkmark-back1;
&:after {
display: block;
}
@ -127,6 +139,11 @@
//border: solid @colortheme_checkmark-col1;
//border-width: 0 @width @width 0;
}
&:focus {
//border-color: #FF007C !important;
box-shadow: 0px 0px 5px @colortheme_checkmark-back1;
outline: none;
}
}
}

2
customize.dist/src/less2/pages/page-login.less
View File

@ -1,11 +1,13 @@
@import (once) "../include/infopages.less";
@import (once) "../include/colortheme-all.less";
@import (once) "../include/alertify.less";
@import (once) "../include/checkmark.less";
@import (once) "../loading.less";
.infopages_main();
.infopages_topbar();
.alertify_main();
.checkmark_main(20px);
.form-group {
.extra {

2
customize.dist/src/less2/pages/page-register.less
View File

@ -1,11 +1,13 @@
@import (once) "../include/infopages.less";
@import (once) "../include/colortheme-all.less";
@import (once) "../include/alertify.less";
@import (once) "../include/checkmark.less";
@import (once) "../loading.less";
.infopages_main();
.infopages_topbar();
.alertify_main();
.checkmark_main(20px);
.cp-container {
.form-group {

28
www/common/common-interface.js
View File

@ -740,33 +740,9 @@ define([
});
};
UI.createCheckbox = function (id, label, checked) {
var inputOpts = {
type: 'checkbox',
id: id
};
if (checked) { inputOpts.checked = 'checked'; }
console.log(inputOpts);
return h('label.cp-checkmark', [
h('input', inputOpts),
h('span.cp-checkmark-mark'),
label
]);
};
UI.createCheckbox = Pages.createCheckbox;
UI.createRadio = function (name, id, label, checked) {
var inputOpts = {
type: 'radio',
id: id,
name: name
};
if (checked) { inputOpts.checked = 'checked'; }
return h('label.cp-radio', [
h('input', inputOpts),
h('span.cp-radio-mark'),
label
]);
};
UI.createRadio = Pages.createRadio;
return UI;
});

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

@ -235,8 +235,10 @@ define([
var link = h('div.cp-share-modal', [
h('label', Messages.share_linkAccess),
h('br'),
UI.createRadio('cp-share-editable', 'cp-share-editable-true', Messages.share_linkEdit, true),
UI.createRadio('cp-share-editable', 'cp-share-editable-false', Messages.share_linkView, false),
UI.createRadio('cp-share-editable', 'cp-share-editable-true',
Messages.share_linkEdit, true, { mark: {tabindex:1} }),
UI.createRadio('cp-share-editable', 'cp-share-editable-false',
Messages.share_linkView, false, { mark: {tabindex:1} }),
/*h('input#cp-share-editable-true.cp-share-editable-value', {
type: 'radio',
name: 'cp-share-editable',
@ -252,10 +254,10 @@ define([
h('br'),
h('label', Messages.share_linkOptions),
h('br'),
UI.createCheckbox('cp-share-embed', Messages.share_linkEmbed),
UI.createCheckbox('cp-share-present', Messages.share_linkPresent),
UI.createCheckbox('cp-share-embed', Messages.share_linkEmbed, false, { mark: {tabindex:1} }),
UI.createCheckbox('cp-share-present', Messages.share_linkPresent, false, { mark: {tabindex:1} }),
h('br'),
UI.dialog.selectable('', { id: 'cp-share-link-preview' })
UI.dialog.selectable('', { id: 'cp-share-link-preview', tabindex: 1 })
]);
if (!hashes.editHash) {
$(link).find('#cp-share-editable-false').attr('checked', true);
@ -1674,14 +1676,10 @@ define([
var priv = common.getMetadataMgr().getPrivateData();
var c = (priv.settings.general && priv.settings.general.creation) || {};
if (AppConfig.displayCreationScreen && common.isLoggedIn() && c.skip) {
$advanced = $('<input>', {
type: 'checkbox',
checked: 'checked',
id: 'cp-app-toolbar-creation-advanced'
}).appendTo($advancedContainer);
$('<label>', {
for: 'cp-app-toolbar-creation-advanced'
}).text(Messages.creation_newPadModalAdvanced).appendTo($advancedContainer);
var $cboxLabel = $(UI.createCheckbox('cp-app-toolbar-creation-advanced',
Messages.creation_newPadModalAdvanced, true))
.appendTo($advancedContainer);
$advanced = $cboxLabel.find('input');
$description.append('<br>');
$description.append(Messages.creation_newPadModalDescriptionAdvanced);
}

13
www/register/main.js
View File

@ -118,15 +118,10 @@ define([
}, 500);
$register.on('keypress', function (e) {
e.preventDefault();
e.stopPropagation();
console.error(e.which);
switch (e.which) {
case 13: return clickRegister();
case 13: return clickRegister();
default:
//console.log(e.which);
if (e.which === 13) {
e.preventDefault();
e.stopPropagation();
return clickRegister();
}
});

58
www/settings/inner.js
View File

@ -233,16 +233,14 @@ define([
// Disable
$('<span>', {'class': 'cp-sidebarlayout-description'})
.text(Messages.settings_disableThumbnailsDescription).appendTo($div);
var $label = $('<label>', { 'for': 'disableThumbnails', 'class': 'noTitle' })
.text(Messages.settings_disableThumbnailsAction);
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
var $checkbox = $('<input>', {
'type': 'checkbox',
id: 'disableThumbnails'
}).on('change', function () {
var cbox = UI.createCheckbox('disableThumbnails',
Messages.settings_disableThumbnailsAction,
false, { label: {class: 'noTitle'} });
var $checkbox = $(cbox).find('input').on('change', function () {
$spinner.show();
$ok.hide();
var val = $checkbox.is(':checked') || false;
@ -252,8 +250,7 @@ define([
});
});
$checkbox.appendTo($div);
$label.appendTo($div);
$(cbox).appendTo($div);
$ok.hide().appendTo($div);
$spinner.hide().appendTo($div);
@ -283,9 +280,6 @@ define([
$('<span>', {'class': 'label'}).text(Messages.settings_userFeedbackTitle).appendTo($div);
var $label = $('<label>', { 'for': 'cp-settings-userfeedback', 'class': 'noTitle' })
.text(Messages.settings_userFeedback);
$('<span>', {'class': 'cp-sidebarlayout-description'})
.append(Messages.settings_userFeedbackHint1)
.append(Messages.settings_userFeedbackHint2).appendTo($div);
@ -293,10 +287,10 @@ define([
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
var $checkbox = $('<input>', {
'type': 'checkbox',
id: 'cp-settings-userfeedback'
}).on('change', function () {
var cbox = UI.createCheckbox('cp-settings-userfeedback',
Messages.settings_userFeedback,
false, { label: {class: 'noTitle'} });
var $checkbox = $(cbox).find('input').on('change', function () {
$spinner.show();
$ok.hide();
var val = $checkbox.is(':checked') || false;
@ -306,8 +300,7 @@ define([
});
});
$checkbox.appendTo($div);
$label.appendTo($div);
$(cbox).appendTo($div);
$ok.hide().appendTo($div);
$spinner.hide().appendTo($div);
@ -730,21 +723,19 @@ define([
var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
var $label = $('<label>', { 'for': 'cp-settings-padwidth', 'class': 'noTitle' })
.text(Messages.settings_padWidthLabel);
var $input = $('<input>', {
type: 'checkbox',
id: 'cp-settings-padwidth'
}).on('change', function () {
var cbox = UI.createCheckbox('cp-settings-padwidth',
Messages.settings_padWidthLabel,
false, { label: {class: 'noTitle'} });
var $checkbox = $(cbox).find('input').on('change', function () {
$spinner.show();
$ok.hide();
var val = $input.is(':checked');
var val = $checkbox.is(':checked');
common.setAttribute(['pad', 'width'], val, function () {
$spinner.hide();
$ok.show();
});
}).appendTo($div);
$label.appendTo($div);
});
$(cbox).appendTo($div);
$ok.hide().appendTo($div);
$spinner.hide().appendTo($div);
@ -753,7 +744,7 @@ define([
common.getAttribute(['pad', 'width'], function (e, val) {
if (e) { return void console.error(e); }
if (val) {
$input.attr('checked', 'checked');
$checkbox.attr('checked', 'checked');
}
});
return $div;
@ -805,13 +796,14 @@ define([
}).css('flex-flow', 'column')
.appendTo($div);
var $input = $('<input>', {
type: 'checkbox',
}).on('change', function () {
var val = $input.is(':checked');
var cbox = UI.createCheckbox('cp-settings-codeindent');
var $checkbox = $(cbox).find('input').on('change', function () {
var val = $checkbox.is(':checked');
if (typeof(val) !== 'boolean') { return; }
common.setAttribute(['codemirror', key], val);
}).appendTo($inputBlock);
});
$(cbox).appendTo($inputBlock);
/*proxy.on('change', ['settings', 'codemirror', key], function (o, n) {
$input[0].checked = !!n;
@ -819,7 +811,7 @@ define([
common.getAttribute(['codemirror', key], function (e, val) {
if (e) { return void console.error(e); }
$input[0].checked = !!val;
$checkbox[0].checked = !!val;
});
return $div;
};

52
www/slide/inner.js
View File

@ -153,53 +153,33 @@ define([
$('<b>').text(Messages.printOptions).appendTo($p);
$p.append($('<br>'));
// Slide number
$('<input>', {
type: 'checkbox',
id: 'cp-app-slide-options-number',
checked: slideOptionsTmp.slide
}).on('change', function () {
var cbox = UI.createCheckbox('cp-app-slide-options-number', Messages.printSlideNumber,
slideOptionsTmp.slide);
$(cbox).appendTo($p).find('input').on('change', function () {
var c = this.checked;
slideOptionsTmp.slide = c;
}).appendTo($p).css('width', 'auto');
$('<label>', {'for': 'cp-app-slide-options-number'}).text(Messages.printSlideNumber)
.appendTo($p);
$p.append($('<br>'));
}).css('width', 'auto');
// Date
$('<input>', {
type: 'checkbox',
id: 'cp-app-slide-options-date',
checked: slideOptionsTmp.date
}).on('change', function () {
var cboxDate = UI.createCheckbox('cp-app-slide-options-date', Messages.printDate,
slideOptionsTmp.date);
$(cboxDate).appendTo($p).find('input').on('change', function () {
var c = this.checked;
slideOptionsTmp.date = c;
}).appendTo($p).css('width', 'auto');
$('<label>', {'for': 'cp-app-slide-options-date'}).text(Messages.printDate)
.appendTo($p);
$p.append($('<br>'));
}).css('width', 'auto');
// Title
$('<input>', {
type: 'checkbox',
id: 'cp-app-slide-options-title',
checked: slideOptionsTmp.title
}).on('change', function () {
var cboxTitle = UI.createCheckbox('cp-app-slide-options-title', Messages.printTitle,
slideOptionsTmp.title);
$(cboxTitle).appendTo($p).find('input').on('change', function () {
var c = this.checked;
slideOptionsTmp.title = c;
}).appendTo($p).css('width', 'auto');
$('<label>', {'for': 'cp-app-slide-options-title'}).text(Messages.printTitle)
.appendTo($p);
$p.append($('<br>'));
}).css('width', 'auto');
// Transition
$('<input>', {
type: 'checkbox',
id: 'cp-app-slide-options-transition',
checked: slideOptionsTmp.transition
}).on('change', function () {
var cboxTransition = UI.createCheckbox('cp-app-slide-options-transition', Messages.printTransition,
slideOptionsTmp.transition);
$(cboxTransition).appendTo($p).find('input').on('change', function () {
var c = this.checked;
slideOptionsTmp.transition = c;
}).appendTo($p).css('width', 'auto');
$('<label>', {'for': 'cp-app-slide-options-transition'}).text(Messages.printTransition)
.appendTo($p);
$p.append($('<br>'));
}).css('width', 'auto');
$p.append($('<br>'));
// Background image
$('<label>', {'for': 'cp-app-slide-options-bg'}).text(Messages.printBackground)