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 2018/03/18 15:30:53 UTC
[royale-asjs] 10/24: HorizontalLayout and VerticalLayout in Jewel
based on CSS working
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 911d614ed6e31c6e7b02a8f4596a63e3eea45eee
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Mar 14 13:57:24 2018 +0100
HorizontalLayout and VerticalLayout in Jewel based on CSS working
---
.../royale/JewelExample/src/main/royale/App.mxml | 2 +-
frameworks/projects/Jewel/pom.xml | 6 +-
.../projects/Jewel/src/main/resources/defaults.css | 79 +++++++++++-----------
.../Jewel/src/main/resources/jewel-framework.css | 34 +++++-----
.../main/royale/org/apache/royale/jewel/Label.as | 4 +-
.../royale/jewel/beads/layouts/HorizontalLayout.as | 61 ++++-------------
.../royale/jewel/beads/layouts/VerticalLayout.as | 41 +++++------
.../projects/Jewel/src/main/sass/_global.sass | 40 +++++------
.../projects/Jewel/src/main/sass/defaults.sass | 21 ++++++
9 files changed, 130 insertions(+), 158 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/App.mxml b/examples/royale/JewelExample/src/main/royale/App.mxml
index 3d41276..f403dc7 100644
--- a/examples/royale/JewelExample/src/main/royale/App.mxml
+++ b/examples/royale/JewelExample/src/main/royale/App.mxml
@@ -31,7 +31,7 @@
<js:initialView>
<js:View>
<js:beads>
- <js:HorizontalLayout />
+ <j:HorizontalLayout />
</js:beads>
<local:ButtonPlayGround/>
<local:TextInputPlayGround/>
diff --git a/frameworks/projects/Jewel/pom.xml b/frameworks/projects/Jewel/pom.xml
index 82b2c68..53fb1fc 100644
--- a/frameworks/projects/Jewel/pom.xml
+++ b/frameworks/projects/Jewel/pom.xml
@@ -57,9 +57,13 @@
</includeClasses>
<includeFiles>
<include-file>
+ <name>defaults.css</name>
+ <path>../src/main/resources/defaults.css</path>
+ </include-file>
+ <!-- <include-file>
<name>jewel.css</name>
<path>../src/main/resources/jewel-framework.css</path>
- </include-file>
+ </include-file> -->
</includeFiles>
<includeLookupOnly>true</includeLookupOnly>
<!--<allowSubclassOverrides>true</allowSubclassOverrides>-->
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index f09b980..0c58f7b 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -1,5 +1,4 @@
-/*
- *
+/**
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
@@ -14,57 +13,59 @@
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
- *
*/
-
@namespace "library://ns.apache.org/royale/jewel";
+.layout.horizontal {
+ white-space: nowrap;
+ display: block;
+}
+.layout.horizontal > * {
+ display: inline-block !important;
+}
-.vertical-layout-padding-gap {
- display: block !important;
+.layout.vertical {
+ vertical-align: top;
+}
+.layout.vertical > * {
+ display: block !important;
+}
+
+.jewel.label {
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
+ white-space: nowrap;
}
-/*
-* Jewel TextField
-*/
TextField {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
- /*IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView");
- IBeadController: ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController");*/
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
}
-.vTextField--input {}
-.vTextField--label {}
-/*
-* Jewel Slider
-*/
Slider {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView");
- IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout");
- IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController");
- position: relative;
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView");
+ IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout");
+ IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController");
+ position: relative;
}
+
.SliderTrack {
- position: absolute;
+ position: absolute;
}
+
.SliderThumb {
- position: absolute;
- border-radius: 15px;
+ position: absolute;
+ border-radius: 15px;
}
-@media -royale-swf
-{
- Slider
- {
- iThumbView: ClassReference("org.apache.royale.jewel.beads.SliderThumbView");
- iTrackView: ClassReference("org.apache.royale.jewel.beads.SliderTrackView");
- }
+@media -royale-swf {
+ Slider {
+ iThumbView: ClassReference("org.apache.royale.jewel.beads.SliderThumbView");
+ iTrackView: ClassReference("org.apache.royale.jewel.beads.SliderTrackView");
+ }
- RadioButton
- {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView");
- /*font-size: 11px;
- font-family: Arial;*/
- }
+ RadioButton {
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView");
+ }
}
+
+/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-framework.css b/frameworks/projects/Jewel/src/main/resources/jewel-framework.css
index 1d18965..ac1da5e 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-framework.css
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-framework.css
@@ -15,33 +15,30 @@
* limitations under the License.
*/
@namespace "library://ns.apache.org/royale/jewel";
-.layout .horizontal {
+.layout.horizontal {
white-space: nowrap;
+ display: block;
}
-.layout .vertical {
+.layout.horizontal > * {
+ display: inline-block !important;
+}
+
+.layout.vertical {
+ vertical-align: top;
+}
+.layout.vertical > * {
display: block !important;
}
-/**
- * Jewel Label
- */ */
-Label {
+.jewel.label {
IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
- IBeadView: ClassReference("org.apache.royale.html.beads.TextFieldView");
- iMeasurementBead: ClassReference("org.apache.royale.html.beads.TextFieldLabelMeasurementBead");
white-space: nowrap;
}
-/**
- * Jewel TextField
- */
TextField {
IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
}
-/**
- * Jewel Slider
- */
Slider {
IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel");
IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView");
@@ -64,10 +61,11 @@ Slider {
iThumbView: ClassReference("org.apache.royale.jewel.beads.SliderThumbView");
iTrackView: ClassReference("org.apache.royale.jewel.beads.SliderTrackView");
}
-}
-RadioButton {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView");
+
+ RadioButton {
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView");
+ }
}
/*# sourceMappingURL=jewel-framework.css.map */
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Label.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Label.as
index a9e683e..90f3827 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Label.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Label.as
@@ -179,9 +179,7 @@ package org.apache.royale.jewel
textNode = document.createTextNode(_text) as Text;
element.appendChild(textNode);
-
- //element.style.whiteSpace = "nowrap";
-
+
return element;
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
index 16950a3..eff02f9 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
@@ -31,9 +31,6 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::SWF {
import org.apache.royale.core.UIBase;
}
- COMPILE::JS {
- import org.apache.royale.core.WrappedHTMLElement;
- }
/**
* The HorizontalLayout class is a simple layout
@@ -62,32 +59,8 @@ package org.apache.royale.jewel.beads.layouts
}
/**
- * @copy org.apache.royale.core.IBead#strand
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- * @royaleignorecoercion HTMLElement
- * @royaleignorecoercion org.apache.royale.core.IUIBase
- */
- override public function set strand(value:IStrand):void
- {
- super.strand = value;
-
- COMPILE::JS
- {
- var base:IUIBase = value as IUIBase;
- if (base.element.style.display !== "none") {
- base.element.style.display = "block";
- }
- }
- }
-
- /**
* @copy org.apache.royale.core.IBeadLayout#layout
* @royaleignorecoercion org.apache.royale.core.ILayoutHost
- * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
*/
override public function layout():Boolean
{
@@ -167,27 +140,21 @@ package org.apache.royale.jewel.beads.layouts
}
COMPILE::JS
{
- var children:Array;
- var i:int;
- var n:int;
var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- contentView.element.classList.add("layout parent"); //style["white-space"] = "nowrap";
- children = contentView.internalChildren();
-
- n = children.length;
- for (i = 0; i < n; i++)
- {
- var child:WrappedHTMLElement = children[i] as WrappedHTMLElement;
- if (child == null) continue;
-
- child.classList.add("layout horizontal");
-
- /*child.royale_wrapper.setDisplayStyleForLayout('inline-block');
- if (child.style.display !== 'none')
- {
- child.style.display = 'inline-block';
- }*/
- }
+ contentView.element.classList.add("layout", "horizontal");
+
+ /**
+ * This Layout uses the following CSS rules
+ *
+ * .layout.horizontal {
+ * white-space: nowrap;
+ * display: block;
+ * }
+ *
+ * .layout.horizontal > * {
+ * display: inline-block !important;
+ * }
+ */
return true;
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
index fab6700..cc217c2 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
@@ -21,14 +21,11 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.LayoutBase;
import org.apache.royale.core.IBeadLayout;
- import org.apache.royale.core.IBeadModel;
import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
import org.apache.royale.core.ILayoutChild;
import org.apache.royale.core.ILayoutHost;
import org.apache.royale.core.ILayoutView;
- import org.apache.royale.core.ILayoutParent;
import org.apache.royale.core.IParentIUIBase;
- import org.apache.royale.core.IStrand;
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.core.ValuesManager;
@@ -36,10 +33,6 @@ package org.apache.royale.jewel.beads.layouts
{
import org.apache.royale.core.WrappedHTMLElement;
}
- import org.apache.royale.events.Event;
- import org.apache.royale.events.IEventDispatcher;
- import org.apache.royale.geom.Rectangle;
- import org.apache.royale.utils.CSSUtils;
/**
* The VerticalLayout class is a simple layout
@@ -156,35 +149,33 @@ package org.apache.royale.jewel.beads.layouts
}
COMPILE::JS
{
- var children:Array;
- var i:int;
- var n:int;
var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- contentView.element.classList.add("layout parent");//style["vertical-align"] = "top";
+ contentView.element.classList.add("layout", "vertical");
- children = contentView.internalChildren();
+ var children:Array = contentView.internalChildren();
n = children.length;
+
+ var i:int;
+ var n:int;
for (i = 0; i < n; i++)
{
var child:WrappedHTMLElement = children[i] as WrappedHTMLElement;
if (child == null) continue;
- child.classList.add("layout vertical");
-
- /*child.royale_wrapper.setDisplayStyleForLayout('block');
- if (child.style.display === 'none')
- {
- child.royale_wrapper.setDisplayStyleForLayout('block');
- }
- else
- {
- // block elements don't measure width correctly so set to inline for a second
- child.style.display = 'inline-block';
- child.style.display = 'block';
- }*/
child.royale_wrapper.dispatchEvent('sizeChanged');
}
+ /**
+ * This Layout uses the following CSS rules
+ *
+ * .layout.vertical {
+ * vertical-align: top;
+ * }
+ * .layout.vertical > * {
+ * display: block !important;
+ * }
+ */
+
return true;
}
}
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/_global.sass
index 99552d3..c886218 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -19,35 +19,27 @@
@namespace "library://ns.apache.org/royale/jewel"
-.layout
- .horizontal
- white-space: nowrap
- .vertical
+.layout.horizontal
+ white-space: nowrap
+ display: block
+ > *
+ display: inline-block !important
+.layout.vertical
+ vertical-align: top
+ > *
display: block !important
-/**
- * Jewel Label
- */
-Label
+.jewel.label
IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel")
- IBeadView: ClassReference("org.apache.royale.html.beads.TextFieldView")
- iMeasurementBead: ClassReference("org.apache.royale.html.beads.TextFieldLabelMeasurementBead")
+ //IBeadView: ClassReference("org.apache.royale.jewel.beads.TextFieldView")
+ //iMeasurementBead: ClassReference("org.apache.royale.html.beads.TextFieldLabelMeasurementBead")
white-space: nowrap
-/**
- * Jewel TextField
- */
TextField
IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel")
//IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView")
//IBeadController: ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController")
-.vTextField--input
-.vTextField--label
-
-/**
- * Jewel Slider
- */
Slider
IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel")
IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView")
@@ -67,8 +59,8 @@ Slider
iThumbView: ClassReference("org.apache.royale.jewel.beads.SliderThumbView")
iTrackView: ClassReference("org.apache.royale.jewel.beads.SliderTrackView")
-RadioButton
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel")
- IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView")
- //font-size: 11px
- //font-family: Arial
+ RadioButton
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel")
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView")
+ //font-size: 11px
+ //font-family: Arial
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass b/frameworks/projects/Jewel/src/main/sass/defaults.sass
new file mode 100644
index 0000000..10e81d9
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -0,0 +1,21 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Variables
+
+// Global
+@import "global"
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.