User Card Content fixes and updates

This commit is contained in:
HJ 2018-12-26 09:19:25 +00:00 committed by Shpuld Shpludson
parent 0ad837846a
commit fa8ecb1c39
3 changed files with 109 additions and 56 deletions

View file

@ -2,22 +2,25 @@
<div id="heading" class="profile-panel-background" :style="headingStyle"> <div id="heading" class="profile-panel-background" :style="headingStyle">
<div class="panel-heading text-center"> <div class="panel-heading text-center">
<div class='user-info'> <div class='user-info'>
<router-link @click.native="activatePanel && activatePanel('timeline')" :to="{ name: 'user-settings' }" style="float: right; margin-top:16px;" v-if="!isOtherUser">
<i class="button-icon icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i>
</router-link>
<a :href="user.statusnet_profile_url" target="_blank" class="floater" v-if="isOtherUser">
<i class="icon-link-ext usersettings"></i>
</a>
<div class='container'> <div class='container'>
<router-link @click.native="activatePanel && activatePanel('timeline')" :to="userProfileLink(user)"> <router-link @click.native="activatePanel && activatePanel('timeline')" :to="userProfileLink(user)">
<StillImage class="avatar" :class='{ "better-shadow": betterShadow }' :src="user.profile_image_url_original"/> <StillImage class="avatar" :class='{ "better-shadow": betterShadow }' :src="user.profile_image_url_original"/>
</router-link> </router-link>
<div class="name-and-screen-name"> <div class="name-and-screen-name">
<div class="top-line">
<div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div> <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
<div :title="user.name" class='user-name' v-else>{{user.name}}</div> <div :title="user.name" class='user-name' v-else>{{user.name}}</div>
<router-link @click.native="activatePanel && activatePanel('timeline')" :to="{ name: 'user-settings' }" v-if="!isOtherUser">
<i class="button-icon icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i>
</router-link>
<a :href="user.statusnet_profile_url" target="_blank" v-if="isOtherUser">
<i class="icon-link-ext usersettings"></i>
</a>
</div>
<router-link @click.native="activatePanel && activatePanel('timeline')" class='user-screen-name' :to="userProfileLink(user)"> <router-link @click.native="activatePanel && activatePanel('timeline')" class='user-screen-name' :to="userProfileLink(user)">
<span>@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span> <span class="handle">@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
<span v-if="!hideUserStatsLocal" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span> <span v-if="!hideUserStatsLocal && !hideBio" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
</router-link> </router-link>
</div> </div>
</div> </div>
@ -25,7 +28,7 @@
<div v-if="user.follows_you && loggedIn && isOtherUser" class="following"> <div v-if="user.follows_you && loggedIn && isOtherUser" class="following">
{{ $t('user_card.follows_you') }} {{ $t('user_card.follows_you') }}
</div> </div>
<div class="floater" v-if="isOtherUser && (loggedIn || !switcher)"> <div class="highlighter" v-if="isOtherUser && (loggedIn || !switcher)">
<!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to --> <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
<input class="userHighlightText" type="text" :id="'userHighlightColorTx'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/> <input class="userHighlightText" type="text" :id="'userHighlightColorTx'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
<input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/> <input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
@ -139,7 +142,7 @@
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
.panel-heading { .panel-heading {
padding: 0.6em 0em; padding: .6em 0;
text-align: center; text-align: center;
box-shadow: none; box-shadow: none;
} }
@ -158,10 +161,10 @@
.user-info { .user-info {
color: $fallback--lightText; color: $fallback--lightText;
color: var(--lightText, $fallback--lightText); color: var(--lightText, $fallback--lightText);
padding: 0 16px; padding: 0 26px;
.container { .container {
padding: 16px 10px 6px 10px; padding: 16px 0 6px;
display: flex; display: flex;
max-height: 56px; max-height: 56px;
@ -218,11 +221,15 @@
vertical-align: middle; vertical-align: middle;
object-fit: contain object-fit: contain
} }
.top-line {
display: flex;
}
} }
.user-name{ .user-name{
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
flex: 1 0 auto;
} }
.user-screen-name { .user-screen-name {
@ -232,27 +239,73 @@
font-weight: light; font-weight: light;
font-size: 15px; font-size: 15px;
padding-right: 0.1em; padding-right: 0.1em;
width: 100%;
display: flex;
.dailyAvg {
min-width: 1px;
flex: 0 0 auto;
}
.handle {
min-width: 1px;
flex: 0 1 auto;
text-overflow: ellipsis;
overflow: hidden;
}
} }
.user-meta { .user-meta {
margin-bottom: .4em; margin-bottom: .15em;
display: flex;
align-items: baseline;
font-size: 14px;
line-height: 22px;
flex-wrap: wrap;
.following { .following {
font-size: 14px; flex: 1 0 auto;
flex: 0 0 100%;
margin: 0; margin: 0;
padding-left: 16px; margin-bottom: .25em;
text-align: left; text-align: left;
float: left;
}
.floater {
margin: 0;
} }
&::after { .highlighter {
display: block; flex: 0 1 auto;
content: ''; display: flex;
clear: both; flex-wrap: wrap;
margin-right: -.5em;
align-self: start;
.userHighlightCl {
padding: 2px 10px;
flex: 1 0 auto;
}
.userHighlightSel,
.userHighlightSel.select {
padding-top: 0;
padding-bottom: 0;
flex: 1 0 auto;
}
.userHighlightSel.select i {
line-height: 22px;
}
.userHighlightText {
width: 70px;
flex: 1 0 auto;
}
.userHighlightCl,
.userHighlightText,
.userHighlightSel,
.userHighlightSel.select {
height: 22px;
vertical-align: top;
margin-right: .5em;
margin-bottom: .25em;
}
} }
} }
.user-interactions { .user-interactions {
@ -260,8 +313,13 @@
flex-flow: row wrap; flex-flow: row wrap;
justify-content: space-between; justify-content: space-between;
margin-right: -.75em;
div { div {
flex: 1; flex: 1 0 0;
margin-right: .75em;
margin-bottom: .6em;
white-space: nowrap;
} }
.mute { .mute {
@ -280,8 +338,9 @@
} }
button { button {
width: 92%; width: 100%;
height: 100%; height: 100%;
margin: 0;
} }
.remote-button { .remote-button {
@ -304,10 +363,11 @@
justify-content: space-between; justify-content: space-between;
color: $fallback--lightText; color: $fallback--lightText;
color: var(--lightText, $fallback--lightText); color: var(--lightText, $fallback--lightText);
flex-wrap: wrap;
} }
.user-count { .user-count {
flex: 1; flex: 1 0 auto;
padding: .5em 0 .5em 0; padding: .5em 0 .5em 0;
margin: 0 .5em; margin: 0 .5em;
@ -327,32 +387,5 @@
color: #CCC; color: #CCC;
} }
.floater { .floater {
float: right;
margin-top: 16px;
.userHighlightCl {
padding: 2px 10px;
}
.userHighlightSel,
.userHighlightSel.select {
padding-top: 0;
padding-bottom: 0;
}
.userHighlightSel.select i {
line-height: 22px;
}
.userHighlightText {
width: 70px;
}
.userHighlightCl,
.userHighlightText,
.userHighlightSel,
.userHighlightSel.select {
height: 22px;
vertical-align: top;
margin-right: 0
}
} }
</style> </style>

View file

@ -27,6 +27,7 @@ export const defaultState = {
maxId: 0, maxId: 0,
minId: Number.POSITIVE_INFINITY, minId: Number.POSITIVE_INFINITY,
data: [], data: [],
idStore: {},
error: false error: false
}, },
favorites: new Set(), favorites: new Set(),
@ -307,6 +308,7 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot
} }
state.notifications.data.push(result) state.notifications.data.push(result)
state.notifications.idStore[notification.id] = result
if ('Notification' in window && window.Notification.permission === 'granted') { if ('Notification' in window && window.Notification.permission === 'granted') {
const title = action.user.name const title = action.user.name

View file

@ -66,6 +66,9 @@ export const mutations = {
setUserForStatus (state, status) { setUserForStatus (state, status) {
status.user = state.usersObject[status.user.id] status.user = state.usersObject[status.user.id]
}, },
setUserForNotification (state, notification) {
notification.action.user = state.usersObject[notification.action.user.id]
},
setColor (state, { user: { id }, highlighted }) { setColor (state, { user: { id }, highlighted }) {
const user = state.usersObject[id] const user = state.usersObject[id]
set(user, 'highlight', highlighted) set(user, 'highlight', highlighted)
@ -136,6 +139,21 @@ const users = {
store.commit('setUserForStatus', status) store.commit('setUserForStatus', status)
}) })
}, },
addNewNotifications (store, { notifications }) {
const users = compact(map(notifications, 'from_profile'))
const notificationIds = compact(notifications.map(_ => String(_.id)))
store.commit('addNewUsers', users)
const notificationsObject = store.rootState.statuses.notifications.idStore
const relevantNotifications = Object.entries(notificationsObject)
.filter(([k, val]) => notificationIds.includes(k))
.map(([k, val]) => val)
// Reconnect users to notifications
each(relevantNotifications, (notification) => {
store.commit('setUserForNotification', notification)
})
},
async signUp (store, userInfo) { async signUp (store, userInfo) {
store.commit('signUpPending') store.commit('signUpPending')