And one more thing, this as well take into account States, that is important and was part of my tests ;)
2018-06-10 12:00 GMT+02:00 Carlos Rovira <[email protected]>: > I had hard time with BasicLayout in View, so > I remove the layout default for View in Jewel since it imposes a default > that not always is what you want. > So if start building from View you can add some element with x,y values > and will be positioned regarding those values, and the add the new Grid > component or a Group with a GridLayout and this will take all the avialable > width that is what you expect. And so on... > > It was hard to get to this, with many tries until I reach to it :) > > For now in Jewel I'm refactoring all layouts to be truly CSS based (SWF > will be handled at later time): > > * BasicLayout, SimpleHorizontalLayout, SimpleVerticalLayout and GridLayout > are working this way now. > > The rest are now in a work in progress to its final shape. > > > > 2018-06-10 10:36 GMT+02:00 Harbs <[email protected]>: > >> Wouldn’t this override a parent absolute positioning? >> >> > -.layout.absolute { >> > - position: relative; >> > -} >> >> Or is `.layout.absolute > *` more specific? >> >> Harbs >> >> > On Jun 10, 2018, at 11:04 AM, [email protected] wrote: >> > >> > This is an automated email from the ASF dual-hosted git repository. >> > >> > carlosrovira pushed a commit to branch develop >> > in repository https://gitbox.apache.org/repos/asf/royale-asjs.git >> > >> > >> > The following commit(s) were added to refs/heads/develop by this push: >> > new 3646f90 Jewel Grid Layout >> > 3646f90 is described below >> > >> > commit 3646f904c0f9c853110c896e3126b2ba0eb3290e >> > Author: Carlos Rovira <[email protected]> >> > AuthorDate: Sun Jun 10 10:04:42 2018 +0200 >> > >> > Jewel Grid Layout >> > --- >> > .../projects/Jewel/src/main/resources/defaults.css | 193 >> +++++++++++++++++---- >> > .../Jewel/src/main/resources/jewel-manifest.xml | 2 + >> > .../projects/Jewel/src/main/royale/JewelClasses.as | 1 + >> > .../main/royale/org/apache/royale/jewel/Card.as | 2 - >> > .../royale/org/apache/royale/jewel/Container.as | 2 +- >> > .../org/apache/royale/jewel/{Card.as => Grid.as} | 46 ++--- >> > .../royale/jewel/beads/layouts/GridLayout.as | 173 >> ++++++++++++++++++ >> > .../projects/Jewel/src/main/sass/_global.sass | 59 +------ >> > .../Jewel/src/main/sass/components/_layout.sass | 59 +++++++ >> > .../projects/Jewel/src/main/sass/defaults.sass | 1 + >> > 10 files changed, 430 insertions(+), 108 deletions(-) >> > >> > diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css >> b/frameworks/projects/Jewel/src/main/resources/defaults.css >> > index ce2dda8..66dce6b 100644 >> > --- a/frameworks/projects/Jewel/src/main/resources/defaults.css >> > +++ b/frameworks/projects/Jewel/src/main/resources/defaults.css >> > @@ -16,46 +16,16 @@ >> > */ >> > @namespace j "library://ns.apache.org/royale/jewel"; >> > @namespace "http://www.w3.org/1999/xhtml";; >> > -j|Application *, .royale *, .royale *:before, .royale *:after { >> > +*, :after, :before { >> > box-sizing: border-box; >> > } >> > >> > -.layout { >> > - display: flex; >> > -} >> > - >> > -.layout.absolute { >> > - position: relative; >> > -} >> > -.layout.absolute > * { >> > - position: absolute; >> > -} >> > - >> > -.layout.horizontal { >> > - flex-flow: row nowrap; >> > - align-items: flex-start; >> > -} >> > - >> > -.layout.vertical { >> > - flex-flow: column nowrap; >> > - align-items: flex-start; >> > -} >> > - >> > -.layout.tile { >> > - flex-flow: row wrap; >> > -} >> > - >> > -.layout.horizontal.space { >> > - justify-content: space-between; >> > -} >> > - >> > ::-moz-focus-inner, ::-moz-focus-outer { >> > border: 0; >> > } >> > >> > j|View { >> > IBeadView: ClassReference("org.apache.royale.core.beads.GroupView"); >> > - IBeadLayout: ClassReference("org.apache.roy >> ale.jewel.beads.layouts.BasicLayout"); >> > } >> > >> > j|Group { >> > @@ -75,7 +45,6 @@ j|Container { >> > IBeadLayout: ClassReference("org.apache.roy >> ale.jewel.beads.layouts.BasicLayout"); >> > IViewport: ClassReference("org.apache.roy >> ale.core.supportClasses.Viewport"); >> > IViewportModel: ClassReference("org.apache.roy >> ale.core.beads.models.ViewportModel"); >> > - align-items: flex-start; >> > } >> > >> > @media -royale-swf { >> > @@ -182,6 +151,162 @@ j|Label { >> > IBeadModel: ClassReference("org.apache.roy >> ale.jewel.beads.models.TextModel"); >> > } >> > >> > +.layout { >> > + display: flex; >> > +} >> > + >> > +/* Absolute */ >> > +.layout.absolute { >> > + position: relative; >> > +} >> > +.layout.absolute > * { >> > + position: absolute; >> > +} >> > + >> > +/* Horizontal */ >> > +.layout.horizontal { >> > + flex-flow: row nowrap; >> > + align-items: flex-start; >> > +} >> > + >> > +/* Vertical */ >> > +.layout.vertical { >> > + flex-flow: column nowrap; >> > + align-items: flex-start; >> > +} >> > + >> > +.layout.horizontal.space { >> > + justify-content: space-between; >> > +} >> > + >> > +/* Grid */ >> > +.layout.grid { >> > + flex-wrap: wrap; >> > +} >> > +.layout.grid > * { >> > + flex: 1; >> > +} >> > +.layout.grid.gap-1dp { >> > + margin: -1em 0 1em -1em; >> > +} >> > +.layout.grid.gap-1dp > * { >> > + padding: 1em 0 0 1em; >> > +} >> > +.layout.grid.gap-2dp { >> > + margin: -2em 0 2em -2em; >> > +} >> > +.layout.grid.gap-2dp > * { >> > + padding: 2em 0 0 2em; >> > +} >> > +.layout.grid.gap-3dp { >> > + margin: -3em 0 3em -3em; >> > +} >> > +.layout.grid.gap-3dp > * { >> > + padding: 3em 0 0 3em; >> > +} >> > +.layout.grid.gap-4dp { >> > + margin: -4em 0 4em -4em; >> > +} >> > +.layout.grid.gap-4dp > * { >> > + padding: 4em 0 0 4em; >> > +} >> > +.layout.grid.gap-5dp { >> > + margin: -5em 0 5em -5em; >> > +} >> > +.layout.grid.gap-5dp > * { >> > + padding: 5em 0 0 5em; >> > +} >> > +.layout.grid.gap-6dp { >> > + margin: -6em 0 6em -6em; >> > +} >> > +.layout.grid.gap-6dp > * { >> > + padding: 6em 0 0 6em; >> > +} >> > +.layout.grid.gap-7dp { >> > + margin: -7em 0 7em -7em; >> > +} >> > +.layout.grid.gap-7dp > * { >> > + padding: 7em 0 0 7em; >> > +} >> > +.layout.grid.gap-8dp { >> > + margin: -8em 0 8em -8em; >> > +} >> > +.layout.grid.gap-8dp > * { >> > + padding: 8em 0 0 8em; >> > +} >> > +.layout.grid.gap-9dp { >> > + margin: -9em 0 9em -9em; >> > +} >> > +.layout.grid.gap-9dp > * { >> > + padding: 9em 0 0 9em; >> > +} >> > +.layout.grid.gap-10dp { >> > + margin: -10em 0 10em -10em; >> > +} >> > +.layout.grid.gap-10dp > * { >> > + padding: 10em 0 0 10em; >> > +} >> > +.layout.grid.gap-11dp { >> > + margin: -11em 0 11em -11em; >> > +} >> > +.layout.grid.gap-11dp > * { >> > + padding: 11em 0 0 11em; >> > +} >> > +.layout.grid.gap-12dp { >> > + margin: -12em 0 12em -12em; >> > +} >> > +.layout.grid.gap-12dp > * { >> > + padding: 12em 0 0 12em; >> > +} >> > +.layout.grid.gap-13dp { >> > + margin: -13em 0 13em -13em; >> > +} >> > +.layout.grid.gap-13dp > * { >> > + padding: 13em 0 0 13em; >> > +} >> > +.layout.grid.gap-14dp { >> > + margin: -14em 0 14em -14em; >> > +} >> > +.layout.grid.gap-14dp > * { >> > + padding: 14em 0 0 14em; >> > +} >> > +.layout.grid.gap-15dp { >> > + margin: -15em 0 15em -15em; >> > +} >> > +.layout.grid.gap-15dp > * { >> > + padding: 15em 0 0 15em; >> > +} >> > +.layout.grid.gap-16dp { >> > + margin: -16em 0 16em -16em; >> > +} >> > +.layout.grid.gap-16dp > * { >> > + padding: 16em 0 0 16em; >> > +} >> > +.layout.grid.gap-17dp { >> > + margin: -17em 0 17em -17em; >> > +} >> > +.layout.grid.gap-17dp > * { >> > + padding: 17em 0 0 17em; >> > +} >> > +.layout.grid.gap-18dp { >> > + margin: -18em 0 18em -18em; >> > +} >> > +.layout.grid.gap-18dp > * { >> > + padding: 18em 0 0 18em; >> > +} >> > +.layout.grid.gap-19dp { >> > + margin: -19em 0 19em -19em; >> > +} >> > +.layout.grid.gap-19dp > * { >> > + padding: 19em 0 0 19em; >> > +} >> > +.layout.grid.gap-20dp { >> > + margin: -20em 0 20em -20em; >> > +} >> > +.layout.grid.gap-20dp > * { >> > + padding: 20em 0 0 20em; >> > +} >> > + >> > .jewel.list { >> > align-items: stretch; >> > align-content: flex-start; >> > @@ -209,6 +334,10 @@ j|List { >> > IBeadView: ClassReference("org.apache.roy >> ale.jewel.beads.views.RadioButtonView"); >> > } >> > } >> > +.jewel.slider input::-ms-tooltip { >> > + display: none; >> > +} >> > + >> > j|Slider { >> > IBeadModel: ClassReference("org.apache.roy >> ale.jewel.beads.models.SliderRangeModel"); >> > IBeadView: ClassReference("org.apache.roy >> ale.jewel.beads.views.SliderView"); >> > diff --git >> > a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml >> b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml >> > index 67ca10b..ffc7333 100644 >> > --- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml >> > +++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml >> > @@ -27,6 +27,7 @@ >> > <component id="HGroup" class="org.apache.royale.jewel.HGroup"/> >> > <component id="VGroup" class="org.apache.royale.jewel.VGroup"/> >> > <component id="Container" class="org.apache.royale.jewel >> .Container"/> >> > + <component id="Grid" class="org.apache.royale.jewel.Grid"/> >> > >> > <component id="Button" class="org.apache.royale.jewel.Button"/> >> > <component id="Label" class="org.apache.royale.jewel.Label"/> >> > @@ -55,6 +56,7 @@ >> > <component id="HorizontalLayout" class="org.apache.royale.jewel >> .beads.layouts.HorizontalLayout"/> >> > <component id="VerticalLayout" class="org.apache.royale.jewel >> .beads.layouts.VerticalLayout"/> >> > <component id="TileLayout" class="org.apache.royale.jewel >> .beads.layouts.TileLayout"/> >> > + <component id="GridLayout" class="org.apache.royale.jewel >> .beads.layouts.GridLayout"/> >> > >> > <component id="HorizontalLayoutSpaceBetween" >> class="org.apache.royale.jewel.beads.layouts.HorizontalLayou >> tSpaceBetween"/> >> > >> > diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as >> b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as >> > index 152d593..9c7ffef 100644 >> > --- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as >> > +++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as >> > @@ -62,6 +62,7 @@ package >> > } >> > >> > import org.apache.royale.jewel.beads.layouts.BasicLayout; >> BasicLayout; >> > + import org.apache.royale.jewel.beads.layouts.GridLayout; >> GridLayout; >> > import org.apache.royale.jewel.beads.layouts.TileLayout; >> TileLayout; >> > import org.apache.royale.jewel.beads. >> layouts.SimpleHorizontalLayout; SimpleHorizontalLayout; >> > import org.apache.royale.jewel.beads.layouts.SimpleVerticalLayout; >> SimpleVerticalLayout; >> > diff --git >> > a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Card.as >> b/frameworks/projects/Jewel/src/main/royale/org/apache/royal >> e/jewel/Card.as >> > index 9fffdf2..be4b16f 100644 >> > --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royal >> e/jewel/Card.as >> > +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royal >> e/jewel/Card.as >> > @@ -19,8 +19,6 @@ >> > package org.apache.royale.jewel >> > { >> > import org.apache.royale.jewel.Group; >> > - import org.apache.royale.utils.ClassSelectorList; >> > - import org.apache.royale.core.layout.ILayoutStyleProperties; >> > import org.apache.royale.core.IBeadLayout; >> > >> > /** >> > diff --git >> > a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Container.as >> b/frameworks/projects/Jewel/src/main/royale/org/apache/royal >> e/jewel/Container.as >> > index 3eed971..c2b3831 100644 >> > --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royal >> e/jewel/Container.as >> > +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royal >> e/jewel/Container.as >> > @@ -81,7 +81,7 @@ package org.apache.royale.jewel >> > { >> > COMPILE::JS >> > { >> > - typeNames = 'Container'; >> > + typeNames = ''; >> > } >> > super(); >> > } >> > diff --git >> > a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Card.as >> b/frameworks/projects/Jewel/src/main/royale/org/apache/royal >> e/jewel/Grid.as >> > similarity index 62% >> > copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/ >> jewel/Card.as >> > copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/ >> jewel/Grid.as >> > index 9fffdf2..a43a936 100644 >> > --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royal >> e/jewel/Card.as >> > +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royal >> e/jewel/Grid.as >> > @@ -19,19 +19,20 @@ >> > package org.apache.royale.jewel >> > { >> > import org.apache.royale.jewel.Group; >> > - import org.apache.royale.utils.ClassSelectorList; >> > - import org.apache.royale.core.layout.ILayoutStyleProperties; >> > import org.apache.royale.core.IBeadLayout; >> > + import org.apache.royale.jewel.beads.layouts.GridLayout; >> > >> > /** >> > - * The Card class is a container that surronds other components. >> > + * The Grid class is a container that uses Grid Layout. >> > + * Grid Layout need other inmediate children to work as cells >> > + * to host cell content. >> > * >> > * @langversion 3.0 >> > * @playerversion Flash 10.2 >> > * @playerversion AIR 2.6 >> > * @productversion Royale 0.9.3 >> > */ >> > - public class Card extends Group >> > + public class Grid extends Group >> > { >> > /** >> > * constructor. >> > @@ -41,44 +42,45 @@ package org.apache.royale.jewel >> > * @playerversion AIR 2.6 >> > * @productversion Royale 0.9.3 >> > */ >> > - public function Card() >> > + public function Grid() >> > { >> > super(); >> > >> > - typeNames = "jewel card"; >> > + typeNames = "jewel"; >> > + >> > + layout = new GridLayout(); >> > + addBead(layout); >> > } >> > >> > - protected var _shadow:Number = 0; >> > + protected var layout:GridLayout; >> > + >> > + protected var _gap:Number = 0; >> > /** >> > - * A boolean flag to activate "shadow-Xdp" effect >> selector. >> > - * Assigns variable shadow depths (0, 2, 3, 4, 6, 8, or >> 16) to card >> > + * Assigns variable gap to grid from 1 to 20 >> > + * Activate "gap-Xdp" effect selector to set a numeric >> gap >> > + * between grid cells >> > * >> > * @langversion 3.0 >> > * @playerversion Flash 10.2 >> > * @playerversion AIR 2.6 >> > * @productversion Royale 0.9.3 >> > */ >> > - public function get shadow():Number >> > + public function get gap():Number >> > { >> > - return _shadow; >> > + return _gap; >> > } >> > >> > - public function set shadow(value:Number):void >> > + public function set gap(value:Number):void >> > { >> > - if (_shadow != value) >> > + if (_gap != value) >> > { >> > COMPILE::JS >> > { >> > - if (value == 2 || value == 3 || value == 4 || >> value == 6 || value == 8 || value == 16) >> > + if (value > 0 && value < 20) >> > { >> > - var classVal:String = "shadow-" + _shadow + >> "dp"; >> > - classSelectorList.remove(classVal); >> > - >> > - classVal = "shadow-" + value + "dp"; >> > - >> classSelectorList.add(classVal); >> > - >> > - _shadow = value; >> > - } >> > + layout.gap = value; >> > + } else >> > + throw new Error("Grid gap >> needs to be between 0 and 20"); >> > } >> > } >> > } >> > diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royal >> e/jewel/beads/layouts/GridLayout.as b/frameworks/projects/Jewel/sr >> c/main/royale/org/apache/royale/jewel/beads/layouts/GridLayout.as >> > new file mode 100644 >> > index 0000000..c913d52 >> > --- /dev/null >> > +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royal >> e/jewel/beads/layouts/GridLayout.as >> > @@ -0,0 +1,173 @@ >> > +/////////////////////////////////////////////////////////// >> ///////////////////// >> > +// >> > +// 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.beads.layouts >> > +{ >> > + import org.apache.royale.core.LayoutBase; >> > + import org.apache.royale.core.IBeadLayout; >> > + import org.apache.royale.core.ILayoutChild; >> > + import org.apache.royale.core.ILayoutView; >> > + import org.apache.royale.core.IUIBase; >> > + import org.apache.royale.core.IStrand; >> > + import org.apache.royale.utils.StringUtil; >> > + import org.apache.royale.core.IParentIUIBase; >> > + >> > + COMPILE::JS { >> > + import org.apache.royale.core.WrappedHTMLElement; >> > + import org.apache.royale.core.UIBase; >> > + } >> > + >> > + /** >> > + * The GridLayout class sets its childrens in a grid with cells >> filling all >> > + * the available space. The cells can be separated by gap. >> > + * >> > + * @langversion 3.0 >> > + * @playerversion Flash 10.2 >> > + * @playerversion AIR 2.6 >> > + * @productversion Royale 0.9.3 >> > + */ >> > + public class GridLayout extends LayoutBase implements IBeadLayout >> > + { >> > + /** >> > + * Constructor. >> > + * >> > + * @langversion 3.0 >> > + * @playerversion Flash 10.2 >> > + * @playerversion AIR 2.6 >> > + * @productversion Royale 0.9.3 >> > + */ >> > + public function GridLayout() >> > + { >> > + super(); >> > + } >> > + >> > + COMPILE::JS >> > + private var hostComponent:UIBase; >> > + >> > + /** >> > + * @copy org.apache.royale.core.IBead#strand >> > + * >> > + * @langversion 3.0 >> > + * @playerversion Flash 10.2 >> > + * @playerversion AIR 2.6 >> > + * @productversion Royale 0.9.3 >> > + * @royaleignorecoercion org.apache.royale.core.IParent >> IUIBase >> > + * @royaleignorecoercion org.apache.royale.core.Wrapped >> HTMLElement >> > + */ >> > + override public function set strand(value:IStrand):void >> > + { >> > + super.strand = value; >> > + >> > + COMPILE::JS >> > + { >> > + hostComponent = layoutView as UIBase; >> > + hostComponent.className = >> hostComponent.className ? hostComponent.className + " layout grid" : >> "layout grid"; >> > + >> > + setGap(_gap); >> > + } >> > + } >> > + >> > + protected var _gap:Number = 0; >> > + /** >> > + * Assigns variable gap to grid from 1 to 20 >> > + * Activate "gap-Xdp" effect selector to set a numeric >> gap >> > + * between grid cells >> > + * >> > + * @langversion 3.0 >> > + * @playerversion Flash 10.2 >> > + * @playerversion AIR 2.6 >> > + * @productversion Royale 0.9.3 >> > + */ >> > + public function get gap():Number >> > + { >> > + return _gap; >> > + } >> > + >> > + /** >> > + * @private >> > + */ >> > + public function set gap(value:Number):void >> > + { >> > + if (_gap != value) >> > + { >> > + COMPILE::JS >> > + { >> > + if(hostComponent) >> > + setGap(value); >> > + else >> > + _gap = value; >> > + } >> > + } >> > + } >> > + >> > + COMPILE::JS >> > + public function setGap(value:Number):void >> > + {//if(hostComponent.className.indexOf("gap") == -1 && >> > + // if(gap) >> > + // hostComponent.className += " gap-1dp"; >> > + // else >> > + // hostComponent.className = >> StringUtil.removeWord(hostComponent.className, " gap-1dp"); >> > + hostComponent.positioner.classList.remove("gap-" >> + _gap + "dp"); >> > + hostComponent.positioner.classList.add("gap-" + >> value + "dp"); >> > + _gap = value; >> > + } >> > + >> > + /** >> > + * @copy org.apache.royale.core.IBeadLayout#layout >> > + * @royaleignorecoercion org.apache.royale.core.UIBase >> > + */ >> > + override public function layout():Boolean >> > + { >> > + COMPILE::SWF >> > + { >> > + // SWF TODO >> > + return true; >> > + } >> > + >> > + COMPILE::JS >> > + { >> > + /** >> > + * This Layout uses the following CSS >> rules >> > + * no code needed in JS for layout >> > + * >> > + * .layout { >> > + * display: flex; >> > + * } >> > + * >> > + * .layout.grid { >> > + * flex-wrap: wrap; >> > + * } >> > + * >> > + * .layout.grid > * { >> > + * flex: 1; >> > + * } >> > + * >> > + * .layout.grid.gap-1dp { >> > + * margin: -1em 0 1em -1em; >> > + * } >> > + * >> > + * .layout.grid.gap-1dp > * { >> > + * padding: 1em 0 0 1em; >> > + * } >> > + */ >> > + >> > + return true; >> > + } >> > + } >> > + } >> > +} >> > diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass >> b/frameworks/projects/Jewel/src/main/sass/_global.sass >> > index 7267d63..f4792c9 100644 >> > --- a/frameworks/projects/Jewel/src/main/sass/_global.sass >> > +++ b/frameworks/projects/Jewel/src/main/sass/_global.sass >> > @@ -20,57 +20,10 @@ >> > @namespace j "library://ns.apache.org/royale/jewel" >> > @namespace "http://www.w3.org/1999/xhtml"; >> > >> > -$global-gap: 10px !default >> > -$phone-max-width: 480px !default >> > -$tablet-max-width: 840px !default >> > -$desktop-columns: 12 !default >> > -$tablet-columns: 8 !default >> > -$phone-columns: 4 !default >> > - >> > -@media (max-width: $phone-max-width - 1) >> > - >> > -@media (max-width: $tablet-max-width - 1) >> > - >> > -j|Application *, .royale *, .royale *:before, .royale *:after >> > +//j|Application *, .royale *, .royale *:before, .royale *:after >> > +* , :after, :before >> > box-sizing: border-box >> > >> > -.layout >> > - display: flex >> > - //overflow-y: auto >> > - //overflow-x: hidden >> > - //position: relative >> > - //-webkit-overflow-scrolling: touch >> > - >> > -.layout.absolute >> > - position: relative >> > - //justify-content: flex-start // align main axis (default) >> > - > * >> > - position: absolute >> > - >> > -.layout.horizontal >> > - flex-flow: row nowrap >> > - //justify-content: flex-start // align main axis (default) >> > - align-items: flex-start >> > - //> * >> > - // flex: 1 0 auto >> > - >> > -.layout.vertical >> > - flex-flow: column nowrap >> > - //justify-content: flex-start // align main axis (default) >> > - align-items: flex-start >> > - //> * >> > - // flex: 1 0 auto >> > - >> > -.layout.tile >> > - flex-flow: row wrap >> > - //justify-content: flex-start // align main axis (default) >> > - //align-items: flex-start >> > - //> * >> > - // flex: 1 0 auto >> > - >> > -.layout.horizontal.space >> > - justify-content: space-between >> > - >> > // Firefox >> > // remove dotted outline >> > ::-moz-focus-inner, ::-moz-focus-outer >> > @@ -78,7 +31,7 @@ j|Application *, .royale *, .royale *:before, .royale >> *:after >> > >> > j|View >> > IBeadView: ClassReference("org.apache.roy >> ale.core.beads.GroupView") >> > - IBeadLayout: ClassReference("org.apache.roy >> ale.jewel.beads.layouts.BasicLayout") >> > + //IBeadLayout: ClassReference("org.apache.roy >> ale.jewel.beads.layouts.BasicLayout") >> > >> > j|Group >> > IBeadView: ClassReference("org.apache.roy >> ale.core.beads.GroupView") >> > @@ -94,7 +47,11 @@ j|Container >> > IBeadLayout: ClassReference("org.apache.roy >> ale.jewel.beads.layouts.BasicLayout") >> > IViewport: ClassReference("org.apache.roy >> ale.core.supportClasses.Viewport") >> > IViewportModel: ClassReference("org.apache.roy >> ale.core.beads.models.ViewportModel") >> > - align-items: flex-start >> > + //align-items: flex-start >> > + >> > + >> > +//j|Grid >> > +// IBeadLayout: ClassReference("org.apache.roy >> ale.jewel.beads.layouts.GridLayout") >> > >> > @media -royale-swf >> > j|View >> > diff --git >> > a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass >> b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass >> > new file mode 100644 >> > index 0000000..d12a5da >> > --- /dev/null >> > +++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass >> > @@ -0,0 +1,59 @@ >> > +/////////////////////////////////////////////////////////// >> ///////////////////// >> > +// >> > +// 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. >> > +// >> > +/////////////////////////////////////////////////////////// >> ///////////////////// >> > + >> > +.layout >> > + display: flex >> > + >> > +/* Absolute */ >> > +.layout.absolute >> > + position: relative >> > + > * >> > + position: absolute >> > + >> > +/* Horizontal */ >> > +.layout.horizontal >> > + flex-flow: row nowrap >> > + align-items: flex-start >> > + >> > +//.layout.horizontal.gap >> > +// justify-content: space-between >> > + >> > +/* Vertical */ >> > +.layout.vertical >> > + flex-flow: column nowrap >> > + align-items: flex-start >> > + >> > +//.layout.vertical.gap >> > +// justify-content: space-between >> > + >> > +.layout.horizontal.space >> > + justify-content: space-between >> > + >> > +/* Grid */ >> > +$gut: 0em >> > +.layout.grid >> > + flex-wrap: wrap >> > + > * >> > + flex: 1 >> > + // max-width: 100% >> > + @for $i from 1 through 20 >> > + &.gap-#{$i}dp >> > + margin: $gut - $i 0 $gut + $i $gut - $i >> > + > * >> > + padding: $gut + $i 0 0 $gut + $i >> > diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass >> b/frameworks/projects/Jewel/src/main/sass/defaults.sass >> > index 1a9e282..ffa6acd 100644 >> > --- a/frameworks/projects/Jewel/src/main/sass/defaults.sass >> > +++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass >> > @@ -29,6 +29,7 @@ >> > @import "components/dropdownlist" >> > @import "components/itemRenderer" >> > @import "components/label" >> > +@import "components/layout" >> > @import "components/list" >> > @import "components/radiobutton" >> > @import "components/slider" >> > >> > -- >> > To stop receiving notification emails like this one, please contact >> > [email protected]. >> >> > > > -- > Carlos Rovira > http://about.me/carlosrovira > > -- Carlos Rovira http://about.me/carlosrovira
