diff --git a/src/main/window-manager.ts b/src/main/window-manager.ts index 9add9461f1..3aac404c5b 100644 --- a/src/main/window-manager.ts +++ b/src/main/window-manager.ts @@ -29,7 +29,7 @@ import { delay, iter, Singleton } from "../common/utils"; import { ClusterFrameInfo, clusterFrameMap } from "../common/cluster-frames"; import { IpcRendererNavigationEvents } from "../renderer/navigation/events"; import logger from "./logger"; -import { isWindows, productName } from "../common/vars"; +import { isLinux, isWindows, productName } from "../common/vars"; import { LensProxy } from "./lens-proxy"; export const enum IpcMainWindowEvents { @@ -85,8 +85,7 @@ export class WindowManager extends Singleton { show: false, minWidth: 700, // accommodate 800 x 600 display minimum minHeight: 500, // accommodate 800 x 600 display minimum - titleBarStyle: isWindows ? "hidden" : "hiddenInset", - autoHideMenuBar: true, + titleBarStyle: (isWindows || isLinux) ? "hidden" : "hiddenInset", backgroundColor: "#1e2124", webPreferences: { nodeIntegration: true, diff --git a/src/renderer/components/layout/__tests__/topbar-linux.test.tsx b/src/renderer/components/layout/__tests__/topbar-linux.test.tsx deleted file mode 100644 index 0d22fca5ab..0000000000 --- a/src/renderer/components/layout/__tests__/topbar-linux.test.tsx +++ /dev/null @@ -1,57 +0,0 @@ -/** - * Copyright (c) 2021 OpenLens Authors - * - * Permission is hereby granted, free of charge, to any person obtaining a copy of - * this software and associated documentation files (the "Software"), to deal in - * the Software without restriction, including without limitation the rights to - * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of - * the Software, and to permit persons to whom the Software is furnished to do so, - * subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS - * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR - * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER - * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN - * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - */ -import React from "react"; -import { render } from "@testing-library/react"; -import "@testing-library/jest-dom/extend-expect"; -import { TopBar } from "../topbar"; -import { TopBarRegistry } from "../../../../extensions/registries"; - -jest.mock("../../../../common/ipc"); -jest.mock("../../../../common/vars", () => { - return { - isLinux: true, - isWindows: false, - }; -}); - -jest.mock("@electron/remote", () => { - return { - getCurrentWindow: () => jest.fn(), - }; -}); - -describe(" in Linux", () => { - beforeEach(() => { - TopBarRegistry.createInstance(); - }); - - afterEach(() => { - TopBarRegistry.resetInstance(); - }); - - it("doesn't show custom title buttons used in Windows", () => { - const { queryByTestId } = render(); - - expect(queryByTestId("window-minimize")).not.toBeInTheDocument(); - expect(queryByTestId("window-maximize")).not.toBeInTheDocument(); - expect(queryByTestId("window-close")).not.toBeInTheDocument(); - }); -}); diff --git a/src/renderer/components/layout/__tests__/topbar-win.test.tsx b/src/renderer/components/layout/__tests__/topbar-win-linux.test.tsx similarity index 79% rename from src/renderer/components/layout/__tests__/topbar-win.test.tsx rename to src/renderer/components/layout/__tests__/topbar-win-linux.test.tsx index 6a464f8bef..1307e181cd 100644 --- a/src/renderer/components/layout/__tests__/topbar-win.test.tsx +++ b/src/renderer/components/layout/__tests__/topbar-win-linux.test.tsx @@ -26,13 +26,17 @@ import { TopBar } from "../topbar"; import { TopBarRegistry } from "../../../../extensions/registries"; import { IpcMainWindowEvents } from "../../../../main/window-manager"; import { broadcastMessage } from "../../../../common/ipc"; +import * as vars from "../../../../common/vars"; + +const mockConfig = vars as { isWindows: boolean, isLinux: boolean }; jest.mock("../../../../common/ipc"); jest.mock("../../../../common/vars", () => { return { - isWindows: true, - isLinux: false, + __esModule: true, + isWindows: null, + isLinux: null, }; }); @@ -53,7 +57,7 @@ jest.mock("@electron/remote", () => { }; }); -describe(" in Windows", () => { +describe(" in Windows and Linux", () => { beforeEach(() => { TopBarRegistry.createInstance(); }); @@ -62,7 +66,22 @@ describe(" in Windows", () => { TopBarRegistry.resetInstance(); }); - it("shows window controls", () => { + it("shows window controls on Windows", () => { + mockConfig.isWindows = true; + mockConfig.isLinux = false; + + const { getByTestId } = render(); + + expect(getByTestId("window-menu")).toBeInTheDocument(); + expect(getByTestId("window-minimize")).toBeInTheDocument(); + expect(getByTestId("window-maximize")).toBeInTheDocument(); + expect(getByTestId("window-close")).toBeInTheDocument(); + }); + + it("shows window controls on Linux", () => { + mockConfig.isWindows = false; + mockConfig.isLinux = true; + const { getByTestId } = render(); expect(getByTestId("window-menu")).toBeInTheDocument(); @@ -72,6 +91,8 @@ describe(" in Windows", () => { }); it("triggers ipc events on click", () => { + mockConfig.isWindows = true; + const { getByTestId } = render(); const menu = getByTestId("window-menu"); diff --git a/src/renderer/components/layout/topbar.module.css b/src/renderer/components/layout/topbar.module.css index 4534c89231..2904c09d20 100644 --- a/src/renderer/components/layout/topbar.module.css +++ b/src/renderer/components/layout/topbar.module.css @@ -69,7 +69,7 @@ -webkit-app-region: no-drag; } -.winButtons { +.windowButtons { display: flex; margin-left: 1.5rem; margin-right: -1.5rem; @@ -78,6 +78,35 @@ @apply flex items-center justify-center; width: 40px; height: 40px; + + svg { + width: 12px; + height: 12px; + } + } + + &.linuxButtons { + > div { + width: 16px; + height: 16px; + border-radius: 50%; + margin-right: 1.1rem; + color: var(--textColorAccent); + + svg { + width: 8px; + height: 8px; + } + } + + .close { + color: white; + background-color: #e63e02; /* Standard close button bg color on ubuntu */ + } + + .close:hover { + background-color: #ff5a23; + } } } diff --git a/src/renderer/components/layout/topbar.tsx b/src/renderer/components/layout/topbar.tsx index 4eeaae5a10..af47fd2548 100644 --- a/src/renderer/components/layout/topbar.tsx +++ b/src/renderer/components/layout/topbar.tsx @@ -31,7 +31,8 @@ import { watchHistoryState } from "../../remote-helpers/history-updater"; import { isActiveRoute, navigate } from "../../navigation"; import { catalogRoute, catalogURL } from "../../../common/routes"; import { IpcMainWindowEvents } from "../../../main/window-manager"; -import { isWindows } from "../../../common/vars"; +import { isLinux, isWindows } from "../../../common/vars"; +import { cssNames } from "../../utils"; interface Props extends React.HTMLAttributes { } @@ -125,7 +126,7 @@ export const TopBar = observer(({ children, ...rest }: Props) => { return (
- {isWindows && ( + {(isWindows || isLinux) && (
@@ -157,15 +158,15 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
{renderRegisteredItems()} {children} - {isWindows && ( -
+ {(isWindows || isLinux) && ( +
-
+
- +
- +
)}