diff --git a/packages/client/public/locales/en/CreateEditRoomDialog.json b/packages/client/public/locales/en/CreateEditRoomDialog.json index 5440106928..dfabf66ddf 100644 --- a/packages/client/public/locales/en/CreateEditRoomDialog.json +++ b/packages/client/public/locales/en/CreateEditRoomDialog.json @@ -48,6 +48,8 @@ "UserIPAddress": "User IP Address", "ViewOnlyRoomDescription": "Share any ready documents, reports, documentation, and other files for viewing.", "ViewOnlyRoomTitle": "View-only room", + "WatermarkPreview": "Watermark Preview", + "WatermarkPreviewHelp": "This image preview roughly shows how the watermark will be displayed in your files.", "AutomaticIndexing": "Automatic indexing", "AutomaticIndexingDescription": "Enable automatic indexing to index files and folders by serial number. Sorting by number will be set as default for all users.", "FileLifetime": "File lifetime", diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ImageWatermark.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ImageWatermark.js index 13352b6fbc..178f12b03c 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ImageWatermark.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ImageWatermark.js @@ -52,19 +52,17 @@ import { useState, useRef, useEffect } from "react"; import { useTranslation } from "react-i18next"; -import { ReactSVG } from "react-svg"; +import { inject, observer } from "mobx-react"; import { Text } from "@docspace/shared/components/text"; import { ComboBox } from "@docspace/shared/components/combobox"; -import { inject, observer } from "mobx-react"; -import { StyledWatermark } from "./StyledComponent"; import { DropDownItem } from "@docspace/shared/components/drop-down-item"; import { FileInput } from "@docspace/shared/components/file-input"; import { imageProcessing } from "@docspace/shared/utils/common"; -import { Button } from "@docspace/shared/components/button"; - -import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg"; import { ButtonDelete } from "@docspace/shared/components/image-editor"; +import { HelpButton } from "@docspace/shared/components/help-button"; + +import { StyledWatermark } from "./StyledComponent"; const scaleOptions = [ { key: 100, label: "100" }, @@ -96,8 +94,6 @@ const getInitialRotate = (rotate, isEdit) => { return item.key === rotate; }); - console.log("item", item, rotateOptions[0]); - return !item ? rotateOptions[0] : item; }; @@ -260,8 +256,20 @@ const ImageWatermark = ({ {selectedImageUrl && (
-
-
+
+
+ + {t("WatermarkPreview")} + + {t("WatermarkPreviewHelp")} + } + offsetRight={0} + className="settings_unavailable" + /> +
+
logo { createEditRoomStore; const { imageUrl } = watermarksSettings; - console.log("watermarksSettings", watermarksSettings); + return { setWatermarks, initialWatermarksSettings, diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/StyledComponent.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/StyledComponent.js index aab74869ac..dcb55f5fd2 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/StyledComponent.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/StyledComponent.js @@ -50,7 +50,17 @@ const StyledWatermark = styled.div` grid-template-columns: 216px auto; gap: 16px; - .HELLO { + .image-description { + display: flex; + gap: 8px; + align-items: baseline; + + .image-watermark_text { + margin-bottom: 8px; + } + } + + .image-watermark_wrapper { width: 216px; height: 216px; border: 1px solid #eceef1; diff --git a/packages/client/src/store/CreateEditRoomStore.js b/packages/client/src/store/CreateEditRoomStore.js index 1a83edb03f..52ea8186ce 100644 --- a/packages/client/src/store/CreateEditRoomStore.js +++ b/packages/client/src/store/CreateEditRoomStore.js @@ -124,19 +124,10 @@ class CreateEditRoomStore { }; isNotWatermarkSet = () => { - console.log( - "isNotWatermarkSet", - this.watermarksSettings, - this.watermarksSettings.enabled, - this.watermarksSettings.isImage, - !this.watermarksSettings.image, - !this.watermarksSettings.imageUrl, - ); - if ( - this.watermarksSettings.enabled && this.watermarksSettings.isImage && - !this.watermarksSettings.image + !this.watermarksSettings.image && + !this.watermarksSettings.imageUrl ) return true; @@ -176,17 +167,7 @@ class CreateEditRoomStore { img.onerror = (err) => onSetInfo(err); }; - console.log( - !watermarkImage, - !this.watermarksSettings.enabled, - this.watermarksSettings.imageUrl, - ); - - if ( - !watermarkImage && - !this.watermarksSettings.enabled && - this.watermarksSettings.imageUrl - ) { + if (!watermarkImage && this.watermarksSettings.imageUrl) { return setWatermarkSettings(room.id, { enabled: watermarksSettings.enabled, imageScale: watermarksSettings.imageScale,