Korbs/electron-tabs
1
Fork 0
Code Issues Pull requests Activity

Remove tab.flash (use custom class instead)

Browse source
This commit is contained in:
Thomas Brouard 2022-05-25 15:18:35 +02:00
parent 309e7bccb2
commit 3746aab271
7 changed files with 5 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
demo/electron-tabs.html
View file

@ -13,7 +13,7 @@
background-color: #327BB1;
}
.my-custom-tab {
color: red;
color: #d135d1;
font-style: italic;
font-weight: bold;
}
@ -49,15 +49,7 @@
});
tabGroup.addTab({
title: "Flashed Tab",
src: "page.html",
ready: function(tab) {
tab.flash();
}
});
tabGroup.addTab({
title: "My Custom Class",
title: "My Custom Tab",
src: "page.html",
ready: function(tab) {
tab.element.classList.add("my-custom-tab");

2
dist/electron-tabs.d.ts vendored
View file

@ -89,8 +89,6 @@ export class Tab extends EventTarget {
activate(): this;
show(flag?: boolean): this;
hide(): this;
flash(flag?: boolean): this;
unflash(): this;
hasClass(classname: string): boolean;
close(force: boolean): void;
}

2
dist/electron-tabs.d.ts.map vendored
View file

File diff suppressed because one or more lines are too long

16
dist/electron-tabs.js vendored
View file

@ -2499,7 +2499,7 @@ var $64afbd09cd65a300$export$2e2bcd8739ae039 = $64afbd09cd65a300$export$31b3ca70
var $0648b347057451f2$exports = {};
$0648b347057451f2$exports = ":host {\n --tabgroup-background: #e7eaed;\n --tab-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n --tab-font-size: 13px;\n --tab-background: #e7eaed;\n --tab-color: #696a6c;\n --tab-border-color: #dadce0;\n --tab-transition: background-color 200ms ease-out, color 200ms ease-out;\n --tab-cursor: pointer;\n --tab-active-color: currentcolor;\n --tab-active-background: #fff;\n --tag-hover-color: currentcolor;\n --tag-hover-background: #f1f3f4;\n --tab-flash-color: #696a6c;\n --tab-flash-background: #fff3aa;\n --tab-flash-hover-color: #696a6c;\n --tab-flash-hover-background: #ffe325;\n --button-font-size: 15px;\n --button-background: none;\n --button-color: #696a6c;\n --button-hover-background: #dadce0;\n --button-hover-color: #383a3e;\n --button-border-radius: 50%;\n --button-cursor: pointer;\n --badge-background: #383a3e;\n --badge-color: #fff;\n}\n\nwebview {\n visibility: hidden;\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\nwebview.visible {\n visibility: visible;\n}\n\n.etabs {\n font-family: var(--tab-font-family);\n text-rendering: optimizelegibility;\n font-feature-settings: \"liga\", \"clig\", \"kern\";\n}\n\n.nav {\n background: var(--tabgroup-background);\n box-shadow: inset 0 -1px var(--tab-border-color);\n border-top: 1px solid var(--tab-border-color);\n font-size: var(--tab-font-size);\n width: 100%;\n height: 32px;\n cursor: default;\n -webkit-user-select: none;\n user-select: none;\n display: none;\n}\n\n.nav.visible {\n display: flex;\n}\n\n.tabs {\n height: 100%;\n}\n\n.tab {\n background: var(--tab-background);\n box-shadow: inset 0 -1px var(--tab-border-color);\n color: var(--tab-color);\n cursor: var(--tab-cursor);\n font-size: var(--tab-font-size);\n transition: var(--tab-transition);\n box-sizing: border-box;\n height: 100%;\n align-items: center;\n padding: 5px 9px;\n display: none;\n position: relative;\n}\n\n.tab:first-child {\n border-left: none;\n}\n\n.tab.visible {\n display: inline-flex;\n}\n\n.tab.active {\n color: var(--tab-active-color);\n background: var(--tab-active-background);\n border-left: 1px solid var(--tab-border-color);\n border-right: 1px solid var(--tab-border-color);\n box-shadow: none;\n padding-left: 8px;\n padding-right: 8px;\n}\n\n.tab.active:last-child {\n border-right: none;\n}\n\n.tab.flash {\n background: var(--tab-flash-background);\n color: var(--tab-flash-color);\n}\n\n.tab.tab.flash:hover {\n background: var(--tab-flash-hover-background);\n color: var(--tab-flash-hover-color);\n}\n\n.tab.visible:not(.active) + .tab.visible:not(.active) {\n border-left: 1px solid var(--tab-border-color);\n padding-left: 8px;\n}\n\n.tab:not(.active):hover {\n background: var(--tab-hover-background);\n color: var(--tab-hover-color);\n}\n\n.tab-badge {\n background: var(--badge-background);\n color: var(--badge-color);\n text-align: center;\n border-radius: 5px;\n margin-left: 5px;\n padding: 1px 4px;\n font-size: 8px;\n font-weight: bold;\n line-height: 1.2;\n}\n\n.tab-badge.hidden {\n display: none;\n}\n\n.tab-icon {\n height: 16px;\n display: inline-block;\n}\n\n.tab-icon img {\n max-width: 16px;\n max-height: 16px;\n}\n\n.tab-title, .tab-close {\n margin-left: 10px;\n display: inline-block;\n}\n\n.tab-close button {\n background: var(--button-background);\n border-radius: var(--button-border-radius);\n color: var(--button-color);\n cursor: var(--button-cursor);\n font-size: var(--button-font-size);\n width: 20px;\n height: 20px;\n text-align: center;\n border: none;\n padding: 1px 0 0;\n display: inline-block;\n}\n\n.tab-close button:hover {\n color: var(--button-hover-color);\n background: var(--button-hover-background);\n}\n\n.buttons {\n border-left: 1px solid var(--tab-border-color);\n padding: 5px;\n display: flex;\n}\n\n.buttons button {\n color: var(--button-color);\n background: var(--button-background);\n border-radius: var(--button-border-radius);\n cursor: var(--button-cursor);\n font-size: var(--button-font-size);\n width: 20px;\n height: 20px;\n text-align: center;\n border: none;\n margin: 0;\n padding: 1px 0 0;\n font-family: inherit;\n line-height: 1;\n display: block;\n}\n\n.buttons button:hover {\n color: var(--button-hover-color);\n background: var(--button-hover-background);\n}\n\n.views {\n height: calc(100vh - 33px);\n position: relative;\n}\n\n";
$0648b347057451f2$exports = ":host {\n --tabgroup-background: #e7eaed;\n --tab-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n --tab-font-size: 13px;\n --tab-background: #e7eaed;\n --tab-color: #696a6c;\n --tab-border-color: #dadce0;\n --tab-transition: background-color 200ms ease-out, color 200ms ease-out;\n --tab-cursor: pointer;\n --tab-active-color: currentcolor;\n --tab-active-background: #fff;\n --tag-hover-color: currentcolor;\n --tag-hover-background: #f1f3f4;\n --button-font-size: 15px;\n --button-background: none;\n --button-color: #696a6c;\n --button-hover-background: #dadce0;\n --button-hover-color: #383a3e;\n --button-border-radius: 50%;\n --button-cursor: pointer;\n --badge-background: #383a3e;\n --badge-color: #fff;\n}\n\nwebview {\n visibility: hidden;\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\nwebview.visible {\n visibility: visible;\n}\n\n.etabs {\n font-family: var(--tab-font-family);\n text-rendering: optimizelegibility;\n font-feature-settings: \"liga\", \"clig\", \"kern\";\n}\n\n.nav {\n background: var(--tabgroup-background);\n box-shadow: inset 0 -1px var(--tab-border-color);\n border-top: 1px solid var(--tab-border-color);\n font-size: var(--tab-font-size);\n width: 100%;\n height: 32px;\n cursor: default;\n -webkit-user-select: none;\n user-select: none;\n display: none;\n}\n\n.nav.visible {\n display: flex;\n}\n\n.tabs {\n height: 100%;\n}\n\n.tab {\n background: var(--tab-background);\n box-shadow: inset 0 -1px var(--tab-border-color);\n color: var(--tab-color);\n cursor: var(--tab-cursor);\n font-size: var(--tab-font-size);\n transition: var(--tab-transition);\n box-sizing: border-box;\n height: 100%;\n align-items: center;\n padding: 5px 9px;\n display: none;\n position: relative;\n}\n\n.tab:first-child {\n border-left: none;\n}\n\n.tab.visible {\n display: inline-flex;\n}\n\n.tab.active {\n color: var(--tab-active-color);\n background: var(--tab-active-background);\n border-left: 1px solid var(--tab-border-color);\n border-right: 1px solid var(--tab-border-color);\n box-shadow: none;\n padding-left: 8px;\n padding-right: 8px;\n}\n\n.tab.active:last-child {\n border-right: none;\n}\n\n.tab.visible:not(.active) + .tab.visible:not(.active) {\n border-left: 1px solid var(--tab-border-color);\n padding-left: 8px;\n}\n\n.tab:not(.active):hover {\n background: var(--tab-hover-background);\n color: var(--tab-hover-color);\n}\n\n.tab-badge {\n background: var(--badge-background);\n color: var(--badge-color);\n text-align: center;\n border-radius: 5px;\n margin-left: 5px;\n padding: 1px 4px;\n font-size: 8px;\n font-weight: bold;\n line-height: 1.2;\n}\n\n.tab-badge.hidden {\n display: none;\n}\n\n.tab-icon {\n height: 16px;\n display: inline-block;\n}\n\n.tab-icon img {\n max-width: 16px;\n max-height: 16px;\n}\n\n.tab-title, .tab-close {\n margin-left: 10px;\n display: inline-block;\n}\n\n.tab-close button {\n background: var(--button-background);\n border-radius: var(--button-border-radius);\n color: var(--button-color);\n cursor: var(--button-cursor);\n font-size: var(--button-font-size);\n width: 20px;\n height: 20px;\n text-align: center;\n border: none;\n padding: 1px 0 0;\n display: inline-block;\n}\n\n.tab-close button:hover {\n color: var(--button-hover-color);\n background: var(--button-hover-background);\n}\n\n.buttons {\n border-left: 1px solid var(--tab-border-color);\n padding: 5px;\n display: flex;\n}\n\n.buttons button {\n color: var(--button-color);\n background: var(--button-background);\n border-radius: var(--button-border-radius);\n cursor: var(--button-cursor);\n font-size: var(--button-font-size);\n width: 20px;\n height: 20px;\n text-align: center;\n border: none;\n margin: 0;\n padding: 1px 0 0;\n font-family: inherit;\n line-height: 1;\n display: block;\n}\n\n.buttons button:hover {\n color: var(--button-hover-color);\n background: var(--button-hover-background);\n}\n\n.views {\n height: calc(100vh - 33px);\n position: relative;\n}\n\n";
if (!document) throw Error("electron-tabs module must be called in renderer process");
@ -2880,20 +2880,6 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
hide() {
return this.show(false);
}
flash(flag = true) {
if (this.isClosed) return;
if (flag !== false) {
this.element.classList.add("flash");
this.emit("flash", this);
} else {
this.element.classList.remove("flash");
this.emit("unflash", this);
}
return this;
}
unflash() {
return this.flash(false);
}
hasClass(classname) {
return this.element.classList.contains(classname);
}

2
dist/electron-tabs.js.map vendored
View file

File diff suppressed because one or more lines are too long

16
src/index.ts
View file

@ -534,22 +534,6 @@ class Tab extends EventTarget {
return this.show(false);
}
flash(flag = true) {
if (this.isClosed) return;
if (flag !== false) {
this.element.classList.add("flash");
this.emit("flash", this);
} else {
this.element.classList.remove("flash");
this.emit("unflash", this);
}
return this;
}
unflash() {
return this.flash(false);
}
hasClass(classname: string) {
return this.element.classList.contains(classname);
}

14
src/style.css
View file

@ -14,10 +14,6 @@
--tab-active-background: #FFF;
--tag-hover-color: currentcolor;
--tag-hover-background: #F1F3F4;
--tab-flash-color: #696A6C;
--tab-flash-background: #fff3aa;
--tab-flash-hover-color: #696A6C;
--tab-flash-hover-background: #ffe325;
--button-font-size: 15px;
--button-background: none;
--button-color: #696A6C;
@ -107,16 +103,6 @@ webview.visible {
border-right: none;
}
.tab.flash {
background: var(--tab-flash-background);
color: var(--tab-flash-color);
}
.tab.tab.flash:hover {
background: var(--tab-flash-hover-background);
color: var(--tab-flash-hover-color);
}
.tab.visible:not(.active)+.tab.visible:not(.active) {
border-left: 1px solid var(--tab-border-color);
padding-left: 8px;