From ab3bdbf08b3b811d8860307b6957bb10a6fce9fb Mon Sep 17 00:00:00 2001 From: Vladimir Khvan Date: Mon, 18 Dec 2023 17:46:23 +0500 Subject: [PATCH 001/244] Web: Client: JavascriptSDK: presets tiles were added --- .../public/locales/en/JavascriptSdk.json | 14 +++- .../developer-tools/JavascriptSDK/index.js | 74 ++++++++++++----- .../sub-components/PresetTile.js | 81 +++++++++++++++++++ packages/components/themes/base.js | 4 + packages/components/themes/dark.js | 4 + public/images/sdk-presets_editor.react.svg | 9 +++ .../sdk-presets_file-selector.react.svg | 9 +++ public/images/sdk-presets_manager.react.svg | 9 +++ .../sdk-presets_room-selector.react.svg | 9 +++ public/images/sdk-presets_viewer.react.svg | 9 +++ 10 files changed, 199 insertions(+), 23 deletions(-) create mode 100644 packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PresetTile.js create mode 100644 public/images/sdk-presets_editor.react.svg create mode 100644 public/images/sdk-presets_file-selector.react.svg create mode 100644 public/images/sdk-presets_manager.react.svg create mode 100644 public/images/sdk-presets_room-selector.react.svg create mode 100644 public/images/sdk-presets_viewer.react.svg diff --git a/packages/client/public/locales/en/JavascriptSdk.json b/packages/client/public/locales/en/JavascriptSdk.json index 5439ae5e79..4e08a362ce 100644 --- a/packages/client/public/locales/en/JavascriptSdk.json +++ b/packages/client/public/locales/en/JavascriptSdk.json @@ -13,26 +13,38 @@ "DataDisplay": "Data display settings", "Descending": "Descending", "EmbedCodeSuccessfullyCopied": "Embed code successfully copied to clipboard", + "Editor": "Editor", + "EditorDescription": "Allows you to open the SDK as a document editor for editing by specifying the id parameter for a file.", "EnterCount": "Enter count", "EnterHeight": "Enter height", "EnterId": "Enter id", "EnterPage": "Enter page number", "EnterWidth": "Enter width", "Filter": "Search, Filter and Sort", + "FileSelector": "File selector", + "FileSelectorDescription": "Opens the file selector and allows you to select a file from a list of available files.", "FrameId": "Frame id", "GetCode": "Get code to insert", "Header": "Header", "InterfaceElements": "Interface elements", + "InitializeSDK": "Initialize the SDK in the following modes", "ItemsCount": "Items count on one page", "ItemsCountDescription": "You can specify the number of files / folders displayed on one page, as well as specify which page to start displaying", "JavascriptSdk": "Javascript SDK", + "Manager": "Manager", + "ManagerDescription": "Displays a list of entities depending on the specified rootPath. It allows you to create rooms, folders, and files and work with them.", "Menu": "Left menu", "MobileOnly": "only mobile devices", "Page": "Display page (number)", "RoomOrFolder": "Room or Folder", "RoomOrFolderDescription": "You can select the section, room or folder you want to display", + "RoomSelector": "Room selector", + "RoomSelectorDescription": "Opens the room selector and allows you to select a room from a list of the available rooms.", "SDKDescription": "Using JavaScript SDK, you can embed a room or a folder from ONLYOFFICE DocSpace into your web interface as an iframe. Here, you can find settings for creating a sample iframe and configuring CSP. To use the complete SDK, please refer to the ", "SearchTerm": "Search term", "SortOrder": "Sort order", - "Title": "Navigate and Title" + "StartSettingUp": "Start setting up", + "Title": "Navigate and Title", + "Viewer": "Viewer", + "ViewerDescription": "Allows you to open the SDK as a document editor for viewing by specifying the id parameter for a file." } diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/index.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/index.js index 1ed50ce2a4..3a3ad5fc74 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/index.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/index.js @@ -24,6 +24,14 @@ import GetCodeDialog from "./sub-components/GetCodeDialog"; import CSP from "./sub-components/csp"; import Button from "@docspace/components/button"; +import PresetTile from "./sub-components/PresetTile"; + +import EditorImg from "PUBLIC_DIR/images/sdk-presets_editor.react.svg?url"; +import FileSelectorImg from "PUBLIC_DIR/images/sdk-presets_file-selector.react.svg?url"; +import ManagerImg from "PUBLIC_DIR/images/sdk-presets_manager.react.svg?url"; +import RoomSelectorImg from "PUBLIC_DIR/images/sdk-presets_room-selector.react.svg?url"; +import ViewerImg from "PUBLIC_DIR/images/sdk-presets_viewer.react.svg?url"; + const showPreviewThreshold = 720; const SDKContainer = styled(Box)` @@ -65,7 +73,7 @@ const Controls = styled(Box)` const CategoryHeader = styled.div` margin-top: 40px; - margin-bottom: 24px; + margin-bottom: 16px; font-size: ${(props) => props.theme.getCorrectFontSize("16px")}; font-style: normal; font-weight: 700; @@ -245,6 +253,20 @@ const FilesSelectorInputWrapper = styled.div` } `; +const PresetsContainer = styled.div` + display: grid; + grid-template-columns: repeat(2, minmax(min(200px, 100%), 1fr)); + gap: 16px; + + max-width: fit-content; + + margin-top: 16px; + + @media ${mobile} { + grid-template-columns: 1fr; + } +`; + const PortalIntegration = (props) => { const { t, setDocumentTitle, currentColorScheme, sdkLink } = props; @@ -279,9 +301,7 @@ const PortalIntegration = (props) => { const [height, setHeight] = useState("600"); const [withSubfolders, setWithSubfolders] = useState(true); const [isGetCodeDialogOpened, setIsGetCodeDialogOpened] = useState(false); - const [showPreview, setShowPreview] = useState( - window.innerWidth > showPreviewThreshold - ); + const [showPreview, setShowPreview] = useState(window.innerWidth > showPreviewThreshold); const [config, setConfig] = useState({ width: `${width}${widthDimension.label}`, @@ -311,9 +331,7 @@ const PortalIntegration = (props) => { const params = objectToGetParams(config); - loadScript(`${scriptUrl}${params}`, "integration", () => - window.DocSpace.SDK.initFrame(config) - ); + loadScript(`${scriptUrl}${params}`, "integration", () => window.DocSpace.SDK.initFrame(config)); }, 500); useEffect(() => { @@ -441,8 +459,7 @@ const PortalIntegration = (props) => { const onResize = () => { const isEnoughWidthForPreview = window.innerWidth > showPreviewThreshold; - if (isEnoughWidthForPreview !== showPreview) - setShowPreview(isEnoughWidthForPreview); + if (isEnoughWidthForPreview !== showPreview) setShowPreview(isEnoughWidthForPreview); }; useEffect(() => { @@ -463,9 +480,7 @@ const PortalIntegration = (props) => { const code = ( <> - - {t("CopyWindowCode")} - + {t("CopyWindowCode")}