Scroll board into view when clicking issue
Changed return statement instead of if Delete objects after issue is closed
This commit is contained in:
parent
a0f6526f02
commit
cd5e83b6d6
|
@ -33,9 +33,15 @@ $(() => {
|
||||||
endpoint: $boardApp.dataset.endpoint,
|
endpoint: $boardApp.dataset.endpoint,
|
||||||
boardId: $boardApp.dataset.boardId,
|
boardId: $boardApp.dataset.boardId,
|
||||||
disabled: $boardApp.dataset.disabled === 'true',
|
disabled: $boardApp.dataset.disabled === 'true',
|
||||||
issueLinkBase: $boardApp.dataset.issueLinkBase
|
issueLinkBase: $boardApp.dataset.issueLinkBase,
|
||||||
|
detailIssue: Store.detail
|
||||||
},
|
},
|
||||||
init: Store.create.bind(Store),
|
init: Store.create.bind(Store),
|
||||||
|
computed: {
|
||||||
|
detailIssueVisible () {
|
||||||
|
return Object.keys(this.detailIssue.issue).length;
|
||||||
|
}
|
||||||
|
},
|
||||||
created () {
|
created () {
|
||||||
gl.boardService = new BoardService(this.endpoint, this.boardId);
|
gl.boardService = new BoardService(this.endpoint, this.boardId);
|
||||||
},
|
},
|
||||||
|
|
|
@ -21,6 +21,7 @@
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
detailIssue: Store.detail,
|
||||||
filters: Store.state.filters,
|
filters: Store.state.filters,
|
||||||
showIssueForm: false
|
showIssueForm: false
|
||||||
};
|
};
|
||||||
|
@ -32,6 +33,26 @@
|
||||||
this.list.getIssues(true);
|
this.list.getIssues(true);
|
||||||
},
|
},
|
||||||
deep: true
|
deep: true
|
||||||
|
},
|
||||||
|
detailIssue: {
|
||||||
|
handler () {
|
||||||
|
if (!Object.keys(this.detailIssue.issue).length) return;
|
||||||
|
|
||||||
|
const issue = this.list.findIssue(this.detailIssue.issue.id);
|
||||||
|
|
||||||
|
if (issue) {
|
||||||
|
const boardsList = document.querySelectorAll('.boards-list')[0];
|
||||||
|
const right = (this.$el.offsetLeft + this.$el.offsetWidth) - boardsList.offsetWidth;
|
||||||
|
const left = boardsList.scrollLeft - this.$el.offsetLeft;
|
||||||
|
|
||||||
|
if (right - boardsList.scrollLeft > 0) {
|
||||||
|
boardsList.scrollLeft = right;
|
||||||
|
} else if (left > 0) {
|
||||||
|
boardsList.scrollLeft = this.$el.offsetLeft;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
|
@ -20,11 +20,7 @@
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
issueDetailVisible () {
|
issueDetailVisible () {
|
||||||
if (this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id) {
|
return this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id;
|
||||||
return true;
|
|
||||||
} else {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
|
@ -29,15 +29,22 @@
|
||||||
issue () {
|
issue () {
|
||||||
if (this.showSidebar) {
|
if (this.showSidebar) {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
new IssuableContext(this.currentUser);
|
this.issuableContext = new IssuableContext(this.currentUser);
|
||||||
new MilestoneSelect();
|
this.milestoneSelect = new MilestoneSelect();
|
||||||
new gl.DueDateSelectors();
|
this.dueDateSelect = new gl.DueDateSelectors();
|
||||||
new LabelsSelect();
|
this.labelsSelect = new LabelsSelect();
|
||||||
new Sidebar();
|
this.sidebar = new Sidebar();
|
||||||
new Subscription('.subscription');
|
this.subscription = new Subscription('.subscription');
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
$('.right-sidebar').getNiceScroll().remove();
|
$('.right-sidebar').getNiceScroll().remove();
|
||||||
|
|
||||||
|
delete this.issuableContext;
|
||||||
|
delete this.milestoneSelect;
|
||||||
|
delete this.dueDateSelect;
|
||||||
|
delete this.labelsSelect;
|
||||||
|
delete this.sidebar;
|
||||||
|
delete this.subscription;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -76,6 +76,10 @@ lex
|
||||||
height: 475px; // Needed for PhantomJS
|
height: 475px; // Needed for PhantomJS
|
||||||
height: calc(100vh - 220px);
|
height: calc(100vh - 220px);
|
||||||
min-height: 475px;
|
min-height: 475px;
|
||||||
|
|
||||||
|
&.is-compact {
|
||||||
|
width: calc(100% - 290px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
{{ issue.id }}
|
{{ issue.id }}
|
||||||
%a.gutter-toggle.pull-right{ role: "button",
|
%a.gutter-toggle.pull-right{ role: "button",
|
||||||
href: "#",
|
href: "#",
|
||||||
"@click" => "closeSidebar",
|
"@click.prevent" => "closeSidebar",
|
||||||
"aria-label" => "Toggle sidebar" }
|
"aria-label" => "Toggle sidebar" }
|
||||||
= icon("times")
|
= icon("times")
|
||||||
.js-issuable-update
|
.js-issuable-update
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
= render 'shared/issuable/filter', type: :boards
|
= render 'shared/issuable/filter', type: :boards
|
||||||
|
|
||||||
#board-app.boards-app{ "v-cloak" => true, data: board_data }
|
#board-app.boards-app{ "v-cloak" => true, data: board_data }
|
||||||
.boards-list
|
.boards-list{ ":class" => "{ 'is-compact': detailIssueVisible }" }
|
||||||
.boards-app-loading.text-center{ "v-if" => "loading" }
|
.boards-app-loading.text-center{ "v-if" => "loading" }
|
||||||
= icon("spinner spin")
|
= icon("spinner spin")
|
||||||
= render "projects/boards/components/board"
|
= render "projects/boards/components/board"
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
= render 'shared/issuable/filter', type: :boards
|
= render 'shared/issuable/filter', type: :boards
|
||||||
|
|
||||||
#board-app.boards-app{ "v-cloak" => true, data: board_data }
|
#board-app.boards-app{ "v-cloak" => true, data: board_data }
|
||||||
.boards-list
|
.boards-list{ ":class" => "{ 'is-compact': detailIssueVisible }" }
|
||||||
.boards-app-loading.text-center{ "v-if" => "loading" }
|
.boards-app-loading.text-center{ "v-if" => "loading" }
|
||||||
= icon("spinner spin")
|
= icon("spinner spin")
|
||||||
= render "projects/boards/components/board"
|
= render "projects/boards/components/board"
|
||||||
|
|
Loading…
Reference in New Issue