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

Disabling mutually exclusive settings (#1822) 

* Adds :disabled styling/functionality for ft-button & ft-select

* Disable proxy, external player, & SponsorBlock settings when applicable

* Changes Invidious General Settings, Proxy Settings, and SponsorBlock settings to disappear when appropriate

* Update ft-toggle-switch.sass

* Switches to styling with disabled class for ft-toggle-switch

* Sets cursor to not-allowed for disabled controls
This commit is contained in:
Jason 2021-10-20 13:14:49 +00:00 committed by GitHub
parent ed37371f01
commit 41fedf8b2e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 169 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,6 +21,7 @@
<ft-toggle-switch
:label="$t('Settings.External Player Settings.Ignore Unsupported Action Warnings')"
:default-value="externalPlayerIgnoreWarnings"
:disabled="externalPlayer===''"
:compact="true"
:tooltip="$t('Tooltips.External Player Settings.Ignore Warnings')"
@change="updateExternalPlayerIgnoreWarnings"

5
src/renderer/components/ft-button/ft-button.css
View File

@ -19,6 +19,11 @@
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.ripple {
position: relative;
overflow: hidden;

5
src/renderer/components/ft-input/ft-input.css
View File

@ -2,6 +2,11 @@
position: relative;
}
.disabled label, .disabled .ft-input{
opacity: 0.4;
cursor: not-allowed;
}
.clearInputTextButton {
position: absolute;
/* horizontal intentionally reduced to keep "I-beam pointer" visible */

3
src/renderer/components/ft-input/ft-input.vue
View File

@ -5,7 +5,8 @@
search: isSearch,
forceTextColor: forceTextColor,
showActionButton: showActionButton,
showClearTextButton: showClearTextButton
showClearTextButton: showClearTextButton,
disabled: disabled
}"
>
<label

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

@ -28,6 +28,11 @@
margin-top: 30px;
}
.disabled, .disabled + svg.iconSelect {
opacity: 0.4;
cursor: not-allowed;
}
.select-text {
position: relative;
font-family: inherit;

4
src/renderer/components/ft-select/ft-select.js
View File

@ -26,6 +26,10 @@ export default Vue.extend({
tooltip: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
}
}
})

7
src/renderer/components/ft-select/ft-select.vue
View File

@ -2,7 +2,9 @@
<div class="select">
<select
class="select-text"
:class="{disabled: disabled}"
:value="value"
:disabled="disabled"
@change="$emit('change', $event.target.value)"
>
<option
@ -19,7 +21,10 @@
/>
<span class="select-highlight" />
<span class="select-bar" />
<label class="select-label">
<label
class="select-label"
:hidden="disabled"
>
{{ placeholder }}
</label>
<ft-tooltip

8
src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass
View File

@ -7,6 +7,13 @@
&.compact
margin: 0
.disabled
.switch-label
cursor: not-allowed
.switch-label-text
opacity: 0.4
.switch-input
-moz-appearance: none
-webkit-appearance: none
@ -69,3 +76,4 @@
.switch-input:disabled + &
background-color: #BDBDBD

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

@ -1,7 +1,10 @@
<template>
<div
class="switch-ctn"
:class="{compact}"
:class="{
compact,
disabled: disabled
}"
>
<input
:id="id"
@ -17,7 +20,9 @@
:for="id"
class="switch-label"
>
{{ label }}
<span class="switch-label-text">
{{ label }}
</span>
<ft-tooltip
v-if="tooltip !== ''"
class="selectTooltip"

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

@ -93,50 +93,54 @@
@change="updateExternalLinkHandling"
/>
</div>
<ft-flex-box class="generalSettingsFlexBox">
<ft-input
:placeholder="$t('Settings.General Settings.Current Invidious Instance')"
:show-action-button="false"
:show-label="true"
:value="currentInvidiousInstance"
:data-list="invidiousInstancesList"
:tooltip="$t('Tooltips.General Settings.Invidious Instance')"
@input="handleInvidiousInstanceInput"
/>
</ft-flex-box>
<ft-flex-box>
<div>
<a
href="https://api.invidious.io"
>
{{ $t('Settings.General Settings.View all Invidious instance information') }}
</a>
</div>
</ft-flex-box>
<p
v-if="defaultInvidiousInstance !== ''"
class="center"
<div
v-if="backendPreference === 'invidious' || backendFallback"
>
{{ $t('Settings.General Settings.The currently set default instance is $').replace('$', defaultInvidiousInstance) }}
</p>
<template v-else>
<p class="center">
{{ $t('Settings.General Settings.No default instance has been set') }}
<ft-flex-box class="generalSettingsFlexBox">
<ft-input
:placeholder="$t('Settings.General Settings.Current Invidious Instance')"
:show-action-button="false"
:show-label="true"
:value="currentInvidiousInstance"
:data-list="invidiousInstancesList"
:tooltip="$t('Tooltips.General Settings.Invidious Instance')"
@input="handleInvidiousInstanceInput"
/>
</ft-flex-box>
<ft-flex-box>
<div>
<a
href="https://api.invidious.io"
>
{{ $t('Settings.General Settings.View all Invidious instance information') }}
</a>
</div>
</ft-flex-box>
<p
v-if="defaultInvidiousInstance !== ''"
class="center"
>
{{ $t('Settings.General Settings.The currently set default instance is $').replace('$', defaultInvidiousInstance) }}
</p>
<p class="center">
{{ $t('Settings.General Settings.Current instance will be randomized on startup') }}
</p>
</template>
<ft-flex-box>
<ft-button
:label="$t('Settings.General Settings.Set Current Instance as Default')"
@click="handleSetDefaultInstanceClick"
/>
<ft-button
:label="$t('Settings.General Settings.Clear Default Instance')"
@click="handleClearDefaultInstanceClick"
/>
</ft-flex-box>
<template v-else>
<p class="center">
{{ $t('Settings.General Settings.No default instance has been set') }}
</p>
<p class="center">
{{ $t('Settings.General Settings.Current instance will be randomized on startup') }}
</p>
</template>
<ft-flex-box>
<ft-button
:label="$t('Settings.General Settings.Set Current Instance as Default')"
@click="handleSetDefaultInstanceClick"
/>
<ft-button
:label="$t('Settings.General Settings.Clear Default Instance')"
@click="handleClearDefaultInstanceClick"
/>
</ft-flex-box>
</div>
</details>
</template>

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

@ -13,62 +13,69 @@
@change="handleUpdateProxy"
/>
</ft-flex-box>
<ft-flex-box>
<ft-select
:placeholder="$t('Settings.Proxy Settings.Proxy Protocol')"
:value="proxyProtocol"
:select-names="protocolNames"
:select-values="protocolValues"
@change="handleUpdateProxyProtocol"
/>
</ft-flex-box>
<ft-flex-box>
<ft-input
:placeholder="$t('Settings.Proxy Settings.Proxy Host')"
:show-action-button="false"
:show-label="true"
:value="proxyHostname"
@input="handleUpdateProxyHostname"
/>
<ft-input
:placeholder="$t('Settings.Proxy Settings.Proxy Port Number')"
:show-action-button="false"
:show-label="true"
:value="proxyPort"
@input="handleUpdateProxyPort"
/>
</ft-flex-box>
<p class="center">
{{ $t('Settings.Proxy Settings.Clicking on Test Proxy will send a request to') }} https://freegeoip.app/json/
</p>
<ft-flex-box>
<ft-button
:label="$t('Settings.Proxy Settings.Test Proxy')"
@click="testProxy"
/>
</ft-flex-box>
<ft-loader
v-if="isLoading"
/>
<div
v-if="!isLoading && dataAvailable"
class="center"
v-if="useProxy"
>
<h3>
{{ $t('Settings.Proxy Settings.Your Info') }}
</h3>
<p>
{{ $t('Settings.Proxy Settings.Ip') }}: {{ proxyIp }}
</p>
<p>
{{ $t('Settings.Proxy Settings.Country') }}: {{ proxyCountry }}
</p>
<p>
{{ $t('Settings.Proxy Settings.Region') }}: {{ proxyRegion }}
</p>
<p>
{{ $t('Settings.Proxy Settings.City') }}: {{ proxyCity }}
<ft-flex-box>
<ft-select
:placeholder="$t('Settings.Proxy Settings.Proxy Protocol')"
:value="proxyProtocol"
:select-names="protocolNames"
:select-values="protocolValues"
@change="handleUpdateProxyProtocol"
/>
</ft-flex-box>
<ft-flex-box>
<ft-input
:placeholder="$t('Settings.Proxy Settings.Proxy Host')"
:show-action-button="false"
:show-label="true"
:value="proxyHostname"
@input="handleUpdateProxyHostname"
/>
<ft-input
:placeholder="$t('Settings.Proxy Settings.Proxy Port Number')"
:show-action-button="false"
:show-label="true"
:value="proxyPort"
@input="handleUpdateProxyPort"
/>
</ft-flex-box>
<p
class="center"
:style="{opacity: useProxy ? 1 : 0.4}"
>
{{ $t('Settings.Proxy Settings.Clicking on Test Proxy will send a request to') }} https://freegeoip.app/json/
</p>
<ft-flex-box>
<ft-button
:label="$t('Settings.Proxy Settings.Test Proxy')"
@click="testProxy"
/>
</ft-flex-box>
<ft-loader
v-if="isLoading"
/>
<div
v-if="!isLoading && dataAvailable"
class="center"
>
<h3>
{{ $t('Settings.Proxy Settings.Your Info') }}
</h3>
<p>
{{ $t('Settings.Proxy Settings.Ip') }}: {{ proxyIp }}
</p>
<p>
{{ $t('Settings.Proxy Settings.Country') }}: {{ proxyCountry }}
</p>
<p>
{{ $t('Settings.Proxy Settings.Region') }}: {{ proxyRegion }}
</p>
<p>
{{ $t('Settings.Proxy Settings.City') }}: {{ proxyCity }}
</p>
</div>
</div>
</details>
</template>

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

@ -13,22 +13,26 @@
@change="handleUpdateSponsorBlock"
/>
</ft-flex-box>
<ft-flex-box class="sponsorBlockSettingsFlexBox">
<ft-toggle-switch
:label="$t('Settings.SponsorBlock Settings.Notify when sponsor segment is skipped')"
:default-value="sponsorBlockShowSkippedToast"
@change="handleUpdateSponsorBlockShowSkippedToast"
/>
</ft-flex-box>
<ft-flex-box>
<ft-input
:placeholder="$t('Settings.SponsorBlock Settings[\'SponsorBlock API Url (Default is https://sponsor.ajay.app)\']')"
:show-action-button="false"
:show-label="true"
:value="sponsorBlockUrl"
@input="handleUpdateSponsorBlockUrl"
/>
</ft-flex-box>
<div
v-if="useSponsorBlock"
>
<ft-flex-box class="sponsorBlockSettingsFlexBox">
<ft-toggle-switch
:label="$t('Settings.SponsorBlock Settings.Notify when sponsor segment is skipped')"
:default-value="sponsorBlockShowSkippedToast"
@change="handleUpdateSponsorBlockShowSkippedToast"
/>
</ft-flex-box>
<ft-flex-box>
<ft-input
:placeholder="$t('Settings.SponsorBlock Settings[\'SponsorBlock API Url (Default is https://sponsor.ajay.app)\']')"
:show-action-button="false"
:show-label="true"
:value="sponsorBlockUrl"
@input="handleUpdateSponsorBlockUrl"
/>
</ft-flex-box>
</div>
</details>
</template>