From 3d7e841cf0ed44eaec44dff848b11f096e09dd85 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 8 Apr 2024 13:56:34 +0300 Subject: [PATCH 1/7] Web: Files: fixed ThirdPartyComboBox --- .../ThirdPartyStorage/ThirdPartyComboBox.js | 214 +++++------------- 1 file changed, 60 insertions(+), 154 deletions(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirdPartyComboBox.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirdPartyComboBox.js index eea5dc6211..c46989f977 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirdPartyComboBox.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirdPartyComboBox.js @@ -24,103 +24,39 @@ // 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 ExpanderDownReactSvgUrl from "PUBLIC_DIR/images/expander-down.react.svg?url"; import React, { useEffect, useState, useRef } from "react"; import styled from "styled-components"; -import { ReactSVG } from "react-svg"; -import { StyledDropDown, StyledDropDownWrapper } from "../StyledDropdown"; +import { isMobile as isMobileUtil, DomHelpers } from "@docspace/shared/utils"; +import { isMobileOnly, isMobile } from "react-device-detect"; -import { isMobile, DomHelpers } from "@docspace/shared/utils"; - -import { Text } from "@docspace/shared/components/text"; import { Button } from "@docspace/shared/components/button"; -import { DropDownItem } from "@docspace/shared/components/drop-down-item"; import { connectedCloudsTypeTitleTranslation as ProviderKeyTranslation } from "@docspace/client/src/helpers/filesUtils"; import { Base } from "@docspace/shared/themes"; import { toastr } from "@docspace/shared/components/toast"; +import { ComboBox } from "@docspace/shared/components/combobox"; const StyledStorageLocation = styled.div` display: flex; flex-direction: column; + .thirdparty-combobox { + padding: 0px; + + .dropdown-container { + border: ${(props) => + `1px solid ${props.theme.createEditRoomDialog.thirdpartyStorage.combobox.dropdownBorderColor}`}; + } + + .combo-button { + padding-left: 8px; + } + } + .set_room_params-thirdparty { display: flex; flex-direction: row; gap: 8px; - &-combobox { - cursor: pointer; - width: 100%; - display: flex; - flex-direction: row; - justify-content: space-between; - padding: 5px 7px; - background: ${(props) => - props.theme.createEditRoomDialog.thirdpartyStorage.combobox.background}; - border-radius: 3px; - max-height: 32px; - - border: ${(props) => - `1px solid ${ - props.isOpen - ? props.theme.createEditRoomDialog.thirdpartyStorage.combobox - .isOpenDropdownBorderColor - : props.theme.createEditRoomDialog.thirdpartyStorage.combobox - .dropdownBorderColor - }`}; - - transition: all 0.2s ease; - &:hover { - border: ${(props) => - `1px solid ${ - props.isOpen - ? props.theme.createEditRoomDialog.thirdpartyStorage.combobox - .isOpenDropdownBorderColor - : props.theme.createEditRoomDialog.thirdpartyStorage.combobox - .hoverDropdownBorderColor - }`}; - } - - &-text { - font-weight: 400; - font-size: ${(props) => props.theme.getCorrectFontSize("13px")}; - line-height: 20px; - } - - &-expander { - display: flex; - align-items: center; - justify-content: center; - width: 6.35px; - margin-top: -4px; - svg { - transform: ${(props) => - props.isOpen ? "rotate(180deg)" : "rotate(0)"}; - width: 6.35px; - height: auto; - path { - fill: ${(props) => - props.theme.createEditRoomDialog.thirdpartyStorage.combobox - .arrowFill}; - } - } - } - } - - &-checkbox { - margin-top: 8px; - .checkbox { - ${({ theme }) => - theme.interfaceDirection === "rtl" - ? `margin-left: 8px;` - : `margin-right: 8px;`} - } - .checkbox-text { - font-weight: 400; - font-size: ${(props) => props.theme.getCorrectFontSize("13px")}; - line-height: 20px; - } - } } `; @@ -144,13 +80,10 @@ const ThirdPartyComboBox = ({ setConnectItem, getOAuthToken, - setIsScrollLocked, setIsOauthWindowOpen, isDisabled, }) => { - const dropdownRef = useRef(null); - const thirdparties = connectItems.map((item) => ({ ...item, title: item.category @@ -158,34 +91,8 @@ const ThirdPartyComboBox = ({ : ProviderKeyTranslation(item.providerKey, t), })); - const [isOpen, setIsOpen] = useState(false); - const [dropdownDirection, setDropdownDirection] = useState("bottom"); - - const toggleIsOpen = () => { - if (isDisabled) return; - if (isOpen) setIsScrollLocked(false); - else { - setIsScrollLocked(true); - calculateDropdownDirection(); - } - setIsOpen(!isOpen); - }; - const setStorageLocaiton = (thirparty) => { onChangeProvider(thirparty); - setIsOpen(false); - setIsScrollLocked(false); - }; - - const calculateDropdownDirection = () => { - const { top: offsetTop } = DomHelpers.getOffset(dropdownRef.current); - const offsetBottom = window.innerHeight - offsetTop; - - const neededHeightDesktop = Math.min(thirdparties.length * 32 + 16, 404); - const neededHeightMobile = Math.min(thirdparties.length * 32 + 16, 180); - const neededheight = isMobile() ? neededHeightMobile : neededHeightDesktop; - - setDropdownDirection(neededheight > offsetBottom ? "top" : "bottom"); }; const onShowService = async () => { @@ -245,24 +152,51 @@ const ThirdPartyComboBox = ({ setSaveThirdpartyResponse(null); }, [saveThirdpartyResponse]); - return ( - -
-
- - {storageLocation?.provider?.title || - t("ThirdPartyStorageComboBoxPlaceholder")} - - -
+ const options = thirdparties.map((item) => ({ + label: item.title, + key: item?.category ?? item.id, + })); + const onSelect = (elem) => { + console.log("123a", elem); + console.log("thirdparties", thirdparties); + + const thirdparty = thirdparties.find( + (t) => elem.key === t.id || elem.key === t.category, + ); + console.log("thirdparty", thirdparty); + + thirdparty && setStorageLocaiton(thirdparty); + }; + + return ( + +
+
- - - - {thirdparties.map((thirdparty) => ( - setStorageLocaiton(thirdparty)} - /> - ))} - - ); }; From 50edac01d22d1281ea73552aaf4c6562304b147b Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Mon, 8 Apr 2024 14:09:52 +0300 Subject: [PATCH 2/7] Fixed Bug 65372 - Files.DarkTheme. Dark halo around the navigation menu. --- packages/shared/themes/base.ts | 6 +++--- packages/shared/themes/dark.ts | 8 +++----- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/shared/themes/base.ts b/packages/shared/themes/base.ts index 40675d5127..9df3280396 100644 --- a/packages/shared/themes/base.ts +++ b/packages/shared/themes/base.ts @@ -1439,7 +1439,7 @@ export const getBaseTheme = () => { zIndex: "400", background: white, borderRadius: "6px", - boxShadow: "0px 5px 20px rgba(0, 0, 0, 0.13)", + boxShadow: "0px 8px 16px 0px #040F1B14", border: "none", }, @@ -2023,7 +2023,7 @@ export const getBaseTheme = () => { expanderColor: black, background: white, rootFolderTitleColor: "#A3A9AE", - boxShadow: " 0px 12px 40px 0px #040F1B1F", + boxShadow: "0px 8px 16px 0px #040F1B14", icon: { fill: "#316DAA", @@ -2779,7 +2779,7 @@ export const getBaseTheme = () => { background: white, borderRadius: "6px", mobileBorderRadius: "6px 6px 0 0", - boxShadow: "0px 12px 40px rgba(4, 15, 27, 0.12)", + boxShadow: "0px 8px 16px 0px #040F1B14", padding: "6px 0px", border: "none", devices: { diff --git a/packages/shared/themes/dark.ts b/packages/shared/themes/dark.ts index 66685ec79e..e7b848714a 100644 --- a/packages/shared/themes/dark.ts +++ b/packages/shared/themes/dark.ts @@ -1408,8 +1408,7 @@ const Dark: TTheme = { zIndex: "400", background: "#333333", borderRadius: "6px", - boxShadow: - "0px 16px 16px rgba(0, 0, 0, 0.16), 0px 8.1px 6.975px rgba(0, 0, 0, 0.108), 0px 3.2px 2.6px rgba(0, 0, 0, 0.08), 0px 0.7px 0.925px rgba(0, 0, 0, 0.052)", + boxShadow: "0px 8px 16px 0px #040F1B29", // boxShadowMobile: "0px -4px 60px rgba(0, 0, 0, 0.25)", border: "1px solid #474747", }, @@ -1995,7 +1994,7 @@ const Dark: TTheme = { expanderColor: "#eeeeee", background: black, rootFolderTitleColor: "#ADADAD", - boxShadow: "0px 12px 40px 0px #00000066", + boxShadow: "0px 8px 16px 0px #040F1B29", icon: { fill: "#E06A1B", @@ -2758,8 +2757,7 @@ const Dark: TTheme = { background: black, borderRadius: "6px", mobileBorderRadius: "6px 6px 0 0", - boxShadow: - "0px 12px 24px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.08), 0px 3.2px 2.6px rgba(0, 0, 0, 0.08)", + boxShadow: "0px 8px 16px 0px #040F1B29", padding: "6px 0px", border: "1px solid #474747", devices: { From 0a660455694e9e9dd8559f8e89ef5d0d778c3c9d Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Mon, 8 Apr 2024 14:37:46 +0300 Subject: [PATCH 3/7] Fix Bug 67194 - Mobile. Fixed input focus for iPad --- packages/shared/components/filter/index.tsx | 16 ++++++++++++++++ .../components/search-input/SearchInput.tsx | 2 ++ .../components/search-input/SearchInput.types.ts | 2 ++ 3 files changed, 20 insertions(+) diff --git a/packages/shared/components/filter/index.tsx b/packages/shared/components/filter/index.tsx index f783106e90..e998fec783 100644 --- a/packages/shared/components/filter/index.tsx +++ b/packages/shared/components/filter/index.tsx @@ -28,6 +28,8 @@ import React from "react"; import { useTheme } from "styled-components"; import { useTranslation } from "react-i18next"; +import { isTablet, isIOS } from "react-device-detect"; + import { DeviceType, FilterGroups } from "../../enums"; import { TViewSelectorOption, ViewSelector } from "../view-selector"; @@ -175,6 +177,19 @@ const FilterInput = React.memo( [selectedItems, removeSelectedItem], ); + const onInputFocus = (e: React.FocusEvent) => { + if (isTablet && isIOS) { + const scrollEvent = () => { + e.preventDefault(); + e.stopPropagation(); + window.scrollTo(0, 0); + window.onscroll = () => {}; + }; + + window.onscroll = scrollEvent; + } + }; + React.useEffect(() => { return () => { mountRef.current = false; @@ -191,6 +206,7 @@ const FilterInput = React.memo( onClearSearch={onClearSearch} id="filter_search-input" size={InputSize.base} + onFocus={onInputFocus} /> { const timerId = React.useRef>(null); @@ -162,6 +163,7 @@ const SearchInput = ({ value={inputValue} placeholder={placeholder} onChange={onInputChange} + onFocus={onFocus} > {children} diff --git a/packages/shared/components/search-input/SearchInput.types.ts b/packages/shared/components/search-input/SearchInput.types.ts index b0a9831951..df269425ba 100644 --- a/packages/shared/components/search-input/SearchInput.types.ts +++ b/packages/shared/components/search-input/SearchInput.types.ts @@ -62,4 +62,6 @@ export interface SearchInputProps { children?: React.ReactNode; /** Accepts css style */ style?: React.CSSProperties; + /** The callback function that is called when the field is focused */ + onFocus?: (e: React.FocusEvent) => void; } From 4a04027b52798c2657798d68fb7fc79131cec56a Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Mon, 8 Apr 2024 15:14:39 +0300 Subject: [PATCH 4/7] Fixed Bug 67262 - Mobile. The context menu of rooms/folders will not scroll in a horizontal position of the smartphone --- .../shared/components/context-menu/ContextMenu.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/shared/components/context-menu/ContextMenu.tsx b/packages/shared/components/context-menu/ContextMenu.tsx index 562f246be4..7ee2c1d0c3 100644 --- a/packages/shared/components/context-menu/ContextMenu.tsx +++ b/packages/shared/components/context-menu/ContextMenu.tsx @@ -28,6 +28,7 @@ import React from "react"; import { CSSTransition } from "react-transition-group"; import { useTheme } from "styled-components"; +import { isMobileOnly } from "react-device-detect"; import ArrowLeftReactUrl from "PUBLIC_DIR/images/arrow-left.react.svg?url"; @@ -193,7 +194,11 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { left = event.pageX - width + 1; } - if (isTabletUtils() && height > 483) { + if ( + isTabletUtils() && + (height > 483 || + (isMobileOnly && window.innerHeight < window.innerWidth)) + ) { const article = document.getElementById("article-container"); let currentArticleWidth = 0; @@ -506,7 +511,7 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { const element = renderContextMenu(); - const isMobile = isMobileUtils(); + const isMobileUtil = isMobileUtils(); const contextMenu = ( <> @@ -524,7 +529,7 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { ); const root = document.getElementById("root"); - if (root && isMobile) { + if (root && isMobileUtil) { const portal = ; return portal; From 8eaac2da167e92ecb1b39080b0a8078fb2a52811 Mon Sep 17 00:00:00 2001 From: Aleksandr Lushkin Date: Mon, 8 Apr 2024 14:43:41 +0200 Subject: [PATCH 5/7] Client: Panels: Remove ability to select all items in AddUsersPanel. (Cause performance issues with large number of users) --- .../src/components/panels/AddUsersPanel/index.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/packages/client/src/components/panels/AddUsersPanel/index.tsx b/packages/client/src/components/panels/AddUsersPanel/index.tsx index 574a90a56f..599417a98e 100644 --- a/packages/client/src/components/panels/AddUsersPanel/index.tsx +++ b/packages/client/src/components/panels/AddUsersPanel/index.tsx @@ -30,7 +30,6 @@ import { useCallback, useEffect, useRef, useState } from "react"; import DefaultUserPhoto from "PUBLIC_DIR/images/default_user_photo_size_82-82.png"; import EmptyScreenPersonsSvgUrl from "PUBLIC_DIR/images/empty_screen_persons.svg?url"; -import CatalogAccountsReactSvgUrl from "PUBLIC_DIR/images/catalog.accounts.react.svg?url"; import EmptyScreenPersonsSvgDarkUrl from "PUBLIC_DIR/images/empty_screen_persons_dark.svg?url"; import { Aside } from "@docspace/shared/components/aside"; @@ -44,7 +43,6 @@ import { TAccessRight, TSelectorAccessRights, TSelectorCancelButton, - TSelectorSelectAll, TWithTabs, } from "@docspace/shared/components/selector/Selector.types"; import { toastr } from "@docspace/shared/components/toast"; @@ -435,15 +433,6 @@ const AddUsersPanel = ({ ); }; - const withSelectAllProps: TSelectorSelectAll = isMultiSelect - ? { - withSelectAll: isMultiSelect, - selectAllLabel: t("Common:AllAccounts"), - selectAllIcon: CatalogAccountsReactSvgUrl, - onSelectAll: () => {}, - } - : {}; - const withAccessRightsProps: TSelectorAccessRights = withAccessRights && isMultiSelect ? { @@ -520,7 +509,6 @@ const AddUsersPanel = ({ submitButtonLabel={t("Common:AddButton")} onSubmit={onUsersSelect} disableSubmitButton={false} - {...withSelectAllProps} {...withAccessRightsProps} {...withCancelButtonProps} emptyScreenImage={emptyScreenImage} From 36d15fe9f2e055cf5295ba548177ee5e7ec7afea Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Mon, 8 Apr 2024 16:02:37 +0300 Subject: [PATCH 6/7] Client: PublicRoom: Added SDK HOOK for public room --- .../client/src/pages/PublicRoom/PublicRoomPage.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/client/src/pages/PublicRoom/PublicRoomPage.js b/packages/client/src/pages/PublicRoom/PublicRoomPage.js index 47d9b10f9d..53b6b71049 100644 --- a/packages/client/src/pages/PublicRoom/PublicRoomPage.js +++ b/packages/client/src/pages/PublicRoom/PublicRoomPage.js @@ -35,7 +35,7 @@ import SectionWrapper from "SRC_DIR/components/Section"; import SelectionArea from "../Home/SelectionArea/FilesSelectionArea"; import MediaViewer from "../Home/MediaViewer"; -import { usePublic } from "../Home/Hooks"; +import { usePublic, useSDK } from "../Home/Hooks"; const PublicRoomPage = (props) => { const { @@ -49,6 +49,10 @@ const PublicRoomPage = (props) => { showSecondaryButtonAlert, fetchPublicRoom, fetchPreviewMediaFile, + + frameConfig, + setFrameConfig, + isLoading, } = props; const location = useLocation(); @@ -60,6 +64,8 @@ const PublicRoomPage = (props) => { fetchPreviewMediaFile, }); + useSDK({ frameConfig, setFrameConfig, isLoading }); + const sectionProps = { showSecondaryProgressBar, secondaryProgressBarValue, @@ -107,7 +113,7 @@ export default inject( filesSettingsStore, mediaViewerDataStore, }) => { - const { withPaging } = settingsStore; + const { withPaging, frameConfig, setFrameConfig } = settingsStore; const { isLoaded, isLoading, roomStatus, fetchPublicRoom } = publicRoomStore; @@ -141,6 +147,9 @@ export default inject( isEmptyPage, fetchPublicRoom, fetchPreviewMediaFile, + + frameConfig, + setFrameConfig, }; }, )(observer(PublicRoomPage)); From a846609729e380a810db5c6f2c0622950a2f4338 Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Mon, 8 Apr 2024 16:37:37 +0300 Subject: [PATCH 7/7] Fixed Bug 66888 - SDK. The upload files button in the built-in room does not work --- .../src/pages/Home/Section/Header/index.js | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/packages/client/src/pages/Home/Section/Header/index.js b/packages/client/src/pages/Home/Section/Header/index.js index 04de8fc4d5..beb755d927 100644 --- a/packages/client/src/pages/Home/Section/Header/index.js +++ b/packages/client/src/pages/Home/Section/Header/index.js @@ -309,6 +309,7 @@ const SectionHeaderContent = (props) => { showNavigationButton, deleteRooms, setSelection, + startUpload, } = props; const navigate = useNavigate(); @@ -358,6 +359,15 @@ const SectionHeaderContent = (props) => { setSelectFileDialogVisible(true); }; + const onFileChange = React.useCallback( + (e) => { + startUpload(e.target.files, null, t); + }, + [startUpload, t], + ); + + const onInputClick = React.useCallback((e) => (e.target.value = null), []); + const onShowGallery = () => { const initOformFilter = ( oformsFilter || oformsFilter.getDefault() @@ -1276,6 +1286,29 @@ const SectionHeaderContent = (props) => { />
)} + {isFrame && ( + <> + + + + )} )} @@ -1300,7 +1333,9 @@ export default inject( userStore, currentTariffStatusStore, settingsStore, + uploadDataStore, }) => { + const { startUpload } = uploadDataStore; const isOwner = userStore.user?.isOwner; const isAdmin = userStore.user?.isAdmin; const isCollaborator = userStore.user?.isCollaborator; @@ -1610,6 +1645,7 @@ export default inject( deleteRooms, setSelection, setShareFolderDialogVisible, + startUpload, }; }, )(