diff --git a/packages/client/src/components/Article/MainButton/index.js b/packages/client/src/components/Article/MainButton/index.js index 7069aed3c6..e3e307ee8f 100644 --- a/packages/client/src/components/Article/MainButton/index.js +++ b/packages/client/src/components/Article/MainButton/index.js @@ -920,7 +920,6 @@ export default inject( const isFolder = selectedFolderStore.isFolder; const { isAdmin, isOwner, isRoomAdmin } = userStore.user; - console.log(userStore.user); const { isGracePeriod } = currentTariffStatusStore; const { setOformFromFolderId, oformsFilter } = oformsStore; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagDropdown.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagDropdown.js index b93f9979f2..21d281c2eb 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagDropdown.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/TagDropdown.js @@ -134,24 +134,20 @@ const TagDropdown = ({ const dropdownItems = calcualateDisplayedDropdownItems(); return ( - - - {dropdownItems} - - + {dropdownItems} + ); }; diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js index 809e5b2e91..d53b0ecf22 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/TagInput/index.js @@ -33,6 +33,8 @@ import InputParam from "../Params/InputParam"; import TagDropdown from "./TagDropdown"; const StyledTagInput = styled.div` + position: relative; + .set_room_params-tag_input { &-label_wrapper { &-label { diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomCell.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomCell.js index 04d9a4bdfc..7990a2733b 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomCell.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomCell.js @@ -44,13 +44,14 @@ const RoomCell = ({ sideColor, item }) => { setIsTooltipLoading(true); try { const folderPath = await getFolderPath(originId); - if (folderPath[0].id === CategoryType.Shared) folderPath.shift(); + if (folderPath[0].id === CategoryType.SharedRoom) folderPath.shift(); setPath(folderPath); } catch (e) { console.error(e); setPath([{ id: 0, title: originRoomTitle || originTitle }]); + } finally { + setIsTooltipLoading(false); } - setIsTooltipLoading(false); }; const canVisibleTitle = originRoomTitle || originTitle; diff --git a/packages/client/src/store/FilesStore.js b/packages/client/src/store/FilesStore.js index 708204fd20..0f97248f41 100644 --- a/packages/client/src/store/FilesStore.js +++ b/packages/client/src/store/FilesStore.js @@ -3997,12 +3997,12 @@ class FilesStore { }); }; - //Duplicate of countTilesInRow, used to update the number of tiles in a row after the window is resized. + //Used to update the number of tiles in a row after the window is resized. getCountTilesInRow = () => { const isDesktopView = isDesktop(); + const isMobileView = isMobile(); const tileGap = isDesktopView ? 16 : 14; const minTileWidth = 216 + tileGap; - const body = document.getElementById("section"); const elem = document.getElementsByClassName("section-wrapper-content")[0]; let containerWidth = 0; @@ -4017,10 +4017,11 @@ class FilesStore { elemPadding.split("px")[3]; } - const sectionPadding = body?.offsetWidth - containerWidth - tileGap + 1; - const sectionWidth = body ? body.offsetWidth - sectionPadding : 0; + containerWidth += tileGap; + if (!isMobileView) containerWidth -= 1; + if (!isDesktopView) containerWidth += 3; //tablet tile margin -3px (TileContainer.js) - return Math.floor(sectionWidth / minTileWidth); + return Math.floor(containerWidth / minTileWidth); }; setInvitationLinks = async (roomId, title, access, linkId) => { diff --git a/packages/client/src/store/HotkeyStore.js b/packages/client/src/store/HotkeyStore.js index fc4e42014b..705746e7cd 100644 --- a/packages/client/src/store/HotkeyStore.js +++ b/packages/client/src/store/HotkeyStore.js @@ -694,15 +694,7 @@ class HotkeyStore { }; get countTilesInRow() { - const isDesktopView = isDesktop(); - const tileGap = isDesktopView ? 16 : 14; - const minTileWidth = 216 + tileGap; - const sectionPadding = isDesktopView ? 24 : 16; - - const body = document.getElementById("section"); - const sectionWidth = body ? body.offsetWidth - sectionPadding : 0; - - return Math.floor(sectionWidth / minTileWidth); + return this.filesStore.getCountTilesInRow(); } get division() { diff --git a/packages/shared/api/files/index.ts b/packages/shared/api/files/index.ts index eef9a0092c..284834e313 100644 --- a/packages/shared/api/files/index.ts +++ b/packages/shared/api/files/index.ts @@ -137,7 +137,6 @@ export async function getFolderPath(folderId: number) { }; const res = (await request(options)) as TGetFolderPath; - return res; } diff --git a/packages/shared/components/room-icon/index.tsx b/packages/shared/components/room-icon/index.tsx index 71f3914baf..e2f5032391 100644 --- a/packages/shared/components/room-icon/index.tsx +++ b/packages/shared/components/room-icon/index.tsx @@ -79,7 +79,8 @@ const StyledIcon = styled.div<{ .room-icon_badge { position: absolute; - margin: 24px 0 0 24px; + margin-block: 24px 0; + margin-inline: 24px 0; .room-icon-button { width: 12px; diff --git a/packages/shared/components/selector/Selector.tsx b/packages/shared/components/selector/Selector.tsx index 7d8a9e69f7..f1a7817154 100644 --- a/packages/shared/components/selector/Selector.tsx +++ b/packages/shared/components/selector/Selector.tsx @@ -28,6 +28,8 @@ import React from "react"; +import { ButtonKeys } from "../../enums"; + import { Header } from "./sub-components/Header"; import { Body } from "./sub-components/Body"; import { Footer } from "./sub-components/Footer"; @@ -383,6 +385,19 @@ const Selector = ({ setFooterVisible(isEqual); }, [selectedItems, newSelectedItems]); + React.useEffect(() => { + const onKeyboardAction = (e: KeyboardEvent) => { + if (e.key === ButtonKeys.esc) { + onCancel?.(); + } + }; + + window.addEventListener("keydown", onKeyboardAction); + return () => { + window.removeEventListener("keydown", onKeyboardAction); + }; + }, [onCancel]); + React.useLayoutEffect(() => { if (items) { if ( diff --git a/packages/shared/components/tooltip/Tooltip.tsx b/packages/shared/components/tooltip/Tooltip.tsx index ba75683be3..e1c1954918 100644 --- a/packages/shared/components/tooltip/Tooltip.tsx +++ b/packages/shared/components/tooltip/Tooltip.tsx @@ -116,6 +116,20 @@ const Tooltip = React.forwardRef( flip({ crossAxis: false, fallbackAxisSideDirection, + fallbackPlacements: [ + "right", + "bottom", + "left", + "top", + "top-start", + "top-end", + "right-start", + "right-end", + "bottom-start", + "bottom-end", + "left-start", + "left-end", + ], }), shift(), ]} diff --git a/packages/shared/enums/index.ts b/packages/shared/enums/index.ts index 6e8e74d59d..84863cf86a 100644 --- a/packages/shared/enums/index.ts +++ b/packages/shared/enums/index.ts @@ -455,7 +455,7 @@ export const enum ParseErrorTypes { export const enum ButtonKeys { enter = "enter", - esc = "esc", + esc = "Escape", tab = "Tab", }