Merge branch 'release/1.0.0' into bugfix/files-loader
This commit is contained in:
commit
3a33cf8d3a
@ -357,7 +357,10 @@ class PageLayout extends React.Component {
|
||||
paddingRight: "20px",
|
||||
}}
|
||||
></div>
|
||||
<SubSectionFilter className="section-header_filter">
|
||||
<SubSectionFilter
|
||||
className="section-header_filter"
|
||||
viewAs={viewAs}
|
||||
>
|
||||
{sectionFilterContent
|
||||
? sectionFilterContent.props.children
|
||||
: null}
|
||||
|
@ -21,7 +21,12 @@ const commonStyles = css`
|
||||
flex: 1 0 auto;
|
||||
padding: 17px 7px 16px 24px;
|
||||
outline: none;
|
||||
${(props) => props.viewAs == "tile" && "padding-right:0;"}
|
||||
${(props) =>
|
||||
props.viewAs == "tile" &&
|
||||
css`
|
||||
padding-right: 0;
|
||||
padding-left: 20px;
|
||||
`}
|
||||
|
||||
@media ${tablet} {
|
||||
padding: 16px 0 16px 24px;
|
||||
|
@ -1,11 +1,20 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import styled, { css } from "styled-components";
|
||||
import equal from "fast-deep-equal/react";
|
||||
import { tablet } from "@appserver/components/utils/device";
|
||||
import { tablet, desktop } from "@appserver/components/utils/device";
|
||||
|
||||
const StyledSectionFilter = styled.div`
|
||||
margin: 11px 24px 9px 0;
|
||||
|
||||
@media ${desktop} {
|
||||
${(props) =>
|
||||
(props.viewAs === "table" || props.viewAs === "tile") &&
|
||||
css`
|
||||
margin-left: -4px;
|
||||
margin-right: 20px;
|
||||
`};
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
@ -25,7 +25,12 @@ const StyledSectionHeader = styled.div`
|
||||
} */
|
||||
`}
|
||||
|
||||
|
||||
@media ${desktop} {
|
||||
${(props) =>
|
||||
(props.viewAs === "table" || props.viewAs === "tile") &&
|
||||
"margin-left: -4px"};
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
${(props) =>
|
||||
props.viewAs !== "tablet" &&
|
||||
|
@ -311,7 +311,13 @@ class AvatarEditorBody extends React.Component {
|
||||
const desktopMode = isDesktop();
|
||||
return (
|
||||
<Text as="span">
|
||||
<Link type="action" isHovered color="#316DAA" onClick={this.openDialog}>
|
||||
<Link
|
||||
type="action"
|
||||
fontWeight={600}
|
||||
isHovered
|
||||
color="#316DAA"
|
||||
onClick={this.openDialog}
|
||||
>
|
||||
{selectNewPhotoLabel}
|
||||
</Link>{" "}
|
||||
{desktopMode && orDropFileHereLabel}
|
||||
|
@ -1388,7 +1388,7 @@ const Base = {
|
||||
maxWidth: "175px",
|
||||
|
||||
lineHeightWithoutBorder: "16px",
|
||||
lineHeightTextDecoration: "underline dashed transparent",
|
||||
lineHeightTextDecoration: "underline dashed",
|
||||
},
|
||||
|
||||
childrenButton: {
|
||||
|
@ -1180,7 +1180,7 @@ const Dark = {
|
||||
maxWidth: "175px",
|
||||
|
||||
lineHeightWithoutBorder: "16px",
|
||||
lineHeightTextDecoration: "underline dashed transparent",
|
||||
lineHeightTextDecoration: "underline dashed",
|
||||
},
|
||||
|
||||
childrenButton: {
|
||||
|
@ -121,6 +121,7 @@ export default function withContent(WrappedContent) {
|
||||
createFile,
|
||||
item,
|
||||
setIsLoading,
|
||||
isLoading,
|
||||
openDocEditor,
|
||||
isPrivacy,
|
||||
isDesktop,
|
||||
@ -131,6 +132,8 @@ export default function withContent(WrappedContent) {
|
||||
} = this.props;
|
||||
const { itemTitle } = this.state;
|
||||
|
||||
if (isLoading) return;
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
const itemId = e.currentTarget.dataset.itemid;
|
||||
@ -317,6 +320,7 @@ export default function withContent(WrappedContent) {
|
||||
const { editCompleteAction } = filesActionsStore;
|
||||
const {
|
||||
setIsLoading,
|
||||
isLoading,
|
||||
openDocEditor,
|
||||
updateFile,
|
||||
renameFolder,
|
||||
@ -340,6 +344,7 @@ export default function withContent(WrappedContent) {
|
||||
|
||||
return {
|
||||
setIsLoading,
|
||||
isLoading,
|
||||
isTrashFolder: isRecycleBinFolder,
|
||||
openDocEditor,
|
||||
updateFile,
|
||||
|
@ -96,7 +96,7 @@ export default function withFileActions(WrappedFileItem) {
|
||||
}
|
||||
e.preventDefault();
|
||||
setTooltipPosition(e.pageX, e.pageY);
|
||||
setStartDrag(true);
|
||||
!isFileName && setStartDrag(true);
|
||||
!isActive && setBufferSelection(null);
|
||||
};
|
||||
|
||||
|
@ -46,6 +46,8 @@ const EditingWrapper = styled.div`
|
||||
border-bottom: 1px solid #eceef1;
|
||||
padding-bottom: 4px;
|
||||
margin-top: 4px;
|
||||
|
||||
margin-left: -4px;
|
||||
`}
|
||||
|
||||
${(props) =>
|
||||
|
@ -63,6 +63,10 @@ const StyledTableRow = styled(TableRow)`
|
||||
"url(images/cursor.palm.svg), auto"};
|
||||
}
|
||||
|
||||
.table-container_element {
|
||||
margin-left: ${(props) => (props.item.isFolder ? "-3px" : "-4px")};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.table-container_row-checkbox-wrapper {
|
||||
${(props) => props.dragging && rowCheckboxDraggingHoverStyle}
|
||||
|
@ -9,6 +9,7 @@ import Text from "@appserver/components/text";
|
||||
import TileContent from "./sub-components/TileContent";
|
||||
import withContent from "../../../../../HOCs/withContent";
|
||||
import withBadges from "../../../../../HOCs/withBadges";
|
||||
import { isMobile } from "react-device-detect";
|
||||
|
||||
const SimpleFilesTileContent = styled(TileContent)`
|
||||
.row-main-container {
|
||||
@ -54,7 +55,8 @@ const SimpleFilesTileContent = styled(TileContent)`
|
||||
}
|
||||
|
||||
.title-link {
|
||||
font-size: 14px;
|
||||
font-size: ${isMobile ? "15px" : "13px"};
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.favorite,
|
||||
@ -83,18 +85,14 @@ const FilesTileContent = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<SimpleFilesTileContent
|
||||
sideColor="#333"
|
||||
isFile={fileExst}
|
||||
//disableSideInfo
|
||||
>
|
||||
<SimpleFilesTileContent sideColor="#333" isFile={fileExst}>
|
||||
<Link
|
||||
className="title-link item-file-name"
|
||||
containerWidth="100%"
|
||||
type="page"
|
||||
title={title}
|
||||
fontWeight="600"
|
||||
fontSize="14px"
|
||||
fontSize={isMobile ? "15px" : "13px"}
|
||||
target="_blank"
|
||||
{...linkStyles}
|
||||
color="#333"
|
||||
@ -106,7 +104,7 @@ const FilesTileContent = ({
|
||||
className="badge-ext"
|
||||
as="span"
|
||||
color="#A3A9AE"
|
||||
fontSize="14px"
|
||||
fontSize={isMobile ? "15px" : "13px"}
|
||||
fontWeight={600}
|
||||
truncate={true}
|
||||
>
|
||||
|
@ -6,6 +6,7 @@ import { ReactSVG } from "react-svg";
|
||||
import styled, { css } from "styled-components";
|
||||
import ContextMenu from "@appserver/components/context-menu";
|
||||
import { tablet } from "@appserver/components/utils/device";
|
||||
import { isDesktop, isMobile } from "react-device-detect";
|
||||
|
||||
import Link from "@appserver/components/link";
|
||||
|
||||
@ -100,9 +101,11 @@ const StyledTile = styled.div`
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
display: flex;
|
||||
opacity: ${(props) => (props.checked ? 1 : 0)};
|
||||
flex: 0 0 16px;
|
||||
margin-right: 4px;
|
||||
justify-content: center;
|
||||
|
||||
@media ${tablet} {
|
||||
opacity: 1;
|
||||
@ -112,11 +115,18 @@ const StyledTile = styled.div`
|
||||
.file-checkbox {
|
||||
display: ${(props) => (props.checked ? "flex" : "none")};
|
||||
flex: 0 0 16px;
|
||||
margin-right: ${(props) => (props.isFolder ? "8px" : "4px")};
|
||||
margin-top: 3px;
|
||||
|
||||
margin-left: ${(props) =>
|
||||
isMobile
|
||||
? css`
|
||||
${props.isFolder ? "6px" : "12px"};
|
||||
`
|
||||
: css`
|
||||
${props.isFolder ? "5px" : "8px"}
|
||||
`};
|
||||
|
||||
@media ${tablet} {
|
||||
display: flex;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
@ -126,33 +136,47 @@ const StyledTile = styled.div`
|
||||
flex: 0 0 auto;
|
||||
margin-right: 4px;
|
||||
user-select: none;
|
||||
margin-top: 3px;
|
||||
margin-top: ${(props) => (props.isFolder ? "-6px" : "-4px")};
|
||||
margin-top: ${(props) => (props.isFolder ? "-8px" : "-6px")};
|
||||
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
height: ${isMobile ? "32px" : "24px"};
|
||||
width: ${isMobile ? "32px" : "24px"};
|
||||
|
||||
img {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
height: ${isMobile ? "32px" : "24px"};
|
||||
width: ${isMobile ? "32px" : "24px"};
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
display: none;
|
||||
}
|
||||
margin-left: ${(props) =>
|
||||
isMobile
|
||||
? css`
|
||||
${props.isFolder ? "2px" : "4px"};
|
||||
`
|
||||
: css`
|
||||
${props.isFolder ? "2px" : "4px"}
|
||||
`};
|
||||
}
|
||||
|
||||
.file-icon_container {
|
||||
min-width: 36px;
|
||||
min-width: ${isMobile ? "36px" : "28px"};
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
min-width: 28px;
|
||||
}
|
||||
.styled-content {
|
||||
padding-left: 10px;
|
||||
|
||||
padding-left: ${(props) =>
|
||||
isMobile
|
||||
? css`
|
||||
${props.isFolder ? "8px" : "12px"};
|
||||
`
|
||||
: css`
|
||||
${props.isFolder ? "10px" : "13px"}
|
||||
`};
|
||||
}
|
||||
|
||||
:hover {
|
||||
${(props) =>
|
||||
!props.dragging &&
|
||||
props.isDesktop &&
|
||||
css`
|
||||
.checkbox {
|
||||
opacity: 1;
|
||||
@ -173,8 +197,12 @@ const StyledFileTileTop = styled.div`
|
||||
align-items: baseline;
|
||||
background-color: #f8f9f9;
|
||||
padding: 13px;
|
||||
height: 157px;
|
||||
height: ${(props) => (props.checked || props.isActive ? "156px" : "156px")};
|
||||
position: relative;
|
||||
border-bottom: ${(props) =>
|
||||
props.checked || props.isActive
|
||||
? "1px solid #D0D5DA"
|
||||
: "1px solid transparent"};
|
||||
|
||||
.thumbnail-image,
|
||||
.temporary-icon > .injected-svg {
|
||||
@ -195,8 +223,6 @@ const StyledFileTileBottom = styled.div`
|
||||
padding-right: 0;
|
||||
min-height: 56px;
|
||||
box-sizing: border-box;
|
||||
border-top: ${(props) =>
|
||||
(props.checked || props.isActive) && "1px solid #D0D5DA"};
|
||||
`;
|
||||
|
||||
const StyledContent = styled.div`
|
||||
@ -292,6 +318,13 @@ class Tile extends React.PureComponent {
|
||||
onSelect && onSelect(e.target.checked, item);
|
||||
};
|
||||
|
||||
onFileIconClick = () => {
|
||||
if (isDesktop) return;
|
||||
|
||||
const { onSelect, item } = this.props;
|
||||
onSelect && onSelect(true, item);
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
checked,
|
||||
@ -348,12 +381,18 @@ class Tile extends React.PureComponent {
|
||||
isRecycleBin={isRecycleBin}
|
||||
checked={checked}
|
||||
isActive={isActive}
|
||||
isDesktop={isDesktop}
|
||||
>
|
||||
{isFolder || (!fileExst && id === -1) ? (
|
||||
<>
|
||||
{renderElement && !(!fileExst && id === -1) && !isEdit && (
|
||||
<div className="file-icon_container">
|
||||
<StyledElement className="file-icon">{element}</StyledElement>
|
||||
<StyledElement
|
||||
className="file-icon"
|
||||
onClick={this.onFileIconClick}
|
||||
>
|
||||
{element}
|
||||
</StyledElement>
|
||||
<Checkbox
|
||||
className="checkbox file-checkbox"
|
||||
isChecked={checked}
|
||||
@ -363,6 +402,7 @@ class Tile extends React.PureComponent {
|
||||
</div>
|
||||
)}
|
||||
<StyledContent
|
||||
className="styled-content"
|
||||
isFolder={(isFolder && !fileExst) || (!fileExst && id === -1)}
|
||||
>
|
||||
{children}
|
||||
@ -386,11 +426,15 @@ class Tile extends React.PureComponent {
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<StyledFileTileTop>{icon}</StyledFileTileTop>
|
||||
<StyledFileTileBottom checked={checked} isActive={isActive}>
|
||||
<StyledFileTileTop checked={checked} isActive={isActive}>
|
||||
{icon}
|
||||
</StyledFileTileTop>
|
||||
<StyledFileTileBottom>
|
||||
{id !== -1 && !isEdit && (
|
||||
<div className="file-icon_container">
|
||||
<div className="file-icon">{element}</div>
|
||||
<div className="file-icon" onClick={this.onFileIconClick}>
|
||||
{element}
|
||||
</div>
|
||||
<Checkbox
|
||||
className="file-checkbox"
|
||||
isChecked={checked}
|
||||
|
@ -1,35 +1,50 @@
|
||||
/* eslint-disable react/display-name */
|
||||
import React, { memo } from "react";
|
||||
import styled from "styled-components";
|
||||
import styled, { css } from "styled-components";
|
||||
import PropTypes from "prop-types";
|
||||
import { FixedSizeList as List, areEqual } from "react-window";
|
||||
import AutoSizer from "react-virtualized-auto-sizer";
|
||||
import Heading from "@appserver/components/heading";
|
||||
import ContextMenu from "@appserver/components/context-menu";
|
||||
import CustomScrollbarsVirtualList from "@appserver/components/scrollbar";
|
||||
import { tablet } from "@appserver/components/utils/device";
|
||||
|
||||
import { tablet, desktop } from "@appserver/components/utils/device";
|
||||
|
||||
const foldersStyle = css`
|
||||
grid-gap: 19px 14px;
|
||||
|
||||
@media ${desktop} {
|
||||
margin-left: -1px;
|
||||
padding-right: 1px;
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
grid-gap: 17px 12px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
`;
|
||||
|
||||
const filesStyle = css`
|
||||
grid-gap: 14px 18px;
|
||||
|
||||
@media ${desktop} {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
grid-gap: 12px 14px;
|
||||
margin-left: -1px;
|
||||
padding-right: 2px;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledGridWrapper = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
width: 100%;
|
||||
grid-gap: ${(props) => (props.isFolders ? "13px 14px" : "16px 18px")};
|
||||
padding-bottom: 24px;
|
||||
padding-right: 2px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 1px;
|
||||
|
||||
@media ${tablet} {
|
||||
margin-left: -6px !important;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-left: -2px;
|
||||
}
|
||||
${(props) => (props.isFolders ? foldersStyle : filesStyle)};
|
||||
`;
|
||||
|
||||
const StyledTileContainer = styled.div`
|
||||
@ -59,6 +74,8 @@ const StyledTileContainer = styled.div`
|
||||
&.files {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
@ -68,6 +85,10 @@ const StyledTileContainer = styled.div`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
margin-right: -3px;
|
||||
}
|
||||
`;
|
||||
|
||||
class TileContainer extends React.PureComponent {
|
||||
|
@ -1062,7 +1062,7 @@ class FilesStore {
|
||||
const { getFileIcon, getFolderIcon } = this.formatsStore.iconFormatsStore;
|
||||
|
||||
if (items.length && items[0].id === -1) return; //TODO: if change media collection from state remove this;
|
||||
const iconSize = this.viewAs === "tile" ? 32 : 24;
|
||||
const iconSize = this.viewAs === "tile" && isMobile ? 32 : 24;
|
||||
const icon = this.fileActionStore.extension
|
||||
? getFileIcon(`.${this.fileActionStore.extension}`, iconSize)
|
||||
: getFolderIcon(null, iconSize);
|
||||
@ -1134,7 +1134,7 @@ class FilesStore {
|
||||
const isThirdPartyFolder = providerKey && id === rootFolderId;
|
||||
|
||||
//const isCanWebEdit = canWebEdit(item.fileExst);
|
||||
const iconSize = this.viewAs === "tile" ? 32 : 24;
|
||||
const iconSize = this.viewAs === "tile" && isMobile ? 32 : 24;
|
||||
const icon = getIcon(iconSize, fileExst, providerKey, contentLength);
|
||||
|
||||
let isFolder = false;
|
||||
|
@ -874,25 +874,25 @@ class UploadDataStore {
|
||||
return;
|
||||
}
|
||||
|
||||
let operationItem = null;
|
||||
let operationItem = data;
|
||||
let finished = data.finished;
|
||||
|
||||
while (progress !== 100) {
|
||||
await this.getOperationProgress(data.id)
|
||||
.then((item) => {
|
||||
operationItem = item;
|
||||
progress = item ? item.progress : 100;
|
||||
while (!finished) {
|
||||
const item = await this.getOperationProgress(data.id);
|
||||
operationItem = item;
|
||||
progress = item ? item.progress : 100;
|
||||
finished = item.finished;
|
||||
|
||||
setSecondaryProgressBarData({
|
||||
icon: pbData.icon,
|
||||
label: pbData.label || label,
|
||||
percent: progress,
|
||||
visible: true,
|
||||
alert: false,
|
||||
});
|
||||
})
|
||||
.catch((err) => Promise.reject(err));
|
||||
setSecondaryProgressBarData({
|
||||
icon: pbData.icon,
|
||||
label: pbData.label || label,
|
||||
percent: progress,
|
||||
visible: true,
|
||||
alert: false,
|
||||
});
|
||||
}
|
||||
return Promise.resolve(operationItem);
|
||||
|
||||
return operationItem;
|
||||
};
|
||||
|
||||
moveToCopyTo = (destFolderId, pbData, isCopy) => {
|
||||
|
Loading…
Reference in New Issue
Block a user