Web: Added context menu to the mobile view.

packages/client/src/pages/Wizard/index.js

@@ -351,6 +351,22 @@ class Body extends Component {
       },
     });
 
+  onSelectContextLanguage = (obj) => {
+    this.setState({
+      selectLanguage: {
+        key: obj.item.key,
+        label: obj.item.label,
+      },
+    });
+  };
+  onSelectContextTimezones = (obj) => {
+    this.setState({
+      selectTimezone: {
+        key: obj.item.key,
+        label: obj.item.label,
+      },
+    });
+  };
   onInputFileHandler = (file) => {
     const {
       setLicense,
@@ -475,6 +491,8 @@ class Body extends Component {
               onClickChangeEmail={this.onClickChangeEmail}
               onSelectLanguageHandler={this.onSelectLanguageHandler}
               onSelectTimezoneHandler={this.onSelectTimezoneHandler}
+              onSelectContextLanguage={this.onSelectContextLanguage}
+              onSelectContextTimezones={this.onSelectContextTimezones}
             />
 
             <ButtonContainer

packages/client/src/pages/Wizard/sub-components/settings-container.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef, useEffect } from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 
@@ -7,6 +7,8 @@ import ComboBox from "@docspace/components/combobox";
 import Text from "@docspace/components/text";
 import Link from "@docspace/components/link";
 import { tablet } from "@docspace/components/utils/device";
+import { isMobileOnly } from "react-device-detect";
+import ContextMenu from "@docspace/components/context-menu";
 
 const StyledContainer = styled(Box)`
   width: 311px;
@@ -16,6 +18,12 @@ const StyledContainer = styled(Box)`
   grid-auto-columns: min-content;
   grid-row-gap: 12px;
 
+  .settings-container_mobile-view {
+    p {
+      margin-left: 16px;
+      text-decoration: underline dashed;
+    }
+  }
   .title {
     white-space: nowrap;
   }
@@ -41,6 +49,8 @@ const StyledContainer = styled(Box)`
   }
 `;
 
+let newLanguagesArray = [],
+  newTimezoneArray = [];
 const SettingsContainer = ({
   selectLanguage,
   selectTimezone,
@@ -54,8 +64,30 @@ const SettingsContainer = ({
   onClickChangeEmail,
   onSelectLanguageHandler,
   onSelectTimezoneHandler,
+  onSelectContextLanguage,
+  onSelectContextTimezones,
 }) => {
+  const addedActionToArray = () => {
+    const cultures = [...languages].map((culture) => {
+      culture.onClick = onSelectContextLanguage;
+      return culture;
+    });
+    const timezonesArray = [...timezones].map((timezone) => {
+      timezone.onClick = onSelectContextTimezones;
+      return timezone;
+    });
+
+    return [cultures, timezonesArray];
+  };
+
+  useEffect(() => {
+    if (isMobileOnly)
+      [newLanguagesArray, newTimezoneArray] = addedActionToArray();
+  }, []);
+
   const titleEmail = !emailNeeded ? <Text>{t("Common:Email")}</Text> : null;
+  const languageRef = useRef(null);
+  const timezoneRef = useRef(null);
 
   const contentEmail = !emailNeeded ? (
     <Link
@@ -70,17 +102,50 @@ const SettingsContainer = ({
     </Link>
   ) : null;
 
-  return (
-    <StyledContainer>
-      <Text fontSize="13px">{t("Domain")}</Text>
-      <Text className="machine-name-value" fontSize="13px" fontWeight="600">
-        {machineName}
-      </Text>
+  const onLanguageContextMenu = (e) => {
+    languageRef.current.show(e);
+  };
+  const onTimezoneContextMenu = (e) => {
+    timezoneRef.current.show(e);
+  };
 
-      {titleEmail}
-      {contentEmail}
+  const mobileLanguageContainer = () => {
+    return (
+      <div className="settings-container_mobile-view">
+        <Text onClick={onLanguageContextMenu} fontWeight="600">
+          {selectLanguage.label}
+        </Text>
+        <ContextMenu
+          getContextModel={() => newLanguagesArray}
+          ref={languageRef}
+          header={{ title: t("Common:Language") }}
+          withBackdrop={true}
+          isRoom={true}
+          fillIcon={false}
+        />
+      </div>
+    );
+  };
+  const mobileTimezoneContainer = () => {
+    return (
+      <div className="settings-container_mobile-view">
+        <Text onClick={onTimezoneContextMenu} fontWeight="600">
+          {selectTimezone.label}
+        </Text>
+        <ContextMenu
+          getContextModel={() => newTimezoneArray}
+          ref={timezoneRef}
+          header={{ title: t("Timezone") }}
+          withBackdrop={true}
+          isRoom={true}
+          fillIcon={false}
+        />
+      </div>
+    );
+  };
 
-      <Text fontSize="13px">{t("Common:Language")}:</Text>
+  const languageContainer = () => {
+    return (
       <ComboBox
         className="drop-down"
         options={languages}
@@ -97,10 +162,11 @@ const SettingsContainer = ({
         fillIcon={false}
         manualWidth="250px"
       />
+    );
+  };
 
-      <Text className="title" fontSize="13px">
-        {t("Timezone")}
-      </Text>
+  const timezoneContainer = () => {
+    return (
       <ComboBox
         className="drop-down"
         options={timezones}
@@ -116,6 +182,28 @@ const SettingsContainer = ({
         textOverflow={true}
         manualWidth="280px"
       />
+    );
+  };
+
+  return (
+    <StyledContainer>
+      <Text fontSize="13px">{t("Domain")}</Text>
+      <Text className="machine-name-value" fontSize="13px" fontWeight="600">
+        {machineName}
+      </Text>
+
+      {titleEmail}
+      {contentEmail}
+
+      <Text fontSize="13px">{t("Common:Language")}:</Text>
+
+      {isMobileOnly ? mobileLanguageContainer() : languageContainer()}
+
+      <Text className="title" fontSize="13px">
+        {t("Timezone")}
+      </Text>
+
+      {isMobileOnly ? mobileTimezoneContainer() : timezoneContainer()}
     </StyledContainer>
   );
 };

packages/components/context-menu/index.js

@@ -291,10 +291,16 @@ class ContextMenu extends Component {
     );
 
     const changeView = this.state.changeView;
+    const isIconExist = this.props.header?.icon;
 
     return (
       <>
-        <StyledContextMenu changeView={changeView} isRoom={this.props.isRoom}>
+        <StyledContextMenu
+          changeView={changeView}
+          isRoom={this.props.isRoom}
+          fillIcon={this.props.fillIcon}
+          isIconExist={isIconExist}
+        >
           <CSSTransition
             nodeRef={this.menuRef}
             classNames="p-contextmenu"
@@ -316,12 +322,14 @@ class ContextMenu extends Component {
             >
               {changeView && (
                 <div className="contextmenu-header">
-                  <div className="icon-wrapper">
-                    <ReactSVG
-                      src={this.props.header.icon}
-                      className="drop-down-item_icon"
-                    />
-                  </div>
+                  {isIconExist && (
+                    <div className="icon-wrapper">
+                      <ReactSVG
+                        src={this.props.header.icon}
+                        className="drop-down-item_icon"
+                      />
+                    </div>
+                  )}
                   <Text className="text" truncate={true}>
                     {this.props.header.title}
                   </Text>
@@ -411,6 +419,7 @@ ContextMenu.defaultProps = {
   scaled: false,
   containerRef: null,
   leftOffset: 0,
+  fillIcon: true,
 };
 
 export default ContextMenu;

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

@@ -110,7 +110,12 @@ const StyledContextMenu = styled.div`
       font-size: ${(props) => props.theme.menuItem.text.header.fontSize};
       font-weight: 600;
       line-height: ${(props) => props.theme.menuItem.text.header.lineHeight};
-      margin: ${(props) => props.theme.menuItem.text.margin};
+      ${(props) =>
+        props.isIconExist &&
+        css`
+          margin: ${(props) => props.theme.menuItem.text.margin};
+        `}
+
       color: ${(props) => props.theme.menuItem.text.color};
       text-align: left;
       text-transform: none;
@@ -216,16 +221,22 @@ const StyledContextMenu = styled.div`
       height: 16px;
       width: 16px;
     }
-    path[fill],
-    circle[fill],
-    rect[fill] {
-      fill: ${(props) => props.theme.dropDownItem.icon.color};
-    }
+     {
+      ${(props) =>
+        props.fillIcon &&
+        css`
+          path[fill],
+          circle[fill],
+          rect[fill] {
+            fill: ${(props) => props.theme.dropDownItem.icon.color};
+          }
 
-    path[stroke],
-    circle[stroke],
-    rect[stroke] {
-      stroke: ${(props) => props.theme.dropDownItem.icon.color};
+          path[stroke],
+          circle[stroke],
+          rect[stroke] {
+            stroke: ${(props) => props.theme.dropDownItem.icon.color};
+          }
+        `}
     }
 
     &.p-disabled {

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

@@ -41,6 +41,7 @@ const SubMenu = (props) => {
       onClick({
         originalEvent: e,
         action: action,
+        item,
       });
     }