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, hidePropertyIn, hidePropertiesIn } 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 {

packages/pluggableWidgets/document-viewer-web/src/DocumentViewer.icon.dark.png

@@ -4,15 +4,23 @@ $root: widget-document-viewer;
     --document-viewer-negative-margin: calc(-1 * var(--form-input-padding-x));
 }
 
-.widget-document-viewer {
+div.widget-document-viewer {
     display: flex;
     flex-direction: column;
+    border: 1px solid var(--border-color-default, #ced0d3);
+    border-radius: var(--border-radius-default);
 
     &-controls {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
         margin: calc(-1 * var(--form-input-padding-y)) calc(-1 * var(--form-input-padding-x));
         margin-bottom: 0;
-        padding: var(--form-input-padding-y) var(--form-input-padding-x);
+        padding: var(--spacing-medium) var(--spacing-large);
         background-color: var(--gray-lighter);
+        border-bottom: 1px solid var(--border-color-default, #ced0d3);
+        border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
     }
 
     &-content {
@@ -21,4 +29,12 @@ $root: widget-document-viewer;
         border: 1px solid var(--gray-darker);
         border-radius: var(--border-radius-default);
     }
+
+    &-pagination {
+        display: flex;
+        align-items: center;
+        & > *:not(:last-child) {
+            margin-right: var(--spacing-small);
+        }
+    }
 }

packages/pluggableWidgets/document-viewer-web/src/DocumentViewer.icon.png

@@ -0,0 +1,38 @@
+@use "sass:map";
+@font-face {
+    font-family: "DocViewer";
+    src: url("../assets/DocViewer.woff2") format("woff2");
+}
+
+$icons: (
+    Download: "\e903",
+    Right: "\e906",
+    Left: "\e902",
+    ZoomIn: "\e901",
+    ZoomOut: "\e900",
+    FitToWidth: "\e904"
+);
+
+.icons.btn {
+    background-color: transparent;
+}
+
+div.widget-document-viewer {
+    &-controls {
+        .icons {
+            font-family: "DocViewer" !important;
+            font-size: 16px;
+            font-style: normal;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            text-rendering: optimizeLegibility;
+            padding: var(--spacing-smallest) var(--spacing-small);
+
+            @each $name, $code in $icons {
+                &.icon-#{$name}:before {
+                    content: $code;
+                }
+            }
+        }
+    }
+}