From a463959a365a5d618a79c96a26f6506e700d6ea3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 1 Oct 2020 01:43:07 +0300
Subject: Initial work on highlighting changed settings. Some refactoring to
 simplify addition of new settings

---
 .../settings_modal/helpers/boolean_setting.vue     |  57 ++++++++++
 .../helpers/shared_computed_object.js              |  23 +---
 .../settings_modal/tabs/filtering_tab.js           |   4 +-
 .../settings_modal/tabs/filtering_tab.vue          |  42 ++++----
 src/components/settings_modal/tabs/general_tab.js  |   4 +-
 src/components/settings_modal/tabs/general_tab.vue | 118 ++++++++++-----------
 6 files changed, 146 insertions(+), 102 deletions(-)
 create mode 100644 src/components/settings_modal/helpers/boolean_setting.vue

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
new file mode 100644
index 00000000..11b354ed
--- /dev/null
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -0,0 +1,57 @@
+<template>
+  <label
+    class="BooleanSetting"
+  >
+    <Checkbox
+      :checked="state"
+      @change="update"
+      :disabled="disabled"
+      >
+      <span
+        v-if="!!$slots.default"
+        class="label"
+        >
+        <slot />
+      </span>
+    </Checkbox>
+    <span v-if="isChanged">
+      <strong>CHANGED</strong>
+    </span>
+  </label>
+</template>
+
+<script>
+import { get, set } from 'lodash'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+export default {
+  props: [
+    'path',
+    'disabled'
+  ],
+  components: {
+    Checkbox
+  },
+  computed: {
+    pathDefault () {
+      const [firstSegment, ...rest] = this.path.split('.')
+      return [firstSegment + 'DefaultValue', ...rest].join('.')
+    },
+    state () {
+      return get(this.$parent, this.path)
+    },
+    isChanged () {
+      return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault)
+    }
+  },
+  methods: {
+    update (e) {
+      set(this.$parent, this.path, e)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.BooleanSetting {
+}
+</style>
diff --git a/src/components/settings_modal/helpers/shared_computed_object.js b/src/components/settings_modal/helpers/shared_computed_object.js
index 86703697..3cbcd288 100644
--- a/src/components/settings_modal/helpers/shared_computed_object.js
+++ b/src/components/settings_modal/helpers/shared_computed_object.js
@@ -1,29 +1,16 @@
-import {
-  instanceDefaultProperties,
-  multiChoiceProperties,
-  defaultState as configDefaultState
-} from 'src/modules/config.js'
+import { defaultState as configDefaultState } from 'src/modules/config.js'
 
 const SharedComputedObject = () => ({
   user () {
     return this.$store.state.users.currentUser
   },
-  // Getting localized values for instance-default properties
-  ...instanceDefaultProperties
-    .filter(key => multiChoiceProperties.includes(key))
+  // Getting values for default properties
+  ...Object.keys(configDefaultState)
     .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 () {
-        return this.$t('settings.values.' + this.$store.getters.instanceDefaultConfig[key])
+        console.log(this.$store.getters.defaultConfig)
+        return this.$store.getters.defaultConfig[key]
       }
     ])
     .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index 3b2df556..04273211 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -1,5 +1,5 @@
 import { filter, trim } from 'lodash'
-import Checkbox from 'src/components/checkbox/checkbox.vue'
+import BooleanSetting from '../helpers/boolean_setting.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
@@ -10,7 +10,7 @@ const FilteringTab = {
     }
   },
   components: {
-    Checkbox
+    BooleanSetting
   },
   computed: {
     ...SharedComputedObject(),
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index eea41514..6c42718b 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -5,34 +5,34 @@
         <span class="label">{{ $t('settings.notification_visibility') }}</span>
         <ul class="option-list">
           <li>
-            <Checkbox v-model="notificationVisibility.likes">
+            <BooleanSetting path="notificationVisibility.likes">
               {{ $t('settings.notification_visibility_likes') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
           <li>
-            <Checkbox v-model="notificationVisibility.repeats">
+            <BooleanSetting path="notificationVisibility.repeats">
               {{ $t('settings.notification_visibility_repeats') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
           <li>
-            <Checkbox v-model="notificationVisibility.follows">
+            <BooleanSetting path="notificationVisibility.follows">
               {{ $t('settings.notification_visibility_follows') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
           <li>
-            <Checkbox v-model="notificationVisibility.mentions">
+            <BooleanSetting path="notificationVisibility.mentions">
               {{ $t('settings.notification_visibility_mentions') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
           <li>
-            <Checkbox v-model="notificationVisibility.moves">
+            <BooleanSetting path="notificationVisibility.moves">
               {{ $t('settings.notification_visibility_moves') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
           <li>
-            <Checkbox v-model="notificationVisibility.emojiReactions">
+            <BooleanSetting path="notificationVisibility.emojiReactions">
               {{ $t('settings.notification_visibility_emoji_reactions') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
         </ul>
       </div>
@@ -57,14 +57,14 @@
         </label>
       </div>
       <div>
-        <Checkbox v-model="hidePostStats">
-          {{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsLocalizedValue }) }}
-        </Checkbox>
+        <BooleanSetting path="hidePostStats">
+          {{ $t('settings.hide_post_stats') }}
+        </BooleanSetting>
       </div>
       <div>
-        <Checkbox v-model="hideUserStats">
-          {{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsLocalizedValue }) }}
-        </Checkbox>
+        <BooleanSetting path="hideUserStats">
+          {{ $t('settings.hide_user_stats') }}
+        </BooleanSetting>
       </div>
     </div>
     <div class="setting-item">
@@ -76,9 +76,9 @@
         />
       </div>
       <div>
-        <Checkbox v-model="hideFilteredStatuses">
-          {{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesLocalizedValue }) }}
-        </Checkbox>
+        <BooleanSetting path="hideFilteredStatuses">
+          {{ $t('settings.hide_filtered_statuses') }}
+        </BooleanSetting>
       </div>
     </div>
   </div>
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 0eb37e44..679ef684 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -1,4 +1,4 @@
-import Checkbox from 'src/components/checkbox/checkbox.vue'
+import BooleanSetting from '../helpers/boolean_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
@@ -16,7 +16,7 @@ const GeneralTab = {
     }
   },
   components: {
-    Checkbox,
+    BooleanSetting,
     InterfaceLanguageSwitcher
   },
   computed: {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 7f06d0bd..e03e731b 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -7,9 +7,9 @@
           <interface-language-switcher />
         </li>
         <li v-if="instanceSpecificPanelPresent">
-          <Checkbox v-model="hideISP">
+          <BooleanSetting path="hideISP">
             {{ $t('settings.hide_isp') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
       </ul>
     </div>
@@ -17,46 +17,46 @@
       <h2>{{ $t('nav.timeline') }}</h2>
       <ul class="setting-list">
         <li>
-          <Checkbox v-model="hideMutedPosts">
-            {{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}
-          </Checkbox>
+          <BooleanSetting path="hideMutedPosts">
+            {{ $t('settings.hide_muted_posts') }}
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="collapseMessageWithSubject">
-            {{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}
-          </Checkbox>
+          <BooleanSetting path="collapseMessageWithSubject">
+            {{ $t('settings.collapse_subject') }}
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="streaming">
+          <BooleanSetting path="streaming">
             {{ $t('settings.streaming') }}
-          </Checkbox>
+          </BooleanSetting>
           <ul
             class="setting-list suboptions"
             :class="[{disabled: !streaming}]"
           >
             <li>
-              <Checkbox
-                v-model="pauseOnUnfocused"
+              <BooleanSetting
+                path="pauseOnUnfocused"
                 :disabled="!streaming"
               >
                 {{ $t('settings.pause_on_unfocused') }}
-              </Checkbox>
+              </BooleanSetting>
             </li>
           </ul>
         </li>
         <li>
-          <Checkbox v-model="useStreamingApi">
+          <BooleanSetting path="useStreamingApi">
             {{ $t('settings.useStreamingApi') }}
             <br>
             <small>
               {{ $t('settings.useStreamingApiWarning') }}
             </small>
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="emojiReactionsOnTimeline">
+          <BooleanSetting path="emojiReactionsOnTimeline">
             {{ $t('settings.emoji_reactions_on_timeline') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
       </ul>
     </div>
@@ -65,14 +65,14 @@
       <h2>{{ $t('settings.composing') }}</h2>
       <ul class="setting-list">
         <li>
-          <Checkbox v-model="scopeCopy">
-            {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }}
-          </Checkbox>
+          <BooleanSetting path="scopeCopy">
+            {{ $t('settings.scope_copy') }}
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="alwaysShowSubjectInput">
-            {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputLocalizedValue }) }}
-          </Checkbox>
+          <BooleanSetting path="alwaysShowSubjectInput">
+            {{ $t('settings.subject_input_always_show') }}
+          </BooleanSetting>
         </li>
         <li>
           <div>
@@ -127,19 +127,19 @@
           </div>
         </li>
         <li>
-          <Checkbox v-model="minimalScopesMode">
-            {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }}
-          </Checkbox>
+          <BooleanSetting path="minimalScopesMode">
+            {{ $t('settings.minimal_scopes_mode') }} {{ minimalScopesModeDefaultValue }}
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="autohideFloatingPostButton">
+          <BooleanSetting path="autohideFloatingPostButton">
             {{ $t('settings.autohide_floating_post_button') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="padEmoji">
+          <BooleanSetting path="padEmoji">
             {{ $t('settings.pad_emoji') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
       </ul>
     </div>
@@ -148,14 +148,14 @@
       <h2>{{ $t('settings.attachments') }}</h2>
       <ul class="setting-list">
         <li>
-          <Checkbox v-model="hideAttachments">
+          <BooleanSetting path="hideAttachments">
             {{ $t('settings.hide_attachments_in_tl') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="hideAttachmentsInConv">
+          <BooleanSetting path="hideAttachmentsInConv">
             {{ $t('settings.hide_attachments_in_convo') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
           <label for="maxThumbnails">
@@ -163,7 +163,7 @@
           </label>
           <input
             id="maxThumbnails"
-            v-model.number="maxThumbnails"
+            path.number="maxThumbnails"
             class="number-input"
             type="number"
             min="0"
@@ -171,48 +171,48 @@
           >
         </li>
         <li>
-          <Checkbox v-model="hideNsfw">
+          <BooleanSetting path="hideNsfw">
             {{ $t('settings.nsfw_clickthrough') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <ul class="setting-list suboptions">
           <li>
-            <Checkbox
-              v-model="preloadImage"
+            <BooleanSetting
+              path="preloadImage"
               :disabled="!hideNsfw"
             >
               {{ $t('settings.preload_images') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
           <li>
-            <Checkbox
-              v-model="useOneClickNsfw"
+            <BooleanSetting
+              path="useOneClickNsfw"
               :disabled="!hideNsfw"
             >
               {{ $t('settings.use_one_click_nsfw') }}
-            </Checkbox>
+            </BooleanSetting>
           </li>
         </ul>
         <li>
-          <Checkbox v-model="stopGifs">
+          <BooleanSetting path="stopGifs">
             {{ $t('settings.stop_gifs') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="loopVideo">
+          <BooleanSetting path="loopVideo">
             {{ $t('settings.loop_video') }}
-          </Checkbox>
+          </BooleanSetting>
           <ul
             class="setting-list suboptions"
             :class="[{disabled: !streaming}]"
           >
             <li>
-              <Checkbox
-                v-model="loopVideoSilentOnly"
+              <BooleanSetting
+                path="loopVideoSilentOnly"
                 :disabled="!loopVideo || !loopSilentAvailable"
               >
                 {{ $t('settings.loop_video_silent_only') }}
-              </Checkbox>
+              </BooleanSetting>
               <div
                 v-if="!loopSilentAvailable"
                 class="unavailable"
@@ -223,14 +223,14 @@
           </ul>
         </li>
         <li>
-          <Checkbox v-model="playVideosInModal">
+          <BooleanSetting path="playVideosInModal">
             {{ $t('settings.play_videos_in_modal') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="useContainFit">
+          <BooleanSetting path="useContainFit">
             {{ $t('settings.use_contain_fit') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
       </ul>
     </div>
@@ -239,9 +239,9 @@
       <h2>{{ $t('settings.notifications') }}</h2>
       <ul class="setting-list">
         <li>
-          <Checkbox v-model="webPushNotifications">
+          <BooleanSetting path="webPushNotifications">
             {{ $t('settings.enable_web_push_notifications') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
       </ul>
     </div>
@@ -250,9 +250,9 @@
       <h2>{{ $t('settings.fun') }}</h2>
       <ul class="setting-list">
         <li>
-          <Checkbox v-model="greentext">
-            {{ $t('settings.greentext') }} {{ $t('settings.instance_default', { value: greentextLocalizedValue }) }}
-          </Checkbox>
+          <BooleanSetting path="greentext">
+            {{ $t('settings.greentext') }}
+          </BooleanSetting>
         </li>
       </ul>
     </div>
-- 
cgit v1.2.3-70-g09d2


From e695506c514e49964dfd81c7db5c5b4d4918f47d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 17 Oct 2020 22:28:49 +0300
Subject: proper modified icon + popup

---
 .../settings_modal/helpers/boolean_setting.vue     | 10 ++---
 .../settings_modal/helpers/modified_icon.vue       | 46 ++++++++++++++++++++++
 src/i18n/en.json                                   |  1 +
 3 files changed, 52 insertions(+), 5 deletions(-)
 create mode 100644 src/components/settings_modal/helpers/modified_icon.vue

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index 11b354ed..f7c392cd 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -6,30 +6,30 @@
       :checked="state"
       @change="update"
       :disabled="disabled"
-      >
+    >
       <span
         v-if="!!$slots.default"
         class="label"
         >
         <slot />
       </span>
+      <ModifiedIcon :changed="isChanged" />
     </Checkbox>
-    <span v-if="isChanged">
-      <strong>CHANGED</strong>
-    </span>
   </label>
 </template>
 
 <script>
 import { get, set } from 'lodash'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
+import ModifiedIcon from './modified_icon.vue'
 export default {
   props: [
     'path',
     'disabled'
   ],
   components: {
-    Checkbox
+    Checkbox,
+    ModifiedIcon
   },
   computed: {
     pathDefault () {
diff --git a/src/components/settings_modal/helpers/modified_icon.vue b/src/components/settings_modal/helpers/modified_icon.vue
new file mode 100644
index 00000000..27e0a9c5
--- /dev/null
+++ b/src/components/settings_modal/helpers/modified_icon.vue
@@ -0,0 +1,46 @@
+<template>
+  <span
+    v-if="changed"
+    class="ModifiedIcon"
+    >
+    <Popover
+      trigger="hover"
+      >
+      <i
+        slot="trigger"
+        class="icon icon-wrench"
+        />
+      <div
+        class="modified-tooltip"
+        slot="content"
+        >
+      {{ $t('settings.setting_changed') }}
+      </div>
+    </Popover>
+  </span>
+</template>
+
+<script>
+import Popover from 'src/components/popover/popover.vue'
+export default {
+  props: ['changed'],
+  components: { Popover }
+}
+</script>
+
+<style lang="scss">
+.ModifiedIcon {
+  display: inline-block;
+  position: relative;
+
+  .icon {
+    display: inline-block;
+  }
+
+  .modified-tooltip {
+    margin: 0.5em 1em;
+    min-width: 10em;
+    text-align: center;
+  }
+}
+</style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index d3d57562..e25bda8f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -240,6 +240,7 @@
   "settings": {
     "app_name": "App name",
     "security": "Security",
+    "setting_changed": "Setting is different from default",
     "enter_current_password_to_confirm": "Enter your current password to confirm your identity",
     "mfa": {
       "otp": "OTP",
-- 
cgit v1.2.3-70-g09d2


From dcba920f92db596aea3a097bd7fca3753532cc6f Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Wed, 20 Jan 2021 17:01:57 +0200
Subject: fix profile field buttons, remove attachment button

---
 .../post_status_form/post_status_form.vue          | 26 +++++-----------------
 .../settings_modal/tabs/profile_tab.scss           |  9 ++++----
 src/components/settings_modal/tabs/profile_tab.vue | 14 ++++++------
 3 files changed, 18 insertions(+), 31 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index ed830f57..73f6a4f1 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -302,11 +302,12 @@
           :key="file.url"
           class="media-upload-wrapper"
         >
-          <FAIcon
-            class="fa-scale-110 fa-old-padding"
-            icon="times"
+          <button
+            class="button-unstyled hider"
             @click="removeMediaFile(file)"
-          />
+          >
+            <FAIcon icon="times" />
+          </button>
           <attachment
             :attachment="file"
             :set-media="() => $store.dispatch('setMedia', newStatus.files)"
@@ -516,26 +517,11 @@
   }
 
    .attachments .media-upload-wrapper {
-    padding: 0 0.5em;
+    position: relative;
 
     .attachment {
       margin: 0;
       padding: 0;
-      position: relative;
-    }
-
-    .fa-scale-110 fa-old-padding {
-      position: absolute;
-      margin: 10px;
-      margin: .75em;
-      padding: .5em;
-      background: rgba(230,230,230,0.6);
-      z-index: 2;
-      color: black;
-      border-radius: $fallback--attachmentRadius;
-      border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
-      font-weight: bold;
-      cursor: pointer;
     }
   }
 
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index e821f952..1a19b50d 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -111,16 +111,17 @@
   .profile-fields {
     display: flex;
 
-    &>.emoji-input {
+    & > .emoji-input {
       flex: 1 1 auto;
-      margin: 0 .2em .5em;
+      margin: 0 0.2em 0.5em;
       min-width: 0;
     }
 
-    &>.icon-container {
+    & > .button-unstyled {
       width: 20px;
       align-self: center;
-      margin: 0 .2em .5em;
+      margin: 0 0.2em 0.5em;
+      padding: 0 0.5em;
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index b7ef21d7..abb16db2 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -124,24 +124,24 @@
               :placeholder="$t('settings.profile_fields.value')"
             >
           </EmojiInput>
-          <div
-            class="icon-container"
+          <button
+            class="button-unstyled"
+            @click="deleteField(i)"
           >
             <FAIcon
               v-show="newFields.length > 1"
               icon="times"
-              @click="deleteField(i)"
             />
-          </div>
+          </button>
         </div>
-        <a
+        <button
           v-if="newFields.length < maxFields"
-          class="add-field faint"
+          class="add-field faint button-unstyled"
           @click="addField"
         >
           <FAIcon icon="plus" />
           {{ $t("settings.profile_fields.add_field") }}
-        </a>
+        </button>
       </div>
       <p>
         <Checkbox v-model="bot">
-- 
cgit v1.2.3-70-g09d2


From 02ab803725e42a749c6c8f564e8093df70e97fc7 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Wed, 20 Jan 2021 17:36:40 +0200
Subject: change a few more buttons to real buttons

---
 CHANGELOG.md                                       |  2 ++
 src/App.scss                                       |  7 +++++
 src/components/poll/poll_form.vue                  | 30 +++++++---------------
 src/components/settings_modal/tabs/profile_tab.vue |  4 +--
 4 files changed, 20 insertions(+), 23 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 12a38a03..1107491e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
+### Fixed
+- Button to remove uploaded media in post status form is now properly placed and sized.
 
 
 ## [2.2.3] - 2021-01-18
diff --git a/src/App.scss b/src/App.scss
index 2a1d7b1b..8b91f3de 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -178,6 +178,13 @@ a {
   &.-fullwidth {
     width: 100%;
   }
+
+  &.-hover-highlight {
+    &:hover svg {
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
+  }
 }
 
 input, textarea, .select, .input {
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index 31f204a0..09496105 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -21,20 +21,17 @@
           @keydown.enter.stop.prevent="nextOption(index)"
         >
       </div>
-      <div
+      <button
         v-if="options.length > 2"
-        class="icon-container"
+        class="delete-option button-unstyled -hover-highlight"
+        @click="deleteOption(index)"
       >
-        <FAIcon
-          icon="times"
-          class="delete"
-          @click="deleteOption(index)"
-        />
-      </div>
+        <FAIcon icon="times" />
+      </button>
     </div>
-    <a
+    <button
       v-if="options.length < maxOptions"
-      class="add-option faint"
+      class="add-option faint button-unstyled -hover-highlight"
       @click="addOption"
     >
       <FAIcon
@@ -43,7 +40,7 @@
       />
 
       {{ $t("polls.add_option") }}
-    </a>
+    </button>
     <div class="poll-type-expiry">
       <div
         class="poll-type"
@@ -116,7 +113,6 @@
     align-self: flex-start;
     padding-top: 0.25em;
     padding-left: 0.1em;
-    cursor: pointer;
   }
 
   .poll-option {
@@ -135,19 +131,11 @@
     }
   }
 
-  .icon-container {
+  .delete-option {
     // Hack: Move the icon over the input box
     width: 1.5em;
     margin-left: -1.5em;
     z-index: 1;
-
-    .delete {
-      cursor: pointer;
-
-      &:hover {
-        color: inherit;
-      }
-    }
   }
 
   .poll-type-expiry {
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index abb16db2..cfbd94fc 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -125,7 +125,7 @@
             >
           </EmojiInput>
           <button
-            class="button-unstyled"
+            class="button-unstyled -hover-highlight"
             @click="deleteField(i)"
           >
             <FAIcon
@@ -136,7 +136,7 @@
         </div>
         <button
           v-if="newFields.length < maxFields"
-          class="add-field faint button-unstyled"
+          class="add-field faint button-unstyled -hover-highlight"
           @click="addField"
         >
           <FAIcon icon="plus" />
-- 
cgit v1.2.3-70-g09d2


From 60a8a89f5b7526af44c9682e151dd92c979b1412 Mon Sep 17 00:00:00 2001
From: rinpatch <rinpatch@sdf.org>
Date: Thu, 3 Dec 2020 00:17:55 +0300
Subject: Use app locale with toLocaleString/toLocaleDateString

Fixes inconsistent date formatting when browser language is different
from PleromaFE language.
---
 src/components/chat_message_date/chat_message_date.vue          | 4 +++-
 src/components/settings_modal/tabs/security_tab/security_tab.js | 3 ++-
 src/components/timeago/timeago.vue                              | 6 ++++--
 3 files changed, 9 insertions(+), 4 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/chat_message_date/chat_message_date.vue b/src/components/chat_message_date/chat_message_date.vue
index 79c346b6..98349b75 100644
--- a/src/components/chat_message_date/chat_message_date.vue
+++ b/src/components/chat_message_date/chat_message_date.vue
@@ -5,6 +5,8 @@
 </template>
 
 <script>
+import localeService from 'src/services/locale/locale.service.js'
+
 export default {
   name: 'Timeago',
   props: ['date'],
@@ -16,7 +18,7 @@ export default {
       if (this.date.getTime() === today.getTime()) {
         return this.$t('display_date.today')
       } else {
-        return this.date.toLocaleDateString('en', { day: 'numeric', month: 'long' })
+        return this.date.toLocaleDateString(localeService.internalToBrowserLocale(this.$i18n.locale), { day: 'numeric', month: 'long' })
       }
     }
   }
diff --git a/src/components/settings_modal/tabs/security_tab/security_tab.js b/src/components/settings_modal/tabs/security_tab/security_tab.js
index 811161a5..65d20fc0 100644
--- a/src/components/settings_modal/tabs/security_tab/security_tab.js
+++ b/src/components/settings_modal/tabs/security_tab/security_tab.js
@@ -1,6 +1,7 @@
 import ProgressButton from 'src/components/progress_button/progress_button.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Mfa from './mfa.vue'
+import localeService from 'src/services/locale/locale.service.js'
 
 const SecurityTab = {
   data () {
@@ -37,7 +38,7 @@ const SecurityTab = {
         return {
           id: oauthToken.id,
           appName: oauthToken.app_name,
-          validUntil: new Date(oauthToken.valid_until).toLocaleDateString()
+          validUntil: new Date(oauthToken.valid_until).toLocaleDateString(localeService.internalToBrowserLocale(this.$i18n.locale))
         }
       })
     }
diff --git a/src/components/timeago/timeago.vue b/src/components/timeago/timeago.vue
index 6df0524d..55a2dd94 100644
--- a/src/components/timeago/timeago.vue
+++ b/src/components/timeago/timeago.vue
@@ -9,6 +9,7 @@
 
 <script>
 import * as DateUtils from 'src/services/date_utils/date_utils.js'
+import localeService from 'src/services/locale/locale.service.js'
 
 export default {
   name: 'Timeago',
@@ -21,9 +22,10 @@ export default {
   },
   computed: {
     localeDateString () {
+      const browserLocale = localeService.internalToBrowserLocale(this.$i18n.locale)
       return typeof this.time === 'string'
-        ? new Date(Date.parse(this.time)).toLocaleString()
-        : this.time.toLocaleString()
+        ? new Date(Date.parse(this.time)).toLocaleString(browserLocale)
+        : this.time.toLocaleString(browserLocale)
     }
   },
   created () {
-- 
cgit v1.2.3-70-g09d2


From 27a537d307964101a574a2616d4c90d3cd26431f Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Fri, 22 Jan 2021 12:06:39 +0200
Subject: give delete field its own class

---
 src/components/settings_modal/tabs/profile_tab.scss | 2 +-
 src/components/settings_modal/tabs/profile_tab.vue  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index 1a19b50d..111eaed3 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -117,7 +117,7 @@
       min-width: 0;
     }
 
-    & > .button-unstyled {
+    .delete-field {
       width: 20px;
       align-self: center;
       margin: 0 0.2em 0.5em;
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index cfbd94fc..175a0219 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -125,7 +125,7 @@
             >
           </EmojiInput>
           <button
-            class="button-unstyled -hover-highlight"
+            class="delete-field button-unstyled -hover-highlight"
             @click="deleteField(i)"
           >
             <FAIcon
-- 
cgit v1.2.3-70-g09d2


From 66f3e72b545a7f92d2569baa0fd52275a29d629a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 1 Feb 2021 20:08:36 +0200
Subject: update branch with recent develop changes (FA, added settings)

---
 .../settings_modal/helpers/boolean_setting.vue     |  6 +--
 .../settings_modal/helpers/modified_icon.vue       | 46 -------------------
 .../settings_modal/helpers/modified_indicator.vue  | 51 ++++++++++++++++++++++
 .../helpers/shared_computed_object.js              |  1 -
 src/components/settings_modal/tabs/general_tab.vue |  8 ++--
 src/modules/config.js                              |  2 -
 6 files changed, 58 insertions(+), 56 deletions(-)
 delete mode 100644 src/components/settings_modal/helpers/modified_icon.vue
 create mode 100644 src/components/settings_modal/helpers/modified_indicator.vue

(limited to 'src/components/settings_modal')

diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index f7c392cd..b600b63b 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -13,7 +13,7 @@
         >
         <slot />
       </span>
-      <ModifiedIcon :changed="isChanged" />
+      <ModifiedIndicator :changed="isChanged" />
     </Checkbox>
   </label>
 </template>
@@ -21,7 +21,7 @@
 <script>
 import { get, set } from 'lodash'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
-import ModifiedIcon from './modified_icon.vue'
+import ModifiedIndicator from './modified_indicator.vue'
 export default {
   props: [
     'path',
@@ -29,7 +29,7 @@ export default {
   ],
   components: {
     Checkbox,
-    ModifiedIcon
+    ModifiedIndicator
   },
   computed: {
     pathDefault () {
diff --git a/src/components/settings_modal/helpers/modified_icon.vue b/src/components/settings_modal/helpers/modified_icon.vue
deleted file mode 100644
index 27e0a9c5..00000000
--- a/src/components/settings_modal/helpers/modified_icon.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <span
-    v-if="changed"
-    class="ModifiedIcon"
-    >
-    <Popover
-      trigger="hover"
-      >
-      <i
-        slot="trigger"
-        class="icon icon-wrench"
-        />
-      <div
-        class="modified-tooltip"
-        slot="content"
-        >
-      {{ $t('settings.setting_changed') }}
-      </div>
-    </Popover>
-  </span>
-</template>
-
-<script>
-import Popover from 'src/components/popover/popover.vue'
-export default {
-  props: ['changed'],
-  components: { Popover }
-}
-</script>
-
-<style lang="scss">
-.ModifiedIcon {
-  display: inline-block;
-  position: relative;
-
-  .icon {
-    display: inline-block;
-  }
-
-  .modified-tooltip {
-    margin: 0.5em 1em;
-    min-width: 10em;
-    text-align: center;
-  }
-}
-</style>
diff --git a/src/components/settings_modal/helpers/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue
new file mode 100644
index 00000000..b75a2811
--- /dev/null
+++ b/src/components/settings_modal/helpers/modified_indicator.vue
@@ -0,0 +1,51 @@
+<template>
+  <span
+    v-if="changed"
+    class="ModifiedIndicator"
+    >
+    <Popover
+      trigger="hover"
+      >
+      <span slot="trigger">
+        &nbsp;
+          <FAIcon
+            icon="wrench"
+          />
+      </span>
+      <div
+        class="modified-tooltip"
+        slot="content"
+        >
+      {{ $t('settings.setting_changed') }}
+      </div>
+    </Popover>
+  </span>
+</template>
+
+<script>
+import Popover from 'src/components/popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faWrench } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faWrench
+)
+
+export default {
+  props: ['changed'],
+  components: { Popover }
+}
+</script>
+
+<style lang="scss">
+.ModifiedIndicator {
+  display: inline-block;
+  position: relative;
+
+  .modified-tooltip {
+    margin: 0.5em 1em;
+    min-width: 10em;
+    text-align: center;
+  }
+}
+</style>
diff --git a/src/components/settings_modal/helpers/shared_computed_object.js b/src/components/settings_modal/helpers/shared_computed_object.js
index 3cbcd288..2c833c0c 100644
--- a/src/components/settings_modal/helpers/shared_computed_object.js
+++ b/src/components/settings_modal/helpers/shared_computed_object.js
@@ -9,7 +9,6 @@ const SharedComputedObject = () => ({
     .map(key => [
       key + 'DefaultValue',
       function () {
-        console.log(this.$store.getters.defaultConfig)
         return this.$store.getters.defaultConfig[key]
       }
     ])
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 92cd2069..f93f4ea0 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -12,9 +12,9 @@
           </BooleanSetting>
         </li>
         <li v-if="instanceWallpaperUsed">
-          <Checkbox v-model="hideInstanceWallpaper">
+          <BooleanSetting path="hideInstanceWallpaper">
             {{ $t('settings.hide_wallpaper') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
       </ul>
     </div>
@@ -64,9 +64,9 @@
           </BooleanSetting>
         </li>
         <li>
-          <Checkbox v-model="virtualScrolling">
+          <BooleanSetting path="virtualScrolling">
             {{ $t('settings.virtual_scrolling') }}
-          </Checkbox>
+          </BooleanSetting>
         </li>
       </ul>
     </div>
diff --git a/src/modules/config.js b/src/modules/config.js
index 444808cf..f992519e 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -80,7 +80,6 @@ const config = {
   getters: {
     defaultConfig (state, getters, rootState, rootGetters) {
       const { instance } = rootState
-      console.log('DC', instance.minimalScopesMode)
       return {
         ...defaultState,
         ...Object.fromEntries(
@@ -90,7 +89,6 @@ const config = {
     },
     mergedConfig (state, getters, rootState, rootGetters) {
       const { defaultConfig } = rootGetters
-      console.log('DC2', defaultConfig.hideISP)
       return {
         ...defaultConfig,
         ...state
-- 
cgit v1.2.3-70-g09d2


From 3f23aecd10e570f78b4142687a9a3fa349c13018 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 23 Feb 2021 10:00:23 +0200
Subject: add sensitive by default option

---
 src/components/post_status_form/post_status_form.js | 4 ++--
 src/components/settings_modal/tabs/general_tab.vue  | 7 ++++++-
 src/i18n/en.json                                    | 1 +
 src/modules/config.js                               | 3 ++-
 src/modules/instance.js                             | 1 +
 5 files changed, 12 insertions(+), 4 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 4148381c..e540654b 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -115,7 +115,7 @@ const PostStatusForm = {
       ? this.copyMessageScope
       : this.$store.state.users.currentUser.default_scope
 
-    const { postContentType: contentType } = this.$store.getters.mergedConfig
+    const { postContentType: contentType, sensitiveByDefault } = this.$store.getters.mergedConfig
 
     return {
       dropFiles: [],
@@ -126,7 +126,7 @@ const PostStatusForm = {
       newStatus: {
         spoilerText: this.subject || '',
         status: statusText,
-        nsfw: false,
+        nsfw: !!sensitiveByDefault,
         files: [],
         poll: {},
         mediaDescriptions: {},
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index f93f4ea0..9228c78e 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -144,7 +144,12 @@
         </li>
         <li>
           <BooleanSetting path="minimalScopesMode">
-            {{ $t('settings.minimal_scopes_mode') }} {{ minimalScopesModeDefaultValue }}
+            {{ $t('settings.minimal_scopes_mode') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="sensitiveByDefault">
+            {{ $t('settings.sensitive_by_default') }}
           </BooleanSetting>
         </li>
         <li>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 0e069785..e6acda9c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -429,6 +429,7 @@
     "subject_line_mastodon": "Like mastodon: copy as is",
     "subject_line_noop": "Do not copy",
     "post_status_content_type": "Post status content type",
+    "sensitive_by_default": "Mark posts as sensitive by default",
     "stop_gifs": "Play-on-hover GIFs",
     "streaming": "Enable automatic streaming of new posts when scrolled to the top",
     "user_mutes": "Users",
diff --git a/src/modules/config.js b/src/modules/config.js
index f992519e..b08903d1 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -67,7 +67,8 @@ export const defaultState = {
   greentext: undefined, // instance default
   hidePostStats: undefined, // instance default
   hideUserStats: undefined, // instance default
-  virtualScrolling: undefined // instance default
+  virtualScrolling: undefined, // instance default
+  sensitiveByDefault: undefined
 }
 
 // caching the instance default properties
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 411b1caa..96de73ca 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -43,6 +43,7 @@ const defaultState = {
   subjectLineBehavior: 'email',
   theme: 'pleroma-dark',
   virtualScrolling: true,
+  sensitiveByDefault: false,
 
   // Nasty stuff
   customEmoji: [],
-- 
cgit v1.2.3-70-g09d2


From 59aaade7fc796ce43f5fd035fa5f1375d5e3dc75 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Thu, 25 Feb 2021 14:32:21 +0200
Subject: fix vue warnings

---
 src/components/emoji_input/emoji_input.vue           |  2 +-
 src/components/mfa_form/recovery_form.vue            |  4 ++--
 src/components/mfa_form/totp_form.vue                |  4 ++--
 src/components/popover/popover.vue                   |  2 +-
 src/components/scope_selector/scope_selector.vue     |  8 ++++----
 src/components/search/search.vue                     |  2 +-
 src/components/search_bar/search_bar.vue             |  6 +++---
 .../settings_modal/helpers/boolean_setting.vue       | 12 ++++++------
 .../settings_modal/helpers/modified_indicator.vue    | 20 ++++++++++----------
 src/components/settings_modal/tabs/filtering_tab.vue |  2 +-
 10 files changed, 31 insertions(+), 31 deletions(-)

(limited to 'src/components/settings_modal')

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 1d6c760e..ad62484d 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -9,8 +9,8 @@
       <button
         v-if="!hideEmojiButton"
         class="button-unstyled emoji-picker-icon"
-        @click.prevent="togglePicker"
         type="button"
+        @click.prevent="togglePicker"
       >
         <FAIcon :icon="['far', 'smile-beam']" />
       </button>
diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue
index 8457ec5d..7c594228 100644
--- a/src/components/mfa_form/recovery_form.vue
+++ b/src/components/mfa_form/recovery_form.vue
@@ -25,16 +25,16 @@
             <div>
               <button
                 class="button-unstyled -link"
-                @click.prevent="requireTOTP"
                 type="button"
+                @click.prevent="requireTOTP"
               >
                 {{ $t('login.enter_two_factor_code') }}
               </button>
               <br>
               <button
                 class="button-unstyled -link"
-                @click.prevent="abortMFA"
                 type="button"
+                @click.prevent="abortMFA"
               >
                 {{ $t('general.cancel') }}
               </button>
diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue
index 5d80e185..4ee13992 100644
--- a/src/components/mfa_form/totp_form.vue
+++ b/src/components/mfa_form/totp_form.vue
@@ -27,16 +27,16 @@
             <div>
               <button
                 class="button-unstyled -link"
-                @click.prevent="requireRecovery"
                 type="button"
+                @click.prevent="requireRecovery"
               >
                 {{ $t('login.enter_recovery_code') }}
               </button>
               <br>
               <button
                 class="button-unstyled -link"
-                @click.prevent="abortMFA"
                 type="button"
+                @click.prevent="abortMFA"
               >
                 {{ $t('general.cancel') }}
               </button>
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 876dd61d..bacbc590 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -6,8 +6,8 @@
     <button
       ref="trigger"
       class="button-unstyled -fullwidth popover-trigger-button"
-      @click="onClick"
       type="button"
+      @click="onClick"
     >
       <slot name="trigger" />
     </button>
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index 60e8c3ba..a01242fc 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -8,8 +8,8 @@
       class="button-unstyled scope"
       :class="css.direct"
       :title="$t('post_status.scope.direct')"
-      @click="changeVis('direct')"
       type="button"
+      @click="changeVis('direct')"
     >
       <FAIcon
         icon="envelope"
@@ -21,8 +21,8 @@
       class="button-unstyled scope"
       :class="css.private"
       :title="$t('post_status.scope.private')"
-      @click="changeVis('private')"
       type="button"
+      @click="changeVis('private')"
     >
       <FAIcon
         icon="lock"
@@ -34,8 +34,8 @@
       class="button-unstyled scope"
       :class="css.unlisted"
       :title="$t('post_status.scope.unlisted')"
-      @click="changeVis('unlisted')"
       type="button"
+      @click="changeVis('unlisted')"
     >
       <FAIcon
         icon="lock-open"
@@ -47,8 +47,8 @@
       class="button-unstyled scope"
       :class="css.public"
       :title="$t('post_status.scope.public')"
-      @click="changeVis('public')"
       type="button"
+      @click="changeVis('public')"
     >
       <FAIcon
         icon="globe"
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index fa648365..b7bfc1f3 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -15,8 +15,8 @@
       >
       <button
         class="btn button-default search-button"
-        @click="newQuery(searchTerm)"
         type="submit"
+        @click="newQuery(searchTerm)"
       >
         <FAIcon icon="search" />
       </button>
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index a7432dcb..222f57ba 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -7,8 +7,8 @@
       v-if="hidden"
       class="button-unstyled nav-icon"
       :title="$t('nav.search')"
-      @click.prevent.stop="toggleHidden"
       type="button"
+      @click.prevent.stop="toggleHidden"
     >
       <FAIcon
         fixed-width
@@ -28,8 +28,8 @@
       >
       <button
         class="button-default search-button"
-        @click="find(searchTerm)"
         type="submit"
+        @click="find(searchTerm)"
       >
         <FAIcon
           fixed-width
@@ -38,8 +38,8 @@
       </button>
       <button
         class="button-unstyled cancel-search"
-        @click.prevent.stop="toggleHidden"
         type="button"
+        @click.prevent.stop="toggleHidden"
       >
         <FAIcon
           fixed-width
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index b600b63b..146ad6c1 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -4,13 +4,13 @@
   >
     <Checkbox
       :checked="state"
-      @change="update"
       :disabled="disabled"
+      @change="update"
     >
       <span
         v-if="!!$slots.default"
         class="label"
-        >
+      >
         <slot />
       </span>
       <ModifiedIndicator :changed="isChanged" />
@@ -23,14 +23,14 @@ import { get, set } from 'lodash'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import ModifiedIndicator from './modified_indicator.vue'
 export default {
-  props: [
-    'path',
-    'disabled'
-  ],
   components: {
     Checkbox,
     ModifiedIndicator
   },
+  props: [
+    'path',
+    'disabled'
+  ],
   computed: {
     pathDefault () {
       const [firstSegment, ...rest] = this.path.split('.')
diff --git a/src/components/settings_modal/helpers/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue
index b75a2811..9f4e81fe 100644
--- a/src/components/settings_modal/helpers/modified_indicator.vue
+++ b/src/components/settings_modal/helpers/modified_indicator.vue
@@ -2,21 +2,21 @@
   <span
     v-if="changed"
     class="ModifiedIndicator"
-    >
+  >
     <Popover
       trigger="hover"
-      >
+    >
       <span slot="trigger">
         &nbsp;
-          <FAIcon
-            icon="wrench"
-          />
+        <FAIcon
+          icon="wrench"
+        />
       </span>
       <div
-        class="modified-tooltip"
         slot="content"
-        >
-      {{ $t('settings.setting_changed') }}
+        class="modified-tooltip"
+      >
+        {{ $t('settings.setting_changed') }}
       </div>
     </Popover>
   </span>
@@ -32,8 +32,8 @@ library.add(
 )
 
 export default {
-  props: ['changed'],
-  components: { Popover }
+  components: { Popover },
+  props: ['changed']
 }
 </script>
 
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 18dd4be9..402c2a4a 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -75,8 +75,8 @@
         <p>{{ $t('settings.filtering_explanation') }}</p>
         <textarea
           id="muteWords"
-          class="resize-height"
           v-model="muteWordsString"
+          class="resize-height"
         />
       </div>
       <div>
-- 
cgit v1.2.3-70-g09d2