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 {
StyledAccessRow,
StyledInfoRoomBody,
StyledPropertiesTable,
StyledPropertyRow,
StyledSubtitle,
StyledThumbnail,
StyledTitle,
StyledAccessRow,
StyledInfoRoomBody,
StyledPropertiesTable,
StyledPropertyRow,
StyledSubtitle,
StyledThumbnail,
StyledTitle,
} from "./StyledInfoPanelLoader";
const InfoPanelLoader = ({
id,
className,
style,
isFolder,
hasThumbnail,
...rest
id,
className,
style,
isFolder,
hasThumbnail,
...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) => (
<RectangleLoader
width={"" + width}
height={"" + height}
borderRadius={"" + rounded}
/>
);
const customRectangleLoader = (width, height, rounded) => (
<RectangleLoader
width={"" + width}
height={"" + height}
borderRadius={"" + rounded}
/>
);
const properties = isFolder
? [
{ Owner: 19 },
{ Location: 19 },
{ Type: 17.6 },
{ Size: 17.6 },
{ "Date modified": 17.6 },
{ "Last modified by": 19 },
{ "Date creation": 17.6 },
]
: [
{ Owner: 19 },
{ Location: 19 },
{ Type: 17.6 },
{ "File Extension": 17.6 },
{ Size: 17.6 },
{ "Date modified": 17.6 },
{ "Last modified by": 19 },
{ "Date creation": 17.6 },
{ Versions: 17.6 },
{ Comments: 17.6 },
];
const properties = isFolder
? [
{ Owner: 19 },
{ Location: 19 },
{ Type: 17.6 },
{ Size: 17.6 },
{ "Date modified": 17.6 },
{ "Last modified by": 19 },
{ "Date creation": 17.6 },
]
: [
{ Owner: 19 },
{ Location: 19 },
{ Type: 17.6 },
{ "File Extension": 17.6 },
{ Size: 17.6 },
{ "Date modified": 17.6 },
{ "Last modified by": 19 },
{ "Date creation": 17.6 },
{ Versions: 17.6 },
{ Comments: 17.6 },
];
return (
<StyledInfoRoomBody id={id} className={className} style={style}>
<StyledTitle>
{customRectangleLoader(32, 32)}
{customRectangleLoader(250, 22)}
</StyledTitle>
return (
<StyledInfoRoomBody id={id} className={className} style={style}>
<StyledTitle>
{customRectangleLoader(32, 32, 3)}
{customRectangleLoader(250, 22)}
</StyledTitle>
<StyledSubtitle>System Properties</StyledSubtitle>
<StyledSubtitle>System Properties</StyledSubtitle>
{hasThumbnail && (
<StyledThumbnail>
{customRectangleLoader(320.2, 200)}
</StyledThumbnail>
{hasThumbnail ? (
<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>
{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>
<StyledSubtitle>Who has access</StyledSubtitle>
<StyledAccessRow>
{customRectangleLoader(32, 32, 16)}
<div className="divider"></div>
{customRectangleLoader(32, 32, 16)}
{customRectangleLoader(32, 32, 16)}
</StyledAccessRow>
</StyledInfoRoomBody>
);
<StyledAccessRow>
{customRectangleLoader(32, 32, 16)}
<div className="divider"></div>
{customRectangleLoader(32, 32, 16)}
{customRectangleLoader(32, 32, 16)}
</StyledAccessRow>
</StyledInfoRoomBody>
);
};
InfoPanelLoader.propTypes = {
id: PropTypes.string,
className: PropTypes.string,
style: PropTypes.object,
id: PropTypes.string,
className: PropTypes.string,
style: PropTypes.object,
};
InfoPanelLoader.defaultProps = {
id: undefined,
className: undefined,
style: undefined,
id: undefined,
className: undefined,
style: undefined,
};
export default InfoPanelLoader;

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

@ -1,114 +1,117 @@
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`
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 80px;
gap: 8px;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 80px;
gap: 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;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 200px;
padding: 4px;
border: solid 1px #eceef1;
border-radius: 6px;
margin-bottom: 24px;
`;
const StyledSubtitle = styled.div`
margin-bottom: 24px;
height: 19.2px;
font-weight: 600;
font-size: 14px;
color: #000000;
margin-bottom: 24px;
height: 19.2px;
font-weight: 600;
font-size: 14px;
color: #000000;
`;
const StyledPropertiesTable = styled.div`
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 24px;
gap: 8px;
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 24px;
gap: 8px;
`;
const StyledPropertyRow = styled.div`
width: 100%;
display: grid;
grid-template-columns: 110px 1fr;
grid-column-gap: 24px;
width: 100%;
display: grid;
grid-template-columns: 110px 1fr;
grid-column-gap: 24px;
.property-title {
font-size: 13px;
color: #333333;
}
.property-title {
font-size: 13px;
color: #333333;
}
`;
const StyledAccessRow = styled.div`
width: 100%;
height: 32px;
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
width: 100%;
height: 32px;
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
.divider {
background: #eceef1;
margin: 2px 4px;
width: 1px;
height: 28px;
}
.divider {
background: #eceef1;
margin: 2px 4px;
width: 1px;
height: 28px;
}
`;
////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////
export {
StyledInfoRoomBody,
StyledSubtitle,
StyledTitle,
StyledThumbnail,
StyledPropertiesTable,
StyledPropertyRow,
StyledAccessRow,
StyledInfoRoomBody,
StyledSubtitle,
StyledTitle,
StyledThumbnail,
StyledPropertiesTable,
StyledPropertyRow,
StyledAccessRow,
};
////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////
const StyledItemAccess = styled.div`
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
.divider {
background: #eceef1;
margin: 2px 4px;
width: 1px;
height: 28px;
}
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
.divider {
background: #eceef1;
margin: 2px 4px;
width: 1px;
height: 28px;
}
`;
const StyleditemAccessUser = styled.div`
width: 32px;
height: 32px;
border-radius: 50%;
width: 32px;
height: 32px;
border-radius: 50%;
a {
img {
border-radius: 50%;
width: 100%;
height: 100%;
}
a {
img {
border-radius: 50%;
width: 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 DialogLoader from "./DialogLoader";
import DialogAsideLoader from "./DialogAsideLoader";
import InfoPanelLoader from "./InfoPanelLoader";
export default {
Rectangle,
@ -44,4 +45,5 @@ export default {
ArticleButton,
ArticleFolder,
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 }) => {
//if (selectedItems.length > 0) setIsVisible(true);
//else setIsVisible(false);
const InfoPanel = ({
children,
selectedItems,
isVisible,
setIsVisible,
showCurrentFolder,
}) => {
//if (!showCurrentFolder && selectedItems.length === 0) return null;
if (!isVisible) return null;
const closeInfoPanel = () => setIsVisible(false);
@ -115,9 +119,11 @@ InfoPanel.propTypes = {
export default inject(({ infoPanelStore, filesStore }) => {
let selectedItems = [];
let isVisible = false;
let showCurrentFolder = false;
let setIsVisible = () => {};
if (infoPanelStore) {
showCurrentFolder = infoPanelStore.showCurrentFolder;
isVisible = infoPanelStore.isVisible;
setIsVisible = infoPanelStore.setIsVisible;
}
@ -129,6 +135,7 @@ export default inject(({ infoPanelStore, filesStore }) => {
return {
selectedItems,
isVisible,
showCurrentFolder,
setIsVisible,
};
})(InfoPanel);

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

@ -21,17 +21,12 @@ export default function withFileActions(WrappedFileItem) {
if (!infoPanelIsVisible && isDesktop()) {
setShowCurrentFolder(false);
showInfoPanel();
if (checked) showInfoPanel();
}
};
fileContextClick = () => {
const {
onSelectItem,
item,
infoPanelIsVisible,
showInfoPanel,
} = this.props;
const { onSelectItem, item } = this.props;
const { id, isFolder } = item;
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 SingleItem from "./SingleItem";
import { StyledInfoRoomBody } from "./styles/styles.js";
import Loaders from "@appserver/common/components/Loaders";
import Loader from "@appserver/components/loader";
const InfoPanelBodyContent = ({
t,
@ -72,7 +74,13 @@ const InfoPanelBodyContent = ({
<StyledInfoRoomBody>
{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";
const StyledInfoRoomBody = styled.div`
padding: 0px 16px 16px;
.no-item {
text-align: center;
}
padding: 0px 16px 16px;
height: 100%;
.no-item {
text-align: center;
}
.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`
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
.no-thumbnail-img-wrapper {
padding: 9px 0 34px;
height: auto;
padding: 24px 0;
.icon {
svg {
height: 32px;
width: 32px;
}
width: 100%;
display: flex;
justify-content: center;
.no-thumbnail-img {
height: 96px;
width: 96px;
}
}
.text {
font-family: Open Sans;
line-height: 22px;
margin: 0 8px;
}
`;
const StyledThumbnail = styled.div`
.current-folder-loader-wrapper {
width: 100%;
height: 100%;
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;
margin-top: auto;
}
`;
const StyledTitle = styled.div`
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
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`
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
margin-bottom: 24px;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
margin-bottom: 24px;
`;
const StyledProperties = styled.div`
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 24px;
gap: 8px;
.property {
width: 100%;
margin-bottom: 24px;
gap: 8px;
display: grid;
grid-template-columns: 110px 1fr;
grid-column-gap: 24px;
.property {
width: 100%;
display: grid;
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-title {
font-size: 13px;
color: #333333;
}
.property-content {
display: flex;
align-items: center;
font-weight: 600;
font-size: 13px;
color: #333333;
}
}
`;
const StyledAccess = styled.div`
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 8px;
align-items: center;
.divider {
background: #eceef1;
margin: 2px 4px;
width: 1px;
height: 28px;
}
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 8px;
align-items: center;
.divider {
background: #eceef1;
margin: 2px 4px;
width: 1px;
height: 28px;
}
.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`
.show-more-users {
position: static;
width: auto;
height: 15px;
left: 0px;
top: 2px;
width: 101px;
height: 16px;
left: 120px;
top: 8px;
font-family: Open Sans;
font-style: normal;
font-weight: 600;
font-size: 13px;
line-height: 15px;
font-weight: normal;
font-size: 12px;
line-height: 16px;
text-align: right;
color: #3b72a7;
color: #a3a9ae;
flex: none;
order: 0;
order: 3;
flex-grow: 0;
margin: 16px 0px;
cursor: pointer;
&:hover {
text-decoration: underline;
text-decoration-style: dashed;
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;
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 {
StyledInfoRoomBody,
StyledTitle,
StyledThumbnail,
StyledSubtitle,
StyledProperties,
StyledAccess,
StyledAccessUser,
StyledOpenSharingPanel,
StyledInfoRoomBody,
StyledTitle,
StyledThumbnail,
StyledSubtitle,
StyledProperties,
StyledAccess,
StyledAccessUser,
StyledOpenSharingPanel,
};

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

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