From f0fb14e29c455205e35c324dfaf24891212b1739 Mon Sep 17 00:00:00 2001
From: Cyrille Bollu <cyrpub@bollu.be>
Date: Fri, 23 Aug 2019 11:06:13 +0200
Subject: [PATCH] Adds an upload button.

Not yet perfectly layed out though

Signed-off-by: Cyrille Bollu <cyrpub@bollu.be>
---
 css/style.scss              |  4 ++++
 src/components/Composer.vue | 21 +++++++++++++++++++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/css/style.scss b/css/style.scss
index 0ece984e..378c6d2e 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -1,10 +1,14 @@
 @include icon-black-white('reply', 'social', 1);
 @include icon-black-white('emoji', 'social', 1);
 @include icon-black-white('boost', 'social', 1);
+@include icon-black-white('upload', 'actions', 1, true);
 
 .icon-boosted {
   @include icon-color('boost', 'social', '#0082c9', 1);
 }
+.icon-upload {
+  @include icon-color('upload', 'actions', $color-white, 1, true);
+}
 
 img.emoji {
   margin: 3px;
diff --git a/src/components/Composer.vue b/src/components/Composer.vue
index 40539798..ad0dffe9 100644
--- a/src/components/Composer.vue
+++ b/src/components/Composer.vue
@@ -86,7 +86,6 @@
                         </masonry>
 
 			<div class="options">
-				<input ref="addAttach" class="emoji-invoker" type="file" @change="uploadImages" />
 				<input :value="currentVisibilityPostLabel" :disabled="post.length < 1" class="submit primary"
 					type="submit" title="" data-original-title="Post">
 				<div v-click-outside="hidePopoverMenu">
@@ -95,11 +94,14 @@
 						<popover-menu :menu="visibilityPopover" />
 					</div>
 				</div>
+                                <label v-tooltip="'Upload image'" class="icon-upload" for="file-upload" />
+				<input id="file-upload" ref="addAttach" class="upload-button" type="file" @change="uploadImages" />
 			</div>
 		</form>
 	</div>
 </template>
-<style scoped lang="scss">
+<style scoped lang="scss"> 
+
 	.new-post {
 		padding: 10px;
 		background-color: var(--color-main-background);
@@ -193,6 +195,21 @@
 		height: 34px;
 	}
 
+
+       .icon-upload {
+                border-radius: 50%;
+                border: 1px solid #666;
+                padding: 0px 10px;
+                width: 34px;
+                height: 34px;
+                background-size: 16px 16px;
+                cursor: pointer;
+      }
+
+	.upload-button {
+		display: none;
+	}
+
 	.emoji-invoker {
 		background-image: var(--icon-social-emoji-000);
 		background-position: center center;