Implement LazyPage and refactor to support it
This commit is contained in:
Nolan Lawson
parent
b0896a4e10
commit
5908ac6614
|
|
@ -11,7 +11,6 @@
|
|||
</div>
|
||||
<style>
|
||||
.accounts-page {
|
||||
min-height: 60vh;
|
||||
padding: 20px 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
{{#if revealed}}
|
||||
<:Component {pageComponent} :params />
|
||||
{{/if}}
|
||||
<script>
|
||||
import { scheduleIdleTask } from '../_utils/scheduleIdleTask'
|
||||
|
||||
export default {
|
||||
oncreate() {
|
||||
scheduleIdleTask(() => this.set({revealed: true}))
|
||||
},
|
||||
data: () => ({
|
||||
revealed: !process.browser
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -46,10 +46,12 @@
|
|||
</style>
|
||||
<script>
|
||||
import Avatar from '../Avatar.html'
|
||||
import { store } from '../../_store/store'
|
||||
export default {
|
||||
components: {
|
||||
Avatar
|
||||
},
|
||||
store: () => store,
|
||||
computed: {
|
||||
verifyCredentials: ($currentVerifyCredentials) => $currentVerifyCredentials
|
||||
}
|
||||
|
|
|
|||
|
|
@ -103,6 +103,7 @@
|
|||
import NonAutoplayGifv from '../NonAutoplayGifv.html'
|
||||
import PlayVideoIcon from '../PlayVideoIcon.html'
|
||||
import { ONE_TRANSPARENT_PIXEL } from '../../_static/media'
|
||||
import { store } from '../../_store/store'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
|
|
@ -140,6 +141,7 @@
|
|||
data: () => ({
|
||||
oneTransparentPixel: ONE_TRANSPARENT_PIXEL
|
||||
}),
|
||||
store: () => store,
|
||||
events: {
|
||||
imgLoad,
|
||||
imgLoadError,
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<style>
|
||||
.lazy-timeline {
|
||||
width: 100%;
|
||||
min-height: 60vh;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,6 @@
|
|||
</div>
|
||||
<style>
|
||||
.timeline {
|
||||
min-height: 60vh;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
{{#if $isUserLoggedIn}}
|
||||
<DynamicPageBanner title="" />
|
||||
{{#if $currentAccountProfile}}
|
||||
<AccountProfile profile="{{$currentAccountProfile}}"
|
||||
relationship="{{$currentAccountRelationship}}"
|
||||
verifyCredentials="{{$currentVerifyCredentials}}"
|
||||
/>
|
||||
{{/if}}
|
||||
<PinnedStatuses accountId="{{params.accountId}}" />
|
||||
<LazyTimeline timeline='account/{{params.accountId}}' />
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Profile</h1>
|
||||
|
||||
<p>A user timeline will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</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 { updateProfileAndRelationship } from '../../_actions/accounts'
|
||||
import AccountProfile from '../../_components/AccountProfile.html'
|
||||
import { updateVerifyCredentialsForInstance } from '../../_actions/instances'
|
||||
import PinnedStatuses from '../../_components/timeline/PinnedStatuses.html'
|
||||
|
||||
export default {
|
||||
oncreate() {
|
||||
let accountId = this.get('params').accountId
|
||||
let instanceName = this.store.get('currentInstance')
|
||||
updateProfileAndRelationship(accountId)
|
||||
updateVerifyCredentialsForInstance(instanceName)
|
||||
},
|
||||
store: () => store,
|
||||
computed: {
|
||||
profileName: ($currentAccountProfile) => {
|
||||
return ($currentAccountProfile && ('@' + $currentAccountProfile.acct)) || ''
|
||||
},
|
||||
shortProfileName: ($currentAccountProfile) => {
|
||||
return ($currentAccountProfile && ('@' + $currentAccountProfile.username)) || ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LazyTimeline,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
DynamicPageBanner,
|
||||
AccountProfile,
|
||||
PinnedStatuses
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<DynamicPageBanner title="Blocked users" icon="#fa-ban" />
|
||||
<AccountsListPage :accountsFetcher />
|
||||
<script>
|
||||
import AccountsListPage from '.././_components/AccountsListPage.html'
|
||||
import { store } from '.././_store/store'
|
||||
import { getBlockedAccounts } from '.././_api/blockedAndMuted'
|
||||
import DynamicPageBanner from '.././_components/DynamicPageBanner.html'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
statusId: params => params.statusId,
|
||||
accountsFetcher: ($currentInstance, $accessToken, statusId) => () => getBlockedAccounts($currentInstance, $accessToken, statusId)
|
||||
},
|
||||
store: () => store,
|
||||
components: {
|
||||
AccountsListPage,
|
||||
DynamicPageBanner
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
{{#if $isUserLoggedIn}}
|
||||
<div class="community-page">
|
||||
|
||||
<h2 class="community-header">
|
||||
Timelines
|
||||
</h2>
|
||||
|
||||
<PageList label="Timelines">
|
||||
<PageListItem href="/local"
|
||||
label="Local Timeline"
|
||||
icon="#fa-users"
|
||||
pinnable="true"
|
||||
/>
|
||||
<PageListItem href="/federated"
|
||||
label="Federated Timeline"
|
||||
icon="#fa-globe"
|
||||
pinnable="true"
|
||||
/>
|
||||
<PageListItem href="/favorites"
|
||||
label="Favorites"
|
||||
icon="#fa-star"
|
||||
pinnable="true"
|
||||
/>
|
||||
</PageList>
|
||||
|
||||
{{#if $lists.length}}
|
||||
|
||||
<h2 class="community-header">
|
||||
Lists
|
||||
</h2>
|
||||
|
||||
<PageList label="Lists">
|
||||
{{#each $lists as list}}
|
||||
<PageListItem href="/lists/{{list.id}}"
|
||||
label="{{list.title}}"
|
||||
icon="#fa-bars"
|
||||
pinnable="true"
|
||||
/>
|
||||
{{/each}}
|
||||
</PageList>
|
||||
|
||||
{{/if}}
|
||||
|
||||
<h2 class="community-header">
|
||||
Instance settings
|
||||
</h2>
|
||||
|
||||
<PageList label="Instance settings">
|
||||
<PageListItem href="/muted"
|
||||
label="Muted users"
|
||||
icon="#fa-volume-off"
|
||||
/>
|
||||
<PageListItem href="/blocked"
|
||||
label="Blocked users"
|
||||
icon="#fa-ban"
|
||||
/>
|
||||
<PageListItem href="/pinned"
|
||||
label="Pinned toots"
|
||||
icon="#fa-thumb-tack"
|
||||
/>
|
||||
</PageList>
|
||||
|
||||
</div>
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Community</h1>
|
||||
|
||||
<p>Community options appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
{{/if}}
|
||||
<style>
|
||||
.community-page {
|
||||
margin: 20px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.community-page {
|
||||
margin: 20px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import FreeTextLayout from '../../_components/FreeTextLayout.html'
|
||||
import { store } from '../../_store/store.js'
|
||||
import HiddenFromSSR from '../../_components/HiddenFromSSR'
|
||||
import PageList from '../../_components/community/PageList.html'
|
||||
import PageListItem from '../../_components/community/PageListItem.html'
|
||||
import { updateLists } from '../../_actions/lists'
|
||||
|
||||
export default {
|
||||
async oncreate() {
|
||||
if (this.store.get('currentInstance')) {
|
||||
await updateLists()
|
||||
}
|
||||
},
|
||||
store: () => store,
|
||||
components: {
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
PageList,
|
||||
PageListItem
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
{{#if $isUserLoggedIn}}
|
||||
{{#if $pinnedPage !== '/favorites'}}
|
||||
<DynamicPageBanner title="Favorites" icon="#fa-star"/>
|
||||
{{/if}}
|
||||
<LazyTimeline timeline='favorites' />
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Favorites</h1>
|
||||
|
||||
<p>Your favorites will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</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'
|
||||
|
||||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
LazyTimeline,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
DynamicPageBanner
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
{{#if $isUserLoggedIn}}
|
||||
{{#if $pinnedPage !== '/federated'}}
|
||||
<DynamicPageBanner title="Federated Timeline" icon="#fa-globe"/>
|
||||
{{/if}}
|
||||
<LazyTimeline timeline='federated' />
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Federated</h1>
|
||||
|
||||
<p>Your federated timeline will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</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'
|
||||
|
||||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
LazyTimeline,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
DynamicPageBanner
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{{#if $isUserLoggedIn}}
|
||||
{{#if $currentVerifyCredentials}}
|
||||
<ComposeBox realm="home" />
|
||||
{{/if}}
|
||||
<LazyTimeline timeline='home' />
|
||||
{{else}}
|
||||
<NotLoggedInHome/>
|
||||
{{/if}}
|
||||
<style>
|
||||
</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'
|
||||
|
||||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
LazyTimeline,
|
||||
NotLoggedInHome,
|
||||
ComposeBox
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
{{#if $isUserLoggedIn}}
|
||||
{{#if $pinnedPage !== `/lists/${params.listId}`}}
|
||||
<DynamicPageBanner title="{{listTitle}}" icon="#fa-bars"/>
|
||||
{{/if}}
|
||||
<LazyTimeline timeline='list/{{params.listId}}' />
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>List</h1>
|
||||
|
||||
<p>A list will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</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'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
list: (params, $lists) => $lists && $lists.find(_ => _.id === params['listId']),
|
||||
listTitle: (list) => list ? list.title : ''
|
||||
},
|
||||
store: () => store,
|
||||
components: {
|
||||
LazyTimeline,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
DynamicPageBanner
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
{{#if $isUserLoggedIn}}
|
||||
{{#if $pinnedPage !== '/local'}}
|
||||
<DynamicPageBanner title="Local Timeline" icon="#fa-users"/>
|
||||
{{/if}}
|
||||
<LazyTimeline timeline='local' />
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Local</h1>
|
||||
|
||||
<p>Your local timeline will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</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'
|
||||
|
||||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
LazyTimeline,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
DynamicPageBanner
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<DynamicPageBanner title="Muted users" icon="#fa-volume-off" />
|
||||
<AccountsListPage :accountsFetcher />
|
||||
<script>
|
||||
import AccountsListPage from '.././_components/AccountsListPage.html'
|
||||
import { store } from '.././_store/store'
|
||||
import { getMutedAccounts } from '.././_api/blockedAndMuted'
|
||||
import DynamicPageBanner from '.././_components/DynamicPageBanner.html'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
statusId: params => params.statusId,
|
||||
accountsFetcher: ($currentInstance, $accessToken, statusId) => () => getMutedAccounts($currentInstance, $accessToken, statusId)
|
||||
},
|
||||
store: () => store,
|
||||
components: {
|
||||
AccountsListPage,
|
||||
DynamicPageBanner
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{{#if $isUserLoggedIn}}
|
||||
<LazyTimeline timeline='notifications' />
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Notifications</h1>
|
||||
|
||||
<p>Your notifications will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</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'
|
||||
|
||||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
LazyTimeline,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<DynamicPageBanner title="Pinned toots" icon="#fa-thumb-tack" />
|
||||
<div class="pinned-toots-page">
|
||||
{{#if loading}}
|
||||
<LoadingPage />
|
||||
{{elseif statuses && statuses.length}}
|
||||
<ul class="pinned-toots-results">
|
||||
{{#each statuses as status, index}}
|
||||
<StatusSearchResult :status :index length="{{statuses.length}}" />
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
</div>
|
||||
<style>
|
||||
.pinned-toots-page {
|
||||
padding: 20px 20px;
|
||||
position: relative;
|
||||
}
|
||||
.pinned-toots-results {
|
||||
list-style: none;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--main-border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.pinned-toots-page {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import { store } from '.././_store/store'
|
||||
import LoadingPage from '.././_components/LoadingPage.html'
|
||||
import StatusSearchResult from '.././_components/search/StatusSearchResult.html'
|
||||
import { toast } from '.././_utils/toast'
|
||||
import DynamicPageBanner from '.././_components/DynamicPageBanner.html'
|
||||
import { getPinnedStatuses } from '.././_api/pinnedStatuses'
|
||||
import { updateVerifyCredentialsForInstance } from '.././_actions/instances'
|
||||
|
||||
export default {
|
||||
async oncreate() {
|
||||
let accountsFetcher = this.get('accountsFetcher')
|
||||
try {
|
||||
let currentInstance = this.store.get('currentInstance')
|
||||
await updateVerifyCredentialsForInstance(currentInstance)
|
||||
let accessToken = this.store.get('accessToken')
|
||||
let verifyCredentials = this.store.get('currentVerifyCredentials')
|
||||
let statuses = await getPinnedStatuses(currentInstance, accessToken, verifyCredentials.id)
|
||||
this.set({ statuses: statuses })
|
||||
} catch (e) {
|
||||
toast.say('Error: ' + (e.name || '') + ' ' + (e.message || ''))
|
||||
} finally {
|
||||
this.set({loading: false})
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
loading: true,
|
||||
accounts: []
|
||||
}),
|
||||
store: () => store,
|
||||
components: {
|
||||
LoadingPage,
|
||||
StatusSearchResult,
|
||||
DynamicPageBanner
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
{{#if $isUserLoggedIn}}
|
||||
<div class="search-page">
|
||||
<Search></Search>
|
||||
</div>
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Search</h1>
|
||||
|
||||
<p>You can search once logged in to an instance.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
{{/if}}
|
||||
<style>
|
||||
.search-page {
|
||||
padding: 20px 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.search-page {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import FreeTextLayout from '.././_components/FreeTextLayout.html'
|
||||
import { store } from '.././_store/store.js'
|
||||
import HiddenFromSSR from '.././_components/HiddenFromSSR'
|
||||
import Search from '.././_components/search/Search.html'
|
||||
|
||||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
Search,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<SettingsLayout page='settings/about' label="About Pinafore">
|
||||
<h1>About Pinafore</h1>
|
||||
|
||||
<p>
|
||||
Pinafore is <ExternalLink href="https://github.com/nolanlawson/pinafore">free and open-source software</ExternalLink>
|
||||
created by <ExternalLink href="https://nolanlawson.com">Nolan Lawson</ExternalLink> and distributed under the
|
||||
<ExternalLink href="https://github.com/nolanlawson/pinafore/blob/master/LICENSE">GNU Affero General Public License</ExternalLink>.
|
||||
</p>
|
||||
|
||||
<p>Icons provided by <ExternalLink href="http://fontawesome.io/">Font Awesome</ExternalLink>.</p>
|
||||
|
||||
<p>Logo thanks to "sailboat" by Gregor Cresnar from <ExternalLink href="https://thenounproject.com/">the Noun Project</ExternalLink>.</p>
|
||||
</SettingsLayout>
|
||||
<script>
|
||||
import SettingsLayout from '../../_components/settings/SettingsLayout.html'
|
||||
import ExternalLink from '../../_components/ExternalLink.html'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SettingsLayout,
|
||||
ExternalLink
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<SettingsLayout page='settings/general' label="General">
|
||||
<h1>General Settings</h1>
|
||||
|
||||
<h2>UI Settings</h2>
|
||||
<form class="ui-settings" aria-label="UI settings">
|
||||
<div class="setting-group">
|
||||
<input type="checkbox" id="choice-autoplay-gif"
|
||||
bind:checked="$autoplayGifs" on:change="store.save()">
|
||||
<label for="choice-autoplay-gif">Autoplay GIFs</label>
|
||||
</div>
|
||||
<div class="setting-group">
|
||||
<input type="checkbox" id="choice-mark-media-sensitive"
|
||||
bind:checked="$markMediaAsSensitive" on:change="store.save()">
|
||||
<label for="choice-mark-media-sensitive">Always mark media as sensitive</label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</SettingsLayout>
|
||||
<style>
|
||||
.ui-settings {
|
||||
background: var(--form-bg);
|
||||
border: 1px solid var(--main-border);
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
line-height: 2em;
|
||||
}
|
||||
.setting-group {
|
||||
padding: 5px 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import SettingsLayout from '../../_components/settings/SettingsLayout.html'
|
||||
import { store } from '../../_store/store'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SettingsLayout
|
||||
},
|
||||
store: () => store
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<SettingsLayout page='settings' label="Settings">
|
||||
<h1>Settings</h1>
|
||||
|
||||
<SettingsList>
|
||||
<SettingsListItem href="/settings/general" label="General"/>
|
||||
<SettingsListItem href="/settings/instances" label="Instances"/>
|
||||
<SettingsListItem href="/settings/about" label="About Pinafore"/>
|
||||
</SettingsList>
|
||||
|
||||
</SettingsLayout>
|
||||
<script>
|
||||
import SettingsLayout from '../../_components/settings/SettingsLayout.html'
|
||||
import SettingsList from '../../_components/settings/SettingsList.html'
|
||||
import SettingsListItem from '../../_components/settings/SettingsListItem.html'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SettingsLayout,
|
||||
SettingsList,
|
||||
SettingsListItem
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
<SettingsLayout page='settings/instances/{{params.instanceName}}' label="{{params.instanceName}}">
|
||||
<h1 class="instance-name-h1">{{params.instanceName}}</h1>
|
||||
|
||||
{{#if verifyCredentials}}
|
||||
<h2>Logged in as:</h2>
|
||||
<div class="acct-current-user">
|
||||
<Avatar account="{{verifyCredentials}}" className="acct-avatar" size="big"/>
|
||||
<ExternalLink class="acct-handle"
|
||||
href="{{verifyCredentials.url}}">
|
||||
{{'@' + verifyCredentials.acct}}
|
||||
</ExternalLink>
|
||||
<span class="acct-display-name">{{verifyCredentials.display_name || verifyCredentials.acct}}</span>
|
||||
</div>
|
||||
<h2>Theme:</h2>
|
||||
<form class="theme-chooser" aria-label="Choose a theme">
|
||||
{{#each themes as theme}}
|
||||
<div class="theme-group">
|
||||
<input type="radio" id="choice-theme-{{theme.name}}"
|
||||
value="{{theme.name}}" checked="$currentTheme === theme.name"
|
||||
bind:group="selectedTheme" on:change="onThemeChange()">
|
||||
<label for="choice-theme-{{theme.name}}">{{theme.label}}</label>
|
||||
</div>
|
||||
{{/each}}
|
||||
</form>
|
||||
|
||||
<form class="instance-actions" aria-label="Switch to or log out of this instance">
|
||||
{{#if $loggedInInstancesInOrder.length > 1 && $currentInstance !== params.instanceName}}
|
||||
<button class="primary"
|
||||
on:click="onSwitchToThisInstance(event)">
|
||||
Switch to this instance
|
||||
</button>
|
||||
{{/if}}
|
||||
<button on:click="onLogOut(event)">Log out</button>
|
||||
</form>
|
||||
{{/if}}
|
||||
</SettingsLayout>
|
||||
<style>
|
||||
.acct-current-user {
|
||||
background: var(--form-bg);
|
||||
border: 1px solid var(--main-border);
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
font-size: 1.3em;
|
||||
grid-template-areas:
|
||||
"avatar handle"
|
||||
"avatar display-name";
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
:global(.acct-avatar) {
|
||||
grid-area: avatar;
|
||||
}
|
||||
:global(.acct-handle) {
|
||||
grid-area: handle;
|
||||
}
|
||||
.acct-display-name {
|
||||
grid-area: display-name;
|
||||
}
|
||||
.theme-chooser {
|
||||
background: var(--form-bg);
|
||||
border: 1px solid var(--main-border);
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
padding: 20px;
|
||||
line-height: 2em;
|
||||
}
|
||||
.theme-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.theme-chooser label {
|
||||
margin: 2px 10px 0;
|
||||
}
|
||||
.instance-actions {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.instance-actions button {
|
||||
margin: 0 5px;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.instance-name-h1 {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import { store } from '../../../_store/store'
|
||||
import SettingsLayout from '../../../_components/settings/SettingsLayout.html'
|
||||
import ExternalLink from '../../../_components/ExternalLink.html'
|
||||
import Avatar from '../../../_components/Avatar.html'
|
||||
import { importDialogs } from '../../../_utils/asyncModules'
|
||||
import {
|
||||
changeTheme,
|
||||
switchToInstance,
|
||||
logOutOfInstance,
|
||||
updateVerifyCredentialsForInstance
|
||||
} from '../../../_actions/instances'
|
||||
import { themes } from '../../../_static/themes'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SettingsLayout,
|
||||
ExternalLink,
|
||||
Avatar
|
||||
},
|
||||
store: () => store,
|
||||
data: () => ({
|
||||
themes: themes,
|
||||
}),
|
||||
async oncreate() {
|
||||
let instanceName = this.get('instanceName')
|
||||
await updateVerifyCredentialsForInstance(instanceName)
|
||||
},
|
||||
computed: {
|
||||
instanceName: (params) => params.instanceName,
|
||||
selectedTheme: ($instanceThemes, instanceName) => $instanceThemes[instanceName],
|
||||
verifyCredentials: ($verifyCredentials, instanceName) => $verifyCredentials && $verifyCredentials[instanceName]
|
||||
},
|
||||
methods: {
|
||||
onThemeChange() {
|
||||
let newTheme = this.get('selectedTheme')
|
||||
let instanceName = this.get('instanceName')
|
||||
changeTheme(instanceName, newTheme)
|
||||
},
|
||||
onSwitchToThisInstance(e) {
|
||||
e.preventDefault()
|
||||
let instanceName = this.get('instanceName')
|
||||
switchToInstance(instanceName)
|
||||
},
|
||||
async onLogOut(e) {
|
||||
e.preventDefault()
|
||||
let instanceName = this.get('instanceName')
|
||||
|
||||
let dialogs = await importDialogs()
|
||||
dialogs.showConfirmationDialog({
|
||||
text: `Log out of ${instanceName}?`,
|
||||
onPositive() {
|
||||
logOutOfInstance(instanceName)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<SettingsLayout page='settings/instances/add' label="Add an Instance">
|
||||
<h1 id="add-an-instance-h1">Add an Instance</h1>
|
||||
|
||||
{{#if $isUserLoggedIn}}
|
||||
<p>Connect to an instance to log in.</p>
|
||||
{{else}}
|
||||
<p>Log in to an instance to use Pinafore.</p>
|
||||
{{/if}}
|
||||
|
||||
<form class="add-new-instance" on:submit='onSubmit(event)' aria-labelledby="add-an-instance-h1">
|
||||
|
||||
{{#if $logInToInstanceError && $logInToInstanceErrorForText === $instanceNameInSearch}}
|
||||
<div class="form-error form-error-user-error" role="alert">
|
||||
Error: {{$logInToInstanceError}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<noscript>
|
||||
<div class="form-error" role="alert">
|
||||
You must enable JavaScript to log in.
|
||||
</div>
|
||||
</noscript>
|
||||
|
||||
<label for="instanceInput">Instance:</label>
|
||||
<input class="new-instance-input" type="text" id="instanceInput"
|
||||
bind:value='$instanceNameInSearch' placeholder='' required
|
||||
>
|
||||
<button class="primary" type="submit" id="submitButton"
|
||||
disabled="{{!$instanceNameInSearch || $logInToInstanceLoading}}">
|
||||
Add instance
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{{#if !$isUserLoggedIn}}
|
||||
<p>Don't have an instance? <ExternalLink href="https://joinmastodon.org">Join Mastodon!</ExternalLink></p>
|
||||
{{/if}}
|
||||
</SettingsLayout>
|
||||
<style>
|
||||
.form-error {
|
||||
border: 2px solid red;
|
||||
border-radius: 2px;
|
||||
padding: 10px;
|
||||
font-size: 1.3em;
|
||||
margin: 5px;
|
||||
background-color: var(--main-bg);
|
||||
}
|
||||
input.new-instance-input {
|
||||
min-width: 60%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
form.add-new-instance {
|
||||
background: var(--form-bg);
|
||||
padding: 5px 10px 15px;
|
||||
margin: 20px auto;
|
||||
border: 1px solid var(--form-border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
form.add-new-instance label, form.add-new-instance input, form.add-new-instance button {
|
||||
display: block;
|
||||
margin: 20px 5px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import SettingsLayout from '../../../_components/settings/SettingsLayout.html'
|
||||
import { store } from '../../../_store/store'
|
||||
import { logInToInstance, handleOauthCode } from '../../../_actions/addInstance'
|
||||
import ExternalLink from '../../../_components/ExternalLink.html'
|
||||
|
||||
export default {
|
||||
async oncreate () {
|
||||
let codeMatch = location.search.match(/code=([^&]+)/)
|
||||
if (codeMatch) {
|
||||
handleOauthCode(codeMatch[1])
|
||||
}
|
||||
},
|
||||
components: {
|
||||
SettingsLayout,
|
||||
ExternalLink
|
||||
},
|
||||
store: () => store,
|
||||
methods: {
|
||||
onSubmit(event) {
|
||||
event.preventDefault()
|
||||
logInToInstance()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<SettingsLayout page='settings/instances' label="Instances">
|
||||
<h1>Instances</h1>
|
||||
|
||||
{{#if $isUserLoggedIn}}
|
||||
<p>Instances you've logged in to:</p>
|
||||
<SettingsList label="Instances">
|
||||
{{#each $loggedInInstancesAsList as instance}}
|
||||
<SettingsListItem offsetForIcon="{{instance.name !== $currentInstance}}"
|
||||
icon="{{instance.name === $currentInstance ? '#fa-star' : ''}}"
|
||||
href="/settings/instances/{{instance.name}}"
|
||||
label="{{instance.name}}"
|
||||
ariaLabel="{{instance.name}} {{instance.name === $currentInstance ? '(current instance)' : ''}}" />
|
||||
{{/each}}
|
||||
</SettingsList>
|
||||
<p><a href="/settings/instances/add">Add another instance</a></p>
|
||||
{{else}}
|
||||
<p>You're not logged in to any instances.</p>
|
||||
<p><a href="/settings/instances/add">Log in to an instance</a> to start using Pinafore.</p>
|
||||
{{/if}}
|
||||
</SettingsLayout>
|
||||
<script>
|
||||
import { store } from '../../../_store/store'
|
||||
import SettingsLayout from '../../../_components/settings/SettingsLayout.html'
|
||||
import SettingsList from '../../../_components/settings/SettingsList.html'
|
||||
import SettingsListItem from '../../../_components/settings/SettingsListItem.html'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SettingsLayout,
|
||||
SettingsList,
|
||||
SettingsListItem
|
||||
},
|
||||
store: () => store
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<DynamicPageBanner title="Favorites" icon="#fa-star" />
|
||||
<AccountsListPage :accountsFetcher />
|
||||
<script>
|
||||
import { getFavorites } from '../../../_api/reblogsAndFavs'
|
||||
import AccountsListPage from '../../../_components/AccountsListPage.html'
|
||||
import { store } from '../../../_store/store'
|
||||
import DynamicPageBanner from '../../../_components/DynamicPageBanner.html'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
statusId: params => params.statusId,
|
||||
accountsFetcher: ($currentInstance, $accessToken, statusId) => () => getFavorites($currentInstance, $accessToken, statusId)
|
||||
},
|
||||
store: () => store,
|
||||
components: {
|
||||
AccountsListPage,
|
||||
DynamicPageBanner
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
{{#if $isUserLoggedIn}}
|
||||
<DynamicPageBanner title=""/>
|
||||
<LazyTimeline timeline='status/{{params.statusId}}' />
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Status</h1>
|
||||
|
||||
<p>A status thread will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</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'
|
||||
|
||||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
LazyTimeline,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
DynamicPageBanner
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<DynamicPageBanner title="Boosts" icon="#fa-retweet" />
|
||||
<AccountsListPage :accountsFetcher />
|
||||
<script>
|
||||
import { getReblogs } from '../../../_api/reblogsAndFavs'
|
||||
import AccountsListPage from '../../../_components/AccountsListPage.html'
|
||||
import { store } from '../../../_store/store'
|
||||
import DynamicPageBanner from '../../../_components/DynamicPageBanner.html'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
statusId: params => params.statusId,
|
||||
accountsFetcher: ($currentInstance, $accessToken, statusId) => () => getReblogs($currentInstance, $accessToken, statusId)
|
||||
},
|
||||
store: () => store,
|
||||
components: {
|
||||
AccountsListPage,
|
||||
DynamicPageBanner
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<DynamicPageBanner title=""/>
|
||||
<div class="reply-container">
|
||||
{{#if status}}
|
||||
<Status index="0"
|
||||
length="1"
|
||||
timelineType="reply"
|
||||
timelineValue="{{params.statusId}}"
|
||||
:status
|
||||
/>
|
||||
<ComposeBox realm="{{params.statusId}}" />
|
||||
{{else}}
|
||||
<LoadingPage />
|
||||
{{/if}}
|
||||
</div>
|
||||
<style>
|
||||
.reply-container {
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import { store } from '../../../_store/store.js'
|
||||
import DynamicPageBanner from '../../../_components/DynamicPageBanner.html'
|
||||
import LoadingPage from '../../../_components/LoadingPage.html'
|
||||
import ComposeBox from '../../../_components/compose/ComposeBox.html'
|
||||
import Status from '../../../_components/status/Status.html'
|
||||
import { database } from '../../../_database/database'
|
||||
|
||||
export default {
|
||||
async oncreate() {
|
||||
let statusId = this.get('params').statusId
|
||||
let instanceName = this.store.get('currentInstance')
|
||||
let status = await database.getStatus(instanceName, statusId)
|
||||
this.set({status})
|
||||
},
|
||||
store: () => store,
|
||||
components: {
|
||||
DynamicPageBanner,
|
||||
LoadingPage,
|
||||
ComposeBox,
|
||||
Status
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
{{#if $isUserLoggedIn}}
|
||||
<DynamicPageBanner title="{{'#' + params.tagName}}"/>
|
||||
<LazyTimeline timeline='tag/{{params.tagName}}' />
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>#{{params.tagName}}</h1>
|
||||
|
||||
<p>A hashtag timeline will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</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'
|
||||
|
||||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
LazyTimeline,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
DynamicPageBanner
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,64 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – {{profileName}}</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='tags'>
|
||||
{{#if $isUserLoggedIn}}
|
||||
<DynamicPageBanner title="" />
|
||||
{{#if $currentAccountProfile}}
|
||||
<AccountProfile profile="{{$currentAccountProfile}}"
|
||||
relationship="{{$currentAccountRelationship}}"
|
||||
verifyCredentials="{{$currentVerifyCredentials}}"
|
||||
/>
|
||||
{{/if}}
|
||||
<PinnedStatuses accountId="{{params.accountId}}" />
|
||||
<LazyTimeline timeline='account/{{params.accountId}}' />
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Profile</h1>
|
||||
|
||||
<p>A user timeline will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
{{/if}}
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
<script>
|
||||
import Layout from '../_components/Layout.html'
|
||||
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 { updateProfileAndRelationship } from '../_actions/accounts'
|
||||
import AccountProfile from '../_components/AccountProfile.html'
|
||||
import { updateVerifyCredentialsForInstance } from '../_actions/instances'
|
||||
import PinnedStatuses from '../_components/timeline/PinnedStatuses.html'
|
||||
import LazyPage from '../_components/LazyPage.html'
|
||||
import pageComponent from '../_pages/accounts/[accountId].html'
|
||||
|
||||
export default {
|
||||
oncreate() {
|
||||
let accountId = this.get('params').accountId
|
||||
let instanceName = this.store.get('currentInstance')
|
||||
updateProfileAndRelationship(accountId)
|
||||
updateVerifyCredentialsForInstance(instanceName)
|
||||
},
|
||||
store: () => store,
|
||||
computed: {
|
||||
profileName: ($currentAccountProfile) => {
|
||||
return ($currentAccountProfile && ('@' + $currentAccountProfile.acct)) || ''
|
||||
},
|
||||
shortProfileName: ($currentAccountProfile) => {
|
||||
return ($currentAccountProfile && ('@' + $currentAccountProfile.username)) || ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Layout,
|
||||
LazyTimeline,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
DynamicPageBanner,
|
||||
AccountProfile,
|
||||
PinnedStatuses
|
||||
}
|
||||
LazyPage
|
||||
},
|
||||
data: () => ({
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,28 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – Blocked users</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='blocked'>
|
||||
<DynamicPageBanner title="Blocked users" icon="#fa-ban" />
|
||||
<AccountsListPage :accountsFetcher />
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
<script>
|
||||
import Layout from './_components/Layout.html'
|
||||
import AccountsListPage from './_components/AccountsListPage.html'
|
||||
import { store } from './_store/store'
|
||||
import { getBlockedAccounts } from './_api/blockedAndMuted'
|
||||
import DynamicPageBanner from './_components/DynamicPageBanner.html'
|
||||
import LazyPage from './_components/LazyPage.html'
|
||||
import pageComponent from './_pages/blocked.html'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
statusId: params => params.statusId,
|
||||
accountsFetcher: ($currentInstance, $accessToken, statusId) => () => getBlockedAccounts($currentInstance, $accessToken, statusId)
|
||||
},
|
||||
store: () => store,
|
||||
components: {
|
||||
Layout,
|
||||
AccountsListPage,
|
||||
DynamicPageBanner
|
||||
}
|
||||
LazyPage
|
||||
},
|
||||
data: () => ({
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,111 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – Community</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='community'>
|
||||
{{#if $isUserLoggedIn}}
|
||||
<div class="community-page">
|
||||
|
||||
<h2 class="community-header">
|
||||
Timelines
|
||||
</h2>
|
||||
|
||||
<PageList label="Timelines">
|
||||
<PageListItem href="/local"
|
||||
label="Local Timeline"
|
||||
icon="#fa-users"
|
||||
pinnable="true"
|
||||
/>
|
||||
<PageListItem href="/federated"
|
||||
label="Federated Timeline"
|
||||
icon="#fa-globe"
|
||||
pinnable="true"
|
||||
/>
|
||||
<PageListItem href="/favorites"
|
||||
label="Favorites"
|
||||
icon="#fa-star"
|
||||
pinnable="true"
|
||||
/>
|
||||
</PageList>
|
||||
|
||||
{{#if $lists.length}}
|
||||
|
||||
<h2 class="community-header">
|
||||
Lists
|
||||
</h2>
|
||||
|
||||
<PageList label="Lists">
|
||||
{{#each $lists as list}}
|
||||
<PageListItem href="/lists/{{list.id}}"
|
||||
label="{{list.title}}"
|
||||
icon="#fa-bars"
|
||||
pinnable="true"
|
||||
/>
|
||||
{{/each}}
|
||||
</PageList>
|
||||
|
||||
{{/if}}
|
||||
|
||||
<h2 class="community-header">
|
||||
Instance settings
|
||||
</h2>
|
||||
|
||||
<PageList label="Instance settings">
|
||||
<PageListItem href="/muted"
|
||||
label="Muted users"
|
||||
icon="#fa-volume-off"
|
||||
/>
|
||||
<PageListItem href="/blocked"
|
||||
label="Blocked users"
|
||||
icon="#fa-ban"
|
||||
/>
|
||||
<PageListItem href="/pinned"
|
||||
label="Pinned toots"
|
||||
icon="#fa-thumb-tack"
|
||||
/>
|
||||
</PageList>
|
||||
|
||||
</div>
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Community</h1>
|
||||
|
||||
<p>Community options appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
{{/if}}
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
<style>
|
||||
.community-page {
|
||||
margin: 20px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.community-page {
|
||||
margin: 20px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Layout from '../_components/Layout.html'
|
||||
import FreeTextLayout from '../_components/FreeTextLayout.html'
|
||||
import { store } from '../_store/store.js'
|
||||
import HiddenFromSSR from '../_components/HiddenFromSSR'
|
||||
import PageList from './_components/PageList.html'
|
||||
import PageListItem from './_components/PageListItem.html'
|
||||
import { updateLists } from '../_actions/lists'
|
||||
import LazyPage from '../_components/LazyPage.html'
|
||||
import pageComponent from '../_pages/community/index.html'
|
||||
|
||||
export default {
|
||||
async oncreate() {
|
||||
await updateLists()
|
||||
},
|
||||
store: () => store,
|
||||
components: {
|
||||
Layout,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
PageList,
|
||||
PageListItem
|
||||
}
|
||||
};
|
||||
LazyPage
|
||||
},
|
||||
data: () => ({
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,40 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – Favorites</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='favorites'>
|
||||
{{#if $isUserLoggedIn}}
|
||||
{{#if $pinnedPage !== '/favorites'}}
|
||||
<DynamicPageBanner title="Favorites" icon="#fa-star"/>
|
||||
{{/if}}
|
||||
<LazyTimeline timeline='favorites' />
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Favorites</h1>
|
||||
|
||||
<p>Your favorites will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
{{/if}}
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
|
||||
<script>
|
||||
import Layout from './_components/Layout.html'
|
||||
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 LazyPage from './_components/LazyPage.html'
|
||||
import pageComponent from './_pages/favorites.html'
|
||||
|
||||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
Layout,
|
||||
LazyTimeline,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
DynamicPageBanner
|
||||
}
|
||||
LazyPage
|
||||
},
|
||||
data: () => ({
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,40 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – Federated</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='federated'>
|
||||
{{#if $isUserLoggedIn}}
|
||||
{{#if $pinnedPage !== '/federated'}}
|
||||
<DynamicPageBanner title="Federated Timeline" icon="#fa-globe"/>
|
||||
{{/if}}
|
||||
<LazyTimeline timeline='federated' />
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Federated</h1>
|
||||
|
||||
<p>Your federated timeline will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
{{/if}}
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
|
||||
<script>
|
||||
import Layout from './_components/Layout.html'
|
||||
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 LazyPage from './_components/LazyPage.html'
|
||||
import pageComponent from './_pages/federated.html'
|
||||
|
||||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
Layout,
|
||||
LazyTimeline,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
DynamicPageBanner
|
||||
}
|
||||
LazyPage
|
||||
},
|
||||
data: () => ({
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,35 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – Home</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='home'>
|
||||
{{#if $isUserLoggedIn}}
|
||||
{{#if $currentVerifyCredentials}}
|
||||
<ComposeBox realm="home" />
|
||||
{{/if}}
|
||||
<LazyTimeline timeline='home' />
|
||||
{{else}}
|
||||
<NotLoggedInHome/>
|
||||
{{/if}}
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
|
||||
|
||||
<script>
|
||||
import Layout from './_components/Layout.html'
|
||||
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 LazyPage from './_components/LazyPage.html'
|
||||
import pageComponent from './_pages/index.html'
|
||||
|
||||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
Layout,
|
||||
LazyTimeline,
|
||||
NotLoggedInHome,
|
||||
ComposeBox
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
export default {
|
||||
components: {
|
||||
Layout,
|
||||
LazyPage
|
||||
},
|
||||
data: () => ({
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,43 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – {{listTitle}}</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='lists'>
|
||||
{{#if $isUserLoggedIn}}
|
||||
{{#if $pinnedPage !== `/lists/${params.listId}`}}
|
||||
<DynamicPageBanner title="{{listTitle}}" icon="#fa-bars"/>
|
||||
{{/if}}
|
||||
<LazyTimeline timeline='list/{{params.listId}}' />
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>List</h1>
|
||||
|
||||
<p>A list will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
{{/if}}
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
<script>
|
||||
import Layout from '../_components/Layout.html'
|
||||
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 LazyPage from '../_components/LazyPage.html'
|
||||
import pageComponent from '../_pages/lists/[listId].html'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
list: (params, $lists) => $lists && $lists.find(_ => _.id === params['listId']),
|
||||
listTitle: (list) => list ? list.title : ''
|
||||
},
|
||||
store: () => store,
|
||||
components: {
|
||||
Layout,
|
||||
LazyTimeline,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
DynamicPageBanner
|
||||
}
|
||||
LazyPage
|
||||
},
|
||||
data: () => ({
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,40 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – Local</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='local'>
|
||||
{{#if $isUserLoggedIn}}
|
||||
{{#if $pinnedPage !== '/local'}}
|
||||
<DynamicPageBanner title="Local Timeline" icon="#fa-users"/>
|
||||
{{/if}}
|
||||
<LazyTimeline timeline='local' />
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Local</h1>
|
||||
|
||||
<p>Your local timeline will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
{{/if}}
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
|
||||
<script>
|
||||
import Layout from './_components/Layout.html'
|
||||
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 LazyPage from './_components/LazyPage.html'
|
||||
import pageComponent from './_pages/local.html'
|
||||
|
||||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
Layout,
|
||||
LazyTimeline,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
DynamicPageBanner
|
||||
}
|
||||
LazyPage
|
||||
},
|
||||
data: () => ({
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,28 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – Muted users</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='muted'>
|
||||
<DynamicPageBanner title="Muted users" icon="#fa-volume-off" />
|
||||
<AccountsListPage :accountsFetcher />
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
<script>
|
||||
import Layout from './_components/Layout.html'
|
||||
import AccountsListPage from './_components/AccountsListPage.html'
|
||||
import { store } from './_store/store'
|
||||
import { getMutedAccounts } from './_api/blockedAndMuted'
|
||||
import DynamicPageBanner from './_components/DynamicPageBanner.html'
|
||||
import LazyPage from './_components/LazyPage.html'
|
||||
import pageComponent from './_pages/muted.html'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
statusId: params => params.statusId,
|
||||
accountsFetcher: ($currentInstance, $accessToken, statusId) => () => getMutedAccounts($currentInstance, $accessToken, statusId)
|
||||
},
|
||||
store: () => store,
|
||||
components: {
|
||||
Layout,
|
||||
AccountsListPage,
|
||||
DynamicPageBanner
|
||||
}
|
||||
LazyPage
|
||||
},
|
||||
data: () => ({
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,35 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – Notifications</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='notifications'>
|
||||
{{#if $isUserLoggedIn}}
|
||||
<LazyTimeline timeline='notifications' />
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Notifications</h1>
|
||||
|
||||
<p>Your notifications will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
{{/if}}
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
|
||||
<script>
|
||||
import Layout from './_components/Layout.html'
|
||||
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 LazyPage from './_components/LazyPage.html'
|
||||
import pageComponent from './_pages/notifications.html'
|
||||
|
||||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
Layout,
|
||||
LazyTimeline,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR
|
||||
}
|
||||
};
|
||||
LazyPage
|
||||
},
|
||||
data: () => ({
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,75 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – Pinned toots</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='pinned'>
|
||||
<DynamicPageBanner title="Pinned toots" icon="#fa-thumb-tack" />
|
||||
<div class="pinned-toots-page">
|
||||
{{#if loading}}
|
||||
<LoadingPage />
|
||||
{{elseif statuses && statuses.length}}
|
||||
<ul class="pinned-toots-results">
|
||||
{{#each statuses as status, index}}
|
||||
<StatusSearchResult :status :index length="{{statuses.length}}" />
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
</div>
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
<style>
|
||||
.pinned-toots-page {
|
||||
min-height: 60vh;
|
||||
padding: 20px 20px;
|
||||
position: relative;
|
||||
}
|
||||
.pinned-toots-results {
|
||||
list-style: none;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--main-border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.pinned-toots-page {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Layout from './_components/Layout.html'
|
||||
import { store } from './_store/store'
|
||||
import LoadingPage from './_components/LoadingPage.html'
|
||||
import StatusSearchResult from './_components/search/StatusSearchResult.html'
|
||||
import { toast } from './_utils/toast'
|
||||
import DynamicPageBanner from './_components/DynamicPageBanner.html'
|
||||
import { getPinnedStatuses } from './_api/pinnedStatuses'
|
||||
import { updateVerifyCredentialsForInstance } from './_actions/instances'
|
||||
import LazyPage from './_components/LazyPage.html'
|
||||
import pageComponent from './_pages/pinned.html'
|
||||
|
||||
export default {
|
||||
async oncreate() {
|
||||
let accountsFetcher = this.get('accountsFetcher')
|
||||
try {
|
||||
let currentInstance = this.store.get('currentInstance')
|
||||
await updateVerifyCredentialsForInstance(currentInstance)
|
||||
let accessToken = this.store.get('accessToken')
|
||||
let verifyCredentials = this.store.get('currentVerifyCredentials')
|
||||
let statuses = await getPinnedStatuses(currentInstance, accessToken, verifyCredentials.id)
|
||||
this.set({ statuses: statuses })
|
||||
} catch (e) {
|
||||
toast.say('Error: ' + (e.name || '') + ' ' + (e.message || ''))
|
||||
} finally {
|
||||
this.set({loading: false})
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
loading: true,
|
||||
accounts: []
|
||||
}),
|
||||
store: () => store,
|
||||
components: {
|
||||
Layout,
|
||||
LoadingPage,
|
||||
StatusSearchResult,
|
||||
DynamicPageBanner
|
||||
}
|
||||
LazyPage
|
||||
},
|
||||
data: () => ({
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,48 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – Search</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='search'>
|
||||
{{#if $isUserLoggedIn}}
|
||||
<div class="search-page">
|
||||
<Search></Search>
|
||||
</div>
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Search</h1>
|
||||
|
||||
<p>You can search once logged in to an instance.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
{{/if}}
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
<style>
|
||||
.search-page {
|
||||
min-height: 60vh;
|
||||
padding: 20px 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.search-page {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Layout from './_components/Layout.html'
|
||||
import FreeTextLayout from './_components/FreeTextLayout.html'
|
||||
import { store } from './_store/store.js'
|
||||
import HiddenFromSSR from './_components/HiddenFromSSR'
|
||||
import Search from './_components/search/Search.html'
|
||||
import LazyPage from './_components/LazyPage.html'
|
||||
import pageComponent from './_pages/search.html'
|
||||
|
||||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
Layout,
|
||||
Search,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR
|
||||
}
|
||||
LazyPage
|
||||
},
|
||||
data: () => ({
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,33 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – About</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='settings'>
|
||||
<SettingsLayout page='settings/about' label="About Pinafore">
|
||||
<h1>About Pinafore</h1>
|
||||
|
||||
<p>
|
||||
Pinafore is <ExternalLink href="https://github.com/nolanlawson/pinafore">free and open-source software</ExternalLink>
|
||||
created by <ExternalLink href="https://nolanlawson.com">Nolan Lawson</ExternalLink> and distributed under the
|
||||
<ExternalLink href="https://github.com/nolanlawson/pinafore/blob/master/LICENSE">GNU Affero General Public License</ExternalLink>.
|
||||
</p>
|
||||
|
||||
<p>Icons provided by <ExternalLink href="http://fontawesome.io/">Font Awesome</ExternalLink>.</p>
|
||||
|
||||
<p>Logo thanks to "sailboat" by Gregor Cresnar from <ExternalLink href="https://thenounproject.com/">the Noun Project</ExternalLink>.</p>
|
||||
</SettingsLayout>
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
|
||||
<script>
|
||||
import Layout from '../_components/Layout.html';
|
||||
import SettingsLayout from './_components/SettingsLayout.html'
|
||||
import ExternalLink from '../_components/ExternalLink.html'
|
||||
import Layout from '../_components/Layout.html'
|
||||
import LazyPage from '../_components/LazyPage.html'
|
||||
import pageComponent from '../_pages/settings/about.html'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Layout,
|
||||
SettingsLayout,
|
||||
ExternalLink
|
||||
}
|
||||
};
|
||||
LazyPage
|
||||
},
|
||||
data: () => ({
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,50 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – General Settings</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='settings'>
|
||||
<SettingsLayout page='settings/general' label="General">
|
||||
<h1>General Settings</h1>
|
||||
|
||||
<h2>UI Settings</h2>
|
||||
<form class="ui-settings" aria-label="UI settings">
|
||||
<div class="setting-group">
|
||||
<input type="checkbox" id="choice-autoplay-gif"
|
||||
bind:checked="$autoplayGifs" on:change="store.save()">
|
||||
<label for="choice-autoplay-gif">Autoplay GIFs</label>
|
||||
</div>
|
||||
<div class="setting-group">
|
||||
<input type="checkbox" id="choice-mark-media-sensitive"
|
||||
bind:checked="$markMediaAsSensitive" on:change="store.save()">
|
||||
<label for="choice-mark-media-sensitive">Always mark media as sensitive</label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</SettingsLayout>
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.ui-settings {
|
||||
background: var(--form-bg);
|
||||
border: 1px solid var(--main-border);
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
line-height: 2em;
|
||||
}
|
||||
.setting-group {
|
||||
padding: 5px 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Layout from '../_components/Layout.html';
|
||||
import SettingsLayout from './_components/SettingsLayout.html'
|
||||
import { store } from '../_store/store'
|
||||
import Layout from '../_components/Layout.html'
|
||||
import LazyPage from '../_components/LazyPage.html'
|
||||
import pageComponent from '../_pages/settings/general.html'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Layout,
|
||||
SettingsLayout
|
||||
LazyPage
|
||||
},
|
||||
store: () => store
|
||||
};
|
||||
data: () => ({
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,31 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – Settings</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='settings'>
|
||||
<SettingsLayout page='settings' label="Settings">
|
||||
<h1>Settings</h1>
|
||||
|
||||
<SettingsList>
|
||||
<SettingsListItem href="/settings/general" label="General"/>
|
||||
<SettingsListItem href="/settings/instances" label="Instances"/>
|
||||
<SettingsListItem href="/settings/about" label="About Pinafore"/>
|
||||
</SettingsList>
|
||||
|
||||
</SettingsLayout>
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
<script>
|
||||
import Layout from '../_components/Layout.html';
|
||||
import SettingsLayout from './_components/SettingsLayout.html'
|
||||
import SettingsList from './_components/SettingsList.html'
|
||||
import SettingsListItem from './_components/SettingsListItem.html'
|
||||
import Layout from '../_components/Layout.html'
|
||||
import LazyPage from '../_components/LazyPage.html'
|
||||
import pageComponent from '../_pages/settings/index.html'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Layout,
|
||||
SettingsLayout,
|
||||
SettingsList,
|
||||
SettingsListItem
|
||||
}
|
||||
};
|
||||
LazyPage
|
||||
},
|
||||
data: () => ({
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,159 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – {{params.instanceName}}</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='settings'>
|
||||
<SettingsLayout page='settings/instances/{{params.instanceName}}' label="{{params.instanceName}}">
|
||||
<h1 class="instance-name-h1">{{params.instanceName}}</h1>
|
||||
|
||||
{{#if verifyCredentials}}
|
||||
<h2>Logged in as:</h2>
|
||||
<div class="acct-current-user">
|
||||
<Avatar account="{{verifyCredentials}}" className="acct-avatar" size="big"/>
|
||||
<ExternalLink class="acct-handle"
|
||||
href="{{verifyCredentials.url}}">
|
||||
{{'@' + verifyCredentials.acct}}
|
||||
</ExternalLink>
|
||||
<span class="acct-display-name">{{verifyCredentials.display_name || verifyCredentials.acct}}</span>
|
||||
</div>
|
||||
<h2>Theme:</h2>
|
||||
<form class="theme-chooser" aria-label="Choose a theme">
|
||||
{{#each themes as theme}}
|
||||
<div class="theme-group">
|
||||
<input type="radio" id="choice-theme-{{theme.name}}"
|
||||
value="{{theme.name}}" checked="$currentTheme === theme.name"
|
||||
bind:group="selectedTheme" on:change="onThemeChange()">
|
||||
<label for="choice-theme-{{theme.name}}">{{theme.label}}</label>
|
||||
</div>
|
||||
{{/each}}
|
||||
</form>
|
||||
|
||||
<form class="instance-actions" aria-label="Switch to or log out of this instance">
|
||||
{{#if $loggedInInstancesInOrder.length > 1 && $currentInstance !== params.instanceName}}
|
||||
<button class="primary"
|
||||
on:click="onSwitchToThisInstance(event)">
|
||||
Switch to this instance
|
||||
</button>
|
||||
{{/if}}
|
||||
<button on:click="onLogOut(event)">Log out</button>
|
||||
</form>
|
||||
{{/if}}
|
||||
</SettingsLayout>
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
<style>
|
||||
.acct-current-user {
|
||||
background: var(--form-bg);
|
||||
border: 1px solid var(--main-border);
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
font-size: 1.3em;
|
||||
grid-template-areas:
|
||||
"avatar handle"
|
||||
"avatar display-name";
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-column-gap: 20px;
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
:global(.acct-avatar) {
|
||||
grid-area: avatar;
|
||||
}
|
||||
:global(.acct-handle) {
|
||||
grid-area: handle;
|
||||
}
|
||||
.acct-display-name {
|
||||
grid-area: display-name;
|
||||
}
|
||||
.theme-chooser {
|
||||
background: var(--form-bg);
|
||||
border: 1px solid var(--main-border);
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
padding: 20px;
|
||||
line-height: 2em;
|
||||
}
|
||||
.theme-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.theme-chooser label {
|
||||
margin: 2px 10px 0;
|
||||
}
|
||||
.instance-actions {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.instance-actions button {
|
||||
margin: 0 5px;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.instance-name-h1 {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import { store } from '../../_store/store'
|
||||
import Layout from '../../_components/Layout.html'
|
||||
import SettingsLayout from '../_components/SettingsLayout.html'
|
||||
import ExternalLink from '../../_components/ExternalLink.html'
|
||||
import Avatar from '../../_components/Avatar.html'
|
||||
import { importDialogs } from '../../_utils/asyncModules'
|
||||
import {
|
||||
changeTheme,
|
||||
switchToInstance,
|
||||
logOutOfInstance,
|
||||
updateVerifyCredentialsForInstance
|
||||
} from '../../_actions/instances'
|
||||
import { themes } from '../../_static/themes'
|
||||
import LazyPage from '../../_components/LazyPage.html'
|
||||
import pageComponent from '../../_pages/settings/instances/[instanceName].html'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Layout,
|
||||
SettingsLayout,
|
||||
ExternalLink,
|
||||
Avatar
|
||||
LazyPage
|
||||
},
|
||||
store: () => store,
|
||||
data: () => ({
|
||||
themes: themes,
|
||||
}),
|
||||
async oncreate() {
|
||||
let instanceName = this.get('instanceName')
|
||||
await updateVerifyCredentialsForInstance(instanceName)
|
||||
},
|
||||
computed: {
|
||||
instanceName: (params) => params.instanceName,
|
||||
selectedTheme: ($instanceThemes, instanceName) => $instanceThemes[instanceName],
|
||||
verifyCredentials: ($verifyCredentials, instanceName) => $verifyCredentials && $verifyCredentials[instanceName]
|
||||
},
|
||||
methods: {
|
||||
onThemeChange() {
|
||||
let newTheme = this.get('selectedTheme')
|
||||
let instanceName = this.get('instanceName')
|
||||
changeTheme(instanceName, newTheme)
|
||||
},
|
||||
onSwitchToThisInstance(e) {
|
||||
e.preventDefault()
|
||||
let instanceName = this.get('instanceName')
|
||||
switchToInstance(instanceName)
|
||||
},
|
||||
async onLogOut(e) {
|
||||
e.preventDefault()
|
||||
let instanceName = this.get('instanceName')
|
||||
|
||||
let dialogs = await importDialogs()
|
||||
dialogs.showConfirmationDialog({
|
||||
text: `Log out of ${instanceName}?`,
|
||||
onPositive() {
|
||||
logOutOfInstance(instanceName)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,98 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – Add an Instance</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='settings'>
|
||||
<SettingsLayout page='settings/instances/add' label="Add an Instance">
|
||||
<h1 id="add-an-instance-h1">Add an Instance</h1>
|
||||
|
||||
{{#if $isUserLoggedIn}}
|
||||
<p>Connect to an instance to log in.</p>
|
||||
{{else}}
|
||||
<p>Log in to an instance to use Pinafore.</p>
|
||||
{{/if}}
|
||||
|
||||
<form class="add-new-instance" on:submit='onSubmit(event)' aria-labelledby="add-an-instance-h1">
|
||||
|
||||
{{#if $logInToInstanceError && $logInToInstanceErrorForText === $instanceNameInSearch}}
|
||||
<div class="form-error form-error-user-error" role="alert">
|
||||
Error: {{$logInToInstanceError}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<noscript>
|
||||
<div class="form-error" role="alert">
|
||||
You must enable JavaScript to log in.
|
||||
</div>
|
||||
</noscript>
|
||||
|
||||
<label for="instanceInput">Instance:</label>
|
||||
<input class="new-instance-input" type="text" id="instanceInput"
|
||||
bind:value='$instanceNameInSearch' placeholder='' required
|
||||
>
|
||||
<button class="primary" type="submit" id="submitButton"
|
||||
disabled="{{!$instanceNameInSearch || $logInToInstanceLoading}}">
|
||||
Add instance
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{{#if !$isUserLoggedIn}}
|
||||
<p>Don't have an instance? <ExternalLink href="https://joinmastodon.org">Join Mastodon!</ExternalLink></p>
|
||||
{{/if}}
|
||||
</SettingsLayout>
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
<style>
|
||||
.form-error {
|
||||
border: 2px solid red;
|
||||
border-radius: 2px;
|
||||
padding: 10px;
|
||||
font-size: 1.3em;
|
||||
margin: 5px;
|
||||
background-color: var(--main-bg);
|
||||
}
|
||||
input.new-instance-input {
|
||||
min-width: 60%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
form.add-new-instance {
|
||||
background: var(--form-bg);
|
||||
padding: 5px 10px 15px;
|
||||
margin: 20px auto;
|
||||
border: 1px solid var(--form-border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
form.add-new-instance label, form.add-new-instance input, form.add-new-instance button {
|
||||
display: block;
|
||||
margin: 20px 5px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Layout from '../../_components/Layout.html';
|
||||
import SettingsLayout from '../_components/SettingsLayout.html'
|
||||
import { store } from '../../_store/store'
|
||||
import { logInToInstance, handleOauthCode } from '../../_actions/addInstance'
|
||||
import ExternalLink from '../../_components/ExternalLink.html'
|
||||
import Layout from '../../_components/Layout.html'
|
||||
import LazyPage from '../../_components/LazyPage.html'
|
||||
import pageComponent from '../../_pages/settings/instances/add.html'
|
||||
|
||||
export default {
|
||||
async oncreate () {
|
||||
let codeMatch = location.search.match(/code=([^&]+)/)
|
||||
if (codeMatch) {
|
||||
handleOauthCode(codeMatch[1])
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Layout,
|
||||
SettingsLayout,
|
||||
ExternalLink
|
||||
LazyPage
|
||||
},
|
||||
store: () => store,
|
||||
methods: {
|
||||
onSubmit(event) {
|
||||
event.preventDefault()
|
||||
logInToInstance()
|
||||
}
|
||||
}
|
||||
data: () => ({
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,43 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – Instances</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='settings'>
|
||||
<SettingsLayout page='settings/instances' label="Instances">
|
||||
<h1>Instances</h1>
|
||||
|
||||
{{#if $isUserLoggedIn}}
|
||||
<p>Instances you've logged in to:</p>
|
||||
<SettingsList label="Instances">
|
||||
{{#each $loggedInInstancesAsList as instance}}
|
||||
<SettingsListItem offsetForIcon="{{instance.name !== $currentInstance}}"
|
||||
icon="{{instance.name === $currentInstance ? '#fa-star' : ''}}"
|
||||
href="/settings/instances/{{instance.name}}"
|
||||
label="{{instance.name}}"
|
||||
ariaLabel="{{instance.name}} {{instance.name === $currentInstance ? '(current instance)' : ''}}" />
|
||||
{{/each}}
|
||||
</SettingsList>
|
||||
<p><a href="/settings/instances/add">Add another instance</a></p>
|
||||
{{else}}
|
||||
<p>You're not logged in to any instances.</p>
|
||||
<p><a href="/settings/instances/add">Log in to an instance</a> to start using Pinafore.</p>
|
||||
{{/if}}
|
||||
</SettingsLayout>
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
<script>
|
||||
import { store } from '../../_store/store'
|
||||
import Layout from '../../_components/Layout.html'
|
||||
import SettingsLayout from '../_components/SettingsLayout.html'
|
||||
import SettingsList from '../_components/SettingsList.html'
|
||||
import SettingsListItem from '../_components/SettingsListItem.html'
|
||||
import LazyPage from '../../_components/LazyPage.html'
|
||||
import pageComponent from '../../_pages/settings/instances/index.html'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Layout,
|
||||
SettingsLayout,
|
||||
SettingsList,
|
||||
SettingsListItem
|
||||
LazyPage
|
||||
},
|
||||
store: () => store
|
||||
data: () => ({
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,28 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – Favorites</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='favorites'>
|
||||
<DynamicPageBanner title="Favorites" icon="#fa-star" />
|
||||
<AccountsListPage :accountsFetcher />
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
<script>
|
||||
import Layout from '../../_components/Layout.html'
|
||||
import { getFavorites } from '../../_api/reblogsAndFavs'
|
||||
import AccountsListPage from '../../_components/AccountsListPage.html'
|
||||
import { store } from '../../_store/store'
|
||||
import DynamicPageBanner from '../../_components/DynamicPageBanner.html'
|
||||
import LazyPage from '../../_components/LazyPage.html'
|
||||
import pageComponent from '../../_pages/statuses/[statusId]/favorites.html'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
statusId: params => params.statusId,
|
||||
accountsFetcher: ($currentInstance, $accessToken, statusId) => () => getFavorites($currentInstance, $accessToken, statusId)
|
||||
},
|
||||
store: () => store,
|
||||
components: {
|
||||
Layout,
|
||||
AccountsListPage,
|
||||
DynamicPageBanner
|
||||
}
|
||||
LazyPage
|
||||
},
|
||||
data: () => ({
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,37 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – Status</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='statuses' >
|
||||
{{#if $isUserLoggedIn}}
|
||||
<DynamicPageBanner title=""/>
|
||||
<LazyTimeline timeline='status/{{params.statusId}}' />
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>Status</h1>
|
||||
|
||||
<p>A status thread will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
{{/if}}
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
<script>
|
||||
import Layout from '../../_components/Layout.html'
|
||||
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 LazyPage from '../../_components/LazyPage.html'
|
||||
import pageComponent from '../../_pages/statuses/[statusId]/index.html'
|
||||
|
||||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
Layout,
|
||||
LazyTimeline,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
DynamicPageBanner
|
||||
}
|
||||
LazyPage
|
||||
},
|
||||
data: () => ({
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,28 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – Reblogs</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='reblogs'>
|
||||
<DynamicPageBanner title="Boosts" icon="#fa-retweet" />
|
||||
<AccountsListPage :accountsFetcher />
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
<script>
|
||||
import Layout from '../../_components/Layout.html'
|
||||
import { getReblogs } from '../../_api/reblogsAndFavs'
|
||||
import AccountsListPage from '../../_components/AccountsListPage.html'
|
||||
import { store } from '../../_store/store'
|
||||
import DynamicPageBanner from '../../_components/DynamicPageBanner.html'
|
||||
import LazyPage from '../../_components/LazyPage.html'
|
||||
import pageComponent from '../../_pages/statuses/[statusId]/reblogs.html'
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
statusId: params => params.statusId,
|
||||
accountsFetcher: ($currentInstance, $accessToken, statusId) => () => getReblogs($currentInstance, $accessToken, statusId)
|
||||
},
|
||||
store: () => store,
|
||||
components: {
|
||||
Layout,
|
||||
AccountsListPage,
|
||||
DynamicPageBanner
|
||||
}
|
||||
LazyPage
|
||||
},
|
||||
data: () => ({
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,53 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – Reply</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='reply' >
|
||||
<DynamicPageBanner title=""/>
|
||||
<div class="reply-container">
|
||||
{{#if status}}
|
||||
<Status index="0"
|
||||
length="1"
|
||||
timelineType="reply"
|
||||
timelineValue="{{params.statusId}}"
|
||||
:status
|
||||
/>
|
||||
<ComposeBox realm="{{params.statusId}}" />
|
||||
{{else}}
|
||||
<LoadingPage />
|
||||
{{/if}}
|
||||
</div>
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
<style>
|
||||
.reply-container {
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
min-height: 60vh;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Layout from '../../_components/Layout.html'
|
||||
import { store } from '../../_store/store.js'
|
||||
import DynamicPageBanner from '../../_components/DynamicPageBanner.html'
|
||||
import LoadingPage from '../../_components/LoadingPage.html'
|
||||
import ComposeBox from '../../_components/compose/ComposeBox.html'
|
||||
import Status from '../../_components/status/Status.html'
|
||||
import { database } from '../../_database/database'
|
||||
import LazyPage from '../../_components/LazyPage.html'
|
||||
import pageComponent from '../../_pages/statuses/[statusId]/reply.html'
|
||||
|
||||
export default {
|
||||
async oncreate() {
|
||||
let statusId = this.get('params').statusId
|
||||
let instanceName = this.store.get('currentInstance')
|
||||
let status = await database.getStatus(instanceName, statusId)
|
||||
this.set({status})
|
||||
},
|
||||
store: () => store,
|
||||
components: {
|
||||
Layout,
|
||||
DynamicPageBanner,
|
||||
LoadingPage,
|
||||
ComposeBox,
|
||||
Status
|
||||
}
|
||||
LazyPage
|
||||
},
|
||||
data: () => ({
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,37 +1,21 @@
|
|||
<:Head>
|
||||
<title>Pinafore – #{{params.tagName}}</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='tags'>
|
||||
{{#if $isUserLoggedIn}}
|
||||
<DynamicPageBanner title="{{'#' + params.tagName}}"/>
|
||||
<LazyTimeline timeline='tag/{{params.tagName}}' />
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
<FreeTextLayout>
|
||||
<h1>#{{params.tagName}}</h1>
|
||||
|
||||
<p>A hashtag timeline will appear here when logged in.</p>
|
||||
</FreeTextLayout>
|
||||
</HiddenFromSSR>
|
||||
{{/if}}
|
||||
<LazyPage :pageComponent :params />
|
||||
</Layout>
|
||||
<script>
|
||||
import Layout from '../_components/Layout.html'
|
||||
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 LazyPage from '../_components/LazyPage.html'
|
||||
import pageComponent from '../_pages/tags/[tagName].html'
|
||||
|
||||
export default {
|
||||
store: () => store,
|
||||
components: {
|
||||
Layout,
|
||||
LazyTimeline,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
DynamicPageBanner
|
||||
}
|
||||
LazyPage
|
||||
},
|
||||
data: () => ({
|
||||
pageComponent
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -37,6 +37,7 @@ main {
|
|||
background: var(--main-bg);
|
||||
border: 1px solid var(--main-border);
|
||||
border-radius: 1px;
|
||||
min-height: 60vh;
|
||||
@media (max-width: 767px) {
|
||||
margin: 5px auto 15px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style>
|
||||
/* auto-generated w/ build-sass.js */
|
||||
body{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#90a8ee;--action-button-fill-color-hover:#a2b6f0;--action-button-fill-color-active:#577ae4;--action-button-fill-color-pressed:#2351dc;--action-button-fill-color-pressed-hover:#3862e0;--action-button-fill-color-pressed-active:#1d44b8;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--loading-bg:#ededed;--deemphasized-text-color:#666;--focus-outline:#c5d1f6;--very-deemphasized-link-color:rgba(65,105,225,0.6);--very-deemphasized-text-color:rgba(102,102,102,0.6);--status-direct-background:#d2dcf8;--main-theme-color:#4169e1;--warning-color:#e01f19;--alt-input-bg:rgba(255,255,255,0.7)}
|
||||
body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.4;color:var(--body-text-color);background:var(--body-bg);position:fixed;left:0;right:0;bottom:0;top:0}.container{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;will-change:transform;position:absolute;top:72px;left:0;right:0;bottom:0}@media (max-width: 767px){.container{top:62px}}main{position:relative;width:602px;max-width:100vw;padding:0;box-sizing:border-box;margin:30px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{margin:5px auto 15px}}footer{width:602px;max-width:100vw;box-sizing:border-box;margin:20px auto;border-radius:1px;background:var(--main-bg);font-size:0.9em;padding:20px;border:1px solid var(--main-border)}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px;box-sizing:border-box}button,.button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover,.button:hover{background:var(--button-bg-hover);text-decoration:none}button:active,.button:active{background:var(--button-bg-active)}button[disabled],.button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary,.button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover,.button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active,.button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}*:focus{outline:2px solid var(--focus-outline)}button::-moz-focus-inner{border:0}input:required,input:invalid{box-shadow:none}textarea{font-family:inherit;font-size:inherit;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}.spin{animation:spin 2s infinite linear}
|
||||
body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.4;color:var(--body-text-color);background:var(--body-bg);position:fixed;left:0;right:0;bottom:0;top:0}.container{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;will-change:transform;position:absolute;top:72px;left:0;right:0;bottom:0}@media (max-width: 767px){.container{top:62px}}main{position:relative;width:602px;max-width:100vw;padding:0;box-sizing:border-box;margin:30px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px;min-height:60vh}@media (max-width: 767px){main{margin:5px auto 15px}}footer{width:602px;max-width:100vw;box-sizing:border-box;margin:20px auto;border-radius:1px;background:var(--main-bg);font-size:0.9em;padding:20px;border:1px solid var(--main-border)}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px;box-sizing:border-box}button,.button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover,.button:hover{background:var(--button-bg-hover);text-decoration:none}button:active,.button:active{background:var(--button-bg-active)}button[disabled],.button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary,.button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover,.button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active,.button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}*:focus{outline:2px solid var(--focus-outline)}button::-moz-focus-inner{border:0}input:required,input:invalid{box-shadow:none}textarea{font-family:inherit;font-size:inherit;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}.spin{animation:spin 2s infinite linear}
|
||||
body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-oaken.offline,body.theme-scarlet.offline,body.theme-seafoam.offline,body.theme-gecko.offline{--button-primary-bg:#ababab;--button-primary-text:#fff;--button-primary-border:#4d4d4d;--button-primary-bg-active:#9c9c9c;--button-primary-bg-hover:#b0b0b0;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#999;--main-bg:#fff;--body-bg:#fafafa;--body-text-color:#333;--main-border:#dadada;--svg-fill:#999;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#999;--nav-border:gray;--nav-a-border:#999;--nav-a-selected-border:#fff;--nav-a-selected-bg:#b3b3b3;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#bfbfbf;--nav-a-bg-hover:#a6a6a6;--nav-a-border-hover:#999;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#c7c7c7;--action-button-fill-color-hover:#d1d1d1;--action-button-fill-color-active:#a6a6a6;--action-button-fill-color-pressed:#878787;--action-button-fill-color-pressed-hover:#949494;--action-button-fill-color-pressed-active:#737373;--settings-list-item-bg:#fff;--settings-list-item-text:#999;--settings-list-item-text-hover:#999;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--loading-bg:#ededed;--deemphasized-text-color:#666;--focus-outline:#bfbfbf;--very-deemphasized-link-color:rgba(153,153,153,0.6);--very-deemphasized-text-color:rgba(102,102,102,0.6);--status-direct-background:#ededed;--main-theme-color:#999;--warning-color:#e01f19;--alt-input-bg:rgba(255,255,255,0.7)}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue