You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2020/06/04 14:03:35 UTC
[royale-asjs] 16/17: jewel-layout: update tile to depend on hor/ver
layouts
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 5119634a206a027522674ac11235dd233ff327be
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Jun 4 15:36:38 2020 +0200
jewel-layout: update tile to depend on hor/ver layouts
---
frameworks/projects/Jewel/src/main/resources/defaults.css | 10 ++++++----
.../royale/jewel/beads/layouts/TileHorizontalLayout.as | 7 ++-----
.../projects/Jewel/src/main/sass/components/_layout.sass | 13 +++++++------
3 files changed, 15 insertions(+), 15 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 5a4d960..21a6db1 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -1061,6 +1061,9 @@ j|Label {
.layout.horizontal.centered > * {
flex: 0 0 auto !important;
}
+.layout.horizontal.tile {
+ flex-wrap: wrap;
+}
.layout.horizontal.formitem {
width: 100%;
align-items: flex-start;
@@ -1161,6 +1164,9 @@ j|Label {
.layout.vertical.centered > * {
flex: 0 0 auto !important;
}
+.layout.vertical.tile {
+ flex-wrap: wrap;
+}
.layout.vertical.form {
width: 100%;
}
@@ -1224,10 +1230,6 @@ j|Label {
.layout.vertical.gap-10x3px > * {
margin-top: 30px;
}
-.layout.tile {
- flex-flow: row wrap;
- align-items: flex-start;
-}
.layout.grid {
flex-flow: row wrap;
width: 100%;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileHorizontalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileHorizontalLayout.as
index b1482d5..d7e2f31 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileHorizontalLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileHorizontalLayout.as
@@ -41,7 +41,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.8
*/
- public class TileHorizontalLayout extends StyledLayoutBase implements ILayoutStyleProperties
+ public class TileHorizontalLayout extends SimpleHorizontalLayout implements ILayoutStyleProperties
{
/**
* constructor.
@@ -56,7 +56,7 @@ package org.apache.royale.jewel.beads.layouts
super();
}
- public static const LAYOUT_TYPE_NAMES:String = "layout tile";
+ public static const LAYOUT_TYPE_NAMES:String = "layout horizontal tile";
/**
* Add class selectors when the component is addedToParent
@@ -74,9 +74,6 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
- if (hostComponent.containsClass("layout"))
- hostComponent.removeClass("layout");
- hostComponent.addClass("layout");
if(hostComponent.containsClass("tile"))
hostComponent.removeClass("tile");
hostComponent.addClass("tile");
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index c4c34aa..d45e448 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -72,6 +72,9 @@ $gap-size: 10px !default
> *
flex: 0 0 auto !important
+ &.tile
+ flex-wrap: wrap
+
// FormItemLayout
&.formitem
width: 100%
@@ -128,10 +131,13 @@ $gap-size: 10px !default
> *
flex: 0 0 auto !important
+ &.tile
+ flex-wrap: wrap
+
// FormLayout (consider for now Forms are always vertical)
&.form
width: 100%
-
+
// FormItemLayout
// &.formitem
// width: 100%
@@ -142,11 +148,6 @@ $gap-size: 10px !default
margin-top: 0px
> *
margin-top: $gap + $i * $gap-step
-
- // Tile
- &.tile
- flex-flow: row wrap
- align-items: flex-start
// this not compile******
// &.gap