From dbe360f695b2b18cc5813065630ba8b9a5ddb670 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Thu, 29 Mar 2018 11:57:25 +0200
Subject: [PATCH] [vue.auth.dialog][scss.dialog] added icon to remove rooms

---
 .../asset/svg/minipopup.remove@hover.svg      | 63 +++++++++++++++++++
 webpack/scss/dialog.scss                      | 23 +++++++
 webpack/vue/auth/dialog.vue                   |  2 +-
 3 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 public_html/asset/svg/minipopup.remove@hover.svg

diff --git a/public_html/asset/svg/minipopup.remove@hover.svg b/public_html/asset/svg/minipopup.remove@hover.svg
new file mode 100644
index 0000000..2a3c83a
--- /dev/null
+++ b/public_html/asset/svg/minipopup.remove@hover.svg
@@ -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@hover.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.1829268"
+     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:#f04747;fill-rule:nonzero;fill-opacity:1" />
+    <path
+       d="M0 0h18v18H0"
+       id="path1226" />
+  </g>
+</svg>
diff --git a/webpack/scss/dialog.scss b/webpack/scss/dialog.scss
index 41ec81c..20dd463 100644
--- a/webpack/scss/dialog.scss
+++ b/webpack/scss/dialog.scss
@@ -125,6 +125,7 @@
 			/* (5) List items */
 			li{
 				display: block;
+				position: relative;
 
 				margin: .1em .5em;
 				padding: .3em .5em;
@@ -173,6 +174,28 @@
 					&:before{ background-image: url('../asset/svg/dialog.voice.svg'); }
 					&.active{ color: #ddd; }
 				}
+
+				// background-color: #f00;
+
+
+				& > span.rem{
+
+					display: none;
+					position: absolute;
+						top: calc( 50% - 1em/2 );
+						left: calc( 100% - .5em - 1em );
+						width: 1em;
+						height: 1em;
+
+					background: url('../asset/svg/minipopup.remove.svg') center center no-repeat;
+					background-size: contain;
+
+					&:hover{ background-image: url('../asset/svg/minipopup.remove@hover.svg'); }
+
+				}
+
+				// only show 'remove' icon on hover
+				&:hover > span.rem{ display: block; }
 			}
 		}
 
diff --git a/webpack/vue/auth/dialog.vue b/webpack/vue/auth/dialog.vue
index 78cde13..7c6cfef 100644
--- a/webpack/vue/auth/dialog.vue
+++ b/webpack/vue/auth/dialog.vue
@@ -121,7 +121,7 @@
 					<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 }}</li>
+						@click='gs.room.nav(r.type, r.id)'>{{ r.name }}<span class='rem' @click='gs.popup.show(`room.remove`)'></span></li>
 				</ul>
 			</div>