royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] 06/13: various style changes for textbutton
Date Sat, 10 Mar 2018 09:07:37 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 f16a1e79a52cb502fc24cd6df6b51727b921d96b
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Wed Mar 7 22:59:58 2018 +0100

    various style changes for textbutton
---
 examples/royale/JewelExample/pom.xml               |   6 ++
 .../royale/JewelExample/src/main/royale/App.mxml   |   4 +-
 .../src/main/royale/ButtonPlayGround.mxml          |  11 ++-
 .../Jewel/src/main/resources/jewel-manifest.xml    |   2 +
 .../org/apache/royale/jewel/beads/Disabled.as      | 107 +++++++++++++++++++++
 .../JewelTheme/src/main/resources/TextButton.css   |  37 +++++--
 .../src/main/resources/assets/jewel-button.svg     |  37 +++++++
 .../JewelTheme/src/main/resources/defaults.css     |  12 +--
 8 files changed, 196 insertions(+), 20 deletions(-)

diff --git a/examples/royale/JewelExample/pom.xml b/examples/royale/JewelExample/pom.xml
index 56331a8..d63d545 100644
--- a/examples/royale/JewelExample/pom.xml
+++ b/examples/royale/JewelExample/pom.xml
@@ -32,6 +32,12 @@
 
   <name>Apache Royale: Examples: Royale: JewelExample</name>
 
+  <properties>
+    <!-- Customize Jewel colors  -->
+    <primary>red</primary>
+    <secondary>grey</secondary>
+  </properties>
+
   <build>
     <sourceDirectory>src/main/royale</sourceDirectory>
     <plugins>
diff --git a/examples/royale/JewelExample/src/main/royale/App.mxml b/examples/royale/JewelExample/src/main/royale/App.mxml
index 8f1e7e5..3d41276 100644
--- a/examples/royale/JewelExample/src/main/royale/App.mxml
+++ b/examples/royale/JewelExample/src/main/royale/App.mxml
@@ -29,9 +29,9 @@
 		<js:SimpleCSSValuesImpl />
 	</js:valuesImpl>
 	<js:initialView>
-		<js:View width="100%" height="100%" className="page-content">
+		<js:View>
 			<js:beads>
-				<js:VerticalLayout />
+				<js:HorizontalLayout />
 			</js:beads>
 			<local:ButtonPlayGround/>
 			<local:TextInputPlayGround/>
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index 8e0d749..e9e9f9a 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -41,17 +41,20 @@ limitations under the License.
 	<j:Button/>
 	<j:TextButton text="C"/>
 
-	<js:Spacer height="30"/>
-
 	<j:TextButton text="Button"/>
 
 	<j:TextButton text="Button With More Text"/>
 
-	<j:TextButton id="button1" text="Button" width="120" height="40"/>
+	<j:TextButton text="Button" width="120" height="40"/>
 
 	
-	<j:TextButton id="button2" text="Button"/>
+	<j:TextButton text="Button"/>
 
+	<j:TextButton text="Disabled">
+		<j:beads>
+			<j:Disabled/>
+		</j:beads>
+	</j:TextButton>
 	
 
 	<j:Slider id="slider" width="250" value="420" minimum="50" maximum="500"
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 06ed837..1ba4366 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -27,5 +27,7 @@
     <component id="TextField" class="org.apache.royale.jewel.TextField"/>
     <component id="Slider" class="org.apache.royale.jewel.Slider"/>
     <component id="RadioButton" class="org.apache.royale.jewel.RadioButton"/>
+
+    <component id="Disabled" class="org.apache.royale.jewel.beads.Disabled"/>
     
 </componentPackage>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/Disabled.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/Disabled.as
new file mode 100644
index 0000000..30429d6
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/Disabled.as
@@ -0,0 +1,107 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads
+{	
+	import org.apache.royale.core.IBead;
+	import org.apache.royale.core.IStrand;
+	import org.apache.royale.core.UIBase;
+	
+	/**
+	 *  The Disabled bead class is a specialty bead that can be used to disable a Jewel control.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9.2
+	 */
+	public class Disabled implements IBead
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.2
+		 */
+		public function Disabled()
+		{
+		}
+
+		private var _disabled:Boolean = true;
+        /**
+		 *  A boolean flag to enable or disable the host control.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.2
+		 */
+        public function get disabled():Boolean
+        {
+            return _disabled;
+        }
+        public function set disabled(value:Boolean):void
+        {
+            _disabled = value;
+
+			COMPILE::JS
+            {
+                updateHost();
+            }
+        }
+
+		private var _strand:IStrand;
+		
+		/**
+		 *  @copy org.apache.royale.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.2
+		 *  @royaleignorecoercion HTMLInputElement
+		 *  @royaleignorecoercion org.apache.royale.core.UIBase;
+		 */
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			
+			var host:UIBase = value as UIBase;
+
+			COMPILE::JS
+			{
+				updateHost();
+			}
+		}
+
+		COMPILE::JS
+		private function updateHost():void
+		{
+			var host:UIBase = _strand as UIBase;
+
+			if (host)
+            {
+                _disabled ?
+				host.element.setAttribute('disabled', '') :
+				host.element.removeAttribute('disabled');
+            }
+		}
+	}
+}
diff --git a/frameworks/themes/JewelTheme/src/main/resources/TextButton.css b/frameworks/themes/JewelTheme/src/main/resources/TextButton.css
index 7ff03f6..975a138 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/TextButton.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/TextButton.css
@@ -27,15 +27,19 @@
 	cursor:pointer;
 	
 	/* Background: */
-	border:1px; /*without this svg shows scaled and bigger*/
-	border-image-source: url(assets/JewelButton2.svg) ;
+	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;
+	border-image-width: 4;*/
 	
-	background-image: linear-gradient(#3BB0FF, #1E36FA);
+	/*background-image: linear-gradient(#3BB0FF, #1E36FA);*/
+	/*background-color: #006CEB;
 	background-size: cover;
 	background-repeat: no-repeat;
-	background-clip: padding-box;
+	background-clip: padding-box;*/
 
 	/* TextField: */
 	font-family: 'Lato-Bold', sans-serif;
@@ -44,7 +48,9 @@
 	color: #fff;
 	text-shadow: 0 1px 0 #555;
 
-	padding: 10px 32px;
+	padding: 10px 0px;
+	display:inline-block;
+	min-width: 80px;
 
 	/*background: url(assets/4slicewithpattern.svg);
 	background-size: cover;
@@ -57,7 +63,15 @@
 	*/
 }
 
+.textbutton {
+	background-color: #006CEB;
+	transition-duration: 0.4s;
+}
+
 .textbutton:hover {
+	background-color: #3389EF;
+	
+	/* button/large: */
 	/*background: linear-gradient(#FD9958, #F76943);
 	border: 1px solid #BC573C;
 	line-height:16px;
@@ -65,9 +79,18 @@
 }
 
 .textbutton:active {
+	background-color: #0056BC;
+	
 	/*box-shadow: #E6431D 0 1px 0 inset;
 	text-shadow: 0 -1px 0 #5F3A29;*/
 }
 .textbutton:focus {
 	outline: 0;
-}
\ No newline at end of file
+}
+
+.textbutton[disabled] {
+	background-color: #CCCCCC;
+	color: #888;
+	text-shadow: unset;
+	cursor: unset;
+}
diff --git a/frameworks/themes/JewelTheme/src/main/resources/assets/jewel-button.svg b/frameworks/themes/JewelTheme/src/main/resources/assets/jewel-button.svg
new file mode 100644
index 0000000..63bfc72
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/assets/jewel-button.svg
@@ -0,0 +1,37 @@
+
+
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<svg viewBox="0 0 126 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <rect id="path-1" x="0" y="0" width="126" height="48" rx="4"></rect>
+    </defs>
+    <g id="Jewel" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="button/large">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="mask" fill="#009EF5" fill-rule="evenodd" xlink:href="#path-1"></use>
+            <g id="colors/primary" mask="url(#mask-2)" fill="#006CEB" fill-rule="evenodd">
+                <rect x="0" y="0" width="126" height="48"></rect>
+            </g>
+            <text id="CTA" mask="url(#mask-2)" font-family="Lato-Bold, Lato" font-size="18"
font-weight="bold" line-spacing="24" letter-spacing="-0.225000009"></text>
+        </g>
+    </g>
+</svg>
\ 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 9011932..93b9cd7 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -20,17 +20,15 @@
  @namespace j "library://ns.apache.org/royale/jewel";
  @namespace "http://www.w3.org/1999/xhtml";
 
- .royale *, . royale *:before, . royale *:after {
+ .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"); */
  }
- 
- .page-content
- {
-	 padding: 10px;
-	 margin: 10px;
+
+ .royale {
+	padding: 10px;
+	margin: 10px;
  }
  
\ No newline at end of file

-- 
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.

Mime
View raw message