diff options
Diffstat (limited to 'src/client/app/desktop')
10 files changed, 70 insertions, 167 deletions
diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts index 464f7d3ce9..c6479f477c 100644 --- a/src/client/app/desktop/script.ts +++ b/src/client/app/desktop/script.ts @@ -22,6 +22,7 @@ import MkShare from '../common/views/pages/share.vue'; import MkFollow from '../common/views/pages/follow.vue'; import MkNotFound from '../common/views/pages/not-found.vue'; import MkSettings from './views/pages/settings.vue'; +import DeckColumn from '../common/views/deck/deck.column-template.vue'; import Ctx from './views/components/context-menu.vue'; import PostFormWindow from './views/components/post-form-window.vue'; @@ -138,9 +139,14 @@ init(async (launch, os) => { { path: '/search', component: () => import('../common/views/deck/deck.search-column.vue').then(m => m.default) }, { path: '/tags/:tag', name: 'tag', component: () => import('../common/views/deck/deck.hashtag-column.vue').then(m => m.default) }, { path: '/featured', name: 'featured', component: () => import('../common/views/deck/deck.featured-column.vue').then(m => m.default) }, - { path: '/explore', name: 'explore', component: () => import('../common/views/deck/deck.explore-column.vue').then(m => m.default) }, - { path: '/explore/tags/:tag', name: 'explore-tag', props: true, component: () => import('../common/views/deck/deck.explore-column.vue').then(m => m.default) }, - { path: '/i/favorites', component: () => import('../common/views/deck/deck.favorites-column.vue').then(m => m.default) } + { path: '/explore', name: 'explore', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/explore.vue').then(m => m.default) }) }, + { path: '/explore/tags/:tag', name: 'explore-tag', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/explore.vue').then(m => m.default), tag: route.params.tag }) }, + { path: '/i/favorites', component: () => import('../common/views/deck/deck.favorites-column.vue').then(m => m.default) }, + { path: '/i/pages', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/pages.vue').then(m => m.default) }) }, + { path: '/i/lists', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/user-lists.vue').then(m => m.default) }) }, + { path: '/i/lists/:listId', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/user-list-editor.vue').then(m => m.default), listId: route.params.listId }) }, + { path: '/i/groups', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/user-groups.vue').then(m => m.default) }) }, + { path: '/i/groups/:groupId', component: DeckColumn, props: route => ({ component: () => import('../common/views/pages/user-group-editor.vue').then(m => m.default), groupId: route.params.groupId }) }, ]} : { path: '/', component: MkHome, children: [ { path: '', name: 'index', component: MkHomeTimeline }, @@ -157,11 +163,17 @@ init(async (launch, os) => { { 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('../common/views/pages/pages.vue').then(m => m.default) }, + { path: '/i/lists', component: () => import('../common/views/pages/user-lists.vue').then(m => m.default) }, + { path: '/i/lists/:listId', props: true, component: () => import('../common/views/pages/user-list-editor.vue').then(m => m.default) }, + { path: '/i/groups', component: () => import('../common/views/pages/user-groups.vue').then(m => m.default) }, + { path: '/i/groups/:groupId', props: true, component: () => import('../common/views/pages/user-group-editor.vue').then(m => m.default) }, + { path: '/i/follow-requests', component: () => import('../common/views/pages/follow-requests.vue').then(m => m.default) }, ]}, { path: '/@:user/pages/:page', props: true, component: () => import('./views/pages/page.vue').then(m => m.default) }, { path: '/@:user/pages/:pageName/view-source', props: true, component: () => import('./views/pages/page-editor.vue').then(m => m.default) }, { path: '/i/pages/new', component: () => import('./views/pages/page-editor.vue').then(m => m.default) }, { path: '/i/pages/edit/:pageId', props: true, component: () => import('./views/pages/page-editor.vue').then(m => m.default) }, + { path: '/i/messaging/group/:group', component: MkMessagingRoom }, { path: '/i/messaging/:user', component: MkMessagingRoom }, { path: '/i/drive', component: MkDrive }, { path: '/i/drive/folder/:folder', component: MkDrive }, diff --git a/src/client/app/desktop/views/components/messaging-room-window.vue b/src/client/app/desktop/views/components/messaging-room-window.vue index 00cd423cd2..6c1708b59f 100644 --- a/src/client/app/desktop/views/components/messaging-room-window.vue +++ b/src/client/app/desktop/views/components/messaging-room-window.vue @@ -1,7 +1,7 @@ <template> <mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="destroyDom"> - <template #header><fa icon="comments"/> {{ $t('@.messaging') }}: <mk-user-name :user="user"/></template> - <x-messaging-room :user="user" :class="$style.content"/> + <template #header><fa icon="comments"/> {{ $t('@.messaging') }}: <mk-user-name v-if="user" :user="user"/><span v-else>{{ group.name }}</span></template> + <x-messaging-room :user="user" :group="group" :class="$style.content"/> </mk-window> </template> @@ -16,10 +16,14 @@ export default Vue.extend({ components: { XMessagingRoom: () => import('../../../common/views/components/messaging-room.vue').then(m => m.default) }, - props: ['user'], + props: ['user', 'group'], computed: { popout(): string { - return `${url}/i/messaging/${getAcct(this.user)}`; + if (this.user) { + return `${url}/i/messaging/${getAcct(this.user)}`; + } else if (this.group) { + return `${url}/i/messaging/group/${this.group.id}`; + } } } }); diff --git a/src/client/app/desktop/views/components/messaging-window.vue b/src/client/app/desktop/views/components/messaging-window.vue index 1572c40669..7cec9484d6 100644 --- a/src/client/app/desktop/views/components/messaging-window.vue +++ b/src/client/app/desktop/views/components/messaging-window.vue @@ -1,7 +1,7 @@ <template> <mk-window ref="window" width="500px" height="560px" @closed="destroyDom"> <template #header :class="$style.header"><fa icon="comments"/>{{ $t('@.messaging') }}</template> - <x-messaging :class="$style.content" @navigate="navigate"/> + <x-messaging :class="$style.content" @navigate="navigate" @navigateGroup="navigateGroup"/> </mk-window> </template> @@ -20,6 +20,11 @@ export default Vue.extend({ this.$root.new(MkMessagingRoomWindow, { user: user }); + }, + navigateGroup(group) { + this.$root.new(MkMessagingRoomWindow, { + group: group + }); } } }); diff --git a/src/client/app/desktop/views/components/received-follow-requests-window.vue b/src/client/app/desktop/views/components/received-follow-requests-window.vue deleted file mode 100644 index f86b6b0d59..0000000000 --- a/src/client/app/desktop/views/components/received-follow-requests-window.vue +++ /dev/null @@ -1,70 +0,0 @@ -<template> -<mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom"> - <template #header><fa :icon="['far', 'envelope']"/> {{ $t('title') }}</template> - - <div class="slpqaxdoxhvglersgjukmvizkqbmbokc"> - <div v-for="req in requests"> - <router-link :key="req.id" :to="req.follower | userPage"> - <mk-user-name :user="req.follower"/> - </router-link> - <span> - <a @click="accept(req.follower)">{{ $t('accept') }}</a>|<a @click="reject(req.follower)">{{ $t('reject') }}</a> - </span> - </div> - </div> -</mk-window> -</template> - -<script lang="ts"> -import Vue from 'vue'; -import i18n from '../../../i18n'; - -export default Vue.extend({ - i18n: i18n('desktop/views/components/received-follow-requests-window.vue'), - data() { - return { - fetching: true, - requests: [] - }; - }, - mounted() { - this.$root.api('following/requests/list').then(requests => { - this.fetching = false; - this.requests = requests; - }); - }, - methods: { - accept(user) { - this.$root.api('following/requests/accept', { userId: user.id }).then(() => { - this.requests = this.requests.filter(r => r.follower.id != user.id); - }); - }, - reject(user) { - this.$root.api('following/requests/reject', { userId: user.id }).then(() => { - this.requests = this.requests.filter(r => r.follower.id != user.id); - }); - }, - close() { - (this as any).$refs.window.close(); - } - } -}); -</script> - -<style lang="stylus" scoped> -.slpqaxdoxhvglersgjukmvizkqbmbokc - padding 16px - - > button - margin-bottom 16px - - > div - display flex - padding 16px - border solid 1px var(--faceDivider) - border-radius 4px - - > span - margin 0 0 0 auto - -</style> diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue index 9b87e0c29f..c00c6b9c64 100644 --- a/src/client/app/desktop/views/components/ui.header.account.vue +++ b/src/client/app/desktop/views/components/ui.header.account.vue @@ -28,12 +28,19 @@ <i><fa icon="angle-right"/></i> </router-link> </li> - <li @click="list"> - <p> + <li> + <router-link to="/i/lists"> <i><fa icon="list" fixed-width/></i> <span>{{ $t('lists') }}</span> <i><fa icon="angle-right"/></i> - </p> + </router-link> + </li> + <li> + <router-link to="/i/groups"> + <i><fa :icon="faUsers" fixed-width/></i> + <span>{{ $t('groups') }}</span> + <i><fa icon="angle-right"/></i> + </router-link> </li> <li> <router-link to="/i/pages"> @@ -42,12 +49,12 @@ <i><fa icon="angle-right"/></i> </router-link> </li> - <li @click="followRequests" v-if="($store.state.i.isLocked || $store.state.i.carefulBot)"> - <p> + <li v-if="($store.state.i.isLocked || $store.state.i.carefulBot)"> + <router-link to="/i/follow-requests"> <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> + </router-link> </li> </ul> <ul> @@ -96,12 +103,10 @@ <script lang="ts"> import Vue from 'vue'; import i18n from '../../../i18n'; -import MkUserListsWindow from './user-lists-window.vue'; -import MkFollowRequestsWindow from './received-follow-requests-window.vue'; // import MkSettingsWindow from './settings-window.vue'; import MkDriveWindow from './drive-window.vue'; import contains from '../../../common/scripts/contains'; -import { faHome, faColumns } from '@fortawesome/free-solid-svg-icons'; +import { faHome, faColumns, faUsers } from '@fortawesome/free-solid-svg-icons'; import { faMoon, faSun, faStickyNote } from '@fortawesome/free-regular-svg-icons'; export default Vue.extend({ @@ -109,7 +114,7 @@ export default Vue.extend({ data() { return { isOpen: false, - faHome, faColumns, faMoon, faSun, faStickyNote + faHome, faColumns, faMoon, faSun, faStickyNote, faUsers }; }, computed: { @@ -147,14 +152,6 @@ export default Vue.extend({ this.close(); this.$root.new(MkDriveWindow); }, - list() { - this.close(); - this.$root.new(MkUserListsWindow); - }, - followRequests() { - this.close(); - this.$root.new(MkFollowRequestsWindow); - }, signout() { this.$root.signout(); }, diff --git a/src/client/app/desktop/views/components/ui.sidebar.vue b/src/client/app/desktop/views/components/ui.sidebar.vue index 1c01f127b9..d1ceec5198 100644 --- a/src/client/app/desktop/views/components/ui.sidebar.vue +++ b/src/client/app/desktop/views/components/ui.sidebar.vue @@ -72,8 +72,6 @@ <script lang="ts"> import Vue from 'vue'; import i18n from '../../../i18n'; -import MkUserListsWindow from './user-lists-window.vue'; -import MkFollowRequestsWindow from './received-follow-requests-window.vue'; import MkSettingsWindow from './settings-window.vue'; import MkDriveWindow from './drive-window.vue'; import MkMessagingWindow from './messaging-window.vue'; diff --git a/src/client/app/desktop/views/components/user-list-window.vue b/src/client/app/desktop/views/components/user-list-window.vue deleted file mode 100644 index 6764579b20..0000000000 --- a/src/client/app/desktop/views/components/user-list-window.vue +++ /dev/null @@ -1,24 +0,0 @@ -<template> -<mk-window ref="window" width="450px" height="500px" @closed="destroyDom"> - <template #header><fa icon="list"/> {{ list.name }}</template> - - <x-editor :list="list"/> -</mk-window> -</template> - -<script lang="ts"> -import Vue from 'vue'; -import XEditor from '../../../common/views/components/user-list-editor.vue'; - -export default Vue.extend({ - components: { - XEditor - }, - - props: { - list: { - required: true - } - } -}); -</script> diff --git a/src/client/app/desktop/views/components/user-lists-window.vue b/src/client/app/desktop/views/components/user-lists-window.vue deleted file mode 100644 index afea01d4a1..0000000000 --- a/src/client/app/desktop/views/components/user-lists-window.vue +++ /dev/null @@ -1,36 +0,0 @@ -<template> -<mk-window ref="window" width="450px" height="500px" @closed="destroyDom"> - <template #header><fa icon="list"/> {{ $t('title') }}</template> - <x-lists :class="$style.content" @choosen="choosen"/> -</mk-window> -</template> - -<script lang="ts"> -import Vue from 'vue'; -import i18n from '../../../i18n'; -import MkUserListWindow from './user-list-window.vue'; - -export default Vue.extend({ - i18n: i18n('desktop/views/components/user-lists-window.vue'), - components: { - XLists: () => import('../../../common/views/components/user-lists.vue').then(m => m.default) - }, - methods: { - close() { - (this as any).$refs.window.close(); - }, - choosen(list) { - this.$root.new(MkUserListWindow, { - list - }); - } - } -}); -</script> - -<style lang="stylus" module> -.content - height 100% - overflow auto - -</style> diff --git a/src/client/app/desktop/views/pages/messaging-room.vue b/src/client/app/desktop/views/pages/messaging-room.vue index 376b402d30..c725074b7d 100644 --- a/src/client/app/desktop/views/pages/messaging-room.vue +++ b/src/client/app/desktop/views/pages/messaging-room.vue @@ -1,6 +1,6 @@ <template> <div class="mk-messaging-room-page"> - <x-messaging-room v-if="user" :user="user" :is-naked="true"/> + <x-messaging-room v-if="user || group" :user="user" :group="group" :is-naked="true"/> </div> </template> @@ -19,7 +19,8 @@ export default Vue.extend({ data() { return { fetching: true, - user: null + user: null, + group: null }; }, watch: { @@ -47,14 +48,25 @@ export default Vue.extend({ Progress.start(); this.fetching = true; - this.$root.api('users/show', parseAcct(this.$route.params.user)).then(user => { - this.user = user; - this.fetching = false; + if (this.$route.params.user) { + this.$root.api('users/show', parseAcct(this.$route.params.user)).then(user => { + this.user = user; + this.fetching = false; - document.title = this.$t('@.messaging') + ': ' + getUserName(this.user); + document.title = this.$t('@.messaging') + ': ' + getUserName(this.user); - Progress.done(); - }); + Progress.done(); + }); + } else { + this.$root.api('users/groups/show', { groupId: this.$route.params.group }).then(group => { + this.group = group; + this.fetching = false; + + document.title = this.$t('@.messaging') + ': ' + this.group.name; + + Progress.done(); + }); + } } } }); diff --git a/src/client/app/desktop/views/widgets/messaging.vue b/src/client/app/desktop/views/widgets/messaging.vue index 1e82ae3d3a..e94e745c19 100644 --- a/src/client/app/desktop/views/widgets/messaging.vue +++ b/src/client/app/desktop/views/widgets/messaging.vue @@ -4,7 +4,7 @@ <template #header><fa icon="comments"/>{{ $t('@.messaging') }}</template> <template #func><button @click="add"><fa icon="plus"/></button></template> - <x-messaging ref="index" compact @navigate="navigate"/> + <x-messaging ref="index" compact @navigate="navigate" @navigateGroup="navigateGroup"/> </ui-container> </div> </template> @@ -31,6 +31,11 @@ export default define({ user: user }); }, + navigateGroup(group) { + this.$root.new(MkMessagingRoomWindow, { + group: group + }); + }, add() { this.$root.new(MkMessagingWindow); }, |