Watermarks: Added text component.
This commit is contained in:
parent
da02a34b89
commit
4585f388e6
@ -1,4 +1,5 @@
|
|||||||
{
|
{
|
||||||
|
"Diagonal": "Diagonal",
|
||||||
"ChooseRoomType": "Choose room type",
|
"ChooseRoomType": "Choose room type",
|
||||||
"CollaborationRoomDescription": "Collaborate on one or multiple documents with your team",
|
"CollaborationRoomDescription": "Collaborate on one or multiple documents with your team",
|
||||||
"CollaborationRoomTitle": "Collaboration room",
|
"CollaborationRoomTitle": "Collaboration room",
|
||||||
@ -8,6 +9,7 @@
|
|||||||
"CustomRoomTitle": "Custom room",
|
"CustomRoomTitle": "Custom room",
|
||||||
"FillingFormsRoomDescription": "Build, share and fill document templates or work with the ready presets to quickly create documents of any type.",
|
"FillingFormsRoomDescription": "Build, share and fill document templates or work with the ready presets to quickly create documents of any type.",
|
||||||
"FillingFormsRoomTitle": "Filling forms room",
|
"FillingFormsRoomTitle": "Filling forms room",
|
||||||
|
"Horizontal": "Horizontal",
|
||||||
"Icon": "Icon",
|
"Icon": "Icon",
|
||||||
"MakeRoomPrivateDescription": "All files in this room will be encrypted.",
|
"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.",
|
"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.",
|
"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.",
|
"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.",
|
"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",
|
"ReviewRoomDescription": "Request a review or comments on the documents",
|
||||||
"ReviewRoomTitle": "Review room",
|
"ReviewRoomTitle": "Review room",
|
||||||
"RoomEditing": "Room editing",
|
"RoomEditing": "Room editing",
|
||||||
"RootLabel": "Root",
|
"RootLabel": "Root",
|
||||||
"TagsPlaceholder": "Add a tag",
|
"TagsPlaceholder": "Add a tag",
|
||||||
|
"Text": "Text",
|
||||||
"ThirdPartyStorageComboBoxPlaceholder": "Select storage",
|
"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.",
|
"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.",
|
"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",
|
"RestrictCopyAndDownload": "Restrict copy and download",
|
||||||
"RestrictCopyAndDownloadDescription": "Enable this setting to disable downloads and content copying for users with the \"{{role}}\" role.",
|
"RestrictCopyAndDownloadDescription": "Enable this setting to disable downloads and content copying for users with the \"{{role}}\" role.",
|
||||||
"AddWatermarksToDocuments": "Add watermarks to documents",
|
"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:"
|
"FilesOlderThan": "Files older than:"
|
||||||
}
|
}
|
||||||
|
@ -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 };
|
@ -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;
|
@ -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;
|
Loading…
Reference in New Issue
Block a user