mirror of
https://ark.sudovanilla.org/Korbs/electron-tabs.git
synced 2024-12-22 19:43:53 +00:00
update
This commit is contained in:
parent
c78c6117b6
commit
99ee9e680c
|
|
@ -2,7 +2,7 @@
|
|||
"root": true,
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2021": true
|
||||
"es2023": true
|
||||
},
|
||||
"extends": "eslint:recommended",
|
||||
"parserOptions": {
|
||||
|
|
|
|||
37
README.md
37
README.md
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
# Electron Tabs
|
||||
|
||||
|
||||
|
||||
|
||||
## 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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
14
dist/electron-tabs.d.ts
vendored
|
|
@ -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
2
dist/electron-tabs.d.ts.map
vendored
File diff suppressed because one or more lines are too long
55
dist/electron-tabs.js
vendored
55
dist/electron-tabs.js
vendored
|
|
@ -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
2
dist/electron-tabs.js.map
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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",
|
||||
|
|
|
|||
72
src/index.ts
72
src/index.ts
|
|
@ -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",
|
||||
|
|
@ -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();
|
||||
|
||||
|
|
@ -388,15 +372,6 @@ class Tab extends EventTarget {
|
|||
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue