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

Merge branch 'release/rc-v1.2.0' of https://github.com/ONLYOFFICE/DocSpace into release/rc-v1.2.0

Browse Source
This commit is contained in:
Timofey Boyko 2022-12-12 11:06:27 +03:00
commit fcc78856b3
10 changed files with 145 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/pages/Confirm/sub-components/auth.js
View File

@ -13,7 +13,7 @@ const Auth = (props) => {
loginWithConfirmKey({
ConfirmData: {
Email: linkData.email,
Key: linkData.confirmHeader,
Key: linkData.key,
},
})
.then((res) => {

5
packages/client/src/pages/PortalSettings/categories/data-management/backup/auto-backup/sub-components/ScheduleComponent.js
View File

@ -64,7 +64,6 @@ const ScheduleComponent = ({
scaledOptions={true}
className="schedule-backup_combobox days_option"
showDisabledItems
isLeftwardContent
/>
{weeklySchedule && (
<ComboBox
@ -81,7 +80,6 @@ const ScheduleComponent = ({
dropDownMaxHeight={400}
className="schedule-backup_combobox weekly_option"
showDisabledItems
isLeftwardContent
/>
)}
{monthlySchedule && (
@ -99,7 +97,6 @@ const ScheduleComponent = ({
dropDownMaxHeight={400}
className="schedule-backup_combobox month_options"
showDisabledItems
isLeftwardContent
/>
)}
<ComboBox
@ -116,7 +113,6 @@ const ScheduleComponent = ({
dropDownMaxHeight={isMobileOnly ? 100 : 200}
className="schedule-backup_combobox time_options"
showDisabledItems
isLeftwardContent
/>
</div>
<div className="maxCopiesOption">
@ -136,7 +132,6 @@ const ScheduleComponent = ({
dropDownMaxHeight={isMobileOnly ? 100 : 200}
className="schedule-backup_combobox max_copies"
showDisabledItems
isLeftwardContent
/>
</div>
</StyledScheduleComponent>

1
packages/client/src/pages/PortalSettings/categories/data-management/backup/common-container/DirectThirdPartyConnection.js
View File

@ -325,7 +325,6 @@ const DirectThirdPartyConnection = (props) => {
isLoading ||
accounts.length === 0
}
isLeftwardContent
/>
<ContextMenuButton

1
packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/SsoComboBox.js
View File

@ -38,7 +38,6 @@ const SsoComboBox = (props) => {
selectedOption={currentOption}
showDisabledItems
tabIndex={tabIndex}
isLeftwardContent
/>
</StyledInputWrapper>
</FieldContainer>

2
packages/components/combobox/index.js
View File

@ -111,7 +111,6 @@ class ComboBox extends React.Component {
withBackdrop,
isAside,
withBackground,
isLeftwardContent,
advancedOptionsCount,
} = this.props;
@ -175,7 +174,6 @@ class ComboBox extends React.Component {
modernView={modernView}
fillIcon={fillIcon}
tabIndex={tabIndex}
isLeftwardContent={isLeftwardContent}
/>
{displayType !== "toggle" && (
<DropDown

196
packages/components/combobox/sub-components/combo-button.js
View File

@ -1,124 +1,112 @@
import React from "react";
import PropTypes from "prop-types";
import { ReactSVG } from "react-svg";
import styled from "styled-components";
import Text from "../../text";
import {
StyledArrowIcon,
StyledIcon,
StyledOptionalItem,
StyledComboButton,
StyledTriangleDownIcon,
} from "./styled-combobutton";
import ExpanderDownIcon from "../../../../public/images/expander-down.react.svg";
import commonIconsStyles from "../../utils/common-icons-style";
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
const StyledExpanderDownIcon = styled(ExpanderDownIcon)`
${commonIconsStyles}
`;
class ComboButton extends React.Component {
render() {
const {
noBorder,
onClick,
isDisabled,
innerContainer,
innerContainerClassName,
selectedOption,
optionsLength,
withOptions,
withAdvancedOptions,
isOpen,
scaled,
size,
comboIcon,
fillIcon,
modernView,
tabIndex,
isLeftwardContent,
} = this.props;
const ComboButton = (props) => {
const {
noBorder,
onClick,
isDisabled,
innerContainer,
innerContainerClassName,
selectedOption,
optionsLength,
withOptions,
withAdvancedOptions,
isOpen,
scaled,
size,
comboIcon,
fillIcon,
modernView,
tabIndex,
} = props;
const defaultOption = selectedOption?.default;
const isSelected = selectedOption?.key !== 0;
const defaultOption = selectedOption?.default;
const isSelected = selectedOption?.key !== 0;
const displayArrow = withOptions || withAdvancedOptions;
return (
<ColorTheme
isOpen={isOpen}
isDisabled={isDisabled}
return (
<ColorTheme
isOpen={isOpen}
isDisabled={isDisabled}
noBorder={noBorder}
containOptions={optionsLength}
withAdvancedOptions={withAdvancedOptions}
onClick={onClick}
scaled={scaled}
size={size}
isSelected={isSelected}
modernView={modernView}
className="combo-button"
themeId={ThemeType.ComboButton}
tabIndex={tabIndex}
displayArrow={displayArrow}
>
{innerContainer && (
<StyledOptionalItem
className={innerContainerClassName}
isDisabled={isDisabled}
defaultOption={defaultOption}
>
{innerContainer}
</StyledOptionalItem>
)}
{selectedOption && selectedOption.icon && (
<StyledIcon
className="forceColor"
isDisabled={isDisabled}
defaultOption={defaultOption}
isSelected={isSelected}
>
<ReactSVG
src={selectedOption.icon}
className={fillIcon ? "combo-button_selected-icon" : ""}
/>
</StyledIcon>
)}
<Text
noBorder={noBorder}
containOptions={optionsLength}
withAdvancedOptions={withAdvancedOptions}
onClick={onClick}
scaled={scaled}
size={size}
isSelected={isSelected}
modernView={modernView}
className="combo-button"
themeId={ThemeType.ComboButton}
tabIndex={tabIndex}
isLeftwardContent={isLeftwardContent}
title={selectedOption?.label}
as="div"
truncate={true}
fontWeight={600}
className="combo-button-label"
>
{innerContainer && (
<StyledOptionalItem
className={innerContainerClassName}
isDisabled={isDisabled}
defaultOption={defaultOption}
>
{innerContainer}
</StyledOptionalItem>
)}
{selectedOption && selectedOption.icon && (
<StyledIcon
className="forceColor"
isDisabled={isDisabled}
defaultOption={defaultOption}
isSelected={isSelected}
>
<ReactSVG
src={selectedOption.icon}
className={fillIcon ? "combo-button_selected-icon" : ""}
{selectedOption?.label}
</Text>
<StyledArrowIcon
displayArrow={displayArrow}
noBorder={noBorder}
isOpen={isOpen}
modernView={modernView}
className="combo-buttons_arrow-icon"
>
{displayArrow &&
(comboIcon ? (
<ReactSVG src={comboIcon} className="combo-buttons_expander-icon" />
) : (
<StyledTriangleDownIcon
size="scale"
className="combo-buttons_expander-icon"
/>
</StyledIcon>
)}
<Text
noBorder={noBorder}
title={selectedOption?.label}
as="div"
truncate={true}
fontWeight={600}
className="combo-button-label"
>
{selectedOption?.label}
</Text>
<StyledArrowIcon
needDisplay={withOptions || withAdvancedOptions}
noBorder={noBorder}
isOpen={isOpen}
modernView={modernView}
className="combo-buttons_arrow-icon"
>
{(withOptions || withAdvancedOptions) &&
(comboIcon ? (
<ReactSVG
src={comboIcon}
className="combo-buttons_expander-icon"
/>
) : (
<StyledExpanderDownIcon
size="scale"
className="combo-buttons_expander-icon"
/>
))}
</StyledArrowIcon>
</ColorTheme>
);
}
}
))}
</StyledArrowIcon>
</ColorTheme>
);
};
ComboButton.propTypes = {
noBorder: PropTypes.bool,
@ -143,7 +131,6 @@ ComboButton.propTypes = {
fillIcon: PropTypes.bool,
modernView: PropTypes.bool,
tabIndex: PropTypes.number,
isLeftwardContent: PropTypes.bool,
};
ComboButton.defaultProps = {
@ -157,7 +144,6 @@ ComboButton.defaultProps = {
scaled: false,
modernView: false,
tabIndex: -1,
isLeftwardContent: false,
};
export default ComboButton;

46
packages/components/combobox/sub-components/styled-combobutton.js
View File

@ -3,6 +3,13 @@ import { isMobileOnly } from "react-device-detect";
import Base from "../../themes/base";
import NoUserSelect from "../../utils/commonStyles";
import TriangleDownIcon from "../../../../public/images/triangle.down.react.svg";
import commonIconsStyles from "../../utils/common-icons-style";
const StyledTriangleDownIcon = styled(TriangleDownIcon)`
${commonIconsStyles}
`;
const modernViewButton = css`
height: ${(props) => props.theme.comboBox.button.heightModernView};
background: ${(props) =>
@ -11,6 +18,7 @@ const modernViewButton = css`
: props.theme.comboBox.button.backgroundModernView};
border: none !important;
padding-right: 0px;
`;
const hoverModernViewButton = css`
@ -23,8 +31,7 @@ const hoverModernViewButton = css`
const StyledComboButton = styled.div`
display: flex;
align-items: center;
justify-content: ${(props) =>
props.isLeftwardContent ? "space-between" : "center"};
justify-content: center;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
height: ${(props) =>
@ -41,7 +48,19 @@ const StyledComboButton = styled.div`
${NoUserSelect};
padding-left: ${(props) => props.theme.comboBox.button.paddingLeft};
padding-left: ${(props) =>
props.size === "content"
? props.theme.comboBox.button.paddingLeft
: props.theme.comboBox.button.selectPaddingLeft};
padding-right: ${(props) =>
props.size === "content"
? props.displayArrow
? props.theme.comboBox.button.paddingRight
: props.theme.comboBox.button.paddingRightNoArrow
: props.displayArrow
? props.theme.comboBox.button.selectPaddingRight
: props.theme.comboBox.button.selectPaddingRightNoArrow};
background: ${(props) =>
!props.noBorder
@ -193,7 +212,6 @@ StyledIcon.defaultProps = { theme: Base };
const StyledArrowIcon = styled.div`
display: flex;
align-self: center;
justify-self: center;
.combo-buttons_expander-icon {
path {
@ -202,17 +220,13 @@ const StyledArrowIcon = styled.div`
}
width: ${(props) =>
props.needDisplay ? props.theme.comboBox.arrow.width : "0px"};
props.displayArrow ? props.theme.comboBox.arrow.width : "0px"};
flex: ${(props) =>
props.needDisplay ? props.theme.comboBox.arrow.flex : "0px"};
/*margin-top: ${(props) =>
props.noBorder
? props.theme.comboBox.arrow.marginTopWithBorder
: props.theme.comboBox.arrow.marginTop};*/
props.displayArrow ? props.theme.comboBox.arrow.flex : "0px"};
margin-right: ${(props) =>
props.needDisplay ? props.theme.comboBox.arrow.marginRight : "0px"};
props.displayArrow ? props.theme.comboBox.arrow.marginRight : "0px"};
margin-left: ${(props) =>
props.needDisplay ? props.theme.comboBox.arrow.marginLeft : "0px"};
props.displayArrow ? props.theme.comboBox.arrow.marginLeft : "0px"};
${(props) =>
props.isOpen &&
@ -227,4 +241,10 @@ const StyledArrowIcon = styled.div`
`;
StyledArrowIcon.defaultProps = { theme: Base };
export { StyledArrowIcon, StyledIcon, StyledOptionalItem, StyledComboButton };
export {
StyledArrowIcon,
StyledIcon,
StyledOptionalItem,
StyledComboButton,
StyledTriangleDownIcon,
};

10
packages/components/themes/base.js
View File

@ -1610,7 +1610,7 @@ const Base = {
marginTopWithBorder: "5px",
marginTop: "12px",
marginRight: "8px",
marginLeft: "-2px",
marginLeft: "auto",
},
button: {
@ -1618,7 +1618,13 @@ const Base = {
heightWithBorder: "30px",
heightModernView: "28px",
paddingLeft: "8px",
paddingLeft: "16px",
paddingRightNoArrow: "16px",
paddingRight: "8px",
selectPaddingLeft: "8px",
selectPaddingRightNoArrow: "14px",
selectPaddingRight: "6px",
color: black,
disabledColor: grayMid,

11
packages/components/themes/dark.js
View File

@ -1598,13 +1598,20 @@ const Dark = {
marginTopWithBorder: "5px",
marginTop: "12px",
marginRight: "8px",
marginLeft: "-2px",
marginLeft: "auto",
},
button: {
height: "18px",
heightWithBorder: "30px",
paddingLeft: "8px",
paddingLeft: "16px",
paddingRightNoArrow: "8px",
paddingRight: "16px",
selectPaddingLeft: "8px",
selectPaddingRightNoArrow: "14px",
selectPaddingRight: "8px",
color: "#858585",
disabledColor: "#858585",

3
public/images/triangle.down.react.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="6" height="3" viewBox="0 0 6 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.78787 2.78787C2.90503 2.90503 3.09497 2.90503 3.21213 2.78787L5.48787 0.512132C5.67686 0.323143 5.54301 0 5.27574 0L0.724264 0C0.456993 0 0.323143 0.323143 0.512132 0.512132L2.78787 2.78787Z" fill="#333333"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 360 B