From a9eeb5502183b8380df0a5d0f3b49d71567c859f Mon Sep 17 00:00:00 2001 From: Evan Simkowitz Date: Wed, 11 Dec 2024 18:25:36 -0800 Subject: [PATCH] Fix inconsistent tab sizing between views (#1502) The windowdrag right spacer was acting erratic. It's also not necessary, since we can just use margins to let the banner buttons fill empty space so they float to the right side of the tab bar. Without it, though, I had to add more padding for the add tab button so it has more room. --- frontend/app/element/iconbutton.scss | 12 +++++-- frontend/app/element/iconbutton.tsx | 41 ++++++++++++----------- frontend/app/tab/tabbar.scss | 43 ++++++++++--------------- frontend/app/tab/tabbar.tsx | 24 ++++++++------ frontend/app/tab/updatebanner.scss | 21 +++++------- frontend/app/tab/updatebanner.tsx | 21 ++++++------ frontend/app/tab/workspaceswitcher.scss | 1 - 7 files changed, 80 insertions(+), 83 deletions(-) diff --git a/frontend/app/element/iconbutton.scss b/frontend/app/element/iconbutton.scss index f55b1ec03..2cb4a688b 100644 --- a/frontend/app/element/iconbutton.scss +++ b/frontend/app/element/iconbutton.scss @@ -1,7 +1,13 @@ .iconbutton { + display: flex; cursor: pointer; opacity: 0.7; align-items: center; + background: none; + border: none; + padding: 0; + font: inherit; + outline: inherit; &.bulb { color: var(--bulb-color); @@ -18,9 +24,9 @@ opacity: 1; } - &.no-action { - cursor: default; - } + &.no-action { + cursor: default; + } &.disabled { cursor: default; diff --git a/frontend/app/element/iconbutton.tsx b/frontend/app/element/iconbutton.tsx index b391425c5..b0a5a794f 100644 --- a/frontend/app/element/iconbutton.tsx +++ b/frontend/app/element/iconbutton.tsx @@ -4,24 +4,27 @@ import { useLongClick } from "@/app/hook/useLongClick"; import { makeIconClass } from "@/util/util"; import clsx from "clsx"; -import { memo, useRef } from "react"; +import { forwardRef, memo, useRef } from "react"; import "./iconbutton.scss"; -export const IconButton = memo(({ decl, className }: { decl: IconButtonDecl; className?: string }) => { - const buttonRef = useRef(null); - const spin = decl.iconSpin ?? false; - useLongClick(buttonRef, decl.click, decl.longClick, decl.disabled); - return ( -
- {typeof decl.icon === "string" ? : decl.icon} -
- ); -}); +type IconButtonProps = { decl: IconButtonDecl; className?: string }; +export const IconButton = memo( + forwardRef(({ decl, className }, ref) => { + ref = ref ?? useRef(null); + const spin = decl.iconSpin ?? false; + useLongClick(ref, decl.click, decl.longClick, decl.disabled); + return ( + + ); + }) +); diff --git a/frontend/app/tab/tabbar.scss b/frontend/app/tab/tabbar.scss index 6c38d1c3f..3299a8afe 100644 --- a/frontend/app/tab/tabbar.scss +++ b/frontend/app/tab/tabbar.scss @@ -23,6 +23,7 @@ } .tab-bar-wrapper { + padding-top: 6px; position: relative; user-select: none; display: flex; @@ -30,7 +31,7 @@ width: 100vw; -webkit-app-region: drag; - * { + button { -webkit-app-region: no-drag; } @@ -40,11 +41,11 @@ } .tab-bar { - margin-top: 6px; position: relative; // Needed for absolute positioning of child tabs display: flex; flex-direction: row; height: 27px; + -webkit-app-region: no-drag; } .pinned-tab-spacer { @@ -61,7 +62,7 @@ display: flex; align-items: center; justify-content: center; - padding: 6px 6px 0 0; + padding: 0 6px 0 0; } .app-menu-button { @@ -77,34 +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 { - height: 80%; - margin: auto 4px; color: black; + padding: 0 6px; flex: 0 0 fit-content; } - .add-tab-btn { - width: 22px; - height: 100%; - cursor: pointer; - font-size: 14px; - text-align: center; - user-select: none; - display: flex; - align-items: center; - justify-content: center; - opacity: 0.5; - - &:hover { - opacity: 1; - } - - i { - overflow: hidden; - margin-top: 5px; - font-size: 11px; - } + .add-tab { + padding: 0 10px; } .window-drag { diff --git a/frontend/app/tab/tabbar.tsx b/frontend/app/tab/tabbar.tsx index 7a2efe97b..90c618e6c 100644 --- a/frontend/app/tab/tabbar.tsx +++ b/frontend/app/tab/tabbar.tsx @@ -11,6 +11,7 @@ import { useAtomValue } from "jotai"; import { OverlayScrollbars } from "overlayscrollbars"; import { createRef, memo, useCallback, useEffect, useRef, useState } from "react"; import { debounce } from "throttle-debounce"; +import { IconButton } from "../element/iconbutton"; import { WorkspaceService } from "../store/services"; import { Tab } from "./tab"; import "./tabbar.scss"; @@ -147,7 +148,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => { const tabBarRef = useRef(null); const tabsWrapperRef = useRef(null); const tabRefs = useRef[]>([]); - const addBtnRef = useRef(null); + const addBtnRef = useRef(null); const draggingRemovedRef = useRef(false); const draggingTabDataRef = useRef({ tabId: "", @@ -160,14 +161,13 @@ const TabBar = memo(({ workspace }: TabBarProps) => { dragged: false, }); const osInstanceRef = useRef(null); - const draggerRightRef = useRef(null); const draggerLeftRef = useRef(null); const workspaceSwitcherRef = useRef(null); const devLabelRef = useRef(null); const appMenuButtonRef = useRef(null); const tabWidthRef = useRef(TAB_DEFAULT_WIDTH); const scrollableRef = useRef(false); - const updateStatusBannerRef = useRef(null); + const updateStatusBannerRef = useRef(null); const configErrorButtonRef = useRef(null); const prevAllLoadedRef = useRef(false); const activeTabId = useAtomValue(atoms.staticTabId); @@ -226,7 +226,6 @@ const TabBar = memo(({ workspace }: TabBarProps) => { const tabbarWrapperWidth = tabbarWrapperRef.current.getBoundingClientRect().width; const windowDragLeftWidth = draggerLeftRef.current.getBoundingClientRect().width; - const windowDragRightWidth = draggerRightRef.current.getBoundingClientRect().width; const addBtnWidth = addBtnRef.current.getBoundingClientRect().width; const updateStatusLabelWidth = updateStatusBannerRef.current?.getBoundingClientRect().width ?? 0; const configErrorWidth = configErrorButtonRef.current?.getBoundingClientRect().width ?? 0; @@ -236,7 +235,6 @@ const TabBar = memo(({ workspace }: TabBarProps) => { const nonTabElementsWidth = windowDragLeftWidth + - windowDragRightWidth + addBtnWidth + updateStatusLabelWidth + configErrorWidth + @@ -648,6 +646,13 @@ const TabBar = memo(({ workspace }: TabBarProps) => { ) : undefined; + + const addtabButtonDecl: IconButtonDecl = { + elemtype: "iconbutton", + icon: "plus", + click: handleAddTab, + title: "Add Tab", + }; return (
@@ -680,12 +685,11 @@ const TabBar = memo(({ workspace }: TabBarProps) => { })}
-
- + +
+ +
- - -
); }); diff --git a/frontend/app/tab/updatebanner.scss b/frontend/app/tab/updatebanner.scss index 14b144ac5..e5e387521 100644 --- a/frontend/app/tab/updatebanner.scss +++ b/frontend/app/tab/updatebanner.scss @@ -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; } } diff --git a/frontend/app/tab/updatebanner.tsx b/frontend/app/tab/updatebanner.tsx index fb1836693..f4b74685f 100644 --- a/frontend/app/tab/updatebanner.tsx +++ b/frontend/app/tab/updatebanner.tsx @@ -4,7 +4,7 @@ import { useAtomValue } from "jotai"; import { forwardRef, memo, useEffect, useState } from "react"; import "./updatebanner.scss"; -const UpdateStatusBannerComponent = forwardRef((_, ref) => { +const UpdateStatusBannerComponent = forwardRef((_, ref) => { const appUpdateStatus = useAtomValue(atoms.updaterStatusAtom); let [updateStatusMessage, setUpdateStatusMessage] = useState(); const [dismissBannerTimeout, setDismissBannerTimeout] = useState(); @@ -54,16 +54,15 @@ const UpdateStatusBannerComponent = forwardRef((_, ref) => { } if (updateStatusMessage) { return ( -
- -
+ ); } }); diff --git a/frontend/app/tab/workspaceswitcher.scss b/frontend/app/tab/workspaceswitcher.scss index 5f59df39a..a1b5545b8 100644 --- a/frontend/app/tab/workspaceswitcher.scss +++ b/frontend/app/tab/workspaceswitcher.scss @@ -9,7 +9,6 @@ align-items: center; gap: 12px; border-radius: 6px; - margin-top: 6px; margin-right: 13px; box-sizing: border-box; background-color: rgb(from var(--main-text-color) r g b / 0.1) !important;