diff options
Diffstat (limited to 'src/client/app/mobile')
| -rw-r--r-- | src/client/app/mobile/script.ts | 4 | ||||
| -rw-r--r-- | src/client/app/mobile/views/components/ui.nav.vue | 5 | ||||
| -rw-r--r-- | src/client/app/mobile/views/pages/page-editor.vue | 32 | ||||
| -rw-r--r-- | src/client/app/mobile/views/pages/page.vue | 36 | ||||
| -rw-r--r-- | src/client/app/mobile/views/pages/pages.vue | 94 |
5 files changed, 169 insertions, 2 deletions
diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts index 510141f94b..136bbc31c4 100644 --- a/src/client/app/mobile/script.ts +++ b/src/client/app/mobile/script.ts @@ -135,6 +135,7 @@ init((launch, os) => { { path: '/signup', name: 'signup', component: MkSignup }, { path: '/i/settings', name: 'settings', component: () => import('./views/pages/settings.vue').then(m => m.default) }, { path: '/i/favorites', name: 'favorites', component: MkFavorites }, + { path: '/i/pages', name: 'pages', component: () => import('./views/pages/pages.vue').then(m => m.default) }, { path: '/i/lists', name: 'user-lists', component: MkUserLists }, { path: '/i/lists/:list', name: 'user-list', component: MkUserList }, { path: '/i/received-follow-requests', name: 'received-follow-requests', component: MkReceivedFollowRequests }, @@ -144,6 +145,8 @@ init((launch, os) => { { path: '/i/drive', name: 'drive', component: MkDrive }, { path: '/i/drive/folder/:folder', component: MkDrive }, { path: '/i/drive/file/:file', component: MkDrive }, + { path: '/i/pages/new', component: () => import('./views/pages/page-editor.vue').then(m => m.default) }, + { path: '/i/pages/edit/:page', props: true, component: () => import('./views/pages/page-editor.vue').then(m => m.default) }, { path: '/selectdrive', component: MkSelectDrive }, { path: '/search', component: MkSearch }, { path: '/tags/:tag', component: MkTag }, @@ -156,6 +159,7 @@ init((launch, os) => { { path: 'following', component: () => import('../common/views/pages/following.vue').then(m => m.default) }, { path: 'followers', component: () => import('../common/views/pages/followers.vue').then(m => m.default) }, ]}, + { path: '/@:user/pages/:page', props: true, component: () => import('./views/pages/page.vue').then(m => m.default) }, { path: '/notes/:note', component: MkNote }, { path: '/authorize-follow', component: MkFollow }, { path: '*', component: MkNotFound } diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue index 9a3ade4c63..da9bb518ef 100644 --- a/src/client/app/mobile/views/components/ui.nav.vue +++ b/src/client/app/mobile/views/components/ui.nav.vue @@ -29,6 +29,7 @@ <li><router-link to="/i/favorites" :data-active="$route.name == 'favorites'"><i><fa icon="star" fixed-width/></i>{{ $t('@.favorites') }}<i><fa icon="angle-right"/></i></router-link></li> <li><router-link to="/i/lists" :data-active="$route.name == 'user-lists'"><i><fa icon="list" fixed-width/></i>{{ $t('user-lists') }}<i><fa icon="angle-right"/></i></router-link></li> <li><router-link to="/i/drive" :data-active="$route.name == 'drive'"><i><fa icon="cloud" fixed-width/></i>{{ $t('@.drive') }}<i><fa icon="angle-right"/></i></router-link></li> + <li><router-link to="/i/pages" :data-active="$route.name == 'pages'"><i><fa :icon="faStickyNote" fixed-width/></i>{{ $t('@.pages') }}<i><fa icon="angle-right"/></i></router-link></li> </ul> <ul> <li><a @click="search"><i><fa icon="search" fixed-width/></i>{{ $t('search') }}<i><fa icon="angle-right"/></i></a></li> @@ -66,7 +67,7 @@ import Vue from 'vue'; import i18n from '../../../i18n'; import { lang } from '../../../config'; import { faNewspaper, faHashtag, faHome, faColumns } from '@fortawesome/free-solid-svg-icons'; -import { faMoon, faSun } from '@fortawesome/free-regular-svg-icons'; +import { faMoon, faSun, faStickyNote } from '@fortawesome/free-regular-svg-icons'; import { search } from '../../../common/scripts/search'; export default Vue.extend({ @@ -86,7 +87,7 @@ export default Vue.extend({ announcements: [], searching: false, showNotifications: false, - faNewspaper, faHashtag, faMoon, faSun, faHome, faColumns + faNewspaper, faHashtag, faMoon, faSun, faHome, faColumns, faStickyNote }; }, diff --git a/src/client/app/mobile/views/pages/page-editor.vue b/src/client/app/mobile/views/pages/page-editor.vue new file mode 100644 index 0000000000..9d549c784f --- /dev/null +++ b/src/client/app/mobile/views/pages/page-editor.vue @@ -0,0 +1,32 @@ +<template> +<mk-ui> + <main> + <x-page-editor :page="page"/> + </main> +</mk-ui> +</template> + +<script lang="ts"> +import Vue from 'vue'; + +export default Vue.extend({ + components: { + XPageEditor: () => import('../../../common/views/components/page-editor/page-editor.vue').then(m => m.default) + }, + + props: { + page: { + type: String, + required: false + } + } +}); +</script> + +<style lang="stylus" scoped> +main + margin 0 auto + padding 16px + max-width 1000px + +</style> diff --git a/src/client/app/mobile/views/pages/page.vue b/src/client/app/mobile/views/pages/page.vue new file mode 100644 index 0000000000..27ade4a398 --- /dev/null +++ b/src/client/app/mobile/views/pages/page.vue @@ -0,0 +1,36 @@ +<template> +<mk-ui> + <main> + <x-page :page-name="page" :username="user"/> + </main> +</mk-ui> +</template> + +<script lang="ts"> +import Vue from 'vue'; + +export default Vue.extend({ + components: { + XPage: () => import('../../../common/views/pages/page/page.vue').then(m => m.default) + }, + + props: { + page: { + type: String, + required: true + }, + user: { + type: String, + required: true + }, + } +}); +</script> + +<style lang="stylus" scoped> +main + margin 0 auto + padding 16px + max-width 1000px + +</style> diff --git a/src/client/app/mobile/views/pages/pages.vue b/src/client/app/mobile/views/pages/pages.vue new file mode 100644 index 0000000000..100c814ad9 --- /dev/null +++ b/src/client/app/mobile/views/pages/pages.vue @@ -0,0 +1,94 @@ +<template> +<mk-ui> + <template #header><span style="margin-right:4px;"><fa :icon="faStickyNote"/></span>{{ $t('@.pages') }}</template> + + <main> + <ui-button @click="create()"><fa :icon="faPlus"/></ui-button> + <sequential-entrance animation="entranceFromTop" delay="25"> + <template v-for="page in pages"> + <x-page-preview class="page" :page="page" :key="page.id"/> + </template> + </sequential-entrance> + <ui-button v-if="existMore" @click="fetchMore()">{{ $t('@.load-more') }}</ui-button> + </main> +</mk-ui> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import i18n from '../../../i18n'; +import Progress from '../../../common/scripts/loading'; +import { faPlus } from '@fortawesome/free-solid-svg-icons'; +import { faStickyNote } from '@fortawesome/free-regular-svg-icons'; +import XPagePreview from '../../../common/views/components/page-preview.vue'; + +export default Vue.extend({ + i18n: i18n(), + components: { + XPagePreview + }, + data() { + return { + fetching: true, + pages: [], + existMore: false, + moreFetching: false, + faStickyNote, faPlus + }; + }, + created() { + this.fetch(); + }, + methods: { + fetch() { + Progress.start(); + this.fetching = true; + + this.$root.api('i/pages', { + limit: 11 + }).then(pages => { + if (pages.length == 11) { + this.existMore = true; + pages.pop(); + } + + this.pages = pages; + this.fetching = false; + + Progress.done(); + }); + }, + fetchMore() { + this.moreFetching = true; + this.$root.api('i/pages', { + limit: 11, + untilId: this.pages[this.pages.length - 1].id + }).then(pages => { + if (pages.length == 11) { + this.existMore = true; + pages.pop(); + } else { + this.existMore = false; + } + + this.pages = this.pages.concat(pages); + this.moreFetching = false; + }); + }, + create() { + this.$router.push(`/i/pages/new`); + } + } +}); +</script> + +<style lang="stylus" scoped> +main + > * > .page + margin-bottom 8px + + @media (min-width 500px) + > * > .page + margin-bottom 16px + +</style> |