Repository: flex-asjs Updated Branches: refs/heads/develop 29926c55f -> ba34dfa9c
Grids panel Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/ba34dfa9 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/ba34dfa9 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/ba34dfa9 Branch: refs/heads/develop Commit: ba34dfa9c4d12a4a1374895baccd30f852f03d98 Parents: 29926c5 Author: Carlos Rovira <[email protected]> Authored: Thu Nov 24 22:28:26 2016 +0100 Committer: Carlos Rovira <[email protected]> Committed: Thu Nov 24 22:28:26 2016 +0100 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/Cards.mxml | 81 +++++++++++--------- .../flexjs/MDLExample/src/main/flex/Grids.mxml | 55 +++++++++++++ .../src/main/flex/MainNavigation.mxml | 3 + .../src/main/resources/mdl-styles.css | 17 ++++ 4 files changed, 118 insertions(+), 38 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/ba34dfa9/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 index 2839f6c..9d98d76 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Cards.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Cards.mxml @@ -23,45 +23,50 @@ limitations under the License. xmlns:mdl="library://ns.apache.org/flexjs/mdl" xmlns="http://www.w3.org/1999/xhtml";> - <mdl:Grid> - - <mdl:Card className="demo-card-wide" shadow="2"> - <mdl:CardTitle> - <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"> - <i class="material-icons">share</i> - </mdl:Button> - </mdl:CardMenu> - </mdl:Card> + <mdl:Grid className="center-items"> + + <mdl:GridCell> + <mdl:Card className="demo-card-wide" shadow="2"> + <mdl:CardTitle> + <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"> + <i class="material-icons">share</i> + </mdl:Button> + </mdl:CardMenu> + </mdl:Card> + </mdl:GridCell> + + <mdl:GridCell> + <mdl:Card className="demo-card-square" shadow="2"> + <mdl:CardTitle expand="true"> + <mdl:CardTitleText text="Update"/> + </mdl:CardTitle> + <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:GridCell> + + <mdl:GridCell> + <mdl:Card width="256" height="256" shadow="2" style="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:GridCell> - <mdl:Card className="demo-card-square" shadow="2" style="margin:10;"> - <mdl:CardTitle expand="true"> - <mdl:CardTitleText text="Update"/> - </mdl:CardTitle> - <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:CardMedia> <js:Image url="assets/Unknown.jpg" height="176"/> </mdl:CardMedia>--> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/ba34dfa9/examples/flexjs/MDLExample/src/main/flex/Grids.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Grids.mxml b/examples/flexjs/MDLExample/src/main/flex/Grids.mxml new file mode 100644 index 0000000..f1d0765 --- /dev/null +++ b/examples/flexjs/MDLExample/src/main/flex/Grids.mxml @@ -0,0 +1,55 @@ +<?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 className="demo-grid"> + + <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> + <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> + <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> + <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> + <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> + <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> + <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> + <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> + <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> + <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> + <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> + <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> + + <mdl:GridCell column="4"><js:Label text="4"/></mdl:GridCell> + <mdl:GridCell column="4"><js:Label text="4"/></mdl:GridCell> + <mdl:GridCell column="4"><js:Label text="4"/></mdl:GridCell> + + <mdl:GridCell column="6"><js:Label text="6"/></mdl:GridCell> + <mdl:GridCell column="4"><js:Label text="4"/></mdl:GridCell> + <mdl:GridCell column="2"><js:Label text="2"/></mdl:GridCell> + + <mdl:GridCell column="6" columnTablet="8"><js:Label text="6 (8 Tablet)"/></mdl:GridCell> + <mdl:GridCell column="4" columnTablet="6"><js:Label text="4 (6 Tablet)"/></mdl:GridCell> + <mdl:GridCell column="2" columnPhone="4"><js:Label text="2 (4 Phone)"/></mdl:GridCell> + + </mdl:Grid> + +</mdl:TabBarPanel> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/ba34dfa9/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 dd4f51a..fcbbddd 100644 --- a/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml @@ -36,6 +36,7 @@ limitations under the License. </mdl:HeaderRow> <mdl:TabBar ripple="true"> <mdl:TabBarButton text="Cards" href="#cards_panel" isActive="true"/> + <mdl:TabBarButton text="Grids" href="#grids_panel"/> <mdl:TabBarButton text="Buttons" href="#buttons_panel" /> <mdl:TabBarButton text="TextFields" href="#textfield_panel"/> <mdl:TabBarButton text="Toggles" href="#toggles_panel"/> @@ -57,6 +58,8 @@ limitations under the License. <mdl:NavigationLayoutContent> <local:Cards id="cards_panel" isActive="true"/> + + <local:Grids id="grids_panel"/> <local:Buttons id="buttons_panel"/> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/ba34dfa9/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css index 924e030..d80a454 100644 --- a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css +++ b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css @@ -69,3 +69,20 @@ Image +.demo-grid .mdl-cell { + box-sizing: border-box; + background-color: #BDBDBD; + height: 200px; + padding-left: 8px; + padding-top: 4px; + color: white; +} +.demo-grid .mdl-grid:first-of-type .mdl-cell { + height: 50px; +} + +/* center items in grid */ +.mdl-grid.center-items { + flex-direction: column; + align-items: center; +}
