gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-19 22:58:52 +02:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

style/global menu: tweak the update available indicators

Browse Source
This commit is contained in:
Adorian Doran 2025-10-13 20:18:04 +03:00
parent 2ef4aeb884
commit 6fd37c4c8d
5 changed files with 36 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/client/src/stylesheets/theme-next-dark.css
View File

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

3
apps/client/src/stylesheets/theme-next-light.css
View File

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

11
apps/client/src/stylesheets/theme-next/shell.css
View File

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

39
apps/client/src/widgets/buttons/global_menu.css
View File

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

9
apps/client/src/widgets/buttons/global_menu.tsx
View File

@ -26,7 +26,7 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
const isVerticalLayout = !isHorizontalLayout;
const parentComponent = useContext(ParentComponent);
const { isUpdateAvailable, latestVersion } = useTriliumUpdateStatus();
return (
<Dropdown
className="global-menu"
@ -34,7 +34,7 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
text={<>
{isVerticalLayout && <VerticalLayoutIcon />}
{isUpdateAvailable && <div class="global-menu-button-update-available">
<span className="bx bx-sync global-menu-button-update-available-button" title={t("update_available.update_available")}></span>
<span className="bx bxs-down-arrow-alt global-menu-button-update-available-button" title={t("update_available.update_available")}></span>
</div>}
</>}
noDropdownListStyle
@ -58,7 +58,10 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
<KeyboardActionMenuItem command="showHelp" icon="bx bx-help-circle" text={t("global_menu.show_help")} />
<KeyboardActionMenuItem command="showCheatsheet" icon="bx bxs-keyboard" text={t("global_menu.show-cheatsheet")} />
<MenuItem command="openAboutDialog" icon="bx bx-info-circle" text={t("global_menu.about")} />
{isUpdateAvailable && <MenuItem command={() => window.open("https://github.com/TriliumNext/Trilium/releases/latest")} icon="bx bx-sync" text={t("global_menu.update_available", { latestVersion })} /> }
{isUpdateAvailable && <>
<FormDropdownDivider />
<MenuItem command={() => window.open("https://github.com/TriliumNext/Trilium/releases/latest")} icon="bx bx-download" text={t("global_menu.update_available", { latestVersion })} />
</>}
{!isElectron() && <BrowserOnlyOptions />}
</Dropdown>
)