diff options
Diffstat (limited to 'src/client/app/desktop/views/components')
| -rw-r--r-- | src/client/app/desktop/views/components/followers-window.vue | 32 | ||||
| -rw-r--r-- | src/client/app/desktop/views/components/followers.vue | 26 | ||||
| -rw-r--r-- | src/client/app/desktop/views/components/following-window.vue | 32 | ||||
| -rw-r--r-- | src/client/app/desktop/views/components/following.vue | 26 | ||||
| -rw-r--r-- | src/client/app/desktop/views/components/index.ts | 8 | ||||
| -rw-r--r-- | src/client/app/desktop/views/components/user-card.vue (renamed from src/client/app/desktop/views/components/users-list.item.vue) | 30 | ||||
| -rw-r--r-- | src/client/app/desktop/views/components/users-list.vue | 145 |
7 files changed, 11 insertions, 288 deletions
diff --git a/src/client/app/desktop/views/components/followers-window.vue b/src/client/app/desktop/views/components/followers-window.vue deleted file mode 100644 index d5214adb2f..0000000000 --- a/src/client/app/desktop/views/components/followers-window.vue +++ /dev/null @@ -1,32 +0,0 @@ -<template> -<mk-window width="400px" height="550px" @closed="destroyDom"> - <span slot="header" :class="$style.header"> - <img :src="user.avatarUrl" alt=""/>{{ '%i18n:@followers%'.replace('{}', name) }} - </span> - <mk-followers :user="user"/> -</mk-window> -</template> - -<script lang="ts"> -import Vue from 'vue'; - -export default Vue.extend({ - props: ['user'], - computed: { - name(): string { - return Vue.filter('userName')(this.user); - } - } -}); -</script> - -<style lang="stylus" module> -.header - > img - display inline-block - vertical-align bottom - height calc(100% - 10px) - margin 5px - border-radius 4px - -</style> diff --git a/src/client/app/desktop/views/components/followers.vue b/src/client/app/desktop/views/components/followers.vue deleted file mode 100644 index 1ef9f69771..0000000000 --- a/src/client/app/desktop/views/components/followers.vue +++ /dev/null @@ -1,26 +0,0 @@ -<template> -<mk-users-list - :fetch="fetch" - :count="user.followersCount" - :you-know-count="user.followersYouKnowCount" -> - %i18n:@empty% -</mk-users-list> -</template> - -<script lang="ts"> -import Vue from 'vue'; -export default Vue.extend({ - props: ['user'], - methods: { - fetch(iknow, limit, cursor, cb) { - (this as any).api('users/followers', { - userId: this.user.id, - iknow: iknow, - limit: limit, - cursor: cursor ? cursor : undefined - }).then(cb); - } - } -}); -</script> diff --git a/src/client/app/desktop/views/components/following-window.vue b/src/client/app/desktop/views/components/following-window.vue deleted file mode 100644 index aa9f2bde7b..0000000000 --- a/src/client/app/desktop/views/components/following-window.vue +++ /dev/null @@ -1,32 +0,0 @@ -<template> -<mk-window width="400px" height="550px" @closed="destroyDom"> - <span slot="header" :class="$style.header"> - <img :src="user.avatarUrl" alt=""/>{{ '%i18n:@following%'.replace('{}', name) }} - </span> - <mk-following :user="user"/> -</mk-window> -</template> - -<script lang="ts"> -import Vue from 'vue'; - -export default Vue.extend({ - props: ['user'], - computed: { - name(): string { - return Vue.filter('userName')(this.user); - } - } -}); -</script> - -<style lang="stylus" module> -.header - > img - display inline-block - vertical-align bottom - height calc(100% - 10px) - margin 5px - border-radius 4px - -</style> diff --git a/src/client/app/desktop/views/components/following.vue b/src/client/app/desktop/views/components/following.vue deleted file mode 100644 index d55ce1c0d4..0000000000 --- a/src/client/app/desktop/views/components/following.vue +++ /dev/null @@ -1,26 +0,0 @@ -<template> -<mk-users-list - :fetch="fetch" - :count="user.followingCount" - :you-know-count="user.followingYouKnowCount" -> - %i18n:@empty% -</mk-users-list> -</template> - -<script lang="ts"> -import Vue from 'vue'; -export default Vue.extend({ - props: ['user'], - methods: { - fetch(iknow, limit, cursor, cb) { - (this as any).api('users/following', { - userId: this.user.id, - iknow: iknow, - limit: limit, - cursor: cursor ? cursor : undefined - }).then(cb); - } - } -}); -</script> diff --git a/src/client/app/desktop/views/components/index.ts b/src/client/app/desktop/views/components/index.ts index ff4e845f62..2478f75ac4 100644 --- a/src/client/app/desktop/views/components/index.ts +++ b/src/client/app/desktop/views/components/index.ts @@ -22,9 +22,7 @@ import settings from './settings.vue'; import calendar from './calendar.vue'; import activity from './activity.vue'; import friendsMaker from './friends-maker.vue'; -import followers from './followers.vue'; -import following from './following.vue'; -import usersList from './users-list.vue'; +import userCard from './user-card.vue'; import userListTimeline from './user-list-timeline.vue'; import widgetContainer from './widget-container.vue'; @@ -50,8 +48,6 @@ Vue.component('mk-settings', settings); Vue.component('mk-calendar', calendar); Vue.component('mk-activity', activity); Vue.component('mk-friends-maker', friendsMaker); -Vue.component('mk-followers', followers); -Vue.component('mk-following', following); -Vue.component('mk-users-list', usersList); +Vue.component('mk-user-card', userCard); Vue.component('mk-user-list-timeline', userListTimeline); Vue.component('mk-widget-container', widgetContainer); diff --git a/src/client/app/desktop/views/components/users-list.item.vue b/src/client/app/desktop/views/components/user-card.vue index 66a002c708..ccc0a49dc0 100644 --- a/src/client/app/desktop/views/components/users-list.item.vue +++ b/src/client/app/desktop/views/components/user-card.vue @@ -9,7 +9,6 @@ <div class="description"> <misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/> </div> - <p class="followed" v-if="user.isFollowed">%i18n:@followed%</p> </div> </div> </template> @@ -34,17 +33,18 @@ export default Vue.extend({ <style lang="stylus" scoped> .zvdbznxvfixtmujpsigoccczftvpiwqh - $bg = #fff + $bg = var(--face) - margin 16px auto - max-width calc(100% - 32px) - font-size 16px + height 280px + overflow hidden + font-size 14px text-align center background $bg box-shadow 0 2px 4px rgba(0, 0, 0, 0.1) + color var(--faceText) > .banner - height 100px + height 90px background-color #f9f4f4 background-position center background-size cover @@ -63,13 +63,10 @@ export default Vue.extend({ right 16px > .body - padding 4px 32px 32px 32px - - @media (max-width 400px) - padding 4px 16px 16px 16px + padding 0px 24px > .name - font-size 20px + font-size 120% font-weight bold > .username @@ -77,15 +74,6 @@ export default Vue.extend({ opacity 0.7 > .description - margin 16px 0 - - > .followed - margin 0 - padding 0 - line-height 24px - font-size 0.8em - color #71afc7 - background #eefaff - border-radius 4px + margin 8px 0 16px 0 </style> diff --git a/src/client/app/desktop/views/components/users-list.vue b/src/client/app/desktop/views/components/users-list.vue deleted file mode 100644 index 05fe6c292e..0000000000 --- a/src/client/app/desktop/views/components/users-list.vue +++ /dev/null @@ -1,145 +0,0 @@ -<template> -<div class="mk-users-list"> - <nav> - <div> - <span :data-active="mode == 'all'" @click="mode = 'all'">%i18n:@all%<span>{{ count }}</span></span> - <span v-if="$store.getters.isSignedIn && youKnowCount" :data-active="mode == 'iknow'" @click="mode = 'iknow'">%i18n:@iknow%<span>{{ youKnowCount }}</span></span> - </div> - </nav> - <div class="users" v-if="!fetching && users.length != 0"> - <div v-for="u in users" :key="u.id"> - <x-item :user="u"/> - </div> - </div> - <button class="more" v-if="!fetching && next != null" @click="more" :disabled="moreFetching"> - <span v-if="!moreFetching">%i18n:@load-more%</span> - <span v-if="moreFetching">%i18n:common.loading%<mk-ellipsis/></span> - </button> - <p class="no" v-if="!fetching && users.length == 0"> - <slot></slot> - </p> - <p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:@fetching%<mk-ellipsis/></p> -</div> -</template> - -<script lang="ts"> -import Vue from 'vue'; -import XItem from './users-list.item.vue'; - -export default Vue.extend({ - components: { - XItem - }, - props: ['fetch', 'count', 'youKnowCount'], - data() { - return { - limit: 20, - mode: 'all', - fetching: true, - moreFetching: false, - users: [], - next: null - }; - }, - mounted() { - this._fetch(() => { - this.$emit('loaded'); - }); - }, - methods: { - _fetch(cb) { - this.fetching = true; - this.fetch(this.mode == 'iknow', this.limit, null, obj => { - this.users = obj.users; - this.next = obj.next; - this.fetching = false; - if (cb) cb(); - }); - }, - more() { - this.moreFetching = true; - this.fetch(this.mode == 'iknow', this.limit, this.next, obj => { - this.moreFetching = false; - this.users = this.users.concat(obj.users); - this.next = obj.next; - }); - } - } -}); -</script> - -<style lang="stylus" scoped> - - -.mk-users-list - height 100% - overflow auto - background #eee - - > nav - z-index 10 - position sticky - top 0 - background #fff - box-shadow 0 1px 0 rgba(#000, 0.1) - - > div - display flex - justify-content center - margin 0 auto - max-width 600px - - > span - display block - flex 1 1 - text-align center - line-height 52px - font-size 14px - color #657786 - border-bottom solid 2px transparent - cursor pointer - - * - pointer-events none - - &[data-active] - font-weight bold - color var(--primary) - border-color var(--primary) - cursor default - - > span - display inline-block - margin-left 4px - padding 2px 5px - font-size 12px - line-height 1 - color #888 - background #eee - border-radius 20px - - > button - display block - width calc(100% - 32px) - margin 16px - padding 16px - - &:hover - background rgba(#000, 0.1) - - > .no - margin 0 - padding 16px - text-align center - color #aaa - - > .fetching - margin 0 - padding 16px - text-align center - color #aaa - - > [data-icon] - margin-right 4px - -</style> |