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 <[email protected]> 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 [email protected].
