This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/themes
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/feature/themes by this push:
new df9a326 prepare textfield html structure for styles
df9a326 is described below
commit df9a3262172adfa7be63e970105885794a2f70b2
Author: Carlos Rovira <[email protected]>
AuthorDate: Sun Feb 11 17:10:29 2018 +0100
prepare textfield html structure for styles
---
.../src/main/royale/TextInputPlayGround.mxml | 2 +-
.../projects/Vivid/src/main/resources/defaults.css | 49 ++++++-
.../Vivid/src/main/resources/vivid-manifest.xml | 2 +-
.../royale/org/apache/royale/vivid/TextField.as | 115 +++++++++++++++
.../royale/org/apache/royale/vivid/TextInput.as | 71 ----------
.../royale/vivid/supportClasses/ITextField.as | 68 +++++++++
.../royale/vivid/supportClasses/TextFieldBase.as | 154 +++++++++++++++++++++
7 files changed, 382 insertions(+), 79 deletions(-)
diff --git
a/examples/royale/VividExample/src/main/royale/TextInputPlayGround.mxml
b/examples/royale/VividExample/src/main/royale/TextInputPlayGround.mxml
index f8397cc..eced5aa 100644
--- a/examples/royale/VividExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/VividExample/src/main/royale/TextInputPlayGround.mxml
@@ -23,6 +23,6 @@ limitations under the License.
- <v:TextInput text="Text Input" width="120" height="40"/>
+ <v:TextField text="Text Input" width="120" height="40"/>
</js:Group>
diff --git a/frameworks/projects/Vivid/src/main/resources/defaults.css
b/frameworks/projects/Vivid/src/main/resources/defaults.css
index fc0ee8c..49e516c 100644
--- a/frameworks/projects/Vivid/src/main/resources/defaults.css
+++ b/frameworks/projects/Vivid/src/main/resources/defaults.css
@@ -48,14 +48,51 @@ TextButton:active {
color: #FFFFFF;
}
-TextInput
-{
+/*
+* Vivid TextField
+*/
+.vTextfield {
+ IBeadModel:
ClassReference("org.apache.royale.html.beads.models.TextModel");
+ /*IBeadView:
ClassReference("org.apache.royale.html.beads.TextInputWithBorderView");
+ IBeadController:
ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController");*/
+
+ position: relative;
+ display: inline-block;
+ box-sizing: border-box;
+ width: 300px;
+ max-width: 100%;
+ margin: 0;
+}
+
+.vTextfield--input {
+ border: none;
+ border-bottom: 1px solid;
+ border-bottom-color: rgba(0, 0, 0, 0.12);
+ display: block;
+ font-size: 16px;
font-family: 'Lato', sans-serif;
+ margin: 0;
+ padding: 4 0;
+ width: 100px;
+ background: transparent;
+ text-align: left;
+ color: inherit;
+ outline: none;
+}
+
+.vTextfield--label {
+ bottom: 0;
+ color: rgba(0, 0, 0, 0.26);
font-size: 13px;
- border: 1px solid #000;
- border-radius: 0px;
- padding: 0px;
- margin: 0px;
+ left: 0;
+ right: 0;
+ pointer-events: none;
+ position: absolute;
+ display: block;
+ width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-align: left;
}
/*
diff --git a/frameworks/projects/Vivid/src/main/resources/vivid-manifest.xml
b/frameworks/projects/Vivid/src/main/resources/vivid-manifest.xml
index 57d7e1c..4c24222 100644
--- a/frameworks/projects/Vivid/src/main/resources/vivid-manifest.xml
+++ b/frameworks/projects/Vivid/src/main/resources/vivid-manifest.xml
@@ -23,7 +23,7 @@
<component id="Application" class="org.apache.royale.vivid.Application"/>
<component id="TextButton" class="org.apache.royale.vivid.TextButton"/>
- <component id="TextInput" class="org.apache.royale.vivid.TextInput"/>
+ <component id="TextField" class="org.apache.royale.vivid.TextField"/>
<component id="Slider" class="org.apache.royale.vivid.Slider"/>
</componentPackage>
diff --git
a/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/TextField.as
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/TextField.as
new file mode 100644
index 0000000..fc28e66
--- /dev/null
+++
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/TextField.as
@@ -0,0 +1,115 @@
+//
+// 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.royale.vivid
+{
+ import org.apache.royale.vivid.supportClasses.TextFieldBase;
+
+ COMPILE::JS
+ {
+ import goog.events;
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The TextField class implements the basic control for
+ * single-line text input.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public class TextField extends TextFieldBase
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function TextField()
+ {
+ super();
+ }
+
+ COMPILE::JS
+ private var _positioner:WrappedHTMLElement;
+
+ COMPILE::JS
+ /**
+ * The HTMLElement used to position the component.
+ */
+ override public function get positioner():WrappedHTMLElement
+ {
+ return _positioner;
+ }
+
+ COMPILE::JS
+ /**
+ * @private
+ */
+ override public function set positioner(value:WrappedHTMLElement):void
+ {
+ _positioner = value;
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion HTMLDivElement
+ * @royaleignorecoercion HTMLInputElement
+ * @royaleignorecoercion HTMLLabelElement
+ * @royaleignorecoercion Text
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ typeNames = "vTextfield";
+
+ var div:HTMLDivElement = document.createElement('div') as
HTMLDivElement;
+ div.className = typeNames;
+
+ input = addElementToWrapper(this,'input') as HTMLInputElement;
+ input.setAttribute('type', 'text');
+ input.className = "vTextfield--input";
+
+ //attach input handler to dispatch royale change event when user
write in textinput
+ //goog.events.listen(element, 'change', killChangeHandler);
+ goog.events.listen(input, 'input', textChangeHandler);
+
+ label = document.createElement('label') as HTMLLabelElement;
+ label.className = "vTextfield--label";
+
+ textNode = document.createTextNode('') as Text;
+ label.appendChild(textNode);
+
+ div.appendChild(input);
+ div.appendChild(label);
+
+ positioner = div as WrappedHTMLElement;
+ (label as WrappedHTMLElement).royale_wrapper = this;
+ _positioner.royale_wrapper = this;
+
+ return element;
+ }
+
+ }
+}
diff --git
a/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/TextInput.as
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/TextInput.as
deleted file mode 100644
index 0143608..0000000
---
a/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/TextInput.as
+++ /dev/null
@@ -1,71 +0,0 @@
-//
-// 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.royale.vivid
-{
- import org.apache.royale.html.TextInput;
-
- COMPILE::JS
- {
- import org.apache.royale.core.WrappedHTMLElement;
- }
-
- /**
- * The TextInput class implements the basic control for
- * single-line text input.
- *
- * @toplevel
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public class TextInput extends org.apache.royale.html.TextInput
- {
- /**
- * Constructor.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public function TextInput()
- {
- super();
- }
-
- /**
- * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
- */
- COMPILE::JS
- override protected function createElement():WrappedHTMLElement
- {
- return super.createElement();
- /*addElementToWrapper(this,'input');
- element.setAttribute('type', 'text');
- element.className = 'TextInput';
- typeNames = 'TextInput';
-
- //attach input handler to dispatch royale change event when user
write in textinput
- //goog.events.listen(element, 'change', killChangeHandler);
- goog.events.listen(element, 'input', textChangeHandler);
- return element;*/
- }
-
- }
-}
diff --git
a/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/supportClasses/ITextField.as
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/supportClasses/ITextField.as
new file mode 100644
index 0000000..100b523
--- /dev/null
+++
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/supportClasses/ITextField.as
@@ -0,0 +1,68 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.royale.vivid.supportClasses
+{
+ /**
+ * ITextField is the interface that all text vivid classes.
+ * It's used mainly in
org.apache.royale.vivid.supportClasses.TextFieldBase
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 9.2
+ */
+ public interface ITextField
+ {
+ COMPILE::JS
+ {
+ /**
+ * the textNode
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ function get textNode():Text;
+ function set textNode(value:Text):void;
+
+ /**
+ * the input
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ function get input():HTMLInputElement;
+ function set input(value:HTMLInputElement):void;
+
+ /**
+ * the label
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ function get label():HTMLLabelElement;
+ function set label(value:HTMLLabelElement):void;
+ }
+ }
+}
diff --git
a/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/supportClasses/TextFieldBase.as
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/supportClasses/TextFieldBase.as
new file mode 100644
index 0000000..868b6be
--- /dev/null
+++
b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/supportClasses/TextFieldBase.as
@@ -0,0 +1,154 @@
+//
+// 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.royale.vivid.supportClasses
+{
+ import org.apache.royale.events.Event;
+ import org.apache.royale.html.TextInput;
+
+ import org.apache.royale.vivid.supportClasses.ITextField;
+
+ COMPILE::JS
+ {
+ import goog.events;
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ /**
+ * The TextFieldBase class is the base class for TextField and TextArea
Vivid controls
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public class TextFieldBase extends TextInput implements ITextField
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function TextFieldBase()
+ {
+ super();
+ }
+
+ COMPILE::JS
+ {
+ private var _textNode:Text;
+ /**
+ * @copy
org.apache.royale.vivid.supportClasses.ITextField#textNode
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function get textNode():Text
+ {
+ return _textNode;
+ }
+
+ public function set textNode(value:Text):void
+ {
+ _textNode = value;
+ }
+
+ private var _input:HTMLInputElement;
+ /**
+ * @copy org.apache.royale.vivid.supportClasses.ITextField#input
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function get input():HTMLInputElement
+ {
+ return _input;
+ }
+
+ public function set input(value:HTMLInputElement):void
+ {
+ _input = value;
+ }
+
+ private var _label:HTMLLabelElement;
+ /**
+ * @copy org.apache.royale.vivid.supportClasses.ITextField#label
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function get label():HTMLLabelElement
+ {
+ return _label;
+ }
+
+ public function set label(value:HTMLLabelElement):void
+ {
+ _label = value;
+ }
+ }
+
+ COMPILE::JS
+ /**
+ * override UIBase to affect positioner instead of element
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ override protected function setClassName(value:String):void
+ {
+ positioner.className = value;
+ }
+
+ private var _isInvalid:Boolean = false;
+ /**
+ * A boolean flag to activate "is-invalid" effect selector.
+ * Defines the textfield as invalid on initial load.
+ * Optional
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function get isInvalid():Boolean
+ {
+ return _isInvalid;
+ }
+ public function set isInvalid(value:Boolean):void
+ {
+ _isInvalid = value;
+
+ COMPILE::JS
+ {
+ positioner.classList.toggle("is-invalid", _isInvalid);
+ typeNames = positioner.className;
+ }
+ }
+ }
+}
--
To stop receiving notification emails like this one, please contact
[email protected].
