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

Improve badge option

Browse source
This commit is contained in:
Thomas Brouard 2022-05-25 14:44:29 +02:00
parent 62e90a0545
commit 7669877a31
8 changed files with 43 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
demo/electron-tabs.html
View file

@ -9,8 +9,8 @@
<tab-group new-tab-button="true" sortable="true"> <tab-group new-tab-button="true" sortable="true">
<style> <style>
/* Add custom style */ /* Add custom style */
.tab:hover .tab-title { .my-badge {
text-decoration: underline; background-color: #327BB1;
} }
</style> </style>
</tab-group> </tab-group>
@ -30,11 +30,16 @@
tabGroup.addTab({ tabGroup.addTab({
title: "electron-tabs on NPM", title: "electron-tabs on NPM",
src: "https://www.npmjs.com/package/electron-tabs", src: "https://www.npmjs.com/package/electron-tabs",
badge: {
text: "5",
classname: "my-badge"
}
}); });
tabGroup.addTab({ tabGroup.addTab({
title: "electron-tabs on Github", title: "electron-tabs on Github",
src: "https://github.com/brrd/electron-tabs", src: "https://github.com/brrd/electron-tabs",
iconURL: "mark-github.svg",
visible: true, visible: true,
active: true active: true
}); });

1
demo/mark-github.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 695 B

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

@ -10,7 +10,7 @@ interface TabGroupOptions {
} }
interface TabOptions { interface TabOptions {
active?: boolean; active?: boolean;
badge?: string; badge?: Badge;
closable?: boolean; closable?: boolean;
icon?: string; icon?: string;
iconURL?: string; iconURL?: string;
@ -22,6 +22,10 @@ interface TabOptions {
[key: string]: any; [key: string]: any;
}; };
} }
interface Badge {
text: string;
classname: string;
}
export class TabGroup extends HTMLElement { export class TabGroup extends HTMLElement {
buttonContainer: HTMLDivElement; buttonContainer: HTMLDivElement;
isReady: boolean; isReady: boolean;
@ -52,7 +56,7 @@ export class TabGroup extends HTMLElement {
activateRecentTab(): void; activateRecentTab(): void;
} }
export class Tab extends EventTarget { export class Tab extends EventTarget {
badge: string; badge: Badge;
closable: boolean; closable: boolean;
icon: string; icon: string;
iconURL: string; iconURL: string;
@ -76,8 +80,8 @@ export class Tab extends EventTarget {
initWebview(): void; initWebview(): void;
setTitle(title: string): this; setTitle(title: string): this;
getTitle(): string; getTitle(): string;
setBadge(badge: string): void; setBadge(badge?: Badge): void;
getBadge(): string; getBadge(): Badge;
setIcon(iconURL: string, icon: string): this; setIcon(iconURL: string, icon: string): this;
getIcon(): string; getIcon(): string;
setPosition(newPosition: number): this; setPosition(newPosition: number): this;

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

File diff suppressed because one or more lines are too long

9
dist/electron-tabs.js vendored
View file

@ -2499,7 +2499,7 @@ var $64afbd09cd65a300$export$2e2bcd8739ae039 = $64afbd09cd65a300$export$31b3ca70
var $0648b347057451f2$exports = {}; 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 150ms 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: linear-gradient(to bottom, #fff3aa 0%, #ffe325 100%);\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: red;\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 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-block;\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.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 text-align: center;\n border-radius: 50%;\n padding: 0 5px;\n font-size: 10px;\n position: absolute;\n top: -7px;\n right: 0;\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 150ms 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: linear-gradient(to bottom, #fff3aa 0%, #ffe325 100%);\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.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"); if (!document) throw Error("electron-tabs module must be called in renderer process");
@ -2720,8 +2720,8 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
for (let el of [ for (let el of [
"icon", "icon",
"title", "title",
"close", "badge",
"badge" "close"
]){ ]){
const span = tab.appendChild(document.createElement("span")); const span = tab.appendChild(document.createElement("span"));
span.classList.add(`${$eda442ba39f881a8$var$CLASSNAMES.TAB}-${el}`); span.classList.add(`${$eda442ba39f881a8$var$CLASSNAMES.TAB}-${el}`);
@ -2801,7 +2801,8 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
const span = this.tabElements.badge; const span = this.tabElements.badge;
this.badge = badge; this.badge = badge;
if (badge) { if (badge) {
span.innerHTML = badge; span.innerHTML = badge.text;
span.classList.add(badge.classname);
span.classList.remove("hidden"); span.classList.remove("hidden");
} else span.classList.add("hidden"); } else span.classList.add("hidden");
this.emit("badge-changed", badge, this); this.emit("badge-changed", badge, this);

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

@ -18,7 +18,7 @@ interface TabGroupOptions {
interface TabOptions { interface TabOptions {
active?: boolean; active?: boolean;
badge?: string; badge?: Badge;
closable?: boolean; closable?: boolean;
icon?: string; icon?: string;
iconURL?: string; iconURL?: string;
@ -29,6 +29,11 @@ interface TabOptions {
webviewAttributes?: { [key: string]: any }; webviewAttributes?: { [key: string]: any };
} }
interface Badge {
text: string,
classname: string
}
const CLASSNAMES = { const CLASSNAMES = {
ROOT: "etabs", ROOT: "etabs",
NAV: "nav", NAV: "nav",
@ -272,7 +277,7 @@ class TabGroup extends HTMLElement {
} }
class Tab extends EventTarget { class Tab extends EventTarget {
badge: string; badge: Badge;
closable: boolean; closable: boolean;
icon: string; icon: string;
iconURL: string; iconURL: string;
@ -329,7 +334,7 @@ class Tab extends EventTarget {
private initTab() { private initTab() {
const tab = this.tab = document.createElement("div"); const tab = this.tab = document.createElement("div");
tab.classList.add(CLASSNAMES.TAB); tab.classList.add(CLASSNAMES.TAB);
for (let el of ["icon", "title", "close", "badge"]) { for (let el of ["icon", "title", "badge", "close"]) {
const span = tab.appendChild(document.createElement("span")); const span = tab.appendChild(document.createElement("span"));
span.classList.add(`${CLASSNAMES.TAB}-${el}`); span.classList.add(`${CLASSNAMES.TAB}-${el}`);
this.tabElements[el] = span; this.tabElements[el] = span;
@ -419,13 +424,14 @@ class Tab extends EventTarget {
return this.title; return this.title;
} }
setBadge(badge: string) { setBadge(badge?: Badge) {
if (this.isClosed) return; if (this.isClosed) return;
const span = this.tabElements.badge; const span = this.tabElements.badge;
this.badge = badge; this.badge = badge;
if (badge) { if (badge) {
span.innerHTML = badge; span.innerHTML = badge.text;
span.classList.add(badge.classname);
span.classList.remove("hidden"); span.classList.remove("hidden");
} else { } else {
span.classList.add("hidden"); span.classList.add("hidden");

16
src/style.css
View file

@ -23,7 +23,8 @@
--button-hover-color: #383a3e; --button-hover-color: #383a3e;
--button-border-radius: 50%; --button-border-radius: 50%;
--button-cursor: pointer; --button-cursor: pointer;
--badge-background: red; --badge-background: #383a3e;
--badge-color: #fff;
} }
/* STYLES */ /* STYLES */
@ -121,13 +122,14 @@ webview.visible {
.tab-badge { .tab-badge {
background: var(--badge-background); background: var(--badge-background);
position: absolute; color: var(--badge-color);
right: 0;
top: -7px;
border-radius: 50%;
text-align: center; text-align: center;
font-size: 10px; border-radius: 5px;
padding: 0 5px; margin-left: 5px;
padding: 1px 4px;
font-size: 8px;
font-weight: bold;
line-height: 1.2;
} }
.tab-badge.hidden { .tab-badge.hidden {