Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-02 18:39:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use button for update available banner (#202)

Browse Source
This commit is contained in:
Evan Simkowitz 2024-08-06 16:48:25 -07:00 committed by GitHub
parent 8508a40261
commit 8ebdb58f4b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
emain/emain.ts
View File

@ -623,8 +623,8 @@ function makeAppMenu() {
}, },
{ {
label: "Check for Updates", label: "Check for Updates",
click: async () => { click: () => {
await updater?.checkForUpdates(true); fireAndForget(() => updater?.checkForUpdates(true));
}, },
}, },
{ {

1
frontend/app/element/button.tsx
View File

@ -3,6 +3,7 @@ import React from "react";
import "./button.less"; import "./button.less";
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
forwardedRef?: React.RefObject<HTMLButtonElement>;
className?: string; className?: string;
children?: React.ReactNode; children?: React.ReactNode;
} }

8
frontend/app/tab/tabbar.less
View File

@ -99,18 +99,12 @@
--os-handle-border-radius: 2px; --os-handle-border-radius: 2px;
} }
.update-available-label { .update-available-button {
height: 80%; height: 80%;
opacity: 0.7; opacity: 0.7;
user-select: none;
display: flex;
align-items: center;
justify-content: center;
margin: auto 4px; margin: auto 4px;
color: black; color: black;
background-color: var(--accent-color); background-color: var(--accent-color);
padding: 0 5px;
border-radius: var(--block-border-radius);
flex: 0 0 fit-content; flex: 0 0 fit-content;
} }
} }

16
frontend/app/tab/tabbar.tsx
View File

@ -12,6 +12,7 @@ import React, { createRef, useCallback, useEffect, useRef, useState } from "reac
import { Tab } from "./tab"; import { Tab } from "./tab";
import { debounce } from "throttle-debounce"; import { debounce } from "throttle-debounce";
import { Button } from "../element/button";
import "./tabbar.less"; import "./tabbar.less";
const TAB_DEFAULT_WIDTH = 130; const TAB_DEFAULT_WIDTH = 130;
@ -70,7 +71,7 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
const draggerLeftRef = useRef<HTMLDivElement>(null); const draggerLeftRef = useRef<HTMLDivElement>(null);
const tabWidthRef = useRef<number>(TAB_DEFAULT_WIDTH); const tabWidthRef = useRef<number>(TAB_DEFAULT_WIDTH);
const scrollableRef = useRef<boolean>(false); const scrollableRef = useRef<boolean>(false);
const updateStatusLabelRef = useRef<HTMLDivElement>(null); const updateStatusButtonRef = useRef<HTMLButtonElement>(null);
const windowData = useAtomValue(atoms.waveWindow); const windowData = useAtomValue(atoms.waveWindow);
const { activetabid } = windowData; const { activetabid } = windowData;
@ -128,7 +129,7 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
const tabbarWrapperWidth = tabbarWrapperRef.current.getBoundingClientRect().width; const tabbarWrapperWidth = tabbarWrapperRef.current.getBoundingClientRect().width;
const windowDragLeftWidth = draggerLeftRef.current.getBoundingClientRect().width; const windowDragLeftWidth = draggerLeftRef.current.getBoundingClientRect().width;
const addBtnWidth = addBtnRef.current.getBoundingClientRect().width; const addBtnWidth = addBtnRef.current.getBoundingClientRect().width;
const updateStatusLabelWidth = updateStatusLabelRef.current?.getBoundingClientRect().width ?? 0; const updateStatusLabelWidth = updateStatusButtonRef.current?.getBoundingClientRect().width ?? 0;
const spaceForTabs = const spaceForTabs =
tabbarWrapperWidth - (windowDragLeftWidth + DRAGGER_RIGHT_MIN_WIDTH + addBtnWidth + updateStatusLabelWidth); tabbarWrapperWidth - (windowDragLeftWidth + DRAGGER_RIGHT_MIN_WIDTH + addBtnWidth + updateStatusLabelWidth);
@ -507,9 +508,14 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
let updateAvailableLabel: React.ReactNode = null; let updateAvailableLabel: React.ReactNode = null;
if (appUpdateStatus === "ready") { if (appUpdateStatus === "ready") {
updateAvailableLabel = ( updateAvailableLabel = (
<div ref={updateStatusLabelRef} className="update-available-label" onClick={onUpdateAvailableClick}> <Button
Update Available: Click to Install forwardedRef={updateStatusButtonRef}
</div> className="update-available-button"
title="Click to Install Update"
onClick={onUpdateAvailableClick}
>
Update Available
</Button>
); );
} }

2
frontend/util/util.ts
View File

@ -102,7 +102,7 @@ function makeIconClass(icon: string, fw: boolean): string {
* @param f The promise to run * @param f The promise to run
*/ */
function fireAndForget(f: () => Promise<any>) { function fireAndForget(f: () => Promise<any>) {
f().catch((e) => { f()?.catch((e) => {
console.log("fireAndForget error", e); console.log("fireAndForget error", e);
}); });
} }