Web: Files: added withCtrlSelect

packages/client/src/HOCs/withFileActions.js

@@ -121,7 +121,12 @@ export default function withFileActions(WrappedFileItem) {
     };
 
     onMouseClick = (e) => {
-      const { viewAs } = this.props;
+      const { viewAs, withCtrlSelect, item } = this.props;
+
+      if (e.ctrlKey) {
+        withCtrlSelect(item);
+        return;
+      }
 
       if (
         e.target.tagName === "INPUT" ||
@@ -300,6 +305,7 @@ export default function withFileActions(WrappedFileItem) {
         activeFolders,
         setEnabledHotkeys,
         setSelected,
+        withCtrlSelect,
       } = filesStore;
 
       const { startUpload } = uploadDataStore;
@@ -369,6 +375,7 @@ export default function withFileActions(WrappedFileItem) {
         openFileAction,
         setEnabledHotkeys,
         setSelected,
+        withCtrlSelect,
       };
     }
   )(observer(WithFileActions));

packages/client/src/pages/Home/Section/Body/TilesView/FileTile.js

@@ -51,6 +51,7 @@ const FileTile = (props) => {
     onSelectOption,
     columnCount,
     isRooms,
+    withCtrlSelect,
   } = props;
 
   const temporaryExtension =
@@ -103,7 +104,7 @@ const FileTile = (props) => {
           isPrivacy={isPrivacy}
           isDragging={dragging}
           dragging={dragging && isDragging}
-          onClick={onMouseClick}
+          // onClick={onMouseClick}
           thumbnailClick={onFilesClick}
           onDoubleClick={onFilesClick}
           checked={checkedProps}
@@ -121,6 +122,7 @@ const FileTile = (props) => {
           selectOption={onSelectOption}
           columnCount={columnCount}
           isRooms={isRooms}
+          withCtrlSelect={withCtrlSelect}
         >
           <FilesTileContent
             item={item}
@@ -136,13 +138,13 @@ const FileTile = (props) => {
 
 export default inject(({ settingsStore, filesStore, treeFoldersStore }) => {
   const { getIcon } = settingsStore;
-  const { setSelection } = filesStore;
+  const { setSelection, withCtrlSelect } = filesStore;
 
   const { isRoomsFolder, isArchiveFolder } = treeFoldersStore;
 
   const isRooms = isRoomsFolder || isArchiveFolder;
 
-  return { getIcon, setSelection, isRooms };
+  return { getIcon, setSelection, isRooms, withCtrlSelect };
 })(
   withTranslation(["Files", "InfoPanel"])(
     withRouter(

packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js

@@ -437,7 +437,18 @@ class Tile extends React.PureComponent {
   };
 
   onFileClick = (e) => {
-    const { onSelect, item, checked, setSelection } = this.props;
+    const {
+      onSelect,
+      item,
+      checked,
+      setSelection,
+      withCtrlSelect,
+    } = this.props;
+
+    if (e.ctrlKey) {
+      withCtrlSelect(item);
+      return;
+    }
 
     if (
       e.detail === 1 &&

packages/client/src/store/FilesStore.js

@@ -2897,6 +2897,18 @@ class FilesStore {
     return await api.rooms.setRoomSecurity(id, data);
   };
 
+  withCtrlSelect = (item) => {
+    this.setHotkeyCaret(item);
+    this.setHotkeyCaretStart(item);
+
+    const fileIndex = this.selection.findIndex((f) => f.id === item.id);
+    if (fileIndex === -1) {
+      this.setSelection([item, ...this.selection]);
+    } else {
+      this.deselectFile(item);
+    }
+  };
+
   get disableDrag() {
     const {
       isRecycleBinFolder,