banananetwork
/
roundcubemail
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Elastic: Replace .icon-checkbox with Bootstrap's custom switch

Browse Source
pull/6632/head
Aleksander Machniak 6 years ago
parent 26bce22bff
commit 88c5507f29
8 changed files with 144 additions and 177 deletions
Show Stats Download Patch File Download Diff File

2
plugins/acl/skins/elastic/templates/table.html
Unescape Escape View File

@ -19,7 +19,7 @@
<roundcube:button command="acl-edit" label="edit" type="link-menuitem" class="edit" classAct="edit active" />
<roundcube:button command="acl-delete" label="delete" type="link-menuitem" class="delete" classAct="delete active" />
<roundcube:if condition="!in_array('acl_advanced_mode', (array)config:dont_override)" />
<li role="menuitem" class="checkbox"><label id="acl-switch"><input type="checkbox" onchange="rcmail.command('acl-mode-switch')" /><a class="active"><roundcube:label name="acl.advanced" /></a></label></li>
<roundcube:button name="acl-switch" type="link-menuitem" class="active check" id="acl-switch" onclick="rcmail.command('acl-mode-switch')" label="acl.advanced" />
<roundcube:endif />
</ul>
</div>

5
skins/elastic/styles/colors.less
Unescape Escape View File

@ -154,8 +154,9 @@
@color-checkbox: @color-main;
@color-checkbox-checked: @color-main;
@color-checkbox-focus: darken(@color-checkbox, 30%);
@color-checkbox-checked-focus: darken(@color-checkbox-checked, 30%);
@color-checkbox-checked-disabled: lighten(@color-main, 15%);
@color-checkbox-focus: @color-input-border-focus;
@color-checkbox-focus-shadow: @color-input-border-focus-shadow;
@color-form-hint: @color-black-shade-text;

9
skins/elastic/styles/widgets/common.less
Unescape Escape View File

@ -459,15 +459,6 @@ table.table {
white-space: nowrap;
overflow: hidden;
text-align: center;
input.icon-checkbox + label {
padding: 0;
&:before {
line-height: 1;
height: 1em;
}
}
}
th.checkbox-cell {

1
skins/elastic/styles/widgets/editor.less
Unescape Escape View File

@ -375,7 +375,6 @@
&:focus {
i.mce-i-checkbox {
border: 0;
color: @color-checkbox-focus;
}
}
}

208
skins/elastic/styles/widgets/forms.less
Unescape Escape View File

@ -484,11 +484,6 @@ html.ms .propform {
display: flex; // https://github.com/twbs/bootstrap/issues/22348
flex-wrap: nowrap;
// fixed checkbox vertical alignment
td:not(.col-form-label) {
padding: 0;
}
// alignment fixes needed because we do not stick precissely to Bootstrap's form structure
@media screen and (max-width: @screen-width-bs-phone) {
.col-6 {
@ -498,8 +493,7 @@ html.ms .propform {
& > *:last-child {
width: 1%;
min-width: 2.2em; // for icon-checkbox
padding-right: 15px;
min-width: 2.6rem; // for .custom-switch
}
&.with-link > *:last-child {
@ -508,13 +502,11 @@ html.ms .propform {
}
.form-check-input {
margin: 0; // fixes checkbox alignment with other inputs in a form
margin-top: .5rem;
margin-bottom: .5rem;
& + label {
display: inline;
margin: .5rem 0; // fixes checkbox alignment with other inputs in a form
}
.custom-control-label {
overflow: unset;
}
td > label {
@ -673,27 +665,15 @@ html.ms .propform {
}
}
.custom-control-label {
overflow: unset; // for .custom-switch
}
label:not(.input-group-text) {
margin: 0;
line-height: @proplist-record-height;
}
.icon-checkbox {
height: @proplist-record-height;
margin-left: -1.2em;
& + label {
height: @proplist-record-height;
margin-right: .5rem;
padding: 0 !important;
line-height: 1.25;
html.touch &:before {
line-height: 1.1;
}
}
}
select {
width: auto;
display: inline;
@ -702,16 +682,21 @@ html.ms .propform {
}
.checklist {
.form-check-input + label {
margin-right: .25rem;
line-height: 1;
& > div {
line-height: 2rem;
}
& > label {
display: inline-block !important;
.custom-control-label {
&:before,
&:after {
margin: -.15rem 0 0 0;
}
}
}
& > div + br {
display: none;
}
}
/*** Forms in popups ***/
@ -758,14 +743,6 @@ html.ms .propform {
}
}
html.touch .popupmenu.form {
li {
input.icon-checkbox + label:before {
line-height: 1.4;
}
}
}
/*** Smart list (multiple input) field ***/
@ -1184,79 +1161,6 @@ html.touch .popupmenu.form {
}
}
/*** Pretty icon checkbox ***/
input.icon-checkbox {
opacity: 0;
margin-left: -1.5em;
cursor: pointer;
.form-check > * > & {
margin-left: -1.5em !important;
}
& + label {
margin: 0;
display: inline;
font-size: 1.2rem;
cursor: pointer;
width: 1.5em;
html.touch & {
font-size: 1.5rem;
}
&:before {
&:extend(.font-icon-class);
content: @fa-var-toggle-off;
margin: 0;
color: @color-checkbox;
height: 2rem;
}
// A link after checkbox in a form, used in e.g. newmail_notifier plugin
& + a {
display: inline-block;
line-height: 2rem;
padding-left: .5rem;
white-space: nowrap;
}
.input-group & {
padding: 0 .25rem 0 0;
&:before {
line-height: 1;
height: auto;
}
}
}
&:disabled + label {
opacity: 0.4;
pointer-events: none;
}
&:checked + label:before {
content: @fa-var-toggle-on;
color: @color-checkbox-checked;
}
&:focus + label:before {
color: @color-checkbox-focus;
}
&:checked:focus + label:before {
color: @color-checkbox-checked-focus;
}
&.form-check-input + label {
font-size: 1.25rem;
padding-top: .25rem;
}
}
.input-group-combo {
select:first-of-type {
&.alone {
@ -1339,3 +1243,75 @@ input.icon-checkbox {
border-color: @color-input-border-focus !important;
}
}
.custom-switch {
.custom-control-input {
left: 0;
&:focus ~ .custom-control-label:before {
box-shadow: 0 0 0 .2rem @color-checkbox-focus-shadow;
}
&:focus:not(:checked) ~ .custom-control-label::before {
border-color: @color-checkbox-focus;
}
&:checked ~ .custom-control-label::before {
border-color: @color-checkbox;
background-color: @color-checkbox;
}
&:checked:disabled ~ .custom-control-label::before {
border-color: @color-checkbox-checked-disabled;
background-color: @color-checkbox-checked-disabled;
}
}
// Make switches bigger, we use smaller font than Bootstrap's default
html.touch & {
padding-left: 3rem;
}
.custom-control-label {
&:before {
width: 2rem;
height: 1.2rem;
border-radius: .6rem;
margin: .125rem 0;
html.touch & {
left: -3rem;
top: .2rem;
width: 2.6rem;
height: 1.6rem;
border-radius: .8rem;
margin: 0;
}
}
&:after {
width: ~"calc(1.2rem - 4px)";
height: ~"calc(1.2rem - 4px)";
border-radius: .6rem;
margin: .125rem 0;
html.touch & {
left: ~"calc(-3rem + 2px)";
top: ~"calc(.2rem + 2px)";
height: ~"calc(1.6rem - 4px)";
width: ~"calc(1.6rem - 4px)";
border-radius: .8rem;
margin: 0;
}
}
}
.custom-control-input:checked ~ .custom-control-label::after {
transform: translateX(.8rem);
html.touch & {
transform: translateX(1rem);
}
}
}

21
skins/elastic/styles/widgets/lists.less
Unescape Escape View File

@ -165,14 +165,29 @@ ul.listing {
}
}
input.icon-checkbox + label,
input[type=checkbox] {
.custom-switch {
position: absolute;
padding: 0;
top: 0;
right: .5rem;
right: 0;
margin-right: .3rem;
height: @listing-line-height;
vertical-align: middle;
html.touch & {
margin-right: 0;
}
.custom-control-label {
&:before,
&:after {
margin-top: .4rem;
html.touch & {
margin-top: .8rem;
}
}
}
}
}

37
skins/elastic/styles/widgets/toolbar.less
Unescape Escape View File

@ -427,25 +427,6 @@
}
}
&.checkbox > label {
margin: 0;
width: 100%;
input.icon-checkbox {
right: auto;
& + label {
left: 0;
margin: 0 .2em 0 .35em;
font-size: 1.1rem;
}
}
a {
padding: 0 !important;
}
}
a {
opacity: .5;
@ -462,6 +443,12 @@
&:extend(.font-icon-class);
}
a.check:before {
content: "";
}
a.check.selected:before {
content: @fa-var-check;
}
a.print:before {
content: @fa-var-print;
}
@ -627,13 +614,7 @@
}
.toolbarmenu.listing li {
&.checkbox > label {
padding: 0 .5rem 0 2.5em;
}
&:hover {
&.checkbox > label,
input.icon-checkbox + label:before,
a.active {
color: @color-toolbarmenu-hover;
background-color: @color-toolbarmenu-hover-background;
@ -649,15 +630,9 @@ html.touch {
}
.toolbarmenu.listing li {
&.checkbox > label {
padding: 0 .5rem 0 2.75rem;
}
}
.toolbarmenu li {
input.icon-checkbox + label {
font-size: 1.3rem;
}
}
}

38
skins/elastic/ui.js
Unescape Escape View File

@ -27,6 +27,7 @@ function rcube_elastic_ui()
compose_extwin: rcmail.env.compose_extwin,
help_open_extwin: rcmail.env.help_open_extwin
},
checkboxes: 0,
small_screen_config: {
standard_windows: true,
message_extwin: false,
@ -971,7 +972,7 @@ function rcube_elastic_ui()
// The same for some other checkboxes
// We do this here, not in setup() because we want to cover dialogs
$('input.pretty-checkbox, .propform input[type=checkbox], .form-check > input, .popupmenu.form input[type=checkbox], .toolbarmenu input[type=checkbox]', context)
$('input.pretty-checkbox, .propform input[type=checkbox], .form-check input, .popupmenu.form input[type=checkbox], .toolbarmenu input[type=checkbox]', context)
.each(function() { pretty_checkbox(this); });
// Also when we add action-row of the form, e.g. Managesieve plugin adds them after the page is ready
@ -2142,7 +2143,7 @@ function rcube_elastic_ui()
popup = popup_orig.clone(true, true);
popup.attr('id', popup_id + '-clone')
.appendTo(document.body)
.find('li > a, li.checkbox > label').attr('onclick', '').off('click').on('click', function(e) {
.find('li > a').attr('onclick', '').off('click').on('click', function(e) {
if (!$(this).is('.disabled')) {
$(item).popover('hide');
win.$('#' + $(this).attr('id')).click();
@ -3311,27 +3312,36 @@ function rcube_elastic_ui()
};
/**
* Checkbox wrapper
* Convert checkbox input into Bootstrap's custom switch
*/
function pretty_checkbox(checkbox)
{
var checkbox = $(checkbox),
id = checkbox.attr('id');
var label, parent, id, checkbox = $(checkbox);
if (checkbox.is('.icon-checkbox')) {
if (checkbox.is('.custom-control-input')) {
return;
}
if (!id) {
if (!env.icon_checkbox) env.icon_checkbox = 0;
id = 'icochk' + (++env.icon_checkbox);
if (!(id = checkbox.attr('id'))) {
id = 'icochk' + (++env.checkboxes);
checkbox.attr('id', id);
}
checkbox.addClass('icon-checkbox form-check-input').after(
$('<label>').attr({'for': id, title: checkbox.attr('title') || ''})
.on('click', function(e) { e.stopPropagation(); })
);
if (checkbox.parent().is('label')) {
label = checkbox.parent();
checkbox = checkbox.detach();
label.before(checkbox);
}
else {
label = $('<label>');
}
label.attr({'for': id, 'class': 'custom-control-label', title: checkbox.attr('title') || ''})
.on('click', function(e) { e.stopPropagation(); });
checkbox.addClass('form-check-input custom-control-input')
.wrap('<div class="custom-control custom-switch">')
.parent().append(label);
};
/**
@ -3577,7 +3587,7 @@ function rcube_elastic_ui()
if (is_table) {
// Hide unwanted table cells
sw.parent().parent().hide();
sw.parents('tr').first().hide();
parent.prev().hide();
// Modify the textarea cell to use 100% width
parent.addClass('col-sm-12');

Write Preview
Loading…
Cancel
Save