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 e6bf3794540926635d0131fa61655daf752ecdd5 Author: Carlos Rovira <carlosrov...@apache.org> AuthorDate: Wed Mar 7 19:34:46 2018 +0100 added jewel button, and changed classnames to get something decoupled from basic and more near to what other frameworks do --- .../src/main/royale/ButtonPlayGround.mxml | 4 +++ .../projects/Jewel/src/main/resources/defaults.css | 8 ----- .../Jewel/src/main/resources/jewel-manifest.xml | 1 + .../royale/jewel/{TextButton.as => Button.as} | 41 ++++++++++++++-------- .../royale/org/apache/royale/jewel/TextButton.as | 5 ++- frameworks/themes/JewelTheme/pom.xml | 4 +++ .../main/resources/{TextButton.css => Button.css} | 38 ++++---------------- .../JewelTheme/src/main/resources/TextButton.css | 14 ++++---- .../JewelTheme/src/main/resources/defaults.css | 2 +- 9 files changed, 54 insertions(+), 63 deletions(-) diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml index e7d8fe6..8e0d749 100644 --- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml +++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml @@ -35,6 +35,10 @@ limitations under the License. <js:VerticalLayoutWithPaddingAndGap gap="10"/> </js:beads> + <js:Button/> + <js:TextButton text="Basic"/> + + <j:Button/> <j:TextButton text="C"/> <js:Spacer height="30"/> diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css index db367df..b23ca30 100644 --- a/frameworks/projects/Jewel/src/main/resources/defaults.css +++ b/frameworks/projects/Jewel/src/main/resources/defaults.css @@ -31,14 +31,6 @@ TextField { .vTextField--label {} /* -* Jewel TextButton -*/ -TextButton { -} -TextButton:hover {} -TextButton:active {} - -/* * Jewel Slider */ Slider { diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml index 804e1de..06ed837 100644 --- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml +++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml @@ -22,6 +22,7 @@ <componentPackage> <component id="Application" class="org.apache.royale.jewel.Application"/> + <component id="Button" class="org.apache.royale.jewel.Button"/> <component id="TextButton" class="org.apache.royale.jewel.TextButton"/> <component id="TextField" class="org.apache.royale.jewel.TextField"/> <component id="Slider" class="org.apache.royale.jewel.Slider"/> 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/Button.as similarity index 63% copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as index 63beab2..045fa71 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/Button.as @@ -18,38 +18,48 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.royale.jewel { - import org.apache.royale.html.TextButton; - + import org.apache.royale.html.Button; + COMPILE::JS { import org.apache.royale.core.WrappedHTMLElement; import org.apache.royale.html.util.addElementToWrapper; } - + /** - * The Button class provides a Jewel Design Library UI-like appearance for - * a Button. - * + * The Button class is a simple button. Use TextButton for + * buttons that should show text. This is the lightest weight + * button used for non-text buttons like the arrow buttons + * in a Scrollbar or NumericStepper. + * + * The most common view for this button is CSSButtonView that + * allows you to specify a backgroundImage in CSS that defines + * the look of the button. + * + * However, when used in ScrollBar and when composed in many + * other components, it is more common to assign a custom view + * to the button. + * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion Royale 0.9.2 + * @productversion Royale 0.0 */ - public class TextButton extends org.apache.royale.html.TextButton + public class Button extends org.apache.royale.html.Button { /** * Constructor. - * + * * @langversion 3.0 * @playerversion Flash 10.2 * @playerversion AIR 2.6 - * @productversion Royale 0.9.2 + * @productversion Royale 0.0 */ - public function TextButton() + public function Button() { super(); } - + /** * @private * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement @@ -57,7 +67,10 @@ package org.apache.royale.jewel COMPILE::JS override protected function createElement():WrappedHTMLElement { - return super.createElement(); + addElementToWrapper(this,'button'); + element.setAttribute('type', 'button'); + typeNames = "jewel button"; + return element; } } -} +} \ 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 63beab2..30e8f68 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 @@ -57,7 +57,10 @@ package org.apache.royale.jewel COMPILE::JS override protected function createElement():WrappedHTMLElement { - return super.createElement(); + addElementToWrapper(this,'button'); + element.setAttribute('type', 'button'); + typeNames = "jewel textbutton"; + return element; } } } diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml index 14bfda6..087dd0e 100644 --- a/frameworks/themes/JewelTheme/pom.xml +++ b/frameworks/themes/JewelTheme/pom.xml @@ -65,6 +65,10 @@ <path>../src/main/resources/defaults.css</path> </include-file> <include-file> + <name>Button.css</name> + <path>../src/main/resources/Button.css</path> + </include-file> + <include-file> <name>TextButton.css</name> <path>../src/main/resources/TextButton.css</path> </include-file> diff --git a/frameworks/themes/JewelTheme/src/main/resources/TextButton.css b/frameworks/themes/JewelTheme/src/main/resources/Button.css similarity index 61% copy from frameworks/themes/JewelTheme/src/main/resources/TextButton.css copy to frameworks/themes/JewelTheme/src/main/resources/Button.css index 6bbbaf6..c341bde 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/TextButton.css +++ b/frameworks/themes/JewelTheme/src/main/resources/Button.css @@ -21,14 +21,14 @@ /*@namespace svg "library://ns.apache.org/royale/svg";*/ /* -* Jewel TextButton +* Jewel Button */ - -TextButton, TextButton:hover { +.button, .button:hover { cursor:pointer; /* 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; @@ -37,39 +37,15 @@ TextButton, TextButton:hover { background-size: cover; background-repeat: no-repeat; background-clip: padding-box; +} - /* TextField: */ - font-family: 'Lato-Bold', sans-serif; - font-size: 14px; - font-weight:bold; - color: #fff; - text-shadow: 0 1px 0 #555; - - padding: 10px 32px; +.button:hover { - - /*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:hover { - /*background: linear-gradient(#FD9958, #F76943); - border: 1px solid #BC573C; - line-height:16px; - padding: 8px 16px;*/ -} +.button:active { -TextButton:active { - /*box-shadow: #E6431D 0 1px 0 inset; - text-shadow: 0 -1px 0 #5F3A29;*/ } -TextButton:focus { +.button:focus { outline:0; } \ No newline at end of file diff --git a/frameworks/themes/JewelTheme/src/main/resources/TextButton.css b/frameworks/themes/JewelTheme/src/main/resources/TextButton.css index 6bbbaf6..7ff03f6 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/TextButton.css +++ b/frameworks/themes/JewelTheme/src/main/resources/TextButton.css @@ -18,17 +18,16 @@ */ @namespace "library://ns.apache.org/royale/jewel"; -/*@namespace svg "library://ns.apache.org/royale/svg";*/ /* * Jewel TextButton */ - -TextButton, TextButton:hover { +.textbutton, .textbutton:hover { cursor:pointer; /* 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; @@ -47,7 +46,6 @@ TextButton, TextButton:hover { padding: 10px 32px; - /*background: url(assets/4slicewithpattern.svg); background-size: cover; width: fit-content; @@ -59,17 +57,17 @@ TextButton, TextButton:hover { */ } -TextButton:hover { +.textbutton:hover { /*background: linear-gradient(#FD9958, #F76943); border: 1px solid #BC573C; line-height:16px; padding: 8px 16px;*/ } -TextButton:active { +.textbutton:active { /*box-shadow: #E6431D 0 1px 0 inset; text-shadow: 0 -1px 0 #5F3A29;*/ } -TextButton:focus { - outline:0; +.textbutton:focus { + outline: 0; } \ No newline at end of file diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css index 845a3a4..9011932 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css +++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css @@ -25,7 +25,7 @@ -webkit-box-sizing: border-box; box-sizing: border-box; - fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject"); + /* fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject"); */ } .page-content -- To stop receiving notification emails like this one, please contact carlosrov...@apache.org.