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 75b52c1a01dcee4ddf932dc16f461ff2affbd083 Author: Carlos Rovira <[email protected]> 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 [email protected].
