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
syuilo
parent
8b92feac71
commit
dab7e527de
6 changed files with 123 additions and 105 deletions
|
|
@ -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: "📦 始めましょう"
|
||||
|
|
|
|||
95
src/client/app/common/views/components/user-lists.vue
Normal file
95
src/client/app/common/views/components/user-lists.vue
Normal 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>
|
||||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue