From ab13b1ffe7519a592b34081a453d5bb37586fbe6 Mon Sep 17 00:00:00 2001 From: DragoVeizen Date: Mon, 9 Aug 2021 23:47:22 +0530 Subject: [PATCH 1/3] Adding an expand button --- css/style.css | 1 + js/tab-manager.js | 29 ++++++++++++++++++++++++----- 2 files changed, 25 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index f0e8e64..9920e8d 100644 --- a/css/style.css +++ b/css/style.css @@ -59,6 +59,7 @@ ul { list-style: none; align-self: center; width: 90%; + display: block; } .popup-buttons { diff --git a/js/tab-manager.js b/js/tab-manager.js index 9101606..aa1519f 100644 --- a/js/tab-manager.js +++ b/js/tab-manager.js @@ -87,7 +87,8 @@ function displayGroupList() { groupElement.setAttribute("prop", prop); - const list = document.createElement("ul"); + let list = document.createElement("ul"); + list.id="collapsible"; list.ondrop = (e) => listonDrop(e, prop, list); @@ -152,6 +153,14 @@ function displayGroupList() { deleteBtn.setAttribute("prop", prop); groupButtons.appendChild(deleteBtn); + let expandBtn = document.createElement("button"); + expandBtn.className = "expand"; + expandBtn.innerHTML = "Expand"; + expandBtn.setAttribute("prop", prop); + groupButtons.appendChild(expandBtn); + + + groupElement.appendChild(header); header.appendChild(groupButtons); groupElement.appendChild(list); @@ -167,15 +176,25 @@ document.getElementById("group-list").addEventListener("click", (e) => { if (e?.target.matches("button.restore")) { const prop = e.target.getAttribute("prop"); return restore(prop); - } - - if (e?.target.matches("button.delete")) { - const prop = e.target.getAttribute("prop"); + } if (e.target && e.target.matches("button.delete")) { + let prop = e.target.getAttribute("prop"); return ( confirm("Are you sure you want to delete this group?") && browser.storage.local.remove(prop).then(window.location.reload()) ); } + + if (e.target && e.target.matches("button.expand")) { + console.log("working"); + var content = document.getElementById("collapsible"); + if (content.style.display === "block") { + content.style.display = "none"; + } else { + content.style.display = "block"; + } + } + + if (e?.target.matches("button.delete-tab")) { const prop = e.target.getAttribute("prop"); From 4d87fc2ce31c284eef6876f2118d79f7a1cc1bce Mon Sep 17 00:00:00 2001 From: DragoVeizen Date: Sat, 14 Aug 2021 11:43:43 +0530 Subject: [PATCH 2/3] Implemented some changes and fixes --- css/style.css | 10 +++++++++- js/tab-manager.js | 39 +++++++++++++++++++++------------------ 2 files changed, 30 insertions(+), 19 deletions(-) diff --git a/css/style.css b/css/style.css index 9920e8d..add97e8 100644 --- a/css/style.css +++ b/css/style.css @@ -54,12 +54,20 @@ button.restore { background-color: #21e6c1; color: #121212; } +button.expand { + -webkit-filter: invert(100%); /* Safari/Chrome */ + filter: invert(100%); + background-color:#dcd6ce; + border: none; +} ul { list-style: none; align-self: center; width: 90%; - display: block; + max-height: 0; + overflow: hidden; + transition: max-height 0.2s ease-out; } .popup-buttons { diff --git a/js/tab-manager.js b/js/tab-manager.js index aa1519f..e8dd729 100644 --- a/js/tab-manager.js +++ b/js/tab-manager.js @@ -84,11 +84,12 @@ function displayGroupList() { props.forEach((prop) => { const groupElement = document.createElement("div"); groupElement.className = "tab-group"; + groupElement.id="TabGroup"; groupElement.setAttribute("prop", prop); - let list = document.createElement("ul"); - list.id="collapsible"; + const list = document.createElement("ul"); + list.id = "collapsible"; list.ondrop = (e) => listonDrop(e, prop, list); @@ -153,14 +154,13 @@ function displayGroupList() { deleteBtn.setAttribute("prop", prop); groupButtons.appendChild(deleteBtn); - let expandBtn = document.createElement("button"); + const expandBtn = document.createElement("button"); expandBtn.className = "expand"; - expandBtn.innerHTML = "Expand"; + expandBtn.id = "expand"; + expandBtn.innerHTML = "⯆"; expandBtn.setAttribute("prop", prop); - groupButtons.appendChild(expandBtn); - - + groupButtons.appendChild(expandBtn); groupElement.appendChild(header); header.appendChild(groupButtons); groupElement.appendChild(list); @@ -176,26 +176,29 @@ document.getElementById("group-list").addEventListener("click", (e) => { if (e?.target.matches("button.restore")) { const prop = e.target.getAttribute("prop"); return restore(prop); - } if (e.target && e.target.matches("button.delete")) { - let prop = e.target.getAttribute("prop"); + } + if (e?.target.matches("button.delete")) { + const prop = e.target.getAttribute("prop"); return ( confirm("Are you sure you want to delete this group?") && browser.storage.local.remove(prop).then(window.location.reload()) ); } - - if (e.target && e.target.matches("button.expand")) { - console.log("working"); - var content = document.getElementById("collapsible"); - if (content.style.display === "block") { - content.style.display = "none"; + + if (e?.target.matches("button.expand")) { + const content = document.getElementById("collapsible"); + const tabGroup = document.getElementById("TabGroup") + if (content.style.maxHeight) { + document.getElementById("expand").innerHTML = "⯆"; + content.style.maxHeight = null; + content.style.margin = 0; } else { - content.style.display = "block"; + content.style.maxHeight = content.scrollHeight + "px"; + document.getElementById("expand").innerHTML = "⯅"; + content.style.margin = 16 + "px"; } } - - if (e?.target.matches("button.delete-tab")) { const prop = e.target.getAttribute("prop"); const i = e.target.getAttribute("index"); From d9e097087cc4928fed5799c81f7d9d4612135c7a Mon Sep 17 00:00:00 2001 From: DragoVeizen Date: Sun, 12 Sep 2021 22:31:58 +0530 Subject: [PATCH 3/3] Implemented some changes and fixes again --- js/tab-manager.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/js/tab-manager.js b/js/tab-manager.js index e8dd729..960a193 100644 --- a/js/tab-manager.js +++ b/js/tab-manager.js @@ -89,7 +89,7 @@ function displayGroupList() { groupElement.setAttribute("prop", prop); const list = document.createElement("ul"); - list.id = "collapsible"; + list.className = "collapsible"; list.ondrop = (e) => listonDrop(e, prop, list); @@ -186,8 +186,10 @@ document.getElementById("group-list").addEventListener("click", (e) => { } if (e?.target.matches("button.expand")) { - const content = document.getElementById("collapsible"); - const tabGroup = document.getElementById("TabGroup") + const content1 = document.getElementsByClassName("header"); + let contentArray = Array.from(content1); + for(let i=0;i { content.style.maxHeight = content.scrollHeight + "px"; document.getElementById("expand").innerHTML = "⯅"; content.style.margin = 16 + "px"; - } + } } } if (e?.target.matches("button.delete-tab")) {