From 4a8561b690013795127223b9fb364c738e72239f Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Mon, 28 Jun 2021 10:25:51 +0100
Subject: [PATCH] Independent tooltip for missing permissions.
---
external/lang | 2 +-
src/components/common/Tooltip.tsx | 23 +++++++++++++++++++
.../common/messaging/MessageBox.tsx | 6 ++---
3 files changed, 27 insertions(+), 4 deletions(-)
diff --git a/external/lang b/external/lang
index 9406c73..03b206f 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit 9406c734ca2cb7b65eefcf926d9e829f9a2056d7
+Subproject commit 03b206f608b071eb26a099657d9619d32f2bb264
diff --git a/src/components/common/Tooltip.tsx b/src/components/common/Tooltip.tsx
index 9bf320e..86be55c 100644
--- a/src/components/common/Tooltip.tsx
+++ b/src/components/common/Tooltip.tsx
@@ -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} />
+ )
+}
diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx
index 404e48e..a8bd630 100644
--- a/src/components/common/messaging/MessageBox.tsx
+++ b/src/components/common/messaging/MessageBox.tsx
@@ -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>
--
GitLab