[scss.popup] popup layout

This commit is contained in:
xdrm-brackets 2018-03-22 18:15:57 +01:00
parent 4ff95c44b8
commit 1dd2db9d79
12 changed files with 558 additions and 12 deletions

View File

@ -0,0 +1,55 @@
<?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"
data-name="Livello 1"
id="Livello_1"
viewBox="0 0 128 128"
version="1.1"
sodipodi:docname="checked.svg"
inkscape:version="0.92.2 5c3e80d, 2017-08-06">
<metadata
id="metadata13">
<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="defs11" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1015"
id="namedview9"
showgrid="false"
inkscape:zoom="1.84375"
inkscape:cx="64"
inkscape:cy="64"
inkscape:window-x="0"
inkscape:window-y="29"
inkscape:window-maximized="1"
inkscape:current-layer="Livello_1" />
<path
d="M 100.42,31.022206 43.293309,87.203898 27.670348,70.757873 a 4.5725739,4.5725739 0 0 0 -6.630232,6.294911 l 18.823763,19.814487 a 4.5725739,4.5725739 0 0 0 3.231285,1.417498 h 0.07621 a 4.5725739,4.5725739 0 0 0 3.200802,-1.310805 L 106.80636,37.530503 a 4.5752722,4.5752722 0 1 0 -6.41684,-6.523539 z"
id="path6"
inkscape:connector-curvature="0"
style="stroke-width:1.52419126;fill:#7289da;fill-opacity:1" />
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -0,0 +1,44 @@
<?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"
enable-background="new 0 0 100 100"
id="Layer_1"
version="1.1"
viewBox="0 0 100 100"
xml:space="preserve"
sodipodi:docname="dialog.add.svg"
inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
id="metadata9"><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="defs7" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1015"
id="namedview5"
showgrid="false"
inkscape:zoom="9.44"
inkscape:cx="56.65302"
inkscape:cy="52.459637"
inkscape:window-x="0"
inkscape:window-y="29"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" /><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:#a1a3a0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79571247;stroke-linecap:butt;stroke-linejoin:round;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 48.203125,17.248047 c -0.770911,8.33e-4 -1.395651,0.625573 -1.396484,1.396484 V 49.505859 H 15.945312 c -0.770912,8.33e-4 -1.395651,0.625573 -1.396484,1.396485 v 3.894531 c 8.33e-4,0.770911 0.625573,1.395651 1.396484,1.396484 h 30.861329 v 30.861329 c 8.33e-4,0.770911 0.625573,1.395651 1.396484,1.396484 h 3.894531 c 0.770912,-8.33e-4 1.395652,-0.625572 1.396485,-1.396484 V 56.193359 h 30.861328 c 0.770911,-8.33e-4 1.395651,-0.625573 1.396484,-1.396484 V 50.902344 C 85.75112,50.131432 85.126381,49.506692 84.355469,49.505859 H 83.574219 53.494141 V 18.644531 c -8.33e-4,-0.770912 -0.625573,-1.395651 -1.396485,-1.396484 z"
id="polygon2"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccccccccccccc" /></svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

@ -0,0 +1,44 @@
<?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"
enable-background="new 0 0 100 100"
id="Layer_1"
version="1.1"
viewBox="0 0 100 100"
xml:space="preserve"
sodipodi:docname="dialog.add@hover.svg"
inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
id="metadata9"><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="defs7" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1015"
id="namedview5"
showgrid="false"
inkscape:zoom="9.44"
inkscape:cx="56.65302"
inkscape:cy="52.459637"
inkscape:window-x="0"
inkscape:window-y="29"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" /><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:#dddedd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.79571247;stroke-linecap:butt;stroke-linejoin:round;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 48.203125,17.248047 c -0.770911,8.33e-4 -1.395651,0.625573 -1.396484,1.396484 V 49.505859 H 15.945312 c -0.770912,8.33e-4 -1.395651,0.625573 -1.396484,1.396485 v 3.894531 c 8.33e-4,0.770911 0.625573,1.395651 1.396484,1.396484 h 30.861329 v 30.861329 c 8.33e-4,0.770911 0.625573,1.395651 1.396484,1.396484 h 3.894531 c 0.770912,-8.33e-4 1.395652,-0.625572 1.396485,-1.396484 V 56.193359 h 30.861328 c 0.770911,-8.33e-4 1.395651,-0.625573 1.396484,-1.396484 V 50.902344 C 85.75112,50.131432 85.126381,49.506692 84.355469,49.505859 H 83.574219 53.494141 V 18.644531 c -8.33e-4,-0.770912 -0.625573,-1.395651 -1.396485,-1.396484 z"
id="polygon2"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccccccccccccc" /></svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

@ -0,0 +1,56 @@
<?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"
width="16"
height="16"
viewBox="0 0 16 16"
version="1.1"
id="svg851"
sodipodi:docname="dialog.text@active.svg"
inkscape:version="0.92.2 5c3e80d, 2017-08-06">
<metadata
id="metadata857">
<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="defs855" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1015"
id="namedview853"
showgrid="false"
inkscape:zoom="51.4375"
inkscape:cx="8"
inkscape:cy="8"
inkscape:window-x="0"
inkscape:window-y="29"
inkscape:window-maximized="1"
inkscape:current-layer="svg851" />
<path
style="fill:#b9bbbe;fill-opacity:1"
d="M2.27333333,12 L2.74666667,9.33333333 L0.08,9.33333333 L0.313333333,8 L2.98,8 L3.68666667,4 L1.02,4 L1.25333333,2.66666667 L3.92,2.66666667 L4.39333333,0 L5.72666667,0 L5.25333333,2.66666667 L9.25333333,2.66666667 L9.72666667,0 L11.06,0 L10.5866667,2.66666667 L13.2533333,2.66666667 L13.02,4 L10.3533333,4 L9.64666667,8 L12.3133333,8 L12.08,9.33333333 L9.41333333,9.33333333 L8.94,12 L7.60666667,12 L8.08,9.33333333 L4.08,9.33333333 L3.60666667,12 L2.27333333,12 L2.27333333,12 Z M5.02,4 L4.31333333,8 L8.31333333,8 L9.02,4 L5.02,4 L5.02,4 Z"
transform="translate(1.333 2)"
id="path849" />
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -0,0 +1,55 @@
<?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"
width="16"
height="16"
viewBox="0 0 16 16"
version="1.1"
id="svg914"
sodipodi:docname="dialog.voice@active.svg"
inkscape:version="0.92.2 5c3e80d, 2017-08-06">
<metadata
id="metadata920">
<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="defs918" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="800"
inkscape:window-height="480"
id="namedview916"
showgrid="false"
inkscape:zoom="14.75"
inkscape:cx="8"
inkscape:cy="8"
inkscape:window-x="0"
inkscape:window-y="29"
inkscape:window-maximized="0"
inkscape:current-layer="svg914" />
<path
style="fill:#b9bbbe;fill-opacity:1"
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"
id="path912" />
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -11,12 +11,14 @@
<!-- STYLESHEET --> <!-- STYLESHEET -->
<link type='text/css' rel='stylesheet' href='./css/layout.css'> <link type='text/css' rel='stylesheet' href='./css/layout.css'>
<link type='text/css' rel='stylesheet' href='./css/global.css'>
<link type='text/css' rel='stylesheet' href='./css/menu.css'> <link type='text/css' rel='stylesheet' href='./css/menu.css'>
<link type='text/css' rel='stylesheet' href='./css/dialog.css'> <link type='text/css' rel='stylesheet' href='./css/dialog.css'>
<link type='text/css' rel='stylesheet' href='./css/container.css'> <link type='text/css' rel='stylesheet' href='./css/container.css'>
<link type='text/css' rel='stylesheet' href='./css/pop-up.css'>
<!-- FONT --> <!-- FONT -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Arvo|Exo+2" rel="stylesheet"> <!-- <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Arvo|Exo+2" rel="stylesheet"> -->
<!-- BODY --> <!-- BODY -->

View File

@ -10,6 +10,7 @@ $dialog-header-bg: #2f3136;
$dialog-bg: #2f3136; $dialog-bg: #2f3136;
$container-bg: #36393e; $container-bg: #36393e;
$header-bg: #36393f; $header-bg: #36393f;
$main: #7289da;
/* (1) Header specific /* (1) Header specific

View File

@ -11,7 +11,7 @@
background-color: $dialog-bg; background-color: $dialog-bg;
/* (1) Container HEADER */ /* (2) Container HEADER */
& > div.header{ & > div.header{
display: block; display: block;
position: absolute; position: absolute;
@ -29,9 +29,16 @@
padding: #{$header-height/4} 1em; padding: #{$header-height/4} 1em;
background: url('../asset/svg/arrow.down@hover.svg') right .7em center no-repeat;
background-size: auto 1.2em;
cursor: pointer;
z-index: 100;
} }
/* (2) Container BODY */ /* (3) Container BODY */
& > div.body{ & > div.body{
display: block; display: block;
position: absolute; position: absolute;
@ -50,9 +57,8 @@
/* (3) Toggle label */ /* (3) Toggle label */
& div.toggle{ & div.toggle{
display: block; display: inline-block;
width: calc( 100% - 2*.5em ); width: calc( 100% - 2*.5em - 3em );
margin: 0 .5em; margin: 0 .5em;
margin-top: 2em; margin-top: 2em;
@ -88,9 +94,27 @@
} }
/* (4) UL after toggle label */ /* (4) Add button */
& div.toggle + ul, & div.add{
& div.toggle:not([data-toggle='1']) + ul{ display: inline-block;
position: relative;
top: .15em;
left: -.5em;
width: 1em;
height: 1em;
background: url('../asset/svg/dialog.add.svg') center center no-repeat;
background-size: auto 100%;
cursor: pointer;
&:hover{ background-image: url('../asset/svg/dialog.add@hover.svg'); }
}
/* (5) UL after toggle label */
& div.toggle ~ ul,
& div.toggle:not([data-toggle='1']) ~ ul{
display: none; display: none;
@ -149,7 +173,7 @@
} }
// when visible // when visible
& div.toggle[data-toggle='1'] + ul{ display: block; } & div.toggle[data-toggle='1'] ~ ul{ display: block; }

25
webpack/scss/global.scss Normal file
View File

@ -0,0 +1,25 @@
@import 'constants';
/* (1) Title box
---------------------------------------------------------*/
// [data-title]:before{ content: 'test'; }
// [data-title]:before{
// content: attr(data-title);
// display: block;
// position: absolute;
// padding: .8em 1em;
// border-radius: 5px / 5px;
// color: #ddd;
// background-color: #000;
// transform: translateY(-75%) translateX(80%);
// }

215
webpack/scss/pop-up.scss Normal file
View File

@ -0,0 +1,215 @@
@import 'constants';
/* (1) Popup box
---------------------------------------------------------*/
.popup{
display: flex;
position: fixed;
top: 50%;
left: 50%;
width: 440px;
min-height: 200px;
flex-direction: column;
border-radius: 5px / 5px;
box-shadow: 0 0 0 100vw rgba(0,0,0,.8);
background-color: #36393f;
overflow: hidden;
z-index: 800;
transform: translateX(-50%) translateY(-50%);
}
/* (2) Popup HEADER
---------------------------------------------------------*/
.popup > .header{
display: block;
margin: 1em 1.3em;
font-size: .9em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
/* (3) Popup BODY
---------------------------------------------------------*/
.popup > .body{
flex: 1;
display: flex;
margin: 0 1.2em;
padding-bottom: 1em;
flex-direction: column;
align-items: stretch;
flex-wrap: nowrap;
label{
display: block;
margin-top: 2em;
margin-bottom: .7em;
font-size: .7em;
text-transform: uppercase;
letter-spacing: 1px;
}
input,
.select-box{
display: block;
padding: .7em 1em;
margin-bottom: .5em;
border: 1px solid #222;
border-radius: 3px / 3px;
background-color: #313339;
color: #fff;
transition: border-color .1s ease-in-out;
&:hover{ border-color: #111; }
&:focus{ border-color: #7289da; }
}
.select-box[data-type]{
padding-left: 4em;
cursor: pointer;
transition: background-color .1s ease-in-out,
border-color 0s;
// {1} Trailing icon //
&:before{
content: '';
display: inline-block;
position: absolute;
margin-top: .1em;
margin-left: -1.65em;
width: 1.3em;
height: 1.3em;
background: center center no-repeat;
background-size: auto 80%;
}
// specific images
&[data-type='text']:before{ background-image: url('../asset/svg/dialog.text@active.svg'); }
&[data-type='voice']:before{ background-image: url('../asset/svg/dialog.voice@active.svg'); }
// {2} Checkbox //
&:after{
content: '';
display: block;
position: absolute;
margin-top: -1.4em;
margin-left: -3.4em;
width: 1.3em;
height: 1.3em;
border: 1px solid #888;
border-radius: 3px / 3px;
background: center center no-repeat;
background-size: auto 80%;
}
// {3} Active item //
&[data-selected='1']{
background-color: $main;
border-color: $main;
&:hover{ border-color: $main; }
&:after{
border-color: #fff;
background-color: #fff;
background-image: url('../asset/svg/checked.svg');
}
}
}
}
/* (4) Popup Footer
---------------------------------------------------------*/
.popup > .footer{
display: flex;
position: relative;
padding: 1.2em 1em;
flex-direction: row;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
background-color: #2f3136;
& > button:first-child{
margin: 0 2em;
border: 0;
background-color: transparent;
color: #fff;
font-size: .8em;
font-weight: normal;
&:hover{ text-decoration: underline; }
cursor: pointer;
}
& > button:nth-child(2){
padding: .8em 1.5em;
border: 0;
border-radius: 3px / 3px;
background-color: $main;
color: #fff;
font-size: .8em;
font-weight: normal;
cursor: pointer;
transition: background-color .1s ease-in-out;
&:hover{ background-color: darken($main, 5%);}
&:active{ background-color: darken($main, 10%);}
}
}

View File

@ -4,6 +4,7 @@
<div class='dialog'> <div class='dialog'>
<div class='header'> <div class='header'>
<div class='title'>{{ 'blabla' }}</div> <div class='title'>{{ 'blabla' }}</div>
</div> </div>
@ -13,7 +14,10 @@
<div v-for='(rooms, type) in gs.room'> <div v-for='(rooms, type) in gs.room'>
<div class='toggle' <div class='toggle'
:data-toggle='rooms.visible?1:0' :data-toggle='rooms.visible?1:0'
@click='rooms.visible=!rooms.visible'>{{ type }} rooms</div> @click='rooms.visible=!rooms.visible'>
{{ type }} <span>rooms</span>
</div>
<div class='add' data-title='Create channel' @click='gs.room.create()'></div>
<ul> <ul>
<li v-for='r in rooms.list' <li v-for='r in rooms.list'
:class='rooms.current==r.id?`active`:``' :class='rooms.current==r.id?`active`:``'

View File

@ -13,6 +13,27 @@
<!-- Container --> <!-- Container -->
<router-view></router-view> <router-view></router-view>
<!-- Pop-up -->
<div class='popup'>
<span class='header'>Create text channel</span>
<span class='body'>
<label for='channel_name'>Channel Name</label>
<input type='text' name='channel_name'>
<label for='channel_name'>Channel Type</label>
<div class='select'>
<span class='select-box' @click='selected=0' :data-selected='selected==0?1:0' data-type='text'>Text Channel</span>
<span class='select-box' @click='selected=1' :data-selected='selected==1?1:0' data-type='voice'>Voice Channel</span>
</div>
</span>
<span class='footer'>
<button>Cancel</button>
<button>Create Channel</button>
</span>
</div>
</div> </div>
@ -25,7 +46,7 @@
name: 'wrapper-', name: 'wrapper-',
data(){ return { gs: gs.get }; }, data(){ return { gs: gs.get, selected: 1}; },
components: { components: {
'MenuComp': menu_vue, 'MenuComp': menu_vue,