itepechi/akkoma-fe
1
0
Fork 0
Code Issues Pull requests Releases 1 Activity

migrate Popper to v-popover

Browse source
This commit is contained in:
taehoon 2019-07-17 12:50:49 -04:00
parent 2f7f6967fd
commit 85c897403a
3 changed files with 68 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/popper/popper.scss
View file

@ -20,7 +20,6 @@
margin: 5px; margin: 5px;
border-color: $fallback--bg; border-color: $fallback--bg;
border-color: var(--bg, $fallback--bg); border-color: var(--bg, $fallback--bg);
z-index: 1;
} }
&[x-placement^="top"] { &[x-placement^="top"] {
@ -31,7 +30,7 @@
border-left-color: transparent !important; border-left-color: transparent !important;
border-right-color: transparent !important; border-right-color: transparent !important;
border-bottom-color: transparent !important; border-bottom-color: transparent !important;
bottom: -5px; bottom: -4px;
left: calc(50% - 5px); left: calc(50% - 5px);
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
@ -46,7 +45,7 @@
border-left-color: transparent !important; border-left-color: transparent !important;
border-right-color: transparent !important; border-right-color: transparent !important;
border-top-color: transparent !important; border-top-color: transparent !important;
top: -5px; top: -4px;
left: calc(50% - 5px); left: calc(50% - 5px);
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
@ -61,7 +60,7 @@
border-left-color: transparent !important; border-left-color: transparent !important;
border-top-color: transparent !important; border-top-color: transparent !important;
border-bottom-color: transparent !important; border-bottom-color: transparent !important;
left: -5px; left: -4px;
top: calc(50% - 5px); top: calc(50% - 5px);
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
@ -76,7 +75,7 @@
border-top-color: transparent !important; border-top-color: transparent !important;
border-right-color: transparent !important; border-right-color: transparent !important;
border-bottom-color: transparent !important; border-bottom-color: transparent !important;
right: -5px; right: -4px;
top: calc(50% - 5px); top: calc(50% - 5px);
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;

2
src/components/status/status.js
View file

@ -1,4 +1,3 @@
import Popper from 'vue-popperjs/src/component/popper.js.vue'
import Attachment from '../attachment/attachment.vue' import Attachment from '../attachment/attachment.vue'
import FavoriteButton from '../favorite_button/favorite_button.vue' import FavoriteButton from '../favorite_button/favorite_button.vue'
import RetweetButton from '../retweet_button/retweet_button.vue' import RetweetButton from '../retweet_button/retweet_button.vue'
@ -290,7 +289,6 @@ const Status = {
} }
}, },
components: { components: {
Popper,
Attachment, Attachment,
FavoriteButton, FavoriteButton,
RetweetButton, RetweetButton,

130
src/components/status/status.vue
View file

@ -174,51 +174,47 @@
v-if="isReply" v-if="isReply"
class="reply-to-and-accountname" class="reply-to-and-accountname"
> >
<Popper <v-popover
v-if="!isPreview"
ref="statusPreviewPopper" ref="statusPreviewPopper"
:options="{ popoverClass="status-popover"
placement: 'top-start', placement="top-start"
modifiers: { trigger="hover"
preventOverflow: { padding: 50, boundariesElement: 'viewport' }, :offset="5"
} :container="false"
}"
@show="replyEnter(status.in_reply_to_status_id)" @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 <div
class="popper-wrapper-inner" v-else
@mouseover.prevent.stop class="status-preview-loading"
@focus.prevent.stop
> >
<status <i class="icon-spin4 animate-spin" />
v-if="preview"
:is-preview="true"
:statusoid="preview"
:compact="true"
/>
<div
v-else
class="status-preview-loading"
>
<i class="icon-spin4 animate-spin" />
</div>
</div> </div>
</div> </div>
<a <a
slot="reference"
class="reply-to" class="reply-to"
href="#" href="#"
:aria-label="$t('tool_tip.reply')" :aria-label="$t('tool_tip.reply')"
@click.prevent="gotoOriginal(status.in_reply_to_status_id)" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
> >
<i <i class="button-icon icon-reply" />
v-if="!isPreview"
class="button-icon icon-reply"
/>
<span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span> <span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
</a> </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"> <router-link :to="replyProfileLink">
{{ replyToName }} {{ replyToName }}
</router-link> </router-link>
@ -604,6 +600,8 @@ $status-margin: 0.75em;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 0 0.4em 0 0.2em; margin: 0 0.4em 0 0.2em;
color: $fallback--faint;
color: var(--faint, $fallback--faint);
} }
.replies-separator { .replies-separator {
@ -863,21 +861,43 @@ a.unmute {
} }
} }
.popper-wrapper.status-preview { .tooltip.popover.status-popover {
font-size: 1rem; .popover-inner {
background-color: $fallback--bg; font-size: 1rem;
background-color: var(--bg, $fallback--bg); border-color: $fallback--border;
border-color: $fallback--border; border-color: var(--border, $fallback--border);
border-color: var(--border, $fallback--border); border-style: solid;
border-style: solid; border-width: 1px;
border-width: 1px; border-radius: $fallback--tooltipRadius;
border-radius: $fallback--tooltipRadius; border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
border-radius: var(--tooltipRadius, $fallback--tooltipRadius); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); box-shadow: var(--popupShadow);
box-shadow: var(--popupShadow); min-width: 15em;
min-width: 15em; max-width: 95%;
max-width: 95%; margin-left: 0.5em;
margin-left: 0.5em; }
.popover-arrow::before {
position: absolute;
content: '';
left: -7px;
border: solid 7px transparent;
z-index: -1;
}
&[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-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 { .status-el.status-el {
border: none; border: none;
@ -891,28 +911,6 @@ a.unmute {
font-size: 2em; font-size: 2em;
} }
} }
.popper__arrow::before {
position: absolute;
content: '';
left: -7px;
border: solid 7px transparent;
z-index: -1;
}
&[x-placement^="bottom"] .popper__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 {
bottom: -2px;
border-bottom-width: 0;
border-top-color: $fallback--border;
border-top-color: var(--border, $fallback--border);
}
} }
.favs-repeated-users { .favs-repeated-users {