Add a web widget for the activity indicator (shoelace spinner) #2050
Conversation
ahter
force-pushed
the
add-progress-ring
branch
3 times, most recently
from
5244c21
to
98c2ba6
Compare
This is the web implementation of the spinner component. The details can be found in: https://shoelace.style/components/spinner
Prior to this change, ActivityIndicator wasn't part of the factory for the web example apps. This change imports and adds it so that it can be tested out.
ahter
changed the title
ahter
changed the title
This was necessary to override the behavior of adding flex element to the style. The spinner (activity indicator) needs to have this set to false.
core/src/toga/style/pack.py
Outdated
| if ( | ||
| (self.width == NONE and self.direction == ROW) | ||
| or (self.height == NONE and self.direction == COLUMN) | ||
| ) and getattr(self, "_use_default_width", True): |
There was a problem hiding this comment.
For posterity: this approach was developed pairing with @ahter.
The underlying problem is that if the ActivityIndicator has no Toga style, it falls back to rendering as flex: 0 0 0px, which evaluates as 0 width in CSS. If you apply a fixed width of 20px, the animation for the spin and the gray background become misaligned. We need to work out how to:
- Apply a style override to the ActivityIndicator so that it doesn't collapse to 0 size, or
- Work out how to inject a widget-specific modification to Pack's
__css__implementation to disable the default
It feels to me like both are needed. (1) is needed because if a user applies a "width=100" pack style, we don't want the widget to render weird; (2) is needed to make sure that the default style results in a visible widget.
There was a problem hiding this comment.
This looks good; however, we need to find a better approach for the styling override issue.
FYI: The Linux CI failure will be fixed by #2052. The Android CI failure will be fixed by beeware/briefcase#1380.
PR Checklist: