Made pausing TL updating configurable. Added styles for disabled checkboxes.

Shuffled settings a bit b/c all the settings are in "Attachments" section
depsite the fact not all of them are attachments-related.

1 files changed, 59 insertions, 44 deletions

diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 6245e758..d6dbab27 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -1,53 +1,64 @@
 <template>
-  <div class="settings panel panel-default">
-    <div class="panel-heading">
-      {{$t('settings.settings')}}
+<div class="settings panel panel-default">
+  <div class="panel-heading">
+    {{$t('settings.settings')}}
+  </div>
+  <div class="panel-body">
+    <div class="setting-item">
+      <h2>{{$t('settings.theme')}}</h2>
+      <style-switcher></style-switcher>
     </div>
-    <div class="panel-body">
-      <div class="setting-item">
-        <h2>{{$t('settings.theme')}}</h2>
-        <style-switcher></style-switcher>
-      </div>
-      <div class="setting-item">
-        <h2>{{$t('settings.filtering')}}</h2>
-        <p>{{$t('settings.filtering_explanation')}}</p>
-        <textarea id="muteWords" v-model="muteWordsString"></textarea>
-      </div>
-      <div class="setting-item">
-        <h2>{{$t('settings.attachments')}}</h2>
-        <ul class="setting-list">
-            <li>
-                <input type="checkbox" id="hideAttachments" v-model="hideAttachmentsLocal">
-                <label for="hideAttachments">{{$t('settings.hide_attachments_in_tl')}}</label>
-            </li>
-            <li>
-                <input type="checkbox" id="hideAttachmentsInConv" v-model="hideAttachmentsInConvLocal">
-                <label for="hideAttachmentsInConv">{{$t('settings.hide_attachments_in_convo')}}</label>
-            </li>
-            <li>
-                <input type="checkbox" id="hideNsfw" v-model="hideNsfwLocal">
-                <label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
-            </li>
-            <li>
-                <input type="checkbox" id="autoload" v-model="autoLoadLocal">
-                <label for="autoload">{{$t('settings.autoload')}}</label>
-            </li>
-            <li>
-                <input type="checkbox" id="streaming" v-model="streamingLocal">
-                <label for="streaming">{{$t('settings.streaming')}}</label>
-            </li>
-            <li>
-                <input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
-                <label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
-            </li>
+    <div class="setting-item">
+      <h2>{{$t('settings.filtering')}}</h2>
+      <p>{{$t('settings.filtering_explanation')}}</p>
+      <textarea id="muteWords" v-model="muteWordsString"></textarea>
+    </div>
+    <div class="setting-item">
+      <h2>{{$t('nav.timeline')}}</h2>
+      <ul class="setting-list">
+        <li>
+          <input type="checkbox" id="streaming" v-model="streamingLocal">
+          <label for="streaming">{{$t('settings.streaming')}}</label>
+          <ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
             <li>
-                <input type="checkbox" id="stopGifs" v-model="stopGifs">
-                <label for="stopGifs">{{$t('settings.stop_gifs')}}</label>
+              <input :disabled="!streamingLocal" type="checkbox" id="pauseOnUnfocused" v-model="pauseOnUnfocusedLocal">
+              <label for="pauseOnUnfocused">{{$t('settings.pauseOnUnfocused')}}</label>
             </li>
-        </ul>
-      </div>
+          </ul>
+        </li>
+        <li>
+          <input type="checkbox" id="autoload" v-model="autoLoadLocal">
+          <label for="autoload">{{$t('settings.autoload')}}</label>
+        </li>
+        <li>
+          <input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
+          <label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
+        </li>
+      </ul>
+    </div>
+    <div class="setting-item">
+      <h2>{{$t('settings.attachments')}}</h2>
+      <ul class="setting-list">
+        <li>
+          <input type="checkbox" id="hideAttachments" v-model="hideAttachmentsLocal">
+          <label for="hideAttachments">{{$t('settings.hide_attachments_in_tl')}}</label>
+        </li>
+        <li>
+          <input type="checkbox" id="hideAttachmentsInConv" v-model="hideAttachmentsInConvLocal">
+          <label for="hideAttachmentsInConv">{{$t('settings.hide_attachments_in_convo')}}</label>
+        </li>
+        <li>
+          <input type="checkbox" id="hideNsfw" v-model="hideNsfwLocal">
+          <label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
+        </li>
+        <li>
+          <input type="checkbox" id="stopGifs" v-model="stopGifs">
+          <label for="stopGifs">{{$t('settings.stop_gifs')}}</label>
+        </li>
+      </ul>
     </div>
   </div>
+</div>
 </template>
 
 <script src="./settings.js">
@@ -89,8 +100,12 @@
 }
 .setting-list {
   list-style-type: none;
+  padding-left: 2em;
   li {
     margin-bottom: 0.5em;
   }
+  .suboptions {
+    margin-top: 0.3em
+  }
 }
 </style>