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.

Reply via email to