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/09/01 11:20:12 UTC
[royale-asjs] branch develop updated: refactor Validator styles to
JewelTheme
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 7f7fe24 refactor Validator styles to JewelTheme
7f7fe24 is described below
commit 7f7fe2426cc4abe6594ef47c10b749bec683f947
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Sep 1 13:20:06 2018 +0200
refactor Validator styles to JewelTheme
---
.../src/main/royale/TextInputPlayGround.mxml | 2 +-
.../projects/Jewel/src/main/resources/defaults.css | 48 ++++++----------------
.../royale/jewel/beads/controls/Validator.as | 2 +-
.../Jewel/src/main/sass/components/_textinput.sass | 32 +--------------
.../Jewel/src/main/sass/components/_tooltip.sass} | 33 +++++++--------
.../projects/Jewel/src/main/sass/defaults.sass | 1 +
.../JewelTheme/src/main/resources/defaults.css | 33 ++++++++++++---
.../themes/JewelTheme/src/main/sass/_colors.sass | 4 +-
.../main/sass/components-primary/_textinput.sass | 3 ++
.../_tooltip.sass} | 39 +++++++++---------
.../themes/JewelTheme/src/main/sass/defaults.sass | 3 +-
11 files changed, 87 insertions(+), 113 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index fd3d78f..0c3b350 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -249,7 +249,7 @@ limitations under the License.
public var randomCode:String = StringPadder.pad(String(Math.round(Math.random() * 10000)), "0", 5);
public function customValidate(host:TextInput):String {
- return (host.text == randomCode) ? "" : "The entered code doesn't match" + randomCode;
+ return (host.text == randomCode) ? "" : "The entered code doesn't match " + randomCode;
}
public function doSummit(event:Event):void {
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 8d50cfc..ba0581b 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3223,41 +3223,6 @@ j|TextArea {
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel");
}
-.jewel.textinput.errorBorder {
- border: 1px #EC1C24 solid;
-}
-
-.jewel.errorTip {
- padding: 6px;
- box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
- color: #fff;
- background: #EC1C24;
- box-sizing: border-box;
- animation: slide-up 0.4s ease;
- z-index: 1;
- margin-top: -31px !important;
-}
-
-.jewel.errorTip::before {
- border: solid 8px transparent;
- top: 100%;
- left: 8px;
- border-top-color: #EC1C24;
- position: absolute;
- content: "";
- margin-top: 0px;
-}
-
-@keyframes slide-up {
- 0% {
- opacity: 0;
- transform: translateY(20px);
- }
- 100% {
- opacity: 1;
- transform: translateY(0);
- }
-}
.jewel.titlebar {
background-color: transparent;
padding: 0px;
@@ -3292,6 +3257,19 @@ j|TitleBar {
cursor: unset;
}
+.jewel.errorTip {
+ padding: 6px;
+ z-index: 5;
+ margin-top: -31px !important;
+}
+.jewel.errorTip::before {
+ top: 100%;
+ left: 8px;
+ position: absolute;
+ content: "";
+ margin-top: 0px;
+}
+
.jewel.topappbar {
display: inline-flex;
flex: 1 1 auto;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/Validator.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/Validator.as
index 800fa0e..3b8f810 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/Validator.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/Validator.as
@@ -187,7 +187,7 @@ package org.apache.royale.jewel.beads.controls
return true;
}
- /**
+ /**
* Sets the errortip y relative position to one of
* LEFT, MIDDLE or RIGHT.
*
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
index ae49d51..20f20a7 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
@@ -71,6 +71,7 @@ $textinput-padding-horizontal: 1.12em !default
left: auto
right: .45em
+
j|TextInput
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel")
//IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView")
@@ -109,34 +110,3 @@ 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")
-
-.jewel.textinput.errorBorder
- input
- border: 1px #EC1C24 solid
-
-.jewel.errorTip
- padding: 6px
- box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4)
- color: #fff
- background: #EC1C24
- box-sizing: border-box
- animation: slide-up 0.4s ease
- z-index: 1
- margin-top: -31px !important
-
-.jewel.errorTip::before
- border: solid 8px transparent
- top: 100%
- left: 8px
- border-top-color: #EC1C24
- position: absolute
- content: ""
- margin-top: 0px
-
-@keyframes slide-up
- 0%
- opacity: 0
- transform: translateY(20px)
- 100%
- opacity: 1
- transform: translateY(0)
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_colors.sass b/frameworks/projects/Jewel/src/main/sass/components/_tooltip.sass
similarity index 70%
copy from frameworks/themes/JewelTheme/src/main/sass/_colors.sass
copy to frameworks/projects/Jewel/src/main/sass/components/_tooltip.sass
index 1348380..dd81997 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_colors.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_tooltip.sass
@@ -17,25 +17,20 @@
//
////////////////////////////////////////////////////////////////////////////////
-// CONSTANTS
-// 12 Color Themes (this will go to one separate project each one)
-$red: #EC1C24
-$amethyst: #C92CC6
-$violet: #662C90
-$sapphire: #2C74BE
-$blue: #3CADF1
-$turquoise: #29A89F
-$green: #3AB549
-$emerald: #8CC63C
-$yellow: #E2D70B
-$sunflower: #F8B13F
-$orange: #F7941D
-$topaz: #EF5A2A
+// Jewel ToolTip
-$font-theme-color: #FFFFFF
+// ToolTip variables
-$light-color: #d9d9d9
-$font-light-color: #808080
-$dark-color: #595959
-$font-dark-color: #FFFFFF
\ No newline at end of file
+.jewel
+ &.errorTip
+ padding: 6px
+ z-index: 5
+ margin-top: -31px !important
+
+ &::before
+ top: 100%
+ left: 8px
+ position: absolute
+ content: ""
+ margin-top: 0px
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index 8862eb0..e17e52a 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -49,6 +49,7 @@
@import "components/textinput"
@import "components/titlebar"
@import "components/togglebutton"
+@import "components/tooltip"
@import "components/topappbar"
@import "components/applicationmaincontent"
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 7dcafb0..c8cc2df 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -725,6 +725,9 @@ a:active {
.jewel.textinput input[disabled] + i {
color: silver;
}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
.jewel.textarea {
font-weight: 400;
@@ -756,6 +759,31 @@ a:active {
color: silver;
}
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
.jewel.topappbar .topBarAppHeader {
background: linear-gradient(#54b7f3, #24a3ef);
border-top: 1px solid #83cbf6;
@@ -798,11 +826,6 @@ a:active {
padding-right: 0;
}
-.jewel.togglebutton .fonticon {
- margin-left: 0px;
- margin-right: 8px;
-}
-
.jewel.button.secondary {
background: linear-gradient(#f16c42, #ed4812);
border: 1px solid #be390e;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_colors.sass b/frameworks/themes/JewelTheme/src/main/sass/_colors.sass
index 1348380..831737e 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_colors.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_colors.sass
@@ -38,4 +38,6 @@ $light-color: #d9d9d9
$font-light-color: #808080
$dark-color: #595959
-$font-dark-color: #FFFFFF
\ No newline at end of file
+$font-dark-color: #FFFFFF
+
+$error-color: #EC1C24
\ No newline at end of file
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 7abb7bb..c659b24 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass
@@ -82,6 +82,9 @@ $textinput-border-radius: $border-radius
@else
+textinput-theme($font-light-color)
+ &.errorBorder
+ input
+ border: 1px $error-color solid
// Jewel TextArea
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_colors.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tooltip.sass
similarity index 64%
copy from frameworks/themes/JewelTheme/src/main/sass/_colors.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components-primary/_tooltip.sass
index 1348380..031bb44 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_colors.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tooltip.sass
@@ -17,25 +17,26 @@
//
////////////////////////////////////////////////////////////////////////////////
-// CONSTANTS
-// 12 Color Themes (this will go to one separate project each one)
-$red: #EC1C24
-$amethyst: #C92CC6
-$violet: #662C90
-$sapphire: #2C74BE
-$blue: #3CADF1
-$turquoise: #29A89F
-$green: #3AB549
-$emerald: #8CC63C
-$yellow: #E2D70B
-$sunflower: #F8B13F
-$orange: #F7941D
-$topaz: #EF5A2A
+// Jewel ToolTip
-$font-theme-color: #FFFFFF
+// ToolTip variables
-$light-color: #d9d9d9
-$font-light-color: #808080
-$dark-color: #595959
-$font-dark-color: #FFFFFF
\ No newline at end of file
+.jewel
+ &.errorTip
+ color: $font-theme-color
+ background: $error-color
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4)
+ animation: slide-up 0.4s ease
+
+ &::before
+ border-top-color: $error-color //this the arrow
+ border: solid 8px transparent
+
+ @keyframes slide-up
+ 0%
+ opacity: 0
+ transform: translateY(20px)
+ 100%
+ opacity: 1
+ transform: translateY(0)
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index fc41492..f1edfd7 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -49,8 +49,9 @@
@import "components-primary/text"
@import "components-primary/textinput"
@import "components-primary/titlebar"
-@import "components-primary/topappbar"
@import "components-primary/togglebutton"
+@import "components-primary/tooltip"
+@import "components-primary/topappbar"
@import "components-secondary/alert"
@import "components-secondary/button"