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

src/renderer/components/external-player-settings/external-player-settings.vue

@@ -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"

src/renderer/components/ft-button/ft-button.css

@@ -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;

src/renderer/components/ft-input/ft-input.css

@@ -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 */

src/renderer/components/ft-input/ft-input.vue

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

src/renderer/components/ft-select/ft-select.css

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

src/renderer/components/ft-select/ft-select.js

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

src/renderer/components/ft-select/ft-select.vue

@@ -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

src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass

@@ -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
+     

src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue

@@ -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"

src/renderer/components/general-settings/general-settings.vue

@@ -93,50 +93,54 @@
         @change="updateExternalLinkHandling"
       />
     </div>
-    <ft-flex-box class="generalSettingsFlexBox">
+    <div
-      <ft-input
+      v-if="backendPreference === 'invidious' || backendFallback"
-        :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) }}
+      <ft-flex-box class="generalSettingsFlexBox">
-    </p>
+        <ft-input
-    <template v-else>
+          :placeholder="$t('Settings.General Settings.Current Invidious Instance')"
-      <p class="center">
+          :show-action-button="false"
-        {{ $t('Settings.General Settings.No default instance has been set') }}
+          :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">
+      <template v-else>
-        {{ $t('Settings.General Settings.Current instance will be randomized on startup') }}
+        <p class="center">
-      </p>
+          {{ $t('Settings.General Settings.No default instance has been set') }}
-    </template>
+        </p>
-    <ft-flex-box>
+        <p class="center">
-      <ft-button
+          {{ $t('Settings.General Settings.Current instance will be randomized on startup') }}
-        :label="$t('Settings.General Settings.Set Current Instance as Default')"
+        </p>
-        @click="handleSetDefaultInstanceClick"
+      </template>
-      />
+      <ft-flex-box>
-      <ft-button
+        <ft-button
-        :label="$t('Settings.General Settings.Clear Default Instance')"
+          :label="$t('Settings.General Settings.Set Current Instance as Default')"
-        @click="handleClearDefaultInstanceClick"
+          @click="handleSetDefaultInstanceClick"
-      />
+        />
-    </ft-flex-box>
+        <ft-button
+          :label="$t('Settings.General Settings.Clear Default Instance')"
+          @click="handleClearDefaultInstanceClick"
+        />
+      </ft-flex-box>
+    </div>
   </details>
 </template>
 

src/renderer/components/proxy-settings/proxy-settings.vue

@@ -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"
+      v-if="useProxy"
-      class="center"
     >
-      <h3>
+      <ft-flex-box>
-        {{ $t('Settings.Proxy Settings.Your Info') }}
+        <ft-select
-      </h3>
+          :placeholder="$t('Settings.Proxy Settings.Proxy Protocol')"
-      <p>
+          :value="proxyProtocol"
-        {{ $t('Settings.Proxy Settings.Ip') }}: {{ proxyIp }}
+          :select-names="protocolNames"
-      </p>
+          :select-values="protocolValues"
-      <p>
+          @change="handleUpdateProxyProtocol"
-        {{ $t('Settings.Proxy Settings.Country') }}: {{ proxyCountry }}
+        />
-      </p>
+      </ft-flex-box>
-      <p>
+      <ft-flex-box>
-        {{ $t('Settings.Proxy Settings.Region') }}: {{ proxyRegion }}
+        <ft-input
-      </p>
+          :placeholder="$t('Settings.Proxy Settings.Proxy Host')"
-      <p>
+          :show-action-button="false"
-        {{ $t('Settings.Proxy Settings.City') }}: {{ proxyCity }}
+          :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>

src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue

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