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

Client: Profile: InterfaceTheme: add preview body

Browse Source
This commit is contained in:
Viktor Fomin 2022-09-02 05:08:52 +03:00
parent ee5d036981
commit aad98ea600
2 changed files with 78 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/styled-preview.js
View File

@ -3,17 +3,18 @@ import styled from "styled-components";
export const StyledWrapper = styled.div`
display: flex;
flex-direction: column;
border: 1px solid #eceef1;
border: ${(props) => props.theme.profile.themePreview.border};
border-radius: 12px;
.header {
padding: 12px 20px;
border-bottom: 1px solid #eceef1;
border-bottom: ${(props) => props.theme.profile.themePreview.border};
}
`;
export const StyledPreview = styled.div`
display: flex;
overflow: hidden;
.article {
width: 211px;
@ -64,9 +65,45 @@ export const StyledPreview = styled.div`
}
.body {
width: 69px;
width: 49px;
background: ${(props) => props.theme.backgroundColor};
border: none;
border-radius: 0 0 12px 0;
padding-left: 20px;
padding-top: 22px;
.search-input {
width: 40px;
margin-top: 28px;
margin-bottom: 4px;
padding: 6px 8px;
border: 1px solid ${(props) => props.theme.input.borderColor};
border-radius: 3px;
background: ${(props) => props.theme.input.backgroundColor};
.placeholder {
color: ${(props) => props.theme.input.borderColor};
}
}
.row-header {
height: 40px;
display: flex;
gap: 4px;
align-items: center;
}
.row {
display: flex;
flex-wrap: nowrap;
gap: 8px;
align-items: center;
padding: 8px 0;
border-top: 1px solid ${(props) => props.theme.row.borderBottom};
.icon {
border-radius: 6px;
}
}
}
`;

43
packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/theme-preview.js
View File

@ -41,29 +41,62 @@ const ThemePreview = (props) => {
</Text>
<img src="/static/images/triangle-main-button.svg" />
</button>
<Text fontSize="11px" fontWeight={600} className="catalog-header">
<Text
fontSize="11px"
fontWeight={600}
noSelect
className="catalog-header"
>
{t("Common:Rooms")}
</Text>
<div className="item">
<img src="/static/images/catalog.user.react.svg" />
<Text className="label" fontWeight={600}>
<Text className="label" fontWeight={600} noSelect>
Personal
</Text>
</div>
<div className="item item-active">
<img src="/static/images/catalog.folder.react.svg" />
<Text className="label" fontWeight={600}>
<Text className="label" fontWeight={600} noSelect>
Shared
</Text>
</div>
<div className="item">
<img src="/static/images/catalog.archive.react.svg" />
<Text className="label" fontWeight={600}>
<Text className="label" fontWeight={600} noSelect>
Archived
</Text>
</div>
</div>
<div className="body"></div>
<div className="body">
<Text fontSize="18px" fontWeight={700} noSelect>
Shared
</Text>
<div className="search-input">
<Text className="placeholder" fontWeight={600} noSelect>
Find
</Text>
</div>
<div className="row-header">
<Text fontSize="12px" fontWeight={600} noSelect>
Name
</Text>
<img src="/static/images/sort.desc.react.svg" />
</div>
<div className="row">
<img className="icon" src="images/icons/32/room/review.svg" />
<Text fontWeight={600} noSelect>
Room
</Text>
</div>
<div className="row">
<img className="icon" src="images/icons/32/room/custom.svg" />
<Text fontWeight={600} noSelect>
Room
</Text>
</div>
</div>
</StyledPreview>
</ThemeProvider>
</StyledWrapper>