Web: Files: HotkeysPanel: rewritten to modal-dialog

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 && <HotkeyPanel key="hotkey-panel" />,
+    hotkeyPanelVisible && <HotkeysPanel key="hotkey-panel" />,
     invitePanelVisible && <InvitePanel key="invite-panel" />,
     convertPasswordDialogVisible && (
       <ConvertPasswordDialog key="convert-password-dialog" />

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 };

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 (
-    <StyledHotkeysPanel>
-      <Backdrop
-        onClick={onClose}
-        visible={visible}
-        isAside={true}
-        zIndex={210}
-      />
-      <Aside
-        className="hotkeys-panel"
+    <ModalDialog
+      isLoading={!tReady}
       visible={visible}
       onClose={onClose}
-        withoutBodyScroll={true}
-        header={t("Common:Hotkeys")}
+      displayType={ModalDialogType.aside}
+      withBodyScroll
     >
-        <StyledScrollbar ref={scrollRef}>
+      <ModalDialog.Header>{t("Common:Hotkeys")}</ModalDialog.Header>
+      <ModalDialog.Body>
+        <StyledHotkeysPanel>
           <Heading className="hotkeys_sub-header">
             {t("HotkeysNavigation")}
           </Heading>
@@ -165,13 +160,13 @@ const HotkeyPanel = ({
             textStyles={textStyles}
             keyTextStyles={keyTextStyles}
           />
-        </StyledScrollbar>
-      </Aside>
         </StyledHotkeysPanel>
+      </ModalDialog.Body>
+    </ModalDialog>
   );
 };
 
-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),
   ),
 );

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,
 };