You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ca...@apache.org on 2016/10/24 18:19:12 UTC
git commit: [flex-asjs] [refs/heads/feature/mdl] - Remove css
defaults fro HTML.swc and some update to actual components implementation
fixing styles and behaviors
Repository: flex-asjs
Updated Branches:
refs/heads/feature/mdl fe5707a4f -> f55622378
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/f5562237
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/f5562237
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/f5562237
Branch: refs/heads/feature/mdl
Commit: f55622378159697e4fd175cbba06e0936a8b03bc
Parents: fe5707a
Author: Carlos Rovira <ca...@apache.org>
Authored: Mon Oct 24 20:19:06 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Mon Oct 24 20:19:06 2016 +0200
----------------------------------------------------------------------
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/f5562237/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/f5562237/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/f5562237/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/f5562237/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/f5562237/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/f5562237/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'));
}
}