From 1cb59ca40c87a09e5b4464a0e6119b5cc74ca7b7 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Fri, 2 Jul 2021 16:24:36 +0100
Subject: [PATCH] Add SVG masks to server / user icons.
---
src/components/common/user/UserIcon.tsx | 2 +-
.../navigation/left/ServerListSidebar.tsx | 17 ++++++++---------
src/components/ui/Masks.tsx | 18 ++++++++++++++++++
src/pages/app.tsx | 2 ++
4 files changed, 29 insertions(+), 10 deletions(-)
create mode 100644 src/components/ui/Masks.tsx
diff --git a/src/components/common/user/UserIcon.tsx b/src/components/common/user/UserIcon.tsx
index 85064c5..9d7bb80 100644
--- a/src/components/common/user/UserIcon.tsx
+++ b/src/components/common/user/UserIcon.tsx
@@ -62,7 +62,7 @@ export default function UserIcon(props: Props & Omit<JSX.SVGAttributes<SVGSVGEle
height={size}
aria-hidden="true"
viewBox="0 0 32 32">
- <foreignObject x="0" y="0" width="32" height="32">
+ <foreignObject x="0" y="0" width="32" height="32" mask={props.status ? "url(#user)" : undefined}>
{
<img src={iconURL}
draggable={false} />
diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx
index 7607b20..d642927 100644
--- a/src/components/navigation/left/ServerListSidebar.tsx
+++ b/src/components/navigation/left/ServerListSidebar.tsx
@@ -1,12 +1,13 @@
+import Tooltip from "../../common/Tooltip";
import IconButton from "../../ui/IconButton";
import LineDivider from "../../ui/LineDivider";
import { mapChannelWithUnread } from "./common";
import styled, { css } from "styled-components";
import ServerIcon from "../../common/ServerIcon";
import { Children } from "../../../types/Preact";
-import { Plus } from "@styled-icons/boxicons-regular";
+import UserIcon from "../../common/user/UserIcon";
import PaintCounter from "../../../lib/PaintCounter";
-import { attachContextMenu, openContextMenu } from 'preact-context-menu';
+import { Plus } from "@styled-icons/boxicons-regular";
import { connectState } from "../../../redux/connector";
import { useLocation, useParams } from "react-router-dom";
import { Unreads } from "../../../redux/reducers/unreads";
@@ -14,13 +15,10 @@ import ConditionalLink from "../../../lib/ConditionalLink";
import { Channel, Servers } from "revolt.js/dist/api/objects";
import { LastOpened } from "../../../redux/reducers/last_opened";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+import { attachContextMenu, openContextMenu } from 'preact-context-menu';
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useChannels, useForceUpdate, useSelf, useServers } from "../../../context/revoltjs/hooks";
-import logoSVG from '../../../assets/logo.svg';
-import Tooltip from "../../common/Tooltip";
-import UserIcon from "../../common/user/UserIcon";
-
function Icon({ children, unread, size }: { children: Children, unread?: 'mention' | 'unread', size: number }) {
return (
<svg
@@ -29,13 +27,14 @@ function Icon({ children, unread, size }: { children: Children, unread?: 'mentio
aria-hidden="true"
viewBox="0 0 32 32"
>
- <foreignObject x="0" y="0" width="32" height="32">
+ <use href="#serverIndicator" />
+ <foreignObject x="0" y="0" width="32" height="32" mask={ unread ? "url(#server)" : undefined }>
{ children }
</foreignObject>
{unread === 'unread' && (
<circle
cx="27"
- cy="27"
+ cy="5"
r="5"
fill={"white"}
/>
@@ -43,7 +42,7 @@ function Icon({ children, unread, size }: { children: Children, unread?: 'mentio
{unread === 'mention' && (
<circle
cx="27"
- cy="27"
+ cy="5"
r="5"
fill={"red"}
/>
diff --git a/src/components/ui/Masks.tsx b/src/components/ui/Masks.tsx
new file mode 100644
index 0000000..3a1513f
--- /dev/null
+++ b/src/components/ui/Masks.tsx
@@ -0,0 +1,18 @@
+// This file must be imported and used at least once for SVG masks.
+
+export default function Masks() {
+ return (
+ <svg width={0} height={0} style={{ position: 'fixed' }}>
+ <defs>
+ <mask id="server">
+ <rect x="0" y="0" width="32" height="32" fill="white" />
+ <circle cx="27" cy="5" r="7" fill={"black"} />
+ </mask>
+ <mask id="user">
+ <rect x="0" y="0" width="32" height="32" fill="white" />
+ <circle cx="27" cy="27" r="7" fill={"black"} />
+ </mask>
+ </defs>
+ </svg>
+ )
+}
\ No newline at end of file
diff --git a/src/pages/app.tsx b/src/pages/app.tsx
index d77f32e..9e1d048 100644
--- a/src/pages/app.tsx
+++ b/src/pages/app.tsx
@@ -1,6 +1,7 @@
import { CheckAuth } from "../context/revoltjs/CheckAuth";
import Preloader from "../components/ui/Preloader";
import { Route, Switch } from "react-router-dom";
+import Masks from "../components/ui/Masks";
import Context from "../context";
import { lazy, Suspense } from "preact/compat";
@@ -10,6 +11,7 @@ const RevoltApp = lazy(() => import('./RevoltApp'));
export function App() {
return (
<Context>
+ <Masks />
{/*
// @ts-expect-error */}
<Suspense fallback={<Preloader type="spinner" />}>
--
GitLab