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,
|
||||
boardId: $boardApp.dataset.boardId,
|
||||
disabled: $boardApp.dataset.disabled === 'true',
|
||||
issueLinkBase: $boardApp.dataset.issueLinkBase
|
||||
issueLinkBase: $boardApp.dataset.issueLinkBase,
|
||||
detailIssue: Store.detail
|
||||
},
|
||||
init: Store.create.bind(Store),
|
||||
computed: {
|
||||
detailIssueVisible () {
|
||||
return Object.keys(this.detailIssue.issue).length;
|
||||
}
|
||||
},
|
||||
created () {
|
||||
gl.boardService = new BoardService(this.endpoint, this.boardId);
|
||||
},
|
||||
|
|
|
@ -21,6 +21,7 @@
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
detailIssue: Store.detail,
|
||||
filters: Store.state.filters,
|
||||
showIssueForm: false
|
||||
};
|
||||
|
@ -32,6 +33,26 @@
|
|||
this.list.getIssues(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: {
|
||||
|
|
|
@ -20,11 +20,7 @@
|
|||
},
|
||||
computed: {
|
||||
issueDetailVisible () {
|
||||
if (this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
return this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
@ -29,15 +29,22 @@
|
|||
issue () {
|
||||
if (this.showSidebar) {
|
||||
this.$nextTick(() => {
|
||||
new IssuableContext(this.currentUser);
|
||||
new MilestoneSelect();
|
||||
new gl.DueDateSelectors();
|
||||
new LabelsSelect();
|
||||
new Sidebar();
|
||||
new Subscription('.subscription');
|
||||
this.issuableContext = new IssuableContext(this.currentUser);
|
||||
this.milestoneSelect = new MilestoneSelect();
|
||||
this.dueDateSelect = new gl.DueDateSelectors();
|
||||
this.labelsSelect = new LabelsSelect();
|
||||
this.sidebar = new Sidebar();
|
||||
this.subscription = new Subscription('.subscription');
|
||||
});
|
||||
} else {
|
||||
$('.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: calc(100vh - 220px);
|
||||
min-height: 475px;
|
||||
|
||||
&.is-compact {
|
||||
width: calc(100% - 290px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
{{ issue.id }}
|
||||
%a.gutter-toggle.pull-right{ role: "button",
|
||||
href: "#",
|
||||
"@click" => "closeSidebar",
|
||||
"@click.prevent" => "closeSidebar",
|
||||
"aria-label" => "Toggle sidebar" }
|
||||
= icon("times")
|
||||
.js-issuable-update
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
= render 'shared/issuable/filter', type: :boards
|
||||
|
||||
#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" }
|
||||
= icon("spinner spin")
|
||||
= render "projects/boards/components/board"
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
= render 'shared/issuable/filter', type: :boards
|
||||
|
||||
#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" }
|
||||
= icon("spinner spin")
|
||||
= render "projects/boards/components/board"
|
||||
|
|
Loading…
Reference in New Issue