unified how panel-footer works between regular timelines and user timeline

This commit is contained in:
Henry Jameson 2022-04-25 23:50:22 +03:00
parent f2b75a075d
commit 2a6f42fef3
7 changed files with 53 additions and 37 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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"

View File

@ -22,7 +22,8 @@ const Timeline = {
'embedded',
'count',
'pinnedStatusIds',
'inProfile'
'inProfile',
'footerSlipgate' // reference to an element where we should put our footer
],
data () {
return {

View File

@ -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>

View File

@ -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

View File

@ -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