[popup] added 'channel.remove' 'channel.remove' + fixed icons in [dialog]

public_html/asset/svg/minipopup.invite.svg

@@ -1,3 +1,56 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16">
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-  <path fill="#7289DA" d="M10.5,7 C12.1838095,7 14,5.28666667 14,3.54545455 C14,1.80424242 12.1838095,0 10.5,0 C8.81619048,0 7,1.80424242 7,3.54545455 C7,5.28666667 8.81619048,7 10.5,7 Z M3,6 L3,4 L2,4 L2,6 L0,6 L0,7 L2,7 L2,9 L3,9 L3,7 L5,7 L5,6 L3,6 Z M10.5,8 C8.46571429,8 5,9.32848485 5,11.4242424 L5,13 L16,13 L16,11.4242424 C16,9.32848485 12.5342857,8 10.5,8 Z" transform="matrix(-1 0 0 1 16 2)"/>
+<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"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg898"
+   sodipodi:docname="minipopup.invite.svg"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06">
+  <metadata
+     id="metadata904">
+    <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="defs902" />
+  <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="namedview900"
+     showgrid="false"
+     inkscape:zoom="45.722222"
+     inkscape:cx="9.109356"
+     inkscape:cy="9"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg898" />
+  <path
+     fill="#7289DA"
+     d="M10.5,7 C12.1838095,7 14,5.28666667 14,3.54545455 C14,1.80424242 12.1838095,0 10.5,0 C8.81619048,0 7,1.80424242 7,3.54545455 C7,5.28666667 8.81619048,7 10.5,7 Z M3,6 L3,4 L2,4 L2,6 L0,6 L0,7 L2,7 L2,9 L3,9 L3,7 L5,7 L5,6 L3,6 Z M10.5,8 C8.46571429,8 5,9.32848485 5,11.4242424 L5,13 L16,13 L16,11.4242424 C16,9.32848485 12.5342857,8 10.5,8 Z"
+     transform="matrix(-1 0 0 1 16 2)"
+     id="path896" />
 </svg>

public_html/asset/svg/minipopup.leave.svg

@@ -0,0 +1,56 @@
+<?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"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg898"
+   sodipodi:docname="minipopup.leave.svg"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06">
+  <metadata
+     id="metadata904">
+    <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="defs902" />
+  <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="namedview900"
+     showgrid="false"
+     inkscape:zoom="45.722222"
+     inkscape:cx="9.109356"
+     inkscape:cy="9"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg898" />
+  <path
+     style="fill:#e65835;stroke-width:1.125;fill-opacity:1"
+     d="M 6.1875 2.25 C 4.2932137 2.25 2.25 4.2794175 2.25 6.2382812 C 2.25 8.1971449 4.2932138 10.125 6.1875 10.125 C 8.0817857 10.125 10.125 8.1971449 10.125 6.2382812 C 10.125 4.2794175 8.0817857 2.25 6.1875 2.25 z M 13.595703 7.1757812 L 12.800781 7.9707031 L 14.392578 9.5625 L 12.800781 11.154297 L 13.595703 11.949219 L 15.1875 10.357422 L 16.779297 11.949219 L 17.574219 11.154297 L 15.982422 9.5625 L 17.574219 7.9707031 L 16.779297 7.1757812 L 15.1875 8.7675781 L 13.595703 7.1757812 z M 6.1875 11.25 C 3.8989283 11.25 0 12.743836 0 15.101562 L 0 16.875 L 12.375 16.875 L 12.375 15.101562 C 12.375 12.743836 8.4760714 11.25 6.1875 11.25 z "
+     transform="scale(0.88888889)"
+     id="path969" />
+</svg>

public_html/asset/svg/minipopup.logout.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
   <g fill="none" fill-rule="evenodd">
     <path d="M0 0h18v18H0z"/>
-    <path fill="#737F8D" d="M9 9h5.25c-.3975 3.0825-2.46 5.835-5.25 6.69V9H3.75V4.725L9 2.3925V9zm0 0H3.75c.3975 3.0825 2.46 5.835 5.25 6.69V9h5.25V4.725L9 2.3925V9zM9 .75l-6.75 3v4.5c0 4.1625 2.88 8.0475 6.75 9 3.87-.9525 6.75-4.8375 6.75-9v-4.5L9 .75z"/>
+    <path fill="#737F8D" d="M14.25 2.25H3.75c-.8325 0-1.5.6675-1.5 1.5v3h1.5v-3h10.5v10.5H3.75v-3h-1.5v3c0 .8284271.67157287 1.5 1.5 1.5h10.5c.8284271 0 1.5-.6715729 1.5-1.5V3.75c0-.8325-.675-1.5-1.5-1.5zm-6.69 9.435l1.065 1.065L12.375 9l-3.75-3.75L7.56 6.3075 9.5025 8.25H2.25v1.5h7.2525L7.56 11.685z"/>
   </g>
 </svg>

public_html/asset/svg/minipopup.remove.svg

@@ -0,0 +1,63 @@
+<?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"
+   version="1.1"
+   id="svg1230"
+   sodipodi:docname="minipopup.remove.svg"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06">
+  <metadata
+     id="metadata1236">
+    <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="defs1234" />
+  <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="namedview1232"
+     showgrid="false"
+     inkscape:zoom="27.333333"
+     inkscape:cx="9"
+     inkscape:cy="9"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g1228" />
+  <g
+     fill="none"
+     fill-rule="evenodd"
+     id="g1228">
+    <path
+       d="M 12.535534,13.949747 9,10.414214 5.4644661,13.949747 4.0502525,12.535534 7.5857864,9 4.0502525,5.4644661 5.4644661,4.0502525 9,7.5857864 12.535534,4.0502525 13.949747,5.4644661 10.414214,9 l 3.535533,3.535534"
+       id="path1224"
+       inkscape:connector-curvature="0"
+       style="fill:#737f8d;fill-rule:nonzero" />
+    <path
+       d="M0 0h18v18H0"
+       id="path1226" />
+  </g>
+</svg>

webpack/lib/channel-controller.js

@@ -12,7 +12,7 @@ export default class ChannelController{
 		this.list = [];
 
 		/* (3) Current channel buffer */
-		this.buffer = {};
+		this._buffer = {};
 
 
 	}
@@ -39,10 +39,12 @@ export default class ChannelController{
 		this.current = channel.id;
 
 		/* (4) Update buffer */
-		this.buffer = {};
+		this._buffer = {};
-		for( let c in this.list )
+		for( let c of this.list )
-			if( c.id === this.current )
+			if( c.id === this.current ){
-				this.buffer = c;
+				console.warn(c);
+				this._buffer = c;
+			}
 
 		/* (5) Load rooms */
 		gs.get.room.fetch();

webpack/lib/content-controller.js

@@ -11,14 +11,14 @@ export default class ContentController{
 	---------------------------------------------------------*/
 	get cid(){  return gs.get.channel.current; }
 
-	get cbuf(){ return gs.get.channel.buffer; }
+	get cbuf(){ return gs.get.channel._buffer; }
 
 
 	/* (3) Room ID binding
 	*
 	---------------------------------------------------------*/
 	get rid(){ return gs.get.room.text.current; }
-	get rbuf(){ return gs.get.room.buffer.text; }
+	get rbuf(){ return gs.get.room._buffer.text; }
 
 	get messages(){ return this.rbuf.messages; }
 	get members(){  return this.rbuf.members;  }

webpack/lib/popup-controller.js

@@ -54,6 +54,19 @@ export default class PopupController{
 			reset(){ this.data.username = ''; },
 			submit(){ gs.get.channel.invite(this.data.username) && this.parent.hide(); }
 		});
+		/* (5) Remove channel */
+		this.register('channel.remove', {
+			data: {},
+			reset(){ },
+			submit(){ gs.get.channel.remove() && this.parent.hide(); }
+		});
+		/* (6) Leave channel */
+		this.register('channel.leave', {
+			data: {},
+			reset(){ },
+			submit(){ gs.get.channel.remove() && this.parent.hide(); }
+		});
+
 
 	}
 

webpack/lib/room-controller.js

@@ -11,7 +11,7 @@ export default class RoomController{
 		this.voice = { list: [], current: null, visible: true };
 
 		/* (2) Current room buffer */
-		this.buffer = {
+		this._buffer = {
 			text:  {},
 			voice: {}
 		};
@@ -46,10 +46,10 @@ export default class RoomController{
 		this[type].current = room.id;
 
 		/* (6) Update buffer */
-		this.buffer[type] = {};
+		this._buffer[type] = {};
 		for( let r of this[type].list )
 			if( r.id === this[type].current )
-				this.buffer[type] = r;
+				this._buffer[type] = r;
 
 
 		console.log(`[room.${type}.opened] ${room.name} (${room.id})`, room.id);

webpack/scss/global.scss

@@ -146,6 +146,13 @@
 
 		&:hover{ background-color: darken($main, 5%);}
 		&:active{ background-color: darken($main, 10%);}
+
+		&.invalid{
+			$main: #e65835;
+			background-color: $main;
+			&:hover{ background-color: darken($main, 5%);}
+			&:active{ background-color: darken($main, 10%);}
+		}
 	}
 
 }

webpack/vue/auth/dialog.vue

@@ -57,7 +57,10 @@
 			&[data-icon='create']{   background-image: url('/asset/svg/minipopup.create.svg');   }
 			&[data-icon='category']{ background-image: url('/asset/svg/minipopup.category.svg'); }
 			&[data-icon='edit']{     background-image: url('/asset/svg/minipopup.edit.svg');     }
+			&[data-icon='remove']{   background-image: url('/asset/svg/minipopup.remove.svg');   }
+			&[data-icon='remove']{   background-image: url('/asset/svg/minipopup.remove.svg');   }
 			&[data-icon='logout']{   background-image: url('/asset/svg/minipopup.logout.svg');   }
+			&[data-icon='leave']{   background-image: url('/asset/svg/minipopup.leave.svg');   }
 
 			&:hover{ background-color: #f9f9f9;	color: #737f8d; }
 
@@ -71,7 +74,9 @@
 				&:hover{ color: #677bc4; }
 			}
 
-			&.invalid:hover{ color: #e65835; }
+			&.invalid{ color: #e65835; }
+
+			&.invalid-h:hover{ color: #e65835; }
 
 		}
 
@@ -88,7 +93,7 @@
 
 
 		<div class='header' @click='minipop = !minipop' :data-open='minipop?1:0'>
-			<div class='title'>{{ gs.auth.user.username }}</div>
+			<div class='title'>{{ gs.content.cbuf.label }}</div>
 		</div>
 
 		<div class='body'>
@@ -96,12 +101,14 @@
 			<div v-show='minipop' class='minipopup'>
 				<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 class ='invalid-h' data-icon='remove'   @click='gs.popup.show(`channel.remove`);  minipop=false'>Remove 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>
+				<span class='sb invalid' data-icon='leave'    @click='gs.popup.show(`channel.leave`);   minipop=false'>Leave channel</span>
 				<span class='sb invalid' data-icon='logout'   @click='gs.auth.token=null; gs.refresh()'>Logout</span>
 			</div>
 
-			<div v-for='(rooms, type) in gs.room'>
+			<div v-for='(rooms, type) in gs.room' v-if='type[0] != `_`'>
 				<div class='toggle'
 					:data-toggle='rooms.visible?1:0'
 					@click='rooms.visible=!rooms.visible'>

webpack/vue/auth/menu.vue

@@ -5,7 +5,7 @@
 	<div class='menu'>
 
 		<!-- First elements -->
-		<span class='channel' data-special='1' data-icon='group' :data-sub='gs.channel.buffer.users != null ? `${gs.channel.buffer.users.length} online`:`0 online`'></span>
+		<span class='channel' data-special='1' data-icon='group' :data-sub='gs.content.cbuf.users != null ? `${gs.content.cbuf.users.length} online`:`0 online`'></span>
 
 		<!-- Channel List -->
 		<span v-for='c in gs.channel.list'

webpack/vue/auth/wrapper.vue

@@ -18,7 +18,7 @@
 
 		<!-- Pop-up ROOM CREATE -->
 		<div class='popup' v-show='gs.popup.get(`room.create`).active'>
-			<span class='header'>Create {{ gs.popup.get(`room.create`).data.type }} channel</span>
+			<span class='header'>Create {{ gs.popup.get(`room.create`).data.type }} room</span>
 
 			<span class='body form'>
 				<label for='channel_name'>Room Name</label>
@@ -84,6 +84,34 @@
 			</span>
 		</div>
 
+		<!-- Pop-up CHANNEL REMOVE -->
+		<div class='popup' v-show='gs.popup.get(`channel.remove`).active'>
+			<span class='header'>Remove channel</span>
+
+			<span class='body form'>
+				<p>You are about to remove the channel #<b>{{ gs.content.cbuf.label }}</b>, this operation cannot be undone.</p>
+			</span>
+
+			<span class='footer form'>
+				<button @click='gs.popup.hide()'>Cancel</button>
+				<button class='submit invalid' @click='gs.popup.get(`channel.remove`).submit()'>Remove</button>
+			</span>
+		</div>
+
+		<!-- Pop-up CHANNEL LEAVE -->
+		<div class='popup' v-show='gs.popup.get(`channel.leave`).active'>
+			<span class='header'>Leave channel</span>
+
+			<span class='body form'>
+				<p>You are about to leave the channel #<b>{{ gs.content.cbuf.label }}</b>, this operation cannot be undone.</p>
+			</span>
+
+			<span class='footer form'>
+				<button @click='gs.popup.hide()'>Cancel</button>
+				<button class='submit invalid' @click='gs.popup.get(`channel.leave`).submit()'>Leave</button>
+			</span>
+		</div>
+
 	</div>