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

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

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

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

@@ -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>

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

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

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

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

packages/components/combobox/index.js

@@ -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

packages/components/combobox/sub-components/combo-button.js

@@ -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)`
+const ComboButton = (props) => {
-  ${commonIconsStyles}
+  const {
-`;
+    noBorder,
-class ComboButton extends React.Component {
+    onClick,
-  render() {
+    isDisabled,
-    const {
+    innerContainer,
-      noBorder,
+    innerContainerClassName,
-      onClick,
+    selectedOption,
-      isDisabled,
+    optionsLength,
-      innerContainer,
+    withOptions,
-      innerContainerClassName,
+    withAdvancedOptions,
-      selectedOption,
+    isOpen,
-      optionsLength,
+    scaled,
-      withOptions,
+    size,
-      withAdvancedOptions,
+    comboIcon,
-      isOpen,
+    fillIcon,
-      scaled,
+    modernView,
-      size,
+    tabIndex,
-      comboIcon,
+  } = props;
-      fillIcon,
-      modernView,
-      tabIndex,
-      isLeftwardContent,
-    } = this.props;
 
-    const defaultOption = selectedOption?.default;
+  const defaultOption = selectedOption?.default;
-    const isSelected = selectedOption?.key !== 0;
+  const isSelected = selectedOption?.key !== 0;
+  const displayArrow = withOptions || withAdvancedOptions;
 
-    return (
+  return (
-      <ColorTheme
+    <ColorTheme
-        isOpen={isOpen}
+      isOpen={isOpen}
-        isDisabled={isDisabled}
+      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}
+        title={selectedOption?.label}
-        withAdvancedOptions={withAdvancedOptions}
+        as="div"
-        onClick={onClick}
+        truncate={true}
-        scaled={scaled}
+        fontWeight={600}
-        size={size}
+        className="combo-button-label"
-        isSelected={isSelected}
-        modernView={modernView}
-        className="combo-button"
-        themeId={ThemeType.ComboButton}
-        tabIndex={tabIndex}
-        isLeftwardContent={isLeftwardContent}
       >
-        {innerContainer && (
+        {selectedOption?.label}
-          <StyledOptionalItem
+      </Text>
-            className={innerContainerClassName}
+
-            isDisabled={isDisabled}
+      <StyledArrowIcon
-            defaultOption={defaultOption}
+        displayArrow={displayArrow}
-          >
+        noBorder={noBorder}
-            {innerContainer}
+        isOpen={isOpen}
-          </StyledOptionalItem>
+        modernView={modernView}
-        )}
+        className="combo-buttons_arrow-icon"
-        {selectedOption && selectedOption.icon && (
+      >
-          <StyledIcon
+        {displayArrow &&
-            className="forceColor"
+          (comboIcon ? (
-            isDisabled={isDisabled}
+            <ReactSVG src={comboIcon} className="combo-buttons_expander-icon" />
-            defaultOption={defaultOption}
+          ) : (
-            isSelected={isSelected}
+            <StyledTriangleDownIcon
-          >
+              size="scale"
-            <ReactSVG
+              className="combo-buttons_expander-icon"
-              src={selectedOption.icon}
-              className={fillIcon ? "combo-button_selected-icon" : ""}
             />
-          </StyledIcon>
+          ))}
-        )}
+      </StyledArrowIcon>
-
+    </ColorTheme>
-        <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>
-    );
-  }
-}
 
 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;

packages/components/combobox/sub-components/styled-combobutton.js

@@ -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) =>
+  justify-content: center;
-    props.isLeftwardContent ? "space-between" : "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"};
+    props.displayArrow ? props.theme.comboBox.arrow.flex : "0px"};
-  /*margin-top: ${(props) =>
-    props.noBorder
-      ? props.theme.comboBox.arrow.marginTopWithBorder
-      : props.theme.comboBox.arrow.marginTop};*/
   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,
+};

packages/components/themes/base.js

@@ -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,

packages/components/themes/dark.js

@@ -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",

public/images/triangle.down.react.svg

@@ -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>