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

Position buttons better in settings

This commit is contained in:
Cadence Ember 2020-03-28 00:37:54 +13:00
parent bd0e9af7ff
commit 6ca7f7e4ec
No known key found for this signature in database
GPG Key ID: 128B99B1B74A6412
13 changed files with 218 additions and 220 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 starting stylings ------------------------------*/
.select { .select {
position: relative; position: relative;
width: 200px; width: 200px;
padding: 10px 10px 10px 0; padding: 0px 10px 10px 0;
margin-top: 10px; margin-top: 30px;
} }
.select-text { .select-text {
position: relative; position: relative;
font-family: inherit; font-family: inherit;
background-color: transparent; background-color: transparent;
color: var(--primary-text-color); color: var(--primary-text-color);
width: 200px; width: 200px;
padding: 10px 10px 10px 0; padding: 10px 10px 10px 0;
font-size: 18px; font-size: 18px;
border-radius: 0; border-radius: 0;
border: none; border: none;
} }
.select option { .select option {
color: #000000; color: #000000;
} }
/* Remove focus */ /* Remove focus */
.select-text:focus { .select-text:focus {
outline: none; outline: none;
} }
/* Use custom arrow */ /* Use custom arrow */
.select .select-text { .select .select-text {
appearance: none; appearance: none;
-webkit-appearance:none -webkit-appearance:none
} }
.iconSelect { .iconSelect {
position: absolute; position: absolute;
top: 18px; top: 10px;
right: 10px; right: 15px;
/* Styling the down arrow */ /* Styling the down arrow */
padding: 0; padding: 0;
content: ''; content: '';
border-left: 6px solid transparent; border-left: 6px solid transparent;
border-right: 6px solid transparent; border-right: 6px solid transparent;
pointer-events: none; pointer-events: none;
color: var(--tertiary-text-color); color: var(--tertiary-text-color);
} }
/* LABEL ======================================= */ /* LABEL ======================================= */
.select-label { .select-label {
font-size: 18px; font-size: 18px;
font-weight: normal; font-weight: normal;
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
left: 0; left: 0;
top: 10px; top: 10px;
transition: 0.2s ease all; transition: 0.2s ease all;
color: var(--tertiary-text-color); color: var(--tertiary-text-color);
} }
/* active state */ /* active state */
.select-text:focus ~ .select-label, .select-text:valid ~ .select-label { .select-text:focus ~ .select-label, .select-text:valid ~ .select-label {
color: var(--accent-color); color: var(--accent-color);
top: -20px; top: -20px;
transition: 0.2s ease all; transition: 0.2s ease all;
font-size: 14px; font-size: 14px;
} }
/* BOTTOM BARS ================================= */ /* BOTTOM BARS ================================= */
.select-bar { .select-bar {
position: relative; position: relative;
display: block; display: block;
width: 200px; width: 200px;
} }
.select-bar:before, .select-bar:after { .select-bar:before, .select-bar:after {
content: ''; content: '';
height: 2px; height: 2px;
width: 0; width: 0;
bottom: 1px; bottom: 1px;
position: absolute; position: absolute;
background: var(--accent-color); background: var(--accent-color);
transition: 0.2s ease all; transition: 0.2s ease all;
} }
.select-bar:before { .select-bar:before {
left: 50%; left: 50%;
} }
.select-bar:after { .select-bar:after {
right: 50%; right: 50%;
} }
/* active state */ /* active state */
.select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after { .select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after {
width: 50%; width: 50%;
} }
/* HIGHLIGHTER ================================== */ /* HIGHLIGHTER ================================== */
.select-highlight { .select-highlight {
position: absolute; position: absolute;
height: 60%; height: 60%;
width: 100px; width: 100px;
top: 25%; top: 25%;
left: 0; left: 0;
pointer-events: none; pointer-events: none;
opacity: 0.5; opacity: 0.5;
} }

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

@ -10,6 +10,7 @@
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
padding: 5px; padding: 5px;
margin: 12px 8px;
} }
/* Input */ /* 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: { defaultValue: {
type: Boolean, type: Boolean,
default: false default: false
},
compact: {
type: Boolean,
default: false
} }
}, },
data: function () { data: function () {

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

@ -0,0 +1,68 @@
/* 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
padding: 12px 0 12px 44px
margin: 0px
.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.vue
View File

@ -11,7 +11,7 @@
> >
<label <label
:for="id" :for="id"
class="switch-label" :class='(compact ? "compact " : "")+"switch-label"'
> >
{{ label }} {{ label }}
</label> </label>
@ -19,4 +19,4 @@
</template> </template>
<script src="./ft-toggle-switch.js" /> <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"

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

@ -1,6 +1,6 @@
<template> <template>
<ft-card <ft-card
class="relative card"> class="card">
<h3 <h3
class="videoTitle" class="videoTitle"
> >
@ -9,17 +9,18 @@
<ft-flex-box class="generalSettingsFlexBox"> <ft-flex-box class="generalSettingsFlexBox">
<ft-toggle-switch <ft-toggle-switch
label="Fallback to Non-Preferred Backend on Failure" label="Fallback to Non-Preferred Backend on Failure"
:compact=true
:default-value="backendFallback" :default-value="backendFallback"
@change="updateBackendFallback" @change="updateBackendFallback"
/> />
<ft-toggle-switch <ft-toggle-switch
label="Check for Updates" label="Check for Updates"
:compact=true
:default-value="checkForUpdates" :default-value="checkForUpdates"
@change="updateCheckForUpdates" @change="updateCheckForUpdates"
/> />
</ft-flex-box> </ft-flex-box>
<br> <div class="switchGrid">
<ft-flex-box>
<ft-select <ft-select
placeholder="Preferred API Backend" placeholder="Preferred API Backend"
:value="backendPreference" :value="backendPreference"
@ -55,9 +56,9 @@
:select-values="thumbnailTypeValues" :select-values="thumbnailTypeValues"
@change="updateThumbnailPreference" @change="updateThumbnailPreference"
/> />
</ft-flex-box> </div>
</ft-card> </ft-card>
</template> </template>
<script src="./general-settings.js" /> <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 }} {{ title }}
</h3> </h3>
<ft-flex-box class="playerSettingsFlexBox"> <div class="switchColumnGrid">
<ft-toggle-switch <div class="switchColumn">
label="Remember History" <ft-toggle-switch
:default-value="rememberHistory" label="Remember History"
@change="updateRememberHistory" :compact=true
/> :default-value="rememberHistory"
<ft-toggle-switch @change="updateRememberHistory"
label="Autoplay Videos" />
:default-value="autoplayVideos" <ft-toggle-switch
@change="updateAutoplayVideos" label="Enable Subtitles by Default"
/> :compact=true
<ft-toggle-switch :default-value="enableSubtitles"
label="Autoplay Playlists" @change="updateEnableSubtitles"
:default-value="autoplayPlaylists" />
@change="updateAutoplayPlaylists" <ft-toggle-switch
/> label="Force Local Backend for Legacy Formats"
<ft-toggle-switch :compact=true
label="Play Next Video" :default-value="forceLocalBackendForLegacy"
:default-value="playNextVideo" @change="updateForceLocalBackendForLegacy"
@change="updatePlayNextVideo" />
/> <ft-toggle-switch
<ft-toggle-switch label="Proxy Videos Through Invidious"
label="Enable Subtitles by Default" :compact=true
:default-value="enableSubtitles" :default-value="proxyVideos"
@change="updateEnableSubtitles" @change="updateProxyVideos"
/> />
<ft-toggle-switch </div>
label="Force Local Backend for Legacy Formats" <div class="switchColumn">
:default-value="forceLocalBackendForLegacy" <ft-toggle-switch
@change="updateForceLocalBackendForLegacy" label="Autoplay Videos"
/> :compact=true
<ft-toggle-switch :default-value="autoplayVideos"
label="Proxy Videos Through Invidious" @change="updateAutoplayVideos"
:default-value="proxyVideos" />
@change="updateProxyVideos" <ft-toggle-switch
/> label="Autoplay Playlists"
</ft-flex-box> :compact=true
<br> :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-flex-box>
<ft-slider <ft-slider
label="Default Volume" label="Default Volume"
@ -64,7 +74,6 @@
@change="updateDefaultPlayback" @change="updateDefaultPlayback"
/> />
</ft-flex-box> </ft-flex-box>
<br>
<ft-flex-box> <ft-flex-box>
<ft-select <ft-select
placeholder="Default Video Format" placeholder="Default Video Format"
@ -85,4 +94,4 @@
</template> </template>
<script src="./player-settings.js" /> <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