Web:Files:VirtualRooms: disable open archived rooms and fix logo

2022-07-12 10:22:46 +03:00 · 2022-07-12 10:22:46 +03:00 · 1bee56d3aa
commit 1bee56d3aa
parent 6602a71fe6
4 changed files with 40 additions and 41 deletions
--- a/products/ASC.Files/Client/src/pages/VirtualRooms/Section/Body/RowView/sub-components/RoomsRow.js
+++ b/products/ASC.Files/Client/src/pages/VirtualRooms/Section/Body/RowView/sub-components/RoomsRow.js
@ -9,6 +9,7 @@ import RoomLogo from "@appserver/components/room-logo";
 import { Base } from "@appserver/components/themes";

 import RoomsRowContent from "./RoomsRowContent";
+import { FolderType } from "@appserver/common/constants";

 const marginStyles = css`
  margin-left: -24px;
@ -109,10 +110,13 @@ const StyledRoomsRow = styled(Row)`
 StyledRoomsRow.defaultProps = { theme: Base };

 const RoomsRow = ({
-  item,
-  selectRoom,
  isChecked,
  isActive,
+  isArchive,
+
+  item,
+  selectRoom,
+
  sectionWidth,
  openContextMenu,
  closeContextMenu,
@ -146,9 +150,10 @@ const RoomsRow = ({

  const onOpenRoomAction = React.useCallback(
    (e) => {
+      if (item.isArchive) return;
      onOpenRoom && onOpenRoom(e, item.id, history);
    },
-    [onOpenRoom, item.id, history]
+    [onOpenRoom, item.id, history, item.isArchive]
  );

  const element = (
@ -156,7 +161,7 @@ const RoomsRow = ({
      className="room-row_logo"
      type={item.roomType}
      isPrivacy={false}
-      isArchive={false}
+      isArchive={item.isArchive}
      withCheckbox={true}
      isChecked={isChecked}
      isIndeterminate={false}
@ -212,6 +217,7 @@ export default inject(
    return {
      isChecked,
      isActive,
+
      selectRoom,
      getRoomsContextOptions,
      openContextMenu,
--- a/products/ASC.Files/Client/src/pages/VirtualRooms/Section/Body/TableView/sub-components/TableRow.js
+++ b/products/ASC.Files/Client/src/pages/VirtualRooms/Section/Body/TableView/sub-components/TableRow.js
@ -9,6 +9,7 @@ import TypeCell from "./cells/TypeCell";
 import OwnerCell from "./cells/OwnerCell";
 import DateCell from "./cells/DateCell";
 import TagsCell from "./cells/TagsCell";
+import { FolderType } from "@appserver/common/constants";

 const StyledTableRow = styled(TableRow)`
  .table-container_cell {
@ -17,10 +18,10 @@ const StyledTableRow = styled(TableRow)`
    min-height: 48px;

    background: ${(props) =>
-      (props.isChecked || props.isHover) &&
+      (props.isChecked || props.isActive) &&
      `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
    cursor: ${(props) =>
-      (props.isChecked || props.isHover) &&
+      (props.isChecked || props.isActive) &&
      "url(/static/images/cursor.palm.react.svg), auto"};
  }

@ -55,7 +56,7 @@ const StyledTableRow = styled(TableRow)`
  }

  ${(props) =>
-    (props.isHover || props.isChecked) &&
+    (props.isActive || props.isChecked) &&
    css`
      .room-name_cell {
        .room-logo_icon-container {
@ -77,7 +78,7 @@ const Row = React.forwardRef(
      theme,

      isChecked,
-      isHover,
+      isActive,
      isMe,

      getRoomsContextOptions,
@ -125,15 +126,16 @@ const Row = React.forwardRef(

    const onOpenRoomAction = React.useCallback(
      (e) => {
-        onOpenRoom && onOpenRoom(e, item.id);
+        if (item.isArchive) return;
+        onOpenRoom && onOpenRoom(e, item.id, history);
      },
-      [onOpenRoom, item.id, history]
+      [onOpenRoom, item.id, history, item.isArchive]
    );

    return (
      <StyledTableRow
        className={`table-row${
-          isHover || isChecked ? " table-row-selected" : ""
+          isActive || isChecked ? " table-row-selected" : ""
        }`}
        key={item.id}
        contextOptions={getRoomsContextOptionsActions()}
@ -141,17 +143,18 @@ const Row = React.forwardRef(
        fileContextClick={onContextMenu}
        onHideContextMenu={onCloseContextMenu}
        isChecked={isChecked}
-        isHover={isHover}
+        isActive={isActive}
        onClick={onOpenRoomAction}
      >
        <FileNameCell
          theme={theme}
          label={item.title}
          type={item.roomType}
-          isPrivacy={item.isPrivacy}
-          isChecked={isChecked}
          pinned={item.pinned}
          badgeLabel={item.new}
+          isPrivacy={item.isPrivacy}
+          isArchive={item.isArchive}
+          isChecked={isChecked}
          onRoomSelect={onRoomSelect}
          onClickUnpinRoom={onClickUnpinRoomAction}
          onBadgeClick={onBadgeClick}
@ -193,12 +196,12 @@ export default inject(
    const { onOpenRoom, onSelectTag } = roomsActionsStore;

    const isChecked = !!selection.find((room) => room.id === item.id);
-    const isHover = !isChecked && bufferSelection?.id === item.id;
+    const isActive = !isChecked && bufferSelection?.id === item.id;
    const isMe = item.createdBy.id === auth.userStore.user.id;

    return {
      isChecked,
-      isHover,
+      isActive,
      isMe,

      getRoomsContextOptions,
--- a/products/ASC.Files/Client/src/pages/VirtualRooms/Section/Body/TableView/sub-components/cells/RoomNameCell.js
+++ b/products/ASC.Files/Client/src/pages/VirtualRooms/Section/Body/TableView/sub-components/cells/RoomNameCell.js
@ -5,7 +5,6 @@ import { ReactSVG } from "react-svg";
 import TableCell from "@appserver/components/table-container/TableCell";
 import RoomLogo from "@appserver/components/room-logo";
 import Text from "@appserver/components/text";
-import Checkbox from "@appserver/components/checkbox";
 import Badge from "@appserver/components/badge";

 const StyledText = styled(Text)`
@ -24,6 +23,7 @@ const FileNameCell = ({
  type,
  isPrivacy,
  isChecked,
+  isArchive,
  theme,
  pinned,
  badgeLabel,
@ -41,6 +41,7 @@ const FileNameCell = ({
          withCheckbox={true}
          isChecked={isChecked}
          isIndeterminate={false}
+          isArchive={isArchive}
          onChange={onRoomSelect}
        />
      </div>
--- a/products/ASC.Files/Client/src/pages/VirtualRooms/Section/Body/TileView/sub-components/Tile.js
+++ b/products/ASC.Files/Client/src/pages/VirtualRooms/Section/Body/TileView/sub-components/Tile.js
@ -13,6 +13,7 @@ import ContextMenu from "@appserver/components/context-menu";
 import { Base } from "@appserver/components/themes";

 import RoomsBadges from "../../../../components/Badges";
+import { FolderType } from "@appserver/common/constants";

 const StyledTile = styled.div`
  border: 1px solid #eceef1;
@ -39,7 +40,7 @@ const StyledTile = styled.div`
  }

  ${(props) =>
-    props.isHover &&
+    (props.isActive || props.isChecked) &&
    css`
      .tile-header {
        background: ${(props) =>
@ -49,23 +50,6 @@ const StyledTile = styled.div`
          display: none !important;
        }

-        .room-logo_checkbox {
-          display: flex !important;
-        }
-      }
-    `}
-
-  ${(props) =>
-    props.isChecked &&
-    css`
-      .tile-header {
-        background: ${props.theme.filesSection.tilesView.tile
-          .checkedColor} !important;
-
-        .room-logo_icon-container {
-          display: none !important;
-        }
-
        .room-logo_checkbox {
          display: flex !important;
        }
@ -131,9 +115,13 @@ const Tile = React.forwardRef(
      pinned,
      badge,
      tags,
+      isArchive,
+
      columnCount,
+
      isChecked,
-      isHover,
+      isActive,
+
      onClickPinRoom,
      getRoomsContextOptions,
      selectRoom,
@ -183,16 +171,17 @@ const Tile = React.forwardRef(

    const onOpenRoomAction = React.useCallback(
      (e) => {
+        if (isArchive) return;
        onOpenRoom && onOpenRoom(e, item.id, history);
      },
-      [onOpenRoom, item.id, history]
+      [onOpenRoom, item.id, history, isArchive]
    );

    return (
      <StyledTile
        ref={tileRef}
        isChecked={isChecked}
-        isHover={isHover}
+        isActive={isActive}
        onContextMenu={onContextMenu}
        onClick={onOpenRoomAction}
      >
@ -204,10 +193,10 @@ const Tile = React.forwardRef(
          <RoomLogo
            className={"tile-header_logo"}
            type={roomType}
-            isPrivacy={isPrivacy}
            withCheckbox={true}
            isChecked={isChecked}
            isIndeterminate={false}
+            isArchive={isArchive}
            onChange={onRoomSelect}
          />

@ -270,11 +259,11 @@ export default inject(
    const { onOpenRoom, onSelectRoom, onSelectTag } = roomsActionsStore;

    const isChecked = !!selection.find((room) => room.id === item.id);
-    const isHover = !isChecked && bufferSelection?.id === item.id;
+    const isActive = !isChecked && bufferSelection?.id === item.id;

    return {
      isChecked,
-      isHover,
+      isActive,

      onOpenRoom,
      onSelectRoom,