From 23b9d1eaa31efc83705288409e5993279ae969e6 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 22:38:48 -0400
Subject: rename selectable_row to selectable_list

---
 src/components/selectable_list/selectable_list.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 src/components/selectable_list/selectable_list.vue

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
new file mode 100644
index 00000000..11853672
--- /dev/null
+++ b/src/components/selectable_list/selectable_list.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <Checkbox v-model="checked" />
+  </div>
+</template>
+
+<script src="./selectable_row.js"></script>
+
+<style lang="scss">
+</style>
-- 
cgit v1.2.3-70-g09d2


From d9b3f5be4733f0eef4d3c8dff982224cd1a5303e Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 22:48:00 -0400
Subject: use SelectableList for blocks/mutes list

---
 src/components/selectable_list/selectable_list.js  | 11 +++++------
 src/components/selectable_list/selectable_list.vue | 18 +++++++++++++++---
 src/components/user_settings/user_settings.js      |  6 +++---
 3 files changed, 23 insertions(+), 12 deletions(-)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index cd431eeb..138e63ab 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -4,12 +4,11 @@ const SelectableList = {
   components: {
     Checkbox
   },
-  props: ['checked'],
-  data () {
-  },
-  computed: {
-  },
-  methods: {
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    }
   }
 }
 
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 11853672..2e0671ef 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -1,10 +1,22 @@
 <template>
-  <div>
-    <Checkbox v-model="checked" />
+  <div class="selectable-list">
+    <div v-for="item in items">
+      <Checkbox v-model="checked" />
+      <slot name="item" :item="item" />
+    </div>
+    <div class="selectable-list-empty-content faint" v-if="items.length === 0">
+      <slot name="empty" />
+    </div>
   </div>
 </template>
 
-<script src="./selectable_row.js"></script>
+<script src="./selectable_list.js"></script>
 
 <style lang="scss">
+.selectable-list {
+  &-empty-content {
+    text-align: center;
+    padding: 10px;
+  }
+}
 </style>
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 2bbb01db..f8742cd4 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -9,7 +9,7 @@ import ScopeSelector from '../scope_selector/scope_selector.vue'
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
 import BlockCard from '../block_card/block_card.vue'
 import MuteCard from '../mute_card/mute_card.vue'
-import List from '../list/list.vue'
+import SelectableList from '../selectable_list/selectable_list.vue'
 import EmojiInput from '../emoji-input/emoji-input.vue'
 import Autosuggest from '../autosuggest/autosuggest.vue'
 import withSubscription from '../../hocs/with_subscription/with_subscription'
@@ -19,13 +19,13 @@ const BlockList = withSubscription({
   fetch: (props, $store) => $store.dispatch('fetchBlocks'),
   select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
   childPropName: 'items'
-})(List)
+})(SelectableList)
 
 const MuteList = withSubscription({
   fetch: (props, $store) => $store.dispatch('fetchMutes'),
   select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
   childPropName: 'items'
-})(List)
+})(SelectableList)
 
 const UserSettings = {
   data () {
-- 
cgit v1.2.3-70-g09d2


From e0b246375009a4c533d90def0842bd8cf59f78cc Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 23:26:13 -0400
Subject: save selected items to the state

---
 src/components/selectable_list/selectable_list.js  | 25 ++++++++++++++++++++++
 src/components/selectable_list/selectable_list.vue |  2 +-
 2 files changed, 26 insertions(+), 1 deletion(-)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index 138e63ab..5c01bbab 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -8,6 +8,31 @@ const SelectableList = {
     items: {
       type: Array,
       default: () => []
+    },
+    getKey: {
+      type: Function,
+      default: item => item
+    }
+  },
+  data () {
+    return {
+      selected: []
+    }
+  },
+  methods: {
+    toggle (checked, item) {
+      const oldChecked = this.isChecked(item)
+      if (checked !== oldChecked) {
+        const key = this.getKey(item)
+        if (checked) {
+          this.selected.push(key)
+        } else {
+          this.selected.splice(this.selected.indexOf(key), 1)
+        }
+      }
+    },
+    isChecked (item) {
+      return this.selected.indexOf(this.getKey(item)) !== -1
     }
   }
 }
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 2e0671ef..d7b166bc 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="selectable-list">
     <div v-for="item in items">
-      <Checkbox v-model="checked" />
+      <Checkbox :checked="isChecked(item)" @change="checked => toggle(checked, item)" />
       <slot name="item" :item="item" />
     </div>
     <div class="selectable-list-empty-content faint" v-if="items.length === 0">
-- 
cgit v1.2.3-70-g09d2


From f6e9f2874576f9496618d583de878fdc8487eaca Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 23:29:24 -0400
Subject: use key properly

---
 src/components/selectable_list/selectable_list.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index d7b166bc..f0ab33dd 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="selectable-list">
-    <div v-for="item in items">
+    <div v-for="item in items" :key="getKey(item)">
       <Checkbox :checked="isChecked(item)" @change="checked => toggle(checked, item)" />
       <slot name="item" :item="item" />
     </div>
-- 
cgit v1.2.3-70-g09d2


From 3a318dc373dba930573d542f4910772bf6fdc502 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 23:35:43 -0400
Subject: add some styling to the selectable-list component

---
 src/components/selectable_list/selectable_list.js  |  4 ++--
 src/components/selectable_list/selectable_list.vue | 22 ++++++++++++++++++++--
 2 files changed, 22 insertions(+), 4 deletions(-)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index 5c01bbab..7a724144 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -21,7 +21,7 @@ const SelectableList = {
   },
   methods: {
     toggle (checked, item) {
-      const oldChecked = this.isChecked(item)
+      const oldChecked = this.isSelected(item)
       if (checked !== oldChecked) {
         const key = this.getKey(item)
         if (checked) {
@@ -31,7 +31,7 @@ const SelectableList = {
         }
       }
     },
-    isChecked (item) {
+    isSelected (item) {
       return this.selected.indexOf(this.getKey(item)) !== -1
     }
   }
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index f0ab33dd..7a7a7644 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="selectable-list">
-    <div v-for="item in items" :key="getKey(item)">
-      <Checkbox :checked="isChecked(item)" @change="checked => toggle(checked, item)" />
+    <div v-for="item in items" :key="getKey(item)" class="selectable-list-item" :class="{ 'selectable-list-item-selected': isSelected(item) }">
+      <div class="selectable-list-checkbox-wrapper">
+        <Checkbox :checked="isSelected(item)" @change="checked => toggle(checked, item)" />
+      </div>
       <slot name="item" :item="item" />
     </div>
     <div class="selectable-list-empty-content faint" v-if="items.length === 0">
@@ -13,7 +15,23 @@
 <script src="./selectable_list.js"></script>
 
 <style lang="scss">
+@import '../../_variables.scss';
+
 .selectable-list {
+  &-item {
+    display: flex;
+
+    &-selected {
+      background-color: $fallback--lightBg;
+      background-color: var(--lightBg, $fallback--lightBg);
+    }
+  }
+
+  &-checkbox-wrapper {
+    padding: 10px;
+    flex: none;
+  }
+
   &-empty-content {
     text-align: center;
     padding: 10px;
-- 
cgit v1.2.3-70-g09d2


From 80d83b46d91d812bc6edf4085906c1b01b0cac46 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 23:42:24 -0400
Subject: move border-bottom style to the list

---
 src/components/basic_user_card/basic_user_card.vue | 10 +---------
 src/components/selectable_list/selectable_list.vue |  3 +++
 2 files changed, 4 insertions(+), 9 deletions(-)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index 8afe8b44..48de6678 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -24,19 +24,11 @@
 <script src="./basic_user_card.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
-
 .basic-user-card {
   display: flex;
   flex: 1 0;
   margin: 0;
-  padding-top: 0.6em;
-  padding-right: 1em;
-  padding-bottom: 0.6em;
-  padding-left: 1em;
-  border-bottom: 1px solid;
-  border-bottom-color: $fallback--border;
-  border-bottom-color: var(--border, $fallback--border);
+  padding: 0.6em 1em;
 
   &-collapsed-content {
     margin-left: 0.7em;
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 7a7a7644..25b8e56b 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -20,6 +20,9 @@
 .selectable-list {
   &-item {
     display: flex;
+    border-bottom: 1px solid;
+    border-bottom-color: $fallback--border;
+    border-bottom-color: var(--border, $fallback--border);
 
     &-selected {
       background-color: $fallback--lightBg;
-- 
cgit v1.2.3-70-g09d2


From 792ae1697e1a3710a6f12eb70a3c81b0318f9515 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 23:54:14 -0400
Subject: refactor selectable-list using list component

---
 src/components/list/list.vue                       |  1 -
 src/components/selectable_list/selectable_list.js  |  2 ++
 src/components/selectable_list/selectable_list.vue | 37 ++++++++--------------
 3 files changed, 16 insertions(+), 24 deletions(-)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index d8c9f5a3..1159898d 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -29,7 +29,6 @@ export default {
 
 .list {
   &-item {
-    display: flex;
     border-bottom: 1px solid;
     border-bottom-color: $fallback--border;
     border-bottom-color: var(--border, $fallback--border);
diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index 7a724144..1fdd5a67 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -1,7 +1,9 @@
+import List from '../list/list.vue'
 import Checkbox from '../checkbox/checkbox.js'
 
 const SelectableList = {
   components: {
+    List,
     Checkbox
   },
   props: {
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 25b8e56b..e55a4ad3 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -1,15 +1,14 @@
 <template>
-  <div class="selectable-list">
-    <div v-for="item in items" :key="getKey(item)" class="selectable-list-item" :class="{ 'selectable-list-item-selected': isSelected(item) }">
-      <div class="selectable-list-checkbox-wrapper">
-        <Checkbox :checked="isSelected(item)" @change="checked => toggle(checked, item)" />
+  <List class="selectable-list" :items="items" :getKey="getKey">
+    <template slot="item" scope="p">
+      <div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(p.item) }">
+        <div class="selectable-list-checkbox-wrapper">
+          <Checkbox :checked="isSelected(p.item)" @change="checked => toggle(checked, p.item)" />
+        </div>
+        <slot name="item" :item="p.item" />
       </div>
-      <slot name="item" :item="item" />
-    </div>
-    <div class="selectable-list-empty-content faint" v-if="items.length === 0">
-      <slot name="empty" />
-    </div>
-  </div>
+    </template>
+  </List>
 </template>
 
 <script src="./selectable_list.js"></script>
@@ -18,26 +17,18 @@
 @import '../../_variables.scss';
 
 .selectable-list {
-  &-item {
+  &-item-inner {
     display: flex;
-    border-bottom: 1px solid;
-    border-bottom-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
+  }
 
-    &-selected {
-      background-color: $fallback--lightBg;
-      background-color: var(--lightBg, $fallback--lightBg);
-    }
+  &-item-selected-inner {
+    background-color: $fallback--lightBg;
+    background-color: var(--lightBg, $fallback--lightBg);
   }
 
   &-checkbox-wrapper {
     padding: 10px;
     flex: none;
   }
-
-  &-empty-content {
-    text-align: center;
-    padding: 10px;
-  }
 }
 </style>
-- 
cgit v1.2.3-70-g09d2


From b8ec13c8fd3b3498f55cce50807b2344779ea69f Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 00:22:55 -0400
Subject: let not selectable-list know about getKey prop

---
 src/components/list/list.vue                       | 2 +-
 src/components/selectable_list/selectable_list.js  | 9 ++++-----
 src/components/selectable_list/selectable_list.vue | 4 ++--
 3 files changed, 7 insertions(+), 8 deletions(-)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index 7d62283a..e63fea63 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="list">
     <div v-for="item in items" class="list-item" :key="getKey(item)">
-      <slot name="item" :item="item" />
+      <slot name="item" :item="item" :keyVal="getKey(item)" />
     </div>
     <div class="list-empty-content faint" v-if="items.length === 0">
       <slot name="empty" />
diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index 7856d725..93efa840 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -13,10 +13,9 @@ const SelectableList = {
     }
   },
   methods: {
-    toggle (checked, item) {
-      const oldChecked = this.isSelected(item)
+    toggle (checked, key) {
+      const oldChecked = this.isSelected(key)
       if (checked !== oldChecked) {
-        const key = this.getKey(item)
         if (checked) {
           this.selected.push(key)
         } else {
@@ -24,8 +23,8 @@ const SelectableList = {
         }
       }
     },
-    isSelected (item) {
-      return this.selected.indexOf(this.getKey(item)) !== -1
+    isSelected (key) {
+      return this.selected.indexOf(key) !== -1
     }
   }
 }
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index e55a4ad3..d8938062 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -1,9 +1,9 @@
 <template>
   <List class="selectable-list" :items="items" :getKey="getKey">
     <template slot="item" scope="p">
-      <div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(p.item) }">
+      <div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(p.keyVal) }">
         <div class="selectable-list-checkbox-wrapper">
-          <Checkbox :checked="isSelected(p.item)" @change="checked => toggle(checked, p.item)" />
+          <Checkbox :checked="isSelected(p.keyVal)" @change="checked => toggle(checked, p.keyVal)" />
         </div>
         <slot name="item" :item="p.item" />
       </div>
-- 
cgit v1.2.3-70-g09d2


From cf2c411db34953e65c186e214bd9bae44073c881 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 04:32:36 -0400
Subject: add header to selectable-list component

---
 src/components/checkbox/checkbox.scss              |  1 +
 src/components/list/list.vue                       |  2 +-
 src/components/selectable_list/selectable_list.js  | 30 ++++++++++++++++---
 src/components/selectable_list/selectable_list.vue | 34 +++++++++++++++-------
 4 files changed, 52 insertions(+), 15 deletions(-)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
index 4dfcfe34..42556d89 100644
--- a/src/components/checkbox/checkbox.scss
+++ b/src/components/checkbox/checkbox.scss
@@ -4,6 +4,7 @@
   position: relative;
   display: inline-block;
   padding-left: 1.2em;
+  min-height: 1.2em;
 
   &-indicator::before {
     position: absolute;
diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index 9d4beb21..7136915b 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="list">
     <div v-for="item in items" class="list-item" :key="getKey(item)">
-      <slot name="item" :item="item" :keyVal="getKey(item)" />
+      <slot name="item" :item="item" />
     </div>
     <div class="list-empty-content faint" v-if="items.length === 0 && !!$slots.empty">
       <slot name="empty" />
diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index 93efa840..809133f5 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -6,14 +6,32 @@ const SelectableList = {
     List,
     Checkbox
   },
-  props: List.props,
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    getKey: {
+      type: Function,
+      default: item => item.id
+    }
+  },
   data () {
     return {
       selected: []
     }
   },
+  computed: {
+    allSelected () {
+      return !this.items.find(item => !this.isSelected(item))
+    }
+  },
   methods: {
-    toggle (checked, key) {
+    isSelected (item) {
+      return this.selected.indexOf(this.getKey(item)) !== -1
+    },
+    toggle (checked, item) {
+      const key = this.getKey(item)
       const oldChecked = this.isSelected(key)
       if (checked !== oldChecked) {
         if (checked) {
@@ -23,8 +41,12 @@ const SelectableList = {
         }
       }
     },
-    isSelected (key) {
-      return this.selected.indexOf(key) !== -1
+    toggleAll (value) {
+      if (value) {
+        this.selected = this.items.map(this.getKey)
+      } else {
+        this.selected = []
+      }
     }
   }
 }
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index d8938062..e8c5d09b 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -1,14 +1,21 @@
 <template>
-  <List class="selectable-list" :items="items" :getKey="getKey">
-    <template slot="item" scope="p">
-      <div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(p.keyVal) }">
-        <div class="selectable-list-checkbox-wrapper">
-          <Checkbox :checked="isSelected(p.keyVal)" @change="checked => toggle(checked, p.keyVal)" />
-        </div>
-        <slot name="item" :item="p.item" />
+  <div class="selectable-list">
+    <div class="selectable-list-header">
+      <div class="selectable-list-checkbox-wrapper">
+        <Checkbox :checked="allSelected" @change="toggleAll" />
       </div>
-    </template>
-  </List>
+    </div>
+    <List :items="items" :getKey="getKey">
+      <template slot="item" scope="p">
+        <div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(p.item) }">
+          <div class="selectable-list-checkbox-wrapper">
+            <Checkbox :checked="isSelected(p.item)" @change="checked => toggle(checked, p.item)" />
+          </div>
+          <slot name="item" :item="p.item" />
+        </div>
+      </template>
+    </List>
+  </div>
 </template>
 
 <script src="./selectable_list.js"></script>
@@ -19,6 +26,7 @@
 .selectable-list {
   &-item-inner {
     display: flex;
+    align-items: center;
   }
 
   &-item-selected-inner {
@@ -26,8 +34,14 @@
     background-color: var(--lightBg, $fallback--lightBg);
   }
 
+  &-header {
+    display: flex;
+    align-items: center;
+    padding: 0.6em 0;
+  }
+
   &-checkbox-wrapper {
-    padding: 10px;
+    padding: 0 10px;
     flex: none;
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 7a8ffcd79bdb5bfd4bd03ba1d9bda8cd00e08f1d Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 04:39:16 -0400
Subject: support header slot

---
 src/components/selectable_list/selectable_list.vue | 7 +++++++
 1 file changed, 7 insertions(+)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index e8c5d09b..6c8c0bf6 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -4,6 +4,9 @@
       <div class="selectable-list-checkbox-wrapper">
         <Checkbox :checked="allSelected" @change="toggleAll" />
       </div>
+      <div class="selectable-list-header-actions">
+        <slot name="header" :selected="selected" />
+      </div>
     </div>
     <List :items="items" :getKey="getKey">
       <template slot="item" scope="p">
@@ -38,6 +41,10 @@
     display: flex;
     align-items: center;
     padding: 0.6em 0;
+
+    &-actions {
+      flex: 1;
+    }
   }
 
   &-checkbox-wrapper {
-- 
cgit v1.2.3-70-g09d2


From d4e43e0e261c1edafe505cd448ab876d541a0474 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 04:40:25 -0400
Subject: add border-bottom to the header

---
 src/components/selectable_list/selectable_list.vue | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 6c8c0bf6..f3dd5e88 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -41,6 +41,9 @@
     display: flex;
     align-items: center;
     padding: 0.6em 0;
+    border-bottom: 1px solid;
+    border-bottom-color: $fallback--border;
+    border-bottom-color: var(--border, $fallback--border);
 
     &-actions {
       flex: 1;
-- 
cgit v1.2.3-70-g09d2


From fe7766bc618f9a994e2c0a9337deb7cce8b162cf Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 12:12:27 -0400
Subject: replace scope attributes by slot-scope

---
 src/components/follow_requests/follow_requests.vue | 2 +-
 src/components/selectable_list/selectable_list.vue | 2 +-
 src/components/user_profile/user_profile.vue       | 4 ++--
 src/components/user_search/user_search.vue         | 2 +-
 src/components/user_settings/user_settings.vue     | 4 ++--
 src/components/who_to_follow/who_to_follow.vue     | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/follow_requests/follow_requests.vue b/src/components/follow_requests/follow_requests.vue
index 0970713b..8b1e8f94 100644
--- a/src/components/follow_requests/follow_requests.vue
+++ b/src/components/follow_requests/follow_requests.vue
@@ -5,7 +5,7 @@
     </div>
     <div class="panel-body">
       <List :items="requests">
-        <template slot="item" scope="p">
+        <template slot="item" slot-scope="p">
           <FollowRequestCard :user="p.item" />
         </template>
       </List>
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index f3dd5e88..25781d06 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -9,7 +9,7 @@
       </div>
     </div>
     <List :items="items" :getKey="getKey">
-      <template slot="item" scope="p">
+      <template slot="item" slot-scope="p">
         <div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(p.item) }">
           <div class="selectable-list-checkbox-wrapper">
             <Checkbox :checked="isSelected(p.item)" @change="checked => toggle(checked, p.item)" />
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 8d78d2d2..e67231b6 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -15,14 +15,14 @@
       />
       <div :label="$t('user_card.followees')" v-if="followsTabVisible" :disabled="!user.friends_count">
         <FriendList :userId="userId">
-          <template slot="item" scope="p">
+          <template slot="item" slot-scope="p">
             <FollowCard :user="p.item" />
           </template>
         </FriendList>
       </div>
       <div :label="$t('user_card.followers')" v-if="followersTabVisible" :disabled="!user.followers_count">
         <FollowerList :userId="userId">
-          <template slot="item" scope="p">
+          <template slot="item" slot-scope="p">
             <FollowCard :user="p.item" :noFollowsYou="isUs" />
           </template>
         </FollowerList>
diff --git a/src/components/user_search/user_search.vue b/src/components/user_search/user_search.vue
index 06bfc35f..12aa4289 100644
--- a/src/components/user_search/user_search.vue
+++ b/src/components/user_search/user_search.vue
@@ -14,7 +14,7 @@
     </div>
     <div v-else class="panel-body">
       <List :items="users">
-        <template slot="item" scope="p">
+        <template slot="item" slot-scope="p">
           <FollowCard :user="p.item" />
         </template>
       </List>
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 66ce6cea..e6100ced 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -201,7 +201,7 @@
             </Autosuggest>
           </div>
           <BlockList :refresh="true" :getKey="item => item">
-            <template slot="item" scope="p">
+            <template slot="item" slot-scope="p">
               <BlockCard :userId="p.item" />
             </template>
             <template slot="empty">{{$t('settings.no_blocks')}}</template>
@@ -215,7 +215,7 @@
             </Autosuggest>
           </div>
           <MuteList :refresh="true" :getKey="item => item">
-            <template slot="item" scope="p">
+            <template slot="item" slot-scope="p">
               <MuteCard :userId="p.item" />
             </template>
             <template slot="empty">{{$t('settings.no_mutes')}}</template>
diff --git a/src/components/who_to_follow/who_to_follow.vue b/src/components/who_to_follow/who_to_follow.vue
index 4812dd81..2752d519 100644
--- a/src/components/who_to_follow/who_to_follow.vue
+++ b/src/components/who_to_follow/who_to_follow.vue
@@ -5,7 +5,7 @@
     </div>
     <div class="panel-body">
       <List :items="users">
-        <template slot="item" scope="p">
+        <template slot="item" slot-scope="p">
           <FollowCard :user="p.item" />
         </template>
       </List>
-- 
cgit v1.2.3-70-g09d2


From 67919f95a6dd4b27149527d88d81792c779afeba Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 13:31:20 -0400
Subject: make border of list header thicker

---
 src/components/selectable_list/selectable_list.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 25781d06..12be7cf7 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -41,7 +41,7 @@
     display: flex;
     align-items: center;
     padding: 0.6em 0;
-    border-bottom: 1px solid;
+    border-bottom: 2px solid;
     border-bottom-color: $fallback--border;
     border-bottom-color: var(--border, $fallback--border);
 
-- 
cgit v1.2.3-70-g09d2


From ac62e47c70e29bb701642456732169c6eff6e649 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 13:35:30 -0400
Subject: pass down empty slot

---
 src/components/selectable_list/selectable_list.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 12be7cf7..1be89ba1 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -17,6 +17,7 @@
           <slot name="item" :item="p.item" />
         </div>
       </template>
+      <template slot="empty"><slot name="empty" /></template>
     </List>
   </div>
 </template>
-- 
cgit v1.2.3-70-g09d2


From 1afef1037e129cd5f5f2e4a17b970158a2f6fcb9 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 13:35:49 -0400
Subject: show list header only if there are items

---
 src/components/selectable_list/selectable_list.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 1be89ba1..31b8ac9c 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="selectable-list">
-    <div class="selectable-list-header">
+    <div class="selectable-list-header" v-if="items.length > 0">
       <div class="selectable-list-checkbox-wrapper">
         <Checkbox :checked="allSelected" @change="toggleAll" />
       </div>
-- 
cgit v1.2.3-70-g09d2


From 7f6bd538f3e763c19468a2cf7f6f3cf34645ccb0 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 16:20:48 -0400
Subject: ui improvements

---
 src/components/selectable_list/selectable_list.vue |  2 +-
 src/components/user_settings/user_settings.vue     | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 31b8ac9c..ae7315db 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -2,7 +2,7 @@
   <div class="selectable-list">
     <div class="selectable-list-header" v-if="items.length > 0">
       <div class="selectable-list-checkbox-wrapper">
-        <Checkbox :checked="allSelected" @change="toggleAll" />
+        <Checkbox :checked="allSelected" @change="toggleAll">Select All</Checkbox>
       </div>
       <div class="selectable-list-header-actions">
         <slot name="header" :selected="selected" />
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 0f7fd0db..268a0893 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -200,9 +200,9 @@
               <BlockCard slot-scope="row" :userId="row.item"/>
             </Autosuggest>
           </div>
-          <BlockList :refresh="true" :getKey="item => item">
+          <BlockList :refresh="true" :getKey="item => item" class="profile-edit-user-list">
             <template slot="header" slot-scope="p">
-              <div class="bulk-actions-wrapper">
+              <div class="profile-edit-bulk-actions">
                 <ProgressButton class="btn btn-default" v-if="p.selected.length > 0" :click="() => blockUsers(p.selected)">
                   {{ $t('user_card.block') }}
                   <template slot="progress">{{ $t('user_card.block_progress') }}</template>
@@ -224,9 +224,9 @@
               <MuteCard slot-scope="row" :userId="row.item"/>
             </Autosuggest>
           </div>
-          <MuteList :refresh="true" :getKey="item => item">
+          <MuteList :refresh="true" :getKey="item => item" class="profile-edit-user-list">
             <template slot="header" slot-scope="p">
-              <div class="bulk-actions-wrapper">
+              <div class="profile-edit-bulk-actions">
                 <ProgressButton class="btn btn-default" v-if="p.selected.length > 0" :click="() => muteUsers(p.selected)">
                   {{ $t('user_card.mute') }}
                   <template slot="progress">{{ $t('user_card.mute_progress') }}</template>
@@ -303,7 +303,11 @@
     padding: 1em;
   }
 
-  .bulk-actions-wrapper {
+  &-user-list {
+    margin-top: 1.5em;
+  }
+
+  &-bulk-actions {
     text-align: right;
     padding: 0 1em;
     min-height: 28px;
-- 
cgit v1.2.3-70-g09d2


From ac9ddfb1e2948968b6f08c68b689888ed56b9779 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 16:22:54 -0400
Subject: support i18n

---
 src/components/selectable_list/selectable_list.vue | 2 +-
 src/i18n/en.json                                   | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index ae7315db..292704c4 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -2,7 +2,7 @@
   <div class="selectable-list">
     <div class="selectable-list-header" v-if="items.length > 0">
       <div class="selectable-list-checkbox-wrapper">
-        <Checkbox :checked="allSelected" @change="toggleAll">Select All</Checkbox>
+        <Checkbox :checked="allSelected" @change="toggleAll">{{ $t('selectable_list.select_all') }}</Checkbox>
       </div>
       <div class="selectable-list-header-actions">
         <slot name="header" :selected="selected" />
diff --git a/src/i18n/en.json b/src/i18n/en.json
index c71c9036..7dca05e3 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -112,6 +112,9 @@
       "password_confirmation_match": "should be the same as password"
     }
   },
+  "selectable_list": {
+    "select_all": "Select all"
+  },
   "settings": {
     "app_name": "App name",
     "attachmentRadius": "Attachments",
-- 
cgit v1.2.3-70-g09d2


From ecff6acf2d651931e06eebfa8856d940aedb2bee Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 6 Apr 2019 13:45:28 -0400
Subject: support indeterminate checkbox state

---
 src/components/checkbox/checkbox.vue               | 10 ++++++++--
 src/components/selectable_list/selectable_list.js  |  6 ++++++
 src/components/selectable_list/selectable_list.vue |  2 +-
 3 files changed, 15 insertions(+), 3 deletions(-)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 8f32e96b..4152b049 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -1,6 +1,6 @@
 <template>
   <label class="checkbox">
-    <input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)">
+    <input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)" :indeterminate.prop="indeterminate">
     <i class="checkbox-indicator" />
     <span v-if="!!$slots.default"><slot></slot></span>
   </label>
@@ -12,7 +12,7 @@ export default {
     prop: 'checked',
     event: 'change'
   },
-  props: ['checked']
+  props: ['checked', 'indeterminate']
 }
 </script>
 
@@ -57,6 +57,12 @@ export default {
       color: var(--text, $fallback--text);
     }
 
+    &:indeterminate + .checkbox-indicator::before {
+      content: '–';
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
+
     &:disabled + .checkbox-indicator::before {
       opacity: .5;
     }
diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index b60399ec..b8bd4f75 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -24,6 +24,12 @@ const SelectableList = {
   computed: {
     allSelected () {
       return !this.items.find(item => !this.isSelected(item))
+    },
+    noneSelected () {
+      return !this.items.find(item => this.isSelected(item))
+    },
+    someSelected () {
+      return !this.allSelected && !this.noneSelected
     }
   },
   methods: {
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 292704c4..5b8693c4 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -2,7 +2,7 @@
   <div class="selectable-list">
     <div class="selectable-list-header" v-if="items.length > 0">
       <div class="selectable-list-checkbox-wrapper">
-        <Checkbox :checked="allSelected" @change="toggleAll">{{ $t('selectable_list.select_all') }}</Checkbox>
+        <Checkbox :checked="allSelected" @change="toggleAll" :indeterminate="someSelected">{{ $t('selectable_list.select_all') }}</Checkbox>
       </div>
       <div class="selectable-list-header-actions">
         <slot name="header" :selected="selected" />
-- 
cgit v1.2.3-70-g09d2


From 10ecc2c81695e343b41a0f6b0ca4f51b715f6cdc Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 6 Apr 2019 14:00:39 -0400
Subject: make sure to use filtered selected keys

---
 src/components/selectable_list/selectable_list.js  | 14 ++++++++++----
 src/components/selectable_list/selectable_list.vue |  2 +-
 2 files changed, 11 insertions(+), 5 deletions(-)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index b8bd4f75..10980d46 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -22,11 +22,17 @@ const SelectableList = {
     }
   },
   computed: {
+    allKeys () {
+      return this.items.map(this.getKey)
+    },
+    filteredSelected () {
+      return this.allKeys.filter(key => this.selected.indexOf(key) !== -1)
+    },
     allSelected () {
-      return !this.items.find(item => !this.isSelected(item))
+      return this.filteredSelected.length === this.items.length
     },
     noneSelected () {
-      return !this.items.find(item => this.isSelected(item))
+      return this.filteredSelected.length === 0
     },
     someSelected () {
       return !this.allSelected && !this.noneSelected
@@ -34,7 +40,7 @@ const SelectableList = {
   },
   methods: {
     isSelected (item) {
-      return this.selected.indexOf(this.getKey(item)) !== -1
+      return this.filteredSelected.indexOf(this.getKey(item)) !== -1
     },
     toggle (checked, item) {
       const key = this.getKey(item)
@@ -49,7 +55,7 @@ const SelectableList = {
     },
     toggleAll (value) {
       if (value) {
-        this.selected = this.items.map(this.getKey)
+        this.selected = this.allKeys.slice(0)
       } else {
         this.selected = []
       }
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 5b8693c4..80306594 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -5,7 +5,7 @@
         <Checkbox :checked="allSelected" @change="toggleAll" :indeterminate="someSelected">{{ $t('selectable_list.select_all') }}</Checkbox>
       </div>
       <div class="selectable-list-header-actions">
-        <slot name="header" :selected="selected" />
+        <slot name="header" :selected="filteredSelected" />
       </div>
     </div>
     <List :items="items" :getKey="getKey">
-- 
cgit v1.2.3-70-g09d2


From e67fecff0a5e8c0034b860b8a7a625e35c03b5a3 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 11 Apr 2019 22:15:58 -0400
Subject: code readability

---
 src/components/follow_requests/follow_requests.vue |  4 ++--
 src/components/selectable_list/selectable_list.vue |  8 ++++----
 src/components/user_profile/user_profile.vue       |  8 ++++----
 src/components/user_search/user_search.vue         |  4 ++--
 src/components/user_settings/user_settings.vue     | 16 ++++++++--------
 src/components/who_to_follow/who_to_follow.vue     |  4 ++--
 6 files changed, 22 insertions(+), 22 deletions(-)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/follow_requests/follow_requests.vue b/src/components/follow_requests/follow_requests.vue
index 8b1e8f94..d5e45b9d 100644
--- a/src/components/follow_requests/follow_requests.vue
+++ b/src/components/follow_requests/follow_requests.vue
@@ -5,8 +5,8 @@
     </div>
     <div class="panel-body">
       <List :items="requests">
-        <template slot="item" slot-scope="p">
-          <FollowRequestCard :user="p.item" />
+        <template slot="item" slot-scope="{item}">
+          <FollowRequestCard :user="item" />
         </template>
       </List>
     </div>
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 80306594..ba1e5266 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -9,12 +9,12 @@
       </div>
     </div>
     <List :items="items" :getKey="getKey">
-      <template slot="item" slot-scope="p">
-        <div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(p.item) }">
+      <template slot="item" slot-scope="{item}">
+        <div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(item) }">
           <div class="selectable-list-checkbox-wrapper">
-            <Checkbox :checked="isSelected(p.item)" @change="checked => toggle(checked, p.item)" />
+            <Checkbox :checked="isSelected(item)" @change="checked => toggle(checked, item)" />
           </div>
-          <slot name="item" :item="p.item" />
+          <slot name="item" :item="item" />
         </div>
       </template>
       <template slot="empty"><slot name="empty" /></template>
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index e67231b6..71c625b7 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -15,15 +15,15 @@
       />
       <div :label="$t('user_card.followees')" v-if="followsTabVisible" :disabled="!user.friends_count">
         <FriendList :userId="userId">
-          <template slot="item" slot-scope="p">
-            <FollowCard :user="p.item" />
+          <template slot="item" slot-scope="{item}">
+            <FollowCard :user="item" />
           </template>
         </FriendList>
       </div>
       <div :label="$t('user_card.followers')" v-if="followersTabVisible" :disabled="!user.followers_count">
         <FollowerList :userId="userId">
-          <template slot="item" slot-scope="p">
-            <FollowCard :user="p.item" :noFollowsYou="isUs" />
+          <template slot="item" slot-scope="{item}">
+            <FollowCard :user="item" :noFollowsYou="isUs" />
           </template>
         </FollowerList>
       </div>
diff --git a/src/components/user_search/user_search.vue b/src/components/user_search/user_search.vue
index 12aa4289..c0636e43 100644
--- a/src/components/user_search/user_search.vue
+++ b/src/components/user_search/user_search.vue
@@ -14,8 +14,8 @@
     </div>
     <div v-else class="panel-body">
       <List :items="users">
-        <template slot="item" slot-scope="p">
-          <FollowCard :user="p.item" />
+        <template slot="item" slot-scope="{item}">
+          <FollowCard :user="item" />
         </template>
       </List>
     </div>
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 0dcae0d7..7e8e45fd 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -201,19 +201,19 @@
             </Autosuggest>
           </div>
           <BlockList :refresh="true" :getKey="identity" class="profile-edit-user-list">
-            <template slot="header" slot-scope="p">
+            <template slot="header" slot-scope="{selected}">
               <div class="profile-edit-bulk-actions">
-                <ProgressButton class="btn btn-default" v-if="p.selected.length > 0" :click="() => blockUsers(p.selected)">
+                <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => blockUsers(selected)">
                   {{ $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" :click="() => unblockUsers(p.selected)">
+                <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => unblockUsers(selected)">
                   {{ $t('user_card.unblock') }}
                   <template slot="progress">{{ $t('user_card.unblock_progress') }}</template>
                 </ProgressButton>
               </div>
             </template>
-            <template slot="item" slot-scope="p"><BlockCard :userId="p.item" /></template>
+            <template slot="item" slot-scope="{item}"><BlockCard :userId="item" /></template>
             <template slot="empty">{{$t('settings.no_blocks')}}</template>
           </BlockList>
         </div>
@@ -225,19 +225,19 @@
             </Autosuggest>
           </div>
           <MuteList :refresh="true" :getKey="identity" class="profile-edit-user-list">
-            <template slot="header" slot-scope="p">
+            <template slot="header" slot-scope="{selected}">
               <div class="profile-edit-bulk-actions">
-                <ProgressButton class="btn btn-default" v-if="p.selected.length > 0" :click="() => muteUsers(p.selected)">
+                <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => muteUsers(selected)">
                   {{ $t('user_card.mute') }}
                   <template slot="progress">{{ $t('user_card.mute_progress') }}</template>
                 </ProgressButton>
-                <ProgressButton class="btn btn-default" v-if="p.selected.length > 0" :click="() => unmuteUsers(p.selected)">
+                <ProgressButton class="btn btn-default" v-if="selected.length > 0" :click="() => unmuteUsers(selected)">
                   {{ $t('user_card.unmute') }}
                   <template slot="progress">{{ $t('user_card.unmute_progress') }}</template>
                 </ProgressButton>
               </div>
             </template>
-            <template slot="item" slot-scope="p"><MuteCard :userId="p.item" /></template>
+            <template slot="item" slot-scope="{item}"><MuteCard :userId="item" /></template>
             <template slot="empty">{{$t('settings.no_mutes')}}</template>
           </MuteList>
         </div>
diff --git a/src/components/who_to_follow/who_to_follow.vue b/src/components/who_to_follow/who_to_follow.vue
index 2752d519..412a2fbe 100644
--- a/src/components/who_to_follow/who_to_follow.vue
+++ b/src/components/who_to_follow/who_to_follow.vue
@@ -5,8 +5,8 @@
     </div>
     <div class="panel-body">
       <List :items="users">
-        <template slot="item" slot-scope="p">
-          <FollowCard :user="p.item" />
+        <template slot="item" slot-scope="{item}">
+          <FollowCard :user="item" />
         </template>
       </List>
     </div>
-- 
cgit v1.2.3-70-g09d2


From b1f8221a0af1d7eb37e5a5305e2ca6e9d40a268f Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 29 Apr 2019 13:20:03 -0400
Subject: show ellipsis for long user name and screen name

---
 src/components/basic_user_card/basic_user_card.vue | 15 ++++++++-------
 src/components/selectable_list/selectable_list.vue |  4 ++++
 2 files changed, 12 insertions(+), 7 deletions(-)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index 48de6678..25f1fb2a 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -44,14 +44,15 @@
       width: 16px;
       vertical-align: middle;
     }
+  }
 
-    &-value {
-      display: inline-block;
-      max-width: 100%;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
+  &-user-name-value,
+  &-screen-name {
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   &-expanded-content {
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index ba1e5266..81305a5e 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -31,6 +31,10 @@
   &-item-inner {
     display: flex;
     align-items: center;
+
+    & > * {
+      min-width: 0;
+    }
   }
 
   &-item-selected-inner {
-- 
cgit v1.2.3-70-g09d2


From 5b16e368285a3e61f8d200c06e6109ec39819314 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 29 Apr 2019 13:57:44 -0400
Subject: remove &

---
 src/components/selectable_list/selectable_list.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/selectable_list/selectable_list.vue')

diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 81305a5e..3f16c921 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -32,7 +32,7 @@
     display: flex;
     align-items: center;
 
-    & > * {
+    > * {
       min-width: 0;
     }
   }
-- 
cgit v1.2.3-70-g09d2

