Merge remote-tracking branch 'origin/develop' into migrate/vuex-to-pinia
This commit is contained in:
Henry Jameson
commit
58e18d48df
489 changed files with 31167 additions and 9871 deletions
|
|
@ -1,4 +1,3 @@
|
|||
import { unitToSeconds } from 'src/services/date_utils/date_utils.js'
|
||||
import UserAvatar from '../user_avatar/user_avatar.vue'
|
||||
import RemoteFollow from '../remote_follow/remote_follow.vue'
|
||||
import ProgressButton from '../progress_button/progress_button.vue'
|
||||
|
|
@ -9,7 +8,7 @@ import UserNote from '../user_note/user_note.vue'
|
|||
import Select from '../select/select.vue'
|
||||
import UserLink from '../user_link/user_link.vue'
|
||||
import RichContent from 'src/components/rich_content/rich_content.jsx'
|
||||
import ConfirmModal from '../confirm_modal/confirm_modal.vue'
|
||||
import MuteConfirm from '../confirm_modal/mute_confirm.vue'
|
||||
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { usePostStatusStore } from '../../stores/postStatus'
|
||||
|
|
@ -51,8 +50,6 @@ export default {
|
|||
data () {
|
||||
return {
|
||||
followRequestInProgress: false,
|
||||
betterShadow: useInterfaceStore().browserSupport.cssFilter,
|
||||
showingConfirmMute: false,
|
||||
muteExpiryAmount: 0,
|
||||
muteExpiryUnit: 'minutes'
|
||||
}
|
||||
|
|
@ -145,12 +142,6 @@ export default {
|
|||
supportsNote () {
|
||||
return 'note' in this.relationship
|
||||
},
|
||||
shouldConfirmMute () {
|
||||
return this.mergedConfig.modalOnMute
|
||||
},
|
||||
muteExpiryUnits () {
|
||||
return ['minutes', 'hours', 'days']
|
||||
},
|
||||
...mapGetters(['mergedConfig'])
|
||||
},
|
||||
components: {
|
||||
|
|
@ -164,28 +155,11 @@ export default {
|
|||
RichContent,
|
||||
UserLink,
|
||||
UserNote,
|
||||
ConfirmModal
|
||||
MuteConfirm
|
||||
},
|
||||
methods: {
|
||||
showConfirmMute () {
|
||||
this.showingConfirmMute = true
|
||||
},
|
||||
hideConfirmMute () {
|
||||
this.showingConfirmMute = false
|
||||
},
|
||||
muteUser () {
|
||||
if (!this.shouldConfirmMute) {
|
||||
this.doMuteUser()
|
||||
} else {
|
||||
this.showConfirmMute()
|
||||
}
|
||||
},
|
||||
doMuteUser () {
|
||||
this.$store.dispatch('muteUser', {
|
||||
id: this.user.id,
|
||||
expiresIn: this.shouldConfirmMute ? unitToSeconds(this.muteExpiryUnit, this.muteExpiryAmount) : 0
|
||||
})
|
||||
this.hideConfirmMute()
|
||||
this.$refs.confirmation.optionallyPrompt()
|
||||
},
|
||||
unmuteUser () {
|
||||
this.$store.dispatch('unmuteUser', this.user.id)
|
||||
|
|
@ -228,7 +202,7 @@ export default {
|
|||
useMediaViewerStore().setCurrentMedia(attachment)
|
||||
},
|
||||
mentionUser () {
|
||||
usePostStatusStore().openPostStatusModal({ replyTo: true, repliedUser: this.user })
|
||||
usePostStatusStore().openPostStatusModal({ profileMention: true, repliedUser: this.user })
|
||||
},
|
||||
onAvatarClickHandler (e) {
|
||||
if (this.onAvatarClick) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import "../../variables";
|
||||
|
||||
.user-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -21,14 +19,6 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
word-wrap: break-word;
|
||||
border-bottom-right-radius: inherit;
|
||||
border-bottom-left-radius: inherit;
|
||||
// create new stacking context
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.background-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -62,11 +52,6 @@
|
|||
padding: 1em;
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
color: $fallback--link;
|
||||
color: var(--postLink, $fallback--link);
|
||||
}
|
||||
|
||||
img {
|
||||
object-fit: contain;
|
||||
vertical-align: middle;
|
||||
|
|
@ -76,53 +61,37 @@
|
|||
}
|
||||
|
||||
&.-rounded-t {
|
||||
border-top-left-radius: $fallback--panelRadius;
|
||||
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
border-top-right-radius: $fallback--panelRadius;
|
||||
border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
border-top-left-radius: var(--roundness);
|
||||
border-top-right-radius: var(--roundness);
|
||||
|
||||
--__roundnessTop: var(--panelRadius);
|
||||
--__roundnessTop: var(--roundness);
|
||||
--__roundnessBottom: 0;
|
||||
}
|
||||
|
||||
&.-rounded {
|
||||
border-radius: $fallback--panelRadius;
|
||||
border-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
border-radius: var(--roundness);
|
||||
|
||||
--__roundnessTop: var(--panelRadius);
|
||||
--__roundnessBottom: var(--panelRadius);
|
||||
--__roundnessTop: var(--roundness);
|
||||
--__roundnessBottom: var(--roundness);
|
||||
}
|
||||
|
||||
&.-popover {
|
||||
border-radius: $fallback--tooltipRadius;
|
||||
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
|
||||
border-radius: var(--roundness);
|
||||
|
||||
--__roundnessTop: var(--tooltipRadius);
|
||||
--__roundnessBottom: var(--tooltipRadius);
|
||||
--__roundnessTop: var(--roundness);
|
||||
--__roundnessBottom: var(--roundness);
|
||||
}
|
||||
|
||||
&.-bordered {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: $fallback--border;
|
||||
border-color: var(--border, $fallback--border);
|
||||
border-color: var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
padding: 0 26px;
|
||||
|
||||
a {
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
|
||||
&:hover {
|
||||
color: var(--icon);
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
min-width: 0;
|
||||
padding: 16px 0 6px;
|
||||
|
|
@ -164,8 +133,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: $fallback--avatarRadius;
|
||||
border-radius: var(--avatarRadius, $fallback--avatarRadius);
|
||||
border-radius: var(--roundness);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
|
|
@ -188,8 +156,7 @@
|
|||
padding: 0.5em 0;
|
||||
|
||||
&:not(:hover) .icon {
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
color: var(--lightText);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -203,6 +170,7 @@
|
|||
}
|
||||
|
||||
.user-screen-name {
|
||||
color: var(--text);
|
||||
min-width: 1px;
|
||||
flex: 0 1 auto;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -214,16 +182,11 @@
|
|||
flex: 0 0 auto;
|
||||
margin-left: 1em;
|
||||
font-size: 0.7em;
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.user-role {
|
||||
flex: none;
|
||||
color: $fallback--text;
|
||||
color: var(--alertNeutralText, $fallback--text);
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--alertNeutral, $fallback--fg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -241,6 +204,11 @@
|
|||
|
||||
--emoji-size: 1.7em;
|
||||
|
||||
.RichContent {
|
||||
/* stylelint-disable-next-line declaration-no-important */
|
||||
--link: var(--text) !important;
|
||||
}
|
||||
|
||||
.top-line,
|
||||
.bottom-line {
|
||||
display: flex;
|
||||
|
|
@ -334,8 +302,6 @@
|
|||
padding: 0.5em 1.5em 0;
|
||||
text-align: center;
|
||||
justify-content: space-between;
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
|
@ -355,8 +321,3 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mute-expiry {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
|
|
|||
42
src/components/user_card/user_card.style.js
Normal file
42
src/components/user_card/user_card.style.js
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
export default {
|
||||
name: 'UserCard',
|
||||
selector: '.user-card',
|
||||
notEditable: true,
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'Link',
|
||||
'Icon',
|
||||
'Button',
|
||||
'ButtonUnstyled',
|
||||
'Input',
|
||||
'RichContent',
|
||||
'Alert'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
background: '--bg',
|
||||
opacity: 0,
|
||||
roundness: 3,
|
||||
shadow: [{
|
||||
x: 1,
|
||||
y: 1,
|
||||
blur: 4,
|
||||
spread: 0,
|
||||
color: '#000000',
|
||||
alpha: 0.6
|
||||
}],
|
||||
'--profileTint': 'color | $alpha(--background 0.5)'
|
||||
}
|
||||
},
|
||||
{
|
||||
parent: {
|
||||
component: 'UserCard'
|
||||
},
|
||||
component: 'RichContent',
|
||||
directives: {
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
:style="style"
|
||||
class="background-image"
|
||||
/>
|
||||
<div :class="onClose ? '' : panel-heading -flexible-height">
|
||||
<div :class="onClose ? '' : 'panel-heading -flexible-height'">
|
||||
<div class="user-info">
|
||||
<div class="container">
|
||||
<a
|
||||
|
|
@ -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">
|
||||
|
|
@ -113,22 +106,28 @@
|
|||
<template v-if="!hideBio">
|
||||
<span
|
||||
v-if="user.deactivated"
|
||||
class="alert user-role"
|
||||
class="alert neutral user-role"
|
||||
>
|
||||
{{ $t('user_card.deactivated') }}
|
||||
</span>
|
||||
<span
|
||||
v-if="!!visibleRole"
|
||||
class="alert user-role"
|
||||
class="alert neutral user-role"
|
||||
>
|
||||
{{ $t(`general.role.${visibleRole}`) }}
|
||||
</span>
|
||||
<span
|
||||
v-if="user.bot"
|
||||
class="alert user-role"
|
||||
v-if="user.actor_type === 'Service'"
|
||||
class="alert neutral user-role"
|
||||
>
|
||||
{{ $t('user_card.bot') }}
|
||||
</span>
|
||||
<span
|
||||
v-if="user.actor_type === 'Group'"
|
||||
class="alert user-role"
|
||||
>
|
||||
{{ $t('user_card.group') }}
|
||||
</span>
|
||||
</template>
|
||||
<span v-if="user.locked">
|
||||
<FAIcon
|
||||
|
|
@ -160,14 +159,14 @@
|
|||
v-if="userHighlightType !== 'disabled'"
|
||||
:id="'userHighlightColorTx'+user.id"
|
||||
v-model="userHighlightColor"
|
||||
class="userHighlightText"
|
||||
class="input userHighlightText"
|
||||
type="text"
|
||||
>
|
||||
<input
|
||||
v-if="userHighlightType !== 'disabled'"
|
||||
:id="'userHighlightColor'+user.id"
|
||||
v-model="userHighlightColor"
|
||||
class="userHighlightCl"
|
||||
class="input userHighlightCl"
|
||||
type="color"
|
||||
>
|
||||
{{ ' ' }}
|
||||
|
|
@ -202,7 +201,7 @@
|
|||
/>
|
||||
<template v-if="relationship.following">
|
||||
<ProgressButton
|
||||
v-if="!relationship.subscribing"
|
||||
v-if="!relationship.notifying"
|
||||
class="btn button-default"
|
||||
:click="subscribeUser"
|
||||
:title="$t('user_card.subscribe')"
|
||||
|
|
@ -276,10 +275,7 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="!hideBio"
|
||||
class="panel-body"
|
||||
>
|
||||
<div v-if="!hideBio">
|
||||
<div
|
||||
v-if="!mergedConfig.hideUserStats && switcher"
|
||||
class="user-counts"
|
||||
|
|
@ -315,51 +311,11 @@
|
|||
/>
|
||||
</div>
|
||||
<teleport to="#modal">
|
||||
<confirm-modal
|
||||
v-if="showingConfirmMute"
|
||||
:title="$t('user_card.mute_confirm_title')"
|
||||
:confirm-text="$t('user_card.mute_confirm_accept_button')"
|
||||
:cancel-text="$t('user_card.mute_confirm_cancel_button')"
|
||||
@accepted="doMuteUser"
|
||||
@cancelled="hideConfirmMute"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="user_card.mute_confirm"
|
||||
tag="div"
|
||||
>
|
||||
<template #user>
|
||||
<span
|
||||
v-text="user.screen_name_ui"
|
||||
/>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<div
|
||||
class="mute-expiry"
|
||||
>
|
||||
<label>
|
||||
{{ $t('user_card.mute_duration_prompt') }}
|
||||
</label>
|
||||
<input
|
||||
v-model="muteExpiryAmount"
|
||||
type="number"
|
||||
class="expiry-amount hide-number-spinner"
|
||||
:min="0"
|
||||
>
|
||||
<Select
|
||||
v-model="muteExpiryUnit"
|
||||
unstyled="true"
|
||||
class="expiry-unit"
|
||||
>
|
||||
<option
|
||||
v-for="unit in muteExpiryUnits"
|
||||
:key="unit"
|
||||
:value="unit"
|
||||
>
|
||||
{{ $t(`time.${unit}_short`, ['']) }}
|
||||
</option>
|
||||
</Select>
|
||||
</div>
|
||||
</confirm-modal>
|
||||
<MuteConfirm
|
||||
ref="confirmation"
|
||||
type="user"
|
||||
:user="user"
|
||||
/>
|
||||
</teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue