From 47d9dfac0b12bbabe2f1a4972ddc8d1b6b6ed149 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Tue, 5 Dec 2017 13:32:42 +0100
Subject: [PATCH] Now message input

---
 public_html/css/container.css            | 60 +++++++++++++++++++++++-
 public_html/image/container/send-msg.svg | 47 +++++++++++++++++++
 view/vue-config.js                       |  6 ++-
 view/vue/container/inbox.vue             |  5 ++
 4 files changed, 115 insertions(+), 3 deletions(-)
 create mode 100644 public_html/image/container/send-msg.svg

diff --git a/public_html/css/container.css b/public_html/css/container.css
index 4790a49..17fe786 100644
--- a/public_html/css/container.css
+++ b/public_html/css/container.css
@@ -3,7 +3,6 @@
 	flex-direction: column;
 	justify-content: flex-start;
 	flex-wrap: nowrap;
-
 }
 
 	#CONTAINER.message div{ /* Message item */
@@ -26,6 +25,10 @@
 		color: #222;
 	}
 
+	#CONTAINER.message > div:last-of-type{ /* Margin bottom to last */
+		margin-bottom: 5em;
+	}
+
 	#CONTAINER.message div.me{ /* Message Item (self) */
 		background: #13d89d;
 		align-self: flex-end;
@@ -55,4 +58,57 @@
 
 		#CONTAINER.message div.me span.author{ /* Hide message author if self */
 			display: none;
-		}
\ No newline at end of file
+		}
+
+
+	#CONTAINER.message form.msg-input{ /* Message Input */
+		display: block;
+		position: fixed;
+			top: calc( 100% - 3em );
+			left: 15em;
+			width: calc( 100% - 2*1px );
+			height: 3em;
+
+		border-top: 1px solid #ddd;
+
+		background: #fff;
+
+		overflow: hidden;
+	}
+
+	#CONTAINER.message form.msg-input input{ /* form Input */
+		display: inline-block;
+		position: absolute;
+			top: 0;
+			left: 0;
+			width: calc( 100vw - 15em - 2em - 3em );
+			height: calc( 100% - 2*.5em );
+
+		padding: .5em 1em;
+
+		border: none;
+
+		font-size: inherit;
+	}
+
+	#CONTAINER.message form.msg-input button{ /* form send button */
+		display: inline-block;
+		position: absolute;
+			top: 0;
+			left: calc( 100vw - 15em - 3em );
+			width: 3em;
+			height: 3em;
+
+		background: url('/image/container/send-msg.svg@777777') center center no-repeat;
+		background-size: 50%;
+
+		border: none;
+
+		font-size: inherit;
+
+		cursor: pointer;
+	}
+
+	#CONTAINER.message form.msg-input button:hover{
+		background-image: url('/image/container/send-msg.svg@000000');
+	}
\ No newline at end of file
diff --git a/public_html/image/container/send-msg.svg b/public_html/image/container/send-msg.svg
new file mode 100644
index 0000000..b380911
--- /dev/null
+++ b/public_html/image/container/send-msg.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   viewBox="0 0 20.015684 19.959942"
+   xml:space="preserve"
+   id="svg4190"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="send-msg.svg"
+   width="20.015684"
+   height="19.959942"><metadata
+     id="metadata4199"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs4197" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1056"
+     id="namedview4195"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="39.666667"
+     inkscape:cx="9.9906835"
+     inkscape:cy="9.9541575"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4190" /><path
+     inkscape:connector-curvature="0"
+     id="fill-edit"
+     d="M 19.490683,9.1057851 1.5906835,0.10578512 c -0.90000002,-0.4 -1.90000002,0.4 -1.50000002,1.29999998 l 2.50000002,6.7 11.3999995,1.8999999 -11.3999995,1.9 -2.50000002,6.7 c -0.3,0.9 0.6,1.7 1.50000002,1.2 l 17.8999995,-9 c 0.7,-0.3 0.7,-1.2999999 0,-1.6999999 z" /></svg>
\ No newline at end of file
diff --git a/view/vue-config.js b/view/vue-config.js
index 0117b5f..2eaf861 100644
--- a/view/vue-config.js
+++ b/view/vue-config.js
@@ -57,4 +57,8 @@ window.gstore.add('func', {
 		/* (2) Add locally */
 		window.gstore.data.notif[1].data.push([ window.gstore.data.server.session.name, msg ]);
 	}
-});
\ No newline at end of file
+});
+
+
+// new-message container
+window.gstore.add('new_msg', '');
\ No newline at end of file
diff --git a/view/vue/container/inbox.vue b/view/vue/container/inbox.vue
index d2dda18..e7f0312 100644
--- a/view/vue/container/inbox.vue
+++ b/view/vue/container/inbox.vue
@@ -7,8 +7,13 @@
 			<span class='content'>{{ msg[1] }}</span>
 		</div>
 
+		<form class='msg-input' @submit.prevent='gstore.func.sendMessage(gstore.new_msg)'>
+			<input type='text' placeholder='Nouveau message..' id='msg-new-content' v-model='gstore.new_msg'>
+			<button></button>
+		</form>
 	</div>
 
+
 </template>