Merge pull request #101 from navikt/move-fullscreen-button

Move fullscreen button

Author: bdahle

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

@@ -11,6 +11,7 @@
     display: flex;
     justify-content: space-between;
     gap: 1.5rem;
+    align-items: flex-end;
 }
 
 .versionSelector {
@@ -21,3 +22,8 @@
 .versionButton {
     background-color: white;
 }
+
+.viewSelectorWrapper {
+    display: flex;
+    gap: 1rem;
+}

xp-archive/client/content/Content.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { SidebarRightIcon } from '@navikt/aksel-icons';
+import { ExternalLinkIcon, SidebarRightIcon } from '@navikt/aksel-icons';
 import { xpArchiveConfig } from '@common/shared/siteConfigs';
 import { Button, Detail, Heading, Label } from '@navikt/ds-react';
 import { useFetchContent } from '../hooks/useFetchContent';
@@ -63,6 +63,10 @@ export const Content = () => {
         setSelectedView(getDefaultView(isWebpage, hasAttachment));
     }, [isWebpage, hasAttachment, selectedContentId]);
 
+    const htmlPath = `${xpArchiveConfig.basePath}/html/${selectedContentId}/${selectedLocale}/${
+        data?.json._versionKey
+    }`;
+
     const getVersionDisplay = () => {
         if (selectedVersion && data?.versions) {
             return formatTimestamp(
@@ -84,13 +88,28 @@ export const Content = () => {
                     <Heading size={'medium'} level={'2'} spacing>
                         {data?.json.displayName ?? ''}
                     </Heading>
-                    <ViewSelector
-                        selectedView={selectedView}
-                        setSelectedView={setSelectedView}
-                        hasAttachment={hasAttachment}
-                        isWebpage={isWebpage}
-                    />
+                    <div className={style.viewSelectorWrapper}>
+                        <ViewSelector
+                            selectedView={selectedView}
+                            setSelectedView={setSelectedView}
+                            hasAttachment={hasAttachment}
+                            isWebpage={isWebpage}
+                        />
+                        <Button
+                            as={'a'}
+                            href={htmlPath}
+                            icon={<ExternalLinkIcon />}
+                            iconPosition={'right'}
+                            onClick={(e) => {
+                                e.preventDefault();
+                                window.open(htmlPath, '_blank');
+                            }}
+                        >
+                            {'Åpne i nytt vindu'}
+                        </Button>
+                    </div>
                 </div>
+
                 <div className={style.versionSelector}>
                     <Label spacing>Versjoner</Label>
                     <Button

xp-archive/client/contentView/htmlView/HtmlView.module.css

@@ -10,12 +10,6 @@
     border: none;
 }
 
-.fullscreenButton {
-    position: absolute;
-    bottom: 0.25rem;
-    right: 1.5rem;
-}
-
 .loaderWrapper {
     position: absolute;
     margin: 1rem;

xp-archive/client/contentView/htmlView/HtmlView.tsx

@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
 import style from './HtmlView.module.css';
-import { ExpandIcon } from '@navikt/aksel-icons';
 import { xpArchiveConfig } from '@common/shared/siteConfigs';
-import { Button, Loader } from '@navikt/ds-react';
+import { Loader } from '@navikt/ds-react';
 
 type Props = {
     nodeId: string;
@@ -33,18 +32,6 @@ export const HtmlView = ({ nodeId, locale: langLocale, versionId }: Props) => {
                     disableLinksScriptsAndEventListeners(e.currentTarget);
                 }}
             />
-            <Button
-                as={'a'}
-                href={htmlPath}
-                className={style.fullscreenButton}
-                icon={<ExpandIcon />}
-                onClick={(e) => {
-                    e.preventDefault();
-                    window.open(htmlPath, '_blank');
-                }}
-            >
-                {'Åpne i nytt vindu'}
-            </Button>
         </div>
     );
 };