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
The following commit(s) were added to refs/heads/feature/jewel-ui-set by this
push:
new 3e810dd -Fix textfield -Make dark/light themes depend on only one var
3e810dd is described below
commit 3e810dd18d7faf0c06fd9fb8ce4aa3eaae01bbe4
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].
