From 796dc467b86999df20cabee543abd727fe7f2603 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sun, 1 Aug 2021 17:52:44 +0100
Subject: [PATCH] Move update indicator to titlebar on desktop.
---
external/lang | 2 +-
src/components/common/UpdateIndicator.tsx | 17 +++++++++++-
src/components/native/Titlebar.tsx | 29 ++++++--------------
src/pages/RevoltApp.tsx | 3 +-
src/pages/app.tsx | 6 ++--
src/pages/channels/actions/HeaderActions.tsx | 2 +-
6 files changed, 32 insertions(+), 27 deletions(-)
diff --git a/external/lang b/external/lang
index 8a9c21d..e03c9f3 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit 8a9c21da8527b9609404ad64205f6b876c9f53d2
+Subproject commit e03c9f3a9ef39b6d93a5890a3ee1a64cfb1ffec4
diff --git a/src/components/common/UpdateIndicator.tsx b/src/components/common/UpdateIndicator.tsx
index 4c58c63..7cc752f 100644
--- a/src/components/common/UpdateIndicator.tsx
+++ b/src/components/common/UpdateIndicator.tsx
@@ -1,4 +1,5 @@
import { Download } from "@styled-icons/boxicons-regular";
+import { CloudDownload } from "@styled-icons/boxicons-regular";
import { useContext, useEffect, useState } from "preact/hooks";
@@ -13,7 +14,11 @@ import { updateSW } from "../../main";
let pendingUpdate = false;
internalSubscribe("PWA", "update", () => (pendingUpdate = true));
-export default function UpdateIndicator() {
+interface Props {
+ style: "titlebar" | "channel";
+}
+
+export default function UpdateIndicator({ style }: Props) {
const [pending, setPending] = useState(pendingUpdate);
useEffect(() => {
@@ -23,6 +28,16 @@ export default function UpdateIndicator() {
if (!pending) return null;
const theme = useContext(ThemeContext);
+ if (style === "titlebar") {
+ return (
+ <div onClick={() => updateSW(true)}>
+ <CloudDownload size={22} color={theme.success} />
+ </div>
+ );
+ }
+
+ if (window.isNative) return null;
+
return (
<IconButton onClick={() => updateSW(true)}>
<Download size={22} color={theme.success} />
diff --git a/src/components/native/Titlebar.tsx b/src/components/native/Titlebar.tsx
index d547194..6e17ee4 100644
--- a/src/components/native/Titlebar.tsx
+++ b/src/components/native/Titlebar.tsx
@@ -1,8 +1,9 @@
-import { X, Minus, Square, CloudDownload } from "@styled-icons/boxicons-regular";
+import { X, Minus, Square } from "@styled-icons/boxicons-regular";
import { Wrench } from "@styled-icons/boxicons-solid";
import styled from "styled-components";
-export const USE_TITLEBAR = window.isNative && !window.native.getConfig().frame;
+import Tooltip from "../common/Tooltip";
+import UpdateIndicator from "../common/UpdateIndicator";
const TitlebarBase = styled.div`
height: var(--titlebar-height);
@@ -30,17 +31,6 @@ const TitlebarBase = styled.div`
}
}
- .update-bar {
- background: var(--success);
- margin: 16px;
- font-size: 12px;
- border-radius: 60px;
- padding: 2px 10px;
- display: flex;
- align-items: center;
- gap: 2px;
- }
-
.actions {
z-index: 100;
display: flex;
@@ -54,6 +44,7 @@ const TitlebarBase = styled.div`
display: grid;
place-items: center;
+ transition: 0.2s ease color;
transition: 0.2s ease background-color;
&:hover {
@@ -84,14 +75,12 @@ export function Titlebar() {
</svg>
{window.native.getConfig().build === "dev" && <Wrench />}
</div>
- {/*<div class="update-bar">
- <CloudDownload size={16} />
- New update available!
- </div>*/}
<div class="actions">
- <div>
- <CloudDownload size={22} color={`var(--success)`} />
- </div>
+ <Tooltip
+ content="A new update is available!"
+ placement="bottom">
+ <UpdateIndicator style="titlebar" />
+ </Tooltip>
</div>
<div class="actions">
<div onClick={window.native.min}>
diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx
index 019cb90..5e564f6 100644
--- a/src/pages/RevoltApp.tsx
+++ b/src/pages/RevoltApp.tsx
@@ -10,7 +10,6 @@ import Notifications from "../context/revoltjs/Notifications";
import StateMonitor from "../context/revoltjs/StateMonitor";
import SyncManager from "../context/revoltjs/SyncManager";
-import { USE_TITLEBAR } from "../components/native/Titlebar";
import BottomNavigation from "../components/navigation/BottomNavigation";
import LeftSidebar from "../components/navigation/LeftSidebar";
import RightSidebar from "../components/navigation/RightSidebar";
@@ -47,7 +46,7 @@ export default function App() {
<OverlappingPanels
width="100vw"
height={
- USE_TITLEBAR
+ window.isNative && !window.native.getConfig().frame
? "calc(var(--app-height) - var(--titlebar-height))"
: "var(--app-height)"
}
diff --git a/src/pages/app.tsx b/src/pages/app.tsx
index f66f6d1..41436c4 100644
--- a/src/pages/app.tsx
+++ b/src/pages/app.tsx
@@ -8,7 +8,7 @@ import { CheckAuth } from "../context/revoltjs/CheckAuth";
import Masks from "../components/ui/Masks";
import Preloader from "../components/ui/Preloader";
-import { Titlebar, USE_TITLEBAR } from "../components/native/Titlebar";
+import { Titlebar } from "../components/native/Titlebar";
const Login = lazy(() => import("./login/Login"));
const RevoltApp = lazy(() => import("./RevoltApp"));
@@ -17,7 +17,9 @@ export function App() {
return (
<Context>
<Masks />
- {USE_TITLEBAR && <Titlebar />}
+ {window.isNative && !window.native.getConfig().frame && (
+ <Titlebar />
+ )}
{/*
// @ts-expect-error */}
<Suspense fallback={<Preloader type="spinner" />}>
diff --git a/src/pages/channels/actions/HeaderActions.tsx b/src/pages/channels/actions/HeaderActions.tsx
index 4451399..7c117c3 100644
--- a/src/pages/channels/actions/HeaderActions.tsx
+++ b/src/pages/channels/actions/HeaderActions.tsx
@@ -33,7 +33,7 @@ export default function HeaderActions({
return (
<>
- <UpdateIndicator />
+ <UpdateIndicator style="channel" />
{channel.channel_type === "Group" && (
<>
<IconButton
--
GitLab