From a5702d5a0feb0cda39bf7db97e58c45727a6990f Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Wed, 21 Mar 2018 20:37:03 +0100
Subject: [PATCH] [init.channels | mockup.channel | vue.menu] added channel
 'link' (can be used in URL) in opposite to 'label' that is meant to be
 displayed

---
 webpack/init/channels.js     | 32 ++++++++++++++++----------------
 webpack/mockup/channels.json |  1 +
 webpack/routes.js            |  2 +-
 webpack/scss/dialog.scss     |  8 ++++++--
 webpack/vue/dialog.vue       |  2 +-
 webpack/vue/menu.vue         |  4 ++--
 6 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/webpack/init/channels.js b/webpack/init/channels.js
index cecaa31..75f66fa 100644
--- a/webpack/init/channels.js
+++ b/webpack/init/channels.js
@@ -8,10 +8,10 @@ gs.get.channel.current = null;
 
 /* (3) Initialize list */
 gs.get.channel.list = [
-	{ id: -1, label: 'me',    sub: '0 online', icon: 'group'       },
-	{ id: 0,  label: 'test1', sub: null,       icon: 'test1'       },
-	{ id: 1,  label: 'test2', sub: null,       icon: 'test2'       },
-	{ id: -2, label: 'add',   sub: null,       icon: 'add', add: 1 }
+	{ id: -1, link: 'me',     label: 'My data', sub: '0 online', icon: 'group'       },
+	{ id: 0,  link: 'test-1', label: 'test 1',  sub: null,       icon: 'test1'       },
+	{ id: 1,  link: 'test-2', label: 'test 2',  sub: null,       icon: 'test2'       },
+	{ id: -2, link: null,     label: 'add',     sub: null,       icon: 'add', add: 1 }
 ];
 
 /* (4) Initialize vue-router channel navigation */
@@ -33,17 +33,17 @@ gs.get.channel.nav = function(channel_id=null){
 	var channel = this.get(channel_id);
 
 	/* (3) Abort if same channel */
-	if( gs.get.router.history.current.params.label === channel.label )
+	if( gs.get.router.history.current.params.link === channel.link )
 		return false;
 
 	/* (3) Navigate vue-router */
-	gs.get.router.push(`/channel/${channel.label}`);
+	gs.get.router.push(`/channel/${channel.link}`);
 
 	/* (4) Update active element */
 	this.current = channel.id;
 
 	/* (5) Log channel */
-	console.log(`[channel.current] ${channel.label}`);
+	console.log(`[channel.current] ${channel.link} (${channel.label})`);
 
 	return true;
 };
@@ -92,9 +92,9 @@ gs.get.channel.get = function(channel_id=null){
 
 	if( channel_id === null ){
 
-		/* (1) Get @active channel
+		/* (1) Get @current channel
 		---------------------------------------------------------*/
-		/* (1) If @active is set */
+		/* (1) If @current is set */
 		if( !isNaN(this.current) ){
 
 			/* (2) Return matching id in list */
@@ -110,18 +110,18 @@ gs.get.channel.get = function(channel_id=null){
 
 		/* (2) Get from URL
 		---------------------------------------------------------*/
-		/* (1) If vue-router has @label param */
-		if( gs.get.router.history.current.params.label ){
+		/* (1) If vue-router has @link param */
+		if( gs.get.router.history.current.params.link ){
 
-			/* (2) Extract @label */
-			let label = gs.get.router.history.current.params.label;
+			/* (2) Extract @link */
+			let link = gs.get.router.history.current.params.link;
 
-			/* (3) Return matching label in list */
+			/* (3) Return matching link in list */
 			for( let c of this.list ){
 
-				if( c.label === label ){
+				if( c.link === link ){
 
-					this.current = c.id; // set @active
+					this.current = c.id; // set @current
 					return c;           // exit point
 
 				}
diff --git a/webpack/mockup/channels.json b/webpack/mockup/channels.json
index 7e9fd7b..a770cf4 100644
--- a/webpack/mockup/channels.json
+++ b/webpack/mockup/channels.json
@@ -1,6 +1,7 @@
 [
 	{
 		"id":    0,
+		"link":  "channel-1",
 		"label": "channel 1"
 	}
 ]
\ No newline at end of file
diff --git a/webpack/routes.js b/webpack/routes.js
index 532096f..01fce46 100644
--- a/webpack/routes.js
+++ b/webpack/routes.js
@@ -1,7 +1,7 @@
 export default{ 0: [
 
 	{
-		path: '/channel/:label',
+		path: '/channel/:link',
 		component: require('./vue/channel.vue').default
 	}, {
 		path: '*',
diff --git a/webpack/scss/dialog.scss b/webpack/scss/dialog.scss
index 36cadc1..b39c545 100644
--- a/webpack/scss/dialog.scss
+++ b/webpack/scss/dialog.scss
@@ -17,14 +17,18 @@
 		position: absolute;
 			top: 0;
 			left: 0;
-			width: 100%;
-			height: $header-height;
+			width: calc( 100% - 2*1em );
+			height: calc( #{$header-height} - #{$header-height/2} );
 
 		border-bottom: #{$bb-height} solid darken($dialog-header-bg, 5%);
 		box-shadow: 0 #{$bb-offset - $bb-height} 0 darken($dialog-header-bg, 2%);
 
 		z-index: 200;
 
+		font-weight: bold;
+
+		padding: #{$header-height/4} 1em;
+
 	}
 
 	/* (2) Container BODY */
diff --git a/webpack/vue/dialog.vue b/webpack/vue/dialog.vue
index e8ffa36..66b1824 100644
--- a/webpack/vue/dialog.vue
+++ b/webpack/vue/dialog.vue
@@ -5,7 +5,7 @@
 	<div class='dialog'>
 
 		<div class='header'>
-			<div class='title'></div>
+			<div class='title'>{{ gs.channel.get().id < 0 ? '' : gs.channel.get().label }}</div>
 		</div>
 
 		<div class='body'>
diff --git a/webpack/vue/menu.vue b/webpack/vue/menu.vue
index 92ec304..871578c 100644
--- a/webpack/vue/menu.vue
+++ b/webpack/vue/menu.vue
@@ -8,13 +8,13 @@
 
 		<!-- Channel List -->
 		<span v-for='c in gs.channel.list'
-			@click='gs.channel.nav(c.id);'
+			@click='c.link && gs.channel.nav(c.id);'
 			:class='c.id == gs.channel.current ? `channel active` : `channel`'
 			:data-sub='c.sub'
 			:data-special='c.id == -1?1:0'
 			:data-add='c.add'
 			:data-icon='c.icon'
-			:title='c.id<0?``:c.label'
+			:title='c.label'
 			></span>
 
 		<!-- Last elements -->