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
This commit is contained in:
Jason 2021-09-15 02:03:00 +00:00 committed by GitHub
parent f7e918ab23
commit cfeac8c7f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 134 additions and 176 deletions

View File

@ -1,10 +1,11 @@
<template>
<ft-card
class="relative card"
>
<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" />

View File

@ -1,12 +1,11 @@
<template>
<ft-card
class="relative card"
>
<h3
class="videoTitle"
>
<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" />

View File

@ -1,12 +1,11 @@
<template>
<ft-card
class="relative card"
>
<h3
class="videoTitle"
>
<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" />

View File

@ -1,12 +1,11 @@
<template>
<ft-card
class="card"
>
<h3
class="videoTitle"
>
<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" />

View File

@ -1,12 +1,11 @@
<template>
<ft-card
class="relative card"
>
<h3
class="videoTitle"
>
<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" />

View File

@ -1,10 +1,11 @@
<template>
<ft-card
class="relative card"
>
<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" />

View File

@ -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;
}
}

View File

@ -0,0 +1,5 @@
@use "../../sass-partials/settings"
@media only screen and (max-width: 500px)
.subscriptionSettingsFlexBox
justify-content: flex-start

View File

@ -1,12 +1,11 @@
<template>
<ft-card
class="relative card"
>
<h3
class="videoTitle"
>
<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" />

View File

@ -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;
}
}

View File

@ -0,0 +1,5 @@
@use "../../sass-partials/settings"
@media only screen and (max-width: 500px)
.sponsorBlockSettingsFlexBox
justify-content: flex-start

View File

@ -1,12 +1,11 @@
<template>
<ft-card
class="relative card"
>
<h3
class="videoTitle"
>
<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" />

View File

@ -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;
}
}

View File

@ -0,0 +1,6 @@
@use "../../sass-partials/settings"
@media only screen and (max-width: 500px)
.subscriptionSettingsFlexBox
justify-content: flex-start

View File

@ -1,12 +1,11 @@
<template>
<ft-card
class="relative card"
>
<h3
class="videoTitle"
>
<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" />

View File

@ -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%;
}
}

View File

@ -0,0 +1 @@
@use "../../sass-partials/settings"

View File

@ -1,10 +1,11 @@
<template>
<ft-card
class="relative card"
>
<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" />

View File

@ -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%

View File

@ -0,0 +1,7 @@
hr {
height: 2px;
width: 85%;
margin: 0 auto;
border: 0;
background-color: var(--scrollbar-color-hover);
}

View File

@ -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>