Web: Watermarks: Added Checkbox.
This commit is contained in:
parent
4585f388e6
commit
d47c6beb31
@ -23,6 +23,7 @@
|
||||
"ReviewRoomTitle": "Review room",
|
||||
"RoomEditing": "Room editing",
|
||||
"RootLabel": "Root",
|
||||
"Semitransparent": "Semitransparent",
|
||||
"TagsPlaceholder": "Add a tag",
|
||||
"Text": "Text",
|
||||
"ThirdPartyStorageComboBoxPlaceholder": "Select storage",
|
||||
|
@ -9,6 +9,9 @@ const StyledWatermark = styled.div`
|
||||
.watermark-title {
|
||||
margin: 16px 0 4px 0;
|
||||
}
|
||||
.watermark-checkbox {
|
||||
margin: 18px 0 0 0;
|
||||
}
|
||||
`;
|
||||
const StyledBody = styled.div`
|
||||
.types-content {
|
||||
|
@ -4,11 +4,12 @@ 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 Checkbox from "@docspace/components/checkbox";
|
||||
|
||||
import { StyledWatermark } from "./StyledComponent";
|
||||
|
||||
const options = (t) => [
|
||||
{ key: "diagonal", label: t("Diagonal"), default: true },
|
||||
{ key: "diagonal", label: t("Diagonal") },
|
||||
{ key: "horizontal", label: t("Horizontal") },
|
||||
];
|
||||
const TextWatermark = () => {
|
||||
@ -17,15 +18,20 @@ const TextWatermark = () => {
|
||||
const typesOptions = options(t);
|
||||
|
||||
const [value, setValue] = useState("");
|
||||
const [isChecked, setIsChecked] = useState(true);
|
||||
const [selectedOption, setSelectedOption] = useState(typesOptions[0]);
|
||||
|
||||
const onChange = (e) => {
|
||||
setValue(e.target.value);
|
||||
const { value } = e.target;
|
||||
setValue(value);
|
||||
};
|
||||
|
||||
const onTypeChange = (item) => {
|
||||
setSelectedOption(item);
|
||||
};
|
||||
const onCheckboxChange = () => {
|
||||
setIsChecked(!isChecked);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledWatermark>
|
||||
@ -45,7 +51,12 @@ const TextWatermark = () => {
|
||||
options={typesOptions}
|
||||
onSelect={onTypeChange}
|
||||
scaled
|
||||
displaySelectedOption
|
||||
/>
|
||||
<Checkbox
|
||||
className="watermark-checkbox"
|
||||
label={t("Semitransparent")}
|
||||
onChange={onCheckboxChange}
|
||||
isChecked={isChecked}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
|
Loading…
Reference in New Issue
Block a user