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 69bd21f79ebdf591951a9a158a658135b7fbbb12
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.

Reply via email to