diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index e9284f89a..a475bc2c1 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -748,6 +748,10 @@ common/views/components/user-list-editor.vue: delete-are-you-sure: "リスト「$1」を削除しますか?" deleted: "削除しました" +common/views/components/user-lists.vue: + create-list: "リストを作成" + list-name: "リスト名" + common/views/widgets/broadcast.vue: fetching: "確認中" no-broadcasts: "お知らせはありません" @@ -1154,8 +1158,6 @@ desktop/views/components/received-follow-requests-window.vue: desktop/views/components/user-lists-window.vue: title: "リスト" - create-list: "リストを作成" - list-name: "リスト名" desktop/views/components/user-preview.vue: notes: "投稿" @@ -1689,7 +1691,6 @@ mobile/views/pages/drive.vue: mobile/views/pages/user-lists.vue: title: "リスト" - enter-list-name: "リスト名を入力してください" mobile/views/pages/signup.vue: lets-start: "📦 始めましょう" diff --git a/src/client/app/common/views/components/user-lists.vue b/src/client/app/common/views/components/user-lists.vue new file mode 100644 index 000000000..786a6766d --- /dev/null +++ b/src/client/app/common/views/components/user-lists.vue @@ -0,0 +1,95 @@ +<template> +<div class="xkxvokkjlptzyewouewmceqcxhpgzprp"> + <button class="ui" @click="add">{{ $t('create-list') }}</button> + <a v-for="list in lists" :key="list.id" @click="choice(list)">{{ list.name }}</a> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import i18n from '../../../i18n'; + +export default Vue.extend({ + i18n: i18n('common/views/components/user-lists.vue'), + data() { + return { + fetching: true, + lists: [] + }; + }, + mounted() { + this.$root.api('users/lists/list').then(lists => { + this.fetching = false; + this.lists = lists; + }); + }, + methods: { + add() { + this.$root.dialog({ + title: this.$t('list-name'), + input: true + }).then(async ({ canceled, result: title }) => { + if (canceled) return; + const list = await this.$root.api('users/lists/create', { + title + }); + + this.lists.push(list) + this.$emit('choosen', list); + }); + }, + choice(list) { + this.$emit('choosen', list); + } + } +}); +</script> + +<style lang="stylus" scoped> +.xkxvokkjlptzyewouewmceqcxhpgzprp + padding 16px + background: var(--bg) + + > button + display block + margin-bottom 16px + color var(--primaryForeground) + background var(--primary) + width 100% + border-radius 38px + user-select none + cursor pointer + padding 0 16px + min-width 100px + line-height 38px + font-size 14px + font-weight 700 + + &:hover + background var(--primaryLighten10) + + &:active + background var(--primaryDarken10) + + a + display block + margin 8px 0 + padding 8px + color var(--text) + background var(--face) + box-shadow 0 2px 16px var(--reversiListItemShadow) + border-radius 6px + cursor pointer + line-height 32px + + * + pointer-events none + user-select none + + &:hover + box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05) + + &:active + box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1) + +</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 effd0ef0f..7f9decfdc 100644 --- a/src/client/app/desktop/views/components/ui.header.account.vue +++ b/src/client/app/desktop/views/components/ui.header.account.vue @@ -90,9 +90,8 @@ import Vue from 'vue'; import i18n from '../../../i18n'; import MkUserListsWindow from './user-lists-window.vue'; -import MkUserListWindow from './user-list-window.vue'; import MkFollowRequestsWindow from './received-follow-requests-window.vue'; -import MkSettingsWindow from './settings-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'; @@ -143,12 +142,7 @@ export default Vue.extend({ }, list() { this.close(); - const w = this.$root.new(MkUserListsWindow); - w.$once('choosen', list => { - this.$root.new(MkUserListWindow, { - list - }); - }); + this.$root.new(MkUserListsWindow); }, followRequests() { this.close(); diff --git a/src/client/app/desktop/views/components/ui.sidebar.vue b/src/client/app/desktop/views/components/ui.sidebar.vue index cb0e059c1..1c01f127b 100644 --- a/src/client/app/desktop/views/components/ui.sidebar.vue +++ b/src/client/app/desktop/views/components/ui.sidebar.vue @@ -148,10 +148,7 @@ export default Vue.extend({ }, list() { - const w = this.$root.new(MkUserListsWindow); - w.$once('choosen', list => { - this.$router.push(`i/lists/${ list.id }`); - }); + this.$root.new(MkUserListsWindow); }, followRequests() { diff --git a/src/client/app/desktop/views/components/user-lists-window.vue b/src/client/app/desktop/views/components/user-lists-window.vue index 7afcd6aa3..afea01d4a 100644 --- a/src/client/app/desktop/views/components/user-lists-window.vue +++ b/src/client/app/desktop/views/components/user-lists-window.vue @@ -1,85 +1,36 @@ <template> <mk-window ref="window" width="450px" height="500px" @closed="destroyDom"> <template #header><fa icon="list"/> {{ $t('title') }}</template> - - <div class="xkxvokkjlptzyewouewmceqcxhpgzprp"> - <button class="ui" @click="add">{{ $t('create-list') }}</button> - <a v-for="list in lists" :key="list.id" @click="choice(list)">{{ list.name }}</a> - </div> + <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'), - data() { - return { - fetching: true, - lists: [] - }; - }, - mounted() { - this.$root.api('users/lists/list').then(lists => { - this.fetching = false; - this.lists = lists; - }); + components: { + XLists: () => import('../../../common/views/components/user-lists.vue').then(m => m.default) }, methods: { - add() { - this.$root.dialog({ - title: this.$t('list-name'), - input: true - }).then(async ({ canceled, result: title }) => { - if (canceled) return; - const list = await this.$root.api('users/lists/create', { - title - }); - - this.$emit('choosen', list); - }); - }, - choice(list) { - this.$emit('choosen', list); - }, close() { (this as any).$refs.window.close(); + }, + choosen(list) { + this.$root.new(MkUserListWindow, { + list + }); } } }); </script> -<style lang="stylus" scoped> -.xkxvokkjlptzyewouewmceqcxhpgzprp - padding 16px - - > button - display block - margin-bottom 16px - color var(--primaryForeground) - background var(--primary) - width 100% - border-radius 38px - user-select none - cursor pointer - padding 0 16px - min-width 100px - line-height 38px - font-size 14px - font-weight 700 - - &:hover - background var(--primaryLighten10) - - &:active - background var(--primaryDarken10) - - > a - display block - padding 16px - border solid 1px var(--faceDivider) - border-radius 4px +<style lang="stylus" module> +.content + height 100% + overflow auto </style> diff --git a/src/client/app/mobile/views/pages/user-lists.vue b/src/client/app/mobile/views/pages/user-lists.vue index 49006f41f..a3e9bd78b 100644 --- a/src/client/app/mobile/views/pages/user-lists.vue +++ b/src/client/app/mobile/views/pages/user-lists.vue @@ -1,20 +1,15 @@ <template> <mk-ui> <template #header><fa icon="list"/>{{ $t('title') }}</template> - <template #func><button @click="fn"><fa icon="plus"/></button></template> + <template #func><button @click="$refs.lists.add()"><fa icon="plus"/></button></template> - <main> - <ul> - <li v-for="list in lists" :key="list.id"><router-link :to="`/i/lists/${list.id}`">{{ list.name }}</router-link></li> - </ul> - </main> + <x-lists ref="lists" @choosen="choosen"/> </mk-ui> </template> <script lang="ts"> import Vue from 'vue'; import i18n from '../../../i18n'; -import Progress from '../../../common/scripts/loading'; export default Vue.extend({ i18n: i18n('mobile/views/pages/user-lists.vue'), @@ -24,31 +19,16 @@ export default Vue.extend({ lists: [] }; }, + components: { + XLists: () => import('../../../common/views/components/user-lists.vue').then(m => m.default) + }, mounted() { document.title = this.$t('title'); - - Progress.start(); - - this.$root.api('users/lists/list').then(lists => { - this.fetching = false; - this.lists = lists; - - Progress.done(); - }); }, methods: { - fn() { - this.$root.dialog({ - title: this.$t('enter-list-name'), - input: true - }).then(async ({ canceled, result: title }) => { - if (canceled) return; - const list = await this.$root.api('users/lists/create', { - title - }); - - this.$router.push(`/i/lists/${list.id}`); - }); + choosen(list) { + if (!list) return; + this.$router.push(`/i/lists/${list.id}`); } } });