From dev-return-5033-archive-asf-public=cust-asf.ponee.io@royale.apache.org Sun Jun 10 10:36:40 2018 Return-Path: X-Original-To: archive-asf-public@cust-asf.ponee.io Delivered-To: archive-asf-public@cust-asf.ponee.io Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by mx-eu-01.ponee.io (Postfix) with SMTP id 3D30E18062B for ; Sun, 10 Jun 2018 10:36:39 +0200 (CEST) Received: (qmail 52325 invoked by uid 500); 10 Jun 2018 08:36:38 -0000 Mailing-List: contact dev-help@royale.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: dev@royale.apache.org Delivered-To: mailing list dev@royale.apache.org Received: (qmail 52306 invoked by uid 99); 10 Jun 2018 08:36:37 -0000 Received: from pnap-us-west-generic-nat.apache.org (HELO spamd3-us-west.apache.org) (209.188.14.142) by apache.org (qpsmtpd/0.29) with ESMTP; Sun, 10 Jun 2018 08:36:37 +0000 Received: from localhost (localhost [127.0.0.1]) by spamd3-us-west.apache.org (ASF Mail Server at spamd3-us-west.apache.org) with ESMTP id D3DF218024D for ; Sun, 10 Jun 2018 08:36:36 +0000 (UTC) X-Virus-Scanned: Debian amavisd-new at spamd3-us-west.apache.org X-Spam-Flag: NO X-Spam-Score: -0.1 X-Spam-Level: X-Spam-Status: No, score=-0.1 tagged_above=-999 required=6.31 tests=[DKIM_SIGNED=0.1, DKIM_VALID=-0.1, DKIM_VALID_AU=-0.1, KAM_SHORT=0.001, RCVD_IN_DNSWL_NONE=-0.0001, SPF_PASS=-0.001] autolearn=disabled Authentication-Results: spamd3-us-west.apache.org (amavisd-new); dkim=pass (2048-bit key) header.d=gmail.com Received: from mx1-lw-eu.apache.org ([10.40.0.8]) by localhost (spamd3-us-west.apache.org [10.40.0.10]) (amavisd-new, port 10024) with ESMTP id XkxPGL-RL1Jm for ; Sun, 10 Jun 2018 08:36:32 +0000 (UTC) Received: from mail-wr0-f179.google.com (mail-wr0-f179.google.com [209.85.128.179]) by mx1-lw-eu.apache.org (ASF Mail Server at mx1-lw-eu.apache.org) with ESMTPS id 814F45F17E for ; Sun, 10 Jun 2018 08:36:31 +0000 (UTC) Received: by mail-wr0-f179.google.com with SMTP id d2-v6so17229897wrm.10 for ; Sun, 10 Jun 2018 01:36:31 -0700 (PDT) DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=gmail.com; s=20161025; h=from:content-transfer-encoding:mime-version:subject:date:references :to:in-reply-to:message-id; bh=QUU9UpK2O2CHVQocBtoRMnXYzLlSMlzTMGfIFUsjnIM=; b=LnYP6tILVnrz8EntvNDmVBySYkDmMltwDbrrRESv1DnN1IcTY+iAQlVkzqRVKJ0mlL yvhQ3tYY3N3tak+VROw9+sghbVdtHtk0q46vzPQZR4b87rQc95i9EDjWuolEhu45VlyF N/49iQLueNqhDmG2hZ/G4A+0TATc0dAemFsMl4A5HukCTHP7YMugktNqMhARd27jY6E7 Xr6Wu40rdnLbKQ8NburdCGdFD8e0CnOMpNn0SjfROvVFun/D+2jqGclsru+dJ2EIUNa1 3wGhYLX/fp692QuvzithgqYYyswH6NWy5cfJMH08chVo7TxA2ZEymUbB6FnqGez/k783 mcYw== X-Google-DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=1e100.net; s=20161025; h=x-gm-message-state:from:content-transfer-encoding:mime-version :subject:date:references:to:in-reply-to:message-id; bh=QUU9UpK2O2CHVQocBtoRMnXYzLlSMlzTMGfIFUsjnIM=; b=sNs3vLt5wEqKApBjKM/n4d7qWc8ZeZAvEpRfHJKyZRp4oG2h3N5ZlL1LYSB7dA+uu1 1Bqi9TPaMvVutM/4OFiVcASZvEBuN6xdKbbyVJT9BNVcXLYXIW0Q7ffBmJg5u++WnNXo CYzURTg6jwuLm0C0s7G1OdaHaqsjNfWkzAUhtMpHWWUHUpGZvSl5zHrJX19GWZ996LQL oHgsW0EqJLsVOaJaajn/7hb8+L3qJhxRO5Ei3gpFWLpGjHg6gGEwsAbDIWOQ/jEo0lnO ydapGpt9SI5Z7euPPSIVKgQbkgb8JoHmGHhFv3OlQX19GmzWFUCIX+a60vMRabgtpCF6 oGVA== X-Gm-Message-State: APt69E1l+i2tLryxvASdAGvBgGh726NDOJgi2hTFRhMIXTEmvoPqoDg+ g3rXVLMlFvdMLygtayovoXjmUeXe X-Google-Smtp-Source: ADUXVKJOa9C9HJW0TWZm015UzXoJitH2Xl1IyIypL6xOFC50GLfcKRATUF4o0kjlE7RTW52HqdtxLg== X-Received: by 2002:adf:9025:: with SMTP id h34-v6mr10401449wrh.123.1528619784725; Sun, 10 Jun 2018 01:36:24 -0700 (PDT) Received: from [10.0.0.14] ([82.166.23.15]) by smtp.gmail.com with ESMTPSA id r11-v6sm23442597wrn.34.2018.06.10.01.36.23 for (version=TLS1_2 cipher=ECDHE-RSA-AES128-GCM-SHA256 bits=128/128); Sun, 10 Jun 2018 01:36:23 -0700 (PDT) From: Harbs Content-Type: text/plain; charset=utf-8 Content-Transfer-Encoding: quoted-printable Mime-Version: 1.0 (Mac OS X Mail 10.3 \(3273\)) Subject: Re: [royale-asjs] branch develop updated: Jewel Grid Layout Date: Sun, 10 Jun 2018 11:36:21 +0300 References: <152861789157.20723.11386340040206594653@gitbox.apache.org> To: dev@royale.apache.org In-Reply-To: <152861789157.20723.11386340040206594653@gitbox.apache.org> Message-Id: <0D19D1E1-EF4B-4E8D-B1E1-363B12540A9C@gmail.com> X-Mailer: Apple Mail (2.3273) Wouldn=E2=80=99t 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, carlosrovira@apache.org wrote: >=20 > This is an automated email from the ASF dual-hosted git repository. >=20 > carlosrovira pushed a commit to branch develop > in repository https://gitbox.apache.org/repos/asf/royale-asjs.git >=20 >=20 > The following commit(s) were added to refs/heads/develop by this push: > new 3646f90 Jewel Grid Layout > 3646f90 is described below >=20 > commit 3646f904c0f9c853110c896e3126b2ba0eb3290e > Author: Carlos Rovira > AuthorDate: Sun Jun 10 10:04:42 2018 +0200 >=20 > 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 =3D> 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(-) >=20 > 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; > } >=20 > -.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; > } >=20 > j|View { > IBeadView: ClassReference("org.apache.royale.core.beads.GroupView"); > - IBeadLayout: = ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout"); > } >=20 > j|Group { > @@ -75,7 +45,6 @@ j|Container { > IBeadLayout: = ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout"); > IViewport: = ClassReference("org.apache.royale.core.supportClasses.Viewport"); > IViewportModel: = ClassReference("org.apache.royale.core.beads.models.ViewportModel"); > - align-items: flex-start; > } >=20 > @media -royale-swf { > @@ -182,6 +151,162 @@ j|Label { > IBeadModel: = ClassReference("org.apache.royale.jewel.beads.models.TextModel"); > } >=20 > +.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.royale.jewel.beads.views.RadioButtonView"); > } > } > +.jewel.slider input::-ms-tooltip { > + display: none; > +} > + > j|Slider { > IBeadModel: = ClassReference("org.apache.royale.jewel.beads.models.SliderRangeModel"); > IBeadView: = ClassReference("org.apache.royale.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 @@ > > > > + >=20 > > > @@ -55,6 +56,7 @@ > > > > + >=20 > >=20 > 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 > } >=20 > 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.a= s = b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Card.a= s > index 9fffdf2..be4b16f 100644 > --- = a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Card.a= s > +++ = b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Card.a= s > @@ -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; >=20 > /** > diff --git = a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Contai= ner.as = b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Contai= ner.as > index 3eed971..c2b3831 100644 > --- = a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Contai= ner.as > +++ = b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Contai= ner.as > @@ -81,7 +81,7 @@ package org.apache.royale.jewel > { > COMPILE::JS > { > - typeNames =3D 'Container'; > + typeNames =3D ''; > } > super(); > } > diff --git = a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Card.a= s = b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Grid.a= s > 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/royale/jewel/Card.a= s > +++ = b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Grid.a= s > @@ -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; >=20 > /** > - * 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. > * =20 > * @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(); >=20 > - typeNames =3D "jewel card"; > + typeNames =3D "jewel"; > + > + layout =3D new GridLayout(); > + addBead(layout); > } >=20 > - protected var _shadow:Number =3D 0; > + protected var layout:GridLayout; > + > + protected var _gap:Number =3D 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=20 > + * 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; > } >=20 > - public function set shadow(value:Number):void > + public function set gap(value:Number):void > { > - if (_shadow !=3D value) > + if (_gap !=3D value) > { > COMPILE::JS > { > - if (value =3D=3D 2 || value =3D=3D 3 || value =3D=3D= 4 || value =3D=3D 6 || value =3D=3D 8 || value =3D=3D 16) > + if (value > 0 && value < 20) > { > - var classVal:String =3D "shadow-" + _shadow + = "dp"; > - classSelectorList.remove(classVal); > - > - classVal =3D "shadow-" + value + "dp"; > - = classSelectorList.add(classVal); > - > - _shadow =3D value; > - } > + layout.gap =3D 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/royale/jewel/beads/= layouts/GridLayout.as = b/frameworks/projects/Jewel/src/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/royale/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 > + * =20 > + * @langversion 3.0 > + * @playerversion Flash 10.2 > + * @playerversion AIR 2.6 > + * @productversion Royale 0.9.3 > + * @royaleignorecoercion = org.apache.royale.core.IParentIUIBase > + * @royaleignorecoercion = org.apache.royale.core.WrappedHTMLElement > + */ > + override public function set strand(value:IStrand):void > + { > + super.strand =3D value; > + > + COMPILE::JS > + { > + hostComponent =3D layoutView as UIBase; > + hostComponent.className =3D = hostComponent.className ? hostComponent.className + " layout grid" : = "layout grid"; > + > + setGap(_gap); > + } > + } > + > + protected var _gap:Number =3D 0; > + /** > + * Assigns variable gap to grid from 1 to 20 > + * Activate "gap-Xdp" effect selector to set a numeric = gap=20 > + * 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 !=3D value) > + { > + COMPILE::JS > + { > + if(hostComponent) > + setGap(value); > + else > + _gap =3D value; > + } > + } > + } > + > + COMPILE::JS > + public function setGap(value:Number):void > + {//if(hostComponent.className.indexOf("gap") =3D=3D -1 = &&=20 > + // if(gap) > + // hostComponent.className +=3D " gap-1dp"; > + // else > + // hostComponent.className =3D = StringUtil.removeWord(hostComponent.className, " gap-1dp"); > + hostComponent.positioner.classList.remove("gap-" = + _gap + "dp"); > + hostComponent.positioner.classList.add("gap-" + = value + "dp"); > + _gap =3D 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 > + { > + /**=20 > + * This Layout uses the following CSS = rules > + * no code needed in JS for layout > + *=20 > + * .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" >=20 > -$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 >=20 > -.layout > - display: flex=09 > - //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 > -=09 > -.layout.horizontal > - flex-flow: row nowrap > - //justify-content: flex-start // align main axis (default) > - align-items: flex-start > - //> * > - // flex: 1 0 auto > -=09 > -.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 > -=09 > -.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 > =09 > j|View > IBeadView: = ClassReference("org.apache.royale.core.beads.GroupView") > - IBeadLayout: = ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout") > + //IBeadLayout: = ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout") >=20 > j|Group > IBeadView: = ClassReference("org.apache.royale.core.beads.GroupView") > @@ -94,7 +47,11 @@ j|Container > IBeadLayout: = ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout") > IViewport: = ClassReference("org.apache.royale.core.supportClasses.Viewport") > IViewportModel: = ClassReference("org.apache.royale.core.beads.models.ViewportModel") > - align-items: flex-start > + //align-items: flex-start > + > + > +//j|Grid > +// IBeadLayout: = ClassReference("org.apache.royale.jewel.beads.layouts.GridLayout") >=20 > @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=09 > + > +/* Absolute */ > +.layout.absolute > + position: relative > + > * > + position: absolute > + > +/* Horizontal */ > +.layout.horizontal > + flex-flow: row nowrap > + align-items: flex-start > +=09 > +//.layout.horizontal.gap > +// justify-content: space-between > + > +/* Vertical */=09 > +.layout.vertical > + flex-flow: column nowrap > + align-items: flex-start > +=09 > +//.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" >=20 > --=20 > To stop receiving notification emails like this one, please contact > carlosrovira@apache.org.