Independent tooltip for missing permissions.

This commit is contained in:
Paul 2021-06-28 10:25:51 +01:00
parent 84da056f09
commit 4a8561b690
3 changed files with 27 additions and 4 deletions

2
external/lang vendored

@ -1 +1 @@
Subproject commit 9406c734ca2cb7b65eefcf926d9e829f9a2056d7
Subproject commit 03b206f608b071eb26a099657d9619d32f2bb264

View file

@ -1,3 +1,5 @@
import { Text } from "preact-i18n";
import styled from "styled-components";
import { Children } from "../../types/Preact";
import Tippy, { TippyProps } from '@tippyjs/react';
@ -17,3 +19,24 @@ export default function Tooltip(props: Props) {
</Tippy>
);
}
const PermissionTooltipBase = styled.div`
display: flex;
align-items: center;
flex-direction: column;
code {
font-family: 'Fira Mono';
}
`;
export function PermissionTooltip(props: Omit<Props, 'content'> & { permission: string }) {
const { permission, ...tooltipProps } = props;
return (
<Tooltip content={<PermissionTooltipBase>
<Text id="app.permissions.required" />
<code>{ permission }</code>
</PermissionTooltipBase>} {...tooltipProps} />
)
}

View file

@ -1,6 +1,6 @@
import { ulid } from "ulid";
import { Text } from "preact-i18n";
import Tooltip from "../Tooltip";
import Tooltip, { PermissionTooltip } from "../Tooltip";
import { Channel } from "revolt.js";
import styled from "styled-components";
import { defer } from "../../../lib/defer";
@ -90,9 +90,9 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
return (
<Base>
<Blocked>
<Tooltip content={<div>Permissions Required<div>Send messages</div></div>} placement="top">
<PermissionTooltip permission="SendMessages" placement="top">
<ShieldX size={22}/>
</Tooltip>
</PermissionTooltip>
<Text id="app.main.channel.misc.no_sending" />
</Blocked>
</Base>