fix: styling and icons

Author: gjulivan

packages/pluggableWidgets/document-viewer-web/assets/DocViewer.woff2

@@ -43,6 +43,9 @@ const DocxViewer: DocRendererElement = (props: DocumentViewerContainerProps) =>
 
     return (
         <Fragment>
+            <div className="widget-document-viewer-controls">
+                <div className="widget-document-viewer-controls-left">{file.value?.name}</div>
+            </div>
             {docxHtml && (
                 <div className="widget-document-viewer-content" dangerouslySetInnerHTML={{ __html: docxHtml }}>
                     {/* {docHtmlStr} */}

packages/pluggableWidgets/document-viewer-web/components/DocxViewer.tsx

@@ -33,13 +33,25 @@ const PDFViewer: DocRendererElement = (props: DocumentViewerContainerProps) => {
     return (
         <Fragment>
             <div className="widget-document-viewer-controls">
-                <button onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))} disabled={currentPage <= 1}>
-                    Previous
-                </button>
-                <span>
-                    Page {currentPage} of {numberOfPages}
-                </span>
-                <button onClick={() => setCurrentPage(prev => Math.min(prev + 1, numberOfPages))}>Next</button>
+                <div className="widget-document-viewer-controls-left">{file.value?.name}</div>
+                <div className="widget-document-viewer-controls-icons">
+                    <div className="widget-document-viewer-pagination">
+                        <button
+                            onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
+                            disabled={currentPage <= 1}
+                            className="icons icon-Left btn btn-icon-only"
+                            aria-label={"Go to previous page"}
+                        ></button>
+                        <span>
+                            {currentPage} / {numberOfPages}
+                        </span>
+                        <button
+                            onClick={() => setCurrentPage(prev => Math.min(prev + 1, numberOfPages))}
+                            className="icons icon-Right btn btn-icon-only"
+                            aria-label={"Go to next page"}
+                        ></button>
+                    </div>
+                </div>
             </div>
             <div className="widget-document-viewer-content">
                 {pdfUrl && (

packages/pluggableWidgets/document-viewer-web/components/PDFViewer.tsx

@@ -0,0 +1,49 @@
+import { Properties } from "@mendix/pluggable-widgets-tools";
+import {
+    StructurePreviewProps,
+    structurePreviewPalette
+} from "@mendix/widget-plugin-platform/preview/structure-preview-api";
+import { DocumentViewerPreviewProps } from "typings/DocumentViewerProps";
+
+export function getProperties(_values: DocumentViewerPreviewProps, defaultProperties: Properties): Properties {
+    return defaultProperties;
+}
+
+export function getPreview(_values: DocumentViewerPreviewProps, isDarkMode: boolean): StructurePreviewProps {
+    const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
+    return {
+        type: "Container",
+        children: [
+            {
+                type: "RowLayout",
+                grow: 2,
+                columnSize: "grow",
+                borders: true,
+                borderWidth: 1,
+                borderRadius: 2,
+                backgroundColor: _values.readOnly ? palette.background.containerDisabled : palette.background.container,
+                children: [
+                    {
+                        type: "Container",
+                        grow: 1,
+                        padding: 4,
+                        children: [
+                            {
+                                type: "Text",
+                                content: getCustomCaption(_values),
+                                fontColor: palette.text.data
+                            }
+                        ]
+                    }
+                ],
+                padding: 8
+            }
+        ],
+        backgroundColor: palette.background.container,
+        borderRadius: 8
+    };
+}
+
+export function getCustomCaption(_values: DocumentViewerPreviewProps): string {
+    return `[${_values.file ?? "No attribute selected"}]`;
+}

packages/pluggableWidgets/document-viewer-web/src/DocumentViewer.editorConfig.ts

@@ -0,0 +1,12 @@
+import { createElement, ReactElement } from "react";
+import { DocumentViewerPreviewProps } from "typings/DocumentViewerProps";
+import "../ui/DocumentViewer.scss";
+
+export const preview = (props: DocumentViewerPreviewProps): ReactElement => {
+    const { file } = props;
+    return (
+        <div className="widget-document-viewer">
+            <div className="widget-document-viewer-content">{file ? `[${file}]` : "[No attribute selected]"}</div>
+        </div>
+    );
+};

packages/pluggableWidgets/document-viewer-web/src/DocumentViewer.editorPreview.tsx

@@ -2,7 +2,8 @@ import { createElement, ReactElement } from "react";
 import { DocumentContext } from "../store";
 import { DocumentViewerContainerProps } from "../typings/DocumentViewerProps";
 import { useRendererSelector } from "../utils/useRendererSelector";
-import "../ui/DocumentViewer.scss";
+import "../ui/documentViewer.scss";
+import "../ui/documentViewerIcons.scss";
 import classNames from "classnames";
 
 export default function DocumentViewer(props: DocumentViewerContainerProps): ReactElement {