add bulk action buttons

This commit is contained in:
taehoon 2019-04-04 13:30:34 -04:00
parent 403c7bbe6c
commit 8fa639f252
2 changed files with 29 additions and 1 deletions

View file

@ -10,6 +10,7 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for
import BlockCard from '../block_card/block_card.vue' import BlockCard from '../block_card/block_card.vue'
import MuteCard from '../mute_card/mute_card.vue' import MuteCard from '../mute_card/mute_card.vue'
import SelectableList from '../selectable_list/selectable_list.vue' import SelectableList from '../selectable_list/selectable_list.vue'
import ProgressButton from '../progress_button/progress_button.vue'
import EmojiInput from '../emoji-input/emoji-input.vue' import EmojiInput from '../emoji-input/emoji-input.vue'
import Autosuggest from '../autosuggest/autosuggest.vue' import Autosuggest from '../autosuggest/autosuggest.vue'
import withSubscription from '../../hocs/with_subscription/with_subscription' import withSubscription from '../../hocs/with_subscription/with_subscription'
@ -73,7 +74,8 @@ const UserSettings = {
EmojiInput, EmojiInput,
Autosuggest, Autosuggest,
BlockCard, BlockCard,
MuteCard MuteCard,
ProgressButton
}, },
computed: { computed: {
user () { user () {

View file

@ -201,6 +201,22 @@
</Autosuggest> </Autosuggest>
</div> </div>
<BlockList :refresh="true" :getKey="item => item"> <BlockList :refresh="true" :getKey="item => item">
<template slot="header" slot-scope="p">
<div class="bulk-actions-wrapper">
<ProgressButton class="btn btn-default" v-if="p.selected.length > 0">
{{ $t('user_card.block') }}
<template slot="progress">
{{ $t('user_card.block_progress') }}
</template>
</ProgressButton>
<ProgressButton class="btn btn-default" v-if="p.selected.length > 0">
{{ $t('user_card.unblock') }}
<template slot="progress">
{{ $t('user_card.unblock_progress') }}
</template>
</ProgressButton>
</div>
</template>
<template slot="item" slot-scope="p"> <template slot="item" slot-scope="p">
<BlockCard :userId="p.item" /> <BlockCard :userId="p.item" />
</template> </template>
@ -282,5 +298,15 @@
&-usersearch-wrapper { &-usersearch-wrapper {
padding: 1em; padding: 1em;
} }
.bulk-actions-wrapper {
text-align: right;
padding: 0 1em;
min-height: 28px;
button {
width: 10em;
}
}
} }
</style> </style>