From 3e605834279db7bca0846da1b8822452bc76a588 Mon Sep 17 00:00:00 2001
From: Michael Gordeev <michael@xfox111.net>
Date: Sat, 29 Aug 2020 18:39:51 +0300
Subject: [PATCH] Minor 1.8 (#34)

- Ability to rename Tab Groups #33
- Added collections view switch #35
---
 TabsAside.html         | 76 ++++++++++++++++++++++------------------
 css/style.css          | 25 +++++++------
 css/style.dark.css     | 16 +++++++++
 css/style.listview.css | 58 +++++++++++++++++++++++++++++++
 js/aside-script.js     | 79 +++++++++++++++++++++++++++++++++++-------
 js/background.js       |  4 +++
 manifest.json          |  2 +-
 7 files changed, 203 insertions(+), 57 deletions(-)
 create mode 100644 css/style.listview.css
diff --git a/TabsAside.html b/TabsAside.html
index b98aa39..58e8f85 100644
--- a/TabsAside.html
+++ b/TabsAside.html
@@ -8,49 +8,59 @@
 	<link rel="stylesheet" type="text/css" href="css/style.css" />
 	<link rel="stylesheet" type="text/css" href="css/style.generic.css" />
 	<link rel="stylesheet" type="text/css" href="css/style.dark.css" />
+	<link rel="stylesheet" type="text/css" href="css/style.listview.css" />
 
-	<meta charset="utf-8"/>
+	<meta charset="utf-8" />
 </head>
 
 <body>
 	<div class="tabsAside background">
 		<aside class="tabsAside pane">
 			<header>
-				<div>
-					<h1 loc="name">Tabs aside</h1>
-					<button loc_alt="options" class="btn more" title="Options"></button>
+				<h1 loc="name">Tabs aside</h1>
+				<button loc_alt="options" class="btn more" title="Options"></button>
 
-					<nav>
-						<p>
-							<input type="checkbox" id="loadOnRestore"/>
-							<label loc="loadOnRestore" for="loadOnRestore">Load tabs on restore</label>
-						</p>
-						<p>
-							<input type="checkbox" id="swapIconAction"/>
-							<label loc="swapIconAction" for="swapIconAction">Set tabs aside on extension icon click (Alt+P or right-click to open the pane)</label>
-						</p>
-						<p>
-							<input type="checkbox" id="showDeleteDialog"/>
-							<label loc="showDeleteDialog" for="showDeleteDialog">Show confirmation dialog before deleting an item</label>
-						</p>
-						<hr/>
-						<div>
-							<button loc="github" value="https://github.com/xfox111/TabsAsideExtension">Visit GitHub page</button>
-							<button loc="contributors" value="https://github.com/XFox111/TabsAsideExtension/graphs/contributors">Project contributors</button>
-							<button loc="feedback" feedback-button>Leave feedback</button>
-							<button loc="buyMeACoffee" value="https://buymeacoffee.com/xfox111">Buy me a coffee!</button>
-						</div>
-						<hr/>
-						<p>
-							<small>v1.0</small><br />
-							<span loc="credits">Developed by Michael Gordeev</span> (<a href="https://twitter.com/xfox111"
-								target="_blank">@xfox111</a>)
-						</p>
-					</nav>
+				<nav>
+					<p>
+						<input type="checkbox" id="loadOnRestore" />
+						<label loc="loadOnRestore" for="loadOnRestore">Load tabs on restore</label>
+					</p>
+					<p>
+						<input type="checkbox" id="swapIconAction" />
+						<label loc="swapIconAction" for="swapIconAction">Set tabs aside on extension icon click (Alt+P or right-click to open the pane)</label>
+					</p>
+					<p>
+						<input type="checkbox" id="showDeleteDialog" />
+						<label loc="showDeleteDialog" for="showDeleteDialog">Show confirmation dialog before deleting an item</label>
+					</p>
+					<hr />
+					<div>
+						<button loc="github" value="https://github.com/xfox111/TabsAsideExtension">Visit GitHub page</button>
+						<button loc="contributors" value="https://github.com/XFox111/TabsAsideExtension/graphs/contributors">Project contributors</button>
+						<button loc="feedback" feedback-button>Leave feedback</button>
+						<button loc="buyMeACoffee" value="https://buymeacoffee.com/xfox111">Buy me a coffee!</button>
+					</div>
+					<hr />
+					<p>
+						<small>v1.0</small><br />
+						<span loc="credits">Developed by Michael Gordeev</span> (<a href="https://twitter.com/xfox111" target="_blank">@xfox111</a>)
+					</p>
+				</nav>
 
-					<button loc_alt="closePanel" class="btn remove" title="Close panel"></button>
-				</div>
+				<button loc_alt="closePanel" class="btn remove" title="Close panel"></button>
 				<a class="saveTabs"><span class="iconArrowRight"></span> <span loc="setAside">Set current tabs aside</span></a>
+
+				<div class="listviewSwitch tile">
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+				</div>
+				<div class="listviewSwitch list">
+					<div></div>
+					<div></div>
+					<div></div>
+				</div>
 			</header>
 
 			<section>
diff --git a/css/style.css b/css/style.css
index cceddf5..a18e02c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -53,23 +53,20 @@
 		padding: 14px 20px 16px 20px;
 		box-shadow: 0px 0px 5px rgba(0,0,0,.5);
 		background-color: white;
+		display: grid;
+		grid-template-columns: 1fr auto auto;
+		grid-column-gap: 10px;
+		grid-row-gap: 30px;
 	}
-		.tabsAside.pane > header > div
-		{
-			display: grid;
-			grid-template-columns: 1fr auto auto;
-			grid-column-gap: 10px;
-			margin-bottom: 29px;
-		}
 
-			.tabsAside.pane > header > div > h1
+			.tabsAside.pane > header > h1
 			{
 				margin: 0px 5px;
 				font-weight: 500;
 				font-size: 15pt;
 			}
 
-			.tabsAside.pane > header > div > nav
+			.tabsAside.pane > header > nav
 			{
 				top: 45px;
 				right: 55px;
@@ -92,6 +89,7 @@
 			grid-column-gap: 15px;
 
 			font-weight: 600;
+			margin-right: auto;
 		}
 
 		.iconArrowRight
@@ -162,11 +160,18 @@
 			visibility: visible !important;
 		}
 
-		.collectionSet > .header > h4
+		.collectionSet > .header > input
 		{
 			margin: 0px;
 			visibility: visible !important;
 			font-weight: 500;
+			border: none;
+			background: transparent;
+		}
+
+		.collectionSet > .header > input:hover
+		{
+			border: 1px solid black;
 		}
 
 		.collectionSet > .header > a
diff --git a/css/style.dark.css b/css/style.dark.css
index 5be3d7d..33e0c31 100644
--- a/css/style.dark.css
+++ b/css/style.dark.css
@@ -38,6 +38,22 @@
 		background-color: dimgray;
 	}
 
+	.tabsAside[darkmode] .collectionSet > .header > input
+	{
+		color: white;
+	}
+
+	.tabsAside[darkmode] .collectionSet > .header > input:hover
+	{
+		border: 1px solid dimgray;
+	}
+
+	.tabsAside[darkmode] .collectionSet > .header > input:focus
+	{
+		background: white;
+		color: black;
+	}
+
 	.tabsAside[darkmode] a
 	{
 		color: #48adff;
diff --git a/css/style.listview.css b/css/style.listview.css
new file mode 100644
index 0000000..e864eda
--- /dev/null
+++ b/css/style.listview.css
@@ -0,0 +1,58 @@
+.tabsAside[listview] .collectionSet > .header
+{
+	margin-bottom: 5px;
+}
+
+.tabsAside[listview] .collectionSet > .set
+{
+	max-height: 250px;
+}
+
+.tabsAside[listview] .collectionSet > .set > div
+{
+	width: initial;
+	height: initial;
+	background-image: none !important;
+	display: block;
+}
+
+.listviewSwitch
+{
+	width: 20px;
+	height: 20px;
+	display: grid;
+	grid-row-gap: 2px;
+	grid-column-gap: 2px;
+	cursor: pointer;
+}
+
+.listviewSwitch.tile
+{
+	grid-template-columns: 1fr 1fr;
+}
+
+.listviewSwitch > div
+{
+	border-radius: 1px;
+	background-color: #c2c2c2;
+}
+
+.listviewSwitch:hover > div
+{
+	background-color: #a0a0aa;
+}
+
+.tabsAside .listviewSwitch.tile > div
+{
+	background-color: gray;
+}
+
+.tabsAside[listview] .listviewSwitch.tile > div
+{
+	background-color: #c2c2c2;
+}
+
+.tabsAside[listview] .listviewSwitch.list > div
+{
+	background-color: gray;
+}
\ No newline at end of file
diff --git a/js/aside-script.js b/js/aside-script.js
index 7f4fdc8..2a8b6b5 100644
--- a/js/aside-script.js
+++ b/js/aside-script.js
@@ -128,7 +128,7 @@ function Initialize()
 		if (namespace == 'sync')
 			for (key in changes)
 				if (key === 'showDeleteDialog')
-				showDeleteDialog.checked = changes[key].newValue
+					showDeleteDialog.checked = changes[key].newValue
 	});
 	showDeleteDialog.addEventListener("click", () =>
 		chrome.storage.sync.set(
@@ -137,6 +137,42 @@ function Initialize()
 			})
 	);
 
+	// Collections view switch
+	chrome.storage.sync.get(
+		{ "listview": false },
+		values =>
+		{
+			if (values?.listview)
+				pane.setAttribute("listview", "");
+		}
+	);
+	document.querySelectorAll(".listviewSwitch").forEach(i =>
+		{
+			i.onclick = (args) =>
+			{
+				if (args.currentTarget.classList[1] == "list")
+				{
+					pane.setAttribute("listview", "");
+					chrome.storage.sync.set({ "listview": true });
+				}
+				else
+				{
+					pane.removeAttribute("listview");
+					chrome.storage.sync.set({ "listview": false });
+				}
+			}
+		});
+	chrome.storage.onChanged.addListener((changes, namespace) =>
+	{
+		if (namespace == 'sync')
+			for (key in changes)
+				if (key === 'listview')
+					if (changes[key].newValue)
+						pane.setAttribute("listview", "");
+					else
+						pane.removeAttribute("listview");
+	});
+
 	document.querySelectorAll(".tabsAside.pane > header nav button").forEach(i =>
 		i.onclick = () =>
 		{
@@ -182,8 +218,8 @@ function AddCollection(collection)
 	for (var i = 0; i < collection.links.length; i++)
 	{
 		rawTabs +=
-			"<div title='" + collection.titles[i] + "'" + ((collection.thumbnails && collection.thumbnails[i]) ? " style='background-image: url(" + collection.thumbnails[i] + ")'" : "") + ">" +
-				"<span class='openTab' value='" + collection.links[i] + "'></span>" +
+			"<div title='" + collection.titles[i] + "'" + ((collection.thumbnails && collection.thumbnails[i]) ? " style='background-image: url(" + collection.thumbnails[i] + ")'" : "") + " value='" + collection.links[i] + "'>" +
+				//"<span class='openTab' value='" + collection.links[i] + "'></span>" +
 				"<div>" +
 					"<div" + ((collection.icons[i] == 0 || collection.icons[i] == null) ? "" : " style='background-image: url(\"" + collection.icons[i] + "\")'") + "></div>" +
 					"<span>" + collection.titles[i] + "</span>" +
@@ -195,7 +231,7 @@ function AddCollection(collection)
 	list.innerHTML +=
 		"<div class='collectionSet'>" +
 			"<div class='header'>" +
-				"<h4>" + new Date(collection.timestamp).toDateString() + "</h4>" +
+				"<input type='text' value='" + (collection.name ?? new Date(collection.timestamp).toDateString()) + "'/>" +
 				"<a loc='restoreTabs' class='restoreCollection'>Restore tabs</a>" +
 				"<div>" +
 					"<button loc_alt='more' class='btn more' title='More...'></button>" +
@@ -212,26 +248,33 @@ function AddCollection(collection)
 
 	UpdateLocale();
 
+	list.querySelectorAll("input").forEach(i =>
+		i.oninput = (event) => RenameCollection(i.parentElement.parentElement, event.target.value));
+
 	list.querySelectorAll(".restoreCollection").forEach(i =>
 		i.onclick = () => RestoreTabs(i.parentElement.parentElement));
 
 	list.querySelectorAll(".restoreCollection.noDelete").forEach(i =>
 		i.onclick = () => RestoreTabs(i.parentElement.parentElement.parentElement.parentElement, false));
 
-	list.querySelectorAll(".openTab").forEach(i =>
-		i.onclick = () =>
-			chrome.runtime.sendMessage(
-				{
-					command: "openTab",
-					url: i.getAttribute("value")
-				}
-			));
+	list.querySelectorAll(".set > div").forEach(i =>
+		i.onclick = (args) =>
+		{
+			if (args.target.localName != "button")
+				chrome.runtime.sendMessage(
+					{
+						command: "openTab",
+						url: i.getAttribute("value")
+					}
+				);
+		});
 
 	document.querySelectorAll(".header .btn.remove").forEach(i =>
 		i.onclick = () => RemoveTabs(i.parentElement.parentElement));
 
 	document.querySelectorAll(".set .btn.remove").forEach(i =>
-		i.onclick = () => RemoveOneTab(i.parentElement.parentElement));
+		i.onclick = (args) =>
+			RemoveOneTab(i.parentElement.parentElement));
 }
 
 function SetTabsAside()
@@ -239,6 +282,16 @@ function SetTabsAside()
 	chrome.runtime.sendMessage({ command: "saveTabs" });
 }
 
+function RenameCollection(collectionData, name)
+{
+	chrome.runtime.sendMessage(
+		{
+			command: "renameCollection",
+			newName: name,
+			collectionIndex: Array.prototype.slice.call(collectionData.parentElement.children).indexOf(collectionData) - 1
+		});
+}
+
 function RestoreTabs(collectionData, removeCollection = true)
 {
 	chrome.runtime.sendMessage(
diff --git a/js/background.js b/js/background.js
index a368f71..e34a6b3 100644
--- a/js/background.js
+++ b/js/background.js
@@ -119,6 +119,10 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) =>
 			RemoveTab(message.collectionIndex, message.tabIndex);
 			sendResponse();
 			break;
+		case "renameCollection":
+			collections[message.collectionIndex].name = message.newName;
+			localStorage.setItem("sets", JSON.stringify(collections));
+			break;
 		case "togglePane":
 			chrome.tabs.query(
 				{
diff --git a/manifest.json b/manifest.json
index 95c35ad..002d2b4 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,6 +1,6 @@
 {
 	"name": "__MSG_name__",
-	"version": "1.7.3",
+	"version": "1.8",
 	"manifest_version": 2,
 	"description": "__MSG_description__",
 	"author": "__MSG_author__",
