From 57f31d1b7ec4a5619c3edc36fe001173fd548882 Mon Sep 17 00:00:00 2001 From: Philipp Otto Date: Fri, 20 Dec 2024 11:21:42 +0100 Subject: [PATCH 01/13] use antd design tokens to customize toolbar instead of custom CSS; use primary color for selected buttons --- frontend/javascripts/navbar.tsx | 106 +++++++++--------- .../oxalis/view/action-bar/toolbar_view.tsx | 20 +--- .../view/layouting/tracing_layout_view.tsx | 105 ++++++++--------- frontend/javascripts/theme.tsx | 19 ++++ .../stylesheets/trace_view/_tracing_view.less | 58 +++++----- 5 files changed, 157 insertions(+), 151 deletions(-) diff --git a/frontend/javascripts/navbar.tsx b/frontend/javascripts/navbar.tsx index 12873f12c91..35ba1acc48b 100644 --- a/frontend/javascripts/navbar.tsx +++ b/frontend/javascripts/navbar.tsx @@ -62,7 +62,7 @@ import type { ItemType, MenuItemType, SubMenuType } from "antd/es/menu/interface import type { MenuClickEventHandler } from "rc-menu/lib/interface"; import constants from "oxalis/constants"; import { MaintenanceBanner, UpgradeVersionBanner } from "banners"; -import { getAntdTheme, getSystemColorTheme } from "theme"; +import { getAntdTheme, getSystemColorTheme, NavAndStatusBarTheme } from "theme"; import { formatUserName } from "oxalis/model/accessors/user_accessor"; import { isAnnotationFromDifferentOrganization, @@ -942,58 +942,62 @@ function Navbar({ const separator =
; return ( -
- - - - - - setIsHelpMenuOpen(openKeys.includes(HELP_MENU_KEY))} - style={{ - paddingTop: navbarHeight > constants.DEFAULT_NAVBAR_HEIGHT ? constants.BANNER_HEIGHT : 0, - lineHeight: `${constants.DEFAULT_NAVBAR_HEIGHT}px`, - }} - theme="dark" - subMenuCloseDelay={subMenuCloseDelay} - triggerSubMenuAction="click" - // There is a bug where the last menu entry disappears behind the overflow indicator - // although there is ample space available, see https://github.com/ant-design/ant-design/issues/32277 - disabledOverflow - items={menuItems} - /> + +
+ + + + + + setIsHelpMenuOpen(openKeys.includes(HELP_MENU_KEY))} + style={{ + paddingTop: + navbarHeight > constants.DEFAULT_NAVBAR_HEIGHT ? constants.BANNER_HEIGHT : 0, + lineHeight: `${constants.DEFAULT_NAVBAR_HEIGHT}px`, + }} + theme="dark" + subMenuCloseDelay={subMenuCloseDelay} + triggerSubMenuAction="click" + // There is a bug where the last menu entry disappears behind the overflow indicator + // although there is ample space available, see https://github.com/ant-design/ant-design/issues/32277 + disabledOverflow + items={menuItems} + /> - {isInAnnotationView ? separator : null} - setIsHelpModalOpen(false)} - centeredLayout - /> - constants.DEFAULT_NAVBAR_HEIGHT ? constants.BANNER_HEIGHT : 0, - }} - /> + {isInAnnotationView ? separator : null} + setIsHelpModalOpen(false)} + centeredLayout + /> + constants.DEFAULT_NAVBAR_HEIGHT ? constants.BANNER_HEIGHT : 0, + }} + /> -
- {trailingNavItems} -
-
+
+ {trailingNavItems} +
+
+ ); } diff --git a/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx b/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx index 2693a3d8cc5..98f47a61d2d 100644 --- a/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx +++ b/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx @@ -10,6 +10,7 @@ import { Row, Divider, Popconfirm, + ConfigProvider, } from "antd"; import { ClearOutlined, @@ -173,7 +174,7 @@ function RadioButtonWithTooltip({ disabledTitle?: string; disabled?: boolean; children: React.ReactNode; - style: React.CSSProperties; + style?: React.CSSProperties; value: string; onClick?: (event: React.MouseEvent) => void; onMouseEnter?: () => void; @@ -219,7 +220,7 @@ function ToolRadioButton({ disabledExplanation?: string; disabled?: boolean; children: React.ReactNode; - style: React.CSSProperties; + style?: React.CSSProperties; value: string; onClick?: (event: React.MouseEvent) => void; onMouseEnter?: () => void; @@ -297,7 +298,6 @@ function OverwriteModeSwitch({ > @@ -952,7 +951,6 @@ export default function ToolbarView() { description={skeletonToolDescription} disabledExplanation={disabledInfosForTools[AnnotationToolEnum.SKELETON].explanation} disabled={disabledInfosForTools[AnnotationToolEnum.SKELETON].isDisabled} - style={NARROW_BUTTON_STYLE} value={AnnotationToolEnum.SKELETON} > { dispatch(ensureLayerMappingsAreLoadedAction()); @@ -1163,7 +1152,6 @@ export default function ToolbarView() { description="Use to measure distances or areas." disabledExplanation="" disabled={false} - style={NARROW_BUTTON_STYLE} value={AnnotationToolEnum.LINE_MEASUREMENT} > diff --git a/frontend/javascripts/oxalis/view/layouting/tracing_layout_view.tsx b/frontend/javascripts/oxalis/view/layouting/tracing_layout_view.tsx index f196944b1d5..f65a1f87b47 100644 --- a/frontend/javascripts/oxalis/view/layouting/tracing_layout_view.tsx +++ b/frontend/javascripts/oxalis/view/layouting/tracing_layout_view.tsx @@ -1,5 +1,5 @@ import { WarningFilled } from "@ant-design/icons"; -import { Alert, Layout, Tooltip } from "antd"; +import { Alert, ConfigProvider, Layout, Tooltip } from "antd"; import ErrorHandling from "libs/error_handling"; import Request from "libs/request"; import Toast from "libs/toast"; @@ -46,6 +46,7 @@ import { determineLayout } from "./default_layout_configs"; import FlexLayoutWrapper from "./flex_layout_wrapper"; import { FloatingMobileControls } from "./floating_mobile_controls"; import app from "app"; +import { NavAndStatusBarTheme } from "theme"; const { Sider } = Layout; @@ -298,57 +299,59 @@ class TracingLayoutView extends React.PureComponent { - {status === "loaded" ? ( -
- { - this.setState({ - activeLayoutName: layoutName, - }); - setActiveLayout(layoutType, layoutName); - }, - saveCurrentLayout: this.saveCurrentLayout, - setAutoSaveLayouts: this.props.setAutoSaveLayouts, - autoSaveLayouts: this.props.autoSaveLayouts, + + {status === "loaded" ? ( +
- {isDatasetOnScratchVolume ? ( - - - Dataset is on tmpscratch!{" "} - - - } - type="error" - /> - - ) : null} -
- ) : null} + > + { + this.setState({ + activeLayoutName: layoutName, + }); + setActiveLayout(layoutType, layoutName); + }, + saveCurrentLayout: this.saveCurrentLayout, + setAutoSaveLayouts: this.props.setAutoSaveLayouts, + autoSaveLayouts: this.props.autoSaveLayouts, + }} + /> + {isDatasetOnScratchVolume ? ( + + + Dataset is on tmpscratch!{" "} + + + } + type="error" + /> + + ) : null} +
+ ) : null} + .ant-select-selector{ - background-color: @dark-bg !important; + // background-color: @dark-bg !important; color: @dark-fg !important; - border-color: @dark-border; + // border-color: @dark-border; &.upgrade-banner-button{ background-color: var(--ant-button-primary-color) !important; @@ -366,13 +366,13 @@ img.keyboard-mouse-icon:first-child { } &:hover { - border-color: var(--color-blue-zircon) !important; + // border-color: var(--color-blue-zircon) !important; z-index: 1 !important; } - &:not(:first-child):hover::before { - background-color: var(--color-blue-zircon) !important; - } + // &:not(:first-child):hover::before { + // background-color: var(--color-blue-zircon) !important; + // } &.ant-btn-disabled, &.ant-input-disabled, @@ -380,11 +380,11 @@ img.keyboard-mouse-icon:first-child { &.ant-radio-button-wrapper-disabled, &.ant-select-selector-disabled { color: fade(@dark-fg, 50%); - border-color: @dark-border !important; + // border-color: @dark-border !important; - &:hover::before { - background-color: @dark-border !important; - } + // &:hover::before { + // background-color: @dark-border !important; + // } } } @@ -392,8 +392,8 @@ img.keyboard-mouse-icon:first-child { .ant-btn[disabled], .ant-btn[disabled]:hover { color: fade(@dark-fg, 50%) !important; - border-color: @dark-border !important; - background-color: @dark-bg !important; + // border-color: @dark-border !important; + // background-color: @dark-bg !important; } .ant-select-arrow { @@ -405,26 +405,26 @@ img.keyboard-mouse-icon:first-child { } // Radio button - .ant-radio-button-wrapper:first-child { - border-left: 1px solid @dark-border; - &:hover { - border-left: 1px solid var(--color-blue-zircon); - } - } + // .ant-radio-button-wrapper:first-child { + // border-left: 1px solid @dark-border; + // &:hover { + // border-left: 1px solid var(--color-blue-zircon); + // } + // } .ant-radio-button-wrapper-checked, .ant-radio-button-wrapper-checked:first-child { - border-color: var(--ant-color-primary); + // border-color: var(--ant-color-primary); color: var(--ant-color-primary); - &::before { - background-color: var(--ant-color-primary) !important; - } + // &::before { + // background-color: var(--ant-color-primary) !important; + // } } - .ant-radio-button-wrapper:not(:first-child)::before { - background-color: @dark-border; - } + // .ant-radio-button-wrapper:not(:first-child)::before { + // background-color: @dark-border; + // } .ant-radio-button-wrapper-checked:not([class*=" ant-radio-button-wrapper-disabled"]).ant-radio-button-wrapper:first-child { border-right-color: var(--ant-color-primary); @@ -445,14 +445,6 @@ img.keyboard-mouse-icon:first-child { } } - // Settings icon - .highlight-togglable-button.ant-btn { - background-color: var(--ant-color-primary) !important; - &:not(:hover) { - border-color: var(--ant-color-primary) !important; - } - } - .left-border-button.footer-button, .right-border-button.footer-button { position: absolute; From 591b8e86c6d41606386dc31f1be99ad3b1520542 Mon Sep 17 00:00:00 2001 From: Philipp Otto Date: Fri, 20 Dec 2024 11:49:52 +0100 Subject: [PATCH 02/13] implement ToggleButton and clean up --- .../oxalis/view/action-bar/toolbar_view.tsx | 63 +++++++------------ .../view/components/button_component.tsx | 11 +++- frontend/javascripts/theme.tsx | 9 ++- 3 files changed, 38 insertions(+), 45 deletions(-) diff --git a/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx b/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx index 98f47a61d2d..5ed5ee75f9d 100644 --- a/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx +++ b/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx @@ -10,7 +10,6 @@ import { Row, Divider, Popconfirm, - ConfigProvider, } from "antd"; import { ClearOutlined, @@ -53,7 +52,7 @@ import { setToolAction, showQuickSelectSettingsAction } from "oxalis/model/actio import { updateUserSettingAction } from "oxalis/model/actions/settings_actions"; import { usePrevious, useKeyPress } from "libs/react_hooks"; import { userSettings } from "types/schemas/user_settings.schema"; -import ButtonComponent from "oxalis/view/components/button_component"; +import ButtonComponent, { ToggleButton } from "oxalis/view/components/button_component"; import { MaterializeVolumeAnnotationModal } from "oxalis/view/action-bar/starting_job_modals"; import { ToolsWithOverwriteCapabilities, @@ -92,12 +91,6 @@ const NARROW_BUTTON_STYLE = { paddingLeft: 10, paddingRight: 8, }; -// The z-index is needed so that the blue border of an active button does override the border color of the neighboring non active button. -const ACTIVE_BUTTON_STYLE = { - ...NARROW_BUTTON_STYLE, - borderColor: "var(--ant-color-primary)", - zIndex: 1, -}; const imgStyleForSpaceyIcons = { width: 19, height: 19, @@ -419,11 +412,6 @@ function AdditionalSkeletonModesButtons() { const toggleMergerMode = () => dispatch(setMergerModeEnabledAction(!isMergerModeEnabled)); - const newNodeNewTreeModeButtonStyle = isNewNodeNewTreeModeOn - ? ACTIVE_BUTTON_STYLE - : NARROW_BUTTON_STYLE; - const mergerModeButtonStyle = isMergerModeEnabled ? ACTIVE_BUTTON_STYLE : NARROW_BUTTON_STYLE; - const isMaterializeVolumeAnnotationEnabled = dataset.dataStore.jobsSupportedByAvailableWorkers.includes( APIJobType.MATERIALIZE_VOLUME_ANNOTATION, @@ -431,10 +419,10 @@ function AdditionalSkeletonModesButtons() { return ( - Single Node Tree Mode - - + - + {isMergerModeEnabled && isMaterializeVolumeAnnotationEnabled && isUserAdminOrManager && ( - AI - + @@ -1338,15 +1327,15 @@ function QuickSelectSettingsPopover() { dispatch(showQuickSelectSettingsAction(open)); }} > - - + @@ -1409,30 +1398,26 @@ function ProofReadingComponents() { > - handleToggleAutomaticMeshRendering(!autoRenderMeshes)} > - - + handleToggleSelectiveVisibilityInProofreading(!selectiveVisibilityInProofreading) } > - + ); } diff --git a/frontend/javascripts/oxalis/view/components/button_component.tsx b/frontend/javascripts/oxalis/view/components/button_component.tsx index 0d40c04f964..d620dd001b0 100644 --- a/frontend/javascripts/oxalis/view/components/button_component.tsx +++ b/frontend/javascripts/oxalis/view/components/button_component.tsx @@ -3,7 +3,7 @@ import * as React from "react"; import _ from "lodash"; import FastTooltip, { type FastTooltipPlacement } from "components/fast_tooltip"; -type ButtonComponentProp = ButtonProps & { +type ButtonComponentProps = ButtonProps & { faIcon?: string; tooltipPlacement?: FastTooltipPlacement | undefined; }; @@ -12,8 +12,8 @@ type ButtonComponentProp = ButtonProps & { * after it was clicked. */ -class ButtonComponent extends React.PureComponent { - static defaultProps: ButtonComponentProp = { +class ButtonComponent extends React.PureComponent { + static defaultProps: ButtonComponentProps = { onClick: _.noop, }; @@ -61,4 +61,9 @@ class ButtonComponent extends React.PureComponent { } } +export function ToggleButton(props: { active: boolean } & ButtonComponentProps) { + const { active, ...restProps } = props; + return ; +} + export default ButtonComponent; diff --git a/frontend/javascripts/theme.tsx b/frontend/javascripts/theme.tsx index 0f4eb9c88c2..3d1bc7a8cfc 100644 --- a/frontend/javascripts/theme.tsx +++ b/frontend/javascripts/theme.tsx @@ -7,6 +7,7 @@ import window from "libs/window"; import type { OxalisState, Theme } from "oxalis/store"; import type { AliasToken, OverrideToken } from "antd/lib/theme/interface"; import { ToastContextMountRoot } from "libs/toast"; +import _ from "lodash"; const ColorWKBlue = "#5660ff"; // WK ~blue/purple const ColorWKLinkHover = "#a8b4ff"; // slightly brighter WK Blue @@ -14,7 +15,7 @@ const ColorWKDarkGrey = "#1f1f1f"; const ColorWhite = "white"; const ColorBlack = "black"; -export const NavAndStatusBarTheme = { +export const NavAndStatusBarTheme = _.merge(getAntdTheme("dark"), { components: { Radio: { buttonCheckedBg: ColorWKBlue, @@ -24,14 +25,16 @@ export const NavAndStatusBarTheme = { }, token: { colorBgContainer: "#383d48", - colorBgContainerDisabled: "#313131", // Otherwise the erase-buttons which hide under their neighbors would not hide properly colorBorder: "#4e4e4e", // lineWidth: 0, // controlOutlineWidth: 0, // lineWidthFocus: 0, // colorBorder: "transparent", + // Use a non-transparent color for disabled backgrounds. Otherwise the + // erase-buttons which hide under their neighbors would not hide properly. + colorBgContainerDisabled: "#313131", }, -}; +}); export function getSystemColorTheme(): Theme { // @ts-ignore From 561bfb79e556e1cfc0957e4bfcfdf9cc3f07f017 Mon Sep 17 00:00:00 2001 From: Philipp Otto Date: Fri, 20 Dec 2024 12:17:35 +0100 Subject: [PATCH 03/13] try to fix primary blue; hide quick-select-tool if volume annotation is not possible (like the other volume tools) --- .../oxalis/view/action-bar/toolbar_view.tsx | 36 ++++++++++--------- frontend/javascripts/theme.tsx | 17 +++++++-- 2 files changed, 34 insertions(+), 19 deletions(-) diff --git a/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx b/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx index 5ed5ee75f9d..7cfc69c851e 100644 --- a/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx +++ b/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx @@ -1076,24 +1076,28 @@ export default function ToolbarView() { }} /> + + Quick Select Icon + ) : null} - - Quick Select Icon - Date: Fri, 20 Dec 2024 13:13:45 +0100 Subject: [PATCH 04/13] fix background color in buttons --- frontend/javascripts/theme.tsx | 2 +- .../stylesheets/trace_view/_tracing_view.less | 24 +++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/frontend/javascripts/theme.tsx b/frontend/javascripts/theme.tsx index 66ddbfe3bf0..0b31eebff15 100644 --- a/frontend/javascripts/theme.tsx +++ b/frontend/javascripts/theme.tsx @@ -23,7 +23,6 @@ const OverridesForNavbarAndStatusBarTheme: ThemeConfig = { buttonBg: "#383d48", }, Button: { - primaryColor: ColorWKBlue, primaryShadow: "none", }, }, @@ -92,6 +91,7 @@ export function getAntdTheme(userTheme: Theme) { borderRadius: 4, fontFamily: '"Nunito", "Monospaced Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;', + colorPrimaryBg: ColorWKBlue, }; if (userTheme === "dark") { diff --git a/frontend/stylesheets/trace_view/_tracing_view.less b/frontend/stylesheets/trace_view/_tracing_view.less index 8ddd68b2ae6..8758bfb4b36 100644 --- a/frontend/stylesheets/trace_view/_tracing_view.less +++ b/frontend/stylesheets/trace_view/_tracing_view.less @@ -357,7 +357,7 @@ img.keyboard-mouse-icon:first-child { color: @dark-fg !important; // border-color: @dark-border; - &.upgrade-banner-button{ + &.upgrade-banner-button { background-color: var(--ant-button-primary-color) !important; color: var(--ant-color-primary) !important; border-color: var(--ant-button-primary-color); @@ -400,9 +400,9 @@ img.keyboard-mouse-icon:first-child { color: @dark-fg; } - .ant-btn-primary { - background-color: var(--ant-color-primary) !important; - } + // .ant-btn-primary { + // background-color: var(--ant-color-primary) !important; + // } // Radio button // .ant-radio-button-wrapper:first-child { @@ -415,7 +415,7 @@ img.keyboard-mouse-icon:first-child { .ant-radio-button-wrapper-checked, .ant-radio-button-wrapper-checked:first-child { // border-color: var(--ant-color-primary); - color: var(--ant-color-primary); + // color: var(--ant-color-primary); // &::before { // background-color: var(--ant-color-primary) !important; @@ -426,15 +426,15 @@ img.keyboard-mouse-icon:first-child { // background-color: @dark-border; // } - .ant-radio-button-wrapper-checked:not([class*=" ant-radio-button-wrapper-disabled"]).ant-radio-button-wrapper:first-child { - border-right-color: var(--ant-color-primary); - } + // .ant-radio-button-wrapper-checked:not([class*=" ant-radio-button-wrapper-disabled"]).ant-radio-button-wrapper:first-child { + // border-right-color: var(--ant-color-primary); + // } // Primary button in button group - .ant-btn-group .ant-btn-primary:not(:first-child):not(:last-child) { - border-right-color: @dark-border; - border-left-color: @dark-border; - } + // .ant-btn-group .ant-btn-primary:not(:first-child):not(:last-child) { + // border-right-color: @dark-border; + // border-left-color: @dark-border; + // } .ant-btn-danger { background: var(--ant-color-error-bg); From 1abdde60f8dfd0495011091ebd46a364d420232a Mon Sep 17 00:00:00 2001 From: Philipp Otto Date: Fri, 20 Dec 2024 13:25:03 +0100 Subject: [PATCH 05/13] remove CSS that is superfluous now --- frontend/javascripts/theme.tsx | 2 +- .../stylesheets/trace_view/_tracing_view.less | 61 +------------------ 2 files changed, 2 insertions(+), 61 deletions(-) diff --git a/frontend/javascripts/theme.tsx b/frontend/javascripts/theme.tsx index 0b31eebff15..8060e9cac5c 100644 --- a/frontend/javascripts/theme.tsx +++ b/frontend/javascripts/theme.tsx @@ -1,7 +1,7 @@ import type React from "react"; import { useEffect } from "react"; import { useSelector } from "react-redux"; -import { App, ConfigProvider, theme, ThemeConfig } from "antd"; +import { App, ConfigProvider, theme, type ThemeConfig } from "antd"; import type { APIUser } from "types/api_flow_types"; import window from "libs/window"; import type { OxalisState, Theme } from "oxalis/store"; diff --git a/frontend/stylesheets/trace_view/_tracing_view.less b/frontend/stylesheets/trace_view/_tracing_view.less index 8758bfb4b36..de3e70e69fb 100644 --- a/frontend/stylesheets/trace_view/_tracing_view.less +++ b/frontend/stylesheets/trace_view/_tracing_view.less @@ -353,9 +353,7 @@ img.keyboard-mouse-icon:first-child { .ant-input-number, .ant-radio-button-wrapper, .ant-select > .ant-select-selector{ - // background-color: @dark-bg !important; color: @dark-fg !important; - // border-color: @dark-border; &.upgrade-banner-button { background-color: var(--ant-button-primary-color) !important; @@ -366,76 +364,19 @@ img.keyboard-mouse-icon:first-child { } &:hover { - // border-color: var(--color-blue-zircon) !important; z-index: 1 !important; } - - // &:not(:first-child):hover::before { - // background-color: var(--color-blue-zircon) !important; - // } - - &.ant-btn-disabled, - &.ant-input-disabled, - &.ant-input-number-disabled, - &.ant-radio-button-wrapper-disabled, - &.ant-select-selector-disabled { - color: fade(@dark-fg, 50%); - // border-color: @dark-border !important; - - // &:hover::before { - // background-color: @dark-border !important; - // } - } - } .ant-btn[disabled], .ant-btn[disabled]:hover { color: fade(@dark-fg, 50%) !important; - // border-color: @dark-border !important; - // background-color: @dark-bg !important; } .ant-select-arrow { color: @dark-fg; } - // .ant-btn-primary { - // background-color: var(--ant-color-primary) !important; - // } - - // Radio button - // .ant-radio-button-wrapper:first-child { - // border-left: 1px solid @dark-border; - // &:hover { - // border-left: 1px solid var(--color-blue-zircon); - // } - // } - - .ant-radio-button-wrapper-checked, - .ant-radio-button-wrapper-checked:first-child { - // border-color: var(--ant-color-primary); - // color: var(--ant-color-primary); - - // &::before { - // background-color: var(--ant-color-primary) !important; - // } - } - - // .ant-radio-button-wrapper:not(:first-child)::before { - // background-color: @dark-border; - // } - - // .ant-radio-button-wrapper-checked:not([class*=" ant-radio-button-wrapper-disabled"]).ant-radio-button-wrapper:first-child { - // border-right-color: var(--ant-color-primary); - // } - - // Primary button in button group - // .ant-btn-group .ant-btn-primary:not(:first-child):not(:last-child) { - // border-right-color: @dark-border; - // border-left-color: @dark-border; - // } - .ant-btn-danger { background: var(--ant-color-error-bg); @@ -467,7 +408,7 @@ img.keyboard-mouse-icon:first-child { color: var(--ant-color-text-primary); font-weight: bold; - &:hover{ + &:hover { color: var(--color-blue-zircon); } } From ebae08d8be53a468984df4f3f51de6dba2211d6c Mon Sep 17 00:00:00 2001 From: Philipp Otto Date: Fri, 20 Dec 2024 13:41:31 +0100 Subject: [PATCH 06/13] remove unnecessary config provider --- frontend/javascripts/navbar.tsx | 105 +++++++++++++++----------------- 1 file changed, 50 insertions(+), 55 deletions(-) diff --git a/frontend/javascripts/navbar.tsx b/frontend/javascripts/navbar.tsx index 35ba1acc48b..234d0798a96 100644 --- a/frontend/javascripts/navbar.tsx +++ b/frontend/javascripts/navbar.tsx @@ -942,62 +942,57 @@ function Navbar({ const separator =
; return ( - -
- - - - - - setIsHelpMenuOpen(openKeys.includes(HELP_MENU_KEY))} - style={{ - paddingTop: - navbarHeight > constants.DEFAULT_NAVBAR_HEIGHT ? constants.BANNER_HEIGHT : 0, - lineHeight: `${constants.DEFAULT_NAVBAR_HEIGHT}px`, - }} - theme="dark" - subMenuCloseDelay={subMenuCloseDelay} - triggerSubMenuAction="click" - // There is a bug where the last menu entry disappears behind the overflow indicator - // although there is ample space available, see https://github.com/ant-design/ant-design/issues/32277 - disabledOverflow - items={menuItems} - /> - - {isInAnnotationView ? separator : null} - setIsHelpModalOpen(false)} - centeredLayout - /> - constants.DEFAULT_NAVBAR_HEIGHT ? constants.BANNER_HEIGHT : 0, - }} - /> +
+ + + + + + setIsHelpMenuOpen(openKeys.includes(HELP_MENU_KEY))} + style={{ + paddingTop: navbarHeight > constants.DEFAULT_NAVBAR_HEIGHT ? constants.BANNER_HEIGHT : 0, + lineHeight: `${constants.DEFAULT_NAVBAR_HEIGHT}px`, + }} + theme="dark" + subMenuCloseDelay={subMenuCloseDelay} + triggerSubMenuAction="click" + // There is a bug where the last menu entry disappears behind the overflow indicator + // although there is ample space available, see https://github.com/ant-design/ant-design/issues/32277 + disabledOverflow + items={menuItems} + /> -
- {trailingNavItems} -
-
- + {isInAnnotationView ? separator : null} + setIsHelpModalOpen(false)} + centeredLayout + /> + constants.DEFAULT_NAVBAR_HEIGHT ? constants.BANNER_HEIGHT : 0, + }} + /> +
+ {trailingNavItems} +
+
); } From cc346a48bf70cfb1791391e1f5558fcc8f967420 Mon Sep 17 00:00:00 2001 From: Philipp Otto Date: Fri, 20 Dec 2024 13:50:02 +0100 Subject: [PATCH 07/13] remove import --- frontend/javascripts/navbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/javascripts/navbar.tsx b/frontend/javascripts/navbar.tsx index 234d0798a96..064187c9b6a 100644 --- a/frontend/javascripts/navbar.tsx +++ b/frontend/javascripts/navbar.tsx @@ -62,7 +62,7 @@ import type { ItemType, MenuItemType, SubMenuType } from "antd/es/menu/interface import type { MenuClickEventHandler } from "rc-menu/lib/interface"; import constants from "oxalis/constants"; import { MaintenanceBanner, UpgradeVersionBanner } from "banners"; -import { getAntdTheme, getSystemColorTheme, NavAndStatusBarTheme } from "theme"; +import { getAntdTheme, getSystemColorTheme } from "theme"; import { formatUserName } from "oxalis/model/accessors/user_accessor"; import { isAnnotationFromDifferentOrganization, From 269848ca1f32859d6d0bd1fb872a7ca5281fe9fa Mon Sep 17 00:00:00 2001 From: Philipp Otto Date: Fri, 20 Dec 2024 13:50:53 +0100 Subject: [PATCH 08/13] remove commented tokens --- frontend/javascripts/theme.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/frontend/javascripts/theme.tsx b/frontend/javascripts/theme.tsx index 8060e9cac5c..1dd85300877 100644 --- a/frontend/javascripts/theme.tsx +++ b/frontend/javascripts/theme.tsx @@ -32,10 +32,6 @@ const OverridesForNavbarAndStatusBarTheme: ThemeConfig = { colorBgContainer: "#383d48", colorBorder: "#4e4e4e", colorPrimaryBorder: "#4e4e4e", - // lineWidth: 0, - // controlOutlineWidth: 0, - // lineWidthFocus: 0, - // colorBorder: "transparent", // Use a non-transparent color for disabled backgrounds. Otherwise the // erase-buttons which hide under their neighbors would not hide properly. colorBgContainerDisabled: "#313131", From 3f1e7986543935c56d74424e408de65ea8a8cc04 Mon Sep 17 00:00:00 2001 From: Philipp Otto Date: Mon, 6 Jan 2025 12:50:24 +0100 Subject: [PATCH 09/13] fix inconsistent background colors in navbar by correctly reading the dark-theme-adapted primary color --- frontend/javascripts/theme.tsx | 49 +++++++++++++++++++++------------- 1 file changed, 30 insertions(+), 19 deletions(-) diff --git a/frontend/javascripts/theme.tsx b/frontend/javascripts/theme.tsx index 1dd85300877..dd4a8c12941 100644 --- a/frontend/javascripts/theme.tsx +++ b/frontend/javascripts/theme.tsx @@ -14,13 +14,32 @@ const ColorWKLinkHover = "#a8b4ff"; // slightly brighter WK Blue const ColorWKDarkGrey = "#1f1f1f"; const ColorWhite = "white"; const ColorBlack = "black"; +const ColorDarkBg = "#383d48"; + +// Ant Design Customizations +const globalDesignToken: Partial = { + colorPrimary: ColorWKBlue, + colorLink: ColorWKBlue, + colorLinkHover: ColorWKLinkHover, + colorInfo: ColorWKBlue, + blue: ColorWKBlue, + borderRadius: 4, + fontFamily: + '"Nunito", "Monospaced Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;', + colorPrimaryBg: ColorWKBlue, +}; + +const darkGlobalToken = theme.getDesignToken({ + token: globalDesignToken, + algorithm: theme.darkAlgorithm, +}); const OverridesForNavbarAndStatusBarTheme: ThemeConfig = { components: { Radio: { - buttonCheckedBg: ColorWKBlue, - buttonSolidCheckedBg: ColorWKBlue, - buttonBg: "#383d48", + buttonCheckedBg: darkGlobalToken.colorPrimary, + buttonSolidCheckedBg: darkGlobalToken.colorPrimary, + buttonBg: ColorDarkBg, }, Button: { primaryShadow: "none", @@ -28,8 +47,7 @@ const OverridesForNavbarAndStatusBarTheme: ThemeConfig = { }, token: { colorPrimary: ColorWKBlue, - - colorBgContainer: "#383d48", + colorBgContainer: ColorDarkBg, colorBorder: "#4e4e4e", colorPrimaryBorder: "#4e4e4e", // Use a non-transparent color for disabled backgrounds. Otherwise the @@ -77,19 +95,6 @@ export function getAntdTheme(userTheme: Theme) { }, }; - // Ant Design Customizations - const globalDesignToken: Partial = { - colorPrimary: ColorWKBlue, - colorLink: ColorWKBlue, - colorLinkHover: ColorWKLinkHover, - colorInfo: ColorWKBlue, - blue: ColorWKBlue, - borderRadius: 4, - fontFamily: - '"Nunito", "Monospaced Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;', - colorPrimaryBg: ColorWKBlue, - }; - if (userTheme === "dark") { algorithm = theme.darkAlgorithm; components.Tree = { @@ -98,7 +103,13 @@ export function getAntdTheme(userTheme: Theme) { nodeHoverBg: ColorWKDarkGrey, }; } - return { algorithm, token: globalDesignToken, components }; + return { + algorithm, + // Without the clone(), the default theme shows dark backgrounds in various components. + // Apparently, antd mutates this variable? + token: _.clone(globalDesignToken), + components, + }; } export default function GlobalThemeProvider({ From 6e1a7e90cfaeed51eb8994e066942b448a5faa50 Mon Sep 17 00:00:00 2001 From: Philipp Otto Date: Mon, 6 Jan 2025 12:51:53 +0100 Subject: [PATCH 10/13] fix style of trailing navbar items in default theme --- frontend/javascripts/navbar.tsx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/frontend/javascripts/navbar.tsx b/frontend/javascripts/navbar.tsx index 064187c9b6a..c3169385ea9 100644 --- a/frontend/javascripts/navbar.tsx +++ b/frontend/javascripts/navbar.tsx @@ -983,15 +983,17 @@ function Navbar({ paddingTop: navbarHeight > constants.DEFAULT_NAVBAR_HEIGHT ? constants.BANNER_HEIGHT : 0, }} /> -
- {trailingNavItems} -
+ +
+ {trailingNavItems} +
+ ); } From 8c5ab3ec3811c824b7e5448300f7de0c710b4214 Mon Sep 17 00:00:00 2001 From: Philipp Otto Date: Mon, 6 Jan 2025 14:12:48 +0100 Subject: [PATCH 11/13] update changelog --- CHANGELOG.unreleased.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md index 1f0225d766c..db6eb2a2218 100644 --- a/CHANGELOG.unreleased.md +++ b/CHANGELOG.unreleased.md @@ -21,6 +21,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released - Improved the default colors for skeleton trees. [#8228](https://github.com/scalableminds/webknossos/pull/8228) - Allowed to train an AI model using differently sized bounding boxes. We recommend all bounding boxes to have equal dimensions or to have dimensions which are multiples of the smallest bounding box. [#8222](https://github.com/scalableminds/webknossos/pull/8222) - Within the bounding box tool, the cursor updates immediately after pressing `ctrl`, indicating that a bounding box can be moved instead of resized. [#8253](https://github.com/scalableminds/webknossos/pull/8253) +- Improved the styling of active tools and modes in the toolbar. [#8295](https://github.com/scalableminds/webknossos/pull/8295) ### Fixed - Fixed that listing datasets with the `api/datasets` route without compression failed due to missing permissions regarding public datasets. [#8249](https://github.com/scalableminds/webknossos/pull/8249) From 48ede469b96a9d27ef4aa1f95f08291184833c55 Mon Sep 17 00:00:00 2001 From: Philipp Otto Date: Tue, 7 Jan 2025 11:40:36 +0100 Subject: [PATCH 12/13] fix border radius in skeleton-specific buttons and tune width of proofreading icon --- .../javascripts/components/fast_tooltip.tsx | 2 +- .../oxalis/view/action-bar/toolbar_view.tsx | 25 ++++++++----------- 2 files changed, 12 insertions(+), 15 deletions(-) diff --git a/frontend/javascripts/components/fast_tooltip.tsx b/frontend/javascripts/components/fast_tooltip.tsx index cb31751b8fc..d80d2ddd49c 100644 --- a/frontend/javascripts/components/fast_tooltip.tsx +++ b/frontend/javascripts/components/fast_tooltip.tsx @@ -32,7 +32,7 @@ import { Tooltip as ReactTooltip } from "react-tooltip"; const ROOT_TOOLTIP_IDS = { DEFAULT: "main-tooltip", DYNAMIC: "main-tooltip-dynamic", -}; +} as const; export type FastTooltipPlacement = | "top" diff --git a/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx b/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx index 4f27413235f..000fe1f5ca3 100644 --- a/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx +++ b/frontend/javascripts/oxalis/view/action-bar/toolbar_view.tsx @@ -380,7 +380,7 @@ function VolumeInterpolationButton() { ); } -function AdditionalSkeletonModesButtons() { +function SkeletonSpecificButtons() { const dispatch = useDispatch(); const isMergerModeEnabled = useSelector( (state: OxalisState) => state.temporaryConfiguration.isMergerModeEnabled, @@ -418,7 +418,12 @@ function AdditionalSkeletonModesButtons() { ); return ( - + + setShowMaterializeVolumeAnnotationModal(false)} /> )} - + ); } @@ -1136,6 +1141,7 @@ export default function ToolbarView() { className="fas fa-clipboard-check" style={{ opacity: disabledInfosForTools[AnnotationToolEnum.PROOFREAD].isDisabled ? 0.5 : 1, + padding: "0 4px", }} /> @@ -1175,7 +1181,7 @@ function ToolSpecificSettings({ isControlOrMetaPressed: boolean; isShiftPressed: boolean; }) { - const showCreateTreeButton = hasSkeleton && adaptedActiveTool === AnnotationToolEnum.SKELETON; + const showSkeletonButtons = hasSkeleton && adaptedActiveTool === AnnotationToolEnum.SKELETON; const showNewBoundingBoxButton = adaptedActiveTool === AnnotationToolEnum.BOUNDING_BOX; const showCreateCellButton = hasVolume && VolumeTools.includes(adaptedActiveTool); const showChangeBrushSizeButton = @@ -1204,16 +1210,7 @@ function ToolSpecificSettings({ return ( <> - {showCreateTreeButton ? ( - - - - - ) : null} + {showSkeletonButtons ? : null} {showNewBoundingBoxButton ? ( Date: Tue, 7 Jan 2025 13:37:27 +0100 Subject: [PATCH 13/13] remove redundant colorPrimary definition --- frontend/javascripts/theme.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/javascripts/theme.tsx b/frontend/javascripts/theme.tsx index dd4a8c12941..a74ecaa5a07 100644 --- a/frontend/javascripts/theme.tsx +++ b/frontend/javascripts/theme.tsx @@ -46,7 +46,6 @@ const OverridesForNavbarAndStatusBarTheme: ThemeConfig = { }, }, token: { - colorPrimary: ColorWKBlue, colorBgContainer: ColorDarkBg, colorBorder: "#4e4e4e", colorPrimaryBorder: "#4e4e4e",