From cfeac8c7f15d22c845f9027b7fc4f4d2e5010f77 Mon Sep 17 00:00:00 2001
From: Jason <84899178+jasonhenriquez@users.noreply.github.com>
Date: Wed, 15 Sep 2021 02:03:00 +0000
Subject: [PATCH] Collapsible Settings Sections (#1699)

* Adds base dropdown ability to settings page with <details> & <summary>

* Adjusts styling of settings page

Replaces css stylesheets with sass stylesheets on some settings elements for better standardization of styling. Removes now unnecessary ft-card, .card, etc styling. Adds styling to new dropdown functionality.

* Update subscription-settings.sass

* Update Settings.css
---
 .../data-settings/data-settings.vue           | 15 +++++------
 .../distraction-settings.vue                  | 17 ++++++-------
 .../external-player-settings.vue              | 17 ++++++-------
 .../general-settings/general-settings.vue     | 17 ++++++-------
 .../player-settings/player-settings.vue       | 17 ++++++-------
 .../privacy-settings/privacy-settings.vue     | 15 +++++------
 .../proxy-settings/proxy-settings.css         | 25 -------------------
 .../proxy-settings/proxy-settings.sass        |  5 ++++
 .../proxy-settings/proxy-settings.vue         | 19 +++++++-------
 .../sponsor-block-settings.css                | 25 -------------------
 .../sponsor-block-settings.sass               |  5 ++++
 .../sponsor-block-settings.vue                | 19 +++++++-------
 .../subscription-settings.css                 | 21 ----------------
 .../subscription-settings.sass                |  6 +++++
 .../subscription-settings.vue                 | 19 +++++++-------
 .../theme-settings/theme-settings.css         | 15 -----------
 .../theme-settings/theme-settings.sass        |  1 +
 .../theme-settings/theme-settings.vue         | 17 +++++++------
 src/renderer/sass-partials/_settings.sass     | 19 ++++++++++++--
 src/renderer/views/Settings/Settings.css      |  7 ++++++
 src/renderer/views/Settings/Settings.vue      |  9 +++++++
 21 files changed, 134 insertions(+), 176 deletions(-)
 delete mode 100644 src/renderer/components/proxy-settings/proxy-settings.css
 create mode 100644 src/renderer/components/proxy-settings/proxy-settings.sass
 delete mode 100644 src/renderer/components/sponsor-block-settings/sponsor-block-settings.css
 create mode 100644 src/renderer/components/sponsor-block-settings/sponsor-block-settings.sass
 delete mode 100644 src/renderer/components/subscription-settings/subscription-settings.css
 create mode 100644 src/renderer/components/subscription-settings/subscription-settings.sass
 delete mode 100644 src/renderer/components/theme-settings/theme-settings.css
 create mode 100644 src/renderer/components/theme-settings/theme-settings.sass

diff --git a/src/renderer/components/data-settings/data-settings.vue b/src/renderer/components/data-settings/data-settings.vue
index f95aeefb9..e737e2fe6 100644
--- a/src/renderer/components/data-settings/data-settings.vue
+++ b/src/renderer/components/data-settings/data-settings.vue
@@ -1,10 +1,11 @@
 <template>
-  <ft-card
-    class="relative card"
-  >
-    <h3>
-      {{ $t("Settings.Data Settings.Data Settings") }}
-    </h3>
+  <details>
+    <summary>
+      <h3>
+        {{ $t("Settings.Data Settings.Data Settings") }}
+      </h3>
+    </summary>
+    <hr>
     <ft-flex-box>
       <ft-button
         :label="$t('Settings.Data Settings.Import Subscriptions')"
@@ -57,7 +58,7 @@
       :option-values="subscriptionsPromptValues"
       @click="exportSubscriptions"
     />
-  </ft-card>
+  </details>
 </template>
 
 <script src="./data-settings.js" />
diff --git a/src/renderer/components/distraction-settings/distraction-settings.vue b/src/renderer/components/distraction-settings/distraction-settings.vue
index 258e365de..aef21062d 100644
--- a/src/renderer/components/distraction-settings/distraction-settings.vue
+++ b/src/renderer/components/distraction-settings/distraction-settings.vue
@@ -1,12 +1,11 @@
 <template>
-  <ft-card
-    class="relative card"
-  >
-    <h3
-      class="videoTitle"
-    >
-      {{ $t("Settings.Distraction Free Settings.Distraction Free Settings") }}
-    </h3>
+  <details>
+    <summary>
+      <h3>
+        {{ $t("Settings.Distraction Free Settings.Distraction Free Settings") }}
+      </h3>
+    </summary>
+    <hr>
     <div class="switchColumnGrid">
       <div class="switchColumn">
         <ft-toggle-switch
@@ -90,7 +89,7 @@
         label="Manage My Distractions"
       />
     </ft-flex-box>
-  </ft-card>
+  </details>
 </template>
 
 <script src="./distraction-settings.js" />
diff --git a/src/renderer/components/external-player-settings/external-player-settings.vue b/src/renderer/components/external-player-settings/external-player-settings.vue
index 8a945fea8..59ab38804 100644
--- a/src/renderer/components/external-player-settings/external-player-settings.vue
+++ b/src/renderer/components/external-player-settings/external-player-settings.vue
@@ -1,12 +1,11 @@
 <template>
-  <ft-card
-    class="relative card"
-  >
-    <h3
-      class="videoTitle"
-    >
-      {{ $t("Settings.External Player Settings.External Player Settings") }}
-    </h3>
+  <details>
+    <summary>
+      <h3>
+        {{ $t("Settings.External Player Settings.External Player Settings") }}
+      </h3>
+    </summary>
+    <hr>
     <div class="switchColumnGrid">
       <div class="switchColumn">
         <ft-select
@@ -49,7 +48,7 @@
         @input="updateExternalPlayerCustomArgs"
       />
     </ft-flex-box>
-  </ft-card>
+  </details>
 </template>
 
 <script src="./external-player-settings.js" />
diff --git a/src/renderer/components/general-settings/general-settings.vue b/src/renderer/components/general-settings/general-settings.vue
index cc4b26fb1..c4a27713b 100644
--- a/src/renderer/components/general-settings/general-settings.vue
+++ b/src/renderer/components/general-settings/general-settings.vue
@@ -1,12 +1,11 @@
 <template>
-  <ft-card
-    class="card"
-  >
-    <h3
-      class="videoTitle"
-    >
-      {{ $t("Settings.General Settings.General Settings") }}
-    </h3>
+  <details>
+    <summary>
+      <h3>
+        {{ $t("Settings.General Settings.General Settings") }}
+      </h3>
+    </summary>
+    <hr>
     <div class="switchColumnGrid">
       <div class="switchColumn">
         <ft-toggle-switch
@@ -130,7 +129,7 @@
         @click="handleClearDefaultInstanceClick"
       />
     </ft-flex-box>
-  </ft-card>
+  </details>
 </template>
 
 <script src="./general-settings.js" />
diff --git a/src/renderer/components/player-settings/player-settings.vue b/src/renderer/components/player-settings/player-settings.vue
index 661b5a3da..cf258e38d 100644
--- a/src/renderer/components/player-settings/player-settings.vue
+++ b/src/renderer/components/player-settings/player-settings.vue
@@ -1,12 +1,11 @@
 <template>
-  <ft-card
-    class="relative card"
-  >
-    <h3
-      class="videoTitle"
-    >
-      {{ $t("Settings.Player Settings.Player Settings") }}
-    </h3>
+  <details>
+    <summary>
+      <h3>
+        {{ $t("Settings.Player Settings.Player Settings") }}
+      </h3>
+    </summary>
+    <hr>
     <div class="switchColumnGrid">
       <div class="switchColumn">
         <ft-toggle-switch
@@ -127,7 +126,7 @@
         @change="updateDefaultQuality"
       />
     </ft-flex-box>
-  </ft-card>
+  </details>
 </template>
 
 <script src="./player-settings.js" />
diff --git a/src/renderer/components/privacy-settings/privacy-settings.vue b/src/renderer/components/privacy-settings/privacy-settings.vue
index d39b7214a..86052ea6e 100644
--- a/src/renderer/components/privacy-settings/privacy-settings.vue
+++ b/src/renderer/components/privacy-settings/privacy-settings.vue
@@ -1,10 +1,11 @@
 <template>
-  <ft-card
-    class="relative card"
-  >
-    <h3>
-      {{ $t("Settings.Privacy Settings.Privacy Settings") }}
-    </h3>
+  <details>
+    <summary>
+      <h3>
+        {{ $t("Settings.Privacy Settings.Privacy Settings") }}
+      </h3>
+    </summary>
+    <hr>
     <div class="switchColumnGrid">
       <div class="switchColumn">
         <ft-toggle-switch
@@ -75,7 +76,7 @@
       :option-values="promptValues"
       @click="handleRemoveSubscriptions"
     />
-  </ft-card>
+  </details>
 </template>
 
 <script src="./privacy-settings.js" />
diff --git a/src/renderer/components/proxy-settings/proxy-settings.css b/src/renderer/components/proxy-settings/proxy-settings.css
deleted file mode 100644
index 40b512de5..000000000
--- a/src/renderer/components/proxy-settings/proxy-settings.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.relative {
-  position: relative;
-}
-
-.card {
-  width: 85%;
-  margin: 0 auto;
-  margin-bottom: 10px;
-}
-
-.center {
-  text-align: center;
-}
-
-@media only screen and (max-width: 680px) {
-  .card {
-    width: 90%;
-  }
-}
-
-@media only screen and (max-width: 500px) {
-  .subscriptionSettingsFlexBox {
-    justify-content: flex-start;
-  }
-}
diff --git a/src/renderer/components/proxy-settings/proxy-settings.sass b/src/renderer/components/proxy-settings/proxy-settings.sass
new file mode 100644
index 000000000..a1ddf931d
--- /dev/null
+++ b/src/renderer/components/proxy-settings/proxy-settings.sass
@@ -0,0 +1,5 @@
+@use "../../sass-partials/settings"
+
+@media only screen and (max-width: 500px)
+  .subscriptionSettingsFlexBox
+    justify-content: flex-start
diff --git a/src/renderer/components/proxy-settings/proxy-settings.vue b/src/renderer/components/proxy-settings/proxy-settings.vue
index 34c2194b4..79b9b024d 100644
--- a/src/renderer/components/proxy-settings/proxy-settings.vue
+++ b/src/renderer/components/proxy-settings/proxy-settings.vue
@@ -1,12 +1,11 @@
 <template>
-  <ft-card
-    class="relative card"
-  >
-    <h3
-      class="videoTitle"
-    >
-      {{ $t("Settings.Proxy Settings.Proxy Settings") }}
-    </h3>
+  <details>
+    <summary>
+      <h3>
+        {{ $t("Settings.Proxy Settings.Proxy Settings") }}
+      </h3>
+    </summary>
+    <hr>
     <ft-flex-box class="subscriptionSettingsFlexBox">
       <ft-toggle-switch
         :label="$t('Settings.Proxy Settings.Enable Tor / Proxy')"
@@ -71,8 +70,8 @@
         {{ $t('Settings.Proxy Settings.City') }}: {{ proxyCity }}
       </p>
     </div>
-  </ft-card>
+  </details>
 </template>
 
 <script src="./proxy-settings.js" />
-<style scoped src="./proxy-settings.css" />
+<style scoped lang="sass" src="./proxy-settings.sass" />
diff --git a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.css b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.css
deleted file mode 100644
index 97e780cc2..000000000
--- a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.relative {
-  position: relative;
-}
-
-.card {
-  width: 85%;
-  margin: 0 auto;
-  margin-bottom: 10px;
-}
-
-.center {
-  text-align: center;
-}
-
-@media only screen and (max-width: 680px) {
-  .card {
-    width: 90%;
-  }
-}
-
-@media only screen and (max-width: 500px) {
-  .sponsorBlockSettingsFlexBox {
-    justify-content: flex-start;
-  }
-}
diff --git a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.sass b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.sass
new file mode 100644
index 000000000..89db0c8c1
--- /dev/null
+++ b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.sass
@@ -0,0 +1,5 @@
+@use "../../sass-partials/settings"
+
+@media only screen and (max-width: 500px)
+  .sponsorBlockSettingsFlexBox
+    justify-content: flex-start
\ No newline at end of file
diff --git a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
index e57d62ed6..06ef85410 100644
--- a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
+++ b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
@@ -1,12 +1,11 @@
 <template>
-  <ft-card
-    class="relative card"
-  >
-    <h3
-      class="videoTitle"
-    >
-      {{ $t("Settings.SponsorBlock Settings.SponsorBlock Settings") }}
-    </h3>
+  <details>
+    <summary>
+      <h3>
+        {{ $t("Settings.SponsorBlock Settings.SponsorBlock Settings") }}
+      </h3>
+    </summary>
+    <hr>
     <ft-flex-box class="sponsorBlockSettingsFlexBox">
       <ft-toggle-switch
         :label="$t('Settings.SponsorBlock Settings.Enable SponsorBlock')"
@@ -30,8 +29,8 @@
         @input="handleUpdateSponsorBlockUrl"
       />
     </ft-flex-box>
-  </ft-card>
+  </details>
 </template>
 
 <script src="./sponsor-block-settings.js" />
-<style scoped src="./sponsor-block-settings.css" />
+<style scoped lang="sass" src="./sponsor-block-settings.sass" />
diff --git a/src/renderer/components/subscription-settings/subscription-settings.css b/src/renderer/components/subscription-settings/subscription-settings.css
deleted file mode 100644
index befd5bb04..000000000
--- a/src/renderer/components/subscription-settings/subscription-settings.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.relative {
-  position: relative;
-}
-
-.card {
-  width: 85%;
-  margin: 0 auto;
-  margin-bottom: 10px;
-}
-
-@media only screen and (max-width: 680px) {
-  .card {
-    width: 90%;
-  }
-}
-
-@media only screen and (max-width: 500px) {
-  .subscriptionSettingsFlexBox {
-    justify-content: flex-start;
-  }
-}
diff --git a/src/renderer/components/subscription-settings/subscription-settings.sass b/src/renderer/components/subscription-settings/subscription-settings.sass
new file mode 100644
index 000000000..21c65d94d
--- /dev/null
+++ b/src/renderer/components/subscription-settings/subscription-settings.sass
@@ -0,0 +1,6 @@
+@use "../../sass-partials/settings"
+
+@media only screen and (max-width: 500px)
+  .subscriptionSettingsFlexBox
+    justify-content: flex-start
+    
diff --git a/src/renderer/components/subscription-settings/subscription-settings.vue b/src/renderer/components/subscription-settings/subscription-settings.vue
index 936c81f66..f56addf9c 100644
--- a/src/renderer/components/subscription-settings/subscription-settings.vue
+++ b/src/renderer/components/subscription-settings/subscription-settings.vue
@@ -1,12 +1,11 @@
 <template>
-  <ft-card
-    class="relative card"
-  >
-    <h3
-      class="videoTitle"
-    >
-      {{ $t("Settings.Subscription Settings.Subscription Settings") }}
-    </h3>
+  <details>
+    <summary>
+      <h3>
+        {{ $t("Settings.Subscription Settings.Subscription Settings") }}
+      </h3>
+    </summary>
+    <hr>
     <ft-flex-box class="subscriptionSettingsFlexBox">
       <ft-toggle-switch
         :label="$t('Settings.Subscription Settings.Hide Videos on Watch')"
@@ -37,8 +36,8 @@
         label="Manage My Subscriptions"
       />
     </ft-flex-box>
-  </ft-card>
+  </details>
 </template>
 
 <script src="./subscription-settings.js" />
-<style scoped src="./subscription-settings.css" />
+<style scoped lang="sass" src="./subscription-settings.sass" />
diff --git a/src/renderer/components/theme-settings/theme-settings.css b/src/renderer/components/theme-settings/theme-settings.css
deleted file mode 100644
index a5236ccaa..000000000
--- a/src/renderer/components/theme-settings/theme-settings.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.relative {
-  position: relative;
-}
-
-.card {
-  width: 85%;
-  margin: 0 auto;
-  margin-bottom: 10px;
-}
-
-@media only screen and (max-width: 680px) {
-  .card {
-    width: 90%;
-  }
-}
diff --git a/src/renderer/components/theme-settings/theme-settings.sass b/src/renderer/components/theme-settings/theme-settings.sass
new file mode 100644
index 000000000..05cb0dfb9
--- /dev/null
+++ b/src/renderer/components/theme-settings/theme-settings.sass
@@ -0,0 +1 @@
+@use "../../sass-partials/settings"
diff --git a/src/renderer/components/theme-settings/theme-settings.vue b/src/renderer/components/theme-settings/theme-settings.vue
index 1e7fde7e5..9633aba53 100644
--- a/src/renderer/components/theme-settings/theme-settings.vue
+++ b/src/renderer/components/theme-settings/theme-settings.vue
@@ -1,10 +1,11 @@
 <template>
-  <ft-card
-    class="relative card"
-  >
-    <h3>
-      {{ $t("Settings.Theme Settings.Theme Settings") }}
-    </h3>
+  <details>
+    <summary>
+      <h3>
+        {{ $t("Settings.Theme Settings.Theme Settings") }}
+      </h3>
+    </summary>
+    <hr>
     <ft-flex-box>
       <ft-toggle-switch
         :label="$t('Settings.Theme Settings.Match Top Bar with Main Color')"
@@ -64,8 +65,8 @@
       :option-values="restartPromptValues"
       @click="handleSmoothScrolling"
     />
-  </ft-card>
+  </details>
 </template>
 
 <script src="./theme-settings.js" />
-<style scoped src="./theme-settings.css" />
+<style scoped lang="sass" src="./theme-settings.sass" />
diff --git a/src/renderer/sass-partials/_settings.sass b/src/renderer/sass-partials/_settings.sass
index 1a9cdf3cf..1674529a4 100644
--- a/src/renderer/sass-partials/_settings.sass
+++ b/src/renderer/sass-partials/_settings.sass
@@ -16,10 +16,25 @@
   flex-direction: column
   justify-items: start
 
-.card
+details
+  background-color: var(--card-bg-color)
   width: 85%
   margin: 0 auto
-  margin-bottom: 10px
+
+  hr
+    width: 100%
+    height: 2px
+    border: 0
+    margin-top: -1px
+    background-color: var(--primary-color)
+
+  summary
+    display: block
+    cursor: pointer
+    padding: 1px 1px 1px 1px
+    
+    h3
+      margin-left: 2%
 
   @media only screen and (max-width: 680px)
     width: 90%
diff --git a/src/renderer/views/Settings/Settings.css b/src/renderer/views/Settings/Settings.css
index e69de29bb..c308b9a83 100644
--- a/src/renderer/views/Settings/Settings.css
+++ b/src/renderer/views/Settings/Settings.css
@@ -0,0 +1,7 @@
+hr {
+  height: 2px;
+  width: 85%;
+  margin: 0 auto;
+  border: 0;
+  background-color: var(--scrollbar-color-hover);
+}
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index f801e6dad..bd766dcef 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@@ -1,14 +1,23 @@
 <template>
   <div>
     <general-settings />
+    <hr>
     <theme-settings />
+    <hr>
     <player-settings />
+    <hr>
     <external-player-settings v-if="usingElectron" />
+    <hr>
     <subscription-settings />
+    <hr>
     <distraction-settings />
+    <hr>
     <privacy-settings />
+    <hr>
     <data-settings />
+    <hr>
     <proxy-settings />
+    <hr>
     <sponsor-block-settings />
   </div>
 </template>