From aec53b25d188ebef328e7d723afdc8ab7b030432 Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Fri, 16 Jul 2021 23:59:26 +0200
Subject: [PATCH] Better toggle for the graph editor

---
 .../SequenceEditorPanel/GraphEditorToggle.tsx | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx
index 3b2bbdc..3f2e3d9 100644
--- a/theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx
+++ b/theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx
@@ -5,6 +5,7 @@ import getStudio from '@theatre/studio/getStudio'
 import React, {useCallback} from 'react'
 import styled from 'styled-components'
 import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEditorPanel/layout/layout'
+import {VscTriangleUp} from 'react-icons/all'
 
 const Container = styled.button`
   outline: none;
@@ -17,7 +18,7 @@ const Container = styled.button`
   z-index: 1;
   position: absolute;
 
-  padding: 0 8px;
+  padding: 4px 8px;
   display: flex;
   color: #656d77;
   line-height: 20px;
@@ -26,6 +27,23 @@ const Container = styled.button`
   &:hover {
     color: white;
   }
+
+  & > svg {
+    transition: transform 0.3s;
+    transform: rotateZ(0deg);
+  }
+
+  &:hover > svg {
+    transform: rotateZ(-20deg);
+  }
+
+  &.open > svg {
+    transform: rotateZ(-180deg);
+  }
+
+  &.open:hover > svg {
+    transform: rotateZ(-160deg);
+  }
 `
 
 const GraphEditorToggle: React.FC<{
@@ -41,7 +59,15 @@ const GraphEditorToggle: React.FC<{
       })
     })
   }, [layoutP])
-  return <Container onClick={toggle}>Graph Editor</Container>
+  return (
+    <Container
+      onClick={toggle}
+      title={'Toggle graph editor'}
+      className={isOpen ? 'open' : ''}
+    >
+      <VscTriangleUp />
+    </Container>
+  )
 }
 
 export default GraphEditorToggle