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.
