From 7d8cb75c9385e3e2bc434934d48e4eb77117147d Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Wed, 29 May 2024 17:56:28 +0300 Subject: [PATCH] Web: Files: EmbeddingPanel: fixed icon, added bar --- .../public/locales/en/EmbeddingPanel.json | 4 +- packages/client/public/locales/en/Files.json | 3 +- packages/client/src/components/Badges.js | 2 +- .../components/panels/EditLinkPanel/index.js | 4 + .../EmbeddingPanel/StyledEmbeddingPanel.js | 16 +++ .../panels/EmbeddingPanel/index.tsx | 122 ++++++++++++++++-- .../views/Members/sub-components/LinkRow.js | 2 +- .../src/pages/Home/Section/Header/index.js | 2 +- .../client/src/store/ContextOptionsStore.js | 2 +- .../public-room-bar/PublicRoomBar.types.ts | 4 +- .../components/public-room-bar/index.tsx | 16 ++- packages/shared/themes/base.ts | 1 + packages/shared/themes/dark.ts | 1 + ...et-link.reat.svg => tablet-link.react.svg} | 0 14 files changed, 160 insertions(+), 19 deletions(-) rename public/images/{tablet-link.reat.svg => tablet-link.react.svg} (100%) diff --git a/packages/client/public/locales/en/EmbeddingPanel.json b/packages/client/public/locales/en/EmbeddingPanel.json index 881bec7049..184a8f8b94 100644 --- a/packages/client/public/locales/en/EmbeddingPanel.json +++ b/packages/client/public/locales/en/EmbeddingPanel.json @@ -5,5 +5,7 @@ "Height": "Height", "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" + "CodeSuccessfullyCopied": "Code to insert successfully copied to clipboard", + "LinkProtectedWithPassword": "The link is protected with a password.", + "ContentRestricted": "Content copying, file downloading and printing are restricted." } diff --git a/packages/client/public/locales/en/Files.json b/packages/client/public/locales/en/Files.json index 751276474e..ae034f2fa2 100644 --- a/packages/client/public/locales/en/Files.json +++ b/packages/client/public/locales/en/Files.json @@ -183,5 +183,6 @@ "WantToRestoreTheRoom": "All shared links in this room will become active, and its contents will be available to everyone with the link. Do you want to restore the room?", "WantToRestoreTheRooms": "All shared links in restored rooms will become active, and their contents will be available to everyone with the room links. Do you want to restore the rooms?", "WithSubfolders": "With subfolders", - "YouLeftTheRoom": "You have left the room" + "YouLeftTheRoom": "You have left the room", + "Protected": "protected" } diff --git a/packages/client/src/components/Badges.js b/packages/client/src/components/Badges.js index 9df2a73936..b54bbbb40a 100644 --- a/packages/client/src/components/Badges.js +++ b/packages/client/src/components/Badges.js @@ -33,7 +33,7 @@ import FormFillRectSvgUrl from "PUBLIC_DIR/images/form.fill.rect.svg?url"; import AccessEditFormReactSvgUrl from "PUBLIC_DIR/images/access.edit.form.react.svg?url"; import FileActionsConvertEditDocReactSvgUrl from "PUBLIC_DIR/images/file.actions.convert.edit.doc.react.svg?url"; import LinkReactSvgUrl from "PUBLIC_DIR/images/link.react.svg?url"; -import TabletLinkReactSvgUrl from "PUBLIC_DIR/images/tablet-link.reat.svg?url"; +import TabletLinkReactSvgUrl from "PUBLIC_DIR/images/tablet-link.react.svg?url"; import Refresh12ReactSvgUrl from "PUBLIC_DIR/images/icons/12/refresh.react.svg?url"; import Mute12ReactSvgUrl from "PUBLIC_DIR/images/icons/12/mute.react.svg?url"; import Mute16ReactSvgUrl from "PUBLIC_DIR/images/icons/16/mute.react.svg?url"; diff --git a/packages/client/src/components/panels/EditLinkPanel/index.js b/packages/client/src/components/panels/EditLinkPanel/index.js index ca3ca8578c..9cb8fc1984 100644 --- a/packages/client/src/components/panels/EditLinkPanel/index.js +++ b/packages/client/src/components/panels/EditLinkPanel/index.js @@ -64,6 +64,7 @@ const EditLinkPanel = (props) => { language, isPublic, currentDeviceType, + setLinkParams, } = props; const [isLoading, setIsLoading] = useState(false); @@ -129,6 +130,7 @@ const EditLinkPanel = (props) => { editExternalLink(roomId, newLink) .then((link) => { setExternalLink(link); + setLinkParams({ link, roomId }); if (isEdit) { copy(linkValue); @@ -311,6 +313,7 @@ export default inject( unsavedChangesDialogVisible, setUnsavedChangesDialog, linkParams, + setLinkParams, } = dialogsStore; const { externalLinks, editExternalLink, setExternalLink } = publicRoomStore; @@ -342,6 +345,7 @@ export default inject( language: authStore.language, isPublic, currentDeviceType: settingsStore.currentDeviceType, + setLinkParams, }; }, )( diff --git a/packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js b/packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js index ffe68e3faf..2e59b18324 100644 --- a/packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js +++ b/packages/client/src/components/panels/EmbeddingPanel/StyledEmbeddingPanel.js @@ -72,6 +72,22 @@ const StyledBody = styled.div` margin-bottom: 18px; } + .embedding-panel_bar { + margin: 23px 0px 21px 0px; + + .embedding-panel_bar-header { + display: flex; + align-items: center; + gap: 4px; + } + + .header-icon { + svg path { + fill: ${({ theme }) => theme.embeddingPanel.iconColor}; + } + } + } + .embedding-panel_header-text { margin-bottom: 16px; } diff --git a/packages/client/src/components/panels/EmbeddingPanel/index.tsx b/packages/client/src/components/panels/EmbeddingPanel/index.tsx index db4edbac99..c46cc29acb 100644 --- a/packages/client/src/components/panels/EmbeddingPanel/index.tsx +++ b/packages/client/src/components/panels/EmbeddingPanel/index.tsx @@ -41,10 +41,12 @@ import { toastr } from "@docspace/shared/components/toast"; import { Textarea } from "@docspace/shared/components/textarea"; import { IconButton } from "@docspace/shared/components/icon-button"; import { Scrollbar } from "@docspace/shared/components/scrollbar/custom-scrollbar"; +import PublicRoomBar from "@docspace/shared/components/public-room-bar"; +import { Link, LinkType } from "@docspace/shared/components/link"; import { Button, ButtonSize } from "@docspace/shared/components/button"; import { TOption } from "@docspace/shared/components/combobox"; import { TTranslation } from "@docspace/shared/types"; -import { TTheme } from "@docspace/shared/themes"; +import { TColorScheme, TTheme } from "@docspace/shared/themes"; import DialogsStore from "SRC_DIR/store/DialogsStore"; import { SettingsStore } from "@docspace/shared/store/SettingsStore"; @@ -53,6 +55,7 @@ import HeaderUrl from "PUBLIC_DIR/images/sdk-presets_header.react.svg?url"; import HeaderDarkUrl from "PUBLIC_DIR/images/sdk-presets_header_dark.png?url"; import SearchUrl from "PUBLIC_DIR/images/sdk-presets_search.react.svg?url"; import SearchDarkUrl from "PUBLIC_DIR/images/sdk-presets_search_dark.png?url"; +import TabletLinkReactSvgUrl from "PUBLIC_DIR/images/tablet-link.react.svg?url"; import { StyledEmbeddingPanel, @@ -64,6 +67,34 @@ import { import { DisplayBlock } from "./sub-components/DisplayBlock"; import { CheckboxElement } from "./sub-components/CheckboxElement"; +type LinkParamsLinkShareToType = { + denyDownload: boolean; + id: string; + internal: boolean; + isExpired: boolean; + linkType: number; + primary: boolean; + requestToken: string; + shareLink: string; + title: string; + password?: string; +}; + +type LinkParamsLinkType = { + access: number; + canEditAccess: boolean; + isLocked: boolean; + isOwner: boolean; + sharedTo: LinkParamsLinkShareToType; + subjectType: number; +}; + +type LinkParamsType = { + roomId?: number; + isEdit?: boolean; + link: LinkParamsLinkType; +}; + type EmbeddingPanelProps = { t: TTranslation; theme: TTheme; @@ -71,20 +102,35 @@ type EmbeddingPanelProps = { roomId: number; visible: boolean; setEmbeddingPanelIsVisible: (value: boolean) => void; + setEditLinkPanelIsVisible: (value: boolean) => void; currentDeviceType: DeviceType; + currentColorScheme: TColorScheme; + denyDownload: boolean; + linkParams: LinkParamsType; + setLinkParams: (linkParams: LinkParamsType) => void; }; const EmbeddingPanelComponent = (props: EmbeddingPanelProps) => { const { t, theme, - requestToken, - roomId, visible, setEmbeddingPanelIsVisible, + setEditLinkPanelIsVisible, currentDeviceType, + currentColorScheme, + linkParams, + setLinkParams, } = props; + const { roomId, link } = linkParams; + const { + requestToken, + title: linkTitle, + password: withPassword, + denyDownload, + } = link.sharedTo; + const dataDimensions = [ { key: "percent", label: "%", default: true }, { key: "pixel", label: "px" }, @@ -183,6 +229,11 @@ const EmbeddingPanelComponent = (props: EmbeddingPanelProps) => { onClose(); }; + const onEditLink = () => { + setEditLinkPanelIsVisible(true); + setLinkParams({ isEdit: true, link }); + }; + const onKeyPress = (e: KeyboardEvent) => (e.key === "Esc" || e.key === "Escape") && onClose(); @@ -196,6 +247,41 @@ const EmbeddingPanelComponent = (props: EmbeddingPanelProps) => { console.log("Embedding config", config); + const barTitle = ( +
+ + {linkTitle} + + + {t("Files:Protected")} + +
+ ); + + const contentRestrictedTitle = t("EmbeddingPanel:ContentRestricted"); + const withPasswordTitle = t("EmbeddingPanel:LinkProtectedWithPassword"); + + let barSubTitle = ""; + + if (withPassword) { + barSubTitle = withPasswordTitle; + + if (denyDownload) { + barSubTitle += ` ${contentRestrictedTitle}`; + } + } else { + barSubTitle = contentRestrictedTitle; + } + + const showLinkBar = withPassword || denyDownload; + const embeddingPanelComponent = ( @@ -217,6 +303,15 @@ const EmbeddingPanelComponent = (props: EmbeddingPanelProps) => { {t("EmbeddingPanel:EmbeddingDescription")} + {showLinkBar && ( + + )} + { - const { embeddingPanelIsVisible, setEmbeddingPanelIsVisible, linkParams } = - dialogsStore; - const { theme, currentDeviceType } = settingsStore; + const { + embeddingPanelIsVisible, + setEmbeddingPanelIsVisible, + linkParams, + setEditLinkPanelIsVisible, + setLinkParams, + } = dialogsStore; + const { theme, currentColorScheme, currentDeviceType } = settingsStore; + + console.log("linkParams", linkParams); return { theme, + currentDeviceType, + currentColorScheme, visible: embeddingPanelIsVisible, setEmbeddingPanelIsVisible, - requestToken: linkParams?.link?.sharedTo?.requestToken, - roomId: linkParams?.roomId, - currentDeviceType, + setEditLinkPanelIsVisible, + linkParams, + setLinkParams, }; }, )( diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/LinkRow.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/LinkRow.js index 15b0184970..997f837ac0 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/LinkRow.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/LinkRow.js @@ -35,7 +35,7 @@ import { IconButton } from "@docspace/shared/components/icon-button"; import { ContextMenuButton } from "@docspace/shared/components/context-menu-button"; import { toastr } from "@docspace/shared/components/toast"; import CopyReactSvgUrl from "PUBLIC_DIR/images/copy.react.svg?url"; -import LinkReactSvgUrl from "PUBLIC_DIR/images/tablet-link.reat.svg?url"; +import LinkReactSvgUrl from "PUBLIC_DIR/images/tablet-link.react.svg?url"; import SettingsReactSvgUrl from "PUBLIC_DIR/images/catalog.settings.react.svg?url"; import ShareReactSvgUrl from "PUBLIC_DIR/images/share.react.svg?url"; import CodeReactSvgUrl from "PUBLIC_DIR/images/code.react.svg?url"; diff --git a/packages/client/src/pages/Home/Section/Header/index.js b/packages/client/src/pages/Home/Section/Header/index.js index c7384918a0..78c395d9d4 100644 --- a/packages/client/src/pages/Home/Section/Header/index.js +++ b/packages/client/src/pages/Home/Section/Header/index.js @@ -44,7 +44,7 @@ import PublicRoomIconUrl from "PUBLIC_DIR/images/public-room.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 TabletLinkReactSvgUrl from "PUBLIC_DIR/images/tablet-link.reat.svg?url"; +import TabletLinkReactSvgUrl from "PUBLIC_DIR/images/tablet-link.react.svg?url"; import React from "react"; import { inject, observer } from "mobx-react"; diff --git a/packages/client/src/store/ContextOptionsStore.js b/packages/client/src/store/ContextOptionsStore.js index fd3bf6a73b..d7af1d00d4 100644 --- a/packages/client/src/store/ContextOptionsStore.js +++ b/packages/client/src/store/ContextOptionsStore.js @@ -57,7 +57,7 @@ import MuteReactSvgUrl from "PUBLIC_DIR/images/icons/16/mute.react.svg?url"; import ShareReactSvgUrl from "PUBLIC_DIR/images/share.react.svg?url"; import InvitationLinkReactSvgUrl from "PUBLIC_DIR/images/invitation.link.react.svg?url"; import CopyToReactSvgUrl from "PUBLIC_DIR/images/copyTo.react.svg?url"; -import TabletLinkReactSvgUrl from "PUBLIC_DIR/images/tablet-link.reat.svg?url"; +import TabletLinkReactSvgUrl from "PUBLIC_DIR/images/tablet-link.react.svg?url"; import MailReactSvgUrl from "PUBLIC_DIR/images/mail.react.svg?url"; import RoomArchiveSvgUrl from "PUBLIC_DIR/images/room.archive.svg?url"; import PluginActionsSvgUrl from "PUBLIC_DIR/images/plugin.actions.react.svg?url"; diff --git a/packages/shared/components/public-room-bar/PublicRoomBar.types.ts b/packages/shared/components/public-room-bar/PublicRoomBar.types.ts index 51d4f53376..88823e4f1c 100644 --- a/packages/shared/components/public-room-bar/PublicRoomBar.types.ts +++ b/packages/shared/components/public-room-bar/PublicRoomBar.types.ts @@ -27,8 +27,8 @@ import React from "react"; export interface PublicRoomBarProps { - headerText: string; - bodyText: string; + headerText: string | React.ReactNode; + bodyText: string | React.ReactNode; iconName?: string; onClose?: () => void; className?: string; diff --git a/packages/shared/components/public-room-bar/index.tsx b/packages/shared/components/public-room-bar/index.tsx index e51a01d092..ed66fb71c5 100644 --- a/packages/shared/components/public-room-bar/index.tsx +++ b/packages/shared/components/public-room-bar/index.tsx @@ -36,6 +36,9 @@ import { PublicRoomBarProps } from "./PublicRoomBar.types"; const PublicRoomBar = (props: PublicRoomBarProps) => { const { headerText, bodyText, iconName, onClose, ...rest } = props; + const headerAs = typeof headerText !== "string" ? "div" : undefined; + const bodyAs = typeof bodyText !== "string" ? "div" : undefined; + return (
@@ -43,11 +46,20 @@ const PublicRoomBar = (props: PublicRoomBarProps) => {
- + {headerText}
- + {bodyText} diff --git a/packages/shared/themes/base.ts b/packages/shared/themes/base.ts index f03a7e0ea5..c36ef670bd 100644 --- a/packages/shared/themes/base.ts +++ b/packages/shared/themes/base.ts @@ -3357,6 +3357,7 @@ export const getBaseTheme = () => { embeddingPanel: { descriptionTextColor: "#657077", + iconColor: "#657077", }, }; }; diff --git a/packages/shared/themes/dark.ts b/packages/shared/themes/dark.ts index b84acb546c..79d5b1fcf8 100644 --- a/packages/shared/themes/dark.ts +++ b/packages/shared/themes/dark.ts @@ -3334,6 +3334,7 @@ const Dark: TTheme = { embeddingPanel: { descriptionTextColor: "#ADADAD", + iconColor: "#ADADAD", }, }; diff --git a/public/images/tablet-link.reat.svg b/public/images/tablet-link.react.svg similarity index 100% rename from public/images/tablet-link.reat.svg rename to public/images/tablet-link.react.svg