Repository: flex-asjs Updated Branches: refs/heads/develop f6d133023 -> 86dde089e
Grid and more refactor (still in progress ) Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/86dde089 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/86dde089 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/86dde089 Branch: refs/heads/develop Commit: 86dde089e56e8cea9993ea2d914304385d76637c Parents: f6d1330 Author: Carlos Rovira <carlosrov...@apache.org> Authored: Wed Nov 23 01:31:03 2016 +0100 Committer: Carlos Rovira <carlosrov...@apache.org> Committed: Wed Nov 23 01:31:03 2016 +0100 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/Cards.mxml | 69 ++++++++++++++++++ .../src/main/flex/MainNavigation.mxml | 46 ++---------- .../src/main/flex/org/apache/flex/mdl/Grid.as | 76 ++++++++++++++++++++ .../src/main/resources/mdl-manifest.xml | 1 + 4 files changed, 151 insertions(+), 41 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/86dde089/examples/flexjs/MDLExample/src/main/flex/Cards.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Cards.mxml b/examples/flexjs/MDLExample/src/main/flex/Cards.mxml new file mode 100644 index 0000000..c318d58 --- /dev/null +++ b/examples/flexjs/MDLExample/src/main/flex/Cards.mxml @@ -0,0 +1,69 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- + +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. + +--> +<mdl:TabBarPanel xmlns:fx="http://ns.adobe.com/mxml/2009"; + xmlns:js="library://ns.apache.org/flexjs/basic" + xmlns:local="*" + xmlns:mdl="library://ns.apache.org/flexjs/mdl" + xmlns="http://www.w3.org/1999/xhtml";> + + <mdl:Grid> + + <mdl:Card width="512" shadow="2" style="margin:10;"> + <mdl:CardTitle className="welcomeCard__title"> + <mdl:CardTitleText text="Welcome"/> + </mdl:CardTitle> + <mdl:CardSupportingText> + <js:MultilineLabel text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia..."/> + </mdl:CardSupportingText> + <mdl:CardActions border="true"> + <mdl:Button text="Get Started" ripple="true" colored="true"/> + </mdl:CardActions> + <mdl:CardMenu> + <mdl:Button icon="true" ripple="true" style="color: #fff;"> + <i class="material-icons">share</i> + </mdl:Button> + </mdl:CardMenu> + </mdl:Card> + + <mdl:Card width="320" height="320" shadow="2" style="margin:10;"> + <mdl:CardTitle className="dogTitle" expand="true"> + <mdl:CardTitleText text="Update"/> + </mdl:CardTitle> + <!--<mdl:CardMedia> + <js:Image url="assets/Unknown.jpg" height="176"/> + </mdl:CardMedia>--> + <mdl:CardSupportingText> + <js:MultilineLabel text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis."/> + </mdl:CardSupportingText> + <mdl:CardActions border="true"> + <mdl:Button colored="true" ripple="true" text="View Updates"/> + </mdl:CardActions> + </mdl:Card> + + <mdl:Card width="256" height="256" shadow="2" style="margin:10;background: url('assets/image_card.jpg') center / cover"> + <mdl:CardTitle expand="true"/> + <mdl:CardActions style="height: 52px; padding: 16px; background: rgba(0, 0, 0, 0.2);"> + <js:Span text="Image.jpg" style="color: #fff; font-size: 14px; font-weight: 500;"/> + </mdl:CardActions> + </mdl:Card> + + </mdl:Grid> + +</mdl:TabBarPanel> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/86dde089/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml b/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml index d7d9ed7..b09949a 100644 --- a/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml @@ -25,7 +25,7 @@ limitations under the License. fixedHeader="true"> <mdl:Header> <mdl:HeaderRow> - <mdl:LayoutTitle text="Material Design Layout"/> + <mdl:LayoutTitle text="FlexJS Material Design Layout"/> <mdl:Spacer/> <mdl:Navigation> <mdl:NavigationLink text="link 1" href="#"/> @@ -53,6 +53,9 @@ limitations under the License. </mdl:Drawer> <mdl:NavigationLayoutContent> + + <local:Cards id="cards_panel" isActive="true"/> + <mdl:TabBarPanel id="buttons_panel"> <!-- Buttons https://getmdl.io/components/index.html#buttons-section --> <mdl:Button className="mdlbtn"/> @@ -95,46 +98,7 @@ limitations under the License. </mdl:TextField> </mdl:TabBarPanel> - <mdl:TabBarPanel id="cards_panel" isActive="true"> - <mdl:Card width="512" shadow="2" style="margin:10;"> - <mdl:CardTitle className="welcomeCard__title"> - <mdl:CardTitleText text="Welcome"/> - </mdl:CardTitle> - <mdl:CardSupportingText> - <js:MultilineLabel text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia..."/> - </mdl:CardSupportingText> - <mdl:CardActions border="true"> - <mdl:Button text="Get Started" ripple="true" colored="true"/> - </mdl:CardActions> - <mdl:CardMenu> - <mdl:Button icon="true" ripple="true" style="color: #fff;"> - <i class="material-icons">share</i> - </mdl:Button> - </mdl:CardMenu> - </mdl:Card> - - <mdl:Card width="320" height="320" shadow="2" style="margin:10;"> - <mdl:CardTitle className="dogTitle" expand="true"> - <mdl:CardTitleText text="Update"/> - </mdl:CardTitle> - <!--<mdl:CardMedia> - <js:Image url="assets/Unknown.jpg" height="176"/> - </mdl:CardMedia>--> - <mdl:CardSupportingText> - <js:MultilineLabel text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis."/> - </mdl:CardSupportingText> - <mdl:CardActions border="true"> - <mdl:Button colored="true" ripple="true" text="View Updates"/> - </mdl:CardActions> - </mdl:Card> - - <mdl:Card width="256" height="256" shadow="2" style="margin:10;background: url('assets/image_card.jpg') center / cover"> - <mdl:CardTitle expand="true"/> - <mdl:CardActions style="height: 52px; padding: 16px; background: rgba(0, 0, 0, 0.2);"> - <js:Span text="Image.jpg" style="color: #fff; font-size: 14px; font-weight: 500;"/> - </mdl:CardActions> - </mdl:Card> - </mdl:TabBarPanel> + <mdl:TabBarPanel id="others_panel"> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/86dde089/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Grid.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Grid.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Grid.as new file mode 100644 index 0000000..a7d19d8 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Grid.as @@ -0,0 +1,76 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.flex.mdl +{ + import org.apache.flex.core.ContainerBase; + + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + /** + * The Grid class is a Container component capable of parenting other + * components + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class Grid extends ContainerBase + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function Grid() + { + super(); + + className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user; + } + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + typeNames = "mdl-grid"; + + element = document.createElement('div') as WrappedHTMLElement; + element.className = typeNames; + + positioner = element; + + // absolute positioned children need a non-null + // position value in the parent. It might + // get set to 'absolute' if the container is + // also absolutely positioned + element.flexjs_wrapper = this; + + return element; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/86dde089/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml index ef18971..f8a4091 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml @@ -55,5 +55,6 @@ <component id="TabBar" class="org.apache.flex.mdl.TabBar"/> <component id="TabBarButton" class="org.apache.flex.mdl.TabBarButton"/> <component id="TabBarPanel" class="org.apache.flex.mdl.TabBarPanel"/> + <component id="Grid" class="org.apache.flex.mdl.Grid"/> </componentPackage>
