You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/03/05 19:03:17 UTC
[royale-asjs] branch feature/vivid-ui-set updated: button changes
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
The following commit(s) were added to refs/heads/feature/vivid-ui-set by this push:
new 7e2373e button changes
7e2373e is described below
commit 7e2373eca000b49a2434eb8b28f8a41f49ae0ecb
Author: Carlos Rovira <ca...@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.