royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] 10/36: HorizontalLayout and VerticalLayout in Jewel based on CSS working
Date Fri, 23 Mar 2018 07:57:10 GMT
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 74d163095d703d6aee01db4e7c883404b8454346
Author: Carlos Rovira <carlosrovira@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.

Mime
View raw message