From 50f5afbce1f2bc4dbd0ddf6c951c7e519dfc6ce3 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 15 Aug 2022 23:19:33 +0300 Subject: add and remove users to/from lists from their profile --- src/components/popover/popover.js | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) (limited to 'src/components/popover/popover.js') diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index d2af59fe..dd332c35 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -4,7 +4,7 @@ const Popover = { // Action to trigger popover: either 'hover' or 'click' trigger: String, - // Either 'top' or 'bottom' + // 'top', 'bottom', 'left', 'right' placement: String, // Takes object with properties 'x' and 'y', values of these can be @@ -84,6 +84,8 @@ const Popover = { const anchorStyle = getComputedStyle(anchorEl) const topPadding = parseFloat(anchorStyle.paddingTop) const bottomPadding = parseFloat(anchorStyle.paddingBottom) + const rightPadding = parseFloat(anchorStyle.paddingRight) + const leftPadding = parseFloat(anchorStyle.paddingLeft) // Screen position of the origin point for popover = center of the anchor const origin = { @@ -170,7 +172,7 @@ const Popover = { if (overlayCenter) { translateX = origin.x + horizOffset translateY = origin.y + vertOffset - } else { + } else if (this.placement !== 'right' && this.placement !== 'left') { // Default to whatever user wished with placement prop let usingTop = this.placement !== 'bottom' @@ -189,6 +191,25 @@ const Popover = { const xOffset = (this.offset && this.offset.x) || 0 translateX = origin.x + horizOffset + xOffset + } else { + // Default to whatever user wished with placement prop + let usingRight = this.placement !== 'left' + + // Handle special cases, first force to displaying on top if there's not space on bottom, + // regardless of what placement value was. Then check if there's not space on top, and + // force to bottom, again regardless of what placement value was. + const rightBoundary = origin.x - anchorWidth * 0.5 + (this.removePadding ? rightPadding : 0) + const leftBoundary = origin.x + anchorWidth * 0.5 - (this.removePadding ? leftPadding : 0) + if (leftBoundary + content.offsetWidth > xBounds.max) usingRight = true + if (rightBoundary - content.offsetWidth < xBounds.min) usingRight = false + + const xOffset = (this.offset && this.offset.x) || 0 + translateX = usingRight + ? rightBoundary - xOffset - content.offsetWidth + : leftBoundary + xOffset + + const yOffset = (this.offset && this.offset.y) || 0 + translateY = origin.y + vertOffset + yOffset } this.styles = { -- cgit v1.2.3-70-g09d2 From 4631b1b9f7e7813cab65e0d0705cd1e265f23393 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 9 Oct 2022 22:09:50 +0300 Subject: suggestor popover --- src/components/emoji_input/emoji_input.js | 80 +++++++++++------- src/components/emoji_input/emoji_input.vue | 128 +++++++++++++++-------------- src/components/popover/popover.js | 11 ++- src/components/popover/popover.vue | 2 +- 4 files changed, 127 insertions(+), 94 deletions(-) (limited to 'src/components/popover/popover.js') diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index ffc0ffac..b365043c 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -1,5 +1,6 @@ import Completion from '../../services/completion/completion.js' import EmojiPicker from '../emoji_picker/emoji_picker.vue' +import Popover from 'src/components/popover/popover.vue' import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue' import { take } from 'lodash' import { findOffset } from '../../services/offset_finder/offset_finder.service.js' @@ -109,6 +110,7 @@ const EmojiInput = { data () { return { input: undefined, + caretEl: undefined, highlighted: 0, caret: 0, focused: false, @@ -117,10 +119,12 @@ const EmojiInput = { temporarilyHideSuggestions: false, keepOpen: false, disableClickOutside: false, - suggestions: [] + suggestions: [], + overlayStyle: {} } }, components: { + Popover, EmojiPicker, UnicodeDomainIndicator }, @@ -128,7 +132,15 @@ const EmojiInput = { padEmoji () { return this.$store.getters.mergedConfig.padEmoji }, + preText () { + return this.modelValue.slice(0, this.caret) + }, + postText () { + return this.modelValue.slice(this.caret) + }, showSuggestions () { + console.log(this.focused) + console.log(this.suggestions) return this.focused && this.suggestions && this.suggestions.length > 0 && @@ -191,10 +203,21 @@ const EmojiInput = { } }, mounted () { - const { root } = this.$refs + const { root, hiddenOverlayCaret, suggestorPopover } = this.$refs const input = root.querySelector('.emoji-input > input') || root.querySelector('.emoji-input > textarea') if (!input) return this.input = input + this.caretEl = hiddenOverlayCaret + suggestorPopover.setAnchorEl(this.caretEl) + const style = getComputedStyle(this.input) + this.overlayStyle.padding = style.padding + this.overlayStyle.border = style.border + this.overlayStyle.margin = style.margin + this.overlayStyle.lineHeight = style.lineHeight + this.overlayStyle.fontFamily = style.fontFamily + this.overlayStyle.fontSize = style.fontSize + this.overlayStyle.wordWrap = style.wordWrap + this.overlayStyle.whiteSpace = style.whiteSpace this.resize() input.addEventListener('blur', this.onBlur) input.addEventListener('focus', this.onFocus) @@ -204,6 +227,16 @@ const EmojiInput = { input.addEventListener('click', this.onClickInput) input.addEventListener('transitionend', this.onTransition) input.addEventListener('input', this.onInput) + input.addEventListener('scroll', (e) => { + console.log({ + top: this.input.scrollTop, + left: this.input.scrollLeft + }) + this.$refs.hiddenOverlay.scrollTo({ + top: this.input.scrollTop, + left: this.input.scrollLeft + }) + }) }, unmounted () { const { input } = this @@ -219,22 +252,32 @@ const EmojiInput = { } }, watch: { - showSuggestions: function (newValue) { + showSuggestions: function (newValue, oldValue) { this.$emit('shown', newValue) + if (newValue) { + this.$refs.suggestorPopover.showPopover() + } else { + this.$refs.suggestorPopover.hidePopover() + } }, textAtCaret: async function (newWord) { const firstchar = newWord.charAt(0) - this.suggestions = [] - if (newWord === firstchar) return + if (newWord === firstchar) { + this.suggestions = [] + return + } const matchedSuggestions = await this.suggest(newWord, this.maybeLocalizedEmojiNamesAndKeywords) // Async: cancel if textAtCaret has changed during wait - if (this.textAtCaret !== newWord) return - if (matchedSuggestions.length <= 0) return + if (this.textAtCaret !== newWord || matchedSuggestions.length <= 0) { + this.suggestions = [] + return + } this.suggestions = take(matchedSuggestions, 5) .map(({ imageUrl, ...rest }) => ({ ...rest, img: imageUrl || '' })) + this.$refs.suggestorPopover.updateStyles() }, suggestions: { handler (newValue) { @@ -525,29 +568,6 @@ const EmojiInput = { this.caret = selectionStart }, resize () { - const panel = this.$refs.panel - if (!panel) return - const picker = this.$refs.picker.$el - const panelBody = this.$refs['panel-body'] - const { offsetHeight, offsetTop } = this.input - const offsetBottom = offsetTop + offsetHeight - - this.setPlacement(panelBody, panel, offsetBottom) - this.setPlacement(picker, picker, offsetBottom) - }, - setPlacement (container, target, offsetBottom) { - if (!container || !target) return - - target.style.top = offsetBottom + 'px' - target.style.bottom = 'auto' - - if (this.placement === 'top' || (this.placement === 'auto' && this.overflowsBottom(container))) { - target.style.top = 'auto' - target.style.bottom = this.input.offsetHeight + 'px' - } - }, - overflowsBottom (el) { - return el.getBoundingClientRect().bottom > window.innerHeight } } } diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index 43581dbf..8a4bc244 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -6,6 +6,12 @@ :class="{ 'with-picker': !hideEmojiButton }" > + +
+ {{ preText }} + x + {{ postText }} +
-
-
+ +
@@ -102,6 +110,7 @@ color: var(--text, $fallback--text); } } + .emoji-picker-panel { position: absolute; z-index: 20; @@ -115,31 +124,6 @@ .autocomplete { &-panel { position: absolute; - z-index: 20; - margin-top: 2px; - - &.hide { - display: none - } - - &-body { - margin: 0 0.5em 0 0.5em; - border-radius: $fallback--tooltipRadius; - border-radius: var(--tooltipRadius, $fallback--tooltipRadius); - box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); - box-shadow: var(--popupShadow); - min-width: 75%; - background-color: $fallback--bg; - background-color: var(--popover, $fallback--bg); - color: $fallback--link; - color: var(--popoverText, $fallback--link); - --faint: var(--popoverFaintText, $fallback--faint); - --faintLink: var(--popoverFaintLink, $fallback--faint); - --lightText: var(--popoverLightText, $fallback--lightText); - --postLink: var(--popoverPostLink, $fallback--link); - --postFaintLink: var(--popoverPostFaintLink, $fallback--link); - --icon: var(--popoverIcon, $fallback--icon); - } } &-item { @@ -196,5 +180,25 @@ input, textarea { flex: 1 0 auto; } + + .hidden-overlay { + opacity: 0; + pointer-events: none; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + overflow: hidden; + /* DEBUG STUFF */ + color: red; + /* set opacity to non-zero to see the overlay */ + + .caret { + width: 0; + margin-right: calc(-1ch - 1px); + border: 1px solid red; + } + } } diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index dd332c35..60c42f0f 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -51,6 +51,10 @@ const Popover = { // lockReEntry is a flag that is set when mouse cursor is leaving the popover's content // so that if mouse goes back into popover it won't be re-shown again to prevent annoyance // with popovers refusing to be hidden when user wants to interact with something in below popover + anchorEl: null, + // There's an issue where having teleport enabled by default causes things just... + // not render at all, i.e. main post status form and its emoji inputs + teleport: false, lockReEntry: false, hidden: true, styles: {}, @@ -63,6 +67,10 @@ const Popover = { } }, methods: { + setAnchorEl (el) { + this.anchorEl = el + this.updateStyles() + }, containerBoundingClientRect () { const container = this.boundToSelector ? this.$el.closest(this.boundToSelector) : this.$el.offsetParent return container.getBoundingClientRect() @@ -75,7 +83,7 @@ const Popover = { // Popover will be anchored around this element, trigger ref is the container, so // its children are what are inside the slot. Expect only one v-slot:trigger. - const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el + const anchorEl = this.anchorEl || (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el // SVGs don't have offsetWidth/Height, use fallback const anchorHeight = anchorEl.offsetHeight || anchorEl.clientHeight const anchorWidth = anchorEl.offsetWidth || anchorEl.clientWidth @@ -319,6 +327,7 @@ const Popover = { } }, mounted () { + this.teleport = true let scrollable = this.$refs.trigger.closest('.column.-scrollable') || this.$refs.trigger.closest('.mobile-notifications') if (!scrollable) scrollable = window diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index 623af8d2..217eba7c 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -11,7 +11,7 @@ > - +
Date: Sun, 9 Oct 2022 23:42:36 +0300 Subject: some shitty initial implementation of emoji picker with popover --- src/components/emoji_input/emoji_input.js | 36 ++--- src/components/emoji_input/emoji_input.vue | 5 +- src/components/emoji_picker/emoji_picker.js | 32 ++-- src/components/emoji_picker/emoji_picker.scss | 8 +- src/components/emoji_picker/emoji_picker.vue | 210 +++++++++++++------------- src/components/popover/popover.js | 6 + 6 files changed, 150 insertions(+), 147 deletions(-) (limited to 'src/components/popover/popover.js') diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js index 5131e699..635251be 100644 --- a/src/components/emoji_input/emoji_input.js +++ b/src/components/emoji_input/emoji_input.js @@ -115,12 +115,12 @@ const EmojiInput = { caret: 0, focused: false, blurTimeout: null, - showPicker: false, temporarilyHideSuggestions: false, keepOpen: false, disableClickOutside: false, suggestions: [], - overlayStyle: {} + overlayStyle: {}, + pickerShown: false } }, components: { @@ -142,7 +142,6 @@ const EmojiInput = { return this.focused && this.suggestions && this.suggestions.length > 0 && - !this.showPicker && !this.temporarilyHideSuggestions }, textAtCaret () { @@ -285,8 +284,8 @@ const EmojiInput = { if (pickerInput) pickerInput.focus() }, triggerShowPicker () { - this.showPicker = true this.$nextTick(() => { + this.$refs.picker.showPicker() this.scrollIntoView() this.focusPickerInput() }) @@ -299,12 +298,16 @@ const EmojiInput = { }, 0) }, togglePicker () { + console.log('piick') this.input.focus() - this.showPicker = !this.showPicker - if (this.showPicker) { + if (!this.pickerShown) { + console.log('pick') this.scrollIntoView() + this.$refs.picker.showPicker() this.$refs.picker.startEmojiLoad() this.$nextTick(this.focusPickerInput) + } else { + this.$refs.picker.hidePicker() } }, replace (replacement) { @@ -441,6 +444,12 @@ const EmojiInput = { } }) }, + onPickerShown () { + this.pickerShown = true + }, + onPickerClosed () { + this.pickerShown = false + }, onBlur (e) { // Clicking on any suggestion removes focus from autocomplete, // preventing click handler ever executing. @@ -458,9 +467,6 @@ const EmojiInput = { this.blurTimeout = null } - if (!this.keepOpen) { - this.showPicker = false - } this.focused = true this.setCaret(e) this.temporarilyHideSuggestions = false @@ -523,27 +529,15 @@ const EmojiInput = { this.input.focus() } } - - this.showPicker = false }, onInput (e) { - this.showPicker = false this.setCaret(e) this.$emit('update:modelValue', e.target.value) }, - onClickInput (e) { - this.showPicker = false - }, - onClickOutside (e) { - if (this.disableClickOutside) return - this.showPicker = false - }, onStickerUploaded (e) { - this.showPicker = false this.$emit('sticker-uploaded', e) }, onStickerUploadFailed (e) { - this.showPicker = false this.$emit('sticker-upload-Failed', e) }, setCaret ({ target: { selectionStart } }) { diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index 68498ef0..63bf856e 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -1,7 +1,6 @@ import('../sticker_picker/sticker_picker.vue')), Checkbox, - StillImage + StillImage, + Popover }, methods: { + showPicker () { + console.log('pick') + this.$refs.popover.showPopover() + this.onShowing() + }, + hidePicker () { + this.$refs.popover.hidePopover() + }, setGroupRef (name) { return el => { this.groupRefs[name] = el } }, setEmojiRef (name) { return el => { this.emojiRefs[name] = el } }, + onPopoverShown () { + this.$emit('show') + }, + onPopoverClosed () { + this.$emit('close') + }, onStickerUploaded (e) { this.$emit('sticker-uploaded', e) }, @@ -251,16 +263,6 @@ const EmojiPicker = { allCustomGroups () { this.waitForDomAndInitializeLazyLoad() this.filteredEmojiGroups = this.getFilteredEmojiGroups() - }, - showing (val) { - if (val) { - this.onShowing() - } - } - }, - mounted () { - if (this.showing) { - this.onShowing() } }, destroyed () { diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 016c46d7..53363ec1 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -6,14 +6,10 @@ $emoji-picker-header-picture-height: 32px; $emoji-picker-emoji-size: 32px; .emoji-picker { + width: 25em; + max-width: 100vw; display: flex; flex-direction: column; - position: absolute; - right: 0; - left: 0; - margin: 0 !important; - // TODO: actually use popover in emoji picker - z-index: var(--ZI_popovers); background-color: $fallback--bg; background-color: var(--popover, $fallback--bg); color: $fallback--link; diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index 57bb0037..ccd45bc1 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -1,129 +1,135 @@ diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index 60c42f0f..3474d354 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -63,6 +63,7 @@ const Popover = { // used to avoid blinking if hovered onto popover graceTimeout: null, parentPopover: null, + disableClickOutside: false, childrenShown: new Set() } }, @@ -234,6 +235,10 @@ const Popover = { }, showPopover () { if (this.disabled) return + this.disableClickOutside = true + setTimeout(() => { + this.disableClickOutside = false + }, 0) const wasHidden = this.hidden this.hidden = false this.parentPopover && this.parentPopover.onChildPopoverState(this, true) @@ -294,6 +299,7 @@ const Popover = { } }, onClickOutside (e) { + if (this.disableClickOutside) return if (this.hidden) return if (this.$refs.content && this.$refs.content.contains(e.target)) return if (this.$el.contains(e.target)) return -- cgit v1.2.3-70-g09d2 From f715de43f2bae1593128f34f7362c1963a54e3a1 Mon Sep 17 00:00:00 2001 From: tusooa Date: Mon, 7 Nov 2022 13:22:40 -0500 Subject: Add labels for timeline header --- src/components/popover/popover.js | 7 ++++++- src/components/popover/popover.vue | 1 + src/components/quick_filter_settings/quick_filter_settings.vue | 5 ++--- src/components/quick_view_settings/quick_view_settings.vue | 5 ++--- src/components/timeline/timeline.vue | 1 + src/i18n/en.json | 4 +++- 6 files changed, 15 insertions(+), 8 deletions(-) (limited to 'src/components/popover/popover.js') diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index dd332c35..72b7c511 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -43,7 +43,12 @@ const Popover = { overlayCentersSelector: String, // Lets hover popover stay when clicking inside of it - stayOnClick: Boolean + stayOnClick: Boolean, + + triggerAttrs: { + type: Object, + default: {} + } }, inject: ['popoversZLayer'], // override popover z layer data () { diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index 623af8d2..9506728e 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -7,6 +7,7 @@ ref="trigger" class="button-unstyled popover-trigger-button" type="button" + v-bind="triggerAttrs" @click="onClick" > diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue index 54ea037e..87fcd716 100644 --- a/src/components/quick_filter_settings/quick_filter_settings.vue +++ b/src/components/quick_filter_settings/quick_filter_settings.vue @@ -3,6 +3,7 @@ trigger="click" class="QuickFilterSettings" :bound-to="{ x: 'container' }" + :triggerAttrs="{ title: $t('timeline.quick_filter_settings') }" > diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue index b0413cac..d7c9bf3b 100644 --- a/src/components/quick_view_settings/quick_view_settings.vue +++ b/src/components/quick_view_settings/quick_view_settings.vue @@ -3,6 +3,7 @@ trigger="click" class="QuickViewSettings" :bound-to="{ x: 'container' }" + :triggerAttrs="{ title: $t('timeline.quick_view_settings') }" > diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 8a036fd0..15cf043e 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -47,6 +47,7 @@ v-else-if="!embedded" class="loadmore-text faint veryfaint rightside-icon" :title="$t('timeline.up_to_date')" + :aria-disabled="true" @click.prevent >