From 7d6fc044fbcf2c6f82f759605a0fd5c1aebae55a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 7 Jun 2021 23:42:04 +0300 Subject: [PATCH] new mentions look --- src/components/mention_link/mention_link.js | 28 +++--- src/components/mention_link/mention_link.scss | 94 ++++++++++++++++--- src/components/mention_link/mention_link.vue | 12 ++- .../user_highlighter/user_highlighter.js | 14 ++- 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 index ade598d8..d26ae337 100644 --- 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 index 237d9205..3a3e58d1 100644 --- 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; + } + + & .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; } } diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index ea356315..5a8506eb 100644 --- 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]" > - @ + diff --git a/src/services/user_highlighter/user_highlighter.js b/src/services/user_highlighter/user_highlighter.js index b91c0f78..3b07592e 100644 --- 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 } } }