Merge branch 'bugfix/ui' of github.com:ONLYOFFICE/DocSpace-client into bugfix/ui

packages/client/src/components/Layout/index.js

@@ -112,7 +112,7 @@ const Layout = (props) => {
 
   const onWidthChange = (e) => {
     const { matches } = e;
-    alert(matches);
+
     setIsTabletView(matches);
   };
 

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ChangeRoomOwner/index.js

@@ -0,0 +1,60 @@
+import { inject } from "mobx-react";
+import { withTranslation } from "react-i18next";
+
+import Text from "@docspace/components/text";
+import Link from "@docspace/components/link";
+import Avatar from "@docspace/components/avatar";
+
+import * as Styled from "./index.styled";
+
+const ChangeRoomOwner = ({
+  t,
+  currentUserId,
+  roomOwner,
+  onOwnerChange,
+  currentColorScheme,
+}) => {
+  return (
+    <Styled.ChangeRoomOwner>
+      <Text className="change-owner-label" fontWeight={600} fontSize="13px">
+        {t("Files:RoomOwner")}
+      </Text>
+
+      <div className="change-owner-display">
+        <Avatar
+          className={"change-owner-display-avatar"}
+          size="base"
+          role={""}
+          isDefaultSource={roomOwner.hasAvatar}
+          source={roomOwner.avatarSmall}
+          userName={roomOwner.displayName}
+        />
+        <div className="change-owner-display-name">
+          <Text fontWeight={600} fontSize="13px">
+            {roomOwner.displayName}
+          </Text>
+          {roomOwner?.id === currentUserId && (
+            <Text className="me-label">({t("Common:MeLabel")})</Text>
+          )}
+        </div>
+      </div>
+
+      <Link
+        className="change-owner-link"
+        isHovered
+        type="action"
+        fontWeight={600}
+        fontSize="13px"
+        color={currentColorScheme.main.accent}
+        onClick={onOwnerChange}
+      >
+        {t("Common:ChangeButton")}
+      </Link>
+    </Styled.ChangeRoomOwner>
+  );
+};
+
+export default inject(({ auth, dialogsStore }) => ({
+  currentUserId: auth.userStore.user.id,
+  currentColorScheme: auth.settingsStore.currentColorScheme,
+}))(withTranslation(["Common"])(ChangeRoomOwner));

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ChangeRoomOwner/index.styled.js

@@ -0,0 +1,23 @@
+import { Base } from "@docspace/components/themes";
+import styled from "styled-components";
+
+export const ChangeRoomOwner = styled.div`
+  .change-owner-display {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 8px 0;
+
+    .change-owner-display-name {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      .me-label {
+        color: ${({ theme }) => theme.text.disableColor};
+      }
+    }
+  }
+`;
+
+ChangeRoomOwner.defaultProps = { theme: Base };

packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js

@@ -21,6 +21,8 @@ import PreviewTile from "@docspace/components/ImageEditor/PreviewTile";
 import Text from "@docspace/components/text";
 import Link from "@docspace/components/link";
 import NoUserSelect from "@docspace/components/utils/commonStyles";
+import Avatar from "@docspace/components/avatar";
+import ChangeRoomOwner from "./ChangeRoomOwner";
 
 const StyledSetRoomParams = styled.div`
   display: flex;
@@ -38,27 +40,6 @@ const StyledSetRoomParams = styled.div`
     justify-content: start;
     gap: 16px;
   }
-
-  .room-owner-block {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin: 8px 0;
-  }
-
-  .owner-display-name-block {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-
-  .change-owner-link {
-    color: ${(props) => props.currentColorScheme.main.accent};
-  }
-
-  .me-label {
-    color: ${(props) => props.theme.text.disableColor};
-  }
 `;
 
 const StyledIcon = styled.img`
@@ -105,8 +86,7 @@ const SetRoomParams = ({
     );
   };
 
-  const isMe = userId === roomParams?.roomOwner?.id;
-  const canOwnerChange = isAdmin || isMe;
+  console.log(roomParams);
 
   return (
     <StyledSetRoomParams currentColorScheme={currentColorScheme}>
@@ -149,6 +129,7 @@ const SetRoomParams = ({
         setIsScrollLocked={setIsScrollLocked}
         isDisabled={isDisabled}
       />
+
       {/* //TODO: Uncomment when private rooms are done
       {!isEdit && (
         <IsPrivateParam
@@ -158,38 +139,11 @@ const SetRoomParams = ({
         />
       )} */}
 
-      {canOwnerChange && roomParams.roomOwner && (
-        <div>
-          <Text fontWeight={600} fontSize="13px">
-            {t("Files:RoomOwner")}
-          </Text>
-
-          <div className="room-owner-block">
-            <StyledIcon
-              className="react-svg-icon"
-              src={roomParams.roomOwner.avatarSmall}
-            />
-            <div className="owner-display-name-block">
-              <Text fontWeight={600} fontSize="13px">
-                {roomParams.roomOwner.displayName}
-              </Text>
-              {isMe && (
-                <Text className="me-label">({t("Common:MeLabel")})</Text>
-              )}
-            </div>
-          </div>
-
-          <Link
-            isHovered
-            type="action"
-            fontWeight={600}
-            fontSize="13px"
-            className="change-owner-link"
-            onClick={onOwnerChange}
-          >
-            {t("Common:ChangeButton")}
-          </Link>
-        </div>
+      {(isAdmin || isMe) && roomParams.roomOwner && (
+        <ChangeRoomOwner
+          roomOwner={roomParams.roomOwner}
+          onOwnerChange={onOwnerChange}
+        />
       )}
 
       {!isEdit && enableThirdParty && (
@@ -203,6 +157,7 @@ const SetRoomParams = ({
           isDisabled={isDisabled}
         />
       )}
+
       <div>
         <Text fontWeight={600} className="icon-editor_text">
           {t("Icon")}