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 { .iconbutton {
display: flex;
cursor: pointer; cursor: pointer;
opacity: 0.7; opacity: 0.7;
align-items: center; align-items: center;

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

@ -78,39 +78,24 @@
color: var(--accent-color); color: var(--accent-color);
} }
.config-error-button { .tab-bar-right {
display: flex;
flex-direction: row;
gap: 6px;
&:not(:empty) {
margin-left: auto; margin-left: auto;
height: 80%; margin-right: 6px;
margin: auto 4px; }
}
.config-error-button {
color: black; color: black;
padding: 0 6px;
flex: 0 0 fit-content; flex: 0 0 fit-content;
} }
.update-available-banner { .add-tab {
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;
padding: 0 10px; padding: 0 10px;
&:hover {
opacity: 1;
}
i {
overflow: hidden;
margin-top: 5px;
font-size: 11px;
}
} }
.window-drag { .window-drag {

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

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

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

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

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

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