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

Merge branch 'feature/modal-redesign' of https://github.com/ONLYOFFICE/AppServer into feature/add-17keys

Browse Source
This commit is contained in:
Maria Sukhova 2022-07-15 15:09:49 +03:00
commit fe993907ad
10 changed files with 233 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
packages/asc-web-components/link-with-dropdown/index.js
View File

@ -7,11 +7,13 @@ import DropDownItem from "../drop-down-item";
import {
StyledSpan,
StyledText,
StyledTextWithExpander,
StyledLinkWithDropdown,
Caret,
} from "./styled-link-with-dropdown";
import { isMobileOnly } from "react-device-detect";
import Scrollbar from "@appserver/components/scrollbar";
import { ReactSVG } from "react-svg";
class LinkWithDropdown extends React.Component {
constructor(props) {
@ -101,6 +103,7 @@ class LinkWithDropdown extends React.Component {
directionY,
theme,
hasScroll,
withExpander,
...rest
} = this.props;
@ -118,6 +121,24 @@ class LinkWithDropdown extends React.Component {
/>
));
const styledText = (
<StyledText
className="text"
isTextOverflow={isTextOverflow}
truncate={isTextOverflow}
fontSize={fontSize}
fontWeight={fontWeight}
color={color}
isBold={isBold}
title={title}
dropdownType={dropdownType}
isDisabled={isDisabled}
withTriangle
>
{this.props.children}
</StyledText>
);
return (
<StyledSpan className={className} id={id} style={style} ref={this.ref}>
<span onClick={this.onOpen}>
@ -127,26 +148,17 @@ class LinkWithDropdown extends React.Component {
color={color}
isDisabled={isDisabled}
>
<StyledText
className="text"
isTextOverflow={isTextOverflow}
truncate={isTextOverflow}
fontSize={fontSize}
fontWeight={fontWeight}
color={color}
isBold={isBold}
title={title}
dropdownType={dropdownType}
isDisabled={isDisabled}
>
{this.props.children}
</StyledText>
<Caret
color={color}
dropdownType={dropdownType}
isOpen={this.state.isOpen}
isDisabled={isDisabled}
/>
{withExpander ? (
<StyledTextWithExpander isOpen={this.state.isOpen}>
{styledText}
<ReactSVG
className="expander"
src={"/static/images/expander-down.react.svg"}
/>
</StyledTextWithExpander>
) : (
styledText
)}
</StyledLinkWithDropdown>
</span>
<DropDown
@ -156,6 +168,7 @@ class LinkWithDropdown extends React.Component {
withArrow={false}
forwardedRef={this.ref}
directionY={directionY}
isDropdown={false}
clickOutsideAction={this.onClose}
{...rest}
>
@ -185,6 +198,7 @@ LinkWithDropdown.propTypes = {
/** Type of dropdown: alwaysDashed is always show dotted style and icon of arrow,
* appearDashedAfterHover is show dotted style and icon arrow only after hover */
dropdownType: PropTypes.oneOf(["alwaysDashed", "appearDashedAfterHover"]),
withExpander: PropTypes.bool,
/** Font size of link */
fontSize: PropTypes.string,
/** Font weight of link */
@ -225,6 +239,7 @@ LinkWithDropdown.defaultProps = {
className: "",
isDisabled: false,
hasScroll: false,
withExpander: false,
};
export default LinkWithDropdown;

30
packages/asc-web-components/link-with-dropdown/styled-link-with-dropdown.js
View File

@ -5,6 +5,7 @@ import PropTypes from "prop-types";
import Text from "../text";
import Base from "../themes/base";
import ExpanderDownIcon from "../../../public/images/expander-down.react.svg";
import { transform } from "lodash";
// eslint-disable-next-line no-unused-vars
const SimpleLinkWithDropdown = ({
isBold,
@ -123,6 +124,27 @@ const StyledLinkWithDropdown = styled(SimpleLinkWithDropdown)`
}
`;
StyledLinkWithDropdown.defaultProps = { theme: Base };
const StyledTextWithExpander = styled.div`
display: flex;
gap: 4px;
.expander {
display: flex;
align-items: center;
justify-content: center;
width: 6.35px;
svg {
transform: ${(props) => (props.isOpen ? "rotate(180deg)" : "rotate(0)")};
width: 6.35px;
height: auto;
path {
fill: ${(props) => props.theme.linkWithDropdown.expander.iconColor};
}
}
}
`;
// eslint-disable-next-line react/prop-types, no-unused-vars
const SimpleText = ({ color, ...props }) => <Text as="span" {...props} />;
const StyledText = styled(SimpleText)`
@ -150,4 +172,10 @@ const StyledSpan = styled.span`
`;
StyledSpan.defaultProps = { theme: Base };
export { StyledSpan, StyledText, StyledLinkWithDropdown, Caret };
export {
StyledSpan,
StyledTextWithExpander,
StyledText,
StyledLinkWithDropdown,
Caret,
};

2
packages/asc-web-components/modal-dialog/styled-modal-dialog.js
View File

@ -103,6 +103,8 @@ const StyledBody = styled(Box)`
padding-bottom: ${(props) =>
props.currentDisplayType === "aside" || props.hasFooter ? "8px" : "16px"};
margin-right: ${(props) => (props.withBodyScroll ? "-16px" : "0")};
${(props) =>
props.currentDisplayType === "aside" &&
css`

2
packages/asc-web-components/modal-dialog/views/modal-aside.js
View File

@ -103,7 +103,7 @@ const Modal = ({
)}
{body && (
<StyledBody
withoutBodyScroll={true}
withBodyScroll={withBodyScroll}
hasFooter={1 && footer}
currentDisplayType={currentDisplayType}
{...body.props}

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

@ -866,6 +866,10 @@ const Base = {
span: { maxWidth: "300px" },
expander: {
iconColor: black,
},
caret: {
width: "5px",
minWidth: "5px",

4
packages/asc-web-components/themes/dark.js
View File

@ -863,6 +863,10 @@ const Dark = {
span: { maxWidth: "300px" },
expander: {
iconColor: white,
},
caret: {
width: "5px",
minWidth: "5px",

67
products/ASC.Files/Client/src/components/dialogs/DownloadDialog/DownloadContent.js
View File

@ -106,38 +106,43 @@ const DownloadContent = (props) => {
return (
<StyledDownloadContent isOpen={showHeader ? isOpen : true} theme={theme}>
{showHeader && (
<div className="download-dialog_content-wrapper">
<Checkbox
data-item-id="All"
data-type={type}
isChecked={isChecked}
isIndeterminate={isIndeterminate}
onChange={onRowSelect}
className="download-dialog-checkbox"
/>
<div
onClick={onOpen}
className="download-dialog-heading download-dialog_row-text"
>
<Text noSelect fontSize="16px" fontWeight={600}>
{title}
</Text>
<ArrowIcon className="download-dialog-icon" />
</div>
{(isChecked || isIndeterminate) && !isOther && (
<LinkWithDropdown
containerMinWidth="fit-content"
data={titleData}
directionX="left"
directionY="bottom"
dropdownType="alwaysDashed"
fontSize="13px"
fontWeight={600}
<div className="download-dialog_content-wrapper download-dialog-row">
<div className="download-dialog-main-content">
<Checkbox
data-item-id="All"
data-type={type}
isChecked={isChecked}
isIndeterminate={isIndeterminate}
onChange={onRowSelect}
className="download-dialog-checkbox"
/>
<div
onClick={onOpen}
className="download-dialog-heading download-dialog-title"
>
{titleFormat}
</LinkWithDropdown>
)}
<Text noSelect fontSize="16px" fontWeight={600}>
{title}
</Text>
<ArrowIcon className="download-dialog-icon" />
</div>
</div>
<div className="download-dialog-actions">
{(isChecked || isIndeterminate) && !isOther && (
<LinkWithDropdown
className="download-dialog-link"
containerMinWidth="fit-content"
data={titleData}
directionX="left"
directionY="bottom"
dropdownType="alwaysDashed"
fontSize="13px"
fontWeight={600}
withExpander
>
{titleFormat}
</LinkWithDropdown>
)}
</div>
</div>
)}
<div className="download-dialog_hidden-items">

90
products/ASC.Files/Client/src/components/dialogs/DownloadDialog/DownloadRow.js
View File

@ -4,6 +4,8 @@ import { ReactSVG } from "react-svg";
import Text from "@appserver/components/text";
import Checkbox from "@appserver/components/checkbox";
import LinkWithDropdown from "@appserver/components/link-with-dropdown";
import DropDownItem from "@appserver/components/drop-down-item";
import GroupButton from "@appserver/components/group-button";
const DownloadRow = (props) => {
const {
@ -42,55 +44,61 @@ const DownloadRow = (props) => {
const element = getItemIcon(file);
return (
<div className="download-dialog_row">
<Checkbox
className="download-dialog-checkbox"
data-item-id={file.id}
data-type={type}
onChange={onRowSelect}
isChecked={isChecked}
/>
{element}
<Text
className="download-dialog_row-text"
truncate
type="page"
title={file.title}
fontSize="14px"
fontWeight={600}
noSelect
>
{file.title}
</Text>
{file.checked && !isOther && (
<LinkWithDropdown
className="download-dialog-link"
isOpen={dropDownIsOpen}
dropdownType="alwaysDashed"
containerMinWidth="fit-content"
data={dropdownItems}
directionX="left"
directionY="bottom"
fontSize="13px"
fontWeight={600}
hasScroll={true}
>
{file.format || t("OriginalFormat")}
</LinkWithDropdown>
)}
{isOther && file.fileExst && (
<div className="download-dialog-row">
<div className="download-dialog-main-content">
<Checkbox
className="download-dialog-checkbox"
data-item-id={file.id}
data-type={type}
onChange={onRowSelect}
isChecked={isChecked}
/>
<div className="download-dialog-icon-contatiner">{element}</div>
<Text
className="download-dialog-other-text"
className="download-dialog-title"
truncate
type="page"
title={file.title}
fontSize="13px"
fontSize="14px"
fontWeight={600}
noSelect
>
{t("OriginalFormat")}
{file.title}
</Text>
)}
</div>
<div className="download-dialog-actions">
{file.checked && !isOther && (
<LinkWithDropdown
className="download-dialog-link"
isOpen={dropDownIsOpen}
dropdownType="alwaysDashed"
containerMinWidth="fit-content"
data={dropdownItems}
directionX="left"
directionY="bottom"
fontSize="13px"
fontWeight={600}
hasScroll={true}
withExpander
>
{file.format || t("OriginalFormat")}
</LinkWithDropdown>
)}
{isOther && file.fileExst && (
<Text
className="download-dialog-other-text"
truncate
type="page"
title={file.title}
fontSize="13px"
fontWeight={600}
noSelect
>
{t("OriginalFormat")}
</Text>
)}
</div>
</div>
);
};

99
products/ASC.Files/Client/src/components/dialogs/DownloadDialog/StyledDownloadDialog.js
View File

@ -2,54 +2,17 @@ import styled, { css } from "styled-components";
import ModalDialog from "@appserver/components/modal-dialog";
const StyledDownloadDialog = styled(ModalDialog)`
.modal-dialog-content {
padding: 0 0 0 16px;
}
.download-dialog-description {
margin-bottom: 18px;
margin-bottom: 16px;
}
.modal-dialog-aside-footer {
display: flex;
padding-right: 32px;
width: 100%;
gap: 10px;
.download-dialog-convert-message {
margin-top: 16px;
}
`;
const StyledDownloadContent = styled.div`
.download-dialog_row {
display: flex;
align-items: center;
height: 48px;
.download-dialog-other-text {
min-width: 141px;
}
}
.download-dialog-checkbox {
padding: 8px 6px 8px 8px;
}
.download-dialog_row-text {
width: 100%;
margin-right: 10px;
}
.download-dialog-heading {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.download-dialog_content-wrapper {
height: 48px;
display: flex;
align-items: center;
${({ isOpen }) =>
isOpen &&
css`
@ -58,12 +21,18 @@ const StyledDownloadContent = styled.div`
padding: 0 16px;
`}
.download-dialog-heading {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.download-dialog-icon {
width: 12px;
height: 12px;
transform: ${({ isOpen }) =>
isOpen ? "rotate(270deg)" : "rotate(90deg)"};
svg {
path {
fill: #333;
@ -75,6 +44,54 @@ const StyledDownloadContent = styled.div`
.download-dialog_hidden-items {
display: ${({ isOpen }) => (isOpen ? "block" : "none")};
}
.download-dialog-row {
max-width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
height: 48px;
.download-dialog-main-content {
min-width: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: start;
width: 100%;
.checkbox,
svg {
margin: 0 !important;
}
.download-dialog-checkbox {
padding: 8px;
}
.download-dialog-icon-contatiner {
padding: 0 8px;
max-height: 32px;
max-width: 32px;
}
.download-dialog-title {
min-width: 0;
width: 100%;
}
}
.download-dialog-actions {
.download-dialog-link {
a {
padding-right: 0;
text-underline-offset: 1px;
}
}
.download-dialog-other-text {
text-align: end;
color: #a3a9ae;
}
}
}
`;
export { StyledDownloadDialog, StyledDownloadContent };

15
products/ASC.Files/Client/src/components/dialogs/DownloadDialog/index.js
View File

@ -250,6 +250,16 @@ class DownloadDialogComponent extends React.Component {
getItemIcon: this.getItemIcon,
};
const totalItemsNum =
this.state.documents.files.length +
this.state.spreadsheets.files.length +
this.state.presentations.files.length +
this.state.other.files.length +
(this.state.documents.files.length > 1 && 1) +
(this.state.spreadsheets.files.length > 1 && 1) +
(this.state.presentations.files.length > 1 && 1) +
(this.state.other.files.length > 1 && 1);
return (
<StyledDownloadDialog
visible={visible}
@ -259,6 +269,7 @@ class DownloadDialogComponent extends React.Component {
autoMaxWidth
isLarge
isLoading={!tReady}
withBodyScroll={totalItemsNum > 11}
>
<ModalDialog.Header>{t("Translations:DownloadAs")}</ModalDialog.Header>
@ -313,6 +324,10 @@ class DownloadDialogComponent extends React.Component {
title={t("Other")}
/>
)}
<div className="download-dialog-convert-message">
<Text noSelect>{t("ConvertMessage")}</Text>
</div>
</ModalDialog.Body>
<ModalDialog.Footer>