From 6a593e40c600ce6b00709e75d27184bf2df30519 Mon Sep 17 00:00:00 2001 From: namushka Date: Tue, 16 Apr 2024 12:54:59 +0300 Subject: [PATCH 001/205] added canOverlay prop to backdrop --- .../shared/components/backdrop/Backdrop.tsx | 248 +++++++++--------- .../components/backdrop/Backdrop.types.ts | 100 +++---- 2 files changed, 177 insertions(+), 171 deletions(-) diff --git a/packages/shared/components/backdrop/Backdrop.tsx b/packages/shared/components/backdrop/Backdrop.tsx index e255207227..5b3df6f692 100644 --- a/packages/shared/components/backdrop/Backdrop.tsx +++ b/packages/shared/components/backdrop/Backdrop.tsx @@ -1,122 +1,126 @@ -// (c) Copyright Ascensio System SIA 2009-2024 -// -// This program is a free software product. -// You can redistribute it and/or modify it under the terms -// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software -// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended -// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of -// any third-party rights. -// -// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty -// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see -// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html -// -// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021. -// -// The interactive user interfaces in modified source and object code versions of the Program must -// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3. -// -// Pursuant to Section 7(b) of the License you must retain the original Product logo when -// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under -// trademark law for use of our trademarks. -// -// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing -// 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 React from "react"; -import { isMobile, isTablet } from "../../utils"; - -import StyledBackdrop from "./Backdrop.styled"; -import { BackdropProps } from "./Backdrop.types"; - -const Backdrop = (props: BackdropProps) => { - const { - visible = false, - className, - withBackground = false, - withoutBlur = false, - isAside = false, - withoutBackground = false, - isModalDialog = false, - - zIndex = 203, - } = props; - - const backdropRef = React.useRef(null); - - const [needBackdrop, setNeedBackdrop] = React.useState(false); - const [needBackground, setNeedBackground] = React.useState(false); - - const checkingExistBackdrop = React.useCallback(() => { - if (visible) { - const tablet = isTablet() || isMobile(); - const backdrops = document.querySelectorAll(".backdrop-active"); - - const currentNeedBackdrop = - backdrops.length < 1 || (isAside && backdrops.length <= 2) || false; - - let currentNeedBackground = - (currentNeedBackdrop && ((tablet && !withoutBlur) || withBackground)) || - false; - - if (isAside && currentNeedBackdrop && !withoutBackground) - currentNeedBackground = true; - - setNeedBackground(currentNeedBackground); - setNeedBackdrop(currentNeedBackdrop); - } else { - setNeedBackground(false); - setNeedBackdrop(false); - } - }, [visible, isAside, withBackground, withoutBlur, withoutBackground]); - - const modifyClassName = () => { - const modifiedClass = ["backdrop-active", "not-selectable"]; - - if (className) { - if (typeof className !== "string") { - className.forEach((c: string) => { - if (!modifiedClass.includes(c)) { - modifiedClass.push(c); - } - }); - } else { - modifiedClass.push(className); - } - } - - return modifiedClass.join(" "); - }; - - const onTouchHandler = (e: React.TouchEvent) => { - if (!isModalDialog) e.preventDefault(); - backdropRef.current?.click(); - }; - - React.useEffect(() => { - checkingExistBackdrop(); - }, [checkingExistBackdrop]); - - React.useEffect(() => { - checkingExistBackdrop(); - }, [checkingExistBackdrop, visible, isAside, withBackground]); - - const modifiedClassName = modifyClassName(); - - return visible && (needBackdrop || isAside) ? ( - - ) : null; -}; - -export { Backdrop }; +// (c) Copyright Ascensio System SIA 2009-2024 +// +// This program is a free software product. +// You can redistribute it and/or modify it under the terms +// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software +// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended +// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of +// any third-party rights. +// +// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty +// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see +// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html +// +// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021. +// +// The interactive user interfaces in modified source and object code versions of the Program must +// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3. +// +// Pursuant to Section 7(b) of the License you must retain the original Product logo when +// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under +// trademark law for use of our trademarks. +// +// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing +// 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 React from "react"; +import { isMobile, isTablet } from "../../utils"; + +import StyledBackdrop from "./Backdrop.styled"; +import { BackdropProps } from "./Backdrop.types"; + +const Backdrop = (props: BackdropProps) => { + const { + visible = false, + className, + withBackground = false, + withoutBlur = false, + isAside = false, + withoutBackground = false, + isModalDialog = false, + canOverlay = false, + + zIndex = 203, + } = props; + + const backdropRef = React.useRef(null); + + const [needBackdrop, setNeedBackdrop] = React.useState(false); + const [needBackground, setNeedBackground] = React.useState(false); + + const checkingExistBackdrop = React.useCallback(() => { + if (visible) { + const tablet = isTablet() || isMobile(); + const backdrops = document.querySelectorAll(".backdrop-active"); + + const currentNeedBackdrop = + canOverlay || + backdrops.length < 1 || + (isAside && backdrops.length <= 2) || + false; + + let currentNeedBackground = + (currentNeedBackdrop && ((tablet && !withoutBlur) || withBackground)) || + false; + + if (isAside && currentNeedBackdrop && !withoutBackground) + currentNeedBackground = true; + + setNeedBackground(currentNeedBackground); + setNeedBackdrop(currentNeedBackdrop); + } else { + setNeedBackground(false); + setNeedBackdrop(false); + } + }, [visible, isAside, withBackground, withoutBlur, withoutBackground]); + + const modifyClassName = () => { + const modifiedClass = ["backdrop-active", "not-selectable"]; + + if (className) { + if (typeof className !== "string") { + className.forEach((c: string) => { + if (!modifiedClass.includes(c)) { + modifiedClass.push(c); + } + }); + } else { + modifiedClass.push(className); + } + } + + return modifiedClass.join(" "); + }; + + const onTouchHandler = (e: React.TouchEvent) => { + if (!isModalDialog) e.preventDefault(); + backdropRef.current?.click(); + }; + + React.useEffect(() => { + checkingExistBackdrop(); + }, [checkingExistBackdrop]); + + React.useEffect(() => { + checkingExistBackdrop(); + }, [checkingExistBackdrop, visible, isAside, withBackground]); + + const modifiedClassName = modifyClassName(); + + return visible && (needBackdrop || isAside) ? ( + + ) : null; +}; + +export { Backdrop }; diff --git a/packages/shared/components/backdrop/Backdrop.types.ts b/packages/shared/components/backdrop/Backdrop.types.ts index 8998e8dbc6..3aee0171f1 100644 --- a/packages/shared/components/backdrop/Backdrop.types.ts +++ b/packages/shared/components/backdrop/Backdrop.types.ts @@ -1,49 +1,51 @@ -// (c) Copyright Ascensio System SIA 2009-2024 -// -// This program is a free software product. -// You can redistribute it and/or modify it under the terms -// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software -// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended -// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of -// any third-party rights. -// -// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty -// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see -// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html -// -// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021. -// -// The interactive user interfaces in modified source and object code versions of the Program must -// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3. -// -// Pursuant to Section 7(b) of the License you must retain the original Product logo when -// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under -// trademark law for use of our trademarks. -// -// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing -// 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 React from "react"; - -export interface BackdropProps { - /** Sets visible or hidden */ - visible: boolean; - /** CSS z-index */ - zIndex?: number; - /** Accepts class */ - className?: string | string[]; - /** Accepts id */ - id?: string; - /** Accepts css style */ - style?: React.CSSProperties; - /** Displays the background. *The background is not displayed if the viewport width is more than 1024 */ - withBackground?: boolean; - /** Must be true if used with Aside component */ - isAside?: boolean; - /** Must be true if used with Context menu */ - withoutBlur?: boolean; - withoutBackground?: boolean; - isModalDialog?: boolean; - onClick?: (e: React.MouseEvent) => void; -} +// (c) Copyright Ascensio System SIA 2009-2024 +// +// This program is a free software product. +// You can redistribute it and/or modify it under the terms +// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software +// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended +// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of +// any third-party rights. +// +// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty +// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see +// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html +// +// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021. +// +// The interactive user interfaces in modified source and object code versions of the Program must +// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3. +// +// Pursuant to Section 7(b) of the License you must retain the original Product logo when +// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under +// trademark law for use of our trademarks. +// +// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing +// 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 React from "react"; + +export interface BackdropProps { + /** Sets visible or hidden */ + visible: boolean; + /** CSS z-index */ + zIndex?: number; + /** Accepts class */ + className?: string | string[]; + /** Accepts id */ + id?: string; + /** Accepts css style */ + style?: React.CSSProperties; + /** Displays the background. *The background is not displayed if the viewport width is more than 1024 */ + withBackground?: boolean; + /** Must be true if used with Aside component */ + isAside?: boolean; + /** Must be true if used with Context menu */ + withoutBlur?: boolean; + withoutBackground?: boolean; + isModalDialog?: boolean; + onClick?: (e: React.MouseEvent) => void; + /** Defines if backdrop should overlay other backdrops */ + canOverlay: boolean; +} From 13189b82b006927f86d5a1019c50749eb36cc1d8 Mon Sep 17 00:00:00 2001 From: namushka Date: Tue, 16 Apr 2024 12:55:30 +0300 Subject: [PATCH 002/205] impemented new canOverlay prop for RoomTypeDropdown --- .../RoomTypeDropdown/DropdownMobile.js | 2 +- .../sub-components/RoomTypeDropdown/index.js | 210 +++++++++--------- 2 files changed, 105 insertions(+), 107 deletions(-) diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownMobile.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownMobile.js index d2776ecc0c..8c07cd895a 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownMobile.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/DropdownMobile.js @@ -61,7 +61,7 @@ const DropdownMobile = ({ }) => { return ( <> - + {!forсeHideDropdown && ( {RoomsTypeValues.map((roomType) => ( diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/index.js index b49d5259ab..73a59c9e67 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/RoomTypeDropdown/index.js @@ -1,106 +1,104 @@ -// (c) Copyright Ascensio System SIA 2009-2024 -// -// This program is a free software product. -// You can redistribute it and/or modify it under the terms -// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software -// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended -// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of -// any third-party rights. -// -// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty -// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see -// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html -// -// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021. -// -// The interactive user interfaces in modified source and object code versions of the Program must -// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3. -// -// Pursuant to Section 7(b) of the License you must retain the original Product logo when -// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under -// trademark law for use of our trademarks. -// -// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing -// 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 { isMobile } from "@docspace/shared/utils"; -import React, { useState, useEffect } from "react"; -import styled from "styled-components"; -import RoomType from "../RoomType"; -import DropdownDesktop from "./DropdownDesktop"; -import DropdownMobile from "./DropdownMobile"; - -const StyledRoomTypeDropdown = styled.div` - display: flex; - flex-direction: column; - width: 100%; - - .backdrop-active { - top: -64px; - backdrop-filter: unset; - background: rgba(6, 22, 38, 0.2); - } -`; - -const RoomTypeDropdown = ({ - t, - currentRoomType, - setRoomType, - setIsScrollLocked, - isDisabled, - forсeHideDropdown, -}) => { - const [isOpen, setIsOpen] = useState(false); - - const toggleDropdown = () => { - if (isDisabled) return; - if (isOpen) { - setIsScrollLocked(false); - setIsOpen(false); - } else { - setIsScrollLocked(true); - setIsOpen(true); - } - }; - - const chooseRoomType = (roomType) => { - if (isDisabled) return; - setRoomType(roomType); - toggleDropdown(); - }; - - useEffect(() => { - if (forсeHideDropdown) { - setIsScrollLocked(false); - setIsOpen(false); - } - }, [forсeHideDropdown]); - - return ( - - - {isMobile() ? ( - - ) : ( - - )} - - ); -}; - -export default RoomTypeDropdown; +// (c) Copyright Ascensio System SIA 2009-2024 +// +// This program is a free software product. +// You can redistribute it and/or modify it under the terms +// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software +// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended +// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of +// any third-party rights. +// +// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty +// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see +// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html +// +// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021. +// +// The interactive user interfaces in modified source and object code versions of the Program must +// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3. +// +// Pursuant to Section 7(b) of the License you must retain the original Product logo when +// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under +// trademark law for use of our trademarks. +// +// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing +// 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 { isMobile } from "@docspace/shared/utils"; +import React, { useState, useEffect } from "react"; +import styled from "styled-components"; +import RoomType from "../RoomType"; +import DropdownDesktop from "./DropdownDesktop"; +import DropdownMobile from "./DropdownMobile"; + +const StyledRoomTypeDropdown = styled.div` + display: flex; + flex-direction: column; + width: 100%; + + .backdrop-active { + top: -64px; + } +`; + +const RoomTypeDropdown = ({ + t, + currentRoomType, + setRoomType, + setIsScrollLocked, + isDisabled, + forсeHideDropdown, +}) => { + const [isOpen, setIsOpen] = useState(false); + + const toggleDropdown = () => { + if (isDisabled) return; + if (isOpen) { + setIsScrollLocked(false); + setIsOpen(false); + } else { + setIsScrollLocked(true); + setIsOpen(true); + } + }; + + const chooseRoomType = (roomType) => { + if (isDisabled) return; + setRoomType(roomType); + toggleDropdown(); + }; + + useEffect(() => { + if (forсeHideDropdown) { + setIsScrollLocked(false); + setIsOpen(false); + } + }, [forсeHideDropdown]); + + return ( + + + {isMobile() ? ( + + ) : ( + + )} + + ); +}; + +export default RoomTypeDropdown; From 03dfe7332c3941b1106ac28f85440662bde10c17 Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Wed, 17 Apr 2024 14:37:12 +0300 Subject: [PATCH 003/205] Shared:Components: fix main button opening context menu --- .../components/context-menu/ContextMenu.tsx | 29 +++++++++++++++--- .../components/main-button/MainButton.tsx | 30 +++++-------------- 2 files changed, 32 insertions(+), 27 deletions(-) diff --git a/packages/shared/components/context-menu/ContextMenu.tsx b/packages/shared/components/context-menu/ContextMenu.tsx index 7ee2c1d0c3..e88745d207 100644 --- a/packages/shared/components/context-menu/ContextMenu.tsx +++ b/packages/shared/components/context-menu/ContextMenu.tsx @@ -113,8 +113,7 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { const m = trimSeparator(getContextModel()); setModel(m); } - e.stopPropagation(); - e.preventDefault(); + currentEvent.current = e; if (visible) { if (!isMobileUtils()) { @@ -156,6 +155,27 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { [onHide], ); + const toggle = React.useCallback( + ( + e: + | React.MouseEvent + | MouseEvent + | Event + | React.ChangeEvent, + ) => { + if (currentChangeEvent.current === e || currentEvent.current === e) + return; + + if (visible) { + hide(e); + } else { + // @ts-expect-error fix types + show(e); + } + }, + [visible, hide, show], + ); + React.useEffect(() => { if (visible && prevReshow.current !== reshow) { setVisible(false); @@ -301,6 +321,7 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { (e: MouseEvent) => { if (isOutsideClicked(e)) { // TODO: (&& e.button !== 2) restore after global usage + hide(e); setResetMenu(true); @@ -392,9 +413,9 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { React.useImperativeHandle( ref, () => { - return { show, hide, menuRef }; + return { show, hide, toggle, menuRef }; }, - [hide, show], + [hide, show, toggle], ); const renderContextMenu = () => { diff --git a/packages/shared/components/main-button/MainButton.tsx b/packages/shared/components/main-button/MainButton.tsx index 9a6ef1c614..558f6735fb 100644 --- a/packages/shared/components/main-button/MainButton.tsx +++ b/packages/shared/components/main-button/MainButton.tsx @@ -24,7 +24,7 @@ // 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 React, { useRef, useState } from "react"; +import React, { useRef } from "react"; import { ReactSVG } from "react-svg"; import TriangleNavigationDownReactSvgUrl from "PUBLIC_DIR/images/triangle.navigation.down.react.svg?url"; @@ -37,35 +37,24 @@ import { MainButtonProps } from "./MainButton.types"; import MainButtonTheme from "./MainButton.theme"; const MainButton = (props: MainButtonProps) => { - const { text, model, isDropdown, isDisabled, onAction, opened } = props; + const { text, model, isDropdown, isDisabled, onAction } = props; const { id, ...rest } = props; const ref = useRef(null); const menuRef = useRef void; hide: (e: React.MouseEvent) => void; + toggle: (e: React.MouseEvent) => void; }>(null); - const [isOpen, setIsOpen] = useState(opened || false); - const stopAction = (e: React.MouseEvent) => e.preventDefault(); - const toggle = (e: React.MouseEvent, isOpenProp: boolean) => { + const toggle = (e: React.MouseEvent) => { if (!menuRef.current) return; const menu = menuRef.current; - if (isOpenProp) { - menu.show(e); - } else { - menu.hide(e); - } - - setIsOpen(isOpenProp); - }; - - const onHide = () => { - setIsOpen(false); + menu.toggle(e); }; const onMainButtonClick = (e: React.MouseEvent) => { @@ -73,7 +62,7 @@ const MainButton = (props: MainButtonProps) => { if (!isDropdown) { onAction?.(e); } else { - toggle(e, !isOpen); + toggle(e); } } else { stopAction(e); @@ -91,12 +80,7 @@ const MainButton = (props: MainButtonProps) => { src={TriangleNavigationDownReactSvgUrl} /> - + )} From 7edfdd5aca6ebc7e3eb05ea2c9aee465be31981d Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Thu, 18 Apr 2024 11:27:23 +0300 Subject: [PATCH 004/205] Shared:ContextMenu: fix event bubble --- packages/shared/components/context-menu/ContextMenu.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/shared/components/context-menu/ContextMenu.tsx b/packages/shared/components/context-menu/ContextMenu.tsx index e88745d207..0e365634ef 100644 --- a/packages/shared/components/context-menu/ContextMenu.tsx +++ b/packages/shared/components/context-menu/ContextMenu.tsx @@ -114,6 +114,9 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { setModel(m); } + e.stopPropagation(); + e.preventDefault(); + currentEvent.current = e; if (visible) { if (!isMobileUtils()) { From 8547aa1d3cc0c5d414bcd1fae87dffc18c521cf3 Mon Sep 17 00:00:00 2001 From: Aleksandr Lushkin Date: Thu, 18 Apr 2024 17:30:51 +0200 Subject: [PATCH 005/205] Shared: Navigation: Fix shifted dropbox on mobile --- packages/shared/components/navigation/Navigation.styled.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/shared/components/navigation/Navigation.styled.ts b/packages/shared/components/navigation/Navigation.styled.ts index 8a8504cf74..4755b2bb1f 100644 --- a/packages/shared/components/navigation/Navigation.styled.ts +++ b/packages/shared/components/navigation/Navigation.styled.ts @@ -684,6 +684,7 @@ const StyledBox = styled.div<{ @media ${mobile} { width: ${({ dropBoxWidth }) => `${dropBoxWidth}px`}; padding-top: 10px !important; + inset-inline-start: 0; } `; From d92cf5cd6a5f03528d8b08be4382d12d7f2e6bd0 Mon Sep 17 00:00:00 2001 From: Aleksandr Lushkin Date: Thu, 18 Apr 2024 18:33:01 +0200 Subject: [PATCH 006/205] Shared: Filter: Fix sort dropdown in RTL --- packages/shared/components/filter/Filter.styled.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/components/filter/Filter.styled.ts b/packages/shared/components/filter/Filter.styled.ts index 5dd4cd5ed4..c169ac8798 100644 --- a/packages/shared/components/filter/Filter.styled.ts +++ b/packages/shared/components/filter/Filter.styled.ts @@ -601,7 +601,7 @@ const StyledSortButton = styled.div<{ viewAs: TViewAs; isDesc: boolean }>` ${isMobile && isIOS && css` - right: 48px; + inset-inline-end: 48px; `} .view-selector-item { From 8a37ae40946adc4c3c132a946121fa4f0c64d075 Mon Sep 17 00:00:00 2001 From: Aleksandr Lushkin Date: Fri, 19 Apr 2024 09:40:24 +0200 Subject: [PATCH 007/205] Shared: Context-menu: Fix context menu item in rtl --- .../shared/components/context-menu/ContextMenu.styled.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/shared/components/context-menu/ContextMenu.styled.ts b/packages/shared/components/context-menu/ContextMenu.styled.ts index 3a2ee82b02..bc8831f2ee 100644 --- a/packages/shared/components/context-menu/ContextMenu.styled.ts +++ b/packages/shared/components/context-menu/ContextMenu.styled.ts @@ -300,10 +300,11 @@ const StyledContextMenu = styled.div<{ } .p-contextmenu .scroll-body .p-menuitem { - margin-right: ${(props) => `-${props.theme.scrollbar.paddingInlineEnd}`}; + margin-inline-end: ${(props) => + `-${props.theme.scrollbar.paddingInlineEnd}`}; @media ${mobile} { - margin-right: ${(props) => + margin-inline-end: ${(props) => `-${props.theme.scrollbar.paddingInlineEndMobile}`}; } } From c98a366b1bb14250e5b2859ce5da54b2536ff447 Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Fri, 19 Apr 2024 11:03:55 +0300 Subject: [PATCH 008/205] Shared:Components:ContextMenu: fix padding for touch devices --- packages/shared/components/context-menu/ContextMenu.styled.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/shared/components/context-menu/ContextMenu.styled.ts b/packages/shared/components/context-menu/ContextMenu.styled.ts index bc8831f2ee..74e71c727f 100644 --- a/packages/shared/components/context-menu/ContextMenu.styled.ts +++ b/packages/shared/components/context-menu/ContextMenu.styled.ts @@ -261,6 +261,10 @@ const StyledContextMenu = styled.div<{ -webkit-touch-callout: none; + @media ${tablet} { + padding: 0 16px; + } + &:hover { background-color: ${(props) => props.noHover From 682c4cdaa0c76e96ded4967e842a20737f577faf Mon Sep 17 00:00:00 2001 From: Aleksandr Lushkin Date: Fri, 19 Apr 2024 10:29:06 +0200 Subject: [PATCH 009/205] Shared: Filter: Possible fix sort dropdown in rtl --- packages/shared/components/filter/Filter.styled.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/components/filter/Filter.styled.ts b/packages/shared/components/filter/Filter.styled.ts index c169ac8798..7f0d060ada 100644 --- a/packages/shared/components/filter/Filter.styled.ts +++ b/packages/shared/components/filter/Filter.styled.ts @@ -601,7 +601,7 @@ const StyledSortButton = styled.div<{ viewAs: TViewAs; isDesc: boolean }>` ${isMobile && isIOS && css` - inset-inline-end: 48px; + ${({ theme }) => theme.interfaceDirection === "ltr" && `right: 48px;`} `} .view-selector-item { From b723b1e98a053d7d59b1826f0a531b0f6d74c0ba Mon Sep 17 00:00:00 2001 From: Aleksandr Lushkin Date: Fri, 19 Apr 2024 12:23:20 +0200 Subject: [PATCH 010/205] Shared: Filter: Remove moving sort drop down for ios --- packages/shared/components/filter/Filter.styled.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/shared/components/filter/Filter.styled.ts b/packages/shared/components/filter/Filter.styled.ts index 7f0d060ada..88987a57ed 100644 --- a/packages/shared/components/filter/Filter.styled.ts +++ b/packages/shared/components/filter/Filter.styled.ts @@ -598,12 +598,6 @@ const StyledSortButton = styled.div<{ viewAs: TViewAs; isDesc: boolean }>` min-width: 200px; margin-top: 3px; - ${isMobile && - isIOS && - css` - ${({ theme }) => theme.interfaceDirection === "ltr" && `right: 48px;`} - `} - .view-selector-item { display: flex; align-items: center; From 23ef72f5851e5ca0d50e22f794c9ae22e406a857 Mon Sep 17 00:00:00 2001 From: Aleksandr Lushkin Date: Fri, 19 Apr 2024 13:13:42 +0200 Subject: [PATCH 011/205] Shared: Filter: Fix sort dropdown shifting on russian lang on ios --- packages/shared/components/filter/Filter.styled.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/shared/components/filter/Filter.styled.ts b/packages/shared/components/filter/Filter.styled.ts index 88987a57ed..d108a9ecac 100644 --- a/packages/shared/components/filter/Filter.styled.ts +++ b/packages/shared/components/filter/Filter.styled.ts @@ -597,6 +597,7 @@ const StyledSortButton = styled.div<{ viewAs: TViewAs; isDesc: boolean }>` bottom: auto; min-width: 200px; margin-top: 3px; + width: auto; .view-selector-item { display: flex; From 899a3f5db2369be7455cbb90f98f9bfe508d7d81 Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Fri, 19 Apr 2024 15:25:17 +0300 Subject: [PATCH 012/205] Fixed Bug 67366 for Desktop Editors --- packages/doceditor/src/components/Root.tsx | 4 ++++ packages/doceditor/src/utils/index.ts | 19 ++++++++++++------- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/packages/doceditor/src/components/Root.tsx b/packages/doceditor/src/components/Root.tsx index 025ae59ad3..4137b9ba8e 100644 --- a/packages/doceditor/src/components/Root.tsx +++ b/packages/doceditor/src/components/Root.tsx @@ -145,6 +145,10 @@ const Root = ({ selectFileDialogVisible ) calculateAsideHeight(); + + if (isSharingDialogVisible) { + setTimeout(calculateAsideHeight, 10); + } }, [ isSharingDialogVisible, isVisibleSelectFolderDialog, diff --git a/packages/doceditor/src/utils/index.ts b/packages/doceditor/src/utils/index.ts index 6253433b56..9df00bb6bd 100644 --- a/packages/doceditor/src/utils/index.ts +++ b/packages/doceditor/src/utils/index.ts @@ -230,15 +230,20 @@ export const calculateAsideHeight = () => { if (viewPort.widgetType === "window") { const { captionHeight } = viewPort; - const backdrop = document.getElementsByClassName( - "backdrop-active", - )[0] as HTMLElement; + const backdrop = + (document.getElementsByClassName("backdrop-active")[0] as HTMLElement) ?? + (document.getElementsByClassName( + "modal-backdrop-active", + )[0] as HTMLElement); const aside = document.getElementsByTagName("aside")[0]; - if (aside && backdrop) { - backdrop.style.height = - aside.style.height = `calc(100dvh - ${captionHeight}px`; - backdrop.style.marginTop = aside.style.top = `${captionHeight}px`; + if (backdrop) { + backdrop.style.height = `calc(100dvh - ${captionHeight}px`; + backdrop.style.marginTop = `${captionHeight}px`; + } + if (aside) { + aside.style.height = `calc(100dvh - ${captionHeight}px`; + aside.style.top = `${captionHeight}px`; } } }; From 4ad7c923c8d5e750b6f7174506ed5085b485380a Mon Sep 17 00:00:00 2001 From: Aleksandr Lushkin Date: Fri, 19 Apr 2024 17:03:41 +0200 Subject: [PATCH 013/205] Shared: InfiniteLoader: Fix shifted table in RTL on Ipad mini --- .../shared/components/infinite-loader/sub-components/List.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/shared/components/infinite-loader/sub-components/List.tsx b/packages/shared/components/infinite-loader/sub-components/List.tsx index 9f15ec7321..39bd241d4c 100644 --- a/packages/shared/components/infinite-loader/sub-components/List.tsx +++ b/packages/shared/components/infinite-loader/sub-components/List.tsx @@ -176,6 +176,8 @@ const ListComponent = ({ overscanRowCount={3} onScroll={onScroll} viewAs={viewAs} + // React virtualized sets "LTR" by default. + style={{ direction: "inherit" }} /> ); }} From f64c306543b4b9d35f04932aafad4dc094c04739 Mon Sep 17 00:00:00 2001 From: Vladimir Khvan Date: Mon, 22 Apr 2024 13:47:10 +0500 Subject: [PATCH 014/205] Web: CLient: JavascriptSDK: added width and height of img --- .../developer-tools/JavascriptSDK/sub-components/PresetTile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PresetTile.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PresetTile.js index f93bdc1276..1eb54c69e9 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PresetTile.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/PresetTile.js @@ -89,7 +89,7 @@ const PresetTile = (props) => { {title} - {title} + {title} {description}