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 <carlosrov...@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 carlosrov...@apache.org.