new mentions look

This commit is contained in:
Henry Jameson 2021-06-07 23:42:04 +03:00
parent 6199788f28
commit 7d6fc044fb
4 changed files with 114 additions and 34 deletions

View file

@ -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({

View file

@ -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;
}
}

View file

@ -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>

View file

@ -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
}
}
}