1 files changed, 56 insertions, 0 deletions
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
new file mode 100644
index 00000000000..6a5a39099bd
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
@@ -0,0 +1,56 @@
+<script>
+import ModalStore from '../../stores/modal_store';
+
+export default {
+  data() {
+    return {
+      modal: ModalStore.store,
+      state: gl.issueBoards.BoardsStore.state,
+    };
+  },
+  computed: {
+    selected() {
+      return this.modal.selectedList || this.state.lists[1];
+    },
+  },
+  destroyed() {
+    this.modal.selectedList = null;
+  },
+};
+</script>
+<template>
+  <div class="dropdown inline">
+    <button
+      class="dropdown-menu-toggle"
+      type="button"
+      data-toggle="dropdown"
+      aria-expanded="false">
+      <span
+        :style="{ backgroundColor: selected.label.color }"
+        class="dropdown-label-box">
+      </span>
+      {{ selected.title }}
+      <i class="fa fa-chevron-down"></i>
+    </button>
+    <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
+      <ul>
+        <li
+          v-for="(list, i) in state.lists"
+          v-if="list.type == 'label'"
+          :key="i">
+          <a
+            :class="{ 'is-active': list.id == selected.id }"
+            href="#"
+            role="button"
+            @click.prevent="modal.selectedList = list">
+            <span
+              :style="{ backgroundColor: list.label.color }"
+              class="dropdown-label-box">
+            </span>
+            {{ list.title }}
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>