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

added functions and cosmetic changes

Browse source
This commit is contained in:
shivangikakkar 2019-01-11 09:25:00 +09:00
parent db0dba66b2
commit 6d7086d541
2 changed files with 14 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/css/popup.css
View file

@ -45,6 +45,7 @@ body {
--small-text-size: 0.833rem; /* 10px */ --small-text-size: 0.833rem; /* 10px */
--small-radius: 3px; --small-radius: 3px;
--icon-button-size: calc(calc(var(--block-line-separation-size) * 2) + 1.66rem); /* 20px */ --icon-button-size: calc(calc(var(--block-line-separation-size) * 2) + 1.66rem); /* 20px */
--column-panel-inline-size: 268px;
} }
@media (min-resolution: 1dppx) { @media (min-resolution: 1dppx) {
@ -266,7 +267,7 @@ table {
.column-panel-content { .column-panel-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
inline-size: 268px; inline-size: var(--column-panel-inline-size);
} }
.column-panel-content .panel-footer { .column-panel-content .panel-footer {
@ -657,7 +658,7 @@ span ~ .panel-header-text {
} }
.container-info-tab-row:hover .container-info-tab-title .truncate-text { .container-info-tab-row:hover .container-info-tab-title .truncate-text {
inline-size: 184px; inline-size: calc(var(--column-panel-inline-size) - 58px);
} }
#container-info-hideorshow { #container-info-hideorshow {
@ -715,10 +716,6 @@ span ~ .panel-header-text {
margin-inline-end: 0; margin-inline-end: 0;
} }
.container-info-tab-row td {
max-inline-size: 200px;
}
.container-info-list { .container-info-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

22
src/js/popup.js
View file

@ -784,21 +784,21 @@ Logic.registerPanel(P_CONTAINER_INFO, {
// On click, we activate this tab. But only if this tab is active. // On click, we activate this tab. But only if this tab is active.
if (!tab.hiddenState) { if (!tab.hiddenState) {
const closeImage = document.createElement("img"); const closeImage = document.createElement("img");
closeImage.src="/img/container-close-tab.svg"; closeImage.src = "/img/container-close-tab.svg";
closeImage.className = "container-close-tab"; closeImage.className = "container-close-tab";
closeImage.title="Close tab"; closeImage.title = "Close tab";
closeImage.id = tab.id; closeImage.id = tab.id;
tr.querySelector(".container-info-tab-title").appendChild(closeImage); const tabTitle = tr.querySelector(".container-info-tab-title");
tabTitle.appendChild(closeImage);
// On hover, we add truncate-text class to add close-tab-image after tab title truncates // On hover, we add truncate-text class to add close-tab-image after tab title truncates
tr.addEventListener("mouseover", () => { const tabTitleHoverEvent = () => {
tr.querySelector(".container-info-tab-title").classList.remove("truncate-text"); tabTitle.classList.toggle("truncate-text");
tr.querySelector(".container-tab-title").classList.add("truncate-text"); tr.querySelector(".container-tab-title").classList.toggle("truncate-text");
}); };
tr.addEventListener("mouseout", () => {
tr.querySelector(".container-info-tab-title").classList.add("truncate-text"); tr.addEventListener("mouseover", tabTitleHoverEvent);
tr.querySelector(".container-tab-title").classList.remove("truncate-text"); tr.addEventListener("mouseout", tabTitleHoverEvent);
});
tr.classList.add("clickable"); tr.classList.add("clickable");
Logic.addEnterHandler(tr, async function () { Logic.addEnterHandler(tr, async function () {