[vue.auth.dialog] added channel dialog
This commit is contained in:
xdrm-brackets
parent
665edead89
commit
f971c2483b
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
@ -5,12 +87,20 @@
|
|||
<div class='dialog'>
|
||||
|
||||
|
||||
<div class='header'>
|
||||
<div class='title'>{{ 'blabla' }}</div>
|
||||
<div class='header' @click='minipop = !minipop'>
|
||||
<div class='title'>{{ '{USERNAME}' }}</div>
|
||||
</div>
|
||||
|
||||
<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 class='toggle'
|
||||
:data-toggle='rooms.visible?1:0'
|
||||
|
|
@ -37,7 +127,11 @@ export default {
|
|||
|
||||
name: 'dialog-',
|
||||
|
||||
data(){ return { gs: gs.get }; }
|
||||
data(){ return { gs: gs.get, minipop: false }; },
|
||||
|
||||
methods: {
|
||||
/* show: */
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue