clean up styles

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

@@ -18,7 +18,7 @@
         v-if="!readonly"
         class="append-bottom-20"
       >
-        <label class="label-light" for="board-new-name">
+        <label class="form-section-title label-light" for="board-new-name">
           Board name
         </label>
         <input
@@ -32,7 +32,7 @@
         v-if="canAdminBoard"
         class="media append-bottom-10"
       >
-        <label class="label-light media-body">
+        <label class="form-section-title label-light media-body">
           Board scope
         </label>
         <button
@@ -55,15 +55,16 @@
           defaultText="Any milestone"
           :canEdit="canAdminBoard"
         >
-          <input
-            type="hidden"
-            id="board-milestone"
-            v-model.number="board.milestone_id"
+          <div
+            v-if="board.milestone"
+            slot="currentValue"
           >
+            {{ board.milestone.title }}
+          </div>
           <board-milestone-select
             :board="board"
             :milestone-path="milestonePath"
-            :select-milestone="selectMilestone">
+            v-model="board.milestone">
           </board-milestone-select>
         </form-block>
 

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

-<template>
-  <ul
-    ref="list"
-    class="dropdown-menu"
-  >
-    <slot name="items"></slot>
-  </ul>
-</template>
-
-<script>
-import DropLab from '~/droplab/drop_lab';
-
-export default {
-  props: {
-  },
-  data() {
-    return {
-      loading: false,
-    };
-  },
-  mounted() {
-    this.droplab = new DropLab();
-    this.droplab.init(this.$refs.trigger, this.$refs.list);
-  },
-};
-</script>

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

 <template>
-  <div class="board-inner-container">
+  <div class="list-item">
     <div class="media">
-      <label class="media-body">{{ title }}</label>
+      <label class="label-light media-body">{{ title }}</label>
       <a
         v-if="canEdit"
+        class="edit-link"
         href="#"
         @click.prevent="toggleEditing"
       >
         Edit
       </a>
     </div>
-    <div class="droplab-dropdown">
-      <div v-if="editing">
-        <input
-          v-if="fieldName"
-          :name="fieldName"
-        >
-        <slot></slot>
-      </div>
-      <div v-else>
+    <div
+      v-if="editing"
+      class="dropdown open"
+    >
+      <input
+        v-if="fieldName"
+        :name="fieldName"
+      >
+      <slot></slot>
+    </div>
+    <div :class="{ invisible: editing }">
+      <slot name="currentValue">
         {{ defaultText }}
-      </div>
+      </slot>
     </div>
   </div>
 </template>

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

 <template>
-  <div>
-    <gl-dropdown>
-      <template slot="items">
-        <li
-          v-for="milestone in extraMilestones"
-          :key="milestone.id"
-        >
-          <a
-            href="#"
-            @click.prevent.stop="selectMilestone(milestone)">
-            <i
-              class="fa fa-check"
-              v-if="false"></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="false"></i>
-            {{ milestone.title }}
-          </a>
-        </li>
-      </template>
-    </gl-dropdown>
+  <div class="dropdown-menu dropdown-menu-wide">
+    <div class="dropdown-input">
+      <input
+        class="dropdown-input-field"
+        type="search"
+        placeholder="Search milestones">
+      <i aria-hidden="true" data-hidden="true" class="fa fa-search dropdown-input-search"></i>
+    </div>
+    <ul
+      ref="list"
+    >
+      <li
+        v-for="milestone in extraMilestones"
+        :key="milestone.id"
+      >
+        <a
+          href="#"
+          @click.prevent.stop="selectMilestone(milestone)">
+          <i
+            class="fa fa-check"
+            v-if="false"></i>
+          {{ milestone.title }}
+        </a>
+      </li>
+      <li class="divider"></li>
+      <li v-if="loading">
+        <loading-icon />
+      </li>
+      <li
+        v-else
+        v-for="milestone in milestones"
+        :key="milestone.id"
+      >
+        <a
+          href="#"
+          @click.prevent.stop="selectMilestone(milestone)">
+          <i
+            class="fa fa-check"
+            v-if="false"></i>
+          {{ milestone.title }}
+        </a>
+      </li>
+    </ul>
   </div>
 </template>
 
 <script>
 /* global BoardService */
 
-import DropLab from '~/droplab/drop_lab';
-import GlDropdown from './dropdown.vue';
+import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 import extraMilestones from '../mixins/extra_milestones';
 
 export default {
@@ -51,23 +61,29 @@ export default {
       type: String,
       required: true,
     },
-    selectMilestone: {
-      type: Function,
-      required: true,
+    value: {
+      type: String,
+      required: false,
     },
   },
+  components: {
+    loadingIcon,
+  },
   data() {
     return {
-      loading: false,
+      loading: true,
       milestones: [],
       extraMilestones,
     };
   },
-  components: {
-    GlDropdown,
-  },
   mounted() {
-    BoardService.loadMilestones.call(this);
+    BoardService.loadMilestones.call(this).then(() => this.loading = false);
+  },
+  methods: {
+    selectMilestone(milestone) {
+      this.board.milestone_id = milestone.id;
+      this.$emit('input', milestone);
+    },
   },
 };
 </script>

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

@@ -42,51 +42,58 @@ export default {
 </script>
 
 <template>
-<div
-  class="modal popup-dialog"
-  role="dialog"
-  tabindex="-1"
->
+<div class="modal-open">
   <div
-    class="modal-dialog modal-lg"
-    role="document"
+    class="modal popup-dialog"
+    role="dialog"
+    tabindex="-1"
   >
-    <div class="modal-content">
-      <div class="modal-header">
-        <slot name="header">
-          <h4 class="modal-title pull-left">{{this.title}}</h4>
-          <button
-            type="button"
-            class="close pull-right"
-            @click="close"
-            aria-label="Close"
-          >
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </slot>
-      </div>
-      <div class="modal-body">
-        <slot>
-          <p>{{this.body}}</p>
+    <div
+      class="modal-dialog modal-md"
+      role="document"
+    >
+      <div class="modal-content">
+        <div class="modal-header">
+          <slot name="header">
+            <h4 class="modal-title pull-left">{{this.title}}</h4>
+            <button
+              type="button"
+              class="close pull-right"
+              @click="close"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </slot>
+        </div>
+        <div class="modal-body">
+          <slot>
+            <p>{{this.body}}</p>
+          </slot>
+        </div>
+        <slot name="footer">
+          <div class="modal-footer">
+            <button type="button"
+              class="btn pull-left"
+              :class="btnKindClass"
+              @click="emitSubmit(true)">
+                {{primaryButtonLabel}}
+            </button>
+            <button
+              type="button"
+              class="btn btn-default pull-right"
+              @click="close">
+                Cancel
+            </button>
+          </div>
         </slot>
       </div>
-      <slot name="footer">
-        <div class="modal-footer">
-          <button type="button"
-            class="btn pull-left"
-            :class="btnKindClass"
-            @click="emitSubmit(true)">
-              {{primaryButtonLabel}}
-          </button>
-          <button
-            type="button"
-            class="btn btn-default pull-right"
-            @click="close">
-              Cancel
-          </button>
-        </div>
-      </slot>
     </div>
   </div>
+
+  <div
+    class="modal-backdrop fade in"
+    @click="close"
+  ></div>
 </div>
 </template>

app/assets/stylesheets/framework/dropdowns.scss

@@ -291,6 +291,10 @@
   }
 }
 
+.dropdown-menu-wide {
+  width: 100%;
+}
+
 .droplab-dropdown {
   .dropdown-toggle > i {
     pointer-events: none;

app/assets/stylesheets/framework/lists.scss

@@ -390,3 +390,8 @@ ul.indent-list {
     text-align: center;
   }
 }
+
+.list-item {
+  padding: $gl-padding 0;
+  border-bottom: solid 1px $border-color;
+}

app/assets/stylesheets/framework/modal.scss

@@ -36,6 +36,10 @@ body.modal-open {
   }
 }
 
+.modal-md {
+  max-width: 440px;
+}
+
 .modal-dialog {
   // TODO: this needs top and bottom padding (inside content area)
   max-height: calc(100vh - #{$new-navbar-height});
@@ -53,12 +57,9 @@ body.modal-open {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: $black-transparent;
-  z-index: 2100;
 
   @media (min-width: $screen-md-min) {
     .modal-dialog {
-      width: 600px;
       margin-top: $new-navbar-height;
     }
   }

app/assets/stylesheets/framework/typography.scss

@@ -305,6 +305,10 @@ h6 {
   font-weight: $gl-font-weight-bold;
 }
 
+.edit-link {
+  color: $gl-text-color;
+}
+
 .light-header {
   font-weight: $gl-font-weight-bold;
 }

app/assets/stylesheets/pages/boards.scss

@@ -462,6 +462,10 @@
   white-space: normal;
 }
 
+.form-section-title {
+  font-size: 16px;
+}
+
 .board-delete-btns {
   padding-top: 12px;
   border-top: 1px solid $border-color;