This is an automated email from the ASF dual-hosted git repository. carlosrovira pushed a commit to branch develop in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push: new f31c819 Jewel TextArea f31c819 is described below commit f31c819ffcb87eab03751be41a118956d876509c Author: Carlos Rovira <carlosrov...@apache.org> AuthorDate: Thu Jun 14 15:30:03 2018 +0200 Jewel TextArea --- .../src/main/royale/TextInputPlayGround.mxml | 17 +++ .../projects/Jewel/src/main/resources/defaults.css | 26 ++++ .../Jewel/src/main/resources/jewel-manifest.xml | 1 + .../main/royale/org/apache/royale/jewel/Button.as | 2 +- .../royale/org/apache/royale/jewel/TextArea.as | 163 +++++++++++++++++++++ .../Jewel/src/main/sass/components/_textinput.sass | 41 +++++- .../JewelTheme/src/main/resources/defaults.css | 27 ++++ .../main/sass/components-primary/_textinput.sass | 73 ++++++++- 8 files changed, 335 insertions(+), 15 deletions(-) diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml index 898d829..7806a89 100644 --- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml +++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml @@ -62,4 +62,21 @@ limitations under the License. </j:beads> </j:TextInput> + <html:H3 text="Jewel TextArea"/> + + <j:TextArea text="A TextArea"/> + + <j:TextArea> + <j:beads> + <j:TextPrompt prompt="With prompt..."/> + </j:beads> + </j:TextArea> + + <j:TextArea text="A TextArea"> + <j:beads> + <j:TextPrompt prompt="Disabled with prompt..."/> + <j:Disabled/> + </j:beads> + </j:TextArea> + </j:Card> diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css index 6dfc62c..bc80578 100644 --- a/frameworks/projects/Jewel/src/main/resources/defaults.css +++ b/frameworks/projects/Jewel/src/main/resources/defaults.css @@ -602,6 +602,32 @@ j|TextInput { IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel"); } +.jewel.textarea { + position: relative; + display: inline-flex; +} +.jewel.textarea textarea { + -webkit-appearance: none; + -moz-appearance: none; + -o-appearance: none; + -ms-appearance: none; + appearance: none; + margin: 0; + padding: 0.72em 1.12em; + max-width: 100%; + flex: 1 0 auto; + outline: none; + text-align: left; + line-height: normal !important; +} +.jewel.textarea textarea[disabled] { + cursor: unset; +} + +j|TextArea { + IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel"); +} + .jewel.titlebar { background-color: transparent; padding: 0px; diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml index ec87ec1..4f04981 100644 --- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml +++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml @@ -33,6 +33,7 @@ <component id="Button" class="org.apache.royale.jewel.Button"/> <component id="Label" class="org.apache.royale.jewel.Label"/> <component id="TextInput" class="org.apache.royale.jewel.TextInput"/> + <component id="TextArea" class="org.apache.royale.jewel.TextArea"/> <component id="Slider" class="org.apache.royale.jewel.Slider"/> <component id="RadioButton" class="org.apache.royale.jewel.RadioButton"/> <component id="CheckBox" class="org.apache.royale.jewel.CheckBox"/> diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as index b6540d2..cb10a98 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as @@ -271,7 +271,7 @@ package org.apache.royale.jewel } } - private var _size:String = false; + private var _size:String; /** * A size selector. diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextArea.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextArea.as new file mode 100644 index 0000000..cebdddf --- /dev/null +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextArea.as @@ -0,0 +1,163 @@ +// +// 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.jewel +{ + import org.apache.royale.jewel.supportClasses.TextInputBase; + import org.apache.royale.utils.ClassSelectorList; + + COMPILE::JS + { + import goog.events; + import org.apache.royale.core.WrappedHTMLElement; + import org.apache.royale.html.util.addElementToWrapper; + } + + /** + * The TextArea 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.3 + */ + public class TextArea extends TextInputBase + { + /** + * Constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.9.3 + */ + public function TextArea() + { + super(); + + typeNames = "jewel textarea"; + } + + private var _rows:int = 2; + /** + * The number of rows in the textarea. Defaults to 2 + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.9.3 + */ + public function get rows():int + { + return _rows; + } + /** + * @private + */ + public function set rows(value:int):void + { + _rows = value; + + COMPILE::JS + { + input.setAttribute('rows', _rows); + } + } + + private var _maxrows:int = 0; + /** + * The max number of rows in the textarea. + * + * @default 0 + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.9.3 + */ + public function get maxrows():int + { + return _maxrows; + } + /** + * @private + */ + public function set maxrows(value:int):void + { + _maxrows = value; + + COMPILE::JS + { + input.setAttribute('maxrows', _maxrows); + } + } + + COMPILE::JS + private var _positioner:WrappedHTMLElement; + + COMPILE::JS + override public function get positioner():WrappedHTMLElement + { + return _positioner; + } + + COMPILE::JS + 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 + { + var div:HTMLDivElement = document.createElement('div') as HTMLDivElement; + + input = addElementToWrapper(this,'textarea') as HTMLInputElement; + input.setAttribute('type', 'text'); + input.setAttribute('rows', rows); + //input.setAttribute('maxrows', maxrows); + + //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 = "jewel-textinput-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/Jewel/src/main/sass/components/_textinput.sass b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass index 24fb4e3..71968c6 100644 --- a/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass +++ b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass @@ -17,15 +17,11 @@ // //////////////////////////////////////////////////////////////////////////////// -// Jewel textinput +// Jewel TextInput -// textinput variables +// TextInput variables $textinput-margin: 0 !default $textinput-padding: .72em 1.12em !default -// $textinput-min-height: 34px !default -// $textinput-min-width: 74px !default - -$textinput-border-radius: 3px .jewel.textinput position: relative @@ -53,3 +49,36 @@ j|TextInput //IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView") //IBeadController: ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController") + + +// Jewel TextArea + +// TextArea variables +$textarea-margin: 0 !default +$textarea-padding: .72em 1.12em !default + +.jewel.textarea + position: relative + display: inline-flex + + textarea + +appear(none) + margin: $textarea-margin + padding: $textarea-padding + + max-width: 100% + + flex: 1 0 auto + outline: none + + text: + align: left + line-height: normal !important + + &[disabled] + cursor: unset + +j|TextArea + IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel") + //IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView") + //IBeadController: ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController") diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css index 03b32fa..6e60965 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css +++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css @@ -434,6 +434,33 @@ j|Card { color: silver; } +.jewel.textarea textarea { + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: normal; + color: #808080; + background: linear-gradient(white, #f3f3f3); + border: 1px solid #b3b3b3; + border-radius: 3px; + transition-duration: 0.3s; + transition-timing-function: easein; +} +.jewel.textarea textarea:focus { + border: 1px solid #0f88d1; +} +.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder { + color: #a6a6a6; +} +.jewel.textarea textarea[disabled] { + background: #f3f3f3; + border: 1px solid #d9d9d9; + box-shadow: none; + color: silver; +} +.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder { + color: silver; +} + .jewel.button.secondary { background: linear-gradient(#f16c42, #ed4812); border: 1px solid #be390e; diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass index 11c808b..4e52ae1 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass @@ -17,20 +17,14 @@ // //////////////////////////////////////////////////////////////////////////////// -// Jewel textinput - -// textinput variables -// $textinput-margin: 0 !default -// $textinput-padding: .67em 1em !default -// $textinput-min-height: 34px !default -// $textinput-min-width: 74px !default +// Jewel TextInput +// TextInput variables $textinput-border-radius: 3px =textinput-theme($textinput-text-color) input - // -webkit-tap-highlight-color: rgba(255, 255, 255, 0) font: family: $font-stack size: $font-size @@ -89,3 +83,66 @@ $textinput-border-radius: 3px // +textinput-theme($primary-color, $font-dark-color) // @else // +textinput-theme($primary-color, $font-light-color) + + + +// Jewel TextArea + +// TextArea variables +$textarea-border-radius: 3px + +=textarea-theme($textarea-text-color) + + textarea + font: + family: $font-stack + size: $font-size + weight: normal + + color: $textarea-text-color + + @if $flat + background: $default-color + border: 0px solid + @else + background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%)) + border: 1px solid darken($default-color, 15%) + //box-shadow: none + border-radius: $textarea-border-radius + + @if $transitions-enable + transition: + duration: $transition-duration + timing-function: $transition-timing + + &:focus + @if $flat + background: lighten($primary-color, 25%) + @else + border: 1px solid darken($primary-color, 15%) + + //&:hover + // padding: 5px; + // background-color: #DFDFDF; + + &::placeholder, &:-ms-input-placeholder + color: lighten($textarea-text-color, 15%) + + &[disabled] + @if $flat + background: $disabled-color + border: 0px solid + @else + background: $disabled-color + border: 1px solid $disabled-border-color// .094em + box-shadow: none + color: $disabled-font-color + + &::placeholder, &:-ms-input-placeholder + color: $disabled-font-color + +.jewel.textarea + @if $dark + +textarea-theme($font-dark-color) + @else + +textarea-theme($font-light-color) \ No newline at end of file -- To stop receiving notification emails like this one, please contact carlosrov...@apache.org.