From efeb9be315d6d7693164ea49aebc8ee391aa79ce Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 29 Jan 2024 17:55:55 +0300 Subject: [PATCH] Web: Files: Public-room: added navigation button, added new icons --- .../src/pages/Home/Section/Header/index.js | 39 ++++++++++++++++++- .../client/src/store/ContextOptionsStore.js | 26 +++++++------ .../navigation/Navigation.styled.ts | 19 ++++----- .../components/navigation/Navigation.tsx | 5 ++- .../components/navigation/Navigation.types.ts | 4 ++ .../navigation/sub-components/ControlBtn.tsx | 12 ++++++ packages/shared/themes/base.ts | 1 - packages/shared/themes/dark.ts | 1 - public/images/icons/32/room/public.svg | 10 ++--- public/images/public-room.react.svg | 13 +++++-- 10 files changed, 94 insertions(+), 36 deletions(-) diff --git a/packages/client/src/pages/Home/Section/Header/index.js b/packages/client/src/pages/Home/Section/Header/index.js index 5ffa886b33..d06c1a39aa 100644 --- a/packages/client/src/pages/Home/Section/Header/index.js +++ b/packages/client/src/pages/Home/Section/Header/index.js @@ -113,6 +113,7 @@ const StyledContainer = styled.div` .header-container { min-height: 33px; + align-items: center; ${(props) => props.hideContextMenuInsideArchiveRoom && @@ -126,6 +127,21 @@ const StyledContainer = styled.div` @media ${mobile} { height: 53px; } + + .navigation_button { + display: block; + margin: 0 16px; + overflow: visible; + + @media ${tablet} { + display: ${({ isInfoPanelVisible }) => + isInfoPanelVisible ? "none" : "block"}; + } + + @media ${mobile} { + display: none; + } + } } `; @@ -233,6 +249,8 @@ const SectionHeaderContent = (props) => { setLeaveRoomDialogVisible, inRoom, onClickCreateRoom, + onCreateAndCopySharedLink, + showNavigationButton, } = props; const navigate = useNavigate(); @@ -960,6 +978,10 @@ const SectionHeaderContent = (props) => { .catch((err) => toastr.error(err)); }, [resendInvitesAgain]); + const onNavigationButtonClick = () => { + onCreateAndCopySharedLink(selectedFolder, t); + }; + const headerMenu = isAccountsPage ? getAccountsHeaderMenu(t) : getHeaderMenu(t); @@ -1045,6 +1067,10 @@ const SectionHeaderContent = (props) => { ? getLogoFromPath(whiteLabelLogoUrls[5]?.path?.dark) : getLogoFromPath(whiteLabelLogoUrls[5]?.path?.light); + const navigationButtonLabel = showNavigationButton + ? t("Files:ShareRoom") + : null; + return ( {(context) => ( @@ -1108,6 +1134,8 @@ const SectionHeaderContent = (props) => { showRootFolderTitle={insideTheRoom} currentDeviceType={currentDeviceType} isFrame={isFrame} + navigationButtonLabel={navigationButtonLabel} + onNavigationButtonClick={onNavigationButtonClick} /> )} @@ -1230,7 +1258,7 @@ export default inject( canCopyPublicLink, } = selectedFolderStore; - const selectedFolder = { ...selectedFolderStore }; + const selectedFolder = selectedFolderStore.getSelectedFolder(); const { enablePlugins, @@ -1252,6 +1280,7 @@ export default inject( onClickArchive, onClickReconnectStorage, onCopyLink, + onCreateAndCopySharedLink, } = contextOptionsStore; const canRestoreAll = isArchiveFolder && roomsForRestore.length > 0; @@ -1293,6 +1322,12 @@ export default inject( const { isPublicRoom, primaryLink, setExternalLink } = publicRoomStore; + const showNavigationButton = + !isPublicRoom && + !isArchiveFolder && + canCopyPublicLink && + (isPublicRoomType || isCustomRoomType); + return { isGracePeriod, setInviteUsersWarningDialogVisible, @@ -1410,6 +1445,8 @@ export default inject( currentDeviceType, setLeaveRoomDialogVisible, inRoom, + onCreateAndCopySharedLink, + showNavigationButton, }; } )( diff --git a/packages/client/src/store/ContextOptionsStore.js b/packages/client/src/store/ContextOptionsStore.js index 37c86ec630..865e909dae 100644 --- a/packages/client/src/store/ContextOptionsStore.js +++ b/packages/client/src/store/ContextOptionsStore.js @@ -360,6 +360,19 @@ class ContextOptionsStore { toastr.success(t("Translations:LinkCopySuccess")); }; + onCreateAndCopySharedLink = async (item, t) => { + const primaryLink = await this.filesStore.getPrimaryLink(item.id); + + if (primaryLink) { + copy(primaryLink.sharedTo.shareLink); + item.shared + ? toastr.success(t("Files:LinkSuccessfullyCopied")) + : toastr.success(t("Files:LinkSuccessfullyCreatedAndCopied")); + + this.publicRoomStore.setExternalLink(primaryLink); + } + }; + onClickLinkEdit = (item) => { const { setConvertItem, setConvertDialogVisible } = this.dialogsStore; const canConvert = @@ -1299,18 +1312,7 @@ class ContextOptionsStore { isArchive || !item.canCopyPublicLink || !isPublicRoomType, - onClick: async () => { - const primaryLink = await this.filesStore.getPrimaryLink(item.id); - - if (primaryLink) { - copy(primaryLink.sharedTo.shareLink); - item.shared - ? toastr.success(t("Files:LinkSuccessfullyCopied")) - : toastr.success(t("Files:LinkSuccessfullyCreatedAndCopied")); - - this.publicRoomStore.setExternalLink(primaryLink); - } - }, + onClick: () => onCreateAndCopySharedLink(item, t), // onLoad: () => this.onLoadLinks(t, item), }, { diff --git a/packages/shared/components/navigation/Navigation.styled.ts b/packages/shared/components/navigation/Navigation.styled.ts index 974c8fadfd..884d46e879 100644 --- a/packages/shared/components/navigation/Navigation.styled.ts +++ b/packages/shared/components/navigation/Navigation.styled.ts @@ -178,17 +178,10 @@ const StyledContainer = styled.div<{ gap: 8px; .title-icon { - min-width: 17px; - min-height: 17px; - width: 17px; - height: 17px; - - svg { - path, - rect { - fill: ${({ theme }) => theme.navigation.publicIcon}; - } - } + min-width: 16px; + min-height: 16px; + width: 16px; + height: 16px; } } @@ -281,6 +274,10 @@ const StyledControlButtonContainer = styled.div<{ isFrame?: boolean }>` height: 32px; + @media ${tablet} { + flex-direction: row-reverse; + } + .add-button { ${(props) => props.theme.interfaceDirection === "rtl" diff --git a/packages/shared/components/navigation/Navigation.tsx b/packages/shared/components/navigation/Navigation.tsx index f7efd3bce1..30b77cf2de 100644 --- a/packages/shared/components/navigation/Navigation.tsx +++ b/packages/shared/components/navigation/Navigation.tsx @@ -52,7 +52,8 @@ const Navigation = ({ titleIcon, currentDeviceType, rootRoomTitle, - + navigationButtonLabel, + onNavigationButtonClick, ...rest }: INavigationProps) => { const [isOpen, setIsOpen] = React.useState(false); @@ -253,6 +254,8 @@ const Navigation = ({ isFrame={isFrame} isPublicRoom={isPublicRoom} isTrashFolder={isTrashFolder} + navigationButtonLabel={navigationButtonLabel} + onNavigationButtonClick={onNavigationButtonClick} /> {isDesktop && isTrashFolder && !isEmptyPage && ( diff --git a/packages/shared/components/navigation/Navigation.types.ts b/packages/shared/components/navigation/Navigation.types.ts index 7e9ae2db53..5935706e6b 100644 --- a/packages/shared/components/navigation/Navigation.types.ts +++ b/packages/shared/components/navigation/Navigation.types.ts @@ -60,6 +60,8 @@ export interface IControlButtonProps { isPublicRoom?: boolean; isTrashFolder?: boolean; isMobile?: boolean; + navigationButtonLabel?: string; + onNavigationButtonClick?: () => void; } export interface ITextProps { @@ -160,4 +162,6 @@ export interface INavigationProps { titleIcon: string; currentDeviceType: DeviceType; rootRoomTitle: string; + navigationButtonLabel?: string; + onNavigationButtonClick?: () => void; } diff --git a/packages/shared/components/navigation/sub-components/ControlBtn.tsx b/packages/shared/components/navigation/sub-components/ControlBtn.tsx index 616eb3a848..64648ad4e4 100644 --- a/packages/shared/components/navigation/sub-components/ControlBtn.tsx +++ b/packages/shared/components/navigation/sub-components/ControlBtn.tsx @@ -6,6 +6,7 @@ import { IControlButtonProps } from "../Navigation.types"; import ToggleInfoPanelButton from "./ToggleInfoPanelBtn"; import PlusButton from "./PlusBtn"; import ContextButton from "./ContextBtn"; +import { Button, ButtonSize } from "../../button"; const ControlButtons = ({ isRootFolder, @@ -24,6 +25,8 @@ const ControlButtons = ({ isPublicRoom, isTrashFolder, isMobile, + navigationButtonLabel, + onNavigationButtonClick, }: IControlButtonProps) => { const toggleInfoPanelAction = () => { toggleInfoPanel?.(); @@ -124,6 +127,15 @@ const ControlButtons = ({ )} )} + + {navigationButtonLabel && ( +