From 9f5b5821bf411259e71c527d3dbedc46036a8934 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20V=C3=A1clav=C3=ADk?= Date: Fri, 17 Jan 2025 12:58:49 +0100 Subject: [PATCH 1/2] fix(suite): fix draggable window header --- .../src/components/NewModal/NewModal.tsx | 1 + .../components/suite/Preloader/Preloader.tsx | 18 +++++++++-- .../components/suite/TrafficLightOffset.tsx | 30 +++++++++---------- .../suite/SwitchDevice/SwitchDeviceModal.tsx | 7 ++++- 4 files changed, 37 insertions(+), 19 deletions(-) diff --git a/packages/components/src/components/NewModal/NewModal.tsx b/packages/components/src/components/NewModal/NewModal.tsx index 6142dbcc1f1..f54431c696d 100644 --- a/packages/components/src/components/NewModal/NewModal.tsx +++ b/packages/components/src/components/NewModal/NewModal.tsx @@ -56,6 +56,7 @@ const Container = styled.div< overflow: hidden; background: ${mapElevationToBackground}; box-shadow: ${({ theme }) => theme.boxShadowElevated}; + -webkit-app-region: no-drag; ${withFrameProps} `; diff --git a/packages/suite/src/components/suite/Preloader/Preloader.tsx b/packages/suite/src/components/suite/Preloader/Preloader.tsx index 2db8119849a..db6c14b9236 100644 --- a/packages/suite/src/components/suite/Preloader/Preloader.tsx +++ b/packages/suite/src/components/suite/Preloader/Preloader.tsx @@ -31,6 +31,7 @@ import { WelcomeLayout } from '../layouts/WelcomeLayout/WelcomeLayout'; import { DeviceCompromised } from '../SecurityCheck/DeviceCompromised'; import { RouterAppWithParams } from '../../../constants/suite/routes'; import { useReportDeviceCompromised } from '../SecurityCheck/useReportDeviceCompromised'; +import { TrafficLightDraggableWindowHeader } from '../TrafficLightOffset'; const ROUTES_TO_SKIP_FIRMWARE_CHECK: RouterAppWithParams['app'][] = [ 'settings', @@ -50,9 +51,7 @@ const getFullscreenApp = (route: AppState['router']['route']): FC | undefined => } }; -// Preloader is a top level wrapper used in _app.tsx. -// Decides which content should be displayed basing on route and prerequisites. -export const Preloader = ({ children }: PropsWithChildren) => { +const usePreloaderData = ({ children }: PropsWithChildren) => { const lifecycle = useSelector(state => state.suite.lifecycle); const isTransportInitialized = useSelector(selectIsTransportInitialized); const router = useSelector(state => state.router); @@ -148,3 +147,16 @@ export const Preloader = ({ children }: PropsWithChildren) => { // everything is set. return {children}; }; + +// Preloader is a top level wrapper used in _app.tsx. +// Decides which content should be displayed basing on route and prerequisites. +export const Preloader = (props: PropsWithChildren) => { + const renderedComponent = usePreloaderData(props); + + return ( + <> + + {renderedComponent} + + ); +}; diff --git a/packages/suite/src/components/suite/TrafficLightOffset.tsx b/packages/suite/src/components/suite/TrafficLightOffset.tsx index f4a3dd56976..079eb60878f 100644 --- a/packages/suite/src/components/suite/TrafficLightOffset.tsx +++ b/packages/suite/src/components/suite/TrafficLightOffset.tsx @@ -13,9 +13,12 @@ type Props = { // See: https://github.com/electron/electron/issues/5678 // Visible all the time in the app -const ThinFixForNotBeingAbleToDragWindow = styled.div` + +const FixForNotBeingAbleToDragWindow = styled.div` + background: rgba(255, 0, 0, 0.1); -webkit-app-region: drag; - height: 16px; + pointer-events: none; + height: 64px; position: fixed; z-index: ${zIndices.windowControls}; top: 0; @@ -23,18 +26,21 @@ const ThinFixForNotBeingAbleToDragWindow = styled.div` width: 100%; `; -// Visible below content (but visible in the sidebar) -const ThickFixForNotBeingAbleToDragWindow = styled(ThinFixForNotBeingAbleToDragWindow)` - height: 64px; - z-index: unset; -`; - const Container = styled.div<{ $offset: number }>` ${({ $offset }) => `padding-top: ${$offset}px;`} width: 100%; height: 100%; `; +export const TrafficLightDraggableWindowHeader = ({ children, isVisible = true }: Props) => { + const isMac = isMacOs(); + const isDesktopApp = isDesktop(); + + if (!isVisible || !isMac || !isDesktopApp) return children; + + return ; +}; + // on Mac in desktop app we don't use window bar and close/maximize/minimize icons are positioned directly in the app export const TrafficLightOffset = ({ children, offset = 35, isVisible = true }: Props) => { const isMac = isMacOs(); @@ -42,11 +48,5 @@ export const TrafficLightOffset = ({ children, offset = 35, isVisible = true }: if (!isVisible || !isMac || !isDesktopApp) return children; - return ( - <> - - - {children} - - ); + return {children}; }; diff --git a/packages/suite/src/views/suite/SwitchDevice/SwitchDeviceModal.tsx b/packages/suite/src/views/suite/SwitchDevice/SwitchDeviceModal.tsx index 72b8933c1a6..6b8617b454a 100644 --- a/packages/suite/src/views/suite/SwitchDevice/SwitchDeviceModal.tsx +++ b/packages/suite/src/views/suite/SwitchDevice/SwitchDeviceModal.tsx @@ -17,6 +17,7 @@ type SwitchDeviceModalProps = { const Container = styled.div` width: 378px; + -webkit-app-region: no-drag; `; const initial = { @@ -51,7 +52,11 @@ export const SwitchDeviceModal = ({ width: 369, height: 'auto', }} - style={{ originX: 0, originY: 0, overflow: 'hidden' }} + style={{ + originX: 0, + originY: 0, + overflow: 'hidden', + }} > {children} From d30bde971e3ea634b866e8ef338573e6dd188548 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20V=C3=A1clav=C3=ADk?= Date: Tue, 21 Jan 2025 11:39:15 +0100 Subject: [PATCH 2/2] fix(suite): Move window dragging area to Main in suite-desktop --- packages/suite-desktop-ui/src/Main.tsx | 3 ++- .../components/suite/Preloader/Preloader.tsx | 18 +++--------------- .../components/suite/TrafficLightOffset.tsx | 6 ++---- packages/suite/src/components/suite/index.tsx | 2 ++ 4 files changed, 9 insertions(+), 20 deletions(-) diff --git a/packages/suite-desktop-ui/src/Main.tsx b/packages/suite-desktop-ui/src/Main.tsx index efbc6504ea7..40cdd832cee 100644 --- a/packages/suite-desktop-ui/src/Main.tsx +++ b/packages/suite-desktop-ui/src/Main.tsx @@ -14,7 +14,7 @@ import TrezorConnect from '@trezor/connect'; import { initStore } from 'src/reducers/store'; import { preloadStore } from 'src/support/suite/preloadStore'; import { Metadata } from 'src/components/suite/Metadata'; -import { Preloader, ToastContainer } from 'src/components/suite'; +import { Preloader, ToastContainer, TrafficLightDraggableWindowHeader } from 'src/components/suite'; import { ConnectedIntlProvider } from 'src/support/suite/ConnectedIntlProvider'; import Resize from 'src/support/suite/Resize'; import Autodetect from 'src/support/suite/Autodetect'; @@ -45,6 +45,7 @@ const Main = () => { // Todo: Enable when issues are fixed (ReactTruncate & BumpFee) // + diff --git a/packages/suite/src/components/suite/Preloader/Preloader.tsx b/packages/suite/src/components/suite/Preloader/Preloader.tsx index db6c14b9236..2db8119849a 100644 --- a/packages/suite/src/components/suite/Preloader/Preloader.tsx +++ b/packages/suite/src/components/suite/Preloader/Preloader.tsx @@ -31,7 +31,6 @@ import { WelcomeLayout } from '../layouts/WelcomeLayout/WelcomeLayout'; import { DeviceCompromised } from '../SecurityCheck/DeviceCompromised'; import { RouterAppWithParams } from '../../../constants/suite/routes'; import { useReportDeviceCompromised } from '../SecurityCheck/useReportDeviceCompromised'; -import { TrafficLightDraggableWindowHeader } from '../TrafficLightOffset'; const ROUTES_TO_SKIP_FIRMWARE_CHECK: RouterAppWithParams['app'][] = [ 'settings', @@ -51,7 +50,9 @@ const getFullscreenApp = (route: AppState['router']['route']): FC | undefined => } }; -const usePreloaderData = ({ children }: PropsWithChildren) => { +// Preloader is a top level wrapper used in _app.tsx. +// Decides which content should be displayed basing on route and prerequisites. +export const Preloader = ({ children }: PropsWithChildren) => { const lifecycle = useSelector(state => state.suite.lifecycle); const isTransportInitialized = useSelector(selectIsTransportInitialized); const router = useSelector(state => state.router); @@ -147,16 +148,3 @@ const usePreloaderData = ({ children }: PropsWithChildren) => { // everything is set. return {children}; }; - -// Preloader is a top level wrapper used in _app.tsx. -// Decides which content should be displayed basing on route and prerequisites. -export const Preloader = (props: PropsWithChildren) => { - const renderedComponent = usePreloaderData(props); - - return ( - <> - - {renderedComponent} - - ); -}; diff --git a/packages/suite/src/components/suite/TrafficLightOffset.tsx b/packages/suite/src/components/suite/TrafficLightOffset.tsx index 079eb60878f..72f8804cb77 100644 --- a/packages/suite/src/components/suite/TrafficLightOffset.tsx +++ b/packages/suite/src/components/suite/TrafficLightOffset.tsx @@ -11,11 +11,7 @@ type Props = { isVisible?: boolean; }; -// See: https://github.com/electron/electron/issues/5678 -// Visible all the time in the app - const FixForNotBeingAbleToDragWindow = styled.div` - background: rgba(255, 0, 0, 0.1); -webkit-app-region: drag; pointer-events: none; height: 64px; @@ -32,6 +28,8 @@ const Container = styled.div<{ $offset: number }>` height: 100%; `; +// See: https://github.com/electron/electron/issues/5678 +// Visible all the time in the app export const TrafficLightDraggableWindowHeader = ({ children, isVisible = true }: Props) => { const isMac = isMacOs(); const isDesktopApp = isDesktop(); diff --git a/packages/suite/src/components/suite/index.tsx b/packages/suite/src/components/suite/index.tsx index 67940402023..67821d9490d 100644 --- a/packages/suite/src/components/suite/index.tsx +++ b/packages/suite/src/components/suite/index.tsx @@ -47,6 +47,7 @@ import { QrCode } from './QrCode'; import { CoinBalance } from './CoinBalance'; import { DeviceAuthenticationExplainer } from './DeviceAuthenticationExplainer'; import { Preloader } from './Preloader/Preloader'; +import { TrafficLightDraggableWindowHeader } from './TrafficLightOffset'; import { PinMatrix } from './PinMatrix/PinMatrix'; import { UdevDownload } from './UdevDownload'; import { StakingFeature } from './StakingFeature'; @@ -100,6 +101,7 @@ export { CoinBalance, DeviceAuthenticationExplainer, Preloader, + TrafficLightDraggableWindowHeader, PinMatrix, UdevDownload, StakingFeature,