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

Merge pull request #156 from matrix-org/jryans/tweaks

Browse Source 
Quick fixes: round 1
This commit is contained in:
J. Ryan Stinnett 2020-09-30 09:55:12 +01:00 committed by GitHub
commit a8e33b223a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 79 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -8,6 +8,10 @@
# testing
/coverage
# development
bundle.js
bundle.js.map
# production
/build

6
package.json
View File

@ -25,12 +25,10 @@
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx}": [
"eslint --fix",
"prettier --write --tab-width 4 --single-quote",
"git add"
"prettier --write --tab-width 4 --single-quote"
],
"src/**/*.{json,css,scss,md}": [
"prettier --write --tab-width 4 --single-quote",
"git add"
"prettier --write --tab-width 4 --single-quote"
]
},
"husky": {

7
src/clients/Element.io.ts → src/clients/Element.ts
View File

@ -24,7 +24,7 @@ import {
import { LinkKind } from '../parser/types';
import logo from '../imgs/element.svg';
const Element: LinkedClient = {
export const Element: LinkedClient = {
kind: ClientKind.LINKED_CLIENT,
name: 'Element',
author: 'Element',
@ -32,7 +32,7 @@ const Element: LinkedClient = {
homepage: 'https://element.io',
maturity: Maturity.STABLE,
description: 'Fully-featured Matrix client for the Web',
platform: Platform.Desktop,
platforms: [Platform.Desktop, Platform.Android, Platform.iOS],
experimental: false,
clientId: ClientId.Element,
toUrl: (link) => {
@ -69,7 +69,7 @@ export const ElementDevelop: LinkedClient = {
homepage: 'https://element.io',
maturity: Maturity.STABLE,
description: 'Fully-featured Matrix client for the Web',
platform: Platform.Desktop,
platforms: [Platform.Desktop],
experimental: true,
clientId: ClientId.ElementDevelop,
toUrl: (link) => {
@ -95,4 +95,3 @@ export const ElementDevelop: LinkedClient = {
},
linkSupport: () => true,
};
export default Element;

2
src/clients/Fractal.tsx
View File

@ -30,7 +30,7 @@ const Fractal: TextClient = {
homepage: 'https://github.com/poljar/weechat-matrix',
maturity: Maturity.BETA,
experimental: false,
platform: Platform.Desktop,
platforms: [Platform.Desktop],
clientId: ClientId.Fractal,
toInviteString: (link) => {
switch (link.kind) {

12
src/clients/Nheko.tsx
View File

@ -30,7 +30,7 @@ const Nheko: TextClient = {
homepage: 'https://github.com/Nheko-Reborn/nheko',
maturity: Maturity.BETA,
experimental: false,
platform: Platform.Desktop,
platforms: [Platform.Desktop],
clientId: ClientId.Nheko,
toInviteString: (link) => {
switch (link.kind) {
@ -40,7 +40,10 @@ const Nheko: TextClient = {
<span>
Type{' '}
<code>
/join <b>{link.identifier}</b>
/join{' '}
<b className="matrixIdentifier">
{link.identifier}
</b>
</code>
</span>
);
@ -49,7 +52,10 @@ const Nheko: TextClient = {
<span>
Type{' '}
<code>
/invite <b>{link.identifier}</b>
/invite{' '}
<b className="matrixIdentifier">
{link.identifier}
</b>
</code>
</span>
);

12
src/clients/Weechat.tsx
View File

@ -30,7 +30,7 @@ const Weechat: TextClient = {
homepage: 'https://github.com/poljar/weechat-matrix',
maturity: Maturity.LATE_BETA,
experimental: false,
platform: Platform.Desktop,
platforms: [Platform.Desktop],
clientId: ClientId.WeeChat,
toInviteString: (link) => {
switch (link.kind) {
@ -40,7 +40,10 @@ const Weechat: TextClient = {
<span>
Type{' '}
<code>
/join <b>{link.identifier}</b>
/join{' '}
<b className="matrixIdentifier">
{link.identifier}
</b>
</code>
</span>
);
@ -49,7 +52,10 @@ const Weechat: TextClient = {
<span>
Type{' '}
<code>
/invite <b>{link.identifier}</b>
/invite{' '}
<b className="matrixIdentifier">
{link.identifier}
</b>
</code>
</span>
);

2
src/clients/index.ts
View File

@ -16,7 +16,7 @@ limitations under the License.
import { Client } from './types';
import Element, { ElementDevelop } from './Element.io';
import { Element, ElementDevelop } from './Element';
import Weechat from './Weechat';
import Nheko from './Nheko';
import Fractal from './Fractal';

2
src/clients/types.ts
View File

@ -62,7 +62,7 @@ export interface ClientDescription {
homepage: string;
logo: string;
description: string;
platform: Platform;
platforms: Platform[];
maturity: Maturity;
clientId: ClientId;
experimental: boolean;

2
src/components/Avatar.tsx
View File

@ -35,7 +35,7 @@ interface IProps {
const Avatar: React.FC<IProps> = ({ className, avatarUrl, label }: IProps) => {
const [src, setSrc] = useState(avatarUrl);
useEffect(() => {
setSrc(avatarUrl);
setSrc(avatarUrl ? avatarUrl : logo);
}, [avatarUrl]);
const _className = classNames('avatar', className, {

4
src/components/ClientList.tsx
View File

@ -47,7 +47,8 @@ const ClientList: React.FC<IProps> = ({ link, rememberSelection }: IProps) => {
showClient = true;
}
switch (client.platform) {
for (const platform of client.platforms) {
switch (platform) {
case Platform.Desktop:
showClient = showClient || !(uaResults as any).mobile;
break;
@ -58,6 +59,7 @@ const ClientList: React.FC<IProps> = ({ link, rememberSelection }: IProps) => {
showClient = showClient || (uaResults as any).android;
break;
}
}
if (!showExperimentalClients && client.experimental) {
showClient = false;

2
src/components/ClientSelection.tsx
View File

@ -38,7 +38,7 @@ const ClientSelection: React.FC<IProps> = ({ link }: IProps) => {
}}
checked={rememberSelection}
>
Remember choice for future invites in this browser
Remember for future invites in this browser
</StyledCheckbox>
<StyledCheckbox
onChange={(): void => {

2
src/components/ClientTile.tsx
View File

@ -47,7 +47,7 @@ const ClientTile: React.FC<IProps> = ({ client, link }: IProps) => {
if (copyString !== '') {
inviteButton = (
<Button
onClick={() => navigator.clipboard.writeText(copyString)}
onClick={() => navigator.clipboard?.writeText(copyString)}
flashChildren="Invite copied"
>
Copy invite

4
src/components/CreateLinkTile.scss
View File

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

4
src/components/CreateLinkTile.tsx
View File

@ -128,13 +128,13 @@ const LinkCreatedTile: React.FC<ILinkCreatedTileProps> = (props) => {
<div>New link</div>
<img src={refreshIcon} alt="Go back to matrix.to home page" />
</button>
<h1 className="linkHeader">{props.link}</h1>
<h1 className="linkHeader matrixIdentifier">{props.link}</h1>
<Button
flashChildren={'Copied'}
icon={copyIcon}
flashIcon={tickIcon}
onClick={(): void => {
navigator.clipboard.writeText(props.link);
navigator.clipboard?.writeText(props.link);
}}
ref={buttonRef}
>

4
src/components/DefaultPreview.scss
View File

@ -19,8 +19,4 @@ limitations under the License.
border-radius: 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}
label={`Generic icon representing ${link.identifier}`}
/>
<h1>{link.identifier}</h1>
<h1 className="matrixIdentifier">{link.identifier}</h1>
</div>
);
};

7
src/components/HomeserverOptions.tsx
View File

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

6
src/components/InviteTile.tsx
View File

@ -53,12 +53,12 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
Accept invite
</LinkButton>
);
inviteUseString = `Accepting will open ${link.identifier} in ${client.name}.`;
inviteUseString = `Accepting will open this link in ${client.name}.`;
break;
case ClientKind.TEXT_CLIENT:
// TODO: copy to clipboard
invite = <p>{client.toInviteString(link)}</p>;
navigator.clipboard.writeText(client.copyString(link));
navigator.clipboard?.writeText(client.copyString(link));
inviteUseString = `These are instructions for ${client.name}.`;
break;
}
@ -69,7 +69,7 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
<TextButton
onClick={(): void => setShowAdvanced(!showAdvanced)}
>
Change Client.
Change client
</TextButton>
</p>
);

7
src/components/LinkPreview.tsx
View File

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

6
src/components/RoomPreview.tsx
View File

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

4
src/components/StyledCheckbox.scss
View File

@ -23,9 +23,7 @@ limitations under the License.
align-items: center;
input[type='checkbox'] {
appearance: none;
margin: 0;
padding: 0;
display: none;
&:checked + div {
background: $foreground;

4
src/components/Toggle.scss
View File

@ -21,9 +21,7 @@ limitations under the License.
> input[type='checkbox'] {
// Remove the OS's representation
margin: 0;
padding: 0;
appearance: none;
display: none;
&.focus-visible {
& + img {

7
src/components/UserPreview.tsx
View File

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

4
src/index.scss
View File

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