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 <carlosrov...@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 carlosrov...@apache.org.