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

fixed Header and added dark theme

Browse Source
This commit is contained in:
mushka 2022-06-21 14:38:40 +03:00
parent 8192017c9d
commit d489d4ee4d
10 changed files with 114 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/asc-web-common/components/Section/index.js
View File

@ -468,7 +468,7 @@ class Section extends React.Component {
</SectionContainer>
{isInfoPanelAvailable && (
<InfoPanel viewAs={viewAs}>
<SubInfoPanelHeader>
<SubInfoPanelHeader isRoom>
{infoPanelHeaderContent}
</SubInfoPanelHeader>
<SubInfoPanelBody>

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

@ -1977,6 +1977,14 @@ const Base = {
showAccessUsersTextColor: gray,
showAccessPanelTextColor: "#3b72a7",
members: {
iconColor: "#3b72a7",
},
history: {
fileBlockBg: "#f8f9f9",
},
},
filesArticleBody: {

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

@ -1977,6 +1977,14 @@ const Dark = {
showAccessUsersTextColor: gray,
showAccessPanelTextColor: "#E06A1B",
members: {
iconColor: "#E06A1B",
},
history: {
fileBlockBg: "#292929",
},
},
filesArticleBody: {

16
products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/index.js
View File

@ -9,7 +9,6 @@ import { Base } from "@appserver/components/themes";
import Details from "./views/Details";
import Members from "./views/Members";
import History from "./views/History";
import EmptyScreen from "./EmptyScreen";
import withLoader from "../../../../HOCs/withLoader";
import Loaders from "@appserver/common/components/Loaders";
@ -30,7 +29,6 @@ const InfoPanelBodyContent = ({
isFavoritesFolder,
isShareFolder,
isCommonFolder,
isPrivacyFolder,
isGallery,
gallerySelected,
personal,
@ -49,7 +47,6 @@ const InfoPanelBodyContent = ({
isFavoritesFolder,
isShareFolder,
isCommonFolder,
isPrivacyFolder,
};
const filesProps = {
@ -80,7 +77,14 @@ const InfoPanelBodyContent = ({
)
) : (
<StyledInfoRoomBody>
{isPrivacyFolder ? (
{roomState === "members" ? (
<Members t={t} selfId={selfId} />
) : roomState === "history" ? (
<History t={t} personal={personal} culture={culture} />
) : (
<Details {...defaultProps} {...filesProps} />
)}
{/* {isPrivacyFolder ? (
<>
{roomState === "members" ? (
<Members t={t} selfId={selfId} />
@ -92,7 +96,7 @@ const InfoPanelBodyContent = ({
</>
) : (
<Details {...defaultProps} {...filesProps} />
)}
)} */}
</StyledInfoRoomBody>
);
};
@ -133,7 +137,6 @@ export default inject(
isFavoritesFolder,
isShareFolder,
isCommonFolder,
isPrivacyFolder,
} = treeFoldersStore;
const selectedItems =
@ -161,7 +164,6 @@ export default inject(
isFavoritesFolder,
isShareFolder,
isCommonFolder,
isPrivacyFolder,
gallerySelected,
personal,

5
products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/styles/VirtualRoom/history.js
View File

@ -47,7 +47,6 @@ const StyledHistoryBlock = styled.div`
.name {
font-weight: 600;
font-size: 14px;
color: #333333;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
@ -93,7 +92,7 @@ const StyledHistoryBlock = styled.div`
display: flex;
flex-direction: column;
padding: 8px 0;
background: #f8f9f9;
background: ${(props) => props.theme.infoPanel.history.fileBlockBg};
border-radius: 3px;
.file {
padding: 4px 16px;
@ -136,8 +135,6 @@ const StyledHistoryBlock = styled.div`
}
`;
const StyledFileAction = styled.div``;
StyledHistoryBlock.defaultProps = { theme: Base };
export { StyledHistoryList, StyledUserNameLink, StyledHistoryBlock };

6
products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/styles/VirtualRoom/members.js
View File

@ -17,6 +17,10 @@ const StyledUserTypeHeader = styled.div`
}
.icon {
path,
rect {
fill: ${(props) => props.theme.infoPanel.members.iconColor};
}
}
`;
@ -65,4 +69,6 @@ const StyledUser = styled.div`
}
`;
StyledUserTypeHeader.defaultProps = { theme: Base };
export { StyledUserTypeHeader, StyledUserList, StyledUser };

2
products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/views/Members/index.js
View File

@ -27,6 +27,7 @@ const Members = ({ t, selfId }) => {
{t("Users in room")} : {data.members.inRoom.length}
</Text>
<IconButton
className={"icon"}
title={t("Common:AddUsers")}
iconName="/static/images/person+.react.svg"
isFill={true}
@ -68,6 +69,7 @@ const Members = ({ t, selfId }) => {
{t("Expect people")} : {data.members.expect.length}
</Text>
<IconButton
className={"icon"}
title={t("Repeat invitation")}
iconName="/static/images/e-mail+.react.svg"
isFill={true}

74
products/ASC.Files/Client/src/pages/Home/InfoPanel/Header/index.js
View File

@ -1,10 +1,3 @@
import {
isTablet,
isMobile as isMobileUtils,
isDesktop,
} from "@appserver/components/utils/device";
import { isMobile } from "react-device-detect";
import IconButton from "@appserver/components/icon-button";
import Text from "@appserver/components/text";
import React from "react";
@ -16,20 +9,31 @@ import {
} from "./styles/styles";
import Loaders from "@appserver/common/components/Loaders";
import withLoader from "../../../../HOCs/withLoader";
import Submenu from "@appserver/components/submenu";
const InfoPanelHeaderContent = ({ t, setIsVisible, isGallery }) => {
const InfoPanelHeaderContent = ({
t,
setIsVisible,
setRoomState,
isGallery,
isRoom,
}) => {
const closeInfoPanel = () => setIsVisible(false);
return (
<StyledInfoPanelHeader>
<Text className="header-text" fontSize="21px" fontWeight="700">
{isGallery ? t("FormGallery:FormTemplateInfo") : t("Common:Info")}
</Text>
<StyledInfoPanelToggleWrapper
isRootFolder={true}
isInfoPanelVisible={true}
>
{!(isTablet() || isMobile || isMobileUtils() || !isDesktop()) && (
<StyledInfoPanelHeader isRoom={isRoom}>
<div className="main">
<Text className="header-text" fontSize="21px" fontWeight="700">
{isRoom
? t("Room")
: isGallery
? t("FormGallery:FormTemplateInfo")
: t("Common:Info")}
</Text>
<StyledInfoPanelToggleWrapper
isRootFolder={true}
isInfoPanelVisible={true}
>
<div className="info-panel-toggle-bg">
<IconButton
className="info-panel-toggle"
@ -39,15 +43,43 @@ const InfoPanelHeaderContent = ({ t, setIsVisible, isGallery }) => {
onClick={closeInfoPanel}
/>
</div>
)}
</StyledInfoPanelToggleWrapper>
</StyledInfoPanelToggleWrapper>
</div>
{isRoom && (
<div className="submenu">
<Submenu
style={{ width: "100%" }}
data={[
{
content: null,
onClick: () => setRoomState("members"),
id: "Members",
name: "Members",
},
{
content: null,
onClick: () => setRoomState("history"),
id: "History",
name: "History",
},
{
content: null,
onClick: () => setRoomState("details"),
id: "Details",
name: "Details",
},
]}
/>
</div>
)}
</StyledInfoPanelHeader>
);
};
export default inject(({ auth }) => {
const { setIsVisible } = auth.infoPanelStore;
return { setIsVisible };
const { setIsVisible, setRoomState } = auth.infoPanelStore;
return { setIsVisible, setRoomState };
})(
withTranslation(["Common", "FormGallery"])(
withLoader(observer(InfoPanelHeaderContent))(

34
products/ASC.Files/Client/src/pages/Home/InfoPanel/Header/styles/styles.js
View File

@ -5,16 +5,32 @@ import { tablet } from "@appserver/components/utils/device";
const StyledInfoPanelHeader = styled.div`
width: 100%;
max-width: 100%;
height: 52px;
min-height: 52px;
height: ${(props) => (props.isRoom ? "85px" : "52px")};
min-height: ${(props) => (props.isRoom ? "85px" : "52px")};
display: flex;
justify-content: space-between;
align-items: center;
align-self: center;
border-bottom: ${(props) => `1px solid ${props.theme.infoPanel.borderColor}`};
.header-text {
margin-left: 20px;
flex-direction: column;
border-bottom: ${(props) =>
props.isRoom ? "none" : `1px solid ${props.theme.infoPanel.borderColor}`};
.main {
height: ${(props) => (props.isRoom ? "53px" : "52px")};
min-height: ${(props) => (props.isRoom ? "53px" : "52px")};
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.header-text {
margin-left: 20px;
}
}
.submenu {
display: flex;
width: 100%;
justify-content: center;
.sticky {
display: flex;
flex-direction: column;
align-items: center;
}
}
`;

2
products/ASC.Files/Client/src/pages/Home/index.js
View File

@ -381,7 +381,7 @@ class PureHome extends React.Component {
</Section.SectionBody>
<Section.InfoPanelHeader>
<InfoPanelHeaderContent />
<InfoPanelHeaderContent isRoom />
</Section.InfoPanelHeader>
<Section.InfoPanelBody>