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 <carlosrov...@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 carlosrov...@apache.org.