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

update

Browse source
This commit is contained in:
Korbs 2024-12-07 19:49:40 -05:00
parent c78c6117b6
commit 99ee9e680c
13 changed files with 49 additions and 226 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintrc.json
View file

@ -2,7 +2,7 @@
"root": true,
"env": {
"browser": true,
"es2021": true
"es2023": true
},
"extends": "eslint:recommended",
"parserOptions": {

37
README.md
View file

@ -3,7 +3,7 @@
# Electron Tabs
![Electron Tab Demo](image.jpg)
![Electron Tab Demo](image.png)
## Features
@ -93,9 +93,6 @@ Add a new tab and returns the related `Tab` instance.
* `title`: tab title.
* `src`: URL to the page which will be loaded into the view. This is actually the same than `options.webview.src`.
* `badge`: optional text to put into a badge, badge will be hidden if false.
* `iconURL`: optional URL to the tab icon.
* `icon`: optional code for a tab icon. Can be used with symbol libraries (example with Font Awesome: `icon: 'fa fa-icon-name'`). This attribute is ignored if an `iconURL` was given.
* `closable` (default: `true`): if set to `true` the close button won't be displayed and the user won't be able to close the tab. See also `tab.close()`.
* `visible` (default: `true`): set this to `false` if you don't want to display the tab once it is loaded. If set to `false` then you will need to call `tab.show()` to display the tab.
* `active` (default: `false`): set this to `true` if you want to activate the tab once it is loaded. Otherwise you will need to call `tab.activate()`.
@ -172,22 +169,6 @@ Set tab title.
Get current tab title.
#### `tab.setBadge(badge)`
Set tab badge.
#### `tab.getBadge()`
Get current tab badge.
#### `tab.setIcon (iconURL, icon)`
Set tab icon (a iconURL or an icon must be given).
#### `tab.getIcon()`
Get current tab icon URL / icon.
#### `tab.setPosition(newPosition)`
Move tab to the specified position. See [`tabGroup.getTabByPosition`](#tabgroupgettabbypositionposition) for information about positions.
@ -222,8 +203,6 @@ The following events are emitted:
* `tab.on("webview-ready", (tab) => { ... });`
* `tab.on("webview-dom-ready", (tab) => { ... });`
* `tab.on("title-changed", (title, tab) => { ... });`
* `tab.on("badge-changed", (badge, tab) => { ... });`
* `tab.on("icon-changed", (icon, tab) => { ... });`
* `tab.on("active", (tab) => { ... });`
* `tab.on("inactive", (tab) => { ... });`
* `tab.on("visible", (tab) => { ... });`
@ -259,15 +238,12 @@ Since `TabGroup` is a Web Component you won't be able to change its styles direc
</tab-group>
```
This method is particularly useful when you need to define custom badges or tab styles:
This method is particularly useful when you need to define tab styles:
```html
<tab-group new-tab-button="true" sortable="true">
<style>
/* Add custom styles */
.my-badge {
background-color: orange;
}
.my-custom-tab {
color: red;
font-weight: bold;
@ -280,15 +256,6 @@ This method is particularly useful when you need to define custom badges or tab
<script>
const tabGroup = document.querySelector("tab-group");
tabGroup.addTab({
title: "Tab with custom badge",
src: "page.html",
badge: {
text: "5",
classname: "my-badge"
}
});
tabGroup.addTab({
title: "Tab with custom style",
src: "page.html",

9
demo/app.js
View file

@ -3,6 +3,15 @@ const app = electron.app;
app.on("ready", function () {
const mainWindow = new electron.BrowserWindow({
titleBarStyle: 'hidden',
frame: false,
width: 1300,
height: 1000,
titleBarOverlay: { // For Windows and Linux`
color: '#e7eaed',
symbolColor: '#696A6C',
height: 40,
},
webPreferences: {
webviewTag: true
}

18
demo/electron-tabs.html
View file

@ -8,6 +8,12 @@
<tab-group new-tab-button="true" sortable="true">
<style>
/* If you use a custom titlebar, add drag ability to navigation bar */
/* Electron Documentation: https://www.electronjs.org/docs/latest/tutorial/custom-window-interactions#custom-draggable-regions */
.nav {-webkit-app-region: drag} /* Apply to navigation bar */
.tab {-webkit-app-region: no-drag} /* Unapply it from the tabs */
button {-webkit-app-region: no-drag} /* Unapply it from the buttons */
/* Add custom styles */
.my-badge {
background-color: #327BB1;
@ -26,15 +32,15 @@
tabGroup.on("ready", () => console.info("TabGroup is ready"));
tabGroup.setDefaultTab({
title: "Wikipedia",
src: "https://www.wikipedia.org/",
title: "Opengist",
src: "https://gist.sudovanilla.org/all",
active: true,
ready: () => console.info("New Tab is ready")
});
tabGroup.addTab({
title: "electron-tabs on NPM",
src: "https://www.npmjs.com/package/electron-tabs",
title: "electron-tabs | SudoVanilla Ark",
src: "https://ark.sudovanilla.org/Korbs/electron-tabs/",
badge: {
text: "5",
classname: "my-badge"
@ -42,8 +48,8 @@
});
tabGroup.addTab({
title: "electron-tabs on Github",
src: "https://github.com/brrd/electron-tabs",
title: "electron-tabs | SudoVanilla Registry",
src: "https://registry.sudovanilla.org/-/web/detail/@sudovanilla/electron-tabs",
iconURL: "mark-github.svg",
active: true
});

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

@ -10,10 +10,7 @@ interface TabGroupOptions {
}
interface TabOptions {
active?: boolean;
badge?: Badge;
closable?: boolean;
icon?: string;
iconURL?: string;
ready?: ((tab: Tab) => void);
src?: string;
title?: string;
@ -22,10 +19,6 @@ interface TabOptions {
[key: string]: any;
};
}
interface Badge {
text: string;
classname: string;
}
export class TabGroup extends HTMLElement {
buttonContainer: HTMLDivElement;
isReady: boolean;
@ -56,11 +49,8 @@ export class TabGroup extends HTMLElement {
activateRecentTab(): void;
}
export class Tab extends EventTarget {
badge: Badge;
closable: boolean;
element: HTMLDivElement;
icon: string;
iconURL: string;
id: number;
isClosed: boolean;
isReady: boolean;
@ -80,10 +70,6 @@ export class Tab extends EventTarget {
initWebview(): void;
setTitle(title: string): this;
getTitle(): string;
setBadge(badge?: Badge): void;
getBadge(): Badge;
setIcon(iconURL: string, icon: string): this;
getIcon(): string;
setPosition(newPosition: number): this;
getPosition(fromRight?: boolean): number;
activate(): this;

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

File diff suppressed because one or more lines are too long

55
dist/electron-tabs.js vendored
View file

@ -2622,10 +2622,10 @@ var $64afbd09cd65a300$export$2e2bcd8739ae039 = $64afbd09cd65a300$export$31b3ca70
var $761c8257657e0bda$exports = {};
$761c8257657e0bda$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 .2s ease-out, color .2s 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 --close-button-visibility: visible;\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 cursor: default;\n -webkit-user-select: none;\n user-select: none;\n width: 100%;\n height: 32px;\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 align-items: center;\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-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 text-align: center;\n width: 20px;\n height: 20px;\n visibility: var(--close-button-visibility);\n border: none;\n padding: 1px 0 0;\n display: inline-block;\n}\n\n.tab.active .tab-close button {\n visibility: visible;\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 text-align: center;\n border: none;\n width: 20px;\n height: 20px;\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";
$761c8257657e0bda$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-border-radius: 4px;\n --tab-transition: background-color .2s ease-out, color .2s 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: 4px;\n --button-cursor: pointer;\n --close-button-visibility: visible;\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 border-top: 1px solid var(--tab-border-color);\n font-size: var(--tab-font-size);\n cursor: default;\n -webkit-user-select: none;\n user-select: none;\n width: calc(100% - 16px);\n height: 32px;\n padding: 4px 6px;\n display: none;\n}\n\n.nav.visible {\n display: flex;\n}\n\n.tabs {\n gap: 4px;\n height: 100%;\n display: flex;\n}\n\n.tab {\n background: var(--tab-background);\n border: 1px var(--tab-border-color) solid;\n color: var(--tab-color);\n cursor: var(--tab-cursor);\n font-size: var(--tab-font-size);\n transition: var(--tab-transition);\n border-radius: var(--tab-border-radius);\n box-sizing: border-box;\n align-items: center;\n height: 100%;\n padding: 6px 0;\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 border: 1px var(--tab-border-color) solid;\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}\n\n.tab:not(.active):hover {\n background: var(--tab-hover-background);\n color: var(--tab-hover-color);\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 text-align: center;\n width: 26px;\n height: 26px;\n visibility: var(--close-button-visibility);\n border: none;\n margin-right: 4px;\n padding: 1px 0 0;\n display: inline-block;\n}\n\n.tab.active .tab-close button {\n visibility: visible;\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 text-align: center;\n border: none;\n width: 20px;\n height: 20px;\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 - 41px);\n position: relative;\n}\n";
if (!document) throw Error("electron-tabs module must be called in renderer process");
if (!document) throw Error("Electron Tabs(electron-tabs) module must be called in renderer process");
const $eda442ba39f881a8$var$CLASSNAMES = {
ROOT: "etabs",
NAV: "nav",
@ -2813,11 +2813,8 @@ class $eda442ba39f881a8$var$TabGroup extends HTMLElement {
}
}
class $eda442ba39f881a8$var$Tab extends EventTarget {
badge;
closable;
element;
icon;
iconURL;
id;
isClosed;
isReady;
@ -2828,10 +2825,7 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
webviewAttributes;
constructor(tabGroup, id, args){
super();
this.badge = args.badge;
this.closable = args.closable === false ? false : true;
this.icon = args.icon;
this.iconURL = args.iconURL;
this.id = id;
this.isClosed = false;
this.isReady = false;
@ -2861,9 +2855,7 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
const tab = this.element = document.createElement("div");
tab.classList.add($eda442ba39f881a8$var$CLASSNAMES.TAB);
for (let el of [
"icon",
"title",
"badge",
"close"
]){
const span = tab.appendChild(document.createElement("span"));
@ -2871,8 +2863,6 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
this.spans[el] = span;
}
this.setTitle(this.title);
this.setBadge(this.badge);
this.setIcon(this.iconURL, this.icon);
this.initTabCloseButton();
this.initTabClickHandler();
this.tabGroup.tabContainer.appendChild(this.element);
@ -2908,13 +2898,6 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
this.emit("webview-ready", this);
};
this.webview.addEventListener("did-finish-load", tabWebviewDidFinishLoadHandler.bind(this), false);
const tabWebviewDomReadyHandler = function(e) {
// Remove this once https://github.com/electron/electron/issues/14474 is fixed
webview.blur();
webview.focus();
this.emit("webview-dom-ready", this);
};
this.webview.addEventListener("dom-ready", tabWebviewDomReadyHandler.bind(this), false);
this.webview.classList.add($eda442ba39f881a8$var$CLASSNAMES.VIEW);
if (this.webviewAttributes) {
const attrs = this.webviewAttributes;
@ -2939,40 +2922,6 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
if (this.isClosed) return;
return this.title;
}
setBadge(badge) {
if (this.isClosed) return;
const span = this.spans.badge;
this.badge = badge;
if (badge) {
span.innerHTML = badge.text;
span.classList.add(badge.classname);
span.classList.remove("hidden");
} else span.classList.add("hidden");
this.emit("badge-changed", badge, this);
}
getBadge() {
if (this.isClosed) return;
return this.badge;
}
setIcon(iconURL, icon) {
if (this.isClosed) return;
this.iconURL = iconURL;
this.icon = icon;
const span = this.spans.icon;
if (iconURL) {
span.innerHTML = `<img src="${iconURL}" />`;
this.emit("icon-changed", iconURL, this);
} else if (icon) {
span.innerHTML = `<i class="${icon}"></i>`;
this.emit("icon-changed", icon, this);
}
return this;
}
getIcon() {
if (this.isClosed) return;
if (this.iconURL) return this.iconURL;
return this.icon;
}
setPosition(newPosition) {
const tabContainer = this.tabGroup.tabContainer;
const length = tabContainer.childElementCount;

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

File diff suppressed because one or more lines are too long

BIN
image.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 155 KiB

BIN
image.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 138 KiB

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "@sudovanilla/electron-tabs",
"version": "1.3.0",
"version": "1.3.1",
"description": "Simple tabs for Electron applications",
"main": "dist/electron-tabs.js",
"types": "dist/electron-tabs.d.ts",

80
src/index.ts
View file

@ -3,7 +3,7 @@ import Sortable from "sortablejs";
import styles from "bundle-text:./style.css";
if (!document) {
throw Error("electron-tabs module must be called in renderer process");
throw Error("Electron Tabs(electron-tabs) module must be called in renderer process");
}
interface TabGroupOptions {
@ -18,10 +18,7 @@ interface TabGroupOptions {
interface TabOptions {
active?: boolean;
badge?: Badge;
closable?: boolean;
icon?: string;
iconURL?: string;
ready?: ((tab: Tab) => void);
src?: string;
title?: string;
@ -29,11 +26,6 @@ interface TabOptions {
webviewAttributes?: { [key: string]: any };
}
interface Badge {
text: string,
classname: string
}
const CLASSNAMES = {
ROOT: "etabs",
NAV: "nav",
@ -116,7 +108,7 @@ class TabGroup extends HTMLElement {
}
private createComponent() {
const shadow = this.attachShadow({mode: "open"});
const shadow = this.attachShadow({ mode: "open" });
this.shadow = shadow;
const wrapper = document.createElement("div");
@ -278,11 +270,8 @@ class TabGroup extends HTMLElement {
}
class Tab extends EventTarget {
badge: Badge;
closable: boolean;
element: HTMLDivElement;
icon: string;
iconURL: string;
id: number;
isClosed: boolean;
isReady: boolean;
@ -294,10 +283,7 @@ class Tab extends EventTarget {
constructor(tabGroup: TabGroup, id: number, args: TabOptions) {
super();
this.badge = args.badge;
this.closable = args.closable === false ? false : true;
this.icon = args.icon;
this.iconURL = args.iconURL;
this.id = id;
this.isClosed = false;
this.isReady = false;
@ -335,15 +321,13 @@ class Tab extends EventTarget {
private initTab() {
const tab = this.element = document.createElement("div");
tab.classList.add(CLASSNAMES.TAB);
for (let el of ["icon", "title", "badge", "close"]) {
for (let el of ["title", "close"]) {
const span = tab.appendChild(document.createElement("span"));
span.classList.add(`${CLASSNAMES.TAB}-${el}`);
this.spans[el] = span;
}
this.setTitle(this.title);
this.setBadge(this.badge);
this.setIcon(this.iconURL, this.icon);
this.initTabCloseButton();
this.initTabClickHandler();
@ -361,7 +345,7 @@ class Tab extends EventTarget {
private initTabClickHandler() {
// Mouse up
const tabClickHandler = function(e: KeyboardEvent) {
const tabClickHandler = function (e: KeyboardEvent) {
if (this.isClosed) return;
if (e.which === 2) {
this.close();
@ -369,7 +353,7 @@ class Tab extends EventTarget {
};
this.element.addEventListener("mouseup", tabClickHandler.bind(this), false);
// Mouse down
const tabMouseDownHandler = function(e: KeyboardEvent) {
const tabMouseDownHandler = function (e: KeyboardEvent) {
if (this.isClosed) return;
if (e.which === 1) {
if ((e.target as HTMLElement).matches("button")) return;
@ -382,21 +366,12 @@ class Tab extends EventTarget {
initWebview() {
const webview = this.webview = document.createElement("webview");
const tabWebviewDidFinishLoadHandler = function(e: Event) {
const tabWebviewDidFinishLoadHandler = function (e: Event) {
this.emit("webview-ready", this);
};
this.webview.addEventListener("did-finish-load", tabWebviewDidFinishLoadHandler.bind(this), false);
const tabWebviewDomReadyHandler = function(e: Event) {
// Remove this once https://github.com/electron/electron/issues/14474 is fixed
webview.blur();
webview.focus();
this.emit("webview-dom-ready", this);
};
this.webview.addEventListener("dom-ready", tabWebviewDomReadyHandler.bind(this), false);
this.webview.classList.add(CLASSNAMES.VIEW);
if (this.webviewAttributes) {
const attrs = this.webviewAttributes;
@ -425,49 +400,6 @@ class Tab extends EventTarget {
return this.title;
}
setBadge(badge?: Badge) {
if (this.isClosed) return;
const span = this.spans.badge;
this.badge = badge;
if (badge) {
span.innerHTML = badge.text;
span.classList.add(badge.classname);
span.classList.remove("hidden");
} else {
span.classList.add("hidden");
}
this.emit("badge-changed", badge, this);
}
getBadge() {
if (this.isClosed) return;
return this.badge;
}
setIcon(iconURL: string, icon: string) {
if (this.isClosed) return;
this.iconURL = iconURL;
this.icon = icon;
const span = this.spans.icon;
if (iconURL) {
span.innerHTML = `<img src="${iconURL}" />`;
this.emit("icon-changed", iconURL, this);
} else if (icon) {
span.innerHTML = `<i class="${icon}"></i>`;
this.emit("icon-changed", icon, this);
}
return this;
}
getIcon() {
if (this.isClosed) return;
if (this.iconURL) return this.iconURL;
return this.icon;
}
setPosition(newPosition: number) {
const tabContainer = this.tabGroup.tabContainer;
const length = tabContainer.childElementCount;

54
src/style.css
View file

@ -8,6 +8,7 @@
--tab-background: #E7EAED;
--tab-color: #696A6C;
--tab-border-color: #DADCE0;
--tab-border-radius: 4px;
--tab-transition: background-color 200ms ease-out, color 200ms ease-out;
--tab-cursor: pointer;
--tab-active-color: currentcolor;
@ -19,10 +20,8 @@
--button-color: #696A6C;
--button-hover-background: #DADCE0;
--button-hover-color: #383a3e;
--button-border-radius: 50%;
--button-border-radius: 4px;
--button-cursor: pointer;
--badge-background: #383a3e;
--badge-color: #fff;
--close-button-visibility: visible;
}
@ -48,15 +47,15 @@ webview.visible {
.nav {
background: var(--tabgroup-background);
box-shadow: inset 0 -1px var(--tab-border-color);
border-top: 1px solid var(--tab-border-color);
font-size: var(--tab-font-size);
display: none;
width: 100%;
width: calc(100% - 16px);
height: 32px;
cursor: default;
-webkit-user-select: none;
user-select: none;
padding: 4px 6px;
}
.nav.visible {
@ -65,20 +64,23 @@ webview.visible {
.tabs {
height: 100%;
display: flex;
gap: 4px;
}
.tab {
background: var(--tab-background);
box-shadow: inset 0 -1px var(--tab-border-color);
border: 1px var(--tab-border-color) solid;
color: var(--tab-color);
cursor: var(--tab-cursor);
font-size: var(--tab-font-size);
transition: var(--tab-transition);
border-radius: var(--tab-border-radius);
display: none;
position: relative;
box-sizing: border-box;
height: 100%;
padding: 5px 9px;
padding: 6px 0px;
align-items: center;
}
@ -95,9 +97,7 @@ webview.visible {
background: var(--tab-active-background);
border-left: 1px solid var(--tab-border-color);
border-right: 1px solid var(--tab-border-color);
padding-left: 8px;
padding-right: 8px;
box-shadow: none;
border: 1px var(--tab-border-color) solid;
}
.tab.active:last-child {
@ -106,7 +106,6 @@ webview.visible {
.tab.visible:not(.active)+.tab.visible:not(.active) {
border-left: 1px solid var(--tab-border-color);
padding-left: 8px;
}
.tab:not(.active):hover {
@ -114,32 +113,6 @@ webview.visible {
color: var(--tab-hover-color);
}
.tab-badge {
background: var(--badge-background);
color: var(--badge-color);
text-align: center;
border-radius: 5px;
margin-left: 5px;
padding: 1px 4px;
font-size: 8px;
font-weight: bold;
line-height: 1.2;
}
.tab-badge.hidden {
display: none;
}
.tab-icon {
display: inline-block;
height: 16px;
}
.tab-icon img {
max-width: 16px;
max-height: 16px;
}
.tab-title {
display: inline-block;
margin-left: 10px;
@ -158,11 +131,12 @@ webview.visible {
font-size: var(--button-font-size);
display: inline-block;
border: none;
width: 20px;
height: 20px;
width: 26px;
height: 26px;
text-align: center;
padding: 1px 0 0 0;
visibility: var(--close-button-visibility);
margin-right: 4px;
}
.tab.active .tab-close button {
@ -204,5 +178,5 @@ webview.visible {
.views {
position: relative;
height: calc(100vh - 33px);
height: calc(100vh - 41px);
}