diff options
author | Mike Greiling <mike@pixelcog.com> | 2018-06-25 18:19:39 +0000 |
---|---|---|
committer | Mike Greiling <mike@pixelcog.com> | 2018-06-25 18:19:39 +0000 |
commit | c91957c6fdf6e54ab00b0230e37a66f5ae47c269 (patch) | |
tree | 389cebb8484bbc1162603e41250583f6d1b3f8fa /app/assets/javascripts/boards | |
parent | dd949b0be4b2187d01a05ea1ce32abc295077897 (diff) | |
parent | f1a70ce797c82775066e357c47765f67b02440a4 (diff) | |
download | gitlab-ce-c91957c6fdf6e54ab00b0230e37a66f5ae47c269.tar.gz |
Merge branch '34371-vue-components-tech-debt' into 'master'
Moves some issue boards components into `.vue` file
See merge request gitlab-org/gitlab-ce!20106
Diffstat (limited to 'app/assets/javascripts/boards')
-rw-r--r-- | app/assets/javascripts/boards/components/modal/footer.vue (renamed from app/assets/javascripts/boards/components/modal/footer.js) | 56 | ||||
-rw-r--r-- | app/assets/javascripts/boards/components/modal/index.js | 4 | ||||
-rw-r--r-- | app/assets/javascripts/boards/components/modal/lists_dropdown.js | 54 | ||||
-rw-r--r-- | app/assets/javascripts/boards/components/modal/lists_dropdown.vue | 56 |
4 files changed, 88 insertions, 82 deletions
diff --git a/app/assets/javascripts/boards/components/modal/footer.js b/app/assets/javascripts/boards/components/modal/footer.vue index 2745ca219ad..e0dac6003f1 100644 --- a/app/assets/javascripts/boards/components/modal/footer.js +++ b/app/assets/javascripts/boards/components/modal/footer.vue @@ -1,14 +1,14 @@ -import Vue from 'vue'; +<script> import Flash from '../../../flash'; import { __ } from '../../../locale'; -import './lists_dropdown'; +import ListsDropdown from './lists_dropdown.vue'; import { pluralize } from '../../../lib/utils/text_utility'; import ModalStore from '../../stores/modal_store'; import modalMixin from '../../mixins/modal_mixins'; -gl.issueBoards.ModalFooter = Vue.extend({ +export default { components: { - 'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown, + ListsDropdown, }, mixins: [modalMixin], data() { @@ -55,28 +55,32 @@ gl.issueBoards.ModalFooter = Vue.extend({ this.toggleModal(false); }, }, - template: ` - <footer - class="form-actions add-issues-footer"> - <div class="float-left"> - <button - class="btn btn-success" - type="button" - :disabled="submitDisabled" - @click="addIssues"> - {{ submitText }} - </button> - <span class="inline add-issues-footer-to-list"> - to list - </span> - <lists-dropdown></lists-dropdown> - </div> +}; +</script> +<template> + <footer + class="form-actions add-issues-footer" + > + <div class="float-left"> <button - class="btn btn-default float-right" + :disabled="submitDisabled" + class="btn btn-success" type="button" - @click="toggleModal(false)"> - Cancel + @click="addIssues" + > + {{ submitText }} </button> - </footer> - `, -}); + <span class="inline add-issues-footer-to-list"> + to list + </span> + <lists-dropdown/> + </div> + <button + class="btn btn-default float-right" + type="button" + @click="toggleModal(false)" + > + Cancel + </button> + </footer> +</template> diff --git a/app/assets/javascripts/boards/components/modal/index.js b/app/assets/javascripts/boards/components/modal/index.js index c10397eaaba..983061f52ae 100644 --- a/app/assets/javascripts/boards/components/modal/index.js +++ b/app/assets/javascripts/boards/components/modal/index.js @@ -5,7 +5,7 @@ import queryData from '~/boards/utils/query_data'; import loadingIcon from '~/vue_shared/components/loading_icon.vue'; import './header'; import './list'; -import './footer'; +import ModalFooter from './footer.vue'; import EmptyState from './empty_state.vue'; import ModalStore from '../../stores/modal_store'; @@ -14,7 +14,7 @@ gl.issueBoards.IssuesModal = Vue.extend({ EmptyState, 'modal-header': gl.issueBoards.ModalHeader, 'modal-list': gl.issueBoards.ModalList, - 'modal-footer': gl.issueBoards.ModalFooter, + ModalFooter, loadingIcon, }, props: { diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.js b/app/assets/javascripts/boards/components/modal/lists_dropdown.js deleted file mode 100644 index e644de2d4fc..00000000000 --- a/app/assets/javascripts/boards/components/modal/lists_dropdown.js +++ /dev/null @@ -1,54 +0,0 @@ -import Vue from 'vue'; -import ModalStore from '../../stores/modal_store'; - -gl.issueBoards.ModalFooterListsDropdown = Vue.extend({ - 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; - }, - template: ` - <div class="dropdown inline"> - <button - class="dropdown-menu-toggle" - type="button" - data-toggle="dropdown" - aria-expanded="false"> - <span - class="dropdown-label-box" - :style="{ backgroundColor: selected.label.color }"> - </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 in state.lists" - v-if="list.type == 'label'"> - <a - href="#" - role="button" - :class="{ 'is-active': list.id == selected.id }" - @click.prevent="modal.selectedList = list"> - <span - class="dropdown-label-box" - :style="{ backgroundColor: list.label.color }"> - </span> - {{ list.title }} - </a> - </li> - </ul> - </div> - </div> - `, -}); 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> |