xfox111/TabsAsideExtension
1
0
Fork 0
mirror of https://github.com/XFox111/TabsAsideExtension.git synced 2026-04-22 07:58:01 +03:00
Code Wiki Activity

Minor 1.8 (#34)

Browse Source 
- Ability to rename Tab Groups #33
- Added collections view switch #35
This commit is contained in:
Michael Gordeev
2020-08-29 18:39:51 +03:00
committed by GitHub
parent 10edf4f975
commit 3e60583427
7 changed files with 203 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TabsAside.html
+43 -33
View File
@@ -8,49 +8,59 @@
<link rel="stylesheet" type="text/css" href="css/style.css" /> <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.generic.css" />
<link rel="stylesheet" type="text/css" href="css/style.dark.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> </head>
<body> <body>
<div class="tabsAside background"> <div class="tabsAside background">
<aside class="tabsAside pane"> <aside class="tabsAside pane">
<header> <header>
<div> <h1 loc="name">Tabs aside</h1>
<h1 loc="name">Tabs aside</h1> <button loc_alt="options" class="btn more" title="Options"></button>
<button loc_alt="options" class="btn more" title="Options"></button>
<nav> <nav>
<p> <p>
<input type="checkbox" id="loadOnRestore"/> <input type="checkbox" id="loadOnRestore" />
<label loc="loadOnRestore" for="loadOnRestore">Load tabs on restore</label> <label loc="loadOnRestore" for="loadOnRestore">Load tabs on restore</label>
</p> </p>
<p> <p>
<input type="checkbox" id="swapIconAction"/> <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> <label loc="swapIconAction" for="swapIconAction">Set tabs aside on extension icon click (Alt+P or right-click to open the pane)</label>
</p> </p>
<p> <p>
<input type="checkbox" id="showDeleteDialog"/> <input type="checkbox" id="showDeleteDialog" />
<label loc="showDeleteDialog" for="showDeleteDialog">Show confirmation dialog before deleting an item</label> <label loc="showDeleteDialog" for="showDeleteDialog">Show confirmation dialog before deleting an item</label>
</p> </p>
<hr/> <hr />
<div> <div>
<button loc="github" value="https://github.com/xfox111/TabsAsideExtension">Visit GitHub page</button> <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="contributors" value="https://github.com/XFox111/TabsAsideExtension/graphs/contributors">Project contributors</button>
<button loc="feedback" feedback-button>Leave feedback</button> <button loc="feedback" feedback-button>Leave feedback</button>
<button loc="buyMeACoffee" value="https://buymeacoffee.com/xfox111">Buy me a coffee!</button> <button loc="buyMeACoffee" value="https://buymeacoffee.com/xfox111">Buy me a coffee!</button>
</div> </div>
<hr/> <hr />
<p> <p>
<small>v1.0</small><br /> <small>v1.0</small><br />
<span loc="credits">Developed by Michael Gordeev</span> (<a href="https://twitter.com/xfox111" <span loc="credits">Developed by Michael Gordeev</span> (<a href="https://twitter.com/xfox111" target="_blank">@xfox111</a>)
target="_blank">@xfox111</a>) </p>
</p> </nav>
</nav>
<button loc_alt="closePanel" class="btn remove" title="Close panel"></button> <button loc_alt="closePanel" class="btn remove" title="Close panel"></button>
</div>
<a class="saveTabs"><span class="iconArrowRight"></span> <span loc="setAside">Set current tabs aside</span></a> <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> </header>
<section> <section>
css/style.css
+15 -10
View File
@@ -53,23 +53,20 @@
padding: 14px 20px 16px 20px; padding: 14px 20px 16px 20px;
box-shadow: 0px 0px 5px rgba(0,0,0,.5); box-shadow: 0px 0px 5px rgba(0,0,0,.5);
background-color: white; 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; margin: 0px 5px;
font-weight: 500; font-weight: 500;
font-size: 15pt; font-size: 15pt;
} }
.tabsAside.pane > header > div > nav .tabsAside.pane > header > nav
{ {
top: 45px; top: 45px;
right: 55px; right: 55px;
@@ -92,6 +89,7 @@
grid-column-gap: 15px; grid-column-gap: 15px;
font-weight: 600; font-weight: 600;
margin-right: auto;
} }
.iconArrowRight .iconArrowRight
@@ -162,11 +160,18 @@
visibility: visible !important; visibility: visible !important;
} }
.collectionSet > .header > h4 .collectionSet > .header > input
{ {
margin: 0px; margin: 0px;
visibility: visible !important; visibility: visible !important;
font-weight: 500; font-weight: 500;
border: none;
background: transparent;
}
.collectionSet > .header > input:hover
{
border: 1px solid black;
} }
.collectionSet > .header > a .collectionSet > .header > a
css/style.dark.css
+16
View File
@@ -38,6 +38,22 @@
background-color: dimgray; 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 .tabsAside[darkmode] a
{ {
color: #48adff; color: #48adff;
css/style.listview.css
+58
View File
@@ -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;
}
js/aside-script.js
+66 -13
View File
@@ -128,7 +128,7 @@ function Initialize()
if (namespace == 'sync') if (namespace == 'sync')
for (key in changes) for (key in changes)
if (key === 'showDeleteDialog') if (key === 'showDeleteDialog')
showDeleteDialog.checked = changes[key].newValue showDeleteDialog.checked = changes[key].newValue
}); });
showDeleteDialog.addEventListener("click", () => showDeleteDialog.addEventListener("click", () =>
chrome.storage.sync.set( 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 => document.querySelectorAll(".tabsAside.pane > header nav button").forEach(i =>
i.onclick = () => i.onclick = () =>
{ {
@@ -182,8 +218,8 @@ function AddCollection(collection)
for (var i = 0; i < collection.links.length; i++) for (var i = 0; i < collection.links.length; i++)
{ {
rawTabs += rawTabs +=
"<div title='" + collection.titles[i] + "'" + ((collection.thumbnails && collection.thumbnails[i]) ? " style='background-image: url(" + collection.thumbnails[i] + ")'" : "") + ">" + "<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>" + //"<span class='openTab' value='" + collection.links[i] + "'></span>" +
"<div>" + "<div>" +
"<div" + ((collection.icons[i] == 0 || collection.icons[i] == null) ? "" : " style='background-image: url(\"" + collection.icons[i] + "\")'") + "></div>" + "<div" + ((collection.icons[i] == 0 || collection.icons[i] == null) ? "" : " style='background-image: url(\"" + collection.icons[i] + "\")'") + "></div>" +
"<span>" + collection.titles[i] + "</span>" + "<span>" + collection.titles[i] + "</span>" +
@@ -195,7 +231,7 @@ function AddCollection(collection)
list.innerHTML += list.innerHTML +=
"<div class='collectionSet'>" + "<div class='collectionSet'>" +
"<div class='header'>" + "<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>" + "<a loc='restoreTabs' class='restoreCollection'>Restore tabs</a>" +
"<div>" + "<div>" +
"<button loc_alt='more' class='btn more' title='More...'></button>" + "<button loc_alt='more' class='btn more' title='More...'></button>" +
@@ -212,26 +248,33 @@ function AddCollection(collection)
UpdateLocale(); UpdateLocale();
list.querySelectorAll("input").forEach(i =>
i.oninput = (event) => RenameCollection(i.parentElement.parentElement, event.target.value));
list.querySelectorAll(".restoreCollection").forEach(i => list.querySelectorAll(".restoreCollection").forEach(i =>
i.onclick = () => RestoreTabs(i.parentElement.parentElement)); i.onclick = () => RestoreTabs(i.parentElement.parentElement));
list.querySelectorAll(".restoreCollection.noDelete").forEach(i => list.querySelectorAll(".restoreCollection.noDelete").forEach(i =>
i.onclick = () => RestoreTabs(i.parentElement.parentElement.parentElement.parentElement, false)); i.onclick = () => RestoreTabs(i.parentElement.parentElement.parentElement.parentElement, false));
list.querySelectorAll(".openTab").forEach(i => list.querySelectorAll(".set > div").forEach(i =>
i.onclick = () => i.onclick = (args) =>
chrome.runtime.sendMessage( {
{ if (args.target.localName != "button")
command: "openTab", chrome.runtime.sendMessage(
url: i.getAttribute("value") {
} command: "openTab",
)); url: i.getAttribute("value")
}
);
});
document.querySelectorAll(".header .btn.remove").forEach(i => document.querySelectorAll(".header .btn.remove").forEach(i =>
i.onclick = () => RemoveTabs(i.parentElement.parentElement)); i.onclick = () => RemoveTabs(i.parentElement.parentElement));
document.querySelectorAll(".set .btn.remove").forEach(i => document.querySelectorAll(".set .btn.remove").forEach(i =>
i.onclick = () => RemoveOneTab(i.parentElement.parentElement)); i.onclick = (args) =>
RemoveOneTab(i.parentElement.parentElement));
} }
function SetTabsAside() function SetTabsAside()
@@ -239,6 +282,16 @@ function SetTabsAside()
chrome.runtime.sendMessage({ command: "saveTabs" }); 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) function RestoreTabs(collectionData, removeCollection = true)
{ {
chrome.runtime.sendMessage( chrome.runtime.sendMessage(
js/background.js
+4
View File
@@ -119,6 +119,10 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) =>
RemoveTab(message.collectionIndex, message.tabIndex); RemoveTab(message.collectionIndex, message.tabIndex);
sendResponse(); sendResponse();
break; break;
case "renameCollection":
collections[message.collectionIndex].name = message.newName;
localStorage.setItem("sets", JSON.stringify(collections));
break;
case "togglePane": case "togglePane":
chrome.tabs.query( chrome.tabs.query(
{ {
manifest.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "__MSG_name__", "name": "__MSG_name__",
"version": "1.7.3", "version": "1.8",
"manifest_version": 2, "manifest_version": 2,
"description": "__MSG_description__", "description": "__MSG_description__",
"author": "__MSG_author__", "author": "__MSG_author__",