diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index 27f3e7cb..520a8cbe 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -164,11 +164,15 @@ </div> <div :label="$t('settings.blocks_tab')"> - <block-list :refresh="true" /> + <block-list :refresh="true"> + <template slot="empty">No blocks</template> + </block-list> </div> <div :label="$t('settings.mutes_tab')"> - <mute-list :refresh="true" /> + <mute-list :refresh="true"> + <template slot="empty">No mutes</template> + </mute-list> </div> </tab-switcher> </div> diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js index e5770cee..896f8fc8 100644 --- a/src/hocs/with_list/with_list.js +++ b/src/hocs/with_list/with_list.js @@ -1,5 +1,7 @@ import Vue from 'vue' import map from 'lodash/map' +import isEmpty from 'lodash/isEmpty' +import './with_list.scss' const defaultEntryPropsGetter = entry => ({ entry }) const defaultKeyGetter = entry => entry.id @@ -9,6 +11,11 @@ const withList = ({ getKey = defaultKeyGetter // funciton to accept entry and index values and return key prop value }) => (ItemComponent) => ( Vue.component('withList', { + props: [ + 'entries', // array of entry + 'entryProps', // additional props to be passed into each entry + 'entryListeners' // additional event listeners to be passed into each entry + ], render (createElement) { return ( <div class="with-list"> @@ -23,10 +30,10 @@ const withList = ({ } return <ItemComponent {...props} /> })} + {isEmpty(this.entries) && this.$slots.empty && <div class="with-list-empty-content faint">{this.$slots.empty}</div>} </div> ) - }, - props: ['entries', 'entryProps', 'entryListeners'] + } }) ) diff --git a/src/hocs/with_list/with_list.scss b/src/hocs/with_list/with_list.scss new file mode 100644 index 00000000..c6e13d5b --- /dev/null +++ b/src/hocs/with_list/with_list.scss @@ -0,0 +1,6 @@ +.with-list { + &-empty-content { + text-align: center; + padding: 10px; + } +} \ No newline at end of file