stryan/matrix.to
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix identifier wrapping

Browse Source 
Fixes https://github.com/matrix-org/matrix.to/issues/153
This commit is contained in:
J. Ryan Stinnett 2020-09-29 09:32:26 +01:00
parent 11fd9e1c0f
commit 0e770d81d6
12 changed files with 45 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/clients/Nheko.tsx
View File

@ -40,7 +40,10 @@ const Nheko: TextClient = {
<span> <span>
Type{' '} Type{' '}
<code> <code>
/join <b>{link.identifier}</b> /join{' '}
<b className="matrixIdentifier">
{link.identifier}
</b>
</code> </code>
</span> </span>
); );
@ -49,7 +52,10 @@ const Nheko: TextClient = {
<span> <span>
Type{' '} Type{' '}
<code> <code>
/invite <b>{link.identifier}</b> /invite{' '}
<b className="matrixIdentifier">
{link.identifier}
</b>
</code> </code>
</span> </span>
); );

10
src/clients/Weechat.tsx
View File

@ -40,7 +40,10 @@ const Weechat: TextClient = {
<span> <span>
Type{' '} Type{' '}
<code> <code>
/join <b>{link.identifier}</b> /join{' '}
<b className="matrixIdentifier">
{link.identifier}
</b>
</code> </code>
</span> </span>
); );
@ -49,7 +52,10 @@ const Weechat: TextClient = {
<span> <span>
Type{' '} Type{' '}
<code> <code>
/invite <b>{link.identifier}</b> /invite{' '}
<b className="matrixIdentifier">
{link.identifier}
</b>
</code> </code>
</span> </span>
); );

4
src/components/CreateLinkTile.scss
View File

@ -35,10 +35,6 @@ limitations under the License.
color: $foreground; color: $foreground;
} }
.linkHeader h1 {
word-break: break-all;
}
.createLinkReset { .createLinkReset {
height: 40px; height: 40px;
width: 40px; width: 40px;

2
src/components/CreateLinkTile.tsx
View File

@ -128,7 +128,7 @@ const LinkCreatedTile: React.FC<ILinkCreatedTileProps> = (props) => {
<div>New link</div> <div>New link</div>
<img src={refreshIcon} alt="Go back to matrix.to home page" /> <img src={refreshIcon} alt="Go back to matrix.to home page" />
</button> </button>
<h1 className="linkHeader">{props.link}</h1> <h1 className="linkHeader matrixIdentifier">{props.link}</h1>
<Button <Button
flashChildren={'Copied'} flashChildren={'Copied'}
icon={copyIcon} icon={copyIcon}

4
src/components/DefaultPreview.scss
View File

@ -19,8 +19,4 @@ limitations under the License.
border-radius: 0; border-radius: 0;
border: 0; border: 0;
} }
h1 {
word-break: break-all;
}
} }

2
src/components/DefaultPreview.tsx
View File

@ -34,7 +34,7 @@ const DefaultPreview: React.FC<IProps> = ({ link }: IProps) => {
avatarUrl={genericRoomPreview} avatarUrl={genericRoomPreview}
label={`Generic icon representing ${link.identifier}`} label={`Generic icon representing ${link.identifier}`}
/> />
<h1>{link.identifier}</h1> <h1 className="matrixIdentifier">{link.identifier}</h1>
</div> </div>
); );
}; };

7
src/components/HomeserverOptions.tsx
View File

@ -91,7 +91,12 @@ const HomeserverOptions: React.FC<IProps> = ({ link }: IProps) => {
<Tile className="homeserverOptions"> <Tile className="homeserverOptions">
<div className="homeserverOptionsDescription"> <div className="homeserverOptionsDescription">
<div> <div>
<h3>About {link.identifier}</h3> <h3>
About&nbsp;
<span className="matrixIdentifier">
{link.identifier}
</span>
</h3>
<p> <p>
A homeserver will show you metadata about the link, like A homeserver will show you metadata about the link, like
a description. Homeservers will be able to relate your a description. Homeservers will be able to relate your

2
src/components/InviteTile.tsx
View File

@ -53,7 +53,7 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
Accept invite Accept invite
</LinkButton> </LinkButton>
); );
inviteUseString = `Accepting will open ${link.identifier} in ${client.name}.`; inviteUseString = `Accepting will open this link in ${client.name}.`;
break; break;
case ClientKind.TEXT_CLIENT: case ClientKind.TEXT_CLIENT:
// TODO: copy to clipboard // TODO: copy to clipboard

7
src/components/LinkPreview.tsx
View File

@ -137,7 +137,12 @@ const LinkPreview: React.FC<IProps> = ({ link }: IProps) => {
checked={showHSOptions} checked={showHSOptions}
onChange={(): void => setShowHSOPtions(!showHSOptions)} onChange={(): void => setShowHSOPtions(!showHSOptions)}
> >
About {link.identifier} <span>
About&nbsp;
<span className="matrixIdentifier">
{link.identifier}
</span>
</span>
</Toggle> </Toggle>
</> </>
); );

6
src/components/RoomPreview.tsx
View File

@ -38,9 +38,11 @@ const RoomPreview: React.FC<IProps> = ({ room }: IProps) => {
return ( return (
<div className="roomPreview"> <div className="roomPreview">
<RoomAvatar room={room} /> <RoomAvatar room={room} />
<h1>{room.name ? room.name : roomAlias}</h1> <h1 className="matrixIdentifier">
{room.name ? room.name : roomAlias}
</h1>
{members} {members}
<p>{roomAlias}</p> <p className="matrixIdentifier">{roomAlias}</p>
</div> </div>
); );
}; };

7
src/components/UserPreview.tsx
View File

@ -67,9 +67,12 @@ export const InviterPreview: React.FC<InviterPreviewProps> = ({
<div className={className}> <div className={className}>
<div> <div>
<h1> <h1>
Invited by <b>{user ? user.displayname : userId}</b> Invited by{' '}
<b className="matrixIdentifier">
{user ? user.displayname : userId}
</b>
</h1> </h1>
{user ? <p>{userId}</p> : null} {user ? <p className="matrixIdentifier">{userId}</p> : null}
</div> </div>
{avatar} {avatar}
</div> </div>

4
src/index.scss
View File

@ -64,3 +64,7 @@ hr {
border: 1px solid lighten($grey, 50); border: 1px solid lighten($grey, 50);
margin: 0 40px; margin: 0 40px;
} }
.matrixIdentifier {
word-break: break-all;
}