Merge pull request #5 from HangYang/inline-icons

Add explicit options icon

Author: hankxdev

icon-options.svg

@@ -49,8 +49,7 @@ input {
   list-style: none;
 }
 .ext {
-  overflow: hidden;
-  text-overflow: ellipsis;
+  display: flex;
   white-space: nowrap;
   font-size: 1.2em;
   line-height: 1.8;
@@ -68,28 +67,28 @@ input {
 .ext.disabled + .disabled {
   margin-top: 0;
 }
-.ext:hover {
-  background-color: #ecf0f1;
-  cursor: pointer;
-}
-.extIcon {
-  margin-right: 0.3em;
-}
-.extIcon a{
-  cursor: default;
+.extName {
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.extIcon img {
+.ext img {
   width: 16px;
   height: 16px;
-  cursor: default;
   vertical-align: -3px;
 }
-a .hasOpt {
-  overflow: hidden;
-  transition-duration: 0.8s;
-  transition-property: transform;
+.extIcon {
+  margin-right: 0.3em;
+}
+.extOptions {
+  padding: 0 0.3em;
+  opacity: 0.1;
+}
+.ext > *:hover {
+  background-color: #ecf0f1;
   cursor: pointer;
 }
-.hasOpt:hover {
-  transform: rotate(360deg);
+*:hover + .extOptions,
+.extOptions:hover {
+  opacity: 1;
 }

popup.css

@@ -4,7 +4,7 @@ const getI18N = chrome.i18n.getMessage;
 const searchText = $('#searchext');
 
 // disable the default context menu
-window.oncontextmenu = () => false;
+eul.on('contextmenu', () => false);
 
 searchText.attr('placeholder', getI18N('searchTxt')).focus();
 
@@ -56,9 +56,8 @@ cme.getAll(ets => {
 	$('#pbgjpgbpljobkekbhnnmlikbbfhbhmem').remove();
 });
 
-$('body').on('click', 'li.ext', function (e) {
-	const that = $(this);
-	const extSel = that.find('.extName');
+$('body').on('click', '.extName', function (e) {
+	const extSel = $(this);
 	const eid = extSel.attr('data-id');
 	cme.get(eid, e => {
 		extSel.parent().remove();
@@ -72,17 +71,11 @@ $('body').on('click', 'li.ext', function (e) {
 			});
 		}
 	});
-}).on('click', 'li .extIcon a', function (e) {
-	const that = $(this);
-	const href = that.attr('href');
-	if (href !== '#') {
-		chrome.tabs.create({url: href});
-	}
-}).on('mouseup', 'li.ext', function (e) {
+}).on('click', '.extOptions', e => {
+	chrome.tabs.create({url: e.target.href});
+}).on('mouseup', '.extName', e => {
 	if (e.which == 3) {
-		const that = $(this);
-		const eid = that.find('.extName').attr('data-id');
-		cme.uninstall(eid);
+		cme.uninstall(e.target.dataset.id);
 	}
 });
 
@@ -114,21 +107,25 @@ function getIcon(icons, size = 16) {
 				return false;
 			}
 			selectedIcon = icon.url;
-		})
+		});
 	}
 	return selectedIcon;
 }
 
 function createList(e, enabled) {
 	return `
 		<li class='ext ${enabled ? '' : 'disabled'}' id='${e.id}' data-name="${e.name.toLowerCase()}">
-			<span class='extIcon' title='${e.optionsUrl ? getI18N('openOpt') : ''}'>
-				<a href='${e.optionsUrl ? e.optionsUrl : ''}'><img
-					src='${getIcon(e.icons, 16)}'
-					class='${e.optionsUrl ? 'hasOpt' : ''}'
-				></a>
+			<span class='extName' data-id='${e.id}' title='${getI18N('toggleEnable')}'>
+				<img class='extIcon' src='${getIcon(e.icons, 16)}'>
+				${e.name}
 			</span>
-			<span class='extName' data-id='${e.id}' title='${getI18N('toggleEnable')}'>${e.name}</span>
+			${
+				e.optionsUrl ? `
+					<a class='extOptions' href='${e.optionsUrl}' title='${getI18N('openOpt')}'>
+						<img src="${chrome.extension.getURL('icon-options.svg')}">
+					</a>
+				` : ``
+			}
 		</li>
 	`;
 }