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

Merge branch 'release/v1.2' of github.com:ONLYOFFICE/AppServer into release/v1.2

Browse Source
This commit is contained in:
Vlada Gazizova 2022-05-04 19:08:43 +03:00
commit 664135b164
30 changed files with 332 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
packages/asc-web-common/components/AdvancedSelector/AdvancedSelector.js
View File

@ -2,19 +2,14 @@ import React from "react";
import PropTypes from "prop-types";
import styled, { css } from "styled-components";
import { isMobileOnly } from "react-device-detect";
import { mobile } from "@appserver/components/utils/device";
import { isMobile } from "react-device-detect";
import { tablet } from "@appserver/components/utils/device";
import { Base } from "@appserver/components/themes";
import Selector from "./sub-components/Selector";
import Backdrop from "@appserver/components/backdrop";
const mobileView = css`
top: 64px;
width: 100% !important;
height: calc(100% - 64px) !important;
`;
import CrossIcon from "@appserver/components/public/static/images/cross.react.svg";
const StyledBlock = styled.div`
position: fixed;
@ -32,11 +27,22 @@ const StyledBlock = styled.div`
background: ${(props) => props.theme.filterInput.filter.background};
@media ${mobile} {
${mobileView}
@media ${tablet} {
max-width: calc(100% - 69px);
}
${isMobileOnly && mobileView}
${isMobile &&
css`
max-width: calc(100% - 69px);
`}
@media (max-width: 428px) {
bottom: 0;
top: unset;
height: calc(100% - 64px);
width: 100%;
max-width: 100%;
}
.people-selector {
height: 100%;
@ -51,6 +57,48 @@ const StyledBlock = styled.div`
StyledBlock.defaultProps = { theme: Base };
const StyledControlContainer = styled.div`
display: flex;
width: 24px;
height: 24px;
position: absolute;
border-radius: 100px;
cursor: pointer;
align-items: center;
justify-content: center;
z-index: 450;
top: 14px;
left: -34px;
${isMobile &&
css`
top: 14px;
`}
@media (max-width: 428px) {
top: -34px;
right: 10px;
left: unset;
}
`;
StyledControlContainer.defaultProps = { theme: Base };
const StyledCrossIcon = styled(CrossIcon)`
width: 17px;
height: 17px;
z-index: 455;
path {
fill: ${(props) => props.theme.catalog.control.fill};
}
`;
StyledCrossIcon.defaultProps = { theme: Base };
class AdvancedSelector extends React.Component {
constructor(props) {
super(props);
@ -83,6 +131,10 @@ class AdvancedSelector extends React.Component {
/>
<StyledBlock>
<Selector {...this.props} />
<StyledControlContainer onClick={this.onClose}>
<StyledCrossIcon />
</StyledControlContainer>
</StyledBlock>
</>
)}

2
packages/asc-web-common/components/AdvancedSelector/sub-components/Selector.js
View File

@ -114,7 +114,7 @@ const Selector = (props) => {
if (groups.length === 1) return setGroupHeader(newGroupList[0]);
selectedOptions.forEach((option) => {
option.groups.forEach((group) => {
option?.groups?.forEach((group) => {
const groupIndex = newGroupList.findIndex(
(newGroup) => group === newGroup.id
);

12
packages/asc-web-common/components/FilterInput/sub-components/FilterBlock.js
View File

@ -201,6 +201,10 @@ const FilterBlock = ({
headerLabel={headerLabel}
/>
)}
<StyledControlContainer onClick={hideFilterBlock}>
<StyledCrossIcon />
</StyledControlContainer>
</StyledFilterBlock>
</>
) : (
@ -242,6 +246,10 @@ const FilterBlock = ({
onClick={onFilterAction}
/>
</StyledFilterBlockFooter>
<StyledControlContainer onClick={hideFilterBlock}>
<StyledCrossIcon />
</StyledControlContainer>
</StyledFilterBlock>
)}
@ -250,10 +258,6 @@ const FilterBlock = ({
withBackground={true}
onClick={hideFilterBlock}
/>
<StyledControlContainer onClick={hideFilterBlock}>
<StyledCrossIcon />
</StyledControlContainer>
</>
);
};

79
packages/asc-web-common/components/FilterInput/sub-components/StyledFilterBlock.js
View File

@ -1,19 +1,12 @@
import Text from "@appserver/components/text";
import styled, { css } from "styled-components";
import { isMobileOnly } from "react-device-detect";
import { isMobileOnly, isMobile } from "react-device-detect";
import ToggleButton from "@appserver/components/toggle-button";
import { mobile } from "@appserver/components/utils/device";
import { mobile, tablet } from "@appserver/components/utils/device";
import { Base } from "@appserver/components/themes";
import CrossIcon from "@appserver/components/public/static/images/cross.react.svg";
const mobileView = css`
top: 64px;
width: 100% !important;
height: calc(100% - 64px) !important;
`;
const StyledFilterBlock = styled.div`
position: fixed;
top: 0;
@ -29,11 +22,22 @@ const StyledFilterBlock = styled.div`
background: ${(props) => props.theme.filterInput.filter.background};
@media ${mobile} {
${mobileView}
@media ${tablet} {
max-width: calc(100% - 69px);
}
${isMobileOnly && mobileView}
${isMobile &&
css`
max-width: calc(100% - 69px);
`}
@media (max-width: 428px) {
bottom: 0;
top: unset;
height: calc(100% - 64px);
width: 100%;
max-width: 100%;
}
.people-selector {
height: 100%;
@ -247,62 +251,51 @@ const StyledFilterBlockFooter = styled.div`
align-items: center;
justify-content: center;
@media ${mobile} {
@media (max-width: 428px) {
width: 100%;
}
${isMobileOnly &&
css`
width: 100%;
`}
`;
StyledFilterBlockFooter.defaultProps = { theme: Base };
const StyledControlContainer = styled.div`
background: ${(props) => props.theme.catalog.control.background};
display: flex;
width: 24px;
height: 24px;
position: fixed;
top: 30px;
right: 10px;
position: absolute;
border-radius: 100px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
display: none;
z-index: 450;
@media ${mobile} {
display: flex;
}
top: 14px;
left: -34px;
${isMobileOnly &&
${isMobile &&
css`
display: flex;
top: 14px;
`}
@media (max-width: 428px) {
top: -34px;
right: 10px;
left: unset;
}
`;
StyledControlContainer.defaultProps = { theme: Base };
const StyledCrossIcon = styled(CrossIcon)`
width: 12px;
height: 12px;
width: 17px;
height: 17px;
z-index: 455;
path {
fill: ${(props) => props.theme.catalog.control.fill};
}
display: none;
@media ${mobile} {
display: flex;
}
${isMobileOnly &&
css`
display: flex;
`}
`;
StyledCrossIcon.defaultProps = { theme: Base };

3
packages/asc-web-common/components/Headline/StyledHeadline.js
View File

@ -18,7 +18,8 @@ const weight = {
const StyledHeading = styled(Heading)`
margin: 0;
line-height: 50px;
font-size: ${(props) => size[props.headlineType]};
font-size: ${(props) =>
props.fontSize ? props.fontSize : size[props.headlineType]};
font-weight: ${(props) => weight[props.headlineType]};
color: ${(props) => (props.color ? props.color : props.theme.color)};
${NoUserSelect}

42
packages/asc-web-common/components/Navigation/sub-components/control-btn.js
View File

@ -103,15 +103,18 @@ const ControlButtons = ({
<StyledContainer isDropBox={isDropBox}>
{!isRootFolder && canCreate ? (
<>
<ContextMenuButton
className="add-button"
directionX="right"
iconName="images/plus.svg"
size={15}
isFill
getData={getContextOptionsPlus}
isDisabled={false}
/>
{!isMobile && (
<ContextMenuButton
zIndex={402}
className="add-button"
directionX="right"
iconName="images/plus.svg"
size={15}
isFill
getData={getContextOptionsPlus}
isDisabled={false}
/>
)}
{!personal && (
<ContextMenuButton
className="option-button"
@ -142,15 +145,18 @@ const ControlButtons = ({
</>
) : canCreate ? (
<>
<ContextMenuButton
className="add-button"
directionX="right"
iconName="images/plus.svg"
size={15}
isFill
getData={getContextOptionsPlus}
isDisabled={false}
/>
{!isMobile && (
<ContextMenuButton
zIndex={402}
className="add-button"
directionX="right"
iconName="images/plus.svg"
size={15}
isFill
getData={getContextOptionsPlus}
isDisabled={false}
/>
)}
<StyledInfoPanelToggleWrapper
isRootFolder={isRootFolder}
isInfoPanelVisible={isInfoPanelVisible}

10
packages/asc-web-components/backdrop/index.js
View File

@ -30,7 +30,7 @@ class Backdrop extends React.Component {
}
checkingExistBackdrop = () => {
const { visible, isAside, withBackground } = this.props;
const { visible, isAside, withBackground, isContextMenu } = this.props;
if (visible) {
const isTablet = window.innerWidth < 1024;
const backdrops = document.querySelectorAll(".backdrop-active");
@ -38,7 +38,8 @@ class Backdrop extends React.Component {
const needBackdrop =
backdrops.length < 1 || (isAside && backdrops.length <= 1);
let needBackground = needBackdrop && (isTablet || withBackground);
let needBackground =
needBackdrop && ((isTablet && !isContextMenu) || withBackground);
if (isAside && needBackdrop) needBackground = true;
@ -115,14 +116,17 @@ Backdrop.propTypes = {
withBackground: PropTypes.bool,
/** Must be true if used with Aside component */
isAside: PropTypes.bool,
/** Must be true if used with Context menu */
isContextMenu: PropTypes.bool,
};
Backdrop.defaultProps = {
visible: false,
zIndex: 200,
zIndex: 203,
withBackground: false,
isAside: false,
isModalDialog: false,
isContextMenu: false,
};
export default Backdrop;

7
packages/asc-web-components/backdrop/styled-backdrop.js
View File

@ -1,4 +1,4 @@
import styled from "styled-components";
import styled, { css } from "styled-components";
import Base from "../themes/base";
const StyledBackdrop = styled.div`
@ -6,6 +6,11 @@ const StyledBackdrop = styled.div`
props.needBackground
? props.theme.backdrop.backgroundColor
: props.theme.backdrop.unsetBackgroundColor};
${(props) =>
props.needBackground &&
css`
backdrop-filter: blur(3px);
`};
display: ${(props) => (props.visible ? "block" : "none")};
height: 100vh;
position: fixed;

2
packages/asc-web-components/context-menu-button/index.js
View File

@ -164,6 +164,7 @@ class ContextMenuButton extends React.Component {
asideHeader, // eslint-disable-line react/prop-types
isNew,
title,
zIndex,
} = this.props;
const { isOpen, displayType, offsetX, offsetY } = this.state;
@ -202,6 +203,7 @@ class ContextMenuButton extends React.Component {
clickOutsideAction={this.clickOutsideAction}
columnCount={columnCount}
withBackdrop={!!isMobile}
zIndex={zIndex}
>
{this.state.data.map(
(item, index) =>

6
packages/asc-web-components/context-menu/index.js
View File

@ -351,7 +351,11 @@ class ContextMenu extends Component {
return (
<>
{this.props.withBackdrop && (
<Backdrop visible={this.state.visible} withBackground={true} />
<Backdrop
visible={this.state.visible}
withBackground={false}
isContextMenu={true}
/>
)}
<Portal element={element} appendTo={this.props.appendTo} />
</>

1
packages/asc-web-components/context-menu/sub-components/sub-menu.js
View File

@ -176,6 +176,7 @@ const SubMenu = (props) => {
return (
<li
id={item.id}
key={item.key}
role="none"
className={className}

3
packages/asc-web-components/drop-down/styled-drop-down.js
View File

@ -35,7 +35,8 @@ const StyledDropdown = styled.div`
css`
left: ${(props) => (props.manualX ? props.manualX : "0px")};
`}
z-index: ${(props) => props.theme.dropDown.zIndex};
z-index: ${(props) =>
props.zIndex ? props.zIndex : props.theme.dropDown.zIndex};
display: ${(props) =>
props.open ? (props.columnCount ? "block" : "table") : "none"};
background: ${(props) => props.theme.dropDown.background};

8
packages/asc-web-components/row/styled-row.js
View File

@ -51,14 +51,6 @@ StyledContent.defaultProps = { theme: Base };
const StyledCheckbox = styled.div`
flex: 0 0 16px;
.checkbox {
padding: 7px 0;
@media ${tablet} {
padding: 10px 0;
}
}
`;
const StyledElement = styled.div`

6
packages/asc-web-components/themes/base.js
View File

@ -1218,7 +1218,7 @@ const Base = {
},
backdrop: {
backgroundColor: "rgba(6, 22, 38, 0.1)",
backgroundColor: "rgba(6, 22, 38, 0.2)",
unsetBackgroundColor: "unset",
},
@ -1600,8 +1600,8 @@ const Base = {
disableFillColor: grayLightMid,
disableFillColorOff: grayLightMid,
borderColor: blueMain,
borderColorOff: gray,
borderColor: "unset",
borderColorOff: "unset",
disableBorderColor: grayLightMid,
disableBorderColorOff: grayLightMid,

2
products/ASC.Files/Client/src/Files.jsx
View File

@ -87,7 +87,7 @@ const FilesSection = React.memo(() => {
return (
<Switch>
<PrivateRoute exact path={SETTINGS_URL} component={Settings} />
<PrivateRoute exact path={HISTORY_URL} component={VersionHistory} />
{/*<PrivateRoute exact path={HISTORY_URL} component={VersionHistory} />*/}
<PrivateRoute path={PRIVATE_ROOMS_URL} component={PrivateRoomsPage} />
<PrivateRoute exact path={HOME_URL} component={Home} />
<PrivateRoute path={FILTER_URL} component={Home} />

11
products/ASC.Files/Client/src/HOCs/withBadges.js
View File

@ -23,15 +23,8 @@ export default function withBadges(WrappedComponent) {
isTrashFolder,
} = this.props;
if (isTrashFolder) return;
if (!isTabletView) {
fetchFileVersions(item.id + "");
setIsVerHistoryPanel(true);
} else {
history.push(
combineUrl(AppServerConfig.proxyURL, homepage, `/${item.id}/history`)
);
}
fetchFileVersions(item.id + "");
setIsVerHistoryPanel(true);
};
onBadgeClick = () => {

7
products/ASC.Files/Client/src/components/Article/MainButton/index.js
View File

@ -109,6 +109,7 @@ const ArticleMainButtonContent = (props) => {
const folderUpload = !isMobile
? [
{
id: "main-button_upload-folders",
className: "main-button_drop-down",
icon: "images/actions.upload.react.svg",
label: t("UploadFolder"),
@ -184,6 +185,7 @@ const ArticleMainButtonContent = (props) => {
const actions = [
{
id: "main-button_new-document",
className: "main-button_drop-down",
icon: "images/actions.documents.react.svg",
label: t("NewDocument"),
@ -192,6 +194,7 @@ const ArticleMainButtonContent = (props) => {
key: "docx",
},
{
id: "main-button_new-spreadsheet",
className: "main-button_drop-down",
icon: "images/spreadsheet.react.svg",
label: t("NewSpreadsheet"),
@ -200,6 +203,7 @@ const ArticleMainButtonContent = (props) => {
key: "xlsx",
},
{
id: "main-button_new-presentation",
className: "main-button_drop-down",
icon: "images/actions.presentation.react.svg",
label: t("NewPresentation"),
@ -209,6 +213,7 @@ const ArticleMainButtonContent = (props) => {
},
...formActions,
{
id: "main-button_new-folder",
className: "main-button_drop-down",
icon: "images/catalog.folder.react.svg",
label: t("NewFolder"),
@ -219,6 +224,7 @@ const ArticleMainButtonContent = (props) => {
const uploadActions = [
{
id: "main-button_upload-files",
className: "main-button_drop-down",
icon: "images/actions.upload.react.svg",
label: t("UploadFiles"),
@ -272,6 +278,7 @@ const ArticleMainButtonContent = (props) => {
</>
) : (
<MainButton
id="files_main-button"
isDisabled={isDisabled ? isDisabled : !canCreate}
isDropdown={true}
text={t("Common:Actions")}

30
products/ASC.Files/Client/src/components/panels/StyledPanels.js
View File

@ -117,14 +117,34 @@ StyledAsidePanel.defaultProps = { theme: Base };
const StyledVersionHistoryPanel = styled.div`
${PanelStyles}
.version-history-modal-dialog {
transform: translateX(${(props) => (props.visible ? "0" : "720px")});
width: 500px;
transition: unset;
transform: translateX(${(props) => (props.visible ? "0" : "480px")});
width: 480px;
max-width: 480px;
overflow-y: hidden;
}
.version-history-aside-panel {
transform: translateX(${(props) => (props.visible ? "0" : "720px")});
width: 500px;
transition: unset;
transform: translateX(${(props) => (props.visible ? "0" : "480px")});
width: 480px;
max-width: 480px;
overflow-y: hidden;
@media (max-width: 500px) {
position: fixed;
top: 64px;
bottom: 0;
right: 0;
width: 100%;
height: calc(100% - 64px);
}
}
.version-history-panel-header {
height: 53px;
margin-left: 0px;
@ -134,6 +154,7 @@ const StyledVersionHistoryPanel = styled.div`
margin-top: 12px;
}
}
.version-history-panel-body {
padding-top: ${(props) => (props.isLoading ? "16px" : null)};
padding-bottom: ${(props) => (props.isLoading ? "0px" : null)};
@ -146,6 +167,7 @@ const StyledVersionHistoryPanel = styled.div`
.version-comment-wrapper {
margin-left: 79px;
}
.version_edit-comment {
padding-left: 2px;
}

2
products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js
View File

@ -157,7 +157,7 @@ export default inject(({ auth }) => {
})(
observer(
withRouter(
withTranslation(["Home", "Translations"])(
withTranslation(["Home", "Translations", "VersionBadge"])(
withContent(withBadges(FilesRowContent))
)
)

56
products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js
View File

@ -5,10 +5,38 @@ import TableRow from "./TableRow";
import TableHeader from "./TableHeader";
import TableBody from "@appserver/components/table-container/TableBody";
import { isMobile } from "react-device-detect";
import styled from "styled-components";
import styled, { css } from "styled-components";
import { Base } from "@appserver/components/themes";
const marginCss = css`
margin-top: -1px;
border-top: ${(props) =>
`1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
`;
const fileNameCss = css`
margin-left: -24px;
padding-left: 24px;
${marginCss}
`;
const contextCss = css`
margin-right: -20px;
padding-right: 18px;
${marginCss}
`;
const StyledTableContainer = styled(TableContainer)`
.table-row-selected {
.table-container_file-name-cell {
${fileNameCss}
}
.table-container_row-context-menu-wrapper {
${contextCss}
}
}
.table-row-selected + .table-row-selected {
.table-row {
.table-container_file-name-cell,
@ -18,18 +46,44 @@ const StyledTableContainer = styled(TableContainer)`
border-top: 1px solid;
}
.table-container_file-name-cell {
${fileNameCss}
border-image-source: ${(props) => `linear-gradient(to right,
${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`};
}
.table-container_row-context-menu-wrapper {
${contextCss}
border-image-source: ${(props) => `linear-gradient(to left,
${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`};
}
}
}
.table-hotkey-border + .table-row-selected {
.table-row {
.table-container_file-name-cell {
border-top: unset !important;
margin-top: 0 !important;
}
.table-container_row-context-menu-wrapper {
border-top: unset !important;
margin-top: 0 !important;
}
}
}
.files-item:not(.table-row-selected) + .table-row-selected {
.table-row {
.table-container_file-name-cell {
${fileNameCss}
}
.table-container_row-context-menu-wrapper {
${contextCss}
}
.table-container_file-name-cell,
.table-container_row-context-menu-wrapper {
border-bottom: ${(props) =>

3
products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableHeader.js
View File

@ -143,6 +143,9 @@ class FilesTableHeader extends React.Component {
if (this.props.firstElemChecked && this.props.headerBorder) {
const elem = document.getElementById("table-container_caption-header");
elem?.classList?.add("hotkeys-lengthen-header");
} else {
const elem = document.getElementById("table-container_caption-header");
elem?.classList?.remove("hotkeys-lengthen-header");
}
}

25
products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js
View File

@ -91,20 +91,25 @@ const StyledTableRow = styled(TableRow)`
}
.table-container_file-name-cell {
margin-left: -24px;
padding-left: 24px;
${(props) => props.showHotkeyBorder && hotkeyBorderStyle};
${(props) =>
props.showHotkeyBorder &&
css`
margin-left: -24px;
padding-left: 24px;
${hotkeyBorderStyle}
`};
${(props) => props.dragging && rowCheckboxDraggingStyle};
}
.table-container_row-context-menu-wrapper {
width: 28px;
margin-right: -20x;
padding-right: 18px;
${(props) => props.dragging && contextMenuWrapperDraggingStyle};
${(props) => props.showHotkeyBorder && hotkeyBorderStyle};
${(props) =>
props.showHotkeyBorder &&
css`
margin-right: -20px;
padding-right: 18px;
${hotkeyBorderStyle}
`};
}
.edit {
@ -265,7 +270,7 @@ const FilesTableRow = (props) => {
React.useEffect(() => {
if (index === 0) {
if (checkedProps || isActive || showHotkeyBorder) {
if (checkedProps || isActive) {
setFirsElemChecked(true);
} else {
setFirsElemChecked(false);

4
products/ASC.Files/Client/src/pages/Settings/Section/Body/index.js
View File

@ -94,7 +94,7 @@ const SectionBodyContent = ({
<Error403 />
) : isErrorSettings ? (
<Error520 />
) : (
) : !isPersonal ? (
<div>
<TabsContainer
elements={elements}
@ -102,6 +102,8 @@ const SectionBodyContent = ({
selectedItem={selectedTab()}
/>
</div>
) : (
<div>{elements[0].content}</div>
);
};

7
products/ASC.Files/Client/src/pages/Settings/Section/Header/index.js
View File

@ -4,7 +4,12 @@ import Headline from "@appserver/common/components/Headline";
const SectionHeaderContent = ({ title }) => {
return (
<div>
<Headline className="headline-header" type="content" truncate={true}>
<Headline
fontSize="18px"
className="headline-header"
type="content"
truncate={true}
>
{title}
</Headline>
</div>

44
products/ASC.Files/Client/src/pages/Settings/index.js
View File

@ -19,6 +19,7 @@ const PureSettings = ({
setFirstLoad,
capabilities,
tReady,
isPersonal,
}) => {
const [title, setTitle] = useState("");
const { setting } = match.params;
@ -28,7 +29,9 @@ const PureSettings = ({
}, [setFirstLoad]);
useEffect(() => {
setTitle(t("Common:Settings"));
isPersonal
? setTitle(t("ThirdPartySettings"))
: setTitle(t("Common:Settings"));
}, [t, tReady]);
useEffect(() => {
@ -80,22 +83,25 @@ const PureSettings = ({
const Settings = withTranslation(["Settings", "Common"])(PureSettings);
export default inject(({ filesStore, settingsStore, treeFoldersStore }) => {
const { setFirstLoad, isLoading } = filesStore;
const { setSelectedNode } = treeFoldersStore;
const {
getFilesSettings,
isLoadedSettingsTree,
thirdPartyStore,
} = settingsStore;
const { capabilities } = thirdPartyStore;
export default inject(
({ auth, filesStore, settingsStore, treeFoldersStore }) => {
const { setFirstLoad, isLoading } = filesStore;
const { setSelectedNode } = treeFoldersStore;
const {
getFilesSettings,
isLoadedSettingsTree,
thirdPartyStore,
} = settingsStore;
const { capabilities } = thirdPartyStore;
return {
isLoading,
isLoadedSettingsTree,
setFirstLoad,
setSelectedNode,
getFilesSettings,
capabilities,
};
})(withRouter(observer(Settings)));
return {
isLoading,
isLoadedSettingsTree,
setFirstLoad,
setSelectedNode,
getFilesSettings,
capabilities,
isPersonal: auth.settingsStore.personal,
};
}
)(withRouter(observer(Settings)));

62
products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/StyledVersionHistory.js
View File

@ -116,17 +116,11 @@ const StyledVersionList = styled.div`
StyledVersionList.defaultProps = { theme: Base };
const StyledVersionRow = styled(Row)`
@media ${tablet} {
box-sizing: border-box;
position: relative;
}
.row_content {
position: relative;
padding-top: 12px;
padding-bottom: 12px;
${(props) => props.isTabletView && "height: 42px"};
height: auto;
${(props) => !props.isTabletView && "padding-right:16px"};
}
@ -161,21 +155,8 @@ const StyledVersionRow = styled(Row)`
}
}
.version_modal-dialog {
display: none;
@media ${tablet} {
display: block;
}
}
.version_edit-comment {
display: block;
@media ${tablet} {
display: none;
margin-left: 63px;
}
}
.textarea-desktop {
@ -208,48 +189,26 @@ const StyledVersionRow = styled(Row)`
}
.version_text {
display: ${(props) => (props.canEdit ? "none" : "block")};
display: ${(props) => (props.showEditPanel ? "none" : "block")};
margin-left: -7px;
margin-top: 5px;
@media ${tablet} {
display: inline-block;
margin-left: 1px;
display: ${(props) => (props.showEditPanel ? "none" : "inline-block")};
margin-left: -7px;
margin-top: 5px;
}
}
.version_links-container {
display: flex;
margin-left: auto;
.version_link-action {
display: block;
margin-left: auto;
margin-top: 5px;
${(props) =>
props.isRestoring &&
css`
cursor: default;
`}
:last-child {
margin-left: 8px;
}
@media ${tablet} {
display: none;
}
}
}
.version-comment-wrapper {
white-space: normal !important;
}
.row_context-menu-wrapper {
display: none;
display: block;
position: absolute;
right: 16px !important;
top: 6px;
.expandButton {
${(props) =>
@ -269,13 +228,6 @@ const StyledVersionRow = styled(Row)`
}
}
}
@media ${tablet} {
display: block;
position: absolute;
right: 0px;
top: 6px;
}
}
.row_content {

68
products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/VersionRow.js
View File

@ -147,17 +147,15 @@ const VersionRow = (props) => {
>
{title}
</Link>
<Link className="icon-link" onClick={onOpenFile}>
<StyledExternalLinkIcon size="scale" />
</Link>
<Text
{/*<Text
className="version_content-length"
fontWeight={600}
color={theme.filesVersionHistory.color}
fontSize="14px"
>
{info.contentLength}
</Text>
</Text>*/}
</Box>
<Box
className="version-comment-wrapper"
@ -175,71 +173,11 @@ const VersionRow = (props) => {
value={commentValue}
isDisabled={isSavingComment}
/>
<Box className="version_modal-dialog">
<ModalDialog
displayType="aside"
visible={showEditPanel}
onClose={onEditComment}
>
<ModalDialog.Header className="header-version-modal-dialog">
{t("EditComment")}
</ModalDialog.Header>
<ModalDialog.Body>
<Textarea
className="text-area-mobile-edit-comment"
style={{ margin: "8px 24px 8px 0" }}
//placeholder="Add comment"
onChange={onChange}
heightTextArea={298}
value={commentValue}
isDisabled={isSavingComment}
/>
</ModalDialog.Body>
<ModalDialog.Footer>
<Button
isDisabled={isSavingComment}
className="version_save-button"
label={t("Common:SaveButton")}
size="normal"
primary
onClick={onSaveClick}
/>
</ModalDialog.Footer>
</ModalDialog>
</Box>
</>
)}
<Link
type="action"
isHovered={!isEditing}
noHover={isEditing}
onClick={onEditComment}
className="version_link"
>
{info.comment}
</Link>
<Text className="version_text">{info.comment}</Text>
</>
<div className="version_links-container">
{canEdit && (
<Link
onClick={onRestoreClick}
{...linkStyles}
className="version_link-action"
>
{t("Common:Restore")}
</Link>
)}
<Link
onClick={onDownloadAction}
{...linkStyles}
className="version_link-action"
>
{t("Common:Download")}
</Link>
</div>
</Box>
{showEditPanel && (
<Box className="version_edit-comment" marginProp="8px 0 2px 70px">

2
products/ASC.People/Client/src/pages/Profile/Section/Header/index.js
View File

@ -395,7 +395,7 @@ class SectionHeaderContent extends React.PureComponent {
{
key: "invite-again",
className: "header-context-menu_invite-again",
label: t("InviteAgainLbl"),
label: t("Profile:InviteAgainLbl"),
onClick: this.onInviteAgainClick,
},
!isMe &&

4
web/ASC.Web.Client/src/components/Layout/index.js
View File

@ -115,6 +115,10 @@ const Layout = (props) => {
// height = window.screen.availHeight - correctorTabletSafari;
// }
// }
let vh = (height - 48) * 0.01;
document.documentElement.style.setProperty("--vh", `${vh}px`);
setContentHeight(height);
};
intervalHandler = setInterval(() => {

27
web/ASC.Web.Client/src/components/Main/index.js
View File

@ -30,21 +30,20 @@ const StyledMain = styled.main`
`;
const Main = React.memo((props) => {
const orientationChanged = React.useCallback(() => {
if (isIOS && !isFirefox) {
let vh = (window.innerHeight - 48) * 0.01;
// const orientationChanged = React.useCallback(() => {
// if (isIOS && !isFirefox) {
// let vh = (window.innerHeight - 48) * 0.01;
// document.documentElement.style.setProperty("--vh", `${vh}px`);
// }
// }, []);
document.documentElement.style.setProperty("--vh", `${vh}px`);
}
}, []);
React.useEffect(() => {
orientationChanged();
if (isIOS && !isFirefox) {
window.addEventListener("resize", orientationChanged);
}
return () => window.removeEventListener("resize", orientationChanged);
}, []);
// React.useEffect(() => {
// orientationChanged();
// if (isIOS && !isFirefox) {
// window.addEventListener("resize", orientationChanged);
// }
// return () => window.removeEventListener("resize", orientationChanged);
// }, []);
//console.log("Main render");
return <StyledMain className="main" {...props} />;