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); --text: var(--faint);
color: var(--text); color: var(--text);
} }
.thread-ancestor-dive-box { .thread-ancestor-dive-box {
padding-left: var(--status-margin, $status-margin); padding-left: var(--status-margin, $status-margin);
border-bottom-width: 1px; border-bottom-width: 1px;
@ -254,6 +255,10 @@
border-bottom: none; border-bottom: none;
} }
&:last-child .conversation-status {
border-bottom: none;
}
.thread-ancestors + .thread-tree > .conversation-status { .thread-ancestors + .thread-tree > .conversation-status {
border-top-width: 1px; border-top-width: 1px;
border-top-style: solid; border-top-style: solid;

View file

@ -11,10 +11,6 @@
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
} }
.notifications-footer {
border: none;
}
.notification { .notification {
position: relative; position: relative;
@ -47,6 +43,10 @@
} }
} }
&:last-child .Notification {
border-bottom: none;
}
.non-mention { .non-mention {
display: flex; display: flex;
flex: 1; flex: 1;

View file

@ -36,7 +36,7 @@
<notification :notification="notification" /> <notification :notification="notification" />
</div> </div>
</div> </div>
<div class="panel-footer notifications-footer"> <div class="panel-footer">
<div <div
v-if="bottomedOut" v-if="bottomedOut"
class="new-status-notification text-center faint" class="new-status-notification text-center faint"

View file

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

View file

@ -46,6 +46,7 @@
</div> </div>
</div> </div>
<div :class="classes.footer"> <div :class="classes.footer">
<teleport :to="footerSlipgate" :disabled="!embedded || !footerSlipgate">
<div <div
v-if="count===0" v-if="count===0"
class="new-status-notification text-center faint" class="new-status-notification text-center faint"
@ -77,6 +78,7 @@
size="lg" size="lg"
/> />
</div> </div>
</teleport>
</div> </div>
</div> </div>
</template> </template>

View file

@ -39,7 +39,8 @@ const UserProfile = {
return { return {
error: false, error: false,
userId: null, userId: null,
tab: defaultTabKey tab: defaultTabKey,
footerRef: null
} }
}, },
created () { created () {
@ -78,6 +79,9 @@ const UserProfile = {
} }
}, },
methods: { methods: {
setFooterRef (el) {
this.footerRef = el
},
load (userNameOrId) { load (userNameOrId) {
const startFetchingTimeline = (timeline, userId) => { const startFetchingTimeline = (timeline, userId) => {
// Clear timeline only if load another user's profile // Clear timeline only if load another user's profile

View file

@ -56,6 +56,7 @@
:user-id="userId" :user-id="userId"
:pinned-status-ids="user.pinnedStatusIds" :pinned-status-ids="user.pinnedStatusIds"
:in-profile="true" :in-profile="true"
:footerSlipgate="footerRef"
/> />
<div <div
v-if="followsTabVisible" v-if="followsTabVisible"
@ -94,6 +95,7 @@
:timeline="media" :timeline="media"
:user-id="userId" :user-id="userId"
:in-profile="true" :in-profile="true"
:footerSlipgate="footerRef"
/> />
<Timeline <Timeline
v-if="isUs" v-if="isUs"
@ -105,8 +107,10 @@
timeline-name="favorites" timeline-name="favorites"
:timeline="favorites" :timeline="favorites"
:in-profile="true" :in-profile="true"
:footerSlipgate="footerRef"
/> />
</tab-switcher> </tab-switcher>
<div class="panel-footer" :ref="setFooterRef"></div>
</div> </div>
<div <div
v-else v-else