From 8c8acdaca7630695e7b83928d1b3891d7276c7c1 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Wed, 21 Mar 2018 22:44:49 +0100 Subject: [PATCH] [init.local-channels][vue.dialog] dialog 'body' now works standalone [asset.svg] added 'dialog.text', 'dialog.voice' --- public_html/asset/svg/dialog.text.svg | 60 ++++++++++++++ public_html/asset/svg/dialog.voice.svg | 4 + webpack/common.js | 5 +- webpack/init/local-channels.js | 17 ++++ webpack/scss/dialog.scss | 106 +++++++++++++++++++++++++ webpack/vue/dialog.vue | 17 +++- 6 files changed, 207 insertions(+), 2 deletions(-) create mode 100644 public_html/asset/svg/dialog.text.svg create mode 100644 public_html/asset/svg/dialog.voice.svg create mode 100644 webpack/init/local-channels.js diff --git a/public_html/asset/svg/dialog.text.svg b/public_html/asset/svg/dialog.text.svg new file mode 100644 index 0000000..06d1c74 --- /dev/null +++ b/public_html/asset/svg/dialog.text.svg @@ -0,0 +1,60 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/public_html/asset/svg/dialog.voice.svg b/public_html/asset/svg/dialog.voice.svg new file mode 100644 index 0000000..66a732c --- /dev/null +++ b/public_html/asset/svg/dialog.voice.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/webpack/common.js b/webpack/common.js index b7f73ee..ba071b3 100644 --- a/webpack/common.js +++ b/webpack/common.js @@ -24,4 +24,7 @@ gs.set('router', new VueRouter({ /* (2) Main components ---------------------------------------------------------*/ /* (1) Initialize channels & channel menu */ -require('./init/channels.js'); \ No newline at end of file +require('./init/channels.js'); + +/* (2) Initialize local channels (for a specific channel) */ +require('./init/local-channels.js'); \ No newline at end of file diff --git a/webpack/init/local-channels.js b/webpack/init/local-channels.js new file mode 100644 index 0000000..d492f1d --- /dev/null +++ b/webpack/init/local-channels.js @@ -0,0 +1,17 @@ +/* (1) Initialisation +---------------------------------------------------------*/ +/* (1) Init @channel object */ +gs.set('lchannel', [ + { + type: 'text', + visible: true, + list: [ 'general', 'test-text' ], + active: 0 + }, + { + type: 'voice', + visible: true, + list: [ 'general' , 'test-voice' ], + active: null + } +]); \ No newline at end of file diff --git a/webpack/scss/dialog.scss b/webpack/scss/dialog.scss index b39c545..3880b47 100644 --- a/webpack/scss/dialog.scss +++ b/webpack/scss/dialog.scss @@ -42,7 +42,113 @@ background-color: $dialog-bg; + color: #72767d; + z-index: 100; + + // overflow: hidden; + + /* (3) Toggle label */ + & div.toggle{ + display: block; + width: calc( 100% - 2*.5em ); + + + margin: 0 .5em; + margin-top: 2em; + padding-left: 1em; + + background: left center no-repeat; + background-size: auto 60%; + + color: #72767d; + font-size: .7em; + letter-spacing: .05em; + font-weight: bold; + text-transform: uppercase; + + transition: color .2s ease-in-out; + + &:hover{ color: #b9bbbe; } + + cursor: pointer; + + // when not toggle-active + &[data-toggle], + &[data-toggle='0']{ + background-image: url('../asset/svg/arrow.right.svg'); + &:hover{ background-image: url('../asset/svg/arrow.right@hover.svg'); } + } + + // when toggle-active + &[data-toggle='1']{ + background-image: url('../asset/svg/arrow.down.svg'); + &:hover{ background-image: url('../asset/svg/arrow.down@hover.svg'); } + } + + } + + /* (4) UL after toggle label */ + & div.toggle + ul, + & div.toggle:not([data-toggle='1']) + ul{ + + display: none; + + /* (5) List items */ + li{ + display: block; + + margin: .1em .5em; + padding: .3em .5em; + + padding-left: 1.6em; + + border-radius: 3px / 3px; + + background-color: transition; + + transition: color .2s ease-in-out, + background-color .2s ease-in-out; + + cursor: pointer; + + &:hover{ + color: #ddd; + background-color: #36393f; + } + + &.active{ + color: #ddd; + background-color: rgba(79,84,92,.6); + } + + // {1} Trailing icon // + &:before{ + content: ''; + + display: inline-block; + position: absolute; + margin-left: -1.3em; + width: 1.3em; + height: 1.3em; + + background: center center no-repeat; + background-size: auto 80%; + } + + // for 'text' + &[data-type='text']:before{ background-image: url('../asset/svg/dialog.text.svg'); } + + // for 'voice' + &[data-type='voice']:before{ background-image: url('../asset/svg/dialog.voice.svg'); } + } + } + + // when visible + & div.toggle[data-toggle='1'] + ul{ display: block; } + + + } } \ No newline at end of file diff --git a/webpack/vue/dialog.vue b/webpack/vue/dialog.vue index 66b1824..9b94113 100644 --- a/webpack/vue/dialog.vue +++ b/webpack/vue/dialog.vue @@ -12,6 +12,21 @@ +
+ +
+
{{ c.type }} channels
+
    +
  • {{ lc }}
    • +
+
+
+ @@ -21,7 +36,7 @@ export default { name: 'dialog-', - data(){ return { gs: gs.get }; }, + data(){ return { gs: gs.get }; } }