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:48 UTC
[royale-asjs] 05/17: added jewel button,
and changed classnames to get something decoupled from basic and
more near to what other frameworks do
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 203242c4bb49a25f74253b28aff145b3c2075224
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Mar 7 19:34:46 2018 +0100
added jewel button, and changed classnames to get something decoupled from basic and more near to what other frameworks do
---
.../src/main/royale/ButtonPlayGround.mxml | 4 +++
.../projects/Jewel/src/main/resources/defaults.css | 8 -----
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../royale/jewel/{TextButton.as => Button.as} | 41 ++++++++++++++--------
.../royale/org/apache/royale/jewel/TextButton.as | 5 ++-
frameworks/themes/JewelTheme/pom.xml | 4 +++
.../main/resources/{TextButton.css => Button.css} | 38 ++++----------------
.../JewelTheme/src/main/resources/TextButton.css | 14 ++++----
.../JewelTheme/src/main/resources/defaults.css | 2 +-
9 files changed, 54 insertions(+), 63 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index e7d8fe6..8e0d749 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -35,6 +35,10 @@ limitations under the License.
<js:VerticalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
+ <js:Button/>
+ <js:TextButton text="Basic"/>
+
+ <j:Button/>
<j:TextButton text="C"/>
<js:Spacer height="30"/>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index db367df..b23ca30 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -31,14 +31,6 @@ TextField {
.vTextField--label {}
/*
-* Jewel TextButton
-*/
-TextButton {
-}
-TextButton:hover {}
-TextButton:active {}
-
-/*
* Jewel Slider
*/
Slider {
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 804e1de..06ed837 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -22,6 +22,7 @@
<componentPackage>
<component id="Application" class="org.apache.royale.jewel.Application"/>
+ <component id="Button" class="org.apache.royale.jewel.Button"/>
<component id="TextButton" class="org.apache.royale.jewel.TextButton"/>
<component id="TextField" class="org.apache.royale.jewel.TextField"/>
<component id="Slider" class="org.apache.royale.jewel.Slider"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
similarity index 63%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
index 63beab2..045fa71 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
@@ -18,38 +18,48 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
- import org.apache.royale.html.TextButton;
-
+ import org.apache.royale.html.Button;
+
COMPILE::JS
{
import org.apache.royale.core.WrappedHTMLElement;
import org.apache.royale.html.util.addElementToWrapper;
}
-
+
/**
- * The Button class provides a Jewel Design Library UI-like appearance for
- * a Button.
- *
+ * The Button class is a simple button. Use TextButton for
+ * buttons that should show text. This is the lightest weight
+ * button used for non-text buttons like the arrow buttons
+ * in a Scrollbar or NumericStepper.
+ *
+ * The most common view for this button is CSSButtonView that
+ * allows you to specify a backgroundImage in CSS that defines
+ * the look of the button.
+ *
+ * However, when used in ScrollBar and when composed in many
+ * other components, it is more common to assign a custom view
+ * to the button.
+ *
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.2
+ * @productversion Royale 0.0
*/
- public class TextButton extends org.apache.royale.html.TextButton
+ public class Button extends org.apache.royale.html.Button
{
/**
* Constructor.
- *
+ *
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.2
+ * @productversion Royale 0.0
*/
- public function TextButton()
+ public function Button()
{
super();
}
-
+
/**
* @private
* @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
@@ -57,7 +67,10 @@ package org.apache.royale.jewel
COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
- return super.createElement();
+ addElementToWrapper(this,'button');
+ element.setAttribute('type', 'button');
+ typeNames = "jewel button";
+ return element;
}
}
-}
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as
index 63beab2..30e8f68 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as
@@ -57,7 +57,10 @@ package org.apache.royale.jewel
COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
- return super.createElement();
+ addElementToWrapper(this,'button');
+ element.setAttribute('type', 'button');
+ typeNames = "jewel textbutton";
+ return element;
}
}
}
diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml
index 14bfda6..087dd0e 100644
--- a/frameworks/themes/JewelTheme/pom.xml
+++ b/frameworks/themes/JewelTheme/pom.xml
@@ -65,6 +65,10 @@
<path>../src/main/resources/defaults.css</path>
</include-file>
<include-file>
+ <name>Button.css</name>
+ <path>../src/main/resources/Button.css</path>
+ </include-file>
+ <include-file>
<name>TextButton.css</name>
<path>../src/main/resources/TextButton.css</path>
</include-file>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/TextButton.css b/frameworks/themes/JewelTheme/src/main/resources/Button.css
similarity index 61%
copy from frameworks/themes/JewelTheme/src/main/resources/TextButton.css
copy to frameworks/themes/JewelTheme/src/main/resources/Button.css
index 6bbbaf6..c341bde 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/TextButton.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/Button.css
@@ -21,14 +21,14 @@
/*@namespace svg "library://ns.apache.org/royale/svg";*/
/*
-* Jewel TextButton
+* Jewel Button
*/
-
-TextButton, TextButton:hover {
+.button, .button:hover {
cursor:pointer;
/* Background: */
+ border:1px; /*without this svg shows scaled and bigger*/
border-image-source: url(assets/JewelButton2.svg) ;
border-image-slice: 4;
border-image-width: 4;
@@ -37,39 +37,15 @@ TextButton, TextButton:hover {
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 #555;
-
- padding: 10px 32px;
+.button:hover {
-
- /*background: url(assets/4slicewithpattern.svg);
- background-size: cover;
- width: fit-content;
- height: fit-content;*/
- /*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);
- border: 1px solid #BC573C;
- line-height:16px;
- padding: 8px 16px;*/
-}
+.button:active {
-TextButton:active {
- /*box-shadow: #E6431D 0 1px 0 inset;
- text-shadow: 0 -1px 0 #5F3A29;*/
}
-TextButton:focus {
+.button:focus {
outline:0;
}
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/TextButton.css b/frameworks/themes/JewelTheme/src/main/resources/TextButton.css
index 6bbbaf6..7ff03f6 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/TextButton.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/TextButton.css
@@ -18,17 +18,16 @@
*/
@namespace "library://ns.apache.org/royale/jewel";
-/*@namespace svg "library://ns.apache.org/royale/svg";*/
/*
* Jewel TextButton
*/
-
-TextButton, TextButton:hover {
+.textbutton, .textbutton:hover {
cursor:pointer;
/* Background: */
+ border:1px; /*without this svg shows scaled and bigger*/
border-image-source: url(assets/JewelButton2.svg) ;
border-image-slice: 4;
border-image-width: 4;
@@ -47,7 +46,6 @@ TextButton, TextButton:hover {
padding: 10px 32px;
-
/*background: url(assets/4slicewithpattern.svg);
background-size: cover;
width: fit-content;
@@ -59,17 +57,17 @@ TextButton, TextButton:hover {
*/
}
-TextButton:hover {
+.textbutton:hover {
/*background: linear-gradient(#FD9958, #F76943);
border: 1px solid #BC573C;
line-height:16px;
padding: 8px 16px;*/
}
-TextButton:active {
+.textbutton:active {
/*box-shadow: #E6431D 0 1px 0 inset;
text-shadow: 0 -1px 0 #5F3A29;*/
}
-TextButton:focus {
- outline:0;
+.textbutton:focus {
+ outline: 0;
}
\ 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 845a3a4..9011932 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -25,7 +25,7 @@
-webkit-box-sizing: border-box;
box-sizing: border-box;
- fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject");
+ /* fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject"); */
}
.page-content
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.