Move fullscreen button to ContentView and update related components

Author: bdahle

legacy-archive/client/components/main-section/content-view/ContentView.module.css

@@ -16,3 +16,8 @@
 .header {
     margin-bottom: 0.25rem;
 }
+
+.viewSelectorWrapper {
+    display: flex;
+    gap: 1rem;
+}

legacy-archive/client/components/main-section/content-view/ContentView.tsx

@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from 'react';
+import { ExternalLinkIcon } from '@navikt/aksel-icons';
+import { useAppState } from 'client/context/app-state/useAppState';
 import { CmsContent } from '../../../../shared/cms-documents/content';
 import { XmlView } from './xml-view/XmlView';
 import { HtmlView } from './html-view/HtmlView';
 import { FilesView } from './files-view/FilesView';
 import { ViewSelector, ViewState } from '../view-selector/ViewSelector';
 import { VersionSelector } from './version-selector/VersionSelector';
-import { Heading } from '@navikt/ds-react';
+import { Button, Heading } from '@navikt/ds-react';
 import { CategoriesPath } from '../../common/categories-path/CategoriesPath';
 import { PdfExporter } from './pdf-exporter/PdfExporter';
 
@@ -23,6 +25,9 @@ export const ContentView = ({ content }: Props) => {
         setViewState(getDefaultViewState(content));
     }, [content]);
 
+    const { appContext } = useAppState();
+    const fullscreenPath = `${appContext.basePath}/html/${versionKey}`;
+
     return (
         <>
             <CategoriesPath path={content.path} className={style.path} />
@@ -31,11 +36,28 @@ export const ContentView = ({ content }: Props) => {
                     <Heading size={'medium'} level={'2'} className={style.header}>
                         {content.displayName}
                     </Heading>
-                    <ViewSelector
-                        content={content}
-                        viewState={viewState}
-                        setViewState={setViewState}
-                    />
+                    <div className={style.viewSelectorWrapper}>
+                        <ViewSelector
+                            content={content}
+                            viewState={viewState}
+                            setViewState={setViewState}
+                        />
+                        <Button
+                            size={'small'}
+                            variant={'primary'}
+                            as={'a'}
+                            href={fullscreenPath}
+                            className={style.fullscreenButton}
+                            icon={<ExternalLinkIcon />}
+                            iconPosition={'right'}
+                            onClick={(e) => {
+                                e.preventDefault();
+                                window.open(fullscreenPath, '_blank');
+                            }}
+                        >
+                            {'Åpne i nytt vindu'}
+                        </Button>
+                    </div>
                 </div>
                 <VersionSelector content={content} />
             </div>

legacy-archive/client/components/main-section/content-view/html-view/HtmlView.tsx

@@ -1,8 +1,5 @@
 import React, { useRef } from 'react';
 import { classNames } from '../../../../../../common/src/client/utils/classNames';
-import { Button } from '@navikt/ds-react';
-import { useAppState } from '../../../../context/app-state/useAppState';
-import { ExpandIcon } from '@navikt/aksel-icons';
 
 import style from './HtmlView.module.css';
 
@@ -15,25 +12,8 @@ type Props = {
 export const HtmlView = ({ html, versionKey, hidden }: Props) => {
     const ref = useRef<HTMLIFrameElement>(null);
 
-    const { appContext } = useAppState();
-    const fullscreenPath = `${appContext.basePath}/html/${versionKey}`;
-
     return (
         <div className={classNames(style.wrapper, hidden && style.hidden)}>
-            <Button
-                size={'small'}
-                variant={'primary'}
-                as={'a'}
-                href={fullscreenPath}
-                className={style.fullscreenButton}
-                icon={<ExpandIcon />}
-                onClick={(e) => {
-                    e.preventDefault();
-                    window.open(fullscreenPath, '_blank');
-                }}
-            >
-                {'Åpne i nytt vindu'}
-            </Button>
             <iframe
                 srcDoc={html}
                 className={classNames(style.htmlFrame)}