AkkomaGang/akkoma-fe
5
13
Fork 64
Code Issues 81 Pull requests 19 Projects Releases 1 Wiki Activity

Merge branch '420-redo-user-card-content' into 'develop'

Browse source 
Re-do UserCardContent Component CSS

Closes #420

See merge request pleroma/pleroma-fe!642
This commit is contained in:
Shpuld Shpludson 2019-03-07 16:38:45 +00:00
commit 09736691ea
16 changed files with 78 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import UserCardContent from '../user_card_content/user_card_content.vue' import UserCard from '../user_card/user_card.vue'
import UserAvatar from '../user_avatar/user_avatar.vue' import UserAvatar from '../user_avatar/user_avatar.vue'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@ -12,7 +12,7 @@ const BasicUserCard = {
} }
}, },
components: { components: {
UserCardContent, UserCard,
UserAvatar UserAvatar
}, },
methods: { methods: {

33
src/components/basic_user_card/basic_user_card.vue
View file

@ -1,18 +1,18 @@
<template> <template>
<div class="user-card"> <div class="basic-user-card">
<router-link :to="userProfileLink(user)"> <router-link :to="userProfileLink(user)">
<UserAvatar class="avatar" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/> <UserAvatar class="avatar" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
</router-link> </router-link>
<div class="user-card-expanded-content" v-if="userExpanded"> <div class="basic-user-card-expanded-content" v-if="userExpanded">
<user-card-content :user="user" :switcher="false"></user-card-content> <UserCard :user="user" :rounded="true" :bordered="true"/>
</div> </div>
<div class="user-card-collapsed-content" v-else> <div class="basic-user-card-collapsed-content" v-else>
<div :title="user.name" class="user-card-user-name"> <div :title="user.name" class="basic-user-card-user-name">
<span v-if="user.name_html" v-html="user.name_html"></span> <span v-if="user.name_html" v-html="user.name_html"></span>
<span v-else>{{ user.name }}</span> <span v-else>{{ user.name }}</span>
</div> </div>
<div> <div>
<router-link class="user-card-screen-name" :to="userProfileLink(user)"> <router-link class="basic-user-card-screen-name" :to="userProfileLink(user)">
@{{user.screen_name}} @{{user.screen_name}}
</router-link> </router-link>
</div> </div>
@ -26,15 +26,15 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.user-card { .basic-user-card {
display: flex; display: flex;
flex: 1 0; flex: 1 0;
margin: 0;
padding-top: 0.6em; padding-top: 0.6em;
padding-right: 1em; padding-right: 1em;
padding-bottom: 0.6em; padding-bottom: 0.6em;
padding-left: 1em; padding-left: 1em;
border-bottom: 1px solid; border-bottom: 1px solid;
margin: 0;
border-bottom-color: $fallback--border; border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border); border-bottom-color: var(--border, $fallback--border);
@ -57,23 +57,6 @@
&-expanded-content { &-expanded-content {
flex: 1; flex: 1;
margin-left: 0.7em; margin-left: 0.7em;
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
border-style: solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
border-width: 1px;
overflow: hidden;
.panel-heading {
background: transparent;
flex-direction: column;
align-items: stretch;
}
p {
margin-bottom: 0;
}
} }
} }
</style> </style>

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

@ -1,6 +1,6 @@
import Status from '../status/status.vue' import Status from '../status/status.vue'
import UserAvatar from '../user_avatar/user_avatar.vue' import UserAvatar from '../user_avatar/user_avatar.vue'
import UserCardContent from '../user_card_content/user_card_content.vue' import UserCard from '../user_card/user_card.vue'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@ -13,7 +13,7 @@ const Notification = {
}, },
props: [ 'notification' ], props: [ 'notification' ],
components: { components: {
Status, UserAvatar, UserCardContent Status, UserAvatar, UserCard
}, },
methods: { methods: {
toggleUserExpanded () { toggleUserExpanded () {

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

@ -5,9 +5,7 @@
<UserAvatar :compact="true" :betterShadow="betterShadow" :src="notification.action.user.profile_image_url_original"/> <UserAvatar :compact="true" :betterShadow="betterShadow" :src="notification.action.user.profile_image_url_original"/>
</a> </a>
<div class='notification-right'> <div class='notification-right'>
<div class="usercard notification-usercard" v-if="userExpanded"> <UserCard :user="notification.action.user" :rounded="true" :bordered="true" v-if="userExpanded"/>
<user-card-content :user="notification.action.user" :switcher="false"></user-card-content>
</div>
<span class="notification-details"> <span class="notification-details">
<div class="name-and-action"> <div class="name-and-action">
<span class="username" v-if="!!notification.action.user.name_html" :title="'@'+notification.action.user.screen_name" v-html="notification.action.user.name_html"></span> <span class="username" v-if="!!notification.action.user.name_html" :title="'@'+notification.action.user.screen_name" v-html="notification.action.user.name_html"></span>

4
src/components/notifications/notifications.scss
View file

@ -45,10 +45,6 @@
} }
} }
.notification-usercard {
margin: 0;
}
.non-mention { .non-mention {
display: flex; display: flex;
flex: 1; flex: 1;

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

@ -1,4 +1,4 @@
import UserCardContent from '../user_card_content/user_card_content.vue' import UserCard from '../user_card/user_card.vue'
import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils' import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
// TODO: separate touch gesture stuff into their own utils if more components want them // TODO: separate touch gesture stuff into their own utils if more components want them
@ -12,7 +12,7 @@ const SideDrawer = {
closed: true, closed: true,
touchCoord: [0, 0] touchCoord: [0, 0]
}), }),
components: { UserCardContent }, components: { UserCard },
computed: { computed: {
currentUser () { currentUser () {
return this.$store.state.users.currentUser return this.$store.state.users.currentUser

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

@ -8,7 +8,7 @@
@touchmove="touchMove" @touchmove="touchMove"
> >
<div class="side-drawer-heading" @click="toggleDrawer"> <div class="side-drawer-heading" @click="toggleDrawer">
<user-card-content :user="currentUser" :switcher="false" :hideBio="true" v-if="currentUser"/> <UserCard :user="currentUser" :hideBio="true" v-if="currentUser"/>
<div class="side-drawer-logo-wrapper" v-else> <div class="side-drawer-logo-wrapper" v-else>
<img :src="logo"/> <img :src="logo"/>
<span>{{sitename}}</span> <span>{{sitename}}</span>
@ -181,15 +181,6 @@
display: flex; display: flex;
padding: 0; padding: 0;
margin: 0; margin: 0;
.profile-panel-background {
border-radius: 0;
.panel-heading {
background: transparent;
flex-direction: column;
align-items: stretch;
}
}
} }
.side-drawer ul { .side-drawer ul {

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

@ -3,7 +3,7 @@ import FavoriteButton from '../favorite_button/favorite_button.vue'
import RetweetButton from '../retweet_button/retweet_button.vue' import RetweetButton from '../retweet_button/retweet_button.vue'
import DeleteButton from '../delete_button/delete_button.vue' import DeleteButton from '../delete_button/delete_button.vue'
import PostStatusForm from '../post_status_form/post_status_form.vue' import PostStatusForm from '../post_status_form/post_status_form.vue'
import UserCardContent from '../user_card_content/user_card_content.vue' import UserCard from '../user_card/user_card.vue'
import UserAvatar from '../user_avatar/user_avatar.vue' import UserAvatar from '../user_avatar/user_avatar.vue'
import Gallery from '../gallery/gallery.vue' import Gallery from '../gallery/gallery.vue'
import LinkPreview from '../link-preview/link-preview.vue' import LinkPreview from '../link-preview/link-preview.vue'
@ -259,7 +259,7 @@ const Status = {
RetweetButton, RetweetButton,
DeleteButton, DeleteButton,
PostStatusForm, PostStatusForm,
UserCardContent, UserCard,
UserAvatar, UserAvatar,
Gallery, Gallery,
LinkPreview LinkPreview

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

@ -31,9 +31,7 @@
</router-link> </router-link>
</div> </div>
<div class="status-body"> <div class="status-body">
<div class="usercard" v-if="userExpanded"> <UserCard :user="status.user" :rounded="true" :bordered="true" class="status-usercard" v-if="userExpanded"/>
<user-card-content :user="status.user" :switcher="false"></user-card-content>
</div>
<div v-if="!noHeading" class="media-heading"> <div v-if="!noHeading" class="media-heading">
<div class="heading-name-row"> <div class="heading-name-row">
<div class="name-and-account-name"> <div class="name-and-account-name">
@ -248,8 +246,7 @@ $status-margin: 0.75em;
padding: 0; padding: 0;
} }
.usercard { .status-usercard {
margin: 0;
margin-bottom: $status-margin; margin-bottom: $status-margin;
} }

11
src/components/user_card_content/user_card_content.js → src/components/user_card/user_card.js
View file

@ -4,7 +4,7 @@ import { requestFollow, requestUnfollow } from '../../services/follow_manipulate
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
export default { export default {
props: [ 'user', 'switcher', 'selected', 'hideBio' ], props: [ 'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered' ],
data () { data () {
return { return {
followRequestInProgress: false, followRequestInProgress: false,
@ -16,7 +16,14 @@ export default {
} }
}, },
computed: { computed: {
headingStyle () { classes () {
return [{
'user-card-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
'user-card-rounded': this.rounded === true, // set border-radius for all sides
'user-card-bordered': this.bordered === true // set border for all sides
}]
},
style () {
const color = this.$store.state.config.customTheme.colors const color = this.$store.state.config.customTheme.colors
? this.$store.state.config.customTheme.colors.bg // v2 ? this.$store.state.config.customTheme.colors.bg // v2
: this.$store.state.config.colors.bg // v1 : this.$store.state.config.colors.bg // v1

74
src/components/user_card_content/user_card_content.vue → src/components/user_card/user_card.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div id="heading" class="profile-panel-background" :style="headingStyle"> <div class="user-card" :class="classes" :style="style">
<div class="panel-heading text-center"> <div class="panel-heading">
<div class='user-info'> <div class='user-info'>
<div class='container'> <div class='container'>
<router-link :to="userProfileLink(user)"> <router-link :to="userProfileLink(user)">
@ -108,7 +108,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="panel-body profile-panel-body" v-if="!hideBio"> <div class="panel-body" v-if="!hideBio">
<div v-if="!hideUserStatsLocal && switcher" class="user-counts"> <div v-if="!hideUserStatsLocal && switcher" class="user-counts">
<div class="user-count" v-on:click.prevent="setProfileView('statuses')"> <div class="user-count" v-on:click.prevent="setProfileView('statuses')">
<h5>{{ $t('user_card.statuses') }}</h5> <h5>{{ $t('user_card.statuses') }}</h5>
@ -123,41 +123,64 @@
<span>{{user.followers_count}}</span> <span>{{user.followers_count}}</span>
</div> </div>
</div> </div>
<p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="profile-bio" v-html="user.description_html"></p> <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="user-card-bio" v-html="user.description_html"></p>
<p v-else-if="!hideBio" class="profile-bio">{{ user.description }}</p> <p v-else-if="!hideBio" class="user-card-bio">{{ user.description }}</p>
</div> </div>
</div> </div>
</template> </template>
<script src="./user_card_content.js"></script> <script src="./user_card.js"></script>
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.profile-panel-background { .user-card {
background-size: cover; background-size: cover;
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
overflow: hidden; overflow: hidden;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
.panel-heading { .panel-heading {
padding: .5em 0; padding: .5em 0;
text-align: center; text-align: center;
box-shadow: none; box-shadow: none;
} background: transparent;
flex-direction: column;
align-items: stretch;
} }
.profile-panel-body { .panel-body {
word-wrap: break-word; word-wrap: break-word;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%);
}
.profile-bio { p {
margin-bottom: 0;
}
&-bio {
text-align: center; text-align: center;
} }
// Modifiers
&-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);
}
&-rounded {
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
}
&-bordered {
border-width: 1px;
border-style: solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
}
} }
.user-info { .user-info {
@ -393,25 +416,4 @@
text-decoration: none; text-decoration: none;
} }
} }
.usercard {
width: fill-available;
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
border-style: solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
border-width: 1px;
overflow: hidden;
.panel-heading {
background: transparent;
flex-direction: column;
align-items: stretch;
}
p {
margin-bottom: 0;
}
}
</style> </style>

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

@ -1,6 +1,6 @@
import LoginForm from '../login_form/login_form.vue' import LoginForm from '../login_form/login_form.vue'
import PostStatusForm from '../post_status_form/post_status_form.vue' import PostStatusForm from '../post_status_form/post_status_form.vue'
import UserCardContent from '../user_card_content/user_card_content.vue' import UserCard from '../user_card/user_card.vue'
const UserPanel = { const UserPanel = {
computed: { computed: {
@ -9,7 +9,7 @@ const UserPanel = {
components: { components: {
LoginForm, LoginForm,
PostStatusForm, PostStatusForm,
UserCardContent UserCard
} }
} }

12
src/components/user_panel/user_panel.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="user-panel"> <div class="user-panel">
<div v-if='user' class="panel panel-default" style="overflow: visible;"> <div v-if='user' class="panel panel-default" style="overflow: visible;">
<user-card-content :user="user" :switcher="false" :hideBio="true"></user-card-content> <UserCard :user="user" :hideBio="true" rounded="top"/>
<div class="panel-footer"> <div class="panel-footer">
<post-status-form v-if='user'></post-status-form> <post-status-form v-if='user'></post-status-form>
</div> </div>
@ -11,13 +11,3 @@
</template> </template>
<script src="./user_panel.js"></script> <script src="./user_panel.js"></script>
<style lang="scss">
.user-panel {
.profile-panel-background .panel-heading {
background: transparent;
flex-direction: column;
align-items: stretch;
}
}
</style>

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

@ -1,6 +1,6 @@
import { compose } from 'vue-compose' import { compose } from 'vue-compose'
import get from 'lodash/get' import get from 'lodash/get'
import UserCardContent from '../user_card_content/user_card_content.vue' import UserCard from '../user_card/user_card.vue'
import FollowCard from '../follow_card/follow_card.vue' import FollowCard from '../follow_card/follow_card.vue'
import Timeline from '../timeline/timeline.vue' import Timeline from '../timeline/timeline.vue'
import withLoadMore from '../../hocs/with_load_more/with_load_more' import withLoadMore from '../../hocs/with_load_more/with_load_more'
@ -147,7 +147,7 @@ const UserProfile = {
} }
}, },
components: { components: {
UserCardContent, UserCard,
Timeline, Timeline,
FollowerList, FollowerList,
FriendList FriendList

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

@ -1,11 +1,7 @@
<template> <template>
<div> <div>
<div v-if="user.id" class="user-profile panel panel-default"> <div v-if="user.id" class="user-profile panel panel-default">
<user-card-content <UserCard :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/>
:user="user"
:switcher="true"
:selected="timeline.viewing"
/>
<tab-switcher :renderOnlyFocused="true" ref="tabSwitcher"> <tab-switcher :renderOnlyFocused="true" ref="tabSwitcher">
<Timeline <Timeline
:label="$t('user_card.statuses')" :label="$t('user_card.statuses')"
@ -64,11 +60,6 @@
flex: 2; flex: 2;
flex-basis: 500px; flex-basis: 500px;
.profile-panel-background .panel-heading {
background: transparent;
flex-direction: column;
align-items: stretch;
}
.userlist-placeholder { .userlist-placeholder {
display: flex; display: flex;
justify-content: center; justify-content: center;

4
test/unit/specs/boot/routes.spec.js
View file

@ -24,7 +24,7 @@ describe('routes', () => {
const matchedComponents = router.getMatchedComponents() const matchedComponents = router.getMatchedComponents()
expect(matchedComponents[0].components.hasOwnProperty('UserCardContent')).to.eql(true) expect(matchedComponents[0].components.hasOwnProperty('UserCard')).to.eql(true)
}) })
it('user\'s profile at /users', () => { it('user\'s profile at /users', () => {
@ -32,6 +32,6 @@ describe('routes', () => {
const matchedComponents = router.getMatchedComponents() const matchedComponents = router.getMatchedComponents()
expect(matchedComponents[0].components.hasOwnProperty('UserCardContent')).to.eql(true) expect(matchedComponents[0].components.hasOwnProperty('UserCard')).to.eql(true)
}) })
}) })