From 37792a7ef39b56d107af5f7f63f93dd5ce9b74a6 Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Mon, 15 Apr 2019 17:06:42 +0200 Subject: [PATCH] Improve calendar 7/5 days switch --- calendar/templates/mobile/app.css | 36 ++++++++++++++++++++++++++++ calendar/templates/pixelegg/app.css | 36 ++++++++++++++++++++++++++++ calendar/templates/pixelegg/app.less | 34 ++++++++++++++++++++++++++ pixelegg/images/5_day_view.svg | 19 +++++++++++++++ pixelegg/images/7_day_view.svg | 19 +++++++++++++++ 5 files changed, 144 insertions(+) create mode 100644 pixelegg/images/5_day_view.svg create mode 100644 pixelegg/images/7_day_view.svg diff --git a/calendar/templates/mobile/app.css b/calendar/templates/mobile/app.css index 0a6c22f722..d1cb100715 100644 --- a/calendar/templates/mobile/app.css +++ b/calendar/templates/mobile/app.css @@ -2702,6 +2702,42 @@ div#calendar-container div.calendar table tbody tr.rowhilite td { #calendar-view_view.hideDayColHeader tr .calendar_calGridHeader > span.et2_label { width: calc(100% - 58px); } +span.et2_checkbox_slideSwitch.switchOn span.off { + filter: invert(1); +} +span.et2_checkbox_slideSwitch.switchOn span.on { + filter: none !important; +} +span.et2_checkbox_slideSwitch { + margin: 0px; + height: 22px; +} +span.et2_checkbox_slideSwitch span.slideSwitch_container { + padding: 0px; +} +span.et2_checkbox_slideSwitch span.slideSwitch_container span.on { + background-image: url(../../../pixelegg/images/7_day_view.svg); + background-size: 16px 16px; + background-repeat: no-repeat; + background-position: center; + height: 24px; + top: 0; + filter: invert(1); +} +span.et2_checkbox_slideSwitch span.slideSwitch_container span.off { + background-image: url(../../../pixelegg/images/5_day_view.svg); + background-size: 16px 16px; + background-repeat: no-repeat; + background-position: center; + height: 24px; + top: 0; +} +span.et2_checkbox_slideSwitch span.slideSwitch_container span { + color: transparent !important; +} +span.et2_checkbox_slideSwitch span.slideSwitch_container a { + background: none; +} /* ######################################################################################## /* * Calendar END */ /* tablets and smartphones */ diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css index 2a7352db67..5b285dae6b 100755 --- a/calendar/templates/pixelegg/app.css +++ b/calendar/templates/pixelegg/app.css @@ -2690,5 +2690,41 @@ div#calendar-container div.calendar table tbody tr.rowhilite td { #calendar-view_view.hideDayColHeader tr .calendar_calGridHeader > span.et2_label { width: calc(100% - 58px); } +span.et2_checkbox_slideSwitch.switchOn span.off { + filter: invert(1); +} +span.et2_checkbox_slideSwitch.switchOn span.on { + filter: none !important; +} +span.et2_checkbox_slideSwitch { + margin: 0px; + height: 22px; +} +span.et2_checkbox_slideSwitch span.slideSwitch_container { + padding: 0px; +} +span.et2_checkbox_slideSwitch span.slideSwitch_container span.on { + background-image: url(../../../pixelegg/images/7_day_view.svg); + background-size: 16px 16px; + background-repeat: no-repeat; + background-position: center; + height: 24px; + top: 0; + filter: invert(1); +} +span.et2_checkbox_slideSwitch span.slideSwitch_container span.off { + background-image: url(../../../pixelegg/images/5_day_view.svg); + background-size: 16px 16px; + background-repeat: no-repeat; + background-position: center; + height: 24px; + top: 0; +} +span.et2_checkbox_slideSwitch span.slideSwitch_container span { + color: transparent !important; +} +span.et2_checkbox_slideSwitch span.slideSwitch_container a { + background: none; +} /* ######################################################################################## /* * Calendar END */ diff --git a/calendar/templates/pixelegg/app.less b/calendar/templates/pixelegg/app.less index 3af97fac1c..9394280f60 100755 --- a/calendar/templates/pixelegg/app.less +++ b/calendar/templates/pixelegg/app.less @@ -1235,7 +1235,41 @@ div#calendar-container { .calendar_calGridHeader > span.et2_label {width:~"calc(100% - 58px)";} } } +span.et2_checkbox_slideSwitch.switchOn { + span.off { + filter: invert(1); + } + span.on { + filter: none !important; + } +} +span.et2_checkbox_slideSwitch { + margin: 0px; + height: 22px; + span.slideSwitch_container { + span.on { + background-image: url(../../../pixelegg/images/7_day_view.svg); + background-size: 16px 16px; + background-repeat: no-repeat; + background-position: center; + height: 24px; + top:0; + filter: invert(1); + } + span.off { + background-image: url(../../../pixelegg/images/5_day_view.svg); + background-size: 16px 16px; + background-repeat: no-repeat; + background-position: center; + height: 24px; + top:0; + } + padding: 0px; + span {color:transparent !important;} + a {background: none;} + } +} /* ######################################################################################## /* * Calendar END */ diff --git a/pixelegg/images/5_day_view.svg b/pixelegg/images/5_day_view.svg new file mode 100644 index 0000000000..be710307f7 --- /dev/null +++ b/pixelegg/images/5_day_view.svg @@ -0,0 +1,19 @@ + + + + + + + + + +5 + diff --git a/pixelegg/images/7_day_view.svg b/pixelegg/images/7_day_view.svg new file mode 100644 index 0000000000..934ed84163 --- /dev/null +++ b/pixelegg/images/7_day_view.svg @@ -0,0 +1,19 @@ + + + + + + + + + +7 +