Merge branch 'issue-boards-animate' into 'master'

Added animations to issue boards

Closes #25630

See merge request !8417

5 files changed, 63 insertions, 27 deletions

diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6
index d1fb0ec48e0..8d1a0f482f9 100644
--- a/app/assets/javascripts/boards/components/board.js.es6
+++ b/app/assets/javascripts/boards/components/board.js.es6
@@ -45,14 +45,28 @@
           const issue = this.list.findIssue(this.detailIssue.issue.id);
 
           if (issue) {
+            const offsetLeft = this.$el.offsetLeft;
             const boardsList = document.querySelectorAll('.boards-list')[0];
-            const right = (this.$el.offsetLeft + this.$el.offsetWidth) - boardsList.offsetWidth;
-            const left = boardsList.scrollLeft - this.$el.offsetLeft;
+            const left = boardsList.scrollLeft - offsetLeft;
+            let right = (offsetLeft + this.$el.offsetWidth);
+
+            if (window.innerWidth > 768 && boardsList.classList.contains('is-compact')) {
+              // -290 here because width of boardsList is animating so therefore
+              // getting the width here is incorrect
+              // 290 is the width of the sidebar
+              right -= (boardsList.offsetWidth - 290);
+            } else {
+              right -= boardsList.offsetWidth;
+            }
 
             if (right - boardsList.scrollLeft > 0) {
-              boardsList.scrollLeft = right;
+              $(boardsList).animate({
+                scrollLeft: right
+              }, this.sortableOptions.animation);
             } else if (left > 0) {
-              boardsList.scrollLeft = this.$el.offsetLeft;
+              $(boardsList).animate({
+                scrollLeft: offsetLeft
+              }, this.sortableOptions.animation);
             }
           }
         },
@@ -65,7 +79,7 @@
       }
     },
     mounted () {
-      const options = gl.issueBoards.getBoardSortableDefaultOptions({
+      this.sortableOptions = gl.issueBoards.getBoardSortableDefaultOptions({
         disabled: this.disabled,
         group: 'boards',
         draggable: '.is-draggable',
@@ -84,7 +98,7 @@
         }
       });
 
-      this.sortable = Sortable.create(this.$el.parentNode, options);
+      this.sortable = Sortable.create(this.$el.parentNode, this.sortableOptions);
     },
   });
 })();
diff --git a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
index a5e62ed775d..d5859444a32 100644
--- a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
+++ b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
@@ -20,6 +20,7 @@
 
   gl.issueBoards.getBoardSortableDefaultOptions = (obj) => {
     let defaultSortOptions = {
+      animation: 200,
       forceFallback: true,
       fallbackClass: 'is-dragging',
       fallbackOnBody: true,
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index c18de7b940a..f2d60bff2b5 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -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,18 @@
     }
   }
 }
+
+.right-sidebar.right-sidebar-expanded {
+  &.boards-sidebar-slide-enter-active,
+  &.boards-sidebar-slide-leave-active {
+    transition: width .2s,
+                padding .2s;
+  }
+
+  &.boards-sidebar-slide-enter,
+  &.boards-sidebar-slide-leave-active {
+    width: 0;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
diff --git a/app/views/projects/boards/components/_sidebar.html.haml b/app/views/projects/boards/components/_sidebar.html.haml
index 2125c3387c4..df7fa9ddaf2 100644
--- a/app/views/projects/boards/components/_sidebar.html.haml
+++ b/app/views/projects/boards/components/_sidebar.html.haml
@@ -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"
diff --git a/changelogs/unreleased/issue-boards-animate.yml b/changelogs/unreleased/issue-boards-animate.yml
new file mode 100644
index 00000000000..28394aec3d5
--- /dev/null
+++ b/changelogs/unreleased/issue-boards-animate.yml
@@ -0,0 +1,4 @@
+---
+title: Added animations to issue boards interactions
+merge_request:
+author: