From 2d97f2313b11ec5d717c019c471621365f4d6f4e Mon Sep 17 00:00:00 2001 From: Janne Savolainen Date: Wed, 17 Aug 2022 15:14:36 +0300 Subject: [PATCH] Fix double-clicking and dragging of window from top bar Co-authored-by: Mikko Aspiala Signed-off-by: Janne Savolainen --- ...ate-application-top-bar-item.injectable.ts | 4 +- ...egistrator-for-top-bar-items.injectable.ts | 4 +- .../context-menu-top-bar-item.injectable.ts | 4 +- ...igation-to-back-top-bar-item.injectable.ts | 4 +- ...tion-to-forward-top-bar-item.injectable.ts | 4 +- ...igation-to-home-top-bar-item.injectable.ts | 4 +- .../top-bar-item-injection-token.ts | 8 ++- ... top-bar-items-on-left-side.injectable.ts} | 10 +-- .../top-bar-items-on-right-side.injectable.ts | 30 +++++++++ ...window-controls-top-bar-item.injectable.ts | 6 +- .../layout/top-bar/top-bar.module.scss | 27 +++----- .../components/layout/top-bar/top-bar.tsx | 63 ++++++++++++------- 12 files changed, 103 insertions(+), 65 deletions(-) rename src/renderer/components/layout/top-bar/top-bar-items/{top-bar-items.injectable.ts => top-bar-items-on-left-side.injectable.ts} (69%) create mode 100644 src/renderer/components/layout/top-bar/top-bar-items/top-bar-items-on-right-side.injectable.ts diff --git a/src/features/application-update/child-features/application-update-using-top-bar/renderer/update-application-top-bar-item/update-application-top-bar-item.injectable.ts b/src/features/application-update/child-features/application-update-using-top-bar/renderer/update-application-top-bar-item/update-application-top-bar-item.injectable.ts index dad6ebe29b..47d87b15c1 100644 --- a/src/features/application-update/child-features/application-update-using-top-bar/renderer/update-application-top-bar-item/update-application-top-bar-item.injectable.ts +++ b/src/features/application-update/child-features/application-update-using-top-bar/renderer/update-application-top-bar-item/update-application-top-bar-item.injectable.ts @@ -4,7 +4,7 @@ */ import { getInjectable } from "@ogre-tools/injectable"; import { computed } from "mobx"; -import topBarItemInjectionToken from "../../../../../../renderer/components/layout/top-bar/top-bar-items/top-bar-item-injection-token"; +import { topBarItemOnRightSideInjectionToken } from "../../../../../../renderer/components/layout/top-bar/top-bar-items/top-bar-item-injection-token"; import { UpdateButton } from "./update-button"; import updateWarningLevelInjectable from "./update-warning-level.injectable"; @@ -22,7 +22,7 @@ const updateApplicationTopBarItemInjectable = getInjectable({ }; }, - injectionToken: topBarItemInjectionToken, + injectionToken: topBarItemOnRightSideInjectionToken, }); export default updateApplicationTopBarItemInjectable; diff --git a/src/features/top-bar/extension-api/renderer/legacy-extension-api-registrator-for-top-bar-items.injectable.ts b/src/features/top-bar/extension-api/renderer/legacy-extension-api-registrator-for-top-bar-items.injectable.ts index 211cfaf4b7..8eef409b1a 100644 --- a/src/features/top-bar/extension-api/renderer/legacy-extension-api-registrator-for-top-bar-items.injectable.ts +++ b/src/features/top-bar/extension-api/renderer/legacy-extension-api-registrator-for-top-bar-items.injectable.ts @@ -7,7 +7,7 @@ import { reject } from "lodash/fp"; import { extensionRegistratorInjectionToken } from "../../../../extensions/extension-loader/extension-registrator-injection-token"; import type { LensRendererExtension } from "../../../../extensions/lens-renderer-extension"; import { pipeline } from "@ogre-tools/fp"; -import topBarItemInjectionToken from "../../../../renderer/components/layout/top-bar/top-bar-items/top-bar-item-injection-token"; +import { topBarItemOnRightSideInjectionToken } from "../../../../renderer/components/layout/top-bar/top-bar-items/top-bar-item-injection-token"; import { computed } from "mobx"; const legacyExtensionApiRegistratorForTopBarItemsInjectable = getInjectable({ @@ -28,7 +28,7 @@ const legacyExtensionApiRegistratorForTopBarItemsInjectable = getInjectable({ return getInjectable({ id, - injectionToken: topBarItemInjectionToken, + injectionToken: topBarItemOnRightSideInjectionToken, instantiate: () => ({ id, diff --git a/src/renderer/components/layout/top-bar/top-bar-items/context-menu/context-menu-top-bar-item.injectable.ts b/src/renderer/components/layout/top-bar/top-bar-items/context-menu/context-menu-top-bar-item.injectable.ts index 21fb69cf3f..677120446c 100644 --- a/src/renderer/components/layout/top-bar/top-bar-items/context-menu/context-menu-top-bar-item.injectable.ts +++ b/src/renderer/components/layout/top-bar/top-bar-items/context-menu/context-menu-top-bar-item.injectable.ts @@ -7,7 +7,7 @@ import isLinuxInjectable from "../../../../../../common/vars/is-linux.injectable import isWindowsInjectable from "../../../../../../common/vars/is-windows.injectable"; import { computed } from "mobx"; import { ContextMenu } from "./context-menu"; -import topBarItemInjectionToken from "../top-bar-item-injection-token"; +import { topBarItemOnLeftSideInjectionToken } from "../top-bar-item-injection-token"; const contextMenuTopBarItemInjectable = getInjectable({ id: "context-menu-top-bar-item", @@ -24,7 +24,7 @@ const contextMenuTopBarItemInjectable = getInjectable({ }; }, - injectionToken: topBarItemInjectionToken, + injectionToken: topBarItemOnLeftSideInjectionToken, }); export default contextMenuTopBarItemInjectable; diff --git a/src/renderer/components/layout/top-bar/top-bar-items/navigation-to-back/navigation-to-back-top-bar-item.injectable.ts b/src/renderer/components/layout/top-bar/top-bar-items/navigation-to-back/navigation-to-back-top-bar-item.injectable.ts index ff4f941000..ce4f671531 100644 --- a/src/renderer/components/layout/top-bar/top-bar-items/navigation-to-back/navigation-to-back-top-bar-item.injectable.ts +++ b/src/renderer/components/layout/top-bar/top-bar-items/navigation-to-back/navigation-to-back-top-bar-item.injectable.ts @@ -4,7 +4,7 @@ */ import { getInjectable } from "@ogre-tools/injectable"; import { computed } from "mobx"; -import topBarItemInjectionToken from "../top-bar-item-injection-token"; +import { topBarItemOnLeftSideInjectionToken } from "../top-bar-item-injection-token"; import { NavigationToBack } from "./navigation-to-back"; const navigationToBackTopBarItemInjectable = getInjectable({ @@ -17,7 +17,7 @@ const navigationToBackTopBarItemInjectable = getInjectable({ Component: NavigationToBack, }), - injectionToken: topBarItemInjectionToken, + injectionToken: topBarItemOnLeftSideInjectionToken, }); export default navigationToBackTopBarItemInjectable; diff --git a/src/renderer/components/layout/top-bar/top-bar-items/navigation-to-forward/navigation-to-forward-top-bar-item.injectable.ts b/src/renderer/components/layout/top-bar/top-bar-items/navigation-to-forward/navigation-to-forward-top-bar-item.injectable.ts index 10c6cbdea9..6017ab93f4 100644 --- a/src/renderer/components/layout/top-bar/top-bar-items/navigation-to-forward/navigation-to-forward-top-bar-item.injectable.ts +++ b/src/renderer/components/layout/top-bar/top-bar-items/navigation-to-forward/navigation-to-forward-top-bar-item.injectable.ts @@ -4,8 +4,8 @@ */ import { getInjectable } from "@ogre-tools/injectable"; import { computed } from "mobx"; -import topBarItemInjectionToken from "../top-bar-item-injection-token"; import { NavigationToForward } from "./navigation-to-forward"; +import { topBarItemOnLeftSideInjectionToken } from "../top-bar-item-injection-token"; const navigationToForwardTopBarItemInjectable = getInjectable({ id: "navigation-to-forward-top-bar-item", @@ -17,7 +17,7 @@ const navigationToForwardTopBarItemInjectable = getInjectable({ Component: NavigationToForward, }), - injectionToken: topBarItemInjectionToken, + injectionToken: topBarItemOnLeftSideInjectionToken, }); export default navigationToForwardTopBarItemInjectable; diff --git a/src/renderer/components/layout/top-bar/top-bar-items/navigation-to-home/navigation-to-home-top-bar-item.injectable.ts b/src/renderer/components/layout/top-bar/top-bar-items/navigation-to-home/navigation-to-home-top-bar-item.injectable.ts index 969e95e75a..6d9e283cf5 100644 --- a/src/renderer/components/layout/top-bar/top-bar-items/navigation-to-home/navigation-to-home-top-bar-item.injectable.ts +++ b/src/renderer/components/layout/top-bar/top-bar-items/navigation-to-home/navigation-to-home-top-bar-item.injectable.ts @@ -4,8 +4,8 @@ */ import { getInjectable } from "@ogre-tools/injectable"; import { computed } from "mobx"; -import topBarItemInjectionToken from "../top-bar-item-injection-token"; import { NavigationToHome } from "./navigation-to-home"; +import { topBarItemOnLeftSideInjectionToken } from "../top-bar-item-injection-token"; const navigationToHomeTopBarItemInjectable = getInjectable({ id: "navigation-to-home-top-bar-item", @@ -17,7 +17,7 @@ const navigationToHomeTopBarItemInjectable = getInjectable({ Component: NavigationToHome, }), - injectionToken: topBarItemInjectionToken, + injectionToken: topBarItemOnLeftSideInjectionToken, }); export default navigationToHomeTopBarItemInjectable; diff --git a/src/renderer/components/layout/top-bar/top-bar-items/top-bar-item-injection-token.ts b/src/renderer/components/layout/top-bar/top-bar-items/top-bar-item-injection-token.ts index c0c1ddba86..bae1bd0464 100644 --- a/src/renderer/components/layout/top-bar/top-bar-items/top-bar-item-injection-token.ts +++ b/src/renderer/components/layout/top-bar/top-bar-items/top-bar-item-injection-token.ts @@ -13,8 +13,10 @@ export interface TopBarItem { Component: React.ComponentType; } -const topBarItemInjectionToken = getInjectionToken({ - id: "top-bar-item-injection-token", +export const topBarItemOnRightSideInjectionToken = getInjectionToken({ + id: "top-bar-item-on-right-side-injection-token", }); -export default topBarItemInjectionToken; +export const topBarItemOnLeftSideInjectionToken = getInjectionToken({ + id: "top-bar-item-on-left-side-injection-token", +}); diff --git a/src/renderer/components/layout/top-bar/top-bar-items/top-bar-items.injectable.ts b/src/renderer/components/layout/top-bar/top-bar-items/top-bar-items-on-left-side.injectable.ts similarity index 69% rename from src/renderer/components/layout/top-bar/top-bar-items/top-bar-items.injectable.ts rename to src/renderer/components/layout/top-bar/top-bar-items/top-bar-items-on-left-side.injectable.ts index f5af16a5ec..894ef95eaf 100644 --- a/src/renderer/components/layout/top-bar/top-bar-items/top-bar-items.injectable.ts +++ b/src/renderer/components/layout/top-bar/top-bar-items/top-bar-items-on-left-side.injectable.ts @@ -7,15 +7,15 @@ import { getInjectable } from "@ogre-tools/injectable"; import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx"; import { filter, sortBy } from "lodash/fp"; import { computed } from "mobx"; -import topBarItemInjectionToken from "./top-bar-item-injection-token"; +import { topBarItemOnLeftSideInjectionToken } from "./top-bar-item-injection-token"; -const topBarItemsInjectable = getInjectable({ - id: "top-bar-items", +const topBarItemsOnLeftSideInjectable = getInjectable({ + id: "top-bar-items-on-left-side", instantiate: (di) => { const computedInjectMany = di.inject(computedInjectManyInjectable); - const items = computedInjectMany(topBarItemInjectionToken); + const items = computedInjectMany(topBarItemOnLeftSideInjectionToken); return computed(() => pipeline( @@ -27,4 +27,4 @@ const topBarItemsInjectable = getInjectable({ }, }); -export default topBarItemsInjectable; +export default topBarItemsOnLeftSideInjectable; diff --git a/src/renderer/components/layout/top-bar/top-bar-items/top-bar-items-on-right-side.injectable.ts b/src/renderer/components/layout/top-bar/top-bar-items/top-bar-items-on-right-side.injectable.ts new file mode 100644 index 0000000000..7402509fe9 --- /dev/null +++ b/src/renderer/components/layout/top-bar/top-bar-items/top-bar-items-on-right-side.injectable.ts @@ -0,0 +1,30 @@ +/** + * Copyright (c) OpenLens Authors. All rights reserved. + * Licensed under MIT License. See LICENSE in root directory for more information. + */ +import { pipeline } from "@ogre-tools/fp"; +import { getInjectable } from "@ogre-tools/injectable"; +import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx"; +import { filter, sortBy } from "lodash/fp"; +import { computed } from "mobx"; +import { topBarItemOnRightSideInjectionToken } from "./top-bar-item-injection-token"; + +const topBarItemsOnRightSideInjectable = getInjectable({ + id: "top-bar-items-on-right-side", + + instantiate: (di) => { + const computedInjectMany = di.inject(computedInjectManyInjectable); + + const items = computedInjectMany(topBarItemOnRightSideInjectionToken); + + return computed(() => + pipeline( + items.get(), + filter((item) => item.isShown.get()), + sortBy(item => item.orderNumber), + ), + ); + }, +}); + +export default topBarItemsOnRightSideInjectable; diff --git a/src/renderer/components/layout/top-bar/top-bar-items/window-controls/window-controls-top-bar-item.injectable.ts b/src/renderer/components/layout/top-bar/top-bar-items/window-controls/window-controls-top-bar-item.injectable.ts index 14a489aa9e..e8bb0f2e8e 100644 --- a/src/renderer/components/layout/top-bar/top-bar-items/window-controls/window-controls-top-bar-item.injectable.ts +++ b/src/renderer/components/layout/top-bar/top-bar-items/window-controls/window-controls-top-bar-item.injectable.ts @@ -4,7 +4,7 @@ */ import { getInjectable } from "@ogre-tools/injectable"; import { computed } from "mobx"; -import topBarItemInjectionToken from "../top-bar-item-injection-token"; +import { topBarItemOnRightSideInjectionToken } from "../top-bar-item-injection-token"; import { WindowControls } from "./window-controls"; import isWindowsInjectable from "../../../../../../common/vars/is-windows.injectable"; import isLinuxInjectable from "../../../../../../common/vars/is-linux.injectable"; @@ -18,13 +18,13 @@ const windowControlsTopBarItemInjectable = getInjectable({ return ({ id: "window-controls", - orderNumber: 110, + orderNumber: 900, isShown: computed(() => (isWindows || isLinux)), Component: WindowControls, }); }, - injectionToken: topBarItemInjectionToken, + injectionToken: topBarItemOnRightSideInjectionToken, }); export default windowControlsTopBarItemInjectable; diff --git a/src/renderer/components/layout/top-bar/top-bar.module.scss b/src/renderer/components/layout/top-bar/top-bar.module.scss index 62aec82a9e..9b880442c6 100644 --- a/src/renderer/components/layout/top-bar/top-bar.module.scss +++ b/src/renderer/components/layout/top-bar/top-bar.module.scss @@ -4,13 +4,10 @@ */ .topBar { - display: flex; background-color: var(--layoutBackground); z-index: 2; - width: 100%; grid-area: topbar; height: var(--main-layout-header); - justify-content: space-between; /* Use topbar as draggable region */ user-select: none; @@ -18,26 +15,20 @@ } .topBar .items { + justify-content: space-between; align-items: center; display: flex; height: 100%; + padding-left: calc(var(--padding) * 2); + padding-right: calc(var(--padding) * 2); +} + +.preventedDragging { -webkit-app-region: no-drag; +} - &:first-of-type { - padding-left: calc(var(--padding) * 2); - - & > *:not(:empty) { - margin-right: calc(var(--padding) * 1.5); - } - } - - &:last-of-type { - padding-right: calc(var(--padding) * 2); - - & > *:not(:empty) { - margin-left: calc(var(--padding) * 1.5); - } - } +.separator { + flex-basis: 100%; } :global(.is-mac) .topBar { diff --git a/src/renderer/components/layout/top-bar/top-bar.tsx b/src/renderer/components/layout/top-bar/top-bar.tsx index df2668038e..98ccf1652a 100644 --- a/src/renderer/components/layout/top-bar/top-bar.tsx +++ b/src/renderer/components/layout/top-bar/top-bar.tsx @@ -4,51 +4,52 @@ */ import styles from "./top-bar.module.scss"; -import React, { useEffect, useRef } from "react"; +import React, { useEffect } from "react"; import { observer } from "mobx-react"; import type { IComputedValue } from "mobx"; import { withInjectables } from "@ogre-tools/injectable-react"; import toggleMaximizeWindowInjectable from "./toggle-maximize-window/toggle-maximize-window.injectable"; import watchHistoryStateInjectable from "../../../remote-helpers/watch-history-state.injectable"; -import topBarItemsInjectable from "./top-bar-items/top-bar-items.injectable"; +import topBarItemsOnRightSideInjectable from "./top-bar-items/top-bar-items-on-right-side.injectable"; import type { TopBarItem } from "./top-bar-items/top-bar-item-injection-token"; -import welcomeRouteInjectable from "../../../../common/front-end-routing/routes/welcome/welcome-route.injectable"; -import navigateToWelcomeInjectable from "../../../../common/front-end-routing/routes/welcome/navigate-to-welcome.injectable"; +import { Map } from "../../map/map"; +import Gutter from "../../gutter/gutter"; +import topBarItemsOnLeftSideInjectable from "./top-bar-items/top-bar-items-on-left-side.injectable"; interface Dependencies { - items: IComputedValue; + itemsOnLeft: IComputedValue; + itemsOnRight: IComputedValue; toggleMaximizeWindow: () => void; watchHistoryState: () => () => void; } const NonInjectedTopBar = observer( ({ - items, + itemsOnLeft, + itemsOnRight, toggleMaximizeWindow, watchHistoryState, }: Dependencies) => { - const elem = useRef(null); - - const windowSizeToggle = (evt: React.MouseEvent) => { - if (elem.current === evt.target) { - toggleMaximizeWindow(); - } - }; - useEffect(() => watchHistoryState(), []); return ( -
+
- {items.get().map((item) => { - const Component = item.Component; + } + > + {toItemWhichWorksWithWindowDraggingAndDoubleClicking} + - return ; - })} +
+ + } + > + {toItemWhichWorksWithWindowDraggingAndDoubleClicking} +
); @@ -57,8 +58,22 @@ const NonInjectedTopBar = observer( export const TopBar = withInjectables(NonInjectedTopBar, { getProps: (di) => ({ - items: di.inject(topBarItemsInjectable), + itemsOnLeft: di.inject(topBarItemsOnLeftSideInjectable), + itemsOnRight: di.inject(topBarItemsOnRightSideInjectable), toggleMaximizeWindow: di.inject(toggleMaximizeWindowInjectable), watchHistoryState: di.inject(watchHistoryStateInjectable), }), }); + +const toItemWhichWorksWithWindowDraggingAndDoubleClicking = ( + item: TopBarItem, +) => ( +
{ + return event.stopPropagation(); + }} + > + +
+);