From 27d500948630cc8b9f2b6447080f1452edb74a32 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 28 Nov 2025 20:44:29 +0200 Subject: [PATCH 1/9] style(mobile/context_menu): disable hover color --- apps/client/src/stylesheets/theme-next/base.css | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css index 48fbdedff..ac534d3f9 100644 --- a/apps/client/src/stylesheets/theme-next/base.css +++ b/apps/client/src/stylesheets/theme-next/base.css @@ -157,10 +157,6 @@ body.desktop .dropdown-submenu .dropdown-menu::before { content: unset; } -body.mobile .dropdown-submenu .dropdown-menu { - background: transparent !important; -} - body.desktop .dropdown-submenu .dropdown-menu { backdrop-filter: var(--dropdown-backdrop-filter); background: transparent; @@ -201,10 +197,6 @@ body.mobile .dropdown-item:not(:last-of-type) { margin-bottom: 0.5em; } -body.mobile .dropdown-submenu:hover { - background: transparent !important; -} - html body .dropdown-item.disabled, html body .dropdown-item[disabled] { color: var(--menu-text-color) !important; @@ -325,6 +317,7 @@ body.desktop .dropdown-menu.static .dropdown-item.active { body.mobile .dropdown-menu { --dropdown-menu-padding-vertical: 0.7em; --dropdown-menu-padding-horizontal: 1em; + --hover-item-background-color: var(--card-background-color); font-size: 1em !important; .dropdown-toggle::after { From 263a96e8b71941c30dea41099dadf60638a933f9 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 28 Nov 2025 20:57:42 +0200 Subject: [PATCH 2/9] style(mobile/context_menu): improve submenu style --- apps/client/src/stylesheets/theme-next/base.css | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css index ac534d3f9..2cf72d4db 100644 --- a/apps/client/src/stylesheets/theme-next/base.css +++ b/apps/client/src/stylesheets/theme-next/base.css @@ -163,7 +163,6 @@ body.desktop .dropdown-submenu .dropdown-menu { } .dropdown-item, -body.mobile .dropdown-submenu .dropdown-toggle, .excalidraw .context-menu .context-menu-item { --menu-item-start-padding: 8px; --menu-item-end-padding: 22px; @@ -359,6 +358,20 @@ body.mobile .dropdown-menu { .dropdown-divider { visibility: hidden; } + + .dropdown-submenu.submenu-open { + .dropdown-toggle { + padding-bottom: var(--dropdown-menu-padding-vertical); + } + + .dropdown-menu { + --menu-background-color: transparent; + + .dropdown-item { + background: transparent; + } + } + } } /* #endregion */ From 18d3cb6f0cdea122c031da7637725029ee465b85 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 28 Nov 2025 21:14:06 +0200 Subject: [PATCH 3/9] style(mobile/context_menu): dark submenu style --- .../src/stylesheets/theme-next/base.css | 20 +++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css index 2cf72d4db..50ae376aa 100644 --- a/apps/client/src/stylesheets/theme-next/base.css +++ b/apps/client/src/stylesheets/theme-next/base.css @@ -359,16 +359,24 @@ body.mobile .dropdown-menu { visibility: hidden; } - .dropdown-submenu.submenu-open { + .dropdown-submenu { + padding: 0 !important; + .dropdown-toggle { - padding-bottom: var(--dropdown-menu-padding-vertical); + padding: var(--dropdown-menu-padding-vertical) var(--dropdown-menu-padding-horizontal); } - .dropdown-menu { - --menu-background-color: transparent; + &.submenu-open { + .dropdown-toggle { + padding-bottom: var(--dropdown-menu-padding-vertical); + } - .dropdown-item { - background: transparent; + .dropdown-menu { + --menu-background-color: rgba(0, 0, 0, 0.15); + + .dropdown-item { + background: transparent; + } } } } From 0aafdca999adba01d6d322fe435efdff83c61b8d Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 28 Nov 2025 21:21:07 +0200 Subject: [PATCH 4/9] style(mobile/context_menu): improve backdrop --- apps/client/src/stylesheets/theme-next/base.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css index 50ae376aa..813643401 100644 --- a/apps/client/src/stylesheets/theme-next/base.css +++ b/apps/client/src/stylesheets/theme-next/base.css @@ -313,6 +313,14 @@ body.desktop .dropdown-menu.static .dropdown-item.active { } /* #region Mobile tweaks for dropdown menus */ +body.mobile #context-menu-cover { + transition: background-color 150ms ease-in; + + &.show { + background: rgba(0, 0, 0, 0.7); + } +} + body.mobile .dropdown-menu { --dropdown-menu-padding-vertical: 0.7em; --dropdown-menu-padding-horizontal: 1em; @@ -320,7 +328,7 @@ body.mobile .dropdown-menu { font-size: 1em !important; .dropdown-toggle::after { - top: var(--dropdown-menu-padding-vertical); + top: 0.5em; right: var(--dropdown-menu-padding-horizontal); transform: translateX(50%) rotate(90deg); } From 781215394ec2467cefe37bc29ac06e82030c2607 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 28 Nov 2025 21:24:51 +0200 Subject: [PATCH 5/9] refactor(mobile/context_menu): unify styles --- apps/client/src/stylesheets/theme-next/base.css | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css index 813643401..7370d276b 100644 --- a/apps/client/src/stylesheets/theme-next/base.css +++ b/apps/client/src/stylesheets/theme-next/base.css @@ -119,17 +119,6 @@ body.backdrop-effects-disabled { font-size: 0.9rem !important; } -body.mobile .dropdown-menu { - backdrop-filter: var(--dropdown-backdrop-filter); - border-radius: var(--dropdown-border-radius); - position: relative; -} - -body.mobile .dropdown-menu .dropdown-menu { - backdrop-filter: unset !important; - border-radius: unset !important; -} - body.desktop .dropdown-menu::before, :root .ck.ck-dropdown__panel::before, :root .excalidraw .popover::before, @@ -326,6 +315,9 @@ body.mobile .dropdown-menu { --dropdown-menu-padding-horizontal: 1em; --hover-item-background-color: var(--card-background-color); font-size: 1em !important; + backdrop-filter: var(--dropdown-backdrop-filter); + border-radius: var(--dropdown-border-radius); + position: relative; .dropdown-toggle::after { top: 0.5em; @@ -369,6 +361,7 @@ body.mobile .dropdown-menu { .dropdown-submenu { padding: 0 !important; + backdrop-filter: unset !important; .dropdown-toggle { padding: var(--dropdown-menu-padding-vertical) var(--dropdown-menu-padding-horizontal); From a7ad45635e2ad96160d70d5e050568f5e70090a3 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 28 Nov 2025 21:27:06 +0200 Subject: [PATCH 6/9] style(mobile/context_menu): clean up border radiuses --- apps/client/src/stylesheets/theme-next/base.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css index 7370d276b..c2bb97c00 100644 --- a/apps/client/src/stylesheets/theme-next/base.css +++ b/apps/client/src/stylesheets/theme-next/base.css @@ -316,7 +316,7 @@ body.mobile .dropdown-menu { --hover-item-background-color: var(--card-background-color); font-size: 1em !important; backdrop-filter: var(--dropdown-backdrop-filter); - border-radius: var(--dropdown-border-radius); + border-radius: var(--dropdown-border-radius) var(--dropdown-border-radius) 0 0; position: relative; .dropdown-toggle::after { @@ -374,6 +374,7 @@ body.mobile .dropdown-menu { .dropdown-menu { --menu-background-color: rgba(0, 0, 0, 0.15); + border-radius: 0; .dropdown-item { background: transparent; From 5847ce5c1419c971e47f8373926ffb9f4efda053 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 28 Nov 2025 23:21:14 +0200 Subject: [PATCH 7/9] feat(dev): enable CSS source maps --- apps/server/src/routes/assets.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/server/src/routes/assets.ts b/apps/server/src/routes/assets.ts index d8854d31a..7fc3f1a27 100644 --- a/apps/server/src/routes/assets.ts +++ b/apps/server/src/routes/assets.ts @@ -27,7 +27,8 @@ async function register(app: express.Application) { appType: "custom", cacheDir: path.join(srcRoot, "../../.cache/vite"), base: `/${assetUrlFragment}/`, - root: clientDir + root: clientDir, + css: { devSourcemap: true } }); app.use(`/${assetUrlFragment}/`, (req, res, next) => { req.url = `/${assetUrlFragment}` + req.url; From 19cf07564f3d17d77ac30a2cc40d98b5f0c141f5 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 28 Nov 2025 23:21:31 +0200 Subject: [PATCH 8/9] style(mobile/context_menu): taller height + small animation when expanding items --- apps/client/src/stylesheets/style.css | 2 +- .../src/stylesheets/theme-next/base.css | 27 ++++++++++++------- 2 files changed, 18 insertions(+), 11 deletions(-) diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index 342cd671a..62afc2012 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -1316,7 +1316,7 @@ body.mobile #context-menu-container.mobile-bottom-menu { inset-inline-end: 0 !important; bottom: 0 !important; top: unset !important; - max-height: 70vh; + max-height: 90vh; overflow: auto !important; user-select: none; -webkit-user-select: none; diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css index c2bb97c00..5e62b8011 100644 --- a/apps/client/src/stylesheets/theme-next/base.css +++ b/apps/client/src/stylesheets/theme-next/base.css @@ -367,19 +367,26 @@ body.mobile .dropdown-menu { padding: var(--dropdown-menu-padding-vertical) var(--dropdown-menu-padding-horizontal); } + .dropdown-menu { + --menu-background-color: rgba(0, 0, 0, 0.15); + border-radius: 0; + max-height: 0; + transition: max-height 100ms ease-in; + display: block !important; + + &.show { + max-height: 1000px; + } + + .dropdown-item { + background: transparent; + } + } + &.submenu-open { .dropdown-toggle { padding-bottom: var(--dropdown-menu-padding-vertical); - } - - .dropdown-menu { - --menu-background-color: rgba(0, 0, 0, 0.15); - border-radius: 0; - - .dropdown-item { - background: transparent; - } - } + } } } } From 3cc64b576429b050ea356c3c76b8bf72f4a5b9b7 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 28 Nov 2025 23:43:16 +0200 Subject: [PATCH 9/9] fix(mobile/context_menu): note color picker not working --- .../menus/custom-items/NoteColorPicker.tsx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/apps/client/src/menus/custom-items/NoteColorPicker.tsx b/apps/client/src/menus/custom-items/NoteColorPicker.tsx index 08bc7c84a..847ae484e 100644 --- a/apps/client/src/menus/custom-items/NoteColorPicker.tsx +++ b/apps/client/src/menus/custom-items/NoteColorPicker.tsx @@ -8,6 +8,7 @@ import Color, { ColorInstance } from "color"; import Debouncer from "../../utils/debouncer"; import FNote from "../../entities/fnote"; import froca from "../../services/froca"; +import { isMobile } from "../../services/utils"; const COLOR_PALETTE = [ "#e64d4d", "#e6994d", "#e5e64d", "#99e64d", "#4de64d", "#4de699", @@ -62,13 +63,13 @@ export default function NoteColorPicker(props: NoteColorPickerProps) { } else { attributes.removeOwnedLabelByName(note, "color"); } - + setCurrentColor(color); } }, [note, currentColor]); return
- + - - + + {COLOR_PALETTE.map((color) => ( (null); const colorInputDebouncer = useRef | null>(null); const callbackRef = useRef(props.onSelect); - const isSafari = useRef(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)); useEffect(() => { colorInputDebouncer.current = new Debouncer(250, (color) => { @@ -160,13 +160,13 @@ function CustomColorCell(props: ColorCellProps) { }, [pickedColor]); return
{ - // The color picker dropdown will close on Safari if the parent context menu is + onClick={isMobile() ? (e) => { + // The color picker dropdown will close on some browser if the parent context menu is // dismissed, so stop the click propagation to prevent dismissing the menu. - isSafari.current && e.stopPropagation(); - }}> + e.stopPropagation(); + } : undefined}>