commit: 7d6fc044fbcf2c6f82f759605a0fd5c1aebae55a
parent 6199788f28a2665388427f6e7737f15cebd5102d
Author: Henry Jameson <me@hjkos.com>
Date: Mon, 7 Jun 2021 23:42:04 +0300
new mentions look
Diffstat:
4 files changed, 114 insertions(+), 34 deletions(-)
diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
@@ -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({
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
@@ -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;
}
- .new {
- background-color: var(--mention-bg);
- color: var(--mention-text, var(--link));
+ & .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 {
&.-you {
& .shortName,
& .full {
@@ -45,5 +114,6 @@
&:hover .new .full {
opacity: 1;
+ pointer-events: initial;
}
}
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
@@ -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>
diff --git a/src/services/user_highlighter/user_highlighter.js b/src/services/user_highlighter/user_highlighter.js
@@ -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
}
}
}
