forked from AkkomaGang/akkoma-fe
use popper for status preview
This commit is contained in:
taehoon
parent
f5c37231e1
commit
5faafdb428
2 changed files with 85 additions and 91 deletions
|
|
@ -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)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -170,24 +170,30 @@
|
|||
</div>
|
||||
|
||||
<div class="heading-reply-row">
|
||||
<div
|
||||
v-if="isReply"
|
||||
class="reply-to-and-accountname"
|
||||
>
|
||||
<a
|
||||
class="reply-to"
|
||||
href="#"
|
||||
:aria-label="$t('tool_tip.reply')"
|
||||
@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
|
||||
@mouseenter.prevent.stop="replyEnter(status.in_reply_to_status_id, $event)"
|
||||
@mouseleave.prevent.stop="replyLeave()"
|
||||
>
|
||||
<i
|
||||
v-if="!isPreview"
|
||||
class="button-icon icon-reply"
|
||||
<div v-if="isReply" class="reply-to-and-accountname">
|
||||
<Popper ref="foo" :options="{ placement: 'bottom-start' }" @show="replyEnter(status.in_reply_to_status_id)">
|
||||
<div class="popper-wrapper status-preview">
|
||||
<status
|
||||
v-if="preview"
|
||||
:isPreview="true"
|
||||
:statusoid="preview"
|
||||
:compact="true"
|
||||
/>
|
||||
<span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
|
||||
<div v-else class="status-preview-loading">
|
||||
<i class="icon-spin4 animate-spin"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
slot="reference"
|
||||
class="reply-to"
|
||||
href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
|
||||
:aria-label="$t('tool_tip.reply')"
|
||||
>
|
||||
<i class="button-icon icon-reply" v-if="!isPreview"></i>
|
||||
<span class="faint-link reply-to-text">{{$t('status.reply_to')}}</span>
|
||||
</a>
|
||||
</Popper>
|
||||
<router-link :to="replyProfileLink">
|
||||
{{ replyToName }}
|
||||
</router-link>
|
||||
|
|
@ -224,25 +230,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="showPreview"
|
||||
class="status-preview-container"
|
||||
>
|
||||
<status
|
||||
v-if="preview"
|
||||
class="status-preview"
|
||||
:is-preview="true"
|
||||
:statusoid="preview"
|
||||
:compact="true"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="status-preview status-preview-loading"
|
||||
>
|
||||
<i class="icon-spin4 animate-spin" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="longSubject"
|
||||
class="status-content-wrapper"
|
||||
|
|
@ -439,18 +426,6 @@ $status-margin: 0.75em;
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
.status-preview.status-el {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: $fallback--border;
|
||||
border-color: var(--border, $fallback--border);
|
||||
}
|
||||
|
||||
.status-preview-container {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.status-pin {
|
||||
padding: $status-margin $status-margin 0;
|
||||
display: flex;
|
||||
|
|
@ -458,43 +433,6 @@ $status-margin: 0.75em;
|
|||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.status-preview {
|
||||
position: absolute;
|
||||
max-width: 95%;
|
||||
display: flex;
|
||||
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);
|
||||
margin-top: 0.25em;
|
||||
margin-left: 0.5em;
|
||||
z-index: 50;
|
||||
|
||||
.status {
|
||||
flex: 1;
|
||||
border: 0;
|
||||
min-width: 15em;
|
||||
}
|
||||
}
|
||||
|
||||
.status-preview-loading {
|
||||
display: block;
|
||||
min-width: 15em;
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
|
||||
i {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
.media-left {
|
||||
margin-right: $status-margin;
|
||||
|
|
@ -600,6 +538,7 @@ $status-margin: 0.75em;
|
|||
}
|
||||
|
||||
.heading-reply-row {
|
||||
position: relative;
|
||||
align-content: baseline;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
|
|
@ -898,6 +837,64 @@ a.unmute {
|
|||
}
|
||||
}
|
||||
|
||||
.popper-wrapper.status-preview {
|
||||
font-size: 14px;
|
||||
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;
|
||||
}
|
||||
|
||||
> .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;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue