[vue.auth.dialog] added channel dialog

This commit is contained in:
xdrm-brackets 2018-03-28 17:25:30 +02:00
parent 665edead89
commit f971c2483b
6 changed files with 122 additions and 3 deletions

View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h18v18H0z"/>
<path d="M0 0h18v18H0z"/>
<path fill="#737F8D" fill-rule="nonzero" d="M3 2h4v4H3V2zm8 5h5v4h-5V7zm0 5h5v4h-5v-4zm-1-2H6v3h4v2H4V7h2v1h4v2z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 295 B

View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
<g fill="none" fill-rule="evenodd">
<path fill="#737F8D" fill-rule="nonzero" d="M15 10h-5v5H8v-5H3V8h5V3h2v5h5"/>
<path d="M0 0h18v18H0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 226 B

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
<path fill="#737F8D" fill-rule="evenodd" d="M3 14v-2.5l7.88-7.85c.19-.2.51-.2.71 0l1.76 1.76c.2.2.2.51 0 .71L5.47 14H3zm12 0H7.5l2-2H15v2z"/>
</svg>

After

Width:  |  Height:  |  Size: 214 B

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16">
<path fill="#7289DA" d="M10.5,7 C12.1838095,7 14,5.28666667 14,3.54545455 C14,1.80424242 12.1838095,0 10.5,0 C8.81619048,0 7,1.80424242 7,3.54545455 C7,5.28666667 8.81619048,7 10.5,7 Z M3,6 L3,4 L2,4 L2,6 L0,6 L0,7 L2,7 L2,9 L3,9 L3,7 L5,7 L5,6 L3,6 Z M10.5,8 C8.46571429,8 5,9.32848485 5,11.4242424 L5,13 L16,13 L16,11.4242424 C16,9.32848485 12.5342857,8 10.5,8 Z" transform="matrix(-1 0 0 1 16 2)"/>
</svg>

After

Width:  |  Height:  |  Size: 494 B

View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
<g fill="none" fill-rule="evenodd">
<path d="M0 0h18v18H0z"/>
<path fill="#737F8D" d="M9 9h5.25c-.3975 3.0825-2.46 5.835-5.25 6.69V9H3.75V4.725L9 2.3925V9zm0 0H3.75c.3975 3.0825 2.46 5.835 5.25 6.69V9h5.25V4.725L9 2.3925V9zM9 .75l-6.75 3v4.5c0 4.1625 2.88 8.0475 6.75 9 3.87-.9525 6.75-4.8375 6.75-9v-4.5L9 .75z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 402 B

View File

@ -1,3 +1,85 @@
<style lang="scss">
@keyframes scale-up{
0%{ transform: scale(0); }
100%{ transform: scale(1); }
}
.minipopup{
display: block;
position: absolute;
top: 0;
left: 0;
width: calc( 100% - 2*1em );
height: auto;
margin: .7em 1em;
border-radius: 5px;
box-shadow: 0 2px 10 0 rgba(0,0,0,.5);
background-color: #ffffff;
will-change: transform;
transform-origin: 100% 0;
animation: scale-up .3s ease-in-out;
overflow: hidden;
z-index: 100;
& > span{
display: block;
position: relative;
padding: .7em 1em;
padding-left: 3em;
background-color: #fff;
background: url('/asset/svg/minipopup.invite.svg') left 1em center no-repeat;
background-size: auto 45%;
color: #99aab5;
font-size: .85em;
letter-spacing: .05em;
white-space: nowrap;
cursor: pointer;
transition: background-color .2s ease-in-out,
color .2s ease-in-out;
&[data-icon='create']{ background-image: url('/asset/svg/minipopup.create.svg'); }
&[data-icon='category']{ background-image: url('/asset/svg/minipopup.category.svg'); }
&[data-icon='edit']{ background-image: url('/asset/svg/minipopup.edit.svg'); }
&[data-icon='logout']{ background-image: url('/asset/svg/minipopup.logout.svg'); }
&:hover{ background-color: #f9f9f9; color: #737f8d; }
/* separators */
/*after*/ &.sa{ border-bottom: 1px solid #f3f3f3; }
/*before*/ &.sb{ border-top: 1px solid #f3f3f3; }
&.special{
color: #7289da;
&:hover{ color: #677bc4; }
}
&.invalid:hover{ color: #e65835; }
}
}
</style>
<template> <template>
@ -5,12 +87,20 @@
<div class='dialog'> <div class='dialog'>
<div class='header'> <div class='header' @click='minipop = !minipop'>
<div class='title'>{{ 'blabla' }}</div> <div class='title'>{{ '{USERNAME}' }}</div>
</div> </div>
<div class='body'> <div class='body'>
<div v-show='minipop' class='minipopup'>
<span class='special sa' @click=''>Invite people</span>
<span data-icon='create' @click='gs.popup.show(`channel.create`); minipop=false'>Create channel</span>
<span data-icon='category' @click='gs.popup.show(`room.create`); minipop=false'>Create room</span>
<span data-icon='edit' @click=''>Change nickname</span>
<span class='sb invalid' data-icon='logout' @click=''>Logout</span>
</div>
<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'
@ -37,7 +127,11 @@ export default {
name: 'dialog-', name: 'dialog-',
data(){ return { gs: gs.get }; } data(){ return { gs: gs.get, minipop: false }; },
methods: {
/* show: */
}
} }