Added word break for room name in room's setting card and also set a …

…limit to 50 characters when creating a new room
cinnyapp · Dec 21, 2024 · daf58e4 · daf58e4
1 parent 35f0e40
commit daf58e4
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 21 deletions.
diff --git a/src/app/molecules/room-profile/RoomProfile.jsx b/src/app/molecules/room-profile/RoomProfile.jsx
@@ -184,21 +184,39 @@ function RoomProfile({ roomId }) {
   const renderNameAndTopic = () => (
     <div
       className="room-profile__display"
-      style={{ marginBottom: avatarSrc && canChangeAvatar ? '24px' : '0' }}
+      style={{ marginBottom: avatarSrc && canChangeAvatar ? '24px' : '0',width:"100%",maxWidth:"90%"}}
     >
-      <div>
-        <Text variant="h2" weight="medium" primary>
-          {roomName}
-        </Text>
-        {(canChangeName || canChangeTopic) && (
-          <IconButton
-            src={PencilIC}
-            size="extra-small"
-            tooltip="Edit"
-            onClick={() => setIsEditing(true)}
-          />
-        )}
-      </div>
+  <div
+    style={{
+      wordWrap: "break-word", 
+      width: "100%",
+      display: "flex", 
+      flexDirection: "column", 
+      alignItems: "flex-start", 
+    }}
+  >
+    <Text
+      style={{
+        width: "100%", 
+        whiteSpace: "normal", 
+        wordBreak: "break-word", 
+      }}
+      variant="h2"
+      weight="medium"
+      primary
+    >
+      {roomName}
+    </Text>
+    {(canChangeName || canChangeTopic) && (
+      <IconButton
+        src={PencilIC}
+        size="extra-small"
+        tooltip="Edit"
+        onClick={() => setIsEditing(true)}
+        style={{ marginTop: "8px" }} 
+      />
+    )}
+  </div>
       <Text variant="b3">{room.getCanonicalAlias() || room.roomId}</Text>
       {roomTopic && (
         <Text variant="b2">

diff --git a/src/app/organisms/create-room/CreateRoom.jsx b/src/app/organisms/create-room/CreateRoom.jsx
@@ -43,7 +43,7 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
   const [isValidAddress, setIsValidAddress] = useState(null);
   const [addressValue, setAddressValue] = useState(undefined);
   const [roleIndex, setRoleIndex] = useState(0);
-
+  const [nameError, setNameError] = useState(null);
   const addressRef = useRef(null);
 
   const mx = useMatrixClient();
@@ -121,6 +121,15 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
     }, 1000);
   };
 
+  const validateRoomName =(value) =>{
+    if(value.length > 50){
+      setNameError('Room name should be less than 50 characters');
+      return false;
+    }
+    setNameError(null);
+    return true;
+  }
+
   const joinRules = ['invite', 'restricted', 'public'];
   const joinRuleShortText = ['Private', 'Restricted', 'Public'];
   const joinRuleText = [
@@ -219,17 +228,26 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
           }
         />
         <Input name="topic" minHeight={174} resizable label="Topic (optional)" />
-        <div className="create-room__name-wrapper">
-          <Input name="name" label={`${isSpace ? 'Space' : 'Room'} name`} required />
-          <Button
-            disabled={isValidAddress === false || isCreatingRoom}
+        <div className='create-room__name-wrapper'>
+          <div className="create-room__name-error-wrapper">
+            <Input  name="name" label={`${isSpace ? 'Space' : 'Room'} name`} required error={nameError}  state={nameError !== null ? 'error' : 'normal'} onChange={(e) => validateRoomName(e.target.value)} maxLength={50} />
+            <Button
+            disabled={isValidAddress === false || isCreatingRoom || nameError!==null}
             iconSrc={isSpace ? SpacePlusIC : HashPlusIC}
             type="submit"
             variant="primary"
           >
             Create
           </Button>
-        </div>
+         </div>
+          {nameError !== null && (
+              <Text className="create-room__name-wrapper__tip" variant="b3">
+                <span
+                  style={{ color: 'var(--bg-danger)' }}
+                >{nameError}</span>
+              </Text>
+            )}
+            </div>
         {isCreatingRoom && (
           <div className="create-room__loading">
             <Spinner size="small" />

diff --git a/src/app/organisms/create-room/CreateRoom.scss b/src/app/organisms/create-room/CreateRoom.scss
@@ -64,7 +64,7 @@
 
   &__name-wrapper {
     display: flex;
-    align-items: flex-end;
+    flex-direction: column;
 
     & .input-container {
       flex: 1;
@@ -73,8 +73,19 @@
     }
     & .btn-primary {
       padding-top: 11px;
+      align-self: last baseline;
       padding-bottom: 11px;
     }
+    &__tip {
+      margin-top: var(--sp-ultra-tight);
+      @include dir.side(margin, 26px, 0);
+    }
+  }
+
+  &__name-error-wrapper {
+    display: flex;
+    align-items: center;
+    width: 100%;
   }
 
   &__loading {