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/11 11:48:00 UTC
[royale-asjs] 17/17: a more logical button styles,
organization of example and more polished
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch jewel-ui
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 706fd64a299eecc9eb11eab5dbf88201978a2b5e
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Mar 10 12:25:15 2018 +0100
a more logical button styles, organization of example and more polished
---
.../src/main/royale/ButtonPlayGround.mxml | 24 ++--
.../main/royale/org/apache/royale/jewel/Button.as | 61 ++++++++++
.../JewelTheme/src/main/resources/defaults.css | 123 ++++++++++++++++++++-
.../src/main/resources/royale-jewel-blue.css | 123 ++++++++++++++++++++-
.../src/main/resources/royale-jewel-red.css | 123 ++++++++++++++++++++-
.../themes/JewelTheme/src/main/sass/_button.sass | 12 +-
.../themes/JewelTheme/src/main/sass/_mixins.sass | 3 +-
.../JewelTheme/src/main/sass/_textbutton.sass | 12 +-
.../src/main/sass/colors/_blue-color-palette.sass | 8 +-
.../src/main/sass/colors/_red-color-palette.sass | 8 +-
.../themes/JewelTheme/src/main/sass/defaults.sass | 6 +
11 files changed, 485 insertions(+), 18 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index 218680a..5ca13a1 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -35,19 +35,24 @@ limitations under the License.
<js:VerticalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
+ <js:Label text="Basic"/>
<js:Button/>
<js:TextButton text="Basic"/>
+ <js:Label text="Jewel Button"/>
<j:Button primary="true"/>
- <j:TextButton text="C" primary="true"/>
- <j:TextButton text="Button" primary="true"/>
+ <js:Label text="Jewel TextButton"/>
+
+ <j:TextButton text="DEFAULT"/>
- <j:TextButton text="Button With More Text" primary="true"/>
+ <j:TextButton text="Button With More Text"/>
- <j:TextButton text="Button" width="120" height="40" primary="true"/>
-
- <j:TextButton text="Button" primary="true"/>
+ <j:TextButton text="PRIMARY" primary="true"/>
+
+ <j:TextButton text="SECONDARY" secondary="true"/>
+
+ <j:TextButton text="EMPHASIZED" emphasized="true"/>
<j:TextButton text="Disabled" primary="true">
<j:beads>
@@ -55,11 +60,12 @@ limitations under the License.
</j:beads>
</j:TextButton>
- <j:Slider id="slider" width="250" value="100" minimum="50" maximum="500"
+ <js:Label text="Jewel Button Sizing (respect min values)"/>
+ <j:Slider id="slider" width="250" value="100" minimum="0" maximum="500"
valueChange="onValueChange(event)"/>
- <j:Slider id="slider_v" width="250" value="100" minimum="50" maximum="500"
+ <j:Slider id="slider_v" width="250" value="40" minimum="0" maximum="300"
valueChange="onValueChange(event)"/>
- <j:TextButton id="button" text="Button" width="100" height="100" primary="true"/>
+ <j:TextButton id="button" text="Button" width="100" height="40" primary="true"/>
</js:Group>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
index d008476..cd74a24 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
@@ -113,8 +113,69 @@ package org.apache.royale.jewel
}
}
}
+
+ private var _secondary:Boolean = false;
+ /**
+ * A boolean flag to activate "secondary" effect selector.
+ * Applies secondary color display effect.
+ * Colors are defined in royale-jewel.css
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function get secondary():Boolean
+ {
+ return _secondary;
+ }
+
+ public function set secondary(value:Boolean):void
+ {
+ if (_secondary != value)
+ {
+ _secondary = value;
+
+ COMPILE::JS
+ {
+ addOrRemove("secondary",value);
+ setClassName(computeFinalClassNames());
+ }
+ }
+ }
+
+ private var _emphasized:Boolean = false;
+ /**
+ * A boolean flag to activate "emphasized" effect selector.
+ * Applies emphasized color display effect.
+ * Colors are defined in royale-jewel.css
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function get emphasized():Boolean
+ {
+ return _emphasized;
+ }
+
+ public function set emphasized(value:Boolean):void
+ {
+ if (_emphasized != value)
+ {
+ _emphasized = value;
+
+ COMPILE::JS
+ {
+ addOrRemove("emphasized",value);
+ setClassName(computeFinalClassNames());
+ }
+ }
+ }
+
COMPILE::JS
protected function addOrRemove(classNameVal:String,add:Boolean):void
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 0bc4b18..a988581 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -43,9 +43,30 @@
border-radius: 3px;
}
+.jewel.button {
+ background-color: rgba(0, 0, 0, 0.3);
+ transition-duration: 0.4s;
+ color: rgba(0, 0, 0, 0.4);
+}
+.jewel.button:hover {
+ background-color: rgba(15, 15, 15, 0.3);
+}
+.jewel.button:active {
+ background-color: rgba(0, 0, 0, 0.3);
+}
+.jewel.button:focus {
+ outline: 0;
+}
+.jewel.button[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
.jewel.button.primary {
background-color: #006CEB;
transition-duration: 0.4s;
+ color: white;
}
.jewel.button.primary:hover {
background-color: #0b7bff;
@@ -62,12 +83,51 @@
cursor: unset;
}
+.jewel.button.secondary {
+ background-color: #011833;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.button.secondary:hover {
+ background-color: #022651;
+}
+.jewel.button.secondary:active {
+ background-color: #000a15;
+}
+.jewel.button.secondary:focus {
+ outline: 0;
+}
+.jewel.button.secondary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.button.emphasized {
+ background-color: #1FD348;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.button.emphasized:hover {
+ background-color: #30e158;
+}
+.jewel.button.emphasized:active {
+ background-color: #1bb83f;
+}
+.jewel.button.emphasized:focus {
+ outline: 0;
+}
+.jewel.button.emphasized[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
/**
* Jewel TextButton
*/
.jewel.textbutton, .jewel.textbutton:hover {
/* TextField */
- color: rgba(255, 255, 255, 0.9);
font-family: "Lato-Bold", sans-serif;
font-style: bold;
font-size: 0.7rem;
@@ -78,9 +138,30 @@
text-shadow: unset;
}
+.jewel.textbutton {
+ background-color: rgba(0, 0, 0, 0.3);
+ transition-duration: 0.4s;
+ color: rgba(0, 0, 0, 0.4);
+}
+.jewel.textbutton:hover {
+ background-color: rgba(15, 15, 15, 0.3);
+}
+.jewel.textbutton:active {
+ background-color: rgba(0, 0, 0, 0.3);
+}
+.jewel.textbutton:focus {
+ outline: 0;
+}
+.jewel.textbutton[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
.jewel.textbutton.primary {
background-color: #006CEB;
transition-duration: 0.4s;
+ color: white;
}
.jewel.textbutton.primary:hover {
background-color: #0b7bff;
@@ -97,6 +178,46 @@
cursor: unset;
}
+.jewel.textbutton.secondary {
+ background-color: #011833;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.textbutton.secondary:hover {
+ background-color: #022651;
+}
+.jewel.textbutton.secondary:active {
+ background-color: #000a15;
+}
+.jewel.textbutton.secondary:focus {
+ outline: 0;
+}
+.jewel.textbutton.secondary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.textbutton.emphasized {
+ background-color: #1FD348;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.textbutton.emphasized:hover {
+ background-color: #30e158;
+}
+.jewel.textbutton.emphasized:active {
+ background-color: #1bb83f;
+}
+.jewel.textbutton.emphasized:focus {
+ outline: 0;
+}
+.jewel.textbutton.emphasized[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
/**
* Jewel TextField
*/
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
index 27242c2..03b8c00 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
@@ -43,9 +43,30 @@
border-radius: 3px;
}
+.jewel.button {
+ background-color: rgba(0, 0, 0, 0.3);
+ transition-duration: 0.4s;
+ color: rgba(0, 0, 0, 0.4);
+}
+.jewel.button:hover {
+ background-color: rgba(15, 15, 15, 0.3);
+}
+.jewel.button:active {
+ background-color: rgba(0, 0, 0, 0.3);
+}
+.jewel.button:focus {
+ outline: 0;
+}
+.jewel.button[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
.jewel.button.primary {
background-color: #006CEB;
transition-duration: 0.4s;
+ color: white;
}
.jewel.button.primary:hover {
background-color: #0b7bff;
@@ -62,12 +83,51 @@
cursor: unset;
}
+.jewel.button.secondary {
+ background-color: #011833;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.button.secondary:hover {
+ background-color: #022651;
+}
+.jewel.button.secondary:active {
+ background-color: #000a15;
+}
+.jewel.button.secondary:focus {
+ outline: 0;
+}
+.jewel.button.secondary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.button.emphasized {
+ background-color: #1FD348;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.button.emphasized:hover {
+ background-color: #30e158;
+}
+.jewel.button.emphasized:active {
+ background-color: #1bb83f;
+}
+.jewel.button.emphasized:focus {
+ outline: 0;
+}
+.jewel.button.emphasized[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
/**
* Jewel TextButton
*/
.jewel.textbutton, .jewel.textbutton:hover {
/* TextField */
- color: rgba(255, 255, 255, 0.9);
font-family: "Lato-Bold", sans-serif;
font-style: bold;
font-size: 0.7rem;
@@ -78,9 +138,30 @@
text-shadow: unset;
}
+.jewel.textbutton {
+ background-color: rgba(0, 0, 0, 0.3);
+ transition-duration: 0.4s;
+ color: rgba(0, 0, 0, 0.4);
+}
+.jewel.textbutton:hover {
+ background-color: rgba(15, 15, 15, 0.3);
+}
+.jewel.textbutton:active {
+ background-color: rgba(0, 0, 0, 0.3);
+}
+.jewel.textbutton:focus {
+ outline: 0;
+}
+.jewel.textbutton[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
.jewel.textbutton.primary {
background-color: #006CEB;
transition-duration: 0.4s;
+ color: white;
}
.jewel.textbutton.primary:hover {
background-color: #0b7bff;
@@ -97,6 +178,46 @@
cursor: unset;
}
+.jewel.textbutton.secondary {
+ background-color: #011833;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.textbutton.secondary:hover {
+ background-color: #022651;
+}
+.jewel.textbutton.secondary:active {
+ background-color: #000a15;
+}
+.jewel.textbutton.secondary:focus {
+ outline: 0;
+}
+.jewel.textbutton.secondary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.textbutton.emphasized {
+ background-color: #1FD348;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.textbutton.emphasized:hover {
+ background-color: #30e158;
+}
+.jewel.textbutton.emphasized:active {
+ background-color: #1bb83f;
+}
+.jewel.textbutton.emphasized:focus {
+ outline: 0;
+}
+.jewel.textbutton.emphasized[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
/**
* Jewel TextField
*/
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
index 825f537..4b76076 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
@@ -43,9 +43,30 @@
border-radius: 3px;
}
+.jewel.button {
+ background-color: rgba(0, 0, 0, 0.2);
+ transition-duration: 0.4s;
+ color: rgba(0, 0, 0, 0.5);
+}
+.jewel.button:hover {
+ background-color: rgba(15, 15, 15, 0.2);
+}
+.jewel.button:active {
+ background-color: rgba(0, 0, 0, 0.2);
+}
+.jewel.button:focus {
+ outline: 0;
+}
+.jewel.button[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
.jewel.button.primary {
background-color: #FF0000;
transition-duration: 0.4s;
+ color: white;
}
.jewel.button.primary:hover {
background-color: #ff1f1f;
@@ -62,12 +83,51 @@
cursor: unset;
}
+.jewel.button.secondary {
+ background-color: #342F30;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.button.secondary:hover {
+ background-color: #443e3f;
+}
+.jewel.button.secondary:active {
+ background-color: #242021;
+}
+.jewel.button.secondary:focus {
+ outline: 0;
+}
+.jewel.button.secondary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.button.emphasized {
+ background-color: #016936;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.button.emphasized:hover {
+ background-color: #018746;
+}
+.jewel.button.emphasized:active {
+ background-color: #014b26;
+}
+.jewel.button.emphasized:focus {
+ outline: 0;
+}
+.jewel.button.emphasized[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
/**
* Jewel TextButton
*/
.jewel.textbutton, .jewel.textbutton:hover {
/* TextField */
- color: rgba(255, 255, 255, 0.9);
font-family: "Lato-Bold", sans-serif;
font-style: bold;
font-size: 0.7rem;
@@ -78,9 +138,30 @@
text-shadow: unset;
}
+.jewel.textbutton {
+ background-color: rgba(0, 0, 0, 0.2);
+ transition-duration: 0.4s;
+ color: rgba(0, 0, 0, 0.5);
+}
+.jewel.textbutton:hover {
+ background-color: rgba(15, 15, 15, 0.2);
+}
+.jewel.textbutton:active {
+ background-color: rgba(0, 0, 0, 0.2);
+}
+.jewel.textbutton:focus {
+ outline: 0;
+}
+.jewel.textbutton[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
.jewel.textbutton.primary {
background-color: #FF0000;
transition-duration: 0.4s;
+ color: white;
}
.jewel.textbutton.primary:hover {
background-color: #ff1f1f;
@@ -97,6 +178,46 @@
cursor: unset;
}
+.jewel.textbutton.secondary {
+ background-color: #342F30;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.textbutton.secondary:hover {
+ background-color: #443e3f;
+}
+.jewel.textbutton.secondary:active {
+ background-color: #242021;
+}
+.jewel.textbutton.secondary:focus {
+ outline: 0;
+}
+.jewel.textbutton.secondary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.textbutton.emphasized {
+ background-color: #016936;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.textbutton.emphasized:hover {
+ background-color: #018746;
+}
+.jewel.textbutton.emphasized:active {
+ background-color: #014b26;
+}
+.jewel.textbutton.emphasized:focus {
+ outline: 0;
+}
+.jewel.textbutton.emphasized[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
/**
* Jewel TextField
*/
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
index ca39960..d04d186 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
@@ -37,8 +37,18 @@
.jewel.button, .jewel.button:hover
@extend %button-def
+.jewel.button
+ +button-theme($default-color, $default-font-color)
+
.jewel.button.primary
- +button-theme($primary-color)
+ +button-theme($primary-color, $font-color)
+
+.jewel.button.secondary
+ +button-theme($secondary-color, $font-color)
+
+.jewel.button.emphasized
+ +button-theme($emphasized-color, $font-color)
+
//SVGs
//border:1px; /*without this svg shows scaled and bigger*/
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
index 5a28fc8..f4e7302 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
@@ -17,11 +17,12 @@
//
////////////////////////////////////////////////////////////////////////////////
-=button-theme($button-color)
+=button-theme($button-color, $text-color)
//border-color: darken($button-color, 20%)
background-color: $button-color
transition:
duration: 0.4s
+ color: $text-color
&:hover
background-color: lighten($button-color, 6%)
//box-shadow: 0 .125em $off-wht, inset 0 .063em $off-wht, inset 0 -.188em lighten($btn-color, 2%)
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
index 3994d20..c24dbec 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
@@ -23,7 +23,6 @@
%textbutton-def
@extend %button-def
/* TextField */
- color: $white
font:
family: $font-stack
style: bold
@@ -40,8 +39,17 @@
.jewel.textbutton, .jewel.textbutton:hover
@extend %textbutton-def
+.jewel.textbutton
+ +button-theme($default-color, $default-font-color)
+
.jewel.textbutton.primary
- +button-theme($primary-color)
+ +button-theme($primary-color, $font-color)
+
+.jewel.textbutton.secondary
+ +button-theme($secondary-color, $font-color)
+
+.jewel.textbutton.emphasized
+ +button-theme($emphasized-color, $font-color)
// /* TextField: */
// font-family: $font-stack
diff --git a/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass b/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
index fbe84c7..135129b 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
@@ -17,4 +17,10 @@
//
////////////////////////////////////////////////////////////////////////////////
// Color Themes
-$primary-color: #006CEB
\ No newline at end of file
+$default-color: rgba(0,0,0,0.30)
+$primary-color: #006CEB
+$secondary-color: #011833
+$emphasized-color: #1FD348
+
+$default-font-color: rgba(0, 0, 0, .4)
+$font-color: white
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass b/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
index b1af604..b564176 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
@@ -17,4 +17,10 @@
//
////////////////////////////////////////////////////////////////////////////////
// Color Themes
-$primary-color: #FF0000
\ No newline at end of file
+$default-color: rgba(0,0,0,0.20)
+$primary-color: #FF0000
+$secondary-color: #342F30
+$emphasized-color: #016936
+
+$default-font-color: rgba(0, 0, 0, .5)
+$font-color: white
\ 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 5f5343c..c96fa61 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -25,6 +25,12 @@
@import "global"
// Components
+
+// Button
@import "button"
+
+// TextButton
@import "textbutton"
+
+// TextField
@import "textfield"
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.