From 2a6f42fef3ff9c087aab4589d229e0f6c1b45c90 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 Apr 2022 23:50:22 +0300
Subject: [PATCH] unified how panel-footer works between regular timelines and
user timeline
---
src/components/conversation/conversation.vue | 5 ++
.../notifications/notifications.scss | 8 +--
.../notifications/notifications.vue | 2 +-
src/components/timeline/timeline.js | 3 +-
src/components/timeline/timeline.vue | 62 ++++++++++---------
src/components/user_profile/user_profile.js | 6 +-
src/components/user_profile/user_profile.vue | 4 ++
7 files changed, 53 insertions(+), 37 deletions(-)
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index c2c323c1..48e7934c 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -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;
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 976688d1..07abee27 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -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;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index bfc97dc0..d5b2d1d5 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -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"
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index f79b5167..94f0e916 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -22,7 +22,8 @@ const Timeline = {
'embedded',
'count',
'pinnedStatusIds',
- 'inProfile'
+ 'inProfile',
+ 'footerSlipgate' // reference to an element where we should put our footer
],
data () {
return {
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 958808f6..ebf8ab52 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -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>
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index eeb6ea40..f779b823 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -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
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 67966ff4..74d101c4 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -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