Merge pull request #282 from FredericHeem/photoshop-color-picker

Photoshop color picker

client/src/app/components/Page.js

@@ -2,7 +2,5 @@ import glamorous from 'glamorous';
 
 export default () => glamorous.div({
   maxWidth: 600,
-  '@media(min-width: 600px)': {
-    width: '100%',
-  }
+  width: '100%'
 });

client/src/app/components/Paper.js

@@ -1,10 +1,13 @@
 import glamorous from "glamorous";
 
-export default (context) => {
+export default context => {
   const { theme } = context;
-  return glamorous('div')(() => ({
+  return glamorous("div")(() => ({
     boxShadow: `2px 2px 2px 2px ${theme.palette.borderColor}`,
-    padding: 10,
-    margin: 20
+    padding: 20,
+    margin: 10,
+    "@media(max-width: 600px)": {
+      margin: 0
+    }
   }));
-}
+};

client/src/app/components/alert/alert.examples.js

@@ -1,17 +1,19 @@
 import React from "react";
+import paper from "components/Paper";
 import alert from "./alert";
 
 export default context => {
   const { tr } = context;
+  const Paper = paper(context);
   const Alert = alert(context);
   return function AlertExamples() {
     return (
-      <div>
+      <Paper>
         <h3>{tr.t("Alert")}</h3>
         <Alert.Danger type="danger" message="Alert danger" />
         <Alert.Warning message="Alert warning" />
         <Alert.Info message="Alert info message" title="My Title" code="500" />
-      </div>
+      </Paper>
     );
   };
 };

client/src/app/components/button/button.examples.js

@@ -1,38 +1,50 @@
 import React from "react";
+import glamorous from "glamorous";
 import button from "mdlean/lib/button";
+import paper from "components/Paper";
 /* eslint-disable jsx-extras/jsx-no-string-literals */
 export default context => {
   const Button = button(context);
+  const Paper = paper(context);
+  const ButtonExamplesView = glamorous(Paper)({
+    maxWidth: 500,
+  });
+
+  const ButtonGroupView = glamorous("div")({
+    "> button": {
+      margin: 6
+    }
+  });
 
   return function buttonExamples() {
     return (
-      <div>
+      <ButtonExamplesView>
         <h3>Flat</h3>
-        <p>
+        <ButtonGroupView>
           <Button label="FLAT LABEL" />
           <Button primary>FLAT PRIMARY</Button>
           <Button accent>FLAT ACCENT</Button>
           <Button ripple label="RIPPLE FLAT" />
           <Button disabled label="disabled FLAT LABEL" />
-        </p>
+        </ButtonGroupView>
         <h3>Raised</h3>
-        <p>
+        <ButtonGroupView>
           <Button raised label="RAISED FLAT" />
           <Button raised primary>RAISED PRIMARY</Button>
           <Button raised accent>RAISED ACCENT</Button>
           <Button raised ripple label="RAISED RIPPLE" />
           <Button raised accent disabled>disabled RAISED ACCENT </Button>
-        </p>
+        </ButtonGroupView>
         <h3>Primary</h3>
-        <p>
+        <ButtonGroupView>
           <Button primary>PRIMARY</Button>
           <Button primary raised>PRIMARY RAISED</Button>
           <Button primary ripple raised>primary RIPPLE RAISED</Button>
           <Button primary disabled>
             primary disabled
           </Button>
-        </p>
-      </div>
+        </ButtonGroupView>
+      </ButtonExamplesView>
     );
   };
 };

client/src/app/components/componentGuide.js

@@ -4,19 +4,21 @@ import spinners from "./spinner/spinner.examples";
 import alerts from "./alert/alert.examples";
 import panels from "./panel/panel.examples";
 import inputs from "./input/input.examples";
-import button from "./button/button.examples";
+import buttons from "./button/button.examples";
 
 export default context => {
   const { tr, parts } = context;
+
   const ViewContainer = glamorous("div")({
     display: "flex",
     flexWrap: "wrap",
-    justifyContent: "center"
+    justifyContent: "flex-start"
   });
 
   const GuideView = glamorous("div")({
     //height: "100vh",
-    display: "flex"
+    display: "flex",
+    margin: 20
   });
 
   const Content = glamorous("div")({
@@ -26,6 +28,7 @@ export default context => {
 
   return function ComponentGuide() {
     //console.log("ComponentGuide")
+
     return (
       <GuideView>
         <Content>
@@ -40,9 +43,9 @@ export default context => {
             {tr.t("Components")}
           </h2>
           <ViewContainer>
-            {h(alerts(context))}
+            {h(buttons(context))}
             {h(inputs(context))}
-            {h(button(context))}
+            {h(alerts(context))}
             {h(spinners(context))}
             {h(panels(context))}
           </ViewContainer>

client/src/app/components/input/input.examples.js

@@ -1,19 +1,38 @@
 import React from "react";
 import input from "./input";
+import glamorous from "glamorous";
+import paper from "components/Paper";
 
 export default context => {
   const { tr } = context;
+  const Paper = paper(context);
   const InputEmpty = input(context);
   const InputWithValue = input(context);
   const InputDisabled = input(context);
+  const InputExamplesView = glamorous(Paper)({
+  });
+  const ListView = glamorous("div")({
+    "> div": {
+      marginBottom: 30
+    }
+  });
   return function InputExamples() {
     return (
-      <div>
+      <InputExamplesView>
         <h3>{tr.t("Input")}</h3>
-        <InputEmpty label={tr.t("Input Text Empty")} />
-        <InputWithValue defaultValue="something" label={tr.t("Input with value")} />
-        <InputDisabled disabled defaultValue="disabled" label={tr.t("Input disabled")} />
-      </div>
+        <ListView>
+          <InputEmpty label={tr.t("Input Text Empty")} />
+          <InputWithValue
+            defaultValue="something"
+            label={tr.t("Input with value")}
+          />
+          <InputDisabled
+            disabled
+            defaultValue="disabled"
+            label={tr.t("Input disabled")}
+          />
+        </ListView>
+      </InputExamplesView>
     );
   };
 };

client/src/app/components/panel/panel.examples.js

@@ -1,12 +1,14 @@
 import React from "react";
+import paper from "components/Paper";
 import panel from "./panel";
 
 export default context => {
   const { tr } = context;
+  const Paper = paper(context);
   const Panel = panel(context);
   return function PanelExamples() {
     return (
-      <div>
+      <Paper>
         <h3>{tr.t("Panel")}</h3>
 
         <Panel.Panel>
@@ -15,7 +17,7 @@ export default context => {
             {tr.t("Panel Body")}
           </Panel.Body>
         </Panel.Panel>
-      </div>
+      </Paper>
     );
   };
 };

client/src/app/components/spinner/spinner.examples.js

@@ -1,20 +1,22 @@
 import React from "react";
+import paper from "components/Paper";
 import spinner from "./spinner";
 
 export default context => {
   const { tr, theme } = context;
   const { palette } = theme;
+  const Paper = paper(context);
   const Spinner = spinner(context);
   return function SpinnerExamples() {
     return (
-      <div>
+      <Paper>
         <h3>{tr.t("Spinner")}</h3>
 
         <Spinner />
         <Spinner size={30} />
         <Spinner size={40} color={palette.primary} />
         <Spinner size={50} color={palette.secondary} />
-      </div>
+      </Paper>
     );
   };
 };

client/src/app/parts/theme/ThemeView.js

@@ -2,22 +2,23 @@ import React from "react";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import glamorous from "glamorous";
-import ColorPicker from "react-color/lib/components/sketch/Sketch";
-//import ColorPicker from "react-color/lib/components/photoshop/Photoshop";
+import ColorPicker from "react-color/lib/components/photoshop/Photoshop";
 import deepForceUpdate from "react-deep-force-update";
 
-const {Div} = glamorous;
+const { Div } = glamorous;
 
 export default context => {
   const { theme } = context;
   const { palette } = theme;
   //console.log("theme primary", palette.primary);
 
   const store = observable({
-    showPicker: false
+    showPicker: false,
+    colorValue: '',
+    colorName: ''
   });
   const ColorListView = glamorous("div")({
-    width: 250
+    width: 300
   });
 
   const ColorRowView = glamorous("div")({
@@ -35,24 +36,33 @@ export default context => {
     alignContent: "center",
     alignItems: "center",
     margin: 10,
-    cursor: "pointer",
+    cursor: "pointer"
   });
   const Color = glamorous("div")({
     height: 40,
     width: 40,
     margin: 6,
     background: "black"
   });
-  function onSelectColor(event) {
-    console.log("onSelectColor ", event.hex);
+
+  function onChangeColor(event) {
+    console.log("onChangeColor ", event.hex);
     palette[store.colorName] = event.hex;
     deepForceUpdate(context.rootInstance);
+  }
+  function onAcceptColor(event) {
+    console.log("onAcceptColor ", event.hex);
     store.showPicker = false;
   }
   function onShowPicker(colorName) {
     console.log("onShowPicker ", colorName);
-    store.showPicker = true;
     store.colorName = colorName;
+    store.colorValue = palette[colorName]
+    store.showPicker = true;
+  }
+
+  function onCancelColor(){
+    store.showPicker = false;
   }
   function ColorRow({ colorName }) {
     return (
@@ -72,9 +82,14 @@ export default context => {
       </ColorRowView>
     );
   }
-  function ColorGroupText({ colorName, display}) {
+  function ColorGroupText({ colorName, display }) {
     return (
-      <Div flex={1} flexDirection='column' border={`1px dotted grey`} margin='10'> 
+      <Div
+        flex={1}
+        flexDirection="column"
+        border={`1px dotted grey`}
+        margin="10"
+      >
         <ColorTextView onClick={() => onShowPicker(colorName)}>
           <Color css={{ background: palette[colorName] }} />
           <strong>{display}</strong>
@@ -99,19 +114,24 @@ export default context => {
   const colors = ["background", "borderColor"];
 
   function ThemeView() {
-    console.log("ThemeView: ", theme);
+    //console.log("ThemeView: ", theme, store.colorValue);
+    //console.log("ThemeView: colorValue ", store.colorValue);
     return (
       <div className="theme-view">
-        <ColorGroupLightDark colorName="primary" display='Primary' />
-        <ColorGroupLightDark colorName="accent" display='Accent' />
-        <ColorGroupText colorName="textPrimary" display='Text Primary' />
-        <ColorGroupText colorName="textSecondary" display='Text Secondary' />
+        {store.showPicker &&
+          <ColorPicker
+            color={store.colorValue}
+            header={store.colorName}
+            onChange={event => onChangeColor(event)}
+            onAccept={event => onAcceptColor(event)}
+            onCancel={event => onCancelColor(event)}
+          />}
+        <ColorGroupLightDark colorName="primary" display="Primary" />
+        <ColorGroupLightDark colorName="accent" display="Accent" />
+        <ColorGroupText colorName="textPrimary" display="Text Primary" />
+        <ColorGroupText colorName="textSecondary" display="Text Secondary" />
         <ColorListView>
-          {store.showPicker &&
-            <ColorPicker
-              color={store.colorValue}
-              onChangeComplete={event => onSelectColor(event)}
-            />}
+
           {colors.map((color, key) => <ColorRow colorName={color} key={key} />)}
         </ColorListView>
       </div>