hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'origin/develop' into customizable-post-actions

Browse source
This commit is contained in:
Henry Jameson 2025-01-16 18:12:29 +02:00
commit 41f54b687b
35 changed files with 1345 additions and 1661 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/button.style.js
View file

@ -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']
}
},

1
src/components/chat_message/chat_message.js
View file

@ -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
}),

1
src/components/chat_message/chat_message.vue
View file

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

5
src/components/dialog_modal/dialog_modal.js
View file

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

7
src/components/dialog_modal/dialog_modal.vue
View file

@ -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 {

4
src/components/draft/draft.vue
View file

@ -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>

1
src/components/edit_status_modal/edit_status_modal.vue
View file

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

9
src/components/emoji_reactions/emoji_reactions.vue
View file

@ -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);
}

19
src/components/font_control/font_control.vue
View file

@ -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 {

2
src/components/input.style.js
View file

@ -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'
}

1
src/components/notification/notification.js
View file

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

1
src/components/notification/notification.vue
View file

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

16
src/components/panel.style.js
View file

@ -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
}]
}
}

18
src/components/panel_header.style.js
View file

@ -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
}]
}
}
]

20
src/components/post_status_form/post_status_form.js
View file

@ -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 () {

14
src/components/post_status_form/post_status_form.vue
View file

@ -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"
class="menu-item dropdown-item"
v-if="!hideDraft || !disableDraft"
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>

2
src/components/post_status_modal/post_status_modal.vue
View file

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

93
src/components/settings_modal/tabs/appearance_tab.vue
View file

@ -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"
>
@ -206,51 +206,6 @@
</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"
@ -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
@ -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"

3
src/components/status/status.js
View file

@ -408,9 +408,6 @@ const Status = {
currentUser () {
return this.$store.state.users.currentUser
},
betterShadow () {
return this.$store.state.interface.browserSupport.cssFilter
},
mergedConfig () {
return this.$store.getters.mergedConfig
},

12
src/components/top_bar.style.js
View file

@ -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
}]
}
},

4
src/components/user_avatar/avatar.style.js
View file

@ -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
}]
}
}

4
src/components/user_avatar/user_avatar.js
View file

@ -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: {

1
src/components/user_card/user_card.js
View file

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

11
src/components/user_card/user_card.vue
View file

@ -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">