Remove css defaults fro HTML.swc and some update to actual components implementation fixing styles and behaviors
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/3d768403 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/3d768403 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/3d768403 Branch: refs/heads/feature/mdl Commit: 3d76840387ada71cc43fa65541c68346601502f8 Parents: bf8080d Author: Carlos Rovira <carlosrov...@apache.org> Authored: Mon Oct 24 20:19:06 2016 +0200 Committer: Carlos Rovira <carlosrov...@apache.org> Committed: Wed Nov 2 19:22:52 2016 +0100 ---------------------------------------------------------------------- examples/flexjs/MDLExample/pom.xml | 1 + .../flexjs/MDLExample/src/main/flex/App.mxml | 18 +++++------ .../src/main/flex/org/apache/flex/mdl/Button.as | 13 ++++---- .../main/flex/org/apache/flex/mdl/CheckBox.as | 32 +++++++++++++++++-- .../flex/org/apache/flex/mdl/RadioButton.as | 33 ++++++++++++++++++-- .../main/flex/org/apache/flex/mdl/TextInput.as | 18 +++++------ 6 files changed, 82 insertions(+), 33 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3d768403/examples/flexjs/MDLExample/pom.xml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/pom.xml b/examples/flexjs/MDLExample/pom.xml index 207dab5..3a31b25 100644 --- a/examples/flexjs/MDLExample/pom.xml +++ b/examples/flexjs/MDLExample/pom.xml @@ -56,6 +56,7 @@ <configuration> <outputJavaScript>true</outputJavaScript> <htmlTemplate>${basedir}/src/main/resources/mdl-js-index-template.html</htmlTemplate> + <additionalCompilerOptions>-compiler.exclude-defaults-css-files=HTML-0.8.0-SNAPSHOT.swc:defaults.css</additionalCompilerOptions> </configuration> </execution> </executions> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3d768403/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 636b72b..a50dbeb 100644 --- a/examples/flexjs/MDLExample/src/main/flex/App.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml @@ -33,11 +33,9 @@ limitations under the License. <js:Form action="#"> <!-- Buttons https://getmdl.io/components/index.html#buttons-section --> - <js:Container> - <js:beads> - <js:HorizontalLayout /> - </js:beads> - + <js:HContainer> + <mdl:Button/> + <!-- Fab button --> <mdl:Button mdlEffect="mdl-button--fab mdl-button--colored"> <i class="material-icons">add</i> @@ -54,23 +52,23 @@ limitations under the License. <mdl:Button mdlEffect="mdl-button--raised mdl-js-ripple-effect mdl-button--accent" text="BUTTON"/> <!-- Raised disabled button ... it seems we don't have "disabled" implemented yet--> <mdl:Button mdlEffect="mdl-button--raised" text="BUTTON"/> - </js:Container> + </js:HContainer> <!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section --> - <mdl:TextInput id="mdlti" change="mdlchk.text = mdlti.text" text="Text..."/> + <mdl:TextInput id="mdlti" change="mdlchk.text = mdlti.text" text="Text..."/> <mdl:TextInput mdlEffect="mdl-textfield--floating-label" text="Floating Label"/> <!-- Toggles :: https://getmdl.io/components/index.html#toggles-section --> - <mdl:CheckBox id="mdlchk" text="This Checks" selected="true"/> + <mdl:CheckBox id="mdlchk" text="This Checks" selected="true" mdlEffect="mdl-js-ripple-effect"/> <mdl:CheckBox id="mdlchk1" text="This is disabled at start" /> - <mdl:RadioButton groupName="g1" text="Black"/> + <mdl:RadioButton groupName="g1" text="Black" mdlEffect="mdl-js-ripple-effect"/> <mdl:RadioButton groupName="g1" text="White"/> <mdl:RadioButton groupName="g1" text="Red"/> </js:Form> - + </js:View> </js:initialView> </js:Application> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3d768403/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as index 61bcc20..7c17757 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as @@ -63,20 +63,19 @@ package org.apache.flex.mdl positioner.style.position = 'relative'; element.flexjs_wrapper = this; - element.className = 'mdl-button mdl-js-button'; - className = ""; - typeNames = "MDLButton"; - return element; + className = typeNames = "mdl-button mdl-js-button"; + + return element; } - public static const RAISED_EFFECT:String = "mdl-button--raised"; + /*public static const RAISED_EFFECT:String = "mdl-button--raised"; public static const FAB_EFFECT:String = "mdl-button--fab"; public static const MINI_FAB_EFFECT:String = "mdl-button--mini-fab"; public static const ICON_EFFECT:String = "mdl-button--icon"; public static const COLORED_EFFECT:String = "mdl-button--colored"; public static const PRIMARY_EFFECT:String = "mdl-button--primary"; public static const ACCENT_EFFECT:String = "mdl-button--accent"; - public static const RIPPLE_EFFECT:String = "mdl-js-ripple-effect"; + public static const RIPPLE_EFFECT:String = "mdl-js-ripple-effect";*/ private var _mdlEffect:String = ""; @@ -90,7 +89,7 @@ package org.apache.flex.mdl _mdlEffect = value; COMPILE::JS { - element.className = 'mdl-button mdl-js-button ' + _mdlEffect; + className = _mdlEffect; } } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3d768403/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as index 082b99f..60db161 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as @@ -53,6 +53,18 @@ package org.apache.flex.mdl { super(); } + + private var _mdlEffect:String = ""; + + public function get mdlEffect():String + { + return _mdlEffect; + } + + public function set mdlEffect(value:String):void + { + _mdlEffect = value; + } } COMPILE::JS @@ -74,7 +86,6 @@ package org.apache.flex.mdl override protected function createElement():WrappedHTMLElement { label = document.createElement('label') as HTMLLabelElement; - label.className = 'mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect'; element = label as WrappedHTMLElement; input = document.createElement('input') as HTMLInputElement; @@ -91,8 +102,6 @@ package org.apache.flex.mdl textNode = document.createTextNode('') as Text; checkbox.appendChild(textNode); - //label.className = 'CheckBox'; - typeNames = 'CheckBox'; positioner = element; positioner.style.position = 'relative'; @@ -100,6 +109,8 @@ package org.apache.flex.mdl (checkbox as WrappedHTMLElement).flexjs_wrapper = this; element.flexjs_wrapper = this; + className = typeNames = 'mdl-checkbox mdl-js-checkbox'; + return element; }; @@ -157,6 +168,21 @@ package org.apache.flex.mdl checkbox.className = 'checkbox-icon';*/ } + private var _mdlEffect:String = ""; + + public function get mdlEffect():String + { + return _mdlEffect; + } + + public function set mdlEffect(value:String):void + { + _mdlEffect = value; + COMPILE::JS + { + className = _mdlEffect; + } + } } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3d768403/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as index d7e9b2f..d19ce78 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as @@ -52,6 +52,18 @@ package org.apache.flex.mdl { super(); } + + private var _mdlEffect:String = ""; + + public function get mdlEffect():String + { + return _mdlEffect; + } + + public function set mdlEffect(value:String):void + { + _mdlEffect = value; + } } COMPILE::JS @@ -91,15 +103,12 @@ package org.apache.flex.mdl textNode = document.createTextNode('') as Text; label = document.createElement('label') as HTMLLabelElement; - label.className = "mdl-radio mdl-js-radio mdl-js-ripple-effect"; label.appendChild(input); label.appendChild(radio); radio.appendChild(textNode); label.style.position = 'relative'; element = label as WrappedHTMLElement; - //element.className = 'RadioButton'; - typeNames = 'RadioButton'; positioner = element; positioner.style.position = 'relative'; @@ -108,6 +117,8 @@ package org.apache.flex.mdl element.flexjs_wrapper = this; (textNode as WrappedHTMLElement).flexjs_wrapper = this; + className = typeNames = 'mdl-radio mdl-js-radio'; + return element; }; @@ -244,6 +255,22 @@ package org.apache.flex.mdl } } + private var _mdlEffect:String = ""; + + public function get mdlEffect():String + { + return _mdlEffect; + } + + public function set mdlEffect(value:String):void + { + _mdlEffect = value; + COMPILE::JS + { + className = _mdlEffect; + } + } + } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3d768403/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as index 48d71bf..b387b81 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as @@ -70,7 +70,6 @@ package org.apache.flex.mdl var textNode:Text; div = document.createElement('div') as HTMLDivElement; - div.className = "mdl-textfield mdl-js-textfield"; input = document.createElement('input') as HTMLInputElement; input.setAttribute('type', 'text'); @@ -86,9 +85,7 @@ package org.apache.flex.mdl div.appendChild(label); element = div as WrappedHTMLElement; - //element.className = 'TextInput'; - typeNames = 'TextInput'; - + //attach input handler to dispatch flexjs change event when user write in textinput //goog.events.listen(element, 'change', killChangeHandler); goog.events.listen(input, 'input', textChangeHandler); @@ -100,6 +97,8 @@ package org.apache.flex.mdl (label as WrappedHTMLElement).flexjs_wrapper = this; element.flexjs_wrapper = this; + className = typeNames = "mdl-textfield mdl-js-textfield"; + return element; } @@ -115,25 +114,24 @@ package org.apache.flex.mdl _mdlEffect = value; COMPILE::JS { - element.className = 'mdl-textfield mdl-js-textfield ' + _mdlEffect; + className = _mdlEffect; } } /** * @private - * @flexjsignorecoercion HTMLInputElement */ override public function set text(value:String):void { - COMPILE::SWF - { + //COMPILE::SWF + //{ //inSetter = true; //ITextModel(model).text = value; //inSetter = false; - } + //} COMPILE::JS { - _textNode.text = value; + _textNode.nodeValue = value; dispatchEvent(new Event('textChange')); } }
