Redesign - knjiznica - V DELU

admin/survey/Branching.php

@@ -317,9 +317,6 @@ class Branching {
 		if($this->survey_type != 0)
             $this->toolbox_basic2();
         
-		if ($row['toolbox'] >= 3)
-            $this->toolbox_library();
-        
 		echo '<script> $(function(){ init_toolbox(); }) </script>';
 
         // Predpregled tipa vprašanj
@@ -392,6 +389,9 @@ class Branching {
 				echo '</div>';
 			}
 
+            // Knjiznica
+            echo '<div class="toolbox_item open_lib" onClick="displayLibraryPopup();"><span class="item_icon faicon library"></span><span class="item_text">'.$lang['srv_library'].'</span></div>';
+
 			// normalna anketa
 			if ($this->survey_type != 1){
 
@@ -423,6 +423,9 @@ class Branching {
 				echo '</div>';
 			}
 
+            // Knjiznica
+            echo '<div class="toolbox_item open_lib" onClick="displayLibraryPopup();"><span class="item_icon faicon library"></span><span class="item_text">'.$lang['srv_library'].'</span></div>';
+
 			// normalna anketa
 			if ($this->survey_type != 1){
 
@@ -1537,34 +1540,6 @@ class Branching {
         echo '</div>'; // tip_preview
     }
 
-	/**
-	* prikaz knjiznice v toolboxu na levi strani
-	*
-	*/
-	function toolbox_library () {
-		global $lang;
-
-		$row = SurveyInfo::getInstance()->getSurveyRow();
-
-		echo '<div id="toolbox_library" class="library">';
-
-		if ($row['locked'] == 1) {
-
-			echo '<p>';
-			echo '<span class="sprites lock_close"></span> '.$lang['srv_anketa_locked_1'];
-			echo '</p>';
-
-		} else {
-
-			echo '<div id="library_holder">';
-			$l = new Library();
-			$l->display();
-			echo '</div>';
-		}
-
-		echo '</div>';
-	}
-
 	/**
     * hitre nastavitve - na dnu pri formi
     *

admin/survey/SurveyAdmin.php

@@ -415,7 +415,10 @@ class SurveyAdmin
 
 
         // Generičen popup
-        echo '<div id="popup_note" class="divPopUp"></div>';
+        echo '<div id="general_popup" class="divPopUp"></div>';
+
+        // Knjiznica popup
+        echo '<div id="library_popup" class="divPopUp"></div>';
 
         // urejanje calculation-ov
         echo '<div id="calculation" class="divPopUp"></div>';
@@ -3934,24 +3937,10 @@ class SurveyAdmin
         $userAccess = UserAccess::getInstance($global_user_id);
 
         if ($navigation == 0) {
+            
             # stran status (reporti) ali urejanje
             if ($this->first_action == NAVI_UREJANJE || $_GET['a'] == '' || $_GET['a'] == A_REPORTI) {
 				
-                if ($_GET['a'] == '' || $_GET['a'] == 'branching') {
-					
-                    if ($row['toolbox'] <= 2) {
-                        $row['toolbox'] == 1 ? $preklop = 3 : $preklop = 4;
-                        echo '<a href="#" title="' . $lang['srv_library'] . '" class="srv_ico" onclick="change_mode(\'toolbox\', \'' . $preklop . '\'); return false;">';
-                        echo '<span class="faicon library"></span>';
-                        echo '</a>';
-                    } else {
-                        $row['toolbox'] == 3 ? $preklop = 1 : $preklop = 2;
-                        echo '<a href="#" title="' . $lang['srv_library'] . '" class="srv_ico" onclick="if ( $(\'#toolbox_library\').css(\'display\') == \'none\' ) { close_all_editing(); $(\'#toolbox_library\').show(); } else { change_mode(\'toolboxback\', \'' . $preklop . '\'); } return false;">';
-                        echo '<span class="faicon library"></span>';
-                        echo '</a>';
-                    }
-                }
-				
                 $p = new Prevajanje($this->anketa);
                 global $lang1;
 

admin/survey/SurveyAdminAjax.php

@@ -6257,7 +6257,7 @@ class SurveyAdminAjax {
                 
 
         // Vsebina popupa
-        echo '<div class="popup_close"><a href="#" onClick="dostopAddAccessPopupClose(); return false;">✕</a></div>';
+        echo '<div class="popup_close"><a href="#" onClick="popupClose(); return false;">✕</a></div>';
 			
         echo '<h2>'.$lang['srv_dostop_addusers'].'</h2>';
 
@@ -6374,7 +6374,7 @@ class SurveyAdminAjax {
         echo '</div>';
 
         echo '<div class="buttons_holder">';
-        echo '<span class="buttonwrapper floatRight" title="'.$lang['srv_zapri'].'"><a class="ovalbutton ovalbutton_gray" href="#" onclick="dostopAddAccessPopupClose(); return false;"><span>'.$lang['srv_zapri'].'</span></a></span>';
+        echo '<span class="buttonwrapper floatRight" title="'.$lang['srv_zapri'].'"><a class="ovalbutton ovalbutton_gray" href="#" onclick="popupClose(); return false;"><span>'.$lang['srv_zapri'].'</span></a></span>';
         echo '</div>';
 	}
 
@@ -6432,7 +6432,7 @@ class SurveyAdminAjax {
 			
 
 	// Vsebina popupa
-	echo '<div class="popup_close"><a href="#" onClick="AlertAllPopupClose(); return false;">✕</a></div>';
+	echo '<div class="popup_close"><a href="#" onClick="popupClose(); return false;">✕</a></div>';
 		
 	echo '<h2>'.$lang['srv_'.$alert_type.'_reminder_all'].'</h2>';
 	
@@ -6442,7 +6442,7 @@ class SurveyAdminAjax {
 
 	echo '<div class="buttons_holder">';
 	echo '<span class="buttonwrapper floatRight" style="margin:3px" title="'.$lang['srv_zapri']
-	.'"><a class="ovalbutton ovalbutton_gray" href="#" onclick="AlertAllPopupClose(); return false;"><span>'
+	.'"><a class="ovalbutton ovalbutton_gray" href="#" onclick="popupClose(); return false;"><span>'
 	.$lang['srv_zapri'].'</span></a></span>';
 	echo '<span class="buttonwrapper floatRight" style="margin:3px" title="'.$lang['srv_tip_sample_t6_8_o2']
 	.'"><a class="ovalbutton ovalbutton_gray" href="ajax.php?a=reminder_all&what='.$alert_type.'&anketa='.$this->anketa.'"><span>'

admin/survey/ajax.php

@@ -502,6 +502,10 @@ elseif ($_GET['t'] == 'library') {
     $l = new Library();
     $l->ajax();
 } 
+elseif ($_GET['t'] == 'libraryBranching') {
+    $lb = new LibraryBranching();
+    $lb->ajax();
+} 
 elseif ($_GET['t'] == 'help') {
     $h = new Help();
     $h->ajax();

admin/survey/script/branching.js

@@ -60,6 +60,7 @@ function onload_init_branching() {
 
     // funkcijo poklicemo ko se stran naloada in ob koncu vsakega ajax klica
     branching_struktura();
+    
     $("body").ajaxStop(function () {
         branching_struktura();
     });
@@ -1163,9 +1164,8 @@ function vrednost_condition_editing(vrednost) {
 }
 
 function condition_editing(_if, odpreminus) {
+    
     close_all_editing();
-    // zapremo knjiznico
-    $('#toolbox_library').hide();
 
     $('li#branching_if' + _if).addClass('if_editing');
     $('ul#if_' + _if).addClass('if_editing');

admin/survey/script/invitations.js

@@ -1621,16 +1621,15 @@ function noEmailingType(value){
 function smtpAAIPopupShow(){
 	
     $('#fade').fadeTo('slow', 1);
-	$('#popup_note').html('').fadeIn('slow');
+	$('#general_popup').html('').fadeIn('slow');
-	$("#popup_note").load('ajax.php?t=invitations&a=showAAISmtpPopup', {anketa: srv_meta_anketa_id, noNavi:'true'});
+	$("#general_popup").load('ajax.php?t=invitations&a=showAAISmtpPopup', {anketa: srv_meta_anketa_id, noNavi:'true'});
 }
 function smtpAAIPopupClose(){
 	
     // Ni sprejel - vrnemo radio
     $('input[name=SMTPMailMode][value=2]').prop('checked', true);
 
-    $('#popup_note').fadeOut('slow').html('');
+    popupClose();
-	$('#fade').fadeOut('slow');
 }
 function smtpAAISet(){
 	

admin/survey/script/library.js

@@ -254,3 +254,53 @@ function check_library () {
 	
 }
 
+
+
+// Odpremo knjiznico v urejanju ankete
+function displayLibraryPopup(){
+
+    $('#fade').fadeTo('slow', 1);
+	$('#general_popup').html('').fadeIn('slow');
+
+	$("#general_popup").load('ajax.php?t=libraryBranching&a=displayLibraryPopup', {anketa: srv_meta_anketa_id});
+}
+
+// Preklop med tabi
+function displayLibraryTab(tab){
+
+    if(tab == 1){
+        $('#tab_0').removeClass('active');
+        $('#tab_1').addClass('active');
+    }
+    else{
+        $('#tab_1').removeClass('active');
+        $('#tab_0').addClass('active');
+    }
+
+    $("#tab_content").load('ajax.php?t=libraryBranching&a=displayLibraryTabContent', {anketa: srv_meta_anketa_id, tab: tab});
+}
+
+// Odpremo folder - na desni prikazemo vprasanja
+function openLibraryFolder(folder_id){
+
+    $('.folder_item').removeClass('active');
+    $('#folder_item_'+folder_id).addClass('active');
+
+    $("#lib_question_list").load('ajax.php?t=libraryBranching&a=displayLibraryQuestionList', {anketa: srv_meta_anketa_id, folder_id: folder_id});
+}
+
+// Razpremo/skrcimo folder na levi
+function expandLibraryFolder(folder_id){
+
+}
+
+// Odpremo popup za dodajanje itema v knjiznico v urejanju ankete
+function displayAddIntoLibraryPopup(){
+
+    $('#fade').fadeTo('slow', 1);
+	$('#general_popup').html('').fadeIn('slow');
+
+	$("#general_popup").load('ajax.php?t=libraryBranching&a=displayAddIntoLibraryPopup', {anketa: srv_meta_anketa_id});
+}
+
+

admin/survey/script/script.js

@@ -2560,7 +2560,6 @@ function show_tip_preview_toolbox (tip, copy, advanced, podtip) {
 			$("#tip_preview").css( { "right": ($(window).width()-cnt.left) + "px", "left":"auto", "top":(10+pos.top) + "px" } );
 		else
 			$("#tip_preview").css( { "right": ($(window).width()-cnt.left) + "px", "left":"auto", "top":(10+pos.top) + "px" } );
-			//$("#tip_preview").css( { "left": (10+pos.left + width) + "px", "right":"auto", "top":(10+pos.top) + "px" } );
 
 		// prikažemo glavni div
 		$("#tip_preview").show();
@@ -3980,17 +3979,13 @@ function dostopAddAccess () {
     
     // Popup z rezultatom (uspesno ali neuspesno dodajanje dostopa)
     $('#fade').fadeTo('slow', 1);
-    $('#popup_note').html('').fadeIn('slow');
+    $('#general_popup').html('').fadeIn('slow');
-    $("#popup_note").load('ajax.php?a=add_survey_dostop_popup', {addusers:addusers, addusers_note:addusers_note, anketa:srv_meta_anketa_id}, function(){
+    $("#general_popup").load('ajax.php?a=add_survey_dostop_popup', {addusers:addusers, addusers_note:addusers_note, anketa:srv_meta_anketa_id}, function(){
 
         // Refresh vsebine v ozadju
         $("#globalSetingsList").load('ajax.php?a=refresh_dostop_settings', {anketa:srv_meta_anketa_id});
     });
 }
-function dostopAddAccessPopupClose(){   
-    $('#popup_note').fadeOut('slow').html('');
-    $('#fade').fadeOut('slow');
-}
 
 function comments_admin_toggle (type) {
 	if ( $('#comments_admin'+type).attr('admin_on') == 'true' ) {
@@ -5444,13 +5439,8 @@ $(document).ready(function(){
 function consultingPopupOpen(){
 	
     $('#fade').fadeTo('slow', 1);
-	$('#popup_note').html('').fadeIn('slow');
+	$('#general_popup').html('').fadeIn('slow');
-	$("#popup_note").load('ajax.php?a=consulting_popup_open', {anketa: srv_meta_anketa_id});
+	$("#general_popup").load('ajax.php?a=consulting_popup_open', {anketa: srv_meta_anketa_id});
-}
-function consultingPopupClose(){
-	
-    $('#popup_note').fadeOut('slow').html('');
-	$('#fade').fadeOut('slow');
 }
 
 
@@ -5470,14 +5460,10 @@ function CopyToClipboard(copyText){
 function popupAlertAll(alert_type){
 
     $('#fade').fadeTo('slow', 1);
-    $('#popup_note').html('').fadeIn('slow');
+    $('#general_popup').html('').fadeIn('slow');
-    $("#popup_note").load('ajax.php?a=alert_all_popup', {alert_type:alert_type, anketa:srv_meta_anketa_id});
+    $("#general_popup").load('ajax.php?a=alert_all_popup', {alert_type:alert_type, anketa:srv_meta_anketa_id});
 }
 
-function AlertAllPopupClose(){   
-    $('#popup_note').fadeOut('slow').html('');
-    $('#fade').fadeOut('slow');
-}
 
 //Generičen alert popup
 function genericAlertPopup(name, optional_parameter){
@@ -5487,15 +5473,14 @@ function genericAlertPopup(name, optional_parameter){
 	}
 
     $('#fade').fadeTo('slow', 1);
-	$('#popup_note').addClass('popup_orange');
+	$('#general_popup').addClass('popup_orange');
-    $('#popup_note').html('').fadeIn('slow');
+    $('#general_popup').html('').fadeIn('slow');
-    $("#popup_note").load('ajax.php?a=genericAlertPopup', {name:name, optional_parameter:optional_parameter});
+    $("#general_popup").load('ajax.php?a=genericAlertPopup', {name:name, optional_parameter:optional_parameter});
 }
 
 function genericAlertPopupClose(){
-    $('#popup_note').fadeOut('slow').html('');
+    popupClose();
-    $('#fade').fadeOut('slow');
+	$('#general_popup').removeClass('popup_orange');
-	$('#popup_note').removeClass('popup_orange');
 }
 
 //Toggle za prikaz nastavitev in opozoril v parapodatkih
@@ -5528,7 +5513,10 @@ function toggleParapodatki(){
 	
 	else
 	$("#connect_identifier_warning").addClass('displayNone');  
-
+}
-
+
-        
+
+function popupClose(){   
+    $('#general_popup').fadeOut('slow').html('');
+    $('#fade').fadeOut('slow');
 }

admin/survey/script/vprasanje.js

@@ -26,9 +26,6 @@ function vprasanje_fullscreen (spremenljivka, cache, chart_edit, no_close) {
 	if ( ! (no_close==true) )
 		close_all_editing();
 		
-	// zapremo knjiznico
-	$('#toolbox_library').hide();
-	
 	// ce smo v formi zapremo hitre nastavitve desno zgoraj
 	$('#form_settings_obvescanje').hide();
     $('#email_switch').attr("src", "img_0/plus.png");
@@ -184,9 +181,6 @@ function vprasanje_save (silentsave, spr, callback) {
         $('#vprasanje_float_editing').hide().html('');
         
 		$(id).removeClass('spr_editing');
-		
-		// prikazemo knjiznico ce je odprta
-		$('#toolbox_library').show();
 	}
 	
 	$.post('ajax.php?t=vprasanje&a=vprasanje_save&silentsave='+silentsave, form_serialize, function (data) {

lang/1.php

@@ -2366,6 +2366,8 @@ $lang = array (
 	"srv_concl_link_recnum"	=>	 "Recnum responedenta",
 	"srv_concl_link_datapiping"	=>	 "V url lahko vključite tudi vrednosti odgovorov s sintakso <b>#IME_VPRAŠANJA#</b><br />(npr. https://www.1ka.si?q1=#Q1#)",
     "srv_library"           =>	 "Knji&#382;nica",
+    "srv_library_survey_title"  =>	 "Knjižnica vprašanj",
+    "srv_library_survey_add"    =>	 "Dodaj v anketo",
     "srv_nadzor"            =>	 "Nadzor",
     "srv_knjiznica_add"     =>	 "&#268;e &#382;elite dodati spremenljivko v knji&#382;nico, jo povlecite v to polje",
     "srv_knjiznica_copy"    =>	 "&#268;e &#382;elite kopirati vpra&#154;anje, ga ozna&#269;ite z ikono COPY",

lang/2.php

@@ -2351,6 +2351,8 @@ $lang = array (
 	"srv_concl_link_recnum"	=>	 "Respondent recnum",
 	"srv_concl_link_datapiping"	=>	 "URL can also contain values of responded questions with sintax <b>#QUESTION_NAME#</b><br />(e.g. https://www.1ka.si?q1=#Q1#)",
     "srv_library"           =>  "Library",
+    "srv_library_survey_title"  =>	 "Questions library",
+    "srv_library_survey_add"    =>	 "Add to survey",
     "srv_nadzor"            =>  "Supervise",
     "srv_knjiznica_add"     =>  "To add a question to a library, drag it to this field",
     "srv_knjiznica_copy"    =>  "To copy a question, click on COPY icon",

public/css/admin_new.css

@@ -6005,6 +6005,12 @@ span.faicon.dots::before {
   font-weight: 600;
 }
 
+span.faicon.dots_ver:before {
+  content: "";
+  font-size: 16px;
+  font-weight: 600;
+}
+
 span.faicon.open_icon::before {
   content: "";
 }
@@ -6013,6 +6019,10 @@ span.faicon.table_icon::before {
   content: "";
 }
 
+span.faicon.list::before {
+  content: "";
+}
+
 /*
 To change this license header, choose License Headers in Project Properties.
 To change this template file, choose Tools | Templates
@@ -13157,193 +13167,105 @@ and open the template in the editor.
 }
 
 /*
-To change this license header, choose License Headers in Project Properties.
+    Knjiznica v urejanju ankete
-To change this template file, choose Tools | Templates
-and open the template in the editor.
 */
-/* 
+.lib_tabs {
-    Created on : 20-Aug-2018, 11:24:57
+  display: flex;
-    Author     : podkrizniku
-*/
-#toolbox_library {
-  z-index: 0;
-  position: fixed;
-  top: 225px;
-  left: 35px;
-  width: 315px;
-  height: auto;
-  left: auto;
-  right: 30px;
-  color: #1E88E5;
-  background-color: white;
-  border: 0;
-  box-shadow: 0 0 31px 0 rgba(0, 0, 0, 0.07);
 }
-#toolbox_library #library_holder {
+.lib_tabs .tab {
-  background-color: #1E88E5;
+  cursor: pointer;
-  border: 1px #1E88E5 solid;
+  display: flex;
-}
+  align-items: center;
-#toolbox_library #library_holder #library_title {
+  justify-content: center;
-  padding: 10px;
-  font-size: 18px;
-  font-weight: bold;
-}
-#toolbox_library #library_holder #library_title span.library {
-  margin: 0 5px 2px 0;
-}
-#toolbox_library #library_holder p.display_tabs {
-  font-size: 14px;
-  font-weight: 500;
-  margin: 0;
-  padding: 0;
-}
-#toolbox_library #library_holder p.display_tabs > span {
   width: 50%;
-  box-sizing: border-box;
+  height: 40px;
-  display: inline-block;
+  margin-bottom: 16px;
-  padding: 7px 10px;
+  margin-top: -16px;
-  text-align: center;
+  background-color: #F8F8F8;
-  transition: 0.2s;
 }
-#toolbox_library #library_holder p.display_tabs span.highlightTabBlackLeft {
+.lib_tabs .tab.active {
-  background-color: white;
-}
-#toolbox_library #library_holder p.display_tabs span.highlightTabBlackLeft a {
   color: #1E88E5;
-}
+  background-color: #FFFFFF;
-#toolbox_library #library_holder p.display_tabs span.highlightTabBlackRight {
-  background-color: white;
-}
-#toolbox_library #library_holder p.display_tabs span.highlightTabBlackRight a {
-  color: #1E88E5;
-}
-#toolbox_library #library_holder p.display_tabs span.nohighlight:hover {
-  background-color: #2c8fe7;
-}
-#toolbox_library #library_holder p.display_tabs a {
-  display: block;
-  color: #1E88E5;
-}
-#toolbox_library #library_holder #library {
-  background-color: white;
-  height: 400px;
-  overflow-y: auto;
-  /* Ankete */
-}
-#toolbox_library #library_holder #library #libraryInner {
-  padding: 5px 10px;
-  bottom: 0;
-  overflow: auto;
-}
-#toolbox_library #library_holder #library .lib_tab {
-  width: auto;
-  cursor: pointer;
-}
-#toolbox_library #library_holder #library ul {
-  list-style: none;
-  margin: 0;
-  margin-top: 4px;
-  padding-left: 18px;
-}
-#toolbox_library #library_holder #library li .anketa.tip0 {
-  margin: 0;
-  padding-left: 14px;
-}
-#toolbox_library #library_holder #library li .anketa.tip1 {
-  margin: 0;
-  margin-left: -3px;
-}
-#toolbox_library #library_holder #library .new_folder {
-  visibility: hidden;
-}
-#toolbox_library #library_holder #library .delete_folder {
-  visibility: hidden;
-}
-#toolbox_library #library_holder #library span.folderdrop {
-  margin-bottom: 2px;
-}
-#toolbox_library #library_holder #library span.folderdrop:hover .new_folder {
-  visibility: visible;
-}
-#toolbox_library #library_holder #library span.folderdrop:hover .delete_folder {
-  visibility: visible;
-}
-#toolbox_library #library_holder #library span.faicon.folder {
-  vertical-align: 3px;
-  margin-right: 3px;
-}
-#toolbox_library #library_holder #library span.faicon.folder::before {
-  font-size: 20px;
-}
-#toolbox_library #library_holder #library .tip0 .folder_container {
-  display: block;
-  height: auto;
-  overflow: hidden;
-  padding: 1px 3px;
-}
-#toolbox_library #library_holder #library .tip1 {
-  padding-left: 10px;
-}
-#toolbox_library #library_holder #library .tip1 .folder_container {
-  display: block;
-  overflow: show;
-  height: auto;
-  min-height: 20px;
-  padding: 0px 3px;
-}
-#toolbox_library #library_holder #library .tip1 .mapca {
-  display: none !important;
-}
-#toolbox_library #library_holder #library .tip1 .new_spr {
-  padding: 0 3px;
-}
-#toolbox_library #library_holder #library .tip1 .new_spr:hover {
-  background-color: #1980da;
-}
-#toolbox_library #library_holder #library .tip1 .new_spr .faicon {
-  line-height: 22px;
-}
-#toolbox_library #library_holder #library .tip1 .faicon.plus,
-#toolbox_library #library_holder #library .tip1 .faicon.minus {
-  opacity: 1 !important;
-  margin-right: 3px;
-}
-#toolbox_library #library_holder #library div .folder_right {
-  width: 15px;
-  height: 22px;
-  line-height: 22px;
-  float: right;
-  text-align: left;
-}
-#toolbox_library #library_holder #library div .tip1 .folder_right {
-  width: 18px;
-}
-#toolbox_library #library_holder #library div .folder_container:hover {
-  background-color: #1E88E5;
-  cursor: pointer;
-}
-#toolbox_library #library_holder #library div.folder_left {
-  width: 80%;
-  float: none;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  position: relative;
-}
-#toolbox_library #library_holder #library div.folder_left.indent {
-  display: block;
-  height: 22px;
-  line-height: 22px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  position: relative;
-}
-#toolbox_library #library_holder #library .folder strong:hover {
-  background-color: transparent;
-  cursor: pointer;
 }
 
+.tab_content {
+  display: flex;
+}
+.tab_content .content_left {
+  width: 300px;
+  padding: 16px 16px 16px 0;
+}
+.tab_content .content_left .folder_item {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  height: 40px;
+  width: 100%;
+  padding: 0 8px;
+  margin-bottom: 8px;
+  border: 1px solid #E5E5E5;
+  border-radius: 2px;
+  transition: 0.2s;
+}
+.tab_content .content_left .folder_item.active {
+  border-color: #1E88E5;
+  background-color: #F8F8F8;
+}
+.tab_content .content_left .folder_item:hover {
+  background-color: #F8F8F8;
+}
+.tab_content .content_left .folder_item span {
+  margin-right: 8px;
+  font-size: 14px;
+}
+.tab_content .content_right {
+  display: flex;
+  flex-direction: column;
+  width: 760px;
+  padding: 16px;
+}
+.tab_content .content_right .question_list {
+  display: flex;
+  flex-direction: column;
+  height: 400px;
+}
+.tab_content .content_right .question_list .question_item_holder {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.tab_content .content_right .question_list .question_item_holder.active .question_item_info {
+  background-color: #F8F8F8;
+}
+.tab_content .content_right .question_list .question_item_holder > label {
+  margin-right: 8px;
+}
+.tab_content .content_right .question_list .question_item_holder > label:before {
+  letter-spacing: 0;
+}
+.tab_content .content_right .question_list .question_item_holder .question_item_info {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 36px;
+  width: 100%;
+  padding: 0 16px;
+  border: 1px #E5E5E5 solid;
+  border-radius: 2px;
+  transition: 0.2s;
+}
+.tab_content .content_right .question_list .question_item_holder .question_item_info:hover {
+  background-color: #F8F8F8;
+}
+.tab_content .content_right .question_list .question_item_holder .question_item_info span {
+  margin-right: 8px;
+  font-size: 14px;
+}
+.tab_content .content_right .question_list .question_item_holder .question_item_info span.faicon {
+  color: #1E88E5;
+}
 /*
 To change this license header, choose License Headers in Project Properties.
 To change this template file, choose Tools | Templates
@@ -20783,10 +20705,6 @@ table.dashboard > tbody > tr > td {
     top: 187px;
   }
 
-  #toolbox_library {
-    display: none !important;
-  }
-
   .mobile_add_question {
     display: block;
     position: fixed;

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

@@ -668,3 +668,8 @@ span.faicon.open_icon::before{
 span.faicon.table_icon::before{
     content: "\f0ce";
 }
+
+// seznam
+span.faicon.list::before{
+    content: "\f03a";
+}

resources/sass/admin_new/mobile/pages/branching.scss

@@ -88,11 +88,6 @@
     top: 187px;
 }
 
-// Knjiznice ni nikoli
-#toolbox_library{
-    display: none !important;
-}
-
 
 // Mobile gumb za dodajanje vprašanja na konec
 .mobile_add_question{

resources/sass/admin_new/pages/survey_edit/library.scss

@@ -1,238 +1,139 @@
 /*
-To change this license header, choose License Headers in Project Properties.
+    Knjiznica v urejanju ankete
-To change this template file, choose Tools | Templates
-and open the template in the editor.
-*/
-/* 
-    Created on : 20-Aug-2018, 11:24:57
-    Author     : podkrizniku
 */
 
-#toolbox_library {
+// Popup knjiznica v urejanju ankete - tabi
-    z-index: 0;
+.lib_tabs{
-	position: fixed;
+    display: flex;
-	top: 225px;
-    left: 35px;
 
-	width: 315px;
+    .tab{
-	height: auto;
+        cursor: pointer;
-	left: auto;
-	right: 30px;
 
-	color: $blue;
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
-	background-color: white;
+        width: 50%;
-    border: 0;
+        height: 40px;
-    box-shadow: 0 0 31px 0 rgba(0, 0, 0, 0.07);
+        margin-bottom: 16px;
+        margin-top: -16px;
 
-    #library_holder {
+        background-color: $light-gray;
-        background-color: $blue;
+        
-        border: 1px $blue solid;
+        &.active{
+            color: $blue;
+            background-color: $white;
+        }
+    }
+}
+
+// Popup knjiznica - vsebina
+.tab_content{
+    display: flex;
+
+    .content_left{
+        width: 300px;
+        padding: 16px 16px 16px 0;
+
+        .folder_item{
+            cursor: pointer;
+
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+
+            box-sizing: border-box;
+            height: 40px;
+            width: 100%;
+            padding: 0 8px;
+            margin-bottom: 8px;
+
+            border: 1px solid $gray;
+            border-radius: 2px;
+
+            transition: 0.2s;
+
+            &.active{
+                border-color: $blue;
+                background-color: $light-gray;
+            }
+
+            &:hover{
+                background-color: $light-gray;
+            }
+
+            span{
+                margin-right: 8px;
+                font-size: 14px;
+            }
+        }
+    }
+    
+    .content_right{
+        display: flex;
+        flex-direction: column;
+        
+        width: 760px;
+        padding: 16px;
+
+        .question_list{
+            display: flex;
+            flex-direction: column;
+
+            height: 400px;
+
+            .question_item_holder{
+                display: flex;
+                align-items: center;
+
+                margin-bottom: 8px;
+                
+                &.active{
+                    .question_item_info{
+                        background-color: $light-gray;
+                    }
+                }
+
+                >label{
+                    margin-right: 8px;
+
+                    &:before{
+                        letter-spacing: 0;
+                    }
+                }
+
+                .question_item_info{
+                    display: flex;
+                    align-items: center;
+
+                    box-sizing: border-box;
+                    height: 36px;
+                    width: 100%;
+                    padding: 0 16px;
+ 
+                    border: 1px $gray solid;
+                    border-radius: 2px;
+
+                    transition: 0.2s;
+                    
+                    &:hover{
+                        background-color: $light-gray;
+                    }
+
+                    span{
+                        margin-right: 8px;
+                        font-size: 14px;
+
+                        &.faicon{
+                            color: $blue;
+                        }
+                    }
+                }
+            }
+        }
+
+        .button_holder{
 
-        #library_title {
-            padding: 10px;
-            font-size: 18px;
-            font-weight: bold;
-            span.library {
-                margin: 0 5px 2px 0;
-            }
-        }
-        
-        
-        p.display_tabs {
-            font-size: 14px;
-            font-weight: 500;
-            margin: 0;
-            padding: 0;
-
-            &> span{
-                width: 50%;
-                box-sizing: border-box;
-                display: inline-block;
-
-                padding: 7px 10px;
-
-                text-align: center;
-
-                transition: 0.2s;
-            }
-
-            span.highlightTabBlackLeft {
-                background-color: white;
-
-                a {
-                    color: $blue;
-                }
-            }
-
-            span.highlightTabBlackRight {
-                background-color: white;
-
-                a {
-                    color: $blue;
-                }
-            }
-
-            span.nohighlight:hover{
-                background-color: lighten($blue, 3%);
-            }
-
-            a {
-                display: block;
-                color: $blue;
-            }
-        }
-
-        #library {
-            background-color: white;
-            height: 400px;
-            overflow-y: auto;
-            
-            #libraryInner {
-                padding: 5px 10px;
-                bottom: 0;
-                overflow: auto;
-            }
-
-            .lib_tab {
-                width: auto;
-                cursor: pointer;
-            }
-            
-            ul {
-                list-style: none;
-                margin: 0;
-                margin-top: 4px;
-                padding-left: 18px;
-            }
-            li {
-                .anketa.tip0 {
-                    margin: 0;
-                    padding-left: 14px;
-                }
-                .anketa.tip1 {
-                    margin: 0;
-                    margin-left: -3px;
-                }
-            }
-            .new_folder {
-                visibility: hidden;
-            }
-            .delete_folder {
-                visibility: hidden;
-            }
-            span.folderdrop {
-                margin-bottom: 2px;
-
-                &:hover {
-                    .new_folder {
-                        visibility: visible;
-                    }
-                    .delete_folder {
-                        visibility: visible;
-                    }
-                }
-            }
-
-            span.faicon.folder{
-                vertical-align: 3px;
-                margin-right: 3px;
-
-                &::before{
-                    font-size: 20px;
-                }
-            }
-
-            .tip0 {
-                .folder_container {
-                    display: block;
-                    height: auto;
-                    overflow: hidden;
-                    padding: 1px 3px;
-                }
-            }
-
-            /* Ankete */
-            .tip1 {
-                padding-left: 10px;
-
-                .folder_container {
-                    display: block;
-                    overflow: show;
-    
-                    height: auto;
-                    min-height: 20px;
-                    padding: 0px 3px;
-                }
-
-                .mapca{
-                    display: none !important;
-                }
-
-                .new_spr{
-                    padding: 0 3px;
-
-                    &:hover{
-                        background-color: darken($blue, 3%);
-                    }
-
-                    .faicon{
-                        line-height: 22px;
-                    }
-                }
-                
-                .faicon.plus,
-                .faicon.minus{
-                    opacity: 1 !important;
-                    margin-right: 3px;
-                }
-            }
-
-            div {
-                .folder_right {
-                    width: 15px;
-                    height: 22px;
-                    line-height: 22px;
-                    float: right;
-                    text-align: left;
-                }
-                .tip1 {
-                    .folder_right {
-                        width: 18px;
-                    }
-                }
-                .folder_container {
-                    &:hover {
-                        background-color: $blue;
-                        cursor: pointer;
-                    }
-                }
-            }
-            div.folder_left {
-                width: 80%;
-                float: none;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                position: relative;
-            }
-            div.folder_left.indent {
-                display: block;
-                height: 22px;
-                line-height: 22px;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                position: relative;
-            }
-            .folder {
-                strong {
-                    &:hover {
-                        background-color: transparent;
-                        cursor: pointer;
-                    }
-                }
-            }
         }
     }
 }