Merge branch 'feature/files' of https://github.com/ONLYOFFICE/CommunityServer-AspNetCore into feature/files

This commit is contained in:
Nikita Gopienko 2020-06-17 11:40:35 +03:00
commit 6a241f7f93
12 changed files with 65 additions and 31 deletions

View File

@ -6,24 +6,25 @@ import Home from "./components/pages/Home";
import DocEditor from "./components/pages/DocEditor";
import { history, PrivateRoute, PublicRoute, Login, Error404, StudioLayout, Offline } from "asc-web-common";
const withStudioLayout = Component => props => <StudioLayout><Component {...props} /></StudioLayout>;
const App = ({ settings }) => {
const { homepage } = settings;
return (
navigator.onLine ?
<Router history={history}>
<StudioLayout>
<Suspense
fallback={<Loader className="pageLoader" type="rombs" size='40px' />}
>
<Switch>
<Redirect exact from="/" to={`${homepage}`} />
<PrivateRoute exact path={[homepage, `${homepage}/filter`]} component={Home} />
<PrivateRoute exact path={[homepage, `${homepage}/filter`]} component={withStudioLayout(Home)} />
<PrivateRoute exact path={`${homepage}/doceditor`} component={DocEditor} />
<PublicRoute exact path={["/login","/login/error=:error", "/login/confirmed-email=:confirmedEmail"]} component={Login} />
<PrivateRoute component={Error404} />
<PrivateRoute component={withStudioLayout(Error404)} />
</Switch>
</Suspense>
</StudioLayout>
</Router>
: <Offline/>
);

View File

@ -11,6 +11,27 @@ class TreeFolders extends React.Component {
this.state = { treeData, expandedKeys: props.expandedKeys, loaded: true };
}
getFolderIcon = key => {
switch (key) {
case "0-0":
return <Icons.CatalogUserIcon size="scale" isfill color="#657077" />;
case "0-1":
return <Icons.CatalogSharedIcon size="scale" isfill color="#657077" />;
case "0-2":
return (
<Icons.CatalogPortfolioIcon size="scale" isfill color="#657077" />
);
case "0-3":
return <Icons.CatalogTrashIcon size="scale" isfill color="#657077" />;
default:
return <Icons.CatalogFolderIcon size="scale" isfill color="#657077" />;
}
};
getItems = data => {
return data.map(item => {
if (item.folders && item.folders.length > 0) {
@ -19,9 +40,7 @@ class TreeFolders extends React.Component {
id={item.id}
key={item.id}
title={item.title}
icon={
<Icons.CatalogFolderIcon size="scale" isfill color="#657077" />
}
icon={this.getFolderIcon(item.key)}
>
{this.getItems(item.folders)}
</TreeNode>
@ -33,7 +52,7 @@ class TreeFolders extends React.Component {
key={item.id}
title={item.title}
isLeaf={item.foldersCount ? false : true}
icon={<Icons.CatalogFolderIcon size="scale" isfill color="#657077" />}
icon={this.getFolderIcon(item.key)}
/>
);
});
@ -147,12 +166,12 @@ class TreeFolders extends React.Component {
};
onExpand = (data, treeNode) => {
if(treeNode.node && !treeNode.node.props.children) {
if(treeNode.expanded) {
if (treeNode.node && !treeNode.node.props.children) {
if (treeNode.expanded) {
this.onLoadData(treeNode.node);
}
}
if(this.props.needUpdate) {
if (this.props.needUpdate) {
const newFilter = this.props.filter.clone();
newFilter.treeFolders = data;
this.props.setFilter(newFilter);
@ -163,7 +182,11 @@ class TreeFolders extends React.Component {
componentDidUpdate(prevProps) {
const { expandedKeys, data, needUpdate } = this.props;
if (needUpdate && expandedKeys && this.state.expandedKeys.length !== expandedKeys.length) {
if (
needUpdate &&
expandedKeys &&
this.state.expandedKeys.length !== expandedKeys.length
) {
this.setState({ expandedKeys });
}
@ -173,7 +196,13 @@ class TreeFolders extends React.Component {
}
render() {
const { selectedKeys, fakeNewDocuments, isLoading, onSelect, needUpdate } = this.props;
const {
selectedKeys,
fakeNewDocuments,
isLoading,
onSelect,
needUpdate
} = this.props;
const { treeData, expandedKeys, loaded } = this.state;
const loadProp = loaded && needUpdate ? { loadData: this.onLoadData } : {};

View File

@ -29,18 +29,21 @@ class PureEditor extends React.Component {
const urlParams = getObjectByLocation(window.location);
const fileId = urlParams.fileId || null;
const wrapperStyle = {
height: '100vh'
}
files.openEdit(fileId)
.then(config => {
if (window.innerWidth < 600) {
if (window.innerWidth < 720) {
config.type = 'mobile';
}
window.DocsAPI.DocEditor("editor", config)
window.DocsAPI.DocEditor("editor", config);
});
return (
<>
<div style={wrapperStyle}>
<RequestLoader
visible={isLoading}
zIndex={256}
@ -51,7 +54,7 @@ class PureEditor extends React.Component {
fontColor={"#999"}
/>
<div id="editor"></div>
</>
</div>
);
}
}

View File

@ -439,7 +439,7 @@ class SectionHeaderContent extends React.Component {
{folder && (
<IconButton
iconName="ArrowPathIcon"
size="16"
size="17"
color="#A3A9AE"
hoverColor="#657077"
isFill={true}
@ -460,7 +460,7 @@ class SectionHeaderContent extends React.Component {
className="add-button"
directionX="right"
iconName="PlusIcon"
size={16}
size={17}
color="#657077"
getData={this.getContextOptionsPlus}
isDisabled={false}
@ -469,7 +469,7 @@ class SectionHeaderContent extends React.Component {
className="option-button"
directionX="right"
iconName="VerticalDotsIcon"
size={16}
size={17}
color="#A3A9AE"
getData={this.getContextOptionsFolder}
isDisabled={false}
@ -480,7 +480,7 @@ class SectionHeaderContent extends React.Component {
className="add-button"
directionX="right"
iconName="PlusIcon"
size={16}
size={17}
color="#657077"
getData={this.getContextOptionsPlus}
isDisabled={false}

View File

@ -410,6 +410,7 @@ class PureHome extends React.Component {
err && toastr.error(err);
this.onLoading(false);
this.setProgressVisible(false, timeout);
this.onClose();
};
setNewFilter = () => {

View File

@ -164,7 +164,7 @@ export function fetchFiles(folderId, filter, dispatch) {
dispatch(setFilesFilter(filterData));
dispatch(setFolders(data.folders));
dispatch(setFiles(data.files));
dispatch(setSelected("close"));
//dispatch(setSelected("close")); //TODO: need close but it`s crash first select, need new logic
return dispatch(setSelectedFolder({ folders: data.folders, ...data.current, pathParts: data.pathParts }));
})
}

View File

@ -48,7 +48,7 @@ class SectionHeaderContent extends React.Component {
<Wrapper>
<IconButton
iconName="ArrowPathIcon"
size="16"
size="17"
color="#A3A9AE"
hoverColor="#657077"
isFill={true}

View File

@ -400,7 +400,7 @@ const SectionHeaderContent = props => {
directionX="right"
title={t("Actions")}
iconName="VerticalDotsIcon"
size={16}
size={17}
color="#A3A9AE"
getData={getContextOptionsGroup}
isDisabled={false}
@ -423,7 +423,7 @@ const SectionHeaderContent = props => {
directionX="right"
title={t("Actions")}
iconName="PlusIcon"
size={16}
size={17}
color="#657077"
getData={getContextOptionsPlus}
isDisabled={false}

View File

@ -37,7 +37,7 @@ const SectionHeaderContent = props => {
<IconButton
iconName="ArrowPathIcon"
color="#A3A9AE"
size="16"
size="17"
hoverColor="#657077"
isFill={true}
onClick={onClickBack}

View File

@ -389,7 +389,7 @@ class SectionHeaderContent extends React.PureComponent {
<IconButton
iconName="ArrowPathIcon"
color="#A3A9AE"
size="16"
size="17"
hoverColor="#657077"
isFill={true}
onClick={this.onClickBack}
@ -405,7 +405,7 @@ class SectionHeaderContent extends React.PureComponent {
directionX="right"
title={t("Actions")}
iconName="VerticalDotsIcon"
size={16}
size={17}
color="#A3A9AE"
getData={contextOptions}
isDisabled={false}

View File

@ -45,7 +45,7 @@ const SectionHeaderContent = (props) => {
<IconButton
iconName='ArrowPathIcon'
color="#A3A9AE"
size="16"
size="17"
hoverColor="#657077"
isFill={true}
onClick={onClickBack}

View File

@ -33,11 +33,11 @@ const SectionHeaderContent = props => {
return (
<Wrapper>
<div style={{ width: "16px" }}>
<div style={{ width: "17px" }}>
<IconButton
iconName={"ArrowPathIcon"}
color="#A3A9AE"
size="16"
size="17"
hoverColor="#657077"
isFill={true}
onClick={onClickBack}