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
commit bf3355e32f6346e7e66334bd207d70f54994fe02 Author: Carlos Rovira <carlosrov...@apache.org> 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 carlosrov...@apache.org.