diff --git a/packages/client/src/components/FilesPanels/index.js b/packages/client/src/components/FilesPanels/index.js
index edce96ce7a..fdec437bfd 100644
--- a/packages/client/src/components/FilesPanels/index.js
+++ b/packages/client/src/components/FilesPanels/index.js
@@ -40,7 +40,7 @@ import {
VersionHistoryPanel,
ChangeOwnerPanel,
NewFilesPanel,
- HotkeyPanel,
+ HotkeysPanel,
InvitePanel,
EditLinkPanel,
EmbeddingPanel,
@@ -284,7 +284,7 @@ const Panels = (props) => {
/>
),
- hotkeyPanelVisible && ,
+ hotkeyPanelVisible && ,
invitePanelVisible && ,
convertPasswordDialogVisible && (
diff --git a/packages/client/src/components/panels/HotkeysPanel/StyledHotkeys.js b/packages/client/src/components/panels/HotkeysPanel/StyledHotkeys.js
index e155e58245..0476369b7f 100644
--- a/packages/client/src/components/panels/HotkeysPanel/StyledHotkeys.js
+++ b/packages/client/src/components/panels/HotkeysPanel/StyledHotkeys.js
@@ -24,29 +24,20 @@
// 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 styled, { css } from "styled-components";
-import { Scrollbar } from "@docspace/shared/components/scrollbar";
+import styled from "styled-components";
import { Base } from "@docspace/shared/themes";
import { tablet, mobile } from "@docspace/shared/utils";
const StyledHotkeysPanel = styled.div`
- .hotkeys-panel {
- .scroll-body {
- padding-inline-end: 0 !important;
- }
- }
-
.hotkeys_sub-header {
font-weight: 700;
font-size: 16px;
- padding-inline-start: 16px;
margin: 20px 0 6px;
}
.hotkeys_row {
- width: calc(100% - 32px);
+ width: 100%;
min-height: 41px;
- margin: 0 16px;
box-sizing: border-box;
border-bottom: none;
@@ -87,10 +78,4 @@ const StyledHotkeysPanel = styled.div`
StyledHotkeysPanel.defaultProps = { theme: Base };
-const StyledScrollbar = styled(Scrollbar)`
- position: relative;
- padding: 16px 0;
- height: calc(100vh - 87px) !important;
-`;
-
-export { StyledHotkeysPanel, StyledScrollbar };
+export { StyledHotkeysPanel };
diff --git a/packages/client/src/components/panels/HotkeysPanel/index.js b/packages/client/src/components/panels/HotkeysPanel/index.js
index 3a4c959d4e..2353e9177b 100644
--- a/packages/client/src/components/panels/HotkeysPanel/index.js
+++ b/packages/client/src/components/panels/HotkeysPanel/index.js
@@ -24,13 +24,18 @@
// 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, { useEffect, useRef } from "react";
+import { useEffect } from "react";
import { observer, inject } from "mobx-react";
import { withTranslation } from "react-i18next";
+import { isMacOs } from "react-device-detect";
import { Heading } from "@docspace/shared/components/heading";
-import { Backdrop } from "@docspace/shared/components/backdrop";
-import { Aside } from "@docspace/shared/components/aside";
-import { StyledHotkeysPanel, StyledScrollbar } from "./StyledHotkeys";
+import {
+ ModalDialog,
+ ModalDialogType,
+} from "@docspace/shared/components/modal-dialog";
+import Base from "@docspace/shared/themes/base";
+
+import { StyledHotkeysPanel } from "./StyledHotkeys";
import SelectionBlock from "./SelectionBlock";
import MoveBlock from "./MoveBlock";
import ActionsBlock from "./ActionsBlock";
@@ -39,10 +44,8 @@ import PreviewActionsBlock from "./PreviewActionsBlock";
import NavigationBlock from "./NavigationBlock";
import CreationBlock from "./CreationBlock";
import UploadBlock from "./UploadBlock";
-import { isMacOs } from "react-device-detect";
-import Base from "@docspace/shared/themes/base";
-const HotkeyPanel = ({
+const HotkeysPanel = ({
visible,
setHotkeyPanelVisible,
t,
@@ -50,8 +53,6 @@ const HotkeyPanel = ({
tReady,
isVisitor,
}) => {
- const scrollRef = useRef(null);
-
const onClose = () => setHotkeyPanelVisible(false);
const textStyles = {
fontSize: "13px",
@@ -71,28 +72,22 @@ const HotkeyPanel = ({
(e.key === "Esc" || e.key === "Escape") && onClose();
useEffect(() => {
- scrollRef.current && scrollRef?.current?.contentElement.focus();
document.addEventListener("keyup", onKeyPress);
return () => document.removeEventListener("keyup", onKeyPress);
});
return (
-
-
-
-
+
+
+
);
};
-HotkeyPanel.defaultProps = { theme: Base };
+HotkeysPanel.defaultProps = { theme: Base };
export default inject(({ settingsStore, publicRoomStore, userStore }) => {
const { hotkeyPanelVisible, setHotkeyPanelVisible, theme } = settingsStore;
@@ -184,6 +179,6 @@ export default inject(({ settingsStore, publicRoomStore, userStore }) => {
};
})(
withTranslation(["HotkeysPanel", "Article", "Common", "Files"])(
- observer(HotkeyPanel),
+ observer(HotkeysPanel),
),
);
diff --git a/packages/client/src/components/panels/index.js b/packages/client/src/components/panels/index.js
index 773fbaa370..10821187b2 100644
--- a/packages/client/src/components/panels/index.js
+++ b/packages/client/src/components/panels/index.js
@@ -30,7 +30,7 @@ import NewFilesPanel from "./NewFilesPanel";
import VersionHistoryPanel from "./VersionHistoryPanel";
import ChangeOwnerPanel from "./ChangeOwnerPanel";
import UploadPanel from "./UploadPanel";
-import HotkeyPanel from "./HotkeysPanel";
+import HotkeysPanel from "./HotkeysPanel";
import InvitePanel from "./InvitePanel";
import EditLinkPanel from "./EditLinkPanel";
@@ -41,7 +41,7 @@ export {
VersionHistoryPanel,
ChangeOwnerPanel,
UploadPanel,
- HotkeyPanel,
+ HotkeysPanel,
InvitePanel,
EditLinkPanel,
};