Web: Templates: added CreateRoomTemplateDialog
This commit is contained in:
parent
691e5b4021
commit
63f17aa4c8
@ -65,6 +65,7 @@ import {
|
||||
PluginDialog,
|
||||
DeletePluginDialog,
|
||||
ShareFolderDialog,
|
||||
CreateRoomTemplateDialog,
|
||||
} from "../dialogs";
|
||||
import ConvertPasswordDialog from "../dialogs/ConvertPasswordDialog";
|
||||
import ArchiveDialog from "../dialogs/ArchiveDialog";
|
||||
@ -127,6 +128,7 @@ const Panels = (props) => {
|
||||
changeRoomOwnerIsVisible,
|
||||
deletePluginDialogVisible,
|
||||
shareFolderDialogVisible,
|
||||
createRoomTemplateDialogVisible,
|
||||
} = props;
|
||||
|
||||
const [createPDFFormFile, setCreatePDFFormFile] = useState({
|
||||
@ -312,6 +314,9 @@ const Panels = (props) => {
|
||||
{...createPDFFormFile}
|
||||
/>
|
||||
),
|
||||
createRoomTemplateDialogVisible && (
|
||||
<CreateRoomTemplateDialog key="create-room-template-dialog" />
|
||||
),
|
||||
];
|
||||
};
|
||||
|
||||
@ -370,6 +375,7 @@ export default inject(
|
||||
leaveRoomDialogVisible,
|
||||
changeRoomOwnerIsVisible,
|
||||
shareFolderDialogVisible,
|
||||
createRoomTemplateDialogVisible,
|
||||
} = dialogsStore;
|
||||
|
||||
const { preparationPortalDialogVisible } = backup;
|
||||
@ -435,6 +441,7 @@ export default inject(
|
||||
changeRoomOwnerIsVisible,
|
||||
deletePluginDialogVisible,
|
||||
shareFolderDialogVisible,
|
||||
createRoomTemplateDialogVisible,
|
||||
};
|
||||
},
|
||||
)(observer(Panels));
|
||||
|
@ -54,6 +54,7 @@ export type FilesSelectorProps = {
|
||||
isMove?: boolean;
|
||||
isCopy?: boolean;
|
||||
isRestore: boolean;
|
||||
isTemplate: boolean;
|
||||
isRestoreAll?: boolean;
|
||||
isSelect?: boolean;
|
||||
isFormRoom?: boolean;
|
||||
|
@ -75,6 +75,7 @@ const FilesSelectorWrapper = ({
|
||||
isMove,
|
||||
isCopy,
|
||||
isRestore,
|
||||
isTemplate,
|
||||
isRestoreAll,
|
||||
isSelect,
|
||||
isFormRoom,
|
||||
@ -277,6 +278,7 @@ const FilesSelectorWrapper = ({
|
||||
isRestore,
|
||||
isFormRoom,
|
||||
isThirdParty,
|
||||
isTemplate,
|
||||
isSelectFolder,
|
||||
);
|
||||
|
||||
|
@ -44,6 +44,7 @@ export const getHeaderLabel = (
|
||||
isFormRoom?: boolean,
|
||||
isThirdParty?: boolean,
|
||||
isSelectFolder?: boolean,
|
||||
isTemplate?: boolean,
|
||||
) => {
|
||||
if (isRestore) return t("Common:RestoreTo");
|
||||
if (isSelectFolder) return t("Common:SelectFolder");
|
||||
@ -53,6 +54,9 @@ export const getHeaderLabel = (
|
||||
if (isSelect) {
|
||||
return filterParam ? t("Common:SelectFile") : t("Common:SelectAction");
|
||||
}
|
||||
if (isTemplate) {
|
||||
return t("Files:FromTemplate");
|
||||
}
|
||||
|
||||
if (isFormRoom) {
|
||||
return t("Common:SelectFromDocSpace");
|
||||
|
@ -0,0 +1,63 @@
|
||||
// (c) Copyright Ascensio System SIA 2009-2024
|
||||
//
|
||||
// This program is a free software product.
|
||||
// You can redistribute it and/or modify it under the terms
|
||||
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
|
||||
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
|
||||
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
|
||||
// any third-party rights.
|
||||
//
|
||||
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
|
||||
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
|
||||
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
||||
//
|
||||
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
|
||||
//
|
||||
// The interactive user interfaces in modified source and object code versions of the Program must
|
||||
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
|
||||
//
|
||||
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
|
||||
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
|
||||
// trademark law for use of our trademarks.
|
||||
//
|
||||
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
|
||||
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { toastr } from "@docspace/shared/components/toast";
|
||||
|
||||
import { CreateRoomTemplateDialog } from "../dialogs";
|
||||
let timerId = null;
|
||||
const CreateRoomTemplateEvent = (props) => {
|
||||
const { visible, onClose, item, fetchTags } = props;
|
||||
|
||||
const [fetchedTags, setFetchedTags] = useState([]);
|
||||
|
||||
const fetchTagsAction = useCallback(async () => {
|
||||
const tags = await fetchTags();
|
||||
setFetchedTags(tags);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchTagsAction();
|
||||
}, [fetchTagsAction]);
|
||||
|
||||
return (
|
||||
<CreateRoomTemplateDialog
|
||||
visible={visible}
|
||||
item={item}
|
||||
// onSaveClick={onSaveClick}
|
||||
onClose={onClose}
|
||||
fetchedTags={fetchedTags}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ tagsStore }) => {
|
||||
const { fetchTags } = tagsStore;
|
||||
return { fetchTags };
|
||||
})(observer(CreateRoomTemplateEvent));
|
@ -40,6 +40,7 @@ import EditGroupEvent from "./GroupEvents/EditGroupEvent";
|
||||
import ChangeUserTypeEvent from "./ChangeUserTypeEvent";
|
||||
import CreatePluginFile from "./CreatePluginFileEvent";
|
||||
import ChangeQuotaEvent from "./ChangeQuotaEvent";
|
||||
import CreateRoomTemplateEvent from "./CreateRoomTemplateEvent";
|
||||
const GlobalEvents = ({ enablePlugins, eventListenerItemsList }) => {
|
||||
const [createDialogProps, setCreateDialogProps] = useState({
|
||||
visible: false,
|
||||
@ -96,6 +97,11 @@ const GlobalEvents = ({ enablePlugins, eventListenerItemsList }) => {
|
||||
props: null,
|
||||
onClose: null,
|
||||
});
|
||||
const [createRoomTemplateDialog, setCreateRoomTemplateDialog] = useState({
|
||||
visible: false,
|
||||
props: null,
|
||||
onClose: null,
|
||||
});
|
||||
|
||||
const eventHandlersList = useRef([]);
|
||||
|
||||
@ -250,6 +256,24 @@ const GlobalEvents = ({ enablePlugins, eventListenerItemsList }) => {
|
||||
},
|
||||
});
|
||||
}, []);
|
||||
|
||||
const onCreateRoomTemplate = (e) => {
|
||||
console.log("onCreateRoomTemplate", e);
|
||||
|
||||
const visible = e.item ? true : false;
|
||||
|
||||
setCreateRoomTemplateDialog({
|
||||
visible: visible,
|
||||
item: e.item,
|
||||
onClose: () => {
|
||||
setCreateRoomTemplateDialog({
|
||||
visible: false,
|
||||
item: null,
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener(Events.CREATE, onCreate);
|
||||
window.addEventListener(Events.RENAME, onRename);
|
||||
@ -259,6 +283,7 @@ const GlobalEvents = ({ enablePlugins, eventListenerItemsList }) => {
|
||||
window.addEventListener(Events.GROUP_CREATE, onCreateGroup);
|
||||
window.addEventListener(Events.GROUP_EDIT, onEditGroup);
|
||||
window.addEventListener(Events.CHANGE_QUOTA, onChangeQuota);
|
||||
window.addEventListener(Events.CREATE_ROOM_TEMPLATE, onCreateRoomTemplate);
|
||||
if (enablePlugins) {
|
||||
window.addEventListener(
|
||||
Events.CREATE_PLUGIN_FILE,
|
||||
@ -286,6 +311,10 @@ const GlobalEvents = ({ enablePlugins, eventListenerItemsList }) => {
|
||||
window.removeEventListener(Events.CHANGE_USER_TYPE, onChangeUserType);
|
||||
window.removeEventListener(Events.GROUP_CREATE, onCreateGroup);
|
||||
window.removeEventListener(Events.GROUP_EDIT, onEditGroup);
|
||||
window.addEventListener(
|
||||
Events.CREATE_ROOM_TEMPLATE,
|
||||
onCreateRoomTemplate,
|
||||
);
|
||||
|
||||
if (enablePlugins) {
|
||||
window.removeEventListener(
|
||||
@ -346,6 +375,12 @@ const GlobalEvents = ({ enablePlugins, eventListenerItemsList }) => {
|
||||
{...createPluginFileDialog}
|
||||
/>
|
||||
),
|
||||
createRoomTemplateDialog.visible && (
|
||||
<CreateRoomTemplateEvent
|
||||
key={Events.CREATE_PLUGIN_FILE}
|
||||
{...createRoomTemplateDialog}
|
||||
/>
|
||||
),
|
||||
changeQuotaDialog.visible && (
|
||||
<ChangeQuotaEvent key={Events.CHANGE_QUOTA} {...changeQuotaDialog} />
|
||||
),
|
||||
|
@ -42,6 +42,8 @@ export const getRoomTypeTitleTranslation = (roomType = 1, t) => {
|
||||
return t("Files:PublicRoom");
|
||||
case RoomsType.FormRoom:
|
||||
return t("CreateEditRoomDialog:FormFilingRoomTitle");
|
||||
case RoomsType.TemplateRoom:
|
||||
return t("Files:FromTemplate");
|
||||
}
|
||||
};
|
||||
|
||||
@ -61,6 +63,8 @@ export const getRoomTypeDescriptionTranslation = (roomType = 1, t) => {
|
||||
return t("CreateEditRoomDialog:PublicRoomDescription");
|
||||
case RoomsType.FormRoom:
|
||||
return t("CreateEditRoomDialog:FormFilingRoomDescription");
|
||||
case RoomsType.TemplateRoom:
|
||||
return t("CreateEditRoomDialog:FromTemplateDescription");
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -0,0 +1,261 @@
|
||||
// (c) Copyright Ascensio System SIA 2009-2024
|
||||
//
|
||||
// This program is a free software product.
|
||||
// You can redistribute it and/or modify it under the terms
|
||||
// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
|
||||
// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
|
||||
// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
|
||||
// any third-party rights.
|
||||
//
|
||||
// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
|
||||
// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
|
||||
// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
||||
//
|
||||
// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
|
||||
//
|
||||
// The interactive user interfaces in modified source and object code versions of the Program must
|
||||
// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
|
||||
//
|
||||
// Pursuant to Section 7(b) of the License you must retain the original Product logo when
|
||||
// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
|
||||
// trademark law for use of our trademarks.
|
||||
//
|
||||
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
|
||||
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import styled, { css } from "styled-components";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { Button } from "@docspace/shared/components/button";
|
||||
import { ModalDialog } from "@docspace/shared/components/modal-dialog";
|
||||
import { Text } from "@docspace/shared/components/text";
|
||||
import { Checkbox } from "@docspace/shared/components/checkbox";
|
||||
|
||||
import RoomType from "../CreateEditRoomDialog/sub-components/RoomType";
|
||||
import InputParam from "../CreateEditRoomDialog/sub-components/Params/InputParam";
|
||||
import TagInput from "../CreateEditRoomDialog/sub-components/TagInput";
|
||||
import TagHandler from "../CreateEditRoomDialog/handlers/TagHandler";
|
||||
import { ImageEditor } from "@docspace/shared/components/image-editor";
|
||||
import ChangeRoomOwner from "../CreateEditRoomDialog/sub-components/ChangeRoomOwner";
|
||||
import PreviewTile from "@docspace/shared/components/image-editor/PreviewTile";
|
||||
import { getRoomTypeTitleTranslation } from "../CreateEditRoomDialog/data";
|
||||
|
||||
const StyledModalDialog = styled(ModalDialog)`
|
||||
.create-room-template_body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.icon-editor_text {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.icon-editor {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledButtonContainer = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
gap: 8px;
|
||||
|
||||
margin-top: 16px;
|
||||
`;
|
||||
|
||||
const CreateRoomTemplate = (props) => {
|
||||
const { visible, onClose, item, fetchedTags, folderFormValidation } = props;
|
||||
const { roomType, title, logo, createdBy } = item;
|
||||
console.log("item", item);
|
||||
|
||||
const startTags = Object.values(item.tags);
|
||||
const startObjTags = startTags.map((tag, i) => ({ id: i, name: tag }));
|
||||
const [tags, setTags] = useState(startObjTags);
|
||||
|
||||
const { t } = useTranslation(["CreateEditRoomDialog", "Common", "Files"]);
|
||||
|
||||
const [roomName, setRoomName] = useState(title);
|
||||
const [isValidTitle, setIsValidTitle] = useState(true);
|
||||
const [isWrongTitle, setIsWrongTitle] = useState(false);
|
||||
const [icon, setIcon] = useState({
|
||||
uploadedFile: logo.original,
|
||||
tmpFile: "",
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
zoom: 1,
|
||||
});
|
||||
const [previewIcon, setPreviewIcon] = useState(null);
|
||||
|
||||
const [openCreatedIsChecked, setOpenCreatedIsChecked] = useState(true);
|
||||
const [isScrollLocked, setIsScrollLocked] = useState(false);
|
||||
|
||||
const onChangeName = (e) => {
|
||||
setIsValidTitle(true);
|
||||
if (e.target.value.match(folderFormValidation)) {
|
||||
setIsWrongTitle(true);
|
||||
} else {
|
||||
setIsWrongTitle(false);
|
||||
}
|
||||
setRoomName(e.target.value);
|
||||
};
|
||||
|
||||
const onKeyUp = (e) => {
|
||||
if (isWrongTitle) return;
|
||||
if (e.keyCode === 13) onCreateRoomTemplate();
|
||||
};
|
||||
|
||||
const onCreateRoomTemplate = () => {
|
||||
if (!roomName.trim()) {
|
||||
setIsValidTitle(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// onSave(roomParams);
|
||||
|
||||
console.log("onCreateRoomTemplate");
|
||||
// onClose();
|
||||
};
|
||||
|
||||
const setRoomTags = (newTags) => {
|
||||
setTags(newTags);
|
||||
};
|
||||
|
||||
const onChangeImage = (icon) => {
|
||||
setIcon(icon);
|
||||
};
|
||||
|
||||
const onChangeOpenCreated = () => {
|
||||
setOpenCreatedIsChecked(!openCreatedIsChecked);
|
||||
};
|
||||
|
||||
const tagHandler = new TagHandler(tags, setRoomTags, fetchedTags);
|
||||
|
||||
return (
|
||||
<StyledModalDialog
|
||||
displayType="aside"
|
||||
withBodyScroll
|
||||
visible={visible}
|
||||
onClose={onClose}
|
||||
withFooterBorder
|
||||
>
|
||||
<ModalDialog.Header>
|
||||
<Text fontSize="21px" fontWeight={700}>
|
||||
{t("Files:SaveAsTemplate")}
|
||||
</Text>
|
||||
</ModalDialog.Header>
|
||||
|
||||
<ModalDialog.Body>
|
||||
<div className="create-room-template_body">
|
||||
<RoomType t={t} roomType={roomType} type="displayItem" />
|
||||
|
||||
<InputParam
|
||||
id="shared_room-name"
|
||||
title={`${t("Files:TemplateName")}:`}
|
||||
placeholder={t("Common:EnterName")}
|
||||
value={roomName}
|
||||
onChange={onChangeName}
|
||||
// isDisabled={isDisabled}
|
||||
isValidTitle={isValidTitle}
|
||||
isWrongTitle={isWrongTitle}
|
||||
errorMessage={
|
||||
isWrongTitle
|
||||
? t("Files:ContainsSpecCharacter")
|
||||
: t("Common:RequiredField")
|
||||
}
|
||||
onKeyUp={onKeyUp}
|
||||
isAutoFocussed
|
||||
/>
|
||||
|
||||
<TagInput
|
||||
t={t}
|
||||
title={t("Files:RoomTags")}
|
||||
tagHandler={tagHandler}
|
||||
setIsScrollLocked={setIsScrollLocked}
|
||||
tooltipLabel={t("Files:RoomTagsTooltip")}
|
||||
// isDisabled={isDisabled}
|
||||
/>
|
||||
|
||||
<ChangeRoomOwner
|
||||
roomOwner={createdBy}
|
||||
isTemplate
|
||||
onOwnerChange={() => console.log("Access settings")}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<Text fontWeight={600} className="icon-editor_text">
|
||||
{t("Icon")}
|
||||
</Text>
|
||||
<ImageEditor
|
||||
t={t}
|
||||
// isDisabled={isDisabled}
|
||||
image={icon}
|
||||
setPreview={setPreviewIcon}
|
||||
onChangeImage={onChangeImage}
|
||||
classNameWrapperImageCropper={"icon-editor"}
|
||||
Preview={
|
||||
<PreviewTile
|
||||
t={t}
|
||||
title={roomName || t("Files:NewRoom")}
|
||||
subtitle={getRoomTypeTitleTranslation(roomType, t)}
|
||||
previewIcon={previewIcon}
|
||||
// isDisabled={isDisabled}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ModalDialog.Body>
|
||||
|
||||
<ModalDialog.Footer>
|
||||
<Checkbox
|
||||
label={t("Files:OpenCreatedTemplate")}
|
||||
isChecked={openCreatedIsChecked}
|
||||
onChange={onChangeOpenCreated}
|
||||
/>
|
||||
|
||||
<StyledButtonContainer>
|
||||
<Button
|
||||
id="create-room-template-modal_submit"
|
||||
tabIndex={5}
|
||||
label={t("Files:CreateTemplate")}
|
||||
size="normal"
|
||||
primary
|
||||
scale
|
||||
onClick={onCreateRoomTemplate}
|
||||
isDisabled={isWrongTitle}
|
||||
// isLoading={isLoading}
|
||||
/>
|
||||
<Button
|
||||
id="create-room-template-modal_cancel"
|
||||
tabIndex={5}
|
||||
label={t("Common:CancelButton")}
|
||||
size="normal"
|
||||
scale
|
||||
// isDisabled={isLoading}
|
||||
onClick={onClose}
|
||||
/>
|
||||
</StyledButtonContainer>
|
||||
</ModalDialog.Footer>
|
||||
</StyledModalDialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ settingsStore }) => {
|
||||
const { folderFormValidation } = settingsStore;
|
||||
return { folderFormValidation };
|
||||
})(observer(CreateRoomTemplate));
|
@ -69,6 +69,7 @@ import ShareFolderDialog from "./ShareFolderDialog";
|
||||
import EditGroupMembersDialog from "./EditGroupMembersDialog";
|
||||
import ChangeStorageQuotaDialog from "./ChangeStorageQuotaDialog";
|
||||
import DeleteGroupDialog from "./DeleteGroupDialog";
|
||||
import CreateRoomTemplateDialog from "./CreateRoomTemplate";
|
||||
|
||||
export {
|
||||
EmptyTrashDialog,
|
||||
@ -116,4 +117,5 @@ export {
|
||||
ChangeQuotaDialog,
|
||||
ChangeStorageQuotaDialog,
|
||||
DeleteGroupDialog,
|
||||
CreateRoomTemplateDialog,
|
||||
};
|
||||
|
@ -64,6 +64,7 @@ import PluginActionsSvgUrl from "PUBLIC_DIR/images/plugin.actions.react.svg?url"
|
||||
import LeaveRoomSvgUrl from "PUBLIC_DIR/images/logout.react.svg?url";
|
||||
import CatalogRoomsReactSvgUrl from "PUBLIC_DIR/images/catalog.rooms.react.svg?url";
|
||||
import RemoveOutlineSvgUrl from "PUBLIC_DIR/images/remove.react.svg?url";
|
||||
import CreateTemplateSvgUrl from "PUBLIC_DIR/images/template.react.svg?url";
|
||||
import { getCategoryUrl } from "@docspace/client/src/helpers/utils";
|
||||
|
||||
import { makeAutoObservable } from "mobx";
|
||||
@ -664,6 +665,12 @@ class ContextOptionsStore {
|
||||
window.dispatchEvent(event);
|
||||
};
|
||||
|
||||
onCreateRoomTemplate = (item) => {
|
||||
const event = new Event(Events.CREATE_ROOM_TEMPLATE);
|
||||
event.item = item;
|
||||
window.dispatchEvent(event);
|
||||
};
|
||||
|
||||
// onLoadLinks = async (t, item) => {
|
||||
// const promise = new Promise(async (resolve, reject) => {
|
||||
// let linksArray = [];
|
||||
@ -1362,6 +1369,15 @@ class ContextOptionsStore {
|
||||
},
|
||||
...pinOptions,
|
||||
...muteOptions,
|
||||
{
|
||||
id: "option_save-as-template",
|
||||
key: "save-as-template",
|
||||
label: t("SaveAsTemplate"),
|
||||
icon: CreateTemplateSvgUrl,
|
||||
onClick: () => this.onCreateRoomTemplate(item),
|
||||
badgeLabel: t("New").toUpperCase(),
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
id: "option_owner-change",
|
||||
key: "owner-change",
|
||||
|
@ -114,6 +114,7 @@ class DialogsStore {
|
||||
|
||||
shareFolderDialogVisible = false;
|
||||
cancelUploadDialogVisible = false;
|
||||
createRoomTemplateDialogVisible = false;
|
||||
|
||||
selectFileFormRoomFilterParam = FilesSelectorFilterTypes.DOCX;
|
||||
|
||||
@ -516,6 +517,10 @@ class DialogsStore {
|
||||
setCancelUploadDialogVisible = (visible) => {
|
||||
this.cancelUploadDialogVisible = visible;
|
||||
};
|
||||
|
||||
setCreateRoomTemplateDialogVisible = (visible) => {
|
||||
this.createRoomTemplateDialogVisible = visible;
|
||||
};
|
||||
}
|
||||
|
||||
export default DialogsStore;
|
||||
|
@ -2302,6 +2302,7 @@ class FilesStore {
|
||||
"unpin-room",
|
||||
"mute-room",
|
||||
"unmute-room",
|
||||
"save-as-template",
|
||||
"separator1",
|
||||
"download",
|
||||
"archive-room",
|
||||
@ -2313,6 +2314,7 @@ class FilesStore {
|
||||
if (!canEditRoom) {
|
||||
roomOptions = this.removeOptions(roomOptions, [
|
||||
"edit-room",
|
||||
"save-as-template",
|
||||
"reconnect-storage",
|
||||
]);
|
||||
}
|
||||
|
@ -376,6 +376,10 @@ const StyledContextMenu = styled.div<{
|
||||
}
|
||||
}
|
||||
|
||||
.p-submenu-badge {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.p-contextmenu-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
|
@ -57,6 +57,7 @@ export type ContextMenuType = {
|
||||
isOutsideLink?: boolean;
|
||||
withToggle?: boolean;
|
||||
checked?: boolean;
|
||||
badgeLabel?: string;
|
||||
};
|
||||
|
||||
export type SeparatorType = {
|
||||
|
@ -51,6 +51,7 @@ import {
|
||||
ContextMenuType,
|
||||
SeparatorType,
|
||||
} from "../ContextMenu.types";
|
||||
import { Badge } from "../../badge";
|
||||
|
||||
const SubMenu = (props: {
|
||||
model: ContextMenuModel[];
|
||||
@ -296,6 +297,18 @@ const SubMenu = (props: {
|
||||
{item.isOutsideLink && (
|
||||
<OutsdideIcon className={subMenuIconClassName} />
|
||||
)}
|
||||
{item.badgeLabel && (
|
||||
<Badge
|
||||
label={item.badgeLabel}
|
||||
className={subMenuIconClassName + " p-submenu-badge"}
|
||||
backgroundColor="#7757D9"
|
||||
fontSize="9px"
|
||||
fontWeight={700}
|
||||
borderRadius="50px"
|
||||
noHover
|
||||
isHovered={false}
|
||||
/>
|
||||
)}
|
||||
</a>
|
||||
);
|
||||
|
||||
|
@ -125,7 +125,10 @@ const StyledImageCropper = styled.div<{ disableImageRescaling?: boolean }>`
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledPreviewTile = styled.div<{ isGeneratedPreview?: boolean }>`
|
||||
const StyledPreviewTile = styled.div<{
|
||||
isGeneratedPreview?: boolean;
|
||||
isShorten: boolean;
|
||||
}>`
|
||||
background: ${(props) =>
|
||||
props.theme.createEditRoomDialog.previewTile.background};
|
||||
width: 214px;
|
||||
@ -161,7 +164,9 @@ const StyledPreviewTile = styled.div<{ isGeneratedPreview?: boolean }>`
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
&-title {
|
||||
&-title,
|
||||
&-sub-title,
|
||||
&-wrapper-title {
|
||||
font-weight: 600;
|
||||
font-size: ${(props) => props.theme.getCorrectFontSize("16px")};
|
||||
line-height: 22px;
|
||||
@ -188,6 +193,20 @@ const StyledPreviewTile = styled.div<{ isGeneratedPreview?: boolean }>`
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
${(props) =>
|
||||
props.isShorten &&
|
||||
css`
|
||||
height: 68px;
|
||||
.tile-header {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.tile-header-sub-title {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
StyledPreviewTile.defaultProps = { theme: Base };
|
||||
|
||||
|
@ -32,34 +32,41 @@ import { StyledPreviewTile } from "../ImageEditor.styled";
|
||||
|
||||
const PreviewTile = ({
|
||||
title,
|
||||
subtitle,
|
||||
previewIcon,
|
||||
tags,
|
||||
defaultTagLabel,
|
||||
}: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
previewIcon: string;
|
||||
tags: string[];
|
||||
defaultTagLabel: string;
|
||||
}) => {
|
||||
return (
|
||||
<StyledPreviewTile>
|
||||
<StyledPreviewTile isShorten={!tags}>
|
||||
<div className="tile-header">
|
||||
<img className="tile-header-icon" src={previewIcon} alt={title} />
|
||||
<div className="tile-header-title">{title}</div>
|
||||
</div>
|
||||
<div className="tile-tags">
|
||||
{tags.length ? (
|
||||
<Tags columnCount={2} tags={tags} onSelectTag={() => {}} />
|
||||
) : (
|
||||
<Tag
|
||||
className="type_tag"
|
||||
tag="script"
|
||||
label={defaultTagLabel}
|
||||
isDefault
|
||||
onClick={() => {}}
|
||||
/>
|
||||
)}
|
||||
<div className="tile-header-wrapper-title">
|
||||
<div className="tile-header-title">{title}</div>
|
||||
<div className="tile-header-sub-title">{subtitle}</div>
|
||||
</div>
|
||||
</div>
|
||||
{tags && (
|
||||
<div className="tile-tags">
|
||||
{tags.length ? (
|
||||
<Tags columnCount={2} tags={tags} onSelectTag={() => {}} />
|
||||
) : (
|
||||
<Tag
|
||||
className="type_tag"
|
||||
tag="script"
|
||||
label={defaultTagLabel}
|
||||
isDefault
|
||||
onClick={() => {}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</StyledPreviewTile>
|
||||
);
|
||||
};
|
||||
|
@ -36,6 +36,7 @@ import EditingSvg32Url from "PUBLIC_DIR/images/icons/32/room/editing.svg?url";
|
||||
// import ViewOnlySvg32Url from "PUBLIC_DIR/images/icons/32/room/view.only.svg?url";
|
||||
import PublicRoomSvg32Url from "PUBLIC_DIR/images/icons/32/room/public.svg?url";
|
||||
import FormRoomSvg32Url from "PUBLIC_DIR/images/icons/32/room/form.svg?url";
|
||||
import TemplateRoomsSvg32Url from "PUBLIC_DIR/images/icons/32/room/template.svg?url";
|
||||
|
||||
import { RoomsType } from "../../enums";
|
||||
|
||||
@ -76,6 +77,8 @@ const RoomLogoPure = ({
|
||||
return PublicRoomSvg32Url;
|
||||
case RoomsType.FormRoom:
|
||||
return FormRoomSvg32Url;
|
||||
case RoomsType.TemplateRoom:
|
||||
return TemplateRoomsSvg32Url;
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
|
@ -339,6 +339,7 @@ export const enum Events {
|
||||
CHANGE_QUOTA = "change_quota",
|
||||
CREATE_PLUGIN_FILE = "create_plugin_file",
|
||||
CREATE_PDF_FORM_FILE = "create_pdf_form_file",
|
||||
CREATE_ROOM_TEMPLATE = "create_room_template",
|
||||
}
|
||||
|
||||
/**
|
||||
@ -479,6 +480,7 @@ export enum RoomsType {
|
||||
// ReadOnlyRoom: 4, //TODO: Restore when certs will be done
|
||||
PublicRoom = 6,
|
||||
CustomRoom = 5,
|
||||
TemplateRoom = 7,
|
||||
}
|
||||
|
||||
export enum AccountsSearchArea {
|
||||
|
@ -46,4 +46,7 @@ export type RoomSelectorProps = TSelectorHeader &
|
||||
setIsDataReady?: (value: boolean) => void;
|
||||
submitButtonLabel?: string;
|
||||
withSearch?: boolean;
|
||||
|
||||
emptyScreenHeader?: string;
|
||||
emptyScreenDescription?: string;
|
||||
};
|
||||
|
@ -70,6 +70,8 @@ const RoomSelector = ({
|
||||
onCancel,
|
||||
|
||||
roomType,
|
||||
emptyScreenHeader,
|
||||
emptyScreenDescription,
|
||||
}: RoomSelectorProps) => {
|
||||
const { t }: { t: TTranslation } = useTranslation(["Common"]);
|
||||
|
||||
@ -217,8 +219,10 @@ const RoomSelector = ({
|
||||
onSubmit={onSubmit}
|
||||
isMultiSelect={isMultiSelect}
|
||||
emptyScreenImage={EmptyScreenCorporateSvgUrl}
|
||||
emptyScreenHeader={t("Common:EmptyRoomsHeader")}
|
||||
emptyScreenDescription={t("Common:EmptyRoomsDescription")}
|
||||
emptyScreenHeader={emptyScreenHeader ?? t("Common:EmptyRoomsHeader")}
|
||||
emptyScreenDescription={
|
||||
emptyScreenDescription ?? t("Common:EmptyRoomsDescription")
|
||||
}
|
||||
searchEmptyScreenImage={EmptyScreenCorporateSvgUrl}
|
||||
searchEmptyScreenHeader={t("Common:NotFoundTitle")}
|
||||
searchEmptyScreenDescription={t("Common:SearchEmptyRoomsDescription")}
|
||||
|
Loading…
Reference in New Issue
Block a user