fix conflict in user card content
This commit is contained in:
shpuld
commit
650655709d
16 changed files with 432 additions and 188 deletions
|
|
@ -32,6 +32,8 @@ const PostStatusForm = {
|
|||
},
|
||||
mounted () {
|
||||
this.resize(this.$refs.textarea)
|
||||
const textLength = this.$refs.textarea.value.length
|
||||
this.$refs.textarea.setSelectionRange(textLength, textLength)
|
||||
|
||||
if (this.replyTo) {
|
||||
this.$refs.textarea.focus()
|
||||
|
|
@ -250,7 +252,8 @@ const PostStatusForm = {
|
|||
}
|
||||
this.$emit('posted')
|
||||
let el = this.$el.querySelector('textarea')
|
||||
el.style.height = '16px'
|
||||
el.style.height = 'auto'
|
||||
el.style.height = undefined
|
||||
this.error = null
|
||||
} else {
|
||||
this.error = data.error
|
||||
|
|
@ -298,13 +301,15 @@ const PostStatusForm = {
|
|||
e.dataTransfer.dropEffect = 'copy'
|
||||
},
|
||||
resize (e) {
|
||||
if (!e.target) { return }
|
||||
const vertPadding = Number(window.getComputedStyle(e.target)['padding-top'].substr(0, 1)) +
|
||||
Number(window.getComputedStyle(e.target)['padding-bottom'].substr(0, 1))
|
||||
e.target.style.height = 'auto'
|
||||
e.target.style.height = `${e.target.scrollHeight - vertPadding}px`
|
||||
if (e.target.value === '') {
|
||||
e.target.style.height = '16px'
|
||||
const target = e.target || e
|
||||
if (!(target instanceof window.Element)) { return }
|
||||
const vertPadding = Number(window.getComputedStyle(target)['padding-top'].substr(0, 1)) +
|
||||
Number(window.getComputedStyle(target)['padding-bottom'].substr(0, 1))
|
||||
// Auto is needed to make textbox shrink when removing lines
|
||||
target.style.height = 'auto'
|
||||
target.style.height = `${target.scrollHeight - vertPadding}px`
|
||||
if (target.value === '') {
|
||||
target.style.height = null
|
||||
}
|
||||
},
|
||||
clearError () {
|
||||
|
|
|
|||
|
|
@ -2,22 +2,25 @@
|
|||
<div id="heading" class="profile-panel-background" :style="headingStyle">
|
||||
<div class="panel-heading text-center">
|
||||
<div class='user-info'>
|
||||
<router-link :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'>
|
||||
<router-link :to="userProfileLink(user)">
|
||||
<StillImage class="avatar" :class='{ "better-shadow": betterShadow }' :src="user.profile_image_url_original"/>
|
||||
</router-link>
|
||||
<div class="name-and-screen-name">
|
||||
<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 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-else>{{user.name}}</div>
|
||||
<router-link :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 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 v-if="!hideUserStatsLocal" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
|
||||
<span class="handle">@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
|
||||
<span v-if="!hideUserStatsLocal && !hideBio" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -25,7 +28,7 @@
|
|||
<div v-if="user.follows_you && loggedIn && isOtherUser" class="following">
|
||||
{{ $t('user_card.follows_you') }}
|
||||
</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 -->
|
||||
<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"/>
|
||||
|
|
@ -139,7 +142,7 @@
|
|||
border-bottom-right-radius: 0;
|
||||
|
||||
.panel-heading {
|
||||
padding: 0.6em 0em;
|
||||
padding: .6em 0;
|
||||
text-align: center;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -158,10 +161,10 @@
|
|||
.user-info {
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
padding: 0 16px;
|
||||
padding: 0 26px;
|
||||
|
||||
.container {
|
||||
padding: 16px 10px 6px 10px;
|
||||
padding: 16px 0 6px;
|
||||
display: flex;
|
||||
max-height: 56px;
|
||||
|
||||
|
|
@ -218,11 +221,15 @@
|
|||
vertical-align: middle;
|
||||
object-fit: contain
|
||||
}
|
||||
.top-line {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.user-name{
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.user-screen-name {
|
||||
|
|
@ -232,27 +239,73 @@
|
|||
font-weight: light;
|
||||
font-size: 15px;
|
||||
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 {
|
||||
margin-bottom: .4em;
|
||||
margin-bottom: .15em;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.following {
|
||||
font-size: 14px;
|
||||
flex: 0 0 100%;
|
||||
flex: 1 0 auto;
|
||||
margin: 0;
|
||||
padding-left: 16px;
|
||||
margin-bottom: .25em;
|
||||
text-align: left;
|
||||
float: left;
|
||||
}
|
||||
.floater {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
content: '';
|
||||
clear: both;
|
||||
.highlighter {
|
||||
flex: 0 1 auto;
|
||||
display: flex;
|
||||
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 {
|
||||
|
|
@ -260,8 +313,13 @@
|
|||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
margin-right: -.75em;
|
||||
|
||||
div {
|
||||
flex: 1;
|
||||
flex: 1 0 0;
|
||||
margin-right: .75em;
|
||||
margin-bottom: .6em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mute {
|
||||
|
|
@ -280,8 +338,9 @@
|
|||
}
|
||||
|
||||
button {
|
||||
width: 92%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.remote-button {
|
||||
|
|
@ -304,10 +363,11 @@
|
|||
justify-content: space-between;
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.user-count {
|
||||
flex: 1;
|
||||
flex: 1 0 auto;
|
||||
padding: .5em 0 .5em 0;
|
||||
margin: 0 .5em;
|
||||
|
||||
|
|
@ -327,32 +387,5 @@
|
|||
color: #CCC;
|
||||
}
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -2,62 +2,31 @@ import apiService from '../../services/api/api.service.js'
|
|||
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
|
||||
|
||||
function showWhoToFollow (panel, reply) {
|
||||
var users = reply
|
||||
var cn
|
||||
var index
|
||||
var step = 7
|
||||
cn = Math.floor(Math.random() * step)
|
||||
for (index = 0; index < 3; index++) {
|
||||
var user
|
||||
user = users[cn]
|
||||
var img
|
||||
if (user.avatar) {
|
||||
img = user.avatar
|
||||
} else {
|
||||
img = '/images/avi.png'
|
||||
}
|
||||
var name = user.acct
|
||||
if (index === 0) {
|
||||
panel.img1 = img
|
||||
panel.name1 = name
|
||||
panel.$store.state.api.backendInteractor.externalProfile(name)
|
||||
.then((externalUser) => {
|
||||
if (!externalUser.error) {
|
||||
panel.$store.commit('addNewUsers', [externalUser])
|
||||
panel.id1 = externalUser.id
|
||||
}
|
||||
})
|
||||
} else if (index === 1) {
|
||||
panel.img2 = img
|
||||
panel.name2 = name
|
||||
panel.$store.state.api.backendInteractor.externalProfile(name)
|
||||
.then((externalUser) => {
|
||||
if (!externalUser.error) {
|
||||
panel.$store.commit('addNewUsers', [externalUser])
|
||||
panel.id2 = externalUser.id
|
||||
}
|
||||
})
|
||||
} else if (index === 2) {
|
||||
panel.img3 = img
|
||||
panel.name3 = name
|
||||
panel.$store.state.api.backendInteractor.externalProfile(name)
|
||||
.then((externalUser) => {
|
||||
if (!externalUser.error) {
|
||||
panel.$store.commit('addNewUsers', [externalUser])
|
||||
panel.id3 = externalUser.id
|
||||
}
|
||||
})
|
||||
}
|
||||
cn = (cn + step) % users.length
|
||||
}
|
||||
panel.usersToFollow.forEach((toFollow, index) => {
|
||||
let randIndex = Math.floor(Math.random() * reply.length)
|
||||
let user = reply[randIndex]
|
||||
let img = user.avatar || '/images/avi.png'
|
||||
let name = user.acct
|
||||
|
||||
toFollow.img = img
|
||||
toFollow.name = name
|
||||
|
||||
panel.$store.state.api.backendInteractor.externalProfile(name)
|
||||
.then((externalUser) => {
|
||||
if (!externalUser.error) {
|
||||
panel.$store.commit('addNewUsers', [externalUser])
|
||||
toFollow.id = externalUser.id
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function getWhoToFollow (panel) {
|
||||
var credentials = panel.$store.state.users.currentUser.credentials
|
||||
if (credentials) {
|
||||
panel.name1 = 'Loading...'
|
||||
panel.name2 = 'Loading...'
|
||||
panel.name3 = 'Loading...'
|
||||
panel.usersToFollow.forEach(toFollow => {
|
||||
toFollow.name = 'Loading...'
|
||||
})
|
||||
apiService.suggestions({credentials: credentials})
|
||||
.then((reply) => {
|
||||
showWhoToFollow(panel, reply)
|
||||
|
|
@ -67,27 +36,24 @@ function getWhoToFollow (panel) {
|
|||
|
||||
const WhoToFollowPanel = {
|
||||
data: () => ({
|
||||
img1: '/images/avi.png',
|
||||
name1: '',
|
||||
id1: 0,
|
||||
img2: '/images/avi.png',
|
||||
name2: '',
|
||||
id2: 0,
|
||||
img3: '/images/avi.png',
|
||||
name3: '',
|
||||
id3: 0
|
||||
usersToFollow: new Array(3).fill().map(x => (
|
||||
{
|
||||
img: '/images/avi.png',
|
||||
name: '',
|
||||
id: 0
|
||||
}
|
||||
))
|
||||
}),
|
||||
computed: {
|
||||
user: function () {
|
||||
return this.$store.state.users.currentUser.screen_name
|
||||
},
|
||||
moreUrl: function () {
|
||||
var host = window.location.hostname
|
||||
var user = this.user
|
||||
var suggestionsWeb = this.$store.state.instance.suggestionsWeb
|
||||
var url
|
||||
url = suggestionsWeb.replace(/{{host}}/g, encodeURIComponent(host))
|
||||
url = url.replace(/{{user}}/g, encodeURIComponent(user))
|
||||
const host = window.location.hostname
|
||||
const user = this.user
|
||||
const suggestionsWeb = this.$store.state.instance.suggestionsWeb
|
||||
const url = suggestionsWeb.replace(/{{host}}/g, encodeURIComponent(host))
|
||||
.replace(/{{user}}/g, encodeURIComponent(user))
|
||||
return url
|
||||
},
|
||||
suggestionsEnabled () {
|
||||
|
|
|
|||
|
|
@ -8,9 +8,12 @@
|
|||
</div>
|
||||
<div class="panel-body who-to-follow">
|
||||
<p>
|
||||
<img v-bind:src="img1"/> <router-link :to="userProfileLink(id1, name1)">{{ name1 }}</router-link><br>
|
||||
<img v-bind:src="img2"/> <router-link :to="userProfileLink(id2, name2)">{{ name2 }}</router-link><br>
|
||||
<img v-bind:src="img3"/> <router-link :to="userProfileLink(id3, name3)">{{ name3 }}</router-link><br>
|
||||
<span v-for="user in usersToFollow">
|
||||
<img v-bind:src="user.img" />
|
||||
<router-link v-bind:to="userProfileLink(user.id, user.name)">
|
||||
{{user.name}}
|
||||
</router-link><br />
|
||||
</span>
|
||||
<img v-bind:src="$store.state.instance.logo"> <a v-bind:href="moreUrl" target="_blank">{{$t('who_to_follow.more')}}</a>
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue