hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'scrolltotop' into shigusegubu-vue3

Browse source 
* scrolltotop:
  port changes to notifications
  cleanup
  added scrolltotop for mobile notifications
  fix scrollerref not setting properly
  apply same for scrolltop button
  refactor css for timeline buttons, make it a bit easier to tap them
This commit is contained in:
Henry Jameson 2022-09-28 21:35:24 +03:00
commit 4647cc672c
10 changed files with 139 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/mobile_nav/mobile_nav.js
View file

@ -8,13 +8,17 @@ import { library } from '@fortawesome/fontawesome-svg-core'
import {
faTimes,
faBell,
faBars
faBars,
faArrowUp,
faMinus
} from '@fortawesome/free-solid-svg-icons'
library.add(
faTimes,
faBell,
faBars
faBars,
faArrowUp,
faMinus
)
const MobileNav = {
@ -25,7 +29,8 @@ const MobileNav = {
},
data: () => ({
notificationsCloseGesture: undefined,
notificationsOpen: false
notificationsOpen: false,
notificationsAtTop: true
}),
created () {
this.notificationsCloseGesture = GestureService.swipeGesture(
@ -80,6 +85,9 @@ const MobileNav = {
scrollToTop () {
window.scrollTo(0, 0)
},
scrollMobileNotificationsToTop () {
this.$refs.mobileNotifications.scrollTo(0, 0)
},
logout () {
this.$router.replace('/main/public')
this.$store.dispatch('logout')
@ -89,6 +97,7 @@ const MobileNav = {
this.$store.dispatch('markNotificationsAsSeen')
},
onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
this.notificationsAtTop = scrollTop > 0
if (scrollTop + clientHeight >= scrollHeight) {
this.$refs.notifications.fetchOlderNotifications()
}

19
src/components/mobile_nav/mobile_nav.vue
View file

@ -48,6 +48,20 @@
>
<div class="mobile-notifications-header">
<span class="title">{{ $t('notifications.notifications') }}</span>
<span class="spacer"/>
<button
v-if="notificationsAtTop"
class="button-unstyled mobile-nav-button"
@click.stop.prevent="scrollMobileNotificationsToTop"
>
<FALayers class="fa-scale-110 fa-old-padding-layer">
<FAIcon icon="arrow-up" />
<FAIcon
icon="minus"
transform="up-7"
/>
</FALayers>
</button>
<button
class="button-unstyled mobile-nav-button"
@click.stop.prevent="closeMobileNotifications(true)"
@ -61,6 +75,7 @@
<div
id="mobile-notifications"
class="mobile-notifications"
ref="mobileNotifications"
@scroll="onScroll"
/>
</div>
@ -165,6 +180,10 @@
box-shadow: 0px 0px 4px rgba(0,0,0,.6);
box-shadow: var(--topBarShadow);
.spacer {
flex: 1;
}
.title {
font-size: 1.3em;
margin-left: 0.6em;

19
src/components/notifications/notification_filters.vue
View file

@ -109,22 +109,3 @@ export default {
}
}
</script>
<style lang="scss">
.NotificationFilters {
align-self: stretch;
> button {
line-height: 100%;
height: 100%;
width: var(--__panel-heading-height-inner);
text-align: center;
svg {
font-size: 1.2em;
}
}
}
</style>

16
src/components/notifications/notifications.js
View file

@ -119,13 +119,15 @@ const Notifications = {
},
teleportTarget () {
// handle scroller change
this.scrollerRef.removeEventListener('scroll', this.updateScrollPosition)
this.scrollerRef = this.$refs.root.closest('.column.-scrollable')
if (!this.scrollerRef) {
this.scrollerRef = this.$refs.root.closest('.mobile-notifications')
}
this.scrollerRef.addEventListener('scroll', this.updateScrollPosition)
this.updateScrollPosition()
this.$nextTick(() => {
this.scrollerRef.removeEventListener('scroll', this.updateScrollPosition)
this.scrollerRef = this.$refs.root.closest('.column.-scrollable')
if (!this.scrollerRef) {
this.scrollerRef = this.$refs.root.closest('.mobile-notifications')
}
this.scrollerRef.addEventListener('scroll', this.updateScrollPosition)
this.updateScrollPosition()
})
}
},
methods: {

20
src/components/notifications/notifications.scss
View file

@ -29,6 +29,26 @@
}
}
}
.timeline-header-button {
align-self: stretch;
text-align: center;
width: var(--__panel-heading-height);
height: var(--__panel-heading-height);
margin: calc(-1 * var(--panel-heading-height-padding));
> button {
box-sizing: border-box;
padding: calc(1 * var(--panel-heading-height-padding));
height: 100%;
width: 100%;
text-align: center;
svg {
font-size: 1.2em;
}
}
}
}
.notification {

30
src/components/notifications/notifications.vue
View file

@ -20,20 +20,24 @@
class="badge badge-notification unseen-count"
>{{ unseenCount }}</span>
</div>
<button
<div
class="timeline-header-button"
v-if="showScrollTop"
class="button-unstyled scroll-to-top-button"
type="button"
@click="scrollToTop"
>
<FALayers class="fa-scale-110 fa-old-padding-layer">
<FAIcon icon="arrow-up" />
<FAIcon
icon="minus"
transform="up-7"
/>
</FALayers>
</button>
<button
class="button-unstyled scroll-to-top-button"
type="button"
@click="scrollToTop"
>
<FALayers class="fa-scale-110 fa-old-padding-layer">
<FAIcon icon="arrow-up" />
<FAIcon
icon="minus"
transform="up-7"
/>
</FALayers>
</button>
</div>
<button
v-if="unseenCount"
class="button-default read-button"
@ -42,7 +46,7 @@
>
{{ $t('notifications.read') }}
</button>
<NotificationFilters />
<NotificationFilters class="timeline-header-button" />
</div>
<div class="panel-body">
<div

18
src/components/quick_filter_settings/quick_filter_settings.vue
View file

@ -87,21 +87,3 @@
</template>
<script src="./quick_filter_settings.js"></script>
<style lang="scss">
.QuickFilterSettings {
> button {
line-height: 100%;
height: 100%;
width: var(--__panel-heading-height-inner);
text-align: center;
svg {
font-size: 1.2em;
}
}
}
</style>

18
src/components/quick_view_settings/quick_view_settings.vue
View file

@ -74,21 +74,3 @@
</template>
<script src="./quick_view_settings.js"></script>
<style lang="scss">
.QuickViewSettings {
> button {
line-height: 100%;
height: 100%;
width: var(--__panel-heading-height-inner);
text-align: center;
svg {
font-size: 1.2em;
}
}
}
</style>

30
src/components/timeline/timeline.scss
View file

@ -13,6 +13,36 @@
background-color: var(--cGreen);
}
.timeline-header-button {
align-self: stretch;
text-align: center;
width: var(--__panel-heading-height);
height: var(--__panel-heading-height);
margin: calc(-1 * var(--panel-heading-height-padding));
> button {
box-sizing: border-box;
padding: calc(1 * var(--panel-heading-height-padding));
height: 100%;
width: 100%;
text-align: center;
svg {
font-size: 1.2em;
}
}
}
.timeline-header-icon {
align-self: stretch;
text-align: center;
width: var(--__panel-heading-height);
svg {
font-size: 1.2em;
}
}
.loadmore-button {
position: relative
}

58
src/components/timeline/timeline.vue
View file

@ -5,35 +5,41 @@
v-if="!embedded"
:timeline-name="timelineName"
/>
<button
v-if="showScrollTop"
class="button-unstyled scroll-to-top-button"
type="button"
@click="scrollToTop"
>
<FALayers class="fa-scale-110 fa-old-padding-layer">
<FAIcon icon="arrow-up" />
<FAIcon
icon="minus"
transform="up-7"
/>
</FALayers>
</button>
<template v-if="mobileLayout">
<div class="timeline-header-button">
<button
v-if="showLoadButton"
class="button-unstyled loadmore-button"
@click.prevent="showNewStatuses"
v-if="showScrollTop"
class="button-unstyled scroll-to-top-button"
type="button"
@click="scrollToTop"
>
<FAIcon
fixed-width
icon="circle-plus"
/>
<div class="alert-dot" />
<FALayers class="fa-scale-110 fa-old-padding-layer">
<FAIcon icon="arrow-up" />
<FAIcon
icon="minus"
transform="up-7"
/>
</FALayers>
</button>
</div>
<template v-if="mobileLayout && !embedded">
<div
class="timeline-header-button"
v-if="showLoadButton"
>
<button
class="button-unstyled loadmore-button"
@click.prevent="showNewStatuses"
>
<FAIcon
fixed-width
icon="circle-plus"
/>
<div class="alert-dot" />
</button>
</div>
<div
v-else-if="!embedded"
class="loadmore-text faint veryfaint"
class="loadmore-text faint veryfaint timeline-header-icon"
@click.prevent
>
<FAIcon
@ -58,8 +64,8 @@
{{ $t('timeline.up_to_date') }}
</div>
</template>
<QuickFilterSettings v-if="!embedded" />
<QuickViewSettings v-if="!embedded" />
<QuickFilterSettings v-if="!embedded" class="timeline-header-button"/>
<QuickViewSettings v-if="!embedded" class="timeline-header-button"/>
</div>
<div :class="classes.body">
<div