From 0ddcf6ac14bd659cbd7dd377658dd41966ca4feb Mon Sep 17 00:00:00 2001
From: nobody <info@localcdn.de>
Date: Sat, 4 Jul 2020 07:41:28 +0200
Subject: [PATCH] Slide effect for "Block Google Fonts" added

---
 pages/options/options.css  | 18 ++++++++++++++++++
 pages/options/options.html | 20 ++++++++++----------
 pages/options/options.js   |  8 ++++++--
 3 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/pages/options/options.css b/pages/options/options.css
index e1677539..aa2f8fae 100644
--- a/pages/options/options.css
+++ b/pages/options/options.css
@@ -269,6 +269,24 @@ body {
 
 #block-google-fonts {
     padding-left: 1.8rem;
+    padding-bottom: 0px;
+}
+
+.bgf-slideup, .bgf-slidedown {
+    height: 0px;
+    overflow-y: hidden;
+    -webkit-transition: height 0.8s ease-in-out;
+    -moz-transition: height 0.8s ease-in-out;
+    -o-transition: height 0.8s ease-in-out;
+    transition: height 0.8s ease-in-out;
+}
+.bgf-slidedown {
+    padding-top: .5rem;
+    height: 60px;
+}
+
+.no-padding-bottom {
+    padding-bottom: 0px;
 }
 
 /**
diff --git a/pages/options/options.html b/pages/options/options.html
index 895100d0..81fb7d11 100644
--- a/pages/options/options.html
+++ b/pages/options/options.html
@@ -37,7 +37,7 @@
                 </div>
                 <div class="description-option" data-i18n-content="showIconBadgeDescription"></div>
             </section>
-            <section class="option">
+            <section id="block-missing" class="option">
                 <div class="title-option">
                     <label class="b-contain">
                         <input data-option="blockMissing" type="checkbox">
@@ -47,16 +47,16 @@
                     <span class="badge badge-warning" data-i18n-content="advancedLabel"></span>
                 </div>
                 <div class="description-option" data-i18n-content="blockMissingDescription"></div>
-            </section>
-            <section id="block-google-fonts" class="option">
-                <div class="title-option">
-                    <label class="b-contain">
-                        <input data-option="blockGoogleFonts" type="checkbox">
-                        <span data-i18n-content="blockGoogleFontsTitle">Block Google Fonts</span>
-                        <div class="b-input"></div>
-                    </label>
+                <div id="block-google-fonts" class="option bgf-slideup">
+                    <div class="title-option">
+                        <label class="b-contain">
+                            <input data-option="blockGoogleFonts" type="checkbox">
+                            <span data-i18n-content="blockGoogleFontsTitle">Block Google Fonts</span>
+                            <div class="b-input"></div>
+                        </label>
+                    </div>
+                    <div class="description-option" data-i18n-content="blockGoogleFontsDescription">If you use the rules of the rule generator, requests to "fonts.googleapis.com" are allowed to substitute "Google Material Icons" automatically. If you want to block the other requests, enable this option.</div>
                 </div>
-                <div class="description-option" data-i18n-content="blockGoogleFontsDescription">If you use the rules of the rule generator, requests to "fonts.googleapis.com" are allowed to substitute "Google Material Icons" automatically. If you want to block the other requests, enable this option.</div>
             </section>
             <section class="option">
                 <div class="title-option">
diff --git a/pages/options/options.js b/pages/options/options.js
index e3f94795..6496d116 100644
--- a/pages/options/options.js
+++ b/pages/options/options.js
@@ -370,9 +370,13 @@ options._updatesDomainLists = function(changes) {
 
 options._displayBlockGoogleFonts = function(value) {
     if (value === true) {
-        document.getElementById('block-google-fonts').style.display = "none";
+        document.getElementById('block-google-fonts').classList.add('bgf-slideup');
+        document.getElementById('block-missing').classList.remove('no-padding-bottom');
+        document.getElementById('block-google-fonts').classList.remove('bgf-slidedown');
     } else {
-        document.getElementById('block-google-fonts').style.display = "block";
+        document.getElementById('block-google-fonts').classList.add('bgf-slidedown');
+        document.getElementById('block-missing').classList.add('no-padding-bottom');
+        document.getElementById('block-google-fonts').classList.remove('bgf-slideup');
     }
 };