royale-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Harbs <harbs.li...@gmail.com>
Subject Re: [royale-asjs] branch develop updated: Jewel Grid Layout
Date Sun, 10 Jun 2018 08:36:21 GMT
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, carlosrovira@apache.org 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 <carlosrovira@apache.org>
> 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.royale.jewel.beads.layouts.BasicLayout");
> }
> 
> 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;
> }
> 
> @media -royale-swf {
> @@ -182,6 +151,162 @@ j|Label {
>   IBeadModel: ClassReference("org.apache.royale.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.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 @@
>     <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.HorizontalLayoutSpaceBetween"/>
> 
> 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/royale/jewel/Card.as
> index 9fffdf2..be4b16f 100644
> --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Card.as
> +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/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/royale/jewel/Container.as
> index 3eed971..c2b3831 100644
> --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Container.as
> +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/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/royale/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/royale/jewel/Card.as
> +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/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/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
> +		 *  
> +		 *  @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 = 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.royale.core.beads.GroupView")
> -	IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
> +	//IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
> 
> 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")
> 
> @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
> carlosrovira@apache.org.


Mime
View raw message