Improves window chrome and demos dragging. (#11)

Author: skellock

package.json

@@ -71,5 +71,5 @@
     "postinstall": "Used by electron-builder to build native dependencies.",
     "start": "Starts the app in dev mode."
   },
-  "version": "0.5.0"
+  "version": "0.6.0"
 }

src/main/create-window.ts

@@ -12,8 +12,13 @@ const DIMENSIONS = { width: 800, height: 500 }
  * @return The main BrowserWindow.
  */
 export function createWindow(appPath: string) {
-  const window = new BrowserWindow(DIMENSIONS)
-
+  const window = new BrowserWindow({
+    ...DIMENSIONS,
+    show: false,
+    useContentSize: true,
+    titleBarStyle: 'hidden'
+  })
+  
   // load entry html page in the renderer.
   window.loadURL(
     format({
@@ -23,5 +28,12 @@ export function createWindow(appPath: string) {
     })
   )
 
+  // only appear once we've loaded
+  window.webContents.on('did-finish-load', () => {
+    window.show()
+    window.focus()
+  })
+
+
   return window
 }

src/renderer/app/app.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Text, Logo, FunDog } from '../platform'
+import { Text, Logo, FunDog, Vignette } from '../platform'
 // import * as log from 'electron-log'
 
 const appStyle = {
@@ -19,6 +19,7 @@ const appStyle = {
   cursor: 'default'
 }
 
+
 const textStyle = {
   paddingTop: 20,
   paddingBottom: 20
@@ -37,6 +38,7 @@ export class App extends React.Component<{}, {}> {
   render() {
     return (
       <div style={appStyle}>
+        <Vignette opacity={0.3} />
         <Logo />
         <Text style={textStyle}>Wake up and smell the electrons.</Text>
         <FunDog />

src/renderer/index.tsx

@@ -3,3 +3,7 @@ import * as ReactDOM from 'react-dom'
 import { App } from './app/app'
 
 ReactDOM.render(<App />, document.getElementById('root'))
+
+// prevent drag & drop replacing the whole browser window
+document.addEventListener('dragover', event => event.preventDefault())
+document.addEventListener('drop', event => event.preventDefault())

src/renderer/platform/components/fun-dog/fun-dog.tsx

@@ -9,5 +9,12 @@ const style = {
 }
 
 export function FunDog() {
-  return <img src={dogImage} style={style} alt="Photo by Braydon Anderson on Unsplash" />
+  return (
+    <img
+      draggable={false}
+      src={dogImage}
+      style={style}
+      alt="Photo by Braydon Anderson on Unsplash"
+    />
+  )
 }

src/renderer/platform/components/index.ts

@@ -3,3 +3,4 @@
 export * from './text/text'
 export * from './logo/logo'
 export * from './fun-dog/fun-dog'
+export * from './vignette/vignette'

src/renderer/platform/components/logo/logo.tsx

@@ -1,12 +1,21 @@
 import * as React from 'react'
 import icon from './electron-icon.svg'
+import { Text } from '..'
 
-const style = {
-  width: 80,
-  height: 80,
-  animation: 'spin360 infinite 5s linear'
+const containerStyle = {
+  WebkitAppRegion: 'drag',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center'
 }
+const imageStyle = { width: 80, height: 80, animation: 'spin360 infinite 5s linear' }
+const textStyle = { WebkitAppRegion: 'no-drag', fontSize: '0.6rem' }
 
 export function Logo() {
-  return <img src={icon} style={style} />
+  return (
+    <div style={containerStyle}>
+      <img draggable={false} src={icon} style={imageStyle} />
+      <Text style={textStyle}>Drag the logo to move the window.</Text>
+    </div>
+  )
 }

src/renderer/platform/components/vignette/vignette.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react'
+
+export interface VignetteProps {
+  /** the intensity of the shadow from 0.0 to 1.0 */
+  opacity?: number
+  /** the size of the shadow (default '200px') */
+  size?: number | string
+}
+
+/**
+ * Draws a shadowed subtle border.
+ */
+export function Vignette(props: VignetteProps) {
+  const opacity = props.opacity || 0.3
+  const size = props.size || '200px'
+
+  const vignetteStyle = {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    boxShadow: `0 0 ${size} rgba(0,0,0,${opacity}) inset`
+  }
+
+  return <div style={vignetteStyle} />
+}

src/renderer/reset.css

@@ -3,6 +3,9 @@
 *:focus {
   outline: 0;
 }
+html, body {
+  user-select: none;
+}
 
 body,
 h1,