royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] 14/15: button changes
Date Mon, 05 Mar 2018 19:06:16 GMT
This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch feature/vivid-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git

commit d569727246a5350a412af3a3ccdb9c4b43eaf3f7
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Mon Mar 5 20:03:13 2018 +0100

    button changes
---
 .../src/main/royale/ButtonPlayGround.mxml          | 19 +++++++--
 .../src/main/resources/TextButton.css              | 49 +++++++++++++++-------
 .../src/main/resources/assets/JewelButton.svg      |  6 ++-
 .../assets/{JewelButton.svg => JewelButton2.svg}   | 22 +++++-----
 4 files changed, 67 insertions(+), 29 deletions(-)

diff --git a/examples/royale/VividExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/VividExample/src/main/royale/ButtonPlayGround.mxml
index 1ae7485..ba7f0a0 100644
--- a/examples/royale/VividExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/VividExample/src/main/royale/ButtonPlayGround.mxml
@@ -26,22 +26,35 @@ limitations under the License.
         private function onValueChange(event:Event):void
         {
         	button.width = slider.value;
+			button.height = slider_v.value;
         }
     	]]>
 	</fx:Script>
 
 	<js:beads>
-		<js:VerticalLayout/>
+		<js:VerticalLayoutWithPaddingAndGap gap="10"/>
 	</js:beads>
 	
-	<v:TextButton id="button" text="Button" width="120" height="40"/>
+	<v:TextButton text="C"/>
+
+	<js:Spacer height="30"/>
+
+	<v:TextButton text="Button"/>
+
+	<v:TextButton text="Button With More Text"/>
+
+	<v:TextButton id="button1" text="Button" width="120" height="40"/>
 
 	
 	<v:TextButton id="button2" text="Button"/>
 
 	
 
-	<v:Slider id="slider" width="250" value="120" minimum="50" maximum="450"
+	<v:Slider id="slider" width="250" value="420" minimum="50" maximum="500"
+				valueChange="onValueChange(event)"/>
+	<v:Slider id="slider_v" width="250" value="440" minimum="50" maximum="500"
 				valueChange="onValueChange(event)"/>
 
+	<v:TextButton id="button" text="Button" width="420" height="440"/>
+
 </js:Group>
diff --git a/frameworks/themes/VividBlueTheme/src/main/resources/TextButton.css b/frameworks/themes/VividBlueTheme/src/main/resources/TextButton.css
index 8064fe6..1a781f8 100644
--- a/frameworks/themes/VividBlueTheme/src/main/resources/TextButton.css
+++ b/frameworks/themes/VividBlueTheme/src/main/resources/TextButton.css
@@ -24,37 +24,58 @@
 * Vivid TextButton
 */
 
-TextButton {
+TextButton, TextButton:hover {
 	
 	cursor:pointer;
-
-	/* Background: */
-	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;
 	
+	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;
+
 	/* TextField: */
 	font-family: 'Lato-Bold', sans-serif;
 	font-size: 14px;
 	font-weight:bold;
 	color: #fff;
-	text-shadow: 0 1px 0 #5F3A29;
+	text-shadow: 0 1px 0 #555;
 
-	line-height:16px;
-	padding: 8px 16px;
+	padding: 10px 32px;
+	/*line-height:16px;
+	*/
+
+	/*border-image: url(assets/JewelButton2.svg) 30 fill stretch;
+	*/
+	/*background: url(assets/4slicewithpattern.svg);
+	background-size: cover;
+	width: fit-content;
+	height: fit-content;
+	*/
+	
+
+	/* Background: */
+	/*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);
+	/*background: linear-gradient(#FD9958, #F76943);
 	border: 1px solid #BC573C;
 	line-height:16px;
-	padding: 8px 16px;
+	padding: 8px 16px;*/
 }
 
 TextButton:active {
-	box-shadow: #E6431D 0 1px 0 inset;
-	text-shadow: 0 -1px 0 #5F3A29;
+	/*box-shadow: #E6431D 0 1px 0 inset;
+	text-shadow: 0 -1px 0 #5F3A29;*/
 }
 TextButton:focus {
 	outline:0;
diff --git a/frameworks/themes/VividBlueTheme/src/main/resources/assets/JewelButton.svg b/frameworks/themes/VividBlueTheme/src/main/resources/assets/JewelButton.svg
index 6c0eb82..5352637 100644
--- a/frameworks/themes/VividBlueTheme/src/main/resources/assets/JewelButton.svg
+++ b/frameworks/themes/VividBlueTheme/src/main/resources/assets/JewelButton.svg
@@ -16,7 +16,8 @@
   limitations under the License.
 
 -->
-<svg viewBox="0 0 152 42" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg viewBox="0 0 152 42" preserveAspectRatio="none" version="1.2" vector-effect="non-scaling-stroke"
+    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
         <linearGradient x1="50%" y1="3.10307717%" x2="50%" y2="100%" id="linearGradient-1">
             <stop stop-color="#FF893B" offset="0%"></stop>
@@ -33,7 +34,8 @@
             <g id="Background">
                 <g>
                     <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
-                    <rect stroke="#A93116" stroke-width="1" x="-0.5" y="-0.5" width="151"
height="41" rx="3" ></rect>
+                    <rect stroke="#A93116" stroke-width="1" x="-0.5" y="-0.5" 
+                    width="151" height="41" rx="3" ></rect>
                 </g>
                 <rect stroke="url(#linearGradient-3)" x="0.5" y="0.5" width="149" height="39"
rx="3"></rect>
             </g>
diff --git a/frameworks/themes/VividBlueTheme/src/main/resources/assets/JewelButton.svg b/frameworks/themes/VividBlueTheme/src/main/resources/assets/JewelButton2.svg
similarity index 62%
copy from frameworks/themes/VividBlueTheme/src/main/resources/assets/JewelButton.svg
copy to frameworks/themes/VividBlueTheme/src/main/resources/assets/JewelButton2.svg
index 6c0eb82..ad0c128 100644
--- a/frameworks/themes/VividBlueTheme/src/main/resources/assets/JewelButton.svg
+++ b/frameworks/themes/VividBlueTheme/src/main/resources/assets/JewelButton2.svg
@@ -1,3 +1,4 @@
+
 <!--
 
   Licensed to the Apache Software Foundation (ASF) under one or more
@@ -16,24 +17,25 @@
   limitations under the License.
 
 -->
-<svg viewBox="0 0 152 42" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
+
+<svg width="152px" height="42px" viewBox="0 0 152 42" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
-        <linearGradient x1="50%" y1="3.10307717%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#FF893B" offset="0%"></stop>
-            <stop stop-color="#FA461E" offset="100%"></stop>
+        <linearGradient x1="50%" y1="3.10307717%" x2="50%" y2="98.2081246%" id="linearGradient-1">
+            <stop stop-color="#3BB0FF" offset="0%"></stop>
+            <stop stop-color="#1E36FA" offset="100%"></stop>
         </linearGradient>
         <rect id="path-2" x="0" y="0" width="150" height="40" rx="3"></rect>
         <linearGradient x1="50%" y1="0%" x2="50%" y2="98.2362085%" id="linearGradient-3">
-            <stop stop-color="#FFBA8E" offset="0%"></stop>
-            <stop stop-color="#E6431D" offset="100%"></stop>
+            <stop stop-color="#8EDEFF" offset="0%"></stop>
+            <stop stop-color="#1D89E6" offset="100%"></stop>
         </linearGradient>
     </defs>
-    <g id="JewelButton" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Button">
-            <g id="Background">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="JewelButton">
+            <g id="Background" transform="translate(1.000000, 1.000000)">
                 <g>
                     <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
-                    <rect stroke="#A93116" stroke-width="1" x="-0.5" y="-0.5" width="151"
height="41" rx="3" ></rect>
+                    <rect stroke="#244084" stroke-width="1" x="-0.5" y="-0.5" width="151"
height="41" rx="3"></rect>
                 </g>
                 <rect stroke="url(#linearGradient-3)" x="0.5" y="0.5" width="149" height="39"
rx="3"></rect>
             </g>

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

Mime
View raw message