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 // Make Elastic checkboxes pretty
if (window.UI && UI.pretty_checkbox) { if (window.UI && UI.pretty_checkbox) {
$(rcmail.gui_objects.calendarslist).find('input[type=checkbox]').each(function() { $(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) { 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() { rcmail.addEventListener('init', function() {
// Make checkboxes pretty // Make checkboxes pretty
rcmail.treelist.addEventListener('add-item', function(prop) { 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 // Make Elastic checkboxes pretty
if (window.UI && UI.pretty_checkbox) { if (window.UI && UI.pretty_checkbox) {
notebookslist.addEventListener('add-item', function(prop) { 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 // fixes additional checkbox in Elastic's .datetime widget
.datetime { .datetime {
label { .custom-switch {
margin-left: 1em; padding-left: .5rem;
margin-top: .4rem;
label { label {
line-height: 1; line-height: 2;
margin-top: .2rem;
&:before {
margin-right: .25rem;
}
} }
} }
@ -863,10 +859,6 @@ body.task-calendar {
width: 10em !important; width: 10em !important;
} }
input[type=checkbox] {
width: auto !important;
}
@media screen and (max-width: 420px) { @media screen and (max-width: 420px) {
input { input {
width: 8em !important; width: 8em !important;
@ -920,16 +912,6 @@ body.task-calendar {
order: 100; order: 100;
margin-left: 0; margin-left: 0;
} }
label {
vertical-align: middle;
}
input.icon-checkbox + label:before {
margin-right:.25rem;
display: inline;
float: none;
}
} }
.schedule-nav { .schedule-nav {

View file

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

View file

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

View file

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

View file

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