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

Merge branch 'threecolumn' into shigusegubu-vue3

Browse source 
* threecolumn:
  fix new post button not working day1, minor stylistic fixes
  layout fixes
  fix extra padding in thread view
  chat fixes
  more fixes
  fix timeline scroll-to-top
  fix scrollable columns
  revert layout back to scrollable body
  revert timeline changes
This commit is contained in:
Henry Jameson 2022-04-10 20:19:24 +03:00
commit cfa876d01a
12 changed files with 86 additions and 142 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/App.js
View file

@ -50,6 +50,16 @@ export default {
window.removeEventListener('resize', this.updateMobileState)
},
computed: {
classes () {
return [
{
'-reverse': this.reverseLayout,
'-no-sticky-headers': this.noSticky,
'-has-new-post-button': this.newPostButtonShown
},
'-' + this.layoutType
]
},
currentUser () { return this.$store.state.users.currentUser },
userBackground () { return this.currentUser.background_image },
instanceBackground () {
@ -72,6 +82,10 @@ export default {
!this.$store.getters.mergedConfig.hideISP &&
this.$store.state.instance.instanceSpecificPanelContent
},
newPostButtonShown () {
if (this.$route.name === 'chat' || this.$route.name === 'chats') return false
return this.$store.getters.mergedConfig.alwaysShowNewPostButton || this.layoutType === 'mobile'
},
showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
shoutboxPosition () {
return this.$store.getters.mergedConfig.showNewPostButton || false

94
src/App.scss
View file

@ -1,16 +1,15 @@
// stylelint-disable rscss/class-format
@import './_variables.scss';
:root {
--navbar-height: 50px;
}
html {
font-size: 14px;
overflow: hidden;
max-height: 100vh;
}
body {
overflow: hidden;
max-height: 100vh;
max-width: 100vw;
font-family: sans-serif;
font-family: var(--interfaceFont, sans-serif);
margin: 0;
@ -19,6 +18,7 @@ body {
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overscroll-behavior-y: none;
&.hidden {
display: none;
@ -26,6 +26,10 @@ body {
}
@media (any-pointer: fine) {
body {
background: var(--bg);
}
* {
scrollbar-color: var(--btn) transparent;
@ -106,33 +110,26 @@ nav {
box-shadow: var(--topBarShadow);
box-sizing: border-box;
height: var(--navbar-height);
}
#app-loaded {
min-height: 100vh;
min-width: 100vw;
overflow: hidden;
--navbar-height: 50px;
}
#content {
overscroll-behavior-y: none;
overflow-y: scroll;
overflow-x: hidden;
position: sticky;
position: fixed;
}
#sidebar {
grid-area: sidebar;
}
#notifs-column {
grid-area: notifs;
.column.-scrollable {
top: var(--navbar-height);
position: sticky;
}
#main-scroller {
margin-top: var(--navbar-height);
grid-area: content;
position: relative;
}
#notifs-column {
grid-area: notifs;
}
.app-bg-wrapper {
@ -175,11 +172,11 @@ nav {
grid-template-rows: 1fr;
box-sizing: border-box;
margin: 0 auto;
height: calc(100vh - var(--navbar-height));
align-content: flex-start;
flex-wrap: wrap;
padding: 0 10px;
padding: 0 calc(var(--columnGap) / 2);
justify-content: center;
min-height: 100vh;
.column {
--___columnMargin: var(--columnGap);
@ -187,19 +184,19 @@ nav {
display: grid;
grid-template-columns: 100%;
box-sizing: border-box;
padding-top: 10px;
grid-row-start: 1;
grid-row-end: 1;
margin: 0 calc(var(--___columnMargin) / 2);
padding: calc(var(--___columnMargin) / 2) 0;
row-gap: var(--___columnMargin);
align-content: start;
&.-scrollable {
--___paddingIncrease: calc(var(--columnGap) / 2);
padding-top: 10px;
padding-top: calc(var(--columnGap) / 2);
position: sticky;
top: 0;
top: var(--navbar-height);
max-height: calc(100vh - var(--navbar-height));
overflow-y: auto;
overflow-x: hidden;
@ -220,11 +217,17 @@ nav {
}
.panel-heading.-sticky {
top: -10px;
top: calc(var(--columnGap) / -2);
}
}
}
&.-has-new-post-button {
.column {
padding-bottom: 20em;
}
}
&.-no-sticky-headers {
.column {
.panel-heading.-sticky {
@ -271,6 +274,12 @@ nav {
display: none;
}
}
&.-normal {
#notifs-column {
display: none;
}
}
}
.text-center {
@ -728,35 +737,6 @@ i[class*=icon-],
flex: 1;
}
@media all and (min-width: 800px) {
.sidebar-bounds {
overflow: hidden;
max-height: 100vh;
width: 345px;
position: fixed;
margin-top: -10px;
.sidebar-scroller {
height: 96vh;
width: 365px;
padding-top: 10px;
padding-right: 50px;
overflow-x: hidden;
overflow-y: scroll;
}
.sidebar {
width: 345px;
}
}
.sidebar-flexer {
max-height: 96vh;
flex-shrink: 0;
flex-grow: 0;
}
}
@media all and (max-width: 800px) {
.mobile-hidden {
display: none;

2
src/App.vue
View file

@ -13,7 +13,7 @@
<div
id="content"
class="app-layout container"
:class="[{ '-reverse': reverseLayout, '-no-sticky-headers': noSticky }, '-' + layoutType]"
:class="classes"
>
<div class="underlay"/>
<div id="sidebar" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }">

67
src/components/chat/chat.js
View file

@ -19,8 +19,6 @@ library.add(
faChevronLeft
)
const scroller = () => document.getElementById('content')
const BOTTOMED_OUT_OFFSET = 10
const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 10
const SAFE_RESIZE_TIME_OFFSET = 100
@ -45,10 +43,9 @@ const Chat = {
},
created () {
this.startFetching()
window.addEventListener('resize', this.handleLayoutChange)
},
mounted () {
scroller().addEventListener('scroll', this.handleScroll)
window.addEventListener('scroll', this.handleScroll)
if (typeof document.hidden !== 'undefined') {
document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
}
@ -56,12 +53,9 @@ const Chat = {
this.$nextTick(() => {
this.handleResize()
})
this.setChatLayout()
},
unmounted () {
scroller().removeEventListener('scroll', this.handleScroll)
window.removeEventListener('resize', this.handleLayoutChange)
this.unsetChatLayout()
window.removeEventListener('scroll', this.handleScroll)
if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
this.$store.dispatch('clearCurrentChat')
},
@ -97,8 +91,7 @@ const Chat = {
...mapState({
backendInteractor: state => state.api.backendInteractor,
mastoUserSocketStatus: state => state.api.mastoUserSocketStatus,
mobileLayout: state => state.interface.mobileLayout,
layoutHeight: state => state.interface.layoutHeight,
mobileLayout: state => state.interface.layoutType === 'mobile',
currentUser: state => state.users.currentUser
})
},
@ -116,9 +109,6 @@ const Chat = {
'$route': function () {
this.startFetching()
},
layoutHeight () {
this.handleResize({ expand: true })
},
mastoUserSocketStatus (newValue) {
if (newValue === WSConnectionStatus.JOINED) {
this.fetchChat({ isFirstFetch: true })
@ -142,30 +132,6 @@ const Chat = {
}
})
},
setChatLayout () {
// This is a hacky way to adjust the global layout to the mobile chat (without modifying the rest of the app).
// This layout prevents empty spaces from being visible at the bottom
// of the chat on iOS Safari (`safe-area-inset`) when
// - the on-screen keyboard appears and the user starts typing
// - the user selects the text inside the input area
// - the user selects and deletes the text that is multiple lines long
// TODO: unify the chat layout with the global layout.
let html = document.querySelector('html')
if (html) {
html.classList.add('chat-layout')
}
},
unsetChatLayout () {
let html = document.querySelector('html')
if (html) {
html.classList.remove('chat-layout')
}
},
handleLayoutChange () {
this.$nextTick(() => {
this.scrollDown()
})
},
// Preserves the scroll position when OSK appears or the posting form changes its height.
handleResize (opts = {}) {
const { expand = false, delayed = false } = opts
@ -179,25 +145,20 @@ const Chat = {
this.$nextTick(() => {
const { offsetHeight = undefined } = this.lastScrollPosition
this.lastScrollPosition = getScrollPosition(scroller())
this.lastScrollPosition = getScrollPosition()
const diff = this.lastScrollPosition.offsetHeight - offsetHeight
if (diff < 0 || (!this.bottomedOut() && expand)) {
this.$nextTick(() => {
scroller().scrollTo({
top: scroller().scrollTop - diff,
left: 0
})
window.scrollTo({ top: window.scrollY - diff })
})
}
})
},
scrollDown (options = {}) {
const { behavior = 'auto', forceRead = false } = options
const scrollable = scroller()
if (!scrollable) { return }
this.$nextTick(() => {
scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior })
window.scrollTo({ top: document.documentElement.scrollHeight, behavior })
})
if (forceRead) {
this.readChat()
@ -213,11 +174,10 @@ const Chat = {
})
},
bottomedOut (offset) {
return isBottomedOut(scroller(), offset)
return isBottomedOut(offset)
},
reachedTop () {
const scrollable = scroller()
return scrollable && scrollable.scrollTop <= 0
return window.scrollY <= 0
},
cullOlderCheck () {
window.setTimeout(() => {
@ -248,10 +208,9 @@ const Chat = {
}
}, 200),
handleScrollUp (positionBeforeLoading) {
const positionAfterLoading = getScrollPosition(scroller())
scroller().scrollTo({
top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
left: 0
const positionAfterLoading = getScrollPosition()
window.scrollTo({
top: getNewTopPosition(positionBeforeLoading, positionAfterLoading)
})
},
fetchChat ({ isFirstFetch = false, fetchLatest = false, maxId }) {
@ -270,7 +229,7 @@ const Chat = {
chatService.clear(chatMessageService)
}
const positionBeforeUpdate = getScrollPosition(scroller())
const positionBeforeUpdate = getScrollPosition()
this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => {
this.$nextTick(() => {
if (fetchOlderMessages) {
@ -281,7 +240,7 @@ const Chat = {
// full height of the scrollable container.
// If this is the case, we want to fetch the messages until the scrollable container
// is fully populated so that the user has the ability to scroll up and load the history.
if (!isScrollable(scroller()) && messages.length > 0) {
if (!isScrollable() && messages.length > 0) {
this.fetchChat({ maxId: this.currentChatMessageService.minId })
}
})

3
src/components/chat/chat.scss
View file

@ -1,6 +1,9 @@
.chat-view {
display: flex;
height: 100%;
// Stick the form to the top/bottom of screen
margin-bottom: calc(var(--___columnMargin) / -2);
margin-top: calc(var(--___columnMargin) / -2);
.chat-view-inner {
height: auto;

1
src/components/chat/chat.vue
View file

@ -2,7 +2,6 @@
<div class="chat-view">
<div class="chat-view-inner">
<div
id="nav"
ref="inner"
class="panel-default panel chat-view-body"
>

27
src/components/chat/chat_layout_utils.js
View file

@ -1,9 +1,9 @@
// Captures a scroll position
export const getScrollPosition = (el) => {
export const getScrollPosition = () => {
return {
scrollTop: el.scrollTop,
scrollHeight: el.scrollHeight,
offsetHeight: el.offsetHeight
scrollTop: window.scrollY,
scrollHeight: document.documentElement.scrollHeight,
offsetHeight: window.innerHeight
}
}
@ -13,21 +13,12 @@ export const getNewTopPosition = (previousPosition, newPosition) => {
return previousPosition.scrollTop + (newPosition.scrollHeight - previousPosition.scrollHeight)
}
export const isBottomedOut = (el, offset = 0) => {
if (!el) { return }
const scrollHeight = el.scrollTop + offset
const totalHeight = el.scrollHeight - el.offsetHeight
export const isBottomedOut = (offset = 0) => {
const scrollHeight = window.scrollY + offset
const totalHeight = document.documentElement.scrollHeight - window.innerHeight
return totalHeight <= scrollHeight
}
// Height of the scrollable container. The dynamic height is needed to ensure the mobile browser panel doesn't overlap or hide the posting form.
export const scrollableContainerHeight = (inner, header, footer) => {
return inner.offsetHeight - header.clientHeight - footer.clientHeight
}
// Returns whether or not the scrollbar is visible.
export const isScrollable = (el) => {
if (!el) return
return el.scrollHeight > el.clientHeight
export const isScrollable = () => {
return document.documentElement.scrollHeight > window.innerHeight
}

1
src/components/chat_new/chat_new.vue
View file

@ -1,6 +1,5 @@
<template>
<div
id="nav"
class="panel-default panel chat-new"
>
<div

3
src/components/conversation/conversation.vue
View file

@ -270,7 +270,8 @@
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
border-bottom: 1px solid var(--border, $fallback--border);
}
&.-expanded {
&.-expanded.status-fadein {
margin: calc(var(--status-margin, $status-margin) / 2);
}
}

2
src/components/mobile_post_status_button/mobile_post_status_button.js
View file

@ -45,7 +45,7 @@ const MobilePostStatusButton = {
return this.autohideFloatingPostButton && (this.hidden || this.inputActive)
},
isPersistent () {
return !!this.$store.getters.mergedConfig.showNewPostButton
return !!this.$store.getters.mergedConfig.alwaysShowNewPostButton
},
autohideFloatingPostButton () {
return !!this.$store.getters.mergedConfig.autohideFloatingPostButton

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

@ -12,8 +12,6 @@ library.add(
faCog
)
const scroller = () => document.getElementById('content')
const Timeline = {
props: [
'timeline',
@ -91,7 +89,7 @@ const Timeline = {
const credentials = store.state.users.currentUser.credentials
const showImmediately = this.timeline.visibleStatuses.length === 0
scroller() && scroller().addEventListener('scroll', this.handleScroll)
window.addEventListener('scroll', this.handleScroll)
if (store.state.api.fetchers[this.timelineName]) { return false }
@ -113,7 +111,7 @@ const Timeline = {
setTimeout(this.determineVisibleStatuses, 250)
},
unmounted () {
scroller().removeEventListener('scroll', this.handleScroll)
window.removeEventListener('scroll', this.handleScroll)
window.removeEventListener('keydown', this.handleShortKey)
if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
@ -143,7 +141,7 @@ const Timeline = {
this.$store.commit('showNewStatuses', { timeline: this.timelineName })
this.paused = false
}
scroller().scrollTop = 0
window.scrollTo({ top: 0 })
},
fetchOlderStatuses: throttle(function () {
const store = this.$store
@ -231,8 +229,8 @@ const Timeline = {
}
if (count > 0) {
// only 'stream' them when you're scrolled to the top
const doc = document.getElementById('content')
const top = (doc.scrollTop) - (doc.clientTop || 0)
const doc = document.documentElement
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
if (top < 15 &&
!this.paused &&
!(this.unfocused && this.$store.getters.mergedConfig.pauseOnUnfocused)

2
src/panel.scss
View file

@ -63,7 +63,7 @@
&.-sticky {
position: sticky;
top: 0;
top: var(--navbar-height);
z-index: 2;
}