diff options
| -rw-r--r-- | src/client/views/nodes/AudioBox.scss | 15 | ||||
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 10 |
2 files changed, 17 insertions, 8 deletions
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 83cdf3574..fb16b8365 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -5,6 +5,11 @@ display:flex; pointer-events: all; cursor:default; + .audiobox-buttons { + display: flex; + width: 100%; + align-items: center; + } .audiobox-handle { width:20px; height:100%; @@ -24,13 +29,14 @@ pointer-events: all; width:100%; height:100%; - position: absolute; + position: relative; pointer-events: none; } .audiobox-record-interactive { pointer-events: all; width:100%; height:100%; + position: relative; } .audiobox-controls { width:100%; @@ -46,13 +52,18 @@ position: relative; padding-right: 5px; display: flex; - .audiobox-playhead { + .audiobox-playhead, .audiobox-dictation { position: relative; margin-top: auto; margin-bottom: auto; width: 25px; padding: 2px; } + .audiobox-dictation { + align-items: center; + display: inherit; + background: dimgray; + } .audiobox-timeline { position:relative; height:100%; diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 05b9fd14a..3c8b1c3b8 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -234,17 +234,15 @@ export class AudioBox extends DocExtendableComponent<FieldViewProps, AudioDocume </audio>; } - // line 226 is stop button but it doesn't do anything render() { const interactive = this.active() ? "-interactive" : ""; - return <div className={`audiobox-container`} onContextMenu={this.specificContextMenu} - onClick={!this.path ? this.recordClick : undefined}> + return <div className={`audiobox-container`} onContextMenu={this.specificContextMenu} onClick={!this.path ? this.recordClick : undefined}> {!this.path ? - <div style={{ display: "flex", width: "100%", alignItems: "center" }}> - <div className="audiobox-playhead" style={{ alignItems: "center", display: "inherit", background: "dimgray" }} onClick={this.onFile}> + <div className="audiobox-buttons"> + <div className="audiobox-dictation" onClick={this.onFile}> <FontAwesomeIcon style={{ width: "30px", background: this.Document.playOnSelect ? "yellow" : "dimGray" }} icon="file-alt" size={this.props.PanelHeight() < 36 ? "1x" : "2x"} /> </div> - <button className={`audiobox-record${interactive}`} style={{ position: "relative", backgroundColor: this.audioState === "recording" ? "red" : "black" }}> + <button className={`audiobox-record${interactive}`} style={{ backgroundColor: this.audioState === "recording" ? "red" : "black" }}> {this.audioState === "recording" ? "STOP" : "RECORD"} </button> </div> : |