clean up modal styles

app/assets/javascripts/boards/components/board_new_form.vue

 <template>
-  <popup-dialog :title="title" >
+  <popup-dialog :title="title">
     <p v-if="currentPage === 'delete'">
       Are you sure you want to delete this board?
     </p>
@@ -7,7 +7,7 @@
       v-else
       @submit="submit"
     >
-      <div>
+      <div class="append-bottom-20">
         <label class="label-light" for="board-new-name">
           Board name
         </label>
@@ -18,19 +18,19 @@
           v-model="board.name"
         >
       </div>
-      <div>
+      <div class="media append-bottom-10">
+        <label class="label-light media-body align-self-sm-center">
+          Board scope
+        </label>
         <button
           type="button"
-          class="btn pull-right"
-          @click="expand = !expand">
+          class="btn"
+          @click="expand = !expand"
+        >
           Expand
         </button>
-        <h3>
-          Board scope
-        </h3>
       </div>
-      <transition name="fade">
-        <div v-show="expand">
+      <div v-if="expand">
         <p>
           Board scope affects which issues are displayed for anyone who visits this board
         </p>
@@ -39,14 +39,14 @@
           <input
             type="hidden"
             id="board-milestone"
-              v-model.number="board.milestone_id">
+            v-model.number="board.milestone_id"
+          >
           <board-milestone-select
             :board="board"
             :milestone-path="milestonePath"
             :select-milestone="selectMilestone">
           </board-milestone-select>
       </div>
-      </transition>
     </form>
     <template slot="footer">
       <!-- TODO: handle Delete button with btn-danger class and method delete to link_to current_board_path(board) -->
@@ -72,7 +72,7 @@
 
 import Vue from 'vue';
 import PopupDialog from '~/vue_shared/components/popup_dialog.vue';
-import boardMilestoneSelect from './milestone_select';
+import BoardMilestoneSelect from './milestone_select.vue';
 
 window.gl = window.gl || {};
 window.gl.issueBoards = window.gl.issueBoards || {};
@@ -101,7 +101,7 @@ export default Vue.extend({
     };
   },
   components: {
-    boardMilestoneSelect,
+    BoardMilestoneSelect,
     PopupDialog,
   },
   mounted() {

app/assets/javascripts/boards/components/milestone_select.js

-/* global BoardService, MilestoneSelect */
-
-import extraMilestones from '../mixins/extra_milestones';
-
-export default {
-  props: {
-    board: {
-      type: Object,
-      required: true,
-    },
-    milestonePath: {
-      type: String,
-      required: true,
-    },
-    selectMilestone: {
-      type: Function,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      loading: false,
-      milestones: [],
-      extraMilestones,
-    };
-  },
-  mounted() {
-    BoardService.loadMilestones.call(this);
-    MilestoneSelect();
-  },
-  template: `
-    <div class="dropdown">
-      <button data-toggle="dropdown" class="dropdown-menu-toggle">{{ board.milestone ? board.milestone.title : 'Milestone' }}</button>
-      <div class="dropdown-menu">
-        <div class="dropdown-content">
-          <div class="text-center">
-            <i
-              v-if="loading"
-              class="fa fa-spinner fa-spin"></i>
-          </div>
-          <ul
-            class="board-milestone-list"
-            v-if="!loading">
-            <li v-for="milestone in extraMilestones">
-              <a
-                href="#"
-                @click.prevent.stop="selectMilestone(milestone)">
-                <i
-                  class="fa fa-check"
-                  v-if="board.milestone_id === milestone.id"></i>
-                {{ milestone.title }}
-              </a>
-            </li>
-            <li class="divider"></li>
-            <li v-for="milestone in milestones">
-              <a
-                href="#"
-                @click.prevent.stop="selectMilestone(milestone)">
-                <i
-                  class="fa fa-check"
-                  v-if="board.milestone_id === milestone.id"></i>
-                {{ milestone.title }}
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  `,
-};

app/assets/javascripts/boards/components/milestone_select.vue

+<template>
+  <div class="droplab-dropdown">
+    <div class="media">
+      <label class="media-body">Milestone</label>
+      <a href="#" data-dropdown-trigger="#milestone-dropdown" ref="trigger">
+        Edit
+      </a>
+    </div>
+    <div>
+      {{ board.milestone ? board.milestone.title : 'Milestone' }}
+      <ul
+        ref="list"
+        class="dropdown-menu"
+      >
+        <li
+          v-for="milestone in extraMilestones"
+          :key="milestone.id"
+        >
+          <a
+            href="#"
+            @click.prevent.stop="selectMilestone(milestone)">
+            <i
+              class="fa fa-check"
+              v-if="board.milestone_id === milestone.id"></i>
+            {{ milestone.title }}
+          </a>
+        </li>
+        <li class="divider"></li>
+        <li
+          v-for="milestone in milestones"
+          :key="milestone.id"
+        >
+          <a
+            href="#"
+            @click.prevent.stop="selectMilestone(milestone)">
+            <i
+              class="fa fa-check"
+              v-if="board.milestone_id === milestone.id"></i>
+            {{ milestone.title }}
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+/* global BoardService */
+
+import DropLab from '~/droplab/drop_lab';
+import extraMilestones from '../mixins/extra_milestones';
+
+export default {
+  props: {
+    board: {
+      type: Object,
+      required: true,
+    },
+    milestonePath: {
+      type: String,
+      required: true,
+    },
+    selectMilestone: {
+      type: Function,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      milestones: [],
+      extraMilestones,
+    };
+  },
+  mounted() {
+    BoardService.loadMilestones.call(this);
+
+    this.droplab = new DropLab();
+    this.droplab.init(this.$refs.trigger, this.$refs.list);
+  },
+};
+</script>

app/assets/javascripts/vue_shared/components/popup_dialog.vue

@@ -16,11 +16,6 @@ export default {
       required: false,
       default: 'primary',
     },
-    closeButtonLabel: {
-      type: String,
-      required: false,
-      default: 'Cancel',
-    },
     primaryButtonLabel: {
       type: String,
       required: false,
@@ -50,15 +45,20 @@ export default {
 <div
   class="modal popup-dialog"
   role="dialog"
-  tabindex="-1">
-  <div class="modal-dialog" role="document">
+  tabindex="-1"
+>
+  <div
+    class="modal-dialog"
+    role="document"
+  >
     <div class="modal-content">
       <div class="modal-header">
         <slot name="header">
           <button type="button"
             class="close"
             @click="close"
-            aria-label="Close">
+            aria-label="Close"
+          >
             <span aria-hidden="true">&times;</span>
           </button>
           <h4 class="modal-title">{{this.title}}</h4>
@@ -75,7 +75,7 @@ export default {
             type="button"
             class="btn btn-default"
             @click="emitSubmit(false)">
-              {{closeButtonLabel}}
+              Cancel
           </button>
           <button type="button"
             class="btn"

app/assets/stylesheets/framework.scss

@@ -29,7 +29,6 @@
 @import "framework/media_object";
 @import "framework/mobile";
 @import "framework/modal";
-@import "framework/media_object";
 @import "framework/nav";
 @import "framework/pagination";
 @import "framework/panels";