From 4501a02b5de615ff45625142ef4b067fb11baa85 Mon Sep 17 00:00:00 2001 From: Paul 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 80c9b1a0..4c732d7d 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 db4a6c7b..9bf320e5 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 & { - position?: Position; +type Props = Omit & { 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 ( - {props.content}} /> + + {/* + // @ts-expect-error */} +
{ children }
+ ); } diff --git a/src/components/common/messaging/attachments/MessageReply.tsx b/src/components/common/messaging/attachments/MessageReply.tsx index 70195385..269cba4b 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 27116ebc..afb54073 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 75d47256..e4886e10 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) { - - - + + + + + ) diff --git a/src/main.tsx b/src/main.tsx index 99a9414d..fbb4a2bc 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 4508966e..e0b7574e 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 60c61c5a..3fb7ff58 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"