From 1cec2b696952ef2c472219329961bc102ed315df Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 22:17:42 -0400
Subject: use reusable List vue component instead of withList hoc

Using slot is the preferred way in vue
---
 src/components/list/list.vue | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/components/list/list.vue

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

diff --git a/src/components/list/list.vue b/src/components/list/list.vue
new file mode 100644
index 00000000..f361e3b1
--- /dev/null
+++ b/src/components/list/list.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="list">
+    <slot name="item" v-for="item in items" :item="item" />
+    <div class="list-empty-content faint" v-if="items.length === 0">
+      <slot name="empty" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.list {
+  &-empty-content {
+    text-align: center;
+    padding: 10px;
+  }
+}
+</style>
-- 
cgit v1.2.3-70-g09d2


From d806038ad3e78314610e1d0b496c19e0ccb40a0f Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 23:45:45 -0400
Subject: add border-bottom style to the list component as well

---
 src/components/list/list.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

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

diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index f361e3b1..d8c9f5a3 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="list">
-    <slot name="item" v-for="item in items" :item="item" />
+    <div v-for="item in items" class="list-item" :key="getKey(item)">
+      <slot name="item" :item="item" />
+    </div>
     <div class="list-empty-content faint" v-if="items.length === 0">
       <slot name="empty" />
     </div>
@@ -13,13 +15,26 @@ export default {
     items: {
       type: Array,
       default: () => []
+    },
+    getKey: {
+      type: Function,
+      default: item => item
     }
   }
 }
 </script>
 
 <style lang="scss">
+@import '../../_variables.scss';
+
 .list {
+  &-item {
+    display: flex;
+    border-bottom: 1px solid;
+    border-bottom-color: $fallback--border;
+    border-bottom-color: var(--border, $fallback--border);
+  }
+
   &-empty-content {
     text-align: center;
     padding: 10px;
-- 
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/list/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 32035217b8e04b0f178409f0f1f49d54296ce80c Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 00:00:21 -0400
Subject: clean up

---
 src/components/list/list.vue                      |  2 +-
 src/components/selectable_list/selectable_list.js | 11 +----------
 src/components/user_profile/user_profile.vue      |  4 ++--
 src/components/user_settings/user_settings.vue    |  8 ++++----
 4 files changed, 8 insertions(+), 17 deletions(-)

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

diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index 1159898d..7d62283a 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -18,7 +18,7 @@ export default {
     },
     getKey: {
       type: Function,
-      default: item => item
+      default: item => item.id
     }
   }
 }
diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index 1fdd5a67..7856d725 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -6,16 +6,7 @@ const SelectableList = {
     List,
     Checkbox
   },
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    getKey: {
-      type: Function,
-      default: item => item
-    }
-  },
+  props: List.props,
   data () {
     return {
       selected: []
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 39f3c381..8d78d2d2 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -16,14 +16,14 @@
       <div :label="$t('user_card.followees')" v-if="followsTabVisible" :disabled="!user.friends_count">
         <FriendList :userId="userId">
           <template slot="item" scope="p">
-            <FollowCard :key="p.item.id" :user="p.item" />
+            <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">
-            <FollowCard :key="p.item.id" :user="p.item" :noFollowsYou="isUs" />
+            <FollowCard :user="p.item" :noFollowsYou="isUs" />
           </template>
         </FollowerList>
       </div>
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 741fbe3f..66ce6cea 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">
+          <BlockList :refresh="true" :getKey="item => item">
             <template slot="item" scope="p">
-              <BlockCard :key="p.item" :userId="p.item" />
+              <BlockCard :userId="p.item" />
             </template>
             <template slot="empty">{{$t('settings.no_blocks')}}</template>
           </BlockList>
@@ -214,9 +214,9 @@
               <MuteCard slot-scope="row" :userId="row.item"/>
             </Autosuggest>
           </div>
-          <MuteList :refresh="true">
+          <MuteList :refresh="true" :getKey="item => item">
             <template slot="item" scope="p">
-              <MuteCard :key="p.item" :userId="p.item" />
+              <MuteCard :userId="p.item" />
             </template>
             <template slot="empty">{{$t('settings.no_mutes')}}</template>
           </MuteList>
-- 
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/list/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 f066ccd28badfe035a4fa2c4b8e195a6edf0bf0d Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 03:03:47 -0400
Subject: show empty slot only if it has content

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

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

diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index e63fea63..bf5a0499 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -3,7 +3,7 @@
     <div v-for="item in items" class="list-item" :key="getKey(item)">
       <slot name="item" :item="item" :keyVal="getKey(item)" />
     </div>
-    <div class="list-empty-content faint" v-if="items.length === 0">
+    <div class="list-empty-content faint" v-if="items.length === 0 && !!$slots.empty">
       <slot name="empty" />
     </div>
   </div>
-- 
cgit v1.2.3-70-g09d2


From 83faa96f1b7405be2fb17b717c72c10ff8a65b59 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 4 Apr 2019 03:18:29 -0400
Subject: remove border-bottom of the last list item

---
 src/components/list/list.vue                | 2 +-
 src/hocs/with_load_more/with_load_more.scss | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

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

diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index bf5a0499..9d4beb21 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -28,7 +28,7 @@ export default {
 @import '../../_variables.scss';
 
 .list {
-  &-item {
+  &-item:not(:last-child) {
     border-bottom: 1px solid;
     border-bottom-color: $fallback--border;
     border-bottom-color: var(--border, $fallback--border);
diff --git a/src/hocs/with_load_more/with_load_more.scss b/src/hocs/with_load_more/with_load_more.scss
index 1a0a9c40..4cefe2be 100644
--- a/src/hocs/with_load_more/with_load_more.scss
+++ b/src/hocs/with_load_more/with_load_more.scss
@@ -1,10 +1,16 @@
+
+@import '../../_variables.scss';
+
 .with-load-more {
   &-footer {
     padding: 10px;
     text-align: center;
+    border-top: 1px solid;
+    border-top-color: $fallback--border;
+    border-top-color: var(--border, $fallback--border);
 
     .error {
       font-size: 14px;
     }
   }
-}
\ No newline at end of file
+}
-- 
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/list/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

