Skip to content

Commit

Permalink
Add grid properties to style
Browse files Browse the repository at this point in the history
  • Loading branch information
@wwwillchen
wwwillchen committed Jan 29, 2024
1 parent 015551c commit 05898cd
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 21 deletions.
77 changes: 57 additions & 20 deletions mesop/component_helpers/style.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,26 @@

import mesop.protos.ui_pb2 as pb

ContentAlignmentValues = Literal[
"center",
"start",
"end",
"flex",
"flex",
"left",
"right",
"space-between",
"space-around",
"space-evenly",
"stretch",
]
ItemAlignmentValues = Literal[
"normal",
"stretch",
"center",
"start",
"end",
]
OverflowValues = Literal["visible", "hidden", "clip", "scroll", "auto"]


Expand Down Expand Up @@ -92,12 +112,14 @@ class Style:
Represents the style configuration for a UI component.
Attributes:
align_content: Aligns the flexible container's items on the cross-axis. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).
align_items: Specifies the default alignment for items inside a flexible container. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).
background: Sets the background color or image of the component. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/background).
border: Defines the border properties for each side of the component. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/border).
border_radius: Defines the border radius. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius).
box_shadow: Defines the box shadow. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow).
color: Sets the color of the text inside the component. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/color).
column_gap: Sets the gap between columns. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap).
columns: Specifies the number of columns in a multi-column element. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/columns).
display: Defines the display type of the component. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/display).
flex_basis: Specifies the initial length of a flexible item. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis).
Expand All @@ -109,6 +131,14 @@ class Style:
font_style: Specifies the font style for text. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style).
font_weight: Sets the weight (or boldness) of the font. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).
gap: Sets the gap. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/gap).
grid_area: Sets the grid area. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area).
grid_column_start: Sets the grid column start. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start).
grid_column_end: Sets the grid column end. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end).
grid_row_start: Sets the grid row start. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start).
grid_row_end: Sets the grid row end. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end).
grid_template_areas: Sets the grid template areas; each element is a row. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas).
grid_template_columns: Sets the grid template columns. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns).
grid_template_rows: Sets the grid template rows. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows).
height: Sets the height of the component. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/height).
justify_content: Aligns the flexible container's items on the main-axis. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).
letter_spacing: Increases or decreases the space between characters in text. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing).
Expand All @@ -118,6 +148,7 @@ class Style:
overflow_y: Specifies the handling of overflow in the vertical direction. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y).
padding: Sets the padding space required on each side of an element. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/padding).
position: Specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky). See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
row_gap: Sets the gap between rows. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap).
text_align: Specifies the horizontal alignment of text in an element. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
text_decoration: Specifies the decoration added to text. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration).
text_overflow: Specifies how overflowed content that is not displayed should be signaled to the user. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow).
Expand All @@ -128,18 +159,14 @@ class Style:
# For literal properties, make the most commonly used option the first literal
# element, as it will be used as the default value by the editor when creating that property.

align_items: Literal[
"normal",
"stretch",
"center",
"start",
"end",
] | None = None
align_content: ContentAlignmentValues | None = None
align_items: ItemAlignmentValues | None = None
background: str | None = None
border: Border | None = None
border_radius: int | str | None = None
box_shadow: str | None = None
color: str | None = None
column_gap: int | str | None = None
columns: int | None = None
display: Literal[
# precomposed values
Expand Down Expand Up @@ -180,20 +207,17 @@ class Style:
900,
] | None = None
gap: int | str | None = None
grid_area: str | None = None
grid_column_start: int | None = None
grid_column_end: int | None = None
grid_row_start: int | None = None
grid_row_end: int | None = None
grid_template_areas: list[str] | None = None
grid_template_columns: str | None = None
grid_template_rows: str | None = None
height: int | str | None = None
justify_content: Literal[
"center",
"start",
"end",
"flex",
"flex",
"left",
"right",
"space-between",
"space-around",
"space-evenly",
"stretch",
] | None = None
justify_content: ContentAlignmentValues | None = None
justify_items: ItemAlignmentValues | None = None
letter_spacing: int | str | None = None
line_height: float | str | None = None
margin: Margin | None = None
Expand All @@ -207,6 +231,7 @@ class Style:
"fixed",
"sticky",
] | None = None
row_gap: int | str | None = None
text_align: Literal[
"start",
"end",
Expand All @@ -229,12 +254,14 @@ class Style:

def to_style_proto(s: Style) -> pb.Style:
return pb.Style(
align_content=s.align_content,
align_items=s.align_items,
background=s.background,
border=_map_border(s.border),
border_radius=_px_str(s.border_radius),
box_shadow=s.box_shadow,
color=s.color,
column_gap=_px_str(s.column_gap),
columns=s.columns,
display=s.display,
flex_basis=s.flex_basis,
Expand All @@ -246,15 +273,25 @@ def to_style_proto(s: Style) -> pb.Style:
font_style=s.font_style,
font_weight=_map_font_weight(s.font_weight),
gap=_px_str(s.gap),
grid_area=s.grid_area,
grid_column_start=s.grid_column_start,
grid_column_end=s.grid_column_end,
grid_row_start=s.grid_row_start,
grid_row_end=s.grid_row_end,
grid_template_areas=s.grid_template_areas,
grid_template_columns=s.grid_template_columns,
grid_template_rows=s.grid_template_rows,
height=_px_str(s.height),
justify_content=s.justify_content,
justify_items=s.justify_items,
letter_spacing=_px_str(s.letter_spacing),
line_height=str(s.line_height),
margin=_map_edge_insets(s.margin),
overflow_x=s.overflow_x,
overflow_y=s.overflow_y,
padding=_map_edge_insets(s.padding),
position=s.position,
row_gap=_px_str(s.row_gap),
text_align=s.text_align,
text_decoration=s.text_decoration,
text_overflow=s.text_overflow,
Expand Down
14 changes: 13 additions & 1 deletion mesop/protos/ui.proto
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,14 +217,16 @@ message UserDefinedType {
repeated Arg args = 1;
}

// Next id: 32
// Next id: 44
message Style {
optional string align_content = 32;
optional string align_items = 1;
optional string background = 2;
optional Border border = 3;
optional string border_radius = 28;
optional string box_shadow = 29;
optional string color = 4;
optional string column_gap = 33;
optional int32 columns = 5;
optional string display = 6;
optional string flex_basis = 7;
Expand All @@ -236,15 +238,25 @@ message Style {
optional string font_style = 13;
optional string font_weight = 14;
optional string gap = 30;
optional string grid_area = 34;
optional int32 grid_column_start = 35;
optional int32 grid_column_end = 36;
optional int32 grid_row_start = 37;
optional int32 grid_row_end = 38;
repeated string grid_template_areas = 39;
optional string grid_template_columns = 40;
optional string grid_template_rows = 41;
optional string height = 15;
optional string justify_content = 16;
optional string justify_items = 42;
optional string letter_spacing = 17;
optional string line_height = 31;
optional EdgeInsets margin = 18;
optional string overflow_x = 19;
optional string overflow_y = 20;
optional EdgeInsets padding = 21;
optional string position = 22;
optional string row_gap = 43;
optional string text_align = 23;
optional string text_decoration = 24;
optional string text_overflow = 25;
Expand Down
39 changes: 39 additions & 0 deletions mesop/web/src/utils/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ export function formatStyle(styleObj: Style): string {
if (!styleObj) {
return style;
}
if (styleObj.getAlignContent()) {
style += `align-content: ${styleObj.getAlignContent()};`;
}
if (styleObj.getAlignItems()) {
style += `align-items: ${styleObj.getAlignItems()};`;
}
Expand Down Expand Up @@ -40,6 +43,9 @@ export function formatStyle(styleObj: Style): string {
if (styleObj.getColor()) {
style += `color: ${styleObj.getColor()};`;
}
if (styleObj.getColumnGap()) {
style += `column-gap: ${styleObj.getColumnGap()};`;
}
if (styleObj.getColumns()) {
style += `columns: ${styleObj.getColumns()};`;
}
Expand Down Expand Up @@ -73,12 +79,42 @@ export function formatStyle(styleObj: Style): string {
if (styleObj.getGap()) {
style += `gap: ${styleObj.getGap()};`;
}
if (styleObj.getGridArea()) {
style += `grid-area: ${styleObj.getGridArea()};`;
}
if (styleObj.getGridColumnStart()) {
style += `grid-column-start: ${styleObj.getGridColumnStart()};`;
}
if (styleObj.getGridColumnEnd()) {
style += `grid-column-end: ${styleObj.getGridColumnEnd()};`;
}
if (styleObj.getGridRowStart()) {
style += `grid-row-start: ${styleObj.getGridRowStart()};`;
}
if (styleObj.getGridRowEnd()) {
style += `grid-row-end: ${styleObj.getGridRowEnd()};`;
}
if (styleObj.getGridTemplateAreasList()) {
style += `grid-template-areas: ${styleObj
.getGridTemplateAreasList()
.map((a) => `"${a}"`)
.join(' ')};`;
}
if (styleObj.getGridTemplateColumns()) {
style += `grid-template-columns: ${styleObj.getGridTemplateColumns()};`;
}
if (styleObj.getGridTemplateRows()) {
style += `grid-template-rows: ${styleObj.getGridTemplateRows()};`;
}
if (styleObj.getHeight()) {
style += `height: ${styleObj.getHeight()};`;
}
if (styleObj.getJustifyContent()) {
style += `justify-content: ${styleObj.getJustifyContent()};`;
}
if (styleObj.getJustifyItems()) {
style += `justify-items: ${styleObj.getJustifyItems()};`;
}
if (styleObj.getLetterSpacing()) {
style += `letter-spacing: ${styleObj.getLetterSpacing()};`;
}
Expand Down Expand Up @@ -106,6 +142,9 @@ export function formatStyle(styleObj: Style): string {
if (styleObj.getPosition()) {
style += `position: ${styleObj.getPosition()};`;
}
if (styleObj.getRowGap()) {
style += `row-gap: ${styleObj.getRowGap()};`;
}
if (styleObj.getTextAlign()) {
style += `text-align: ${styleObj.getTextAlign()};`;
}
Expand Down

0 comments on commit 05898cd

Please sign in to comment.