From 88760f0cd744aeca143e5c96fb88e900627091c3 Mon Sep 17 00:00:00 2001 From: Milan Date: Sun, 27 Jun 2021 14:54:51 +0200 Subject: [PATCH] calendar.cgi: replace checkbox with switch --- website/agenda/planung/calendar.cgi | 7 +-- website/agenda/planung/css/calendar.css | 77 ++++++++++++++++++++++- website/agenda/planung/js/calendar.js | 26 ++++++-- website/agenda/planung/pot/de/calendar.po | 2 +- website/agenda/planung/pot/en/calendar.po | 2 +- 5 files changed, 100 insertions(+), 14 deletions(-) diff --git a/website/agenda/planung/calendar.cgi b/website/agenda/planung/calendar.cgi index b3ca779..eebe7b8 100755 --- a/website/agenda/planung/calendar.cgi +++ b/website/agenda/planung/calendar.cgi @@ -927,7 +927,7 @@ sub showEventList { var label_schedule='} . $params->{loc}->{label_schedule} . q{'; var label_worktime='} . $params->{loc}->{label_worktime} . q{'; var label_playout='} . $params->{loc}->{label_playout} . q{'; - var label_print='} . $params->{loc}->{label_print} . q{'; + var label_pin='} . $params->{loc}->{label_pin} . q{'; @@ -1297,6 +1297,7 @@ sub printJavascript { var label_schedule='} . $params->{loc}->{label_schedule} . q{'; var label_worktime='} . $params->{loc}->{label_worktime} . q{'; var label_playout='} . $params->{loc}->{label_playout} . q{'; + var label_pin='} . $params->{loc}->{label_pin} . q{'; }; print $out; @@ -1795,10 +1796,6 @@ sub printToolbar { } if $params->{list} == 1; - $toolbar .= qq{ - - } unless $params->{list}; - $toolbar .= qq{ }; diff --git a/website/agenda/planung/css/calendar.css b/website/agenda/planung/css/calendar.css index 4c094b0..a85a979 100644 --- a/website/agenda/planung/css/calendar.css +++ b/website/agenda/planung/css/calendar.css @@ -555,4 +555,79 @@ div.play .error { #background:#fdcccc } - +/* switch start, Code Copyright 2018 Materialize. Code released under the MIT license. */ +.switch, .switch * { + -webkit-tap-highlight-color: transparent; + user-select: none; +} +.switch label { + cursor: pointer; +} +.switch label input[type="checkbox"] { + opacity: 0; + width: 0; + height: 0; +} +.switch [type="checkbox"]:not(:checked), .switch [type="checkbox"]:checked { + position: absolute; + opacity: 0; + pointer-events: none; +} +.switch [type="checkbox"], .switch [type="radio"] { + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding: 0; +} +.switch label .lever { + content: ""; + display: inline-block; + position: relative; + width: 36px; + height: 14px; + background-color: rgba(0,0,0,0.38); + border-radius: 15px; + margin-right: 10px; + -webkit-transition: background 0.3s ease; + transition: background 0.3s ease; + vertical-align: middle; + margin: 0 16px; +} +switch label .lever::before { + background-color: rgba(38,166,154,0.15); +} +.switch label .lever::before, .switch label .lever::after { + content: ""; + position: absolute; + display: inline-block; + width: 20px; + height: 20px; + border-radius: 50%; + left: 0; + top: -3px; + -webkit-transition: left 0.3s ease, background .3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform .1s ease; + transition: left 0.3s ease, background .3s ease, -webkit-box-shadow 0.1s ease, -webkit-transform .1s ease; + transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease; + transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease, -webkit-box-shadow 0.1s ease, -webkit-transform .1s ease; +} +.switch label .lever::after { + background-color: #F1F1F1; + -webkit-box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); +} +.switch, .switch * { + -webkit-tap-highlight-color: transparent; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.switch label input[type="checkbox"]:checked + .lever { + background-color: #84c7c1; +} +.switch label input[type="checkbox"]:checked + .lever::before, .switch label input[type="checkbox"]:checked + .lever::after { + left: 18px; +} +.switch label input[type="checkbox"]:checked + .lever::after { + background-color: #26a69a; +} +/* switch end */ diff --git a/website/agenda/planung/js/calendar.js b/website/agenda/planung/js/calendar.js index e2e7e45..d570ff2 100644 --- a/website/agenda/planung/js/calendar.js +++ b/website/agenda/planung/js/calendar.js @@ -430,13 +430,27 @@ function initTodayButton(){ return true; } +function getSwitch(id, text, active){ + if (active) active = 'checked="checked"'; + var html=''; + html += '
' + html += '' + html += '
' + return html; +} + function initCalendarMenu(){ //add filters to header var html=''; - html += '
'+(label_events || "label") +'
'; - html += '
'+(label_schedule || "schedule")+'
'; - html += '
'+(label_playout || "playout")+'
'; - html += '
'+(label_worktime || "worktime")+'
'; + html += getSwitch('pin', label_pin || "label", false); + html += getSwitch('show_events', label_events || "label", true); + html += getSwitch('show_schedule', label_schedule || "schedule", true); + html += getSwitch('show_playout', label_playout || "playout", true); + html += getSwitch('show_worktime', label_worktime || "worktime", false); $('#toolbar').append(html); if(getUrlParameter('s')=='0') unselectCheckbox('#show_schedule'); @@ -730,8 +744,8 @@ function updateTable(){ } ); - $('button#pin').off(); - $('button#pin').on( "click", function(){ + $('input#pin').off(); + $('input#pin').on( "click", function(){ var button = $(this); var elem = $('#content #calendar').first(); if ( button.hasClass("pressed") ){ diff --git a/website/agenda/planung/pot/de/calendar.po b/website/agenda/planung/pot/de/calendar.po index 594eee4..87efcaf 100644 --- a/website/agenda/planung/pot/de/calendar.po +++ b/website/agenda/planung/pot/de/calendar.po @@ -10,7 +10,7 @@ msgstr "Heute" msgid "button_search" msgstr "Suche" -msgid "button_pin" +msgid "label_pin" msgstr "Anpinnen" msgid "label_month" diff --git a/website/agenda/planung/pot/en/calendar.po b/website/agenda/planung/pot/en/calendar.po index 2e31a69..8f281ac 100644 --- a/website/agenda/planung/pot/en/calendar.po +++ b/website/agenda/planung/pot/en/calendar.po @@ -7,7 +7,7 @@ msgstr "today" msgid "button_search" msgstr "search" -msgid "button_pin" +msgid "label_pin" msgstr "pin" msgid "label_month"