IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web:Components:Added theme changer for CatalogItem.

Browse Source
This commit is contained in:
Vlada Gazizova 2022-07-25 10:40:03 +03:00
parent c5f396e120
commit 3958ef0173
3 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/asc-web-common/components/ColorTheme/constants.js
View File

@ -1,7 +1,6 @@
export const ThemeType = { export const ThemeType = {
Button: "button", Button: "button",
MainButton: "mainButton", MainButton: "mainButton",
CatalogItemText: "catalogItemText", CatalogItem: "catalogItem",
CatalogItemImg: "catalogItemImg",
Badge: "badge", Badge: "badge",
}; };

10
packages/asc-web-common/components/ColorTheme/styled/catalogItem.js
View File

@ -1,9 +1,13 @@
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { StyledCatalogItemContainer } from "@appserver/components/catalog-item/styled-catalog-item"; import {
StyledCatalogItemContainer,
StyledCatalogItemImg,
StyledCatalogItemText,
} from "@appserver/components/catalog-item/styled-catalog-item";
const getDefaultStyles = ({ currentColorScheme, isActive }) => css` const getDefaultStyles = ({ currentColorScheme, isActive }) => css`
.color-theme-text { ${StyledCatalogItemText} {
color: ${isActive && currentColorScheme.accentColor}; color: ${isActive && currentColorScheme.accentColor};
&:hover { &:hover {
@ -11,7 +15,7 @@ const getDefaultStyles = ({ currentColorScheme, isActive }) => css`
} }
} }
.color-theme-img { ${StyledCatalogItemImg} {
svg { svg {
path { path {
fill: ${isActive && currentColorScheme.accentColor} !important; fill: ${isActive && currentColorScheme.accentColor} !important;

9
packages/asc-web-components/catalog-item/index.js
View File

@ -16,7 +16,7 @@ import {
StyledCatalogItemInitialText, StyledCatalogItemInitialText,
StyledCatalogItemHeaderContainer, StyledCatalogItemHeaderContainer,
} from "./styled-catalog-item"; } from "./styled-catalog-item";
import { ColorTheme, ThemeType } from "@appserver/common/components/ColorTheme";
const getInitial = (text) => text.substring(0, 1).toUpperCase(); const getInitial = (text) => text.substring(0, 1).toUpperCase();
const CatalogItem = (props) => { const CatalogItem = (props) => {
@ -47,6 +47,7 @@ const CatalogItem = (props) => {
}; };
const onClickBadgeAction = (e) => { const onClickBadgeAction = (e) => {
console.log("PRO", onClickBadge);
e.stopPropagation(); e.stopPropagation();
onClickBadge && onClickBadge(id); onClickBadge && onClickBadge(id);
}; };
@ -70,12 +71,14 @@ const CatalogItem = (props) => {
const renderItem = () => { const renderItem = () => {
return ( return (
<StyledCatalogItemContainer <ColorTheme
className={className} className={className}
id={id} id={id}
style={style} style={style}
showText={showText} showText={showText}
isEndOfBlock={isEndOfBlock} isEndOfBlock={isEndOfBlock}
isActive={isActive}
type={ThemeType.CatalogItem}
> >
<StyledCatalogItemSibling <StyledCatalogItemSibling
isActive={isActive} isActive={isActive}
@ -120,7 +123,7 @@ const CatalogItem = (props) => {
)} )}
</StyledCatalogItemBadgeWrapper> </StyledCatalogItemBadgeWrapper>
)} )}
</StyledCatalogItemContainer> </ColorTheme>
); );
}; };