Iteration 2 of sound editor stylings.

- New icons
- Play button moved to prominent location
- Styling normalized with costume editor

src/components/sound-editor/sound-editor.css

@@ -17,10 +17,20 @@
     margin-top: calc(2 * $space);
 }
 
+.input-group {
+    display: flex;
+    flex-direction: row;
+}
+
 .input-group + .input-group {
     margin-left: calc(2 * $space);
 }
 
+.input-group {
+    padding-right: calc(2 * $space);
+    border-right: 1px dashed $ui-pane-border;
+}
+
 .waveform-container {
     display: flex;
     justify-content: space-around;
@@ -29,7 +39,7 @@
 
     position: relative;
 
-    background: $ui-pane-gray;
+    background: hsla(300, 53%, 60%, 0.15);
     border: 1px solid $ui-pane-border;
     border-radius: 5px;
     padding: 3px;
@@ -39,7 +49,7 @@ $border-radius: 0.25rem;
 
 .button {
     height: 2rem;
-    padding: 0.25rem;
+    padding: 0.35rem;
     outline: none;
     background: white;
     border-radius: $border-radius;
@@ -53,21 +63,38 @@ $border-radius: 0.25rem;
     flex-grow: 1;
     max-width: 100%;
     max-height: 100%;
-    min-width: 1.5rem;
+    min-width: 1.25rem;
+}
+
+.round-button {
+    height: 3rem;
+    width: 3rem;
+    outline: none;
+    background: white;
+    border-radius: 100%;
+    border: 1px solid $ui-pane-border;
+    cursor: pointer;
+    padding: 0.75rem;
+}
+
+.round-button > img {
+    flex-grow: 1;
+    max-width: 100%;
+    max-height: 100%;
+    /*min-width: 1.5rem;*/
 }
 
 .trim-button {
     display: flex;
     align-items: center;
-    padding-right: 10px; /* To equalize with empty whitespace from image on left */
+    color: $text-primary;
+    font-size: 0.625rem;
+    margin-left: 1rem;
 }
 
 .trim-button > img {
-    width: 1.5rem;
-}
-
-.trim-button-active {
-    filter: hue-rotate(155deg); /* @todo replace blue -> red with real submit icon */
+    width: 1.25rem;
+    margin-bottom: -0.375rem;
 }
 
 .input-group-right {
@@ -77,8 +104,9 @@ $border-radius: 0.25rem;
 }
 
 .effect-button {
-    flex-basis: 150px;
+    flex-basis: 60px;
     color: $text-primary;
+    font-size: 0.625rem;
 }
 
 .effect-button + .effect-button {
@@ -86,12 +114,13 @@ $border-radius: 0.25rem;
 }
 
 .effect-button img {
-    width: 60px;
-    height: 60px;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-bottom: -0.375rem;
 }
 
 .button-group {
-    margin: 0 1rem;
+    margin-left: 1rem;
 }
 
 .button-group .button {

src/components/sound-editor/sound-editor.jsx

@@ -16,11 +16,12 @@ import styles from './sound-editor.css';
 import playIcon from '../record-modal/icon--play.svg';
 import stopIcon from '../record-modal/icon--stop-playback.svg';
 import trimIcon from './icon--trim.svg';
+import trimConfirmIcon from './icon--trim-confirm.svg';
 import redoIcon from './icon--redo.svg';
 import undoIcon from './icon--undo.svg';
 import echoIcon from './icon--echo.svg';
-import higherIcon from './icon--higher.svg';
-import lowerIcon from './icon--lower.svg';
+import fasterIcon from './icon--faster.svg';
+import slowerIcon from './icon--slower.svg';
 import louderIcon from './icon--louder.svg';
 import softerIcon from './icon--softer.svg';
 import robotIcon from './icon--robot.svg';
@@ -104,25 +105,6 @@ const messages = defineMessages({
 const SoundEditor = props => (
     <div className={styles.editorContainer}>
         <div className={styles.row}>
-            <div className={styles.inputGroup}>
-                {props.playhead ? (
-                    <button
-                        className={classNames(styles.button, styles.stopButtonn)}
-                        title={props.intl.formatMessage(messages.stop)}
-                        onClick={props.onStop}
-                    >
-                        <img src={stopIcon} />
-                    </button>
-                ) : (
-                    <button
-                        className={classNames(styles.button, styles.playButton)}
-                        title={props.intl.formatMessage(messages.play)}
-                        onClick={props.onPlay}
-                    >
-                        <img src={playIcon} />
-                    </button>
-                )}
-            </div>
             <div className={styles.inputGroup}>
                 <Label text={props.intl.formatMessage(messages.sound)}>
                     <BufferedInput
@@ -132,26 +114,6 @@ const SoundEditor = props => (
                         onSubmit={props.onChangeName}
                     />
                 </Label>
-            </div>
-            <div className={styles.inputGroupRight}>
-                <button
-                    className={classNames(styles.button, styles.trimButton, {
-                        [styles.trimButtonActive]: props.trimStart !== null
-                    })}
-                    title={props.trimStart === null ? (
-                        props.intl.formatMessage(messages.trim)
-                    ) : (
-                        props.intl.formatMessage(messages.save)
-                    )}
-                    onClick={props.onActivateTrim}
-                >
-                    <img src={trimIcon} />
-                    {props.trimStart === null ? (
-                        <FormattedMessage {...messages.trim} />
-                    ) : (
-                        <FormattedMessage {...messages.save} />
-                    )}
-                </button>
                 <div className={styles.buttonGroup}>
                     <button
                         className={styles.button}
@@ -171,12 +133,24 @@ const SoundEditor = props => (
                     </button>
                 </div>
             </div>
+            <IconButton
+                className={classNames(styles.trimButton, {
+                    [styles.trimButtonActive]: props.trimStart !== null
+                })}
+                img={props.trimStart === null ? trimIcon : trimConfirmIcon}
+                title={props.trimStart === null ? (
+                    <FormattedMessage {...messages.trim} />
+                ) : (
+                    <FormattedMessage {...messages.save} />
+                )}
+                onClick={props.onActivateTrim}
+            />
         </div>
         <div className={styles.row}>
             <div className={styles.waveformContainer}>
                 <Waveform
                     data={props.chunkLevels}
-                    height={180}
+                    height={160}
                     width={600}
                 />
                 <AudioTrimmer
@@ -189,15 +163,34 @@ const SoundEditor = props => (
             </div>
         </div>
         <div className={styles.row}>
+            <div className={styles.inputGroup}>
+                {props.playhead ? (
+                    <button
+                        className={classNames(styles.roundButton, styles.stopButtonn)}
+                        title={props.intl.formatMessage(messages.stop)}
+                        onClick={props.onStop}
+                    >
+                        <img src={stopIcon} />
+                    </button>
+                ) : (
+                    <button
+                        className={classNames(styles.roundButton, styles.playButton)}
+                        title={props.intl.formatMessage(messages.play)}
+                        onClick={props.onPlay}
+                    >
+                        <img src={playIcon} />
+                    </button>
+                )}
+            </div>
             <IconButton
                 className={styles.effectButton}
-                img={higherIcon}
+                img={fasterIcon}
                 title={<FormattedMessage {...messages.faster} />}
                 onClick={props.onFaster}
             />
             <IconButton
                 className={styles.effectButton}
-                img={lowerIcon}
+                img={slowerIcon}
                 title={<FormattedMessage {...messages.slower} />}
                 onClick={props.onSlower}
             />

src/components/waveform/waveform.css

@@ -4,6 +4,13 @@
     width: 100%;
 }
 .waveform-path {
-    fill: $sound-primary;
+    /*
+        This color is lighter than sound-primary, but
+        cannot use alpha because of overlapping elements.
+    */
+    fill: hsl(300, 54%, 72%);
+    stroke: $sound-tertiary;
+}
+.baseline {
     stroke: $sound-tertiary;
 }

src/components/waveform/waveform.jsx

@@ -28,14 +28,21 @@ const Waveform = props => {
     return (
         <svg
             className={styles.container}
-            viewBox={`0 0 ${width} ${height}`}
+            viewBox={`-1 0 ${width} ${height}`}
         >
+            <line
+                className={styles.baseline}
+                x1={-1}
+                x2={width}
+                y1={height / 2}
+                y2={height / 2}
+            />
             <g transform={`scale(1, -1) translate(0, -${height / 2})`}>
                 <path
                     className={styles.waveformPath}
                     d={`M0 0${pathComponents.join(' ')}Z`}
                     strokeLinejoin={'round'}
-                    strokeWidth={2}
+                    strokeWidth={1}
                 />
             </g>
         </svg>