Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Disabling mutually exclusive settings #1822

Merged
merged 8 commits into from
Oct 20, 2021
Merged

Disabling mutually exclusive settings #1822

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7bfc104
Adds :disabled styling/functionality for ft-button & ft-select
kommunarr Oct 16, 2021
5977732
Merge branch 'development', add more styling for disabled controls
kommunarr Oct 16, 2021
2aa7d3a
Disable proxy, external player, & SponsorBlock settings when applicable
kommunarr Oct 16, 2021
1b58fd2
Changes Invidious General Settings, Proxy Settings, and SponsorBlock …
kommunarr Oct 16, 2021
7f89045
Update ft-toggle-switch.sass
kommunarr Oct 16, 2021
04742d5
Switches to styling with disabled class for ft-toggle-switch
kommunarr Oct 18, 2021
59dae91
Sets cursor to not-allowed for disabled controls
kommunarr Oct 18, 2021
8276fdb
Merge branch 'disabled-toggles' of github.com:jasonhenriquez/FreeTube…
kommunarr Oct 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/renderer/components/external-player-settings/external-player-settings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
5 changes: 5 additions & 0 deletions src/renderer/components/ft-button/ft-button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.btn:disabled {
opacity: 0.4;
pointer-events: none;
}

.ripple {
position: relative;
overflow: hidden;
Expand Down
4 changes: 4 additions & 0 deletions src/renderer/components/ft-input/ft-input.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
position: relative;
}

.disabled {
opacity: 0.4;
}

.clearInputTextButton {
position: absolute;
/* horizontal intentionally reduced to keep "I-beam pointer" visible */
Expand Down
3 changes: 2 additions & 1 deletion src/renderer/components/ft-input/ft-input.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
search: isSearch,
forceTextColor: forceTextColor,
showActionButton: showActionButton,
showClearTextButton: showClearTextButton
showClearTextButton: showClearTextButton,
disabled: disabled
}"
>
<label
Expand Down
4 changes: 4 additions & 0 deletions src/renderer/components/ft-select/ft-select.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@
margin-top: 30px;
}

.disabled {
opacity: 0.4;
}

.select-text {
position: relative;
font-family: inherit;
Expand Down
4 changes: 4 additions & 0 deletions src/renderer/components/ft-select/ft-select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@ export default Vue.extend({
tooltip: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
}
}
})
7 changes: 6 additions & 1 deletion src/renderer/components/ft-select/ft-select.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
5 changes: 4 additions & 1 deletion src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@
transform: translate(0, -50%)
width: 34px

&:disabled + .switch-label > span
kommunarr marked this conversation as resolved.
Show resolved Hide resolved
kommunarr marked this conversation as resolved.
Show resolved Hide resolved
opacity: 0.4

.switch-label
position: relative
display: inline-block
Expand Down Expand Up @@ -68,4 +71,4 @@
transform: translate(80%, -50%)

.switch-input:disabled + &
background-color: #BDBDBD
background-color: #BDBDBD
kommunarr marked this conversation as resolved.
Show resolved Hide resolved
4 changes: 3 additions & 1 deletion src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@
:for="id"
class="switch-label"
>
{{ label }}
<span>
kommunarr marked this conversation as resolved.
Show resolved Hide resolved
{{ label }}
</span>
<ft-tooltip
v-if="tooltip !== ''"
class="selectTooltip"
Expand Down
88 changes: 46 additions & 42 deletions src/renderer/components/general-settings/general-settings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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') }}
</p>
<p class="center">
{{ $t('Settings.General Settings.Current instance will be randomized on startup') }}
<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>
</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>

Expand Down
113 changes: 60 additions & 53 deletions src/renderer/components/proxy-settings/proxy-settings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
36 changes: 20 additions & 16 deletions src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down