Merge pull request #77 from meriadec/master

Dev toolbar, and little style updates

src/components/DevToolbar.js

@@ -0,0 +1,122 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import reduce from 'lodash/fp/reduce'
+import flow from 'lodash/fp/flow'
+import filter from 'lodash/fp/filter'
+import sortBy from 'lodash/fp/sortBy'
+import styled from 'styled-components'
+import color from 'color'
+
+import Box from 'components/base/Box'
+
+import theme from 'styles/theme'
+
+type HslColor = {
+  color: Array<number>,
+}
+
+type ColorType = {
+  name: string,
+  val: string,
+  color: {
+    isDark: () => boolean,
+    hsl: () => HslColor,
+  },
+}
+
+const transform = flow(
+  reduce.convert({ cap: false })((acc, cur, key) => {
+    const c = color(cur)
+    return [
+      ...acc,
+      {
+        name: key,
+        val: cur,
+        color: c,
+        isDark: c.isDark(),
+      },
+    ]
+  }, []),
+  filter(el => el.name !== 'transparent'),
+  sortBy(el => el.color.hsl().color[2]),
+)
+
+const colors: Array<ColorType> = transform(theme.colors)
+
+const Container = styled(Box).attrs({
+  bg: 'night',
+  p: 1,
+  color: 'white',
+  fontSize: 0,
+})`
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 1;
+  border-top-left-radius: 3px;
+  transition: ease-in-out transform 300ms;
+  transform: translate3d(0, ${p => (p.isOpened ? '0' : '100%')}, 0);
+`
+
+const Handle = styled(Box).attrs({
+  bg: 'night',
+})`
+  cursor: pointer;
+  padding: 3px 8px 3px 8px;
+  position: absolute;
+  bottom: 100%;
+  right: 5px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+`
+
+const Colors = styled(Box).attrs({
+  horizontal: true,
+  align: 'flex-start',
+})`
+  flex-wrap: wrap;
+  width: 416px;
+`
+
+const Cl = styled(Box).attrs({
+  align: 'center',
+  justify: 'center',
+  p: 2,
+})`
+  border: 2px solid white;
+  margin: 2px;
+  width: 100px;
+  user-select: text;
+  cursor: text;
+`
+
+const Color = ({ color }: { color: ColorType }) => (
+  <Cl bg={color.val} color={color.isDark ? 'white' : 'night'}>
+    {color.name}
+  </Cl>
+)
+
+type State = {
+  isOpened: boolean,
+}
+
+class DevToolbar extends PureComponent<any, State> {
+  state = {
+    isOpened: false,
+  }
+
+  handleToggle = () => this.setState({ isOpened: !this.state.isOpened })
+
+  render() {
+    const { isOpened } = this.state
+    return (
+      <Container isOpened={isOpened}>
+        <Handle onClick={this.handleToggle}>{'DEV'}</Handle>
+        <Colors>{colors.map(color => <Color key={color.name} color={color} />)}</Colors>
+      </Container>
+    )
+  }
+}
+
+export default DevToolbar

src/components/SideBar/index.js

@@ -124,7 +124,7 @@ class SideBar extends PureComponent<Props> {
             </GrowScroll>
           </Box>
         </Box>
-        <Box borderColor="grey" borderWidth={1} borderTop horizontal py={1}>
+        <Box borderColor="argile" borderWidth={1} borderTop horizontal py={2}>
           <Box align="center" justify="center">
             <Connected state={currentDevice !== null} />
           </Box>

src/components/TopBar.js

@@ -14,7 +14,7 @@ import { hasPassword } from 'reducers/settings'
 import Box from 'components/base/Box'
 
 const Container = styled(Box).attrs({
-  borderColor: 'grey',
+  borderColor: 'argile',
   borderWidth: 1,
   borderBottom: true,
   noShrink: true,

src/components/Wrapper.js

@@ -17,6 +17,7 @@ import AppRegionDrag from 'components/AppRegionDrag'
 import IsUnlocked from 'components/IsUnlocked'
 import SideBar from 'components/SideBar'
 import TopBar from 'components/TopBar'
+import DevToolbar from 'components/DevToolbar'
 
 class Wrapper extends Component<{}> {
   render() {
@@ -27,6 +28,8 @@ class Wrapper extends Component<{}> {
         <IsUnlocked
           render={() => (
             <Fragment>
+              {__DEV__ && <DevToolbar />}
+
               {Object.entries(modals).map(([name, ModalComponent]: [string, any]) => (
                 <ModalComponent key={name} />
               ))}

src/components/base/CheckBox/index.js

@@ -1,7 +1,6 @@
 // @flow
 
 import React from 'react'
-import noop from 'lodash/noop'
 import styled, { keyframes } from 'styled-components'
 
 import { Tabbable } from 'components/base/Box'
@@ -54,14 +53,14 @@ type Props = {
 function CheckBox(props: Props) {
   const { isChecked, onChange, ...p } = props
   return (
-    <Base isChecked={isChecked} onClick={() => onChange(!isChecked)} {...p}>
+    <Base isChecked={isChecked} onClick={() => onChange && onChange(!isChecked)} {...p}>
       {isChecked && <IconWrapper name="check" />}
     </Base>
   )
 }
 
 CheckBox.defaultProps = {
-  onChange: noop,
+  onChange: null,
 }
 
 export default CheckBox

src/components/base/Radio/index.js

@@ -1,7 +1,6 @@
 // @flow
 
 import React from 'react'
-import noop from 'lodash/noop'
 import styled from 'styled-components'
 
 import { Tabbable } from 'components/base/Box'
@@ -63,11 +62,11 @@ type Props = {
 
 function Radio(props: Props) {
   const { isChecked, onChange } = props
-  return <Base {...props} isChecked={isChecked} onClick={() => onChange(!isChecked)} />
+  return <Base {...props} isChecked={isChecked} onClick={() => onChange && onChange(!isChecked)} />
 }
 
 Radio.defaultProps = {
-  onChange: noop,
+  onChange: null,
 }
 
 export default Radio