new mentions look
This commit is contained in:
Henry Jameson
parent
6199788f28
commit
7d6fc044fb
4 changed files with 114 additions and 34 deletions
|
|
@ -1,7 +1,6 @@
|
|||
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'
|
||||
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
|
||||
|
||||
const MentionLink = {
|
||||
name: 'MentionLink',
|
||||
|
|
@ -45,21 +44,22 @@ const MentionLink = {
|
|||
highlight () {
|
||||
return this.mergedConfig.highlight[this.user.screen_name]
|
||||
},
|
||||
bg () {
|
||||
if (this.highlight) return this.highlight.color
|
||||
highlightType () {
|
||||
return this.highlight && ('-' + this.highlight.type)
|
||||
},
|
||||
text () {
|
||||
if (this.bg) {
|
||||
const linkColor = this.mergedConfig.customTheme.colors.link
|
||||
const color = getTextColor(convert(this.bg).rgb, convert(linkColor).rgb)
|
||||
return rgb2hex(color)
|
||||
}
|
||||
highlightClass () {
|
||||
if (this.highlight) return highlightClass(this.user)
|
||||
},
|
||||
style () {
|
||||
return [
|
||||
this.bg && `--mention-bg: ${this.bg}`,
|
||||
this.text && `--mention-text: ${this.text}`
|
||||
].filter(_ => _).join('; ')
|
||||
if (this.highlight) {
|
||||
const {
|
||||
backgroundColor,
|
||||
backgroundPosition,
|
||||
backgroundImage,
|
||||
...rest
|
||||
} = highlightStyle(this.highlight)
|
||||
return rest
|
||||
}
|
||||
},
|
||||
...mapGetters(['mergedConfig']),
|
||||
...mapState({
|
||||
|
|
|
|||
|
|
@ -2,12 +2,10 @@
|
|||
position: relative;
|
||||
white-space: normal;
|
||||
display: inline-block;
|
||||
color: var(--link);
|
||||
|
||||
& .new,
|
||||
& .original,
|
||||
& .full {
|
||||
padding: 0 2px;
|
||||
margin: 0 -2px;
|
||||
& .original {
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
|
@ -17,24 +15,95 @@
|
|||
}
|
||||
|
||||
.full {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
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;
|
||||
margin-top: 0.25em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
& .short,
|
||||
& .full {
|
||||
&::before {
|
||||
content: '@';
|
||||
}
|
||||
}
|
||||
|
||||
& .new {
|
||||
&,
|
||||
&.-striped,
|
||||
&.-solid,
|
||||
&.-side {
|
||||
.full {
|
||||
}
|
||||
.short {
|
||||
&::before {
|
||||
display: inline-block;
|
||||
height: 50%;
|
||||
font-size: 90%;
|
||||
line-height: 1;
|
||||
vertical-align: 6%;
|
||||
}
|
||||
}
|
||||
|
||||
.you {
|
||||
padding-right: 0.25em;
|
||||
}
|
||||
.short {
|
||||
padding-left: 0.25em;
|
||||
padding-right: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.userName {
|
||||
color: var(--link);
|
||||
margin-left: 0.25em;
|
||||
padding-left: 0.25em;
|
||||
padding-right: 0.25em;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.-striped {
|
||||
& .userName,
|
||||
& .full {
|
||||
background-image:
|
||||
repeating-linear-gradient(
|
||||
135deg,
|
||||
var(--____highlight-tintColor),
|
||||
var(--____highlight-tintColor) 5px,
|
||||
var(--____highlight-tintColor2) 5px,
|
||||
var(--____highlight-tintColor2) 10px
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&.-solid {
|
||||
& .userName,
|
||||
& .full {
|
||||
background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
|
||||
}
|
||||
}
|
||||
|
||||
&.-side {
|
||||
& .userName,
|
||||
& .userNameFull {
|
||||
box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new {
|
||||
background-color: var(--mention-bg);
|
||||
color: var(--mention-text, var(--link));
|
||||
|
||||
&.-you {
|
||||
& .shortName,
|
||||
& .full {
|
||||
|
|
@ -45,5 +114,6 @@
|
|||
|
||||
&:hover .new .full {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,22 +12,24 @@
|
|||
v-if="user"
|
||||
class="new"
|
||||
:style="style"
|
||||
:class="{ '-you': isYou }"
|
||||
:class="[{ '-you': isYou }, highlightType]"
|
||||
>
|
||||
<button
|
||||
class="button-unstyled short"
|
||||
class="short"
|
||||
:class="highlight ? 'button-default' : 'button-default' "
|
||||
@click.prevent="onClick"
|
||||
>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<span class="shortName">@<span v-html="userName" /></span> <span v-if="isYou">{{ $t('status.you')}}</span>
|
||||
<span class="shortName"><span class="userName" v-html="userName" /></span><span class="you" v-if="isYou">{{ $t('status.you')}}</span>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
</button>
|
||||
<span
|
||||
v-if="userName !== userNameFull"
|
||||
class="full"
|
||||
class="full popover-default"
|
||||
:class="[highlightType]"
|
||||
>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
@<span v-html="userNameFull" />
|
||||
<span class="userNameFull" v-html="userNameFull" />
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
</span>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,11 @@ const highlightStyle = (prefs) => {
|
|||
const solidColor = `rgb(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)})`
|
||||
const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .1)`
|
||||
const tintColor2 = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .2)`
|
||||
const customProps = {
|
||||
'--____highlight-solidColor': solidColor,
|
||||
'--____highlight-tintColor': tintColor,
|
||||
'--____highlight-tintColor2': tintColor2
|
||||
}
|
||||
if (type === 'striped') {
|
||||
return {
|
||||
backgroundImage: [
|
||||
|
|
@ -17,11 +22,13 @@ const highlightStyle = (prefs) => {
|
|||
`${tintColor2} 20px,`,
|
||||
`${tintColor2} 40px`
|
||||
].join(' '),
|
||||
backgroundPosition: '0 0'
|
||||
backgroundPosition: '0 0',
|
||||
...customProps
|
||||
}
|
||||
} else if (type === 'solid') {
|
||||
return {
|
||||
backgroundColor: tintColor2
|
||||
backgroundColor: tintColor2,
|
||||
...customProps
|
||||
}
|
||||
} else if (type === 'side') {
|
||||
return {
|
||||
|
|
@ -31,7 +38,8 @@ const highlightStyle = (prefs) => {
|
|||
`${solidColor} 2px,`,
|
||||
`transparent 6px`
|
||||
].join(' '),
|
||||
backgroundPosition: '0 0'
|
||||
backgroundPosition: '0 0',
|
||||
...customProps
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue