From 8b9f72985c9a5260433503c3128c2482bb484a8e Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Mon, 9 Oct 2023 15:07:59 +0300 Subject: [PATCH] Web:Fix room icon. --- .../FilesSelector/helpers/useRoomsHelper.ts | 1 + packages/client/src/components/ItemIcon.js | 2 +- .../src/components/RoomSelector/index.js | 3 ++- .../ItemTitle/FilesItemTitle.js | 2 +- .../InfoPanel/Body/views/Details/index.js | 2 +- .../Body/TilesView/sub-components/Tile.js | 1 + packages/components/context-menu/index.js | 24 +++++++++++++------ .../room-icon/index.js} | 3 ++- packages/components/row/index.js | 1 + .../sub-components/Item/Item.types.ts | 1 + .../selector/sub-components/Item/index.tsx | 9 ++++--- 11 files changed, 34 insertions(+), 15 deletions(-) rename packages/{client/src/components/RoomIcon.js => components/room-icon/index.js} (96%) diff --git a/packages/client/src/components/FilesSelector/helpers/useRoomsHelper.ts b/packages/client/src/components/FilesSelector/helpers/useRoomsHelper.ts index faca35fae3..6a05e8cff5 100644 --- a/packages/client/src/components/FilesSelector/helpers/useRoomsHelper.ts +++ b/packages/client/src/components/FilesSelector/helpers/useRoomsHelper.ts @@ -60,6 +60,7 @@ export const convertRoomsToItems = (rooms: any) => { rootFolderType, isFolder: true, roomType, + color: logo.color, }; }); diff --git a/packages/client/src/components/ItemIcon.js b/packages/client/src/components/ItemIcon.js index 40ec69afef..dc70df492a 100644 --- a/packages/client/src/components/ItemIcon.js +++ b/packages/client/src/components/ItemIcon.js @@ -4,7 +4,7 @@ import { inject, observer } from "mobx-react"; import styled, { css } from "styled-components"; import Base from "@docspace/components/themes/base"; import NoUserSelect from "@docspace/components/utils/commonStyles"; -import RoomIcon from "./RoomIcon"; +import RoomIcon from "@docspace/components/room-icon"; const StyledIcon = styled.img` ${NoUserSelect} diff --git a/packages/client/src/components/RoomSelector/index.js b/packages/client/src/components/RoomSelector/index.js index d9d42decf5..2521dbb710 100644 --- a/packages/client/src/components/RoomSelector/index.js +++ b/packages/client/src/components/RoomSelector/index.js @@ -41,8 +41,9 @@ const convertToItems = (folders) => { const { id, title, roomType, logo } = folder; const icon = logo.medium ? logo.medium : getRoomLogo(roomType); + const color = logo.color; - return { id, label: title, icon }; + return { id, label: title, icon, color }; }); return items; diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js index dd912f1038..411be4dbf1 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js @@ -6,7 +6,7 @@ import IconButton from "@docspace/components/icon-button"; import Text from "@docspace/components/text"; import ItemContextOptions from "./ItemContextOptions"; import { StyledTitle } from "../../styles/common"; -import RoomIcon from "@docspace/client/src/components/RoomIcon"; +import RoomIcon from "@docspace/components/room-icon"; import { RoomsType, ShareAccessRights } from "@docspace/common/constants"; diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Details/index.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Details/index.js index 34bf41cc75..93879159e8 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/views/Details/index.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Details/index.js @@ -9,7 +9,7 @@ import Text from "@docspace/components/text"; import DetailsHelper from "../../helpers/DetailsHelper.js"; import { StyledNoThumbnail, StyledThumbnail } from "../../styles/details.js"; import { StyledProperties, StyledSubtitle } from "../../styles/common.js"; -import RoomIcon from "@docspace/client/src/components/RoomIcon"; +import RoomIcon from "@docspace/components/room-icon"; const Details = ({ t, selection, diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js index 8f5c7a40da..8dfa5e491f 100644 --- a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js +++ b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js @@ -641,6 +641,7 @@ class Tile extends React.PureComponent { const contextMenuHeader = { icon: children[0].props.item.icon, title: children[0].props.item.title, + color: children[0].props.item.logo?.color, }; const title = item.isFolder diff --git a/packages/components/context-menu/index.js b/packages/components/context-menu/index.js index d3458e4ffb..680d1c64c9 100644 --- a/packages/components/context-menu/index.js +++ b/packages/components/context-menu/index.js @@ -20,7 +20,7 @@ import Text from "../text"; import Avatar from "../avatar"; import IconButton from "../icon-button"; import ArrowLeftReactUrl from "PUBLIC_DIR/images/arrow-left.react.svg?url"; - +import RoomIcon from "@docspace/components/room-icon"; class ContextMenu extends Component { constructor(props) { super(props); @@ -125,7 +125,9 @@ class ContextMenu extends Component { position = (event) => { if (event) { const rects = this.props.containerRef?.current.getBoundingClientRect(); - let left = rects ? rects.left - this.props.leftOffset - this.props.rightOffset : event.pageX + 1; + let left = rects + ? rects.left - this.props.leftOffset - this.props.rightOffset + : event.pageX + 1; let top = rects ? rects.top : event.pageY + 1; let width = this.menuRef.current.offsetParent ? this.menuRef.current.offsetWidth @@ -322,6 +324,7 @@ class ContextMenu extends Component { const isAvatarExist = this.props.header?.avatar; const withHeader = !!this.props.header?.title; + const defaultIcon = !!this.props.header?.color; return ( <> @@ -363,11 +366,18 @@ class ContextMenu extends Component { /> ) : (
- drop-down_icon + {defaultIcon ? ( + + ) : ( + drop-down_icon + )}
))} {isAvatarExist && ( diff --git a/packages/client/src/components/RoomIcon.js b/packages/components/room-icon/index.js similarity index 96% rename from packages/client/src/components/RoomIcon.js rename to packages/components/room-icon/index.js index 613b3d33bf..f96dc19bde 100644 --- a/packages/client/src/components/RoomIcon.js +++ b/packages/components/room-icon/index.js @@ -41,11 +41,12 @@ StyledIcon.defaultProps = { theme: Base }; const RoomIcon = ({ title, - isArchive, + isArchive = false, color, size = "32px", radius = "6px", }) => { + console.log("title", title); const titleWithoutSpaces = title.replace(/\s+/g, " ").trim(); const indexAfterLastSpace = titleWithoutSpaces.lastIndexOf(" "); const secondCharacter = diff --git a/packages/components/row/index.js b/packages/components/row/index.js index 02af982f3b..9e1d562bd8 100644 --- a/packages/components/row/index.js +++ b/packages/components/row/index.js @@ -93,6 +93,7 @@ class Row extends React.Component { title: children.props.item.title ? children.props.item.title : children.props.item.displayName, + color: children.props.item.logo?.color, }; } diff --git a/packages/components/selector/sub-components/Item/Item.types.ts b/packages/components/selector/sub-components/Item/Item.types.ts index 12388f107e..d09e8e446f 100644 --- a/packages/components/selector/sub-components/Item/Item.types.ts +++ b/packages/components/selector/sub-components/Item/Item.types.ts @@ -8,6 +8,7 @@ export type Item = { isSelected?: boolean; email?: string; isDisabled?: boolean; + color?: string; }; export type Data = { diff --git a/packages/components/selector/sub-components/Item/index.tsx b/packages/components/selector/sub-components/Item/index.tsx index 72b5ba44ff..9669a3dbf1 100644 --- a/packages/components/selector/sub-components/Item/index.tsx +++ b/packages/components/selector/sub-components/Item/index.tsx @@ -3,7 +3,7 @@ import React from "react"; import Avatar from "../../../avatar"; import Text from "../../../text"; import Checkbox from "../../../checkbox"; - +import RoomIcon from "../../../room-icon"; import StyledItem from "./StyledItem"; import { ItemProps, Data, Item as ItemType } from "./Item.types"; @@ -39,11 +39,12 @@ const Item = React.memo(({ index, style, data }: ItemProps) => { if (!item || (item && !item.id)) return
{rowLoader}
; - const { label, avatar, icon, role, isSelected, isDisabled } = item; + const { label, avatar, icon, role, isSelected, isDisabled, color } = item; const currentRole = role ? role : "user"; - const isLogo = !!icon; + const defaultIcon = !!color; + const isLogo = !!icon || defaultIcon; const onChangeAction = () => { onSelect && onSelect(item); @@ -76,6 +77,8 @@ const Item = React.memo(({ index, style, data }: ItemProps) => { role={currentRole} size={"min"} /> + ) : defaultIcon ? ( + ) : ( room logo )}