Improve user lists index (#4605)

* wip

* Revert "wip"

This reverts commit 6212831ce3bdae5ce17f8ace9945710ba7696185.

* improve list index

* Update user-lists.vue
This commit is contained in:
tamaina 2019-04-18 21:33:24 +09:00 committed by syuilo
parent 8b92feac71
commit dab7e527de
6 changed files with 123 additions and 105 deletions

View file

@ -748,6 +748,10 @@ common/views/components/user-list-editor.vue:
delete-are-you-sure: "リスト「$1」を削除しますか" delete-are-you-sure: "リスト「$1」を削除しますか"
deleted: "削除しました" deleted: "削除しました"
common/views/components/user-lists.vue:
create-list: "リストを作成"
list-name: "リスト名"
common/views/widgets/broadcast.vue: common/views/widgets/broadcast.vue:
fetching: "確認中" fetching: "確認中"
no-broadcasts: "お知らせはありません" no-broadcasts: "お知らせはありません"
@ -1154,8 +1158,6 @@ desktop/views/components/received-follow-requests-window.vue:
desktop/views/components/user-lists-window.vue: desktop/views/components/user-lists-window.vue:
title: "リスト" title: "リスト"
create-list: "リストを作成"
list-name: "リスト名"
desktop/views/components/user-preview.vue: desktop/views/components/user-preview.vue:
notes: "投稿" notes: "投稿"
@ -1689,7 +1691,6 @@ mobile/views/pages/drive.vue:
mobile/views/pages/user-lists.vue: mobile/views/pages/user-lists.vue:
title: "リスト" title: "リスト"
enter-list-name: "リスト名を入力してください"
mobile/views/pages/signup.vue: mobile/views/pages/signup.vue:
lets-start: "📦 始めましょう" lets-start: "📦 始めましょう"

View file

@ -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>

View file

@ -90,9 +90,8 @@
import Vue from 'vue'; import Vue from 'vue';
import i18n from '../../../i18n'; import i18n from '../../../i18n';
import MkUserListsWindow from './user-lists-window.vue'; import MkUserListsWindow from './user-lists-window.vue';
import MkUserListWindow from './user-list-window.vue';
import MkFollowRequestsWindow from './received-follow-requests-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 MkDriveWindow from './drive-window.vue';
import contains from '../../../common/scripts/contains'; import contains from '../../../common/scripts/contains';
import { faHome, faColumns } from '@fortawesome/free-solid-svg-icons'; import { faHome, faColumns } from '@fortawesome/free-solid-svg-icons';
@ -143,12 +142,7 @@ export default Vue.extend({
}, },
list() { list() {
this.close(); this.close();
const w = this.$root.new(MkUserListsWindow); this.$root.new(MkUserListsWindow);
w.$once('choosen', list => {
this.$root.new(MkUserListWindow, {
list
});
});
}, },
followRequests() { followRequests() {
this.close(); this.close();

View file

@ -148,10 +148,7 @@ export default Vue.extend({
}, },
list() { list() {
const w = this.$root.new(MkUserListsWindow); this.$root.new(MkUserListsWindow);
w.$once('choosen', list => {
this.$router.push(`i/lists/${ list.id }`);
});
}, },
followRequests() { followRequests() {

View file

@ -1,85 +1,36 @@
<template> <template>
<mk-window ref="window" width="450px" height="500px" @closed="destroyDom"> <mk-window ref="window" width="450px" height="500px" @closed="destroyDom">
<template #header><fa icon="list"/> {{ $t('title') }}</template> <template #header><fa icon="list"/> {{ $t('title') }}</template>
<x-lists :class="$style.content" @choosen="choosen"/>
<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>
</mk-window> </mk-window>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import i18n from '../../../i18n'; import i18n from '../../../i18n';
import MkUserListWindow from './user-list-window.vue';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('desktop/views/components/user-lists-window.vue'), i18n: i18n('desktop/views/components/user-lists-window.vue'),
data() { components: {
return { XLists: () => import('../../../common/views/components/user-lists.vue').then(m => m.default)
fetching: true,
lists: []
};
},
mounted() {
this.$root.api('users/lists/list').then(lists => {
this.fetching = false;
this.lists = lists;
});
}, },
methods: { 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() { close() {
(this as any).$refs.window.close(); (this as any).$refs.window.close();
},
choosen(list) {
this.$root.new(MkUserListWindow, {
list
});
} }
} }
}); });
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" module>
.xkxvokkjlptzyewouewmceqcxhpgzprp .content
padding 16px height 100%
overflow auto
> 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> </style>

View file

@ -1,20 +1,15 @@
<template> <template>
<mk-ui> <mk-ui>
<template #header><fa icon="list"/>{{ $t('title') }}</template> <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> <x-lists ref="lists" @choosen="choosen"/>
<ul>
<li v-for="list in lists" :key="list.id"><router-link :to="`/i/lists/${list.id}`">{{ list.name }}</router-link></li>
</ul>
</main>
</mk-ui> </mk-ui>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import i18n from '../../../i18n'; import i18n from '../../../i18n';
import Progress from '../../../common/scripts/loading';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('mobile/views/pages/user-lists.vue'), i18n: i18n('mobile/views/pages/user-lists.vue'),
@ -24,31 +19,16 @@ export default Vue.extend({
lists: [] lists: []
}; };
}, },
components: {
XLists: () => import('../../../common/views/components/user-lists.vue').then(m => m.default)
},
mounted() { mounted() {
document.title = this.$t('title'); document.title = this.$t('title');
Progress.start();
this.$root.api('users/lists/list').then(lists => {
this.fetching = false;
this.lists = lists;
Progress.done();
});
}, },
methods: { methods: {
fn() { choosen(list) {
this.$root.dialog({ if (!list) return;
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}`); this.$router.push(`/i/lists/${list.id}`);
});
} }
} }
}); });