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

Merge pull request #20 from cloudrac3r/refactor-settings 

Refactor settings styles
This commit is contained in:
Preston 2020-04-12 00:05:55 -04:00 committed by GitHub
parent 88156a5a25 eec1f19821
commit e8ec6d8a8d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 202 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
src/renderer/components/ft-select/ft-select.css
View File

@ -22,110 +22,110 @@
/* select starting stylings ------------------------------*/
.select {
position: relative;
width: 200px;
padding: 10px 10px 10px 0;
margin-top: 10px;
position: relative;
width: 200px;
padding: 0px 10px 10px 0;
margin-top: 30px;
}
.select-text {
position: relative;
font-family: inherit;
background-color: transparent;
position: relative;
font-family: inherit;
background-color: transparent;
color: var(--primary-text-color);
width: 200px;
padding: 10px 10px 10px 0;
font-size: 18px;
border-radius: 0;
border: none;
width: 200px;
padding: 10px 10px 10px 0;
font-size: 18px;
border-radius: 0;
border: none;
}
.select option {
color: #000000;
color: #000000;
}
/* Remove focus */
.select-text:focus {
outline: none;
outline: none;
}
/* Use custom arrow */
/* Use custom arrow */
.select .select-text {
appearance: none;
-webkit-appearance:none
appearance: none;
-webkit-appearance:none
}
.iconSelect {
position: absolute;
top: 18px;
right: 10px;
/* Styling the down arrow */
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
pointer-events: none;
position: absolute;
top: 10px;
right: 15px;
/* Styling the down arrow */
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
pointer-events: none;
color: var(--tertiary-text-color);
}
/* LABEL ======================================= */
.select-label {
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 0;
top: 10px;
transition: 0.2s ease all;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 0;
top: 10px;
transition: 0.2s ease all;
color: var(--tertiary-text-color);
}
/* active state */
.select-text:focus ~ .select-label, .select-text:valid ~ .select-label {
color: var(--accent-color);
top: -20px;
transition: 0.2s ease all;
font-size: 14px;
color: var(--accent-color);
top: -20px;
transition: 0.2s ease all;
font-size: 14px;
}
/* BOTTOM BARS ================================= */
.select-bar {
position: relative;
display: block;
width: 200px;
position: relative;
display: block;
width: 200px;
}
.select-bar:before, .select-bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: var(--accent-color);
transition: 0.2s ease all;
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: var(--accent-color);
transition: 0.2s ease all;
}
.select-bar:before {
left: 50%;
left: 50%;
}
.select-bar:after {
right: 50%;
right: 50%;
}
/* active state */
.select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after {
width: 50%;
width: 50%;
}
/* HIGHLIGHTER ================================== */
.select-highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}

1
src/renderer/components/ft-slider/ft-slider.css
View File

@ -10,6 +10,7 @@
font-size: 16px;
line-height: 1.5;
padding: 5px;
margin: 12px 8px;
}
/* Input */

74
src/renderer/components/ft-toggle-switch/ft-toggle-switch.css
View File

@ -1,74 +0,0 @@
/* Thanks to Guus Lieben for the Material Design Switch */
.switch-input {
display: none;
}
.switch-label {
position: relative;
display: inline-block;
min-width: 112px;
cursor: pointer;
font-weight: 500;
text-align: left;
margin: 16px;
padding: 16px 0 16px 44px;
}
.switch-label:before,
.switch-label:after {
content: "";
position: absolute;
margin: 0;
outline: 0;
top: 50%;
-ms-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.switch-label:before {
left: 1px;
width: 34px;
height: 14px;
background-color: #9E9E9E;
border-radius: 8px;
}
.switch-label:after {
left: 0;
width: 20px;
height: 20px;
background-color: #FAFAFA;
border-radius: 50%;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
}
.switch-label .toggle--on {
display: none;
}
.switch-label .toggle--off {
display: inline-block;
}
.switch-input:checked+.switch-label:before {
background-color: var(--accent-color-light);
}
.switch-input:checked+.switch-label:after {
background-color: var(--accent-color);
-ms-transform: translate(80%, -50%);
-webkit-transform: translate(80%, -50%);
transform: translate(80%, -50%);
}
.switch-input:checked+.switch-label .toggle--on {
display: inline-block;
}
.switch-input:checked+.switch-label .toggle--off {
display: none;
}

4
src/renderer/components/ft-toggle-switch/ft-toggle-switch.js
View File

@ -10,6 +10,10 @@ export default Vue.extend({
defaultValue: {
type: Boolean,
default: false
},
compact: {
type: Boolean,
default: false
}
},
data: function () {

54
src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass Normal file
View File

@ -0,0 +1,54 @@
/* Thanks to Guus Lieben for the Material Design Switch */
.switch-input
display: none
.switch-label
position: relative
display: inline-block
min-width: 112px
cursor: pointer
font-weight: 500
text-align: left
margin: 16px
padding: 16px 0 16px 44px
&.compact
margin: 0px
padding: 12px 0 12px 44px
&:before, &:after
content: ""
position: absolute
margin: 0
outline: 0
top: 50%
-ms-transform: translate(0, -50%)
-webkit-transform: translate(0, -50%)
transform: translate(0, -50%)
-webkit-transition: all 0.3s ease
transition: all 0.3s ease
&:before
left: 1px
width: 34px
height: 14px
background-color: #9E9E9E
border-radius: 8px
.switch-input:checked + &
background-color: var(--accent-color-light)
&:after
left: 0
width: 20px
height: 20px
background-color: #FAFAFA
border-radius: 50%
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084)
.switch-input:checked + &
background-color: var(--accent-color)
-ms-transform: translate(80%, -50%)
-webkit-transform: translate(80%, -50%)
transform: translate(80%, -50%)

3
src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue
View File

@ -12,6 +12,7 @@
<label
:for="id"
class="switch-label"
:class="{compact}"
>
{{ label }}
</label>
@ -19,4 +20,4 @@
</template>
<script src="./ft-toggle-switch.js" />
<style scoped src="./ft-toggle-switch.css" />
<style scoped lang="sass" src="./ft-toggle-switch.sass" />

21
src/renderer/components/general-settings/general-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: 460px) {
.generalSettingsFlexBox {
justify-content: flex-start;
}
}

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

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

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

@ -1,6 +1,6 @@
<template>
<ft-card
class="relative card">
class="card">
<h3
class="videoTitle"
>
@ -18,8 +18,7 @@
@change="updateCheckForUpdates"
/>
</ft-flex-box>
<br>
<ft-flex-box>
<div class="switchGrid">
<ft-select
placeholder="Preferred API Backend"
:value="backendPreference"
@ -55,9 +54,9 @@
:select-values="thumbnailTypeValues"
@change="updateThumbnailPreference"
/>
</ft-flex-box>
</div>
</ft-card>
</template>
<script src="./general-settings.js" />
<style scoped src="./general-settings.css" />
<style scoped lang="sass" src="./general-settings.sass" />

21
src/renderer/components/player-settings/player-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: 460px) {
.playerSettingsFlexBox {
justify-content: flex-start;
}
}

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

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

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

@ -6,44 +6,54 @@
>
{{ title }}
</h3>
<ft-flex-box class="playerSettingsFlexBox">
<ft-toggle-switch
label="Remember History"
:default-value="rememberHistory"
@change="updateRememberHistory"
/>
<ft-toggle-switch
label="Autoplay Videos"
:default-value="autoplayVideos"
@change="updateAutoplayVideos"
/>
<ft-toggle-switch
label="Autoplay Playlists"
:default-value="autoplayPlaylists"
@change="updateAutoplayPlaylists"
/>
<ft-toggle-switch
label="Play Next Video"
:default-value="playNextVideo"
@change="updatePlayNextVideo"
/>
<ft-toggle-switch
label="Enable Subtitles by Default"
:default-value="enableSubtitles"
@change="updateEnableSubtitles"
/>
<ft-toggle-switch
label="Force Local Backend for Legacy Formats"
:default-value="forceLocalBackendForLegacy"
@change="updateForceLocalBackendForLegacy"
/>
<ft-toggle-switch
label="Proxy Videos Through Invidious"
:default-value="proxyVideos"
@change="updateProxyVideos"
/>
</ft-flex-box>
<br>
<div class="switchColumnGrid">
<div class="switchColumn">
<ft-toggle-switch
label="Remember History"
:compact=true
:default-value="rememberHistory"
@change="updateRememberHistory"
/>
<ft-toggle-switch
label="Enable Subtitles by Default"
:compact=true
:default-value="enableSubtitles"
@change="updateEnableSubtitles"
/>
<ft-toggle-switch
label="Force Local Backend for Legacy Formats"
:compact=true
:default-value="forceLocalBackendForLegacy"
@change="updateForceLocalBackendForLegacy"
/>
<ft-toggle-switch
label="Proxy Videos Through Invidious"
:compact=true
:default-value="proxyVideos"
@change="updateProxyVideos"
/>
</div>
<div class="switchColumn">
<ft-toggle-switch
label="Autoplay Videos"
:compact=true
:default-value="autoplayVideos"
@change="updateAutoplayVideos"
/>
<ft-toggle-switch
label="Autoplay Playlists"
:compact=true
:default-value="autoplayPlaylists"
@change="updateAutoplayPlaylists"
/>
<ft-toggle-switch
label="Play Next Video"
:compact=true
:default-value="playNextVideo"
@change="updatePlayNextVideo"
/>
</div>
</div>
<ft-flex-box>
<ft-slider
label="Default Volume"
@ -64,7 +74,6 @@
@change="updateDefaultPlayback"
/>
</ft-flex-box>
<br>
<ft-flex-box>
<ft-select
placeholder="Default Video Format"
@ -85,4 +94,4 @@
</template>
<script src="./player-settings.js" />
<style scoped src="./player-settings.css" />
<style scoped lang="sass" src="./player-settings.sass" />

29
src/renderer/sass-partials/_settings.sass Normal file
View File

@ -0,0 +1,29 @@
.switchGrid
display: grid
grid-template-columns: auto auto
justify-content: space-evenly
align-items: center
@media only screen and (max-width: 680px)
grid-template-columns: auto
.switchColumnGrid
@extend .switchGrid
align-items: start
.switchColumn
display: flex
flex-direction: column
justify-items: start
.card
width: 85%
margin: 0 auto
margin-bottom: 10px
@media only screen and (max-width: 680px)
width: 90%
@media only screen and (max-width: 460px)
.generalSettingsFlexBox, .playerSettingsFlexBox
justify-content: flex-start