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

Fix inconsistent tab sizing between views, give add tab more room

Browse Source
This commit is contained in:
Evan Simkowitz 2024-12-11 14:43:43 -08:00
parent 98027204ca
commit 17594b3e25
No known key found for this signature in database
3 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -78,14 +78,18 @@
} }
.config-error-button { .config-error-button {
margin-left: auto;
height: 80%; height: 80%;
margin: auto 4px; margin: auto 4px;
color: black; color: black;
flex: 0 0 fit-content; flex: 0 0 fit-content;
} }
.update-available-banner {
margin-left: auto;
}
.add-tab-btn { .add-tab-btn {
width: 22px;
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
@ -95,6 +99,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: 0.5; opacity: 0.5;
padding: 0 10px;
&:hover { &:hover {
opacity: 1; opacity: 1;

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

@ -226,7 +226,6 @@ const TabBar = 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 windowDragRightWidth = draggerRightRef.current.getBoundingClientRect().width;
const addBtnWidth = addBtnRef.current.getBoundingClientRect().width; const addBtnWidth = addBtnRef.current.getBoundingClientRect().width;
const updateStatusLabelWidth = updateStatusBannerRef.current?.getBoundingClientRect().width ?? 0; const updateStatusLabelWidth = updateStatusBannerRef.current?.getBoundingClientRect().width ?? 0;
const configErrorWidth = configErrorButtonRef.current?.getBoundingClientRect().width ?? 0; const configErrorWidth = configErrorButtonRef.current?.getBoundingClientRect().width ?? 0;
@ -236,7 +235,6 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
const nonTabElementsWidth = const nonTabElementsWidth =
windowDragLeftWidth + windowDragLeftWidth +
windowDragRightWidth +
addBtnWidth + addBtnWidth +
updateStatusLabelWidth + updateStatusLabelWidth +
configErrorWidth + configErrorWidth +
@ -683,7 +681,6 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
<div ref={addBtnRef} className="add-tab-btn" onClick={handleAddTab}> <div ref={addBtnRef} className="add-tab-btn" onClick={handleAddTab}>
<i className="fa fa-solid fa-plus fa-fw" /> <i className="fa fa-solid fa-plus fa-fw" />
</div> </div>
<WindowDrag ref={draggerRightRef} className="right" />
<UpdateStatusBanner ref={updateStatusBannerRef} /> <UpdateStatusBanner ref={updateStatusBannerRef} />
<ConfigErrorIcon buttonRef={configErrorButtonRef} /> <ConfigErrorIcon buttonRef={configErrorButtonRef} />
</div> </div>

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

@ -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