feat: add Card, SkeletonLoader, and PinInput mobile widgets#193
Merged
Conversation
Completes Phase 1 of the mobile UI widgets plan with the container/loader group: - Card: scoped (RAII) shadowed, elevated container. Draws content on a foreground draw-list channel and paints the shadow/fill/border behind it on dispose, resolving colours from the active theme. - SkeletonLoader: SkeletonLine/Rect/Circle shimmer placeholders with a time-driven sweeping highlight band (frame-rate independent, stateless). - PinInput: N-box PIN/OTP entry with auto-advance and backspace-to-previous navigation. Pure left-pack helpers (NormalizePin, SetPinSlot) are exposed for unit testing. Adds a 'Mobile - Containers & Loaders' demo section and unit tests for the PIN helpers. Updates the plan doc to mark Phase 1 complete. https://claude.ai/code/session_01MXurQivZo7cHkmJSEaD1DZ
- Remove unnecessary 'using System;' from PinInput (IDE0005). - Use the SkeletonLoader id to derive a stable per-placeholder sweep offset so grouped skeletons shimmer in a staggered wave, which also resolves the unused-parameter warning (IDE0060). https://claude.ai/code/session_01MXurQivZo7cHkmJSEaD1DZ
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
2 participants
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
Completes Phase 1 of the mobile UI widgets plan with the remaining "container / loader" group. The earlier form-control and decorator batches (
Switch,SegmentedControl,Chip,Stepper,RangeSlider,Avatar,Badge,Rating,PageIndicator) were already merged; this PR adds the last three widgets.What's new
Card(ImGui.Widgets/Card.cs) — a scoped (RAII) shadowed, elevated container used withusing (new ImGuiWidgets.Card()) { ... }. Since ImGui is immediate-mode and the card's size isn't known until its content is laid out, the body is drawn onto a foreground draw-list channel and the shadow/fill/border are painted behind it onDispose. Padding, rounding, and colours resolve from the active theme (no hard-coded hex).SkeletonLoader(ImGui.Widgets/SkeletonLoader.cs) —SkeletonLine,SkeletonRect, andSkeletonCircleshimmer placeholders. A bright band sweeps horizontally across a muted base fill, driven byImGui.GetTime()so it's frame-rate independent and needs no per-widget state. Colours come fromFrameBg/FrameBgHovered.PinInput(ImGui.Widgets/PinInput.cs) — an N-box PIN / one-time-passcode entry with auto-advance and backspace-to-previous navigation. The value is kept left-packed (no gaps) and optionally digit-restricted. The pure string logic is exposed as public, unit-tested helpersNormalizePinandSetPinSlot.Demo & tests
ImGuiWidgetsDemoexercising all three widgets.ContainerWidgetTestscoveringNormalizePin/SetPinSlotedge cases (digit stripping, truncation, replace/append, clear-and-shift, out-of-range).SwipeableListItem) as next.Notes
ImGui.Widgetslibrary compiles cleanly. The test and example projects can't be built/run in the Linux sandbox because the platform apphost pack for this RID isn't available offline; they build and the tests run on the Windows CI.https://claude.ai/code/session_01MXurQivZo7cHkmJSEaD1DZ
Generated by Claude Code