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

Merge branch 'develop' into hotfix/documents-bugfix

Browse Source 
# Conflicts:
#	web/ASC.Web.Common/src/components/PageLayout/index.js
#	web/ASC.Web.Components/package.json
This commit is contained in:
Artem Tarasov 2020-11-02 13:36:03 +03:00
commit 5f6e0e60e8
21 changed files with 692 additions and 600 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesRowContent.js
View File

@ -405,11 +405,11 @@ class FilesRowContent extends React.PureComponent {
fileAction,
isTrashFolder,
folders,
widthProp,
isLoading,
isMobile,
canWebEdit,
canConvert,
sectionWidth,
} = this.props;
const {
itemTitle,
@ -473,7 +473,7 @@ class FilesRowContent extends React.PureComponent {
/>
)}
<SimpleFilesRowContent
widthProp={widthProp}
sectionWidth={sectionWidth}
isMobile={isMobile}
sideColor={sideColor}
isFile={fileExst}
@ -505,7 +505,7 @@ class FilesRowContent extends React.PureComponent {
>
{fileExst}
</Text>
{canConvert && (
{canConvert && !isTrashFolder && (
<IconButton
onClick={this.setConvertDialogVisible}
iconName="FileActionsConvertIcon"
@ -513,14 +513,18 @@ class FilesRowContent extends React.PureComponent {
size="small"
isfill={true}
color="#A3A9AE"
hoverColor="#3B72A7"
/>
)}
{canWebEdit && (
<Icons.AccessEditIcon
{canWebEdit && !isTrashFolder && (
<IconButton
onClick={this.onFilesClick}
iconName="AccessEditIcon"
className="badge"
size="small"
isfill={true}
color="#A3A9AE"
hoverColor="#3B72A7"
/>
)}
{fileStatus === 32 && !isTrashFolder && (

32
products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js
View File

@ -15,13 +15,13 @@ import {
DragAndDrop,
Box,
Text,
utils,
} from "asc-web-components";
import EmptyFolderContainer from "./EmptyFolderContainer";
import FilesRowContent from "./FilesRowContent";
import FilesTileContent from "./FilesTileContent";
import TileContainer from "./TileContainer";
import Tile from "./Tile";
import {
api,
constants,
@ -103,6 +103,7 @@ const {
const { FilesFilter } = api;
const { FileAction } = constants;
const { Consumer } = utils.context;
const linkStyles = {
isHovered: true,
@ -745,6 +746,9 @@ class SectionBodyContent extends React.Component {
if (currentProps.editing !== nextProps.editing) {
return true;
}
if (currentProps.sectionWidth !== nextProps.sectionWidth) {
return true;
}
if (!isEqual(currentProps.data, nextProps.data)) {
return true;
}
@ -1500,7 +1504,6 @@ class SectionBodyContent extends React.Component {
currentMediaFileId,
viewAs,
t,
widthProp,
isMobile,
firstLoad,
filesList,
@ -1666,9 +1669,12 @@ class SectionBodyContent extends React.Component {
})}
</TileContainer>
) : (
<Consumer>
{(context) => (
<RowContainer draggable useReactWindow={false}>
{items.map((item) => {
const { checked, isFolder, value, contextOptions } = item;
const sectionWidth = context.sectionWidth;
const isEdit =
!!fileAction.type &&
editingId === item.id &&
@ -1682,14 +1688,22 @@ class SectionBodyContent extends React.Component {
),
}
: {};
const checkedProps = isEdit || item.id <= 0 ? {} : { checked };
const element = this.getItemIcon(item, isEdit || item.id <= 0);
const checkedProps =
isEdit || item.id <= 0 ? {} : { checked };
const element = this.getItemIcon(
item,
isEdit || item.id <= 0
);
const sharedButton =
isRecycleBin || isEdit || item.id <= 0
isRecycleBin || isEdit || item.id <= 0 || sectionWidth < 500
? null
: this.getSharedButton();
const displayShareButton =
widthProp < 500 ? "26px" : isRecycleBin ? "38px" : "96px";
sectionWidth < 500
? "26px"
: isRecycleBin
? "38px"
: "96px";
let classNameProp =
isFolder && item.access < 2 && !isRecycleBin
? { className: " dropable" }
@ -1708,7 +1722,7 @@ class SectionBodyContent extends React.Component {
value={value}
>
<SimpleFilesRow
widthProp={widthProp}
sectionWidth={sectionWidth}
key={item.id}
data={item}
element={element}
@ -1722,7 +1736,7 @@ class SectionBodyContent extends React.Component {
contextButtonSpacerWidth={displayShareButton}
>
<FilesRowContent
widthProp={widthProp}
sectionWidth={sectionWidth}
isMobile={isMobile}
item={item}
viewer={viewer}
@ -1738,6 +1752,8 @@ class SectionBodyContent extends React.Component {
})}
</RowContainer>
)}
</Consumer>
)}
{playlist.length > 0 && mediaViewerVisible && (
<MediaViewer
currentFileId={currentMediaFileId}

15
products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js
View File

@ -53,6 +53,7 @@ import {
const { isAdmin } = store.auth.selectors;
const { FilterType, FileAction } = constants;
const { tablet, desktop } = utils.device;
const { Consumer } = utils.context;
const StyledContainer = styled.div`
@media ${desktop} {
@ -126,9 +127,9 @@ const StyledContainer = styled.div`
@media ${tablet} {
& > div:first-child {
${(props) =>
props.isArticlePinned &&
props.width &&
css`
width: calc(100% - 240px);
width: ${props.width + 16 + "px"};
`}
position: absolute;
top: 56px;
@ -499,7 +500,12 @@ class SectionHeaderContent extends React.Component {
const menuItems = this.getMenuItems();
return (
<StyledContainer isHeaderVisible={isHeaderVisible}>
<Consumer>
{(context) => (
<StyledContainer
isHeaderVisible={isHeaderVisible}
width={context.sectionWidth}
>
{isHeaderVisible ? (
<div className="group-button-menu-container">
<GroupButtonsMenu
@ -512,6 +518,7 @@ class SectionHeaderContent extends React.Component {
closeTitle={t("CloseButton")}
onClose={this.onClose}
selected={menuItems[0].label}
sectionWidth={context.sectionWidth}
/>
</div>
) : (
@ -630,6 +637,8 @@ class SectionHeaderContent extends React.Component {
/>
)}
</StyledContainer>
)}
</Consumer>
);
}
}

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

@ -47,19 +47,9 @@ const i18n = createI18N({
});
const { changeLanguage } = utils;
const { FilesFilter } = api;
const { getSettingsHomepage } = store.auth.selectors;
const { getSettingsHomepage, getIsLoaded } = store.auth.selectors;
class PureHome extends React.Component {
constructor(props) {
super(props);
this.state = {
overwriteSetting: false,
uploadOriginalFormatSetting: false,
hideWindowSetting: false,
};
}
componentDidMount() {
const { fetchFiles, homepage, setIsLoading, setFirstLoad } = this.props;
@ -164,17 +154,6 @@ class PureHome extends React.Component {
startUpload(files, folderId, t);
};
onChangeOverwrite = () =>
this.setState({ overwriteSetting: !this.state.overwriteSetting });
onChangeOriginalFormat = () =>
this.setState({
uploadOriginalFormatSetting: !this.state.uploadOriginalFormatSetting,
});
onChangeWindowVisible = () =>
this.setState({ hideWindowSetting: !this.state.hideWindowSetting });
componentDidUpdate(prevProps) {
if (this.props.isLoading !== prevProps.isLoading) {
if (this.props.isLoading) {
@ -187,53 +166,20 @@ class PureHome extends React.Component {
render() {
console.log("Home render");
const {
// overwriteSetting,
// uploadOriginalFormatSetting,
// hideWindowSetting
} = this.state;
const {
progressData,
viewAs,
convertDialogVisible,
fileActionId,
isRecycleBin,
isLoaded,
} = this.props;
// const progressBarContent = (
// <div>
// <Checkbox
// onChange={this.onChangeOverwrite}
// isChecked={overwriteSetting}
// label={t("OverwriteSetting")}
// />
// <Checkbox
// onChange={this.onChangeOriginalFormat}
// isChecked={uploadOriginalFormatSetting}
// label={t("UploadOriginalFormatSetting")}
// />
// <Checkbox
// onChange={this.onChangeWindowVisible}
// isChecked={hideWindowSetting}
// label={t("HideWindowSetting")}
// />
// </div>
// );
return (
<>
{convertDialogVisible && (
<ConvertDialog visible={convertDialogVisible} />
)}
{/* <RequestLoader
visible={isLoading}
zIndex={256}
loaderSize="16px"
loaderColor={"#999"}
label={`${t("LoadingProcessing")} ${t("LoadingDescription")}`}
fontSize="12px"
fontColor={"#999"}
/> */}
<PageLayout
withBodyScroll
withBodyAutoFocus={!isMobile}
@ -247,6 +193,7 @@ class PureHome extends React.Component {
progressBarLabel={progressData.label}
viewAs={viewAs}
hideAside={!!fileActionId || progressData.visible}
isLoaded={isLoaded}
>
<PageLayout.ArticleHeader>
<ArticleHeaderContent />
@ -314,6 +261,7 @@ function mapStateToProps(state) {
isLoading: getIsLoading(state),
homepage: getSettingsHomepage(state),
dragging: getDragging(state),
isLoaded: getIsLoaded(state),
};
}

16
products/ASC.Files/Client/src/components/panels/NewFilesPanel/index.js
View File

@ -38,8 +38,8 @@ import {
setTreeFolders,
setUpdateTree,
setNewRowItems,
addFileToRecentlyViewed
setIsLoading,
addFileToRecentlyViewed,
} from "../../../store/files/actions";
import { createI18N } from "../../../helpers/i18n";
const i18n = createI18N({
@ -136,7 +136,12 @@ class NewFilesPanelComponent extends React.Component {
onFilesClick = (item) => {
const { id, fileExst, viewUrl, fileType } = item;
const { filter, setMediaViewerData, fetchFiles, addFileToRecentlyViewed } = this.props;
const {
filter,
setMediaViewerData,
fetchFiles,
addFileToRecentlyViewed,
} = this.props;
if (!fileExst) {
fetchFiles(id, filter).catch((err) => toastr.error(err));
@ -147,7 +152,7 @@ class NewFilesPanelComponent extends React.Component {
if (canEdit) {
return addFileToRecentlyViewed(id)
.then(() => console.log("Pushed to recently viewed"))
.catch(e => console.error(e))
.catch((e) => console.error(e))
.finally(window.open(`./doceditor?fileId=${id}`, "_blank"));
}
@ -317,5 +322,6 @@ export default connect(mapStateToProps, {
setUpdateTree,
setNewRowItems,
fetchFiles,
addFileToRecentlyViewed
addFileToRecentlyViewed,
setIsLoading,
})(withRouter(NewFilesPanel));

14
products/ASC.Files/Server/Controllers/FilesController.cs
View File

@ -227,6 +227,20 @@ namespace ASC.Api.Documents
return result.Select(r => FilesControllerHelperInt.GetFolder(r, userIdOrGroupId, filterType, withsubfolders));
}
[Read("@privacy")]
public FolderContentWrapper<int> GetPrivacyFolder(Guid userIdOrGroupId, FilterType filterType, bool withsubfolders)
{
if (!IsAvailablePrivacyRoomSettings()) throw new System.Security.SecurityException();
return FilesControllerHelperInt.GetFolder(GlobalFolderHelper.FolderPrivacy, userIdOrGroupId, filterType, withsubfolders);
}
[Read("@privacy/available")]
public bool IsAvailablePrivacyRoomSettings()
{
return PrivacyRoomSettings.IsAvailable(TenantManager);
}
/// <summary>
/// Returns the detailed list of files and folders located in the current user 'My Documents' section
/// </summary>

19
products/ASC.People/Client/src/components/pages/Home/Section/Body/index.js
View File

@ -39,6 +39,7 @@ const i18n = createI18N({
page: "Home",
localesPath: "pages/Home",
});
const { Consumer } = utils.context;
const { isArrayEqual } = utils.array;
const { getSettings } = store.auth.selectors;
const { setIsLoaded } = store.auth.actions;
@ -356,6 +357,9 @@ class SectionBodyContent extends React.PureComponent {
if (currentProps.status !== nextProps.status) {
return true;
}
if (currentProps.sectionWidth !== nextProps.sectionWidth) {
return true;
}
if (!isEqual(currentProps.data, nextProps.data)) {
return true;
}
@ -377,7 +381,7 @@ class SectionBodyContent extends React.PureComponent {
widthProp,
isMobile,
selectGroup,
isLoading
isLoading,
} = this.props;
const { dialogsVisible, user } = this.state;
@ -386,6 +390,8 @@ class SectionBodyContent extends React.PureComponent {
<Loaders.Rows />
) : peopleList.length > 0 ? (
<>
<Consumer>
{(context) => (
<RowContainer useReactWindow={false}>
{peopleList.map((man) => {
const {
@ -397,10 +403,12 @@ class SectionBodyContent extends React.PureComponent {
status,
options,
} = man;
const sectionWidth = context.sectionWidth;
const contextOptionsProps =
options && options.length > 0
? { contextOptions: this.getUserContextOptions(options, id) }
? {
contextOptions: this.getUserContextOptions(options, id),
}
: {};
const checkedProps = checked !== null ? { checked } : {};
@ -424,7 +432,7 @@ class SectionBodyContent extends React.PureComponent {
{...checkedProps}
{...contextOptionsProps}
needForUpdate={this.needForUpdate}
widthProp={widthProp}
sectionWidth={sectionWidth}
>
<UserContent
isMobile={isMobile}
@ -433,11 +441,14 @@ class SectionBodyContent extends React.PureComponent {
history={history}
settings={settings}
selectGroup={selectGroup}
sectionWidth={sectionWidth}
/>
</Row>
);
})}
</RowContainer>
)}
</Consumer>
{dialogsVisible.changeEmail && (
<ChangeEmailDialog

8
products/ASC.People/Client/src/components/pages/Home/Section/Body/userContent.js
View File

@ -13,7 +13,7 @@ import { connect } from "react-redux";
const getFormattedGroups = (user, selectGroup) => {
let temp = [];
const groups = user.groups;
const linkColor = "#A3A9AE";
const linkColor = user.statusType === "pending" ? "#D0D5DA" : "#A3A9AE";
if (!groups) temp.push({ key: 0, label: "" });
@ -67,6 +67,7 @@ const UserContent = ({
selectGroup,
widthProp,
isMobile,
sectionWidth,
}) => {
const { userName, displayName, title, mobilePhone, email, statusType } = user;
const groups = getFormattedGroups(user, selectGroup);
@ -87,14 +88,15 @@ const UserContent = ({
email,
]);
const nameColor = "#333";
const sideInfoColor = "#A3A9AE";
const nameColor = statusType === "pending" ? "#A3A9AE" : "#333333";
const sideInfoColor = statusType === "pending" ? "#D0D5DA" : "#A3A9AE";
return (
<RowContent
widthProp={widthProp}
isMobile={isMobile}
sideColor={sideInfoColor}
sectionWidth={sectionWidth}
>
<Link
containerWidth="28%"

19
products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js
View File

@ -36,6 +36,7 @@ import {
ChangeUserTypeDialog,
} from "../../../../dialogs";
const { tablet, desktop } = utils.device;
const { Consumer } = utils.context;
const { isAdmin } = store.auth.selectors;
const { EmployeeType, EmployeeStatus } = constants;
@ -57,9 +58,9 @@ const StyledContainer = styled.div`
@media ${tablet} {
& > div:first-child {
${(props) =>
props.isArticlePinned &&
props.width &&
css`
width: calc(100% - 240px);
width: ${props.width + 16 + "px"};
`}
position: absolute;
top: 56px;
@ -114,14 +115,10 @@ const SectionHeaderContent = (props) => {
isAdmin,
t,
history,
customNames,
homepage,
deleteGroup,
selection,
hasAnybodySelected,
hasUsersToMakeEmployees,
hasUsersToMakeGuests,
@ -129,7 +126,6 @@ const SectionHeaderContent = (props) => {
hasUsersToDisable,
hasUsersToInvite,
hasUsersToRemove,
isLoaded,
} = props;
@ -351,12 +347,12 @@ const SectionHeaderContent = (props) => {
onInvitationDialogClick /* , onSentInviteAgain */,
]);
const isArticlePinned = window.localStorage.getItem("asc_article_pinned_key");
return (
<Consumer>
{(context) => (
<StyledContainer
isHeaderVisible={isHeaderVisible}
isArticlePinned={isArticlePinned}
width={context.sectionWidth}
>
{employeeDialogVisible && (
<ChangeUserTypeDialog
@ -414,6 +410,7 @@ const SectionHeaderContent = (props) => {
closeTitle={t("CloseButton")}
onClose={onClose}
selected={menuItems[0].label}
sectionWidth={context.sectionWidth}
/>
</div>
) : (
@ -477,6 +474,8 @@ const SectionHeaderContent = (props) => {
</div>
)}
</StyledContainer>
)}
</Consumer>
);
};

15
products/ASC.People/Client/src/components/pages/Home/index.js
View File

@ -25,7 +25,7 @@ const i18n = createI18N({
localesPath: "pages/Home",
});
const { changeLanguage } = utils;
const { isAdmin } = store.auth.selectors;
const { isAdmin, getIsLoaded, getOrganizationName } = store.auth.selectors;
class PureHome extends React.Component {
constructor(props) {
@ -101,10 +101,14 @@ class PureHome extends React.Component {
selected,
} = this.state;
const { isAdmin } = this.props;
const { isAdmin, isLoaded } = this.props;
return (
<PageLayout withBodyScroll={true} withBodyAutoFocus={!isMobile}>
<PageLayout
withBodyScroll={true}
withBodyAutoFocus={!isMobile}
isLoaded={isLoaded}
>
<PageLayout.ArticleHeader>
<ArticleHeaderContent />
</PageLayout.ArticleHeader>
@ -174,7 +178,6 @@ Home.propTypes = {
};
function mapStateToProps(state) {
const { isLoaded, settings } = state.auth;
const { users, selection, selected, selectedGroup, groups } = state.people;
return {
users,
@ -182,10 +185,10 @@ function mapStateToProps(state) {
selected,
selectedGroup,
groups,
isLoaded,
organizationName: settings.organizationName,
organizationName: getOrganizationName(state),
isAdmin: isAdmin(state),
isLoading: getIsLoading(state),
isLoaded: getIsLoaded(state),
};
}

1
web/ASC.Web.Common/package.json
View File

@ -30,6 +30,7 @@
"lodash": "4.17.19",
"lodash-es": "4.17.15",
"moment": "^2.24.0",
"re-resizable": "^6.7.0",
"react-content-loader": "^5.1.2",
"react-device-detect": "^1.11.14",
"react-hammerjs": "^1.0.1",

6
web/ASC.Web.Common/src/components/Main/index.js
View File

@ -1,9 +1,11 @@
import React from "react";
import styled from "styled-components";
import { isIOS } from "react-device-detect";
import { isIOS, isFirefox } from "react-device-detect";
const StyledMain = styled.main`
height: ${isIOS ? "calc(var(--vh, 1vh) * 100)" : "calc(100vh - 56px)"};
height: ${isIOS && !isFirefox
? "calc(var(--vh, 1vh) * 100)"
: "calc(100vh - 56px)"};
width: 100vw;
z-index: 0;
display: flex;

66
web/ASC.Web.Common/src/components/PageLayout/index.js
View File

@ -6,7 +6,6 @@ import store from "../../store";
import { withTranslation } from "react-i18next";
import i18n from "./i18n";
import { ARTICLE_PINNED_KEY } from "../../constants";
import Article from "./sub-components/article";
import SubArticleHeader from "./sub-components/article-header";
import SubArticleMainButton from "./sub-components/article-main-button";
@ -21,8 +20,10 @@ import SubSectionPaging from "./sub-components/section-paging";
import SectionToggler from "./sub-components/section-toggler";
import { changeLanguage } from "../../utils";
import ReactResizeDetector from "react-resize-detector";
const { getLanguage } = store.auth.selectors;
const { size } = utils.device;
const { Provider } = utils.context;
function ArticleHeader() {
return null;
@ -105,8 +106,7 @@ class PageLayoutComponent extends React.Component {
}
orientationChangeHandler = () => {
const vh = (window.innerHeight - 57) * 0.01;
document.documentElement.style.setProperty("--vh", `${vh}px`);
this.updateMainHeight();
const isValueExist = !!localStorage.getItem(ARTICLE_PINNED_KEY);
const isEnoughWidth = screen.availWidth > size.smallTablet;
@ -119,6 +119,41 @@ class PageLayoutComponent extends React.Component {
}
};
updateMainHeight = () => {
const intervalTime = 100;
const endTimeoutTime = 1000;
let interval, timeout, lastInnerHeight, noChangeCount;
const updateHeight = () => {
clearInterval(interval);
clearTimeout(timeout);
interval = null;
timeout = null;
const vh = (window.innerHeight - 57) * 0.01;
document.documentElement.style.setProperty("--vh", `${vh}px`);
};
interval = setInterval(() => {
if (window.innerHeight === lastInnerHeight) {
noChangeCount++;
if (noChangeCount === intervalTime) {
updateHeight();
}
} else {
lastInnerHeight = window.innerHeight;
noChangeCount = 0;
}
});
timeout = setTimeout(() => {
updateHeight();
}, endTimeoutTime);
};
backdropClick = () => {
this.setState({
isBackdropVisible: false,
@ -155,10 +190,6 @@ class PageLayoutComponent extends React.Component {
});
};
onResize = (width, height) => {
//console.log(`onResize height: ${height}, width: ${width}`);
};
render() {
const {
onDrop,
@ -172,6 +203,7 @@ class PageLayoutComponent extends React.Component {
withBodyAutoFocus,
withBodyScroll,
children,
isLoaded,
} = this.props;
let articleHeaderContent = null;
@ -248,6 +280,7 @@ class PageLayoutComponent extends React.Component {
<Article
visible={this.state.isArticleVisible}
pinned={this.state.isArticlePinned}
isLoaded={isLoaded}
>
{isArticleHeaderAvailable && (
<SubArticleHeader>
@ -281,16 +314,20 @@ class PageLayoutComponent extends React.Component {
)}
{isSectionAvailable && (
<ReactResizeDetector
onResize={this.onResize}
refreshRate={200}
refreshRate={100}
refreshMode="debounce"
refreshOptions={{ trailing: true }}
>
{({ width }) => (
<Provider
value={{
sectionWidth: width,
}}
>
<Section widthProp={width}>
{isSectionHeaderAvailable && (
<SubSectionHeader
isArticlePinned={this.state.isArticlePinned}
borderBottom={this.props.headerBorderBottom}
>
{sectionHeaderContent
? sectionHeaderContent.props.children
@ -324,10 +361,7 @@ class PageLayoutComponent extends React.Component {
)}
<SubSectionBodyContent>
{sectionBodyContent
? React.cloneElement(
sectionBodyContent.props.children,
{ widthProp: width }
)
? sectionBodyContent.props.children
: null}
</SubSectionBodyContent>
{isSectionPagingAvailable && (
@ -356,6 +390,7 @@ class PageLayoutComponent extends React.Component {
/>
)}
</Section>
</Provider>
)}
</ReactResizeDetector>
)}
@ -369,7 +404,6 @@ PageLayoutComponent.propTypes = {
withBodyScroll: PropTypes.bool,
withBodyAutoFocus: PropTypes.bool,
t: PropTypes.func,
showProgressBar: PropTypes.bool,
progressBarValue: PropTypes.number,
progressBarDropDownContent: PropTypes.any,
@ -378,6 +412,8 @@ PageLayoutComponent.propTypes = {
setSelections: PropTypes.func,
uploadFiles: PropTypes.bool,
hideAside: PropTypes.bool,
isLoaded: PropTypes.bool,
viewAs: PropTypes.string,
};
PageLayoutComponent.defaultProps = {

84
web/ASC.Web.Common/src/components/PageLayout/sub-components/article.js
View File

@ -1,64 +1,92 @@
import React from "react";
import styled from "styled-components";
import styled, { css } from "styled-components";
import PropTypes from "prop-types";
import { utils } from "asc-web-components";
import { Resizable } from "re-resizable";
import { isMobile } from "react-device-detect";
const { tablet } = utils.device;
const StyledArticle = styled.article`
@media ${tablet} {
${(props) =>
props.visible &&
!props.pinned &&
css`
position: fixed;
z-index: 400;
`}
}
.resizable-block {
padding: 0 24px;
background: #f8f9f9;
min-width: 265px;
height: 100% !important;
max-width: ${(props) => (props.isLoaded ? "calc(100vw - 368px)" : "265px")};
box-sizing: border-box;
overflow: hidden auto;
display: flex;
flex-direction: column;
width: 264px;
min-width: 264px;
/*transition: width 0.3s ease-in-out;*/
overflow: hidden auto;
box-sizing: border-box;
resize: horizontal;
.resizable-border {
div {
cursor: ew-resize !important;
}
}
@media ${tablet} {
padding: 0 16px;
${(props) =>
props.visible
? props.pinned
? `
display: flex;
width: 240px;
min-width: 240px;
z-index: 400;
`
: `
width: 240px;
position: fixed !important;
width: 240px !important;
min-width: 240px;
max-width: 240px;
position: fixed;
height: 100%;
height: 100% !important;
top: 0;
left: 0;
z-index: 400;
resize: none;
.resizable-border {
display: none;
}
`
: `
width: 240px;
min-width: 240px;
max-width: 240px;
position: fixed;
height: 100%;
top: 0;
left: -240px;
z-index: 400;
resize: none;
display: none;
`}
}
}
`;
class Article extends React.Component {
/*shouldComponentUpdate() {
return false;
}*/
render() {
//console.log("PageLayout Article render");
return <StyledArticle {...this.props} />;
//console.log("PageLayout Article render", this.props);
const { children, ...rest } = this.props;
const enable = {
top: false,
right: !isMobile,
bottom: false,
left: false,
};
return (
<StyledArticle {...rest}>
<Resizable
enable={enable}
className="resizable-block"
handleWrapperClass="resizable-border"
>
{children}
</Resizable>
</StyledArticle>
);
}
}
Article.propTypes = {
children: PropTypes.any,
};
export default Article;

6
web/ASC.Web.Common/src/components/PageLayout/sub-components/section.js
View File

@ -19,8 +19,7 @@ const StyledSection = styled.section`
flex-grow: 1;
display: flex;
flex-direction: column;
min-width: 344px;
/*width: ${(props) => `${props.widthProp}px`};*/
.layout-progress-bar {
bottom: 0;
position: sticky;
@ -38,9 +37,6 @@ const StyledSection = styled.section`
.section-body_filter {
display: none;
}
/*${(props) => props.widthProp < 738 && tabletProps};*/
@media ${tablet} {
padding: 0 0 0 16px;
${tabletProps};

12
web/ASC.Web.Common/yarn.lock
View File

@ -6017,6 +6017,11 @@ fast-levenshtein@~2.0.6:
resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
fast-memoize@^2.5.1:
version "2.5.2"
resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.5.2.tgz#79e3bb6a4ec867ea40ba0e7146816f6cdce9b57e"
integrity sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==
fastparse@^1.1.1, fastparse@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
@ -10445,6 +10450,13 @@ rc-util@^4.15.3, rc-util@^4.5.1:
react-lifecycles-compat "^3.0.4"
shallowequal "^1.1.0"
re-resizable@^6.7.0:
version "6.7.0"
resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.7.0.tgz#63324f0d2c8cd24fedda6bba5d638bd09c63ee6b"
integrity sha512-uBrV59SZgxmZunL7MWoSnEKEfQW+GfevJqWqnA0slTe54Xbdfn1SgvUCP/C7Ak3hHkz3dSHN8xwpyapdx2Sgrw==
dependencies:
fast-memoize "^2.5.1"
react-autosize-textarea@^7.0.0:
version "7.1.0"
resolved "https://registry.yarnpkg.com/react-autosize-textarea/-/react-autosize-textarea-7.1.0.tgz#902c84fc395a689ca3a484dfb6bc2be9ba3694d1"

31
web/ASC.Web.Components/src/components/group-buttons-menu/index.js
View File

@ -16,8 +16,7 @@ const StyledGroupButtonsMenu = styled.div`
height: 57px;
list-style: none;
padding: 0 18px 19px 0;
width: ${(props) =>
props.containerWidth ? props.containerWidth + "px" : "100%"};
width: 100%;
white-space: nowrap;
display: ${(props) => (props.visible ? "block" : "none")};
z-index: 189;
@ -77,7 +76,7 @@ class GroupButtonsMenu extends React.Component {
visible: props.visible,
};
this.throttledResize = throttle(this.updateMenu, 300);
this.throttledResize = throttle(this.updateMenu, 200);
}
closeMenu = (e) => {
@ -129,6 +128,7 @@ class GroupButtonsMenu extends React.Component {
}
if (
this.props.sectionWidth !== prevProps.sectionWidth ||
this.state.priorityItems.length !== prevState.priorityItems.length ||
this.state.moreItems.length !== prevState.moreItems.length
) {
@ -150,17 +150,20 @@ class GroupButtonsMenu extends React.Component {
};
updateMenu = () => {
const moreMenuElement = document.getElementById("moreMenu");
const groupMenuOuterElement = document.getElementById("groupMenuOuter");
const { sectionWidth } = this.props;
let groupMenuOuterWidth = sectionWidth;
const screenWidth = window.innerWidth;
if (!sectionWidth) {
const groupMenuOuterElement = document.getElementById("groupMenuOuter");
const groupMenuOuterValues =
groupMenuOuterElement && groupMenuOuterElement.getBoundingClientRect();
const screenWidth = window.innerWidth;
const xWidth = groupMenuOuterValues && groupMenuOuterValues.x;
groupMenuOuterWidth = screenWidth - xWidth;
}
const moreMenuElement = document.getElementById("moreMenu");
const moreMenuWidth =
moreMenuElement && moreMenuElement.getBoundingClientRect().width;
const xWidth = groupMenuOuterValues && groupMenuOuterValues.x;
const groupMenuOuterWidth = screenWidth - xWidth;
const visibleItemsCount = this.countMenuItems(
this.widthsArray,
groupMenuOuterWidth,
@ -177,7 +180,6 @@ class GroupButtonsMenu extends React.Component {
this.setState({
priorityItems: priorityItems,
moreItems: moreItems,
width: groupMenuOuterWidth,
});
};
@ -196,14 +198,10 @@ class GroupButtonsMenu extends React.Component {
isIndeterminate,
onChange,
} = this.props;
const { priorityItems, moreItems, visible, width } = this.state;
const { priorityItems, moreItems, visible } = this.state;
return (
<StyledGroupButtonsMenu
id="groupMenuOuter"
visible={visible}
containerWidth={width}
>
<StyledGroupButtonsMenu id="groupMenuOuter" visible={visible}>
<GroupMenuWrapper id="groupMenu">
{priorityItems.map((item, i) => (
<GroupButton
@ -261,6 +259,7 @@ GroupButtonsMenu.propTypes = {
visible: PropTypes.bool,
moreLabel: PropTypes.string,
closeTitle: PropTypes.string,
sectionWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
};
GroupButtonsMenu.defaultProps = {

14
web/ASC.Web.Components/src/components/row-content/index.js
View File

@ -182,7 +182,7 @@ const RowContent = (props) => {
style,
sideColor,
onClick,
widthProp,
sectionWidth,
isMobile,
} = props;
@ -197,18 +197,18 @@ const RowContent = (props) => {
id={id}
onClick={onClick}
style={style}
widthProp={widthProp}
widthProp={sectionWidth}
isMobile={isMobile}
>
<MainContainerWrapper
disableSideInfo={disableSideInfo}
mainContainerWidth={mainContainerWidth}
widthProp={widthProp}
widthProp={sectionWidth}
isMobile={isMobile}
>
<MainContainer
className="rowMainContainer"
widthProp={widthProp}
widthProp={sectionWidth}
isMobile={isMobile}
>
{children[0]}
@ -225,7 +225,7 @@ const RowContent = (props) => {
containerMinWidth={
element.props && element.props.containerMinWidth
}
widthProp={widthProp}
widthProp={sectionWidth}
isMobile={isMobile}
>
{element}
@ -236,7 +236,7 @@ const RowContent = (props) => {
{!disableSideInfo && (
<TabletSideInfo
color={sideColor}
widthProp={widthProp}
widthProp={sectionWidth}
isMobile={isMobile}
>
{sideInfo}
@ -254,7 +254,7 @@ RowContent.propTypes = {
onClick: PropTypes.func,
sideColor: PropTypes.string,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
widthProp: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
sectionWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
isMobile: PropTypes.bool,
};

8
web/ASC.Web.Components/src/components/row/index.js
View File

@ -118,7 +118,7 @@ class Row extends React.Component {
indeterminate,
onSelect,
selectItem,
widthProp,
sectionWidth,
} = this.props;
const renderCheckbox = Object.prototype.hasOwnProperty.call(
@ -133,7 +133,7 @@ class Row extends React.Component {
const renderContentElement =
Object.prototype.hasOwnProperty.call(this.props, "contentElement") &&
widthProp > 500;
sectionWidth > 500;
const renderContext =
Object.prototype.hasOwnProperty.call(this.props, "contextOptions") &&
@ -192,7 +192,7 @@ Row.propTypes = {
checked: PropTypes.bool,
children: PropTypes.element,
className: PropTypes.string,
contentElement: PropTypes.element,
contentElement: PropTypes.any,
contextButtonSpacerWidth: PropTypes.string,
contextOptions: PropTypes.array,
data: PropTypes.object,
@ -203,7 +203,7 @@ Row.propTypes = {
onSelect: PropTypes.func,
selectItem: PropTypes.func,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
widthProp: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
sectionWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};
Row.defaultProps = {

5
web/ASC.Web.Components/src/utils/context.js Normal file
View File

@ -0,0 +1,5 @@
import React from "react";
const { Provider, Consumer } = React.createContext();
export { Provider, Consumer };

3
web/ASC.Web.Components/src/utils/index.js
View File

@ -2,5 +2,6 @@ import * as array from "./array";
import * as event from "./event";
import * as device from "./device";
import * as email from "./email";
import * as context from "./context";
export default { array, event, device, email };
export default { array, event, device, email, context };