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 df8c93fec9718f6209cb8d9c5fce9449f65058da Author: Carlos Rovira <[email protected]> AuthorDate: Sat Mar 24 10:07:37 2018 +0100 -Fix textfield -Make dark/light themes depend on only one var --- .../royale/org/apache/royale/jewel/TextField.as | 17 ++++++++- .../JewelTheme/src/main/resources/defaults.css | 43 +++++++++++----------- .../JewelTheme/src/main/sass/_variables.sass | 11 +++++- .../src/main/sass/components/_textfield.sass | 18 +++++---- 4 files changed, 58 insertions(+), 31 deletions(-) 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 859bf62..1c12711 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 @@ -53,6 +53,21 @@ package org.apache.royale.jewel typeNames = "jewel textfield"; } + 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 @@ -84,7 +99,7 @@ package org.apache.royale.jewel positioner = div as WrappedHTMLElement; //(label as WrappedHTMLElement).royale_wrapper = this; - positioner.royale_wrapper = this; + _positioner.royale_wrapper = this; return element; } diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css index bf22702..8352a0f 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css +++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css @@ -21,7 +21,7 @@ -webkit-box-sizing: border-box; box-sizing: border-box; font-family: "Lato", sans-serif; - color: #808080; + color: #FFFFFF; } .royale { @@ -56,18 +56,18 @@ span { padding: 10px 16px; min-width: 74px; min-height: 34px; - border: 1px solid #b3b3b3; - background: linear-gradient(#e6e6e6, #cccccc); - box-shadow: inset 0 1px 0 white; + border: 1px solid #404040; + background: linear-gradient(#737373, #595959); + box-shadow: inset 0 1px 0 #999999; border-radius: 3px; } .jewel.button:hover { - border: 1px solid #a6a6a6; - background: linear-gradient(#d9d9d9, silver); + border: 1px solid #333333; + background: linear-gradient(#666666, #4d4d4d); } .jewel.button:active { - border: 1px solid #8d8d8d; - background: linear-gradient(silver, #a6a6a6); + border: 1px solid #1a1a1a; + background: linear-gradient(#4d4d4d, #333333); box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5); } .jewel.button:focus { @@ -234,24 +234,25 @@ span { padding: 10px 16px; min-width: 74px; min-height: 34px; - border: 1px solid #b3b3b3; - background: linear-gradient(#e6e6e6, #cccccc); - box-shadow: inset 0 1px 0 white; + border: 1px solid #404040; + background: linear-gradient(#737373, #595959); + box-shadow: inset 0 1px 0 #999999; border-radius: 3px; font-family: "Lato", sans-serif; font-size: 14px; font-weight: bold; - color: #808080; + color: #FFFFFF; text-transform: uppercase; text-decoration: none; + shadow: 0 1px 0 #d9d9d9; } .jewel.textbutton:hover { - border: 1px solid #a6a6a6; - background: linear-gradient(#d9d9d9, silver); + border: 1px solid #333333; + background: linear-gradient(#666666, #4d4d4d); } .jewel.textbutton:active { - border: 1px solid #8d8d8d; - background: linear-gradient(silver, #a6a6a6); + border: 1px solid #1a1a1a; + background: linear-gradient(#4d4d4d, #333333); box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5); } .jewel.textbutton:focus { @@ -406,9 +407,9 @@ span { font-family: "Lato", sans-serif; font-size: 14px; font-weight: normal; - background: linear-gradient(white, #f3f3f3); - border: 1px solid #b3b3b3; - color: #808080; + color: #FFFFFF; + background: linear-gradient(#8c8c8c, gray); + border: 1px solid #404040; border-radius: 3px; box-shadow: none; } @@ -429,9 +430,9 @@ span { font-family: "Lato", sans-serif; font-size: 14px; font-weight: normal; - background: linear-gradient(white, #f3f3f3); - border: 1px solid #0f88d1; color: #FFFFFF; + background: linear-gradient(#8c8c8c, gray); + border: 1px solid #0f88d1; border-radius: 3px; box-shadow: none; } diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass index 1d5a14f..974be28 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass @@ -41,6 +41,7 @@ $font-dark-color: #FFFFFF //Theme Style (Flat or Gradient) $flat: false +$dark: false $transitions-enable: false $transition-duration: .3s $transition-timing: easein @@ -50,12 +51,18 @@ $font-stack: 'Lato', sans-serif $font-size: 14px//0.75rem // VARIABLES -$default-color: $light-color // change this from light to dark +$default-color: $light-color +@if $dark + $default-color: $dark-color + $primary-color: $blue $secondary-color: $topaz $emphasized-color: $green -$default-font-color: $font-light-color // change this from light to dark +$default-font-color: $font-light-color +@if $dark + $default-font-color: $font-dark-color + $disabled-color: #F9F9F9 // maybe make it dependent of theme colors diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass index 81feb03..15c2744 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass @@ -28,7 +28,7 @@ $textfield-min-width: 74px !default $textfield-border-radius: 3px -=textfield-theme($textfield-color, $text-color) +=textfield-theme($textfield-color, $textfield-text-color) position: relative display: inline-flex @@ -49,10 +49,10 @@ $textfield-border-radius: 3px family: $font-stack size: $font-size weight: normal - + color: $textfield-text-color + background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%)) border: 1px solid darken($textfield-color, 15%) - color: $text-color border-radius: $textfield-border-radius //transition: transition @@ -62,10 +62,14 @@ $textfield-border-radius: 3px // padding: 5px; // background-color: #DFDFDF; - .jewel.textfield - +textfield-theme($default-color, $default-font-color) + @if $dark + +textfield-theme($default-color, $font-dark-color) + @else + +textfield-theme($default-color, $font-light-color) .jewel.textfield.primary - +textfield-theme($primary-color, $font-theme-color) - + @if $dark + +textfield-theme($primary-color, $font-dark-color) + @else + +textfield-theme($primary-color, $font-light-color) -- To stop receiving notification emails like this one, please contact [email protected].
