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

New checkboxes and radio input everywhere

Browse Source
This commit is contained in:
yflory
2018-04-17 15:50:24 +02:00
parent 68c26f3164
commit 842952fe1f
10 changed files with 160 additions and 148 deletions
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 {