changelog.d/mutes.change

@@ -1 +1 @@
-better display of mute reason on posts
+better display of mutes

src/components/button.style.js

@@ -35,11 +35,11 @@ export default {
     {
       component: 'Root',
       directives: {
-        '--buttonDefaultHoverGlow': 'shadow | 0 0 1 2 --text / 0.4',
+        '--buttonDefaultHoverGlow': 'shadow | 0 0 4 --text / 0.5',
-        '--buttonDefaultFocusGlow': 'shadow | 0 0 1 2 --link / 0.5',
+        '--buttonDefaultFocusGlow': 'shadow | 0 0 4 4 --link / 0.5',
         '--buttonDefaultShadow': 'shadow | 0 0 2 #000000',
-        '--buttonDefaultBevel': 'shadow | $borderSide(#FFFFFF top 0.2 1), $borderSide(#000000 bottom 0.2 1)',
+        '--buttonDefaultBevel': 'shadow | $borderSide(#FFFFFF top 0.2 2), $borderSide(#000000 bottom 0.2 2)',
-        '--buttonPressedBevel': 'shadow | inset 0 0 4 #000000, $borderSide(#FFFFFF bottom 0.2 1), $borderSide(#000000 top 0.2 1)'
+        '--buttonPressedBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2 2), $borderSide(#000000 top 0.2 2)'
       }
     },
     {
@@ -78,28 +78,28 @@ export default {
     {
       state: ['toggled'],
       directives: {
-        background: '--accent,-24.2',
+        background: '--inheritedBackground,-14.2',
         shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
       }
     },
     {
       state: ['toggled', 'hover'],
       directives: {
-        background: '--accent,-24.2',
+        background: '--inheritedBackground,-14.2',
         shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
       }
     },
     {
       state: ['toggled', 'disabled'],
       directives: {
-        background: '$blend(--accent 0.25 --parent)',
+        background: '$blend(--inheritedBackground 0.25 --parent)',
         shadow: ['--buttonPressedBevel']
       }
     },
     {
       state: ['disabled'],
       directives: {
-        background: '$blend(--accent 0.25 --parent)',
+        background: '$blend(--inheritedBackground 0.25 --parent)',
         shadow: ['--buttonDefaultBevel']
       }
     },

src/components/chat_message/chat_message.js

@@ -66,6 +66,7 @@ const ChatMessage = {
       return this.message.attachments.length > 0
     },
     ...mapState({
+      betterShadow: state => state.interface.browserSupport.cssFilter,
       currentUser: state => state.users.currentUser,
       restrictedNicknames: state => state.instance.restrictedNicknames
     }),

src/components/chat_message/chat_message.vue

@@ -20,6 +20,7 @@
         >
           <UserAvatar
             :compact="true"
+            :better-shadow="betterShadow"
             :user="author"
           />
         </UserPopover>

src/components/dialog_modal/dialog_modal.js

@@ -8,11 +8,6 @@ const DialogModal = {
       default: () => {},
       type: Function
     }
-  },
-  computed: {
-    mobileCenter () {
-      return this.$store.getters.mergedConfig.modalMobileCenter
-    }
   }
 }
 

src/components/dialog_modal/dialog_modal.vue

@@ -1,7 +1,7 @@
 <template>
   <span
     class="dialog-container"
-    :class="{ 'dark-overlay': darkOverlay, '-center-mobile': mobileCenter }"
+    :class="{ 'dark-overlay': darkOverlay }"
     @click.self.stop="onCancel()"
   >
     <div
@@ -79,7 +79,6 @@
     padding: 0.5em;
     border-top: 1px solid var(--border);
     display: grid;
-    justify-content: end;
     grid-gap: 0.5em;
     grid-template-columns: min-content;
     grid-auto-columns: min-content;
@@ -100,10 +99,6 @@
     justify-content: stretch;
     align-items: end;
     justify-items: stretch;
-
-    &.-center-mobile {
-      align-items: center;
-    }
   }
 
   .dialog-modal.panel {

src/components/draft/draft.vue

@@ -64,12 +64,12 @@
     <div v-if="editing">
       <PostStatusForm
         v-if="draft.type !== 'edit'"
-        :hide-draft="true"
+        :disable-draft="true"
         v-bind="postStatusFormProps"
       />
       <EditStatusForm
         v-else
-        :hide-draft="true"
+        :disable-draft="true"
         :params="postStatusFormProps"
       />
     </div>

src/components/edit_status_modal/edit_status_modal.vue

@@ -15,7 +15,6 @@
         class="panel-body"
         :params="params"
         @posted="doCloseModal"
-        @draft-done="doCloseModal"
         @can-close="doCloseModal"
       />
     </div>

src/components/emoji_reactions/emoji_reactions.vue

@@ -99,6 +99,11 @@
         display: inline-flex;
         justify-content: center;
         align-items: center;
+
+        &.-picked-reaction {
+          border: 1px solid var(--accent);
+          margin-right: -1px;
+        }
       }
     }
   }
@@ -149,6 +154,10 @@
     }
 
     &.-picked-reaction {
+      border: 1px solid var(--accent);
+      margin-left: -1px; // offset the border, can't use inset shadows either
+      margin-right: -1px;
+
       .svg-inline--fa {
         color: var(--accent);
       }

src/components/font_control/font_control.vue

@@ -5,22 +5,18 @@
       :for="manualEntry ? name : name + '-font-switcher'"
       class="label"
     >
-      {{ $t('settings.style.themes3.font.label', { label }) }}
+      {{ label }}
     </label>
     {{ ' ' }}
     <Checkbox
       v-if="typeof fallback !== 'undefined'"
-      class="font-checkbox"
       :id="name + '-o'"
       :model-value="present"
       @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
     >
       {{ $t('settings.style.themes3.define') }}
     </Checkbox>
-    <div
+    <p v-if="modelValue?.family">
-      v-if="modelValue?.family"
-      class="font-input"
-    >
       <label
         v-if="manualEntry"
         :id="name + '-label'"
@@ -126,7 +122,7 @@
           </optgroup>
         </Select>
       </span>
-    </div>
+    </p>
   </div>
 </template>
 
@@ -138,15 +134,6 @@
     min-width: 20em;
     max-width: 20em;
   }
-
-  .font-input {
-    margin-left: 2em;
-    margin-top: 0.5em;
-  }
-
-  .font-checkbox {
-    margin-left: 1em;
-  }
 }
 
 .invalid-tooltip {

src/components/input.style.js

@@ -18,7 +18,7 @@ export default {
     {
       component: 'Root',
       directives: {
-        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2), inset 0 0 2 #000000 / 0.15',
+        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2)',
         '--defaultInputHoverGlow': 'shadow | 0 0 4 --text / 0.5',
         '--defaultInputFocusGlow': 'shadow | 0 0 4 4 --link / 0.5'
       }

src/components/notification/notification.js

@@ -43,6 +43,7 @@ const Notification = {
   data () {
     return {
       statusExpanded: false,
+      betterShadow: this.$store.state.interface.browserSupport.cssFilter,
       unmuted: false,
       showingApproveConfirmDialog: false,
       showingDenyConfirmDialog: false

src/components/notification/notification.vue

@@ -48,6 +48,7 @@
           <UserAvatar
             class="post-avatar"
             :compact="true"
+            :better-shadow="betterShadow"
             :user="notification.from_profile"
           />
         </UserPopover>

src/components/panel.style.js

@@ -38,20 +38,12 @@ export default {
         roundness: 3,
         blur: '5px',
         shadow: [{
-          x: 0,
+          x: 1,
-          y: 0,
+          y: 1,
-          blur: 3,
+          blur: 4,
           spread: 0,
           color: '#000000',
-          alpha: 0.5
+          alpha: 0.6
-        },
-        {
-          x: 0,
-          y: 4,
-          blur: 6,
-          spread: 3,
-          color: '#000000',
-          alpha: 0.3
         }]
       }
     }

src/components/panel_header.style.js

@@ -17,23 +17,7 @@ export default {
       directives: {
         backgroundNoCssColor: 'yes',
         background: '--fg',
-        shadow: [{
+        shadow: []
-          x: 0,
-          y: 1,
-          blur: 3,
-          spread: 0,
-          color: '#000000',
-          alpha: 0.4
-        },
-        {
-          x: 0,
-          y: 1,
-          blur: 0,
-          spread: 0,
-          color: '#ffffff',
-          alpha: 0.2,
-          inset: true
-        }]
       }
     }
   ]

src/components/post_status_form/post_status_form.js

@@ -101,8 +101,6 @@ const PostStatusForm = {
     'disableSubmit',
     'disablePreview',
     'disableDraft',
-    'hideDraft',
-    'closeable',
     'placeholder',
     'maxHeight',
     'postHandler',
@@ -117,7 +115,6 @@ const PostStatusForm = {
   ],
   emits: [
     'posted',
-    'draft-done',
     'resize',
     'mediaplay',
     'mediapause',
@@ -235,9 +232,6 @@ const PostStatusForm = {
     showAllScopes () {
       return !this.mergedConfig.minimalScopesMode
     },
-    hideExtraActions () {
-      return this.disableDraft || this.hideDraft
-    },
     emojiUserSuggestor () {
       return suggestor({
         emoji: [
@@ -359,12 +353,10 @@ const PostStatusForm = {
       }
     },
     safeToSaveDraft () {
-      return (
+      return this.newStatus.status ||
-        this.newStatus.status ||
         this.newStatus.spoilerText ||
         this.newStatus.files?.length ||
         this.newStatus.hasPoll
-      ) && this.saveable
     },
     ...mapGetters(['mergedConfig']),
     ...mapState({
@@ -768,20 +760,12 @@ const PostStatusForm = {
                 this.newStatus.id = id
               }
               this.saveable = false
-              this.clearStatus()
-              if (!this.shouldAutoSaveDraft) {
-                this.$emit('draft-done')
-              }
             })
         } else if (this.newStatus.id) {
           // There is a draft, but there is nothing in it, clear it
           return this.abandonDraft()
             .then(() => {
               this.saveable = false
-              this.clearStatus()
-              if (!this.shouldAutoSaveDraft) {
-                this.$emit('draft-done')
-              }
             })
         }
       }

src/components/post_status_form/post_status_form.vue

@@ -316,12 +316,13 @@
             </template>
           </button>
           <Popover
-            v-if="!hideExtraActions"
+            v-if="!disableDraft"
             class="more-post-actions"
             :normal-button="true"
             trigger="click"
             placement="bottom"
             :offset="{ y: 5 }"
+            :bound-to="{ x: 'container' }"
           >
             <template #trigger>
               <FAIcon
@@ -335,20 +336,15 @@
                 role="menu"
               >
                 <button
-                  v-if="!hideDraft || !disableDraft"
+                  v-if="!disableDraft"
                   class="menu-item dropdown-item dropdown-item-icon"
                   role="menu"
-                  :disabled="!safeToSaveDraft && saveable"
+                  :disabled="!safeToSaveDraft"
                   :class="{ disabled: !safeToSaveDraft }"
                   @click.prevent="saveDraft"
                   @click="close"
                 >
-                  <template v-if="closeable">
+                  {{ $t('post_status.save_to_drafts_button') }}
-                    {{ $t('post_status.save_to_drafts_and_close_button') }}
-                  </template>
-                  <template v-else>
-                    {{ $t('post_status.save_to_drafts_button') }}
-                  </template>
                 </button>
               </div>
             </template>

src/components/post_status_modal/post_status_modal.vue

@@ -14,9 +14,7 @@
       <PostStatusForm
         class="panel-body"
         v-bind="params"
-        :closeable="true"
         @posted="resetAndClose"
-        @draft-done="resetAndClose"
       />
     </div>
   </Modal>

src/components/settings_modal/tabs/appearance_tab.vue

@@ -57,7 +57,7 @@
           :key="style.key"
           :data-theme-key="style.key"
           class="button-default theme-preview"
-          :class="{ toggled: isThemeActive(style.key), disabled: switchInProgress }"
+          :class="{ toggled: isStyleActive(style.key), disabled: switchInProgress }"
           @click="style.version === 'v2' ? setTheme(style.key) : setStyle(style.key)"
           :disabled="switchInProgress"
         >
@@ -206,6 +206,51 @@
             </small>
           </div>
         </li>
+        <li>
+          <h3>{{ $t('settings.style.interface_font_user_override') }}</h3>
+          <ul class="setting-list">
+            <li>
+              <FontControl
+                :model-value="mergedConfig.theme3hacks.fonts.interface"
+                name="ui"
+                :label="$t('settings.style.fonts.components.interface')"
+                :fallback="{ family: 'sans-serif' }"
+                no-inherit="1"
+                @update:modelValue="v => updateFont('interface', v)"
+              />
+            </li>
+            <li>
+              <FontControl
+                v-if="expertLevel > 0"
+                :model-value="mergedConfig.theme3hacks.fonts.input"
+                name="input"
+                :fallback="{ family: 'inherit' }"
+                :label="$t('settings.style.fonts.components.input')"
+                @update:modelValue="v => updateFont('input', v)"
+              />
+            </li>
+            <li>
+              <FontControl
+                v-if="expertLevel > 0"
+                :model-value="mergedConfig.theme3hacks.fonts.post"
+                name="post"
+                :fallback="{ family: 'inherit' }"
+                :label="$t('settings.style.fonts.components.post')"
+                @update:modelValue="v => updateFont('post', v)"
+              />
+            </li>
+            <li>
+              <FontControl
+                v-if="expertLevel > 0"
+                :model-value="mergedConfig.theme3hacks.fonts.monospace"
+                name="postCode"
+                :fallback="{ family: 'monospace' }"
+                :label="$t('settings.style.fonts.components.monospace')"
+                @update:modelValue="v => updateFont('monospace', v)"
+              />
+            </li>
+          </ul>
+        </li>
         <li>
           <UnitSetting
             path="emojiSize"
@@ -239,47 +284,6 @@
             {{ $t('settings.navbar_size') }}
           </UnitSetting>
         </li>
-        <h3>{{ $t('settings.style.interface_font_user_override') }}</h3>
-        <li>
-          <FontControl
-            :model-value="mergedConfig.theme3hacks.fonts.interface"
-            name="ui"
-            :label="$t('settings.style.fonts.components.interface')"
-            :fallback="{ family: 'sans-serif' }"
-            no-inherit="1"
-            @update:modelValue="v => updateFont('interface', v)"
-          />
-        </li>
-        <li>
-          <FontControl
-            v-if="expertLevel > 0"
-            :model-value="mergedConfig.theme3hacks.fonts.input"
-            name="input"
-            :fallback="{ family: 'inherit' }"
-            :label="$t('settings.style.fonts.components.input')"
-            @update:modelValue="v => updateFont('input', v)"
-          />
-        </li>
-        <li>
-          <FontControl
-            v-if="expertLevel > 0"
-            :model-value="mergedConfig.theme3hacks.fonts.post"
-            name="post"
-            :fallback="{ family: 'inherit' }"
-            :label="$t('settings.style.fonts.components.post')"
-            @update:modelValue="v => updateFont('post', v)"
-          />
-        </li>
-        <li>
-          <FontControl
-            v-if="expertLevel > 0"
-            :model-value="mergedConfig.theme3hacks.fonts.monospace"
-            name="postCode"
-            :fallback="{ family: 'monospace' }"
-            :label="$t('settings.style.fonts.components.monospace')"
-            @update:modelValue="v => updateFont('monospace', v)"
-          />
-        </li>
         <h3>{{ $t('settings.columns') }}</h3>
         <li>
           <UnitSetting
@@ -341,11 +345,6 @@
     <div class="setting-item">
       <h2>{{ $t('settings.visual_tweaks') }}</h2>
       <ul class="setting-list">
-        <li>
-          <BooleanSetting path="modalMobileCenter">
-            {{ $t('settings.mobile_center_dialog') }}
-          </BooleanSetting>
-        </li>
         <li>
           <ChoiceSetting
             id="forcedRoundness"

src/components/status/status.js

@@ -288,6 +288,7 @@ const Status = {
           case 'nsfw': return this.$t('status.sensitive_muted')
         }
       }
+      console.log(this.muteReasons, mainReason())
       return this.$t(
         'status.multi_reason_mute',
         {
@@ -416,6 +417,9 @@ const Status = {
     currentUser () {
       return this.$store.state.users.currentUser
     },
+    betterShadow () {
+      return this.$store.state.interface.browserSupport.cssFilter
+    },
     mergedConfig () {
       return this.$store.getters.mergedConfig
     },

src/components/status/status.vue

@@ -65,6 +65,7 @@
           v-if="retweet"
           class="left-side repeater-avatar"
           :show-actor-type-indicator="showActorTypeIndicator"
+          :better-shadow="betterShadow"
           :user="statusoid.user"
         />
         <div class="right-side faint">
@@ -119,6 +120,7 @@
                 class="post-avatar"
                 :show-actor-type-indicator="showActorTypeIndicator"
                 :compact="compact"
+                :better-shadow="betterShadow"
                 :user="status.user"
               />
             </UserPopover>
@@ -598,14 +600,12 @@
         <PostStatusForm
           ref="postStatusForm"
           class="reply-body"
-          :closeable="true"
           :reply-to="status.id"
           :attentions="status.attentions"
           :replied-user="status.user"
           :copy-message-scope="status.visibility"
           :subject="replySubject"
           @posted="doToggleReplying"
-          @draft-done="doToggleReplying"
           @can-close="doToggleReplying"
         />
       </div>

src/components/top_bar.style.js

@@ -16,19 +16,11 @@ export default {
         background: '--fg',
         shadow: [{
           x: 0,
-          y: 1,
+          y: 0,
           blur: 4,
           spread: 0,
           color: '#000000',
-          alpha: 0.4
+          alpha: 0.6
-        },
-        {
-          x: 0,
-          y: 2,
-          blur: 7,
-          spread: 0,
-          color: '#000000',
-          alpha: 0.3
         }]
       }
     },

src/components/user_avatar/avatar.style.js

@@ -11,10 +11,10 @@ export default {
         shadow: [{
           x: 0,
           y: 1,
-          blur: 4,
+          blur: 8,
           spread: 0,
           color: '#000000',
-          alpha: 0.2
+          alpha: 0.7
         }]
       }
     }

src/components/user_avatar/user_avatar.js

@@ -15,14 +15,14 @@ library.add(
 const UserAvatar = {
   props: [
     'user',
+    'betterShadow',
     'compact',
     'showActorTypeIndicator'
   ],
   data () {
     return {
       showPlaceholder: false,
-      defaultAvatar: `${this.$store.state.instance.server + this.$store.state.instance.defaultAvatar}`,
+      defaultAvatar: `${this.$store.state.instance.server + this.$store.state.instance.defaultAvatar}`
-      betterShadow: this.$store.state.interface.browserSupport.cssFilter
     }
   },
   components: {

src/components/user_card/user_card.js

@@ -48,6 +48,7 @@ export default {
   data () {
     return {
       followRequestInProgress: false,
+      betterShadow: this.$store.state.interface.browserSupport.cssFilter,
       showingConfirmMute: false,
       muteExpiryAmount: 0,
       muteExpiryUnit: 'minutes'

src/components/user_card/user_card.vue

@@ -16,7 +16,10 @@
             class="user-info-avatar -link"
             @click="zoomAvatar"
           >
-            <UserAvatar :user="user" />
+            <UserAvatar
+              :better-shadow="betterShadow"
+              :user="user"
+            />
             <div class="user-info-avatar -link -overlay">
               <FAIcon
                 class="fa-scale-110 fa-old-padding"
@@ -27,6 +30,7 @@
           <UserAvatar
             v-else-if="typeof avatarAction === 'function'"
             class="user-info-avatar"
+            :better-shadow="betterShadow"
             :user="user"
             @click="avatarAction"
           />
@@ -34,7 +38,10 @@
             v-else
             :to="userProfileLink(user)"
           >
-            <UserAvatar :user="user" />
+            <UserAvatar
+              :better-shadow="betterShadow"
+              :user="user"
+            />
           </router-link>
           <div class="user-summary">
             <div class="top-line">

src/i18n/en.json

@@ -321,8 +321,7 @@
     "auto_save_nothing_new": "Nothing new to save.",
     "auto_save_saved": "Saved.",
     "auto_save_saving": "Saving...",
-    "save_to_drafts_button": "Save to drafts",
+    "save_to_drafts_button": "Save to drafts"
-    "save_to_drafts_and_close_button": "Save to drafts and close"
   },
   "registration": {
     "bio_optional": "Bio (optional)",
@@ -382,7 +381,6 @@
     "actor_type_Person": "a normal user",
     "actor_type_Service": "a bot",
     "actor_type_Group": "a group",
-    "mobile_center_dialog": "Vertically center dialogs on mobile",
     "app_name": "App name",
     "expert_mode": "Show advanced",
     "save": "Save changes",
@@ -869,8 +867,7 @@
           "lookup_local_fonts": "Load list of fonts installed on this computer",
           "enter_manually": "Enter font name family manually",
           "entry": "Enter {fontFamily}",
-          "select": "Select font",
+          "select": "Select font"
-          "label": "{label} font"
         }
       },
       "interface_font_user_override": "Override theme/browser font used",
@@ -1246,7 +1243,7 @@
     "status_unavailable": "Status unavailable",
     "copy_link": "Copy link to status",
     "external_source": "External source",
-    "muted_words": "Wordfiltered: {word} | Wordfiltered: {word} and {numWordsMore} more words",
+    "muted_words": "Wordfiltered: {word} | Wordfiltered: {word} and {numWordsMore} more word",
     "multi_reason_mute": "{main} | {main} + one more reason | {main} + {numReasonsMore} more reasons",
     "thread_muted": "Thread muted",
     "thread_muted_and_words": ", has words:",

src/modules/config.js

@@ -142,7 +142,6 @@ export const defaultState = {
   modalOnApproveFollow: undefined, // instance default
   modalOnDenyFollow: undefined, // instance default
   modalOnRemoveUserFromFollowers: undefined, // instance default
-  modalMobileCenter: undefined,
   playVideosInModal: false,
   useOneClickNsfw: false,
   useContainFit: true,

src/modules/instance.js

@@ -82,7 +82,6 @@ const defaultState = {
   modalOnApproveFollow: false,
   modalOnDenyFollow: false,
   modalOnRemoveUserFromFollowers: false,
-  modalMobileCenter: false,
   loginMethod: 'password',
   logo: '/static/logo.svg',
   logoMargin: '.2em',

src/services/theme_data/theme3_slot_functions.js

@@ -81,27 +81,9 @@ export const colorFunctions = {
       return alphaBlend(background, amount, foreground)
     }
   },
-  boost: {
-    argsNeeded: 2,
-    documentation: 'If given color is dark makes it darker, if color is light - makes it lighter',
-    args: [
-      'color: source color',
-      'amount: how much darken/brighten the color'
-    ],
-    exec: (args, { findColor }, { dynamicVars, staticVars }) => {
-      const [colorArg, amountArg] = args
-
-      const color = convert(findColor(colorArg, { dynamicVars, staticVars })).rgb
-      const amount = Number(amountArg)
-
-      const isLight = relativeLuminance(color) < 0.5
-      const mod = isLight ? -1 : 1
-      return brightness(amount * mod, color).rgb
-    }
-  },
   mod: {
     argsNeeded: 2,
-    documentation: 'Old function that increases or decreases brightness depending if background color is dark or light. Advised against using it as it might give unexpected results.',
+    documentation: 'Old function that increases or decreases brightness depending if color is dark or light. Advised against using it as it might give unexpected results.',
     args: [
       'color: source color',
       'amount: how much darken/brighten the color'
@@ -127,7 +109,6 @@ export const shadowFunctions = {
     args: [
       'color: border color',
       'side: string indicating on which side border should be, takes either one word or two words joined by dash (i.e. "left" or "bottom-right")',
-      'width: border width (thickness)',
       '[alpha]: (Optional) border opacity, defaults to 1 (fully opaque)',
       '[inset]: (Optional) whether border should be on the inside or outside, defaults to inside'
     ],

static/styles/Redmond DX.iss

@@ -94,7 +94,7 @@ Button:toggled:pressed {
 }
 
 Input {
-  background: $boost(--bg 20);
+  background: $mod(--bg -80);
   shadow: --defaultInputBevel;
   roundness: 0
 }