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

bugfixes

Browse Source
This commit is contained in:
mushka 2022-03-21 18:42:23 +03:00
parent f659632108
commit c4b470f98a
8 changed files with 350 additions and 327 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
packages/asc-web-common/components/Loaders/InfoPanelLoader/InfoPanelLoader.js
View File

@ -3,109 +3,107 @@ import React from "react";
import RectangleLoader from "../RectangleLoader"; import RectangleLoader from "../RectangleLoader";
import { import {
StyledAccessRow, StyledAccessRow,
StyledInfoRoomBody, StyledInfoRoomBody,
StyledPropertiesTable, StyledPropertiesTable,
StyledPropertyRow, StyledPropertyRow,
StyledSubtitle, StyledSubtitle,
StyledThumbnail, StyledThumbnail,
StyledTitle, StyledTitle,
} from "./StyledInfoPanelLoader"; } from "./StyledInfoPanelLoader";
const InfoPanelLoader = ({ const InfoPanelLoader = ({
id, id,
className, className,
style, style,
isFolder, isFolder,
hasThumbnail, hasThumbnail,
...rest ...rest
}) => { }) => {
const {} = rest; const {} = rest;
const randomNumber = (min, max) => Math.random() * (max - min) + min; const randomNumber = (min, max) => Math.random() * (max - min) + min;
const customRectangleLoader = (width, height, rounded) => ( const customRectangleLoader = (width, height, rounded) => (
<RectangleLoader <RectangleLoader
width={"" + width} width={"" + width}
height={"" + height} height={"" + height}
borderRadius={"" + rounded} borderRadius={"" + rounded}
/> />
); );
const properties = isFolder const properties = isFolder
? [ ? [
{ Owner: 19 }, { Owner: 19 },
{ Location: 19 }, { Location: 19 },
{ Type: 17.6 }, { Type: 17.6 },
{ Size: 17.6 }, { Size: 17.6 },
{ "Date modified": 17.6 }, { "Date modified": 17.6 },
{ "Last modified by": 19 }, { "Last modified by": 19 },
{ "Date creation": 17.6 }, { "Date creation": 17.6 },
] ]
: [ : [
{ Owner: 19 }, { Owner: 19 },
{ Location: 19 }, { Location: 19 },
{ Type: 17.6 }, { Type: 17.6 },
{ "File Extension": 17.6 }, { "File Extension": 17.6 },
{ Size: 17.6 }, { Size: 17.6 },
{ "Date modified": 17.6 }, { "Date modified": 17.6 },
{ "Last modified by": 19 }, { "Last modified by": 19 },
{ "Date creation": 17.6 }, { "Date creation": 17.6 },
{ Versions: 17.6 }, { Versions: 17.6 },
{ Comments: 17.6 }, { Comments: 17.6 },
]; ];
return ( return (
<StyledInfoRoomBody id={id} className={className} style={style}> <StyledInfoRoomBody id={id} className={className} style={style}>
<StyledTitle> <StyledTitle>
{customRectangleLoader(32, 32)} {customRectangleLoader(32, 32, 3)}
{customRectangleLoader(250, 22)} {customRectangleLoader(250, 22)}
</StyledTitle> </StyledTitle>
<StyledSubtitle>System Properties</StyledSubtitle> <StyledSubtitle>System Properties</StyledSubtitle>
{hasThumbnail && ( {hasThumbnail ? (
<StyledThumbnail> <StyledThumbnail>{customRectangleLoader(320.2, 200)}</StyledThumbnail>
{customRectangleLoader(320.2, 200)} ) : (
</StyledThumbnail> <StyledThumbnail>{customRectangleLoader(96, 96)}</StyledThumbnail>
)}
<StyledPropertiesTable>
{properties.map((property) => (
<StyledPropertyRow>
<div className="property-title">{Object.keys(property)[0]}</div>
{customRectangleLoader(
randomNumber(125, 150),
Object.values(property)[0]
)} )}
</StyledPropertyRow>
))}
</StyledPropertiesTable>
<StyledPropertiesTable> <StyledSubtitle>Who has access</StyledSubtitle>
{properties.map((property) => (
<StyledPropertyRow>
<div className="property-title">
{Object.keys(property)[0]}
</div>
{customRectangleLoader(
randomNumber(125, 150),
Object.values(property)[0]
)}
</StyledPropertyRow>
))}
</StyledPropertiesTable>
<StyledSubtitle>Who has access</StyledSubtitle> <StyledAccessRow>
{customRectangleLoader(32, 32, 16)}
<StyledAccessRow> <div className="divider"></div>
{customRectangleLoader(32, 32, 16)} {customRectangleLoader(32, 32, 16)}
<div className="divider"></div> {customRectangleLoader(32, 32, 16)}
{customRectangleLoader(32, 32, 16)} </StyledAccessRow>
{customRectangleLoader(32, 32, 16)} </StyledInfoRoomBody>
</StyledAccessRow> );
</StyledInfoRoomBody>
);
}; };
InfoPanelLoader.propTypes = { InfoPanelLoader.propTypes = {
id: PropTypes.string, id: PropTypes.string,
className: PropTypes.string, className: PropTypes.string,
style: PropTypes.object, style: PropTypes.object,
}; };
InfoPanelLoader.defaultProps = { InfoPanelLoader.defaultProps = {
id: undefined, id: undefined,
className: undefined, className: undefined,
style: undefined, style: undefined,
}; };
export default InfoPanelLoader; export default InfoPanelLoader;

165
packages/asc-web-common/components/Loaders/InfoPanelLoader/StyledInfoPanelLoader.js
View File

@ -1,114 +1,117 @@
import styled from "styled-components"; import styled from "styled-components";
const StyledInfoRoomBody = styled.div``; const StyledInfoRoomBody = styled.div`
.no-thumbnail-img-wrapper {
padding: 9px 0 34px;
height: auto;
width: 100%;
display: flex;
justify-content: center;
.no-thumbnail-img {
height: 96px;
width: 96px;
}
}
`;
const StyledTitle = styled.div` const StyledTitle = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 80px; height: 80px;
gap: 8px; gap: 8px;
`; `;
const StyledThumbnail = styled.div` const StyledThumbnail = styled.div`
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 200px; height: 200px;
padding: 4px; padding: 4px;
border: solid 1px #eceef1; border: solid 1px #eceef1;
border-radius: 6px; border-radius: 6px;
margin-bottom: 24px; margin-bottom: 24px;
`; `;
const StyledSubtitle = styled.div` const StyledSubtitle = styled.div`
margin-bottom: 24px; margin-bottom: 24px;
height: 19.2px; height: 19.2px;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
color: #000000; color: #000000;
`; `;
const StyledPropertiesTable = styled.div` const StyledPropertiesTable = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
margin-bottom: 24px; margin-bottom: 24px;
gap: 8px; gap: 8px;
`; `;
const StyledPropertyRow = styled.div` const StyledPropertyRow = styled.div`
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-columns: 110px 1fr; grid-template-columns: 110px 1fr;
grid-column-gap: 24px; grid-column-gap: 24px;
.property-title { .property-title {
font-size: 13px; font-size: 13px;
color: #333333; color: #333333;
} }
`; `;
const StyledAccessRow = styled.div` const StyledAccessRow = styled.div`
width: 100%; width: 100%;
height: 32px; height: 32px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 8px; gap: 8px;
align-items: center; align-items: center;
.divider { .divider {
background: #eceef1; background: #eceef1;
margin: 2px 4px; margin: 2px 4px;
width: 1px; width: 1px;
height: 28px; height: 28px;
} }
`; `;
////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////
export { export {
StyledInfoRoomBody, StyledInfoRoomBody,
StyledSubtitle, StyledSubtitle,
StyledTitle, StyledTitle,
StyledThumbnail, StyledThumbnail,
StyledPropertiesTable, StyledPropertiesTable,
StyledPropertyRow, StyledPropertyRow,
StyledAccessRow, StyledAccessRow,
}; };
////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////
const StyledItemAccess = styled.div` const StyledItemAccess = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 8px; gap: 8px;
align-items: center; align-items: center;
.divider { .divider {
background: #eceef1; background: #eceef1;
margin: 2px 4px; margin: 2px 4px;
width: 1px; width: 1px;
height: 28px; height: 28px;
} }
`; `;
const StyleditemAccessUser = styled.div` const StyleditemAccessUser = styled.div`
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 50%; border-radius: 50%;
a { a {
img { img {
border-radius: 50%; border-radius: 50%;
width: 100%; width: 100%;
height: 100%; height: 100%;
}
} }
}
`; `;

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

@ -20,6 +20,7 @@ import Tile from "./TileLoader";
import Tiles from "./TilesLoader"; import Tiles from "./TilesLoader";
import DialogLoader from "./DialogLoader"; import DialogLoader from "./DialogLoader";
import DialogAsideLoader from "./DialogAsideLoader"; import DialogAsideLoader from "./DialogAsideLoader";
import InfoPanelLoader from "./InfoPanelLoader";
export default { export default {
Rectangle, Rectangle,
@ -44,4 +45,5 @@ export default {
ArticleButton, ArticleButton,
ArticleFolder, ArticleFolder,
ArticleGroup, ArticleGroup,
InfoPanelLoader,
}; };

15
packages/asc-web-common/components/Section/sub-components/info-panel.js
View File

@ -66,10 +66,14 @@ const StyledCloseButtonWrapper = styled.div`
} }
`; `;
const InfoPanel = ({ children, selectedItems, isVisible, setIsVisible }) => { const InfoPanel = ({
//if (selectedItems.length > 0) setIsVisible(true); children,
//else setIsVisible(false); selectedItems,
isVisible,
setIsVisible,
showCurrentFolder,
}) => {
//if (!showCurrentFolder && selectedItems.length === 0) return null;
if (!isVisible) return null; if (!isVisible) return null;
const closeInfoPanel = () => setIsVisible(false); const closeInfoPanel = () => setIsVisible(false);
@ -115,9 +119,11 @@ InfoPanel.propTypes = {
export default inject(({ infoPanelStore, filesStore }) => { export default inject(({ infoPanelStore, filesStore }) => {
let selectedItems = []; let selectedItems = [];
let isVisible = false; let isVisible = false;
let showCurrentFolder = false;
let setIsVisible = () => {}; let setIsVisible = () => {};
if (infoPanelStore) { if (infoPanelStore) {
showCurrentFolder = infoPanelStore.showCurrentFolder;
isVisible = infoPanelStore.isVisible; isVisible = infoPanelStore.isVisible;
setIsVisible = infoPanelStore.setIsVisible; setIsVisible = infoPanelStore.setIsVisible;
} }
@ -129,6 +135,7 @@ export default inject(({ infoPanelStore, filesStore }) => {
return { return {
selectedItems, selectedItems,
isVisible, isVisible,
showCurrentFolder,
setIsVisible, setIsVisible,
}; };
})(InfoPanel); })(InfoPanel);

9
products/ASC.Files/Client/src/HOCs/withFileActions.js
View File

@ -21,17 +21,12 @@ export default function withFileActions(WrappedFileItem) {
if (!infoPanelIsVisible && isDesktop()) { if (!infoPanelIsVisible && isDesktop()) {
setShowCurrentFolder(false); setShowCurrentFolder(false);
showInfoPanel(); if (checked) showInfoPanel();
} }
}; };
fileContextClick = () => { fileContextClick = () => {
const { const { onSelectItem, item } = this.props;
onSelectItem,
item,
infoPanelIsVisible,
showInfoPanel,
} = this.props;
const { id, isFolder } = item; const { id, isFolder } = item;
id !== -1 && onSelectItem({ id, isFolder }); id !== -1 && onSelectItem({ id, isFolder });

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

@ -5,6 +5,8 @@ import { withRouter } from "react-router";
import SeveralItems from "./SeveralItems"; import SeveralItems from "./SeveralItems";
import SingleItem from "./SingleItem"; import SingleItem from "./SingleItem";
import { StyledInfoRoomBody } from "./styles/styles.js"; import { StyledInfoRoomBody } from "./styles/styles.js";
import Loaders from "@appserver/common/components/Loaders";
import Loader from "@appserver/components/loader";
const InfoPanelBodyContent = ({ const InfoPanelBodyContent = ({
t, t,
@ -72,7 +74,13 @@ const InfoPanelBodyContent = ({
<StyledInfoRoomBody> <StyledInfoRoomBody>
{showCurrentFolder && selectedItems.length === 0 ? ( {showCurrentFolder && selectedItems.length === 0 ? (
<> <>
{currentFolderLoading ? <>Loading ...</> : singleItem(currentFolder)} {currentFolderLoading ? (
<div className="current-folder-loader-wrapper">
<Loader type="dual-ring" size="60px" />
</div>
) : (
singleItem(currentFolder)
)}
</> </>
) : ( ) : (
<> <>

308
products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/styles/styles.js
View File

@ -1,189 +1,199 @@
import styled from "styled-components"; import styled from "styled-components";
const StyledInfoRoomBody = styled.div` const StyledInfoRoomBody = styled.div`
padding: 0px 16px 16px; padding: 0px 16px 16px;
.no-item { height: 100%;
text-align: center; .no-item {
} text-align: center;
}
.no-thumbnail-img-wrapper { .no-thumbnail-img-wrapper {
padding: 9px 0 34px; padding: 9px 0 34px;
height: auto;
width: 100%;
display: flex;
justify-content: center;
.no-thumbnail-img {
height: 96px;
width: 96px;
}
}
`;
const StyledTitle = styled.div`
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: auto; height: auto;
padding: 24px 0; width: 100%;
display: flex;
.icon { justify-content: center;
svg { .no-thumbnail-img {
height: 32px; height: 96px;
width: 32px; width: 96px;
}
} }
}
.text { .current-folder-loader-wrapper {
font-family: Open Sans; width: 100%;
line-height: 22px; height: 100%;
margin: 0 8px;
}
`;
const StyledThumbnail = styled.div`
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; margin-top: auto;
height: 200px; }
padding: 4px; `;
border: solid 1px #eceef1;
border-radius: 6px; const StyledTitle = styled.div`
margin-bottom: 24px; display: flex;
img { flex-direction: row;
max-height: 200px; align-items: center;
max-width: 100%; width: 100%;
width: auto; height: auto;
height: auto; padding: 24px 0;
.icon {
svg {
height: 32px;
width: 32px;
} }
}
.text {
font-family: Open Sans;
line-height: 22px;
margin: 0 8px;
}
`;
const StyledThumbnail = styled.div`
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 200px;
padding: 4px;
border: solid 1px #eceef1;
border-radius: 6px;
margin-bottom: 24px;
img {
max-height: 200px;
max-width: 100%;
width: auto;
height: auto;
}
`; `;
const StyledSubtitle = styled.div` const StyledSubtitle = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
width: 100%; width: 100%;
margin-bottom: 24px; margin-bottom: 24px;
`; `;
const StyledProperties = styled.div` const StyledProperties = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%;
margin-bottom: 24px;
gap: 8px;
.property {
width: 100%; width: 100%;
margin-bottom: 24px; display: grid;
gap: 8px; grid-template-columns: 110px 1fr;
grid-column-gap: 24px;
.property { .property-title {
width: 100%; font-size: 13px;
display: grid; color: #333333;
grid-template-columns: 110px 1fr;
grid-column-gap: 24px;
.property-title {
font-size: 13px;
color: #333333;
}
.property-content {
display: flex;
align-items: center;
font-weight: 600;
font-size: 13px;
color: #333333;
}
} }
.property-content {
display: flex;
align-items: center;
font-weight: 600;
font-size: 13px;
color: #333333;
}
}
`; `;
const StyledAccess = styled.div` const StyledAccess = styled.div`
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; flex-direction: row;
gap: 8px; gap: 8px;
align-items: center; align-items: center;
.divider { .divider {
background: #eceef1; background: #eceef1;
margin: 2px 4px; margin: 2px 4px;
width: 1px; width: 1px;
height: 28px; height: 28px;
} }
.show-more-users { .show-more-users {
position: static;
width: 101px;
height: 16px;
left: 120px;
top: 8px;
font-family: Open Sans;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 16px;
text-align: right;
color: #a3a9ae;
flex: none;
order: 3;
flex-grow: 0;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
`;
const StyledAccessUser = styled.div`
width: 32px;
height: 32px;
border-radius: 50%;
a {
img {
border-radius: 50%;
width: 100%;
height: 100%;
}
}
`;
const StyledOpenSharingPanel = styled.div`
position: static; position: static;
width: auto; width: 101px;
height: 15px; height: 16px;
left: 0px; left: 120px;
top: 2px; top: 8px;
font-family: Open Sans; font-family: Open Sans;
font-style: normal; font-style: normal;
font-weight: 600; font-weight: normal;
font-size: 13px; font-size: 12px;
line-height: 15px; line-height: 16px;
text-align: right;
color: #3b72a7; color: #a3a9ae;
flex: none; flex: none;
order: 0; order: 3;
flex-grow: 0; flex-grow: 0;
margin: 16px 0px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
text-decoration-style: dashed;
} }
}
`;
const StyledAccessUser = styled.div`
width: 32px;
height: 32px;
border-radius: 50%;
a {
img {
border-radius: 50%;
width: 100%;
height: 100%;
}
}
`;
const StyledOpenSharingPanel = styled.div`
position: static;
width: auto;
height: 15px;
left: 0px;
top: 2px;
font-family: Open Sans;
font-style: normal;
font-weight: 600;
font-size: 13px;
line-height: 15px;
color: #3b72a7;
flex: none;
order: 0;
flex-grow: 0;
margin: 16px 0px;
cursor: pointer;
&:hover {
text-decoration: underline;
text-decoration-style: dashed;
}
`; `;
export { export {
StyledInfoRoomBody, StyledInfoRoomBody,
StyledTitle, StyledTitle,
StyledThumbnail, StyledThumbnail,
StyledSubtitle, StyledSubtitle,
StyledProperties, StyledProperties,
StyledAccess, StyledAccess,
StyledAccessUser, StyledAccessUser,
StyledOpenSharingPanel, StyledOpenSharingPanel,
}; };

2
products/ASC.Files/Client/src/store/InfoPanelStore.js
View File

@ -12,7 +12,7 @@ class InfoPanelStore {
this.showCurrentFolder = bool; this.showCurrentFolder = bool;
}; };
get showCurrenFolder() { get showCurrentFolder() {
return this.showCurrenFolder; return this.showCurrenFolder;
} }