From 23aebe3ae894eed13c21282d2ddd5366c1ab91ea Mon Sep 17 00:00:00 2001 From: pero1203 Date: Wed, 22 Jun 2022 09:16:54 +0200 Subject: [PATCH] Redesign - zamenjan gumb za aktivacijo/deaktivacijo ankete (svg) --- admin/survey/SurveyAdmin.php | 11 +- admin/survey/SurveyAdminSettings.php | 11 +- admin/survey/classes/class.SurveyList.php | 4 +- .../mobile/class.MobileSurveyAdmin.php | 4 +- public/css/admin_new.css | 172 ++---------------- public/img/icons/toggle_active.svg | 5 + public/img/icons/toggle_inactive.svg | 5 + .../admin_new/components/header/top_line.scss | 65 +------ .../pages/my_surveys/top_filters.scss | 66 +------ .../pages/survey_objava/pregled.scss | 68 ------- 10 files changed, 56 insertions(+), 355 deletions(-) create mode 100644 public/img/icons/toggle_active.svg create mode 100644 public/img/icons/toggle_inactive.svg diff --git a/admin/survey/SurveyAdmin.php b/admin/survey/SurveyAdmin.php index 0d2658644..ca5b5ce43 100644 --- a/admin/survey/SurveyAdmin.php +++ b/admin/survey/SurveyAdmin.php @@ -5956,7 +5956,7 @@ class SurveyAdmin echo ''; } - echo '
ON
'; + echo '
'; echo '
'; } @@ -5975,14 +5975,7 @@ class SurveyAdmin echo ''; } - if ((int)$_last_active > 0) { - # anketa je zaključena - echo '
OFF
'; - } - else { - # anketa je neaktivna - echo '
OFF
'; - } + echo '
'; echo '
'; } diff --git a/admin/survey/SurveyAdminSettings.php b/admin/survey/SurveyAdminSettings.php index 02f72386b..ff93c4b11 100644 --- a/admin/survey/SurveyAdminSettings.php +++ b/admin/survey/SurveyAdminSettings.php @@ -2673,7 +2673,7 @@ class SurveyAdminSettings { echo ''; } - echo '
ON
'; + echo '
'; echo '
'; } @@ -2692,14 +2692,7 @@ class SurveyAdminSettings { echo ''; } - if ((int)$_last_active > 0) { - # anketa je zaključena - echo '
OFF
'; - } - else { - # anketa je neaktivna - echo '
OFF
'; - } + echo '
'; echo '
'; } diff --git a/admin/survey/classes/class.SurveyList.php b/admin/survey/classes/class.SurveyList.php index df0584851..0c33bdb59 100644 --- a/admin/survey/classes/class.SurveyList.php +++ b/admin/survey/classes/class.SurveyList.php @@ -1557,9 +1557,9 @@ class SurveyList { // Stikalo za folderje if($this->show_folders == 1) - echo '
ON
'; + echo '
'; else - echo '
OFF
'; + echo '
'; echo ''; } diff --git a/admin/survey/classes/mobile/class.MobileSurveyAdmin.php b/admin/survey/classes/mobile/class.MobileSurveyAdmin.php index 706dfe138..b1655d3fb 100644 --- a/admin/survey/classes/mobile/class.MobileSurveyAdmin.php +++ b/admin/survey/classes/mobile/class.MobileSurveyAdmin.php @@ -166,7 +166,7 @@ class MobileSurveyAdmin{ echo ''; } - echo '
ON
'; + echo '
'; echo '
'.$lang['srv_anketa_active'].'
'; echo '
'; @@ -187,7 +187,7 @@ class MobileSurveyAdmin{ echo ''; } - echo '
OFF
'; + echo '
'; echo '
'.$lang['srv_anketa_noactive'].'
'; echo '
'; diff --git a/public/css/admin_new.css b/public/css/admin_new.css index 63f6649eb..a93f3a36d 100644 --- a/public/css/admin_new.css +++ b/public/css/admin_new.css @@ -8883,51 +8883,15 @@ header #top_line #xtradiv #xtradivSettings a .faicon:before { width: 46px; height: 16px; } -.switch_anketa .switch_anketa_content { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - padding-top: 1px; - color: white; - font-size: 12px; - font-weight: 400; - line-height: 12px; - background-color: #1E88E5; - border-radius: 16px; +.switch_anketa.anketa_on { + background-image: url("../../public/img/icons/toggle_active.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; } -.switch_anketa .switch_anketa_content:before { - position: absolute; - content: ""; - height: 14px; - width: 14px; - bottom: 1px; - background-color: white; - border-radius: 50%; -} - -.switch_anketa.anketa_on .switch_anketa_content { - padding-left: 20px; - background-color: #1E88E5; -} -.switch_anketa.anketa_on .switch_anketa_content:before { - left: 1px; -} -.switch_anketa.anketa_on:hover .switch_anketa_content { - background-color: #0059ab; -} - -.switch_anketa.anketa_off .switch_anketa_content { - padding-left: 6px; - background-color: #C4C4C4; -} -.switch_anketa.anketa_off .switch_anketa_content:before { - right: 1px; -} -.switch_anketa.anketa_off:hover .switch_anketa_content { - background-color: #b7b7b7; +.switch_anketa.anketa_off { + background-image: url("../../public/img/icons/toggle_inactive.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; } header #surveyNavigation { @@ -10639,65 +10603,19 @@ header #top_line #enka_nav .anketa_header_upgrade_package button { width: 41px; height: 16px; } -#survey_list .second_line .filters #filterButton#folderSwitch .switch_folders .switch_folders_content, -#survey_list .second_line .filters #sortButton#folderSwitch .switch_folders .switch_folders_content, -#survey_list .second_line .filters #folderSwitch#folderSwitch .switch_folders .switch_folders_content { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - padding-top: 1px; - color: white; - font-size: 10px; - font-weight: 400; - line-height: 13px; - background-color: #1E88E5; - border-radius: 16px; +#survey_list .second_line .filters #filterButton#folderSwitch .switch_folders.on, +#survey_list .second_line .filters #sortButton#folderSwitch .switch_folders.on, +#survey_list .second_line .filters #folderSwitch#folderSwitch .switch_folders.on { + background-image: url("../../public/img/icons/toggle_active.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; } -#survey_list .second_line .filters #filterButton#folderSwitch .switch_folders .switch_folders_content:before, -#survey_list .second_line .filters #sortButton#folderSwitch .switch_folders .switch_folders_content:before, -#survey_list .second_line .filters #folderSwitch#folderSwitch .switch_folders .switch_folders_content:before { - position: absolute; - content: ""; - height: 14px; - width: 14px; - bottom: 1px; - background-color: white; - border-radius: 50%; -} -#survey_list .second_line .filters #filterButton#folderSwitch .switch_folders.on .switch_folders_content, -#survey_list .second_line .filters #sortButton#folderSwitch .switch_folders.on .switch_folders_content, -#survey_list .second_line .filters #folderSwitch#folderSwitch .switch_folders.on .switch_folders_content { - padding-left: 20px; - background-color: #1E88E5; -} -#survey_list .second_line .filters #filterButton#folderSwitch .switch_folders.on .switch_folders_content:before, -#survey_list .second_line .filters #sortButton#folderSwitch .switch_folders.on .switch_folders_content:before, -#survey_list .second_line .filters #folderSwitch#folderSwitch .switch_folders.on .switch_folders_content:before { - left: 1px; -} -#survey_list .second_line .filters #filterButton#folderSwitch .switch_folders.on:hover .switch_folders_content, -#survey_list .second_line .filters #sortButton#folderSwitch .switch_folders.on:hover .switch_folders_content, -#survey_list .second_line .filters #folderSwitch#folderSwitch .switch_folders.on:hover .switch_folders_content { - background-color: #0059ab; -} -#survey_list .second_line .filters #filterButton#folderSwitch .switch_folders.off .switch_folders_content, -#survey_list .second_line .filters #sortButton#folderSwitch .switch_folders.off .switch_folders_content, -#survey_list .second_line .filters #folderSwitch#folderSwitch .switch_folders.off .switch_folders_content { - padding-left: 6px; - background-color: #808080; -} -#survey_list .second_line .filters #filterButton#folderSwitch .switch_folders.off .switch_folders_content:before, -#survey_list .second_line .filters #sortButton#folderSwitch .switch_folders.off .switch_folders_content:before, -#survey_list .second_line .filters #folderSwitch#folderSwitch .switch_folders.off .switch_folders_content:before { - right: 1px; -} -#survey_list .second_line .filters #filterButton#folderSwitch .switch_folders.off:hover .switch_folders_content, -#survey_list .second_line .filters #sortButton#folderSwitch .switch_folders.off:hover .switch_folders_content, -#survey_list .second_line .filters #folderSwitch#folderSwitch .switch_folders.off:hover .switch_folders_content { - background-color: #777777; +#survey_list .second_line .filters #filterButton#folderSwitch .switch_folders.off, +#survey_list .second_line .filters #sortButton#folderSwitch .switch_folders.off, +#survey_list .second_line .filters #folderSwitch#folderSwitch .switch_folders.off { + background-image: url("../../public/img/icons/toggle_inactive.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; } #survey_list .second_line .filters #filterButton#filterButton:after, #survey_list .second_line .filters #filterButton#sortButton:after, #survey_list .second_line .filters #sortButton#filterButton:after, @@ -24395,56 +24313,6 @@ div#vabila div.top_note div.top_note_activate { div#vabila div.top_note div.top_note_activate p { margin-right: 12px; } -div#vabila div.top_note div.top_note_activate .switch_anketa { - position: relative; - display: block; - width: 46px; - height: 16px; -} -div#vabila div.top_note div.top_note_activate .switch_anketa .switch_anketa_content { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - padding-top: 1px; - color: white; - font-size: 12px; - font-weight: 400; - line-height: 12px; - background-color: #1E88E5; - border-radius: 16px; -} -div#vabila div.top_note div.top_note_activate .switch_anketa .switch_anketa_content:before { - position: absolute; - content: ""; - height: 14px; - width: 14px; - bottom: 1px; - background-color: white; - border-radius: 50%; -} -div#vabila div.top_note div.top_note_activate .switch_anketa.anketa_on .switch_anketa_content { - padding-left: 20px; - background-color: #1E88E5; -} -div#vabila div.top_note div.top_note_activate .switch_anketa.anketa_on .switch_anketa_content:before { - left: 1px; -} -div#vabila div.top_note div.top_note_activate .switch_anketa.anketa_on:hover .switch_anketa_content { - background-color: #0059ab; -} -div#vabila div.top_note div.top_note_activate .switch_anketa.anketa_off .switch_anketa_content { - padding-left: 6px; - background-color: #808080; -} -div#vabila div.top_note div.top_note_activate .switch_anketa.anketa_off .switch_anketa_content:before { - right: 1px; -} -div#vabila div.top_note div.top_note_activate .switch_anketa.anketa_off:hover .switch_anketa_content { - background-color: #777777; -} div#vabila div.title { display: flex; flex-direction: row; diff --git a/public/img/icons/toggle_active.svg b/public/img/icons/toggle_active.svg new file mode 100644 index 000000000..26faa6f23 --- /dev/null +++ b/public/img/icons/toggle_active.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/img/icons/toggle_inactive.svg b/public/img/icons/toggle_inactive.svg new file mode 100644 index 000000000..10d2eaf5b --- /dev/null +++ b/public/img/icons/toggle_inactive.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/resources/sass/admin_new/components/header/top_line.scss b/resources/sass/admin_new/components/header/top_line.scss index 88ebee76a..22e9934c7 100644 --- a/resources/sass/admin_new/components/header/top_line.scss +++ b/resources/sass/admin_new/components/header/top_line.scss @@ -327,63 +327,16 @@ header #top_line{ width: 46px; height: 16px; - - .switch_anketa_content { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - padding-top: 1px; - color: white; - font-size: 12px; - font-weight: 400; - line-height: 12px; - - background-color: $blue; - border-radius: 16px; + &.anketa_on{ + background-image: url("../../public/img/icons/toggle_active.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; } - .switch_anketa_content:before { - position: absolute; - content: ""; - - height: 14px; - width: 14px; - bottom: 1px; - - background-color: white; - border-radius: 50%; - } -} - -.switch_anketa.anketa_on{ - .switch_anketa_content{ - padding-left: 20px; - background-color: $blue; - } - .switch_anketa_content:before{ - left: 1px; - } - &:hover{ - .switch_anketa_content{ - background-color: $dark-blue; - } - } -} - -.switch_anketa.anketa_off{ - .switch_anketa_content{ - padding-left: 6px; - background-color: $dark-gray; - } - .switch_anketa_content:before{ - right: 1px; - } - &:hover{ - .switch_anketa_content{ - background-color: darken($dark-gray, 5%); - } + + &.anketa_off{ + background-image: url("../../public/img/icons/toggle_inactive.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; } } diff --git a/resources/sass/admin_new/pages/my_surveys/top_filters.scss b/resources/sass/admin_new/pages/my_surveys/top_filters.scss index fe26191ee..3a26fafd1 100644 --- a/resources/sass/admin_new/pages/my_surveys/top_filters.scss +++ b/resources/sass/admin_new/pages/my_surveys/top_filters.scss @@ -245,64 +245,16 @@ width: 41px; height: 16px; - .switch_folders_content { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - padding-top: 1px; - - color: white; - font-size: 10px; - font-weight: 400; - line-height: 13px; - - background-color: $blue; - border-radius: 16px; + &.on{ + background-image: url("../../public/img/icons/toggle_active.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; } - - .switch_folders_content:before { - position: absolute; - content: ""; - - height: 14px; - width: 14px; - bottom: 1px; - - background-color: white; - border-radius: 50%; - } - } - - .switch_folders.on{ - .switch_folders_content{ - padding-left: 20px; - background-color: $blue; - } - .switch_folders_content:before{ - left: 1px; - } - &:hover{ - .switch_folders_content{ - background-color: $dark-blue; - } - } - } - - .switch_folders.off{ - .switch_folders_content{ - padding-left: 6px; - background-color: $very-dark-gray2; - } - .switch_folders_content:before{ - right: 1px; - } - &:hover{ - .switch_folders_content{ - background-color: $very-dark-gray; - } + + &.off{ + background-image: url("../../public/img/icons/toggle_inactive.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; } } } diff --git a/resources/sass/admin_new/pages/survey_objava/pregled.scss b/resources/sass/admin_new/pages/survey_objava/pregled.scss index efc83965c..222d989fc 100644 --- a/resources/sass/admin_new/pages/survey_objava/pregled.scss +++ b/resources/sass/admin_new/pages/survey_objava/pregled.scss @@ -36,74 +36,6 @@ div#vabila { p { margin-right: 12px; } - - // Gumb za aktivacijo ankete - kopirano iz headerja - .switch_anketa { - position: relative; - display: block; - - width: 46px; - height: 16px; - - .switch_anketa_content { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - padding-top: 1px; - - color: white; - font-size: 12px; - font-weight: 400; - line-height: 12px; - - background-color: $blue; - border-radius: 16px; - } - .switch_anketa_content:before { - position: absolute; - content: ""; - - height: 14px; - width: 14px; - bottom: 1px; - - background-color: white; - border-radius: 50%; - } - } - - .switch_anketa.anketa_on{ - .switch_anketa_content{ - padding-left: 20px; - background-color: $blue; - } - .switch_anketa_content:before{ - left: 1px; - } - &:hover{ - .switch_anketa_content{ - background-color: $dark-blue; - } - } - } - - .switch_anketa.anketa_off{ - .switch_anketa_content{ - padding-left: 6px; - background-color: $very-dark-gray2; - } - .switch_anketa_content:before{ - right: 1px; - } - &:hover{ - .switch_anketa_content{ - background-color: $very-dark-gray; - } - } - } } }