Mastodon
/
Pinafore-Web-Client-Frontend
mirror of https://github.com/nolanlawson/pinafore
1
0
Fork 0
Code Issues Releases Wiki Activity

finish timeline fixes

This commit is contained in:
Nolan Lawson 2018-03-29 23:16:09 -07:00
parent b3e48b01d5
commit d8d7f405c0
18 changed files with 238 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
routes/_components/TimelineHomePage.html Normal file
View File

@ -0,0 +1,54 @@
<!--
Same as TimelinePage.html, but needs to manage visibility of ComposeBox itself
without a div wrapper due to sticky-positioned compose button.
TODO: this is a bit hacky due to code duplication
-->
<div class="timeline-home-page" aria-busy="{{hideTimeline}}">
{{#if hidePage}}
<LoadingPage />
{{/if}}
{{#if $currentVerifyCredentials }}
<ComposeBox realm="home" hidden="{{hidePage}}"/>
{{/if}}
<div class="timeline-home-anchor-container">
{{#if !hidePage && hideTimeline}}
<LoadingPage />
{{/if}}
<div class="timeline-home-reveal-container {{hideTimeline ? 'hidden' : ''}}">
<LazyTimeline timeline="home" />
</div>
</div>
</div>
<style>
.timeline-home-page, .timeline-home-anchor-container {
position: relative;
}
.timeline-home-reveal-container {
transition: opacity 0.2s linear; /* main page reveal */
}
</style>
<script>
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
import { store } from '.././_store/store.js'
import LoadingPage from '../_components/LoadingPage.html'
import ComposeBox from '../_components/compose/ComposeBox.html'
export default {
oncreate () {
this.store.set({
timelineInitialized: false,
timelinePreinitialized: false
})
},
computed: {
hidePage: ($timelineInitialized, $timelinePreinitialized) => !$timelineInitialized && !$timelinePreinitialized,
hideTimeline: ($timelineInitialized) => !$timelineInitialized,
},
store: () => store,
components: {
LazyTimeline,
LoadingPage,
ComposeBox
}
}
</script>

47
routes/_components/TimelinePage.html Normal file
View File

@ -0,0 +1,47 @@
<div class="timeline-page" aria-busy="{{hideTimeline}}">
{{#if hidePage}}
<LoadingPage />
{{/if}}
<div class="timeline-slot-reveal-container {{hidePage ? 'hidden' : ''}}">
<slot></slot>
</div>
<div class="timeline-anchor-container">
{{#if !hidePage && hideTimeline}}
<LoadingPage />
{{/if}}
<div class="timeline-reveal-container {{hideTimeline ? 'hidden' : ''}}">
<LazyTimeline :timeline />
</div>
</div>
</div>
<style>
.timeline-page, .timeline-anchor-container {
position: relative;
}
.timeline-reveal-container, .timeline-slot-reveal-container {
transition: opacity 0.2s linear; /* main page reveal */
}
</style>
<script>
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
import { store } from '.././_store/store.js'
import LoadingPage from '../_components/LoadingPage.html'
export default {
oncreate () {
this.store.set({
timelineInitialized: false,
timelinePreinitialized: false
})
},
computed: {
hidePage: ($timelineInitialized, $timelinePreinitialized) => !$timelineInitialized && !$timelinePreinitialized,
hideTimeline: ($timelineInitialized) => !$timelineInitialized,
},
store: () => store,
components: {
LazyTimeline,
LoadingPage
}
}
</script>

26
routes/_components/compose/ComposeBox.html
View File

@ -1,4 +1,4 @@
<div class="compose-box {{overLimit ? 'over-char-limit' : ''}} {{realm === 'dialog' ? 'dialog-size' : '' }}">
<div class="{{className}} {{hideAndFadeIn}}">
<ComposeAuthor />
{{#if contentWarningShown}}
<div class="compose-content-warning-wrapper"
@ -12,11 +12,11 @@
<ComposeLengthIndicator :length :overLimit />
<ComposeMedia :realm :media />
</div>
<div class="compose-box-button-sentinel" ref:sentinel></div>
<div class="compose-box-button-wrapper" >
<div class="compose-box-button-sentinel {{hideAndFadeIn}}" ref:sentinel></div>
<div class="compose-box-button-wrapper {{hideAndFadeIn}}" >
<ComposeButton :length :overLimit :sticky on:click="onClickPostButton()" />
</div>
<div class="compose-box-border-bottom"></div>
<div class="compose-box-border-bottom {{hideAndFadeIn}}"></div>
<style>
.compose-box {
border-radius: 4px;
@ -40,6 +40,10 @@
max-width: calc(100vw - 60px);
}
.compose-box-fade-in {
transition: opacity 0.2s linear; /* main page reveal */
}
.compose-box-border-bottom {
height: 1px;
background: var(--main-border);
@ -91,6 +95,7 @@
import { slide } from 'svelte-transitions'
import { postStatus, insertHandleForReply } from '../../_actions/compose'
import { importDialogs } from '../../_utils/asyncModules'
import { classname } from '../../_utils/classname'
export default {
oncreate() {
@ -133,6 +138,19 @@
},
store: () => store,
computed: {
className: (overLimit, realm) => {
return classname(
'compose-box',
overLimit && 'over-char-limit',
realm === 'dialog' && 'dialog-size'
)
},
hideAndFadeIn: (hidden) => {
return classname(
'compose-box-fade-in',
hidden && 'hidden'
)
},
composeData: ($currentComposeData, realm) => $currentComposeData[realm] || {},
text: (composeData) => composeData.text || '',
media: (composeData) => composeData.media || [],

3
routes/_components/pseudoVirtualList/PseudoVirtualList.html
View File

@ -1,4 +1,4 @@
<div class="pseudo-virtual-list {{shown ? '' : 'hidden'}}" on:initialized ref:node>
<div class="pseudo-virtual-list" on:initialized ref:node>
{{#if wrappedItems}}
{{#each wrappedItems as wrappedItem, i @item}}
<PseudoVirtualListLazyItem
@ -18,7 +18,6 @@
<style>
.pseudo-virtual-list {
position: relative;
transition: opacity 0.25s linear;
}
</style>
<script>

2
routes/_components/timeline/LazyTimeline.html
View File

@ -1,7 +1,7 @@
<div class="lazy-timeline">
{{#await importTimeline}}
{{then constructor}}
<:Component {constructor} :timeline on:initialized />
<:Component {constructor} :timeline />
{{catch error}}
<div>Component failed to load. Try refreshing! {{error}}</div>
{{/await}}

29
routes/_components/timeline/Timeline.html
View File

@ -4,17 +4,13 @@
on:focusWithCapture="saveFocus(event)"
on:blurWithCapture="clearFocus(event)"
>
{{#if !initialized}}
<LoadingPage />
{{/if}}
{{#if virtual}}
<VirtualList component="{{VirtualListComponent}}"
realm="{{$currentInstance + '/' + timeline}}"
containerQuery=".container"
:makeProps
items="{{$timelineItemIds}}"
shown="{{initialized}}"
showFooter="{{initialized && $runningUpdate}}"
showFooter="{{$timelineInitialized && $runningUpdate}}"
footerComponent="{{LoadingFooter}}"
showHeader="{{$showHeader}}"
headerComponent="{{MoreHeaderVirtualWrapper}}"
@ -23,6 +19,7 @@
on:scrollToTop="onScrollToTop()"
on:scrollTopChanged="onScrollTopChanged(event)"
on:initialized="initialize()"
on:noNeedToScroll="onNoNeedToScroll()"
/>
{{else}}
{{#await importPseudoVirtualList}}
@ -35,7 +32,6 @@
containerQuery=".container"
:makeProps
items="{{$timelineItemIds}}"
shown="{{initialized}}"
scrollToItem="{{scrollToItem}}"
on:initialized="initialize()"
/>
@ -44,11 +40,6 @@
{{/await}}
{{/if}}
</div>
<style>
.timeline {
position: relative;
}
</style>
<script>
import { store } from '../../_store/store'
import StatusVirtualListItem from './StatusVirtualListItem.html'
@ -66,7 +57,6 @@
showMoreItemsForThread,
showMoreItemsForCurrentTimeline
} from '../../_actions/timeline'
import LoadingPage from '../LoadingPage.html'
import { focusWithCapture, blurWithCapture } from '../../_utils/events'
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
import { mark, stop } from '../../_utils/marks'
@ -154,8 +144,7 @@
},
store: () => store,
components: {
VirtualList,
LoadingPage
VirtualList
},
events: {
focusWithCapture,
@ -170,8 +159,7 @@
mark('initializeTimeline')
doubleRAF(() => {
console.log('timeline initialized')
this.set({initialized: true})
this.fire('initialized')
this.store.set({timelineInitialized: true})
stop('initializeTimeline')
})
},
@ -179,7 +167,7 @@
this.set({scrollTop: scrollTop})
},
onScrollToBottom() {
if (!this.get('initialized') ||
if (!this.store.get('timelineInitialized') ||
this.store.get('runningUpdate') ||
this.get('timelineType') === 'status') { // for status contexts, we've already fetched the whole thread
return
@ -294,6 +282,13 @@
})
})
},
onNoNeedToScroll() {
// If the timeline doesn't need to scroll, then we can safely "preinitialize,"
// i.e. render anything above the fold of the timeline. This avoids the affect
// where the scrollable content appears to jump around if we need to scroll it.
console.log('timeline preinitialized')
this.store.set({timelinePreinitialized: true})
}
}
}
</script>

5
routes/_components/virtualList/VirtualList.html
View File

@ -1,5 +1,5 @@
<VirtualListContainer :realm :containerQuery on:initialized >
<div class="virtual-list {{shown ? '' : 'hidden'}}"
<VirtualListContainer :realm :containerQuery on:initialized on:noNeedToScroll >
<div class="virtual-list"
style="height: {{$height}}px;"
ref:node >
<VirtualListHeader component="{{headerComponent}}" virtualProps="{{headerProps}}" shown="{{$showHeader}}"/>
@ -21,7 +21,6 @@
<style>
.virtual-list {
position: relative;
transition: opacity 0.25s linear;
}
</style>
<script>

1
routes/_components/virtualList/VirtualListContainer.html
View File

@ -34,6 +34,7 @@
}
})
} else {
this.fire('noNeedToScroll')
this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
if (allVisibleItemsHaveHeight) {
console.log('initialized VirtualList')

7
routes/_pages/accounts/[accountId].html
View File

@ -1,4 +1,5 @@
{{#if $isUserLoggedIn}}
<TimelinePage timeline="account/{{params.accountId}}">
<DynamicPageBanner title="" />
{{#if $currentAccountProfile && $currentVerifyCredentials}}
<AccountProfile account="{{$currentAccountProfile}}"
@ -7,7 +8,7 @@
/>
{{/if}}
<PinnedStatuses accountId="{{params.accountId}}" />
<LazyTimeline timeline='account/{{params.accountId}}' />
</TimelinePage>
{{else}}
<HiddenFromSSR>
<FreeTextLayout>
@ -18,7 +19,7 @@
</HiddenFromSSR>
{{/if}}
<script>
import LazyTimeline from '../../_components/timeline/LazyTimeline.html'
import TimelinePage from '../../_components/TimelinePage.html'
import FreeTextLayout from '../../_components/FreeTextLayout.html'
import { store } from '../../_store/store.js'
import HiddenFromSSR from '../../_components/HiddenFromSSR'
@ -42,7 +43,7 @@
}
},
components: {
LazyTimeline,
TimelinePage,
FreeTextLayout,
HiddenFromSSR,
DynamicPageBanner,

7
routes/_pages/favorites.html
View File

@ -1,8 +1,9 @@
{{#if $isUserLoggedIn}}
<TimelinePage timeline="favorites">
{{#if $pinnedPage !== '/favorites'}}
<DynamicPageBanner title="Favorites" icon="#fa-star"/>
{{/if}}
<LazyTimeline timeline='favorites' />
</TimelinePage>
{{else}}
<HiddenFromSSR>
<FreeTextLayout>
@ -13,7 +14,7 @@
</HiddenFromSSR>
{{/if}}
<script>
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
import TimelinePage from '.././_components/TimelinePage.html'
import FreeTextLayout from '.././_components/FreeTextLayout.html'
import { store } from '.././_store/store.js'
import HiddenFromSSR from '.././_components/HiddenFromSSR'
@ -22,7 +23,7 @@
export default {
store: () => store,
components: {
LazyTimeline,
TimelinePage,
FreeTextLayout,
HiddenFromSSR,
DynamicPageBanner

7
routes/_pages/federated.html
View File

@ -1,8 +1,9 @@
{{#if $isUserLoggedIn}}
<TimelinePage timeline="federated">
{{#if $pinnedPage !== '/federated'}}
<DynamicPageBanner title="Federated Timeline" icon="#fa-globe"/>
{{/if}}
<LazyTimeline timeline='federated' />
</TimelinePage>
{{else}}
<HiddenFromSSR>
<FreeTextLayout>
@ -13,7 +14,7 @@
</HiddenFromSSR>
{{/if}}
<script>
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
import TimelinePage from '.././_components/TimelinePage.html'
import FreeTextLayout from '.././_components/FreeTextLayout.html'
import { store } from '.././_store/store.js'
import HiddenFromSSR from '.././_components/HiddenFromSSR'
@ -22,7 +23,7 @@
export default {
store: () => store,
components: {
LazyTimeline,
TimelinePage,
FreeTextLayout,
HiddenFromSSR,
DynamicPageBanner

23
routes/_pages/index.html
View File

@ -1,35 +1,18 @@
{{#if $isUserLoggedIn}}
{{#if $currentVerifyCredentials }}
<div class="compose-box-reveal {{timelineInitialized ? '' : 'hidden'}}">
<ComposeBox realm="home" />
</div>
{{/if}}
<LazyTimeline timeline='home' on:initialized="onTimelineInitialized()"/>
<TimelineHomePage/>
{{else}}
<NotLoggedInHome/>
{{/if}}
<style>
.compose-box-reveal {
transition: opacity 0.25s linear;
}
</style>
<script>
import NotLoggedInHome from '.././_components/NotLoggedInHome.html'
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
import ComposeBox from '.././_components/compose/ComposeBox.html'
import { store } from '.././_store/store.js'
import TimelineHomePage from '../_components/TimelineHomePage.html'
export default {
store: () => store,
components: {
LazyTimeline,
NotLoggedInHome,
ComposeBox
},
methods: {
onTimelineInitialized() {
this.set({timelineInitialized: true})
}
TimelineHomePage
}
}
</script>

7
routes/_pages/lists/[listId].html
View File

@ -1,8 +1,9 @@
{{#if $isUserLoggedIn}}
<TimelinePage timeline="list/{{params.listId}}">
{{#if $pinnedPage !== `/lists/${params.listId}`}}
<DynamicPageBanner title="{{listTitle}}" icon="#fa-bars"/>
{{/if}}
<LazyTimeline timeline='list/{{params.listId}}' />
</TimelinePage>
{{else}}
<HiddenFromSSR>
<FreeTextLayout>
@ -13,7 +14,7 @@
</HiddenFromSSR>
{{/if}}
<script>
import LazyTimeline from '../../_components/timeline/LazyTimeline.html'
import TimelinePage from '../../_components/TimelinePage.html'
import FreeTextLayout from '../../_components/FreeTextLayout.html'
import { store } from '../../_store/store.js'
import HiddenFromSSR from '../../_components/HiddenFromSSR'
@ -26,7 +27,7 @@
},
store: () => store,
components: {
LazyTimeline,
TimelinePage,
FreeTextLayout,
HiddenFromSSR,
DynamicPageBanner

7
routes/_pages/local.html
View File

@ -1,8 +1,9 @@
{{#if $isUserLoggedIn}}
<TimelinePage timeline="local">
{{#if $pinnedPage !== '/local'}}
<DynamicPageBanner title="Local Timeline" icon="#fa-users"/>
{{/if}}
<LazyTimeline timeline='local' />
</TimelinePage>
{{else}}
<HiddenFromSSR>
<FreeTextLayout>
@ -13,7 +14,7 @@
</HiddenFromSSR>
{{/if}}
<script>
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
import TimelinePage from '.././_components/TimelinePage.html'
import FreeTextLayout from '.././_components/FreeTextLayout.html'
import { store } from '.././_store/store.js'
import HiddenFromSSR from '.././_components/HiddenFromSSR'
@ -22,7 +23,7 @@
export default {
store: () => store,
components: {
LazyTimeline,
TimelinePage,
FreeTextLayout,
HiddenFromSSR,
DynamicPageBanner

8
routes/_pages/notifications.html
View File

@ -1,5 +1,5 @@
{{#if $isUserLoggedIn}}
<LazyTimeline timeline='notifications' />
<TimelinePage timeline="notifications" />
{{else}}
<HiddenFromSSR>
<FreeTextLayout>
@ -10,17 +10,17 @@
</HiddenFromSSR>
{{/if}}
<script>
import LazyTimeline from '.././_components/timeline/LazyTimeline.html'
import FreeTextLayout from '.././_components/FreeTextLayout.html'
import { store } from '.././_store/store.js'
import HiddenFromSSR from '.././_components/HiddenFromSSR'
import TimelinePage from '../_components/TimelinePage.html'
export default {
store: () => store,
components: {
LazyTimeline,
FreeTextLayout,
HiddenFromSSR
HiddenFromSSR,
TimelinePage
}
};
</script>

9
routes/_pages/statuses/[statusId]/index.html
View File

@ -1,6 +1,7 @@
{{#if $isUserLoggedIn}}
<TimelinePage timeline="status/{{params.statusId}}">
<DynamicPageBanner title=""/>
<LazyTimeline timeline='status/{{params.statusId}}' />
</TimelinePage>
{{else}}
<HiddenFromSSR>
<FreeTextLayout>
@ -11,19 +12,19 @@
</HiddenFromSSR>
{{/if}}
<script>
import LazyTimeline from '../../../_components/timeline/LazyTimeline.html'
import FreeTextLayout from '../../../_components/FreeTextLayout.html'
import { store } from '../../../_store/store.js'
import HiddenFromSSR from '../../../_components/HiddenFromSSR'
import DynamicPageBanner from '../../../_components/DynamicPageBanner.html'
import TimelinePage from '../../../_components/TimelinePage.html'
export default {
store: () => store,
components: {
LazyTimeline,
FreeTextLayout,
HiddenFromSSR,
DynamicPageBanner
DynamicPageBanner,
TimelinePage
}
}
</script>

7
routes/_pages/tags/[tagName].html
View File

@ -1,6 +1,7 @@
{{#if $isUserLoggedIn}}
<TimelinePage timeline="tag/{{params.tagName}}">
<DynamicPageBanner title="{{'#' + params.tagName}}"/>
<LazyTimeline timeline='tag/{{params.tagName}}' />
</TimelinePage>
{{else}}
<HiddenFromSSR>
<FreeTextLayout>
@ -11,7 +12,7 @@
</HiddenFromSSR>
{{/if}}
<script>
import LazyTimeline from '../../_components/timeline/LazyTimeline.html'
import TimelinePage from '../../_components/TimelinePage.html'
import FreeTextLayout from '../../_components/FreeTextLayout.html'
import { store } from '../../_store/store.js'
import HiddenFromSSR from '../../_components/HiddenFromSSR'
@ -20,7 +21,7 @@
export default {
store: () => store,
components: {
LazyTimeline,
TimelinePage,
FreeTextLayout,
HiddenFromSSR,
DynamicPageBanner