aboutsummaryrefslogtreecommitdiff
path: root/src/components/user_card
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/user_card')
-rw-r--r--src/components/user_card/user_card.js2
-rw-r--r--src/components/user_card/user_card.scss72
-rw-r--r--src/components/user_card/user_card.style.js41
-rw-r--r--src/components/user_card/user_card.vue23
4 files changed, 74 insertions, 64 deletions
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index e17bf8eb..b1fe2e8f 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -225,7 +225,7 @@ export default {
this.$store.dispatch('setCurrentMedia', attachment)
},
mentionUser () {
- this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
+ this.$store.dispatch('openPostStatusModal', { profileMention: true, repliedUser: this.user })
},
onAvatarClickHandler (e) {
if (this.onAvatarClick) {
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 4ab93a8a..70a76d54 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -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;
}
diff --git a/src/components/user_card/user_card.style.js b/src/components/user_card/user_card.style.js
new file mode 100644
index 00000000..34eaa176
--- /dev/null
+++ b/src/components/user_card/user_card.style.js
@@ -0,0 +1,41 @@
+export default {
+ name: 'UserCard',
+ selector: '.user-card',
+ 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
+ }
+ }
+ ]
+}
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 2de14063..70c4f67d 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -113,22 +113,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 +166,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"
>
{{ ' ' }}
@@ -276,10 +282,7 @@
/>
</div>
</div>
- <div
- v-if="!hideBio"
- class="panel-body"
- >
+ <div v-if="!hideBio">
<div
v-if="!mergedConfig.hideUserStats && switcher"
class="user-counts"
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 10:43:53 +0000