Repository: flex-asjs Updated Branches: refs/heads/develop fb252f4ea -> 20488b4d7
Fix main example layout Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/20488b4d Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/20488b4d Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/20488b4d Branch: refs/heads/develop Commit: 20488b4d7d5750ba1ba13f4bfa23260f98ed984a Parents: fb252f4 Author: Carlos Rovira <carlosrov...@apache.org> Authored: Tue Nov 22 23:58:31 2016 +0100 Committer: Carlos Rovira <carlosrov...@apache.org> Committed: Tue Nov 22 23:58:31 2016 +0100 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/App.mxml | 206 +------------------ .../src/main/flex/MainNavigation.mxml | 199 ++++++++++++++++++ .../main/resources/mdl-js-index-template.html | 2 +- .../org/apache/flex/mdl/NavigationLayout.as | 40 +++- 4 files changed, 230 insertions(+), 217 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/20488b4d/examples/flexjs/MDLExample/src/main/flex/App.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/App.mxml b/examples/flexjs/MDLExample/src/main/flex/App.mxml index cc7c3f4..3aff152 100644 --- a/examples/flexjs/MDLExample/src/main/flex/App.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml @@ -30,210 +30,6 @@ limitations under the License. <fx:Style source="../../main/resources/mdl-styles.css"/> <js:initialView> - <js:View> - - <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:NavigationLayout className="layoutTransparent" width="100%" height="400" style="position:relative"> - <mdl:Header transparent="true"> - <mdl:HeaderRow> - <mdl:LayoutTitle text="Title"/> - <mdl:Spacer/> - <mdl:Navigation> - <mdl:NavigationLink text="link"/> - <mdl:NavigationLink text="link"/> - <mdl:NavigationLink text="link"/> - <mdl:NavigationLink text="link"/> - </mdl:Navigation> - </mdl:HeaderRow> - <mdl:Drawer> - <mdl:LayoutTitle text="Title"/> - <mdl:Navigation> - <mdl:NavigationLink text="link"/> - <mdl:NavigationLink text="link"/> - <mdl:NavigationLink text="link"/> - <mdl:NavigationLink text="link"/> - </mdl:Navigation> - </mdl:Drawer> - </mdl:Header> - </mdl:NavigationLayout> - --> - <mdl:NavigationLayout style="position:relative"> - <mdl:Header> - <mdl:HeaderRow> - <mdl:LayoutTitle text="Material Design Layout"/> - <mdl:Spacer/> - <mdl:Navigation> - <mdl:NavigationLink text="link 1"/> - <mdl:NavigationLink text="link 2"/> - <mdl:NavigationLink text="link 3"/> - </mdl:Navigation> - </mdl:HeaderRow> - <mdl:Drawer> - <mdl:LayoutTitle text="Material Design Layout"/> - <mdl:Navigation> - <mdl:NavigationLink text="link 1"/> - <mdl:NavigationLink text="link 2"/> - <mdl:NavigationLink text="link 3"/> - </mdl:Navigation> - </mdl:Drawer> - </mdl:Header> - <mdl:NavigationLayoutContent> - <js:Container className="page-content"> - - <!-- Buttons https://getmdl.io/components/index.html#buttons-section --> - <js:HContainer> - <mdl:Button className="mdlbtn"/> - - <!-- Fab button --> - <mdl:Button fab="true" colored="true"> - <i class="material-icons">add</i> - </mdl:Button> - - <!-- Fab with Ripple --> - <mdl:Button fab="true" ripple="true"> - <i class="material-icons md-48">face</i> - </mdl:Button> - - <!-- Raised button --> - <mdl:Button text="COLORED" raised="true" colored="true"/> - - <!-- Raised button with ripple --> - <mdl:Button text="ACCENT" raised="true" ripple="true" accent="true"/> - - <!-- Raised disabled button--> - <mdl:Button text="DISABLED" raised="true"> - <js:beads> - <mdl:Disabled/> - </js:beads> - </mdl:Button> - </js:HContainer> - - <!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section --> - <mdl:TextField id="mdlti" change="mdlchk.text = mdlti.text" className="mdlti_example"> - <js:beads> - <mdl:TextPrompt prompt="Normal Text Field..."/> - </js:beads> - </mdl:TextField> - <mdl:TextField floatingLabel= "true"> - <js:beads> - <mdl:TextPrompt prompt="Floating Label"/> - </js:beads> - </mdl:TextField> - - <mdl:List labelField="label"> - <js:dataProvider> - <fx:Array> - <fx:Object label="Install SIM Card"/> - <fx:Object label="Install SIM Card 1"/> - <fx:Object label="Install SIM Card 2"/> - </fx:Array> - </js:dataProvider> - </mdl:List> - - <!-- Toggles :: https://getmdl.io/components/index.html#toggles-section --> - <mdl:CheckBox id="mdlchk" text="Disabled at start" className="mdlchk_example"/> - <mdl:CheckBox id="mdlchk1" text="Selected and with Ripple" selected="true" ripple="true"/> - - <mdl:RadioButton groupName="g1" text="Black" className="mdlrb_example"/> - <mdl:RadioButton groupName="g1" text="Ripple" ripple="true"/> - <mdl:RadioButton groupName="g1" text="Red"/> - <mdl:Switch text="Switch" ripple="true" selected="true"/> - - <js:VContainer> - <js:Div text="account_box" className="material-icons" style="color: rgba(0, 0, 0, 0.24);"> - <js:beads> - <mdl:Badge dataBadge="1" overlap="true"/> - </js:beads> - </js:Div> - - <js:Span text="Inbox" className="mdl-badge" style="color: rgba(0, 0, 0, 0.24);"> - <js:beads> - <mdl:Badge dataBadge="4"/> - </js:beads> - </js:Span> - - <js:A text="Badge No Bg" href="http://flex.apache.org"> - <js:beads> - <mdl:Badge dataBadge="5" noBackground="true"/> - </js:beads> - </js:A> - - <js:A id="badge1" text="Badge Normal" href="http://flex.apache.org"> - <js:beads> - <mdl:Badge dataBadge="1"/> - </js:beads> - </js:A> - - </js:VContainer> - - <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:Button id="menu_btn" icon="true"> - <i class="material-icons">more_vert</i> - </mdl:Button> - <mdl:Menu dataMdlFor="menu_btn" ripple="true" bottom="true" left="false"> - <mdl:MenuItem text="Some Action"/> - <mdl:MenuItem text="Another Action"/> - <mdl:MenuItem text="Action Disabled"> - <js:beads> - <mdl:Disabled/> - </js:beads> - </mdl:MenuItem> - <mdl:MenuItem text="More Action" divider="true"/> - <mdl:MenuItem text="Separated Action"/> - </mdl:Menu> - - <mdl:Slider className="mdlsl_example"/> - <mdl:Slider minimum="0" maximum="10" value="2" stepSize="2" width="200"/> - - - </js:Container> - </mdl:NavigationLayoutContent> - - </mdl:NavigationLayout> - - - - - <js:Form action="#"> - </js:Form> - - </js:View> + <local:MainNavigation/> </js:initialView> </js:Application> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/20488b4d/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 new file mode 100644 index 0000000..a77078e --- /dev/null +++ b/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml @@ -0,0 +1,199 @@ +<?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:NavigationLayout 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" + fixedHeader="true"> + <mdl:Header> + <mdl:HeaderRow> + <mdl:LayoutTitle text="Material Design Layout"/> + <mdl:Spacer/> + <mdl:Navigation> + <mdl:NavigationLink text="link 1"/> + <mdl:NavigationLink text="link 2"/> + <mdl:NavigationLink text="link 3"/> + <mdl:NavigationLink text="link 4"/> + </mdl:Navigation> + </mdl:HeaderRow> + </mdl:Header> + + <mdl:Drawer> + <mdl:LayoutTitle text="Drawer"/> + <mdl:Navigation> + <mdl:NavigationLink text="link 1"/> + <mdl:NavigationLink text="link 2"/> + <mdl:NavigationLink text="link 3"/> + <mdl:NavigationLink text="link 4"/> + </mdl:Navigation> + </mdl:Drawer> + + <mdl:NavigationLayoutContent> + <js:Container className="page-content"> + + <!-- Buttons https://getmdl.io/components/index.html#buttons-section --> + <js:HContainer> + <mdl:Button className="mdlbtn"/> + + <!-- Fab button --> + <mdl:Button fab="true" colored="true"> + <i class="material-icons">add</i> + </mdl:Button> + + <!-- Fab with Ripple --> + <mdl:Button fab="true" ripple="true"> + <i class="material-icons md-48">face</i> + </mdl:Button> + + <!-- Raised button --> + <mdl:Button text="COLORED" raised="true" colored="true"/> + + <!-- Raised button with ripple --> + <mdl:Button text="ACCENT" raised="true" ripple="true" accent="true"/> + + <!-- Raised disabled button--> + <mdl:Button text="DISABLED" raised="true"> + <js:beads> + <mdl:Disabled/> + </js:beads> + </mdl:Button> + </js:HContainer> + + <!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section --> + <mdl:TextField id="mdlti" change="mdlchk.text = mdlti.text" className="mdlti_example"> + <js:beads> + <mdl:TextPrompt prompt="Normal Text Field..."/> + </js:beads> + </mdl:TextField> + <mdl:TextField floatingLabel= "true"> + <js:beads> + <mdl:TextPrompt prompt="Floating Label"/> + </js:beads> + </mdl:TextField> + + <mdl:List labelField="label"> + <js:dataProvider> + <fx:Array> + <fx:Object label="Install SIM Card"/> + <fx:Object label="Install SIM Card 1"/> + <fx:Object label="Install SIM Card 2"/> + </fx:Array> + </js:dataProvider> + </mdl:List> + + <!-- Toggles :: https://getmdl.io/components/index.html#toggles-section --> + <mdl:CheckBox id="mdlchk" text="Disabled at start" className="mdlchk_example"/> + <mdl:CheckBox id="mdlchk1" text="Selected and with Ripple" selected="true" ripple="true"/> + + <mdl:RadioButton groupName="g1" text="Black" className="mdlrb_example"/> + <mdl:RadioButton groupName="g1" text="Ripple" ripple="true"/> + <mdl:RadioButton groupName="g1" text="Red"/> + <mdl:Switch text="Switch" ripple="true" selected="true"/> + + <js:VContainer> + <js:Div text="account_box" className="material-icons" style="color: rgba(0, 0, 0, 0.24);"> + <js:beads> + <mdl:Badge dataBadge="1" overlap="true"/> + </js:beads> + </js:Div> + + <js:Span text="Inbox" className="mdl-badge" style="color: rgba(0, 0, 0, 0.24);"> + <js:beads> + <mdl:Badge dataBadge="4"/> + </js:beads> + </js:Span> + + <js:A text="Badge No Bg" href="http://flex.apache.org"> + <js:beads> + <mdl:Badge dataBadge="5" noBackground="true"/> + </js:beads> + </js:A> + + <js:A id="badge1" text="Badge Normal" href="http://flex.apache.org"> + <js:beads> + <mdl:Badge dataBadge="1"/> + </js:beads> + </js:A> + + </js:VContainer> + + <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:Button id="menu_btn" icon="true"> + <i class="material-icons">more_vert</i> + </mdl:Button> + <mdl:Menu dataMdlFor="menu_btn" ripple="true" bottom="true" left="false"> + <mdl:MenuItem text="Some Action"/> + <mdl:MenuItem text="Another Action"/> + <mdl:MenuItem text="Action Disabled"> + <js:beads> + <mdl:Disabled/> + </js:beads> + </mdl:MenuItem> + <mdl:MenuItem text="More Action" divider="true"/> + <mdl:MenuItem text="Separated Action"/> + </mdl:Menu> + + <mdl:Slider className="mdlsl_example"/> + <mdl:Slider minimum="0" maximum="10" value="2" stepSize="2" width="200"/> + + <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> + + <!--<js:Form action="#"> + </js:Form>--> + </js:Container> + </mdl:NavigationLayoutContent> +</mdl:NavigationLayout> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/20488b4d/examples/flexjs/MDLExample/src/main/resources/mdl-js-index-template.html ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/resources/mdl-js-index-template.html b/examples/flexjs/MDLExample/src/main/resources/mdl-js-index-template.html index a2ce192..e2f646d 100644 --- a/examples/flexjs/MDLExample/src/main/resources/mdl-js-index-template.html +++ b/examples/flexjs/MDLExample/src/main/resources/mdl-js-index-template.html @@ -20,7 +20,7 @@ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="Custom Template for injecting custom style CSS"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0""> <link rel="stylesheet" type="text/css" href="${application}.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css"> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/20488b4d/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/NavigationLayout.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/NavigationLayout.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/NavigationLayout.as index d2efd3a..246330a 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/NavigationLayout.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/NavigationLayout.as @@ -73,28 +73,46 @@ package org.apache.flex.mdl return element; } - protected var _shadow:Number = 0; + protected var _fixedHeader:Boolean; /** - * A boolean flag to activate "mdl-shadow--Xdp" effect selector. - * Assigns variable shadow depths (0, 2, 3, 4, 6, 8, or 16) to card + * A boolean flag to activate "mdl-layout--fixed-header" effect selector. + * Optional. Makes the header always visible, even in small screens. * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 * @productversion FlexJS 0.0 */ - public function get shadow():Number + public function get fixedHeader():Boolean { - return _shadow; + return _fixedHeader; } - public function set shadow(value:Number):void + public function set fixedHeader(value:Boolean):void { - if(value == 0 || value == 2 || value == 3 || value == 4 || value == 6 || value == 8 || value == 16) - { - _shadow = value; + _fixedHeader = value; - className += (_shadow != 0 ? " mdl-shadow--" + _shadow + "dp" : ""); - } + className += (_fixedHeader ? " mdl-layout--fixed-header" : ""); + } + + protected var _fixedDrawer:Boolean; + /** + * A boolean flag to activate "mdl-layout--fixed-drawer" effect selector. + * Optional. Makes the drawer always visible and open in larger screens. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get fixedDrawer():Boolean + { + return _fixedDrawer; + } + public function set fixedDrawer(value:Boolean):void + { + _fixedDrawer = value; + + className += (_fixedDrawer ? " mdl-layout--fixed-drawer" : ""); } } }