From 60b1bcd59c4b1b0b159d63e8c1090010d3c1238b Mon Sep 17 00:00:00 2001
From: Steve Kellock <steve@kellock.ca>
Date: Sun, 6 Aug 2017 00:39:24 -0400
Subject: [PATCH] Adds an entrance animation component for nicer startup.

---
 src/main/main-window/main-window.ts           |  4 ++
 .../welcome-screen/sample-tabs.tsx            | 18 +++--
 .../enter-animation/enter-animation.tsx       | 66 +++++++++++++++++++
 .../components/enter-animation/index.ts       |  1 +
 src/renderer/platform/components/index.ts     |  1 +
 src/renderer/platform/components/tab/tab.tsx  | 10 +--
 6 files changed, 91 insertions(+), 9 deletions(-)
 create mode 100644 src/renderer/platform/components/enter-animation/enter-animation.tsx
 create mode 100644 src/renderer/platform/components/enter-animation/index.ts

diff --git a/src/main/main-window/main-window.ts b/src/main/main-window/main-window.ts
index a333856..507979f 100644
--- a/src/main/main-window/main-window.ts
+++ b/src/main/main-window/main-window.ts
@@ -33,6 +33,10 @@ export function createMainWindow(appPath: string) {
     autoHideMenuBar: true,
     backgroundColor: '#fff',
     title: app.getName(),
+    webPreferences: {
+      backgroundThrottling: false,
+      textAreasAreResizable: false,
+    },
   })
 
   // maximize if we did before
diff --git a/src/renderer/features/example-using-tabs/welcome-screen/sample-tabs.tsx b/src/renderer/features/example-using-tabs/welcome-screen/sample-tabs.tsx
index 6efd058..2fad087 100644
--- a/src/renderer/features/example-using-tabs/welcome-screen/sample-tabs.tsx
+++ b/src/renderer/features/example-using-tabs/welcome-screen/sample-tabs.tsx
@@ -8,6 +8,7 @@ import {
   styles,
   cssProps,
   commandOrControlKey,
+  EnterAnimation,
 } from '../../../platform'
 import { css, compose } from 'glamor'
 
@@ -22,8 +23,10 @@ const KEY_1 = `${commandOrControlKey}+1`
 const KEY_2 = `${commandOrControlKey}+2`
 const KEY_3 = `${commandOrControlKey}+3`
 
-const ROOT = compose(
-  styles.windowDrag,
+// an extra layer just for the drag style due to electron bug
+const ROOT = styles.windowDrag
+
+const BAR = compose(
   styles.row,
   cssProps({
     paddingLeft: spacing.medium,
@@ -57,11 +60,16 @@ export class SampleTabs extends React.PureComponent<SampleTabsProps, {}> {
 
   render() {
     const { tab } = this.props
+
     return (
       <div {...css(ROOT)}>
-        <Tab onClick={this.changeTab1} active={tab === 'one'} text='doggo' />
-        <Tab onClick={this.changeTab2} active={tab === 'two'} text='paragraphs' />
-        <Tab onClick={this.changeTab3} active={tab === 'three'} text='empty' />
+        <EnterAnimation animation='slide' delay={100} y={-60}>
+          <div {...BAR}>
+            <Tab onClick={this.changeTab1} active={tab === 'one'} text='doggo' />
+            <Tab onClick={this.changeTab2} active={tab === 'two'} text='paragraphs' />
+            <Tab onClick={this.changeTab3} active={tab === 'three'} text='empty' />
+          </div>
+        </EnterAnimation>
       </div>
     )
   }
diff --git a/src/renderer/platform/components/enter-animation/enter-animation.tsx b/src/renderer/platform/components/enter-animation/enter-animation.tsx
new file mode 100644
index 0000000..679e92a
--- /dev/null
+++ b/src/renderer/platform/components/enter-animation/enter-animation.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react'
+import { cssProps } from '../..'
+import { css } from 'glamor'
+
+interface EnterAnimationState {
+  mounted?: boolean
+}
+
+export interface EnterAnimationProps {
+  children?: React.ReactNode
+  /** the type of animation */
+  animation: 'grow' | 'slide'
+  /** how long to wait in milliseconds before starting */
+  delay?: number
+  /** how fast to complete the animation in milliseconds */
+  speed?: number
+  /** how far vertically to slide */
+  y?: number
+}
+
+const DEFAULT_SPEED = 250
+const DEFAULT_DELAY = 0
+
+const SCALE_FROM = `scale(0.01, 0.01)`
+
+const FINISH = cssProps({ transform: `translate(0, 0) scale(1, 1)` })
+
+export class EnterAnimation extends React.PureComponent<EnterAnimationProps, EnterAnimationState> {
+  state: EnterAnimationState = {}
+
+  componentDidMount() {
+    setTimeout(() => this.setState({ mounted: true }), 1)
+  }
+
+  render() {
+    // values
+    const { mounted } = this.state
+    const { speed = DEFAULT_SPEED, delay = DEFAULT_DELAY, animation, y = 0 } = this.props
+
+    // css properties
+    let transform: string
+
+    switch (animation) {
+      case 'slide':
+        transform = `translate(0, ${y}px)`
+        break
+
+      // grow
+      default:
+        transform = SCALE_FROM
+        break
+    }
+
+    const transition = `transform ${speed || DEFAULT_SPEED}ms ${delay || DEFAULT_DELAY}ms`
+
+    // style props
+    const starting = css(cssProps({ transform, transition }))
+    const finishing = css(mounted && FINISH)
+
+    return (
+      <div {...starting} {...finishing}>
+        {this.props.children}
+      </div>
+    )
+  }
+}
diff --git a/src/renderer/platform/components/enter-animation/index.ts b/src/renderer/platform/components/enter-animation/index.ts
new file mode 100644
index 0000000..49aa90e
--- /dev/null
+++ b/src/renderer/platform/components/enter-animation/index.ts
@@ -0,0 +1 @@
+export * from './enter-animation'
diff --git a/src/renderer/platform/components/index.ts b/src/renderer/platform/components/index.ts
index 8829ec9..b5911c0 100644
--- a/src/renderer/platform/components/index.ts
+++ b/src/renderer/platform/components/index.ts
@@ -2,3 +2,4 @@ export * from './text'
 export * from './scrollable-content'
 export * from './centered-content'
 export * from './tab'
+export * from './enter-animation'
diff --git a/src/renderer/platform/components/tab/tab.tsx b/src/renderer/platform/components/tab/tab.tsx
index e07664d..b918746 100644
--- a/src/renderer/platform/components/tab/tab.tsx
+++ b/src/renderer/platform/components/tab/tab.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { CSSProperties } from 'react'
-import { colors, spacing, fontSizes, Text, styles, cssProps } from '../..'
+import { colors, spacing, fontSizes, Text, styles, cssProps, EnterAnimation } from '../..'
 import { css, compose } from 'glamor'
 
 export interface TabProps {
@@ -39,8 +39,10 @@ export function Tab(props: TabProps) {
   const textStyle = css(BASE_TEXT, props.active && ACTIVE_TEXT)
 
   return (
-    <div {...styleProps} onClick={props.onClick}>
-      <Text style={textStyle} text={props.text} />
-    </div>
+    <EnterAnimation animation='grow' speed={100} delay={400}>
+      <div {...styleProps} onClick={props.onClick}>
+        <Text style={textStyle} text={props.text} />
+      </div>
+    </EnterAnimation>
   )
 }