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/12 14:32:29 UTC
[royale-asjs] branch jewel-ui updated (fe7cc3f -> 8d98a9f)
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a change to branch jewel-ui
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git.
from fe7cc3f add layouts to jewel that uses CSS classes instead of inline styles. This is still a work in progress and layouts are only put as placeholders
add 8a76108 fix vscode for Core and set sdk
add 6063d82 Change order in computeClassNames to get typenames before classNames (just for organization purposes in html output)
new 115f9af refactor all work on vivid branch to jewel for all files
new c9b21b6 fixes typo, introduces viewport in html and try to move fonts to theme, but this one doesn't work (so put in theme temporaly again)
new 71cd693 add JewelThemeFontInject and configuration, but still doesn't work
new a02ffb4 remove JewelThemeFontInject from manifest since should not be used in mxml
new 81aaae9 added jewel button, and changed classnames to get something decoupled from basic and more near to what other frameworks do
new f2d213e various style changes for textbutton
new 4a021af introducing SASS processing in JewelTheme. Only Maven, ANT should be updated to support this
new ca23649 change from scss to sass syntax
new db89248 introduce variables
new 99bd984 wiring textbutton with variables
new aa17fd2 end transforming actual files to sass syntax
new 6c80e25 partial changes to create various themes with different colors still need much work
new 4846918 changes to get two initial themes blue and red
new 882b254 upgrade projects in this branch to 0.9.3
new e14d393 fix button disabled state and appearence
new 468751c fix paddings and min heigh in buttons, but this should change again to em instead of px to handle responsiveness
new 33e1c9c a more logical button styles, organization of example and more polished
new 861cf0d font changes
new ed91db4 library.swf now gets info about JewelThemeFontInject
new 2a081c0 commeting font line (JewelThemeFontInject) so JewelExample can compile
new a18e154 add layouts to jewel that uses CSS classes instead of inline styles. This is still a work in progress and layouts are only put as placeholders
new 8d98a9f Merge branch 'jewel-ui' of https://github.com/apache/royale-asjs into jewel-ui
The 22 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
.../projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as | 2 +-
frameworks/{themes/JewelTheme => projects/Core}/.vscode/settings.json | 0
frameworks/projects/Core/asconfig.json | 4 ++--
.../Core/src/main/royale/org/apache/royale/core/CSSClassList.as | 2 +-
frameworks/{themes/JewelTheme => projects/HTML}/.vscode/settings.json | 0
5 files changed, 4 insertions(+), 4 deletions(-)
copy frameworks/{themes/JewelTheme => projects/Core}/.vscode/settings.json (100%)
copy frameworks/{themes/JewelTheme => projects/HTML}/.vscode/settings.json (100%)
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 07/22: introducing SASS processing in JewelTheme.
Only Maven, ANT should be updated to support this
Posted by ca...@apache.org.
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 4a021aff216b92eca84d4725580c497432f3ca81
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Mar 8 16:57:35 2018 +0100
introducing SASS processing in JewelTheme.
Only Maven, ANT should be updated to support this
---
frameworks/themes/JewelTheme/pom.xml | 26 +++++++++++++++++++
.../JewelTheme/src/main/resources/defaults.css | 30 ++++++++++++----------
.../resources/{defaults.css => sass/defaults.scss} | 9 ++++++-
pom.xml | 8 ++++++
4 files changed, 59 insertions(+), 14 deletions(-)
diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml
index 087dd0e..7232d7f 100644
--- a/frameworks/themes/JewelTheme/pom.xml
+++ b/frameworks/themes/JewelTheme/pom.xml
@@ -79,6 +79,32 @@
</includeFiles>
</configuration>
</plugin>
+ <plugin>
+ <groupId>nl.geodienstencentrum.maven</groupId>
+ <artifactId>sass-maven-plugin</artifactId>
+ <version>3.5.2</version>
+ <configuration>
+ <resources>
+ <resource>
+ <source>
+ <directory>${basedir}/src/main/resources/sass</directory>
+ <includes>
+ <include>**/*.scss</include>
+ </includes>
+ </source>
+ <destination>${basedir}/src/main/resources</destination>
+ </resource>
+ </resources>
+ </configuration>
+ <executions>
+ <execution>
+ <id>generate-css-using-sass</id>
+ <goals>
+ <goal>update-stylesheets</goal>
+ </goals>
+ </execution>
+ </executions>
+ </plugin>
</plugins>
</build>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 93b9cd7..ea29ba4 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -16,19 +16,23 @@
* limitations under the License.
*
*/
+@namespace j "library://ns.apache.org/royale/jewel";
+@namespace "http://www.w3.org/1999/xhtml";
+.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"); */
+}
- @namespace j "library://ns.apache.org/royale/jewel";
- @namespace "http://www.w3.org/1999/xhtml";
+.royale {
+ padding: 10px;
+ margin: 10px;
+}
- .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"); */
- }
+body {
+ font: 100% "Lato-Bold", sans-serif;
+ color: #333;
+}
- .royale {
- padding: 10px;
- margin: 10px;
- }
-
\ No newline at end of file
+/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/sass/defaults.scss
similarity index 90%
copy from frameworks/themes/JewelTheme/src/main/resources/defaults.css
copy to frameworks/themes/JewelTheme/src/main/resources/sass/defaults.scss
index 93b9cd7..b31b1ab 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/sass/defaults.scss
@@ -31,4 +31,11 @@
padding: 10px;
margin: 10px;
}
-
\ No newline at end of file
+
+$font-stack: 'Lato-Bold', sans-serif;
+$primary-color: #333;
+
+body {
+ font: 100% $font-stack;
+ color: $primary-color;
+}
\ No newline at end of file
diff --git a/pom.xml b/pom.xml
index d72ac3b..1391233 100644
--- a/pom.xml
+++ b/pom.xml
@@ -150,6 +150,12 @@
<artifactId>build-helper-maven-plugin</artifactId>
<version>3.0.0</version>
</plugin>
+
+ <plugin>
+ <groupId>nl.geodienstencentrum.maven</groupId>
+ <artifactId>sass-maven-plugin</artifactId>
+ <version>3.5.2</version>
+ </plugin>
<!--
<plugin>
<groupId>org.sonarsource.scanner.maven</groupId>
@@ -197,6 +203,8 @@
<!-- Ignore IntelliJ IDEA project files -->
<exclude>**/*.iml</exclude>
<exclude>**/.idea/**</exclude>
+ <!-- SASS cc.map generated files by sass-maven-plugin-->
+ <exclude>**/*.css.map</exclude>
<!--
Exclude any eventually existing content of target directories.
Some times when building with a bigger maven reactor and then
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 14/22: upgrade projects in this branch to 0.9.3
Posted by ca...@apache.org.
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 882b254ad33dbc8cf6428486a6ea879649df0b7d
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Mar 10 10:07:58 2018 +0100
upgrade projects in this branch to 0.9.3
---
examples/royale/JewelExample/pom.xml | 14 +++++++-------
frameworks/projects/Jewel/pom.xml | 28 ++++++++++++++--------------
frameworks/themes/JewelTheme/pom.xml | 4 ++--
3 files changed, 23 insertions(+), 23 deletions(-)
diff --git a/examples/royale/JewelExample/pom.xml b/examples/royale/JewelExample/pom.xml
index d63d545..e71767e 100644
--- a/examples/royale/JewelExample/pom.xml
+++ b/examples/royale/JewelExample/pom.xml
@@ -23,11 +23,11 @@
<parent>
<groupId>org.apache.royale.examples</groupId>
<artifactId>examples-royale</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
</parent>
<artifactId>JewelExample</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
<packaging>swf</packaging>
<name>Apache Royale: Examples: Royale: JewelExample</name>
@@ -65,35 +65,35 @@
<dependency>
<groupId>org.apache.royale.framework</groupId>
<artifactId>Jewel</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<classifier>swf</classifier>
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
<artifactId>Jewel</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<classifier>js</classifier>
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
<artifactId>Basic</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<classifier>js</classifier>
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
<artifactId>HTML</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<classifier>swf</classifier>
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
<artifactId>JewelTheme</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<scope>theme</scope>
</dependency>
diff --git a/frameworks/projects/Jewel/pom.xml b/frameworks/projects/Jewel/pom.xml
index 74e9f8d..7c02708 100644
--- a/frameworks/projects/Jewel/pom.xml
+++ b/frameworks/projects/Jewel/pom.xml
@@ -23,11 +23,11 @@
<parent>
<groupId>org.apache.royale.framework</groupId>
<artifactId>projects</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
</parent>
<artifactId>Jewel</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
<packaging>swc</packaging>
<name>Apache Royale: Framework: Libs: Jewel</name>
@@ -74,84 +74,84 @@
<dependency>
<groupId>org.apache.royale.framework</groupId>
<artifactId>Core</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<classifier>swf</classifier>
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
<artifactId>Core</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<classifier>js</classifier>
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
<artifactId>Binding</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<classifier>swf</classifier>
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
<artifactId>Binding</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<classifier>js</classifier>
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
<artifactId>Graphics</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<classifier>swf</classifier>
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
<artifactId>Graphics</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<classifier>js</classifier>
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
<artifactId>Collections</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<classifier>swf</classifier>
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
<artifactId>Collections</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<classifier>js</classifier>
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
<artifactId>Basic</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<classifier>swf</classifier>
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
<artifactId>Basic</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<classifier>js</classifier>
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
<artifactId>HTML</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<classifier>swf</classifier>
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
<artifactId>HTML</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<classifier>js</classifier>
</dependency>
diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml
index 702d626..4096e7e 100644
--- a/frameworks/themes/JewelTheme/pom.xml
+++ b/frameworks/themes/JewelTheme/pom.xml
@@ -23,11 +23,11 @@
<parent>
<groupId>org.apache.royale.framework</groupId>
<artifactId>themes</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
</parent>
<artifactId>JewelTheme</artifactId>
- <version>0.9.2-SNAPSHOT</version>
+ <version>0.9.3-SNAPSHOT</version>
<packaging>swc</packaging>
<name>Apache Royale: Framework: Themes: JewelTheme</name>
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 15/22: fix button disabled state and appearence
Posted by ca...@apache.org.
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 e14d3930208e53f19dc6c0bb301991deb5845bef
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Mar 10 11:24:51 2018 +0100
fix button disabled state and appearence
---
.../main/royale/org/apache/royale/jewel/Button.as | 4 +--
.../JewelTheme/src/main/resources/defaults.css | 36 +++++++++++++++++-----
.../src/main/resources/royale-jewel-blue.css | 36 +++++++++++++++++-----
.../src/main/resources/royale-jewel-red.css | 36 +++++++++++++++++-----
.../themes/JewelTheme/src/main/sass/_button.sass | 5 +--
.../themes/JewelTheme/src/main/sass/_mixins.sass | 2 +-
.../JewelTheme/src/main/sass/_textbutton.sass | 6 ++--
7 files changed, 94 insertions(+), 31 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
index 0d73362..d008476 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
@@ -86,7 +86,7 @@ package org.apache.royale.jewel
private var _primary:Boolean = false;
/**
- * A boolean flag to activate "button--primary" effect selector.
+ * A boolean flag to activate "primary" effect selector.
* Applies primary color display effect.
* Colors are defined in royale-jewel.css
*
@@ -108,7 +108,7 @@ package org.apache.royale.jewel
COMPILE::JS
{
- addOrRemove("button--primary",value);
+ addOrRemove("primary",value);
setClassName(computeFinalClassNames());
}
}
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index c092842..da90252 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -31,31 +31,32 @@
/**
* Jewel Button
*/
-.button, .button:hover, .textbutton, .textbutton:hover {
+.jewel.button, .jewel.button:hover, .jewel.textbutton, .jewel.textbutton:hover {
cursor: pointer;
display: inline-block;
margin: 0;
padding: 10px 0px;
min-width: 74px;
+ min-height: 1em;
/* Background: */
border: none;
border-radius: 3px;
}
-.button--primary {
+.jewel.button.primary {
background-color: #006CEB;
transition-duration: 0.4s;
}
-.button--primary:hover {
+.jewel.button.primary:hover {
background-color: #0b7bff;
}
-.button--primary:active {
+.jewel.button.primary:active {
background-color: #005ecc;
}
-.button--primary:focus {
+.jewel.button.primary:focus {
outline: 0;
}
-.button--primary [disabled] {
+.jewel.button.primary[disabled] {
background-color: #CCCCCC;
color: #888888;
cursor: unset;
@@ -64,7 +65,7 @@
/**
* Jewel TextButton
*/
-.textbutton, .textbutton:hover {
+.jewel.textbutton, .jewel.textbutton:hover {
/* TextField */
color: rgba(255, 255, 255, 0.9);
font-family: "Lato-Bold", sans-serif;
@@ -73,10 +74,29 @@
text-transform: uppercase;
text-decoration: none;
}
-.textbutton [disabled] {
+.jewel.textbutton [disabled] {
text-shadow: unset;
}
+.jewel.textbutton.primary {
+ background-color: #006CEB;
+ transition-duration: 0.4s;
+}
+.jewel.textbutton.primary:hover {
+ background-color: #0b7bff;
+}
+.jewel.textbutton.primary:active {
+ background-color: #005ecc;
+}
+.jewel.textbutton.primary:focus {
+ outline: 0;
+}
+.jewel.textbutton.primary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
/**
* Jewel TextField
*/
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
index 7d56600..f748283 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
@@ -31,31 +31,32 @@
/**
* Jewel Button
*/
-.button, .button:hover, .textbutton, .textbutton:hover {
+.jewel.button, .jewel.button:hover, .jewel.textbutton, .jewel.textbutton:hover {
cursor: pointer;
display: inline-block;
margin: 0;
padding: 10px 0px;
min-width: 74px;
+ min-height: 1em;
/* Background: */
border: none;
border-radius: 3px;
}
-.button--primary {
+.jewel.button.primary {
background-color: #006CEB;
transition-duration: 0.4s;
}
-.button--primary:hover {
+.jewel.button.primary:hover {
background-color: #0b7bff;
}
-.button--primary:active {
+.jewel.button.primary:active {
background-color: #005ecc;
}
-.button--primary:focus {
+.jewel.button.primary:focus {
outline: 0;
}
-.button--primary [disabled] {
+.jewel.button.primary[disabled] {
background-color: #CCCCCC;
color: #888888;
cursor: unset;
@@ -64,7 +65,7 @@
/**
* Jewel TextButton
*/
-.textbutton, .textbutton:hover {
+.jewel.textbutton, .jewel.textbutton:hover {
/* TextField */
color: rgba(255, 255, 255, 0.9);
font-family: "Lato-Bold", sans-serif;
@@ -73,10 +74,29 @@
text-transform: uppercase;
text-decoration: none;
}
-.textbutton [disabled] {
+.jewel.textbutton [disabled] {
text-shadow: unset;
}
+.jewel.textbutton.primary {
+ background-color: #006CEB;
+ transition-duration: 0.4s;
+}
+.jewel.textbutton.primary:hover {
+ background-color: #0b7bff;
+}
+.jewel.textbutton.primary:active {
+ background-color: #005ecc;
+}
+.jewel.textbutton.primary:focus {
+ outline: 0;
+}
+.jewel.textbutton.primary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
/**
* Jewel TextField
*/
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
index 56a785d..3bda370 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
@@ -31,31 +31,32 @@
/**
* Jewel Button
*/
-.button, .button:hover, .textbutton, .textbutton:hover {
+.jewel.button, .jewel.button:hover, .jewel.textbutton, .jewel.textbutton:hover {
cursor: pointer;
display: inline-block;
margin: 0;
padding: 10px 0px;
min-width: 74px;
+ min-height: 1em;
/* Background: */
border: none;
border-radius: 3px;
}
-.button--primary {
+.jewel.button.primary {
background-color: #FF0000;
transition-duration: 0.4s;
}
-.button--primary:hover {
+.jewel.button.primary:hover {
background-color: #ff1f1f;
}
-.button--primary:active {
+.jewel.button.primary:active {
background-color: #e00000;
}
-.button--primary:focus {
+.jewel.button.primary:focus {
outline: 0;
}
-.button--primary [disabled] {
+.jewel.button.primary[disabled] {
background-color: #CCCCCC;
color: #888888;
cursor: unset;
@@ -64,7 +65,7 @@
/**
* Jewel TextButton
*/
-.textbutton, .textbutton:hover {
+.jewel.textbutton, .jewel.textbutton:hover {
/* TextField */
color: rgba(255, 255, 255, 0.9);
font-family: "Lato-Bold", sans-serif;
@@ -73,10 +74,29 @@
text-transform: uppercase;
text-decoration: none;
}
-.textbutton [disabled] {
+.jewel.textbutton [disabled] {
text-shadow: unset;
}
+.jewel.textbutton.primary {
+ background-color: #FF0000;
+ transition-duration: 0.4s;
+}
+.jewel.textbutton.primary:hover {
+ background-color: #ff1f1f;
+}
+.jewel.textbutton.primary:active {
+ background-color: #e00000;
+}
+.jewel.textbutton.primary:focus {
+ outline: 0;
+}
+.jewel.textbutton.primary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
/**
* Jewel TextField
*/
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
index 8d416f2..9d78f0f 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
@@ -27,16 +27,17 @@
margin: 0 //1rem
padding: 10px 0px //.938em 1.875em
min-width: $button-min-width
+ //min-height: 1em
/* Background: */
border: none // .094em solid
border-radius: 3px //.625em
//box-shadow: 0 .375em .313em -.313em rgba(black,.8), inset 0 .063em $off-wht, inset 0 -.188em rgba(black,.15)
-.button, .button:hover
+.jewel.button, .jewel.button:hover
@extend %button-def
-.button--primary
+.jewel.button.primary
+button-theme($primary-color)
//SVGs
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
index 10d21e4..5a28fc8 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
@@ -30,7 +30,7 @@
//box-shadow: 0 .063em $off-wht, inset 0 0 1.094em darken($btn-color, 40%), inset 0 .063em darken($btn-color, 20%),inset 0 -0.188em darken($btn-color, 20%)
&:focus
outline: 0
- [disabled]
+ &[disabled]
background-color: $disabled-color
color: $font-disabled-color
cursor: unset
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
index 4cf7a0f..3994d20 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
@@ -33,14 +33,16 @@
transform: uppercase
decoration: none
//shadow: 0 .063em rgba(black,.3)
-
[disabled]
text:
shadow: unset
-.textbutton, .textbutton:hover
+.jewel.textbutton, .jewel.textbutton:hover
@extend %textbutton-def
+.jewel.textbutton.primary
+ +button-theme($primary-color)
+
// /* TextField: */
// font-family: $font-stack
// font-size: 14px
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 02/22: fixes typo,
introduces viewport in html and try to move fonts to theme,
but this one doesn't work (so put in theme temporaly again)
Posted by ca...@apache.org.
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 c9b21b67fefdd030cdcb1fe401b089f8598a4e05
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Mar 6 18:54:31 2018 +0100
fixes typo, introduces viewport in html and try to move fonts to theme, but this one doesn't work (so put in theme temporaly again)
---
.../royale/org/apache/royale/jewel/Application.as | 3 +-
frameworks/themes/JewelTheme/asconfig.json | 2 +-
.../src/main/config/compile-swf-config.xml | 99 ++++++++++++++++++++++
.../JewelTheme/src/main/resources/TextButton.css | 13 +--
.../src/main/royale/JewelThemeClasses.as | 19 ++++-
5 files changed, 122 insertions(+), 14 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Application.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Application.as
index 0b447f6..fed1673 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Application.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Application.as
@@ -39,7 +39,8 @@ package org.apache.royale.jewel
* constructor.
*
* <inject_html>
- * <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
+ * <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
+ * <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
* </inject_html>
*
* @langversion 3.0
diff --git a/frameworks/themes/JewelTheme/asconfig.json b/frameworks/themes/JewelTheme/asconfig.json
index 2a1ae6c..1cb76c0 100644
--- a/frameworks/themes/JewelTheme/asconfig.json
+++ b/frameworks/themes/JewelTheme/asconfig.json
@@ -29,6 +29,6 @@
"include-sources": [
"src/main/royale"
],
- "output": "target/JewelThemeClasses.swc"
+ "output": "target/JewelTheme.swc"
}
}
diff --git a/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml b/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml
new file mode 100644
index 0000000..55679c7
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml
@@ -0,0 +1,99 @@
+<!--
+
+ 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.
+
+-->
+<royale-config>
+
+ <compiler>
+ <accessible>false</accessible>
+
+ <!-- build both SWF and JS. -->
+ <targets>
+ <target>JSRoyale</target>
+ </targets>
+ <strict-xml>true</strict-xml>
+
+ <external-library-path>
+ <path-element>${env.AIR_HOME}/frameworks/libs/air/airglobal.swc</path-element>
+ <path-element>../../../../../libs/Binding.swc</path-element>
+ <path-element>../../../../../libs/Core.swc</path-element>
+ <path-element>../../../../../libs/Graphics.swc</path-element>
+ <path-element>../../../../../libs/Basic.swc</path-element>
+ <path-element>../../../../../libs/Collections.swc</path-element>
+ <path-element>../../../../../libs/HTML.swc</path-element>
+ <path-element>../../../../../libs/Jewel.swc</path-element>
+ </external-library-path>
+
+ <allow-subclass-overrides>true</allow-subclass-overrides>
+ <mxml>
+ <children-as-data>true</children-as-data>
+ </mxml>
+ <binding-value-change-event>org.apache.royale.events.ValueChangeEvent</binding-value-change-event>
+ <binding-value-change-event-kind>org.apache.royale.events.ValueChangeEvent</binding-value-change-event-kind>
+ <binding-value-change-event-type>valueChange</binding-value-change-event-type>
+
+ <define>
+ <name>COMPILE::SWF</name>
+ <value>true</value>
+ </define>
+ <define>
+ <name>COMPILE::JS</name>
+ <value>true</value>
+ </define>
+
+ <keep-as3-metadata>
+ <name>Bindable</name>
+ <name>Managed</name>
+ <name>ChangeEvent</name>
+ <name>NonCommittingChangeEvent</name>
+ <name>Transient</name>
+ </keep-as3-metadata>
+
+ <locale/>
+
+ <library-path/>
+
+ <source-path>
+ <path-element>../royale</path-element>
+ </source-path>
+
+ <warn-no-constructor>false</warn-no-constructor>
+ </compiler>
+
+ <include-file>
+ <name>defaults.css</name>
+ <path>../resources/defaults.css</path>
+ </include-file>
+ <include-file>
+ <name>TextButton.css</name>
+ <path>../resources/TextButton.css</path>
+ </include-file>
+ <include-file>
+ <name>TextField.css</name>
+ <path>../resources/TextField.css</path>
+ </include-file>
+
+ <include-lookup-only>true</include-lookup-only>
+
+ <include-classes>
+ <class>JewelThemeClasses</class>
+ </include-classes>
+
+ <target-player>${playerglobal.version}</target-player>
+
+
+</royale-config>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/TextButton.css b/frameworks/themes/JewelTheme/src/main/resources/TextButton.css
index cbbfb51..6bbbaf6 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/TextButton.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/TextButton.css
@@ -28,6 +28,7 @@ TextButton, TextButton:hover {
cursor:pointer;
+ /* Background: */
border-image-source: url(assets/JewelButton2.svg) ;
border-image-slice: 4;
border-image-width: 4;
@@ -45,25 +46,17 @@ TextButton, TextButton:hover {
text-shadow: 0 1px 0 #555;
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: */
+ 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 {
diff --git a/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as b/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
index 394b871..1a1733c 100644
--- a/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
+++ b/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
@@ -21,13 +21,28 @@ package
/**
* @private
- * This class is used to link additional classes into jeweltheme.swc
+ * This class is used to link additional classes into JewelTheme.swc
* beyond those that are found by dependecy analysis starting
* from the classes specified in manifest.xml.
*/
internal class JewelThemeClasses
{
-
+ /**
+ * constructor.
+ *
+ * <inject_html>
+ * <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
+ * </inject_html>
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function JewelThemeClasses()
+ {
+ super();
+ }
}
}
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 22/22: Merge branch 'jewel-ui' of
https://github.com/apache/royale-asjs into jewel-ui
Posted by ca...@apache.org.
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 8d98a9fffe9f8812ece6d72a1ed04f304d966b3b
Merge: a18e154 fe7cc3f
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Mar 12 15:32:15 2018 +0100
Merge branch 'jewel-ui' of https://github.com/apache/royale-asjs into jewel-ui
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 21/22: add layouts to jewel that uses CSS classes
instead of inline styles. This is still a work in progress and layouts are
only put as placeholders
Posted by ca...@apache.org.
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 a18e154e1d0e3500c4ccf4e4aef3a7c3e9a6b177
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Mar 12 15:30:11 2018 +0100
add layouts to jewel that uses CSS classes instead of inline styles. This is still a work in progress and layouts are only put as placeholders
---
.../src/main/royale/ButtonPlayGround.mxml | 3 -
.../projects/Jewel/src/main/resources/defaults.css | 4 +
.../Jewel/src/main/resources/jewel-manifest.xml | 4 +
.../projects/Jewel/src/main/royale/JewelClasses.as | 3 +
.../main/royale/org/apache/royale/jewel/Button.as | 30 +-
.../royale/org/apache/royale/jewel/TextButton.as | 6 +-
.../royale/jewel/beads/layouts/HorizontalLayout.as | 205 +++++++++++++
.../royale/jewel/beads/layouts/VerticalLayout.as | 193 ++++++++++++
.../layouts/VerticalLayoutWithPaddingAndGap.as | 341 +++++++++++++++++++++
9 files changed, 769 insertions(+), 20 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index 5ca13a1..f217fca 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -31,9 +31,6 @@ limitations under the License.
]]>
</fx:Script>
- <js:beads>
- <js:VerticalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
<js:Label text="Basic"/>
<js:Button/>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index b23ca30..f09b980 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -19,6 +19,10 @@
@namespace "library://ns.apache.org/royale/jewel";
+.vertical-layout-padding-gap {
+ display: block !important;
+}
+
/*
* Jewel TextField
*/
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 1ba4366..b3bfccb 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -29,5 +29,9 @@
<component id="RadioButton" class="org.apache.royale.jewel.RadioButton"/>
<component id="Disabled" class="org.apache.royale.jewel.beads.Disabled"/>
+
+ <component id="HorizontalLayout" class="org.apache.royale.jewel.beads.layouts.HorizontalLayout"/>
+ <component id="VerticalLayout" class="org.apache.royale.jewel.beads.layouts.VerticalLayout"/>
+ <component id="VerticalLayoutWithPaddingAndGap" class="org.apache.royale.jewel.beads.layouts.VerticalLayoutWithPaddingAndGap"/>
</componentPackage>
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index cc74f2e..3cb788e 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -37,6 +37,9 @@ package
import org.apache.royale.jewel.beads.RadioButtonView; RadioButtonView;
}
+ import org.apache.royale.jewel.beads.layouts.HorizontalLayout; HorizontalLayout;
+ import org.apache.royale.jewel.beads.layouts.VerticalLayout; VerticalLayout;
+ import org.apache.royale.jewel.beads.layouts.VerticalLayoutWithPaddingAndGap; VerticalLayoutWithPaddingAndGap;
}
}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
index cd74a24..1dadb55 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
@@ -60,6 +60,8 @@ package org.apache.royale.jewel
{
super();
+ typeNames = "jewel button";
+
COMPILE::JS
{
_classList = new CSSClassList();
@@ -73,15 +75,26 @@ package org.apache.royale.jewel
* @private
* @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
*/
- COMPILE::JS
+ /*COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
addElementToWrapper(this,'button');
element.setAttribute('type', 'button');
typeNames = "jewel button";
return element;
- }
+ }*/
+
+ COMPILE::JS
+ protected function addOrRemove(classNameVal:String,add:Boolean):void
+ {
+ add ? _classList.add(classNameVal) : _classList.remove(classNameVal);
+ }
+ COMPILE::JS
+ override protected function computeFinalClassNames():String
+ {
+ return super.computeFinalClassNames() + " " + _classList.compute();
+ }
private var _primary:Boolean = false;
@@ -175,18 +188,5 @@ package org.apache.royale.jewel
}
}
}
-
-
- COMPILE::JS
- protected function addOrRemove(classNameVal:String,add:Boolean):void
- {
- add ? _classList.add(classNameVal) : _classList.remove(classNameVal);
- }
-
- COMPILE::JS
- override protected function computeFinalClassNames():String
- {
- return _classList.compute() + super.computeFinalClassNames();
- }
}
}
\ 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 d247b43..b02e5fe 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
@@ -50,6 +50,8 @@ package org.apache.royale.jewel
public function TextButton()
{
super();
+
+ typeNames = "jewel textbutton";
}
/**
@@ -128,13 +130,13 @@ package org.apache.royale.jewel
* @private
* @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
*/
- COMPILE::JS
+ /*COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
addElementToWrapper(this,'button');
element.setAttribute('type', 'button');
typeNames = "jewel textbutton";
return element;
- }
+ }*/
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
new file mode 100644
index 0000000..66fc6c1
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
@@ -0,0 +1,205 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.layouts
+{
+ import org.apache.royale.core.LayoutBase;
+
+ import org.apache.royale.core.IBeadLayout;
+ import org.apache.royale.core.IBeadModel;
+ import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+ import org.apache.royale.core.ILayoutChild;
+ import org.apache.royale.core.ILayoutHost;
+ import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.ILayoutParent;
+ import org.apache.royale.core.IParentIUIBase;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.layout.EdgeData;
+ import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.geom.Rectangle;
+ import org.apache.royale.utils.CSSUtils;
+ COMPILE::SWF {
+ import org.apache.royale.core.UIBase;
+ }
+ COMPILE::JS {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ /**
+ * The HorizontalLayout class is a simple layout
+ * bead. It takes the set of children and lays them out
+ * horizontally in one row, separating them according to
+ * CSS layout rules for margin and vertical-align styles.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class HorizontalLayout extends LayoutBase implements IBeadLayout
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function HorizontalLayout()
+ {
+ super();
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ * @royaleignorecoercion HTMLElement
+ * @royaleignorecoercion org.apache.royale.core.IUIBase
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ COMPILE::JS
+ {
+ var base:IUIBase = value as IUIBase;
+ if (base.element.style.display !== "none") {
+ base.element.style.display = "block";
+ }
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBeadLayout#layout
+ * @royaleignorecoercion org.apache.royale.core.ILayoutHost
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function layout():Boolean
+ {
+ COMPILE::SWF
+ {
+ var contentView:ILayoutView = layoutView;
+
+ var n:Number = contentView.numElements;
+ if (n == 0) return false;
+
+ var maxWidth:Number = 0;
+ var maxHeight:Number = 0;
+ var hostWidthSizedToContent:Boolean = host.isWidthSizedToContent();
+ var hostHeightSizedToContent:Boolean = host.isHeightSizedToContent();
+ var hostWidth:Number = host.width;
+ var hostHeight:Number = host.height;
+
+ var ilc:ILayoutChild;
+ var data:Object;
+ var canAdjust:Boolean = false;
+
+ var paddingMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getPaddingMetrics(host);
+ var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
+
+ // adjust the host's usable size by the metrics. If hostSizedToContent, then the
+ // resulting adjusted value may be less than zero.
+ hostWidth -= paddingMetrics.left + paddingMetrics.right + borderMetrics.left + borderMetrics.right;
+ hostHeight -= paddingMetrics.top + paddingMetrics.bottom + borderMetrics.top + borderMetrics.bottom;
+
+ var xpos:Number = borderMetrics.left + paddingMetrics.left;
+ var ypos:Number = borderMetrics.top + paddingMetrics.top;
+
+ // First pass determines the data about the child.
+ for(var i:int=0; i < n; i++)
+ {
+ var child:IUIBase = contentView.getElementAt(i) as IUIBase;
+ if (child == null || !child.visible) continue;
+ var positions:Object = childPositions(child);
+ var margins:Object = childMargins(child, hostWidth, hostHeight);
+
+ ilc = child as ILayoutChild;
+
+ xpos += margins.left;
+
+ var childYpos:Number = ypos + margins.top; // default y position
+
+ var childHeight:Number = child.height;
+ if (ilc != null && !isNaN(ilc.percentHeight)) {
+ childHeight = hostHeight * ilc.percentHeight/100.0;
+ ilc.setHeight(childHeight);
+ }
+ var valign:Object = ValuesManager.valuesImpl.getValue(child, "vertical-align");
+ if (valign == "middle")
+ {
+ childYpos = hostHeight/2 - (childHeight + margins.top + margins.bottom)/2;
+ }
+
+ if (ilc) {
+ ilc.setX(xpos);
+ ilc.setY(childYpos);
+
+ if (!isNaN(ilc.percentWidth)) {
+ var newWidth:Number = hostWidth * ilc.percentWidth / 100;
+ ilc.setWidth(newWidth);
+ }
+
+ } else {
+ child.x = xpos;
+ child.y = childYpos;
+ }
+
+ xpos += child.width + margins.right;
+ }
+
+ return true;
+
+ }
+ COMPILE::JS
+ {
+ var children:Array;
+ var i:int;
+ var n:int;
+ var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+
+ contentView.element.style["white-space"] = "nowrap";
+
+ children = contentView.internalChildren();
+
+
+ n = children.length;
+ for (i = 0; i < n; i++)
+ {
+ var child:WrappedHTMLElement = children[i] as WrappedHTMLElement;
+ if (child == null) continue;
+
+ /*child.royale_wrapper.setDisplayStyleForLayout('inline-block');
+ if (child.style.display !== 'none')
+ {
+ child.style.display = 'inline-block';
+ }*/
+ }
+
+ return true;
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
new file mode 100644
index 0000000..98de873
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
@@ -0,0 +1,193 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.layouts
+{
+ import org.apache.royale.core.LayoutBase;
+
+ import org.apache.royale.core.IBeadLayout;
+ import org.apache.royale.core.IBeadModel;
+ import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+ import org.apache.royale.core.ILayoutChild;
+ import org.apache.royale.core.ILayoutHost;
+ import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.ILayoutParent;
+ import org.apache.royale.core.IParentIUIBase;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.layout.EdgeData;
+ import org.apache.royale.core.ValuesManager;
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.geom.Rectangle;
+ import org.apache.royale.utils.CSSUtils;
+
+ /**
+ * The VerticalLayout class is a simple layout
+ * bead. It takes the set of children and lays them out
+ * vertically in one column, separating them according to
+ * CSS layout rules for margin and horizontal-align styles.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class VerticalLayout extends LayoutBase implements IBeadLayout
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function VerticalLayout()
+ {
+ super();
+ }
+
+ /**
+ * Layout children vertically
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ * @royaleignorecoercion org.apache.royale.core.ILayoutHost
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function layout():Boolean
+ {
+ COMPILE::SWF
+ {
+ var contentView:ILayoutView = layoutView;
+
+ var n:Number = contentView.numElements;
+ if (n == 0) return false;
+
+ var maxWidth:Number = 0;
+ var maxHeight:Number = 0;
+ var hostWidthSizedToContent:Boolean = host.isWidthSizedToContent();
+ var hostHeightSizedToContent:Boolean = host.isHeightSizedToContent();
+ var hostWidth:Number = host.width;
+ var hostHeight:Number = host.height;
+
+ var ilc:ILayoutChild;
+ var data:Object;
+ var canAdjust:Boolean = false;
+
+ var paddingMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getPaddingMetrics(host);
+ var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
+
+ // adjust the host's usable size by the metrics. If hostSizedToContent, then the
+ // resulting adjusted value may be less than zero.
+ hostWidth -= paddingMetrics.left + paddingMetrics.right + borderMetrics.left + borderMetrics.right;
+ hostHeight -= paddingMetrics.top + paddingMetrics.bottom + borderMetrics.top + borderMetrics.bottom;
+
+ var xpos:Number = borderMetrics.left + paddingMetrics.left;
+ var ypos:Number = borderMetrics.top + paddingMetrics.top;
+
+ // First pass determines the data about the child.
+ for(var i:int=0; i < n; i++)
+ {
+ var child:IUIBase = contentView.getElementAt(i) as IUIBase;
+ if (child == null || !child.visible) continue;
+ var positions:Object = childPositions(child);
+ var margins:Object = childMargins(child, hostWidth, hostHeight);
+
+ ilc = child as ILayoutChild;
+
+ ypos += margins.top;
+
+ var childXpos:Number = xpos + margins.left; // default x position
+
+ var childWidth:Number = child.width;
+ if (ilc != null && !isNaN(ilc.percentWidth)) {
+ childWidth = hostWidth * ilc.percentWidth/100.0;
+ ilc.setWidth(childWidth);
+ }
+ else if (ilc.isWidthSizedToContent() && !margins.auto)
+ {
+ childWidth = hostWidth;
+ ilc.setWidth(childWidth);
+ }
+ if (margins.auto)
+ childXpos = (hostWidth - childWidth) / 2;
+
+ if (ilc) {
+ ilc.setX(childXpos);
+ ilc.setY(ypos);
+
+ if (!isNaN(ilc.percentHeight)) {
+ var newHeight:Number = hostHeight * ilc.percentHeight / 100;
+ ilc.setHeight(newHeight);
+ }
+
+ } else {
+ child.x = childXpos;
+ child.y = ypos;
+ }
+
+ ypos += child.height + margins.bottom;
+ }
+
+ return true;
+ }
+ COMPILE::JS
+ {
+ var children:Array;
+ var i:int;
+ var n:int;
+ var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+ contentView.element.className += " layout parent";//style["vertical-align"] = "top";
+
+ children = contentView.internalChildren();
+ n = children.length;
+ for (i = 0; i < n; i++)
+ {
+ var child:WrappedHTMLElement = children[i] as WrappedHTMLElement;
+ if (child == null) continue;
+
+ child.className += " layout vertical";
+
+ /*child.royale_wrapper.setDisplayStyleForLayout('block');
+ if (child.style.display === 'none')
+ {
+ child.royale_wrapper.setDisplayStyleForLayout('block');
+ }
+ else
+ {
+ // block elements don't measure width correctly so set to inline for a second
+ child.style.display = 'inline-block';
+ child.style.display = 'block';
+ }*/
+ child.royale_wrapper.dispatchEvent('sizeChanged');
+ }
+
+ return true;
+ }
+ }
+
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
new file mode 100644
index 0000000..f941993
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
@@ -0,0 +1,341 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.layouts
+{
+ import org.apache.royale.core.LayoutBase;
+
+ import org.apache.royale.core.IBeadLayout;
+ import org.apache.royale.core.IBeadModel;
+ import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+ import org.apache.royale.core.ILayoutChild;
+ import org.apache.royale.core.ILayoutHost;
+ import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.ILayoutParent;
+ import org.apache.royale.core.IParentIUIBase;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.layout.EdgeData;
+ import org.apache.royale.core.ValuesManager;
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.geom.Rectangle;
+ import org.apache.royale.utils.CSSUtils;
+
+ /**
+ * The VerticalLayoutWithPaddingAndGap class is a simple layout
+ * bead similar to VerticalLayout, but it adds support for
+ * padding and gap values.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class VerticalLayoutWithPaddingAndGap extends LayoutBase implements IBeadLayout
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function VerticalLayoutWithPaddingAndGap()
+ {
+ super();
+ }
+
+ /**
+ * @private
+ */
+ private var _paddingTop:Number = 0;
+
+ /**
+ * The top padding value.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get paddingTop():Number
+ {
+ return _paddingTop;
+ }
+
+ /**
+ * @private
+ */
+ public function set paddingTop(value:Number):void
+ {
+ _paddingTop = value;
+ }
+
+ /**
+ * @private
+ */
+ private var _paddingRight:Number = 0;
+
+ /**
+ * The right padding value.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get paddingRight():Number
+ {
+ return _paddingRight;
+ }
+
+ /**
+ * @private
+ */
+ public function set paddingRight(value:Number):void
+ {
+ _paddingRight = value;
+ }
+
+ /**
+ * @private
+ */
+ private var _paddingBottom:Number = 0;
+
+ /**
+ * The top padding value.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get paddingBottom():Number
+ {
+ return _paddingBottom;
+ }
+
+ /**
+ * @private
+ */
+ public function set paddingBottom(value:Number):void
+ {
+ _paddingBottom = value;
+ }
+
+ /**
+ * @private
+ */
+ private var _paddingLeft:Number = 0;
+
+ /**
+ * The left padding value.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get paddingLeft():Number
+ {
+ return _paddingLeft;
+ }
+
+ /**
+ * @private
+ */
+ public function set paddingLeft(value:Number):void
+ {
+ _paddingLeft = value;
+ }
+
+ /**
+ * @private
+ */
+ private var _gap:Number = 0;
+
+ /**
+ * The gap between items.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get gap():Number
+ {
+ return _gap;
+ }
+
+ /**
+ * @private
+ */
+ public function set gap(value:Number):void
+ {
+ _gap = value;
+ }
+
+ /**
+ * Layout children vertically
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ * @royaleignorecoercion org.apache.royale.core.ILayoutHost
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function layout():Boolean
+ {
+ COMPILE::SWF
+ {
+ var contentView:ILayoutView = layoutView;
+
+ var n:Number = contentView.numElements;
+ if (n == 0) return false;
+
+ var maxWidth:Number = 0;
+ var maxHeight:Number = 0;
+ var hostWidthSizedToContent:Boolean = host.isWidthSizedToContent();
+ var hostHeightSizedToContent:Boolean = host.isHeightSizedToContent();
+ var hostWidth:Number = hostWidthSizedToContent ? 0 : contentView.width;
+ var hostHeight:Number = hostHeightSizedToContent ? 0 : contentView.height;
+
+ var ilc:ILayoutChild;
+ var data:Object;
+ var canAdjust:Boolean = false;
+
+ var paddingMetrics:EdgeData = new EdgeData();
+ paddingMetrics.left = _paddingLeft;
+ paddingMetrics.top = _paddingTop;
+ paddingMetrics.right = _paddingRight;
+ paddingMetrics.bottom = _paddingBottom;
+ var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
+
+ // adjust the host's usable size by the metrics. If hostSizedToContent, then the
+ // resulting adjusted value may be less than zero.
+ hostWidth -= paddingMetrics.left + paddingMetrics.right + borderMetrics.left + borderMetrics.right;
+ hostHeight -= paddingMetrics.top + paddingMetrics.bottom + borderMetrics.top + borderMetrics.bottom;
+
+ var xpos:Number = borderMetrics.left + paddingMetrics.left;
+ var ypos:Number = borderMetrics.top + paddingMetrics.top;
+
+ // First pass determines the data about the child.
+ for(var i:int=0; i < n; i++)
+ {
+ var child:IUIBase = contentView.getElementAt(i) as IUIBase;
+ if (child == null || !child.visible) continue;
+ var positions:Object = childPositions(child);
+
+ ilc = child as ILayoutChild;
+
+ var childXpos:Number = xpos; // default x position
+
+ if (!hostWidthSizedToContent) {
+ var childWidth:Number = child.width;
+ if (ilc != null && !isNaN(ilc.percentWidth)) {
+ childWidth = hostWidth * ilc.percentWidth/100.0;
+ ilc.setWidth(childWidth);
+ }
+ // the following code center-aligns the child, but since HTML does not
+ // do this normally, this code is commented. (Use VerticalFlexLayout for
+ // horizontally centered elements in a vertical column).
+ // childXpos = hostWidth/2 - (childWidth + ml + mr)/2;
+ }
+
+ if (ilc) {
+ ilc.setX(childXpos);
+ ilc.setY(ypos);
+
+ if (!hostHeightSizedToContent && !isNaN(ilc.percentHeight)) {
+ var newHeight:Number = hostHeight * ilc.percentHeight / 100;
+ ilc.setHeight(newHeight);
+ }
+
+ } else {
+ child.x = childXpos;
+ child.y = ypos;
+ }
+
+ ypos += child.height + _gap;
+ }
+
+ return true;
+ }
+ COMPILE::JS
+ {
+ var children:Array;
+ var i:int;
+ var n:int;
+ var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+ contentView.element.style["vertical-align"] = "top";
+
+ children = contentView.internalChildren();
+ n = children.length;
+ for (i = 0; i < n; i++)
+ {
+ var child:WrappedHTMLElement = children[i];
+
+ child.className += " vertical-layout-padding-gap";
+
+
+ /*if(i == 0)
+ {
+ child.style.marginTop = _paddingTop + 'px';
+ }
+ else
+ {
+ child.style.marginTop = _gap + 'px';
+ }
+ child.style.marginRight = _paddingRight + 'px';
+ if(i === (n - 1))
+ {
+ child.style.marginBottom = _paddingBottom + 'px';
+ }
+ else
+ {
+ child.style.marginBottom = '0px';
+ }
+ child.style.marginLeft = _paddingLeft + 'px';
+ child.royale_wrapper.setDisplayStyleForLayout('block');
+ if (child.style.display === 'none')
+ {
+ child.royale_wrapper.setDisplayStyleForLayout('block');
+ }
+ else
+ {
+ // block elements don't measure width correctly so set to inline for a second
+ child.style.display = 'inline-block';
+ child.style.display = 'block';
+ }
+ */
+ child.royale_wrapper.dispatchEvent('sizeChanged');
+ }
+
+ return true;
+ }
+ }
+
+ }
+}
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 12/22: partial changes to create various themes with
different colors still need much work
Posted by ca...@apache.org.
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 6c80e25833adaec8c989c8a6d8311840a5b28f51
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Mar 9 20:32:02 2018 +0100
partial changes to create various themes with different colors still need much work
---
.../src/main/royale/ButtonPlayGround.mxml | 12 ++--
.../main/royale/org/apache/royale/jewel/Button.as | 55 ++++++++++++++
.../royale/org/apache/royale/jewel/TextButton.as | 84 ++++++++++++++++++++--
frameworks/themes/JewelTheme/pom.xml | 6 +-
.../JewelTheme/src/main/resources/defaults.css | 72 +++++++------------
.../{defaults.css => royale-jewel-blue.css} | 74 ++++++++-----------
.../themes/JewelTheme/src/main/sass/_button.sass | 64 +++++++++++++----
.../main/sass/{_variables.sass => _global.sass} | 18 +++--
.../themes/JewelTheme/src/main/sass/_mixins.sass | 24 +++++++
.../JewelTheme/src/main/sass/_textbutton.sass | 77 ++++----------------
.../JewelTheme/src/main/sass/_variables.sass | 22 ++++--
.../themes/JewelTheme/src/main/sass/defaults.sass | 22 ++----
.../sass/{defaults.sass => royale-jewel-blue.sass} | 29 ++++----
13 files changed, 333 insertions(+), 226 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index e9e9f9a..3efb4df 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -39,18 +39,18 @@ limitations under the License.
<js:TextButton text="Basic"/>
<j:Button/>
- <j:TextButton text="C"/>
+ <j:TextButton text="C" />
<j:TextButton text="Button"/>
- <j:TextButton text="Button With More Text"/>
+ <j:TextButton text="Button With More Text" />
- <j:TextButton text="Button" width="120" height="40"/>
+ <j:TextButton text="Button" width="120" height="40" />
- <j:TextButton text="Button"/>
+ <j:TextButton text="Button" primary="true"/>
- <j:TextButton text="Disabled">
+ <j:TextButton text="Disabled" >
<j:beads>
<j:Disabled/>
</j:beads>
@@ -62,6 +62,6 @@ limitations under the License.
<j:Slider id="slider_v" width="250" value="440" minimum="50" maximum="500"
valueChange="onValueChange(event)"/>
- <j:TextButton id="button" text="Button" width="420" height="440"/>
+ <j:TextButton id="button" text="Button" width="420" height="440" />
</js:Group>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
index 045fa71..938ed89 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
@@ -24,6 +24,7 @@ package org.apache.royale.jewel
{
import org.apache.royale.core.WrappedHTMLElement;
import org.apache.royale.html.util.addElementToWrapper;
+ import org.apache.royale.core.CSSClassList;
}
/**
@@ -58,8 +59,16 @@ package org.apache.royale.jewel
public function Button()
{
super();
+
+ COMPILE::JS
+ {
+ _classList = new CSSClassList();
+ }
}
+ COMPILE::JS
+ protected var _classList:CSSClassList;
+
/**
* @private
* @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
@@ -72,5 +81,51 @@ package org.apache.royale.jewel
typeNames = "jewel button";
return element;
}
+
+
+ private var _primary:Boolean = false;
+
+ /**
+ * A boolean flag to activate "jewel-button--primary" effect selector.
+ * Applies primary color display effect.
+ * Colors are defined in royale-jewel.css
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function get primary():Boolean
+ {
+ return _primary;
+ }
+
+ public function set primary(value:Boolean):void
+ {
+ if (_primary != value)
+ {
+ _primary = value;
+
+ COMPILE::JS
+ {
+ addOrRemove("jewel-button--primary",value);
+ setClassName(computeFinalClassNames());
+ }
+ }
+ }
+
+
+
+ COMPILE::JS
+ protected function addOrRemove(classNameVal:String,add:Boolean):void
+ {
+ add ? _classList.add(classNameVal) : _classList.remove(classNameVal);
+ }
+
+ COMPILE::JS
+ override protected function computeFinalClassNames():String
+ {
+ return _classList.compute() + super.computeFinalClassNames();
+ }
}
}
\ 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 30e8f68..d247b43 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
@@ -18,24 +18,26 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
- import org.apache.royale.html.TextButton;
-
+ import org.apache.royale.core.ITextModel;
+
COMPILE::JS
{
import org.apache.royale.core.WrappedHTMLElement;
import org.apache.royale.html.util.addElementToWrapper;
}
+ [DefaultProperty("text")]
+
/**
- * The Button class provides a Jewel Design Library UI-like appearance for
- * a Button.
+ * The TextButton class implements a basic button that
+ * displays text and provides a Jewel Design Library UI-like appearance.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.2
*/
- public class TextButton extends org.apache.royale.html.TextButton
+ public class TextButton extends Button
{
/**
* Constructor.
@@ -51,6 +53,78 @@ package org.apache.royale.jewel
}
/**
+ * @copy org.apache.royale.html.Label#text
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get text():String
+ {
+ COMPILE::SWF
+ {
+ return ITextModel(model).text;
+ }
+ COMPILE::JS
+ {
+ return element.innerHTML;
+ }
+ }
+
+ /**
+ * @private
+ */
+ public function set text(value:String):void
+ {
+ COMPILE::SWF
+ {
+ ITextModel(model).text = value;
+ }
+ COMPILE::JS
+ {
+ this.element.innerHTML = value;
+ this.dispatchEvent('textChange');
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.html.Label#html
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get html():String
+ {
+ COMPILE::SWF
+ {
+ return ITextModel(model).html;
+ }
+ COMPILE::JS
+ {
+ return element.innerHTML;
+ }
+ }
+
+ /**
+ * @private
+ */
+ public function set html(value:String):void
+ {
+ COMPILE::SWF
+ {
+ ITextModel(model).html = value;
+ }
+ COMPILE::JS
+ {
+ this.element.innerHTML = value;
+ this.dispatchEvent('textChange');
+ }
+ }
+
+ /**
* @private
* @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
*/
diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml
index f74dd9c..562dd07 100644
--- a/frameworks/themes/JewelTheme/pom.xml
+++ b/frameworks/themes/JewelTheme/pom.xml
@@ -60,9 +60,13 @@
<name>assets/*</name>
<path>../src/main/resources/assets/*</path>
</include-file>
- <include-file>
+ <!-- <include-file>
<name>defaults.css</name>
<path>../src/main/resources/defaults.css</path>
+ </include-file> -->
+ <include-file>
+ <name>royale-jewel-blue.css</name>
+ <path>../src/main/resources/royale-jewel-blue.css</path>
</include-file>
</includeFiles>
</configuration>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index ef0706e..782e6d5 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -14,6 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+/* BUTTON */
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
.royale *, .royale *:before, .royale *:after {
@@ -28,72 +29,53 @@
margin: 10px;
}
-body {
- font: 100% "Lato-Bold", sans-serif;
- color: #006CEB;
-}
-
/**
* Jewel Button
*/
-.button, .button:hover {
- cursor: pointer;
- /* Background: */
- border: 1px;
- 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;
-}
-
-.button:focus {
- outline: 0;
-}
-
-/**
- * Jewel TextButton
- */
-.textbutton, .textbutton:hover {
+.button, .textbutton {
cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 10px 0px;
+ min-width: 74px;
/* Background: */
border: none;
border-radius: 3px;
- /* TextField: */
+ /* TextField */
+ color: rgba(255, 255, 255, 0.4);
font-family: "Lato-Bold", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #fff;
- text-shadow: 0 1px 0 #555;
- padding: 10px 0px;
- display: inline-block;
- min-width: 80px;
+ font-style: bold;
+ font-size: 0.7rem;
+ text-transform: uppercase;
+ text-decoration: none;
}
-.textbutton {
+.jewel-button--primary {
background-color: #006CEB;
transition-duration: 0.4s;
}
-
-.textbutton:hover {
- background-color: #3389EF;
+.jewel-button--primary:hover {
+ background-color: #0b7bff;
}
-
-.textbutton:active {
- background-color: #0056BC;
+.jewel-button--primary:active {
+ background-color: #005ecc;
}
-
-.textbutton:focus {
+.jewel-button--primary:focus {
outline: 0;
}
-
-.textbutton[disabled] {
+.jewel-button--primary [disabled] {
background-color: #CCCCCC;
color: #888888;
+ cursor: unset;
+}
+
+/**
+ * Jewel TextButton
+ */
+.textbutton[disabled] {
text-shadow: unset;
cursor: unset;
+ /* TextField: */
}
/**
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
similarity index 75%
copy from frameworks/themes/JewelTheme/src/main/resources/defaults.css
copy to frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
index ef0706e..76cae63 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
@@ -14,6 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+/* BUTTON */
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
.royale *, .royale *:before, .royale *:after {
@@ -28,72 +29,53 @@
margin: 10px;
}
-body {
- font: 100% "Lato-Bold", sans-serif;
- color: #006CEB;
-}
-
/**
* Jewel Button
*/
-.button, .button:hover {
- cursor: pointer;
- /* Background: */
- border: 1px;
- 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;
-}
-
-.button:focus {
- outline: 0;
-}
-
-/**
- * Jewel TextButton
- */
-.textbutton, .textbutton:hover {
+.button, .textbutton {
cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 10px 0px;
+ min-width: 74px;
/* Background: */
border: none;
border-radius: 3px;
- /* TextField: */
+ /* TextField */
+ color: rgba(255, 255, 255, 0.4);
font-family: "Lato-Bold", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #fff;
- text-shadow: 0 1px 0 #555;
- padding: 10px 0px;
- display: inline-block;
- min-width: 80px;
+ font-style: bold;
+ font-size: 0.7rem;
+ text-transform: uppercase;
+ text-decoration: none;
}
-.textbutton {
+.jewel-button--primary {
background-color: #006CEB;
transition-duration: 0.4s;
}
-
-.textbutton:hover {
- background-color: #3389EF;
+.jewel-button--primary:hover {
+ background-color: #0b7bff;
}
-
-.textbutton:active {
- background-color: #0056BC;
+.jewel-button--primary:active {
+ background-color: #005ecc;
}
-
-.textbutton:focus {
+.jewel-button--primary:focus {
outline: 0;
}
-
-.textbutton[disabled] {
+.jewel-button--primary [disabled] {
background-color: #CCCCCC;
color: #888888;
+ cursor: unset;
+}
+
+/**
+ * Jewel TextButton
+ */
+.textbutton[disabled] {
text-shadow: unset;
cursor: unset;
+ /* TextField: */
}
/**
@@ -139,4 +121,4 @@ TextField {
text-align: left;
}
-/*# sourceMappingURL=defaults.css.map */
+/*# sourceMappingURL=royale-jewel-blue.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
index 1ea71ab..376f994 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
@@ -16,28 +16,62 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-
+
/**
* Jewel Button
*/
-.button, .button:hover
-
+%button-def
cursor: pointer
+ display: inline-block
+ margin: 0 //1rem
+ padding: 10px 0px //.938em 1.875em
+ min-width: $button-min-width
+
/* 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
+ border: none // .094em solid
+ border-radius: 3px //.625em
+ //box-shadow: 0 .375em .313em -.313em rgba(black,.8), inset 0 .063em $off-wht, inset 0 -.188em rgba(black,.15)
+
+ /* TextField */
+ color: $white
+ font:
+ family: $font-stack
+ style: bold
+ size: .7rem
+ //+trans(0.2s ease-in-out)
+ text:
+ transform: uppercase
+ decoration: none
+ //shadow: 0 .063em rgba(black,.3)
+
+.button
+ @extend %button-def
+
+.jewel-button--primary
+ +button-theme($primary-color)
+
+
+
+
+ //SVGs
+ //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;
- background-image: linear-gradient(#3BB0FF, #1E36FA)
- background-size: cover
- background-repeat: no-repeat
- background-clip: padding-box
+ //background-image: linear-gradient(#3BB0FF, #1E36FA);
-//.button:hover
+ //background-color: #006CEB;
+ //background-size: cover;
+ //background-repeat: no-repeat;
+ //background-clip: padding-box;
-//.button:active
+ //background: url(assets/4slicewithpattern.svg);
+ //background-size: cover;
+ //width: fit-content;
+ //height: fit-content;
-.button:focus
- outline: 0
+//.button:active
+ //box-shadow: #E6431D 0 1px 0 inset;
+ //text-shadow: 0 -1px 0 #5F3A29;
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
similarity index 74%
copy from frameworks/themes/JewelTheme/src/main/sass/_variables.sass
copy to frameworks/themes/JewelTheme/src/main/sass/_global.sass
index 46227a0..f4df725 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
@@ -17,12 +17,16 @@
//
////////////////////////////////////////////////////////////////////////////////
-$font-stack: 'Lato-Bold', sans-serif
+@namespace j "library://ns.apache.org/royale/jewel"
+@namespace "http://www.w3.org/1999/xhtml"
-$primary-color: #006CEB
-$hover-color: #3389EF
-$active-color: #0056BC
-$disabled-color: #CCCCCC
-$font-normal-color: #fff
-$font-disabled-color: #888888
\ No newline at end of file
+.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"); */
+
+.royale
+ padding: 10px
+ margin: 10px
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
index 0c6fb82..10d21e4 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
@@ -16,3 +16,27 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
+
+=button-theme($button-color)
+ //border-color: darken($button-color, 20%)
+ background-color: $button-color
+ transition:
+ duration: 0.4s
+ &:hover
+ background-color: lighten($button-color, 6%)
+ //box-shadow: 0 .125em $off-wht, inset 0 .063em $off-wht, inset 0 -.188em lighten($btn-color, 2%)
+ &:active
+ background-color: darken($button-color, 6%)
+ //box-shadow: 0 .063em $off-wht, inset 0 0 1.094em darken($btn-color, 40%), inset 0 .063em darken($btn-color, 20%),inset 0 -0.188em darken($btn-color, 20%)
+ &:focus
+ outline: 0
+ [disabled]
+ background-color: $disabled-color
+ color: $font-disabled-color
+ cursor: unset
+
+//=trans($val...)
+// -webkit-transition: $val
+// -moz-transition: $val
+// -o-transition: $val
+// transition: $val
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
index ee1c655..4211663 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
@@ -20,73 +20,24 @@
/**
* Jewel TextButton
*/
-.textbutton, .textbutton:hover
-
- cursor: pointer
-
- /* Background: */
- 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;
-
- //background-image: linear-gradient(#3BB0FF, #1E36FA);
-
- //background-color: #006CEB;
- //background-size: cover;
- //background-repeat: no-repeat;
- //background-clip: padding-box;
-
- /* TextField: */
- font-family: $font-stack
- font-size: 14px
- font-weight: bold
- color: $font-normal-color
- text-shadow: 0 1px 0 #555
-
- padding: 10px 0px
- display: inline-block
- min-width: 80px
-
- //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
- background-color: $primary-color
- transition-duration: 0.4s
-
-
-.textbutton:hover
- background-color: $hover-color
-
- //background: linear-gradient(#FD9958, #F76943);
- //border: 1px solid #BC573C;
- //line-height:16px;
- //padding: 8px 16px;
-
-.textbutton:active
- background-color: $active-color
-
- //box-shadow: #E6431D 0 1px 0 inset;
- //text-shadow: 0 -1px 0 #5F3A29;
-
-.textbutton:focus
- outline: 0
+ @extend %button-def
.textbutton[disabled]
- background-color: $disabled-color
- color: $font-disabled-color
- text-shadow: unset
+ text:
+ shadow: unset
cursor: unset
+ /* TextField: */
+// font-family: $font-stack
+// font-size: 14px
+// font-weight: bold
+// color: $font-normal-color
+// text-shadow: 0 1px 0 #555
+
+// padding: 10px 0px
+// display: inline-block
+// min-width: 80px
+
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
index 46227a0..90ff1c5 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -19,10 +19,22 @@
$font-stack: 'Lato-Bold', sans-serif
-$primary-color: #006CEB
-$hover-color: #3389EF
-$active-color: #0056BC
+// Common Colors
+$white: rgba(white,.4)
$disabled-color: #CCCCCC
+$font-disabled-color: #888888
+
+// Color Themes
+$primary-color: #006CEB
+
+//$purple: #9A68C7
+//$blue: #3BA9E4
+//$green: #75B343
+//$orange: #FF6A42
+
+
+/* BUTTON */
+$button-min-width: 74px !default
+
+
-$font-normal-color: #fff
-$font-disabled-color: #888888
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index 8fae5e5..7ad0fdd 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -15,24 +15,14 @@
* limitations under the License.
*/
-@import "variables"
-
-@namespace j "library://ns.apache.org/royale/jewel"
-@namespace "http://www.w3.org/1999/xhtml"
-.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"); */
-
-.royale
- padding: 10px
- margin: 10px
+// Variables
+@import "variables"
+@import "mixins"
+@import "functions"
-body
- font: 100% $font-stack
- color: $primary-color
+// Global
+@import "global"
// Components
@import "button"
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
similarity index 68%
copy from frameworks/themes/JewelTheme/src/main/sass/defaults.sass
copy to frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
index 8fae5e5..98d8247 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
@@ -15,26 +15,21 @@
* limitations under the License.
*/
+// Variables
@import "variables"
+@import "mixins"
+@import "functions"
-@namespace j "library://ns.apache.org/royale/jewel"
-@namespace "http://www.w3.org/1999/xhtml"
-
-.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"); */
-
-.royale
- padding: 10px
- margin: 10px
-
-body
- font: 100% $font-stack
- color: $primary-color
+// Global
+@import "global"
// Components
+
+// Button
@import "button"
+
+// TextButton
@import "textbutton"
-@import "textfield"
\ No newline at end of file
+
+// TextField
+@import "textfield"
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 05/22: added jewel button,
and changed classnames to get something decoupled from basic and
more near to what other frameworks do
Posted by ca...@apache.org.
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 81aaae9bbd30165555bd6df3b0b69e382c7073a6
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.
[royale-asjs] 19/22: library.swf now gets info about
JewelThemeFontInject
Posted by ca...@apache.org.
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 ed91db4f7556efec57ec48b3e8570847006682db
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Mar 11 23:10:17 2018 +0100
library.swf now gets info about JewelThemeFontInject
---
frameworks/themes/JewelTheme/pom.xml | 17 +-
.../src/main/config/compile-swf-config.xml | 22 +-
.../JewelTheme/src/main/resources/defaults.css | 264 ---------------------
.../themes/JewelTheme/src/main/sass/defaults.sass | 36 ---
4 files changed, 2 insertions(+), 337 deletions(-)
diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml
index 4096e7e..055a04d 100644
--- a/frameworks/themes/JewelTheme/pom.xml
+++ b/frameworks/themes/JewelTheme/pom.xml
@@ -41,17 +41,6 @@
<version>${royale.compiler.version}</version>
<extensions>true</extensions>
<configuration>
- <namespaces>
- <namespace>
- <uri>library://ns.apache.org/royale/jewel</uri>
- <manifest>${project.basedir}/src/main/resources/jewel-theme-manifest.xml</manifest>
- </namespace>
- <namespace>
- <type>as</type>
- <uri>library://ns.apache.org/royale/jewel</uri>
- <manifest>${project.basedir}/src/main/resources/jewel-theme-as-manifest.xml</manifest>
- </namespace>
- </namespaces>
<includeClasses>
<includeClass>JewelThemeClasses</includeClass>
</includeClasses>
@@ -60,12 +49,8 @@
<name>assets/*</name>
<path>../src/main/resources/assets/*</path>
</include-file>
- <!-- <include-file>
- <name>defaults.css</name>
- <path>../src/main/resources/defaults.css</path>
- </include-file> -->
<include-file>
- <name>royale-jewel-red.css</name>
+ <name>royale-jewel-blue.css</name>
<path>../src/main/resources/royale-jewel-blue.css</path>
</include-file>
</includeFiles>
diff --git a/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml b/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml
index a6b5c38..bb3e613 100644
--- a/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml
+++ b/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml
@@ -35,7 +35,6 @@
<path-element>../../../../../libs/Basic.swc</path-element>
<path-element>../../../../../libs/Collections.swc</path-element>
<path-element>../../../../../libs/HTML.swc</path-element>
- <path-element>../../../../../libs/Jewel.swc</path-element>
</external-library-path>
<allow-subclass-overrides>true</allow-subclass-overrides>
@@ -67,17 +66,6 @@
<library-path/>
- <namespaces>
- <namespace>
- <uri>library://ns.apache.org/royale/jewel</uri>
- <manifest>../resources/jewel-theme-manifest.xml</manifest>
- </namespace>
- <namespace>
- <uri>library://ns.apache.org/royale/jewel</uri>
- <manifest>../resources/jewel-theme-as-manifest.xml</manifest>
- </namespace>
- </namespaces>
-
<source-path>
<path-element>../royale</path-element>
</source-path>
@@ -89,21 +77,13 @@
<name>defaults.css</name>
<path>../resources/defaults.css</path>
</include-file>
- <include-file>
- <name>TextButton.css</name>
- <path>../resources/TextButton.css</path>
- </include-file>
- <include-file>
- <name>TextField.css</name>
- <path>../resources/TextField.css</path>
- </include-file>
<include-lookup-only>true</include-lookup-only>
<include-classes>
<class>JewelThemeClasses</class>
</include-classes>
-
+
<target-player>${playerglobal.version}</target-player>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
deleted file mode 100644
index 7ab8952..0000000
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ /dev/null
@@ -1,264 +0,0 @@
-/**
- * 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.
- */
-@namespace j "library://ns.apache.org/royale/jewel";
-@namespace "http://www.w3.org/1999/xhtml";
-.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");
-}
-
-.royale {
- padding: 10px;
- margin: 10px;
-}
-
-/**
- * Jewel Button
- */
-.jewel.button, .jewel.button:hover, .jewel.textbutton, .jewel.textbutton:hover {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- /* Background: */
- border: none;
- border-radius: 3px;
-}
-
-.jewel.button {
- background-color: rgba(0, 0, 0, 0.3);
- transition-duration: 0.4s;
- color: rgba(0, 0, 0, 0.4);
-}
-.jewel.button:hover {
- background-color: rgba(15, 15, 15, 0.3);
-}
-.jewel.button:active {
- background-color: rgba(0, 0, 0, 0.3);
-}
-.jewel.button:focus {
- outline: 0;
-}
-.jewel.button[disabled] {
- background-color: #CCCCCC;
- color: #888888;
- cursor: unset;
-}
-
-.jewel.button.primary {
- background-color: #006CEB;
- transition-duration: 0.4s;
- color: white;
-}
-.jewel.button.primary:hover {
- background-color: #0b7bff;
-}
-.jewel.button.primary:active {
- background-color: #005ecc;
-}
-.jewel.button.primary:focus {
- outline: 0;
-}
-.jewel.button.primary[disabled] {
- background-color: #CCCCCC;
- color: #888888;
- cursor: unset;
-}
-
-.jewel.button.secondary {
- background-color: #011833;
- transition-duration: 0.4s;
- color: white;
-}
-.jewel.button.secondary:hover {
- background-color: #022651;
-}
-.jewel.button.secondary:active {
- background-color: #000a15;
-}
-.jewel.button.secondary:focus {
- outline: 0;
-}
-.jewel.button.secondary[disabled] {
- background-color: #CCCCCC;
- color: #888888;
- cursor: unset;
-}
-
-.jewel.button.emphasized {
- background-color: #1FD348;
- transition-duration: 0.4s;
- color: white;
-}
-.jewel.button.emphasized:hover {
- background-color: #30e158;
-}
-.jewel.button.emphasized:active {
- background-color: #1bb83f;
-}
-.jewel.button.emphasized:focus {
- outline: 0;
-}
-.jewel.button.emphasized[disabled] {
- background-color: #CCCCCC;
- color: #888888;
- cursor: unset;
-}
-
-/**
- * Jewel TextButton
- */
-.jewel.textbutton, .jewel.textbutton:hover {
- /* TextField */
- font-family: "Lato-Bold", sans-serif;
- font-style: bold;
- font-size: 0.7rem;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton [disabled] {
- text-shadow: unset;
-}
-
-.jewel.textbutton {
- background-color: rgba(0, 0, 0, 0.3);
- transition-duration: 0.4s;
- color: rgba(0, 0, 0, 0.4);
-}
-.jewel.textbutton:hover {
- background-color: rgba(15, 15, 15, 0.3);
-}
-.jewel.textbutton:active {
- background-color: rgba(0, 0, 0, 0.3);
-}
-.jewel.textbutton:focus {
- outline: 0;
-}
-.jewel.textbutton[disabled] {
- background-color: #CCCCCC;
- color: #888888;
- cursor: unset;
-}
-
-.jewel.textbutton.primary {
- background-color: #006CEB;
- transition-duration: 0.4s;
- color: white;
-}
-.jewel.textbutton.primary:hover {
- background-color: #0b7bff;
-}
-.jewel.textbutton.primary:active {
- background-color: #005ecc;
-}
-.jewel.textbutton.primary:focus {
- outline: 0;
-}
-.jewel.textbutton.primary[disabled] {
- background-color: #CCCCCC;
- color: #888888;
- cursor: unset;
-}
-
-.jewel.textbutton.secondary {
- background-color: #011833;
- transition-duration: 0.4s;
- color: white;
-}
-.jewel.textbutton.secondary:hover {
- background-color: #022651;
-}
-.jewel.textbutton.secondary:active {
- background-color: #000a15;
-}
-.jewel.textbutton.secondary:focus {
- outline: 0;
-}
-.jewel.textbutton.secondary[disabled] {
- background-color: #CCCCCC;
- color: #888888;
- cursor: unset;
-}
-
-.jewel.textbutton.emphasized {
- background-color: #1FD348;
- transition-duration: 0.4s;
- color: white;
-}
-.jewel.textbutton.emphasized:hover {
- background-color: #30e158;
-}
-.jewel.textbutton.emphasized:active {
- background-color: #1bb83f;
-}
-.jewel.textbutton.emphasized:focus {
- outline: 0;
-}
-.jewel.textbutton.emphasized[disabled] {
- background-color: #CCCCCC;
- color: #888888;
- cursor: unset;
-}
-
-/**
- * Jewel TextField
- */
-TextField {
- position: relative;
- display: inline-block;
- box-sizing: border-box;
- width: 300px;
- max-width: 100%;
- margin: 0;
-}
-
-.vTextField--input {
- font-size: 16px;
- font-family: "Lato", sans-serif;
- border: none;
- border-bottom: 2px solid;
- border-bottom-color: #ff0000;
- display: block;
- margin: 0;
- padding: 4 0;
- width: 100px;
- background: transparent;
- text-align: left;
- color: inherit;
- outline: none;
-}
-
-.vTextField--label {
- bottom: 0;
- color: #ff0000;
- font-size: 13px;
- left: 0;
- right: 0;
- pointer-events: none;
- position: absolute;
- display: block;
- width: 100%;
- overflow: hidden;
- white-space: nowrap;
- text-align: left;
-}
-
-/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
deleted file mode 100644
index c96fa61..0000000
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * 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.
- */
-
-// Variables
-@import "colors/blue-color-palette"
-@import "variables"
-@import "mixins"
-@import "functions"
-
-// Global
-@import "global"
-
-// Components
-
-// Button
-@import "button"
-
-// TextButton
-@import "textbutton"
-
-// TextField
-@import "textfield"
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 18/22: font changes
Posted by ca...@apache.org.
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 861cf0d594f32ea4dc99f1e9e4d1e3fcad65805d
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Mar 11 22:52:02 2018 +0100
font changes
---
.../JewelTheme/src/main/resources/defaults.css | 2 +-
.../src/main/resources/jewel-theme-as-manifest.xml | 24 ----------------------
.../src/main/resources/jewel-theme-manifest.xml | 23 ---------------------
.../src/main/resources/royale-jewel-blue.css | 2 +-
.../src/main/resources/royale-jewel-red.css | 2 +-
.../themes/JewelTheme/src/main/sass/_global.sass | 2 +-
.../src/main/sass/colors/_blue-color-palette.sass | 2 +-
7 files changed, 5 insertions(+), 52 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index a988581..7ab8952 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -20,7 +20,7 @@
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
- /* fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject"); */
+ fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject");
}
.royale {
diff --git a/frameworks/themes/JewelTheme/src/main/resources/jewel-theme-as-manifest.xml b/frameworks/themes/JewelTheme/src/main/resources/jewel-theme-as-manifest.xml
deleted file mode 100644
index 05d8800..0000000
--- a/frameworks/themes/JewelTheme/src/main/resources/jewel-theme-as-manifest.xml
+++ /dev/null
@@ -1,24 +0,0 @@
-<?xml version="1.0"?>
-<!--
-
- 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.
-
--->
-
-<componentPackage>
-
-</componentPackage>
-
diff --git a/frameworks/themes/JewelTheme/src/main/resources/jewel-theme-manifest.xml b/frameworks/themes/JewelTheme/src/main/resources/jewel-theme-manifest.xml
deleted file mode 100644
index 1d3bd35..0000000
--- a/frameworks/themes/JewelTheme/src/main/resources/jewel-theme-manifest.xml
+++ /dev/null
@@ -1,23 +0,0 @@
-<?xml version="1.0"?>
-<!--
-
- 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.
-
--->
-
-<componentPackage>
-
-</componentPackage>
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
index 03b8c00..6044867 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
@@ -20,7 +20,7 @@
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
- /* fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject"); */
+ fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject");
}
.royale {
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
index 4b76076..4f2a299 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
@@ -20,7 +20,7 @@
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
- /* fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject"); */
+ fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject");
}
.royale {
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
index f4df725..b3e366f 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
@@ -25,7 +25,7 @@
-moz-box-sizing: border-box
-webkit-box-sizing: border-box
box-sizing: border-box
- /* fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject"); */
+ fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject")
.royale
padding: 10px
diff --git a/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass b/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
index 135129b..3bdf08e 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
@@ -17,7 +17,7 @@
//
////////////////////////////////////////////////////////////////////////////////
// Color Themes
-$default-color: rgba(0,0,0,0.30)
+$default-color: rgba(0,0,0,.3)
$primary-color: #006CEB
$secondary-color: #011833
$emphasized-color: #1FD348
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 06/22: various style changes for textbutton
Posted by ca...@apache.org.
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 f2d213e4b387300ae1e2a5b81ee6f861f3e7c35b
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.
[royale-asjs] 13/22: changes to get two initial themes blue and red
Posted by ca...@apache.org.
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 4846918cf34870e7878821f35dccc828e9d8956d
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Mar 9 23:58:36 2018 +0100
changes to get two initial themes blue and red
---
.../src/main/royale/ButtonPlayGround.mxml | 20 ++++-----
.../main/royale/org/apache/royale/jewel/Button.as | 4 +-
frameworks/themes/JewelTheme/pom.xml | 2 +-
.../JewelTheme/src/main/resources/defaults.css | 33 +++++++-------
.../src/main/resources/royale-jewel-blue.css | 33 +++++++-------
.../{defaults.css => royale-jewel-red.css} | 41 +++++++++--------
.../themes/JewelTheme/src/main/sass/_button.sass | 51 ++++++++--------------
.../JewelTheme/src/main/sass/_textbutton.sass | 25 ++++++++---
.../JewelTheme/src/main/sass/_variables.sass | 13 +-----
.../_blue-color-palette.sass} | 22 +---------
.../_red-color-palette.sass} | 22 +---------
.../themes/JewelTheme/src/main/sass/defaults.sass | 2 +-
.../src/main/sass/royale-jewel-blue.sass | 1 +
...oyale-jewel-blue.sass => royale-jewel-red.sass} | 1 +
14 files changed, 107 insertions(+), 163 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index 3efb4df..218680a 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -38,30 +38,28 @@ limitations under the License.
<js:Button/>
<js:TextButton text="Basic"/>
- <j:Button/>
- <j:TextButton text="C" />
+ <j:Button primary="true"/>
+ <j:TextButton text="C" primary="true"/>
- <j:TextButton text="Button"/>
-
- <j:TextButton text="Button With More Text" />
+ <j:TextButton text="Button" primary="true"/>
- <j:TextButton text="Button" width="120" height="40" />
+ <j:TextButton text="Button With More Text" primary="true"/>
+ <j:TextButton text="Button" width="120" height="40" primary="true"/>
<j:TextButton text="Button" primary="true"/>
- <j:TextButton text="Disabled" >
+ <j:TextButton text="Disabled" primary="true">
<j:beads>
<j:Disabled/>
</j:beads>
</j:TextButton>
-
- <j:Slider id="slider" width="250" value="420" minimum="50" maximum="500"
+ <j:Slider id="slider" width="250" value="100" minimum="50" maximum="500"
valueChange="onValueChange(event)"/>
- <j:Slider id="slider_v" width="250" value="440" minimum="50" maximum="500"
+ <j:Slider id="slider_v" width="250" value="100" minimum="50" maximum="500"
valueChange="onValueChange(event)"/>
- <j:TextButton id="button" text="Button" width="420" height="440" />
+ <j:TextButton id="button" text="Button" width="100" height="100" primary="true"/>
</js:Group>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
index 938ed89..0d73362 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
@@ -86,7 +86,7 @@ package org.apache.royale.jewel
private var _primary:Boolean = false;
/**
- * A boolean flag to activate "jewel-button--primary" effect selector.
+ * A boolean flag to activate "button--primary" effect selector.
* Applies primary color display effect.
* Colors are defined in royale-jewel.css
*
@@ -108,7 +108,7 @@ package org.apache.royale.jewel
COMPILE::JS
{
- addOrRemove("jewel-button--primary",value);
+ addOrRemove("button--primary",value);
setClassName(computeFinalClassNames());
}
}
diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml
index 562dd07..702d626 100644
--- a/frameworks/themes/JewelTheme/pom.xml
+++ b/frameworks/themes/JewelTheme/pom.xml
@@ -65,7 +65,7 @@
<path>../src/main/resources/defaults.css</path>
</include-file> -->
<include-file>
- <name>royale-jewel-blue.css</name>
+ <name>royale-jewel-red.css</name>
<path>../src/main/resources/royale-jewel-blue.css</path>
</include-file>
</includeFiles>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 782e6d5..c092842 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -14,7 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-/* BUTTON */
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
.royale *, .royale *:before, .royale *:after {
@@ -32,7 +31,7 @@
/**
* Jewel Button
*/
-.button, .textbutton {
+.button, .button:hover, .textbutton, .textbutton:hover {
cursor: pointer;
display: inline-block;
margin: 0;
@@ -41,29 +40,22 @@
/* Background: */
border: none;
border-radius: 3px;
- /* TextField */
- color: rgba(255, 255, 255, 0.4);
- font-family: "Lato-Bold", sans-serif;
- font-style: bold;
- font-size: 0.7rem;
- text-transform: uppercase;
- text-decoration: none;
}
-.jewel-button--primary {
+.button--primary {
background-color: #006CEB;
transition-duration: 0.4s;
}
-.jewel-button--primary:hover {
+.button--primary:hover {
background-color: #0b7bff;
}
-.jewel-button--primary:active {
+.button--primary:active {
background-color: #005ecc;
}
-.jewel-button--primary:focus {
+.button--primary:focus {
outline: 0;
}
-.jewel-button--primary [disabled] {
+.button--primary [disabled] {
background-color: #CCCCCC;
color: #888888;
cursor: unset;
@@ -72,10 +64,17 @@
/**
* Jewel TextButton
*/
-.textbutton[disabled] {
+.textbutton, .textbutton:hover {
+ /* TextField */
+ color: rgba(255, 255, 255, 0.9);
+ font-family: "Lato-Bold", sans-serif;
+ font-style: bold;
+ font-size: 0.7rem;
+ text-transform: uppercase;
+ text-decoration: none;
+}
+.textbutton [disabled] {
text-shadow: unset;
- cursor: unset;
- /* TextField: */
}
/**
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
index 76cae63..7d56600 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
@@ -14,7 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-/* BUTTON */
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
.royale *, .royale *:before, .royale *:after {
@@ -32,7 +31,7 @@
/**
* Jewel Button
*/
-.button, .textbutton {
+.button, .button:hover, .textbutton, .textbutton:hover {
cursor: pointer;
display: inline-block;
margin: 0;
@@ -41,29 +40,22 @@
/* Background: */
border: none;
border-radius: 3px;
- /* TextField */
- color: rgba(255, 255, 255, 0.4);
- font-family: "Lato-Bold", sans-serif;
- font-style: bold;
- font-size: 0.7rem;
- text-transform: uppercase;
- text-decoration: none;
}
-.jewel-button--primary {
+.button--primary {
background-color: #006CEB;
transition-duration: 0.4s;
}
-.jewel-button--primary:hover {
+.button--primary:hover {
background-color: #0b7bff;
}
-.jewel-button--primary:active {
+.button--primary:active {
background-color: #005ecc;
}
-.jewel-button--primary:focus {
+.button--primary:focus {
outline: 0;
}
-.jewel-button--primary [disabled] {
+.button--primary [disabled] {
background-color: #CCCCCC;
color: #888888;
cursor: unset;
@@ -72,10 +64,17 @@
/**
* Jewel TextButton
*/
-.textbutton[disabled] {
+.textbutton, .textbutton:hover {
+ /* TextField */
+ color: rgba(255, 255, 255, 0.9);
+ font-family: "Lato-Bold", sans-serif;
+ font-style: bold;
+ font-size: 0.7rem;
+ text-transform: uppercase;
+ text-decoration: none;
+}
+.textbutton [disabled] {
text-shadow: unset;
- cursor: unset;
- /* TextField: */
}
/**
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
similarity index 85%
copy from frameworks/themes/JewelTheme/src/main/resources/defaults.css
copy to frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
index 782e6d5..56a785d 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
@@ -14,7 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-/* BUTTON */
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
.royale *, .royale *:before, .royale *:after {
@@ -32,7 +31,7 @@
/**
* Jewel Button
*/
-.button, .textbutton {
+.button, .button:hover, .textbutton, .textbutton:hover {
cursor: pointer;
display: inline-block;
margin: 0;
@@ -41,29 +40,22 @@
/* Background: */
border: none;
border-radius: 3px;
- /* TextField */
- color: rgba(255, 255, 255, 0.4);
- font-family: "Lato-Bold", sans-serif;
- font-style: bold;
- font-size: 0.7rem;
- text-transform: uppercase;
- text-decoration: none;
}
-.jewel-button--primary {
- background-color: #006CEB;
+.button--primary {
+ background-color: #FF0000;
transition-duration: 0.4s;
}
-.jewel-button--primary:hover {
- background-color: #0b7bff;
+.button--primary:hover {
+ background-color: #ff1f1f;
}
-.jewel-button--primary:active {
- background-color: #005ecc;
+.button--primary:active {
+ background-color: #e00000;
}
-.jewel-button--primary:focus {
+.button--primary:focus {
outline: 0;
}
-.jewel-button--primary [disabled] {
+.button--primary [disabled] {
background-color: #CCCCCC;
color: #888888;
cursor: unset;
@@ -72,10 +64,17 @@
/**
* Jewel TextButton
*/
-.textbutton[disabled] {
+.textbutton, .textbutton:hover {
+ /* TextField */
+ color: rgba(255, 255, 255, 0.9);
+ font-family: "Lato-Bold", sans-serif;
+ font-style: bold;
+ font-size: 0.7rem;
+ text-transform: uppercase;
+ text-decoration: none;
+}
+.textbutton [disabled] {
text-shadow: unset;
- cursor: unset;
- /* TextField: */
}
/**
@@ -121,4 +120,4 @@ TextField {
text-align: left;
}
-/*# sourceMappingURL=defaults.css.map */
+/*# sourceMappingURL=royale-jewel-red.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
index 376f994..8d416f2 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
@@ -32,46 +32,31 @@
border: none // .094em solid
border-radius: 3px //.625em
//box-shadow: 0 .375em .313em -.313em rgba(black,.8), inset 0 .063em $off-wht, inset 0 -.188em rgba(black,.15)
-
- /* TextField */
- color: $white
- font:
- family: $font-stack
- style: bold
- size: .7rem
- //+trans(0.2s ease-in-out)
- text:
- transform: uppercase
- decoration: none
- //shadow: 0 .063em rgba(black,.3)
-.button
+.button, .button:hover
@extend %button-def
-.jewel-button--primary
+.button--primary
+button-theme($primary-color)
+//SVGs
+//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;
+//background-image: linear-gradient(#3BB0FF, #1E36FA);
+//background-color: #006CEB;
+//background-size: cover;
+//background-repeat: no-repeat;
+//background-clip: padding-box;
- //SVGs
- //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;
-
- //background-image: linear-gradient(#3BB0FF, #1E36FA);
-
- //background-color: #006CEB;
- //background-size: cover;
- //background-repeat: no-repeat;
- //background-clip: padding-box;
-
- //background: url(assets/4slicewithpattern.svg);
- //background-size: cover;
- //width: fit-content;
- //height: fit-content;
+//background: url(assets/4slicewithpattern.svg);
+//background-size: cover;
+//width: fit-content;
+//height: fit-content;
//.button:active
- //box-shadow: #E6431D 0 1px 0 inset;
- //text-shadow: 0 -1px 0 #5F3A29;
\ No newline at end of file
+//box-shadow: #E6431D 0 1px 0 inset;
+//text-shadow: 0 -1px 0 #5F3A29;
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
index 4211663..4cf7a0f 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
@@ -20,17 +20,28 @@
/**
* Jewel TextButton
*/
-
-.textbutton
+%textbutton-def
@extend %button-def
+ /* TextField */
+ color: $white
+ font:
+ family: $font-stack
+ style: bold
+ size: .7rem
+ //+trans(0.2s ease-in-out)
+ text:
+ transform: uppercase
+ decoration: none
+ //shadow: 0 .063em rgba(black,.3)
+ [disabled]
+ text:
+ shadow: unset
-.textbutton[disabled]
- text:
- shadow: unset
- cursor: unset
+.textbutton, .textbutton:hover
+ @extend %textbutton-def
- /* TextField: */
+// /* TextField: */
// font-family: $font-stack
// font-size: 14px
// font-weight: bold
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
index 90ff1c5..b1f1f39 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -20,20 +20,11 @@
$font-stack: 'Lato-Bold', sans-serif
// Common Colors
-$white: rgba(white,.4)
+$white: rgba(white,.9)
$disabled-color: #CCCCCC
$font-disabled-color: #888888
-// Color Themes
-$primary-color: #006CEB
-
-//$purple: #9A68C7
-//$blue: #3BA9E4
-//$green: #75B343
-//$orange: #FF6A42
-
-
-/* BUTTON */
+// Button variables
$button-min-width: 74px !default
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
similarity index 77%
copy from frameworks/themes/JewelTheme/src/main/sass/_variables.sass
copy to frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
index 90ff1c5..fbe84c7 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
@@ -16,25 +16,5 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-
-$font-stack: 'Lato-Bold', sans-serif
-
-// Common Colors
-$white: rgba(white,.4)
-$disabled-color: #CCCCCC
-$font-disabled-color: #888888
-
// Color Themes
-$primary-color: #006CEB
-
-//$purple: #9A68C7
-//$blue: #3BA9E4
-//$green: #75B343
-//$orange: #FF6A42
-
-
-/* BUTTON */
-$button-min-width: 74px !default
-
-
-
+$primary-color: #006CEB
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
similarity index 77%
copy from frameworks/themes/JewelTheme/src/main/sass/_variables.sass
copy to frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
index 90ff1c5..b1af604 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
@@ -16,25 +16,5 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-
-$font-stack: 'Lato-Bold', sans-serif
-
-// Common Colors
-$white: rgba(white,.4)
-$disabled-color: #CCCCCC
-$font-disabled-color: #888888
-
// Color Themes
-$primary-color: #006CEB
-
-//$purple: #9A68C7
-//$blue: #3BA9E4
-//$green: #75B343
-//$orange: #FF6A42
-
-
-/* BUTTON */
-$button-min-width: 74px !default
-
-
-
+$primary-color: #FF0000
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index 7ad0fdd..5f5343c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -15,8 +15,8 @@
* limitations under the License.
*/
-
// Variables
+@import "colors/blue-color-palette"
@import "variables"
@import "mixins"
@import "functions"
diff --git a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
index 98d8247..3c82eb7 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
@@ -16,6 +16,7 @@
*/
// Variables
+@import "colors/blue-color-palette"
@import "variables"
@import "mixins"
@import "functions"
diff --git a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
similarity index 96%
copy from frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
copy to frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
index 98d8247..54e8f75 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
@@ -16,6 +16,7 @@
*/
// Variables
+@import "colors/red-color-palette"
@import "variables"
@import "mixins"
@import "functions"
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 16/22: fix paddings and min heigh in buttons,
but this should change again to em instead of px to handle
responsiveness
Posted by ca...@apache.org.
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 468751c5b5a76b5720a1fb63d8e0bbea9edda02b
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Mar 10 11:33:42 2018 +0100
fix paddings and min heigh in buttons, but this should change again to em instead of px to handle responsiveness
---
frameworks/themes/JewelTheme/src/main/resources/defaults.css | 4 ++--
frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css | 4 ++--
frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css | 4 ++--
frameworks/themes/JewelTheme/src/main/sass/_button.sass | 4 ++--
4 files changed, 8 insertions(+), 8 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index da90252..0bc4b18 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -35,9 +35,9 @@
cursor: pointer;
display: inline-block;
margin: 0;
- padding: 10px 0px;
+ padding: 10px 16px;
min-width: 74px;
- min-height: 1em;
+ min-height: 34px;
/* Background: */
border: none;
border-radius: 3px;
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
index f748283..27242c2 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
@@ -35,9 +35,9 @@
cursor: pointer;
display: inline-block;
margin: 0;
- padding: 10px 0px;
+ padding: 10px 16px;
min-width: 74px;
- min-height: 1em;
+ min-height: 34px;
/* Background: */
border: none;
border-radius: 3px;
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
index 3bda370..825f537 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
@@ -35,9 +35,9 @@
cursor: pointer;
display: inline-block;
margin: 0;
- padding: 10px 0px;
+ padding: 10px 16px;
min-width: 74px;
- min-height: 1em;
+ min-height: 34px;
/* Background: */
border: none;
border-radius: 3px;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
index 9d78f0f..ca39960 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
@@ -25,9 +25,9 @@
display: inline-block
margin: 0 //1rem
- padding: 10px 0px //.938em 1.875em
+ padding: 10px 16px //.938em 1.875em
min-width: $button-min-width
- //min-height: 1em
+ min-height: 34px
/* Background: */
border: none // .094em solid
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 20/22: commeting font line (JewelThemeFontInject) so
JewelExample can compile
Posted by ca...@apache.org.
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 2a081c078c779c6d856d8288187650cc4d53e7e3
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Mar 12 10:48:18 2018 +0100
commeting font line (JewelThemeFontInject) so JewelExample can compile
---
frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css | 1 -
frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css | 1 -
frameworks/themes/JewelTheme/src/main/sass/_global.sass | 2 +-
3 files changed, 1 insertion(+), 3 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
index 6044867..e642ce7 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
@@ -20,7 +20,6 @@
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
- fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject");
}
.royale {
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
index 4f2a299..60f16ca 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
@@ -20,7 +20,6 @@
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
- fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject");
}
.royale {
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
index b3e366f..3a8a0ef 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
@@ -25,7 +25,7 @@
-moz-box-sizing: border-box
-webkit-box-sizing: border-box
box-sizing: border-box
- fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject")
+ //fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject")
.royale
padding: 10px
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 11/22: end transforming actual files to sass syntax
Posted by ca...@apache.org.
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 aa17fd20ea50866e8cc834b8020d324129e52236
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Mar 8 19:22:39 2018 +0100
end transforming actual files to sass syntax
---
frameworks/themes/JewelTheme/pom.xml | 8 ---
.../JewelTheme/src/main/resources/Button.css | 51 ---------------
.../JewelTheme/src/main/resources/TextField.css | 75 ----------------------
.../JewelTheme/src/main/resources/defaults.css | 67 ++++++++++++++++++-
.../themes/JewelTheme/src/main/sass/_button.sass | 43 +++++++++++++
.../JewelTheme/src/main/sass/_textfield.sass | 67 +++++++++++++++++++
.../themes/JewelTheme/src/main/sass/defaults.sass | 4 +-
7 files changed, 178 insertions(+), 137 deletions(-)
diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml
index c431c4b..f74dd9c 100644
--- a/frameworks/themes/JewelTheme/pom.xml
+++ b/frameworks/themes/JewelTheme/pom.xml
@@ -64,14 +64,6 @@
<name>defaults.css</name>
<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>TextField.css</name>
- <path>../src/main/resources/TextField.css</path>
- </include-file>
</includeFiles>
</configuration>
</plugin>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/Button.css b/frameworks/themes/JewelTheme/src/main/resources/Button.css
deleted file mode 100644
index c341bde..0000000
--- a/frameworks/themes/JewelTheme/src/main/resources/Button.css
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- *
- * 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.
- *
- */
-
-@namespace "library://ns.apache.org/royale/jewel";
-/*@namespace svg "library://ns.apache.org/royale/svg";*/
-
-/*
-* Jewel Button
-*/
-.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;
-
- background-image: linear-gradient(#3BB0FF, #1E36FA);
- background-size: cover;
- background-repeat: no-repeat;
- background-clip: padding-box;
-}
-
-.button:hover {
-
-}
-
-.button:active {
-
-}
-.button:focus {
- outline:0;
-}
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/TextField.css b/frameworks/themes/JewelTheme/src/main/resources/TextField.css
deleted file mode 100644
index d7a1b85..0000000
--- a/frameworks/themes/JewelTheme/src/main/resources/TextField.css
+++ /dev/null
@@ -1,75 +0,0 @@
-/*
- *
- * 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.
- *
- */
-
-@namespace "library://ns.apache.org/royale/jewel";
-/*@namespace svg "library://ns.apache.org/royale/svg";*/
-
-/*
-* Jewel TextField
-*/
-TextField {
- position: relative;
- display: inline-block;
- box-sizing: border-box;
- width: 300px;
- max-width: 100%;
- margin: 0;
-}
-
-.vTextField--input {
- font-size: 16px;
- font-family: 'Lato', sans-serif;
-
- border: none;
- border-bottom: 2px solid;
- border-bottom-color: #ff0000;
- display: block;
- margin: 0;
- padding: 4 0;
- width: 100px;
- background: transparent;
- text-align: left;
- color: inherit;
- outline: none;
-}
-
-.vTextField--label {
- bottom: 0;
- color: #ff0000;
- font-size: 13px;
- left: 0;
- right: 0;
- pointer-events: none;
- position: absolute;
- display: block;
- width: 100%;
- overflow: hidden;
- white-space: nowrap;
- text-align: left;
-}
-
-/*
- padding: 5px;
- border: solid 1px #666666;
- border-radius: 6px;
- color: #333333;
-:hover
- padding: 5px;
- background-color: #DFDFDF;
-*/
\ 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 3a2634f..ef0706e 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -30,7 +30,27 @@
body {
font: 100% "Lato-Bold", sans-serif;
- color: red;
+ color: #006CEB;
+}
+
+/**
+ * Jewel Button
+ */
+.button, .button:hover {
+ cursor: pointer;
+ /* Background: */
+ border: 1px;
+ 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;
+}
+
+.button:focus {
+ outline: 0;
}
/**
@@ -53,7 +73,7 @@ body {
}
.textbutton {
- background-color: red;
+ background-color: #006CEB;
transition-duration: 0.4s;
}
@@ -76,4 +96,47 @@ body {
cursor: unset;
}
+/**
+ * Jewel TextField
+ */
+TextField {
+ position: relative;
+ display: inline-block;
+ box-sizing: border-box;
+ width: 300px;
+ max-width: 100%;
+ margin: 0;
+}
+
+.vTextField--input {
+ font-size: 16px;
+ font-family: "Lato", sans-serif;
+ border: none;
+ border-bottom: 2px solid;
+ border-bottom-color: #ff0000;
+ display: block;
+ margin: 0;
+ padding: 4 0;
+ width: 100px;
+ background: transparent;
+ text-align: left;
+ color: inherit;
+ outline: none;
+}
+
+.vTextField--label {
+ bottom: 0;
+ color: #ff0000;
+ font-size: 13px;
+ left: 0;
+ right: 0;
+ pointer-events: none;
+ position: absolute;
+ display: block;
+ width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-align: left;
+}
+
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
new file mode 100644
index 0000000..1ea71ab
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
@@ -0,0 +1,43 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Jewel Button
+ */
+.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
+
+ background-image: linear-gradient(#3BB0FF, #1E36FA)
+ background-size: cover
+ background-repeat: no-repeat
+ background-clip: padding-box
+
+//.button:hover
+
+//.button:active
+
+.button:focus
+ outline: 0
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/_textfield.sass
new file mode 100644
index 0000000..84b696c
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/_textfield.sass
@@ -0,0 +1,67 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Jewel TextField
+ */
+TextField
+ position: relative
+ display: inline-block
+ box-sizing: border-box
+ width: 300px
+ max-width: 100%
+ margin: 0
+
+.vTextField--input
+ font-size: 16px
+ font-family: 'Lato', sans-serif
+
+ border: none
+ border-bottom: 2px solid
+ border-bottom-color: #ff0000
+ display: block
+ margin: 0
+ padding: 4 0
+ width: 100px
+ background: transparent
+ text-align: left
+ color: inherit
+ outline: none
+
+.vTextField--label
+ bottom: 0
+ color: #ff0000
+ font-size: 13px
+ left: 0
+ right: 0
+ pointer-events: none
+ position: absolute
+ display: block
+ width: 100%
+ overflow: hidden
+ white-space: nowrap
+ text-align: left
+
+// padding: 5px;
+// border: solid 1px #666666;
+// border-radius: 6px;
+// color: #333333;
+//:hover
+// padding: 5px;
+// background-color: #DFDFDF;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index aa62d14..8fae5e5 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -35,4 +35,6 @@ body
color: $primary-color
// Components
-@import "textbutton"
\ No newline at end of file
+@import "button"
+@import "textbutton"
+@import "textfield"
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 04/22: remove JewelThemeFontInject from manifest
since should not be used in mxml
Posted by ca...@apache.org.
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 a02ffb4dbeb4564081c4ae6625d70941c2ce00e3
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Mar 6 22:33:37 2018 +0100
remove JewelThemeFontInject from manifest since should not be used in mxml
---
.../themes/JewelTheme/src/main/resources/jewel-theme-manifest.xml | 2 --
1 file changed, 2 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/jewel-theme-manifest.xml b/frameworks/themes/JewelTheme/src/main/resources/jewel-theme-manifest.xml
index b5a3258..1d3bd35 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/jewel-theme-manifest.xml
+++ b/frameworks/themes/JewelTheme/src/main/resources/jewel-theme-manifest.xml
@@ -19,7 +19,5 @@
-->
<componentPackage>
-
- <component id="JewelThemeFontInject" class="org.apache.royale.jewel.JewelThemeFontInject"/>
</componentPackage>
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 03/22: add JewelThemeFontInject and configuration,
but still doesn't work
Posted by ca...@apache.org.
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 71cd69341814ae7475fe1e35c57ac3b792297f65
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Mar 6 21:57:58 2018 +0100
add JewelThemeFontInject and configuration, but still doesn't work
---
.../royale/org/apache/royale/jewel/Application.as | 1 -
frameworks/themes/JewelTheme/pom.xml | 11 ++++++++++
.../src/main/config/compile-swf-config.xml | 11 ++++++++++
.../JewelTheme/src/main/resources/defaults.css | 3 +++
.../src/main/resources/jewel-theme-as-manifest.xml | 24 +++++++++++++++++++++
.../src/main/resources/jewel-theme-manifest.xml | 25 ++++++++++++++++++++++
.../src/main/royale/JewelThemeClasses.as | 18 +++-------------
.../apache/royale/jewel/JewelThemeFontInject.as} | 10 ++++-----
8 files changed, 81 insertions(+), 22 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Application.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Application.as
index fed1673..b29f0a4 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Application.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Application.as
@@ -40,7 +40,6 @@ package org.apache.royale.jewel
*
* <inject_html>
* <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
- * <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
* </inject_html>
*
* @langversion 3.0
diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml
index ea75e2d..14bfda6 100644
--- a/frameworks/themes/JewelTheme/pom.xml
+++ b/frameworks/themes/JewelTheme/pom.xml
@@ -41,6 +41,17 @@
<version>${royale.compiler.version}</version>
<extensions>true</extensions>
<configuration>
+ <namespaces>
+ <namespace>
+ <uri>library://ns.apache.org/royale/jewel</uri>
+ <manifest>${project.basedir}/src/main/resources/jewel-theme-manifest.xml</manifest>
+ </namespace>
+ <namespace>
+ <type>as</type>
+ <uri>library://ns.apache.org/royale/jewel</uri>
+ <manifest>${project.basedir}/src/main/resources/jewel-theme-as-manifest.xml</manifest>
+ </namespace>
+ </namespaces>
<includeClasses>
<includeClass>JewelThemeClasses</includeClass>
</includeClasses>
diff --git a/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml b/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml
index 55679c7..a6b5c38 100644
--- a/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml
+++ b/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml
@@ -66,6 +66,17 @@
<locale/>
<library-path/>
+
+ <namespaces>
+ <namespace>
+ <uri>library://ns.apache.org/royale/jewel</uri>
+ <manifest>../resources/jewel-theme-manifest.xml</manifest>
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/jewel</uri>
+ <manifest>../resources/jewel-theme-as-manifest.xml</manifest>
+ </namespace>
+ </namespaces>
<source-path>
<path-element>../royale</path-element>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 3d376ac..845a3a4 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -17,12 +17,15 @@
*
*/
+ @namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
.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
diff --git a/frameworks/themes/JewelTheme/src/main/resources/jewel-theme-as-manifest.xml b/frameworks/themes/JewelTheme/src/main/resources/jewel-theme-as-manifest.xml
new file mode 100644
index 0000000..05d8800
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/jewel-theme-as-manifest.xml
@@ -0,0 +1,24 @@
+<?xml version="1.0"?>
+<!--
+
+ 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.
+
+-->
+
+<componentPackage>
+
+</componentPackage>
+
diff --git a/frameworks/themes/JewelTheme/src/main/resources/jewel-theme-manifest.xml b/frameworks/themes/JewelTheme/src/main/resources/jewel-theme-manifest.xml
new file mode 100644
index 0000000..b5a3258
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/jewel-theme-manifest.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0"?>
+<!--
+
+ 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.
+
+-->
+
+<componentPackage>
+
+ <component id="JewelThemeFontInject" class="org.apache.royale.jewel.JewelThemeFontInject"/>
+
+</componentPackage>
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as b/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
index 1a1733c..3e88523 100644
--- a/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
+++ b/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
@@ -27,21 +27,9 @@ package
*/
internal class JewelThemeClasses
{
- /**
- * constructor.
- *
- * <inject_html>
- * <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
- * </inject_html>
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.2
- */
- public function JewelThemeClasses()
- {
- super();
+ COMPILE::JS
+ {
+ import org.apache.royale.jewel.JewelThemeFontInject; JewelThemeFontInject;
}
}
diff --git a/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as b/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/jewel/JewelThemeFontInject.as
similarity index 83%
copy from frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
copy to frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/jewel/JewelThemeFontInject.as
index 1a1733c..9d5f913 100644
--- a/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
+++ b/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/jewel/JewelThemeFontInject.as
@@ -16,16 +16,14 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package
+package org.apache.royale.jewel
{
/**
* @private
- * This class is used to link additional classes into JewelTheme.swc
- * beyond those that are found by dependecy analysis starting
- * from the classes specified in manifest.xml.
+ * This class is used to link the font in html
*/
- internal class JewelThemeClasses
+ public class JewelThemeFontInject
{
/**
* constructor.
@@ -39,7 +37,7 @@ package
* @playerversion AIR 2.6
* @productversion Royale 0.9.2
*/
- public function JewelThemeClasses()
+ public function JewelThemeFontInject()
{
super();
}
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 01/22: refactor all work on vivid branch to jewel for
all files
Posted by ca...@apache.org.
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 115f9af8e0703177417c6141890cfa7bd17a2169
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Mar 6 11:51:41 2018 +0100
refactor all work on vivid branch to jewel for all files
---
examples/royale/JewelExample/.vscode/launch.json | 21 ++
examples/royale/JewelExample/.vscode/settings.json | 3 +
examples/royale/JewelExample/.vscode/tasks.json | 8 +
examples/royale/JewelExample/README.txt | 26 ++
examples/royale/JewelExample/asconfig.json | 31 +++
examples/royale/JewelExample/build.xml | 68 +++++
examples/royale/JewelExample/pom.xml | 96 +++++++
.../src/main/config/compile-app-config.xml | 28 ++
.../src/main/resources/jewel-example-styles.css | 25 ++
.../royale/JewelExample/src/main/royale/App.mxml | 40 +++
.../src/main/royale/ButtonPlayGround.mxml | 60 +++++
.../src/main/royale/TextInputPlayGround.mxml | 30 +++
examples/royale/pom.xml | 1 +
frameworks/projects/Jewel/.vscode/launch.json | 21 ++
frameworks/projects/Jewel/.vscode/settings.json | 3 +
frameworks/projects/Jewel/.vscode/tasks.json | 8 +
frameworks/projects/Jewel/asconfig.json | 34 +++
frameworks/projects/Jewel/build.xml | 130 ++++++++++
frameworks/projects/Jewel/pom.xml | 160 ++++++++++++
.../Jewel/src/main/config/compile-swf-config.xml | 105 ++++++++
.../projects/Jewel/src/main/resources/defaults.css | 74 ++++++
.../Jewel/src/main/resources/jewel-as-manifest.xml | 25 ++
.../Jewel/src/main/resources/jewel-manifest.xml | 30 +++
.../projects/Jewel/src/main/royale/JewelClasses.as | 42 +++
.../royale/org/apache/royale/jewel/Application.as | 70 +++++
.../royale/org/apache/royale/jewel/RadioButton.as | 107 ++++++++
.../main/royale/org/apache/royale/jewel/Slider.as | 72 ++++++
.../royale/org/apache/royale/jewel/TextButton.as | 63 +++++
.../royale/org/apache/royale/jewel/TextField.as | 115 +++++++++
.../apache/royale/jewel/beads/RadioButtonView.as | 286 +++++++++++++++++++++
.../apache/royale/jewel/beads/SliderThumbView.as | 121 +++++++++
.../apache/royale/jewel/beads/SliderTrackView.as | 121 +++++++++
.../org/apache/royale/jewel/beads/SliderView.as | 172 +++++++++++++
.../royale/jewel/supportClasses/ITextField.as | 68 +++++
.../royale/jewel/supportClasses/RadioButtonIcon.as | 117 +++++++++
.../royale/jewel/supportClasses/TextFieldBase.as | 154 +++++++++++
frameworks/projects/pom.xml | 1 +
frameworks/themes/JewelTheme/.vscode/launch.json | 21 ++
frameworks/themes/JewelTheme/.vscode/settings.json | 3 +
frameworks/themes/JewelTheme/.vscode/tasks.json | 8 +
frameworks/themes/JewelTheme/asconfig.json | 34 +++
frameworks/themes/JewelTheme/build.xml | 133 ++++++++++
frameworks/themes/JewelTheme/pom.xml | 70 +++++
.../JewelTheme/src/main/resources/TextButton.css | 82 ++++++
.../JewelTheme/src/main/resources/TextField.css | 75 ++++++
.../src/main/resources/assets/JewelButton2.svg | 44 ++++
.../JewelTheme/src/main/resources/defaults.css | 33 +++
.../src/main/royale/JewelThemeClasses.as | 33 +++
frameworks/themes/pom.xml | 1 +
49 files changed, 3073 insertions(+)
diff --git a/examples/royale/JewelExample/.vscode/launch.json b/examples/royale/JewelExample/.vscode/launch.json
new file mode 100644
index 0000000..5dfb672
--- /dev/null
+++ b/examples/royale/JewelExample/.vscode/launch.json
@@ -0,0 +1,21 @@
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Launch Chrome against debug.html, with sourcemaps",
+ "type": "chrome",
+ "request": "launch",
+ "file": "${workspaceRoot}/target/javascript/bin/js-debug/index.html",
+ "sourceMaps": true,
+ "preLaunchTask": "mvn"
+ },
+ {
+ "name": "Launch Firefox against debug.html, with sourcemaps",
+ "type": "firefox",
+ "request": "launch",
+ "file": "${workspaceRoot}/target/javascript/bin/js-debug/index.html",
+ "sourceMaps": true,
+ "preLaunchTask": "mvn"
+ }
+ ]
+}
diff --git a/examples/royale/JewelExample/.vscode/settings.json b/examples/royale/JewelExample/.vscode/settings.json
new file mode 100644
index 0000000..1f5a970
--- /dev/null
+++ b/examples/royale/JewelExample/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "nextgenas.sdk.framework": "/Users/carlosrovira/Dev/Royale/Sdks/apache-royale-0.9.2-SNAPSHOT"
+}
\ No newline at end of file
diff --git a/examples/royale/JewelExample/.vscode/tasks.json b/examples/royale/JewelExample/.vscode/tasks.json
new file mode 100644
index 0000000..5d6198d
--- /dev/null
+++ b/examples/royale/JewelExample/.vscode/tasks.json
@@ -0,0 +1,8 @@
+{
+ // for the documentation about the tasks.json format
+ "version": "0.1.0",
+ "command": "mvn",
+ "args": ["clean", "install", "-DskipTests"],
+ "isShellCommand": true,
+ "showOutput": "always"
+}
\ No newline at end of file
diff --git a/examples/royale/JewelExample/README.txt b/examples/royale/JewelExample/README.txt
new file mode 100644
index 0000000..7b84b3a
--- /dev/null
+++ b/examples/royale/JewelExample/README.txt
@@ -0,0 +1,26 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+DESCRIPTION
+
+The JewelExample is demo app to customize styles on Royale components
+
+Right now this is a starter project with only a button to start developing styles
+
+
diff --git a/examples/royale/JewelExample/asconfig.json b/examples/royale/JewelExample/asconfig.json
new file mode 100644
index 0000000..4b6259e
--- /dev/null
+++ b/examples/royale/JewelExample/asconfig.json
@@ -0,0 +1,31 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+{
+ "config": "royale",
+ "compilerOptions": {
+ "debug": false,
+ "targets": ["JSRoyale","SWF"],
+ "source-map": true
+ },
+ "additionalOptions": "-remove-circulars -js-output-optimization=skipAsCoercions",
+ "files":
+ [
+ "src/main/royale/App.mxml"
+ ]
+}
diff --git a/examples/royale/JewelExample/build.xml b/examples/royale/JewelExample/build.xml
new file mode 100644
index 0000000..b0cb3d3
--- /dev/null
+++ b/examples/royale/JewelExample/build.xml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+
+ 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.
+
+-->
+
+
+<project name="JewelExample" default="main" basedir=".">
+ <property name="ROYALE_HOME" location="../../.."/>
+ <property name="example" value="App" />
+
+ <property file="${ROYALE_HOME}/env.properties"/>
+ <property environment="env"/>
+ <property file="${ROYALE_HOME}/build.properties"/>
+ <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+
+ <include file="${basedir}/../../build_example.xml" />
+
+ <target name="main" depends="clean,build_example.compile" description="Clean build of ${example}">
+ <mkdir dir="${basedir}/bin/js-debug/assets" />
+ <copy todir="${basedir}/bin/js-debug/assets" failonerror="false">
+ <fileset dir="${basedir}/src/main/resources/assets">
+ <include name="**" />
+ </fileset>
+ </copy>
+ <mkdir dir="${basedir}/bin/js-release/assets" />
+ <copy todir="${basedir}/bin/js-release/assets" failonerror="false">
+ <fileset dir="${basedir}/src/main/resources/assets">
+ <include name="**" />
+ </fileset>
+ </copy>
+ <replace file="${basedir}/bin/js-debug/index.html" token="${primary}" value="indigo" />
+ <replace file="${basedir}/bin/js-debug/index.html" token="${accent}" value="pink" />
+ <replace file="${basedir}/bin/js-release/index.html" token="${primary}" value="indigo" />
+ <replace file="${basedir}/bin/js-release/index.html" token="${accent}" value="pink" />
+ </target>
+
+ <target name="clean">
+ <delete dir="${basedir}/bin" failonerror="false" />
+ <delete dir="${basedir}/bin-debug" failonerror="false" />
+ <delete dir="${basedir}/bin-release" failonerror="false" />
+ <delete dir="${basedir}/target" failonerror="false" />
+ </target>
+
+ <target name="examine" depends="build_example.get.browser">
+ <property name="which" value="debug" />
+ <echo message="See various team members."/>
+ <exec executable="${browser}" dir="${basedir}/bin/js-${which}" failonerror="true">
+ <arg value="${basedir}/bin/js-${which}/index.html"/>
+ </exec>
+ </target>
+
+
+</project>
diff --git a/examples/royale/JewelExample/pom.xml b/examples/royale/JewelExample/pom.xml
new file mode 100644
index 0000000..56331a8
--- /dev/null
+++ b/examples/royale/JewelExample/pom.xml
@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+ 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.
+
+-->
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+ <modelVersion>4.0.0</modelVersion>
+
+ <parent>
+ <groupId>org.apache.royale.examples</groupId>
+ <artifactId>examples-royale</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ </parent>
+
+ <artifactId>JewelExample</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ <packaging>swf</packaging>
+
+ <name>Apache Royale: Examples: Royale: JewelExample</name>
+
+ <build>
+ <sourceDirectory>src/main/royale</sourceDirectory>
+ <plugins>
+ <plugin>
+ <groupId>org.apache.royale.compiler</groupId>
+ <artifactId>royale-maven-plugin</artifactId>
+ <extensions>true</extensions>
+ <configuration>
+ <mainClass>App.mxml</mainClass>
+ <targets>JSRoyale,SWF</targets>
+ <!--<htmlTemplate>${basedir}/target/javascript/bin/js-debug/jewel-js-index-template.html</htmlTemplate>-->
+ </configuration>
+ </plugin>
+ </plugins>
+ </build>
+
+ <dependencies>
+ <dependency>
+ <groupId>com.adobe.flash.framework</groupId>
+ <artifactId>playerglobal</artifactId>
+ <version>${flash.version}</version>
+ <type>swc</type>
+ <scope>provided</scope>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>HTML</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>JewelTheme</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ <type>swc</type>
+ <scope>theme</scope>
+ </dependency>
+ </dependencies>
+
+</project>
diff --git a/examples/royale/JewelExample/src/main/config/compile-app-config.xml b/examples/royale/JewelExample/src/main/config/compile-app-config.xml
new file mode 100644
index 0000000..df6ea5b
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/config/compile-app-config.xml
@@ -0,0 +1,28 @@
+<!--
+
+ 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.
+
+-->
+<royale-config>
+ <js-output-optimization>
+ <optimization>skipAsCoercions</optimization>
+ </js-output-optimization>
+ <compiler>
+ <theme>
+ <filename>../../../../../../frameworks/libs/JewelTheme.swc</filename>
+ </theme>
+ </compiler>
+</royale-config>
diff --git a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
new file mode 100644
index 0000000..48829b3
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
@@ -0,0 +1,25 @@
+/*
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+*/
+
+@namespace "http://www.w3.org/1999/xhtml";
+
+
+
diff --git a/examples/royale/JewelExample/src/main/royale/App.mxml b/examples/royale/JewelExample/src/main/royale/App.mxml
new file mode 100644
index 0000000..8f1e7e5
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/App.mxml
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!---
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+-->
+<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:js="library://ns.apache.org/royale/basic"
+ xmlns:local="*">
+
+ <fx:Style source="../../main/resources/jewel-example-styles.css"/>
+
+ <js:valuesImpl>
+ <js:SimpleCSSValuesImpl />
+ </js:valuesImpl>
+ <js:initialView>
+ <js:View width="100%" height="100%" className="page-content">
+ <js:beads>
+ <js:VerticalLayout />
+ </js:beads>
+ <local:ButtonPlayGround/>
+ <local:TextInputPlayGround/>
+ </js:View>
+ </js:initialView>
+</j:Application>
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
new file mode 100644
index 0000000..e7d8fe6
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+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.
+
+-->
+<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:js="library://ns.apache.org/royale/basic"
+ xmlns:j="library://ns.apache.org/royale/jewel">
+
+ <fx:Script>
+ <![CDATA[
+ private function onValueChange(event:Event):void
+ {
+ button.width = slider.value;
+ button.height = slider_v.value;
+ }
+ ]]>
+ </fx:Script>
+
+ <js:beads>
+ <js:VerticalLayoutWithPaddingAndGap gap="10"/>
+ </js:beads>
+
+ <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 id="button2" text="Button"/>
+
+
+
+ <j:Slider id="slider" width="250" value="420" minimum="50" maximum="500"
+ valueChange="onValueChange(event)"/>
+ <j:Slider id="slider_v" width="250" value="440" minimum="50" maximum="500"
+ valueChange="onValueChange(event)"/>
+
+ <j:TextButton id="button" text="Button" width="420" height="440"/>
+
+</js:Group>
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
new file mode 100644
index 0000000..aa8c81a
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+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.
+
+-->
+<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:js="library://ns.apache.org/royale/basic"
+ xmlns:j="library://ns.apache.org/royale/jewel">
+
+
+
+ <j:TextField text="Text Input" width="120" height="40"/>
+
+ <j:RadioButton/>
+
+</js:Group>
diff --git a/examples/royale/pom.xml b/examples/royale/pom.xml
index e65f9df..2cc511e 100644
--- a/examples/royale/pom.xml
+++ b/examples/royale/pom.xml
@@ -71,6 +71,7 @@
<module>DataBindingExampleWithFlexLayout</module>
<module>DragAndDropExample</module>
<module>AlertExample</module>
+ <module>JewelExample</module>
</modules>
<build>
diff --git a/frameworks/projects/Jewel/.vscode/launch.json b/frameworks/projects/Jewel/.vscode/launch.json
new file mode 100644
index 0000000..5dfb672
--- /dev/null
+++ b/frameworks/projects/Jewel/.vscode/launch.json
@@ -0,0 +1,21 @@
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Launch Chrome against debug.html, with sourcemaps",
+ "type": "chrome",
+ "request": "launch",
+ "file": "${workspaceRoot}/target/javascript/bin/js-debug/index.html",
+ "sourceMaps": true,
+ "preLaunchTask": "mvn"
+ },
+ {
+ "name": "Launch Firefox against debug.html, with sourcemaps",
+ "type": "firefox",
+ "request": "launch",
+ "file": "${workspaceRoot}/target/javascript/bin/js-debug/index.html",
+ "sourceMaps": true,
+ "preLaunchTask": "mvn"
+ }
+ ]
+}
diff --git a/frameworks/projects/Jewel/.vscode/settings.json b/frameworks/projects/Jewel/.vscode/settings.json
new file mode 100644
index 0000000..1f5a970
--- /dev/null
+++ b/frameworks/projects/Jewel/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "nextgenas.sdk.framework": "/Users/carlosrovira/Dev/Royale/Sdks/apache-royale-0.9.2-SNAPSHOT"
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/.vscode/tasks.json b/frameworks/projects/Jewel/.vscode/tasks.json
new file mode 100644
index 0000000..5d6198d
--- /dev/null
+++ b/frameworks/projects/Jewel/.vscode/tasks.json
@@ -0,0 +1,8 @@
+{
+ // for the documentation about the tasks.json format
+ "version": "0.1.0",
+ "command": "mvn",
+ "args": ["clean", "install", "-DskipTests"],
+ "isShellCommand": true,
+ "showOutput": "always"
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/asconfig.json b/frameworks/projects/Jewel/asconfig.json
new file mode 100644
index 0000000..f4421c7
--- /dev/null
+++ b/frameworks/projects/Jewel/asconfig.json
@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+ {
+ "config": "royale",
+ "type": "lib",
+ "compilerOptions": {
+ "debug": true,
+ "targets": [
+ "JSRoyale",
+ "SWF"
+ ],
+ "include-classes": [
+ "JewelClasses"
+ ],
+ "include-sources": [
+ "src/main/royale"
+ ],
+ "output": "target/Jewel.swc"
+ }
+}
diff --git a/frameworks/projects/Jewel/build.xml b/frameworks/projects/Jewel/build.xml
new file mode 100644
index 0000000..5ad2877
--- /dev/null
+++ b/frameworks/projects/Jewel/build.xml
@@ -0,0 +1,130 @@
+<?xml version="1.0"?>
+<!--
+
+ 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.
+
+-->
+
+
+<project name="Jewel" default="main" basedir=".">
+ <property name="ROYALE_HOME" location="../../.."/>
+
+ <property file="${ROYALE_HOME}/env.properties"/>
+ <property environment="env"/>
+ <property file="${ROYALE_HOME}/build.properties"/>
+ <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+
+ <property name="target.name" value="${ant.project.name}.swc" />
+
+ <target name="main" depends="clean,check-compiler,compile,compile-js,copy-swc,test" description="Full build of ${ant.project.name}.swc">
+ </target>
+
+ <target name="compile-js">
+ <ant dir="${ROYALE_HOME}/frameworks/js/projects/${ant.project.name}JS/" inheritAll="false" >
+ <property name="ROYALE_SWF_COMPILER_HOME" value="${ROYALE_SWF_COMPILER_HOME}"/>
+ <property name="ROYALE_COMPILER_HOME" value="${ROYALE_COMPILER_HOME}"/>
+ <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+ </ant>
+ </target>
+
+ <target name="copy-swc" if="env.AIR_HOME">
+ <copy file="${basedir}/target/${target.name}" tofile="${ROYALE_HOME}/frameworks/libs/${target.name}" />
+ </target>
+
+ <target name="check-for-tests" >
+ <condition property="skip-tests" >
+ <not>
+ <available file="${basedir}/src/test/royale/build.xml" />
+ </not>
+ </condition>
+ </target>
+
+ <target name="test" depends="check-for-tests" unless="skip-tests">
+ <ant dir="src/test/royale" />
+ </target>
+
+ <target name="clean">
+ <delete failonerror="false">
+ <fileset dir="${ROYALE_HOME}/frameworks/libs">
+ <include name="${target.name}"/>
+ </fileset>
+ </delete>
+ <delete failonerror="false" includeemptydirs="true">
+ <fileset dir="${basedir}/target">
+ <include name="**/**"/>
+ </fileset>
+ </delete>
+ <antcall target="clean-tests" />
+ </target>
+
+ <target name="clean-tests" depends="check-for-tests" unless="skip-tests">
+ <ant dir="src/test/royale" target="clean"/>
+ </target>
+
+ <target name="compile" description="Compiles .as files into .swc" if="env.AIR_HOME">
+ <echo message="Compiling libs/${ant.project.name}.swc"/>
+ <echo message="ROYALE_HOME: ${ROYALE_HOME}"/>
+ <echo message="ROYALE_SWF_COMPILER_HOME: ${ROYALE_SWF_COMPILER_HOME}"/>
+ <echo message="ROYALE_COMPILER_HOME: ${ROYALE_COMPILER_HOME}"/>
+
+ <java jar="${ROYALE_COMPILER_HOME}/lib/compc.jar" fork="true" >
+ <jvmarg value="-Xmx384m" />
+ <jvmarg value="-Dsun.io.useCanonCaches=false" />
+ <jvmarg value="-Droyalelib=${ROYALE_HOME}/frameworks" />
+ <arg value="+royalelib=${ROYALE_HOME}/frameworks" />
+ <arg value="+playerglobal.version=${playerglobal.version}" />
+ <arg value="+env.AIR_HOME=${env.AIR_HOME}" />
+ <arg value="-compiler.strict-xml=true" />
+ <arg value="-compiler.targets=SWF,JSRoyale" />
+ <arg value="-output=${basedir}/target/${target.name}" />
+ <arg value="-load-config=${basedir}/src/main/config/compile-swf-config.xml" />
+ <arg value="-js-load-config=${ROYALE_HOME}/frameworks/js-config.xml" />
+ <arg value="-js-load-config+=${basedir}/../../js/projects/${ant.project.name}JS/src/main/config/compile-js-config.xml" />
+ </java>
+ </target>
+
+ <target name="check-compiler" depends="check-compiler-home,check-transpiler-home">
+ <path id="lib.path">
+ <fileset dir="${ROYALE_COMPILER_HOME}/lib" includes="compiler-royaleTasks.jar"/>
+ </path>
+ <taskdef resource="flexTasks.tasks" classpathref="lib.path"/>
+ </target>
+
+ <target name="check-compiler-home"
+ description="Set ROYALE_SWF_COMPILER_HOME to point at the compiler.">
+
+ <available file="${ROYALE_HOME}/lib/compiler-mxmlc.jar"
+ type="file"
+ property="ROYALE_SWF_COMPILER_HOME"
+ value="${ROYALE_HOME}"/>
+
+ <fail message="ROYALE_SWF_COMPILER_HOME must be set to a folder with a lib sub-folder containing compiler-mxmlc.jar such as the compiler folder in royale-compiler repo or the root of a Royale SDK"
+ unless="ROYALE_SWF_COMPILER_HOME"/>
+ </target>
+
+ <target name="check-transpiler-home"
+ description="Set ROYALE_COMPILER_HOME to point at the cross-compiler.">
+
+ <available file="${ROYALE_HOME}/js/lib/jsc.jar"
+ type="file"
+ property="ROYALE_COMPILER_HOME"
+ value="${ROYALE_HOME}/js"/>
+
+ <fail message="ROYALE_COMPILER_HOME must be set to a folder with a lib sub-folder containing jsc.jar such as the compiler-jx folder in royale-compiler repo or the js folder of a Royale SDK"
+ unless="ROYALE_COMPILER_HOME"/>
+ </target>
+
+</project>
diff --git a/frameworks/projects/Jewel/pom.xml b/frameworks/projects/Jewel/pom.xml
new file mode 100644
index 0000000..74e9f8d
--- /dev/null
+++ b/frameworks/projects/Jewel/pom.xml
@@ -0,0 +1,160 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+ 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.
+
+-->
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+ <modelVersion>4.0.0</modelVersion>
+
+ <parent>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>projects</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ </parent>
+
+ <artifactId>Jewel</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ <packaging>swc</packaging>
+
+ <name>Apache Royale: Framework: Libs: Jewel</name>
+
+ <build>
+ <sourceDirectory>src/main/royale</sourceDirectory>
+ <plugins>
+ <plugin>
+ <groupId>org.apache.royale.compiler</groupId>
+ <artifactId>royale-maven-plugin</artifactId>
+ <version>${royale.compiler.version}</version>
+ <extensions>true</extensions>
+ <configuration>
+ <namespaces>
+ <namespace>
+ <uri>library://ns.apache.org/royale/jewel</uri>
+ <manifest>${project.basedir}/src/main/resources/jewel-manifest.xml</manifest>
+ </namespace>
+ <namespace>
+ <type>as</type>
+ <uri>library://ns.apache.org/royale/jewel</uri>
+ <manifest>${project.basedir}/src/main/resources/jewel-as-manifest.xml</manifest>
+ </namespace>
+ </namespaces>
+ <includeClasses>
+ <includeClass>JewelClasses</includeClass>
+ </includeClasses>
+ <includeFiles>
+ <include-file>
+ <name>defaults.css</name>
+ <path>../src/main/resources/defaults.css</path>
+ </include-file>
+ </includeFiles>
+ <includeLookupOnly>true</includeLookupOnly>
+ <!--<allowSubclassOverrides>true</allowSubclassOverrides>-->
+ <skipExtern>true</skipExtern>
+ <!--<additionalCompilerOptions>-compiler.fxg-base-class=flash.display.Sprite</additionalCompilerOptions>-->
+ </configuration>
+ </plugin>
+ </plugins>
+ </build>
+
+ <dependencies>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Core</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Core</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Binding</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Binding</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Graphics</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Graphics</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Collections</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Collections</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>HTML</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>HTML</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ </dependencies>
+
+</project>
diff --git a/frameworks/projects/Jewel/src/main/config/compile-swf-config.xml b/frameworks/projects/Jewel/src/main/config/compile-swf-config.xml
new file mode 100644
index 0000000..4c2f19e
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/config/compile-swf-config.xml
@@ -0,0 +1,105 @@
+<!--
+
+ 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.
+
+-->
+<royale-config>
+
+ <compiler>
+ <accessible>false</accessible>
+
+ <!-- build both SWF and JS. -->
+ <targets>
+ <target>JSRoyale</target>
+ </targets>
+ <strict-xml>true</strict-xml>
+
+ <external-library-path>
+ <path-element>${env.AIR_HOME}/frameworks/libs/air/airglobal.swc</path-element>
+ <path-element>../../../../../libs/Binding.swc</path-element>
+ <path-element>../../../../../libs/Core.swc</path-element>
+ <path-element>../../../../../libs/Graphics.swc</path-element>
+ <path-element>../../../../../libs/Basic.swc</path-element>
+ <path-element>../../../../../libs/Collections.swc</path-element>
+ <path-element>../../../../../libs/HTML.swc</path-element>
+ </external-library-path>
+
+ <allow-subclass-overrides>true</allow-subclass-overrides>
+ <mxml>
+ <children-as-data>true</children-as-data>
+ </mxml>
+ <binding-value-change-event>org.apache.royale.events.ValueChangeEvent</binding-value-change-event>
+ <binding-value-change-event-kind>org.apache.royale.events.ValueChangeEvent</binding-value-change-event-kind>
+ <binding-value-change-event-type>valueChange</binding-value-change-event-type>
+
+ <define>
+ <name>COMPILE::SWF</name>
+ <value>true</value>
+ </define>
+ <define>
+ <name>COMPILE::JS</name>
+ <value>false</value>
+ </define>
+
+ <keep-as3-metadata>
+ <name>Bindable</name>
+ <name>Managed</name>
+ <name>ChangeEvent</name>
+ <name>NonCommittingChangeEvent</name>
+ <name>Transient</name>
+ </keep-as3-metadata>
+
+ <locale/>
+
+ <library-path/>
+
+ <namespaces>
+ <namespace>
+ <uri>library://ns.apache.org/royale/jewel</uri>
+ <manifest>../resources/jewel-manifest.xml</manifest>
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/jewel</uri>
+ <manifest>../resources/jewel-as-manifest.xml</manifest>
+ </namespace>
+ </namespaces>
+
+ <source-path>
+ <path-element>../royale</path-element>
+ </source-path>
+
+ <warn-no-constructor>false</warn-no-constructor>
+ </compiler>
+
+ <include-file>
+ <name>defaults.css</name>
+ <path>../resources/defaults.css</path>
+ </include-file>
+
+ <include-lookup-only>true</include-lookup-only>
+
+ <include-classes>
+ <class>JewelClasses</class>
+ </include-classes>
+
+ <include-namespaces>
+ <uri>library://ns.apache.org/royale/jewel</uri>
+ </include-namespaces>
+
+ <target-player>${playerglobal.version}</target-player>
+
+
+</royale-config>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
new file mode 100644
index 0000000..db367df
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -0,0 +1,74 @@
+/*
+ *
+ * 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.
+ *
+ */
+
+@namespace "library://ns.apache.org/royale/jewel";
+
+/*
+* Jewel TextField
+*/
+TextField {
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
+ /*IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView");
+ IBeadController: ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController");*/
+}
+.vTextField--input {}
+.vTextField--label {}
+
+/*
+* Jewel TextButton
+*/
+TextButton {
+}
+TextButton:hover {}
+TextButton:active {}
+
+/*
+* Jewel Slider
+*/
+Slider {
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView");
+ IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout");
+ IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController");
+ position: relative;
+}
+.SliderTrack {
+ position: absolute;
+}
+.SliderThumb {
+ position: absolute;
+ border-radius: 15px;
+}
+
+@media -royale-swf
+{
+ Slider
+ {
+ iThumbView: ClassReference("org.apache.royale.jewel.beads.SliderThumbView");
+ iTrackView: ClassReference("org.apache.royale.jewel.beads.SliderTrackView");
+ }
+
+ RadioButton
+ {
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView");
+ /*font-size: 11px;
+ font-family: Arial;*/
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-as-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-as-manifest.xml
new file mode 100644
index 0000000..e38496a
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-as-manifest.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0"?>
+<!--
+
+ 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.
+
+-->
+
+
+<componentPackage>
+
+
+</componentPackage>
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
new file mode 100644
index 0000000..804e1de
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -0,0 +1,30 @@
+<?xml version="1.0"?>
+<!--
+
+ 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.
+
+-->
+
+
+<componentPackage>
+
+ <component id="Application" class="org.apache.royale.jewel.Application"/>
+ <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"/>
+ <component id="RadioButton" class="org.apache.royale.jewel.RadioButton"/>
+
+</componentPackage>
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
new file mode 100644
index 0000000..cc74f2e
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -0,0 +1,42 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+
+ /**
+ * @private
+ * This class is used to link additional classes into jewel.swc
+ * beyond those that are found by dependecy analysis starting
+ * from the classes specified in manifest.xml.
+ */
+ internal class JewelClasses
+ {
+ import org.apache.royale.jewel.beads.SliderView; SliderView;
+
+ COMPILE::SWF
+ {
+ import org.apache.royale.jewel.beads.SliderThumbView; SliderThumbView;
+ import org.apache.royale.jewel.beads.SliderTrackView; SliderTrackView;
+
+ import org.apache.royale.jewel.beads.RadioButtonView; RadioButtonView;
+ }
+
+ }
+
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Application.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Application.as
new file mode 100644
index 0000000..0b447f6
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Application.as
@@ -0,0 +1,70 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ import org.apache.royale.core.Application;
+ import org.apache.royale.core.SimpleCSSValuesImpl;
+
+ /**
+ * Jewel Application holds specific Jewel need in a Royale Application.
+ *
+ * This class extends the standard Application and sets up the
+ * SimpleCSSValuesImpl (implementation) for convenience.
+ *
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public class Application extends org.apache.royale.core.Application
+ {
+ /**
+ * constructor.
+ *
+ * <inject_html>
+ * <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
+ * </inject_html>
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function Application()
+ {
+ super();
+
+ this.valuesImpl = new SimpleCSSValuesImpl();
+
+ // this a is temp solution until we get a better way to get a reference to Application
+ //topLevelApplication = this;
+ }
+
+ /**
+ * static reference to this application used mainly for dialog (Dialog class)
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ //public static var topLevelApplication:Object;
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as
new file mode 100644
index 0000000..05a5b3d
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.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
+{
+ import org.apache.royale.html.RadioButton;
+
+ COMPILE::SWF
+ {
+ import flash.display.DisplayObject;
+ }
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.jewel.supportClasses.RadioButtonIcon;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The RadioButton class is a component that displays a selectable Button. RadioButtons
+ * are typically used in groups, identified by the groupName property. RadioButton use
+ * the following beads:
+ *
+ * org.apache.royale.core.IBeadModel: the data model, which includes the groupName.
+ * org.apache.royale.core.IBeadView: the bead that constructs the visual parts of the RadioButton..
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ COMPILE::SWF
+ public class RadioButton extends org.apache.royale.html.RadioButton
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function RadioButton(upState:DisplayObject=null, overState:DisplayObject=null, downState:DisplayObject=null, hitTestState:DisplayObject=null)
+ {
+ super(upState, overState, downState, hitTestState);
+ }
+ }
+
+ COMPILE::JS
+ public class RadioButton extends org.apache.royale.html.RadioButton
+ {
+ /**
+ * @private
+ *
+ * @royalesuppresspublicvarwarning
+ */
+ public static var radioCounter:int = 0;
+
+ private var labelFor:HTMLLabelElement;
+ private var textNode:Text;
+ private var icon:RadioButtonIcon;
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion HTMLInputElement
+ * @royaleignorecoercion HTMLLabelElement
+ * @royaleignorecoercion Text
+ */
+ override protected function createElement():WrappedHTMLElement
+ {
+
+
+ icon = new RadioButtonIcon()
+ icon.id = '_radio_' + org.apache.royale.jewel.RadioButton.radioCounter++;
+
+ textNode = document.createTextNode('') as Text;
+
+ labelFor = addElementToWrapper(this,'label') as HTMLLabelElement;
+ labelFor.appendChild(icon.element);
+ labelFor.appendChild(textNode);
+
+ (textNode as WrappedHTMLElement).royale_wrapper = this;
+ (icon.element as WrappedHTMLElement).royale_wrapper = this;
+
+ typeNames = 'RadioButton';
+
+ return element;
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Slider.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Slider.as
new file mode 100644
index 0000000..9d4f6d9
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Slider.as
@@ -0,0 +1,72 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ import org.apache.royale.html.Slider;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ [Event(name="valueChange", type="org.apache.royale.events.Event")]
+
+ /**
+ * The Slider class is a component that displays a range of values using a
+ * track and a thumb control. The Slider uses the following bead types:
+ *
+ * org.apache.royale.core.IBeadModel: the data model, typically an IRangeModel, that holds the Slider values.
+ * org.apache.royale.core.IBeadView: the bead that constructs the visual parts of the Slider.
+ * org.apache.royale.core.IBeadController: the bead that handles input.
+ * org.apache.royale.core.IThumbValue: the bead responsible for the display of the thumb control.
+ * org.apache.royale.core.ITrackView: the bead responsible for the display of the track.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public class Slider extends org.apache.royale.html.Slider
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function Slider()
+ {
+ super();
+ }
+
+
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return super.createElement();
+ }
+ }
+}
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
new file mode 100644
index 0000000..63beab2
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as
@@ -0,0 +1,63 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ import org.apache.royale.html.TextButton;
+
+ 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.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public class TextButton extends org.apache.royale.html.TextButton
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function TextButton()
+ {
+ super();
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return super.createElement();
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
new file mode 100644
index 0000000..145ab37
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
@@ -0,0 +1,115 @@
+//
+// 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
+{
+ import org.apache.royale.jewel.supportClasses.TextFieldBase;
+
+ COMPILE::JS
+ {
+ import goog.events;
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The TextField class implements the basic control for
+ * single-line text input.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public class TextField extends TextFieldBase
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function TextField()
+ {
+ super();
+ }
+
+ COMPILE::JS
+ private var _positioner:WrappedHTMLElement;
+
+ COMPILE::JS
+ /**
+ * The HTMLElement used to position the component.
+ */
+ override public function get positioner():WrappedHTMLElement
+ {
+ return _positioner;
+ }
+
+ COMPILE::JS
+ /**
+ * @private
+ */
+ override public function set positioner(value:WrappedHTMLElement):void
+ {
+ _positioner = value;
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion HTMLDivElement
+ * @royaleignorecoercion HTMLInputElement
+ * @royaleignorecoercion HTMLLabelElement
+ * @royaleignorecoercion Text
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ typeNames = "TextField";
+
+ var div:HTMLDivElement = document.createElement('div') as HTMLDivElement;
+ div.className = typeNames;
+
+ input = addElementToWrapper(this,'input') as HTMLInputElement;
+ input.setAttribute('type', 'text');
+ input.className = "vTextField--input";
+
+ //attach input handler to dispatch royale change event when user write in textinput
+ //goog.events.listen(element, 'change', killChangeHandler);
+ goog.events.listen(input, 'input', textChangeHandler);
+
+ label = document.createElement('label') as HTMLLabelElement;
+ label.className = "vTextField--label";
+
+ textNode = document.createTextNode('') as Text;
+ label.appendChild(textNode);
+
+ div.appendChild(input);
+ div.appendChild(label);
+
+ positioner = div as WrappedHTMLElement;
+ (label as WrappedHTMLElement).royale_wrapper = this;
+ _positioner.royale_wrapper = this;
+
+ return element;
+ }
+
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/RadioButtonView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/RadioButtonView.as
new file mode 100644
index 0000000..984b7b5
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/RadioButtonView.as
@@ -0,0 +1,286 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 flash.display.Shape;
+ import flash.display.SimpleButton;
+ import flash.display.Sprite;
+ import flash.text.TextFieldAutoSize;
+ import flash.text.TextFieldType;
+
+ import org.apache.royale.core.BeadViewBase;
+ import org.apache.royale.core.CSSTextField;
+ import org.apache.royale.core.IBeadView;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IValueToggleButtonModel;
+ import org.apache.royale.events.Event;
+
+ /**
+ * The RadioButtonView class creates the visual elements of the org.apache.royale.html.RadioButton
+ * component.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class RadioButtonView extends BeadViewBase implements IBeadView
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function RadioButtonView()
+ {
+ sprites = [ upSprite = new Sprite(),
+ downSprite = new Sprite(),
+ overSprite = new Sprite(),
+ upAndSelectedSprite = new Sprite(),
+ downAndSelectedSprite = new Sprite(),
+ overAndSelectedSprite = new Sprite() ];
+
+ for each( var s:Sprite in sprites )
+ {
+ var tf:CSSTextField = new CSSTextField();
+ tf.type = TextFieldType.DYNAMIC;
+ tf.autoSize = TextFieldAutoSize.LEFT;
+ tf.name = "textField";
+ var icon:Shape = new Shape();
+ icon.name = "icon";
+ s.addChild(icon);
+ s.addChild(tf);
+ }
+ }
+
+ private var upSprite:Sprite;
+ private var downSprite:Sprite;
+ private var overSprite:Sprite;
+ private var upAndSelectedSprite:Sprite;
+ private var downAndSelectedSprite:Sprite;
+ private var overAndSelectedSprite:Sprite;
+
+ private var sprites:Array;
+
+ private var _toggleButtonModel:IValueToggleButtonModel;
+
+ /**
+ * The model used for the RadioButton.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get toggleButtonModel() : IValueToggleButtonModel
+ {
+ return _toggleButtonModel;
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ _toggleButtonModel = value.getBeadByType(IValueToggleButtonModel) as IValueToggleButtonModel;
+ _toggleButtonModel.addEventListener("textChange", textChangeHandler);
+ _toggleButtonModel.addEventListener("htmlChange", htmlChangeHandler);
+ _toggleButtonModel.addEventListener("selectedValueChange", selectedValueChangeHandler);
+ if (_toggleButtonModel.text != null)
+ text = _toggleButtonModel.text;
+ if (_toggleButtonModel.html != null)
+ html = _toggleButtonModel.html;
+ for each( var s:Sprite in sprites )
+ {
+ var tf:CSSTextField = s.getChildByName("textField") as CSSTextField;
+ tf.styleParent = value;
+ }
+
+ layoutControl();
+
+ var hitArea:Shape = new Shape();
+ hitArea.graphics.beginFill(0x000000);
+ hitArea.graphics.drawRect(0,0,upSprite.width, upSprite.height);
+ hitArea.graphics.endFill();
+
+ SimpleButton(value).upState = upSprite;
+ SimpleButton(value).downState = downSprite;
+ SimpleButton(value).overState = overSprite;
+ SimpleButton(value).hitTestState = hitArea;
+
+ if (toggleButtonModel.text !== null)
+ text = toggleButtonModel.text;
+ if (toggleButtonModel.html !== null)
+ html = toggleButtonModel.html;
+
+ if (toggleButtonModel.selected && toggleButtonModel.value == value) {
+ selected = true;
+ }
+ }
+
+ /**
+ * The string label for the org.apache.royale.html.RadioButton.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get text():String
+ {
+ var tf:CSSTextField = upSprite.getChildByName('textField') as CSSTextField;
+ return tf.text;
+ }
+ public function set text(value:String):void
+ {
+ for each( var s:Sprite in sprites )
+ {
+ var tf:CSSTextField = s.getChildByName('textField') as CSSTextField;
+ tf.text = value;
+ }
+
+ layoutControl();
+ }
+
+ /**
+ * The HTML string for the org.apache.royale.html.RadioButton.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get html():String
+ {
+ var tf:CSSTextField = upSprite.getChildByName('textField') as CSSTextField;
+ return tf.htmlText;
+ }
+ public function set html(value:String):void
+ {
+ for each(var s:Sprite in sprites)
+ {
+ var tf:CSSTextField = s.getChildByName('textField') as CSSTextField;
+ tf.htmlText = value;
+ }
+
+ layoutControl();
+ }
+
+ /**
+ * @private
+ */
+ private function textChangeHandler(event:Event):void
+ {
+ text = toggleButtonModel.text;
+ }
+
+ /**
+ * @private
+ */
+ private function htmlChangeHandler(event:Event):void
+ {
+ html = toggleButtonModel.html;
+ }
+
+ private var _selected:Boolean;
+
+ /**
+ * The selection state of the RadioButton
+ */
+ public function get selected():Boolean
+ {
+ return _selected;
+ }
+ public function set selected(value:Boolean):void
+ {
+ _selected = value;
+
+ if( value ) {
+ SimpleButton(_strand).upState = upAndSelectedSprite;
+ SimpleButton(_strand).downState = downAndSelectedSprite;
+ SimpleButton(_strand).overState = overAndSelectedSprite;
+
+ } else {
+ SimpleButton(_strand).upState = upSprite;
+ SimpleButton(_strand).downState = downSprite;
+ SimpleButton(_strand).overState = overSprite;
+ }
+
+ layoutControl();
+ }
+
+ /**
+ * @private
+ */
+ private function selectedValueChangeHandler(event:Event):void
+ {
+ selected = _toggleButtonModel.value == _toggleButtonModel.selectedValue;
+ }
+
+ /**
+ * @private
+ */
+ protected function layoutControl() : void
+ {
+ for each(var s:Sprite in sprites)
+ {
+ var icon:Shape = s.getChildByName("icon") as Shape;
+ var tf:CSSTextField = s.getChildByName("textField") as CSSTextField;
+
+ drawRadioButton(icon);
+
+ var mh:Number = Math.max(icon.height,tf.height);
+
+ icon.x = 0;
+ icon.y = (mh - icon.height)/2;
+
+ tf.x = icon.x + icon.width + 1;
+ tf.y = (mh - tf.height)/2;
+ }
+
+ }
+
+ /**
+ * @private
+ */
+ protected function drawRadioButton(icon:Shape) : void
+ {
+ icon.graphics.clear();
+ icon.graphics.beginFill(0xf8f8f8);
+ icon.graphics.lineStyle(1,0x808080);
+ icon.graphics.drawEllipse(0,0,10,10);
+ icon.graphics.endFill();
+
+ if( selected ) {
+ icon.graphics.beginFill(0);
+ icon.graphics.drawEllipse(3,3,4,4);
+ icon.graphics.endFill();
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderThumbView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderThumbView.as
new file mode 100644
index 0000000..4df51c8
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderThumbView.as
@@ -0,0 +1,121 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 flash.display.Graphics;
+ import flash.display.Shape;
+ import flash.display.SimpleButton;
+
+ import org.apache.royale.core.BeadViewBase;
+ import org.apache.royale.core.IBeadView;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.html.Button;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.core.IChild;
+
+ /**
+ * The SliderThumbView class creates the draggable input element for the
+ * org.apache.royale.html.Slider component.
+ *
+ * @viewbead
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class SliderThumbView extends BeadViewBase implements IBeadView
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function SliderThumbView()
+ {
+ hitArea = new Shape();
+ upView = new Shape();
+ downView = new Shape();
+ overView = new Shape();
+ }
+
+ /**
+ * @private
+ */
+ private function drawView(g:Graphics, bgColor:uint):void
+ {
+ var host:Button = Button(_strand);
+ var button:SimpleButton = IChild(_strand).$displayObject as SimpleButton;
+ g.clear();
+ g.lineStyle(1,0x000000);
+ g.beginFill(bgColor,1.0);
+ g.drawCircle(host.width/2, host.height/2, 10);
+ g.endFill();
+ }
+
+ private var hitArea:Shape;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ * @royaleignoreimport org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ drawView(hitArea.graphics, 0xDD0000);
+ drawView(upView.graphics, 0xFFFFFF);
+ drawView(downView.graphics, 0x999999);
+ drawView(overView.graphics, 0xDDDDDD);
+
+ var button:SimpleButton = IChild(value).$displayObject as SimpleButton;
+ button.upState = upView;
+ button.downState = downView;
+ button.overState = overView;
+ button.hitTestState = hitArea;
+
+ IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler);
+ IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler);
+ }
+
+ private var upView:Shape;
+ private var downView:Shape;
+ private var overView:Shape;
+
+ /**
+ * @private
+ */
+ private function sizeChangeHandler( event:Event ) : void
+ {
+ drawView(hitArea.graphics, 0xDD0000);
+ drawView(upView.graphics, 0xFFFFFF);
+ drawView(downView.graphics, 0x999999);
+ drawView(overView.graphics, 0xDDDDDD);
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderTrackView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderTrackView.as
new file mode 100644
index 0000000..a5e0410
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderTrackView.as
@@ -0,0 +1,121 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 flash.display.Graphics;
+ import flash.display.Shape;
+ import flash.display.SimpleButton;
+
+ import org.apache.royale.core.BeadViewBase;
+ import org.apache.royale.core.IBeadView;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.html.Button;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.core.IChild;
+
+ /**
+ * The SliderTrackView class creates the track area for the org.apache.royale.html.Slider
+ * component.
+ *
+ * @viewbead
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class SliderTrackView extends BeadViewBase implements IBeadView
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function SliderTrackView()
+ {
+ hitArea = new Shape();
+ upView = new Shape();
+ downView = new Shape();
+ overView = new Shape();
+ }
+
+ /**
+ * @private
+ */
+ private function drawView(g:Graphics, bgColor:uint):void
+ {
+ var host:Button = Button(_strand);
+ var button:SimpleButton = IChild(_strand).$displayObject as SimpleButton;
+ g.clear();
+ g.lineStyle(1,0x000000);
+ g.beginFill(bgColor);
+ g.drawRect(0, 0, host.width, host.height);
+ g.endFill();
+ }
+
+ private var hitArea:Shape;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ drawView(hitArea.graphics, 0xDD0000);
+ drawView(upView.graphics, 0xCCCCCC);
+ drawView(downView.graphics, 0x808080);
+ drawView(overView.graphics, 0xEEEEEE);
+
+ var button:SimpleButton = IChild(value).$displayObject as SimpleButton;
+ button.upState = upView;
+ button.downState = downView;
+ button.overState = overView;
+ button.hitTestState = hitArea;
+
+ IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler);
+ IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler);
+ }
+
+ private var upView:Shape;
+ private var downView:Shape;
+ private var overView:Shape;
+
+ /**
+ * @private
+ */
+ private function sizeChangeHandler( event:Event ) : void
+ {
+ drawView(hitArea.graphics, 0xDD0000);
+ drawView(upView.graphics, 0xCCCCCC);
+ drawView(downView.graphics, 0x808080);
+ drawView(overView.graphics, 0xEEEEEE);
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderView.as
new file mode 100644
index 0000000..c62a3fc
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderView.as
@@ -0,0 +1,172 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ COMPILE::SWF {
+ import flash.display.DisplayObject;
+ import flash.display.Sprite;
+ }
+
+ import org.apache.royale.html.beads.ISliderView;
+ import org.apache.royale.core.BeadViewBase;
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IBeadLayout;
+ import org.apache.royale.core.IBeadModel;
+ import org.apache.royale.core.IBeadView;
+ import org.apache.royale.core.IRangeModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.html.Button;
+ import org.apache.royale.html.TextButton;
+
+ /**
+ * The SliderView class creates the visual elements of the org.apache.royale.html.Slider
+ * component. The Slider has a track and a thumb control which are also created with view beads.
+ *
+ * @viewbead
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class SliderView extends BeadViewBase implements ISliderView, IBeadView
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function SliderView()
+ {
+ }
+
+ private var rangeModel:IRangeModel;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ var layout:IBeadLayout = _strand.getBeadByType(IBeadLayout) as IBeadLayout;
+ if (layout == null) {
+ var klass:Class = ValuesManager.valuesImpl.getValue(_strand, "iBeadLayout");
+ _strand.addBead(new klass() as IBead);
+ }
+
+ COMPILE::SWF {
+ var s:UIBase = UIBase(_strand);
+
+ _track = new Button();
+ _track.addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iTrackView")) as IBead);
+ _track.className = "SliderTrack";
+ s.addElement(_track);
+
+ _thumb = new TextButton();
+ _thumb.text = '\u29BF';
+ _thumb.addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iThumbView")) as IBead);
+ _thumb.className = "SliderThumb";
+ s.addElement(_thumb);
+
+ }
+ COMPILE::JS {
+ _track = new Button();
+ _track.className = "SliderTrack";
+ host.addElement(_track);
+
+ _thumb = new TextButton();
+ _thumb.className = "SliderThumb";
+ _thumb.text = '\u29BF';
+ host.addElement(_thumb);
+ }
+
+ rangeModel = _strand.getBeadByType(IBeadModel) as IRangeModel;
+
+ var rm:IEventDispatcher = rangeModel as IEventDispatcher;
+
+ // listen for changes to the model and adjust the UI accordingly.
+ rm.addEventListener("valueChange",modelChangeHandler);
+ rm.addEventListener("minimumChange",modelChangeHandler);
+ rm.addEventListener("maximumChange",modelChangeHandler);
+ rm.addEventListener("stepSizeChange",modelChangeHandler);
+ rm.addEventListener("snapIntervalChange",modelChangeHandler);
+
+ (_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded"));
+ }
+
+ private var _track:Button;
+ private var _thumb:TextButton;
+
+
+ /**
+ * The track component.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get track():IUIBase
+ {
+ return _track;
+ }
+
+ /**
+ * The thumb component.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get thumb():IUIBase
+ {
+ return _thumb;
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ private function get host():UIBase
+ {
+ return _strand as UIBase;
+ }
+
+ /**
+ * @private
+ */
+ private function modelChangeHandler( event:Event ) : void
+ {
+ (_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded"));
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/ITextField.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/ITextField.as
new file mode 100644
index 0000000..e1ed050
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/ITextField.as
@@ -0,0 +1,68 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.supportClasses
+{
+ /**
+ * ITextField is the interface that all text jewel classes.
+ * It's used mainly in org.apache.royale.jewel.supportClasses.TextFieldBase
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 9.2
+ */
+ public interface ITextField
+ {
+ COMPILE::JS
+ {
+ /**
+ * the textNode
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ function get textNode():Text;
+ function set textNode(value:Text):void;
+
+ /**
+ * the input
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ function get input():HTMLInputElement;
+ function set input(value:HTMLInputElement):void;
+
+ /**
+ * the label
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ function get label():HTMLLabelElement;
+ function set label(value:HTMLLabelElement):void;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/RadioButtonIcon.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/RadioButtonIcon.as
new file mode 100644
index 0000000..4d71794
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/RadioButtonIcon.as
@@ -0,0 +1,117 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.supportClasses
+{
+ COMPILE::JS {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ /**
+ * The RadioButton class is a component that displays a selectable Button. RadioButtons
+ * are typically used in groups, identified by the groupName property. RadioButton use
+ * the following beads:
+ *
+ * org.apache.royale.core.IBeadModel: the data model, which includes the groupName.
+ * org.apache.royale.core.IBeadView: the bead that constructs the visual parts of the RadioButton..
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class RadioButtonIcon
+ {
+ public function RadioButtonIcon()
+ {
+ COMPILE::JS {
+ createElement();
+ }
+
+ className = 'RadioButtonIcon';
+ }
+
+ /**
+ * @private
+ *
+ * @royalesuppresspublicvarwarning
+ */
+ COMPILE::JS
+ public var element:WrappedHTMLElement;
+
+ COMPILE::JS
+ public function get positioner():WrappedHTMLElement
+ {
+ return element;
+ }
+
+ private var _className:String;
+
+ /**
+ * @private
+ */
+ public function get className():String
+ {
+ return _className;
+ }
+ public function set className(value:String):void
+ {
+ _className = value;
+
+ COMPILE::JS {
+ element.className = value;
+ }
+ }
+
+ private var _id:String;
+
+ /**
+ * @private
+ */
+ public function get id():String
+ {
+ return _id;
+ }
+ public function set id(value:String):void
+ {
+ _id = value;
+
+ COMPILE::JS {
+ element.id = value;
+ }
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion HTMLInputElement
+ * @royaleignorecoercion Text
+ */
+ COMPILE::JS
+ protected function createElement():WrappedHTMLElement
+ {
+ //This class does not subclass anything, so these properties must be set explicitly
+ var input:HTMLInputElement = document.createElement('input') as HTMLInputElement;
+ input.type = 'radio';
+
+ element = input as WrappedHTMLElement;
+ element.royale_wrapper = this;
+
+ return element;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
new file mode 100644
index 0000000..5cb5924
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
@@ -0,0 +1,154 @@
+//
+// 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.supportClasses
+{
+ import org.apache.royale.events.Event;
+ import org.apache.royale.html.TextInput;
+
+ import org.apache.royale.jewel.supportClasses.ITextField;
+
+ COMPILE::JS
+ {
+ import goog.events;
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ /**
+ * The TextFieldBase class is the base class for TextField and TextArea Jewel controls
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public class TextFieldBase extends TextInput implements ITextField
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function TextFieldBase()
+ {
+ super();
+ }
+
+ COMPILE::JS
+ {
+ private var _textNode:Text;
+ /**
+ * @copy org.apache.royale.jewel.supportClasses.ITextField#textNode
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function get textNode():Text
+ {
+ return _textNode;
+ }
+
+ public function set textNode(value:Text):void
+ {
+ _textNode = value;
+ }
+
+ private var _input:HTMLInputElement;
+ /**
+ * @copy org.apache.royale.jewel.supportClasses.ITextField#input
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function get input():HTMLInputElement
+ {
+ return _input;
+ }
+
+ public function set input(value:HTMLInputElement):void
+ {
+ _input = value;
+ }
+
+ private var _label:HTMLLabelElement;
+ /**
+ * @copy org.apache.royale.jewel.supportClasses.ITextField#label
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function get label():HTMLLabelElement
+ {
+ return _label;
+ }
+
+ public function set label(value:HTMLLabelElement):void
+ {
+ _label = value;
+ }
+ }
+
+ COMPILE::JS
+ /**
+ * override UIBase to affect positioner instead of element
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ override protected function setClassName(value:String):void
+ {
+ positioner.className = value;
+ }
+
+ private var _isInvalid:Boolean = false;
+ /**
+ * A boolean flag to activate "is-invalid" effect selector.
+ * Defines the textfield as invalid on initial load.
+ * Optional
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function get isInvalid():Boolean
+ {
+ return _isInvalid;
+ }
+ public function set isInvalid(value:Boolean):void
+ {
+ _isInvalid = value;
+
+ COMPILE::JS
+ {
+ positioner.classList.toggle("is-invalid", _isInvalid);
+ typeNames = positioner.className;
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/pom.xml b/frameworks/projects/pom.xml
index 4a548f3..6545709 100644
--- a/frameworks/projects/pom.xml
+++ b/frameworks/projects/pom.xml
@@ -60,6 +60,7 @@
<module>Text</module>
<module>TLF</module>
<module>RoyaleSite</module>
+ <module>Jewel</module>
</modules>
<profiles>
diff --git a/frameworks/themes/JewelTheme/.vscode/launch.json b/frameworks/themes/JewelTheme/.vscode/launch.json
new file mode 100644
index 0000000..5dfb672
--- /dev/null
+++ b/frameworks/themes/JewelTheme/.vscode/launch.json
@@ -0,0 +1,21 @@
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Launch Chrome against debug.html, with sourcemaps",
+ "type": "chrome",
+ "request": "launch",
+ "file": "${workspaceRoot}/target/javascript/bin/js-debug/index.html",
+ "sourceMaps": true,
+ "preLaunchTask": "mvn"
+ },
+ {
+ "name": "Launch Firefox against debug.html, with sourcemaps",
+ "type": "firefox",
+ "request": "launch",
+ "file": "${workspaceRoot}/target/javascript/bin/js-debug/index.html",
+ "sourceMaps": true,
+ "preLaunchTask": "mvn"
+ }
+ ]
+}
diff --git a/frameworks/themes/JewelTheme/.vscode/settings.json b/frameworks/themes/JewelTheme/.vscode/settings.json
new file mode 100644
index 0000000..1f5a970
--- /dev/null
+++ b/frameworks/themes/JewelTheme/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "nextgenas.sdk.framework": "/Users/carlosrovira/Dev/Royale/Sdks/apache-royale-0.9.2-SNAPSHOT"
+}
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/.vscode/tasks.json b/frameworks/themes/JewelTheme/.vscode/tasks.json
new file mode 100644
index 0000000..5d6198d
--- /dev/null
+++ b/frameworks/themes/JewelTheme/.vscode/tasks.json
@@ -0,0 +1,8 @@
+{
+ // for the documentation about the tasks.json format
+ "version": "0.1.0",
+ "command": "mvn",
+ "args": ["clean", "install", "-DskipTests"],
+ "isShellCommand": true,
+ "showOutput": "always"
+}
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/asconfig.json b/frameworks/themes/JewelTheme/asconfig.json
new file mode 100644
index 0000000..2a1ae6c
--- /dev/null
+++ b/frameworks/themes/JewelTheme/asconfig.json
@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+ {
+ "config": "royale",
+ "type": "lib",
+ "compilerOptions": {
+ "debug": true,
+ "targets": [
+ "JSRoyale",
+ "SWF"
+ ],
+ "include-classes": [
+ "JewelThemeClasses"
+ ],
+ "include-sources": [
+ "src/main/royale"
+ ],
+ "output": "target/JewelThemeClasses.swc"
+ }
+}
diff --git a/frameworks/themes/JewelTheme/build.xml b/frameworks/themes/JewelTheme/build.xml
new file mode 100644
index 0000000..6174e3e
--- /dev/null
+++ b/frameworks/themes/JewelTheme/build.xml
@@ -0,0 +1,133 @@
+<?xml version="1.0"?>
+<!--
+
+ 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.
+
+-->
+
+
+<project name="JewelTheme" default="main" basedir=".">
+ <property name="ROYALE_HOME" location="../../.."/>
+
+ <property file="${ROYALE_HOME}/env.properties"/>
+ <property environment="env"/>
+ <property file="${ROYALE_HOME}/build.properties"/>
+ <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+
+ <property name="target.name" value="${ant.project.name}.swc" />
+
+ <!-- doesn't contain compiled files so only need to compile JS version -->
+ <target name="main" depends="clean,check-compiler,compile,compile-js,copy-swc,test" description="Full build of ${ant.project.name}.swc">
+ </target>
+
+ <target name="compile-js">
+ <!-- doesn't contain compiled files so only need to compile JS version
+ <ant dir="${ROYALE_HOME}/frameworks/js/projects/${ant.project.name}JS/" inheritAll="false" >
+ <property name="ROYALE_SWF_COMPILER_HOME" value="${ROYALE_SWF_COMPILER_HOME}"/>
+ <property name="ROYALE_COMPILER_HOME" value="${ROYALE_COMPILER_HOME}"/>
+ <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+ </ant>
+ -->
+ </target>
+
+ <target name="copy-swc" if="env.AIR_HOME">
+ <copy file="${basedir}/target/${target.name}" tofile="${ROYALE_HOME}/frameworks/libs/${target.name}" />
+ </target>
+
+ <target name="check-for-tests" >
+ <condition property="skip-tests" >
+ <not>
+ <available file="${basedir}/src/test/royale/build.xml" />
+ </not>
+ </condition>
+ </target>
+
+ <target name="test" depends="check-for-tests" unless="skip-tests">
+ <ant dir="src/test/royale" />
+ </target>
+
+ <target name="clean">
+ <delete failonerror="false">
+ <fileset dir="${ROYALE_HOME}/frameworks/libs">
+ <include name="${target.name}"/>
+ </fileset>
+ </delete>
+ <delete failonerror="false" includeemptydirs="true">
+ <fileset dir="${basedir}/target">
+ <include name="**/**"/>
+ </fileset>
+ </delete>
+ <antcall target="clean-tests" />
+ </target>
+
+ <target name="clean-tests" depends="check-for-tests" unless="skip-tests">
+ <ant dir="src/test/royale" target="clean"/>
+ </target>
+
+ <target name="compile" description="Compiles .as files into .swc" if="env.AIR_HOME">
+ <echo message="Compiling libs/${ant.project.name}.swc"/>
+ <echo message="ROYALE_HOME: ${ROYALE_HOME}"/>
+ <echo message="ROYALE_SWF_COMPILER_HOME: ${ROYALE_SWF_COMPILER_HOME}"/>
+ <echo message="ROYALE_COMPILER_HOME: ${ROYALE_COMPILER_HOME}"/>
+
+ <java jar="${ROYALE_COMPILER_HOME}/lib/compc.jar" fork="true" >
+ <jvmarg value="-Xmx384m" />
+ <jvmarg value="-Dsun.io.useCanonCaches=false" />
+ <jvmarg value="-Droyalelib=${ROYALE_HOME}/frameworks" />
+ <arg value="+royalelib=${ROYALE_HOME}/frameworks" />
+ <arg value="+playerglobal.version=${playerglobal.version}" />
+ <arg value="+env.AIR_HOME=${env.AIR_HOME}" />
+ <arg value="-compiler.strict-xml=true" />
+ <arg value="-compiler.targets=SWF" />
+ <arg value="-output=${basedir}/target/${target.name}" />
+ <arg value="-load-config=${basedir}/src/main/config/compile-swf-config.xml" />
+ <arg value="-js-load-config=${ROYALE_HOME}/frameworks/js-config.xml" />
+ <arg value="-js-load-config+=${basedir}/../../js/projects/${ant.project.name}JS/src/main/config/compile-js-config.xml" />
+ </java>
+ </target>
+
+ <target name="check-compiler" depends="check-compiler-home,check-transpiler-home">
+ <path id="lib.path">
+ <fileset dir="${ROYALE_COMPILER_HOME}/lib" includes="compiler-royaleTasks.jar"/>
+ </path>
+ <taskdef resource="flexTasks.tasks" classpathref="lib.path"/>
+ </target>
+
+ <target name="check-compiler-home"
+ description="Set ROYALE_SWF_COMPILER_HOME to point at the compiler.">
+
+ <available file="${ROYALE_HOME}/lib/compiler-mxmlc.jar"
+ type="file"
+ property="ROYALE_SWF_COMPILER_HOME"
+ value="${ROYALE_HOME}"/>
+
+ <fail message="ROYALE_SWF_COMPILER_HOME must be set to a folder with a lib sub-folder containing compiler-mxmlc.jar such as the compiler folder in royale-compiler repo or the root of a Royale SDK"
+ unless="ROYALE_SWF_COMPILER_HOME"/>
+ </target>
+
+ <target name="check-transpiler-home"
+ description="Set ROYALE_COMPILER_HOME to point at the cross-compiler.">
+
+ <available file="${ROYALE_HOME}/js/lib/jsc.jar"
+ type="file"
+ property="ROYALE_COMPILER_HOME"
+ value="${ROYALE_HOME}/js"/>
+
+ <fail message="ROYALE_COMPILER_HOME must be set to a folder with a lib sub-folder containing jsc.jar such as the compiler-jx folder in royale-compiler repo or the js folder of a Royale SDK"
+ unless="ROYALE_COMPILER_HOME"/>
+ </target>
+
+</project>
diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml
new file mode 100644
index 0000000..ea75e2d
--- /dev/null
+++ b/frameworks/themes/JewelTheme/pom.xml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+ 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.
+
+-->
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+ <modelVersion>4.0.0</modelVersion>
+
+ <parent>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>themes</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ </parent>
+
+ <artifactId>JewelTheme</artifactId>
+ <version>0.9.2-SNAPSHOT</version>
+ <packaging>swc</packaging>
+
+ <name>Apache Royale: Framework: Themes: JewelTheme</name>
+
+ <build>
+ <sourceDirectory>src/main/royale</sourceDirectory>
+ <plugins>
+ <plugin>
+ <groupId>org.apache.royale.compiler</groupId>
+ <artifactId>royale-maven-plugin</artifactId>
+ <version>${royale.compiler.version}</version>
+ <extensions>true</extensions>
+ <configuration>
+ <includeClasses>
+ <includeClass>JewelThemeClasses</includeClass>
+ </includeClasses>
+ <includeFiles>
+ <include-file>
+ <name>assets/*</name>
+ <path>../src/main/resources/assets/*</path>
+ </include-file>
+ <include-file>
+ <name>defaults.css</name>
+ <path>../src/main/resources/defaults.css</path>
+ </include-file>
+ <include-file>
+ <name>TextButton.css</name>
+ <path>../src/main/resources/TextButton.css</path>
+ </include-file>
+ <include-file>
+ <name>TextField.css</name>
+ <path>../src/main/resources/TextField.css</path>
+ </include-file>
+ </includeFiles>
+ </configuration>
+ </plugin>
+ </plugins>
+ </build>
+
+</project>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/TextButton.css b/frameworks/themes/JewelTheme/src/main/resources/TextButton.css
new file mode 100644
index 0000000..cbbfb51
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/TextButton.css
@@ -0,0 +1,82 @@
+/*
+ *
+ * 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.
+ *
+ */
+
+@namespace "library://ns.apache.org/royale/jewel";
+/*@namespace svg "library://ns.apache.org/royale/svg";*/
+
+/*
+* Jewel TextButton
+*/
+
+TextButton, TextButton:hover {
+
+ cursor:pointer;
+
+ 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 #555;
+
+ 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);
+ border: 1px solid #BC573C;
+ line-height:16px;
+ padding: 8px 16px;*/
+}
+
+TextButton:active {
+ /*box-shadow: #E6431D 0 1px 0 inset;
+ text-shadow: 0 -1px 0 #5F3A29;*/
+}
+TextButton:focus {
+ outline:0;
+}
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/TextField.css b/frameworks/themes/JewelTheme/src/main/resources/TextField.css
new file mode 100644
index 0000000..d7a1b85
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/TextField.css
@@ -0,0 +1,75 @@
+/*
+ *
+ * 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.
+ *
+ */
+
+@namespace "library://ns.apache.org/royale/jewel";
+/*@namespace svg "library://ns.apache.org/royale/svg";*/
+
+/*
+* Jewel TextField
+*/
+TextField {
+ position: relative;
+ display: inline-block;
+ box-sizing: border-box;
+ width: 300px;
+ max-width: 100%;
+ margin: 0;
+}
+
+.vTextField--input {
+ font-size: 16px;
+ font-family: 'Lato', sans-serif;
+
+ border: none;
+ border-bottom: 2px solid;
+ border-bottom-color: #ff0000;
+ display: block;
+ margin: 0;
+ padding: 4 0;
+ width: 100px;
+ background: transparent;
+ text-align: left;
+ color: inherit;
+ outline: none;
+}
+
+.vTextField--label {
+ bottom: 0;
+ color: #ff0000;
+ font-size: 13px;
+ left: 0;
+ right: 0;
+ pointer-events: none;
+ position: absolute;
+ display: block;
+ width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-align: left;
+}
+
+/*
+ padding: 5px;
+ border: solid 1px #666666;
+ border-radius: 6px;
+ color: #333333;
+:hover
+ padding: 5px;
+ background-color: #DFDFDF;
+*/
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/assets/JewelButton2.svg b/frameworks/themes/JewelTheme/src/main/resources/assets/JewelButton2.svg
new file mode 100644
index 0000000..ad0c128
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/assets/JewelButton2.svg
@@ -0,0 +1,44 @@
+
+<!--
+
+ 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 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="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="#8EDEFF" offset="0%"></stop>
+ <stop stop-color="#1D89E6" offset="100%"></stop>
+ </linearGradient>
+ </defs>
+ <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="#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>
+ </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
new file mode 100644
index 0000000..3d376ac
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -0,0 +1,33 @@
+/*
+ *
+ * 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.
+ *
+ */
+
+ @namespace "http://www.w3.org/1999/xhtml";
+
+ .royale *, . royale *:before, . royale *:after {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ }
+
+ .page-content
+ {
+ padding: 10px;
+ margin: 10px;
+ }
+
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as b/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
new file mode 100644
index 0000000..394b871
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
@@ -0,0 +1,33 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+
+ /**
+ * @private
+ * This class is used to link additional classes into jeweltheme.swc
+ * beyond those that are found by dependecy analysis starting
+ * from the classes specified in manifest.xml.
+ */
+ internal class JewelThemeClasses
+ {
+
+ }
+
+}
\ No newline at end of file
diff --git a/frameworks/themes/pom.xml b/frameworks/themes/pom.xml
index e674d5f..19fbbe6 100644
--- a/frameworks/themes/pom.xml
+++ b/frameworks/themes/pom.xml
@@ -34,6 +34,7 @@
<modules>
<module>Basic</module>
+ <module>JewelTheme</module>
</modules>
<dependencies>
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 09/22: introduce variables
Posted by ca...@apache.org.
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 db892487793c06a7d8197b95d979e0da271c9f14
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Mar 8 18:10:51 2018 +0100
introduce variables
---
.../JewelTheme/src/main/resources/defaults.css | 3 +--
.../themes/JewelTheme/src/main/sass/_functions.sass | 18 ++++++++++++++++++
.../themes/JewelTheme/src/main/sass/_mixins.sass | 18 ++++++++++++++++++
.../themes/JewelTheme/src/main/sass/_variables.sass | 21 +++++++++++++++++++++
.../themes/JewelTheme/src/main/sass/defaults.sass | 9 +++------
5 files changed, 61 insertions(+), 8 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index f19b819..29d83ac 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -1,4 +1,4 @@
-/*
+/**
* 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.
@@ -13,7 +13,6 @@
* 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.
- *
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_functions.sass b/frameworks/themes/JewelTheme/src/main/sass/_functions.sass
new file mode 100644
index 0000000..0c6fb82
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/_functions.sass
@@ -0,0 +1,18 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
new file mode 100644
index 0000000..0c6fb82
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
@@ -0,0 +1,18 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
new file mode 100644
index 0000000..33e2064
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -0,0 +1,21 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+$font-stack: 'Lato-Bold', sans-serif
+$primary-color: #333
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index a861598..b45e844 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -1,5 +1,4 @@
-/*
- *
+/**
* 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.
@@ -14,9 +13,10 @@
* 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.
- *
*/
+@import "variables"
+
@namespace j "library://ns.apache.org/royale/jewel"
@namespace "http://www.w3.org/1999/xhtml"
@@ -30,9 +30,6 @@
padding: 10px
margin: 10px
-$font-stack: 'Lato-Bold', sans-serif
-$primary-color: #333
-
body
font: 100% $font-stack
color: $primary-color
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 08/22: change from scss to sass syntax
Posted by ca...@apache.org.
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 ca23649dfdc9434408948c44878afaa900195e95
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Mar 8 17:52:07 2018 +0100
change from scss to sass syntax
---
frameworks/themes/JewelTheme/pom.xml | 4 +--
.../JewelTheme/src/main/resources/defaults.css | 1 -
.../sass/defaults.scss => sass/defaults.sass} | 31 ++++++++++------------
3 files changed, 16 insertions(+), 20 deletions(-)
diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml
index 7232d7f..f577bab 100644
--- a/frameworks/themes/JewelTheme/pom.xml
+++ b/frameworks/themes/JewelTheme/pom.xml
@@ -87,9 +87,9 @@
<resources>
<resource>
<source>
- <directory>${basedir}/src/main/resources/sass</directory>
+ <directory>${basedir}/src/main/sass</directory>
<includes>
- <include>**/*.scss</include>
+ <include>**/*.sass</include>
</includes>
</source>
<destination>${basedir}/src/main/resources</destination>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index ea29ba4..f19b819 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -1,5 +1,4 @@
/*
- *
* 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.
diff --git a/frameworks/themes/JewelTheme/src/main/resources/sass/defaults.scss b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
similarity index 68%
rename from frameworks/themes/JewelTheme/src/main/resources/sass/defaults.scss
rename to frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index b31b1ab..a861598 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/sass/defaults.scss
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -17,25 +17,22 @@
*
*/
- @namespace j "library://ns.apache.org/royale/jewel";
- @namespace "http://www.w3.org/1999/xhtml";
+@namespace j "library://ns.apache.org/royale/jewel"
+@namespace "http://www.w3.org/1999/xhtml"
- .royale *, .royale *:before, .royale *:after {
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
+.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"); */
- }
- .royale {
- padding: 10px;
- margin: 10px;
- }
+.royale
+ padding: 10px
+ margin: 10px
-$font-stack: 'Lato-Bold', sans-serif;
-$primary-color: #333;
+$font-stack: 'Lato-Bold', sans-serif
+$primary-color: #333
-body {
- font: 100% $font-stack;
- color: $primary-color;
-}
\ No newline at end of file
+body
+ font: 100% $font-stack
+ color: $primary-color
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 17/22: a more logical button styles,
organization of example and more polished
Posted by ca...@apache.org.
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 33e1c9c86eeb04f2633cf8abf75d3830cc126d44
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Mar 10 12:25:15 2018 +0100
a more logical button styles, organization of example and more polished
---
.../src/main/royale/ButtonPlayGround.mxml | 24 ++--
.../main/royale/org/apache/royale/jewel/Button.as | 61 ++++++++++
.../JewelTheme/src/main/resources/defaults.css | 123 ++++++++++++++++++++-
.../src/main/resources/royale-jewel-blue.css | 123 ++++++++++++++++++++-
.../src/main/resources/royale-jewel-red.css | 123 ++++++++++++++++++++-
.../themes/JewelTheme/src/main/sass/_button.sass | 12 +-
.../themes/JewelTheme/src/main/sass/_mixins.sass | 3 +-
.../JewelTheme/src/main/sass/_textbutton.sass | 12 +-
.../src/main/sass/colors/_blue-color-palette.sass | 8 +-
.../src/main/sass/colors/_red-color-palette.sass | 8 +-
.../themes/JewelTheme/src/main/sass/defaults.sass | 6 +
11 files changed, 485 insertions(+), 18 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index 218680a..5ca13a1 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -35,19 +35,24 @@ limitations under the License.
<js:VerticalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
+ <js:Label text="Basic"/>
<js:Button/>
<js:TextButton text="Basic"/>
+ <js:Label text="Jewel Button"/>
<j:Button primary="true"/>
- <j:TextButton text="C" primary="true"/>
- <j:TextButton text="Button" primary="true"/>
+ <js:Label text="Jewel TextButton"/>
+
+ <j:TextButton text="DEFAULT"/>
- <j:TextButton text="Button With More Text" primary="true"/>
+ <j:TextButton text="Button With More Text"/>
- <j:TextButton text="Button" width="120" height="40" primary="true"/>
-
- <j:TextButton text="Button" primary="true"/>
+ <j:TextButton text="PRIMARY" primary="true"/>
+
+ <j:TextButton text="SECONDARY" secondary="true"/>
+
+ <j:TextButton text="EMPHASIZED" emphasized="true"/>
<j:TextButton text="Disabled" primary="true">
<j:beads>
@@ -55,11 +60,12 @@ limitations under the License.
</j:beads>
</j:TextButton>
- <j:Slider id="slider" width="250" value="100" minimum="50" maximum="500"
+ <js:Label text="Jewel Button Sizing (respect min values)"/>
+ <j:Slider id="slider" width="250" value="100" minimum="0" maximum="500"
valueChange="onValueChange(event)"/>
- <j:Slider id="slider_v" width="250" value="100" minimum="50" maximum="500"
+ <j:Slider id="slider_v" width="250" value="40" minimum="0" maximum="300"
valueChange="onValueChange(event)"/>
- <j:TextButton id="button" text="Button" width="100" height="100" primary="true"/>
+ <j:TextButton id="button" text="Button" width="100" height="40" primary="true"/>
</js:Group>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
index d008476..cd74a24 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
@@ -113,8 +113,69 @@ package org.apache.royale.jewel
}
}
}
+
+ private var _secondary:Boolean = false;
+ /**
+ * A boolean flag to activate "secondary" effect selector.
+ * Applies secondary color display effect.
+ * Colors are defined in royale-jewel.css
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function get secondary():Boolean
+ {
+ return _secondary;
+ }
+
+ public function set secondary(value:Boolean):void
+ {
+ if (_secondary != value)
+ {
+ _secondary = value;
+
+ COMPILE::JS
+ {
+ addOrRemove("secondary",value);
+ setClassName(computeFinalClassNames());
+ }
+ }
+ }
+
+ private var _emphasized:Boolean = false;
+ /**
+ * A boolean flag to activate "emphasized" effect selector.
+ * Applies emphasized color display effect.
+ * Colors are defined in royale-jewel.css
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function get emphasized():Boolean
+ {
+ return _emphasized;
+ }
+
+ public function set emphasized(value:Boolean):void
+ {
+ if (_emphasized != value)
+ {
+ _emphasized = value;
+
+ COMPILE::JS
+ {
+ addOrRemove("emphasized",value);
+ setClassName(computeFinalClassNames());
+ }
+ }
+ }
+
COMPILE::JS
protected function addOrRemove(classNameVal:String,add:Boolean):void
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 0bc4b18..a988581 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -43,9 +43,30 @@
border-radius: 3px;
}
+.jewel.button {
+ background-color: rgba(0, 0, 0, 0.3);
+ transition-duration: 0.4s;
+ color: rgba(0, 0, 0, 0.4);
+}
+.jewel.button:hover {
+ background-color: rgba(15, 15, 15, 0.3);
+}
+.jewel.button:active {
+ background-color: rgba(0, 0, 0, 0.3);
+}
+.jewel.button:focus {
+ outline: 0;
+}
+.jewel.button[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
.jewel.button.primary {
background-color: #006CEB;
transition-duration: 0.4s;
+ color: white;
}
.jewel.button.primary:hover {
background-color: #0b7bff;
@@ -62,12 +83,51 @@
cursor: unset;
}
+.jewel.button.secondary {
+ background-color: #011833;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.button.secondary:hover {
+ background-color: #022651;
+}
+.jewel.button.secondary:active {
+ background-color: #000a15;
+}
+.jewel.button.secondary:focus {
+ outline: 0;
+}
+.jewel.button.secondary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.button.emphasized {
+ background-color: #1FD348;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.button.emphasized:hover {
+ background-color: #30e158;
+}
+.jewel.button.emphasized:active {
+ background-color: #1bb83f;
+}
+.jewel.button.emphasized:focus {
+ outline: 0;
+}
+.jewel.button.emphasized[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
/**
* Jewel TextButton
*/
.jewel.textbutton, .jewel.textbutton:hover {
/* TextField */
- color: rgba(255, 255, 255, 0.9);
font-family: "Lato-Bold", sans-serif;
font-style: bold;
font-size: 0.7rem;
@@ -78,9 +138,30 @@
text-shadow: unset;
}
+.jewel.textbutton {
+ background-color: rgba(0, 0, 0, 0.3);
+ transition-duration: 0.4s;
+ color: rgba(0, 0, 0, 0.4);
+}
+.jewel.textbutton:hover {
+ background-color: rgba(15, 15, 15, 0.3);
+}
+.jewel.textbutton:active {
+ background-color: rgba(0, 0, 0, 0.3);
+}
+.jewel.textbutton:focus {
+ outline: 0;
+}
+.jewel.textbutton[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
.jewel.textbutton.primary {
background-color: #006CEB;
transition-duration: 0.4s;
+ color: white;
}
.jewel.textbutton.primary:hover {
background-color: #0b7bff;
@@ -97,6 +178,46 @@
cursor: unset;
}
+.jewel.textbutton.secondary {
+ background-color: #011833;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.textbutton.secondary:hover {
+ background-color: #022651;
+}
+.jewel.textbutton.secondary:active {
+ background-color: #000a15;
+}
+.jewel.textbutton.secondary:focus {
+ outline: 0;
+}
+.jewel.textbutton.secondary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.textbutton.emphasized {
+ background-color: #1FD348;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.textbutton.emphasized:hover {
+ background-color: #30e158;
+}
+.jewel.textbutton.emphasized:active {
+ background-color: #1bb83f;
+}
+.jewel.textbutton.emphasized:focus {
+ outline: 0;
+}
+.jewel.textbutton.emphasized[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
/**
* Jewel TextField
*/
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
index 27242c2..03b8c00 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
@@ -43,9 +43,30 @@
border-radius: 3px;
}
+.jewel.button {
+ background-color: rgba(0, 0, 0, 0.3);
+ transition-duration: 0.4s;
+ color: rgba(0, 0, 0, 0.4);
+}
+.jewel.button:hover {
+ background-color: rgba(15, 15, 15, 0.3);
+}
+.jewel.button:active {
+ background-color: rgba(0, 0, 0, 0.3);
+}
+.jewel.button:focus {
+ outline: 0;
+}
+.jewel.button[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
.jewel.button.primary {
background-color: #006CEB;
transition-duration: 0.4s;
+ color: white;
}
.jewel.button.primary:hover {
background-color: #0b7bff;
@@ -62,12 +83,51 @@
cursor: unset;
}
+.jewel.button.secondary {
+ background-color: #011833;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.button.secondary:hover {
+ background-color: #022651;
+}
+.jewel.button.secondary:active {
+ background-color: #000a15;
+}
+.jewel.button.secondary:focus {
+ outline: 0;
+}
+.jewel.button.secondary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.button.emphasized {
+ background-color: #1FD348;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.button.emphasized:hover {
+ background-color: #30e158;
+}
+.jewel.button.emphasized:active {
+ background-color: #1bb83f;
+}
+.jewel.button.emphasized:focus {
+ outline: 0;
+}
+.jewel.button.emphasized[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
/**
* Jewel TextButton
*/
.jewel.textbutton, .jewel.textbutton:hover {
/* TextField */
- color: rgba(255, 255, 255, 0.9);
font-family: "Lato-Bold", sans-serif;
font-style: bold;
font-size: 0.7rem;
@@ -78,9 +138,30 @@
text-shadow: unset;
}
+.jewel.textbutton {
+ background-color: rgba(0, 0, 0, 0.3);
+ transition-duration: 0.4s;
+ color: rgba(0, 0, 0, 0.4);
+}
+.jewel.textbutton:hover {
+ background-color: rgba(15, 15, 15, 0.3);
+}
+.jewel.textbutton:active {
+ background-color: rgba(0, 0, 0, 0.3);
+}
+.jewel.textbutton:focus {
+ outline: 0;
+}
+.jewel.textbutton[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
.jewel.textbutton.primary {
background-color: #006CEB;
transition-duration: 0.4s;
+ color: white;
}
.jewel.textbutton.primary:hover {
background-color: #0b7bff;
@@ -97,6 +178,46 @@
cursor: unset;
}
+.jewel.textbutton.secondary {
+ background-color: #011833;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.textbutton.secondary:hover {
+ background-color: #022651;
+}
+.jewel.textbutton.secondary:active {
+ background-color: #000a15;
+}
+.jewel.textbutton.secondary:focus {
+ outline: 0;
+}
+.jewel.textbutton.secondary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.textbutton.emphasized {
+ background-color: #1FD348;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.textbutton.emphasized:hover {
+ background-color: #30e158;
+}
+.jewel.textbutton.emphasized:active {
+ background-color: #1bb83f;
+}
+.jewel.textbutton.emphasized:focus {
+ outline: 0;
+}
+.jewel.textbutton.emphasized[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
/**
* Jewel TextField
*/
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
index 825f537..4b76076 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
@@ -43,9 +43,30 @@
border-radius: 3px;
}
+.jewel.button {
+ background-color: rgba(0, 0, 0, 0.2);
+ transition-duration: 0.4s;
+ color: rgba(0, 0, 0, 0.5);
+}
+.jewel.button:hover {
+ background-color: rgba(15, 15, 15, 0.2);
+}
+.jewel.button:active {
+ background-color: rgba(0, 0, 0, 0.2);
+}
+.jewel.button:focus {
+ outline: 0;
+}
+.jewel.button[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
.jewel.button.primary {
background-color: #FF0000;
transition-duration: 0.4s;
+ color: white;
}
.jewel.button.primary:hover {
background-color: #ff1f1f;
@@ -62,12 +83,51 @@
cursor: unset;
}
+.jewel.button.secondary {
+ background-color: #342F30;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.button.secondary:hover {
+ background-color: #443e3f;
+}
+.jewel.button.secondary:active {
+ background-color: #242021;
+}
+.jewel.button.secondary:focus {
+ outline: 0;
+}
+.jewel.button.secondary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.button.emphasized {
+ background-color: #016936;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.button.emphasized:hover {
+ background-color: #018746;
+}
+.jewel.button.emphasized:active {
+ background-color: #014b26;
+}
+.jewel.button.emphasized:focus {
+ outline: 0;
+}
+.jewel.button.emphasized[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
/**
* Jewel TextButton
*/
.jewel.textbutton, .jewel.textbutton:hover {
/* TextField */
- color: rgba(255, 255, 255, 0.9);
font-family: "Lato-Bold", sans-serif;
font-style: bold;
font-size: 0.7rem;
@@ -78,9 +138,30 @@
text-shadow: unset;
}
+.jewel.textbutton {
+ background-color: rgba(0, 0, 0, 0.2);
+ transition-duration: 0.4s;
+ color: rgba(0, 0, 0, 0.5);
+}
+.jewel.textbutton:hover {
+ background-color: rgba(15, 15, 15, 0.2);
+}
+.jewel.textbutton:active {
+ background-color: rgba(0, 0, 0, 0.2);
+}
+.jewel.textbutton:focus {
+ outline: 0;
+}
+.jewel.textbutton[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
.jewel.textbutton.primary {
background-color: #FF0000;
transition-duration: 0.4s;
+ color: white;
}
.jewel.textbutton.primary:hover {
background-color: #ff1f1f;
@@ -97,6 +178,46 @@
cursor: unset;
}
+.jewel.textbutton.secondary {
+ background-color: #342F30;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.textbutton.secondary:hover {
+ background-color: #443e3f;
+}
+.jewel.textbutton.secondary:active {
+ background-color: #242021;
+}
+.jewel.textbutton.secondary:focus {
+ outline: 0;
+}
+.jewel.textbutton.secondary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.textbutton.emphasized {
+ background-color: #016936;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.textbutton.emphasized:hover {
+ background-color: #018746;
+}
+.jewel.textbutton.emphasized:active {
+ background-color: #014b26;
+}
+.jewel.textbutton.emphasized:focus {
+ outline: 0;
+}
+.jewel.textbutton.emphasized[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
/**
* Jewel TextField
*/
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
index ca39960..d04d186 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
@@ -37,8 +37,18 @@
.jewel.button, .jewel.button:hover
@extend %button-def
+.jewel.button
+ +button-theme($default-color, $default-font-color)
+
.jewel.button.primary
- +button-theme($primary-color)
+ +button-theme($primary-color, $font-color)
+
+.jewel.button.secondary
+ +button-theme($secondary-color, $font-color)
+
+.jewel.button.emphasized
+ +button-theme($emphasized-color, $font-color)
+
//SVGs
//border:1px; /*without this svg shows scaled and bigger*/
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
index 5a28fc8..f4e7302 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
@@ -17,11 +17,12 @@
//
////////////////////////////////////////////////////////////////////////////////
-=button-theme($button-color)
+=button-theme($button-color, $text-color)
//border-color: darken($button-color, 20%)
background-color: $button-color
transition:
duration: 0.4s
+ color: $text-color
&:hover
background-color: lighten($button-color, 6%)
//box-shadow: 0 .125em $off-wht, inset 0 .063em $off-wht, inset 0 -.188em lighten($btn-color, 2%)
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
index 3994d20..c24dbec 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
@@ -23,7 +23,6 @@
%textbutton-def
@extend %button-def
/* TextField */
- color: $white
font:
family: $font-stack
style: bold
@@ -40,8 +39,17 @@
.jewel.textbutton, .jewel.textbutton:hover
@extend %textbutton-def
+.jewel.textbutton
+ +button-theme($default-color, $default-font-color)
+
.jewel.textbutton.primary
- +button-theme($primary-color)
+ +button-theme($primary-color, $font-color)
+
+.jewel.textbutton.secondary
+ +button-theme($secondary-color, $font-color)
+
+.jewel.textbutton.emphasized
+ +button-theme($emphasized-color, $font-color)
// /* TextField: */
// font-family: $font-stack
diff --git a/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass b/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
index fbe84c7..135129b 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
@@ -17,4 +17,10 @@
//
////////////////////////////////////////////////////////////////////////////////
// Color Themes
-$primary-color: #006CEB
\ No newline at end of file
+$default-color: rgba(0,0,0,0.30)
+$primary-color: #006CEB
+$secondary-color: #011833
+$emphasized-color: #1FD348
+
+$default-font-color: rgba(0, 0, 0, .4)
+$font-color: white
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass b/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
index b1af604..b564176 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
@@ -17,4 +17,10 @@
//
////////////////////////////////////////////////////////////////////////////////
// Color Themes
-$primary-color: #FF0000
\ No newline at end of file
+$default-color: rgba(0,0,0,0.20)
+$primary-color: #FF0000
+$secondary-color: #342F30
+$emphasized-color: #016936
+
+$default-font-color: rgba(0, 0, 0, .5)
+$font-color: white
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index 5f5343c..c96fa61 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -25,6 +25,12 @@
@import "global"
// Components
+
+// Button
@import "button"
+
+// TextButton
@import "textbutton"
+
+// TextField
@import "textfield"
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 10/22: wiring textbutton with variables
Posted by ca...@apache.org.
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 99bd9849d2c10adb93a9fc8cf25b6f000e237582
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Mar 8 18:54:33 2018 +0100
wiring textbutton with variables
---
frameworks/themes/JewelTheme/pom.xml | 4 -
.../JewelTheme/src/main/resources/TextButton.css | 96 ----------------------
.../JewelTheme/src/main/resources/defaults.css | 45 +++++++++-
.../JewelTheme/src/main/sass/_textbutton.sass | 92 +++++++++++++++++++++
.../JewelTheme/src/main/sass/_variables.sass | 9 +-
.../themes/JewelTheme/src/main/sass/defaults.sass | 3 +
6 files changed, 147 insertions(+), 102 deletions(-)
diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml
index f577bab..c431c4b 100644
--- a/frameworks/themes/JewelTheme/pom.xml
+++ b/frameworks/themes/JewelTheme/pom.xml
@@ -69,10 +69,6 @@
<path>../src/main/resources/Button.css</path>
</include-file>
<include-file>
- <name>TextButton.css</name>
- <path>../src/main/resources/TextButton.css</path>
- </include-file>
- <include-file>
<name>TextField.css</name>
<path>../src/main/resources/TextField.css</path>
</include-file>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/TextButton.css b/frameworks/themes/JewelTheme/src/main/resources/TextButton.css
deleted file mode 100644
index 975a138..0000000
--- a/frameworks/themes/JewelTheme/src/main/resources/TextButton.css
+++ /dev/null
@@ -1,96 +0,0 @@
-/*
- *
- * 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.
- *
- */
-
-@namespace "library://ns.apache.org/royale/jewel";
-
-/*
-* Jewel TextButton
-*/
-.textbutton, .textbutton:hover {
-
- cursor:pointer;
-
- /* Background: */
- 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;*/
-
- /*background-image: linear-gradient(#3BB0FF, #1E36FA);*/
- /*background-color: #006CEB;
- 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 0px;
- display:inline-block;
- min-width: 80px;
-
- /*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 {
- 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;
- padding: 8px 16px;*/
-}
-
-.textbutton:active {
- background-color: #0056BC;
-
- /*box-shadow: #E6431D 0 1px 0 inset;
- text-shadow: 0 -1px 0 #5F3A29;*/
-}
-.textbutton:focus {
- outline: 0;
-}
-
-.textbutton[disabled] {
- background-color: #CCCCCC;
- color: #888;
- text-shadow: unset;
- cursor: unset;
-}
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 29d83ac..3a2634f 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -30,7 +30,50 @@
body {
font: 100% "Lato-Bold", sans-serif;
- color: #333;
+ color: red;
+}
+
+/**
+ * Jewel TextButton
+ */
+.textbutton, .textbutton:hover {
+ cursor: pointer;
+ /* Background: */
+ border: none;
+ border-radius: 3px;
+ /* TextField: */
+ font-family: "Lato-Bold", sans-serif;
+ font-size: 14px;
+ font-weight: bold;
+ color: #fff;
+ text-shadow: 0 1px 0 #555;
+ padding: 10px 0px;
+ display: inline-block;
+ min-width: 80px;
+}
+
+.textbutton {
+ background-color: red;
+ transition-duration: 0.4s;
+}
+
+.textbutton:hover {
+ background-color: #3389EF;
+}
+
+.textbutton:active {
+ background-color: #0056BC;
+}
+
+.textbutton:focus {
+ outline: 0;
+}
+
+.textbutton[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ text-shadow: unset;
+ cursor: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
new file mode 100644
index 0000000..ee1c655
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
@@ -0,0 +1,92 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Jewel TextButton
+ */
+.textbutton, .textbutton:hover
+
+ cursor: pointer
+
+ /* Background: */
+ 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;
+
+ //background-image: linear-gradient(#3BB0FF, #1E36FA);
+
+ //background-color: #006CEB;
+ //background-size: cover;
+ //background-repeat: no-repeat;
+ //background-clip: padding-box;
+
+ /* TextField: */
+ font-family: $font-stack
+ font-size: 14px
+ font-weight: bold
+ color: $font-normal-color
+ text-shadow: 0 1px 0 #555
+
+ padding: 10px 0px
+ display: inline-block
+ min-width: 80px
+
+ //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
+ background-color: $primary-color
+ transition-duration: 0.4s
+
+
+.textbutton:hover
+ background-color: $hover-color
+
+ //background: linear-gradient(#FD9958, #F76943);
+ //border: 1px solid #BC573C;
+ //line-height:16px;
+ //padding: 8px 16px;
+
+.textbutton:active
+ background-color: $active-color
+
+ //box-shadow: #E6431D 0 1px 0 inset;
+ //text-shadow: 0 -1px 0 #5F3A29;
+
+.textbutton:focus
+ outline: 0
+
+
+.textbutton[disabled]
+ background-color: $disabled-color
+ color: $font-disabled-color
+ text-shadow: unset
+ cursor: unset
+
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
index 33e2064..46227a0 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -18,4 +18,11 @@
////////////////////////////////////////////////////////////////////////////////
$font-stack: 'Lato-Bold', sans-serif
-$primary-color: #333
\ No newline at end of file
+
+$primary-color: #006CEB
+$hover-color: #3389EF
+$active-color: #0056BC
+$disabled-color: #CCCCCC
+
+$font-normal-color: #fff
+$font-disabled-color: #888888
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index b45e844..aa62d14 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -33,3 +33,6 @@
body
font: 100% $font-stack
color: $primary-color
+
+// Components
+@import "textbutton"
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.