use existing weight_select for saner styles and behaviour

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

@@ -51,7 +51,7 @@
             {{ expandButtonText }}
           </button>
         </div>
-        <p class="light append-bottom-10">
+        <p class="text-secondary append-bottom-10">
           Board scope affects which issues are displayed for anyone who visits this board
         </p>
         <div v-if="!collapseScope || expanded">

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

 <script>
-/* global BoardService */
+/* global BoardService, WeightSelect */
 
+import '~/weight_select';
 import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 import eventHub from '../eventhub';
 
@@ -34,86 +35,99 @@ export default {
   },
   data() {
     return {
-      isOpen: false,
+      fieldName: 'weight',
     };
   },
   components: {
     loadingIcon,
   },
   computed: {
-    weight() {
-      if (parseInt(this.board.weight, 10) === 0) {
-        return 'No Weight';
+    valueClass() {
+      if (this.value === 'Any Weight') {
+        return 'placeholder';
       }
-      return this.board.weight || 'Any weight';
+      return 'bold';
     },
   },
   methods: {
     selectWeight(weight) {
       this.$set(this.board, 'weight', weight);
-      this.close();
-    },
-    open() {
-      this.isOpen = true;
-    },
-    close() {
-      this.isOpen = false;
-    },
-    toggle() {
-      this.isOpen = !this.isOpen;
     },
   },
+  mounted() {
+    new WeightSelect(this.$refs.dropdownButton, {
+      handleClick: this.selectWeight,
+      selected: this.value,
+      fieldName: this.fieldName,
+    });
+  }
 };
 </script>
 
 <template>
-  <div class="dropdown weight" :class="{ open: isOpen }">
+  <div class="block weight">
     <div class="title append-bottom-10">
       {{ title }}
       <a
         v-if="canEdit"
         class="edit-link pull-right"
         href="#"
-        @click.prevent="toggle"
       >
         Edit
       </a>
     </div>
     <div
-      class="dropdown-menu dropdown-menu-wide"
+      class="value"
+      :class="valueClass"
     >
-      <ul
-        ref="list"
-      >
-        <li>
-          <a
-            href="#"
-            @click.prevent.stop="selectWeight(null)"
-          >
-            <i
-              class="fa fa-check"
-              v-if="!value"></i>
-            Any weight
-          </a>
-        </li>
-        <li
-          v-for="weight in weights"
-          :key="weight.id"
-        >
-          <a
-            href="#"
-            @click.prevent.stop="selectWeight(weight)">
-            <i
-              class="fa fa-check"
-              v-if="weight === value"
-            />
-            {{ weight }}
-          </a>
-        </li>
-      </ul>
+      {{ value }}
     </div>
-    <div class="value">
-      {{ weight }}
+    <div
+      class="selectbox"
+      style="display: none;"
+    >
+      <input
+        type="hidden"
+        :name="this.fieldName"
+      />
+      <div class="dropdown ">
+        <button
+          ref="dropdownButton"
+          class="dropdown-menu-toggle js-weight-select wide"
+          type="button"
+          data-default-label="Weight"
+          data-toggle="dropdown"
+        >
+          <span class="dropdown-toggle-text is-default">
+            Weight
+          </span>
+          <i
+            aria-hidden="true"
+            data-hidden="true"
+            class="fa fa-chevron-down"
+          />
+        </button>
+        <div class="dropdown-menu dropdown-select dropdown-menu-selectable dropdown-menu-weight">
+          <div class="dropdown-content ">
+            <ul>
+              <li
+                v-for="weight in weights"
+                :key="weight"
+              >
+                <a
+                  :data-id="weight"
+                  href="#"
+                >
+                  {{ weight }}
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="dropdown-loading">
+            <loading-icon />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>

app/assets/javascripts/weight_select.js

@@ -2,8 +2,10 @@
 
 (function() {
   this.WeightSelect = (function() {
-    function WeightSelect() {
-      $('.js-weight-select').each(function(i, dropdown) {
+    function WeightSelect(els, options = {}) {
+      const $els = $(els || '.js-weight-select');
+
+      $els.each(function(i, dropdown) {
         var $block, $dropdown, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, updateUrl, updateWeight;
         $dropdown = $(dropdown);
         updateUrl = $dropdown.data('issueUpdate');
@@ -13,6 +15,12 @@
         $value = $block.find('.value');
         abilityName = $dropdown.data('ability-name');
         $loading = $block.find('.block-loading').fadeOut();
+        const fieldName = options.fieldName || $dropdown.data("field-name");
+
+        if (Object.keys(options).includes('selected')) {
+          $dropdown.closest('.selectbox').find(`input[name='${fieldName}']`).val(options.selected);
+        }
+
         updateWeight = function(selected) {
           var data;
           data = {};
@@ -39,7 +47,7 @@
         };
         return $dropdown.glDropdown({
           selectable: true,
-          fieldName: $dropdown.data("field-name"),
+          fieldName,
           toggleLabel: function (selected, el) {
             return $(el).data("id");
           },
@@ -54,16 +62,20 @@
               return '';
             }
           },
-          clicked: function(options) {
-            const e = options.e;
-            let selected = options.selectedObj;
+          clicked: function(glDropdownEvt) {
+            const e = glDropdownEvt.e;
+            let selected = glDropdownEvt.selectedObj;
 
-            if ($(dropdown).is(".js-filter-submit")) {
+            if (options.handleClick) {
+              e.preventDefault();
+              selected = $dropdown.closest('.selectbox').find(`input[name='${fieldName}']`).val();
+              options.handleClick(selected);
+            } else if ($(dropdown).is(".js-filter-submit")) {
               return $(dropdown).parents('form').submit();
             } else if ($dropdown.is('.js-issuable-form-weight')) {
               e.preventDefault();
             } else {
-              selected = $dropdown.closest('.selectbox').find("input[name='" + ($dropdown.data('field-name')) + "']").val();
+              selected = $dropdown.closest('.selectbox').find(`input[name='${fieldName}']`).val();
               return updateWeight(selected);
             }
           }

app/views/shared/boards/_switcher.html.haml

@@ -42,5 +42,5 @@
       "group-id" => @group&.id,
       ":can-admin-board" => can?(current_user, :admin_board, parent),
       ":scoped-issue-board-feature-enabled" => parent.feature_available?(:scoped_issue_board),
-      "weights" => Issue.weight_options,
+      "weights" => [Issue::WEIGHT_ANY] + Issue.weight_options,
       "v-if" => "currentPage" }