diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue index 7b1f5cdae..483783cfb 100644 --- a/src/components/account_actions/account_actions.vue +++ b/src/components/account_actions/account_actions.vue @@ -69,12 +69,10 @@ margin: 0 .8em; } -.account-tools-popover { -} - .account-actions button.dropdown-item { margin-left: 0; } + .account-actions .trigger-button { color: $fallback--lightText; color: var(--lightText, $fallback--lightText); diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue index 1a00054c9..47054db0a 100644 --- a/src/components/emoji_reactions/emoji_reactions.vue +++ b/src/components/emoji_reactions/emoji_reactions.vue @@ -23,7 +23,12 @@ :compact="true" />
- + + + {{ account.screen_name }}
@@ -44,15 +49,14 @@ - {{ showAll ? $t('general.show_less') : showMoreString }} - + v-if="tooManyReactions" + class="emoji-reaction-expand faint" + href="javascript:void(0)" + @click="toggleShowAll" + > + {{ showAll ? $t('general.show_less') : showMoreString }} + - diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index 064016662..597e22cd2 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -1,14 +1,24 @@ const Popover = { name: 'Popover', - props: [ - 'trigger', - 'placement', - 'boundTo', - 'padding', - 'offset', - 'popoverClass' - ], + props: { + // Action to trigger popover: either 'hover' or 'click' + trigger: String, + // Either 'top' or 'bottom' + placement: String, + // Takes object with properties 'x' and 'y', values of these can be + // 'container' for using offsetParent as boundaries for either axis + // or 'viewport' + boundTo: Object, + // Takes a top/bottom/left/right object, how much space to leave + // between boundary and popover element + margin: Object, + // Takes a x/y object and tells how many pixels to offset from + // anchor point on either axis + offset: Object, + // Additional styles you may want for the popover container + popoverClass: String + }, data () { return { hidden: true, @@ -16,14 +26,14 @@ const Popover = { oldSize: { width: 0, height: 0 } } }, - computed: { - display () { - return !this.hidden - } - }, methods: { updateStyles () { - if (this.hidden) return { opacity: 0 } + if (this.hidden) { + this.styles = { + opacity: 0 + } + return + } // Popover will be anchored around this element, trigger ref is the container, so // its children are what are inside the slot. Expect only one slot="trigger". @@ -36,31 +46,31 @@ const Popover = { const parentBounds = this.boundTo && (this.boundTo.x === 'container' || this.boundTo.y === 'container') && this.$el.offsetParent.getBoundingClientRect() - const padding = this.padding || {} + const margin = this.margin || {} // What are the screen bounds for the popover? Viewport vs container - // when using viewport, using default padding values to dodge the navbar + // when using viewport, using default margin values to dodge the navbar const xBounds = this.boundTo && this.boundTo.x === 'container' ? { - min: parentBounds.left + (padding.left || 0), - max: parentBounds.right - (padding.right || 0) + min: parentBounds.left + (margin.left || 0), + max: parentBounds.right - (margin.right || 0) } : { - min: 0 + (padding.left || 10), - max: window.innerWidth - (padding.right || 10) + min: 0 + (margin.left || 10), + max: window.innerWidth - (margin.right || 10) } const yBounds = this.boundTo && this.boundTo.y === 'container' ? { - min: parentBounds.top + (padding.top || 0), - max: parentBounds.bottom - (padding.bottom || 0) + min: parentBounds.top + (margin.top || 0), + max: parentBounds.bottom - (margin.bottom || 0) } : { - min: 0 + (padding.top || 50), - max: window.innerHeight - (padding.bottom || 5) + min: 0 + (margin.top || 50), + max: window.innerHeight - (margin.bottom || 5) } let horizOffset = 0 // If overflowing from left, move it so that it doesn't if ((origin.x - content.offsetWidth * 0.5) < xBounds.min) { - horizOffset = -(origin.x - content.offsetWidth * 0.5) + xBounds.min + horizOffset += -(origin.x - content.offsetWidth * 0.5) + xBounds.min } // If overflowing from right, move it so that it doesn't @@ -85,9 +95,11 @@ const Popover = { const xOffset = (this.offset && this.offset.x) || 0 const translateX = (anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset + xOffset + // Note, separate translateX and translateY avoids blurry text on chromium, + // single translate or translate3d resulted in blurry text. this.styles = { opacity: 1, - transform: `translate(${Math.floor(translateX)}px) translateY(${Math.floor(translateY)}px)` + transform: `translateX(${Math.floor(translateX)}px) translateY(${Math.floor(translateY)}px)` } }, showPopover () { diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index 2d1219f28..bbf6dbadf 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -10,7 +10,7 @@