Merge branch 'feature/virtual-rooms-1.2' into feature/oforms-gallery

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

@@ -13,6 +13,7 @@ import { mobile } from "@appserver/components/utils/device";
 import { Base } from "@appserver/components/themes";
 
 import SortDesc from "../../../../../public/images/sort.desc.react.svg";
+import Backdrop from "@appserver/components/backdrop";
 
 const selectedViewIcon = css`
   svg {
@@ -203,14 +204,14 @@ const SortButton = ({
 
   const onOptionClick = React.useCallback(
     (e) => {
-      const sortDirection =
-        currentSelectedFilterData.sortDirection === "desc" &&
-        e.target.closest(".option-item__icon")
-          ? "asc"
-          : "desc";
-
       const key = e.target.closest(".option-item").dataset.value;
 
+      let sortDirection = currentSelectedFilterData.sortDirection;
+
+      if (key === currentSelectedFilterData.sortId) {
+        sortDirection = sortDirection === "desc" ? "asc" : "desc";
+      }
+
       setCurrentSelectedFilterData({
         sortId: key,
         sortDirection: sortDirection,
@@ -287,30 +288,37 @@ const SortButton = ({
   ]);
 
   return (
-    <StyledSortButton
-      viewAs={viewAs}
-      isDesc={currentSelectedFilterData.sortDirection === "desc"}
-      onClick={toggleCombobox}
-    >
-      <ComboBox
-        opened={isOpen}
-        toggleAction={toggleCombobox}
-        className={"sort-combo-box"}
-        options={[]}
-        selectedOption={{}}
-        directionX={"right"}
-        directionY={"both"}
-        scaled={true}
-        size={"content"}
-        advancedOptions={getAdvancedOptions()}
-        disableIconClick={false}
-        disableItemClick={true}
-        isDefaultMode={false}
-        manualY={"102%"}
+    <>
+      <Backdrop
+        visible={isOpen}
+        withBackground={true}
+        onClick={toggleCombobox}
+      />
+      <StyledSortButton
+        viewAs={viewAs}
+        isDesc={currentSelectedFilterData.sortDirection === "desc"}
+        onClick={toggleCombobox}
       >
-        <IconButton iconName="/static/images/sort.react.svg" size={16} />
-      </ComboBox>
-    </StyledSortButton>
+        <ComboBox
+          opened={isOpen}
+          toggleAction={toggleCombobox}
+          className={"sort-combo-box"}
+          options={[]}
+          selectedOption={{}}
+          directionX={"right"}
+          directionY={"both"}
+          scaled={true}
+          size={"content"}
+          advancedOptions={getAdvancedOptions()}
+          disableIconClick={false}
+          disableItemClick={true}
+          isDefaultMode={false}
+          manualY={"102%"}
+        >
+          <IconButton iconName="/static/images/sort.react.svg" size={16} />
+        </ComboBox>
+      </StyledSortButton>
+    </>
   );
 };
 

products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js

@@ -258,14 +258,14 @@ class TileContainer extends React.PureComponent {
   };
 
   onOptionClick = (e) => {
-    const sortDirection =
-      this.state.selectedFilterData.sortDirection === "desc" &&
-      e.target.closest(".option-item__icon")
-        ? "asc"
-        : "desc";
-
     const key = e.target.closest(".option-item").dataset.value;
 
+    let sortDirection = this.state.selectedFilterData.sortDirection;
+
+    if (key === this.state.selectedFilterData.sortId) {
+      sortDirection = sortDirection === "desc" ? "asc" : "desc";
+    }
+
     this.setState({
       selectedFilterData: {
         sortId: key,
@@ -414,7 +414,7 @@ class TileContainer extends React.PureComponent {
                       size={"content"}
                       advancedOptions={advancedOptions}
                       disableIconClick={false}
-                      disableItemClick={true}
+                      // disableItemClick={true}
                       isDefaultMode={false}
                       noBorder={true}
                       manualY={"102%"}

products/ASC.People/Client/src/pages/Profile/Section/Body/ProfileInfo/ProfileInfo.js

@@ -31,7 +31,7 @@ const InfoItem = styled.div`
   font-size: 13px;
   line-height: 24px;
   display: flex;
-  width: 360px;
+  width: 358px;
 `;
 
 const InfoItemLabel = styled.div`

web/ASC.Web.Client/src/components/Main/index.js

@@ -5,7 +5,7 @@ import { isIOS, isFirefox, isMobile, isMobileOnly } from "react-device-detect";
 const StyledMain = styled.main`
   height: ${(props) =>
     isIOS && !isFirefox
-      ? "calc(100vh - 48px)"
+      ? "calc(var(--vh, 1vh) * 100)"
       : props.isDesktop
       ? "100vh"
       : "calc(100vh - 48px)"};