IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Client: PortalSettings: JavascriptSDK: Added getSDKImagesUrls for modes

Browse Source
This commit is contained in:
Ilya Oleshko 2024-08-28 21:18:42 +03:00
parent 2f98eb9792
commit be5dde8ff6
2 changed files with 17 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/index.js
View File

@ -41,23 +41,10 @@ import { Text } from "@docspace/shared/components/text";
import CSP from "./sub-components/csp"; import CSP from "./sub-components/csp";
import PresetTile from "./sub-components/PresetTile"; import PresetTile from "./sub-components/PresetTile";
import PortalImg from "PUBLIC_DIR/images/sdk-presets_portal.react.svg?url";
import PublicRoomImg from "PUBLIC_DIR/images/sdk-presets_public-room.react.svg?url";
import RoomSelectorImg from "PUBLIC_DIR/images/sdk-presets_room-selector.react.svg?url";
import FileSelectorImg from "PUBLIC_DIR/images/sdk-presets_file-selector.react.svg?url";
import EditorImg from "PUBLIC_DIR/images/sdk-presets_editor.react.svg?url";
import ViewerImg from "PUBLIC_DIR/images/sdk-presets_viewer.react.svg?url";
import CustomImg from "PUBLIC_DIR/images/sdk-presets_custom.react.svg?url";
import PortalImgDark from "PUBLIC_DIR/images/sdk-presets_portal_dark.react.svg?url";
import PublicRoomImgDark from "PUBLIC_DIR/images/sdk-presets_public-room_dark.react.svg?url";
import RoomSelectorImgDark from "PUBLIC_DIR/images/sdk-presets_room-selector_dark.react.svg?url";
import FileSelectorImgDark from "PUBLIC_DIR/images/sdk-presets_file-selector_dark.react.svg?url";
import EditorImgDark from "PUBLIC_DIR/images/sdk-presets_editor_dark.react.svg?url";
import ViewerImgDark from "PUBLIC_DIR/images/sdk-presets_viewer_dark.react.svg?url";
import CustomImgDark from "PUBLIC_DIR/images/sdk-presets_custom_dark.react.svg?url";
import { setDocumentTitle } from "SRC_DIR/helpers/utils"; import { setDocumentTitle } from "SRC_DIR/helpers/utils";
import { getSDKImagesUrls } from "./utils";
const SDKContainer = styled(Box)` const SDKContainer = styled(Box)`
@media ${tablet} { @media ${tablet} {
width: 100%; width: 100%;
@ -140,43 +127,45 @@ const PortalIntegration = (props) => {
const navigateToEditor = () => navigate("editor"); const navigateToEditor = () => navigate("editor");
const navigateToViewer = () => navigate("viewer"); const navigateToViewer = () => navigate("viewer");
const sdkImages = getSDKImagesUrls(theme.isBase, true);
const presetsData = [ const presetsData = [
{ {
title: t("Common:ProductName"), title: t("Common:ProductName"),
description: t("PortalDescription", { description: t("PortalDescription", {
productName: t("Common:ProductName"), productName: t("Common:ProductName"),
}), }),
image: theme.isBase ? PortalImg : PortalImgDark, image: sdkImages.Portal,
handleOnClick: navigateToPortal, handleOnClick: navigateToPortal,
}, },
{ {
title: t("Common:PublicRoom"), title: t("Common:PublicRoom"),
description: t("PublicRoomDescription"), description: t("PublicRoomDescription"),
image: theme.isBase ? PublicRoomImg : PublicRoomImgDark, image: sdkImages.PublicRoom,
handleOnClick: navigateToPublicRoom, handleOnClick: navigateToPublicRoom,
}, },
{ {
title: t("Common:Editor"), title: t("Common:Editor"),
description: t("EditorDescription"), description: t("EditorDescription"),
image: theme.isBase ? EditorImg : EditorImgDark, image: sdkImages.Editor,
handleOnClick: navigateToEditor, handleOnClick: navigateToEditor,
}, },
{ {
title: t("Viewer"), title: t("Viewer"),
description: t("ViewerDescription"), description: t("ViewerDescription"),
image: theme.isBase ? ViewerImg : ViewerImgDark, image: sdkImages.Viewer,
handleOnClick: navigateToViewer, handleOnClick: navigateToViewer,
}, },
{ {
title: t("RoomSelector"), title: t("RoomSelector"),
description: t("RoomSelectorDescription"), description: t("RoomSelectorDescription"),
image: theme.isBase ? RoomSelectorImg : RoomSelectorImgDark, image: sdkImages.RoomSelector,
handleOnClick: navigateToRoomSelector, handleOnClick: navigateToRoomSelector,
}, },
{ {
title: t("FileSelector"), title: t("FileSelector"),
description: t("FileSelectorDescription"), description: t("FileSelectorDescription"),
image: theme.isBase ? FileSelectorImg : FileSelectorImgDark, image: sdkImages.FileSelector,
handleOnClick: navigateToFileSelector, handleOnClick: navigateToFileSelector,
}, },
{ {
@ -184,7 +173,7 @@ const PortalIntegration = (props) => {
description: t("CustomDescription", { description: t("CustomDescription", {
productName: t("Common:ProductName"), productName: t("Common:ProductName"),
}), }),
image: theme.isBase ? CustomImg : CustomImgDark, image: sdkImages.Custom,
handleOnClick: navigateToCustom, handleOnClick: navigateToCustom,
}, },
]; ];

7
packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PresetTile.js
View File

@ -91,7 +91,12 @@ const PresetTile = (props) => {
<Text fontSize="16px" lineHeight="22px" fontWeight={700}> <Text fontSize="16px" lineHeight="22px" fontWeight={700}>
{title} {title}
</Text> </Text>
<ReactSVG src={image} /> <ReactSVG
src={image}
beforeInjection={(svg) => {
svg.setAttribute("style", "width: 100%; height: auto");
}}
/>
<Text lineHeight="20px">{description}</Text> <Text lineHeight="20px">{description}</Text>
</div> </div>