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
GitHub
parent
f7e918ab23
commit
cfeac8c7f1
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@use "../../sass-partials/settings"
|
||||
|
||||
@media only screen and (max-width: 500px)
|
||||
.subscriptionSettingsFlexBox
|
||||
justify-content: flex-start
|
||||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@use "../../sass-partials/settings"
|
||||
|
||||
@media only screen and (max-width: 500px)
|
||||
.sponsorBlockSettingsFlexBox
|
||||
justify-content: flex-start
|
||||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
@use "../../sass-partials/settings"
|
||||
|
||||
@media only screen and (max-width: 500px)
|
||||
.subscriptionSettingsFlexBox
|
||||
justify-content: flex-start
|
||||
|
||||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
@use "../../sass-partials/settings"
|
||||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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%
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
hr {
|
||||
height: 2px;
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
border: 0;
|
||||
background-color: var(--scrollbar-color-hover);
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue