Android: skeuomorphic 1:1 desktop chrome + edge-snap panel + smooth motion#18
Merged
Conversation
…otion - Panel surface now uses asymmetric corner radii so only the inner edge is rounded (top-left/bottom-left for right dock, mirrored for left dock). The outer corners sit flush against the screen so the dark scrim no longer bleeds through the rounding — fixes the 'fleck' artifact. - Panel snaps full-height to the dock edge (Gravity.TOP, no CENTER_VERTICAL), so there is no scrim strip above or below it. - Open/close motion now uses PathInterpolator(0.2, 0.8, 0.2, 1) + hardware layers, identical to the desktop transition curve. The view tree is laid out before the slide starts, eliminating first-frame jank. - Panel uses 22dp elevation for its left shadow (matches desktop -28px 0 72px box-shadow). - Drawables.kt: new skeuomorphic factories (panelSurface, chromeButton, railButton, taskRow with gradient body + inner highlight + 1dp border) matching the desktop CSS gradient + inset-shadow recipe. - Edge handle: redrawn with hardware soft shadow, inset top highlight, and a proper lucide PanelRightOpen icon (panel outline + rail + chevron) instead of the bare 3-line glyph. - Capture row +button is now a primary accent gradient with white icon and lift, matching desktop quick-add. Co-Authored-By: Leon Lin <lexn.lin8@gmail.com>
Contributor
Author
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fix three high-signal issues reported in PR #17's APK test (Android only — no desktop code touched):
Dark "fleck" at the panel's rounded corners. The previous panel was vertically centered and rounded on all four corners, so the rounded top-right / bottom-right corners exposed the dim scrim through the rounding, and there was a horizontal strip of scrim above / below the panel. The panel is now:
Gravity.END | Gravity.TOP,MATCH_PARENTheight), so no scrim strip is visible.cornerRadii— only the inner edge corners are rounded (top-left + bottom-left for right dock, mirrored for left). The outer corners are square and sit flush against the screen edge, so the rounding is never visible against the scrim. Same recipe as the desktop'sborder-radius: var(--panel-radius) 0 0 var(--panel-radius).Open / close not smooth. The panel now slides with
PathInterpolator(0.2, 0.8, 0.2, 1)(identical to the desktop'scubic-bezier(0.2, 0.8, 0.2, 1)). The view tree is laid out before the animation starts (so the first frame isn't the cost of inflating 70+ children), hardware layers are forced for the duration of the slide, and a minimum motion duration of 180 ms is enforced. The close transition uses a matchingcubic-bezier(0.55, 0, 0.7, 0.3)ease-in.Edge handle (bubble) looked cheap. Redrawn with a proper skeuomorphic stack:
View.elevation+ViewOutlineProvider.box-shadow: -8px 16px 28px rgba(15,23,42,0.08)).--handle-bgtoken (already inR.color.handle_grad_top/bot).inset 0 1px 0 rgba(255,255,255,0.72)).PanelRightOpenglyph (panel outline + rail + chevron) instead of the bare 3-stroke icon.Plus a full skeuomorphic chrome system in
Drawables.kt:panelSurface(..., dockEdge, radiusDp)returns aLayerDrawablewith body gradient (top-tinted) + transparent inset top highlight, with asymmetriccornerRadiifor the dock edge.chromeButton,railButton,captureRowfactories returnLayerDrawable(body-gradient, top-highlight)with a 1dp border. Pressed / active states swap colors and pick up the accent line border, matching.sidebar-rail button.is-active.taskRownow also uses the gradient + highlight + border layered drawable instead of a flat fill.primaryButtonproduces an accent-gradient body for the capture-row+button with a faint top highlight, matching.add-taskin the desktop CSS.Testing
./gradlew assembleDebug(Android module)./gradlew assembleRelease(signed)./gradlew lintnpm run build— not relevant, no desktop changesnpm run lint— not relevant, no desktop changescargo check --manifest-path src-tauri/Cargo.toml— not relevant, no Rust changesPlatform Notes
/android/. Phone test required (overlays don't run in CI emulators). The fixes are functional (gravity, drawable layout, motion curve) so they don't require device-specific validation, but visual polish should be confirmed on real hardware.Screenshots
Visual changes are panel-shape, animation curve, and elevation — all of which need a phone to verify. APK is built by the existing
android.ymlworkflow and uploaded as both a workflow artifact and a rollingandroid-latestprerelease once this merges.Link to Devin session: https://app.devin.ai/sessions/a29437e8dd5a412393c371c333455c2a
Requested by: @Leonxlnx