Elastic: Use custom switch in place of pretty checkbox

This commit is contained in:
Aleksander Machniak 2019-02-20 13:40:56 +01:00
parent 80ed46693a
commit 7288bac122
8 changed files with 21 additions and 77 deletions

View file

@ -3650,10 +3650,10 @@ function rcube_calendar_ui(settings)
// Make Elastic checkboxes pretty
if (window.UI && UI.pretty_checkbox) {
$(rcmail.gui_objects.calendarslist).find('input[type=checkbox]').each(function() {
UI.pretty_checkbox($(this).addClass('flex-checkbox'));
UI.pretty_checkbox(this);
});
calendars_list.addEventListener('add-item', function(prop) {
UI.pretty_checkbox($(prop.li).find('input').addClass('flex-checkbox'));
UI.pretty_checkbox($(prop.li).find('input'));
});
}

View file

@ -11,7 +11,7 @@
rcmail.addEventListener('init', function() {
// Make checkboxes pretty
rcmail.treelist.addEventListener('add-item', function(prop) {
UI.pretty_checkbox($(prop.li).find('input').addClass('flex-checkbox'));
UI.pretty_checkbox($(prop.li).find('input'));
});
});
}

View file

@ -170,7 +170,7 @@ function rcube_kolab_notes_ui(settings)
// Make Elastic checkboxes pretty
if (window.UI && UI.pretty_checkbox) {
notebookslist.addEventListener('add-item', function(prop) {
UI.pretty_checkbox($(prop.li).find('input').addClass('flex-checkbox'));
UI.pretty_checkbox($(prop.li).find('input'));
});
}

View file

@ -846,16 +846,12 @@ body.task-calendar {
// fixes additional checkbox in Elastic's .datetime widget
.datetime {
label {
margin-left: 1em;
margin-top: .4rem;
.custom-switch {
padding-left: .5rem;
label {
line-height: 1;
&:before {
margin-right: .25rem;
}
line-height: 2;
margin-top: .2rem;
}
}
@ -863,10 +859,6 @@ body.task-calendar {
width: 10em !important;
}
input[type=checkbox] {
width: auto !important;
}
@media screen and (max-width: 420px) {
input {
width: 8em !important;
@ -920,16 +912,6 @@ body.task-calendar {
order: 100;
margin-left: 0;
}
label {
vertical-align: middle;
}
input.icon-checkbox + label:before {
margin-right:.25rem;
display: inline;
float: none;
}
}
.schedule-nav {

View file

@ -267,9 +267,8 @@
}
td.invite {
label:before {
line-height: 1.6;
height: 1.5em;
.custom-switch {
margin-top: .15rem;
}
}
@ -343,17 +342,6 @@
}
}
html.touch {
.edit-attendees-table {
td.invite {
label:before {
line-height: 1.2;
height: 1.2em;
}
}
}
}
.form-searchbar {
display: flex;
margin-bottom: .5rem;

View file

@ -217,18 +217,11 @@
}
}
input + label,
input.complete {
.custom-switch {
position: absolute;
right: .25rem;
bottom: 0;
top: auto;
padding: 0 .2em 0 0;
cursor: pointer;
top: 1.4rem;
z-index: 1;
line-height: 1;
height: 1.5em;
font-size: 1.15em;
height: 2.3em;
}
.actions {
@ -255,7 +248,7 @@ html.touch #tasklist {
span.flagged,
input[type=checkbox],
.icon-checkbox + label {
.custom-switch {
display: none;
}

View file

@ -65,6 +65,10 @@
}
}
.custom-switch {
position: relative;
}
&.folder .listname:before {
&:extend(.font-icon-class);
content: @fa-var-sticky-note;
@ -193,18 +197,6 @@
}
}
input.flex-checkbox {
position: relative !important;
margin: 0 0 0 .25em !important;
& + label {
position: relative !important;
margin: 0 .3em 0 -1em !important;
right: 0 !important;
font-size: 1.15em;
}
}
li.droptarget > div {
background-color: @color-list-droptarget-background;
}
@ -381,13 +373,6 @@ a.history {
label {
order: 10;
}
.icon-checkbox + label {
order: unset;
min-width: 2em;
padding: 0;
line-height: 1;
}
}
button.btn.save.notify:before {
@ -416,6 +401,7 @@ button.btn.print:before {
}
.prop {
line-height: 2;
margin-left: .5rem;
display: inline-block;
vertical-align: middle;
@ -423,11 +409,6 @@ button.btn.print:before {
label {
margin: 0;
}
label:before {
line-height: 1.25;
margin-right: .25rem;
}
}
@media print {

View file

@ -219,10 +219,10 @@ function rcube_tasklist_ui(settings)
// Make Elastic checkboxes pretty
if (window.UI && UI.pretty_checkbox) {
$(rcmail.gui_objects.tasklistslist).find('input[type=checkbox]').each(function() {
UI.pretty_checkbox($(this).addClass('flex-checkbox'));
UI.pretty_checkbox(this);
});
tasklists_widget.addEventListener('add-item', function(prop) {
UI.pretty_checkbox($(prop.li).find('input').addClass('flex-checkbox'));
UI.pretty_checkbox($(prop.li).find('input'));
});
}