tesses50
/
freetube
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/renderer/components/data-settings/data-settings.vue
View File

@ -1,10 +1,11 @@
<template> <template>
<ft-card <details>
class="relative card" <summary>
> <h3>
<h3> {{ $t("Settings.Data Settings.Data Settings") }}
{{ $t("Settings.Data Settings.Data Settings") }} </h3>
</h3> </summary>
<hr>
<ft-flex-box> <ft-flex-box>
<ft-button <ft-button
:label="$t('Settings.Data Settings.Import Subscriptions')" :label="$t('Settings.Data Settings.Import Subscriptions')"
@ -57,7 +58,7 @@
:option-values="subscriptionsPromptValues" :option-values="subscriptionsPromptValues"
@click="exportSubscriptions" @click="exportSubscriptions"
/> />
</ft-card> </details>
</template> </template>
<script src="./data-settings.js" /> <script src="./data-settings.js" />

17
src/renderer/components/distraction-settings/distraction-settings.vue
View File

@ -1,12 +1,11 @@
<template> <template>
<ft-card <details>
class="relative card" <summary>
> <h3>
<h3 {{ $t("Settings.Distraction Free Settings.Distraction Free Settings") }}
class="videoTitle" </h3>
> </summary>
{{ $t("Settings.Distraction Free Settings.Distraction Free Settings") }} <hr>
</h3>
<div class="switchColumnGrid"> <div class="switchColumnGrid">
<div class="switchColumn"> <div class="switchColumn">
<ft-toggle-switch <ft-toggle-switch
@ -90,7 +89,7 @@
label="Manage My Distractions" label="Manage My Distractions"
/> />
</ft-flex-box> </ft-flex-box>
</ft-card> </details>
</template> </template>
<script src="./distraction-settings.js" /> <script src="./distraction-settings.js" />

17
src/renderer/components/external-player-settings/external-player-settings.vue
View File

@ -1,12 +1,11 @@
<template> <template>
<ft-card <details>
class="relative card" <summary>
> <h3>
<h3 {{ $t("Settings.External Player Settings.External Player Settings") }}
class="videoTitle" </h3>
> </summary>
{{ $t("Settings.External Player Settings.External Player Settings") }} <hr>
</h3>
<div class="switchColumnGrid"> <div class="switchColumnGrid">
<div class="switchColumn"> <div class="switchColumn">
<ft-select <ft-select
@ -49,7 +48,7 @@
@input="updateExternalPlayerCustomArgs" @input="updateExternalPlayerCustomArgs"
/> />
</ft-flex-box> </ft-flex-box>
</ft-card> </details>
</template> </template>
<script src="./external-player-settings.js" /> <script src="./external-player-settings.js" />

17
src/renderer/components/general-settings/general-settings.vue
View File

@ -1,12 +1,11 @@
<template> <template>
<ft-card <details>
class="card" <summary>
> <h3>
<h3 {{ $t("Settings.General Settings.General Settings") }}
class="videoTitle" </h3>
> </summary>
{{ $t("Settings.General Settings.General Settings") }} <hr>
</h3>
<div class="switchColumnGrid"> <div class="switchColumnGrid">
<div class="switchColumn"> <div class="switchColumn">
<ft-toggle-switch <ft-toggle-switch
@ -130,7 +129,7 @@
@click="handleClearDefaultInstanceClick" @click="handleClearDefaultInstanceClick"
/> />
</ft-flex-box> </ft-flex-box>
</ft-card> </details>
</template> </template>
<script src="./general-settings.js" /> <script src="./general-settings.js" />

17
src/renderer/components/player-settings/player-settings.vue
View File

@ -1,12 +1,11 @@
<template> <template>
<ft-card <details>
class="relative card" <summary>
> <h3>
<h3 {{ $t("Settings.Player Settings.Player Settings") }}
class="videoTitle" </h3>
> </summary>
{{ $t("Settings.Player Settings.Player Settings") }} <hr>
</h3>
<div class="switchColumnGrid"> <div class="switchColumnGrid">
<div class="switchColumn"> <div class="switchColumn">
<ft-toggle-switch <ft-toggle-switch
@ -127,7 +126,7 @@
@change="updateDefaultQuality" @change="updateDefaultQuality"
/> />
</ft-flex-box> </ft-flex-box>
</ft-card> </details>
</template> </template>
<script src="./player-settings.js" /> <script src="./player-settings.js" />

15
src/renderer/components/privacy-settings/privacy-settings.vue
View File

@ -1,10 +1,11 @@
<template> <template>
<ft-card <details>
class="relative card" <summary>
> <h3>
<h3> {{ $t("Settings.Privacy Settings.Privacy Settings") }}
{{ $t("Settings.Privacy Settings.Privacy Settings") }} </h3>
</h3> </summary>
<hr>
<div class="switchColumnGrid"> <div class="switchColumnGrid">
<div class="switchColumn"> <div class="switchColumn">
<ft-toggle-switch <ft-toggle-switch
@ -75,7 +76,7 @@
:option-values="promptValues" :option-values="promptValues"
@click="handleRemoveSubscriptions" @click="handleRemoveSubscriptions"
/> />
</ft-card> </details>
</template> </template>
<script src="./privacy-settings.js" /> <script src="./privacy-settings.js" />

25
src/renderer/components/proxy-settings/proxy-settings.css
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;
}
}

5
src/renderer/components/proxy-settings/proxy-settings.sass Normal file
View File

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

19
src/renderer/components/proxy-settings/proxy-settings.vue
View File

@ -1,12 +1,11 @@
<template> <template>
<ft-card <details>
class="relative card" <summary>
> <h3>
<h3 {{ $t("Settings.Proxy Settings.Proxy Settings") }}
class="videoTitle" </h3>
> </summary>
{{ $t("Settings.Proxy Settings.Proxy Settings") }} <hr>
</h3>
<ft-flex-box class="subscriptionSettingsFlexBox"> <ft-flex-box class="subscriptionSettingsFlexBox">
<ft-toggle-switch <ft-toggle-switch
:label="$t('Settings.Proxy Settings.Enable Tor / Proxy')" :label="$t('Settings.Proxy Settings.Enable Tor / Proxy')"
@ -71,8 +70,8 @@
{{ $t('Settings.Proxy Settings.City') }}: {{ proxyCity }} {{ $t('Settings.Proxy Settings.City') }}: {{ proxyCity }}
</p> </p>
</div> </div>
</ft-card> </details>
</template> </template>
<script src="./proxy-settings.js" /> <script src="./proxy-settings.js" />
<style scoped src="./proxy-settings.css" /> <style scoped lang="sass" src="./proxy-settings.sass" />

25
src/renderer/components/sponsor-block-settings/sponsor-block-settings.css
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;
}
}

5
src/renderer/components/sponsor-block-settings/sponsor-block-settings.sass Normal file
View File

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

19
src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
View File

@ -1,12 +1,11 @@
<template> <template>
<ft-card <details>
class="relative card" <summary>
> <h3>
<h3 {{ $t("Settings.SponsorBlock Settings.SponsorBlock Settings") }}
class="videoTitle" </h3>
> </summary>
{{ $t("Settings.SponsorBlock Settings.SponsorBlock Settings") }} <hr>
</h3>
<ft-flex-box class="sponsorBlockSettingsFlexBox"> <ft-flex-box class="sponsorBlockSettingsFlexBox">
<ft-toggle-switch <ft-toggle-switch
:label="$t('Settings.SponsorBlock Settings.Enable SponsorBlock')" :label="$t('Settings.SponsorBlock Settings.Enable SponsorBlock')"
@ -30,8 +29,8 @@
@input="handleUpdateSponsorBlockUrl" @input="handleUpdateSponsorBlockUrl"
/> />
</ft-flex-box> </ft-flex-box>
</ft-card> </details>
</template> </template>
<script src="./sponsor-block-settings.js" /> <script src="./sponsor-block-settings.js" />
<style scoped src="./sponsor-block-settings.css" /> <style scoped lang="sass" src="./sponsor-block-settings.sass" />

21
src/renderer/components/subscription-settings/subscription-settings.css
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;
}
}

6
src/renderer/components/subscription-settings/subscription-settings.sass Normal file
View File

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

19
src/renderer/components/subscription-settings/subscription-settings.vue
View File

@ -1,12 +1,11 @@
<template> <template>
<ft-card <details>
class="relative card" <summary>
> <h3>
<h3 {{ $t("Settings.Subscription Settings.Subscription Settings") }}
class="videoTitle" </h3>
> </summary>
{{ $t("Settings.Subscription Settings.Subscription Settings") }} <hr>
</h3>
<ft-flex-box class="subscriptionSettingsFlexBox"> <ft-flex-box class="subscriptionSettingsFlexBox">
<ft-toggle-switch <ft-toggle-switch
:label="$t('Settings.Subscription Settings.Hide Videos on Watch')" :label="$t('Settings.Subscription Settings.Hide Videos on Watch')"
@ -37,8 +36,8 @@
label="Manage My Subscriptions" label="Manage My Subscriptions"
/> />
</ft-flex-box> </ft-flex-box>
</ft-card> </details>
</template> </template>
<script src="./subscription-settings.js" /> <script src="./subscription-settings.js" />
<style scoped src="./subscription-settings.css" /> <style scoped lang="sass" src="./subscription-settings.sass" />

15
src/renderer/components/theme-settings/theme-settings.css
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%;
}
}

1
src/renderer/components/theme-settings/theme-settings.sass Normal file
View File

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

17
src/renderer/components/theme-settings/theme-settings.vue
View File

@ -1,10 +1,11 @@
<template> <template>
<ft-card <details>
class="relative card" <summary>
> <h3>
<h3> {{ $t("Settings.Theme Settings.Theme Settings") }}
{{ $t("Settings.Theme Settings.Theme Settings") }} </h3>
</h3> </summary>
<hr>
<ft-flex-box> <ft-flex-box>
<ft-toggle-switch <ft-toggle-switch
:label="$t('Settings.Theme Settings.Match Top Bar with Main Color')" :label="$t('Settings.Theme Settings.Match Top Bar with Main Color')"
@ -64,8 +65,8 @@
:option-values="restartPromptValues" :option-values="restartPromptValues"
@click="handleSmoothScrolling" @click="handleSmoothScrolling"
/> />
</ft-card> </details>
</template> </template>
<script src="./theme-settings.js" /> <script src="./theme-settings.js" />
<style scoped src="./theme-settings.css" /> <style scoped lang="sass" src="./theme-settings.sass" />

19
src/renderer/sass-partials/_settings.sass
View File

@ -16,10 +16,25 @@
flex-direction: column flex-direction: column
justify-items: start justify-items: start
.card details
background-color: var(--card-bg-color)
width: 85% width: 85%
margin: 0 auto 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) @media only screen and (max-width: 680px)
width: 90% width: 90%

7
src/renderer/views/Settings/Settings.css
View File

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

9
src/renderer/views/Settings/Settings.vue
View File

@ -1,14 +1,23 @@
<template> <template>
<div> <div>
<general-settings /> <general-settings />
<hr>
<theme-settings /> <theme-settings />
<hr>
<player-settings /> <player-settings />
<hr>
<external-player-settings v-if="usingElectron" /> <external-player-settings v-if="usingElectron" />
<hr>
<subscription-settings /> <subscription-settings />
<hr>
<distraction-settings /> <distraction-settings />
<hr>
<privacy-settings /> <privacy-settings />
<hr>
<data-settings /> <data-settings />
<hr>
<proxy-settings /> <proxy-settings />
<hr>
<sponsor-block-settings /> <sponsor-block-settings />
</div> </div>
</template> </template>