royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] 05/12: added jewel button, and changed classnames to get something decoupled from basic and more near to what other frameworks do
Date Fri, 09 Mar 2018 22:21:29 GMT
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 943d30e181d80e177285837dd4d6935379fbbe04
Author: Carlos Rovira <carlosrovira@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
carlosrovira@apache.org.

Mime
View raw message