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 00145f406e4b0dd8aacc91f5fe91e03fd2221f31 Author: Carlos Rovira <[email protected]> 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 [email protected].
