From ca096c52ee1efae741c81036c7317e7d13fc6cd0 Mon Sep 17 00:00:00 2001 From: loucass003 Date: Tue, 18 Jun 2024 19:54:00 +0200 Subject: [PATCH 1/4] Remove useLayout --- Cargo.lock | 2 +- gui/package.json | 1 + gui/src/App.tsx | 20 +-- gui/src/components/MainLayout.scss | 24 ++++ gui/src/components/MainLayout.tsx | 59 ++++----- gui/src/components/Navbar.tsx | 2 +- gui/src/components/commons/Button.tsx | 2 +- gui/src/components/home/Home.tsx | 2 +- .../onboarding/OnboardingLayout.scss | 12 ++ .../onboarding/OnboardingLayout.tsx | 31 ++--- .../onboarding/pages/ConnectTracker.scss | 27 ++++ .../onboarding/pages/ConnectTracker.tsx | 86 +++++-------- .../body-proportions/ManualProportions.tsx | 4 +- .../autobone-steps/CheckHeight.tsx | 2 +- .../pages/mounting/MountingSelectionMenu.tsx | 18 +-- .../trackers-assign/TrackerAssignment.tsx | 16 +-- .../trackers-assign/TrackerSelectionMenu.tsx | 115 +++++++++--------- .../components/settings/SettingsLayout.scss | 25 ++++ .../components/settings/SettingsLayout.tsx | 36 +++--- .../settings/SettingsPageLayout.tsx | 6 +- .../components/settings/SettingsSidebar.tsx | 2 +- gui/src/components/settings/pages/Serial.tsx | 71 +++++------ gui/src/hooks/layout.ts | 34 ------ gui/src/{index.css => index.scss} | 18 ++- gui/src/index.tsx | 2 +- pnpm-lock.yaml | 30 ++++- 26 files changed, 336 insertions(+), 311 deletions(-) create mode 100644 gui/src/components/MainLayout.scss create mode 100644 gui/src/components/onboarding/OnboardingLayout.scss create mode 100644 gui/src/components/onboarding/pages/ConnectTracker.scss create mode 100644 gui/src/components/settings/SettingsLayout.scss rename gui/src/{index.css => index.scss} (97%) diff --git a/Cargo.lock b/Cargo.lock index 0436f68b03..15550226a6 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -991,7 +991,7 @@ dependencies = [ "tokio", "tracing", "url", - "winreg 0.52.0", + "winreg", ] [[package]] diff --git a/gui/package.json b/gui/package.json index cd913ea35c..8878fc0f8e 100644 --- a/gui/package.json +++ b/gui/package.json @@ -98,6 +98,7 @@ "prettier": "^3.3.2", "pretty-quick": "^4.0.0", "rollup-plugin-visualizer": "^5.12.0", + "sass": "^1.77.5", "tailwind-gradient-mask-image": "^1.2.0", "tailwindcss": "^3.4.4", "vite": "^5.3.1" diff --git a/gui/src/App.tsx b/gui/src/App.tsx index 6185fd0b5a..9fdedf2081 100644 --- a/gui/src/App.tsx +++ b/gui/src/App.tsx @@ -6,11 +6,11 @@ import { Routes, } from 'react-router-dom'; import { Home } from './components/home/Home'; -import { MainLayoutRoute } from './components/MainLayout'; +import { MainLayout } from './components/MainLayout'; import { AppContextProvider } from './components/providers/AppContext'; import { GeneralSettings } from './components/settings/pages/GeneralSettings'; import { Serial } from './components/settings/pages/Serial'; -import { SettingsLayoutRoute } from './components/settings/SettingsLayout'; +import { SettingsLayout} from './components/settings/SettingsLayout'; import { useProvideWebsocketApi, WebSocketApiContext, @@ -75,33 +75,33 @@ function Layout() { + - + } /> + - + } /> + - + } /> + - + } > } /> diff --git a/gui/src/components/MainLayout.scss b/gui/src/components/MainLayout.scss new file mode 100644 index 0000000000..3cfcbcca3b --- /dev/null +++ b/gui/src/components/MainLayout.scss @@ -0,0 +1,24 @@ +.main-layout { + display: grid; + grid-template: + "t t" var(--topbar-h) + "s c" calc(100% - var(--topbar-h)) + / var(--navbar-w) calc(100% - var(--navbar-w)); + + &:has(.widgets) { + grid-template: + "t t t" var(--topbar-h) + "s c w" calc(100% - var(--topbar-h)) + / var(--navbar-w) calc(100% - var(--navbar-w) - var(--widget-w)) var(--widget-w); + } + + @screen mobile { + grid-template: + "t" var(--topbar-h) + "c" calc(100% - var(--topbar-h) - var(--navbar-h)) + "s" calc(var(--navbar-h)) + / 100%; + } +} + + diff --git a/gui/src/components/MainLayout.tsx b/gui/src/components/MainLayout.tsx index 73ebdceec4..3cd488eaa3 100644 --- a/gui/src/components/MainLayout.tsx +++ b/gui/src/components/MainLayout.tsx @@ -6,13 +6,13 @@ import { RpcMessage, SettingsRequestT, } from 'solarxr-protocol'; -import { useElemSize, useLayout } from '@/hooks/layout'; import { Navbar } from './Navbar'; import { TopBar } from './TopBar'; import { useWebsocketAPI } from '@/hooks/websocket-api'; import { WidgetsComponent } from './WidgetsComponent'; +import './MainLayout.scss'; -export function MainLayoutRoute({ +export function MainLayout({ children, background = true, widgets = true, @@ -23,9 +23,6 @@ export function MainLayoutRoute({ isMobile?: boolean; widgets?: boolean; }) { - const { height, ref: navRef } = useElemSize(); - const { layoutHeight, ref } = useLayout(); - const { layoutWidth, ref: refw } = useLayout(); const { sendRPCPacket } = useWebsocketAPI(); const [ProportionsLastPageOpen, setProportionsLastPageOpen] = useState(true); @@ -61,37 +58,33 @@ export function MainLayoutRoute({ }); return ( - <> - -
-
- {!isMobile && } +
+
+
+ +
+
+ +
+
+ {children} +
+ {!isMobile && widgets && (
-
- {children} -
- {!isMobile && widgets && ( -
- -
- )} +
-
-
{isMobile && }
+ )}
- +
); } diff --git a/gui/src/components/Navbar.tsx b/gui/src/components/Navbar.tsx index e5fd76d7ad..790ba204b2 100644 --- a/gui/src/components/Navbar.tsx +++ b/gui/src/components/Navbar.tsx @@ -110,7 +110,7 @@ export function Navbar() {
) : ( -
+
diff --git a/gui/src/components/commons/Button.tsx b/gui/src/components/commons/Button.tsx index 2a054db041..eb66eaa7cc 100644 --- a/gui/src/components/commons/Button.tsx +++ b/gui/src/components/commons/Button.tsx @@ -84,7 +84,7 @@ export function Button({ }; return classNames( variantsMap[variant], - 'focus:ring-4 text-center relative', + 'focus:ring-4 text-center relative flex items-center justify-center', { 'rounded-full p-2 text-center min-h-[35px] min-w-[35px]': rounded, 'rounded-md px-5 py-2.5': !rounded, diff --git a/gui/src/components/home/Home.tsx b/gui/src/components/home/Home.tsx index 1b74cd43e7..7af6ae6bf4 100644 --- a/gui/src/components/home/Home.tsx +++ b/gui/src/components/home/Home.tsx @@ -51,7 +51,7 @@ export function Home() {
status.prioritized) .length === 0 && 'hidden' )} diff --git a/gui/src/components/onboarding/OnboardingLayout.scss b/gui/src/components/onboarding/OnboardingLayout.scss new file mode 100644 index 0000000000..444dda32b7 --- /dev/null +++ b/gui/src/components/onboarding/OnboardingLayout.scss @@ -0,0 +1,12 @@ +.onboarding-layout { + display: grid; + grid-template: + "t" var(--topbar-h) + "c" calc(100% - var(--topbar-h)) + / 100% + ; + + @screen mobile { + --topbar-h: 74px; + } +} diff --git a/gui/src/components/onboarding/OnboardingLayout.tsx b/gui/src/components/onboarding/OnboardingLayout.tsx index 4fb33e5aa5..6fe2a44784 100644 --- a/gui/src/components/onboarding/OnboardingLayout.tsx +++ b/gui/src/components/onboarding/OnboardingLayout.tsx @@ -1,25 +1,26 @@ import { ReactNode, useState } from 'react'; -import { useLayout } from '@/hooks/layout'; import { useOnboarding } from '@/hooks/onboarding'; -import { MainLayoutRoute } from '@/components/MainLayout'; +import { MainLayout } from '@/components/MainLayout'; import { TopBar } from '@/components/TopBar'; import { useBreakpoint } from '@/hooks/breakpoint'; import { SkipSetupButton } from './SkipSetupButton'; import { SkipSetupWarningModal } from './SkipSetupWarningModal'; +import './OnboardingLayout.scss' + export function OnboardingLayout({ children }: { children: ReactNode }) { - const { layoutHeight, ref } = useLayout(); const { isMobile } = useBreakpoint('mobile'); const { state, skipSetup } = useOnboarding(); const [skipWarning, setSkipWarning] = useState(false); return !state.alonePage ? ( - <> - +
+
+ +
setSkipWarning(true)} >
- {children} +
+ {children} +
setSkipWarning(false)} isOpen={skipWarning} >
- +
) : ( - -
- {children} -
- + + {children} + ); } diff --git a/gui/src/components/onboarding/pages/ConnectTracker.scss b/gui/src/components/onboarding/pages/ConnectTracker.scss new file mode 100644 index 0000000000..697f68a6d1 --- /dev/null +++ b/gui/src/components/onboarding/pages/ConnectTracker.scss @@ -0,0 +1,27 @@ +:root { + --connect-tracker-layout-sidebar: 350px; + --connect-tracker-layout-top: 20px; + + @screen lg { + --connect-tracker-layout-sidebar: 400px + } +} + + +.connect-tracker-layout { + display: grid; + grid-template: + "s t" var(--connect-tracker-layout-top) + "s c" calc(100% - var(--connect-tracker-layout-top)) + / calc(var(--connect-tracker-layout-sidebar)) calc(100% - var(--connect-tracker-layout-sidebar)) + ; + + @screen mobile { + grid-template: + "s" auto + "t" auto + "c" auto + / 100% + ; + } +} diff --git a/gui/src/components/onboarding/pages/ConnectTracker.tsx b/gui/src/components/onboarding/pages/ConnectTracker.tsx index 4917216be7..754c09603f 100644 --- a/gui/src/components/onboarding/pages/ConnectTracker.tsx +++ b/gui/src/components/onboarding/pages/ConnectTracker.tsx @@ -11,7 +11,6 @@ import { WifiProvisioningStatus, WifiProvisioningStatusResponseT, } from 'solarxr-protocol'; -import { useLayout } from '@/hooks/layout'; import { useOnboarding } from '@/hooks/onboarding'; import { useTrackers } from '@/hooks/tracker'; import { useWebsocketAPI } from '@/hooks/websocket-api'; @@ -23,7 +22,7 @@ import { TipBox } from '@/components/commons/TipBox'; import { Typography } from '@/components/commons/Typography'; import { TrackerCard } from '@/components/tracker/TrackerCard'; import { useBnoExists } from '@/hooks/imu-logic'; -import { useBreakpoint } from '@/hooks/breakpoint'; +import './ConnectTracker.scss'; const BOTTOM_HEIGHT = 80; @@ -58,9 +57,7 @@ const statusProgressMap = { }; export function ConnectTrackersPage() { - const { isMobile } = useBreakpoint('mobile'); const { l10n } = useLocalization(); - const { layoutHeight, ref } = useLayout(); const { useConnectedIMUTrackers } = useTrackers(); const { applyProgress, state } = useOnboarding(); const navigate = useNavigate(); @@ -146,9 +143,9 @@ export function ConnectTrackersPage() { ); return ( -
-
-
+ <> +
+
{l10n.getString('onboarding-connect_tracker-title')} @@ -159,13 +156,6 @@ export function ConnectTrackersPage() { {l10n.getString('onboarding-connect_tracker-description-p1-v1')}
- {/* - I have other types of trackers - */}
- {/* */} {l10n.getString(statusLabelMap[provisioningStatus])} @@ -243,51 +230,40 @@ export function ConnectTrackersPage() {
-
+
{l10n.getString('onboarding-connect_tracker-connected_trackers', { amount: connectedIMUTrackers.length, })} - -
-
- {Array.from({ - ...connectedIMUTrackers, - length: Math.max(connectedIMUTrackers.length, 1), - }).map((tracker, index) => ( -
- {!tracker && ( -
- )} - {tracker && ( - - )} -
- ))} -
+
+
+
+ {Array.from({ + ...connectedIMUTrackers, + length: Math.max(connectedIMUTrackers.length, 1), + }).map((tracker, index) => ( +
+ {!tracker && ( +
+ )} + {tracker && ( + + )} +
+ ))}
-
+ ); } diff --git a/gui/src/components/onboarding/pages/body-proportions/ManualProportions.tsx b/gui/src/components/onboarding/pages/body-proportions/ManualProportions.tsx index 68121b5ec5..55a0ad7855 100644 --- a/gui/src/components/onboarding/pages/body-proportions/ManualProportions.tsx +++ b/gui/src/components/onboarding/pages/body-proportions/ManualProportions.tsx @@ -66,11 +66,11 @@ export function ManualProportionsPage() { return ( <> -
+
-
+
{l10n.getString('onboarding-manual_proportions-title')} diff --git a/gui/src/components/onboarding/pages/body-proportions/autobone-steps/CheckHeight.tsx b/gui/src/components/onboarding/pages/body-proportions/autobone-steps/CheckHeight.tsx index 273e2a2f0d..4a97d0ab58 100644 --- a/gui/src/components/onboarding/pages/body-proportions/autobone-steps/CheckHeight.tsx +++ b/gui/src/components/onboarding/pages/body-proportions/autobone-steps/CheckHeight.tsx @@ -105,7 +105,7 @@ export function CheckHeight({ -
+
-
-
-
-
- {/* {l10n.getString('tips-find_tracker')} */} -
-
-
diff --git a/gui/src/components/settings/SettingsLayout.scss b/gui/src/components/settings/SettingsLayout.scss new file mode 100644 index 0000000000..dde7ff1d91 --- /dev/null +++ b/gui/src/components/settings/SettingsLayout.scss @@ -0,0 +1,25 @@ +:root { + --settings-sidebar-w: 200px +} + +.settings-layout { + display: grid; + grid-template: + "t t t" var(--topbar-h) + "n s c" calc(100% - var(--topbar-h)) + / var(--navbar-w) var(--settings-sidebar-w) calc(100% - var(--navbar-w) - var(--settings-sidebar-w)) + ; + + @screen lg { + --settings-sidebar-w: 270px + } + + @screen mobile { + grid-template: + "t" var(--topbar-h) + "c" calc(100% - var(--topbar-h) - var(--navbar-h)) + "n" calc(var(--navbar-h)) + / 100%; + } + +} diff --git a/gui/src/components/settings/SettingsLayout.tsx b/gui/src/components/settings/SettingsLayout.tsx index 4dd40f701a..4c15eec539 100644 --- a/gui/src/components/settings/SettingsLayout.tsx +++ b/gui/src/components/settings/SettingsLayout.tsx @@ -1,5 +1,4 @@ import { ReactNode, useEffect } from 'react'; -import { useElemSize, useLayout } from '@/hooks/layout'; import { Navbar } from '@/components/Navbar'; import { TopBar } from '@/components/TopBar'; import { SettingsSidebar } from './SettingsSidebar'; @@ -8,6 +7,7 @@ import { Dropdown } from '@/components/commons/Dropdown'; import { useForm } from 'react-hook-form'; import { useLocalization } from '@fluent/react'; import { useLocation, useNavigate } from 'react-router-dom'; +import './SettingsLayout.scss' export function SettingSelectorMobile() { const { l10n } = useLocalization(); @@ -84,29 +84,23 @@ export function SettingSelectorMobile() { ); } -export function SettingsLayoutRoute({ children }: { children: ReactNode }) { - const { layoutHeight, ref } = useLayout(); - const { height, ref: navRef } = useElemSize(); +export function SettingsLayout({ children }: { children: ReactNode }) { const { isMobile } = useBreakpoint('mobile'); return ( <> - -
-
- {!isMobile && } -
- {!isMobile && } -
- {isMobile && } -
- {children} -
-
{isMobile && }
-
-
+
+
+ +
+
+ +
+
+ +
+
+ {isMobile && } + {children}
diff --git a/gui/src/components/settings/SettingsPageLayout.tsx b/gui/src/components/settings/SettingsPageLayout.tsx index 7dfff4caf9..29329894fd 100644 --- a/gui/src/components/settings/SettingsPageLayout.tsx +++ b/gui/src/components/settings/SettingsPageLayout.tsx @@ -29,8 +29,8 @@ export function SettingsPageLayout({ '.overflow-y-auto' ) as HTMLElement | null; if (closestScroll) { - // The 40 is just enough padding for making the scroll look perfect - const topPadding = isMobile ? 80 : 40; + // The 45 is just enough padding for making the scroll look perfect + const topPadding = isMobile ? 80 : 45; closestScroll.scroll({ top: elem.offsetTop - topPadding, behavior: 'smooth', @@ -58,7 +58,7 @@ export function SettingsPagePaneLayout({ return (
+
{l10n.getString('settings-sidebar-title')} diff --git a/gui/src/components/settings/pages/Serial.tsx b/gui/src/components/settings/pages/Serial.tsx index 23929d2a8a..73a8fba45c 100644 --- a/gui/src/components/settings/pages/Serial.tsx +++ b/gui/src/components/settings/pages/Serial.tsx @@ -14,7 +14,6 @@ import { SerialUpdateResponseT, SerialTrackerGetWifiScanRequestT, } from 'solarxr-protocol'; -import { useElemSize, useLayout } from '@/hooks/layout'; import { useWebsocketAPI } from '@/hooks/websocket-api'; import { Button } from '@/components/commons/Button'; import { Dropdown } from '@/components/commons/Dropdown'; @@ -29,20 +28,12 @@ export interface SerialForm { } export function Serial() { - const { - layoutHeight, - layoutWidth, - ref: consoleRef, - } = useLayout(); const { isMobile } = useBreakpoint('mobile'); const { l10n } = useLocalization(); const { state } = useLocation(); - const toolbarRef = useRef(null); - const { height } = useElemSize(toolbarRef); - const { useRPCPacket, sendRPCPacket } = useWebsocketAPI(); - // const consoleRef = useRef(null); + const consoleRef = useRef(null); const [consoleContent, setConsole] = useState(''); const [isSerialOpen, setSerialOpen] = useState(false); @@ -100,7 +91,8 @@ export function Serial() { setSerialOpen(true); } - if (data.log && consoleRef.current) { + if (data.log) { + console.log(data.log) setConsole((console) => console + data.log); } } @@ -124,6 +116,8 @@ export function Serial() { consoleRef.current.scrollTo({ top: consoleRef.current.scrollHeight, }); + + console.log(consoleContent) }, [consoleContent]); useEffect(() => { @@ -191,8 +185,8 @@ export function Serial() {
-
-
+
+
{l10n.getString('settings-serial')} @@ -207,16 +201,12 @@ export function Serial() { ))}
-
+
-
+ 
                 {isSerialOpen
                   ? consoleContent
@@ -224,9 +214,8 @@ export function Serial() {
-
-
-
+
+
@@ -242,23 +231,26 @@ export function Serial() { - {isMobile && ( - ({ - label: device.name?.toString() || 'error', - value: device.port?.toString() || 'error', - }))} - > - )} + {/* {isMobile && ( */} +
+ ({ + label: device.name?.toString() || 'error', + value: device.port?.toString() || 'error', + }))} + > +
+ + {/* )} */}
- {!isMobile && ( + {/* {!isMobile && ( - )} + )} */}
-
diff --git a/gui/src/hooks/layout.ts b/gui/src/hooks/layout.ts index 27eed7d33e..f78617e70c 100644 --- a/gui/src/hooks/layout.ts +++ b/gui/src/hooks/layout.ts @@ -1,39 +1,5 @@ import { MutableRefObject, useLayoutEffect, useRef, useState } from 'react'; -export function useLayout() { - const [layoutHeight, setLayoutHeigt] = useState(window.innerHeight); - const [layoutWidth, setLayoutWidth] = useState(window.innerWidth); - const ref = useRef(null); - - const computeLayoutHeight = (windowHeight: number, windowWidth: number) => { - if (ref.current) { - setLayoutHeigt(windowHeight - ref.current.getBoundingClientRect().top); - setLayoutWidth(windowWidth - ref.current.getBoundingClientRect().left); - } - }; - - const onWindowResize = () => { - computeLayoutHeight(window.innerHeight, window.innerWidth); - }; - - useLayoutEffect(() => { - window.addEventListener('resize', onWindowResize); - // Fix a bug where the layout would not update when the window is unfocused then focused again - window.addEventListener('focus', onWindowResize); - computeLayoutHeight(window.innerHeight, window.innerWidth); - return () => { - window.removeEventListener('focus', onWindowResize); - window.removeEventListener('resize', onWindowResize); - }; - }, []); - - return { - layoutHeight, - layoutWidth, - ref, - }; -} - export function useElemSize( forwardRef?: MutableRefObject ) { diff --git a/gui/src/index.css b/gui/src/index.scss similarity index 97% rename from gui/src/index.css rename to gui/src/index.scss index 072f516c16..bec802418d 100644 --- a/gui/src/index.css +++ b/gui/src/index.scss @@ -4,15 +4,14 @@ body { font-variant-numeric: tabular-nums; - font-family: var(--font-name), 'Noto Sans CJK', sans-serif, 'Twemoji Chromium', - emoji; + font-family: var(--font-name), 'Noto Sans CJK', sans-serif, 'Twemoji Chromium', emoji; width: 100vw; height: 100vh; user-select: none; background: theme('colors.background.20'); /*Scrollbar for firefox */ - scrollbar-color: theme('colors.background.50') theme('colors.background.60'); + scrollbar-color: theme('colors.background.50') transparent; scrollbar-width: thin; } @@ -86,6 +85,16 @@ body { :root { overflow: hidden; background: theme('colors.background.20'); + + --navbar-w: 101px; + --widget-w: 274px; + --topbar-h: 38px; + + + @screen mobile { + --topbar-h: 44px; + --navbar-h: 90px; + } } /* Colors have to be in RGB format currently */ @@ -338,6 +347,7 @@ body { border-radius: 50px; } + ::-webkit-scrollbar-thumb { background: theme('colors.background.50'); border-radius: 50px; @@ -368,3 +378,5 @@ input::-ms-clear { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } + + diff --git a/gui/src/index.tsx b/gui/src/index.tsx index e993e3dcc5..666cb682e0 100644 --- a/gui/src/index.tsx +++ b/gui/src/index.tsx @@ -5,7 +5,7 @@ import * as ReactDOMClient from 'react-dom/client'; import Modal from 'react-modal'; import App from './App'; import { AppLocalizationProvider } from './i18n/config'; -import './index.css'; +import './index.scss'; Modal.setAppElement('#root'); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 20c9aa4f76..2df916ea54 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -55,7 +55,7 @@ importers: version: 2.0.0-beta.5 '@vitejs/plugin-react': specifier: ^4.3.1 - version: 4.3.1(vite@5.3.1(@types/node@20.14.2)(terser@5.31.1)) + version: 4.3.1(vite@5.3.1(@types/node@20.14.2)(sass@1.77.6)(terser@5.31.1)) browser-fs-access: specifier: ^0.35.0 version: 0.35.0 @@ -210,6 +210,9 @@ importers: rollup-plugin-visualizer: specifier: ^5.12.0 version: 5.12.0(rollup@4.18.0) + sass: + specifier: ^1.77.5 + version: 1.77.6 tailwind-gradient-mask-image: specifier: ^1.2.0 version: 1.2.0 @@ -218,7 +221,7 @@ importers: version: 3.4.4(ts-node@9.1.1(typescript@5.4.5)) vite: specifier: ^5.3.1 - version: 5.3.1(@types/node@20.14.2)(terser@5.31.1) + version: 5.3.1(@types/node@20.14.2)(sass@1.77.6)(terser@5.31.1) solarxr-protocol: dependencies: @@ -3011,6 +3014,9 @@ packages: immer@9.0.21: resolution: {integrity: sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==} + immutable@4.3.6: + resolution: {integrity: sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==} + import-fresh@3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} engines: {node: '>=6'} @@ -4125,6 +4131,11 @@ packages: sanitize.css@13.0.0: resolution: {integrity: sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==} + sass@1.77.6: + resolution: {integrity: sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==} + engines: {node: '>=14.0.0'} + hasBin: true + scheduler@0.21.0: resolution: {integrity: sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==} @@ -6578,14 +6589,14 @@ snapshots: '@use-gesture/core': 10.3.1 react: 18.3.1 - '@vitejs/plugin-react@4.3.1(vite@5.3.1(@types/node@20.14.2)(terser@5.31.1))': + '@vitejs/plugin-react@4.3.1(vite@5.3.1(@types/node@20.14.2)(sass@1.77.6)(terser@5.31.1))': dependencies: '@babel/core': 7.24.7 '@babel/plugin-transform-react-jsx-self': 7.24.7(@babel/core@7.24.7) '@babel/plugin-transform-react-jsx-source': 7.24.7(@babel/core@7.24.7) '@types/babel__core': 7.20.5 react-refresh: 0.14.2 - vite: 5.3.1(@types/node@20.14.2)(terser@5.31.1) + vite: 5.3.1(@types/node@20.14.2)(sass@1.77.6)(terser@5.31.1) transitivePeerDependencies: - supports-color @@ -8007,6 +8018,8 @@ snapshots: immer@9.0.21: {} + immutable@4.3.6: {} + import-fresh@3.3.0: dependencies: parent-module: 1.0.1 @@ -9165,6 +9178,12 @@ snapshots: sanitize.css@13.0.0: {} + sass@1.77.6: + dependencies: + chokidar: 3.6.0 + immutable: 4.3.6 + source-map-js: 1.2.0 + scheduler@0.21.0: dependencies: loose-envify: 1.4.0 @@ -9615,7 +9634,7 @@ snapshots: uuid@9.0.1: {} - vite@5.3.1(@types/node@20.14.2)(terser@5.31.1): + vite@5.3.1(@types/node@20.14.2)(sass@1.77.6)(terser@5.31.1): dependencies: esbuild: 0.21.5 postcss: 8.4.38 @@ -9623,6 +9642,7 @@ snapshots: optionalDependencies: '@types/node': 20.14.2 fsevents: 2.3.3 + sass: 1.77.6 terser: 5.31.1 warning@4.0.3: From aa3e99d141edf8dd7a6ac06a9dfb02737eaa7880 Mon Sep 17 00:00:00 2001 From: loucass003 Date: Tue, 18 Jun 2024 20:08:37 +0200 Subject: [PATCH 2/4] Lint --- gui/src/App.tsx | 2 +- .../onboarding/OnboardingLayout.tsx | 18 +- .../onboarding/pages/ConnectTracker.tsx | 2 - .../pages/mounting/MountingSelectionMenu.tsx | 150 ++++++------- .../trackers-assign/TrackerAssignment.tsx | 207 +++++++++--------- .../trackers-assign/TrackerSelectionMenu.tsx | 5 +- .../components/settings/SettingsLayout.tsx | 9 +- gui/src/components/settings/pages/Serial.tsx | 67 ++---- 8 files changed, 210 insertions(+), 250 deletions(-) diff --git a/gui/src/App.tsx b/gui/src/App.tsx index 9fdedf2081..19982086de 100644 --- a/gui/src/App.tsx +++ b/gui/src/App.tsx @@ -10,7 +10,7 @@ import { MainLayout } from './components/MainLayout'; import { AppContextProvider } from './components/providers/AppContext'; import { GeneralSettings } from './components/settings/pages/GeneralSettings'; import { Serial } from './components/settings/pages/Serial'; -import { SettingsLayout} from './components/settings/SettingsLayout'; +import { SettingsLayout } from './components/settings/SettingsLayout'; import { useProvideWebsocketApi, WebSocketApiContext, diff --git a/gui/src/components/onboarding/OnboardingLayout.tsx b/gui/src/components/onboarding/OnboardingLayout.tsx index 6fe2a44784..1949e70dd8 100644 --- a/gui/src/components/onboarding/OnboardingLayout.tsx +++ b/gui/src/components/onboarding/OnboardingLayout.tsx @@ -5,8 +5,7 @@ import { TopBar } from '@/components/TopBar'; import { useBreakpoint } from '@/hooks/breakpoint'; import { SkipSetupButton } from './SkipSetupButton'; import { SkipSetupWarningModal } from './SkipSetupWarningModal'; -import './OnboardingLayout.scss' - +import './OnboardingLayout.scss'; export function OnboardingLayout({ children }: { children: ReactNode }) { const { isMobile } = useBreakpoint('mobile'); @@ -15,13 +14,10 @@ export function OnboardingLayout({ children }: { children: ReactNode }) { return !state.alonePage ? (
-
- -
-
+
+ +
+
setSkipWarning(true)} >
-
- {children} -
+
{children}
setSkipWarning(false)} diff --git a/gui/src/components/onboarding/pages/ConnectTracker.tsx b/gui/src/components/onboarding/pages/ConnectTracker.tsx index 754c09603f..816b7d985f 100644 --- a/gui/src/components/onboarding/pages/ConnectTracker.tsx +++ b/gui/src/components/onboarding/pages/ConnectTracker.tsx @@ -24,8 +24,6 @@ import { TrackerCard } from '@/components/tracker/TrackerCard'; import { useBnoExists } from '@/hooks/imu-logic'; import './ConnectTracker.scss'; -const BOTTOM_HEIGHT = 80; - const statusLabelMap = { [WifiProvisioningStatus.NONE]: 'onboarding-connect_tracker-connection_status-none', diff --git a/gui/src/components/onboarding/pages/mounting/MountingSelectionMenu.tsx b/gui/src/components/onboarding/pages/mounting/MountingSelectionMenu.tsx index e902208d7b..a33b6cee2d 100644 --- a/gui/src/components/onboarding/pages/mounting/MountingSelectionMenu.tsx +++ b/gui/src/components/onboarding/pages/mounting/MountingSelectionMenu.tsx @@ -184,87 +184,79 @@ export function MountingSelectionMenu({ )} >
- + {l10n.getString('mounting_selection_menu')} -
- - - - - - onDirectionSelected(rotationToQuatMap.LEFT)} - id="tracker-rotation-left" - trackerTransform="translate(75, 0) scale(-1, 1)" - > - - onDirectionSelected(rotationToQuatMap.FRONT_LEFT) - } - id="tracker-rotation_left_front" - noText={true} - trackerTransform="translate(-2, 175) rotate(-135)" - trackerWidth={7} - > - onDirectionSelected(rotationToQuatMap.FRONT)} - d="M0 0-44-89A99 99 0 0 1 44-89Z" - id="tracker-rotation-front" - trackerTransform="translate(0, 75) rotate(-90)" - > - - onDirectionSelected(rotationToQuatMap.FRONT_RIGHT) - } - id="tracker-rotation-front_right" - noText={true} - trackerTransform="translate(73, 0) rotate(-45)" - trackerWidth={7} - > - onDirectionSelected(rotationToQuatMap.RIGHT)} - id="tracker-rotation-right" - trackerTransform="translate(175,0)" - > - - onDirectionSelected(rotationToQuatMap.BACK_RIGHT) - } - id="tracker-rotation-back_right" - noText={true} - trackerTransform="translate(252, 75) rotate(45)" - trackerWidth={7} - > - onDirectionSelected(rotationToQuatMap.BACK)} - id="tracker-rotation-back" - trackerTransform="translate(250, 175) rotate(90)" - > - - onDirectionSelected(rotationToQuatMap.BACK_LEFT) - } - id="tracker-rotation-back_left" - noText={true} - trackerTransform="translate(177, 250) rotate(135)" - trackerWidth={7} - > - - +
+ + + + + + onDirectionSelected(rotationToQuatMap.LEFT)} + id="tracker-rotation-left" + trackerTransform="translate(75, 0) scale(-1, 1)" + > + + onDirectionSelected(rotationToQuatMap.FRONT_LEFT) + } + id="tracker-rotation_left_front" + noText={true} + trackerTransform="translate(-2, 175) rotate(-135)" + trackerWidth={7} + > + onDirectionSelected(rotationToQuatMap.FRONT)} + d="M0 0-44-89A99 99 0 0 1 44-89Z" + id="tracker-rotation-front" + trackerTransform="translate(0, 75) rotate(-90)" + > + + onDirectionSelected(rotationToQuatMap.FRONT_RIGHT) + } + id="tracker-rotation-front_right" + noText={true} + trackerTransform="translate(73, 0) rotate(-45)" + trackerWidth={7} + > + onDirectionSelected(rotationToQuatMap.RIGHT)} + id="tracker-rotation-right" + trackerTransform="translate(175,0)" + > + + onDirectionSelected(rotationToQuatMap.BACK_RIGHT) + } + id="tracker-rotation-back_right" + noText={true} + trackerTransform="translate(252, 75) rotate(45)" + trackerWidth={7} + > + onDirectionSelected(rotationToQuatMap.BACK)} + id="tracker-rotation-back" + trackerTransform="translate(250, 175) rotate(90)" + > + onDirectionSelected(rotationToQuatMap.BACK_LEFT)} + id="tracker-rotation-back_left" + noText={true} + trackerTransform="translate(177, 250) rotate(135)" + trackerWidth={7} + > + +
closeChokerWarning(true)} accept={() => closeChokerWarning(false)} > -
-
- - {l10n.getString('onboarding-assign_trackers-title')} - - - {l10n.getString('onboarding-assign_trackers-description')} - -
- - {l10n.getString('onboarding-assign_trackers-assigned', { - assigned: assignedTrackers.length, - trackers: trackers.length, - })} - -
- {l10n.getString('tips-find_tracker')} - {!!firstError && ( -
-
- {firstError.label} -
-
- )} -
- {Object.entries(ASSIGN_MODE_OPTIONS).map( - ([mode, trackersCount]) => ( - trackersCount && - mode !== AssignMode.All - } - className="hidden" - > -
-
- - {l10n.getString( - 'onboarding-assign_trackers-option-amount', - { trackersCount } - )} - -
-
- - {l10n.getString( - 'onboarding-assign_trackers-option-label', - { mode } - )} - - - {l10n.getString( - 'onboarding-assign_trackers-option-description', - { mode } - )} - -
-
- - ) - )} - -
-
- {!state.alonePage && ( - <> - - - - )} +
+
+ + {l10n.getString('onboarding-assign_trackers-title')} + + + {l10n.getString('onboarding-assign_trackers-description')} + +
+ + {l10n.getString('onboarding-assign_trackers-assigned', { + assigned: assignedTrackers.length, + trackers: trackers.length, + })} + +
+ {l10n.getString('tips-find_tracker')} + {!!firstError && ( +
+
+ {firstError.label}
-
- -
+ )} +
+ {Object.entries(ASSIGN_MODE_OPTIONS).map( + ([mode, trackersCount]) => ( + trackersCount && + mode !== AssignMode.All + } + className="hidden" + > +
+
+ + {l10n.getString( + 'onboarding-assign_trackers-option-amount', + { trackersCount } + )} + +
+
+ + {l10n.getString( + 'onboarding-assign_trackers-option-label', + { mode } + )} + + + {l10n.getString( + 'onboarding-assign_trackers-option-description', + { mode } + )} + +
+
+ + ) + )} + +
+
+ {!state.alonePage && ( + <> + + + + )} +
+
+
+
+
); } diff --git a/gui/src/components/onboarding/pages/trackers-assign/TrackerSelectionMenu.tsx b/gui/src/components/onboarding/pages/trackers-assign/TrackerSelectionMenu.tsx index 446777345c..d006f595fe 100644 --- a/gui/src/components/onboarding/pages/trackers-assign/TrackerSelectionMenu.tsx +++ b/gui/src/components/onboarding/pages/trackers-assign/TrackerSelectionMenu.tsx @@ -105,10 +105,7 @@ export function TrackerSelectionMenu({ ))}
-
+
-
+
-
+
{isMobile && } {children}
diff --git a/gui/src/components/settings/pages/Serial.tsx b/gui/src/components/settings/pages/Serial.tsx index 73a8fba45c..a3d86949ad 100644 --- a/gui/src/components/settings/pages/Serial.tsx +++ b/gui/src/components/settings/pages/Serial.tsx @@ -21,14 +21,12 @@ import { Typography } from '@/components/commons/Typography'; import { Localized, useLocalization } from '@fluent/react'; import { BaseModal } from '@/components/commons/BaseModal'; import { WarningBox } from '@/components/commons/TipBox'; -import { useBreakpoint } from '@/hooks/breakpoint'; export interface SerialForm { port: string; } export function Serial() { - const { isMobile } = useBreakpoint('mobile'); const { l10n } = useLocalization(); const { state } = useLocation(); @@ -92,7 +90,7 @@ export function Serial() { } if (data.log) { - console.log(data.log) + console.log(data.log); setConsole((console) => console + data.log); } } @@ -117,7 +115,7 @@ export function Serial() { top: consoleRef.current.scrollHeight, }); - console.log(consoleContent) + console.log(consoleContent); }, [consoleContent]); useEffect(() => { @@ -214,55 +212,38 @@ export function Serial() {
-
-
- - - - - {/* {isMobile && ( */} -
- ({ - label: device.name?.toString() || 'error', - value: device.port?.toString() || 'error', - }))} - > -
- - {/* )} */} -
- - {/* {!isMobile && ( +
+
+ + + + + {/* {isMobile && ( */} +
({ label: device.name?.toString() || 'error', value: device.port?.toString() || 'error', }))} > - )} */} +
+
From cc3c0fc8dd1a9973ffeea0a992dd505d36d21d18 Mon Sep 17 00:00:00 2001 From: loucass003 Date: Mon, 24 Jun 2024 18:53:57 +0200 Subject: [PATCH 3/4] Make prettier check for scss and apply sugestions --- gui/package.json | 4 +- gui/src/components/MainLayout.scss | 38 ++-- .../onboarding/OnboardingLayout.scss | 17 +- .../onboarding/pages/ConnectTracker.scss | 39 ++-- .../onboarding/pages/ConnectTracker.tsx | 214 +++++++++--------- .../components/settings/SettingsLayout.scss | 36 +-- gui/src/components/settings/pages/Serial.tsx | 4 - gui/src/index.scss | 7 +- 8 files changed, 173 insertions(+), 186 deletions(-) diff --git a/gui/package.json b/gui/package.json index 8878fc0f8e..3ff989ac47 100644 --- a/gui/package.json +++ b/gui/package.json @@ -49,9 +49,9 @@ "dev": "tauri dev", "skipbundler": "tauri build --no-bundle", "tauri": "tauri", - "lint": "tsc --noEmit && eslint --max-warnings=0 \"src/**/*.{js,jsx,ts,tsx,json}\" && prettier --check \"src/**/*.{js,jsx,ts,tsx,css,md,json}\"", + "lint": "tsc --noEmit && eslint --max-warnings=0 \"src/**/*.{js,jsx,ts,tsx,json}\" && prettier --check \"src/**/*.{js,jsx,ts,tsx,css,scss,md,json}\"", "lint:fix": "tsc --noEmit && eslint --fix --max-warnings=0 \"src/**/*.{js,jsx,ts,tsx,json}\" && pnpm run format", - "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,md,json}\"", + "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,scss,md,json}\"", "preview-vite": "vite preview", "javaversion-build": "cd src-tauri/src/ && javac JavaVersion.java && jar cvfe JavaVersion.jar JavaVersion JavaVersion.class" }, diff --git a/gui/src/components/MainLayout.scss b/gui/src/components/MainLayout.scss index 3cfcbcca3b..7ab819adbd 100644 --- a/gui/src/components/MainLayout.scss +++ b/gui/src/components/MainLayout.scss @@ -1,24 +1,22 @@ .main-layout { - display: grid; - grid-template: - "t t" var(--topbar-h) - "s c" calc(100% - var(--topbar-h)) - / var(--navbar-w) calc(100% - var(--navbar-w)); + display: grid; + grid-template: + 't t' var(--topbar-h) + 's c' calc(100% - var(--topbar-h)) + / var(--navbar-w) calc(100% - var(--navbar-w)); - &:has(.widgets) { - grid-template: - "t t t" var(--topbar-h) - "s c w" calc(100% - var(--topbar-h)) - / var(--navbar-w) calc(100% - var(--navbar-w) - var(--widget-w)) var(--widget-w); - } + &:has(.widgets) { + grid-template: + 't t t' var(--topbar-h) + 's c w' calc(100% - var(--topbar-h)) + / var(--navbar-w) calc(100% - var(--navbar-w) - var(--widget-w)) var(--widget-w); + } - @screen mobile { - grid-template: - "t" var(--topbar-h) - "c" calc(100% - var(--topbar-h) - var(--navbar-h)) - "s" calc(var(--navbar-h)) - / 100%; - } + @screen mobile { + grid-template: + 't' var(--topbar-h) + 'c' calc(100% - var(--topbar-h) - var(--navbar-h)) + 's' calc(var(--navbar-h)) + / 100%; + } } - - diff --git a/gui/src/components/onboarding/OnboardingLayout.scss b/gui/src/components/onboarding/OnboardingLayout.scss index 444dda32b7..1312b056b3 100644 --- a/gui/src/components/onboarding/OnboardingLayout.scss +++ b/gui/src/components/onboarding/OnboardingLayout.scss @@ -1,12 +1,11 @@ .onboarding-layout { - display: grid; - grid-template: - "t" var(--topbar-h) - "c" calc(100% - var(--topbar-h)) - / 100% - ; + display: grid; + grid-template: + 't' var(--topbar-h) + 'c' calc(100% - var(--topbar-h)) + / 100%; - @screen mobile { - --topbar-h: 74px; - } + @screen mobile { + --topbar-h: 74px; + } } diff --git a/gui/src/components/onboarding/pages/ConnectTracker.scss b/gui/src/components/onboarding/pages/ConnectTracker.scss index 697f68a6d1..c44a973331 100644 --- a/gui/src/components/onboarding/pages/ConnectTracker.scss +++ b/gui/src/components/onboarding/pages/ConnectTracker.scss @@ -1,27 +1,26 @@ :root { - --connect-tracker-layout-sidebar: 350px; - --connect-tracker-layout-top: 20px; + --connect-tracker-layout-sidebar: 350px; + --connect-tracker-layout-top: 20px; - @screen lg { - --connect-tracker-layout-sidebar: 400px - } + @screen lg { + --connect-tracker-layout-sidebar: 400px; + } } - .connect-tracker-layout { - display: grid; - grid-template: - "s t" var(--connect-tracker-layout-top) - "s c" calc(100% - var(--connect-tracker-layout-top)) - / calc(var(--connect-tracker-layout-sidebar)) calc(100% - var(--connect-tracker-layout-sidebar)) - ; + display: grid; + grid-template: + 's t' var(--connect-tracker-layout-top) + 's c' calc(100% - var(--connect-tracker-layout-top)) + / calc(var(--connect-tracker-layout-sidebar)) calc(100% - var( + --connect-tracker-layout-sidebar + )); - @screen mobile { - grid-template: - "s" auto - "t" auto - "c" auto - / 100% - ; - } + @screen mobile { + grid-template: + 's' auto + 't' auto + 'c' auto + / 100%; + } } diff --git a/gui/src/components/onboarding/pages/ConnectTracker.tsx b/gui/src/components/onboarding/pages/ConnectTracker.tsx index 816b7d985f..ad82c0c83d 100644 --- a/gui/src/components/onboarding/pages/ConnectTracker.tsx +++ b/gui/src/components/onboarding/pages/ConnectTracker.tsx @@ -141,127 +141,125 @@ export function ConnectTrackersPage() { ); return ( - <> -
-
- - {l10n.getString('onboarding-connect_tracker-title')} - - - {l10n.getString('onboarding-connect_tracker-description-p0-v1')} - - - {l10n.getString('onboarding-connect_tracker-description-p1-v1')} - -
- - {l10n.getString('onboarding-connect_tracker-issue-serial')} - -
- , b: }} +
+
+ + {l10n.getString('onboarding-connect_tracker-title')} + + + {l10n.getString('onboarding-connect_tracker-description-p0-v1')} + + + {l10n.getString('onboarding-connect_tracker-description-p1-v1')} + +
+ - Conditional tip - + {l10n.getString('onboarding-connect_tracker-issue-serial')} + +
+ , b: }} + > + Conditional tip + +
-
- -
+ +
-
- - {l10n.getString('onboarding-connect_tracker-usb')} +
+ + {l10n.getString('onboarding-connect_tracker-usb')} + +
+ + {l10n.getString(statusLabelMap[provisioningStatus])} -
- - {l10n.getString(statusLabelMap[provisioningStatus])} - -
-
-
-
- - +
-
- - {l10n.getString('onboarding-connect_tracker-connected_trackers', { - amount: connectedIMUTrackers.length, - })} - +
+ +
-
-
- {Array.from({ - ...connectedIMUTrackers, - length: Math.max(connectedIMUTrackers.length, 1), - }).map((tracker, index) => ( -
- {!tracker && ( -
- )} - {tracker && ( - - )} -
- ))} -
+
+
+ + {l10n.getString('onboarding-connect_tracker-connected_trackers', { + amount: connectedIMUTrackers.length, + })} + +
+
+
+ {Array.from({ + ...connectedIMUTrackers, + length: Math.max(connectedIMUTrackers.length, 1), + }).map((tracker, index) => ( +
+ {!tracker && ( +
+ )} + {tracker && ( + + )} +
+ ))}
- +
); } diff --git a/gui/src/components/settings/SettingsLayout.scss b/gui/src/components/settings/SettingsLayout.scss index dde7ff1d91..eb70bef5e2 100644 --- a/gui/src/components/settings/SettingsLayout.scss +++ b/gui/src/components/settings/SettingsLayout.scss @@ -1,25 +1,25 @@ :root { - --settings-sidebar-w: 200px + --settings-sidebar-w: 200px; } .settings-layout { - display: grid; - grid-template: - "t t t" var(--topbar-h) - "n s c" calc(100% - var(--topbar-h)) - / var(--navbar-w) var(--settings-sidebar-w) calc(100% - var(--navbar-w) - var(--settings-sidebar-w)) - ; - - @screen lg { - --settings-sidebar-w: 270px - } + display: grid; + grid-template: + 't t t' var(--topbar-h) + 'n s c' calc(100% - var(--topbar-h)) + / var(--navbar-w) var(--settings-sidebar-w) calc(100% - var(--navbar-w) - var( + --settings-sidebar-w + )); - @screen mobile { - grid-template: - "t" var(--topbar-h) - "c" calc(100% - var(--topbar-h) - var(--navbar-h)) - "n" calc(var(--navbar-h)) - / 100%; - } + @screen lg { + --settings-sidebar-w: 270px; + } + @screen mobile { + grid-template: + 't' var(--topbar-h) + 'c' calc(100% - var(--topbar-h) - var(--navbar-h)) + 'n' calc(var(--navbar-h)) + / 100%; + } } diff --git a/gui/src/components/settings/pages/Serial.tsx b/gui/src/components/settings/pages/Serial.tsx index a3d86949ad..e0e7db04ed 100644 --- a/gui/src/components/settings/pages/Serial.tsx +++ b/gui/src/components/settings/pages/Serial.tsx @@ -90,7 +90,6 @@ export function Serial() { } if (data.log) { - console.log(data.log); setConsole((console) => console + data.log); } } @@ -114,8 +113,6 @@ export function Serial() { consoleRef.current.scrollTo({ top: consoleRef.current.scrollHeight, }); - - console.log(consoleContent); }, [consoleContent]); useEffect(() => { @@ -229,7 +226,6 @@ export function Serial() { - {/* {isMobile && ( */}
Date: Mon, 24 Jun 2024 19:33:03 +0200 Subject: [PATCH 4/4] Remove debug code from TrackerSelectionMenu --- .../pages/trackers-assign/TrackerSelectionMenu.tsx | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/gui/src/components/onboarding/pages/trackers-assign/TrackerSelectionMenu.tsx b/gui/src/components/onboarding/pages/trackers-assign/TrackerSelectionMenu.tsx index d006f595fe..dca25fa553 100644 --- a/gui/src/components/onboarding/pages/trackers-assign/TrackerSelectionMenu.tsx +++ b/gui/src/components/onboarding/pages/trackers-assign/TrackerSelectionMenu.tsx @@ -69,20 +69,6 @@ export function TrackerSelectionMenu({ } > ))} - {unassignedTrackers.map((fd, index) => ( - onTrackerSelected(fd)} - smol - interactable - outlined={ - bodyPart === - (fd.tracker.info?.bodyPart || BodyPart.NONE) - } - > - ))}
)}