Web: Files: Templates: added navigation badge
This commit is contained in:
parent
7fd2505a6d
commit
a013cf146d
@ -205,5 +205,6 @@
|
||||
"AddAdminByNameOrEmail": "Add admin by name or email",
|
||||
"RoomTemplate": "Room template",
|
||||
"RoomTemplateDescription": "Use this template to quickly create a new room.",
|
||||
"TemplateOwner": "Template owner"
|
||||
"TemplateOwner": "Template owner",
|
||||
"Template": "Template"
|
||||
}
|
||||
|
@ -987,6 +987,8 @@ const SectionHeaderContent = (props) => {
|
||||
? t("Files:ShareRoom")
|
||||
: null;
|
||||
|
||||
const badgeLabel = isTemplatesFolder ? t("Files:Template") : "";
|
||||
|
||||
return (
|
||||
<Consumer key="header">
|
||||
{(context) => (
|
||||
@ -1054,6 +1056,7 @@ const SectionHeaderContent = (props) => {
|
||||
onNavigationButtonClick={onNavigationButtonClick}
|
||||
tariffBar={<TariffBar />}
|
||||
showNavigationButton={!!showNavigationButton}
|
||||
badgeLabel={badgeLabel}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
@ -248,6 +248,14 @@ const StyledContainer = styled.div<{
|
||||
grid-template-columns: ${(props) =>
|
||||
props.isRootFolder ? "auto 1fr" : "29px auto 1fr"};
|
||||
}
|
||||
|
||||
.title-block-badge {
|
||||
margin-left: 8px;
|
||||
|
||||
div {
|
||||
background-color: ${(props) => props.theme.catalog.header.iconFill};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)<{
|
||||
@ -482,6 +490,14 @@ const StyledTextContainer = styled.div<{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
`};
|
||||
|
||||
.title-block-badge {
|
||||
div {
|
||||
${(props) =>
|
||||
props.isRootFolderTitle &&
|
||||
`background-color: ${props.theme.navigation.rootFolderTitleColor}`};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledHeading = styled(Heading)<{ isRootFolderTitle: boolean }>`
|
||||
|
@ -82,6 +82,7 @@ const Navigation = ({
|
||||
onNavigationButtonClick,
|
||||
tariffBar,
|
||||
showNavigationButton,
|
||||
badgeLabel,
|
||||
...rest
|
||||
}: INavigationProps) => {
|
||||
const [isOpen, setIsOpen] = React.useState(false);
|
||||
@ -177,6 +178,7 @@ const Navigation = ({
|
||||
isRootFolder={isRootFolder}
|
||||
onClick={toggleDropBox}
|
||||
isRootFolderTitle={false}
|
||||
badgeLabel={!showRootFolderNavigation ? badgeLabel : ""}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@ -197,6 +199,7 @@ const Navigation = ({
|
||||
isRootFolder={isRootFolder}
|
||||
isRootFolderTitle
|
||||
onClick={onTextClick}
|
||||
badgeLabel={badgeLabel}
|
||||
/>
|
||||
|
||||
{navigationTitleNode}
|
||||
|
@ -104,6 +104,7 @@ export interface ITextProps {
|
||||
isRootFolderTitle: boolean;
|
||||
onClick: () => void;
|
||||
className?: string;
|
||||
badgeLabel?: string;
|
||||
}
|
||||
|
||||
export interface INavigationLogoProps {
|
||||
@ -201,4 +202,5 @@ export interface INavigationProps {
|
||||
onNavigationButtonClick?: () => void;
|
||||
tariffBar: React.ReactElement;
|
||||
showNavigationButton: boolean;
|
||||
badgeLabel?: string;
|
||||
}
|
||||
|
@ -25,6 +25,7 @@
|
||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
|
||||
import React from "react";
|
||||
import { Badge } from "../../badge";
|
||||
|
||||
import {
|
||||
StyledArrowIcon,
|
||||
@ -42,6 +43,7 @@ const Text = ({
|
||||
isOpen,
|
||||
isRootFolderTitle,
|
||||
onClick,
|
||||
badgeLabel,
|
||||
...rest
|
||||
}: ITextProps) => {
|
||||
return (
|
||||
@ -58,9 +60,19 @@ const Text = ({
|
||||
>
|
||||
{title}
|
||||
</StyledHeading>
|
||||
|
||||
{badgeLabel && (
|
||||
<Badge
|
||||
className="title-block-badge"
|
||||
label={badgeLabel}
|
||||
fontSize="9px"
|
||||
padding="2px 5px"
|
||||
fontWeight={700}
|
||||
borderRadius="50px"
|
||||
noHover
|
||||
isHovered={false}
|
||||
/>
|
||||
)}
|
||||
{isRootFolderTitle && <StyledArrowIcon />}
|
||||
|
||||
{!isRootFolderTitle && !isRootFolder ? (
|
||||
isOpen ? (
|
||||
<StyledExpanderDownIconRotate />
|
||||
|
Loading…
Reference in New Issue
Block a user