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

make tab-bar-right container for banners, clean up styling

Browse Source
This commit is contained in:
Evan Simkowitz 2024-12-11 15:33:48 -08:00
parent b2b07fb68d
commit be7dda55d4
No known key found for this signature in database
5 changed files with 38 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/app/element/iconbutton.scss
View File

@ -1,4 +1,5 @@
.iconbutton {
display: flex;
cursor: pointer;
opacity: 0.7;
align-items: center;

39
frontend/app/tab/tabbar.scss
View File

@ -78,39 +78,24 @@
color: var(--accent-color);
}
.tab-bar-right {
display: flex;
flex-direction: row;
gap: 6px;
&:not(:empty) {
margin-left: auto;
margin-right: 6px;
}
}
.config-error-button {
margin-left: auto;
height: 80%;
margin: auto 4px;
color: black;
padding: 0 6px;
flex: 0 0 fit-content;
}
.update-available-banner {
margin-left: auto;
}
.add-tab-btn {
height: 100%;
cursor: pointer;
font-size: 14px;
text-align: center;
user-select: none;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.5;
.add-tab {
padding: 0 10px;
&:hover {
opacity: 1;
}
i {
overflow: hidden;
margin-top: 5px;
font-size: 11px;
}
}
.window-drag {

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

@ -167,7 +167,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
const appMenuButtonRef = useRef<HTMLDivElement>(null);
const tabWidthRef = useRef<number>(TAB_DEFAULT_WIDTH);
const scrollableRef = useRef<boolean>(false);
const updateStatusBannerRef = useRef<HTMLDivElement>(null);
const updateStatusBannerRef = useRef<HTMLButtonElement>(null);
const configErrorButtonRef = useRef<HTMLElement>(null);
const prevAllLoadedRef = useRef<boolean>(false);
const activeTabId = useAtomValue(atoms.staticTabId);
@ -685,9 +685,11 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
})}
</div>
</div>
<IconButton decl={addtabButtonDecl} ref={addBtnRef} />
<UpdateStatusBanner ref={updateStatusBannerRef} />
<ConfigErrorIcon buttonRef={configErrorButtonRef} />
<IconButton className="add-tab" ref={addBtnRef} decl={addtabButtonDecl} />
<div className="tab-bar-right">
<UpdateStatusBanner ref={updateStatusBannerRef} />
<ConfigErrorIcon buttonRef={configErrorButtonRef} />
</div>
</div>
);
});

21
frontend/app/tab/updatebanner.scss
View File

@ -1,15 +1,10 @@
.update-available-banner {
display: flex;
height: 100%;
.button {
color: black;
height: 80%;
margin: auto 4px;
background-color: var(--accent-color);
flex: 0 0 fit-content;
&:disabled {
opacity: unset !important;
}
.button {
color: black;
background-color: var(--accent-color);
flex: 0 0 fit-content;
line-height: unset !important;
padding: 0 6px;
&:disabled {
opacity: unset !important;
}
}

22
frontend/app/tab/updatebanner.tsx
View File

@ -4,7 +4,7 @@ import { useAtomValue } from "jotai";
import { forwardRef, memo, useEffect, useState } from "react";
import "./updatebanner.scss";
const UpdateStatusBannerComponent = forwardRef<HTMLDivElement>((_, ref) => {
const UpdateStatusBannerComponent = forwardRef<HTMLButtonElement>((_, ref) => {
const appUpdateStatus = useAtomValue(atoms.updaterStatusAtom);
let [updateStatusMessage, setUpdateStatusMessage] = useState<string>();
const [dismissBannerTimeout, setDismissBannerTimeout] = useState<NodeJS.Timeout>();
@ -29,6 +29,7 @@ const UpdateStatusBannerComponent = forwardRef<HTMLDivElement>((_, ref) => {
default:
break;
}
// message = "Update Available";
setUpdateStatusMessage(message);
// Clear any existing timeout
@ -54,16 +55,15 @@ const UpdateStatusBannerComponent = forwardRef<HTMLDivElement>((_, ref) => {
}
if (updateStatusMessage) {
return (
<div className="update-available-banner" ref={ref}>
<Button
className="update-available-button"
title={appUpdateStatus === "ready" ? "Click to Install Update" : updateStatusMessage}
onClick={onClick}
disabled={appUpdateStatus !== "ready"}
>
{updateStatusMessage}
</Button>
</div>
<Button
className="update-available-banner"
title={appUpdateStatus === "ready" ? "Click to Install Update" : updateStatusMessage}
onClick={onClick}
disabled={appUpdateStatus !== "ready"}
ref={ref}
>
{updateStatusMessage}
</Button>
);
}
});