Commit a9432410 authored by Phil Hughes's avatar Phil Hughes Committed by Fatih Acet

Some styling updates

Does not remove the issue from the selected tab when it it de-selected, it instead gets purged when changing tab
parent 8b977b29
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
submitText() { submitText() {
const count = ModalStore.selectedCount(); const count = ModalStore.selectedCount();
return `Add ${count} issue${count > 1 || !count ? 's' : ''}`; return `Add ${count > 0 ? count : ''} issue${count > 1 || !count ? 's' : ''}`;
}, },
}, },
methods: { methods: {
...@@ -26,7 +26,9 @@ ...@@ -26,7 +26,9 @@
}, },
addIssues() { addIssues() {
const list = this.selectedList; 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 // Post the data to the backend
this.$http.post(this.bulkUpdatePath, { this.$http.post(this.bulkUpdatePath, {
...@@ -37,7 +39,7 @@ ...@@ -37,7 +39,7 @@
}); });
// Add the issues on the frontend // Add the issues on the frontend
this.selectedIssues.forEach((issue) => { selectedIssues.forEach((issue) => {
list.addIssue(issue); list.addIssue(issue);
list.issuesSize += 1; list.issuesSize += 1;
}); });
......
...@@ -17,7 +17,11 @@ ...@@ -17,7 +17,11 @@
}, },
}, },
methods: { methods: {
toggleAll: ModalStore.toggleAll.bind(ModalStore), toggleAll() {
this.$refs.selectAllBtn.blur();
ModalStore.toggleAll();
}
}, },
components: { components: {
'modal-tabs': gl.issueBoards.ModalTabs, 'modal-tabs': gl.issueBoards.ModalTabs,
...@@ -49,6 +53,7 @@ ...@@ -49,6 +53,7 @@
<button <button
type="button" type="button"
class="btn btn-success btn-inverted prepend-left-10" class="btn btn-success btn-inverted prepend-left-10"
ref="selectAllBtn"
@click="toggleAll"> @click="toggleAll">
{{ selectAllText }} {{ selectAllText }}
</button> </button>
......
...@@ -12,6 +12,10 @@ ...@@ -12,6 +12,10 @@
watch: { watch: {
activeTab() { activeTab() {
this.initMasonry(); this.initMasonry();
if (this.activeTab === 'all') {
ModalStore.purgeUnselectedIssues();
}
}, },
issues: { issues: {
handler() { handler() {
...@@ -43,7 +47,9 @@ ...@@ -43,7 +47,9 @@
showIssue(issue) { showIssue(issue) {
if (this.activeTab === 'all') return true; if (this.activeTab === 'all') return true;
return issue.selected; const index = ModalStore.selectedIssueIndex(issue);
return index !== -1;
}, },
initMasonry() { initMasonry() {
const listScrollTop = this.$refs.list.scrollTop; const listScrollTop = this.$refs.list.scrollTop;
......
...@@ -21,11 +21,11 @@ ...@@ -21,11 +21,11 @@
type="button" type="button"
data-toggle="dropdown" data-toggle="dropdown"
aria-expanded="false"> aria-expanded="false">
{{ selected.title }}
<span <span
class="dropdown-label-box pull-right" class="dropdown-label-box"
:style="{ backgroundColor: selected.label.color }"> :style="{ backgroundColor: selected.label.color }">
</span> </span>
{{ selected.title }}
<i class="fa fa-chevron-down"></i> <i class="fa fa-chevron-down"></i>
</button> </button>
<div class="dropdown-menu dropdown-menu-selectable"> <div class="dropdown-menu dropdown-menu-selectable">
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
} }
selectedCount() { selectedCount() {
return this.store.selectedIssues.length; return this.store.selectedIssues.filter(issue => issue.selected).length;
} }
toggleIssue(issueObj) { toggleIssue(issueObj) {
...@@ -51,14 +51,32 @@ ...@@ -51,14 +51,32 @@
}); });
} }
getSelectedIssues() {
return this.store.selectedIssues.filter(issue => issue.selected);
}
addSelectedIssue(issue) { addSelectedIssue(issue) {
const index = this.selectedIssueIndex(issue);
if (index === -1) {
this.store.selectedIssues.push(issue); this.store.selectedIssues.push(issue);
} }
}
removeSelectedIssue(issue) { removeSelectedIssue(issue, forcePurge = false) {
if (this.store.activeTab === 'all' || forcePurge) {
const index = this.selectedIssueIndex(issue); const index = this.selectedIssueIndex(issue);
this.store.selectedIssues.splice(index, 1); this.store.selectedIssues.splice(index, 1);
} }
}
purgeUnselectedIssues() {
this.store.selectedIssues.forEach((issue) => {
if (!issue.selected) {
this.removeSelectedIssue(issue, true);
}
});
}
selectedIssueIndex(issue) { selectedIssueIndex(issue) {
return this.store.selectedIssues.indexOf(issue); return this.store.selectedIssues.indexOf(issue);
......
...@@ -255,7 +255,6 @@ ...@@ -255,7 +255,6 @@
.form-control { .form-control {
display: inline-block; display: inline-block;
width: 210px; width: 210px;
margin-right: 10px;
} }
} }
...@@ -387,8 +386,11 @@ ...@@ -387,8 +386,11 @@
> .row { > .row {
width: 100%; width: 100%;
margin-top: auto; margin: auto 0;
margin-bottom: auto; }
.svg-content {
margin-top: -40px;
} }
} }
} }
...@@ -420,7 +422,7 @@ ...@@ -420,7 +422,7 @@
.card-parent { .card-parent {
width: 100%; width: 100%;
padding: 0 $gl-vert-padding ($gl-vert-padding * 2); padding: 0 5px 5px;
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
width: 50%; width: 50%;
...@@ -433,6 +435,7 @@ ...@@ -433,6 +435,7 @@
.card { .card {
border: 1px solid $border-gray-dark; border: 1px solid $border-gray-dark;
box-shadow: 0 1px 2px rgba($issue-boards-card-shadow, .3);
cursor: pointer; cursor: pointer;
} }
} }
...@@ -446,9 +449,7 @@ ...@@ -446,9 +449,7 @@
} }
.add-issues-footer { .add-issues-footer {
margin-top: auto; margin: auto -15px 0;
margin-left: -15px;
margin-right: -15px;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
border-bottom-right-radius: $border-radius-default; border-bottom-right-radius: $border-radius-default;
...@@ -465,10 +466,11 @@ ...@@ -465,10 +466,11 @@
position: absolute; position: absolute;
right: -3px; right: -3px;
top: -3px; top: -3px;
width: 20px; width: 17px;
background-color: $blue-dark; background-color: $blue-light;
color: $white-light; color: $white-light;
font-size: 12px; border: 1px solid $border-blue-light;
line-height: 20px; font-size: 9px;
line-height: 17px;
border-radius: 50%; border-radius: 50%;
} }
...@@ -38,10 +38,10 @@ ...@@ -38,10 +38,10 @@
#js-boards-search.issue-boards-search #js-boards-search.issue-boards-search
%input.pull-left.form-control{ type: "search", placeholder: "Filter by name...", "v-model" => "filters.search", "debounce" => "250" } %input.pull-left.form-control{ type: "search", placeholder: "Filter by name...", "v-model" => "filters.search", "debounce" => "250" }
- if can?(current_user, :admin_list, @project) - 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 Add issues
.dropdown.pull-right .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 Add list
.dropdown-menu.dropdown-menu-paging.dropdown-menu-align-right.dropdown-menu-issues-board-new.dropdown-menu-selectable .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" } = render partial: "shared/issuable/label_page_default", locals: { show_footer: true, show_create: true, show_boards_content: true, title: "Add list" }
......
...@@ -10,6 +10,7 @@ describe 'Issue Boards add issue modal', :feature, :js do ...@@ -10,6 +10,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
let!(:planning) { create(:label, project: project, name: 'Planning') } let!(:planning) { create(:label, project: project, name: 'Planning') }
let!(:label) { create(:label, project: project) } let!(:label) { create(:label, project: project) }
let!(:list1) { create(:list, board: board, label: planning, position: 0) } 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!(:issue) { create(:issue, project: project) }
let!(:issue2) { create(:issue, project: project) } let!(:issue2) { create(:issue, project: project) }
...@@ -172,7 +173,7 @@ describe 'Issue Boards add issue modal', :feature, :js do ...@@ -172,7 +173,7 @@ describe 'Issue Boards add issue modal', :feature, :js do
first('.card').click first('.card').click
expect(page).not_to have_selector('.card') expect(page).not_to have_selector('.is-active')
end end
end end
end end
......
...@@ -81,6 +81,7 @@ describe('Modal store', () => { ...@@ -81,6 +81,7 @@ describe('Modal store', () => {
}); });
it('adds issue to selected array', () => { it('adds issue to selected array', () => {
issue.selected = true;
Store.addSelectedIssue(issue); Store.addSelectedIssue(issue);
expect(Store.selectedCount()).toBe(1); expect(Store.selectedCount()).toBe(1);
...@@ -112,4 +113,22 @@ describe('Modal store', () => { ...@@ -112,4 +113,22 @@ describe('Modal store', () => {
it('does not find a selected issue', () => { it('does not find a selected issue', () => {
expect(Store.findSelectedIssue(issue)).toBe(undefined); 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);
});
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment