You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/03/23 07:57:34 UTC
[royale-asjs] 34/36: some work on textfield
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit ea3f27f580108566e2adf9046d91df5861da13f0
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Mar 21 23:15:07 2018 +0100
some work on textfield
---
.../src/main/royale/TextInputPlayGround.mxml | 12 ++++-
.../royale/org/apache/royale/jewel/TextField.as | 14 +++---
.../royale/jewel/supportClasses/TextFieldBase.as | 4 +-
.../JewelTheme/src/main/resources/defaults.css | 47 +++++++-----------
.../src/main/sass/components/_textfield.sass | 56 +++++++++-------------
5 files changed, 59 insertions(+), 74 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index 83535ff..332b444 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -35,7 +35,17 @@ limitations under the License.
<html:H4 text="Jewel TextField"/>
- <j:TextField text="Text Input" width="120" height="40"/>
+ <js:Group>
+ <js:beads>
+ <j:HorizontalLayoutWithPaddingAndGap gap="10"/>
+ </js:beads>
+ <j:TextField>
+ <j:beads>
+ <js:TextPromptBead prompt="A Textfield..."/>
+ </j:beads>
+ </j:TextField>
+ <j:TextButton text="Send" primary="true"/>
+ </js:Group>
<html:H4 text="Jewel CheckBox"/>
<j:CheckBox text="label"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
index c3e18d5..fa795ef 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
@@ -89,23 +89,23 @@ package org.apache.royale.jewel
input = addElementToWrapper(this,'input') as HTMLInputElement;
input.setAttribute('type', 'text');
- //input.className = "vTextField--input";
+ input.className = "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";
+ //label = document.createElement('label') as HTMLLabelElement;
+ //label.className = "jewel-textfield-label";
- textNode = document.createTextNode('') as Text;
- label.appendChild(textNode);
+ //textNode = document.createTextNode('') as Text;
+ //label.appendChild(textNode);
div.appendChild(input);
- div.appendChild(label);
+ //div.appendChild(label);
positioner = div as WrappedHTMLElement;
- (label as WrappedHTMLElement).royale_wrapper = this;
+ //(label as WrappedHTMLElement).royale_wrapper = this;
_positioner.royale_wrapper = this;
return element;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
index 5cb5924..06a8d63 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
@@ -146,8 +146,8 @@ package org.apache.royale.jewel.supportClasses
COMPILE::JS
{
- positioner.classList.toggle("is-invalid", _isInvalid);
- typeNames = positioner.className;
+ //positioner.classList.toggle("is-invalid", _isInvalid);
+ //typeNames = positioner.className;
}
}
}
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 3b93a57..c4286da 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -367,41 +367,26 @@ span {
.jewel.textfield {
position: relative;
- display: inline-block;
- box-sizing: border-box;
- width: 300px;
- max-width: 100%;
- margin: 0;
-}
-.jewel.textfield > input {
- font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: normal;
- border: none;
- border-bottom: 2px solid;
- border-bottom-color: #ff0000;
- display: block;
- margin: 0;
- padding: 4 0;
- width: 100px;
- background: transparent;
- text-align: left;
- color: inherit;
- outline: none;
+ display: inline-flex;
}
-.jewel.textfield > label {
- bottom: 0;
- color: #ff0000;
- font-size: 13px;
- left: 0;
- right: 0;
- pointer-events: none;
- position: absolute;
- display: block;
- width: 100%;
- overflow: hidden;
- white-space: nowrap;
+.jewel.textfield .input {
+ margin: 0em;
+ max-width: 100%;
+ flex: 1 0 auto;
+ outline: none;
+ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
text-align: left;
+ line-height: 1.2em;
+ font-family: "Lato", sans-serif;
+ font-size: 14px;
+ padding: 0.67em 1em;
+ background: #ffffff;
+ border: 1px solid rgba(34, 36, 38, 0.15);
+ color: rgba(0, 0, 0, 0.87);
+ border-radius: 3px;
+ box-shadow: none;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
index 3739212..0a606f8 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
@@ -20,43 +20,33 @@
// Jewel Textfield
.jewel.textfield
position: relative
- display: inline-block
- box-sizing: border-box
- width: 300px
- max-width: 100%
- margin: 0
+ font:
+ //family: $font-stack
+ size: $font-size
+ weight: normal
+ display: inline-flex
+
+ .input
+ margin: 0em
+ max-width: 100%
+ flex: 1 0 auto
+ outline: none
+ -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
+ text-align: left
+ line-height: 1.2em
- > input
font:
- family: $font-stack
+ family: $font-stack
size: $font-size
- weight: normal
+ padding: .67em 1em
- border: none
- border-bottom: 2px solid
- border-bottom-color: #ff0000
- display: block
- margin: 0
- padding: 4 0
- width: 100px
- background: transparent
- text-align: left
- color: inherit
- outline: none
-
- > label
- bottom: 0
- color: #ff0000
- font-size: 13px
- left: 0
- right: 0
- pointer-events: none
- position: absolute
- display: block
- width: 100%
- overflow: hidden
- white-space: nowrap
- text-align: left
+ background: #ffffff
+ border: 1px solid rgba(34, 36, 38, .15)
+ color: rgba(0, 0, 0, .87)
+ border-radius: 3px
+ //transition: transition
+
+ box-shadow: none
// padding: 5px;
// border: solid 1px #666666;
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.