synthing

commit 9bf09eca7654b7bdf0d24914ee9beed612d15873
parent 959b1f9b82ab4f6c399279c27265853632f9a12a
Author: Massimo Siboldi <mdsiboldi@gmail.com>
Date:   Wed, 21 Feb 2018 15:00:17 -0800

Style wavemanager: solo, mute, container

Diffstat:
M
src/App/App.css
 | 
7
+++++++
M
src/App/index.js
 | 
2
++
M
src/WaveManager/index.js
 | 
14
++++++--------
M
src/WaveManager/style.css
 | 
40
++++++++++++++++++++++++++++++++++++++++

4 files changed, 55 insertions(+), 8 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
@@ -22,3 +22,10 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.wave-manager-container {
+    display: flex;
+    align-items: left;
+    justify-content: left;
+    flex-direction: column;
+}
diff --git a/src/App/index.js b/src/App/index.js
@@ -320,7 +320,9 @@ class App extends Component {
                     />
                     <Adsr adsr={this.state.adsr} update={this.updateAdsr} />
                 </div>
+                <div class="wave-manager-container">
                 {waves}
+                </div>
                 <button onClick={() => this.addWaveform()}>+</button>
                 <Synth waveform={this.totalWaveform()} adsr={this.state.adsr}></Synth>
             </div>
diff --git a/src/WaveManager/index.js b/src/WaveManager/index.js
@@ -11,22 +11,20 @@ export default class WaveManager extends Component {
             <div class={`wave-manager${modeClass}`}>
                 <div class="buttons">
                     <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>
+                            <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${this.props.waveformData.solo ? ' active' : ''}`}
+                            class={`item solo${this.props.waveformData.solo ? ' active' : ''}`}
                             onClick={this.props.toggleSolo}
                         >
                             solo
                         </button>
                         <button
-                            class={`item${this.props.waveformData.mute ? ' active' : ''}`}
+                            class={`item mute${this.props.waveformData.mute ? ' active' : ''}`}
                             onClick={this.props.toggleMute}
                         >
                             mute
diff --git a/src/WaveManager/style.css b/src/WaveManager/style.css
@@ -25,6 +25,8 @@
 
 .wave-manager .buttons .item {
     margin: 0 5px;
+    cursor: pointer;
+    padding: 2px 5px;
 }
 
 .wave-manager .buttons .item:first-child {
@@ -35,6 +37,44 @@
     margin-right: 0;
 }
 
+.wave-manager .buttons button.item {
+    outline: 0;
+    border: 0;
+    background: none;
+}
+
+/* solo button */
+.wave-manager .buttons button.item.solo {
+    opacity: 0.8;
+    color: #0040d1;
+}
+
+.wave-manager .buttons button.item.solo:hover {
+    opacity: 1;
+}
+
+.wave-manager .buttons button.item.solo.active,
+.wave-manager .buttons button.item.solo:active {
+    color: #ffffff;
+    background: #0040d1;
+}
+
+/* mute button */
+.wave-manager .buttons button.item.mute {
+    opacity: 0.8;
+    color: #474747;
+}
+
+.wave-manager .buttons button.item.mute:hover {
+    opacity: 1;
+}
+
+.wave-manager .buttons button.item.mute.active,
+.wave-manager .buttons button.item.mute:active {
+    color: #ffffff;
+    background: #474747;
+}
+
 .wave-manager.selected {
     background: #f1ddd8;
 }