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"
     >
+      <span class="switch-label-text">
         {{ label }}
+      </span>
       <ft-tooltip
         v-if="tooltip !== ''"
         class="selectTooltip"

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

@@ -93,6 +93,9 @@
         @change="updateExternalLinkHandling"
       />
     </div>
+    <div
+      v-if="backendPreference === 'invidious' || backendFallback"
+    >
       <ft-flex-box class="generalSettingsFlexBox">
         <ft-input
           :placeholder="$t('Settings.General Settings.Current Invidious Instance')"
@@ -137,6 +140,7 @@
           @click="handleClearDefaultInstanceClick"
         />
       </ft-flex-box>
+    </div>
   </details>
 </template>
 

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

@@ -13,6 +13,9 @@
         @change="handleUpdateProxy"
       />
     </ft-flex-box>
+    <div
+      v-if="useProxy"
+    >
       <ft-flex-box>
         <ft-select
           :placeholder="$t('Settings.Proxy Settings.Proxy Protocol')"
@@ -38,7 +41,10 @@
           @input="handleUpdateProxyPort"
         />
       </ft-flex-box>
-    <p class="center">
+      <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>
@@ -70,6 +76,7 @@
           {{ $t('Settings.Proxy Settings.City') }}: {{ proxyCity }}
         </p>
       </div>
+    </div>
   </details>
 </template>
 

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

@@ -13,6 +13,9 @@
         @change="handleUpdateSponsorBlock"
       />
     </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')"
@@ -29,6 +32,7 @@
           @input="handleUpdateSponsorBlockUrl"
         />
       </ft-flex-box>
+    </div>
   </details>
 </template>