mti
/
discord-client
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[init.channels | mockup.channel | vue.menu] added channel 'link' (can be used in URL) in opposite to 'label' that is meant to be displayed

This commit is contained in:
xdrm-brackets 2018-03-21 20:37:03 +01:00
parent 4fb99407f4
commit a5702d5a0f
6 changed files with 27 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
webpack/init/channels.js
View File

@ -8,10 +8,10 @@ gs.get.channel.current = null;
/* (3) Initialize list */ /* (3) Initialize list */
gs.get.channel.list = [ gs.get.channel.list = [
{ id: -1, label: 'me', sub: '0 online', icon: 'group' }, { id: -1, link: 'me', label: 'My data', sub: '0 online', icon: 'group' },
{ id: 0, label: 'test1', sub: null, icon: 'test1' }, { id: 0, link: 'test-1', label: 'test 1', sub: null, icon: 'test1' },
{ id: 1, label: 'test2', sub: null, icon: 'test2' }, { id: 1, link: 'test-2', label: 'test 2', sub: null, icon: 'test2' },
{ id: -2, label: 'add', sub: null, icon: 'add', add: 1 } { id: -2, link: null, label: 'add', sub: null, icon: 'add', add: 1 }
]; ];
/* (4) Initialize vue-router channel navigation */ /* (4) Initialize vue-router channel navigation */
@ -33,17 +33,17 @@ gs.get.channel.nav = function(channel_id=null){
var channel = this.get(channel_id); var channel = this.get(channel_id);
/* (3) Abort if same channel */ /* (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; return false;
/* (3) Navigate vue-router */ /* (3) Navigate vue-router */
gs.get.router.push(`/channel/${channel.label}`); gs.get.router.push(`/channel/${channel.link}`);
/* (4) Update active element */ /* (4) Update active element */
this.current = channel.id; this.current = channel.id;
/* (5) Log channel */ /* (5) Log channel */
console.log(`[channel.current] ${channel.label}`); console.log(`[channel.current] ${channel.link} (${channel.label})`);
return true; return true;
}; };
@ -92,9 +92,9 @@ gs.get.channel.get = function(channel_id=null){
if( 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) ){ if( !isNaN(this.current) ){
/* (2) Return matching id in list */ /* (2) Return matching id in list */
@ -110,18 +110,18 @@ gs.get.channel.get = function(channel_id=null){
/* (2) Get from URL /* (2) Get from URL
---------------------------------------------------------*/ ---------------------------------------------------------*/
/* (1) If vue-router has @label param */ /* (1) If vue-router has @link param */
if( gs.get.router.history.current.params.label ){ if( gs.get.router.history.current.params.link ){
/* (2) Extract @label */ /* (2) Extract @link */
let label = gs.get.router.history.current.params.label; 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 ){ 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 return c; // exit point
} }

1
webpack/mockup/channels.json
View File

@ -1,6 +1,7 @@
[ [
{ {
"id": 0, "id": 0,
"link": "channel-1",
"label": "channel 1" "label": "channel 1"
} }
] ]

2
webpack/routes.js
View File

@ -1,7 +1,7 @@
export default{ 0: [ export default{ 0: [
{ {
path: '/channel/:label', path: '/channel/:link',
component: require('./vue/channel.vue').default component: require('./vue/channel.vue').default
}, { }, {
path: '*', path: '*',

8
webpack/scss/dialog.scss
View File

@ -17,14 +17,18 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: calc( 100% - 2*1em );
height: $header-height; height: calc( #{$header-height} - #{$header-height/2} );
border-bottom: #{$bb-height} solid darken($dialog-header-bg, 5%); border-bottom: #{$bb-height} solid darken($dialog-header-bg, 5%);
box-shadow: 0 #{$bb-offset - $bb-height} 0 darken($dialog-header-bg, 2%); box-shadow: 0 #{$bb-offset - $bb-height} 0 darken($dialog-header-bg, 2%);
z-index: 200; z-index: 200;
font-weight: bold;
padding: #{$header-height/4} 1em;
} }
/* (2) Container BODY */ /* (2) Container BODY */

2
webpack/vue/dialog.vue
View File

@ -5,7 +5,7 @@
<div class='dialog'> <div class='dialog'>
<div class='header'> <div class='header'>
<div class='title'></div> <div class='title'>{{ gs.channel.get().id < 0 ? '' : gs.channel.get().label }}</div>
</div> </div>
<div class='body'> <div class='body'>

4
webpack/vue/menu.vue
View File

@ -8,13 +8,13 @@
<!-- Channel List --> <!-- Channel List -->
<span v-for='c in gs.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`' :class='c.id == gs.channel.current ? `channel active` : `channel`'
:data-sub='c.sub' :data-sub='c.sub'
:data-special='c.id == -1?1:0' :data-special='c.id == -1?1:0'
:data-add='c.add' :data-add='c.add'
:data-icon='c.icon' :data-icon='c.icon'
:title='c.id<0?``:c.label' :title='c.label'
></span> ></span>
<!-- Last elements --> <!-- Last elements -->