Web: Files: Templates: added icon for room template
This commit is contained in:
parent
344dd6a914
commit
0ad3fcfe58
@ -90,6 +90,7 @@ const ItemIcon = ({
|
|||||||
color,
|
color,
|
||||||
isArchive,
|
isArchive,
|
||||||
badgeUrl,
|
badgeUrl,
|
||||||
|
isTemplate,
|
||||||
}) => {
|
}) => {
|
||||||
const isLoadedRoomIcon = !!logo?.medium;
|
const isLoadedRoomIcon = !!logo?.medium;
|
||||||
const showDefaultRoomIcon = !isLoadedRoomIcon && isRoom;
|
const showDefaultRoomIcon = !isLoadedRoomIcon && isRoom;
|
||||||
@ -101,6 +102,7 @@ const ItemIcon = ({
|
|||||||
color={color}
|
color={color}
|
||||||
title={title}
|
title={title}
|
||||||
isArchive={isArchive}
|
isArchive={isArchive}
|
||||||
|
isTemplate={isTemplate}
|
||||||
showDefault={showDefaultRoomIcon}
|
showDefault={showDefaultRoomIcon}
|
||||||
imgClassName="react-svg-icon"
|
imgClassName="react-svg-icon"
|
||||||
imgSrc={isRoom ? logo?.medium : icon}
|
imgSrc={isRoom ? logo?.medium : icon}
|
||||||
|
@ -392,6 +392,7 @@ const SimpleFilesRow = (props) => {
|
|||||||
logo={item.logo}
|
logo={item.logo}
|
||||||
color={item.logo?.color}
|
color={item.logo?.color}
|
||||||
isArchive={item.isArchive}
|
isArchive={item.isArchive}
|
||||||
|
isTemplate={item.isTemplate}
|
||||||
badgeUrl={badgeUrl}
|
badgeUrl={badgeUrl}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
@ -87,6 +87,7 @@ const FilesTableRow = (props) => {
|
|||||||
logo={item.logo}
|
logo={item.logo}
|
||||||
color={item.logo?.color}
|
color={item.logo?.color}
|
||||||
isArchive={item.isArchive}
|
isArchive={item.isArchive}
|
||||||
|
isTemplate={item.isTemplate}
|
||||||
badgeUrl={badgeUrl}
|
badgeUrl={badgeUrl}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
@ -109,6 +109,7 @@ const FileTile = (props) => {
|
|||||||
logo={item.logo}
|
logo={item.logo}
|
||||||
color={item.logo?.color}
|
color={item.logo?.color}
|
||||||
isArchive={item.isArchive}
|
isArchive={item.isArchive}
|
||||||
|
isTemplate={item.isTemplate}
|
||||||
badgeUrl={badgeUrl}
|
badgeUrl={badgeUrl}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
@ -27,10 +27,15 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
import styled, { css } from "styled-components";
|
import styled, { css } from "styled-components";
|
||||||
|
|
||||||
|
import TemplateRoomIcon from "PUBLIC_DIR/images/template-room-icon.react.svg?url";
|
||||||
|
import { ReactSVG } from "react-svg";
|
||||||
|
|
||||||
import { Base } from "../../themes";
|
import { Base } from "../../themes";
|
||||||
import { Text } from "../text";
|
import { Text } from "../text";
|
||||||
|
|
||||||
import { IconButton } from "../icon-button";
|
import { IconButton } from "../icon-button";
|
||||||
|
import { classNames } from "../../utils";
|
||||||
|
|
||||||
const StyledIcon = styled.div<{
|
const StyledIcon = styled.div<{
|
||||||
size: string;
|
size: string;
|
||||||
@ -100,6 +105,47 @@ const StyledIcon = styled.div<{
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const StyledTemplateIcon = styled.div<{
|
||||||
|
size: string;
|
||||||
|
isArchive?: boolean;
|
||||||
|
color?: string;
|
||||||
|
}>`
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
height: ${(props) => props.size};
|
||||||
|
width: ${(props) => props.size};
|
||||||
|
|
||||||
|
.room-icon-svg {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
height: ${(props) => props.size};
|
||||||
|
width: ${(props) => props.size};
|
||||||
|
|
||||||
|
svg path {
|
||||||
|
fill: ${(props) =>
|
||||||
|
props.isArchive
|
||||||
|
? props.theme.roomIcon.backgroundArchive
|
||||||
|
: `#${props.color}`};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.room-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 16px;
|
||||||
|
color: ${({ isArchive, color, theme }) =>
|
||||||
|
isArchive ? theme.roomIcon.backgroundArchive : `#${color}`};
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.room-image {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
StyledIcon.defaultProps = { theme: Base };
|
StyledIcon.defaultProps = { theme: Base };
|
||||||
|
|
||||||
// interface RoomIconProps {
|
// interface RoomIconProps {
|
||||||
@ -117,6 +163,7 @@ StyledIcon.defaultProps = { theme: Base };
|
|||||||
type RoomIconDefault = {
|
type RoomIconDefault = {
|
||||||
title: string;
|
title: string;
|
||||||
isArchive?: boolean;
|
isArchive?: boolean;
|
||||||
|
isTemplate?: boolean;
|
||||||
size?: string;
|
size?: string;
|
||||||
radius?: string;
|
radius?: string;
|
||||||
showDefault: boolean;
|
showDefault: boolean;
|
||||||
@ -156,6 +203,7 @@ const RoomIcon = ({
|
|||||||
badgeUrl,
|
badgeUrl,
|
||||||
onBadgeClick,
|
onBadgeClick,
|
||||||
className,
|
className,
|
||||||
|
isTemplate = false,
|
||||||
}: RoomIconProps) => {
|
}: RoomIconProps) => {
|
||||||
const [correctImage, setCorrectImage] = React.useState(true);
|
const [correctImage, setCorrectImage] = React.useState(true);
|
||||||
|
|
||||||
@ -183,6 +231,29 @@ const RoomIcon = ({
|
|||||||
prefetchImage();
|
prefetchImage();
|
||||||
}, [prefetchImage]);
|
}, [prefetchImage]);
|
||||||
|
|
||||||
|
if (isTemplate) {
|
||||||
|
return (
|
||||||
|
<StyledTemplateIcon
|
||||||
|
size={size}
|
||||||
|
color={color}
|
||||||
|
isArchive={isArchive}
|
||||||
|
className={className}
|
||||||
|
data-testid="room-icon"
|
||||||
|
>
|
||||||
|
<ReactSVG className="room-icon-svg" src={TemplateRoomIcon} />
|
||||||
|
{correctImage ? (
|
||||||
|
<img
|
||||||
|
className={classNames([imgClassName, "room-image"])}
|
||||||
|
src={imgSrc}
|
||||||
|
alt="room icon"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Text className="room-title">{roomTitle}</Text>
|
||||||
|
)}
|
||||||
|
</StyledTemplateIcon>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledIcon
|
<StyledIcon
|
||||||
color={color}
|
color={color}
|
||||||
|
3
public/images/template-room-icon.react.svg
Normal file
3
public/images/template-room-icon.react.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 32C2.68629 32 0 29.3137 0 26V19C1.10457 19 2 19.8954 2 21V26C2 28.2091 3.79086 30 6 30H11C12.1046 30 13 30.8954 13 32H6ZM32 19C30.8954 19 30 19.8954 30 21V26C30 28.2091 28.2091 30 26 30H21C19.8954 30 19 30.8954 19 32H26C29.3137 32 32 29.3137 32 26V19ZM19 0C19 1.10457 19.8954 2 21 2H26C28.2091 2 30 3.79086 30 6V11C30 12.1046 30.8954 13 32 13V6C32 2.68629 29.3137 0 26 0H19ZM0 13C1.10457 13 2 12.1046 2 11V6C2 3.79086 3.79086 2 6 2H11C12.1046 2 13 1.10457 13 0H6C2.68629 0 0 2.68629 0 6V13Z" fill="#FF6680"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 664 B |
Loading…
Reference in New Issue
Block a user