diff --git a/src/renderer/components/dock/dock-tab.tsx b/src/renderer/components/dock/dock-tab.tsx index ceaee18303..6602e0e616 100644 --- a/src/renderer/components/dock/dock-tab.tsx +++ b/src/renderer/components/dock/dock-tab.tsx @@ -2,11 +2,13 @@ import "./dock-tab.scss"; import React from "react"; import { observer } from "mobx-react"; -import { t } from "@lingui/macro"; +import { t, Trans } from "@lingui/macro"; import { autobind, cssNames, prevDefault } from "../../utils"; import { dockStore, IDockTab } from "./dock.store"; import { Tab, TabProps } from "../tabs"; import { Icon } from "../icon"; +import { Menu, MenuItem } from "../menu"; +import { observable } from "mobx"; import { _i18n } from "../../i18n"; export interface DockTabProps extends TabProps { @@ -15,6 +17,8 @@ export interface DockTabProps extends TabProps { @observer export class DockTab extends React.Component { + @observable menuVisible = false; + get tabId() { return this.props.value.id; } @@ -24,6 +28,35 @@ export class DockTab extends React.Component { dockStore.closeTab(this.tabId); } + renderMenu() { + const { closeTab, closeAllTabs, closeOtherTabs, closeTabsToTheRight } = dockStore; + + return ( + this.menuVisible = true} + close={() => this.menuVisible = false} + toggleEvent="contextmenu" + > + closeTab(this.tabId)}> + Close + + closeAllTabs()}> + Close all tabs + + closeOtherTabs(this.tabId)}> + Close other tabs + + closeTabsToTheRight(this.tabId)}> + Close tabs to the right + + + ); + } + render() { const { className, moreActions, ...tabProps } = this.props; const { title, pinned } = tabProps.value; @@ -42,11 +75,16 @@ export class DockTab extends React.Component { ); return ( - + <> + this.menuVisible = true} + label={label} + /> + {this.renderMenu()} + ); } } \ No newline at end of file diff --git a/src/renderer/components/dock/dock-tabs.tsx b/src/renderer/components/dock/dock-tabs.tsx new file mode 100644 index 0000000000..54451ddd89 --- /dev/null +++ b/src/renderer/components/dock/dock-tabs.tsx @@ -0,0 +1,51 @@ +import React, { Fragment } from "react"; + +import { Icon } from "../icon"; +import { Tabs } from "../tabs/tabs"; +import { isCreateResourceTab } from "./create-resource.store"; +import { DockTab } from "./dock-tab"; +import { IDockTab } from "./dock.store"; +import { isEditResourceTab } from "./edit-resource.store"; +import { isInstallChartTab } from "./install-chart.store"; +import { isPodLogsTab } from "./pod-logs.store"; +import { TerminalTab } from "./terminal-tab"; +import { isTerminalTab } from "./terminal.store"; +import { isUpgradeChartTab } from "./upgrade-chart.store"; + +interface Props { + tabs: IDockTab[] + autoFocus: boolean + selectedTab: IDockTab + onChangeTab: (tab: IDockTab) => void +} + +export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: Props) => { + const renderTab = (tab: IDockTab) => { + if (isTerminalTab(tab)) { + return ; + } + + if (isCreateResourceTab(tab) || isEditResourceTab(tab)) { + return ; + } + + if (isInstallChartTab(tab) || isUpgradeChartTab(tab)) { + return } />; + } + + if (isPodLogsTab(tab)) { + return ; + } + }; + + return ( + + {tabs.map(tab => {renderTab(tab)})} + + ); +}; \ No newline at end of file diff --git a/src/renderer/components/dock/dock.store.ts b/src/renderer/components/dock/dock.store.ts index 60c6085bcc..91d72d98d9 100644 --- a/src/renderer/components/dock/dock.store.ts +++ b/src/renderer/components/dock/dock.store.ts @@ -123,6 +123,10 @@ export class DockStore { return this.tabs.find(tab => tab.id === tabId); } + getTabIndex(tabId: TabId) { + return this.tabs.findIndex(tab => tab.id === tabId); + } + protected getNewTabNumber(kind: TabKind) { const tabNumbers = this.tabs .filter(tab => tab.kind === kind) @@ -182,6 +186,28 @@ export class DockStore { } } + closeTabs(tabs: IDockTab[]) { + tabs.forEach(tab => this.closeTab(tab.id)); + } + + closeAllTabs() { + this.closeTabs([...this.tabs]); + } + + closeOtherTabs(tabId: TabId) { + const index = this.getTabIndex(tabId); + const tabs = [...this.tabs.slice(0, index), ...this.tabs.slice(index + 1)]; + + this.closeTabs(tabs); + } + + closeTabsToTheRight(tabId: TabId) { + const index = this.getTabIndex(tabId); + const tabs = this.tabs.slice(index + 1); + + this.closeTabs(tabs); + } + @action selectTab(tabId: TabId) { this.selectedTabId = this.getTabById(tabId)?.id ?? null; diff --git a/src/renderer/components/dock/dock.tsx b/src/renderer/components/dock/dock.tsx index 6f513e7586..e03765a916 100644 --- a/src/renderer/components/dock/dock.tsx +++ b/src/renderer/components/dock/dock.tsx @@ -1,29 +1,28 @@ import "./dock.scss"; -import React, { Fragment } from "react"; -import { observer } from "mobx-react"; +import React from "react"; import { Trans } from "@lingui/macro"; -import { autobind, cssNames, prevDefault } from "../../utils"; -import { ResizingAnchor, ResizeDirection } from "../resizing-anchor"; +import { observer } from "mobx-react"; + +import { cssNames, prevDefault } from "../../utils"; import { Icon } from "../icon"; -import { Tabs } from "../tabs/tabs"; import { MenuItem } from "../menu"; import { MenuActions } from "../menu/menu-actions"; -import { dockStore, IDockTab } from "./dock.store"; -import { DockTab } from "./dock-tab"; -import { TerminalTab } from "./terminal-tab"; -import { TerminalWindow } from "./terminal-window"; +import { ResizeDirection, ResizingAnchor } from "../resizing-anchor"; import { CreateResource } from "./create-resource"; -import { InstallChart } from "./install-chart"; -import { EditResource } from "./edit-resource"; -import { UpgradeChart } from "./upgrade-chart"; -import { createTerminalTab, isTerminalTab } from "./terminal.store"; import { createResourceTab, isCreateResourceTab } from "./create-resource.store"; +import { DockTabs } from "./dock-tabs"; +import { dockStore, IDockTab } from "./dock.store"; +import { EditResource } from "./edit-resource"; import { isEditResourceTab } from "./edit-resource.store"; +import { InstallChart } from "./install-chart"; import { isInstallChartTab } from "./install-chart.store"; -import { isUpgradeChartTab } from "./upgrade-chart.store"; import { PodLogs } from "./pod-logs"; import { isPodLogsTab } from "./pod-logs.store"; +import { TerminalWindow } from "./terminal-window"; +import { createTerminalTab, isTerminalTab } from "./terminal.store"; +import { UpgradeChart } from "./upgrade-chart"; +import { isUpgradeChartTab } from "./upgrade-chart.store"; interface Props { className?: string; @@ -54,25 +53,6 @@ export class Dock extends React.Component { selectTab(tab.id); }; - @autobind() - renderTab(tab: IDockTab) { - if (isTerminalTab(tab)) { - return ; - } - - if (isCreateResourceTab(tab) || isEditResourceTab(tab)) { - return ; - } - - if (isInstallChartTab(tab) || isUpgradeChartTab(tab)) { - return } />; - } - - if (isPodLogsTab(tab)) { - return ; - } - } - renderTabContent() { const { isOpen, height, selectedTab: tab } = dockStore; @@ -112,13 +92,12 @@ export class Dock extends React.Component { onDrag={dockStore.setHeight} />
- - {tabs.map(tab => {this.renderTab(tab)})} - + onChangeTab={this.onChangeTab} + />
New tab }} closeOnScroll={false}> diff --git a/src/renderer/components/tabs/tabs.tsx b/src/renderer/components/tabs/tabs.tsx index ad01f50920..721d7ad6f1 100644 --- a/src/renderer/components/tabs/tabs.tsx +++ b/src/renderer/components/tabs/tabs.tsx @@ -51,6 +51,7 @@ export class Tabs extends React.PureComponent { } export interface TabProps extends DOMAttributes { + id?: string; className?: string; active?: boolean; disabled?: boolean;