composeBox: move attachments row below the composeBox

src/common/Icons.js

@@ -75,6 +75,7 @@ export const IconSettings: SpecificIconType = makeIcon(Feather, 'settings');
 export const IconRight: SpecificIconType = makeIcon(Feather, 'chevron-right');
 export const IconPlusCircle: SpecificIconType = makeIcon(Feather, 'plus-circle');
 export const IconLeft: SpecificIconType = makeIcon(Feather, 'chevron-left');
+export const IconUp: SpecificIconType = makeIcon(Feather, 'chevron-up');
 export const IconPeople: SpecificIconType = makeIcon(Feather, 'users');
 export const IconPerson: SpecificIconType = makeIcon(Feather, 'user');
 export const IconImage: SpecificIconType = makeIcon(Feather, 'image');

src/compose/ComposeBox.js

@@ -11,7 +11,7 @@ import invariant from 'invariant';
 import * as apiConstants from '../api/constants';
 import { withSafeAreaInsets } from '../react-native-safe-area-context';
 import type { ThemeData } from '../styles';
-import { ThemeContext } from '../styles';
+import { ThemeContext, BRAND_COLOR } from '../styles';
 import type {
   Auth,
   Narrow,
@@ -29,7 +29,7 @@ import { withGetText } from '../boot/TranslationProvider';
 import { draftUpdate, sendTypingStart, sendTypingStop } from '../actions';
 import { FloatingActionButton, Input } from '../common';
 import { showToast, showErrorAlert } from '../utils/info';
-import { IconDone, IconSend } from '../common/Icons';
+import { IconDone, IconSend, IconUp, IconPlusCircle } from '../common/Icons';
 import {
   isConversationNarrow,
   isStreamNarrow,
@@ -123,6 +123,7 @@ type State = {|
   isFocused: boolean,
 
   isMenuExpanded: boolean,
+  showAttachmentRow: boolean,
   topic: string,
   message: string,
   height: number,
@@ -166,6 +167,7 @@ class ComposeBoxInner extends PureComponent<Props, State> {
     isTopicFocused: false,
     isFocused: false,
     isMenuExpanded: false,
+    showAttachmentRow: false,
     height: 20,
     topic:
       this.props.initialTopic
@@ -341,6 +343,7 @@ class ComposeBoxInner extends PureComponent<Props, State> {
   };
 
   handleMessageFocus = () => {
+    this.setState({ showAttachmentRow: true });
     if (
       !this.props.isEditing
       && isStreamNarrow(this.props.narrow)
@@ -364,6 +367,7 @@ class ComposeBoxInner extends PureComponent<Props, State> {
     this.setState({
       isMessageFocused: false,
       isMenuExpanded: false,
+      showAttachmentRow: false,
     });
     const { dispatch, narrow } = this.props;
     dispatch(sendTypingStop(narrow));
@@ -452,7 +456,7 @@ class ComposeBoxInner extends PureComponent<Props, State> {
     },
     composeBox: {
       flexDirection: 'row',
-      alignItems: 'flex-end',
+      alignItems: 'flex-start',
       flexShrink: 1,
     },
     composeText: {
@@ -462,6 +466,10 @@ class ComposeBoxInner extends PureComponent<Props, State> {
     composeSendButton: {
       padding: 8,
     },
+    expandButton: {
+      padding: 12,
+      color: BRAND_COLOR,
+    },
     topicInput: {
       borderWidth: 0,
       borderRadius: 5,
@@ -478,7 +486,15 @@ class ComposeBoxInner extends PureComponent<Props, State> {
   };
 
   render() {
-    const { isTopicFocused, isMenuExpanded, height, message, topic, selection } = this.state;
+    const {
+      isTopicFocused,
+      showAttachmentRow,
+      isMenuExpanded,
+      height,
+      message,
+      topic,
+      selection,
+    } = this.state;
     const {
       ownUserId,
       narrow,
@@ -525,13 +541,20 @@ class ComposeBoxInner extends PureComponent<Props, State> {
           />
         </View>
         <View style={[this.styles.composeBox, style]} onLayout={this.handleLayoutChange}>
-          <ComposeMenu
-            destinationNarrow={this.getDestinationNarrow()}
-            expanded={isMenuExpanded}
-            insertAttachment={this.insertAttachment}
-            insertVideoCallLink={insertVideoCallLink}
-            onExpandContract={this.handleComposeMenuToggle}
-          />
+          {!isMenuExpanded && !showAttachmentRow && (
+            <IconPlusCircle
+              style={this.styles.expandButton}
+              size={24}
+              onPress={this.handleComposeMenuToggle}
+            />
+          )}
+          {isMenuExpanded && !showAttachmentRow && (
+            <IconUp
+              style={this.styles.expandButton}
+              size={24}
+              onPress={this.handleComposeMenuToggle}
+            />
+          )}
           <View style={this.styles.composeText}>
             <Input
               style={[
@@ -579,6 +602,12 @@ class ComposeBoxInner extends PureComponent<Props, State> {
               onSelectionChange={this.handleMessageSelectionChange}
               onTouchStart={this.handleInputTouchStart}
             />
+            <ComposeMenu
+              destinationNarrow={this.getDestinationNarrow()}
+              expanded={isMenuExpanded || showAttachmentRow}
+              insertAttachment={this.insertAttachment}
+              insertVideoCallLink={insertVideoCallLink}
+            />
           </View>
           <FloatingActionButton
             accessibilityLabel="Send message"

src/compose/ComposeMenu.js

@@ -11,15 +11,7 @@ import type { Dispatch, Narrow, GetText } from '../types';
 import { connect } from '../react-redux';
 import { showErrorAlert } from '../utils/info';
 import { BRAND_COLOR, createStyleSheet } from '../styles';
-import {
-  IconPlusCircle,
-  IconLeft,
-  IconImage,
-  IconCamera,
-  IconAttach,
-  IconVideo,
-} from '../common/Icons';
-import AnimatedComponent from '../animation/AnimatedComponent';
+import { IconImage, IconCamera, IconAttach, IconVideo } from '../common/Icons';
 import { uploadFile } from '../actions';
 import { androidEnsureStoragePermission } from '../lightbox/download';
 
@@ -28,7 +20,6 @@ type OuterProps = $ReadOnly<{|
   destinationNarrow: Narrow,
   insertAttachment: (DocumentPickerResponse[]) => Promise<void>,
   insertVideoCallLink: (() => void) | null,
-  onExpandContract: () => void,
 |}>;
 
 type SelectorProps = $ReadOnly<{||}>;
@@ -222,10 +213,6 @@ class ComposeMenuInner extends PureComponent<Props> {
       flexDirection: 'row',
       overflow: 'hidden',
     },
-    expandButton: {
-      padding: 12,
-      color: BRAND_COLOR,
-    },
     composeMenuButton: {
       padding: 12,
       marginRight: -8,
@@ -234,52 +221,37 @@ class ComposeMenuInner extends PureComponent<Props> {
   });
 
   render() {
-    const { expanded, insertVideoCallLink, onExpandContract } = this.props;
-    const numIcons =
-      2 + (Platform.OS === 'android' ? 1 : 0) + (insertVideoCallLink !== null ? 1 : 0);
+    const { expanded, insertVideoCallLink } = this.props;
 
     return (
-      <View style={this.styles.composeMenu}>
-        <AnimatedComponent
-          stylePropertyName="width"
-          fullValue={40 * numIcons}
-          useNativeDriver={false}
-          visible={expanded}
-        >
-          <View style={this.styles.composeMenu}>
-            {Platform.OS === 'android' && (
-              <IconAttach
-                style={this.styles.composeMenuButton}
-                size={24}
-                onPress={this.handleFilesPicker}
-              />
-            )}
-            <IconImage
+      expanded && (
+        <View style={this.styles.composeMenu}>
+          {Platform.OS === 'android' && (
+            <IconAttach
               style={this.styles.composeMenuButton}
               size={24}
-              onPress={this.handleImagePicker}
+              onPress={this.handleFilesPicker}
             />
-            <IconCamera
+          )}
+          <IconImage
+            style={this.styles.composeMenuButton}
+            size={24}
+            onPress={this.handleImagePicker}
+          />
+          <IconCamera
+            style={this.styles.composeMenuButton}
+            size={24}
+            onPress={this.handleCameraCapture}
+          />
+          {insertVideoCallLink !== null ? (
+            <IconVideo
               style={this.styles.composeMenuButton}
               size={24}
-              onPress={this.handleCameraCapture}
+              onPress={insertVideoCallLink}
             />
-            {insertVideoCallLink !== null ? (
-              <IconVideo
-                style={this.styles.composeMenuButton}
-                size={24}
-                onPress={insertVideoCallLink}
-              />
-            ) : null}
-          </View>
-        </AnimatedComponent>
-        {!expanded && (
-          <IconPlusCircle style={this.styles.expandButton} size={24} onPress={onExpandContract} />
-        )}
-        {expanded && (
-          <IconLeft style={this.styles.expandButton} size={24} onPress={onExpandContract} />
-        )}
-      </View>
+          ) : null}
+        </View>
+      )
     );
   }
 }