Added "cell-vertical-self-align", and "cell-horizontal-self-align" properties

This commit is contained in:
anoshenko 2024-04-24 19:26:57 +03:00
parent 8bfa759230
commit dcc69ad777
6 changed files with 80 additions and 12 deletions

View File

@ -1,6 +1,7 @@
# v0.14.0
* Added the ability to work without creating a WebSocket. Added NoSocket property of AppParams.
* Added the ability to run a timer on the client side. Added StartTimer and StopTimer methods to Session interface.
* Added "cell-vertical-self-align", and "cell-horizontal-self-align" properties
* Bug fixing
# v0.13.x

View File

@ -2465,9 +2465,10 @@ The SizeUnit value of type SizeInFraction can be either integer or fractional.
The "grid-row-gap" and "grid-column-gap" SizeUnit properties (GridRowGap and GridColumnGap constants)
allow you to set the distance between the rows and columns of the container, respectively. The default is 0px.
### "cell-vertical-align" property
### "cell-vertical-align" and "cell-vertical-self-align" properties
The "cell-vertical-align" property (constant CellVerticalAlign) of type int sets the vertical alignment of children within the cell they are occupying. Valid values:
The "cell-vertical-align" int property (constant CellVerticalAlign) sets the default vertical alignment of children
within the cell they are occupying. Valid values:
| Value | Constant | Name | Alignment |
|:-----:|--------------|-----------|---------------------|
@ -2478,9 +2479,13 @@ The "cell-vertical-align" property (constant CellVerticalAlign) of type int sets
The default value is StretchAlign (3)
### "cell-horizontal-align" property
The "cell-vertical-self-align" int property (constant CellVerticalAlign) sets the vertical alignment of children
within the cell they are occupying. This property should be set not for the grid, but for the children.
The "cell-horizontal-align" property (constant CellHorizontalAlign) of type int sets the horizontal alignment of children within the occupied cell. Valid values:
### "cell-horizontal-align" and "cell-horizontal-self-align" properties
The "cell-horizontal-align" int property (constant CellHorizontalSelfAlign) sets the horizontal alignment
of children within the occupied cell. Valid values:
| Value | Constant | Name | Alignment |
|:-----:|--------------|-----------|--------------------|
@ -2491,6 +2496,9 @@ The "cell-horizontal-align" property (constant CellHorizontalAlign) of type int
The default value is StretchAlign (3)
The "cell-horizontal-self-align" int property (constant CellVerticalSelfAlign) sets the horizontal alignment of children
within the cell they are occupying. This property should be set not for the grid, but for the children.
## ColumnLayout
ColumnLayout is a container that implements the ViewsContainer interface.

View File

@ -5,6 +5,44 @@ import (
"strings"
)
const (
// CellVerticalAlign is the constant for the "cell-vertical-align" property tag.
// The "cell-vertical-align" int property sets the default vertical alignment
// of GridLayout children within the cell they are occupying. Valid values:
// * TopAlign (0) / "top"
// * BottomAlign (1) / "bottom"
// * CenterAlign (2) / "center", and
// * StretchAlign (2) / "stretch"
CellVerticalAlign = "cell-vertical-align"
// CellHorizontalAlign is the constant for the "cell-horizontal-align" property tag.
// The "cell-horizontal-align" int property sets the default horizontal alignment
// of GridLayout children within the occupied cell. Valid values:
// * LeftAlign (0) / "left"
// * RightAlign (1) / "right"
// * CenterAlign (2) / "center"
// * StretchAlign (3) / "stretch"
CellHorizontalAlign = "cell-horizontal-align"
// CellVerticalSelfAlign is the constant for the "cell-vertical-self-align" property tag.
// The "cell-vertical-align" int property sets the vertical alignment of GridLayout children
// within the cell they are occupying. The property is set for the child view of GridLayout. Valid values:
// * TopAlign (0) / "top"
// * BottomAlign (1) / "bottom"
// * CenterAlign (2) / "center", and
// * StretchAlign (2) / "stretch"
CellVerticalSelfAlign = "cell-vertical-self-align"
// CellHorizontalSelfAlign is the constant for the "cell-horizontal-self-align" property tag.
// The "cell-horizontal-self align" int property sets the horizontal alignment of GridLayout children
// within the occupied cell. The property is set for the child view of GridLayout. Valid values:
// * LeftAlign (0) / "left"
// * RightAlign (1) / "right"
// * CenterAlign (2) / "center"
// * StretchAlign (3) / "stretch"
CellHorizontalSelfAlign = "cell-horizontal-self-align"
)
// GridLayout - grid-container of View
type GridLayout interface {
ViewsContainer

View File

@ -331,6 +331,16 @@ var enumProperties = map[string]struct {
"justify-items",
[]string{"start", "end", "center", "stretch"},
},
CellVerticalSelfAlign: {
[]string{"top", "bottom", "center", "stretch"},
"align-self",
[]string{"start", "end", "center", "stretch"},
},
CellHorizontalSelfAlign: {
[]string{"left", "right", "center", "stretch"},
"justify-self",
[]string{"start", "end", "center", "stretch"},
},
GridAutoFlow: {
[]string{"row", "column", "row-dense", "column-dense"},
GridAutoFlow,

View File

@ -11,22 +11,23 @@ const (
// The "side" int property determines which side of the container is used to resize.
// The value of property is or-combination of TopSide (1), RightSide (2), BottomSide (4), and LeftSide (8)
Side = "side"
// ResizeBorderWidth is the constant for the "resize-border-width" property tag.
// The "ResizeBorderWidth" SizeUnit property determines the width of the resizing border
ResizeBorderWidth = "resize-border-width"
// CellVerticalAlign is the constant for the "cell-vertical-align" property tag.
CellVerticalAlign = "cell-vertical-align"
// CellHorizontalAlign is the constant for the "cell-horizontal-align" property tag.
CellHorizontalAlign = "cell-horizontal-align"
// TopSide is value of the "side" property: the top side is used to resize
TopSide = 1
// RightSide is value of the "side" property: the right side is used to resize
RightSide = 2
// BottomSide is value of the "side" property: the bottom side is used to resize
BottomSide = 4
// LeftSide is value of the "side" property: the left side is used to resize
LeftSide = 8
// AllSides is value of the "side" property: all sides is used to resize
AllSides = TopSide | RightSide | BottomSide | LeftSide
)

14
view.go
View File

@ -650,6 +650,8 @@ func viewPropertyChanged(view *viewData, tag string) {
case ZIndex, Order, TabSize:
if i, ok := intProperty(view, tag, session, 0); ok {
session.updateCSSProperty(htmlID, tag, strconv.Itoa(i))
} else {
session.updateCSSProperty(htmlID, tag, "")
}
return
@ -697,8 +699,11 @@ func viewPropertyChanged(view *viewData, tag string) {
}
if cssTag, ok := sizeProperties[tag]; ok {
size, _ := sizeProperty(view, tag, session)
if size, ok := sizeProperty(view, tag, session); ok {
session.updateCSSProperty(htmlID, cssTag, size.cssString("", session))
} else {
session.updateCSSProperty(htmlID, cssTag, "")
}
return
}
@ -719,8 +724,11 @@ func viewPropertyChanged(view *viewData, tag string) {
}
if valuesData, ok := enumProperties[tag]; ok && valuesData.cssTag != "" {
n, _ := enumProperty(view, tag, session, 0)
if n, ok := enumProperty(view, tag, session, 0); ok {
session.updateCSSProperty(htmlID, valuesData.cssTag, valuesData.cssValues[n])
} else {
session.updateCSSProperty(htmlID, valuesData.cssTag, "")
}
return
}
@ -728,6 +736,8 @@ func viewPropertyChanged(view *viewData, tag string) {
if tag == floatTag {
if f, ok := floatTextProperty(view, floatTag, session, 0); ok {
session.updateCSSProperty(htmlID, floatTag, f)
} else {
session.updateCSSProperty(htmlID, floatTag, "")
}
return
}