kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Added animations to issue boards

Browse source 
- Adds animation when opening & closing the sidebar
- Adds an animation when dragging boards to a new position
- Adds animations to dragging issues around

When opening the sidebar it will also animate the scrollLeft property to
make moving to the opened issue less blunt.

Closes #25630
This commit is contained in:
Phil Hughes 2017-01-03 15:41:14 +00:00
parent c67e9bb353
commit 85a329845f
5 changed files with 48 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/assets/javascripts/boards/components/board.js.es6
View file

@ -50,9 +50,13 @@
const left = boardsList.scrollLeft - this.$el.offsetLeft;
if (right - boardsList.scrollLeft > 0) {
boardsList.scrollLeft = right;
$(boardsList).animate({
scrollLeft: right
}, 200);
} else if (left > 0) {
boardsList.scrollLeft = this.$el.offsetLeft;
$(boardsList).animate({
scrollLeft: this.$el.offsetLeft
}, 200);
}
}
},

1
app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
View file

@ -20,6 +20,7 @@
gl.issueBoards.getBoardSortableDefaultOptions = (obj) => {
let defaultSortOptions = {
animation: 200,
forceFallback: true,
fallbackClass: 'is-dragging',
fallbackOnBody: true,

15
app/assets/stylesheets/pages/boards.scss
View file

@ -74,6 +74,7 @@
height: 475px; // Needed for PhantomJS
height: calc(100vh - 220px);
min-height: 475px;
transition: width .2s;
&.is-compact {
width: calc(100% - 290px);
@ -338,3 +339,17 @@
}
}
}
.right-sidebar.right-sidebar-expanded {
&.boards-sidebar-slide-enter-active,
&.boards-sidebar-slide-leave-active {
transition: all .2s;
}
&.boards-sidebar-slide-enter,
&.boards-sidebar-slide-leave-active {
width: 0;
padding-left: 0;
padding-right: 0;
}
}

43
app/views/projects/boards/components/_sidebar.html.haml
View file

@ -1,23 +1,24 @@
%board-sidebar{ "inline-template" => true,
":current-user" => "#{current_user ? current_user.to_json(only: [:username, :id, :name], methods: [:avatar_url]) : {}}" }
%aside.right-sidebar.right-sidebar-expanded.issue-boards-sidebar{ "v-show" => "showSidebar" }
.issuable-sidebar
.block.issuable-sidebar-header
%span.issuable-header-text.hide-collapsed.pull-left
%strong
{{ issue.title }}
%br/
%span
= precede "#" do
{{ issue.id }}
%a.gutter-toggle.pull-right{ role: "button",
href: "#",
"@click.prevent" => "closeSidebar",
"aria-label" => "Toggle sidebar" }
= custom_icon("icon_close", size: 15)
.js-issuable-update
= render "projects/boards/components/sidebar/assignee"
= render "projects/boards/components/sidebar/milestone"
= render "projects/boards/components/sidebar/due_date"
= render "projects/boards/components/sidebar/labels"
= render "projects/boards/components/sidebar/notifications"
%transition{ name: "boards-sidebar-slide" }
%aside.right-sidebar.right-sidebar-expanded.issue-boards-sidebar{ "v-show" => "showSidebar" }
.issuable-sidebar
.block.issuable-sidebar-header
%span.issuable-header-text.hide-collapsed.pull-left
%strong
{{ issue.title }}
%br/
%span
= precede "#" do
{{ issue.id }}
%a.gutter-toggle.pull-right{ role: "button",
href: "#",
"@click.prevent" => "closeSidebar",
"aria-label" => "Toggle sidebar" }
= custom_icon("icon_close", size: 15)
.js-issuable-update
= render "projects/boards/components/sidebar/assignee"
= render "projects/boards/components/sidebar/milestone"
= render "projects/boards/components/sidebar/due_date"
= render "projects/boards/components/sidebar/labels"
= render "projects/boards/components/sidebar/notifications"

4
changelogs/unreleased/issue-boards-animate.yml Normal file
View file

@ -0,0 +1,4 @@
---
title: Added animations to issue boards interactions
merge_request:
author: