[vue.auth.dialog] added channel dialog

public_html/asset/svg/minipopup.category.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+  <g fill="none" fill-rule="evenodd">
+    <path d="M0 0h18v18H0z"/>
+    <path d="M0 0h18v18H0z"/>
+    <path fill="#737F8D" fill-rule="nonzero" d="M3 2h4v4H3V2zm8 5h5v4h-5V7zm0 5h5v4h-5v-4zm-1-2H6v3h4v2H4V7h2v1h4v2z"/>
+  </g>
+</svg>

public_html/asset/svg/minipopup.create.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#737F8D" fill-rule="nonzero" d="M15 10h-5v5H8v-5H3V8h5V3h2v5h5"/>
+    <path d="M0 0h18v18H0"/>
+  </g>
+</svg>

public_html/asset/svg/minipopup.edit.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+  <path fill="#737F8D" fill-rule="evenodd" d="M3 14v-2.5l7.88-7.85c.19-.2.51-.2.71 0l1.76 1.76c.2.2.2.51 0 .71L5.47 14H3zm12 0H7.5l2-2H15v2z"/>
+</svg>

public_html/asset/svg/minipopup.invite.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16">
+  <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>

public_html/asset/svg/minipopup.logout.svg

@@ -0,0 +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"/>
+  </g>
+</svg>

webpack/vue/auth/dialog.vue

@@ -1,3 +1,85 @@
+<style lang="scss">
+
+	@keyframes scale-up{
+		0%{   transform: scale(0); }
+		100%{ transform: scale(1); }
+	}
+
+	.minipopup{
+		display: block;
+		position: absolute;
+			top: 0;
+			left: 0;
+			width: calc( 100% - 2*1em );
+			height: auto;
+
+		margin: .7em 1em;
+
+		border-radius: 5px;
+		box-shadow: 0 2px 10 0 rgba(0,0,0,.5);
+
+		background-color: #ffffff;
+
+		will-change: transform;
+		transform-origin: 100% 0;
+
+		animation: scale-up .3s ease-in-out;
+
+
+
+		overflow: hidden;
+
+		z-index: 100;
+
+		& > span{
+
+			display: block;
+			position: relative;
+
+			padding: .7em 1em;
+			padding-left: 3em;
+
+			background-color: #fff;
+			background: url('/asset/svg/minipopup.invite.svg') left 1em center no-repeat;
+			background-size: auto 45%;
+
+			color: #99aab5;
+			font-size: .85em;
+			letter-spacing: .05em;
+			white-space: nowrap;
+
+			cursor: pointer;
+
+			transition: background-color .2s ease-in-out,
+						color            .2s ease-in-out;
+
+
+			&[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='logout']{   background-image: url('/asset/svg/minipopup.logout.svg');   }
+
+			&:hover{ background-color: #f9f9f9;	color: #737f8d; }
+
+			/* separators */
+			/*after*/  &.sa{ border-bottom: 1px solid #f3f3f3; }
+			/*before*/ &.sb{ border-top: 1px solid #f3f3f3; }
+
+			&.special{
+				color: #7289da;
+
+				&:hover{ color: #677bc4; }
+			}
+
+			&.invalid:hover{ color: #e65835; }
+
+		}
+
+	}
+
+
+
+</style>
 <template>
 
 
@@ -5,12 +87,20 @@
 	<div class='dialog'>
 
 
-		<div class='header'>
+		<div class='header' @click='minipop = !minipop'>
-			<div class='title'>{{ 'blabla' }}</div>
+			<div class='title'>{{ '{USERNAME}' }}</div>
 		</div>
 
 		<div class='body'>
 
+			<div v-show='minipop' class='minipopup'>
+				<span class='special sa'                    @click=''>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=''>Change nickname</span>
+				<span class='sb invalid' data-icon='logout' @click=''>Logout</span>
+			</div>
+
 			<div v-for='(rooms, type) in gs.room'>
 				<div class='toggle'
 					:data-toggle='rooms.visible?1:0'
@@ -37,7 +127,11 @@ export default {
 
 	name: 'dialog-',
 
-	data(){ return { gs: gs.get }; }
+	data(){ return { gs: gs.get, minipop: false }; },
+
+	methods: {
+		/* show: */
+	}
 
 }