ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-12 23:35:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2700 from Human-Connection/2675-migrate-avatar-component-2

Browse Source 
refactor(styleguide): Migrate Avatar component to monorepo
This commit is contained in:
mattwr18 2020-01-21 19:11:14 +01:00 committed by GitHub
commit 901245b718
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 401 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
cypress/integration/common/post.js
View File

@ -24,10 +24,10 @@ Then("my comment should be successfully created", () => {
Then("I should see my comment", () => {
cy.get("div.comment p")
.should("contain", "Human Connection rocks")
.get(".ds-avatar img")
.get(".user-avatar img")
.should("have.attr", "src")
.and("contain", narratorAvatar)
.get("div p.ds-text span")
.get(".user-teaser > .info > .text")
.should("contain", "today at");
});

2
cypress/integration/common/profile.js
View File

@ -32,5 +32,5 @@ Then("I cannot upload a picture", () => {
cy.get(".ds-card-content")
.children()
.should("not.have.id", "customdropzone")
.should("have.class", "ds-avatar");
.should("have.class", "user-avatar");
});

2
cypress/integration/common/report.js
View File

@ -63,7 +63,7 @@ When('I click on "Report User" from the content menu in the user info box', () =
})
When('I click on the author', () => {
cy.get('.username')
cy.get('.user-teaser')
.click()
.url().should('include', '/profile/')
})

2
cypress/integration/common/search.js
View File

@ -87,7 +87,7 @@ Then(
);
Then("I select a user entry", () => {
cy.get(".searchable-input .userinfo")
cy.get(".searchable-input .user-teaser")
.first()
.trigger("click");
})

2
cypress/integration/common/steps.js
View File

@ -463,7 +463,7 @@ When(
);
When("I navigate to my {string} settings page", settingsPage => {
cy.get(".avatar-menu").click();
cy.get(".avatar-menu-trigger").click();
cy.get(".avatar-menu-popover")
.find("a[href]")
.contains("Settings")

3
webapp/assets/_new/styles/tokens.scss
View File

@ -254,8 +254,7 @@ $size-width-paginate: 100px;
$size-avatar-small: 34px;
$size-avatar-base: 44px;
$size-avatar-large: 64px;
$size-avatar-x-large: 114px;
$size-avatar-large: 114px;
/**
* @tokens Size Buttons

68
webapp/components/Avatar/Avatar.spec.js
View File

@ -1,68 +0,0 @@
import { mount } from '@vue/test-utils'
import Avatar from './Avatar.vue'
const localVue = global.localVue
describe('Avatar.vue', () => {
let propsData = {}
const Wrapper = () => {
return mount(Avatar, { propsData, localVue })
}
it('renders no image', () => {
expect(
Wrapper()
.find('img')
.exists(),
).toBe(false)
})
// this is testing the style guide
it('renders an icon', () => {
expect(
Wrapper()
.find('.ds-icon')
.exists(),
).toBe(true)
})
describe('given a user', () => {
describe('with a relative avatar url', () => {
beforeEach(() => {
propsData = {
user: {
avatar: '/avatar.jpg',
},
}
})
it('adds a prefix to load the image from the uploads service', () => {
expect(
Wrapper()
.find('img')
.attributes('src'),
).toBe('/api/avatar.jpg')
})
})
describe('with an absolute avatar url', () => {
beforeEach(() => {
propsData = {
user: {
avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/sawalazar/128.jpg',
},
}
})
it('keeps the avatar URL as is', () => {
// e.g. our seeds have absolute image URLs
expect(
Wrapper()
.find('img')
.attributes('src'),
).toBe('https://s3.amazonaws.com/uifaces/faces/twitter/sawalazar/128.jpg')
})
})
})
})

28
webapp/components/Avatar/Avatar.vue
View File

@ -1,28 +0,0 @@
<template>
<ds-avatar
:image="user && user.avatar | proxyApiUrl"
:name="userName"
class="avatar"
:size="size"
/>
</template>
<script>
export default {
name: 'HcAvatar',
props: {
user: { type: Object, default: null },
size: { type: String, default: 'small' },
},
computed: {
userName() {
const { name } = this.user || {}
// The name is used to display the initials in case
// the image cannot be loaded.
return name
// If the name is undefined, then our styleguide will
// display an icon for the anonymous user.
},
},
}
</script>

4
webapp/components/AvatarMenu/AvatarMenu.spec.js
View File

@ -42,9 +42,9 @@ describe('AvatarMenu.vue', () => {
wrapper = Wrapper()
})
it('renders the HcAvatar component', () => {
it('renders the UserAvatar component', () => {
wrapper.find('.avatar-menu-trigger').trigger('click')
expect(wrapper.find('.ds-avatar').exists()).toBe(true)
expect(wrapper.find('.user-avatar').exists()).toBe(true)
})
describe('given a userName', () => {

6
webapp/components/AvatarMenu/AvatarMenu.vue
View File

@ -11,7 +11,7 @@
"
@click.prevent="toggleMenu"
>
<hc-avatar :user="user" />
<user-avatar :user="user" />
<base-icon class="dropdown-arrow" name="angle-down" />
</a>
</template>
@ -49,12 +49,12 @@
<script>
import { mapGetters } from 'vuex'
import Dropdown from '~/components/Dropdown'
import HcAvatar from '~/components/Avatar/Avatar.vue'
import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
export default {
components: {
Dropdown,
HcAvatar,
UserAvatar,
},
props: {
placement: { type: String, default: 'top-end' },

8
webapp/components/Comment/Comment.vue
View File

@ -12,13 +12,13 @@
<div v-else :class="{ comment: true, 'disabled-content': comment.deleted || comment.disabled }">
<ds-card :id="anchor" :class="{ 'comment--target': isTarget }">
<ds-space margin-bottom="small" margin-top="small">
<hc-user :user="author" :date-time="comment.createdAt">
<user-teaser :user="author" :date-time="comment.createdAt">
<template v-slot:dateTime>
<ds-text v-if="comment.createdAt !== comment.updatedAt">
({{ $t('comment.edited') }})
</ds-text>
</template>
</hc-user>
</user-teaser>
<client-only>
<content-menu
v-show="!openEditCommentMenu"
@ -61,7 +61,7 @@
<script>
import { mapGetters } from 'vuex'
import { COMMENT_MAX_UNTRUNCATED_LENGTH, COMMENT_TRUNCATE_TO_LENGTH } from '~/constants/comment'
import HcUser from '~/components/User/User'
import UserTeaser from '~/components/UserTeaser/UserTeaser'
import ContentMenu from '~/components/ContentMenu/ContentMenu'
import ContentViewer from '~/components/Editor/ContentViewer'
import HcCommentForm from '~/components/CommentForm/CommentForm'
@ -82,7 +82,7 @@ export default {
}
},
components: {
HcUser,
UserTeaser,
ContentMenu,
ContentViewer,
HcCommentForm,

6
webapp/components/ContributionForm/ContributionForm.vue
View File

@ -38,7 +38,7 @@
<ds-space />
<client-only>
<hc-user :user="currentUser" :trunc="35" />
<user-teaser :user="currentUser" />
</client-only>
<ds-space />
<ds-input
@ -122,14 +122,14 @@ import locales from '~/locales'
import PostMutations from '~/graphql/PostMutations.js'
import HcCategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
import HcTeaserImage from '~/components/TeaserImage/TeaserImage'
import HcUser from '~/components/User/User'
import UserTeaser from '~/components/UserTeaser/UserTeaser'
export default {
components: {
HcEditor,
HcCategoriesSelect,
HcTeaserImage,
HcUser,
UserTeaser,
},
props: {
contribution: { type: Object, default: () => {} },

6
webapp/components/Notification/Notification.vue
View File

@ -2,7 +2,7 @@
<ds-space :class="{ read: notification.read, notification: true }" margin-bottom="x-small">
<client-only>
<ds-space margin-bottom="x-small">
<hc-user :user="from.author" :date-time="from.createdAt" :trunc="35" />
<user-teaser :user="from.author" :date-time="from.createdAt" />
</ds-space>
<ds-text class="reason-text-for-test" color="soft">
{{ $t(`notifications.reason.${notification.reason}`) }}
@ -35,12 +35,12 @@
</template>
<script>
import HcUser from '~/components/User/User'
import UserTeaser from '~/components/UserTeaser/UserTeaser'
export default {
name: 'Notification',
components: {
HcUser,
UserTeaser,
},
props: {
notification: {

8
webapp/components/NotificationsTable/NotificationsTable.spec.js
View File

@ -89,8 +89,8 @@ describe('NotificationsTable.vue', () => {
})
it('renders the author', () => {
const username = firstRowNotification.find('.username')
expect(username.text()).toEqual(postNotification.from.author.name)
const userinfo = firstRowNotification.find('.user-teaser > .info')
expect(userinfo.text()).toContain(postNotification.from.author.name)
})
it('renders the reason for the notification', () => {
@ -122,8 +122,8 @@ describe('NotificationsTable.vue', () => {
})
it('renders the author', () => {
const username = secondRowNotification.find('.username')
expect(username.text()).toEqual(commentNotification.from.author.name)
const userinfo = secondRowNotification.find('.user-teaser > .info')
expect(userinfo.text()).toContain(commentNotification.from.author.name)
})
it('renders the reason for the notification', () => {

2
webapp/components/NotificationsTable/NotificationsTable.story.js
View File

@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions'
import NotificationsTable from '~/components/NotificationsTable/NotificationsTable'
import helpers from '~/storybook/helpers'
import { post } from '~/components/PostCard/PostCard.story.js'
import { user } from '~/components/User/User.story.js'
import { user } from '~/components/UserTeaser/UserTeaser.story.js'
helpers.init()
export const notifications = [

7
webapp/components/NotificationsTable/NotificationsTable.vue
View File

@ -15,10 +15,9 @@
<template #user="scope">
<ds-space margin-bottom="base">
<client-only>
<hc-user
<user-teaser
:user="scope.row.from.author"
:date-time="scope.row.from.createdAt"
:trunc="35"
:class="{ 'notification-status': scope.row.read }"
/>
</client-only>
@ -50,12 +49,12 @@
<hc-empty v-else icon="alert" :message="$t('notifications.empty')" />
</template>
<script>
import HcUser from '~/components/User/User'
import UserTeaser from '~/components/UserTeaser/UserTeaser'
import HcEmpty from '~/components/Empty/Empty'
export default {
components: {
HcUser,
UserTeaser,
HcEmpty,
},
props: {

14
webapp/components/PostCard/PostCard.vue
View File

@ -20,14 +20,14 @@
<!-- Username, Image & Date of Post -->
<div class="user-wrapper">
<client-only>
<hc-user :user="post.author" :trunc="35" :date-time="post.createdAt" />
<user-teaser :user="post.author" :date-time="post.createdAt" />
</client-only>
<hc-ribbon v-if="isPinned" class="ribbon--pinned" :text="$t('post.pinned')" />
<hc-ribbon v-else :text="$t('post.name')" />
</div>
<ds-space margin-bottom="small" />
<!-- Post Title -->
<ds-heading tag="h3" no-margin class="hyphenate-text">{{ post.title }}</ds-heading>
<ds-heading tag="h3" class="hyphenate-text post-title">{{ post.title }}</ds-heading>
<ds-space margin-bottom="small" />
<!-- Post Content Excerpt -->
<!-- eslint-disable vue/no-v-html -->
@ -78,7 +78,7 @@
</template>
<script>
import HcUser from '~/components/User/User'
import UserTeaser from '~/components/UserTeaser/UserTeaser'
import ContentMenu from '~/components/ContentMenu/ContentMenu'
import HcCategory from '~/components/Category'
import HcRibbon from '~/components/Ribbon'
@ -89,7 +89,7 @@ import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostH
export default {
name: 'HcPostCard',
components: {
HcUser,
UserTeaser,
HcCategory,
HcRibbon,
ContentMenu,
@ -186,7 +186,11 @@ export default {
height: 75px;
}
/* workaround to avoid jumping layout when hc-user is rendered */
.post-title {
margin-top: $space-large;
}
/* workaround to avoid jumping layout when user-teaser is rendered */
.user-wrapper {
height: 36px;
}

6
webapp/components/User/User.spec.js → webapp/components/UserTeaser/UserTeaser.spec.js
View File

@ -1,5 +1,5 @@
import { mount, RouterLinkStub } from '@vue/test-utils'
import User from './User.vue'
import UserTeaser from './UserTeaser.vue'
import Vuex from 'vuex'
const localVue = global.localVue
@ -7,7 +7,7 @@ const filter = jest.fn(str => str)
localVue.filter('truncate', filter)
describe('User', () => {
describe('UserTeaser', () => {
let propsData
let mocks
let stubs
@ -35,7 +35,7 @@ describe('User', () => {
const store = new Vuex.Store({
getters,
})
return mount(User, { store, propsData, mocks, stubs, localVue })
return mount(UserTeaser, { store, propsData, mocks, stubs, localVue })
}
it('renders anonymous user', () => {

26
webapp/components/User/User.story.js → webapp/components/UserTeaser/UserTeaser.story.js
View File

@ -1,6 +1,6 @@
import { storiesOf } from '@storybook/vue'
import { withA11y } from '@storybook/addon-a11y'
import User from '~/components/User/User.vue'
import UserTeaser from '~/components/UserTeaser/UserTeaser.vue'
import helpers from '~/storybook/helpers'
helpers.init()
@ -53,25 +53,33 @@ export const user = {
socialMedia: [],
}
storiesOf('User', module)
storiesOf('UserTeaser', module)
.addDecorator(withA11y)
.addDecorator(helpers.layout)
.add('available', () => ({
components: { User },
.add('user only', () => ({
components: { UserTeaser },
store: helpers.store,
data: () => ({
user,
}),
template: '<user :user="user" :trunc="35" :date-time="new Date()" />',
template: '<user-teaser :user="user" />',
}))
.add('with Date', () => ({
components: { UserTeaser },
store: helpers.store,
data: () => ({
user,
}),
template: '<user-teaser :user="user" :date-time="new Date()" />',
}))
.add('has edited something', () => ({
components: { User },
components: { UserTeaser },
store: helpers.store,
data: () => ({
user,
}),
template: `
<user :user="user" :trunc="35" :date-time="new Date()">
<user-teaser :user="user" :date-time="new Date()">
<template v-slot:dateTime>
- HEY! I'm edited
</template>
@ -79,10 +87,10 @@ storiesOf('User', module)
`,
}))
.add('anonymous', () => ({
components: { User },
components: { UserTeaser },
store: helpers.store,
data: () => ({
user: null,
}),
template: '<user :user="user" :trunc="35" :date-time="new Date()" />',
template: '<user-teaser :user="user" :date-time="new Date()" />',
}))

126
webapp/components/User/User.vue → webapp/components/UserTeaser/UserTeaser.vue
View File

@ -1,32 +1,37 @@
<template>
<div class="user" v-if="displayAnonymous">
<hc-avatar v-if="showAvatar" class="avatar" />
<div>
<b class="username">{{ $t('profile.userAnonym') }}</b>
</div>
<div class="user-teaser" v-if="displayAnonymous">
<user-avatar v-if="showAvatar" />
<span class="info anonymous">{{ $t('profile.userAnonym') }}</span>
</div>
<dropdown v-else :class="{ 'disabled-content': user.disabled }" placement="top-start" offset="0">
<template slot="default" slot-scope="{ openMenu, closeMenu, isOpen }">
<nuxt-link :to="userLink" :class="['user', isOpen && 'active']">
<div @mouseover="showPopover ? openMenu(true) : () => {}" @mouseleave="closeMenu(true)">
<hc-avatar v-if="showAvatar" class="avatar" :user="user" />
<div>
<ds-text class="userinfo">
<b>{{ userSlug }}</b>
</ds-text>
</div>
<ds-text class="username" align="left" size="small" color="soft">
{{ userName | truncate(18) }}
<template v-if="dateTime">
<base-icon name="clock" />
<hc-relative-date-time :date-time="dateTime" />
<slot name="dateTime"></slot>
</template>
</ds-text>
<dropdown
v-else
:class="[{ 'disabled-content': user.disabled }]"
placement="top-start"
offset="0"
>
<template #default="{ openMenu, closeMenu, isOpen }">
<nuxt-link
:to="userLink"
:class="['user-teaser', isOpen && 'active']"
@mouseover.native="showPopover ? openMenu(true) : () => {}"
@mouseleave.native="closeMenu(true)"
>
<user-avatar v-if="showAvatar" :user="user" size="small" />
<div class="info">
<span class="text">
<span class="slug">{{ userSlug }}</span>
<span v-if="dateTime">{{ userName }}</span>
</span>
<span v-if="dateTime" class="text">
<base-icon name="clock" />
<hc-relative-date-time :date-time="dateTime" />
<slot name="dateTime"></slot>
</span>
<span v-else class="text">{{ userName }}</span>
</div>
</nuxt-link>
</template>
<template slot="popover" v-if="showPopover">
<template #popover v-if="showPopover">
<div style="min-width: 250px">
<hc-badges v-if="user.badges && user.badges.length" :badges="user.badges" />
<ds-text
@ -77,7 +82,6 @@
/>
</ds-flex-item>
</ds-flex>
<!--<ds-space margin-bottom="x-small" />-->
</div>
</template>
</dropdown>
@ -89,22 +93,21 @@ import { mapGetters } from 'vuex'
import HcRelativeDateTime from '~/components/RelativeDateTime'
import HcFollowButton from '~/components/FollowButton'
import HcBadges from '~/components/Badges'
import HcAvatar from '~/components/Avatar/Avatar.vue'
import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
import Dropdown from '~/components/Dropdown'
export default {
name: 'HcUser',
name: 'UserTeaser',
components: {
HcRelativeDateTime,
HcFollowButton,
HcAvatar,
UserAvatar,
HcBadges,
Dropdown,
},
props: {
user: { type: Object, default: null },
showAvatar: { type: Boolean, default: true },
trunc: { type: Number, default: 18 }, // "-1" is no trunc
dateTime: { type: [Date, String], default: null },
showPopover: { type: Boolean, default: true },
},
@ -147,38 +150,51 @@ export default {
}
</script>
<style scoped lang="scss">
.avatar {
float: left;
margin-right: 4px;
height: 100%;
vertical-align: middle;
<style lang="scss">
.trigger {
max-width: 100%;
}
.userinfo {
.user-teaser {
display: flex;
align-items: center;
> .ds-text {
display: flex;
align-items: center;
margin-left: $space-xx-small;
}
}
.user {
white-space: nowrap;
flex-wrap: nowrap;
z-index: $z-index-post-card-link;
position: relative;
display: flex;
align-items: center;
&:hover,
&.active {
z-index: 999;
> .user-avatar {
flex-shrink: 0;
}
}
.user-slug {
margin-bottom: $space-xx-small;
> .info {
display: flex;
flex-direction: column;
justify-content: center;
padding-left: $space-xx-small;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: $text-color-soft;
font-size: $font-size-small;
&.anonymous {
font-size: $font-size-base;
}
.slug {
color: $color-primary;
font-size: $font-size-base;
}
}
.text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
> .ds-text {
display: inline;
}
}
}
</style>

99
webapp/components/_new/generic/UserAvatar/UserAvatar.spec.js Normal file
View File

@ -0,0 +1,99 @@
import { mount } from '@vue/test-utils'
import UserAvatar from './UserAvatar.vue'
import BaseIcon from '~/components/_new/generic/BaseIcon/BaseIcon'
const localVue = global.localVue
describe('UserAvatar.vue', () => {
let propsData, wrapper
beforeEach(() => {
propsData = {}
wrapper = Wrapper()
})
const Wrapper = () => {
return mount(UserAvatar, { propsData, localVue })
}
it('renders no image', () => {
expect(wrapper.find('img').exists()).toBe(false)
})
it('renders an icon', () => {
expect(wrapper.find(BaseIcon).exists()).toBe(true)
})
describe('given a user', () => {
describe('with no image', () => {
beforeEach(() => {
propsData = {
user: {
name: 'Matt Rider',
},
}
wrapper = Wrapper()
})
describe('no user name', () => {
it('renders an icon', () => {
propsData = { user: { name: null } }
wrapper = Wrapper()
expect(wrapper.find(BaseIcon).exists()).toBe(true)
})
})
describe("user name is 'Anonymous'", () => {
it('renders an icon', () => {
propsData = { user: { name: 'Anonymous' } }
wrapper = Wrapper()
expect(wrapper.find(BaseIcon).exists()).toBe(true)
})
})
it('displays user initials', () => {
expect(wrapper.find('.initials').text()).toEqual('MR')
})
it('displays no more than 3 initials', () => {
propsData = { user: { name: 'Ana Paula Nunes Marques' } }
wrapper = Wrapper()
expect(wrapper.find('.initials').text()).toEqual('APN')
})
})
describe('with a relative avatar url', () => {
beforeEach(() => {
propsData = {
user: {
name: 'Not Anonymous',
avatar: '/avatar.jpg',
},
}
wrapper = Wrapper()
})
it('adds a prefix to load the image from the uploads service', () => {
expect(wrapper.find('.image').attributes('src')).toBe('/api/avatar.jpg')
})
})
describe('with an absolute avatar url', () => {
beforeEach(() => {
propsData = {
user: {
name: 'Not Anonymous',
avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/sawalazar/128.jpg',
},
}
wrapper = Wrapper()
})
it('keeps the avatar URL as is', () => {
// e.g. our seeds have absolute image URLs
expect(wrapper.find('.image').attributes('src')).toBe(
'https://s3.amazonaws.com/uifaces/faces/twitter/sawalazar/128.jpg',
)
})
})
})
})

57
webapp/components/_new/generic/UserAvatar/UserAvatar.story.js Normal file
View File

@ -0,0 +1,57 @@
import { storiesOf } from '@storybook/vue'
import { withA11y } from '@storybook/addon-a11y'
import StoryRouter from 'storybook-vue-router'
import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
import helpers from '~/storybook/helpers'
import { user } from '~/components/UserTeaser/UserTeaser.story.js'
helpers.init()
const anonymousUser = {
...user,
name: 'Anonymous',
avatar: null,
}
const userWithoutAvatar = {
...user,
avatar: null,
name: 'Ana Paula Nunes Marques',
}
storiesOf('UserAvatar', module)
.addDecorator(withA11y)
.addDecorator(helpers.layout)
.addDecorator(StoryRouter())
.add('with image', () => ({
components: { UserAvatar },
data: () => ({
user,
}),
template: '<user-avatar :user="user" />',
}))
.add('without image, anonymous user', () => ({
components: { UserAvatar },
data: () => ({
user: anonymousUser,
}),
template: '<user-avatar :user="user" />',
}))
.add('without image, user initials', () => ({
components: { UserAvatar },
data: () => ({
user: userWithoutAvatar,
}),
template: '<user-avatar :user="user" />',
}))
.add('small', () => ({
components: { UserAvatar },
data: () => ({
user,
}),
template: '<user-avatar :user="user" size="small"/>',
}))
.add('large', () => ({
components: { UserAvatar },
data: () => ({
user,
}),
template: '<user-avatar :user="user" size="large"/>',
}))

84
webapp/components/_new/generic/UserAvatar/UserAvatar.vue Normal file
View File

@ -0,0 +1,84 @@
<template>
<div :class="['user-avatar', size && `--${this.size}`]">
<span class="initials">{{ userInitials }}</span>
<base-icon v-if="isAnonymous" name="eye-slash" />
<img
v-else
:src="user.avatar | proxyApiUrl"
class="image"
@error="event.target.style.display = 'none'"
/>
</div>
</template>
<script>
export default {
name: 'UserAvatar',
props: {
size: {
type: String,
required: false,
validator: value => {
return value.match(/(small|large)/)
},
},
user: {
type: Object,
default: null,
},
},
computed: {
isAnonymous() {
return !this.user || !this.user.name || this.user.name.toLowerCase() === 'anonymous'
},
userInitials() {
if (this.isAnonymous) return ''
return this.user.name
.match(/\b\w/g)
.join('')
.substring(0, 3)
.toUpperCase()
},
},
}
</script>
<style lang="scss">
.user-avatar {
position: relative;
height: $size-avatar-base;
width: $size-avatar-base;
border-radius: 50%;
overflow: hidden;
background-color: $color-primary-dark;
color: $text-color-primary-inverse;
&.--small {
width: $size-avatar-small;
height: $size-avatar-small;
}
&.--large {
width: $size-avatar-large;
height: $size-avatar-large;
font-size: $font-size-xx-large;
}
> .initials,
> .base-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
> .image {
position: relative;
z-index: 5;
width: 100%;
object-fit: cover;
object-position: center;
}
}
</style>

7
webapp/components/features/FiledReportsTable/FiledReportsTable.vue
View File

@ -7,11 +7,10 @@
condensed
>
<template #submitter="scope">
<hc-user
<user-teaser
:user="scope.row.submitter"
:showAvatar="false"
:showPopover="false"
:trunc="30"
data-test="filing-user"
/>
</template>
@ -29,12 +28,12 @@
</ds-table>
</template>
<script>
import HcUser from '~/components/User/User'
import UserTeaser from '~/components/UserTeaser/UserTeaser'
import HcRelativeDateTime from '~/components/RelativeDateTime'
export default {
components: {
HcUser,
UserTeaser,
HcRelativeDateTime,
},
props: {

2
webapp/components/features/ReportList/ReportList.story.js
View File

@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/vue'
import { withA11y } from '@storybook/addon-a11y'
import { action } from '@storybook/addon-actions'
import { post } from '~/components/PostCard/PostCard.story.js'
import { user } from '~/components/User/User.story.js'
import { user } from '~/components/UserTeaser/UserTeaser.story.js'
import helpers from '~/storybook/helpers'
import ReportList from './ReportList'
import DropdownFilter from '~/components/DropdownFilter/DropdownFilter'

16
webapp/components/features/ReportRow/ReportRow.vue
View File

@ -19,7 +19,7 @@
<!-- Content Column -->
<td class="ds-table-col" data-test="report-content">
<client-only v-if="isUser">
<hc-user :user="report.resource" :showAvatar="false" :trunc="30" :showPopover="false" />
<user-teaser :user="report.resource" :showAvatar="false" :showPopover="false" />
</client-only>
<nuxt-link v-else class="title" :to="linkTarget">
{{ linkText | truncate(50) }}
@ -29,12 +29,7 @@
<!-- Author Column -->
<td class="ds-table-col" data-test="report-author">
<client-only v-if="!isUser">
<hc-user
:user="report.resource.author"
:showAvatar="false"
:trunc="30"
:showPopover="false"
/>
<user-teaser :user="report.resource.author" :showAvatar="false" :showPopover="false" />
</client-only>
<span v-else>—</span>
</td>
@ -46,10 +41,9 @@
{{ statusText }}
</span>
<client-only v-if="isReviewed">
<hc-user
<user-teaser
:user="moderatorOfLatestReview"
:showAvatar="false"
:trunc="30"
:date-time="report.updatedAt"
:showPopover="false"
/>
@ -85,12 +79,12 @@
<script>
import FiledReportsTable from '~/components/features/FiledReportsTable/FiledReportsTable'
import HcUser from '~/components/User/User'
import UserTeaser from '~/components/UserTeaser/UserTeaser'
export default {
components: {
FiledReportsTable,
HcUser,
UserTeaser,
},
props: {
report: {

4
webapp/components/generic/SearchableInput/SearchableInput.spec.js
View File

@ -97,8 +97,8 @@ describe('SearchableInput.vue', () => {
it("pushes to user's profile", async () => {
select.element.value = 'Bob'
select.trigger('input')
const users = wrapper.findAll('.userinfo')
const bob = users.filter(item => item.text() === '@bob-der-baumeister')
const users = wrapper.findAll('.slug')
const bob = users.filter(item => item.text().match(/@bob-der-baumeister/))
bob.trigger('click')
await Vue.nextTick()
expect(mocks.$router.push).toHaveBeenCalledWith({

6
webapp/components/generic/SearchableInput/SearchableInput.vue
View File

@ -27,7 +27,7 @@
v-if="option.__typename === 'User'"
:class="{ 'option-with-heading': isFirstOfType(option) }"
>
<hc-user :user="option" :showPopover="false" />
<user-teaser :user="option" :showPopover="false" />
</p>
<p
v-if="option.__typename === 'Post'"
@ -45,14 +45,14 @@
import { isEmpty } from 'lodash'
import SearchHeading from '~/components/generic/SearchHeading/SearchHeading.vue'
import SearchPost from '~/components/generic/SearchPost/SearchPost.vue'
import HcUser from '~/components/User/User.vue'
import UserTeaser from '~/components/UserTeaser/UserTeaser.vue'
export default {
name: 'SearchableInput',
components: {
SearchHeading,
SearchPost,
HcUser,
UserTeaser,
},
props: {
id: { type: String },

8
webapp/pages/post/_id/_slug/index.vue
View File

@ -19,11 +19,11 @@
@click="blurred = !blurred"
/>
</aside>
<hc-user :user="post.author" :date-time="post.createdAt">
<user-teaser :user="post.author" :date-time="post.createdAt">
<template v-slot:dateTime>
<ds-text v-if="post.createdAt !== post.updatedAt">({{ $t('post.edited') }})</ds-text>
</template>
</hc-user>
</user-teaser>
<client-only>
<content-menu
placement="bottom-end"
@ -101,7 +101,7 @@ import ContentViewer from '~/components/Editor/ContentViewer'
import HcCategory from '~/components/Category'
import HcHashtag from '~/components/Hashtag/Hashtag'
import ContentMenu from '~/components/ContentMenu/ContentMenu'
import HcUser from '~/components/User/User'
import UserTeaser from '~/components/UserTeaser/UserTeaser'
import HcShoutButton from '~/components/ShoutButton.vue'
import HcCommentForm from '~/components/CommentForm/CommentForm'
import HcCommentList from '~/components/CommentList/CommentList'
@ -119,7 +119,7 @@ export default {
components: {
HcCategory,
HcHashtag,
HcUser,
UserTeaser,
HcShoutButton,
ContentMenu,
HcCommentForm,

23
webapp/pages/profile/_id/_slug.vue
View File

@ -11,9 +11,9 @@
style="position: relative; height: auto;"
>
<hc-upload v-if="myProfile" :user="user">
<hc-avatar :user="user" class="profile-avatar" size="x-large"></hc-avatar>
<user-avatar :user="user" class="profile-avatar" size="large"></user-avatar>
</hc-upload>
<hc-avatar v-else :user="user" class="profile-avatar" size="x-large" />
<user-avatar v-else :user="user" class="profile-avatar" size="large" />
<!-- Menu -->
<client-only>
<content-menu
@ -99,7 +99,7 @@
<ds-space v-for="follow in uniq(user.following)" :key="follow.id" margin="x-small">
<!-- TODO: find better solution for rendering errors -->
<client-only>
<user :user="follow" :trunc="15" />
<user-teaser :user="follow" />
</client-only>
</ds-space>
<ds-space v-if="user.followingCount - user.following.length" margin="small">
@ -129,7 +129,7 @@
<ds-space v-for="follow in uniq(user.followedBy)" :key="follow.id" margin="x-small">
<!-- TODO: find better solution for rendering errors -->
<client-only>
<user :user="follow" :trunc="15" />
<user-teaser :user="follow" />
</client-only>
</ds-space>
<ds-space v-if="user.followedByCount - user.followedBy.length" margin="small">
@ -157,7 +157,7 @@
<template>
<ds-space v-for="link in socialMediaLinks" :key="link.username" margin="x-small">
<a :href="link.url" target="_blank">
<ds-avatar :image="link.favicon" />
<user-avatar :image="link.favicon" />
{{ link.username }}
</a>
</ds-space>
@ -271,7 +271,7 @@
<script>
import uniqBy from 'lodash/uniqBy'
import User from '~/components/User/User'
import UserTeaser from '~/components/UserTeaser/UserTeaser'
import HcPostCard from '~/components/PostCard/PostCard.vue'
import HcFollowButton from '~/components/FollowButton.vue'
import HcCountTo from '~/components/CountTo.vue'
@ -279,7 +279,7 @@ import HcBadges from '~/components/Badges.vue'
import HcEmpty from '~/components/Empty/Empty'
import ContentMenu from '~/components/ContentMenu/ContentMenu'
import HcUpload from '~/components/Upload'
import HcAvatar from '~/components/Avatar/Avatar.vue'
import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
import { profilePagePosts } from '~/graphql/PostQuery'
@ -297,15 +297,14 @@ const tabToFilterMapping = ({ tab, id }) => {
}
export default {
name: 'HcUserProfile',
components: {
User,
UserTeaser,
HcPostCard,
HcFollowButton,
HcCountTo,
HcBadges,
HcEmpty,
HcAvatar,
UserAvatar,
ContentMenu,
HcUpload,
MasonryGrid,
@ -525,11 +524,9 @@ export default {
}
}
}
.profile-avatar.ds-avatar {
display: block;
.profile-avatar.user-avatar {
margin: auto;
margin-top: -60px;
border: #fff 5px solid;
}
.page-name-profile-id-slug {
.ds-flex-item:first-child .content-menu {

6
webapp/pages/settings/muted-users.vue
View File

@ -24,7 +24,7 @@
params: { id: scope.row.id, slug: scope.row.slug },
}"
>
<hc-avatar :user="scope.row" size="small" />
<user-avatar :user="scope.row" size="small" />
</nuxt-link>
</template>
<template slot="name" slot-scope="scope">
@ -70,11 +70,11 @@
<script>
import { mutedUsers, unmuteUser } from '~/graphql/settings/MutedUsers'
import HcAvatar from '~/components/Avatar/Avatar.vue'
import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
export default {
components: {
HcAvatar,
UserAvatar,
},
data() {
return {