From 39b71e5dd6afef7c15b236c5c3d90984d2836d2e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 29 Sep 2019 23:47:26 +0300
Subject: Removed all whole mess of manual watch/data declaration, now fully
 automatic

---
 src/components/settings/settings.vue | 92 ++++++++++++++++++------------------
 1 file changed, 46 insertions(+), 46 deletions(-)

(limited to 'src/components/settings/settings.vue')

diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 6d87a060..261efb7e 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -38,7 +38,7 @@
                 <li v-if="instanceSpecificPanelPresent">
                   <input
                     id="hideISP"
-                    v-model="hideISPLocal"
+                    v-model="hideISP"
                     type="checkbox"
                   >
                   <label for="hideISP">{{ $t('settings.hide_isp') }}</label>
@@ -51,35 +51,35 @@
                 <li>
                   <input
                     id="hideMutedPosts"
-                    v-model="hideMutedPostsLocal"
+                    v-model="hideMutedPosts"
                     type="checkbox"
                   >
-                  <label for="hideMutedPosts">{{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsDefault }) }}</label>
+                  <label for="hideMutedPosts">{{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}</label>
                 </li>
                 <li>
                   <input
                     id="collapseMessageWithSubject"
-                    v-model="collapseMessageWithSubjectLocal"
+                    v-model="collapseMessageWithSubject"
                     type="checkbox"
                   >
-                  <label for="collapseMessageWithSubject">{{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectDefault }) }}</label>
+                  <label for="collapseMessageWithSubject">{{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}</label>
                 </li>
                 <li>
                   <input
                     id="streaming"
-                    v-model="streamingLocal"
+                    v-model="streaming"
                     type="checkbox"
                   >
                   <label for="streaming">{{ $t('settings.streaming') }}</label>
                   <ul
                     class="setting-list suboptions"
-                    :class="[{disabled: !streamingLocal}]"
+                    :class="[{disabled: !streaming}]"
                   >
                     <li>
                       <input
                         id="pauseOnUnfocused"
-                        v-model="pauseOnUnfocusedLocal"
-                        :disabled="!streamingLocal"
+                        v-model="pauseOnUnfocused"
+                        :disabled="!streaming"
                         type="checkbox"
                       >
                       <label for="pauseOnUnfocused">{{ $t('settings.pause_on_unfocused') }}</label>
@@ -89,7 +89,7 @@
                 <li>
                   <input
                     id="autoload"
-                    v-model="autoLoadLocal"
+                    v-model="autoLoad"
                     type="checkbox"
                   >
                   <label for="autoload">{{ $t('settings.autoload') }}</label>
@@ -97,7 +97,7 @@
                 <li>
                   <input
                     id="hoverPreview"
-                    v-model="hoverPreviewLocal"
+                    v-model="hoverPreview"
                     type="checkbox"
                   >
                   <label for="hoverPreview">{{ $t('settings.reply_link_preview') }}</label>
@@ -111,21 +111,21 @@
                 <li>
                   <input
                     id="scopeCopy"
-                    v-model="scopeCopyLocal"
+                    v-model="scopeCopy"
                     type="checkbox"
                   >
                   <label for="scopeCopy">
-                    {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyDefault }) }}
+                    {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }}
                   </label>
                 </li>
                 <li>
                   <input
                     id="subjectHide"
-                    v-model="alwaysShowSubjectInputLocal"
+                    v-model="alwaysShowSubjectInput"
                     type="checkbox"
                   >
                   <label for="subjectHide">
-                    {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputDefault }) }}
+                    {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputLocalizedValue }) }}
                   </label>
                 </li>
                 <li>
@@ -137,19 +137,19 @@
                     >
                       <select
                         id="subjectLineBehavior"
-                        v-model="subjectLineBehaviorLocal"
+                        v-model="subjectLineBehavior"
                       >
                         <option value="email">
                           {{ $t('settings.subject_line_email') }}
-                          {{ subjectLineBehaviorDefault == 'email' ? $t('settings.instance_default_simple') : '' }}
+                          {{ subjectLineBehaviorLocalizedValue == 'email' ? $t('settings.instance_default_simple') : '' }}
                         </option>
                         <option value="masto">
                           {{ $t('settings.subject_line_mastodon') }}
-                          {{ subjectLineBehaviorDefault == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
+                          {{ subjectLineBehaviorLocalizedValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
                         </option>
                         <option value="noop">
                           {{ $t('settings.subject_line_noop') }}
-                          {{ subjectLineBehaviorDefault == 'noop' ? $t('settings.instance_default_simple') : '' }}
+                          {{ subjectLineBehaviorLocalizedValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
                         </option>
                       </select>
                       <i class="icon-down-open" />
@@ -165,7 +165,7 @@
                     >
                       <select
                         id="postContentType"
-                        v-model="postContentTypeLocal"
+                        v-model="postContentType"
                       >
                         <option
                           v-for="postFormat in postFormats"
@@ -173,7 +173,7 @@
                           :value="postFormat"
                         >
                           {{ $t(`post_status.content_type["${postFormat}"]`) }}
-                          {{ postContentTypeDefault === postFormat ? $t('settings.instance_default_simple') : '' }}
+                          {{ postContentTypeLocalizedValue === postFormat ? $t('settings.instance_default_simple') : '' }}
                         </option>
                       </select>
                       <i class="icon-down-open" />
@@ -183,17 +183,17 @@
                 <li>
                   <input
                     id="minimalScopesMode"
-                    v-model="minimalScopesModeLocal"
+                    v-model="minimalScopesMode"
                     type="checkbox"
                   >
                   <label for="minimalScopesMode">
-                    {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeDefault }) }}
+                    {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }}
                   </label>
                 </li>
                 <li>
                   <input
                     id="autohideFloatingPostButton"
-                    v-model="autohideFloatingPostButtonLocal"
+                    v-model="autohideFloatingPostButton"
                     type="checkbox"
                   >
                   <label for="autohideFloatingPostButton">{{ $t('settings.autohide_floating_post_button') }}</label>
@@ -201,7 +201,7 @@
                 <li>
                   <input
                     id="padEmoji"
-                    v-model="padEmojiLocal"
+                    v-model="padEmoji"
                     type="checkbox"
                   >
                   <label for="padEmoji">{{ $t('settings.pad_emoji') }}</label>
@@ -215,7 +215,7 @@
                 <li>
                   <input
                     id="hideAttachments"
-                    v-model="hideAttachmentsLocal"
+                    v-model="hideAttachments"
                     type="checkbox"
                   >
                   <label for="hideAttachments">{{ $t('settings.hide_attachments_in_tl') }}</label>
@@ -223,7 +223,7 @@
                 <li>
                   <input
                     id="hideAttachmentsInConv"
-                    v-model="hideAttachmentsInConvLocal"
+                    v-model="hideAttachmentsInConv"
                     type="checkbox"
                   >
                   <label for="hideAttachmentsInConv">{{ $t('settings.hide_attachments_in_convo') }}</label>
@@ -242,7 +242,7 @@
                 <li>
                   <input
                     id="hideNsfw"
-                    v-model="hideNsfwLocal"
+                    v-model="hideNsfw"
                     type="checkbox"
                   >
                   <label for="hideNsfw">{{ $t('settings.nsfw_clickthrough') }}</label>
@@ -252,7 +252,7 @@
                     <input
                       id="preloadImage"
                       v-model="preloadImage"
-                      :disabled="!hideNsfwLocal"
+                      :disabled="!hideNsfw"
                       type="checkbox"
                     >
                     <label for="preloadImage">{{ $t('settings.preload_images') }}</label>
@@ -261,7 +261,7 @@
                     <input
                       id="useOneClickNsfw"
                       v-model="useOneClickNsfw"
-                      :disabled="!hideNsfwLocal"
+                      :disabled="!hideNsfw"
                       type="checkbox"
                     >
                     <label for="useOneClickNsfw">{{ $t('settings.use_one_click_nsfw') }}</label>
@@ -278,19 +278,19 @@
                 <li>
                   <input
                     id="loopVideo"
-                    v-model="loopVideoLocal"
+                    v-model="loopVideo"
                     type="checkbox"
                   >
                   <label for="loopVideo">{{ $t('settings.loop_video') }}</label>
                   <ul
                     class="setting-list suboptions"
-                    :class="[{disabled: !streamingLocal}]"
+                    :class="[{disabled: !streaming}]"
                   >
                     <li>
                       <input
                         id="loopVideoSilentOnly"
-                        v-model="loopVideoSilentOnlyLocal"
-                        :disabled="!loopVideoLocal || !loopSilentAvailable"
+                        v-model="loopVideoSilentOnly"
+                        :disabled="!loopVideo || !loopSilentAvailable"
                         type="checkbox"
                       >
                       <label for="loopVideoSilentOnly">{{ $t('settings.loop_video_silent_only') }}</label>
@@ -328,7 +328,7 @@
                 <li>
                   <input
                     id="webPushNotifications"
-                    v-model="webPushNotificationsLocal"
+                    v-model="webPushNotifications"
                     type="checkbox"
                   >
                   <label for="webPushNotifications">
@@ -353,7 +353,7 @@
                   <li>
                     <input
                       id="notification-visibility-likes"
-                      v-model="notificationVisibilityLocal.likes"
+                      v-model="notificationVisibility.likes"
                       type="checkbox"
                     >
                     <label for="notification-visibility-likes">
@@ -363,7 +363,7 @@
                   <li>
                     <input
                       id="notification-visibility-repeats"
-                      v-model="notificationVisibilityLocal.repeats"
+                      v-model="notificationVisibility.repeats"
                       type="checkbox"
                     >
                     <label for="notification-visibility-repeats">
@@ -373,7 +373,7 @@
                   <li>
                     <input
                       id="notification-visibility-follows"
-                      v-model="notificationVisibilityLocal.follows"
+                      v-model="notificationVisibility.follows"
                       type="checkbox"
                     >
                     <label for="notification-visibility-follows">
@@ -383,7 +383,7 @@
                   <li>
                     <input
                       id="notification-visibility-mentions"
-                      v-model="notificationVisibilityLocal.mentions"
+                      v-model="notificationVisibility.mentions"
                       type="checkbox"
                     >
                     <label for="notification-visibility-mentions">
@@ -400,7 +400,7 @@
                 >
                   <select
                     id="replyVisibility"
-                    v-model="replyVisibilityLocal"
+                    v-model="replyVisibility"
                   >
                     <option
                       value="all"
@@ -415,21 +415,21 @@
               <div>
                 <input
                   id="hidePostStats"
-                  v-model="hidePostStatsLocal"
+                  v-model="hidePostStats"
                   type="checkbox"
                 >
                 <label for="hidePostStats">
-                  {{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsDefault }) }}
+                  {{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsLocalizedValue }) }}
                 </label>
               </div>
               <div>
                 <input
                   id="hideUserStats"
-                  v-model="hideUserStatsLocal"
+                  v-model="hideUserStats"
                   type="checkbox"
                 >
                 <label for="hideUserStats">
-                  {{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsDefault }) }}
+                  {{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsLocalizedValue }) }}
                 </label>
               </div>
             </div>
@@ -444,11 +444,11 @@
               <div>
                 <input
                   id="hideFilteredStatuses"
-                  v-model="hideFilteredStatusesLocal"
+                  v-model="hideFilteredStatuses"
                   type="checkbox"
                 >
                 <label for="hideFilteredStatuses">
-                  {{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesDefault }) }}
+                  {{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesLocalizedValue }) }}
                 </label>
               </div>
             </div>
-- 
cgit v1.2.3-70-g09d2


From 20fc259350b6bc9163899b859b496b86cf0083c5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 30 Sep 2019 00:04:43 +0300
Subject: fixed default values for multi-choice configurations, should also fix
 warnings

---
 src/components/settings/settings.js  | 15 +++++++++++++++
 src/components/settings/settings.vue |  8 ++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

(limited to 'src/components/settings/settings.vue')

diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index 3923fc60..a327ab28 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -10,6 +10,11 @@ import { instanceDefaultProperties, defaultState as configDefaultState } from '.
 const pleromaFeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma-fe/commit/'
 const pleromaBeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma/commit/'
 
+const multiChoiceProperties = [
+  'postContentType',
+  'subjectLineBehavior'
+]
+
 const settings = {
   data () {
     const instance = this.$store.state.instance
@@ -51,6 +56,16 @@ const settings = {
     },
     // Getting localized values for instance-default properties
     ...instanceDefaultProperties
+      .filter(key => multiChoiceProperties.includes(key))
+      .map(key => [
+        key + 'DefaultValue',
+        function () {
+          return this.$store.getters.instanceDefaultConfig[key]
+        }
+      ])
+      .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
+    ...instanceDefaultProperties
+      .filter(key => !multiChoiceProperties.includes(key))
       .map(key => [
         key + 'LocalizedValue',
         function () {
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 261efb7e..e1a06fe2 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -141,15 +141,15 @@
                       >
                         <option value="email">
                           {{ $t('settings.subject_line_email') }}
-                          {{ subjectLineBehaviorLocalizedValue == 'email' ? $t('settings.instance_default_simple') : '' }}
+                          {{ subjectLineBehaviorDefaultValue == 'email' ? $t('settings.instance_default_simple') : '' }}
                         </option>
                         <option value="masto">
                           {{ $t('settings.subject_line_mastodon') }}
-                          {{ subjectLineBehaviorLocalizedValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
+                          {{ subjectLineBehaviorDefaultValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
                         </option>
                         <option value="noop">
                           {{ $t('settings.subject_line_noop') }}
-                          {{ subjectLineBehaviorLocalizedValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
+                          {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
                         </option>
                       </select>
                       <i class="icon-down-open" />
@@ -173,7 +173,7 @@
                           :value="postFormat"
                         >
                           {{ $t(`post_status.content_type["${postFormat}"]`) }}
-                          {{ postContentTypeLocalizedValue === postFormat ? $t('settings.instance_default_simple') : '' }}
+                          {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
                         </option>
                       </select>
                       <i class="icon-down-open" />
-- 
cgit v1.2.3-70-g09d2


From e7532464e386b908321c8c202249c3855e83d722 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 7 Oct 2019 20:43:23 +0300
Subject: Replaced most trivial checkboxes with Checkbox component

---
 src/components/checkbox/checkbox.vue               |   8 +-
 src/components/emoji_picker/emoji_picker.js        |   4 +-
 src/components/emoji_picker/emoji_picker.scss      |   4 -
 src/components/emoji_picker/emoji_picker.vue       |  20 +-
 .../post_status_form/post_status_form.js           |   4 +-
 .../post_status_form/post_status_form.vue          |   9 +-
 src/components/settings/settings.js                |   4 +-
 src/components/settings/settings.vue               | 266 +++++++--------------
 src/components/style_switcher/style_switcher.js    |   4 +-
 src/components/style_switcher/style_switcher.vue   |  45 ++--
 10 files changed, 122 insertions(+), 246 deletions(-)

(limited to 'src/components/settings/settings.vue')

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 441f815c..6e164c1b 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -40,12 +40,16 @@ export default {
 .checkbox {
   position: relative;
   display: inline-block;
-  padding-left: 1.2em;
   min-height: 1.2em;
 
+  &-indicator {
+    position: relative;
+    padding-left: 1.2em;
+  }
+
   &-indicator::before {
     position: absolute;
-    left: 0;
+    right: 0;
     top: 0;
     display: block;
     content: '✔';
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 824412dd..f300a6b8 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,3 +1,4 @@
+import Checkbox from '../checkbox/checkbox.vue'
 
 const filterByKeyword = (list, keyword = '') => {
   return list.filter(x => x.displayText.includes(keyword))
@@ -22,7 +23,8 @@ const EmojiPicker = {
     }
   },
   components: {
-    StickerPicker: () => import('../sticker_picker/sticker_picker.vue')
+    StickerPicker: () => import('../sticker_picker/sticker_picker.vue'),
+    Checkbox
   },
   methods: {
     onEmoji (emoji) {
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index b0ed00e9..d99539b0 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -14,10 +14,6 @@
     padding: 7px;
     line-height: normal;
   }
-  .keep-open-label {
-    padding: 0 7px;
-    display: flex;
-  }
 
   .heading {
     display: flex;
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 42f20130..b974fce9 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -75,22 +75,10 @@
             </span>
           </div>
         </div>
-        <div
-          class="keep-open"
-        >
-          <input
-            :id="labelKey + 'keep-open'"
-            v-model="keepOpen"
-            type="checkbox"
-          >
-          <label
-            class="keep-open-label"
-            :for="labelKey + 'keep-open'"
-          >
-            <div class="keep-open-label-text">
-              {{ $t('emoji.keep_open') }}
-            </div>
-          </label>
+        <div class="keep-open">
+          <Checkbox v-model="keepOpen">
+            {{ $t('emoji.keep_open') }}
+          </Checkbox>
         </div>
       </div>
       <div
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index db501dc1..9659f296 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -8,6 +8,7 @@ import { findOffset } from '../../services/offset_finder/offset_finder.service.j
 import { reject, map, uniqBy } from 'lodash'
 import suggestor from '../emoji_input/suggestor.js'
 import { mapGetters } from 'vuex'
+import Checkbox from '../checkbox/checkbox.vue'
 
 const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
   let allAttentions = [...attentions]
@@ -36,7 +37,8 @@ const PostStatusForm = {
     MediaUpload,
     EmojiInput,
     PollForm,
-    ScopeSelector
+    ScopeSelector,
+    Checkbox
   },
   mounted () {
     this.resize(this.$refs.textarea)
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 4916d988..237ed725 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -261,12 +261,9 @@
         v-if="newStatus.files.length > 0"
         class="upload_settings"
       >
-        <input
-          id="filesSensitive"
-          v-model="newStatus.nsfw"
-          type="checkbox"
-        >
-        <label for="filesSensitive">{{ $t('post_status.attachments_sensitive') }}</label>
+        <Checkbox v-model="newStatus.nsfw">
+          {{ $t('post_status.attachments_sensitive') }}
+        </Checkbox>
       </div>
     </form>
   </div>
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index 98ceb164..c49083f9 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -6,6 +6,7 @@ import StyleSwitcher from '../style_switcher/style_switcher.vue'
 import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
 import { extractCommit } from '../../services/version/version.service'
 import { instanceDefaultProperties, defaultState as configDefaultState } from '../../modules/config.js'
+import Checkbox from '../checkbox/checkbox.vue'
 
 const pleromaFeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma-fe/commit/'
 const pleromaBeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma/commit/'
@@ -35,7 +36,8 @@ const settings = {
   components: {
     TabSwitcher,
     StyleSwitcher,
-    InterfaceLanguageSwitcher
+    InterfaceLanguageSwitcher,
+    Checkbox
   },
   computed: {
     user () {
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index e1a06fe2..a83489d2 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -36,12 +36,9 @@
                   <interface-language-switcher />
                 </li>
                 <li v-if="instanceSpecificPanelPresent">
-                  <input
-                    id="hideISP"
-                    v-model="hideISP"
-                    type="checkbox"
-                  >
-                  <label for="hideISP">{{ $t('settings.hide_isp') }}</label>
+                  <Checkbox v-model="hideISP">
+                    {{ $t('settings.hide_isp') }}
+                  </Checkbox>
                 </li>
               </ul>
             </div>
@@ -49,58 +46,42 @@
               <h2>{{ $t('nav.timeline') }}</h2>
               <ul class="setting-list">
                 <li>
-                  <input
-                    id="hideMutedPosts"
-                    v-model="hideMutedPosts"
-                    type="checkbox"
-                  >
-                  <label for="hideMutedPosts">{{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}</label>
+                  <Checkbox v-model="hideMutedPosts">
+                    {{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}
+                  </Checkbox>
                 </li>
                 <li>
-                  <input
-                    id="collapseMessageWithSubject"
-                    v-model="collapseMessageWithSubject"
-                    type="checkbox"
-                  >
-                  <label for="collapseMessageWithSubject">{{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}</label>
+                  <Checkbox v-model="collapseMessageWithSubject">
+                    {{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}
+                  </Checkbox>
                 </li>
                 <li>
-                  <input
-                    id="streaming"
-                    v-model="streaming"
-                    type="checkbox"
-                  >
-                  <label for="streaming">{{ $t('settings.streaming') }}</label>
+                  <Checkbox v-model="streaming">
+                    {{ $t('settings.streaming') }}
+                  </Checkbox>
                   <ul
                     class="setting-list suboptions"
                     :class="[{disabled: !streaming}]"
                   >
                     <li>
-                      <input
-                        id="pauseOnUnfocused"
+                      <Checkbox
                         v-model="pauseOnUnfocused"
                         :disabled="!streaming"
-                        type="checkbox"
                       >
-                      <label for="pauseOnUnfocused">{{ $t('settings.pause_on_unfocused') }}</label>
+                        {{ $t('settings.pause_on_unfocused') }}
+                      </Checkbox>
                     </li>
                   </ul>
                 </li>
                 <li>
-                  <input
-                    id="autoload"
-                    v-model="autoLoad"
-                    type="checkbox"
-                  >
-                  <label for="autoload">{{ $t('settings.autoload') }}</label>
+                  <Checkbox v-model="autoLoad">
+                    {{ $t('settings.autoload') }}
+                  </Checkbox>
                 </li>
                 <li>
-                  <input
-                    id="hoverPreview"
-                    v-model="hoverPreview"
-                    type="checkbox"
-                  >
-                  <label for="hoverPreview">{{ $t('settings.reply_link_preview') }}</label>
+                  <Checkbox v-model="hoverPreview">
+                    {{ $t('settings.reply_link_preview') }}
+                  </Checkbox>
                 </li>
               </ul>
             </div>
@@ -109,24 +90,14 @@
               <h2>{{ $t('settings.composing') }}</h2>
               <ul class="setting-list">
                 <li>
-                  <input
-                    id="scopeCopy"
-                    v-model="scopeCopy"
-                    type="checkbox"
-                  >
-                  <label for="scopeCopy">
+                  <Checkbox v-model="scopeCopy">
                     {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }}
-                  </label>
+                  </Checkbox>
                 </li>
                 <li>
-                  <input
-                    id="subjectHide"
-                    v-model="alwaysShowSubjectInput"
-                    type="checkbox"
-                  >
-                  <label for="subjectHide">
+                  <Checkbox v-model="alwaysShowSubjectInput">
                     {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputLocalizedValue }) }}
-                  </label>
+                  </Checkbox>
                 </li>
                 <li>
                   <div>
@@ -181,30 +152,19 @@
                   </div>
                 </li>
                 <li>
-                  <input
-                    id="minimalScopesMode"
-                    v-model="minimalScopesMode"
-                    type="checkbox"
-                  >
-                  <label for="minimalScopesMode">
+                  <Checkbox v-model="minimalScopesMode">
                     {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }}
-                  </label>
+                  </Checkbox>
                 </li>
                 <li>
-                  <input
-                    id="autohideFloatingPostButton"
-                    v-model="autohideFloatingPostButton"
-                    type="checkbox"
-                  >
-                  <label for="autohideFloatingPostButton">{{ $t('settings.autohide_floating_post_button') }}</label>
+                  <Checkbox v-model="autohideFloatingPostButton">
+                    {{ $t('settings.autohide_floating_post_button') }}
+                  </Checkbox>
                 </li>
                 <li>
-                  <input
-                    id="padEmoji"
-                    v-model="padEmoji"
-                    type="checkbox"
-                  >
-                  <label for="padEmoji">{{ $t('settings.pad_emoji') }}</label>
+                  <Checkbox v-model="padEmoji">
+                    {{ $t('settings.pad_emoji') }}
+                  </Checkbox>
                 </li>
               </ul>
             </div>
@@ -213,23 +173,19 @@
               <h2>{{ $t('settings.attachments') }}</h2>
               <ul class="setting-list">
                 <li>
-                  <input
-                    id="hideAttachments"
-                    v-model="hideAttachments"
-                    type="checkbox"
-                  >
-                  <label for="hideAttachments">{{ $t('settings.hide_attachments_in_tl') }}</label>
+                  <Checkbox v-model="hideAttachments">
+                    {{ $t('settings.hide_attachments_in_tl') }}
+                  </Checkbox>
                 </li>
                 <li>
-                  <input
-                    id="hideAttachmentsInConv"
-                    v-model="hideAttachmentsInConv"
-                    type="checkbox"
-                  >
-                  <label for="hideAttachmentsInConv">{{ $t('settings.hide_attachments_in_convo') }}</label>
+                  <Checkbox v-model="hideAttachmentsInConv">
+                    {{ $t('settings.hide_attachments_in_convo') }}
+                  </Checkbox>
                 </li>
                 <li>
-                  <label for="maxThumbnails">{{ $t('settings.max_thumbnails') }}</label>
+                  <label for="maxThumbnails">
+                    {{ $t('settings.max_thumbnails') }}
+                  </label>
                   <input
                     id="maxThumbnails"
                     v-model.number="maxThumbnails"
@@ -240,60 +196,48 @@
                   >
                 </li>
                 <li>
-                  <input
-                    id="hideNsfw"
-                    v-model="hideNsfw"
-                    type="checkbox"
-                  >
-                  <label for="hideNsfw">{{ $t('settings.nsfw_clickthrough') }}</label>
+                  <Checkbox v-model="hideNsfw">
+                    {{ $t('settings.nsfw_clickthrough') }}
+                  </Checkbox>
                 </li>
                 <ul class="setting-list suboptions">
                   <li>
-                    <input
-                      id="preloadImage"
+                    <Checkbox
                       v-model="preloadImage"
                       :disabled="!hideNsfw"
-                      type="checkbox"
                     >
-                    <label for="preloadImage">{{ $t('settings.preload_images') }}</label>
+                      {{ $t('settings.preload_images') }}
+                    </Checkbox>
                   </li>
                   <li>
-                    <input
-                      id="useOneClickNsfw"
+                    <Checkbox
                       v-model="useOneClickNsfw"
                       :disabled="!hideNsfw"
-                      type="checkbox"
                     >
-                    <label for="useOneClickNsfw">{{ $t('settings.use_one_click_nsfw') }}</label>
+                      {{ $t('settings.use_one_click_nsfw') }}
+                    </Checkbox>
                   </li>
                 </ul>
                 <li>
-                  <input
-                    id="stopGifs"
-                    v-model="stopGifs"
-                    type="checkbox"
-                  >
-                  <label for="stopGifs">{{ $t('settings.stop_gifs') }}</label>
+                  <Checkbox v-model="stopGifs">
+                    {{ $t('settings.stop_gifs') }}
+                  </Checkbox>
                 </li>
                 <li>
-                  <input
-                    id="loopVideo"
-                    v-model="loopVideo"
-                    type="checkbox"
-                  >
-                  <label for="loopVideo">{{ $t('settings.loop_video') }}</label>
+                  <Checkbox v-model="loopVideo">
+                    {{ $t('settings.loop_video') }}
+                  </Checkbox>
                   <ul
                     class="setting-list suboptions"
                     :class="[{disabled: !streaming}]"
                   >
                     <li>
-                      <input
-                        id="loopVideoSilentOnly"
+                      <Checkbox
                         v-model="loopVideoSilentOnly"
                         :disabled="!loopVideo || !loopSilentAvailable"
-                        type="checkbox"
                       >
-                      <label for="loopVideoSilentOnly">{{ $t('settings.loop_video_silent_only') }}</label>
+                        {{ $t('settings.loop_video_silent_only') }}
+                      </Checkbox>
                       <div
                         v-if="!loopSilentAvailable"
                         class="unavailable"
@@ -304,20 +248,14 @@
                   </ul>
                 </li>
                 <li>
-                  <input
-                    id="playVideosInModal"
-                    v-model="playVideosInModal"
-                    type="checkbox"
-                  >
-                  <label for="playVideosInModal">{{ $t('settings.play_videos_in_modal') }}</label>
+                  <Checkbox v-model="playVideosInModal">
+                    {{ $t('settings.play_videos_in_modal') }}
+                  </Checkbox>
                 </li>
                 <li>
-                  <input
-                    id="useContainFit"
-                    v-model="useContainFit"
-                    type="checkbox"
-                  >
-                  <label for="useContainFit">{{ $t('settings.use_contain_fit') }}</label>
+                  <Checkbox v-model="useContainFit">
+                    {{ $t('settings.use_contain_fit') }}
+                  </Checkbox>
                 </li>
               </ul>
             </div>
@@ -326,14 +264,9 @@
               <h2>{{ $t('settings.notifications') }}</h2>
               <ul class="setting-list">
                 <li>
-                  <input
-                    id="webPushNotifications"
-                    v-model="webPushNotifications"
-                    type="checkbox"
-                  >
-                  <label for="webPushNotifications">
+                  <Checkbox v-model="webPushNotifications">
                     {{ $t('settings.enable_web_push_notifications') }}
-                  </label>
+                  </Checkbox>
                 </li>
               </ul>
             </div>
@@ -351,44 +284,24 @@
                 <span class="label">{{ $t('settings.notification_visibility') }}</span>
                 <ul class="option-list">
                   <li>
-                    <input
-                      id="notification-visibility-likes"
-                      v-model="notificationVisibility.likes"
-                      type="checkbox"
-                    >
-                    <label for="notification-visibility-likes">
+                    <Checkbox v-model="notificationVisibility.likes">
                       {{ $t('settings.notification_visibility_likes') }}
-                    </label>
+                    </Checkbox>
                   </li>
                   <li>
-                    <input
-                      id="notification-visibility-repeats"
-                      v-model="notificationVisibility.repeats"
-                      type="checkbox"
-                    >
-                    <label for="notification-visibility-repeats">
+                    <Checkbox v-model="notificationVisibility.repeats">
                       {{ $t('settings.notification_visibility_repeats') }}
-                    </label>
+                    </Checkbox>
                   </li>
                   <li>
-                    <input
-                      id="notification-visibility-follows"
-                      v-model="notificationVisibility.follows"
-                      type="checkbox"
-                    >
-                    <label for="notification-visibility-follows">
+                    <Checkbox v-model="notificationVisibility.follows">
                       {{ $t('settings.notification_visibility_follows') }}
-                    </label>
+                    </Checkbox>
                   </li>
                   <li>
-                    <input
-                      id="notification-visibility-mentions"
-                      v-model="notificationVisibility.mentions"
-                      type="checkbox"
-                    >
-                    <label for="notification-visibility-mentions">
+                    <Checkbox v-model="notificationVisibility.mentions">
                       {{ $t('settings.notification_visibility_mentions') }}
-                    </label>
+                    </Checkbox>
                   </li>
                 </ul>
               </div>
@@ -413,24 +326,14 @@
                 </label>
               </div>
               <div>
-                <input
-                  id="hidePostStats"
-                  v-model="hidePostStats"
-                  type="checkbox"
-                >
-                <label for="hidePostStats">
+                <Checkbox v-model="hidePostStats">
                   {{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsLocalizedValue }) }}
-                </label>
+                </Checkbox>
               </div>
               <div>
-                <input
-                  id="hideUserStats"
-                  v-model="hideUserStats"
-                  type="checkbox"
-                >
-                <label for="hideUserStats">
+                <Checkbox v-model="hideUserStats">
                   {{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsLocalizedValue }) }}
-                </label>
+                </Checkbox>
               </div>
             </div>
             <div class="setting-item">
@@ -442,14 +345,9 @@
                 />
               </div>
               <div>
-                <input
-                  id="hideFilteredStatuses"
-                  v-model="hideFilteredStatuses"
-                  type="checkbox"
-                >
-                <label for="hideFilteredStatuses">
+                <Checkbox v-model="hideFilteredStatuses">
                   {{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesLocalizedValue }) }}
-                </label>
+                </Checkbox>
               </div>
             </div>
           </div>
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index c19aaaec..6e2a1d7b 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -10,6 +10,7 @@ import ContrastRatio from '../contrast_ratio/contrast_ratio.vue'
 import TabSwitcher from '../tab_switcher/tab_switcher.js'
 import Preview from './preview.vue'
 import ExportImport from '../export_import/export_import.vue'
+import Checkbox from '../checkbox/checkbox.vue'
 
 // List of color values used in v1
 const v1OnlyNames = [
@@ -338,7 +339,8 @@ export default {
     FontControl,
     TabSwitcher,
     Preview,
-    ExportImport
+    ExportImport,
+    Checkbox
   },
   methods: {
     setCustomTheme () {
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index d24394a4..944debab 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -42,44 +42,29 @@
       </div>
       <div class="save-load-options">
         <span class="keep-option">
-          <input
-            id="keep-color"
-            v-model="keepColor"
-            type="checkbox"
-          >
-          <label for="keep-color">{{ $t('settings.style.switcher.keep_color') }}</label>
+          <Checkbox v-model="keepColor">
+            {{ $t('settings.style.switcher.keep_color') }}
+          </Checkbox>
         </span>
         <span class="keep-option">
-          <input
-            id="keep-shadows"
-            v-model="keepShadows"
-            type="checkbox"
-          >
-          <label for="keep-shadows">{{ $t('settings.style.switcher.keep_shadows') }}</label>
+          <Checkbox v-model="keepShadows">
+            {{ $t('settings.style.switcher.keep_shadows') }}
+          </Checkbox>
         </span>
         <span class="keep-option">
-          <input
-            id="keep-opacity"
-            v-model="keepOpacity"
-            type="checkbox"
-          >
-          <label for="keep-opacity">{{ $t('settings.style.switcher.keep_opacity') }}</label>
+          <Checkbox v-model="keepOpacity">
+            {{ $t('settings.style.switcher.keep_opacity') }}
+          </Checkbox>
         </span>
         <span class="keep-option">
-          <input
-            id="keep-roundness"
-            v-model="keepRoundness"
-            type="checkbox"
-          >
-          <label for="keep-roundness">{{ $t('settings.style.switcher.keep_roundness') }}</label>
+          <Checkbox v-model="keepRoundness">
+            {{ $t('settings.style.switcher.keep_roundness') }}
+          </Checkbox>
         </span>
         <span class="keep-option">
-          <input
-            id="keep-fonts"
-            v-model="keepFonts"
-            type="checkbox"
-          >
-          <label for="keep-fonts">{{ $t('settings.style.switcher.keep_fonts') }}</label>
+          <Checkbox v-model="keepFonts">
+            {{ $t('settings.style.switcher.keep_fonts') }}
+          </Checkbox>
         </span>
         <p>{{ $t('settings.style.switcher.save_load_hint') }}</p>
       </div>
-- 
cgit v1.2.3-70-g09d2