[init.local-channels][vue.dialog] dialog 'body' now works standalone [asset.svg] added 'dialog.text', 'dialog.voice'

This commit is contained in:
xdrm-brackets 2018-03-21 22:44:49 +01:00
parent 70d195f99a
commit 8c8acdaca7
6 changed files with 207 additions and 2 deletions

View File

@ -0,0 +1,60 @@
<?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"
fill="none"
height="24"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
version="1.1"
id="svg10"
sodipodi:docname="dialog.text.svg"
inkscape:version="0.92.2 5c3e80d, 2017-08-06">
<metadata
id="metadata16">
<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="defs14" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="810"
inkscape:window-height="480"
id="namedview12"
showgrid="false"
inkscape:zoom="9.8333333"
inkscape:cx="12"
inkscape:cy="12"
inkscape:window-x="0"
inkscape:window-y="29"
inkscape:window-maximized="0"
inkscape:current-layer="svg10" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#5f6166;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="M 9.9980469 1.9863281 A 1.0001 1.0001 0 0 0 9.0058594 2.8886719 L 8.4375 8 L 4 8 A 1.0001 1.0001 0 1 0 4 10 L 8.2148438 10 L 7.7714844 14 L 4 14 A 1.0001 1.0001 0 1 0 4 16 L 7.5488281 16 L 7.0058594 20.888672 A 1.0003547 1.0003547 0 1 0 8.9941406 21.111328 L 9.5625 16 L 13.548828 16 L 13.005859 20.888672 A 1.0003551 1.0003551 0 1 0 14.994141 21.111328 L 15.5625 16 L 20 16 A 1.0001 1.0001 0 1 0 20 14 L 15.785156 14 L 16.228516 10 L 20 10 A 1.0001 1.0001 0 1 0 20 8 L 16.451172 8 L 16.994141 3.1113281 A 1.0001 1.0001 0 0 0 15.998047 1.9863281 A 1.0001 1.0001 0 0 0 15.005859 2.8886719 L 14.4375 8 L 10.451172 8 L 10.994141 3.1113281 A 1.0001 1.0001 0 0 0 9.9980469 1.9863281 z M 10.228516 10 L 14.214844 10 L 13.771484 14 L 9.7851562 14 L 10.228516 10 z "
id="line2" />
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="16" height="16" viewBox="0 0 16 16" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">
<path style='fill:#5f6166;' d="M9.33333333,2 L9.33333333,3.37333333 C11.26,3.94666667 12.6666667,5.73333333 12.6666667,7.84666667 C12.6666667,9.96 11.26,11.74 9.33333333,12.3133333 L9.33333333,13.6933333 C12,13.0866667 14,10.7 14,7.84666667 C14,4.99333333 12,2.60666667 9.33333333,2 L9.33333333,2 Z M11,7.84666667 C11,6.66666667 10.3333333,5.65333333 9.33333333,5.16 L9.33333333,10.5133333 C10.3333333,10.04 11,9.02 11,7.84666667 L11,7.84666667 Z M2,5.84666667 L2,9.84666667 L4.66666667,9.84666667 L8,13.18 L8,2.51333333 L4.66666667,5.84666667 L2,5.84666667 L2,5.84666667 Z"></path>
</svg>

After

Width:  |  Height:  |  Size: 768 B

View File

@ -24,4 +24,7 @@ gs.set('router', new VueRouter({
/* (2) Main components /* (2) Main components
---------------------------------------------------------*/ ---------------------------------------------------------*/
/* (1) Initialize channels & channel menu */ /* (1) Initialize channels & channel menu */
require('./init/channels.js'); require('./init/channels.js');
/* (2) Initialize local channels (for a specific channel) */
require('./init/local-channels.js');

View File

@ -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
}
]);

View File

@ -42,7 +42,113 @@
background-color: $dialog-bg; background-color: $dialog-bg;
color: #72767d;
z-index: 100; 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; }
} }
} }

View File

@ -12,6 +12,21 @@
</div> </div>
<div class='body'>
<div v-for='c in gs.lchannel'>
<div class='toggle'
:data-toggle='c.visible?1:0'
@click='c.visible=!c.visible'>{{ c.type }} channels</div>
<ul>
<li v-for='(lc, i) in c.list'
:class='c.active==i?`active`:``'
:data-type='c.type'
@click='c.active=i'>{{ lc }}</li>
</ul>
</div>
</div>
</div> </div>
@ -21,7 +36,7 @@ export default {
name: 'dialog-', name: 'dialog-',
data(){ return { gs: gs.get }; }, data(){ return { gs: gs.get }; }
} }