[go: up one dir, main page]
Skip to content

Commit

Permalink
add max-size
Browse files Browse the repository at this point in the history
  • Loading branch information
@Aran-Fey
Aran-Fey committed Aug 10, 2024
1 parent 9815269 commit 6181053
Show file tree
Hide file tree
Showing 71 changed files with 670 additions and 268 deletions.
38 changes: 34 additions & 4 deletions frontend/code/components/componentBase.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@ export type ComponentState = {
// How much space to leave on the left, top, right, bottom
_margin_?: [number, number, number, number];
// Explicit size request, if any
_size_?: [number, number];
_min_size_?: [number, number];
// Maximum size, if any
_max_size_?: [number | null, number | null];
// Alignment of the component within its parent, if any
_align_?: [number | null, number | null];
// Scrolling behavior
Expand Down Expand Up @@ -112,9 +114,13 @@ export abstract class ComponentBase {
deltaState: ComponentState,
latentComponents: Set<ComponentBase>
): void {
if (deltaState._size_ !== undefined) {
this.element.style.minWidth = `${deltaState._size_[0]}rem`;
this.element.style.minHeight = `${deltaState._size_[1]}rem`;
if (deltaState._min_size_ !== undefined) {
this.element.style.minWidth = `${deltaState._min_size_[0]}rem`;
this.element.style.minHeight = `${deltaState._min_size_[1]}rem`;
}

if (deltaState._max_size_ !== undefined) {
this._updateMaxSize(deltaState._max_size_);
}

if (deltaState._align_ !== undefined) {
Expand All @@ -133,6 +139,30 @@ export abstract class ComponentBase {

onChildGrowChanged(): void {}

private _updateMaxSize(maxSize: [number | null, number | null]): void {
let transform: string[] = [];

if (maxSize[0] === null) {
this.element.style.removeProperty('max-width');
this.element.style.removeProperty('left');
} else {
this.element.style.maxWidth = `${maxSize[0]}rem`;
this.element.style.left = `50%`;
transform.push('translateX(-50%)');
}

if (maxSize[1] === null) {
this.element.style.removeProperty('max-height');
this.element.style.removeProperty('top');
} else {
this.element.style.maxHeight = `${maxSize[1]}rem`;
this.element.style.top = `50%`;
transform.push('translateY(-50%)');
}

this.element.style.transform = transform.join(' ');
}

private _updateAlign(align: [number | null, number | null]): void {
if (align[0] === null && align[1] === null) {
// Remove the alignElement if we have one
Expand Down
4 changes: 2 additions & 2 deletions frontend/code/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -465,12 +465,12 @@ export function getComponentLayout(component: ComponentBase): ComponentLayout {
// provided size
result.requestedInnerWidth = Math.max(
result.naturalWidth,
component.state._size_[0]
component.state._min_size_[0]
);

result.requestedInnerHeight = Math.max(
result.naturalHeight,
component.state._size_[1]
component.state._min_size_[1]
);

// Apply margins to arrive at the requested outer size
Expand Down
4 changes: 2 additions & 2 deletions rio/app.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ def build(self) -> rio.Component:
rio.Icon(
"material/signal_disconnected",
fill="danger",
width=1.6,
height=1.6,
min_width=1.6,
min_height=1.6,
),
rio.Text(
"Disconnected",
Expand Down
6 changes: 3 additions & 3 deletions rio/components/app_root.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ def build(self) -> rio.Component:
names=["Foo", "Bar"],
values=["foo", "bar"],
orientation="vertical",
width=25,
min_width=25,
margin=2,
color="primary",
),
Expand All @@ -107,7 +107,7 @@ def build(self) -> rio.Component:
names=["Settings"],
values=["settings"],
orientation="vertical",
width=25,
min_width=25,
margin=2,
color="primary",
),
Expand Down Expand Up @@ -155,7 +155,7 @@ def build(self) -> rio.Component:
0,
0,
),
height="grow",
grow_y=True,
),
),
),
Expand Down
10 changes: 5 additions & 5 deletions rio/components/banner.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"Banner",
]

ICONS_AND_COLORS: dict[str, tuple[str, str]] = {
ICONS_AND_COLORS: dict[str, tuple[str, rio.ColorSet]] = {
"info": ("material/info", "secondary"),
"success": ("material/check_circle", "success"),
"warning": ("material/warning", "warning"),
Expand Down Expand Up @@ -93,11 +93,11 @@ def build(self) -> rio.Component:
def build(self) -> rio.Component:
# Early out: Nothing to show
if self.text is None:
return rio.Spacer(width=0, height=0)
return rio.Spacer(grow_x=False, grow_y=False)

text = self.text.strip()
if not text:
return rio.Spacer(width=0, height=0)
return rio.Spacer(grow_x=False, grow_y=False)

# Prepare the style
try:
Expand All @@ -112,12 +112,12 @@ def build(self) -> rio.Component:
if self.markdown:
text_child = rio.Markdown(
text,
width="grow",
grow_x=True,
)
else:
text_child = rio.Text(
text,
width="grow",
grow_x=True,
wrap=True,
justify="left",
)
Expand Down
8 changes: 4 additions & 4 deletions rio/components/button.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,8 +135,8 @@ def build(self) -> rio.Component:
children.append(
rio.Icon(
self.icon,
width=1.4,
height=1.4,
min_width=1.4,
min_height=1.4,
margin_x=CHILD_MARGIN_X if n_children == 1 else None,
margin_y=CHILD_MARGIN_Y if n_children == 1 else None,
align_x=0.5,
Expand Down Expand Up @@ -180,8 +180,8 @@ def build(self) -> rio.Component:
color=self.color,
is_sensitive=self.is_sensitive,
is_loading=self.is_loading,
width=8 if isinstance(self.content, str) else "natural",
height=2.2,
min_width=8 if isinstance(self.content, str) else None,
min_height=2.2,
)

def __str__(self) -> str:
Expand Down
13 changes: 11 additions & 2 deletions rio/components/component.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,8 +214,17 @@ def build(self) -> rio.Component:
_: KW_ONLY
key: str | int | None = internal_field(default=None, init=True)

width: float | Literal["natural", "grow"] = "natural"
height: float | Literal["natural", "grow"] = "natural"
min_width: float | None = None
min_height: float | None = None

max_width: float | None = None
max_height: float | None = None

width: float | Literal["grow", "natural"] | None = None
height: float | Literal["grow", "natural"] | None = None

grow_x: bool = False
grow_y: bool = False

align_x: float | None = None
align_y: float | None = None
Expand Down
14 changes: 7 additions & 7 deletions rio/components/date_input.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,18 +44,18 @@ def make_fake_input_box(
selectable=False,
margin_bottom=0.4,
align_y=1,
width="grow",
grow_x=True,
),
rio.Icon(
"material/calendar_today:fill",
fill="dim",
width=1.5,
height=1.5,
min_width=1.5,
min_height=1.5,
margin_bottom=0.3,
align_y=1,
),
spacing=0.8,
height="grow",
grow_y=True,
),
# spacing=0.2,
margin_x=1,
Expand All @@ -70,15 +70,15 @@ def make_fake_input_box(
0,
),
cursor=rio.CursorStyle.POINTER,
height="grow",
grow_y=True,
transition_time=0.1,
),
# The line at the bottom
rio.Rectangle(
fill=palette.foreground.replace(opacity=0.25),
height=0.12,
min_height=0.12,
),
width=9,
min_width=9,
)


Expand Down
16 changes: 14 additions & 2 deletions rio/components/devel_component.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,14 @@ def __init__(
margin_top: float | None = None,
margin_right: float | None = None,
margin_bottom: float | None = None,
width: float | Literal["natural", "grow"] = "natural",
height: float | Literal["natural", "grow"] = "natural",
min_width: float | None = None,
min_height: float | None = None,
max_width: float | None = None,
max_height: float | None = None,
width: float | Literal["grow", "natural"] | None = None,
height: float | Literal["grow", "natural"] | None = None,
grow_x: bool = False,
grow_y: bool = False,
align_x: float | None = None,
align_y: float | None = None,
# SCROLLING-REWORK scroll_x: Literal["never", "auto", "always"] = "never",
Expand All @@ -61,8 +67,14 @@ def __init__(
margin_top=margin_top,
margin_right=margin_right,
margin_bottom=margin_bottom,
min_width=min_width,
min_height=min_height,
max_width=max_width,
max_height=max_height,
width=width,
height=height,
grow_x=grow_x,
grow_y=grow_y,
align_x=align_x,
align_y=align_y,
# SCROLLING-REWORK scroll_x=scroll_x,
Expand Down
16 changes: 14 additions & 2 deletions rio/components/dropdown.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,8 +147,14 @@ def __init__(
margin_top: float | None = None,
margin_right: float | None = None,
margin_bottom: float | None = None,
width: float | Literal["natural", "grow"] = "natural",
height: float | Literal["natural", "grow"] = "natural",
min_width: float | None = None,
min_height: float | None = None,
max_width: float | None = None,
max_height: float | None = None,
width: float | Literal["grow", "natural"] | None = None,
height: float | Literal["grow", "natural"] | None = None,
grow_x: bool = False,
grow_y: bool = False,
align_x: float | None = None,
align_y: float | None = None,
# SCROLLING-REWORK scroll_x: Literal["never", "auto", "always"] = "never",
Expand All @@ -166,8 +172,14 @@ def __init__(
margin_top=margin_top,
margin_right=margin_right,
margin_bottom=margin_bottom,
min_width=min_width,
min_height=min_height,
max_width=max_width,
max_height=max_height,
width=width,
height=height,
grow_x=grow_x,
grow_y=grow_y,
align_x=align_x,
align_y=align_y,
# SCROLLING-REWORK scroll_x=scroll_x,
Expand Down
16 changes: 14 additions & 2 deletions rio/components/flow_container.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,14 @@ def __init__(
margin_top: float | None = None,
margin_right: float | None = None,
margin_bottom: float | None = None,
width: float | Literal["natural", "grow"] = "natural",
height: float | Literal["natural", "grow"] = "natural",
min_width: float | None = None,
min_height: float | None = None,
max_width: float | None = None,
max_height: float | None = None,
width: float | Literal["grow", "natural"] | None = None,
height: float | Literal["grow", "natural"] | None = None,
grow_x: bool = False,
grow_y: bool = False,
align_x: float | None = None,
align_y: float | None = None,
# SCROLLING-REWORK scroll_x: Literal["never", "auto", "always"] = "never",
Expand All @@ -91,8 +97,14 @@ def __init__(
margin_top=margin_top,
margin_right=margin_right,
margin_bottom=margin_bottom,
min_width=min_width,
min_height=min_height,
max_width=max_width,
max_height=max_height,
width=width,
height=height,
grow_x=grow_x,
grow_y=grow_y,
align_x=align_x,
align_y=align_y,
# SCROLLING-REWORK scroll_x=scroll_x,
Expand Down
16 changes: 14 additions & 2 deletions rio/components/grid.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,8 +113,14 @@ def __init__(
margin_top: float | None = None,
margin_right: float | None = None,
margin_bottom: float | None = None,
width: float | Literal["natural", "grow"] = "natural",
height: float | Literal["natural", "grow"] = "natural",
min_width: float | None = None,
min_height: float | None = None,
max_width: float | None = None,
max_height: float | None = None,
width: float | Literal["grow", "natural"] | None = None,
height: float | Literal["grow", "natural"] | None = None,
grow_x: bool = False,
grow_y: bool = False,
align_x: float | None = None,
align_y: float | None = None,
# SCROLLING-REWORK scroll_x: Literal["never", "auto", "always"] = "never",
Expand All @@ -129,8 +135,14 @@ def __init__(
margin_top=margin_top,
margin_right=margin_right,
margin_bottom=margin_bottom,
min_width=min_width,
min_height=min_height,
max_width=max_width,
max_height=max_height,
width=width,
height=height,
grow_x=grow_x,
grow_y=grow_y,
align_x=align_x,
align_y=align_y,
# SCROLLING-REWORK scroll_x=scroll_x,
Expand Down
16 changes: 14 additions & 2 deletions rio/components/icon.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,8 +117,14 @@ def __init__(
margin_top: float | None = None,
margin_right: float | None = None,
margin_bottom: float | None = None,
width: float | Literal["grow"] = 1.3,
height: float | Literal["grow"] = 1.3,
min_width: float | None = 1.3,
min_height: float | None = 1.3,
max_width: float | None = None,
max_height: float | None = None,
width: float | Literal["grow", "natural"] | None = None,
height: float | Literal["grow", "natural"] | None = None,
grow_x: bool = False,
grow_y: bool = False,
align_x: float | None = None,
align_y: float | None = None,
# SCROLLING-REWORK scroll_x: Literal["never", "auto", "always"] = "never",
Expand All @@ -133,8 +139,14 @@ def __init__(
margin_top=margin_top,
margin_right=margin_right,
margin_bottom=margin_bottom,
min_width=min_width,
min_height=min_height,
max_width=max_width,
max_height=max_height,
width=width,
height=height,
grow_x=grow_x,
grow_y=grow_y,
align_x=align_x,
align_y=align_y,
# SCROLLING-REWORK scroll_x=scroll_x,
Expand Down
Loading

0 comments on commit 6181053

Please sign in to comment.