summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPhil Hughes <me@iamphill.com>2017-01-27 16:49:56 +0000
committerFatih Acet <acetfatih@gmail.com>2017-02-03 17:02:44 +0300
commita943241056961c7b820adfd8fd08edd25c3a563a (patch)
tree4fd0a70fcbb31804748ee6fa7fb928850c206d12
parent8b977b295e887f7d134cd92ec352a24c0afd5950 (diff)
downloadgitlab-ce-a943241056961c7b820adfd8fd08edd25c3a563a.tar.gz
Some styling updates
Does not remove the issue from the selected tab when it it de-selected, it instead gets purged when changing tab
-rw-r--r--app/assets/javascripts/boards/components/modal/footer.js.es68
-rw-r--r--app/assets/javascripts/boards/components/modal/header.js.es67
-rw-r--r--app/assets/javascripts/boards/components/modal/list.js.es68
-rw-r--r--app/assets/javascripts/boards/components/modal/lists_dropdown.js.es64
-rw-r--r--app/assets/javascripts/boards/stores/modal_store.js.es628
-rw-r--r--app/assets/stylesheets/pages/boards.scss24
-rw-r--r--app/views/shared/issuable/_filter.html.haml4
-rw-r--r--spec/features/boards/add_issues_modal_spec.rb3
-rw-r--r--spec/javascripts/boards/modal_store_spec.js.es619
9 files changed, 79 insertions, 26 deletions
diff --git a/app/assets/javascripts/boards/components/modal/footer.js.es6 b/app/assets/javascripts/boards/components/modal/footer.js.es6
index 81b1aa1da77..1a147daca7a 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js.es6
+++ b/app/assets/javascripts/boards/components/modal/footer.js.es6
@@ -17,7 +17,7 @@
submitText() {
const count = ModalStore.selectedCount();
- return `Add ${count} issue${count > 1 || !count ? 's' : ''}`;
+ return `Add ${count > 0 ? count : ''} issue${count > 1 || !count ? 's' : ''}`;
},
},
methods: {
@@ -26,7 +26,9 @@
},
addIssues() {
const list = this.selectedList;
- const issueIds = this.selectedIssues.map(issue => issue.globalId);
+ const selectedIssues = ModalStore.getSelectedIssues();
+ const issueIds = selectedIssues.filter(issue => issue.selected)
+ .map(issue => issue.globalId);
// Post the data to the backend
this.$http.post(this.bulkUpdatePath, {
@@ -37,7 +39,7 @@
});
// Add the issues on the frontend
- this.selectedIssues.forEach((issue) => {
+ selectedIssues.forEach((issue) => {
list.addIssue(issue);
list.issuesSize += 1;
});
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index d7d896e3be1..ebb2ee1a82f 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -17,7 +17,11 @@
},
},
methods: {
- toggleAll: ModalStore.toggleAll.bind(ModalStore),
+ toggleAll() {
+ this.$refs.selectAllBtn.blur();
+
+ ModalStore.toggleAll();
+ }
},
components: {
'modal-tabs': gl.issueBoards.ModalTabs,
@@ -49,6 +53,7 @@
<button
type="button"
class="btn btn-success btn-inverted prepend-left-10"
+ ref="selectAllBtn"
@click="toggleAll">
{{ selectAllText }}
</button>
diff --git a/app/assets/javascripts/boards/components/modal/list.js.es6 b/app/assets/javascripts/boards/components/modal/list.js.es6
index c0c3f4b8d8f..605c1101666 100644
--- a/app/assets/javascripts/boards/components/modal/list.js.es6
+++ b/app/assets/javascripts/boards/components/modal/list.js.es6
@@ -12,6 +12,10 @@
watch: {
activeTab() {
this.initMasonry();
+
+ if (this.activeTab === 'all') {
+ ModalStore.purgeUnselectedIssues();
+ }
},
issues: {
handler() {
@@ -43,7 +47,9 @@
showIssue(issue) {
if (this.activeTab === 'all') return true;
- return issue.selected;
+ const index = ModalStore.selectedIssueIndex(issue);
+
+ return index !== -1;
},
initMasonry() {
const listScrollTop = this.$refs.list.scrollTop;
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6 b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
index b205c019a31..d6bb755001a 100644
--- a/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.js.es6
@@ -21,11 +21,11 @@
type="button"
data-toggle="dropdown"
aria-expanded="false">
- {{ selected.title }}
<span
- class="dropdown-label-box pull-right"
+ 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">
diff --git a/app/assets/javascripts/boards/stores/modal_store.js.es6 b/app/assets/javascripts/boards/stores/modal_store.js.es6
index 2d8da482e5f..391765c4978 100644
--- a/app/assets/javascripts/boards/stores/modal_store.js.es6
+++ b/app/assets/javascripts/boards/stores/modal_store.js.es6
@@ -19,7 +19,7 @@
}
selectedCount() {
- return this.store.selectedIssues.length;
+ return this.store.selectedIssues.filter(issue => issue.selected).length;
}
toggleIssue(issueObj) {
@@ -51,13 +51,31 @@
});
}
- addSelectedIssue(issue) {
- this.store.selectedIssues.push(issue);
+ getSelectedIssues() {
+ return this.store.selectedIssues.filter(issue => issue.selected);
}
- removeSelectedIssue(issue) {
+ addSelectedIssue(issue) {
const index = this.selectedIssueIndex(issue);
- this.store.selectedIssues.splice(index, 1);
+
+ if (index === -1) {
+ this.store.selectedIssues.push(issue);
+ }
+ }
+
+ removeSelectedIssue(issue, forcePurge = false) {
+ if (this.store.activeTab === 'all' || forcePurge) {
+ const index = this.selectedIssueIndex(issue);
+ this.store.selectedIssues.splice(index, 1);
+ }
+ }
+
+ purgeUnselectedIssues() {
+ this.store.selectedIssues.forEach((issue) => {
+ if (!issue.selected) {
+ this.removeSelectedIssue(issue, true);
+ }
+ });
}
selectedIssueIndex(issue) {
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index cf1c52a2b38..e7321b19e15 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -255,7 +255,6 @@
.form-control {
display: inline-block;
width: 210px;
- margin-right: 10px;
}
}
@@ -387,8 +386,11 @@
> .row {
width: 100%;
- margin-top: auto;
- margin-bottom: auto;
+ margin: auto 0;
+ }
+
+ .svg-content {
+ margin-top: -40px;
}
}
}
@@ -420,7 +422,7 @@
.card-parent {
width: 100%;
- padding: 0 $gl-vert-padding ($gl-vert-padding * 2);
+ padding: 0 5px 5px;
@media (min-width: $screen-sm-min) {
width: 50%;
@@ -433,6 +435,7 @@
.card {
border: 1px solid $border-gray-dark;
+ box-shadow: 0 1px 2px rgba($issue-boards-card-shadow, .3);
cursor: pointer;
}
}
@@ -446,9 +449,7 @@
}
.add-issues-footer {
- margin-top: auto;
- margin-left: -15px;
- margin-right: -15px;
+ margin: auto -15px 0;
padding-left: 15px;
padding-right: 15px;
border-bottom-right-radius: $border-radius-default;
@@ -465,10 +466,11 @@
position: absolute;
right: -3px;
top: -3px;
- width: 20px;
- background-color: $blue-dark;
+ width: 17px;
+ background-color: $blue-light;
color: $white-light;
- font-size: 12px;
- line-height: 20px;
+ border: 1px solid $border-blue-light;
+ font-size: 9px;
+ line-height: 17px;
border-radius: 50%;
}
diff --git a/app/views/shared/issuable/_filter.html.haml b/app/views/shared/issuable/_filter.html.haml
index b94bdf14d5e..1b1348d435a 100644
--- a/app/views/shared/issuable/_filter.html.haml
+++ b/app/views/shared/issuable/_filter.html.haml
@@ -38,10 +38,10 @@
#js-boards-search.issue-boards-search
%input.pull-left.form-control{ type: "search", placeholder: "Filter by name...", "v-model" => "filters.search", "debounce" => "250" }
- if can?(current_user, :admin_list, @project)
- %button.btn.btn-create.btn-inverted.js-show-add-issues{ type: "button" }
+ %button.btn.btn-create.pull-right.prepend-left-10.js-show-add-issues{ type: "button" }
Add issues
.dropdown.pull-right
- %button.btn.btn-create.js-new-board-list{ type: "button", data: { toggle: "dropdown", labels: labels_filter_path, namespace_path: @project.try(:namespace).try(:path), project_path: @project.try(:path) } }
+ %button.btn.btn-create.btn-inverted.js-new-board-list{ type: "button", data: { toggle: "dropdown", labels: labels_filter_path, namespace_path: @project.try(:namespace).try(:path), project_path: @project.try(:path) } }
Add list
.dropdown-menu.dropdown-menu-paging.dropdown-menu-align-right.dropdown-menu-issues-board-new.dropdown-menu-selectable
= render partial: "shared/issuable/label_page_default", locals: { show_footer: true, show_create: true, show_boards_content: true, title: "Add list" }
diff --git a/spec/features/boards/add_issues_modal_spec.rb b/spec/features/boards/add_issues_modal_spec.rb
index e6065c0740d..5ba044a4f3c 100644
--- a/spec/features/boards/add_issues_modal_spec.rb
+++ b/spec/features/boards/add_issues_modal_spec.rb
@@ -10,6 +10,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
let!(:planning) { create(:label, project: project, name: 'Planning') }
let!(:label) { create(:label, project: project) }
let!(:list1) { create(:list, board: board, label: planning, position: 0) }
+ let!(:list2) { create(:list, board: board, label: label, position: 1) }
let!(:issue) { create(:issue, project: project) }
let!(:issue2) { create(:issue, project: project) }
@@ -172,7 +173,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
first('.card').click
- expect(page).not_to have_selector('.card')
+ expect(page).not_to have_selector('.is-active')
end
end
end
diff --git a/spec/javascripts/boards/modal_store_spec.js.es6 b/spec/javascripts/boards/modal_store_spec.js.es6
index 9c0625357bd..3f44e427201 100644
--- a/spec/javascripts/boards/modal_store_spec.js.es6
+++ b/spec/javascripts/boards/modal_store_spec.js.es6
@@ -81,6 +81,7 @@ describe('Modal store', () => {
});
it('adds issue to selected array', () => {
+ issue.selected = true;
Store.addSelectedIssue(issue);
expect(Store.selectedCount()).toBe(1);
@@ -112,4 +113,22 @@ describe('Modal store', () => {
it('does not find a selected issue', () => {
expect(Store.findSelectedIssue(issue)).toBe(undefined);
});
+
+ it('does not remove from selected issue if tab is not all', () => {
+ Store.store.activeTab = 'selected';
+
+ Store.toggleIssue(issue);
+ Store.toggleIssue(issue);
+
+ expect(Store.store.selectedIssues.length).toBe(1);
+ expect(Store.selectedCount()).toBe(0);
+ });
+
+ it('gets selected issue array with only selected issues', () => {
+ Store.toggleIssue(issue);
+ Store.toggleIssue(issue2);
+ Store.toggleIssue(issue2);
+
+ expect(Store.getSelectedIssues().length).toBe(1);
+ });
});