From cc435b99ace82a51b4f6db3734d859ecf1c06f63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nejc=20Kova=C4=8D?= <nejc.kouko@gmail.com>
Date: Fri, 12 Aug 2022 13:46:23 +0200
Subject: [PATCH] urejanje oblika: settings

---
 admin/survey/classes/class.SurveyTheme.php    | 17 +++++--
 admin/survey/script/urejanje_oblika.js        | 47 +++++++++++++------
 public/css/admin_new.css                      |  7 ++-
 .../pages/survey_analysis/icons.scss          |  3 ++
 .../pages/survey_edit/oblika_teme.scss        |  8 +++-
 5 files changed, 62 insertions(+), 20 deletions(-)

diff --git a/admin/survey/classes/class.SurveyTheme.php b/admin/survey/classes/class.SurveyTheme.php
index 2c3678553..993997539 100644
--- a/admin/survey/classes/class.SurveyTheme.php
+++ b/admin/survey/classes/class.SurveyTheme.php
@@ -374,7 +374,7 @@ class SurveyTheme {
 
 		echo '<button id="btn-1"  onclick="teme_options()"> <img src="\public\img\icons\dots.svg"> </button>';
 
-			echo '<div class= "buttons-window buttons-window1" id="buttons-window1">';
+			echo '<div class= "buttons-window displayNone buttons-window1" id="buttons-window1">';
 
 				//Predogled
 				echo '<div class="button theme_links_preview" src="'.$preview_link.'" title="'.$lang['srv_poglejanketo2'].'">';
@@ -426,7 +426,7 @@ class SurveyTheme {
 
 		echo '<button id="btn-2" onclick="teme_options2()"> <img src="\public\img\icons\dots.svg"> </button>';
 
-			echo '<div class= "buttons-window" id="buttons-window2">';
+			echo '<div class= "buttons-window displayNone " id="buttons-window2">';
 
 				//Predogled
 				echo '<div class="button theme_links_preview" src="'.$preview_link.'" title="'.$lang['srv_poglejanketo2'].'">';
@@ -602,7 +602,7 @@ class SurveyTheme {
 
 				echo '<button onclick="show_settings(\''.$row['id'].'\')"> <img src="\public\img\icons\dots.svg"> </button>';
 
-				echo '<div class="buttons-window" id="additional_settings_'.$row['id'].'">';		
+				echo '<div class="buttons-window displayNone" id="additional_settings_'.$row['id'].'">';		
 
 					//Aktiviraj
 					echo '<div class="button" onclick="te_change_profile(\''.$row['id'].'\', true); return false;" title="'.$lang['srv_te_theme_activate2'].'">';
@@ -698,6 +698,17 @@ class SurveyTheme {
 			}
 		}
 
+		// Klik izven  - zapremo okno
+		echo '<script>
+		$(document).mouseup(function(e){
+			var container = $(".buttons-window, .options");
+		
+			if (!container.is(e.target) && container.has(e.target).length === 0){
+				$(".buttons-window").addClass("displayNone");
+			}
+		});
+		</script>';
+
 
 		// Splošne teme - GRID
 		if ( isset($this->groups[$groupId]['skins']) && count($this->groups[$groupId]['skins']) > 0 ) {
diff --git a/admin/survey/script/urejanje_oblika.js b/admin/survey/script/urejanje_oblika.js
index ffb2d499e..3a3b2133c 100644
--- a/admin/survey/script/urejanje_oblika.js
+++ b/admin/survey/script/urejanje_oblika.js
@@ -7,11 +7,10 @@ function teme_options(){
 
     document.onclick = function(e){
         if(e.target.id !== 'buttons-window1' && e.target.id !== 'btn-1' ){
-            toggle_id.classList.remove('active');
+            toggle_id.classList.addClass('displayNone');
         }
     }
-
-    toggle_id.classList.toggle('active');
+    toggle_id.classList.toggle('displayNone');
 }
 
 function teme_options2(){
@@ -19,28 +18,37 @@ function teme_options2(){
 
     document.onclick = function(e){
         if(e.target.id !== 'buttons-window2' && e.target.id !== 'btn-2' ){
-            toggle_id.classList.remove('active');
+            toggle_id.classList.addClass('displayNone');
         }
     }
-    toggle_id.classList.toggle('active');
+    toggle_id.classList.toggle('displayNone');
 }
 
 function show_settings(id_of_element){
 
-    var options_id = ("options"+id_of_element)
-    var additional_settings = document.getElementById("additional_settings_"+id_of_element);
-    var additional_settings_id = ("additional_settings_"+id_of_element);
+    // var options_id = ("options"+id_of_element)
+    // var additional_settings = document.getElementById("additional_settings_"+id_of_element);
+    // var additional_settings_id = ("additional_settings_"+id_of_element);
     
     // console.log(options_id);
     // console.log(additional_settings_id);
     
 
-    // document.onclick = function(e){
-    //     if(e.target.id !== additional_settings_id && e.target.id !==options_id ){
-    //         additional_settings.classList.remove('active');
-    //     }
-    // }
-    additional_settings.classList.toggle("active");
+    // // document.onclick = function(e){
+    // //     if(e.target.id !== additional_settings_id && e.target.id !==options_id ){
+    // //         additional_settings.classList.remove('active');
+    // //     }
+    // // }
+    // additional_settings.classList.toggle("active");
+
+    if($('#additional_settings_'+id_of_element).hasClass('displayNone')){
+        $('.buttons-window').addClass('displayNone');
+        $('#additional_settings_'+id_of_element).removeClass('displayNone');
+    }
+    else{
+        $('.buttons-window').addClass('displayNone');
+    }
+
 
 }
 
@@ -59,6 +67,17 @@ function show_settings_mobile(id_of_element){
     // }
     additional_settings.classList.toggle("active");
 
+
+
+    if($('#additional_settings_mobile_'+id_of_element).hasClass('displayNone')){
+        $('.buttons-window').addClass('displayNone');
+        $('#additional_settings_mobile_'+id_of_element).removeClass('displayNone');
+    }
+    else{
+        $('.buttons-window').addClass('displayNone');
+    }
+
+
 }
 
 
diff --git a/public/css/admin_new.css b/public/css/admin_new.css
index 2b2fc931e..6db4437e8 100644
--- a/public/css/admin_new.css
+++ b/public/css/admin_new.css
@@ -20864,6 +20864,10 @@ textarea#addusers, textarea#addusers_note {
   height: 120px;
 }
 
+.buttons-window.displayNone {
+  display: none;
+}
+
 div.page_tema h2 {
   font-size: 24px;
   margin-top: 32px;
@@ -20913,7 +20917,6 @@ div.page_tema div.theme_list div.options div.buttons-window {
   position: absolute;
   bottom: 20px;
   max-width: 113px;
-  display: none;
   margin-right: 5px;
 }
 div.page_tema div.theme_list div.options div.buttons-window.active {
@@ -29490,7 +29493,7 @@ iframe#ifmcontentstoprint {
   width: 100%;
 }
 
-#div_analiza_data .cell_icons {
+#div_analiza_data .row2 {
   position: relative;
 }
 #div_analiza_data .options {
diff --git a/resources/sass/admin_new/pages/survey_analysis/icons.scss b/resources/sass/admin_new/pages/survey_analysis/icons.scss
index 8152f9bc9..c8eaa2a36 100644
--- a/resources/sass/admin_new/pages/survey_analysis/icons.scss
+++ b/resources/sass/admin_new/pages/survey_analysis/icons.scss
@@ -2,6 +2,9 @@
 
 #div_analiza_data{
     .cell_icons {
+        //
+    }
+    .row2{
         position: relative;
     }
     
diff --git a/resources/sass/admin_new/pages/survey_edit/oblika_teme.scss b/resources/sass/admin_new/pages/survey_edit/oblika_teme.scss
index 8ad067c9a..245ef712e 100644
--- a/resources/sass/admin_new/pages/survey_edit/oblika_teme.scss
+++ b/resources/sass/admin_new/pages/survey_edit/oblika_teme.scss
@@ -1,3 +1,9 @@
+.buttons-window.displayNone{
+    display: none;
+}
+
+
+
 // Oblika - prva stran, meni s temami
 div.page_tema {
     
@@ -69,7 +75,7 @@ div.page_tema {
                 position: absolute;
                 bottom: 20px;
                 max-width: 113px;
-                display: none;
+                // display: none;
 
                 margin-right: 5px;
             }