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-radius: 3px;
--icon-button-size: calc(calc(var(--block-line-separation-size) * 2) + 1.66rem); /* 20px */
--column-panel-inline-size: 268px;
}
@media (min-resolution: 1dppx) {
@ -266,7 +267,7 @@ table {
.column-panel-content {
display: flex;
flex-direction: column;
inline-size: 268px;
inline-size: var(--column-panel-inline-size);
}
.column-panel-content .panel-footer {
@ -657,7 +658,7 @@ span ~ .panel-header-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 {
@ -715,10 +716,6 @@ span ~ .panel-header-text {
margin-inline-end: 0;
}
.container-info-tab-row td {
max-inline-size: 200px;
}
.container-info-list {
display: flex;
flex-direction: column;

18
src/js/popup.js
View file

@ -788,17 +788,17 @@ Logic.registerPanel(P_CONTAINER_INFO, {
closeImage.className = "container-close-tab";
closeImage.title = "Close tab";
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
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");
});
const tabTitleHoverEvent = () => {
tabTitle.classList.toggle("truncate-text");
tr.querySelector(".container-tab-title").classList.toggle("truncate-text");
};
tr.addEventListener("mouseover", tabTitleHoverEvent);
tr.addEventListener("mouseout", tabTitleHoverEvent);
tr.classList.add("clickable");
Logic.addEnterHandler(tr, async function () {