CardInner containers and effects
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/3adb8dc8 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/3adb8dc8 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/3adb8dc8 Branch: refs/heads/feature/mdl Commit: 3adb8dc8c50f2d7a7d5445fe6b0334796bb8e438 Parents: 379c5a1 Author: Carlos Rovira <carlosrov...@apache.org> Authored: Fri Nov 4 00:33:19 2016 +0100 Committer: Carlos Rovira <carlosrov...@apache.org> Committed: Fri Nov 4 17:43:37 2016 +0100 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/App.mxml | 15 +-- .../src/main/resources/mdl-styles.css | 4 +- .../flex/org/apache/flex/mdl/CardActions.as | 4 +- .../main/flex/org/apache/flex/mdl/CardMedia.as | 6 +- .../org/apache/flex/mdl/CardSupportingText.as | 4 +- .../main/flex/org/apache/flex/mdl/CardTitle.as | 4 +- .../org/apache/flex/mdl/beads/CardEffect.as | 24 ++--- .../apache/flex/mdl/beads/CardInnerEffect.as | 98 ++++++++++++++++++++ .../apache/flex/mdl/supportClasses/CardInner.as | 81 ++++++++++++++++ .../src/main/resources/mdl-manifest.xml | 2 + 10 files changed, 215 insertions(+), 27 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3adb8dc8/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 dff092f..9f3fb79 100644 --- a/examples/flexjs/MDLExample/src/main/flex/App.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml @@ -124,20 +124,23 @@ limitations under the License. </js:beads> </mdl:Button> - <mdl:Card> + <mdl:Card width="512"> <js:beads> - <mdl:CardEffect shadow4dp="true"/> + <mdl:CardEffect shadow="2"/> </js:beads> - <mdl:CardTitle> - <js:Label text="My Card Title"/> + <mdl:CardTitle style="color: #666;height: 176px; background-image: url('../../../../src/main/resources/Unknown.jpeg') center / cover;"> + <js:Label text="Welcome" className="mdl-card__title-text"/> </mdl:CardTitle> <mdl:CardMedia> - <js:Image url="../../../../src/main/resources/Unknown.jpeg" height="140"/> + <js:Image url="../../../../src/main/resources/Unknown.jpeg" height="176"/> </mdl:CardMedia> <mdl:CardSupportingText> - <js:Label text="This text might describe the photo and provide further information, such as where and when it was taken."/> + <js:MultilineLabel text="This text might describe the photo and provide further information, such as where and when it was taken."/> </mdl:CardSupportingText> <mdl:CardActions> + <js:beads> + <mdl:CardInnerEffect border="true"/> + </js:beads> <mdl:Button text="TYPE TEXT" click="badge1.type = 1"> <js:beads> <mdl:ButtonEffect raised="true" colored="false"/> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3adb8dc8/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 42db67d..bd344c1 100644 --- a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css +++ b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css @@ -38,4 +38,6 @@ Image vertical-align: top; IBeadModel: ClassReference("org.apache.flex.html.beads.models.ImageModel"); IBeadView: ClassReference("org.apache.flex.html.beads.ImageView"); -} \ No newline at end of file +} + + http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3adb8dc8/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardActions.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardActions.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardActions.as index 5328dc8..c821a2b 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardActions.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardActions.as @@ -18,7 +18,7 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.flex.mdl { - import org.apache.flex.core.ContainerBase; + import org.apache.flex.mdl.supportClasses.CardInner; COMPILE::JS { @@ -40,7 +40,7 @@ package org.apache.flex.mdl * @playerversion AIR 2.6 * @productversion FlexJS 0.0 */ - public class CardActions extends ContainerBase + public class CardActions extends CardInner { /** * constructor. http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3adb8dc8/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardMedia.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardMedia.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardMedia.as index dba03b9..278fb52 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardMedia.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardMedia.as @@ -18,8 +18,8 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.flex.mdl { - import org.apache.flex.core.ContainerBase; - + import org.apache.flex.mdl.supportClasses.CardInner; + COMPILE::JS { import org.apache.flex.core.WrappedHTMLElement; @@ -40,7 +40,7 @@ package org.apache.flex.mdl * @playerversion AIR 2.6 * @productversion FlexJS 0.0 */ - public class CardMedia extends ContainerBase + public class CardMedia extends CardInner { /** * constructor. http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3adb8dc8/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardSupportingText.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardSupportingText.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardSupportingText.as index 19b2259..b087135 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardSupportingText.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardSupportingText.as @@ -18,7 +18,7 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.flex.mdl { - import org.apache.flex.core.ContainerBase; + import org.apache.flex.mdl.supportClasses.CardInner; COMPILE::JS { @@ -40,7 +40,7 @@ package org.apache.flex.mdl * @playerversion AIR 2.6 * @productversion FlexJS 0.0 */ - public class CardSupportingText extends ContainerBase + public class CardSupportingText extends CardInner { /** * constructor. http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3adb8dc8/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardTitle.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardTitle.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardTitle.as index b948ce4..c2398a3 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardTitle.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardTitle.as @@ -18,7 +18,7 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.flex.mdl { - import org.apache.flex.core.ContainerBase; + import org.apache.flex.mdl.supportClasses.CardInner; COMPILE::JS { @@ -40,7 +40,7 @@ package org.apache.flex.mdl * @playerversion AIR 2.6 * @productversion FlexJS 0.0 */ - public class CardTitle extends ContainerBase + public class CardTitle extends CardInner { /** * constructor. http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3adb8dc8/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/CardEffect.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/CardEffect.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/CardEffect.as index 9045d91..19e3396 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/CardEffect.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/CardEffect.as @@ -46,27 +46,29 @@ package org.apache.flex.mdl.beads { } - private var _shadow4dp:String = ""; + private var _shadow:Number = 0; + private var _shadowStyle:String = ""; /** * A boolean flag to activate "mdl-shadow--4dp" effect selector. - * Applies open-circle effect to badge + * Assigns variable shadow depths (0, 2, 3, 4, 6, 8, or 16) to card * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 * @productversion FlexJS 0.0 */ - public function get shadow4dp():Boolean + public function get shadow():Number { - return _shadow4dp; + return _shadow; } - public function set shadow4dp(value:Boolean):void + public function set shadow(value:Number):void { - if(value) { - _shadow4dp = " mdl-shadow--4dp"; - } else { - _shadow4dp = ""; - } + if(value == 0) { + _shadowStyle = ""; + } else { + _shadow = value; + _shadowStyle = " mdl-shadow--" + _shadow + "dp"; + } } private var _strand:IStrand; @@ -88,7 +90,7 @@ package org.apache.flex.mdl.beads { if (value is Card) { var card:Card = value as Card; - card.className = _shadow4dp; + card.className = _shadowStyle; } else { throw new Error("Host component must be an MDL Card."); } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3adb8dc8/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/CardInnerEffect.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/CardInnerEffect.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/CardInnerEffect.as new file mode 100644 index 0000000..91b366b --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/CardInnerEffect.as @@ -0,0 +1,98 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.beads +{ + import org.apache.flex.core.IStrand; + import org.apache.flex.core.IBead; + import org.apache.flex.mdl.supportClasses.CardInner; + + + /** + * The CardInnerEffect class is a specialty bead that can be used with + * a MDL Card Inner container to apply some MDL complementary effect. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class CardInnerEffect implements IBead + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function CardInnerEffect() + { + } + + private var _border:String = ""; + /** + * A boolean flag to activate "mdl-card--border" effect selector. + * Adds a border to the card section that it's applied to + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get border():Boolean + { + return _border; + } + public function set border(value:Boolean):void + { + if(value) { + _border = " mdl-card--border"; + } else { + _border = ""; + } + } + + private var _strand:IStrand; + + /** + * @copy org.apache.flex.core.IBead#strand + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + * @flexjsignorecoercion org.apache.flex.mdl.TextInput; + */ + public function set strand(value:IStrand):void + { + _strand = value; + + COMPILE::JS + { + if (value is CardInner) { + var card:CardInner = value as CardInner; + card.className = _border; + } else { + throw new Error("Host component must be an MDL CardInner."); + } + } + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3adb8dc8/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/CardInner.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/CardInner.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/CardInner.as new file mode 100644 index 0000000..e420f2d --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/CardInner.as @@ -0,0 +1,81 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.supportClasses +{ + import org.apache.flex.core.ContainerBase; + + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + /** + * The CardInner class is a Container component capable of parenting other + * four components (CardTitle, CardMedia, CardSupportingText and CardActions. + * The Panel uses the following bead types: + * + * org.apache.flex.core.IBeadModel: the data model for the Card. + * org.apache.flex.core.IBeadView: creates the parts of the Card. + * + * @see PanelWithControlBar + * @see ControlBar + * @see TitleBar + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class CardInner extends ContainerBase + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function CardInner() + { + super(); + } + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + element = document.createElement('div') as WrappedHTMLElement; + + 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 + positioner.style.position = 'relative'; + element.flexjs_wrapper = this; + + className = typeNames = "mdl-card"; + + return element; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3adb8dc8/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 de6554b..5fc8294 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml @@ -34,10 +34,12 @@ <component id="Badge" class="org.apache.flex.mdl.Badge"/> <component id="BadgeEffect" class="org.apache.flex.mdl.beads.BadgeEffect"/> <component id="Card" class="org.apache.flex.mdl.Card"/> + <component id="CardInner" class="org.apache.flex.mdl.supportClasses.CardInner"/> <component id="CardTitle" class="org.apache.flex.mdl.CardTitle"/> <component id="CardSupportingText" class="org.apache.flex.mdl.CardSupportingText"/> <component id="CardMedia" class="org.apache.flex.mdl.CardMedia"/> <component id="CardActions" class="org.apache.flex.mdl.CardActions"/> <component id="CardEffect" class="org.apache.flex.mdl.beads.CardEffect"/> + <component id="CardInnerEffect" class="org.apache.flex.mdl.beads.CardInnerEffect"/> </componentPackage>
