Fix double-clicking and dragging of window from top bar

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

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;

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,

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;

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;

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;

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;

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<TopBarItem>({
+export const topBarItemOnRightSideInjectionToken = getInjectionToken<TopBarItem>({
-  id: "top-bar-item-injection-token",
+  id: "top-bar-item-on-right-side-injection-token",
 });
 
-export default topBarItemInjectionToken;
+export const topBarItemOnLeftSideInjectionToken = getInjectionToken<TopBarItem>({
+  id: "top-bar-item-on-left-side-injection-token",
+});

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({
+const topBarItemsOnLeftSideInjectable = getInjectable({
-  id: "top-bar-items",
+  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;

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;

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;

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 {
+.separator {
-    padding-left: calc(var(--padding) * 2);
+  flex-basis: 100%;
-
-    & > *: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);
-    }
-  }
 }
 
 :global(.is-mac) .topBar {

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 { Map } from "../../map/map";
-import navigateToWelcomeInjectable from "../../../../common/front-end-routing/routes/welcome/navigate-to-welcome.injectable";
+import Gutter from "../../gutter/gutter";
+import topBarItemsOnLeftSideInjectable from "./top-bar-items/top-bar-items-on-left-side.injectable";
 
 interface Dependencies {
-  items: IComputedValue<TopBarItem[]>;
+  itemsOnLeft: IComputedValue<TopBarItem[]>;
+  itemsOnRight: IComputedValue<TopBarItem[]>;
   toggleMaximizeWindow: () => void;
   watchHistoryState: () => () => void;
 }
 
 const NonInjectedTopBar = observer(
   ({
-    items,
+    itemsOnLeft,
+    itemsOnRight,
     toggleMaximizeWindow,
     watchHistoryState,
   }: Dependencies) => {
-    const elem = useRef<HTMLDivElement | null>(null);
-
-    const windowSizeToggle = (evt: React.MouseEvent) => {
-      if (elem.current === evt.target) {
-        toggleMaximizeWindow();
-      }
-    };
-
     useEffect(() => watchHistoryState(), []);
 
     return (
-      <div
+      <div className={styles.topBar} onDoubleClick={toggleMaximizeWindow}>
-        className={styles.topBar}
-        onDoubleClick={windowSizeToggle}
-        ref={elem}
-      >
         <div className={styles.items}>
-          {items.get().map((item) => {
+          <Map
-            const Component = item.Component;
+            items={itemsOnLeft.get()}
+            getSeparator={() => <Gutter size="sm" />}
+          >
+            {toItemWhichWorksWithWindowDraggingAndDoubleClicking}
+          </Map>
 
-            return <Component key={item.id} />;
+          <div className={styles.separator} />
-          })}
+
+          <Map
+            items={itemsOnRight.get()}
+            getSeparator={() => <Gutter size="sm" />}
+          >
+            {toItemWhichWorksWithWindowDraggingAndDoubleClicking}
+          </Map>
         </div>
       </div>
     );
@@ -57,8 +58,22 @@ const NonInjectedTopBar = observer(
 
 export const TopBar = withInjectables<Dependencies>(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,
+) => (
+  <div
+    className={styles.preventedDragging}
+    onDoubleClick={(event) => {
+      return event.stopPropagation();
+    }}
+  >
+    <item.Component />
+  </div>
+);