Repository: flex-asjs Updated Branches: refs/heads/develop e4a6da834 -> 75dfbc6e6
Introduce interfaces for mdl color implementation in component - Add color support for contact part in ContactChip - Update mdl Chips example Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/75dfbc6e Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/75dfbc6e Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/75dfbc6e Branch: refs/heads/develop Commit: 75dfbc6e69092e3653ec4907f5188241461f353e Parents: e4a6da8 Author: piotrz <[email protected]> Authored: Tue Dec 6 00:00:58 2016 +0100 Committer: piotrz <[email protected]> Committed: Tue Dec 6 00:00:58 2016 +0100 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/Chips.mxml | 4 +- .../org/apache/flex/mdl/beads/ContactChip.as | 132 ++++++++++++++++++- .../apache/flex/mdl/supportClasses/IMdlColor.as | 62 +++++++++ .../flex/mdl/supportClasses/IMdlTextColor.as | 63 +++++++++ 4 files changed, 256 insertions(+), 5 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/75dfbc6e/examples/flexjs/MDLExample/src/main/flex/Chips.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Chips.mxml b/examples/flexjs/MDLExample/src/main/flex/Chips.mxml index e46b6fa..7adc2ff 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Chips.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Chips.mxml @@ -45,14 +45,14 @@ limitations under the License. <mdl:GridCell column="5"> <mdl:Chip text="Contact Chip"> <mdl:beads> - <mdl:ContactChip contactText="A"/> + <mdl:ContactChip contactText="A" color="teal" textColor="white" /> </mdl:beads> </mdl:Chip> </mdl:GridCell> <mdl:GridCell column="5"> <mdl:Chip text="Contact Chip"> <mdl:beads> - <mdl:ContactChip contactText="A"/> + <mdl:ContactChip contactText="A" color="teal" textColor="white"/> <mdl:MaterialIconCancel /> <mdl:DeletableChip /> </mdl:beads> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/75dfbc6e/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ContactChip.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ContactChip.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ContactChip.as index f2dabb3..cd162a3 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ContactChip.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ContactChip.as @@ -21,6 +21,8 @@ package org.apache.flex.mdl.beads import org.apache.flex.core.IBead; import org.apache.flex.core.IStrand; import org.apache.flex.core.UIBase; + import org.apache.flex.mdl.supportClasses.IMdlColor; + import org.apache.flex.mdl.supportClasses.IMdlTextColor; /** @@ -33,9 +35,14 @@ package org.apache.flex.mdl.beads * @productversion FlexJS 0.0 */ COMPILE::SWF - public class ContactChip + public class ContactChip implements IMdlColor, IMdlTextColor { - private var _contactText:String = ""; + private var _color:String; + private var _colorWeight:String; + private var _textColor:String; + private var _textColorWeight:String; + + private var _contactText:String; public function ContactChip() { @@ -46,10 +53,62 @@ package org.apache.flex.mdl.beads { _contactText = value; } + + /** + * @inheritDoc + */ + public function get color():String + { + return _color; + } + + public function set color(value:String):void + { + _color = value; + } + + /** + * @inheritDoc + */ + public function get colorWeight():String + { + return _colorWeight; + } + + public function set colorWeight(value:String):void + { + _colorWeight = value; + } + + /** + * @inheritDoc + */ + public function get textColor():String + { + return _textColor; + } + + public function set textColor(value:String):void + { + _textColor = value; + } + + /** + * @inheritDoc + */ + public function get textColorWeight():String + { + return _textColorWeight; + } + + public function set textColorWeight(value:String):void + { + _textColorWeight = value; + } } COMPILE::JS - public class ContactChip implements IBead + public class ContactChip implements IBead, IMdlColor, IMdlTextColor { /** * constructor. @@ -63,6 +122,10 @@ package org.apache.flex.mdl.beads { } + private var _color:String = ""; + private var _colorWeight:String = ""; + private var _textColor:String = ""; + private var _textColorWeight:String = ""; private var _contactText:String = ""; private var contact:HTMLSpanElement; @@ -98,6 +161,17 @@ package org.apache.flex.mdl.beads contact = document.createElement("span") as HTMLSpanElement; contact.classList.add("mdl-chip__contact"); + var contactColor:String = _colorWeight ? + "mdl-color--".concat(_color, "-", _colorWeight) : + "mdl-color--".concat(_color); + + var contactTextColor:String = _textColorWeight ? + "mdl-color-text--".concat(_textColor, "-", _textColorWeight) : + "mdl-color-text--".concat(_textColor); + + contact.classList.toggle(contactColor, _color); + contact.classList.toggle(contactTextColor, _textColor); + contact.appendChild(textNode); element.insertBefore(contact, host["chipTextSpan"]); @@ -113,5 +187,57 @@ package org.apache.flex.mdl.beads { _contactText = value; } + + /** + * @inheritDoc + */ + public function get color():String + { + return _color; + } + + public function set color(value:String):void + { + _color = value; + } + + /** + * @inheritDoc + */ + public function get colorWeight():String + { + return _colorWeight; + } + + public function set colorWeight(value:String):void + { + _colorWeight = value; + } + + /** + * @inheritDoc + */ + public function get textColor():String + { + return _textColor; + } + + public function set textColor(value:String):void + { + _textColor = value; + } + + /** + * @inheritDoc + */ + public function get textColorWeight():String + { + return _textColorWeight; + } + + public function set textColorWeight(value:String):void + { + _textColorWeight = value; + } } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/75dfbc6e/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/IMdlColor.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/IMdlColor.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/IMdlColor.as new file mode 100644 index 0000000..9e8f782 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/IMdlColor.as @@ -0,0 +1,62 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 +{ + /** + * The IMdlColor interface must be implemented by any class that + * will apply color and colorWeight provided by google style color. + * + * https://material.google.com/style/color.html#color-color-palette + * https://gitlab.com/material/colors/blob/master/colors.html + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public interface IMdlColor + { + /** + * Color name provided by color palette + * Component color + * + * https://material.google.com/style/color.html#color-color-palette + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + function get color():String; + function set color(value:String):void; + + /** + * Color weight provided by color palette + * + * https://material.google.com/style/color.html#color-color-palette + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + function get colorWeight():String; + function set colorWeight(value:String):void; + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/75dfbc6e/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/IMdlTextColor.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/IMdlTextColor.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/IMdlTextColor.as new file mode 100644 index 0000000..6908fda --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/IMdlTextColor.as @@ -0,0 +1,63 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 +{ + /** + * The IMdlTextColor interface must be implemented by any class that + * will apply textColor and textColorWeight provided by google style color. + * + * https://material.google.com/style/color.html#color-color-palette + * https://gitlab.com/material/colors/blob/master/colors.html + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public interface IMdlTextColor + { + /** + * Color name provided by color palette + * Text color + * + * https://material.google.com/style/color.html#color-color-palette + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + function get textColor():String; + function set textColor(value:String):void; + + /** + * Color weight provided by color palette + * Text color weight + * + * https://material.google.com/style/color.html#color-color-palette + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + function get textColorWeight():String; + function set textColorWeight(value:String):void; + } +}
