Merge pull request #895 from ONLYOFFICE/bugfix/context-menu-header

Bugfix/context menu header

packages/common/components/FilterInput/sub-components/SortButton.js

@@ -32,16 +32,6 @@ const notSelectedViewIcon = css`
   }
 `;
 
-const mobileView = css`
-  position: fixed;
-  top: auto;
-  left: 0;
-  bottom: 0;
-  width: 100vw;
-
-  z-index: 999;
-`;
-
 const StyledSortButton = styled.div`
   .combo-button {
     background: ${(props) =>
@@ -64,10 +54,6 @@ const StyledSortButton = styled.div`
       min-width: 200px;
       margin-top: 3px;
 
-      @media (max-width: 428px) {
-        ${mobileView}
-      }
-
       .view-selector-item {
         display: flex;
         align-items: center;
@@ -299,6 +285,12 @@ const SortButton = ({
     </>
   );
 
+  let advancedOptionsCount = sortData.length;
+
+  if (viewSelectorVisible) {
+    advancedOptionsCount++;
+  }
+
   return (
     <>
       <Backdrop
@@ -327,6 +319,7 @@ const SortButton = ({
           disableItemClick={true}
           isDefaultMode={false}
           manualY={"102%"}
+          advancedOptionsCount={advancedOptionsCount}
         >
           <IconButton iconName="/static/images/sort.react.svg" size={16} />
         </ComboBox>

packages/components/combobox/index.js

@@ -108,6 +108,8 @@ class ComboBox extends React.Component {
       isPersonal,
       offsetLeft,
       modernView,
+
+      advancedOptionsCount,
     } = this.props;
     const { isOpen, selectedOption } = this.state;
 
@@ -130,6 +132,14 @@ class ComboBox extends React.Component {
 
     const withAdvancedOptions = !!advancedOptions?.props.children;
 
+    let optionsCount = optionsLength;
+
+    if (withAdvancedOptions) {
+      optionsCount = advancedOptionsCount ? advancedOptionsCount : 6;
+    }
+
+    const disableMobileView = optionsCount < 5;
+
     return (
       <StyledComboBox
         ref={this.ref}
@@ -140,6 +150,7 @@ class ComboBox extends React.Component {
         onClick={this.comboBoxClick}
         toggleAction={toggleAction}
         isOpen={isOpen}
+        disableMobileView={disableMobileView}
         {...this.props}
       >
         <ComboButton
@@ -276,6 +287,9 @@ ComboBox.propTypes = {
 
   /**Tell when combo-box should displaying at modern view */
   modernView: PropTypes.bool,
+
+  /**Count of advanced options  */
+  advancedOptionsCount: PropTypes.number,
 };
 
 ComboBox.defaultProps = {

packages/components/combobox/styled-combobox.js

@@ -27,20 +27,25 @@ const StyledComboBox = styled.div`
     padding: ${(props) =>
       props.advancedOptions && props.theme.comboBox.padding};
 
-    @media (max-width: 428px) {
-      position: fixed;
-      top: unset;
-      right: 0;
-      left: 0;
-      bottom: 0;
-      width: 100%;
-      width: -moz-available;
-      width: -webkit-fill-available;
-      width: fill-available;
-      border: none;
-      border-radius: 6px 6px 0px 0px;
-    }
+    ${(props) =>
+      !props.disableMobileView &&
+      css`
+        @media (max-width: 428px) {
+          position: fixed;
+          top: unset !important;
+          right: 0;
+          left: 0;
+          bottom: 0 !important;
+          width: 100%;
+          width: -moz-available;
+          width: -webkit-fill-available;
+          width: fill-available;
+          border: none;
+          border-radius: 6px 6px 0px 0px;
+        }
+      `}
   }
+
   -webkit-user-select: none;
 
   .backdrop-active {

packages/components/context-menu/index.js

@@ -16,6 +16,7 @@ import {
 import Backdrop from "../backdrop";
 import Text from "../text";
 import { ReactSVG } from "react-svg";
+import Avatar from "../avatar";
 
 class ContextMenu extends Component {
   constructor(props) {
@@ -292,6 +293,9 @@ class ContextMenu extends Component {
 
     const changeView = this.state.changeView;
     const isIconExist = this.props.header?.icon;
+    const isAvatarExist = this.props.header?.avatar;
+
+    const withHeader = !!this.props.header?.title;
 
     return (
       <>
@@ -300,6 +304,7 @@ class ContextMenu extends Component {
           isRoom={this.props.isRoom}
           fillIcon={this.props.fillIcon}
           isIconExist={isIconExist}
+          isAvatarExist={isAvatarExist}
         >
           <CSSTransition
             nodeRef={this.menuRef}
@@ -320,7 +325,7 @@ class ContextMenu extends Component {
               onClick={this.onMenuClick}
               onMouseEnter={this.onMenuMouseEnter}
             >
-              {changeView && (
+              {changeView && withHeader && (
                 <div className="contextmenu-header">
                   {isIconExist && (
                     <div className="icon-wrapper">
@@ -330,6 +335,15 @@ class ContextMenu extends Component {
                       />
                     </div>
                   )}
+                  {isAvatarExist && (
+                    <div className="avatar-wrapper">
+                      <Avatar
+                        src={this.props.header.avatar}
+                        size={"min"}
+                        className="drop-down-item_avatar"
+                      />
+                    </div>
+                  )}
                   <Text className="text" truncate={true}>
                     {this.props.header.title}
                   </Text>

packages/components/context-menu/styled-context-menu.js

@@ -84,18 +84,21 @@ const StyledContextMenu = styled.div`
       min-height: ${(props) =>
         props.isRoom ? "32px" : props.theme.menuItem.iconWrapper.header.height};
 
-      ${(props) =>
-        props.isRoom &&
-        css`
-          .drop-down-item_icon {
+      .drop-down-item_icon {
+        display: flex;
+        align-items: center;
+
+        ${(props) =>
+          props.isRoom &&
+          css`
             width: 100%;
             height: 100%;
 
             svg {
               border-radius: 6px;
             }
-          }
-        `}
+          `}
+      }
 
       svg {
         &:not(:root) {
@@ -105,11 +108,19 @@ const StyledContextMenu = styled.div`
       }
     }
 
+    .avatar-wrapper {
+      min-width: 32px;
+
+      box-sizing: border-box;
+
+      margin-right: 8px;
+    }
+
     .text {
       width: 100%;
       font-size: ${(props) => props.theme.menuItem.text.header.fontSize};
       font-weight: 600;
-      line-height: ${(props) => props.theme.menuItem.text.header.lineHeight};
+      line-height: 16px;
       ${(props) =>
         props.isIconExist &&
         css`

packages/components/row/index.js

@@ -85,7 +85,10 @@ class Row extends React.Component {
     if (children.props.item) {
       contextMenuHeader = {
         icon: children.props.item.icon,
-        title: children.props.item.title,
+        avatar: children.props.item.avatar,
+        title: children.props.item.title
+          ? children.props.item.title
+          : children.props.item.displayName,
       };
     }
 

packages/components/themes/base.js

@@ -2568,7 +2568,7 @@ const Base = {
     background: "none",
     svgFill: black,
     header: {
-      height: "50px",
+      height: "49px",
       borderBottom: `1px solid ${grayLightMid}`,
       marginBottom: "6px",
     },
@@ -2578,7 +2578,7 @@ const Base = {
     padding: "0 12px",
     mobile: {
       height: "36px",
-      padding: "0 16px",
+      padding: "0 16px 6px",
     },
   },
   newContextMenu: {

packages/components/themes/dark.js

@@ -2575,7 +2575,7 @@ const Dark = {
     background: "none",
     svgFill: "#eeeeee",
     header: {
-      height: "50px",
+      height: "49px",
       borderBottom: `1px solid #474747`,
       marginBottom: "6px",
     },
@@ -2585,7 +2585,7 @@ const Dark = {
     padding: "0 12px",
     mobile: {
       height: "36px",
-      padding: "0 16px",
+      padding: "0 16px 6px",
     },
   },
   newContextMenu: {