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:
  only mark as read if closed intentionally
  fix notifications
  use a bit more compact layout on mobile
  Update dependency eslint-plugin-vue to v9.4.0
This commit is contained in:
Henry Jameson 2022-08-24 22:43:17 +03:00
commit b3318471c3
9 changed files with 111 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -78,7 +78,7 @@
"eslint-plugin-import": "2.26.0",
"eslint-plugin-n": "15.2.5",
"eslint-plugin-promise": "6.0.0",
"eslint-plugin-vue": "9.3.0",
"eslint-plugin-vue": "9.4.0",
"eslint-webpack-plugin": "3.2.0",
"eventsource-polyfill": "0.9.6",
"express": "4.18.1",

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

@ -30,7 +30,7 @@ const MobileNav = {
created () {
this.notificationsCloseGesture = GestureService.swipeGesture(
GestureService.DIRECTION_RIGHT,
this.closeMobileNotifications,
() => this.closeMobileNotifications(true),
50
)
},
@ -61,12 +61,14 @@ const MobileNav = {
openMobileNotifications () {
this.notificationsOpen = true
},
closeMobileNotifications () {
closeMobileNotifications (markRead) {
if (this.notificationsOpen) {
// make sure to mark notifs seen only when the notifs were open and not
// from close-calls.
this.notificationsOpen = false
this.markNotificationsAsSeen()
if (markRead) {
this.markNotificationsAsSeen()
}
}
},
notificationsTouchStart (e) {

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

@ -48,15 +48,15 @@
>
<div class="mobile-notifications-header">
<span class="title">{{ $t('notifications.notifications') }}</span>
<a
class="mobile-nav-button"
@click.stop.prevent="closeMobileNotifications()"
<button
class="button-unstyled mobile-nav-button"
@click.stop.prevent="closeMobileNotifications(true)"
>
<FAIcon
class="fa-scale-110 fa-old-padding"
icon="times"
/>
</a>
</button>
</div>
<div
id="mobile-notifications"

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

@ -10,11 +10,12 @@ import {
} from '../../services/notification_utils/notification_utils.js'
import FaviconService from '../../services/favicon_service/favicon_service.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleNotch, faCircleUp } from '@fortawesome/free-solid-svg-icons'
import { faCircleNotch, faArrowUp, faMinus } from '@fortawesome/free-solid-svg-icons'
library.add(
faCircleNotch,
faCircleUp
faArrowUp,
faMinus
)
const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
@ -97,9 +98,13 @@ const Notifications = {
},
mounted () {
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)
},
unmounted () {
if (!this.scrollerRef) return
this.scrollerRef.removeEventListener('scroll', this.updateScrollPosition)
},
watch: {
@ -111,6 +116,16 @@ const Notifications = {
FaviconService.clearFaviconBadge()
this.$store.dispatch('setPageTitle', '')
}
},
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()
}
},
methods: {

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

@ -26,7 +26,13 @@
type="button"
@click="scrollToTop"
>
<FAIcon icon="circle-up" />
<FALayers class="fa-scale-110 fa-old-padding-layer">
<FAIcon icon="arrow-up" />
<FAIcon
icon="minus"
transform="up-7"
/>
</FALayers>
</button>
<button
v-if="unseenCount"

14
src/components/timeline/timeline.js
View file

@ -1,4 +1,5 @@
import Status from '../status/status.vue'
import { mapState } from 'vuex'
import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
import Conversation from '../conversation/conversation.vue'
import TimelineMenu from '../timeline_menu/timeline_menu.vue'
@ -6,11 +7,15 @@ import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.
import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
import { debounce, throttle, keyBy } from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleNotch, faCog } from '@fortawesome/free-solid-svg-icons'
import { faCircleNotch, faCirclePlus, faCog, faMinus, faArrowUp, faCheck } from '@fortawesome/free-solid-svg-icons'
library.add(
faCircleNotch,
faCog
faCog,
faMinus,
faArrowUp,
faCirclePlus,
faCheck
)
const Timeline = {
@ -88,7 +93,10 @@ const Timeline = {
},
virtualScrollingEnabled () {
return this.$store.getters.mergedConfig.virtualScrolling
}
},
...mapState({
mobileLayout: state => state.interface.layoutType === 'mobile',
})
},
created () {
const store = this.$store

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

@ -1,10 +1,26 @@
@import '../../_variables.scss';
.Timeline {
.alert-dot {
border-radius: 100%;
height: 8px;
width: 8px;
position: absolute;
left: calc(50% - 4px);
top: calc(50% - 4px);
margin-left: 6px;
margin-top: -6px;
background-color: var(--cBlue);
}
.loadmore-text {
opacity: 1;
}
.loadmore-button {
position: relative
}
&.-blocked {
cursor: progress;
}

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

@ -11,22 +11,53 @@
type="button"
@click="scrollToTop"
>
<FAIcon icon="circle-up" />
<FALayers class="fa-scale-110 fa-old-padding-layer">
<FAIcon icon="arrow-up" />
<FAIcon
icon="minus"
transform="up-7"
/>
</FALayers>
</button>
<button
v-if="showLoadButton"
class="button-default loadmore-button"
@click.prevent="showNewStatuses"
>
{{ loadButtonString }}
</button>
<div
v-else-if="!embedded"
class="loadmore-text faint"
@click.prevent
>
{{ $t('timeline.up_to_date') }}
</div>
<template v-if="mobileLayout">
<button
v-if="showLoadButton"
class="button-unstyled loadmore-button"
@click.prevent="showNewStatuses"
>
<FAIcon
fixed-width
icon="circle-plus"
/>
<div class="alert-dot" />
</button>
<div
v-else-if="!embedded"
class="loadmore-text faint"
@click.prevent
>
<FAIcon
fixed-width
icon="check"
/>
</div>
</template>
<template v-else>
<button
v-if="showLoadButton"
class="button-default loadmore-button"
@click.prevent="showNewStatuses"
>
{{ loadButtonString }}
</button>
<div
v-else-if="!embedded"
class="loadmore-text faint"
@click.prevent
>
{{ $t('timeline.up_to_date') }}
</div>
</template>
<QuickFilterSettings v-if="!embedded" />
<QuickViewSettings v-if="!embedded" />
</div>

8
yarn.lock
View file

@ -3893,10 +3893,10 @@ eslint-plugin-promise@6.0.0:
resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-6.0.0.tgz#017652c07c9816413a41e11c30adc42c3d55ff18"
integrity sha512-7GPezalm5Bfi/E22PnQxDWH2iW9GTvAlUNTztemeHb6c1BniSyoeTrM87JkC0wYdi6aQrZX9p2qEiAno8aTcbw==
eslint-plugin-vue@9.3.0:
version "9.3.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.3.0.tgz#c3f5ce515dae387e062428725c5cf96098d9da0b"
integrity sha512-iscKKkBZgm6fGZwFt6poRoWC0Wy2dQOlwUPW++CiPoQiw1enctV2Hj5DBzzjJZfyqs+FAXhgzL4q0Ww03AgSmQ==
eslint-plugin-vue@9.4.0:
version "9.4.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.4.0.tgz#31c2d9002b5bb437b351a5feffdf37c4397e5cb9"
integrity sha512-Nzz2QIJ8FG+rtJaqT/7/ru5ie2XgT9KCudkbN0y3uFYhQ41nuHEaboLAiqwMcK006hZPQv/rVMRhUIwEGhIvfQ==
dependencies:
eslint-utils "^3.0.0"
natural-compare "^1.4.0"