From de51e1854ea8343eb3a1c2f2b6621d68fffcb3de Mon Sep 17 00:00:00 2001 From: Carlos Valente Date: Sat, 19 Oct 2024 10:41:26 +0200 Subject: [PATCH] refactor: add nif to navigation --- .../components/app-link/AppLink.module.scss | 2 +- .../NavigationMenu.module.scss | 20 +++++++- .../navigation-menu/NavigationMenu.tsx | 47 ++++++++++++++++++- .../NetworkInterfaces.module.scss | 2 +- .../message/MessageControl.module.scss | 2 +- apps/client/src/theme/_mixins.scss | 8 ++++ apps/client/src/theme/_viewerDefs.scss | 2 +- apps/client/src/theme/ontimeDrawer.ts | 6 +++ 8 files changed, 82 insertions(+), 7 deletions(-) diff --git a/apps/client/src/common/components/app-link/AppLink.module.scss b/apps/client/src/common/components/app-link/AppLink.module.scss index ce4b01bb77..45b497edb7 100644 --- a/apps/client/src/common/components/app-link/AppLink.module.scss +++ b/apps/client/src/common/components/app-link/AppLink.module.scss @@ -8,5 +8,5 @@ .linkIcon { margin-left: $element-inner-spacing; display: inline-block; - transform: rotate(45deg); + @include rotate-fourty-five; } diff --git a/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss b/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss index 3e50ac99e1..ebf9d311e3 100644 --- a/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss +++ b/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss @@ -72,9 +72,27 @@ $button-size: 3rem; .linkIcon { margin-left: auto; - transform: rotate(45deg); + @include rotate-fourty-five; } .separator { border-color: $border-color-ondark; } + +.sectionHeader { + font-size: calc(1rem - 2px); + margin-left: 1rem; + color: $gray-700; +} + +.bottom { + margin-top: auto; + margin-bottom: 1rem; +} + +.interfaces { + padding: 0.5rem 1rem; + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} diff --git a/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx b/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx index 90b7a78f53..d426a74558 100644 --- a/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx +++ b/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx @@ -18,14 +18,17 @@ import { IoLockClosedOutline } from '@react-icons/all-files/io5/IoLockClosedOutl import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical'; import { navigatorConstants } from '../../../viewerConfig'; +import { isLocalhost, serverPort } from '../../api/constants'; import useClickOutside from '../../hooks/useClickOutside'; import useElectronEvent from '../../hooks/useElectronEvent'; +import useInfo from '../../hooks-query/useInfo'; import { useClientStore } from '../../stores/clientStore'; import { useViewOptionsStore } from '../../stores/viewOptions'; import { isKeyEnter } from '../../utils/keyEvent'; -import { handleLinks } from '../../utils/linkUtils'; +import { handleLinks, openLink } from '../../utils/linkUtils'; import { cx } from '../../utils/styleUtils'; import { RenameClientModal } from '../client-modal/RenameClientModal'; +import CopyTag from '../copy-tag/CopyTag'; import style from './NavigationMenu.module.scss'; @@ -59,7 +62,7 @@ function NavigationMenu(props: NavigationMenuProps) { Ontime - +
))} + {isLocalhost && } @@ -128,6 +132,45 @@ function NavigationMenu(props: NavigationMenuProps) { ); } +interface OtherAddressesProps { + currentLocation: string; +} + +function OtherAddresses(props: OtherAddressesProps) { + const { currentLocation } = props; + const { data } = useInfo(); + + // there is no point showing this if we only have one interface + if (data.networkInterfaces.length < 2) { + return null; + } + + return ( +
+
Accessible on external networks
+
+ {data?.networkInterfaces?.map((nif) => { + if (nif.name === 'localhost') { + return null; + } + + const address = `http://${nif.address}:${serverPort}${currentLocation}`; + return ( + openLink(address)} + label='Copy IP or navigate to address' + > + {nif.address} + + ); + })} +
+
+ ); +} + interface ClientLinkProps { current: boolean; to: string; diff --git a/apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.module.scss b/apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.module.scss index cc8a7a1c4d..d1d0970c2e 100644 --- a/apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.module.scss +++ b/apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.module.scss @@ -6,6 +6,6 @@ } .goIcon { - transform: rotate(45deg); + @include rotate-fourty-five; margin-left: 0.25rem; } diff --git a/apps/client/src/features/control/message/MessageControl.module.scss b/apps/client/src/features/control/message/MessageControl.module.scss index b7e7ceed04..36e984b17f 100644 --- a/apps/client/src/features/control/message/MessageControl.module.scss +++ b/apps/client/src/features/control/message/MessageControl.module.scss @@ -22,7 +22,7 @@ } .corner { - transform: rotate(45deg); + @include rotate-fourty-five; position: absolute; top: 0.5rem; diff --git a/apps/client/src/theme/_mixins.scss b/apps/client/src/theme/_mixins.scss index 059503c5c8..94d8fea271 100644 --- a/apps/client/src/theme/_mixins.scss +++ b/apps/client/src/theme/_mixins.scss @@ -21,3 +21,11 @@ overflow: hidden; text-overflow: ellipsis; } + +@mixin rotate-fourty-five { + transform: rotate(45deg); +} + +.fourtyfive { + @include rotate-fourty-five; +} diff --git a/apps/client/src/theme/_viewerDefs.scss b/apps/client/src/theme/_viewerDefs.scss index 9f98799a34..fb1e7c0ee5 100644 --- a/apps/client/src/theme/_viewerDefs.scss +++ b/apps/client/src/theme/_viewerDefs.scss @@ -30,4 +30,4 @@ $external-color: rgba(white, 85%); // --external-color-override // properties of other timers (clock and countdown) $timer-label-size: clamp(16px, 1.5vw, 24px); -$timer-value-size: clamp(2rem, 3.5vw, 3.5rem); \ No newline at end of file +$timer-value-size: clamp(2rem, 3.5vw, 3.5rem); diff --git a/apps/client/src/theme/ontimeDrawer.ts b/apps/client/src/theme/ontimeDrawer.ts index a7e7e07b9c..8da2576aa4 100644 --- a/apps/client/src/theme/ontimeDrawer.ts +++ b/apps/client/src/theme/ontimeDrawer.ts @@ -1,9 +1,15 @@ export const ontimeDrawer = { + dialog: { + maxWidth: '300px', + }, header: { color: '#fefefe', // $gray-50 backgroundColor: '#202020', // $gray-1250 }, body: { + padding: 0, + display: 'flex', + flexDirection: 'column', color: '#fefefe', // $gray-50 backgroundColor: '#202020', // $gray-1250 },