Pages (#4811)
* wip * wip * wip * Update page-editor.vue * wip * wip * wip * wip * wip * wip * wip * Update page-editor.variable.core.vue * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * Update aiscript.ts * wip * Update package.json * wip * wip * wip * wip * wip * Update page.vue * wip * wip * wip * wip * more info * wip fn * wip * wip * wip
This commit is contained in:
syuilo
GitHub
parent
747a0b1791
commit
05b8111c19
52 changed files with 3583 additions and 37 deletions
|
|
@ -156,7 +156,11 @@ init(async (launch, os) => {
|
|||
{ path: '/explore', name: 'explore', component: () => import('../common/views/pages/explore.vue').then(m => m.default) },
|
||||
{ path: '/explore/tags/:tag', name: 'explore-tag', props: true, component: () => import('../common/views/pages/explore.vue').then(m => m.default) },
|
||||
{ path: '/i/favorites', component: () => import('./views/home/favorites.vue').then(m => m.default) },
|
||||
{ path: '/i/pages', component: () => import('./views/home/pages.vue').then(m => m.default) },
|
||||
]},
|
||||
{ path: '/@:user/pages/:page', props: true, component: () => import('./views/pages/page.vue').then(m => m.default) },
|
||||
{ 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: '/i/messaging/:user', component: MkMessagingRoom },
|
||||
{ path: '/i/drive', component: MkDrive },
|
||||
{ path: '/i/drive/folder/:folder', component: MkDrive },
|
||||
|
|
|
|||
|
|
@ -9,35 +9,42 @@
|
|||
<ul>
|
||||
<li>
|
||||
<router-link :to="`/@${ $store.state.i.username }`">
|
||||
<i><fa icon="user"/></i>
|
||||
<i><fa icon="user" fixed-width/></i>
|
||||
<span>{{ $t('profile') }}</span>
|
||||
<i><fa icon="angle-right"/></i>
|
||||
</router-link>
|
||||
</li>
|
||||
<li @click="drive">
|
||||
<p>
|
||||
<i><fa icon="cloud"/></i>
|
||||
<i><fa icon="cloud" fixed-width/></i>
|
||||
<span>{{ $t('@.drive') }}</span>
|
||||
<i><fa icon="angle-right"/></i>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/i/favorites">
|
||||
<i><fa icon="star"/></i>
|
||||
<i><fa icon="star" fixed-width/></i>
|
||||
<span>{{ $t('@.favorites') }}</span>
|
||||
<i><fa icon="angle-right"/></i>
|
||||
</router-link>
|
||||
</li>
|
||||
<li @click="list">
|
||||
<p>
|
||||
<i><fa icon="list"/></i>
|
||||
<i><fa icon="list" fixed-width/></i>
|
||||
<span>{{ $t('lists') }}</span>
|
||||
<i><fa icon="angle-right"/></i>
|
||||
</p>
|
||||
</li>
|
||||
<li @click="page">
|
||||
<router-link to="/i/pages">
|
||||
<i><fa :icon="faStickyNote" fixed-width/></i>
|
||||
<span>{{ $t('@.pages') }}</span>
|
||||
<i><fa icon="angle-right"/></i>
|
||||
</router-link>
|
||||
</li>
|
||||
<li @click="followRequests" v-if="($store.state.i.isLocked || $store.state.i.carefulBot)">
|
||||
<p>
|
||||
<i><fa :icon="['far', 'envelope']"/></i>
|
||||
<i><fa :icon="['far', 'envelope']" fixed-width/></i>
|
||||
<span>{{ $t('follow-requests') }}<i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></span>
|
||||
<i><fa icon="angle-right"/></i>
|
||||
</p>
|
||||
|
|
@ -46,14 +53,14 @@
|
|||
<ul>
|
||||
<li>
|
||||
<router-link to="/i/settings">
|
||||
<i><fa icon="cog"/></i>
|
||||
<i><fa icon="cog" fixed-width/></i>
|
||||
<span>{{ $t('@.settings') }}</span>
|
||||
<i><fa icon="angle-right"/></i>
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="$store.state.i.isAdmin || $store.state.i.isModerator">
|
||||
<a href="/admin">
|
||||
<i><fa icon="terminal"/></i>
|
||||
<i><fa icon="terminal" fixed-width/></i>
|
||||
<span>{{ $t('admin') }}</span>
|
||||
<i><fa icon="angle-right"/></i>
|
||||
</a>
|
||||
|
|
@ -76,7 +83,7 @@
|
|||
<ul>
|
||||
<li @click="signout">
|
||||
<p class="signout">
|
||||
<i><fa icon="power-off"/></i>
|
||||
<i><fa icon="power-off" fixed-width/></i>
|
||||
<span>{{ $t('@.signout') }}</span>
|
||||
</p>
|
||||
</li>
|
||||
|
|
@ -95,14 +102,14 @@ import MkFollowRequestsWindow from './received-follow-requests-window.vue';
|
|||
import MkDriveWindow from './drive-window.vue';
|
||||
import contains from '../../../common/scripts/contains';
|
||||
import { 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';
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n('desktop/views/components/ui.header.account.vue'),
|
||||
data() {
|
||||
return {
|
||||
isOpen: false,
|
||||
faHome, faColumns, faMoon, faSun
|
||||
faHome, faColumns, faMoon, faSun, faStickyNote
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
92
src/client/app/desktop/views/home/pages.vue
Normal file
92
src/client/app/desktop/views/home/pages.vue
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<template>
|
||||
<div class="rknalgpo" v-if="!fetching">
|
||||
<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>
|
||||
</div>
|
||||
</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>
|
||||
.rknalgpo
|
||||
margin 0 auto
|
||||
|
||||
> * > .page
|
||||
margin-bottom 8px
|
||||
|
||||
@media (min-width 500px)
|
||||
> * > .page
|
||||
margin-bottom 16px
|
||||
|
||||
</style>
|
||||
32
src/client/app/desktop/views/pages/page-editor.vue
Normal file
32
src/client/app/desktop/views/pages/page-editor.vue
Normal file
|
|
@ -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 900px
|
||||
|
||||
</style>
|
||||
36
src/client/app/desktop/views/pages/page.vue
Normal file
36
src/client/app/desktop/views/pages/page.vue
Normal file
|
|
@ -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 950px
|
||||
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue