From 69a166d7f4e7768cfa79c133b45b3e6f7601e9b7 Mon Sep 17 00:00:00 2001
From: Artur Janicki <artur.janicki@contractors.roche.com>
Date: Tue, 3 Jul 2018 14:40:16 +0200
Subject: [PATCH] #13704: add effects for opening the panel

Feature #13704

Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki@contractors.roche.com>
---
 .../details-panel/details-panel.tsx                | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/views-components/details-panel/details-panel.tsx b/src/views-components/details-panel/details-panel.tsx
index 4bee8469..ac4b151f 100644
--- a/src/views-components/details-panel/details-panel.tsx
+++ b/src/views-components/details-panel/details-panel.tsx
@@ -39,7 +39,7 @@ class DetailsPanel extends React.Component<DetailsPanelProps & WithStyles<CssRul
 		const { classes, toggleDrawer, isOpened } = this.props;
 		const { tabsValue } = this.state;
         return (
-            <div className={classes.container}>
+            <div className={classnames([classes.container, { [classes.opened]: isOpened }])}>
 				<Drawer variant="persistent" anchor="right" open={isOpened} onClose={() => toggleDrawer(false)}
                     classes={{
                         paper: classes.drawerPaper
@@ -105,16 +105,22 @@ class DetailsPanel extends React.Component<DetailsPanelProps & WithStyles<CssRul
 
 }
 
-type CssRules = 'drawerPaper' | 'container' | 'headerContainer' 
+type CssRules = 'drawerPaper' | 'container' | 'opened' | 'headerContainer' 
 	| 'tabsIndicator' | 'tabRoot' | 'tabContainer' | 'tabSelected' | 'gridLabel';
 
 const drawerWidth = 320;
 const purple = '#692498';
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
 	container: {
+        width: 0,
 		position: 'relative',
-		height: 'auto'
-	},
+        height: 'auto',
+        transition: 'width 0.5s ease',
+        '&$opened': {
+            width: drawerWidth
+        }
+    },
+    opened: {},
     drawerPaper: {
         position: 'relative',
         width: drawerWidth
-- 
2.30.2