Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added height and width properties to both progress bars #588

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Added height and width properties to both progress bars #588

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
59333d2
Added height and width properties to both progress bars
Duncanr-glitch Dec 21, 2024
736b72a
modified _css_length to handle raw strings with the unit already applied
Duncanr-glitch Dec 21, 2024
d52300e
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Dec 21, 2024
3f0e163
reversion to pull
Duncanr-glitch Dec 21, 2024
d4a8316
deleting to readd regex library
Duncanr-glitch Dec 21, 2024
06cff4f
readding regex in the right place
Duncanr-glitch Dec 21, 2024
4b3fce3
removed my changes to _css_length as they aren't needed
Duncanr-glitch Dec 21, 2024
c09095c
moved _css_length only to the actual setting of height/width
Duncanr-glitch Dec 21, 2024
75ed17e
add falsy handling defaulting to 3px
Duncanr-glitch Dec 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions client_code/Demo/form_template.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ components:
type: Label
- layout_properties: {grid_position: 'MBVZPS,ZJSMWM'}
name: indeterminate_progress_bar_1
properties: {}
properties: {height: 50, width: "75%"}
type: form:ProgressBar.Indeterminate
- layout_properties:
col_widths: {}
Expand All @@ -35,7 +35,7 @@ components:
type: Label
- layout_properties: {grid_position: 'TUUBRI,CREBNE'}
name: progress_bar
properties: {indicator_colour: '#1976D2', progress: 0.5, track_colour: '#b3d4fc'}
properties: {indicator_colour: '#1976D2', progress: 0.5, track_colour: '#b3d4fc', height: "50px", width: "55vh"}
type: form:ProgressBar.Determinate
- layout_properties: {grid_position: 'YBVZRV,XCMOTC'}
name: label_3
Expand Down
24 changes: 23 additions & 1 deletion client_code/ProgressBar/Determinate/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
from anvil.js import get_dom_node

from anvil_extras import ProgressBar
from anvil_extras.utils._component_helpers import _html_injector
from anvil_extras.utils._component_helpers import _css_length, _html_injector

from ._anvil_designer import DeterminateTemplate

Expand All @@ -19,8 +19,10 @@
class Determinate(DeterminateTemplate):
def __init__(self, **properties):
self.indicator_dom_node = get_dom_node(self.indicator_panel)
self.dom_node = get_dom_node(self)
self.role = "ae-progress-track"
self.indicator_panel.role = "ae-progress-indicator"

self._props = properties
self.init_components(**properties)

Expand All @@ -33,6 +35,26 @@ def progress(self, value):
self._props["progress"] = value
self.indicator_dom_node.style.setProperty("width", f"{value:%}")

@property
def height(self):
return self._height

@height.setter
def height(self, value):
value = _css_length(value)
self._height = value
self.indicator_dom_node.style.setProperty("height", value)

@property
def width(self):
return self._width

@width.setter
def width(self, value):
value = _css_length(value)
self._width = value
self.dom_node.style.setProperty("width", value)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a utility function for this so we can support number as well as strings.

It's in _component_helpers, _css_length.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perfect, that makes sense. I did modify that utility function so that strings with the unit already applied can be used as well.


@property
def track_colour(self):
return self._props.get("track_colour")
Expand Down
2 changes: 2 additions & 0 deletions client_code/ProgressBar/Determinate/form_template.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,5 @@ properties:
- {default_binding_prop: true, default_value: '#b3d4fc', name: track_colour, type: color}
- {default_value: '#1976D2', name: indicator_colour, type: color}
- {default_value: 0.25, name: progress, type: number}
- {default_value: "3px", name: height, type: string}
- {default_value: "100%", name: width, type: string}
23 changes: 22 additions & 1 deletion client_code/ProgressBar/Indeterminate/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
from anvil.js import get_dom_node

from anvil_extras import ProgressBar
from anvil_extras.utils._component_helpers import _get_dom_node_id, _html_injector
from anvil_extras.utils._component_helpers import _css_length, _html_injector

from ._anvil_designer import IndeterminateTemplate

Expand All @@ -18,12 +18,33 @@

class Indeterminate(IndeterminateTemplate):
def __init__(self, **properties):
self.indicator_dom_node = get_dom_node(self.indicator_panel)
self.dom_node = get_dom_node(self)
self._props = properties
self.role = "ae-progress-track"
self.indicator_panel.role = "ae-indeterminate-progress-indicator"
self.init_components(**properties)

@property
def height(self):
return self._height

@height.setter
def height(self, value):
value = _css_length(value)
self._height = value
self.indicator_dom_node.style.setProperty("height", value)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fair enough, I'll do that in the next push.


@property
def width(self):
return self._width

@width.setter
def width(self, value):
value = _css_length(value)
self._width = value
self.dom_node.style.setProperty("width", value)

@property
def track_colour(self):
return self._props.get("track_colour")
Expand Down
2 changes: 2 additions & 0 deletions client_code/ProgressBar/Indeterminate/form_template.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,5 @@ is_package: true
properties:
- {default_binding_prop: true, default_value: '#b3d4fc', name: track_colour, type: color}
- {default_value: '#1976D2', name: indicator_colour, type: color}
- {default_value: "3px", name: height, type: string}
- {default_value: "100%", name: width, type: string}
10 changes: 0 additions & 10 deletions client_code/ProgressBar/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,14 @@

css = """ .anvil-role-ae-progress-track, .anvil-role-ae-progress-indicator {
display: block;
height: 3px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can add some null-value handling that would then default to 3px as well :)

margin: 0;
}

.anvil-role-ae-progress-track {
width: 100%;
}

.anvil-role-ae-progress-indicator {
top: 0 !important;
}

.anvil-role-ae-progress-track > .holder, .anvil-role-ae-progress-indicator > .holder {
display: block !important;
}

Comment on lines -19 to -26
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we know why we're removing this? Doesn't seem related to the PR?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When I just tried setting height properties with it left it and it was making the code not work or some awkward height settings.

.anvil-role-ae-indeterminate-progress-indicator, .anvil-role-ae-indeterminate-progress-indicator:before {
height: 3px;
width: 100%;
margin: 0;
}
Expand Down