[popup] added 'channel.remove' 'channel.remove' + fixed icons in [dialog]

This commit is contained in:
xdrm-brackets 2018-03-28 21:51:04 +02:00
parent e3fd7e147d
commit 9d8d052d6d
12 changed files with 253 additions and 24 deletions

View File

@ -1,3 +1,56 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16"> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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
</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="18"
height="18"
viewBox="0 0 16 16"
version="1.1"
id="svg898"
sodipodi:docname="minipopup.invite.svg"
inkscape:version="0.92.2 5c3e80d, 2017-08-06">
<metadata
id="metadata904">
<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="defs902" />
<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="namedview900"
showgrid="false"
inkscape:zoom="45.722222"
inkscape:cx="9.109356"
inkscape:cy="9"
inkscape:window-x="0"
inkscape:window-y="29"
inkscape:window-maximized="1"
inkscape:current-layer="svg898" />
<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)"
id="path896" />
</svg>

Before

Width:  |  Height:  |  Size: 494 B

After

Width:  |  Height:  |  Size: 1.9 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="18"
height="18"
viewBox="0 0 16 16"
version="1.1"
id="svg898"
sodipodi:docname="minipopup.leave.svg"
inkscape:version="0.92.2 5c3e80d, 2017-08-06">
<metadata
id="metadata904">
<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="defs902" />
<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="namedview900"
showgrid="false"
inkscape:zoom="45.722222"
inkscape:cx="9.109356"
inkscape:cy="9"
inkscape:window-x="0"
inkscape:window-y="29"
inkscape:window-maximized="1"
inkscape:current-layer="svg898" />
<path
style="fill:#e65835;stroke-width:1.125;fill-opacity:1"
d="M 6.1875 2.25 C 4.2932137 2.25 2.25 4.2794175 2.25 6.2382812 C 2.25 8.1971449 4.2932138 10.125 6.1875 10.125 C 8.0817857 10.125 10.125 8.1971449 10.125 6.2382812 C 10.125 4.2794175 8.0817857 2.25 6.1875 2.25 z M 13.595703 7.1757812 L 12.800781 7.9707031 L 14.392578 9.5625 L 12.800781 11.154297 L 13.595703 11.949219 L 15.1875 10.357422 L 16.779297 11.949219 L 17.574219 11.154297 L 15.982422 9.5625 L 17.574219 7.9707031 L 16.779297 7.1757812 L 15.1875 8.7675781 L 13.595703 7.1757812 z M 6.1875 11.25 C 3.8989283 11.25 0 12.743836 0 15.101562 L 0 16.875 L 12.375 16.875 L 12.375 15.101562 C 12.375 12.743836 8.4760714 11.25 6.1875 11.25 z "
transform="scale(0.88888889)"
id="path969" />
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -1,6 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
<g fill="none" fill-rule="evenodd"> <g fill="none" fill-rule="evenodd">
<path d="M0 0h18v18H0z"/> <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"/> <path fill="#737F8D" d="M14.25 2.25H3.75c-.8325 0-1.5.6675-1.5 1.5v3h1.5v-3h10.5v10.5H3.75v-3h-1.5v3c0 .8284271.67157287 1.5 1.5 1.5h10.5c.8284271 0 1.5-.6715729 1.5-1.5V3.75c0-.8325-.675-1.5-1.5-1.5zm-6.69 9.435l1.065 1.065L12.375 9l-3.75-3.75L7.56 6.3075 9.5025 8.25H2.25v1.5h7.2525L7.56 11.685z"/>
</g> </g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 402 B

After

Width:  |  Height:  |  Size: 450 B

View File

@ -0,0 +1,63 @@
<?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="18"
height="18"
version="1.1"
id="svg1230"
sodipodi:docname="minipopup.remove.svg"
inkscape:version="0.92.2 5c3e80d, 2017-08-06">
<metadata
id="metadata1236">
<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="defs1234" />
<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="namedview1232"
showgrid="false"
inkscape:zoom="27.333333"
inkscape:cx="9"
inkscape:cy="9"
inkscape:window-x="0"
inkscape:window-y="29"
inkscape:window-maximized="1"
inkscape:current-layer="g1228" />
<g
fill="none"
fill-rule="evenodd"
id="g1228">
<path
d="M 12.535534,13.949747 9,10.414214 5.4644661,13.949747 4.0502525,12.535534 7.5857864,9 4.0502525,5.4644661 5.4644661,4.0502525 9,7.5857864 12.535534,4.0502525 13.949747,5.4644661 10.414214,9 l 3.535533,3.535534"
id="path1224"
inkscape:connector-curvature="0"
style="fill:#737f8d;fill-rule:nonzero" />
<path
d="M0 0h18v18H0"
id="path1226" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -12,7 +12,7 @@ export default class ChannelController{
this.list = []; this.list = [];
/* (3) Current channel buffer */ /* (3) Current channel buffer */
this.buffer = {}; this._buffer = {};
} }
@ -39,10 +39,12 @@ export default class ChannelController{
this.current = channel.id; this.current = channel.id;
/* (4) Update buffer */ /* (4) Update buffer */
this.buffer = {}; this._buffer = {};
for( let c in this.list ) for( let c of this.list )
if( c.id === this.current ) if( c.id === this.current ){
this.buffer = c; console.warn(c);
this._buffer = c;
}
/* (5) Load rooms */ /* (5) Load rooms */
gs.get.room.fetch(); gs.get.room.fetch();

View File

@ -11,14 +11,14 @@ export default class ContentController{
---------------------------------------------------------*/ ---------------------------------------------------------*/
get cid(){ return gs.get.channel.current; } get cid(){ return gs.get.channel.current; }
get cbuf(){ return gs.get.channel.buffer; } get cbuf(){ return gs.get.channel._buffer; }
/* (3) Room ID binding /* (3) Room ID binding
* *
---------------------------------------------------------*/ ---------------------------------------------------------*/
get rid(){ return gs.get.room.text.current; } get rid(){ return gs.get.room.text.current; }
get rbuf(){ return gs.get.room.buffer.text; } get rbuf(){ return gs.get.room._buffer.text; }
get messages(){ return this.rbuf.messages; } get messages(){ return this.rbuf.messages; }
get members(){ return this.rbuf.members; } get members(){ return this.rbuf.members; }

View File

@ -54,6 +54,19 @@ export default class PopupController{
reset(){ this.data.username = ''; }, reset(){ this.data.username = ''; },
submit(){ gs.get.channel.invite(this.data.username) && this.parent.hide(); } submit(){ gs.get.channel.invite(this.data.username) && this.parent.hide(); }
}); });
/* (5) Remove channel */
this.register('channel.remove', {
data: {},
reset(){ },
submit(){ gs.get.channel.remove() && this.parent.hide(); }
});
/* (6) Leave channel */
this.register('channel.leave', {
data: {},
reset(){ },
submit(){ gs.get.channel.remove() && this.parent.hide(); }
});
} }

View File

@ -11,7 +11,7 @@ export default class RoomController{
this.voice = { list: [], current: null, visible: true }; this.voice = { list: [], current: null, visible: true };
/* (2) Current room buffer */ /* (2) Current room buffer */
this.buffer = { this._buffer = {
text: {}, text: {},
voice: {} voice: {}
}; };
@ -46,10 +46,10 @@ export default class RoomController{
this[type].current = room.id; this[type].current = room.id;
/* (6) Update buffer */ /* (6) Update buffer */
this.buffer[type] = {}; this._buffer[type] = {};
for( let r of this[type].list ) for( let r of this[type].list )
if( r.id === this[type].current ) if( r.id === this[type].current )
this.buffer[type] = r; this._buffer[type] = r;
console.log(`[room.${type}.opened] ${room.name} (${room.id})`, room.id); console.log(`[room.${type}.opened] ${room.name} (${room.id})`, room.id);

View File

@ -146,6 +146,13 @@
&:hover{ background-color: darken($main, 5%);} &:hover{ background-color: darken($main, 5%);}
&:active{ background-color: darken($main, 10%);} &:active{ background-color: darken($main, 10%);}
&.invalid{
$main: #e65835;
background-color: $main;
&:hover{ background-color: darken($main, 5%);}
&:active{ background-color: darken($main, 10%);}
}
} }
} }

View File

@ -57,7 +57,10 @@
&[data-icon='create']{ background-image: url('/asset/svg/minipopup.create.svg'); } &[data-icon='create']{ background-image: url('/asset/svg/minipopup.create.svg'); }
&[data-icon='category']{ background-image: url('/asset/svg/minipopup.category.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='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='logout']{ background-image: url('/asset/svg/minipopup.logout.svg'); }
&[data-icon='leave']{ background-image: url('/asset/svg/minipopup.leave.svg'); }
&:hover{ background-color: #f9f9f9; color: #737f8d; } &:hover{ background-color: #f9f9f9; color: #737f8d; }
@ -71,7 +74,9 @@
&:hover{ color: #677bc4; } &:hover{ color: #677bc4; }
} }
&.invalid:hover{ color: #e65835; } &.invalid{ color: #e65835; }
&.invalid-h:hover{ color: #e65835; }
} }
@ -88,20 +93,22 @@
<div class='header' @click='minipop = !minipop' :data-open='minipop?1:0'> <div class='header' @click='minipop = !minipop' :data-open='minipop?1:0'>
<div class='title'>{{ gs.auth.user.username }}</div> <div class='title'>{{ gs.content.cbuf.label }}</div>
</div> </div>
<div class='body'> <div class='body'>
<div v-show='minipop' class='minipopup'> <div v-show='minipop' class='minipopup'>
<span class='special sa' @click='gs.popup.show(`channel.invite`); minipop=false'>Invite people</span> <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 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 class ='invalid-h' data-icon='remove' @click='gs.popup.show(`channel.remove`); minipop=false'>Remove channel</span>
<span data-icon='edit' @click='gs.popup.show(`nickname.change`); minipop=false'>Change nickname</span> <span data-icon='category' @click='gs.popup.show(`room.create`); minipop=false'>Create room</span>
<span class='sb invalid' data-icon='logout' @click='gs.auth.token=null; gs.refresh()'>Logout</span> <span data-icon='edit' @click='gs.popup.show(`nickname.change`); minipop=false'>Change nickname</span>
<span class='sb invalid' 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>
<div v-for='(rooms, type) in gs.room'> <div v-for='(rooms, type) in gs.room' v-if='type[0] != `_`'>
<div class='toggle' <div class='toggle'
:data-toggle='rooms.visible?1:0' :data-toggle='rooms.visible?1:0'
@click='rooms.visible=!rooms.visible'> @click='rooms.visible=!rooms.visible'>

View File

@ -5,7 +5,7 @@
<div class='menu'> <div class='menu'>
<!-- First elements --> <!-- First elements -->
<span class='channel' data-special='1' data-icon='group' :data-sub='gs.channel.buffer.users != null ? `${gs.channel.buffer.users.length} online`:`0 online`'></span> <span class='channel' data-special='1' data-icon='group' :data-sub='gs.content.cbuf.users != null ? `${gs.content.cbuf.users.length} online`:`0 online`'></span>
<!-- Channel List --> <!-- Channel List -->
<span v-for='c in gs.channel.list' <span v-for='c in gs.channel.list'

View File

@ -18,7 +18,7 @@
<!-- Pop-up ROOM CREATE --> <!-- Pop-up ROOM CREATE -->
<div class='popup' v-show='gs.popup.get(`room.create`).active'> <div class='popup' v-show='gs.popup.get(`room.create`).active'>
<span class='header'>Create {{ gs.popup.get(`room.create`).data.type }} channel</span> <span class='header'>Create {{ gs.popup.get(`room.create`).data.type }} room</span>
<span class='body form'> <span class='body form'>
<label for='channel_name'>Room Name</label> <label for='channel_name'>Room Name</label>
@ -84,6 +84,34 @@
</span> </span>
</div> </div>
<!-- Pop-up CHANNEL REMOVE -->
<div class='popup' v-show='gs.popup.get(`channel.remove`).active'>
<span class='header'>Remove channel</span>
<span class='body form'>
<p>You are about to remove the channel #<b>{{ gs.content.cbuf.label }}</b>, this operation cannot be undone.</p>
</span>
<span class='footer form'>
<button @click='gs.popup.hide()'>Cancel</button>
<button class='submit invalid' @click='gs.popup.get(`channel.remove`).submit()'>Remove</button>
</span>
</div>
<!-- Pop-up CHANNEL LEAVE -->
<div class='popup' v-show='gs.popup.get(`channel.leave`).active'>
<span class='header'>Leave channel</span>
<span class='body form'>
<p>You are about to leave the channel #<b>{{ gs.content.cbuf.label }}</b>, this operation cannot be undone.</p>
</span>
<span class='footer form'>
<button @click='gs.popup.hide()'>Cancel</button>
<button class='submit invalid' @click='gs.popup.get(`channel.leave`).submit()'>Leave</button>
</span>
</div>
</div> </div>