From 6dc38adeaa37993fef4ae647d82d39a0250b24ca Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 5 Sep 2020 21:48:25 -0500
Subject: [PATCH] Chats: add upload button to chat input

---
 app/soapbox/features/chats/components/chat_box.js |  6 ++++++
 app/styles/chats.scss                             | 15 +++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/app/soapbox/features/chats/components/chat_box.js b/app/soapbox/features/chats/components/chat_box.js
index 12b28d513..e307325a5 100644
--- a/app/soapbox/features/chats/components/chat_box.js
+++ b/app/soapbox/features/chats/components/chat_box.js
@@ -10,6 +10,7 @@ import {
 } from 'soapbox/actions/chats';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import ChatMessageList from './chat_message_list';
+import UploadButton from 'soapbox/features/compose/components/upload_button';
 
 const messages = defineMessages({
   placeholder: { id: 'chat_box.input.placeholder', defaultMessage: 'Send a message…' },
@@ -91,6 +92,10 @@ class ChatBox extends ImmutablePureComponent {
       this.markRead();
   }
 
+  handleFiles = (files) => {
+    // TODO: Upload attachment
+  }
+
   render() {
     const { chatMessageIds, chatId, intl } = this.props;
     if (!chatMessageIds) return null;
@@ -99,6 +104,7 @@ class ChatBox extends ImmutablePureComponent {
       <div className='chat-box' onMouseOver={this.handleHover}>
         <ChatMessageList chatMessageIds={chatMessageIds} chatId={chatId} />
         <div className='chat-box__actions simple_form'>
+          <UploadButton onSelectFile={this.handleFiles} />
           <textarea
             rows={1}
             placeholder={intl.formatMessage(messages.placeholder)}
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index 7d8c7d6fb..7af2fb5f8 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -185,6 +185,19 @@
     background: var(--foreground-color);
     margin-top: auto;
     padding: 6px;
+    position: relative;
+
+    .icon-button {
+      position: absolute;
+      right: 10px;
+      top: 8px;
+      width: auto;
+      height: auto;
+      background: transparent !important;
+      border: 0;
+      padding: 0;
+      margin: 0;
+    }
 
     textarea {
       width: 100%;
@@ -192,11 +205,13 @@
       margin: 0;
       box-sizing: border-box;
       padding: 6px;
+      padding-right: 25px;
       background: var(--background-color);
       border: 0;
       border-radius: 6px;
       color: var(--primary-text-color);
       font-size: 15px;
+      overflow: hidden;
     }
   }
 }