diff --git a/src/App.scss b/src/App.scss index 081ce2fdb..1b781304e 100644 --- a/src/App.scss +++ b/src/App.scss @@ -339,8 +339,6 @@ nav { grid-template-areas: "content"; padding: 0; - --_actionsColumnCount: 3; - .column { padding-top: 0; margin: var(--navbar-height) 0 0 0; diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index 6b49cf682..242068109 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -275,6 +275,11 @@ const Popover = { this.scrollable.removeEventListener('scroll', this.onScroll) this.scrollable.removeEventListener('resize', this.onResize) }, + resizePopover () { + setTimeout(() => { + this.updateStyles() + }, 1) + }, onMouseenter (e) { if (this.trigger === 'hover') { this.lockReEntry = false @@ -323,7 +328,12 @@ const Popover = { this.updateStyles() }, onResize (e) { - this.updateStyles() + const content = this.$refs.content + if (!content) return + if (this.oldSize.width !== content.offsetWidth || this.oldSize.height !== content.offsetHeight) { + this.updateStyles() + this.oldSize = { width: content.offsetWidth, height: content.offsetHeight } + } }, onChildPopoverState (childRef, state) { if (state) { @@ -337,12 +347,7 @@ const Popover = { // Monitor changes to content size, update styles only when content sizes have changed, // that should be the only time we need to move the popover box if we don't care about scroll // or resize - const content = this.$refs.content - if (!content) return - if (this.oldSize.width !== content.offsetWidth || this.oldSize.height !== content.offsetHeight) { - this.updateStyles() - this.oldSize = { width: content.offsetWidth, height: content.offsetHeight } - } + this.onResize() }, mounted () { this.teleport = true diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index 33817fa6a..f91abc3f0 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -33,6 +33,7 @@ name="content" class="popover-inner" :close="hidePopover" + :resize="resizePopover" /> diff --git a/src/components/status_action_buttons/action_button.js b/src/components/status_action_buttons/action_button.js index b87e07687..193a96ee9 100644 --- a/src/components/status_action_buttons/action_button.js +++ b/src/components/status_action_buttons/action_button.js @@ -112,11 +112,12 @@ export default { this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji }) } }, - doActionWrap (button) { + doActionWrap (button, close) { if (button.name === 'emoji') { this.$refs.picker.showPicker() } else { this.getComponent(button) === 'button' && this.doAction(button) + close() } } } diff --git a/src/components/status_action_buttons/action_button.scss b/src/components/status_action_buttons/action_button.scss index fe4983946..14bfdfa9d 100644 --- a/src/components/status_action_buttons/action_button.scss +++ b/src/components/status_action_buttons/action_button.scss @@ -3,15 +3,15 @@ .quick-action { display: grid; - grid-template-columns: max-content; + grid-template-columns: minmax(max-content, 1fr); grid-gap: 0.25em; + align-items: center; + height: 1.5em; - &.-pin { - margin: calc(-2px - 0.25em); - padding: 0.25em; - border: 2px dashed var(--icon); - border-radius: var(--roundness); - grid-template-columns: 1fr auto; + .action-counter { + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .action-button-inner, @@ -21,21 +21,30 @@ } .separator { - width: 0.5em; + display: block; + align-self: stretch; + width: 1px; + background-color: var(--icon); + margin-right: 0.5em; + } - &::before { - content: ""; - display: block; - width: 1px; - height: 1.5em; - background-color: var(--icon); + &.-pin { + margin: calc(-2px - 0.25em); + padding: 0.25em; + border: 2px dashed var(--icon); + border-radius: var(--roundness); + grid-template-columns: minmax(max-content, 1fr) auto; + + .extra-button, + .separator { + display: none; } } .action-button-inner { display: grid; grid-gap: 1em; - grid-template-columns: max-content max-content; + grid-template-columns: max-content 1fr; grid-auto-flow: column; grid-auto-columns: max-content; align-items: center; @@ -45,6 +54,7 @@ .action-button { display: grid; grid-auto-flow: column; + align-items: center; padding: 0; .action-button-inner { diff --git a/src/components/status_action_buttons/action_button.vue b/src/components/status_action_buttons/action_button.vue index 40d3397c5..b9dca8818 100644 --- a/src/components/status_action_buttons/action_button.vue +++ b/src/components/status_action_buttons/action_button.vue @@ -8,11 +8,12 @@ class="action-button-inner" :class="buttonInnerClass" role="menuitem" + type="button" + target="_blank" :tabindex="0" :disabled="buttonClass.disabled" :href="getComponent(button) == 'a' ? button.link?.(funcArg) || getRemoteInteractionLink : undefined" - @click.prevent="doActionWrap(button)" - @click="button.name === 'emoji' ? () => {} : close()" + @click="doActionWrap(button, close)" >