Redesign - tooltipi v glavi

admin/survey/SurveyAdmin.php

@@ -791,9 +791,7 @@ class SurveyAdmin
             } 
             // pasivni lahko samo gledajo
             else {
-
                 echo '	<div class="anketa_header_naslov">'.$row['naslov'].'</div>';
-                $link = SurveyInfo::getSurveyLink();
             }
 
 
@@ -3843,91 +3841,193 @@ class SurveyAdmin
         echo '  <span class="faicon users icon-as_link"></span>';
         echo '</a>';
 
-        echo '<span class="expanded-tooltip bottom" id="request_help_content">';
+        echo '<div class="expanded-tooltip bottom" id="request_help_content">';
+        $this->tooltip_request_help();
+        echo '</div>';    // expanded-tooltip bottom
 
-        $this->request_help_content();
-
-        echo '</span>';    // expanded-tooltip bottom
         echo '</span>'; // request-help
 
     }
 
-    function request_help_content(){
+    // Tooltip "prosi za pomoc"
+    public function tooltip_request_help(){
         global $lang;
 
         $row = SurveyInfo::getInstance()->getSurveyRow();
 
-        echo '<div class="block">';
+        echo '<div class="expanded-tooltip-box">';
-        echo '  <span class="line semi-bold">';
+
-        echo        $lang['srv_dostopmail_1'];
+        echo '  <h1><span class="faicon users"></span>'.$lang['srv_multilang_users'].'</h1>';
-        echo '  </span>';
+
-        echo '</div>';
 
         $d = new Dostop();
-
         $users = $d->getDostop();
 
 
         if (is_countable($users[2]) && count($users[2]) > 0) {
 
-            echo '<div class="block">';
+            echo '  <div class="tooltip_line semi-bold">';
-
-            echo '  <span class="line semi-bold">';
-            echo        $lang['srv_users'].':';
             if ($d->checkDostopAktiven()) 
-                echo '  (<a href="index.php?anketa=' . $this->anketa . '&a=dostop">' . $lang['srv_add_edit'] . '</a>)';
+                echo $lang['srv_users'].' (<a href="index.php?anketa=' . $this->anketa . '&a=dostop">'.$lang['srv_add_edit'].'</a>):';
-            echo '  </span>';
+            else
+                echo $lang['srv_users'].':';
+            echo '  </div>';
 
             foreach ($users[2] AS $user) {
-                echo '  <span class="line">';
+                echo '  <div class="tooltip_line">';
                 echo        $user['email'];
-                echo '  </span>';
+                echo '  </div>';
             }
-
-            echo '</div>';
         }
 
 
         if (is_countable($users[1]) && count($users[1]) > 0) {
 
-            echo '<div class="block">';
+            echo '  <div class="tooltip_line semi-bold">';
-
-            echo '  <span class="line semi-bold">';
             echo        $lang['managers'].':';
-            if ($d->checkDostopAktiven()) 
+            if ($d->checkDostopAktiven())
-                echo '      (<a href="index.php?anketa=' . $this->anketa . '&a=dostop">' . $lang['srv_add_edit'] . '</a>)';
+                echo $lang['managers'].' (<a href="index.php?anketa=' . $this->anketa . '&a=dostop">' . $lang['srv_add_edit'] . '</a>):';
-            echo '  </span>';
+            else
+                echo $lang['managers'].':';
+            echo '  </div>';
 
             foreach ($users[1] AS $user) {
-                echo '  <span class="line">';
+                echo '  <div class="tooltip_line">';
                 echo        $user['email'];
-                echo '  </span>';
+                echo '  </div>';
             }
-
-            echo '</div>';
         }
 
 
-        echo '<div class="block">';
+        echo '  <div class="tooltip_line semi-bold">';
-
-        echo '  <span class="line semi-bold">';
         echo        $lang['srv_request_help_txt3'].' '.Help::display('help-centre');
-        echo '  </span>';
+        echo '  </div>';
 
-        echo '  <span class="line">';
+        echo '  <div class="tooltip_line">';
         if ($users[0] !== false) {
-            echo $lang['srv_request_help_txt4'] . ' ' . date('j.n.Y', strtotime($users[0])) . ' (<a href="#" onclick="dostop_admin(1); return false;">' . $lang['hour_remove'] . '</a>)';
+            echo '      <input type="checkbox" id="add_dostop_admin" checked="checked" onclick="dostop_admin(1); return false;">';
+            echo '      <label for="add_dostop_admin">'.$lang['srv_dostop_admin'].'</label>';
+            //echo $lang['srv_request_help_txt4'] . ' ' . date('j.n.Y', strtotime($users[0])) . ' (<a href="#" onclick="dostop_admin(1); return false;">' . $lang['hour_remove'] . '</a>)';
         } 
         else {
-            echo '<a href="#" onclick="dostop_admin(); return false;">' . $lang['srv_dostop_admin'] . '</a>';
+            echo '      <input type="checkbox" id="add_dostop_admin" onclick="dostop_admin(); return false;">';
+            echo '      <label for="add_dostop_admin">'.$lang['srv_dostop_admin'].'</label>';
+            //echo '<a href="#" onclick="dostop_admin(); return false;">' . $lang['srv_dostop_admin'] . '</a>';
         }
-        echo '  </span>';
+        echo '  </div>';
+
 
         echo '</div>';
     }
 
-    function displaySecondNavigationLinks($navigation = 0)
+    // Tooltip "aktivnost ankete"
-    {
+    public function tooltip_survey_activity(){
+        global $lang;
+
+        $row = SurveyInfo::getInstance()->getSurveyRow();
+
+        echo '<div class="expanded-tooltip-box">';
+
+        // Aktivna
+        if($row['active'] == 1){
+            echo '  <h1><span class="faicon info"></span>'.$lang['srv_anketa_active2'].'</h1>';
+            echo '  <div class="tooltip_line">'.$lang['srv_anketa_active2_text'].'</div>';
+        }
+        // Ni aktivna
+        else{
+            echo '  <h1><span class="faicon info"></span>'.$lang['srv_anketa_noactive2'].'</h1>';
+            echo '  <div class="tooltip_line">'.$lang['srv_anketa_noactive2_text'].'</div>';
+        }
+
+        echo '</div>';
+    }
+
+    // Tooltip "zaklenjena/odklenjena anketa"
+    public function tooltip_survey_locked(){
+        global $lang;
+
+        $row = SurveyInfo::getInstance()->getSurveyRow();
+
+        echo '<div class="expanded-tooltip-box">';
+
+        // Zaklenjena
+        if($row['locked'] == 1){
+            echo '  <h1><span class="faicon info"></span>'.$lang['srv_anketa_locked'].'</h1>';
+            echo '  <div class="tooltip_line">'.$lang['srv_anketa_locked_text'].'</div>';
+        }
+        // Ni zaklenjena
+        else{
+            echo '  <h1><span class="faicon info"></span>'.$lang['srv_anketa_unlocked'].'</h1>';
+            echo '  <div class="tooltip_line">'.$lang['srv_anketa_unlocked_text'].'</div>';
+        }
+
+        echo '</div>';
+    }
+
+    // Tooltip "testni vnos"
+    public function tooltip_test_data(){
+        global $lang;
+
+        $row = SurveyInfo::getInstance()->getSurveyRow();
+
+        echo '<div class="expanded-tooltip-box">';
+
+        echo '  <h1><span class="faicon info"></span>'.$lang['srv_survey_testdata'].'</h1>';
+        echo '  <div class="tooltip_line">'.$lang['srv_testdata_text'].'</div>';        
+
+        echo '</div>';
+    }
+
+    // Tooltip "predogled anekte"
+    public function tooltip_preview_data(){
+        global $lang;
+
+        $row = SurveyInfo::getInstance()->getSurveyRow();
+        $link = SurveyInfo::getSurveyLink();
+
+        echo '<div class="expanded-tooltip-box">';
+
+        echo '  <h1><span class="faicon monitor"></span>'.$lang['srv_poglejanketo2'].'</h1>';
+
+        echo '  <div class="tooltip_line">'.$lang['srv_monitor_toolbox_preview'].'</div>';
+
+
+        echo '  <div class="tooltip_device">';
+
+        // Ce imamo izklopljene mobilne prilagoditve ne pustimo preview-ja na mobile, ker itak ne prikaze scalano
+        $mobile_friendly = SurveySetting::getInstance()->getSurveyMiscSetting('mobile_friendly');
+        if($mobile_friendly != '0'){ 
+
+            echo '<div class="item">';
+            echo '  <a href="' . $link . '&preview=on'.$preview_options.'" title="'.$lang['srv_preview_computer'].'" target="_blank"><span class="faicon monitor"></span>'.$lang['srv_preview_computer'].'</a>';
+            echo '</div>';
+
+            echo '<div class="item separator"></div>';
+            
+            echo '<div class="item expand">';
+            echo '  <a href="' . $link . '&preview=on&mobile=1'.$preview_options.'" title="'.$lang['srv_preview_mobile'].'" target="_blank"><span class="faicon mobile"></span>'.$lang['srv_preview_mobile'].'</a>';
+            echo '</div>';
+
+            echo '<div class="item separator"></div>';
+
+            echo '<div class="item">';
+            echo '  <a href="' . $link . '&preview=on&mobile=2'.$preview_options.'" title="'.$lang['srv_preview_tablet'].'" target="_blank"><span class="faicon tablet"></span>'.$lang['srv_preview_tablet'].'</a>';
+            echo '</div>';
+        }
+        else{
+            echo '<div class="item">';
+            echo '  <a href="' . $link . '&preview=on'.$preview_options.'" title="'.$lang['srv_preview_computer'].'" target="_blank"><span class="faicon monitor"></span>'.$lang['srv_preview_computer'].'</a>';
+            echo '</div>';
+        }        
+
+        echo '</div>';
+        
+        
+        echo '</div>';
+    }
+
+
+    function displaySecondNavigationLinks($navigation = 0){
         global $lang, $site_url;
         global $global_user_id;
 
@@ -5832,7 +5932,7 @@ class SurveyAdmin
         
 
         // URL ankete
-        echo '<div class="anketa_header_url setting_box">';
+        echo '<div class="anketa_header_url setting_box tooltip">';
 
         if ($row['active'] == 1 && !SurveyInfo::getInstance()->checkSurveyModule('hierarhija')) {
             echo '<a href="' . $link . '" title="' . $lang['srv_urlankete'] . '" target="_blank">'.$link.'</a>';
@@ -5845,6 +5945,10 @@ class SurveyAdmin
             echo '<span>'.$link.'</span>';
         }
 
+        echo '<div class="expanded-tooltip bottom" id="survey_activity_content">';
+        $this->tooltip_survey_activity();
+        echo '</div>';
+
         echo '</div>';
 
 
@@ -5852,7 +5956,7 @@ class SurveyAdmin
         $d = new Dostop();
         if ($d->checkDostopAktiven()) {
 
-            echo '<div class="anketa_header_activate setting_box">';
+            echo '<div class="anketa_header_activate setting_box tooltip">';
 
             if (SurveyInfo::getSurveyColumn('active') == 1) {
                 
@@ -5901,11 +6005,15 @@ class SurveyAdmin
                 echo '</a>';
             }
 
+            echo '<div class="expanded-tooltip bottom" id="survey_activity2_content">';
+            $this->tooltip_survey_activity();
+            echo '</div>';
+
             echo '</div>';
 
 
             // Ikona kljucavnice
-            echo '<div class="anketa_header_lock setting_box">';
+            echo '<div class="anketa_header_lock setting_box tooltip">';
 
             // Ce ima uporabnik prepreceno moznost odklepanja ankete, anketo ima vedno zaklenjeno če je vklopljena hierarhija
             $prevent_unlock = (SurveyInfo::getSurveyModules('hierarhija') == 2 || $d->checkDostopSub('lock') && $row['locked'] == 1 && ($admin_type != 0 && $admin_type != 1)) ? 1 : 0;
@@ -5927,6 +6035,10 @@ class SurveyAdmin
                 echo '</a>';
             }
 
+            echo '<div class="expanded-tooltip bottom" id="survey_locked_content">';
+            $this->tooltip_survey_locked();
+            echo '</div>';
+
             echo '</div>';
         }
 
@@ -5934,15 +6046,27 @@ class SurveyAdmin
         // Testiranje (ikona monitor s "T") - v formi in glasovanju nimamo testnih vnosov
         if ($this->survey_type != 0 && $this->survey_type != 1) {
 
-            echo '<div class="anketa_header_test setting_box">';
+            echo '<div class="anketa_header_test setting_box tooltip">';
+
             echo '  <a href="' . $link . '&preview=on&testdata=on' . $preview_options . '" title="'.$lang['srv_survey_testdata'].'" target="_blank"><span class="faicon monitor"></span></a> ';
+            
+            echo '  <div class="expanded-tooltip bottom" id="test_data_content">';
+            $this->tooltip_test_data();
+            echo '  </div>';
+            
             echo '</div>';
         }
         
         
         // Predogled in testiranje (ikona monitor)
-        echo '<div class="anketa_header_preview setting_box">';
+        echo '<div class="anketa_header_preview setting_box tooltip">';
+
         echo '  <a href="' . $link . '&preview=on' . $preview_options . '" target="_blank" title="'.$lang['srv_monitor_toolbox_title'].'"><span class="faicon monitor"></span><span class="text">'.$lang['srv_poglejanketo2'].'</span></a> ';
+       
+        echo '  <div class="expanded-tooltip bottom" id="preview_data_content">';
+        $this->tooltip_preview_data();
+        echo '  </div>';
+       
         echo '</div>';
     }
 

admin/survey/SurveyAdminAjax.php

@@ -5824,7 +5824,7 @@ class SurveyAdminAjax {
 		
 		SurveyInfo::getInstance()->resetSurveyData();
 		
-		$this->SurveyAdmin->request_help_content();
+		$this->SurveyAdmin->tooltip_request_help();
 	}
 
 	

lang/1.php

@@ -1899,7 +1899,9 @@ $lang = array (
 	"srv_anketa_active"				=>	"Anketa je aktivna. V aktivno anketo se odgovori na vprašanja shranjujejo.",
 	"srv_anketa_delete"				=>	"Izbriši anketo.",
 	"srv_anketa_noactive2"			=>	"Anketa ni aktivna",
+	"srv_anketa_noactive2_text"     =>	"Anketa še ni aktivna. Zbirate lahko samo testne podatke. Če želite za anketo zbirati realne podatke, jo lahko aktivirate v zavihku 'Objava' ali s klikom na stikalo 'OFF'.",
 	"srv_anketa_active2"			=>	"Anketa je aktivna",
+	"srv_anketa_active2_text"       =>	"Anketa je aktivna. Zbirate lahko realne podatke. V zavihku 'Objava' izberite način posredovanja ankete respondentom.",
 	"srv_anketa_is_active"			=>	"AKTIVNA",
 	"srv_anketa_is_not_active"		=>	"NEAKTIVNA",
 	"srv_anketa_is_finished"		=>	"ZAKLJUČENA",
@@ -4663,6 +4665,10 @@ $lang = array (
 	"srv_change_default_profile"				=> 	"Privzetega profila ne morete spreminjati. Lahko pa kreirate nov profil.",
 	"srv_anketa_locked_1"						=> 	"Anketa je zaklenjena. Zaklenjene ankete se ne da urejati.",
 	"srv_anketa_locked_0"						=> 	"Anketa je odklenjena. Odklenjeno anketo se lahko normalno ureja.",
+	"srv_anketa_locked"	    					=> 	"Anketa je zaklenjena",
+	"srv_anketa_locked_text"	    			=> 	"Zaklenjene ankete se ne da urejati.",
+	"srv_anketa_unlocked"    					=> 	"Anketa je odklenjena",
+	"srv_anketa_unlocked_text"    			    => 	"Odklenjeno anketo se lahko normalno ureja.",
 	"srv_captcha_edit"							=> 	"Vpis CAPTCHA kode",
 	"srv_captcha_edit_note"						=> 	"Ne pozabite izbrati trdega opozorila za vprašanje!",
 	"srv_signature_edit"						=> 	"Elektronski podpis",
@@ -6866,13 +6872,14 @@ $lang = array (
 	'srv_zanka_settings'						=>	'Nastavitve skupin',
 	'srv_missing_settings'						=>	'Nastavitve manjkajočih vrednosti',
 	'srv_preview'								=>	'Predogled',
-	'srv_preview_mobile'						=>	'Mobilnik',
+	'srv_preview_computer'						=>	'Računalnik',
+	'srv_preview_mobile'						=>	'Mobitel',
 	'srv_preview_tablet'						=>	'Tablica',
 	'srv_all_vars'								=>	'Vse variable',
 	'srv_default_without'						=>	'Privzeto - brez',
 	'srv_survey_info'							=>	'Podatki o anketi',
 	'srv_monitor_toolbox_title'					=>	'Predogled ankete',
-	'srv_monitor_toolbox_preview'				=>	'brez komentarjev in shranjevanja vnosov',
+	'srv_monitor_toolbox_preview'				=>	'Predogled brez komentiranja in shranjevanja vnosov.',
 	'srv_monitor_toolbox_test'					=>	'možnost komentiranja, shranjevanje testnih vnosov',
 	'sort_by_title'								=>	'Naslov ankete',
 	'sort_by_qcount'							=>	'Število vprašanj',

lang/2.php

@@ -1893,6 +1893,8 @@ $lang = array (
 	"srv_anketa_title_edit"			=>	"Change survey name",
 	"srv_anketa_noactive2"			=>	"Survey is not active",
 	"srv_anketa_active2"			=>	"Survey is active",
+    "srv_anketa_noactive2_text"     =>	"Survey is not active. You can collect only test data. If you want to collect real data, you can activate survey in tab 'Publish' or by clicking switch 'OFF'.",
+	"srv_anketa_active2_text"       =>	"Survey is active. You can collect real data. In tab 'Publish' you can choose the method of distributing the survey to the respondents.",
 	"srv_anketa_is_active"			=>	"ACTIVE",
 	"srv_anketa_is_not_active"		=>	"NOT ACTIVE",
 	"srv_anketa_is_finished"		=>	"FINISHED",
@@ -4635,6 +4637,10 @@ $lang = array (
 	"srv_change_default_profile"				=> 	"The default profile cannot be changed. Create a new profile.",
 	"srv_anketa_locked_1"						=> 	"Survey is locked. You cannot edit locked survey.",
 	"srv_anketa_locked_0"						=> 	"Survey is not locked. You can edit this survey normally.",
+    "srv_anketa_locked"	    					=> 	"Survey is locked",
+	"srv_anketa_locked_text"	    			=> 	"You cannot edit locked survey.",
+	"srv_anketa_unlocked"    					=> 	"Survey is not locked",
+	"srv_anketa_unlocked_text"    			    => 	"You can edit this survey normally.",
 	"srv_captcha_edit"							=> 	"CAPTCHA code",
 	"srv_captcha_edit_note"						=> 	"Remember to select hard reminder!",
 	"srv_signature_edit"						=> 	"Signature",	
@@ -6749,13 +6755,14 @@ $lang = array (
 	'srv_zanka_settings'						=>	'Group settings',
 	'srv_missing_settings'						=>	'Settings for missing values',
 	'srv_preview'								=>	'Preview',
+	'srv_preview_computer'						=>	'Computer',
 	'srv_preview_mobile'						=>	'Mobile',
 	'srv_preview_tablet'						=>	'Tablet',
 	'srv_all_vars'								=>	'All variables',
 	'srv_default_without'						=>	'Default - without',
 	'srv_survey_info'							=>	'Survey info',
 	'srv_monitor_toolbox_title'					=>	'Preview survey',
-	'srv_monitor_toolbox_preview'				=>	'without comments and data saving',
+	'srv_monitor_toolbox_preview'				=>	'Preview without comments and data saving.',
 	'srv_monitor_toolbox_test'					=>	'adding comments, saving test data',
 	'sort_by_title'								=>	'Survey title',
 	'sort_by_qcount'							=>	'Variable count',

resources/sass/admin_new/basic/icons/standard.scss

@@ -197,6 +197,12 @@ span.faicon.logout::before{
 .faicon.monitor::before{
         content: "\f108";
 }
+.faicon.mobile::before{
+    content: "\f3cd";
+}
+.faicon.tablet::before{
+    content: "\f3fa";
+}
 span.faicon.users::before{
         content: "\f500";
 }

resources/sass/admin_new/components/header/navigation.scss

@@ -313,7 +313,9 @@ header{
                 width: auto;
                 padding: 0 32px;
 
-                border-left: 1px $gray solid;
+                &.borderLeft{
+                    border-left: 1px $gray solid;
+                }
 
                 label{
                     font-size: 14px;
@@ -437,6 +439,10 @@ header{
                     }
                 }
             }
+
+            #toggleDataCheckboxes{
+                cursor: pointer;
+            }
         }
 
 

resources/sass/admin_new/components/header/top_line.scss

@@ -136,7 +136,7 @@ header #top_line{
             .anketa_header_test{
                 position: relative;
 
-                .faicon{
+                a .faicon{
                     
                     &:after{
                         content: "T";
@@ -385,22 +385,4 @@ header #top_line{
         }
         
     }
-
-    /*tooltips on survey*/
-    .tooltip {
-        position: relative;
-        .expanded-tooltip {
-            display: none;
-            white-space: normal;
-        }
-        &:hover {
-            .expanded-tooltip {
-                display: block;
-            }
-        }
-    }
-    .tooltip.monitor {
-        cursor: pointer;
-    }
-
 }

resources/sass/admin_new/components/hover/qtip.scss

@@ -150,42 +150,137 @@
 }
 
 
-/* toostip popups */
+/* tooltip popups */
-.expanded-tooltip {
+.tooltip {
-    @include hover_basic();
+    position: relative;
-
-	z-index: 99999;
-    position: absolute;
-	top: -45px;
-	left: -25px;
     
-	display: block;
+    &:hover {
-	width: 200px;
+        .expanded-tooltip {
-    height: 29px;
+            display: block;
-	margin: 0;
+        }
-}
+    }
 
-.expanded-tooltip.bottom {
+    .expanded-tooltip {
-	top: 35px;
+        display: none;
-	left: -100px;
+        white-space: normal;
-	height: auto;
-}
 
-#request_help_content.expanded-tooltip{
+        z-index: 99999;
-	/*left: -85px;*/
+        position: absolute;
-}
+        top: 26px;
-
+        left: -1px;
-#tooltip_preview_content.expanded-tooltip{
-	/*left: -90px;*/
-}
-
-#baseSurveyInfoImg {
-	.expanded-tooltip {
-		width: 400px;
-		left: -38px;
         
-        span.arrow {
+        width: 307px;
-			left: 12%;
+        height: auto;
-		}
+        margin: 0;
-	}
+
+        .expanded-tooltip-box{
+            @include hover_basic();
+
+            margin-top: 14px;
+            padding: 12px;
+
+            border-radius: 2px;
+            border: 1px $gray solid;
+
+            // Puscica
+            &:before {
+                content: "";
+                
+                position: absolute;
+                top: 6px;
+                left: 20px;
+                width: 15px;
+                height: 15px;
+                
+                background-color: $white;
+                border: 1px solid;
+                border-color: $gray transparent transparent $gray;
+
+                -webkit-transform: rotate(45deg);
+                -moz-transform: rotate(45deg);
+                -ms-transform: rotate(45deg);
+                -o-transform: rotate(45deg);
+            }
+
+            h1{
+                margin: 0 0 12px 0;
+
+                font-weight: 600;
+                font-size: 14px;
+                text-transform: uppercase;
+
+                .faicon{
+                    padding: 0 !important;
+                    margin-right: 8px;
+
+                    &:before{
+                        font-size: 14px;
+                        color: $blue;
+                        vertical-align: unset !important;
+                    }
+                }
+            }
+
+            .tooltip_line{
+                margin-bottom: 10px;
+                padding: 0 !important;
+
+                line-height: 18px;
+                font-size: 14px;
+                
+                &:last-child{
+                    margin-bottom: 0;
+                }
+                
+                a,
+                label{
+                    padding: 0 !important;
+
+                    font-size: 14px;
+                    line-height: 18px !important;
+                }
+            }
+
+            .tooltip_device{
+                display: flex;
+                justify-content: space-between;
+
+                .item{
+                    
+                    &.separator{
+                        height: 24px;
+                        width: 1px;
+
+                        border-right: 1px $gray solid;
+                    }
+
+                    a{
+                        display: flex;
+                        justify-content: flex-start;
+
+                        padding: 0 !important;
+
+                        .faicon:before{
+                            margin-right: 8px;
+
+                            font-size: 14px;
+                        }
+
+                        &:last-child{
+                            margin-right: 0px;
+                            padding-right: 0px;
+
+                            border-right: 0;
+                        }
+                    }
+                }
+            }
+        }
+
+        &#request_help_content,
+        &#test_data_content,
+        &#survey_locked_content{
+            left: -16px;
+        }
+    } 
 }