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/11 11:47:49 UTC
[royale-asjs] 06/17: various style changes for textbutton
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 <ca...@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
carlosrovira@apache.org.