147 lines
3.9 KiB
Vue
147 lines
3.9 KiB
Vue
<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='remove']{ background-image: url('/asset/svg/minipopup.remove.svg'); }
|
|
&[data-icon='remove']{ background-image: url('/asset/svg/minipopup.remove.svg'); }
|
|
&[data-icon='logout']{ background-image: url('/asset/svg/minipopup.logout.svg'); }
|
|
&[data-icon='leave']{ background-image: url('/asset/svg/minipopup.leave.svg'); }
|
|
&[data-icon='password']{ background-image: url('/asset/svg/minipopup.password.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{ color: #e65835; }
|
|
|
|
&.invalid-h:hover{ color: #e65835; }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
<template>
|
|
|
|
|
|
|
|
<div class='dialog'>
|
|
|
|
|
|
<div class='header' @click='minipop = !minipop' :data-open='minipop?1:0'>
|
|
<div class='title'>{{ gs.content.cbuf.label }}</div>
|
|
</div>
|
|
|
|
<div class='body'>
|
|
|
|
<div v-show='minipop' class='minipopup'>
|
|
<span class='special sa' @click='gs.popup.show(`channel.invite`); minipop=false'>Invite people</span>
|
|
<span data-icon='create' @click='gs.popup.show(`channel.create`); minipop=false'>Create channel</span>
|
|
<span class ='invalid-h' data-icon='remove' @click='gs.popup.show(`channel.remove`); minipop=false'>Remove channel</span>
|
|
<span data-icon='category' @click='gs.popup.show(`room.create`); minipop=false'>Create room</span>
|
|
<span data-icon='edit' @click='gs.popup.show(`username.change`); minipop=false'>Change nickname</span>
|
|
<span data-icon='password' @click='gs.popup.show(`password.change`); minipop=false'>Change password</span>
|
|
<span class='sb invalid-h' data-icon='leave' @click='gs.popup.show(`channel.leave`); minipop=false'>Leave channel</span>
|
|
<span class='sb invalid' data-icon='logout' @click='gs.auth.token=null; gs.refresh()'>Logout</span>
|
|
</div>
|
|
|
|
<div v-for='(rooms, type) in gs.room' v-if='type[0] != `_`'>
|
|
<div class='toggle'
|
|
:data-toggle='rooms.visible?1:0'
|
|
@click='rooms.visible=!rooms.visible'>
|
|
{{ type }} <span>rooms</span>
|
|
</div>
|
|
<div class='add' @click='gs.popup.show(`room.create`)' data-title='Create channel'></div>
|
|
<ul>
|
|
<li v-for='r in rooms.list'
|
|
:class='rooms.current==r.id?`active`:``'
|
|
:data-type='r.type'
|
|
@click='gs.room.nav(r.type, r.id)'>{{ r.name }}<span class='rem' @click='gs.popup.show(`room.remove`)'></span></li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</template><script>
|
|
export default {
|
|
|
|
name: 'dialog-',
|
|
|
|
data(){ return { gs: gs.get, minipop: false }; },
|
|
|
|
methods: {
|
|
/* show: */
|
|
}
|
|
|
|
}
|
|
|
|
</script> |