[Redizajn 1KA v2] Testiranje --> Komentarji - test survey dropdown v1

admin/survey/BranchingAjax.php

@@ -2280,18 +2280,6 @@ class BranchingAjax {
 			echo '  <button class="medium blue" onclick="add_comment(\''.$spremenljivka.'\', \''.$type.'\', \''.$view.'\', $(\'#vsebina_'.$spremenljivka.'_'.$view.'\').val()); return false;">'.$lang['srv_comments_new'].'</button>';
 			echo '</div>';
 		}
-
-		if (($type == 0 || $view==3) && ($admin_type == 0 || $global_user_id==$rowanketa['insert_uid'])) {
-			echo '<div class="comment_bottom">';
-			
-			// Link na pregled splosnih komentarjev
-			echo '<a href="'.$site_url.'/admin/survey/index.php?anketa='.$this->anketa.'&a=komentarji_anketa" class="noline">'.$lang['srv_comment_overview'].'</a>';	
-			
-			// Link na nastavitve komentarjev
-			echo '<a href="'.$site_url.'/admin/survey/index.php?anketa='.$this->anketa.'&a=urejanje" class="noline">'.$lang['settings'].'</a>';
-			
-			echo '</div>';
-		}	
 	}
 	
 	/**

admin/survey/SurveyAdmin.php

@@ -1443,20 +1443,20 @@ class SurveyAdmin
 				    $comment_link = 'window.location.href=\'' . $site_url . 'admin/survey/index.php?anketa='.$row['id'].'&a=komentarji_anketa\'; return false;';
                     echo '<div class="links" onclick="'.$comment_link.'">';
                     echo $lang['srv_testiranje_komentarji_anketa_overview'];
-                    echo ' (<span class="red">' . $comment_count['question']['unresolved'];
+                    echo ' (<span class="red">' . ($comment_count['survey_resp']['unresolved'] + $comment_count['survey_admin']['unresolved']); //nerešeni
-		            echo '</span>/' . $comment_count['question']['all'] . ')';
+		            echo '</span>/' . ($comment_count['survey_resp']['all'] + $comment_count['survey_admin']['all']) . ')'; //vsi
                     echo '<span class="faicon fa-angle-right"></span>';
                     echo '</div>';
 
 				    $comment_link = 'window.location.href=\'' . $site_url . 'admin/survey/index.php?anketa='.$row['id'].'&a=komentarji\'; return false;';
                     echo '<div class="links" onclick="'.$comment_link.'">';
                     echo $lang['srv_testiranje_komentarji_overview'];
-                    echo ' (<span class="red">' . ($comment_count['survey_resp']['unresolved'] + $comment_count['survey_admin']['unresolved']); //nerešeni
+                    echo ' (<span class="red">' . $comment_count['question']['unresolved'];
-		            echo '</span>/' . ($comment_count['survey_resp']['all'] + $comment_count['survey_admin']['all']) . ')'; //vsi
+		            echo '</span>/' . $comment_count['question']['all'] . ')';
                     echo '<span class="faicon fa-angle-right"></span>';
                     echo '</div>';
 
-                    echo '<div id="survey_comment_0_1">';
+                    echo '<div class="first_holder_div" id="survey_comment_0_1">';
                     $ba = new BranchingAjax($this->anketa);
 		            $ba->add_comment_field(0, '0', '1', false, false);
                     echo '</div>';

admin/survey/script/script.js

@@ -5718,6 +5718,6 @@ function toggleCommentDropdown () {
 }
 
 function toggleCommentDropdownTestSurvey () {
-	$("#comment_dropdown").toggleClass('displayNone');
+	$("#comment_dropdown_test_survey").toggleClass('displayNone');
 	$(".open_comment_box").toggleClass('active');
 }

main/survey/app/Controllers/BodyController.php

@@ -31,7 +31,7 @@ use SurveyNIJZ;
 use GDPR;
 use UserAccess;
 use AppSettings;
-
+use BranchingAjax;
 
 class BodyController extends Controller
 {
@@ -2371,19 +2371,17 @@ class BodyController extends Controller
                     echo '</div>'; // #comments_bottom_line
 
                     //dropdown na klik ikone
-                    echo '<div id="comment_dropdown" class="displayNone">';
+                    echo '<div id="comment_dropdown_test_survey" class="displayNone">';
-
-                    echo 'test';
 
                     $anketa = get('anketa');
-                    echo '<div id="survey_comment_0_1">';
+                    echo '<div class="first_holder_div" id="survey_comment_0_1">';
                     $ba = new BranchingAjax($anketa);
 		            $ba->add_comment_field(0, '0', '1', false, false);
                     echo '</div>';
 
                     echo '<div class="button_holder">';
-                    echo '<button class="small white-blue" onclick="toggleCommentDropdown(); return false;">'.$lang['edit1338'].'</button>';
+                    echo '<button class="small white-blue" onclick="toggleCommentDropdownTestSurvey(); return false;">'.self::$lang['edit1338'].'</button>';
-                    echo '<button class="small blue" onclick="add_comment(\'0\', \'0\', \'1\', $(\'#vsebina_0_1\').val()); actionNotePopup(\'comment_added\', \'success\');return false;">'.$lang['srv_comments_new'].'</button>';
+                    echo '<button class="small blue" onclick="add_comment(\'0\', \'0\', \'1\', $(\'#vsebina_0_1\').val()); actionNotePopup(\'comment_added\', \'success\'); return false;">'.self::$lang['srv_comments_new'].'</button>';
                     echo '</div>';
 
                     echo '</div>'; //comment_dropdown

public/css/main.css

@@ -7612,7 +7612,7 @@ span.faicon.empty {
 #comments_bottom_line .open_comment_box.active {
   color: #1E88E5;
   border-color: #1E88E5;
-  background-color: #F4F9FE;
+  background-color: #EEF7FF;
 }
 #comments_bottom_line a #comment_settings {
   display: flex;
@@ -7629,4 +7629,248 @@ span.faicon.empty {
   line-height: 17px !important;
 }
 
+#comment_dropdown_test_survey .first_holder_div {
+  margin: 0 15px 15px 15px;
+}
+#comment_dropdown_test_survey .first_holder_div textarea {
+  height: 130px;
+  width: 100% !important;
+  margin: 0;
+  border: 1px solid #C4C4C4;
+  box-sizing: border-box !important;
+  border-radius: 2px;
+  resize: none;
+  padding: 9px 7px;
+}
+#comment_dropdown_test_survey .first_holder_div textarea:focus {
+  border: 1px solid #1E88E5 !important;
+  outline: none;
+}
+#comment_dropdown_test_survey .button_holder {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: 0 15px 15px 15px;
+}
+#comment_dropdown_test_survey .button_holder button {
+  min-width: 0 !important;
+  margin: 0;
+  font-size: 12px !important;
+  width: fit-content;
+  padding: 5px 16px;
+}
+
+button,
+submit {
+  box-sizing: border-box;
+  cursor: pointer;
+  font-weight: 600;
+  font-family: Montserrat, sans-serif;
+  box-shadow: none;
+  border: 0;
+  transition: 0.3s;
+}
+button.small-rounded,
+submit.small-rounded {
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  height: 24px;
+  font-size: 12px;
+  font-weight: 400;
+  text-decoration: none;
+  border-radius: 2px;
+}
+button.small-rounded .faicon,
+submit.small-rounded .faicon {
+  margin-right: 4px;
+}
+button.small-rounded .faicon:before,
+submit.small-rounded .faicon:before {
+  font-size: 12px;
+}
+button.medium-rounded,
+submit.medium-rounded {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  height: 28px;
+  font-size: 14px;
+  font-weight: 400;
+  text-decoration: none;
+  border-radius: 2px;
+}
+button.medium-rounded .faicon,
+submit.medium-rounded .faicon {
+  margin-right: 8px;
+}
+button.medium-rounded .faicon:before,
+submit.medium-rounded .faicon:before {
+  font-size: 14px;
+}
+button.small,
+submit.small {
+  padding: 5px 32px;
+  min-width: 160px;
+  font-size: 14px;
+}
+button.medium,
+submit.medium {
+  padding: 10px 32px;
+  min-width: 160px;
+  font-size: 16px;
+}
+button.large,
+submit.large {
+  padding: 12px 32px;
+  min-width: 160px;
+  font-size: 20px;
+}
+button.table-inline,
+submit.table-inline {
+  padding: 4px 20px;
+  width: fit-content;
+  font-size: 14px;
+  border-radius: 2px;
+  margin-left: 16px;
+  white-space: nowrap;
+}
+button.table,
+submit.table {
+  padding: 4px 20px;
+  width: fit-content;
+  font-size: 14px;
+  border-radius: 2px;
+  white-space: nowrap;
+}
+button.blue,
+submit.blue {
+  color: #FFFFFF;
+  background-color: #1E88E5;
+  border: 1px #1E88E5 solid;
+}
+button.blue:hover,
+submit.blue:hover {
+  background-color: #1980da;
+}
+button.blue:disabled,
+submit.blue:disabled {
+  color: #808080;
+  background-color: #E5E5E5;
+  border: 1px #E5E5E5 solid;
+}
+button.blue:disabled:hover,
+submit.blue:disabled:hover {
+  background-color: #E5E5E5;
+}
+button.white-blue,
+submit.white-blue {
+  color: #1E88E5;
+  background-color: #FFFFFF;
+  border: 1px #1E88E5 solid;
+}
+button.white-blue:hover,
+submit.white-blue:hover {
+  background-color: #f2f2f2;
+}
+button.white-black,
+submit.white-black {
+  color: #333333;
+  background-color: #FFFFFF;
+  border: 1px #333333 solid;
+}
+button.white-black:hover,
+submit.white-black:hover {
+  background-color: #f2f2f2;
+}
+button.white-gray,
+submit.white-gray {
+  color: #333333;
+  background-color: #FFFFFF;
+  border: 1px #E5E5E5 solid;
+}
+button.white-gray:hover,
+submit.white-gray:hover {
+  background-color: #f2f2f2;
+}
+button.white-gray .faicon:before,
+submit.white-gray .faicon:before {
+  color: #1E88E5;
+}
+button.gray,
+submit.gray {
+  color: #333333;
+  background-color: #E5E5E5;
+  border: 1px #333333 solid;
+}
+button.gray:hover,
+submit.gray:hover {
+  background-color: #d8d8d8;
+}
+button.yellow,
+submit.yellow {
+  color: #333333;
+  background-color: #FFC700;
+  border: 1px #FFC700 solid;
+}
+button.yellow:hover,
+submit.yellow:hover {
+  background-color: #f5bf00;
+}
+button.red,
+submit.red {
+  color: #FFFFFF;
+  background-color: #FF0000;
+  border: 1px #FF0000 solid;
+}
+button.red:hover,
+submit.red:hover {
+  background-color: #e60000;
+}
+
+div.button_holder {
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  margin-bottom: 32px;
+}
+div.button_holder button {
+  margin-right: 16px;
+}
+div.button_holder.bottom16 {
+  margin-bottom: 16px;
+}
+div.button_holder.top16 {
+  margin-top: 16px;
+}
+div.button_holder.top8 {
+  margin-top: 8px;
+}
+div.button_holder.bottom0 {
+  margin-bottom: 0px;
+}
+div.button_holder.inline {
+  align-items: flex-end;
+}
+div.button_holder.inline.vertical_center {
+  align-items: center;
+}
+div.button_holder.inline button {
+  margin-left: 16px;
+}
+div.button_holder.below {
+  margin-bottom: 0;
+  margin-top: 24px;
+}
+div.button_holder.intext {
+  margin: 16px 0;
+}
+div.button_holder.float-right {
+  justify-content: end;
+}
+div.button_holder.float-right button {
+  margin-left: 16px;
+  margin-right: 0;
+}
+
 /*# sourceMappingURL=main.css.map */

resources/sass/admin_new/pages/survey_testiranje/komentarji.scss

@@ -832,14 +832,13 @@ div.page_komentarji_anketa {
 
         }
 
-        #comment_field {
+        #first_holder_div {
 
             padding-top: 16px;
             border-top: 1px solid $gray;
-            margin-bottom: 10px;
-
             textarea {
                 height: 130px;
+                width: 305px;
                 width: 100%;
                 margin: 0;
             }
@@ -851,46 +850,12 @@ div.page_komentarji_anketa {
             justify-content: space-between;
 
             margin-bottom: 0;
+            margin-top: 10px;
 
             button {
                 min-width: 128px;
                 margin: 0;
             }
-
-            .options {
-                display: flex;
-                flex-direction: row;
-
-                .square {
-                    box-sizing: border-box;
-                    border: 1px solid $blue;
-                    width: 28px;
-                    height: 28px;
-                    margin-left: 8px;
-
-                    display: flex;
-                    justify-content: center;
-                    align-content: center;
-
-                    color: $blue;
-                    font-size: 14px !important;
-
-                    cursor: pointer;
-
-                    &.blue {
-                        background-color: $blue;
-                        span.faicon::before {
-                            font-size: 14px !important;
-                            color: $white;
-                        }
-                    }
-
-                    span.faicon::before {
-                        $font_weight: 400;
-                        font-size: 16px !important;
-                    }
-                }
-            }
         }
     }
 }

resources/sass/main/main/test_survey_comments.scss

@@ -10,6 +10,40 @@ span.faicon.empty {
     font-weight: 400 !important;
 }
 
+//Barve
+$blue: #1E88E5;
+$dark-blue: #0059ab;
+$medium-blue: #EEF7FF;
+$medium-blue2: #F4F9FE;
+$light-blue: #EAF9FE;
+
+$black: #333333;
+$white: #FFFFFF;
+
+$ultra-dark-gray: #555555;
+$very-dark-gray: #777777;
+$very-dark-gray2: #808080;
+$dark-gray: #C4C4C4;
+$dark-gray2: #D3D3D3;
+$gray: #E5E5E5;
+$light-gray2: #F2F2F2;
+$light-gray: #F8F8F8;
+
+$yellow: #FFC700;
+
+$red: #FF0000;
+$light-red: #FFEFEF;
+$coral: #FF8787;
+
+$dark-green: #00752F;
+$green: #00C437;
+$light-green: #a8eea8;
+$light-green2: #E3F6DE;
+
+$status-red: #FFE3E3;
+$status-green: #E3F6DE;
+$status-blue: #EAF9FE;
+
 //Vrstica za dodajanje komentarja in nastavitve na dnu okna
 #comments_bottom_line {
     display: flex;
@@ -34,16 +68,16 @@ span.faicon.empty {
         span.faicon {
             margin-right: 8px;
             &::before{
-                color: #1E88E5 !important;
+                color: $blue !important;
                 font-size: 16px !important;
                 line-height: 17px !important;
             }
         }
 
         &.active {
-            color: #1E88E5;
+            color: $blue;
-            border-color: #1E88E5;
+            border-color: $blue;
-            background-color: #F4F9FE;
+            background-color: $medium-blue;
         }
     }
 
@@ -60,11 +94,299 @@ span.faicon.empty {
 
             span.faicon {
                 &::before{
-                    color: #1E88E5 !important;
+                    color: $blue !important;
                     font-size: 16px !important;
                     line-height: 17px !important;
                 }
             }
         }
     }
+}
+
+#comment_dropdown_test_survey {
+
+    //Polje, ki se odpre
+    .first_holder_div {
+
+        margin: 0 15px 15px 15px;
+
+        textarea {
+            height: 130px;
+            width: 100% !important;
+            margin: 0;
+
+            border: 1px solid $dark-gray;
+            box-sizing: border-box !important;
+            border-radius: 2px;
+            resize: none;
+        
+            padding: 9px 7px;
+
+            &:focus {
+                border: 1px solid $blue !important;
+                outline: none;
+            }
+        }
+
+    }
+
+    .button_holder {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        margin: 0 15px 15px 15px;
+
+        button {
+            min-width: 0 !important;
+            margin: 0;
+
+            font-size: 12px !important;
+            width: fit-content;
+
+            padding: 5px 16px;
+        }
+    }
+
+}
+
+
+
+//Gumbi - splošno
+button,
+submit{
+    box-sizing: border-box;
+    cursor: pointer;
+
+    font-weight: 600;
+    font-family: $font_family;
+
+    box-shadow: none;
+    border: 0;
+
+    transition: 0.3s;
+
+    // Button sizes
+
+    &.small-rounded{
+        display: flex;
+        align-items: center;
+
+        padding: 0 8px;
+        height: 24px;
+
+        font-size: 12px;
+        font-weight: 400;
+        text-decoration: none;
+
+        border-radius: 2px;
+
+        .faicon{
+            margin-right: 4px;
+
+            &:before{
+                font-size: 12px;
+            }
+        }
+    }
+    &.medium-rounded{
+        display: flex;
+        align-items: center;
+
+        padding: 0 16px;
+        height: 28px;
+
+        font-size: 14px;
+        font-weight: 400;
+        text-decoration: none;
+
+        border-radius: 2px;
+
+        .faicon{
+            margin-right: 8px;
+
+            &:before{
+                font-size: 14px;
+            }
+        }
+    }
+    &.small{
+        padding: 5px 32px;
+        min-width: 160px;
+        font-size: 14px;
+    }
+    &.medium{
+        padding: 10px 32px;
+        min-width: 160px;
+        font-size: 16px;
+    }
+    &.large{
+        padding: 12px 32px;
+        min-width: 160px;
+        font-size: 20px;
+    }
+    //Gumb v polju zraven teksta ali ikon
+    &.table-inline{
+        padding: 4px 20px;
+        width: fit-content;
+        font-size: 14px;
+        border-radius: 2px;
+        margin-left: 16px;
+        white-space: nowrap;
+    }
+    //Sam gumb v polju
+    &.table{
+        padding: 4px 20px;
+        width: fit-content;
+        font-size: 14px;
+        border-radius: 2px;
+        white-space: nowrap;
+    }
+
+
+    // Button colors
+    &.blue{
+        color: $white;
+
+        background-color: $blue;
+        border: 1px $blue solid;
+
+        &:hover {
+            background-color: darken($blue, 3%);
+        }
+
+        &:disabled{
+            color: $very-dark-gray2;
+
+            background-color: $gray;
+            border: 1px $gray solid;
+
+            &:hover {
+                background-color: $gray;
+            }
+        }
+    }
+    &.white-blue{
+        color: $blue;
+
+        background-color: $white;
+        border: 1px $blue solid;
+
+        &:hover {
+            background-color: darken($white, 5%);
+        }
+    }
+    &.white-black{
+        color: $black;
+
+        background-color: $white;
+        border: 1px $black solid;
+
+        &:hover {
+            background-color: darken($white, 5%);
+        }
+    }
+    &.white-gray{
+        color: $black;
+
+        background-color: $white;
+        border: 1px $gray solid;
+
+        &:hover {
+            background-color: darken($white, 5%);
+        }
+
+        .faicon{
+            &:before{
+                color: $blue;
+            }
+        }
+    }
+    &.gray{
+        color: $black;
+
+        background-color: $gray;
+        border: 1px $black solid;
+
+        &:hover {
+            background-color: darken($gray, 5%);
+        }
+    }
+    &.yellow{
+        color: $black;
+
+        background-color: $yellow;
+        border: 1px $yellow solid;
+
+        &:hover {
+            background-color: darken($yellow, 2%);
+        }
+    }
+    &.red{
+        color: $white;
+
+        background-color: $red;
+        border: 1px $red solid;
+
+        &:hover {
+            background-color: darken($red, 5%);
+        }
+    }
+}
+
+div.button_holder {
+    display: flex;
+    flex-direction: row;
+    box-sizing: border-box;
+    margin-bottom: 32px;
+   
+    button {
+        margin-right: 16px;
+    }
+
+    &.bottom16 {
+        margin-bottom: 16px;
+    }
+
+    &.top16 {
+        margin-top: 16px;
+    }
+
+    &.top8 {
+        margin-top: 8px;
+    }
+
+    &.bottom0 {
+        margin-bottom: 0px;
+    }
+
+    &.inline {
+    align-items: flex-end;
+
+        &.vertical_center {
+            align-items: center;
+        }
+
+        button {
+            margin-left: 16px;
+        }
+    }
+
+    &.below {
+        margin-bottom: 0;
+        margin-top: 24px;
+    }
+
+    &.intext{
+        margin: 16px 0;
+    }
+
+    &.float-right{
+        justify-content: end;
+
+        button{
+            margin-left: 16px;
+            margin-right: 0;
+        }
+    }
 }