rowan/multi-account-containers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

dynamically added close image icon in the title column

Browse source
This commit is contained in:
shivangikakkar 2019-01-11 04:06:08 +09:00
parent 8af4c36fd0
commit db0dba66b2
3 changed files with 37 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/css/popup.css
View file

@ -653,7 +653,11 @@ span ~ .panel-header-text {
/* Container info list */
.container-info-tab-title {
flex: 1;
display: flex;
}
.container-info-tab-row:hover .container-info-tab-title .truncate-text {
inline-size: 184px;
}
#container-info-hideorshow {
@ -671,16 +675,18 @@ span ~ .panel-header-text {
}
.container-close-tab {
inline-size: 50%;
opacity: 0;
transform: scale(0.7);
visibility: collapse;
}
.container-info-tab-row:hover .container-close-tab {
opacity: 0.5;
visibility: visible;
}
.container-info-tab-row .container-close-tab:hover {
opacity: 1;
visibility: visible;
}
.container-info-has-tabs,

2
src/img/container-close-tab.svg
View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 7 7">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7">
<polygon fill="#4c4c4c" points="5.8,0 3.5,2.4 1.2,0 0,1.2 2.4,3.5 0.1,5.8 1.2,7 3.5,4.7 5.8,7 7,5.8 4.7,3.5 7,1.2"/>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 199 B

After

Width:  |  Height:  |  Size: 183 B

30
src/js/popup.js
View file

@ -777,30 +777,44 @@ Logic.registerPanel(P_CONTAINER_INFO, {
tr.classList.add("container-info-tab-row");
tr.innerHTML = escaped`
<td></td>
<td class="container-info-tab-title truncate-text" title="${tab.url}" >${tab.title}</td>
<td><img src="/img/container-close-tab.svg" id="${tab.id}" class="container-close-tab" /></td>`;
<td class="container-info-tab-title truncate-text" title="${tab.url}" ><div class="container-tab-title">${tab.title}</div></td>`;
tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favIconUrl));
document.getElementById("container-info-table").appendChild(fragment);
const closeTab = document.getElementById(tab.id);
if(tab.hiddenState) {
closeTab.remove();
}
// On click, we activate this tab. But only if this tab is active.
if (!tab.hiddenState) {
const closeImage = document.createElement("img");
closeImage.src="/img/container-close-tab.svg";
closeImage.className = "container-close-tab";
closeImage.title="Close tab";
closeImage.id = tab.id;
tr.querySelector(".container-info-tab-title").appendChild(closeImage);
// On hover, we add truncate-text class to add close-tab-image after tab title truncates
tr.addEventListener("mouseover", () => {
tr.querySelector(".container-info-tab-title").classList.remove("truncate-text");
tr.querySelector(".container-tab-title").classList.add("truncate-text");
});
tr.addEventListener("mouseout", () => {
tr.querySelector(".container-info-tab-title").classList.add("truncate-text");
tr.querySelector(".container-tab-title").classList.remove("truncate-text");
});
tr.classList.add("clickable");
Logic.addEnterHandler(tr, async function () {
await browser.tabs.update(tab.id, {active: true});
window.close();
});
const closeTab = document.getElementById(tab.id);
if (closeTab) {
Logic.addEnterHandler(closeTab, async function(e) {
await browser.tabs.remove(Number(e.target.id));
window.close();
});
}
}
}
},
});