Web: Files: added hotkey border

products/ASC.Files/Client/src/HOCs/withFileActions.js

@@ -244,6 +244,7 @@ export default function withFileActions(WrappedFileItem) {
         viewAs,
         bufferSelection,
         setBufferSelection,
+        hotkeyCaret,
       } = filesStore;
       const { startUpload } = uploadDataStore;
       const { type, extension, id } = fileActionStore;
@@ -267,6 +268,8 @@ export default function withFileActions(WrappedFileItem) {
         bufferSelection.fileExst === item.fileExst &&
         !selection.length; // need for select row item
 
+      const showHotkeyBorder = hotkeyCaret?.id === item.id;
+
       return {
         t,
         item,
@@ -301,7 +304,7 @@ export default function withFileActions(WrappedFileItem) {
         isActive,
         setBufferSelection,
         bufferSelection,
-
+        showHotkeyBorder,
         openFileAction,
       };
     }

products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js

@@ -63,6 +63,25 @@ const StyledSimpleFilesRow = styled(Row)`
     "url(images/cursor.palm.svg), auto"};
   margin-top: -2px;
 
+  ${(props) =>
+    props.showHotkeyBorder &&
+    css`
+      border-top: 1px solid #2da7db;
+      margin-top: -3px;
+    `}
+
+  ::after {
+    ${(props) =>
+      props.showHotkeyBorder &&
+      css`
+        background: #2da7db;
+        padding-left: 24px;
+        padding-right: 24px;
+        margin-left: -24px;
+        margin-right: -24px;
+      `}
+  }
+
   ${(props) =>
     !props.contextOptions &&
     `
@@ -183,6 +202,7 @@ const SimpleFilesRow = (props) => {
     isEdit,
     isActive,
     isAdmin,
+    showHotkeyBorder,
   } = props;
 
   const withAccess = isAdmin || item.access === 0;
@@ -220,6 +240,7 @@ const SimpleFilesRow = (props) => {
           isActive={isActive}
           isThirdPartyFolder={item.isThirdPartyFolder}
           withAccess={withAccess}
+          showHotkeyBorder={showHotkeyBorder}
         >
           <FilesRowContent
             item={item}

products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js

@@ -29,6 +29,10 @@ const contextMenuWrapperCheckedStyle = css`
   border-image-source: linear-gradient(to left, #f3f4f4 24px, #eceef1 24px);
 `;
 
+const hotkeyBorderStyle = css`
+  border-image-source: linear-gradient(to left, #2da7db 24px, #2da7db 24px);
+`;
+
 const rowCheckboxDraggingStyle = css`
   border-image-source: linear-gradient(to right, #f8f7bf 24px, #eceef1 24px);
 `;
@@ -61,6 +65,8 @@ const StyledTableRow = styled(TableRow)`
       !props.isThirdPartyFolder &&
       (props.checked || props.isActive) &&
       "url(images/cursor.palm.svg), auto"};
+
+    ${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"}
   }
 
   .table-container_element {
@@ -109,6 +115,7 @@ const StyledTableRow = styled(TableRow)`
 
     ${(props) => props.checked && contextMenuWrapperCheckedStyle};
     ${(props) => props.dragging && contextMenuWrapperDraggingStyle};
+    ${(props) => props.showHotkeyBorder && hotkeyBorderStyle};
   }
 
   .edit {
@@ -117,6 +124,15 @@ const StyledTableRow = styled(TableRow)`
       height: 12px;
     }
   }
+
+  ${(props) =>
+    props.showHotkeyBorder &&
+    css`
+      .table-container_cell {
+        margin-top: -1px;
+        border-top: 1px solid #2da7db;
+      }
+    `}
 `;
 
 const StyledDragAndDrop = styled(DragAndDrop)`
@@ -214,6 +230,7 @@ const FilesTableRow = (props) => {
     onHideContextMenu,
     onFilesClick,
     quickButtonsComponent,
+    showHotkeyBorder,
   } = props;
 
   const element = (
@@ -273,6 +290,7 @@ const FilesTableRow = (props) => {
         isThirdPartyFolder={item.isThirdPartyFolder}
         onDoubleClick={onFilesClick}
         checked={checkedProps}
+        showHotkeyBorder={showHotkeyBorder}
         title={
           item.isFolder
             ? t("Translations:TitleShowFolderActions")

products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FileTile.js

@@ -38,6 +38,7 @@ const FilesTile = (props) => {
     isActive,
     isEdit,
     quickButtonsComponent,
+    showHotkeyBorder,
   } = props;
 
   const temporaryExtension =
@@ -91,6 +92,7 @@ const FilesTile = (props) => {
               ? t("Translations:TitleShowFolderActions")
               : t("Translations:TitleShowActions")
           }
+          showHotkeyBorder={showHotkeyBorder}
         >
           <FilesTileContent
             item={item}

products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js

@@ -47,6 +47,7 @@ const StyledTile = styled.div`
   width: 100%;
   border: 1px solid #d0d5da;
   border-radius: 3px;
+  ${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
   ${(props) => props.isFolder && "border-top-left-radius: 0px;"}
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
@@ -89,6 +90,7 @@ const StyledTile = styled.div`
   &:before, 
   &:after {
     ${(props) => props.isFolder && props.dragging && draggingStyle};
+    ${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
   }
 
   &:before,
@@ -346,6 +348,7 @@ class Tile extends React.PureComponent {
       isActive,
       isEdit,
       title,
+      showHotkeyBorder,
     } = this.props;
     const { isFolder, id, fileExst } = item;
 
@@ -389,6 +392,7 @@ class Tile extends React.PureComponent {
         checked={checked}
         isActive={isActive}
         isDesktop={isDesktop}
+        showHotkeyBorder={showHotkeyBorder}
       >
         {isFolder || (!fileExst && id === -1) ? (
           <>

products/ASC.Files/Client/src/pages/Home/Section/Body/index.js

@@ -32,6 +32,7 @@ const SectionBodyContent = (props) => {
     tooltipPageX,
     tooltipPageY,
     setHotkeyCaretStart,
+    setHotkeyCaret,
   } = props;
 
   useEffect(() => {
@@ -72,6 +73,7 @@ const SectionBodyContent = (props) => {
       setSelection([]);
       setBufferSelection(null);
       setHotkeyCaretStart(null);
+      setHotkeyCaret(null);
     }
   };
 
@@ -215,6 +217,7 @@ export default inject(
       tooltipPageY,
       setBufferSelection,
       setHotkeyCaretStart,
+      setHotkeyCaret,
     } = filesStore;
 
     return {
@@ -236,6 +239,7 @@ export default inject(
       tooltipPageX,
       tooltipPageY,
       setHotkeyCaretStart,
+      setHotkeyCaret,
     };
   }
 )(