Add prefers-reduced-motion support

Reviewed-on: AkkomaGang/akkoma-fe#314

src/components/post_status_form/post_status_form.vue

@@ -291,12 +291,14 @@
         >
           {{ $t('post_status.post') }}
         </button>
-        <!-- touchstart is used to keep the OSK at the same position after a message send -->
+        <!-- To keep the OSK at the same position after a message send, -->
+        <!-- @touchstart.stop.prevent was used. But while OSK position is -->
+        <!-- quirky, accidental mobile posts caused by the workaround -->
+        <!-- when people tried to scroll were a more serious bug. -->
         <button
           v-else
           :disabled="uploadingFiles || disableSubmit"
           class="btn button-default"
-          @touchstart.stop.prevent="postStatus($event, newStatus)"
           @click.stop.prevent="postStatus($event, newStatus)"
         >
           {{ $t('post_status.post') }}

src/components/settings_modal/tabs/general_tab.vue

@@ -21,7 +21,6 @@
             >
               {{ $t('settings.settings_profile_force_sync') }}
             </button>
-
           </p>
           <div
             @click="toggleExpandedSettings"

src/components/settings_modal/tabs/profile_tab.js

@@ -12,6 +12,7 @@ import InterfaceLanguageSwitcher from 'src/components/interface_language_switche
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import localeService from 'src/services/locale/locale.service.js'
+import ChoiceSetting from '../helpers/choice_setting.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -46,9 +47,16 @@ const ProfileTab = {
       emailLanguage: this.$store.state.users.currentUser.language || '',
       newPostTTLDays: this.$store.state.users.currentUser.status_ttl_days,
       expirePosts: this.$store.state.users.currentUser.status_ttl_days !== null,
+      userAcceptsDirectMessagesFrom: this.$store.state.users.currentUser.accepts_direct_messages_from,
+      userAcceptsDirectMessagesFromOptions: ["everybody", "nobody", "people_i_follow"].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.user_accepts_direct_messages_from_${mode}`)
+      }))
     }
   },
   components: {
+    ChoiceSetting,
     ScopeSelector,
     ImageCropper,
     EmojiInput,
@@ -126,7 +134,8 @@ const ProfileTab = {
         fields_attributes: this.newFields.filter(el => el != null),
         bot: this.bot,
         show_role: this.showRole,
-        status_ttl_days: this.expirePosts ? this.newPostTTLDays : -1
+        status_ttl_days: this.expirePosts ? this.newPostTTLDays : -1,
+        accepts_direct_messages_from: this.userAcceptsDirectMessagesFrom
         /* eslint-enable camelcase */
       }
 

src/components/settings_modal/tabs/profile_tab.vue

@@ -89,6 +89,15 @@
           {{ $t('settings.bot') }}
         </Checkbox>
       </p>
+      <p>
+        <ChoiceSetting
+          id="userAcceptsDirectMessagesFrom"
+          path="userAcceptsDirectMessagesFrom"
+          :options="userAcceptsDirectMessagesFromOptions"
+        >
+          {{ $t('settings.user_accepts_direct_messages_from') }}
+        </ChoiceSetting>
+      </p>
       <p>
         <Checkbox v-model="expirePosts">
           {{ $t('settings.expire_posts_enabled') }}
@@ -102,6 +111,9 @@
           class="expire-posts-days"
           :placeholder="$t('settings.expire_posts_input_placeholder')"
         />
+      </p>
+      <p>
+
       </p>
       <p>
         <interface-language-switcher

src/components/settings_modal/tabs/theme_tab/theme_tab.scss

@@ -89,6 +89,10 @@
     margin: 1em 1em 0;
   }
 
+  .presets {
+    text-align: center;
+  }
+
   .tab-header {
     display: flex;
     justify-content: space-between;

src/components/still-image/still-image.js

@@ -12,12 +12,16 @@ const StillImage = {
   data () {
     return {
       stopGifs: this.$store.getters.mergedConfig.stopGifs,
-      isAnimated: false
+      isAnimated: false,
+      prefersReducedMotion: false
     }
   },
+  created () {
+    this.prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  },
   computed: {
     animated () {
-      return this.stopGifs && this.isAnimated
+      return this.stopGifs && this.isAnimated && this.prefersReducedMotion
     },
     style () {
       const appendPx = (str) => /\d$/.test(str) ? str + 'px' : str

src/i18n/en.json

@@ -929,6 +929,10 @@
         "user_profile_default_tab": "Default Tab on User Profile",
         "user_profiles": "User Profiles",
         "user_settings": "User Settings",
+        "user_accepts_direct_messages_from": "Accept DMs From",
+        "user_accepts_direct_messages_from_everybody": "Everybody",
+        "user_accepts_direct_messages_from_nobody": "Nobody",
+        "user_accepts_direct_messages_from_people_i_follow": "People I follow",
         "valid_until": "Valid until",
         "values": {
             "false": "no",

src/i18n/zh.json

@@ -84,6 +84,7 @@
         "keep_open": "选择器保持打开",
         "load_all": "加载全部 {emojiAmount} 个表情符号中",
         "load_all_hint": "已加载前 {saneAmount} 个表情符号，加载全部表情符号可能会带来性能问题。",
+        "recent": "最近使用",
         "search_emoji": "搜索表情符号",
         "stickers": "贴纸",
         "unicode": "Unicode 表情符号"
@@ -732,7 +733,7 @@
         "settings": "设置",
         "settings_profile": "设置配置文件",
         "settings_profile_creation": "创建新的配置文件",
-        "settings_profile_creation_new_name_label": "名字",
+        "settings_profile_creation_new_name_label": "名称",
         "settings_profile_creation_submit": "创建",
         "settings_profile_currently": "目前使用 {name}（版本：{version}）",
         "settings_profile_delete": "删除",
@@ -920,7 +921,7 @@
         "type_domains_to_mute": "搜索需要静音的域名",
         "upload_a_photo": "上传照片",
         "useStreamingApi": "实时接收帖文和通知",
-        "useStreamingApiWarning": "（不推荐使用，试验性，已知会跳过一些帖文）",
+        "useStreamingApiWarning": "十分炫酷推荐使用。要是崩了试试刷新？",
         "use_at_icon": "将 {'@'} 符号显示为图标而不是文本",
         "use_blurhash": "对NSFW的缩略图使用模糊处理",
         "use_contain_fit": "生成缩略图时不要裁剪附件",

src/services/entity_normalizer/entity_normalizer.service.js

@@ -90,6 +90,7 @@ export const parseUser = (data) => {
     output.friends_count = data.following_count
 
     output.bot = data.bot
+    output.accepts_direct_messages_from = data.accepts_direct_messages_from
     output.follow_requests_count = data.follow_requests_count
     if (data.akkoma) {
       output.instance = data.akkoma.instance

src/services/style_setter/style_setter.js

@@ -7,14 +7,18 @@ export const applyTheme = (input) => {
   const body = document.body
   body.classList.add('hidden')
 
-  const styleEl = document.getElementById('theme-holder')
-  const styleSheet = styleEl.sheet
+  /** @type {CSSStyleSheet} */
+  const styleSheet = document.getElementById('theme-holder').sheet
+
+  for (let i = styleSheet.cssRules.length; i--; ) {
+    styleSheet.deleteRule(0)
+  }
+
+  styleSheet.insertRule(
+    `:root { ${rules.radii}; ${rules.colors}; ${rules.shadows}; ${rules.fonts}; }`,
+    0
+  )
 
-  styleSheet.toString()
-  styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
-  styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
-  styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
-  styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
   body.classList.remove('hidden')
 }
 

static/themes/paper.json

@@ -70,31 +70,21 @@
       "buttonHover": [
         {
           "x": 0,
-          "y": "2",
-          "blur": "5",
-          "spread": 0,
+          "y": 2,
+          "blur": 3,
+          "spread": -2,
           "color": "#494949",
-          "alpha": "0.1"
-        },
-        {
-          "x": 0,
-          "y": "2",
-          "blur": "0",
-          "spread": "20",
-          "color": "#ffffff",
-          "alpha": "1",
-          "inset": true
+          "alpha": "0.5"
         }
       ],
       "buttonPressed": [
         {
           "x": 0,
-          "y": 0,
-          "blur": "4",
-          "spread": "0",
+          "y": 2,
+          "blur": 3,
+          "spread": -3,
           "color": "#494949",
-          "alpha": "0.8",
-          "inset": false
+          "alpha": "0.5"
         }
       ],
       "avatarStatus": [
@@ -138,14 +128,18 @@
       ]
     },
     "opacity": {
-      "underlay": "1",
+      "underlay": 0,
       "border": "0"
     },
     "colors": {
       "bg": "#ffffff",
       "fg": "#f6f6f6",
-      "text": "#494949",
-      "underlay": "#ffffff",
+      "text": "#222222",
+      "underlay": "#f1f2f3",
+      "wallpaper": "#f1f2f3",
+      "selectedMenu": "#f1f2f3",
+      "selectedMenuPopover": "#f1f2f3",
+      "selectedPost": "#f1f2f3",
       "link": "#788ca1",
       "accent": "#97a0aa",
       "cBlue": "#788ca1",
@@ -156,6 +150,7 @@
       "border": "#ffffff",
       "icon": "#b6c9c4",
       "panel": "#ffffff",
+      "topBar": "#ffffff",
       "topBarText": "#4b4b4b"
     },
     "radii": {