commit: 582ec616b86f0c87e6d989c2303486caf70edfa7 parent 4150ded11f07c90beec859b8f5b4bc806e4b9fbe Author: HJ <30-hj@users.noreply.git.pleroma.social> Date: Tue, 14 Jan 2025 07:52:11 +0000 Merge branch 'fixes-batch2' into 'develop' Fixes batch2 Closes #1351 and #1350 See merge request pleroma/pleroma-fe!1968Diffstat:
31 files changed, 190 insertions(+), 111 deletions(-)diff --git a/changelog.d/batch2.skip b/changelog.d/batch2.skipdiff --git a/src/components/button.style.js b/src/components/button.style.js@@ -35,11 +35,11 @@ export default { { component: 'Root', directives: { - '--buttonDefaultHoverGlow': 'shadow | 0 0 4 --text / 0.5', - '--buttonDefaultFocusGlow': 'shadow | 0 0 4 4 --link / 0.5', + '--buttonDefaultHoverGlow': 'shadow | 0 0 1 2 --text / 0.4', + '--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)', - '--buttonPressedBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2 2), $borderSide(#000000 top 0.2 2)' + '--buttonDefaultBevel': 'shadow | $borderSide(#FFFFFF top 0.2 1), $borderSide(#000000 bottom 0.2 1)', + '--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'] } },diff --git a/src/components/chat_message/chat_message.js b/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 }),diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue@@ -20,7 +20,6 @@ > <UserAvatar :compact="true" - :better-shadow="betterShadow" :user="author" /> </UserPopover>diff --git a/src/components/dialog_modal/dialog_modal.js b/src/components/dialog_modal/dialog_modal.js@@ -8,6 +8,11 @@ const DialogModal = { default: () => {}, type: Function } + }, + computed: { + mobileCenter () { + return this.$store.getters.mergedConfig.modalMobileCenter + } } }diff --git a/src/components/dialog_modal/dialog_modal.vue b/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 {diff --git a/src/components/draft/draft.vue b/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>diff --git a/src/components/edit_status_modal/edit_status_modal.vue b/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>diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/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); }diff --git a/src/components/font_control/font_control.vue b/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 {diff --git a/src/components/input.style.js b/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' }diff --git a/src/components/notification/notification.js b/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: falsediff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue@@ -48,7 +48,6 @@ <UserAvatar class="post-avatar" :compact="true" - :better-shadow="betterShadow" :user="notification.from_profile" /> </UserPopover>diff --git a/src/components/panel.style.js b/src/components/panel.style.js@@ -38,12 +38,20 @@ export default { roundness: 3, blur: '5px', shadow: [{ - x: 1, - y: 1, - blur: 4, + x: 0, + y: 0, + 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 }] } }diff --git a/src/components/panel_header.style.js b/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 + }] } } ]diff --git a/src/components/post_status_form/post_status_form.js b/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 () {diff --git a/src/components/post_status_form/post_status_form.vue b/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" > - {{ $t('post_status.save_to_drafts_button') }} + <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>diff --git a/src/components/post_status_modal/post_status_modal.vue b/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>diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/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,51 +207,6 @@ </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" :step="0.1" @@ -284,6 +239,47 @@ {{ $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 @@ -346,6 +342,11 @@ <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" path="forcedRoundness"diff --git a/src/components/status/status.js b/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 },diff --git a/src/components/status/status.vue b/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>diff --git a/src/components/top_bar.style.js b/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 }] } },diff --git a/src/components/user_avatar/avatar.style.js b/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 }] } }diff --git a/src/components/user_avatar/user_avatar.js b/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: {diff --git a/src/components/user_card/user_card.js b/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'diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue@@ -16,10 +16,7 @@ class="user-info-avatar -link" @click="zoomAvatar" > - <UserAvatar - :better-shadow="betterShadow" - :user="user" - /> + <UserAvatar :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 - :better-shadow="betterShadow" - :user="user" - /> + <UserAvatar :user="user" /> </router-link> <div class="user-summary"> <div class="top-line">diff --git a/src/i18n/en.json b/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",diff --git a/src/modules/config.js b/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,diff --git a/src/modules/instance.js b/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',diff --git a/src/services/theme_data/theme3_slot_functions.js b/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' ],diff --git a/static/styles/Redmond DX.iss b/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 }