Merge pull request #58 from izumin5210/izumin5210/styled-components

styled-components
izumin5210 · May 21, 2017 · f986df8 · f986df8
2 parents 100371a + 423037d
commit f986df8
Show file tree

Hide file tree

Showing 24 changed files with 325 additions and 207 deletions.
diff --git a/.flowconfig b/.flowconfig
@@ -2,6 +2,7 @@
 .*/node_modules/immutable/type-definitions/tests/.*
 .*/node_modules/conventional-changelog-core/test/.*
 .*/node_modules/stylelint/.*
+.*/node_modules/styled-components/.*
 ./decls
 
 [include]

diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "remark-yaml-meta": "https://github.com/izumin5210/remark-yaml-meta.git#3387774",
     "reselect": "^3.0.0",
     "scrollparent": "^2.0.1",
+    "styled-components": "^1.4.6",
     "sweet-scroll": "^2.2.1",
     "unist-builder": "^1.0.2",
     "unist-util-visit": "^1.1.1"
@@ -116,7 +117,6 @@
     "postinstall": "flow-typed install",
     "prebuild": "yarn run clean",
     "prepackage": "yarn build",
-    "postinstall": "flow-typed install",
     "pretest": "run-p lint typecheck",
     "start": "electron .",
     "start:dev": "run-p start:dev:*",

diff --git a/src/components/common/Panes.css b/src/components/common/Panes.css
diff --git a/src/components/common/Panes.js b/src/components/common/Panes.js
@@ -1,9 +1,61 @@
 // @flow
 import SplitPane from 'react-split-pane'
+import styled from 'styled-components'
 
 import type { Element } from 'react'
 
-import styles from './Panes.css'
+import * as colors from 'settings/colors'
+
+const resizerClassName = 'resizer'
+
+const PanesWrapper = styled.div`
+  .${resizerClassName} {
+    background: #000;
+    opacity: 0.2;
+    z-index: 1;
+    box-sizing: border-box;
+    background-clip: padding-box;
+
+    &:hover {
+      transition: all 2s ease;
+    }
+
+    &.horizontal {
+      height: 11px;
+      margin: -5px 0;
+      border-top: 5px solid ${colors.white};
+      border-bottom: 5px solid ${colors.white};
+      cursor: row-resize;
+      width: 100%;
+
+      &:hover {
+        border-top: 5px solid ${colors.blackForeground500};
+        border-bottom: 5px solid ${colors.blackForeground500};
+      }
+    }
+
+    &.vertical {
+      width: 11px;
+      margin: 0 -5px;
+      border-left: 5px solid ${colors.white};
+      border-right: 5px solid ${colors.white};
+      cursor: col-resize;
+
+      &:hover {
+        border-left: 5px solid ${colors.blackForeground500};
+        border-right: 5px solid ${colors.blackForeground500};
+      }
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+
+      &:hover {
+        border-color: ${colors.transparent};
+      }
+    }
+  }
+`
 
 type Props = {
   split: 'vertical' | 'horizontal',
@@ -12,12 +64,13 @@ type Props = {
 
 export default function Panes ({ children, ...rest }: Props) {
   return (
-    <SplitPane
-      {...rest}
-      resizerClassName={styles.resizer}
-      paneStyle={{ overflowY: 'auto' }}
-    >
-      { children }
-    </SplitPane>
+    <PanesWrapper>
+      <SplitPane
+        {...{ resizerClassName, ...rest }}
+        paneStyle={{ overflowY: 'auto' }}
+      >
+        { children }
+      </SplitPane>
+    </PanesWrapper>
   )
 }
diff --git a/src/components/editor/Editor.css b/src/components/editor/Editor.css
diff --git a/src/components/editor/Editor.js b/src/components/editor/Editor.js
@@ -12,13 +12,14 @@ import { defaultBody } from 'settings/constants'
 import type { KeyboardHandler, Position } from 'types'
 import type Page from 'entities/Page'
 
-import styles from './Editor.css'
+import Wrapper from './Wrapper'
 
 type Props = {
   url: string,
   body: string,
   keyboardHandler: KeyboardHandler,
   currentPage: ?Page,
+  currentPageRangeClassName: string,
   setBody: (body: string) => void,
   setCursor: (pos: Position) => void,
 }
@@ -28,7 +29,13 @@ type State = {
   currentPageMarkerId: ?number,
 }
 
-export default class Editor extends PureComponent<void, Props, State> {
+const defaultProps = {
+  currentPageRangeClassName: 'currentPageRange',
+}
+
+export default class Editor extends PureComponent<typeof defaultProps, Props, State> {
+  static defaultProps = defaultProps
+
   constructor (props: Props) {
     super(props)
     this.state = {
@@ -51,7 +58,7 @@ export default class Editor extends PureComponent<void, Props, State> {
     }
   }
 
-  componentWillReceiveProps ({ url, body, currentPage }: Props) {
+  componentWillReceiveProps ({ url, body, currentPage, currentPageRangeClassName }: Props) {
     if (url !== this.props.url) {
       this.handleChange(body)
     }
@@ -63,7 +70,7 @@ export default class Editor extends PureComponent<void, Props, State> {
       const { id: currentPageMarkerId } = session.highlightLines(
         beginRow - 1,
         endRow - 1,
-        `ace_active-line ${styles.currentPageRange}`,
+        `ace_active-line ${currentPageRangeClassName}`,
       )
       const { currentPageMarkerId: prevPageMarkerId } = this.state
       this.setState({ currentPageMarkerId }, () => {
@@ -117,17 +124,21 @@ export default class Editor extends PureComponent<void, Props, State> {
 
   render () {
     return (
-      <AceEditor
-        mode='markdown'
-        theme='tomorrow'
-        keyboardHandler={this.props.keyboardHandler}
-        width='100%'
-        height='100%'
-        value={this.state.body}
-        onChange={this.handleChange}
-        commands={this.commands}
-        ref={(c) => { this.editorComponent = c }}
-      />
+      <Wrapper
+        currentPageRangeClassName={this.props.currentPageRangeClassName}
+       >
+        <AceEditor
+          mode='markdown'
+          theme='tomorrow'
+          keyboardHandler={this.props.keyboardHandler}
+          width='100%'
+          height='100%'
+          value={this.state.body}
+          onChange={this.handleChange}
+          commands={this.commands}
+          ref={(c) => { this.editorComponent = c }}
+        />
+      </Wrapper>
     )
   }
 }
diff --git a/src/components/editor/Wrapper.js b/src/components/editor/Wrapper.js
@@ -0,0 +1,19 @@
+// @flow
+import styled, { css } from 'styled-components'
+
+type Props = {
+  currentPageRangeClassName: string
+}
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+
+  ${(props: Props) => css`
+    .${props.currentPageRangeClassName} {
+      opacity: 0.8;
+    }
+  `}
+`
+
+export default Wrapper
diff --git a/src/components/preview/Page.css b/src/components/preview/Page.css
diff --git a/src/components/preview/Page.js b/src/components/preview/Page.js
@@ -6,7 +6,7 @@ import type { Children, Element } from 'react'
 
 import { default as highlightDefault } from 'settings/highlightStyles'
 
-import styles from './Page.css'
+import PageWrapper from './PageWrapper'
 
 type Props = {
   className: string,
@@ -18,7 +18,7 @@ type Props = {
 }
 
 export default class Page extends PureComponent<void, Props, void> {
-  static nodeStyle = {
+  static wrapperStyle = {
     width: '100%',
     height: '100%',
     overflow: 'hidden',
@@ -27,37 +27,6 @@ export default class Page extends PureComponent<void, Props, void> {
   // for lint
   props: Props
 
-  get width (): number {
-    // FIXME
-    const { width, exportingAsPdf } = this.props
-    return exportingAsPdf ? 1024 : width
-  }
-
-  get height (): number {
-    // TODO: tweak slide acpect ratio
-    return 0.75 * this.width
-  }
-
-  get fontSize (): number {
-    // TODO: tweak base font-size
-    return this.props.fontSize * (this.width / 1024)
-  }
-
-  get style (): Object {
-    const { exportingAsPdf } = this.props
-    const { width, height, fontSize } = this
-    return Object.assign(
-      {},
-      {
-        height,
-        minHeight: height,
-        maxHeight: height,
-        fontSize,
-      },
-      exportingAsPdf ? { width } : {},
-    )
-  }
-
   get userStyles (): Array<Element<*>> {
     return this.props.userStyles.map((style, i) => (
       <style type='text/css' key={`userStyle[${i}]`}>{ style }</style>
@@ -66,21 +35,24 @@ export default class Page extends PureComponent<void, Props, void> {
 
   render () {
     return (
-      <ShadowDom nodeName='div'>
-        <section
-          className={styles.page}
-          style={this.style}
-        >
-          <div
-            className={this.props.className}
-            style={Page.nodeStyle}
-          >
-            { this.props.children }
-            { this.userStyles }
-            <link rel='stylesheet' href={highlightDefault} />
+      <PageWrapper
+        screenWidth={this.props.width}
+        baseFontSize={this.props.fontSize}
+        exporting={this.props.exportingAsPdf}
+      >
+        <ShadowDom nodeName='div'>
+          <div style={Page.wrapperStyle}>
+            <div
+              className={this.props.className}
+              style={Page.wrapperStyle}
+            >
+              { this.props.children }
+              { this.userStyles }
+              <link rel='stylesheet' href={highlightDefault} />
+            </div>
           </div>
-        </section>
-      </ShadowDom>
+        </ShadowDom>
+      </PageWrapper>
     )
   }
 }