Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix not able to edit large room names and added limit to room's name upto 50 #2104

Open
wants to merge 3 commits into
base: dev
Choose a base branch
from
Open

Fix not able to edit large room names and added limit to room's name upto 50 #2104

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
daf58e4
Added word break for room name in room's setting card and also set a …
Vishawdeep-Singh Dec 21, 2024
dc53ca4
Remove width from parent as it is uneccassary
Vishawdeep-Singh Dec 29, 2024
d51b48b
remove room's name chars limit
Vishawdeep-Singh Jan 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 23 additions & 3 deletions src/app/molecules/room-profile/RoomProfile.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,10 +184,29 @@ function RoomProfile({ roomId }) {
const renderNameAndTopic = () => (
<div
className="room-profile__display"
style={{ marginBottom: avatarSrc && canChangeAvatar ? '24px' : '0' }}
style={{
marginBottom: avatarSrc && canChangeAvatar ? '24px' : '0',
}}
>
<div>
<Text variant="h2" weight="medium" primary>
<div
style={{
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
overflowWrap: 'break-word',
}}
>
<Text
style={{
width: '100%',
whiteSpace: 'normal',
wordBreak: 'break-word',
}}
variant="h2"
weight="medium"
primary
>
{roomName}
</Text>
{(canChangeName || canChangeTopic) && (
Expand All @@ -196,6 +215,7 @@ function RoomProfile({ roomId }) {
size="extra-small"
tooltip="Edit"
onClick={() => setIsEditing(true)}
style={{ marginTop: '8px' }}
/>
)}
</div>
Expand Down
30 changes: 24 additions & 6 deletions src/app/organisms/create-room/CreateRoom.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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 = [
Expand Down Expand Up @@ -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" />
Expand Down
19 changes: 15 additions & 4 deletions src/app/organisms/create-room/CreateRoom.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,22 +49,22 @@
@include dir.prop(
border-radius,
var(--bo-radius) 0 0 var(--bo-radius),
0 var(--bo-radius) var(--bo-radius) 0,
0 var(--bo-radius) var(--bo-radius) 0
);
}
& .text:last-child {
@include dir.prop(border-width, 1px 1px 1px 0, 1px 0 1px 1px);
@include dir.prop(
border-radius,
0 var(--bo-radius) var(--bo-radius) 0,
var(--bo-radius) 0 0 var(--bo-radius),
var(--bo-radius) 0 0 var(--bo-radius)
);
}
}

&__name-wrapper {
display: flex;
align-items: flex-end;
flex-direction: column;

& .input-container {
flex: 1;
Expand All @@ -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 {
Expand All @@ -87,4 +98,4 @@
text-align: center;
color: var(--bg-danger) !important;
}
}
}
Loading