diff --git a/src/components/status/status.js b/src/components/status/status.js index d17ba318..ae3aacbd 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -1,3 +1,4 @@ +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' @@ -38,7 +39,6 @@ const Status = { unmuted: false, userExpanded: false, preview: null, - showPreview: false, showingTall: this.inConversation && this.focused, showingLongSubject: false, error: null, @@ -290,6 +290,7 @@ const Status = { } }, components: { + Popper, Attachment, FavoriteButton, RetweetButton, @@ -377,7 +378,6 @@ const Status = { } }, replyEnter (id, event) { - this.showPreview = true const targetId = id const statuses = this.$store.state.statuses.allStatuses @@ -394,9 +394,6 @@ const Status = { this.preview = find(statuses, { 'id': targetId }) } }, - replyLeave () { - this.showPreview = false - }, generateUserProfileLink (id, name) { return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames) }, diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 912f77d2..d03fe143 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -170,24 +170,30 @@
-
- - - {{ $t('status.reply_to') }} - +
+ +
+ +
+ +
+
+ + + + {{$t('status.reply_to')}} + +
{{ replyToName }} @@ -224,25 +230,6 @@
-
- -
- -
-
-
.status-el.status-el { + border: none; + } + + > .status-preview-loading { + padding: 1em; + text-align: center; + + i { + font-size: 2em; + } + } + + &[x-placement^="bottom"] .popper__arrow { + &:before { + position: absolute; + content: ''; + top: -2px; + left: -7px; + border-width: 0 7px 7px 7px; + border-color: transparent transparent $fallback--border transparent; + border-color: transparent transparent var(--border, $fallback--border) transparent; + border-style: solid; + z-index: -1; + } + } + + &[x-placement^="top"] .popper__arrow { + &:before { + position: absolute; + content: ''; + bottom: -2px; + left: -7px; + border-width: 7px 7px 0 7px; + border-color: $fallback--border transparent transparent transparent; + border-color: var(--border, $fallback--border) transparent transparent transparent; + border-style: solid; + z-index: -1; + } + } +} + .favs-repeated-users { margin-top: $status-margin;