diff options
| -rw-r--r-- | src/components/popper/popper.scss | 9 | ||||
| -rw-r--r-- | src/components/status/status.js | 2 | ||||
| -rw-r--r-- | src/components/status/status.vue | 116 |
3 files changed, 61 insertions, 66 deletions
diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss index 279b01be..06daa871 100644 --- a/src/components/popper/popper.scss +++ b/src/components/popper/popper.scss @@ -20,7 +20,6 @@ margin: 5px; border-color: $fallback--bg; border-color: var(--bg, $fallback--bg); - z-index: 1; } &[x-placement^="top"] { @@ -31,7 +30,7 @@ border-left-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; - bottom: -5px; + bottom: -4px; left: calc(50% - 5px); margin-top: 0; margin-bottom: 0; @@ -46,7 +45,7 @@ border-left-color: transparent !important; border-right-color: transparent !important; border-top-color: transparent !important; - top: -5px; + top: -4px; left: calc(50% - 5px); margin-top: 0; margin-bottom: 0; @@ -61,7 +60,7 @@ border-left-color: transparent !important; border-top-color: transparent !important; border-bottom-color: transparent !important; - left: -5px; + left: -4px; top: calc(50% - 5px); margin-left: 0; margin-right: 0; @@ -76,7 +75,7 @@ border-top-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important; - right: -5px; + right: -4px; top: calc(50% - 5px); margin-left: 0; margin-right: 0; diff --git a/src/components/status/status.js b/src/components/status/status.js index d24feccf..36455f2a 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -1,4 +1,3 @@ -import Popper from 'vue-popperjs/src/component/popper.js.vue' import Attachment from '../attachment/attachment.vue' import FavoriteButton from '../favorite_button/favorite_button.vue' import RetweetButton from '../retweet_button/retweet_button.vue' @@ -290,7 +289,6 @@ const Status = { } }, components: { - Popper, Attachment, FavoriteButton, RetweetButton, diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 79fbe47d..fd1705a0 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -174,51 +174,47 @@ v-if="isReply" class="reply-to-and-accountname" > - <Popper + <v-popover + v-if="!isPreview" ref="statusPreviewPopper" - :options="{ - placement: 'top-start', - modifiers: { - preventOverflow: { padding: 50, boundariesElement: 'viewport' }, - } - }" + popoverClass="status-popover" + placement="top-start" + trigger="hover" + :offset="5" + :container="false" @show="replyEnter(status.in_reply_to_status_id)" > - <div class="popper-wrapper status-preview"> + <div slot="popover"> + <status + v-if="preview" + :is-preview="true" + :statusoid="preview" + :compact="true" + /> <div - class="popper-wrapper-inner" - @mouseover.prevent.stop - @focus.prevent.stop + v-else + class="status-preview-loading" > - <status - v-if="preview" - :is-preview="true" - :statusoid="preview" - :compact="true" - /> - <div - v-else - class="status-preview-loading" - > - <i class="icon-spin4 animate-spin" /> - </div> + <i class="icon-spin4 animate-spin" /> </div> </div> <a - slot="reference" class="reply-to" href="#" :aria-label="$t('tool_tip.reply')" @click.prevent="gotoOriginal(status.in_reply_to_status_id)" > - <i - v-if="!isPreview" - class="button-icon icon-reply" - /> + <i class="button-icon icon-reply" /> <span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span> </a> - </Popper> + </v-popover> + <span + v-else + class="reply-to" + > + <span class="reply-to-text">{{ $t('status.reply_to') }}</span> + </span> <router-link :to="replyProfileLink"> {{ replyToName }} </router-link> @@ -604,6 +600,8 @@ $status-margin: 0.75em; overflow: hidden; text-overflow: ellipsis; margin: 0 0.4em 0 0.2em; + color: $fallback--faint; + color: var(--faint, $fallback--faint); } .replies-separator { @@ -863,36 +861,23 @@ a.unmute { } } -.popper-wrapper.status-preview { - font-size: 1rem; - background-color: $fallback--bg; - background-color: var(--bg, $fallback--bg); - border-color: $fallback--border; - border-color: var(--border, $fallback--border); - border-style: solid; - border-width: 1px; - border-radius: $fallback--tooltipRadius; - border-radius: var(--tooltipRadius, $fallback--tooltipRadius); - box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); - box-shadow: var(--popupShadow); - min-width: 15em; - max-width: 95%; - margin-left: 0.5em; - - .status-el.status-el { - border: none; +.tooltip.popover.status-popover { + .popover-inner { + font-size: 1rem; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); + border-style: solid; + border-width: 1px; + border-radius: $fallback--tooltipRadius; + border-radius: var(--tooltipRadius, $fallback--tooltipRadius); + box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); + box-shadow: var(--popupShadow); + min-width: 15em; + max-width: 95%; + margin-left: 0.5em; } - .status-preview-loading { - padding: 1em; - text-align: center; - - i { - font-size: 2em; - } - } - - .popper__arrow::before { + .popover-arrow::before { position: absolute; content: ''; left: -7px; @@ -900,19 +885,32 @@ a.unmute { z-index: -1; } - &[x-placement^="bottom"] .popper__arrow::before { + &[x-placement^="bottom-start"] .popover-arrow::before { top: -2px; border-top-width: 0; border-bottom-color: $fallback--border; border-bottom-color: var(--border, $fallback--border); } - &[x-placement^="top"] .popper__arrow::before { + &[x-placement^="top-start"] .popover-arrow::before { bottom: -2px; border-bottom-width: 0; border-top-color: $fallback--border; border-top-color: var(--border, $fallback--border); } + + .status-el.status-el { + border: none; + } + + .status-preview-loading { + padding: 1em; + text-align: center; + + i { + font-size: 2em; + } + } } .favs-repeated-users { |