mirror of https://github.com/xwiki-labs/cryptpad
Custom radio inputs
This commit is contained in:
yflory
parent
7870dc05ca
commit
68c26f3164
|
|
@ -52,6 +52,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
border: 1px solid @colortheme_form-border;
|
||||
flex-shrink: 0;
|
||||
&:after {
|
||||
content: "";
|
||||
display: none;
|
||||
|
|
@ -65,4 +66,68 @@
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
.cp-radio {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
&.cp-radio-secondary {
|
||||
.cp-radio-mark {
|
||||
&:after {
|
||||
border-color: @colortheme_checkmark-col2;
|
||||
}
|
||||
}
|
||||
input {
|
||||
&:checked ~ .cp-radio-mark {
|
||||
background-color: @colortheme_checkmark-back2;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover .cp-radio-mark {
|
||||
background-color: @colortheme_checkmark-back0-active;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
&:checked ~ .cp-radio-mark {
|
||||
background-color: @colortheme_checkmark-back1;
|
||||
&:after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@radio-size: @dim1 * 3;
|
||||
.cp-radio-mark {
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
height: @radio-size;
|
||||
width: @radio-size;
|
||||
background-color: @colortheme_checkmark-back0;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid @colortheme_form-border;
|
||||
flex-shrink: 0;
|
||||
&:after {
|
||||
display: none;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
width: @dim1;
|
||||
height: @dim1;
|
||||
|
||||
//transform: rotate(45deg);
|
||||
//border: solid @colortheme_checkmark-col1;
|
||||
//border-width: 0 @width @width 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
@import (once) "./colortheme-all.less";
|
||||
@import (once) "./tools.less";
|
||||
@import (once) "./checkmark.less";
|
||||
@import (once) './icon-colors.less';
|
||||
|
||||
.creation_main(
|
||||
|
|
@ -112,6 +111,8 @@
|
|||
flex-wrap: wrap;
|
||||
font-size: 16px;
|
||||
margin: 10px 0;
|
||||
min-height: 28px;
|
||||
line-height: 28px;
|
||||
label {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -135,9 +136,11 @@
|
|||
display: block;
|
||||
overflow: hidden;
|
||||
max-height: 0px;
|
||||
max-width: 0px;
|
||||
//margin-top: 10px;
|
||||
&.active {
|
||||
transition: max-height 0.5s ease-in-out;
|
||||
max-width: unset;
|
||||
max-height: 100px;
|
||||
}
|
||||
}
|
||||
|
|
@ -147,7 +150,7 @@
|
|||
input, select {
|
||||
font-size: 14px;
|
||||
border: 1px solid @colortheme_form-border;
|
||||
height: 28px;
|
||||
height: 26px;
|
||||
background-color: @colortheme_form-bg;
|
||||
color: @colortheme_form-color;
|
||||
}
|
||||
|
|
@ -275,8 +278,6 @@
|
|||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.checkmark_main(20px);
|
||||
}
|
||||
|
||||
@media screen and (max-height: 700px) {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
@import (once) './tokenfield.less';
|
||||
@import (once) './creation.less';
|
||||
@import (once) './tippy.less';
|
||||
@import (once) "./checkmark.less";
|
||||
|
||||
.framework_main(@bg-color, @warn-color, @color) {
|
||||
.toolbar_main(
|
||||
|
|
@ -16,6 +17,7 @@
|
|||
.alertify_main();
|
||||
.tokenfield_main();
|
||||
.tippy_main();
|
||||
.checkmark_main(20px);
|
||||
.creation_main(
|
||||
@bg-color: @bg-color,
|
||||
@warn-color: @warn-color,
|
||||
|
|
@ -36,6 +38,7 @@
|
|||
.fileupload_main();
|
||||
.alertify_main();
|
||||
.tippy_main();
|
||||
.checkmark_main(20px);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -740,5 +740,33 @@ 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.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
|
||||
]);
|
||||
};
|
||||
|
||||
return UI;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -235,7 +235,9 @@ define([
|
|||
var link = h('div.cp-share-modal', [
|
||||
h('label', Messages.share_linkAccess),
|
||||
h('br'),
|
||||
h('input#cp-share-editable-true.cp-share-editable-value', {
|
||||
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),
|
||||
/*h('input#cp-share-editable-true.cp-share-editable-value', {
|
||||
type: 'radio',
|
||||
name: 'cp-share-editable',
|
||||
value: 1,
|
||||
|
|
@ -246,23 +248,12 @@ define([
|
|||
name: 'cp-share-editable',
|
||||
value: 0
|
||||
}),
|
||||
h('label', { 'for': 'cp-share-editable-false' }, Messages.share_linkView),
|
||||
h('br'),
|
||||
h('label', { 'for': 'cp-share-editable-false' }, Messages.share_linkView),*/
|
||||
h('br'),
|
||||
h('label', Messages.share_linkOptions),
|
||||
h('br'),
|
||||
h('input#cp-share-embed', {
|
||||
type: 'checkbox',
|
||||
name: 'cp-share-embed'
|
||||
}),
|
||||
h('label', { 'for': 'cp-share-embed' }, Messages.share_linkEmbed),
|
||||
h('br'),
|
||||
h('input#cp-share-present', {
|
||||
type: 'checkbox',
|
||||
name: 'cp-share-present'
|
||||
}),
|
||||
h('label', { 'for': 'cp-share-present' }, Messages.share_linkPresent),
|
||||
h('br'),
|
||||
UI.createCheckbox('cp-share-embed', Messages.share_linkEmbed),
|
||||
UI.createCheckbox('cp-share-present', Messages.share_linkPresent),
|
||||
h('br'),
|
||||
UI.dialog.selectable('', { id: 'cp-share-link-preview' })
|
||||
]);
|
||||
|
|
@ -1892,28 +1883,13 @@ define([
|
|||
// Owned pads
|
||||
// Default is Owned pad
|
||||
var owned = h('div.cp-creation-owned', [
|
||||
h('label.cp-checkmark', [
|
||||
h('input', {
|
||||
type: 'checkbox',
|
||||
id: 'cp-creation-owned',
|
||||
checked: 'checked'
|
||||
}),
|
||||
h('span.cp-checkmark-mark'),
|
||||
Messages.creation_owned
|
||||
]),
|
||||
UI.createCheckbox('cp-creation-owned', Messages.creation_owned, true),
|
||||
createHelper('/faq.html#keywords-owned', Messages.creation_owned1)
|
||||
]);
|
||||
|
||||
// Life time
|
||||
var expire = h('div.cp-creation-expire', [
|
||||
h('label.cp-checkmark', [
|
||||
h('input', {
|
||||
type: 'checkbox',
|
||||
id: 'cp-creation-expire'
|
||||
}),
|
||||
h('span.cp-checkmark-mark'),
|
||||
Messages.creation_expire
|
||||
]),
|
||||
UI.createCheckbox('cp-creation-expire', Messages.creation_expire, false),
|
||||
h('span.cp-creation-expire-picker.cp-creation-slider', [
|
||||
h('input#cp-creation-expire-val', {
|
||||
type: "number",
|
||||
|
|
@ -1940,14 +1916,7 @@ define([
|
|||
]);
|
||||
|
||||
var settings = h('div.cp-creation-remember', [
|
||||
h('label.cp-checkmark', [
|
||||
h('input', {
|
||||
type: 'checkbox',
|
||||
id: 'cp-creation-remember'
|
||||
}),
|
||||
h('span.cp-checkmark-mark'),
|
||||
Messages.creation_saveSettings
|
||||
]),
|
||||
UI.createCheckbox('cp-creation-remember', Messages.creation_saveSettings, false),
|
||||
createHelper('/settings/#creation', Messages.creation_settings),
|
||||
h('div.cp-creation-remember-help.cp-creation-slider', [
|
||||
h('span.fa.fa-exclamation-circle.cp-creation-warning'),
|
||||
|
|
|
|||
Loading…
Reference in New Issue