Merge pull request #156 from matrix-org/jryans/tweaks
Quick fixes: round 1
This commit is contained in:
commit
a8e33b223a
24 changed files with 79 additions and 57 deletions
4
.gitignore
vendored
4
.gitignore
vendored
|
@ -8,6 +8,10 @@
|
|||
# testing
|
||||
/coverage
|
||||
|
||||
# development
|
||||
bundle.js
|
||||
bundle.js.map
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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;
|
|
@ -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) {
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -62,7 +62,7 @@ export interface ClientDescription {
|
|||
homepage: string;
|
||||
logo: string;
|
||||
description: string;
|
||||
platform: Platform;
|
||||
platforms: Platform[];
|
||||
maturity: Maturity;
|
||||
clientId: ClientId;
|
||||
experimental: boolean;
|
||||
|
|
|
@ -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, {
|
||||
|
|
|
@ -47,16 +47,18 @@ const ClientList: React.FC<IProps> = ({ link, rememberSelection }: IProps) => {
|
|||
showClient = true;
|
||||
}
|
||||
|
||||
switch (client.platform) {
|
||||
case Platform.Desktop:
|
||||
showClient = showClient || !(uaResults as any).mobile;
|
||||
break;
|
||||
case Platform.iOS:
|
||||
showClient = showClient || (uaResults as any).ios;
|
||||
break;
|
||||
case Platform.Android:
|
||||
showClient = showClient || (uaResults as any).android;
|
||||
break;
|
||||
for (const platform of client.platforms) {
|
||||
switch (platform) {
|
||||
case Platform.Desktop:
|
||||
showClient = showClient || !(uaResults as any).mobile;
|
||||
break;
|
||||
case Platform.iOS:
|
||||
showClient = showClient || (uaResults as any).ios;
|
||||
break;
|
||||
case Platform.Android:
|
||||
showClient = showClient || (uaResults as any).android;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!showExperimentalClients && client.experimental) {
|
||||
|
|
|
@ -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 => {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -35,10 +35,6 @@ limitations under the License.
|
|||
color: $foreground;
|
||||
}
|
||||
|
||||
.linkHeader h1 {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.createLinkReset {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
|
|
|
@ -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}
|
||||
>
|
||||
|
|
|
@ -19,8 +19,4 @@ limitations under the License.
|
|||
border-radius: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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
|
||||
<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
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -137,7 +137,12 @@ const LinkPreview: React.FC<IProps> = ({ link }: IProps) => {
|
|||
checked={showHSOptions}
|
||||
onChange={(): void => setShowHSOPtions(!showHSOptions)}
|
||||
>
|
||||
About {link.identifier}
|
||||
<span>
|
||||
About
|
||||
<span className="matrixIdentifier">
|
||||
{link.identifier}
|
||||
</span>
|
||||
</span>
|
||||
</Toggle>
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
@ -84,7 +87,7 @@ export const WrappedInviterPreview: React.FC<WrappedInviterProps> = ({
|
|||
link,
|
||||
}: WrappedInviterProps) => {
|
||||
const [user, setUser] = useState<User | undefined>(undefined);
|
||||
const hss = useHSs({link});
|
||||
const hss = useHSs({ link });
|
||||
useEffect(() => {
|
||||
if (hss.length) {
|
||||
client(hss[0])
|
||||
|
|
|
@ -64,3 +64,7 @@ hr {
|
|||
border: 1px solid lighten($grey, 50);
|
||||
margin: 0 40px;
|
||||
}
|
||||
|
||||
.matrixIdentifier {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue