synthing

commit d556bc2cfd4434ad56b8fc5d8d8be04c1c36fc4d
parent 47b45af11afc15e1e529dcd18a9f613f4bcc3bd4
Author: Massimo Siboldi <mdsiboldi@gmail.com>
Date:   Mon,  5 Feb 2018 16:07:25 -0800

Add CircleButton files because we need those

Diffstat:
A
src/CircleButton/index.js
 | 
21
+++++++++++++++++++++
A
src/CircleButton/style.css
 | 
38
++++++++++++++++++++++++++++++++++++++
A
src/WaveEditor/style.css
 | 
3
+++

3 files changed, 62 insertions(+), 0 deletions(-)
diff --git a/src/CircleButton/index.js b/src/CircleButton/index.js
@@ -0,0 +1,21 @@
+import { h, Component } from 'preact';
+import './style.css';
+
+const handleAction = (action, e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+        e.stopPropagation();
+        action();
+        return false;
+    }
+}
+
+export default props => (
+    <div
+        tabindex="0"
+        class={`circle-button circle${props.active ? ' active' : ''}`}
+        onClick={props.action}
+        onKeyDown={handleAction.bind(null, props.action)}
+    >
+        {props.children}
+    </div>
+)
diff --git a/src/CircleButton/style.css b/src/CircleButton/style.css
@@ -0,0 +1,38 @@
+.circle-button {
+    display: inline-flex !important;
+    margin: 5px;
+    cursor: pointer;
+}
+
+.circle-button.circle {
+    background: transparent;
+    border: 3px solid transparent;
+}
+
+.circle-button.circle .triangle {
+    border-top-color: #ff735e;
+}
+
+.circle-button.circle .rectangle {
+    background: #ff735e;
+}
+
+.circle-button.circle:hover {
+    background: #edccc4;
+    transition: background 0.2s linear;
+}
+.circle-button.circle:active {
+    border: 3px solid rgba(255,75,54,0.5);
+    
+}
+.circle-button.circle.active {
+    background: #ff735e;
+}
+
+.circle-button.circle.active .triangle {
+    border-top-color: #f1ddd8;
+}
+
+.circle-button.circle.active .rectangle {
+    background: #f1ddd8;
+}
diff --git a/src/WaveEditor/style.css b/src/WaveEditor/style.css
@@ -0,0 +1,3 @@
+.waveEditor {
+    background: #f1ddd8;
+}