Watermarks: Added text component.

packages/client/public/locales/en/CreateEditRoomDialog.json

@@ -1,4 +1,5 @@
 {
+  "Diagonal": "Diagonal",
   "ChooseRoomType": "Choose room type",
   "CollaborationRoomDescription": "Collaborate on one or multiple documents with your team",
   "CollaborationRoomTitle": "Collaboration room",
@@ -8,6 +9,7 @@
   "CustomRoomTitle": "Custom room",
   "FillingFormsRoomDescription": "Build, share and fill document templates or work with the ready presets to quickly create documents of any type.",
   "FillingFormsRoomTitle": "Filling forms room",
+  "Horizontal": "Horizontal",
   "Icon": "Icon",
   "MakeRoomPrivateDescription": "All files in this room will be encrypted.",
   "MakeRoomPrivateLimitationsWarningDescription": "With this feature, you can invite only existing DocSpace users. After creating a room, you will not be able to change the list of users.",
@@ -15,11 +17,14 @@
   "PublicRoomBarDescription": "This room is available to anyone with the link. External users will have View Only permission for all the files.",
   "PublicRoomDescription": "Invite users via external links to view documents without registration. You can also embed this room into any web interface.",
   "VirtualDataRoomDescription": "Use VDR for advanced file security and transparency while filling and signing documents step-by-step. Set watermarks, automatically index and track all content, restrict downloading and copying.",
+  "ViewerInfo": "Viewer info",
+  "Position": "Position",
   "ReviewRoomDescription": "Request a review or comments on the documents",
   "ReviewRoomTitle": "Review room",
   "RoomEditing": "Room editing",
   "RootLabel": "Root",
   "TagsPlaceholder": "Add a tag",
+  "Text": "Text",
   "ThirdPartyStorageComboBoxPlaceholder": "Select storage",
   "ThirdPartyStorageDescription": "Use third-party services as data storage for this room. A new folder for storing this room’s data will be created in the connected storage.",
   "ThirdPartyStorageNoStorageAlert": "Before, you need to connect the corresponding service in the “Integration” section. Otherwise, the connection will not be possible.",
@@ -34,6 +39,6 @@
   "RestrictCopyAndDownload": "Restrict copy and download",
   "RestrictCopyAndDownloadDescription": "Enable this setting to disable downloads and content copying for users with the \"{{role}}\" role.",
   "AddWatermarksToDocuments": "Add watermarks to documents",
-  "AddWatermarksToDocumentsDescription": "Protect all documents in this room with watermarks. If a document already contains one, it will not be replaced.",
+  "AddWatermarksToDocumentsDescription": "Protect all documents in this room with watermarks. If a document already contains one, it will not be replaced."
   "FilesOlderThan": "Files older than:"
 }

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/StyledComponent.js

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+
+const StyledWatermark = styled.div`
+  margin-top: 16px;
+  display: grid;
+  grid-gap: 24px;
+  grid-template-columns: minmax(214px, 324px) 1fr;
+
+  .watermark-title {
+    margin: 16px 0 4px 0;
+  }
+`;
+const StyledBody = styled.div`
+  .types-content {
+  }
+`;
+
+export { StyledWatermark, StyledBody };

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/Text.js

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import TextInput from "@docspace/components/text-input";
+import ComboBox from "@docspace/components/combobox";
+import Text from "@docspace/components/text";
+
+import { StyledWatermark } from "./StyledComponent";
+
+const options = (t) => [
+  { key: "diagonal", label: t("Diagonal"), default: true },
+  { key: "horizontal", label: t("Horizontal") },
+];
+const TextWatermark = () => {
+  const { t } = useTranslation(["CreateEditRoomDialog", "Common"]);
+
+  const typesOptions = options(t);
+
+  const [value, setValue] = useState("");
+  const [selectedOption, setSelectedOption] = useState(typesOptions[0]);
+
+  const onChange = (e) => {
+    setValue(e.target.value);
+  };
+
+  const onTypeChange = (item) => {
+    setSelectedOption(item);
+  };
+
+  return (
+    <StyledWatermark>
+      <div>
+        <TextInput
+          scale
+          value={value}
+          tabIndex={1}
+          isAutoFocussed
+          onChange={onChange}
+        />
+        <Text className="watermark-title" fontWeight={600} lineHeight="20px">
+          {t("Position")}
+        </Text>
+        <ComboBox
+          selectedOption={selectedOption}
+          options={typesOptions}
+          onSelect={onTypeChange}
+          scaled
+          displaySelectedOption
+        />
+      </div>
+      <div
+        style={{ width: "100px", height: "140px", backgroundColor: "red" }}
+      ></div>
+    </StyledWatermark>
+  );
+};
+export default TextWatermark;

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/index.js

@@ -0,0 +1,56 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import RadioButtonGroup from "@docspace/components/radio-button-group";
+
+import TextWatermark from "./Text";
+import { StyledBody } from "./StyledComponent";
+
+const textWatermark = "text",
+  imageWatermark = "image",
+  viewerInfoWatermark = "viewerInfo";
+
+const options = (t) => [
+  {
+    label: t("ViewerInfo"),
+    value: viewerInfoWatermark,
+  },
+  {
+    label: t("Text"),
+    value: textWatermark,
+  },
+  {
+    label: t("Common:Image"),
+    value: imageWatermark,
+  },
+];
+const Watermarks = () => {
+  const { t } = useTranslation(["CreateEditRoomDialog", "Common"]);
+  const [type, setType] = useState(textWatermark);
+
+  const onSelectType = (e) => {
+    const { value } = e.target;
+
+    setType(value);
+  };
+
+  const typeOptions = options(t);
+
+  return (
+    <StyledBody>
+      <RadioButtonGroup
+        name="watermarks-radiobutton"
+        fontSize="13px"
+        fontWeight="400"
+        spacing="8px"
+        options={typeOptions}
+        selected={type}
+        onClick={onSelectType}
+      />
+
+      {type === textWatermark && <TextWatermark />}
+    </StyledBody>
+  );
+};
+
+export default Watermarks;