forked from srxl/akkoma-fe
unified how panel-footer works between regular timelines and user timeline
This commit is contained in:
parent
f2b75a075d
commit
2a6f42fef3
7 changed files with 53 additions and 37 deletions
|
@ -223,6 +223,7 @@
|
|||
--text: var(--faint);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.thread-ancestor-dive-box {
|
||||
padding-left: var(--status-margin, $status-margin);
|
||||
border-bottom-width: 1px;
|
||||
|
@ -254,6 +255,10 @@
|
|||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:last-child .conversation-status {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.thread-ancestors + .thread-tree > .conversation-status {
|
||||
border-top-width: 1px;
|
||||
border-top-style: solid;
|
||||
|
|
|
@ -11,10 +11,6 @@
|
|||
color: var(--text, $fallback--text);
|
||||
}
|
||||
|
||||
.notifications-footer {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.notification {
|
||||
position: relative;
|
||||
|
||||
|
@ -47,6 +43,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:last-child .Notification {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.non-mention {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
|
|
@ -36,7 +36,7 @@
|
|||
<notification :notification="notification" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer notifications-footer">
|
||||
<div class="panel-footer">
|
||||
<div
|
||||
v-if="bottomedOut"
|
||||
class="new-status-notification text-center faint"
|
||||
|
|
|
@ -22,7 +22,8 @@ const Timeline = {
|
|||
'embedded',
|
||||
'count',
|
||||
'pinnedStatusIds',
|
||||
'inProfile'
|
||||
'inProfile',
|
||||
'footerSlipgate' // reference to an element where we should put our footer
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
|
|
|
@ -46,37 +46,39 @@
|
|||
</div>
|
||||
</div>
|
||||
<div :class="classes.footer">
|
||||
<div
|
||||
v-if="count===0"
|
||||
class="new-status-notification text-center faint"
|
||||
>
|
||||
{{ $t('timeline.no_statuses') }}
|
||||
</div>
|
||||
<div
|
||||
v-else-if="bottomedOut"
|
||||
class="new-status-notification text-center faint"
|
||||
>
|
||||
{{ $t('timeline.no_more_statuses') }}
|
||||
</div>
|
||||
<button
|
||||
v-else-if="!timeline.loading"
|
||||
class="button-unstyled -link"
|
||||
@click.prevent="fetchOlderStatuses()"
|
||||
>
|
||||
<div class="new-status-notification text-center">
|
||||
{{ $t('timeline.load_older') }}
|
||||
<teleport :to="footerSlipgate" :disabled="!embedded || !footerSlipgate">
|
||||
<div
|
||||
v-if="count===0"
|
||||
class="new-status-notification text-center faint"
|
||||
>
|
||||
{{ $t('timeline.no_statuses') }}
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
v-else
|
||||
class="new-status-notification text-center"
|
||||
>
|
||||
<FAIcon
|
||||
icon="circle-notch"
|
||||
spin
|
||||
size="lg"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="bottomedOut"
|
||||
class="new-status-notification text-center faint"
|
||||
>
|
||||
{{ $t('timeline.no_more_statuses') }}
|
||||
</div>
|
||||
<button
|
||||
v-else-if="!timeline.loading"
|
||||
class="button-unstyled -link"
|
||||
@click.prevent="fetchOlderStatuses()"
|
||||
>
|
||||
<div class="new-status-notification text-center">
|
||||
{{ $t('timeline.load_older') }}
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
v-else
|
||||
class="new-status-notification text-center"
|
||||
>
|
||||
<FAIcon
|
||||
icon="circle-notch"
|
||||
spin
|
||||
size="lg"
|
||||
/>
|
||||
</div>
|
||||
</teleport>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -39,7 +39,8 @@ const UserProfile = {
|
|||
return {
|
||||
error: false,
|
||||
userId: null,
|
||||
tab: defaultTabKey
|
||||
tab: defaultTabKey,
|
||||
footerRef: null
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
@ -78,6 +79,9 @@ const UserProfile = {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
setFooterRef (el) {
|
||||
this.footerRef = el
|
||||
},
|
||||
load (userNameOrId) {
|
||||
const startFetchingTimeline = (timeline, userId) => {
|
||||
// Clear timeline only if load another user's profile
|
||||
|
|
|
@ -56,6 +56,7 @@
|
|||
:user-id="userId"
|
||||
:pinned-status-ids="user.pinnedStatusIds"
|
||||
:in-profile="true"
|
||||
:footerSlipgate="footerRef"
|
||||
/>
|
||||
<div
|
||||
v-if="followsTabVisible"
|
||||
|
@ -94,6 +95,7 @@
|
|||
:timeline="media"
|
||||
:user-id="userId"
|
||||
:in-profile="true"
|
||||
:footerSlipgate="footerRef"
|
||||
/>
|
||||
<Timeline
|
||||
v-if="isUs"
|
||||
|
@ -105,8 +107,10 @@
|
|||
timeline-name="favorites"
|
||||
:timeline="favorites"
|
||||
:in-profile="true"
|
||||
:footerSlipgate="footerRef"
|
||||
/>
|
||||
</tab-switcher>
|
||||
<div class="panel-footer" :ref="setFooterRef"></div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
|
|
Loading…
Reference in a new issue