From 417851b7b6c8d29e41d07c459db00f588650145f Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Wed, 3 Aug 2022 17:26:14 +0200 Subject: [PATCH] Fix some of the styling issues regarding Et2Switch used in calendar toolbar --- calendar/templates/default/app.css | 40 +++++++++++++---- calendar/templates/mobile/app.css | 66 ++++++++++++++++++---------- calendar/templates/pixelegg/app.css | 65 +++++++++++++++++---------- calendar/templates/pixelegg/app.less | 22 +++++----- 4 files changed, 127 insertions(+), 66 deletions(-) diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css index ce8989ca30..955b6d9071 100644 --- a/calendar/templates/default/app.css +++ b/calendar/templates/default/app.css @@ -1562,26 +1562,48 @@ img.calendar_print_button, img.calendar_print_appicon { left:44%; } /* Integration slide switches in toolbar */ -#calendar-toolbar_toolbar span[data-group="integration"] > span, -#toolbar-menulist span[id^="toolbar-integration"] , -#toolbar-menulist span[id^="toolbar-video_toggle"] { +#calendar-toolbar_toolbar et2-switch { + height: var(--height); + display: inline-flex; + width: var(--width); +} + +#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch, +#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"] , +#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"] { background-size: 16px; background-repeat: no-repeat; background-position: center; filter: grayscale(1) contrast(0.9999) opacity(0.7); + width: 24px; } -#calendar-toolbar_toolbar span[data-group="integration"] > span.switchOn, -#toolbar-menulist span[id^="toolbar-integration"].switchOn, -#toolbar-menulist span[id^="toolbar-video_toggle"].switchOn{ +#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch[checked], +#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"][checked] , +#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"][checked]{ filter: none; box-shadow: inset 1px 1px 1px 1px gray !important; + width: var(--width); } -#calendar-toolbar_toolbar span[data-group="integration"] > span span.slideSwitch_container, -#toolbar-menulist span[id^="toolbar-video_toggle"] span.slideSwitch_container, -#toolbar-menulist span[id^="toolbar-integration"] span.slideSwitch_container{ +#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch span.label, +#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"] span.label, +#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"] span.label{ background: none; min-width: 24px; } +#calendar-toolbar_toolbar et2-switch::part(control) { + visibility: hidden; +} +#calendar-toolbar_toolbar et2-switch { + height: 24px; + display: inline-block; + vertical-align: top; + border: 1px solid silver; + border-radius: 3px; +} +.ui-toolbar-menulist et2-switch, +.ui-toolbar-menulist et2-switch::part(base), +.ui-toolbar-menulist et2-switch::part(label), +.ui-toolbar-menulist et2-switch .label {width: 100%!important;} #calendar-toolbar_toolbar .et2_toolbar_more { margin-top: 0; diff --git a/calendar/templates/mobile/app.css b/calendar/templates/mobile/app.css index ec5e3a594b..ee858e1c9a 100644 --- a/calendar/templates/mobile/app.css +++ b/calendar/templates/mobile/app.css @@ -1530,26 +1530,49 @@ img.calendar_print_appicon { left: 44%; } /* Integration slide switches in toolbar */ -#calendar-toolbar_toolbar span[data-group="integration"] > span, -#toolbar-menulist span[id^="toolbar-integration"], -#toolbar-menulist span[id^="toolbar-video_toggle"] { +#calendar-toolbar_toolbar et2-switch { + height: var(--height); + display: inline-flex; + width: var(--width); +} +#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch, +#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"], +#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"] { background-size: 16px; background-repeat: no-repeat; background-position: center; filter: grayscale(1) contrast(0.9999) opacity(0.7); + width: 24px; } -#calendar-toolbar_toolbar span[data-group="integration"] > span.switchOn, -#toolbar-menulist span[id^="toolbar-integration"].switchOn, -#toolbar-menulist span[id^="toolbar-video_toggle"].switchOn { +#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch[checked], +#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"][checked], +#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"][checked] { filter: none; box-shadow: inset 1px 1px 1px 1px gray !important; + width: var(--width); } -#calendar-toolbar_toolbar span[data-group="integration"] > span span.slideSwitch_container, -#toolbar-menulist span[id^="toolbar-video_toggle"] span.slideSwitch_container, -#toolbar-menulist span[id^="toolbar-integration"] span.slideSwitch_container { +#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch span.label, +#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"] span.label, +#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"] span.label { background: none; min-width: 24px; } +#calendar-toolbar_toolbar et2-switch::part(control) { + visibility: hidden; +} +#calendar-toolbar_toolbar et2-switch { + height: 24px; + display: inline-block; + vertical-align: top; + border: 1px solid silver; + border-radius: 3px; +} +.ui-toolbar-menulist et2-switch, +.ui-toolbar-menulist et2-switch::part(base), +.ui-toolbar-menulist et2-switch::part(label), +.ui-toolbar-menulist et2-switch .label { + width: 100%!important; +} #calendar-toolbar_toolbar .et2_toolbar_more { margin-top: 0; } @@ -2812,19 +2835,13 @@ div#calendar-container div.calendar table tbody tr.rowhilite td { #calendar-view_view.hideDayColHeader tr .calendar_calGridHeader > span.et2_label { width: calc(100% - 58px); } -#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch.switchOn span.off { +#calendar-toolbar_toolbar et2-switch .label.on span.off { filter: invert(1); } -#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch.switchOn span.on { +#calendar-toolbar_toolbar et2-switch .label.on span.on { filter: none !important; } -#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch { - height: 22px; -} -#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container { - padding: 0px; -} -#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container span.on { +#calendar-toolbar_toolbar et2-switch .label span.on { background-size: 18px 18px; background-repeat: no-repeat; background-position: center; @@ -2832,24 +2849,26 @@ div#calendar-container div.calendar table tbody tr.rowhilite td { top: 0; filter: invert(1); } -#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container span.off { +#calendar-toolbar_toolbar et2-switch .label span.off { background-size: 18px 18px; background-repeat: no-repeat; background-position: center; height: 21px; top: 0; } -#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container span { +#calendar-toolbar_toolbar et2-switch .label span { color: transparent !important; } -#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container a { +#calendar-toolbar_toolbar et2-switch .label a { background: none; } -#calendar-toolbar_toolbar #toolbar-weekend span.slideSwitch_container span.on { +#calendar-toolbar_toolbar #calendar-toolbar_toolbar-weekend .label span.on { background-image: url(../../../api/templates/default/images/7_day_view.svg); + width: 50%; } -#calendar-toolbar_toolbar #toolbar-weekend span.slideSwitch_container span.off { +#calendar-toolbar_toolbar #calendar-toolbar_toolbar-weekend .label span.off { background-image: url(../../../api/templates/default/images/5_day_view.svg); + width: 50%; } /* ######################################################################################## /* * Calendar END */ @@ -2982,3 +3001,4 @@ div#calendar-container div.calendar table tbody tr.rowhilite td { color: #707070; } } +/*# sourceMappingURL=app.css.map */ \ No newline at end of file diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css index 06ef6e9cd2..413b4da2fc 100755 --- a/calendar/templates/pixelegg/app.css +++ b/calendar/templates/pixelegg/app.css @@ -1518,26 +1518,49 @@ img.calendar_print_appicon { left: 44%; } /* Integration slide switches in toolbar */ -#calendar-toolbar_toolbar span[data-group="integration"] > span, -#toolbar-menulist span[id^="toolbar-integration"], -#toolbar-menulist span[id^="toolbar-video_toggle"] { +#calendar-toolbar_toolbar et2-switch { + height: var(--height); + display: inline-flex; + width: var(--width); +} +#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch, +#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"], +#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"] { background-size: 16px; background-repeat: no-repeat; background-position: center; filter: grayscale(1) contrast(0.9999) opacity(0.7); + width: 24px; } -#calendar-toolbar_toolbar span[data-group="integration"] > span.switchOn, -#toolbar-menulist span[id^="toolbar-integration"].switchOn, -#toolbar-menulist span[id^="toolbar-video_toggle"].switchOn { +#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch[checked], +#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"][checked], +#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"][checked] { filter: none; box-shadow: inset 1px 1px 1px 1px gray !important; + width: var(--width); } -#calendar-toolbar_toolbar span[data-group="integration"] > span span.slideSwitch_container, -#toolbar-menulist span[id^="toolbar-video_toggle"] span.slideSwitch_container, -#toolbar-menulist span[id^="toolbar-integration"] span.slideSwitch_container { +#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch span.label, +#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-video_toggle"] span.label, +#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"] span.label { background: none; min-width: 24px; } +#calendar-toolbar_toolbar et2-switch::part(control) { + visibility: hidden; +} +#calendar-toolbar_toolbar et2-switch { + height: 24px; + display: inline-block; + vertical-align: top; + border: 1px solid silver; + border-radius: 3px; +} +.ui-toolbar-menulist et2-switch, +.ui-toolbar-menulist et2-switch::part(base), +.ui-toolbar-menulist et2-switch::part(label), +.ui-toolbar-menulist et2-switch .label { + width: 100%!important; +} #calendar-toolbar_toolbar .et2_toolbar_more { margin-top: 0; } @@ -2800,19 +2823,13 @@ div#calendar-container div.calendar table tbody tr.rowhilite td { #calendar-view_view.hideDayColHeader tr .calendar_calGridHeader > span.et2_label { width: calc(100% - 58px); } -#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch.switchOn span.off { +#calendar-toolbar_toolbar et2-switch .label.on span.off { filter: invert(1); } -#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch.switchOn span.on { +#calendar-toolbar_toolbar et2-switch .label.on span.on { filter: none !important; } -#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch { - height: 22px; -} -#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container { - padding: 0px; -} -#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container span.on { +#calendar-toolbar_toolbar et2-switch .label span.on { background-size: 18px 18px; background-repeat: no-repeat; background-position: center; @@ -2820,24 +2837,26 @@ div#calendar-container div.calendar table tbody tr.rowhilite td { top: 0; filter: invert(1); } -#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container span.off { +#calendar-toolbar_toolbar et2-switch .label span.off { background-size: 18px 18px; background-repeat: no-repeat; background-position: center; height: 21px; top: 0; } -#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container span { +#calendar-toolbar_toolbar et2-switch .label span { color: transparent !important; } -#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch span.slideSwitch_container a { +#calendar-toolbar_toolbar et2-switch .label a { background: none; } -#calendar-toolbar_toolbar #toolbar-weekend span.slideSwitch_container span.on { +#calendar-toolbar_toolbar #calendar-toolbar_toolbar-weekend .label span.on { background-image: url(../../../api/templates/default/images/7_day_view.svg); + width: 50%; } -#calendar-toolbar_toolbar #toolbar-weekend span.slideSwitch_container span.off { +#calendar-toolbar_toolbar #calendar-toolbar_toolbar-weekend .label span.off { background-image: url(../../../api/templates/default/images/5_day_view.svg); + width: 50%; } /* ######################################################################################## /* * Calendar END */ diff --git a/calendar/templates/pixelegg/app.less b/calendar/templates/pixelegg/app.less index 8a298e465d..69461723e2 100755 --- a/calendar/templates/pixelegg/app.less +++ b/calendar/templates/pixelegg/app.less @@ -1207,7 +1207,7 @@ div#calendar-container { } } #calendar-toolbar_toolbar { - span.et2_checkbox_slideSwitch.switchOn { + et2-switch .label.on { span.off { filter: invert(1); } @@ -1215,9 +1215,8 @@ div#calendar-container { filter: none !important; } } - span.et2_checkbox_slideSwitch { - height: 22px; - span.slideSwitch_container { + et2-switch { + .label { span.on { background-size: 18px 18px; background-repeat: no-repeat; @@ -1233,18 +1232,19 @@ div#calendar-container { height: 21px; top:0; } - padding: 0px; span {color:transparent !important;} a {background: none;} } } - #toolbar-weekend span.slideSwitch_container span.on { - background-image: url(../../../api/templates/default/images/7_day_view.svg); - } - #toolbar-weekend span.slideSwitch_container span.off { - background-image: url(../../../api/templates/default/images/5_day_view.svg); - } + #calendar-toolbar_toolbar-weekend .label span.on { + background-image: url(../../../api/templates/default/images/7_day_view.svg); + width: 50%; + } + #calendar-toolbar_toolbar-weekend .label span.off { + background-image: url(../../../api/templates/default/images/5_day_view.svg); + width: 50%; + } } /* ########################################################################################