add header to selectable-list component

1 files changed, 24 insertions, 10 deletions

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;
   }
 }