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 0b3c2d9a802cacbebc3b828505875afc30492e13 Author: Carlos Rovira <[email protected]> AuthorDate: Fri Mar 9 20:32:02 2018 +0100 partial changes to create various themes with different colors still need much work --- .../src/main/royale/ButtonPlayGround.mxml | 12 ++-- .../main/royale/org/apache/royale/jewel/Button.as | 55 ++++++++++++++ .../royale/org/apache/royale/jewel/TextButton.as | 84 ++++++++++++++++++++-- frameworks/themes/JewelTheme/pom.xml | 6 +- .../JewelTheme/src/main/resources/defaults.css | 72 +++++++------------ .../{defaults.css => royale-jewel-blue.css} | 74 ++++++++----------- .../themes/JewelTheme/src/main/sass/_button.sass | 64 +++++++++++++---- .../main/sass/{_variables.sass => _global.sass} | 18 +++-- .../themes/JewelTheme/src/main/sass/_mixins.sass | 24 +++++++ .../JewelTheme/src/main/sass/_textbutton.sass | 77 ++++---------------- .../JewelTheme/src/main/sass/_variables.sass | 22 ++++-- .../themes/JewelTheme/src/main/sass/defaults.sass | 22 ++---- .../sass/{defaults.sass => royale-jewel-blue.sass} | 29 ++++---- 13 files changed, 333 insertions(+), 226 deletions(-) diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml index e9e9f9a..3efb4df 100644 --- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml +++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml @@ -39,18 +39,18 @@ limitations under the License. <js:TextButton text="Basic"/> <j:Button/> - <j:TextButton text="C"/> + <j:TextButton text="C" /> <j:TextButton text="Button"/> - <j:TextButton text="Button With More Text"/> + <j:TextButton text="Button With More Text" /> - <j:TextButton text="Button" width="120" height="40"/> + <j:TextButton text="Button" width="120" height="40" /> - <j:TextButton text="Button"/> + <j:TextButton text="Button" primary="true"/> - <j:TextButton text="Disabled"> + <j:TextButton text="Disabled" > <j:beads> <j:Disabled/> </j:beads> @@ -62,6 +62,6 @@ limitations under the License. <j:Slider id="slider_v" width="250" value="440" minimum="50" maximum="500" valueChange="onValueChange(event)"/> - <j:TextButton id="button" text="Button" width="420" height="440"/> + <j:TextButton id="button" text="Button" width="420" height="440" /> </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 045fa71..938ed89 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 @@ -24,6 +24,7 @@ package org.apache.royale.jewel { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; + import org.apache.royale.core.CSSClassList; } /** @@ -58,8 +59,16 @@ package org.apache.royale.jewel public function Button() { super(); + + COMPILE::JS + { + _classList = new CSSClassList(); + } } + COMPILE::JS + protected var _classList:CSSClassList; + /** * @private * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement @@ -72,5 +81,51 @@ package org.apache.royale.jewel typeNames = "jewel button"; return element; } + + + private var _primary:Boolean = false; + + /** + * A boolean flag to activate "jewel-button--primary" effect selector. + * Applies primary 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 primary():Boolean + { + return _primary; + } + + public function set primary(value:Boolean):void + { + if (_primary != value) + { + _primary = value; + + COMPILE::JS + { + addOrRemove("jewel-button--primary",value); + setClassName(computeFinalClassNames()); + } + } + } + + + + COMPILE::JS + protected function addOrRemove(classNameVal:String,add:Boolean):void + { + add ? _classList.add(classNameVal) : _classList.remove(classNameVal); + } + + COMPILE::JS + override protected function computeFinalClassNames():String + { + return _classList.compute() + super.computeFinalClassNames(); + } } } \ No newline at end of file diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as index 30e8f68..d247b43 100644 --- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as +++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as @@ -18,24 +18,26 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.royale.jewel { - import org.apache.royale.html.TextButton; - + import org.apache.royale.core.ITextModel; + COMPILE::JS { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; } + [DefaultProperty("text")] + /** - * The Button class provides a Jewel Design Library UI-like appearance for - * a Button. + * The TextButton class implements a basic button that + * displays text and provides a Jewel Design Library UI-like appearance. * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 * @productversion Royale 0.9.2 */ - public class TextButton extends org.apache.royale.html.TextButton + public class TextButton extends Button { /** * Constructor. @@ -51,6 +53,78 @@ package org.apache.royale.jewel } /** + * @copy org.apache.royale.html.Label#text + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.0 + */ + public function get text():String + { + COMPILE::SWF + { + return ITextModel(model).text; + } + COMPILE::JS + { + return element.innerHTML; + } + } + + /** + * @private + */ + public function set text(value:String):void + { + COMPILE::SWF + { + ITextModel(model).text = value; + } + COMPILE::JS + { + this.element.innerHTML = value; + this.dispatchEvent('textChange'); + } + } + + /** + * @copy org.apache.royale.html.Label#html + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion Royale 0.0 + */ + public function get html():String + { + COMPILE::SWF + { + return ITextModel(model).html; + } + COMPILE::JS + { + return element.innerHTML; + } + } + + /** + * @private + */ + public function set html(value:String):void + { + COMPILE::SWF + { + ITextModel(model).html = value; + } + COMPILE::JS + { + this.element.innerHTML = value; + this.dispatchEvent('textChange'); + } + } + + /** * @private * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement */ diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml index f74dd9c..562dd07 100644 --- a/frameworks/themes/JewelTheme/pom.xml +++ b/frameworks/themes/JewelTheme/pom.xml @@ -60,9 +60,13 @@ <name>assets/*</name> <path>../src/main/resources/assets/*</path> </include-file> - <include-file> + <!-- <include-file> <name>defaults.css</name> <path>../src/main/resources/defaults.css</path> + </include-file> --> + <include-file> + <name>royale-jewel-blue.css</name> + <path>../src/main/resources/royale-jewel-blue.css</path> </include-file> </includeFiles> </configuration> diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css index ef0706e..782e6d5 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css +++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css @@ -14,6 +14,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +/* BUTTON */ @namespace j "library://ns.apache.org/royale/jewel"; @namespace "http://www.w3.org/1999/xhtml";; .royale *, .royale *:before, .royale *:after { @@ -28,72 +29,53 @@ margin: 10px; } -body { - font: 100% "Lato-Bold", sans-serif; - color: #006CEB; -} - /** * Jewel Button */ -.button, .button:hover { - cursor: pointer; - /* Background: */ - border: 1px; - border-image-source: url(assets/JewelButton2.svg); - border-image-slice: 4; - border-image-width: 4; - background-image: linear-gradient(#3BB0FF, #1E36FA); - background-size: cover; - background-repeat: no-repeat; - background-clip: padding-box; -} - -.button:focus { - outline: 0; -} - -/** - * Jewel TextButton - */ -.textbutton, .textbutton:hover { +.button, .textbutton { cursor: pointer; + display: inline-block; + margin: 0; + padding: 10px 0px; + min-width: 74px; /* Background: */ border: none; border-radius: 3px; - /* TextField: */ + /* TextField */ + color: rgba(255, 255, 255, 0.4); font-family: "Lato-Bold", sans-serif; - font-size: 14px; - font-weight: bold; - color: #fff; - text-shadow: 0 1px 0 #555; - padding: 10px 0px; - display: inline-block; - min-width: 80px; + font-style: bold; + font-size: 0.7rem; + text-transform: uppercase; + text-decoration: none; } -.textbutton { +.jewel-button--primary { background-color: #006CEB; transition-duration: 0.4s; } - -.textbutton:hover { - background-color: #3389EF; +.jewel-button--primary:hover { + background-color: #0b7bff; } - -.textbutton:active { - background-color: #0056BC; +.jewel-button--primary:active { + background-color: #005ecc; } - -.textbutton:focus { +.jewel-button--primary:focus { outline: 0; } - -.textbutton[disabled] { +.jewel-button--primary [disabled] { background-color: #CCCCCC; color: #888888; + cursor: unset; +} + +/** + * Jewel TextButton + */ +.textbutton[disabled] { text-shadow: unset; cursor: unset; + /* TextField: */ } /** diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css similarity index 75% copy from frameworks/themes/JewelTheme/src/main/resources/defaults.css copy to frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css index ef0706e..76cae63 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css +++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css @@ -14,6 +14,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +/* BUTTON */ @namespace j "library://ns.apache.org/royale/jewel"; @namespace "http://www.w3.org/1999/xhtml";; .royale *, .royale *:before, .royale *:after { @@ -28,72 +29,53 @@ margin: 10px; } -body { - font: 100% "Lato-Bold", sans-serif; - color: #006CEB; -} - /** * Jewel Button */ -.button, .button:hover { - cursor: pointer; - /* Background: */ - border: 1px; - border-image-source: url(assets/JewelButton2.svg); - border-image-slice: 4; - border-image-width: 4; - background-image: linear-gradient(#3BB0FF, #1E36FA); - background-size: cover; - background-repeat: no-repeat; - background-clip: padding-box; -} - -.button:focus { - outline: 0; -} - -/** - * Jewel TextButton - */ -.textbutton, .textbutton:hover { +.button, .textbutton { cursor: pointer; + display: inline-block; + margin: 0; + padding: 10px 0px; + min-width: 74px; /* Background: */ border: none; border-radius: 3px; - /* TextField: */ + /* TextField */ + color: rgba(255, 255, 255, 0.4); font-family: "Lato-Bold", sans-serif; - font-size: 14px; - font-weight: bold; - color: #fff; - text-shadow: 0 1px 0 #555; - padding: 10px 0px; - display: inline-block; - min-width: 80px; + font-style: bold; + font-size: 0.7rem; + text-transform: uppercase; + text-decoration: none; } -.textbutton { +.jewel-button--primary { background-color: #006CEB; transition-duration: 0.4s; } - -.textbutton:hover { - background-color: #3389EF; +.jewel-button--primary:hover { + background-color: #0b7bff; } - -.textbutton:active { - background-color: #0056BC; +.jewel-button--primary:active { + background-color: #005ecc; } - -.textbutton:focus { +.jewel-button--primary:focus { outline: 0; } - -.textbutton[disabled] { +.jewel-button--primary [disabled] { background-color: #CCCCCC; color: #888888; + cursor: unset; +} + +/** + * Jewel TextButton + */ +.textbutton[disabled] { text-shadow: unset; cursor: unset; + /* TextField: */ } /** @@ -139,4 +121,4 @@ TextField { text-align: left; } -/*# sourceMappingURL=defaults.css.map */ +/*# sourceMappingURL=royale-jewel-blue.css.map */ diff --git a/frameworks/themes/JewelTheme/src/main/sass/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/_button.sass index 1ea71ab..376f994 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/_button.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/_button.sass @@ -16,28 +16,62 @@ // limitations under the License. // //////////////////////////////////////////////////////////////////////////////// - + /** * Jewel Button */ -.button, .button:hover - +%button-def cursor: pointer + display: inline-block + margin: 0 //1rem + padding: 10px 0px //.938em 1.875em + min-width: $button-min-width + /* Background: */ - border: 1px // without this svg shows scaled and bigger - border-image-source: url(assets/JewelButton2.svg) - border-image-slice: 4 - border-image-width: 4 + border: none // .094em solid + border-radius: 3px //.625em + //box-shadow: 0 .375em .313em -.313em rgba(black,.8), inset 0 .063em $off-wht, inset 0 -.188em rgba(black,.15) + + /* TextField */ + color: $white + font: + family: $font-stack + style: bold + size: .7rem + //+trans(0.2s ease-in-out) + text: + transform: uppercase + decoration: none + //shadow: 0 .063em rgba(black,.3) + +.button + @extend %button-def + +.jewel-button--primary + +button-theme($primary-color) + + + + + //SVGs + //border:1px; /*without this svg shows scaled and bigger*/ + //border-image-source: url(assets/jewel-button.svg) ; + //border-image-slice: 4; + //border-image-width: 4; - background-image: linear-gradient(#3BB0FF, #1E36FA) - background-size: cover - background-repeat: no-repeat - background-clip: padding-box + //background-image: linear-gradient(#3BB0FF, #1E36FA); -//.button:hover + //background-color: #006CEB; + //background-size: cover; + //background-repeat: no-repeat; + //background-clip: padding-box; -//.button:active + //background: url(assets/4slicewithpattern.svg); + //background-size: cover; + //width: fit-content; + //height: fit-content; -.button:focus - outline: 0 +//.button:active + //box-shadow: #E6431D 0 1px 0 inset; + //text-shadow: 0 -1px 0 #5F3A29; \ No newline at end of file diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_global.sass similarity index 74% copy from frameworks/themes/JewelTheme/src/main/sass/_variables.sass copy to frameworks/themes/JewelTheme/src/main/sass/_global.sass index 46227a0..f4df725 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/_global.sass @@ -17,12 +17,16 @@ // //////////////////////////////////////////////////////////////////////////////// -$font-stack: 'Lato-Bold', sans-serif +@namespace j "library://ns.apache.org/royale/jewel" +@namespace "http://www.w3.org/1999/xhtml"; -$primary-color: #006CEB -$hover-color: #3389EF -$active-color: #0056BC -$disabled-color: #CCCCCC -$font-normal-color: #fff -$font-disabled-color: #888888 \ No newline at end of file +.royale *, .royale *:before, .royale *:after + -moz-box-sizing: border-box + -webkit-box-sizing: border-box + box-sizing: border-box + /* fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject"); */ + +.royale + padding: 10px + margin: 10px diff --git a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass index 0c6fb82..10d21e4 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass @@ -16,3 +16,27 @@ // limitations under the License. // //////////////////////////////////////////////////////////////////////////////// + +=button-theme($button-color) + //border-color: darken($button-color, 20%) + background-color: $button-color + transition: + duration: 0.4s + &: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%) + &:active + background-color: darken($button-color, 6%) + //box-shadow: 0 .063em $off-wht, inset 0 0 1.094em darken($btn-color, 40%), inset 0 .063em darken($btn-color, 20%),inset 0 -0.188em darken($btn-color, 20%) + &:focus + outline: 0 + [disabled] + background-color: $disabled-color + color: $font-disabled-color + cursor: unset + +//=trans($val...) +// -webkit-transition: $val +// -moz-transition: $val +// -o-transition: $val +// transition: $val diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass index ee1c655..4211663 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass @@ -20,73 +20,24 @@ /** * Jewel TextButton */ -.textbutton, .textbutton:hover - - cursor: pointer - - /* Background: */ - border: none - border-radius: 3px - - //border:1px; /*without this svg shows scaled and bigger*/ - //border-image-source: url(assets/jewel-button.svg) ; - //border-image-slice: 4; - //border-image-width: 4; - - //background-image: linear-gradient(#3BB0FF, #1E36FA); - - //background-color: #006CEB; - //background-size: cover; - //background-repeat: no-repeat; - //background-clip: padding-box; - - /* TextField: */ - font-family: $font-stack - font-size: 14px - font-weight: bold - color: $font-normal-color - text-shadow: 0 1px 0 #555 - - padding: 10px 0px - display: inline-block - min-width: 80px - - //background: url(assets/4slicewithpattern.svg); - //background-size: cover; - //width: fit-content; - //height: fit-content; - - //background: linear-gradient(#FF893B, #FA461E); - //border: 1px solid #A93116; - //border-radius: 3px; - //box-shadow: #E6B89B 0 1px 0 inset, #E6431D 0 -1px 0 inset, #aaa 0 1px 0 inset; .textbutton - background-color: $primary-color - transition-duration: 0.4s - - -.textbutton:hover - background-color: $hover-color - - //background: linear-gradient(#FD9958, #F76943); - //border: 1px solid #BC573C; - //line-height:16px; - //padding: 8px 16px; - -.textbutton:active - background-color: $active-color - - //box-shadow: #E6431D 0 1px 0 inset; - //text-shadow: 0 -1px 0 #5F3A29; - -.textbutton:focus - outline: 0 + @extend %button-def .textbutton[disabled] - background-color: $disabled-color - color: $font-disabled-color - text-shadow: unset + text: + shadow: unset cursor: unset + /* TextField: */ +// font-family: $font-stack +// font-size: 14px +// font-weight: bold +// color: $font-normal-color +// text-shadow: 0 1px 0 #555 + +// padding: 10px 0px +// display: inline-block +// min-width: 80px + diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass index 46227a0..90ff1c5 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass @@ -19,10 +19,22 @@ $font-stack: 'Lato-Bold', sans-serif -$primary-color: #006CEB -$hover-color: #3389EF -$active-color: #0056BC +// Common Colors +$white: rgba(white,.4) $disabled-color: #CCCCCC +$font-disabled-color: #888888 + +// Color Themes +$primary-color: #006CEB + +//$purple: #9A68C7 +//$blue: #3BA9E4 +//$green: #75B343 +//$orange: #FF6A42 + + +/* BUTTON */ +$button-min-width: 74px !default + + -$font-normal-color: #fff -$font-disabled-color: #888888 \ 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 8fae5e5..7ad0fdd 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass @@ -15,24 +15,14 @@ * limitations under the License. */ -@import "variables" - -@namespace j "library://ns.apache.org/royale/jewel" -@namespace "http://www.w3.org/1999/xhtml"; -.royale *, .royale *:before, .royale *:after - -moz-box-sizing: border-box - -webkit-box-sizing: border-box - box-sizing: border-box - /* fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject"); */ - -.royale - padding: 10px - margin: 10px +// Variables +@import "variables" +@import "mixins" +@import "functions" -body - font: 100% $font-stack - color: $primary-color +// Global +@import "global" // Components @import "button" diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass similarity index 68% copy from frameworks/themes/JewelTheme/src/main/sass/defaults.sass copy to frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass index 8fae5e5..98d8247 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass @@ -15,26 +15,21 @@ * limitations under the License. */ +// Variables @import "variables" +@import "mixins" +@import "functions" -@namespace j "library://ns.apache.org/royale/jewel" -@namespace "http://www.w3.org/1999/xhtml"; - -.royale *, .royale *:before, .royale *:after - -moz-box-sizing: border-box - -webkit-box-sizing: border-box - box-sizing: border-box - /* fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject"); */ - -.royale - padding: 10px - margin: 10px - -body - font: 100% $font-stack - color: $primary-color +// Global +@import "global" // Components + +// Button @import "button" + +// TextButton @import "textbutton" -@import "textfield" \ No newline at end of file + +// TextField +@import "textfield" -- To stop receiving notification emails like this one, please contact [email protected].
