diff options
author | Phil Hughes <me@iamphill.com> | 2017-01-26 10:55:40 +0000 |
---|---|---|
committer | Fatih Acet <acetfatih@gmail.com> | 2017-02-03 17:02:43 +0300 |
commit | d9894a2fddb70f37432a3605eac85c7b9e5d0fee (patch) | |
tree | a1d243c6182394076d5b5f32c5d10f72965b4c81 /app/assets | |
parent | 6adb6caed9c6a25aa68ee9ceb37419543bb49e23 (diff) | |
download | gitlab-ce-d9894a2fddb70f37432a3605eac85c7b9e5d0fee.tar.gz |
Cleaned up some code
Diffstat (limited to 'app/assets')
8 files changed, 91 insertions, 163 deletions
diff --git a/app/assets/javascripts/boards/components/modal/dismiss.js.es6 b/app/assets/javascripts/boards/components/modal/dismiss.js.es6 deleted file mode 100644 index cf952837d39..00000000000 --- a/app/assets/javascripts/boards/components/modal/dismiss.js.es6 +++ /dev/null @@ -1,28 +0,0 @@ -/* global Vue */ -(() => { - const ModalStore = gl.issueBoards.ModalStore; - - window.gl = window.gl || {}; - window.gl.issueBoards = window.gl.issueBoards || {}; - - gl.issueBoards.DismissModal = Vue.extend({ - data() { - return ModalStore.store; - }, - methods: { - toggleModal(toggle) { - this.showAddIssuesModal = toggle; - }, - }, - template: ` - <button - type="button" - class="close" - data-dismiss="modal" - aria-label="Close" - @click="toggleModal(false)"> - <span aria-hidden="true">×</span> - </button> - `, - }); -})(); diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6 index e4d49b914bd..d2156759785 100644 --- a/app/assets/javascripts/boards/components/modal/footer.js.es6 +++ b/app/assets/javascripts/boards/components/modal/footer.js.es6 @@ -32,8 +32,7 @@ gl.boardService.addMultipleIssues(list, issueIds); // Add the issues on the frontend - issueIds.forEach((id) => { - const issue = this.issues.filter(fIssue => fIssue.id === id)[0]; + this.selectedIssues.forEach((issue) => { list.addIssue(issue); list.issuesSize += 1; }); @@ -54,7 +53,7 @@ @click="addIssues"> {{ submitText }} </button> - <span class="add-issues-footer-to-list"> + <span class="inline add-issues-footer-to-list"> to list </span> <lists-dropdown></lists-dropdown> diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6 index 6896a0fcf45..a91e3da2060 100644 --- a/app/assets/javascripts/boards/components/modal/header.js.es6 +++ b/app/assets/javascripts/boards/components/modal/header.js.es6 @@ -1,7 +1,5 @@ /* global Vue */ //= require ./tabs -//= require ./dismiss -//= require ./search (() => { const ModalStore = gl.issueBoards.ModalStore; @@ -12,21 +10,52 @@ data() { return ModalStore.store; }, + computed: { + selectAllText() { + if (ModalStore.selectedCount() !== this.issues.length || this.issues.length === 0) { + return 'Select all'; + } + + return 'Un-select all'; + }, + }, + methods: { + toggleAll: ModalStore.toggleAll.bind(ModalStore), + }, components: { - 'modal-dismiss': gl.issueBoards.DismissModal, 'modal-tabs': gl.issueBoards.ModalTabs, - 'modal-search': gl.issueBoards.ModalSearch, }, template: ` <div> <header class="add-issues-header form-actions"> <h2> Add issues - <modal-dismiss></modal-dismiss> + <button + type="button" + class="close" + data-dismiss="modal" + aria-label="Close" + @click="showAddIssuesModal = false"> + <span aria-hidden="true">×</span> + </button> </h2> </header> <modal-tabs v-if="!loading"></modal-tabs> - <modal-search v-if="!loading"></modal-search> + <div + class="add-issues-search prepend-top-10 append-bottom-10" + v-if="activeTab == 'all' && !loading"> + <input + placeholder="Search issues..." + class="form-control" + type="search" + v-model="searchTerm" /> + <button + type="button" + class="btn btn-success btn-inverted prepend-left-10" + @click="toggleAll"> + {{ selectAllText }} + </button> + </div> </div> `, }); diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6 index 693182fe37e..2dfc7f16c21 100644 --- a/app/assets/javascripts/boards/components/modal/index.js.es6 +++ b/app/assets/javascripts/boards/components/modal/index.js.es6 @@ -16,14 +16,16 @@ searchTerm() { this.searchOperation(); }, - }, - mounted() { - this.loading = true; + showAddIssuesModal() { + if (this.showAddIssuesModal && !this.issues.length) { + this.loading = true; - this.loadIssues() - .then(() => { - this.loading = false; - }); + this.loadIssues() + .then(() => { + this.loading = false; + }); + } + }, }, methods: { searchOperation: _.debounce(function() { @@ -59,7 +61,7 @@ <modal-header></modal-header> <modal-list v-if="!loading"></modal-list> <section - class="add-issues-list" + class="add-issues-list text-center" v-if="loading"> <div class="add-issues-list-loading"> <i class="fa fa-spinner fa-spin"></i> diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6 index 55e3ff3c7f4..4f6da0b493c 100644 --- a/app/assets/javascripts/boards/components/modal/list.js.es6 +++ b/app/assets/javascripts/boards/components/modal/list.js.es6 @@ -64,32 +64,30 @@ 'issue-card-inner': gl.issueBoards.IssueCardInner, }, template: ` - <section class="add-issues-list"> + <div + class="add-issues-list add-issues-list-columns" + ref="list" + v-show="!loading"> <div - class="add-issues-list-columns list-unstyled" - ref="list" - v-show="!loading"> + v-for="issue in loopIssues" + v-if="showIssue(issue)" + class="card-parent"> <div - v-for="issue in loopIssues" - v-if="showIssue(issue)" - class="card-parent"> - <div - class="card" - :class="{ 'is-active': issue.selected }" - @click="toggleIssue(issue)"> - <issue-card-inner - :issue="issue" - :issue-link-base="'/'"> - </issue-card-inner> - <span - v-if="issue.selected" - class="issue-card-selected"> - <i class="fa fa-check"></i> - </span> - </div> + class="card" + :class="{ 'is-active': issue.selected }" + @click="toggleIssue(issue)"> + <issue-card-inner + :issue="issue" + :issue-link-base="'/'"> + </issue-card-inner> + <span + v-if="issue.selected" + class="issue-card-selected text-center"> + <i class="fa fa-check"></i> + </span> </div> </div> - </section> + </div> `, }); })(); diff --git a/app/assets/javascripts/boards/components/modal/search.js.es6 b/app/assets/javascripts/boards/components/modal/search.js.es6 deleted file mode 100644 index 764340bc5f3..00000000000 --- a/app/assets/javascripts/boards/components/modal/search.js.es6 +++ /dev/null @@ -1,42 +0,0 @@ -/* global Vue */ -(() => { - const ModalStore = gl.issueBoards.ModalStore; - - window.gl = window.gl || {}; - window.gl.issueBoards = window.gl.issueBoards || {}; - - gl.issueBoards.ModalSearch = Vue.extend({ - data() { - return ModalStore.store; - }, - computed: { - selectAllText() { - if (ModalStore.selectedCount() !== this.issues.length || this.issues.length === 0) { - return 'Select all'; - } - - return 'Un-select all'; - }, - }, - methods: { - toggleAll: ModalStore.toggleAll.bind(ModalStore), - }, - template: ` - <div - class="add-issues-search" - v-if="activeTab == 'all'"> - <input - placeholder="Search issues..." - class="form-control" - type="search" - v-model="searchTerm" /> - <button - type="button" - class="btn btn-success btn-inverted" - @click="toggleAll"> - {{ selectAllText }} - </button> - </div> - `, - }); -})(); diff --git a/app/assets/javascripts/boards/components/modal/tabs.js.es6 b/app/assets/javascripts/boards/components/modal/tabs.js.es6 index f9026cea90b..c165b81a774 100644 --- a/app/assets/javascripts/boards/components/modal/tabs.js.es6 +++ b/app/assets/javascripts/boards/components/modal/tabs.js.es6 @@ -9,11 +9,6 @@ data() { return ModalStore.store; }, - methods: { - changeTab(tab) { - this.activeTab = tab; - }, - }, computed: { selectedCount() { return ModalStore.selectedCount(); @@ -23,13 +18,13 @@ this.activeTab = 'all'; }, template: ` - <div class="top-area"> + <div class="top-area prepend-top-10"> <ul class="nav-links issues-state-filters"> <li :class="{ 'active': activeTab == 'all' }"> <a href="#" role="button" - @click.prevent="changeTab('all')"> + @click.prevent="activeTab = 'all'"> <span>All issues</span> <span class="badge"> {{ issues.length }} @@ -40,7 +35,7 @@ <a href="#" role="button" - @click.prevent="changeTab('selected')"> + @click.prevent="activeTab = 'selected'"> <span>Selected issues</span> <span class="badge"> {{ selectedCount }} diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 683ef9f2388..842ae0c083f 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -358,7 +358,6 @@ .add-issues-modal { display: flex; - align-items: center; position: fixed; top: 0; right: 0; @@ -374,8 +373,7 @@ width: 90vw; height: 85vh; min-height: 500px; - margin-left: auto; - margin-right: auto; + margin: auto; padding: 25px 15px 0; background-color: $white-light; border-radius: $border-radius-default; @@ -391,57 +389,19 @@ margin: 0; font-size: 18px; } - - .top-area { - margin-bottom: 10px; - } } .add-issues-search { display: flex; - margin-bottom: 10px; - margin-top: 10px; - - .btn { - margin-left: 10px; - } } .add-issues-list { display: flex; flex: 1; + padding-top: 3px; margin-left: -$gl-vert-padding; margin-right: -$gl-vert-padding; overflow-y: scroll; -} - -.add-issues-list-loading { - align-self: center; - width: 100%; - padding-left: $gl-vert-padding; - padding-right: $gl-vert-padding; - font-size: 35px; - text-align: center; -} - -.add-issues-footer { - margin-top: auto; - margin-left: -15px; - margin-right: -15px; - padding-left: 15px; - padding-right: 15px; -} - -.add-issues-footer-to-list { - display: inline-block; - padding-left: 6px; - padding-right: 6px; - line-height: 34px; -} - -.add-issues-list-columns { - width: 100%; - padding-top: 3px; .card-parent { width: 100%; @@ -462,9 +422,26 @@ } } -.all-issues-selected-empty { +.add-issues-list-loading { align-self: center; - margin-bottom: 0; + width: 100%; + padding-left: $gl-vert-padding; + padding-right: $gl-vert-padding; + font-size: 35px; +} + +.add-issues-footer { + margin-top: auto; + margin-left: -15px; + margin-right: -15px; + padding-left: 15px; + padding-right: 15px; +} + +.add-issues-footer-to-list { + padding-left: $gl-vert-padding; + padding-right: $gl-vert-padding; + line-height: 34px; } .issue-card-selected { @@ -472,11 +449,9 @@ right: -3px; top: -3px; width: 20px; - height: 20px; background-color: $blue-dark; color: $white-light; font-size: 12px; - text-align: center; line-height: 20px; border-radius: 50%; } |