mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Showing custom window buttons in Linux
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev
parent
93ce2632a5
commit
030401cc9c
@ -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,
|
||||
|
||||
@ -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("<Tobar/> in Linux", () => {
|
||||
beforeEach(() => {
|
||||
TopBarRegistry.createInstance();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
TopBarRegistry.resetInstance();
|
||||
});
|
||||
|
||||
it("doesn't show custom title buttons used in Windows", () => {
|
||||
const { queryByTestId } = render(<TopBar/>);
|
||||
|
||||
expect(queryByTestId("window-minimize")).not.toBeInTheDocument();
|
||||
expect(queryByTestId("window-maximize")).not.toBeInTheDocument();
|
||||
expect(queryByTestId("window-close")).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@ -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("<Tobar/> in Windows", () => {
|
||||
describe("<Tobar/> in Windows and Linux", () => {
|
||||
beforeEach(() => {
|
||||
TopBarRegistry.createInstance();
|
||||
});
|
||||
@ -62,7 +66,22 @@ describe("<Tobar/> in Windows", () => {
|
||||
TopBarRegistry.resetInstance();
|
||||
});
|
||||
|
||||
it("shows window controls", () => {
|
||||
it("shows window controls on Windows", () => {
|
||||
mockConfig.isWindows = true;
|
||||
mockConfig.isLinux = false;
|
||||
|
||||
const { getByTestId } = render(<TopBar/>);
|
||||
|
||||
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(<TopBar/>);
|
||||
|
||||
expect(getByTestId("window-menu")).toBeInTheDocument();
|
||||
@ -72,6 +91,8 @@ describe("<Tobar/> in Windows", () => {
|
||||
});
|
||||
|
||||
it("triggers ipc events on click", () => {
|
||||
mockConfig.isWindows = true;
|
||||
|
||||
const { getByTestId } = render(<TopBar/>);
|
||||
|
||||
const menu = getByTestId("window-menu");
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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<any> {
|
||||
}
|
||||
@ -125,7 +126,7 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
|
||||
return (
|
||||
<div className={styles.topBar} onDoubleClick={windowSizeToggle} ref={elem} {...rest}>
|
||||
<div className={styles.tools}>
|
||||
{isWindows && (
|
||||
{(isWindows || isLinux) && (
|
||||
<div className={styles.winMenu}>
|
||||
<div onClick={openContextMenu} data-testid="window-menu">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" shapeRendering="crispEdges"><path fill="currentColor" d="M0,8.5h12v1H0V8.5z"/><path fill="currentColor" d="M0,5.5h12v1H0V5.5z"/><path fill="currentColor" d="M0,2.5h12v1H0V2.5z"/></svg>
|
||||
@ -157,15 +158,15 @@ export const TopBar = observer(({ children, ...rest }: Props) => {
|
||||
<div className={styles.controls}>
|
||||
{renderRegisteredItems()}
|
||||
{children}
|
||||
{isWindows && (
|
||||
<div className={styles.winButtons}>
|
||||
{(isWindows || isLinux) && (
|
||||
<div className={cssNames(styles.windowButtons, { [styles.linuxButtons]: isLinux })}>
|
||||
<div className={styles.minimize} data-testid="window-minimize" onClick={minimizeWindow}>
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><rect fill="currentColor" width="10" height="1" x="1" y="6"></rect></svg></div>
|
||||
<svg shapeRendering="crispEdges" viewBox="0 0 12 12"><rect fill="currentColor" width="10" height="1" x="1" y="9"></rect></svg></div>
|
||||
<div className={styles.maximize} data-testid="window-maximize" onClick={toggleMaximize}>
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="currentColor"></rect></svg>
|
||||
<svg shapeRendering="crispEdges" viewBox="0 0 12 12"><rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="currentColor"></rect></svg>
|
||||
</div>
|
||||
<div className={styles.close} data-testid="window-close" onClick={closeWindow}>
|
||||
<svg width="12" height="12" viewBox="0 0 12 12"><polygon fill="currentColor" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"></polygon></svg>
|
||||
<svg shapeRendering="crispEdges" viewBox="0 0 12 12"><polygon fill="currentColor" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"></polygon></svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user