Skip to content

Commit 7281667

Browse files
oddgfaoddgfa
authored
Fullskjerm decorator (#408)
* Conditionally render full screen * Legg til enkel kjøring av fullscreen devserver * Dokumenter Vite plugin * Bruk classNames * Bruk env variabel istedenfor plugin * Dra ut i variabel
1 parent 39f6a58 commit 7281667

File tree

10 files changed

+76
-27
lines changed

10 files changed

+76
-27
lines changed

‎bun.lockb

-28.8 KB
Binary file not shown.

‎packages/internarbeidsflate-decorator-v3/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React + TS</title>
7+
<title>Internarbeidsflate Decorator</title>
88
</head>
99
<body>
1010
<div id="root"></div>

‎packages/internarbeidsflate-decorator-v3/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
},
1818
"scripts": {
1919
"dev": "bunx --bun vite",
20+
"dev:fullscreen": "VITE_DECORATOR_MODE=fullscreen bunx --bun vite",
2021
"build": "bunx --bun vite build",
2122
"build:watch": "bunx --bun vite build --watch",
2223
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
@@ -58,6 +59,7 @@
5859
"@navikt/ds-tailwind": "^6.4.1",
5960
"@navikt/ds-tokens": "^6.4.1",
6061
"@tanstack/query-core": "^5.29.0",
62+
"classnames": "^2.5.1",
6163
"use-sync-external-store": "^1.2.0",
6264
"zustand": "^4.5.2"
6365
}

‎packages/internarbeidsflate-decorator-v3/src/App.tsx

+15-7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useEffect } from 'react';
22
import './index.css';
33
import { AppProps } from './types/AppProps';
44
import { useOnOutsideClick } from './hooks/useOnOutsideClick';
@@ -9,14 +9,14 @@ import ErrorMessage from './components/ErrorMessageDisplay';
99
import Menu from './components/Menu';
1010
import { useSyncHotkeys } from './hooks/useSyncHotkeys';
1111
import { useHotkeys } from './hooks/useHotkeys';
12-
import { useEffect } from 'react';
1312
import NewUserModal from './components/modals/NewUserModal';
1413
import NewEnhetModal from './components/modals/NewEnhetModal';
1514
import { useSyncStore } from './hooks/useSyncStore';
1615
import useGlobalHandlers from './store/GlobalHandlers';
16+
import classNames from 'classnames';
1717

1818
const App: React.FC<AppProps> = (props: AppProps) => {
19-
const { onLinkClick } = props;
19+
const { onLinkClick, isFullScreen } = props;
2020

2121
useSyncStore(props);
2222
useSyncAppState(props);
@@ -31,23 +31,31 @@ const App: React.FC<AppProps> = (props: AppProps) => {
3131
}, [props.enableHotkeys, startListening, stopListening]);
3232

3333
const ref = useOnOutsideClick<HTMLElement>(() =>
34-
useAppState.setState({ open: false }),
34+
useAppState.setState({ open: false })
3535
);
3636

3737
const setHandler = useGlobalHandlers((state) => state.setHandler);
3838

3939
useEffect(() => {
4040
if (onLinkClick) {
4141
setHandler('onLinkClick', (linkText, url) =>
42-
onLinkClick({ text: linkText, url }),
42+
onLinkClick({ text: linkText, url })
4343
);
4444
}
4545
}, [setHandler, onLinkClick]);
4646

47+
useEffect(() => {
48+
if (props.isFullScreen) {
49+
useAppState.setState({ open: true });
50+
}
51+
}, [props.isFullScreen]);
52+
4753
return (
4854
<>
49-
<div className="dekorator" data-theme="internarbeidsflatedecorator-theme">
50-
<header ref={ref} className="dr-font-arial dr-text-white">
55+
<div className={classNames('dekorator', { 'dr-h-screen': isFullScreen })}
56+
data-theme="internarbeidsflatedecorator-theme">
57+
<header ref={ref}
58+
className={classNames('dr-font-arial', 'dr-text-white', { 'dr-h-full dr-flex dr-flex-col': isFullScreen })}>
5159
<Banner />
5260
<Menu />
5361
<ErrorMessage />

‎packages/internarbeidsflate-decorator-v3/src/components/Banner.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,26 @@ import Markup from './Markup';
77
import MenuButton from './MenuButton';
88
import SearchArea from './SearchArea';
99
import VeilederDetails from './VeilederDetails';
10+
import { useAppState } from '../states/AppState';
1011

1112
const Banner: React.FC = () => {
13+
const isFullScreen = useAppState((state) => state.isFullScreen);
14+
1215
return (
1316
<div className="dr-p-2 dr-bg-background dr-text-white">
1417
<div className="dr-max-w-full dr-mx-auto">
1518
<div className="dr-flex dr-flex-wrap dr-items-center dr-justify-evenly dr-gap-1">
1619
<AppName />
17-
<div className="dr-flex dr-flex-wrap dr-flex-1 dr-gap-4 xl:dr-gap-8 dr-w-full dr-justify-center dr-items-center">
20+
<div
21+
className="dr-flex dr-flex-wrap dr-flex-1 dr-gap-4 xl:dr-gap-8 dr-w-full dr-justify-center dr-items-center">
1822
<Enhet />
1923
<EnhetVelger />
2024
<SearchArea />
2125
<Markup />
2226
<HotkeyMenuElement />
2327
<VeilederDetails />
2428
</div>
25-
<MenuButton />
29+
{!isFullScreen && <MenuButton />}
2630
</div>
2731
</div>
2832
</div>

‎packages/internarbeidsflate-decorator-v3/src/components/Menu.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,24 @@ import { useLinkHotkeys } from '../hooks/useLinkHotkeys';
33
import { useAppState } from '../states/AppState';
44
import StoreHandler from '../store/StoreHandler';
55
import Links from './Links/Links';
6+
import classNames from 'classnames';
67

78
const Menu: React.FC = () => {
89
const isOpen = useAppState((state) => state.open);
10+
const isFullScreen = useAppState((state) => state.isFullScreen);
911

1012
const environment = useAppState((state) => state.environment);
1113

1214
const { fnr, aktoerId } = StoreHandler.store((state) => ({
1315
fnr: state.fnr.value,
14-
aktoerId: '',
16+
aktoerId: ''
1517
}));
1618

1719
useLinkHotkeys({ environment, fnr, aktoerId });
1820
if (!isOpen) return null;
1921

2022
return (
21-
<div className="dr-bg-background">
23+
<div className={classNames('dr-bg-background', { 'dr-h-full': isFullScreen })}>
2224
<Links />
2325
</div>
2426
);

‎packages/internarbeidsflate-decorator-v3/src/states/AppState.ts

+2
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export const useAppState = create<AppState>(() => ({
1111
showHotkeys: true,
1212
environment: 'q2',
1313
urlFormat: 'NAV_NO',
14+
isFullScreen: false,
1415
}));
1516

1617
export interface AppState {
@@ -24,4 +25,5 @@ export interface AppState {
2425
environment: Environment;
2526
urlFormat: UrlFormat;
2627
proxy?: string | undefined;
28+
isFullScreen?: boolean;
2729
}

‎packages/internarbeidsflate-decorator-v3/src/wrapper/FullScreenWrapper.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import Decorator from '../App';
3+
4+
const FullScreenWrapper = () => {
5+
// En minimal Decorator som viser en fullskjermvisning av applikasjonen
6+
return <Decorator
7+
appName="Test app"
8+
enableHotkeys
9+
showEnheter={true}
10+
showSearchArea={true}
11+
showHotkeys={true}
12+
environment={'q2'}
13+
urlFormat={'LOCAL'}
14+
enhet={''}
15+
fnr={''}
16+
fetchActiveEnhetOnMount
17+
fetchActiveUserOnMount
18+
onEnhetChanged={() => {
19+
}}
20+
onFnrChanged={() => {
21+
}}
22+
isFullScreen={true}
23+
/>;
24+
};
25+
26+
export default FullScreenWrapper;

‎packages/internarbeidsflate-decorator-v3/src/wrapper/main.tsx

+10-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1-
import React from 'react'
2-
import ReactDOM from 'react-dom/client'
3-
import Wrapper from './Wrapper'
1+
import React from 'react';
2+
import ReactDOM from 'react-dom/client';
3+
import Wrapper from './Wrapper';
4+
import FullScreenWrapper from './FullScreenWrapper';
5+
6+
7+
const isFullscreen = import.meta.env.VITE_DECORATOR_MODE === 'fullscreen';
48

59
ReactDOM.createRoot(document.getElementById('root')!).render(
610
<React.StrictMode>
7-
<Wrapper />
8-
</React.StrictMode>,
9-
)
11+
{isFullscreen ? <FullScreenWrapper /> : <Wrapper />}
12+
</React.StrictMode>
13+
);

‎packages/internarbeidsflate-decorator-v3/vite.config.ts

+10-9
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,23 @@ import react from '@vitejs/plugin-react';
44

55
export default defineConfig({
66
plugins: [
7-
react(),
7+
react()
88
],
99
build: {
1010
cssMinify: true,
1111
minify: true,
1212
manifest: 'asset-manifest.json',
1313
rollupOptions: {
14-
input: "src/index.ts",
15-
preserveEntrySignatures: "exports-only",
14+
input: 'src/index.ts',
15+
preserveEntrySignatures: 'exports-only',
1616
// external: ["react", "react-dom"],
1717
output: {
18-
entryFileNames: "bundle.js",
18+
entryFileNames: 'bundle.js',
1919
// format: "iife",
2020
inlineDynamicImports: true,
21-
assetFileNames: '[name].[ext]',
22-
},
23-
},
24-
},
25-
});
21+
assetFileNames: '[name].[ext]'
22+
}
23+
}
24+
}
25+
}
26+
);

0 commit comments

Comments
 (0)