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/13 16:45:25 UTC
[royale-asjs] branch feature/jewel-ui-set updated: Jewel Label added
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 <ca...@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.