Merge branch 'fixes-batch2' into 'develop'

Fixes batch2

Closes #1351 and #1350

See merge request pleroma/pleroma-fe!1968

src/components/button.style.js

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

src/components/chat_message/chat_message.js

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

src/components/dialog_modal/dialog_modal.js

@@ -8,6 +8,11 @@ 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 }"
+    :class="{ 'dark-overlay': darkOverlay, '-center-mobile': mobileCenter }"
     @click.self.stop="onCancel()"
   >
     <div
@@ -79,6 +79,7 @@
     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;
@@ -99,6 +100,10 @@
     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'"
-        :disable-draft="true"
+        :hide-draft="true"
         v-bind="postStatusFormProps"
       />
       <EditStatusForm
         v-else
-        :disable-draft="true"
+        :hide-draft="true"
         :params="postStatusFormProps"
       />
     </div>

src/components/edit_status_modal/edit_status_modal.vue

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

src/components/emoji_reactions/emoji_reactions.vue

@@ -99,11 +99,6 @@
         display: inline-flex;
         justify-content: center;
         align-items: center;
-
-        &.-picked-reaction {
-          border: 1px solid var(--accent);
-          margin-right: -1px;
-        }
       }
     }
   }
@@ -154,10 +149,6 @@
     }
 
     &.-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,18 +5,22 @@
       :for="manualEntry ? name : name + '-font-switcher'"
       class="label"
     >
-      {{ label }}
+      {{ $t('settings.style.themes3.font.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>
-    <p v-if="modelValue?.family">
+    <div
+      v-if="modelValue?.family"
+      class="font-input"
+    >
       <label
         v-if="manualEntry"
         :id="name + '-label'"
@@ -122,7 +126,7 @@
           </optgroup>
         </Select>
       </span>
-    </p>
+    </div>
   </div>
 </template>
 
@@ -134,6 +138,15 @@
     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)',
+        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2), inset 0 0 2 #000000 / 0.15',
         '--defaultInputHoverGlow': 'shadow | 0 0 4 --text / 0.5',
         '--defaultInputFocusGlow': 'shadow | 0 0 4 4 --link / 0.5'
       }

src/components/notification/notification.js

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

src/components/panel.style.js

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

src/components/panel_header.style.js

@@ -17,7 +17,23 @@ 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,6 +101,8 @@ const PostStatusForm = {
     'disableSubmit',
     'disablePreview',
     'disableDraft',
+    'hideDraft',
+    'closeable',
     'placeholder',
     'maxHeight',
     'postHandler',
@@ -115,6 +117,7 @@ const PostStatusForm = {
   ],
   emits: [
     'posted',
+    'draft-done',
     'resize',
     'mediaplay',
     'mediapause',
@@ -232,6 +235,9 @@ const PostStatusForm = {
     showAllScopes () {
       return !this.mergedConfig.minimalScopesMode
     },
+    hideExtraActions () {
+      return this.disableDraft || this.hideDraft
+    },
     emojiUserSuggestor () {
       return suggestor({
         emoji: [
@@ -353,10 +359,12 @@ const PostStatusForm = {
       }
     },
     safeToSaveDraft () {
-      return this.newStatus.status ||
+      return (
+        this.newStatus.status ||
         this.newStatus.spoilerText ||
         this.newStatus.files?.length ||
         this.newStatus.hasPoll
+      ) && this.saveable
     },
     ...mapGetters(['mergedConfig']),
     ...mapState({
@@ -760,12 +768,20 @@ const PostStatusForm = {
                 this.newStatus.id = id
               }
               this.saveable = false
+              if (!this.shouldAutoSaveDraft) {
+                this.clearStatus()
+                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
+              if (!this.shouldAutoSaveDraft) {
+                this.clearStatus()
+                this.$emit('draft-done')
+              }
             })
         }
       }
@@ -773,7 +789,7 @@ const PostStatusForm = {
     },
     maybeAutoSaveDraft () {
       if (this.shouldAutoSaveDraft) {
-        this.saveDraft()
+        this.saveDraft(false)
       }
     },
     abandonDraft () {

src/components/post_status_form/post_status_form.vue

@@ -316,13 +316,12 @@
             </template>
           </button>
           <Popover
-            v-if="!disableDraft"
+            v-if="!hideExtraActions"
             class="more-post-actions"
             :normal-button="true"
             trigger="click"
             placement="bottom"
             :offset="{ y: 5 }"
-            :bound-to="{ x: 'container' }"
           >
             <template #trigger>
               <FAIcon
@@ -336,15 +335,20 @@
                 role="menu"
               >
                 <button
-                  v-if="!disableDraft"
+                  v-if="!hideDraft || !disableDraft"
                   class="menu-item dropdown-item dropdown-item-icon"
                   role="menu"
-                  :disabled="!safeToSaveDraft"
+                  :disabled="!safeToSaveDraft && saveable"
                   :class="{ disabled: !safeToSaveDraft }"
                   @click.prevent="saveDraft"
                   @click="close"
                 >
+                  <template v-if="closeable">
+                    {{ $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,7 +14,9 @@
       <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: isStyleActive(style.key), disabled: switchInProgress }"
+          :class="{ toggled: isThemeActive(style.key), disabled: switchInProgress }"
           @click="style.version === 'v2' ? setTheme(style.key) : setStyle(style.key)"
           :disabled="switchInProgress"
         >
@@ -207,8 +207,39 @@
           </div>
         </li>
         <li>
+          <UnitSetting
+            path="emojiSize"
+            :step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 32, 'rem': 2.2 }"
+          >
+            {{ $t('settings.emoji_size') }}
+          </UnitSetting>
+          <ul
+            class="setting-list suboptions"
+          >
+            <li>
+              <FloatSetting
+                v-if="user"
+                path="emojiReactionsScale"
+                expert="1"
+              >
+                {{ $t('settings.emoji_reactions_scale') }}
+              </FloatSetting>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <UnitSetting
+            path="navbarSize"
+            :step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 55, 'rem': 3.5 }"
+          >
+            {{ $t('settings.navbar_size') }}
+          </UnitSetting>
+        </li>
         <h3>{{ $t('settings.style.interface_font_user_override') }}</h3>
-          <ul class="setting-list">
         <li>
           <FontControl
             :model-value="mergedConfig.theme3hacks.fonts.interface"
@@ -249,41 +280,6 @@
             @update:modelValue="v => updateFont('monospace', v)"
           />
         </li>
-          </ul>
-        </li>
-        <li>
-          <UnitSetting
-            path="emojiSize"
-            :step="0.1"
-            :units="['px', 'rem']"
-            :reset-default="{ 'px': 32, 'rem': 2.2 }"
-          >
-            {{ $t('settings.emoji_size') }}
-          </UnitSetting>
-          <ul
-            class="setting-list suboptions"
-          >
-            <li>
-              <FloatSetting
-                v-if="user"
-                path="emojiReactionsScale"
-                expert="1"
-              >
-                {{ $t('settings.emoji_reactions_scale') }}
-              </FloatSetting>
-            </li>
-          </ul>
-        </li>
-        <li>
-          <UnitSetting
-            path="navbarSize"
-            :step="0.1"
-            :units="['px', 'rem']"
-            :reset-default="{ 'px': 55, 'rem': 3.5 }"
-          >
-            {{ $t('settings.navbar_size') }}
-          </UnitSetting>
-        </li>
         <h3>{{ $t('settings.columns') }}</h3>
         <li>
           <UnitSetting
@@ -345,6 +341,11 @@
     <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

@@ -416,9 +416,6 @@ 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,7 +65,6 @@
           v-if="retweet"
           class="left-side repeater-avatar"
           :show-actor-type-indicator="showActorTypeIndicator"
-          :better-shadow="betterShadow"
           :user="statusoid.user"
         />
         <div class="right-side faint">
@@ -120,7 +119,6 @@
                 class="post-avatar"
                 :show-actor-type-indicator="showActorTypeIndicator"
                 :compact="compact"
-                :better-shadow="betterShadow"
                 :user="status.user"
               />
             </UserPopover>
@@ -600,12 +598,14 @@
         <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,11 +16,19 @@ export default {
         background: '--fg',
         shadow: [{
           x: 0,
-          y: 0,
+          y: 1,
           blur: 4,
           spread: 0,
           color: '#000000',
-          alpha: 0.6
+          alpha: 0.4
+        },
+        {
+          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: 8,
+          blur: 4,
           spread: 0,
           color: '#000000',
-          alpha: 0.7
+          alpha: 0.2
         }]
       }
     }

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

src/i18n/en.json

@@ -321,7 +321,8 @@
     "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)",
@@ -381,6 +382,7 @@
     "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",
@@ -867,7 +869,8 @@
           "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",

src/modules/config.js

@@ -142,6 +142,7 @@ 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,6 +82,7 @@ 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,9 +81,27 @@ 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 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 background 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'
@@ -109,6 +127,7 @@ 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: $mod(--bg -80);
+  background: $boost(--bg 20);
   shadow: --defaultInputBevel;
   roundness: 0
 }