parent
1923ed84d4
commit
22c8f71945
@ -0,0 +1,71 @@
|
||||
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
|
||||
import { getTextColor, rgb2hex } from 'src/services/color_convert/color_convert.js'
|
||||
import { mapGetters, mapState } from 'vuex'
|
||||
import { convert } from 'chromatism'
|
||||
|
||||
const MentionLink = {
|
||||
name: 'MentionLink',
|
||||
props: {
|
||||
url: {
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
content: {
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
origattrs: {
|
||||
required: true,
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick () {
|
||||
const link = generateProfileLink(this.user.id, this.user.screen_name)
|
||||
this.$router.push(link)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
user () {
|
||||
return this.$store.getters.findUserByUrl(this.url)
|
||||
},
|
||||
isYou () {
|
||||
// FIXME why user !== currentUser???
|
||||
return this.user.screen_name === this.currentUser.screen_name
|
||||
},
|
||||
userName () {
|
||||
return this.userNameFullUi.split('@')[0]
|
||||
},
|
||||
userNameFull () {
|
||||
return this.user.screen_name
|
||||
},
|
||||
userNameFullUi () {
|
||||
return this.user.screen_name_ui
|
||||
},
|
||||
highlight () {
|
||||
return this.mergedConfig.highlight[this.user.screen_name]
|
||||
},
|
||||
bg () {
|
||||
if (this.highlight) return this.highlight.color
|
||||
},
|
||||
text () {
|
||||
if (this.bg) {
|
||||
const linkColor = this.mergedConfig.customTheme.colors.link
|
||||
const color = getTextColor(convert(this.bg).rgb, convert(linkColor).rgb)
|
||||
return rgb2hex(color)
|
||||
}
|
||||
},
|
||||
style () {
|
||||
return [
|
||||
this.bg && `--mention-bg: ${this.bg}`,
|
||||
this.text && `--mention-text: ${this.text}`
|
||||
].filter(_ => _).join('; ')
|
||||
},
|
||||
...mapGetters(['mergedConfig']),
|
||||
...mapState({
|
||||
currentUser: state => state.users.currentUser
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default MentionLink
|
@ -0,0 +1,49 @@
|
||||
.MentionLink {
|
||||
position: relative;
|
||||
white-space: normal;
|
||||
display: inline-block;
|
||||
|
||||
& .new,
|
||||
& .original,
|
||||
& .full {
|
||||
padding: 0 2px;
|
||||
margin: 0 -2px;
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.original {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.full {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
transition: opacity 0.2s ease;
|
||||
background-color: var(--mention-bg, var(--popover));
|
||||
color: var(--mention-text, var(--link));
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.new {
|
||||
background-color: var(--mention-bg);
|
||||
color: var(--mention-text, var(--link));
|
||||
|
||||
&.-you {
|
||||
& .shortName,
|
||||
& .full {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .new .full {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<span class="MentionLink">
|
||||
<a v-if="!user" v-html="content" href="url" class="original"/>
|
||||
<span v-if="user" class="new" :style="style" :class="{ '-you': isYou }" >
|
||||
<button class="button-unstyled short" @click.prevent="onClick">
|
||||
<span class="shortName">@<span v-html="userName" /></span> <span v-if="isYou">(You)</span>
|
||||
</button>
|
||||
<span class="full" v-if="userName !== userNameFull">
|
||||
@<span v-html="userNameFull" />
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script src="./mention_link.js"/>
|
||||
|
||||
<style lang="scss" src="./mention_link.scss"/>
|
Loading…
Reference in new issue