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 @@