From 22c8f71945c6d114bf4db89c87eb1b166775f2d6 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 7 Jun 2021 16:16:10 +0300 Subject: [PATCH] mention link --- src/components/mention_link/mention_link.js | 71 +++++++++++++++++++ src/components/mention_link/mention_link.scss | 49 +++++++++++++ src/components/mention_link/mention_link.vue | 17 +++++ src/components/rich_content/rich_content.jsx | 16 ++++- .../status_content/status_content.js | 7 ++ src/modules/users.js | 4 ++ 6 files changed, 161 insertions(+), 3 deletions(-) create mode 100644 src/components/mention_link/mention_link.js create mode 100644 src/components/mention_link/mention_link.scss create mode 100644 src/components/mention_link/mention_link.vue diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js new file mode 100644 index 00000000..ade598d8 --- /dev/null +++ b/src/components/mention_link/mention_link.js @@ -0,0 +1,71 @@ +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' + +const MentionLink = { + name: 'MentionLink', + props: { + url: { + required: true, + type: String + }, + content: { + required: true, + type: String + }, + origattrs: { + required: true, + type: Object + } + }, + methods: { + onClick () { + const link = generateProfileLink(this.user.id, this.user.screen_name) + this.$router.push(link) + } + }, + computed: { + user () { + return this.$store.getters.findUserByUrl(this.url) + }, + isYou () { + // FIXME why user !== currentUser??? + return this.user.screen_name === this.currentUser.screen_name + }, + userName () { + return this.userNameFullUi.split('@')[0] + }, + userNameFull () { + return this.user.screen_name + }, + userNameFullUi () { + return this.user.screen_name_ui + }, + highlight () { + return this.mergedConfig.highlight[this.user.screen_name] + }, + bg () { + if (this.highlight) return this.highlight.color + }, + text () { + if (this.bg) { + const linkColor = this.mergedConfig.customTheme.colors.link + const color = getTextColor(convert(this.bg).rgb, convert(linkColor).rgb) + return rgb2hex(color) + } + }, + style () { + return [ + this.bg && `--mention-bg: ${this.bg}`, + this.text && `--mention-text: ${this.text}` + ].filter(_ => _).join('; ') + }, + ...mapGetters(['mergedConfig']), + ...mapState({ + currentUser: state => state.users.currentUser + }) + } +} + +export default MentionLink diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss new file mode 100644 index 00000000..237d9205 --- /dev/null +++ b/src/components/mention_link/mention_link.scss @@ -0,0 +1,49 @@ +.MentionLink { + position: relative; + white-space: normal; + display: inline-block; + + & .new, + & .original, + & .full { + padding: 0 2px; + margin: 0 -2px; + display: inline-block; + border-radius: 2px; + } + + .original { + opacity: 0.5; + } + + .full { + pointer-events: none; + position: absolute; + opacity: 0; + top: 0; + bottom: 0; + left: 0; + 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; + } + + .new { + background-color: var(--mention-bg); + color: var(--mention-text, var(--link)); + + &.-you { + & .shortName, + & .full { + font-weight: 600; + } + } + } + + &:hover .new .full { + opacity: 1; + } +} diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue new file mode 100644 index 00000000..84ed3205 --- /dev/null +++ b/src/components/mention_link/mention_link.vue @@ -0,0 +1,17 @@ + + +