From 437ff427f8d2078d519889d9eef0b922535b090c Mon Sep 17 00:00:00 2001
From: Safihre <safihre@sabnzbd.org>
Date: Sat, 9 Dec 2017 15:16:38 +0100
Subject: [PATCH] Improvements to Advanced Settings switching in Config

---
 interfaces/Config/templates/config_notify.tmpl      | 19 ++++++++++---------
 interfaces/Config/templates/config_server.tmpl      |  9 ++++++---
 interfaces/Config/templates/config_sorting.tmpl     |  6 +++---
 interfaces/Config/templates/staticcfg/css/style.css |  3 ++-
 interfaces/Config/templates/staticcfg/js/script.js  | 13 ++++++++-----
 5 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/interfaces/Config/templates/config_notify.tmpl b/interfaces/Config/templates/config_notify.tmpl
index ce6bc32..e1393ca 100644
--- a/interfaces/Config/templates/config_notify.tmpl
+++ b/interfaces/Config/templates/config_notify.tmpl
@@ -91,7 +91,7 @@
                     <input type="text" name="email_pwd" id="email_pwd" value="$email_pwd" />
                     <span class="desc">$T('explain-email_pwd')</span>
                 </div>
-                <div class="field-pair">
+                <div class="field-pair no-field-pair-bg">
                     <button class="btn btn-default saveButton"><span class="glyphicon glyphicon-ok"></span> $T('button-saveChanges')</button>
                     <button class="btn btn-default" type="button" id="test_email" rel="$T('askTestEmail')"><span class="glyphicon glyphicon-envelope"></span> $T('link-testEmail')</button>
                 </div>
@@ -115,7 +115,7 @@
         <div class="col1" <!--#if int($ncenter_enable) > 0 then '' else 'style="display:none"'#-->>
             <fieldset>
                 $show_notify_checkboxes('ncenter')
-                <div class="field-pair">
+                <div class="field-pair no-field-pair-bg">
                     <button class="btn btn-default saveButton"><span class="glyphicon glyphicon-ok"></span> $T('button-saveChanges')</button>
                     <button class="btn btn-default" type="button" id="test_notif"><span class="glyphicon glyphicon-comment"></span> $T('testNotify')</button>
                </div>
@@ -141,7 +141,7 @@
         <div class="col1" <!--#if int($acenter_enable) > 0 then '' else 'style="display:none"'#-->>
             <fieldset>
                 $show_notify_checkboxes('acenter')
-                <div class="field-pair">
+                <div class="field-pair no-field-pair-bg">
                     <button class="btn btn-default saveButton"><span class="glyphicon glyphicon-ok"></span> $T('button-saveChanges')</button>
                     <button class="btn btn-default" type="button" id="test_windows"><span class="glyphicon glyphicon-comment"></span> $T('testNotify')</button>
                </div>
@@ -167,7 +167,7 @@
         <div class="col1" <!--#if int($ntfosd_enable) > 0 then '' else 'style="display:none"'#-->>
             <fieldset>
                 $show_notify_checkboxes('ntfosd')
-                <div class="field-pair">
+                <div class="field-pair no-field-pair-bg">
                     <button class="btn btn-default saveButton"><span class="glyphicon glyphicon-ok"></span> $T('button-saveChanges')</button>
                     <button class="btn btn-default" type="button" id="test_osd"><span class="glyphicon glyphicon-comment"></span> $T('testNotify')</button>
                </div>
@@ -207,7 +207,7 @@
                     <span class="desc">$T('Optional') - $T('explain-nscript_parameters')</span>
                 </div>
                 $show_notify_checkboxes('nscript')
-                <div class="field-pair">
+                <div class="field-pair no-field-pair-bg">
                     <button class="btn btn-default saveButton"><span class="glyphicon glyphicon-ok"></span> $T('button-saveChanges')</button>
                     <button class="btn btn-default" type="button" id="test_nscript"><span class="glyphicon glyphicon-comment"></span> $T('testNotify')</button>
                 </div>
@@ -241,7 +241,7 @@
                     <span class="desc">$T('explain-growl_password')</span>
                 </div>
                 $show_notify_checkboxes('growl')
-                <div class="field-pair">
+                <div class="field-pair no-field-pair-bg">
                     <button class="btn btn-default saveButton"><span class="glyphicon glyphicon-ok"></span> $T('button-saveChanges')</button>
                     <button class="btn btn-default" type="button" id="test_growl"><span class="glyphicon glyphicon-comment"></span> $T('testNotify')</button>
                 </div>
@@ -286,7 +286,7 @@
                         </select>
                     </div>
                 <!--#end for#-->
-                <div class="field-pair">
+                <div class="field-pair no-field-pair-bg">
                     <button class="btn btn-default saveButton"><span class="glyphicon glyphicon-ok"></span> $T('button-saveChanges')</button>
                     <button class="btn btn-default" type="button" id="test_prowl"><span class="glyphicon glyphicon-comment"></span> $T('testNotify')</button>
                 </div>
@@ -352,7 +352,7 @@
                         </select>
                     </div>
                 <!--#end for#-->
-                <div class="field-pair">
+                <div class="field-pair no-field-pair-bg">
                     <button class="btn btn-default saveButton"><span class="glyphicon glyphicon-ok"></span> $T('button-saveChanges')</button>
                     <button class="btn btn-default" type="button" id="test_pushover"><span class="glyphicon glyphicon-comment"></span> $T('testNotify')</button>
                 </div>
@@ -389,7 +389,7 @@
                 </div>
                 <!--#end if#-->
                 $show_notify_checkboxes('pushbullet')
-                <div class="field-pair">
+                <div class="field-pair no-field-pair-bg">
                    <button class="btn btn-default saveButton"><span class="glyphicon glyphicon-ok"></span> $T('button-saveChanges')</button>
                    <button class="btn btn-default" type="button" id="test_pushbullet"><span class="glyphicon glyphicon-comment"></span> $T('testNotify')</button>
                 </div>
@@ -417,6 +417,7 @@
             \$(this).parents('.col2').find('.col2-cats').hide()
         }
         \$('form').submit()
+        addRowColor()
     })
     \$('#email_endjob').change(function() {
         if(\$(this).val() > 0) {
diff --git a/interfaces/Config/templates/config_server.tmpl b/interfaces/Config/templates/config_server.tmpl
index dd4e7bc..1ff8e8c 100644
--- a/interfaces/Config/templates/config_server.tmpl
+++ b/interfaces/Config/templates/config_server.tmpl
@@ -147,7 +147,7 @@
                         <label class="config" for="notes">$T('srv-notes')</label>
                         <textarea name="notes" id="notes" rows="3" cols="50"></textarea>
                     </div>
-                    <div class="field-pair">
+                    <div class="field-pair no-field-pair-bg">
                         <button class="btn btn-default"><span class="glyphicon glyphicon-plus"></span> $T('button-addServer')</button>
                         <button class="btn btn-default testServer" type="button"><span class="glyphicon glyphicon-sort"></span> $T('button-testServer')</button>
                     </div>
@@ -159,7 +159,6 @@
         </div>
     </div>
 
-
     <!--#set $prio_colors = ["#59cc33", "#3366cc","#7f33cc", "#cc33a6", "#cc3333"] #-->
     <!--#set $cur_prio_color = -1 #-->
     <!--#set $last_prio = -1 #-->
@@ -188,7 +187,7 @@
                     <button type="button" class="btn btn-default showserver"><span class="glyphicon glyphicon-pencil"></span> $T('showDetails')</button>
                     <button type="button" class="btn btn-default clrServer"><span class="glyphicon glyphicon-remove"></span> $T('button-clrServer')</button>
                 </div>
-                <div class="col1"  style="display:none;">
+                <div class="col1" style="display:none;">
                     <input type="hidden" name="enable" id="enable$cur" value="$int($server['enable'])" />
                     <fieldset>
                         <div class="field-pair">
@@ -437,10 +436,14 @@
             } else {
                 \$(this).html(\$(this).html().replace("$T('hideDetails')", "$T('showDetails')"));
             }
+            // Add coloring
+            addRowColor()
         });
 
         \$('#addServerButton').click(function(){
             \$('#addServerContent').show();
+            // Add coloring
+            addRowColor()
         });
 
         \$('[name="ssl"]').click(function() {
diff --git a/interfaces/Config/templates/config_sorting.tmpl b/interfaces/Config/templates/config_sorting.tmpl
index 132a506..8b4d51c 100644
--- a/interfaces/Config/templates/config_sorting.tmpl
+++ b/interfaces/Config/templates/config_sorting.tmpl
@@ -53,7 +53,7 @@
                             <label class="config">$T('sortResult')</label> <span class="desc path" id="previewtv-result">&nbsp;</span>
                         </div>
                     </div>
-                    <div class="field-pair">
+                    <div class="field-pair no-field-pair-bg">
                         <label class="config">$T('sort-legenda')</label>
                         <button type="button" class="btn btn-default patternKey" onclick="jQuery(this).hide(); jQuery('#Key1').show();"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> $T('sort-legenda')</button>
                         <table id="Key1" class="Key">
@@ -213,7 +213,7 @@
                             <label class="config">$T('sortResult')</label> <span class="desc path" id="previewmovie-result">&nbsp;</span>
                         </div>
                     </div>
-                    <div class="field-pair">
+                    <div class="field-pair no-field-pair-bg">
                         <label class="config">$T('sort-legenda')</label>
                         <button type="button" class="btn btn-default patternKey" onclick="jQuery(this).hide(); jQuery('#Key2').show();"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> $T('sort-legenda')</button>
                         <table id="Key2" class="Key">
@@ -345,7 +345,7 @@
                             <label class="config">$T('sortResult')</label> <span class="desc path" id="previewdate-result">&nbsp;</span>
                         </div>
                     </div>
-                    <div class="field-pair">
+                    <div class="field-pair no-field-pair-bg">
                         <label class="config">$T('sort-legenda')</label>
                         <button type="button" class="btn btn-default patternKey" onclick="jQuery(this).hide(); jQuery('#Key3').show();"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> $T('sort-legenda')</button>
                         <table id="Key3" class="Key">
diff --git a/interfaces/Config/templates/staticcfg/css/style.css b/interfaces/Config/templates/staticcfg/css/style.css
index d907272..ef51838 100644
--- a/interfaces/Config/templates/staticcfg/css/style.css
+++ b/interfaces/Config/templates/staticcfg/css/style.css
@@ -171,7 +171,8 @@ input[type="checkbox"]+.desc {
 .even {
     background-color: #F8F8F8;
 }
-.field-pair:last-child {
+.field-pair:last-child,
+.no-field-pair-bg {
     background-color: transparent;
 }
 .alt,
diff --git a/interfaces/Config/templates/staticcfg/js/script.js b/interfaces/Config/templates/staticcfg/js/script.js
index ed21e5d..e70a6b9 100644
--- a/interfaces/Config/templates/staticcfg/js/script.js
+++ b/interfaces/Config/templates/staticcfg/js/script.js
@@ -311,6 +311,11 @@ function removeObfuscation() {
     return true
 }
 
+// Add coloring to rows (shorthand function)
+function addRowColor() {
+    $('.field-pair:visible').removeClass('even').filter(':even').addClass('even')
+}
+
 $(document).ready(function () {
     /**
         Restart function
@@ -412,16 +417,14 @@ $(document).ready(function () {
     $('.advanced-button').on('change', function(event){
         localStorage.setItem('advanced-settings', !$('.advanced-settings').is(':visible'))
         $('.advanced-settings').toggle()
-        $('.field-pair:visible').removeClass('even').filter(':even').addClass('even')
+
     })
     if(localStorage.getItem('advanced-settings') == 'true') {
         $('.advanced-settings').show()
         $('#advanced-settings-button').prop('checked', true)
-        $('.field-pair:visible').removeClass('even').filter(':even').addClass('even')
+        addRowColor()
     }
-
-    // Add coloring
-    $('.field-pair:visible').removeClass('even').filter(':even').addClass('even')
+    addRowColor()
 });
 
 /*