From 4501a02b5de615ff45625142ef4b067fb11baa85 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sun, 27 Jun 2021 21:54:31 +0100
Subject: [PATCH] Migrate to @tippyjs/react from react-tippy. Fix strokes on
home sidebar. Add tooltips on servers. Fix reply SVG direction.
---
package.json | 2 +-
src/components/common/Tooltip.tsx | 25 ++++++---------
.../messaging/attachments/MessageReply.tsx | 1 +
.../navigation/items/Item.module.scss | 2 --
.../navigation/left/ServerListSidebar.tsx | 9 ++++--
src/main.tsx | 2 +-
src/styles/index.scss | 16 +++++++++-
yarn.lock | 31 ++++++++++++-------
8 files changed, 52 insertions(+), 36 deletions(-)
diff --git a/package.json b/package.json
index 80c9b1a..4c732d7 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
"@styled-icons/boxicons-regular": "^10.34.0",
"@styled-icons/boxicons-solid": "^10.34.0",
"@styled-icons/simple-icons": "^10.33.0",
+ "@tippyjs/react": "^4.2.5",
"@traptitech/markdown-it-katex": "^3.4.3",
"@traptitech/markdown-it-spoiler": "^1.1.6",
"@types/lodash.defaultsdeep": "^4.6.6",
@@ -76,7 +77,6 @@
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scroll": "^1.8.2",
- "react-tippy": "^1.4.0",
"redux": "^4.1.0",
"revolt.js": "4.3.3-alpha.2",
"rimraf": "^3.0.2",
diff --git a/src/components/common/Tooltip.tsx b/src/components/common/Tooltip.tsx
index db4a6c7..9bf320e 100644
--- a/src/components/common/Tooltip.tsx
+++ b/src/components/common/Tooltip.tsx
@@ -1,26 +1,19 @@
-import styled from "styled-components";
import { Children } from "../../types/Preact";
-import { Position, Tooltip as TooltipCore, TooltipProps } from "react-tippy";
+import Tippy, { TippyProps } from '@tippyjs/react';
-type Props = Omit<TooltipProps, 'html'> & {
- position?: Position;
+type Props = Omit<TippyProps, 'children'> & {
children: Children;
content: Children;
}
-const TooltipBase = styled.div`
- padding: 8px;
- font-size: 12px;
- border-radius: 4px;
- color: var(--foreground);
- background: var(--secondary-background);
-`;
-
export default function Tooltip(props: Props) {
+ const { children, content, ...tippyProps } = props;
+
return (
- <TooltipCore
- {...props}
- // @ts-expect-error
- html={<TooltipBase>{props.content}</TooltipBase>} />
+ <Tippy content={content} {...tippyProps}>
+ {/*
+ // @ts-expect-error */}
+ <div>{ children }</div>
+ </Tippy>
);
}
diff --git a/src/components/common/messaging/attachments/MessageReply.tsx b/src/components/common/messaging/attachments/MessageReply.tsx
index 7019538..269cba4 100644
--- a/src/components/common/messaging/attachments/MessageReply.tsx
+++ b/src/components/common/messaging/attachments/MessageReply.tsx
@@ -28,6 +28,7 @@ export const ReplyBase = styled.div<{ head?: boolean, fail?: boolean, preview?:
svg {
flex-shrink: 0;
+ transform: scaleX(-1);
color: var(--tertiary-foreground);
}
diff --git a/src/components/navigation/items/Item.module.scss b/src/components/navigation/items/Item.module.scss
index 27116eb..afb5407 100644
--- a/src/components/navigation/items/Item.module.scss
+++ b/src/components/navigation/items/Item.module.scss
@@ -15,7 +15,6 @@
transition: .1s ease-in-out background-color;
color: var(--tertiary-foreground);
- stroke: var(--tertiary-foreground);
&.normal {
height: 38px;
@@ -117,7 +116,6 @@
&[data-alert="true"], &[data-active="true"], &:hover {
color: var(--foreground);
- stroke: var(--foreground);
.subText {
color: var(--secondary-foreground) !important;
diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx
index 75d4725..e4886e1 100644
--- a/src/components/navigation/left/ServerListSidebar.tsx
+++ b/src/components/navigation/left/ServerListSidebar.tsx
@@ -18,6 +18,7 @@ import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useChannels, useForceUpdate, useServers } from "../../../context/revoltjs/hooks";
import logoSVG from '../../../assets/logo.svg';
+import Tooltip from "../../common/Tooltip";
function Icon({ children, unread, size }: { children: Children, unread?: 'mention' | 'unread', size: number }) {
return (
@@ -174,9 +175,11 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
<ServerEntry
active={active}
onContextMenu={attachContextMenu('Menu', { server: entry!._id })}>
- <Icon size={36} unread={entry.unread}>
- <ServerIcon size={32} target={entry} />
- </Icon>
+ <Tooltip content={entry.name} placement="right">
+ <Icon size={36} unread={entry.unread}>
+ <ServerIcon size={32} target={entry} />
+ </Icon>
+ </Tooltip>
</ServerEntry>
</ConditionalLink>
)
diff --git a/src/main.tsx b/src/main.tsx
index 99a9414..fbb4a2b 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -11,8 +11,8 @@ const updateSW = registerSW({
},
})
-import { render } from "preact";
import "./styles/index.scss";
+import { render } from "preact";
import { App } from "./pages/app";
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4508966..e0b7574 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -3,4 +3,18 @@
@import "fonts";
@import "page";
-@import "react-overlapping-panels/dist"
+@import "react-overlapping-panels/dist";
+@import "tippy.js/dist/tippy.css";
+
+.tippy-box {
+ background: var(--secondary-background);
+}
+
+.tippy-content {
+ padding: 8px;
+ font-size: 12px;
+}
+
+.tippy-arrow {
+ color: var(--secondary-background);
+}
diff --git a/yarn.lock b/yarn.lock
index 60c61c5..3fb7ff5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1001,6 +1001,11 @@
"@nodelib/fs.scandir" "2.1.5"
fastq "^1.6.0"
+"@popperjs/core@^2.8.3":
+ version "2.9.2"
+ resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353"
+ integrity sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==
+
"@preact/preset-vite@^2.0.0":
version "2.1.0"
resolved "https://registry.yarnpkg.com/@preact/preset-vite/-/preset-vite-2.1.0.tgz#66934767ca0b49c1ea1cc00e82d3d43f2caba7d1"
@@ -1130,6 +1135,13 @@
ejs "^2.6.1"
magic-string "^0.25.0"
+"@tippyjs/react@^4.2.5":
+ version "4.2.5"
+ resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.5.tgz#9b5837db93a1cac953962404df906aef1a18e80d"
+ integrity sha512-YBLgy+1zznBNbx4JOoOdFXWMLXjBh9hLPwRtq3s8RRdrez2l3tPBRt2m2909wZd9S1KUeKjOOYYsnitccI9I3A==
+ dependencies:
+ tippy.js "^6.3.1"
+
"@traptitech/markdown-it-katex@^3.4.3":
version "3.4.3"
resolved "https://registry.yarnpkg.com/@traptitech/markdown-it-katex/-/markdown-it-katex-3.4.3.tgz#23dacbd276ac748409a189550e0ecd764cfde8cf"
@@ -3102,11 +3114,6 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3:
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
-popper.js@^1.11.1:
- version "1.16.1"
- resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
- integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
-
postcss-value-parser@^4.0.2:
version "4.1.0"
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
@@ -3297,13 +3304,6 @@ react-side-effect@^2.1.0:
resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
-react-tippy@^1.4.0:
- version "1.4.0"
- resolved "https://registry.yarnpkg.com/react-tippy/-/react-tippy-1.4.0.tgz#e8a8b4085ec985e5c94fe128918b733b588a1465"
- integrity sha512-r/hM5XK9Ztr2ZY7IWKuRmISTlUPS/R6ddz6PO2EuxCgW+4JBcGZRPU06XcVPRDCOIiio8ryBQFrXMhFMhsuaHA==
- dependencies:
- popper.js "^1.11.1"
-
readdirp@~3.6.0:
version "3.6.0"
resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
@@ -3799,6 +3799,13 @@ tiny-warning@^1.0.0, tiny-warning@^1.0.3:
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+tippy.js@^6.3.1:
+ version "6.3.1"
+ resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.1.tgz#3788a007be7015eee0fd589a66b98fb3f8f10181"
+ integrity sha512-JnFncCq+rF1dTURupoJ4yPie5Cof978inW6/4S6kmWV7LL9YOSEVMifED3KdrVPEG+Z/TFH2CDNJcQEfaeuQww==
+ dependencies:
+ "@popperjs/core" "^2.8.3"
+
to-fast-properties@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
--
GitLab