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

Web:Components:CatalogItem: refactoring and add support dark-theme

Browse Source
This commit is contained in:
Timofey 2022-02-04 18:27:16 +08:00
parent 48f9e4953c
commit e30a293c5f
4 changed files with 115 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,8 +17,6 @@ import {
const getInitial = (text) => text.substring(0, 1).toUpperCase();
const CatalogItem = (props) => {
// console.log("render");
const {
className,
id,
@ -71,7 +69,7 @@ const CatalogItem = (props) => {
<StyledCatalogItemBadgeWrapper
onClick={onClickBadgeAction}
showText={showText}
></StyledCatalogItemBadgeWrapper>
/>
)}
</>
)}
@ -85,7 +83,7 @@ const CatalogItem = (props) => {
onClick={onClickBadgeAction}
>
{!iconBadge ? (
<Badge label={labelBadge} />
<Badge className="catalog-item__badge" label={labelBadge} />
) : (
<ReactSVG src={iconBadge} />
)}

129
packages/asc-web-components/catalog-item/styled-catalog-item.js
View File

@ -7,69 +7,89 @@ import { isMobile } from "react-device-detect";
import Text from "@appserver/components/text";
// width, height
const badgeWithoutText = css`
position: absolute;
top: ${(props) => props.theme.catalogItem.badgeWithoutText.position};
right: ${(props) => props.theme.catalogItem.badgeWithoutText.position};
border-radius: 1000px;
background-color: ${(props) =>
props.theme.catalogItem.badgeWithoutText.backgroundColor};
@media ${tablet} {
min-width: ${(props) =>
props.theme.catalogItem.badgeWithoutText.tablet.size};
min-height: ${(props) =>
props.theme.catalogItem.badgeWithoutText.tablet.size};
top: ${(props) => props.theme.catalogItem.badgeWithoutText.tablet.position};
right: ${(props) =>
props.theme.catalogItem.badgeWithoutText.tablet.position};
}
${isMobile &&
css`
min-width: ${(props) =>
props.theme.catalogItem.badgeWithoutText.tablet.size};
min-height: ${(props) =>
props.theme.catalogItem.badgeWithoutText.tablet.size};
top: ${(props) => props.theme.catalogItem.badgeWithoutText.tablet.position};
right: ${(props) =>
props.theme.catalogItem.badgeWithoutText.tablet.position};
`}
width: ${(props) => props.theme.catalogItem.badgeWithoutText.size} !important;
min-width: ${(props) =>
props.theme.catalogItem.badgeWithoutText.size} !important;
height: ${(props) =>
props.theme.catalogItem.badgeWithoutText.size} !important;
min-height: ${(props) =>
props.theme.catalogItem.badgeWithoutText.size} !important;
margin: 0 !important;
`;
const StyledCatalogItemBadgeWrapper = styled.div`
display: flex;
align-items: center;
justify-content: center;
min-width: ${(props) =>
props.showText
? props.theme.catalogItem.badgeWrapper.size
: props.theme.catalogItem.badgeWithoutText.size};
min-height: ${(props) =>
props.showText
? props.theme.catalogItem.badgeWrapper.size
: props.theme.catalogItem.badgeWithoutText.size};
margin-left: ${(props) =>
props.showText && props.theme.catalogItem.badgeWrapper.marginLeft};
z-index: 3;
${(props) => !props.showText && badgeWithoutText}
margin-left: ${(props) => props.theme.catalogItem.badgeWrapper.marginLeft};
margin-right: ${(props) => props.theme.catalogItem.badgeWrapper.marginRight};
@media ${tablet} {
min-width: ${(props) =>
props.showText && props.theme.catalogItem.badgeWrapper.tablet.width};
min-height: ${(props) =>
props.showText && props.theme.catalogItem.badgeWrapper.tablet.height};
display: flex;
align-items: center;
justify-content: center;
width: ${(props) => props.theme.catalogItem.badgeWrapper.tablet.width};
min-width: ${(props) => props.theme.catalogItem.badgeWrapper.tablet.width};
height: ${(props) => props.theme.catalogItem.badgeWrapper.tablet.height};
margin-right: ${(props) =>
props.showText &&
props.theme.catalogItem.badgeWrapper.tablet.marginRight};
}
${isMobile &&
css`
min-width: ${(props) =>
props.showText && props.theme.catalogItem.badgeWrapper.tablet.width};
min-height: ${(props) =>
props.showText && props.theme.catalogItem.badgeWrapper.tablet.height};
display: flex;
align-items: center;
justify-content: center;
width: ${(props) => props.theme.catalogItem.badgeWrapper.tablet.width};
min-width: ${(props) => props.theme.catalogItem.badgeWrapper.tablet.width};
height: ${(props) => props.theme.catalogItem.badgeWrapper.tablet.height};
margin-right: ${(props) =>
props.theme.catalogItem.badgeWrapper.tablet.marginRight};
`}
${(props) => !props.showText && badgeWithoutText}
.catalog-item__badge {
display: flex;
align-items: center;
justify-content: center;
width: ${(props) => props.theme.catalogItem.badgeWrapper.size};
min-width: ${(props) => props.theme.catalogItem.badgeWrapper.size};
height: ${(props) => props.theme.catalogItem.badgeWrapper.size};
min-height: ${(props) => props.theme.catalogItem.badgeWrapper.size};
div {
display: flex;
align-items: center;
justify-content: center;
width: 6px;
height: ${(props) => props.theme.catalogItem.badgeWrapper.size};
p {
display: flex;
align-items: center;
justify-content: center;
line-height: 16px;
}
}
}
`;
StyledCatalogItemBadgeWrapper.defaultProps = { theme: Base };
@ -109,10 +129,18 @@ StyledCatalogItemInitialText.defaultProps = { theme: Base };
const StyledCatalogItemText = styled(Text)`
width: ${(props) => props.theme.catalogItem.text.width};
margin-left: ${(props) => props.theme.catalogItem.text.marginLeft};
line-height: ${(props) => props.theme.catalogItem.text.lineHeight};
z-index: 1;
display: flex;
align-items: center;
pointer-events: none;
color: ${(props) => props.theme.catalogItem.text.color};
font-size: ${(props) => props.theme.catalogItem.text.fontSize};
font-weight: ${(props) => props.theme.catalogItem.text.fontWeight};
@ -140,15 +168,22 @@ StyledCatalogItemText.defaultProps = { theme: Base };
const StyledCatalogItemImg = styled.div`
position: relative;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
pointer-events: none;
height: ${(props) => props.theme.catalogItem.img.svg.height};
svg {
width: ${(props) => props.theme.catalogItem.img.svg.width};
height: ${(props) => props.theme.catalogItem.img.svg.height};
path {
fill: #657077 !important;
fill: ${(props) => props.theme.catalogItem.img.svg.fill} !important;
}
}
@ -176,8 +211,10 @@ const StyledCatalogItemSibling = styled.div`
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: ${(props) => props.theme.catalogItem.container.height};
max-height: ${(props) => props.theme.catalogItem.container.height};
@ -207,20 +244,25 @@ const StyledCatalogItemContainer = styled.div`
display: flex;
justify-content: ${(props) => (props.showText ? "space-between" : "center")};
align-items: center;
min-width: ${(props) => props.theme.catalogItem.container.width};
min-height: ${(props) => props.theme.catalogItem.container.height};
max-height: ${(props) => props.theme.catalogItem.container.height};
position: relative;
box-sizing: border-box;
padding: ${(props) =>
props.showText && props.theme.catalogItem.container.padding};
margin-bottom: ${(props) =>
props.isEndOfBlock && props.theme.catalogItem.container.marginBottom};
cursor: pointer;
@media ${tablet} {
min-height: ${(props) => props.theme.catalogItem.container.tablet.height};
max-height: ${(props) => props.theme.catalogItem.container.tablet.height};
padding: ${(props) =>
props.showText && props.theme.catalogItem.container.tablet.padding};
margin-bottom: ${(props) =>
@ -232,6 +274,7 @@ const StyledCatalogItemContainer = styled.div`
css`
min-height: ${(props) => props.theme.catalogItem.container.tablet.height};
max-height: ${(props) => props.theme.catalogItem.container.tablet.height};
padding: ${(props) =>
props.showText && props.theme.catalogItem.container.tablet.padding};
margin-bottom: ${(props) =>

26
packages/asc-web-components/themes/base.js
View File

@ -1791,7 +1791,7 @@ const Base = {
width: "100%",
height: "36px",
padding: "0 20px",
marginBottom: "20px",
marginBottom: "16px",
tablet: {
height: "44px",
padding: "0 16px",
@ -1811,6 +1811,8 @@ const Base = {
width: "16px",
height: "16px",
fill: "#657077",
tablet: {
width: "20px",
height: "20px",
@ -1834,9 +1836,9 @@ const Base = {
initialText: {
color: white,
width: "16px",
lineHeight: "15px",
fontSize: "9px",
fontWeight: 700,
lineHeight: "11px",
fontSize: "11px",
fontWeight: "bold",
tablet: {
width: "20px",
lineHeight: "19px",
@ -1844,8 +1846,9 @@ const Base = {
},
},
badgeWrapper: {
size: "20px",
marginLeft: "20px",
size: "16px",
marginLeft: "8px",
marginRight: "-2px",
tablet: {
width: "48px",
height: "44px",
@ -1853,13 +1856,10 @@ const Base = {
},
},
badgeWithoutText: {
size: "6px",
position: "-3px",
backgroundColor: orangeMain,
tablet: {
size: "8px",
position: "-4px",
},
size: "8px",
position: "-4px",
},
},
nav: {
@ -1878,7 +1878,7 @@ const Base = {
header: {
backgroundColor: "#0F4071",
linkColor: "#7a95b0",
productColor: white,
},

28
packages/asc-web-components/themes/dark.js
View File

@ -1779,7 +1779,7 @@ const Dark = {
width: "100%",
height: "36px",
padding: "0 20px",
marginBottom: "20px",
marginBottom: "16px",
tablet: {
height: "44px",
padding: "0 16px",
@ -1788,10 +1788,10 @@ const Dark = {
},
sibling: {
active: {
background: "#333333",
background: black,
},
hover: {
background: "#333333",
background: black,
},
},
img: {
@ -1799,6 +1799,8 @@ const Dark = {
width: "16px",
height: "16px",
fill: "#a9a9a9",
tablet: {
width: "20px",
height: "20px",
@ -1809,7 +1811,7 @@ const Dark = {
width: "100%",
marginLeft: "8px",
lineHeight: "20px",
color: cyanBlueDarkShade,
color: "#a9a9a9",
fontSize: "13px",
fontWeight: 600,
tablet: {
@ -1820,7 +1822,7 @@ const Dark = {
},
},
initialText: {
color: white,
color: black,
width: "16px",
lineHeight: "15px",
fontSize: "9px",
@ -1832,8 +1834,9 @@ const Dark = {
},
},
badgeWrapper: {
size: "20px",
marginLeft: "20px",
size: "16px",
marginLeft: "8px",
marginRight: "-2px",
tablet: {
width: "48px",
height: "44px",
@ -1841,13 +1844,10 @@ const Dark = {
},
},
badgeWithoutText: {
size: "6px",
position: "-3px",
backgroundColor: orangeMain,
tablet: {
size: "8px",
position: "-4px",
},
backgroundColor: "#F58D31",
size: "8px",
position: "-4px",
},
},