fixed name truncation and restyled dropdown

products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/styles/VirtualRoom/members.js

@@ -8,8 +8,6 @@ const StyledUserTypeHeader = styled.div`
   padding: 24px 0 16px;
 
   .title {
-    font-family: "Open Sans";
-    font-style: normal;
     font-weight: 600;
     font-size: 13px;
     line-height: 20px;
@@ -36,40 +34,54 @@ const StyledUser = styled.div`
   padding: 8px 0;
 
   .avatar {
+    opacity: ${(props) => (props.isExpect ? 0.5 : 1)};
     min-width: 32px;
     min-height: 32px;
   }
 
   .name {
-    font-family: "Open Sans";
-    font-style: normal;
+    opacity: ${(props) => (props.isExpect ? 0.5 : 1)};
     font-weight: 600;
     font-size: 14px;
 
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+  }
 
-    .secondary-info {
-      color: #a3a9ae;
-    }
+  .me-label {
+    font-weight: 600;
+    font-size: 14px;
+    color: #a3a9ae;
+    margin-left: -8px;
   }
 
   .role-wrapper {
+    padding-left: 8px;
     margin-left: auto;
 
-    font-family: "Open Sans";
-    font-style: normal;
     font-weight: 600;
     font-size: 13px;
     line-height: 20px;
     white-space: nowrap;
 
-    color: #555f65;
-
     .role {
       a {
-        padding: 0;
+        padding-right: ${(props) => (props.canEditRole ? "16px" : "0")};
+        margin-right: ${(props) => (props.canEditRole ? "-6px" : "0")};
+        span {
+          color: ${(props) => (props.canEditRole ? "#555f65" : "#A3A9AE")};
+        }
+        &:hover {
+          text-decoration: none;
+        }
+
+        svg {
+          ${(props) => !props.canEditRole && "display: none"};
+          path {
+            fill: #a3a9ae;
+          }
+        }
       }
     }
   }

products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/views/Members/User.js

@@ -4,9 +4,13 @@ import { StyledUser } from "../../styles/VirtualRoom/members";
 import Avatar from "@appserver/components/avatar";
 import LinkWithDropdown from "@appserver/components/link-with-dropdown";
 
-const User = ({ t, user, selfId }) => {
+const User = ({ t, user, selfId, isExpect }) => {
   return (
-    <StyledUser key={user.id} canEdit>
+    <StyledUser
+      isExpect={isExpect}
+      key={user.id}
+      canEditRole={user.role !== "Owner"}
+    >
       <Avatar
         role="user"
         className="avatar"
@@ -17,12 +21,12 @@ const User = ({ t, user, selfId }) => {
         }
         userName={user.displayName}
       />
-      <div className="name">
-        {user.displayName || user.email}
-        {selfId === user.id && (
-          <span className="secondary-info">{` (${t("Common:MeLabel")})`}</span>
-        )}
-      </div>
+
+      <div className="name">{user.displayName || user.email}</div>
+      {selfId === user.id && (
+        <div className="me-label">&nbsp;{`(${t("Common:MeLabel")})`}</div>
+      )}
+
       <div className="role-wrapper">
         <LinkWithDropdown
           className="role"
@@ -33,25 +37,31 @@ const User = ({ t, user, selfId }) => {
           fontWeight={600}
           hasScroll={true}
           withBackdrop={false}
-          dropdownType="alwaysDashed"
+          dropdownType="apparDashedAfterHover"
+          isDisabled={user.role === "Owner"}
           data={[
             {
               key: "key1",
-              label: "Button 1",
+              label: "Room manager",
               onClick: () => {},
             },
             {
               key: "key2",
-              label: "Button 2",
+              label: "Co-worker",
+              onClick: function noRefCheck() {},
+            },
+            {
+              key: "key3",
+              label: "Viewer",
               onClick: function noRefCheck() {},
             },
             {
               isSeparator: true,
-              key: "key3",
+              key: "key4",
             },
             {
-              key: "key4",
-              label: "Button 3",
+              key: "key5",
+              label: "Remove",
               onClick: function noRefCheck() {},
             },
           ]}

products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/views/Members/UserList.js

@@ -4,11 +4,17 @@ import User from "./User";
 
 import { StyledUserList } from "../../styles/VirtualRoom/members";
 
-const UserList = ({ t, users, selfId }) => {
+const UserList = ({ t, users, selfId, isExpect }) => {
   return (
     <StyledUserList>
       {users.map((user) => (
-        <User t={t} key={user.id} selfId={selfId} user={user} />
+        <User
+          t={t}
+          key={user.id}
+          selfId={selfId}
+          user={user}
+          isExpect={isExpect}
+        />
       ))}
     </StyledUserList>
   );

products/ASC.Files/Client/src/pages/Home/InfoPanel/Body/views/Members/index.js

@@ -35,40 +35,8 @@ const Members = ({ t, selfId }) => {
 
       <UserList t={t} users={data.members.inRoom} selfId={selfId} />
 
-      {/* <StyledUserList>
-        {data.members.inRoom.map((user) => (
-          <StyledUser key={user.id} canEdit>
-            <Avatar
-              role="user"
-              className="avatar"
-              size="min"
-              source={
-                user.avatar ||
-                (user.displayName
-                  ? ""
-                  : user.email && "/static/images/@.react.svg")
-              }
-              userName={user.displayName}
-            />
-            <div className="name">
-              {user.displayName || user.email}
-              {selfId === user.id && (
-                <span className="secondary-info">
-                  {" (" + t("Common:MeLabel") + ")"}
-                </span>
-              )}
-            </div>
-            <div className="role-wrapper">
-        
-            </div>
-          </StyledUser>
-        ))}
-      </StyledUserList> */}
-
       <StyledUserTypeHeader>
-        <Text className="title">
-          {t("Expect people")} : {data.members.expect.length}
-        </Text>
+        <Text className="title">{`${t("Expect people")}:`}</Text>
         <IconButton
           className={"icon"}
           title={t("Repeat invitation")}
@@ -80,29 +48,7 @@ const Members = ({ t, selfId }) => {
         />
       </StyledUserTypeHeader>
 
-      <UserList t={t} users={data.members.expect} />
-
-      {/* <StyledUserList>
-        {data.members.expect.map((user) => (
-          <StyledUser key={user.id} canEdit>
-            <Avatar
-              role="user"
-              className="avatar"
-              size="min"
-              source={
-                user.avatar ||
-                (user.displayName
-                  ? ""
-                  : user.email && "/static/images/@.react.svg")
-              }
-              userName={user.displayName}
-            />
-            <Text truncate className="name">
-              {user.displayName || user.email}
-            </Text>
-          </StyledUser>
-        ))}
-      </StyledUserList> */}
+      <UserList t={t} users={data.members.expect} isExpect />
     </>
   );
 };