From d2e8eb83ae741e8077bb29f1eb25cd2f20539d26 Mon Sep 17 00:00:00 2001
From: Maciej Hirsz <1096222+maciejhirsz@users.noreply.github.com>
Date: Mon, 24 Sep 2018 11:45:05 +0200
Subject: [PATCH] Switches in settings (#45)

---
 .../frontend/src/components/Chain/Chain.css   | 14 ------
 .../frontend/src/components/Chain/Chain.tsx   |  6 +--
 packages/frontend/src/components/Option.css   | 47 +++++++++++++++++++
 packages/frontend/src/components/Option.tsx   | 27 +++++++++++
 packages/frontend/src/components/index.ts     |  1 +
 5 files changed, 78 insertions(+), 17 deletions(-)
 create mode 100644 packages/frontend/src/components/Option.css
 create mode 100644 packages/frontend/src/components/Option.tsx

diff --git a/packages/frontend/src/components/Chain/Chain.css b/packages/frontend/src/components/Chain/Chain.css
index f36b63d..7196095 100644
--- a/packages/frontend/src/components/Chain/Chain.css
+++ b/packages/frontend/src/components/Chain/Chain.css
@@ -101,17 +101,3 @@
   font-size: 20px;
   font-weight: 100;
 }
-
-.Chain-settings-category p {
-  padding: 0;
-  margin: 0 0 0.1em 0;
-  cursor: pointer;
-}
-
-.Chain-settings-category .Icon {
-  margin-right: 10px;
-}
-
-.Chain-settings-disabled {
-  color: #666;
-}
diff --git a/packages/frontend/src/components/Chain/Chain.tsx b/packages/frontend/src/components/Chain/Chain.tsx
index 7645090..bb1bcd1 100644
--- a/packages/frontend/src/components/Chain/Chain.tsx
+++ b/packages/frontend/src/components/Chain/Chain.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { State as AppState } from '../../state';
 import { formatNumber, secondsWithPrecision, viewport } from '../../utils';
 import { Tab } from './';
-import { Tile, Icon, Node, Ago } from '../';
+import { Tile, Node, Ago, Option } from '../';
 import { Types } from '@dotstats/common';
 import { Persistent } from '../../Persistent';
 
@@ -177,7 +177,7 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
                   return null;
                 }
 
-                const className = settings[setting] ? '' : 'Chain-settings-disabled';
+                const checked = settings[setting];
 
                 const changeSetting = () => {
                   const change = {};
@@ -187,7 +187,7 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
                   this.props.setSettings(change);
                 }
 
-                return <p key={index} className={className} onClick={changeSetting}><Icon src={icon} alt={label} /> {label}</p>;
+                return <Option key={index} onClick={changeSetting} icon={icon} label={label} checked={checked} />;
               })
           }
         </div>
diff --git a/packages/frontend/src/components/Option.css b/packages/frontend/src/components/Option.css
new file mode 100644
index 0000000..4a7838d
--- /dev/null
+++ b/packages/frontend/src/components/Option.css
@@ -0,0 +1,47 @@
+.Option {
+  color: #666;
+  padding: 0;
+  margin: 0 0 8px 0;
+  cursor: pointer;
+}
+
+.Option-on {
+  color: #fff;
+}
+
+.Option .Icon {
+  margin-right: 10px;
+}
+
+.Option-switch {
+  width: 40px;
+  height: 18px;
+  border-radius: 18px;
+  display: block;
+  float: right;
+  position: relative;
+  background: #444;
+  transition: background-color 0.15s linear, border-color 0.15s linear;
+}
+
+.Option-on .Option-switch {
+  background: #d64ca8;
+  border-color: #d64ca8;
+}
+
+.Option-knob {
+  width: 16px;
+  height: 16px;
+  border: 1px solid #fff;
+  border-radius: 18px;
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #222;
+  transition: left 0.15s ease-in-out;
+}
+
+.Option-on .Option-knob {
+  left: 22px;
+}
diff --git a/packages/frontend/src/components/Option.tsx b/packages/frontend/src/components/Option.tsx
new file mode 100644
index 0000000..4d00f23
--- /dev/null
+++ b/packages/frontend/src/components/Option.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Icon } from './';
+
+import './Option.css';
+
+export namespace Option {
+  export interface Props {
+    icon: string;
+    label: string;
+    checked: boolean;
+    onClick: () => void;
+  }
+}
+
+export function Option(props: Option.Props): React.ReactElement<any> {
+  const className = props.checked ? "Option Option-on" : "Option";
+
+  return (
+    <p className={className} onClick={props.onClick}>
+      <Icon src={props.icon} alt={props.label} />
+      {props.label}
+      <span className="Option-switch">
+        <span className="Option-knob" />
+      </span>
+    </p>
+  );
+}
diff --git a/packages/frontend/src/components/index.ts b/packages/frontend/src/components/index.ts
index 48199a8..9619de8 100644
--- a/packages/frontend/src/components/index.ts
+++ b/packages/frontend/src/components/index.ts
@@ -4,6 +4,7 @@ export * from './Icon';
 export * from './Tile';
 export * from './Ago';
 export * from './OfflineIndicator';
+export * from './Option';
 
 import * as Node from './Node';