From 6022c3f6d97c21eedbd39fcf54afe9da9628789f Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 29 May 2024 14:22:03 +0300 Subject: [PATCH 001/118] Web: Files: added Embedding panel --- .../public/locales/en/EmbeddingPanel.json | 4 +- .../panels/EmbeddingPanel/EmbeddingBody.js | 181 --------- .../EmbeddingPanel/StyledEmbeddingPanel.js | 101 +++-- .../components/panels/EmbeddingPanel/index.js | 130 ------- .../panels/EmbeddingPanel/index.tsx | 355 ++++++++++++++++++ .../sub-components/CheckboxElement.tsx | 68 ++++ .../sub-components/DisplayBlock.tsx | 83 ++++ .../views/Members/sub-components/LinkRow.js | 28 +- packages/shared/themes/base.ts | 4 + packages/shared/themes/dark.ts | 4 + 10 files changed, 592 insertions(+), 366 deletions(-) delete mode 100644 packages/client/src/components/panels/EmbeddingPanel/EmbeddingBody.js delete mode 100644 packages/client/src/components/panels/EmbeddingPanel/index.js create mode 100644 packages/client/src/components/panels/EmbeddingPanel/index.tsx create mode 100644 packages/client/src/components/panels/EmbeddingPanel/sub-components/CheckboxElement.tsx create mode 100644 packages/client/src/components/panels/EmbeddingPanel/sub-components/DisplayBlock.tsx diff --git a/packages/client/public/locales/en/EmbeddingPanel.json b/packages/client/public/locales/en/EmbeddingPanel.json index 7e5f4cdeda..881bec7049 100644 --- a/packages/client/public/locales/en/EmbeddingPanel.json +++ b/packages/client/public/locales/en/EmbeddingPanel.json @@ -3,5 +3,7 @@ "CodeCopySuccess": "Code has been copied to the clipboard", "EmbedCode": "Embed code", "Height": "Height", - "Width": "Width" + "Width": "Width", + "EmbeddingDescription": "Embed Public room into your website or blog. Apply additional display settings for customizing the embedded content.", + "CodeSuccessfullyCopied": "Code to insert successfully copied to clipboard" } diff --git a/packages/client/src/components/panels/EmbeddingPanel/EmbeddingBody.js b/packages/client/src/components/panels/EmbeddingPanel/EmbeddingBody.js deleted file mode 100644 index d335e0c91f..0000000000 --- a/packages/client/src/components/panels/EmbeddingPanel/EmbeddingBody.js +++ /dev/null @@ -1,181 +0,0 @@ -// (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 copy from "copy-to-clipboard"; -import { Text } from "@docspace/shared/components/text"; -import { Link } from "@docspace/shared/components/link"; -import { toastr } from "@docspace/shared/components/toast"; -import { TextInput } from "@docspace/shared/components/text-input"; -import { Textarea } from "@docspace/shared/components/textarea"; -import { IconButton } from "@docspace/shared/components/icon-button"; -import { Button } from "@docspace/shared/components/button"; -import CopyReactSvgUrl from "PUBLIC_DIR/images/copy.react.svg?url"; -import { StyledBody } from "./StyledEmbeddingPanel"; -import { objectToGetParams } from "@docspace/shared/utils/common"; - -const EmbeddingBody = ({ t, link, requestToken, roomId }) => { - const [size, setSize] = useState("auto"); - const [widthValue, setWidthValue] = useState("100%"); - const [heightValue, setHeightValue] = useState("100%"); - - const config = { - width: `${widthValue}`, - height: `${heightValue}`, - frameId: "ds-frame-embedding", - mode: "manager", - init: true, - showHeader: true, - showTitle: true, - showMenu: false, - showFilter: true, - rootPath: "/rooms/share", - id: roomId, - requestToken, - withSubfolders: false, - }; - - const scriptUrl = `${window.location.origin}/static/scripts/api.js`; - const params = objectToGetParams(config); - const codeBlock = `
Fallback text
\n`; - - const onChangeWidth = (e) => setWidthValue(e.target.value); - const onChangeHeight = (e) => setHeightValue(e.target.value); - const onCopyLink = () => { - copy(codeBlock); - toastr.success(t("EmbeddingPanel:CodeCopySuccess")); - }; - - const getSizes = (size) => { - switch (size) { - case "auto": - return ["100%", "100%"]; - case "mobile": - return ["400px", "600px"]; - case "tablet": - return ["600px", "800px"]; - default: - return ["100%", "100%"]; - } - }; - - const onSelectSize = (e) => { - const size = e.currentTarget.dataset.size; - const [width, height] = getSizes(size); - - setSize(size); - setWidthValue(width); - setHeightValue(height); - }; - - const onPreviewClick = () => { - console.log("onPreviewClick???"); - }; - - const linkProps = { - isHovered: true, - type: "action", - onClick: onSelectSize, - }; - - return ( - -
- {t("Common:Size")}: -
- - {t("Auto")} - - - - 600 x 800 px - - - - 400 x 600 px - -
-
-
- {t("Width")}: - -
-
- {t("Height")}: - -
- {/*
-
- - {t("EmbeddingPanel:EmbedCode")}: - - -