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.js19
-rw-r--r--src/components/user_card/user_card.scss107
-rw-r--r--src/components/user_card/user_card.vue17
3 files changed, 85 insertions, 58 deletions
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 4c81e2c7..67879307 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -4,7 +4,9 @@ import ProgressButton from '../progress_button/progress_button.vue'
import FollowButton from '../follow_button/follow_button.vue'
import ModerationTools from '../moderation_tools/moderation_tools.vue'
import AccountActions from '../account_actions/account_actions.vue'
+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 generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { mapGetters } from 'vuex'
@@ -38,7 +40,8 @@ export default {
'rounded',
'bordered',
'avatarAction', // default - open profile, 'zoom' - zoom, function - call function
- 'onClose'
+ 'onClose',
+ 'hasNoteEditor'
],
data () {
return {
@@ -124,6 +127,16 @@ export default {
hideFollowersCount () {
return this.isOtherUser && this.user.hide_followers_count
},
+ showModerationMenu () {
+ const privileges = this.loggedIn.privileges
+ return this.loggedIn.role === 'admin' || privileges.includes('users_manage_activation_state') || privileges.includes('users_delete') || privileges.includes('users_manage_tags')
+ },
+ hasNote () {
+ return this.relationship.note
+ },
+ supportsNote () {
+ return 'note' in this.relationship
+ },
...mapGetters(['mergedConfig'])
},
components: {
@@ -134,7 +147,9 @@ export default {
ProgressButton,
FollowButton,
Select,
- RichContent
+ RichContent,
+ UserLink,
+ UserNote
},
methods: {
muteUser () {
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index a0bbc6a6..d56b6672 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -1,4 +1,4 @@
-@import '../../_variables.scss';
+@import "../../variables";
.user-card {
position: relative;
@@ -11,7 +11,7 @@
}
.panel-heading {
- padding: .5em 0;
+ padding: 0.5em 0;
text-align: center;
box-shadow: none;
background: transparent;
@@ -35,10 +35,11 @@
left: 0;
right: 0;
bottom: 0;
- mask: linear-gradient(to top, white, transparent) bottom no-repeat,
- linear-gradient(to top, white, white);
+ mask:
+ linear-gradient(to top, white, transparent) bottom no-repeat,
+ linear-gradient(to top, white, white);
// Autoprefixer seem to ignore this one, and also syntax is different
- -webkit-mask-composite: xor;
+ mask-composite: xor;
mask-composite: exclude;
background-size: cover;
mask-size: 100% 60%;
@@ -159,17 +160,17 @@
top: 0;
right: 0;
bottom: 0;
- background-color: rgba(0, 0, 0, 0.3);
+ background-color: rgb(0 0 0 / 30%);
display: flex;
justify-content: center;
align-items: center;
border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
opacity: 0;
- transition: opacity .2s ease;
+ transition: opacity 0.2s ease;
svg {
- color: #FFF;
+ color: #fff;
}
}
@@ -178,7 +179,8 @@
}
}
- .external-link-button, .edit-profile-button {
+ .external-link-button,
+ .edit-profile-button {
cursor: pointer;
width: 2.5em;
text-align: center;
@@ -191,34 +193,6 @@
}
}
- .user-summary {
- display: block;
- margin-left: 0.6em;
- text-align: left;
- text-overflow: ellipsis;
- white-space: nowrap;
- flex: 1 1 0;
- // This is so that text doesn't get overlapped by avatar's shadow if it has
- // big one
- z-index: 1;
- line-height: 2em;
-
- --emoji-size: 1.7em;
-
- .top-line,
- .bottom-line {
- display: flex;
- }
- }
-
- .user-name {
- text-overflow: ellipsis;
- overflow: hidden;
- flex: 1 1 auto;
- margin-right: 1em;
- font-size: 1.1em;
- }
-
.bottom-line {
font-weight: light;
font-size: 1.1em;
@@ -253,8 +227,36 @@
}
}
+ .user-summary {
+ display: block;
+ margin-left: 0.6em;
+ text-align: left;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ flex: 1 1 0;
+ // This is so that text doesn't get overlapped by avatar's shadow if it has
+ // big one
+ z-index: 1;
+ line-height: 2em;
+
+ --emoji-size: 1.7em;
+
+ .top-line,
+ .bottom-line {
+ display: flex;
+ }
+ }
+
+ .user-name {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ flex: 1 1 auto;
+ margin-right: 1em;
+ font-size: 1.1em;
+ }
+
.user-meta {
- margin-bottom: .15em;
+ margin-bottom: 0.15em;
display: flex;
align-items: baseline;
line-height: 22px;
@@ -263,7 +265,7 @@
.following {
flex: 1 0 auto;
margin: 0;
- margin-bottom: .25em;
+ margin-bottom: 0.25em;
text-align: left;
}
@@ -271,7 +273,7 @@
flex: 0 1 auto;
display: flex;
flex-wrap: wrap;
- margin-right: -.5em;
+ margin-right: -0.5em;
align-self: start;
.userHighlightCl {
@@ -294,19 +296,20 @@
.userHighlightText,
.userHighlightSel {
vertical-align: top;
- margin-right: .5em;
- margin-bottom: .25em;
+ margin-right: 0.5em;
+ margin-bottom: 0.25em;
}
}
}
+
.user-interactions {
position: relative;
display: flex;
flex-flow: row wrap;
- margin-right: -.75em;
+ margin-right: -0.75em;
> * {
- margin: 0 .75em .6em 0;
+ margin: 0 0.75em 0.6em 0;
white-space: nowrap;
min-width: 95px;
}
@@ -315,6 +318,10 @@
margin: 0;
}
}
+
+ .user-note {
+ margin: 0 0.75em 0.6em 0;
+ }
}
.sidebar .edit-profile-button {
@@ -323,8 +330,8 @@
.user-counts {
display: flex;
- line-height:16px;
- padding: .5em 1.5em 0em 1.5em;
+ line-height: 16px;
+ padding: 0.5em 1.5em 0;
text-align: center;
justify-content: space-between;
color: $fallback--lightText;
@@ -334,14 +341,16 @@
.user-count {
flex: 1 0 auto;
- padding: .5em 0 .5em 0;
- margin: 0 .5em;
+ padding: 0.5em 0;
+ margin: 0 0.5em;
h5 {
- font-size:1em;
+ font-size: 1em;
font-weight: bolder;
margin: 0 0 0.25em;
}
+
+ /* stylelint-disable-next-line no-descending-specificity */
a {
text-decoration: none;
}
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index ace89c51..349c7cb1 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -106,13 +106,10 @@
</button>
</div>
<div class="bottom-line">
- <router-link
+ <user-link
class="user-screen-name"
- :title="user.screen_name_ui"
- :to="userProfileLink(user)"
- >
- @{{ user.screen_name_ui }}
- </router-link>
+ :user="user"
+ />
<template v-if="!hideBio">
<span
v-if="user.deactivated"
@@ -261,7 +258,7 @@
</button>
</div>
<ModerationTools
- v-if="loggedIn.role === &quot;admin&quot;"
+ v-if="showModerationMenu"
:user="user"
/>
</div>
@@ -271,6 +268,12 @@
>
<RemoteFollow :user="user" />
</div>
+ <UserNote
+ v-if="loggedIn && isOtherUser && (hasNote || (hasNoteEditor && supportsNote))"
+ :user="user"
+ :relationship="relationship"
+ :editable="hasNoteEditor"
+ />
</div>
</div>
<div
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-30 08:47:38 +0000