[init.local-channels][vue.dialog] dialog 'body' now works standalone [asset.svg] added 'dialog.text', 'dialog.voice'
This commit is contained in:
xdrm-brackets
parent
70d195f99a
commit
8c8acdaca7
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -24,4 +24,7 @@ gs.set('router', new VueRouter({
|
|||
/* (2) Main components
|
||||
---------------------------------------------------------*/
|
||||
/* (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');
|
||||
|
|
@ -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
|
||||
}
|
||||
]);
|
||||
|
|
@ -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; }
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -12,6 +12,21 @@
|
|||
|
||||
</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>
|
||||
|
||||
|
||||
|
|
@ -21,7 +36,7 @@ export default {
|
|||
|
||||
name: 'dialog-',
|
||||
|
||||
data(){ return { gs: gs.get }; },
|
||||
data(){ return { gs: gs.get }; }
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue