Styling updates

Fixes issue with dropdown toggle not changing

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

 /* global Vue */
 /* eslint-disable */
-//= require ./milestone_select
+const boardMilestoneSelect = require('./milestone_select');
 (() => {
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
@@ -19,6 +19,8 @@
         board: {
           id: false,
           name: '',
+          milestone: {},
+          milestone_id: '',
         },
         currentBoard: Store.state.currentBoard,
         currentPage: Store.state.currentPage,
@@ -27,7 +29,7 @@
       };
     },
     components: {
-      'board-milestone-select': gl.issueBoards.BoardMilestoneSelect,
+      boardMilestoneSelect,
     },
     mounted() {
       if (this.currentBoard && Object.keys(this.currentBoard).length && this.currentPage !== 'new') {
@@ -43,11 +45,7 @@
         return 'Save';
       },
       milestoneToggleText() {
-        if (this.board.milestone_id) {
-          return this.board.milestone.title;
-        }
-
-        return 'Milestone';
+        return this.board.milestone.title || 'Milestone';
       },
       submitDisabled() {
         if (this.currentPage !== 'milestone') {

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

@@ -91,6 +91,7 @@ require('./board_new_form');
     },
     created() {
       const $milestoneDropdown = $('.dropdown-menu-milestone');
+      console.log(this.currentBoard);
 
       this.state.currentBoard = this.currentBoard;
 

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

 /* global Vue */
-(() => {
-  gl.issueBoards.BoardMilestoneSelect = Vue.extend({
-    props: {
-      board: {
-        type: Object,
-        required: true,
-      },
-      milestonePath: {
-        type: String,
-        required: true,
-      },
-      selectMilestone: {
-        type: Function,
-        required: true,
-      },
+module.exports = Vue.extend({
+  props: {
+    board: {
+      type: Object,
+      required: true,
     },
-    data() {
-      return {
-        loading: false,
-        milestones: [],
-      };
+    milestonePath: {
+      type: String,
+      required: true,
     },
-    mounted() {
-      this.loading = true;
-      this.$http.get(this.milestonePath)
-        .then((res) => {
-          this.milestones = res.json();
-          this.loading = false;
-        });
+    selectMilestone: {
+      type: Function,
+      required: true,
     },
-    template: `
-      <div>
-        <div class="text-center">
-          <i
-            v-if="loading"
-            class="fa fa-spinner fa-spin"></i>
-        </div>
-        <ul v-if="!loading">
-          <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>
+  },
+  data() {
+    return {
+      loading: false,
+      milestones: [],
+    };
+  },
+  mounted() {
+    this.loading = true;
+    this.$http.get(this.milestonePath)
+      .then((res) => {
+        this.milestones = res.json();
+        this.loading = false;
+      });
+  },
+  template: `
+    <div>
+      <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 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>
+  `,
+});

app/assets/stylesheets/pages/boards.scss

@@ -554,3 +554,25 @@
   margin-right: 10px;
   border-right: 1px solid $white-dark;
 }
+
+.board-milestone-list {
+  > li {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  a {
+    padding-left: 25px;
+  }
+
+  .fa-check {
+    margin-left: -18px;
+  }
+}
+
+.board-inner-milestone-dropdown {
+  .dropdown-menu {
+    top: 60px;
+    min-width: 100%;
+  }
+}

app/views/projects/boards/components/_form.html.haml

@@ -9,7 +9,7 @@
       %input.form-control{ type: "text",
         id: "board-new-name",
         "v-model" => "board.name" }
-    .dropdown{ ":class" => "{ open: milestoneDropdownOpen }",
+    .dropdown.board-inner-milestone-dropdown{ ":class" => "{ open: milestoneDropdownOpen }",
       "v-if" => "currentPage === 'new'" }
       %label.label-light{ for: "board-milestone" }
         Board milestone