Added height and width properties to both progress bars #588
Conversation
| @width.setter | ||
| def width(self, value): | ||
| self._width = value | ||
| self.dom_node.style.setProperty("width", value) |
There was a problem hiding this comment.
There's a utility function for this so we can support number as well as strings.
It's in _component_helpers, _css_length.
There was a problem hiding this comment.
Perfect, that makes sense. I did modify that utility function so that strings with the unit already applied can be used as well.
| if isinstance(v, str) and re.match( | ||
| r"\b\d+(\.\d+)?\s*(cm|mm|in|pt|pc|px|em|rem|vw|vh|vmin|vmax|%)\b", v | ||
| ): | ||
| return v |
There was a problem hiding this comment.
We dont need this. The try will fail in the next step and will return the original value.
There was a problem hiding this comment.
Yeah, I misread that block, just reverted that part.
| @@ -8,24 +8,14 @@ | |||
|
|
|||
| css = """ .anvil-role-ae-progress-track, .anvil-role-ae-progress-indicator { | |||
| display: block; | |||
| height: 3px; | |||
There was a problem hiding this comment.
Is it better to leave this in to make it the default if someone sets the height to empty string? Or remove the default values entirely from the custom component and leave this css here. So that it's a sensible fallback
There was a problem hiding this comment.
I think it makes more sense to have the default in the designer, then its easier to track because it's always getting set in code imho.
There was a problem hiding this comment.
I can add some null-value handling that would then default to 3px as well :)
| .anvil-role-ae-progress-indicator { | ||
| top: 0 !important; | ||
| } | ||
|
|
||
| .anvil-role-ae-progress-track > .holder, .anvil-role-ae-progress-indicator > .holder { | ||
| display: block !important; | ||
| } | ||
|
|
There was a problem hiding this comment.
Do we know why we're removing this? Doesn't seem related to the PR?
There was a problem hiding this comment.
When I just tried setting height properties with it left it and it was making the code not work or some awkward height settings.
| value = _css_length(value) | ||
| self._height = value | ||
| self.indicator_dom_node.style.setProperty("height", value) |
There was a problem hiding this comment.
Better to convert to css length after we assign it to the private variable. That way the value you set is the value you get. This will also mean the designer property editors don't mysteriously change which I think they would currently. If you set the value to 10 then the designer might display 10px.
There was a problem hiding this comment.
Fair enough, I'll do that in the next push.
| @width.setter | ||
| def width(self, value): | ||
| self._width = value | ||
| self.dom_node.style.setProperty("width", _css_length(value or "3px")) |
There was a problem hiding this comment.
Let's fix the default widths 😊
There was a problem hiding this comment.
Oh right, that one should be 100%, my bad. I'll do that tomorrow, already shut down the computer for the night, haha.
There was a problem hiding this comment.
Just di that in the latest push, lmk if there's anything else :)
Adds the feature in issue #428:
Added height and width for both determinatei and indeterminate progress bars.
The Width property can take any valid CSS width value.
The Height property can take any valid CSS height value except the % kind because those seemed to just hide the progress bars.