Skip to content

Commit a9e452c

Browse files
talepretalepre
authored
Merge pull request #55 from navikt/stil-oppdatering
Stil oppdatering
2 parents 2d8646b + 5a24a96 commit a9e452c

34 files changed

+347
-249
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ Sett NODE_ENV=production i xp-archive/.env.prod-local og legacy-archive/.env.pro
3838
For legacy arkivet trenger du også credentials for open-search, se [Enonic CMS legacy arkiv](#enonic-cms-legacy-arkiv-2006-2019)
3939

4040
4. Starte applikasjon i dev-modus
41+
For legacy-archive må man logge på aiven-prod i naisdevice.
4142

4243
```
4344
npm run dev -C legacy-archive

‎common/src/client/AppLayout.module.css

+2-4
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,11 @@
33
width: 100%;
44
height: 100vh;
55
margin: 0 auto;
6-
padding: 0.5rem 2rem;
76

87
display: grid;
9-
gap: 1rem;
108
grid-template-rows: auto 1fr;
119
grid-template-columns: 400px 1fr;
1210
grid-template-areas:
13-
"top top"
14-
"left main";
11+
'top top'
12+
'left main';
1513
}

‎common/src/client/AppLayout.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ import { AppTopSection } from './top-section/AppTopSection';
44
import style from './AppLayout.module.css';
55

66
type Props = {
7-
siteName: string;
87
basePath: string;
98
children: React.ReactNode;
9+
showUnderDevAlert?: boolean;
1010
};
1111

12-
export const AppLayout = ({ siteName, basePath, children }: Props) => {
12+
export const AppLayout = ({ basePath, children, showUnderDevAlert = false }: Props) => {
1313
return (
1414
<div className={style.root}>
15-
<AppTopSection basePath={basePath} siteName={siteName} />
15+
<AppTopSection basePath={basePath} showUnderDevAlert={showUnderDevAlert} />
1616
{children}
1717
</div>
1818
);

‎common/src/client/top-section/AppTopSection.module.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
.header {
22
grid-area: top;
3+
}
34

4-
span {
5-
display: flex;
6-
align-items: center;
7-
}
5+
.devAlert {
6+
display: flex;
7+
justify-content: center;
88
}

‎common/src/client/top-section/AppTopSection.tsx

+17-13
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,29 @@
11
import React from 'react';
2-
import { InternalHeader, Spacer } from '@navikt/ds-react';
2+
import { Alert, InternalHeader, Spacer } from '@navikt/ds-react';
33
import { ArchiveSelector } from './archive-selector/ArchiveSelector';
4-
import NavLogo from '../../../assets/nav-logo-white.svg';
54

65
import style from './AppTopSection.module.css';
76

87
type Props = {
9-
siteName: string;
108
basePath: string;
9+
showUnderDevAlert: boolean;
1110
};
1211

13-
export const AppTopSection = ({ siteName, basePath }: Props) => {
12+
export const AppTopSection = ({ basePath, showUnderDevAlert }: Props) => {
1413
return (
15-
<InternalHeader className={style.header}>
16-
<InternalHeader.Title>
17-
<img src={NavLogo} alt={''} />
18-
</InternalHeader.Title>
19-
<InternalHeader.Title>{`CMS-arkiv`}</InternalHeader.Title>
20-
<InternalHeader.Title>{siteName}</InternalHeader.Title>
21-
<Spacer />
22-
<ArchiveSelector basePath={basePath} />
23-
</InternalHeader>
14+
<div className={style.header}>
15+
<InternalHeader className={style.header}>
16+
<InternalHeader.Title>{`CMS-arkiv`}</InternalHeader.Title>
17+
<Spacer />
18+
<ArchiveSelector basePath={basePath} />
19+
</InternalHeader>
20+
{showUnderDevAlert ? (
21+
<Alert variant={'warning'} className={style.devAlert} fullWidth>
22+
{
23+
'Obs! Denne delen av arkivet er fortsatt under utvikling og er IKKE klar til bruk.'
24+
}
25+
</Alert>
26+
) : null}
27+
</div>
2428
);
2529
};

‎common/src/shared/timestamp.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
11
export const formatTimestamp = (tsRaw: string) =>
2-
new Date(tsRaw).toLocaleString('no', { dateStyle: 'short', timeStyle: 'short' });
2+
new Date(tsRaw).toLocaleString('no', {
3+
dateStyle: 'medium',
4+
timeStyle: 'short',
5+
});

‎legacy-archive/client/components/App.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ type Props = {
1111
};
1212

1313
export const App = ({ appContext }: Props) => {
14-
const { cmsName, basePath } = appContext;
14+
const { basePath } = appContext;
1515

1616
return (
1717
<AppStateProvider appContext={appContext}>
18-
<AppLayout siteName={cmsName} basePath={basePath}>
18+
<AppLayout basePath={basePath}>
1919
<SearchStateProvider>
2020
<AppLeftSection />
2121
</SearchStateProvider>

‎legacy-archive/client/components/left-section/AppLeftSection.module.css

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
position: relative;
55
grid-area: left;
66
border-left: solid 4px var(--a-gray-600);
7+
padding-top: 1rem;
78
}
89

910
.root,

‎legacy-archive/client/components/main-section/AppMainSection.module.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
display: flex;
44
flex-direction: column;
55
overflow-y: hidden;
6+
margin: 1rem;
67
padding: 0 0.25rem;
78
}
89

@@ -18,4 +19,4 @@
1819
.emptyHeader {
1920
display: flex;
2021
align-items: center;
21-
}
22+
}

‎package-lock.json

+6-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎xp-archive/client/App.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@ import React from 'react';
22
import { AppLayout } from '@common/client/AppLayout';
33
import { xpArchiveConfig } from '@common/shared/siteConfigs';
44
import { NavigationBar } from './contentTree/NavigationBar';
5-
import { ContentView } from './contentView/ContentView';
5+
import { Content } from './content/Content';
66
import { AppStateProvider } from './context/appState/AppStateProvider';
77

88
export const App = () => {
99
return (
10-
<AppLayout siteName={xpArchiveConfig.name} basePath={xpArchiveConfig.basePath}>
10+
<AppLayout basePath={xpArchiveConfig.basePath} showUnderDevAlert>
1111
<AppStateProvider>
1212
<NavigationBar />
13-
<ContentView />
13+
<Content />
1414
</AppStateProvider>
1515
</AppLayout>
1616
);

‎xp-archive/client/content/Content.module.css

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.content {
2+
grid-area: main;
3+
display: flex;
4+
flex-direction: column;
5+
overflow-y: hidden;
6+
}
7+
8+
.top {
9+
padding: 1rem;
10+
background-color: var(--a-surface-subtle);
11+
display: flex;
12+
justify-content: space-between;
13+
gap: 1.5rem;
14+
}

‎xp-archive/client/content/Content.tsx

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React, { useState, useEffect } from 'react';
2+
import { useFetchContent } from '../hooks/useFetchContent';
3+
import { useAppState } from '../context/appState/useAppState';
4+
import { ViewSelector, ViewVariant } from 'client/viewSelector/ViewSelector';
5+
import { VersionSelector } from 'client/versionSelector/VersionSelector';
6+
import { ContentView } from '../contentView/ContentView';
7+
8+
import style from './Content.module.css';
9+
10+
const getDefaultView = (isWebpage: boolean, hasAttachment: boolean): ViewVariant => {
11+
if (isWebpage) return 'html';
12+
if (hasAttachment) return 'filepreview';
13+
return 'json';
14+
};
15+
16+
export const Content = () => {
17+
const { selectedContentId, selectedLocale, selectedVersion } = useAppState();
18+
19+
const fetchId = selectedVersion?.nodeId || selectedContentId;
20+
21+
const { data, isLoading } = useFetchContent({
22+
id: fetchId || '',
23+
locale: selectedLocale,
24+
versionId: selectedVersion?.versionId ?? undefined,
25+
});
26+
27+
const isWebpage = !!data?.html && !data.json.attachment;
28+
const hasAttachment = !!data?.json.attachment;
29+
const [selectedView, setSelectedView] = useState<ViewVariant>(
30+
getDefaultView(isWebpage, hasAttachment)
31+
);
32+
33+
useEffect(() => {
34+
setSelectedView(getDefaultView(isWebpage, hasAttachment));
35+
}, [isWebpage, hasAttachment]);
36+
37+
return (
38+
<>
39+
{selectedContentId ? (
40+
<div className={style.content}>
41+
<div className={style.top}>
42+
<ViewSelector
43+
selectedView={selectedView}
44+
setSelectedView={setSelectedView}
45+
hasAttachment={hasAttachment}
46+
isWebpage={isWebpage}
47+
/>
48+
<VersionSelector versions={data?.versions || []} />
49+
</div>
50+
<ContentView selectedView={selectedView} isLoading={isLoading} data={data} />
51+
</div>
52+
) : null}
53+
</>
54+
);
55+
};

‎xp-archive/client/contentJsonView/contentJsonView.tsx

-12
This file was deleted.

‎xp-archive/client/contentPreview/ContentPreview.tsx

-27
This file was deleted.

‎xp-archive/client/contentPreview/htmlView/HtmlView.module.css

-6
This file was deleted.

‎xp-archive/client/contentPreview/htmlView/HtmlView.tsx

-10
This file was deleted.

‎xp-archive/client/contentTree/NavigationBar.module.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.wrapper {
2+
border-right: 1px solid var(--a-border-divider);
3+
grid-area: left;
4+
overflow-y: auto;
5+
}
6+
7+
.heading {
8+
margin: 1rem;
9+
}

‎xp-archive/client/contentTree/NavigationBar.tsx

+7-11
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import React from 'react';
2-
import { Alert, Heading, Tabs } from '@navikt/ds-react';
2+
import { Heading, Tabs } from '@navikt/ds-react';
33
import { LayerPanel } from './layerPanel/LayerPanel';
44
import { useAppState } from 'client/context/appState/useAppState';
55

6+
import style from './NavigationBar.module.css';
7+
68
const locales = ['no', 'en', 'nn', 'se'] as const;
79
export type Locale = (typeof locales)[number];
810

@@ -20,16 +22,10 @@ export const NavigationBar = () => {
2022
const { setSelectedLocale } = useAppState();
2123

2224
return (
23-
<div>
24-
<Alert
25-
variant={'warning'}
26-
size={'small'}
27-
inline={true}
28-
style={{ marginBottom: '1rem' }}
29-
>
30-
{'Obs: dette arkivet er under utvikling og er ikke klart til bruk!'}
31-
</Alert>
32-
<Heading size={'small'}>{'Innhold'}</Heading>
25+
<div className={style.wrapper}>
26+
<Heading size={'small'} className={style.heading}>
27+
{'Innhold'}
28+
</Heading>
3329
<Tabs defaultValue="no" onChange={(locale) => setSelectedLocale(locale as Locale)}>
3430
<Tabs.List>
3531
{locales.map((locale) => (

‎xp-archive/client/contentView/ContentView.module.css

+2-14
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,3 @@
1-
.content {
2-
display: flex;
3-
flex-direction: column;
4-
}
5-
6-
.top {
7-
display: flex;
8-
justify-content: space-between;
9-
gap: 1.5rem;
10-
}
11-
121
.main {
13-
height: 100%;
14-
margin-top: 1rem;
15-
}
2+
height: 100%;
3+
}

0 commit comments

Comments
 (0)