Add DM settings

Ref #288

index.html

@@ -4,8 +4,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
     <title>Akkoma</title>
-    <link rel="stylesheet" href="/static/font/css/fontello.css">
-    <link rel="stylesheet" href="/static/font/css/animation.css">
     <link rel="stylesheet" href="/static/font/tiresias.css">
     <link rel="stylesheet" href="/static/font/css/lato.css">
     <link rel="stylesheet" href="/static/mfm.css">

src/App.scss

@@ -469,7 +469,7 @@ textarea,
   color: $fallback--lightText;
   color: var(--inputText, $fallback--lightText);
   font-family: sans-serif;
-  font-family: var(--inputFont, sans-serif);
+  font-family: var(--interfaceFont, sans-serif);
   font-size: 1em;
   margin: 0;
   box-sizing: border-box;

src/boot/after_store.js

@@ -396,9 +396,6 @@ const afterStoreSetup = async ({ store, i18n }) => {
   ])
 
   // Start fetching things that don't need to block the UI
-  store.dispatch('fetchMutes')
-  store.dispatch('startFetchingAnnouncements')
-  store.dispatch('startFetchingReports')
   getTOS({ store })
   getStickers({ store })
 

src/components/popover/popover.vue

@@ -114,7 +114,7 @@
       svg {
         width: 22px;
         margin-right: 0.75rem;
-        color: var(--menuPopoverIcon, $fallback--icon)
+        color: var(--popoverIcon, $fallback--icon)
       }
     }
 

src/components/post_status_form/post_status_form.vue

@@ -274,12 +274,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/select/select.vue

@@ -38,7 +38,7 @@ label.Select {
     margin: 0;
     padding: 0 2em 0 .2em;
     font-family: sans-serif;
-    font-family: var(--inputFont, sans-serif);
+    font-family: var(--interfaceFont, sans-serif);
     font-size: 1em;
     width: 100%;
     z-index: 1;

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/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/modules/users.js

@@ -637,13 +637,16 @@ const users = {
 
               // Get user mutes
               store.dispatch('fetchMutes')
-
               store.dispatch('setLayoutWidth', windowWidth())
               store.dispatch('setLayoutHeight', windowHeight())
               store.dispatch('getSupportedTranslationlanguages')
               store.dispatch('getSettingsProfile')
               store.dispatch('listSettingsProfiles')
               store.dispatch('startFetchingConfig')
+              store.dispatch('startFetchingAnnouncements')
+              if (user.role === 'admin' || user.role === 'moderator') {
+                store.dispatch('startFetchingReports')
+              }
 
               // Fetch our friends
               store.rootState.api.backendInteractor.fetchFriends({ id: user.id })

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')
+  /** @type {CSSStyleSheet} */
-  const styleSheet = styleEl.sheet
+  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')
 }