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 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 { mapGetters, mapState } from 'vuex'
import { convert } from 'chromatism' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
const MentionLink = { const MentionLink = {
name: 'MentionLink', name: 'MentionLink',
@ -45,21 +44,22 @@ const MentionLink = {
highlight () { highlight () {
return this.mergedConfig.highlight[this.user.screen_name] return this.mergedConfig.highlight[this.user.screen_name]
}, },
bg () { highlightType () {
if (this.highlight) return this.highlight.color return this.highlight && ('-' + this.highlight.type)
}, },
text () { highlightClass () {
if (this.bg) { if (this.highlight) return highlightClass(this.user)
const linkColor = this.mergedConfig.customTheme.colors.link
const color = getTextColor(convert(this.bg).rgb, convert(linkColor).rgb)
return rgb2hex(color)
}
}, },
style () { style () {
return [ if (this.highlight) {
this.bg && `--mention-bg: ${this.bg}`, const {
this.text && `--mention-text: ${this.text}` backgroundColor,
].filter(_ => _).join('; ') backgroundPosition,
backgroundImage,
...rest
} = highlightStyle(this.highlight)
return rest
}
}, },
...mapGetters(['mergedConfig']), ...mapGetters(['mergedConfig']),
...mapState({ ...mapState({

View file

@ -2,12 +2,10 @@
position: relative; position: relative;
white-space: normal; white-space: normal;
display: inline-block; display: inline-block;
color: var(--link);
& .new, & .new,
& .original, & .original {
& .full {
padding: 0 2px;
margin: 0 -2px;
display: inline-block; display: inline-block;
border-radius: 2px; border-radius: 2px;
} }
@ -17,24 +15,95 @@
} }
.full { .full {
pointer-events: none;
position: absolute; position: absolute;
display: inline-block;
pointer-events: none;
opacity: 0; opacity: 0;
top: 0; top: 100%;
bottom: 0;
left: 0; left: 0;
height: 100%;
word-wrap: normal; word-wrap: normal;
white-space: nowrap; white-space: nowrap;
transition: opacity 0.2s ease; transition: opacity 0.2s ease;
background-color: var(--mention-bg, var(--popover));
color: var(--mention-text, var(--link));
z-index: 1; 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 { .new {
background-color: var(--mention-bg);
color: var(--mention-text, var(--link));
&.-you { &.-you {
& .shortName, & .shortName,
& .full { & .full {
@ -45,5 +114,6 @@
&:hover .new .full { &:hover .new .full {
opacity: 1; opacity: 1;
pointer-events: initial;
} }
} }

View file

@ -12,22 +12,24 @@
v-if="user" v-if="user"
class="new" class="new"
:style="style" :style="style"
:class="{ '-you': isYou }" :class="[{ '-you': isYou }, highlightType]"
> >
<button <button
class="button-unstyled short" class="short"
:class="highlight ? 'button-default' : 'button-default' "
@click.prevent="onClick" @click.prevent="onClick"
> >
<!-- eslint-disable vue/no-v-html --> <!-- 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 --> <!-- eslint-enable vue/no-v-html -->
</button> </button>
<span <span
v-if="userName !== userNameFull" v-if="userName !== userNameFull"
class="full" class="full popover-default"
:class="[highlightType]"
> >
<!-- eslint-disable vue/no-v-html --> <!-- eslint-disable vue/no-v-html -->
@<span v-html="userNameFull" /> <span class="userNameFull" v-html="userNameFull" />
<!-- eslint-enable vue/no-v-html --> <!-- eslint-enable vue/no-v-html -->
</span> </span>
</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 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 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 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') { if (type === 'striped') {
return { return {
backgroundImage: [ backgroundImage: [
@ -17,11 +22,13 @@ const highlightStyle = (prefs) => {
`${tintColor2} 20px,`, `${tintColor2} 20px,`,
`${tintColor2} 40px` `${tintColor2} 40px`
].join(' '), ].join(' '),
backgroundPosition: '0 0' backgroundPosition: '0 0',
...customProps
} }
} else if (type === 'solid') { } else if (type === 'solid') {
return { return {
backgroundColor: tintColor2 backgroundColor: tintColor2,
...customProps
} }
} else if (type === 'side') { } else if (type === 'side') {
return { return {
@ -31,7 +38,8 @@ const highlightStyle = (prefs) => {
`${solidColor} 2px,`, `${solidColor} 2px,`,
`transparent 6px` `transparent 6px`
].join(' '), ].join(' '),
backgroundPosition: '0 0' backgroundPosition: '0 0',
...customProps
} }
} }
} }