Merge pull request #156 from matrix-org/jryans/tweaks
Quick fixes: round 1
This commit is contained in:
commit
a8e33b223a
4
.gitignore
vendored
4
.gitignore
vendored
@ -8,6 +8,10 @@
|
|||||||
# testing
|
# testing
|
||||||
/coverage
|
/coverage
|
||||||
|
|
||||||
|
# development
|
||||||
|
bundle.js
|
||||||
|
bundle.js.map
|
||||||
|
|
||||||
# production
|
# production
|
||||||
/build
|
/build
|
||||||
|
|
||||||
|
@ -25,12 +25,10 @@
|
|||||||
"lint-staged": {
|
"lint-staged": {
|
||||||
"src/**/*.{js,jsx,ts,tsx}": [
|
"src/**/*.{js,jsx,ts,tsx}": [
|
||||||
"eslint --fix",
|
"eslint --fix",
|
||||||
"prettier --write --tab-width 4 --single-quote",
|
"prettier --write --tab-width 4 --single-quote"
|
||||||
"git add"
|
|
||||||
],
|
],
|
||||||
"src/**/*.{json,css,scss,md}": [
|
"src/**/*.{json,css,scss,md}": [
|
||||||
"prettier --write --tab-width 4 --single-quote",
|
"prettier --write --tab-width 4 --single-quote"
|
||||||
"git add"
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"husky": {
|
"husky": {
|
||||||
|
@ -24,7 +24,7 @@ import {
|
|||||||
import { LinkKind } from '../parser/types';
|
import { LinkKind } from '../parser/types';
|
||||||
import logo from '../imgs/element.svg';
|
import logo from '../imgs/element.svg';
|
||||||
|
|
||||||
const Element: LinkedClient = {
|
export const Element: LinkedClient = {
|
||||||
kind: ClientKind.LINKED_CLIENT,
|
kind: ClientKind.LINKED_CLIENT,
|
||||||
name: 'Element',
|
name: 'Element',
|
||||||
author: 'Element',
|
author: 'Element',
|
||||||
@ -32,7 +32,7 @@ const Element: LinkedClient = {
|
|||||||
homepage: 'https://element.io',
|
homepage: 'https://element.io',
|
||||||
maturity: Maturity.STABLE,
|
maturity: Maturity.STABLE,
|
||||||
description: 'Fully-featured Matrix client for the Web',
|
description: 'Fully-featured Matrix client for the Web',
|
||||||
platform: Platform.Desktop,
|
platforms: [Platform.Desktop, Platform.Android, Platform.iOS],
|
||||||
experimental: false,
|
experimental: false,
|
||||||
clientId: ClientId.Element,
|
clientId: ClientId.Element,
|
||||||
toUrl: (link) => {
|
toUrl: (link) => {
|
||||||
@ -69,7 +69,7 @@ export const ElementDevelop: LinkedClient = {
|
|||||||
homepage: 'https://element.io',
|
homepage: 'https://element.io',
|
||||||
maturity: Maturity.STABLE,
|
maturity: Maturity.STABLE,
|
||||||
description: 'Fully-featured Matrix client for the Web',
|
description: 'Fully-featured Matrix client for the Web',
|
||||||
platform: Platform.Desktop,
|
platforms: [Platform.Desktop],
|
||||||
experimental: true,
|
experimental: true,
|
||||||
clientId: ClientId.ElementDevelop,
|
clientId: ClientId.ElementDevelop,
|
||||||
toUrl: (link) => {
|
toUrl: (link) => {
|
||||||
@ -95,4 +95,3 @@ export const ElementDevelop: LinkedClient = {
|
|||||||
},
|
},
|
||||||
linkSupport: () => true,
|
linkSupport: () => true,
|
||||||
};
|
};
|
||||||
export default Element;
|
|
@ -30,7 +30,7 @@ const Fractal: TextClient = {
|
|||||||
homepage: 'https://github.com/poljar/weechat-matrix',
|
homepage: 'https://github.com/poljar/weechat-matrix',
|
||||||
maturity: Maturity.BETA,
|
maturity: Maturity.BETA,
|
||||||
experimental: false,
|
experimental: false,
|
||||||
platform: Platform.Desktop,
|
platforms: [Platform.Desktop],
|
||||||
clientId: ClientId.Fractal,
|
clientId: ClientId.Fractal,
|
||||||
toInviteString: (link) => {
|
toInviteString: (link) => {
|
||||||
switch (link.kind) {
|
switch (link.kind) {
|
||||||
|
@ -30,7 +30,7 @@ const Nheko: TextClient = {
|
|||||||
homepage: 'https://github.com/Nheko-Reborn/nheko',
|
homepage: 'https://github.com/Nheko-Reborn/nheko',
|
||||||
maturity: Maturity.BETA,
|
maturity: Maturity.BETA,
|
||||||
experimental: false,
|
experimental: false,
|
||||||
platform: Platform.Desktop,
|
platforms: [Platform.Desktop],
|
||||||
clientId: ClientId.Nheko,
|
clientId: ClientId.Nheko,
|
||||||
toInviteString: (link) => {
|
toInviteString: (link) => {
|
||||||
switch (link.kind) {
|
switch (link.kind) {
|
||||||
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -30,7 +30,7 @@ const Weechat: TextClient = {
|
|||||||
homepage: 'https://github.com/poljar/weechat-matrix',
|
homepage: 'https://github.com/poljar/weechat-matrix',
|
||||||
maturity: Maturity.LATE_BETA,
|
maturity: Maturity.LATE_BETA,
|
||||||
experimental: false,
|
experimental: false,
|
||||||
platform: Platform.Desktop,
|
platforms: [Platform.Desktop],
|
||||||
clientId: ClientId.WeeChat,
|
clientId: ClientId.WeeChat,
|
||||||
toInviteString: (link) => {
|
toInviteString: (link) => {
|
||||||
switch (link.kind) {
|
switch (link.kind) {
|
||||||
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -16,7 +16,7 @@ limitations under the License.
|
|||||||
|
|
||||||
import { Client } from './types';
|
import { Client } from './types';
|
||||||
|
|
||||||
import Element, { ElementDevelop } from './Element.io';
|
import { Element, ElementDevelop } from './Element';
|
||||||
import Weechat from './Weechat';
|
import Weechat from './Weechat';
|
||||||
import Nheko from './Nheko';
|
import Nheko from './Nheko';
|
||||||
import Fractal from './Fractal';
|
import Fractal from './Fractal';
|
||||||
|
@ -62,7 +62,7 @@ export interface ClientDescription {
|
|||||||
homepage: string;
|
homepage: string;
|
||||||
logo: string;
|
logo: string;
|
||||||
description: string;
|
description: string;
|
||||||
platform: Platform;
|
platforms: Platform[];
|
||||||
maturity: Maturity;
|
maturity: Maturity;
|
||||||
clientId: ClientId;
|
clientId: ClientId;
|
||||||
experimental: boolean;
|
experimental: boolean;
|
||||||
|
@ -35,7 +35,7 @@ interface IProps {
|
|||||||
const Avatar: React.FC<IProps> = ({ className, avatarUrl, label }: IProps) => {
|
const Avatar: React.FC<IProps> = ({ className, avatarUrl, label }: IProps) => {
|
||||||
const [src, setSrc] = useState(avatarUrl);
|
const [src, setSrc] = useState(avatarUrl);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setSrc(avatarUrl);
|
setSrc(avatarUrl ? avatarUrl : logo);
|
||||||
}, [avatarUrl]);
|
}, [avatarUrl]);
|
||||||
|
|
||||||
const _className = classNames('avatar', className, {
|
const _className = classNames('avatar', className, {
|
||||||
|
@ -47,16 +47,18 @@ const ClientList: React.FC<IProps> = ({ link, rememberSelection }: IProps) => {
|
|||||||
showClient = true;
|
showClient = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
switch (client.platform) {
|
for (const platform of client.platforms) {
|
||||||
case Platform.Desktop:
|
switch (platform) {
|
||||||
showClient = showClient || !(uaResults as any).mobile;
|
case Platform.Desktop:
|
||||||
break;
|
showClient = showClient || !(uaResults as any).mobile;
|
||||||
case Platform.iOS:
|
break;
|
||||||
showClient = showClient || (uaResults as any).ios;
|
case Platform.iOS:
|
||||||
break;
|
showClient = showClient || (uaResults as any).ios;
|
||||||
case Platform.Android:
|
break;
|
||||||
showClient = showClient || (uaResults as any).android;
|
case Platform.Android:
|
||||||
break;
|
showClient = showClient || (uaResults as any).android;
|
||||||
|
break;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!showExperimentalClients && client.experimental) {
|
if (!showExperimentalClients && client.experimental) {
|
||||||
|
@ -38,7 +38,7 @@ const ClientSelection: React.FC<IProps> = ({ link }: IProps) => {
|
|||||||
}}
|
}}
|
||||||
checked={rememberSelection}
|
checked={rememberSelection}
|
||||||
>
|
>
|
||||||
Remember choice for future invites in this browser
|
Remember for future invites in this browser
|
||||||
</StyledCheckbox>
|
</StyledCheckbox>
|
||||||
<StyledCheckbox
|
<StyledCheckbox
|
||||||
onChange={(): void => {
|
onChange={(): void => {
|
||||||
|
@ -47,7 +47,7 @@ const ClientTile: React.FC<IProps> = ({ client, link }: IProps) => {
|
|||||||
if (copyString !== '') {
|
if (copyString !== '') {
|
||||||
inviteButton = (
|
inviteButton = (
|
||||||
<Button
|
<Button
|
||||||
onClick={() => navigator.clipboard.writeText(copyString)}
|
onClick={() => navigator.clipboard?.writeText(copyString)}
|
||||||
flashChildren="Invite copied"
|
flashChildren="Invite copied"
|
||||||
>
|
>
|
||||||
Copy invite
|
Copy invite
|
||||||
|
@ -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;
|
||||||
|
@ -128,13 +128,13 @@ 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}
|
||||||
flashIcon={tickIcon}
|
flashIcon={tickIcon}
|
||||||
onClick={(): void => {
|
onClick={(): void => {
|
||||||
navigator.clipboard.writeText(props.link);
|
navigator.clipboard?.writeText(props.link);
|
||||||
}}
|
}}
|
||||||
ref={buttonRef}
|
ref={buttonRef}
|
||||||
>
|
>
|
||||||
|
@ -19,8 +19,4 @@ limitations under the License.
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -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
|
||||||
|
<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
|
||||||
|
@ -53,12 +53,12 @@ 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
|
||||||
invite = <p>{client.toInviteString(link)}</p>;
|
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}.`;
|
inviteUseString = `These are instructions for ${client.name}.`;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@ -69,7 +69,7 @@ const InviteTile: React.FC<IProps> = ({ children, client, link }: IProps) => {
|
|||||||
<TextButton
|
<TextButton
|
||||||
onClick={(): void => setShowAdvanced(!showAdvanced)}
|
onClick={(): void => setShowAdvanced(!showAdvanced)}
|
||||||
>
|
>
|
||||||
Change Client.
|
Change client
|
||||||
</TextButton>
|
</TextButton>
|
||||||
</p>
|
</p>
|
||||||
);
|
);
|
||||||
|
@ -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
|
||||||
|
<span className="matrixIdentifier">
|
||||||
|
{link.identifier}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
</Toggle>
|
</Toggle>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -23,9 +23,7 @@ limitations under the License.
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
input[type='checkbox'] {
|
input[type='checkbox'] {
|
||||||
appearance: none;
|
display: none;
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
&:checked + div {
|
&:checked + div {
|
||||||
background: $foreground;
|
background: $foreground;
|
||||||
|
@ -21,9 +21,7 @@ limitations under the License.
|
|||||||
|
|
||||||
> input[type='checkbox'] {
|
> input[type='checkbox'] {
|
||||||
// Remove the OS's representation
|
// Remove the OS's representation
|
||||||
margin: 0;
|
display: none;
|
||||||
padding: 0;
|
|
||||||
appearance: none;
|
|
||||||
|
|
||||||
&.focus-visible {
|
&.focus-visible {
|
||||||
& + img {
|
& + img {
|
||||||
|
@ -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>
|
||||||
@ -84,7 +87,7 @@ export const WrappedInviterPreview: React.FC<WrappedInviterProps> = ({
|
|||||||
link,
|
link,
|
||||||
}: WrappedInviterProps) => {
|
}: WrappedInviterProps) => {
|
||||||
const [user, setUser] = useState<User | undefined>(undefined);
|
const [user, setUser] = useState<User | undefined>(undefined);
|
||||||
const hss = useHSs({link});
|
const hss = useHSs({ link });
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (hss.length) {
|
if (hss.length) {
|
||||||
client(hss[0])
|
client(hss[0])
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user