From 2a2637251db02dade0c9d001570d53845c3542a1 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Wed, 28 Mar 2018 20:06:26 +0200
Subject: [PATCH] [scss.dialog] added toggle 'unfold'/'exit' icon in header
 [popup] added 'channel.invite' must implement
 lib.channel-controller.invite(username)

---
 public_html/asset/svg/cross.svg | 68 +++++++++++++++++++++++++++++++++
 webpack/lib/popup-controller.js |  8 ++++
 webpack/scss/dialog.scss        |  4 ++
 webpack/vue/auth/dialog.vue     |  4 +-
 webpack/vue/auth/wrapper.vue    | 15 ++++++++
 5 files changed, 97 insertions(+), 2 deletions(-)
 create mode 100644 public_html/asset/svg/cross.svg

diff --git a/public_html/asset/svg/cross.svg b/public_html/asset/svg/cross.svg
new file mode 100644
index 0000000..ae23df9
--- /dev/null
+++ b/public_html/asset/svg/cross.svg
@@ -0,0 +1,68 @@
+<?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"
+   width="18"
+   height="18"
+   class="button-2ZR58H open-3KjR1l"
+   version="1.1"
+   id="svg877"
+   sodipodi:docname="cross.svg"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06">
+  <metadata
+     id="metadata883">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs881" />
+  <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="1015"
+     id="namedview879"
+     showgrid="false"
+     inkscape:zoom="16.165247"
+     inkscape:cx="7.1430357"
+     inkscape:cy="5.1436479"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg877" />
+  <g
+     id="g875"
+     fill-rule="evenodd"
+     fill="none">
+    <path
+       d="M0 0h18v18H0"
+       id="path869" />
+    <path
+       d="M4.5 4.5l9 9"
+       id="path871"
+       stroke-linecap="round"
+       stroke="#FFF" />
+    <path
+       d="M13.5 4.5l-9 9"
+       id="path873"
+       stroke-linecap="round"
+       stroke="#FFF" />
+  </g>
+</svg>
diff --git a/webpack/lib/popup-controller.js b/webpack/lib/popup-controller.js
index 9141359..1e33985 100644
--- a/webpack/lib/popup-controller.js
+++ b/webpack/lib/popup-controller.js
@@ -46,6 +46,14 @@ export default class PopupController{
 			reset(){ this.data.value = ''; },
 			submit(){ gs.get.content.change_username(this.data.value) && this.parent.hide(); }
 		});
+		/* (4) Invite to channel */
+		this.register('channel.invite', {
+			data: {
+				username: ''
+			},
+			reset(){ this.data.username = ''; },
+			submit(){ gs.get.channel.invite(this.data.username) && this.parent.hide(); }
+		});
 
 	}
 
diff --git a/webpack/scss/dialog.scss b/webpack/scss/dialog.scss
index bc4c213..41ec81c 100644
--- a/webpack/scss/dialog.scss
+++ b/webpack/scss/dialog.scss
@@ -36,6 +36,10 @@
 
 		z-index: 100;
 
+		&[data-open='1']{
+			background-image: url('../asset/svg/cross.svg');
+		}
+
 	}
 
 	/* (3) Container BODY */
diff --git a/webpack/vue/auth/dialog.vue b/webpack/vue/auth/dialog.vue
index 6e4a6a8..5a78d63 100644
--- a/webpack/vue/auth/dialog.vue
+++ b/webpack/vue/auth/dialog.vue
@@ -87,14 +87,14 @@
 	<div class='dialog'>
 
 
-		<div class='header' @click='minipop = !minipop'>
+		<div class='header' @click='minipop = !minipop' :data-open='minipop?1:0'>
 			<div class='title'>{{ gs.auth.user.username }}</div>
 		</div>
 
 		<div class='body'>
 
 			<div v-show='minipop' class='minipopup'>
-				<span class='special sa'                    @click='gs.popup.show(`user.invite`);     minipop=false'>Invite people</span>
+				<span class='special sa'                    @click='gs.popup.show(`channel.invite`);     minipop=false'>Invite people</span>
 				<span data-icon='create'                    @click='gs.popup.show(`channel.create`);  minipop=false'>Create channel</span>
 				<span data-icon='category'                  @click='gs.popup.show(`room.create`);     minipop=false'>Create room</span>
 				<span data-icon='edit'                      @click='gs.popup.show(`nickname.change`); minipop=false'>Change nickname</span>
diff --git a/webpack/vue/auth/wrapper.vue b/webpack/vue/auth/wrapper.vue
index 54e5662..3304874 100644
--- a/webpack/vue/auth/wrapper.vue
+++ b/webpack/vue/auth/wrapper.vue
@@ -69,6 +69,21 @@
 			</span>
 		</div>
 
+		<!-- Pop-up CHANNEL INVITE -->
+		<div class='popup' v-show='gs.popup.get(`channel.invite`).active'>
+			<span class='header'>Invite a friend</span>
+
+			<span class='body form'>
+				<label for='username'>friend's username</label>
+				<input type='text' name='username' v-model='gs.popup.get(`channel.invite`).data.username'>
+			</span>
+
+			<span class='footer form'>
+				<button @click='gs.popup.hide()'>Cancel</button>
+				<button class='submit' @click='gs.popup.get(`channel.invite`).submit()'>Invite</button>
+			</span>
+		</div>
+
 	</div>