diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index 0516712e0..c54cb26b7 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -160,6 +160,9 @@ --launcher-pane-horiz-background-color-bgfx: #ffffff17; /* When background effects enabled */ --launcher-pane-horiz-border-color-bgfx: #00000080; /* When background effects enabled */ + --global-menu-update-available-badge-background-color: #7dbe61; + --global-menu-update-available-badge-color: black; + --protected-session-active-icon-color: #8edd8e; --sync-status-error-pulse-color: #f47871; diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index 90745a437..546283414 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -153,6 +153,9 @@ --launcher-pane-horiz-background-color-bgfx: #ffffffb3; /* When background effects enabled */ --launcher-pane-horiz-border-color-bgfx: #00000026; /* When background effects enabled */ + --global-menu-update-available-badge-background-color: #4fa450; + --global-menu-update-available-badge-color: white; + --protected-session-active-icon-color: #16b516; --sync-status-error-pulse-color: #ff5528; diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index 2f3ce7dd6..d653f89af 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -279,14 +279,11 @@ body.layout-horizontal > .horizontal { animation: sync-status-pulse 1s ease-in-out alternate-reverse infinite; } -#launcher-pane .global-menu-button { - --hover-item-background-color: transparent; -} +#launcher-pane button.global-menu-button { + --update-badge-x-offset: 3%; + --update-badge-y-offset: -12%; -#launcher-pane.horizontal .global-menu-button .global-menu-button-update-available { - inset-inline-end: -23px; - bottom: -22px; - transform: scale(0.85); + --hover-item-background-color: transparent; } .tooltip .tooltip-arrow { diff --git a/apps/client/src/widgets/buttons/global_menu.css b/apps/client/src/widgets/buttons/global_menu.css index 0d14456e1..d0a7f78dc 100644 --- a/apps/client/src/widgets/buttons/global_menu.css +++ b/apps/client/src/widgets/buttons/global_menu.css @@ -9,6 +9,9 @@ } button.global-menu-button { + --update-badge-x-offset: 4%; + --update-badge-y-offset: -16%; + position: relative; width: 100% !important; height: 100% !important; @@ -55,13 +58,26 @@ button.global-menu-button { .global-menu-button-update-available { position: absolute; - inset-inline-end: -30px; - bottom: -30px; - width: 100%; - height: 100%; + display: flex; + width: 16px; + height: 16px; + right: calc(0px - var(--update-badge-x-offset)); + bottom: calc(0px - var(--update-badge-y-offset)); + justify-content: center; + align-items: center; + border-radius: 50%; + background: var(--global-menu-update-available-badge-background-color, var(--admonition-tip-accent-color)); + color: var(--global-menu-update-available-badge-color, var(--main-background-color)); + font-size: 16px; + transition: transform 200ms ease-in-out; pointer-events: none; } +.global-menu-button.show .global-menu-button-update-available { + transform: scale(.75); + transform-origin: center; +} + .global-menu .zoom-container { display: flex; flex-direction: row; @@ -99,21 +115,6 @@ button.global-menu-button { margin-inline-end: 6px; } -/* #region Update available */ -.global-menu-button-update-available-button { - width: 21px !important; - height: 21px !important; - padding: 0 !important; - - border-radius: var(--button-border-radius); - transform: scale(0.9); - border: none; - opacity: 0.8; - - display: flex; - align-items: center; - justify-content: center; -} .global-menu-button-wrapper:hover .global-menu-button-update-available-button { opacity: 1; diff --git a/apps/client/src/widgets/buttons/global_menu.tsx b/apps/client/src/widgets/buttons/global_menu.tsx index aaf6a785f..0278e3fb9 100644 --- a/apps/client/src/widgets/buttons/global_menu.tsx +++ b/apps/client/src/widgets/buttons/global_menu.tsx @@ -26,7 +26,7 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout: const isVerticalLayout = !isHorizontalLayout; const parentComponent = useContext(ParentComponent); const { isUpdateAvailable, latestVersion } = useTriliumUpdateStatus(); - + return ( {isVerticalLayout && } {isUpdateAvailable && } } noDropdownListStyle @@ -58,7 +58,10 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout: - {isUpdateAvailable && window.open("https://github.com/TriliumNext/Trilium/releases/latest")} icon="bx bx-sync" text={t("global_menu.update_available", { latestVersion })} /> } + {isUpdateAvailable && <> + + window.open("https://github.com/TriliumNext/Trilium/releases/latest")} icon="bx bx-download" text={t("global_menu.update_available", { latestVersion })} /> + } {!isElectron() && } )