diff --git a/src/components/record-modal/icon--play.svg b/src/components/record-modal/icon--play.svg
index e1b5869175c7103d8210981bcb809b6a98258ff0..9494fccb88bd08afcba8f7d0d7cb6c1f8eba7ac0 100644
Binary files a/src/components/record-modal/icon--play.svg and b/src/components/record-modal/icon--play.svg differ
diff --git a/src/components/sound-editor/icon--echo.svg b/src/components/sound-editor/icon--echo.svg
index de8b28a5e53fdb2f6995608509997a518e465514..d024f819fbe0a179befe76417affeecd721e2e09 100644
Binary files a/src/components/sound-editor/icon--echo.svg and b/src/components/sound-editor/icon--echo.svg differ
diff --git a/src/components/sound-editor/icon--faster.svg b/src/components/sound-editor/icon--faster.svg
new file mode 100644
index 0000000000000000000000000000000000000000..db35f3de3ed46c1c7203d4ba0d7c108ff67c9a86
Binary files /dev/null and b/src/components/sound-editor/icon--faster.svg differ
diff --git a/src/components/sound-editor/icon--higher.svg b/src/components/sound-editor/icon--higher.svg
deleted file mode 100644
index f624f7913b690cae89850600d93803f284ef5d3d..0000000000000000000000000000000000000000
Binary files a/src/components/sound-editor/icon--higher.svg and /dev/null differ
diff --git a/src/components/sound-editor/icon--louder.svg b/src/components/sound-editor/icon--louder.svg
index 1d3e2ef6542b3e9fa1845e7cc703fc4fe1eb9a26..5afdbef12f8c97329db3896d627c790277d3a141 100644
Binary files a/src/components/sound-editor/icon--louder.svg and b/src/components/sound-editor/icon--louder.svg differ
diff --git a/src/components/sound-editor/icon--lounder.svg b/src/components/sound-editor/icon--lounder.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a1022b4b8b8149850855693d537373e383d4c85a
Binary files /dev/null and b/src/components/sound-editor/icon--lounder.svg differ
diff --git a/src/components/sound-editor/icon--lower.svg b/src/components/sound-editor/icon--lower.svg
deleted file mode 100644
index 0f73712d5fda058f1f42a50f7ca73d8ecc34e89e..0000000000000000000000000000000000000000
Binary files a/src/components/sound-editor/icon--lower.svg and /dev/null differ
diff --git a/src/components/sound-editor/icon--redo.svg b/src/components/sound-editor/icon--redo.svg
index 960785c7b6707bda17c4b2365f3b08abda42cd7c..fdc3b1780ea3ec33fa41a467e71d4a3c5fcb53d3 100644
Binary files a/src/components/sound-editor/icon--redo.svg and b/src/components/sound-editor/icon--redo.svg differ
diff --git a/src/components/sound-editor/icon--reverse.svg b/src/components/sound-editor/icon--reverse.svg
index ae86227182527c8281fddacce6a48b6b949dcb77..951a31283f73c99d4c53813636993f0176b4b359 100644
Binary files a/src/components/sound-editor/icon--reverse.svg and b/src/components/sound-editor/icon--reverse.svg differ
diff --git a/src/components/sound-editor/icon--robot.svg b/src/components/sound-editor/icon--robot.svg
index 3d6c011e8f753dabbe40c68ed2cd5b066061fc41..60fe3204474f6caa3fdddcfbdbfa87f70f592898 100644
Binary files a/src/components/sound-editor/icon--robot.svg and b/src/components/sound-editor/icon--robot.svg differ
diff --git a/src/components/sound-editor/icon--slower.svg b/src/components/sound-editor/icon--slower.svg
new file mode 100644
index 0000000000000000000000000000000000000000..cb2a7c3ce7598feade65c587657821deee7cccbb
Binary files /dev/null and b/src/components/sound-editor/icon--slower.svg differ
diff --git a/src/components/sound-editor/icon--softer.svg b/src/components/sound-editor/icon--softer.svg
index 996bed23c91af44ba64f845c6c14e60e2d045f97..f67dd091e7c663d51fe5f6e8f9f7103f90b1f4ef 100644
Binary files a/src/components/sound-editor/icon--softer.svg and b/src/components/sound-editor/icon--softer.svg differ
diff --git a/src/components/sound-editor/icon--trim-confirm.svg b/src/components/sound-editor/icon--trim-confirm.svg
new file mode 100644
index 0000000000000000000000000000000000000000..919b997eda6727db48aea6eb07daaad6002999a0
Binary files /dev/null and b/src/components/sound-editor/icon--trim-confirm.svg differ
diff --git a/src/components/sound-editor/icon--trim.svg b/src/components/sound-editor/icon--trim.svg
index cf64941cab62829199fa7d895442c4c17f506c57..549da5dd1b5a12612f739cd23c70a54bbf413125 100644
Binary files a/src/components/sound-editor/icon--trim.svg and b/src/components/sound-editor/icon--trim.svg differ
diff --git a/src/components/sound-editor/icon--undo.svg b/src/components/sound-editor/icon--undo.svg
index af3d7ba4239d630cdc6c5a21344887285354b8bc..54ff88ee47d07798fcf8f1c1962ad7c067c43fa4 100644
Binary files a/src/components/sound-editor/icon--undo.svg and b/src/components/sound-editor/icon--undo.svg differ
diff --git a/src/components/sound-editor/sound-editor.css b/src/components/sound-editor/sound-editor.css
index 257c59d655357a096638cc18c6ac6b4dbde5a3b6..4e168a56dfbcf9bce5fb074c9b27d3c4d1a0cfce 100644
--- a/src/components/sound-editor/sound-editor.css
+++ b/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 {
diff --git a/src/components/sound-editor/sound-editor.jsx b/src/components/sound-editor/sound-editor.jsx
index 9a0e551cbac9097c8d8cc936ce6e74c6e3638f7f..21a3f44a3ac82d0841bb1b080c36a846541f0598 100644
--- a/src/components/sound-editor/sound-editor.jsx
+++ b/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}
/>
diff --git a/src/components/waveform/waveform.css b/src/components/waveform/waveform.css
index 7951c618f36db6f69246e83a0c91b47818808bbb..759479a86a9e707bc1c08b06920e7aae02f38ff2 100644
--- a/src/components/waveform/waveform.css
+++ b/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;
}
diff --git a/src/components/waveform/waveform.jsx b/src/components/waveform/waveform.jsx
index 563aee33f1794a43bc60729d4d83f05197c628b7..1b2abe96ebf5ed306bde9e3ba9d54a202dd846be 100644
--- a/src/components/waveform/waveform.jsx
+++ b/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>
diff --git a/test/unit/components/__snapshots__/sound-editor.test.jsx.snap b/test/unit/components/__snapshots__/sound-editor.test.jsx.snap
index ac545dd6e20c70b72d02d387cb3b898055ccc67f..cb1dea1084e0cb54df9b2d8a0e367ee682204bd3 100644
--- a/test/unit/components/__snapshots__/sound-editor.test.jsx.snap
+++ b/test/unit/components/__snapshots__/sound-editor.test.jsx.snap
@@ -7,19 +7,6 @@ exports[`Sound Editor Component matches snapshot 1`] = `
<div
className={undefined}
>
- <div
- className={undefined}
- >
- <button
- className=""
- onClick={[Function]}
- title="Stop"
- >
- <img
- src="test-file-stub"
- />
- </button>
- </div>
<div
className={undefined}
>
@@ -42,22 +29,6 @@ exports[`Sound Editor Component matches snapshot 1`] = `
value="sound name"
/>
</label>
- </div>
- <div
- className={undefined}
- >
- <button
- className="undefined"
- onClick={[Function]}
- title="Save"
- >
- <img
- src="test-file-stub"
- />
- <span>
- Save
- </span>
- </button>
<div
className={undefined}
>
@@ -83,6 +54,23 @@ exports[`Sound Editor Component matches snapshot 1`] = `
</button>
</div>
</div>
+ <div
+ className="undefined"
+ onClick={[Function]}
+ role="button"
+ >
+ <img
+ className={undefined}
+ src="test-file-stub"
+ />
+ <div
+ className={undefined}
+ >
+ <span>
+ Save
+ </span>
+ </div>
+ </div>
</div>
<div
className={undefined}
@@ -92,16 +80,23 @@ exports[`Sound Editor Component matches snapshot 1`] = `
>
<svg
className={undefined}
- viewBox="0 0 600 180"
+ viewBox="-1 0 600 160"
>
+ <line
+ className={undefined}
+ x1={-1}
+ x2={600}
+ y1={80}
+ y2={80}
+ />
<g
- transform="scale(1, -1) translate(0, -90)"
+ transform="scale(1, -1) translate(0, -80)"
>
<path
className={undefined}
- d="M0 0Q0 0 60 45 Q120 90 180 135 Q240 180 300 225 Q360 270 420 135 Q480 0 480 0 Q480 0 420 -135 Q360 -270 300 -225 Q240 -180 180 -135 Q120 -90 60 -45 Q0 0 0 0Z"
+ d="M0 0Q0 0 60 40 Q120 80 180 120 Q240 160 300 200 Q360 240 420 120 Q480 0 480 0 Q480 0 420 -120 Q360 -240 300 -200 Q240 -160 180 -120 Q120 -80 60 -40 Q0 0 0 0Z"
strokeLinejoin="round"
- strokeWidth={2}
+ strokeWidth={1}
/>
</g>
</svg>
@@ -338,6 +333,19 @@ exports[`Sound Editor Component matches snapshot 1`] = `
<div
className={undefined}
>
+ <div
+ className={undefined}
+ >
+ <button
+ className=""
+ onClick={[Function]}
+ title="Stop"
+ >
+ <img
+ src="test-file-stub"
+ />
+ </button>
+ </div>
<div
className=""
onClick={[Function]}
diff --git a/test/unit/components/sound-editor.test.jsx b/test/unit/components/sound-editor.test.jsx
index 387a53c1a73359e3870a288bf1d34adf83fb9985..efb153b1ffb8fa6ac93a0dd054d1f072f882b511 100644
--- a/test/unit/components/sound-editor.test.jsx
+++ b/test/unit/components/sound-editor.test.jsx
@@ -44,7 +44,7 @@ describe('Sound Editor Component', () => {
trimStart={null}
/>
);
- wrapper.find('button[title="Trim"]').simulate('click');
+ wrapper.find('[children="Trim"]').simulate('click');
expect(props.onActivateTrim).toHaveBeenCalled();
});
@@ -56,7 +56,7 @@ describe('Sound Editor Component', () => {
trimStart={0.25}
/>
);
- wrapper.find('button[title="Save"]').simulate('click');
+ wrapper.find('[children="Save"]').simulate('click');
expect(props.onActivateTrim).toHaveBeenCalled();
});