fix(webchat): mic icon overlaid on button (#5626)

botpress · Nov 1, 2021 · b3955fe · b3955fe
1 parent a04c5d4
commit b3955fe
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 43 deletions.
diff --git a/modules/channel-web/assets/default-emulator.css b/modules/channel-web/assets/default-emulator.css
@@ -702,7 +702,7 @@
   .bpw-composer {
     position: relative;
     outline: none;
-    padding: var(--spacing-x-large) 50px var(--spacing-x-large) var(--spacing-large);
+    padding: var(--spacing-x-large) var(--spacing-large) var(--spacing-x-large) var(--spacing-large);
   }
 
   .bpw-send-button:disabled {
@@ -713,6 +713,14 @@
   .bpw-composer-inner {
     line-height: 0;
     position: relative;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .bpw-composer-textarea {
+    flex-grow: 2;
   }
 
   .bpw-composer textarea {
@@ -745,15 +753,16 @@
     padding: 2px 5px 2px 0;
   }
 
+  .bpw-send-buttons {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
   .bpw-send-button {
-    position: absolute;
-    right: -45px;
-    top: 50%;
-    transform: translate(0, -50%);
     border: none;
     border-radius: 5px;
     background: #fff;
-    padding: 5px;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
@@ -769,6 +778,12 @@
     fill: var(--ocean);
   }
 
+  .bpw-voice-recorder {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
   /** HEADER STUFF */
 
   .bpw-header-container {
@@ -1196,22 +1211,17 @@
   direction: rtl;
 }
 .bpw-rtl .bpw-composer {
-  padding: var(--spacing-x-large) var(--spacing-large) var(--spacing-x-large) 50px;
+  padding: var(--spacing-x-large) var(--spacing-large) var(--spacing-x-large) var(--spacing-large);
 }
 
 .bpw-rtl .bpw-composer textarea {
   direction: rtl;
 }
 
 .bpw-rtl .bpw-send-button {
-  position: absolute;
-  left: -45px;
-  top: 50%;
-  transform: translate(0, -50%);
   border: none;
   border-radius: 5px;
   background: #fff;
-  padding: 5px;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;

diff --git a/modules/channel-web/assets/default.css b/modules/channel-web/assets/default.css
@@ -639,6 +639,10 @@ body {
   padding: 5px;
 }
 
+.bpw-composer-textarea {
+  flex-grow: 2;
+}
+
 .bpw-composer textarea {
   font: inherit;
   background-color: transparent;
@@ -660,7 +664,7 @@ body {
 
 .bpw-send-buttons {
   display: flex;
-  align-items: center;
+  flex-direction: row;
 }
 
 .bpw-send-button {

diff --git a/modules/channel-web/src/views/lite/components/Composer.tsx b/modules/channel-web/src/views/lite/components/Composer.tsx
@@ -96,32 +96,28 @@ class Composer extends React.Component<ComposerProps, { isRecording: boolean }>
     return (
       <div role="region" className={'bpw-composer'}>
         <div className={'bpw-composer-inner'}>
-          <textarea
-            ref={this.textInput}
-            id="input-message"
-            onFocus={this.props.setFocus.bind(this, 'input')}
-            placeholder={placeholder}
-            onChange={this.handleMessageChanged}
-            value={this.props.message}
-            onKeyPress={this.handleKeyPress}
-            onKeyDown={this.handleKeyDown}
-            aria-label={this.props.intl.formatMessage({
-              id: 'composer.message',
-              defaultMessage: 'Message to send'
-            })}
-            disabled={this.props.composerLocked}
-          />
-          <label htmlFor="input-message" style={{ display: 'none' }}>
-            {placeholder}
-          </label>
+          <div className={'bpw-composer-textarea'}>
+            <textarea
+              ref={this.textInput}
+              id="input-message"
+              onFocus={this.props.setFocus.bind(this, 'input')}
+              placeholder={placeholder}
+              onChange={this.handleMessageChanged}
+              value={this.props.message}
+              onKeyPress={this.handleKeyPress}
+              onKeyDown={this.handleKeyDown}
+              aria-label={this.props.intl.formatMessage({
+                id: 'composer.message',
+                defaultMessage: 'Message to send'
+              })}
+              disabled={this.props.composerLocked}
+            />
+            <label htmlFor="input-message" style={{ display: 'none' }}>
+              {placeholder}
+            </label>
+          </div>
+
           <div className={'bpw-send-buttons'}>
-            {this.props.enableVoiceComposer && (
-              <VoiceRecorder
-                onStart={this.onVoiceStart}
-                onDone={this.onVoiceEnd}
-                onNotAvailable={this.onVoiceNotAvailable}
-              />
-            )}
             <ToolTip
               childId="btn-send"
               content={
@@ -149,6 +145,13 @@ class Composer extends React.Component<ComposerProps, { isRecording: boolean }>
                 <FormattedMessage id={'composer.send'} />
               </button>
             </ToolTip>
+            {this.props.enableVoiceComposer && (
+              <VoiceRecorder
+                onStart={this.onVoiceStart}
+                onDone={this.onVoiceEnd}
+                onNotAvailable={this.onVoiceNotAvailable}
+              />
+            )}
           </div>
         </div>
       </div>

diff --git a/modules/channel-web/src/views/lite/components/VoiceRecorder.tsx b/modules/channel-web/src/views/lite/components/VoiceRecorder.tsx
@@ -120,16 +120,16 @@ const VoiceRecorder: FC<Props> = (props: Props) => {
   }
 
   return (
-    <Fragment>
+    <div className={'bpw-voice-recorder'}>
+      <button className={cx('bpw-send-button', props.className)} onClick={isRecording ? stopRecording : startRecording}>
+        <Microphone fill={isRecording ? '#f1f1f1' : 'black'} />
+      </button>
       {isRecording && (
         <button className={cx('bpw-send-button', props.className)} onClick={cancelRecording}>
           <Cancel fill="#ff0000" />
         </button>
       )}
-      <button className={cx('bpw-send-button', props.className)} onClick={isRecording ? stopRecording : startRecording}>
-        <Microphone fill={isRecording ? '#f1f1f1' : 'black'} />
-      </button>
-    </Fragment>
+    </div>
   )
 }