synthing

commit a22d9b207b28a3da7ca43df71a0a745a0faebc52
parent d0b7360fd9384c7f82fd66cd69326a6c48e5062a
Author: Massimo Siboldi <mdsiboldi@gmail.com>
Date:   Tue, 20 Feb 2018 21:50:10 -0800

Styling for wave manager, preparing to add solo and mute.

Diffstat:
M
src/WaveManager/index.js
 | 
21
++++++++++++++-------
M
src/WaveManager/style.css
 | 
35
+++++++++++++++++++++++++++++++++++
M
src/WaveTable/index.js
 | 
2
+-

3 files changed, 50 insertions(+), 8 deletions(-)
diff --git a/src/WaveManager/index.js b/src/WaveManager/index.js
@@ -6,15 +6,22 @@ import './style.css';
 
 export default class WaveManager extends Component {
     render() {
+        const modeClass = this.props.activated ? ' selected' : '';
         return (
-            <div class="wave-manager">
+            <div class={`wave-manager${modeClass}`}>
                 <div class="buttons">
-                    {this.props.activated ? (
-                         <div>
-                         <button onClick={this.props.remove}>remove</button>
-                         <button onClick={this.props.duplicate}>dupe</button>
-                         </div>
-                    ) : ''}
+                    <div class="left-button-group">
+                        {this.props.activated ? (
+                             <div>
+                                 <button class="item" onClick={this.props.remove}>remove</button>
+                                 <button class="item" onClick={this.props.duplicate}>dupe</button>
+                             </div>
+                        ) : ''}
+                    </div>
+                    <div class="right-button-group">
+                        <button class="item">solo</button>
+                        <button class="item">mute</button>
+                    </div>
                 </div>
                 <div class="beats">
                     <div onClick={this.props.activate}>
diff --git a/src/WaveManager/style.css b/src/WaveManager/style.css
@@ -9,3 +9,38 @@
 .beats > *:first-child {
     margin-right: 10px;
 }
+
+.wave-manager {
+    margin: 5px 0;
+    display: inline-flex;
+    align-self: left;
+    flex-direction: column;
+}
+
+.wave-manager .buttons {
+    display: flex;
+    justify-content: space-between;
+    padding: 5px 5px 0 5px;
+}
+
+.wave-manager .buttons .item {
+    margin: 0 5px;
+}
+
+.wave-manager .buttons .item:first-child {
+    margin-left: 0;
+}
+
+.wave-manager .buttons .item:last-child {
+    margin-right: 0;
+}
+
+.wave-manager.selected {
+    background: #f1ddd8;
+}
+
+.wave-manager.selected .checkbox:not(.beat),
+.wave-manager.selected .checkbox.beat .checkbox-circle,
+.wave-manager.selected .wave-table {
+    background: #fff;
+}
diff --git a/src/WaveTable/index.js b/src/WaveTable/index.js
@@ -37,7 +37,7 @@ export default class WaveTable extends Component {
     }
     render() {
         const height = this.props.height || 400;
-        const width = this.props.width || window.innerWidth - 100;
+        const width = this.props.width || window.innerWidth - 120;
         return (
             <canvas
                 class="wave-table"