royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] branch feature/jewel-ui-set updated: Jewel Label added
Date Tue, 13 Mar 2018 16:45:25 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


The following commit(s) were added to refs/heads/feature/jewel-ui-set by this push:
     new 425d6c9  Jewel Label added
425d6c9 is described below

commit 425d6c9969ead720577e6e629b010f064c119809
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Tue Mar 13 17:45:21 2018 +0100

    Jewel Label added
---
 .../src/main/royale/ButtonPlayGround.mxml          |   8 +-
 frameworks/projects/Jewel/pom.xml                  |   2 +-
 .../resources/{jewel.css => jewel-framework.css}   |  12 +-
 .../Jewel/src/main/resources/jewel-manifest.xml    |   1 +
 .../main/royale/org/apache/royale/jewel/Label.as   | 189 +++++++++++++++++++++
 .../projects/Jewel/src/main/sass/_global.sass      |  14 +-
 .../main/sass/{jewel.sass => jewel-framework.sass} |  16 +-
 .../src/main/resources/royale-jewel-blue.css       |   8 +
 .../src/main/resources/royale-jewel-red.css        |   8 +
 .../src/main/sass/{ => components}/_button.sass    |   0
 .../{_textfield.sass => components/_label.sass}    |  52 +-----
 .../main/sass/{ => components}/_textbutton.sass    |   0
 .../src/main/sass/{ => components}/_textfield.sass |   0
 .../src/main/sass/royale-jewel-blue.sass           |  13 +-
 .../JewelTheme/src/main/sass/royale-jewel-red.sass |  13 +-
 15 files changed, 248 insertions(+), 88 deletions(-)

diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index 5ca13a1..fd5f879 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -35,14 +35,14 @@ limitations under the License.
 		<js:VerticalLayoutWithPaddingAndGap gap="10"/>
 	</js:beads>
 	
-	<js:Label text="Basic"/>
+	<j:Label text="Basic"/>
 	<js:Button/>
 	<js:TextButton text="Basic"/>
 
-	<js:Label text="Jewel Button"/>
+	<j:Label text="Jewel Button"/>
 	<j:Button primary="true"/>
 
-	<js:Label text="Jewel TextButton"/>
+	<j:Label text="Jewel TextButton"/>
 	
 	<j:TextButton text="DEFAULT"/>
 
@@ -60,7 +60,7 @@ limitations under the License.
 		</j:beads>
 	</j:TextButton>
 
-	<js:Label text="Jewel Button Sizing (respect min values)"/>
+	<j:Label text="Jewel Button Sizing (respect min values)"/>
 	<j:Slider id="slider" width="250" value="100" minimum="0" maximum="500"
 				valueChange="onValueChange(event)"/>
 	<j:Slider id="slider_v" width="250" value="40" minimum="0" maximum="300"
diff --git a/frameworks/projects/Jewel/pom.xml b/frameworks/projects/Jewel/pom.xml
index 74e2bd2..82b2c68 100644
--- a/frameworks/projects/Jewel/pom.xml
+++ b/frameworks/projects/Jewel/pom.xml
@@ -58,7 +58,7 @@
           <includeFiles>
             <include-file>
               <name>jewel.css</name>
-              <path>../src/main/resources/jewel.css</path>
+              <path>../src/main/resources/jewel-framework.css</path>
             </include-file>
           </includeFiles>
           <includeLookupOnly>true</includeLookupOnly>
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel.css b/frameworks/projects/Jewel/src/main/resources/jewel-framework.css
similarity index 84%
rename from frameworks/projects/Jewel/src/main/resources/jewel.css
rename to frameworks/projects/Jewel/src/main/resources/jewel-framework.css
index 21f1648..1d18965 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel.css
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-framework.css
@@ -23,6 +23,16 @@
 }
 
 /**
+ * Jewel Label
+ */	 */
+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 {
@@ -60,4 +70,4 @@ RadioButton {
   IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView");
 }
 
-/*# sourceMappingURL=jewel.css.map */
+/*# sourceMappingURL=jewel-framework.css.map */
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index b3bfccb..96b6b31 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -24,6 +24,7 @@
     <component id="Application" class="org.apache.royale.jewel.Application"/>
     <component id="Button" class="org.apache.royale.jewel.Button"/>
     <component id="TextButton" class="org.apache.royale.jewel.TextButton"/>
+    <component id="Label" class="org.apache.royale.jewel.Label"/>
     <component id="TextField" class="org.apache.royale.jewel.TextField"/>
     <component id="Slider" class="org.apache.royale.jewel.Slider"/>
     <component id="RadioButton" class="org.apache.royale.jewel.RadioButton"/>
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
new file mode 100644
index 0000000..a9e683e
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Label.as
@@ -0,0 +1,189 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel
+{
+	import org.apache.royale.core.ITextModel;
+	import org.apache.royale.core.UIBase;
+	import org.apache.royale.core.ValuesManager;
+	import org.apache.royale.events.Event;
+	import org.apache.royale.events.IEventDispatcher;
+    COMPILE::JS
+    {
+        import org.apache.royale.core.WrappedHTMLElement;
+        import org.apache.royale.html.util.addElementToWrapper;
+    }
+
+    /**
+     *  Dispatched when the user clicks on a Label.
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.9.0
+     */
+    [Event(name="click", type="org.apache.royale.events.MouseEvent")]
+
+	/*
+	 *  Label probably should extend TextField directly,
+	 *  but the player's APIs for TextLine do not allow
+	 *  direct instantiation, and we might want to allow
+	 *  Labels to be declared and have their actual
+	 *  view be swapped out.
+	 */
+
+    /**
+     *  The Label class implements the basic control for labeling
+     *  other controls.
+     *
+     *  @toplevel
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.0
+     */
+    public class Label extends UIBase
+	{
+        /**
+         *  Constructor.
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.0
+         */
+		public function Label()
+		{
+			super();
+            typeNames = "jewel label";
+		}
+
+        COMPILE::JS
+        protected var textNode:Text;
+
+        COMPILE::JS
+        private var _text:String = "";
+
+        [Bindable("textChange")]
+        /**
+         *  The text to display in the label.
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.0
+         */
+		public function get text():String
+		{
+            COMPILE::SWF
+            {
+                return ITextModel(model).text;
+            }
+            COMPILE::JS
+            {
+                return _text;
+            }
+		}
+
+        /**
+         *  @private
+         */
+		public function set text(value:String):void
+		{
+            COMPILE::SWF
+            {
+                ITextModel(model).text = value;
+            }
+            COMPILE::JS
+            {
+                if (textNode)
+                {
+                    _text = value;
+                    textNode.nodeValue = value;
+                    this.dispatchEvent('textChange');
+                }
+            }
+
+		}
+
+        [Bindable("htmlChange")]
+        /**
+         *  The html-formatted text to display in the label.
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.0
+         */
+		public function get html():String
+		{
+            COMPILE::SWF
+            {
+                return ITextModel(model).html;
+            }
+            COMPILE::JS
+            {
+                return element.innerHTML;
+            }
+		}
+
+        /**
+         *  @private
+         */
+		public function set html(value:String):void
+        {
+            COMPILE::SWF
+            {
+                ITextModel(model).html = value;
+            }
+            COMPILE::JS
+            {
+                this.element.innerHTML = value;
+                this.dispatchEvent('textChange');
+            }
+        }
+
+        /**
+         *  @private
+         */
+        COMPILE::SWF
+        override public function addedToParent():void
+        {
+            super.addedToParent();
+            model.addEventListener("textChange", repeaterListener);
+            model.addEventListener("htmlChange", repeaterListener);
+        }
+
+        /**
+         * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+         */
+        COMPILE::JS
+        override protected function createElement():WrappedHTMLElement
+        {
+			addElementToWrapper(this,'span');
+
+            textNode = document.createTextNode(_text) as Text;
+            element.appendChild(textNode);
+
+            //element.style.whiteSpace = "nowrap";
+
+            return element;
+        }
+
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/_global.sass
index b98f623..99552d3 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -24,15 +24,23 @@
 		white-space: nowrap
 	.vertical
 		display: block !important
-	
+
+/**
+ * Jewel Label
+ */	
+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")
-	//IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView");
-	//IBeadController: ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController");
+	//IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView")
+	//IBeadController: ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController")
 
 .vTextField--input
 .vTextField--label
diff --git a/frameworks/projects/Jewel/src/main/sass/jewel.sass b/frameworks/projects/Jewel/src/main/sass/jewel-framework.sass
similarity index 82%
rename from frameworks/projects/Jewel/src/main/sass/jewel.sass
rename to frameworks/projects/Jewel/src/main/sass/jewel-framework.sass
index 598c490..10e81d9 100644
--- a/frameworks/projects/Jewel/src/main/sass/jewel.sass
+++ b/frameworks/projects/Jewel/src/main/sass/jewel-framework.sass
@@ -16,20 +16,6 @@
  */
 
 // Variables
-//import "variables"
-//import "mixins"
-//import "functions"
-
+    
 // Global
 @import "global"
-
-// Components
-
-// Button
-//import "button"
-
-// TextButton
-//import "textbutton"
-
-// TextField
-//import "textfield"
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
index 03d06cb..32894c4 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
@@ -218,6 +218,14 @@
 }
 
 /**
+ * Jewel Label
+ */
+.jewel.label {
+  font-family: "Lato", sans-serif;
+  font-size: 0.75rem;
+}
+
+/**
  * Jewel TextField
  */
 TextField {
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
index ef40149..f6d83dd 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
@@ -218,6 +218,14 @@
 }
 
 /**
+ * Jewel Label
+ */
+.jewel.label {
+  font-family: "Lato", sans-serif;
+  font-size: 0.75rem;
+}
+
+/**
  * Jewel TextField
  */
 TextField {
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
similarity index 100%
rename from frameworks/themes/JewelTheme/src/main/sass/_button.sass
rename to frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_label.sass
similarity index 55%
copy from frameworks/themes/JewelTheme/src/main/sass/_textfield.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components/_label.sass
index 84b696c..63b60c9 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_label.sass
@@ -18,50 +18,10 @@
 ////////////////////////////////////////////////////////////////////////////////
 
 /**
- * Jewel TextField
+ * Jewel Label
  */
-TextField
-	position: relative
-	display: inline-block
-	box-sizing: border-box
-	width: 300px
-	max-width: 100%
-	margin: 0
-
-.vTextField--input
-	font-size: 16px
-	font-family: 'Lato', sans-serif
-
-	border: none
-	border-bottom: 2px solid
-	border-bottom-color: #ff0000
-	display: block
-	margin: 0
-	padding: 4 0
-	width: 100px
-	background: transparent
-	text-align: left
-	color: inherit
-	outline: none
-
-.vTextField--label
-	bottom: 0
-	color: #ff0000
-	font-size: 13px
-	left: 0
-	right: 0
-	pointer-events: none
-	position: absolute
-	display: block
-	width: 100%
-	overflow: hidden
-	white-space: nowrap
-	text-align: left
-
-//    padding: 5px;
-//    border: solid 1px #666666;
-//    border-radius: 6px;
-//    color: #333333;
-//:hover 
-//    padding: 5px;
-//    background-color: #DFDFDF;
+.jewel.label
+	//IBeadView: ClassReference("org.apache.royale.html.beads.TextFieldView")
+	font:
+		family: $font-stack
+		size: $font-size
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
similarity index 100%
rename from frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
rename to frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
similarity index 100%
rename from frameworks/themes/JewelTheme/src/main/sass/_textfield.sass
rename to frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
diff --git a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
index 3c82eb7..2a9526d 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
@@ -25,12 +25,7 @@
 @import "global"
 
 // Components
-
-// Button
-@import "button"
-
-// TextButton
-@import "textbutton"
-
-// TextField
-@import "textfield"
+@import "components/button"
+@import "components/textbutton"
+@import "components/label"
+@import "components/textfield"
diff --git a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
index 54e8f75..2ecaa8c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
@@ -25,12 +25,7 @@
 @import "global"
 
 // Components
-
-// Button
-@import "button"
-
-// TextButton
-@import "textbutton"
-
-// TextField
-@import "textfield"
+@import "components/button"
+@import "components/textbutton"
+@import "components/label"
+@import "components/textfield"

-- 
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.

Mime
View raw message