Repository: flex-asjs Updated Branches: refs/heads/develop 8fbdd3783 -> 4329771d1
Tabs working Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/4329771d Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/4329771d Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/4329771d Branch: refs/heads/develop Commit: 4329771d18795e7e48ce44776d46393dc78d3a8a Parents: 8fbdd37 Author: Carlos Rovira <[email protected]> Authored: Wed Nov 30 12:12:12 2016 +0100 Committer: Carlos Rovira <[email protected]> Committed: Wed Nov 30 12:12:12 2016 +0100 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/Tabs.mxml | 14 ++++---- .../src/main/flex/org/apache/flex/mdl/TabBar.as | 33 +++++++++++++++---- .../flex/org/apache/flex/mdl/TabBarButton.as | 31 ++++++++++++++++-- .../flex/org/apache/flex/mdl/TabBarPanel.as | 34 ++++++++++++++++---- 4 files changed, 89 insertions(+), 23 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4329771d/examples/flexjs/MDLExample/src/main/flex/Tabs.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Tabs.mxml b/examples/flexjs/MDLExample/src/main/flex/Tabs.mxml index b9b3a40..03d66b8 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Tabs.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Tabs.mxml @@ -24,28 +24,26 @@ limitations under the License. <mdl:Grid className="demo-grid"> - <mdl:Tabs> + <mdl:Tabs width="400" ripple="true"> <mdl:TabBar ripple="true"> <mdl:TabBarButton text="Tab One" href="#tab1" isActive="true"/> <mdl:TabBarButton text="Tab Two" href="#tab2"/> <mdl:TabBarButton text="Tab Three" href="#tab3"/> </mdl:TabBar> - <mdl:TabBarPanel id="tab1"> - <mdl:Button fab="true" ripple="true"> - <i class="material-icons md-48">add</i> - </mdl:Button> + <mdl:TabBarPanel id="tab1" isActive="true"> + <js:Label text="Tab 1"/> </mdl:TabBarPanel> <mdl:TabBarPanel id="tab2"> - <mdl:Button fab="true" ripple="true"> - <i class="material-icons md-48">face</i> - </mdl:Button> + <js:Label text="Tab 2"/> </mdl:TabBarPanel> <mdl:TabBarPanel id="tab3"> + <js:Label text="Tab 3"/> </mdl:TabBarPanel> </mdl:Tabs> + </mdl:Grid> </mdl:TabBarPanel> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4329771d/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBar.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBar.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBar.as index c793a92..b8d7c9e 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBar.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBar.as @@ -57,12 +57,9 @@ package org.apache.flex.mdl COMPILE::JS override protected function createElement():WrappedHTMLElement { - typeNames = "mdl-layout__tab-bar"; - - element = document.createElement('div') as WrappedHTMLElement; - element.className = typeNames; - - positioner = element; + element = document.createElement('div') as WrappedHTMLElement; + + positioner = element; // absolute positioned children need a non-null // position value in the parent. It might @@ -73,6 +70,30 @@ package org.apache.flex.mdl return element; } + /** + * If TabBar is used inside Tabs use a different config + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + COMPILE::JS + override public function addedToParent():void + { + super.addedToParent(); + + if(parent is Tabs) + { + typeNames = "mdl-tabs__tab-bar"; + } else { + typeNames = "mdl-layout__tab-bar"; + } + + element.className = typeNames; + className += (_ripple ? " mdl-js-ripple-effect" : ""); + } + protected var _ripple:Boolean = false; /** * A boolean flag to activate "mdl-js-ripple-effect" effect selector. http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4329771d/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBarButton.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBarButton.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBarButton.as index 15a3e9f..590fa0b 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBarButton.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBarButton.as @@ -82,8 +82,6 @@ package org.apache.flex.mdl COMPILE::JS override protected function createElement():WrappedHTMLElement { - typeNames = "mdl-layout__tab"; - var a:HTMLElement = document.createElement('a') as HTMLElement; a.setAttribute('href', href); @@ -97,5 +95,34 @@ package org.apache.flex.mdl return element; } + + /** + * If TabBarButton is used in a TabBar that is + * inside a Tabs component use a different config + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + COMPILE::JS + override public function addedToParent():void + { + super.addedToParent(); + + if(parent is TabBar) + { + var parentTabBar:TabBar = parent as TabBar; + if(parentTabBar.parent is Tabs) + { + typeNames = "mdl-tabs__tab"; + } else { + typeNames = "mdl-layout__tab"; + } + + element.className = typeNames; + className += (_isActive ? " is-active" : ""); + } + } } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4329771d/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBarPanel.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBarPanel.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBarPanel.as index 5d43d9f..4574e03 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBarPanel.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBarPanel.as @@ -60,12 +60,9 @@ package org.apache.flex.mdl COMPILE::JS override protected function createElement():WrappedHTMLElement { - typeNames = "mdl-layout__tab-panel"; - - element = document.createElement('section') as WrappedHTMLElement; - element.className = typeNames; - - positioner = element; + element = document.createElement('section') as WrappedHTMLElement; + + positioner = element; // absolute positioned children need a non-null // position value in the parent. It might @@ -76,8 +73,31 @@ package org.apache.flex.mdl return element; } - private var _isActive:Boolean; + /** + * If TabBarPanel is used inside Tabs use a different config + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + COMPILE::JS + override public function addedToParent():void + { + super.addedToParent(); + if(parent is Tabs) + { + typeNames = "mdl-tabs__panel"; + } else { + typeNames = "mdl-layout__tab-panel"; + } + + element.className = typeNames; + className += (_isActive ? " is-active" : ""); + } + + private var _isActive:Boolean; /** * Marks this Button as the active one in the TabBar *
