Merge branch 'feature/MXRoyale' into feature/new_merge
diff --git a/.gitignore b/.gitignore
index 2c1495b..69498fb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,157 +1,158 @@
-# eclipse conf file
-.settings
-.classpath
-.project
-.manager
-.scala_dependencies
-.cache
-.actionScriptProperties
-.flexProperties
-.flexLibProperties
-
-# idea conf files
-.idea
-*.iml
-*.ipr
-*.iws
-
-# VSCode conf files
-.vscode/settings.json
-
-# building
-target/
-[Bb]uild/
-null
-tmp
-temp
-dist
-test-output
-build.log
-release
-fonts
-out
-gen
-bin-debug
-bin-release
-binjs-debug
-binjs-release
-examples/FlexJSTest_again/html-template
-examples/FlexJSTest_again/bin
-rat.report
-mustella/tests/basicTests/bin
-mustella/tests/mxtests/basicTests/bin
-asdoc-output
-
-#Apache Flex Projects
-lib/
-libs/
-in/
-swfobject/
-flex2/
-thirdparty/
-3.0.33/
-3.0.33
-
-*.pbj
-*.vms
-*.ser
-*.mxp
-bundles.properties
-empty.properties
-css_*.properties
-FXGException_*.properties
-FXGLog_*.properties
-FABridge.js
-frameworks/projects/spark/manifest.xml
-frameworks/air-config.xml
-frameworks/createjs-config.xml
-frameworks/flex-config.xml
-frameworks/jquery-config.xml
-frameworks/js-config.xml
-frameworks/node-config.xml
-frameworks/royale-config.xml
-env.properties
-local.properties
-/flex-sdk-description.xml
-/royale-sdk-description.xml
-
-#OS junk files
-[Tt]humbs.db
-*.DS_Store
-
-#Files we fake for Flash Builder SDKs
-frameworks/airmobile-config.xml
-frameworks/mxml-manifest.xml
-frameworks/spark-manifest.xml
-frameworks/themes/Halo/Halo.swc
-frameworks/themes/Spark/spark.css
-ide/flashbuilder/flashbuilder-config.xml
-
-#Visual Studio files
-*.[Oo]bj
-*.user
-*.aps
-*.pch
-*.vspscc
-*.vssscc
-*_i.c
-*_p.c
-*.ncb
-*.suo
-*.tlb
-*.tlh
-*.bak
-*.[Cc]ache
-*.ilk
-*.log
-*.lib
-*.sbr
-*.sdf
-ipch/
-obj/
-[Dd]ebug/
-[Rr]elease*/
-Ankh.NoLoad
-!releasemgr
-
-#Tooling
-_ReSharper*/
-*.resharper
-
-#CVS files
-.svn
-.git
-
-# Office Temp Files
-~$*
-
-#Binaries
-*.dll
-*.bin
-*.com
-*.exe
-*.class
-*.jar
-*.swf
-*.swc
-
-#Compressed Files
-*.zip
-*.rar
-*.tar
-
-#VF2JS generated files
-vf2js/frameworks/js/
-
-#Royale generated files
-frameworks/js/Royale/generated-sources
-manualtests/RoyaleTest_SVG/bin
-*.css.map
-
-#npm
-node_modules
-npm/cli/test
-
-frameworks/projects/MXRoyale/.vscode
-.gitignore
-.gitignore
+# eclipse conf file
+.settings
+.classpath
+.project
+.manager
+.scala_dependencies
+.cache
+.actionScriptProperties
+.flexProperties
+.flexLibProperties
+
+# idea conf files
+.idea
+*.iml
+*.ipr
+*.iws
+
+# VSCode conf files
+**/.vscode/**
+
+
+# building
+target/
+[Bb]uild/
+null
+tmp
+temp
+dist
+test-output
+build.log
+release
+fonts
+out
+gen
+bin-debug
+bin-release
+binjs-debug
+binjs-release
+examples/FlexJSTest_again/html-template
+examples/FlexJSTest_again/bin
+rat.report
+mustella/tests/basicTests/bin
+mustella/tests/mxtests/basicTests/bin
+asdoc-output
+
+#Apache Flex Projects
+lib/
+libs/
+in/
+swfobject/
+flex2/
+thirdparty/
+3.0.33/
+3.0.33
+
+*.pbj
+*.vms
+*.ser
+*.mxp
+bundles.properties
+empty.properties
+css_*.properties
+FXGException_*.properties
+FXGLog_*.properties
+FABridge.js
+frameworks/projects/spark/manifest.xml
+frameworks/air-config.xml
+frameworks/createjs-config.xml
+frameworks/flex-config.xml
+frameworks/jquery-config.xml
+frameworks/js-config.xml
+frameworks/node-config.xml
+frameworks/royale-config.xml
+env.properties
+local.properties
+/flex-sdk-description.xml
+/royale-sdk-description.xml
+
+#OS junk files
+[Tt]humbs.db
+*.DS_Store
+
+#Files we fake for Flash Builder SDKs
+frameworks/airmobile-config.xml
+frameworks/mxml-manifest.xml
+frameworks/spark-manifest.xml
+frameworks/themes/Halo/Halo.swc
+frameworks/themes/Spark/spark.css
+ide/flashbuilder/flashbuilder-config.xml
+
+#Visual Studio files
+*.[Oo]bj
+*.user
+*.aps
+*.pch
+*.vspscc
+*.vssscc
+*_i.c
+*_p.c
+*.ncb
+*.suo
+*.tlb
+*.tlh
+*.bak
+*.[Cc]ache
+*.ilk
+*.log
+*.lib
+*.sbr
+*.sdf
+ipch/
+obj/
+[Dd]ebug/
+[Rr]elease*/
+Ankh.NoLoad
+!releasemgr
+
+#Tooling
+_ReSharper*/
+*.resharper
+
+#CVS files
+.svn
+.git
+
+# Office Temp Files
+~$*
+
+#Binaries
+*.dll
+*.bin
+*.com
+*.exe
+*.class
+*.jar
+*.swf
+*.swc
+
+#Compressed Files
+*.zip
+*.rar
+*.tar
+
+#VF2JS generated files
+vf2js/frameworks/js/
+
+#Royale generated files
+frameworks/js/Royale/generated-sources
+manualtests/RoyaleTest_SVG/bin
+*.css.map
+
+#npm
+node_modules
+npm/cli/test
+
+frameworks/projects/MXRoyale/.vscode
+.gitignore
+.gitignore
diff --git a/GIT-TEST.txt b/GIT-TEST.txt
index 8681826..436f407 100644
--- a/GIT-TEST.txt
+++ b/GIT-TEST.txt
@@ -18,4 +18,5 @@
////////////////////////////////////////////////////////////////////////////////
Just a commit test [Olaf Krueger]
-Testing Gitbox [JT]
\ No newline at end of file
+Testing Gitbox [JT]
+Test Commit
diff --git a/LICENSE b/LICENSE
index 0b5974b..b8e676d 100644
--- a/LICENSE
+++ b/LICENSE
@@ -286,3 +286,29 @@
The createjs.js file in createjs/src/main/javascript is
a non-copyrightable subset of EaselJS and TweenJS from
https://github.com/CreateJS
+
+The file frameworks/projects/Core/src/main/royale/org/apache/royale/utils/MD5.as
+is derived from https://github.com/blueimp/JavaScript-MD5 which is available under an
+MIT License.
+
+MIT License
+
+Copyright © 2011 Sebastian Tschan, https://blueimp.net
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
index 6cd2c15..9928234 100644
--- a/RELEASE_NOTES.md
+++ b/RELEASE_NOTES.md
@@ -1,7 +1,9 @@
Apache Royale 0.9.3
===================
-- [Added New Jewel UI Set (Initial work)](https://github.com/apache/royale-asjs/issues/154)
+- [Better way to style components: ClassSelectorList](https://github.com/apache/royale-asjs/issues/205)
+- [Fixed AMF / RemoteObject Support](https://github.com/apache/royale-asjs/issues/204)
+- [Added New Jewel UI Set And First 72 Jewel Themes 12 Colors, Light and Dark (Initial work)](https://github.com/apache/royale-asjs/issues/154)
- [Renamed TextOverflow bead to EllipsisOverflow. It now supports Label elements as well.](https://github.com/apache/royale-asjs/issues/130)
- [Added IEEventAdapterBead](https://github.com/apache/royale-asjs/issues/131)
- [Added Object getter/setter utility functions](https://github.com/apache/royale-asjs/issues/132)
diff --git a/build.xml b/build.xml
index 555f1d3..2217e92 100644
--- a/build.xml
+++ b/build.xml
@@ -586,7 +586,7 @@
<delete dir="${basedir}/marmotinni/java/lib"/>
</target>
- <target name="clean" depends="examples-clean,frameworks-clean,package-clean,checkintests-clean"
+ <target name="clean" depends="examples-clean,frameworks-clean,package-clean,checkintests-clean,mxtests-clean"
description="Full clean excluding thirdparty downloads">
<delete file="${basedir}/royale-sdk-description.xml" failonerror="false"/>
@@ -780,20 +780,20 @@
</target>
<target name="stage-compiler" >
- <echo file="${ROYALE_COMPILER_REPO}/env.properties">env.ASJS_HOME=${basedir}</echo>
+ <echo file="${basedir}/../royale-compiler/env.properties">env.ASJS_HOME=${basedir}</echo>
<!-- windows needs backslashes escaped -->
- <replaceregexp file="${ROYALE_COMPILER_REPO}/env.properties" match="\\" replace="\\\\\\\\" flags="g" />
- <ant dir="${ROYALE_COMPILER_REPO}" target="wipe-all" />
- <ant dir="${ROYALE_COMPILER_REPO}" target="stage-all" >
+ <replaceregexp file="${basedir}/../royale-compiler/env.properties" match="\\" replace="\\\\\\\\" flags="g" />
+ <ant dir="${basedir}/../royale-compiler" target="wipe-all" />
+ <ant dir="${basedir}/../royale-compiler" target="stage-all" >
<property name="staging-dir" value="${basedir}/temp/royale-compiler" />
</ant>
</target>
<target name="stage-typedefs" >
- <ant dir="${ROYALE_TYPEDEFS_HOME}" target="wipe" />
+ <ant dir="${basedir}/../royale-typedefs" target="wipe" />
<mkdir dir="${staging-dir}/../royale-typedefs"/>
<copy todir="${staging-dir}/../royale-typedefs" includeEmptyDirs="false" >
- <fileset dir="${ROYALE_TYPEDEFS_HOME}" includes="**" />
+ <fileset dir="${basedir}/../royale-typedefs" includes="**" />
</copy>
</target>
@@ -1054,6 +1054,7 @@
<target name="tweak-for-jsonly" unless="env.AIR_HOME" description="do a few more things so the JSOnly package works">
<copy file="${ROYALE_HOME}/js/libs/js.swc"
tofile="${ROYALE_HOME}/frameworks/libs/KeepsFBFromHanging.swc" />
+ <copy file="${basedir}/npm/js-only/package.json" todir="${basedir}/temp" overwrite="true"/>
</target>
<!--
@@ -2006,12 +2007,12 @@
</exec>
</target>
- <target name="build-all" depends="check-playerglobal-home,check-air-home,check-compiler-home,check-typedefs-home">
+ <target name="build-all" depends="check-playerglobal-home,check-air-home">
<property name="font.donot.ask" value="set" />
<antcall target="ask-before-build-all" />
<property name="javadoc.zip.uptodate" value="set" /> <!-- javadoc fails on windows? -->
- <ant dir="${ROYALE_COMPILER_REPO}" />
- <ant dir="${ROYALE_TYPEDEFS_HOME}" />
+ <ant dir="${base.folder.name}/royale-compiler" />
+ <ant dir="${base.folder.name}/royale-typedefs" />
</target>
<target name="ask-before-build-all" unless="release.target">
<input
diff --git a/distribution/pom.xml b/distribution/pom.xml
index 28430f1..7858296 100644
--- a/distribution/pom.xml
+++ b/distribution/pom.xml
@@ -37,6 +37,10 @@
<distributionFileName>apache-royale-${project.version}</distributionFileName>
<timestamp>${maven.build.timestamp}</timestamp>
<maven.build.timestamp.format>yyyyMMddHHmm</maven.build.timestamp.format>
+
+ <playerglobalHome>libs/player</playerglobalHome>
+ <targetPlayerMajorVersion>20</targetPlayerMajorVersion>
+ <targetPlayerMinorVersion>0</targetPlayerMinorVersion>
</properties>
<modules>
@@ -200,6 +204,12 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
+ <artifactId>Icons</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
<artifactId>Reflection</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
@@ -216,6 +226,12 @@
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
</dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ </dependency>
<!-- Add the framework js-swc modules -->
<dependency>
@@ -360,6 +376,13 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
+ <artifactId>Icons</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
<artifactId>Reflection</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
@@ -379,6 +402,13 @@
<type>swc</type>
<classifier>js</classifier>
</dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
<!-- Add dependencies to the externs from the compiler module -->
<dependency>
diff --git a/distribution/src/main/assembly/component.xml b/distribution/src/main/assembly/component.xml
index 73c5c65..fe58b96 100644
--- a/distribution/src/main/assembly/component.xml
+++ b/distribution/src/main/assembly/component.xml
@@ -310,6 +310,11 @@
<destName>basic-manifest-network.xml</destName>
</file>
<file>
+ <source>../frameworks/projects/Icons/src/main/resources/icons-manifest.xml</source>
+ <outputDirectory>frameworks/manifests</outputDirectory>
+ <destName>basic-manifest-icons.xml</destName>
+ </file>
+ <file>
<source>../frameworks/projects/Storage/src/main/resources/basic-manifest.xml</source>
<outputDirectory>frameworks/manifests</outputDirectory>
<destName>basic-manifest-storage.xml</destName>
diff --git a/distribution/src/main/resources/frameworks/air-config.xml b/distribution/src/main/resources/frameworks/air-config.xml
index b1e817a..a4e7e4c 100644
--- a/distribution/src/main/resources/frameworks/air-config.xml
+++ b/distribution/src/main/resources/frameworks/air-config.xml
@@ -75,7 +75,7 @@
<!-- List of SWC files or directories to compile against but to omit from -->
<!-- linking. -->
<js-external-library-path>
- <path-element>../js/libs/royale.typedefs-js-${royale.typedefs.version}-typedefs.swc</path-element>
+ <path-element>../js/libs/royale-typedefs-js-${royale.typedefs.version}-typedefs.swc</path-element>
</js-external-library-path>
<!-- Turn on writing of generated/*.as files to disk. These files are generated by -->
diff --git a/distribution/src/main/resources/frameworks/airmobile-config.xml b/distribution/src/main/resources/frameworks/airmobile-config.xml
index cbead1d..f27b6aa 100644
--- a/distribution/src/main/resources/frameworks/airmobile-config.xml
+++ b/distribution/src/main/resources/frameworks/airmobile-config.xml
@@ -75,7 +75,7 @@
<!-- List of SWC files or directories to compile against but to omit from -->
<!-- linking. -->
<js-external-library-path>
- <path-element>../js/libs/royale.typedefs-js-${royale.typedefs.version}-typedefs.swc</path-element>
+ <path-element>../js/libs/royale-typedefs-js-${royale.typedefs.version}-typedefs.swc</path-element>
</js-external-library-path>
<!-- Turn on writing of generated/*.as files to disk. These files are generated by -->
diff --git a/distribution/src/main/resources/frameworks/createjs-config.xml b/distribution/src/main/resources/frameworks/createjs-config.xml
index 6ce98e1..dbe95f2 100644
--- a/distribution/src/main/resources/frameworks/createjs-config.xml
+++ b/distribution/src/main/resources/frameworks/createjs-config.xml
@@ -58,8 +58,8 @@
<!-- List of SWC files or directories to compile against but to omit from -->
<!-- linking. -->
<external-library-path>
- <path-element>../js/libs/royale.typedefs-js-${royale.typedefs.version}-typedefs.swc</path-element>
- <path-element>../js/libs/royale.typedefs-createjs-${royale.typedefs.version}-typedefs.swc</path-element>
+ <path-element>../js/libs/royale-typedefs-js-${royale.typedefs.version}-typedefs.swc</path-element>
+ <path-element>../js/libs/royale-typedefs-createjs-${royale.typedefs.version}-typedefs.swc</path-element>
</external-library-path>
<!-- Turn on writing of generated/*.as files to disk. These files are generated by -->
@@ -76,7 +76,7 @@
<!-- List of SWC files or directories that contain SWC files. -->
<library-path>
- <path-element>../js/libs/royale.typedefs-gcl-${royale.typedefs.version}-typedefs.swc</path-element>
+ <path-element>../js/libs/royale-typedefs-gcl-${royale.typedefs.version}-typedefs.swc</path-element>
</library-path>
<allow-subclass-overrides>true</allow-subclass-overrides>
diff --git a/distribution/src/main/resources/frameworks/flex-config.xml b/distribution/src/main/resources/frameworks/flex-config.xml
index 7854c17..14e0148 100644
--- a/distribution/src/main/resources/frameworks/flex-config.xml
+++ b/distribution/src/main/resources/frameworks/flex-config.xml
@@ -76,7 +76,7 @@
<!-- List of SWC files or directories to compile against but to omit from -->
<!-- linking. -->
<js-external-library-path>
- <path-element>../js/libs/royale.typedefs-js-${royale.typedefs.version}-typedefs.swc</path-element>
+ <path-element>../js/libs/royale-typedefs-js-${royale.typedefs.version}-typedefs.swc</path-element>
</js-external-library-path>
<!-- Turn on writing of generated/*.as files to disk. These files are generated by -->
diff --git a/distribution/src/main/resources/frameworks/jquery-config.xml b/distribution/src/main/resources/frameworks/jquery-config.xml
index ba3cd21..53e8932 100644
--- a/distribution/src/main/resources/frameworks/jquery-config.xml
+++ b/distribution/src/main/resources/frameworks/jquery-config.xml
@@ -57,8 +57,8 @@
<!-- List of SWC files or directories to compile against but to omit from -->
<!-- linking. -->
<external-library-path>
- <path-element>../js/libs/royale.typedefs-js-${royale.typedefs.version}-typedefs.swc</path-element>
- <path-element>../js/libs/royale.typedefs-jquery-${royale.typedefs.version}-typedefs.swc</path-element>
+ <path-element>../js/libs/royale-typedefs-js-${royale.typedefs.version}-typedefs.swc</path-element>
+ <path-element>../js/libs/royale-typedefs-jquery-${royale.typedefs.version}-typedefs.swc</path-element>
</external-library-path>
<!-- Turn on writing of generated/*.as files to disk. These files are generated by -->
@@ -76,7 +76,7 @@
<!-- List of SWC files or directories that contain SWC files. -->
<library-path>
<path-element>libs/Language-${version}.swc</path-element>
- <path-element>../js/libs/royale.typedefs-gcl-${royale.typedefs.version}-typedefs.swc</path-element>
+ <path-element>../js/libs/royale-typedefs-gcl-${royale.typedefs.version}-typedefs.swc</path-element>
</library-path>
<allow-subclass-overrides>true</allow-subclass-overrides>
diff --git a/distribution/src/main/resources/frameworks/js-config.xml b/distribution/src/main/resources/frameworks/js-config.xml
index b895da9..8d198cc 100644
--- a/distribution/src/main/resources/frameworks/js-config.xml
+++ b/distribution/src/main/resources/frameworks/js-config.xml
@@ -57,7 +57,7 @@
<!-- List of SWC files or directories to compile against but to omit from -->
<!-- linking. -->
<external-library-path>
- <path-element>../js/libs/royale.typedefs-js-${royale.typedefs.version}-typedefs.swc</path-element>
+ <path-element>../js/libs/royale-typedefs-js-${royale.typedefs.version}-typedefs.swc</path-element>
</external-library-path>
<!-- Turn on writing of generated/*.as files to disk. These files are generated by -->
@@ -75,7 +75,7 @@
<!-- List of SWC files or directories that contain SWC files. -->
<library-path>
<path-element>libs/Language-${version}.swc</path-element>
- <path-element>../js/libs/royale.typedefs-gcl-${royale.typedefs.version}-typedefs.swc</path-element>
+ <path-element>../js/libs/royale-typedefs-gcl-${royale.typedefs.version}-typedefs.swc</path-element>
</library-path>
<mxml>
diff --git a/distribution/src/main/resources/frameworks/node-config.xml b/distribution/src/main/resources/frameworks/node-config.xml
index 8446376..cfde4d4 100644
--- a/distribution/src/main/resources/frameworks/node-config.xml
+++ b/distribution/src/main/resources/frameworks/node-config.xml
@@ -57,8 +57,8 @@
<!-- List of SWC files or directories to compile against but to omit from -->
<!-- linking. -->
<external-library-path>
- <path-element>../js/libs/royale.typedefs-js-${royale.typedefs.version}-typedefs.swc</path-element>
- <path-element>../js/libs/royale.typedefs-node-${royale.typedefs.version}-typedefs.swc</path-element>
+ <path-element>../js/libs/royale-typedefs-js-${royale.typedefs.version}-typedefs.swc</path-element>
+ <path-element>../js/libs/royale-typedefs-node-${royale.typedefs.version}-typedefs.swc</path-element>
</external-library-path>
<!-- Turn on writing of generated/*.as files to disk. These files are generated by -->
@@ -76,7 +76,7 @@
<!-- List of SWC files or directories that contain SWC files. -->
<library-path>
<path-element>libs/Language-${version}.swc</path-element>
- <path-element>../js/libs/royale.typedefs-gcl-${royale.typedefs.version}-typedefs.swc</path-element>
+ <path-element>../js/libs/royale-typedefs-gcl-${royale.typedefs.version}-typedefs.swc</path-element>
</library-path>
<mxml>
diff --git a/distribution/src/main/resources/frameworks/royale-config-template.xml b/distribution/src/main/resources/frameworks/royale-config-template.xml
new file mode 100644
index 0000000..d0fab5c
--- /dev/null
+++ b/distribution/src/main/resources/frameworks/royale-config-template.xml
@@ -0,0 +1,529 @@
+<?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.
+
+-->
+
+
+<royale-config>
+ <!-- Specifies the minimum player version that will run the compiled SWF. -->
+ <target-player>@playerversion@</target-player>
+
+ <!-- Specifies the version of the compiled SWF -->
+ <swf-version>@swfversion@</swf-version>
+
+ <compiler>
+
+ <!-- build both SWF and JS. -->
+ <targets>
+ <target>SWF</target>
+ <target>JSRoyale</target>
+ </targets>
+
+ <define><name>COMPILE::SWF</name><value>AUTO</value></define>
+ <define><name>COMPILE::JS</name><value>AUTO</value></define>
+
+ <!-- Turn on generation of accessible SWFs. -->
+ <accessible>true</accessible>
+
+ <!-- Specifies the locales for internationalization. -->
+ <locale>
+ <locale-element>@locale@</locale-element>
+ </locale>
+
+ <!-- List of path elements that form the roots of ActionScript class hierarchies. -->
+ <!-- not set -->
+ <!--
+ <source-path>
+ <path-element>string</path-element>
+ </source-path>
+ -->
+
+ <!-- Allow the source-path to have path-elements which contain other path-elements -->
+ <allow-source-path-overlap>false</allow-source-path-overlap>
+
+ <!-- Run the AS3 compiler in a mode that detects legal but potentially incorrect -->
+ <!-- code. -->
+ <show-actionscript-warnings>true</show-actionscript-warnings>
+
+ <!-- Turn on generation of debuggable SWFs. False by default for mxmlc, -->
+ <!-- but true by default for compc. -->
+ <!--
+ <debug>true</debug>
+ -->
+
+ <!-- List of SWC files or directories to compile against but to omit from -->
+ <!-- linking. -->
+ <external-library-path>
+ <path-element>{playerglobalHome}/{targetPlayerMajorVersion}.{targetPlayerMinorVersion}/playerglobal.swc</path-element>
+ </external-library-path>
+
+ <!-- List of SWC files or directories to compile against but to omit from -->
+ <!-- linking. -->
+ <js-external-library-path>
+ <path-element>../js/libs/js.swc</path-element>
+ </js-external-library-path>
+
+ <!-- Turn on writing of generated/*.as files to disk. These files are generated by -->
+ <!-- the compiler during mxml translation and are helpful with understanding and -->
+ <!-- debugging Royale applications. -->
+ <keep-generated-actionscript>false</keep-generated-actionscript>
+
+ <!-- not set -->
+ <!--
+ <include-libraries>
+ <library>string</library>
+ </include-libraries>
+ -->
+
+ <!-- List of SWC files or directories that contain SWC files. -->
+ <library-path>
+ <path-element>libs</path-element>
+ <path-element>{playerglobalHome}/{targetPlayerMajorVersion}.{targetPlayerMinorVersion}</path-element>
+ </library-path>
+
+ <!-- List of SWC files or directories that contain SWC files. -->
+ <js-library-path>
+ <path-element>js/libs</path-element>
+ </js-library-path>
+
+ <allow-subclass-overrides>true</allow-subclass-overrides>
+ <mxml>
+ <children-as-data>true</children-as-data>
+ <imports>
+ <implicit-import>org.apache.royale.events.*</implicit-import>
+ <implicit-import>org.apache.royale.geom.*</implicit-import>
+ <implicit-import>org.apache.royale.core.ClassFactory</implicit-import>
+ <implicit-import>org.apache.royale.core.IFactory</implicit-import>
+ </imports>
+ </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>
+ <binding-event-handler-event>org.apache.royale.events.Event</binding-event-handler-event>
+ <binding-event-handler-class>org.apache.royale.events.EventDispatcher</binding-event-handler-class>
+ <binding-event-handler-interface>org.apache.royale.events.IEventDispatcher</binding-event-handler-interface>
+ <states-class>org.apache.royale.states.State</states-class>
+ <states-instance-override-class>org.apache.royale.states.AddItems</states-instance-override-class>
+ <states-property-override-class>org.apache.royale.states.SetProperty</states-property-override-class>
+ <states-event-override-class>org.apache.royale.states.SetEventHandler</states-event-override-class>
+ <component-factory-class>org.apache.royale.core.ClassFactory</component-factory-class>
+ <component-factory-interface>org.apache.royale.core.IFactory</component-factory-interface>
+ <fxg-base-class>flash.display.Sprite</fxg-base-class>
+
+ <namespaces>
+ <!-- Specify a URI to associate with a manifest of components for use as MXML -->
+ <!-- elements. -->
+ <namespace>
+ <uri>http://ns.adobe.com/mxml/2009</uri>
+ <manifest>mxml-2009-manifest.xml</manifest>
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/Binding/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/Basic/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/Charts/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/Collections/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/Core/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/DragDrop/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/Effects/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/Formatters/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/Graphics/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/svg</uri>
+
+ <manifest>projects/Graphics/src/main/resources/svg-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/HTML/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/html</uri>
+
+ <manifest>projects/HTML/src/main/resources/html-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/Mobile/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/Network/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/html5</uri>
+
+ <manifest>projects/HTML5/src/main/resources/html5-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/flat</uri>
+
+ <manifest>projects/Flat/src/main/resources/flat-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/jquery</uri>
+
+ <manifest>projects/JQuery/src/main/resources/jquery-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/google</uri>
+
+ <manifest>projects/GoogleMaps/src/main/resources/google-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/cordova</uri>
+
+ <manifest>projects/Mobile/src/main/resources/cordova-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/createjs</uri>
+
+ <manifest>projects/CreateJS/src/main/resources/createjs-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/mdl</uri>
+
+ <manifest>projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/express</uri>
+
+ <manifest>projects/Express/src/main/resources/express-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/fa</uri>
+
+ <manifest>projects/FontAwesome/src/main/resources/fa-manifest.xml</manifest>
+
+ </namespace>
+ </namespaces>
+
+ <!-- Enable post-link SWF optimization. -->
+ <optimize>true</optimize>
+
+ <!-- Enable trace statement omission. -->
+ <omit-trace-statements>true</omit-trace-statements>
+
+ <!-- Keep the following AS3 metadata in the bytecodes. -->
+ <!-- Warning: For the data binding feature in the Royale framework to work properly, -->
+ <!-- the following metadata must be kept: -->
+ <!-- 1. Bindable -->
+ <!-- 2. Managed -->
+ <!-- 3. ChangeEvent -->
+ <!-- 4. NonCommittingChangeEvent -->
+ <!-- 5. Transient -->
+ <!--
+ <keep-as3-metadata>
+ <name>Bindable</name>
+ <name>Managed</name>
+ <name>ChangeEvent</name>
+ <name>NonCommittingChangeEvent</name>
+ <name>Transient</name>
+ <name>Mixin</name>
+ </keep-as3-metadata>
+ -->
+
+ <!-- Turn on reporting of data binding warnings. For example: Warning: Data binding -->
+ <!-- will not be able to detect assignments to "foo". -->
+ <show-binding-warnings>true</show-binding-warnings>
+
+ <!-- toggle whether warnings generated from unused type selectors are displayed -->
+ <show-unused-type-selector-warnings>true</show-unused-type-selector-warnings>
+
+ <!-- Run the AS3 compiler in strict error checking mode. -->
+ <strict>true</strict>
+
+ <!-- Use the ActionScript 3 class based object model for greater performance and better error reporting. -->
+ <!-- In the class based object model most built-in functions are implemented as fixed methods of classes -->
+ <!-- (-strict is recommended, but not required, for earlier errors) -->
+ <as3>true</as3>
+
+ <!-- Use the ECMAScript edition 3 prototype based object model to allow dynamic overriding of prototype -->
+ <!-- properties. In the prototype based object model built-in functions are implemented as dynamic -->
+ <!-- properties of prototype objects (-strict is allowed, but may result in compiler errors for -->
+ <!-- references to dynamic properties) -->
+ <es>false</es>
+
+ <!-- List of CSS or SWC files to apply as a theme. -->
+ <theme>
+ <filename>themes/Basic/src/basic.css</filename>
+ </theme>
+
+ <!-- Turns on the display of stack traces for uncaught runtime errors. -->
+ <verbose-stacktraces>false</verbose-stacktraces>
+
+ <!-- Defines the AS3 file encoding. -->
+ <!-- not set -->
+ <!--
+ <actionscript-file-encoding></actionscript-file-encoding>
+ -->
+
+ <fonts>
+
+ <!-- Enables advanced anti-aliasing for embedded fonts, which provides greater clarity for small -->
+ <!-- fonts. This setting can be overriden in CSS for specific fonts. -->
+ <!-- NOTE: flash-type has been deprecated. Please use advanced-anti-aliasing <flash-type>true</flash-type> -->
+ <advanced-anti-aliasing>true</advanced-anti-aliasing>
+
+ <!-- The number of embedded font faces that are cached. -->
+ <max-cached-fonts>20</max-cached-fonts>
+
+ <!-- The number of character glyph outlines to cache for each font face. -->
+ <max-glyphs-per-face>1000</max-glyphs-per-face>
+
+ <!-- Defines ranges that can be used across multiple font-face declarations. -->
+ <!-- See flash-unicode-table.xml for more examples. -->
+ <!-- not set -->
+ <!--
+ <languages>
+ <language-range>
+ <lang>englishRange</lang>
+ <range>U+0020-007E</range>
+ </language-range>
+ </languages>
+ -->
+
+ <!-- Compiler font manager classes, in policy resolution order -->
+ <!-- NOTE: For Apache Royale -->
+ <!-- AFEFontManager and CFFFontManager both use proprietary technology. -->
+ <!-- You must install the optional font jars if you wish to use embedded fonts -->
+ <!-- directly or you can use fontswf to precompile the font as a swf. -->
+ <managers>
+ <manager-class>flash.fonts.JREFontManager</manager-class>
+ <manager-class>flash.fonts.BatikFontManager</manager-class>
+ <manager-class>flash.fonts.AFEFontManager</manager-class>
+ <manager-class>flash.fonts.CFFFontManager</manager-class>
+ </managers>
+
+ <!-- File containing cached system font licensing information produced via
+ java -cp mxmlc.jar flex2.tools.FontSnapshot (fontpath)
+ Will default to winFonts.ser on Windows XP and
+ macFonts.ser on Mac OS X, so is commented out by default.
+
+ <local-fonts-snapshot>localFonts.ser</local-fonts-snapshot>
+ -->
+
+ </fonts>
+
+ <!-- Array.toString() format has changed. -->
+ <warn-array-tostring-changes>false</warn-array-tostring-changes>
+
+ <!-- Assignment within conditional. -->
+ <warn-assignment-within-conditional>true</warn-assignment-within-conditional>
+
+ <!-- Possibly invalid Array cast operation. -->
+ <warn-bad-array-cast>true</warn-bad-array-cast>
+
+ <!-- Non-Boolean value used where a Boolean value was expected. -->
+ <warn-bad-bool-assignment>true</warn-bad-bool-assignment>
+
+ <!-- Invalid Date cast operation. -->
+ <warn-bad-date-cast>true</warn-bad-date-cast>
+
+ <!-- Unknown method. -->
+ <warn-bad-es3-type-method>true</warn-bad-es3-type-method>
+
+ <!-- Unknown property. -->
+ <warn-bad-es3-type-prop>true</warn-bad-es3-type-prop>
+
+ <!-- Illogical comparison with NaN. Any comparison operation involving NaN will evaluate to false because NaN != NaN. -->
+ <warn-bad-nan-comparison>true</warn-bad-nan-comparison>
+
+ <!-- Impossible assignment to null. -->
+ <warn-bad-null-assignment>true</warn-bad-null-assignment>
+
+ <!-- Illogical comparison with null. -->
+ <warn-bad-null-comparison>true</warn-bad-null-comparison>
+
+ <!-- Illogical comparison with undefined. Only untyped variables (or variables of type *) can be undefined. -->
+ <warn-bad-undefined-comparison>true</warn-bad-undefined-comparison>
+
+ <!-- Boolean() with no arguments returns false in ActionScript 3.0. Boolean() returned undefined in ActionScript 2.0. -->
+ <warn-boolean-constructor-with-no-args>false</warn-boolean-constructor-with-no-args>
+
+ <!-- __resolve is no longer supported. -->
+ <warn-changes-in-resolve>false</warn-changes-in-resolve>
+
+ <!-- Class is sealed. It cannot have members added to it dynamically. -->
+ <warn-class-is-sealed>true</warn-class-is-sealed>
+
+ <!-- Constant not initialized. -->
+ <warn-const-not-initialized>true</warn-const-not-initialized>
+
+ <!-- Function used in new expression returns a value. Result will be what the -->
+ <!-- function returns, rather than a new instance of that function. -->
+ <warn-constructor-returns-value>false</warn-constructor-returns-value>
+
+ <!-- EventHandler was not added as a listener. -->
+ <warn-deprecated-event-handler-error>false</warn-deprecated-event-handler-error>
+
+ <!-- Unsupported ActionScript 2.0 function. -->
+ <warn-deprecated-function-error>true</warn-deprecated-function-error>
+
+ <!-- Unsupported ActionScript 2.0 property. -->
+ <warn-deprecated-property-error>true</warn-deprecated-property-error>
+
+ <!-- More than one argument by the same name. -->
+ <warn-duplicate-argument-names>true</warn-duplicate-argument-names>
+
+ <!-- Duplicate variable definition -->
+ <warn-duplicate-variable-def>true</warn-duplicate-variable-def>
+
+ <!-- ActionScript 3.0 iterates over an object's properties within a "for x in target" statement in random order. -->
+ <warn-for-var-in-changes>false</warn-for-var-in-changes>
+
+ <!-- Importing a package by the same name as the current class will hide that class identifier in this scope. -->
+ <warn-import-hides-class>true</warn-import-hides-class>
+
+ <!-- Use of the instanceof operator. -->
+ <warn-instance-of-changes>true</warn-instance-of-changes>
+
+ <!-- Internal error in compiler. -->
+ <warn-internal-error>true</warn-internal-error>
+
+ <!-- _level is no longer supported. For more information, see the flash.display package. -->
+ <warn-level-not-supported>true</warn-level-not-supported>
+
+ <!-- Missing namespace declaration (e.g. variable is not defined to be public, private, etc.). -->
+ <warn-missing-namespace-decl>true</warn-missing-namespace-decl>
+
+ <!-- Negative value will become a large positive value when assigned to a uint data type. -->
+ <warn-negative-uint-literal>true</warn-negative-uint-literal>
+
+ <!-- Missing constructor. -->
+ <warn-no-constructor>false</warn-no-constructor>
+
+ <!-- The super() statement was not called within the constructor. -->
+ <warn-no-explicit-super-call-in-constructor>false</warn-no-explicit-super-call-in-constructor>
+
+ <!-- Missing type declaration. -->
+ <warn-no-type-decl>true</warn-no-type-decl>
+
+ <!-- In ActionScript 3.0, white space is ignored and '' returns 0. Number() returns -->
+ <!-- NaN in ActionScript 2.0 when the parameter is '' or contains white space. -->
+ <warn-number-from-string-changes>false</warn-number-from-string-changes>
+
+ <!-- Change in scoping for the this keyword. Class methods extracted from an -->
+ <!-- instance of a class will always resolve this back to that instance. In -->
+ <!-- ActionScript 2.0 this is looked up dynamically based on where the method -->
+ <!-- is invoked from. -->
+ <warn-scoping-change-in-this>false</warn-scoping-change-in-this>
+
+ <!-- Inefficient use of += on a TextField.-->
+ <warn-slow-text-field-addition>true</warn-slow-text-field-addition>
+
+ <!-- Possible missing parentheses. -->
+ <warn-unlikely-function-value>true</warn-unlikely-function-value>
+
+ <!-- Possible usage of the ActionScript 2.0 XML class. -->
+ <warn-xml-class-has-changed>false</warn-xml-class-has-changed>
+
+ </compiler>
+
+ <!-- compute-digest: writes a digest to the catalog.xml of a library. Use this when the library will be used as a
+ cross-domain rsl.-->
+ <!-- compute-digest usage:
+ <compute-digest>boolean</compute-digest>
+ -->
+
+ <!-- remove-unused-rsls: remove RSLs that are not being used by the application-->
+ <remove-unused-rsls>true</remove-unused-rsls>
+
+ <!-- static-link-runtime-shared-libraries: statically link the libraries specified by the -runtime-shared-libraries-path option.-->
+ <static-link-runtime-shared-libraries>true</static-link-runtime-shared-libraries>
+
+ <!-- target-player: specifies the version of the player the application is targeting.
+ Features requiring a later version will not be compiled into the application.
+ The minimum value supported is "9.0.0".-->
+ <!-- target-player usage:
+ <target-player>version</target-player>
+ -->
+
+ <!-- Enables SWFs to access the network. -->
+ <use-network>true</use-network>
+
+ <!-- Metadata added to SWFs via the SWF Metadata tag. -->
+ <metadata>
+ <title>Apache Royale Application</title>
+ <description>http://royale.apache.org/</description>
+ <publisher>Apache Software Foundation</publisher>
+ <creator>unknown</creator>
+ <language>EN</language>
+ </metadata>
+
+</royale-config>
diff --git a/distribution/src/main/resources/frameworks/royale-config.xml b/distribution/src/main/resources/frameworks/royale-config.xml
new file mode 100644
index 0000000..865172b
--- /dev/null
+++ b/distribution/src/main/resources/frameworks/royale-config.xml
@@ -0,0 +1,529 @@
+<?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.
+
+-->
+
+
+<royale-config>
+ <!-- Specifies the minimum player version that will run the compiled SWF. -->
+ <target-player>${flash.version}</target-player>
+
+ <!-- Specifies the version of the compiled SWF -->
+ <swf-version>${swf.version}</swf-version>
+
+ <compiler>
+
+ <!-- build both SWF and JS. -->
+ <targets>
+ <target>SWF</target>
+ <target>JSRoyale</target>
+ </targets>
+
+ <define><name>COMPILE::SWF</name><value>AUTO</value></define>
+ <define><name>COMPILE::JS</name><value>AUTO</value></define>
+
+ <!-- Turn on generation of accessible SWFs. -->
+ <accessible>true</accessible>
+
+ <!-- Specifies the locales for internationalization. -->
+ <locale>
+ <locale-element>en_US</locale-element>
+ </locale>
+
+ <!-- List of path elements that form the roots of ActionScript class hierarchies. -->
+ <!-- not set -->
+ <!--
+ <source-path>
+ <path-element>string</path-element>
+ </source-path>
+ -->
+
+ <!-- Allow the source-path to have path-elements which contain other path-elements -->
+ <allow-source-path-overlap>false</allow-source-path-overlap>
+
+ <!-- Run the AS3 compiler in a mode that detects legal but potentially incorrect -->
+ <!-- code. -->
+ <show-actionscript-warnings>true</show-actionscript-warnings>
+
+ <!-- Turn on generation of debuggable SWFs. False by default for mxmlc, -->
+ <!-- but true by default for compc. -->
+ <!--
+ <debug>true</debug>
+ -->
+
+ <!-- List of SWC files or directories to compile against but to omit from -->
+ <!-- linking. -->
+ <external-library-path>
+ <path-element>{playerglobalHome}/{targetPlayerMajorVersion}.{targetPlayerMinorVersion}/playerglobal.swc</path-element>
+ </external-library-path>
+
+ <!-- List of SWC files or directories to compile against but to omit from -->
+ <!-- linking. -->
+ <js-external-library-path>
+ <path-element>../js/libs/js.swc</path-element>
+ </js-external-library-path>
+
+ <!-- Turn on writing of generated/*.as files to disk. These files are generated by -->
+ <!-- the compiler during mxml translation and are helpful with understanding and -->
+ <!-- debugging Royale applications. -->
+ <keep-generated-actionscript>false</keep-generated-actionscript>
+
+ <!-- not set -->
+ <!--
+ <include-libraries>
+ <library>string</library>
+ </include-libraries>
+ -->
+
+ <!-- List of SWC files or directories that contain SWC files. -->
+ <library-path>
+ <path-element>libs</path-element>
+ <path-element>{playerglobalHome}/{targetPlayerMajorVersion}.{targetPlayerMinorVersion}</path-element>
+ </library-path>
+
+ <!-- List of SWC files or directories that contain SWC files. -->
+ <js-library-path>
+ <path-element>js/libs</path-element>
+ </js-library-path>
+
+ <allow-subclass-overrides>true</allow-subclass-overrides>
+ <mxml>
+ <children-as-data>true</children-as-data>
+ <imports>
+ <implicit-import>org.apache.royale.events.*</implicit-import>
+ <implicit-import>org.apache.royale.geom.*</implicit-import>
+ <implicit-import>org.apache.royale.core.ClassFactory</implicit-import>
+ <implicit-import>org.apache.royale.core.IFactory</implicit-import>
+ </imports>
+ </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>
+ <binding-event-handler-event>org.apache.royale.events.Event</binding-event-handler-event>
+ <binding-event-handler-class>org.apache.royale.events.EventDispatcher</binding-event-handler-class>
+ <binding-event-handler-interface>org.apache.royale.events.IEventDispatcher</binding-event-handler-interface>
+ <states-class>org.apache.royale.states.State</states-class>
+ <states-instance-override-class>org.apache.royale.states.AddItems</states-instance-override-class>
+ <states-property-override-class>org.apache.royale.states.SetProperty</states-property-override-class>
+ <states-event-override-class>org.apache.royale.states.SetEventHandler</states-event-override-class>
+ <component-factory-class>org.apache.royale.core.ClassFactory</component-factory-class>
+ <component-factory-interface>org.apache.royale.core.IFactory</component-factory-interface>
+ <fxg-base-class>flash.display.Sprite</fxg-base-class>
+
+ <namespaces>
+ <!-- Specify a URI to associate with a manifest of components for use as MXML -->
+ <!-- elements. -->
+ <namespace>
+ <uri>http://ns.adobe.com/mxml/2009</uri>
+ <manifest>mxml-2009-manifest.xml</manifest>
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/Binding/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/Basic/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/Charts/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/Collections/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/Core/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/DragDrop/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/Effects/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/Formatters/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/Graphics/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/svg</uri>
+
+ <manifest>projects/Graphics/src/main/resources/svg-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/HTML/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/html</uri>
+
+ <manifest>projects/HTML/src/main/resources/html-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/Mobile/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+
+ <manifest>projects/Network/src/main/resources/basic-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/html5</uri>
+
+ <manifest>projects/HTML5/src/main/resources/html5-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/flat</uri>
+
+ <manifest>projects/Flat/src/main/resources/flat-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/jquery</uri>
+
+ <manifest>projects/JQuery/src/main/resources/jquery-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/google</uri>
+
+ <manifest>projects/GoogleMaps/src/main/resources/google-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/cordova</uri>
+
+ <manifest>projects/Mobile/src/main/resources/cordova-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/createjs</uri>
+
+ <manifest>projects/CreateJS/src/main/resources/createjs-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/mdl</uri>
+
+ <manifest>projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/express</uri>
+
+ <manifest>projects/Express/src/main/resources/express-manifest.xml</manifest>
+
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/fa</uri>
+
+ <manifest>projects/FontAwesome/src/main/resources/fa-manifest.xml</manifest>
+
+ </namespace>
+ </namespaces>
+
+ <!-- Enable post-link SWF optimization. -->
+ <optimize>true</optimize>
+
+ <!-- Enable trace statement omission. -->
+ <omit-trace-statements>true</omit-trace-statements>
+
+ <!-- Keep the following AS3 metadata in the bytecodes. -->
+ <!-- Warning: For the data binding feature in the Royale framework to work properly, -->
+ <!-- the following metadata must be kept: -->
+ <!-- 1. Bindable -->
+ <!-- 2. Managed -->
+ <!-- 3. ChangeEvent -->
+ <!-- 4. NonCommittingChangeEvent -->
+ <!-- 5. Transient -->
+ <!--
+ <keep-as3-metadata>
+ <name>Bindable</name>
+ <name>Managed</name>
+ <name>ChangeEvent</name>
+ <name>NonCommittingChangeEvent</name>
+ <name>Transient</name>
+ <name>Mixin</name>
+ </keep-as3-metadata>
+ -->
+
+ <!-- Turn on reporting of data binding warnings. For example: Warning: Data binding -->
+ <!-- will not be able to detect assignments to "foo". -->
+ <show-binding-warnings>true</show-binding-warnings>
+
+ <!-- toggle whether warnings generated from unused type selectors are displayed -->
+ <show-unused-type-selector-warnings>true</show-unused-type-selector-warnings>
+
+ <!-- Run the AS3 compiler in strict error checking mode. -->
+ <strict>true</strict>
+
+ <!-- Use the ActionScript 3 class based object model for greater performance and better error reporting. -->
+ <!-- In the class based object model most built-in functions are implemented as fixed methods of classes -->
+ <!-- (-strict is recommended, but not required, for earlier errors) -->
+ <as3>true</as3>
+
+ <!-- Use the ECMAScript edition 3 prototype based object model to allow dynamic overriding of prototype -->
+ <!-- properties. In the prototype based object model built-in functions are implemented as dynamic -->
+ <!-- properties of prototype objects (-strict is allowed, but may result in compiler errors for -->
+ <!-- references to dynamic properties) -->
+ <es>false</es>
+
+ <!-- List of CSS or SWC files to apply as a theme. -->
+ <theme>
+ <filename>themes/Basic/src/basic.css</filename>
+ </theme>
+
+ <!-- Turns on the display of stack traces for uncaught runtime errors. -->
+ <verbose-stacktraces>false</verbose-stacktraces>
+
+ <!-- Defines the AS3 file encoding. -->
+ <!-- not set -->
+ <!--
+ <actionscript-file-encoding></actionscript-file-encoding>
+ -->
+
+ <fonts>
+
+ <!-- Enables advanced anti-aliasing for embedded fonts, which provides greater clarity for small -->
+ <!-- fonts. This setting can be overriden in CSS for specific fonts. -->
+ <!-- NOTE: flash-type has been deprecated. Please use advanced-anti-aliasing <flash-type>true</flash-type> -->
+ <advanced-anti-aliasing>true</advanced-anti-aliasing>
+
+ <!-- The number of embedded font faces that are cached. -->
+ <max-cached-fonts>20</max-cached-fonts>
+
+ <!-- The number of character glyph outlines to cache for each font face. -->
+ <max-glyphs-per-face>1000</max-glyphs-per-face>
+
+ <!-- Defines ranges that can be used across multiple font-face declarations. -->
+ <!-- See flash-unicode-table.xml for more examples. -->
+ <!-- not set -->
+ <!--
+ <languages>
+ <language-range>
+ <lang>englishRange</lang>
+ <range>U+0020-007E</range>
+ </language-range>
+ </languages>
+ -->
+
+ <!-- Compiler font manager classes, in policy resolution order -->
+ <!-- NOTE: For Apache Royale -->
+ <!-- AFEFontManager and CFFFontManager both use proprietary technology. -->
+ <!-- You must install the optional font jars if you wish to use embedded fonts -->
+ <!-- directly or you can use fontswf to precompile the font as a swf. -->
+ <managers>
+ <manager-class>flash.fonts.JREFontManager</manager-class>
+ <manager-class>flash.fonts.BatikFontManager</manager-class>
+ <manager-class>flash.fonts.AFEFontManager</manager-class>
+ <manager-class>flash.fonts.CFFFontManager</manager-class>
+ </managers>
+
+ <!-- File containing cached system font licensing information produced via
+ java -cp mxmlc.jar flex2.tools.FontSnapshot (fontpath)
+ Will default to winFonts.ser on Windows XP and
+ macFonts.ser on Mac OS X, so is commented out by default.
+
+ <local-fonts-snapshot>localFonts.ser</local-fonts-snapshot>
+ -->
+
+ </fonts>
+
+ <!-- Array.toString() format has changed. -->
+ <warn-array-tostring-changes>false</warn-array-tostring-changes>
+
+ <!-- Assignment within conditional. -->
+ <warn-assignment-within-conditional>true</warn-assignment-within-conditional>
+
+ <!-- Possibly invalid Array cast operation. -->
+ <warn-bad-array-cast>true</warn-bad-array-cast>
+
+ <!-- Non-Boolean value used where a Boolean value was expected. -->
+ <warn-bad-bool-assignment>true</warn-bad-bool-assignment>
+
+ <!-- Invalid Date cast operation. -->
+ <warn-bad-date-cast>true</warn-bad-date-cast>
+
+ <!-- Unknown method. -->
+ <warn-bad-es3-type-method>true</warn-bad-es3-type-method>
+
+ <!-- Unknown property. -->
+ <warn-bad-es3-type-prop>true</warn-bad-es3-type-prop>
+
+ <!-- Illogical comparison with NaN. Any comparison operation involving NaN will evaluate to false because NaN != NaN. -->
+ <warn-bad-nan-comparison>true</warn-bad-nan-comparison>
+
+ <!-- Impossible assignment to null. -->
+ <warn-bad-null-assignment>true</warn-bad-null-assignment>
+
+ <!-- Illogical comparison with null. -->
+ <warn-bad-null-comparison>true</warn-bad-null-comparison>
+
+ <!-- Illogical comparison with undefined. Only untyped variables (or variables of type *) can be undefined. -->
+ <warn-bad-undefined-comparison>true</warn-bad-undefined-comparison>
+
+ <!-- Boolean() with no arguments returns false in ActionScript 3.0. Boolean() returned undefined in ActionScript 2.0. -->
+ <warn-boolean-constructor-with-no-args>false</warn-boolean-constructor-with-no-args>
+
+ <!-- __resolve is no longer supported. -->
+ <warn-changes-in-resolve>false</warn-changes-in-resolve>
+
+ <!-- Class is sealed. It cannot have members added to it dynamically. -->
+ <warn-class-is-sealed>true</warn-class-is-sealed>
+
+ <!-- Constant not initialized. -->
+ <warn-const-not-initialized>true</warn-const-not-initialized>
+
+ <!-- Function used in new expression returns a value. Result will be what the -->
+ <!-- function returns, rather than a new instance of that function. -->
+ <warn-constructor-returns-value>false</warn-constructor-returns-value>
+
+ <!-- EventHandler was not added as a listener. -->
+ <warn-deprecated-event-handler-error>false</warn-deprecated-event-handler-error>
+
+ <!-- Unsupported ActionScript 2.0 function. -->
+ <warn-deprecated-function-error>true</warn-deprecated-function-error>
+
+ <!-- Unsupported ActionScript 2.0 property. -->
+ <warn-deprecated-property-error>true</warn-deprecated-property-error>
+
+ <!-- More than one argument by the same name. -->
+ <warn-duplicate-argument-names>true</warn-duplicate-argument-names>
+
+ <!-- Duplicate variable definition -->
+ <warn-duplicate-variable-def>true</warn-duplicate-variable-def>
+
+ <!-- ActionScript 3.0 iterates over an object's properties within a "for x in target" statement in random order. -->
+ <warn-for-var-in-changes>false</warn-for-var-in-changes>
+
+ <!-- Importing a package by the same name as the current class will hide that class identifier in this scope. -->
+ <warn-import-hides-class>true</warn-import-hides-class>
+
+ <!-- Use of the instanceof operator. -->
+ <warn-instance-of-changes>true</warn-instance-of-changes>
+
+ <!-- Internal error in compiler. -->
+ <warn-internal-error>true</warn-internal-error>
+
+ <!-- _level is no longer supported. For more information, see the flash.display package. -->
+ <warn-level-not-supported>true</warn-level-not-supported>
+
+ <!-- Missing namespace declaration (e.g. variable is not defined to be public, private, etc.). -->
+ <warn-missing-namespace-decl>true</warn-missing-namespace-decl>
+
+ <!-- Negative value will become a large positive value when assigned to a uint data type. -->
+ <warn-negative-uint-literal>true</warn-negative-uint-literal>
+
+ <!-- Missing constructor. -->
+ <warn-no-constructor>false</warn-no-constructor>
+
+ <!-- The super() statement was not called within the constructor. -->
+ <warn-no-explicit-super-call-in-constructor>false</warn-no-explicit-super-call-in-constructor>
+
+ <!-- Missing type declaration. -->
+ <warn-no-type-decl>true</warn-no-type-decl>
+
+ <!-- In ActionScript 3.0, white space is ignored and '' returns 0. Number() returns -->
+ <!-- NaN in ActionScript 2.0 when the parameter is '' or contains white space. -->
+ <warn-number-from-string-changes>false</warn-number-from-string-changes>
+
+ <!-- Change in scoping for the this keyword. Class methods extracted from an -->
+ <!-- instance of a class will always resolve this back to that instance. In -->
+ <!-- ActionScript 2.0 this is looked up dynamically based on where the method -->
+ <!-- is invoked from. -->
+ <warn-scoping-change-in-this>false</warn-scoping-change-in-this>
+
+ <!-- Inefficient use of += on a TextField.-->
+ <warn-slow-text-field-addition>true</warn-slow-text-field-addition>
+
+ <!-- Possible missing parentheses. -->
+ <warn-unlikely-function-value>true</warn-unlikely-function-value>
+
+ <!-- Possible usage of the ActionScript 2.0 XML class. -->
+ <warn-xml-class-has-changed>false</warn-xml-class-has-changed>
+
+ </compiler>
+
+ <!-- compute-digest: writes a digest to the catalog.xml of a library. Use this when the library will be used as a
+ cross-domain rsl.-->
+ <!-- compute-digest usage:
+ <compute-digest>boolean</compute-digest>
+ -->
+
+ <!-- remove-unused-rsls: remove RSLs that are not being used by the application-->
+ <remove-unused-rsls>true</remove-unused-rsls>
+
+ <!-- static-link-runtime-shared-libraries: statically link the libraries specified by the -runtime-shared-libraries-path option.-->
+ <static-link-runtime-shared-libraries>true</static-link-runtime-shared-libraries>
+
+ <!-- target-player: specifies the version of the player the application is targeting.
+ Features requiring a later version will not be compiled into the application.
+ The minimum value supported is "9.0.0".-->
+ <!-- target-player usage:
+ <target-player>version</target-player>
+ -->
+
+ <!-- Enables SWFs to access the network. -->
+ <use-network>true</use-network>
+
+ <!-- Metadata added to SWFs via the SWF Metadata tag. -->
+ <metadata>
+ <title>Apache Royale Application</title>
+ <description>http://royale.apache.org/</description>
+ <publisher>Apache Software Foundation</publisher>
+ <creator>unknown</creator>
+ <language>EN</language>
+ </metadata>
+
+</royale-config>
diff --git a/examples/amf/SampleAmfWebApp/pom.xml b/examples/amf/SampleAmfWebApp/pom.xml
index 571e196..2f5a3b0 100644
--- a/examples/amf/SampleAmfWebApp/pom.xml
+++ b/examples/amf/SampleAmfWebApp/pom.xml
@@ -19,19 +19,18 @@
--><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>
- <!--
- this corrupts the packagin and makes an invalid wat
<parent>
<groupId>org.apache.royale.examples</groupId>
- <artifactId>examples-amf-server</artifactId>
+ <artifactId>examples-amf-webapps</artifactId>
<version>0.9.3-SNAPSHOT</version>
</parent>
- -->
- <groupId>org.apache.royale.examples</groupId>
- <artifactId>sampleamfwebapp</artifactId>
+
+ <artifactId>SampleAmfWebApp</artifactId>
<version>0.9.3-SNAPSHOT</version>
<packaging>war</packaging>
+ <name>Apache Royale: Examples: AMF Web Apps: SampleAmfWebApp</name>
+
<properties>
<java.version>1.7</java.version>
</properties>
diff --git a/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/amfsamples/BlazeDSSpringBootApplication.java b/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/amfsamples/BlazeDSSpringBootApplication.java
index af660fd..a637ae0 100644
--- a/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/amfsamples/BlazeDSSpringBootApplication.java
+++ b/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/amfsamples/BlazeDSSpringBootApplication.java
@@ -23,13 +23,32 @@
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.ServletComponentScan;
+import flex.messaging.MessageBroker;
+import flex.messaging.config.ConfigMap;
+import flex.messaging.services.ServiceAdapter;
+import flex.messaging.services.remoting.RemotingDestination;
+
@SpringBootApplication
@ServletComponentScan("org.apache.royale.amfsamples")
public class BlazeDSSpringBootApplication {
public static void main(String[] args) {
+
+ //BlazeDS normal application setup
SpringApplication application = new SpringApplication(BlazeDSSpringBootApplication.class);
application.run(args);
- }
+ // makes "compressedService" uses "compressed-java-object" adapter that performs compression on AMF data
+ // this can be done usgin spring xml with <flex:remoting-service default-adapter-id="the-compression-adapter"/>
+ MessageBroker messageBroker = MessageBroker.getMessageBroker("_messageBroker");
+ RemotingDestination destination = RemotingDestination.getRemotingDestination("_messageBroker", "compressedService");
+
+ ConfigMap serviceAdapterConfig = new ConfigMap();
+ serviceAdapterConfig.addProperty("include-packages", "org.apache.royale.");
+
+ ServiceAdapter serviceAdapter = destination.createAdapter("compressed-java-object");
+ serviceAdapter.initialize("compressed-java-object", serviceAdapterConfig);
+
+ destination.setAdapter(serviceAdapter);
+ }
}
diff --git a/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/amfsamples/services/CompressedService.java b/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/amfsamples/services/CompressedService.java
new file mode 100644
index 0000000..d5ab072
--- /dev/null
+++ b/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/amfsamples/services/CompressedService.java
@@ -0,0 +1,97 @@
+/*
+ *
+ * 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.amfsamples.services;
+
+import org.apache.royale.amfsamples.valueobjects.ServerCustomType;
+import org.apache.royale.amfsamples.valueobjects.Product;
+import org.apache.royale.amfsamples.valueobjects.Taxonomy;
+import org.apache.royale.amfsamples.valueobjects.Zone;
+import org.springframework.flex.remoting.RemotingDestination;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Set;
+import java.util.HashSet;
+
+@Service("compressedService")
+@RemotingDestination
+public class CompressedService {
+
+ public Product getSomeCompressedProduct()
+ {
+ System.out.println("getSomeCompressedProduct called");
+
+ Product product = new Product();
+ product.setName("Some compressed product");
+ product.setDescription("This compressed product is only a test typed value object to test AMF strong types");
+
+ Taxonomy taxonomy = new Taxonomy();
+ taxonomy.setType("a type");
+ taxonomy.setDescription("a taxonomy for this compressed product");
+
+ product.setTaxonomy(taxonomy);
+
+ Set<Zone> zones = new HashSet<Zone>();
+
+ Zone zone1 = new Zone();
+ zone1.setId(1);
+ zone1.setName("Europe");
+ zones.add(zone1);
+
+ Zone zone2 = new Zone();
+ zone2.setId(2);
+ zone2.setName("USA");
+ zones.add(zone2);
+
+ Zone zone3 = new Zone();
+ zone3.setId(3);
+ zone3.setName("Asia");
+ zones.add(zone3);
+
+ /*Object[] zones = new Object[3];
+ for (int i = 0; i < zones.length; i++)
+ {
+ Zone zone = new Zone();
+ zone.setId(i);
+ if (i == 0)
+ zone.setName("Europa");
+ else if (i == 1)
+ zone.setName("USA");
+ else if (i == 2)
+ zone.setName("Asia");
+ zones[i] = zone;
+ }*/
+
+ product.setZones(zones);
+
+ List<CharSequence> list = new ArrayList<CharSequence>();
+ list.add("A");
+ list.add("B");
+ list.add("A");
+ list.add("C");
+ list.add("C");
+ list.add("B");
+ product.setFlavors(new HashSet<CharSequence>(list));
+
+ return product;
+ }
+}
diff --git a/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/amfsamples/services/ExampleService.java b/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/amfsamples/services/ExampleService.java
index 08c0a4c..2ccdce9 100644
--- a/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/amfsamples/services/ExampleService.java
+++ b/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/amfsamples/services/ExampleService.java
@@ -21,9 +21,17 @@
import org.apache.royale.amfsamples.valueobjects.ServerCustomType;
import org.apache.royale.amfsamples.valueobjects.Product;
+import org.apache.royale.amfsamples.valueobjects.Taxonomy;
+import org.apache.royale.amfsamples.valueobjects.Zone;
import org.springframework.flex.remoting.RemotingDestination;
import org.springframework.stereotype.Service;
+import java.util.List;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Set;
+import java.util.HashSet;
+
@Service("exampleService")
@RemotingDestination
public class ExampleService {
@@ -46,6 +54,17 @@
return customTypes;
}
+ public Zone getSomeZone()
+ {
+ System.out.println("getSomeZone called");
+
+ Zone zone = new Zone();
+ zone.setId(1);
+ zone.setName("Europe");
+
+ return zone;
+ }
+
public Product getSomeProduct()
{
System.out.println("getSomeProduct called");
@@ -53,6 +72,55 @@
Product product = new Product();
product.setName("Some product");
product.setDescription("This product is only a test typed value object to test AMF strong types");
+
+ Taxonomy taxonomy = new Taxonomy();
+ taxonomy.setType("a type");
+ taxonomy.setDescription("a taxonomy for this product");
+
+ product.setTaxonomy(taxonomy);
+
+ Set<Zone> zones = new HashSet<Zone>();
+
+ Zone zone1 = new Zone();
+ zone1.setId(1);
+ zone1.setName("Europe");
+ zones.add(zone1);
+
+ Zone zone2 = new Zone();
+ zone2.setId(2);
+ zone2.setName("USA");
+ zones.add(zone2);
+
+ Zone zone3 = new Zone();
+ zone3.setId(3);
+ zone3.setName("Asia");
+ zones.add(zone3);
+
+
+ /*Object[] zones = new Object[3];
+ for (int i = 0; i < zones.length; i++)
+ {
+ Zone zone = new Zone();
+ zone.setId(i);
+ if (i == 0)
+ zone.setName("Europa");
+ else if (i == 1)
+ zone.setName("USA");
+ else if (i == 2)
+ zone.setName("Asia");
+ zones[i] = zone;
+ }*/
+
+ product.setZones(zones);
+
+ List<CharSequence> list = new ArrayList<CharSequence>();
+ list.add("A");
+ list.add("B");
+ list.add("A");
+ list.add("C");
+ list.add("C");
+ list.add("B");
+ product.setFlavors(new HashSet<CharSequence>(list));
return product;
}
diff --git a/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/amfsamples/valueobjects/Product.java b/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/amfsamples/valueobjects/Product.java
index 09d3ddd..49151cb 100644
--- a/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/amfsamples/valueobjects/Product.java
+++ b/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/amfsamples/valueobjects/Product.java
@@ -16,6 +16,9 @@
*/
package org.apache.royale.amfsamples.valueobjects;
+import java.util.Collection;
+import java.util.Set;
+
/**
* The server side object used by AMFConnectionTestService. There is a
* corresponding client side object.
@@ -24,6 +27,8 @@
{
private String name;
private String description;
+ private Taxonomy taxonomy;
+ private Set<Zone> zones;
public Product()
{
@@ -47,6 +52,54 @@
this.description = description;
}
+ public Taxonomy getTaxonomy()
+ {
+ return taxonomy;
+ }
+ public void setTaxonomy(Taxonomy taxonomy)
+ {
+ this.taxonomy = taxonomy;
+ }
+
+ /**
+ * The zone list.
+ *
+ * @return The zone list.
+ */
+ public Set<Zone> getZones() {
+ return zones;
+ }
+
+ /**
+ * The zones list.
+ *
+ * @param zones The zones list.
+ */
+ public void setZones(Set<Zone> zones) {
+ this.zones = zones;
+ }
+
+ private Set<CharSequence> flavors = null;
+
+ /**
+ * The flavors set of names.
+ *
+ * @return The flavors set of names.
+ */
+ public Set<CharSequence> getFlavors() {
+ return flavors;
+ }
+
+ /**
+ * The flavors set of names.
+ *
+ * @param flavors The flavors set of names.
+ */
+ public void setFlavors(Set<CharSequence> flavors) {
+ this.flavors = flavors;
+ }
+
+
public String toString()
{
return "Product -> name: " + name + ", description: " + description;
diff --git a/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/amfsamples/valueobjects/Taxonomy.java b/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/amfsamples/valueobjects/Taxonomy.java
new file mode 100644
index 0000000..716f17f
--- /dev/null
+++ b/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/amfsamples/valueobjects/Taxonomy.java
@@ -0,0 +1,54 @@
+/*
+ * 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.amfsamples.valueobjects;
+
+/**
+ * The server side object used by AMFConnectionTestService. There is a
+ * corresponding client side object.
+ */
+public class Taxonomy
+{
+ private String type;
+ private String description;
+
+ public Taxonomy()
+ {
+ }
+
+ public String getType()
+ {
+ return type;
+ }
+ public void setType(String type)
+ {
+ this.type = type;
+ }
+
+ public String getDescription()
+ {
+ return description;
+ }
+ public void setDescription(String description)
+ {
+ this.description = description;
+ }
+
+ public String toString()
+ {
+ return "Taxonomy -> type: " + type + ", description: " + description;
+ }
+}
diff --git a/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/amfsamples/valueobjects/Zone.java b/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/amfsamples/valueobjects/Zone.java
new file mode 100644
index 0000000..3c21c55
--- /dev/null
+++ b/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/amfsamples/valueobjects/Zone.java
@@ -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.amfsamples.valueobjects;
+
+/**
+ * The server side object used by AMFConnectionTestService. There is a
+ * corresponding client side object.
+ */
+public class Zone
+{
+ private int id;
+ private String name;
+
+ public Zone()
+ {
+ }
+
+ /**
+ * The id of the zone.
+ *
+ * @return The id of the zone.
+ */
+ public int getId() {
+ return id;
+ }
+
+ /**
+ * The id of the zone.
+ *
+ * @param id The id of the zone.
+ */
+ public void setId(int id) {
+ this.id = id;
+ }
+
+ public String getName()
+ {
+ return name;
+ }
+ public void setName(String name)
+ {
+ this.name = name;
+ }
+
+ public String toString()
+ {
+ return "Zone -> id: " + id + ", name: " + name;
+ }
+}
diff --git a/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/net/remoting/amf/adapter/AMFByteArrayCompressor.java b/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/net/remoting/amf/adapter/AMFByteArrayCompressor.java
new file mode 100644
index 0000000..6eba7bb
--- /dev/null
+++ b/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/net/remoting/amf/adapter/AMFByteArrayCompressor.java
@@ -0,0 +1,95 @@
+/*
+ *
+ * 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.net.remoting.amf.adapter;
+
+import java.io.ByteArrayInputStream;
+import java.io.ByteArrayOutputStream;
+import java.io.IOException;
+import java.util.zip.DataFormatException;
+
+import flex.messaging.io.SerializationContext;
+import flex.messaging.io.amf.Amf3Input;
+import flex.messaging.io.amf.Amf3Output;
+
+/**
+ * The {@link AMFByteArrayCompressor} provides methods for AMF to Java compression.
+ */
+public final class AMFByteArrayCompressor {
+
+ /**
+ * Default constructor.
+ */
+ private AMFByteArrayCompressor() {
+
+ }
+
+ /**
+ * Inflate (uncompress) an array of bytes into a Java object.
+ *
+ * @param ba The bytearray
+ * @return The compressed object.
+ * @throws AMFCompressionException if there's an error during the compression.
+ */
+ public static Object inflate(final byte[] ba) throws AMFCompressionException {
+ Object result = null;
+ try {
+ ByteArrayInputStream bais = new ByteArrayInputStream(ByteArrayCompressor.inflate(ba));
+ SerializationContext sc = new SerializationContext();
+ Amf3Input amf3Input = new Amf3Input(sc);
+ amf3Input.setInputStream(bais);
+ result = amf3Input.readObject();
+ amf3Input.close();
+ bais.close();
+ } catch (ClassNotFoundException e) {
+ throw new AMFCompressionException(AMFCompressionError.AMF_COMPRESSION_ERROR);
+ } catch (IOException e) {
+ throw new AMFCompressionException(AMFCompressionError.AMF_COMPRESSION_ERROR);
+ } catch (DataFormatException e) {
+ throw new AMFCompressionException(AMFCompressionError.AMF_COMPRESSION_ERROR);
+ }
+ return result;
+ }
+
+ /**
+ * Deflate (compress) a Java object into a bytearray.
+ *
+ * @param obj The serializable Java object.
+ * @return The uncompressed object.
+ * @throws AMFCompressionException if there's an error during the compression.
+ */
+ public static byte[] deflate(final Object obj) throws AMFCompressionException {
+ byte[] ba = null;
+ try {
+ ByteArrayOutputStream baos = new ByteArrayOutputStream();
+ SerializationContext sc = new SerializationContext();
+ Amf3Output amf3Output = new Amf3Output(sc);
+ amf3Output.setOutputStream(baos);
+ amf3Output.writeObject(obj);
+ amf3Output.flush();
+ amf3Output.close();
+ baos.close();
+ ba = ByteArrayCompressor.deflate(baos.toByteArray());
+ } catch (IOException e) {
+ throw new AMFCompressionException(AMFCompressionError.AMF_COMPRESSION_ERROR);
+ } catch (DataFormatException e) {
+ throw new AMFCompressionException(AMFCompressionError.AMF_COMPRESSION_ERROR);
+ }
+ return ba;
+ }
+}
diff --git a/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/net/remoting/amf/adapter/AMFCompressionError.java b/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/net/remoting/amf/adapter/AMFCompressionError.java
new file mode 100644
index 0000000..f319855
--- /dev/null
+++ b/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/net/remoting/amf/adapter/AMFCompressionError.java
@@ -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.
+ *
+ */
+package org.apache.royale.net.remoting.amf.adapter;
+
+/**
+ * Typed error for signaling an error compressing an ActionScript Object.
+ */
+public enum AMFCompressionError {
+
+ AMF_COMPRESSION_ERROR(10000, "Compression serialization error has occurred");
+
+ private int code;
+ private String message;
+
+ private AMFCompressionError(int code, String message) {
+ this.code = code;
+ this.message = message;
+ }
+
+ public int getCode() {
+ return code;
+ }
+
+
+ public String getMessage() {
+ return message;
+ }
+}
diff --git a/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/net/remoting/amf/adapter/AMFCompressionException.java b/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/net/remoting/amf/adapter/AMFCompressionException.java
new file mode 100644
index 0000000..530153a
--- /dev/null
+++ b/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/net/remoting/amf/adapter/AMFCompressionException.java
@@ -0,0 +1,46 @@
+/*
+ *
+ * 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.net.remoting.amf.adapter;
+
+/**
+ * Thrown to indicate that there was a problem compressing an ActionScript Object.
+ */
+public class AMFCompressionException extends RuntimeException {
+
+ private static final long serialVersionUID = 3373303053093469687L;
+
+ /**
+ * Creates an exception with an error code.
+ *
+ * @param code
+ */
+ public AMFCompressionException(AMFCompressionError compressionError) {
+ super(compressionError.getMessage());
+ }
+
+ /**
+ * Creates an exception with an error code and cause.
+ *
+ * @param code
+ * @param cause
+ */
+ public AMFCompressionException(AMFCompressionError compressionError, Throwable cause) {
+ super(compressionError.getMessage(), cause);
+ }
+}
diff --git a/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/net/remoting/amf/adapter/AMFCompressorAdapter.java b/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/net/remoting/amf/adapter/AMFCompressorAdapter.java
new file mode 100644
index 0000000..4fc682a
--- /dev/null
+++ b/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/net/remoting/amf/adapter/AMFCompressorAdapter.java
@@ -0,0 +1,173 @@
+/*
+ *
+ * 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.net.remoting.amf.adapter;
+
+import java.util.Collection;
+import java.util.List;
+import java.util.Arrays;
+
+import flex.messaging.config.ConfigMap;
+import flex.messaging.messages.Message;
+import flex.messaging.services.remoting.adapters.JavaAdapter;
+
+/**
+ * BlazeDS Java adapter extension for AMF compression of complex data types using
+ * ByteArrays for performance optimization.
+ */
+public class AMFCompressorAdapter extends JavaAdapter
+{
+ private List<String> includePackages;
+ private List<String> includeClasses;
+ private List<String> excludeClasses;
+
+ /*
+ * (non-Javadoc)
+ *
+ * @see flex.messaging.services.remoting.adapters.JavaAdapter#initialize(java.lang.String, flex.messaging.config.ConfigMap)
+ */
+ @Override
+ public void initialize(final String id, final ConfigMap properties) {
+ super.initialize(id, properties);
+
+ includePackages = properties.getPropertyAsList("include-packages", null);
+ includeClasses = properties.getPropertyAsList("include-classes", null);
+ excludeClasses = properties.getPropertyAsList("exclude-classes", null);
+ }
+
+ /*
+ * (non-Javadoc)
+ *
+ * @see flex.messaging.services.remoting.adapters.JavaAdapter#invoke(flex.messaging.messages.Message)
+ */
+ @Override
+ public Object invoke(final Message message) {
+ Object body = message.getBody();
+
+ try {
+ Object[] parameters = (Object[]) body;
+ for (int i = 0; i < parameters.length; i++) {
+ if (parameters[i] instanceof byte[]) {
+ parameters[i] = AMFByteArrayCompressor.inflate((byte[]) parameters[i]);
+ }
+ }
+ message.setBody(parameters);
+ Object result = super.invoke(message);
+ if (isIncludedInCompression(result)) {
+ result = AMFByteArrayCompressor.deflate(result);
+ }
+ return result;
+ } catch (AMFCompressionException e) {
+ throw new AMFCompressionException(AMFCompressionError.AMF_COMPRESSION_ERROR);
+ }
+ }
+
+ /**
+ * Specifies whether an object should be compressed as a bytearray or not.
+ *
+ * @param obj The object to compress.
+ * @return Whether to serialize the object as a bytearray or not.
+ */
+ private boolean isIncludedInCompression(final Object obj) {
+ return obj != null && !isInExcludedClasses(obj) && (isInIncludedPackages(obj) || isInIncludedClasses(obj));
+ }
+
+ /**
+ * Specifies whether an object belongs to the list of included packages or not.
+ *
+ * @param obj The object to compress.
+ * @return Whether the object is in the list of included packages or not.
+ */
+ protected final boolean isInIncludedPackages(final Object obj) {
+ Class<?> objClass = obj.getClass();
+ if (includePackages != null && includePackages.size() > 0) {
+ if (obj instanceof Collection<?> && ((Collection<?>) obj).size() > 0) {
+ objClass = ((Collection<?>) obj).toArray()[0].getClass();
+ }
+ for (String includePackage:includePackages) {
+ if (objClass.getPackage().getName().contains(includePackage)) {
+ return true;
+ }
+ }
+ }
+ return false;
+ }
+
+ /**
+ * Specifies whether an object belongs to the list of included classes or not.
+ *
+ * @param obj The object to inspect.
+ * @return Whether the object is in the list of included classes or not.
+ */
+ protected final boolean isInIncludedClasses(final Object obj) {
+ return includeClasses != null && includeClasses.size() > 0 && includeClasses.contains(obj.getClass().getName());
+ }
+
+ /**
+ * Specifies whether an object belongs to the list of excluded classes or not.
+ *
+ * @param obj The object to inspect.
+ * @return Whether the object is in the list of excluded classes or not.
+ */
+ protected final boolean isInExcludedClasses(final Object obj) {
+ return excludeClasses != null && excludeClasses.size() > 0 && excludeClasses.contains(obj.getClass().getName());
+ }
+
+ /**
+ * @return The packages that shall be compressed.
+ */
+ public List<String> getIncludePackages() {
+ return includePackages;
+ }
+
+ /**
+ * @param newIncludePackages The packages that shall be compressed.
+ */
+ public void setIncludePackages(final List<String> newIncludePackages) {
+ includePackages = newIncludePackages;
+ }
+
+ /**
+ * @return The classes that shall be compressed.
+ */
+ public List<String> getIncludeClasses() {
+ return includeClasses;
+ }
+
+ /**
+ * @param newIncludeClasses The classes that shall be compressed.
+ */
+ public void setIncludeClasses(final List<String> newIncludeClasses) {
+ includeClasses = newIncludeClasses;
+ }
+
+ /**
+ * @return The classes that shall not be compressed.
+ */
+ public List<String> getExcludeClasses() {
+ return excludeClasses;
+ }
+
+ /**
+ * @param newExcludeClasses
+ * The classes that shall not be compressed.
+ */
+ public void setExcludeClasses(final List<String> newExcludeClasses) {
+ includeClasses = newExcludeClasses;
+ }
+}
diff --git a/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/net/remoting/amf/adapter/ByteArrayCompressor.java b/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/net/remoting/amf/adapter/ByteArrayCompressor.java
new file mode 100644
index 0000000..024ffb0
--- /dev/null
+++ b/examples/amf/SampleAmfWebApp/src/main/java/org/apache/royale/net/remoting/amf/adapter/ByteArrayCompressor.java
@@ -0,0 +1,81 @@
+/*
+ *
+ * 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.net.remoting.amf.adapter;
+
+import java.io.ByteArrayOutputStream;
+import java.io.IOException;
+import java.util.zip.DataFormatException;
+import java.util.zip.Deflater;
+import java.util.zip.Inflater;
+
+/**
+ * The {@link ByteArrayCompressor} class provides methods for bytearray compression.
+ */
+public final class ByteArrayCompressor {
+
+ /**
+ * Default constructor.
+ */
+ private ByteArrayCompressor() {
+ }
+
+ /**
+ * Compresses a bytearray.
+ *
+ * @param ba The source bytearray.
+ * @return A compressed bytearray.
+ * @throws IOException If there is an IO error.
+ * @throws DataFormatException If the data cannot be uncompressed.
+ */
+ public static byte[] deflate(final byte[] ba) throws IOException, DataFormatException {
+ Deflater deflater = new Deflater();
+ deflater.setInput(ba);
+ deflater.finish();
+ ByteArrayOutputStream baos = new ByteArrayOutputStream();
+ final int overflow = 128;
+ byte[] defBa = new byte[ba.length + overflow];
+ while (!deflater.finished()) {
+ int count = deflater.deflate(defBa);
+ baos.write(defBa, 0, count);
+ }
+ baos.close();
+ return baos.toByteArray();
+ }
+
+ /**
+ * Uncompresses an previously compressed bytearray.
+ *
+ * @param ba The compressed bytearray.
+ * @return An uncompressed bytearray.
+ * @throws IOException If there is an IO error.
+ * @throws DataFormatException If the data cannot be uncompressed.
+ */
+ public static byte[] inflate(final byte[] ba) throws IOException, DataFormatException {
+ Inflater inflater = new Inflater();
+ inflater.setInput(ba);
+ ByteArrayOutputStream baos = new ByteArrayOutputStream();
+ byte[] infBa = new byte[ba.length * 2];
+ while (!inflater.finished()) {
+ int count = inflater.inflate(infBa);
+ baos.write(infBa, 0, count);
+ }
+ baos.close();
+ return baos.toByteArray();
+ }
+}
diff --git a/examples/amf/SampleAmfWebApp/src/main/resources/META-INF/flex/services-config.xml b/examples/amf/SampleAmfWebApp/src/main/resources/META-INF/flex/services-config.xml
index 5b76e21..a168757 100644
--- a/examples/amf/SampleAmfWebApp/src/main/resources/META-INF/flex/services-config.xml
+++ b/examples/amf/SampleAmfWebApp/src/main/resources/META-INF/flex/services-config.xml
@@ -25,6 +25,9 @@
id="java-object"
class="flex.messaging.services.remoting.adapters.JavaAdapter"
default="true"/>
+ <adapter-definition
+ id="compressed-java-object"
+ class="org.apache.royale.net.remoting.amf.adapter.AMFCompressorAdapter"/>
</adapters>
<default-channels>
<channel ref="websocketAmf"/>
@@ -41,6 +44,9 @@
<properties>
<server-to-client-heartbeat-millis>5000</server-to-client-heartbeat-millis>
<add-no-cache-headers>true</add-no-cache-headers>
+ <serialization>
+ <enable-small-messages>false</enable-small-messages>
+ </serialization>
</properties>
</channel-definition>
<channel-definition id="longPollingAmf" class="mx.messaging.channels.AMFChannel">
diff --git a/examples/royale/RemoteObjectAMFTest/src/main/resources/WEB-INF/web.xml b/examples/amf/SampleAmfWebApp/src/main/webapp/WEB-INF/web.xml
similarity index 97%
rename from examples/royale/RemoteObjectAMFTest/src/main/resources/WEB-INF/web.xml
rename to examples/amf/SampleAmfWebApp/src/main/webapp/WEB-INF/web.xml
index 6f839bd..9c3e3b6 100644
--- a/examples/royale/RemoteObjectAMFTest/src/main/resources/WEB-INF/web.xml
+++ b/examples/amf/SampleAmfWebApp/src/main/webapp/WEB-INF/web.xml
@@ -22,7 +22,7 @@
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0">
- <display-name>RemoteObjectAMFTest</display-name>
+ <display-name>SampleAmfWebApp</display-name>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.html</url-pattern>
diff --git a/examples/amf/pom.xml b/examples/amf/pom.xml
index 4257531..4c38f6c 100644
--- a/examples/amf/pom.xml
+++ b/examples/amf/pom.xml
@@ -26,14 +26,59 @@
<version>0.9.3-SNAPSHOT</version>
</parent>
- <artifactId>examples-amf-server</artifactId>
+ <artifactId>examples-amf-webapps</artifactId>
<version>0.9.3-SNAPSHOT</version>
<packaging>pom</packaging>
- <name>Apache Royale: Examples: AMF Server</name>
+ <name>Apache Royale: Examples: AMF Web Apps</name>
+
+ <properties combine.self="override">
+
+ </properties>
<modules>
<module>SampleAmfWebApp</module>
</modules>
-</project>
+ <build>
+ <sourceDirectory>src/main/java</sourceDirectory>
+ <resources combine.self="override">
+
+ </resources>
+ <pluginManagement>
+ <plugins>
+ <plugin>
+ <inherited>false</inherited>
+ <groupId>org.apache.maven.plugins</groupId>
+ <artifactId>maven-resources-plugin</artifactId>
+ <version>3.0.1</version>
+ <configuration combine.self="override">
+
+ </configuration>
+ </plugin>
+ </plugins>
+ </pluginManagement>
+ <plugins>
+ <!-- Makes it possible to run the example directly by running 'mvn tomcat7:run' -->
+ <plugin>
+ <inherited>false</inherited>
+ <groupId>org.apache.tomcat.maven</groupId>
+ <artifactId>tomcat7-maven-plugin</artifactId>
+ <version>2.2</version>
+ <configuration combine.self="override">
+
+ </configuration>
+ </plugin>
+ </plugins>
+ </build>
+
+ <profiles>
+ <profile>
+ <id>release</id>
+
+ <properties combine.self="override">
+
+ </properties>
+ </profile>
+ </profiles>
+</project>
\ No newline at end of file
diff --git a/examples/blog/BE0001_Hello_World/BE0001_Hello_World.as3proj b/examples/blog/BE0001_Hello_World/BE0001_Hello_World.as3proj
new file mode 100644
index 0000000..a3d20b1
--- /dev/null
+++ b/examples/blog/BE0001_Hello_World/BE0001_Hello_World.as3proj
@@ -0,0 +1,95 @@
+<?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>
+ <output>
+ <movie disabled="False"/>
+ <movie path="bin-debug/BE0001_Hello_World.swf"/>
+ <movie version="11"/>
+ <movie input=""/>
+ <movie width="800"/>
+ <movie height="600"/>
+ <movie fps="60"/>
+ <movie background="#FFFFFF"/>
+ <movie platform="Flash Player"/>
+ </output>
+ <!-- Other classes to be compiled into your SWF -->
+ <classpaths>
+ <class path="src/main/royale"/>
+ </classpaths>
+ <moonshineResourcePaths></moonshineResourcePaths>
+ <moonshineNativeExtensionPaths></moonshineNativeExtensionPaths>
+ <build>
+ <option useResourceBundleMetadata="True"/>
+ <option showBindingWarnings="True"/>
+ <option warnings="True"/>
+ <option es="False"/>
+ <option verboseStackTraces="False"/>
+ <option additional="-theme=${royalelib}/themes/Basic/src/basic.css"/>
+ <option loadConfig=""/>
+ <option linkReport=""/>
+ <option benchmark="False"/>
+ <option optimize="False"/>
+ <option showActionScriptWarnings="True"/>
+ <option staticLinkRSL="False"/>
+ <option locale=""/>
+ <option compilerConstants=""/>
+ <option showDeprecationWarnings="True"/>
+ <option antBuildPath="build/build.xml"/>
+ <option showUnusedTypeSelectorWarnings="True"/>
+ <option customSDK=""/>
+ <option strict="True"/>
+ <option accessible="False"/>
+ <option useNetwork="True"/>
+ <option allowSourcePathOverlap="False"/>
+ </build>
+ <includeLibraries></includeLibraries>
+ <libraryPaths></libraryPaths>
+ <externalLibraryPaths></externalLibraryPaths>
+ <rslPaths></rslPaths>
+ <intrinsics>
+ <element path="Library/AS3/frameworks/Flex4"/>
+ <element path="Library\AS3\frameworks\Flex4"/>
+ </intrinsics>
+ <library></library>
+ <compileTargets>
+ <compile path="src/main/royale/BE0001_Hello_World.mxml"/>
+ </compileTargets>
+ <hiddenPaths></hiddenPaths>
+ <preBuildCommand>null</preBuildCommand>
+ <postBuildCommand alwaysRun="False">null</postBuildCommand>
+ <options>
+ <option testMovie=""/>
+ <option showHiddenPaths="False"/>
+ <option testMovieCommand=""/>
+ <option defaultBuildTargets=""/>
+ <option isPrimeFacesVisualEditor="False"/>
+ </options>
+ <moonshineRunCustomization>
+ <option deviceSimulator="null"/>
+ <option targetPlatform="2"/>
+ <option launchMethod="Simulator"/>
+ <option urlToLaunch=""/>
+ <option projectType="2"/>
+ <deviceSimulator>null</deviceSimulator>
+ <certAndroid>null</certAndroid>
+ <certIos>null</certIos>
+ <certIosProvisioning>null</certIosProvisioning>
+ </moonshineRunCustomization>
+</project>
\ No newline at end of file
diff --git a/examples/blog/BE0001_Hello_World/README.txt b/examples/blog/BE0001_Hello_World/README.txt
index 6077132..b58ee3b 100644
--- a/examples/blog/BE0001_Hello_World/README.txt
+++ b/examples/blog/BE0001_Hello_World/README.txt
@@ -19,14 +19,10 @@
DESCRIPTION
-Hello World
+Creating a Hello World in Apache Royale
-In this example you can see the use of the following MXML tags:
+This is the classical Hello World code snippet done in Apache Royale with just MXML
-- Application: Is the main tag in your application. All content in Apache Royale is added inside this tag.
-- SimpleCSSValuesImpl: This class implements a minimal set of CSS rules that is sufficient for most applications.
-- View: This is the class for most views in a Royale application.
-- Label: Implements the basic control for show a label with text.
+Source code of the code exposed in the following Apache Royale Blog Example post:
http://royale.apache.org/creating-a-hello-world-in-apache-royale/
-
diff --git a/examples/blog/BE0001_Hello_World/pom.xml b/examples/blog/BE0001_Hello_World/pom.xml
index 69d3799..c3fc966 100644
--- a/examples/blog/BE0001_Hello_World/pom.xml
+++ b/examples/blog/BE0001_Hello_World/pom.xml
@@ -57,6 +57,21 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
<artifactId>BasicTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
diff --git a/examples/blog/BE0002_Using_Jewel_Alert_Control/BE0002_Using_Jewel_Alert_Control.as3proj b/examples/blog/BE0002_Using_Jewel_Alert_Control/BE0002_Using_Jewel_Alert_Control.as3proj
new file mode 100644
index 0000000..e4fac60
--- /dev/null
+++ b/examples/blog/BE0002_Using_Jewel_Alert_Control/BE0002_Using_Jewel_Alert_Control.as3proj
@@ -0,0 +1,95 @@
+<?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>
+ <output>
+ <movie disabled="False"/>
+ <movie path="bin-debug/BE0002_Using_Jewel_Alert_Control.swf"/>
+ <movie version="11"/>
+ <movie input=""/>
+ <movie width="800"/>
+ <movie height="600"/>
+ <movie fps="60"/>
+ <movie background="#FFFFFF"/>
+ <movie platform="Flash Player"/>
+ </output>
+ <!-- Other classes to be compiled into your SWF -->
+ <classpaths>
+ <class path="src/main/royale"/>
+ </classpaths>
+ <moonshineResourcePaths></moonshineResourcePaths>
+ <moonshineNativeExtensionPaths></moonshineNativeExtensionPaths>
+ <build>
+ <option useResourceBundleMetadata="True"/>
+ <option showBindingWarnings="True"/>
+ <option warnings="True"/>
+ <option es="False"/>
+ <option verboseStackTraces="False"/>
+ <option additional="-theme=${royalelib}/themes/Jewel-Light-NoFlat-Emphasized-Red-Theme/src/main/resources/defaults.css -html-template=src/main/resources/jewel-example-index-template.html"/>
+ <option loadConfig=""/>
+ <option linkReport=""/>
+ <option benchmark="False"/>
+ <option optimize="False"/>
+ <option showActionScriptWarnings="True"/>
+ <option staticLinkRSL="False"/>
+ <option locale=""/>
+ <option compilerConstants=""/>
+ <option showDeprecationWarnings="True"/>
+ <option antBuildPath="build/build.xml"/>
+ <option showUnusedTypeSelectorWarnings="True"/>
+ <option customSDK=""/>
+ <option strict="True"/>
+ <option accessible="False"/>
+ <option useNetwork="True"/>
+ <option allowSourcePathOverlap="False"/>
+ </build>
+ <includeLibraries></includeLibraries>
+ <libraryPaths></libraryPaths>
+ <externalLibraryPaths></externalLibraryPaths>
+ <rslPaths></rslPaths>
+ <intrinsics>
+ <element path="Library/AS3/frameworks/Flex4"/>
+ <element path="Library\AS3\frameworks\Flex4"/>
+ </intrinsics>
+ <library></library>
+ <compileTargets>
+ <compile path="src/main/royale/BE0002_Using_Jewel_Alert_Control.mxml"/>
+ </compileTargets>
+ <hiddenPaths></hiddenPaths>
+ <preBuildCommand>null</preBuildCommand>
+ <postBuildCommand alwaysRun="False">null</postBuildCommand>
+ <options>
+ <option testMovie=""/>
+ <option showHiddenPaths="False"/>
+ <option testMovieCommand=""/>
+ <option defaultBuildTargets=""/>
+ <option isPrimeFacesVisualEditor="False"/>
+ </options>
+ <moonshineRunCustomization>
+ <option deviceSimulator="null"/>
+ <option targetPlatform="2"/>
+ <option launchMethod="Simulator"/>
+ <option urlToLaunch=""/>
+ <option projectType="2"/>
+ <deviceSimulator>null</deviceSimulator>
+ <certAndroid>null</certAndroid>
+ <certIos>null</certIos>
+ <certIosProvisioning>null</certIosProvisioning>
+ </moonshineRunCustomization>
+</project>
\ No newline at end of file
diff --git a/examples/blog/BE0002_Using_Jewel_Alert_Control/README.txt b/examples/blog/BE0002_Using_Jewel_Alert_Control/README.txt
index e956ac3..303e3f8 100644
--- a/examples/blog/BE0002_Using_Jewel_Alert_Control/README.txt
+++ b/examples/blog/BE0002_Using_Jewel_Alert_Control/README.txt
@@ -21,10 +21,8 @@
Using the Jewel Alert Control
-The following code shows the basic method for displaying an Alert dialog in a Royale application. It uses the new Jewel UI set that supports themes that will be available in the forthcoming 0.9.3 release. In the meanwhile you can find it in the develop branch.
+This basic example shows how to display an Alert dialog in a Royale application.
-In this example, the Jewel button adds a click handler that will be in charge of showing the Alert control. When the user clicks the button the Alert.show() static method is called. You can add a custom message, a custom title and choose which buttons will be created for that instance of the Alert.
-Finally, the Alert instance adds an event listener to manage the alert response when the dialog is closed. In this example we’re changing the label of the button according to the button the user clicks in the Alert.
+Source code of the code exposed in the following Apache Royale Blog Example post:
http://royale.apache.org/using-jewel-alert-control/
-
diff --git a/examples/blog/BE0002_Using_Jewel_Alert_Control/asconfig.json b/examples/blog/BE0002_Using_Jewel_Alert_Control/asconfig.json
index 4b6259e..e328790 100644
--- a/examples/blog/BE0002_Using_Jewel_Alert_Control/asconfig.json
+++ b/examples/blog/BE0002_Using_Jewel_Alert_Control/asconfig.json
@@ -20,12 +20,14 @@
"config": "royale",
"compilerOptions": {
"debug": false,
- "targets": ["JSRoyale","SWF"],
- "source-map": true
+ "targets": ["JSRoyale"],
+ "source-map": true,
+ "html-template": "src/main/resources/jewel-example-index-template.html",
+ "theme": "${royalelib}/themes/Jewel-Light-NoFlat-Emphasized-Red-Theme/src/main/resources/defaults.css"
},
"additionalOptions": "-remove-circulars -js-output-optimization=skipAsCoercions",
"files":
[
- "src/main/royale/App.mxml"
+ "src/main/royale/BE0002_Using_Jewel_Alert_Control.mxml"
]
}
diff --git a/examples/blog/BE0002_Using_Jewel_Alert_Control/pom.xml b/examples/blog/BE0002_Using_Jewel_Alert_Control/pom.xml
index 82733ad..299be5a 100644
--- a/examples/blog/BE0002_Using_Jewel_Alert_Control/pom.xml
+++ b/examples/blog/BE0002_Using_Jewel_Alert_Control/pom.xml
@@ -73,34 +73,6 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
- <artifactId>Basic</artifactId>
- <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.3-SNAPSHOT</version>
- <type>swc</type>
- <classifier>js</classifier>
- </dependency>
- <dependency>
- <groupId>org.apache.royale.framework</groupId>
- <artifactId>HTML</artifactId>
- <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.3-SNAPSHOT</version>
- <type>swc</type>
- <classifier>js</classifier>
- </dependency>
- <dependency>
- <groupId>org.apache.royale.framework</groupId>
<artifactId>Jewel-Light-NoFlat-Primary-Topaz-Theme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
diff --git a/examples/blog/BE0002_Using_Jewel_Alert_Control/src/main/royale/BE0002_Using_Jewel_Alert_Control.mxml b/examples/blog/BE0002_Using_Jewel_Alert_Control/src/main/royale/BE0002_Using_Jewel_Alert_Control.mxml
index 67283c8..a5094a5 100644
--- a/examples/blog/BE0002_Using_Jewel_Alert_Control/src/main/royale/BE0002_Using_Jewel_Alert_Control.mxml
+++ b/examples/blog/BE0002_Using_Jewel_Alert_Control/src/main/royale/BE0002_Using_Jewel_Alert_Control.mxml
@@ -18,8 +18,7 @@
-->
<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:j="library://ns.apache.org/royale/jewel">
<fx:Style source="../../main/resources/styles.css"/>
@@ -27,7 +26,6 @@
<![CDATA[
import org.apache.royale.jewel.Alert;
import org.apache.royale.events.CloseEvent;
- import org.apache.royale.events.MouseEvent;
// Event handler function uses a static method to show
// a pop-up window with the title, message, and requested buttons.
@@ -46,10 +44,10 @@
]]>
</fx:Script>
- <js:initialView>
- <js:View>
- <j:TextButton id="button" text="Click Me" primary="true" click="clickHandler(event)"/>
- </js:View>
- </js:initialView>
+ <j:initialView>
+ <j:View>
+ <j:Button id="button" text="Click Me" emphasis="primary" click="clickHandler(event)"/>
+ </j:View>
+ </j:initialView>
</j:Application>
\ No newline at end of file
diff --git a/examples/blog/BE0003_Using_Jewel_Slider_Control/BE0003_Using_Jewel_Slider_Control.as3proj b/examples/blog/BE0003_Using_Jewel_Slider_Control/BE0003_Using_Jewel_Slider_Control.as3proj
new file mode 100644
index 0000000..6f26e88
--- /dev/null
+++ b/examples/blog/BE0003_Using_Jewel_Slider_Control/BE0003_Using_Jewel_Slider_Control.as3proj
@@ -0,0 +1,95 @@
+<?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>
+ <output>
+ <movie disabled="False"/>
+ <movie path="bin-debug/BE0003_Using_Jewel_Slider_Control.swf"/>
+ <movie version="11"/>
+ <movie input=""/>
+ <movie width="800"/>
+ <movie height="600"/>
+ <movie fps="60"/>
+ <movie background="#FFFFFF"/>
+ <movie platform="Flash Player"/>
+ </output>
+ <!-- Other classes to be compiled into your SWF -->
+ <classpaths>
+ <class path="src/main/royale"/>
+ </classpaths>
+ <moonshineResourcePaths></moonshineResourcePaths>
+ <moonshineNativeExtensionPaths></moonshineNativeExtensionPaths>
+ <build>
+ <option useResourceBundleMetadata="True"/>
+ <option showBindingWarnings="True"/>
+ <option warnings="True"/>
+ <option es="False"/>
+ <option verboseStackTraces="False"/>
+ <option additional="-theme=${royalelib}/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css,${royalelib}/themes/Jewel-Light-NoFlat-Secondary-Sapphire-Theme/src/main/resources/defaults.css,${royalelib}/themes/Jewel-Light-NoFlat-Emphasized-Red-Theme/src/main/resources/defaults.css -html-template=src/main/resources/jewel-example-index-template.html"/>
+ <option loadConfig=""/>
+ <option linkReport=""/>
+ <option benchmark="False"/>
+ <option optimize="False"/>
+ <option showActionScriptWarnings="True"/>
+ <option staticLinkRSL="False"/>
+ <option locale=""/>
+ <option compilerConstants=""/>
+ <option showDeprecationWarnings="True"/>
+ <option antBuildPath="build/build.xml"/>
+ <option showUnusedTypeSelectorWarnings="True"/>
+ <option customSDK=""/>
+ <option strict="True"/>
+ <option accessible="False"/>
+ <option useNetwork="True"/>
+ <option allowSourcePathOverlap="False"/>
+ </build>
+ <includeLibraries></includeLibraries>
+ <libraryPaths></libraryPaths>
+ <externalLibraryPaths></externalLibraryPaths>
+ <rslPaths></rslPaths>
+ <intrinsics>
+ <element path="Library/AS3/frameworks/Flex4"/>
+ <element path="Library\AS3\frameworks\Flex4"/>
+ </intrinsics>
+ <library></library>
+ <compileTargets>
+ <compile path="src/main/royale/BE0003_Using_Jewel_Slider_Control.mxml"/>
+ </compileTargets>
+ <hiddenPaths></hiddenPaths>
+ <preBuildCommand>null</preBuildCommand>
+ <postBuildCommand alwaysRun="False">null</postBuildCommand>
+ <options>
+ <option testMovie=""/>
+ <option showHiddenPaths="False"/>
+ <option testMovieCommand=""/>
+ <option defaultBuildTargets=""/>
+ <option isPrimeFacesVisualEditor="False"/>
+ </options>
+ <moonshineRunCustomization>
+ <option deviceSimulator="null"/>
+ <option targetPlatform="2"/>
+ <option launchMethod="Simulator"/>
+ <option urlToLaunch=""/>
+ <option projectType="2"/>
+ <deviceSimulator>null</deviceSimulator>
+ <certAndroid>null</certAndroid>
+ <certIos>null</certIos>
+ <certIosProvisioning>null</certIosProvisioning>
+ </moonshineRunCustomization>
+</project>
\ No newline at end of file
diff --git a/examples/blog/BE0003_Using_Jewel_Slider_Control/README.txt b/examples/blog/BE0003_Using_Jewel_Slider_Control/README.txt
index 656162a..56f3f90 100644
--- a/examples/blog/BE0003_Using_Jewel_Slider_Control/README.txt
+++ b/examples/blog/BE0003_Using_Jewel_Slider_Control/README.txt
@@ -21,10 +21,8 @@
Using the Jewel Slider Control
-In this example, you can push Jewel button to set up sliders values. By doing this ValueChangeEvent.VALUE_CHANGE will be fired calling “onValueChange” event handler and setting width, height and text in the Button.
+See the basic use of the Jewel Slider control in a Royale application.
-On the other hand, you can drag each Slider to change width and height in the Button, and as value in changing the “onValueChange” call back will be called continuously as you drag.
+Source code of the code exposed in the following Apache Royale Blog Example post:
-You can click in the track at any place for the same effect. And if you needed you have available “input” and “change” events handlers in Slider. The first fires each time user moves the slider thumb from one position to another the second fires when Slider ends its change from one position to another.
http://royale.apache.org/using-the-jewel-slider-control/
-
diff --git a/examples/blog/BE0003_Using_Jewel_Slider_Control/pom.xml b/examples/blog/BE0003_Using_Jewel_Slider_Control/pom.xml
index cde1bbd..f3dad86 100644
--- a/examples/blog/BE0003_Using_Jewel_Slider_Control/pom.xml
+++ b/examples/blog/BE0003_Using_Jewel_Slider_Control/pom.xml
@@ -73,34 +73,6 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
- <artifactId>Basic</artifactId>
- <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.3-SNAPSHOT</version>
- <type>swc</type>
- <classifier>js</classifier>
- </dependency>
- <dependency>
- <groupId>org.apache.royale.framework</groupId>
- <artifactId>HTML</artifactId>
- <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.3-SNAPSHOT</version>
- <type>swc</type>
- <classifier>js</classifier>
- </dependency>
- <dependency>
- <groupId>org.apache.royale.framework</groupId>
<artifactId>Jewel-Light-NoFlat-Primary-Topaz-Theme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
diff --git a/examples/blog/BE0003_Using_Jewel_Slider_Control/src/main/royale/BE0003_Using_Jewel_Slider_Control.mxml b/examples/blog/BE0003_Using_Jewel_Slider_Control/src/main/royale/BE0003_Using_Jewel_Slider_Control.mxml
index 86f551e..1f0ce3c 100644
--- a/examples/blog/BE0003_Using_Jewel_Slider_Control/src/main/royale/BE0003_Using_Jewel_Slider_Control.mxml
+++ b/examples/blog/BE0003_Using_Jewel_Slider_Control/src/main/royale/BE0003_Using_Jewel_Slider_Control.mxml
@@ -18,11 +18,8 @@
-->
<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:j="library://ns.apache.org/royale/jewel">
- <fx:Style source="../../main/resources/styles.css"/>
-
<fx:Script>
<![CDATA[
@@ -41,11 +38,11 @@
]]>
</fx:Script>
- <js:initialView>
- <js:View>
- <js:beads>
- <j:VerticalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
+ <j:initialView>
+ <j:View>
+ <j:beads>
+ <j:VerticalLayout gap="3"/>
+ </j:beads>
<j:Slider id="slider_w" width="250" value="250" minimum="100" maximum="500"
valueChange="onValueChange(event)"/>
@@ -53,9 +50,9 @@
<j:Slider id="slider_h" width="250" value="80" minimum="40" maximum="300"
valueChange="onValueChange(event)"/>
- <j:TextButton id="button" text="Slider to 400x200" width="250" height="80" secondary="true"
+ <j:Button id="button" text="Slider to 400x200" width="250" height="80" emphasis="secondary"
click="clickHandler(event)"/>
- </js:View>
- </js:initialView>
+ </j:View>
+ </j:initialView>
</j:Application>
\ No newline at end of file
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/BE0004_Adding_an_item_to_a_Jewel_List.as3proj b/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/BE0004_Adding_an_item_to_a_Jewel_List.as3proj
new file mode 100644
index 0000000..e77e678
--- /dev/null
+++ b/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/BE0004_Adding_an_item_to_a_Jewel_List.as3proj
@@ -0,0 +1,95 @@
+<?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>
+ <output>
+ <movie disabled="False"/>
+ <movie path="bin-debug/BE0004_Adding_an_item_to_a_Jewel_List.swf"/>
+ <movie version="11"/>
+ <movie input=""/>
+ <movie width="800"/>
+ <movie height="600"/>
+ <movie fps="60"/>
+ <movie background="#FFFFFF"/>
+ <movie platform="Flash Player"/>
+ </output>
+ <!-- Other classes to be compiled into your SWF -->
+ <classpaths>
+ <class path="src/main/royale"/>
+ </classpaths>
+ <moonshineResourcePaths></moonshineResourcePaths>
+ <moonshineNativeExtensionPaths></moonshineNativeExtensionPaths>
+ <build>
+ <option useResourceBundleMetadata="True"/>
+ <option showBindingWarnings="True"/>
+ <option warnings="True"/>
+ <option es="False"/>
+ <option verboseStackTraces="False"/>
+ <option additional="-theme=${royalelib}/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css -html-template=src/main/resources/jewel-example-index-template.html"/>
+ <option loadConfig=""/>
+ <option linkReport=""/>
+ <option benchmark="False"/>
+ <option optimize="False"/>
+ <option showActionScriptWarnings="True"/>
+ <option staticLinkRSL="False"/>
+ <option locale=""/>
+ <option compilerConstants=""/>
+ <option showDeprecationWarnings="True"/>
+ <option antBuildPath="build/build.xml"/>
+ <option showUnusedTypeSelectorWarnings="True"/>
+ <option customSDK=""/>
+ <option strict="True"/>
+ <option accessible="False"/>
+ <option useNetwork="True"/>
+ <option allowSourcePathOverlap="False"/>
+ </build>
+ <includeLibraries></includeLibraries>
+ <libraryPaths></libraryPaths>
+ <externalLibraryPaths></externalLibraryPaths>
+ <rslPaths></rslPaths>
+ <intrinsics>
+ <element path="Library/AS3/frameworks/Flex4"/>
+ <element path="Library\AS3\frameworks\Flex4"/>
+ </intrinsics>
+ <library></library>
+ <compileTargets>
+ <compile path="src/main/royale/BE0004_Adding_an_item_to_a_Jewel_List.mxml"/>
+ </compileTargets>
+ <hiddenPaths></hiddenPaths>
+ <preBuildCommand>null</preBuildCommand>
+ <postBuildCommand alwaysRun="False">null</postBuildCommand>
+ <options>
+ <option testMovie=""/>
+ <option showHiddenPaths="False"/>
+ <option testMovieCommand=""/>
+ <option defaultBuildTargets=""/>
+ <option isPrimeFacesVisualEditor="False"/>
+ </options>
+ <moonshineRunCustomization>
+ <option deviceSimulator="null"/>
+ <option targetPlatform="2"/>
+ <option launchMethod="Simulator"/>
+ <option urlToLaunch=""/>
+ <option projectType="2"/>
+ <deviceSimulator>null</deviceSimulator>
+ <certAndroid>null</certAndroid>
+ <certIos>null</certIos>
+ <certIosProvisioning>null</certIosProvisioning>
+ </moonshineRunCustomization>
+</project>
\ No newline at end of file
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/README.txt b/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/README.txt
index 96e8810..5961578 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/README.txt
+++ b/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/README.txt
@@ -22,8 +22,7 @@
Adding an item to a Jewel List
In this example we'll cover how to set up a Jewel List control that shows a list of basic string data in a Royale application, then will add and item to the list.
----
+Source code of the code exposed in the following Apache Royale Blog Example post:
http://royale.apache.org/adding-an-item-to-a-jewel-list
-
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/pom.xml b/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/pom.xml
index 6040387..5a7bd9f 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/pom.xml
+++ b/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/pom.xml
@@ -73,20 +73,6 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
- <artifactId>Basic</artifactId>
- <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.3-SNAPSHOT</version>
- <type>swc</type>
- <classifier>js</classifier>
- </dependency>
- <dependency>
- <groupId>org.apache.royale.framework</groupId>
<artifactId>HTML</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/royale/BE0004_Adding_an_item_to_a_Jewel_List.mxml b/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/royale/BE0004_Adding_an_item_to_a_Jewel_List.mxml
index a13f67c..8fe8349 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/royale/BE0004_Adding_an_item_to_a_Jewel_List.mxml
+++ b/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/royale/BE0004_Adding_an_item_to_a_Jewel_List.mxml
@@ -19,11 +19,9 @@
-->
<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:j="library://ns.apache.org/royale/jewel"
- xmlns:html="library://ns.apache.org/royale/html"
- xmlns:js="library://ns.apache.org/royale/basic">
+ xmlns:js="library://ns.apache.org/royale/basic"
+ xmlns:html="library://ns.apache.org/royale/html">
- <fx:Style source="../../main/resources/styles.css"/>
-
<fx:Script>
<![CDATA[
private function changeHandler(event:Event):void {
@@ -36,12 +34,12 @@
]]>
</fx:Script>
- <js:initialView>
- <js:View>
-
- <js:beads>
- <j:VerticalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
+ <j:initialView>
+ <j:View>
+ <j:beads>
+ <j:VerticalLayout gap="3"/>
+ </j:beads>
+
<html:H3 text="Avengers Character List"/>
<j:List id="list" width="200" height="300" change="changeHandler(event)">
@@ -52,8 +50,8 @@
<j:Label id="selected"/>
- <j:TextButton width="200" primary="true" text="who is missing?" click="clickHandler(event)"/>
- </js:View>
- </js:initialView>
+ <j:Button width="200" emphasis ="primary" text="who is missing?" click="clickHandler(event)"/>
+ </j:View>
+ </j:initialView>
</j:Application>
\ No newline at end of file
diff --git a/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/BE0005_Creating_a_group_of_Jewel_RadioButtons.as3proj b/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/BE0005_Creating_a_group_of_Jewel_RadioButtons.as3proj
new file mode 100644
index 0000000..185e588
--- /dev/null
+++ b/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/BE0005_Creating_a_group_of_Jewel_RadioButtons.as3proj
@@ -0,0 +1,95 @@
+<?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>
+ <output>
+ <movie disabled="False"/>
+ <movie path="bin-debug/BE0005_Creating_a_group_of_Jewel_RadioButtons.swf"/>
+ <movie version="11"/>
+ <movie input=""/>
+ <movie width="800"/>
+ <movie height="600"/>
+ <movie fps="60"/>
+ <movie background="#FFFFFF"/>
+ <movie platform="Flash Player"/>
+ </output>
+ <!-- Other classes to be compiled into your SWF -->
+ <classpaths>
+ <class path="src/main/royale"/>
+ </classpaths>
+ <moonshineResourcePaths></moonshineResourcePaths>
+ <moonshineNativeExtensionPaths></moonshineNativeExtensionPaths>
+ <build>
+ <option useResourceBundleMetadata="True"/>
+ <option showBindingWarnings="True"/>
+ <option warnings="True"/>
+ <option es="False"/>
+ <option verboseStackTraces="False"/>
+ <option additional="-theme=${royalelib}/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css -html-template=src/main/resources/jewel-example-index-template.html"/>
+ <option loadConfig=""/>
+ <option linkReport=""/>
+ <option benchmark="False"/>
+ <option optimize="False"/>
+ <option showActionScriptWarnings="True"/>
+ <option staticLinkRSL="False"/>
+ <option locale=""/>
+ <option compilerConstants=""/>
+ <option showDeprecationWarnings="True"/>
+ <option antBuildPath="build/build.xml"/>
+ <option showUnusedTypeSelectorWarnings="True"/>
+ <option customSDK=""/>
+ <option strict="True"/>
+ <option accessible="False"/>
+ <option useNetwork="True"/>
+ <option allowSourcePathOverlap="False"/>
+ </build>
+ <includeLibraries></includeLibraries>
+ <libraryPaths></libraryPaths>
+ <externalLibraryPaths></externalLibraryPaths>
+ <rslPaths></rslPaths>
+ <intrinsics>
+ <element path="Library/AS3/frameworks/Flex4"/>
+ <element path="Library\AS3\frameworks\Flex4"/>
+ </intrinsics>
+ <library></library>
+ <compileTargets>
+ <compile path="src/main/royale/BE0005_Creating_a_group_of_Jewel_RadioButtons.mxml"/>
+ </compileTargets>
+ <hiddenPaths></hiddenPaths>
+ <preBuildCommand>null</preBuildCommand>
+ <postBuildCommand alwaysRun="False">null</postBuildCommand>
+ <options>
+ <option testMovie=""/>
+ <option showHiddenPaths="False"/>
+ <option testMovieCommand=""/>
+ <option defaultBuildTargets=""/>
+ <option isPrimeFacesVisualEditor="False"/>
+ </options>
+ <moonshineRunCustomization>
+ <option deviceSimulator="null"/>
+ <option targetPlatform="2"/>
+ <option launchMethod="Simulator"/>
+ <option urlToLaunch=""/>
+ <option projectType="2"/>
+ <deviceSimulator>null</deviceSimulator>
+ <certAndroid>null</certAndroid>
+ <certIos>null</certIos>
+ <certIosProvisioning>null</certIosProvisioning>
+ </moonshineRunCustomization>
+</project>
\ No newline at end of file
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/README.txt
similarity index 75%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/README.txt
index 75d1f7d..ffedfed 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/README.txt
@@ -1,4 +1,3 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,13 +16,13 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-@namespace "http://www.w3.org/1999/xhtml";
+DESCRIPTION
-.Application
-{
- padding: 10px;
- margin: 10px;
-}
-
\ No newline at end of file
+Creating a group of Jewel RadioButtons
+
+In this example we'll Learn how to configure a group of Jewel RadioButton controls in a Royale application.
+
+Source code of the code exposed in the following Apache Royale Blog Example post:
+
+http://royale.apache.org/creating-a-group-of-jewel-radiobuttons/
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/asconfig.json
similarity index 76%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/asconfig.json
index 75d1f7d..4b6259e 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/asconfig.json
@@ -1,4 +1,3 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,13 +16,16 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-
-@namespace "http://www.w3.org/1999/xhtml";
-
-.Application
{
- padding: 10px;
- margin: 10px;
+ "config": "royale",
+ "compilerOptions": {
+ "debug": false,
+ "targets": ["JSRoyale","SWF"],
+ "source-map": true
+ },
+ "additionalOptions": "-remove-circulars -js-output-optimization=skipAsCoercions",
+ "files":
+ [
+ "src/main/royale/App.mxml"
+ ]
}
-
\ No newline at end of file
diff --git a/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/build.xml b/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/build.xml
new file mode 100644
index 0000000..095fef3
--- /dev/null
+++ b/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/build.xml
@@ -0,0 +1,63 @@
+<?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="BE0005_Creating_a_group_of_Jewel_RadioButtons" 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>
+ </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/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/pom.xml b/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/pom.xml
new file mode 100644
index 0000000..db269f6
--- /dev/null
+++ b/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/pom.xml
@@ -0,0 +1,98 @@
+<?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-blog</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ </parent>
+
+ <artifactId>BE0005_Creating_a_group_of_Jewel_RadioButtons</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <packaging>swf</packaging>
+
+ <name>Apache Royale: Examples: Blog: 0005: Creating a group of Jewel RadioButtons</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>BE0005_Creating_a_group_of_Jewel_RadioButtons.mxml</mainClass>
+ <targets>JSRoyale,SWF</targets>
+ <debug>false</debug>
+ <htmlTemplate>${basedir}/target/javascript/bin/js-debug/jewel-example-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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>HTML</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel-Light-NoFlat-Primary-Blue-Theme</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <scope>theme</scope>
+ <classifier>js</classifier>
+ </dependency>
+ </dependencies>
+
+</project>
diff --git a/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/src/main/resources/jewel-example-index-template.html b/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/src/main/resources/jewel-example-index-template.html
new file mode 100644
index 0000000..d98e4cf
--- /dev/null
+++ b/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/src/main/resources/jewel-example-index-template.html
@@ -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.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta name="Custom Template for injecting custom style CSS">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+ <link rel="stylesheet" type="text/css" href="${application}.css">
+ <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
+${head}
+</head>
+<body>
+${body}
+</body>
+</html>
diff --git a/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/src/main/royale/BE0005_Creating_a_group_of_Jewel_RadioButtons.mxml b/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/src/main/royale/BE0005_Creating_a_group_of_Jewel_RadioButtons.mxml
new file mode 100644
index 0000000..94d6fdb
--- /dev/null
+++ b/examples/blog/BE0005_Creating_a_group_of_Jewel_RadioButtons/src/main/royale/BE0005_Creating_a_group_of_Jewel_RadioButtons.mxml
@@ -0,0 +1,57 @@
+<?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:html="library://ns.apache.org/royale/html">
+
+ <fx:Script>
+ <![CDATA[
+ private function radioChanged(event:Event):void
+ {
+ result.text = "The radio button selected has the value: " + RadioButton(event.target).value;
+ }
+ ]]>
+ </fx:Script>
+
+ <j:initialView>
+ <j:View>
+ <j:beads>
+ <j:VerticalLayout gap="3"/>
+ </j:beads>
+
+ <html:H2 text="Creating a group of Jewel RadioButtons"/>
+
+ <j:Label text="Which option do you prefer?"/>
+
+ <j:RadioButton text="Option 1" groupName="radios" value="1" change="radioChanged(event)"/>
+ <j:RadioButton text="Option 2" groupName="radios" value="2" change="radioChanged(event)"/>
+ <j:RadioButton text="Option 3" groupName="radios" value="3" change="radioChanged(event)">
+ <j:beads>
+ <j:Disabled id="opt3disable" disabled="false"/>
+ </j:beads>
+ </j:RadioButton>
+
+ <j:Label id="result" text="The radio button selected has the value:"/>
+
+ <j:Button text="disable/enable option 3" emphasis ="primary" click="opt3disable.disabled = !opt3disable.disabled"/>
+ </j:View>
+ </j:initialView>
+
+</j:Application>
\ No newline at end of file
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/README.txt
similarity index 72%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/README.txt
index 75d1f7d..2b121c8 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/README.txt
@@ -1,4 +1,3 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,13 +16,13 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-@namespace "http://www.w3.org/1999/xhtml";
+DESCRIPTION
-.Application
-{
- padding: 10px;
- margin: 10px;
-}
-
\ No newline at end of file
+Binding the text property of a Jewel TextInput to update a Label
+
+Learn how to change a Label’s text with a Jewel TextInput using both a change event and data binding.
+
+Source code of the code exposed in the following Apache Royale Blog Example post:
+
+https://royale.apache.org/binding-the-text-property-of-a-jewel-textinput-to-update-a-text-label/
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/asconfig.json
similarity index 76%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/asconfig.json
index 75d1f7d..4b6259e 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/asconfig.json
@@ -1,4 +1,3 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,13 +16,16 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-
-@namespace "http://www.w3.org/1999/xhtml";
-
-.Application
{
- padding: 10px;
- margin: 10px;
+ "config": "royale",
+ "compilerOptions": {
+ "debug": false,
+ "targets": ["JSRoyale","SWF"],
+ "source-map": true
+ },
+ "additionalOptions": "-remove-circulars -js-output-optimization=skipAsCoercions",
+ "files":
+ [
+ "src/main/royale/App.mxml"
+ ]
}
-
\ No newline at end of file
diff --git a/examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/build.xml b/examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/build.xml
new file mode 100644
index 0000000..99e33df
--- /dev/null
+++ b/examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/build.xml
@@ -0,0 +1,63 @@
+<?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="BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label" 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>
+ </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/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/pom.xml b/examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/pom.xml
new file mode 100644
index 0000000..0431f76
--- /dev/null
+++ b/examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/pom.xml
@@ -0,0 +1,84 @@
+<?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-blog</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ </parent>
+
+ <artifactId>BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <packaging>swf</packaging>
+
+ <name>Apache Royale: Examples: Blog: 0006: Binding the text property of a Jewel Textinput to update a text label</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>BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label.mxml</mainClass>
+ <targets>JSRoyale,SWF</targets>
+ <debug>false</debug>
+ <htmlTemplate>${basedir}/target/javascript/bin/js-debug/jewel-example-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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel-Light-NoFlat-Primary-Blue-Theme</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <scope>theme</scope>
+ <classifier>js</classifier>
+ </dependency>
+ </dependencies>
+
+</project>
diff --git a/examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/src/main/resources/jewel-example-index-template.html b/examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/src/main/resources/jewel-example-index-template.html
new file mode 100644
index 0000000..d98e4cf
--- /dev/null
+++ b/examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/src/main/resources/jewel-example-index-template.html
@@ -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.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta name="Custom Template for injecting custom style CSS">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+ <link rel="stylesheet" type="text/css" href="${application}.css">
+ <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
+${head}
+</head>
+<body>
+${body}
+</body>
+</html>
diff --git a/examples/blog/BE0003_Using_Jewel_Slider_Control/src/main/resources/styles.css b/examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/src/main/resources/styles.css
similarity index 100%
rename from examples/blog/BE0003_Using_Jewel_Slider_Control/src/main/resources/styles.css
rename to examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/src/main/resources/styles.css
diff --git a/examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/src/main/royale/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label.mxml b/examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/src/main/royale/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label.mxml
new file mode 100644
index 0000000..09c7b9e
--- /dev/null
+++ b/examples/blog/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label/src/main/royale/BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label.mxml
@@ -0,0 +1,65 @@
+<?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">
+
+ <fx:Style source="../../main/resources/styles.css"/>
+
+ <fx:Script>
+ <![CDATA[
+ private function textChanged(event:Event):void
+ {
+ result.text = "The textinput text value is: " + textinput.text;
+ }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ApplicationDataBinding />
+ </j:beads>
+
+ <j:initialView>
+ <j:View>
+ <j:beads>
+ <j:VerticalLayout gap="3"/>
+ </j:beads>
+
+ <j:Label text="Binding the text property of a Jewel TextInput to update a text Label"/>
+
+ <j:TextInput id="textinput" change="textChanged(event)">
+ <j:beads>
+ <j:TextPrompt prompt="Using change event"/>
+ </j:beads>
+ </j:TextInput>
+
+ <j:Label id="result" text="The textinput text value is: "/>
+
+ <j:TextInput id="databinding_ti">
+ <j:beads>
+ <j:TextPrompt prompt="Using databinding"/>
+ </j:beads>
+ </j:TextInput>
+
+ <j:Label text="The textinput text value is: {databinding_ti.text}"/>
+ </j:View>
+ </j:initialView>
+
+</j:Application>
\ No newline at end of file
diff --git a/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls.as3proj b/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls.as3proj
new file mode 100644
index 0000000..8bab821
--- /dev/null
+++ b/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls.as3proj
@@ -0,0 +1,95 @@
+<?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>
+ <output>
+ <movie disabled="False"/>
+ <movie path="bin-debug/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls.swf"/>
+ <movie version="11"/>
+ <movie input=""/>
+ <movie width="800"/>
+ <movie height="600"/>
+ <movie fps="60"/>
+ <movie background="#FFFFFF"/>
+ <movie platform="Flash Player"/>
+ </output>
+ <!-- Other classes to be compiled into your SWF -->
+ <classpaths>
+ <class path="src/main/royale"/>
+ </classpaths>
+ <moonshineResourcePaths></moonshineResourcePaths>
+ <moonshineNativeExtensionPaths></moonshineNativeExtensionPaths>
+ <build>
+ <option useResourceBundleMetadata="True"/>
+ <option showBindingWarnings="True"/>
+ <option warnings="True"/>
+ <option es="False"/>
+ <option verboseStackTraces="False"/>
+ <option additional="-theme=${royalelib}/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css -html-template=src/main/resources/jewel-example-index-template.html"/>
+ <option loadConfig=""/>
+ <option linkReport=""/>
+ <option benchmark="False"/>
+ <option optimize="False"/>
+ <option showActionScriptWarnings="True"/>
+ <option staticLinkRSL="False"/>
+ <option locale=""/>
+ <option compilerConstants=""/>
+ <option showDeprecationWarnings="True"/>
+ <option antBuildPath="build/build.xml"/>
+ <option showUnusedTypeSelectorWarnings="True"/>
+ <option customSDK=""/>
+ <option strict="True"/>
+ <option accessible="False"/>
+ <option useNetwork="True"/>
+ <option allowSourcePathOverlap="False"/>
+ </build>
+ <includeLibraries></includeLibraries>
+ <libraryPaths></libraryPaths>
+ <externalLibraryPaths></externalLibraryPaths>
+ <rslPaths></rslPaths>
+ <intrinsics>
+ <element path="Library/AS3/frameworks/Flex4"/>
+ <element path="Library\AS3\frameworks\Flex4"/>
+ </intrinsics>
+ <library></library>
+ <compileTargets>
+ <compile path="src/main/royale/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls.mxml"/>
+ </compileTargets>
+ <hiddenPaths></hiddenPaths>
+ <preBuildCommand>null</preBuildCommand>
+ <postBuildCommand alwaysRun="False">null</postBuildCommand>
+ <options>
+ <option testMovie=""/>
+ <option showHiddenPaths="False"/>
+ <option testMovieCommand=""/>
+ <option defaultBuildTargets=""/>
+ <option isPrimeFacesVisualEditor="False"/>
+ </options>
+ <moonshineRunCustomization>
+ <option deviceSimulator="null"/>
+ <option targetPlatform="2"/>
+ <option launchMethod="Simulator"/>
+ <option urlToLaunch=""/>
+ <option projectType="2"/>
+ <deviceSimulator>null</deviceSimulator>
+ <certAndroid>null</certAndroid>
+ <certIos>null</certIos>
+ <certIosProvisioning>null</certIosProvisioning>
+ </moonshineRunCustomization>
+</project>
\ No newline at end of file
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/README.txt
similarity index 73%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/README.txt
index 75d1f7d..7085455 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/README.txt
@@ -1,4 +1,3 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,13 +16,13 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-@namespace "http://www.w3.org/1999/xhtml";
+DESCRIPTION
-.Application
-{
- padding: 10px;
- margin: 10px;
-}
-
\ No newline at end of file
+Selecting options from a group of Jewel CheckBox controls
+
+Learn how to set up a group of Jewel Checkbox controls to select one or more options in a Royale application.
+
+Source code of the code exposed in the following Apache Royale Blog Example post:
+
+http://royale.apache.org/selecting-options-from-a-group-of-jewel-checkbox-controls/
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/asconfig.json
similarity index 76%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/asconfig.json
index 75d1f7d..4b6259e 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/asconfig.json
@@ -1,4 +1,3 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,13 +16,16 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-
-@namespace "http://www.w3.org/1999/xhtml";
-
-.Application
{
- padding: 10px;
- margin: 10px;
+ "config": "royale",
+ "compilerOptions": {
+ "debug": false,
+ "targets": ["JSRoyale","SWF"],
+ "source-map": true
+ },
+ "additionalOptions": "-remove-circulars -js-output-optimization=skipAsCoercions",
+ "files":
+ [
+ "src/main/royale/App.mxml"
+ ]
}
-
\ No newline at end of file
diff --git a/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/build.xml b/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/build.xml
new file mode 100644
index 0000000..70e55f5
--- /dev/null
+++ b/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/build.xml
@@ -0,0 +1,63 @@
+<?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="BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls" 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>
+ </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/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/pom.xml b/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/pom.xml
new file mode 100644
index 0000000..a629f9e
--- /dev/null
+++ b/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/pom.xml
@@ -0,0 +1,98 @@
+<?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-blog</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ </parent>
+
+ <artifactId>BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <packaging>swf</packaging>
+
+ <name>Apache Royale: Examples: Blog: 0007: Selecting options from a group of jewel checkbox controls</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>BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls.mxml</mainClass>
+ <targets>JSRoyale,SWF</targets>
+ <debug>false</debug>
+ <htmlTemplate>${basedir}/target/javascript/bin/js-debug/jewel-example-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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>HTML</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel-Light-NoFlat-Primary-Blue-Theme</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <scope>theme</scope>
+ <classifier>js</classifier>
+ </dependency>
+ </dependencies>
+
+</project>
diff --git a/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/src/main/resources/jewel-example-index-template.html b/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/src/main/resources/jewel-example-index-template.html
new file mode 100644
index 0000000..d98e4cf
--- /dev/null
+++ b/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/src/main/resources/jewel-example-index-template.html
@@ -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.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta name="Custom Template for injecting custom style CSS">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+ <link rel="stylesheet" type="text/css" href="${application}.css">
+ <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
+${head}
+</head>
+<body>
+${body}
+</body>
+</html>
diff --git a/examples/blog/BE0003_Using_Jewel_Slider_Control/src/main/resources/styles.css b/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/src/main/resources/styles.css
similarity index 100%
copy from examples/blog/BE0003_Using_Jewel_Slider_Control/src/main/resources/styles.css
copy to examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/src/main/resources/styles.css
diff --git a/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/src/main/royale/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls.mxml b/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/src/main/royale/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls.mxml
new file mode 100644
index 0000000..d42a9a2
--- /dev/null
+++ b/examples/blog/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls/src/main/royale/BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls.mxml
@@ -0,0 +1,66 @@
+<?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:html="library://ns.apache.org/royale/html">
+
+ <fx:Style source="../../main/resources/styles.css"/>
+
+ <fx:Script>
+ <![CDATA[
+ private function checkboxChanged(event:Event):void
+ {
+ result.text = "The options selected are: ";
+
+ if(chk1.selected)
+ result.text += chk1.value + " ";
+ if(chk2.selected)
+ result.text += chk2.value + " ";
+ if(chk3.selected)
+ result.text += chk3.value;
+ }
+ ]]>
+ </fx:Script>
+
+ <j:initialView>
+ <j:View>
+ <j:beads>
+ <j:VerticalLayout gap="3"/>
+ </j:beads>
+
+ <html:H2 text="Selecting options from a group of Jewel Checkbox controls"/>
+
+ <j:Label text="Which option(s) do you prefer?"/>
+
+ <j:CheckBox id="chk1" text="Option 1" value="1" change="checkboxChanged(event)"/>
+ <j:CheckBox id="chk2" text="Option 2" value="2" change="checkboxChanged(event)"/>
+ <j:CheckBox id="chk3" text="Option 3" value="3" change="checkboxChanged(event)">
+ <j:beads>
+ <j:Disabled id="opt3disable" disabled="false"/>
+ </j:beads>
+ </j:CheckBox>
+
+ <j:Label id="result" text="The options selected are:"/>
+
+ <j:Button text="disable/enable option 3" emphasis="primary" click="opt3disable.disabled = !opt3disable.disabled"/>
+ </j:View>
+ </j:initialView>
+
+</j:Application>
\ No newline at end of file
diff --git a/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/BE0008_Using_View_States_to_show_or_hide_content.as3proj b/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/BE0008_Using_View_States_to_show_or_hide_content.as3proj
new file mode 100644
index 0000000..24f2d3f
--- /dev/null
+++ b/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/BE0008_Using_View_States_to_show_or_hide_content.as3proj
@@ -0,0 +1,95 @@
+<?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>
+ <output>
+ <movie disabled="False"/>
+ <movie path="bin-debug/BE0008_Using_View_States_to_show_or_hide_content.swf"/>
+ <movie version="11"/>
+ <movie input=""/>
+ <movie width="800"/>
+ <movie height="600"/>
+ <movie fps="60"/>
+ <movie background="#FFFFFF"/>
+ <movie platform="Flash Player"/>
+ </output>
+ <!-- Other classes to be compiled into your SWF -->
+ <classpaths>
+ <class path="src/main/royale"/>
+ </classpaths>
+ <moonshineResourcePaths></moonshineResourcePaths>
+ <moonshineNativeExtensionPaths></moonshineNativeExtensionPaths>
+ <build>
+ <option useResourceBundleMetadata="True"/>
+ <option showBindingWarnings="True"/>
+ <option warnings="True"/>
+ <option es="False"/>
+ <option verboseStackTraces="False"/>
+ <option additional="-theme=${royalelib}/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css -html-template=src/main/resources/jewel-example-index-template.html"/>
+ <option loadConfig=""/>
+ <option linkReport=""/>
+ <option benchmark="False"/>
+ <option optimize="False"/>
+ <option showActionScriptWarnings="True"/>
+ <option staticLinkRSL="False"/>
+ <option locale=""/>
+ <option compilerConstants=""/>
+ <option showDeprecationWarnings="True"/>
+ <option antBuildPath="build/build.xml"/>
+ <option showUnusedTypeSelectorWarnings="True"/>
+ <option customSDK=""/>
+ <option strict="True"/>
+ <option accessible="False"/>
+ <option useNetwork="True"/>
+ <option allowSourcePathOverlap="False"/>
+ </build>
+ <includeLibraries></includeLibraries>
+ <libraryPaths></libraryPaths>
+ <externalLibraryPaths></externalLibraryPaths>
+ <rslPaths></rslPaths>
+ <intrinsics>
+ <element path="Library/AS3/frameworks/Flex4"/>
+ <element path="Library\AS3\frameworks\Flex4"/>
+ </intrinsics>
+ <library></library>
+ <compileTargets>
+ <compile path="src/main/royale/BE0008_Using_View_States_to_show_or_hide_content.mxml"/>
+ </compileTargets>
+ <hiddenPaths></hiddenPaths>
+ <preBuildCommand>null</preBuildCommand>
+ <postBuildCommand alwaysRun="False">null</postBuildCommand>
+ <options>
+ <option testMovie=""/>
+ <option showHiddenPaths="False"/>
+ <option testMovieCommand=""/>
+ <option defaultBuildTargets=""/>
+ <option isPrimeFacesVisualEditor="False"/>
+ </options>
+ <moonshineRunCustomization>
+ <option deviceSimulator="null"/>
+ <option targetPlatform="2"/>
+ <option launchMethod="Simulator"/>
+ <option urlToLaunch=""/>
+ <option projectType="2"/>
+ <deviceSimulator>null</deviceSimulator>
+ <certAndroid>null</certAndroid>
+ <certIos>null</certIos>
+ <certIosProvisioning>null</certIosProvisioning>
+ </moonshineRunCustomization>
+</project>
\ No newline at end of file
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/README.txt
similarity index 76%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to examples/blog/BE0008_Using_View_States_to_show_or_hide_content/README.txt
index 75d1f7d..fec9dee 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/README.txt
@@ -1,4 +1,3 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,13 +16,14 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-@namespace "http://www.w3.org/1999/xhtml";
+DESCRIPTION
-.Application
-{
- padding: 10px;
- margin: 10px;
-}
-
\ No newline at end of file
+Using View States to show or hide content
+
+Learn how to use view states in a royale application to show or hide content
+
+Source code of the code exposed in the following Apache Royale Blog Example post:
+
+http://royale.apache.org/using-view-states-to-show-or-hide-content/
+
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/asconfig.json
similarity index 76%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to examples/blog/BE0008_Using_View_States_to_show_or_hide_content/asconfig.json
index 75d1f7d..4b6259e 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/asconfig.json
@@ -1,4 +1,3 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,13 +16,16 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-
-@namespace "http://www.w3.org/1999/xhtml";
-
-.Application
{
- padding: 10px;
- margin: 10px;
+ "config": "royale",
+ "compilerOptions": {
+ "debug": false,
+ "targets": ["JSRoyale","SWF"],
+ "source-map": true
+ },
+ "additionalOptions": "-remove-circulars -js-output-optimization=skipAsCoercions",
+ "files":
+ [
+ "src/main/royale/App.mxml"
+ ]
}
-
\ No newline at end of file
diff --git a/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/build.xml b/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/build.xml
new file mode 100644
index 0000000..5bec019
--- /dev/null
+++ b/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/build.xml
@@ -0,0 +1,63 @@
+<?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="BE0008_Using_View_States_to_show_or_hide_content" 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>
+ </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/blog/BE0008_Using_View_States_to_show_or_hide_content/pom.xml b/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/pom.xml
new file mode 100644
index 0000000..52428ca
--- /dev/null
+++ b/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/pom.xml
@@ -0,0 +1,98 @@
+<?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-blog</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ </parent>
+
+ <artifactId>BE0008_Using_View_States_to_show_or_hide_content</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <packaging>swf</packaging>
+
+ <name>Apache Royale: Examples: Blog: 0008: Using View States to show or hide content</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>BE0008_Using_View_States_to_show_or_hide_content.mxml</mainClass>
+ <targets>JSRoyale,SWF</targets>
+ <debug>false</debug>
+ <htmlTemplate>${basedir}/target/javascript/bin/js-debug/jewel-example-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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>HTML</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel-Light-NoFlat-Primary-Blue-Theme</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <scope>theme</scope>
+ <classifier>js</classifier>
+ </dependency>
+ </dependencies>
+
+</project>
diff --git a/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/src/main/resources/jewel-example-index-template.html b/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/src/main/resources/jewel-example-index-template.html
new file mode 100644
index 0000000..d98e4cf
--- /dev/null
+++ b/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/src/main/resources/jewel-example-index-template.html
@@ -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.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta name="Custom Template for injecting custom style CSS">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+ <link rel="stylesheet" type="text/css" href="${application}.css">
+ <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
+${head}
+</head>
+<body>
+${body}
+</body>
+</html>
diff --git a/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/src/main/royale/BE0008_Using_View_States_to_show_or_hide_content.mxml b/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/src/main/royale/BE0008_Using_View_States_to_show_or_hide_content.mxml
new file mode 100644
index 0000000..a126e84
--- /dev/null
+++ b/examples/blog/BE0008_Using_View_States_to_show_or_hide_content/src/main/royale/BE0008_Using_View_States_to_show_or_hide_content.mxml
@@ -0,0 +1,54 @@
+<?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:html="library://ns.apache.org/royale/html">
+
+ <j:initialView>
+ <j:View id="view" >
+ <j:states>
+ <js:State name="login" />
+ <js:State name="loggedIn" />
+ </j:states>
+
+ <j:beads>
+ <js:SimpleStatesImpl/>
+ </j:beads>
+
+ <j:Card id="loginForm" includeIn="login">
+ <html:H1 text="Royale login"/>
+ <j:TextInput id="username" text="someuser"/>
+ <j:TextInput id="password" text="somepass">
+ <j:beads>
+ <j:PasswordInput/>
+ </j:beads>
+ </j:TextInput>
+ <j:Button text="Login" emphasis="primary" click="view.currentState = 'loggedIn'" />
+ </j:Card>
+
+ <j:Card id="loggedInForm" includeIn="loggedIn">
+ <html:H1 text="You are logged in!! :)"/>
+ <j:Button text="Logout" click="view.currentState = 'login'"/>
+ </j:Card>
+ </j:View>
+ </j:initialView>
+
+</j:Application>
\ No newline at end of file
diff --git a/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/BE0009_Using_an_Item_ Renderer_with_a_List.as3proj b/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/BE0009_Using_an_Item_ Renderer_with_a_List.as3proj
new file mode 100644
index 0000000..561cad3
--- /dev/null
+++ b/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/BE0009_Using_an_Item_ Renderer_with_a_List.as3proj
@@ -0,0 +1,95 @@
+<?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>
+ <output>
+ <movie disabled="False"/>
+ <movie path="bin-debug/BE0009_Using_an_Item_Renderer_with_a_List.swf"/>
+ <movie version="11"/>
+ <movie input=""/>
+ <movie width="800"/>
+ <movie height="600"/>
+ <movie fps="60"/>
+ <movie background="#FFFFFF"/>
+ <movie platform="Flash Player"/>
+ </output>
+ <!-- Other classes to be compiled into your SWF -->
+ <classpaths>
+ <class path="src/main/royale"/>
+ </classpaths>
+ <moonshineResourcePaths></moonshineResourcePaths>
+ <moonshineNativeExtensionPaths></moonshineNativeExtensionPaths>
+ <build>
+ <option useResourceBundleMetadata="True"/>
+ <option showBindingWarnings="True"/>
+ <option warnings="True"/>
+ <option es="False"/>
+ <option verboseStackTraces="False"/>
+ <option additional="-theme=${royalelib}/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css -html-template=src/main/resources/jewel-example-index-template.html"/>
+ <option loadConfig=""/>
+ <option linkReport=""/>
+ <option benchmark="False"/>
+ <option optimize="False"/>
+ <option showActionScriptWarnings="True"/>
+ <option staticLinkRSL="False"/>
+ <option locale=""/>
+ <option compilerConstants=""/>
+ <option showDeprecationWarnings="True"/>
+ <option antBuildPath="build/build.xml"/>
+ <option showUnusedTypeSelectorWarnings="True"/>
+ <option customSDK=""/>
+ <option strict="True"/>
+ <option accessible="False"/>
+ <option useNetwork="True"/>
+ <option allowSourcePathOverlap="False"/>
+ </build>
+ <includeLibraries></includeLibraries>
+ <libraryPaths></libraryPaths>
+ <externalLibraryPaths></externalLibraryPaths>
+ <rslPaths></rslPaths>
+ <intrinsics>
+ <element path="Library/AS3/frameworks/Flex4"/>
+ <element path="Library\AS3\frameworks\Flex4"/>
+ </intrinsics>
+ <library></library>
+ <compileTargets>
+ <compile path="src/main/royale/BE0009_Using_an_Item_Renderer_with_a_List.mxml"/>
+ </compileTargets>
+ <hiddenPaths></hiddenPaths>
+ <preBuildCommand>null</preBuildCommand>
+ <postBuildCommand alwaysRun="False">null</postBuildCommand>
+ <options>
+ <option testMovie=""/>
+ <option showHiddenPaths="False"/>
+ <option testMovieCommand=""/>
+ <option defaultBuildTargets=""/>
+ <option isPrimeFacesVisualEditor="False"/>
+ </options>
+ <moonshineRunCustomization>
+ <option deviceSimulator="null"/>
+ <option targetPlatform="2"/>
+ <option launchMethod="Simulator"/>
+ <option urlToLaunch=""/>
+ <option projectType="2"/>
+ <deviceSimulator>null</deviceSimulator>
+ <certAndroid>null</certAndroid>
+ <certIos>null</certIos>
+ <certIosProvisioning>null</certIosProvisioning>
+ </moonshineRunCustomization>
+</project>
\ No newline at end of file
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/README.txt
similarity index 73%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/README.txt
index 75d1f7d..86db396 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/README.txt
@@ -1,4 +1,3 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,13 +16,13 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-@namespace "http://www.w3.org/1999/xhtml";
+DESCRIPTION
-.Application
-{
- padding: 10px;
- margin: 10px;
-}
-
\ No newline at end of file
+Using an Item Renderer with a List
+
+Learn how to use an item renderer in a Jewel List to display the items in your list in a pleasing and user-friendly way in a Royale application.
+
+Source code of the code exposed in the following Apache Royale Blog Example post:
+
+https://royale.apache.org/using-an-item-renderer-with-a-list/
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/asconfig.json
similarity index 76%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/asconfig.json
index 75d1f7d..4b6259e 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/asconfig.json
@@ -1,4 +1,3 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,13 +16,16 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-
-@namespace "http://www.w3.org/1999/xhtml";
-
-.Application
{
- padding: 10px;
- margin: 10px;
+ "config": "royale",
+ "compilerOptions": {
+ "debug": false,
+ "targets": ["JSRoyale","SWF"],
+ "source-map": true
+ },
+ "additionalOptions": "-remove-circulars -js-output-optimization=skipAsCoercions",
+ "files":
+ [
+ "src/main/royale/App.mxml"
+ ]
}
-
\ No newline at end of file
diff --git a/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/build.xml b/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/build.xml
new file mode 100644
index 0000000..f543437
--- /dev/null
+++ b/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/build.xml
@@ -0,0 +1,63 @@
+<?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="BE0009_Using_an_Item_Renderer_with_a_List" 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>
+ </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/blog/BE0009_Using_an_Item_ Renderer_with_a_List/pom.xml b/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/pom.xml
new file mode 100644
index 0000000..b9c21e5
--- /dev/null
+++ b/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/pom.xml
@@ -0,0 +1,112 @@
+<?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-blog</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ </parent>
+
+ <artifactId>BE0009_Using_an_Item_Renderer_with_a_List</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <packaging>swf</packaging>
+
+ <name>Apache Royale: Examples: Blog: 0009: Using an Item Renderer with a List</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>BE0009_Using_an_Item_Renderer_with_a_List.mxml</mainClass>
+ <targets>JSRoyale,SWF</targets>
+ <debug>false</debug>
+ <htmlTemplate>${basedir}/target/javascript/bin/js-debug/jewel-example-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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Icons</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Icons</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>HTML</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel-Light-NoFlat-Primary-Green-Theme</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <scope>theme</scope>
+ <classifier>js</classifier>
+ </dependency>
+ </dependencies>
+
+</project>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg b/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/src/main/resources/jewel-example-index-template.html
similarity index 62%
copy from frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg
copy to examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/src/main/resources/jewel-example-index-template.html
index 07beb17..140ba98 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg
+++ b/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/src/main/resources/jewel-example-index-template.html
@@ -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,6 +13,18 @@
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 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-616, -350)"><g transform="translate(611, 345)"><g><circle cx="11" cy="11" r="6"></circle></g></g></g></svg>
\ No newline at end of file
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta name="Custom Template for injecting custom style CSS">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+ <link rel="stylesheet" type="text/css" href="${application}.css">
+ <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
+${head}
+</head>
+<body>
+${body}
+</body>
+</html>
diff --git a/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/src/main/royale/BE0009_Using_an_Item_Renderer_with_a_List.mxml b/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/src/main/royale/BE0009_Using_an_Item_Renderer_with_a_List.mxml
new file mode 100644
index 0000000..e0f6ed2
--- /dev/null
+++ b/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/src/main/royale/BE0009_Using_an_Item_Renderer_with_a_List.mxml
@@ -0,0 +1,66 @@
+<?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:html="library://ns.apache.org/royale/html"
+ xmlns:models="models.*">
+
+ <fx:Style>
+ @namespace "http://www.w3.org/1999/xhtml";
+ @namespace j "library://ns.apache.org/royale/jewel";
+
+ .iconListItemRenderer
+ {
+ IItemRenderer: ClassReference("itemRenderers.IconListItemRenderer");
+ }
+ .iconListItemRenderer .fonticon
+ {
+ margin-right: 24px;
+ }
+ </fx:Style>
+
+ <j:model>
+ <models:ListsModel id="listModel"/>
+ </j:model>
+
+ <j:initialView>
+ <j:View>
+ <js:beads>
+ <j:HorizontalCenteredLayout/>
+ <js:ApplicationDataBinding/>
+ </js:beads>
+
+ <j:Card width="270">
+ <html:H3 text="Jewel List With ItemRenderer"/>
+
+ <j:List width="100%" height="300" className="iconListItemRenderer">
+ <j:beads>
+ <js:ConstantBinding
+ sourceID="listModel"
+ sourcePropertyName="iconListData"
+ destinationPropertyName="dataProvider" />
+ </j:beads>
+ </j:List>
+ </j:Card>
+ </j:View>
+ </j:initialView>
+
+</j:Application>
\ No newline at end of file
diff --git a/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/src/main/royale/itemRenderers/IconListItemRenderer.mxml b/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/src/main/royale/itemRenderers/IconListItemRenderer.mxml
new file mode 100644
index 0000000..9a3119b
--- /dev/null
+++ b/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/src/main/royale/itemRenderers/IconListItemRenderer.mxml
@@ -0,0 +1,47 @@
+<?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:ListItemRenderer 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:html="library://ns.apache.org/royale/html"
+ xmlns="http://www.w3.org/1999/xhtml">
+
+ <fx:Script>
+ <![CDATA[
+ import vos.IconListVO;
+
+ [Bindable("dataChange")]
+ public function get iconList():IconListVO
+ {
+ return data as IconListVO;
+ }
+ ]]>
+ </fx:Script>
+
+ <mdl:beads>
+ <js:ItemRendererDataBinding />
+ </mdl:beads>
+
+ <js:FontIcon text="{iconList.icon}" material="true" visible="{iconList.icon != null}"/>
+
+ <html:Span text="{iconList.label}"/>
+
+</j:ListItemRenderer>
+
diff --git a/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/src/main/royale/models/ListsModel.as b/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/src/main/royale/models/ListsModel.as
new file mode 100644
index 0000000..e8e15ae
--- /dev/null
+++ b/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/src/main/royale/models/ListsModel.as
@@ -0,0 +1,47 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 models
+{
+ import org.apache.royale.collections.ArrayList;
+ import vos.IconListVO;
+
+ public class ListsModel
+ {
+ /**
+ * this is the dataProvider for the List
+ */
+ private var _iconListData:ArrayList = new ArrayList([
+ new IconListVO("Alert", MaterialIconType.WEB_ASSET),
+ new IconListVO("Button", MaterialIconType.CROP_7_5),
+ new IconListVO("DropDownList", MaterialIconType.CREDIT_CARD),
+ new IconListVO("CheckBox", MaterialIconType.CHECK_BOX),
+ new IconListVO("Label", MaterialIconType.LABEL),
+ new IconListVO("List", MaterialIconType.LIST_ALT),
+ new IconListVO("RadioButton", MaterialIconType.RADIO_BUTTON_CHECKED),
+ new IconListVO("Slider", MaterialIconType.STORAGE),
+ new IconListVO("Text", MaterialIconType.SUBJECT),
+ new IconListVO("TextInput", MaterialIconType.TEXT_FIELDS)
+ ]);
+
+ public function get iconListData():ArrayList
+ {
+ return _iconListData;
+ }
+ }
+}
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/src/main/royale/vos/IconListVO.as
similarity index 76%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/src/main/royale/vos/IconListVO.as
index 75d1f7d..f30d42c 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/examples/blog/BE0009_Using_an_Item_ Renderer_with_a_List/src/main/royale/vos/IconListVO.as
@@ -1,4 +1,3 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,13 +16,18 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-
-@namespace "http://www.w3.org/1999/xhtml";
-
-.Application
+package vos
{
- padding: 10px;
- margin: 10px;
+ [Bindable]
+ public class IconListVO
+ {
+ public var label:String;
+ public var icon:String;
+
+ public function IconListVO(label:String, icon:String = null)
+ {
+ this.label = label;
+ this.icon = icon;
+ }
+ }
}
-
\ No newline at end of file
diff --git a/examples/blog/BE0010_Customization_through_the_Royale_API/BE0010_Customization_through_the_Royale_API.as3proj b/examples/blog/BE0010_Customization_through_the_Royale_API/BE0010_Customization_through_the_Royale_API.as3proj
new file mode 100644
index 0000000..f904c84
--- /dev/null
+++ b/examples/blog/BE0010_Customization_through_the_Royale_API/BE0010_Customization_through_the_Royale_API.as3proj
@@ -0,0 +1,95 @@
+<?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>
+ <output>
+ <movie disabled="False"/>
+ <movie path="bin-debug/BE0010_Customization_through_the_Royale_API.swf"/>
+ <movie version="11"/>
+ <movie input=""/>
+ <movie width="800"/>
+ <movie height="600"/>
+ <movie fps="60"/>
+ <movie background="#FFFFFF"/>
+ <movie platform="Flash Player"/>
+ </output>
+ <!-- Other classes to be compiled into your SWF -->
+ <classpaths>
+ <class path="src/main/royale"/>
+ </classpaths>
+ <moonshineResourcePaths></moonshineResourcePaths>
+ <moonshineNativeExtensionPaths></moonshineNativeExtensionPaths>
+ <build>
+ <option useResourceBundleMetadata="True"/>
+ <option showBindingWarnings="True"/>
+ <option warnings="True"/>
+ <option es="False"/>
+ <option verboseStackTraces="False"/>
+ <option additional="-theme=${royalelib}/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css -html-template=src/main/resources/jewel-example-index-template.html"/>
+ <option loadConfig=""/>
+ <option linkReport=""/>
+ <option benchmark="False"/>
+ <option optimize="False"/>
+ <option showActionScriptWarnings="True"/>
+ <option staticLinkRSL="False"/>
+ <option locale=""/>
+ <option compilerConstants=""/>
+ <option showDeprecationWarnings="True"/>
+ <option antBuildPath="build/build.xml"/>
+ <option showUnusedTypeSelectorWarnings="True"/>
+ <option customSDK=""/>
+ <option strict="True"/>
+ <option accessible="False"/>
+ <option useNetwork="True"/>
+ <option allowSourcePathOverlap="False"/>
+ </build>
+ <includeLibraries></includeLibraries>
+ <libraryPaths></libraryPaths>
+ <externalLibraryPaths></externalLibraryPaths>
+ <rslPaths></rslPaths>
+ <intrinsics>
+ <element path="Library/AS3/frameworks/Flex4"/>
+ <element path="Library\AS3\frameworks\Flex4"/>
+ </intrinsics>
+ <library></library>
+ <compileTargets>
+ <compile path="src/main/royale/BE0010_Customization_through_the_Royale_API.mxml"/>
+ </compileTargets>
+ <hiddenPaths></hiddenPaths>
+ <preBuildCommand>null</preBuildCommand>
+ <postBuildCommand alwaysRun="False">null</postBuildCommand>
+ <options>
+ <option testMovie=""/>
+ <option showHiddenPaths="False"/>
+ <option testMovieCommand=""/>
+ <option defaultBuildTargets=""/>
+ <option isPrimeFacesVisualEditor="False"/>
+ </options>
+ <moonshineRunCustomization>
+ <option deviceSimulator="null"/>
+ <option targetPlatform="2"/>
+ <option launchMethod="Simulator"/>
+ <option urlToLaunch=""/>
+ <option projectType="2"/>
+ <deviceSimulator>null</deviceSimulator>
+ <certAndroid>null</certAndroid>
+ <certIos>null</certIos>
+ <certIosProvisioning>null</certIosProvisioning>
+ </moonshineRunCustomization>
+</project>
\ No newline at end of file
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/examples/blog/BE0010_Customization_through_the_Royale_API/README.txt
similarity index 74%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to examples/blog/BE0010_Customization_through_the_Royale_API/README.txt
index 75d1f7d..0ae715c 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/examples/blog/BE0010_Customization_through_the_Royale_API/README.txt
@@ -1,4 +1,3 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,13 +16,13 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-@namespace "http://www.w3.org/1999/xhtml";
+DESCRIPTION
-.Application
-{
- padding: 10px;
- margin: 10px;
-}
-
\ No newline at end of file
+Customization through the Royale API
+
+Learn how to use the powerful Royale APIs to get access to internals and customize to your needs in a Royale application.
+
+Source code of the code exposed in the following Apache Royale Blog Example post:
+
+https://royale.apache.org//customization-through-the-royale-api/
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/examples/blog/BE0010_Customization_through_the_Royale_API/asconfig.json
similarity index 76%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to examples/blog/BE0010_Customization_through_the_Royale_API/asconfig.json
index 75d1f7d..4b6259e 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/examples/blog/BE0010_Customization_through_the_Royale_API/asconfig.json
@@ -1,4 +1,3 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,13 +16,16 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-
-@namespace "http://www.w3.org/1999/xhtml";
-
-.Application
{
- padding: 10px;
- margin: 10px;
+ "config": "royale",
+ "compilerOptions": {
+ "debug": false,
+ "targets": ["JSRoyale","SWF"],
+ "source-map": true
+ },
+ "additionalOptions": "-remove-circulars -js-output-optimization=skipAsCoercions",
+ "files":
+ [
+ "src/main/royale/App.mxml"
+ ]
}
-
\ No newline at end of file
diff --git a/examples/blog/BE0010_Customization_through_the_Royale_API/build.xml b/examples/blog/BE0010_Customization_through_the_Royale_API/build.xml
new file mode 100644
index 0000000..835f21a
--- /dev/null
+++ b/examples/blog/BE0010_Customization_through_the_Royale_API/build.xml
@@ -0,0 +1,63 @@
+<?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="BE0010_Customization_through_the_Royale_API" 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>
+ </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/blog/BE0010_Customization_through_the_Royale_API/pom.xml b/examples/blog/BE0010_Customization_through_the_Royale_API/pom.xml
new file mode 100644
index 0000000..eef7a0a
--- /dev/null
+++ b/examples/blog/BE0010_Customization_through_the_Royale_API/pom.xml
@@ -0,0 +1,84 @@
+<?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-blog</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ </parent>
+
+ <artifactId>BE0010_Customization_through_the_Royale_API</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <packaging>swf</packaging>
+
+ <name>Apache Royale: Examples: Blog: 0010: Customization through the Royale API</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>BE0010_Customization_through_the_Royale_API.mxml</mainClass>
+ <targets>JSRoyale,SWF</targets>
+ <debug>false</debug>
+ <htmlTemplate>${basedir}/target/javascript/bin/js-debug/jewel-example-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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel-Light-NoFlat-Primary-Red-Theme</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <scope>theme</scope>
+ <classifier>js</classifier>
+ </dependency>
+ </dependencies>
+
+</project>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg b/examples/blog/BE0010_Customization_through_the_Royale_API/src/main/resources/jewel-example-index-template.html
similarity index 62%
copy from frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg
copy to examples/blog/BE0010_Customization_through_the_Royale_API/src/main/resources/jewel-example-index-template.html
index 07beb17..140ba98 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg
+++ b/examples/blog/BE0010_Customization_through_the_Royale_API/src/main/resources/jewel-example-index-template.html
@@ -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,6 +13,18 @@
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 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-616, -350)"><g transform="translate(611, 345)"><g><circle cx="11" cy="11" r="6"></circle></g></g></g></svg>
\ No newline at end of file
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta name="Custom Template for injecting custom style CSS">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+ <link rel="stylesheet" type="text/css" href="${application}.css">
+ <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
+${head}
+</head>
+<body>
+${body}
+</body>
+</html>
diff --git a/examples/blog/BE0010_Customization_through_the_Royale_API/src/main/royale/BE0010_Customization_through_the_Royale_API.mxml b/examples/blog/BE0010_Customization_through_the_Royale_API/src/main/royale/BE0010_Customization_through_the_Royale_API.mxml
new file mode 100644
index 0000000..510e819
--- /dev/null
+++ b/examples/blog/BE0010_Customization_through_the_Royale_API/src/main/royale/BE0010_Customization_through_the_Royale_API.mxml
@@ -0,0 +1,101 @@
+<?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:html="library://ns.apache.org/royale/html"
+ xmlns:models="models.*">
+
+ <fx:Script>
+ <![CDATA[
+ import org.apache.royale.core.IBeadLayout;
+ import org.apache.royale.core.IBeadView;
+ import org.apache.royale.events.CloseEvent;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.jewel.Alert;
+ import org.apache.royale.jewel.CheckBox;
+ import org.apache.royale.jewel.beads.layouts.HorizontalLayout;
+ import org.apache.royale.jewel.beads.layouts.VerticalLayout;
+ import org.apache.royale.jewel.beads.views.AlertView;
+
+ private var alert:Alert;
+ private var check:CheckBox;
+
+ // Adding content to Alert component and changing ControlBar's Buttons Layout
+ private function clickHandler(event:MouseEvent):void {
+ alert = Alert.show("This example shows access to AlertView and ControlBar to add a CheckBox to Alert's content area and expand Buttons layout and change defaults. The height of the alert is set up to 300px too.", "Cutomized Alert Example", 3);
+ alert.addEventListener(CloseEvent.CLOSE, alertClickHandler);
+ alert.height = 340;
+
+ check = new CheckBox();
+ check.selected = true;
+ check.text = "Buttons must fill ControlBar's availabe space";
+ check.addEventListener(Event.CHANGE, expandButtons);
+
+ expandButtons();
+ }
+
+ private function expandButtons(event:Event = null):void {
+ var alertView:AlertView = alert.getBeadByType(IBeadView) as AlertView;
+
+ if(event == null)
+ {
+ var verticalLayout:VerticalLayout = new VerticalLayout();
+ verticalLayout.gap = 9;
+ alertView.content.addBead(verticalLayout);
+
+ alertView.content.addElement(check);
+ }
+
+ var layout:HorizontalLayout = alertView.controlBar.getBeadByType(IBeadLayout) as HorizontalLayout;
+ layout.itemsExpand = check.selected;
+ }
+
+ // Event handler function for displaying the selected Alert button.
+ private function alertClickHandler(event:CloseEvent):void {
+ alert.removeEventListener(CloseEvent.CLOSE, alertClickHandler);
+
+ if (event.detail == Alert.YES)
+ status.text="You answered Yes";
+ else
+ status.text="You answered No";
+ }
+ ]]>
+ </fx:Script>
+
+ <j:initialView>
+ <j:View>
+ <js:beads>
+ <j:HorizontalCenteredLayout/>
+ </js:beads>
+
+ <j:Card width="350">
+ <html:H3 text="Customization through Royale API"/>
+
+ <j:Label text="This is a complex example that add and retrieve beads at runtime. Click the button below to display an Alert window that add content and make changes in some layout parts."
+ multiline="true"/>
+ <j:Button text="Click Me" click="clickHandler(event)"/>
+ <j:Label id="status"/>
+ </j:Card>
+ </j:View>
+ </j:initialView>
+
+</j:Application>
\ No newline at end of file
diff --git a/examples/blog/pom.xml b/examples/blog/pom.xml
index 7806127..6e00791 100644
--- a/examples/blog/pom.xml
+++ b/examples/blog/pom.xml
@@ -37,6 +37,12 @@
<module>BE0002_Using_Jewel_Alert_Control</module>
<module>BE0003_Using_Jewel_Slider_Control</module>
<module>BE0004_Adding_an_item_to_a_Jewel_List</module>
+ <module>BE0005_Creating_a_group_of_Jewel_RadioButtons</module>
+ <module>BE0006_Binding_the_text_property_of_a_Jewel_Textinput_to_update_a_text_label</module>
+ <module>BE0007_Selecting_options_from_a_group_of_jewel_checkbox_controls</module>
+ <module>BE0008_Using_View_States_to_show_or_hide_content</module>
+ <module>BE0009_Using_an_Item_ Renderer_with_a_List</module>
+ <module>BE0010_Customization_through_the_Royale_API</module>
</modules>
<build>
diff --git a/examples/build.xml b/examples/build.xml
index 2a6604a..aeb1266 100644
--- a/examples/build.xml
+++ b/examples/build.xml
@@ -77,20 +77,25 @@
<ant dir="${basedir}/royale/Ace"/>
<ant dir="${basedir}/express/DataBindingExample"/>
<ant dir="${basedir}/express/DataGridExample"/>
+ <ant dir="${basedir}/express/GitHubCommitLogViewer"/>
<ant dir="${basedir}/royale/AccordionExample"/>
<ant dir="${basedir}/royale/ASDoc"/>
<ant dir="${basedir}/royale/CordovaCameraExample"/>
<ant dir="${basedir}/royale/CreateJSExample"/>
<ant dir="${basedir}/royale/DataBindingExample"/>
<ant dir="${basedir}/royale/DataBindingExample_as"/>
- <ant dir="${basedir}/royale/DataBindingExample_Flat"/>
+ <!--<ant dir="${basedir}/royale/DataBindingExample_Flat"/>-->
<ant dir="${basedir}/royale/DataBindingExampleWithFlexLayout"/>
<ant dir="${basedir}/royale/DataGridExample"/>
<ant dir="${basedir}/royale/DateControlsExample"/>
<ant dir="${basedir}/royale/DesktopMap"/>
<ant dir="${basedir}/royale/DividedContainerExample"/>
<ant dir="${basedir}/royale/DragAndDropExample"/>
+ <ant dir="${basedir}/royale/Flex2Royale"/>
+ <ant dir="${basedir}/royale/JSON2ASVO"/>
+ <ant dir="${basedir}/royale/JewelExample"/>
<ant dir="${basedir}/royale/RoyaleTeamPage_MDL"/>
+ <ant dir="${basedir}/royale/RoyaleWebsite"/>
<ant dir="${basedir}/royale/RoyaleWebsiteStatsViewer"/>
<ant dir="${basedir}/royale/RoyaleStore"/>
<ant dir="${basedir}/royale/RoyaleStore_jquery"/>
@@ -110,6 +115,8 @@
<ant dir="${basedir}/royale/TodoListSampleApp"/>
<ant dir="${basedir}/royale/TeamPage"/>
<ant dir="${basedir}/royale/TreeExample"/>
+ <ant dir="${basedir}/mxroyale/HelloWorld"/>
+ <ant dir="${basedir}/mxroyale/ControlsExample"/>
<ant dir="${basedir}/native/ButtonExample"/>
<ant dir="${basedir}/native/USStatesMap"/>
</target>
@@ -125,8 +132,10 @@
</target>
<target name="clean" description="Cleans all SWCs and their resource bundles">
+ <ant dir="${basedir}/royale/Ace" target="clean"/>
<ant dir="${basedir}/express/DataBindingExample" target="clean"/>
<ant dir="${basedir}/express/DataGridExample" target="clean"/>
+ <ant dir="${basedir}/express/GitHubCommitLogViewer" target="clean"/>
<ant dir="${basedir}/royale/AccordionExample" target="clean"/>
<ant dir="${basedir}/royale/ASDoc" target="clean"/>
<ant dir="${basedir}/royale/CordovaCameraExample" target="clean"/>
@@ -140,7 +149,11 @@
<ant dir="${basedir}/royale/DesktopMap" target="clean"/>
<ant dir="${basedir}/royale/DividedContainerExample" target="clean"/>
<ant dir="${basedir}/royale/DragAndDropExample" target="clean"/>
+ <ant dir="${basedir}/royale/Flex2Royale" target="clean"/>
+ <ant dir="${basedir}/royale/JSON2ASVO" target="clean"/>
+ <ant dir="${basedir}/royale/JewelExample" target="clean"/>
<ant dir="${basedir}/royale/RoyaleTeamPage_MDL" target="clean"/>
+ <ant dir="${basedir}/royale/RoyaleWebsite" target="clean"/>
<ant dir="${basedir}/royale/RoyaleWebsiteStatsViewer" target="clean"/>
<ant dir="${basedir}/royale/RoyaleStore" target="clean"/>
<ant dir="${basedir}/royale/RoyaleStore_jquery" target="clean"/>
@@ -160,6 +173,8 @@
<ant dir="${basedir}/royale/TodoListSampleApp" target="clean"/>
<ant dir="${basedir}/royale/TeamPage" target="clean"/>
<ant dir="${basedir}/royale/TreeExample" target="clean"/>
+ <ant dir="${basedir}/mxroyale/HelloWorld" target="clean"/>
+ <ant dir="${basedir}/mxroyale/ControlsExample" target="clean"/>
<ant dir="${basedir}/native/ButtonExample" target="clean"/>
<ant dir="${basedir}/native/USStatesMap" target="clean"/>
</target>
diff --git a/examples/mxroyale/ControlsExample/pom.xml b/examples/mxroyale/ControlsExample/pom.xml
index 0b0e472..8ea1dd2 100644
--- a/examples/mxroyale/ControlsExample/pom.xml
+++ b/examples/mxroyale/ControlsExample/pom.xml
@@ -40,6 +40,8 @@
<extensions>true</extensions>
<configuration>
<mainClass>ControlsExample.mxml</mainClass>
+ <targets>JSRoyale,SWF</targets>
+ <debug>false</debug>
</configuration>
</plugin>
</plugins>
diff --git a/examples/mxroyale/HelloWorld/pom.xml b/examples/mxroyale/HelloWorld/pom.xml
index 9461f5c..0576a8c 100644
--- a/examples/mxroyale/HelloWorld/pom.xml
+++ b/examples/mxroyale/HelloWorld/pom.xml
@@ -40,6 +40,8 @@
<extensions>true</extensions>
<configuration>
<mainClass>HelloWorld.mxml</mainClass>
+ <targets>JSRoyale,SWF</targets>
+ <debug>false</debug>
</configuration>
</plugin>
</plugins>
diff --git a/examples/pom.xml b/examples/pom.xml
index 70331a1..9a80674 100644
--- a/examples/pom.xml
+++ b/examples/pom.xml
@@ -35,29 +35,25 @@
<properties>
<compiler.output-dir>${basedir}/target/javascript/bin/js-debug</compiler.output-dir>
+ <compiler.output-dir-debug>${basedir}/target/javascript/bin/js-debug</compiler.output-dir-debug>
+ <!-- In Release mode we only want to copy assets folder content to assets destination folder, the rest is managed by compiler -->
+ <compiler.output-dir-release>${basedir}/target/javascript/bin/js-release</compiler.output-dir-release>
<royale.framework.version>0.9.3-SNAPSHOT</royale.framework.version>
</properties>
<modules>
<module>express</module>
<module>royale</module>
+ <module>blog</module>
<module>native</module>
<module>node</module>
<module>amf</module>
- <module>blog</module>
-
<module>examples-tests</module>
<module>examples-integrationtests</module>
</modules>
<build>
<sourceDirectory>src/main/royale</sourceDirectory>
- <resources>
- <resource>
- <directory>src/main/resources</directory>
- <filtering>true</filtering>
- </resource>
- </resources>
<pluginManagement>
<plugins>
<!-- Copy the resources to the compiler output directory -->
@@ -65,9 +61,41 @@
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<version>3.0.1</version>
- <configuration>
- <outputDirectory>${compiler.output-dir}</outputDirectory>
- </configuration>
+ <executions>
+ <execution>
+ <id>copy-resources-debug</id>
+ <phase>validate</phase>
+ <goals>
+ <goal>copy-resources</goal>
+ </goals>
+ <configuration>
+ <outputDirectory>${compiler.output-dir-debug}</outputDirectory>
+ <resources>
+ <resource>
+ <directory>src/main/resources</directory>
+ <filtering>true</filtering>
+ </resource>
+ </resources>
+ </configuration>
+ </execution>
+ <execution>
+ <id>copy-resources-release</id>
+ <phase>validate</phase>
+ <goals>
+ <goal>copy-resources</goal>
+ </goals>
+ <configuration>
+ <!-- Copy the assets to the assets output directory -->
+ <outputDirectory>${compiler.output-dir-release}/assets</outputDirectory>
+ <resources>
+ <resource>
+ <directory>src/main/resources/assets</directory>
+ <filtering>true</filtering>
+ </resource>
+ </resources>
+ </configuration>
+ </execution>
+ </executions>
</plugin>
<plugin>
<groupId>org.apache.royale.compiler</groupId>
diff --git a/examples/royale/ASDoc/src/main/royale/ASDocMainView.mxml b/examples/royale/ASDoc/src/main/royale/ASDocMainView.mxml
index 0c8e0fd..c4b6a25 100644
--- a/examples/royale/ASDoc/src/main/royale/ASDocMainView.mxml
+++ b/examples/royale/ASDoc/src/main/royale/ASDocMainView.mxml
@@ -383,7 +383,7 @@
}
.jsonly {
- color: #0f0;
+ color: #009042;
}
.loading {
diff --git a/examples/royale/AccordionExample/pom.xml b/examples/royale/AccordionExample/pom.xml
index 118d29c..da709a6 100644
--- a/examples/royale/AccordionExample/pom.xml
+++ b/examples/royale/AccordionExample/pom.xml
@@ -61,6 +61,20 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
<artifactId>BasicTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
diff --git a/examples/royale/Ace/asconfig.json b/examples/royale/Ace/asconfig.json
index b82e00f..82442c3 100644
--- a/examples/royale/Ace/asconfig.json
+++ b/examples/royale/Ace/asconfig.json
@@ -19,6 +19,9 @@
{
"config": "royale",
"compilerOptions": {
+ "load-config": [
+ "src/main/config/compile-app-config.xml"
+ ],
"debug": false,
"targets": ["JSRoyale","SWF"],
"source-map": true
diff --git a/examples/royale/DataBindingExample/pom.xml b/examples/royale/DataBindingExample/pom.xml
index 21be8e4..c6c8c04 100644
--- a/examples/royale/DataBindingExample/pom.xml
+++ b/examples/royale/DataBindingExample/pom.xml
@@ -70,6 +70,20 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
<artifactId>BasicTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
diff --git a/examples/royale/DataBindingExampleWithFlexLayout/pom.xml b/examples/royale/DataBindingExampleWithFlexLayout/pom.xml
index 3df31e3..d4c351d 100644
--- a/examples/royale/DataBindingExampleWithFlexLayout/pom.xml
+++ b/examples/royale/DataBindingExampleWithFlexLayout/pom.xml
@@ -70,6 +70,20 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
<artifactId>BasicTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
diff --git a/examples/royale/DataBindingExample_as/pom.xml b/examples/royale/DataBindingExample_as/pom.xml
index 6f92fa1..6e2a0dc 100644
--- a/examples/royale/DataBindingExample_as/pom.xml
+++ b/examples/royale/DataBindingExample_as/pom.xml
@@ -79,6 +79,27 @@
<type>swc</type>
<classifier>js</classifier>
</dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>BasicTheme</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <scope>theme</scope>
+ </dependency>
</dependencies>
</project>
diff --git a/examples/royale/DataBindingExample_as/src/main/royale/DataBindingExample.as b/examples/royale/DataBindingExample_as/src/main/royale/DataBindingExample.as
index 76940fe..f754ef4 100644
--- a/examples/royale/DataBindingExample_as/src/main/royale/DataBindingExample.as
+++ b/examples/royale/DataBindingExample_as/src/main/royale/DataBindingExample.as
@@ -93,7 +93,14 @@
addBead(new ViewSourceContextMenuOption());
}
+ /**
+ * @royalesuppresspublicvarwarning
+ */
public var service:HTTPService;
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
public var collection:LazyCollection;
private function initializeHandler(event:Event):void
diff --git a/examples/royale/DataBindingExample_as/src/main/royale/MyInitialView.as b/examples/royale/DataBindingExample_as/src/main/royale/MyInitialView.as
index efd1395..e4196b9 100644
--- a/examples/royale/DataBindingExample_as/src/main/royale/MyInitialView.as
+++ b/examples/royale/DataBindingExample_as/src/main/royale/MyInitialView.as
@@ -252,15 +252,45 @@
}
+ /**
+ * @royalesuppresspublicvarwarning
+ */
public var symbolTI:TextInput;
+ /**
+ * @royalesuppresspublicvarwarning
+ */
public var output:Label;
+ /**
+ * @royalesuppresspublicvarwarning
+ */
public var field:Label;
+ /**
+ * @royalesuppresspublicvarwarning
+ */
public var list:DropDownList;
+ /**
+ * @royalesuppresspublicvarwarning
+ */
public var radio1:RadioButton;
+ /**
+ * @royalesuppresspublicvarwarning
+ */
public var radio2:RadioButton;
+ /**
+ * @royalesuppresspublicvarwarning
+ */
public var radio3:RadioButton;
+ /**
+ * @royalesuppresspublicvarwarning
+ */
public var radio4:RadioButton;
+ /**
+ * @royalesuppresspublicvarwarning
+ */
public var showAllData:CheckBox;
+ /**
+ * @royalesuppresspublicvarwarning
+ */
public var ta:TextArea;
private function tb_clickHandler(event:MouseEvent):void
diff --git a/examples/royale/DataGridExample/pom.xml b/examples/royale/DataGridExample/pom.xml
index bdcfd41..2f0d2de 100644
--- a/examples/royale/DataGridExample/pom.xml
+++ b/examples/royale/DataGridExample/pom.xml
@@ -59,6 +59,20 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
<artifactId>BasicTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
diff --git a/examples/royale/DataGridExample/src/main/royale/MyInitialView.mxml b/examples/royale/DataGridExample/src/main/royale/MyInitialView.mxml
index 6a1e827..8f74f55 100644
--- a/examples/royale/DataGridExample/src/main/royale/MyInitialView.mxml
+++ b/examples/royale/DataGridExample/src/main/royale/MyInitialView.mxml
@@ -120,10 +120,10 @@
</js:HContainer>
- <!-- A dynamic DataGrid, responding to additions and deletions, using the .DynamicDataGrid style class
+ <!-- A dynamic DataGrid, responding to additions and deletions
-->
- <js:DataGrid id="dataGrid2" x="520" y="50" width="400" height="350" change="dataGridChange(dataGrid2, output2)"
- rowHeight="40" className="DynamicDataGrid DataGrid" >
+ <js:DynamicDataGrid id="dataGrid2" x="520" y="50" width="400" height="350" change="dataGridChange(dataGrid2, output2)"
+ rowHeight="40">
<js:beads>
<js:ConstantBinding
sourceID="applicationModel"
@@ -135,7 +135,7 @@
<js:DataGridColumn label="Title" dataField="title" columnWidth="200" />
<js:DataGridColumn label="Sales" dataField="sales" columnWidth="100" />
</js:columns>
- </js:DataGrid>
+ </js:DynamicDataGrid>
<!--
diff --git a/examples/royale/DataGridExample/src/main/royale/models/ProductsModel.as b/examples/royale/DataGridExample/src/main/royale/models/ProductsModel.as
index efb2844..09fec47 100644
--- a/examples/royale/DataGridExample/src/main/royale/models/ProductsModel.as
+++ b/examples/royale/DataGridExample/src/main/royale/models/ProductsModel.as
@@ -1,47 +1,52 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-// 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 models
-{
- import org.apache.royale.collections.ArrayList;
- import products.Product;
-
- public class ProductsModel
- {
- private var _productList:ArrayList = new ArrayList([
- new Product("ps100","Widgets",44,200,"assets/smallbluerect.jpg"),
- new Product("tx200","Thingys",5,285,"assets/smallgreenrect.jpg"),
- new Product("rz300","Sprockets",80,105,"assets/smallyellowrect.jpg"),
- new Product("dh440","Doohickies",10,340,"assets/smallredrect.jpg"),
- new Product("ps220","Weejets",35,190,"assets/smallorangerect.jpg")
- ]);
-
- public function get productList():ArrayList
- {
- return _productList;
- }
-
- public var productArray:Array = [
- new Product("ps100","Blueberries",44,200,"assets/smallbluerect.jpg"),
- new Product("tx200","Kiwis",5,285,"assets/smallgreenrect.jpg"),
- new Product("rz300","Bananas",80,105,"assets/smallyellowrect.jpg"),
- new Product("dh440","Strawberries",10,340,"assets/smallredrect.jpg"),
- new Product("ps220","Oranges",35,190,"assets/smallorangerect.jpg")
- ];
- }
-}
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 models
+{
+ import org.apache.royale.collections.ArrayList;
+ import products.Product;
+
+ public class ProductsModel
+ {
+ private var _productList:ArrayList = new ArrayList([
+ new Product("ps100","Widgets",44,200,"assets/smallbluerect.jpg"),
+ new Product("tx200","Thingys",5,285,"assets/smallgreenrect.jpg"),
+ new Product("rz300","Sprockets",80,105,"assets/smallyellowrect.jpg"),
+ new Product("dh440","Doohickies",10,340,"assets/smallredrect.jpg"),
+ new Product("ps220","Weejets",35,190,"assets/smallorangerect.jpg")
+ ]);
+
+ public function get productList():ArrayList
+ {
+ return _productList;
+ }
+
+ private var _productArray:Array = [
+ new Product("ps100","Blueberries",44,200,"assets/smallbluerect.jpg"),
+ new Product("tx200","Kiwis",5,285,"assets/smallgreenrect.jpg"),
+ new Product("rz300","Bananas",80,105,"assets/smallyellowrect.jpg"),
+ new Product("dh440","Strawberries",10,340,"assets/smallredrect.jpg"),
+ new Product("ps220","Oranges",35,190,"assets/smallorangerect.jpg")
+ ];
+
+ public function get productArray():Array
+ {
+ return _productArray;
+ }
+ }
+}
diff --git a/examples/royale/DataGridExample/src/main/royale/products/Product.as b/examples/royale/DataGridExample/src/main/royale/products/Product.as
index 8fb3e21..eb7049d 100644
--- a/examples/royale/DataGridExample/src/main/royale/products/Product.as
+++ b/examples/royale/DataGridExample/src/main/royale/products/Product.as
@@ -1,43 +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 products
-{
- public class Product
- {
- public function Product(id:String,title:String,detail:Number,sales:Number,image:String)
- {
- this.id = id;
- this.title = title;
- this.detail = detail;
- this.sales = sales;
- this.image = image;
- }
-
- public var id:String;
- public var title:String;
- public var detail:Number;
- public var image:String;
- public var sales:Number;
-
- public function toString():String
- {
- return title;
- }
- }
-}
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 products
+{
+ public class Product
+ {
+ private var _id:String;
+ private var _title:String;
+ private var _detail:Number;
+ private var _image:String;
+ private var _sales:Number;
+
+ public function Product(id:String,title:String,detail:Number,sales:Number,image:String)
+ {
+ this._id = id;
+ this._title = title;
+ this._detail = detail;
+ this._sales = sales;
+ this._image = image;
+ }
+
+ public function get id():String
+ {
+ return _id;
+ }
+
+ public function get title():String
+ {
+ return _title;
+ }
+
+ public function get detail():Number
+ {
+ return _detail;
+ }
+
+ public function get image():String
+ {
+ return _image;
+ }
+
+ public function get sales():Number
+ {
+ return _sales;
+ }
+
+ public function toString():String
+ {
+ return title;
+ }
+ }
+}
diff --git a/examples/royale/DebuggingExample/pom.xml b/examples/royale/DebuggingExample/pom.xml
index 224a445..7357fe6 100644
--- a/examples/royale/DebuggingExample/pom.xml
+++ b/examples/royale/DebuggingExample/pom.xml
@@ -70,6 +70,20 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
<artifactId>BasicTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
diff --git a/examples/royale/DividedContainerExample/pom.xml b/examples/royale/DividedContainerExample/pom.xml
index dbfdeac..87e6e9e 100644
--- a/examples/royale/DividedContainerExample/pom.xml
+++ b/examples/royale/DividedContainerExample/pom.xml
@@ -59,6 +59,20 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
<artifactId>BasicTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
diff --git a/examples/royale/Flex2Royale/build.xml b/examples/royale/Flex2Royale/build.xml
index 4458870..06b92aa 100644
--- a/examples/royale/Flex2Royale/build.xml
+++ b/examples/royale/Flex2Royale/build.xml
@@ -50,8 +50,8 @@
</target>
<target name="json" unless="json.exists" >
- <echo message="FALCONJX_HOME: ${FALCONJX_HOME}"/>
- <java jar="${FALCONJX_HOME}/lib/asdoc.jar" resultProperty="errorCode"
+ <echo message="ROYALE_COMPILER_HOME: ${ROYALE_COMPILER_HOME}"/>
+ <java jar="${ROYALE_COMPILER_HOME}/lib/asdoc.jar" resultProperty="errorCode"
fork="true">
<jvmarg line="${mxmlc.jvm.args}"/>
<jvmarg line="-Droyalelib=${ROYALE_HOME}/frameworks}"/>
diff --git a/examples/royale/Flex2Royale/pom.xml b/examples/royale/Flex2Royale/pom.xml
index 2e38f5b..c5a29a1 100644
--- a/examples/royale/Flex2Royale/pom.xml
+++ b/examples/royale/Flex2Royale/pom.xml
@@ -70,6 +70,20 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
<artifactId>BasicTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
diff --git a/examples/royale/HTMLElements/pom.xml b/examples/royale/HTMLElements/pom.xml
index d550ba9..0bb7822 100644
--- a/examples/royale/HTMLElements/pom.xml
+++ b/examples/royale/HTMLElements/pom.xml
@@ -55,6 +55,20 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
<artifactId>BasicTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
diff --git a/examples/royale/HelloWorld/pom.xml b/examples/royale/HelloWorld/pom.xml
index 91f35a5..8eed512 100644
--- a/examples/royale/HelloWorld/pom.xml
+++ b/examples/royale/HelloWorld/pom.xml
@@ -55,6 +55,20 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
<artifactId>BasicTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
diff --git a/examples/royale/JSON2ASVO/pom.xml b/examples/royale/JSON2ASVO/pom.xml
index 2acfe41..fea108e 100644
--- a/examples/royale/JSON2ASVO/pom.xml
+++ b/examples/royale/JSON2ASVO/pom.xml
@@ -100,6 +100,20 @@
</dependency>
-->
<dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
<groupId>org.apache.royale.framework</groupId>
<artifactId>BasicTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
diff --git a/examples/royale/JewelExample/.vscode/tasks.json b/examples/royale/JewelExample/.vscode/tasks.json
index 5d6198d..06c67bf 100644
--- a/examples/royale/JewelExample/.vscode/tasks.json
+++ b/examples/royale/JewelExample/.vscode/tasks.json
@@ -1,8 +1,66 @@
{
- // for the documentation about the tasks.json format
- "version": "0.1.0",
- "command": "mvn",
- "args": ["clean", "install", "-DskipTests"],
- "isShellCommand": true,
- "showOutput": "always"
+ // See https://go.microsoft.com/fwlink/?LinkId=733558
+ // for the documentation about the tasks.json format
+ "version": "2.0.0",
+ "tasks": [
+ {
+ "label": "Build Debug with AS3 Extension",
+ "type": "actionscript",
+ "debug": true,
+ "problemMatcher": [
+ "$nextgenas_nomatch"
+ ],
+ "group": "build"
+ },
+ {
+ "label": "Build with Maven",
+ "type": "shell",
+ "command": "mvn",
+ "args": [
+ "clean",
+ "install",
+ "-DskipTests"
+ ],
+ "group": "build",
+ "presentation": {
+ "reveal": "always",
+ "panel": "new"
+ },
+ "problemMatcher": []
+ },
+ {
+ "label": "Build Release with AS3 Extension",
+ "type": "actionscript",
+ "debug": false,
+ "problemMatcher": [
+ "$nextgenas_nomatch"
+ ],
+ "group": "build"
+ },
+ {
+ "label": "build with asconfigc",
+ "type": "shell",
+ "command": "asconfigc",
+ "windows": {
+ "args": [
+ "--sdk=C:\\Apache\\royale-asjs"
+ ]
+ },
+ "osx": {
+ "args": [
+ "--sdk=/Apache/royale-asjs"
+ ]
+ },
+ "presentation": {
+ "echo": true,
+ "reveal": "always",
+ "focus": true,
+ "panel": "dedicated"
+ },
+ "problemMatcher": [
+ "$nextgenas_nomatch"
+ ],
+ "group": "build"
+ }
+ ]
}
\ No newline at end of file
diff --git a/examples/royale/JewelExample/README.txt b/examples/royale/JewelExample/README.txt
index 7b84b3a..1d6411a 100644
--- a/examples/royale/JewelExample/README.txt
+++ b/examples/royale/JewelExample/README.txt
@@ -19,8 +19,8 @@
DESCRIPTION
-The JewelExample is demo app to customize styles on Royale components
+The JewelExample is demo app that showcase Jewel UI Set in Apache Royale
-Right now this is a starter project with only a button to start developing styles
+It now has lots of components and use cases and continue growing as new things are developed to see all is working
diff --git a/examples/royale/JewelExample/asconfig.json b/examples/royale/JewelExample/asconfig.json
index 4b6259e..4d62030 100644
--- a/examples/royale/JewelExample/asconfig.json
+++ b/examples/royale/JewelExample/asconfig.json
@@ -1,28 +1,12 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-// 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
+ "targets": ["JSRoyale"],
+ "html-template": "src/main/resources/jewel-example-index-template.html",
+ "theme": "${royalelib}/themes/JewelTheme/src/main/resources/defaults.css"
},
+ "copySourcePathAssets": true,
"additionalOptions": "-remove-circulars -js-output-optimization=skipAsCoercions",
"files":
[
diff --git a/examples/royale/JewelExample/pom.xml b/examples/royale/JewelExample/pom.xml
index 2cef798..4d38582 100644
--- a/examples/royale/JewelExample/pom.xml
+++ b/examples/royale/JewelExample/pom.xml
@@ -42,8 +42,9 @@
<configuration>
<mainClass>App.mxml</mainClass>
<targets>JSRoyale,SWF</targets>
- <!-- <debug>false</debug> -->
+ <debug>false</debug>
<htmlTemplate>${basedir}/target/javascript/bin/js-debug/jewel-example-index-template.html</htmlTemplate>
+ <additionalCompilerOptions>-source-map=true</additionalCompilerOptions>
</configuration>
</plugin>
</plugins>
@@ -59,6 +60,20 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
+ <artifactId>Formatters</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Formatters</artifactId>
+ <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.3-SNAPSHOT</version>
<type>swc</type>
@@ -73,14 +88,14 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
- <artifactId>Basic</artifactId>
+ <artifactId>Icons</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<classifier>swf</classifier>
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
- <artifactId>Basic</artifactId>
+ <artifactId>Icons</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<classifier>js</classifier>
diff --git a/examples/royale/JewelExample/src/main/resources/assets/apache-royale-logo.svg b/examples/royale/JewelExample/src/main/resources/assets/apache-royale-logo.svg
new file mode 100644
index 0000000..1402ae3
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/resources/assets/apache-royale-logo.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!--
+
+ 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.
+
+-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 180 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g><path d="M34.727,161.312l-5.923,0l0,-21.483l10.563,0c0.994,0 1.954,0.117 2.879,0.351c0.925,0.234 1.743,0.602 2.454,1.104c0.711,0.502 1.278,1.151 1.701,1.947c0.422,0.795 0.634,1.76 0.634,2.894c0,0.885 -0.187,1.718 -0.56,2.499c-0.373,0.78 -0.87,1.477 -1.492,2.088c-0.621,0.612 -1.335,1.119 -2.14,1.522c-0.806,0.403 -1.641,0.669 -2.507,0.798c0.388,0.657 0.793,1.278 1.216,1.865c0.423,0.587 0.85,1.136 1.283,1.648c0.433,0.513 0.863,0.985 1.291,1.418c0.427,0.432 0.835,0.828 1.223,1.186c0.915,0.835 1.82,1.556 2.715,2.163l-7.385,0c-0.596,-0.567 -1.163,-1.248 -1.7,-2.044c-0.458,-0.676 -0.918,-1.514 -1.38,-2.514c-0.463,-0.999 -0.818,-2.155 -1.067,-3.468l-1.805,0l0,8.026Zm6.296,-15.187c0,-1.442 -0.351,-2.501 -1.052,-3.178c-0.701,-0.676 -1.753,-1.014 -3.155,-1.014l-2.089,0l0,9.324l2.089,0c0.745,0 1.384,-0.142 1.917,-0.425c0.532,-0.284 0.967,-0.662 1.305,-1.134c0.338,-0.473 0.587,-1.017 0.746,-1.634c0.159,-0.616 0.239,-1.263 0.239,-1.939Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M73.082,150.541c0,1.73 -0.298,3.289 -0.895,4.677c-0.596,1.387 -1.422,2.563 -2.476,3.528c-1.054,0.965 -2.303,1.706 -3.745,2.223c-1.442,0.517 -3.003,0.776 -4.684,0.776c-1.681,0 -3.242,-0.259 -4.685,-0.776c-1.442,-0.517 -2.69,-1.258 -3.744,-2.223c-1.054,-0.965 -1.88,-2.141 -2.477,-3.528c-0.596,-1.388 -0.895,-2.947 -0.895,-4.677c0,-1.761 0.296,-3.335 0.888,-4.722c0.592,-1.387 1.412,-2.561 2.462,-3.521c1.049,-0.96 2.294,-1.695 3.737,-2.208c1.442,-0.512 3.013,-0.768 4.714,-0.768c1.701,0 3.272,0.256 4.714,0.768c1.442,0.513 2.688,1.248 3.737,2.208c1.049,0.96 1.87,2.134 2.462,3.521c0.592,1.387 0.887,2.961 0.887,4.722Zm-6.027,0c0,-0.657 -0.03,-1.328 -0.089,-2.014c-0.06,-0.687 -0.169,-1.353 -0.328,-1.999c-0.16,-0.647 -0.376,-1.254 -0.649,-1.82c-0.274,-0.567 -0.624,-1.062 -1.052,-1.485c-0.428,-0.422 -0.942,-0.756 -1.544,-0.999c-0.602,-0.244 -1.306,-0.366 -2.111,-0.366c-0.816,0 -1.527,0.122 -2.133,0.366c-0.607,0.243 -1.124,0.574 -1.552,0.992c-0.428,0.417 -0.776,0.91 -1.044,1.477c-0.269,0.567 -0.48,1.171 -0.634,1.812c-0.154,0.642 -0.261,1.308 -0.321,1.999c-0.06,0.692 -0.09,1.37 -0.09,2.037c0,0.656 0.03,1.327 0.09,2.014c0.06,0.686 0.169,1.35 0.328,1.991c0.159,0.642 0.376,1.246 0.649,1.813c0.274,0.567 0.624,1.062 1.052,1.484c0.427,0.423 0.942,0.759 1.544,1.007c0.602,0.249 1.305,0.373 2.111,0.373c0.786,0 1.472,-0.127 2.059,-0.38c0.586,-0.254 1.094,-0.597 1.521,-1.03c0.428,-0.432 0.784,-0.934 1.067,-1.506c0.283,-0.572 0.507,-1.179 0.671,-1.82c0.164,-0.642 0.281,-1.301 0.351,-1.977c0.07,-0.676 0.104,-1.333 0.104,-1.969Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M93.267,139.829l-6.952,12.457l0,9.026l-5.923,0l0,-8.698l-7.026,-12.785l6.042,0l4.669,10.801l5.013,-10.801l4.177,0Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M114.899,151.033l0,0.283c-0.02,0.836 -0.107,1.701 -0.261,2.596c-0.154,0.895 -0.371,1.791 -0.649,2.686c-0.279,0.895 -0.612,1.78 -1,2.655c-0.387,0.875 -0.823,1.713 -1.305,2.514c-0.482,0.801 -1.002,1.551 -1.559,2.253c-0.557,0.701 -1.144,1.32 -1.76,1.857l-2.223,-1.283c0.348,-0.587 0.664,-1.226 0.947,-1.917c0.284,-0.691 0.54,-1.415 0.768,-2.171c0.229,-0.756 0.426,-1.531 0.59,-2.327c0.164,-0.796 0.301,-1.586 0.41,-2.372c0.109,-0.786 0.191,-1.559 0.246,-2.32c0.055,-0.761 0.082,-1.484 0.082,-2.171c0,-0.537 -0.002,-1.146 -0.007,-1.827c-0.005,-0.681 -0.045,-1.375 -0.12,-2.081c-0.074,-0.706 -0.196,-1.395 -0.365,-2.066c-0.169,-0.672 -0.42,-1.271 -0.753,-1.798c-0.334,-0.527 -0.761,-0.95 -1.283,-1.268c-0.523,-0.318 -1.172,-0.478 -1.947,-0.478c-0.687,0 -1.276,0.117 -1.768,0.351c-0.493,0.234 -0.91,0.547 -1.253,0.94c-0.343,0.393 -0.617,0.848 -0.821,1.365c-0.204,0.517 -0.363,1.062 -0.477,1.634c-0.115,0.571 -0.189,1.148 -0.224,1.73c-0.035,0.582 -0.052,1.131 -0.052,1.649l0,4.162l6.43,0l0,2.461l-6.43,0l0,5.222l-5.923,0l0,-10.92c0,-1.562 0.249,-3.014 0.746,-4.357c0.497,-1.342 1.201,-2.508 2.111,-3.498c0.91,-0.99 2.004,-1.765 3.282,-2.327c1.278,-0.562 2.703,-0.843 4.274,-0.843c1.064,0 2.061,0.151 2.991,0.455c0.93,0.303 1.778,0.721 2.544,1.253c0.766,0.532 1.45,1.164 2.051,1.895c0.602,0.731 1.104,1.529 1.507,2.394c0.403,0.865 0.709,1.78 0.918,2.745c0.208,0.965 0.303,1.939 0.283,2.924Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M134.174,161.312l-15.426,0l0,-21.483l5.923,0l0,18.753l9.503,0l0,2.73Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M152.389,161.312l-15.426,0l0,-21.483l15.426,0l0,2.745l-9.503,0l0,6.639l7.34,0l0,2.73l-7.34,0l0,6.624l9.503,0l0,2.745Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M62.969,124.121l0,0.189c-0.013,0.558 -0.072,1.136 -0.174,1.733c-0.103,0.598 -0.248,1.196 -0.434,1.793c-0.186,0.598 -0.408,1.189 -0.667,1.773c-0.259,0.584 -0.549,1.144 -0.871,1.678c-0.323,0.535 -0.669,1.036 -1.041,1.504c-0.372,0.468 -0.764,0.882 -1.176,1.24l-1.484,-0.856c0.233,-0.392 0.444,-0.819 0.633,-1.28c0.189,-0.462 0.36,-0.945 0.513,-1.449c0.153,-0.505 0.284,-1.023 0.393,-1.554c0.11,-0.531 0.201,-1.059 0.274,-1.584c0.073,-0.524 0.128,-1.041 0.164,-1.548c0.037,-0.508 0.055,-0.991 0.055,-1.45c0,-0.358 -0.001,-0.765 -0.005,-1.22c-0.003,-0.455 -0.03,-0.918 -0.079,-1.389c-0.05,-0.472 -0.132,-0.931 -0.244,-1.38c-0.113,-0.448 -0.281,-0.848 -0.503,-1.2c-0.223,-0.352 -0.508,-0.634 -0.857,-0.846c-0.349,-0.213 -0.782,-0.319 -1.3,-0.319c-0.458,0 -0.851,0.078 -1.18,0.234c-0.329,0.156 -0.608,0.365 -0.837,0.627c-0.229,0.263 -0.411,0.567 -0.547,0.912c-0.137,0.345 -0.243,0.709 -0.319,1.09c-0.076,0.382 -0.126,0.767 -0.15,1.156c-0.023,0.388 -0.034,0.755 -0.034,1.1l0,2.779l4.292,0l0,1.644l-4.292,0l0,3.485l-3.954,0l0,-7.29c0,-1.043 0.166,-2.012 0.498,-2.908c0.332,-0.897 0.801,-1.675 1.409,-2.336c0.607,-0.661 1.338,-1.179 2.191,-1.554c0.853,-0.375 1.804,-0.563 2.854,-0.563c0.71,0 1.376,0.102 1.997,0.304c0.62,0.203 1.186,0.482 1.698,0.837c0.511,0.355 0.967,0.777 1.369,1.265c0.402,0.488 0.737,1.021 1.006,1.598c0.269,0.578 0.473,1.189 0.613,1.833c0.139,0.644 0.202,1.295 0.189,1.952Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M77.401,125.207c0,0.836 -0.126,1.62 -0.379,2.35c-0.252,0.731 -0.617,1.366 -1.095,1.908c-0.478,0.541 -1.063,0.967 -1.753,1.279c-0.691,0.313 -1.474,0.469 -2.351,0.469c-0.67,0 -1.286,-0.132 -1.847,-0.394c-0.561,-0.262 -1.041,-0.666 -1.44,-1.21l0,6.683l-3.366,0l0,-16.812l1.295,0l1.494,2.5c0.146,-0.419 0.347,-0.799 0.602,-1.141c0.256,-0.342 0.551,-0.634 0.887,-0.876c0.335,-0.242 0.704,-0.43 1.105,-0.563c0.402,-0.133 0.825,-0.199 1.27,-0.199c0.877,0 1.66,0.156 2.351,0.468c0.69,0.312 1.275,0.739 1.753,1.28c0.478,0.541 0.843,1.177 1.095,1.907c0.253,0.731 0.379,1.514 0.379,2.351Zm-3.416,0c0,-0.292 -0.015,-0.603 -0.045,-0.932c-0.03,-0.328 -0.082,-0.655 -0.155,-0.981c-0.073,-0.325 -0.174,-0.637 -0.303,-0.936c-0.13,-0.299 -0.294,-0.563 -0.493,-0.792c-0.2,-0.229 -0.44,-0.411 -0.723,-0.547c-0.282,-0.137 -0.609,-0.205 -0.981,-0.205c-0.385,0 -0.718,0.067 -1.001,0.2c-0.282,0.132 -0.524,0.313 -0.727,0.542c-0.202,0.23 -0.368,0.492 -0.498,0.787c-0.129,0.296 -0.23,0.606 -0.303,0.932c-0.073,0.325 -0.125,0.654 -0.155,0.986c-0.03,0.332 -0.045,0.647 -0.045,0.946c0,0.265 0.02,0.559 0.06,0.881c0.04,0.322 0.103,0.646 0.189,0.971c0.087,0.326 0.2,0.641 0.339,0.946c0.139,0.306 0.31,0.578 0.513,0.817c0.202,0.239 0.438,0.43 0.707,0.573c0.269,0.143 0.576,0.214 0.921,0.214c0.379,0 0.708,-0.068 0.986,-0.204c0.279,-0.136 0.518,-0.319 0.718,-0.548c0.199,-0.229 0.363,-0.493 0.493,-0.792c0.129,-0.299 0.23,-0.611 0.303,-0.936c0.073,-0.325 0.125,-0.654 0.155,-0.986c0.03,-0.332 0.045,-0.644 0.045,-0.936Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M91.145,130.983l-3.366,0l0,-1.374c-0.398,0.544 -0.878,0.948 -1.439,1.21c-0.561,0.262 -1.177,0.394 -1.848,0.394c-0.876,0 -1.66,-0.156 -2.35,-0.469c-0.691,-0.312 -1.275,-0.738 -1.753,-1.279c-0.478,-0.542 -0.844,-1.177 -1.096,-1.908c-0.252,-0.73 -0.378,-1.514 -0.378,-2.35c0,-0.837 0.126,-1.62 0.378,-2.351c0.252,-0.73 0.618,-1.366 1.096,-1.907c0.478,-0.541 1.062,-0.968 1.753,-1.28c0.69,-0.312 1.474,-0.468 2.35,-0.468c0.445,0 0.868,0.066 1.27,0.199c0.402,0.133 0.77,0.321 1.106,0.563c0.335,0.242 0.63,0.534 0.886,0.876c0.256,0.342 0.457,0.722 0.603,1.141l1.494,-2.5l1.294,0l0,11.503Zm-3.386,-5.776c0,-0.299 -0.015,-0.614 -0.045,-0.946c-0.03,-0.332 -0.081,-0.661 -0.154,-0.986c-0.073,-0.326 -0.174,-0.636 -0.304,-0.932c-0.129,-0.295 -0.295,-0.557 -0.498,-0.787c-0.202,-0.229 -0.446,-0.41 -0.732,-0.542c-0.286,-0.133 -0.618,-0.2 -0.996,-0.2c-0.378,0 -0.707,0.068 -0.986,0.205c-0.279,0.136 -0.518,0.318 -0.717,0.547c-0.199,0.229 -0.364,0.493 -0.493,0.792c-0.13,0.299 -0.231,0.611 -0.304,0.936c-0.073,0.326 -0.124,0.653 -0.154,0.981c-0.03,0.329 -0.045,0.64 -0.045,0.932c0,0.292 0.015,0.604 0.045,0.936c0.03,0.332 0.081,0.661 0.154,0.986c0.073,0.325 0.174,0.637 0.304,0.936c0.129,0.299 0.294,0.563 0.493,0.792c0.199,0.229 0.438,0.412 0.717,0.548c0.279,0.136 0.608,0.204 0.986,0.204c0.345,0 0.652,-0.071 0.921,-0.214c0.269,-0.143 0.505,-0.334 0.707,-0.573c0.203,-0.239 0.374,-0.511 0.513,-0.817c0.14,-0.305 0.253,-0.62 0.339,-0.946c0.086,-0.325 0.149,-0.649 0.189,-0.971c0.04,-0.322 0.06,-0.616 0.06,-0.881Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M104.571,122.328l-1.454,0.578c-0.232,-0.73 -0.621,-1.291 -1.165,-1.683c-0.545,-0.392 -1.199,-0.588 -1.962,-0.588c-0.412,0 -0.779,0.065 -1.101,0.194c-0.322,0.13 -0.604,0.307 -0.846,0.533c-0.243,0.226 -0.449,0.488 -0.618,0.787c-0.169,0.299 -0.307,0.618 -0.413,0.956c-0.106,0.339 -0.183,0.689 -0.229,1.051c-0.047,0.362 -0.07,0.712 -0.07,1.051c0,0.365 0.02,0.733 0.06,1.105c0.04,0.372 0.108,0.729 0.204,1.071c0.096,0.342 0.224,0.661 0.383,0.956c0.16,0.296 0.361,0.553 0.603,0.772c0.242,0.219 0.531,0.392 0.866,0.518c0.336,0.126 0.723,0.189 1.161,0.189c0.352,0 0.687,-0.053 1.006,-0.159c0.318,-0.106 0.611,-0.256 0.876,-0.448c0.266,-0.193 0.501,-0.422 0.707,-0.688c0.206,-0.265 0.369,-0.561 0.488,-0.886l1.464,0.538c-0.219,0.524 -0.509,0.978 -0.871,1.359c-0.362,0.382 -0.772,0.698 -1.23,0.946c-0.458,0.249 -0.95,0.434 -1.474,0.553c-0.525,0.12 -1.056,0.18 -1.594,0.18c-0.87,0 -1.676,-0.148 -2.42,-0.444c-0.744,-0.295 -1.386,-0.71 -1.927,-1.245c-0.541,-0.534 -0.965,-1.168 -1.27,-1.902c-0.306,-0.734 -0.458,-1.539 -0.458,-2.415c0,-0.883 0.151,-1.693 0.453,-2.43c0.302,-0.738 0.722,-1.372 1.26,-1.903c0.538,-0.531 1.178,-0.943 1.922,-1.235c0.744,-0.292 1.557,-0.438 2.44,-0.438c0.558,0 1.103,0.061 1.634,0.184c0.531,0.123 1.024,0.312 1.479,0.568c0.455,0.256 0.863,0.579 1.225,0.971c0.362,0.392 0.652,0.86 0.871,1.404Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M118.326,124.39c0,0.777 -0.095,1.587 -0.284,2.43c-0.189,0.844 -0.453,1.67 -0.792,2.48c-0.338,0.81 -0.743,1.572 -1.215,2.286c-0.471,0.714 -0.989,1.33 -1.554,1.848l-1.265,-0.688c0.18,-0.332 0.349,-0.703 0.508,-1.115c0.16,-0.412 0.304,-0.848 0.434,-1.31c0.129,-0.461 0.245,-0.938 0.348,-1.429c0.103,-0.491 0.19,-0.978 0.259,-1.459c0.07,-0.482 0.123,-0.95 0.16,-1.405c0.036,-0.454 0.054,-0.878 0.054,-1.269c0,-0.259 -0.01,-0.537 -0.029,-0.832c-0.02,-0.296 -0.062,-0.591 -0.125,-0.887c-0.063,-0.295 -0.148,-0.579 -0.254,-0.851c-0.106,-0.272 -0.247,-0.511 -0.423,-0.717c-0.176,-0.206 -0.389,-0.372 -0.638,-0.498c-0.249,-0.126 -0.543,-0.189 -0.881,-0.189c-0.332,0 -0.628,0.074 -0.887,0.224c-0.259,0.149 -0.488,0.345 -0.687,0.587c-0.199,0.243 -0.37,0.52 -0.513,0.832c-0.142,0.312 -0.259,0.632 -0.348,0.961c-0.09,0.329 -0.155,0.652 -0.195,0.971c-0.039,0.319 -0.059,0.604 -0.059,0.857l0,5.766l-3.377,0l0,-15.736l3.367,0l0,5.926c0.431,-0.631 0.961,-1.117 1.588,-1.459c0.628,-0.342 1.323,-0.513 2.087,-0.513c0.797,0 1.491,0.129 2.082,0.388c0.59,0.259 1.082,0.62 1.474,1.081c0.391,0.461 0.684,1.009 0.876,1.643c0.193,0.635 0.289,1.327 0.289,2.077Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M123.316,125.525c0.411,0.093 0.823,0.166 1.235,0.22c0.412,0.053 0.827,0.079 1.245,0.079c0.438,0 0.845,-0.041 1.22,-0.124c0.375,-0.083 0.7,-0.223 0.976,-0.419c0.276,-0.195 0.493,-0.456 0.652,-0.781c0.16,-0.326 0.239,-0.731 0.239,-1.216c0,-0.391 -0.053,-0.75 -0.159,-1.075c-0.106,-0.326 -0.264,-0.604 -0.473,-0.837c-0.209,-0.232 -0.467,-0.413 -0.772,-0.543c-0.305,-0.129 -0.661,-0.194 -1.066,-0.194c-0.378,0 -0.718,0.07 -1.021,0.209c-0.302,0.14 -0.567,0.327 -0.796,0.563c-0.229,0.236 -0.425,0.51 -0.588,0.822c-0.163,0.312 -0.297,0.637 -0.403,0.976c-0.107,0.338 -0.183,0.68 -0.229,1.026c-0.047,0.345 -0.07,0.67 -0.07,0.976c0,0.053 0,0.106 0,0.159c0,0.053 0.003,0.106 0.01,0.159Zm8.296,-2.27c0,0.471 -0.076,0.891 -0.229,1.26c-0.152,0.368 -0.36,0.692 -0.622,0.971c-0.262,0.278 -0.566,0.514 -0.912,0.707c-0.345,0.192 -0.713,0.35 -1.105,0.473c-0.392,0.123 -0.795,0.211 -1.21,0.264c-0.415,0.053 -0.819,0.079 -1.21,0.079c-0.498,0 -0.99,-0.034 -1.474,-0.104c-0.485,-0.07 -0.963,-0.181 -1.435,-0.334c0.073,0.438 0.19,0.855 0.349,1.25c0.159,0.395 0.372,0.741 0.637,1.036c0.266,0.296 0.593,0.53 0.981,0.702c0.389,0.173 0.849,0.259 1.38,0.259c0.352,0 0.687,-0.053 1.006,-0.159c0.319,-0.106 0.611,-0.256 0.876,-0.448c0.266,-0.193 0.5,-0.422 0.703,-0.688c0.202,-0.265 0.366,-0.561 0.493,-0.886l1.454,0.538c-0.219,0.524 -0.52,0.978 -0.902,1.359c-0.381,0.382 -0.813,0.698 -1.294,0.946c-0.482,0.249 -0.993,0.434 -1.534,0.553c-0.541,0.12 -1.078,0.18 -1.609,0.18c-0.876,0 -1.686,-0.148 -2.43,-0.444c-0.744,-0.295 -1.384,-0.708 -1.922,-1.24c-0.538,-0.531 -0.96,-1.165 -1.265,-1.902c-0.306,-0.737 -0.458,-1.544 -0.458,-2.42c0,-0.877 0.152,-1.683 0.458,-2.421c0.305,-0.737 0.727,-1.371 1.265,-1.902c0.538,-0.531 1.178,-0.944 1.922,-1.24c0.744,-0.295 1.554,-0.443 2.43,-0.443c0.425,0 0.86,0.03 1.305,0.09c0.445,0.059 0.876,0.154 1.295,0.283c0.418,0.13 0.813,0.298 1.185,0.503c0.372,0.206 0.695,0.46 0.971,0.762c0.276,0.302 0.495,0.653 0.657,1.051c0.163,0.398 0.244,0.853 0.244,1.365Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M156.233,141.953l-1.264,0l0,-3.998l-1.247,0l0,-0.585l3.758,0l0,0.585l-1.247,0l0,3.998Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M158.753,138.535l-0.356,3.418l-0.78,0l0.78,-4.583l1.155,0l1.072,3.497l1.086,-3.497l1.155,0l0.649,4.583l-1.286,0l-0.378,-3.329l-0.895,3.329l-1.155,0l-1.047,-3.418Z" style="fill:#010001;fill-rule:nonzero;"/></g><g><path d="M79.004,37.698c-1.912,-2.482 -3.018,-5.577 -3.018,-8.864c0,-8.018 6.51,-14.528 14.528,-14.528c8.017,0 14.527,6.51 14.527,14.528c0,3.262 -1.089,6.332 -2.972,8.804l24.775,33.96l24.593,-16.236c-0.097,-0.68 -0.147,-1.37 -0.147,-2.064c0,-8.018 6.51,-14.528 14.528,-14.528c8.017,0 14.527,6.51 14.527,14.528c0,7.048 -5.031,12.931 -11.695,14.251l-8.1,31.684c3.563,2.647 5.871,6.888 5.871,11.668c0,8.018 -6.51,14.527 -14.528,14.527c-8.018,0 -14.527,-6.509 -14.527,-14.527c0,-2.66 0.726,-5.205 2.027,-7.402l-14.751,-20.194l-21.183,14.027c10.62,0.951 21.499,3.025 33.073,6.216c-1.498,2.173 -2.018,4.863 -1.762,7.945c-32.183,-8.508 -58.329,-8.39 -88.598,-0.007c0.146,-2.849 -0.165,-5.585 -1.424,-7.973c11.381,-3.263 22.193,-5.347 32.901,-6.256l-21.305,-14.082l-14.671,20.167c1.361,2.233 2.121,4.837 2.121,7.559c0,8.018 -6.509,14.527 -14.527,14.527c-8.018,0 -14.528,-6.509 -14.528,-14.527c0,-4.587 2.132,-8.699 5.48,-11.367l-8.037,-31.964c-6.717,-1.277 -11.802,-7.186 -11.802,-14.272c0,-8.018 6.509,-14.528 14.527,-14.528c8.018,0 14.528,6.51 14.528,14.528c0,0.674 -0.047,1.345 -0.14,2.006l24.962,16.489l24.747,-34.095Zm66.867,59.982l0.028,-0.013l2.997,6.617c-2.598,1.177 -4.266,3.765 -4.266,6.617c0,4.009 3.254,7.263 7.263,7.263c4.009,0 7.264,-3.254 7.264,-7.263c0,-4.012 -3.252,-7.264 -7.264,-7.264l0,-7.249l-0.001,-0.001l0.001,-0.007l0,-0.007l0.002,0l7.632,-29.98l-0.015,-0.008l3.153,-6.544c0.983,0.474 2.061,0.72 3.153,0.72c4.008,0 7.263,-3.254 7.263,-7.263c0,-4.009 -3.255,-7.264 -7.263,-7.264c-4.009,0 -7.264,3.255 -7.264,7.264c0,1.82 0.683,3.574 1.915,4.914l-5.324,4.891l0.002,0.002l-0.015,0.01l-0.012,0.011l-0.002,-0.002l-23.233,15.385l13.986,19.171Zm-96.52,-19.127l-23.597,-15.596l0.003,-0.008l-5.423,-4.824c1.183,-1.33 1.837,-3.047 1.837,-4.827c0,-4.009 -3.255,-7.264 -7.264,-7.264c-4.009,0 -7.264,3.255 -7.264,7.264c0,4.009 3.255,7.263 7.264,7.263c1.044,0 2.075,-0.224 3.024,-0.659l3.012,6.58l0.005,-0.001l7.516,29.914l0.004,0l0.001,0.023l0.001,0.002c0.001,0.002 0.001,0.005 0,0.008l0.397,7.22c-3.85,0.212 -6.864,3.396 -6.864,7.253c0,4.009 3.255,7.263 7.264,7.263c4.009,0 7.263,-3.254 7.263,-7.263c0,-2.821 -1.632,-5.386 -4.187,-6.58l3.077,-6.58l0.003,0.001l13.928,-19.189Zm70.238,-2.166l-24.639,-33.732l0.007,-0.005l-2.219,-6.901c3.003,-0.966 5.039,-3.76 5.039,-6.915c0,-4.009 -3.254,-7.264 -7.263,-7.264c-4.009,0 -7.264,3.255 -7.264,7.264c0,3.114 1.985,5.882 4.935,6.88l-2.324,6.869l0.008,0.006l-24.61,33.83l29.131,19.244l29.199,-19.276Z" style="fill:url(#_Linear1);"/><clipPath id="_clip2"><path d="M57.281,67.662l-3.022,4.132l6.994,4.609l3.064,-4.224l-7.036,-4.517Z"/></clipPath><g clip-path="url(#_clip2)"><use xlink:href="#_Image3" x="56.271" y="67.808" width="12.182px" height="10.876px" transform="matrix(0.937047,0,0,0.988712,0,0)"/></g><clipPath id="_clip4"><path d="M53.19,87.5l3.151,-4.342l-6.974,-4.615l-3.289,4.532l7.112,4.425Z"/></clipPath><g clip-path="url(#_clip4)"><use xlink:href="#_Image5" x="46.621" y="80.879" width="13.37px" height="11.415px" transform="matrix(0.955031,-1.0603e-16,-5.28031e-17,0.951215,2.84217e-14,1.42109e-14)"/></g><clipPath id="_clip6"><path d="M120.179,86.247l4.465,-2.943l-5.042,-6.913l-4.453,2.94l5.03,6.916Z"/></clipPath><g clip-path="url(#_clip6)"><use xlink:href="#_Image7" x="121.463" y="76.129" width="10.47px" height="12.717px" transform="matrix(0.951844,-5.28379e-17,5.43015e-17,0.97821,-2.84217e-14,0)"/></g><clipPath id="_clip8"><path d="M131.353,68.632l-4.501,2.976l5.046,6.898l4.432,-2.934l-4.977,-6.94Z"/></clipPath><g clip-path="url(#_clip8)"><use xlink:href="#_Image9" x="129.864" y="69.382" width="10.618px" height="12.687px" transform="matrix(0.965234,0,5.4174e-17,0.975912,0,0)"/></g></g><defs><linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(161.384,102.511,-102.511,161.384,11.2355,22.3133)"><stop offset="0" style="stop-color:#f60e0e;stop-opacity:1"/><stop offset="1" style="stop-color:#f66629;stop-opacity:1"/></linearGradient><image id="_Image3" width="13px" height="11px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAALCAYAAACksgdhAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABXklEQVQokW2Ru0oDURCGvzlnTWTjJSaIBsXOC6JPYKdWqawsxd4XELbQwjyBpbVgIYigtha+gphCUIwkKJqAJNl1ze45FrkiTjPDMN8/N7HWWgDf90kmk0j5lXBrAxp1ABA6vhuAA1AsFkmn06Qcjeztohv1du0/ANKByuUyYRiSOjnGfbjHVUJCBMUf67Ba4vjQAD93t0Tnp31VAYUgSnoNe9Ba6fGw3mzSuLogNgYDmO5IIigBJdLXmp1DvEzKdlWGgJyjmHIUWS1MOJoxJbgiJJSgkwmGz25wvIwLAoWaTwsoRYamtQRovjGEWhjXihELo/tHyNJKf1cv4/b2rcaWp5+Yl1ZMJTJ8RIav9Tz+Zp4gCHAYuKaXbYOFmo9vLc+tmMBagukZ4u0dTLXKeBQNXHXgJ1421Uu/RYaXxVVKb+9UKhVyuRziz0/av9CgUOGz2X7owjIHl9dIdpJfkad9NZKVTPQAAAAASUVORK5CYII="/><image id="_Image5" width="14px" height="12px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABh0lEQVQokX2ST09TURDFf3PbPirVhIQ/6eolJlYTE23iJ3CBxLiBsGer7IwbNxh3fAP3xgUfoC5cYIImxDVhQySEJaX0AY9QKa2vd8bFa18fiXo2c3Nnzj1zZq6YmQHYacT7FwvY4QEAa9OTZJBRlPHViNhoNGgeHdHa/o7/+iUryB7IkRBwo3MYhtyr1biLUs7VrJ91uYFhrgjQ6XSoVqsE+3u4H1uUSwWOB8qZWko+7w7VKzdb9d7TP2kRL81zGbWJ1Yi80vZKc6AkOcG1mUrOoxm91RX6W5v0zPilxoUZ515pe6M1UGLVMXm2krY62PiIfdskECiIUBIIDMquwC2nTDrhxAvNxGNzVdajFuJ/7ll/+RkkvzPzBiTAtZGqq3LqlejBI6Lni1zu7lBM3rwck3KDC0RwQMlBII7y9AxTb98xdd3n+PYdpFubtf8tWgUSA//hE1f3HxLHMfV6PfX4TwwXXXn1Gnk6z0SvRxiGaSpT/IsaAu7xEyY2PkOxhKriXPpn/gA7g66v7cSXfAAAAABJRU5ErkJggg=="/><image id="_Image7" width="11px" height="13px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABVklEQVQokWWQvy9DYRSGn/Pd79LS6L2EkPpRYmCRSAxGYiQxSiQGidhYuqm1EX+AsPk7OpnEINHJICEYmi4MvajU1R5Dr/7gLGd5zvue9xVVVYDzs1MeTo7gPSCb7gMRAIgWgAnDkGKxyOTMLP7aBmIMueeAfyNgXNfF931SfpJ06R6t1zuA9m1Qxb2+oPdwm9TtFem4BSD3VP4vXs3uaO0yT6jKy7fyUPmm8PZFUGs4ZKeSrZ9rl3kAXBGSjmGk22GqxzaB3GPkIIJpeQhxRxhwDWPdDpNx29FE4+cI/M2RsMJgl8NE3OJZE6k32pHK0pj+7fSzrpS+atx9hNy8ha3qmmDbxByh3zWMxizT8ws4K+uIMbSStN0IkBgaJrWVoeqlCAoFXt+DCG4XF7Crm8R2D7DGUi2VCIKA/b09pLI8rr+wjKbpyhxj5hYBUFXK5TKe5wHwA3tQZ8pDGCVdAAAAAElFTkSuQmCC"/><image id="_Image9" width="11px" height="13px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABV0lEQVQokV2RsUoDQRRFz8xOVrOLRgUVtHIlgqWlH+Af+A3+gEWKNLGw087GxlbsxEKwEIsoiKCCiBCIESViFFFUXJPszozFmpjkVo/h3MfhjbDWWoAwDPE8j1bM5QnN9Rz2uQoieVNYQ/H4hCAIUEqRihrEm6vE+9sgBJ1x7M1lQY5P4nkeqeszKCzB1ek/2OIFKH1epJwZof9gB3F7wUSfw4CSCdO9GIW16MNdyo7AG3BJS0HKkaQ7wb9Z5qcyAHwby91PzFPT8BEZIiy9kQD5ICnUmpqHesxLpPmKLdr2OHd3BeUwxleStCNwHfCRbb49tXSsgEoY8VjXvEeGhrEgwFlYTDSSpaKt86kt9/WYWkPzOTiKXNnCXV77gztu2ipU65rq7DwfuQ3CmTmMMR3OPTdFpaiMBQy9vpEefsV1XWTvlyIgP52BOKJxtEe5VCKbzeL7Pr/lwn7EedK+FgAAAABJRU5ErkJggg=="/></defs></svg>
\ No newline at end of file
diff --git a/examples/royale/JewelExample/src/main/resources/jewel-example-index-template.html b/examples/royale/JewelExample/src/main/resources/jewel-example-index-template.html
index d98e4cf..764fe53 100644
--- a/examples/royale/JewelExample/src/main/resources/jewel-example-index-template.html
+++ b/examples/royale/JewelExample/src/main/resources/jewel-example-index-template.html
@@ -17,10 +17,9 @@
<!DOCTYPE html>
<html>
<head>
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Custom Template for injecting custom style CSS">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="${application}.css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
${head}
diff --git a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
index 02b57dc..3e7d8d1 100644
--- a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
+++ b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
@@ -20,16 +20,59 @@
*/
@namespace "http://www.w3.org/1999/xhtml";
+@namespace j "library://ns.apache.org/royale/jewel";
-.Application
+.mainContent
{
- padding: 10px;
- margin: 10px;
+ padding: 5px;
}
-/* .container {
- background: #efefef;
- border-radius: 10px;
- padding: 20px;
-} */
-
\ No newline at end of file
+.jewel.section
+{
+ padding-top: 20px;
+}
+
+.iconListItemRenderer
+{
+ IItemRenderer: ClassReference("itemRenderers.IconListItemRenderer");
+}
+.iconListItemRenderer .fonticon
+{
+ margin-right: 24px;
+}
+
+.navIconLinkItemRenderer
+{
+ IItemRenderer: ClassReference("itemRenderers.NavigationIconLinkItemRenderer");
+}
+
+.navIconLinkItemRenderer .fonticon
+{
+ margin-right: 24px;
+}
+
+.jewel.drawerheader::before
+{
+ /*padding-top: 9 / 16 * 100%;*/
+ padding-top: 56.25%; /* 16:9 Aspect Ratio */
+}
+
+.wrapper {
+ /* outline: 0px dashed navy; */
+}
+
+.box {
+ background: #dedede;
+ border-radius: 3px;
+ padding: 12px;
+ color: white;
+ /* outline: 1px dashed navy; */
+}
+
+.jewel.item.string
+{
+ background: #dedede;
+ border: 1px dashed #cccccc;
+ border-radius: 3px;
+ padding: 14px;
+}
\ No newline at end of file
diff --git a/examples/royale/JewelExample/src/main/royale/AlertPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/AlertPlayGround.mxml
index e57bb47..2845c46 100644
--- a/examples/royale/JewelExample/src/main/royale/AlertPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/AlertPlayGround.mxml
@@ -17,47 +17,89 @@
limitations under the License.
-->
-<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:js="library://ns.apache.org/royale/basic"
- xmlns:html="library://ns.apache.org/royale/html"
- xmlns:j="library://ns.apache.org/royale/jewel"
- className="container" width="350">
+<j:SectionContent xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:html="library://ns.apache.org/royale/html">
<fx:Script>
<![CDATA[
import org.apache.royale.jewel.Alert;
import org.apache.royale.events.CloseEvent;
import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.core.IBeadView;
+ import org.apache.royale.jewel.beads.views.AlertView;
+ import org.apache.royale.jewel.beads.layouts.HorizontalLayout;
+ import org.apache.royale.core.IBeadLayout;
+ import org.apache.royale.jewel.CheckBox;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.beads.layouts.VerticalLayout;
// Event handler function uses a static method to show
// a pop-up window with the title, message, and requested buttons.
private function clickHandler(event:MouseEvent):void {
var alert:Alert = Alert.show("Do you want to save your changes?", "Save Changes", 3);
alert.addEventListener(CloseEvent.CLOSE, alertClickHandler);
- // alert.height = 300;
+ }
+
+ private var alert:Alert;
+ private var check:CheckBox;
+ // changing ControlBar's Buttons Layout
+ private function clickHandler2(event:MouseEvent):void {
+ alert = Alert.show("This example shows access to AlertView and ControlBar to expand Buttons layout and change defaults. The height of the alert is set up to 300px too.", "Save Changes", 3);
+ alert.height = 300;
+
+ check = new CheckBox();
+ check.selected = true;
+ check.text = "Buttons must fill control bar space";
+ check.addEventListener(Event.CHANGE, expandButtons);
+
+ expandButtons();
+ }
+
+ private function expandButtons(event:Event = null):void {
+ var alertView:AlertView = alert.getBeadByType(IBeadView) as AlertView;
+
+ if(event == null)
+ {
+ var verticalLayout:VerticalLayout = new VerticalLayout();
+ verticalLayout.gap = 9;
+ alertView.content.addBead(verticalLayout);
+
+ alertView.content.addElement(check);
+ }
+
+ var layout:HorizontalLayout = alertView.controlBar.getBeadByType(IBeadLayout) as HorizontalLayout;
+ layout.itemsExpand = check.selected;
}
// Event handler function for displaying the selected Alert button.
private function alertClickHandler(event:CloseEvent):void {
- if (event.detail==Alert.YES)
+ if (event.detail == Alert.YES)
status.text="You answered Yes";
else
status.text="You answered No";
}
]]>
</fx:Script>
+
+ <j:Card width="350">
+ <html:H3 text="Jewel Alert"/>
+
+ <!-- Alert 1-->
+ <j:Label text="Click the button below to display a simple Alert window"
+ multiline="true"/>
+ <j:Button text="Click Me" click="Alert.show('This is an Alert component example that shows a label text and the default OK button.', 'Alert Example')"/>
- <js:beads>
- <j:VerticalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
-
- <html:H3 text="Jewel Alert"/>
-
- <js:MultilineLabel text="Click the button below to display a simple Alert window"/>
- <j:TextButton text="Click Me" click="Alert.show('This is an Alert component example that shows a label text and the default OK button.', 'Alert Example')"/>
+ <!-- Alert 2-->
+ <j:Label text="Click the button below to display an Alert window and capture the button pressed by the user."
+ multiline="true"/>
+ <j:Button text="Click Me" click="clickHandler(event)"/>
+ <j:Label id="status"/>
+
+ <!-- Alert 3 (Complex Example)-->
+ <j:Label text="This is a complex example that add and retrieve beads at runtime. Click the button below to display an Alert window that add content and make changes in some layout parts."
+ multiline="true"/>
+ <j:Button text="Click Me" click="clickHandler2(event)"/>
+ </j:Card>
- <js:MultilineLabel text="Click the button below to display an Alert window and capture the button pressed by the user."/>
- <j:TextButton text="Click Me" click="clickHandler(event)"/>
- <j:Label id="status"/>
-
-</js:Group>
+</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/App.mxml b/examples/royale/JewelExample/src/main/royale/App.mxml
index 72aea7c..dd54061 100644
--- a/examples/royale/JewelExample/src/main/royale/App.mxml
+++ b/examples/royale/JewelExample/src/main/royale/App.mxml
@@ -21,21 +21,15 @@
<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:html="library://ns.apache.org/royale/html"
xmlns:local="*">
<fx:Style source="../../main/resources/jewel-example-styles.css"/>
- <js:valuesImpl>
+ <j:valuesImpl>
<js:SimpleCSSValuesImpl />
- </js:valuesImpl>
- <js:initialView>
- <js:View>
- <js:beads>
- <j:VerticalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
- <html:H1 text="Apache Royale Jewel UI Set Theme Showcase"/>
- <local:MainContent/>
- </js:View>
- </js:initialView>
+ </j:valuesImpl>
+
+ <j:initialView>
+ <local:MainContent/>
+ </j:initialView>
</j:Application>
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index 06e2411..e99c23e 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -17,35 +17,88 @@
limitations under the License.
-->
-<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:js="library://ns.apache.org/royale/basic"
- xmlns:html="library://ns.apache.org/royale/html"
- xmlns:j="library://ns.apache.org/royale/jewel"
- className="container">
-
+<j:SectionContent xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:html="library://ns.apache.org/royale/html"
+ xmlns:js="library://ns.apache.org/royale/basic">
+
<fx:Script>
<![CDATA[
private function clickHandler(event:MouseEvent):void {
- button.primary = !button.primary;
+ button.emphasis = (button.emphasis == Button.PRIMARY) ? "" : Button.PRIMARY;
}
]]>
</fx:Script>
+
+ <j:beads>
+ <js:ContainerDataBinding/>
+ </j:beads>
- <js:beads>
- <j:HorizontalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
-
- <html:H3 text="Jewel Button"/>
-
- <j:Button id="button" click="clickHandler(event)"/>
- <j:Button primary="true"/>
- <j:Button secondary="true"/>
- <j:Button emphasized="true"/>
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="1"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel Button"/>
+
+ <j:Button text="Default" id="button" click="clickHandler(event)"/>
+ <j:Button text="Button With More Text"/>
+ <j:Button text="Primary" emphasis="{Button.PRIMARY}"/>
+ <j:Button text="Secondary" emphasis="{Button.SECONDARY}"/>
+ <j:Button text="Emphasized" emphasis="{Button.EMPHASIZED}"/>
+ <j:Button text="Disabled" emphasis="{Button.PRIMARY}">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:Button>
+ </j:Card>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H4 text="Button Sizes"/>
+
+ <j:Button text="xsmall">
+ <j:beads>
+ <j:SizeControl size="{SizeControl.XSMALL}"/>
+ </j:beads>
+ </j:Button>
+ <j:Button text="small" emphasis="{Button.PRIMARY}">
+ <j:beads>
+ <j:SizeControl size="{SizeControl.SMALL}"/>
+ </j:beads>
+ </j:Button>
+ <j:Button text="large" emphasis="{Button.SECONDARY}">
+ <j:beads>
+ <j:SizeControl size="{SizeControl.LARGE}"/>
+ </j:beads>
+ </j:Button>
+ <j:Button text="xlarge" emphasis="{Button.EMPHASIZED}">
+ <j:beads>
+ <j:SizeControl size="{SizeControl.XLARGE}"/>
+ </j:beads>
+ </j:Button>
+ </j:Card>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H4 text="Button with Icons"/>
+
+ <j:IconButton text="print" emphasis="primary">
+ <j:icon>
+ <js:FontIcon text="{MaterialIconType.PRINT}" material="true"/>
+ </j:icon>
+ </j:IconButton>
+ <j:IconButton emphasis="primary">
+ <j:icon>
+ <js:FontIcon text="{MaterialIconType.FACE}" material="true"/>
+ </j:icon>
+ </j:IconButton>
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
- <j:Button>
- <j:beads>
- <j:Disabled/>
- </j:beads>
- </j:Button>
-
-</js:Group>
+</j:SectionContent>
diff --git a/examples/royale/MDLDynamicTableExample/src/MDLDynamicTableExample.mxml b/examples/royale/JewelExample/src/main/royale/CardPlayGround.mxml
similarity index 66%
copy from examples/royale/MDLDynamicTableExample/src/MDLDynamicTableExample.mxml
copy to examples/royale/JewelExample/src/main/royale/CardPlayGround.mxml
index 12c133b..e39b8cf 100644
--- a/examples/royale/MDLDynamicTableExample/src/MDLDynamicTableExample.mxml
+++ b/examples/royale/JewelExample/src/main/royale/CardPlayGround.mxml
@@ -17,20 +17,17 @@
limitations under the License.
-->
-<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:js="library://ns.apache.org/royale/basic"
- xmlns:local="*">
-
- <fx:Style source="resources/mdl-styles.css"/>
-
- <js:valuesImpl>
- <js:SimpleCSSValuesImpl />
- </js:valuesImpl>
-
- <js:initialView>
- <js:View width="100%" height="100%">
- <local:MainView />
- </js:View>
- </js:initialView>
-
- </js:Application>
+<j:SectionContent xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:html="library://ns.apache.org/royale/html">
+
+ <j:Card width="600">
+ <html:H3 text="items expand test"/>
+
+ <j:HGroup itemsExpand="true" gap="3">
+ <j:Button text="Hello"/>
+ <j:Button text="Apache"/>
+ <j:Button text="Royale!!!!"/>
+ </j:HGroup>
+ </j:Card>
+</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/CheckBoxPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/CheckBoxPlayGround.mxml
index 5190f82..9d37063 100644
--- a/examples/royale/JewelExample/src/main/royale/CheckBoxPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/CheckBoxPlayGround.mxml
@@ -17,32 +17,28 @@
limitations under the License.
-->
-<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:js="library://ns.apache.org/royale/basic"
- xmlns:html="library://ns.apache.org/royale/html"
- xmlns:j="library://ns.apache.org/royale/jewel"
- className="container">
-
- <js:beads>
- <j:VerticalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
-
- <html:H3 text="Jewel CheckBox"/>
+<j:SectionContent xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:html="library://ns.apache.org/royale/html">
- <j:CheckBox text="Not Checkbox"/>
+ <j:Card width="350">
+ <html:H3 text="Jewel CheckBox"/>
- <j:CheckBox text="Checked" selected="true"/>
+ <j:CheckBox text="Not Checkbox"/>
- <j:CheckBox text="Disabled">
- <j:beads>
- <j:Disabled/>
- </j:beads>
- </j:CheckBox>
+ <j:CheckBox text="Checked" selected="true"/>
- <j:CheckBox text="Checked And Disabled" selected="true">
- <j:beads>
- <j:Disabled/>
- </j:beads>
- </j:CheckBox>
+ <j:CheckBox text="Disabled">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:CheckBox>
-</js:Group>
+ <j:CheckBox text="Checked And Disabled" selected="true">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:CheckBox>
+ </j:Card>
+
+</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/ComboBoxPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ComboBoxPlayGround.mxml
new file mode 100644
index 0000000..6e4fbe7
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/ComboBoxPlayGround.mxml
@@ -0,0 +1,114 @@
+<?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:SectionContent 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:html="library://ns.apache.org/royale/html"
+ xmlns:models="models.*">
+
+ <fx:Script>
+ <![CDATA[
+ private function watchmenComboBoxSelectedItem(event:Event):void {
+ watchmenComboBoxResult.html = "<strong>ComboBox selectedItem:</strong> " + event.target.selectedItem;
+ }
+
+ private function avengersComboBoxSelectedItem(event:Event):void {
+ avengersComboBoxResult.html = "<strong>ComboBox selectedItem:</strong> " + event.target.selectedItem.label;
+ }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ContainerDataBinding/>
+ </j:beads>
+
+ <j:model>
+ <models:ListsModel id="listModel"/>
+ </j:model>
+
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="1"
+ tabletNumerator="1" tabletDenominator="1"
+ phoneNumerator="1" phoneDenominator="1">
+
+ <j:Card>
+ <html:H3 text="Jewel ComboBox (String Collection)"/>
+
+ <j:Grid gap="true" itemsVerticalAlign="itemsCentered">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="1"
+ itemsVerticalAlign="itemsCentered" width="290">
+ <j:ComboBox id="watchmenComboBox" dataProvider="{listModel.watchmen}" change="watchmenComboBoxSelectedItem(event)"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="1"
+ itemsVerticalAlign="itemsCentered" width="290">
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:Label text="Select Index: "/>
+ <j:NumericStepper valueChange="watchmenComboBox.selectedIndex = event.target.value" minimum="0" maximum="5"/>
+ </j:HGroup>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="1"
+ itemsVerticalAlign="itemsCentered" width="290">
+ <j:Label id="watchmenComboBoxResult" html="<strong>ComboBox selectedItem:</strong> "/>
+ </j:GridCell>
+ </j:Grid>
+ </j:Card>
+ </j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="1"
+ tabletNumerator="1" tabletDenominator="1"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel ComboBox (Object Collection)"/>
+
+ <j:Grid gap="true" itemsVerticalAlign="itemsCentered">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="1"
+ itemsVerticalAlign="itemsCentered" width="290">
+ <j:ComboBox id="avengersComboBox" labelField="label" dataProvider="{listModel.avengers}" change="avengersComboBoxSelectedItem(event)"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="1"
+ itemsVerticalAlign="itemsCentered" width="290">
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:Label text="Select Index: "/>
+ <j:NumericStepper valueChange="avengersComboBox.selectedIndex = event.target.value" minimum="0" maximum="8"/>
+ </j:HGroup>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="1"
+ itemsVerticalAlign="itemsCentered" width="290">
+ <j:Label id="avengersComboBoxResult" html="<strong>ComboBox selectedItem:</strong> "/>
+ </j:GridCell>
+ </j:Grid>
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
+
+</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml
new file mode 100644
index 0000000..597ae41
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml
@@ -0,0 +1,136 @@
+<?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:SectionContent 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:html="library://ns.apache.org/royale/html">
+
+ <fx:Script>
+ <![CDATA[
+ import org.apache.royale.html.accessories.DateFormatDDMMYYYY;
+
+ private function dateChooserDefaultChanged():void
+ {
+ dateChooserDefaultSelectedDate.html = "<strong>DateChooser selected date:</strong> " + dateChooserDefault.selectedDate;
+ dateFieldDefault.selectedDate = dateChooserDefault.selectedDate;
+ }
+
+ private function dateFieldDefaultChanged():void
+ {
+ dateFieldDefaultSelectedDate.html = "<strong>DateField selected date:</strong> " + dateFieldDefault.selectedDate;
+ dateChooserDefault.selectedDate = dateFieldDefault.selectedDate;
+ }
+
+ private function dateFieldToToday():void
+ {
+ dateFieldDefault.selectedDate = new Date();
+ }
+
+ // -- DateChooser Spanish
+
+ private function dateChooserESChanged():void
+ {
+ dateChooserESSelectedDate.html = "<strong>DateChooser fecha seleccionada:</strong> " + dateChooserES.selectedDate;
+ dateFieldES.selectedDate = dateChooserES.selectedDate;
+ }
+
+ private function dateFieldESChanged():void
+ {
+ dateFieldESSelectedDate.html = "<strong>DateField fecha seleccionada:</strong> " + dateFieldES.selectedDate;
+ dateChooserES.selectedDate = dateFieldES.selectedDate;
+ }
+
+ private function dateFieldESToToday():void
+ {
+ dateFieldES.selectedDate = new Date();
+ }
+
+ private function configDateChooserToES():void
+ {
+ dateChooserES.model.dayNames = ['D','L','M','X','J','V','S'];
+ dateChooserES.model.monthNames = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Deciembre"];
+ dateChooserES.model.firstDayOfWeek = 1;
+ }
+
+ private function configDateFieldToES():void
+ {
+ dateFieldES.addBead(new DateFormatDDMMYYYY()); // this one removes the default IFormatBead
+
+ dateFieldES.model.dayNames = ['D','L','M','X','J','V','S'];
+ dateFieldES.model.monthNames = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Deciembre"];
+ dateFieldES.model.firstDayOfWeek = 1;
+ }
+ ]]>
+ </fx:Script>
+
+ <j:Grid gap="true">
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel DateChooser (Default)"/>
+ <j:DateChooser id="dateChooserDefault" change="dateChooserDefaultChanged()"/>
+ <j:Label id="dateChooserDefaultSelectedDate" multiline="true" html="<strong>DateChooser selected date:</strong> " width="275"/>
+ </j:Card>
+ </j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel DateChooser (Spanish)"/>
+ <j:DateChooser id="dateChooserES" change="dateChooserESChanged()" initComplete="configDateChooserToES()"/>
+ <j:Label id="dateChooserESSelectedDate" multiline="true" html="<strong>DateChooser fecha seleccionada:</strong> " width="275"/>
+ </j:Card>
+ </j:GridCell>
+
+ </j:Grid>
+
+ <j:Grid gap="true">
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel DateField (Default)"/>
+
+ <j:HGroup gap="3">
+ <j:DateField id="dateFieldDefault" change="dateFieldDefaultChanged()"/>
+ <j:Button text="Select today" click="dateFieldToToday()" emphasis="primary"/>
+ </j:HGroup>
+ <j:Label id="dateFieldDefaultSelectedDate" multiline="true" html="<strong>DateField selected date:</strong> "/>
+ </j:Card>
+ </j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel DateField (Spanish)"/>
+
+ <j:HGroup gap="3">
+ <j:DateField id="dateFieldES" change="dateFieldESChanged()" beadsAdded="configDateFieldToES()"/>
+ <j:Button text="Selecciona Hoy" click="dateFieldESToToday()" emphasis="primary"/>
+ </j:HGroup>
+ <j:Label id="dateFieldESSelectedDate" multiline="true" html="<strong>DateField fecha seleccionada:</strong> "/>
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
+
+</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml
index 4fd6856..0eb22d6 100644
--- a/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml
@@ -17,43 +17,102 @@
limitations under the License.
-->
-<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:js="library://ns.apache.org/royale/basic"
- xmlns:html="library://ns.apache.org/royale/html"
- xmlns:j="library://ns.apache.org/royale/jewel"
- className="container">
+<j:SectionContent 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:html="library://ns.apache.org/royale/html"
+ xmlns:models="models.*">
<fx:Script>
- <![CDATA[
- import org.apache.royale.collections.ArrayList;
-
- private function changeHandler(event:Event):void {
- trace("ddl change");
+ <![CDATA[
+ private function watchmenDropDownListHandler(event:Event):void {
+ watchmenDropDownListResult.html = "<strong>DropDownList selectedItem:</strong> " + event.target.selectedItem;
}
-
- private var _strings:Array = ["AAPL", "ADBE", "GOOG", "MSFT", "YHOO"];
- [Bindable("__NoChangeEvent__")]
- public function get strings():Array
- {
- return _strings;
- }
+
+ private function avengersDropDownListHandler(event:Event):void {
+ avengersDropDownListResult.html = "<strong>DropDownList selectedItem:</strong> " + event.target.selectedItem.label;
+ }
]]>
</fx:Script>
- <js:beads>
- <j:HorizontalLayoutWithPaddingAndGap gap="10"/>
- <js:ViewDataBinding />
- </js:beads>
-
- <html:H3 text="Jewel DropDownList"/>
-
- <j:DropDownList dataProvider="{strings}"/>
-
+ <j:beads>
+ <js:ContainerDataBinding/>
+ </j:beads>
- <!-- <j:DropDownList change="changeHandler(event)">
- <j:dataProvider>
- <js:ArrayList id="avengersCharacters" source="[Iron Man, Hulk, Thor, Captain America, Black Widow]" />
- </j:dataProvider>
- </j:DropDownList> -->
+ <j:model>
+ <models:ListsModel id="listModel"/>
+ </j:model>
-</js:Group>
+ <html:H5 text="Jewel DropDownList (This component is still in development)"/>
+
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="1"
+ tabletNumerator="1" tabletDenominator="1"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+
+ <html:H3 text="Jewel DropDownList (String Collection)"/>
+
+ <j:Grid gap="true" itemsVerticalAlign="itemsCentered">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="1"
+ itemsVerticalAlign="itemsCentered" width="290">
+ <j:DropDownList id="watchmenDropDownList" dataProvider="{listModel.watchmen}" change="watchmenDropDownListHandler(event)"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="1"
+ itemsVerticalAlign="itemsCentered" width="290">
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:Label text="Select Index: "/>
+ <j:NumericStepper valueChange="watchmenDropDownList.selectedIndex = event.target.value" minimum="0" maximum="5"/>
+ </j:HGroup>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="1"
+ itemsVerticalAlign="itemsCentered" width="290">
+ <j:Label id="watchmenDropDownListResult" html="<strong>DropDownList selectedItem:</strong> "/>
+ </j:GridCell>
+ </j:Grid>
+ </j:Card>
+
+ </j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="1"
+ tabletNumerator="1" tabletDenominator="1"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+
+ <html:H3 text="Jewel DropDownList (Object Collection)"/>
+
+ <j:Grid gap="true" itemsVerticalAlign="itemsCentered">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="1"
+ itemsVerticalAlign="itemsCentered" width="290">
+ <j:DropDownList id="avengersDropDownList" labelField="label" dataProvider="{listModel.avengers}" change="avengersDropDownListHandler(event)"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="1"
+ itemsVerticalAlign="itemsCentered" width="290">
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:Label text="Select Index: "/>
+ <j:NumericStepper valueChange="avengersDropDownList.selectedIndex = event.target.value" minimum="0" maximum="8"/>
+ </j:HGroup>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="1"
+ itemsVerticalAlign="itemsCentered" width="290">
+ <j:Label id="avengersDropDownListResult" html="<strong>DropDownList selectedItem:</strong> "/>
+ </j:GridCell>
+ </j:Grid>
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
+
+</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/FormsValidationPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/FormsValidationPlayGround.mxml
new file mode 100644
index 0000000..d6dbcfd
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/FormsValidationPlayGround.mxml
@@ -0,0 +1,88 @@
+<?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:SectionContent 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:html="library://ns.apache.org/royale/html">
+
+ <j:beads>
+ <js:ContainerDataBinding/>
+ </j:beads>
+
+ <fx:Script>
+ <![CDATA[
+ import org.apache.royale.utils.StringPadder;
+ import org.apache.royale.jewel.Alert;
+
+ [Bindable]
+ public var randomCode:String = StringPadder.pad(String(Math.round(Math.random() * 10000)), "0", 5);
+
+ public function customValidate(host:TextInput):String {
+ return (host.text == randomCode) ? "" : "The entered code doesn't match " + randomCode;
+ }
+
+ public function doSubmit(event:Event):void {
+ Alert.show("Data is valid submitted", "Sending Form!");
+ }
+ ]]>
+ </fx:Script>
+
+ <j:Card width="600">
+ <html:H3 text="Jewel Form And Validators"/>
+
+ <j:Form valid="doSubmit(event)">
+ <j:beads>
+ <j:FormValidator trigger="{btn}" triggerEvent="click"/>
+ </j:beads>
+
+ <html:H4 text="Your name"/>
+ <j:TextInput>
+ <j:beads>
+ <j:TextPrompt prompt="Name"/>
+ <j:StringValidator required="3" autoTrim="true" requiredFieldError="Need more than 3 characters"/>
+ </j:beads>
+ </j:TextInput>
+
+ <html:H4 text="Favorite movies (at least 2)"/>
+ <j:VGroup gap="3">
+ <j:beads>
+ <j:CheckBoxValidator required="2" requiredFieldError="Please choose at least 2 movies"/>
+ </j:beads>
+
+ <j:CheckBox text="The Godfather"/>
+ <j:CheckBox text="Scent of a woman"/>
+ <j:CheckBox text="Star Wars"/>
+ <j:CheckBox text="The Shawshank Redemption"/>
+ </j:VGroup>
+
+ <html:H4 text="Verification code: {randomCode}"/>
+ <j:HGroup gap="3">
+ <j:TextInput>
+ <j:beads>
+ <j:TextPrompt prompt="Enter Verification Code"/>
+ <j:StringValidator validateFunction="{customValidate}"/>
+ </j:beads>
+ </j:TextInput>
+
+ <j:Button id="btn" text="send" emphasis="primary"/>
+ </j:HGroup>
+ </j:Form>
+ </j:Card>
+</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml
new file mode 100644
index 0000000..7f51f78
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml
@@ -0,0 +1,610 @@
+<?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:SectionContent 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:html="library://ns.apache.org/royale/html">
+
+ <fx:Script>
+ <![CDATA[
+ [Bindable]
+ public var useGap:Boolean = true;
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ContainerDataBinding/>
+ </j:beads>
+
+
+ <html:H3 text="Grids"/>
+ <j:CheckBox text="Turn Gap on/off" change="useGap = !useGap;" selected="true"/>
+
+ <j:Grid className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="1"
+ tabletNumerator="1" tabletDenominator="1"
+ phoneNumerator="1" phoneDenominator="1">
+ <html:Div className="box" text="1"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="2"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="2"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="3"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="3"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="3"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="4"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <html:Div className="box" text="4"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="4"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <html:Div className="box" text="4"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="4"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <html:Div className="box" text="4"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="4"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <html:Div className="box" text="4"/>
+ </j:GridCell>
+ </j:Grid>
+ <j:Grid className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="5"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="5"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="5"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="5"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="5"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="5"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="5"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="5"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="5"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="5"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="6"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="6"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="6"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="6"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="6"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="6"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="6"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="6"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="6"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="6"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="6"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="6"/>
+ </j:GridCell>
+
+ </j:Grid>
+
+ <j:Grid className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="7"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="7"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="7"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="7"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="7"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="7"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="7"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="7"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="7"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="7"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="7"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="7"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="7"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="7"/>
+ </j:GridCell>
+
+ </j:Grid>
+
+ <j:Grid className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="8"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="8"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="8"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="8"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="8"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="8"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="8"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="8"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="8"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="9"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="9"
+ tabletNumerator="1" tabletDenominator="4"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="9"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="10"
+ tabletNumerator="1" tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10"
+ tabletNumerator="1" tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10"
+ tabletNumerator="1" tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10"
+ tabletNumerator="1" tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10"
+ tabletNumerator="1" tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10"
+ tabletNumerator="1" tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10"
+ tabletNumerator="1" tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10"
+ tabletNumerator="1" tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10"
+ tabletNumerator="1" tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="10"
+ tabletNumerator="1" tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="10"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="11"
+ tabletNumerator="1" tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11"
+ tabletNumerator="1" tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11"
+ tabletNumerator="1" tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11"
+ tabletNumerator="1" tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11"
+ tabletNumerator="1" tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11"
+ tabletNumerator="1" tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11"
+ tabletNumerator="1" tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11"
+ tabletNumerator="1" tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11"
+ tabletNumerator="1" tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11"
+ tabletNumerator="1" tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="11"
+ tabletNumerator="1" tabletDenominator="5"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="11"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid id="g" className="wrapper" gap="{useGap}">
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1" tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1" tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1" tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1" tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1" tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1" tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1" tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1" tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1" tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1" tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1" tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="12"
+ tabletNumerator="1" tabletDenominator="6"
+ phoneNumerator="1" phoneDenominator="4">
+ <html:Div className="box" text="12"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <html:H3 text="Grids Responsive Visibility"/>
+
+ <j:Grid className="wrapper" gap="true">
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="2">
+ <html:Div className="box" text="2a"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="2"
+ wideScreenVisible="false">
+ <html:Div className="box" text="2b - Hidden in WideScreen"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid className="wrapper" gap="true">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="3"
+ phoneVisible="false">
+ <html:Div className="box" text="3a - Hidden in Phones"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="3"
+ tabletVisible="false">
+ <html:Div className="box" text="3b - Hidden in Tablet"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="3c"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid className="wrapper" gap="true">
+ <j:GridCell desktopNumerator="1" desktopDenominator="4"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <html:Div className="box" text="4a"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="4"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <html:Div className="box" text="4b"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="4"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1"
+ desktopVisible="false">
+ <html:Div className="box" text="4c - Hidden in Desktop"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="4"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <html:Div className="box" text="4d"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <html:H3 text="Grids Horizontal Align"/>
+
+ <html:H4 text=" itemsTop"/>
+
+ <j:Grid className="wrapper" gap="true" itemsVerticalAlign="itemsTop">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 100px" height="100"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 200px" height="200"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 300px" height="300"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <html:H4 text=" itemsBottom"/>
+
+ <j:Grid className="wrapper" gap="true" itemsVerticalAlign="itemsBottom">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 100px" height="100"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 200px" height="200"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 300px" height="300"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <html:H4 text=" itemsCentered"/>
+
+ <j:Grid className="wrapper" gap="true" itemsVerticalAlign="itemsCentered">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 100px" height="100"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 200px" height="200"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="height: 300px" height="300"/>
+ </j:GridCell>
+ </j:Grid>
+
+ <html:H4 text=" itemsSameHeight"/>
+
+ <j:Grid className="wrapper" gap="true" itemsVerticalAlign="itemsSameHeight" height="200">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="Same Height"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="Same Height"/>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="3">
+ <html:Div className="box" text="Same Height"/>
+ </j:GridCell>
+ </j:Grid>
+
+
+</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/HeadingsAndText.mxml b/examples/royale/JewelExample/src/main/royale/HeadingsAndText.mxml
index df264c9..92f6077 100644
--- a/examples/royale/JewelExample/src/main/royale/HeadingsAndText.mxml
+++ b/examples/royale/JewelExample/src/main/royale/HeadingsAndText.mxml
@@ -17,25 +17,21 @@
limitations under the License.
-->
-<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:js="library://ns.apache.org/royale/basic"
- xmlns:html="library://ns.apache.org/royale/html"
- xmlns:j="library://ns.apache.org/royale/jewel"
- className="container" width="350">
-
- <js:beads>
- <j:VerticalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
-
- <html:H3 text="Headings and text"/>
+<j:SectionContent xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:html="library://ns.apache.org/royale/html">
- <html:H1 text="Heading H1"/>
- <html:H2 text="Heading H2"/>
- <html:H3 text="Heading H3"/>
- <html:H4 text="Heading H4"/>
+ <j:Card width="350">
+ <html:H3 text="Headings and text"/>
- <html:Span text="Some span text."/>
-
- <js:MultilineLabel text="Normal text used in a div, texts and fields with single line or multiple lines."/>
+ <html:H1 text="Heading H1"/>
+ <html:H2 text="Heading H2"/>
+ <html:H3 text="Heading H3"/>
+ <html:H4 text="Heading H4"/>
-</js:Group>
+ <html:Span text="Some span text."/>
+
+ <j:Label text="Normal text used in a div, texts and fields with single line or multiple lines."
+ multiline="true"/>
+ </j:Card>
+</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/LabelPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/LabelPlayGround.mxml
index 9d68b01..c8b054d 100644
--- a/examples/royale/JewelExample/src/main/royale/LabelPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/LabelPlayGround.mxml
@@ -17,11 +17,9 @@
limitations under the License.
-->
-<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:js="library://ns.apache.org/royale/basic"
- xmlns:html="library://ns.apache.org/royale/html"
- xmlns:j="library://ns.apache.org/royale/jewel"
- className="container">
+<j:SectionContent xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:html="library://ns.apache.org/royale/html">
<fx:Script>
<![CDATA[
@@ -33,13 +31,13 @@
}
]]>
</fx:Script>
+
+ <j:Card width="350">
+ <html:H3 text="Jewel Label"/>
+
+ <j:Label id="label" text="This is a Label" click="labelClick(event)" className="cursor-pointer"/>
- <js:beads>
- <j:VerticalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
-
- <html:H3 text="Jewel Label"/>
-
- <j:Label id="label" text="This is a Label" click="labelClick(event)"/>
-
-</js:Group>
+ <j:Label text="This is a multiline label with more text that wraps if container has set a width"
+ multiline="true"/>
+ </j:Card>
+</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml
index 1fbd517..eea0870 100644
--- a/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ListPlayGround.mxml
@@ -17,44 +17,169 @@
limitations under the License.
-->
-<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:js="library://ns.apache.org/royale/basic"
- xmlns:html="library://ns.apache.org/royale/html"
- xmlns:j="library://ns.apache.org/royale/jewel"
- xmlns:models="models.*"
- className="container" width="350">
+<j:SectionContent 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:html="library://ns.apache.org/royale/html"
+ xmlns:models="models.*">
<fx:Script>
<![CDATA[
import org.apache.royale.collections.ArrayList;
+ import vos.IconListVO;
private function onChange(event:Event):void {
selected.text = "Selected: " + list.selectedItem;
}
- public var simple:ArrayList = new ArrayList(["Blueberries", "Bananas", "Lemons", "Oranges", "Watermelons"]);
+ private var _simple:ArrayList = new ArrayList(["Blueberries", "Bananas", "Lemons", "Oranges", "Watermelons", "Apples", "Cherries", "Coconuts", "Figs", "Grapes", "Kiwis", "Mangos"]);
+
+ [Bindable]
+ public function get simple():ArrayList
+ {
+ return _simple
+ }
+
+ public function set simple(value:ArrayList):void
+ {
+ _simple = value;
+ }
+
+ public function assignNewData():void
+ {
+ list.dataProvider = new ArrayList(["blue", "red", "yellow", "green"]);
+ }
+
+ private function changeListData():void
+ {
+ iconList.dataProvider = new ArrayList([
+ new IconListVO("CheckBox", "check_box"),
+ new IconListVO("Label", "label"),
+ new IconListVO("RadioButton", "radio_button_checked"),
+ new IconListVO("Text", "subject"),
+ new IconListVO("TextInput", "text_fields")
+ ]);
+ }
+
+ private function addItem():void
+ {
+ var iconListVO:IconListVO = new IconListVO("New Item", MaterialIconType.CLOSE);
+
+ (iconList.dataProvider as ArrayList).addItem(iconListVO);
+ // listModel.iconListData.addItem(iconListVO); // to test things are adding to right place
+ }
+
+ public function removeItemAt():void
+ {
+ (iconList.dataProvider as ArrayList).removeItemAt(0);
+ // listModel.iconListData.removeItemAt(0);
+ }
+
+ public function updateFirstItem():void
+ {
+ var item:IconListVO = (iconList.dataProvider as ArrayList).getItemAt(0) as IconListVO;
+ item.label = "What??";
+ item.icon = MaterialIconType.ACCESSIBILITY;
+ (iconList.dataProvider as ArrayList).itemUpdated(item);
+ // listModel.iconListData.itemUpdated(item);
+ }
+
+ public function removeAllData():void
+ {
+ (iconList.dataProvider as ArrayList).removeAll();
+ // listModel.iconListData.removeAll();
+ }
]]>
</fx:Script>
- <js:model>
- <models:ListsModel/>
- </js:model>
+ <j:model>
+ <models:ListsModel id="listModel"/>
+ </j:model>
- <js:beads>
- <j:VerticalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
-
- <html:H3 text="Jewel List"/>
-
- <j:List id="list" width="200" height="300" change="onChange(event)">
- <js:beads>
- <js:ConstantBinding
-
- sourcePropertyName="simple"
- destinationPropertyName="dataProvider" />
- </js:beads>
- </j:List>
+ <j:beads>
+ <js:ContainerDataBinding/>
+ </j:beads>
- <j:Label id="selected"/>
-
-</js:Group>
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel List"/>
+ <j:List id="list" width="200" height="300" dataProvider="{simple}" change="onChange(event)"/>
+ <j:Label id="selected"/>
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:Label text="Select list by index: "/>
+ <j:NumericStepper valueChange="list.selectedIndex = event.target.value" minimum="0" maximum="11"/>
+ </j:HGroup>
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:Label text="Select list by item: "/>
+ <j:NumericStepper valueChange="list.selectedItem = list.dataProvider.getItemAt(event.target.value)" minimum="0" maximum="11"/>
+ </j:HGroup>
+ <j:Button text="Assign new data" click="assignNewData()"/>
+ </j:Card>
+ </j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel List With ItemRenderer"/>
+ <j:HGroup gap="3">
+ <j:List id="iconList" width="200" height="300" className="iconListItemRenderer">
+ <j:beads>
+ <js:ConstantBinding
+ sourceID="listModel"
+ sourcePropertyName="iconListData"
+ destinationPropertyName="dataProvider" />
+ <j:AddListItemRendererForArrayListData/>
+ <j:RemoveListItemRendererForArrayListData/>
+ <j:UpdateListItemRendererForArrayListData/>
+ <j:RemoveAllItemRendererForArrayListData/>
+ </j:beads>
+ </j:List>
+ <j:VGroup gap="3">
+ <j:Button text="change data" emphasis="{Button.PRIMARY}" click="changeListData()"/>
+ <j:Button text="Add item" click="addItem()"/>
+ <j:Button text="Remove first item" click="removeItemAt()"/>
+ <j:Button text="Update first item" click="updateFirstItem()"/>
+ <j:Button text="Remove all data" click="removeAllData()"/>
+ </j:VGroup>
+ </j:HGroup>
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
+ <j:Grid gap="true">
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel DataContainer (with Flow Layout)"/>
+ <j:DataContainer>
+ <j:beads>
+ <j:HorizontalFlowLayout gap="3"/>
+ <js:ConstantBinding
+ sourcePropertyName="simple"
+ destinationPropertyName="dataProvider" />
+ </j:beads>
+ </j:DataContainer>
+ </j:Card>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel List (Horizontal)"/>
+ <j:List id="alist" percentWidth="100" height="100">
+ <j:beads>
+ <j:HorizontalLayout itemsExpand="true" />
+ </j:beads>
+ <j:dataProvider>
+ <js:ArrayList id="avengersCharacters" source="[Iron Man, Hulk, Thor, Captain America, Hawkeye]" />
+ </j:dataProvider>
+ </j:List>
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
+
+</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/MainContent.mxml b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
index 0830fa3..fd7928f 100644
--- a/examples/royale/JewelExample/src/main/royale/MainContent.mxml
+++ b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
@@ -17,48 +17,122 @@
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"
- xmlns:local="*">
+<j:ApplicationResponsiveView 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:html="library://ns.apache.org/royale/html"
+ xmlns:models="models.*"
+ xmlns:local="*">
- <js:beads>
- <j:HorizontalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
+ <fx:Script>
+ <![CDATA[
+ import vos.NavigationLinkVO;
+
+ private function changeHandler(event:Event):void
+ {
+ var item:NavigationLinkVO = (event.target as Navigation).selectedItem as NavigationLinkVO;
+ main.showContent(item.href);
+ if(!drawer.fixed)
+ drawer.close();
+ }
- <js:Group>
- <js:beads>
- <j:VerticalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
- <local:LabelPlayGround/>
- <local:ButtonPlayGround/>
- <local:TextButtonPlayGround/>
- <local:DropDownListPlayGround/>
- </js:Group>
+ private function toggleTopAppBarFixed():void
+ {
+ topappbar.fixed = !topappbar.fixed;
+ main.hasTopAppBar = topappbar.fixed;
+ }
- <js:Group>
- <js:beads>
- <j:VerticalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
- <local:TextInputPlayGround/>
- <local:CheckBoxPlayGround/>
- <local:RadioButtonPlayGround/>
- </js:Group>
+ private function goToHome():void
+ {
+ main.showContent("welcome_panel");
+ }
+ ]]>
+ </fx:Script>
- <js:Group>
- <js:beads>
- <j:VerticalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
- <local:SliderPlayGround/>
- <local:ListPlayGround/>
- </js:Group>
+ <j:model>
+ <models:MainNavigationModel id="mainNavigationModel"/>
+ </j:model>
+
+ <j:beads>
+ <js:ContainerDataBinding/>
+ </j:beads>
+
+ <j:Drawer id="drawer">
+ <j:beads>
+ <j:ResponsiveDrawer auto="true"/>
+ </j:beads>
+ <j:DrawerHeader>
+ <j:Image src="assets/apache-royale-jewel-logo-white.svg" height="140" click="goToHome()"/>
+ </j:DrawerHeader>
+ <j:DrawerContent>
+ <j:Navigation change="changeHandler(event)" className="navIconLinkItemRenderer">
+ <j:beads>
+ <js:ConstantBinding
+ sourceID="mainNavigationModel"
+ sourcePropertyName="containerDrawerNavigation"
+ destinationPropertyName="dataProvider"/>
+ </j:beads>
+ </j:Navigation>
+ <j:Divider/>
+ <j:Navigation change="changeHandler(event)" className="navIconLinkItemRenderer">
+ <j:beads>
+ <js:ConstantBinding
+ sourceID="mainNavigationModel"
+ sourcePropertyName="controlsDrawerNavigation"
+ destinationPropertyName="dataProvider"/>
+ </j:beads>
+ </j:Navigation>
+ </j:DrawerContent>
+ </j:Drawer>
+
+ <j:TopAppBar id="topappbar" fixed="true" hasDrawer="{drawer.fixed && drawer.isOpen}">
+ <j:TopAppBarRow>
+ <j:TopAppBarSection>
+ <j:IconButton click="drawer.isOpen ? drawer.close() : drawer.open()">
+ <js:beads>
+ <j:ResponsiveVisibility desktopVisible="false" wideScreenVisible="false"/>
+ </js:beads>
+ <j:icon>
+ <js:FontIcon text="{MaterialIconType.MENU}" material="true"/>
+ </j:icon>
+ </j:IconButton>
+ <j:TopAppBarTitle text="Apache Royale Jewel UI Set Theme Showcase"/>
+ </j:TopAppBarSection>
+ <j:TopAppBarSection alignRight="true">
+ <j:IconButton click="drawer.fixed = !drawer.fixed">
+ <j:icon>
+ <js:FontIcon text="{MaterialIconType.VISIBILITY}" material="true"/>
+ </j:icon>
+ </j:IconButton>
+ <j:ToggleButton click="toggleTopAppBarFixed()">
+ <j:icon>
+ <js:ToggleFontIcon text="{MaterialIconType.LOCK}" selectedText="{MaterialIconType.LOCK_OPEN}" material="true"/>
+ </j:icon>
+ </j:ToggleButton>
+ </j:TopAppBarSection>
+ </j:TopAppBarRow>
+ </j:TopAppBar>
+
+ <j:ApplicationMainContent id="main" hasTopAppBar="true" className="mainContent">
+ <local:WelcomeSection id="welcome_panel" isActive="true"/>
+ <local:AlertPlayGround id="alert_panel"/>
+ <local:ButtonPlayGround id="button_panel"/>
+ <local:NumericStepperPlayGround id="numericstepper_panel"/>
+ <local:DateComponentsPlayGround id="datecomponents_panel"/>
+ <local:ComboBoxPlayGround id="combobox_panel"/>
+ <local:CheckBoxPlayGround id="checkbox_panel"/>
+ <local:MiscelaneaPlayGound id="miscelanea_panel"/>
+ <local:HeadingsAndText id="text_panel"/>
+ <local:LabelPlayGround id="label_panel"/>
+ <local:ListPlayGround id="list_panel"/>
+ <local:RadioButtonPlayGround id="radiobutton_panel"/>
+ <local:SliderPlayGround id="slider_panel"/>
+ <local:TextInputPlayGround id="textinput_panel"/>
+ <local:GridPlayGround id="grid_panel"/>
+ <local:CardPlayGround id="card_panel"/>
+ <local:TablePlayGround id="tables_panel"/>
+ <local:FormsValidationPlayGround id="form_validation_panel"/>
+ <local:DropDownListPlayGround id="dropdownlist_panel"/>
+ </j:ApplicationMainContent>
- <js:Group>
- <js:beads>
- <j:VerticalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
- <local:AlertPlayGround/>
- <local:HeadingsAndText/>
- </js:Group>
-
-</js:Group>
+</j:ApplicationResponsiveView>
diff --git a/examples/royale/JewelExample/src/main/royale/MiscelaneaPlayGound.mxml b/examples/royale/JewelExample/src/main/royale/MiscelaneaPlayGound.mxml
new file mode 100644
index 0000000..8eff691
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/MiscelaneaPlayGound.mxml
@@ -0,0 +1,55 @@
+<?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:SectionContent 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:html="library://ns.apache.org/royale/html">
+
+ <j:beads>
+ <js:ContainerDataBinding/>
+ <j:HorizontalCenteredLayout gap="3"/>
+ </j:beads>
+
+ <j:Card width="350">
+ <html:H3 text="Jewel Icons Sizes"/>
+
+ <js:FontIcon text="{MaterialIconType.FACE}" material="true" size="18"/>
+ <j:Label text="18px"/>
+ <js:FontIcon text="{MaterialIconType.FACE}" material="true" size="24"/>
+ <j:Label text="24px (default)"/>
+ <js:FontIcon text="{MaterialIconType.FACE}" material="true" size="36"/>
+ <j:Label text="36px"/>
+ <js:FontIcon text="{MaterialIconType.FACE}" material="true" size="48"/>
+ <j:Label text="48px"/>
+ </j:Card>
+ <j:Card width="350">
+ <html:H3 text="Jewel Icons Dark / Light"/>
+
+ <js:FontIcon text="{MaterialIconType.FACE}" material="true" dark="true"/>
+ <j:Label text="dark"/>
+ <js:FontIcon text="{MaterialIconType.FACE}" material="true" dark="true" inactive="true"/>
+ <j:Label text="dark - inactive"/>
+ <js:FontIcon text="{MaterialIconType.FACE}" material="true" light="true"/>
+ <j:Label text="light"/>
+ <js:FontIcon text="{MaterialIconType.FACE}" material="true" light="true" inactive="true"/>
+ <j:Label text="light - inactive"/>
+ </j:Card>
+
+</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/NumericStepperPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/NumericStepperPlayGround.mxml
new file mode 100644
index 0000000..c4ab3ed
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/NumericStepperPlayGround.mxml
@@ -0,0 +1,55 @@
+<?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:SectionContent xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:html="library://ns.apache.org/royale/html">
+
+ <fx:Script>
+ <![CDATA[
+ private function valueChangeHandler(event:Event):void {
+ result.text = "Default NumericStepper: " + numericStepper.value;
+ }
+ ]]>
+ </fx:Script>
+
+ <j:Card>
+ <html:H3 text="Jewel NumericStepper"/>
+
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:NumericStepper id="numericStepper" valueChange="valueChangeHandler(event)"/>
+ <j:Label id="result" text="Default NumericStepper: "/>
+ </j:HGroup>
+
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:NumericStepper value="30"/>
+ <j:Label text="NumericStepper value='30'"/>
+ </j:HGroup>
+
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:NumericStepper minimum="10" maximum="100"/>
+ <j:Label text="NumericStepper minimum='10' and maximum='100'" multiline="true" width="300"/>
+ </j:HGroup>
+
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:NumericStepper stepSize="2"/>
+ <j:Label text="NumericStepper stepSize='2'"/>
+ </j:HGroup>
+ </j:Card>
+</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml
index 9e6806d..5edac7f 100644
--- a/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml
@@ -17,32 +17,27 @@
limitations under the License.
-->
-<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:js="library://ns.apache.org/royale/basic"
- xmlns:html="library://ns.apache.org/royale/html"
- xmlns:j="library://ns.apache.org/royale/jewel"
- className="container">
+<j:SectionContent xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:html="library://ns.apache.org/royale/html">
- <js:beads>
- <j:VerticalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
-
- <html:H3 text="Jewel RadioButton"/>
+ <j:Card width="350">
+ <html:H3 text="Jewel RadioButton"/>
- <j:RadioButton text="RadioButton 1" groupName="radios" value="Test 1"/>
- <j:RadioButton text="RadioButton 2" groupName="radios" value="Test 2" selected="true"/>
- <j:RadioButton text="RadioButton 3" groupName="radios" value="Test 3"/>
+ <j:RadioButton text="RadioButton 1" groupName="radios" value="Test 1"/>
+ <j:RadioButton text="RadioButton 2" groupName="radios" value="Test 2" selected="true"/>
+ <j:RadioButton text="RadioButton 3" groupName="radios" value="Test 3"/>
- <j:RadioButton text="Disabled">
- <j:beads>
- <j:Disabled/>
- </j:beads>
- </j:RadioButton>
+ <j:RadioButton text="Disabled">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:RadioButton>
- <j:RadioButton text="Set and Disabled" selected="true">
- <j:beads>
- <j:Disabled/>
- </j:beads>
- </j:RadioButton>
-
-</js:Group>
+ <j:RadioButton text="Set and Disabled" selected="true">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:RadioButton>
+ </j:Card>
+</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml
index c64d197..bc0ee8d 100644
--- a/examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml
@@ -17,11 +17,10 @@
limitations under the License.
-->
-<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:js="library://ns.apache.org/royale/basic"
- xmlns:html="library://ns.apache.org/royale/html"
- xmlns:j="library://ns.apache.org/royale/jewel"
- className="container">
+<j:SectionContent 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:html="library://ns.apache.org/royale/html">
<fx:Script>
<![CDATA[
@@ -36,9 +35,6 @@
private function onInput(event:Event):void
{
trace("onInput");
- button.width = slider_w.value;
- button.height = slider_h.value;
- button.text = slider_w.value + "x" + slider_h.value;
}
private function onChange(event:Event):void
@@ -48,33 +44,37 @@
private function onValueChange(event:Event):void
{
- trace("onValueChange");
+ trace("onValueChange"); // if target IE11 you must use this event handler
+ button.width = slider_w.value;
+ button.height = slider_h.value;
+ button.text = slider_w.value + "x" + slider_h.value;
}
]]>
</fx:Script>
- <js:beads>
- <j:VerticalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
-
- <html:H3 text="Jewel Slider"/>
-
- <j:Slider id="slider_w" width="250" value="250" minimum="100" maximum="500"
- change="onChange(event)"
- input="onInput(event)"
- valueChange="onValueChange(event)"/>
- <j:Slider id="slider_h" width="250" value="80" minimum="40" maximum="300"
- change="onChange(event)"
- input="onInput(event)"
- valueChange="onValueChange(event)"/>
+ <j:beads>
+ <js:ContainerDataBinding/>
+ </j:beads>
- <j:Slider id="slider_dis" width="250" value="70" minimum="0" maximum="100">
- <j:beads>
- <j:Disabled/>
- </j:beads>
- </j:Slider>
+ <j:Card width="350">
+ <html:H3 text="Jewel Slider"/>
+
+ <j:Slider id="slider_w" width="250" value="250" minimum="100" maximum="500"
+ change="onChange(event)"
+ input="onInput(event)"
+ valueChange="onValueChange(event)"/>
+ <j:Slider id="slider_h" width="250" value="80" minimum="40" maximum="300"
+ change="onChange(event)"
+ input="onInput(event)"
+ valueChange="onValueChange(event)"/>
- <j:TextButton id="button" text="Slider to 400x200" width="250" height="80" primary="true"
- click="clickHandler(event)"/>
+ <j:Slider id="slider_dis" width="250" value="70" minimum="0" maximum="100">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:Slider>
-</js:Group>
+ <j:Button id="button" text="Slider to 400x200" width="250" height="80" emphasis="{Button.PRIMARY}"
+ click="clickHandler(event)"/>
+ </j:Card>
+</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
new file mode 100644
index 0000000..617511d
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
@@ -0,0 +1,271 @@
+<?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:SectionContent 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:html="library://ns.apache.org/royale/html"
+ xmlns:models="models.*">
+
+ <j:model>
+ <models:TablesModel id="tablesModel"/>
+ </j:model>
+
+ <j:beads>
+ <js:ContainerDataBinding/>
+ </j:beads>
+
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+ <j:GridCell desktopNumerator="1" desktopDenominator="1"
+ tabletNumerator="1" tabletDenominator="1"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel SimpleTable"/>
+
+ <j:SimpleTable>
+ <j:THead>
+ <j:TableRow>
+ <j:TableHeaderCell width="48">
+ <j:Label text="Icons" />
+ </j:TableHeaderCell>
+ <j:TableHeaderCell width="140">
+ <j:Label text="Text Column" />
+ </j:TableHeaderCell>
+ <j:TableHeaderCell width="140">
+ <j:Label text="Centered Text Column" />
+ </j:TableHeaderCell>
+ <j:TableHeaderCell>
+ <j:Label text="Number Column">
+ <j:beads>
+ <j:TextAlign align="right"/>
+ </j:beads>
+ </j:Label>
+ </j:TableHeaderCell>
+ </j:TableRow>
+ </j:THead>
+ <j:TBody>
+ <j:TableRow>
+ <j:TableCell>
+ <js:FontIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
+ </j:TableCell>
+ <j:TableCell expandRows="2">
+ <j:Label text="Some text in two rows" multiline="true"/>
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label text="Some centered text">
+ <j:beads>
+ <j:TextAlign align="center"/>
+ </j:beads>
+ </j:Label>
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label text="71">
+ <j:beads>
+ <j:TextAlign align="right"/>
+ </j:beads>
+ </j:Label>
+ </j:TableCell>
+ </j:TableRow>
+ <j:TableRow>
+ <j:TableCell>
+ <js:FontIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
+ </j:TableCell>
+
+ <j:TableCell>
+ <j:Label text="More centered text">
+ <j:beads>
+ <j:TextAlign align="center"/>
+ </j:beads>
+ </j:Label>
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label text="56">
+ <j:beads>
+ <j:TextAlign align="right"/>
+ </j:beads>
+ </j:Label>
+ </j:TableCell>
+ </j:TableRow>
+ <j:TableRow>
+ <j:TableCell>
+ <js:FontIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label text="More text 2" />
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label text="More centered text 2" >
+ <j:beads>
+ <j:TextAlign align="center"/>
+ </j:beads>
+ </j:Label>
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label text="346">
+ <j:beads>
+ <j:TextAlign align="right"/>
+ </j:beads>
+ </j:Label>
+ </j:TableCell>
+ </j:TableRow>
+ <j:TableRow>
+ <j:TableCell>
+ <js:FontIcon text="{MaterialIconType.INSERT_DRIVE_FILE}" material="true"/>
+ </j:TableCell>
+ <j:TableCell>
+ <!-- By using a Group within a cell you have better control of the
+ layout.
+ -->
+ <j:VGroup>
+ <j:Label text="Labels" />
+ <j:Label text="with" />
+ <j:Label text="Vertical" />
+ <j:Label text="Layout" />
+ </j:VGroup>
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label text="More centered text 3" >
+ <j:beads>
+ <j:TextAlign align="center"/>
+ </j:beads>
+ </j:Label>
+ </j:TableCell>
+ <j:TableCell>
+ <j:Label text="240">
+ <j:beads>
+ <j:TextAlign align="right"/>
+ </j:beads>
+ </j:Label>
+ </j:TableCell>
+ </j:TableRow>
+ </j:TBody>
+ <j:TFoot>
+ <j:TableRow>
+ <j:TableCell expandColumns="4">
+ <j:HGroup gap="3" itemsHorizontalAlign="itemsRight">
+ <j:IconTextInput rightPosition="true">
+ <j:beads>
+ <j:TextPrompt prompt="Search..."/>
+ </j:beads>
+ <j:icon>
+ <js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
+ </j:icon>
+ </j:IconTextInput>
+ <j:Button text="SEARCH" emphasis="{Button.PRIMARY}"/>
+ </j:HGroup>
+ </j:TableCell>
+ </j:TableRow>
+ </j:TFoot>
+ </j:SimpleTable>
+ </j:Card>
+
+ </j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="1"
+ tabletNumerator="1" tabletDenominator="1"
+ phoneNumerator="1" phoneDenominator="1">
+
+ <j:Card>
+ <html:H3 text="Jewel Table (This component is still in development)"/>
+ <j:HGroup gap="3">
+ <j:VGroup gap="3">
+ <j:Table id="table" change="onChange(event)" dataProvider="{tablesModel.guitarrists}">
+ <j:TableColumn dataField="icon" label="" align="center" itemRenderer="itemRenderers.TableCellCloseIconItemRenderer"/>
+ <j:TableColumn dataField="guitarrist" label="Guitarrist"/>
+ <j:TableColumn dataField="album" label="Album" align="center" columnLabelAlign="center"/>
+ <j:TableColumn dataField="year" label="Release Year" align="right" columnLabelAlign="right"/>
+ <j:beads>
+ <j:AddTableRowForArrayListData/>
+ <j:RemoveTableRowForArrayListData/>
+ <j:UpdateTableRowForArrayListData/>
+ <j:RemoveAllItemRendererForArrayListData/>
+ </j:beads>
+ </j:Table>
+ <j:Label id="selected"/>
+ </j:VGroup>
+ <j:VGroup gap="3">
+ <j:Button click="changeTableData()" text="Change Data" emphasis="primary"/>
+ <j:Button text="Add item" click="addItem()"/>
+ <j:Button text="Remove first item" click="removeItemAt()"/>
+ <j:Button text="Update first item" click="updateFirstItem()"/>
+ <j:Button text="Remove all data" click="removeAllData()"/>
+ <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:Label text="Select table by index: "/>
+ <j:NumericStepper valueChange="table.selectedIndex = event.target.value" minimum="0"/>
+ </j:HGroup>
+ <!-- <j:HGroup gap="3" itemsVerticalAlign="itemsCentered">
+ <j:Label text="Select table by item: "/>
+ <j:NumericStepper valueChange="table.selectedItemProperty = table.dataProvider.getItemAt(event.target.value)" minimum="0"/>
+ </j:HGroup> -->
+ </j:VGroup>
+ </j:HGroup>
+ </j:Card>
+
+ </j:GridCell>
+ </j:Grid>
+
+ <fx:Script>
+ <![CDATA[
+ import org.apache.royale.collections.ArrayList;
+ import vos.GuitarristVO;
+
+ private function onChange(event:Event):void {
+ selected.text = "Selected: " + table.selectedItemProperty;
+ }
+
+ private function changeTableData():void
+ {
+ table.dataProvider = new ArrayList([
+ new GuitarristVO("David Gilmour", "On an Island", 2006),
+ new GuitarristVO("Eric Clapton", "Journeyman", 1989),
+ new GuitarristVO("Frank Zappa", "Hot Rats", 1969),
+ new GuitarristVO("Jimi Hendrix", "Electric Ladyland", 1968)
+ ]);
+ }
+
+ private function addItem():void
+ {
+ (table.dataProvider as ArrayList).addItem(new GuitarristVO("Eric Johnson", "Venus Isle", 1996));
+ // tablesModel.guitarrists.addItem(new GuitarristVO("Eric Johnson", "Venus Isle", 1996)); // to test things are adding to right place
+ }
+
+ public function removeItemAt():void
+ {
+ (table.dataProvider as ArrayList).removeItemAt(0);
+ // tablesModel.guitarrists.removeItemAt(0);
+ }
+
+ public function updateFirstItem():void
+ {
+ var item:GuitarristVO = (table.dataProvider as ArrayList).getItemAt(0) as GuitarristVO;
+ item.guitarrist = "Robert Frip";
+ item.year = 1980;
+ (table.dataProvider as ArrayList).itemUpdated(item);
+ // tablesModel.guitarrists.itemUpdated(item);
+ }
+
+ public function removeAllData():void
+ {
+ (table.dataProvider as ArrayList).removeAll();
+ // tablesModel.guitarrists.removeAll();
+ }
+ ]]>
+ </fx:Script>
+
+</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/TextButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextButtonPlayGround.mxml
deleted file mode 100644
index e9461e8..0000000
--- a/examples/royale/JewelExample/src/main/royale/TextButtonPlayGround.mxml
+++ /dev/null
@@ -1,53 +0,0 @@
-<?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:html="library://ns.apache.org/royale/html"
- xmlns:j="library://ns.apache.org/royale/jewel"
- className="container">
-
- <fx:Script>
- <![CDATA[
- private function onValueChange(event:Event):void
- {
- //button.width = slider.value;
- //button.height = slider_v.value;
- }
- ]]>
- </fx:Script>
-
- <js:beads>
- <j:VerticalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
-
- <html:H3 text="Jewel TextButton"/>
-
- <j:TextButton text="Default"/>
- <j:TextButton text="Button With More Text"/>
- <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>
- <j:Disabled/>
- </j:beads>
- </j:TextButton>
-
-</js:Group>
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index e7538d5..53854ad 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -17,52 +17,187 @@
limitations under the License.
-->
-<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:js="library://ns.apache.org/royale/basic"
- xmlns:html="library://ns.apache.org/royale/html"
- xmlns:j="library://ns.apache.org/royale/jewel"
- className="container">
-
- <js:beads>
- <j:VerticalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
-
- <html:H3 text="Jewel TextField"/>
+<j:SectionContent 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:html="library://ns.apache.org/royale/html">
- <js:Group>
- <js:beads>
- <j:HorizontalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
- <j:TextButton text="Check it!" primary="true"/>
- <j:TextField text="A TextField"/>
- </js:Group>
+ <j:beads>
+ <js:ContainerDataBinding/>
+ </j:beads>
- <js:Group>
- <js:beads>
- <j:HorizontalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
- <j:TextField>
- <j:beads>
- <js:TextPromptBead prompt="With prompt..."/>
- </j:beads>
- </j:TextField>
- <j:TextButton text="Send" primary="true"/>
- </js:Group>
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+ <j:GridCell wideScreenNumerator="1" wideScreenDenominator="2"
+ desktopNumerator="1" desktopDenominator="1"
+ tabletNumerator="1" tabletDenominator="1"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel TextInput"/>
- <j:TextField text="Disabled with text...">
- <j:beads>
- <js:TextPromptBead prompt="Disabled Textfield..."/>
- <j:Disabled/>
- </j:beads>
- </j:TextField>
+ <j:Group>
+ <j:beads>
+ <j:HorizontalLayout gap="3"/>
+ </j:beads>
+ <j:Button text="Check it!" emphasis="primary"/>
+ <j:TextInput text="A TextInput"/>
+ </j:Group>
- <j:TextField>
- <j:beads>
- <js:TextPromptBead prompt="Disabled with prompt..."/>
- <j:Disabled/>
- </j:beads>
- </j:TextField>
+ <j:Group>
+ <j:beads>
+ <j:HorizontalLayout gap="3"/>
+ </j:beads>
+ <j:TextInput>
+ <j:beads>
+ <j:TextPrompt prompt="With prompt..."/>
+ </j:beads>
+ </j:TextInput>
+ <j:Button text="Send" emphasis="secondary"/>
+ </j:Group>
-
+ <j:TextInput text="Disabled with text...">
+ <j:beads>
+ <j:TextPrompt prompt="Disabled TextInput..."/>
+ <j:Disabled/>
+ </j:beads>
+ </j:TextInput>
-</js:Group>
+ <j:TextInput>
+ <j:beads>
+ <j:TextPrompt prompt="Disabled with prompt..."/>
+ <j:Disabled/>
+ </j:beads>
+ </j:TextInput>
+ </j:Card>
+ </j:GridCell>
+
+ <j:GridCell wideScreenNumerator="1" wideScreenDenominator="2"
+ desktopNumerator="1" desktopDenominator="2"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card width="100%">
+ <html:H4 text="TextInput Sizes"/>
+ <j:TextInput>
+ <j:beads>
+ <j:TextPrompt prompt="Size xsmall"/>
+ <j:SizeControl size="xsmall"/>
+ </j:beads>
+ </j:TextInput>
+
+ <j:TextInput>
+ <j:beads>
+ <j:TextPrompt prompt="Size small"/>
+ <j:SizeControl size="small"/>
+ </j:beads>
+ </j:TextInput>
+
+ <j:TextInput>
+ <j:beads>
+ <j:TextPrompt prompt="Size normal"/>
+ </j:beads>
+ </j:TextInput>
+
+ <j:TextInput>
+ <j:beads>
+ <j:TextPrompt prompt="Size large"/>
+ <j:SizeControl size="large"/>
+ </j:beads>
+ </j:TextInput>
+
+ <j:TextInput>
+ <j:beads>
+ <j:TextPrompt prompt="Size xlarge"/>
+ <j:SizeControl size="xlarge"/>
+ </j:beads>
+ </j:TextInput>
+ </j:Card>
+ </j:GridCell>
+ <j:GridCell wideScreenNumerator="1" wideScreenDenominator="1"
+ desktopNumerator="1" desktopDenominator="1"
+ tabletNumerator="1" tabletDenominator="2"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card width="100%">
+ <html:H4 text="Jewel TextArea"/>
+
+ <j:TextArea text="A TextArea with 5 rows" rows="5"/>
+
+ <j:TextArea>
+ <j:beads>
+ <j:TextPrompt prompt="With prompt..."/>
+ </j:beads>
+ </j:TextArea>
+
+ <j:TextArea text="A TextArea">
+ <j:beads>
+ <j:TextPrompt prompt="with prompt..."/>
+ <j:Disabled/>
+ </j:beads>
+ </j:TextArea>
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid gap="true">
+ <j:GridCell wideScreenNumerator="1" wideScreenDenominator="1"
+ desktopNumerator="1" desktopDenominator="1"
+ tabletNumerator="1" tabletDenominator="1"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel IconTextInput"/>
+
+ <j:IconTextInput text="Searching something">
+ <j:icon>
+ <js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
+ </j:icon>
+ </j:IconTextInput>
+
+ <j:IconTextInput rightPosition="true">
+ <j:beads>
+ <j:TextPrompt prompt="Search..."/>
+ </j:beads>
+ <j:icon>
+ <js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
+ </j:icon>
+ </j:IconTextInput>
+
+ <j:IconTextInput>
+ <j:beads>
+ <j:TextPrompt prompt="Search Disabled..."/>
+ <j:Disabled/>
+ </j:beads>
+ <j:icon>
+ <js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
+ </j:icon>
+ </j:IconTextInput>
+
+ <j:IconTextInput rightPosition="true">
+ <j:beads>
+ <j:TextPrompt prompt="Search Disabled..."/>
+ <j:Disabled/>
+ </j:beads>
+ <j:icon>
+ <js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
+ </j:icon>
+ </j:IconTextInput>
+
+ <j:IconTextInput text="Searching something">
+ <j:beads>
+ <j:SizeControl size="xlarge"/>
+ </j:beads>
+ <j:icon>
+ <js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
+ </j:icon>
+ </j:IconTextInput>
+ </j:Card>
+ </j:GridCell>
+
+ <!-- <j:GridCell wideScreenNumerator="1" wideScreenDenominator="2"
+ desktopNumerator="1" desktopDenominator="1"
+ tabletNumerator="1" tabletDenominator="1"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+
+ </j:Card>
+ </j:GridCell> -->
+ </j:Grid>
+
+</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/WelcomeSection.mxml b/examples/royale/JewelExample/src/main/royale/WelcomeSection.mxml
new file mode 100644
index 0000000..cca5f67
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/WelcomeSection.mxml
@@ -0,0 +1,77 @@
+<?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:SectionContent 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:html="library://ns.apache.org/royale/html">
+
+ <j:beads>
+ <j:VerticalCenteredLayout gap="9"/>
+ <js:ContainerDataBinding/>
+ </j:beads>
+
+ <j:Image src="assets/apache-royale-logo.svg" height="300"/>
+
+ <html:H1 text="Welcome to Apache Royale Jewel">
+ <html:beads>
+ <j:TextAlign align="center"/>
+ </html:beads>
+ </html:H1>
+
+ <j:Label width="400"
+ multiline="true"
+ html="Jewel is a themeizable set of user interface components for Apache Royale to quickly build Front-end Applications with AS3 & MXML.<br>Check <a href='https://royale.apache.org'>https://royale.apache.org</a>">
+ <j:beads>
+ <j:SizeControl size="large"/>
+ <j:TextAlign align="center"/>
+ </j:beads>
+ </j:Label>
+
+ <j:Label width="400"
+ multiline="true"
+ text="Browser support: Chrome, Firefox, IE11 & Edge, Safari, Opera. Mobile: iOS, Android & Windows">
+ <j:beads>
+ <j:SizeControl size="small"/>
+ <j:TextAlign align="center"/>
+ </j:beads>
+ </j:Label>
+
+ <j:HGroup gap="3">
+ <j:IconTextInput>
+ <j:beads>
+ <j:TextPrompt prompt="Search..."/>
+ <j:SizeControl size="xlarge"/>
+ </j:beads>
+ <j:icon>
+ <js:FontIcon text="{MaterialIconType.SEARCH}" material="true"/>
+ </j:icon>
+ </j:IconTextInput>
+ <j:Button text="Search" emphasis="secondary">
+ <j:beads>
+ <j:SizeControl size="xlarge"/>
+ </j:beads>
+ </j:Button>
+ </j:HGroup>
+
+ <j:Spacer height="200"/>
+
+ <html:Span text="(This search box doesn't implements logic at this time)"/>
+
+</j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/assets/apache-royale-jewel-logo-white.svg b/examples/royale/JewelExample/src/main/royale/assets/apache-royale-jewel-logo-white.svg
new file mode 100644
index 0000000..f63292a
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/assets/apache-royale-jewel-logo-white.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!--
+
+ 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.
+
+-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 230 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g><text x="66.075px" y="168.312px" style="font-family:'Aclonica-Regular', 'Aclonica', serif;font-size:30.553px;fill:#fefffe;">JEWEL</text></g><g><path d="M115.101,139.018l-71.09,-97.732l49.004,-32.183l44.118,-0.121l48.856,32.356l-70.888,97.68Zm-50.211,-94.072l34.939,-23.069l29.919,0.006l35.043,23.115l-50.096,68.462l-49.805,-68.514Z" style="fill:#fefffe;"/></g></svg>
\ No newline at end of file
diff --git a/examples/royale/JewelExample/src/main/royale/assets/apache-royale-logo.svg b/examples/royale/JewelExample/src/main/royale/assets/apache-royale-logo.svg
new file mode 100644
index 0000000..1402ae3
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/assets/apache-royale-logo.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!--
+
+ 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.
+
+-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 180 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g><path d="M34.727,161.312l-5.923,0l0,-21.483l10.563,0c0.994,0 1.954,0.117 2.879,0.351c0.925,0.234 1.743,0.602 2.454,1.104c0.711,0.502 1.278,1.151 1.701,1.947c0.422,0.795 0.634,1.76 0.634,2.894c0,0.885 -0.187,1.718 -0.56,2.499c-0.373,0.78 -0.87,1.477 -1.492,2.088c-0.621,0.612 -1.335,1.119 -2.14,1.522c-0.806,0.403 -1.641,0.669 -2.507,0.798c0.388,0.657 0.793,1.278 1.216,1.865c0.423,0.587 0.85,1.136 1.283,1.648c0.433,0.513 0.863,0.985 1.291,1.418c0.427,0.432 0.835,0.828 1.223,1.186c0.915,0.835 1.82,1.556 2.715,2.163l-7.385,0c-0.596,-0.567 -1.163,-1.248 -1.7,-2.044c-0.458,-0.676 -0.918,-1.514 -1.38,-2.514c-0.463,-0.999 -0.818,-2.155 -1.067,-3.468l-1.805,0l0,8.026Zm6.296,-15.187c0,-1.442 -0.351,-2.501 -1.052,-3.178c-0.701,-0.676 -1.753,-1.014 -3.155,-1.014l-2.089,0l0,9.324l2.089,0c0.745,0 1.384,-0.142 1.917,-0.425c0.532,-0.284 0.967,-0.662 1.305,-1.134c0.338,-0.473 0.587,-1.017 0.746,-1.634c0.159,-0.616 0.239,-1.263 0.239,-1.939Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M73.082,150.541c0,1.73 -0.298,3.289 -0.895,4.677c-0.596,1.387 -1.422,2.563 -2.476,3.528c-1.054,0.965 -2.303,1.706 -3.745,2.223c-1.442,0.517 -3.003,0.776 -4.684,0.776c-1.681,0 -3.242,-0.259 -4.685,-0.776c-1.442,-0.517 -2.69,-1.258 -3.744,-2.223c-1.054,-0.965 -1.88,-2.141 -2.477,-3.528c-0.596,-1.388 -0.895,-2.947 -0.895,-4.677c0,-1.761 0.296,-3.335 0.888,-4.722c0.592,-1.387 1.412,-2.561 2.462,-3.521c1.049,-0.96 2.294,-1.695 3.737,-2.208c1.442,-0.512 3.013,-0.768 4.714,-0.768c1.701,0 3.272,0.256 4.714,0.768c1.442,0.513 2.688,1.248 3.737,2.208c1.049,0.96 1.87,2.134 2.462,3.521c0.592,1.387 0.887,2.961 0.887,4.722Zm-6.027,0c0,-0.657 -0.03,-1.328 -0.089,-2.014c-0.06,-0.687 -0.169,-1.353 -0.328,-1.999c-0.16,-0.647 -0.376,-1.254 -0.649,-1.82c-0.274,-0.567 -0.624,-1.062 -1.052,-1.485c-0.428,-0.422 -0.942,-0.756 -1.544,-0.999c-0.602,-0.244 -1.306,-0.366 -2.111,-0.366c-0.816,0 -1.527,0.122 -2.133,0.366c-0.607,0.243 -1.124,0.574 -1.552,0.992c-0.428,0.417 -0.776,0.91 -1.044,1.477c-0.269,0.567 -0.48,1.171 -0.634,1.812c-0.154,0.642 -0.261,1.308 -0.321,1.999c-0.06,0.692 -0.09,1.37 -0.09,2.037c0,0.656 0.03,1.327 0.09,2.014c0.06,0.686 0.169,1.35 0.328,1.991c0.159,0.642 0.376,1.246 0.649,1.813c0.274,0.567 0.624,1.062 1.052,1.484c0.427,0.423 0.942,0.759 1.544,1.007c0.602,0.249 1.305,0.373 2.111,0.373c0.786,0 1.472,-0.127 2.059,-0.38c0.586,-0.254 1.094,-0.597 1.521,-1.03c0.428,-0.432 0.784,-0.934 1.067,-1.506c0.283,-0.572 0.507,-1.179 0.671,-1.82c0.164,-0.642 0.281,-1.301 0.351,-1.977c0.07,-0.676 0.104,-1.333 0.104,-1.969Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M93.267,139.829l-6.952,12.457l0,9.026l-5.923,0l0,-8.698l-7.026,-12.785l6.042,0l4.669,10.801l5.013,-10.801l4.177,0Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M114.899,151.033l0,0.283c-0.02,0.836 -0.107,1.701 -0.261,2.596c-0.154,0.895 -0.371,1.791 -0.649,2.686c-0.279,0.895 -0.612,1.78 -1,2.655c-0.387,0.875 -0.823,1.713 -1.305,2.514c-0.482,0.801 -1.002,1.551 -1.559,2.253c-0.557,0.701 -1.144,1.32 -1.76,1.857l-2.223,-1.283c0.348,-0.587 0.664,-1.226 0.947,-1.917c0.284,-0.691 0.54,-1.415 0.768,-2.171c0.229,-0.756 0.426,-1.531 0.59,-2.327c0.164,-0.796 0.301,-1.586 0.41,-2.372c0.109,-0.786 0.191,-1.559 0.246,-2.32c0.055,-0.761 0.082,-1.484 0.082,-2.171c0,-0.537 -0.002,-1.146 -0.007,-1.827c-0.005,-0.681 -0.045,-1.375 -0.12,-2.081c-0.074,-0.706 -0.196,-1.395 -0.365,-2.066c-0.169,-0.672 -0.42,-1.271 -0.753,-1.798c-0.334,-0.527 -0.761,-0.95 -1.283,-1.268c-0.523,-0.318 -1.172,-0.478 -1.947,-0.478c-0.687,0 -1.276,0.117 -1.768,0.351c-0.493,0.234 -0.91,0.547 -1.253,0.94c-0.343,0.393 -0.617,0.848 -0.821,1.365c-0.204,0.517 -0.363,1.062 -0.477,1.634c-0.115,0.571 -0.189,1.148 -0.224,1.73c-0.035,0.582 -0.052,1.131 -0.052,1.649l0,4.162l6.43,0l0,2.461l-6.43,0l0,5.222l-5.923,0l0,-10.92c0,-1.562 0.249,-3.014 0.746,-4.357c0.497,-1.342 1.201,-2.508 2.111,-3.498c0.91,-0.99 2.004,-1.765 3.282,-2.327c1.278,-0.562 2.703,-0.843 4.274,-0.843c1.064,0 2.061,0.151 2.991,0.455c0.93,0.303 1.778,0.721 2.544,1.253c0.766,0.532 1.45,1.164 2.051,1.895c0.602,0.731 1.104,1.529 1.507,2.394c0.403,0.865 0.709,1.78 0.918,2.745c0.208,0.965 0.303,1.939 0.283,2.924Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M134.174,161.312l-15.426,0l0,-21.483l5.923,0l0,18.753l9.503,0l0,2.73Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M152.389,161.312l-15.426,0l0,-21.483l15.426,0l0,2.745l-9.503,0l0,6.639l7.34,0l0,2.73l-7.34,0l0,6.624l9.503,0l0,2.745Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M62.969,124.121l0,0.189c-0.013,0.558 -0.072,1.136 -0.174,1.733c-0.103,0.598 -0.248,1.196 -0.434,1.793c-0.186,0.598 -0.408,1.189 -0.667,1.773c-0.259,0.584 -0.549,1.144 -0.871,1.678c-0.323,0.535 -0.669,1.036 -1.041,1.504c-0.372,0.468 -0.764,0.882 -1.176,1.24l-1.484,-0.856c0.233,-0.392 0.444,-0.819 0.633,-1.28c0.189,-0.462 0.36,-0.945 0.513,-1.449c0.153,-0.505 0.284,-1.023 0.393,-1.554c0.11,-0.531 0.201,-1.059 0.274,-1.584c0.073,-0.524 0.128,-1.041 0.164,-1.548c0.037,-0.508 0.055,-0.991 0.055,-1.45c0,-0.358 -0.001,-0.765 -0.005,-1.22c-0.003,-0.455 -0.03,-0.918 -0.079,-1.389c-0.05,-0.472 -0.132,-0.931 -0.244,-1.38c-0.113,-0.448 -0.281,-0.848 -0.503,-1.2c-0.223,-0.352 -0.508,-0.634 -0.857,-0.846c-0.349,-0.213 -0.782,-0.319 -1.3,-0.319c-0.458,0 -0.851,0.078 -1.18,0.234c-0.329,0.156 -0.608,0.365 -0.837,0.627c-0.229,0.263 -0.411,0.567 -0.547,0.912c-0.137,0.345 -0.243,0.709 -0.319,1.09c-0.076,0.382 -0.126,0.767 -0.15,1.156c-0.023,0.388 -0.034,0.755 -0.034,1.1l0,2.779l4.292,0l0,1.644l-4.292,0l0,3.485l-3.954,0l0,-7.29c0,-1.043 0.166,-2.012 0.498,-2.908c0.332,-0.897 0.801,-1.675 1.409,-2.336c0.607,-0.661 1.338,-1.179 2.191,-1.554c0.853,-0.375 1.804,-0.563 2.854,-0.563c0.71,0 1.376,0.102 1.997,0.304c0.62,0.203 1.186,0.482 1.698,0.837c0.511,0.355 0.967,0.777 1.369,1.265c0.402,0.488 0.737,1.021 1.006,1.598c0.269,0.578 0.473,1.189 0.613,1.833c0.139,0.644 0.202,1.295 0.189,1.952Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M77.401,125.207c0,0.836 -0.126,1.62 -0.379,2.35c-0.252,0.731 -0.617,1.366 -1.095,1.908c-0.478,0.541 -1.063,0.967 -1.753,1.279c-0.691,0.313 -1.474,0.469 -2.351,0.469c-0.67,0 -1.286,-0.132 -1.847,-0.394c-0.561,-0.262 -1.041,-0.666 -1.44,-1.21l0,6.683l-3.366,0l0,-16.812l1.295,0l1.494,2.5c0.146,-0.419 0.347,-0.799 0.602,-1.141c0.256,-0.342 0.551,-0.634 0.887,-0.876c0.335,-0.242 0.704,-0.43 1.105,-0.563c0.402,-0.133 0.825,-0.199 1.27,-0.199c0.877,0 1.66,0.156 2.351,0.468c0.69,0.312 1.275,0.739 1.753,1.28c0.478,0.541 0.843,1.177 1.095,1.907c0.253,0.731 0.379,1.514 0.379,2.351Zm-3.416,0c0,-0.292 -0.015,-0.603 -0.045,-0.932c-0.03,-0.328 -0.082,-0.655 -0.155,-0.981c-0.073,-0.325 -0.174,-0.637 -0.303,-0.936c-0.13,-0.299 -0.294,-0.563 -0.493,-0.792c-0.2,-0.229 -0.44,-0.411 -0.723,-0.547c-0.282,-0.137 -0.609,-0.205 -0.981,-0.205c-0.385,0 -0.718,0.067 -1.001,0.2c-0.282,0.132 -0.524,0.313 -0.727,0.542c-0.202,0.23 -0.368,0.492 -0.498,0.787c-0.129,0.296 -0.23,0.606 -0.303,0.932c-0.073,0.325 -0.125,0.654 -0.155,0.986c-0.03,0.332 -0.045,0.647 -0.045,0.946c0,0.265 0.02,0.559 0.06,0.881c0.04,0.322 0.103,0.646 0.189,0.971c0.087,0.326 0.2,0.641 0.339,0.946c0.139,0.306 0.31,0.578 0.513,0.817c0.202,0.239 0.438,0.43 0.707,0.573c0.269,0.143 0.576,0.214 0.921,0.214c0.379,0 0.708,-0.068 0.986,-0.204c0.279,-0.136 0.518,-0.319 0.718,-0.548c0.199,-0.229 0.363,-0.493 0.493,-0.792c0.129,-0.299 0.23,-0.611 0.303,-0.936c0.073,-0.325 0.125,-0.654 0.155,-0.986c0.03,-0.332 0.045,-0.644 0.045,-0.936Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M91.145,130.983l-3.366,0l0,-1.374c-0.398,0.544 -0.878,0.948 -1.439,1.21c-0.561,0.262 -1.177,0.394 -1.848,0.394c-0.876,0 -1.66,-0.156 -2.35,-0.469c-0.691,-0.312 -1.275,-0.738 -1.753,-1.279c-0.478,-0.542 -0.844,-1.177 -1.096,-1.908c-0.252,-0.73 -0.378,-1.514 -0.378,-2.35c0,-0.837 0.126,-1.62 0.378,-2.351c0.252,-0.73 0.618,-1.366 1.096,-1.907c0.478,-0.541 1.062,-0.968 1.753,-1.28c0.69,-0.312 1.474,-0.468 2.35,-0.468c0.445,0 0.868,0.066 1.27,0.199c0.402,0.133 0.77,0.321 1.106,0.563c0.335,0.242 0.63,0.534 0.886,0.876c0.256,0.342 0.457,0.722 0.603,1.141l1.494,-2.5l1.294,0l0,11.503Zm-3.386,-5.776c0,-0.299 -0.015,-0.614 -0.045,-0.946c-0.03,-0.332 -0.081,-0.661 -0.154,-0.986c-0.073,-0.326 -0.174,-0.636 -0.304,-0.932c-0.129,-0.295 -0.295,-0.557 -0.498,-0.787c-0.202,-0.229 -0.446,-0.41 -0.732,-0.542c-0.286,-0.133 -0.618,-0.2 -0.996,-0.2c-0.378,0 -0.707,0.068 -0.986,0.205c-0.279,0.136 -0.518,0.318 -0.717,0.547c-0.199,0.229 -0.364,0.493 -0.493,0.792c-0.13,0.299 -0.231,0.611 -0.304,0.936c-0.073,0.326 -0.124,0.653 -0.154,0.981c-0.03,0.329 -0.045,0.64 -0.045,0.932c0,0.292 0.015,0.604 0.045,0.936c0.03,0.332 0.081,0.661 0.154,0.986c0.073,0.325 0.174,0.637 0.304,0.936c0.129,0.299 0.294,0.563 0.493,0.792c0.199,0.229 0.438,0.412 0.717,0.548c0.279,0.136 0.608,0.204 0.986,0.204c0.345,0 0.652,-0.071 0.921,-0.214c0.269,-0.143 0.505,-0.334 0.707,-0.573c0.203,-0.239 0.374,-0.511 0.513,-0.817c0.14,-0.305 0.253,-0.62 0.339,-0.946c0.086,-0.325 0.149,-0.649 0.189,-0.971c0.04,-0.322 0.06,-0.616 0.06,-0.881Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M104.571,122.328l-1.454,0.578c-0.232,-0.73 -0.621,-1.291 -1.165,-1.683c-0.545,-0.392 -1.199,-0.588 -1.962,-0.588c-0.412,0 -0.779,0.065 -1.101,0.194c-0.322,0.13 -0.604,0.307 -0.846,0.533c-0.243,0.226 -0.449,0.488 -0.618,0.787c-0.169,0.299 -0.307,0.618 -0.413,0.956c-0.106,0.339 -0.183,0.689 -0.229,1.051c-0.047,0.362 -0.07,0.712 -0.07,1.051c0,0.365 0.02,0.733 0.06,1.105c0.04,0.372 0.108,0.729 0.204,1.071c0.096,0.342 0.224,0.661 0.383,0.956c0.16,0.296 0.361,0.553 0.603,0.772c0.242,0.219 0.531,0.392 0.866,0.518c0.336,0.126 0.723,0.189 1.161,0.189c0.352,0 0.687,-0.053 1.006,-0.159c0.318,-0.106 0.611,-0.256 0.876,-0.448c0.266,-0.193 0.501,-0.422 0.707,-0.688c0.206,-0.265 0.369,-0.561 0.488,-0.886l1.464,0.538c-0.219,0.524 -0.509,0.978 -0.871,1.359c-0.362,0.382 -0.772,0.698 -1.23,0.946c-0.458,0.249 -0.95,0.434 -1.474,0.553c-0.525,0.12 -1.056,0.18 -1.594,0.18c-0.87,0 -1.676,-0.148 -2.42,-0.444c-0.744,-0.295 -1.386,-0.71 -1.927,-1.245c-0.541,-0.534 -0.965,-1.168 -1.27,-1.902c-0.306,-0.734 -0.458,-1.539 -0.458,-2.415c0,-0.883 0.151,-1.693 0.453,-2.43c0.302,-0.738 0.722,-1.372 1.26,-1.903c0.538,-0.531 1.178,-0.943 1.922,-1.235c0.744,-0.292 1.557,-0.438 2.44,-0.438c0.558,0 1.103,0.061 1.634,0.184c0.531,0.123 1.024,0.312 1.479,0.568c0.455,0.256 0.863,0.579 1.225,0.971c0.362,0.392 0.652,0.86 0.871,1.404Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M118.326,124.39c0,0.777 -0.095,1.587 -0.284,2.43c-0.189,0.844 -0.453,1.67 -0.792,2.48c-0.338,0.81 -0.743,1.572 -1.215,2.286c-0.471,0.714 -0.989,1.33 -1.554,1.848l-1.265,-0.688c0.18,-0.332 0.349,-0.703 0.508,-1.115c0.16,-0.412 0.304,-0.848 0.434,-1.31c0.129,-0.461 0.245,-0.938 0.348,-1.429c0.103,-0.491 0.19,-0.978 0.259,-1.459c0.07,-0.482 0.123,-0.95 0.16,-1.405c0.036,-0.454 0.054,-0.878 0.054,-1.269c0,-0.259 -0.01,-0.537 -0.029,-0.832c-0.02,-0.296 -0.062,-0.591 -0.125,-0.887c-0.063,-0.295 -0.148,-0.579 -0.254,-0.851c-0.106,-0.272 -0.247,-0.511 -0.423,-0.717c-0.176,-0.206 -0.389,-0.372 -0.638,-0.498c-0.249,-0.126 -0.543,-0.189 -0.881,-0.189c-0.332,0 -0.628,0.074 -0.887,0.224c-0.259,0.149 -0.488,0.345 -0.687,0.587c-0.199,0.243 -0.37,0.52 -0.513,0.832c-0.142,0.312 -0.259,0.632 -0.348,0.961c-0.09,0.329 -0.155,0.652 -0.195,0.971c-0.039,0.319 -0.059,0.604 -0.059,0.857l0,5.766l-3.377,0l0,-15.736l3.367,0l0,5.926c0.431,-0.631 0.961,-1.117 1.588,-1.459c0.628,-0.342 1.323,-0.513 2.087,-0.513c0.797,0 1.491,0.129 2.082,0.388c0.59,0.259 1.082,0.62 1.474,1.081c0.391,0.461 0.684,1.009 0.876,1.643c0.193,0.635 0.289,1.327 0.289,2.077Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M123.316,125.525c0.411,0.093 0.823,0.166 1.235,0.22c0.412,0.053 0.827,0.079 1.245,0.079c0.438,0 0.845,-0.041 1.22,-0.124c0.375,-0.083 0.7,-0.223 0.976,-0.419c0.276,-0.195 0.493,-0.456 0.652,-0.781c0.16,-0.326 0.239,-0.731 0.239,-1.216c0,-0.391 -0.053,-0.75 -0.159,-1.075c-0.106,-0.326 -0.264,-0.604 -0.473,-0.837c-0.209,-0.232 -0.467,-0.413 -0.772,-0.543c-0.305,-0.129 -0.661,-0.194 -1.066,-0.194c-0.378,0 -0.718,0.07 -1.021,0.209c-0.302,0.14 -0.567,0.327 -0.796,0.563c-0.229,0.236 -0.425,0.51 -0.588,0.822c-0.163,0.312 -0.297,0.637 -0.403,0.976c-0.107,0.338 -0.183,0.68 -0.229,1.026c-0.047,0.345 -0.07,0.67 -0.07,0.976c0,0.053 0,0.106 0,0.159c0,0.053 0.003,0.106 0.01,0.159Zm8.296,-2.27c0,0.471 -0.076,0.891 -0.229,1.26c-0.152,0.368 -0.36,0.692 -0.622,0.971c-0.262,0.278 -0.566,0.514 -0.912,0.707c-0.345,0.192 -0.713,0.35 -1.105,0.473c-0.392,0.123 -0.795,0.211 -1.21,0.264c-0.415,0.053 -0.819,0.079 -1.21,0.079c-0.498,0 -0.99,-0.034 -1.474,-0.104c-0.485,-0.07 -0.963,-0.181 -1.435,-0.334c0.073,0.438 0.19,0.855 0.349,1.25c0.159,0.395 0.372,0.741 0.637,1.036c0.266,0.296 0.593,0.53 0.981,0.702c0.389,0.173 0.849,0.259 1.38,0.259c0.352,0 0.687,-0.053 1.006,-0.159c0.319,-0.106 0.611,-0.256 0.876,-0.448c0.266,-0.193 0.5,-0.422 0.703,-0.688c0.202,-0.265 0.366,-0.561 0.493,-0.886l1.454,0.538c-0.219,0.524 -0.52,0.978 -0.902,1.359c-0.381,0.382 -0.813,0.698 -1.294,0.946c-0.482,0.249 -0.993,0.434 -1.534,0.553c-0.541,0.12 -1.078,0.18 -1.609,0.18c-0.876,0 -1.686,-0.148 -2.43,-0.444c-0.744,-0.295 -1.384,-0.708 -1.922,-1.24c-0.538,-0.531 -0.96,-1.165 -1.265,-1.902c-0.306,-0.737 -0.458,-1.544 -0.458,-2.42c0,-0.877 0.152,-1.683 0.458,-2.421c0.305,-0.737 0.727,-1.371 1.265,-1.902c0.538,-0.531 1.178,-0.944 1.922,-1.24c0.744,-0.295 1.554,-0.443 2.43,-0.443c0.425,0 0.86,0.03 1.305,0.09c0.445,0.059 0.876,0.154 1.295,0.283c0.418,0.13 0.813,0.298 1.185,0.503c0.372,0.206 0.695,0.46 0.971,0.762c0.276,0.302 0.495,0.653 0.657,1.051c0.163,0.398 0.244,0.853 0.244,1.365Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M156.233,141.953l-1.264,0l0,-3.998l-1.247,0l0,-0.585l3.758,0l0,0.585l-1.247,0l0,3.998Z" style="fill:#010001;fill-rule:nonzero;"/><path d="M158.753,138.535l-0.356,3.418l-0.78,0l0.78,-4.583l1.155,0l1.072,3.497l1.086,-3.497l1.155,0l0.649,4.583l-1.286,0l-0.378,-3.329l-0.895,3.329l-1.155,0l-1.047,-3.418Z" style="fill:#010001;fill-rule:nonzero;"/></g><g><path d="M79.004,37.698c-1.912,-2.482 -3.018,-5.577 -3.018,-8.864c0,-8.018 6.51,-14.528 14.528,-14.528c8.017,0 14.527,6.51 14.527,14.528c0,3.262 -1.089,6.332 -2.972,8.804l24.775,33.96l24.593,-16.236c-0.097,-0.68 -0.147,-1.37 -0.147,-2.064c0,-8.018 6.51,-14.528 14.528,-14.528c8.017,0 14.527,6.51 14.527,14.528c0,7.048 -5.031,12.931 -11.695,14.251l-8.1,31.684c3.563,2.647 5.871,6.888 5.871,11.668c0,8.018 -6.51,14.527 -14.528,14.527c-8.018,0 -14.527,-6.509 -14.527,-14.527c0,-2.66 0.726,-5.205 2.027,-7.402l-14.751,-20.194l-21.183,14.027c10.62,0.951 21.499,3.025 33.073,6.216c-1.498,2.173 -2.018,4.863 -1.762,7.945c-32.183,-8.508 -58.329,-8.39 -88.598,-0.007c0.146,-2.849 -0.165,-5.585 -1.424,-7.973c11.381,-3.263 22.193,-5.347 32.901,-6.256l-21.305,-14.082l-14.671,20.167c1.361,2.233 2.121,4.837 2.121,7.559c0,8.018 -6.509,14.527 -14.527,14.527c-8.018,0 -14.528,-6.509 -14.528,-14.527c0,-4.587 2.132,-8.699 5.48,-11.367l-8.037,-31.964c-6.717,-1.277 -11.802,-7.186 -11.802,-14.272c0,-8.018 6.509,-14.528 14.527,-14.528c8.018,0 14.528,6.51 14.528,14.528c0,0.674 -0.047,1.345 -0.14,2.006l24.962,16.489l24.747,-34.095Zm66.867,59.982l0.028,-0.013l2.997,6.617c-2.598,1.177 -4.266,3.765 -4.266,6.617c0,4.009 3.254,7.263 7.263,7.263c4.009,0 7.264,-3.254 7.264,-7.263c0,-4.012 -3.252,-7.264 -7.264,-7.264l0,-7.249l-0.001,-0.001l0.001,-0.007l0,-0.007l0.002,0l7.632,-29.98l-0.015,-0.008l3.153,-6.544c0.983,0.474 2.061,0.72 3.153,0.72c4.008,0 7.263,-3.254 7.263,-7.263c0,-4.009 -3.255,-7.264 -7.263,-7.264c-4.009,0 -7.264,3.255 -7.264,7.264c0,1.82 0.683,3.574 1.915,4.914l-5.324,4.891l0.002,0.002l-0.015,0.01l-0.012,0.011l-0.002,-0.002l-23.233,15.385l13.986,19.171Zm-96.52,-19.127l-23.597,-15.596l0.003,-0.008l-5.423,-4.824c1.183,-1.33 1.837,-3.047 1.837,-4.827c0,-4.009 -3.255,-7.264 -7.264,-7.264c-4.009,0 -7.264,3.255 -7.264,7.264c0,4.009 3.255,7.263 7.264,7.263c1.044,0 2.075,-0.224 3.024,-0.659l3.012,6.58l0.005,-0.001l7.516,29.914l0.004,0l0.001,0.023l0.001,0.002c0.001,0.002 0.001,0.005 0,0.008l0.397,7.22c-3.85,0.212 -6.864,3.396 -6.864,7.253c0,4.009 3.255,7.263 7.264,7.263c4.009,0 7.263,-3.254 7.263,-7.263c0,-2.821 -1.632,-5.386 -4.187,-6.58l3.077,-6.58l0.003,0.001l13.928,-19.189Zm70.238,-2.166l-24.639,-33.732l0.007,-0.005l-2.219,-6.901c3.003,-0.966 5.039,-3.76 5.039,-6.915c0,-4.009 -3.254,-7.264 -7.263,-7.264c-4.009,0 -7.264,3.255 -7.264,7.264c0,3.114 1.985,5.882 4.935,6.88l-2.324,6.869l0.008,0.006l-24.61,33.83l29.131,19.244l29.199,-19.276Z" style="fill:url(#_Linear1);"/><clipPath id="_clip2"><path d="M57.281,67.662l-3.022,4.132l6.994,4.609l3.064,-4.224l-7.036,-4.517Z"/></clipPath><g clip-path="url(#_clip2)"><use xlink:href="#_Image3" x="56.271" y="67.808" width="12.182px" height="10.876px" transform="matrix(0.937047,0,0,0.988712,0,0)"/></g><clipPath id="_clip4"><path d="M53.19,87.5l3.151,-4.342l-6.974,-4.615l-3.289,4.532l7.112,4.425Z"/></clipPath><g clip-path="url(#_clip4)"><use xlink:href="#_Image5" x="46.621" y="80.879" width="13.37px" height="11.415px" transform="matrix(0.955031,-1.0603e-16,-5.28031e-17,0.951215,2.84217e-14,1.42109e-14)"/></g><clipPath id="_clip6"><path d="M120.179,86.247l4.465,-2.943l-5.042,-6.913l-4.453,2.94l5.03,6.916Z"/></clipPath><g clip-path="url(#_clip6)"><use xlink:href="#_Image7" x="121.463" y="76.129" width="10.47px" height="12.717px" transform="matrix(0.951844,-5.28379e-17,5.43015e-17,0.97821,-2.84217e-14,0)"/></g><clipPath id="_clip8"><path d="M131.353,68.632l-4.501,2.976l5.046,6.898l4.432,-2.934l-4.977,-6.94Z"/></clipPath><g clip-path="url(#_clip8)"><use xlink:href="#_Image9" x="129.864" y="69.382" width="10.618px" height="12.687px" transform="matrix(0.965234,0,5.4174e-17,0.975912,0,0)"/></g></g><defs><linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(161.384,102.511,-102.511,161.384,11.2355,22.3133)"><stop offset="0" style="stop-color:#f60e0e;stop-opacity:1"/><stop offset="1" style="stop-color:#f66629;stop-opacity:1"/></linearGradient><image id="_Image3" width="13px" height="11px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAALCAYAAACksgdhAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABXklEQVQokW2Ru0oDURCGvzlnTWTjJSaIBsXOC6JPYKdWqawsxd4XELbQwjyBpbVgIYigtha+gphCUIwkKJqAJNl1ze45FrkiTjPDMN8/N7HWWgDf90kmk0j5lXBrAxp1ABA6vhuAA1AsFkmn06Qcjeztohv1du0/ANKByuUyYRiSOjnGfbjHVUJCBMUf67Ba4vjQAD93t0Tnp31VAYUgSnoNe9Ba6fGw3mzSuLogNgYDmO5IIigBJdLXmp1DvEzKdlWGgJyjmHIUWS1MOJoxJbgiJJSgkwmGz25wvIwLAoWaTwsoRYamtQRovjGEWhjXihELo/tHyNJKf1cv4/b2rcaWp5+Yl1ZMJTJ8RIav9Tz+Zp4gCHAYuKaXbYOFmo9vLc+tmMBagukZ4u0dTLXKeBQNXHXgJ1421Uu/RYaXxVVKb+9UKhVyuRziz0/av9CgUOGz2X7owjIHl9dIdpJfkad9NZKVTPQAAAAASUVORK5CYII="/><image id="_Image5" width="14px" height="12px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABh0lEQVQokX2ST09TURDFf3PbPirVhIQ/6eolJlYTE23iJ3CBxLiBsGer7IwbNxh3fAP3xgUfoC5cYIImxDVhQySEJaX0AY9QKa2vd8bFa18fiXo2c3Nnzj1zZq6YmQHYacT7FwvY4QEAa9OTZJBRlPHViNhoNGgeHdHa/o7/+iUryB7IkRBwo3MYhtyr1biLUs7VrJ91uYFhrgjQ6XSoVqsE+3u4H1uUSwWOB8qZWko+7w7VKzdb9d7TP2kRL81zGbWJ1Yi80vZKc6AkOcG1mUrOoxm91RX6W5v0zPilxoUZ515pe6M1UGLVMXm2krY62PiIfdskECiIUBIIDMquwC2nTDrhxAvNxGNzVdajFuJ/7ll/+RkkvzPzBiTAtZGqq3LqlejBI6Lni1zu7lBM3rwck3KDC0RwQMlBII7y9AxTb98xdd3n+PYdpFubtf8tWgUSA//hE1f3HxLHMfV6PfX4TwwXXXn1Gnk6z0SvRxiGaSpT/IsaAu7xEyY2PkOxhKriXPpn/gA7g66v7cSXfAAAAABJRU5ErkJggg=="/><image id="_Image7" width="11px" height="13px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABVklEQVQokWWQvy9DYRSGn/Pd79LS6L2EkPpRYmCRSAxGYiQxSiQGidhYuqm1EX+AsPk7OpnEINHJICEYmi4MvajU1R5Dr/7gLGd5zvue9xVVVYDzs1MeTo7gPSCb7gMRAIgWgAnDkGKxyOTMLP7aBmIMueeAfyNgXNfF931SfpJ06R6t1zuA9m1Qxb2+oPdwm9TtFem4BSD3VP4vXs3uaO0yT6jKy7fyUPmm8PZFUGs4ZKeSrZ9rl3kAXBGSjmGk22GqxzaB3GPkIIJpeQhxRxhwDWPdDpNx29FE4+cI/M2RsMJgl8NE3OJZE6k32pHK0pj+7fSzrpS+atx9hNy8ha3qmmDbxByh3zWMxizT8ws4K+uIMbSStN0IkBgaJrWVoeqlCAoFXt+DCG4XF7Crm8R2D7DGUi2VCIKA/b09pLI8rr+wjKbpyhxj5hYBUFXK5TKe5wHwA3tQZ8pDGCVdAAAAAElFTkSuQmCC"/><image id="_Image9" width="11px" height="13px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABV0lEQVQokV2RsUoDQRRFz8xOVrOLRgUVtHIlgqWlH+Af+A3+gEWKNLGw087GxlbsxEKwEIsoiKCCiBCIESViFFFUXJPszozFmpjkVo/h3MfhjbDWWoAwDPE8j1bM5QnN9Rz2uQoieVNYQ/H4hCAIUEqRihrEm6vE+9sgBJ1x7M1lQY5P4nkeqeszKCzB1ek/2OIFKH1epJwZof9gB3F7wUSfw4CSCdO9GIW16MNdyo7AG3BJS0HKkaQ7wb9Z5qcyAHwby91PzFPT8BEZIiy9kQD5ICnUmpqHesxLpPmKLdr2OHd3BeUwxleStCNwHfCRbb49tXSsgEoY8VjXvEeGhrEgwFlYTDSSpaKt86kt9/WYWkPzOTiKXNnCXV77gztu2ipU65rq7DwfuQ3CmTmMMR3OPTdFpaiMBQy9vpEefsV1XWTvlyIgP52BOKJxtEe5VCKbzeL7Pr/lwn7EedK+FgAAAABJRU5ErkJggg=="/></defs></svg>
\ No newline at end of file
diff --git a/examples/royale/JewelExample/src/main/royale/itemRenderers/IconListItemRenderer.mxml b/examples/royale/JewelExample/src/main/royale/itemRenderers/IconListItemRenderer.mxml
new file mode 100644
index 0000000..0f14474
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/itemRenderers/IconListItemRenderer.mxml
@@ -0,0 +1,55 @@
+<?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:ListItemRenderer 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:html="library://ns.apache.org/royale/html"
+ xmlns="http://www.w3.org/1999/xhtml">
+
+ <fx:Script>
+ <![CDATA[
+ import vos.IconListVO;
+ import org.apache.royale.jewel.List;
+ import org.apache.royale.collections.ArrayList;
+
+ [Bindable("dataChange")]
+ public function get iconList():IconListVO
+ {
+ return data as IconListVO;
+ }
+
+ private function clickCloseButton():void
+ {
+ var list:List = itemRendererParent as List;
+ (list.dataProvider as ArrayList).removeItemAt(index);
+ }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ItemRendererDataBinding />
+ </j:beads>
+
+ <js:FontIcon text="{iconList.icon}" material="true" visible="{iconList.icon != null}" click="clickCloseButton()"/>
+
+ <html:Span text="{iconList.label}"/>
+
+</j:ListItemRenderer>
+
diff --git a/examples/royale/JewelExample/src/main/royale/itemRenderers/NavigationIconLinkItemRenderer.mxml b/examples/royale/JewelExample/src/main/royale/itemRenderers/NavigationIconLinkItemRenderer.mxml
new file mode 100644
index 0000000..7cf6f77
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/itemRenderers/NavigationIconLinkItemRenderer.mxml
@@ -0,0 +1,47 @@
+<?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:NavigationLinkItemRenderer 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:html="library://ns.apache.org/royale/html"
+ xmlns="http://www.w3.org/1999/xhtml">
+
+ <fx:Script>
+ <![CDATA[
+ import vos.NavigationLinkVO;
+
+ [Bindable("dataChange")]
+ public function get navlink():NavigationLinkVO
+ {
+ return data as NavigationLinkVO;
+ }
+ ]]>
+ </fx:Script>
+
+ <j:beads>
+ <js:ItemRendererDataBinding />
+ </j:beads>
+
+ <js:FontIcon text="{navlink.icon}" material="true" visible="{navlink.icon != null}"/>
+
+ <html:Span text="{navlink.label}"/>
+
+</j:NavigationLinkItemRenderer>
+
diff --git a/examples/royale/JewelExample/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml b/examples/royale/JewelExample/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml
new file mode 100644
index 0000000..4c03e1a
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/itemRenderers/TableCellCloseIconItemRenderer.mxml
@@ -0,0 +1,52 @@
+<?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:TableItemRenderer 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:html="library://ns.apache.org/royale/html"
+ xmlns="http://www.w3.org/1999/xhtml"
+ hoverable="false"
+ selectable="false">
+
+ <fx:Script>
+ <![CDATA[
+ import org.apache.royale.jewel.Table;
+ import org.apache.royale.collections.ArrayList;
+
+ private function clickCloseButton():void
+ {
+ var table:Table = itemRendererParent as Table;
+ (table.dataProvider as ArrayList).removeItemAt(rowIndex);
+ }
+ ]]>
+ </fx:Script>
+
+ <mdl:beads>
+ <js:ItemRendererDataBinding/>
+ </mdl:beads>
+
+ <j:IconButton emphasis="primary" width="24" height="24" style="padding: 0px; border-radius: 50%" click="clickCloseButton()">
+ <j:icon>
+ <js:FontIcon text="{MaterialIconType.CLOSE}" material="true" size="18"/>
+ </j:icon>
+ </j:IconButton>
+
+</j:TableItemRenderer>
+
diff --git a/examples/royale/JewelExample/src/main/royale/models/ListsModel.as b/examples/royale/JewelExample/src/main/royale/models/ListsModel.as
index 7f93d19..7fce824 100644
--- a/examples/royale/JewelExample/src/main/royale/models/ListsModel.as
+++ b/examples/royale/JewelExample/src/main/royale/models/ListsModel.as
@@ -18,24 +18,67 @@
////////////////////////////////////////////////////////////////////////////////
package models
{
+ import vos.IconListVO;
+ import org.apache.royale.collections.ArrayList;
+
+ [Bindable]
public class ListsModel
{
/**
* Used in the List example.
*/
- private var _watchmen:Array = [
+ private var _watchmen:ArrayList = new ArrayList([
"The Comedian",
"Doctor Manhattan",
"Nite Owl",
"Ozymandias",
"Rorschach",
"Silk Spectre"
- ];
+ ]);
- public function get watchmen():Array
+ public function get watchmen():ArrayList
{
return _watchmen;
}
+ private var _avengers:ArrayList = new ArrayList([
+ new IconListVO("Iron Man", MaterialIconType.WEB_ASSET),
+ new IconListVO("Hulk", MaterialIconType.WEB_ASSET),
+ new IconListVO("Thor", MaterialIconType.WEB_ASSET),
+ new IconListVO("Captain America", MaterialIconType.WEB_ASSET),
+ new IconListVO("Black Widow", MaterialIconType.WEB_ASSET),
+ new IconListVO("Hawkeye", MaterialIconType.WEB_ASSET),
+ new IconListVO("Vision", MaterialIconType.WEB_ASSET),
+ new IconListVO("Scarlet Witch", MaterialIconType.WEB_ASSET),
+ new IconListVO("Spiderman", MaterialIconType.WEB_ASSET)
+ ]);
+
+ public function get avengers():ArrayList
+ {
+ return _avengers;
+ }
+
+
+
+ /**
+ * Used in the List example.
+ */
+ private var _iconListData:ArrayList = new ArrayList([
+ new IconListVO("Alert", MaterialIconType.WEB_ASSET),
+ new IconListVO("Button", MaterialIconType.CROP_7_5),
+ new IconListVO("DropDownList", MaterialIconType.CREDIT_CARD),
+ new IconListVO("CheckBox", MaterialIconType.CHECK_BOX),
+ new IconListVO("Label", MaterialIconType.LABEL),
+ new IconListVO("List", MaterialIconType.LIST_ALT),
+ new IconListVO("RadioButton", MaterialIconType.RADIO_BUTTON_CHECKED),
+ new IconListVO("Slider", MaterialIconType.STORAGE),
+ new IconListVO("Text", MaterialIconType.SUBJECT),
+ new IconListVO("TextInput", MaterialIconType.TEXT_FIELDS)
+ ]);
+
+ public function get iconListData():ArrayList
+ {
+ return _iconListData;
+ }
}
}
diff --git a/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as b/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.as
new file mode 100644
index 0000000..44a6bef
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/models/MainNavigationModel.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 models
+{
+ import org.apache.royale.collections.ArrayList;
+
+ import vos.NavigationLinkVO;
+
+ public class MainNavigationModel
+ {
+ private var _controlsDrawerNavigation:ArrayList = new ArrayList([
+ new NavigationLinkVO("Alert", "alert_panel", MaterialIconType.WEB_ASSET),
+ new NavigationLinkVO("Button", "button_panel", MaterialIconType.CROP_7_5),
+ new NavigationLinkVO("NumericStepper", "numericstepper_panel", MaterialIconType.UNFOLD_MORE),
+ new NavigationLinkVO("Date Components", "datecomponents_panel", MaterialIconType.DATE_RANGE),
+ new NavigationLinkVO("ComboBox", "combobox_panel", MaterialIconType.CREDIT_CARD),
+ new NavigationLinkVO("CheckBox", "checkbox_panel", MaterialIconType.CHECK_BOX),
+ new NavigationLinkVO("Icon", "miscelanea_panel", MaterialIconType.FACE),
+ new NavigationLinkVO("Label", "label_panel", MaterialIconType.LABEL),
+ new NavigationLinkVO("List", "list_panel", MaterialIconType.LIST_ALT),
+ new NavigationLinkVO("RadioButton", "radiobutton_panel", MaterialIconType.RADIO_BUTTON_CHECKED),
+ new NavigationLinkVO("Slider", "slider_panel", MaterialIconType.STORAGE),
+ new NavigationLinkVO("Text", "text_panel", MaterialIconType.SUBJECT),
+ new NavigationLinkVO("TextInput", "textinput_panel", MaterialIconType.TEXT_FIELDS),
+ new NavigationLinkVO("Forms & Validation", "form_validation_panel", MaterialIconType.ASSIGNMENT_TURNED_IN),
+ new NavigationLinkVO("DropDownList", "dropdownlist_panel", MaterialIconType.CREDIT_CARD)
+
+ // new NavigationLinkVO("Menu", "menus_panel"),
+ // new NavigationLinkVO("Loading", "loading_panel"),
+ // new NavigationLinkVO("Snackbar", "snackbar_panel"),
+ // new NavigationLinkVO("Tables", "tables_panel"),
+
+ ]);
+ public function get controlsDrawerNavigation():ArrayList
+ {
+ return _controlsDrawerNavigation;
+ }
+
+ private var _containerDrawerNavigation:ArrayList = new ArrayList([
+ new NavigationLinkVO("Card", "card_panel", "web_asset"),
+ new NavigationLinkVO("Grid", "grid_panel", "grid_on"),
+ new NavigationLinkVO("Tables", "tables_panel", "view_quilt")
+
+ // new NavigationLinkVO("Tabs", "tabs_panel"),
+ // new NavigationLinkVO("Snackbar", "snackbar_panel"),
+
+ ]);
+
+ public function get containerDrawerNavigation():ArrayList
+ {
+ return _containerDrawerNavigation;
+ }
+ }
+}
diff --git a/examples/royale/JewelExample/src/main/royale/models/TablesModel.as b/examples/royale/JewelExample/src/main/royale/models/TablesModel.as
new file mode 100644
index 0000000..b64e7e0
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/models/TablesModel.as
@@ -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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package models
+{
+ import org.apache.royale.collections.ArrayList;
+ import vos.GuitarristVO;
+
+ [Bindable]
+ public class TablesModel
+ {
+ private var _guitarrists:ArrayList = new ArrayList([
+ new GuitarristVO("Steve Vai", "Passion & Warfare", 1990),
+ new GuitarristVO("Joe Satriani", "Surfing With The Alien", 1987),
+ new GuitarristVO("Yngwie Malmsteen", "Rising Force", 1984),
+ new GuitarristVO("Steve Morse", "Southern Steel", 1991),
+ new GuitarristVO("Mark Knopfler", "Local Hero", 1983),
+ new GuitarristVO("Eric Sardinas", "Treat Me Right", 1999),
+ new GuitarristVO("Mike Oldfield", "Tubular Bells", 1973),
+ new GuitarristVO("Van Halen", "1984", 1984)
+ ]);
+
+ public function get guitarrists():ArrayList
+ {
+ return _guitarrists;
+ }
+ }
+}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as b/examples/royale/JewelExample/src/main/royale/vos/GuitarristVO.as
similarity index 71%
copy from frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
copy to examples/royale/JewelExample/src/main/royale/vos/GuitarristVO.as
index 7935bcf..1648385 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
+++ b/examples/royale/JewelExample/src/main/royale/vos/GuitarristVO.as
@@ -16,20 +16,20 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.html.beads
+package vos
{
- import org.apache.royale.core.IBead;
+ [Bindable]
+ public class GuitarristVO
+ {
+ public var guitarrist:String;
+ public var album:String;
+ public var year:int;
- /**
- * The IBackgroundBead interface is a marker interface for beads
- * that draw backgrounds.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public interface IBorderBead extends IBead
- {
- }
+ public function GuitarristVO(guitarrist:String, album:String, year:int)
+ {
+ this.guitarrist = guitarrist;
+ this.album = album;
+ this.year = year;
+ }
+ }
}
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/examples/royale/JewelExample/src/main/royale/vos/IconListVO.as
similarity index 76%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to examples/royale/JewelExample/src/main/royale/vos/IconListVO.as
index 75d1f7d..f30d42c 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/examples/royale/JewelExample/src/main/royale/vos/IconListVO.as
@@ -1,4 +1,3 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,13 +16,18 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-
-@namespace "http://www.w3.org/1999/xhtml";
-
-.Application
+package vos
{
- padding: 10px;
- margin: 10px;
+ [Bindable]
+ public class IconListVO
+ {
+ public var label:String;
+ public var icon:String;
+
+ public function IconListVO(label:String, icon:String = null)
+ {
+ this.label = label;
+ this.icon = icon;
+ }
+ }
}
-
\ No newline at end of file
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as b/examples/royale/JewelExample/src/main/royale/vos/NavigationLinkVO.as
similarity index 71%
copy from frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
copy to examples/royale/JewelExample/src/main/royale/vos/NavigationLinkVO.as
index 7935bcf..c33b845 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
+++ b/examples/royale/JewelExample/src/main/royale/vos/NavigationLinkVO.as
@@ -16,20 +16,20 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.html.beads
+package vos
{
- import org.apache.royale.core.IBead;
+ [Bindable]
+ public class NavigationLinkVO
+ {
+ public var label:String;
+ public var href:String;
+ public var icon:String;
- /**
- * The IBackgroundBead interface is a marker interface for beads
- * that draw backgrounds.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public interface IBorderBead extends IBead
- {
- }
+ public function NavigationLinkVO(label:String, href:String, icon:String = null)
+ {
+ this.label = label;
+ this.href = href;
+ this.icon = icon;
+ }
+ }
}
diff --git a/examples/royale/ListExample/pom.xml b/examples/royale/ListExample/pom.xml
index 8b55d98..99c90f6 100644
--- a/examples/royale/ListExample/pom.xml
+++ b/examples/royale/ListExample/pom.xml
@@ -66,6 +66,20 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
<artifactId>BasicTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
diff --git a/examples/royale/ListExample/src/main/royale/MyInitialView.mxml b/examples/royale/ListExample/src/main/royale/MyInitialView.mxml
index 0d3507f..cc5880d 100644
--- a/examples/royale/ListExample/src/main/royale/MyInitialView.mxml
+++ b/examples/royale/ListExample/src/main/royale/MyInitialView.mxml
@@ -47,6 +47,7 @@
<fx:Script>
<![CDATA[
import models.ProductsModel;
+ import org.apache.royale.collections.ArrayList;
private function addState():void
{
@@ -65,6 +66,13 @@
private function onScrollEnd():void{
trace("scroll end");
}
+
+ private function assignDataProvider():void{
+ trace("assign new DataProvider");
+
+ dynamicList.dataProvider = new ArrayList(['one', 'two', 'three', 'four']);
+ //(applicationModel as ProductsModel).states = new ArrayList(['one', 'two', 'three', 'four']); <-- this way the list doesn't notice the change
+ }
]]>
</fx:Script>
@@ -88,7 +96,7 @@
<js:Label x="300" y="20" text="A dynamic List" />
- <js:List x="300" y="40" width="200" height="300" className="DynamicList">
+ <js:List id="dynamicList" x="300" y="40" width="200" height="300" className="DynamicList">
<js:beads>
<js:ConstantBinding
sourceID="applicationModel"
@@ -100,6 +108,7 @@
<js:TextButton text="Add New Jersey" x="300" y="350" click="addState()" />
<js:TextButton text="Remove New Jersey" x="300" y="380" click="removeState()" />
+ <js:TextButton text="Assign New Data" x="300" y="410" click="assignDataProvider()" />
<!-- A custom list built from DataContainer.
-->
diff --git a/examples/royale/ListExample/src/main/royale/models/ProductsModel.as b/examples/royale/ListExample/src/main/royale/models/ProductsModel.as
index f4601eb..30bbc62 100644
--- a/examples/royale/ListExample/src/main/royale/models/ProductsModel.as
+++ b/examples/royale/ListExample/src/main/royale/models/ProductsModel.as
@@ -40,6 +40,11 @@
{
return _states;
}
+
+ public function set states(a:ArrayList):void
+ {
+ _states = a;
+ }
public var _bigArray:Array;
diff --git a/examples/royale/MDLDynamicTableExample/pom.xml b/examples/royale/MDLDynamicTableExample/pom.xml
index 739dc55..2a7fb1d 100644
--- a/examples/royale/MDLDynamicTableExample/pom.xml
+++ b/examples/royale/MDLDynamicTableExample/pom.xml
@@ -39,10 +39,10 @@
</properties>
<build>
- <sourceDirectory>src</sourceDirectory>
+ <sourceDirectory>src/main/royale</sourceDirectory>
<resources>
<resource>
- <directory>src/resources</directory>
+ <directory>src/main/resources</directory>
<filtering>true</filtering>
</resource>
</resources>
diff --git a/examples/royale/MDLDynamicTableExample/src/resources/mdl-js-index-template.html b/examples/royale/MDLDynamicTableExample/src/main/resources/mdl-js-index-template.html
similarity index 100%
rename from examples/royale/MDLDynamicTableExample/src/resources/mdl-js-index-template.html
rename to examples/royale/MDLDynamicTableExample/src/main/resources/mdl-js-index-template.html
diff --git a/examples/royale/MDLDynamicTableExample/src/resources/mdl-styles.css b/examples/royale/MDLDynamicTableExample/src/main/resources/mdl-styles.css
similarity index 100%
rename from examples/royale/MDLDynamicTableExample/src/resources/mdl-styles.css
rename to examples/royale/MDLDynamicTableExample/src/main/resources/mdl-styles.css
diff --git a/examples/royale/MDLDynamicTableExample/src/MDLDynamicTableExample.mxml b/examples/royale/MDLDynamicTableExample/src/main/royale/MDLDynamicTableExample.mxml
similarity index 94%
rename from examples/royale/MDLDynamicTableExample/src/MDLDynamicTableExample.mxml
rename to examples/royale/MDLDynamicTableExample/src/main/royale/MDLDynamicTableExample.mxml
index 12c133b..95a0385 100644
--- a/examples/royale/MDLDynamicTableExample/src/MDLDynamicTableExample.mxml
+++ b/examples/royale/MDLDynamicTableExample/src/main/royale/MDLDynamicTableExample.mxml
@@ -21,7 +21,7 @@
xmlns:js="library://ns.apache.org/royale/basic"
xmlns:local="*">
- <fx:Style source="resources/mdl-styles.css"/>
+ <fx:Style source="../../main/resources/mdl-styles.css"/>
<js:valuesImpl>
<js:SimpleCSSValuesImpl />
diff --git a/examples/royale/MDLDynamicTableExample/src/MainView.mxml b/examples/royale/MDLDynamicTableExample/src/main/royale/MainView.mxml
similarity index 100%
rename from examples/royale/MDLDynamicTableExample/src/MainView.mxml
rename to examples/royale/MDLDynamicTableExample/src/main/royale/MainView.mxml
diff --git a/examples/royale/MDLDynamicTableExample/src/itemRenderers/CustomTableRowItemRenderer.mxml b/examples/royale/MDLDynamicTableExample/src/main/royale/itemRenderers/CustomTableRowItemRenderer.mxml
similarity index 100%
rename from examples/royale/MDLDynamicTableExample/src/itemRenderers/CustomTableRowItemRenderer.mxml
rename to examples/royale/MDLDynamicTableExample/src/main/royale/itemRenderers/CustomTableRowItemRenderer.mxml
diff --git a/examples/royale/MDLDynamicTableExample/src/models/UserListModel.as b/examples/royale/MDLDynamicTableExample/src/main/royale/models/UserListModel.as
similarity index 100%
rename from examples/royale/MDLDynamicTableExample/src/models/UserListModel.as
rename to examples/royale/MDLDynamicTableExample/src/main/royale/models/UserListModel.as
diff --git a/examples/royale/MDLDynamicTableExample/src/vo/UserVO.as b/examples/royale/MDLDynamicTableExample/src/main/royale/vo/UserVO.as
similarity index 100%
rename from examples/royale/MDLDynamicTableExample/src/vo/UserVO.as
rename to examples/royale/MDLDynamicTableExample/src/main/royale/vo/UserVO.as
diff --git a/examples/royale/ModuleExample/pom.xml b/examples/royale/ModuleExample/pom.xml
index e3ffb5e..75ec105 100644
--- a/examples/royale/ModuleExample/pom.xml
+++ b/examples/royale/ModuleExample/pom.xml
@@ -71,6 +71,27 @@
-->
<dependencies>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>BasicTheme</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <scope>theme</scope>
+ </dependency>
</dependencies>
</project>
diff --git a/examples/royale/RemoteObjectAMFTest/pom.xml b/examples/royale/RemoteObjectAMFTest/pom.xml
index ead44fa..c08c781 100644
--- a/examples/royale/RemoteObjectAMFTest/pom.xml
+++ b/examples/royale/RemoteObjectAMFTest/pom.xml
@@ -54,7 +54,8 @@
<configuration>
<mainClass>App.mxml</mainClass>
<targets>SWF,JSRoyale</targets>
- <debug>false</debug>
+ <!-- <debug>false</debug> -->
+ <htmlTemplate>${basedir}/target/javascript/bin/js-debug/jewel-example-index-template.html</htmlTemplate>
</configuration>
</plugin>
<plugin>
@@ -106,11 +107,33 @@
<classifier>js</classifier>
</dependency>
<dependency>
- <groupId>org.apache.royale.framework</groupId>
- <artifactId>BasicTheme</artifactId>
- <version>0.9.3-SNAPSHOT</version>
- <type>swc</type>
- <scope>theme</scope>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel-Light-NoFlat-Primary-Blue-Theme</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <scope>theme</scope>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel-Light-NoFlat-Emphasized-Emerald-Theme</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <scope>theme</scope>
</dependency>
</dependencies>
diff --git a/examples/royale/RemoteObjectAMFTest/src/main/resources/jewel-example-index-template.html b/examples/royale/RemoteObjectAMFTest/src/main/resources/jewel-example-index-template.html
new file mode 100644
index 0000000..d98e4cf
--- /dev/null
+++ b/examples/royale/RemoteObjectAMFTest/src/main/resources/jewel-example-index-template.html
@@ -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.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta name="Custom Template for injecting custom style CSS">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+ <link rel="stylesheet" type="text/css" href="${application}.css">
+ <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
+${head}
+</head>
+<body>
+${body}
+</body>
+</html>
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/examples/royale/RemoteObjectAMFTest/src/main/resources/styles.css
similarity index 91%
rename from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
rename to examples/royale/RemoteObjectAMFTest/src/main/resources/styles.css
index 75d1f7d..02b57dc 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/examples/royale/RemoteObjectAMFTest/src/main/resources/styles.css
@@ -26,4 +26,10 @@
padding: 10px;
margin: 10px;
}
+
+/* .container {
+ background: #efefef;
+ border-radius: 10px;
+ padding: 20px;
+} */
\ No newline at end of file
diff --git a/examples/royale/RemoteObjectAMFTest/src/main/royale/App.mxml b/examples/royale/RemoteObjectAMFTest/src/main/royale/App.mxml
index aa1ca37..a29b94e 100644
--- a/examples/royale/RemoteObjectAMFTest/src/main/royale/App.mxml
+++ b/examples/royale/RemoteObjectAMFTest/src/main/royale/App.mxml
@@ -17,9 +17,17 @@
limitations under the License.
-->
-<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:js="library://ns.apache.org/royale/basic"
- xmlns:local="*">
+<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:js="library://ns.apache.org/royale/basic"
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:html="library://ns.apache.org/royale/html"
+ xmlns:local="*">
+
+ <fx:Style source="../../main/resources/styles.css"/>
+
+ <j:valuesImpl>
+ <js:SimpleCSSValuesImpl />
+ </j:valuesImpl>
<fx:Script>
<![CDATA[
@@ -27,31 +35,75 @@
import org.apache.royale.net.events.ResultEvent;
import valueObjects.ClientValueObject;
import valueObjects.Product;
-
- protected function sendName():void
+ import valueObjects.Zone;
+ import org.apache.royale.collections.ArrayList;
+ import org.apache.royale.net.remoting.messages.RoyaleClient;
+
+ protected function sendName():void
{
service.send("echo", [name_txt.text]);
}
+
+ protected function sendNameSimple():void
+ {
+ simpleService.send("echo", [nameSimple_txt.text]);
+ }
private function onResult(evt:ResultEvent):void
{
- trace("Result=" + evt.data);
+ trace("[Client:" + RoyaleClient.getInstance().id + "] Result= " + evt.data);
+
+ var zone:Zone;
+
if (evt.data is String)
received.text = "Received: " + evt.data;
+ else if (evt.data is Zone)
+ {
+ zone = evt.data as Zone;
+ received3.text = "Received: zone " + zone.id + " is '" + zone.name + "'";
+ }
else if (evt.data is Product)
{
var product:Product = evt.data as Product;
- received.text = "Received: product name is '" + product.name + "' and product description is '" + product.description + "'" ;
+ received3.text = "Received: product name is '" + product.name + "', product description is '" + product.description + "'. product taxonomy type is '" + product.taxonomy.type + "' and product taxonomy description is '" + product.taxonomy.description + "' zones: " ;
+
+ var len:int = product.zones.length;
+ var index:int;
+ for(index = 0; index < len; index++)
+ {
+ zone = product.zones[index];
+ received3.text += "[" + zone.id + ", " + zone.name + "], ";
+ }
+
+ received3.text += " flavors: ";
+
+ len = product.flavors.length;
+ for(index = 0; index < len; index++)
+ {
+ received3.text += "[" + product.flavors[index] + "], ";
+ }
} else
{
- var arr:Array = evt.data as Array;
+ var arr:ArrayList = new ArrayList(evt.data as Array);
list.dataProvider = arr;
}
}
+ private function onResultSimple(evt:ResultEvent):void
+ {
+ if (evt.data is String)
+ receivedSimple.text = "Received Simple: " + evt.data;
+ }
+
private function onFault(evt:FaultEvent):void
{
- trace("Fault=" + evt.message);
+ trace("[Client:" + RoyaleClient.getInstance().id + "] Fault= " + evt.message);
+ for(var key:String in evt["message"])
+ {
+ var element:Object = evt["message"][key];
+ trace(key + ", " + element);
+ }
+ //trace("Fault = " + evt.message);
}
protected function getVOs():void
@@ -59,6 +111,11 @@
service.send("getObjectArray1", []);
}
+ protected function getSomeZone():void
+ {
+ service.send("getSomeZone", []);
+ }
+
protected function getSomeProduct():void
{
service.send("getSomeProduct", []);
@@ -67,36 +124,85 @@
protected function reportChange():void
{
var vo:ClientValueObject = list.selectedItem as ClientValueObject;
- received.text = "selected " + vo.id;
+ received2.text = "Selected: " + vo.id;
}
+ protected function getSomeCompressedProduct():void
+ {
+ compressedService.send("getSomeCompressedProduct", []);
+ }
]]>
</fx:Script>
- <js:beads>
+ <j:beads>
<js:ClassAliasBead />
+ <!-- use this with BlazeDS, LCDS, CF -->
<js:RemoteObject id="service" result="onResult(event)" fault="onFault(event)"
endPoint = "http://localhost:8080/messagebroker/websocket-amf"
- destination = "exampleService"
- source = "exampleService"/>
- </js:beads>
+ destination = "exampleService"/>
+ <js:CompressedRemoteObject id="compressedService" result="onResult(event)" fault="onFault(event)"
+ endPoint = "http://localhost:8080/messagebroker/websocket-amf"
+ destination = "compressedService"/>
+ <!-- use this wih AMFPHP or oother basic implementations -->
+ <js:SimpleRemoteObject id="simpleService" result="onResultSimple(event)" fault="onFault(event)"
+ endPoint = "http://localhost:8080/messagebroker/websocket-amf"
+ destination = "exampleService"/>
+ </j:beads>
- <js:initialView>
- <js:View>
+ <j:initialView>
+ <j:View>
<js:beads>
- <js:VerticalLayout />
+ <j:VerticalLayout gap="10"/>
</js:beads>
- <js:Label text="Text to be sent via AMF RemoteObject..." />
- <js:TextInput id="name_txt" />
- <js:TextButton text="Send Name to AMF" click="sendName()"/>
- <js:Label id="received" width="300"/>
- <js:TextButton text="Get Array of ValueObjects" click="getVOs()"/>
- <js:List id="list" labelField="id" width="100" height="100" change="reportChange()"/>
- <js:TextButton text="Get Some Product" click="getSomeProduct()"/>
- </js:View>
- </js:initialView>
- <js:valuesImpl>
- <js:SimpleCSSValuesImpl />
- </js:valuesImpl>
-</js:Application>
+ <html:H3 text="RemoteObject AMF Test"/>
+
+ <j:Card width="400">
+ <j:Group>
+ <j:beads>
+ <j:HorizontalLayout gap="10"/>
+ </j:beads>
+ <j:TextInput id="name_txt">
+ <j:beads>
+ <j:TextPrompt prompt="Name to send via AMF"/>
+ </j:beads>
+ </j:TextInput>
+ <j:Button text="Send to Name" emphasis="primary" click="sendName()"/>
+ </j:Group>
+
+ <j:Label id="received" text="Received:"/>
+ </j:Card>
+
+ <j:Card width="400">
+ <j:Group>
+ <j:beads>
+ <j:HorizontalLayout gap="10"/>
+ </j:beads>
+ <j:TextInput id="nameSimple_txt">
+ <j:beads>
+ <j:TextPrompt prompt="Name via Simple RO"/>
+ </j:beads>
+ </j:TextInput>
+ <j:Button text="Send SimpleRO" click="sendNameSimple()"/>
+ </j:Group>
+
+ <j:Label id="receivedSimple" text="Received Simple:"/>
+ </j:Card>
+
+ <j:Card width="400">
+ <j:Button text="Get Array of ValueObjects" emphasis="emphasized" click="getVOs()" width="100%"/>
+ <j:List id="list" labelField="id" width="100%" height="200"
+ change="reportChange()"/>
+ <j:Label id="received2" text="Selected:"/>
+ </j:Card>
+
+ <j:Card width="400">
+ <j:Button text="Get Some Product" emphasis="primary" click="getSomeProduct()"/>
+ <j:Button text="Get Some Compressed Product" emphasis="emphasized" click="getSomeCompressedProduct()"/>
+ <j:Label id="received3" text="Received:" multiline="true"/>
+ </j:Card>
+
+ </j:View>
+ </j:initialView>
+
+</j:Application>
diff --git a/examples/royale/RemoteObjectAMFTest/src/main/royale/valueObjects/Product.as b/examples/royale/RemoteObjectAMFTest/src/main/royale/valueObjects/Product.as
index b00f7eb..ce296c2 100644
--- a/examples/royale/RemoteObjectAMFTest/src/main/royale/valueObjects/Product.as
+++ b/examples/royale/RemoteObjectAMFTest/src/main/royale/valueObjects/Product.as
@@ -49,5 +49,42 @@
_description = value;
}
+ private var _taxonomy:Taxonomy;
+
+ public function get taxonomy():Taxonomy
+ {
+ return _taxonomy;
+ }
+
+ public function set taxonomy(value:Taxonomy):void
+ {
+ _taxonomy = value;
+ }
+
+ // collection of zones (Zone), we can use Array and ArrayList
+ private var _zones:Array;
+
+ public function get zones():Array
+ {
+ return _zones;
+ }
+
+ public function set zones(value:Array):void
+ {
+ _zones = value;
+ }
+
+ private var _flavors:Array = null;
+
+ public function get flavors():Array
+ {
+ return _flavors;
+ }
+
+ public function set flavors(value:Array):void
+ {
+ _flavors = value;
+ }
+
}
}
diff --git a/examples/royale/RemoteObjectAMFTest/src/main/royale/valueObjects/Taxonomy.as b/examples/royale/RemoteObjectAMFTest/src/main/royale/valueObjects/Taxonomy.as
new file mode 100644
index 0000000..0c26bc5
--- /dev/null
+++ b/examples/royale/RemoteObjectAMFTest/src/main/royale/valueObjects/Taxonomy.as
@@ -0,0 +1,52 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 valueObjects
+{
+ [RemoteClass(alias="org.apache.royale.amfsamples.valueobjects.Taxonomy")]
+ public class Taxonomy
+ {
+ public function Taxonomy()
+ {
+ }
+
+ private var _type:String;
+
+ public function get type():String
+ {
+ return _type;
+ }
+
+ public function set type(value:String):void
+ {
+ _type = value;
+ }
+
+ private var _description:String;
+
+ public function get description():String
+ {
+ return _description;
+ }
+
+ public function set description(value:String):void
+ {
+ _description = value;
+ }
+ }
+}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as b/examples/royale/RemoteObjectAMFTest/src/main/royale/valueObjects/Zone.as
similarity index 62%
copy from frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
copy to examples/royale/RemoteObjectAMFTest/src/main/royale/valueObjects/Zone.as
index 7935bcf..fb4f6a9 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
+++ b/examples/royale/RemoteObjectAMFTest/src/main/royale/valueObjects/Zone.as
@@ -16,20 +16,37 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.html.beads
+package valueObjects
{
- import org.apache.royale.core.IBead;
-
- /**
- * The IBackgroundBead interface is a marker interface for beads
- * that draw backgrounds.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public interface IBorderBead extends IBead
+ [RemoteClass(alias="org.apache.royale.amfsamples.valueobjects.Zone")]
+ public class Zone
{
+ public function Zone()
+ {
+ }
+
+ private var _id:int;
+
+ public function get id():int
+ {
+ return _id;
+ }
+
+ public function set id(value:int):void
+ {
+ _id = value;
+ }
+
+ private var _name:String;
+
+ public function get name():String
+ {
+ return _name;
+ }
+
+ public function set name(value:String):void
+ {
+ _name = value;
+ }
}
}
diff --git a/examples/royale/RoyaleStore/src/main/royale/ProductsView.mxml b/examples/royale/RoyaleStore/src/main/royale/ProductsView.mxml
index f0bb264..8301973 100755
--- a/examples/royale/RoyaleStore/src/main/royale/ProductsView.mxml
+++ b/examples/royale/RoyaleStore/src/main/royale/ProductsView.mxml
@@ -80,7 +80,7 @@
<productsView:Grip id="filterGrip" gripIcon="assets/icon_magnifier.png"
gripTip="Show filter panel" click="currentState = 'showFilter'"/>
- <productsView:ProductFilterPanel x="{filterGrip.width}" y="0" id="filterPanel" width="265" height="100%"
+ <productsView:ProductFilterPanel y="0" id="filterPanel" width="265" height="100%"
filter="catalogPanel.filter(event.filter, event.live)"
compare="catalogPanel.compare(filterPanel.productList.getProducts())"
initComplete="if (catalog) filterPanel.filter.count = catalog.length"/>
diff --git a/examples/royale/StyleExample/pom.xml b/examples/royale/StyleExample/pom.xml
index 3e88169..621699c 100644
--- a/examples/royale/StyleExample/pom.xml
+++ b/examples/royale/StyleExample/pom.xml
@@ -71,6 +71,20 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
<artifactId>BasicTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
diff --git a/examples/royale/TableExample/pom.xml b/examples/royale/TableExample/pom.xml
index 8724e47..c5eac3b 100644
--- a/examples/royale/TableExample/pom.xml
+++ b/examples/royale/TableExample/pom.xml
@@ -59,6 +59,20 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
<artifactId>BasicTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
diff --git a/examples/royale/TeamPage/pom.xml b/examples/royale/TeamPage/pom.xml
index 651e44c..e28bf34 100644
--- a/examples/royale/TeamPage/pom.xml
+++ b/examples/royale/TeamPage/pom.xml
@@ -65,6 +65,20 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
<artifactId>BasicTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
diff --git a/examples/royale/TodoListSampleApp/pom.xml b/examples/royale/TodoListSampleApp/pom.xml
index d291370..89228a7 100644
--- a/examples/royale/TodoListSampleApp/pom.xml
+++ b/examples/royale/TodoListSampleApp/pom.xml
@@ -61,6 +61,20 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
<artifactId>BasicTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
diff --git a/examples/royale/TreeExample/pom.xml b/examples/royale/TreeExample/pom.xml
index c09e2a7..a2508fe 100644
--- a/examples/royale/TreeExample/pom.xml
+++ b/examples/royale/TreeExample/pom.xml
@@ -55,6 +55,20 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
<artifactId>BasicTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
diff --git a/examples/royale/TreeExample/src/main/royale/MyInitialView.mxml b/examples/royale/TreeExample/src/main/royale/MyInitialView.mxml
index 8b70a52..0dfcef0 100644
--- a/examples/royale/TreeExample/src/main/royale/MyInitialView.mxml
+++ b/examples/royale/TreeExample/src/main/royale/MyInitialView.mxml
@@ -56,7 +56,7 @@
</js:beads>
</js:Tree>
- <js:TreeGrid x="450" y="30" width="500" height="500" rowHeight="40">
+ <js:TreeGrid id="treeGrid" x="450" y="30" width="500" height="500" rowHeight="40">
<js:beads>
<js:ConstantBinding
sourceID="applicationModel"
diff --git a/examples/royale/pom.xml b/examples/royale/pom.xml
index ff4110f..8b601fe 100644
--- a/examples/royale/pom.xml
+++ b/examples/royale/pom.xml
@@ -53,6 +53,7 @@
<module>HelloWorld</module>
<module>HTMLElements</module>
<module>JSON2ASVO</module>
+ <module>JewelExample</module>
<module>ListExample</module>
<module>MapSearch</module>
<module>MDLDynamicTabsExample</module>
diff --git a/frameworks/build.xml b/frameworks/build.xml
index 1511c88..db45fcc 100644
--- a/frameworks/build.xml
+++ b/frameworks/build.xml
@@ -142,6 +142,7 @@
<antcall target="SparkRoyale"/>
<antcall target="Jewel"/>
<antcall target="JewelTheme"/>
+ <antcall target="Icons"/>
</target>
<target name="fonts">
@@ -199,6 +200,7 @@
<ant dir="${basedir}/projects/MXRoyale" target="clean"/>
<ant dir="${basedir}/projects/SparkRoyale" target="clean"/>
<ant dir="${basedir}/projects/Jewel" target="clean"/>
+ <ant dir="${basedir}/projects/Icons" target="clean"/>
<ant dir="${basedir}/themes/JewelTheme" target="clean"/>
<ant dir="${basedir}/fontsrc" target="clean"/>
@@ -351,7 +353,9 @@
<target name="JewelTheme" description="Clean build of JewelTheme.swc">
<ant dir="${basedir}/themes/JewelTheme"/>
</target>
-
+ <target name="Icons" description="Clean build of Icons.swc">
+ <ant dir="${basedir}/projects/Icons"/>
+ </target>
<target name="create-config" depends="playerglobal-setswfversion" description="Copy the config template and inject version numbers">
<copy file="${basedir}/${configname}-config-template.xml" tofile="${basedir}/${configname}-config.xml" overwrite="true">
<filterset>
diff --git a/frameworks/js/build.xml b/frameworks/js/build.xml
index e54149d..adb74d9 100644
--- a/frameworks/js/build.xml
+++ b/frameworks/js/build.xml
@@ -1,253 +1,262 @@
-<?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.
-
--->
-
-<!-- Note:
- If you modify this file you may have to make the same change in build_framework.xml.
- build_framework.xml is renamed to build.xml when it is packaged.
- It is used to build the frameworks directory from the zip file.
--->
-<project name="frameworksJS" default="main" basedir=".">
-
- <property name="ROYALE_HOME" location="../../.."/>
-
- <!-- Required for OSX 10.6 / Snow Leopard Performance. -->
- <!-- Java 7 on Mac requires OSX 10.7.3 or higher and is 64-bit only -->
- <!-- local.d32 is set/used in build.properties so this needs to be done first. -->
- <condition property="local.d32" value="-d32">
- <and>
- <os family="mac"/>
- <matches pattern="1.6.*" string="${java.version}"/>
- <equals arg1="${sun.arch.data.model}" arg2="64"/>
- <equals arg1="${os.arch}" arg2="x86_64"/>
- </and>
- </condition>
-
- <!-- Property for the platform. -->
- <condition property="isMac">
- <os family="mac"/>
- </condition>
- <condition property="isWindows">
- <os family="windows" />
- </condition>
- <condition property="isLinux">
- <and>
- <os family="unix"/>
- <not>
- <os family="mac"/>
- </not>
- </and>
- </condition>
-
- <property file="${ROYALE_HOME}/env.properties"/>
- <property environment="env"/>
- <property file="${ROYALE_HOME}/build.properties"/>
- <property name="ROYALE_HOME" value="${ROYALE_HOME}" />
-
- <target name="main" depends="check-compile-env,clean,prepare,compile"
- description="Clean build of all SWCs"/>
-
- <target name="check-compile-env" description="Check for the required environment variables">
- <ant antfile="${ROYALE_HOME}/build.xml" target="check-compile-env" dir="${ROYALE_HOME}"/>
- </target>
-
-
- <target name="prepare" depends="thirdparty-downloads"/>
-
- <target name="thirdparty-downloads" unless="no.thirdparty-downloads" description="Downloads all the required thirdparty code.">
- </target>
-
- <target name="compile" description="Builds all SWCs but not their resource bundles">
- <!-- order may matter due to dependencies -->
- <antcall target="Language"/>
- <antcall target="Core"/>
- <antcall target="Graphics"/>
- <antcall target="Binding"/>
- <antcall target="Collections"/>
- <antcall target="Basic"/>
- <antcall target="HTML"/>
- <antcall target="Flat"/>
- <antcall target="Charts"/>
- <antcall target="CreateJS"/>
- <antcall target="DragDrop"/>
- <antcall target="Effects"/>
- <antcall target="Formatters"/>
- <antcall target="GoogleMaps"/>
- <antcall target="HTML5"/>
- <antcall target="JQuery"/>
- <antcall target="Mobile"/>
- <antcall target="Network"/>
- <antcall target="Reflection"/>
- <antcall target="Storage"/>
- <antcall target="XML"/>
- <antcall target="Testing"/>
- <antcall target="Text"/>
- <antcall target="TLF"/>
- <antcall target="MaterialDesignLite"/>
- </target>
-
- <target name="other.locales" description ="Builds resource SWCs for all locales">
- <!--<ant dir="${basedir}/projects/RoyaleUI" target="other.locales"/>-->
- </target>
-
- <target name="doc" >
- <ant dir="${basedir}/projects/Core" target="doc" />
- </target>
-
- <!--
- Cleanup
- -->
-
- <target name="super-clean" depends="thirdparty-clean,clean" description="Cleans everything including thirdparty downloads."/>
-
- <target name="thirdparty-clean" unless="no.thirdparty-clean" description="Removes all thirdparty downloads.">
- <ant antfile="${basedir}/downloads.xml" target="clean" dir="${basedir}"/>
- </target>
-
- <target name="clean" description="Cleans all SWCs and their resource bundles">
- <!-- Delete output from SWC projects -->
- <ant dir="${basedir}/projects/BindingJS" target="clean"/>
- <ant dir="${basedir}/projects/ChartsJS" target="clean"/>
- <ant dir="${basedir}/projects/CollectionsJS" target="clean"/>
- <ant dir="${basedir}/projects/CoreJS" target="clean"/>
- <ant dir="${basedir}/projects/CreateJSJS" target="clean"/>
- <ant dir="${basedir}/projects/DragDropJS" target="clean"/>
- <ant dir="${basedir}/projects/EffectsJS" target="clean"/>
- <ant dir="${basedir}/projects/ExpressJS" target="clean"/>
- <ant dir="${basedir}/projects/FlatJS" target="clean"/>
- <ant dir="${basedir}/projects/FormattersJS" target="clean"/>
- <ant dir="${basedir}/projects/FontAwesomeJS" target="clean"/>
- <ant dir="${basedir}/projects/GoogleMapsJS" target="clean"/>
- <ant dir="${basedir}/projects/GraphicsJS" target="clean"/>
- <ant dir="${basedir}/projects/BasicJS" target="clean"/>
- <ant dir="${basedir}/projects/HTMLJS" target="clean"/>
- <ant dir="${basedir}/projects/HTML5JS" target="clean"/>
- <ant dir="${basedir}/projects/JQueryJS" target="clean"/>
- <ant dir="${basedir}/projects/LanguageJS" target="clean"/>
- <ant dir="${basedir}/projects/MaterialDesignLiteJS" target="clean"/>
- <ant dir="${basedir}/projects/MobileJS" target="clean"/>
- <ant dir="${basedir}/projects/NetworkJS" target="clean"/>
- <ant dir="${basedir}/projects/ReflectionJS" target="clean"/>
- <ant dir="${basedir}/projects/StorageJS" target="clean"/>
- <ant dir="${basedir}/projects/TestingJS" target="clean"/>
- <ant dir="${basedir}/projects/TextJS" target="clean"/>
- <ant dir="${basedir}/projects/TLFJS" target="clean"/>
- <ant dir="${basedir}/projects/XMLJS" target="clean"/>
-
- <delete dir="${basedir}/libs"/>
- <delete dir="${basedir}/generated-sources"/>
- </target>
-
- <target name="Binding" description="Clean build of BindingJS.swc">
- <ant dir="${basedir}/projects/BindingJS"/>
- </target>
-
- <target name="Charts" description="Clean build of ChartsJS.swc">
- <ant dir="${basedir}/projects/ChartsJS"/>
- </target>
-
- <target name="Core" description="Clean build of CoreJS.swc">
- <ant dir="${basedir}/projects/CoreJS"/>
- </target>
-
- <target name="Collections" description="Clean build of CollectionsJS.swc">
- <ant dir="${basedir}/projects/CollectionsJS"/>
- </target>
-
- <target name="CreateJS" description="Clean build of CreateJS.swc">
- <ant dir="${basedir}/projects/CreateJSJS"/>
- </target>
-
- <target name="DragDrop" description="Clean build of DragDrop.swc">
- <ant dir="${basedir}/projects/DragDropJS"/>
- </target>
-
- <target name="Effects" description="Clean build of EffectsJS.swc">
- <ant dir="${basedir}/projects/EffectsJS"/>
- </target>
-
- <target name="Flat" description="Clean build of FlatJS.swc">
- <ant dir="${basedir}/projects/FlatJS"/>
- </target>
-
- <target name="Formatters" description="Clean build of FormattersJS.swc">
- <ant dir="${basedir}/projects/FormattersJS"/>
- </target>
-
- <target name="GoogleMaps" description="Clean build of GoogleMapsJS.swc">
- <ant dir="${basedir}/projects/GoogleMapsJS"/>
- </target>
-
- <target name="Graphics" description="Clean build of GraphicsJS.swc">
- <ant dir="${basedir}/projects/GraphicsJS"/>
- </target>
-
- <target name="Basic" description="Clean build of BasicJS.swc">
- <ant dir="${basedir}/projects/BasicJS"/>
- </target>
-
- <target name="HTML" description="Clean build of HTMLJS.swc">
- <ant dir="${basedir}/projects/HTMLJS"/>
- </target>
-
- <target name="HTML5" description="Clean build of HTML5JS.swc">
- <ant dir="${basedir}/projects/HTML5JS"/>
- </target>
-
- <target name="JQuery" description="Clean build of JQueryJS.swc">
- <ant dir="${basedir}/projects/JQueryJS"/>
- </target>
-
- <target name="Language" description="Clean build of LanguageJS.swc">
- <ant dir="${basedir}/projects/LanguageJS"/>
- </target>
-
- <target name="MaterialDesignLite" description="Clean build of MaterialDesignLiteJS.swc">
- <ant dir="${basedir}/projects/MaterialDesignLiteJS"/>
- </target>
-
- <target name="Mobile" description="Clean build of MobileJS.swc">
- <ant dir="${basedir}/projects/MobileJS"/>
- </target>
-
- <target name="Network" description="Clean build of NetworkJS.swc">
- <ant dir="${basedir}/projects/NetworkJS"/>
- </target>
-
- <target name="Reflection" description="Clean build of ReflectionJS.swc">
- <ant dir="${basedir}/projects/ReflectionJS"/>
- </target>
-
- <target name="Storage" description="Clean build of StorageJS.swc">
- <ant dir="${basedir}/projects/StorageJS"/>
- </target>
- <target name="XML" description="Clean build of XMLJS.swc">
- <ant dir="${basedir}/projects/XMLJS"/>
- </target>
- <target name="Testing" description="Clean build of TestingJS.swc">
- <ant dir="${basedir}/projects/TestingJS"/>
- </target>
- <target name="Text" description="Clean build of TextJS.swc">
- <ant dir="${basedir}/projects/TextJS"/>
- </target>
- <target name="TLF" description="Clean build of TLFJS.swc">
- <ant dir="${basedir}/projects/TLFJS"/>
- </target>
-
-</project>
+<?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.
+
+-->
+
+<!-- Note:
+ If you modify this file you may have to make the same change in build_framework.xml.
+ build_framework.xml is renamed to build.xml when it is packaged.
+ It is used to build the frameworks directory from the zip file.
+-->
+<project name="frameworksJS" default="main" basedir=".">
+
+ <property name="ROYALE_HOME" location="../../.."/>
+
+ <!-- Required for OSX 10.6 / Snow Leopard Performance. -->
+ <!-- Java 7 on Mac requires OSX 10.7.3 or higher and is 64-bit only -->
+ <!-- local.d32 is set/used in build.properties so this needs to be done first. -->
+ <condition property="local.d32" value="-d32">
+ <and>
+ <os family="mac"/>
+ <matches pattern="1.6.*" string="${java.version}"/>
+ <equals arg1="${sun.arch.data.model}" arg2="64"/>
+ <equals arg1="${os.arch}" arg2="x86_64"/>
+ </and>
+ </condition>
+
+ <!-- Property for the platform. -->
+ <condition property="isMac">
+ <os family="mac"/>
+ </condition>
+ <condition property="isWindows">
+ <os family="windows" />
+ </condition>
+ <condition property="isLinux">
+ <and>
+ <os family="unix"/>
+ <not>
+ <os family="mac"/>
+ </not>
+ </and>
+ </condition>
+
+ <property file="${ROYALE_HOME}/env.properties"/>
+ <property environment="env"/>
+ <property file="${ROYALE_HOME}/build.properties"/>
+ <property name="ROYALE_HOME" value="${ROYALE_HOME}" />
+
+ <target name="main" depends="check-compile-env,clean,prepare,compile"
+ description="Clean build of all SWCs"/>
+
+ <target name="check-compile-env" description="Check for the required environment variables">
+ <ant antfile="${ROYALE_HOME}/build.xml" target="check-compile-env" dir="${ROYALE_HOME}"/>
+ </target>
+
+
+ <target name="prepare" depends="thirdparty-downloads"/>
+
+ <target name="thirdparty-downloads" unless="no.thirdparty-downloads" description="Downloads all the required thirdparty code.">
+ </target>
+
+ <target name="compile" description="Builds all SWCs but not their resource bundles">
+ <!-- order may matter due to dependencies -->
+ <antcall target="Language"/>
+ <antcall target="Core"/>
+ <antcall target="Graphics"/>
+ <antcall target="Binding"/>
+ <antcall target="Collections"/>
+ <antcall target="Basic"/>
+ <antcall target="HTML"/>
+ <antcall target="Flat"/>
+ <antcall target="Charts"/>
+ <antcall target="CreateJS"/>
+ <antcall target="DragDrop"/>
+ <antcall target="Effects"/>
+ <antcall target="Formatters"/>
+ <antcall target="GoogleMaps"/>
+ <antcall target="HTML5"/>
+ <antcall target="JQuery"/>
+ <antcall target="Mobile"/>
+ <antcall target="Network"/>
+ <antcall target="Reflection"/>
+ <antcall target="Storage"/>
+ <antcall target="XML"/>
+ <antcall target="Testing"/>
+ <antcall target="Text"/>
+ <antcall target="TLF"/>
+ <antcall target="MaterialDesignLite"/>
+ <antcall target="Icons" />
+ </target>
+
+ <target name="other.locales" description ="Builds resource SWCs for all locales">
+ <!--<ant dir="${basedir}/projects/RoyaleUI" target="other.locales"/>-->
+ </target>
+
+ <target name="doc" >
+ <ant dir="${basedir}/projects/Core" target="doc" />
+ </target>
+
+ <!--
+ Cleanup
+ -->
+
+ <target name="super-clean" depends="thirdparty-clean,clean" description="Cleans everything including thirdparty downloads."/>
+
+ <target name="thirdparty-clean" unless="no.thirdparty-clean" description="Removes all thirdparty downloads.">
+ <ant antfile="${basedir}/downloads.xml" target="clean" dir="${basedir}"/>
+ </target>
+
+ <target name="clean" description="Cleans all SWCs and their resource bundles">
+ <!-- Delete output from SWC projects -->
+ <ant dir="${basedir}/projects/BindingJS" target="clean"/>
+ <ant dir="${basedir}/projects/ChartsJS" target="clean"/>
+ <ant dir="${basedir}/projects/CollectionsJS" target="clean"/>
+ <ant dir="${basedir}/projects/CoreJS" target="clean"/>
+ <ant dir="${basedir}/projects/CreateJSJS" target="clean"/>
+ <ant dir="${basedir}/projects/DragDropJS" target="clean"/>
+ <ant dir="${basedir}/projects/EffectsJS" target="clean"/>
+ <ant dir="${basedir}/projects/ExpressJS" target="clean"/>
+ <ant dir="${basedir}/projects/FlatJS" target="clean"/>
+ <ant dir="${basedir}/projects/FormattersJS" target="clean"/>
+ <ant dir="${basedir}/projects/FontAwesomeJS" target="clean"/>
+ <ant dir="${basedir}/projects/GoogleMapsJS" target="clean"/>
+ <ant dir="${basedir}/projects/GraphicsJS" target="clean"/>
+ <ant dir="${basedir}/projects/BasicJS" target="clean"/>
+ <ant dir="${basedir}/projects/HTMLJS" target="clean"/>
+ <ant dir="${basedir}/projects/HTML5JS" target="clean"/>
+ <ant dir="${basedir}/projects/JQueryJS" target="clean"/>
+ <ant dir="${basedir}/projects/LanguageJS" target="clean"/>
+ <ant dir="${basedir}/projects/MaterialDesignLiteJS" target="clean"/>
+ <ant dir="${basedir}/projects/MobileJS" target="clean"/>
+ <ant dir="${basedir}/projects/NetworkJS" target="clean"/>
+ <ant dir="${basedir}/projects/ReflectionJS" target="clean"/>
+ <ant dir="${basedir}/projects/StorageJS" target="clean"/>
+ <ant dir="${basedir}/projects/TestingJS" target="clean"/>
+ <ant dir="${basedir}/projects/TextJS" target="clean"/>
+ <ant dir="${basedir}/projects/TLFJS" target="clean"/>
+ <ant dir="${basedir}/projects/XMLJS" target="clean"/>
+ <ant dir="${basedir}/projects/IconsJS" target="clean"/>
+
+ <delete dir="${basedir}/libs"/>
+ <delete dir="${basedir}/generated-sources"/>
+ </target>
+
+ <target name="Binding" description="Clean build of BindingJS.swc">
+ <ant dir="${basedir}/projects/BindingJS"/>
+ </target>
+
+ <target name="Charts" description="Clean build of ChartsJS.swc">
+ <ant dir="${basedir}/projects/ChartsJS"/>
+ </target>
+
+ <target name="Core" description="Clean build of CoreJS.swc">
+ <ant dir="${basedir}/projects/CoreJS"/>
+ </target>
+
+ <target name="Collections" description="Clean build of CollectionsJS.swc">
+ <ant dir="${basedir}/projects/CollectionsJS"/>
+ </target>
+
+ <target name="CreateJS" description="Clean build of CreateJS.swc">
+ <ant dir="${basedir}/projects/CreateJSJS"/>
+ </target>
+
+ <target name="DragDrop" description="Clean build of DragDrop.swc">
+ <ant dir="${basedir}/projects/DragDropJS"/>
+ </target>
+
+ <target name="Effects" description="Clean build of EffectsJS.swc">
+ <ant dir="${basedir}/projects/EffectsJS"/>
+ </target>
+
+ <target name="Flat" description="Clean build of FlatJS.swc">
+ <ant dir="${basedir}/projects/FlatJS"/>
+ </target>
+
+ <target name="Formatters" description="Clean build of FormattersJS.swc">
+ <ant dir="${basedir}/projects/FormattersJS"/>
+ </target>
+
+ <target name="GoogleMaps" description="Clean build of GoogleMapsJS.swc">
+ <ant dir="${basedir}/projects/GoogleMapsJS"/>
+ </target>
+
+ <target name="Graphics" description="Clean build of GraphicsJS.swc">
+ <ant dir="${basedir}/projects/GraphicsJS"/>
+ </target>
+
+ <target name="Basic" description="Clean build of BasicJS.swc">
+ <ant dir="${basedir}/projects/BasicJS"/>
+ </target>
+
+ <target name="HTML" description="Clean build of HTMLJS.swc">
+ <ant dir="${basedir}/projects/HTMLJS"/>
+ </target>
+
+ <target name="HTML5" description="Clean build of HTML5JS.swc">
+ <ant dir="${basedir}/projects/HTML5JS"/>
+ </target>
+
+ <target name="JQuery" description="Clean build of JQueryJS.swc">
+ <ant dir="${basedir}/projects/JQueryJS"/>
+ </target>
+
+ <target name="Language" description="Clean build of LanguageJS.swc">
+ <ant dir="${basedir}/projects/LanguageJS"/>
+ </target>
+
+ <target name="MaterialDesignLite" description="Clean build of MaterialDesignLiteJS.swc">
+ <ant dir="${basedir}/projects/MaterialDesignLiteJS"/>
+ </target>
+
+ <target name="Mobile" description="Clean build of MobileJS.swc">
+ <ant dir="${basedir}/projects/MobileJS"/>
+ </target>
+
+ <target name="Network" description="Clean build of NetworkJS.swc">
+ <ant dir="${basedir}/projects/NetworkJS"/>
+ </target>
+
+ <target name="Reflection" description="Clean build of ReflectionJS.swc">
+ <ant dir="${basedir}/projects/ReflectionJS"/>
+ </target>
+
+ <target name="Storage" description="Clean build of StorageJS.swc">
+ <ant dir="${basedir}/projects/StorageJS"/>
+ </target>
+
+ <target name="XML" description="Clean build of XMLJS.swc">
+ <ant dir="${basedir}/projects/XMLJS"/>
+ </target>
+
+ <target name="Testing" description="Clean build of TestingJS.swc">
+ <ant dir="${basedir}/projects/TestingJS"/>
+ </target>
+
+ <target name="Text" description="Clean build of TextJS.swc">
+ <ant dir="${basedir}/projects/TextJS"/>
+ </target>
+
+ <target name="TLF" description="Clean build of TLFJS.swc">
+ <ant dir="${basedir}/projects/TLFJS"/>
+ </target>
+
+ <target name="Icons" description="Clean build of IconsJS.swc">
+ <ant dir="${basedir}/projects/IconsJS"/>
+ </target>
+</project>
diff --git a/frameworks/js/projects/IconsJS/build.xml b/frameworks/js/projects/IconsJS/build.xml
new file mode 100644
index 0000000..fba5946
--- /dev/null
+++ b/frameworks/js/projects/IconsJS/build.xml
@@ -0,0 +1,124 @@
+<?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="IconsJS" 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" />
+ <echo file="${basedir}/${target.name}.properties">target.name.nojs=${ant.project.name}</echo>
+ <replaceregexp file="${basedir}/${target.name}.properties" match="(.*)JS$" replace="\1" flags="m" />
+ <property file="${basedir}/${target.name}.properties"/>
+ <delete file="${basedir}/${target.name}.properties"/>
+
+ <target name="main" depends="clean,check-compiler,compile" description="Full build of ${ant.project.name}.swc">
+ </target>
+
+ <target name="clean">
+ <delete failonerror="false">
+ <fileset dir="${ROYALE_HOME}/frameworks/js/libs">
+ <include name="${target.name}"/>
+ </fileset>
+ </delete>
+ <delete failonerror="false" includeemptydirs="true">
+ <fileset dir="${basedir}/target">
+ <include name="**/**"/>
+ </fileset>
+ </delete>
+ </target>
+
+ <target name="compile" depends="check-compiler">
+ <echo message="Cross-compiling ${target.name}"/>
+ <echo message="ROYALE_COMPILER_HOME: ${ROYALE_COMPILER_HOME}"/>
+ <mkdir dir="${basedir}/target/generated-sources/royale"/>
+ <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="-compiler.strict-xml=true" />
+ <arg value="-compiler.targets=SWF,JSRoyale" />
+ <arg value="-output=${basedir}/target/${target.name}" />
+ <arg value="-load-config=${ROYALE_HOME}/frameworks/js-config.xml" />
+ <arg value="-load-config+=${basedir}/src/main/config/compile-js-config.xml" />
+ </java>
+ <copy file="${basedir}/target/${target.name}" tofile="${ROYALE_HOME}/frameworks/js/libs/${target.name}" />
+ </target>
+
+ <target name="copy-js" >
+ <mkdir dir="${ROYALE_HOME}/frameworks/js/generated-sources"/>
+ <copy todir="${ROYALE_HOME}/frameworks/js/generated-sources">
+ <fileset dir="${basedir}/target/generated-sources/royale">
+ <include name="**/**" />
+ </fileset>
+ </copy>
+ </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" unless="ROYALE_SWF_COMPILER_HOME"
+ description="Check ROYALE_SWF_COMPILER_HOME is a directory.">
+
+ <echo message="ROYALE_SWF_COMPILER_HOME is ${env.ROYALE_SWF_COMPILER_HOME}"/>
+
+ <available file="${env.ROYALE_SWF_COMPILER_HOME}/lib/compiler-mxmlc.jar"
+ type="file"
+ property="ROYALE_SWF_COMPILER_HOME"
+ value="${env.ROYALE_SWF_COMPILER_HOME}"/>
+
+ <available file="${ROYALE_HOME}/../royale-compiler/compiler/lib/compiler-mxmlc.jar"
+ type="file"
+ property="ROYALE_SWF_COMPILER_HOME"
+ value="${ROYALE_HOME}/../royale-compiler/compiler"/>
+
+ <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 a Royale SDK folder"
+ unless="ROYALE_SWF_COMPILER_HOME"/>
+ </target>
+
+ <target name="check-transpiler-home" unless="ROYALE_COMPILER_HOME"
+ description="Check ROYALE_SWF_COMPILER_HOME is a directory.">
+
+ <echo message="ROYALE_COMPILER_HOME is ${env.ROYALE_COMPILER_HOME}"/>
+
+ <available file="${env.ROYALE_COMPILER_HOME}/lib/jsc.jar"
+ type="file"
+ property="ROYALE_COMPILER_HOME"
+ value="${env.ROYALE_COMPILER_HOME}"/>
+
+ <available file="${ROYALE_HOME}/../royale-compiler/compiler-jx/lib/jsc.jar"
+ type="file"
+ property="ROYALE_COMPILER_HOME"
+ value="${ROYALE_HOME}/../royale-compiler/compiler-jx"/>
+
+ <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/js/projects/IconsJS/src/main/config/compile-js-config.xml b/frameworks/js/projects/IconsJS/src/main/config/compile-js-config.xml
new file mode 100644
index 0000000..7d10f0b
--- /dev/null
+++ b/frameworks/js/projects/IconsJS/src/main/config/compile-js-config.xml
@@ -0,0 +1,96 @@
+<!--
+
+ 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>SWF</target>
+ <target>JSRoyale</target>
+ </targets>
+ <strict-xml>true</strict-xml>
+
+ <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>false</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/>
+
+ <!-- overwrite the default library-path setting -->
+ <library-path>
+ <path-element>../../../../../../../js/libs/GCL.swc</path-element>
+ <!-- asjscompc won't 'link' these classes in, but will list their requires
+ if these swcs are on the external-library-path then their requires
+ will not be listed -->
+ <path-element>../../../../../libs/CoreJS.swc</path-element>
+ <path-element>../../../../../libs/BasicJS.swc</path-element>
+ </library-path>
+
+ <namespaces>
+ <namespace>
+ <uri>library://ns.apache.org/royale/basic</uri>
+ <manifest>../../../../../../projects/Icons/src/main/resources/icons-manifest.xml</manifest>
+ </namespace>
+ </namespaces>
+
+ <source-path>
+ <path-element>../../../../../../projects/Icons/src/main/royale</path-element>
+ </source-path>
+
+ <warn-no-constructor>false</warn-no-constructor>
+ </compiler>
+
+ <include-file>
+ </include-file>
+
+ <include-sources>
+ </include-sources>
+
+ <include-classes>
+ <class>IconsClasses</class>
+ </include-classes>
+
+ <include-namespaces>
+ <uri>library://ns.apache.org/royale/basic</uri>
+ </include-namespaces>
+
+
+</royale-config>
diff --git a/frameworks/js/projects/TestingJS/build.xml b/frameworks/js/projects/TestingJS/build.xml
index 63b8a0d..4467a63 100644
--- a/frameworks/js/projects/TestingJS/build.xml
+++ b/frameworks/js/projects/TestingJS/build.xml
@@ -51,23 +51,22 @@
<target name="compile" depends="check-compiler">
<echo message="Cross-compiling ${target.name}"/>
- <echo message="FALCONJX_HOME: ${FALCONJX_HOME}"/>
+ <echo message="ROYALE_COMPILER_HOME: ${ROYALE_COMPILER_HOME}"/>
<mkdir dir="${basedir}/target/generated-sources/royale"/>
- <java jar="${FALCONJX_HOME}/lib/compc.jar" fork="true" >
+ <java jar="${ROYALE_COMPILER_HOME}/lib/compc.jar" fork="true" >
<jvmarg value="-Xmx384m" />
<jvmarg value="-Dsun.io.useCanonCaches=false" />
- <jvmarg value="-Dflexcompiler=${FALCONJX_HOME}/../compiler" />
<jvmarg value="-Droyalelib=${ROYALE_HOME}/frameworks" />
- <arg value="+royalelib=${FLEX_HOME}/frameworks" />
+ <arg value="+royalelib=${ROYALE_HOME}/frameworks" />
<arg value="-compiler.strict-xml=true" />
<arg value="-compiler.targets=SWF,JSRoyale" />
<arg value="-output=${basedir}/target/${target.name}" />
- <arg value="-load-config=${FLEX_HOME}/frameworks/js-config.xml" />
+ <arg value="-load-config=${ROYALE_HOME}/frameworks/js-config.xml" />
<arg value="-load-config+=${basedir}/src/main/config/compile-js-config.xml" />
</java>
<copy file="${basedir}/target/${target.name}" tofile="${ROYALE_HOME}/frameworks/js/libs/${target.name}" />
</target>
-
+
<target name="copy-js" >
<mkdir dir="${ROYALE_HOME}/frameworks/js/generated-sources"/>
<copy todir="${ROYALE_HOME}/frameworks/js/generated-sources">
@@ -77,49 +76,49 @@
</copy>
</target>
- <target name="check-compiler" depends="check-falcon-home, check-falconjx-home">
+ <target name="check-compiler" depends="check-compiler-home, check-transpiler-home">
<path id="lib.path">
- <fileset dir="${FALCONJX_HOME}/lib" includes="falcon-royaleTasks.jar"/>
+ <fileset dir="${ROYALE_COMPILER_HOME}/lib" includes="compiler-royaleTasks.jar"/>
</path>
<taskdef resource="flexTasks.tasks" classpathref="lib.path"/>
</target>
- <target name="check-falcon-home" unless="FALCON_HOME"
- description="Check FALCON_HOME is a directory.">
+ <target name="check-compiler-home" unless="ROYALE_SWF_COMPILER_HOME"
+ description="Check ROYALE_SWF_COMPILER_HOME is a directory.">
- <echo message="FALCON_HOME is ${env.FALCON_HOME}"/>
+ <echo message="ROYALE_SWF_COMPILER_HOME is ${env.ROYALE_SWF_COMPILER_HOME}"/>
- <available file="${env.FALCON_HOME}/lib/compiler-mxmlc.jar"
+ <available file="${env.ROYALE_SWF_COMPILER_HOME}/lib/compiler-mxmlc.jar"
type="file"
- property="FALCON_HOME"
- value="${env.FALCON_HOME}"/>
+ property="ROYALE_SWF_COMPILER_HOME"
+ value="${env.ROYALE_SWF_COMPILER_HOME}"/>
- <available file="${ROYALE_HOME}/../royale-falcon/compiler/lib/compiler-mxmlc.jar"
+ <available file="${ROYALE_HOME}/../royale-compiler/compiler/lib/compiler-mxmlc.jar"
type="file"
- property="FALCON_HOME"
- value="${ROYALE_HOME}/../royale-falcon/compiler"/>
+ property="ROYALE_SWF_COMPILER_HOME"
+ value="${ROYALE_HOME}/../royale-compiler/compiler"/>
- <fail message="FALCON_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 a Royale SDK folder"
- unless="FALCON_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 a Royale SDK folder"
+ unless="ROYALE_SWF_COMPILER_HOME"/>
</target>
- <target name="check-falconjx-home" unless="FALCONJX_HOME"
- description="Check FALCON_HOME is a directory.">
+ <target name="check-transpiler-home" unless="ROYALE_COMPILER_HOME"
+ description="Check ROYALE_SWF_COMPILER_HOME is a directory.">
- <echo message="FALCONJX_HOME is ${env.FALCONJX_HOME}"/>
+ <echo message="ROYALE_COMPILER_HOME is ${env.ROYALE_COMPILER_HOME}"/>
- <available file="${env.FALCONJX_HOME}/lib/jsc.jar"
+ <available file="${env.ROYALE_COMPILER_HOME}/lib/jsc.jar"
type="file"
- property="FALCONJX_HOME"
- value="${env.FALCONJX_HOME}"/>
+ property="ROYALE_COMPILER_HOME"
+ value="${env.ROYALE_COMPILER_HOME}"/>
- <available file="${ROYALE_HOME}/../royale-falcon/compiler-jx/lib/jsc.jar"
+ <available file="${ROYALE_HOME}/../royale-compiler/compiler-jx/lib/jsc.jar"
type="file"
- property="FALCONJX_HOME"
- value="${ROYALE_HOME}/../royale-falcon/compiler-jx"/>
+ property="ROYALE_COMPILER_HOME"
+ value="${ROYALE_HOME}/../royale-compiler/compiler-jx"/>
- <fail message="FALCONJX_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="FALCONJX_HOME"/>
+ <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/Basic/src/main/resources/basic-manifest.xml b/frameworks/projects/Basic/src/main/resources/basic-manifest.xml
index 97cc5f7..398e5a2 100644
--- a/frameworks/projects/Basic/src/main/resources/basic-manifest.xml
+++ b/frameworks/projects/Basic/src/main/resources/basic-manifest.xml
@@ -24,6 +24,8 @@
<component id="Application" class="org.apache.royale.core.Application"/>
<component id="AirApplication" class="org.apache.royale.core.AirApplication"/>
<component id="View" class="org.apache.royale.core.View"/>
+ <component id="Container" class="org.apache.royale.html.Container"/>
+ <component id="Border" class="org.apache.royale.html.supportClasses.Border"/>
<component id="Button" class="org.apache.royale.html.Button"/>
<component id="CloseButton" class="org.apache.royale.html.CloseButton"/>
<component id="ButtonBar" class="org.apache.royale.html.ButtonBar"/>
@@ -43,6 +45,7 @@
<component id="HTMLText" class="org.apache.royale.html.HTMLText"/>
<component id="DataContainer" class="org.apache.royale.html.DataContainer"/>
<component id="List" class="org.apache.royale.html.List"/>
+ <component id="DynamicList" class="org.apache.royale.html.DynamicList"/>
<component id="PopUpList" class="org.apache.royale.html.PopUpList"/>
<component id="SimpleList" class="org.apache.royale.html.SimpleList"/>
<component id="CheckBox" class="org.apache.royale.html.CheckBox"/>
@@ -60,18 +63,23 @@
<component id="VContainer" class="org.apache.royale.html.VContainer"/>
<component id="Panel" class="org.apache.royale.html.Panel"/>
<component id="PanelView" class="org.apache.royale.html.beads.PanelView"/>
+ <component id="PanelTitleBar" class="org.apache.royale.html.PanelTitleBar"/>
+ <component id="PanelContent" class="org.apache.royale.html.supportClasses.PanelContent"/>
<component id="ImageView" class="org.apache.royale.html.beads.ImageView"/>
<component id="PanelWithControlBar" class="org.apache.royale.html.PanelWithControlBar"/>
<component id="PanelWithControlBarView" class="org.apache.royale.html.beads.PanelWithControlBarView"/>
<component id="ControlBar" class="org.apache.royale.html.ControlBar"/>
<component id="RangeStepper" class="org.apache.royale.html.RangeStepper" />
<component id="TitleBar" class="org.apache.royale.html.TitleBar"/>
+ <component id="TitleBarTitle" class="org.apache.royale.html.beads.TitleBarTitle"/>
<component id="ImageModel" class="org.apache.royale.html.beads.models.ImageModel"/>
+ <component id="ArraySelectionModel" class="org.apache.royale.html.beads.models.ArraySelectionModel"/>
<component id="TitleBarModel" class="org.apache.royale.html.beads.models.TitleBarModel"/>
<component id="ToolTip" class="org.apache.royale.html.ToolTip"/>
<component id="Tree" class="org.apache.royale.html.Tree"/>
<component id="BasicLayout" class="org.apache.royale.html.beads.layouts.BasicLayout"/>
<component id="RemovableBasicLayout" class="org.apache.royale.html.beads.layouts.RemovableBasicLayout"/>
+ <component id="LayoutChangeNotifier" class="org.apache.royale.html.beads.layouts.LayoutChangeNotifier"/>
<component id="VerticalLayout" class="org.apache.royale.html.beads.layouts.VerticalLayout"/>
<component id="VirtualListView" class="org.apache.royale.html.beads.VirtualListView"/>
<component id="VirtualListVerticalLayout" class="org.apache.royale.html.beads.layouts.VirtualListVerticalLayout"/>
@@ -87,13 +95,16 @@
<component id="ListView" class="org.apache.royale.html.beads.ListView"/>
<component id="AccordionView" class="org.apache.royale.html.beads.AccordionView"/>
<component id="CenterElement" class="org.apache.royale.html.beads.CenterElement"/>
+ <component id="StyleInheritanceBead" class="org.apache.royale.html.beads.StyleInheritanceBead"/>
+ <component id="HideComboPopupOnMouseDownBead" class="org.apache.royale.html.beads.HideComboPopupOnMouseDownBead"/>
+ <component id="StyleInheritanceWithObserverBead" class="org.apache.royale.html.beads.StyleInheritanceWithObserverBead"/>
<component id="CrossBrowserFireListenerOverrideBead" class="org.apache.royale.html.beads.CrossBrowserFireListenerOverrideBead" />
<component id="AccessibilityAltBead" class="org.apache.royale.html.beads.AccessibilityAltBead" />
<component id="DataGridColumnChangePropagator" class="org.apache.royale.html.beads.DataGridColumnChangePropagator" />
<component id="DataGridColumnForceChangePropagator" class="org.apache.royale.html.beads.DataGridColumnForceChangePropagator" />
<component id="SingleSelectionContainerBead" class="org.apache.royale.html.beads.SingleSelectionContainerBead" />
<!--<component id="MultilineTextFieldView" class="org.apache.royale.html.beads.MultilineTextFieldView"/>-->
-
+ <component id="VerticalAlignChildren" class="org.apache.royale.html.beads.VerticalAlignChildren"/>
<component id="ApplicationParameters" class="org.apache.royale.html.beads.ApplicationParametersBead"/>
<component id="ApplicationParametersCaseInsensitive" class="org.apache.royale.html.beads.ApplicationParametersCaseInsensitiveBead"/>
<component id="IEEventAdapter" class="org.apache.royale.html.beads.IEEventAdapterBead"/>
@@ -101,8 +112,12 @@
<component id="SimpleAlert" class="org.apache.royale.html.SimpleAlert"/>
<component id="Alert" class="org.apache.royale.html.Alert"/>
<component id="Spinner" class="org.apache.royale.html.Spinner"/>
+ <component id="SpinnerButton" class="org.apache.royale.html.supportClasses.SpinnerButton"/>
<component id="Slider" class="org.apache.royale.html.Slider"/>
<component id="NumericStepper" class="org.apache.royale.html.NumericStepper" />
+ <component id="DataItemRenderer" class="org.apache.royale.html.supportClasses.DataItemRenderer"/>
+ <component id="MXMLBeadView" class="org.apache.royale.html.MXMLBeadView"/>
+ <component id="MXMLItemRenderer" class="org.apache.royale.html.supportClasses.MXMLItemRenderer"/>
<component id="AlternatingBackgroundColorStringItemRenderer" class="org.apache.royale.html.supportClasses.AlternatingBackgroundColorStringItemRenderer"/>
<component id="StringItemRenderer" class="org.apache.royale.html.supportClasses.StringItemRenderer"/>
<component id="AccordionItemRenderer" class="org.apache.royale.html.supportClasses.AccordionItemRenderer"/>
@@ -145,18 +160,19 @@
<!--
<component id="ImageAndTextButtonView" class="org.apache.royale.html.beads.ImageAndTextButtonView" />
-->
+ <component id="Viewport" class="org.apache.royale.html.supportClasses.Viewport" />
<component id="ScrollingViewport" class="org.apache.royale.html.supportClasses.ScrollingViewport" />
<component id="HScrollViewport" class="org.apache.royale.html.supportClasses.HScrollViewport" />
<component id="VScrollViewport" class="org.apache.royale.html.supportClasses.VScrollViewport" />
<component id="ClippingViewport" class="org.apache.royale.html.supportClasses.Viewport" lookupOnly="true" />
- <component id="Viewport" class="org.apache.royale.html.supportClasses.Viewport" />
<component id="OverflowViewport" class="org.apache.royale.html.supportClasses.OverflowViewport" />
<component id="InfiniteVScroller" class="org.apache.royale.html.beads.InfiniteVScroller" />
- <component id="ArraySelectionModel" class="org.apache.royale.html.beads.models.ArraySelectionModel" />
<component id="ArrayListSelectionModel" class="org.apache.royale.html.beads.models.ArrayListSelectionModel" />
<component id="DataGrid" class="org.apache.royale.html.DataGrid"/>
+ <component id="DynamicDataGrid" class="org.apache.royale.html.DynamicDataGrid"/>
+ <component id="DataGridListArea" class="org.apache.royale.html.beads.DataGridListArea"/>
<component id="DataProviderChangeNotifier" class="org.apache.royale.html.beads.DataProviderChangeNotifier"/>
<component id="EasyDataProviderChangeNotifier" class="org.apache.royale.html.beads.EasyDataProviderChangeNotifier"/>
<component id="DataProviderCollectionChangeNotifier" class="org.apache.royale.html.beads.DataProviderCollectionChangeNotifier"/>
@@ -166,6 +182,7 @@
<component id="DataGridColumn" class="org.apache.royale.html.supportClasses.DataGridColumn"/>
<component id="DataGridLinesBead" class="org.apache.royale.html.beads.DataGridLinesBead"/>
<component id="DataGridColumnList" class="org.apache.royale.html.supportClasses.DataGridColumnList"/>
+ <component id="DynamicDataGridColumnList" class="org.apache.royale.html.supportClasses.DynamicDataGridColumnList"/>
<component id="DataGridPercentageView" class="org.apache.royale.html.beads.DataGridPercentageView" />
<component id="DataGridCollectionViewModel" class="org.apache.royale.html.beads.models.DataGridCollectionViewModel" />
@@ -191,8 +208,7 @@
<component id="VerticalColumnLayout" class="org.apache.royale.html.beads.layouts.VerticalColumnLayout" />
<component id="ToolTipBead" class="org.apache.royale.html.accessories.ToolTipBead" />
-
- <component id="LayoutChangeNotifier" class="org.apache.royale.html.beads.layouts.LayoutChangeNotifier"/>
+
<component id="LayoutOnShow" class="org.apache.royale.html.beads.layouts.LayoutOnShow"/>
<component id="ImageButton" class="org.apache.royale.html.ImageButton"/>
<component id="FlexibleFirstChildHorizontalLayout" class="org.apache.royale.html.beads.layouts.FlexibleFirstChildHorizontalLayout"/>
@@ -200,12 +216,9 @@
<component id="OneFlexibleChildHorizontalLayout" class="org.apache.royale.html.beads.layouts.OneFlexibleChildHorizontalLayout"/>
<component id="OneFlexibleChildVerticalLayoutForOverflow" class="org.apache.royale.html.beads.layouts.OneFlexibleChildVerticalLayoutForOverflow"/>
<component id="OneFlexibleChildHorizontalLayoutForOverflow" class="org.apache.royale.html.beads.layouts.OneFlexibleChildHorizontalLayoutForOverflow"/>
- <component id="MXMLBeadView" class="org.apache.royale.html.MXMLBeadView"/>
<component id="SubAppLoader" class="org.apache.royale.html.SubAppLoader" />
- <component id="Border" class="org.apache.royale.html.supportClasses.Border"/>
-
<component id="WebBrowser" class="org.apache.royale.html.WebBrowser" />
<component id="Table" class="org.apache.royale.html.Table"/>
@@ -217,6 +230,7 @@
<component id="UIModuleLoader" class="org.apache.royale.html.UIModuleLoader"/>
<component id="TreeGrid" class="org.apache.royale.html.TreeGrid" />
+ <component id="TreeGridListArea" class="org.apache.royale.html.beads.TreeGridListArea"/>
<component id="TreeGridColumn" class="org.apache.royale.html.supportClasses.TreeGridColumn" />
<component id="HashChangeNotifierBead" class="org.apache.royale.routing.HashChangeNotifierBead" />
diff --git a/frameworks/projects/Basic/src/main/resources/defaults.css b/frameworks/projects/Basic/src/main/resources/defaults.css
index cf12b29..cad411f 100644
--- a/frameworks/projects/Basic/src/main/resources/defaults.css
+++ b/frameworks/projects/Basic/src/main/resources/defaults.css
@@ -26,15 +26,6 @@
box-sizing: border-box;
}
-.unselectable
-{
- -moz-user-select: -moz-none;
- -khtml-user-select: none;
- -webkit-user-select: none;
- -o-user-select: none;
- user-select: none;
-}
-
Alert
{
IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.VerticalFlexLayout");
@@ -94,11 +85,6 @@
background-color: #FFFFFF;
}
-.opt_org-apache-royale-html-ComboBox_Button {
- padding: 0px;
- margin: 0px;
-}
-
Container
{
IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
@@ -139,6 +125,7 @@
IBeadView: ClassReference("org.apache.royale.html.beads.DataGridView");
IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridModel");
IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.DataGridLayout");
+ ColumnClass: ClassReference("org.apache.royale.html.supportClasses.DataGridColumnList");
background-color: #FFFFFF;
border: 1px solid #222222;
@@ -176,7 +163,7 @@
background-color: #FFFFFF;
}
-.opt_org-apache-royale-html-DataGrid_ListArea {
+DataGridListArea {
background-color: #FFFFFF;
IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalLayout");
IViewport: ClassReference("org.apache.royale.html.supportClasses.ScrollingViewport");
@@ -184,19 +171,19 @@
flex-grow: 1;
}
-.DynamicDataGrid {
+DynamicDataGrid {
IChangePropagator: ClassReference("org.apache.royale.html.beads.DataGridColumnChangePropagator");
IDataGridPresentationModel: ClassReference("org.apache.royale.html.beads.models.DataGridPresentationModel");
IBeadView: ClassReference("org.apache.royale.html.beads.DataGridView");
IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridCollectionViewModel");
IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.DataGridLayout");
- ColumnClassName: "DynamicDataGridColumnList";
+ ColumnClass: ClassReference("org.apache.royale.html.supportClasses.DynamicDataGridColumnList");
background-color: #FFFFFF;
border: 1px solid #222222;
}
-.DynamicDataGridColumnList {
+DynamicDataGridColumnList {
IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataGridCollectionViewModel");
IBeadView: ClassReference("org.apache.royale.html.beads.ListView");
IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ListSingleSelectionMouseController");
@@ -250,9 +237,9 @@
background-color: #FFFFFF;
}
-.opt_org-apache-royale-html-DateChooser_MonthButtons {
- IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalFlexLayout");
- height: 20px;
+DataItemRenderer
+{
+ IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController");
}
DateItemRenderer
@@ -403,7 +390,7 @@
IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
}
-.DynamicList
+DynamicList
{
IBeadModel: ClassReference("org.apache.royale.html.beads.models.SingleSelectionCollectionViewModel");
IBeadView: ClassReference("org.apache.royale.html.beads.ListView");
@@ -535,11 +522,7 @@
border: 1px solid #222222;
}
-TreeGrid .TreeGridColumn {
- border: none
-}
-
-.opt_org-apache-royale-html-TreeGrid_ListArea {
+TreeGridListArea {
background-color: #FFFFFF;
IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.BasicLayout");
IViewport: ClassReference("org.apache.royale.html.supportClasses.ScrollingViewport");
@@ -577,16 +560,6 @@
border: 1px solid #333333;
}
-Panel .TitleBar
-{
- border-bottom: 1px solid #333333;
-}
-
-.PanelContent
-{
- background-color: #FFFFFF;
-}
-
PopUpList
{
position: absolute;
@@ -614,12 +587,6 @@
IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController");
position: relative;
}
-.SliderTrack {
- position: absolute;
-}
-.SliderThumb {
- position: absolute;
-}
Spinner
{
@@ -629,14 +596,14 @@
height: 32px;
}
-.SpinnerButton
+SpinnerButton
{
padding: 0;
margin: 0;
font-size: 6px;
}
-.SpinnerButton:hover
+SpinnerButton:hover
{
padding: 0;
margin: 0;
@@ -727,46 +694,6 @@
min-height: 30px;
}
-TitleBar .TitleBarCloseButton {
- width: 16px;
- height: 16px;
- margin: 0px;
-}
-
-TitleBar .TitleBarTitle {
- font-weight: bold;
- padding: 0;
- margin: 0;
-}
-
-.toggleTextButton
-{
- background-color: #f8f8f8;
- border: 1px solid #808080;
- padding: 4px;
-}
-
-.toggleTextButton:hover
-{
- background-color: #e8e8e8;
- border: 1px solid #808080;
- padding: 4px;
-}
-
-.toggleTextButton_Selected
-{
- background-color: #d8d8d8;
- border: 1px solid #808080;
- padding: 4px;
-}
-
-.toggleTextButton_Selected:hover
-{
- background-color: #e8e8e8;
- border: 1px solid #808080;
- padding: 4px;
-}
-
ToolTip
{
background-color: #FFFFCC;
diff --git a/frameworks/projects/Basic/src/main/royale/BasicClasses.as b/frameworks/projects/Basic/src/main/royale/BasicClasses.as
index f0c3701..4faef78 100644
--- a/frameworks/projects/Basic/src/main/royale/BasicClasses.as
+++ b/frameworks/projects/Basic/src/main/royale/BasicClasses.as
@@ -50,7 +50,8 @@
import org.apache.royale.html.supportClasses.VDividedContainerGripper; VDividedContainerGripper;
import org.apache.royale.html.beads.controllers.HDividedContainerMouseController; HDividedContainerMouseController;
import org.apache.royale.html.beads.controllers.VDividedContainerMouseController; VDividedContainerMouseController;
-
+ import org.apache.royale.html.beads.controllers.ItemRendererMouseController; ItemRendererMouseController;
+
import org.apache.royale.html.MenuBar; MenuBar;
import org.apache.royale.html.beads.models.MenuBarModel; MenuBarModel;
import org.apache.royale.html.supportClasses.MenuBarItemRenderer; MenuBarItemRenderer;
@@ -66,10 +67,11 @@
import org.apache.royale.html.beads.controllers.CascadingMenuSelectionMouseController; CascadingMenuSelectionMouseController;
import org.apache.royale.html.supportClasses.CascadingMenuItemRenderer; CascadingMenuItemRenderer;
-
COMPILE::SWF
{
import org.apache.royale.html.beads.BackgroundImageBead; BackgroundImageBead;
+ import org.apache.royale.html.supportClasses.ContainerContentArea; ContainerContentArea;
+ import org.apache.royale.html.beads.TextFieldViewBase; TextFieldViewBase;
}
import org.apache.royale.html.beads.ButtonBarView; ButtonBarView;
COMPILE::SWF
@@ -77,8 +79,12 @@
import org.apache.royale.html.beads.CheckBoxView; CheckBoxView;
}
import org.apache.royale.html.beads.ComboBoxView; ComboBoxView;
- import org.apache.royale.html.beads.ContainerView; ContainerView;
- import org.apache.royale.html.beads.GroupView; GroupView;
+ import org.apache.royale.html.MXMLBeadView; MXMLBeadView;
+ import org.apache.royale.html.beads.GroupView; GroupView;
+ import org.apache.royale.html.beads.ContainerView; ContainerView;
+ import org.apache.royale.core.supportClasses.StyledImageBase; StyledImageBase;
+
+
COMPILE::SWF
{
import org.apache.royale.html.beads.ControlBarMeasurementBead; ControlBarMeasurementBead;
@@ -94,6 +100,7 @@
import org.apache.royale.html.beads.ImageButtonView; ImageButtonView;
import org.apache.royale.html.beads.BinaryImageLoader; BinaryImageLoader;
import org.apache.royale.html.beads.models.BinaryImageModel; BinaryImageModel;
+
import org.apache.royale.html.beads.ListView; ListView;
import org.apache.royale.html.beads.NumericStepperView; NumericStepperView;
import org.apache.royale.html.beads.PanelView; PanelView;
@@ -103,6 +110,9 @@
import org.apache.royale.html.beads.layouts.VerticalSliderLayout; VerticalSliderLayout;
import org.apache.royale.html.beads.PanelWithControlBarView; PanelWithControlBarView;
import org.apache.royale.html.beads.AccordionItemRendererView; AccordionItemRendererView;
+ import org.apache.royale.html.supportClasses.MXMLItemRenderer; MXMLItemRenderer;
+ import org.apache.royale.core.StyledMXMLItemRenderer; StyledMXMLItemRenderer;
+
COMPILE::SWF
{
import org.apache.royale.html.beads.RadioButtonView; RadioButtonView;
@@ -115,6 +125,7 @@
import org.apache.royale.html.beads.SliderTrackView; SliderTrackView;
import org.apache.royale.html.beads.SingleLineBorderWithChangeListenerBead; SingleLineBorderWithChangeListenerBead;
}
+
import org.apache.royale.html.beads.SpinnerView; SpinnerView;
COMPILE::SWF
{
@@ -137,6 +148,8 @@
import org.apache.royale.html.beads.models.RangeModel; RangeModel;
import org.apache.royale.html.beads.models.RangeModelExtended; RangeModelExtended;
import org.apache.royale.html.beads.models.ComboBoxModel; ComboBoxModel;
+ import org.apache.royale.html.beads.models.ViewportModel; ViewportModel;
+
COMPILE::SWF
{
import org.apache.royale.html.beads.models.ImageModel; ImageModel;
@@ -187,6 +200,8 @@
import org.apache.royale.html.beads.layouts.OneFlexibleChildHorizontalLayout; OneFlexibleChildHorizontalLayout;
import org.apache.royale.html.beads.layouts.OneFlexibleChildVerticalLayout; OneFlexibleChildVerticalLayout;
+
+
COMPILE::SWF
{
import org.apache.royale.html.beads.layouts.HScrollBarLayout; HScrollBarLayout;
@@ -201,10 +216,11 @@
import org.apache.royale.html.beads.DataItemRendererFactoryForHierarchicalData; DataItemRendererFactoryForHierarchicalData;
import org.apache.royale.html.beads.DataItemRendererFactoryForCollectionView; DataItemRendererFactoryForCollectionView;
import org.apache.royale.html.supportClasses.DataGroup; DataGroup;
+ import org.apache.royale.html.supportClasses.Border; Border;
import org.apache.royale.html.supportClasses.Viewport; Viewport;
import org.apache.royale.html.supportClasses.ScrollingViewport; ScrollingViewport;
import org.apache.royale.html.supportClasses.TextButtonItemRenderer; TextButtonItemRenderer;
-
+ import org.apache.royale.html.supportClasses.UIItemRendererBase; UIItemRendererBase;
import org.apache.royale.html.DataGridButtonBarTextButton; DataGridButtonBarTextButton;
import org.apache.royale.html.DataGridButtonBar; DataGridButtonBar;
import org.apache.royale.html.beads.DataGridColumnView; DataGridColumnView;
@@ -213,6 +229,7 @@
import org.apache.royale.html.beads.DataGridPercentageView; DataGridPercentageView;
import org.apache.royale.html.beads.layouts.DataGridLayout; DataGridLayout;
import org.apache.royale.html.beads.layouts.DataGridPercentageLayout; DataGridPercentageLayout;
+ import org.apache.royale.html.beads.layouts.LayoutChangeNotifier; LayoutChangeNotifier;
import org.apache.royale.html.beads.DateChooserView; DateChooserView;
import org.apache.royale.html.beads.DateFieldView; DateFieldView;
import org.apache.royale.html.beads.DecrementButtonView; DecrementButtonView;
@@ -240,10 +257,14 @@
import org.apache.royale.html.beads.WebBrowserView; WebBrowserView;
import org.apache.royale.html.beads.models.WebBrowserModel; WebBrowserModel;
- import org.apache.royale.core.ListBase; ListBase;
import org.apache.royale.core.Lookalike; Lookalike;
import org.apache.royale.core.FilledRectangle; FilledRectangle;
import org.apache.royale.core.UIBase; UIBase;
+ import org.apache.royale.core.StyledUIBase; StyledUIBase;
+ import org.apache.royale.core.GroupBase; GroupBase;
+ import org.apache.royale.core.ContainerBase; ContainerBase;
+ import org.apache.royale.core.ViewBase; ViewBase;
+
COMPILE::JS
{
import org.apache.royale.core.UIElement; UIElement;
@@ -262,6 +283,7 @@
import org.apache.royale.svg.Path; Path;
import org.apache.royale.svg.Text; Text;
import org.apache.royale.svg.CompoundGraphic; CompoundGraphic;
+ import org.apache.royale.svg.TransformableCompoundGraphic; TransformableCompoundGraphic;
import org.apache.royale.html.beads.models.DataProviderModel; DataProviderModel;
import org.apache.royale.html.beads.DataContainerView; DataContainerView;
@@ -301,6 +323,8 @@
import org.apache.royale.utils.UIModuleUtils; UIModuleUtils;
+
+ import org.apache.royale.html.util.getLabelFromData; getLabelFromData;
}
}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/Application.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/Application.as
index 44f20be..6304126 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/Application.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/Application.as
@@ -23,7 +23,7 @@
import org.apache.royale.events.IEventDispatcher;
import org.apache.royale.events.MouseEvent;
import org.apache.royale.utils.MXMLDataInterpreter;
- import org.apache.royale.utils.Timer;
+ import org.apache.royale.utils.Timer;
COMPILE::SWF {
import flash.display.DisplayObject;
@@ -372,6 +372,21 @@
*/
public function generateMXMLAttributes(data:Array):void
{
+ // move the initialView to be the last thing to be
+ // the last thing instantiated so all other properties
+ // are set up first. This more closely mimics the
+ // Flex timing
+ var propCount:int = data[0];
+ var n:int = data.length;
+ for (var i:int = 1; i < n; i += 3)
+ {
+ if (data[i] == "initialView")
+ {
+ var initialViewArray:Array = data.splice(i, 3);
+ var offset:int = (propCount - 1) * 3 + 1;
+ data.splice(offset, 0, initialViewArray[0], initialViewArray[1], initialViewArray[2]);
+ }
+ }
MXMLDataInterpreter.generateMXMLProperties(this, data);
}
@@ -678,7 +693,7 @@
if (!isNaN(baseView.percentWidth) || !isNaN(baseView.percentHeight)) {
this.element.style.height = window.innerHeight.toString() + 'px';
this.element.style.width = window.innerWidth.toString() + 'px';
- this.initialView.dispatchEvent('sizeChanged'); // kick off layout if % sizes
+ this.initialView.dispatchEvent(new Event("sizeChanged")); // kick off layout if % sizes
}
dispatchEvent(new org.apache.royale.events.Event("viewChanged"));
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/DataContainerBase.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/DataContainerBase.as
index 0d25075..18f5ec6 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/DataContainerBase.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/DataContainerBase.as
@@ -19,6 +19,7 @@
package org.apache.royale.core
{
import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.core.IItemRendererProvider;
import org.apache.royale.html.beads.IListView;
import org.apache.royale.events.Event;
import org.apache.royale.html.supportClasses.DataItemRenderer;
@@ -42,7 +43,7 @@
* @playerversion AIR 2.6
* @productversion Royale 0.0
*/
- public class DataContainerBase extends ContainerBase
+ public class DataContainerBase extends ContainerBase implements IItemRendererProvider
{
/**
* Constructor.
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/GroupBase.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/GroupBase.as
index 241afc5..93148bb 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/GroupBase.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/GroupBase.as
@@ -22,6 +22,7 @@
import org.apache.royale.core.ILayoutParent;
import org.apache.royale.core.ILayoutHost;
import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.UIBase;
import org.apache.royale.core.ValuesManager;
import org.apache.royale.events.Event;
import org.apache.royale.events.ValueChangeEvent;
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/ListBaseStrandChildren.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/ListBaseStrandChildren.as
index e91b237..3160c4e 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/ListBaseStrandChildren.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/ListBaseStrandChildren.as
@@ -18,6 +18,8 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.core
{
+ import org.apache.royale.core.DataContainerBase;
+
/**
* The ListBaseStrandChildren exists so that Lists are compatible with
* the ListView/ContainerView beads.
@@ -32,7 +34,7 @@
/**
* Constructor.
*
- * @royaleignorecoercion org.apache.royale.core.ListBase
+ * @royaleignorecoercion org.apache.royale.core.DataContainerBase
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
@@ -42,10 +44,10 @@
{
super();
- this.owner = owner as ListBase;
+ this.owner = owner as DataContainerBase;
}
- public var owner:ListBase;
+ public var owner:DataContainerBase;
/**
* @private
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/StyledMXMLItemRenderer.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/StyledMXMLItemRenderer.as
new file mode 100644
index 0000000..baa300d
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/StyledMXMLItemRenderer.as
@@ -0,0 +1,140 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.core
+{
+ import org.apache.royale.utils.ClassSelectorList;
+ import org.apache.royale.utils.IClassSelectorListSupport;
+ import org.apache.royale.html.supportClasses.MXMLItemRenderer;
+
+ /**
+ * The StyledMXMLItemRenderer class is the base class for itemRenderers that are MXML-based
+ * and provides support for ClassSelectorList.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class StyledMXMLItemRenderer extends MXMLItemRenderer implements IClassSelectorListSupport
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function StyledMXMLItemRenderer()
+ {
+ super();
+ typeNames = "";
+ classSelectorList = new ClassSelectorList(this);
+ }
+
+ protected var classSelectorList:ClassSelectorList;
+
+ COMPILE::JS
+ override protected function setClassName(value:String):void
+ {
+ classSelectorList.addNames(value);
+ }
+
+ /**
+ * Add a class selector to the list.
+ *
+ * @param name Name of selector to add.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function addClass(name:String):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.add(name);
+ }
+ }
+
+ /**
+ * Removes a class selector from the list.
+ *
+ * @param name Name of selector to remove.
+ *
+ * @royaleignorecoercion HTMLElement
+ * @royaleignorecoercion DOMTokenList
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function removeClass(name:String):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.remove(name);
+ }
+ }
+
+ /**
+ * Add or remove a class selector to/from the list.
+ *
+ * @param name Name of selector to add or remove.
+ * @param value True to add, False to remove.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function toggleClass(name:String, value:Boolean):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.toggle(name, value);
+ }
+ }
+
+ /**
+ * Search for the name in the element class list
+ *
+ * @param name Name of selector to find.
+ * @return return true if the name is found or false otherwise.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function containsClass(name:String):Boolean
+ {
+ COMPILE::JS
+ {
+ return classSelectorList.contains(name);
+ }
+ COMPILE::SWF
+ {//not implemented
+ return false;
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/StyledUIBase.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/StyledUIBase.as
new file mode 100644
index 0000000..70a8dd6
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/StyledUIBase.as
@@ -0,0 +1,171 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.core
+{
+ import org.apache.royale.utils.ClassSelectorList;
+ import org.apache.royale.utils.IClassSelectorListSupport;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The StyledUIBase is the base class for UIBase components that makes
+ * heavy use of styles
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class StyledUIBase extends UIBase implements IClassSelectorListSupport
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function StyledUIBase()
+ {
+ classSelectorList = new ClassSelectorList(this);
+ super();
+ }
+
+ COMPILE::JS
+ private var _positioner:WrappedHTMLElement;
+
+ COMPILE::JS
+ override public function get positioner():WrappedHTMLElement
+ {
+ return _positioner;
+ }
+
+ COMPILE::JS
+ override public function set positioner(value:WrappedHTMLElement):void
+ {
+ _positioner = value;
+ }
+
+ protected var classSelectorList:ClassSelectorList;
+
+ COMPILE::JS
+ override protected function setClassName(value:String):void
+ {
+ classSelectorList.addNames(value);
+ }
+
+ /**
+ * Add a class selector to the list.
+ *
+ * @param name Name of selector to add.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function addClass(name:String):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.add(name);
+ }
+ }
+
+ /**
+ * Removes a class selector from the list.
+ *
+ * @param name Name of selector to remove.
+ *
+ * @royaleignorecoercion HTMLElement
+ * @royaleignorecoercion DOMTokenList
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function removeClass(name:String):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.remove(name);
+ }
+ }
+
+ /**
+ * Add or remove a class selector to/from the list.
+ *
+ * @param name Name of selector to add or remove.
+ * @param value True to add, False to remove.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function toggleClass(name:String, value:Boolean):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.toggle(name, value);
+ }
+ }
+
+ /**
+ * Search for the name in the element class list
+ *
+ * @param name Name of selector to find.
+ * @return return true if the name is found or false otherwise.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function containsClass(name:String):Boolean
+ {
+ COMPILE::JS
+ {
+ return classSelectorList.contains(name);
+ }
+ COMPILE::SWF
+ {//not implemented
+ return false;
+ }
+ }
+
+ /**
+ * @return The actual element to be parented.
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ addElementToWrapper(this,'div');
+ positioner = element;
+ return element;
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as
index e73cc4f..c3d8356 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as
@@ -27,6 +27,7 @@
import org.apache.royale.events.utils.MouseEventConverter;
}
+ import org.apache.royale.core.IId;
import org.apache.royale.events.Event;
import org.apache.royale.events.IEventDispatcher;
import org.apache.royale.events.MouseEvent;
@@ -38,7 +39,6 @@
{
import org.apache.royale.html.util.addElementToWrapper;
import org.apache.royale.utils.CSSUtils;
- import org.apache.royale.utils.cssclasslist.addStyles;
}
/**
@@ -161,6 +161,18 @@
[Event(name="doubleClick", type="org.apache.royale.events.MouseEvent")]
/**
+ * Set a different class for doubleClick events so that
+ * there aren't dependencies on the flash classes
+ * on the JS side.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ [Event(name="beadsAdded", type="org.apache.royale.events.Event")]
+
+ /**
* The UIBase class is the base class for most composite user interface
* components. For the Flash Player, Buttons and Text controls may
* have a different base class and therefore may not extend UIBase.
@@ -171,7 +183,7 @@
* @playerversion AIR 2.6
* @productversion Royale 0.0
*/
- public class UIBase extends HTMLElementWrapper implements IStrandWithModelView, IEventDispatcher, IParentIUIBase, IStyleableObject, ILayoutChild, IRoyaleElement
+ public class UIBase extends HTMLElementWrapper implements IStrandWithModelView, IEventDispatcher, IParentIUIBase, IStyleableObject, ILayoutChild, IRoyaleElement, IId
{
/**
* Constructor.
@@ -730,9 +742,16 @@
COMPILE::JS
{
//positioner.style.position = 'absolute';
- if (positioner.parentNode != positioner.offsetParent)
- value += (positioner.parentNode as HTMLElement).offsetLeft;
- positioner.style.left = value.toString() + 'px';
+ if(!isNaN(value))
+ {
+ if (positioner.parentNode != positioner.offsetParent)
+ value += (positioner.parentNode as HTMLElement).offsetLeft;
+ positioner.style.left = value.toString() + 'px';
+ } else
+ {
+ // is NaN remove style
+ positioner.style.left = "initial";
+ }
}
}
@@ -799,9 +818,16 @@
COMPILE::JS
{
//positioner.style.position = 'absolute';
- if (positioner.parentNode != positioner.offsetParent)
- value += (positioner.parentNode as HTMLElement).offsetTop;
- positioner.style.top = value.toString() + 'px';
+ if(!isNaN(value))
+ {
+ if (positioner.parentNode != positioner.offsetParent)
+ value += (positioner.parentNode as HTMLElement).offsetTop;
+ positioner.style.top = value.toString() + 'px';
+ } else
+ {
+ // is NaN remove style
+ positioner.style.top = "initial";
+ }
}
}
@@ -816,9 +842,12 @@
dispatchEvent(new Event(value?"show":"hide"));
dispatchEvent(new Event("visibleChanged"));
}
-
+ /**
+ * @private
+ * @royalesuppresspublicvarwarning
+ */
COMPILE::JS
- protected var displayStyleForLayout:String;
+ public var displayStyleForLayout:String;
/**
* The display style is used for both visible
@@ -832,12 +861,11 @@
COMPILE::JS
public function setDisplayStyleForLayout(value:String):void
{
+ displayStyleForLayout = value;
if (positioner.style.display !== 'none')
positioner.style.display = value;
- else
- displayStyleForLayout = value;
}
-
+
[Bindable("visibleChanged")]
COMPILE::JS
public function get visible():Boolean
@@ -951,7 +979,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
public function get id():String
{
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/supportClasses/StyledImageBase.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/supportClasses/StyledImageBase.as
new file mode 100644
index 0000000..d09f8cf
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/supportClasses/StyledImageBase.as
@@ -0,0 +1,89 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.core.supportClasses
+{
+ import org.apache.royale.core.IImage;
+ import org.apache.royale.core.IImageModel;
+ import org.apache.royale.core.StyledUIBase;
+
+ /**
+ * The StyledImageBase class serves as a base class for components that displays a bitmap and used
+ * ClassSelectorList for set class selector names
+ * The Image uses
+ * the following beads:
+ *
+ * org.apache.royale.core.IBeadModel: the data model for the Image, including the url/binary property.
+ * org.apache.royale.core.IBeadView: constructs the visual elements of the component.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class StyledImageBase extends StyledUIBase implements IImage
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function StyledImageBase()
+ {
+ super();
+ }
+
+ /**
+ * The location of the bitmap, usually a URL.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ * @royaleignorecoercion org.apache.royale.core.IImageModel
+ */
+ public function get src():String
+ {
+ return (model as IImageModel).url;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IImageModel
+ */
+ public function set src(value:String):void
+ {
+ (model as IImageModel).url = value;
+ }
+
+ COMPILE::JS
+ public function get imageElement():Element
+ {
+ return null;
+ // override this
+ }
+
+ COMPILE::JS
+ public function applyImageData(binaryDataAsString:String):void
+ {
+ // override this
+ }
+
+ }
+}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/Alert.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/Alert.as
index 69469e9..c377673 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/Alert.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/Alert.as
@@ -32,8 +32,8 @@
* org.apache.royale.core.IBeadModel: the data model for the Alert.
* org.apache.royale.core.IBeadView: the bead used to create the parts of the Alert.
* org.apache.royale.core.IBeadController: the bead used to handle input events.
- * org.apache.royale.core.IBorderBead: if present, draws a border around the Alert.
- * org.apache.royale.core.IBackgroundBead: if present, places a solid color background below the Alert.
+ * org.apache.royale.html.beads.IBorderBead: if present, draws a border around the Alert.
+ * org.apache.royale.html.beads.IBackgroundBead: if present, places a solid color background below the Alert.
*
* @langversion 3.0
* @playerversion Flash 10.2
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/CheckBox.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/CheckBox.as
index 1cbddac..ca18ff0 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/CheckBox.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/CheckBox.as
@@ -47,7 +47,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
[Event(name="change", type="org.apache.royale.events.Event")]
@@ -59,7 +59,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
COMPILE::SWF
public class CheckBox extends UIButtonBase implements IStrand, ISelectable
@@ -70,7 +70,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
public function CheckBox()
{
@@ -85,7 +85,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
public function get text():String
{
@@ -108,7 +108,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
public function get selected():Boolean
{
@@ -136,7 +136,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
[Event(name="change", type="org.apache.royale.events.Event")]
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/CloseButton.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/CloseButton.as
index e93fcd7..92ade63 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/CloseButton.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/CloseButton.as
@@ -20,7 +20,8 @@
{
COMPILE::JS
{
- import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
}
/**
@@ -45,22 +46,19 @@
public function CloseButton()
{
super();
+ typeNames = "Button CloseButton";
}
-
- /**
- * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
- */
- COMPILE::JS
+
+ COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
- super.createElement();
- element.textContent = 'x';
-
- element.style.padding = 0;
- height = 11;
- width = 11;
+ addElementToWrapper(this,'button');
+ element.setAttribute('type', 'button');
+ element.style.lineHeight = "0";
+ element.style.padding = "0";
+ var data:String = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCA2MCI+PHBvbHlnb24gcG9pbnRzPSI2MCA2LjIyIDUzLjc4IDAgMzAgMjMuNzcgNi4yMiAwIDAgNi4yMiAyMy43OCAzMCAwIDUzLjc4IDYuMjIgNjAgMzAgMzYuMjMgNTMuNzggNjAgNjAgNTMuNzggMzYuMjIgMzAgNjAgNi4yMiIvPjwvc3ZnPg==';
+ element.innerHTML = "<img style='height:60%;width:60%' src='" + data + "'/>";
return element;
- }
-
+ }
}
}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ControlBar.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ControlBar.as
index 550b868..d1f22a8 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ControlBar.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ControlBar.as
@@ -40,8 +40,8 @@
*
* org.apache.royale.core.IBeadModel: the data model for the component.
* org.apache.royale.core.IMeasurementBead: helps determine the overlay size of the ControlBar for layout.
- * org.apache.royale.core.IBorderBead: if present, displays a border around the component.
- * org.apache.royale.core.IBackgroundBead: if present, displays a solid background below the ControlBar.
+ * org.apache.royale.html.beads.IBorderBead: if present, displays a border around the component.
+ * org.apache.royale.html.beads.IBackgroundBead: if present, displays a solid background below the ControlBar.
*
* @toplevel
* @langversion 3.0
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/DataContainer.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/DataContainer.as
index e8d3f9f..dbb390e 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/DataContainer.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/DataContainer.as
@@ -34,7 +34,6 @@
import org.apache.royale.core.IListPresentationModel;
import org.apache.royale.core.IRollOverModel;
import org.apache.royale.core.IDataProviderModel;
- import org.apache.royale.core.ListBase;
import org.apache.royale.core.UIBase;
import org.apache.royale.core.ValuesManager;
COMPILE::JS
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/DropDownList.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/DropDownList.as
index 77781e3..e4b49e8 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/DropDownList.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/DropDownList.as
@@ -125,10 +125,16 @@
n = value.length;
for (i = 0; i < n; i++) {
opt = document.createElement('option') as HTMLOptionElement;
- if (lf)
- opt.text = value[i][lf];
- else
- opt.text = value[i];
+ //TODO create DropDownListView for JS.
+ // We need a spearate view for dropdown list with and without separators.
+ var optionText:String = lf ? value[i][lf] : value[i];
+ if(!optionText || optionText.indexOf("-") == 0)
+ {
+ opt.disabled = true;
+ opt.text = "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500";
+ } else {
+ opt.text = optionText;
+ }
dd.add(opt, null);
}
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/DynamicDataGrid.as
similarity index 74%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to frameworks/projects/Basic/src/main/royale/org/apache/royale/html/DynamicDataGrid.as
index 75d1f7d..e8a07ad 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/DynamicDataGrid.as
@@ -1,11 +1,10 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// 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 "Licens"); 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
@@ -17,13 +16,16 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-
-@namespace "http://www.w3.org/1999/xhtml";
-
-.Application
+package org.apache.royale.html
{
- padding: 10px;
- margin: 10px;
-}
-
\ No newline at end of file
+ public class DynamicDataGrid extends DataGrid
+ {
+ public function DynamicDataGrid()
+ {
+ super();
+
+ typeNames = "DataGrid DynamicDataGrid";
+
+ }
+ }
+}
\ No newline at end of file
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/DynamicList.as
similarity index 79%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to frameworks/projects/Basic/src/main/royale/org/apache/royale/html/DynamicList.as
index 75d1f7d..dcac4cd 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/DynamicList.as
@@ -1,4 +1,3 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,13 +16,15 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-
-@namespace "http://www.w3.org/1999/xhtml";
-
-.Application
+package org.apache.royale.html
{
- padding: 10px;
- margin: 10px;
-}
-
\ No newline at end of file
+ public class DynamicList extends List
+ {
+ public function DynamicList()
+ {
+ super();
+ typeNames = "DataContainer List DynamicList";
+
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/MXMLBeadView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/MXMLBeadView.as
index 84adf72..ef371a7 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/MXMLBeadView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/MXMLBeadView.as
@@ -23,7 +23,6 @@
import org.apache.royale.core.IBead;
import org.apache.royale.core.ILayoutHost;
import org.apache.royale.core.IParent;
- import org.apache.royale.core.IParentIUIBase;
import org.apache.royale.core.IStrand;
import org.apache.royale.core.IStatesImpl;
import org.apache.royale.core.ValuesManager;
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/MultilineLabel.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/MultilineLabel.as
index 8f51002..c639350 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/MultilineLabel.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/MultilineLabel.as
@@ -63,7 +63,7 @@
addElementToWrapper(this,'div');
textNode = document.createTextNode(text) as Text;
element.appendChild(textNode);
- element.style.whiteSpace = 'normal'; // was nowrap on safari?
+ element.style.whiteSpace = 'pre-wrap'; // was nowrap on safari?
return element;
}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/Panel.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/Panel.as
index 9680244..4a659b1 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/Panel.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/Panel.as
@@ -41,8 +41,8 @@
* org.apache.royale.core.IBeadModel: the data model for the Panel that includes the title and whether
* or not to display the close button.
* org.apache.royale.core.IBeadView: creates the parts of the Panel.
- * org.apache.royale.core.IBorderBead: if present, draws a border around the Panel.
- * org.apache.royale.core.IBackgroundBead: if present, provides a colored background for the Panel.
+ * org.apache.royale.html.beads.IBorderBead: if present, draws a border around the Panel.
+ * org.apache.royale.html.beads.IBackgroundBead: if present, provides a colored background for the Panel.
*
* @toplevel
* @see PanelWithControlBar
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/PanelTitleBar.as
similarity index 75%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to frameworks/projects/Basic/src/main/royale/org/apache/royale/html/PanelTitleBar.as
index 75d1f7d..f656a34 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/PanelTitleBar.as
@@ -1,4 +1,3 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,13 +16,17 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-
-@namespace "http://www.w3.org/1999/xhtml";
-
-.Application
+package org.apache.royale.html
{
- padding: 10px;
- margin: 10px;
-}
-
\ No newline at end of file
+ public class PanelTitleBar extends TitleBar
+ {
+ /**
+ * A specially styled TitleBar for use in a Panel
+ */
+ public function PanelTitleBar()
+ {
+ super();
+ typeNames = "TitleBar PanelTitleBar";
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/SimpleAlert.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/SimpleAlert.as
index 409bd8c..802bc65 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/SimpleAlert.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/SimpleAlert.as
@@ -33,8 +33,8 @@
* org.apache.royale.core.IBeadModel: the data model, which includes the message.
* org.apache.royale.core.IBeadView: the bead that constructs the visual parts of the Alert.
* org.apache.royale.core.IBeadController: the bead responsible for handling input events.
- * org.apache.royale.core.IBorderBead: a bead, if present, that draws a border around the control.
- * org.apache.royale.core.IBackgroundBead: a bead, if present, that creates a solid-color background.
+ * org.apache.royale.html.beads.IBorderBead: a bead, if present, that draws a border around the control.
+ * org.apache.royale.html.beads.IBackgroundBead: a bead, if present, that creates a solid-color background.
*
* @langversion 3.0
* @playerversion Flash 10.2
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ToggleTextButton.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ToggleTextButton.as
index 2dba6a6..bd3b525 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ToggleTextButton.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ToggleTextButton.as
@@ -88,7 +88,7 @@
}
COMPILE::JS
{
- this.typeNames = 'toggleTextButton';
+ this.typeNames = 'ToggleTextButton';
}
}
@@ -158,33 +158,31 @@
{
selected = !selected;
}
-
+ COMPILE::SWF
+ private var savedClassName:String;
private function internalSelected():void
{
COMPILE::SWF
{
- var name:String = super.className;
+ if(!savedClassName == null)
+ savedClassName = className;
+ var name:String = savedClassName;
if (selected)
{
- className = "toggleTextButton_Selected" + (name ? " " + name : "");
+ className = "selected" + (name ? " " + name : "");
}
else
{
- className = "toggleTextButton" + (name ? " " + name : "");
+ className = (name ? " " + name : "");
}
}
COMPILE::JS
{
- var isToggleTextButtonSelected:Boolean = element.classList.contains("toggleTextButton_Selected");
+ var isToggleTextButtonSelected:Boolean = element.classList.contains("selected");
//sync the class with the state
if(isToggleTextButtonSelected != _selected)
- element.classList.toggle("toggleTextButton_Selected");
-
- var isToggleTextButton:Boolean = element.classList.contains("toggleTextButton");
- // Need to toggle if we have the class and it's selected or we don't and it's not selected.
- if(isToggleTextButton == _selected)
- element.classList.toggle("toggleTextButton");
-
+ element.classList.toggle("selected");
+
}
}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/AccordionCollapseBead.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/AccordionCollapseBead.as
index 68a3a79..9993f7f 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/AccordionCollapseBead.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/AccordionCollapseBead.as
@@ -27,6 +27,7 @@
import org.apache.royale.html.beads.layouts.IOneFlexibleChildLayout;
import org.apache.royale.html.supportClasses.ICollapsible;
import org.apache.royale.utils.loadBeadFromValuesManager;
+ import org.apache.royale.html.beads.IListView;
public class AccordionCollapseBead implements IAccordionCollapseBead
{
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/AlertView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/AlertView.as
index 82f7b33..e7de709 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/AlertView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/AlertView.as
@@ -18,6 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads
{
+ import org.apache.royale.html.beads.GroupView;
import org.apache.royale.core.BeadViewBase;
import org.apache.royale.core.IAlertModel;
import org.apache.royale.core.IBead;
@@ -46,6 +47,8 @@
import org.apache.royale.core.ValuesManager;
import org.apache.royale.utils.loadBeadFromValuesManager;
import org.apache.royale.core.IMeasurementBead;
+ import org.apache.royale.html.beads.IBackgroundBead;
+ import org.apache.royale.html.beads.IBorderBead;
}
/**
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/BackgroundImageBead.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/BackgroundImageBead.as
index ea9d827..da1108c 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/BackgroundImageBead.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/BackgroundImageBead.as
@@ -30,6 +30,8 @@
import org.apache.royale.core.IStrand;
import org.apache.royale.core.UIBase;
import org.apache.royale.core.ValuesManager;
+
+ import org.apache.royale.html.beads.IBackgroundBead;
/**
* The BackgroundImageBead is used to render an image as the background to any component
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/ComboBoxView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/ComboBoxView.as
index a0bfe3f..4b983fe 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/ComboBoxView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/ComboBoxView.as
@@ -35,6 +35,7 @@
import org.apache.royale.core.IPopUpHost;
import org.apache.royale.geom.Point;
import org.apache.royale.html.beads.IComboBoxView;
+ import org.apache.royale.html.util.getLabelFromData;
/**
* The ComboBoxView class creates the visual elements of the org.apache.royale.html.ComboBox
@@ -107,6 +108,8 @@
/**
* @private
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ * @royaleignorecoercion org.apache.royale.core.UIBase
*/
override public function set strand(value:IStrand):void
{
@@ -118,11 +121,22 @@
input.className = "ComboBoxTextInput";
button = new TextButton();
- button.className = "opt_org-apache-royale-html-ComboBox_Button";
+ button.style = {
+ "padding": 0,
+ "margin": 0
+ };
button.text = '\u25BC';
if (isNaN(host.width)) input.width = 100;
+ COMPILE::JS
+ {
+ // inner components are absolutely positioned so we want to make sure the host is the offset parent
+ if (!host.element.style.position)
+ {
+ host.element.style.position = "relative";
+ }
+ }
host.addElement(input);
host.addElement(button);
@@ -137,8 +151,8 @@
IEventDispatcher(_strand).addEventListener("sizeChanged", handleSizeChange);
// set initial value and positions using default sizes
- handleItemChange(null);
- handleSizeChange(null);
+ itemChangeAction();
+ sizeChangeAction();
}
/**
@@ -156,6 +170,10 @@
if (list) return list.visible;
else return false;
}
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IComboBoxModel
+ * @royaleignorecoercion org.apache.royale.core.IUIBase
+ */
public function set popUpVisible(value:Boolean):void
{
if (value && !list.visible) {
@@ -185,7 +203,34 @@
/**
* @private
*/
- private function handleSizeChange(event:Event):void
+ protected function handleSizeChange(event:Event):void
+ {
+ sizeChangeAction();
+ }
+
+ /**
+ * @private
+ */
+ protected function handleItemChange(event:Event):void
+ {
+ itemChangeAction();
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.core.IComboBoxModel
+ */
+ protected function itemChangeAction():void
+ {
+ var model:IComboBoxModel = _strand.getBeadByType(IComboBoxModel) as IComboBoxModel;
+ input.text = getLabelFromData(model,model.selectedItem);
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ protected function sizeChangeAction():void
{
var host:UIBase = UIBase(_strand);
@@ -214,14 +259,5 @@
host.width = input.width + button.width;
}
}
-
- /**
- * @private
- */
- private function handleItemChange(event:Event):void
- {
- var model:IComboBoxModel = _strand.getBeadByType(IComboBoxModel) as IComboBoxModel;
- input.text = model.selectedItem as String;
- }
}
}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/ContainerView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/ContainerView.as
index 84c40e1..fae6a90 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/ContainerView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/ContainerView.as
@@ -18,21 +18,14 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads
{
- import org.apache.royale.core.BeadViewBase;
+ import org.apache.royale.html.beads.GroupView;
import org.apache.royale.core.ContainerBase;
import org.apache.royale.core.IBead;
- import org.apache.royale.core.IBeadLayout;
- import org.apache.royale.core.IBeadView;
- import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
- import org.apache.royale.core.IChild;
+ import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
import org.apache.royale.core.IContainer;
- import org.apache.royale.core.IContainerView;
- import org.apache.royale.core.IContentViewHost;
import org.apache.royale.core.ILayoutChild;
- import org.apache.royale.core.ILayoutHost;
import org.apache.royale.core.ILayoutView;
import org.apache.royale.core.IParent;
- import org.apache.royale.core.IParentIUIBase;
import org.apache.royale.core.IStrand;
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.IViewport;
@@ -41,13 +34,9 @@
import org.apache.royale.core.ValuesManager;
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.events.Event;
- import org.apache.royale.events.IEventDispatcher;
- import org.apache.royale.geom.Rectangle;
import org.apache.royale.geom.Size;
- import org.apache.royale.html.Container;
import org.apache.royale.html.beads.models.ViewportModel;
import org.apache.royale.html.supportClasses.Border;
- import org.apache.royale.html.supportClasses.ContainerContentArea;
import org.apache.royale.html.supportClasses.Viewport;
import org.apache.royale.utils.loadBeadFromValuesManager;
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DataContainerView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DataContainerView.as
index 2ea13b8..3641ad8 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DataContainerView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DataContainerView.as
@@ -18,8 +18,6 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads
{
- import org.apache.royale.core.BeadViewBase;
- import org.apache.royale.core.ContainerBase;
import org.apache.royale.core.IBead;
import org.apache.royale.core.IBeadLayout;
import org.apache.royale.core.IBeadModel;
@@ -31,12 +29,8 @@
import org.apache.royale.core.IItemRendererClassFactory;
import org.apache.royale.core.IItemRendererParent;
import org.apache.royale.core.IParent;
- import org.apache.royale.core.IParentIUIBase;
- import org.apache.royale.core.ISelectableItemRenderer;
- import org.apache.royale.core.ISelectionModel;
import org.apache.royale.core.IStrand;
import org.apache.royale.core.IUIBase;
- import org.apache.royale.core.LayoutBase;
import org.apache.royale.core.Strand;
import org.apache.royale.core.UIBase;
import org.apache.royale.core.ValuesManager;
@@ -46,6 +40,8 @@
import org.apache.royale.events.ItemRemovedEvent;
import org.apache.royale.html.supportClasses.Border;
import org.apache.royale.html.supportClasses.DataGroup;
+ import org.apache.royale.html.beads.IListView;
+ import org.apache.royale.events.Event;
import org.apache.royale.html.supportClasses.DataItemRenderer;
import org.apache.royale.utils.loadBeadFromValuesManager;
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DataGridListArea.as
similarity index 69%
copy from frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
copy to frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DataGridListArea.as
index 7935bcf..80e810b 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DataGridListArea.as
@@ -4,7 +4,7 @@
// 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 "Licens"); 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
@@ -18,18 +18,17 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads
{
- import org.apache.royale.core.IBead;
-
- /**
- * The IBackgroundBead interface is a marker interface for beads
- * that draw backgrounds.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public interface IBorderBead extends IBead
- {
- }
-}
+ import org.apache.royale.html.Container
+ public class DataGridListArea extends Container
+ {
+ public function DataGridListArea()
+ {
+ super();
+ COMPILE::JS
+ {
+ typeNames = 'Container DataGridListArea';
+ }
+
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DataGridView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DataGridView.as
index 462159c..89689f0 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DataGridView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DataGridView.as
@@ -18,6 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads
{
+ import org.apache.royale.html.beads.GroupView;
import org.apache.royale.core.IBead;
import org.apache.royale.core.IBeadModel;
import org.apache.royale.core.IBeadView;
@@ -27,12 +28,13 @@
import org.apache.royale.core.IDataGridPresentationModel;
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.debugging.assert;
import org.apache.royale.events.Event;
import org.apache.royale.events.IEventDispatcher;
import org.apache.royale.html.Container;
import org.apache.royale.html.DataGridButtonBar;
import org.apache.royale.html.beads.layouts.ButtonBarLayout;
- import org.apache.royale.html.supportClasses.DataGridColumnList;
+ import org.apache.royale.html.supportClasses.IDataGridColumnList;
import org.apache.royale.html.supportClasses.IDataGridColumn;
import org.apache.royale.html.supportClasses.Viewport;
@@ -122,9 +124,8 @@
_header.labelField = "label";
sharedModel.headerModel = _header.model as IBeadModel;
- _listArea = new Container();
+ _listArea = new DataGridListArea();
_listArea.percentWidth = 100;
- _listArea.className = "opt_org-apache-royale-html-DataGrid_ListArea";
createLists();
@@ -163,7 +164,7 @@
/**
* @private
* @royaleignorecoercion org.apache.royale.core.IDataGridModel
- * @royaleignorecoercion org.apache.royale.html.supportClasses.DataGridColumnList
+ * @royaleignorecoercion org.apache.royale.html.supportClasses.IDataGridColumnList
*/
private function handleSelectedIndexChanged(event:Event):void
{
@@ -172,7 +173,7 @@
for (var i:int=0; i < _lists.length; i++)
{
- var list:DataGridColumnList = _lists[i] as DataGridColumnList;
+ var list:IDataGridColumnList = _lists[i] as IDataGridColumnList;
list.selectedIndex = newIndex;
}
}
@@ -180,17 +181,17 @@
/**
* @private
* @royaleignorecoercion org.apache.royale.core.IDataGridModel
- * @royaleignorecoercion org.apache.royale.html.supportClasses.DataGridColumnList
+ * @royaleignorecoercion org.apache.royale.html.supportClasses.IDataGridColumnList
*/
private function handleColumnListChange(event:Event):void
{
var sharedModel:IDataGridModel = _strand.getBeadByType(IBeadModel) as IDataGridModel;
- var list:DataGridColumnList = event.target as DataGridColumnList;
+ var list:IDataGridColumnList = event.target as IDataGridColumnList;
sharedModel.selectedIndex = list.selectedIndex;
for(var i:int=0; i < _lists.length; i++) {
if (list != _lists[i]) {
- var otherList:DataGridColumnList = _lists[i] as DataGridColumnList;
+ var otherList:IDataGridColumnList = _lists[i] as IDataGridColumnList;
otherList.selectedIndex = list.selectedIndex;
}
}
@@ -201,6 +202,7 @@
/**
* @private
* @royaleignorecoercion String
+ * @royaleignorecoercion Class
* @royaleignorecoercion org.apache.royale.core.IDataGridModel
* @royaleignorecoercion org.apache.royale.core.IBead
* @royaleignorecoercion org.apache.royale.core.IChild
@@ -213,10 +215,8 @@
var host:IDataGrid = _strand as IDataGrid;
// get the name of the class to use for the columns
- var columnClassName:String = ValuesManager.valuesImpl.getValue(host, "columnClassName") as String;
- if (columnClassName == null) {
- columnClassName = "DataGridColumnList";
- }
+ var columnClass:Class = ValuesManager.valuesImpl.getValue(host, "columnClass") as Class;
+ assert(columnClass != null,"ColumnClass for DataGrid must be set!")
var sharedModel:IDataGridModel = host.model as IDataGridModel;
var presentationModel:IDataGridPresentationModel = host.presentationModel as IDataGridPresentationModel;
@@ -226,22 +226,20 @@
for (var i:int=0; i < sharedModel.columns.length; i++)
{
var dataGridColumn:IDataGridColumn = sharedModel.columns[i] as IDataGridColumn;
- var useClassName:String = columnClassName;
- if (dataGridColumn.className != null) useClassName = dataGridColumn.className;
- var list:DataGridColumnList = new DataGridColumnList();
+ var list:IDataGridColumnList = new columnClass();
if (i == 0)
{
- list.className = "first "+useClassName;
+ list.className = "first";
}
else if (i == sharedModel.columns.length-1)
{
- list.className = "last "+useClassName;
+ list.className = "last";
}
else
{
- list.className = "middle "+useClassName;
+ list.className = "middle";
}
list.id = "dataGridColumn" + i;
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DataItemRendererFactoryForCollectionView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DataItemRendererFactoryForCollectionView.as
index 5246fed..ca360d6 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DataItemRendererFactoryForCollectionView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DataItemRendererFactoryForCollectionView.as
@@ -38,6 +38,7 @@
import org.apache.royale.html.supportClasses.StringItemRenderer;
import org.apache.royale.html.supportClasses.UIItemRendererBase;
import org.apache.royale.utils.loadBeadFromValuesManager;
+ import org.apache.royale.html.beads.IListView;
/**
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DateChooserView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DateChooserView.as
index ba9c912..e8cd4ea 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DateChooserView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DateChooserView.as
@@ -34,6 +34,7 @@
import org.apache.royale.html.TextButton;
import org.apache.royale.html.beads.GroupView;
import org.apache.royale.html.beads.layouts.HorizontalLayout;
+ import org.apache.royale.html.beads.layouts.HorizontalFlexLayout;
import org.apache.royale.html.beads.layouts.TileLayout;
import org.apache.royale.html.beads.models.DateChooserModel;
import org.apache.royale.html.supportClasses.DateHeaderButton;
@@ -134,9 +135,9 @@
// HEADER BUTTONS
monthButtonsContainer = new Group();
+ monthButtonsContainer.addBead(new HorizontalFlexLayout());
monthButtonsContainer.height = controlHeight;
monthButtonsContainer.id = "dateChooserMonthButtons";
- monthButtonsContainer.className = "opt_org-apache-royale-html-DateChooser_MonthButtons";
monthButtonsContainer.style = new SimpleCSSStylesWithFlex();
monthButtonsContainer.style.flexGrow = 0;
COMPILE::JS {
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DateFieldView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DateFieldView.as
index 069df0c..6c0016e 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DateFieldView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DateFieldView.as
@@ -187,10 +187,19 @@
{
return _popUpVisible;
}
+ private var _showingPopup:Boolean;
public function set popUpVisible(value:Boolean):void
{
+ // prevent resursive calls
+ // setting _popUp.selectedDate below triggers a change event
+ // which tries to close the popup causing a recursive call.
+ // There might be a better way to resolve this problem, but this works for now...
+ if(_showingPopup)
+ return;
+
if (value != _popUpVisible)
{
+ _showingPopup = true;
_popUpVisible = value;
if (value)
{
@@ -219,6 +228,7 @@
UIUtils.removePopUp(_popUp);
}
}
+ _showingPopup = false;
}
/**
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DropDownListView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DropDownListView.as
index 2bd0b16..f446466 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DropDownListView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/DropDownListView.as
@@ -38,6 +38,7 @@
import org.apache.royale.events.IEventDispatcher;
import org.apache.royale.utils.SolidBorderUtil;
import org.apache.royale.utils.UIUtils;
+ import org.apache.royale.html.beads.IDropDownListView;
/**
* The DropDownListView class is the default view for
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/GroupView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/GroupView.as
index ea47e0d..ea81695 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/GroupView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/GroupView.as
@@ -19,8 +19,6 @@
package org.apache.royale.html.beads
{
import org.apache.royale.core.BeadViewBase;
- import org.apache.royale.core.IBead;
- import org.apache.royale.core.IBeadLayout;
import org.apache.royale.core.IBeadView;
import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
import org.apache.royale.core.ILayoutChild;
@@ -32,12 +30,10 @@
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.utils.loadBeadFromValuesManager;
COMPILE::SWF {
import org.apache.royale.geom.Size;
- import org.apache.royale.geom.Rectangle;
}
/**
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/HideComboPopupOnMouseDownBead.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/HideComboPopupOnMouseDownBead.as
new file mode 100644
index 0000000..fba3946
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/HideComboPopupOnMouseDownBead.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.html.beads
+{
+ import org.apache.royale.utils.callLater;
+ import org.apache.royale.utils.loadBeadFromValuesManager;
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.html.beads.IComboBoxView;
+
+ /**
+ * The HideComboPopupOnMouseDownBead can be used with ComboBox to make sure mouse down events
+ * close an open popup. For this bead to work the application needs to be sized to the
+ * window size. See org.apache.royale.core.BrowserResizeListener for a way to achieve this.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 9.3
+ */
+ public class HideComboPopupOnMouseDownBead implements IBead
+ {
+ public function HideComboPopupOnMouseDownBead()
+ {
+ }
+
+ private var _strand:IStrand;
+
+ protected var viewBead:IComboBoxView;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ * @royaleignorecoercion HTMLInputElement
+ * @royaleignorecoercion org.apache.royale.core.UIBase;
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ viewBead = _strand.getBeadByType(IComboBoxView) as IComboBoxView;
+ if (viewBead) {
+ finishSetup(null);
+ } else {
+ IEventDispatcher(_strand).addEventListener("viewChanged", finishSetup);
+ }
+ }
+
+ protected function finishSetup(event:Event):void
+ {
+ if (viewBead == null) {
+ viewBead = loadBeadFromValuesManager(IComboBoxView, "iBeadView", _strand) as IComboBoxView;
+ }
+ IEventDispatcher(viewBead.popUp).addEventListener("show", handlePopupShow);
+ IEventDispatcher(viewBead.popUp).addEventListener("hide", handlePopupHide);
+ }
+
+ protected function handleControlMouseDown(event:MouseEvent):void
+ {
+ event.stopImmediatePropagation();
+ }
+
+ protected function handlePopupShow(event:Event):void
+ {
+ IEventDispatcher(viewBead.popUp).addEventListener(MouseEvent.MOUSE_DOWN, handleControlMouseDown);
+ IEventDispatcher(_strand).addEventListener(MouseEvent.MOUSE_DOWN, handleControlMouseDown);
+ callLater(function():void {
+ IUIBase(viewBead.popUp).topMostEventDispatcher.addEventListener(MouseEvent.MOUSE_DOWN, handleTopMostEventDispatcherMouseDown);
+ });
+ }
+
+ protected function handleTopMostEventDispatcherMouseDown(event:MouseEvent):void
+ {
+ viewBead.popUpVisible = false;
+ }
+
+ protected function handlePopupHide(event:Event):void
+ {
+ IEventDispatcher(viewBead.popUp).removeEventListener(MouseEvent.MOUSE_DOWN, handleControlMouseDown);
+ IEventDispatcher(_strand).removeEventListener(MouseEvent.MOUSE_DOWN, handleControlMouseDown);
+ IUIBase(viewBead.popUp).topMostEventDispatcher.removeEventListener(MouseEvent.MOUSE_DOWN, handleTopMostEventDispatcherMouseDown);
+ }
+ }
+}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/ListView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/ListView.as
index 8ff7ad2..5fd34f4 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/ListView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/ListView.as
@@ -18,6 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads
{
+ import org.apache.royale.html.beads.DataContainerView;
import org.apache.royale.core.BeadViewBase;
import org.apache.royale.core.ContainerBase;
import org.apache.royale.core.IBead;
@@ -38,7 +39,6 @@
import org.apache.royale.core.ValuesManager;
import org.apache.royale.events.Event;
import org.apache.royale.events.IEventDispatcher;
- import org.apache.royale.html.beads.models.ArraySelectionModel;
import org.apache.royale.html.supportClasses.Border;
import org.apache.royale.html.supportClasses.DataGroup;
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/MultilineTextFieldView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/MultilineTextFieldView.as
index 32e59e3..8b7458d 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/MultilineTextFieldView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/MultilineTextFieldView.as
@@ -18,6 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads
{
+ import org.apache.royale.html.beads.TextFieldViewBase;
import flash.text.TextFieldType;
/**
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SimpleAlertView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SimpleAlertView.as
index abd66b3..1de8ce8 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SimpleAlertView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SimpleAlertView.as
@@ -37,6 +37,8 @@
import org.apache.royale.html.Label;
import org.apache.royale.html.TextButton;
import org.apache.royale.utils.loadBeadFromValuesManager;
+ import org.apache.royale.html.beads.IBackgroundBead;
+ import org.apache.royale.html.beads.IBorderBead;
/**
* The SimpleAlertView class creates the visual elements of the
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SingleLineBorderBead.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SingleLineBorderBead.as
index f239d73..0cbf233 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SingleLineBorderBead.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SingleLineBorderBead.as
@@ -29,6 +29,7 @@
import org.apache.royale.events.Event;
import org.apache.royale.events.IEventDispatcher;
import org.apache.royale.utils.CSSBorderUtils;
+ import org.apache.royale.html.beads.IBorderBead;
/**
* The SingleLineBorderBead class draws a single line solid border.
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SliderView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SliderView.as
index 070fa2a..e5765ef 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SliderView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SliderView.as
@@ -100,10 +100,12 @@
COMPILE::JS {
_track = new Button();
_track.className = "SliderTrack";
+ _track.style = {"position": "absolute", "padding" : 0};
host.addElement(_track);
_thumb = new TextButton();
_thumb.className = "SliderThumb";
+ _thumb.style = {"position" : "absolute", "padding" : 0};
_thumb.text = '\u29BF';
host.addElement(_thumb);
}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SolidBackgroundBead.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SolidBackgroundBead.as
index 0bbd1c0..e7130cd 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SolidBackgroundBead.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SolidBackgroundBead.as
@@ -30,6 +30,9 @@
import org.apache.royale.events.Event;
import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.html.beads.IBackgroundBead;
+
+
/**
* The SolidBackgroundBead class draws a solid filled background.
* The color and opacity can be specified in CSS.
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SpinnerView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SpinnerView.as
index 52085c5..83b5bd3 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SpinnerView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/SpinnerView.as
@@ -110,6 +110,8 @@
IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler);
COMPILE::JS {
var host:UIBase = value as UIBase;
+ // depending on the surrounding layout, the element can be offset without this.
+ host.element.style.position = "absolute";
_increment = new SpinnerButton();
_increment.text = '\u25B2';
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/StyleInheritanceBead.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/StyleInheritanceBead.as
new file mode 100644
index 0000000..44ac72c
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/StyleInheritanceBead.as
@@ -0,0 +1,120 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.html.beads
+{
+ import org.apache.royale.core.IRenderedObject;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IBead;
+ COMPILE::JS {
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ /**
+ * The StyleInheritanceBead class forces descendadants of an IStylableObject to inherit a style
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 9.3
+ */
+ public class StyleInheritanceBead implements IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 9.3
+ */
+ public function StyleInheritanceBead()
+ {
+ }
+
+ private var _styleName:String;
+ private var _strand:IStrand;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 9.3
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ COMPILE::JS
+ {
+ (value as IEventDispatcher).addEventListener('initComplete', initCompleteHandler);
+ }
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ protected function get hostElement():WrappedHTMLElement
+ {
+ return (_strand as IRenderedObject).element;
+ }
+
+ COMPILE::JS
+ protected function initCompleteHandler(e:Event):void
+ {
+ forceInheritanceOnDescendants();
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ private function forceInheritanceOnDescendants():void
+ {
+ var elements:NodeList = hostElement.querySelectorAll("*");
+ for (var i:int = 0; i < elements.length; i++)
+ {
+ var htmlElement:WrappedHTMLElement = elements[i] as WrappedHTMLElement;
+ if (htmlElement)
+ {
+ htmlElement.style[styleName] = "inherit";
+ }
+ }
+ }
+
+ /**
+ * The name of the style that is to be inherited.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 9.3
+ */
+ public function get styleName():String
+ {
+ return _styleName;
+ }
+
+ public function set styleName(value:String):void
+ {
+ _styleName = value;
+ }
+ }
+}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/StyleInheritanceWithObserverBead.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/StyleInheritanceWithObserverBead.as
new file mode 100644
index 0000000..6328e86
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/StyleInheritanceWithObserverBead.as
@@ -0,0 +1,86 @@
+///////////////////////////////////////////////////////////////////////////////
+//
+// 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.html.beads
+{
+ import org.apache.royale.core.IStrand;
+ COMPILE::JS {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ /**
+ * The StyleInheritanceWithObserverBead extends StyleInheritace and makes
+ * sure that new descendants inherit as well.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 9.3
+ */
+ public class StyleInheritanceWithObserverBead extends StyleInheritanceBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 9.3
+ */
+ public function StyleInheritanceWithObserverBead()
+ {
+ super();
+ }
+
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 9.3
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ COMPILE::JS {
+ var observer:MutationObserver = new MutationObserver(mutationDetected);
+ observer.observe(hostElement, {'childList': true, 'subtree': true});
+ }
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ private function mutationDetected(mutationsList:Array):void
+ {
+ for (var j:int = 0; j < mutationsList.length; j++)
+ {
+ var mutationRecord:MutationRecord = mutationsList[j] as MutationRecord;
+ var addedElements:NodeList = mutationRecord.addedNodes as NodeList;
+ for (var i:int = 0; i < addedElements.length; i++)
+ {
+ var addedElement:WrappedHTMLElement = addedElements[i] as WrappedHTMLElement;
+ addedElement.style[styleName] = 'inherit';
+ }
+ }
+ }
+
+ }
+}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TableCellView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TableCellView.as
index 54a8396..d4784f4 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TableCellView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TableCellView.as
@@ -18,7 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads
{
-
+ import org.apache.royale.html.beads.GroupView;
/**
* The TableCellView class is the view bead for TableCell. It has no function
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TextAreaView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TextAreaView.as
index c084d13..bb239e5 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TextAreaView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TextAreaView.as
@@ -18,6 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads
{
+ import org.apache.royale.html.beads.TextFieldViewBase;
import flash.display.DisplayObject;
import flash.events.Event;
import flash.events.IEventDispatcher;
@@ -29,9 +30,9 @@
import org.apache.royale.core.IStrand;
import org.apache.royale.core.IParent;
import org.apache.royale.core.ValuesManager;
- import org.apache.royale.html.beads.models.ScrollBarModel;
import org.apache.royale.html.supportClasses.Border;
import org.apache.royale.html.supportClasses.VScrollBar;
+ import org.apache.royale.html.beads.models.ScrollBarModel;
/**
* The TextAreaView class is the default view for
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TextFieldView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TextFieldView.as
index 43660b2..a8730b9 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TextFieldView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TextFieldView.as
@@ -18,6 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads
{
+ import org.apache.royale.html.beads.TextFieldViewBase;
import flash.text.TextFieldType;
/**
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TextFieldViewBase.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TextFieldViewBase.as
index 4db911b..7712589 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TextFieldViewBase.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TextFieldViewBase.as
@@ -42,6 +42,7 @@
* @playerversion AIR 2.6
* @productversion Royale 0.0
*/
+ COMPILE::SWF
public class TextFieldViewBase implements IBeadView, ITextFieldView
{
/**
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TextInputView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TextInputView.as
index 0e52879..95350ec 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TextInputView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TextInputView.as
@@ -17,6 +17,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads
{
+ import org.apache.royale.html.beads.TextFieldViewBase;
import flash.display.DisplayObject;
import flash.text.TextFieldType;
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TitleBarTitle.as
similarity index 70%
copy from frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
copy to frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TitleBarTitle.as
index 7935bcf..068535a 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TitleBarTitle.as
@@ -4,7 +4,7 @@
// 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 "Licens"); 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
@@ -18,18 +18,18 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads
{
- import org.apache.royale.core.IBead;
+ import org.apache.royale.html.Label
/**
- * The IBackgroundBead interface is a marker interface for beads
- * that draw backgrounds.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * A specially styled Label used in TitleBar
*/
- public interface IBorderBead extends IBead
- {
- }
-}
+ public class TitleBarTitle extends Label
+ {
+ public function TitleBarTitle()
+ {
+ super();
+ typeNames += " TitleBarTitle";
+
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TitleBarView.mxml b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TitleBarView.mxml
index d4e399e..17b4399 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TitleBarView.mxml
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TitleBarView.mxml
@@ -26,7 +26,7 @@
@productversion Royale 0.0
-->
<js:MXMLBeadView xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:js="library://ns.apache.org/royale/basic">
+ xmlns:js="library://ns.apache.org/royale/basic">
<fx:Script>
<![CDATA[
@@ -47,11 +47,7 @@
<js:LayoutChangeNotifier watchedProperty="{titleLabel.text}" />
</js:beads>
- <js:Label id="titleLabel" text="{ITitleBarModel(model).title}" className="TitleBarTitle" >
- <js:style>
- <js:SimpleCSSStyles fontWeight="inherit" marginRight="5" marginLeft="5" />
- </js:style>
- </js:Label>
+ <js:TitleBarTitle id="titleLabel" text="{ITitleBarModel(model).title}"/>
<js:CloseButton id="closeButton" click="clickHandler()" className="TitleBarCloseButton"
visible="{ITitleBarModel(model).showCloseButton}"/>
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TreeGridListArea.as
similarity index 69%
copy from frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
copy to frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TreeGridListArea.as
index 7935bcf..8c24e27 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TreeGridListArea.as
@@ -4,7 +4,7 @@
// 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 "Licens"); 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
@@ -18,18 +18,18 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads
{
- import org.apache.royale.core.IBead;
+ import org.apache.royale.html.Container;
+
+ public class TreeGridListArea extends Container
+ {
+ public function TreeGridListArea()
+ {
+ super();
+ COMPILE::JS
+ {
+ typeNames = 'Container TreeGridListArea';
+ }
- /**
- * The IBackgroundBead interface is a marker interface for beads
- * that draw backgrounds.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public interface IBorderBead extends IBead
- {
- }
-}
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TreeGridView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TreeGridView.as
index 757d04b..1a5bb4c 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TreeGridView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/TreeGridView.as
@@ -23,11 +23,12 @@
import org.apache.royale.core.IBeadView;
import org.apache.royale.core.IDataGridModel;
import org.apache.royale.core.IDataGridPresentationModel;
- import org.apache.royale.core.ISelectionModel;
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.html.beads.GroupView;
+ import org.apache.royale.html.supportClasses.Viewport;
import org.apache.royale.events.Event;
import org.apache.royale.events.IEventDispatcher;
import org.apache.royale.html.Container;
@@ -40,10 +41,7 @@
import org.apache.royale.html.beads.layouts.TreeGridLayout;
import org.apache.royale.html.beads.models.ButtonBarModel;
import org.apache.royale.html.beads.models.SingleSelectionCollectionViewModel;
- import org.apache.royale.html.supportClasses.DataGridColumn;
import org.apache.royale.html.supportClasses.IDataGridColumn;
- import org.apache.royale.html.supportClasses.TreeGridColumn;
- import org.apache.royale.html.supportClasses.Viewport;
/**
* The TreeGridView class is responsible for creating the sub-components of the TreeGrid:
@@ -109,6 +107,9 @@
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.0
+ * @royaleignorecoercion Class
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ * @royaleignorecoercion org.apache.royale.core.IBeadLayout
*/
override public function set strand(value:IStrand):void
{
@@ -136,6 +137,11 @@
/**
* @private
+ * @royaleignorecoercion org.apache.royale.core.IBeadModel
+ * @royaleignorecoercion org.apache.royale.core.IDataGridModel
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ * @royaleignorecoercion org.apache.royale.html.supportClasses.IDataGridColumn
+ * @royaleignorecoercion org.apache.royale.html.TreeGrid
* @royaleignorecoercion org.apache.royale.core.IDataGridPresentationModel
*/
protected function finishSetup(event:Event):void
@@ -155,9 +161,8 @@
_header.labelField = "label";
sharedModel.headerModel = _header.model as IBeadModel;
- _listArea = new Container();
+ _listArea = new TreeGridListArea();
_listArea.percentWidth = 100;
- _listArea.className = "opt_org-apache-royale-html-TreeGrid_ListArea";
createColumns();
@@ -169,7 +174,7 @@
}
for(var i:int=0; i < sharedModel.columns.length; i++) {
- var dgc:DataGridColumn = sharedModel.columns[i] as DataGridColumn;
+ var dgc:IDataGridColumn = sharedModel.columns[i] as IDataGridColumn;
var colWidth:Number = dgc.columnWidth - marginBorderOffset;
buttonWidths.push(colWidth);
@@ -216,6 +221,7 @@
/**
* @private
+ * @royaleignorecoercion org.apache.royale.core.IDataGridModel
*/
private function handleSelectedIndexChanged(event:Event):void
{
@@ -231,6 +237,7 @@
/**
* @private
+ * @royaleignorecoercion org.apache.royale.core.IDataGridModel
*/
private function handleColumnListChange(event:Event):void
{
@@ -249,18 +256,15 @@
/**
* @private
+ * @royaleignorecoercion Class
+ * @royaleignorecoercion org.apache.royale.core.IDataGridModel
+ * @royaleignorecoercion org.apache.royale.html.supportClasses.IDataGridColumn
* @royaleignorecoercion org.apache.royale.core.IDataGridPresentationModel
*/
private function createColumns():void
{
var host:TreeGrid = _strand as TreeGrid;
-
- // get the name of the class to use for the columns
- var columnClassName:String = ValuesManager.valuesImpl.getValue(host, "columnClassName") as String;
- if (columnClassName == null) {
- columnClassName = "TreeGridColumn";
- }
-
+
var presentationModel:IDataGridPresentationModel = host.presentationModel as IDataGridPresentationModel;
var sharedModel:IDataGridModel = host.model as IDataGridModel;
@@ -268,23 +272,19 @@
for (var i:int=0; i < sharedModel.columns.length; i++) {
var columnDef:IDataGridColumn = sharedModel.columns[i] as IDataGridColumn;
- var useClassName:String = columnClassName;
- if (columnDef.className != null) useClassName = columnDef.className;
+ var columnClassName:String = columnDef.className;
+ var useClassName:String = columnClassName ? " " + columnClassName : "";
var column:List = columnDef.createColumn() as List;
if (i == 0)
- {
- column.className = "first "+useClassName;
- }
+ column.className = "first" + useClassName;
+
else if (i == sharedModel.columns.length-1)
- {
- column.className = "last "+useClassName;
- }
+ column.className = "last" + useClassName;
+
else
- {
- column.className = "middle "+useClassName;
- }
+ column.className = "middle" + useClassName;
// For the TreeGrid, the List columns must use this
// model and itemRenderer factory to be compatible
@@ -293,7 +293,7 @@
column.model = new SingleSelectionCollectionViewModel();
column.addBead(new DataItemRendererFactoryForCollectionView());
}
-
+
column.id = "treeGridColumn" + String(i);
column.dataProvider = sharedModel.dataProvider;
column.labelField = columnDef.dataField;
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/UnselectableElementBead.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/UnselectableElementBead.as
index 6697472..c80c907 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/UnselectableElementBead.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/UnselectableElementBead.as
@@ -34,6 +34,27 @@
public class UnselectableElementBead implements IBead
{
/**
+ * @royaleignorecoercion HTMLStyleElement
+ */
+ private static function insertRule():void
+ {
+ // only do this once...
+ if(ruleInserted)
+ return;
+ ruleInserted = true;
+ // Inject a new css selector
+ COMPILE::JS
+ {
+ var style:HTMLStyleElement = document.createElement('style') as HTMLStyleElement;
+ style.type = 'text/css';
+ style.innerHTML = '.unselectable {-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;}';
+ document.getElementsByTagName('head')[0].appendChild(style);
+ }
+
+ }
+ private static var ruleInserted:Boolean;
+
+ /**
* constructor.
*
* @langversion 3.0
@@ -57,6 +78,7 @@
*/
public function set strand(value:IStrand):void
{
+ insertRule();
_strand = value;
COMPILE::JS
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/VerticalAlignChildren.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/VerticalAlignChildren.as
new file mode 100644
index 0000000..c3cb5d7
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/VerticalAlignChildren.as
@@ -0,0 +1,109 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 "Licens"); 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.html.beads
+{
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.events.ValueEvent;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IParent;
+
+ /**
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ *
+ * VerticalAlignChildren is a bead for groups and containers which specifiy the alignment property of the children.
+ * Alignment can be any of the valid css properties for vertical-align
+ * see https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
+ */
+ public class VerticalAlignChildren implements IBead
+ {
+ public function VerticalAlignChildren()
+ {
+
+ }
+ 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.3
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ (_strand as IEventDispatcher).addEventListener("childrenAdded",setAlignment);
+ }
+ private var _alignment:String;
+
+ /**
+ * The alignment of the children
+ * Alignment can be any of the valid css properties for vertical-align
+ * see https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ public function get alignment():String
+ {
+ return _alignment;
+ }
+
+ public function set alignment(value:String):void
+ {
+ _alignment = value;
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IUIBase
+ * @royaleignorecoercion org.apache.royale.core.IParent
+ */
+ private function setAlignment(ev:ValueEvent):void{
+ if(_alignment)
+ {
+ if(ev && ev.value){
+ COMPILE::JS
+ {
+ (ev.value as IUIBase).element.style.verticalAlign = _alignment;
+ }
+ } else {
+ COMPILE::JS
+ {
+ var host:IParent = _strand as IParent;
+ var len:int = host.numElements;
+ for(var i:int = 0; i<len;i++)
+ {
+ host.getElementAt(i).element.style.verticalAlign = _alignment;
+ }
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/VirtualDataContainerView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/VirtualDataContainerView.as
index 0cb7bed..7e6d17e 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/VirtualDataContainerView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/VirtualDataContainerView.as
@@ -18,6 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads
{
+ import org.apache.royale.html.beads.ContainerView;
import org.apache.royale.core.BeadViewBase;
import org.apache.royale.core.ContainerBase;
import org.apache.royale.core.IBead;
@@ -41,6 +42,7 @@
import org.apache.royale.events.IEventDispatcher;
import org.apache.royale.html.supportClasses.Border;
import org.apache.royale.html.supportClasses.DataGroup;
+ import org.apache.royale.html.beads.IListView;
/**
* The DataContainerView provides the visual elements for the DataContainer.
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/VirtualListView.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/VirtualListView.as
index fcf2dbb..da97038 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/VirtualListView.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/VirtualListView.as
@@ -38,7 +38,6 @@
import org.apache.royale.core.ValuesManager;
import org.apache.royale.events.Event;
import org.apache.royale.events.IEventDispatcher;
- import org.apache.royale.html.beads.models.ArraySelectionModel;
import org.apache.royale.html.supportClasses.Border;
import org.apache.royale.html.supportClasses.DataGroup;
COMPILE::SWF {
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/controllers/ComboBoxController.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/controllers/ComboBoxController.as
index 9f173f9..6327902 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/controllers/ComboBoxController.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/controllers/ComboBoxController.as
@@ -37,7 +37,7 @@
private var _strand:IStrand;
- private var viewBead:IComboBoxView;
+ protected var viewBead:IComboBoxView;
public function set strand(value:IStrand):void
{
@@ -51,7 +51,7 @@
}
}
- private function finishSetup(event:Event):void
+ protected function finishSetup(event:Event):void
{
if (viewBead == null) {
viewBead = _strand.getBeadByType(IComboBoxView) as IComboBoxView;
@@ -61,7 +61,7 @@
IEventDispatcher(viewBead.textInputField).addEventListener("click", handleButtonClick);
}
- private function handleButtonClick(event:MouseEvent):void
+ protected function handleButtonClick(event:MouseEvent):void
{
viewBead.popUpVisible = !viewBead.popUpVisible;
IEventDispatcher(viewBead.popUp).addEventListener("change", handleListChange);
@@ -69,10 +69,6 @@
private function handleListChange(event:Event):void
{
- var list:List = viewBead.popUp as List;
- var input:TextInput = viewBead.textInputField as TextInput;
- input.text = list.selectedItem as String;
-
viewBead.popUpVisible = false;
IEventDispatcher(_strand).dispatchEvent(new Event("change"));
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/controllers/ItemRendererMouseController.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/controllers/ItemRendererMouseController.as
index 0a8b6bd..6073264 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/controllers/ItemRendererMouseController.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/controllers/ItemRendererMouseController.as
@@ -91,7 +91,7 @@
goog.events.listen(element, goog.events.EventType.MOUSEOVER, this.handleMouseOver);
goog.events.listen(element, goog.events.EventType.MOUSEOUT, this.handleMouseOut);
goog.events.listen(element, goog.events.EventType.MOUSEDOWN, this.handleMouseDown);
- goog.events.listen(element, goog.events.EventType.MOUSEUP, this.handleMouseUp);
+ goog.events.listen(element, goog.events.EventType.CLICK, this.handleMouseUp);
}
}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/layouts/TreeGridLayout.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/layouts/TreeGridLayout.as
index 2de838f..bfa6fb2 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/layouts/TreeGridLayout.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/layouts/TreeGridLayout.as
@@ -34,6 +34,10 @@
import org.apache.royale.html.beads.models.TreeGridModel;
import org.apache.royale.html.supportClasses.IDataGridColumn;
import org.apache.royale.html.supportClasses.TreeGridColumn;
+ COMPILE::JS
+ {
+ import org.apache.royale.core.IRenderedObject;
+ }
/**
* The TreeGridLayout class provides the sizing and positioning for the sub-components
@@ -109,9 +113,19 @@
* @productversion Royale 0.9
* @royaleignorecoercion org.apache.royale.core.IBorderPaddingMarginValuesImpl
* @royaleignorecoercion org.apache.royale.core.IUIBase
+ * @royaleignorecoercion org.apache.royale.core.IRenderedObject
*/
public function layout():Boolean
{
+
+ COMPILE::JS
+ {
+ var renderedObject:IRenderedObject = IRenderedObject(host);
+ if (!renderedObject.element.style.position || renderedObject.element.style.position == 'static')
+ {
+ renderedObject.element.style.position = 'relative';
+ }
+ }
var model:TreeGridModel = uiHost.model as TreeGridModel;
var header:ButtonBar = (uiHost.view as TreeGridView).header as ButtonBar;
var contentArea:UIBase = (uiHost.view as TreeGridView).listArea;
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/layouts/VerticalLayout.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/layouts/VerticalLayout.as
index c121cf4..aa11d93 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/layouts/VerticalLayout.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/layouts/VerticalLayout.as
@@ -169,16 +169,18 @@
{
var child:WrappedHTMLElement = children[i] as WrappedHTMLElement;
if (child == null) continue;
- child.royale_wrapper.setDisplayStyleForLayout('block');
- if (child.style.display === 'none')
+ if(!child.royale_wrapper.displayStyleForLayout)
{
- 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';
+ if (!child.royale_wrapper.visible)
+ {
+ 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');
}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/ButtonBarModel.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/ButtonBarModel.as
index 235c17d..ec1a506 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/ButtonBarModel.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/ButtonBarModel.as
@@ -18,6 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads.models
{
+ import org.apache.royale.html.beads.models.ArraySelectionModel;
import org.apache.royale.core.IRollOverModel;
import org.apache.royale.core.ISelectionModel;
import org.apache.royale.core.IStrand;
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/ComboBoxModel.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/ComboBoxModel.as
index 2f8f50c..6a9ff58 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/ComboBoxModel.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/ComboBoxModel.as
@@ -18,6 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads.models
{
+ import org.apache.royale.html.beads.models.ArraySelectionModel;
import org.apache.royale.core.IBead;
import org.apache.royale.core.IComboBoxModel;
import org.apache.royale.events.Event;
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/DataGridCollectionViewModel.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/DataGridCollectionViewModel.as
index c615036..29119c1 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/DataGridCollectionViewModel.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/DataGridCollectionViewModel.as
@@ -18,6 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads.models
{
+ import org.apache.royale.html.beads.models.SingleSelectionCollectionViewModel;
import org.apache.royale.core.IBeadModel;
import org.apache.royale.core.IDataGridModel;
import org.apache.royale.events.Event;
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/DataGridModel.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/DataGridModel.as
index 9ce6797..0e19788 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/DataGridModel.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/DataGridModel.as
@@ -18,6 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads.models
{
+ import org.apache.royale.html.beads.models.ArraySelectionModel;
import org.apache.royale.core.IBeadModel;
import org.apache.royale.core.IDataGridModel;
import org.apache.royale.events.Event;
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/MenuBarModel.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/MenuBarModel.as
index cc58610..7a51450 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/MenuBarModel.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/MenuBarModel.as
@@ -14,6 +14,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads.models
{
+ import org.apache.royale.html.beads.models.ArraySelectionModel;
import org.apache.royale.events.Event;
/**
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/MenuModel.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/MenuModel.as
index e5f7b59..843288c 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/MenuModel.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/MenuModel.as
@@ -18,6 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads.models
{
+ import org.apache.royale.html.beads.models.ArraySelectionModel;
import org.apache.royale.core.IStrand;
/**
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/SingleSelectionCollectionViewModel.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/SingleSelectionCollectionViewModel.as
index b42a500..df1ba3d 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/SingleSelectionCollectionViewModel.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/SingleSelectionCollectionViewModel.as
@@ -66,6 +66,7 @@
private var _dataProvider:ICollectionView;
+ [Bindable("dataProviderChanged")]
/**
* @copy org.apache.royale.core.ISelectionModel#dataProvider
*
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/TreeModel.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/TreeModel.as
index 841d298..72ba76a 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/TreeModel.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/TreeModel.as
@@ -18,6 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads.models
{
+ import org.apache.royale.html.beads.models.SingleSelectionCollectionViewModel;
import org.apache.royale.collections.HierarchicalData;
import org.apache.royale.collections.TreeData;
import org.apache.royale.events.CollectionEvent;
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/ViewportModel.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/ViewportModel.as
index 33c4d89..8420fd9 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/ViewportModel.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/models/ViewportModel.as
@@ -21,9 +21,9 @@
import org.apache.royale.core.IStrand;
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.IViewportModel;
+ import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.events.Event;
import org.apache.royale.events.EventDispatcher;
- import org.apache.royale.core.layout.EdgeData;
/**
* @copy org.apache.royale.core.IViewportModel
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/AccordionItemRenderer.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/AccordionItemRenderer.as
index b731fa5..9a885da 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/AccordionItemRenderer.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/AccordionItemRenderer.as
@@ -40,6 +40,52 @@
super();
percentWidth = 100;
}
+
+ private var _selectable:Boolean = true;
+ /**
+ * <code>true</code> if the item renderer is can be selected
+ * false otherwise. Use to configure a renderer to be non
+ * selectable.
+ *
+ * Defaults to true
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get selectable():Boolean
+ {
+ return _selectable;
+ }
+
+ public function set selectable(value:Boolean):void
+ {
+ _selectable = value;
+ }
+
+ private var _hoverable:Boolean = true;
+ /**
+ * <code>true</code> if the item renderer is can be hovered
+ * false otherwise. Use to configure a renderer to be non
+ * hoverable.
+ *
+ * Defaults to true
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get hoverable():Boolean
+ {
+ return _hoverable;
+ }
+
+ public function set hoverable(value:Boolean):void
+ {
+ _hoverable = value;
+ }
public function get selected():Boolean
{
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/AlternatingBackgroundColorStringItemRenderer.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/AlternatingBackgroundColorStringItemRenderer.as
index a9e3a80..3e07154 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/AlternatingBackgroundColorStringItemRenderer.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/AlternatingBackgroundColorStringItemRenderer.as
@@ -18,7 +18,6 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.supportClasses
{
-
/**
* The AlternatingBackgroundColorStringItemRenderer class displays data in string form using the data's toString()
* function and alternates between two background colors. This is the most simple implementation for immutable lists
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/ButtonBarButtonItemRenderer.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/ButtonBarButtonItemRenderer.as
index 9fe39b0..dadbbff 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/ButtonBarButtonItemRenderer.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/ButtonBarButtonItemRenderer.as
@@ -26,6 +26,7 @@
import org.apache.royale.html.TextButton;
import org.apache.royale.html.beads.ITextItemRenderer;
import org.apache.royale.events.ItemClickedEvent;
+ import org.apache.royale.html.supportClasses.UIItemRendererBase;
/**
* The ButtonBarButtonItemRenderer class handles the display of each item for the
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/CascadingMenuItemRenderer.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/CascadingMenuItemRenderer.as
index 50f6e39..4af2631 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/CascadingMenuItemRenderer.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/CascadingMenuItemRenderer.as
@@ -22,6 +22,8 @@
import org.apache.royale.html.Label;
import org.apache.royale.html.beads.ITextItemRenderer;
import org.apache.royale.svg.Rect;
+ import org.apache.royale.html.supportClasses.DataItemRenderer;
+ import org.apache.royale.html.util.getLabelFromData;
/**
* The CascadingMenuItemRenderer is the itemRenderer class for the elements of a CascadingMenu.
@@ -94,18 +96,13 @@
}
}
else {
- var text:String;
- if (value is String) text = value as String;
- else if (labelField) text = String(value[labelField]);
- else if (dataField) text = String(value[dataField]);
- else text = String(value);
if (label == null) {
label = new Label();
addElement(label);
}
- label.text = text;
+ label.text = getLabelFromData(this,value);
if (value.hasOwnProperty("menu")) {
if (submenuIndicator == null) {
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/DataGridColumn.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/DataGridColumn.as
index 904a539..cc58aff 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/DataGridColumn.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/DataGridColumn.as
@@ -59,8 +59,7 @@
*/
public function createColumn():IUIBase
{
- var list:List = new List();
- return list;
+ return new List();
}
private var _itemRenderer:IFactory;
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/DataGridColumnList.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/DataGridColumnList.as
index e4b8970..87efe1f 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/DataGridColumnList.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/DataGridColumnList.as
@@ -43,7 +43,7 @@
* @playerversion AIR 2.6
* @productversion Royale 0.0
*/
- public class DataGridColumnList extends List
+ public class DataGridColumnList extends List implements IDataGridColumnList
{
/**
* Constructor.
@@ -56,7 +56,7 @@
public function DataGridColumnList()
{
super();
- className = "DataGridColumnList";
+ typeNames = "DataGridColumnList";
}
/**
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/DataGroup.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/DataGroup.as
index 9b6b38a..faafa09 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/DataGroup.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/DataGroup.as
@@ -19,13 +19,8 @@
package org.apache.royale.html.supportClasses
{
import org.apache.royale.core.IChild;
- import org.apache.royale.core.IContentView;
import org.apache.royale.core.IItemRenderer;
import org.apache.royale.core.IItemRendererParent;
- import org.apache.royale.core.IRollOverModel;
- import org.apache.royale.core.ISelectionModel;
- import org.apache.royale.core.IStrand;
- import org.apache.royale.core.UIBase;
import org.apache.royale.events.IEventDispatcher;
import org.apache.royale.events.Event;
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/DataItemRenderer.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/DataItemRenderer.as
index 356a3ae..8e66c2e 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/DataItemRenderer.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/DataItemRenderer.as
@@ -26,7 +26,7 @@
{
import org.apache.royale.core.WrappedHTMLElement;
import org.apache.royale.html.util.addElementToWrapper;
- import org.apache.royale.html.beads.controllers.ItemRendererMouseController;
+ import org.apache.royale.core.IBeadController;
}
import org.apache.royale.core.ValuesManager;
@@ -112,9 +112,11 @@
_dataField = value;
}
+ /**
+ * This should be an implementation like ItemRendererMouseController
+ */
COMPILE::JS
- protected var controller:ItemRendererMouseController;
-
+ protected var controller:IBeadController;
/**
* @private
@@ -150,8 +152,8 @@
{
addElementToWrapper(this,'div');
className = 'DataItemRenderer';
- controller = new ItemRendererMouseController();
- controller.strand = this;
+ //controller = new ItemRendererMouseController();
+ //controller.strand = this;
return element;
}
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/DynamicDataGridColumnList.as
similarity index 72%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/DynamicDataGridColumnList.as
index 75d1f7d..cc1d24f 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/DynamicDataGridColumnList.as
@@ -1,11 +1,10 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// 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 "Licens"); 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
@@ -17,13 +16,14 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-
-@namespace "http://www.w3.org/1999/xhtml";
-
-.Application
+package org.apache.royale.html.supportClasses
{
- padding: 10px;
- margin: 10px;
-}
-
\ No newline at end of file
+ public class DynamicDataGridColumnList extends DataGridColumnList
+ {
+ public function DynamicDataGridColumnList()
+ {
+ super();
+ typeNames = "DynamicDataGridColumnList";
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/GraphicsItemRenderer.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/GraphicsItemRenderer.as
index 10402fc..c6b6a9e 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/GraphicsItemRenderer.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/GraphicsItemRenderer.as
@@ -110,6 +110,52 @@
_index = value;
}
+ private var _selectable:Boolean = true;
+ /**
+ * <code>true</code> if the item renderer is can be selected
+ * false otherwise. Use to configure a renderer to be non
+ * selectable.
+ *
+ * Defaults to true
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get selectable():Boolean
+ {
+ return _selectable;
+ }
+
+ public function set selectable(value:Boolean):void
+ {
+ _selectable = value;
+ }
+
+ private var _hoverable:Boolean = true;
+ /**
+ * <code>true</code> if the item renderer is can be hovered
+ * false otherwise. Use to configure a renderer to be non
+ * hoverable.
+ *
+ * Defaults to true
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get hoverable():Boolean
+ {
+ return _hoverable;
+ }
+
+ public function set hoverable(value:Boolean):void
+ {
+ _hoverable = value;
+ }
+
private var _selected:Boolean;
/**
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/removeAllStyles.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/IDataGridColumnList.as
similarity index 62%
rename from frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/removeAllStyles.as
rename to frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/IDataGridColumnList.as
index 2d56551..ccb12bf 100644
--- a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/removeAllStyles.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/IDataGridColumnList.as
@@ -16,35 +16,27 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.utils.cssclasslist
+package org.apache.royale.html.supportClasses
{
- COMPILE::JS
- {
- import org.apache.royale.core.WrappedHTMLElement;
- }
+ import org.apache.royale.core.IList;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.IEventDispatcher;
/**
- * Removes all styles (class selector names) from the component.
- *
- * This is a low-level operation and may interfere with proper
- * operation of the component.
- *
- * @param element The HTMLElement that will have selectors added or removed.
+ * The IDataGridColumnList interface is a marker interface for DataGrid Column Lists
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.3
*/
- COMPILE::JS
- public function removeAllStyles(element:WrappedHTMLElement):void
+ public interface IDataGridColumnList extends IList, IStrand, IEventDispatcher
{
- var classList:DOMTokenList = element.classList;
- var i:int;
- for( i = classList.length -1; i > 0; i-- )
- {
- classList.remove(classList[i]);
- }
+ function set className(value:String):void;
+ function set labelField(value:String):void;
+ function set dataProvider(value:Object):void;
+ function get selectedIndex():int;
+ function set selectedIndex(value:int):void;
+ function set id(value:String):void;
}
-
-}
+}
\ No newline at end of file
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/MenuBarItemRenderer.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/MenuBarItemRenderer.as
index e897103..3140162 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/MenuBarItemRenderer.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/MenuBarItemRenderer.as
@@ -20,6 +20,8 @@
{
import org.apache.royale.html.Label;
import org.apache.royale.html.beads.ITextItemRenderer;
+ import org.apache.royale.html.supportClasses.DataItemRenderer;
+ import org.apache.royale.html.util.getLabelFromData;
public class MenuBarItemRenderer extends DataItemRenderer implements ITextItemRenderer
{
@@ -47,13 +49,8 @@
override public function set data(value:Object):void
{
super.data = value;
- var text:String;
- if (value is String) text = value as String;
- else if (labelField) text = String(value[labelField]);
- else if (dataField) text = String(value[dataField]);
- else text = String(value);
- label.text = text;
+ label.text = getLabelFromData(this,value);
adjustSize();
}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/MenuItemRenderer.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/MenuItemRenderer.as
index 258f1c4..ece7141 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/MenuItemRenderer.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/MenuItemRenderer.as
@@ -21,6 +21,8 @@
import org.apache.royale.core.ISelectableItemRenderer;
import org.apache.royale.html.Label;
import org.apache.royale.html.beads.ITextItemRenderer;
+ import org.apache.royale.html.supportClasses.DataItemRenderer;
+ import org.apache.royale.html.util.getLabelFromData;
/**
* The MenuItemRenderer class is the default itemRenderer for Menus.
@@ -77,13 +79,8 @@
override public function set data(value:Object):void
{
super.data = value;
- var text:String;
- if (value is String) text = value as String;
- else if (labelField) text = String(value[labelField]);
- else if (dataField) text = String(value[dataField]);
- else text = String(value);
- label.text = text;
+ label.text = getLabelFromData(this,value);
}
/**
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/PanelContent.as
similarity index 72%
copy from frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
copy to frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/PanelContent.as
index 7935bcf..f0d7045 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/PanelContent.as
@@ -16,20 +16,19 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.html.beads
+package org.apache.royale.html.supportClasses
{
- import org.apache.royale.core.IBead;
+ import org.apache.royale.html.Container;
/**
- * The IBackgroundBead interface is a marker interface for beads
- * that draw backgrounds.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * A Container specialized for the content area of a Panel. Needed for its type name
*/
- public interface IBorderBead extends IBead
- {
- }
-}
+ public class PanelContent extends Container
+ {
+ public function PanelContent()
+ {
+ super();
+ typeNames += ' PanelContent';
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/PanelLayoutProxy.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/PanelLayoutProxy.as
index c7a4d87..b2c5520 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/PanelLayoutProxy.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/PanelLayoutProxy.as
@@ -224,6 +224,14 @@
{
(host as UIBase).setDisplayStyleForLayout(value);
}
+ /**
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ COMPILE::JS
+ public function get displayStyleForLayout():String
+ {
+ return (host as UIBase).displayStyleForLayout;
+ }
}
}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/ScrollingViewport.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/ScrollingViewport.as
index 4840770..46a851c 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/ScrollingViewport.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/ScrollingViewport.as
@@ -18,6 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.supportClasses
{
+ import org.apache.royale.html.supportClasses.Viewport;
import org.apache.royale.core.IBead;
import org.apache.royale.core.IBeadLayout;
import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/SpinnerButton.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/SpinnerButton.as
index 6f15992..32d97f6f 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/SpinnerButton.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/SpinnerButton.as
@@ -25,7 +25,7 @@
public function SpinnerButton()
{
super();
- className = 'SpinnerButton';
+ typeNames = 'TextButton SpinnerButton';
}
}
}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/StringItemRenderer.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/StringItemRenderer.as
index b49c826..5c6c454 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/StringItemRenderer.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/StringItemRenderer.as
@@ -28,10 +28,12 @@
COMPILE::JS
{
import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
}
import org.apache.royale.events.Event;
import org.apache.royale.html.beads.ITextItemRenderer;
- import org.apache.royale.html.util.addElementToWrapper;
+ import org.apache.royale.html.supportClasses.DataItemRenderer;
+ import org.apache.royale.html.util.getLabelFromData;
/**
* The StringItemRenderer class displays data in string form using the data's toString()
@@ -146,12 +148,7 @@
{
super.data = value;
var text:String;
- if (value is String) text = value as String;
- else if (labelField) text = "" + value[labelField];
- else if (dataField) text = "" + value[dataField];
- else text = "" + value;
-
- this.text = text;
+ this.text = getLabelFromData(this,value);
}
// COMPILE::JS
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/TextButtonItemRenderer.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/TextButtonItemRenderer.as
index 4f2fe1b..d37ceb5 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/TextButtonItemRenderer.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/TextButtonItemRenderer.as
@@ -27,6 +27,7 @@
import org.apache.royale.html.TextButton;
import org.apache.royale.html.beads.ITextItemRenderer;
import org.apache.royale.events.ItemClickedEvent;
+ import org.apache.royale.html.util.getLabelFromData;
COMPILE::JS
{
@@ -84,17 +85,8 @@
var valueAsString:String;
if (data == null) return;
-
- if (data is String) {
- valueAsString = data as String;
- }
- else if (labelField != null) {
- valueAsString = "" + data[labelField];
- }
- else if (data.hasOwnProperty("label")) {
- valueAsString = "" + data["label"];
- }
- else if (data.hasOwnProperty("title")) {
+ valueAsString = getLabelFromData(this,data);
+ if (!valueAsString && data.hasOwnProperty("title")) {
valueAsString = "" + data["title"];
}
@@ -198,6 +190,52 @@
_index = value;
}
+ private var _selectable:Boolean = true;
+ /**
+ * <code>true</code> if the item renderer is can be selected
+ * false otherwise. Use to configure a renderer to be non
+ * selectable.
+ *
+ * Defaults to true
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get selectable():Boolean
+ {
+ return _selectable;
+ }
+
+ public function set selectable(value:Boolean):void
+ {
+ _selectable = value;
+ }
+
+ private var _hoverable:Boolean = true;
+ /**
+ * <code>true</code> if the item renderer is can be hovered
+ * false otherwise. Use to configure a renderer to be non
+ * hoverable.
+ *
+ * Defaults to true
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get hoverable():Boolean
+ {
+ return _hoverable;
+ }
+
+ public function set hoverable(value:Boolean):void
+ {
+ _hoverable = value;
+ }
+
private var _hovered:Boolean;
/**
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/TextFieldItemRenderer.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/TextFieldItemRenderer.as
index 2a58ee3..946b64d 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/TextFieldItemRenderer.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/TextFieldItemRenderer.as
@@ -376,6 +376,31 @@
_index = value;
}
+
+
+ private var _hoverable:Boolean = true;
+ /**
+ * <code>true</code> if the item renderer is can be hovered
+ * false otherwise. Use to configure a renderer to be non
+ * hoverable.
+ *
+ * Defaults to true
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get hoverable():Boolean
+ {
+ return _hoverable;
+ }
+
+ public function set hoverable(value:Boolean):void
+ {
+ _hoverable = value;
+ }
+
private var _hovered:Boolean;
/**
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/TreeGridControlItemRenderer.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/TreeGridControlItemRenderer.as
index 9e3e4f0..f624b50 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/TreeGridControlItemRenderer.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/TreeGridControlItemRenderer.as
@@ -25,6 +25,7 @@
import org.apache.royale.events.IEventDispatcher;
import org.apache.royale.events.ItemAddedEvent;
import org.apache.royale.html.TextButton;
+ import org.apache.royale.html.supportClasses.UIItemRendererBase;
public class TreeGridControlItemRenderer extends UIItemRendererBase implements IItemRendererParent
{
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/TreeItemRenderer.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/TreeItemRenderer.as
index 6ad3603..ef12a8b 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/TreeItemRenderer.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/TreeItemRenderer.as
@@ -52,8 +52,8 @@
var extraSpace:String = " ";
COMPILE::JS {
- indentSpace = " ";
- extraSpace = " ";
+ indentSpace = "\u00a0\u00a0\u00a0\u00a0";
+ extraSpace = "\u00a0";
}
var indent:String = "";
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/UIItemRendererBase.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/UIItemRendererBase.as
index 291596a..acc779c 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/UIItemRendererBase.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/UIItemRendererBase.as
@@ -261,6 +261,29 @@
updateRenderer();
}
+ private var _selectable:Boolean = true;
+ /**
+ * <code>true</code> if the item renderer is can be selected
+ * false otherwise. Use to configure a renderer to be non
+ * selectable.
+ *
+ * Defaults to true
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get selectable():Boolean
+ {
+ return _selectable;
+ }
+
+ public function set selectable(value:Boolean):void
+ {
+ _selectable = value;
+ }
+
private var _selected:Boolean;
/**
@@ -281,6 +304,29 @@
updateRenderer();
}
+ private var _hoverable:Boolean = true;
+ /**
+ * <code>true</code> if the item renderer is can be hovered
+ * false otherwise. Use to configure a renderer to be non
+ * hoverable.
+ *
+ * Defaults to true
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get hoverable():Boolean
+ {
+ return _hoverable;
+ }
+
+ public function set hoverable(value:Boolean):void
+ {
+ _hoverable = value;
+ }
+
private var _down:Boolean;
/**
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/Viewport.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/Viewport.as
index 10019ae..8fe96d6 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/Viewport.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/supportClasses/Viewport.as
@@ -20,11 +20,9 @@
{
import org.apache.royale.core.IBead;
import org.apache.royale.core.IContentView;
- import org.apache.royale.core.IParentIUIBase;
import org.apache.royale.core.IStrand;
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.IViewport;
- import org.apache.royale.core.IViewportModel;
import org.apache.royale.core.UIBase;
import org.apache.royale.core.ValuesManager;
import org.apache.royale.events.Event;
@@ -35,7 +33,6 @@
COMPILE::SWF
{
import flash.geom.Rectangle;
- import org.apache.royale.html.beads.models.ScrollBarModel;
}
/**
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/util/getLabelFromData.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/util/getLabelFromData.as
new file mode 100644
index 0000000..617a483
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/util/getLabelFromData.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 "Licens"); 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.html.util
+{
+
+ /**
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ * Utility function to get a label string from a value object
+ */
+ public function getLabelFromData(obj:Object,data:Object):String
+ {
+ // slightly more code, but we bail early if it's a string which is often
+ if (data is String) return "" + data;
+ if(!data) return "";
+
+ if (obj["labelField"]) return "" + data[obj["labelField"]];
+ if (obj["dataField"]) return "" + data[obj["dataField"]];
+ if (data.hasOwnProperty("label")) return "" + data["label"];
+
+ return "" + data;
+
+ }
+}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/svg/CompoundGraphic.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/svg/CompoundGraphic.as
index b980695..7f80d4d 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/svg/CompoundGraphic.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/svg/CompoundGraphic.as
@@ -200,7 +200,7 @@
rect.setAttribute('rx', radiusX);
rect.setAttribute('ry', radiusY);
}
- element.appendChild(rect);
+ addElementToSurface(rect);
}
}
@@ -239,7 +239,7 @@
ellipse.setAttribute('cy', y + height / 2);
ellipse.setAttribute('rx', width / 2);
ellipse.setAttribute('ry', height / 2);
- element.appendChild(ellipse);
+ addElementToSurface(ellipse);
}
}
@@ -276,7 +276,7 @@
circle.setAttribute('cy', y);
circle.setAttribute('rx', radius);
circle.setAttribute('ry', radius);
- element.appendChild(circle);
+ addElementToSurface(circle);
}
}
@@ -332,7 +332,7 @@
path.style.top = "0px";
path.setAttribute('style', style);
path.setAttribute('d', data);
- element.appendChild(path);
+ addElementToSurface(path);
}
}
@@ -550,7 +550,7 @@
text.setAttribute('y', y + 15);
var textNode:Text = document.createTextNode(value) as Text;
text.appendChild(textNode as Node);
- element.appendChild(text);
+ addElementToSurface(text);
return text;
}
}
@@ -585,5 +585,14 @@
}
+ /*
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ protected function addElementToSurface(e:WrappedHTMLElement):void
+ {
+ element.appendChild(e);
+ }
+
}
}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/svg/TransformableCompoundGraphic.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/svg/TransformableCompoundGraphic.as
new file mode 100644
index 0000000..e23827f
--- /dev/null
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/svg/TransformableCompoundGraphic.as
@@ -0,0 +1,93 @@
+/*
+ *
+ * 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.svg
+{
+
+ /**
+ * TransformableCompoundGraphic adds a <g> element in which drawn elements are nested.
+ * This is useful for applying transforms and other low level operations not available on SVG elements.
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+ public class TransformableCompoundGraphic extends CompoundGraphic
+ {
+ COMPILE::JS
+ private var _groupElement:WrappedHTMLElement;
+
+ /*
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function addElementToSurface(e:WrappedHTMLElement):void
+ {
+ _groupElement.appendChild(e);
+ }
+
+ /**
+ * Clears all of the drawn path data.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ override public function clear():void
+ {
+ COMPILE::SWF
+ {
+ super.clear();
+ }
+ COMPILE::JS
+ {
+ while (transformElement.lastChild) {
+ transformElement.removeChild(transformElement.lastChild);
+ }
+ }
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ super.createElement();
+ _groupElement = document.createElementNS('http://www.w3.org/2000/svg', 'g') as WrappedHTMLElement;
+ element.appendChild(_groupElement);
+ return element;
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override public function get transformElement():WrappedHTMLElement
+ {
+ return _groupElement;
+ }
+
+
+ }
+}
diff --git a/frameworks/projects/Core/src/main/royale/CoreClasses.as b/frameworks/projects/Core/src/main/royale/CoreClasses.as
index 6f25cd2..d3615cf 100644
--- a/frameworks/projects/Core/src/main/royale/CoreClasses.as
+++ b/frameworks/projects/Core/src/main/royale/CoreClasses.as
@@ -26,16 +26,43 @@
*/
internal class CoreClasses
{
+ import org.apache.royale.core.IId; IId;
+ import org.apache.royale.core.HTMLElementWrapper; HTMLElementWrapper;
+ import org.apache.royale.utils.IClassSelectorListSupport; IClassSelectorListSupport;
+ import org.apache.royale.core.LayoutBase; LayoutBase;
+ import org.apache.royale.core.ContainerBaseStrandChildren; ContainerBaseStrandChildren;
+ import org.apache.royale.core.ApplicationBase; ApplicationBase;
+ import org.apache.royale.core.IList; IList;
+ import org.apache.royale.core.IIcon; IIcon;
+ import org.apache.royale.core.IIconSupport; IIconSupport;
+ import org.apache.royale.html.beads.IListView; IListView;
+ import org.apache.royale.events.ItemAddedEvent; ItemAddedEvent;
+import org.apache.royale.events.ItemRemovedEvent; ItemRemovedEvent;
+ import org.apache.royale.html.beads.IDropDownListView; IDropDownListView;
+
+ import org.apache.royale.events.ItemAddedEvent; ItemAddedEvent;
+ import org.apache.royale.events.ItemClickedEvent; ItemClickedEvent;
+ import org.apache.royale.events.ItemRemovedEvent; ItemRemovedEvent;
+ import org.apache.royale.events.ItemRendererEvent; ItemRendererEvent;
+
+ import org.apache.royale.html.beads.IBackgroundBead; IBackgroundBead;
+ import org.apache.royale.html.beads.IBorderBead; IBorderBead;
+
import org.apache.royale.core.BeadViewBase; BeadViewBase;
import org.apache.royale.core.ImageViewBase; ImageViewBase;
import org.apache.royale.core.BrowserWindow; BrowserWindow;
+
+ import org.apache.royale.core.layout.ILayoutStyleProperties; ILayoutStyleProperties;
+
COMPILE::SWF
{
+ import org.apache.royale.core.UIButtonBase; UIButtonBase;
+ import org.apache.royale.core.CSSTextField; CSSTextField;
+ import org.apache.royale.html.beads.ITextFieldView; ITextFieldView;
// import Promise; Promise;
import org.apache.royale.core.ApplicationFactory; ApplicationFactory;
import org.apache.royale.core.CSSShape; CSSShape;
import org.apache.royale.core.CSSSprite; CSSSprite;
- import org.apache.royale.core.CSSTextField; CSSTextField;
import org.apache.royale.core.StyleableCSSTextField; StyleableCSSTextField;
import org.apache.royale.core.WrappedMovieClip; WrappedMovieClip;
import org.apache.royale.core.WrappedShape; WrappedShape;
@@ -114,6 +141,9 @@
import org.apache.royale.core.IViewport; IViewport;
import org.apache.royale.core.IScrollingViewport; IScrollingViewport;
import org.apache.royale.core.IViewportModel; IViewportModel;
+
+ import org.apache.royale.core.IApplicationView; IApplicationView;
+
COMPILE::SWF
{
import org.apache.royale.core.IViewportScroller; IViewportScroller;
@@ -227,11 +257,6 @@
import org.apache.royale.utils.object.defineSimpleGetter; defineSimpleGetter;
import org.apache.royale.utils.object.defineProperty; defineProperty;
import org.apache.royale.utils.object.defineSimpleProperty; defineSimpleProperty;
-
- import org.apache.royale.utils.cssclasslist.removeAllStyles; removeAllStyles;
- import org.apache.royale.utils.cssclasslist.removeStyles; removeStyles;
- import org.apache.royale.utils.cssclasslist.toggleStyle; toggleStyle;
- import org.apache.royale.utils.cssclasslist.addStyles; addStyles;
}
//Package Level Functions
import org.apache.royale.debugging.assert; assert;
@@ -259,6 +284,8 @@
import org.apache.royale.utils.date.addSeconds; addSeconds;
import org.apache.royale.utils.date.addYears; addYears;
+ import org.apache.royale.utils.css.addDynamicSelector; addDynamicSelector;
+
import org.apache.royale.core.TextLineMetrics; TextLineMetrics;
import org.apache.royale.utils.ClassSelectorList; ClassSelectorList;
}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/ApplicationBase.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/ApplicationBase.as
similarity index 100%
rename from frameworks/projects/Basic/src/main/royale/org/apache/royale/core/ApplicationBase.as
rename to frameworks/projects/Core/src/main/royale/org/apache/royale/core/ApplicationBase.as
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/ContainerBaseStrandChildren.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/ContainerBaseStrandChildren.as
similarity index 100%
rename from frameworks/projects/Basic/src/main/royale/org/apache/royale/core/ContainerBaseStrandChildren.as
rename to frameworks/projects/Core/src/main/royale/org/apache/royale/core/ContainerBaseStrandChildren.as
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/HTMLElementWrapper.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/HTMLElementWrapper.as
similarity index 100%
rename from frameworks/projects/Basic/src/main/royale/org/apache/royale/core/HTMLElementWrapper.as
rename to frameworks/projects/Core/src/main/royale/org/apache/royale/core/HTMLElementWrapper.as
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/IIcon.as
similarity index 79%
copy from frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
copy to frameworks/projects/Core/src/main/royale/org/apache/royale/core/IIcon.as
index 7935bcf..e28a52e 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/IIcon.as
@@ -16,20 +16,18 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.html.beads
+package org.apache.royale.core
{
- import org.apache.royale.core.IBead;
-
/**
- * The IBackgroundBead interface is a marker interface for beads
- * that draw backgrounds.
- *
+ * IIcon interface provides abstraction for easiest way to implements custom icon class
+ *
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
- public interface IBorderBead extends IBead
- {
- }
+ public interface IIcon extends IUIBase
+ {
+
+ }
}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/IIconSupport.as
similarity index 79%
copy from frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
copy to frameworks/projects/Core/src/main/royale/org/apache/royale/core/IIconSupport.as
index 7935bcf..3e19af0 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/IIconSupport.as
@@ -16,20 +16,19 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.html.beads
+package org.apache.royale.core
{
- import org.apache.royale.core.IBead;
-
/**
- * The IBackgroundBead interface is a marker interface for beads
- * that draw backgrounds.
- *
+ * Implement if a class will need ability to display an icon
+ *
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
- public interface IBorderBead extends IBead
- {
- }
+ public interface IIconSupport
+ {
+ function get icon():IIcon;
+ function set icon(value:IIcon):void;
+ }
}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/ListBase.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/IId.as
similarity index 75%
rename from frameworks/projects/Basic/src/main/royale/org/apache/royale/core/ListBase.as
rename to frameworks/projects/Core/src/main/royale/org/apache/royale/core/IId.as
index a17d205..b54d1a6 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/ListBase.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/IId.as
@@ -17,34 +17,27 @@
//
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.core
-{
- /*
- *************
- * THIS CLASS IS NO LONGER NEEDED. INHERIT FROM DataContainerBase
- */
-
+{
/**
- * The ListBase class is the base class for most lists
- * in Royale.
- *
+ * The IId interface is the basic interface for components that must have
+ * an id or identifier for a concrete instance.
+ *
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
- public class ListBase extends DataContainerBase
+ public interface IId
{
/**
- * Constructor.
+ * An id property for MXML documents.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
- public function ListBase()
- {
- super();
- }
- }
+ function get id():String;
+ function set id(value:String):void;
+ }
}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/IList.as
similarity index 73%
copy from frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
copy to frameworks/projects/Core/src/main/royale/org/apache/royale/core/IList.as
index 7935bcf..84007a7 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/IList.as
@@ -16,20 +16,23 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.html.beads
+package org.apache.royale.core
{
- import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IItemRendererParent;
+ import org.apache.royale.core.IItemRendererProvider;
/**
- * The IBackgroundBead interface is a marker interface for beads
- * that draw backgrounds.
+ * The IList interface is implemented by any component that supports being
+ * a "list" which means its content is generated by a factory and whose
+ * children are item renderers (IItemRenderer).
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.0
*/
- public interface IBorderBead extends IBead
+ public interface IList extends IItemRendererProvider
{
+
}
}
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/core/ISelectableItemRenderer.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/ISelectableItemRenderer.as
index 1917095..321d75b 100644
--- a/frameworks/projects/Core/src/main/royale/org/apache/royale/core/ISelectableItemRenderer.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/ISelectableItemRenderer.as
@@ -56,6 +56,21 @@
function set index(value:int):void;
/**
+ * <code>true</code> if the item renderer is can be selected
+ * false otherwise. Use to configure a renderer to be non
+ * selectable.
+ *
+ * Defaults to true
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ function get selectable():Boolean;
+ function set selectable(value:Boolean):void;
+
+ /**
* <code>true</code> if the item renderer is rendering
* an item that is selected.
*
@@ -68,6 +83,21 @@
function set selected(value:Boolean):void;
/**
+ * <code>true</code> if the item renderer is can be hovered
+ * false otherwise. Use to configure a renderer to be non
+ * hoverable.
+ *
+ * Defaults to true
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ function get hoverable():Boolean;
+ function set hoverable(value:Boolean):void;
+
+ /**
* <code>true</code> if the item renderer is rendering
* an item that is under the mouse pointer.
*
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/LayoutBase.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/LayoutBase.as
similarity index 98%
rename from frameworks/projects/Basic/src/main/royale/org/apache/royale/core/LayoutBase.as
rename to frameworks/projects/Core/src/main/royale/org/apache/royale/core/LayoutBase.as
index edc5e47..1ca0ffa 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/LayoutBase.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/LayoutBase.as
@@ -18,7 +18,6 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.core
{
-
import org.apache.royale.core.IBeadLayout;
import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
import org.apache.royale.core.ILayoutChild;
@@ -27,7 +26,6 @@
import org.apache.royale.core.ILayoutView;
import org.apache.royale.core.IStrand;
import org.apache.royale.core.IUIBase;
- import org.apache.royale.core.LayoutManager;
import org.apache.royale.core.ValuesManager;
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.core.layout.MarginData;
@@ -310,7 +308,6 @@
* @playerversion AIR 2.6
* @productversion Royale 0.8
* @royaleignorecoercion org.apache.royale.core.ILayoutParent
- * @royaleignorecoercion org.apache.royale.core.UIBase
* @royaleignorecoercion org.apache.royale.events.IEventDispatcher
*/
public function performLayout():void
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIButtonBase.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/UIButtonBase.as
similarity index 100%
rename from frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIButtonBase.as
rename to frameworks/projects/Core/src/main/royale/org/apache/royale/core/UIButtonBase.as
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/core/layout/ILayoutStyleProperties.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/layout/ILayoutStyleProperties.as
new file mode 100644
index 0000000..34c33d4
--- /dev/null
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/layout/ILayoutStyleProperties.as
@@ -0,0 +1,50 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.core.layout
+{
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.IBeadLayout;
+
+ /**
+ * The ILayoutStyleProperties interface is the contract for layout beads
+ * that needs to retrieve style properties set in their host component
+ * and apply to itself.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public interface ILayoutStyleProperties extends IBeadLayout
+ {
+ /**
+ * Get the component layout style and apply to if exists
+ *
+ * @param component the IUIBase component that host this layout
+ * @param cssProperty the style property in css set for the component to retrieve
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ function applyStyleToLayout(component:IUIBase, cssProperty:String):void;
+
+ }
+}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/events/ItemAddedEvent.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/events/ItemAddedEvent.as
similarity index 99%
rename from frameworks/projects/Basic/src/main/royale/org/apache/royale/events/ItemAddedEvent.as
rename to frameworks/projects/Core/src/main/royale/org/apache/royale/events/ItemAddedEvent.as
index 2a5ff5e..7062bcd 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/events/ItemAddedEvent.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/events/ItemAddedEvent.as
@@ -1,6 +1,5 @@
////////////////////////////////////////////////////////////////////////////////
//
-
// 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.
@@ -19,7 +18,6 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.events
{
-
import org.apache.royale.events.CustomEvent;
/**
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/events/ItemClickedEvent.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/events/ItemClickedEvent.as
similarity index 100%
rename from frameworks/projects/Basic/src/main/royale/org/apache/royale/events/ItemClickedEvent.as
rename to frameworks/projects/Core/src/main/royale/org/apache/royale/events/ItemClickedEvent.as
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/events/ItemRemovedEvent.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/events/ItemRemovedEvent.as
similarity index 99%
rename from frameworks/projects/Basic/src/main/royale/org/apache/royale/events/ItemRemovedEvent.as
rename to frameworks/projects/Core/src/main/royale/org/apache/royale/events/ItemRemovedEvent.as
index 90c5720..4949ca8 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/events/ItemRemovedEvent.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/events/ItemRemovedEvent.as
@@ -1,6 +1,5 @@
////////////////////////////////////////////////////////////////////////////////
//
-
// 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/projects/Basic/src/main/royale/org/apache/royale/events/ItemRendererEvent.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/events/ItemRendererEvent.as
similarity index 99%
rename from frameworks/projects/Basic/src/main/royale/org/apache/royale/events/ItemRendererEvent.as
rename to frameworks/projects/Core/src/main/royale/org/apache/royale/events/ItemRendererEvent.as
index f0af3c8..f2dcf2f 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/events/ItemRendererEvent.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/events/ItemRendererEvent.as
@@ -89,4 +89,4 @@
return newEvent;
}
}
-}
+}
\ No newline at end of file
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBackgroundBead.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/html/beads/IBackgroundBead.as
similarity index 100%
rename from frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBackgroundBead.as
rename to frameworks/projects/Core/src/main/royale/org/apache/royale/html/beads/IBackgroundBead.as
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
similarity index 92%
rename from frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
rename to frameworks/projects/Core/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
index 7935bcf..5ece4bc 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
@@ -21,8 +21,8 @@
import org.apache.royale.core.IBead;
/**
- * The IBackgroundBead interface is a marker interface for beads
- * that draw backgrounds.
+ * The IBorderBead interface is a marker interface for beads
+ * that draw borders.
*
* @langversion 3.0
* @playerversion Flash 10.2
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IDropDownListView.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/html/beads/IDropDownListView.as
similarity index 100%
rename from frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IDropDownListView.as
rename to frameworks/projects/Core/src/main/royale/org/apache/royale/html/beads/IDropDownListView.as
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IListView.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/html/beads/IListView.as
similarity index 100%
rename from frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IListView.as
rename to frameworks/projects/Core/src/main/royale/org/apache/royale/html/beads/IListView.as
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/ITextFieldView.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/html/beads/ITextFieldView.as
similarity index 94%
rename from frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/ITextFieldView.as
rename to frameworks/projects/Core/src/main/royale/org/apache/royale/html/beads/ITextFieldView.as
index 9f08336..825a3ef 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/ITextFieldView.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/html/beads/ITextFieldView.as
@@ -18,7 +18,10 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads
{
- import org.apache.royale.core.CSSTextField;
+ COMPILE::SWF
+ {
+ import org.apache.royale.core.CSSTextField;
+ }
/**
* The ITextFieldView interface is the interface for views for
@@ -29,6 +32,7 @@
* @playerversion AIR 2.6
* @productversion Royale 0.0
*/
+ COMPILE::SWF
public interface ITextFieldView
{
/**
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/BinaryData.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/BinaryData.as
index e60a1fb..acfec5b 100644
--- a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/BinaryData.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/BinaryData.as
@@ -167,7 +167,7 @@
public function set endian(value:String):void
{
- if (value == Endian.BIG_ENDIAN || Endian.LITTLE_ENDIAN) {
+ if (value == Endian.BIG_ENDIAN || value == Endian.LITTLE_ENDIAN) {
COMPILE::JS {
_endian = value;
_sysEndian = value == Endian.systemEndian;
@@ -202,6 +202,23 @@
}
/**
+ * create a string representation of the binary data
+ */
+ public function toString():String
+ {
+ COMPILE::SWF
+ {
+ return ba.toString();
+ }
+
+ COMPILE::JS
+ {
+ _position = 0;
+ return readUTFBytes(length);
+ }
+ }
+
+ /**
* Write a Boolean value (as a single byte) at the current position
*
* @param {Boolean} value The boolean value to write into the BinaryData at the current position
@@ -245,8 +262,7 @@
if (_position + 1 > _len) {
setBufferSize(_position + 1);
}
- new Uint8Array(ba, _position, 1)[0] = byte;
- _position++;
+ getTypedArray()[_position++] = byte;
}
}
/**
@@ -305,14 +321,18 @@
}
COMPILE::JS
{
- if (!_sysEndian) {
- short = (((short & 0xff00) >>> 8) | ((short & 0xff) <<8 ));
- }
if (_position + 2 > _len) {
setBufferSize(_position + 2);
}
- new Int16Array(ba, _position, 1)[0] = short;
- _position += 2;
+ var arr:Uint8Array = getTypedArray();
+ if(endian == Endian.BIG_ENDIAN){
+ arr[_position++] = (short & 0x0000ff00) >> 8;
+ arr[_position++] = (short & 0x000000ff);
+ } else {
+ arr[_position++] = (short & 0x000000ff);
+ arr[_position++] = (short & 0x0000ff00) >> 8;
+ }
+
}
}
@@ -334,14 +354,7 @@
}
COMPILE::JS
{
- if (!_sysEndian) {
- val = ((val & 0xff000000) >>> 24) | ((val & 0x00ff0000) >> 8) | ((val & 0x0000ff00) << 8) | (val << 24);
- }
- if (_position + 4 > _len) {
- setBufferSize(_position + 4);
- }
- new Uint32Array(ba, _position, 1)[0] = val;
- _position += 4;
+ writeInt(val);
}
}
@@ -363,14 +376,23 @@
}
COMPILE::JS
{
- if (!_sysEndian) {
- val = (((val & 0xff000000) >>> 24) | ((val & 0x00ff0000) >> 8) | ((val & 0x0000ff00) << 8) | (val << 24)) >> 0;
- }
if (_position + 4 > _len) {
setBufferSize(_position + 4);
}
- new Int32Array(ba, _position, 1)[0] = val;
- _position += 4;
+ var arr:Uint8Array = getTypedArray();
+ if(endian == Endian.BIG_ENDIAN){
+
+ arr[_position++] = (val & 0xff000000) >> 24;
+ arr[_position++] = (val & 0x00ff0000) >> 16;
+ arr[_position++] = (val & 0x0000ff00) >> 8;
+ arr[_position++] = (val & 0x000000ff);
+ } else {
+ arr[_position++] = (val & 0x000000ff);
+ arr[_position++] = (val & 0x0000ff00) >> 8;
+ arr[_position++] = (val & 0x00ff0000) >> 16;
+ arr[_position++] = (val & 0xff000000) >> 24;
+ }
+
}
}
@@ -394,15 +416,8 @@
if (_position + 4 > _len) {
setBufferSize(_position + 4);
}
-
- if(_sysEndian)
- {
- new Float32Array(ba, _position, 1)[0] = val;
- }
- else
- {
- new DataView(ba).setFloat32(_position,val,_endian == Endian.LITTLE_ENDIAN);
- }
+
+ getDataView().setFloat32(_position,val,_endian == Endian.LITTLE_ENDIAN);
_position += 4;
}
}
@@ -426,10 +441,7 @@
if (_position + 8 > _len) {
setBufferSize(_position + 8);
}
- if(_sysEndian)
- new Float64Array(ba, _position, 1)[0] = val;
- else
- new DataView(ba).setFloat64(_position,val,_endian == Endian.LITTLE_ENDIAN);
+ getDataView().setFloat64(_position,val,_endian == Endian.LITTLE_ENDIAN);
_position += 8;
}
}
@@ -453,7 +465,7 @@
}
COMPILE::JS
{
- return Boolean(readUnsignedByte());
+ return !!getTypedArray()[_position++];// Boolean(readUnsignedByte());
}
}
@@ -475,9 +487,7 @@
}
COMPILE::JS
{
- var view:Int8Array = new Int8Array(ba, _position, 1);
- _position++;
- return view[0];
+ return readUnsignedByte() << 24 >> 24;
}
}
/**
@@ -497,9 +507,7 @@
}
COMPILE::JS
{
- var view:Uint8Array = new Uint8Array(ba, _position, 1);
- _position++;
- return view[0];
+ return getTypedArray()[_position++];
}
}
@@ -579,6 +587,17 @@
return _typedArray;
}
+ COMPILE::JS
+ private var _dataView:DataView;
+
+ COMPILE::JS
+ private function getDataView():DataView
+ {
+ if(!_dataView)
+ _dataView = new DataView(ba);
+ return _dataView;
+ }
+
/**
* Writes a byte of binary data at the specified index. Does not change the <code>position</code> property.
@@ -623,13 +642,7 @@
}
COMPILE::JS
{
- var ret:int = new Int16Array(ba, _position, 1)[0];
- if (!_sysEndian) {
- //special case conversion for short int return value to 32 bit int
- ret = ((((ret & 0xff00) >> 8) | ((ret & 0xff) << 8)) << 16) >> 16;
- }
- _position += 2;
- return ret;
+ return readUnsignedShort() << 16 >> 16;
}
}
@@ -651,12 +664,12 @@
}
COMPILE::JS
{
- var ret:uint = new Uint32Array(ba, _position, 1)[0];
- if (!_sysEndian) {
- ret = (((ret & 0xff000000) >>> 24) | ((ret & 0x00ff0000) >>> 8) | ((ret & 0x0000ff00) << 8) | (ret << 24)) >>> 0;
+ var arr:Uint8Array = getTypedArray();
+ if(endian == Endian.BIG_ENDIAN){
+ return ((arr[_position++] << 24) >>> 0) + (arr[_position++] << 16) + ( arr[_position++] << 8) + arr[_position++];
+ } else {
+ return arr[_position++] + ( arr[_position++] << 8) + (arr[_position++] << 16) + ((arr[_position++] << 24) >>> 0);
}
- _position += 4;
- return ret;
}
}
@@ -677,13 +690,12 @@
}
COMPILE::JS
{
-
- var ret:uint = new Uint16Array(ba, _position, 1)[0];
- if (!_sysEndian) {
- ret = ((ret & 0xff00) >> 8 ) | ((ret & 0xff) << 8);
+ var arr:Uint8Array = getTypedArray();
+ if(endian == Endian.BIG_ENDIAN){
+ return ( arr[_position++] << 8) + arr[_position++];
+ } else {
+ return arr[_position++] + ( arr[_position++] << 8);
}
- _position += 2;
- return ret;
}
}
@@ -705,12 +717,7 @@
}
COMPILE::JS
{
- var ret:int = new Int32Array(ba, _position, 1)[0];
- if (!_sysEndian) {
- ret = (((ret & 0xff000000) >>> 24) | ((ret & 0x00ff0000) >>> 8) | ((ret & 0x0000ff00) << 8) | (ret << 24)) >> 0;
- }
- _position += 4;
- return ret;
+ return readUnsignedInt() << 32 >> 32;
}
}
@@ -730,11 +737,7 @@
return ba.readFloat();
}
COMPILE::JS {
- var ret :Number;
- if(_sysEndian)
- {
- ret = new Float32Array(ba, _position, 1)[0];
- } else ret = new DataView(ba).getFloat32(_position,_endian == Endian.LITTLE_ENDIAN);
+ var ret :Number = getDataView().getFloat32(_position,_endian == Endian.LITTLE_ENDIAN);
_position += 4;
return ret;
}
@@ -757,10 +760,7 @@
return ba.readDouble();
}
COMPILE::JS {
- var ret : Number;
- if(_sysEndian)
- ret = new Float64Array(ba, _position, 1)[0];
- else ret = new DataView(ba).getFloat64(_position,_endian == Endian.LITTLE_ENDIAN);
+ var ret:Number = getDataView().getFloat64(_position,_endian == Endian.LITTLE_ENDIAN);
_position += 8;
return ret;
}
@@ -788,7 +788,7 @@
}
COMPILE::JS
{
- return _len;;
+ return _len;
}
}
@@ -820,6 +820,7 @@
ba = newView.buffer;
if (_position > newSize) _position = newSize;
_typedArray = newView;
+ _dataView = null;
_len = newSize;
}
}
@@ -1078,6 +1079,7 @@
dest.set(newBytes, offset);
ba = dest.buffer;
_typedArray = dest;
+ _dataView = null;
_len = mergeUpperBound;
} else {
dest = new Uint8Array(ba, offset, newContentLength);
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/ClassSelectorList.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/ClassSelectorList.as
index 6c35dc3..4a06468 100644
--- a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/ClassSelectorList.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/ClassSelectorList.as
@@ -26,9 +26,8 @@
*
* @langversion 3.0
* @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion Royale 1.0.0
- * @productversion Royale 0.0
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
*/
public class ClassSelectorList
{
@@ -44,7 +43,13 @@
/**
* Add a class selector to the list.
+ *
* @param name Name of selector to add.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
*/
public function add(name:String):void
{
@@ -57,8 +62,17 @@
}
/**
- * Add a class selector to the list.
+ * Removes a class selector from the list.
+ *
* @param name Name of selector to remove.
+ *
+ * @royaleignorecoercion HTMLElement
+ * @royaleignorecoercion DOMTokenList
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
*/
public function remove(name:String):void
{
@@ -77,45 +91,93 @@
/**
* Add or remove a class selector to/from the list.
+ *
* @param name Name of selector to add or remove.
* @param value True to add, False to remove.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
*/
public function toggle(name:String, value:Boolean):void
{
COMPILE::JS
{
- component.positioner.classList.toggle(name, value);
+ //IE11 does not support second value so instead of
+ //component.positioner.classList.toggle(name, value);
+ if(value)
+ component.positioner.classList.add(name);
+ else
+ component.positioner.classList.remove(name);
+
if (!component.parent && value)
startIndex++;
}
}
+
+ /**
+ * Search for the name in the element class list
+ *
+ * @param name Name of selector to find.
+ * @return return true if the name is found or false otherwise.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function contains(name:String):Boolean
+ {
+ COMPILE::JS
+ {
+ return component.positioner.classList.contains(name);
+ }
+ COMPILE::SWF
+ {//not implemented
+ return false;
+ }
+ }
/**
* Add a space-separated list of names.
* @param names Space-separated list of names to add.
+ *
* @royaleignorecoercion HTMLElement
+ * @royaleignorecoercion DOMTokenList
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
*/
public function addNames(names:String):void
{
COMPILE::JS
{
- var positioner:HTMLElement = component.positioner as HTMLElement;
- var classList:DOMTokenList = positioner.classList;
- if (component.parent)
- {
- // remove names that were set last time
- while (count > 0)
+ var positioner:HTMLElement = component.positioner as HTMLElement;
+ var classList:DOMTokenList = positioner.classList;
+ if (component.parent)
{
- var name:String = classList.item(startIndex);
- classList.remove(name);
+ // remove names that were set last time
+ while (count > 0)
+ {
+ var name:String = classList.item(startIndex);
+ classList.remove(name);
+ count = classList.length - startIndex;
+ }
}
- }
- if (startIndex > 0)
- positioner.className += " " + names;
- else
- positioner.className = names;
- count = classList.length - startIndex;
+
+ if (startIndex > 0)
+ {
+ positioner.className += " " + names;
+ }
+ else
+ {
+ positioner.className = names;
+ }
+ count = classList.length - startIndex;
}
}
}
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/CompressionUtils.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/CompressionUtils.as
index 0cdee1b..ab5e319 100644
--- a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/CompressionUtils.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/CompressionUtils.as
@@ -33,7 +33,17 @@
* <inject_html>
* <script src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.3/pako.min.js"></script>
* </inject_html>
+ *
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
*/
+ public function CompressionUtils()
+ {
+ }
COMPILE::SWF
public static function inflate(data:BinaryData):BinaryData
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/IClassSelectorListSupport.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/IClassSelectorListSupport.as
new file mode 100644
index 0000000..0edba78
--- /dev/null
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/IClassSelectorListSupport.as
@@ -0,0 +1,85 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.utils
+{
+ /**
+ * The IClassSelectorList interface stablish the contract methods
+ * for componnets that use ClassSelectorList to deal with class selector names
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public interface IClassSelectorListSupport
+ {
+ /**
+ * Add a class selector to the list.
+ *
+ * @param name Name of selector to add.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ function addClass(name:String):void
+
+ /**
+ * Removes a class selector from the list.
+ *
+ * @param name Name of selector to remove.
+ *
+ * @royaleignorecoercion HTMLElement
+ * @royaleignorecoercion DOMTokenList
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ function removeClass(name:String):void
+
+ /**
+ * Add or remove a class selector to/from the list.
+ *
+ * @param name Name of selector to add or remove.
+ * @param value True to add, False to remove.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ function toggleClass(name:String, value:Boolean):void
+
+ /**
+ * Search for the name in the element class list
+ *
+ * @param name Name of selector to find.
+ * @return return true if the name is found or false otherwise.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ function containsClass(name:String):Boolean
+ }
+}
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/MD5.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/MD5.as
index daef624..5da93c7 100644
--- a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/MD5.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/MD5.as
@@ -19,239 +19,297 @@
package org.apache.royale.utils
{
- /**
- * The MD5 Message-Digest Algorithm
- *
- * Implementation based on algorithm description at
- * http://www.faqs.org/rfcs/rfc1321.html
- */
+ /*
+ * Adapted from JavaScript MD5
+ * https://github.com/blueimp/JavaScript-MD5
+ *
+ * Copyright 2011, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * https://opensource.org/licenses/MIT
+ *
+ * Based on
+ * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
+ * Digest Algorithm, as defined in RFC 1321.
+ * Version 2.2 Copyright (C) Paul Johnston 1999 - 2009
+ * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
+ * Distributed under the BSD License
+ * See http://pajhome.org.uk/crypt/md5 for more info.
+ */
public class MD5 {
- /**
- * Performs the MD5 hash algorithm on a string.
- *
- * @param s The string to hash
- * @return A string containing the hash value of s
- * @langversion ActionScript 3.0
- * @playerversion Flash 8.5
- * @productversion Royale 0.8
- */
-
- public static function hash(s:String) :String{
- //Convert to BinaryData and send through hashBinary function
- // so as to only have complex code in one location
- var len:int = s.length;
- var bd:BinaryData = new BinaryData();
- for(var i:int = 0; i<len; i++){
- bd.writeByte(s.charCodeAt(i));
- }
- return hashBinary(bd);
+ /*
+ * Add integers, wrapping at 2^32. This uses 16-bit operations internally
+ * to work around bugs in some JS interpreters.
+ */
+ private static function safeAdd (x:int, y:int):int
+ {
+ var lsw:int = (x & 0xffff) + (y & 0xffff);
+ var msw:int = (x >> 16) + (y >> 16) + (lsw >> 16);
+ return (msw << 16) | (lsw & 0xffff);
}
- /**
- * Performs the MD5 hash algorithm on a BinaryData.
- *
- * @param s The string to hash
- * @return A string containing the hash value of s
- * @langversion ActionScript 3.0
- * @playerversion Flash 8.5
- * @productversion Royale 0.8
- */
- public static function hashBinary( s:BinaryData ):String {
- // initialize the md buffers
+
+ /*
+ * Bitwise rotate a 32-bit number to the left.
+ */
+ private static function bitRotateLeft (num:int, cnt:int):int
+ {
+ return (num << cnt) | (num >>> (32 - cnt))
+ }
+
+ /*
+ * These functions implement the four basic operations the algorithm uses.
+ */
+ private static function md5cmn (q:int, a:int, b:int, x:int, s:int, t:int):int
+ {
+ return safeAdd(bitRotateLeft(safeAdd(safeAdd(a, q), safeAdd(x, t)), s), b)
+ }
+
+ private static function md5ff (a:int, b:int, c:int, d:int, x:int, s:int, t:int):int {
+ return md5cmn((b & c) | (~b & d), a, b, x, s, t)
+ }
+
+ private static function md5gg (a:int, b:int, c:int, d:int, x:int, s:int, t:int):int
+ {
+ return md5cmn((b & d) | (c & ~d), a, b, x, s, t)
+ }
+ private static function md5hh (a:int, b:int, c:int, d:int, x:int, s:int, t:int):int
+ {
+ return md5cmn(b ^ c ^ d, a, b, x, s, t)
+ }
+ private static function md5ii (a:int, b:int, c:int, d:int, x:int, s:int, t:int):int
+ {
+ return md5cmn(c ^ (b | ~d), a, b, x, s, t)
+ }
+
+ /*
+ * Calculate the MD5 of an array of little-endian words, and a bit length.
+ */
+ private static function binlMD5 (x:Array, len:int):Array
+ {
+ /* append padding */
+ x[len >> 5] |= 0x80 << (len % 32)
+ x[((len + 64) >>> 9 << 4) + 14] = len
+
+ var i:int;
+ var olda:int;
+ var oldb:int;
+ var oldc:int;
+ var oldd:int;
var a:int = 1732584193;
var b:int = -271733879;
var c:int = -1732584194;
var d:int = 271733878;
- // variables to store previous values
- var aa:int;
- var bb:int;
- var cc:int;
- var dd:int;
+ for (i = 0; i < x.length; i += 16) {
+ olda = a;
+ oldb = b;
+ oldc = c;
+ oldd = d;
- // create the blocks from the string and
- // save the length as a local var to reduce
- // lookup in the loop below
- var x:Array = createBlocks( s );
- var len:int = x.length;
+ a = md5ff(a, b, c, d, x[i], 7, -680876936);
+ d = md5ff(d, a, b, c, x[i + 1], 12, -389564586);
+ c = md5ff(c, d, a, b, x[i + 2], 17, 606105819);
+ b = md5ff(b, c, d, a, x[i + 3], 22, -1044525330);
+ a = md5ff(a, b, c, d, x[i + 4], 7, -176418897);
+ d = md5ff(d, a, b, c, x[i + 5], 12, 1200080426);
+ c = md5ff(c, d, a, b, x[i + 6], 17, -1473231341);
+ b = md5ff(b, c, d, a, x[i + 7], 22, -45705983);
+ a = md5ff(a, b, c, d, x[i + 8], 7, 1770035416);
+ d = md5ff(d, a, b, c, x[i + 9], 12, -1958414417);
+ c = md5ff(c, d, a, b, x[i + 10], 17, -42063);
+ b = md5ff(b, c, d, a, x[i + 11], 22, -1990404162);
+ a = md5ff(a, b, c, d, x[i + 12], 7, 1804603682);
+ d = md5ff(d, a, b, c, x[i + 13], 12, -40341101);
+ c = md5ff(c, d, a, b, x[i + 14], 17, -1502002290);
+ b = md5ff(b, c, d, a, x[i + 15], 22, 1236535329);
- // loop over all of the blocks
- for ( var i:int = 0; i < len; i += 16) {
- // save previous values
- aa = a;
- bb = b;
- cc = c;
- dd = d;
+ a = md5gg(a, b, c, d, x[i + 1], 5, -165796510);
+ d = md5gg(d, a, b, c, x[i + 6], 9, -1069501632);
+ c = md5gg(c, d, a, b, x[i + 11], 14, 643717713);
+ b = md5gg(b, c, d, a, x[i], 20, -373897302);
+ a = md5gg(a, b, c, d, x[i + 5], 5, -701558691);
+ d = md5gg(d, a, b, c, x[i + 10], 9, 38016083);
+ c = md5gg(c, d, a, b, x[i + 15], 14, -660478335);
+ b = md5gg(b, c, d, a, x[i + 4], 20, -405537848);
+ a = md5gg(a, b, c, d, x[i + 9], 5, 568446438);
+ d = md5gg(d, a, b, c, x[i + 14], 9, -1019803690);
+ c = md5gg(c, d, a, b, x[i + 3], 14, -187363961);
+ b = md5gg(b, c, d, a, x[i + 8], 20, 1163531501);
+ a = md5gg(a, b, c, d, x[i + 13], 5, -1444681467);
+ d = md5gg(d, a, b, c, x[i + 2], 9, -51403784);
+ c = md5gg(c, d, a, b, x[i + 7], 14, 1735328473);
+ b = md5gg(b, c, d, a, x[i + 12], 20, -1926607734);
- // Round 1
- a = ff( a, b, c, d, x[i+ 0], 7, -680876936 ); // 1
- d = ff( d, a, b, c, x[i+ 1], 12, -389564586 ); // 2
- c = ff( c, d, a, b, x[i+ 2], 17, 606105819 ); // 3
- b = ff( b, c, d, a, x[i+ 3], 22, -1044525330 ); // 4
- a = ff( a, b, c, d, x[i+ 4], 7, -176418897 ); // 5
- d = ff( d, a, b, c, x[i+ 5], 12, 1200080426 ); // 6
- c = ff( c, d, a, b, x[i+ 6], 17, -1473231341 ); // 7
- b = ff( b, c, d, a, x[i+ 7], 22, -45705983 ); // 8
- a = ff( a, b, c, d, x[i+ 8], 7, 1770035416 ); // 9
- d = ff( d, a, b, c, x[i+ 9], 12, -1958414417 ); // 10
- c = ff( c, d, a, b, x[i+10], 17, -42063 ); // 11
- b = ff( b, c, d, a, x[i+11], 22, -1990404162 ); // 12
- a = ff( a, b, c, d, x[i+12], 7, 1804603682 ); // 13
- d = ff( d, a, b, c, x[i+13], 12, -40341101 ); // 14
- c = ff( c, d, a, b, x[i+14], 17, -1502002290 ); // 15
- b = ff( b, c, d, a, x[i+15], 22, 1236535329 ); // 16
+ a = md5hh(a, b, c, d, x[i + 5], 4, -378558);
+ d = md5hh(d, a, b, c, x[i + 8], 11, -2022574463);
+ c = md5hh(c, d, a, b, x[i + 11], 16, 1839030562);
+ b = md5hh(b, c, d, a, x[i + 14], 23, -35309556);
+ a = md5hh(a, b, c, d, x[i + 1], 4, -1530992060);
+ d = md5hh(d, a, b, c, x[i + 4], 11, 1272893353);
+ c = md5hh(c, d, a, b, x[i + 7], 16, -155497632);
+ b = md5hh(b, c, d, a, x[i + 10], 23, -1094730640);
+ a = md5hh(a, b, c, d, x[i + 13], 4, 681279174);
+ d = md5hh(d, a, b, c, x[i], 11, -358537222);
+ c = md5hh(c, d, a, b, x[i + 3], 16, -722521979);
+ b = md5hh(b, c, d, a, x[i + 6], 23, 76029189);
+ a = md5hh(a, b, c, d, x[i + 9], 4, -640364487);
+ d = md5hh(d, a, b, c, x[i + 12], 11, -421815835);
+ c = md5hh(c, d, a, b, x[i + 15], 16, 530742520);
+ b = md5hh(b, c, d, a, x[i + 2], 23, -995338651);
- // Round 2
- a = gg( a, b, c, d, x[i+ 1], 5, -165796510 ); // 17
- d = gg( d, a, b, c, x[i+ 6], 9, -1069501632 ); // 18
- c = gg( c, d, a, b, x[i+11], 14, 643717713 ); // 19
- b = gg( b, c, d, a, x[i+ 0], 20, -373897302 ); // 20
- a = gg( a, b, c, d, x[i+ 5], 5, -701558691 ); // 21
- d = gg( d, a, b, c, x[i+10], 9, 38016083 ); // 22
- c = gg( c, d, a, b, x[i+15], 14, -660478335 ); // 23
- b = gg( b, c, d, a, x[i+ 4], 20, -405537848 ); // 24
- a = gg( a, b, c, d, x[i+ 9], 5, 568446438 ); // 25
- d = gg( d, a, b, c, x[i+14], 9, -1019803690 ); // 26
- c = gg( c, d, a, b, x[i+ 3], 14, -187363961 ); // 27
- b = gg( b, c, d, a, x[i+ 8], 20, 1163531501 ); // 28
- a = gg( a, b, c, d, x[i+13], 5, -1444681467 ); // 29
- d = gg( d, a, b, c, x[i+ 2], 9, -51403784 ); // 30
- c = gg( c, d, a, b, x[i+ 7], 14, 1735328473 ); // 31
- b = gg( b, c, d, a, x[i+12], 20, -1926607734 ); // 32
+ a = md5ii(a, b, c, d, x[i], 6, -198630844);
+ d = md5ii(d, a, b, c, x[i + 7], 10, 1126891415);
+ c = md5ii(c, d, a, b, x[i + 14], 15, -1416354905);
+ b = md5ii(b, c, d, a, x[i + 5], 21, -57434055);
+ a = md5ii(a, b, c, d, x[i + 12], 6, 1700485571);
+ d = md5ii(d, a, b, c, x[i + 3], 10, -1894986606);
+ c = md5ii(c, d, a, b, x[i + 10], 15, -1051523);
+ b = md5ii(b, c, d, a, x[i + 1], 21, -2054922799);
+ a = md5ii(a, b, c, d, x[i + 8], 6, 1873313359);
+ d = md5ii(d, a, b, c, x[i + 15], 10, -30611744);
+ c = md5ii(c, d, a, b, x[i + 6], 15, -1560198380);
+ b = md5ii(b, c, d, a, x[i + 13], 21, 1309151649);
+ a = md5ii(a, b, c, d, x[i + 4], 6, -145523070);
+ d = md5ii(d, a, b, c, x[i + 11], 10, -1120210379);
+ c = md5ii(c, d, a, b, x[i + 2], 15, 718787259);
+ b = md5ii(b, c, d, a, x[i + 9], 21, -343485551);
- // Round 3
- a = hh( a, b, c, d, x[i+ 5], 4, -378558 ); // 33
- d = hh( d, a, b, c, x[i+ 8], 11, -2022574463 ); // 34
- c = hh( c, d, a, b, x[i+11], 16, 1839030562 ); // 35
- b = hh( b, c, d, a, x[i+14], 23, -35309556 ); // 36
- a = hh( a, b, c, d, x[i+ 1], 4, -1530992060 ); // 37
- d = hh( d, a, b, c, x[i+ 4], 11, 1272893353 ); // 38
- c = hh( c, d, a, b, x[i+ 7], 16, -155497632 ); // 39
- b = hh( b, c, d, a, x[i+10], 23, -1094730640 ); // 40
- a = hh( a, b, c, d, x[i+13], 4, 681279174 ); // 41
- d = hh( d, a, b, c, x[i+ 0], 11, -358537222 ); // 42
- c = hh( c, d, a, b, x[i+ 3], 16, -722521979 ); // 43
- b = hh( b, c, d, a, x[i+ 6], 23, 76029189 ); // 44
- a = hh( a, b, c, d, x[i+ 9], 4, -640364487 ); // 45
- d = hh( d, a, b, c, x[i+12], 11, -421815835 ); // 46
- c = hh( c, d, a, b, x[i+15], 16, 530742520 ); // 47
- b = hh( b, c, d, a, x[i+ 2], 23, -995338651 ); // 48
-
- // Round 4
- a = ii( a, b, c, d, x[i+ 0], 6, -198630844 ); // 49
- d = ii( d, a, b, c, x[i+ 7], 10, 1126891415 ); // 50
- c = ii( c, d, a, b, x[i+14], 15, -1416354905 ); // 51
- b = ii( b, c, d, a, x[i+ 5], 21, -57434055 ); // 52
- a = ii( a, b, c, d, x[i+12], 6, 1700485571 ); // 53
- d = ii( d, a, b, c, x[i+ 3], 10, -1894986606 ); // 54
- c = ii( c, d, a, b, x[i+10], 15, -1051523 ); // 55
- b = ii( b, c, d, a, x[i+ 1], 21, -2054922799 ); // 56
- a = ii( a, b, c, d, x[i+ 8], 6, 1873313359 ); // 57
- d = ii( d, a, b, c, x[i+15], 10, -30611744 ); // 58
- c = ii( c, d, a, b, x[i+ 6], 15, -1560198380 ); // 59
- b = ii( b, c, d, a, x[i+13], 21, 1309151649 ); // 60
- a = ii( a, b, c, d, x[i+ 4], 6, -145523070 ); // 61
- d = ii( d, a, b, c, x[i+11], 10, -1120210379 ); // 62
- c = ii( c, d, a, b, x[i+ 2], 15, 718787259 ); // 63
- b = ii( b, c, d, a, x[i+ 9], 21, -343485551 ); // 64
-
- a += aa;
- b += bb;
- c += cc;
- d += dd;
+ a = safeAdd(a, olda);
+ b = safeAdd(b, oldb);
+ c = safeAdd(c, oldc);
+ d = safeAdd(d, oldd);
}
-
- // Finish up by concatening the buffers with their hex output
- return IntUtil.toHex( a ) + IntUtil.toHex( b ) + IntUtil.toHex( c ) + IntUtil.toHex( d );
+ return [a, b, c, d];
}
- /**
- * Auxiliary function f as defined in RFC
- */
- private static function f( x:int, y:int, z:int ):int {
- return ( x & y ) | ( (~x) & z );
- }
-
- /**
- * Auxiliary function g as defined in RFC
- */
- private static function g( x:int, y:int, z:int ):int {
- return ( x & z ) | ( y & (~z) );
- }
-
- /**
- * Auxiliary function h as defined in RFC
- */
- private static function h( x:int, y:int, z:int ):int {
- return x ^ y ^ z;
- }
-
- /**
- * Auxiliary function i as defined in RFC
- */
- private static function i( x:int, y:int, z:int ):int {
- return y ^ ( x | (~z) );
- }
-
- /**
- * A generic transformation function. The logic of ff, gg, hh, and
- * ii are all the same, minus the function used, so pull that logic
- * out and simplify the method bodies for the transoformation functions.
- */
- private static function transform( func:Function, a:int, b:int, c:int, d:int, x:int, s:int, t:int):int {
- var tmp:int = a + int( func( b, c, d ) ) + x + t;
- return IntUtil.rol( tmp, s ) + b;
- }
-
- /**
- * ff transformation function
- */
- private static function ff ( a:int, b:int, c:int, d:int, x:int, s:int, t:int ):int {
- return transform( f, a, b, c, d, x, s, t );
- }
-
- /**
- * gg transformation function
- */
- private static function gg ( a:int, b:int, c:int, d:int, x:int, s:int, t:int ):int {
- return transform( g, a, b, c, d, x, s, t );
- }
-
- /**
- * hh transformation function
- */
- private static function hh ( a:int, b:int, c:int, d:int, x:int, s:int, t:int ):int {
- return transform( h, a, b, c, d, x, s, t );
- }
-
- /**
- * ii transformation function
- */
- private static function ii ( a:int, b:int, c:int, d:int, x:int, s:int, t:int ):int {
- return transform( i, a, b, c, d, x, s, t );
- }
-
- /**
- * Converts a string to a sequence of 16-word blocks
- * that we'll do the processing on. Appends padding
- * and length in the process.
- *
- * @param s The string to split into blocks
- * @return An array containing the blocks that s was
- * split into.
- */
- private static function createBlocks( s:BinaryData ):Array {
- var blocks:Array = [];
- var len:int = s.length * 8;
- var mask:int = 0xFF; // ignore hi byte of characters > 0xFF
- for( var i:int = 0; i < len; i += 8 ) {
- blocks[ i >> 5 ] |= ( s[ i / 8 ] & mask ) << ( i % 32 );
+ /*
+ * Convert an array of little-endian words to a string
+ */
+ private static function binl2rstr (input:Array):String
+ {
+ var i:int;
+ var output:String = ''
+ var length32:int = input.length * 32
+ for (i = 0; i < length32; i += 8)
+ {
+ output += String.fromCharCode((input[i >> 5] >>> (i % 32)) & 0xff);
}
-
- // append padding and length
- blocks[ len >> 5 ] |= 0x80 << ( len % 32 );
- blocks[ ( ( ( len + 64 ) >>> 9 ) << 4 ) + 14 ] = len;
- return blocks;
+ return output;
}
+
+ /*
+ * Convert a raw string to an array of little-endian words
+ * Characters >255 have their high-byte silently ignored.
+ */
+ private static function rstr2binl (input:String):Array {
+ var i:int;
+ var output:Array = [];
+ output[(input.length >> 2) - 1] = undefined;
+ for (i = 0; i < output.length; i += 1)
+ {
+ output[i] = 0;
+ }
+ var length8:int = input.length * 8;
+ for (i = 0; i < length8; i += 8)
+ {
+ output[i >> 5] |= (input.charCodeAt(i / 8) & 0xff) << (i % 32);
+ }
+ return output;
+ }
+
+ /*
+ * Calculate the MD5 of a raw string
+ */
+ private static function rstrMD5 (s:String):String
+ {
+ return binl2rstr(binlMD5(rstr2binl(s), s.length * 8));
+ }
+
+ /*
+ * Calculate the HMAC-MD5, of a key and some data (raw strings)
+ */
+ private static function rstrHMACMD5 (key:String, data):String
+ {
+ var i:int;
+ var bkey:Array = rstr2binl(key);
+ var ipad:Array = [];
+ var opad:Array = [];
+ var hash:Array;
+ ipad[15] = opad[15] = undefined;
+ if (bkey.length > 16) {
+ bkey = binlMD5(bkey, key.length * 8);
+ }
+ for (i = 0; i < 16; i += 1)
+ {
+ ipad[i] = bkey[i] ^ 0x36363636;
+ opad[i] = bkey[i] ^ 0x5c5c5c5c;
+ }
+ hash = binlMD5(ipad.concat(rstr2binl(data)), 512 + data.length * 8);
+ return binl2rstr(binlMD5(opad.concat(hash), 512 + 128));
+ }
+
+ /*
+ * Convert a raw string to a hex string
+ */
+ private static function rstr2hex (input:String):String
+ {
+ var hexTab:String = '0123456789abcdef';
+ var output:String = '';
+ var x:int;
+ var i:int;
+ for (i = 0; i < input.length; i += 1) {
+ x = input.charCodeAt(i);
+ output += hexTab.charAt((x >>> 4) & 0x0f) + hexTab.charAt(x & 0x0f);
+ }
+ return output;
+ }
+
+ /*
+ * Encode a string as utf-8
+ */
+ private static function str2rstrUTF8 (input:String):String
+ {
+ return unescape(encodeURIComponent(input));
+ }
+
+ /*
+ * Take string arguments and return either raw or hex encoded strings
+ */
+ private static function rawMD5 (s:String):String
+ {
+ return rstrMD5(str2rstrUTF8(s));
+ }
+ private static function hexMD5 (s:String):String
+ {
+ return rstr2hex(rawMD5(s));
+ }
+ private static function rawHMACMD5 (k:String, d:String):String
+ {
+ return rstrHMACMD5(str2rstrUTF8(k), str2rstrUTF8(d));
+ }
+ private static function hexHMACMD5 (k:String, d:String):String
+ {
+ return rstr2hex(rawHMACMD5(k, d));
+ }
+ public static function hash(value:String):String
+ {
+ return hexMD5(value);
+ }
+ // private static function md5 (string, key, raw) {
+ // if (!key) {
+ // if (!raw) {
+ // return hexMD5(string)
+ // }
+ // return rawMD5(string)
+ // }
+ // if (!raw) {
+ // return hexHMACMD5(key, string)
+ // }
+ // return rawHMACMD5(key, string)
+ // }
+
+
}
}
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/PointUtils.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/PointUtils.as
index 264102c..f96e61c 100644
--- a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/PointUtils.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/PointUtils.as
@@ -71,18 +71,24 @@
var x:Number = pt.x;
var y:Number = pt.y;
var element:HTMLElement = local.element as HTMLElement;
+ if ( element.getBoundingClientRect ) {// TODO take scrollbar widths into account
+ var rect:Object = element.getBoundingClientRect();
+ x = x - rect.left - window.scrollX;
+ y = y - rect.top - window.scrollY;
+ } else { // for older browsers, but offsetParent is soon to be deprecated from chrome
- do {
- x -= element.offsetLeft;
- y -= element.offsetTop;
- if (local['parent'] !== undefined) {
- local = local.parent;
- element = local ? local.element as HTMLElement : null;
- } else {
- element = null;
+ do {
+ x -= element.offsetLeft;
+ y -= element.offsetTop;
+ if (local['parent'] !== undefined) {
+ local = local.parent;
+ element = local ? local.element as HTMLElement : null;
+ } else {
+ element = null;
+ }
}
+ while (element);
}
- while (element);
return new org.apache.royale.geom.Point(x, y);
}
@@ -119,8 +125,8 @@
if ( element.getBoundingClientRect ) {// TODO take scrollbar widths into account
var rect:Object = element.getBoundingClientRect();
- x = rect.left + x;
- y = rect.top + y;
+ x = rect.left + x + window.scrollX;
+ y = rect.top + y + window.scrollY;
} else { // for older browsers, but offsetParent is soon to be deprecated from from chrome
do {
x += element.offsetLeft;
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/StringUtil.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/StringUtil.as
index a8ed294..8e7f6dc 100644
--- a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/StringUtil.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/StringUtil.as
@@ -332,5 +332,29 @@
return allowIt;
}
+
+ /**
+ * Removes word from a String and return the new result string
+ *
+ * @param str The String to be modified.
+ * @param wordToSeach The word string to search and remove from str
+ *
+ * @return <code>String</code> the string without the word
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public static function removeWord(str:String, wordToSeach:String):String
+ {
+ var pos:Number;
+ while(str.search(wordToSeach) > -1)
+ {
+ pos = str.search(wordToSeach);
+ str = str.substring(0, pos) + str.substring(pos + wordToSeach.length, str.length);
+ }
+ return str;
+ }
}
}
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/UIDUtil.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/UIDUtil.as
index 601fff6..7f28f15 100644
--- a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/UIDUtil.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/UIDUtil.as
@@ -115,7 +115,14 @@
UIDBuffer.writeByte(DASH);
- var time:uint = new Date().getTime(); // extract last 8 digits
+ COMPILE::JS
+ {
+ var time:uint = Math.floor(new Date().getTime()/1000); // extract last 8 digits
+ }
+ COMPILE::SWF
+ {
+ var time:uint = new Date().getTime(); // extract last 8 digits
+ }
var timeString:String = time.toString(16).toUpperCase();
// 0xFFFFFFFF milliseconds ~= 3 days, so timeString may have between 1 and 8 digits, hence we need to pad with 0s to 8 digits
for (i = 8; i > timeString.length; i--)
@@ -128,7 +135,7 @@
}
UIDBuffer.position = 0;
- return UIDBuffer.readUTFBytes(UIDBuffer.length);
+ return UIDBuffer.toString();//UIDBuffer.readUTFBytes(UIDBuffer.length);
}
/**
@@ -162,7 +169,7 @@
UIDBuffer.writeByte(ALPHA_CHAR_CODES[(b & 0xF0) >>> 4]);
UIDBuffer.writeByte(ALPHA_CHAR_CODES[(b & 0x0F)]);
}
- return UIDBuffer.readUTFBytes(UIDBuffer.length);
+ return UIDBuffer.readUTFBytes(UIDBuffer.length);//UIDBuffer.toString(); ??
}
return null;
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/css/addDynamicSelector.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/css/addDynamicSelector.as
new file mode 100644
index 0000000..b7e495a
--- /dev/null
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/css/addDynamicSelector.as
@@ -0,0 +1,57 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.utils.css
+{
+ import org.apache.royale.core.IUIBase;
+
+ /**
+ * Adds a CSS selector dynamically at runtime.
+ *
+ * @param selector The CSS selector.
+ *
+ * @param rule The CSS rule to apply.
+ *
+ * @langversion 3.0
+ * @productversion Royale 0.9.3
+ * @royaleignorecoercion CSSStyleSheet
+ * @royaleignorecoercion HTMLStyleElement
+ */
+ public function addDynamicSelector(selector:String, rule:String):void
+ {
+ COMPILE::JS
+ {
+ var selectorString:String = selector + ' { ' + rule + ' }'
+ var element:HTMLStyleElement = document.getElementById("royale_dynamic_css") as HTMLStyleElement;
+ if(element)
+ {
+ var sheet:CSSStyleSheet = element.sheet as CSSStyleSheet;
+ sheet.insertRule(selectorString);
+ }
+ else
+ {
+ var style:HTMLStyleElement = document.createElement('style') as HTMLStyleElement;
+ style.type = 'text/css';
+ style.id = "royale_dynamic_css";
+ style.innerHTML = selectorString;
+ document.getElementsByTagName('head')[0].appendChild(style);
+ }
+ }
+ }
+
+}
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/addStyles.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/addStyles.as
deleted file mode 100644
index c04a8fe..0000000
--- a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/addStyles.as
+++ /dev/null
@@ -1,57 +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 "Licens"); 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.utils.cssclasslist
-{
- import org.apache.royale.core.IUIBase;
-
- /**
- * Add one or more class selectors to the component. If the specified class already
- * exist, the class will not be added.
- *
- * Use of these utility functions should not be mixed with modifying the component's
- * className property at runtime. Also the component's className property will not
- * reflect modifications made with this API.
- *
- * @param component The component that will have selectors added or removed.
- *
- * @param value A String with the style (or list of styles separated by an space) to
- * add to the component.
- *
- * @langversion 3.0
- * @productversion Royale 0.9.3
- * @royaleignorecoercion HTMLElement
- */
- public function addStyles(component:IUIBase, value:String):void
- {
- COMPILE::JS
- {
- if (value.indexOf(" ") >= 0)
- {
- var classes:Array = value.split(" ");
- var element:HTMLElement = component.element as HTMLElement
- element.classList.add.apply(element.classList, classes);
- }
- else
- {
- component.element.classList.add(value);
- }
- }
- }
-
-}
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/removeStyles.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/removeStyles.as
deleted file mode 100644
index e313747..0000000
--- a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/removeStyles.as
+++ /dev/null
@@ -1,57 +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 "Licens"); 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.utils.cssclasslist
-{
- import org.apache.royale.core.IUIBase;
-
- /**
- * Removes one or more styles from the component. Removing a class that does not
- * exist, does not throw any error.
- *
- * Use of these utility functions should not be mixed with modifying the component's
- * className property at runtime. Also the component's className property will not
- * reflect modifications made with this API.
- *
- * @param component The component that will have selectors added or removed.
- *
- * @param value A String with the style (or styles separated by an space) to
- * remove from the component. If the string is empty doesn't perform any action.
- *
- * @langversion 3.0
- * @productversion Royale 0.9.3
- * @royaleignorecoercion HTMLElement
- */
- public function removeStyles(component:IUIBase, value:String):void
- {
- if (value == "") return;
-
- COMPILE::JS
- {
- if (value.indexOf(" ") >= 0)
- {
- var classes:Array = value.split(" ");
- var element:HTMLElement = component.element as HTMLElement
- element.classList.remove.apply(element.classList, classes);
- } else
- {
- component.element.classList.remove(value);
- }
- }
- }
-}
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/toggleStyle.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/toggleStyle.as
deleted file mode 100644
index 6685576..0000000
--- a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/toggleStyle.as
+++ /dev/null
@@ -1,53 +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 "Licens"); 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.utils.cssclasslist
-{
- import org.apache.royale.core.IUIBase;
-
- /**
- * Adds or removes a single style (class selector name).
- *
- * Use of these utility functions should not be mixed with modifying the component's
- * className property at runtime. Also the component's className property will not
- * reflect modifications made with this API.
- *
- * @param component The component that will have selectors added or removed.
- *
- * @param value If the selector name exists it is removed and the return value is false.
- * If the style does not exist, it is added to the element, and the return value is true.
- *
- * @param force A Boolean value that forces the class to be added
- * or removed, regardless of whether or not it already existed.
- *
- * @langversion 3.0
- * @productversion Royale 0.9.3
- */
- public function toggleStyle(component:IUIBase, value:String, force:Boolean = false):Boolean
- {
- COMPILE::JS
- {
- return component.element.classList.toggle(value, force);
- }
- COMPILE::SWF
- {
- // TODO (aharui) SWF Implementation
- return true;
- }
- }
-}
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/measureComponent.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/measureComponent.as
index f29401f..26e12f0 100644
--- a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/measureComponent.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/measureComponent.as
@@ -4,7 +4,7 @@
// 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 "Licens"); you may not use this file except in compliance with
+// (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
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/string/contains.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/string/contains.as
index 2e16d52..4d80993 100644
--- a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/string/contains.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/string/contains.as
@@ -4,7 +4,7 @@
// 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 "Licens"); you may not use this file except in compliance with
+// (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
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/string/isWhitespace.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/string/isWhitespace.as
index 0fd7bd7..d4b53e6 100644
--- a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/string/isWhitespace.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/string/isWhitespace.as
@@ -4,7 +4,7 @@
// 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 "Licens"); you may not use this file except in compliance with
+// (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
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/string/trim.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/string/trim.as
index 2d93f90..1e58a34 100644
--- a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/string/trim.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/string/trim.as
@@ -4,7 +4,7 @@
// 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 "Licens"); you may not use this file except in compliance with
+// (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
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/string/trimLeft.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/string/trimLeft.as
index 0842830..f5e27a2 100644
--- a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/string/trimLeft.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/string/trimLeft.as
@@ -4,7 +4,7 @@
// 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 "Licens"); you may not use this file except in compliance with
+// (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
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/string/trimRight.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/string/trimRight.as
index 3370286..15fedf0 100644
--- a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/string/trimRight.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/string/trimRight.as
@@ -4,7 +4,7 @@
// 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 "Licens"); you may not use this file except in compliance with
+// (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
diff --git a/frameworks/projects/DragDrop/src/main/royale/org/apache/royale/html/beads/DragDropListView.as b/frameworks/projects/DragDrop/src/main/royale/org/apache/royale/html/beads/DragDropListView.as
index 27e86cb..cdfccd4 100644
--- a/frameworks/projects/DragDrop/src/main/royale/org/apache/royale/html/beads/DragDropListView.as
+++ b/frameworks/projects/DragDrop/src/main/royale/org/apache/royale/html/beads/DragDropListView.as
@@ -18,16 +18,10 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html.beads
{
- import org.apache.royale.core.IItemRendererParent;
- import org.apache.royale.core.IContainer;
import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IContainer;
import org.apache.royale.core.UIBase;
- import org.apache.royale.events.Event;
- import org.apache.royale.events.IEventDispatcher;
import org.apache.royale.html.beads.ListView;
- import org.apache.royale.html.beads.layouts.VerticalLayout;
- import org.apache.royale.html.supportClasses.DataGroup;
- import org.apache.royale.html.supportClasses.ScrollingViewport;
/**
@@ -50,6 +44,7 @@
/**
* @private
+ * @royaleignorecoercion org.apache.royale.core.UIBase
*/
override public function set strand(value:IStrand):void
{
@@ -70,6 +65,7 @@
/**
* @private
+ * @royaleignorecoercion org.apache.royale.core.UIBase
*/
override public function afterLayout():void
{
@@ -104,6 +100,8 @@
/**
* @private
+ * @royaleignorecoercion org.apache.royale.core.IContainer
+
*/
override public function set strand(value:IStrand):void
{
@@ -121,6 +119,7 @@
/**
* @private
+ * @royaleignorecoercion org.apache.royale.core.UIBase
*/
override public function afterLayout():void
{
diff --git a/frameworks/projects/Express/src/main/resources/express-manifest.xml b/frameworks/projects/Express/src/main/resources/express-manifest.xml
index e7b8b2e..baea426 100644
--- a/frameworks/projects/Express/src/main/resources/express-manifest.xml
+++ b/frameworks/projects/Express/src/main/resources/express-manifest.xml
@@ -83,7 +83,7 @@
<component id="NumericStepper" class="org.apache.royale.express.NumericStepper" />
<component id="TextFieldItemRenderer" class="org.apache.royale.html.supportClasses.TextFieldItemRenderer" lookupOnly="true" />
<component id="StringItemRenderer" class="org.apache.royale.html.supportClasses.StringItemRenderer" lookupOnly="true" />
- <component id="DataItemRenderer" class="org.apache.royale.html.supportClasses.DataItemRenderer" lookupOnly="true" />
+ <component id="DataItemRenderer" class="org.apache.royale.core.DataItemRenderer" lookupOnly="true" />
<component id="ButtonBarButtonItemRenderer" class="org.apache.royale.html.supportClasses.ButtonBarButtonItemRenderer" lookupOnly="true" />
<component id="VScrollBar" class="org.apache.royale.html.supportClasses.VScrollBar" lookupOnly="true" />
<component id="NumericOnlyTextInputBead" class="org.apache.royale.html.accessories.NumericOnlyTextInputBead" lookupOnly="true" />
diff --git a/frameworks/projects/Express/src/main/royale/org/apache/royale/express/List.as b/frameworks/projects/Express/src/main/royale/org/apache/royale/express/List.as
index 9a1b004..98c89ae 100644
--- a/frameworks/projects/Express/src/main/royale/org/apache/royale/express/List.as
+++ b/frameworks/projects/Express/src/main/royale/org/apache/royale/express/List.as
@@ -22,10 +22,10 @@
import org.apache.royale.core.IBead;
import org.apache.royale.events.Event;
import org.apache.royale.html.List;
+ import org.apache.royale.html.beads.models.ArraySelectionModel;
import org.apache.royale.html.beads.DataItemRendererFactoryForArrayData;
import org.apache.royale.html.beads.DataItemRendererFactoryForArrayList;
import org.apache.royale.html.beads.models.ArrayListSelectionModel;
- import org.apache.royale.html.beads.models.ArraySelectionModel;
import org.apache.royale.html.beads.SingleSelectionDragSourceBead;
import org.apache.royale.html.beads.SingleSelectionDragImageBead;
import org.apache.royale.html.beads.SingleSelectionDropTargetBead;
diff --git a/frameworks/projects/Express/src/main/royale/org/apache/royale/express/beads/layouts/DataGridLayout.as b/frameworks/projects/Express/src/main/royale/org/apache/royale/express/beads/layouts/DataGridLayout.as
index 08a563d..3d63125 100644
--- a/frameworks/projects/Express/src/main/royale/org/apache/royale/express/beads/layouts/DataGridLayout.as
+++ b/frameworks/projects/Express/src/main/royale/org/apache/royale/express/beads/layouts/DataGridLayout.as
@@ -23,6 +23,8 @@
import org.apache.royale.core.IDataGridModel;
import org.apache.royale.core.IStrand;
import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.ILayoutChild;
+ import org.apache.royale.core.IParent;
import org.apache.royale.core.UIBase;
import org.apache.royale.core.ValuesManager;
import org.apache.royale.core.layout.EdgeData;
@@ -65,6 +67,7 @@
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.0
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
*/
public function set strand(value:IStrand):void
{
@@ -76,10 +79,17 @@
(_strand as IEventDispatcher).addEventListener("layoutNeeded", handleLayoutNeeded);
}
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IUIBase
+ */
private function get host():IUIBase
{
return _strand as IUIBase;
}
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
private function get uiHost():UIBase
{
return _strand as UIBase;
@@ -101,7 +111,16 @@
* been placed. For example, with three columns of widths, "50", "100%", and "80" the
* 100% size represents the amount left over after the 130 pixels have been removed from
* whatever width the DataGrid currently has at the time this layout is executed.
- * @royaleignorecoercion org.apache.royale.core.IBorderPaddingMarginValuesImpl
+ *
+ * @royaleignorecoercion org.apache.royale.core.IBorderPaddingMarginValuesImpl
+ * @royaleignorecoercion org.apache.royale.core.IUIBase
+ * @royaleignorecoercion org.apache.royale.core.IParent
+ * @royaleignorecoercion org.apache.royale.core.ILayoutChild
+ * @royaleignorecoercion org.apache.royale.html.beads.IDataGridView
+ * @royaleignorecoercion org.apache.royale.core.IDataGridModel
+ * @royaleemitcoercion org.apache.royale.html.supportClasses.DataGridColumn
+ * @royaleignorecoercion org.apache.royale.html.beads.models.ButtonBarModel
+ * @royaleignorecoercion org.apache.royale.html.beads.IDrawingLayerBead
*/
public function layout():Boolean
{
@@ -131,7 +150,7 @@
for(i=0; i < displayedColumns.length; i++) {
columnDef = model.columns[i] as DataGridColumn;
- var columnList:UIBase = displayedColumns[i] as UIBase;
+ var columnList:IUIBase = displayedColumns[i] as IUIBase;
// probably do not need to set (x,y), but if the Container's layout requires it, they will be set.
columnList.x = xpos;
@@ -160,7 +179,7 @@
header.width = useWidth;
}
COMPILE::JS {
- (header as UIBase).percentWidth = 100;
+ (header as ILayoutChild).percentWidth = 100;
}
// header's height is set in CSS
@@ -170,7 +189,7 @@
listArea.width = useWidth;
}
COMPILE::JS {
- (listArea as UIBase).percentWidth = 100;
+ (listArea as ILayoutChild).percentWidth = 100;
}
listArea.height = useHeight - header.height;
@@ -180,8 +199,8 @@
// Put the drawing layer back, sizing it to fit over the listArea.
if (layerBead != null && layerBead.layer != null) {
- UIBase(_strand).removeElement(layerBead.layer);
- UIBase(_strand).addElement(layerBead.layer); // always keep it on top
+ IParent(_strand).removeElement(layerBead.layer);
+ IParent(_strand).addElement(layerBead.layer); // always keep it on top
var layerX:Number = listArea.x;
var layerY:Number = listArea.y;
diff --git a/frameworks/projects/Flat/src/main/resources/defaults.css b/frameworks/projects/Flat/src/main/resources/defaults.css
index 4fcb226..6f557ae 100644
--- a/frameworks/projects/Flat/src/main/resources/defaults.css
+++ b/frameworks/projects/Flat/src/main/resources/defaults.css
@@ -237,7 +237,7 @@
position: absolute;
z-index: 1000;
padding: 0;
- margin-top: 9px;
+ margin-top: 0px;
font-size: 14px;
background-color: #f3f4f5;
border: none;
@@ -603,7 +603,8 @@
IBeadModel: ClassReference("org.apache.royale.html.beads.models.ArraySelectionModel");
IBeadView: ClassReference("org.apache.royale.flat.beads.DropDownListView");
IBeadController: ClassReference("org.apache.royale.html.beads.controllers.DropDownListController");
- IPopUp: ClassReference("org.apache.royale.flat.supportClasses.DropDownListList");
+ IPopUp: ClassReference("org.apache.royale.flat.supportClasses.DropDownListList");
+ border-style: none;
}
DropDownListList
diff --git a/frameworks/projects/Flat/src/main/resources/flat-manifest.xml b/frameworks/projects/Flat/src/main/resources/flat-manifest.xml
index 4f9c3a8..8b2e909 100644
--- a/frameworks/projects/Flat/src/main/resources/flat-manifest.xml
+++ b/frameworks/projects/Flat/src/main/resources/flat-manifest.xml
@@ -63,7 +63,7 @@
<component id="NumericStepper" class="org.apache.royale.html.NumericStepper" lookupOnly="true" />
<component id="TextFieldItemRenderer" class="org.apache.royale.html.supportClasses.TextFieldItemRenderer" lookupOnly="true" />
<component id="StringItemRenderer" class="org.apache.royale.html.supportClasses.StringItemRenderer" lookupOnly="true" />
- <component id="DataItemRenderer" class="org.apache.royale.html.supportClasses.DataItemRenderer" lookupOnly="true" />
+ <component id="DataItemRenderer" class="org.apache.royale.core.DataItemRenderer" lookupOnly="true" />
<component id="ButtonBarButtonItemRenderer" class="org.apache.royale.html.supportClasses.ButtonBarButtonItemRenderer" lookupOnly="true" />
<component id="VScrollBar" class="org.apache.royale.html.supportClasses.VScrollBar" lookupOnly="true" />
<component id="NumericOnlyTextInputBead" class="org.apache.royale.html.accessories.NumericOnlyTextInputBead" lookupOnly="true" />
diff --git a/frameworks/projects/Flat/src/main/royale/org/apache/royale/flat/DropDownList.as b/frameworks/projects/Flat/src/main/royale/org/apache/royale/flat/DropDownList.as
index 72ee499..57df23a 100644
--- a/frameworks/projects/Flat/src/main/royale/org/apache/royale/flat/DropDownList.as
+++ b/frameworks/projects/Flat/src/main/royale/org/apache/royale/flat/DropDownList.as
@@ -90,6 +90,7 @@
public function DropDownList()
{
super();
+ typeNames = "DropDownList";
model = new ArraySelectionModel();
}
diff --git a/frameworks/projects/Formatters/src/main/resources/basic-manifest.xml b/frameworks/projects/Formatters/src/main/resources/basic-manifest.xml
index ce9d2d4..05bc912 100644
--- a/frameworks/projects/Formatters/src/main/resources/basic-manifest.xml
+++ b/frameworks/projects/Formatters/src/main/resources/basic-manifest.xml
@@ -26,4 +26,5 @@
<component id="DateFormatYYYYMMDD" class="org.apache.royale.html.accessories.DateFormatYYYYMMDD"/>
<component id="NumberFormatter" class="org.apache.royale.html.accessories.NumberFormatter"/>
<component id="CurrencyFormatter" class="org.apache.royale.html.accessories.CurrencyFormatter"/>
+ <component id="DateAndTimeFormatter" class="org.apache.royale.html.accessories.DateAndTimeFormatter"/>
</componentPackage>
diff --git a/frameworks/projects/Formatters/src/main/royale/org/apache/royale/html/accessories/DateAndTimeFormatter.as b/frameworks/projects/Formatters/src/main/royale/org/apache/royale/html/accessories/DateAndTimeFormatter.as
new file mode 100644
index 0000000..0b3c09d
--- /dev/null
+++ b/frameworks/projects/Formatters/src/main/royale/org/apache/royale/html/accessories/DateAndTimeFormatter.as
@@ -0,0 +1,175 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.html.accessories
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IBeadModel;
+ import org.apache.royale.core.Strand;
+ import org.apache.royale.core.IDateChooserModel;
+ import org.apache.royale.core.IFormatBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IStrandWithModel;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+
+ /**
+ * The DateFormatter class wraps an IFormatBead and adds an hour.
+ *
+ * @royaleignoreimport org.apache.royale.core.IStrandWithModel
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class DateAndTimeFormatter extends Strand implements IFormatBead
+ {
+
+ private var _formattedResult:String;
+ private var _originalFormatter:IFormatBead;
+ private var _model:IDateChooserModel;
+ private var _strand:IStrand;
+ /**
+ * The name of the property on the model holding the value to be formatted.
+ * The default is selectedDate.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get propertyName():String
+ {
+ return _originalFormatter.propertyName;
+ }
+
+ public function set propertyName(value:String):void
+ {
+ _originalFormatter.propertyName = value;
+ }
+
+ /**
+ * The name of the event dispatched when the property changes. The
+ * default is selectedDateChanged.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get eventName():String
+ {
+ return _originalFormatter.eventName;
+ }
+
+ public function set eventName(value:String):void
+ {
+ _originalFormatter.eventName = value;
+ }
+
+ /**
+ * The formatted result.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get formattedString():String
+ {
+ return _formattedResult;
+ }
+
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @royaleignorecoercion org.apache.royale.core.IStrandWithModel
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ _model = IStrandWithModel(_strand).model as IDateChooserModel;
+ if (_originalFormatter)
+ {
+ addBead(_originalFormatter);
+ } else
+ {
+ _originalFormatter = getBeadByType(IFormatBead) as IFormatBead;
+ }
+ IEventDispatcher(_originalFormatter).addEventListener('formatChanged', formatChangedHandler);
+ }
+
+ /**
+ * @copy org.apache.royale.core.UIBase#model
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ override public function get model():IBeadModel
+ {
+ return _model;
+ }
+
+ override public function addBead(bead:IBead):void
+ {
+ if (model)
+ {
+ super.addBead(bead);
+ } else
+ {
+ _originalFormatter = bead as IFormatBead;
+ }
+ }
+
+ private function formatChangedHandler(event:Event):void
+ {
+ var dateResult:String = _originalFormatter.formattedString;
+ var selectedDate:Date = _model.selectedDate;
+ _formattedResult = getFormattedResult(selectedDate);
+ dispatchEvent(new Event('formatChanged'));
+ }
+
+ protected function getFormattedResult(date:Date):String
+ {
+ var formattedHour:String = getFormattedHour(date);
+ return _originalFormatter.formattedString + " " + formattedHour;
+ }
+
+ private function getNumberAsPaddedString(value:Number):String
+ {
+ return (value < 10 ? "0" : "") + value;
+ }
+
+ protected function getFormattedHour(date:Date):String
+ {
+ var hours:String = getNumberAsPaddedString(date.getHours());
+ var minutes:String = getNumberAsPaddedString(date.getMinutes());
+ var seconds:String = getNumberAsPaddedString(date.getSeconds());
+ return hours + ":" + minutes + ":" + seconds;
+ }
+ }
+}
diff --git a/frameworks/projects/GoogleMaps/src/main/royale/google/pseudo/HTMLInputElement.as b/frameworks/projects/GoogleMaps/src/main/royale/google/pseudo/HTMLInputElement.as
index 59bde13..768fd9b 100644
--- a/frameworks/projects/GoogleMaps/src/main/royale/google/pseudo/HTMLInputElement.as
+++ b/frameworks/projects/GoogleMaps/src/main/royale/google/pseudo/HTMLInputElement.as
@@ -19,7 +19,6 @@
// used to quiet errors in asdoc
package google.pseudo {
-public class HTMLInputElement extends Object {
+ public class HTMLInputElement{
+ }
}
-}
-
diff --git a/frameworks/projects/GoogleMaps/src/main/royale/google/pseudo/Node.as b/frameworks/projects/GoogleMaps/src/main/royale/google/pseudo/Node.as
index cd4bba1..53e29ba 100644
--- a/frameworks/projects/GoogleMaps/src/main/royale/google/pseudo/Node.as
+++ b/frameworks/projects/GoogleMaps/src/main/royale/google/pseudo/Node.as
@@ -19,7 +19,7 @@
// used to quiet issues with asdoc
package google.pseudo {
-public class Node extends Object {
-}
+ public class Node{
+ }
}
diff --git a/frameworks/projects/Graphics/src/main/resources/defaults.css b/frameworks/projects/Graphics/src/main/resources/defaults.css
index 42b61ee..6bc0b1b 100644
--- a/frameworks/projects/Graphics/src/main/resources/defaults.css
+++ b/frameworks/projects/Graphics/src/main/resources/defaults.css
@@ -35,3 +35,7 @@
IBinaryImageLoader: ClassReference("org.apache.royale.html.beads.BinaryImageLoader");
}
+svg|DropShadowFilter
+{
+ Filter: ClassReference("org.apache.royale.svg.Filter");
+}
\ No newline at end of file
diff --git a/frameworks/projects/Graphics/src/main/resources/svg-manifest.xml b/frameworks/projects/Graphics/src/main/resources/svg-manifest.xml
index 37f2182..72aa7a5 100644
--- a/frameworks/projects/Graphics/src/main/resources/svg-manifest.xml
+++ b/frameworks/projects/Graphics/src/main/resources/svg-manifest.xml
@@ -22,8 +22,18 @@
<componentPackage>
<component id="TransformBead" class="org.apache.royale.svg.TransformBead" />
<component id="ClipBead" class="org.apache.royale.svg.ClipBead" />
+ <component id="DropShadowFilter" class="org.apache.royale.svg.DropShadowFilter" />
+ <component id="Filter" class="org.apache.royale.svg.Filter" />
+ <component id="OffsetFilterElement" class="org.apache.royale.svg.OffsetFilterElement" />
+ <component id="ColorMatrixFilterElement" class="org.apache.royale.svg.ColorMatrixFilterElement" />
+ <component id="SpreadFilterElement" class="org.apache.royale.svg.SpreadFilterElement" />
+ <component id="BlurFilterElement" class="org.apache.royale.svg.BlurFilterElement" />
+ <component id="InvertFilterElement" class="org.apache.royale.svg.InvertFilterElement" />
+ <component id="FullAlphaFilterElement" class="org.apache.royale.svg.FullAlphaFilterElement" />
+ <component id="CompositeFilterElement" class="org.apache.royale.svg.CompositeFilterElement" />
+ <component id="BlendFilterElement" class="org.apache.royale.svg.BlendFilterElement" />
<component id="MaskBead" class="org.apache.royale.svg.MaskBead" />
<component id="DisableClipBead" class="org.apache.royale.svg.DisableClipBead" />
<component id="LinearGradient" class="org.apache.royale.svg.LinearGradient" />
-
+ <component id="SuperimposeFilter" class="org.apache.royale.svg.SuperimposeFilter" />
</componentPackage>
diff --git a/frameworks/projects/Graphics/src/main/royale/GraphicsClasses.as b/frameworks/projects/Graphics/src/main/royale/GraphicsClasses.as
index b2c23e3..bf91968 100644
--- a/frameworks/projects/Graphics/src/main/royale/GraphicsClasses.as
+++ b/frameworks/projects/Graphics/src/main/royale/GraphicsClasses.as
@@ -41,6 +41,10 @@
{
import org.apache.royale.graphics.utils.PathHelper; PathHelper;
}
+ COMPILE::JS
+ {
+ import org.apache.royale.graphics.utils.addSvgElementToElement; addSvgElementToElement;
+ }
import org.apache.royale.graphics.QuadraticCurve; QuadraticCurve;
import org.apache.royale.graphics.ICircle; ICircle;
import org.apache.royale.graphics.IDrawable; IDrawable;
diff --git a/frameworks/projects/Graphics/src/main/royale/org/apache/royale/graphics/utils/PathHelper.as b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/graphics/utils/PathHelper.as
index ffb59fd..16db1e5 100644
--- a/frameworks/projects/Graphics/src/main/royale/org/apache/royale/graphics/utils/PathHelper.as
+++ b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/graphics/utils/PathHelper.as
@@ -590,7 +590,7 @@
* @playerversion AIR 1.5
* @productversion Royale 1.0.0
*/
-class PathSegment extends Object
+class PathSegment
{
//--------------------------------------------------------------------------
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/graphics/utils/addSvgElementToElement.as
similarity index 65%
copy from frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
copy to frameworks/projects/Graphics/src/main/royale/org/apache/royale/graphics/utils/addSvgElementToElement.as
index 7935bcf..4d31df4 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
+++ b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/graphics/utils/addSvgElementToElement.as
@@ -16,20 +16,22 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.html.beads
+package org.apache.royale.graphics.utils
{
- import org.apache.royale.core.IBead;
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
/**
- * The IBackgroundBead interface is a marker interface for beads
- * that draw backgrounds.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
*/
- public interface IBorderBead extends IBead
- {
- }
+ COMPILE::JS
+ public function addSvgElementToElement(element:Element,type:String):WrappedHTMLElement
+ {
+ var svgNs:String = "http://www.w3.org/2000/svg";
+ var elem:WrappedHTMLElement = document.createElementNS(svgNs, type) as WrappedHTMLElement;
+ element.appendChild(elem);
+ return elem;
+ }
}
diff --git a/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/BlendFilterElement.as b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/BlendFilterElement.as
new file mode 100644
index 0000000..b658352
--- /dev/null
+++ b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/BlendFilterElement.as
@@ -0,0 +1,86 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.svg
+{
+
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.events.Event;
+ COMPILE::JS
+ {
+ import org.apache.royale.graphics.utils.addSvgElementToElement;
+ }
+
+ /**
+ * The BlendFilterElement blends several filter elements
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class BlendFilterElement extends FilterElement
+ {
+ private var _strand:IStrand;
+ private var _in2:String;
+
+ public function BlendFilterElement()
+ {
+ }
+
+ /**
+ * @royaleignorecoercion Element
+ */
+ override public function build():void
+ {
+ COMPILE::JS
+ {
+ super.build();
+ filterElement.setAttribute("in2", in2);
+ filterElement.setAttribute("mode", "normal");
+ }
+ }
+
+ /**
+ * The filter element result which is blended with the source graphic.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get in2():String
+ {
+ return _in2;
+ }
+
+ public function set in2(value:String):void
+ {
+ _in2 = value;
+ }
+
+ COMPILE::JS
+ override protected function get filterElementType():String
+ {
+ return "feBlend";
+ }
+ }
+}
+
diff --git a/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/BlurFilterElement.as b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/BlurFilterElement.as
new file mode 100644
index 0000000..e4ba5b6
--- /dev/null
+++ b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/BlurFilterElement.as
@@ -0,0 +1,83 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.svg
+{
+
+ import org.apache.royale.events.Event;
+ COMPILE::JS
+ {
+ import org.apache.royale.graphics.utils.addSvgElementToElement;
+ }
+
+ /**
+ * The BlurFilterElement bead adds a blur to a filtered SVG element
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class BlurFilterElement extends FilterElement
+ {
+ private var _stdDeviation:Number = 3;
+
+ public function BlurFilterElement()
+ {
+ }
+
+
+ /**
+ * @royaleignorecoercion Element
+ */
+ override public function build():void
+ {
+ COMPILE::JS
+ {
+ super.build();
+ filterElement.setAttribute("stdDeviation", stdDeviation);
+ }
+ }
+
+ /**
+ * The Gaussian blur standard deviation
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get stdDeviation():Number
+ {
+ return _stdDeviation;
+ }
+
+ public function set stdDeviation(value:Number):void
+ {
+ _stdDeviation = value;
+ }
+
+
+ COMPILE::JS
+ override protected function get filterElementType():String
+ {
+ return "feGaussianBlur";
+ }
+ }
+}
+
diff --git a/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/ColorMatrixFilterElement.as b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/ColorMatrixFilterElement.as
new file mode 100644
index 0000000..489b91b
--- /dev/null
+++ b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/ColorMatrixFilterElement.as
@@ -0,0 +1,160 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.svg
+{
+
+ import org.apache.royale.events.Event;
+ COMPILE::JS
+ {
+ import org.apache.royale.graphics.utils.addSvgElementToElement;
+ }
+
+ /**
+ * The ColorMatrixFilterElement bead adds an offset to a filtered SVG element
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class ColorMatrixFilterElement extends FilterElement
+ {
+ private var _red:Number = 0;
+ private var _green:Number = 0;
+ private var _blue:Number = 0;
+ private var _opacity:Number = 1;
+ private var _filterElementResult:String = "filterElementResult";
+
+ public function ColorMatrixFilterElement()
+ {
+ }
+
+
+ /**
+ * @royaleignorecoercion Element
+ */
+ override public function build():void
+ {
+ COMPILE::JS
+ {
+ super.build();
+ var matrixValues:String = "0 0 0 0 " + red + " 0 0 0 0 " + green + " 0 0 0 0 " + blue + " 0 0 0 " + opacity + " 0";
+ filterElement.setAttribute("values", matrixValues);
+ }
+ }
+
+ /**
+ * The red value. This should be a number between 0 and 1.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get red():Number
+ {
+ return _red;
+ }
+
+ public function set red(value:Number):void
+ {
+ _red = value;
+ }
+
+ /**
+ * The blue value. This should be a number between 0 and 1.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get blue():Number
+ {
+ return _blue;
+ }
+
+ public function set blue(value:Number):void
+ {
+ _blue = value;
+ }
+
+ /**
+ * The green value. This should be a number between 0 and 1.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get green():Number
+ {
+ return _green;
+ }
+
+ public function set green(value:Number):void
+ {
+ _green = value;
+ }
+
+ /**
+ * The opacity value. This should be a number between 0 and 1.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get opacity():Number
+ {
+ return _opacity;
+ }
+
+ public function set opacity(value:Number):void
+ {
+ _opacity = value;
+ }
+
+ /**
+ * Where to write the result of this filter.
+ * This is useful for using the result as a source for another filter element.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get filterElementResult():String
+ {
+ return _filterElementResult;
+ }
+
+ public function set filterElementResult(value:String):void
+ {
+ _filterElementResult = value;
+ }
+
+ COMPILE::JS
+ override protected function get filterElementType():String
+ {
+ return "feColorMatrix";
+ }
+ }
+}
+
diff --git a/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/CompositeFilterElement.as b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/CompositeFilterElement.as
new file mode 100644
index 0000000..dba53ca
--- /dev/null
+++ b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/CompositeFilterElement.as
@@ -0,0 +1,87 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.svg
+{
+
+ import org.apache.royale.events.Event;
+ COMPILE::JS
+ {
+ import org.apache.royale.graphics.utils.addSvgElementToElement;
+ }
+
+ /**
+ * The CompositeFilterElement takes two objects and applies Porter/Duff operators
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class CompositeFilterElement extends FilterElement
+ {
+ private var _in2:String;
+ private var _operator:String;
+
+ public function CompositeFilterElement()
+ {
+ }
+
+
+ /**
+ * @royaleignorecoercion Element
+ */
+ override public function build():void
+ {
+ COMPILE::JS
+ {
+ super.build();
+ filterElement.setAttribute("in2", in2);
+ filterElement.setAttribute("operator", operator);
+ }
+ }
+
+ public function get in2():String
+ {
+ return _in2;
+ }
+
+ public function set in2(value:String):void
+ {
+ _in2 = value;
+ }
+
+ public function get operator():String
+ {
+ return _operator;
+ }
+
+ public function set operator(value:String):void
+ {
+ _operator = value;
+ }
+
+ COMPILE::JS
+ override protected function get filterElementType():String
+ {
+ return "feComposite";
+ }
+
+ }
+}
+
diff --git a/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/DropShadowFilter.as b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/DropShadowFilter.as
new file mode 100644
index 0000000..b005157
--- /dev/null
+++ b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/DropShadowFilter.as
@@ -0,0 +1,342 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.svg
+{
+
+ COMPILE::SWF
+ {
+ import org.apache.royale.core.IRenderedObject;
+ import flash.filters.DropShadowFilter;
+ }
+
+ /**
+ * DropShadowFilter is a bead that injects a series of beads in the correct
+ * order and initialized them.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class DropShadowFilter extends Filter implements IChainableFilter
+ {
+ private var _isNice:Boolean;
+ private var _dx:Number;
+ private var _dy:Number;
+ private var _stdDeviation:Number;
+ private var _red:Number = 0;
+ private var _green:Number = 0;
+ private var _blue:Number = 0;
+ private var _opacity:Number = 1;
+ private var _spread:Number = 1;
+ private var _inset:Boolean;
+ private var _knockout:Boolean;
+ private var _source:String;
+ private var _result:String;
+
+ public function DropShadowFilter()
+ {
+ }
+
+ public function build():void
+ {
+ children = [];
+ var doKnockout:Boolean = !inset && knockout;
+ if (inset)
+ {
+ var insetFilterElement:FilterElement = new InvertFilterElement();
+ children.push(insetFilterElement);
+ }
+ var offset:OffsetFilterElement;
+ if (!isNaN(dx) && !isNaN(dy) && (dx !=0 || dy !=0))
+ {
+ offset = new OffsetFilterElement();
+ children.push(offset);
+ offset.dx = dx;
+ offset.dy = dy;
+ if (doKnockout)
+ {
+ offset.in = source ? source : "SourceGraphic";
+ }
+ }
+ var blur:BlurFilterElement = new BlurFilterElement();
+ children.push(blur);
+ blur.stdDeviation = stdDeviation;
+ if (!offset)
+ {
+ blur.in = source ? source : "SourceGraphic";
+ }
+ if (doKnockout)
+ {
+ var outsetComposite:CompositeFilterElement = new CompositeFilterElement();
+ children.push(outsetComposite);
+ outsetComposite.in2 = "SourceAlpha";
+ outsetComposite.operator = "out";
+ }
+ var colorMatrix:ColorMatrixFilterElement = new ColorMatrixFilterElement();
+ children.push(colorMatrix);
+ colorMatrix.red = red;
+ colorMatrix.green = green;
+ colorMatrix.blue = blue;
+ colorMatrix.opacity = opacity;
+ var spreadElement:SpreadFilterElement = new SpreadFilterElement();
+ children.push(spreadElement);
+ if (!inset)
+ {
+ spreadElement.result = result ? result : "spreadResult";
+ }
+ spreadElement.spread = spread;
+ if (inset)
+ {
+ var composite:CompositeFilterElement = new CompositeFilterElement();
+ children.push(composite);
+ composite.in2 = "SourceAlpha";
+ composite.operator = "in";
+ composite.result = result ? result : "compositeResult";
+ }
+ if (!result)
+ {
+ var blend:BlendFilterElement = new BlendFilterElement();
+ children.push(blend);
+ blend.in = inset ? "compositeResult" : source ? source : "SourceGraphic";
+ blend.in2 = inset && !source ? "SourceGraphic" : inset && source ? source : "spreadResult";
+ }
+ }
+
+ COMPILE::JS
+ override protected function filter():void
+ {
+ build();
+ super.filter();
+ }
+
+ COMPILE::SWF
+ override protected function filter():void
+ {
+ var distance:Number = Math.sqrt( (dx * dx) + (dy * dy) );
+ var radians:Number = Math.atan2(dy, dx);
+ var angle:Number = (180/Math.PI) * radians;
+ var color:uint = red|green|blue;
+ var filter:flash.filters.DropShadowFilter = new flash.filters.DropShadowFilter(distance, angle, color, opacity, stdDeviation, stdDeviation, spread + 1, 1, inset);
+ host.$displayObject.filters = [filter];
+ }
+ /**
+ * The drop shadow x offset
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get dx():Number
+ {
+ return _dx;
+ }
+
+ public function set dx(value:Number):void
+ {
+ _dx = value;
+ }
+
+ /**
+ * The drop shadow y offset
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get dy():Number
+ {
+ return _dy;
+ }
+
+ public function set dy(value:Number):void
+ {
+ _dy = value;
+ }
+
+ /**
+ * The Gaussian blur standard deviation for the drop shadow
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get stdDeviation():Number
+ {
+ return _stdDeviation;
+ }
+
+ public function set stdDeviation(value:Number):void
+ {
+ _stdDeviation = value;
+ }
+
+ /**
+ * The red component of the drop shadow. This should be a number between 0 and 1.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get red():Number
+ {
+ return _red;
+ }
+
+ public function set red(value:Number):void
+ {
+ _red = value;
+ }
+
+ /**
+ * The green component of the drop shadow. This should be a number between 0 and 1.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get green():Number
+ {
+ return _green;
+ }
+
+ public function set green(value:Number):void
+ {
+ _green = value;
+ }
+
+ /**
+ * The blue component of the drop shadow. This should be a number between 0 and 1.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get blue():Number
+ {
+ return _blue;
+ }
+
+ public function set blue(value:Number):void
+ {
+ _blue = value;
+ }
+
+ /**
+ * The opacity component of the drop shadow. This should be a number between 0 and 1.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get opacity():Number
+ {
+ return _opacity;
+ }
+
+ public function set opacity(value:Number):void
+ {
+ _opacity = value;
+ }
+
+ /**
+ * The spread component of the drop shadow. This can be a number between 0 and 255.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get spread():Number
+ {
+ return _spread;
+ }
+
+ public function set spread(value:Number):void
+ {
+ _spread = value;
+ }
+
+ /**
+ * Whether or not the drop shadow is inset.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get inset():Boolean
+ {
+ return _inset;
+ }
+
+ public function set inset(value:Boolean):void
+ {
+ _inset = value;
+ }
+
+ public function get source():String
+ {
+ return _source;
+ }
+
+ public function set source(value:String):void
+ {
+ _source = value;
+ }
+
+ public function get result():String
+ {
+ return _result;
+ }
+
+ public function set result(value:String):void
+ {
+ _result = value;
+ }
+
+ public function get knockout():Boolean
+ {
+ return _knockout;
+ }
+
+ public function set knockout(value:Boolean):void
+ {
+ _knockout = value;
+ }
+
+ public function get isNice():Boolean
+ {
+ return _isNice;
+ }
+
+ public function set isNice(value:Boolean):void
+ {
+ _isNice = value;
+ }
+ }
+}
+
diff --git a/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/Filter.as b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/Filter.as
new file mode 100644
index 0000000..3418b8b
--- /dev/null
+++ b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/Filter.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.svg
+{
+
+ COMPILE::JS
+ {
+ import org.apache.royale.utils.UIDUtil;
+ import org.apache.royale.graphics.utils.addSvgElementToElement;
+ import org.apache.royale.events.IEventDispatcher;
+ }
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IRenderedObject;
+ import org.apache.royale.core.IStrand;
+ [DefaultProperty("children")]
+
+ /**
+ * The Filter bead allows you to filter an SVG element. Filter elements should be added to the strand to achieve the desired effect.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class Filter implements IBead
+ {
+ private var _strand:IStrand;
+ private var _width:String = "200%";
+ private var _height:String = "200%";
+ private var _children:Array;
+// private var floodColor:uint;
+ COMPILE::JS
+ {
+ private var _filterElementWrapper:Element;
+ }
+
+ public function Filter()
+ {
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ filter();
+ }
+
+ COMPILE::SWF
+ protected function filter():void
+ {
+// if (!path)
+// {
+// return;
+// }
+// var element:DisplayObject = host.$displayObject as DisplayObject;
+// var mask:Sprite = new Sprite();
+// var g:Graphics = mask.graphics;
+// g.beginFill(0);
+// path.draw(g);
+// g.endFill();
+// // remove existing mask from display list
+// if (element.mask && element.mask.parent)
+// {
+// element.mask.parent.removeChild(element.mask);
+// }
+// // add new mask to display list
+// if (element.parent)
+// {
+// element.parent.addChild(mask);
+// }
+// // set mask
+// mask.x = element.x;
+// mask.y = element.y;
+// element.mask = mask;
+ }
+ /**
+ * @royaleignorecoercion Element
+ * @royaleignorecoercion Object
+ */
+ COMPILE::JS
+ protected function filter():void
+ {
+ var svgElement:Node = host.element as Element;
+ var defs:Element = getChildNode(svgElement, "defs") as Element;
+ _filterElementWrapper = getChildNode(defs, "filter") as Element;
+ filterElementWrapper.id = "myFilter" + UIDUtil.createUID();
+ filterElementWrapper.setAttribute("width", _width);
+ filterElementWrapper.setAttribute("height", _height);
+ // clean up existing filter
+ host.element.style["filter"] = "url(#" + filterElementWrapper.id + ")";
+ for (var i:int = 0; i < children.length; i++)
+ {
+ var filterElement:FilterElement = children[i] as FilterElement;
+ filterElement.filterElementWrapper = filterElementWrapper;
+ filterElement.build();
+ }
+ }
+
+ COMPILE::JS
+ private function getChildNode(node:Node, tagName:String):Node
+ {
+ if (!node.hasChildNodes())
+ {
+ return addSvgElementToElement(node as Element, tagName);
+ }
+ var childNodes:Object = node.childNodes;
+ for (var i:int = 0; i < childNodes.length; i++)
+ {
+ if (childNodes[i].tagName == tagName)
+ {
+ return childNodes[i];
+ }
+
+ }
+ return addSvgElementToElement(node as Element, tagName);
+ }
+
+
+ protected function get host():IRenderedObject
+ {
+ return _strand as IRenderedObject;
+ }
+
+ COMPILE::JS
+ /**
+ * This is the DOM element where filter elements get added
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get filterElementWrapper():Element
+ {
+ return _filterElementWrapper;
+ }
+
+ public function get children():Array
+ {
+ return _children;
+ }
+
+ public function set children(value:Array):void
+ {
+ _children = value;
+ }
+ }
+}
+
diff --git a/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/FilterElement.as b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/FilterElement.as
new file mode 100644
index 0000000..f063f02
--- /dev/null
+++ b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/FilterElement.as
@@ -0,0 +1,136 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.svg
+{
+
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.events.Event;
+ COMPILE::JS
+ {
+ import org.apache.royale.graphics.utils.addSvgElementToElement;
+ }
+
+ /**
+ * FilterElement abstracts some methods and vars for elements that can go in an SVG filter
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class FilterElement
+ {
+ COMPILE::JS
+ {
+ private var _filterElementWrapper:Element;
+ }
+ COMPILE::JS
+ {
+ private var _filterElement:Element;
+ }
+ private var _result:String;
+ private var _in:String;
+
+ public function FilterElement()
+ {
+ }
+
+ /**
+ * @royaleignorecoercion Element
+ */
+ public function build():void
+ {
+ COMPILE::JS
+ {
+ _filterElement = addSvgElementToElement(filterElementWrapper, filterElementType) as Element;
+ if (result)
+ {
+ filterElement.setAttribute("result", result);
+ }
+ if (_in)
+ {
+ filterElement.setAttribute("in", _in);
+ }
+ }
+ }
+
+ /**
+ * Reference to the filter element result. This can later be used as input for a subsequent filter element.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get result():String
+ {
+ return _result;
+ }
+
+ public function set result(value:String):void
+ {
+ _result = value;
+ }
+
+ COMPILE::JS
+ protected function get filterElementType():String
+ {
+ // override this
+ return "";
+ }
+
+ /**
+ * @royaleignorecoercion Element
+ */
+ COMPILE::JS
+ protected function get filterElement():Element
+ {
+ return _filterElement;
+ }
+
+ /**
+ * @royaleignorecoercion Element
+ */
+ COMPILE::JS
+ public function get filterElementWrapper():Element
+ {
+ return _filterElementWrapper;
+ }
+
+ /**
+ * @royaleignorecoercion Element
+ */
+ COMPILE::JS
+ public function set filterElementWrapper(value:Element):void
+ {
+ _filterElementWrapper = value;
+ }
+
+ public function get in():String
+ {
+ return _in;
+ }
+
+ public function set in(value:String):void
+ {
+ _in = value;
+ }
+ }
+}
+
diff --git a/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/FullAlphaFilterElement.as b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/FullAlphaFilterElement.as
new file mode 100644
index 0000000..8b30982
--- /dev/null
+++ b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/FullAlphaFilterElement.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.svg
+{
+
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.events.Event;
+ COMPILE::JS
+ {
+ import org.apache.royale.graphics.utils.addSvgElementToElement;
+ }
+
+ /**
+ * The FullAlphaFilterElement
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class FullAlphaFilterElement extends FilterElement
+ {
+
+
+ public function FullAlphaFilterElement()
+ {
+ }
+
+ /*
+ * @royaleignorecoercion Element
+ */
+ override public function build():void
+ {
+ COMPILE::JS
+ {
+ super.build();
+ var funcA:Element = addSvgElementToElement(filterElement, "feFuncA") as Element;
+ funcA.setAttribute("type", "table");
+ funcA.setAttribute("tableValues", "1");
+ }
+ }
+
+ COMPILE::JS
+ override protected function get filterElementType():String
+ {
+ return "feComponentTransfer";
+ }
+
+ }
+}
+
diff --git a/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/IChainableFilter.as b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/IChainableFilter.as
new file mode 100644
index 0000000..ab3030a
--- /dev/null
+++ b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/IChainableFilter.as
@@ -0,0 +1,84 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.svg
+{
+ /**
+ * The IChainableFilter interface describes a filter that can be a part of a chain of filters
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public interface IChainableFilter
+ {
+ /**
+ * This method builds the filter's children.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ function build():void
+
+
+ /**
+ * This method returns the elements representing the filter primitives.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ function get children():Array
+
+
+ /**
+ * This method sets the result of this filter to be used in a subsequent chain element.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ function set result(value:String):void
+
+ /**
+ * This method sets the source of this filter which can be a result from a previous chain element.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ function set source(value:String):void
+
+ /**
+ * Nice filters are generally less visible (e.g. behind the source graphic).
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ function get isNice():Boolean
+
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/InvertFilterElement.as b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/InvertFilterElement.as
new file mode 100644
index 0000000..7d0958a
--- /dev/null
+++ b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/InvertFilterElement.as
@@ -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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.svg
+{
+
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.events.Event;
+ COMPILE::JS
+ {
+ import org.apache.royale.graphics.utils.addSvgElementToElement;
+ }
+
+ /**
+ * The InvertFilterElement makes a filter inset
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class InvertFilterElement extends FilterElement
+ {
+
+ public function InvertFilterElement()
+ {
+ }
+
+ /*
+ * @royaleignorecoercion Element
+ */
+ override public function build():void
+ {
+ COMPILE::JS
+ {
+ super.build();
+ filterElement.setAttribute("in", "SourceAlpha");
+ var funcA:Element = addSvgElementToElement(filterElement, "feFuncA") as Element;
+ funcA.setAttribute("type", "table");
+ funcA.setAttribute("tableValues", "1 0");
+ }
+ }
+
+ COMPILE::JS
+ override protected function get filterElementType():String
+ {
+ return "feComponentTransfer";
+ }
+ }
+}
+
diff --git a/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/MergeFilterElement.as b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/MergeFilterElement.as
new file mode 100644
index 0000000..fcc033f
--- /dev/null
+++ b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/MergeFilterElement.as
@@ -0,0 +1,81 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.svg
+{
+
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.events.Event;
+ COMPILE::JS
+ {
+ import org.apache.royale.graphics.utils.addSvgElementToElement;
+ }
+
+ /**
+ * The MergeFilterElement merges several filter elements
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class MergeFilterElement extends FilterElement
+ {
+ private var _strand:IStrand;
+ private var _results:Array;
+
+ public function MergeFilterElement()
+ {
+ }
+
+ /**
+ * @royaleignorecoercion Element
+ */
+ override public function build():void
+ {
+ COMPILE::JS
+ {
+ super.build();
+ for (var i:int = 0; i < results.length; i++)
+ {
+ var mergeNode:Element = addSvgElementToElement(filterElement, "feMergeNode") as Element;
+ mergeNode.setAttribute("in", results[i] as String);
+ }
+ }
+ }
+
+ COMPILE::JS
+ override protected function get filterElementType():String
+ {
+ return "feMerge";
+ }
+
+ public function get results():Array
+ {
+ return _results;
+ }
+
+ public function set results(value:Array):void
+ {
+ _results = value;
+ }
+ }
+}
+
diff --git a/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/OffsetFilterElement.as b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/OffsetFilterElement.as
new file mode 100644
index 0000000..6d76227
--- /dev/null
+++ b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/OffsetFilterElement.as
@@ -0,0 +1,102 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.svg
+{
+
+ import org.apache.royale.events.Event;
+ COMPILE::JS
+ {
+ import org.apache.royale.graphics.utils.addSvgElementToElement;
+ }
+
+ /**
+ * The OffsetFilterElement bead adds an filterElement to a filtered SVG element
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class OffsetFilterElement extends FilterElement
+ {
+ private var _dx:Number = 0;
+ private var _dy:Number = 0;
+
+ public function OffsetFilterElement()
+ {
+ }
+
+
+ /**
+ * @royaleignorecoercion Element
+ */
+ override public function build():void
+ {
+ COMPILE::JS
+ {
+ super.build();
+ filterElement.setAttribute("dx", dx);
+ filterElement.setAttribute("dy", dy);
+ }
+ }
+
+ /**
+ * The x offset
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get dx():Number
+ {
+ return _dx;
+ }
+
+ public function set dx(value:Number):void
+ {
+ _dx = value;
+ }
+
+ /**
+ * The y offset
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get dy():Number
+ {
+ return _dy;
+ }
+
+ public function set dy(value:Number):void
+ {
+ _dy = value;
+ }
+
+ COMPILE::JS
+ override protected function get filterElementType():String
+ {
+ return "feOffset";
+ }
+ }
+}
+
diff --git a/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/SpreadFilterElement.as b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/SpreadFilterElement.as
new file mode 100644
index 0000000..57453e3
--- /dev/null
+++ b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/SpreadFilterElement.as
@@ -0,0 +1,84 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.svg
+{
+
+ import org.apache.royale.events.Event;
+ COMPILE::JS
+ {
+ import org.apache.royale.graphics.utils.addSvgElementToElement;
+ }
+
+ /**
+ * The SpreadFilterElement adjusts the spread of the filter
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class SpreadFilterElement extends FilterElement
+ {
+ private var _spread:Number = 1.0;
+
+ public function SpreadFilterElement()
+ {
+ }
+
+
+ /**
+ * @royaleignorecoercion Element
+ */
+ override public function build():void
+ {
+ COMPILE::JS
+ {
+ super.build();
+ var funcA:Element = addSvgElementToElement(filterElement, "feFuncA") as Element;
+ funcA.setAttribute("type", "linear");
+ funcA.setAttribute("slope", spread);
+ }
+ }
+
+ /**
+ * The spread value, can be between 0 and 255.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get spread():Number
+ {
+ return _spread;
+ }
+
+ public function set spread(value:Number):void
+ {
+ _spread = value;
+ }
+
+ COMPILE::JS
+ override protected function get filterElementType():String
+ {
+ return "feComponentTransfer";
+ }
+ }
+}
+
diff --git a/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/SuperimposeFilter.as b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/SuperimposeFilter.as
new file mode 100644
index 0000000..2d23065
--- /dev/null
+++ b/frameworks/projects/Graphics/src/main/royale/org/apache/royale/svg/SuperimposeFilter.as
@@ -0,0 +1,73 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.svg
+{
+
+ /**
+ * SuperimposeFilter composes superimposes several filters one on top of the other.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class SuperimposeFilter extends Filter
+ {
+ public function SuperimposeFilter()
+ {
+ }
+
+ COMPILE::JS
+ override protected function filter():void
+ {
+ var newChildren:Array = [];
+ var results:Array = ["SourceGraphic"];
+ for (var i:int = 0; i < children.length; i++)
+ {
+ var chainable:IChainableFilter = children[i] as IChainableFilter;
+ var resultName:String = "chainableResult" + i;
+ chainable.result = resultName;
+ if (chainable.isNice)
+ {
+ results.unshift(resultName);
+ } else
+ {
+ results.push(resultName);
+ }
+ chainable.build();
+ addArray(newChildren, chainable.children);
+ }
+ var merge:MergeFilterElement = new MergeFilterElement();
+ merge.results = results;
+ newChildren.push(merge);
+ children = newChildren;
+ super.filter();
+ }
+
+ COMPILE::JS
+ private function addArray(original:Array, addition:Array):void
+ {
+ for (var i:int = 0; i < addition.length; i++)
+ {
+ original.push(addition[i]);
+ }
+ }
+ }
+}
+
diff --git a/frameworks/projects/HTML/src/main/royale/org/apache/royale/html/NodeElementBase.as b/frameworks/projects/HTML/src/main/royale/org/apache/royale/html/NodeElementBase.as
index a48a797..48daa4f 100644
--- a/frameworks/projects/HTML/src/main/royale/org/apache/royale/html/NodeElementBase.as
+++ b/frameworks/projects/HTML/src/main/royale/org/apache/royale/html/NodeElementBase.as
@@ -18,7 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.html
{
- import org.apache.royale.core.UIBase;
+ import org.apache.royale.html.Group;
public class NodeElementBase extends Group
{
diff --git a/frameworks/projects/Icons/asconfig.json b/frameworks/projects/Icons/asconfig.json
new file mode 100644
index 0000000..defa9f2
--- /dev/null
+++ b/frameworks/projects/Icons/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": [
+ "IconsClasses"
+ ],
+ "include-sources": [
+ "src/main/royale"
+ ],
+ "output": "target/Icons.swc"
+ }
+}
diff --git a/frameworks/projects/Icons/build.xml b/frameworks/projects/Icons/build.xml
new file mode 100644
index 0000000..d940bfc
--- /dev/null
+++ b/frameworks/projects/Icons/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="Icons" 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/Icons/pom.xml b/frameworks/projects/Icons/pom.xml
new file mode 100644
index 0000000..e23a329
--- /dev/null
+++ b/frameworks/projects/Icons/pom.xml
@@ -0,0 +1,105 @@
+<?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.3-SNAPSHOT</version>
+ </parent>
+
+ <artifactId>Icons</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <packaging>swc</packaging>
+
+ <name>Apache Royale: Framework: Libs: Icons</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/basic</uri>
+ <manifest>${project.basedir}/src/main/resources/icons-manifest.xml</manifest>
+ </namespace>
+ <namespace>
+ <type>as</type>
+ <uri>library://ns.apache.org/royale/basic</uri>
+ <manifest>${project.basedir}/src/main/resources/icons-as-manifest.xml</manifest>
+ </namespace>
+ </namespaces>
+ <includeClasses>
+ <includeClass>IconsClasses</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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Core</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ </dependencies>
+
+</project>
diff --git a/frameworks/projects/Icons/src/main/config/compile-swf-config.xml b/frameworks/projects/Icons/src/main/config/compile-swf-config.xml
new file mode 100644
index 0000000..8a54184
--- /dev/null
+++ b/frameworks/projects/Icons/src/main/config/compile-swf-config.xml
@@ -0,0 +1,93 @@
+<!--
+
+ 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>SWF</target>
+ <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/Collections.swc</path-element>
+ <path-element>../../../../../libs/Basic.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/basic</uri>
+ <manifest>../resources/icons-manifest.xml</manifest>
+ </namespace>
+ </namespaces>
+
+ <source-path>
+ <path-element>../royale</path-element>
+ </source-path>
+
+ <warn-no-constructor>false</warn-no-constructor>
+ </compiler>
+
+ <include-classes>
+ <class>IconsClasses</class>
+ </include-classes>
+
+ <include-namespaces>
+ <uri>library://ns.apache.org/royale/basic</uri>
+ </include-namespaces>
+
+ <target-player>${playerglobal.version}</target-player>
+
+</royale-config>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg b/frameworks/projects/Icons/src/main/resources/icons-as-manifest.xml
similarity index 78%
copy from frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg
copy to frameworks/projects/Icons/src/main/resources/icons-as-manifest.xml
index 07beb17..e38496a 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg
+++ b/frameworks/projects/Icons/src/main/resources/icons-as-manifest.xml
@@ -1,3 +1,4 @@
+<?xml version="1.0"?>
<!--
Licensed to the Apache Software Foundation (ASF) under one or more
@@ -16,4 +17,9 @@
limitations under the License.
-->
-<svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-616, -350)"><g transform="translate(611, 345)"><g><circle cx="11" cy="11" r="6"></circle></g></g></g></svg>
\ No newline at end of file
+
+
+<componentPackage>
+
+
+</componentPackage>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg b/frameworks/projects/Icons/src/main/resources/icons-manifest.xml
similarity index 77%
copy from frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg
copy to frameworks/projects/Icons/src/main/resources/icons-manifest.xml
index 07beb17..a24e31a 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg
+++ b/frameworks/projects/Icons/src/main/resources/icons-manifest.xml
@@ -1,3 +1,4 @@
+<?xml version="1.0"?>
<!--
Licensed to the Apache Software Foundation (ASF) under one or more
@@ -16,4 +17,9 @@
limitations under the License.
-->
-<svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-616, -350)"><g transform="translate(611, 345)"><g><circle cx="11" cy="11" r="6"></circle></g></g></g></svg>
\ No newline at end of file
+
+
+<componentPackage>
+ <component id="FontIcon" class="org.apache.royale.icons.FontIcon"/>
+ <component id="ToggleFontIcon" class="org.apache.royale.icons.ToggleFontIcon"/>
+</componentPackage>
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as b/frameworks/projects/Icons/src/main/royale/IconsClasses.as
similarity index 66%
copy from frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
copy to frameworks/projects/Icons/src/main/royale/IconsClasses.as
index 7935bcf..9a6f7dd 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
+++ b/frameworks/projects/Icons/src/main/royale/IconsClasses.as
@@ -16,20 +16,21 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.html.beads
+package
{
- import org.apache.royale.core.IBead;
/**
- * The IBackgroundBead interface is a marker interface for beads
- * that draw backgrounds.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @private
+ * This class is used to link additional classes into icons.swc
+ * beyond those that are found by dependecy analysis starting
+ * from the classes specified in manifest.xml.
*/
- public interface IBorderBead extends IBead
- {
- }
-}
+ internal class IconsClasses
+ {
+ import org.apache.royale.icons.FontIconBase; FontIconBase;
+ import org.apache.royale.icons.FontIcon; FontIcon;
+ import org.apache.royale.icons.ToggleFontIcon; ToggleFontIcon;
+ MaterialIconType;
+ }
+
+}
\ No newline at end of file
diff --git a/frameworks/projects/Icons/src/main/royale/MaterialIconType.as b/frameworks/projects/Icons/src/main/royale/MaterialIconType.as
new file mode 100644
index 0000000..65dd3d7
--- /dev/null
+++ b/frameworks/projects/Icons/src/main/royale/MaterialIconType.as
@@ -0,0 +1,1081 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ /**
+ * The MaterialIconType class list all possible icons
+ * found in https://material.io/icons/ to use with the
+ * Icon class.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class MaterialIconType
+ {
+ /**
+ * constructor.
+ *
+ * <inject_html>
+ * <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+ * </inject_html>
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function MaterialIconType()
+ {
+ super();
+ }
+
+ public static const _3D_ROTATION:String = '3d_rotation';
+ public static const ACCESSIBILITY:String = 'accessibility';
+ public static const ACCESSIBLE:String = 'accessible';
+ public static const ACCOUNT_BALANCE:String = 'account_balance';
+ public static const ACCOUNT_BALANCE_WALLET:String = 'account_balance_wallet';
+ public static const ACCOUNT_BOX:String = 'account_box';
+ public static const ACCOUNT_CIRCLE:String = 'account_circle';
+ public static const ADD_SHOPING_CART:String = 'add_shopping_cart';
+ public static const ALARM:String = 'alarm';
+ public static const ALARM_ADD:String = 'alarm_add';
+
+ public static const ALARM_OFF:String = 'alarm_off';
+ public static const ALARM_ON:String = 'alarm_on';
+ public static const ALL_OUT:String = 'all_out';
+ public static const ANDROID:String = 'android';
+ public static const ANNOUNCEMENT:String = 'announcement';
+ public static const ASPECT_RATIO:String = 'aspect_ratio';
+ public static const ASSESSMENT:String = 'assessment';
+ public static const ASSIGNMENT:String = 'assignment';
+ public static const ASSIGNMENT_IND:String = 'assignment_ind';
+ public static const ASSIGNMENT_LATE:String = 'assignment_late';
+
+ public static const ASSIGNMENT_RETURN:String = 'assignment_return';
+ public static const ASSIGNMENT_RETURNED:String = 'assignment_returned';
+ public static const ASSIGNMENT_TURNED_IN:String = 'assignment_turned_in';
+ public static const AUTORENEW:String = 'autorenew';
+ public static const BACKUP:String = 'backup';
+ public static const BOOK:String = 'book';
+ public static const BOOKMARK:String = 'bookmark';
+ public static const BOOKMARK_BORDER:String = 'bookmark_border';
+ public static const BUG_REPORT:String = 'bug_report';
+ public static const BUILD:String = 'build';
+
+ public static const CACHED:String = 'cached';
+ public static const CAMERA_ENHANCE:String = 'camera_enhance';
+ public static const CARD_GIFTCARD:String = 'card_giftcard';
+ public static const CARD_MEMBERSHIP:String = 'card_membership';
+ public static const CARD_TRAVEL:String = 'card_travel';
+ public static const CHANGE_HISTORY:String = 'change_history';
+ public static const CHECK_CIRCLE:String = 'check_circle';
+ public static const CHORME_READER_MODE:String = 'chrome_reader_mode';
+ public static const CLASS:String = 'class';
+ public static const CODE:String = 'code';
+
+ public static const COMPARE_ARROWS:String = 'compare_arrows';
+ public static const COPYRIGHT:String = 'copyright';
+ public static const CREDIT_CARD:String = 'credit_card';
+ public static const DASHBOARD:String = 'dashboard';
+ public static const DATE_RANGE:String = 'date_range';
+ public static const DELETE:String = 'delete';
+ public static const DELETE_FOREVER:String = 'delete_forever';
+ public static const DESCRIPTION:String = 'description';
+ public static const DNS:String = 'dns';
+ public static const DONE:String = 'done';
+
+ public static const DONE_ALL:String = 'done_all';
+ public static const DONUT_LARGE:String = 'donut_large';
+ public static const DONUT_SMALL:String = 'donut_small';
+ public static const EJECT:String = 'eject';
+ public static const EURO_SYMBOL:String = 'euro_symbol';
+ public static const EVENT:String = 'event';
+ public static const EVENT_SEAT:String = 'event_seat';
+ public static const EXIT_TO_APP:String = 'exit_to_app';
+ public static const EXPLORE:String = 'explore';
+ public static const EXTENSION:String = 'extension';
+
+ public static const FACE:String = 'face';
+ public static const FAVORITE:String = 'favorite';
+ public static const FAVORITE_BORDER:String = 'favorite_border';
+ public static const FEEDBACK:String = 'feedback';
+ public static const FIND_IN_PAGE:String = 'find_in_page';
+ public static const FIND_REPLACE:String = 'find_replace';
+ public static const FINGERPRINT:String = 'fingerprint';
+ public static const FLIGHT_LAND:String = 'flight_land';
+ public static const FLIGHT_TAKEOFF:String = 'flight_takeoff';
+ public static const FLIP_TO_BACK:String = 'flip_to_back';
+
+ public static const FLIP_TO_FRONT:String = 'flip_to_front';
+ public static const G_TRANSLATE:String = 'g_translate';
+ public static const GAVEL:String = 'gavel';
+ public static const GET_APP:String = 'get_app';
+ public static const GIF:String = 'gif';
+ public static const GRADE:String = 'grade';
+ public static const GROUP_WORK:String = 'group_work';
+ public static const HELP:String = 'help';
+ public static const HELP_OUTLINE:String = 'help_outline';
+ public static const HIGHLIGHT_OFF:String = 'highlight_off';
+
+ public static const HISTORY:String = 'history';
+ public static const HOME:String = 'home';
+ public static const HOURGLASS_EMPTY:String = 'hourglass_empty';
+ public static const HOURGLASS_FULL:String = 'hourglass_full';
+ public static const HTTP:String = 'http';
+ public static const HTTPS:String = 'https';
+ public static const IMPORTANT_DEVICES:String = 'important_devices';
+ public static const INFO:String = 'info';
+ public static const INFO_OUTLINE:String = 'info_outline';
+ public static const INPUT:String = 'input';
+
+ public static const INVERT_COLORS:String = 'invert_colors';
+ public static const LABEL:String = 'label';
+ public static const LABEL_OUTLINE:String = 'label_outline';
+ public static const LANGUAGE:String = 'language';
+ public static const LAUNCH:String = 'launch';
+ public static const LIGHTBULB_OUTLINE:String = 'lightbulb_outline';
+ public static const LINE_STYLE:String = 'line_style';
+ public static const LINE_WEIGHT:String = 'line_weight';
+ public static const LIST:String = 'list';
+ public static const LOCK:String = 'lock';
+
+ public static const LOCK_OPEN:String = 'lock_open';
+ public static const LOCK_OUTLINE:String = 'lock_outline';
+ public static const LOYALTY:String = 'loyalty';
+ public static const MARKUNREAD_MAILBOX:String = 'markunread_mailbox';
+ public static const MOTORCYCLE:String = 'motorcycle';
+ public static const NOTE_ADD:String = 'note_add';
+ public static const OFFLINE_PIN:String = 'offline_pin';
+ public static const OPACITY:String = 'opacity';
+ public static const OPEN_IN_BROWSER:String = 'open_in_browser';
+ public static const OPEN_IN_NEW:String = 'open_in_new';
+
+ public static const OPEN_WITH:String = 'open_with';
+ public static const PAGEVIEW:String = 'pageview';
+ public static const PAN_TOOL:String = 'pan_tool';
+ public static const PAYMENT:String = 'payment';
+ public static const PERM_CAMERA_MIC:String = 'perm_camera_mic';
+ public static const PERM_CONTACT_CALENDAR:String = 'perm_contact_calendar';
+ public static const PERM_DATA_SETTING:String = 'perm_data_setting';
+ public static const PERM_DEVICE_INFORMATION:String = 'perm_device_information';
+ public static const PERM_IDENTITY:String = 'perm_identity';
+ public static const PERM_MEDIA:String = 'perm_media';
+
+ public static const PERM_PHONE_MSG:String = 'perm_phone_msg';
+ public static const PERM_SCAN_WIFI:String = 'perm_scan_wifi';
+ public static const PETS:String = 'pets';
+ public static const PICTURE_IN_PICTURE:String = 'picture_in_picture';
+ public static const PICTURE_IN_PICTURE_ALT:String = 'picture_in_picture_alt';
+ public static const PLAY_FOR_WORK:String = 'play_for_work';
+ public static const POLYMER:String = 'polymer';
+ public static const POWER_SETTINGS_NEW:String = 'power_settings_new';
+ public static const PREGNANT_WOMAN:String = 'pregnant_woman';
+ public static const PRINT:String = 'print';
+
+ public static const QUERY_BUILDER:String = 'query_builder';
+ public static const QUESTION_ANSWER:String = 'question_answer';
+ public static const RECEIPT:String = 'receipt';
+ public static const RECORD_VOICE_OVER:String = 'record_voice_over';
+ public static const REDEEM:String = 'redeem';
+ public static const REMOVE_SHOPPING_CART:String = 'remove_shopping_cart';
+ public static const REORDER:String = 'reorder';
+ public static const REPORT_PROBLEM:String = 'report_problem';
+ public static const RESTORE:String = 'restore';
+ public static const RESTORE_PAGE:String = 'restore_page';
+
+ public static const ROOM:String = 'room';
+ public static const ROUND_CORNER:String = 'rounded_corner';
+ public static const ROWING:String = 'rowing';
+ public static const SCHEDULE:String = 'schedule';
+ public static const SEARCH:String = 'search';
+ public static const SETTINGS:String = 'settings';
+ public static const SETTINGS_APPLICATIONS:String = 'settings_applications';
+ public static const SETTINGS_BACKUP_RESTORE:String = 'settings_backup_restore';
+ public static const SETTINGS_BLUETOOTH:String = 'settings_bluetooth';
+ public static const SETTINGS_BRIGHTNESS:String = 'settings_brightness';
+
+ public static const SETTINGS_CELL:String = 'settings_cell';
+ public static const SETTINGS_ETHERNET:String = 'settings_ethernet';
+ public static const SETTINGS_INPUT_ANTENNA:String = 'settings_input_antenna';
+ public static const SETTINGS_INPUT_COMPONENT:String = 'settings_input_component';
+ public static const SETTINGS_INPUT_COMPOSITE:String = 'settings_input_composite';
+ public static const SETTINGS_INPUT_HDMI:String = 'settings_input_hdmi';
+ public static const SETTINGS_INPUT_SVIDEO:String = 'settings_input_svideo';
+ public static const SETTINGS_OVERSCAN:String = 'settings_overscan';
+ public static const SETTINGS_PHONE:String = 'settings_phone';
+ public static const SETTINGS_POWER:String = 'settings_power';
+
+ public static const SETTINGS_REMOTE:String = 'settings_remote';
+ public static const SETTINGS_VOICE:String = 'settings_voice';
+ public static const SHOP:String = 'shop';
+ public static const SHOP_TWO:String = 'shop_two';
+ public static const SHOPPING_BASKET:String = 'shopping_basket';
+ public static const SHOPPING_CART:String = 'shopping_cart';
+ public static const SPEAKER_NOTES:String = 'speaker_notes';
+ public static const SPEAKER_NOTES_OFF:String = 'speaker_notes_off';
+ public static const SPELLCHECK:String = 'spellcheck';
+ public static const STAR_RATE:String = 'star_rate';
+
+ public static const STARS:String = 'stars';
+ public static const STORE:String = 'store';
+ public static const SUBJECT:String = 'subject';
+ public static const SUPERVISOR_ACCOUNT:String = 'supervisor_account';
+ public static const SWAP_HORIZ:String = 'swap_horiz';
+ public static const SWAP_VERT:String = 'swap_vert';
+ public static const SWAP_VERTICAL_CIRCLE:String = 'swap_vertical_circle';
+ public static const SYSTEM_UPDATE_ALT:String = 'system_update_alt';
+ public static const TAB:String = 'tab';
+ public static const TAB_UNSELECTED:String = 'tab_unselected';
+
+ public static const THEATERS:String = 'theaters';
+ public static const THUMB_DOWN:String = 'thumb_down';
+ public static const THUMB_UP:String = 'thumb_up';
+ public static const THUMB_UP_DOWN:String = 'thumbs_up_down';
+ public static const TIMELINE:String = 'timeline';
+ public static const TOC:String = 'toc';
+ public static const TODAY:String = 'today';
+ public static const TOLL:String = 'toll';
+ public static const TOUCH_APP:String = 'touch_app';
+ public static const TRACK_CHANGES:String = 'track_changes';
+
+ public static const TRANSLATE:String = 'translate';
+ public static const TRENDING_DOWN:String = 'trending_down';
+ public static const TRENDING_FLAT:String = 'trending_flat';
+ public static const TRENDING_UP:String = 'trending_up';
+ public static const TURNED_IN:String = 'turned_in';
+ public static const TURNED_IN_NOT:String = 'turned_in_not';
+ public static const UPDATE:String = 'update';
+ public static const VERIFIED_USER:String = 'verified_user';
+ public static const VIEW_AGENDA:String = 'view_agenda';
+ public static const VIEW_ARRAY:String = 'view_array';
+
+ public static const VIEW_CAROUSEL:String = 'view_carousel';
+ public static const VIEW_COLUMN:String = 'view_column';
+ public static const VIEW_DAY:String = 'view_day';
+ public static const VIEW_HEADLINE:String = 'view_headline';
+ public static const VIEW_LIST:String = 'view_list';
+ public static const VIEW_MODULE:String = 'view_module';
+ public static const VIEW_QUILT:String = 'view_quilt';
+ public static const VIEW_STREAM:String = 'view_stream';
+ public static const VIEW_WEEK:String = 'view_week';
+ public static const VISIBILITY:String = 'visibility';
+
+ public static const VISIBILITY_OFF:String = 'visibility_off';
+ public static const WATCH_LATER:String = 'watch_later';
+ public static const WORK:String = 'work';
+ public static const YOUTUBE_SEARCHED_FOR:String = 'youtube_searched_for';
+ public static const ZOMM_IN:String = 'zoom_in';
+ public static const ZOOM_OUT:String = 'zoom_out';
+ public static const ADD_ALERT:String = 'add_alert';
+ public static const ERROR:String = 'error';
+ public static const ERROR_OUTLINE:String = 'error_outline';
+ public static const WARNING:String = 'warning';
+
+ public static const ADD_TO_QUEUE:String = 'add_to_queue';
+ public static const AIRPLAY:String = 'airplay';
+ public static const ALBUM:String = 'album';
+ public static const ART_TRACK:String = 'art_track';
+ public static const AV_TIMER:String = 'av_timer';
+ public static const BRANDING_WATERMARK:String = 'branding_watermark';
+ public static const CALL_TO_ACTION:String = 'call_to_action';
+ public static const CLOSED_CAPTION:String = 'closed_caption';
+ public static const EQUALIZER:String = 'equalizer';
+ public static const EXPLICIT:String = 'explicit';
+
+ public static const FAST_FORWARD:String = 'fast_forward';
+ public static const FAST_REWIND:String = 'fast_rewind';
+ public static const FEATURE_PLAY_LIST:String = 'featured_play_list';
+ public static const FEATURE_VIDEO:String = 'featured_video';
+ public static const FIBER_DVR:String = 'fiber_dvr';
+ public static const FIBER_MANUAL_RECORD:String = 'fiber_manual_record';
+ public static const FIBER_NEW:String = 'fiber_new';
+ public static const FIBER_PIN:String = 'fiber_pin';
+ public static const FIBER_SMART_RECORD:String = 'fiber_smart_record';
+ public static const FORWARD_10:String = 'forward_10';
+
+ public static const FORWARD_30:String = 'forward_30';
+ public static const FORWARD_5:String = 'forward_5';
+ public static const GAMES:String = 'games';
+ public static const HD:String = 'hd';
+ public static const HEARING:String = 'hearing';
+ public static const HIGH_QUALITY:String = 'high_quality';
+ public static const LIBRARY_ADD:String = 'library_add';
+ public static const LIBRARY_BOOKS:String = 'library_books';
+ public static const LIBRARY_MUSIC:String = 'library_music';
+ public static const LOOP:String = 'loop';
+
+ public static const MIC_:String = 'mic';
+ public static const MIC_NONE:String = 'mic_none';
+ public static const MIC_OFF:String = 'mic_off';
+ public static const MOVIE:String = 'movie';
+ public static const MUSIC_VIDEO:String = 'music_video';
+ public static const NEW_RELEASES:String = 'new_releases';
+ public static const NOT_INTERESTED:String = 'not_interested';
+ public static const NOTE:String = 'note';
+ public static const PAUSE:String = 'pause';
+ public static const PAUSE_CIRCLE_FILLED:String = 'pause_circle_filled';
+
+ public static const PAUSE_CIRCLE_OUTLINE:String = 'pause_circle_outline';
+ public static const PLAY_ARROW:String = 'play_arrow';
+ public static const PLAY_CIRCLE_FILLED:String = 'play_circle_filled';
+ public static const PLAY_CIRCLE_OUTLINE:String = 'play_circle_outline';
+ public static const PLAYLIST_ADD:String = 'playlist_add';
+ public static const PLAYLIST_ADD_CHECK:String = 'playlist_add_check';
+ public static const PLAYLIST_PLAY:String = 'playlist_play';
+ public static const QUEUE:String = 'queue';
+ public static const QUEUE_MUSIC:String = 'queue_music';
+ public static const QUEUE_PLAY_NEXT:String = 'queue_play_next';
+
+ public static const RADIO:String = 'radio';
+ public static const RECENT_ACTORS:String = 'recent_actors';
+ public static const REMOVE_FROM_QUEUE:String = 'remove_from_queue';
+ public static const REPEAT:String = 'repeat';
+ public static const REPEAT_ONE:String = 'repeat_one';
+ public static const REPLAY:String = 'replay';
+ public static const REPLAY_10:String = 'replay_10';
+ public static const REPLAY_30:String = 'replay_30';
+ public static const REPLAY_5:String = 'replay_5';
+ public static const SHUFFLE:String = 'shuffle';
+
+ public static const SKIP_NEXT:String = 'skip_next';
+ public static const SKIP_PREVIOUS:String = 'skip_previous';
+ public static const SLOW_MOTION_VIDEO:String = 'slow_motion_video';
+ public static const SNOOZE:String = 'snooze';
+ public static const SORT_BY_ALPHA:String = 'sort_by_alpha';
+ public static const STOP:String = 'stop';
+ public static const SUBSCRIPTIONS:String = 'subscriptions';
+ public static const SUBTITLES:String = 'subtitles';
+ public static const SURROUND_SOUND:String = 'surround_sound';
+ public static const VIDEO_CALL:String = 'video_call';
+
+ public static const VIDEO_LABEL:String = 'video_label';
+ public static const VIDEO_LIBRARY:String = 'video_library';
+ public static const VIDEOCAM:String = 'videocam';
+ public static const VIDEOCAM_OFF:String = 'videocam_off';
+ public static const VOLUME_DOWN:String = 'volume_down';
+ public static const VOLUME_MUTE:String = 'volume_mute';
+ public static const VOLUME_OFF:String = 'volume_off';
+ public static const VOLUME_UP:String = 'volume_up';
+ public static const WEB:String = 'web';
+ public static const WEB_ASSET:String = 'web_asset';
+
+ public static const BUSINESS:String = 'business';
+ public static const CALL:String = 'call';
+ public static const CALL_END:String = 'call_end';
+ public static const CALL_MADE:String = 'call_made';
+ public static const CALL_MERGE:String = 'call_merge';
+ public static const CALL_MISSED:String = 'call_missed';
+ public static const CALL_MISSED_OUTGOING:String = 'call_missed_outgoing';
+ public static const CALL_RECEIVED:String = 'call_received';
+ public static const CALL_SPLIT:String = 'call_split';
+ public static const CHAT:String = 'chat';
+
+ public static const CHAT_BUBBLE:String = 'chat_bubble';
+ public static const CHAT_BUBBLE_OUTLINE:String = 'chat_bubble_outline';
+ public static const CLEAR_ALL:String = 'clear_all';
+ public static const COMMENT:String = 'comment';
+ public static const CONTACT_MAIL:String = 'contact_mail';
+ public static const CONTACT_PHONE:String = 'contact_phone';
+ public static const CONTACTS:String = 'contacts';
+ public static const DIALER_SIP:String = 'dialer_sip';
+ public static const DIALPAD:String = 'dialpad';
+ public static const EMAIL:String = 'email';
+
+ public static const forum:String = 'forum';
+ public static const import_contacts:String = 'import_contacts';
+ public static const import_export:String = 'import_export';
+ public static const invert_colors_off:String = 'invert_colors_off';
+ public static const live_help:String = 'live_help';
+ public static const location_off:String = 'location_off';
+ public static const location_on:String = 'location_on';
+ public static const mail_outline:String = 'mail_outline';
+ public static const message:String = 'message';
+ public static const no_sim:String = 'no_sim';
+
+ public static const PHONE:String = 'phone';
+ public static const PHONELINK_ERASE:String = 'phonelink_erase';
+ public static const PHONELINK_LOCK:String = 'phonelink_lock';
+ public static const PHONELINK_RING:String = 'phonelink_ring';
+ public static const PHONELINK_SETUP:String = 'phonelink_setup';
+ public static const PORTABLE_WIFI_OFF:String = 'portable_wifi_off';
+ public static const PRESENT_TO_ALL:String = 'present_to_all';
+ public static const RING_VOLUME:String = 'ring_volume';
+ public static const RSS_FEED:String = 'rss_feed';
+ public static const SCREEN_SHARE:String = 'screen_share';
+
+ public static const SPEAKER_PHONE:String = 'speaker_phone';
+ public static const STAY_CURRENT_LANDSCAPE:String = 'stay_current_landscape';
+ public static const STAY_CURRENT_PORTRAIT:String = 'stay_current_portrait';
+ public static const STAY_PRIMARY_LANDSCAPE:String = 'stay_primary_landscape';
+ public static const STAY_PRIMARY_PORTRAIT:String = 'stay_primary_portrait';
+ public static const STOP_SCREEN_SHARE:String = 'stop_screen_share';
+ public static const SWAP_CALLS:String = 'swap_calls';
+ public static const TEXTSMS:String = 'textsms';
+ public static const VOICEMAIL:String = 'voicemail';
+ public static const VPN_KEY:String = 'vpn_key';
+
+ public static const ADD:String = 'add';
+ public static const ADD_BOX:String = 'add_box';
+ public static const ADD_CIRCLE:String = 'add_circle';
+ public static const ADD_CIRCLE_OUTLINE:String = 'add_circle_outline';
+ public static const ARCHIVE:String = 'archive';
+ public static const BACKSPACE:String = 'backspace';
+ public static const BLOCK:String = 'block';
+ public static const CLEAR:String = 'clear';
+ public static const CONTENT_COPY:String = 'content_copy';
+ public static const CONTENT_CUT:String = 'content_cut';
+
+ public static const CONTENT_PASTE:String = 'content_paste';
+ public static const CREATE:String = 'create';
+ public static const DELETE_SWEEP:String = 'delete_sweep';
+ public static const DRAFTS:String = 'drafts';
+ public static const FILTER_LIST:String = 'filter_list';
+ public static const FLAG:String = 'flag';
+ public static const FONT_DOWNLOAD:String = 'font_download';
+ public static const FORWARD:String = 'forward';
+ public static const GESTURE:String = 'gesture';
+ public static const INBOX:String = 'inbox';
+
+ public static const LINK:String = 'link';
+ public static const LOW_PRIORITY:String = 'low_priority';
+ public static const MAIL:String = 'mail';
+ public static const MARKUNREAD:String = 'markunread';
+ public static const MOVE_TO_INBOX:String = 'move_to_inbox';
+ public static const NEXT_WEEK:String = 'next_week';
+ public static const REDO:String = 'redo';
+ public static const REMOVE:String = 'remove';
+ public static const REMOVE_CIRCLE:String = 'remove_circle';
+ public static const REMOVE_CIRCLE_OUTLINE:String = 'remove_circle_outline';
+
+ public static const REPLY:String = 'reply';
+ public static const REPLY_ALL:String = 'reply_all';
+ public static const REPORT:String = 'report';
+ public static const SAVE:String = 'save';
+ public static const SELECT_ALL:String = 'select_all';
+ public static const SEND:String = 'send';
+ public static const SORT:String = 'sort';
+ public static const TEXT_FORMAT:String = 'text_format';
+ public static const UNARCHIVE:String = 'unarchive';
+ public static const UNDO:String = 'undo';
+
+ public static const WEEKEND:String = 'weekend';
+ public static const ACCESS_ALARM:String = 'access_alarm';
+ public static const ACCESS_ALARMS:String = 'access_alarms';
+ public static const ACCESS_TIME:String = 'access_time';
+ public static const ADD_ALARM:String = 'add_alarm';
+ public static const AIRPLANEMODE_ACTIVE:String = 'airplanemode_active';
+ public static const AIRPLANEMODE_INACTIVE:String = 'airplanemode_inactive';
+ public static const BATTERY_ALERT:String = 'battery_alert';
+ public static const BATTERY_CHARGING_FULL:String = 'battery_charging_full';
+ public static const BATTERY_FULL:String = 'battery_full';
+
+ public static const BATTERY_STD:String = 'battery_std';
+ public static const BATTERY_UNKNOWN:String = 'battery_unknown';
+ public static const BLUETOOTH:String = 'bluetooth';
+ public static const BLUETOOTH_CONNECTED:String = 'bluetooth_connected';
+ public static const BLUETOOTH_DISABLED:String = 'bluetooth_disabled';
+ public static const BLUETOOTH_SEARCHING:String = 'bluetooth_searching';
+ public static const BRIGHTNESS_AUTO:String = 'brightness_auto';
+ public static const BRIGHTNESS_HIGH:String = 'brightness_high';
+ public static const BRIGHTNESS_LOW:String = 'brightness_low';
+ public static const BRIGHTNESS_MEDIUM:String = 'brightness_medium';
+
+ public static const DATA_USAGE:String = 'data_usage';
+ public static const DEVELOPER_MODE:String = 'developer_mode';
+ public static const DEVICES:String = 'devices';
+ public static const DVR:String = 'dvr';
+ public static const GPS_FIXED:String = 'gps_fixed';
+ public static const GPS_NOT_FIXED:String = 'gps_not_fixed';
+ public static const GPS_OFF:String = 'gps_off';
+ public static const GRAPHIC_EQ:String = 'graphic_eq';
+ public static const LOCATION_DISABLED:String = 'location_disabled';
+ public static const LOCATION_SEARCHING:String = 'location_searching';
+
+ public static const NETWORK_CELL:String = 'network_cell';
+ public static const NETWORK_WIFI:String = 'network_wifi';
+ public static const NFC:String = 'nfc';
+ public static const SCREEN_LOCK_LANDSCAPE:String = 'screen_lock_landscape';
+ public static const SCREEN_LOCK_PORTRAIT:String = 'screen_lock_portraitXXX';
+ public static const SCREEN_LOCK_ROTATION:String = 'screen_lock_rotation';
+ public static const SCREEN_ROTATION:String = 'screen_rotation';
+ public static const SD_STORAGE:String = 'sd_storage';
+ public static const SETTINGS_SYSTEM_DAYDREAM:String = 'settings_system_daydream';
+ public static const SIGNAL_CELLULAR_4_BAR:String = 'signal_cellular_4_bar';
+
+ public static const SIGNAL_CELLULAR_CONNECTED_NO_INTERNET_4_BAR:String = 'signal_cellular_connected_no_internet_4_bar';
+ public static const SIGNAL_CELLULAR_NO_SIM:String = 'signal_cellular_no_sim';
+ public static const SIGNAL_CELLULAR_NULL:String = 'signal_cellular_null';
+ public static const SIGNAL_CELLULAR_OFF:String = 'signal_cellular_off';
+ public static const SIGNAL_WIFI_4_BAR:String = 'signal_wifi_4_bar';
+ public static const SIGNAL_WIFI_4_BAR_LOCK:String = 'signal_wifi_4_bar_lock';
+ public static const SIGNAL_WIFI_OFF:String = 'signal_wifi_off';
+ public static const STORAGE:String = 'storage';
+ public static const USB:String = 'usb';
+ public static const WALLPAPER:String = 'wallpaper';
+
+ public static const WIDGETS:String = 'widgets';
+ public static const WIFI_LOCK:String = 'wifi_lock';
+ public static const WIFI_TETHERING:String = 'wifi_tethering';
+ public static const ATTACH_FILE:String = 'attach_file';
+ public static const ATTACH_MONEY:String = 'attach_money';
+ public static const BORDER_ALL:String = 'border_all';
+ public static const BORDER_BOTTOM:String = 'border_bottom';
+ public static const BORDER_CLEAR:String = 'border_clear';
+ public static const BORDER_COLOR:String = 'border_color';
+ public static const BORDER_HORIZONTAL:String = 'border_horizontal';
+
+ public static const BORDER_INNER:String = 'border_inner';
+ public static const BORDER_LEFT:String = 'border_left';
+ public static const BORDER_OUTER:String = 'border_outer';
+ public static const BORDER_RIGHT:String = 'border_right';
+ public static const BORDER_STYLE:String = 'border_style';
+ public static const BORDER_TOP:String = 'border_top';
+ public static const BORDER_VERTICAL:String = 'border_vertical';
+ public static const BUBBLE_CHART:String = 'bubble_chart';
+ public static const DRAG_HANDLE:String = 'drag_handle';
+ public static const FORMAT_ALIGN_CENTER:String = 'format_align_center';
+
+ public static const FORMAT_ALIGN_JUSTIFY:String = 'format_align_justify';
+ public static const FORMAT_ALIGN_LEFT:String = 'format_align_left';
+ public static const FORMAT_ALIGN_RIGHT:String = 'format_align_right';
+ public static const FORMAT_BOLD:String = 'format_bold';
+ public static const FORMAT_CLEAR:String = 'format_clear';
+ public static const FORMAT_COLOR_FILL:String = 'format_color_fill';
+ public static const FORMAT_COLOR_RESET:String = 'format_color_reset';
+ public static const FORMAT_COLOR_TEXT:String = 'format_color_text';
+ public static const FORMAT_INDENT_DECREASE:String = 'format_indent_decrease';
+ public static const FORMAT_INDENT_INCREASE:String = 'format_indent_increase';
+
+ public static const FORMAT_ITALIC:String = 'format_italic';
+ public static const FORMAT_LINE_SPACING:String = 'format_line_spacing';
+ public static const FORMAT_LIST_BULLETED:String = 'format_list_bulleted';
+ public static const FORMAT_LIST_NUMBERED:String = 'format_list_numbered';
+ public static const FORMAT_PAINT:String = 'format_paint';
+ public static const FORMAT_QUOTE:String = 'format_quote';
+ public static const FORMAT_SHAPES:String = 'format_shapes';
+ public static const FORMAT_SIZE:String = 'format_size';
+ public static const FORMAT_STRIKETHROUGH:String = 'format_strikethrough';
+ public static const FORMAT_TEXTDIRECTION_L_TO_R:String = 'format_textdirection_l_to_r';
+
+ public static const FORMAT_TEXTDIRECTION_R_TO_L:String = 'format_textdirection_r_to_l';
+ public static const FORMAT_UNDERLINED:String = 'format_underlined';
+ public static const FUNCTIONS:String = 'functions';
+ public static const HIGHLIGHT:String = 'highlight';
+ public static const INSERT_CHART:String = 'insert_chart';
+ public static const INSERT_COMMENT:String = 'insert_comment';
+ public static const INSERT_DRIVE_FILE:String = 'insert_drive_file';
+ public static const INSERT_EMOTICON:String = 'insert_emoticon';
+ public static const INSERT_INVITATION:String = 'insert_invitation';
+ public static const INSERT_LINK:String = 'insert_link';
+
+ public static const INSERT_PHOTO:String = 'insert_photo';
+ public static const LINEAR_SCALE:String = 'linear_scale';
+ public static const MERGE_TYPE:String = 'merge_type';
+ public static const MODE_COMMENT:String = 'mode_comment';
+ public static const MODE_EDIT:String = 'mode_edit';
+ public static const MONETIZATION_ON:String = 'monetization_on';
+ public static const MONEY_OFF:String = 'money_off';
+ public static const MULTILINE_CHART:String = 'multiline_chart';
+ public static const PIE_CHART:String = 'pie_chart';
+ public static const PIE_CHART_OUTLINED:String = 'pie_chart_outlined';
+
+ public static const PUBLISH:String = 'publish';
+ public static const SHORT_TEXT:String = 'short_text';
+ public static const SHOW_CHART:String = 'show_chart';
+ public static const SPACE_BAR:String = 'space_bar';
+ public static const STRIKETHROUGH_S:String = 'strikethrough_s';
+ public static const TEXT_FIELDS:String = 'text_fields';
+ public static const TITLE:String = 'title';
+ public static const VERTICAL_ALIGN_BOTTOM:String = 'vertical_align_bottom';
+ public static const VERTICAL_ALIGN_CENTER:String = 'vertical_align_center';
+ public static const VERTICAL_ALIGN_TOP:String = 'vertical_align_top';
+
+ public static const WRAP_TEXT:String = 'wrap_text';
+ public static const ATTACHMENT:String = 'attachment';
+ public static const CLOUD:String = 'cloud';
+ public static const CLOUD_CIRCLE:String = 'cloud_circle';
+ public static const CLOUD_DONE:String = 'cloud_done';
+ public static const CLOUD_DOWNLOAD:String = 'cloud_download';
+ public static const CLOUD_OFF:String = 'cloud_off';
+ public static const CLOUD_QUEUE:String = 'cloud_queue';
+ public static const CLOUD_UPLOAD:String = 'cloud_upload';
+ public static const CREATE_NEW_FOLDER:String = 'create_new_folder';
+
+ public static const FILE_DOWNLOAD:String = 'file_download';
+ public static const FILE_UPLOAD:String = 'file_upload';
+ public static const FOLDER:String = 'folder';
+ public static const FOLDER_OPEN:String = 'folder_open';
+ public static const FOLDER_SHARED:String = 'folder_shared';
+ public static const CAST:String = 'cast';
+ public static const CAST_CONNECTED:String = 'cast_connected';
+ public static const COMPUTER:String = 'computer';
+ public static const DESKTOP_MAC:String = 'desktop_mac';
+ public static const DESKTOP_WINDOWS:String = 'desktop_windows';
+
+ public static const DEVELOPER_BOARD:String = 'developer_board';
+ public static const DEVICE_HUB:String = 'device_hub';
+ public static const DEVICES_OTHER:String = 'devices_other';
+ public static const DOCK:String = 'dock';
+ public static const GAMEPAD:String = 'gamepad';
+ public static const HEADSET:String = 'headset';
+ public static const HEADSET_MIC:String = 'headset_mic';
+ public static const KEYBOARD:String = 'keyboard';
+ public static const KEYBOARD_ARROW_DOWN:String = 'keyboard_arrow_down';
+ public static const KEYBOARD_ARROW_LEFT:String = 'keyboard_arrow_left';
+
+ public static const KEYBOARD_ARROW_RIGHT:String = 'keyboard_arrow_right';
+ public static const KEYBOARD_ARROW_UP:String = 'keyboard_arrow_up';
+ public static const KEYBOARD_BACKSPACE:String = 'keyboard_backspace';
+ public static const KEYBOARD_CAPSLOCK:String = 'keyboard_capslock';
+ public static const KEYBOARD_HIDE:String = 'keyboard_hide';
+ public static const KEYBOARD_RETURN:String = 'keyboard_return';
+ public static const KEYBOARD_TAB:String = 'keyboard_tab';
+ public static const KEYBOARD_VOICE:String = 'keyboard_voice';
+ public static const LAPTOP:String = 'laptop';
+ public static const LAPTOP_CHROMEBOOK:String = 'laptop_chromebook';
+
+ public static const LAPTOP_MAC:String = 'laptop_mac';
+ public static const LAPTOP_WINDOWS:String = 'laptop_windows';
+ public static const MEMORY:String = 'memory';
+ public static const MOUSE:String = 'mouse';
+ public static const PHONE_ANDROID:String = 'phone_android';
+ public static const PHONE_IPHONE:String = 'phone_iphone';
+ public static const PHONELINK:String = 'phonelink';
+ public static const PHONELINK_OFF:String = 'phonelink_off';
+ public static const POWER_INPUT:String = 'power_input';
+ public static const ROUTER:String = 'router';
+
+ public static const SCANNER:String = 'scanner';
+ public static const SECURITY:String = 'security';
+ public static const SIM_CARD:String = 'sim_card';
+ public static const SMARTPHONE:String = 'smartphone';
+ public static const SPEAKER:String = 'speaker';
+ public static const SPEAKER_GROUP:String = 'speaker_group';
+ public static const TABLET:String = 'tablet';
+ public static const TABLET_ANDROID:String = 'tablet_android';
+ public static const TABLET_MAC:String = 'tablet_mac';
+ public static const TOYS:String = 'toys';
+
+ public static const TV:String = 'tv';
+ public static const VIDEOGAME_ASSET:String = 'videogame_asset';
+ public static const WATCH:String = 'watch';
+ public static const ADD_A_PHOTO:String = 'add_a_photo';
+ public static const ADD_TO_PHOTOS:String = 'add_to_photos';
+ public static const ADJUST:String = 'adjust';
+ public static const ASSISTANT:String = 'assistant';
+ public static const ASSISTANT_PHOTO:String = 'assistant_photo';
+ public static const AUDIOTRACK:String = 'audiotrack';
+ public static const BLUR_CIRCULAR:String = 'blur_circular';
+
+ public static const BLUR_LINEAR:String = 'blur_linear';
+ public static const BLUR_OFF:String = 'blur_off';
+ public static const BLUR_ON:String = 'blur_on';
+ public static const BRIGHTNESS_1:String = 'brightness_1';
+ public static const BRIGHTNESS_2:String = 'brightness_2';
+ public static const BRIGHTNESS_3:String = 'brightness_3';
+ public static const BRIGHTNESS_4:String = 'brightness_4';
+ public static const BRIGHTNESS_5:String = 'brightness_5';
+ public static const BRIGHTNESS_6:String = 'brightness_6';
+ public static const BRIGHTNESS_7:String = 'brightness_7';
+
+ public static const BROKEN_IMAGE:String = 'broken_image';
+ public static const BRUSH:String = 'brush';
+ public static const BURST_MODE:String = 'burst_mode';
+ public static const CAMERA:String = 'camera';
+ public static const CAMERA_ALT:String = 'camera_alt';
+ public static const CAMERA_FRONT:String = 'camera_front';
+ public static const CAMERA_REAR:String = 'camera_rear';
+ public static const CAMERA_ROLL:String = 'camera_roll';
+ public static const CENTER_FOCUS_STRONG:String = 'center_focus_strong';
+ public static const CENTER_FOCUS_WEAK:String = 'center_focus_weak';
+
+ public static const COLLECTIONS:String = 'collections';
+ public static const COLLECTIONS_BOOKMARK:String = 'collections_bookmark';
+ public static const COLOR_LENS:String = 'color_lens';
+ public static const COLORIZE:String = 'colorize';
+ public static const COMPARE:String = 'compare';
+ public static const CONTROL_POINT:String = 'control_point';
+ public static const CONTROL_POINT_DUPLICATE:String = 'control_point_duplicate';
+ public static const CROP:String = 'crop';
+ public static const CROP_16_9:String = 'crop_16_9';
+ public static const CROP_3_2:String = 'crop_3_2';
+
+ public static const CROP_5_4:String = 'crop_5_4';
+ public static const CROP_7_5:String = 'crop_7_5';
+ public static const CROP_DIN:String = 'crop_din';
+ public static const CROP_FREE:String = 'crop_free';
+ public static const CROP_LANDSCAPE:String = 'crop_landscape';
+ public static const CROP_ORIGINAL:String = 'crop_original';
+ public static const CROP_PORTRAIT:String = 'crop_portrait';
+ public static const CROP_ROTATE:String = 'crop_rotate';
+ public static const CROP_SQUARE:String = 'crop_square';
+ public static const DEHAZE:String = 'dehaze';
+
+ public static const DETAILS:String = 'details';
+ public static const EDIT:String = 'edit';
+ public static const EXPOSURE:String = 'exposure';
+ public static const EXPOSURE_NEG_1:String = 'exposure_neg_1';
+ public static const EXPOSURE_NEG_2:String = 'exposure_neg_2';
+ public static const EXPOSURE_PLUS_1:String = 'exposure_plus_1';
+ public static const EXPOSURE_PLUS_2:String = 'exposure_plus_2';
+ public static const EXPOSURE_ZERO:String = 'exposure_zero';
+ public static const FILTER:String = 'filter';
+ public static const FILTER_1:String = 'filter_1';
+
+ public static const FILTER_2:String = 'filter_2';
+ public static const FILTER_3:String = 'filter_3';
+ public static const FILTER_4:String = 'filter_4';
+ public static const FILTER_5:String = 'filter_5';
+ public static const FILTER_6:String = 'filter_6';
+ public static const FILTER_7:String = 'filter_7';
+ public static const FILTER_8:String = 'filter_8';
+ public static const FILTER_9:String = 'filter_9';
+ public static const FILTER_9_PLUS:String = 'filter_9_plus';
+ public static const FILTER_B_AND_W:String = 'filter_b_and_w';
+
+ public static const FILTER_CENTER_FOCUS:String = 'filter_center_focus';
+ public static const FILTER_DRAMA:String = 'filter_drama';
+ public static const FILTER_FRAMES:String = 'filter_frames';
+ public static const FILTER_HDR:String = 'filter_hdr';
+ public static const FILTER_NONE:String = 'filter_none';
+ public static const FILTER_TILT_SHIFT:String = 'filter_tilt_shift';
+ public static const FILTER_VINTAGE:String = 'filter_vintage';
+ public static const FLARE:String = 'flare';
+ public static const FLASH_AUTO:String = 'flash_auto';
+ public static const FLASH_OFF:String = 'flash_off';
+
+ public static const FLASH_ON:String = 'flash_on';
+ public static const FLIP:String = 'flip';
+ public static const GRADIENT:String = 'gradient';
+ public static const GRAIN:String = 'grain';
+ public static const GRID_OFF:String = 'grid_off';
+ public static const GRID_ON:String = 'grid_on';
+ public static const HDR_OFF:String = 'hdr_off';
+ public static const HDR_ON:String = 'hdr_on';
+ public static const HDR_STRONG:String = 'hdr_strong';
+ public static const HDR_WEAK:String = 'hdr_weak';
+
+ public static const HEALING:String = 'healing';
+ public static const IMAGE:String = 'image';
+ public static const IMAGE_ASPECT_RATIO:String = 'image_aspect_ratio';
+ public static const ISO:String = 'iso';
+ public static const LANDSCAPE:String = 'landscape';
+ public static const LEAK_ADD:String = 'leak_add';
+ public static const LEAK_REMOVE:String = 'leak_remove';
+ public static const LENS:String = 'lens';
+ public static const LINKED_CAMERA:String = 'linked_camera';
+ public static const LOOKS:String = 'looks';
+
+ public static const LOOKS_3:String = 'looks_3';
+ public static const LOOKS_4:String = 'looks_4';
+ public static const LOOKS_5:String = 'looks_5';
+ public static const LOOKS_6:String = 'looks_6';
+ public static const LOOKS_ONE:String = 'looks_one';
+ public static const LOOKS_TWO:String = 'looks_two';
+ public static const LOUPE:String = 'loupe';
+ public static const MONOCHROME_PHOTOS:String = 'monochrome_photos';
+ public static const MOVIE_CREATION:String = 'movie_creation';
+ public static const MOVIE_FILTER:String = 'movie_filter';
+
+ public static const MUSIC_NOTE:String = 'music_note';
+ public static const NATURE:String = 'nature';
+ public static const NATURE_PEOPLE:String = 'nature_people';
+ public static const NAVIGATE_BEFORE:String = 'navigate_before';
+ public static const NAVIGATE_NEXT:String = 'navigate_next';
+ public static const PALETTE:String = 'palette';
+ public static const PANORAMA:String = 'panorama';
+ public static const PANORAMA_FISH_EYE:String = 'panorama_fish_eye';
+ public static const PANORAMA_HORIZONTAL:String = 'panorama_horizontal';
+ public static const PANORAMA_VERTICAL:String = 'panorama_vertical';
+
+ public static const PANORAMA_WIDE_ANGLE:String = 'panorama_wide_angle';
+ public static const PHOTO:String = 'photo';
+ public static const PHOTO_ALBUM:String = 'photo_album';
+ public static const PHOTO_CAMERA:String = 'photo_camera';
+ public static const PHOTO_FILTER:String = 'photo_filter';
+ public static const PHOTO_LIBRARY:String = 'photo_library';
+ public static const PHOTO_SIZE_SELECT_ACTUAL:String = 'photo_size_select_actual';
+ public static const PHOTO_SIZE_SELECT_LARGE:String = 'photo_size_select_large';
+ public static const PHOTO_SIZE_SELECT_SMALL:String = 'photo_size_select_small';
+ public static const PICTURE_AS_PDF:String = 'picture_as_pdf';
+
+ public static const PORTRAIT:String = 'portrait';
+ public static const REMOVE_RED_EYE:String = 'remove_red_eye';
+ public static const ROTATE_90_DEGREES_CCW:String = 'rotate_90_degrees_ccw';
+ public static const ROTATE_LEFT:String = 'rotate_left';
+ public static const ROTATE_RIGHT:String = 'rotate_right';
+ public static const SLIDESHOW:String = 'slideshow';
+ public static const STRAIGHTEN:String = 'straighten';
+ public static const STYLE:String = 'style';
+ public static const SWITCH_CAMERA:String = 'switch_camera';
+ public static const SWITCH_VIDEO:String = 'switch_video';
+
+ public static const TAG_FACES:String = 'tag_faces';
+ public static const TEXTURE:String = 'texture';
+ public static const TIMELAPSE:String = 'timelapse';
+ public static const TIMER:String = 'timer';
+ public static const TIMER_10:String = 'timer_10';
+ public static const TIMER_3:String = 'timer_3';
+ public static const TIMER_OFF:String = 'timer_off';
+ public static const TONALITY:String = 'tonality';
+ public static const TRANSFORM:String = 'transform';
+ public static const TUNE:String = 'tune';
+
+ public static const VIEW_COMFY:String = 'view_comfy';
+ public static const VIEW_COMPACT:String = 'view_compact';
+ public static const VIGNETTE:String = 'vignette';
+ public static const WB_AUTO:String = 'wb_auto';
+ public static const WB_CLOUDY:String = 'wb_cloudy';
+ public static const WB_INCANDESCENT:String = 'wb_incandescent';
+ public static const WB_IRIDESCENT:String = 'wb_iridescent';
+ public static const WB_SUNNY:String = 'wb_sunny';
+ public static const ADD_LOCATION:String = 'add_location';
+ public static const BEENHERE:String = 'beenhere';
+
+ public static const DIRECTIONS:String = 'directions';
+ public static const DIRECTIONS_BIKE:String = 'directions_bike';
+ public static const DIRECTIONS_BOAT:String = 'directions_boat';
+ public static const DIRECTIONS_BUS:String = 'directions_bus';
+ public static const DIRECTIONS_CAR:String = 'directions_car';
+ public static const DIRECTIONS_RAILWAY:String = 'directions_railway';
+ public static const DIRECTIONS_RUN:String = 'directions_run';
+ public static const DIRECTIONS_SUBWAY:String = 'directions_subway';
+ public static const DIRECTIONS_TRANSIT:String = 'directions_transit';
+ public static const DIRECTIONS_WALK:String = 'directions_walk';
+
+ public static const EDIT_LOCATION:String = 'edit_location';
+ public static const EV_STATION:String = 'ev_station';
+ public static const FLIGHT:String = 'flight';
+ public static const HOTEL:String = 'hotel';
+ public static const LAYERS:String = 'layers';
+ public static const LAYERS_CLEAR:String = 'layers_clear';
+ public static const LOCAL_ACTIVITY:String = 'local_activity';
+ public static const LOCAL_AIRPORT:String = 'local_airport';
+ public static const LOCAL_ATM:String = 'local_atm';
+ public static const LOCAL_BAR:String = 'local_bar';
+
+ public static const LOCAL_CAFE:String = 'local_cafe';
+ public static const LOCAL_CAR_WASH:String = 'local_car_wash';
+ public static const LOCAL_CONVENIENCE_STORE:String = 'local_convenience_store';
+ public static const LOCAL_DINING:String = 'local_dining';
+ public static const LOCAL_DRINK:String = 'local_drink';
+ public static const LOCAL_FLORIST:String = 'local_florist';
+ public static const LOCAL_GAS_STATION:String = 'local_gas_station';
+ public static const LOCAL_GROCERY_STORE:String = 'local_grocery_store';
+ public static const LOCAL_HOSPITAL:String = 'local_hospital';
+ public static const LOCAL_HOTEL:String = 'local_hotel';
+
+ public static const LOCAL_LAUNDRY_SERVICE:String = 'local_laundry_service';
+ public static const LOCAL_LIBRARY:String = 'local_library';
+ public static const LOCAL_MALL:String = 'local_mall';
+ public static const LOCAL_MOVIES:String = 'local_movies';
+ public static const LOCAL_OFFER:String = 'local_offer';
+ public static const LOCAL_PARKING:String = 'local_parking';
+ public static const LOCAL_PHARMACY:String = 'local_pharmacy';
+ public static const LOCAL_PHONE:String = 'local_phone';
+ public static const LOCAL_PIZZA:String = 'local_pizza';
+ public static const LOCAL_PLAY:String = 'local_play';
+
+ public static const LOCAL_POST_OFFICE:String = 'local_post_office';
+ public static const LOCAL_PRINTSHOP:String = 'local_printshop';
+ public static const LOCAL_SEE:String = 'local_see';
+ public static const LOCAL_SHIPPING:String = 'local_shipping';
+ public static const LOCAL_TAXI:String = 'local_taxi';
+ public static const MAP:String = 'map';
+ public static const MY_LOCATION:String = 'my_location';
+ public static const NAVIGATION:String = 'navigation';
+ public static const NEAR_ME:String = 'near_me';
+ public static const PERSON_PIN:String = 'person_pin';
+
+ public static const PERSON_PIN_CIRCLE:String = 'person_pin_circle';
+ public static const PIN_DROP:String = 'pin_drop';
+ public static const PLACE:String = 'place';
+ public static const RATE_REVIEW:String = 'rate_review';
+ public static const RESTAURANT:String = 'restaurant';
+ public static const RESTAURANT_MENU:String = 'restaurant_menu';
+ public static const SATELLITE:String = 'satellite';
+ public static const STORE_MALL_DIRECTORY:String = 'store_mall_directory';
+ public static const STREETVIEW:String = 'streetview';
+ public static const SUBWAY:String = 'subway';
+
+ public static const TERRAIN:String = 'terrain';
+ public static const TRAFFIC:String = 'traffic';
+ public static const TRAIN:String = 'train';
+ public static const TRAM:String = 'tram';
+ public static const TRANSFER_WITHIN_A_STATION:String = 'transfer_within_a_station';
+ public static const ZOOM_OUT_MAP:String = 'zoom_out_map';
+ public static const APPS:String = 'apps';
+ public static const ARROW_BACK:String = 'arrow_back';
+ public static const ARROW_DOWNWARD:String = 'arrow_downward';
+ public static const ARROW_DROP_DOWN:String = 'arrow_drop_down';
+
+ public static const ARROW_DROP_DOWN_CIRCLE:String = 'arrow_drop_down_circle';
+ public static const ARROW_DROP_UP:String = 'arrow_drop_up';
+ public static const ARROW_FORWARD:String = 'arrow_forward';
+ public static const ARROW_UPWARD:String = 'arrow_upward';
+ public static const CANCEL:String = 'cancel';
+ public static const CHECK:String = 'check';
+ public static const CHEVRON_LEFT:String = 'chevron_left';
+ public static const CHEVRON_RIGHT:String = 'chevron_right';
+ public static const CLOSE:String = 'close';
+ public static const EXPAND_LESS:String = 'expand_less';
+
+ public static const EXPAND_MORE:String = 'expand_more';
+ public static const FIRST_PAGE:String = 'first_page';
+ public static const FULLSCREEN:String = 'fullscreen';
+ public static const FULLSCREEN_EXIT:String = 'fullscreen_exit';
+ public static const LAST_PAGE:String = 'last_page';
+ public static const MENU:String = 'menu';
+ public static const MORE_HORIZ:String = 'more_horiz';
+ public static const MORE_VERT:String = 'more_vert';
+ public static const REFRESH:String = 'refresh';
+ public static const SUBDIRECTORY_ARROW_LEFT:String = 'subdirectory_arrow_left';
+
+ public static const SUBDIRECTORY_ARROW_RIGHT:String = 'subdirectory_arrow_right';
+ public static const ADB:String = 'adb';
+ public static const AIRLINE_SEAT_FLAT:String = 'airline_seat_flat';
+ public static const AIRLINE_SEAT_FLAT_ANGLED:String = 'airline_seat_flat_angled';
+ public static const AIRLINE_SEAT_INDIVIDUAL_SUITE:String = 'airline_seat_individual_suite';
+ public static const AIRLINE_SEAT_LEGROOM_EXTRA:String = 'airline_seat_legroom_extra';
+ public static const AIRLINE_SEAT_LEGROOM_NORMAL:String = 'airline_seat_legroom_normal';
+ public static const AIRLINE_SEAT_LEGROOM_REDUCED:String = 'airline_seat_legroom_reduced';
+ public static const AIRLINE_SEAT_RECLINE_EXTRA:String = 'airline_seat_recline_extra';
+ public static const AIRLINE_SEAT_RECLINE_NORMAL:String = 'airline_seat_recline_normal';
+
+ public static const BLUETOOTH_AUDIO:String = 'bluetooth_audio';
+ public static const CONFIRMATION_NUMBER:String = 'confirmation_number';
+ public static const DISC_FULL:String = 'disc_full';
+ public static const DO_NOT_DISTURB:String = 'do_not_disturb';
+ public static const DO_NOT_DISTURB_ALT:String = 'do_not_disturb_alt';
+ public static const DO_NOT_DISTURB_OFF:String = 'do_not_disturb_off';
+ public static const DO_NOT_DISTURB_ON:String = 'do_not_disturb_on';
+ public static const DRIVE_ETA:String = 'drive_eta';
+ public static const ENHANCED_ENCRYPTION:String = 'enhanced_encryption';
+ public static const EVENT_AVAILABLE:String = 'event_available';
+
+ public static const EVENT_BUSY:String = 'event_busy';
+ public static const EVENT_NOTE:String = 'event_note';
+ public static const FOLDER_SPECIAL:String = 'folder_special';
+ public static const LIVE_TV:String = 'live_tv';
+ public static const MMS:String = 'mms';
+ public static const MORE:String = 'more';
+ public static const NETWORK_CHECK:String = 'network_check';
+ public static const NETWORK_LOCKED:String = 'network_locked';
+ public static const NO_ENCRYPTION:String = 'no_encryption';
+ public static const ONDEMAND_VIDEO:String = 'ondemand_video';
+
+ public static const PERSONAL_VIDEO:String = 'personal_video';
+ public static const PHONE_BLUETOOTH_SPEAKER:String = 'phone_bluetooth_speaker';
+ public static const PHONE_FORWARDED:String = 'phone_forwarded';
+ public static const PHONE_IN_TALK:String = 'phone_in_talk';
+ public static const PHONE_LOCKED:String = 'phone_locked';
+ public static const PHONE_MISSED:String = 'phone_missed';
+ public static const PHONE_PAUSED:String = 'phone_paused';
+ public static const POWER:String = 'power';
+ public static const PRIORITY_HIGH:String = 'priority_high';
+ public static const SD_CARD:String = 'sd_card';
+
+ public static const SIM_CARD_ALERT:String = 'sim_card_alert';
+ public static const SMS:String = 'sms';
+ public static const SMS_FAILED:String = 'sms_failed';
+ public static const SYNC:String = 'sync';
+ public static const SYNC_DISABLED:String = 'sync_disabled';
+ public static const SYNC_PROBLEM:String = 'sync_problem';
+ public static const SYSTEM_UPDATE:String = 'system_update';
+ public static const TAP_AND_PLAY:String = 'tap_and_play';
+ public static const TIME_TO_LEAVE:String = 'time_to_leave';
+ public static const VIBRATION:String = 'vibration';
+
+ public static const VOICE_CHAT:String = 'voice_chat';
+ public static const VPN_LOCK:String = 'vpn_lock';
+ public static const WC:String = 'wc';
+ public static const WIFI:String = 'wifi';
+ public static const AC_UNIT:String = 'ac_unit';
+ public static const AIRPORT_SHUTTLE:String = 'airport_shuttle';
+ public static const ALL_INCLUSIVE:String = 'all_inclusive';
+ public static const BEACH_ACCESS:String = 'beach_access';
+ public static const BUSINESS_CENTER:String = 'business_center';
+ public static const CASINO:String = 'casino';
+
+ public static const CHILD_CARE:String = 'child_care';
+ public static const CHILD_FRIENDLY:String = 'child_friendly';
+ public static const FITNESS_CENTER:String = 'fitness_center';
+ public static const FREE_BREAKFAST:String = 'free_breakfast';
+ public static const GOLF_COURSE:String = 'golf_course';
+ public static const HOT_TUB:String = 'hot_tub';
+ public static const KITCHEN:String = 'kitchen';
+ public static const POOL:String = 'pool';
+ public static const ROOM_SERVICE:String = 'room_service';
+ public static const RV_HOOKUP:String = 'rv_hookup';
+
+ public static const SMOKING_ROOMS:String = 'smoke_free';
+ public static const SPA:String = 'spa';
+ public static const CAKE:String = 'cake';
+ public static const DOMAIN:String = 'domain';
+ public static const GROUP:String = 'group';
+ public static const GROUP_ADD:String = 'group_add';
+ public static const LOCATION_CITY:String = 'location_city';
+ public static const MOOD:String = 'mood';
+ public static const MOOD_BAD:String = 'mood_bad';
+ public static const NOTIFICATIONS:String = 'notifications';
+
+ public static const NOTIFICATIONS_ACTIVE:String = 'notifications_active';
+ public static const NOTIFICATIONS_NONE:String = 'notifications_none';
+ public static const NOTIFICATIONS_OFF:String = 'notifications_off';
+ public static const NOTIFICATIONS_PAUSED:String = 'notifications_paused';
+ public static const PAGES:String = 'pages';
+ public static const PARTY_MODE:String = 'party_mode';
+ public static const PEOPLE:String = 'people';
+ public static const PEOPLE_OUTLINE:String = 'people_outline';
+ public static const PERSON:String = 'person';
+ public static const PERSON_ADD:String = 'person_add';
+
+ public static const PERSON_OUTLINE:String = 'person_outline';
+ public static const PLUS_ONE:String = 'plus_one';
+ public static const POLL:String = 'poll';
+ public static const PUBLIC:String = 'public';
+ public static const SCHOOL:String = 'school';
+ public static const SENTIMENT_DISSATISFIED:String = 'sentiment_dissatisfied';
+ public static const SENTIMENT_NEUTRAL:String = 'sentiment_neutral';
+ public static const SENTIMENT_SATISFIED:String = 'sentiment_satisfied';
+ public static const SENTIMENT_VERY_DISSATISFIED:String = 'sentiment_very_dissatisfied';
+ public static const SENTIMENT_VERY_SATISFIED:String = 'sentiment_very_satisfied';
+
+ public static const SHARE:String = 'share';
+ public static const WHATSHOT:String = 'whatshot';
+ public static const CHECK_BOX:String = 'check_box';
+ public static const CHECK_BOX_OUTLINE_BLANK:String = 'check_box_outline_blank';
+ public static const INDETERMINATE_CHECK_BOX:String = 'indeterminate_check_box';
+ public static const RADIO_BUTTON_CHECKED:String = 'radio_button_checked';
+ public static const RADIO_BUTTON_UNCHECKED:String = 'radio_button_unchecked';
+ public static const STAR:String = 'star';
+ public static const STAR_BORDER:String = 'star_border';
+ public static const STAR_HALF:String = 'star_half';
+
+ public static const LIST_ALT:String = 'list_alt';
+ public static const UNFOLD_MORE:String = 'unfold_more';
+ public static const UNFOLD_LESS:String = 'unfold_less';
+ public static const ALL_INBOX:String = 'all_inbox';
+ public static const WORK_OUTLINE:String = 'work_outline';
+ public static const ARROW_FORWARD_IOS:String = 'arrow_forward_ios';
+ public static const ARROW_BACK_IOS:String = 'arrow_back_ios';
+ }
+}
diff --git a/frameworks/projects/Icons/src/main/royale/org/apache/royale/icons/FontIcon.as b/frameworks/projects/Icons/src/main/royale/org/apache/royale/icons/FontIcon.as
new file mode 100644
index 0000000..2d1e2c4
--- /dev/null
+++ b/frameworks/projects/Icons/src/main/royale/org/apache/royale/icons/FontIcon.as
@@ -0,0 +1,85 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.icons
+{
+ /**
+ * Icons can be used alone or in buttons and other controls
+ *
+ * This class could be used with any icon family out there and with
+ * its text property
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class FontIcon extends FontIconBase
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function FontIcon()
+ {
+ super();
+
+ typeNames = "fonticon";
+ }
+
+ protected var _text:String = "";
+ /**
+ * The text of the icon
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get text():String
+ {
+ return _text;
+ }
+ public function set text(value:String):void
+ {
+ _text = value;
+
+ COMPILE::JS
+ {
+ textNode.nodeValue = _text;
+ }
+ }
+
+ /**
+ * The icon text
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ override protected function get iconText():String
+ {
+ return text;
+ }
+ }
+}
diff --git a/frameworks/projects/Icons/src/main/royale/org/apache/royale/icons/FontIconBase.as b/frameworks/projects/Icons/src/main/royale/org/apache/royale/icons/FontIconBase.as
new file mode 100644
index 0000000..b91a1c0
--- /dev/null
+++ b/frameworks/projects/Icons/src/main/royale/org/apache/royale/icons/FontIconBase.as
@@ -0,0 +1,225 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.icons
+{
+ import org.apache.royale.core.StyledUIBase;
+ import org.apache.royale.core.IIcon;
+ import org.apache.royale.utils.StringUtil;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * FontIconBase is the base class to provide most common features
+ * for all kinds of text based icons
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class FontIconBase extends StyledUIBase implements IIcon
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function FontIconBase()
+ {
+ super();
+
+ typeNames = "";
+ }
+
+ COMPILE::JS
+ protected var textNode:Text;
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion HTMLElement
+ * @royaleignorecoercion Text
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ var i:WrappedHTMLElement = addElementToWrapper(this,'i');
+
+ textNode = document.createTextNode(iconText) as Text;
+ i.appendChild(textNode);
+
+ positioner = element;
+
+ return i;
+ }
+
+ /**
+ * the icon text that matchs with font icon.
+ * override in extending classes
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ protected function get iconText():String
+ {
+ return "";
+ }
+
+ private var _material:Boolean;
+ /**
+ * add class name "material-icons" since in IE11 this font only
+ * works with that class name strangely. it seems we can avoid this
+ * self-hosting the fonts @see https://google.github.io/material-design-icons/
+ * but we must think if this is or not the right way.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get material():Boolean
+ {
+ return _material;
+ }
+ public function set material(value:Boolean):void
+ {
+ if (_material != value)
+ {
+ _material = value;
+
+ typeNames = StringUtil.removeWord(typeNames, " material-icons");
+ typeNames += " material-icons";
+
+ COMPILE::JS
+ {
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+ }
+ }
+
+ private var _size:Number = 24;
+ /**
+ * Activate "size-XX" size class selector. Although the icons in the
+ * font can be scaled to any size, recommended sizes are 18, 24, 36 or 48px.
+ *
+ * The default being 24px.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
+ */
+ public function get size():Number
+ {
+ return _size;
+ }
+ public function set size(value:Number):void
+ {
+ if (_size != value)
+ {
+ COMPILE::JS
+ {
+ removeClass("size-" + _size);
+ _size = value;
+ addClass("size-" + _size);
+ }
+ }
+ }
+
+ private var _dark:Boolean;
+ /**
+ * Activate "dark" class selector.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get dark():Boolean
+ {
+ return _dark;
+ }
+
+ public function set dark(value:Boolean):void
+ {
+ if (_dark != value)
+ {
+ _dark = value;
+
+ toggleClass("dark", _dark);
+ }
+ }
+
+ private var _light:Boolean;
+ /**
+ * Activate "light" class selector.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get light():Boolean
+ {
+ return _light;
+ }
+ public function set light(value:Boolean):void
+ {
+ if (_light != value)
+ {
+ _light = value;
+
+ toggleClass("light", _light);
+ }
+ }
+
+ private var _inactive:Boolean;
+ /**
+ * Activate "inactive" class selector.
+ * To show the icon as inactive
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get inactive():Boolean
+ {
+ return _inactive;
+ }
+ public function set inactive(value:Boolean):void
+ {
+ if (_inactive != value)
+ {
+ _inactive = value;
+
+ toggleClass("inactive", _inactive);
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Icons/src/main/royale/org/apache/royale/icons/ToggleFontIcon.as b/frameworks/projects/Icons/src/main/royale/org/apache/royale/icons/ToggleFontIcon.as
new file mode 100644
index 0000000..b6a599f
--- /dev/null
+++ b/frameworks/projects/Icons/src/main/royale/org/apache/royale/icons/ToggleFontIcon.as
@@ -0,0 +1,119 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.icons
+{
+ import org.apache.royale.core.ISelectable;
+
+ /**
+ * Icons can be used alone or in buttons and other controls
+ *
+ * This class could be used with any icon family out there and with
+ * its text property
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class ToggleFontIcon extends FontIcon implements ISelectable
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function ToggleFontIcon()
+ {
+ super();
+ }
+
+ private var _selected:Boolean = false;
+
+ /**
+ * <code>true</code> if the Button is selected.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get selected():Boolean
+ {
+ return _selected;
+ }
+
+ /**
+ * @private
+ */
+ public function set selected(value:Boolean):void
+ {
+ _selected = value;
+ internalSelected();
+ }
+
+ private var _selectedText:String = "";
+ /**
+ * The selectedText of the icon
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get selectedText():String
+ {
+ return _selectedText;
+ }
+ public function set selectedText(value:String):void
+ {
+ _selectedText = value;
+ internalSelected();
+ }
+
+ override public function set text(value:String):void
+ {
+ _text = value;
+ internalSelected();
+ }
+
+ private function internalSelected():void
+ {
+ COMPILE::JS
+ {
+ textNode.nodeValue = _selected ? _selectedText : _text;
+ }
+ }
+
+ /**
+ * The icon text
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ override protected function get iconText():String
+ {
+ return selected ? selectedText : text;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/asconfig.json b/frameworks/projects/Jewel/asconfig.json
index f4421c7..cb77061 100644
--- a/frameworks/projects/Jewel/asconfig.json
+++ b/frameworks/projects/Jewel/asconfig.json
@@ -20,13 +20,13 @@
"compilerOptions": {
"debug": true,
"targets": [
- "JSRoyale",
- "SWF"
+ "SWF",
+ "JSRoyale"
],
"include-classes": [
- "JewelClasses"
+ "src/main/royale/JewelClasses.as"
],
- "include-sources": [
+ "source-path": [
"src/main/royale"
],
"output": "target/Jewel.swc"
diff --git a/frameworks/projects/Jewel/pom.xml b/frameworks/projects/Jewel/pom.xml
index 196c471..bbd9ded 100644
--- a/frameworks/projects/Jewel/pom.xml
+++ b/frameworks/projects/Jewel/pom.xml
@@ -70,7 +70,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<resource>
@@ -155,28 +155,28 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
- <artifactId>Basic</artifactId>
+ <artifactId>HTML</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<classifier>swf</classifier>
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
- <artifactId>Basic</artifactId>
+ <artifactId>HTML</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<classifier>js</classifier>
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
- <artifactId>HTML</artifactId>
+ <artifactId>Basic</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<classifier>swf</classifier>
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
- <artifactId>HTML</artifactId>
+ <artifactId>Basic</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<classifier>js</classifier>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 74e327a..47d2317 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -15,92 +15,229 @@
* limitations under the License.
*/
@namespace j "library://ns.apache.org/royale/jewel";
-.layout.horizontal {
- white-space: nowrap;
- display: block;
-}
-.layout.horizontal > * {
- display: inline-block;
+@namespace "http://www.w3.org/1999/xhtml";
+*, :after, :before {
+ box-sizing: border-box;
}
-.layout.vertical {
- vertical-align: top;
-}
-.layout.vertical > * {
- display: block !important;
+html, body {
+ height: 100%;
}
-.layout.horizontal.space {
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
+::-moz-focus-inner, ::-moz-focus-outer {
+ border: 0;
}
+button::-moz-focus-inner {
+ padding: 0;
+}
+
+button, input, textarea {
+ font-size: 100%;
+}
+
+.cursor-pointer {
+ cursor: pointer;
+}
+
+j|View {
+ IBeadView: ClassReference("org.apache.royale.html.beads.GroupView");
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout");
+}
+
+j|ApplicationResponsiveView {
+ IBeadView: ClassReference("org.apache.royale.html.beads.GroupView");
+}
+
+.applicationResponsiveView {
+ display: inline-flex;
+ width: 100%;
+ min-height: 100%;
+}
+
+j|ApplicationView {
+ IBeadView: ClassReference("org.apache.royale.html.beads.GroupView");
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout");
+}
+
+j|Group {
+ IBeadView: ClassReference("org.apache.royale.html.beads.GroupView");
+}
+
+j|HGroup {
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout");
+}
+
+j|VGroup {
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout");
+}
+
+j|Container {
+ IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
+ IViewport: ClassReference("org.apache.royale.jewel.supportClasses.Viewport");
+ IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
+}
+
+j|Image {
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ImageModel");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ImageView");
+}
+
+j|DataGroup {
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout");
+ IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.StringItemRenderer");
+ IViewport: ClassReference("org.apache.royale.jewel.supportClasses.Viewport");
+}
+
+j|DataContainer {
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DataProviderModel");
+ IBeadView: ClassReference("org.apache.royale.html.beads.DataContainerView");
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout");
+ IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView");
+ IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
+ IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.StringItemRenderer");
+ IViewport: ClassReference("org.apache.royale.jewel.supportClasses.Viewport");
+ IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
+}
+
+@media -royale-swf {
+ j|Container {
+ IContentView: ClassReference("org.apache.royale.html.supportClasses.ContainerContentArea");
+ }
+}
.jewel.alert {
- display: block;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- margin: 0;
- padding: 0;
- max-width: 100%;
- max-height: 100%;
min-width: 350px;
min-height: 200px;
- border: 0px solid;
- border-radius: 3px;
- box-shadow: 0px 6px 60px -10px rgba(112, 112, 112, 0.7);
- background-color: #FFFFFF;
}
.jewel.alert .jewel.titlebar {
- padding: 14px 14px 0px 14px;
height: 50px;
- color: #000000;
}
-.jewel.alert .jewel.titlebar .jewel.label {
- font-size: 1.9em;
- font-weight: bold;
-}
-.jewel.alert .Group {
+.jewel.alert .content {
position: absolute;
- padding: 14px;
top: 50px;
bottom: 50px;
width: 100%;
overflow-y: auto;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
- color: #000000;
- font-size: 1.1em;
- font-weight: normal;
}
.jewel.alert .jewel.controlbar {
- padding: 0px 14px 14px 14px;
position: absolute;
bottom: 0;
height: 50px;
}
-.jewel.alert + .backdrop {
- background-color: rgba(0, 0, 0, 0.5);
-}
+@media (min-width: 768px) {
+ .jewel.alert {
+ min-width: 450px;
+ }
+}
j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.AlertModel");
IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
}
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
+.jewel.button {
+ margin: 0;
+ padding: 0.68em 1.12em;
+ cursor: pointer;
+ user-select: none;
+ display: inline-flex;
+ position: relative;
+ align-items: center;
+ justify-content: center;
+ zoom: 1;
+ vertical-align: middle;
+ overflow: hidden;
+ outline: none;
+ white-space: nowrap;
+ line-height: normal !important;
+ text-align: center;
+ text-decoration: none;
}
+.jewel.button[disabled] {
+ cursor: default;
+}
+.jewel.button .fonticon {
+ cursor: inherit;
+}
+
+.jewel.card {
+ min-width: 240px;
+ min-height: 52px;
+ overflow: hidden;
+ position: relative;
+}
+
+j|Card {
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout");
+}
+
+.jewel.checkbox {
+ display: inline-flex;
+ position: relative;
+ margin: 0;
+ padding: 0;
+ height: 22px;
+ cursor: pointer;
+}
+.jewel.checkbox input {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ display: inline-flex;
+ margin: 0;
+ padding: 0;
+ width: 22px;
+ height: 22px;
+ line-height: 22px;
+ opacity: 0;
+}
+.jewel.checkbox input + span::before {
+ content: " ";
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 22px;
+ height: 22px;
+}
+.jewel.checkbox input + span::after {
+ content: " ";
+ position: absolute;
+ width: 22px;
+ height: 22px;
+ left: 0px;
+ top: 0px;
+ opacity: 0;
+}
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ opacity: 1;
+}
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ outline: none;
+}
+.jewel.checkbox input[disabled] {
+ cursor: unset;
+}
+.jewel.checkbox input[disabled] + span {
+ cursor: unset;
+}
+.jewel.checkbox span {
+ margin: 0;
+ vertical-align: top;
+ line-height: 24px;
+}
+
@media -royale-swf {
j|CheckBox {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.ToggleButtonModel");
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.CheckBoxView");
}
}
@@ -118,56 +255,2879 @@
@media -royale-swf {
j|ControlBar {
IMeasurementBead: ClassReference("org.apache.royale.html.beads.ControlBarMeasurementBead");
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
}
}
+.jewel.combobox {
+ display: inline-flex;
+}
+.jewel.combobox .jewel.textinput {
+ width: 13.7em;
+}
+.jewel.combobox .jewel.button {
+ width: 2.8em;
+}
+.jewel.combobox .jewel.button::before {
+ margin: 0;
+ padding: 0;
+ line-height: 22px;
+}
+.jewel.combobox .jewel.button::after {
+ content: " ";
+ position: absolute;
+ width: 22px;
+ height: 22px;
+ left: calc(50% - 11px);
+ top: calc(50% - 11px);
+}
+
+j|ComboBox {
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ComboBoxModel");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ComboBoxView");
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ComboBoxController");
+ IPopUp: ClassReference("org.apache.royale.jewel.supportClasses.combobox.ComboBoxList");
+}
+
+.combobox-popup {
+ position: fixed;
+ pointer-events: none;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ contain: strict;
+ z-index: 5;
+ color: rgba(0, 0, 0, 0.8);
+}
+.combobox-popup::before {
+ position: absolute;
+ display: block;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ content: "";
+ opacity: 0;
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.combobox-popup .jewel.list {
+ transform: translate(-50%, 100%);
+ transition: none;
+ will-change: transform, opacity;
+ bottom: auto;
+ top: calc(100% - 10px);
+ left: 50%;
+ touch-action: none;
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7) !important;
+ width: 16.5em;
+ opacity: 0;
+}
+.combobox-popup.open {
+ pointer-events: auto;
+}
+.combobox-popup.open::before {
+ opacity: 1;
+}
+.combobox-popup.open .jewel.list {
+ transform: translate(-50%, -100%);
+ transition: transform 0.4s 0ms, opacity 0.4s 0ms;
+ opacity: 1;
+}
+
+@media (max-width: 768px) {
+ .combobox-popup .jewel.list {
+ width: calc(100% - 20px);
+ }
+}
+@media (min-width: 768px) and (max-width: 992px) {
+ .combobox-popup .jewel.list {
+ width: calc(100% - 300px);
+ }
+}
+@media (min-width: 992px) {
+ .combobox-popup::before {
+ background-color: rgba(0, 0, 0, 0);
+ }
+ .combobox-popup .jewel.list {
+ transform: none;
+ transition: none;
+ box-shadow: none !important;
+ }
+ .combobox-popup .jewel.list .jewel.item {
+ height: 0;
+ overflow: hidden;
+ transition: height 200ms ease-in;
+ }
+ .combobox-popup.open .jewel.list {
+ transform: none;
+ top: auto;
+ left: auto;
+ }
+ .combobox-popup.open .jewel.list .jewel.item {
+ height: 34px;
+ }
+}
+j|ComboBoxList {
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout");
+ IContentView: ClassReference("org.apache.royale.jewel.supportClasses.combobox.ComboBoxListDataGroup");
+}
+
+@media -royale-swf {
+ j|ComboBoxList {
+ IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
+ }
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ padding: 12px 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::before, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::before {
+ margin: 0;
+ padding: 0;
+ line-height: 22px;
+ content: " ";
+ position: absolute;
+ left: calc(50% - 11px);
+ top: calc(50% - 11px);
+ width: 22px;
+ height: 22px;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ content: " ";
+ position: absolute;
+ width: 22px;
+ height: 22px;
+ left: calc(50% - 11px);
+ top: calc(50% - 11px);
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ padding: 4px;
+}
+.jewel.datechooser .jewel.table .jewel.tableitem {
+ width: 38px;
+ height: 38px;
+}
+.jewel.datechooser .jewel.table .jewel.tableitem .jewel.tableitem {
+ padding: 2px;
+ width: 38px;
+ height: 38px;
+}
+
+.calendar.item {
+ padding: 10px;
+}
+
+j|DateChooser {
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DateChooserModel");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DateChooserView");
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalFlowLayout");
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.DateChooserMouseController");
+}
+
+.jewel.datefield {
+ display: inline-flex;
+}
+.jewel.datefield .jewel.button::before {
+ margin: 0;
+ padding: 0;
+ line-height: 22px;
+}
+.jewel.datefield .jewel.button::after {
+ content: " ";
+ position: absolute;
+ width: 22px;
+ height: 22px;
+ left: calc(50% - 11px);
+ top: calc(50% - 11px);
+}
+
+.datechooser-popup {
+ position: fixed;
+ pointer-events: none;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ contain: strict;
+ z-index: 5;
+ color: rgba(0, 0, 0, 0.8);
+}
+.datechooser-popup::before {
+ position: absolute;
+ display: block;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ content: "";
+ opacity: 0;
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.datechooser-popup .jewel.table {
+ transform: translate(-50%, 100%);
+ transition: none;
+ will-change: transform, opacity;
+ bottom: auto;
+ top: calc(100% - 10px);
+ left: 50%;
+ touch-action: none;
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7) !important;
+ opacity: 0;
+}
+.datechooser-popup.open {
+ pointer-events: auto;
+}
+.datechooser-popup.open::before {
+ opacity: 1;
+}
+.datechooser-popup.open .jewel.table {
+ transform: translate(-50%, -100%);
+ transition: transform 0.4s 0ms, opacity 0.4s 0ms;
+ opacity: 1;
+}
+
+@media (max-width: 768px) {
+ .datechooser-popup .jewel.table {
+ width: calc(100% - 20px);
+ }
+}
+@media (min-width: 768px) and (max-width: 992px) {
+ .datechooser-popup .jewel.table {
+ width: calc(100% - 300px);
+ }
+}
+@media (min-width: 992px) {
+ .datechooser-popup::before {
+ background-color: rgba(0, 0, 0, 0);
+ }
+ .datechooser-popup .jewel.table {
+ transform: none;
+ transition: none;
+ box-shadow: none !important;
+ }
+ .datechooser-popup .jewel.table .jewel.item {
+ height: 0;
+ overflow: hidden;
+ transition: height 200ms ease-in;
+ }
+ .datechooser-popup.open .jewel.table {
+ transform: none;
+ top: auto;
+ left: auto;
+ }
+ .datechooser-popup.open .jewel.table .jewel.item {
+ height: 34px;
+ }
+}
+j|DateField {
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DateFieldView");
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DateChooserModel");
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.DateFieldMouseController");
+ IFormatBead: ClassReference("org.apache.royale.html.accessories.DateFormatMMDDYYYY");
+}
+
+.jewel.divider {
+ height: 0;
+ margin: 0;
+ border: none;
+}
+
+.jewel.drawer.float {
+ position: fixed;
+ pointer-events: none;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ contain: strict;
+ z-index: 5;
+}
+.jewel.drawer.float::before {
+ position: absolute;
+ display: block;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ content: "";
+ opacity: 0;
+}
+.jewel.drawer.float .drawermain {
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ left: 0;
+ right: initial;
+ height: 100%;
+}
+.jewel.drawer.float.open {
+ pointer-events: auto;
+}
+.jewel.drawer.float.open::before {
+ opacity: 1;
+}
+.jewel.drawer.fixed {
+ width: 0;
+}
+.jewel.drawer.fixed .drawermain {
+ display: inline-flex;
+ flex-direction: column;
+ left: 0;
+ right: auto;
+ height: 100%;
+ overflow: hidden;
+ touch-action: none;
+}
+.jewel.drawer.fixed.open {
+ pointer-events: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transform: none;
+}
+
+@media (min-width: 768px) {
+ .jewel.drawer.float .drawermain {
+ width: calc(100% - 60px);
+ max-width: 310px;
+ }
+}
+.jewel.drawerheader {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ flex-shrink: 0;
+}
+.jewel.drawerheader div {
+ display: flex;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ align-items: flex-end;
+}
+
+.jewel.drawercontent {
+ flex-grow: 1;
+ margin: 0;
+ overflow-x: hidden;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ touch-action: pan-y;
+}
+
+.jewel.dropdownlist {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ margin: 0;
+ padding: 0.68em 1.12em;
+ cursor: pointer;
+ display: inline-flex;
+ line-height: normal !important;
+ outline: none;
+}
+
+j|DropDownList {
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DropDownListView");
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ArrayListSelectionModel");
+ IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView");
+ IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
+ IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.DropDownListItemRenderer");
+}
+
@media -royale-swf {
j|DropDownList {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.ArraySelectionModel");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DropDownListView");
- IBeadController: ClassReference("org.apache.royale.html.beads.controllers.DropDownListController");
- IPopUp: ClassReference("org.apache.royale.html.supportClasses.DropDownListList");
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ArrayListSelectionModel");
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.DropDownListController");
+ IPopUp: ClassReference("org.apache.royale.jewel.supportClasses.dropdownlist.DropDownListList");
}
}
+.fonticon {
+ cursor: default;
+}
+.fonticon.size-18 {
+ font-size: 18px;
+}
+.fonticon.size-24 {
+ font-size: 24px;
+}
+.fonticon.size-36 {
+ font-size: 36px;
+}
+.fonticon.size-48 {
+ font-size: 48px;
+}
+
+.jewel.item, .jewel.navigationlink {
+ display: flex;
+ min-height: 34px;
+ text-decoration: none;
+ align-items: center;
+ letter-spacing: 0;
+ line-height: normal !important;
+ overflow: hidden;
+ cursor: auto;
+}
+.jewel.item.selectable, .jewel.navigationlink.selectable {
+ cursor: pointer;
+}
+.jewel.item .fonticon, .jewel.navigationlink .fonticon {
+ cursor: inherit;
+}
+
j|ListItemRenderer {
- IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController");
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController");
+}
+
+.jewel.navigationlink {
+ min-height: 48px;
+}
+
+j|NavigationLinkItemRenderer {
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController");
}
.jewel.label {
+ cursor: default;
white-space: nowrap;
}
+.jewel.label.multiline {
+ white-space: normal;
+ width: 100%;
+}
+
j|Label {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel");
+}
+
+.viewport {
+ overflow: hidden;
+}
+.viewport.scroll {
+ overflow: auto;
+}
+
+.layout.absolute {
+ position: absolute;
+}
+.layout.absolute > * {
+ position: absolute;
+}
+
+.layout {
+ display: flex;
+}
+.layout.itemsSameHeight > * > * {
+ min-height: 100%;
+}
+.layout.itemsCentered {
+ align-items: center !important;
+}
+.layout.itemsTop {
+ align-items: flex-start !important;
+}
+.layout.itemsBottom {
+ align-items: flex-end !important;
+}
+.layout.itemsLeft {
+ justify-content: flex-start !important;
+}
+.layout.itemsCenter {
+ justify-content: center !important;
+}
+.layout.itemsRight {
+ justify-content: flex-end !important;
+}
+.layout.itemsSpaceBetween {
+ justify-content: space-between !important;
+}
+.layout.itemsSpaceAround {
+ justify-content: space-around !important;
+}
+.layout.itemsExpand {
+ width: 100%;
+}
+.layout.itemsExpand > * {
+ flex: 1 0 auto !important;
+}
+.layout.horizontal {
+ flex-direction: row !important;
+ flex-wrap: nowrap;
+ align-items: flex-start;
+}
+.layout.horizontal > * {
+ flex: 0 0 auto;
+}
+.layout.horizontal.flow {
+ flex-wrap: wrap;
+}
+.layout.horizontal.centered {
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+ height: 100%;
+}
+.layout.horizontal.centered > * {
+ flex: 0 0 auto;
+}
+.layout.horizontal.gap-1x3px > *:first-child {
+ margin: 0px;
+}
+.layout.horizontal.gap-1x3px > * {
+ margin: 0px 0px 0px 3px;
+}
+.layout.horizontal.gap-2x3px > *:first-child {
+ margin: 0px;
+}
+.layout.horizontal.gap-2x3px > * {
+ margin: 0px 0px 0px 6px;
+}
+.layout.horizontal.gap-3x3px > *:first-child {
+ margin: 0px;
+}
+.layout.horizontal.gap-3x3px > * {
+ margin: 0px 0px 0px 9px;
+}
+.layout.horizontal.gap-4x3px > *:first-child {
+ margin: 0px;
+}
+.layout.horizontal.gap-4x3px > * {
+ margin: 0px 0px 0px 12px;
+}
+.layout.horizontal.gap-5x3px > *:first-child {
+ margin: 0px;
+}
+.layout.horizontal.gap-5x3px > * {
+ margin: 0px 0px 0px 15px;
+}
+.layout.horizontal.gap-6x3px > *:first-child {
+ margin: 0px;
+}
+.layout.horizontal.gap-6x3px > * {
+ margin: 0px 0px 0px 18px;
+}
+.layout.horizontal.gap-7x3px > *:first-child {
+ margin: 0px;
+}
+.layout.horizontal.gap-7x3px > * {
+ margin: 0px 0px 0px 21px;
+}
+.layout.horizontal.gap-8x3px > *:first-child {
+ margin: 0px;
+}
+.layout.horizontal.gap-8x3px > * {
+ margin: 0px 0px 0px 24px;
+}
+.layout.horizontal.gap-9x3px > *:first-child {
+ margin: 0px;
+}
+.layout.horizontal.gap-9x3px > * {
+ margin: 0px 0px 0px 27px;
+}
+.layout.horizontal.gap-10x3px > *:first-child {
+ margin: 0px;
+}
+.layout.horizontal.gap-10x3px > * {
+ margin: 0px 0px 0px 30px;
+}
+.layout.vertical {
+ flex-direction: column !important;
+ flex-wrap: nowrap;
+ align-items: flex-start;
+}
+.layout.vertical > * {
+ flex: 0 0 auto;
+}
+.layout.vertical.flow {
+ flex-wrap: wrap;
+}
+.layout.vertical.centered {
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+ flex-direction: column;
+ height: 100%;
+}
+.layout.vertical.gap-1x3px > *:first-child {
+ margin: 0px;
+}
+.layout.vertical.gap-1x3px > * {
+ margin: 3px 0px 0px;
+}
+.layout.vertical.gap-2x3px > *:first-child {
+ margin: 0px;
+}
+.layout.vertical.gap-2x3px > * {
+ margin: 6px 0px 0px;
+}
+.layout.vertical.gap-3x3px > *:first-child {
+ margin: 0px;
+}
+.layout.vertical.gap-3x3px > * {
+ margin: 9px 0px 0px;
+}
+.layout.vertical.gap-4x3px > *:first-child {
+ margin: 0px;
+}
+.layout.vertical.gap-4x3px > * {
+ margin: 12px 0px 0px;
+}
+.layout.vertical.gap-5x3px > *:first-child {
+ margin: 0px;
+}
+.layout.vertical.gap-5x3px > * {
+ margin: 15px 0px 0px;
+}
+.layout.vertical.gap-6x3px > *:first-child {
+ margin: 0px;
+}
+.layout.vertical.gap-6x3px > * {
+ margin: 18px 0px 0px;
+}
+.layout.vertical.gap-7x3px > *:first-child {
+ margin: 0px;
+}
+.layout.vertical.gap-7x3px > * {
+ margin: 21px 0px 0px;
+}
+.layout.vertical.gap-8x3px > *:first-child {
+ margin: 0px;
+}
+.layout.vertical.gap-8x3px > * {
+ margin: 24px 0px 0px;
+}
+.layout.vertical.gap-9x3px > *:first-child {
+ margin: 0px;
+}
+.layout.vertical.gap-9x3px > * {
+ margin: 27px 0px 0px;
+}
+.layout.vertical.gap-10x3px > *:first-child {
+ margin: 0px;
+}
+.layout.vertical.gap-10x3px > * {
+ margin: 30px 0px 0px;
+}
+.layout.tile {
+ flex-flow: row wrap;
+ align-items: flex-start;
+}
+.layout.grid {
+ flex-flow: row wrap;
+ width: 100%;
+ height: 100%;
+}
+.layout.grid > * {
+ flex: 0 0 auto;
+ max-width: 100%;
+ width: 100%;
+}
+@media (min-width: 0px) {
+ .layout.grid .phone-col-1-1 {
+ width: 100%;
+ }
+ .layout.grid .phone-col-1-2 {
+ width: 50%;
+ }
+ .layout.grid .phone-col-2-2 {
+ width: 100%;
+ }
+ .layout.grid .phone-col-1-3 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .phone-col-2-3 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .phone-col-3-3 {
+ width: 100%;
+ }
+ .layout.grid .phone-col-1-4 {
+ width: 25%;
+ }
+ .layout.grid .phone-col-2-4 {
+ width: 50%;
+ }
+ .layout.grid .phone-col-3-4 {
+ width: 75%;
+ }
+ .layout.grid .phone-col-4-4 {
+ width: 100%;
+ }
+ .layout.grid .phone-col-1-5 {
+ width: 20%;
+ }
+ .layout.grid .phone-col-2-5 {
+ width: 40%;
+ }
+ .layout.grid .phone-col-3-5 {
+ width: 60%;
+ }
+ .layout.grid .phone-col-4-5 {
+ width: 80%;
+ }
+ .layout.grid .phone-col-5-5 {
+ width: 100%;
+ }
+ .layout.grid .phone-col-1-6 {
+ width: 16.6666666667%;
+ }
+ .layout.grid .phone-col-2-6 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .phone-col-3-6 {
+ width: 50%;
+ }
+ .layout.grid .phone-col-4-6 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .phone-col-5-6 {
+ width: 83.3333333333%;
+ }
+ .layout.grid .phone-col-6-6 {
+ width: 100%;
+ }
+ .layout.grid .phone-col-1-7 {
+ width: 14.2857142857%;
+ }
+ .layout.grid .phone-col-2-7 {
+ width: 28.5714285714%;
+ }
+ .layout.grid .phone-col-3-7 {
+ width: 42.8571428571%;
+ }
+ .layout.grid .phone-col-4-7 {
+ width: 57.1428571429%;
+ }
+ .layout.grid .phone-col-5-7 {
+ width: 71.4285714286%;
+ }
+ .layout.grid .phone-col-6-7 {
+ width: 85.7142857143%;
+ }
+ .layout.grid .phone-col-7-7 {
+ width: 100%;
+ }
+ .layout.grid .phone-col-1-8 {
+ width: 12.5%;
+ }
+ .layout.grid .phone-col-2-8 {
+ width: 25%;
+ }
+ .layout.grid .phone-col-3-8 {
+ width: 37.5%;
+ }
+ .layout.grid .phone-col-4-8 {
+ width: 50%;
+ }
+ .layout.grid .phone-col-5-8 {
+ width: 62.5%;
+ }
+ .layout.grid .phone-col-6-8 {
+ width: 75%;
+ }
+ .layout.grid .phone-col-7-8 {
+ width: 87.5%;
+ }
+ .layout.grid .phone-col-8-8 {
+ width: 100%;
+ }
+ .layout.grid .phone-col-1-9 {
+ width: 11.1111111111%;
+ }
+ .layout.grid .phone-col-2-9 {
+ width: 22.2222222222%;
+ }
+ .layout.grid .phone-col-3-9 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .phone-col-4-9 {
+ width: 44.4444444444%;
+ }
+ .layout.grid .phone-col-5-9 {
+ width: 55.5555555556%;
+ }
+ .layout.grid .phone-col-6-9 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .phone-col-7-9 {
+ width: 77.7777777778%;
+ }
+ .layout.grid .phone-col-8-9 {
+ width: 88.8888888889%;
+ }
+ .layout.grid .phone-col-9-9 {
+ width: 100%;
+ }
+ .layout.grid .phone-col-1-10 {
+ width: 10%;
+ }
+ .layout.grid .phone-col-2-10 {
+ width: 20%;
+ }
+ .layout.grid .phone-col-3-10 {
+ width: 30%;
+ }
+ .layout.grid .phone-col-4-10 {
+ width: 40%;
+ }
+ .layout.grid .phone-col-5-10 {
+ width: 50%;
+ }
+ .layout.grid .phone-col-6-10 {
+ width: 60%;
+ }
+ .layout.grid .phone-col-7-10 {
+ width: 70%;
+ }
+ .layout.grid .phone-col-8-10 {
+ width: 80%;
+ }
+ .layout.grid .phone-col-9-10 {
+ width: 90%;
+ }
+ .layout.grid .phone-col-10-10 {
+ width: 100%;
+ }
+ .layout.grid .phone-col-1-11 {
+ width: 9.0909090909%;
+ }
+ .layout.grid .phone-col-2-11 {
+ width: 18.1818181818%;
+ }
+ .layout.grid .phone-col-3-11 {
+ width: 27.2727272727%;
+ }
+ .layout.grid .phone-col-4-11 {
+ width: 36.3636363636%;
+ }
+ .layout.grid .phone-col-5-11 {
+ width: 45.4545454545%;
+ }
+ .layout.grid .phone-col-6-11 {
+ width: 54.5454545455%;
+ }
+ .layout.grid .phone-col-7-11 {
+ width: 63.6363636364%;
+ }
+ .layout.grid .phone-col-8-11 {
+ width: 72.7272727273%;
+ }
+ .layout.grid .phone-col-9-11 {
+ width: 81.8181818182%;
+ }
+ .layout.grid .phone-col-10-11 {
+ width: 90.9090909091%;
+ }
+ .layout.grid .phone-col-11-11 {
+ width: 100%;
+ }
+ .layout.grid .phone-col-1-12 {
+ width: 8.3333333333%;
+ }
+ .layout.grid .phone-col-2-12 {
+ width: 16.6666666667%;
+ }
+ .layout.grid .phone-col-3-12 {
+ width: 25%;
+ }
+ .layout.grid .phone-col-4-12 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .phone-col-5-12 {
+ width: 41.6666666667%;
+ }
+ .layout.grid .phone-col-6-12 {
+ width: 50%;
+ }
+ .layout.grid .phone-col-7-12 {
+ width: 58.3333333333%;
+ }
+ .layout.grid .phone-col-8-12 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .phone-col-9-12 {
+ width: 75%;
+ }
+ .layout.grid .phone-col-10-12 {
+ width: 83.3333333333%;
+ }
+ .layout.grid .phone-col-11-12 {
+ width: 91.6666666667%;
+ }
+ .layout.grid .phone-col-12-12 {
+ width: 100%;
+ }
+}
+@media (min-width: 768px) {
+ .layout.grid .tablet-col-1-1 {
+ width: 100%;
+ }
+ .layout.grid .tablet-col-1-2 {
+ width: 50%;
+ }
+ .layout.grid .tablet-col-2-2 {
+ width: 100%;
+ }
+ .layout.grid .tablet-col-1-3 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .tablet-col-2-3 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .tablet-col-3-3 {
+ width: 100%;
+ }
+ .layout.grid .tablet-col-1-4 {
+ width: 25%;
+ }
+ .layout.grid .tablet-col-2-4 {
+ width: 50%;
+ }
+ .layout.grid .tablet-col-3-4 {
+ width: 75%;
+ }
+ .layout.grid .tablet-col-4-4 {
+ width: 100%;
+ }
+ .layout.grid .tablet-col-1-5 {
+ width: 20%;
+ }
+ .layout.grid .tablet-col-2-5 {
+ width: 40%;
+ }
+ .layout.grid .tablet-col-3-5 {
+ width: 60%;
+ }
+ .layout.grid .tablet-col-4-5 {
+ width: 80%;
+ }
+ .layout.grid .tablet-col-5-5 {
+ width: 100%;
+ }
+ .layout.grid .tablet-col-1-6 {
+ width: 16.6666666667%;
+ }
+ .layout.grid .tablet-col-2-6 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .tablet-col-3-6 {
+ width: 50%;
+ }
+ .layout.grid .tablet-col-4-6 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .tablet-col-5-6 {
+ width: 83.3333333333%;
+ }
+ .layout.grid .tablet-col-6-6 {
+ width: 100%;
+ }
+ .layout.grid .tablet-col-1-7 {
+ width: 14.2857142857%;
+ }
+ .layout.grid .tablet-col-2-7 {
+ width: 28.5714285714%;
+ }
+ .layout.grid .tablet-col-3-7 {
+ width: 42.8571428571%;
+ }
+ .layout.grid .tablet-col-4-7 {
+ width: 57.1428571429%;
+ }
+ .layout.grid .tablet-col-5-7 {
+ width: 71.4285714286%;
+ }
+ .layout.grid .tablet-col-6-7 {
+ width: 85.7142857143%;
+ }
+ .layout.grid .tablet-col-7-7 {
+ width: 100%;
+ }
+ .layout.grid .tablet-col-1-8 {
+ width: 12.5%;
+ }
+ .layout.grid .tablet-col-2-8 {
+ width: 25%;
+ }
+ .layout.grid .tablet-col-3-8 {
+ width: 37.5%;
+ }
+ .layout.grid .tablet-col-4-8 {
+ width: 50%;
+ }
+ .layout.grid .tablet-col-5-8 {
+ width: 62.5%;
+ }
+ .layout.grid .tablet-col-6-8 {
+ width: 75%;
+ }
+ .layout.grid .tablet-col-7-8 {
+ width: 87.5%;
+ }
+ .layout.grid .tablet-col-8-8 {
+ width: 100%;
+ }
+ .layout.grid .tablet-col-1-9 {
+ width: 11.1111111111%;
+ }
+ .layout.grid .tablet-col-2-9 {
+ width: 22.2222222222%;
+ }
+ .layout.grid .tablet-col-3-9 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .tablet-col-4-9 {
+ width: 44.4444444444%;
+ }
+ .layout.grid .tablet-col-5-9 {
+ width: 55.5555555556%;
+ }
+ .layout.grid .tablet-col-6-9 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .tablet-col-7-9 {
+ width: 77.7777777778%;
+ }
+ .layout.grid .tablet-col-8-9 {
+ width: 88.8888888889%;
+ }
+ .layout.grid .tablet-col-9-9 {
+ width: 100%;
+ }
+ .layout.grid .tablet-col-1-10 {
+ width: 10%;
+ }
+ .layout.grid .tablet-col-2-10 {
+ width: 20%;
+ }
+ .layout.grid .tablet-col-3-10 {
+ width: 30%;
+ }
+ .layout.grid .tablet-col-4-10 {
+ width: 40%;
+ }
+ .layout.grid .tablet-col-5-10 {
+ width: 50%;
+ }
+ .layout.grid .tablet-col-6-10 {
+ width: 60%;
+ }
+ .layout.grid .tablet-col-7-10 {
+ width: 70%;
+ }
+ .layout.grid .tablet-col-8-10 {
+ width: 80%;
+ }
+ .layout.grid .tablet-col-9-10 {
+ width: 90%;
+ }
+ .layout.grid .tablet-col-10-10 {
+ width: 100%;
+ }
+ .layout.grid .tablet-col-1-11 {
+ width: 9.0909090909%;
+ }
+ .layout.grid .tablet-col-2-11 {
+ width: 18.1818181818%;
+ }
+ .layout.grid .tablet-col-3-11 {
+ width: 27.2727272727%;
+ }
+ .layout.grid .tablet-col-4-11 {
+ width: 36.3636363636%;
+ }
+ .layout.grid .tablet-col-5-11 {
+ width: 45.4545454545%;
+ }
+ .layout.grid .tablet-col-6-11 {
+ width: 54.5454545455%;
+ }
+ .layout.grid .tablet-col-7-11 {
+ width: 63.6363636364%;
+ }
+ .layout.grid .tablet-col-8-11 {
+ width: 72.7272727273%;
+ }
+ .layout.grid .tablet-col-9-11 {
+ width: 81.8181818182%;
+ }
+ .layout.grid .tablet-col-10-11 {
+ width: 90.9090909091%;
+ }
+ .layout.grid .tablet-col-11-11 {
+ width: 100%;
+ }
+ .layout.grid .tablet-col-1-12 {
+ width: 8.3333333333%;
+ }
+ .layout.grid .tablet-col-2-12 {
+ width: 16.6666666667%;
+ }
+ .layout.grid .tablet-col-3-12 {
+ width: 25%;
+ }
+ .layout.grid .tablet-col-4-12 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .tablet-col-5-12 {
+ width: 41.6666666667%;
+ }
+ .layout.grid .tablet-col-6-12 {
+ width: 50%;
+ }
+ .layout.grid .tablet-col-7-12 {
+ width: 58.3333333333%;
+ }
+ .layout.grid .tablet-col-8-12 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .tablet-col-9-12 {
+ width: 75%;
+ }
+ .layout.grid .tablet-col-10-12 {
+ width: 83.3333333333%;
+ }
+ .layout.grid .tablet-col-11-12 {
+ width: 91.6666666667%;
+ }
+ .layout.grid .tablet-col-12-12 {
+ width: 100%;
+ }
+}
+@media (min-width: 992px) {
+ .layout.grid .desktop-col-1-1 {
+ width: 100%;
+ }
+ .layout.grid .desktop-col-1-2 {
+ width: 50%;
+ }
+ .layout.grid .desktop-col-2-2 {
+ width: 100%;
+ }
+ .layout.grid .desktop-col-1-3 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .desktop-col-2-3 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .desktop-col-3-3 {
+ width: 100%;
+ }
+ .layout.grid .desktop-col-1-4 {
+ width: 25%;
+ }
+ .layout.grid .desktop-col-2-4 {
+ width: 50%;
+ }
+ .layout.grid .desktop-col-3-4 {
+ width: 75%;
+ }
+ .layout.grid .desktop-col-4-4 {
+ width: 100%;
+ }
+ .layout.grid .desktop-col-1-5 {
+ width: 20%;
+ }
+ .layout.grid .desktop-col-2-5 {
+ width: 40%;
+ }
+ .layout.grid .desktop-col-3-5 {
+ width: 60%;
+ }
+ .layout.grid .desktop-col-4-5 {
+ width: 80%;
+ }
+ .layout.grid .desktop-col-5-5 {
+ width: 100%;
+ }
+ .layout.grid .desktop-col-1-6 {
+ width: 16.6666666667%;
+ }
+ .layout.grid .desktop-col-2-6 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .desktop-col-3-6 {
+ width: 50%;
+ }
+ .layout.grid .desktop-col-4-6 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .desktop-col-5-6 {
+ width: 83.3333333333%;
+ }
+ .layout.grid .desktop-col-6-6 {
+ width: 100%;
+ }
+ .layout.grid .desktop-col-1-7 {
+ width: 14.2857142857%;
+ }
+ .layout.grid .desktop-col-2-7 {
+ width: 28.5714285714%;
+ }
+ .layout.grid .desktop-col-3-7 {
+ width: 42.8571428571%;
+ }
+ .layout.grid .desktop-col-4-7 {
+ width: 57.1428571429%;
+ }
+ .layout.grid .desktop-col-5-7 {
+ width: 71.4285714286%;
+ }
+ .layout.grid .desktop-col-6-7 {
+ width: 85.7142857143%;
+ }
+ .layout.grid .desktop-col-7-7 {
+ width: 100%;
+ }
+ .layout.grid .desktop-col-1-8 {
+ width: 12.5%;
+ }
+ .layout.grid .desktop-col-2-8 {
+ width: 25%;
+ }
+ .layout.grid .desktop-col-3-8 {
+ width: 37.5%;
+ }
+ .layout.grid .desktop-col-4-8 {
+ width: 50%;
+ }
+ .layout.grid .desktop-col-5-8 {
+ width: 62.5%;
+ }
+ .layout.grid .desktop-col-6-8 {
+ width: 75%;
+ }
+ .layout.grid .desktop-col-7-8 {
+ width: 87.5%;
+ }
+ .layout.grid .desktop-col-8-8 {
+ width: 100%;
+ }
+ .layout.grid .desktop-col-1-9 {
+ width: 11.1111111111%;
+ }
+ .layout.grid .desktop-col-2-9 {
+ width: 22.2222222222%;
+ }
+ .layout.grid .desktop-col-3-9 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .desktop-col-4-9 {
+ width: 44.4444444444%;
+ }
+ .layout.grid .desktop-col-5-9 {
+ width: 55.5555555556%;
+ }
+ .layout.grid .desktop-col-6-9 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .desktop-col-7-9 {
+ width: 77.7777777778%;
+ }
+ .layout.grid .desktop-col-8-9 {
+ width: 88.8888888889%;
+ }
+ .layout.grid .desktop-col-9-9 {
+ width: 100%;
+ }
+ .layout.grid .desktop-col-1-10 {
+ width: 10%;
+ }
+ .layout.grid .desktop-col-2-10 {
+ width: 20%;
+ }
+ .layout.grid .desktop-col-3-10 {
+ width: 30%;
+ }
+ .layout.grid .desktop-col-4-10 {
+ width: 40%;
+ }
+ .layout.grid .desktop-col-5-10 {
+ width: 50%;
+ }
+ .layout.grid .desktop-col-6-10 {
+ width: 60%;
+ }
+ .layout.grid .desktop-col-7-10 {
+ width: 70%;
+ }
+ .layout.grid .desktop-col-8-10 {
+ width: 80%;
+ }
+ .layout.grid .desktop-col-9-10 {
+ width: 90%;
+ }
+ .layout.grid .desktop-col-10-10 {
+ width: 100%;
+ }
+ .layout.grid .desktop-col-1-11 {
+ width: 9.0909090909%;
+ }
+ .layout.grid .desktop-col-2-11 {
+ width: 18.1818181818%;
+ }
+ .layout.grid .desktop-col-3-11 {
+ width: 27.2727272727%;
+ }
+ .layout.grid .desktop-col-4-11 {
+ width: 36.3636363636%;
+ }
+ .layout.grid .desktop-col-5-11 {
+ width: 45.4545454545%;
+ }
+ .layout.grid .desktop-col-6-11 {
+ width: 54.5454545455%;
+ }
+ .layout.grid .desktop-col-7-11 {
+ width: 63.6363636364%;
+ }
+ .layout.grid .desktop-col-8-11 {
+ width: 72.7272727273%;
+ }
+ .layout.grid .desktop-col-9-11 {
+ width: 81.8181818182%;
+ }
+ .layout.grid .desktop-col-10-11 {
+ width: 90.9090909091%;
+ }
+ .layout.grid .desktop-col-11-11 {
+ width: 100%;
+ }
+ .layout.grid .desktop-col-1-12 {
+ width: 8.3333333333%;
+ }
+ .layout.grid .desktop-col-2-12 {
+ width: 16.6666666667%;
+ }
+ .layout.grid .desktop-col-3-12 {
+ width: 25%;
+ }
+ .layout.grid .desktop-col-4-12 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .desktop-col-5-12 {
+ width: 41.6666666667%;
+ }
+ .layout.grid .desktop-col-6-12 {
+ width: 50%;
+ }
+ .layout.grid .desktop-col-7-12 {
+ width: 58.3333333333%;
+ }
+ .layout.grid .desktop-col-8-12 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .desktop-col-9-12 {
+ width: 75%;
+ }
+ .layout.grid .desktop-col-10-12 {
+ width: 83.3333333333%;
+ }
+ .layout.grid .desktop-col-11-12 {
+ width: 91.6666666667%;
+ }
+ .layout.grid .desktop-col-12-12 {
+ width: 100%;
+ }
+}
+@media (min-width: 1200px) {
+ .layout.grid .widescreen-col-1-1 {
+ width: 100%;
+ }
+ .layout.grid .widescreen-col-1-2 {
+ width: 50%;
+ }
+ .layout.grid .widescreen-col-2-2 {
+ width: 100%;
+ }
+ .layout.grid .widescreen-col-1-3 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .widescreen-col-2-3 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .widescreen-col-3-3 {
+ width: 100%;
+ }
+ .layout.grid .widescreen-col-1-4 {
+ width: 25%;
+ }
+ .layout.grid .widescreen-col-2-4 {
+ width: 50%;
+ }
+ .layout.grid .widescreen-col-3-4 {
+ width: 75%;
+ }
+ .layout.grid .widescreen-col-4-4 {
+ width: 100%;
+ }
+ .layout.grid .widescreen-col-1-5 {
+ width: 20%;
+ }
+ .layout.grid .widescreen-col-2-5 {
+ width: 40%;
+ }
+ .layout.grid .widescreen-col-3-5 {
+ width: 60%;
+ }
+ .layout.grid .widescreen-col-4-5 {
+ width: 80%;
+ }
+ .layout.grid .widescreen-col-5-5 {
+ width: 100%;
+ }
+ .layout.grid .widescreen-col-1-6 {
+ width: 16.6666666667%;
+ }
+ .layout.grid .widescreen-col-2-6 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .widescreen-col-3-6 {
+ width: 50%;
+ }
+ .layout.grid .widescreen-col-4-6 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .widescreen-col-5-6 {
+ width: 83.3333333333%;
+ }
+ .layout.grid .widescreen-col-6-6 {
+ width: 100%;
+ }
+ .layout.grid .widescreen-col-1-7 {
+ width: 14.2857142857%;
+ }
+ .layout.grid .widescreen-col-2-7 {
+ width: 28.5714285714%;
+ }
+ .layout.grid .widescreen-col-3-7 {
+ width: 42.8571428571%;
+ }
+ .layout.grid .widescreen-col-4-7 {
+ width: 57.1428571429%;
+ }
+ .layout.grid .widescreen-col-5-7 {
+ width: 71.4285714286%;
+ }
+ .layout.grid .widescreen-col-6-7 {
+ width: 85.7142857143%;
+ }
+ .layout.grid .widescreen-col-7-7 {
+ width: 100%;
+ }
+ .layout.grid .widescreen-col-1-8 {
+ width: 12.5%;
+ }
+ .layout.grid .widescreen-col-2-8 {
+ width: 25%;
+ }
+ .layout.grid .widescreen-col-3-8 {
+ width: 37.5%;
+ }
+ .layout.grid .widescreen-col-4-8 {
+ width: 50%;
+ }
+ .layout.grid .widescreen-col-5-8 {
+ width: 62.5%;
+ }
+ .layout.grid .widescreen-col-6-8 {
+ width: 75%;
+ }
+ .layout.grid .widescreen-col-7-8 {
+ width: 87.5%;
+ }
+ .layout.grid .widescreen-col-8-8 {
+ width: 100%;
+ }
+ .layout.grid .widescreen-col-1-9 {
+ width: 11.1111111111%;
+ }
+ .layout.grid .widescreen-col-2-9 {
+ width: 22.2222222222%;
+ }
+ .layout.grid .widescreen-col-3-9 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .widescreen-col-4-9 {
+ width: 44.4444444444%;
+ }
+ .layout.grid .widescreen-col-5-9 {
+ width: 55.5555555556%;
+ }
+ .layout.grid .widescreen-col-6-9 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .widescreen-col-7-9 {
+ width: 77.7777777778%;
+ }
+ .layout.grid .widescreen-col-8-9 {
+ width: 88.8888888889%;
+ }
+ .layout.grid .widescreen-col-9-9 {
+ width: 100%;
+ }
+ .layout.grid .widescreen-col-1-10 {
+ width: 10%;
+ }
+ .layout.grid .widescreen-col-2-10 {
+ width: 20%;
+ }
+ .layout.grid .widescreen-col-3-10 {
+ width: 30%;
+ }
+ .layout.grid .widescreen-col-4-10 {
+ width: 40%;
+ }
+ .layout.grid .widescreen-col-5-10 {
+ width: 50%;
+ }
+ .layout.grid .widescreen-col-6-10 {
+ width: 60%;
+ }
+ .layout.grid .widescreen-col-7-10 {
+ width: 70%;
+ }
+ .layout.grid .widescreen-col-8-10 {
+ width: 80%;
+ }
+ .layout.grid .widescreen-col-9-10 {
+ width: 90%;
+ }
+ .layout.grid .widescreen-col-10-10 {
+ width: 100%;
+ }
+ .layout.grid .widescreen-col-1-11 {
+ width: 9.0909090909%;
+ }
+ .layout.grid .widescreen-col-2-11 {
+ width: 18.1818181818%;
+ }
+ .layout.grid .widescreen-col-3-11 {
+ width: 27.2727272727%;
+ }
+ .layout.grid .widescreen-col-4-11 {
+ width: 36.3636363636%;
+ }
+ .layout.grid .widescreen-col-5-11 {
+ width: 45.4545454545%;
+ }
+ .layout.grid .widescreen-col-6-11 {
+ width: 54.5454545455%;
+ }
+ .layout.grid .widescreen-col-7-11 {
+ width: 63.6363636364%;
+ }
+ .layout.grid .widescreen-col-8-11 {
+ width: 72.7272727273%;
+ }
+ .layout.grid .widescreen-col-9-11 {
+ width: 81.8181818182%;
+ }
+ .layout.grid .widescreen-col-10-11 {
+ width: 90.9090909091%;
+ }
+ .layout.grid .widescreen-col-11-11 {
+ width: 100%;
+ }
+ .layout.grid .widescreen-col-1-12 {
+ width: 8.3333333333%;
+ }
+ .layout.grid .widescreen-col-2-12 {
+ width: 16.6666666667%;
+ }
+ .layout.grid .widescreen-col-3-12 {
+ width: 25%;
+ }
+ .layout.grid .widescreen-col-4-12 {
+ width: 33.3333333333%;
+ }
+ .layout.grid .widescreen-col-5-12 {
+ width: 41.6666666667%;
+ }
+ .layout.grid .widescreen-col-6-12 {
+ width: 50%;
+ }
+ .layout.grid .widescreen-col-7-12 {
+ width: 58.3333333333%;
+ }
+ .layout.grid .widescreen-col-8-12 {
+ width: 66.6666666667%;
+ }
+ .layout.grid .widescreen-col-9-12 {
+ width: 75%;
+ }
+ .layout.grid .widescreen-col-10-12 {
+ width: 83.3333333333%;
+ }
+ .layout.grid .widescreen-col-11-12 {
+ width: 91.6666666667%;
+ }
+ .layout.grid .widescreen-col-12-12 {
+ width: 100%;
+ }
+}
+.layout.grid.gap > * {
+ margin: 5px;
+}
+@media (min-width: 0px) {
+ .layout.grid.gap .phone-col-1-1 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .phone-col-1-2 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .phone-col-2-2 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .phone-col-1-3 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .phone-col-2-3 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .phone-col-3-3 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .phone-col-1-4 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .phone-col-2-4 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .phone-col-3-4 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .phone-col-4-4 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .phone-col-1-5 {
+ width: calc(20% - 10px);
+ }
+ .layout.grid.gap .phone-col-2-5 {
+ width: calc(40% - 10px);
+ }
+ .layout.grid.gap .phone-col-3-5 {
+ width: calc(60% - 10px);
+ }
+ .layout.grid.gap .phone-col-4-5 {
+ width: calc(80% - 10px);
+ }
+ .layout.grid.gap .phone-col-5-5 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .phone-col-1-6 {
+ width: calc(16.6666666667% - 10px);
+ }
+ .layout.grid.gap .phone-col-2-6 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .phone-col-3-6 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .phone-col-4-6 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .phone-col-5-6 {
+ width: calc(83.3333333333% - 10px);
+ }
+ .layout.grid.gap .phone-col-6-6 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .phone-col-1-7 {
+ width: calc(14.2857142857% - 10px);
+ }
+ .layout.grid.gap .phone-col-2-7 {
+ width: calc(28.5714285714% - 10px);
+ }
+ .layout.grid.gap .phone-col-3-7 {
+ width: calc(42.8571428571% - 10px);
+ }
+ .layout.grid.gap .phone-col-4-7 {
+ width: calc(57.1428571429% - 10px);
+ }
+ .layout.grid.gap .phone-col-5-7 {
+ width: calc(71.4285714286% - 10px);
+ }
+ .layout.grid.gap .phone-col-6-7 {
+ width: calc(85.7142857143% - 10px);
+ }
+ .layout.grid.gap .phone-col-7-7 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .phone-col-1-8 {
+ width: calc(12.5% - 10px);
+ }
+ .layout.grid.gap .phone-col-2-8 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .phone-col-3-8 {
+ width: calc(37.5% - 10px);
+ }
+ .layout.grid.gap .phone-col-4-8 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .phone-col-5-8 {
+ width: calc(62.5% - 10px);
+ }
+ .layout.grid.gap .phone-col-6-8 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .phone-col-7-8 {
+ width: calc(87.5% - 10px);
+ }
+ .layout.grid.gap .phone-col-8-8 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .phone-col-1-9 {
+ width: calc(11.1111111111% - 10px);
+ }
+ .layout.grid.gap .phone-col-2-9 {
+ width: calc(22.2222222222% - 10px);
+ }
+ .layout.grid.gap .phone-col-3-9 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .phone-col-4-9 {
+ width: calc(44.4444444444% - 10px);
+ }
+ .layout.grid.gap .phone-col-5-9 {
+ width: calc(55.5555555556% - 10px);
+ }
+ .layout.grid.gap .phone-col-6-9 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .phone-col-7-9 {
+ width: calc(77.7777777778% - 10px);
+ }
+ .layout.grid.gap .phone-col-8-9 {
+ width: calc(88.8888888889% - 10px);
+ }
+ .layout.grid.gap .phone-col-9-9 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .phone-col-1-10 {
+ width: calc(10% - 10px);
+ }
+ .layout.grid.gap .phone-col-2-10 {
+ width: calc(20% - 10px);
+ }
+ .layout.grid.gap .phone-col-3-10 {
+ width: calc(30% - 10px);
+ }
+ .layout.grid.gap .phone-col-4-10 {
+ width: calc(40% - 10px);
+ }
+ .layout.grid.gap .phone-col-5-10 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .phone-col-6-10 {
+ width: calc(60% - 10px);
+ }
+ .layout.grid.gap .phone-col-7-10 {
+ width: calc(70% - 10px);
+ }
+ .layout.grid.gap .phone-col-8-10 {
+ width: calc(80% - 10px);
+ }
+ .layout.grid.gap .phone-col-9-10 {
+ width: calc(90% - 10px);
+ }
+ .layout.grid.gap .phone-col-10-10 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .phone-col-1-11 {
+ width: calc(9.0909090909% - 10px);
+ }
+ .layout.grid.gap .phone-col-2-11 {
+ width: calc(18.1818181818% - 10px);
+ }
+ .layout.grid.gap .phone-col-3-11 {
+ width: calc(27.2727272727% - 10px);
+ }
+ .layout.grid.gap .phone-col-4-11 {
+ width: calc(36.3636363636% - 10px);
+ }
+ .layout.grid.gap .phone-col-5-11 {
+ width: calc(45.4545454545% - 10px);
+ }
+ .layout.grid.gap .phone-col-6-11 {
+ width: calc(54.5454545455% - 10px);
+ }
+ .layout.grid.gap .phone-col-7-11 {
+ width: calc(63.6363636364% - 10px);
+ }
+ .layout.grid.gap .phone-col-8-11 {
+ width: calc(72.7272727273% - 10px);
+ }
+ .layout.grid.gap .phone-col-9-11 {
+ width: calc(81.8181818182% - 10px);
+ }
+ .layout.grid.gap .phone-col-10-11 {
+ width: calc(90.9090909091% - 10px);
+ }
+ .layout.grid.gap .phone-col-11-11 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .phone-col-1-12 {
+ width: calc(8.3333333333% - 10px);
+ }
+ .layout.grid.gap .phone-col-2-12 {
+ width: calc(16.6666666667% - 10px);
+ }
+ .layout.grid.gap .phone-col-3-12 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .phone-col-4-12 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .phone-col-5-12 {
+ width: calc(41.6666666667% - 10px);
+ }
+ .layout.grid.gap .phone-col-6-12 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .phone-col-7-12 {
+ width: calc(58.3333333333% - 10px);
+ }
+ .layout.grid.gap .phone-col-8-12 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .phone-col-9-12 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .phone-col-10-12 {
+ width: calc(83.3333333333% - 10px);
+ }
+ .layout.grid.gap .phone-col-11-12 {
+ width: calc(91.6666666667% - 10px);
+ }
+ .layout.grid.gap .phone-col-12-12 {
+ width: calc(100% - 10px);
+ }
+}
+@media (min-width: 768px) {
+ .layout.grid.gap .tablet-col-1-1 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .tablet-col-1-2 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .tablet-col-2-2 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .tablet-col-1-3 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .tablet-col-2-3 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .tablet-col-3-3 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .tablet-col-1-4 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .tablet-col-2-4 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .tablet-col-3-4 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .tablet-col-4-4 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .tablet-col-1-5 {
+ width: calc(20% - 10px);
+ }
+ .layout.grid.gap .tablet-col-2-5 {
+ width: calc(40% - 10px);
+ }
+ .layout.grid.gap .tablet-col-3-5 {
+ width: calc(60% - 10px);
+ }
+ .layout.grid.gap .tablet-col-4-5 {
+ width: calc(80% - 10px);
+ }
+ .layout.grid.gap .tablet-col-5-5 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .tablet-col-1-6 {
+ width: calc(16.6666666667% - 10px);
+ }
+ .layout.grid.gap .tablet-col-2-6 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .tablet-col-3-6 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .tablet-col-4-6 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .tablet-col-5-6 {
+ width: calc(83.3333333333% - 10px);
+ }
+ .layout.grid.gap .tablet-col-6-6 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .tablet-col-1-7 {
+ width: calc(14.2857142857% - 10px);
+ }
+ .layout.grid.gap .tablet-col-2-7 {
+ width: calc(28.5714285714% - 10px);
+ }
+ .layout.grid.gap .tablet-col-3-7 {
+ width: calc(42.8571428571% - 10px);
+ }
+ .layout.grid.gap .tablet-col-4-7 {
+ width: calc(57.1428571429% - 10px);
+ }
+ .layout.grid.gap .tablet-col-5-7 {
+ width: calc(71.4285714286% - 10px);
+ }
+ .layout.grid.gap .tablet-col-6-7 {
+ width: calc(85.7142857143% - 10px);
+ }
+ .layout.grid.gap .tablet-col-7-7 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .tablet-col-1-8 {
+ width: calc(12.5% - 10px);
+ }
+ .layout.grid.gap .tablet-col-2-8 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .tablet-col-3-8 {
+ width: calc(37.5% - 10px);
+ }
+ .layout.grid.gap .tablet-col-4-8 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .tablet-col-5-8 {
+ width: calc(62.5% - 10px);
+ }
+ .layout.grid.gap .tablet-col-6-8 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .tablet-col-7-8 {
+ width: calc(87.5% - 10px);
+ }
+ .layout.grid.gap .tablet-col-8-8 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .tablet-col-1-9 {
+ width: calc(11.1111111111% - 10px);
+ }
+ .layout.grid.gap .tablet-col-2-9 {
+ width: calc(22.2222222222% - 10px);
+ }
+ .layout.grid.gap .tablet-col-3-9 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .tablet-col-4-9 {
+ width: calc(44.4444444444% - 10px);
+ }
+ .layout.grid.gap .tablet-col-5-9 {
+ width: calc(55.5555555556% - 10px);
+ }
+ .layout.grid.gap .tablet-col-6-9 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .tablet-col-7-9 {
+ width: calc(77.7777777778% - 10px);
+ }
+ .layout.grid.gap .tablet-col-8-9 {
+ width: calc(88.8888888889% - 10px);
+ }
+ .layout.grid.gap .tablet-col-9-9 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .tablet-col-1-10 {
+ width: calc(10% - 10px);
+ }
+ .layout.grid.gap .tablet-col-2-10 {
+ width: calc(20% - 10px);
+ }
+ .layout.grid.gap .tablet-col-3-10 {
+ width: calc(30% - 10px);
+ }
+ .layout.grid.gap .tablet-col-4-10 {
+ width: calc(40% - 10px);
+ }
+ .layout.grid.gap .tablet-col-5-10 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .tablet-col-6-10 {
+ width: calc(60% - 10px);
+ }
+ .layout.grid.gap .tablet-col-7-10 {
+ width: calc(70% - 10px);
+ }
+ .layout.grid.gap .tablet-col-8-10 {
+ width: calc(80% - 10px);
+ }
+ .layout.grid.gap .tablet-col-9-10 {
+ width: calc(90% - 10px);
+ }
+ .layout.grid.gap .tablet-col-10-10 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .tablet-col-1-11 {
+ width: calc(9.0909090909% - 10px);
+ }
+ .layout.grid.gap .tablet-col-2-11 {
+ width: calc(18.1818181818% - 10px);
+ }
+ .layout.grid.gap .tablet-col-3-11 {
+ width: calc(27.2727272727% - 10px);
+ }
+ .layout.grid.gap .tablet-col-4-11 {
+ width: calc(36.3636363636% - 10px);
+ }
+ .layout.grid.gap .tablet-col-5-11 {
+ width: calc(45.4545454545% - 10px);
+ }
+ .layout.grid.gap .tablet-col-6-11 {
+ width: calc(54.5454545455% - 10px);
+ }
+ .layout.grid.gap .tablet-col-7-11 {
+ width: calc(63.6363636364% - 10px);
+ }
+ .layout.grid.gap .tablet-col-8-11 {
+ width: calc(72.7272727273% - 10px);
+ }
+ .layout.grid.gap .tablet-col-9-11 {
+ width: calc(81.8181818182% - 10px);
+ }
+ .layout.grid.gap .tablet-col-10-11 {
+ width: calc(90.9090909091% - 10px);
+ }
+ .layout.grid.gap .tablet-col-11-11 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .tablet-col-1-12 {
+ width: calc(8.3333333333% - 10px);
+ }
+ .layout.grid.gap .tablet-col-2-12 {
+ width: calc(16.6666666667% - 10px);
+ }
+ .layout.grid.gap .tablet-col-3-12 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .tablet-col-4-12 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .tablet-col-5-12 {
+ width: calc(41.6666666667% - 10px);
+ }
+ .layout.grid.gap .tablet-col-6-12 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .tablet-col-7-12 {
+ width: calc(58.3333333333% - 10px);
+ }
+ .layout.grid.gap .tablet-col-8-12 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .tablet-col-9-12 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .tablet-col-10-12 {
+ width: calc(83.3333333333% - 10px);
+ }
+ .layout.grid.gap .tablet-col-11-12 {
+ width: calc(91.6666666667% - 10px);
+ }
+ .layout.grid.gap .tablet-col-12-12 {
+ width: calc(100% - 10px);
+ }
+}
+@media (min-width: 992px) {
+ .layout.grid.gap .desktop-col-1-1 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .desktop-col-1-2 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .desktop-col-2-2 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .desktop-col-1-3 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .desktop-col-2-3 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .desktop-col-3-3 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .desktop-col-1-4 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .desktop-col-2-4 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .desktop-col-3-4 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .desktop-col-4-4 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .desktop-col-1-5 {
+ width: calc(20% - 10px);
+ }
+ .layout.grid.gap .desktop-col-2-5 {
+ width: calc(40% - 10px);
+ }
+ .layout.grid.gap .desktop-col-3-5 {
+ width: calc(60% - 10px);
+ }
+ .layout.grid.gap .desktop-col-4-5 {
+ width: calc(80% - 10px);
+ }
+ .layout.grid.gap .desktop-col-5-5 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .desktop-col-1-6 {
+ width: calc(16.6666666667% - 10px);
+ }
+ .layout.grid.gap .desktop-col-2-6 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .desktop-col-3-6 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .desktop-col-4-6 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .desktop-col-5-6 {
+ width: calc(83.3333333333% - 10px);
+ }
+ .layout.grid.gap .desktop-col-6-6 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .desktop-col-1-7 {
+ width: calc(14.2857142857% - 10px);
+ }
+ .layout.grid.gap .desktop-col-2-7 {
+ width: calc(28.5714285714% - 10px);
+ }
+ .layout.grid.gap .desktop-col-3-7 {
+ width: calc(42.8571428571% - 10px);
+ }
+ .layout.grid.gap .desktop-col-4-7 {
+ width: calc(57.1428571429% - 10px);
+ }
+ .layout.grid.gap .desktop-col-5-7 {
+ width: calc(71.4285714286% - 10px);
+ }
+ .layout.grid.gap .desktop-col-6-7 {
+ width: calc(85.7142857143% - 10px);
+ }
+ .layout.grid.gap .desktop-col-7-7 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .desktop-col-1-8 {
+ width: calc(12.5% - 10px);
+ }
+ .layout.grid.gap .desktop-col-2-8 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .desktop-col-3-8 {
+ width: calc(37.5% - 10px);
+ }
+ .layout.grid.gap .desktop-col-4-8 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .desktop-col-5-8 {
+ width: calc(62.5% - 10px);
+ }
+ .layout.grid.gap .desktop-col-6-8 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .desktop-col-7-8 {
+ width: calc(87.5% - 10px);
+ }
+ .layout.grid.gap .desktop-col-8-8 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .desktop-col-1-9 {
+ width: calc(11.1111111111% - 10px);
+ }
+ .layout.grid.gap .desktop-col-2-9 {
+ width: calc(22.2222222222% - 10px);
+ }
+ .layout.grid.gap .desktop-col-3-9 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .desktop-col-4-9 {
+ width: calc(44.4444444444% - 10px);
+ }
+ .layout.grid.gap .desktop-col-5-9 {
+ width: calc(55.5555555556% - 10px);
+ }
+ .layout.grid.gap .desktop-col-6-9 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .desktop-col-7-9 {
+ width: calc(77.7777777778% - 10px);
+ }
+ .layout.grid.gap .desktop-col-8-9 {
+ width: calc(88.8888888889% - 10px);
+ }
+ .layout.grid.gap .desktop-col-9-9 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .desktop-col-1-10 {
+ width: calc(10% - 10px);
+ }
+ .layout.grid.gap .desktop-col-2-10 {
+ width: calc(20% - 10px);
+ }
+ .layout.grid.gap .desktop-col-3-10 {
+ width: calc(30% - 10px);
+ }
+ .layout.grid.gap .desktop-col-4-10 {
+ width: calc(40% - 10px);
+ }
+ .layout.grid.gap .desktop-col-5-10 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .desktop-col-6-10 {
+ width: calc(60% - 10px);
+ }
+ .layout.grid.gap .desktop-col-7-10 {
+ width: calc(70% - 10px);
+ }
+ .layout.grid.gap .desktop-col-8-10 {
+ width: calc(80% - 10px);
+ }
+ .layout.grid.gap .desktop-col-9-10 {
+ width: calc(90% - 10px);
+ }
+ .layout.grid.gap .desktop-col-10-10 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .desktop-col-1-11 {
+ width: calc(9.0909090909% - 10px);
+ }
+ .layout.grid.gap .desktop-col-2-11 {
+ width: calc(18.1818181818% - 10px);
+ }
+ .layout.grid.gap .desktop-col-3-11 {
+ width: calc(27.2727272727% - 10px);
+ }
+ .layout.grid.gap .desktop-col-4-11 {
+ width: calc(36.3636363636% - 10px);
+ }
+ .layout.grid.gap .desktop-col-5-11 {
+ width: calc(45.4545454545% - 10px);
+ }
+ .layout.grid.gap .desktop-col-6-11 {
+ width: calc(54.5454545455% - 10px);
+ }
+ .layout.grid.gap .desktop-col-7-11 {
+ width: calc(63.6363636364% - 10px);
+ }
+ .layout.grid.gap .desktop-col-8-11 {
+ width: calc(72.7272727273% - 10px);
+ }
+ .layout.grid.gap .desktop-col-9-11 {
+ width: calc(81.8181818182% - 10px);
+ }
+ .layout.grid.gap .desktop-col-10-11 {
+ width: calc(90.9090909091% - 10px);
+ }
+ .layout.grid.gap .desktop-col-11-11 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .desktop-col-1-12 {
+ width: calc(8.3333333333% - 10px);
+ }
+ .layout.grid.gap .desktop-col-2-12 {
+ width: calc(16.6666666667% - 10px);
+ }
+ .layout.grid.gap .desktop-col-3-12 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .desktop-col-4-12 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .desktop-col-5-12 {
+ width: calc(41.6666666667% - 10px);
+ }
+ .layout.grid.gap .desktop-col-6-12 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .desktop-col-7-12 {
+ width: calc(58.3333333333% - 10px);
+ }
+ .layout.grid.gap .desktop-col-8-12 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .desktop-col-9-12 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .desktop-col-10-12 {
+ width: calc(83.3333333333% - 10px);
+ }
+ .layout.grid.gap .desktop-col-11-12 {
+ width: calc(91.6666666667% - 10px);
+ }
+ .layout.grid.gap .desktop-col-12-12 {
+ width: calc(100% - 10px);
+ }
+}
+@media (min-width: 1200px) {
+ .layout.grid.gap .widescreen-col-1-1 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-1-2 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-2-2 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-1-3 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-2-3 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-3-3 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-1-4 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-2-4 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-3-4 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-4-4 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-1-5 {
+ width: calc(20% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-2-5 {
+ width: calc(40% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-3-5 {
+ width: calc(60% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-4-5 {
+ width: calc(80% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-5-5 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-1-6 {
+ width: calc(16.6666666667% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-2-6 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-3-6 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-4-6 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-5-6 {
+ width: calc(83.3333333333% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-6-6 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-1-7 {
+ width: calc(14.2857142857% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-2-7 {
+ width: calc(28.5714285714% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-3-7 {
+ width: calc(42.8571428571% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-4-7 {
+ width: calc(57.1428571429% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-5-7 {
+ width: calc(71.4285714286% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-6-7 {
+ width: calc(85.7142857143% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-7-7 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-1-8 {
+ width: calc(12.5% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-2-8 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-3-8 {
+ width: calc(37.5% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-4-8 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-5-8 {
+ width: calc(62.5% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-6-8 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-7-8 {
+ width: calc(87.5% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-8-8 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-1-9 {
+ width: calc(11.1111111111% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-2-9 {
+ width: calc(22.2222222222% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-3-9 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-4-9 {
+ width: calc(44.4444444444% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-5-9 {
+ width: calc(55.5555555556% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-6-9 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-7-9 {
+ width: calc(77.7777777778% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-8-9 {
+ width: calc(88.8888888889% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-9-9 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-1-10 {
+ width: calc(10% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-2-10 {
+ width: calc(20% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-3-10 {
+ width: calc(30% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-4-10 {
+ width: calc(40% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-5-10 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-6-10 {
+ width: calc(60% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-7-10 {
+ width: calc(70% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-8-10 {
+ width: calc(80% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-9-10 {
+ width: calc(90% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-10-10 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-1-11 {
+ width: calc(9.0909090909% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-2-11 {
+ width: calc(18.1818181818% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-3-11 {
+ width: calc(27.2727272727% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-4-11 {
+ width: calc(36.3636363636% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-5-11 {
+ width: calc(45.4545454545% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-6-11 {
+ width: calc(54.5454545455% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-7-11 {
+ width: calc(63.6363636364% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-8-11 {
+ width: calc(72.7272727273% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-9-11 {
+ width: calc(81.8181818182% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-10-11 {
+ width: calc(90.9090909091% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-11-11 {
+ width: calc(100% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-1-12 {
+ width: calc(8.3333333333% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-2-12 {
+ width: calc(16.6666666667% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-3-12 {
+ width: calc(25% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-4-12 {
+ width: calc(33.3333333333% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-5-12 {
+ width: calc(41.6666666667% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-6-12 {
+ width: calc(50% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-7-12 {
+ width: calc(58.3333333333% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-8-12 {
+ width: calc(66.6666666667% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-9-12 {
+ width: calc(75% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-10-12 {
+ width: calc(83.3333333333% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-11-12 {
+ width: calc(91.6666666667% - 10px);
+ }
+ .layout.grid.gap .widescreen-col-12-12 {
+ width: calc(100% - 10px);
+ }
+}
+.layout.table {
+ display: table;
+}
+
+@media (max-width: 767px) {
+ .visible-phone {
+ display: block !important;
+ }
+
+ .hidden-phone {
+ display: none !important;
+ }
+}
+@media (min-width: 768px) and (max-width: 991px) {
+ .visible-tablet {
+ display: block !important;
+ }
+
+ .hidden-tablet {
+ display: none !important;
+ }
+}
+@media (min-width: 992px) and (max-width: 1199px) {
+ .visible-desktop {
+ display: block !important;
+ }
+
+ .hidden-desktop {
+ display: none !important;
+ }
+}
+@media (min-width: 1200px) {
+ .visible-widescreen {
+ display: block !important;
+ }
+
+ .hidden-widescreen {
+ display: none !important;
+ }
+}
+.visible-phone, .visible-tablet, .visible-desktop, .visible-widescreen {
+ display: none !important;
+}
+
+.hidden-phone, .hidden-tablet, .hidden-desktop, .hidden-widescreen {
+ display: flex !important;
+}
+
+.jewel.list, .jewel.navigation {
+ align-items: stretch;
+ align-content: flex-start;
}
j|List {
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ListView");
- IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ListSingleSelectionMouseController");
- IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.VerticalLayout");
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController");
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout");
IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.ListItemRenderer");
- IViewport: ClassReference("org.apache.royale.html.supportClasses.ScrollingViewport");
+ IViewport: ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport");
IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.SingleSelectionCollectionViewModel");
- IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForCollectionView");
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ArrayListSelectionModel");
+ IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView");
+}
+
+j|Navigation {
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ListView");
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController");
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout");
+ IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
+ IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.NavigationLinkItemRenderer");
+ IViewport: ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport");
+ IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ArrayListSelectionModel");
+ IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView");
}
@media -royale-swf {
j|List {
- iBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- iBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- iBorderModel: ClassReference("org.apache.royale.html.beads.models.SingleLineBorderModel");
- IContentView: ClassReference("org.apache.royale.html.supportClasses.DataGroup");
+ IContentView: ClassReference("org.apache.royale.jewel.supportClasses.list.DataGroup");
}
}
+.jewel.numericstepper .jewel.textinput {
+ display: inline-flex;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper {
+ width: 190px;
+ height: 39px;
+ }
+ .jewel.numericstepper .jewel.textinput {
+ z-index: 1;
+ position: relative;
+ left: 38px;
+ }
+}
+j|NumericStepper {
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.RangeModel");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.NumericStepperView");
+}
+
+.jewel.spinner {
+ display: inline-flex;
+ flex-direction: column;
+ vertical-align: top;
+}
+.jewel.spinner .jewel.button {
+ display: flex;
+}
+.jewel.spinner .jewel.button.up::after {
+ content: " ";
+ position: absolute;
+ width: 22px;
+ height: 10px;
+ left: calc(50% - 11px);
+ top: calc(50% - 5px);
+}
+.jewel.spinner .jewel.button.down::after {
+ content: " ";
+ position: absolute;
+ width: 22px;
+ height: 10px;
+ left: calc(50% - 11px);
+ top: calc(50% - 5px);
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner {
+ position: relative;
+ left: -112px;
+ flex-direction: row;
+ width: auto;
+ }
+ .jewel.spinner .jewel.button {
+ width: 39px;
+ height: 38px;
+ }
+ .jewel.spinner .jewel.button.down {
+ left: 110px;
+ }
+}
+j|Spinner {
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.RangeModel");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.SpinnerView");
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.SpinnerMouseController");
+}
+
+.jewel.radiobutton {
+ display: inline-flex;
+ position: relative;
+ margin: 0;
+ padding: 0;
+ height: 22px;
+ cursor: pointer;
+}
+.jewel.radiobutton input {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ display: inline-flex;
+ margin: 0;
+ padding: 0;
+ width: 22px;
+ height: 22px;
+ line-height: 22px;
+ opacity: 0;
+}
+.jewel.radiobutton input + span::before {
+ content: " ";
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 22px;
+ height: 22px;
+}
+.jewel.radiobutton input + span::after {
+ content: " ";
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 22px;
+ height: 22px;
+ opacity: 0;
+}
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ opacity: 1;
+}
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ outline: none;
+}
+.jewel.radiobutton input[disabled] {
+ cursor: unset;
+}
+.jewel.radiobutton input[disabled] + span {
+ cursor: unset;
+}
+.jewel.radiobutton span {
+ margin: 0;
+ vertical-align: top;
+ line-height: 24px;
+}
+
@media -royale-swf {
j|RadioButton {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel");
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.RadioButtonView");
}
}
+.jewel.section {
+ display: none;
+ flex-flow: column nowrap;
+}
+.jewel.section.is-active {
+ display: flex;
+}
+
+.jewel.slider {
+ position: relative;
+ height: 27px;
+ display: flex !important;
+ flex-direction: row;
+ background: none;
+}
+.jewel.slider input {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ outline: 0;
+ cursor: pointer;
+ user-select: none;
+ align-self: center;
+ z-index: 1;
+ margin: 0 20px;
+ padding: 0;
+ width: calc(100% - 40px);
+ height: 36px;
+ background: transparent;
+}
+.jewel.slider input::-webkit-slider-runnable-track {
+ background: transparent;
+}
+.jewel.slider input::-moz-range-track {
+ background: transparent;
+ border: none;
+}
+.jewel.slider input::-ms-track {
+ width: 100%;
+ height: 6px;
+ background: none;
+ border: none;
+ color: transparent;
+}
+.jewel.slider input::-ms-fill-lower {
+ padding: 0;
+}
+.jewel.slider input::-ms-fill-upper {
+ padding: 0;
+}
+.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+}
+.jewel.slider input:focus {
+ outline: none;
+}
+.jewel.slider input[disabled] {
+ cursor: unset;
+}
+.jewel.slider input::-ms-tooltip {
+ display: none;
+}
+
+.slider-track-container {
+ position: absolute;
+ display: flex;
+ overflow: hidden;
+ transform: translate(0, -3px);
+ margin: 0 29px;
+ padding: 0;
+ left: 0;
+ width: calc(100% - 58px);
+ height: 6px;
+ background: transparent;
+ border: 0;
+}
+
+.slider-track-fill {
+ position: relative;
+ flex: 0;
+ padding: 0;
+}
+
+.slider-track {
+ position: relative;
+ flex: 0;
+ padding: 0;
+}
+
j|Slider {
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.SliderRangeModel");
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.SliderView");
@@ -180,8 +3140,188 @@
iTrackView: ClassReference("org.apache.royale.jewel.beads.views.SliderTrackView");
}
}
-j|TextField {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
+.jewel.simpletable {
+ position: relative;
+ white-space: nowrap;
+ border-spacing: 0px;
+ overflow: hidden;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ position: relative;
+ vertical-align: bottom;
+ text-overflow: ellipsis;
+ letter-spacing: 0;
+ padding: 12px;
+ text-align: left;
+}
+.jewel.simpletable .jewel.tbody .jewel.tablerow {
+ position: relative;
+ transition-duration: 0.28s;
+ transition-property: background-color;
+}
+.jewel.simpletable .jewel.tablecell {
+ position: relative;
+}
+.jewel.simpletable .jewel.tablecell > * {
+ padding: 12px;
+}
+
+.jewel.table {
+ position: relative;
+ white-space: nowrap;
+ border-spacing: 0px;
+ overflow: hidden;
+}
+.jewel.table .jewel.tableheadercell {
+ position: relative;
+ vertical-align: bottom;
+ text-overflow: ellipsis;
+ letter-spacing: 0;
+ padding: 12px;
+ text-align: left;
+}
+.jewel.table .jewel.tbody .jewel.tablerow {
+ position: relative;
+ transition-duration: 0.28s;
+ transition-property: background-color;
+}
+.jewel.table .jewel.tablecell {
+ position: relative;
+}
+.jewel.table.fixedHeader {
+ table-layout: fixed;
+}
+.jewel.table.fixedHeader .jewel.tbody {
+ display: block;
+ overflow: auto;
+}
+.jewel.table.fixedHeader .jewel.tbody .jewel.tablerow {
+ display: block;
+}
+.jewel.table.fixedHeader .jewel.tablecell {
+ display: inline-block;
+}
+
+j|Table {
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.TableLayout");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.TableView");
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TableModel");
+ IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
+ IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.TableItemRenderer");
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.TableCellSelectionMouseController");
+ IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.TableItemRendererFactoryForCollectionView");
+ IViewport: ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport");
+ IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
+ IContentView: ClassReference("org.apache.royale.jewel.supportClasses.table.TBodyContentArea");
+}
+
+.jewel.tableitem {
+ padding: 10px;
+ cursor: pointer;
+ text-decoration: none;
+ align-items: center;
+ letter-spacing: 0;
+ line-height: normal !important;
+ overflow: hidden;
+}
+.jewel.tableitem.with-childs {
+ padding: 6px;
+}
+.jewel.tableitem.calendar {
+ border-radius: 10%;
+}
+
+.empty-cell {
+ pointer-events: none;
+}
+
+j|TableItemRenderer {
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController");
+}
+
+.alignTextLeft {
+ text-align: left;
+}
+
+.alignTextRight {
+ text-align: right;
+}
+
+.alignTextCenter {
+ text-align: center;
+}
+
+.jewel.textinput {
+ position: relative;
+ display: inline-flex;
+}
+.jewel.textinput input {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ margin: 0;
+ padding: 0.68em 1.12em;
+ max-width: 100%;
+ flex: 1 0 auto;
+ outline: none;
+ text-align: left;
+ line-height: normal !important;
+}
+.jewel.textinput input[disabled] {
+ cursor: unset;
+}
+.jewel.textinput.icon input {
+ padding-left: 2.12em;
+}
+.jewel.textinput.icon i.fonticon {
+ cursor: default;
+ pointer-events: none;
+ top: 50%;
+ left: 0.45em;
+ right: auto;
+ position: absolute;
+ text-align: center;
+ margin-top: -0.5em;
+}
+.jewel.textinput.icon.right input {
+ padding-right: 2.12em;
+ padding-left: 1.12em;
+}
+.jewel.textinput.icon.right i.fonticon {
+ left: auto;
+ right: 0.45em;
+}
+
+j|TextInput {
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel");
+}
+
+.jewel.textarea {
+ position: relative;
+ display: inline-flex;
+}
+.jewel.textarea textarea {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ -ms-appearance: none;
+ appearance: none;
+ margin: 0;
+ padding: 0.72em 1.12em;
+ max-width: 100%;
+ flex: 1 0 auto;
+ outline: none;
+ text-align: left;
+ line-height: normal !important;
+}
+.jewel.textarea textarea[disabled] {
+ cursor: unset;
+}
+
+j|TextArea {
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel");
}
.jewel.titlebar {
@@ -191,16 +3331,126 @@
}
j|TitleBar {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.TitleBarModel");
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TitleBarModel");
IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout");
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.TitleBarView");
}
-@media -royale-swf {
- j|TitleBar {
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- }
+.jewel.togglebutton {
+ margin: 0;
+ padding: 0.68em 1.12em;
+ cursor: pointer;
+ user-select: none;
+ display: inline-flex;
+ position: relative;
+ align-items: center;
+ justify-content: center;
+ zoom: 1;
+ vertical-align: middle;
+ overflow: hidden;
+ outline: none;
+ white-space: nowrap;
+ line-height: normal !important;
+ text-align: center;
+ text-decoration: none;
+}
+.jewel.togglebutton[disabled] {
+ cursor: unset;
+}
+
+.jewel.errorTip {
+ padding: 6px;
+ z-index: 5;
+ margin-top: -31px !important;
+}
+.jewel.errorTip::before {
+ top: 100%;
+ left: 8px;
+ position: absolute;
+ content: "";
+ margin-top: 0px;
+}
+
+.jewel.topappbar {
+ display: inline-flex;
+ flex: 1 1 auto;
+}
+.jewel.topappbar .topBarAppHeader {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 100%;
+ z-index: 4;
+ position: fixed;
+}
+.jewel.topappbar .topBarAppHeader.fixed {
+ transition: box-shadow 200ms linear;
+}
+
+.jewel.topappbarrow {
+ display: flex;
+ position: relative;
+ width: 100%;
+ height: 64px;
+}
+
+.jewel.topappbarsection {
+ display: inline-flex;
+ flex: 1 1 auto;
+ align-items: center;
+ min-width: 0;
+ z-index: 1;
+ justify-content: flex-start;
+ order: -1;
+}
+.jewel.topappbarsection.alignRight {
+ justify-content: flex-end;
+ order: 1;
+}
+.jewel.topappbarsection button {
+ will-change: transform, opacity;
+ display: flex;
+ position: relative;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 48px;
+ outline: none;
+ text-decoration: none;
+ opacity: 1;
+}
+.jewel.topappbarsection button .fonticon {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+
+.jewel.topappbartitle {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ white-space: nowrap;
+ overflow: hidden;
+ z-index: 1;
+ line-height: 2rem;
+ letter-spacing: 0.0125em;
+ text-decoration: inherit;
+ text-transform: inherit;
+ text-overflow: ellipsis;
+}
+
+.jewel.main {
+ width: 100%;
+ min-height: 100%;
+}
+
+.has-topappbar {
+ padding-top: 64px !important;
+}
+
+j|ApplicationMainContent {
+ IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView");
+ IViewport: ClassReference("org.apache.royale.jewel.supportClasses.Viewport");
+ IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-as-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-as-manifest.xml
index e38496a..bdf5ce0 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-as-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-as-manifest.xml
@@ -21,5 +21,6 @@
<componentPackage>
-
+ <component id="HScrollBar" class="org.apache.royale.jewel.supportClasses.scrollbar.HScrollBar"/>
+ <component id="VScrollBar" class="org.apache.royale.jewel.supportClasses.scrollbar.VScrollBar"/>
</componentPackage>
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 02b7007..e01b5a7 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -22,10 +22,33 @@
<componentPackage>
<component id="Application" class="org.apache.royale.jewel.Application"/>
+ <component id="View" class="org.apache.royale.jewel.View"/>
+ <component id="Group" class="org.apache.royale.jewel.Group"/>
+ <component id="HGroup" class="org.apache.royale.jewel.HGroup"/>
+ <component id="VGroup" class="org.apache.royale.jewel.VGroup"/>
+ <component id="Container" class="org.apache.royale.jewel.Container"/>
+ <component id="Grid" class="org.apache.royale.jewel.Grid"/>
+ <component id="GridCell" class="org.apache.royale.jewel.GridCell"/>
+
+ <component id="SimpleTable" class="org.apache.royale.jewel.SimpleTable"/>
+ <component id="Table" class="org.apache.royale.jewel.Table"/>
+ <component id="THead" class="org.apache.royale.jewel.supportClasses.table.THead"/>
+ <component id="TBody" class="org.apache.royale.jewel.supportClasses.table.TBody"/>
+ <component id="TFoot" class="org.apache.royale.jewel.supportClasses.table.TFoot"/>
+ <component id="TableRow" class="org.apache.royale.jewel.supportClasses.table.TableRow"/>
+ <component id="TableCell" class="org.apache.royale.jewel.supportClasses.table.TableCell"/>
+ <component id="TableHeaderCell" class="org.apache.royale.jewel.supportClasses.table.TableHeaderCell"/>
+ <component id="TableColumn" class="org.apache.royale.jewel.supportClasses.table.TableColumn"/>
+
<component id="Button" class="org.apache.royale.jewel.Button"/>
- <component id="TextButton" class="org.apache.royale.jewel.TextButton"/>
+ <component id="IconButton" class="org.apache.royale.jewel.IconButton"/>
+ <component id="ToggleButton" class="org.apache.royale.jewel.ToggleButton"/>
<component id="Label" class="org.apache.royale.jewel.Label"/>
- <component id="TextField" class="org.apache.royale.jewel.TextField"/>
+ <component id="TextInput" class="org.apache.royale.jewel.TextInput"/>
+ <component id="IconTextInput" class="org.apache.royale.jewel.IconTextInput"/>
+ <component id="TextArea" class="org.apache.royale.jewel.TextArea"/>
+ <component id="Spinner" class="org.apache.royale.jewel.Spinner" />
+ <component id="NumericStepper" class="org.apache.royale.jewel.NumericStepper" />
<component id="Slider" class="org.apache.royale.jewel.Slider"/>
<component id="RadioButton" class="org.apache.royale.jewel.RadioButton"/>
<component id="CheckBox" class="org.apache.royale.jewel.CheckBox"/>
@@ -34,17 +57,94 @@
<component id="TitleBar" class="org.apache.royale.jewel.TitleBar"/>
<component id="List" class="org.apache.royale.jewel.List"/>
<component id="DropDownList" class="org.apache.royale.jewel.DropDownList"/>
+ <component id="ComboBox" class="org.apache.royale.jewel.ComboBox"/>
+ <component id="ComboBoxList" class="org.apache.royale.jewel.supportClasses.combobox.ComboBoxList"/>
+ <component id="Spacer" class="org.apache.royale.jewel.Spacer"/>
+ <component id="DateChooser" class="org.apache.royale.jewel.DateChooser"/>
+ <component id="DateField" class="org.apache.royale.jewel.DateField"/>
+ <component id="DataContainer" class="org.apache.royale.jewel.DataContainer" />
+ <component id="DataGroup" class="org.apache.royale.jewel.supportClasses.list.DataGroup" />
+
+ <component id="Form" class="org.apache.royale.jewel.Form"/>
+ <component id="ErrorTip" class="org.apache.royale.jewel.ErrorTip"/>
+
+ <component id="Validator" class="org.apache.royale.jewel.beads.validators.Validator"/>
+ <component id="FormValidator" class="org.apache.royale.jewel.beads.validators.FormValidator"/>
+ <component id="StringValidator" class="org.apache.royale.jewel.beads.validators.StringValidator"/>
+ <component id="CheckBoxValidator" class="org.apache.royale.jewel.beads.validators.CheckBoxValidator"/>
+ <component id="RadioButtonValidator" class="org.apache.royale.jewel.beads.validators.RadioButtonValidator"/>
+
+ <component id="Navigation" class="org.apache.royale.jewel.Navigation"/>
+ <component id="NavigationLinkItemRenderer" class="org.apache.royale.jewel.itemRenderers.NavigationLinkItemRenderer"/>
+
+ <component id="DateChooserModel" class="org.apache.royale.jewel.beads.models.DateChooserModel"/>
+
+ <component id="ApplicationResponsiveView" class="org.apache.royale.jewel.ApplicationResponsiveView"/>
+ <component id="TopAppBar" class="org.apache.royale.jewel.TopAppBar"/>
+ <component id="TopAppBarRow" class="org.apache.royale.jewel.TopAppBarRow"/>
+ <component id="TopAppBarSection" class="org.apache.royale.jewel.TopAppBarSection"/>
+ <component id="TopAppBarTitle" class="org.apache.royale.jewel.TopAppBarTitle"/>
+ <component id="ApplicationMainContent" class="org.apache.royale.jewel.ApplicationMainContent"/>
+ <component id="SectionContent" class="org.apache.royale.jewel.SectionContent"/>
+ <component id="Drawer" class="org.apache.royale.jewel.Drawer"/>
+ <component id="DrawerHeader" class="org.apache.royale.jewel.DrawerHeader"/>
+ <component id="DrawerContent" class="org.apache.royale.jewel.DrawerContent"/>
+ <component id="Divider" class="org.apache.royale.jewel.Divider"/>
+
+ <component id="Image" class="org.apache.royale.jewel.Image"/>
+
+ <component id="Card" class="org.apache.royale.jewel.Card"/>
+
+ <component id="DropDownListList" class="org.apache.royale.jewel.supportClasses.dropdownlist.DropDownListList"/>
<component id="Disabled" class="org.apache.royale.jewel.beads.controls.Disabled"/>
+ <component id="SizeControl" class="org.apache.royale.jewel.beads.controls.SizeControl"/>
+ <component id="TextAlign" class="org.apache.royale.jewel.beads.controls.TextAlign"/>
+ <component id="ResponsiveVisibility" class="org.apache.royale.jewel.beads.layouts.ResponsiveVisibility"/>
+
+ <component id="ResponsiveDrawer" class="org.apache.royale.jewel.beads.controls.drawer.ResponsiveDrawer"/>
+
+ <component id="TextPrompt" class="org.apache.royale.jewel.beads.controls.textinput.TextPrompt"/>
+ <component id="PasswordInput" class="org.apache.royale.jewel.beads.controls.textinput.PasswordInput"/>
+ <component id="MaxNumberCharacters" class="org.apache.royale.jewel.beads.controls.textinput.MaxNumberCharacters"/>
+ <component id="BasicLayout" class="org.apache.royale.jewel.beads.layouts.BasicLayout"/>
+ <component id="NullLayout" class="org.apache.royale.jewel.beads.layouts.NullLayout"/>
+ <component id="SimpleHorizontalLayout" class="org.apache.royale.jewel.beads.layouts.SimpleHorizontalLayout"/>
+ <component id="SimpleVerticalLayout" class="org.apache.royale.jewel.beads.layouts.SimpleVerticalLayout"/>
<component id="HorizontalLayout" class="org.apache.royale.jewel.beads.layouts.HorizontalLayout"/>
<component id="VerticalLayout" class="org.apache.royale.jewel.beads.layouts.VerticalLayout"/>
- <component id="HorizontalLayoutWithPaddingAndGap" class="org.apache.royale.jewel.beads.layouts.HorizontalLayoutWithPaddingAndGap"/>
- <component id="VerticalLayoutWithPaddingAndGap" class="org.apache.royale.jewel.beads.layouts.VerticalLayoutWithPaddingAndGap"/>
- <component id="HorizontalLayoutSpaceBetween" class="org.apache.royale.jewel.beads.layouts.HorizontalLayoutSpaceBetween"/>
+ <component id="HorizontalCenteredLayout" class="org.apache.royale.jewel.beads.layouts.HorizontalCenteredLayout"/>
+ <component id="VerticalCenteredLayout" class="org.apache.royale.jewel.beads.layouts.VerticalCenteredLayout"/>
+ <component id="HorizontalFlowLayout" class="org.apache.royale.jewel.beads.layouts.HorizontalFlowLayout"/>
+ <component id="VerticalFlowLayout" class="org.apache.royale.jewel.beads.layouts.VerticalFlowLayout"/>
+ <component id="TileLayout" class="org.apache.royale.jewel.beads.layouts.TileLayout"/>
+ <component id="GridLayout" class="org.apache.royale.jewel.beads.layouts.GridLayout"/>
+ <component id="GridCellLayout" class="org.apache.royale.jewel.beads.layouts.GridCellLayout"/>
+ <component id="TableLayout" class="org.apache.royale.jewel.beads.layouts.TableLayout"/>
+ <component id="StringItemRenderer" class="org.apache.royale.jewel.itemRenderers.StringItemRenderer"/>
<component id="ListItemRenderer" class="org.apache.royale.jewel.itemRenderers.ListItemRenderer"/>
+ <component id="TableItemRenderer" class="org.apache.royale.jewel.itemRenderers.TableItemRenderer"/>
+ <component id="DateItemRenderer" class="org.apache.royale.jewel.itemRenderers.DateItemRenderer"/>
+ <component id="DropDownListItemRenderer" class="org.apache.royale.jewel.itemRenderers.DropDownListItemRenderer"/>
+
+ <component id="ScrollingViewport" class="org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport"/>
+ <component id="DataItemRendererFactoryForArrayData" class="org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForArrayData"/>
+ <component id="DataItemRendererFactoryForCollectionView" class="org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView"/>
+ <component id="TableItemRendererFactoryForCollectionView" class="org.apache.royale.jewel.beads.itemRenderers.TableItemRendererFactoryForCollectionView"/>
+
+ <component id="AddListItemRendererForArrayListData" class="org.apache.royale.jewel.beads.itemRenderers.AddListItemRendererForArrayListData" />
+ <component id="RemoveListItemRendererForArrayListData" class="org.apache.royale.jewel.beads.itemRenderers.RemoveListItemRendererForArrayListData" />
+ <component id="UpdateListItemRendererForArrayListData" class="org.apache.royale.jewel.beads.itemRenderers.UpdateListItemRendererForArrayListData" />
+
+ <component id="AddTableRowForArrayListData" class="org.apache.royale.jewel.beads.itemRenderers.AddTableRowForArrayListData" />
+ <component id="RemoveTableRowForArrayListData" class="org.apache.royale.jewel.beads.itemRenderers.RemoveTableRowForArrayListData" />
+ <component id="UpdateTableRowForArrayListData" class="org.apache.royale.jewel.beads.itemRenderers.UpdateTableRowForArrayListData" />
+
+ <component id="RemoveAllItemRendererForArrayListData" class="org.apache.royale.jewel.beads.itemRenderers.RemoveAllItemRendererForArrayListData" />
+
<!-- <component id="JewelLabelViewBead" class="org.apache.royale.jewel.beads.views.JewelLabelViewBead"/> -->
</componentPackage>
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index a7dc5d2..9a1f0fd 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -27,15 +27,40 @@
*/
internal class JewelClasses
{
+ import org.apache.royale.jewel.beads.models.ImageModel; ImageModel;
import org.apache.royale.jewel.beads.models.SliderRangeModel; SliderRangeModel;
+ import org.apache.royale.jewel.beads.models.AlertModel; AlertModel;
+ import org.apache.royale.jewel.beads.models.TitleBarModel; TitleBarModel;
+ import org.apache.royale.jewel.beads.models.TextModel; TextModel;
+ import org.apache.royale.jewel.beads.models.RangeModel; RangeModel;
+ import org.apache.royale.jewel.beads.models.DateChooserModel; DateChooserModel;
+ import org.apache.royale.jewel.beads.models.DataProviderModel; DataProviderModel;
+ import org.apache.royale.jewel.beads.models.ComboBoxModel; ComboBoxModel;
+
+ import org.apache.royale.jewel.beads.controllers.SpinnerMouseController; SpinnerMouseController;
import org.apache.royale.jewel.beads.controllers.SliderMouseController; SliderMouseController;
+ import org.apache.royale.jewel.beads.controllers.DateChooserMouseController; DateChooserMouseController;
+ import org.apache.royale.jewel.beads.controllers.DateFieldMouseController; DateFieldMouseController;
import org.apache.royale.jewel.beads.controllers.AlertController; AlertController;
+ import org.apache.royale.jewel.beads.controllers.ItemRendererMouseController; ItemRendererMouseController;
+ import org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController; ListSingleSelectionMouseController;
+ import org.apache.royale.jewel.beads.controllers.TableCellSelectionMouseController; TableCellSelectionMouseController;
+ import org.apache.royale.jewel.beads.controllers.ComboBoxController; ComboBoxController;
+ import org.apache.royale.jewel.beads.views.ImageView; ImageView;
+ import org.apache.royale.jewel.beads.views.SpinnerView; SpinnerView;
+ import org.apache.royale.jewel.beads.views.NumericStepperView; NumericStepperView;
import org.apache.royale.jewel.beads.views.SliderView; SliderView;
import org.apache.royale.jewel.beads.views.AlertView; AlertView;
import org.apache.royale.jewel.beads.views.TitleBarView; TitleBarView;
import org.apache.royale.jewel.beads.views.AlertTitleBarView; AlertTitleBarView;
import org.apache.royale.jewel.beads.views.ListView; ListView;
+ import org.apache.royale.jewel.beads.views.DropDownListView; DropDownListView;
+ import org.apache.royale.jewel.beads.views.DropDownListView; DropDownListView;
+ import org.apache.royale.jewel.beads.views.DateChooserView; DateChooserView;
+ import org.apache.royale.jewel.beads.views.TableView; TableView;
+ import org.apache.royale.jewel.beads.views.ComboBoxView; ComboBoxView;
+
COMPILE::SWF
{
@@ -47,17 +72,26 @@
import org.apache.royale.jewel.beads.views.RadioButtonView; RadioButtonView;
import org.apache.royale.jewel.beads.views.CheckBoxView; CheckBoxView;
- import org.apache.royale.jewel.beads.views.DropDownListView; DropDownListView;
+ // import org.apache.royale.jewel.beads.views.DropDownListView; DropDownListView;
+ import org.apache.royale.jewel.beads.controllers.DropDownListController; DropDownListController;
}
-
- 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.HorizontalLayoutWithPaddingAndGap; HorizontalLayoutWithPaddingAndGap;
- import org.apache.royale.jewel.beads.layouts.VerticalLayoutWithPaddingAndGap; VerticalLayoutWithPaddingAndGap;
- import org.apache.royale.jewel.beads.layouts.HorizontalLayoutSpaceBetween; HorizontalLayoutSpaceBetween;
- //import org.apache.royale.jewel.beads.views.JewelLabelViewBead; JewelLabelViewBead;
+ import org.apache.royale.jewel.supportClasses.ResponsiveSizes; ResponsiveSizes;
+ import org.apache.royale.jewel.supportClasses.INavigationRenderer; INavigationRenderer;
+ import org.apache.royale.jewel.supportClasses.IActivable; IActivable;
+ import org.apache.royale.jewel.supportClasses.textinput.ITextInput; ITextInput;
+
+ import org.apache.royale.jewel.supportClasses.Viewport; Viewport;
+ import org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport; ScrollingViewport;
+ import org.apache.royale.jewel.supportClasses.datagrid.DataGridColumn; DataGridColumn;
+ import org.apache.royale.jewel.supportClasses.datechooser.DateChooserTable; DateChooserTable;
+ import org.apache.royale.jewel.supportClasses.table.TBodyContentArea; TBodyContentArea;
+ import org.apache.royale.jewel.supportClasses.combobox.ComboBoxList; ComboBoxList;
+ import org.apache.royale.jewel.supportClasses.list.DataGroup; DataGroup;
+ import org.apache.royale.jewel.supportClasses.combobox.ComboBoxListDataGroup; ComboBoxListDataGroup;
+
+ //import org.apache.royale.jewel.beads.views.JewelLabelViewBead; JewelLabelViewBead;
}
}
\ No newline at end of file
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/ListBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/IListWithPresentationModel.as
similarity index 71%
copy from frameworks/projects/Basic/src/main/royale/org/apache/royale/core/ListBase.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/IListWithPresentationModel.as
index a17d205..360a940 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/ListBase.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/IListWithPresentationModel.as
@@ -17,34 +17,31 @@
//
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.core
-{
- /*
- *************
- * THIS CLASS IS NO LONGER NEEDED. INHERIT FROM DataContainerBase
- */
-
+{
+ import org.apache.royale.core.IList
+ import org.apache.royale.core.IListPresentationModel;
+
/**
- * The ListBase class is the base class for most lists
- * in Royale.
- *
+ * The IListWithPresentationModel interface is implemented by any IList
+ * that supports a separate IListPresentationModel
+ *
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.0
*/
- public class ListBase extends DataContainerBase
+ public interface IListWithPresentationModel extends IList
{
/**
- * Constructor.
- *
+ * Returns the component within the list (maybe even the list shell itself)
+ * which will be the parent of each itemRenderer.
+ *
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.0
*/
- public function ListBase()
- {
- super();
- }
- }
+ function get presentationModel():IListPresentationModel;
+
+ }
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Alert.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Alert.as
index 1363127..a30b9bb 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Alert.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Alert.as
@@ -18,7 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
- import org.apache.royale.html.Group;
+ import org.apache.royale.jewel.Group;
import org.apache.royale.core.IAlertModel;
import org.apache.royale.core.IPopUp;
@@ -49,7 +49,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public class Alert extends Group implements IPopUp
{
@@ -59,7 +59,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public static const YES:uint = 0x000001;
@@ -69,7 +69,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public static const NO:uint = 0x000002;
@@ -79,7 +79,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public static const OK:uint = 0x000004;
@@ -89,7 +89,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public static const CANCEL:uint = 0x000008;
@@ -104,7 +104,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function Alert()
{
@@ -119,7 +119,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function get title():String
{
@@ -137,7 +137,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function get message():String
{
@@ -159,7 +159,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function get flags():uint
{
@@ -199,7 +199,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
private function prepareAlert(parent:Object = null):void
{
@@ -239,7 +239,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
static public function show(message:String, title:String="", flags:uint=Alert.OK, parent:Object = null, modal:Boolean = true) : Alert
{
@@ -265,7 +265,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function showModal(parent:Object = null):void
{
@@ -291,7 +291,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function show(parent:Object = null) : void
{
@@ -314,7 +314,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function close():void
{
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 b29f0a4..78a1aa5 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
@@ -18,53 +18,730 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
- import org.apache.royale.core.Application;
+ import org.apache.royale.core.ApplicationBase;
+ import org.apache.royale.core.IParent;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.utils.MXMLDataInterpreter;
+ import org.apache.royale.utils.Timer;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IInitialViewApplication;
+ import org.apache.royale.core.IPopUpHost;
+ import org.apache.royale.core.IRenderedObject;
import org.apache.royale.core.SimpleCSSValuesImpl;
-
- /**
- * Jewel Application holds specific Jewel need in a Royale Application.
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.ILayoutChild;
+ import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.core.IValuesImpl;
+ import org.apache.royale.core.IChild;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.IApplicationView;
+
+ COMPILE::SWF {
+ import flash.display.DisplayObject;
+ import flash.display.StageAlign;
+ import flash.display.StageQuality;
+ import flash.display.StageScaleMode;
+ import flash.events.Event;
+ import org.apache.royale.events.utils.MouseEventConverter;
+ }
+
+ COMPILE::JS {
+ import org.apache.royale.core.UIBase;
+ }
+
+ //--------------------------------------
+ // Events
+ //--------------------------------------
+
+ /**
+ * Dispatched at startup. Attributes and sub-instances of
+ * the MXML document have been created and assigned.
+ * The component lifecycle is different
+ * than the Flex SDK. There is no creationComplete event.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="initialize", type="org.apache.royale.events.Event")]
+
+ /**
+ * Dispatched at startup before the instances get created.
+ * Beads can call preventDefault and defer initialization.
+ * This event will be dispatched on every frame until no
+ * listeners call preventDefault(), then the initialize()
+ * method will be called.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="preinitialize", type="org.apache.royale.events.Event")]
+
+ /**
+ * Dispatched at startup after the initial view has been
+ * put on the display list. This event is sent before
+ * applicationComplete is dispatched.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="viewChanged", type="org.apache.royale.events.Event")]
+
+ /**
+ * Dispatched at startup after the initial view has been
+ * put on the display list.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="applicationComplete", type="org.apache.royale.events.Event")]
+
+ /**
+ * Jewel Application holds specific Jewel need in a Royale Application.
*
- * This class extends the standard Application and sets up the
- * SimpleCSSValuesImpl (implementation) for convenience.
- *
+ * 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.
+ * The Application class is the main class and entry point for a Royale
+ * application. This Application class is different than the
+ * Flex SDK's mx:Application or spark:Application in that it does not contain
+ * user interface elements. Those UI elements go in the views (ViewBase). This
+ * Application class expects there to be a main model, a controller, and
+ * an initial view.
+ *
+ * @see ViewBase
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class Application extends ApplicationBase implements IStrand, IParent, IEventDispatcher, IInitialViewApplication, IPopUpHost, IRenderedObject
+ {
+ /**
+ * Constructor.
*
- * <inject_html>
- * <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
- * </inject_html>
- *
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.2
+ * @productversion Royale 0.9.4
*/
- public function Application()
- {
- super();
-
- this.valuesImpl = new SimpleCSSValuesImpl();
+ public function Application()
+ {
+ super();
- // this a is temp solution until we get a better way to get a reference to Application
- //topLevelApplication = this;
- }
+ COMPILE::SWF {
+ if (stage)
+ {
+ stage.align = StageAlign.TOP_LEFT;
+ stage.scaleMode = StageScaleMode.NO_SCALE;
+ // should be opt-in
+ //stage.quality = StageQuality.HIGH_16X16_LINEAR;
+ }
+
+ loaderInfo.addEventListener(flash.events.Event.INIT, initHandler);
+ }
+ COMPILE::JS {
+ element = document.getElementsByTagName('body')[0];
+ element.className = 'Application';
+ }
+
+ this.valuesImpl = new SimpleCSSValuesImpl();
+ }
+
+ protected var instanceParent:IParent = null;
+
+ COMPILE::SWF
+ private function initHandler(event:flash.events.Event):void
+ {
+ if (model is IBead) addBead(model as IBead);
+ if (controller is IBead) addBead(controller as IBead);
+
+ MouseEventConverter.setupAllConverters(stage);
+
+ for each (var bead:IBead in beads)
+ addBead(bead);
+
+ dispatchEvent(new org.apache.royale.events.Event("beadsAdded"));
+
+ if (dispatchEvent(new org.apache.royale.events.Event("preinitialize", false, true)))
+ initialize();
+ else
+ addEventListener(flash.events.Event.ENTER_FRAME, enterFrameHandler);
+
+ }
+
+ COMPILE::SWF
+ private function enterFrameHandler(event:flash.events.Event):void
+ {
+ if (dispatchEvent(new org.apache.royale.events.Event("preinitialize", false, true)))
+ {
+ removeEventListener(flash.events.Event.ENTER_FRAME, enterFrameHandler);
+ initialize();
+ }
+ }
+
+ /**
+ * This method gets called when all preinitialize handlers
+ * no longer call preventDefault();
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ COMPILE::SWF
+ protected function initialize():void
+ {
+
+ MXMLDataInterpreter.generateMXMLInstances(this, instanceParent, MXMLDescriptor);
+
+ dispatchEvent(new org.apache.royale.events.Event("initialize"));
+
+ if (initialView)
+ {
+ initialView.applicationModel = model;
+ this.addElement(initialView);
+ // if someone has installed a resize listener, fake an event to run it now
+ if (stage.hasEventListener("resize"))
+ stage.dispatchEvent(new flash.events.Event("resize"));
+ else if (initialView is ILayoutChild)
+ {
+ var ilc:ILayoutChild = initialView as ILayoutChild;
+ // otherwise, size once like this
+ if (!isNaN(ilc.percentWidth) && !isNaN(ilc.percentHeight))
+ ilc.setWidthAndHeight(stage.stageWidth, stage.stageHeight, true);
+ else if (!isNaN(ilc.percentWidth))
+ ilc.setWidth(stage.stageWidth);
+ else if (!isNaN(ilc.percentHeight))
+ ilc.setHeight(stage.stageHeight);
+ }
+ var bgColor:Object = ValuesManager.valuesImpl.getValue(this, "background-color");
+ if (bgColor != null)
+ {
+ var backgroundColor:uint = ValuesManager.valuesImpl.convertColor(bgColor);
+ graphics.beginFill(backgroundColor);
+ graphics.drawRect(0, 0, initialView.width, initialView.height);
+ graphics.endFill();
+ }
+ dispatchEvent(new org.apache.royale.events.Event("viewChanged"));
+ }
+ dispatchEvent(new org.apache.royale.events.Event("applicationComplete"));
+ }
+
+ /**
+ * The org.apache.royale.core.IValuesImpl that will
+ * determine the default values and other values
+ * for the application. The most common choice
+ * is org.apache.royale.core.SimpleCSSValuesImpl.
+ *
+ * @see org.apache.royale.core.SimpleCSSValuesImpl
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function set valuesImpl(value:IValuesImpl):void
+ {
+ ValuesManager.valuesImpl = value;
+ ValuesManager.valuesImpl.init(this);
+ }
+
+ private var _initialView:IApplicationView;
+ /**
+ * The initial view.
+ *
+ * @see org.apache.royale.core.ViewBase
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get initialView():IApplicationView
+ {
+ return _initialView;
+ }
+ public function set initialView(value:IApplicationView):void
+ {
+ _initialView = value;
+ }
+
+ /**
+ * The data model (for the initial view).
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Bindable("__NoChangeEvent__")]
+ COMPILE::SWF
+ public var model:Object;
+
+ COMPILE::JS
+ private var _model:Object;
+
+ /**
+ * The data model (for the initial view).
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Bindable("__NoChangeEvent__")]
+ COMPILE::JS
+ override public function get model():Object
+ {
+ return _model;
+ }
+
+ /**
+ * @private
+ */
+ [Bindable("__NoChangeEvent__")]
+ COMPILE::JS
+ override public function set model(value:Object):void
+ {
+ _model = value;
+ }
+
+ private var _controller:Object;
+
+ /**
+ * The controller. The controller typically watches
+ * the UI for events and updates the model accordingly.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Bindable("__NoChangeEvent__")]
+ public function get controller():Object
+ {
+ return _controller;
+ }
+
+ /**
+ * @private
+ */
+ [Bindable("__NoChangeEvent__")]
+ public function set controller(value:Object):void
+ {
+ _controller = value;
+ }
+
+ /**
+ * Application can host popups but they will be in the layout, if any
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get popUpParent():IParent
+ {
+ return this;
+ }
+
+ /**
+ * An array of data that describes the MXML attributes
+ * and tags in an MXML document. This data is usually
+ * decoded by an MXMLDataInterpreter
+ *
+ * @see org.apache.royale.utils.MXMLDataInterpreter
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get MXMLDescriptor():Array
+ {
+ return null;
+ }
+
+ /**
+ * An method called by the compiler's generated
+ * code to kick off the setting of MXML attribute
+ * values and instantiation of child tags.
+ *
+ * The call has to be made in the generated code
+ * in order to ensure that the constructors have
+ * completed first.
+ *
+ * @param data The encoded data representing the
+ * MXML attributes.
+ *
+ * @see org.apache.royale.utils.MXMLDataInterpreter
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function generateMXMLAttributes(data:Array):void
+ {
+ // move the initialView to be the last thing
+ // instantiated so all other properties
+ // are set up first. This more closely mimics the
+ // Flex timing
+ var propCount:int = data[0];
+ var n:int = data.length;
+ for (var i:int = 1; i < n; i += 3)
+ {
+ if (data[i] == "initialView")
+ {
+ var initialViewArray:Array = data.splice(i, 3);
+ var offset:int = (propCount - 1) * 3 + 1;
+ data.splice(offset, 0, initialViewArray[0], initialViewArray[1], initialViewArray[2]);
+ }
+ }
+ MXMLDataInterpreter.generateMXMLProperties(this, data);
+ }
+
+ /**
+ * The array property that is used to add additional
+ * beads to an MXML tag. From ActionScript, just
+ * call addBead directly.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ *
+ * @royalesuppresspublicvarwarning
+ */
+ public var beads:Array;
+
+ COMPILE::SWF
+ private var _beads:Vector.<IBead>;
+
+ /**
+ * @copy org.apache.royale.core.IStrand#addBead()
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ COMPILE::SWF
+ public function addBead(bead:IBead):void
+ {
+ if (!_beads)
+ _beads = new Vector.<IBead>;
+ _beads.push(bead);
+ bead.strand = this;
+ }
+
+ /**
+ * @copy org.apache.royale.core.IStrand#getBeadByType()
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ COMPILE::SWF
+ public function getBeadByType(classOrInterface:Class):IBead
+ {
+ for each (var bead:IBead in _beads)
+ {
+ if (bead is classOrInterface)
+ return bead;
+ }
+ return null;
+ }
+
+ /**
+ * @copy org.apache.royale.core.IStrand#removeBead()
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ COMPILE::SWF
+ public function removeBead(value:IBead):IBead
+ {
+ var n:int = _beads.length;
+ for (var i:int = 0; i < n; i++)
+ {
+ var bead:IBead = _beads[i];
+ if (bead == value)
+ {
+ _beads.splice(i, 1);
+ return bead;
+ }
+ }
+ return null;
+ }
+
+ /**
+ * @copy org.apache.royale.core.IParent#addElement()
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IUIBase
+ * @royaleignorecoercion HTMLElement
+ */
+ public function addElement(c:IChild, dispatchEvent:Boolean = true):void
+ {
+ COMPILE::SWF {
+ if (c is IUIBase)
+ {
+ if (c is IRenderedObject)
+ addChild(IRenderedObject(c).$displayObject);
+ else
+ addChild(c as DisplayObject);
+ IUIBase(c).addedToParent();
+ }
+ else
+ addChild(c as DisplayObject);
+ }
+ COMPILE::JS {
+ this.element.appendChild(c.element as HTMLElement);
+ (c as IUIBase).addedToParent();
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.IParent#addElementAt()
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IUIBase
+ */
+ public function addElementAt(c:IChild, index:int, dispatchEvent:Boolean = true):void
+ {
+ COMPILE::SWF {
+ if (c is IUIBase)
+ {
+ if (c is IRenderedObject)
+ addChildAt(IRenderedObject(c).$displayObject, index);
+ else
+ addChildAt(c as DisplayObject, index);
+ IUIBase(c).addedToParent();
+ }
+ else
+ addChildAt(c as DisplayObject, index);
+ }
+ COMPILE::JS {
+ var children:NodeList = internalChildren();
+ if (index >= children.length)
+ addElement(c);
+ else
+ {
+ element.insertBefore(c.positioner,
+ children[index]);
+ (c as IUIBase).addedToParent();
+ }
+
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.IParent#getElementAt()
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function getElementAt(index:int):IChild
+ {
+ COMPILE::SWF {
+ return getChildAt(index) as IChild;
+ }
+ COMPILE::JS {
+ var children:NodeList = internalChildren();
+ return children[index].royale_wrapper;
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.IParent#getElementIndex()
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function getElementIndex(c:IChild):int
+ {
+ COMPILE::SWF {
+ if (c is IRenderedObject)
+ return getChildIndex(IRenderedObject(c).$displayObject);
+
+ return getChildIndex(c as DisplayObject);
+ }
+ COMPILE::JS {
+ var children:NodeList = internalChildren();
+ var n:int = children.length;
+ for (var i:int = 0; i < n; i++)
+ {
+ if (children[i] == c.element)
+ return i;
+ }
+ return -1;
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.IParent#removeElement()
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion HTMLElement
+ */
+ public function removeElement(c:IChild, dispatchEvent:Boolean = true):void
+ {
+ COMPILE::SWF {
+ if (c is IRenderedObject)
+ {
+ removeChild(IRenderedObject(c).$displayObject);
+ }
+ else
+ removeChild(c as DisplayObject);
+ }
+ COMPILE::JS {
+ element.removeChild(c.element as HTMLElement);
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.IParent#numElements
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get numElements():int
+ {
+ COMPILE::SWF {
+ return numChildren;
+ }
+ COMPILE::JS {
+ var children:NodeList = internalChildren();
+ return children.length;
+ }
+ }
+
+ /**
+ * @return {Object} The array of children.
+ */
+ COMPILE::JS
+ protected function internalChildren():NodeList
+ {
+ return element.childNodes;
+ };
+
+ COMPILE::JS
+ protected var startupTimer:Timer;
/**
- * 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;
- }
+ * @royaleignorecoercion org.apache.royale.core.IBead
+ */
+ COMPILE::JS
+ public function start():void
+ {
+ if (model is IBead) addBead(model as IBead);
+ if (controller is IBead) addBead(controller as IBead);
+
+ for (var index:int in beads) {
+ addBead(beads[index]);
+ }
+
+ dispatchEvent(new org.apache.royale.events.Event("beadsAdded"));
+
+ if (dispatchEvent(new org.apache.royale.events.Event("preinitialize", false, true)))
+ initialize();
+ else {
+ startupTimer = new Timer(34, 0);
+ startupTimer.addEventListener("timer", handleStartupTimer);
+ startupTimer.start();
+ }
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::JS
+ protected function handleStartupTimer(event:Event):void
+ {
+ if (dispatchEvent(new org.apache.royale.events.Event("preinitialize", false, true)))
+ {
+ startupTimer.stop();
+ initialize();
+ }
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IBead
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ COMPILE::JS
+ protected function initialize():void
+ {
+ MXMLDataInterpreter.generateMXMLInstances(this, instanceParent, MXMLDescriptor);
+
+ dispatchEvent('initialize');
+
+ if (initialView)
+ {
+ initialView.applicationModel = model;
+ addElement(initialView);
+
+ var baseView:UIBase = initialView as UIBase;
+ if (!isNaN(baseView.percentWidth) || !isNaN(baseView.percentHeight)) {
+ this.element.style.height = window.innerHeight.toString() + 'px';
+ this.element.style.width = window.innerWidth.toString() + 'px';
+ this.initialView.dispatchEvent('sizeChanged'); // kick off layout if % sizes
+ }
+
+ dispatchEvent(new org.apache.royale.events.Event("viewChanged"));
+ }
+ dispatchEvent(new org.apache.royale.events.Event("applicationComplete"));
+ }
+
+ COMPILE::SWF
+ public function get $displayObject():DisplayObject
+ {
+ return this;
+ }
+
+ COMPILE::SWF
+ override public function set width(value:Number):void
+ {
+ // just eat this.
+ // The stageWidth will be set by SWF metadata.
+ // Setting this directly doesn't do anything
+ }
+
+ COMPILE::SWF
+ override public function set height(value:Number):void
+ {
+ // just eat this.
+ // The stageWidth will be set by SWF metadata.
+ // Setting this directly doesn't do anything
+ }
+
+ }
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationMainContent.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationMainContent.as
new file mode 100644
index 0000000..fe70e1c
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationMainContent.as
@@ -0,0 +1,128 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.IActivable;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The ApplicationMainContent class is a Container component capable of parenting
+ * the other organized content that implements IActivable interface
+ * (i.e, a SectionContent)
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class ApplicationMainContent extends Container
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ApplicationMainContent()
+ {
+ super();
+
+ typeNames = "jewel main";
+ }
+
+ private var _hasTopAppBar:Boolean;
+
+ /**
+ * a boolean flag to indicate if the container needs to make some room
+ * for a TopAppBar so content doesn't be hide
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get hasTopAppBar():Boolean
+ {
+ return _hasTopAppBar;
+ }
+
+ public function set hasTopAppBar(value:Boolean):void
+ {
+ if (_hasTopAppBar != value)
+ {
+ _hasTopAppBar = value;
+
+ COMPILE::JS
+ {
+ toggleClass("has-topappbar", _hasTopAppBar);
+ }
+ }
+ }
+
+ /**
+ * shows a concrete content and hides the rest
+ *
+ * @param id, the id of the container to show
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function showContent(id:String):void
+ {
+ try
+ {
+ for (var i:int = 0; i < numElements; i++)
+ {
+ var content:IActivable = getElementAt(i) as IActivable;
+
+ if(content.id == id)
+ {
+ content.isActive = true;
+ }
+ else
+ {
+ content.isActive = false;
+ }
+ }
+ }
+ catch (error:Error)
+ {
+ throw new Error ("One or more content in ApplicationMainContent is not implementing IActivable interface.");
+ }
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this,'main');
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationResponsiveView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationResponsiveView.as
new file mode 100644
index 0000000..405d17c
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ApplicationResponsiveView.as
@@ -0,0 +1,100 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.IApplicationView;
+ import org.apache.royale.core.IParent;
+ import org.apache.royale.core.IPopUpHost;
+ import org.apache.royale.events.Event;
+ // import org.apache.royale.jewel.beads.layouts.VerticalLayout;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ /**
+ * The ApplicationResponsiveView class is the main Container component capable of parenting other
+ * components in an Application
+ * It normaly can host a TopAppBar, a Drawer and a Container with other organized content for
+ * navigation
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class ApplicationResponsiveView extends Group implements IPopUpHost, IApplicationView
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ApplicationResponsiveView()
+ {
+ super();
+
+ typeNames = "applicationResponsiveView"; //+ VerticalLayout.LAYOUT_TYPE_NAMES;
+ }
+
+ private var _applicationModel:Object;
+
+ [Bindable("modelChanged")]
+ /**
+ * A reference to the Application's model. Usually,
+ * a view is displaying the main model for an
+ * application.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get applicationModel():Object
+ {
+ return _applicationModel;
+ }
+
+ /**
+ * @private
+ */
+ public function set applicationModel(value:Object):void
+ {
+ _applicationModel = value;
+ dispatchEvent(new Event("modelChanged"));
+ }
+
+ /**
+ * ViewBase can host popups but they will be in the layout, if any
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get popUpParent():IParent
+ {
+ return this;
+ }
+ }
+}
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 ba25d87..640b396 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
@@ -18,17 +18,323 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
- import org.apache.royale.html.Button;
import org.apache.royale.utils.ClassSelectorList;
+ import org.apache.royale.core.ITextModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.events.IEventDispatcher;
+
+ COMPILE::SWF
+ {
+ import org.apache.royale.core.UIButtonBase;
+ import org.apache.royale.utils.IClassSelectorListSupport;
+ }
COMPILE::JS
{
import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.core.StyledUIBase;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ //--------------------------------------
+ // Events
+ //--------------------------------------
+
+ /**
+ * Dispatched when the user clicks on a button.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="click", type="org.apache.royale.events.MouseEvent")]
+
+ /**
+ * Set a different class for rollOver events so that
+ * there aren't dependencies on the flash classes
+ * on the JS side.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="rollOver", type="org.apache.royale.events.MouseEvent")]
+
+ /**
+ * Set a different class for rollOut events so that
+ * there aren't dependencies on the flash classes
+ * on the JS side.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="rollOut", type="org.apache.royale.events.MouseEvent")]
+
+ /**
+ * Set a different class for mouseDown events so that
+ * there aren't dependencies on the flash classes
+ * on the JS side.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="mouseDown", type="org.apache.royale.events.MouseEvent")]
+
+ /**
+ * Set a different class for mouseUp events so that
+ * there aren't dependencies on the flash classes
+ * on the JS side.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="mouseUp", type="org.apache.royale.events.MouseEvent")]
+
+ /**
+ * Set a different class for mouseMove events so that
+ * there aren't dependencies on the flash classes
+ * on the JS side.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="mouseMove", type="org.apache.royale.events.MouseEvent")]
+
+ /**
+ * Set a different class for mouseOut events so that
+ * there aren't dependencies on the flash classes
+ * on the JS side.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="mouseOut", type="org.apache.royale.events.MouseEvent")]
+
+ /**
+ * Set a different class for mouseOver events so that
+ * there aren't dependencies on the flash classes
+ * on the JS side.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="mouseOver", type="org.apache.royale.events.MouseEvent")]
+ /**
+ * Set a different class for mouseWheel events so that
+ * there aren't dependencies on the flash classes
+ * on the JS side.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="mouseWheel", type="org.apache.royale.events.MouseEvent")]
+
+ /**
+ * Set a different class for doubleClick events so that
+ * there aren't dependencies on the flash classes
+ * on the JS side.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="doubleClick", type="org.apache.royale.events.MouseEvent")]
+
+
+ [DefaultProperty("text")]
+
+ /**
+ * The ButtonBase class is the base class for Button.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ COMPILE::SWF
+ public class Button extends UIButtonBase implements IStrand, IEventDispatcher, IUIBase, IClassSelectorListSupport
+ {
+ public static const PRIMARY:String = "primary";
+ public static const SECONDARY:String = "secondary";
+ public static const EMPHASIZED:String = "emphasized";
+
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function Button()
+ {
+ super();
+
+ classSelectorList = new ClassSelectorList(this);
+ typeNames = "jewel button";
+ }
+
+ protected var classSelectorList:ClassSelectorList;
+
+ /**
+ * @copy org.apache.royale.html.Label#text
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get text():String
+ {
+ return ITextModel(model).text;
+ }
+
+ /**
+ * @private
+ */
+ public function set text(value:String):void
+ {
+ ITextModel(model).text = value;
+ }
+
+ /**
+ * @copy org.apache.royale.html.Label#html
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get html():String
+ {
+ return ITextModel(model).html;
+ }
+
+ /**
+ * @private
+ */
+ public function set html(value:String):void
+ {
+ ITextModel(model).html = value;
+ }
+
+ private var _emphasis:String;
+
+ /**
+ * Activate "emphasis" effect selector. Applies emphasis color display effect.
+ * Possible values are constants (PRIMARY, SECONDARY, EMPHASIZED)
+ * Colors are defined in royale-jewel.css
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get emphasis():String
+ {
+ return _emphasis;
+ }
+
+ public function set emphasis(value:String):void
+ {
+ if (_emphasis != value)
+ {
+ if(_emphasis)
+ {
+ classSelectorList.toggle(_emphasis, false);
+ }
+ _emphasis = value;
+
+ classSelectorList.toggle(_emphasis, value);
+ }
+ }
+
+ /**
+ * Add a class selector to the list.
+ *
+ * @param name Name of selector to add.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function addClass(name:String):void
+ {
+ // To implement.need to implement this interface or extensions will not compile
+ }
+
+ /**
+ * Removes a class selector from the list.
+ *
+ * @param name Name of selector to remove.
+ *
+ * @royaleignorecoercion HTMLElement
+ * @royaleignorecoercion DOMTokenList
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function removeClass(name:String):void
+ {
+ // To implement.need to implement this interface or extensions will not compile
+ }
+
+ /**
+ * Add or remove a class selector to/from the list.
+ *
+ * @param name Name of selector to add or remove.
+ * @param value True to add, False to remove.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function toggleClass(name:String, value:Boolean):void
+ {
+ // To implement.need to implement this interface or extensions will not compile
+ }
+
+ /**
+ * Search for the name in the element class list
+ *
+ * @param name Name of selector to find.
+ * @return return true if the name is found or false otherwise.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function containsClass(name:String):Boolean
+ {
+ return false;
+ }
}
/**
- * The Button class is a simple button. Use TextButton for
- * buttons that should show text. This is the lightest weight
+ * The Button class that should show text. This is the lightest weight
* button used for non-text buttons like the arrow buttons
* in a Scrollbar or NumericStepper.
*
@@ -43,114 +349,120 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
- public class Button extends org.apache.royale.html.Button
- {
+ COMPILE::JS
+ public class Button extends StyledUIBase implements IStrand, IEventDispatcher, IUIBase
+ {
+ public static const PRIMARY:String = "primary";
+ public static const SECONDARY:String = "secondary";
+ public static const EMPHASIZED:String = "emphasized";
+
/**
* Constructor.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function Button()
{
super();
-
- classSelectorList = new ClassSelectorList(this);
typeNames = "jewel button";
}
-
- protected var classSelectorList:ClassSelectorList;
-
- private var _primary:Boolean = false;
/**
- * A boolean flag to activate "primary" effect selector.
- * Applies primary color display effect.
+ * @copy org.apache.royale.html.Label#text
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get text():String
+ {
+ return element.innerHTML;
+ }
+
+ /**
+ * @private
+ */
+ public function set text(value:String):void
+ {
+ 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.9.4
+ */
+ public function get html():String
+ {
+ return element.innerHTML;
+ }
+
+ /**
+ * @private
+ */
+ public function set html(value:String):void
+ {
+ this.element.innerHTML = value;
+ this.dispatchEvent('textChange');
+ }
+
+ private var _emphasis:String;
+
+ /**
+ * Activate "emphasis" effect selector. Applies emphasis color display effect.
+ * Possible values are constants (PRIMARY, SECONDARY, EMPHASIZED)
* Colors are defined in royale-jewel.css
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.2
+ * @productversion Royale 0.9.4
*/
- public function get primary():Boolean
+ public function get emphasis():String
{
- return _primary;
+ return _emphasis;
}
- public function set primary(value:Boolean):void
+ public function set emphasis(value:String):void
{
- if (_primary != value)
+ if (_emphasis != value)
{
- _primary = value;
+ if(_emphasis)
+ {
+ toggleClass(_emphasis, false);
+ }
+ _emphasis = value;
- classSelectorList.toggle("primary", value);
+ toggleClass(_emphasis, value);
}
}
-
- 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
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override protected function createElement():WrappedHTMLElement
{
- return _secondary;
+ addElementToWrapper(this, 'button');
+ element.setAttribute('type', 'button');
+ /* AJH comment out until we figure out why it is needed
+ if (org.apache.royale.core.ValuesManager.valuesImpl.getValue) {
+ var impl:Object = org.apache.royale.core.ValuesManager.valuesImpl.
+ getValue(this, 'iStatesImpl');
+ }*/
+ positioner = element;
+
+
+ return element;
}
-
- public function set secondary(value:Boolean):void
- {
- if (_secondary != value)
- {
- _secondary = value;
-
- classSelectorList.toggle("secondary", value);
- }
- }
-
- 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;
-
- classSelectorList.toggle("emphasized", value);
- }
- }
-
- COMPILE::JS
- override protected function setClassName(value:String):void
- {
- classSelectorList.addNames(value);
- }
-
}
}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Card.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Card.as
new file mode 100644
index 0000000..223e3e6
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Card.as
@@ -0,0 +1,103 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.Group;
+ import org.apache.royale.core.IBeadLayout;
+
+ /**
+ * The Card class is a container that surronds other components.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class Card extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function Card()
+ {
+ super();
+
+ typeNames = "jewel card";
+ }
+
+ // public function get gap():Boolean
+ // {
+ // return layout.gap;
+ // }
+
+ // public function set gap(value:Boolean):void
+ // {
+ // typeNames = StringUtil.removeWord(typeNames, " gap");
+ // typeNames += " gap";
+
+ // COMPILE::JS
+ // {
+ // if (parent)
+ // setClassName(computeFinalClassNames());
+ // }
+
+ // layout.gap = value;
+ // }
+
+ //protected var _shadow:Number = 0;
+ /**
+ * A boolean flag to activate "shadow-Xdp" effect selector.
+ * Assigns variable shadow depths (0, 2, 3, 4, 6, 8, or 16) to card
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ // public function get shadow():Number
+ // {
+ // return _shadow;
+ // }
+
+ // public function set shadow(value:Number):void
+ // {
+ // if (_shadow != value)
+ // {
+ // COMPILE::JS
+ // {
+ // if (value == 2 || value == 3 || value == 4 || value == 6 || value == 8 || value == 16)
+ // {
+ // var classVal:String = "shadow-" + _shadow + "dp";
+ // classSelectorList.remove(classVal);
+
+ // classVal = "shadow-" + value + "dp";
+ // classSelectorList.add(classVal);
+
+ // _shadow = value;
+ // }
+ // }
+ // }
+ // }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/CheckBox.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/CheckBox.as
index b52861f..2380089 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/CheckBox.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/CheckBox.as
@@ -18,18 +18,133 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
- import org.apache.royale.html.CheckBox;
import org.apache.royale.core.IToggleButtonModel;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.supportClasses.checkbox.CheckBoxIcon;
import org.apache.royale.utils.ClassSelectorList;
+ COMPILE::SWF
+ {
+ import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.core.UIButtonBase;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.ISelectable;
+ }
+
COMPILE::JS
{
import org.apache.royale.core.WrappedHTMLElement;
- import org.apache.royale.events.Event;
import org.apache.royale.html.util.addElementToWrapper;
- import org.apache.royale.utils.cssclasslist.addStyles;
+ import org.apache.royale.core.StyledUIBase;
}
+ //--------------------------------------
+ // Events
+ //--------------------------------------
+
+ /**
+ * Dispatched when the user checks or un-checks the CheckBox.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="change", type="org.apache.royale.events.Event")]
+
+ /**
+ * The CheckBox class implements the common user interface
+ * control. The CheckBox includes its text label.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ COMPILE::SWF
+ public class CheckBox extends UIButtonBase implements IStrand, ISelectable
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function CheckBox()
+ {
+ super();
+
+ classSelectorList = new ClassSelectorList(this);
+
+ addEventListener(org.apache.royale.events.MouseEvent.CLICK, internalMouseHandler);
+ }
+
+ protected var classSelectorList:ClassSelectorList;
+
+ /**
+ * The text label for the CheckBox.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get text():String
+ {
+ return IToggleButtonModel(model).text;
+ }
+
+ /**
+ * @private
+ */
+ public function set text(value:String):void
+ {
+ IToggleButtonModel(model).text = value;
+ }
+
+ [Bindable("change")]
+ /**
+ * <code>true</code> if the check mark is displayed.
+ *
+ * @default false
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get selected():Boolean
+ {
+ return IToggleButtonModel(model).selected;
+ }
+
+ /**
+ * @private
+ */
+ public function set selected(value:Boolean):void
+ {
+ IToggleButtonModel(model).selected = value;
+ }
+
+ private function internalMouseHandler(event:org.apache.royale.events.MouseEvent) : void
+ {
+ selected = !selected;
+ dispatchEvent(new Event(Event.CHANGE));
+ }
+ }
+
+ /**
+ * Dispatched when the user checks or un-checks the CheckBox.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="change", type="org.apache.royale.events.Event")]
+
/**
* The CheckBox class provides a Jewel UI-like appearance for a CheckBox.
*
@@ -43,33 +158,30 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
- public class CheckBox extends org.apache.royale.html.CheckBox
- {
+ COMPILE::JS
+ public class CheckBox extends StyledUIBase
+ {
/**
* Constructor.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function CheckBox()
{
super();
- classSelectorList = new ClassSelectorList(this);
typeNames = "jewel checkbox";
}
- protected var classSelectorList:ClassSelectorList;
-
- COMPILE::JS
- override protected function setClassName(value:String):void
- {
- classSelectorList.addNames(value);
- }
+ private var _label:WrappedHTMLElement;
+ private var _icon:CheckBoxIcon;
+
+ private static var _checkNumber:Number = 0;
COMPILE::JS
protected var input:HTMLInputElement;
@@ -79,21 +191,6 @@
COMPILE::JS
protected var label:HTMLLabelElement;
-
- COMPILE::JS
- private var _positioner:WrappedHTMLElement;
-
- COMPILE::JS
- override public function get positioner():WrappedHTMLElement
- {
- return _positioner;
- }
-
- COMPILE::JS
- override public function set positioner(value:WrappedHTMLElement):void
- {
- _positioner = value;
- }
/**
* @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
@@ -115,7 +212,7 @@
label.appendChild(checkbox);
positioner = label as WrappedHTMLElement;
- _positioner.royale_wrapper = this;
+ positioner.royale_wrapper = this;
//(input as WrappedHTMLElement).royale_wrapper = this;
//(checkbox as WrappedHTMLElement).royale_wrapper = this;
return element;
@@ -129,9 +226,9 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.8
+ * @productversion Royale 0.9.4
*/
- override public function get text():String
+ public function get text():String
{
COMPILE::SWF
{
@@ -146,7 +243,7 @@
/**
* @private
*/
- override public function set text(value:String):void
+ public function set text(value:String):void
{
COMPILE::SWF
{
@@ -209,9 +306,10 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.8
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion HTMLInputElement
*/
- override public function get selected():Boolean
+ public function get selected():Boolean
{
COMPILE::SWF
{
@@ -224,9 +322,9 @@
}
/**
- * @private
+ * @royaleignorecoercion HTMLInputElement
*/
- override public function set selected(value:Boolean):void
+ public function set selected(value:Boolean):void
{
COMPILE::SWF
{
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ComboBox.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ComboBox.as
new file mode 100644
index 0000000..d639b3f
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ComboBox.as
@@ -0,0 +1,181 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.StyledUIBase;
+ import org.apache.royale.core.IComboBoxModel;
+ import org.apache.royale.core.ISelectionModel;
+ import org.apache.royale.core.IDataProviderModel;
+ import org.apache.royale.core.IListPresentationModel;
+ import org.apache.royale.jewel.beads.models.ListPresentationModel;
+
+ //--------------------------------------
+ // Events
+ //--------------------------------------
+
+ /**
+ * Dispatched when the user selects an item.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="change", type="org.apache.royale.events.Event")]
+
+ /**
+ * The ComboBox class is a component that displays an input field and
+ * pop-up List with selections. Selecting an item from the pop-up List
+ * places that item into the input field of the ComboBox. The ComboBox
+ * uses the following bead types:
+ *
+ * org.apache.royale.core.IBeadModel: the data model, which includes the dataProvider, selectedItem, and
+ * so forth.
+ * org.apache.royale.core.IBeadView: the bead that constructs the visual parts of the component.
+ * org.apache.royale.core.IBeadController: the bead that handles input and output.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class ComboBox extends StyledUIBase
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ComboBox()
+ {
+ super();
+
+ typeNames = "jewel combobox";
+ }
+
+ /**
+ * The name of field within the data used for display. Each item of the
+ * data should have a property with this name.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+ */
+ public function get labelField():String
+ {
+ return IDataProviderModel(model).labelField;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+ */
+ public function set labelField(value:String):void
+ {
+ IDataProviderModel(model).labelField = value;
+ }
+
+ /**
+ * The data for display by the ComboBox.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+ */
+ public function get dataProvider():Object
+ {
+ return IDataProviderModel(model).dataProvider;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+ */
+ public function set dataProvider(value:Object):void
+ {
+ IDataProviderModel(model).dataProvider = value;
+ }
+
+ [Bindable("change")]
+ /**
+ * The index of the currently selected item. Changing this item changes
+ * the selectedItem value.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.ISelectionModel
+ */
+ public function get selectedIndex():int
+ {
+ return ISelectionModel(model).selectedIndex;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.ISelectionModel
+ */
+ public function set selectedIndex(value:int):void
+ {
+ ISelectionModel(model).selectedIndex = value;
+ }
+
+ [Bindable("change")]
+ /**
+ * The item currently selected. Changing this value also
+ * changes the selectedIndex property.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.ISelectionModel
+ */
+ public function get selectedItem():Object
+ {
+ return ISelectionModel(model).selectedItem;
+ }
+ public function set selectedItem(value:Object):void
+ {
+ ISelectionModel(model).selectedItem = value;
+ }
+
+ /**
+ * The presentation model for the list.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IListPresentationModel
+ */
+ public function get presentationModel():IListPresentationModel
+ {
+ var presModel:IListPresentationModel = getBeadByType(IListPresentationModel) as IListPresentationModel;
+ if (presModel == null) {
+ presModel = new ListPresentationModel();
+ addBead(presModel);
+ }
+ return presModel;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Container.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Container.as
new file mode 100644
index 0000000..5cc3727
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Container.as
@@ -0,0 +1,254 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.ContainerBase;
+ import org.apache.royale.core.IMXMLDocument;
+ import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.utils.MXMLDataInterpreter;
+ import org.apache.royale.utils.ClassSelectorList;
+ import org.apache.royale.utils.IClassSelectorListSupport;
+
+ /**
+ * The default property uses when additional MXML content appears within an element's
+ * definition in an MXML file.
+ */
+ [DefaultProperty("mxmlContent")]
+
+
+ /**
+ * The Container class implements a basic container for
+ * other controls and containers. The position and size
+ * of the children are determined by a layout while the size of
+ * a Container can either be determined by its children or by
+ * specifying an exact size in pixels or as a percentage of the
+ * parent element.
+ *
+ * This Container does not have a built-in scroll bar or clipping of
+ * its content should the content exceed the Container's boundaries. To
+ * have scroll bars and clipping, add the ScrollingView bead.
+ *
+ * While the container is relatively lightweight, it should
+ * generally not be used as the base class for other controls,
+ * even if those controls are composed of children. That's
+ * because the fundamental API of Container is to support
+ * an arbitrary set of children, and most controls only
+ * support a specific set of children.
+ *
+ * And that's one of the advantages of beads: that functionality
+ * used in a Container can also be used in a Control as long
+ * as that bead doesn't assume that its strand is a Container.
+ *
+ * For example, even though you can use a Panel to create the
+ * equivalent of an Alert control, the Alert is a
+ * control and not a Container because the Alert does not
+ * support an arbitrary set of children.
+ *
+ * @toplevel
+ * @see org.apache.royale.jewel.beads.layout
+ * @see org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class Container extends ContainerBase implements IMXMLDocument, IClassSelectorListSupport
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function Container()
+ {
+ super();
+ classSelectorList = new ClassSelectorList(this);
+ typeNames = "";
+ }
+
+ protected var classSelectorList:ClassSelectorList;
+
+ COMPILE::JS
+ override protected function setClassName(value:String):void
+ {
+ classSelectorList.addNames(value);
+ }
+
+ /**
+ * Add a class selector to the list.
+ *
+ * @param name Name of selector to add.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function addClass(name:String):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.add(name);
+ }
+ }
+
+ /**
+ * Removes a class selector from the list.
+ *
+ * @param name Name of selector to remove.
+ *
+ * @royaleignorecoercion HTMLElement
+ * @royaleignorecoercion DOMTokenList
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function removeClass(name:String):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.remove(name);
+ }
+ }
+
+ /**
+ * Add or remove a class selector to/from the list.
+ *
+ * @param name Name of selector to add or remove.
+ * @param value True to add, False to remove.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function toggleClass(name:String, value:Boolean):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.toggle(name, value);
+ }
+ }
+
+ /**
+ * Search for the name in the element class list
+ *
+ * @param name Name of selector to find.
+ * @return return true if the name is found or false otherwise.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function containsClass(name:String):Boolean
+ {
+ COMPILE::JS
+ {
+ return classSelectorList.contains(name);
+ }
+ COMPILE::SWF
+ {//not implemented
+ return false;
+ }
+ }
+
+ private var _mxmlDescriptor:Array;
+ private var _mxmlDocument:Object = this;
+ private var _initialized:Boolean;
+
+ /**
+ * @private
+ */
+ override public function addedToParent():void
+ {
+ if (!_initialized)
+ {
+ // each MXML file can also have styles in fx:Style block
+ ValuesManager.valuesImpl.init(this);
+ }
+
+ super.addedToParent();
+
+ if (!_initialized)
+ {
+ MXMLDataInterpreter.generateMXMLInstances(_mxmlDocument, this, MXMLDescriptor);
+
+ dispatchEvent(new Event("initBindings"));
+ dispatchEvent(new Event("initComplete"));
+ _initialized = true;
+
+ //?? why is this here? childrenAdded(); //?? Is this needed since MXMLDataInterpreter will have already called it
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.Application#MXMLDescriptor
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get MXMLDescriptor():Array
+ {
+ return _mxmlDescriptor;
+ }
+
+ /**
+ * @private
+ */
+ public function setMXMLDescriptor(document:Object, value:Array):void
+ {
+ _mxmlDocument = document;
+ _mxmlDescriptor = value;
+ }
+
+ /**
+ * @copy org.apache.royale.core.Application#generateMXMLAttributes()
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function generateMXMLAttributes(data:Array):void
+ {
+ MXMLDataInterpreter.generateMXMLProperties(this, data);
+ }
+
+ /**
+ * @copy org.apache.royale.core.ItemRendererClassFactory#mxmlContent
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ *
+ * @royalesuppresspublicvarwarning
+ */
+ public var mxmlContent:Array;
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ControlBar.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ControlBar.as
index bdfeb89..d46673f 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ControlBar.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ControlBar.as
@@ -18,7 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
- import org.apache.royale.html.Group;
+ import org.apache.royale.jewel.Group;
import org.apache.royale.core.IBeadLayout;
import org.apache.royale.core.IChrome;
import org.apache.royale.core.ValuesManager;
@@ -48,7 +48,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public class ControlBar extends Group implements IChrome
{
@@ -58,7 +58,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function ControlBar()
{
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DataContainer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DataContainer.as
new file mode 100644
index 0000000..96f6e2a
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DataContainer.as
@@ -0,0 +1,227 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.DataContainerBase;
+
+ import org.apache.royale.core.IDataProviderItemRendererMapper;
+ import org.apache.royale.core.IItemRenderer;
+ import org.apache.royale.core.IListWithPresentationModel;
+ import org.apache.royale.core.IListPresentationModel;
+ import org.apache.royale.core.IDataProviderModel;
+ import org.apache.royale.jewel.beads.models.ListPresentationModel;
+ import org.apache.royale.utils.ClassSelectorList;
+ import org.apache.royale.utils.IClassSelectorListSupport;
+
+ /**
+ * Indicates that the initialization of the list is complete.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="initComplete", type="org.apache.royale.events.Event")]
+
+ /**
+ * The DataContainer class is a component that displays multiple data items. The DataContainer uses
+ * the following bead types:
+ *
+ * org.apache.royale.core.IBeadModel: the data model, which includes the dataProvider.
+ * org.apache.royale.core.IBeadView: the bead that constructs the visual parts of the list.
+ * org.apache.royale.core.IBeadController: the bead that handles input and output.
+ * org.apache.royale.core.IBeadLayout: the bead responsible for the size and position of the itemRenderers.
+ * org.apache.royale.core.IDataProviderItemRendererMapper: the bead responsible for creating the itemRenders.
+ * org.apache.royale.core.IItemRenderer: the class or factory used to display an item in the list.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class DataContainer extends DataContainerBase implements IListWithPresentationModel, IClassSelectorListSupport
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function DataContainer()
+ {
+ super();
+ typeNames = "jewel datacontainer";
+ classSelectorList = new ClassSelectorList(this);
+ }
+
+ protected var classSelectorList:ClassSelectorList;
+
+ COMPILE::JS
+ override protected function setClassName(value:String):void
+ {
+ classSelectorList.addNames(value);
+ }
+
+ /**
+ * Add a class selector to the list.
+ *
+ * @param name Name of selector to add.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function addClass(name:String):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.add(name);
+ }
+ }
+
+ /**
+ * Removes a class selector from the list.
+ *
+ * @param name Name of selector to remove.
+ *
+ * @royaleignorecoercion HTMLElement
+ * @royaleignorecoercion DOMTokenList
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function removeClass(name:String):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.remove(name);
+ }
+ }
+
+ /**
+ * Add or remove a class selector to/from the list.
+ *
+ * @param name Name of selector to add or remove.
+ * @param value True to add, False to remove.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function toggleClass(name:String, value:Boolean):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.toggle(name, value);
+ }
+ }
+
+ /**
+ * Search for the name in the element class list
+ *
+ * @param name Name of selector to find.
+ * @return return true if the name is found or false otherwise.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function containsClass(name:String):Boolean
+ {
+ COMPILE::JS
+ {
+ return classSelectorList.contains(name);
+ }
+ COMPILE::SWF
+ {//not implemented
+ return false;
+ }
+ }
+
+ /**
+ * The name of field within the data used for display. Each item of the
+ * data should have a property with this name.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9
+ * @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+ */
+ public function get labelField():String
+ {
+ return IDataProviderModel(model).labelField;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+ */
+ public function set labelField(value:String):void
+ {
+ IDataProviderModel(model).labelField = value;
+ }
+
+ /**
+ * The data being display by the List.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9
+ * @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+ */
+ public function get dataProvider():Object
+ {
+ return IDataProviderModel(model).dataProvider;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+ */
+ public function set dataProvider(value:Object):void
+ {
+ IDataProviderModel(model).dataProvider = value;
+ }
+
+
+ /**
+ * The presentation model for the list.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9
+ * @royaleignorecoercion org.apache.royale.core.IListPresentationModel
+ */
+ public function get presentationModel():IListPresentationModel
+ {
+ var presModel:IListPresentationModel = getBeadByType(IListPresentationModel) as IListPresentationModel;
+ if (presModel == null) {
+ presModel = new ListPresentationModel();
+ addBead(presModel);
+ }
+ return presModel;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DateChooser.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DateChooser.as
new file mode 100644
index 0000000..0ed3d41
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DateChooser.as
@@ -0,0 +1,76 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.IDateChooserModel;
+ import org.apache.royale.jewel.Group;
+
+ /**
+ * The change event is dispatched when the selectedDate is changed.
+ */
+ [Event(name="change", type="org.apache.royale.events.Event")]
+
+ /**
+ * The DateChooser class is a component that displays a calendar.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class DateChooser extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function DateChooser()
+ {
+ super();
+
+ typeNames = "jewel datechooser";
+
+ // default to today
+ selectedDate = new Date();
+ }
+
+ [Bindable("selectedDateChanged")]
+ /**
+ * The currently selected date (or null if no date has been selected).
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get selectedDate():Date
+ {
+ return IDateChooserModel(model).selectedDate;
+ }
+ public function set selectedDate(value:Date):void
+ {
+ IDateChooserModel(model).selectedDate = value;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DateField.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DateField.as
new file mode 100644
index 0000000..1c90c893
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DateField.as
@@ -0,0 +1,101 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.StyledUIBase;
+ import org.apache.royale.core.IDateChooserModel;
+ import org.apache.royale.core.IFormatBead;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.utils.loadBeadFromValuesManager;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The change event is dispatched when the selectedDate is changed.
+ */
+ [Event(name="change", type="org.apache.royale.events.Event")]
+
+ /**
+ * The DateField class provides an input field where a date can be entered
+ * and a pop-up calendar control for picking a date as an alternative to
+ * the text field.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class DateField extends StyledUIBase
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function DateField()
+ {
+ super();
+
+ typeNames = "jewel datefield";
+ }
+
+ /**
+ * The method called when added to a parent. The DateField class uses
+ * this opportunity to install additional beads.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ override public function addedToParent():void
+ {
+ super.addedToParent();
+ loadBeadFromValuesManager(IFormatBead, "iFormatBead", this);
+
+ dispatchEvent(new Event("initComplete"));
+ }
+
+ [Bindable("selectedDateChanged")]
+ /**
+ * The currently selected date (or null if no date has been selected).
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get selectedDate():Date
+ {
+ return IDateChooserModel(model).selectedDate;
+ }
+ public function set selectedDate(value:Date):void
+ {
+ IDateChooserModel(model).selectedDate = value;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Divider.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Divider.as
new file mode 100644
index 0000000..8af84f6
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Divider.as
@@ -0,0 +1,62 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The Divider class is a component that shows a clear separation between
+ * two zones
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class Divider extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function Divider()
+ {
+ super();
+
+ typeNames = "jewel divider";
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this,'hr');
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as
new file mode 100644
index 0000000..4377bd1
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as
@@ -0,0 +1,194 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.drawer.DrawerBase;
+ import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.utils.StringUtil;
+
+ /**
+ * The Drawer class is a container component used for navigation
+ * can be opened with the menu icon.
+ *
+ * It can be used in float or fixed modes.
+ *
+ * float make the drawer appear over the screen without make anything change size
+ * and click outside the drawer will hide it. Usually clicking in some navigation option
+ * will hide it as well.
+ *
+ * fixed will need some place and make the other content shrink. click on navigation option
+ * in the drawer usually doesn't hide it.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class Drawer extends DrawerBase
+ {
+ public static const FLOAT:String = "float";
+ public static const FIXED:String = "fixed";
+
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function Drawer()
+ {
+ super();
+
+ // defaults to float (notice that float or fixed is needed always)
+ typeNames = "jewel drawer " + FLOAT;
+
+ addEventListener(MouseEvent.CLICK, internalMouseHandler);
+
+ // TODO (carlosrovira) handle swipe touch gesture to close drawer in mobile (only on float)
+ // addEventListener("touchstart" handleTouchStart);
+ // addEventListener("touchmove" handleTouchMove);
+ // addEventListener("touchend" handleTouchEnd);
+ }
+
+ // private function handleTouchStart(event:Event):void
+ // {
+ // }
+ // private function handleTouchMove(event:Event):void
+ // {
+ // }
+ // private function handleTouchEnd(event:Event):void
+ // {
+ // }
+
+ private function internalMouseHandler(event:MouseEvent):void
+ {
+ COMPILE::JS
+ {
+ var hostComponent:UIBase = event.target as UIBase;
+ var hostClassList:DOMTokenList = hostComponent.positioner.classList;
+ if (hostClassList.contains("drawer"))
+ {
+ close();
+ }
+ }
+ }
+
+ private var _isOpen:Boolean;
+
+ [Bindable]
+ /**
+ * Open or close the drawer
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get isOpen():Boolean
+ {
+ return _isOpen;
+ }
+
+ public function set isOpen(value:Boolean):void
+ {
+ if (_isOpen != value)
+ {
+ _isOpen = value;
+
+ toggleClass("open", _isOpen);
+
+ adjustAppScroll();
+
+ _isOpen ? dispatchEvent(new Event("openDrawer")) : dispatchEvent(new Event("closeDrawer"));
+ }
+ }
+
+ protected function adjustAppScroll():void
+ {
+ COMPILE::JS
+ {
+ //avoid scroll in html
+ if(fixed)
+ {
+ document.body.classList.remove("viewport");
+ } else
+ {
+ document.body.classList.toggle("viewport", _isOpen);
+ }
+ }
+ }
+
+ public function open():void
+ {
+ isOpen = true;
+ }
+
+ public function close():void
+ {
+ isOpen = false;
+ }
+
+ protected var _fixed:Boolean = false;
+
+ [Bindable]
+ /**
+ * A boolean flag to switch between "float" and "fixed" effect selector.
+ * Optional. Makes the drawer always fixed instead of floating.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get fixed():Boolean
+ {
+ return _fixed;
+ }
+ public function set fixed(value:Boolean):void
+ {
+ if (_fixed != value)
+ {
+ _fixed = value;
+
+ if(_fixed)
+ {
+ typeNames = StringUtil.removeWord(typeNames, " " + FLOAT);
+ typeNames += " " + FIXED;
+ }
+ else
+ {
+ typeNames = StringUtil.removeWord(typeNames, " " + FIXED);
+ typeNames += " " + FLOAT;
+ }
+
+ COMPILE::JS
+ {
+ if (parent)
+ setClassName(computeFinalClassNames());
+
+ toggleClass("open", _isOpen);
+ }
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DrawerContent.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DrawerContent.as
new file mode 100644
index 0000000..d729181
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DrawerContent.as
@@ -0,0 +1,62 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The DrawerContent class is a Container component mainly used in Drawer to hold
+ * content like navigation, icons, or text.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class DrawerContent extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function DrawerContent()
+ {
+ super();
+
+ typeNames = "jewel drawercontent"
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this,'nav');
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DrawerHeader.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DrawerHeader.as
new file mode 100644
index 0000000..7e2b1d1
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DrawerHeader.as
@@ -0,0 +1,62 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The DrawerHeader class is a Container component to hold Drawer Header
+ * content, for example a title or an Image icon logo
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class DrawerHeader extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function DrawerHeader()
+ {
+ super();
+
+ typeNames = "jewel drawerheader"
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this,'header');
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DropDownList.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DropDownList.as
index 9c7fd76..4f215e8 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DropDownList.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DropDownList.as
@@ -19,12 +19,16 @@
package org.apache.royale.jewel
{
import org.apache.royale.core.ISelectionModel;
+ import org.apache.royale.core.IDataProviderModel;
+ import org.apache.royale.core.DataContainerBase;
+ import org.apache.royale.core.IListPresentationModel;
+ import org.apache.royale.jewel.beads.models.ListPresentationModel;
+ import org.apache.royale.html.elements.Select;
COMPILE::JS
{
import goog.events;
import org.apache.royale.core.WrappedHTMLElement;
- import org.apache.royale.html.beads.models.ArraySelectionModel;
import org.apache.royale.html.util.addElementToWrapper;
}
@@ -39,7 +43,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
[Event(name="change", type="org.apache.royale.events.Event")]
@@ -60,9 +64,9 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
- public class DropDownList extends Button
+ public class DropDownList extends DataContainerBase
{
/**
* Constructor.
@@ -70,32 +74,87 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function DropDownList()
{
+ super();
typeNames = "jewel dropdownlist";
-
- COMPILE::JS
- {
- model = new ArraySelectionModel();
- }
}
+ private var _prompt:String = "";
+
/**
- * The data set to be displayed. Usually a simple
- * array of strings. A more complex component
- * would allow more complex data and data sets.
+ * The prompt for the DropDownList control.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9
- * @royaleignorecoercion org.apache.royale.core.ISelectionModel
+ * @productversion Royale 0.9.4
*/
+ public function get prompt():String
+ {
+ return _prompt;
+ }
+
+ public function set prompt(value:String):void
+ {
+ _prompt = value;
+ }
+
+ protected var _dropDown:Select;
+
+ public function get dropDown():Select
+ {
+ return _dropDown;
+ }
+
+ public function set dropDown(value:Select):void
+ {
+ _dropDown = value;
+ }
+
+ /**
+ * The name of field within the data used for display. Each item of the
+ * data should have a property with this name.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+ */
+ public function get labelField():String
+ {
+ return IDataProviderModel(model).labelField;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+ */
+ public function set labelField(value:String):void
+ {
+ IDataProviderModel(model).labelField = value;
+ }
+
+ /**
+ * The data being display by the List.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+ */
public function get dataProvider():Object
{
- return ISelectionModel(model).dataProvider;
+ return IDataProviderModel(model).dataProvider;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+ */
+ public function set dataProvider(value:Object):void
+ {
+ IDataProviderModel(model).dataProvider = value;
}
/**
@@ -104,47 +163,50 @@
* @royaleignorecoercion HTMLSelectElement
* @royaleignorecoercion org.apache.royale.core.ISelectionModel
*/
- public function set dataProvider(value:Object):void
- {
- ISelectionModel(model).dataProvider = value;
- COMPILE::JS
- {
- var dp:HTMLOptionsCollection;
- var i:int;
- var n:int;
- var opt:HTMLOptionElement;
- var dd:HTMLSelectElement = element as HTMLSelectElement;
+ // public function set dataProvider(value:Object):void
+ // {
+ // ISelectionModel(model).dataProvider = value;
+ // COMPILE::JS
+ // {
+ // var dp:HTMLOptionsCollection;
+ // var i:int;
+ // var n:int;
+ // var opt:HTMLOptionElement;
+ // var dd:HTMLSelectElement = element as HTMLSelectElement;
- dp = dd.options;
- n = dp.length;
- for (i = 0; i < n; i++) {
- dd.remove(0);
- }
- // The value could be undefined if data binding is used and the variable is not initialized.
- if(!value)return;
+ // dp = dd.options;
+ // n = dp.length;
+ // for (i = 0; i < n; i++) {
+ // dd.remove(0);
+ // }
+ // // The value could be undefined if data binding is used and the variable is not initialized.
+ // if(!value)return;
- var lf:String = labelField;
- n = value.length;
- for (i = 0; i < n; i++) {
- opt = document.createElement('option') as HTMLOptionElement;
- if (lf)
- opt.text = value[i][lf];
- else
- opt.text = value[i];
- dd.add(opt, null);
- }
+ // var lf:String = labelField;
+ // n = value.length;
+ // for (i = 0; i < n; i++) {
+ // opt = document.createElement('option') as HTMLOptionElement;
+ // if (lf)
+ // opt.text = value[i][lf];
+ // else
+ // opt.text = value[i];
+ // dd.add(opt, null);
+ // }
- }
- }
+ // }
+ // }
[Bindable("change")]
/**
+ * The index of the currently selected item. Changing this value
+ * also changes the selectedItem property.
+ *
* @copy org.apache.royale.core.ISelectionModel#selectedIndex
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9
+ * @productversion Royale 0.9.4
* @royaleignorecoercion org.apache.royale.core.ISelectionModel
*/
public function get selectedIndex():int
@@ -160,21 +222,23 @@
public function set selectedIndex(value:int):void
{
ISelectionModel(model).selectedIndex = value;
- COMPILE::JS
- {
- (element as HTMLSelectElement).selectedIndex = ISelectionModel(model).selectedIndex;
- }
+ // COMPILE::JS
+ // {
+ // (element as HTMLSelectElement).selectedIndex = ISelectionModel(model).selectedIndex;
+ // }
}
-
[Bindable("change")]
/**
+ * The item currently selected. Changing this value also
+ * changes the selectedIndex property.
+ *
* @copy org.apache.royale.core.ISelectionModel#selectedItem
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9
+ * @productversion Royale 0.9.4
* @royaleignorecoercion org.apache.royale.core.ISelectionModel
*/
public function get selectedItem():Object
@@ -190,33 +254,31 @@
public function set selectedItem(value:Object):void
{
ISelectionModel(model).selectedItem = value;
- COMPILE::JS
- {
- (element as HTMLSelectElement).selectedIndex = ISelectionModel(model).selectedIndex;
- }
+ // COMPILE::JS
+ // {
+ // (element as HTMLSelectElement).selectedIndex = ISelectionModel(model).selectedIndex;
+ // }
}
/**
- * The name of field within the data used for display. Each item of the
- * data should have a property with this name.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9
- * @royaleignorecoercion org.apache.royale.core.ISelectionModel
- */
- public function get labelField():String
- {
- return ISelectionModel(model).labelField;
- }
- /**
- * @royaleignorecoercion org.apache.royale.core.ISelectionModel
- */
- public function set labelField(value:String):void
- {
- ISelectionModel(model).labelField = value;
- }
+ * The presentation model for the list.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IListPresentationModel
+ */
+ public function get presentationModel():IListPresentationModel
+ {
+ var presModel:IListPresentationModel = getBeadByType(IListPresentationModel) as IListPresentationModel;
+ if (presModel == null) {
+ presModel = new ListPresentationModel();
+ addBead(presModel);
+ }
+ return presModel;
+ }
+
/**
* @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
@@ -225,10 +287,12 @@
COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
- addElementToWrapper(this,'select');
+ addElementToWrapper(this, 'select');
(element as HTMLSelectElement).size = 1;
- goog.events.listen(element, 'change',
- changeHandler);
+
+ goog.events.listen(element, 'change', changeHandler);
+
+ positioner = element;
return element;
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ErrorTip.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ErrorTip.as
new file mode 100644
index 0000000..481e411
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ErrorTip.as
@@ -0,0 +1,187 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.StyledUIBase;
+ import org.apache.royale.core.ITextModel;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+
+ /**
+ * The ErrorTip class implements the basic control for displaying
+ * error text.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class ErrorTip extends StyledUIBase
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ErrorTip()
+ {
+ super();
+ typeNames = "jewel errorTip";
+ COMPILE::SWF
+ {
+ mouseEnabled = false;
+ }
+ }
+
+ COMPILE::JS
+ protected var textNode:Text;
+
+ COMPILE::JS
+ private var _text:String = "";
+
+ /**
+ * The text to display in the error tip.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get text():String
+ {
+ COMPILE::SWF
+ {
+ return ITextModel(model).text;
+ }
+ COMPILE::JS
+ {
+ return _text;
+ }
+ }
+
+ /**
+ * @private
+ */
+ public function set text(value:String):void
+ {
+ COMPILE::SWF
+ {
+ ITextModel(model).text = value;
+ }
+ COMPILE::JS
+ {
+ if (textNode)
+ {
+ _text = value;
+ textNode.nodeValue = value;
+ }
+ }
+
+ }
+
+ /**
+ * The html-formatted text to display in the error tip.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ 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;
+ }
+ }
+
+ private var _multiline:Boolean;
+ /**
+ * A boolean flag to activate "multiline" effect selector.
+ * Allow the error tip to have more than one line if needed
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get multiline():Boolean
+ {
+ return _multiline;
+ }
+
+ public function set multiline(value:Boolean):void
+ {
+ if (_multiline != value)
+ {
+ _multiline = value;
+ toggleClass("multiline", _multiline);
+ }
+ }
+
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ addElementToWrapper(this,'div');
+
+ textNode = document.createTextNode(_text) as Text;
+ element.appendChild(textNode);
+
+ positioner = element;
+
+ positioner.style.position = "absolute";
+ positioner.style.pointerEvents = "none";
+
+ return element;
+ }
+
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Form.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Form.as
new file mode 100644
index 0000000..5152420
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Form.as
@@ -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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel
+{
+ import org.apache.royale.core.IParent;
+ import org.apache.royale.core.IPopUpHost;
+
+ /**
+ * Dispatched when the form validation succeeds.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event("valid","org.apache.royale.events.Event")]
+
+ /**
+ * Dispatched when the form validation fails.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event("invalid","org.apache.royale.events.Event")]
+
+ /**
+ * The Form class works with all validators,
+ * which implements IPopUpHost can host error tips.
+ * strand with FormValidator to dispatch invalid/valid event.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class Form extends Group implements IPopUpHost {
+
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function Form()
+ {
+ super();
+ typeNames = "jewel form";
+ }
+ /**
+ * Form can host error tips but they will be in the layout, if any
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get popUpParent():IParent
+ {
+ return this as IParent;
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Grid.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Grid.as
new file mode 100644
index 0000000..5ee0177
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Grid.as
@@ -0,0 +1,112 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.beads.layouts.GridLayout;
+ import org.apache.royale.utils.StringUtil;
+
+ /**
+ * The Grid class is a container that uses Grid Layout.
+ * Grid Layout need other inmediate children to work as cells
+ * to host cell content.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class Grid extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function Grid()
+ {
+ super();
+
+ typeNames = "jewel " + GridLayout.LAYOUT_TYPE_NAMES;
+
+ layout = new GridLayout();
+ addBead(layout);
+ }
+
+ public function get layout():GridLayout
+ {
+ return _layout as GridLayout;
+ }
+ public function set layout(value:GridLayout):void
+ {
+ _layout = value;
+ }
+
+ /**
+ * Assigns variable gap to grid from 1 to 20
+ * Activate "gap-Xdp" effect selector to set a numeric gap
+ * between grid cells
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get gap():Boolean
+ {
+ return layout.gap;
+ }
+
+ public function set gap(value:Boolean):void
+ {
+ typeNames = StringUtil.removeWord(typeNames, " gap");
+ typeNames += " gap";
+
+ COMPILE::JS
+ {
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+
+ layout.gap = value;
+ }
+
+ // public function get gap():Number
+ // {
+ // return layout.gap;
+ // }
+
+ // public function set gap(value:Number):void
+ // {
+ // typeNames = StringUtil.removeWord(typeNames, " gap-" + layout.gap + "dp");
+ // if(value != 0)
+ // typeNames += " gap-" + value + "dp";
+
+ // COMPILE::JS
+ // {
+ // if (parent)
+ // setClassName(computeFinalClassNames());
+ // }
+
+ // layout.gap = value;
+ // }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/GridCell.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/GridCell.as
new file mode 100644
index 0000000..db70556
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/GridCell.as
@@ -0,0 +1,483 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.beads.layouts.GridCellLayout;
+ import org.apache.royale.utils.StringUtil;
+
+ /**
+ * The GridCell class is the inmediate container in a Grid Layout
+ * to host grid cell content.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class GridCell extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function GridCell()
+ {
+ super();
+
+ typeNames = "jewel " + GridCellLayout.LAYOUT_TYPE_NAMES;
+
+ layout = new GridCellLayout();
+ addBead(layout);
+ }
+
+ public function get layout():GridCellLayout
+ {
+ return _layout as GridCellLayout;
+ }
+ public function set layout(value:GridCellLayout):void
+ {
+ _layout = value;
+ }
+
+ /**
+ * The X Number for "widescreen-col-X-Y" effect selector.
+ * Sets the widescreen numerator for the X/Y fraction that indicates the cell's size in
+ * widescreen screen. Needs to be set in conjunction with widescreen denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get wideScreenNumerator():Number
+ {
+ return layout.wideScreenNumerator;
+ }
+
+ public function set wideScreenNumerator(value:Number):void
+ {
+ COMPILE::JS
+ {
+ setFractionForScreen(GridCellLayout.DESKTOP, value, layout.wideScreenDenominator);
+
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+
+ layout.wideScreenNumerator = value;
+ }
+
+ /**
+ * The Y Number for "widescreen-col-X-Y" effect selector.
+ * Sets the desktop denominator for the X/Y fraction that indicates the cell's size in
+ * desktop screen. Needs to be set in conjunction with desktop denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get wideScreenDenominator():Number
+ {
+ return layout.wideScreenDenominator;
+ }
+
+ public function set wideScreenDenominator(value:Number):void
+ {
+ COMPILE::JS
+ {
+ setFractionForScreen(GridCellLayout.DESKTOP, layout.wideScreenNumerator, value);
+
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+
+ layout.wideScreenDenominator = value;
+ }
+
+ /**
+ * The X Number for "desktop-col-X-Y" effect selector.
+ * Sets the desktop numerator for the X/Y fraction that indicates the cell's size in
+ * desktop screen. Needs to be set in conjunction with desktop denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get desktopNumerator():Number
+ {
+ return layout.desktopNumerator;
+ }
+
+ public function set desktopNumerator(value:Number):void
+ {
+ COMPILE::JS
+ {
+ setFractionForScreen(GridCellLayout.DESKTOP, value, layout.desktopDenominator);
+
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+
+ layout.desktopNumerator = value;
+ }
+
+ /**
+ * The Y Number for "desktop-col-X-Y" effect selector.
+ * Sets the desktop denominator for the X/Y fraction that indicates the cell's size in
+ * desktop screen. Needs to be set in conjunction with desktop denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get desktopDenominator():Number
+ {
+ return layout.desktopDenominator;
+ }
+
+ public function set desktopDenominator(value:Number):void
+ {
+ COMPILE::JS
+ {
+ setFractionForScreen(GridCellLayout.DESKTOP, layout.desktopNumerator, value);
+
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+
+ layout.desktopDenominator = value;
+ }
+
+ /**
+ * The X Number for "tablet-col-X-Y" effect selector.
+ * Sets the tablet numerator for the X/Y fraction that indicates the cell's size in
+ * tablet screen. Needs to be set in conjunction with tablet denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get tabletNumerator():Number
+ {
+ return layout.tabletNumerator;
+ }
+
+ public function set tabletNumerator(value:Number):void
+ {
+ COMPILE::JS
+ {
+ setFractionForScreen(GridCellLayout.TABLET, value, layout.tabletDenominator);
+
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+
+ layout.tabletNumerator = value;
+ }
+
+ /**
+ * The Y Number for "tablet-col-X-Y" effect selector.
+ * Sets the tablet denominator for the X/Y fraction that indicates the cell's size in
+ * tablet screen. Needs to be set in conjunction with tablet denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get tabletDenominator():Number
+ {
+ return layout.tabletDenominator;
+ }
+
+ public function set tabletDenominator(value:Number):void
+ {
+ COMPILE::JS
+ {
+ setFractionForScreen(GridCellLayout.TABLET, layout.tabletNumerator, value);
+
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+
+ layout.tabletDenominator = value;
+ }
+
+ /**
+ * The X Number for "phone-col-X-Y" effect selector.
+ * Sets the phone numerator for the X/Y fraction that indicates the cell's size in
+ * phone screen. Needs to be set in conjunction with phone denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get phoneNumerator():Number
+ {
+ return layout.phoneNumerator;
+ }
+
+ public function set phoneNumerator(value:Number):void
+ {
+ COMPILE::JS
+ {
+ setFractionForScreen(GridCellLayout.PHONE, value, layout.phoneDenominator);
+
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+
+ layout.phoneNumerator = value;
+ }
+
+ /**
+ * The Y Number for "phone-col-X-Y" effect selector.
+ * Sets the phone denominator for the X/Y fraction that indicates the cell's size in
+ * phone screen. Needs to be set in conjunction with phone denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get phoneDenominator():Number
+ {
+ return layout.phoneDenominator;
+ }
+
+ public function set phoneDenominator(value:Number):void
+ {
+ COMPILE::JS
+ {
+ setFractionForScreen(GridCellLayout.PHONE, layout.phoneNumerator, value);
+
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+
+ layout.phoneDenominator = value;
+ }
+
+ COMPILE::JS
+ private function setFractionForScreen(screen:String, num:Number, den:Number):void
+ {
+ if(num && den)
+ {
+ if (num <= 0 || num > GridCellLayout.MAX_COLUMNS)
+ throw new Error(screen + " numerator must be between 1 and " + GridCellLayout.MAX_COLUMNS);
+ if (den <= 0 || den > GridCellLayout.MAX_COLUMNS)
+ throw new Error(screen + " denominator must be between 1 and " + GridCellLayout.MAX_COLUMNS);
+
+ typeNames = StringUtil.removeWord(typeNames, " " + screen + "-col-" + layout.desktopNumerator + "-" + layout.desktopDenominator);
+ typeNames += " " + screen + "-col-" + num + "-" + den;
+ }
+ }
+
+ /**
+ * Makes the cell to be visible or hidden in phone size
+ * Uses "visible-phone" and "hidden-phone" effect selectors.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get phoneVisible():Boolean
+ {
+ return layout.phoneVisible;
+ }
+
+ public function set phoneVisible(value:Boolean):void
+ {
+ if (layout.phoneVisible != value)
+ {
+ COMPILE::JS
+ {
+ layout.phoneVisible = value;
+
+ if(layout.phoneVisible)
+ {
+ typeNames = StringUtil.removeWord(typeNames, " hidden-phone");
+ typeNames += " visible-phone";
+ } else
+ {
+ typeNames = StringUtil.removeWord(typeNames, " visible-phone");
+ typeNames += " hidden-phone";
+ }
+
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+ }
+ }
+
+ /**
+ * Makes the cell to be visible or hidden in phone size
+ * Uses "visible-tablet" and "hidden-tablet" effect selectors.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get tabletVisible():Boolean
+ {
+ return layout.tabletVisible;
+ }
+
+ public function set tabletVisible(value:Boolean):void
+ {
+ if (layout.tabletVisible != value)
+ {
+ COMPILE::JS
+ {
+ layout.tabletVisible = value;
+
+ if(layout.tabletVisible)
+ {
+ typeNames = StringUtil.removeWord(typeNames, " hidden-tablet");
+ typeNames += " visible-tablet";
+ } else
+ {
+ typeNames = StringUtil.removeWord(typeNames, " visible-tablet");
+ typeNames += " hidden-tablet";
+ }
+
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+ }
+ }
+
+ /**
+ * Makes the cell to be visible or hidden in phone size
+ * Uses "visible-desktop" and "hidden-desktop" effect selectors.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get desktopVisible():Boolean
+ {
+ return layout.desktopVisible;
+ }
+
+ public function set desktopVisible(value:Boolean):void
+ {
+ if (layout.desktopVisible != value)
+ {
+ COMPILE::JS
+ {
+ layout.desktopVisible = value;
+
+ if(layout.desktopVisible)
+ {
+ typeNames = StringUtil.removeWord(typeNames, " hidden-desktop");
+ typeNames += " visible-desktop";
+ } else
+ {
+ typeNames = StringUtil.removeWord(typeNames, " visible-desktop");
+ typeNames += " hidden-desktop";
+ }
+
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+ }
+ }
+
+ /**
+ * Makes the cell to be visible or hidden in phone size
+ * Uses "visible-widescreen" and "hidden-widescreen" effect selectors.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get wideScreenVisible():Boolean
+ {
+ return layout.wideScreenVisible;
+ }
+
+ public function set wideScreenVisible(value:Boolean):void
+ {
+ if (layout.wideScreenVisible != value)
+ {
+ COMPILE::JS
+ {
+ layout.wideScreenVisible = value;
+
+ if(layout.wideScreenVisible)
+ {
+ typeNames = StringUtil.removeWord(typeNames, " hidden-widescreen");
+ typeNames += " visible-widescreen";
+ } else
+ {
+ typeNames = StringUtil.removeWord(typeNames, " visible-widescreen");
+ typeNames += " hidden-widescreen";
+ }
+
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+ }
+ }
+
+ /**
+ * Assigns variable gap to grid from 1 to 20
+ * Activate "gap-Xdp" effect selector to set a numeric gap
+ * between grid cells
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ // public function get gap():Number
+ // {
+ // return layout.gap;
+ // }
+
+ // public function set gap(value:Number):void
+ // {
+ // typeNames = StringUtil.removeWord(typeNames, " gap-" + layout.gap + "dp");
+ // if(value != 0)
+ // typeNames += " gap-" + value + "dp";
+
+ // COMPILE::JS
+ // {
+ // if (parent)
+ // setClassName(computeFinalClassNames());
+ // }
+
+ // layout.gap = value;
+ // }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Group.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Group.as
new file mode 100644
index 0000000..f0fd0b6
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Group.as
@@ -0,0 +1,241 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.Group;
+ import org.apache.royale.utils.ClassSelectorList;
+ import org.apache.royale.utils.IClassSelectorListSupport;
+ import org.apache.royale.jewel.beads.layouts.StyledLayoutBase;
+ import org.apache.royale.utils.StringUtil;
+
+ /**
+ * The Group class provides a light-weight container for visual elements. By default
+ * the Group does not have a layout, allowing its children to be sized and positioned
+ * using styles or CSS.
+ *
+ * @toplevel
+ * @see org.apache.royale.jewel.beads.layout
+ * @see org.apache.royale.jewel.supportClasses.jewel.ScrollingViewport
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class Group extends org.apache.royale.html.Group implements IClassSelectorListSupport
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function Group()
+ {
+ super();
+ classSelectorList = new ClassSelectorList(this);
+ typeNames = "";
+ }
+
+ protected var classSelectorList:ClassSelectorList;
+
+ COMPILE::JS
+ override protected function setClassName(value:String):void
+ {
+ classSelectorList.addNames(value);
+ }
+
+ /**
+ * Add a class selector to the list.
+ *
+ * @param name Name of selector to add.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function addClass(name:String):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.add(name);
+ }
+ }
+
+ /**
+ * Removes a class selector from the list.
+ *
+ * @param name Name of selector to remove.
+ *
+ * @royaleignorecoercion HTMLElement
+ * @royaleignorecoercion DOMTokenList
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function removeClass(name:String):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.remove(name);
+ }
+ }
+
+ /**
+ * Add or remove a class selector to/from the list.
+ *
+ * @param name Name of selector to add or remove.
+ * @param value True to add, False to remove.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function toggleClass(name:String, value:Boolean):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.toggle(name, value);
+ }
+ }
+
+ /**
+ * Search for the name in the element class list
+ *
+ * @param name Name of selector to find.
+ * @return return true if the name is found or false otherwise.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function containsClass(name:String):Boolean
+ {
+ COMPILE::JS
+ {
+ return classSelectorList.contains(name);
+ }
+ COMPILE::SWF
+ {//not implemented
+ return false;
+ }
+ }
+
+ protected var _layout:StyledLayoutBase;
+
+ /**
+ * Distribute all items horizontally
+ * Possible values are:
+ * - itemsLeft
+ * - itemsCenter
+ * - itemsRight
+ * - itemsSpaceBetween
+ * - itemsSpaceAround
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get itemsHorizontalAlign():String
+ {
+ return _layout.itemsHorizontalAlign;
+ }
+
+ public function set itemsHorizontalAlign(value:String):void
+ {
+ typeNames = StringUtil.removeWord(typeNames, " " + _layout.itemsHorizontalAlign);
+ _layout.itemsHorizontalAlign = value;
+ typeNames += " " + _layout.itemsHorizontalAlign;
+
+ COMPILE::JS
+ {
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+ }
+
+ /**
+ * Distribute all items vertically
+ * Possible values are:
+ * - itemsSameHeight
+ * - itemsCentered
+ * - itemsTop
+ * - itemsBottom
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get itemsVerticalAlign():String
+ {
+ return _layout.itemsVerticalAlign;
+ }
+
+ public function set itemsVerticalAlign(value:String):void
+ {
+ typeNames = StringUtil.removeWord(typeNames, " " + _layout.itemsVerticalAlign);
+ _layout.itemsVerticalAlign = value;
+ typeNames += " " + _layout.itemsVerticalAlign;
+
+ COMPILE::JS
+ {
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+ }
+
+ /**
+ * A boolean flag to activate "itemsExpand" effect selector.
+ * Make items resize to the fill all container space
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get itemsExpand():Boolean
+ {
+ return _layout.itemsExpand;
+ }
+
+ public function set itemsExpand(value:Boolean):void
+ {
+ typeNames = StringUtil.removeWord(typeNames, " itemsExpand");
+ _layout.itemsExpand = value;
+ if(_layout.itemsExpand)
+ {
+ typeNames += " itemsExpand";
+ }
+
+ COMPILE::JS
+ {
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/HGroup.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/HGroup.as
new file mode 100644
index 0000000..37abd54
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/HGroup.as
@@ -0,0 +1,112 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.beads.layouts.HorizontalLayout;
+ import org.apache.royale.utils.StringUtil;
+
+ /**
+ * This Group subclass uses HorizontalLayout as its default layout.
+ *
+ * @toplevel
+ * @see org.apache.royale.jewel.beads.layouts
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class HGroup extends Group
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function HGroup()
+ {
+ super();
+
+ typeNames = "jewel " + HorizontalLayout.LAYOUT_TYPE_NAMES;
+
+ layout = new HorizontalLayout();
+ addBead(layout);
+ }
+
+ public function get layout():HorizontalLayout
+ {
+ return _layout as HorizontalLayout;
+ }
+ public function set layout(value:HorizontalLayout):void
+ {
+ _layout = value;
+ }
+
+ // public function get gap():Boolean
+ // {
+ // return layout.gap;
+ // }
+
+ // public function set gap(value:Boolean):void
+ // {
+ // typeNames = StringUtil.removeWord(typeNames, " gap");
+ // typeNames += " gap";
+
+ // COMPILE::JS
+ // {
+ // if (parent)
+ // setClassName(computeFinalClassNames());
+ // }
+
+ // layout.gap = value;
+ // }
+
+ /**
+ * Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
+ * Activate "gap-{X}x{GAP_STEP}px" effect selector to set a numeric gap between elements.
+ * i.e: gap-2x3px will result in a gap of 6px
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get gap():Number
+ {
+ return layout.gap;
+ }
+
+ public function set gap(value:Number):void
+ {
+ typeNames = StringUtil.removeWord(typeNames, " gap-" + layout.gap + "x" + HorizontalLayout.GAP_STEP + "px");
+ if(value != 0)
+ typeNames += " gap-" + value + "x" + HorizontalLayout.GAP_STEP + "px";
+
+ COMPILE::JS
+ {
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+
+ layout.gap = value;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/IconButton.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/IconButton.as
new file mode 100644
index 0000000..b494d61
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/IconButton.as
@@ -0,0 +1,80 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.IIconSupport;
+ import org.apache.royale.core.IIcon;
+
+ public class IconButton extends Button implements IIconSupport
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function IconButton()
+ {
+ super();
+
+ //typeNames = "jewel button";
+ }
+
+ private var _icon:IIcon;
+ /**
+ * The icon to use with the button.
+ * Optional
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get icon():IIcon
+ {
+ return _icon;
+ }
+ public function set icon(value:IIcon):void
+ {
+ _icon = value;
+
+ var iconClass:String = "icon";
+ if(text != "")
+ {
+ iconClass += "WithSpace";
+ }
+
+ toggleClass(iconClass, (_icon != null));
+
+ COMPILE::JS
+ {
+ // insert the icon before the text
+ addElementAt(_icon, 0);
+ }
+
+ COMPILE::SWF
+ {
+ classSelectorList.toggle("icon", (_icon != null));
+ // todo set up icon on swf
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/IconTextInput.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/IconTextInput.as
new file mode 100644
index 0000000..b9ae3a7
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/IconTextInput.as
@@ -0,0 +1,108 @@
+//
+// 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.IIconSupport;
+ import org.apache.royale.core.IIcon;
+ import org.apache.royale.core.IUIBase;
+
+ /**
+ * The IconTextInput class implements is a TextInput that supports
+ * an icon that can be positionend to the left or to the right of text
+ * content
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class IconTextInput extends TextInput implements IIconSupport
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function IconTextInput()
+ {
+ super();
+
+ //typeNames = "jewel textinput";
+ }
+
+ private var _icon:IIcon;
+ /**
+ * The icon to use with the button.
+ * Optional
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get icon():IIcon
+ {
+ return _icon;
+ }
+ public function set icon(value:IIcon):void
+ {
+ _icon = value;
+
+ toggleClass("icon", (_icon != null));
+
+ COMPILE::JS
+ {
+ // insert the icon before the text
+ if(rightPosition)
+ {
+ div.insertBefore(_icon.positioner, null);
+ } else
+ {
+ div.insertBefore(_icon.positioner, element);
+ }
+ (_icon as IUIBase).addedToParent();
+ }
+ }
+
+ private var _rightPosition:Boolean;
+ /**
+ * icon's position regarding the text content
+ * Can be "left" or "right". defaults to "left"
+ * Optional
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get rightPosition():Boolean
+ {
+ return _rightPosition;
+ }
+ public function set rightPosition(value:Boolean):void
+ {
+ _rightPosition = value;
+
+ toggleClass("right", _rightPosition);
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Image.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Image.as
new file mode 100644
index 0000000..c7c6496
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Image.as
@@ -0,0 +1,109 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.supportClasses.StyledImageBase;
+ import org.apache.royale.events.MouseEvent;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * Load Images.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class Image extends StyledImageBase
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function Image()
+ {
+ super();
+ typeNames = "jewel image";
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ addElementToWrapper(this, 'img');
+ positioner = element;
+ return element;
+ }
+
+ COMPILE::JS
+ override public function get imageElement():Element
+ {
+ return element;
+ }
+
+ /**
+ * @royaleignorecoercion HTMLImageElement
+ */
+ COMPILE::JS
+ override public function applyImageData(binaryDataAsString:String):void
+ {
+ (element as HTMLImageElement).src = binaryDataAsString;
+ }
+
+
+ COMPILE::JS
+ override public function addEventListener(type:String, handler:Function, opt_capture:Boolean = false, opt_handlerScope:Object = null):void
+ {
+ super.addEventListener(type, handler, opt_capture, opt_handlerScope);
+ if(type == MouseEvent.CLICK || type == MouseEvent.MOUSE_DOWN || type == MouseEvent.ROLL_OVER ||
+ type == MouseEvent.MOUSE_UP || type == MouseEvent.MOUSE_MOVE || type == MouseEvent.MOUSE_OVER ||
+ type == MouseEvent.ROLL_OUT || type == MouseEvent.MOUSE_OUT ||
+ type == MouseEvent.DOUBLE_CLICK || type == MouseEvent.WHEEL)
+ {
+ addClass("cursor-pointer");
+ }
+ }
+
+ COMPILE::JS
+ override public function removeEventListener(type:String, handler:Function, opt_capture:Boolean = false, opt_handlerScope:Object = null):void
+ {
+ super.removeEventListener(type, handler, opt_capture, opt_handlerScope);
+ if(type == MouseEvent.CLICK || type == MouseEvent.MOUSE_DOWN || type == MouseEvent.ROLL_OVER ||
+ type == MouseEvent.MOUSE_UP || type == MouseEvent.MOUSE_MOVE || type == MouseEvent.MOUSE_OVER ||
+ type == MouseEvent.ROLL_OUT || type == MouseEvent.MOUSE_OUT ||
+ type == MouseEvent.DOUBLE_CLICK || type == MouseEvent.WHEEL)
+ {
+ removeClass("cursor-pointer");
+ }
+
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Label.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Label.as
index 90f3827..5287fb4 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Label.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Label.as
@@ -19,7 +19,7 @@
package org.apache.royale.jewel
{
import org.apache.royale.core.ITextModel;
- import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.StyledUIBase;
import org.apache.royale.core.ValuesManager;
import org.apache.royale.events.Event;
import org.apache.royale.events.IEventDispatcher;
@@ -35,12 +35,12 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.0
+ * @productversion Royale 0.9.4
*/
[Event(name="click", type="org.apache.royale.events.MouseEvent")]
/*
- * Label probably should extend TextField directly,
+ * Label probably should extend TextInput directly,
* but the player's APIs for TextLine do not allow
* direct instantiation, and we might want to allow
* Labels to be declared and have their actual
@@ -55,9 +55,9 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
- public class Label extends UIBase
+ public class Label extends StyledUIBase
{
/**
* Constructor.
@@ -65,7 +65,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function Label()
{
@@ -86,7 +86,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get text():String
{
@@ -128,7 +128,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get html():String
{
@@ -158,6 +158,30 @@
}
}
+ private var _multiline:Boolean;
+ /**
+ * A boolean flag to activate "multiline" effect selector.
+ * Allow the label to have more than one line if needed
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get multiline():Boolean
+ {
+ return _multiline;
+ }
+
+ public function set multiline(value:Boolean):void
+ {
+ if (_multiline != value)
+ {
+ _multiline = value;
+ toggleClass("multiline", _multiline);
+ }
+ }
+
/**
* @private
*/
@@ -175,11 +199,13 @@
COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
- addElementToWrapper(this,'span');
+ addElementToWrapper(this,'div');
textNode = document.createTextNode(_text) as Text;
element.appendChild(textNode);
+ positioner = element;
+
return element;
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/List.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/List.as
index eb9cb0b..a59e5ee 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/List.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/List.as
@@ -18,11 +18,12 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
- import org.apache.royale.core.IListPresentationModel;
import org.apache.royale.core.IRollOverModel;
import org.apache.royale.core.ISelectionModel;
- import org.apache.royale.html.DataContainer;
-
+ import org.apache.royale.core.DataContainerBase;
+ import org.apache.royale.core.IDataProviderModel;
+ import org.apache.royale.core.IListPresentationModel;
+ import org.apache.royale.jewel.beads.models.ListPresentationModel;
COMPILE::JS
{
@@ -36,7 +37,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
[Event(name="initComplete", type="org.apache.royale.events.Event")]
@@ -46,7 +47,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
[Event(name="change", type="org.apache.royale.events.Event")]
@@ -65,9 +66,9 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
- public class List extends DataContainer
+ public class List extends DataContainerBase
{
/**
* constructor.
@@ -75,7 +76,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function List()
{
@@ -84,13 +85,56 @@
}
/**
+ * The name of field within the data used for display. Each item of the
+ * data should have a property with this name.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+ */
+ public function get labelField():String
+ {
+ return IDataProviderModel(model).labelField;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+ */
+ public function set labelField(value:String):void
+ {
+ IDataProviderModel(model).labelField = value;
+ }
+
+ /**
+ * The data being display by the List.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+ */
+ public function get dataProvider():Object
+ {
+ return IDataProviderModel(model).dataProvider;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+ */
+ public function set dataProvider(value:Object):void
+ {
+ IDataProviderModel(model).dataProvider = value;
+ }
+
+ /**
* The index of the currently selected item. Changing this value
* also changes the selectedItem property.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9
+ * @productversion Royale 0.9.4
* @royaleignorecoercion org.apache.royale.core.ISelectionModel
*/
[Bindable("change")]
@@ -112,7 +156,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9
+ * @productversion Royale 0.9.4
* @royaleignorecoercion org.apache.royale.core.IRollOverModel
*/
public function get rollOverIndex():int
@@ -133,7 +177,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function get rowHeight():Number
{
@@ -151,7 +195,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9
+ * @productversion Royale 0.9.4
* @royaleignorecoercion org.apache.royale.core.ISelectionModel
*/
[Bindable("change")]
@@ -167,5 +211,23 @@
ISelectionModel(model).selectedItem = value;
}
+ /**
+ * The presentation model for the list.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IListPresentationModel
+ */
+ public function get presentationModel():IListPresentationModel
+ {
+ var presModel:IListPresentationModel = getBeadByType(IListPresentationModel) as IListPresentationModel;
+ if (presModel == null) {
+ presModel = new ListPresentationModel();
+ addBead(presModel);
+ }
+ return presModel;
+ }
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Navigation.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Navigation.as
new file mode 100644
index 0000000..c0431cb
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Navigation.as
@@ -0,0 +1,77 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.events.MouseEvent;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The Navigation class is a List used for navigate other organized content
+ * in a Royale Application. In HTML is represented by a <nav> tag in HTML and
+ * It parents a list of links.
+ * By default it uses NavigationLinkItemRenderer class to define each item.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class Navigation extends List
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function Navigation()
+ {
+ super();
+
+ typeNames = "jewel navigation";
+
+ addEventListener(MouseEvent.CLICK, internalMouseHandler);
+ }
+
+ private function internalMouseHandler(event:MouseEvent):void
+ {
+ COMPILE::JS
+ {
+ // avoid a link tries to open a new page
+ event.preventDefault();
+ }
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this,'nav');
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/NumericStepper.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/NumericStepper.as
new file mode 100644
index 0000000..33e33ac
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/NumericStepper.as
@@ -0,0 +1,192 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.IRangeModel;
+ import org.apache.royale.core.StyledUIBase;
+ COMPILE::JS
+ {
+ import goog.events;
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ [Event(name="valueChange", type="org.apache.royale.events.Event")]
+
+ /**
+ * The NumericStepper class is a component that displays a numeric
+ * value and up/down controls (using a org.apache.royale.jewel.Spinner) to
+ * increase and decrease the value by specific amounts. The NumericStepper uses the following beads:
+ *
+ * org.apache.royale.core.IBeadModel: the data model for the component of type org.apache.royale.core.IRangeModel.
+ * org.apache.royale.core.IBeadView: constructs the parts of the component.
+ * org.apache.royale.core.IBeadController: handles the input events.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class NumericStepper extends StyledUIBase
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function NumericStepper()
+ {
+ super();
+ typeNames = 'jewel numericstepper';
+ }
+
+ [Bindable("valueChange")]
+ /**
+ * The current value of the control.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IRangeModel
+ */
+ public function get value():Number
+ {
+ return IRangeModel(model).value;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IRangeModel
+ */
+ public function set value(newValue:Number):void
+ {
+ IRangeModel(model).value = newValue;
+ }
+
+ /**
+ * The minimum value the control will display.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IRangeModel
+ */
+ public function get minimum():Number
+ {
+ return IRangeModel(model).minimum;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IRangeModel
+ */
+ public function set minimum(value:Number):void
+ {
+ IRangeModel(model).minimum = value;
+ }
+
+ /**
+ * The maximum value the control will display.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IRangeModel
+ */
+ public function get maximum():Number
+ {
+ return IRangeModel(model).maximum;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IRangeModel
+ */
+ public function set maximum(value:Number):void
+ {
+ IRangeModel(model).maximum = value;
+ }
+
+ /**
+ * The amount to increase or descrease the value. The value
+ * will not exceed the minimum or maximum value. The final
+ * value is affected by the snapInterval.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IRangeModel
+ */
+ public function get stepSize():Number
+ {
+ return IRangeModel(model).stepSize;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IRangeModel
+ */
+ public function set stepSize(value:Number):void
+ {
+ IRangeModel(model).stepSize = value;
+ }
+
+ /**
+ * The modulus for the value. If this property is set,
+ * the value displayed with a muliple of the snapInterval.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IRangeModel
+ */
+ public function get snapInterval():Number
+ {
+ return IRangeModel(model).snapInterval;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IRangeModel
+ */
+ public function set snapInterval(value:Number):void
+ {
+ IRangeModel(model).snapInterval = value;
+ }
+
+ COMPILE::JS
+ private var input:TextInput;
+
+ COMPILE::JS
+ private var spinner:Spinner;
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ addElementToWrapper(this, 'div');
+ positioner = element;
+ return element;
+ }
+
+ }
+}
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
index e043f6c..e32c58e 100644
--- 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
@@ -32,10 +32,9 @@
COMPILE::JS
{
- import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.StyledUIBase;
import org.apache.royale.core.WrappedHTMLElement;
import org.apache.royale.html.util.addElementToWrapper;
- import org.apache.royale.utils.cssclasslist.addStyles;
}
//--------------------------------------
@@ -48,7 +47,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.8
+ * @productversion Royale 0.9.4
*/
[Event(name="click", type="org.apache.royale.events.MouseEvent")]
@@ -58,14 +57,16 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.8
+ * @productversion Royale 0.9.4
*/
[Event(name="change", type="org.apache.royale.events.Event")]
+
+
/**
- * The Jewel radio button component is an enhanced version of the
- * standard HTML <input type="radio">, or "radio button" element. A radio button
- * consists of a small circle and, typically, text that clearly communicates a
+ * The Jewel radio button component in SWF is a specialized button.
+ *
+ * A radio button consists of a small circle and, typically, text that clearly communicates a
* condition that will be set when the user clicks or touches it. Radio buttons
* always appear in groups of two or more and, while they can be individually
* selected, can only be deselected by selecting a different radio button in the
@@ -74,7 +75,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.8
+ * @productversion Royale 0.9.4
*/
COMPILE::SWF
public class RadioButton extends UIButtonBase implements IStrand
@@ -85,17 +86,21 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.8
+ * @productversion Royale 0.9.4
*/
public function RadioButton()
{
super();
+ classSelectorList = new ClassSelectorList(this);
+
typeNames = "jewel radiobutton";
addEventListener(org.apache.royale.events.MouseEvent.CLICK, internalMouseHandler);
}
+ protected var classSelectorList:ClassSelectorList;
+
protected static var dict:Dictionary = new Dictionary(true);
/**
@@ -104,7 +109,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.8
+ * @productversion Royale 0.9.4
*/
public function get groupName() : String
{
@@ -121,7 +126,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.8
+ * @productversion Royale 0.9.4
*/
public function get text():String
{
@@ -140,7 +145,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.8
+ * @productversion Royale 0.9.4
*/
public function get selected():Boolean
{
@@ -170,7 +175,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.8
+ * @productversion Royale 0.9.4
*/
public function get value():Object
{
@@ -187,7 +192,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.8
+ * @productversion Royale 0.9.4
*/
public function get selectedValue():Object
{
@@ -241,28 +246,47 @@
}
}
+ //--------------------------------------
+ // Events
+ //--------------------------------------
+
/**
* Dispatched when the user clicks on RadioButton.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.8
+ * @productversion Royale 0.9.4
*/
- [Event(name="click", type="org.apache.royale.events.MouseEvent")]
-
+ [Event(name="click", type="org.apache.royale.events.MouseEvent")]
+
/**
* Dispatched when RadioButton is being selected/unselected.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.8
+ * @productversion Royale 0.9.4
*/
[Event(name="change", type="org.apache.royale.events.Event")]
-
+
+ /**
+ * The Jewel radio button component in JS is an enhanced version of the
+ * standard HTML <input type="radio">, or "radio button" element.
+ *
+ * A radio button consists of a small circle and, typically, text that clearly communicates a
+ * condition that will be set when the user clicks or touches it. Radio buttons
+ * always appear in groups of two or more and, while they can be individually
+ * selected, can only be deselected by selecting a different radio button in the
+ * same group (which deselects all other radio buttons in the group).
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
COMPILE::JS
- public class RadioButton extends UIBase
+ public class RadioButton extends StyledUIBase
{
/**
* Constructor.
@@ -270,23 +294,14 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.8
+ * @productversion Royale 0.9.4
*/
public function RadioButton()
{
super();
- classSelectorList = new ClassSelectorList(this);
typeNames = "jewel radiobutton";
}
-
- protected var classSelectorList:ClassSelectorList;
-
- COMPILE::JS
- override protected function setClassName(value:String):void
- {
- classSelectorList.addNames(value);
- }
/**
* Provides unique name
@@ -298,21 +313,6 @@
private var label:HTMLLabelElement;
private var textNode:Text;
- COMPILE::JS
- private var _positioner:WrappedHTMLElement;
-
- COMPILE::JS
- override public function get positioner():WrappedHTMLElement
- {
- return _positioner;
- }
-
- COMPILE::JS
- override public function set positioner(value:WrappedHTMLElement):void
- {
- _positioner = value;
- }
-
/**
* @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
* @royaleignorecoercion HTMLLabelElement
@@ -322,11 +322,12 @@
*/
override protected function createElement():WrappedHTMLElement
{
- var label:HTMLLabelElement = document.createElement('label') as HTMLLabelElement;
-
- icon = addElementToWrapper(this,'input') as HTMLInputElement;
- icon.type = "radio";
- icon.id = '_radio_' + + Math.random();
+ label = document.createElement('label') as HTMLLabelElement;
+
+ icon = addElementToWrapper(this, 'input') as HTMLInputElement;
+ icon.type = 'radio';
+ icon.id = '_radio_' + Math.random();
+ icon.value = String(value);
label.appendChild(icon);
textNode = document.createTextNode('') as Text;
@@ -334,16 +335,10 @@
radio = document.createElement('span') as HTMLSpanElement;
radio.appendChild(textNode);
label.appendChild(radio);
- //radio.addEventListener('mouseover', mouseOverHandler, false);
- //radio.addEventListener('mouseout', mouseOutHandler, false);
-
- // (textNode as WrappedHTMLElement).royale_wrapper = this;
- // (icon as WrappedHTMLElement).royale_wrapper = this;
- // (radio as WrappedHTMLElement).royale_wrapper = this;
-
+
positioner = label as WrappedHTMLElement;
- _positioner.royale_wrapper = this;
-
+ positioner.royale_wrapper = this;
+
return element;
}
@@ -411,9 +406,9 @@
{
return icon.value;
}
- public function set value(v:Object):void
+ public function set value(value:Object):void
{
- icon.value = v as String;
+ icon.value = String(value);
}
public function get selectedValue():Object
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/SectionContent.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/SectionContent.as
new file mode 100644
index 0000000..056514e
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/SectionContent.as
@@ -0,0 +1,91 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.IActivable;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The SectionContent class is a Container component capable of parenting other
+ * components. This class is used along with Tabs to separate content and
+ * present and organize data for the user.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class SectionContent extends Group implements IActivable
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function SectionContent()
+ {
+ super();
+
+ typeNames = "jewel section";
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this,'section');
+ }
+
+ private var _isActive:Boolean;
+
+ /**
+ * a boolean flag to indicate if the container is active or not
+ * defaults to false.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get isActive():Boolean
+ {
+ return _isActive;
+ }
+
+ public function set isActive(value:Boolean):void
+ {
+ if (_isActive != value)
+ {
+ _isActive = value;
+
+ toggleClass("is-active", _isActive);
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/SimpleTable.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/SimpleTable.as
new file mode 100644
index 0000000..305457d
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/SimpleTable.as
@@ -0,0 +1,87 @@
+
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The SimpleTable class represents a simple HTML <table> element.
+ * This component is designed to be declarative in MXML (or AS3),
+ * Check Table component for a Table that uses itemRenderers, columns
+ * and a data provider.
+ *
+ * This component uses the following jewel classes to generate the
+ * Table structure:
+ *
+ * - Header:
+ * j:THead
+ * j:TableRow
+ * j:TableHeaderCell
+ *
+ * - Body
+ * j:TBody
+ * j:TableRow
+ * j:TableCell
+ *
+ * - Footer
+ * j:TFoot
+ * j:TableRow
+ * j:TableCell
+ *
+ *
+ * As well, DataGrid is a more complex component
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class SimpleTable extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function SimpleTable()
+ {
+ super();
+
+ typeNames = "jewel simpletable";
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this, 'table');
+ }
+ }
+}
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
index aa99693..40bef90 100644
--- 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
@@ -19,15 +19,13 @@
package org.apache.royale.jewel
{
import org.apache.royale.core.IRangeModel;
- import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.StyledUIBase;
import org.apache.royale.events.Event;
- import org.apache.royale.utils.ClassSelectorList;
COMPILE::JS
{
import org.apache.royale.core.WrappedHTMLElement;
import org.apache.royale.html.util.addElementToWrapper;
- import org.apache.royale.utils.cssclasslist.addStyles;
}
//--------------------------------------
@@ -40,7 +38,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
[Event(name="valueChange", type="org.apache.royale.events.ValueChangeEvent")]
@@ -50,7 +48,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
[Event(name="change", type="org.apache.royale.events.Event")]
@@ -60,7 +58,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9
+ * @productversion Royale 0.9.4
*/
[Event(name="input", type="org.apache.royale.events.Event")]
@@ -78,9 +76,9 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
- public class Slider extends UIBase
+ public class Slider extends StyledUIBase
{
/**
* constructor.
@@ -88,14 +86,13 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function Slider()
{
super();
- classSelectorList = new ClassSelectorList(this);
- typeNames = "jewel slider";
+ typeNames = "jewel slider";
IRangeModel(model).value = 0;
IRangeModel(model).minimum = 0;
@@ -104,15 +101,13 @@
IRangeModel(model).snapInterval = 1;
}
- protected var classSelectorList:ClassSelectorList;
-
/**
* The current value of the Slider.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
[Bindable("valueChange")]
public function get value():Number
@@ -130,7 +125,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function get minimum():Number
{
@@ -147,7 +142,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function get maximum():Number
{
@@ -165,7 +160,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get snapInterval():Number
{
@@ -183,7 +178,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function get stepSize():Number
{
@@ -195,21 +190,6 @@
IRangeModel(model).stepSize = value;
}
- COMPILE::JS
- private var _positioner:WrappedHTMLElement;
-
- COMPILE::JS
- override public function get positioner():WrappedHTMLElement
- {
- return _positioner;
- }
-
- COMPILE::JS
- override public function set positioner(value:WrappedHTMLElement):void
- {
- _positioner = value;
- }
-
/**
* @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
* @royaleignorecoercion HTMLInputElement
@@ -226,15 +206,9 @@
div.appendChild(input);
positioner = div as WrappedHTMLElement;
- _positioner.royale_wrapper = this;
+ positioner.royale_wrapper = this;
return element;
}
-
- COMPILE::JS
- override protected function setClassName(value:String):void
- {
- classSelectorList.addNames(value);
- }
}
}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/ListBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Spacer.as
similarity index 74%
copy from frameworks/projects/Basic/src/main/royale/org/apache/royale/core/ListBase.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Spacer.as
index a17d205..0ba9cae 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/ListBase.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Spacer.as
@@ -16,23 +16,20 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.core
-{
- /*
- *************
- * THIS CLASS IS NO LONGER NEEDED. INHERIT FROM DataContainerBase
- */
-
+package org.apache.royale.jewel
+{
+ import org.apache.royale.core.StyledUIBase;
+
/**
- * The ListBase class is the base class for most lists
- * in Royale.
- *
+ * The Spacer class takes up space in the UI layout.
+ * Setting width and/or height
+ *
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public class ListBase extends DataContainerBase
+ * @productversion Royale 0.9.4
+ */
+ public class Spacer extends StyledUIBase
{
/**
* Constructor.
@@ -40,11 +37,13 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
- public function ListBase()
+ public function Spacer()
{
- super();
- }
- }
+ super();
+
+ typeNames = "jewel spacer";
+ }
+ }
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Spinner.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Spinner.as
new file mode 100644
index 0000000..dd9f982
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Spinner.as
@@ -0,0 +1,182 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.IRangeModel;
+ import org.apache.royale.core.StyledUIBase;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ [Event(name="valueChange", type="org.apache.royale.events.Event")]
+
+ /**
+ * The Spinner class is a component that displays a control for incrementing a value
+ * and a control for decrementing a value. The org.apache.royale.jewel.NumericStepper
+ * uses a Spinner as part of the component. Spinner uses the following beads:
+ *
+ * org.apache.royale.core.IBeadModel: an IRangeModel to hold the properties.
+ * org.apache.royale.core.IBeadView: the bead that constructs the visual parts of the Spinner.
+ * org.apache.royale.core.IBeadController: a bead that handles the input events.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class Spinner extends StyledUIBase
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function Spinner()
+ {
+ super();
+ typeNames = "jewel spinner";
+ }
+
+ /**
+ * The current value of the Spinner.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IRangeModel
+ */
+ public function get value():Number
+ {
+ return IRangeModel(model).value;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IRangeModel
+ */
+ public function set value(newValue:Number):void
+ {
+ IRangeModel(model).value = newValue;
+ }
+
+ /**
+ * The minimum value of the Spinner.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IRangeModel
+ */
+ public function get minimum():Number
+ {
+ return IRangeModel(model).minimum;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IRangeModel
+ */
+ public function set minimum(value:Number):void
+ {
+ IRangeModel(model).minimum = value;
+ }
+
+ /**
+ * The maximum value of the Spinner.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IRangeModel
+ */
+ public function get maximum():Number
+ {
+ return IRangeModel(model).maximum;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IRangeModel
+ */
+ public function set maximum(value:Number):void
+ {
+ IRangeModel(model).maximum = value;
+ }
+
+ /**
+ * The modulus for the value. If this property is set,
+ * the value displayed with a muliple of the snapInterval.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IRangeModel
+ */
+ public function get snapInterval():Number
+ {
+ return IRangeModel(model).snapInterval;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IRangeModel
+ */
+ public function set snapInterval(value:Number):void
+ {
+ IRangeModel(model).snapInterval = value;
+ }
+
+ /**
+ * The amount to increase or descrease the value. The value
+ * will not exceed the minimum or maximum value. The final
+ * value is affected by the snapInterval.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IRangeModel
+ */
+ public function get stepSize():Number
+ {
+ return IRangeModel(model).stepSize;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IRangeModel
+ */
+ public function set stepSize(value:Number):void
+ {
+ IRangeModel(model).stepSize = value;
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ addElementToWrapper(this,'div');
+ positioner = element;
+ return element;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as
new file mode 100644
index 0000000..f2e54ab
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as
@@ -0,0 +1,342 @@
+
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.DataContainerBase;
+ import org.apache.royale.core.ISelectionModel;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.beads.models.TableModel;
+ import org.apache.royale.utils.ClassSelectorList;
+ import org.apache.royale.utils.IClassSelectorListSupport;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ [DefaultProperty("columns")]
+
+ /**
+ * Indicates that the initialization of the list is complete.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="initComplete", type="org.apache.royale.events.Event")]
+
+ /**
+ * The change event is dispatched whenever the list's selection changes.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="change", type="org.apache.royale.events.Event")]
+
+ /**
+ * The Table class represents an HTML <table> element.
+ *
+ * This Table component uses a data mapper and item renderers to generate
+ * a Table from a data source, in opposite to SimpleTable component that is a
+ * declarative mxml.
+ *
+ * As well, DataGrid is a more complex component
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class Table extends DataContainerBase implements IClassSelectorListSupport
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function Table()
+ {
+ super();
+
+ typeNames = "jewel table";
+ classSelectorList = new ClassSelectorList(this);
+ }
+
+ protected var classSelectorList:ClassSelectorList;
+
+ COMPILE::JS
+ override protected function setClassName(value:String):void
+ {
+ classSelectorList.addNames(value);
+ }
+
+ /**
+ * The list of TableColumn objects displayed by this table.
+ * Each column selects different data provider item properties to display.
+ *
+ * The default value is null.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get columns():Array
+ {
+ return TableModel(model).columns;
+ }
+ public function set columns(value:Array):void
+ {
+ TableModel(model).columns = value;
+ }
+
+ private var _fixedHeader:Boolean;
+ /**
+ * Makes the header of the table fixed so the data rows will scroll
+ * behind it.
+ *
+ * The default value is false.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get fixedHeader():Boolean
+ {
+ return _fixedHeader;
+ }
+ public function set fixedHeader(value:Boolean):void
+ {
+ _fixedHeader = value;
+
+ toggleClass("fixedHeader", _fixedHeader);
+ }
+
+ // private var _tableDataHeight:Boolean;
+ /**
+ * Makes the header of the table fixed so the data rows will scroll
+ * behind it.
+ *
+ * The default value is false.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ // public function get tableDataHeight():Boolean
+ // {
+ // return _tableDataHeight;
+ // }
+ // public function set tableDataHeight(value:Boolean):void
+ // {
+ // _tableDataHeight = value;
+ // }
+
+ /**
+ * A list of data items that correspond to the rows in the table.
+ * Each table column is associated with a property of the data items to display that property in the table cells.
+ *
+ * The default value is null.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get dataProvider():Object
+ {
+ return TableModel(model).dataProvider;
+ }
+ public function set dataProvider(value:Object):void
+ {
+ TableModel(model).dataProvider = value;
+ }
+
+ /**
+ * The index of the currently selected item. Changing this value
+ * also changes the selectedItem property.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.ISelectionModel
+ */
+ [Bindable("change")]
+ public function get selectedIndex():int
+ {
+ return ISelectionModel(model).selectedIndex;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.ISelectionModel
+ */
+ public function set selectedIndex(value:int):void
+ {
+ ISelectionModel(model).selectedIndex = value;
+ }
+
+ /**
+ * The item currently selected. Changing this value also
+ * changes the selectedIndex property.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.ISelectionModel
+ */
+ [Bindable("change")]
+ public function get selectedItem():Object
+ {
+ return ISelectionModel(model).selectedItem;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.ISelectionModel
+ */
+ public function set selectedItem(value:Object):void
+ {
+ ISelectionModel(model).selectedItem = value;
+ }
+
+ /**
+ * The item property currently selected. Changing this value also
+ * changes the selectedIndex property.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.ISelectionModel
+ */
+ [Bindable("change")]
+ public function get selectedItemProperty():Object
+ {
+ return TableModel(model).selectedItemProperty;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.ISelectionModel
+ */
+ public function set selectedItemProperty(value:Object):void
+ {
+ TableModel(model).selectedItemProperty = value;
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this, 'table');
+ }
+
+ /**
+ * Add a class selector to the list.
+ *
+ * @param name Name of selector to add.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function addClass(name:String):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.add(name);
+ }
+ }
+
+ /**
+ * Removes a class selector from the list.
+ *
+ * @param name Name of selector to remove.
+ *
+ * @royaleignorecoercion HTMLElement
+ * @royaleignorecoercion DOMTokenList
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function removeClass(name:String):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.remove(name);
+ }
+ }
+
+ /**
+ * Add or remove a class selector to/from the list.
+ *
+ * @param name Name of selector to add or remove.
+ * @param value True to add, False to remove.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function toggleClass(name:String, value:Boolean):void
+ {
+ COMPILE::JS
+ {
+ classSelectorList.toggle(name, value);
+ }
+ }
+
+ /**
+ * Search for the name in the element class list
+ *
+ * @param name Name of selector to find.
+ * @return return true if the name is found or false otherwise.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function containsClass(name:String):Boolean
+ {
+ COMPILE::JS
+ {
+ return classSelectorList.contains(name);
+ }
+ COMPILE::SWF
+ {//not implemented
+ return false;
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextArea.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextArea.as
new file mode 100644
index 0000000..3ce273c
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextArea.as
@@ -0,0 +1,147 @@
+//
+// 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.textinput.TextInputBase;
+
+ COMPILE::JS
+ {
+ import goog.events;
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The TextArea 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.4
+ */
+ public class TextArea extends TextInputBase
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function TextArea()
+ {
+ super();
+
+ typeNames = "jewel textarea";
+ }
+
+ private var _rows:int = 2;
+ /**
+ * The number of rows in the textarea. Defaults to 2
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get rows():int
+ {
+ return _rows;
+ }
+ /**
+ * @private
+ */
+ public function set rows(value:int):void
+ {
+ _rows = value;
+
+ COMPILE::JS
+ {
+ input.setAttribute('rows', _rows);
+ }
+ }
+
+ private var _maxrows:int = 0;
+ /**
+ * The max number of rows in the textarea.
+ *
+ * @default 0
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get maxrows():int
+ {
+ return _maxrows;
+ }
+ /**
+ * @private
+ */
+ public function set maxrows(value:int):void
+ {
+ _maxrows = value;
+
+ COMPILE::JS
+ {
+ input.setAttribute('maxrows', _maxrows);
+ }
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion HTMLDivElement
+ * @royaleignorecoercion HTMLInputElement
+ * @royaleignorecoercion HTMLLabelElement
+ * @royaleignorecoercion Text
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ div = document.createElement('div') as HTMLDivElement;
+
+ input = addElementToWrapper(this,'textarea') as HTMLInputElement;
+ input.setAttribute('type', 'text');
+ input.setAttribute('rows', rows);
+ //input.setAttribute('maxrows', maxrows);
+
+ //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 = "jewel-textinput-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/TextButton.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as
deleted file mode 100644
index 67fdcdd..0000000
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as
+++ /dev/null
@@ -1,129 +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.
-//
-////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel
-{
- import org.apache.royale.core.ITextModel;
-
- COMPILE::JS
- {
- import org.apache.royale.core.WrappedHTMLElement;
- import org.apache.royale.html.util.addElementToWrapper;
- }
-
- [DefaultProperty("text")]
-
- /**
- * 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 Button
- {
- /**
- * Constructor.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.2
- */
- public function TextButton()
- {
- super();
-
- typeNames = "jewel textbutton";
- }
-
- /**
- * @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');
- }
- }
- }
-}
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/TextInput.as
similarity index 76%
rename from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
rename to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextInput.as
index 523b98d..967fef3 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextInput.as
@@ -17,7 +17,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
- import org.apache.royale.jewel.supportClasses.TextFieldBase;
+ import org.apache.royale.jewel.supportClasses.textinput.TextInputBase;
COMPILE::JS
{
@@ -27,16 +27,16 @@
}
/**
- * The TextField class implements the basic control for
+ * The TextInput 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
+ * @productversion Royale 0.9.4
*/
- public class TextField extends TextFieldBase
+ public class TextInput extends TextInputBase
{
/**
* Constructor.
@@ -44,28 +44,13 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.2
+ * @productversion Royale 0.9.4
*/
- public function TextField()
+ public function TextInput()
{
super();
- typeNames = "jewel textfield";
- }
-
- COMPILE::JS
- private var _positioner:WrappedHTMLElement;
-
- COMPILE::JS
- override public function get positioner():WrappedHTMLElement
- {
- return _positioner;
- }
-
- COMPILE::JS
- override public function set positioner(value:WrappedHTMLElement):void
- {
- _positioner = value;
+ typeNames = "jewel textinput";
}
/**
@@ -78,7 +63,7 @@
COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
- var div:HTMLDivElement = document.createElement('div') as HTMLDivElement;
+ div = document.createElement('div') as HTMLDivElement;
input = addElementToWrapper(this,'input') as HTMLInputElement;
input.setAttribute('type', 'text');
@@ -88,7 +73,7 @@
goog.events.listen(input, 'input', textChangeHandler);
//label = document.createElement('label') as HTMLLabelElement;
- //label.className = "jewel-textfield-label";
+ //label.className = "jewel-textinput-label";
//textNode = document.createTextNode('') as Text;
//label.appendChild(textNode);
@@ -98,7 +83,7 @@
positioner = div as WrappedHTMLElement;
//(label as WrappedHTMLElement).royale_wrapper = this;
- _positioner.royale_wrapper = this;
+ positioner.royale_wrapper = this;
return element;
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TitleBar.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TitleBar.as
index a9c7b57..4afbc35 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TitleBar.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TitleBar.as
@@ -18,11 +18,19 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
- import org.apache.royale.html.TitleBar;
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IBeadLayout;
+ import org.apache.royale.core.IChrome;
+ import org.apache.royale.core.ITitleBarModel;
import org.apache.royale.core.ValuesManager;
- import org.apache.royale.utils.MXMLDataInterpreter;
- import org.apache.royale.events.Event;
+ import org.apache.royale.utils.loadBeadFromValuesManager;
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
/**
* The TitleBar class is a Container component that displays a title and an
* optional close button. The TitleBar uses the following bead types:
@@ -38,9 +46,9 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
- public class TitleBar extends org.apache.royale.html.TitleBar
+ public class TitleBar extends Group implements IChrome
{
/**
* constructor.
@@ -48,7 +56,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function TitleBar()
{
@@ -56,5 +64,87 @@
typeNames = "jewel titlebar";
}
+
+ /**
+ * The title string to display.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.ITitleBarModel
+ */
+ public function get title():String
+ {
+ return ITitleBarModel(model).title;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.ITitleBarModel
+ */
+ public function set title(value:String):void
+ {
+ ITitleBarModel(model).title = value;
+ }
+
+ /**
+ * The HTML title to display.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.ITitleBarModel
+ */
+ public function get htmlTitle():String
+ {
+ return ITitleBarModel(model).htmlTitle;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.ITitleBarModel
+ */
+ public function set htmlTitle(value:String):void
+ {
+ ITitleBarModel(model).htmlTitle = value;
+ }
+
+ /**
+ * Whether or not to show a org.apache.royale.html.Button that indicates the component
+ * may be closed.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.ITitleBarModel
+ */
+ public function get showCloseButton():Boolean
+ {
+ return ITitleBarModel(model).showCloseButton;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.ITitleBarModel
+ */
+ public function set showCloseButton(value:Boolean):void
+ {
+ ITitleBarModel(model).showCloseButton = value;
+ }
+
+ /**
+ * @private
+ */
+ override public function addedToParent():void
+ {
+ super.addedToParent();
+ loadBeadFromValuesManager(IBeadLayout, "iBeadLayout", this);
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this,'div');
+ }
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ToggleButton.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ToggleButton.as
new file mode 100644
index 0000000..2198ea8
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ToggleButton.as
@@ -0,0 +1,201 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.ISelectable;
+ import org.apache.royale.core.IToggleButtonModel;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.core.IIcon;
+
+ COMPILE::SWF
+ {
+ import flash.events.MouseEvent;
+ }
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.events.MouseEvent;
+ }
+
+ //--------------------------------------
+ // Events
+ //--------------------------------------
+
+ /**
+ * Dispatched when the user clicks on a button.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="click", type="org.apache.royale.events.MouseEvent")]
+
+ /**
+ * Dispatched when ToggleTextButton is being selected/unselected.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="change", type="org.apache.royale.events.Event")]
+
+ /**
+ * The ToggleButton class is a Button that supports
+ * a selected property.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class ToggleButton extends IconButton implements ISelectable
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ToggleButton()
+ {
+ super();
+
+ typeNames = "jewel togglebutton";
+
+ COMPILE::SWF
+ {
+ addEventListener(MouseEvent.CLICK, internalMouseHandler);
+ }
+ }
+
+ private var _selected:Boolean = false;
+
+ [Bindable("change")]
+ /**
+ * <code>true</code> if the Button is selected.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get selected():Boolean
+ {
+ COMPILE::SWF
+ {
+ return IToggleButtonModel(model).selected;
+ }
+ COMPILE::JS
+ {
+ return _selected;
+ }
+ }
+
+ /**
+ * @private
+ */
+ public function set selected(value:Boolean):void
+ {
+ COMPILE::SWF
+ {
+ IToggleButtonModel(model).selected = value;
+ internalSelected();
+ dispatchEvent(new Event(Event.CHANGE));
+ }
+ COMPILE::JS
+ {
+ if (_selected != value)
+ {
+ _selected = value;
+ internalSelected();
+ dispatchEvent(new Event(Event.CHANGE));
+ }
+ }
+ }
+
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ super.createElement();
+ element.addEventListener(MouseEvent.CLICK, clickHandler, false);
+ internalSelected();
+
+ return element;
+ }
+
+ COMPILE::JS
+ private function clickHandler(event:Event):void
+ {
+ selected = !selected;
+ }
+
+ COMPILE::SWF
+ private function internalMouseHandler(event:MouseEvent) : void
+ {
+ selected = !selected;
+ }
+
+ COMPILE::SWF
+ private var savedClassName:String;
+
+ private function internalSelected():void
+ {
+ COMPILE::SWF
+ {
+ if(!savedClassName == null)
+ savedClassName = className;
+ var name:String = savedClassName;
+ if (selected)
+ {
+ className = "selected" + (name ? " " + name : "");
+ }
+ else
+ {
+ className = (name ? " " + name : "");
+ }
+ }
+
+ var isToggleTextButtonSelected:Boolean = containsClass("selected");
+ //sync the class with the state
+ if(isToggleTextButtonSelected != _selected)
+ toggleClass("selected", _selected);
+
+ if(icon && icon is ISelectable)
+ {
+ var selectableIcon:ISelectable = icon as ISelectable;
+ selectableIcon.selected = _selected;
+ }
+ }
+
+ override public function set icon(value:IIcon):void
+ {
+ super.icon = value;
+ if(icon && icon is ISelectable)
+ {
+ var selectableIcon:ISelectable = icon as ISelectable;
+ selectableIcon.selected = _selected;
+ }
+ }
+
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBar.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBar.as
new file mode 100644
index 0000000..9d928da
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBar.as
@@ -0,0 +1,238 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.IChild;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.events.Event;
+
+ COMPILE::SWF
+ {
+ import org.apache.royale.core.IRenderedObject;
+ import flash.display.DisplayObject;
+ }
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The TopAppBar class is a container component for different items like
+ * application title, navigation icon, and/or icon buttons.
+ * Normaly is located at the top of an application and use to fill all
+ * horizontal availale space. It's responsive as screen size changes
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class TopAppBar extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function TopAppBar()
+ {
+ super();
+
+ typeNames = "jewel topappbar"
+ setListenersForFixed();
+ }
+
+ COMPILE::JS
+ private var currentOffset:Number = 0;
+ COMPILE::JS
+ private var lastPosition:Number = 0;
+
+ private function setListenersForFixed():void
+ {
+ COMPILE::JS
+ {
+ if(_fixed)
+ {
+ header.classList.add("fixed");
+ window.removeEventListener('scroll', scrollHandler, false);
+ }
+ else
+ {
+ header.classList.remove("fixed");
+ window.addEventListener('scroll', scrollHandler, false);
+ }
+ }
+ }
+
+ /**
+ * If not fixed this scroll handler manages that the top bar doesn't get lost above
+ * and will get back to screen sooner since only get scroll up by its size
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ private function scrollHandler(event:Event = null):void
+ {
+ COMPILE::JS
+ {
+ var offset:Number;
+ var currentPosition:Number = Math.max(window.pageYOffset, 0);
+ var diff:Number = currentPosition - lastPosition;
+ lastPosition = currentPosition;
+
+ currentOffset -= diff;
+
+ if (currentOffset > 0) {
+ currentOffset = 0;
+ } else if (Math.abs(currentOffset) > header.clientHeight) {
+ currentOffset = -header.clientHeight;
+ }
+
+ offset = currentOffset;
+ if (Math.abs(offset) >= header.clientHeight) {
+ offset = -128;
+ }
+
+ header.style.top = offset + "px";
+ }
+ }
+
+
+ protected var _fixed:Boolean = false;
+ /**
+ * A boolean flag to activate "fixed" effect selector.
+ * Optional. Makes the header always visible.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get fixed():Boolean
+ {
+ return _fixed;
+ }
+ public function set fixed(value:Boolean):void
+ {
+ if (_fixed != value)
+ {
+ _fixed = value;
+
+ //toggleClass("fixed", _fixed);
+ setListenersForFixed();
+ }
+ }
+
+
+ COMPILE::JS
+ private var header:HTMLElement;
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ header = addElementToWrapper(this,'header');
+ header.className = "topBarAppHeader";
+ header.style.top = "0px";
+
+ var div:HTMLDivElement = document.createElement('div') as HTMLDivElement;
+ div.appendChild(header);
+
+ positioner = div as WrappedHTMLElement;
+ positioner.royale_wrapper = this;
+
+ return element;
+ }
+
+ /**
+ * @copy org.apache.royale.core.IParent#addElement()
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IUIBase
+ */
+ override public function addElement(c:IChild, dispatchEvent:Boolean = true):void
+ {
+ COMPILE::SWF
+ {
+ if (c is IUIBase)
+ {
+ if (c is IRenderedObject)
+ $addChild(IRenderedObject(c).$displayObject);
+ else
+ $addChild(c as DisplayObject);
+ IUIBase(c).addedToParent();
+ }
+ else
+ $addChild(c as DisplayObject);
+ }
+ COMPILE::JS
+ {
+ header.appendChild(c.positioner);
+ (c as IUIBase).addedToParent();
+ }
+ }
+
+ private var _hasDrawer:Boolean;
+
+ /**
+ * a boolean flag to indicate if the container needs to make some room
+ * for a Drawer so content doesn't get lost on the right
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get hasDrawer():Boolean
+ {
+ return _hasDrawer;
+ }
+
+ public function set hasDrawer(value:Boolean):void
+ {
+ if (_hasDrawer != value)
+ {
+ _hasDrawer = value;
+
+ COMPILE::JS
+ {
+ if(_hasDrawer)
+ {
+ header.classList.add("has-drawer");
+ }
+ else
+ {
+ header.classList.remove("has-drawer");
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarRow.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarRow.as
new file mode 100644
index 0000000..5547fef
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarRow.as
@@ -0,0 +1,53 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The TopAppBarRow class is a container component used with TopAppBar
+ * It represent a row. TopAppBar supports more than one row
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class TopAppBarRow extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function TopAppBarRow()
+ {
+ super();
+
+ typeNames = "jewel topappbarrow"
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarSection.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarSection.as
new file mode 100644
index 0000000..04d2d24
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarSection.as
@@ -0,0 +1,87 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The TopAppBarSection class is a container component for items in
+ * an TopAppBar row.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class TopAppBarSection extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function TopAppBarSection()
+ {
+ super();
+
+ typeNames = "jewel topappbarsection"
+ }
+
+ protected var _alignRight:Boolean;
+ /**
+ * A boolean flag to activate "alignRight" effect selector.
+ * It aligns all items inside the section to the right.
+ * Optional.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get alignRight():Boolean
+ {
+ return _alignRight;
+ }
+ public function set alignRight(value:Boolean):void
+ {
+ if (_alignRight != value)
+ {
+ _alignRight = value;
+
+ toggleClass("alignRight", _alignRight);
+ }
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this, 'section');
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarTitle.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarTitle.as
new file mode 100644
index 0000000..46a00a0
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TopAppBarTitle.as
@@ -0,0 +1,93 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The TopAppBarTitle class is the application title
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class TopAppBarTitle extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function TopAppBarTitle()
+ {
+ super();
+
+ typeNames = "jewel topappbartitle"
+ }
+
+ COMPILE::JS
+ protected var textNode:Text;
+
+ private var _text:String = "";
+ /**
+ * The text of the element
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get text():String
+ {
+ return _text;
+ }
+ public function set text(value:String):void
+ {
+ _text = value;
+
+ COMPILE::JS
+ {
+ if(textNode == null)
+ {
+ textNode = document.createTextNode('') as Text;
+ element.appendChild(textNode);
+ }
+
+ textNode.nodeValue = value;
+ }
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this, 'span');
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VGroup.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VGroup.as
new file mode 100644
index 0000000..52ce9dc
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VGroup.as
@@ -0,0 +1,112 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.beads.layouts.VerticalLayout;
+ import org.apache.royale.utils.StringUtil;
+
+ /**
+ * This Group subclass uses VerticalLayout as its default layout.
+ *
+ * @toplevel
+ * @see org.apache.royale.jewel.beads.layouts
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class VGroup extends Group
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function VGroup()
+ {
+ super();
+
+ typeNames = "jewel " + VerticalLayout.LAYOUT_TYPE_NAMES;
+
+ layout = new VerticalLayout();
+ addBead(layout);
+ }
+
+ public function get layout():VerticalLayout
+ {
+ return _layout as VerticalLayout;
+ }
+ public function set layout(value:VerticalLayout):void
+ {
+ _layout = value;
+ }
+
+ // public function get gap():Boolean
+ // {
+ // return layout.gap;
+ // }
+
+ // public function set gap(value:Boolean):void
+ // {
+ // typeNames = StringUtil.removeWord(typeNames, " gap");
+ // typeNames += " gap";
+
+ // COMPILE::JS
+ // {
+ // if (parent)
+ // setClassName(computeFinalClassNames());
+ // }
+
+ // layout.gap = value;
+ // }
+
+ /**
+ * Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
+ * Activate "gap-{X}x{GAP_STEP}px" effect selector to set a numeric gap between elements.
+ * i.e: gap-2x3px will result in a gap of 6px
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get gap():Number
+ {
+ return layout.gap;
+ }
+
+ public function set gap(value:Number):void
+ {
+ typeNames = StringUtil.removeWord(typeNames, " gap-" + layout.gap + "x" + VerticalLayout.GAP_STEP + "px");
+ if(value != 0)
+ typeNames += " gap-" + value + "x" + VerticalLayout.GAP_STEP + "px";
+
+ COMPILE::JS
+ {
+ if (parent)
+ setClassName(computeFinalClassNames());
+ }
+
+ layout.gap = value;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/View.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/View.as
new file mode 100644
index 0000000..b4e146f
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/View.as
@@ -0,0 +1,126 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.ViewBase;
+ import org.apache.royale.core.IMXMLDocument;
+ import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.utils.MXMLDataInterpreter;
+
+ /**
+ * The default property uses when additional MXML content appears within an element's
+ * definition in an MXML file.
+ */
+ [DefaultProperty("mxmlContent")]
+
+ /**
+ * The View class is the class for most views in a Royale
+ * application. It is generally used as the root tag of MXML
+ * documents and UI controls and containers are added to it.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class View extends ViewBase implements IMXMLDocument
+ {
+ public function View()
+ {
+ super();
+ }
+
+ private var _mxmlDescriptor:Array;
+ private var _mxmlDocument:Object = this;
+ private var _initialized:Boolean;
+
+ /**
+ * @private
+ */
+ override public function addedToParent():void
+ {
+ if (!_initialized)
+ {
+ // each MXML file can also have styles in fx:Style block
+ ValuesManager.valuesImpl.init(this);
+ }
+
+ super.addedToParent();
+
+ if (!_initialized)
+ {
+ MXMLDataInterpreter.generateMXMLInstances(_mxmlDocument, this, MXMLDescriptor);
+
+ dispatchEvent(new Event("initBindings"));
+ dispatchEvent(new Event("initComplete"));
+ _initialized = true;
+
+ // - why was this added here? childrenAdded(); //?? Is this necessary since MXMLDataInterpreter will already have called it
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.Application#MXMLDescriptor
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get MXMLDescriptor():Array
+ {
+ return _mxmlDescriptor;
+ }
+
+ /**
+ * @private
+ */
+ public function setMXMLDescriptor(document:Object, value:Array):void
+ {
+ _mxmlDocument = document;
+ _mxmlDescriptor = value;
+ }
+
+ /**
+ * @copy org.apache.royale.core.Application#generateMXMLAttributes()
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function generateMXMLAttributes(data:Array):void
+ {
+ MXMLDataInterpreter.generateMXMLProperties(this, data);
+ }
+
+ /**
+ * @copy org.apache.royale.core.ItemRendererClassFactory#mxmlContent
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ *
+ * @royalesuppresspublicvarwarning
+ */
+ public var mxmlContent:Array;
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/AlertController.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/AlertController.as
index 6fcab21..4191c8d 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/AlertController.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/AlertController.as
@@ -36,7 +36,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public class AlertController implements IBeadController
{
@@ -46,7 +46,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function AlertController()
{
@@ -60,7 +60,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get strand():IStrand
{
@@ -73,7 +73,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function set strand(value:IStrand):void
{
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/ComboBoxController.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/ComboBoxController.as
new file mode 100644
index 0000000..f547339
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/ComboBoxController.as
@@ -0,0 +1,145 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.controllers
+{
+ COMPILE::SWF
+ {
+ import flash.utils.setTimeout;
+ }
+ import org.apache.royale.core.IBeadController;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.jewel.beads.controls.combobox.IComboBoxView;
+ import org.apache.royale.jewel.beads.views.ListView;
+ import org.apache.royale.jewel.supportClasses.combobox.ComboBoxListDataGroup;
+
+ /**
+ * The ComboBoxController class is responsible for listening to
+ * mouse event related to ComboBox. Events such as selecting a item
+ * or changing the sectedItem.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class ComboBoxController implements IBeadController
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ComboBoxController()
+ {
+ }
+
+ protected var viewBead:IComboBoxView;
+ private var dataGroup:ComboBoxListDataGroup;
+
+ 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.4
+ * @royaleignorecoercion org.apache.royale.jewel.beads.controls.combobox.IComboBoxView
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ viewBead = _strand.getBeadByType(IComboBoxView) as IComboBoxView;
+ if (viewBead) {
+ finishSetup();
+ } else {
+ IEventDispatcher(_strand).addEventListener("viewChanged", finishSetup);
+ }
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ protected function finishSetup(event:Event = null):void
+ {
+ IEventDispatcher(viewBead.button).addEventListener(MouseEvent.CLICK, clickHandler);
+ IEventDispatcher(viewBead.textinput).addEventListener(MouseEvent.CLICK, clickHandler);
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ protected function clickHandler(event:MouseEvent):void
+ {
+ event.stopImmediatePropagation();
+
+ viewBead.popUpVisible = true;
+
+ IEventDispatcher(viewBead.popup).addEventListener(Event.CHANGE, changeHandler);
+
+ // viewBead.popup is ComboBoxList that fills 100% of browser window-> We want ComboBoxListDataGroup inside
+ dataGroup = viewBead.popup.view.contentView.view.contentView;
+
+ IEventDispatcher(dataGroup).addEventListener(MouseEvent.MOUSE_DOWN, handleControlMouseDown);
+ IUIBase(viewBead.popup).addEventListener(MouseEvent.MOUSE_DOWN, removePopUpWhenClickOutside);
+ }
+
+ protected function handleControlMouseDown(event:MouseEvent):void
+ {
+ event.stopImmediatePropagation();
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ protected function removePopUpWhenClickOutside(event:MouseEvent = null):void
+ {
+ IEventDispatcher(dataGroup).removeEventListener(MouseEvent.MOUSE_DOWN, handleControlMouseDown);
+ IUIBase(viewBead.popup).removeEventListener(MouseEvent.MOUSE_DOWN, removePopUpWhenClickOutside);
+ IEventDispatcher(viewBead.popup).removeEventListener(Event.CHANGE, changeHandler);
+ viewBead.popUpVisible = false;
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ private function changeHandler(event:Event):void
+ {
+ event.stopImmediatePropagation();
+ IEventDispatcher(dataGroup).removeEventListener(MouseEvent.MOUSE_DOWN, handleControlMouseDown);
+ IUIBase(viewBead.popup).removeEventListener(MouseEvent.MOUSE_DOWN, removePopUpWhenClickOutside);
+ IEventDispatcher(viewBead.popup).removeEventListener(Event.CHANGE, changeHandler);
+
+ viewBead.popUpVisible = false;
+
+ IEventDispatcher(_strand).dispatchEvent(new Event(Event.CHANGE));
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DateChooserMouseController.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DateChooserMouseController.as
new file mode 100644
index 0000000..58d0ef1
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DateChooserMouseController.as
@@ -0,0 +1,124 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.controllers
+{
+ import org.apache.royale.core.IBeadController;
+ import org.apache.royale.core.IBeadModel;
+ import org.apache.royale.core.IBeadView;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.jewel.beads.models.DateChooserModel;
+ import org.apache.royale.jewel.beads.views.DateChooserView;
+ import org.apache.royale.jewel.supportClasses.datechooser.DateChooserTable;
+
+ /**
+ * The DateChooserMouseController class is responsible for listening to
+ * mouse event related to the DateChooser. Events such as selecting a date
+ * or changing the calendar.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class DateChooserMouseController implements IBeadController
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function DateChooserMouseController()
+ {
+ }
+
+ 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.4
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ model = _strand.getBeadByType(IBeadModel) as DateChooserModel;
+
+ var view:DateChooserView = value.getBeadByType(IBeadView) as DateChooserView;
+ view.prevMonthButton.addEventListener(MouseEvent.CLICK, prevMonthClickHandler);
+ view.nextMonthButton.addEventListener(MouseEvent.CLICK, nextMonthClickHandler);
+
+ IEventDispatcher(view.daysTable).addEventListener(Event.CHANGE, tableHandler);
+ }
+
+ private var model:DateChooserModel;
+
+ private function tableHandler(event:Event):void
+ {
+ var table:DateChooserTable = event.target as DateChooserTable;
+ model.selectedDate = table.selectedItemProperty as Date;
+ }
+
+ /**
+ * @private
+ */
+ private function prevMonthClickHandler(event:MouseEvent):void
+ {
+ event.preventDefault();
+
+ var model:DateChooserModel = _strand.getBeadByType(IBeadModel) as DateChooserModel;
+ var month:Number = model.displayedMonth - 1;
+ var year:Number = model.displayedYear;
+ if (month < 0) {
+ month = 11;
+ year--;
+ }
+ model.displayedMonth = month;
+ model.displayedYear = year;
+ }
+
+ /**
+ * @private
+ */
+ private function nextMonthClickHandler(event:MouseEvent):void
+ {
+ event.preventDefault();
+
+ var model:DateChooserModel = _strand.getBeadByType(IBeadModel) as DateChooserModel;
+ var month:Number = model.displayedMonth + 1;
+ var year:Number = model.displayedYear;
+ if (month >= 12) {
+ month = 0;
+ year++;
+ }
+ model.displayedMonth = month;
+ model.displayedYear = year;
+ }
+
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DateFieldMouseController.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DateFieldMouseController.as
new file mode 100644
index 0000000..1320fbe
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DateFieldMouseController.as
@@ -0,0 +1,208 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.controllers
+{
+ import org.apache.royale.core.IBeadController;
+ import org.apache.royale.core.IDateChooserModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.jewel.Table;
+ import org.apache.royale.jewel.beads.views.DateChooserView;
+ import org.apache.royale.jewel.beads.views.DateFieldView;
+
+ /**
+ * The DateFieldMouseController class is responsible for monitoring
+ * the mouse events on the elements of the DateField. A click on the
+ * DateField's menu button triggers the pop-up, for example.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class DateFieldMouseController implements IBeadController
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function DateFieldMouseController()
+ {
+ }
+
+ private var viewBead:DateFieldView;
+ private var daysTable:Table;
+ private var model:IDateChooserModel;
+
+ 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.4
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ model = _strand.getBeadByType(IDateChooserModel) as IDateChooserModel;
+
+ viewBead = _strand.getBeadByType(DateFieldView) as DateFieldView;
+ IEventDispatcher(viewBead.menuButton).addEventListener(MouseEvent.CLICK, clickHandler);
+
+ viewBead.textInput.addEventListener(Event.CHANGE, inputSelectionChangeHandler);
+ }
+
+ /**
+ * @private
+ */
+ private function clickHandler(event:MouseEvent):void
+ {
+ event.stopImmediatePropagation();
+
+ viewBead.popUpVisible = true;
+ IEventDispatcher(viewBead.popUp).addEventListener(Event.CHANGE, changeHandler);
+ // removeDismissHandler();
+
+ // use a timer to delay the installation of the event handler, otherwise
+ // the event handler is called immediately and will dismiss the popup.
+ // var t:Timer = new Timer(0.25, 1);
+ // t.addEventListener("timer", addDismissHandler);
+ // t.start();
+
+ // viewBead.popUp is DateChooser that fills 100% of browser window-> We want Table inside
+ daysTable = (viewBead.popUp.getBeadByType(DateChooserView) as DateChooserView).daysTable;
+
+ IEventDispatcher(daysTable).addEventListener(MouseEvent.MOUSE_DOWN, handleControlMouseDown);
+ IUIBase(viewBead.popUp).addEventListener(MouseEvent.MOUSE_DOWN, removePopUpWhenClickOutside);
+ }
+
+ protected function handleControlMouseDown(event:MouseEvent):void
+ {
+ event.stopImmediatePropagation();
+ }
+
+ protected function removePopUpWhenClickOutside(event:MouseEvent = null):void
+ {
+ IEventDispatcher(daysTable).removeEventListener(MouseEvent.MOUSE_DOWN, handleControlMouseDown);
+ IUIBase(viewBead.popUp).removeEventListener(MouseEvent.MOUSE_DOWN, removePopUpWhenClickOutside);
+ IEventDispatcher(viewBead.popUp).removeEventListener(Event.CHANGE, changeHandler);
+ viewBead.popUpVisible = false;
+ }
+
+ /**
+ * @private
+ */
+ private function changeHandler(event:Event):void
+ {
+ event.stopImmediatePropagation();
+ IEventDispatcher(daysTable).removeEventListener(MouseEvent.MOUSE_DOWN, handleControlMouseDown);
+ IUIBase(viewBead.popUp).removeEventListener(MouseEvent.MOUSE_DOWN, removePopUpWhenClickOutside);
+ IEventDispatcher(viewBead.popUp).removeEventListener(Event.CHANGE, changeHandler);
+
+ model.selectedDate = IDateChooserModel(viewBead.popUp.getBeadByType(IDateChooserModel)).selectedDate;
+
+ viewBead.popUpVisible = false;
+ IEventDispatcher(_strand).dispatchEvent(new Event(Event.CHANGE));
+
+ // removeDismissHandler();
+ }
+
+ private function isValidDate(d:*):Boolean
+ {
+ return (d is Date) && !isNaN(d);
+ }
+
+ /**
+ * @private
+ */
+ private function inputSelectionChangeHandler(event:Event):void
+ {
+ var len:int = viewBead.textInput.text.length;
+ if(len == 10)
+ {
+ var date:Date = new Date(viewBead.textInput.text);
+ model.selectedDate = isValidDate(date) ? date : null;
+ }
+ }
+
+ /**
+ * @private
+ */
+ // private function addDismissHandler(event:Event):void
+ // {
+ // var host:UIBase = UIUtils.findPopUpHost(_strand as UIBase) as UIBase;
+ // if (host) {
+ // host.addEventListener(MouseEvent.CLICK, dismissHandler);
+ // }
+ // }
+
+ /**
+ * @private
+ */
+ // private function removeDismissHandler():void
+ // {
+ // var host:UIBase = UIUtils.findPopUpHost(_strand as UIBase) as UIBase;
+ // if (host) {
+ // host.removeEventListener(MouseEvent.CLICK, dismissHandler);
+ // }
+ // }
+
+ /**
+ * @private
+ */
+ // private function dismissHandler(event:MouseEvent):void
+ // {
+ // var popup:IUIBase = IUIBase(viewBead.popUp);
+
+ // COMPILE::SWF {
+ // var before:IUIBase = event.targetBeforeBubbling["royale_wrapper"] as IUIBase;
+ // if (before) {
+ // while (before != null) {
+ // if (before == popup) return;
+ // before = before.parent as IUIBase;
+ // }
+ // }
+ // }
+
+ // COMPILE::JS {
+ // var before:IUIBase = event.target as IUIBase;
+ // if (before) {
+ // while (before != null) {
+ // if (before == popup) return;
+ // before = before.parent as IUIBase;
+ // }
+ // }
+ // }
+
+ // viewBead.popUpVisible = false;
+ // // removeDismissHandler();
+ // }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DropDownListController.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DropDownListController.as
new file mode 100644
index 0000000..9a75211
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DropDownListController.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.beads.controllers
+{
+ import flash.display.DisplayObject;
+ import flash.geom.Point;
+
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IBeadController;
+ import org.apache.royale.core.ISelectionModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.html.beads.IDropDownListView;
+
+ /**
+ * The DropDownListController class is the controller for
+ * org.apache.royale.html.DropDownList. Controllers
+ * watch for events from the interactive portions of a View and
+ * update the data model or dispatch a semantic event.
+ * This controller watches for the click event and displays the
+ * dropdown/popup, and watches the dropdown/popup for change events
+ * and updates the selection model accordingly.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class DropDownListController implements IBead, IBeadController
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function DropDownListController()
+ {
+ }
+
+ 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.4
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ IEventDispatcher(value).addEventListener(org.apache.royale.events.MouseEvent.CLICK, clickHandler);
+ }
+
+ private function clickHandler(event:org.apache.royale.events.MouseEvent):void
+ {
+ var viewBead:IDropDownListView = _strand.getBeadByType(IDropDownListView) as IDropDownListView;
+ var selectionModel:ISelectionModel = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
+ var popUpModel:ISelectionModel = UIBase(viewBead.popUp).model as ISelectionModel;
+ DisplayObject(viewBead.popUp).width = DisplayObject(_strand).width;
+ popUpModel.dataProvider = selectionModel.dataProvider;
+ popUpModel.labelField = selectionModel.labelField;
+ viewBead.popUpVisible = true; // adds to display list as well
+ popUpModel.selectedIndex = selectionModel.selectedIndex;
+ var pt:Point = new Point(DisplayObject(_strand).x, DisplayObject(_strand).y + DisplayObject(_strand).height);
+ pt = DisplayObject(_strand).parent.localToGlobal(pt);
+ DisplayObject(viewBead.popUp).x = pt.x;
+ DisplayObject(viewBead.popUp).y = pt.y;
+ IEventDispatcher(viewBead.popUp).addEventListener(Event.CHANGE, changeHandler);
+ IUIBase(_strand).topMostEventDispatcher.addEventListener(org.apache.royale.events.MouseEvent.CLICK, dismissHandler);
+ }
+
+ private function dismissHandler(event:org.apache.royale.events.MouseEvent):void
+ {
+ if (event.target == _strand) return;
+
+ IUIBase(_strand).topMostEventDispatcher.removeEventListener(org.apache.royale.events.MouseEvent.CLICK, dismissHandler);
+ var viewBead:IDropDownListView = _strand.getBeadByType(IDropDownListView) as IDropDownListView;
+ viewBead.popUpVisible = false;
+ }
+
+ private function changeHandler(event:Event):void
+ {
+ var viewBead:IDropDownListView = _strand.getBeadByType(IDropDownListView) as IDropDownListView;
+ viewBead.popUpVisible = false;
+ var selectionModel:ISelectionModel = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
+ var popUpModel:ISelectionModel = UIBase(viewBead.popUp).model as ISelectionModel;
+ selectionModel.selectedIndex = popUpModel.selectedIndex;
+ IEventDispatcher(_strand).dispatchEvent(new Event(Event.CHANGE));
+ }
+
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/ItemRendererMouseController.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/ItemRendererMouseController.as
new file mode 100644
index 0000000..63920c5
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/ItemRendererMouseController.as
@@ -0,0 +1,219 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.controllers
+{
+ import org.apache.royale.core.IBeadController;
+ import org.apache.royale.core.ISelectableItemRenderer;
+ import org.apache.royale.core.IStrand;
+COMPILE::SWF {
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.MouseEvent;
+}
+COMPILE::JS {
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.events.BrowserEvent;
+ import goog.events.Event;
+ import goog.events.EventType;
+ import goog.events;
+}
+ import org.apache.royale.events.ItemClickedEvent;
+
+ /**
+ * The ItemRendererMouseController class can mouse events in itemRenderers. This
+ * includes roll-overs, mouse down, and mouse up. These platform-specific events are then
+ * re-dispatched as Royale events.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignoreimport goog.events.Event
+ */
+ public class ItemRendererMouseController implements IBeadController
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ItemRendererMouseController()
+ {
+ }
+
+ private var renderer:ISelectableItemRenderer;
+ 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.4
+ * @royaleignorecoercion org.apache.royale.core.ISelectableItemRenderer
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ renderer = value as ISelectableItemRenderer;
+
+ COMPILE::SWF {
+ renderer.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
+ renderer.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
+ renderer.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
+ renderer.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
+ }
+
+ COMPILE::JS {
+ var element:WrappedHTMLElement = (_strand as UIBase).element;
+
+ goog.events.listen(element, goog.events.EventType.MOUSEOVER, this.handleMouseOver);
+ goog.events.listen(element, goog.events.EventType.MOUSEOUT, this.handleMouseOut);
+ goog.events.listen(element, goog.events.EventType.MOUSEDOWN, this.handleMouseDown);
+ goog.events.listen(element, goog.events.EventType.CLICK, this.handleMouseUp);
+ }
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ protected function rollOverHandler(event:MouseEvent):void
+ {
+ var target:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
+ if (target)
+ {
+ target.dispatchEvent(new Event("itemRollOver",true));
+ }
+ }
+
+ /**
+ * @royaleemitcoercion org.apache.royale.core.ISelectableItemRenderer
+ */
+ COMPILE::JS
+ protected function handleMouseOver(event:BrowserEvent):void
+ {
+ var target:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
+ if (target) {
+ target.dispatchEvent(new Event("itemRollOver",true));
+ }
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ protected function rollOutHandler(event:MouseEvent):void
+ {
+ var target:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
+ if (target)
+ {
+ target.dispatchEvent(new Event("itemRollOut",true));
+ }
+ }
+
+ /**
+ * @royaleemitcoercion org.apache.royale.core.ISelectableItemRenderer
+ */
+ COMPILE::JS
+ protected function handleMouseOut(event:BrowserEvent):void
+ {
+ var target:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
+ if (target)
+ {
+ target.dispatchEvent(new Event("itemRollOut",true));
+ }
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ protected function mouseDownHandler(event:MouseEvent):void
+ {
+ var target:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
+ if (target)
+ {
+ target.down = true;
+ target.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
+ }
+ }
+
+ /**
+ * @private
+ * @royaleemitcoercion org.apache.royale.core.ISelectableItemRenderer
+ */
+ COMPILE::JS
+ protected function handleMouseDown(event:BrowserEvent):void
+ {
+ var target:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
+ if (target)
+ {
+ target.down = true;
+ target.hovered = false;
+ }
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ protected function mouseUpHandler(event:MouseEvent):void
+ {
+ event.stopImmediatePropagation();
+ var target:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
+ if (target)
+ {
+ var newEvent:ItemClickedEvent = new ItemClickedEvent("itemClicked");
+ newEvent.data = target.data;
+ newEvent.multipleSelection = event.shiftKey;
+ newEvent.index = target.index;
+
+ target.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
+ target.dispatchEvent(newEvent);
+ }
+ }
+
+ /**
+ * @private
+ * @royaleemitcoercion org.apache.royale.core.ISelectableItemRenderer
+ */
+ COMPILE::JS
+ protected function handleMouseUp(event:BrowserEvent):void
+ {
+ event.stopImmediatePropagation();
+ var target:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
+ if (target && target.selectable)
+ {
+ var newEvent:ItemClickedEvent = new ItemClickedEvent("itemClicked");
+ newEvent.data = target.data;
+ newEvent.multipleSelection = event.shiftKey;
+ newEvent.index = target.index;
+
+ target.dispatchEvent(newEvent);
+ }
+ }
+
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/ListSingleSelectionMouseController.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/ListSingleSelectionMouseController.as
new file mode 100644
index 0000000..c19ce5f
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/ListSingleSelectionMouseController.as
@@ -0,0 +1,169 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.controllers
+{
+ import org.apache.royale.core.IBeadController;
+ import org.apache.royale.core.IItemRendererParent;
+ import org.apache.royale.core.IRollOverModel;
+ import org.apache.royale.core.ISelectableItemRenderer;
+ import org.apache.royale.core.ISelectionModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.events.ItemAddedEvent;
+ import org.apache.royale.events.ItemClickedEvent;
+ import org.apache.royale.events.ItemRemovedEvent;
+ import org.apache.royale.html.beads.IListView;
+
+ /**
+ * The ListSingleSelectionMouseController class is a controller for
+ * org.apache.royale.jewel.List. Controllers
+ * watch for events from the interactive portions of a View and
+ * update the data model or dispatch a semantic event.
+ * This controller watches for events from the item renderers
+ * and updates an ISelectionModel (which only supports single
+ * selection). Other controller/model pairs would support
+ * various kinds of multiple selection.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class ListSingleSelectionMouseController implements IBeadController
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ListSingleSelectionMouseController()
+ {
+ }
+
+ /**
+ * The model.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected var listModel:ISelectionModel;
+
+ /**
+ * The view.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected var listView:IListView;
+
+ /**
+ * The parent of the item renderers.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected var dataGroup:IItemRendererParent;
+
+ 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.4
+ * @royaleignorecoercion org.apache.royale.core.ISelectionModel
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ * @royaleignorecoercion org.apache.royale.core.IListView
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ listModel = value.getBeadByType(ISelectionModel) as ISelectionModel;
+ listView = value.getBeadByType(IListView) as IListView;
+ IEventDispatcher(_strand).addEventListener("itemAdded", handleItemAdded);
+ IEventDispatcher(_strand).addEventListener("itemRemoved", handleItemRemoved);
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ protected function handleItemAdded(event:ItemAddedEvent):void
+ {
+ IEventDispatcher(event.item).addEventListener("itemClicked", selectedHandler);
+ IEventDispatcher(event.item).addEventListener("itemRollOver", rolloverHandler);
+ IEventDispatcher(event.item).addEventListener("itemRollOut", rolloutHandler);
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ protected function handleItemRemoved(event:ItemRemovedEvent):void
+ {
+ IEventDispatcher(event.item).removeEventListener("itemClicked", selectedHandler);
+ IEventDispatcher(event.item).removeEventListener("itemRollOver", rolloverHandler);
+ IEventDispatcher(event.item).removeEventListener("itemRollOut", rolloutHandler);
+ }
+
+ protected function selectedHandler(event:ItemClickedEvent):void
+ {
+ listModel.selectedIndex = event.index;
+ listModel.selectedItem = event.data;
+ listView.host.dispatchEvent(new Event(Event.CHANGE));
+ }
+
+ /**
+ * @royaleemitcoercion org.apache.royale.core.ISelectableItemRenderer
+ * @royaleignorecoercion org.apache.royale.core.IRollOverModel
+ */
+ protected function rolloverHandler(event:Event):void
+ {
+ var renderer:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
+ if (renderer) {
+ IRollOverModel(listModel).rollOverIndex = renderer.index;
+ }
+ }
+
+ /**
+ * @royaleemitcoercion org.apache.royale.core.ISelectableItemRenderer
+ * @royaleignorecoercion org.apache.royale.core.IRollOverModel
+ */
+ protected function rolloutHandler(event:Event):void
+ {
+ var renderer:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
+ if (renderer) {
+ renderer.hovered = false;
+ renderer.down = false;
+ IRollOverModel(listModel).rollOverIndex = -1;
+ }
+ }
+
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/SliderMouseController.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/SliderMouseController.as
index b62244a..3d2952c 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/SliderMouseController.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/SliderMouseController.as
@@ -28,7 +28,7 @@
import org.apache.royale.events.MouseEvent;
import org.apache.royale.events.ValueChangeEvent;
import org.apache.royale.geom.Point;
- import org.apache.royale.html.beads.ISliderView;
+ import org.apache.royale.jewel.beads.controls.slider.ISliderView;
import org.apache.royale.jewel.beads.views.SliderView;
import org.apache.royale.jewel.Slider;
@@ -49,7 +49,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public class SliderMouseController implements IBead, IBeadController
{
@@ -59,7 +59,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function SliderMouseController()
{
@@ -71,7 +71,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
private var rangeModel:IRangeModel;
@@ -86,7 +86,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function get sliderView():ISliderView
{
@@ -104,7 +104,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function set strand(value:IStrand):void
{
@@ -164,7 +164,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
COMPILE::JS
private function handleChange(event:BrowserEvent):void
@@ -184,7 +184,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
COMPILE::JS
private function handleInput(event:BrowserEvent):void
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/SpinnerMouseController.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/SpinnerMouseController.as
new file mode 100644
index 0000000..c063652
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/SpinnerMouseController.as
@@ -0,0 +1,131 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.controllers
+{
+ import org.apache.royale.core.IBeadController;
+ import org.apache.royale.core.IRangeModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.events.ValueChangeEvent;
+ import org.apache.royale.jewel.beads.controls.spinner.ISpinnerView;
+ COMPILE::JS
+ {
+ import org.apache.royale.jewel.Spinner;
+ import org.apache.royale.jewel.Button;
+ import goog.events;
+ import goog.events.EventType;
+ }
+
+ /**
+ * The SpinnerMouseController class bead handles mouse events on the
+ * org.apache.royale.jewel.Spinner's component buttons, changing the
+ * value of the Spinner.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class SpinnerMouseController implements IBeadController
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function SpinnerMouseController()
+ {
+ }
+
+ private var rangeModel:IRangeModel;
+
+ private var _strand:IStrand;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @royaleignorecoercion org.apache.royale.jewel.Spinner
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.jewel.beads.controls.spinner.ISpinnerView
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ * @royaleignorecoercion org.apache.royale.core.IRangeModel
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ rangeModel = UIBase(value).model as IRangeModel;
+
+ COMPILE::SWF
+ {
+ var spinnerBead:ISpinnerView = value.getBeadByType(ISpinnerView) as ISpinnerView;
+ spinnerBead.decrement.addEventListener(MouseEvent.CLICK, decrementClickHandler);
+ spinnerBead.decrement.addEventListener("buttonRepeat", decrementClickHandler);
+ spinnerBead.increment.addEventListener(MouseEvent.CLICK, incrementClickHandler);
+ spinnerBead.increment.addEventListener("buttonRepeat", incrementClickHandler);
+ }
+
+ COMPILE::JS
+ {
+ var spinnerBead:ISpinnerView = value.getBeadByType(ISpinnerView) as ISpinnerView;
+
+ var incrementButton:Button = spinnerBead.increment;
+ var decrementButton:Button = spinnerBead.decrement;
+
+ goog.events.listen(incrementButton.element, goog.events.EventType.CLICK,
+ incrementClickHandler);
+
+ goog.events.listen(decrementButton.element, goog.events.EventType.CLICK,
+ decrementClickHandler);
+ }
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ private function decrementClickHandler( event:org.apache.royale.events.MouseEvent ) : void
+ {
+ var oldValue:Number = rangeModel.value;
+ rangeModel.value = Math.max(rangeModel.minimum, rangeModel.value - rangeModel.stepSize);
+ var vce:ValueChangeEvent = ValueChangeEvent.createUpdateEvent(_strand, "value", oldValue, rangeModel.value);
+ IEventDispatcher(_strand).dispatchEvent(vce);
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ private function incrementClickHandler( event:org.apache.royale.events.MouseEvent ) : void
+ {
+ var oldValue:Number = rangeModel.value;
+ rangeModel.value = Math.min(rangeModel.maximum, rangeModel.value + rangeModel.stepSize);
+ var vce:ValueChangeEvent = ValueChangeEvent.createUpdateEvent(_strand, "value", oldValue, rangeModel.value);
+ IEventDispatcher(_strand).dispatchEvent(vce);
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/TableCellSelectionMouseController.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/TableCellSelectionMouseController.as
new file mode 100644
index 0000000..b8d6d56
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/TableCellSelectionMouseController.as
@@ -0,0 +1,177 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.controllers
+{
+ import org.apache.royale.core.IBeadController;
+ import org.apache.royale.core.IItemRendererParent;
+ import org.apache.royale.core.IRollOverModel;
+ import org.apache.royale.core.ISelectableItemRenderer;
+ import org.apache.royale.core.ISelectionModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IBeadView;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.events.ItemAddedEvent;
+ import org.apache.royale.events.ItemClickedEvent;
+ import org.apache.royale.events.ItemRemovedEvent;
+ import org.apache.royale.jewel.beads.views.TableView;
+ import org.apache.royale.html.supportClasses.DataItemRenderer;
+ import org.apache.royale.jewel.beads.models.TableModel;
+
+ /**
+ * The TableCellSelectionMouseController class is a controller for
+ * org.apache.royale.jewel.Table. Controllers
+ * watch for events from the interactive portions of a View and
+ * update the data model or dispatch a semantic event.
+ * This controller watches for events from the item renderers
+ * and updates an ISelectionModel (which only supports single
+ * selection). Other controller/model pairs would support
+ * various kinds of multiple selection.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class TableCellSelectionMouseController implements IBeadController
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function TableCellSelectionMouseController()
+ {
+ }
+
+ /**
+ * The model.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected var model:ISelectionModel;
+
+ /**
+ * The view.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected var view:TableView;
+
+ /**
+ * The parent of the item renderers.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected var dataGroup:IItemRendererParent;
+
+ 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.4
+ * @royaleignorecoercion org.apache.royale.core.ISelectionModel
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ * @royaleignorecoercion org.apache.royale.core.IListView
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ model = value.getBeadByType(ISelectionModel) as ISelectionModel;
+ view = value.getBeadByType(IBeadView) as TableView;
+ IEventDispatcher(_strand).addEventListener("itemAdded", handleItemAdded);
+ IEventDispatcher(_strand).addEventListener("itemRemoved", handleItemRemoved);
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ protected function handleItemAdded(event:ItemAddedEvent):void
+ {
+ IEventDispatcher(event.item).addEventListener("itemClicked", selectedHandler);
+ IEventDispatcher(event.item).addEventListener("itemRollOver", rolloverHandler);
+ IEventDispatcher(event.item).addEventListener("itemRollOut", rolloutHandler);
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ protected function handleItemRemoved(event:ItemRemovedEvent):void
+ {
+ IEventDispatcher(event.item).removeEventListener("itemClicked", selectedHandler);
+ IEventDispatcher(event.item).removeEventListener("itemRollOver", rolloverHandler);
+ IEventDispatcher(event.item).removeEventListener("itemRollOut", rolloutHandler);
+ }
+
+ protected function selectedHandler(event:ItemClickedEvent):void
+ {
+ var renderer:DataItemRenderer = event.currentTarget as DataItemRenderer;
+
+ model.labelField = renderer.labelField;
+ model.selectedItem = event.data;
+ (model as TableModel).selectedItemProperty = model.selectedItem[model.labelField];
+ model.selectedIndex = (model as TableModel).getIndexForSelectedItemProperty();
+
+ view.host.dispatchEvent(new Event(Event.CHANGE));
+ }
+
+ /**
+ * @royaleemitcoercion org.apache.royale.core.ISelectableItemRenderer
+ * @royaleignorecoercion org.apache.royale.core.IRollOverModel
+ */
+ protected function rolloverHandler(event:Event):void
+ {
+ var renderer:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
+ if (renderer) {
+ IRollOverModel(model).rollOverIndex = renderer.index;
+ }
+ }
+
+ /**
+ * @royaleemitcoercion org.apache.royale.core.ISelectableItemRenderer
+ * @royaleignorecoercion org.apache.royale.core.IRollOverModel
+ */
+ protected function rolloutHandler(event:Event):void
+ {
+ var renderer:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
+ if (renderer) {
+ renderer.hovered = false;
+ renderer.down = false;
+ IRollOverModel(model).rollOverIndex = -1;
+ }
+ }
+
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/Disabled.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/Disabled.as
index 2dd19f3..fab635e 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/Disabled.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/Disabled.as
@@ -28,7 +28,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public class Disabled implements IBead
{
@@ -38,7 +38,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function Disabled()
{
@@ -51,7 +51,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function get disabled():Boolean
{
@@ -75,15 +75,13 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
* @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
{
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/SizeControl.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/SizeControl.as
new file mode 100644
index 0000000..416b8c0
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/SizeControl.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.beads.controls
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.StyledUIBase;
+
+ /**
+ * The SizeControl bead class is a specialty bead that can be used to size a Jewel control.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class SizeControl implements IBead
+ {
+ public static const XSMALL:String = "xsmall";
+ public static const SMALL:String = "small";
+ public static const LARGE:String = "large";
+ public static const XLARGE:String = "xlarge";
+
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function SizeControl()
+ {
+ }
+
+ private var _oldSize:String;
+ private var _size:String;
+
+ /**
+ * A size selector.
+ * Sets the size of the button using one of the "size"
+ * constants (XSMALL, SMALL, LARGE and XLARGE)
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get size():String
+ {
+ return _size;
+ }
+
+ public function set size(value:String):void
+ {
+ COMPILE::JS
+ {
+ _oldSize = _size;
+ _size = value;
+
+ if(_strand)
+ sizeHost();
+ }
+ }
+
+ 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.4
+ * @royaleignorecoercion HTMLInputElement
+ * @royaleignorecoercion org.apache.royale.core.UIBase;
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ COMPILE::JS
+ {
+ sizeHost();
+ }
+ }
+
+ COMPILE::JS
+ private function sizeHost():void
+ {
+ var host:StyledUIBase = _strand as StyledUIBase;
+ if (host)
+ {
+ if(_oldSize)
+ host.removeClass(_oldSize);
+ host.addClass(_size);
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/TextAlign.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/TextAlign.as
new file mode 100644
index 0000000..486cc7b
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/TextAlign.as
@@ -0,0 +1,122 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.controls
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.UIBase;
+
+ /**
+ * The TextAlign bead class is a specialty bead that make text align left, right or center.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class TextAlign implements IBead
+ {
+ public static const LEFT:String = "left";
+ public static const RIGHT:String = "right";
+ public static const CENTER:String = "center";
+
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function TextAlign()
+ {
+ }
+
+ private var _align:String = LEFT;
+ private var oldValue:String;
+
+ /**
+ * Add or remove align text class selectors. Possible values are:
+ * left - alignTextLeft
+ * right - alignTextRight
+ * center - alignTextCenter
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get align():String
+ {
+ return _align;
+ }
+ public function set align(value:String):void
+ {
+ if(_align !== value)
+ {
+ oldValue = _align;
+ _align = value;
+ 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.4
+ * @royaleignorecoercion HTMLInputElement
+ * @royaleignorecoercion org.apache.royale.core.UIBase;
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ updateHost();
+ }
+
+ private function updateHost():void
+ {
+ var host:UIBase = _strand as UIBase;
+
+ if (host)
+ {
+ COMPILE::JS
+ {
+ if(oldValue == LEFT)
+ host.element.classList.remove("alignTextLeft");
+ if(oldValue == RIGHT)
+ host.element.classList.remove("alignTextRight");
+ if(oldValue == CENTER)
+ host.element.classList.remove("alignTextCenter");
+
+ if(_align == LEFT)
+ host.element.classList.add("alignTextLeft");
+ if(_align == RIGHT)
+ host.element.classList.add("alignTextRight");
+ if(_align == CENTER)
+ host.element.classList.add("alignTextCenter");
+ }
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/combobox/IComboBoxView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/combobox/IComboBoxView.as
new file mode 100644
index 0000000..b740dc7
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/combobox/IComboBoxView.as
@@ -0,0 +1,76 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.controls.combobox
+{
+ import org.apache.royale.core.IBeadView;
+ import org.apache.royale.core.IStrand;
+
+ /**
+ * The IComboBoxView interface provides the protocol for any bead that
+ * creates the visual parts for a org.apache.royale.jewel.ComboBox control.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public interface IComboBoxView extends IBeadView
+ {
+ /**
+ * The sub-component used for the input area of the ComboBox.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ function get textinput():Object;
+
+ /**
+ * The sub-component used for the button to activate the pop-up.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ function get button():Object;
+
+ /**
+ * The component housing the selection list.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ function get popup():Object;
+
+ /**
+ * Determines whether or not the pop-up with the selection list is visible or not.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ function get popUpVisible():Boolean;
+ function set popUpVisible(value:Boolean):void;
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/datefield/DateFieldMaskedTextInput.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/datefield/DateFieldMaskedTextInput.as
new file mode 100644
index 0000000..7b53f74
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/datefield/DateFieldMaskedTextInput.as
@@ -0,0 +1,184 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.controls.datefield
+{
+ COMPILE::JS
+ {
+ import goog.events.BrowserEvent;
+ }
+ COMPILE::SWF
+ {
+ import flash.events.TextEvent;
+ import org.apache.royale.core.CSSTextField;
+ import org.apache.royale.html.beads.ITextFieldView;
+ }
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+
+ /**
+ * The DateFieldMaskedTextInput class is a specialty bead that is used
+ * by DateField control. The bead mask the input of the user to conform
+ * to numbers and slashes in the following pattern: 'NN/NN/NNNN'
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class DateFieldMaskedTextInput implements IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function DateFieldMaskedTextInput()
+ {
+ }
+
+ 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.4
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ COMPILE::SWF
+ {
+ IEventDispatcher(value).addEventListener("viewChanged",viewChangeHandler);
+ }
+ COMPILE::JS
+ {
+ var host:UIBase = _strand as UIBase;
+ host.element.addEventListener("keypress", dateInputMask, false);
+ }
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ private function viewChangeHandler(event:Event):void
+ {
+ // get the ITextFieldView bead, which is required for this bead to work
+ var textView:ITextFieldView = _strand.getBeadByType(ITextFieldView) as ITextFieldView;
+ if (textView) {
+ var textField:CSSTextField = textView.textField;
+ textField.restrict = "0-9";
+ // listen for changes to this textField and prevent non-numeric values
+ textField.addEventListener(TextEvent.TEXT_INPUT, handleTextInput);
+ }
+ else {
+ throw new Error("NumericOnlyTextInputBead requires strand to have an ITextFieldView bead");
+ }
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ private function handleTextInput(event:TextEvent):void
+ {
+ var insert:String = event.text;
+ var caretIndex:int = (event.target as CSSTextField).caretIndex;
+ var current:String = (event.target as CSSTextField).text;
+ var value:String = current.substring(0,caretIndex) + insert + current.substr(caretIndex);
+ var n:Number = Number(value);
+ if (isNaN(n)) event.preventDefault();
+ }
+
+ COMPILE::JS
+ private function validateInput(event:BrowserEvent):void
+ {
+ var code:int = event.charCode;
+
+ // backspace or delete
+ if (event.keyCode == 8 || event.keyCode == 46) return;
+
+ // tab or return/enter
+ if (event.keyCode == 9 || event.keyCode == 13) return;
+
+ // left or right cursor arrow
+ if (event.keyCode == 37 || event.keyCode == 39) return;
+
+ var key:String = String.fromCharCode(code);
+
+ var regex:RegExp = /[0-9]|\./;
+ if (!regex.test(key)) {
+ event["returnValue"] = false;
+ if (event.preventDefault) event.preventDefault();
+ return;
+ }
+ var cursorStart:int = event.target.selectionStart;
+ var cursorEnd:int = event.target.selectionEnd;
+ var left:String = event.target.value.substring(0, cursorStart);
+ var right:String = event.target.value.substr(cursorEnd);
+ var complete:String = left + key + right;
+ if (isNaN(parseFloat(complete))) {
+ event["returnValue"] = false;
+ if (event.preventDefault) event.preventDefault();
+ }
+
+ }
+
+ COMPILE::JS
+ /**
+ * (TODO carlosrovira): this should take into account IFormatBead
+ */
+ private function dateInputMask(event:BrowserEvent):void {
+ if(event.keyCode < 47 || event.keyCode > 57) {
+ event.preventDefault();
+ }
+
+ var len:int = event.target.value.length;
+
+ // If we're at a particular place, let the user type the slash
+ // i.e., 12/12/1212
+ if(len !== 1 || len !== 3) {
+ if(event.keyCode == 47) {
+ event.preventDefault();
+ }
+ }
+
+ // If they don't add the slash, do it for them...
+ if(len === 2) {
+ event.target.value += '/';
+ }
+
+ // If they don't add the slash, do it for them...
+ if(len === 5) {
+ event.target.value += '/';
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/drawer/ResponsiveDrawer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/drawer/ResponsiveDrawer.as
new file mode 100644
index 0000000..3f3109d
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/drawer/ResponsiveDrawer.as
@@ -0,0 +1,163 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.controls.drawer
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.Drawer;
+ import org.apache.royale.jewel.supportClasses.ResponsiveSizes;
+
+ /**
+ * The ResponsiveDrawer class is a bead to use with Jewel Drawer to make it fixed or
+ * float depending on the screen size.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class ResponsiveDrawer implements IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ResponsiveDrawer()
+ {
+ }
+
+ private var drawer:Drawer;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion HTMLInputElement
+ * @royaleignorecoercion org.apache.royale.core.UIBase;
+ */
+ public function set strand(value:IStrand):void
+ {
+ drawer = value as Drawer;
+
+ if(drawer)
+ {
+ updateDrawer();
+ }
+ else
+ {
+ throw new Error ("ResponsiveDrawer must be used with Drawer class");
+ }
+ }
+
+ protected var _auto:Boolean = false;
+ /**
+ * A boolean flag to activate "auto" effect selector.
+ * Optional. Makes the drawer auto adapt using
+ * a float behaviour on mobile and tablets and fixed
+ * behaviour on desktop.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get auto():Boolean
+ {
+ return _auto;
+ }
+ public function set auto(value:Boolean):void
+ {
+ if (_auto != value)
+ {
+ _auto = value;
+
+ updateDrawer();
+ }
+ }
+
+ private function updateDrawer():void
+ {
+ if (drawer)
+ {
+ COMPILE::JS
+ {
+ if(_auto)
+ {
+ window.addEventListener('resize', autoResizeHandler, false);
+ }
+ else
+ {
+ window.removeEventListener('resize', autoResizeHandler, false);
+ }
+ }
+
+ drawer.toggleClass("auto", _auto);
+ autoResizeHandler();
+ }
+ }
+
+ /**
+ * When set to "auto" this resize handler monitors the width of the app window
+ * and switch between fixed and float modes.
+ *
+ * Note:This could be done with media queries, but since it handles open/close
+ * maybe this is the right way
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ private function autoResizeHandler(event:Event = null):void
+ {
+ COMPILE::JS
+ {
+ var outerWidth:Number = window.outerWidth;
+ var tmpFixed:Boolean = drawer.fixed;
+
+ // Desktop width size
+ if(outerWidth > ResponsiveSizes.DESKTOP_BREAKPOINT)
+ {
+ drawer.fixed = true;
+ if(tmpFixed != drawer.fixed)
+ {
+ drawer.open();
+ }
+ }
+ else
+ {
+ drawer.fixed = false;
+ if(tmpFixed != drawer.fixed)
+ {
+ drawer.close();
+ }
+ }
+
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/slider/ISliderView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/slider/ISliderView.as
new file mode 100644
index 0000000..07ae397
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/slider/ISliderView.as
@@ -0,0 +1,55 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.controls.slider
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IUIBase;
+
+ /**
+ * The ISliderView interface provides the protocol for any bead that
+ * creates the visual parts for a org.apache.royale.html.Slider control.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public interface ISliderView extends IBead
+ {
+ /**
+ * The component used for the track area of the org.apache.royale.html.Slider.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ function get track():IUIBase;
+
+ /**
+ * The component used for the thumb button of the org.apache.royale.html.Slider.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ function get thumb():IUIBase;
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/spinner/ISpinnerView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/spinner/ISpinnerView.as
new file mode 100644
index 0000000..90c4f07
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/spinner/ISpinnerView.as
@@ -0,0 +1,69 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.controls.spinner
+{
+ COMPILE::SWF
+ {
+ import flash.display.DisplayObject;
+ }
+ COMPILE::JS
+ {
+ import org.apache.royale.jewel.Button;
+ }
+
+ import org.apache.royale.core.IBead;
+
+ /**
+ * The ISpinnerView interface provides the protocol for any bead that
+ * creates the visual parts for a org.apache.royale.jewel.Spinner control.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public interface ISpinnerView extends IBead
+ {
+ /**
+ * The component used to increment the org.apache.royale.jewel.Spinner value.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ COMPILE::SWF
+ function get increment():DisplayObject;
+ COMPILE::JS
+ function get increment():Button;
+
+ /**
+ * The component used to decrement the org.apache.royale.jewel.Spinner value.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ COMPILE::SWF
+ function get decrement():DisplayObject;
+ COMPILE::JS
+ function get decrement():Button;
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/textinput/MaxNumberCharacters.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/textinput/MaxNumberCharacters.as
new file mode 100644
index 0000000..2a03180
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/textinput/MaxNumberCharacters.as
@@ -0,0 +1,120 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.controls.textinput
+{
+ COMPILE::SWF
+ {
+ import org.apache.royale.core.CSSTextField;
+ import org.apache.royale.html.beads.ITextFieldView;
+ }
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+
+ /**
+ * The MaxNumberCharacters class is a specialty bead that can be used with
+ * any TextInput control. The bead set the maximun number of characters the
+ * text input can hold.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class MaxNumberCharacters implements IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function MaxNumberCharacters()
+ {
+ }
+
+ private var _maxlength:Number;
+
+ /**
+ * The Number to use as the maximun length of characters.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get maxlength():Number
+ {
+ return _maxlength;
+ }
+ public function set maxlength(value:Number):void
+ {
+ _maxlength = value;
+ }
+
+ protected 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.4
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ * @royaleignorecoercion HTMLInputElement
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ COMPILE::SWF
+ {
+ IEventDispatcher(value).addEventListener("viewChanged",viewChangeHandler);
+ }
+ COMPILE::JS
+ {
+ var host:UIBase = value as UIBase;
+ var e:HTMLInputElement = host.element as HTMLInputElement;
+ e.setAttribute("maxlength", maxlength);
+ }
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ private function viewChangeHandler(event:Event):void
+ {
+ // get the ITextFieldView bead, which is required for this bead to work
+ var textView:ITextFieldView = _strand.getBeadByType(ITextFieldView) as ITextFieldView;
+ if (textView) {
+ var textField:CSSTextField = textView.textField;
+ //textField.displayAsPassword = true; TODO
+ }
+ else {
+ throw new Error("MaxNumberCharacters requires strand to have a TextInputView bead");
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/textinput/PasswordInput.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/textinput/PasswordInput.as
new file mode 100644
index 0000000..63c7bd4
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/textinput/PasswordInput.as
@@ -0,0 +1,101 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.controls.textinput
+{
+ COMPILE::SWF
+ {
+ import org.apache.royale.core.CSSTextField;
+ import org.apache.royale.html.beads.ITextFieldView;
+ }
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+
+ /**
+ * The PasswordInput class is a specialty bead that can be used with
+ * any TextInput control. The bead secures the text input area by masking
+ * the input as it is typed.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class PasswordInput implements IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function PasswordInput()
+ {
+ }
+
+ protected 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.4
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ * @royaleignorecoercion HTMLInputElement
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ COMPILE::SWF
+ {
+ IEventDispatcher(value).addEventListener("viewChanged",viewChangeHandler);
+ }
+ COMPILE::JS
+ {
+ var host:UIBase = value as UIBase;
+ var e:HTMLInputElement = host.element as HTMLInputElement;
+ e.type = 'password';
+ }
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ private function viewChangeHandler(event:Event):void
+ {
+ // get the ITextFieldView bead, which is required for this bead to work
+ var textView:ITextFieldView = _strand.getBeadByType(ITextFieldView) as ITextFieldView;
+ if (textView) {
+ var textField:CSSTextField = textView.textField;
+ textField.displayAsPassword = true;
+ }
+ else {
+ throw new Error("PasswordInputBead requires strand to have a TextInputView bead");
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/textinput/TextPrompt.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/textinput/TextPrompt.as
new file mode 100644
index 0000000..f572336
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/textinput/TextPrompt.as
@@ -0,0 +1,152 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.controls.textinput
+{
+ COMPILE::SWF
+ {
+ import flash.text.TextFieldType;
+ import org.apache.royale.core.CSSTextField;
+ }
+
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+
+ /**
+ * The TextPrompt class is a specialty bead that can be used with
+ * any TextInput control. The bead places a string into the input field
+ * when there is no value associated with the text property.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class TextPrompt implements IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function TextPrompt()
+ {
+ }
+
+ private var _prompt:String;
+
+ /**
+ * The string to use as the placeholder prompt.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get prompt():String
+ {
+ return _prompt;
+ }
+ public function set prompt(value:String):void
+ {
+ _prompt = value;
+ }
+
+ 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.4
+ * @royaleignorecoercion HTMLInputElement
+ * @royaleignorecoercion org.apache.royale.core.UIBase;
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ COMPILE::SWF
+ {
+ // listen for changes in text to hide or show the prompt
+ var model:Object = UIBase(_strand).model;
+ if (!model.hasOwnProperty("text")) {
+ throw new Error("Model requires a text property when used with TextPrompt");
+ }
+ IEventDispatcher(model).addEventListener("textChange", handleTextChange);
+
+ // create a TextField that displays the prompt - it shows
+ // and hides based on the model's content
+ promptField = new CSSTextField();
+ promptField.selectable = false;
+ promptField.type = TextFieldType.DYNAMIC;
+ promptField.mouseEnabled = false;
+ promptField.multiline = false;
+ promptField.wordWrap = false;
+ promptField.textColor = 0xBBBBBB;
+
+ // trigger the event handler to display if needed
+ handleTextChange(null);
+ }
+ COMPILE::JS
+ {
+ var host:UIBase = value as UIBase;
+ var e:HTMLInputElement = host.element as HTMLInputElement;
+ e.placeholder = prompt;
+ }
+ }
+
+ COMPILE::SWF
+ private var promptField:CSSTextField;
+ private var promptAdded:Boolean;
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ private function handleTextChange( event:Event ):void
+ {
+ // see what the model currently has to determine if the prompt should be
+ // displayed or not.
+ var model:Object = UIBase(_strand).model;
+
+ if (model.text != null && model.text.length > 0 ) {
+ if (promptAdded) UIBase(_strand).removeChild(promptField);
+ promptAdded = false;
+ }
+ else {
+ if (!promptAdded) UIBase(_strand).addChild(promptField);
+ promptField.text = prompt;
+ promptAdded = true;
+ promptField.x = 2;
+ promptField.y = 2;
+ promptField.width = UIBase(_strand).width-5;
+ promptField.height = UIBase(_strand).height-4;
+
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/AddListItemRendererForArrayListData.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/AddListItemRendererForArrayListData.as
new file mode 100644
index 0000000..36311b8
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/AddListItemRendererForArrayListData.as
@@ -0,0 +1,236 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.itemRenderers
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IDataProviderModel;
+ import org.apache.royale.core.IItemRendererClassFactory;
+ import org.apache.royale.core.IItemRendererParent;
+ import org.apache.royale.core.IListPresentationModel;
+ import org.apache.royale.core.ISelectableItemRenderer;
+ import org.apache.royale.core.ISelectionModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IStrandWithModelView;
+ import org.apache.royale.core.SimpleCSSStyles;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.CollectionEvent;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.utils.loadBeadFromValuesManager;
+ import org.apache.royale.html.beads.IListView;
+
+ /**
+ * Handles the adding of an itemRenderer in a List component once the corresponding datum has been added
+ * from the IDataProviderModel.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class AddListItemRendererForArrayListData implements IBead
+ {
+ /**
+ * Constructor
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function AddListItemRendererForArrayListData()
+ {
+ }
+
+ protected var _strand:IStrand;
+
+ protected var labelField:String;
+
+ /**
+ * @copy org.apache.royale.core.IStrand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ IEventDispatcher(value).addEventListener("initComplete", initComplete);
+ }
+
+ /**
+ * finish setup
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected function initComplete(event:Event):void
+ {
+ IEventDispatcher(_strand).removeEventListener("initComplete", initComplete);
+
+ _dataProviderModel = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
+ labelField = _dataProviderModel.labelField;
+
+ dataProviderModel.addEventListener("dataProviderChanged", dataProviderChangeHandler);
+
+ // invoke now in case "dataProviderChanged" has already been dispatched.
+ dataProviderChangeHandler(null);
+ }
+
+ private var dp:IEventDispatcher;
+ /**
+ * @private
+ */
+ protected function dataProviderChangeHandler(event:Event):void
+ {
+ if(dp)
+ {
+ dp.removeEventListener(CollectionEvent.ITEM_ADDED, handleItemAdded);
+ }
+ dp = dataProviderModel.dataProvider as IEventDispatcher;
+ if (!dp)
+ return;
+
+ // listen for individual items being added in the future.
+ dp.addEventListener(CollectionEvent.ITEM_ADDED, handleItemAdded);
+ }
+
+ /**
+ * Handles the itemRemoved event by removing the item.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.ISelectableItemRenderer
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ protected function handleItemAdded(event:CollectionEvent):void
+ {
+ var presentationModel:IListPresentationModel = _strand.getBeadByType(IListPresentationModel) as IListPresentationModel;
+ var ir:ISelectableItemRenderer = itemRendererFactory.createItemRenderer(itemRendererParent) as ISelectableItemRenderer;
+
+ fillRenderer(event.index, event.item, ir, presentationModel);
+
+ // update the index values in the itemRenderers to correspond to their shifted positions.
+ var n:int = itemRendererParent.numItemRenderers;
+ for (var i:int = event.index; i < n; i++)
+ {
+ ir = itemRendererParent.getItemRendererAt(i) as ISelectableItemRenderer;
+ ir.index = i;
+ }
+
+ (_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded"));
+ }
+
+ private var _dataProviderModel: IDataProviderModel;
+
+ /**
+ * The org.apache.royale.core.IDataProviderModel that contains the
+ * data source.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get dataProviderModel(): IDataProviderModel
+ {
+ if (_dataProviderModel == null) {
+ _dataProviderModel = _strand.getBeadByType(IDataProviderModel) as IDataProviderModel;
+ }
+ return _dataProviderModel;
+ }
+
+ private var _itemRendererParent: IItemRendererParent;
+
+ /**
+ * The org.apache.royale.core.IItemRendererParent used
+ * to generate instances of item renderers.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get itemRendererParent():IItemRendererParent
+ {
+ if (_itemRendererParent == null) {
+ var view:IListView = (_strand as IStrandWithModelView).view as IListView;
+ _itemRendererParent = view.dataGroup;
+ }
+ return _itemRendererParent;
+ }
+
+ private var _itemRendererFactory:IItemRendererClassFactory;
+
+ /**
+ * The org.apache.royale.core.IItemRendererClassFactory used
+ * to generate instances of item renderers.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get itemRendererFactory():IItemRendererClassFactory
+ {
+ if(!_itemRendererFactory)
+ _itemRendererFactory = loadBeadFromValuesManager(IItemRendererClassFactory, "iItemRendererClassFactory", _strand) as IItemRendererClassFactory;
+
+ return _itemRendererFactory;
+ }
+
+ /**
+ * @private
+ */
+ protected function fillRenderer(index:int,
+ item:Object,
+ itemRenderer:ISelectableItemRenderer,
+ presentationModel:IListPresentationModel):void
+ {
+ itemRendererParent.addItemRendererAt(itemRenderer, index);
+
+ itemRenderer.labelField = labelField;
+
+ if (presentationModel) {
+ var style:SimpleCSSStyles = new SimpleCSSStyles();
+ style.marginBottom = presentationModel.separatorThickness;
+ UIBase(itemRenderer).style = style;
+ UIBase(itemRenderer).height = presentationModel.rowHeight;
+ UIBase(itemRenderer).percentWidth = 100;
+ }
+
+ setData(itemRenderer, item, index);
+ }
+
+ /**
+ * @private
+ */
+ protected function setData(itemRenderer:ISelectableItemRenderer, data:Object, index:int):void
+ {
+ itemRenderer.index = index;
+ itemRenderer.data = data;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/AddTableRowForArrayListData.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/AddTableRowForArrayListData.as
new file mode 100644
index 0000000..d02d122
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/AddTableRowForArrayListData.as
@@ -0,0 +1,247 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.itemRenderers
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IItemRendererClassFactory;
+ import org.apache.royale.core.IItemRendererParent;
+ import org.apache.royale.core.IListPresentationModel;
+ import org.apache.royale.core.ISelectionModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IStrandWithModelView;
+ import org.apache.royale.core.SimpleCSSStyles;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.CollectionEvent;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.jewel.beads.models.TableModel;
+ import org.apache.royale.jewel.itemRenderers.TableItemRenderer;
+ import org.apache.royale.jewel.supportClasses.table.TableCell;
+ import org.apache.royale.jewel.supportClasses.table.TableColumn;
+ import org.apache.royale.jewel.supportClasses.table.TableRow;
+ import org.apache.royale.utils.loadBeadFromValuesManager;
+ import org.apache.royale.html.beads.IListView;
+
+ /**
+ * Handles the adding of an itemRenderer in a Table component once the corresponding datum has been added
+ * from the IDataProviderModel.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class AddTableRowForArrayListData implements IBead
+ {
+ /**
+ * Constructor
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function AddTableRowForArrayListData()
+ {
+ }
+
+ protected var _strand:IStrand;
+ /**
+ * @copy org.apache.royale.core.IStrand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ IEventDispatcher(value).addEventListener("initComplete", initComplete);
+ }
+
+ protected var labelField:String;
+
+ protected var model:TableModel;
+
+ /**
+ * finish setup
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected function initComplete(event:Event):void
+ {
+ IEventDispatcher(_strand).removeEventListener("initComplete", initComplete);
+
+ model = _strand.getBeadByType(ISelectionModel) as TableModel;
+ labelField = model.labelField;
+
+ model.addEventListener("dataProviderChanged", dataProviderChangeHandler);
+
+ // invoke now in case "dataProviderChanged" has already been dispatched.
+ dataProviderChangeHandler(null);
+ }
+
+ private var dp:IEventDispatcher;
+ /**
+ * @private
+ */
+ protected function dataProviderChangeHandler(event:Event):void
+ {
+ if(dp)
+ {
+ dp.removeEventListener(CollectionEvent.ITEM_ADDED, handleItemAdded);
+ }
+ dp = model.dataProvider as IEventDispatcher;
+ if (!dp)
+ return;
+
+ // listen for individual items being added in the future.
+ dp.addEventListener(CollectionEvent.ITEM_ADDED, handleItemAdded);
+ }
+
+ /**
+ * Handles the itemRemoved event by removing the item.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected function handleItemAdded(event:CollectionEvent):void
+ {
+ var presentationModel:IListPresentationModel = _strand.getBeadByType(IListPresentationModel) as IListPresentationModel;
+ var column:TableColumn;
+ var ir:TableItemRenderer;
+
+ var index:int = event.index * model.columns.length;
+ for(var j:int = 0; j < model.columns.length; j++)
+ {
+ column = model.columns[j] as TableColumn;
+
+ if(column.itemRenderer != null)
+ {
+ ir = column.itemRenderer.newInstance() as TableItemRenderer;
+ } else
+ {
+ ir = itemRendererFactory.createItemRenderer(itemRendererParent) as TableItemRenderer;
+ }
+
+ labelField = column.dataField;
+
+ ir.dataField = labelField;
+ ir.rowIndex = event.index;
+ ir.columnIndex = j;
+
+ fillRenderer(index++, event.item, ir, presentationModel);
+
+ if(column.align != "")
+ {
+ ir.align = column.align;
+ }
+ }
+
+ // update the index values in the itemRenderers to correspond to their shifted positions.
+ // adjust the itemRenderers' index to adjust for the shift
+ var len:int = itemRendererParent.numItemRenderers;
+ for (var i:int = event.index; i < len; i++)
+ {
+ ir = itemRendererParent.getItemRendererAt(i) as TableItemRenderer;
+ ir.index = i;
+ ir.rowIndex = i;
+ }
+
+ (_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded"));
+ }
+
+ private var _itemRendererParent: IItemRendererParent;
+
+ /**
+ * The org.apache.royale.core.IItemRendererParent used
+ * to generate instances of item renderers.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get itemRendererParent():IItemRendererParent
+ {
+ if (_itemRendererParent == null) {
+ var view:IListView = (_strand as IStrandWithModelView).view as IListView;
+ _itemRendererParent = view.dataGroup;
+ }
+ return _itemRendererParent;
+ }
+
+ private var _itemRendererFactory:IItemRendererClassFactory;
+
+ /**
+ * The org.apache.royale.core.IItemRendererClassFactory used
+ * to generate instances of item renderers.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get itemRendererFactory():IItemRendererClassFactory
+ {
+ if(!_itemRendererFactory)
+ _itemRendererFactory = loadBeadFromValuesManager(IItemRendererClassFactory, "iItemRendererClassFactory", _strand) as IItemRendererClassFactory;
+
+ return _itemRendererFactory;
+ }
+
+ /**
+ * @private
+ */
+ protected function fillRenderer(index:int,
+ item:Object,
+ itemRenderer:TableItemRenderer,
+ presentationModel:IListPresentationModel):void
+ {
+ itemRendererParent.addItemRendererAt(itemRenderer, index);
+
+ itemRenderer.labelField = labelField;
+
+ if (presentationModel) {
+ var style:SimpleCSSStyles = new SimpleCSSStyles();
+ style.marginBottom = presentationModel.separatorThickness;
+ UIBase(itemRenderer).style = style;
+ UIBase(itemRenderer).height = presentationModel.rowHeight;
+ UIBase(itemRenderer).percentWidth = 100;
+ }
+
+ setData(itemRenderer, item, index);
+ }
+
+ /**
+ * @private
+ */
+ protected function setData(itemRenderer:TableItemRenderer, data:Object, index:int):void
+ {
+ itemRenderer.index = index;
+ itemRenderer.data = data;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/DataFieldProviderBead.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/DataFieldProviderBead.as
new file mode 100644
index 0000000..688c87a
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/DataFieldProviderBead.as
@@ -0,0 +1,87 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.itemRenderers
+{
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IBead;
+
+ /**
+ * The DataFieldProviderBead class is a model that holds dataField used mostly
+ * in item renderers for retrieve some value from dataProvider items.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class DataFieldProviderBead implements IBead
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function DataFieldProviderBead()
+ {
+ }
+
+ 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.4
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ }
+
+ private var _dataField:String = null;
+
+ /**
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get dataField():String
+ {
+ return _dataField;
+ }
+
+ /**
+ * @private
+ */
+ public function set dataField(value:String):void
+ {
+ if (value != _dataField)
+ {
+ _dataField = value;
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/DataItemRendererFactoryForArrayData.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/DataItemRendererFactoryForArrayData.as
new file mode 100644
index 0000000..fc96478
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/DataItemRendererFactoryForArrayData.as
@@ -0,0 +1,207 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.itemRenderers
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IDataProviderItemRendererMapper;
+ import org.apache.royale.core.IItemRendererClassFactory;
+ import org.apache.royale.core.IItemRendererParent;
+ import org.apache.royale.core.IListPresentationModel;
+ import org.apache.royale.core.ISelectableItemRenderer;
+ import org.apache.royale.core.IDataProviderModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.SimpleCSSStyles;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.EventDispatcher;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.events.ItemRendererEvent;
+
+ import org.apache.royale.html.supportClasses.DataItemRenderer;
+ import org.apache.royale.utils.loadBeadFromValuesManager;
+ import org.apache.royale.jewel.beads.itemRenderers.DataFieldProviderBead;
+ import org.apache.royale.html.beads.IListView;
+
+ [Event(name="itemRendererCreated",type="org.apache.royale.events.ItemRendererEvent")]
+
+ /**
+ * The DataItemRendererFactoryForArrayData class reads an
+ * array of data and creates an item renderer for every
+ * item in the array. Other implementations of
+ * IDataProviderItemRendererMapper map different data
+ * structures or manage a virtual set of renderers.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class DataItemRendererFactoryForArrayData extends EventDispatcher implements IBead, IDataProviderItemRendererMapper
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function DataItemRendererFactoryForArrayData(target:Object=null)
+ {
+ super(target);
+ }
+
+ protected var dataProviderModel:IDataProviderModel;
+ protected var dataFieldProvider:DataFieldProviderBead;
+
+ protected var labelField:String;
+ protected var dataField:String;
+
+ 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.4
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ IEventDispatcher(value).addEventListener("initComplete",finishSetup);
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+ * @royaleignorecoercion org.apache.royale.core.IItemRendererClassFactory
+ * @royaleignorecoercion org.apache.royale.html.beads.DataFieldProviderBead
+ */
+ private function finishSetup(event:Event):void
+ {
+ dataProviderModel = _strand.getBeadByType(IDataProviderModel) as IDataProviderModel;
+ dataProviderModel.addEventListener("dataProviderChanged", dataProviderChangeHandler);
+ labelField = dataProviderModel.labelField;
+
+ dataFieldProvider = _strand.getBeadByType(DataFieldProviderBead) as DataFieldProviderBead;
+ if (dataFieldProvider)
+ {
+ dataField = dataFieldProvider.dataField;
+ }
+
+ // if the host component inherits from DataContainerBase, the itemRendererClassFactory will
+ // already have been loaded by DataContainerBase.addedToParent function.
+ if(!_itemRendererFactory)
+ _itemRendererFactory = loadBeadFromValuesManager(IItemRendererClassFactory, "iItemRendererClassFactory", _strand) as IItemRendererClassFactory;
+
+ dataProviderChangeHandler(null);
+ }
+
+ private var _itemRendererFactory:IItemRendererClassFactory;
+
+ /**
+ * The org.apache.royale.core.IItemRendererClassFactory used
+ * to generate instances of item renderers.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IItemRendererClassFactory
+ */
+ public function get itemRendererFactory():IItemRendererClassFactory
+ {
+ if(!_itemRendererFactory)
+ _itemRendererFactory = loadBeadFromValuesManager(IItemRendererClassFactory, "iItemRendererClassFactory", _strand) as IItemRendererClassFactory;
+
+ return _itemRendererFactory;
+ }
+
+ /**
+ * @private
+ */
+ public function set itemRendererFactory(value:IItemRendererClassFactory):void
+ {
+ _itemRendererFactory = value;
+ }
+
+ /**
+ * The org.apache.royale.core.IItemRendererParent that will
+ * parent the item renderers.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion Array
+ * @royaleignorecoercion org.apache.royale.core.IListView
+ * @royaleignorecoercion org.apache.royale.core.IListPresentationModel
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ * @royaleignorecoercion org.apache.royale.core.ISelectableItemRenderer
+ * @royaleignorecoercion org.apache.royale.html.supportClasses.DataItemRenderer
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ protected function dataProviderChangeHandler(event:Event):void
+ {
+ var dp:Array = dataProviderModel.dataProvider as Array;
+ if (!dp)
+ return;
+
+ var listView:IListView = _strand.getBeadByType(IListView) as IListView;
+ var dataGroup:IItemRendererParent = listView.dataGroup;
+
+ dataGroup.removeAllItemRenderers();
+
+ var presentationModel:IListPresentationModel = _strand.getBeadByType(IListPresentationModel) as IListPresentationModel;
+
+ var n:int = dp.length;
+ for (var i:int = 0; i < n; i++)
+ {
+ var ir:ISelectableItemRenderer = itemRendererFactory.createItemRenderer(dataGroup) as ISelectableItemRenderer;
+ var dataItemRenderer:DataItemRenderer = ir as DataItemRenderer;
+
+ dataGroup.addItemRenderer(ir, false);
+ ir.index = i;
+ ir.labelField = labelField;
+ if (dataItemRenderer)
+ {
+ dataItemRenderer.dataField = dataField;
+ }
+
+ if (presentationModel) {
+ var style:SimpleCSSStyles = new SimpleCSSStyles();
+ style.marginBottom = presentationModel.separatorThickness;
+ UIBase(ir).style = style;
+ UIBase(ir).height = presentationModel.rowHeight;
+ UIBase(ir).percentWidth = 100;
+ }
+ ir.data = dp[i];
+
+ var newEvent:ItemRendererEvent = new ItemRendererEvent(ItemRendererEvent.CREATED);
+ newEvent.itemRenderer = ir;
+ dispatchEvent(newEvent);
+ }
+
+ IEventDispatcher(_strand).dispatchEvent(new Event("itemsCreated"));
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/DataItemRendererFactoryForCollectionView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/DataItemRendererFactoryForCollectionView.as
new file mode 100644
index 0000000..de2bc9c
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/DataItemRendererFactoryForCollectionView.as
@@ -0,0 +1,315 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.itemRenderers
+{
+ import org.apache.royale.collections.ICollectionView;
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IBeadModel;
+ import org.apache.royale.core.IDataProviderItemRendererMapper;
+ import org.apache.royale.core.IDataProviderModel;
+ import org.apache.royale.core.IItemRendererClassFactory;
+ import org.apache.royale.core.IItemRendererParent;
+ import org.apache.royale.core.IListPresentationModel;
+ import org.apache.royale.core.ISelectableItemRenderer;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.SimpleCSSStyles;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.CollectionEvent;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.EventDispatcher;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.html.beads.IListView;
+ import org.apache.royale.utils.loadBeadFromValuesManager;
+
+
+ /**
+ * This class creates itemRenderer instances from the data contained within an ICollectionView
+ */
+ public class DataItemRendererFactoryForCollectionView extends EventDispatcher implements IBead, IDataProviderItemRendererMapper
+ {
+ public function DataItemRendererFactoryForCollectionView(target:Object = null)
+ {
+ super(target);
+ }
+
+ protected 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.4
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ IEventDispatcher(value).addEventListener("initComplete", initComplete);
+ }
+
+ /**
+ * finish setup
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ * @royaleignorecoercion org.apache.royale.html.beads.IListView
+ */
+ protected function initComplete(event:Event):void
+ {
+ IEventDispatcher(_strand).removeEventListener("initComplete", initComplete);
+
+ var listView:IListView = _strand.getBeadByType(IListView) as IListView;
+ dataGroup = listView.dataGroup;
+
+ var model:IEventDispatcher = _strand.getBeadByType(IBeadModel) as IEventDispatcher;
+ model.addEventListener("dataProviderChanged", dataProviderChangeHandler);
+
+ dataProviderChangeHandler(null);
+ }
+
+ protected var _dataProviderModel:IDataProviderModel;
+
+ /**
+ * The model holding the dataProvider.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+ */
+ public function get dataProviderModel():IDataProviderModel
+ {
+ if (_dataProviderModel == null) {
+ _dataProviderModel = _strand.getBeadByType(IBeadModel) as IDataProviderModel;
+ }
+ return _dataProviderModel;
+ }
+
+ protected var labelField:String;
+
+ private var _itemRendererFactory:IItemRendererClassFactory;
+
+ /**
+ * The org.apache.royale.core.IItemRendererClassFactory used
+ * to generate instances of item renderers.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IItemRendererClassFactory
+ */
+ public function get itemRendererFactory():IItemRendererClassFactory
+ {
+ if(!_itemRendererFactory)
+ _itemRendererFactory = loadBeadFromValuesManager(IItemRendererClassFactory, "iItemRendererClassFactory", _strand) as IItemRendererClassFactory;
+
+ return _itemRendererFactory;
+ }
+
+ /**
+ * @private
+ */
+ public function set itemRendererFactory(value:IItemRendererClassFactory):void
+ {
+ _itemRendererFactory = value;
+ }
+
+ /**
+ * The org.apache.royale.core.IItemRendererParent that will
+ * parent the item renderers.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected var dataGroup:IItemRendererParent;
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.collections.ICollectionView
+ * @royaleignorecoercion org.apache.royale.core.IListPresentationModel
+ * @royaleignorecoercion org.apache.royale.core.ISelectableItemRenderer
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ protected function dataProviderChangeHandler(event:Event):void
+ {
+ if (!dataProviderModel)
+ return;
+ var dp:ICollectionView = dataProviderModel.dataProvider as ICollectionView;
+ if (!dp)
+ return;
+
+ // remove this and better add beads when needed
+ // listen for individual items being added in the future.
+ // var dped:IEventDispatcher = dp as IEventDispatcher;
+ // dped.addEventListener(CollectionEvent.ITEM_ADDED, itemAddedHandler);
+ // dped.addEventListener(CollectionEvent.ITEM_REMOVED, itemRemovedHandler);
+ // dped.addEventListener(CollectionEvent.ITEM_UPDATED, itemUpdatedHandler);
+
+ dataGroup.removeAllItemRenderers();
+
+ var presentationModel:IListPresentationModel = _strand.getBeadByType(IListPresentationModel) as IListPresentationModel;
+ labelField = dataProviderModel.labelField;
+
+ var n:int = dp.length;
+ for (var i:int = 0; i < n; i++)
+ {
+ var ir:ISelectableItemRenderer = itemRendererFactory.createItemRenderer(dataGroup) as ISelectableItemRenderer;
+ var item:Object = dp.getItemAt(i);
+ fillRenderer(i, item, ir, presentationModel);
+ }
+
+ IEventDispatcher(_strand).dispatchEvent(new Event("itemsCreated"));
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.collections.ICollectionView
+ * @royaleignorecoercion org.apache.royale.core.IListPresentationModel
+ * @royaleignorecoercion org.apache.royale.core.ISelectableItemRenderer
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ // protected function itemAddedHandler(event:CollectionEvent):void
+ // {
+ // if (!dataProviderModel)
+ // return;
+ // var dp:ICollectionView = dataProviderModel.dataProvider as ICollectionView;
+ // if (!dp)
+ // return;
+
+ // var presentationModel:IListPresentationModel = _strand.getBeadByType(IListPresentationModel) as IListPresentationModel;
+ // var ir:ISelectableItemRenderer = itemRendererFactory.createItemRenderer(dataGroup) as ISelectableItemRenderer;
+ // labelField = dataProviderModel.labelField;
+
+ // fillRenderer(event.index, event.item, ir, presentationModel);
+
+ // // update the index values in the itemRenderers to correspond to their shifted positions.
+ // var n:int = dataGroup.numElements;
+ // for (var i:int = event.index; i < n; i++)
+ // {
+ // ir = dataGroup.getElementAt(i) as ISelectableItemRenderer;
+ // ir.index = i;
+
+ // // could let the IR know its index has been changed (eg, it might change its
+ // // UI based on the index). Instead (PAYG), allow another bead to detect
+ // // this event and do this as not every IR will need to be updated.
+ // //var ubase:UIItemRendererBase = ir as UIItemRendererBase;
+ // //if (ubase) ubase.updateRenderer()
+ // }
+
+ // (_strand as IEventDispatcher).dispatchEvent(new Event("itemsCreated"));
+ // (_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded"));
+ // }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.collections.ICollectionView
+ * @royaleignorecoercion org.apache.royale.core.IListPresentationModel
+ * @royaleignorecoercion org.apache.royale.core.ISelectableItemRenderer
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ // protected function itemRemovedHandler(event:CollectionEvent):void
+ // {
+ // if (!dataProviderModel)
+ // return;
+ // var dp:ICollectionView = dataProviderModel.dataProvider as ICollectionView;
+ // if (!dp)
+ // return;
+
+ // var ir:ISelectableItemRenderer = dataGroup.getElementAt(event.index) as ISelectableItemRenderer;
+ // dataGroup.removeItemRenderer(ir);
+
+ // // adjust the itemRenderers' index to adjust for the shift
+ // var n:int = dataGroup.numElements;
+ // for (var i:int = event.index; i < n; i++)
+ // {
+ // ir = dataGroup.getElementAt(i) as ISelectableItemRenderer;
+ // ir.index = i;
+
+ // // could let the IR know its index has been changed (eg, it might change its
+ // // UI based on the index). Instead (PAYG), allow another bead to detect
+ // // this event and do this as not every IR will need to be updated.
+ // //var ubase:UIItemRendererBase = ir as UIItemRendererBase;
+ // //if (ubase) ubase.updateRenderer()
+ // }
+
+ // (_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded"));
+ // }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.collections.ICollectionView
+ * @royaleignorecoercion org.apache.royale.core.ISelectableItemRenderer
+ */
+ // protected function itemUpdatedHandler(event:CollectionEvent):void
+ // {
+ // if (!dataProviderModel)
+ // return;
+ // var dp:ICollectionView = dataProviderModel.dataProvider as ICollectionView;
+ // if (!dp)
+ // return;
+
+ // // update the given renderer with (possibly) new information so it can change its
+ // // appearence or whatever.
+ // var ir:ISelectableItemRenderer = dataGroup.getElementAt(event.index) as ISelectableItemRenderer;
+ // setData(ir, event.item, event.index);
+ // }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ protected function fillRenderer(index:int,
+ item:Object,
+ itemRenderer:ISelectableItemRenderer,
+ presentationModel:IListPresentationModel):void
+ {
+ dataGroup.addItemRendererAt(itemRenderer, index);
+
+ itemRenderer.labelField = labelField;
+
+ if (presentationModel) {
+ var style:SimpleCSSStyles = new SimpleCSSStyles();
+ style.marginBottom = presentationModel.separatorThickness;
+ UIBase(itemRenderer).style = style;
+ UIBase(itemRenderer).height = presentationModel.rowHeight;
+ UIBase(itemRenderer).percentWidth = 100;
+ }
+
+ setData(itemRenderer, item, index);
+ }
+
+ /**
+ * @private
+ */
+ protected function setData(itemRenderer:ISelectableItemRenderer, data:Object, index:int):void
+ {
+ itemRenderer.index = index;
+ itemRenderer.data = data;
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/ITextFieldView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/ITextItemRenderer.as
similarity index 62%
copy from frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/ITextFieldView.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/ITextItemRenderer.as
index 9f08336..48b4e1c 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/ITextFieldView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/ITextItemRenderer.as
@@ -16,29 +16,41 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.html.beads
+package org.apache.royale.jewel.beads.itemRenderers
{
- import org.apache.royale.core.CSSTextField;
+ import org.apache.royale.core.ISelectableItemRenderer;
/**
- * The ITextFieldView interface is the interface for views for
- * the use a CSSTextField to display text.
+ * The ITextItemRenderer interface is the interface for
+ * for org.apache.royale.core.IItemRenderer that display text.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.0
*/
- public interface ITextFieldView
+ public interface ITextItemRenderer extends ISelectableItemRenderer
{
/**
- * The org.apache.royale.core.CSSTextField used to display text.
+ * The text to be displayed in the item renderer.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.0
*/
- function get textField():CSSTextField;
- }
+ function get text():String;
+ function set text(value:String):void;
+
+ /**
+ * How text align in the itemRenderer instance.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ function get align():String
+ function set align(value:String):void
+ }
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/RemoveAllItemRendererForArrayListData.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/RemoveAllItemRendererForArrayListData.as
new file mode 100644
index 0000000..fecf921
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/RemoveAllItemRendererForArrayListData.as
@@ -0,0 +1,168 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.itemRenderers
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IDataProviderModel;
+ import org.apache.royale.core.IItemRendererParent;
+ import org.apache.royale.core.ISelectionModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IStrandWithModelView;
+ import org.apache.royale.events.CollectionEvent;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.html.beads.IListView;
+
+ /**
+ * Handles the removal of all itemRenderers once the all items has been removed
+ * from the IDataProviderModel. This works the same for List and Table components
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class RemoveAllItemRendererForArrayListData implements IBead
+ {
+ /**
+ * Constructor
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function RemoveAllItemRendererForArrayListData()
+ {
+ }
+
+ private var _strand:IStrand;
+
+ /**
+ * @copy org.apache.royale.core.IStrand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ IEventDispatcher(value).addEventListener("initComplete", initComplete);
+ }
+
+ /**
+ * finish setup
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected function initComplete(event:Event):void
+ {
+ IEventDispatcher(_strand).removeEventListener("initComplete", initComplete);
+
+ _dataProviderModel = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
+ dataProviderModel.addEventListener("dataProviderChanged", dataProviderChangeHandler);
+
+ // invoke now in case "dataProviderChanged" has already been dispatched.
+ dataProviderChangeHandler(null);
+ }
+
+ private var dp:IEventDispatcher;
+ /**
+ * @private
+ */
+ protected function dataProviderChangeHandler(event:Event):void
+ {
+ if(dp)
+ {
+ dp.removeEventListener(CollectionEvent.ALL_ITEMS_REMOVED, handleAllItemsRemoved);
+ }
+ dp = dataProviderModel.dataProvider as IEventDispatcher;
+ if (!dp)
+ return;
+
+ // listen for all items being removed in the future.
+ dp.addEventListener(CollectionEvent.ALL_ITEMS_REMOVED, handleAllItemsRemoved);
+ }
+
+ /**
+ * Handles the itemRemoved event by removing the item.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected function handleAllItemsRemoved(event:CollectionEvent):void
+ {
+ if (dataProviderModel is ISelectionModel)
+ {
+ var model:ISelectionModel = dataProviderModel as ISelectionModel;
+ model.selectedIndex = -1;
+ model.selectedItem = null;
+ }
+
+ itemRendererParent.removeAllItemRenderers();
+ (_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded"));
+ }
+
+ private var _dataProviderModel: IDataProviderModel;
+
+ /**
+ * The org.apache.royale.core.IDataProviderModel that contains the
+ * data source.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get dataProviderModel(): IDataProviderModel
+ {
+ if (_dataProviderModel == null) {
+ _dataProviderModel = _strand.getBeadByType(IDataProviderModel) as IDataProviderModel;
+ }
+ return _dataProviderModel;
+ }
+
+ private var _itemRendererParent: IItemRendererParent;
+
+ /**
+ * The org.apache.royale.core.IItemRendererParent used
+ * to generate instances of item renderers.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get itemRendererParent():IItemRendererParent
+ {
+ if (_itemRendererParent == null) {
+ var view:IListView = (_strand as IStrandWithModelView).view as IListView;
+ _itemRendererParent = view.dataGroup;
+ }
+ return _itemRendererParent;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/RemoveListItemRendererForArrayListData.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/RemoveListItemRendererForArrayListData.as
new file mode 100644
index 0000000..d591553
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/RemoveListItemRendererForArrayListData.as
@@ -0,0 +1,177 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.itemRenderers
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IDataProviderModel;
+ import org.apache.royale.core.IItemRendererParent;
+ import org.apache.royale.core.ISelectableItemRenderer;
+ import org.apache.royale.core.ISelectionModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IStrandWithModelView;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.CollectionEvent;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.html.beads.IListView;
+
+ /**
+ * Handles the removal of an itemRenderer in a List component once the corresponding
+ * datum has been removed from the IDataProviderModel.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class RemoveListItemRendererForArrayListData implements IBead
+ {
+ /**
+ * Constructor
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function RemoveListItemRendererForArrayListData()
+ {
+ }
+
+ private var _strand:IStrand;
+
+ /**
+ * @copy org.apache.royale.core.IStrand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ IEventDispatcher(value).addEventListener("initComplete", initComplete);
+ }
+
+ /**
+ * finish setup
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected function initComplete(event:Event):void
+ {
+ IEventDispatcher(_strand).removeEventListener("initComplete", initComplete);
+
+ _dataProviderModel = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
+ dataProviderModel.addEventListener("dataProviderChanged", dataProviderChangeHandler);
+
+ // invoke now in case "dataProviderChanged" has already been dispatched.
+ dataProviderChangeHandler(null);
+ }
+
+ private var dp:IEventDispatcher;
+ /**
+ * @private
+ */
+ protected function dataProviderChangeHandler(event:Event):void
+ {
+ if(dp)
+ {
+ dp.removeEventListener(CollectionEvent.ITEM_REMOVED, handleItemRemoved);
+ }
+ dp = dataProviderModel.dataProvider as IEventDispatcher;
+ if (!dp)
+ return;
+
+ // listen for individual items being removed in the future.
+ dp.addEventListener(CollectionEvent.ITEM_REMOVED, handleItemRemoved);
+ }
+
+ /**
+ * Handles the itemRemoved event by removing the item.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.ISelectableItemRenderer
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ protected function handleItemRemoved(event:CollectionEvent):void
+ {
+ var ir:ISelectableItemRenderer = itemRendererParent.getItemRendererAt(event.index) as ISelectableItemRenderer;
+ itemRendererParent.removeItemRenderer(ir);
+
+ // adjust the itemRenderers' index to adjust for the shift
+ var n:int = itemRendererParent.numItemRenderers;
+ for (var i:int = event.index; i < n; i++)
+ {
+ ir = itemRendererParent.getItemRendererAt(i) as ISelectableItemRenderer;
+ ir.index = i;
+ }
+
+ (_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded"));
+ }
+
+ private var _dataProviderModel: IDataProviderModel;
+
+ /**
+ * The org.apache.royale.core.IDataProviderModel that contains the
+ * data source.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+ */
+ public function get dataProviderModel(): IDataProviderModel
+ {
+ if (_dataProviderModel == null) {
+ _dataProviderModel = _strand.getBeadByType(IDataProviderModel) as IDataProviderModel;
+ }
+ return _dataProviderModel;
+ }
+
+ private var _itemRendererParent: IItemRendererParent;
+
+ /**
+ * The org.apache.royale.core.IItemRendererParent used
+ * to generate instances of item renderers.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IStrandWithModelView
+ */
+ public function get itemRendererParent():IItemRendererParent
+ {
+ if (_itemRendererParent == null) {
+ var view:IListView = (_strand as IStrandWithModelView).view as IListView;
+ _itemRendererParent = view.dataGroup;
+ }
+ return _itemRendererParent;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/RemoveTableRowForArrayListData.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/RemoveTableRowForArrayListData.as
new file mode 100644
index 0000000..83ada71
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/RemoveTableRowForArrayListData.as
@@ -0,0 +1,171 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.itemRenderers
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.IItemRendererParent;
+ import org.apache.royale.core.ISelectionModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.CollectionEvent;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.html.supportClasses.DataItemRenderer;
+ import org.apache.royale.jewel.beads.models.TableModel;
+ import org.apache.royale.jewel.supportClasses.table.TableCell;
+ import org.apache.royale.jewel.supportClasses.table.TableRow;
+ import org.apache.royale.html.beads.IListView;
+ import org.apache.royale.core.IItemRenderer;
+
+ /**
+ * Handles the removal of an itemRenderer in a Table component once the corresponding
+ * datum has been removed from the IDataProviderModel.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class RemoveTableRowForArrayListData implements IBead
+ {
+ /**
+ * Constructor
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function RemoveTableRowForArrayListData()
+ {
+ }
+
+ private var _strand:IStrand;
+ /**
+ * @copy org.apache.royale.core.IStrand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ IEventDispatcher(value).addEventListener("initComplete", initComplete);
+ }
+
+ protected var labelField:String;
+
+ protected var model:TableModel;
+
+ /**
+ * finish setup
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected function initComplete(event:Event):void
+ {
+ IEventDispatcher(_strand).removeEventListener("initComplete", initComplete);
+
+ model = _strand.getBeadByType(ISelectionModel) as TableModel;
+ labelField = model.labelField;
+
+ model.addEventListener("dataProviderChanged", dataProviderChangeHandler);
+
+ // invoke now in case "dataProviderChanged" has already been dispatched.
+ dataProviderChangeHandler(null);
+ }
+
+ private var dp:IEventDispatcher;
+ /**
+ * @private
+ */
+ protected function dataProviderChangeHandler(event:Event):void
+ {
+ if(dp)
+ {
+ dp.removeEventListener(CollectionEvent.ITEM_REMOVED, handleItemRemoved);
+ }
+ dp = model.dataProvider as IEventDispatcher;
+ if (!dp)
+ return;
+
+ // listen for individual items being removed in the future.
+ dp.addEventListener(CollectionEvent.ITEM_REMOVED, handleItemRemoved);
+ }
+
+ /**
+ * Handles the itemRemoved event by removing the item.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected function handleItemRemoved(event:CollectionEvent):void
+ {
+ var ir:DataItemRenderer;
+ var cell:TableCell;
+ var processedRow:TableRow = (itemRendererParent as UIBase).getElementAt(event.index) as TableRow;
+ while (processedRow.numElements > 0) {
+ cell = processedRow.getElementAt(0) as TableCell;
+ ir = cell.getElementAt(0) as DataItemRenderer;
+ itemRendererParent.removeItemRenderer(ir);
+ cell.removeElement(ir);
+ processedRow.removeElement(cell);
+ }
+ (itemRendererParent as UIBase).removeElement(processedRow);
+
+ // adjust the itemRenderers' index to adjust for the shift
+ var len:int = itemRendererParent.numItemRenderers;
+ for (var i:int = event.index; i < len; i++)
+ {
+ ir = itemRendererParent.getItemRendererAt(i) as DataItemRenderer;
+ ir.index = i;
+ ir.rowIndex = i;
+ }
+
+ (_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded"));
+ }
+
+ private var _itemRendererParent: IItemRendererParent;
+
+ /**
+ * The org.apache.royale.core.IItemRendererParent used
+ * to generate instances of item renderers.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get itemRendererParent():IItemRendererParent
+ {
+ if (_itemRendererParent == null) {
+ var listView:IListView = _strand.getBeadByType(IListView) as IListView;
+ _itemRendererParent = listView.dataGroup;
+ }
+ return _itemRendererParent;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableItemRendererFactoryForCollectionView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableItemRendererFactoryForCollectionView.as
new file mode 100644
index 0000000..db56225
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableItemRendererFactoryForCollectionView.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.itemRenderers
+{
+ import org.apache.royale.collections.ICollectionView;
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IBeadModel;
+ import org.apache.royale.core.IChild;
+ import org.apache.royale.core.IDataProviderItemRendererMapper;
+ import org.apache.royale.core.IDataProviderModel;
+ import org.apache.royale.core.IItemRendererClassFactory;
+ import org.apache.royale.core.IListPresentationModel;
+ import org.apache.royale.core.IParent;
+ import org.apache.royale.core.ISelectableItemRenderer;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.SimpleCSSStyles;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.CollectionEvent;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.EventDispatcher;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.html.beads.IListView;
+ import org.apache.royale.html.supportClasses.DataItemRenderer;
+ import org.apache.royale.jewel.Label;
+ import org.apache.royale.jewel.Table;
+ import org.apache.royale.jewel.beads.controls.TextAlign;
+ import org.apache.royale.jewel.beads.itemRenderers.ITextItemRenderer;
+ import org.apache.royale.jewel.beads.models.TableModel;
+ import org.apache.royale.jewel.beads.views.TableView;
+ import org.apache.royale.jewel.supportClasses.table.TBodyContentArea;
+ import org.apache.royale.jewel.supportClasses.table.THead;
+ import org.apache.royale.jewel.supportClasses.table.TableColumn;
+ import org.apache.royale.jewel.supportClasses.table.TableHeaderCell;
+ import org.apache.royale.jewel.supportClasses.table.TableRow;
+ import org.apache.royale.utils.loadBeadFromValuesManager;
+
+ /**
+ * This class creates itemRenderer instances from the data contained within an ICollectionView
+ * and generates the appropiate table structure with thead, tbody and table rows and cells
+ * to hold the columns and data in cells.
+ *
+ */
+ public class TableItemRendererFactoryForCollectionView extends EventDispatcher implements IBead, IDataProviderItemRendererMapper
+ {
+ public function TableItemRendererFactoryForCollectionView(target:Object = null)
+ {
+ super(target);
+ }
+
+ protected 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.4
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ IEventDispatcher(value).addEventListener("initComplete", initComplete);
+ }
+
+ /**
+ * finish setup
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ * @royaleignorecoercion org.apache.royale.html.beads.IListView
+ */
+ protected function initComplete(event:Event):void
+ {
+ IEventDispatcher(_strand).removeEventListener("initComplete", initComplete);
+
+ view = _strand.getBeadByType(IListView) as TableView;
+ tbody = view.dataGroup as TBodyContentArea;
+
+ model = _strand.getBeadByType(IBeadModel) as TableModel;
+ model.addEventListener("dataProviderChanged", dataProviderChangeHandler);
+
+ table = _strand as Table;
+
+ dataProviderChangeHandler(null);
+ }
+
+ protected var labelField:String;
+
+ private var _itemRendererFactory:IItemRendererClassFactory;
+
+ /**
+ * The org.apache.royale.core.IItemRendererClassFactory used
+ * to generate instances of item renderers.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IItemRendererClassFactory
+ */
+ public function get itemRendererFactory():IItemRendererClassFactory
+ {
+ if(!_itemRendererFactory)
+ _itemRendererFactory = loadBeadFromValuesManager(IItemRendererClassFactory, "iItemRendererClassFactory", _strand) as IItemRendererClassFactory;
+
+ return _itemRendererFactory;
+ }
+
+ /**
+ * @private
+ */
+ public function set itemRendererFactory(value:IItemRendererClassFactory):void
+ {
+ _itemRendererFactory = value;
+ }
+
+ protected var view:TableView;
+ protected var model:TableModel;
+ protected var table:Table;
+
+ private var tbody:TBodyContentArea;
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.collections.ICollectionView
+ * @royaleignorecoercion org.apache.royale.core.IListPresentationModel
+ * @royaleignorecoercion org.apache.royale.core.ISelectableItemRenderer
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ protected function dataProviderChangeHandler(event:Event):void
+ {
+ // -- 1) CLEANING PHASE
+ if (!model)
+ return;
+ var dp:ICollectionView = model.dataProvider as ICollectionView;
+ if (!dp)
+ {
+ model.selectedIndex = -1;
+ model.selectedItem = null;
+ model.selectedItemProperty = null;
+
+ // TBodyContentArea - remove data items
+ tbody.removeAllItemRenderers();
+ return;
+ }
+ // remove this and better add beads when needed
+ // listen for individual items being added in the future.
+ // var dped:IEventDispatcher = dp as IEventDispatcher;
+ // dped.addEventListener(CollectionEvent.ITEM_ADDED, itemAddedHandler);
+ // dped.addEventListener(CollectionEvent.ITEM_REMOVED, itemRemovedHandler);
+ // dped.addEventListener(CollectionEvent.ITEM_UPDATED, itemUpdatedHandler);
+
+ // TBodyContentArea - remove data items
+ tbody.removeAllItemRenderers();
+
+ // THEAD - remove header items
+ removeElements(view.thead);
+ // -- add the header
+ createHeader();
+
+
+ // -- 2) CREATION PHASE
+ var presentationModel:IListPresentationModel = _strand.getBeadByType(IListPresentationModel) as IListPresentationModel;
+ labelField = model.labelField;
+
+ var column:TableColumn;
+ var ir:ITextItemRenderer;
+
+ var n:int = dp.length;
+ var index:int = 0;
+ for (var i:int = 0; i < n; i++)
+ {
+ for(var j:int = 0; j < model.columns.length; j++)
+ {
+ column = model.columns[j] as TableColumn;
+
+ if(column.itemRenderer != null)
+ {
+ ir = column.itemRenderer.newInstance() as ITextItemRenderer;
+ } else
+ {
+ ir = itemRendererFactory.createItemRenderer(tbody) as ITextItemRenderer;
+ }
+
+ labelField = column.dataField;
+ var item:Object = dp.getItemAt(i);
+
+ (ir as DataItemRenderer).dataField = labelField;
+ (ir as DataItemRenderer).rowIndex = i;
+ (ir as DataItemRenderer).columnIndex = j;
+ fillRenderer(index++, item, (ir as ISelectableItemRenderer), presentationModel);
+
+ if(column.align != "")
+ {
+ ir.align = column.align;
+ }
+ }
+ }
+
+ IEventDispatcher(_strand).dispatchEvent(new Event("itemsCreated"));
+ table.dispatchEvent(new Event("layoutNeeded"));
+ }
+
+ public function removeElements(container: IParent):void
+ {
+ if(container != null)
+ {
+ while (container.numElements > 0) {
+ var child:IChild = container.getElementAt(0);
+ container.removeElement(child);
+ }
+ }
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ protected function fillRenderer(index:int,
+ item:Object,
+ itemRenderer:ISelectableItemRenderer,
+ presentationModel:IListPresentationModel):void
+ {
+ tbody.addItemRendererAt(itemRenderer, index);
+ itemRenderer.labelField = labelField;
+
+ if (presentationModel) {
+ var style:SimpleCSSStyles = new SimpleCSSStyles();
+ style.marginBottom = presentationModel.separatorThickness;
+ UIBase(itemRenderer).style = style;
+ UIBase(itemRenderer).height = presentationModel.rowHeight;
+ UIBase(itemRenderer).percentWidth = 100;
+ }
+
+ setData(itemRenderer, item, index);
+ }
+
+ /**
+ * @private
+ */
+ protected function setData(itemRenderer:ISelectableItemRenderer, data:Object, index:int):void
+ {
+ itemRenderer.index = index;
+ itemRenderer.data = data;
+ }
+
+ private function createHeader():void
+ {
+ var createHeaderRow:Boolean = false;
+ var test:TableColumn;
+ var c:int;
+
+ for(c=0; c < model.columns.length; c++)
+ {
+ test = model.columns[c] as TableColumn;
+ if (test.label != null) {
+ createHeaderRow = true;
+ break;
+ }
+ }
+
+ if (createHeaderRow)
+ {
+ if(view.thead == null)
+ view.thead = new THead();
+ var thead:THead = view.thead;
+ var headerRow:TableRow = new TableRow();
+
+ for(c=0; c < model.columns.length; c++)
+ {
+ test = model.columns[c] as TableColumn;
+ var tableHeader:TableHeaderCell = new TableHeaderCell();
+
+ var label:Label = new Label();
+ tableHeader.addElement(label);
+ label.text = test.label == null ? "" : test.label;
+
+ var columnLabelTextAlign:TextAlign = new TextAlign();
+ columnLabelTextAlign.align = test.columnLabelAlign;
+ label.addBead(columnLabelTextAlign);
+ headerRow.addElement(tableHeader);
+ }
+
+ thead.addElement(headerRow);
+ table.addElement(thead);
+ }
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.collections.ICollectionView
+ * @royaleignorecoercion org.apache.royale.core.IListPresentationModel
+ * @royaleignorecoercion org.apache.royale.core.ISelectableItemRenderer
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ // protected function itemAddedHandler(event:CollectionEvent):void
+ // {
+ // }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.collections.ICollectionView
+ * @royaleignorecoercion org.apache.royale.core.IListPresentationModel
+ * @royaleignorecoercion org.apache.royale.core.ISelectableItemRenderer
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ // protected function itemRemovedHandler(event:CollectionEvent):void
+ // {
+ // }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.collections.ICollectionView
+ * @royaleignorecoercion org.apache.royale.core.ISelectableItemRenderer
+ */
+ // protected function itemUpdatedHandler(event:CollectionEvent):void
+ // {
+ // }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/UpdateListItemRendererForArrayListData.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/UpdateListItemRendererForArrayListData.as
new file mode 100644
index 0000000..245eea4
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/UpdateListItemRendererForArrayListData.as
@@ -0,0 +1,183 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.itemRenderers
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IDataProviderModel;
+ import org.apache.royale.core.IItemRendererParent;
+ import org.apache.royale.core.ISelectableItemRenderer;
+ import org.apache.royale.core.ISelectionModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IStrandWithModelView;
+ import org.apache.royale.events.CollectionEvent;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.html.beads.IListView;
+
+ /**
+ * Handles the update of an itemRenderer in a List component once the corresponding
+ * datum has been updated from the IDataProviderModel.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class UpdateListItemRendererForArrayListData implements IBead
+ {
+ /**
+ * Constructor
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function UpdateListItemRendererForArrayListData()
+ {
+ }
+
+ protected var _strand:IStrand;
+
+ protected var labelField:String;
+
+ /**
+ * @copy org.apache.royale.core.IStrand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ IEventDispatcher(value).addEventListener("initComplete", initComplete);
+ }
+
+ /**
+ * finish setup
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ protected function initComplete(event:Event):void
+ {
+ IEventDispatcher(_strand).removeEventListener("initComplete", initComplete);
+
+ _dataProviderModel = _strand.getBeadByType(ISelectionModel) as ISelectionModel;
+ labelField = _dataProviderModel.labelField;
+
+ dataProviderModel.addEventListener("dataProviderChanged", dataProviderChangeHandler);
+
+ // invoke now in case "dataProviderChanged" has already been dispatched.
+ dataProviderChangeHandler(null);
+ }
+
+ private var dp:IEventDispatcher;
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ protected function dataProviderChangeHandler(event:Event):void
+ {
+ if(dp)
+ {
+ dp.removeEventListener(CollectionEvent.ITEM_UPDATED, handleItemUpdated);
+ }
+ dp = dataProviderModel.dataProvider as IEventDispatcher;
+ if (!dp)
+ return;
+
+ // listen for individual items being updated in the future.
+ dp.addEventListener(CollectionEvent.ITEM_UPDATED, handleItemUpdated);
+ }
+
+ /**
+ * Handles the itemUpdated event by updating the item.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ protected function handleItemUpdated(event:CollectionEvent):void
+ {
+ var ir:ISelectableItemRenderer = itemRendererParent.getItemRendererAt(event.index) as ISelectableItemRenderer;
+
+ setData(ir, event.item, event.index);
+
+ (_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded"));
+ }
+
+ private var _dataProviderModel:IDataProviderModel;
+
+ /**
+ * The org.apache.royale.core.IDataProviderModel that contains the
+ * data source.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get dataProviderModel():IDataProviderModel
+ {
+ if (_dataProviderModel == null) {
+ _dataProviderModel = _strand.getBeadByType(IDataProviderModel) as IDataProviderModel;
+ }
+ return _dataProviderModel;
+ }
+
+ private var _itemRendererParent: IItemRendererParent;
+
+ /**
+ * The org.apache.royale.core.IItemRendererParent used
+ * to generate instances of item renderers.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IUIBase
+ */
+ public function get itemRendererParent():IItemRendererParent
+ {
+ if (_itemRendererParent == null) {
+ var view:IListView = (_strand as IStrandWithModelView).view as IListView;
+ _itemRendererParent = view.dataGroup;
+ }
+ return _itemRendererParent;
+ }
+
+ /**
+ * @private
+ */
+ protected function setData(itemRenderer:ISelectableItemRenderer, data:Object, index:int):void
+ {
+ itemRenderer.index = index;
+ itemRenderer.data = data;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/UpdateTableRowForArrayListData.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/UpdateTableRowForArrayListData.as
new file mode 100644
index 0000000..1d811e4
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/UpdateTableRowForArrayListData.as
@@ -0,0 +1,180 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.itemRenderers
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.IDataProviderModel;
+ import org.apache.royale.core.IItemRendererParent;
+ import org.apache.royale.core.ISelectableItemRenderer;
+ import org.apache.royale.core.ISelectionModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.CollectionEvent;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.jewel.beads.models.TableModel;
+ import org.apache.royale.jewel.supportClasses.table.TableCell;
+ import org.apache.royale.jewel.supportClasses.table.TableRow;
+ import org.apache.royale.html.beads.IListView;
+ import org.apache.royale.jewel.itemRenderers.TableItemRenderer;
+
+ /**
+ * Handles the update of an itemRenderer in a Table component once the corresponding
+ * datum has been updated from the IDataProviderModel.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class UpdateTableRowForArrayListData implements IBead
+ {
+ /**
+ * Constructor
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function UpdateTableRowForArrayListData()
+ {
+ }
+
+ protected var _strand:IStrand;
+ /**
+ * @copy org.apache.royale.core.IStrand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ IEventDispatcher(value).addEventListener("initComplete", initComplete);
+ }
+
+ protected var labelField:String;
+
+ protected var model:TableModel;
+
+ /**
+ * finish setup
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ protected function initComplete(event:Event):void
+ {
+ IEventDispatcher(_strand).removeEventListener("initComplete", initComplete);
+
+ model = _strand.getBeadByType(ISelectionModel) as TableModel;
+ labelField = model.labelField;
+
+ model.addEventListener("dataProviderChanged", dataProviderChangeHandler);
+
+ // invoke now in case "dataProviderChanged" has already been dispatched.
+ dataProviderChangeHandler(null);
+ }
+
+ private var dp:IEventDispatcher;
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ protected function dataProviderChangeHandler(event:Event):void
+ {
+ if(dp)
+ {
+ dp.removeEventListener(CollectionEvent.ITEM_UPDATED, handleItemUpdated);
+ }
+ dp = model.dataProvider as IEventDispatcher;
+ if (!dp)
+ return;
+
+ // listen for individual items being added in the future.
+ dp.addEventListener(CollectionEvent.ITEM_UPDATED, handleItemUpdated);
+ }
+
+ /**
+ * Handles the itemUpdated event by updating the item.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.jewel.supportClasses.table.TableCell
+ * @royaleignorecoercion org.apache.royale.jewel.supportClasses.table.TableRow
+ * @royaleignorecoercion org.apache.royale.core.ISelectableItemRenderer
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ protected function handleItemUpdated(event:CollectionEvent):void
+ {
+ var ir:ISelectableItemRenderer;
+ var processedRow:TableRow = (itemRendererParent as UIBase).getElementAt(event.index) as TableRow;
+ var cell:TableCell;
+ var n:int = processedRow.numElements;
+
+ for (var i:int = 0; i < n; i++)
+ {
+ cell = processedRow.getElementAt(i) as TableCell;
+ ir = cell.getElementAt(0) as ISelectableItemRenderer;
+ setData(ir, event.item, event.index);
+ }
+
+ (_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded"));
+ }
+
+ private var _itemRendererParent: IItemRendererParent;
+
+ /**
+ * The org.apache.royale.core.IItemRendererParent used
+ * to generate instances of item renderers.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.html.beads.IListView
+ */
+ public function get itemRendererParent():IItemRendererParent
+ {
+ if (_itemRendererParent == null) {
+ var listView:IListView = _strand.getBeadByType(IListView) as IListView;
+ _itemRendererParent = listView.dataGroup;
+ }
+ return _itemRendererParent;
+ }
+
+ /**
+ * @private
+ */
+ protected function setData(itemRenderer:ISelectableItemRenderer, data:Object, index:int):void
+ {
+ itemRenderer.index = index;
+ itemRenderer.data = data;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/BasicLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/BasicLayout.as
new file mode 100644
index 0000000..c3ea9c8
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/BasicLayout.as
@@ -0,0 +1,236 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.ILayoutChild;
+ import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.IStrand;
+
+ COMPILE::JS {
+ import org.apache.royale.core.UIBase;
+ }
+
+ /**
+ * The BasicLayout class is a simple layout
+ * bead. It takes the set of children and lays them out
+ * as specified by CSS properties like left, right, top
+ * and bottom.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class BasicLayout extends LayoutBase implements IBeadLayout
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function BasicLayout()
+ {
+ super();
+ }
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout absolute";
+
+ COMPILE::JS
+ private var hostComponent:UIBase;
+
+ COMPILE::JS
+ protected var hostClassList:DOMTokenList;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ COMPILE::JS
+ {
+ hostComponent = host as UIBase;
+ hostClassList = hostComponent.positioner.classList;
+ if (hostClassList.contains("layout"))
+ hostClassList.remove("layout");
+ hostClassList.add("layout");
+ if(hostClassList.contains("absolute"))
+ hostClassList.remove("absolute");
+ hostClassList.add("absolute");
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBeadLayout#layout
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ override public function layout():Boolean
+ {
+ COMPILE::SWF
+ {
+ var contentView:ILayoutView = layoutView;
+
+ var hostWidthSizedToContent:Boolean = host.isWidthSizedToContent();
+ var hostHeightSizedToContent:Boolean = host.isHeightSizedToContent();
+
+ var w:Number = hostWidthSizedToContent ? 0 : contentView.width;
+ var h:Number = hostHeightSizedToContent ? 0 : contentView.height;
+
+ var n:int = contentView.numElements;
+
+ 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, contentView.width, contentView.height);
+ var ww:Number = w;
+ var hh:Number = h;
+
+ var ilc:ILayoutChild = child as ILayoutChild;
+
+ // set the top edge of the child
+ if (!isNaN(positions.left))
+ {
+ if (ilc)
+ ilc.setX(positions.left+margins.left);
+ else
+ child.x = positions.left+margins.left;
+ ww -= positions.left + margins.left;
+ }
+
+ // set the left edge of the child
+ if (!isNaN(positions.top))
+ {
+ if (ilc)
+ ilc.setY(positions.top+margins.top);
+ else
+ child.y = positions.top+margins.top;
+ hh -= positions.top + margins.top;
+ }
+
+ // set the right edge of the child
+ if (!isNaN(positions.right))
+ {
+ if (!hostWidthSizedToContent)
+ {
+ if (!isNaN(positions.left))
+ {
+ if (ilc)
+ ilc.setWidth(ww - positions.right - margins.right, false);
+ else
+ child.width = ww - positions.right - margins.right;
+ }
+ else
+ {
+ if (ilc)
+ {
+ ilc.setX( w - positions.right - margins.left - child.width - margins.right);
+ }
+ else
+ {
+ child.x = w - positions.right - margins.left - child.width - margins.right;
+ }
+ }
+ }
+ }
+ else if (ilc != null && !isNaN(ilc.percentWidth) && !hostWidthSizedToContent)
+ {
+ ilc.setWidth((ww - margins.right - margins.left) * ilc.percentWidth/100, false);
+ }
+
+ // set the bottm edge of the child
+ if (!isNaN(positions.bottom))
+ {
+ if (!hostHeightSizedToContent)
+ {
+ if (!isNaN(positions.top))
+ {
+ if (ilc)
+ ilc.setHeight(hh - positions.bottom - margins.bottom, false);
+ else
+ child.height = hh - positions.bottom - margins.bottom;
+ }
+ else
+ {
+ if (ilc)
+ ilc.setY( h - positions.bottom - child.height - margins.bottom);
+ else
+ child.y = h - positions.bottom - child.height - margins.bottom;
+ }
+ }
+ }
+ else if (ilc != null && !isNaN(ilc.percentHeight) && !hostHeightSizedToContent)
+ {
+ ilc.setHeight((hh - margins.top - margins.bottom) * ilc.percentHeight/100, false);
+ }
+
+ if (margins.auto)
+ {
+ if (ilc)
+ ilc.setX( (w - child.width) / 2);
+ else
+ child.x = (w - child.width) / 2;
+ }
+ }
+
+ return true;
+
+ }
+
+ COMPILE::JS
+ {
+ /**
+ * This Layout uses the following CSS rules
+ * no code needed in JS for layout
+ *
+ * .layout {
+ * display: flex;
+ * }
+ *
+ * .layout.absolute {
+ * position: relative;
+ * }
+ *
+ * .layout.absolute > * {
+ * position: absolute
+ * }
+ */
+
+ return true;
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridCellLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridCellLayout.as
new file mode 100644
index 0000000..c040879
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridCellLayout.as
@@ -0,0 +1,641 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.jewel.beads.layouts.StyledLayoutBase;
+ import org.apache.royale.core.IBeadLayout;
+ import org.apache.royale.core.ILayoutChild;
+ import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.IStrand;
+
+ COMPILE::JS {
+ import org.apache.royale.core.UIBase;
+ }
+
+ /**
+ * The GridCellLayout class is the layout used for childrens in a Grid
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class GridCellLayout extends StyledLayoutBase implements IBeadLayout
+ {
+ public static const MAX_COLUMNS:Number = 12;
+ public static const PHONE:String = "phone";
+ public static const TABLET:String = "tablet";
+ public static const DESKTOP:String = "desktop";
+ public static const WIDESCREEN:String = "widescreen";
+
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function GridCellLayout()
+ {
+ super();
+ }
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "cell";
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ COMPILE::JS
+ {
+ setFractionForScreen(DESKTOP, _wideScreenNumerator, _wideScreenDenominator);
+ setFractionForScreen(WIDESCREEN, _desktopNumerator, _desktopDenominator);
+ setFractionForScreen(TABLET, _tabletNumerator, _tabletDenominator);
+ setFractionForScreen(PHONE, _phoneNumerator, _phoneDenominator);
+ }
+ }
+
+ private var _wideScreenNumerator:Number;
+ /**
+ * The X Number for "widescreen-col-X-Y" effect selector.
+ * Sets the widescreen numerator for the X/Y fraction that indicates the cell's size in
+ * widescreen screen. Needs to be set in conjunction with widescreen denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get wideScreenNumerator():Number
+ {
+ return _wideScreenNumerator;
+ }
+
+ public function set wideScreenNumerator(value:Number):void
+ {
+ if (_wideScreenNumerator != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setFractionForScreen(WIDESCREEN, value, _wideScreenDenominator);
+ }
+ _wideScreenNumerator = value;
+ }
+ }
+
+ private var _wideScreenDenominator:Number;
+ /**
+ * The Y Number for "widescreen-col-X-Y" effect selector.
+ * Sets the widescreen denominator for the X/Y fraction that indicates the cell's size in
+ * widescreen screen. Needs to be set in conjunction with widescreen denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get wideScreenDenominator():Number
+ {
+ return _wideScreenDenominator;
+ }
+
+ public function set wideScreenDenominator(value:Number):void
+ {
+ if (_wideScreenDenominator != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setFractionForScreen(WIDESCREEN, _wideScreenNumerator, value);
+ }
+ _wideScreenDenominator = value;
+ }
+ }
+
+ private var _desktopNumerator:Number;
+ /**
+ * The X Number for "desktop-col-X-Y" effect selector.
+ * Sets the desktop numerator for the X/Y fraction that indicates the cell's size in
+ * desktop screen. Needs to be set in conjunction with desktop denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get desktopNumerator():Number
+ {
+ return _desktopNumerator;
+ }
+
+ public function set desktopNumerator(value:Number):void
+ {
+ if (_desktopNumerator != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setFractionForScreen(DESKTOP, value, _desktopDenominator);
+ }
+ _desktopNumerator = value;
+ }
+ }
+
+ private var _desktopDenominator:Number;
+ /**
+ * The Y Number for "desktop-col-X-Y" effect selector.
+ * Sets the desktop denominator for the X/Y fraction that indicates the cell's size in
+ * desktop screen. Needs to be set in conjunction with desktop denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get desktopDenominator():Number
+ {
+ return _desktopDenominator;
+ }
+
+ public function set desktopDenominator(value:Number):void
+ {
+ if (_desktopDenominator != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setFractionForScreen(DESKTOP, _desktopNumerator, value);
+ }
+ _desktopDenominator = value;
+ }
+ }
+
+ private var _tabletNumerator:Number;
+ /**
+ * The X Number for "tablet-col-X-Y" effect selector.
+ * Sets the tablet numerator for the X/Y fraction that indicates the cell's size in
+ * tablet screen. Needs to be set in conjunction with tablet denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get tabletNumerator():Number
+ {
+ return _tabletNumerator;
+ }
+
+ public function set tabletNumerator(value:Number):void
+ {
+ if (_tabletNumerator != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setFractionForScreen(TABLET, value, _tabletDenominator);
+ }
+ _tabletNumerator = value;
+ }
+ }
+
+ private var _tabletDenominator:Number;
+ /**
+ * The Y Number for "tablet-col-X-Y" effect selector.
+ * Sets the tablet denominator for the X/Y fraction that indicates the cell's size in
+ * tablet screen. Needs to be set in conjunction with tablet denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get tabletDenominator():Number
+ {
+ return _tabletDenominator;
+ }
+
+ public function set tabletDenominator(value:Number):void
+ {
+ if (_tabletDenominator != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setFractionForScreen(TABLET, _tabletNumerator, value);
+ }
+ _tabletDenominator = value;
+ }
+ }
+
+ private var _phoneNumerator:Number;
+ /**
+ * The X Number for "phone-col-X-Y" effect selector.
+ * Sets the phone numerator for the X/Y fraction that indicates the cell's size in
+ * phone screen. Needs to be set in conjunction with phone denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get phoneNumerator():Number
+ {
+ return _phoneNumerator;
+ }
+
+ public function set phoneNumerator(value:Number):void
+ {
+ if (_phoneNumerator != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setFractionForScreen(PHONE, value, _phoneDenominator);
+ }
+ _phoneNumerator = value;
+ }
+ }
+
+ private var _phoneDenominator:Number;
+ /**
+ * The Y Number for "phone-col-X-Y" effect selector.
+ * Sets the phone denominator for the X/Y fraction that indicates the cell's size in
+ * phone screen. Needs to be set in conjunction with phone denominator
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get phoneDenominator():Number
+ {
+ return _phoneDenominator;
+ }
+
+ public function set phoneDenominator(value:Number):void
+ {
+ if (_phoneDenominator != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setFractionForScreen(PHONE, _phoneNumerator, value);
+ }
+ _phoneDenominator = value;
+ }
+ }
+
+ COMPILE::JS
+ private function setFractionForScreen(screen:String, num:Number, den:Number):void
+ {
+ if(num && den)
+ {
+ if (num <= 0 || num > MAX_COLUMNS)
+ throw new Error(screen + " numerator must be between 1 and " + MAX_COLUMNS);
+ if (den <= 0 || den > MAX_COLUMNS)
+ throw new Error(screen + " denominator must be between 1 and " + MAX_COLUMNS);
+
+ if (hostClassList.contains(screen + "-col-" + _desktopNumerator + "-" + _desktopDenominator))
+ hostClassList.remove(screen + "-col-" + _desktopNumerator + "-" + _desktopDenominator);
+ hostClassList.add(screen + "-col-" + num + "-" + den);
+ }
+ }
+
+ private var _phoneVisible:Boolean;
+ /**
+ * Makes the cell to be visible or hidden in phone size
+ * Uses "visible-phone" and "hidden-phone" effect selectors.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get phoneVisible():Boolean
+ {
+ return _phoneVisible;
+ }
+
+ public function set phoneVisible(value:Boolean):void
+ {
+ if (_phoneVisible != value)
+ {
+ _phoneVisible = value;
+
+ COMPILE::JS
+ {
+ if(hostComponent)
+ {
+ if(_phoneVisible)
+ {
+ if (hostClassList.contains("hidden-phone"))
+ hostClassList.remove("hidden-phone");
+ hostClassList.add("visible-phone");
+ } else
+ {
+ if (hostClassList.contains("visible-phone"))
+ hostClassList.remove("visible-phone");
+ hostClassList.add("hidden-phone");
+ }
+ }
+ }
+ }
+ }
+
+ private var _tabletVisible:Boolean;
+ /**
+ * Makes the cell to be visible or hidden in phone size
+ * Uses "visible-tablet" and "hidden-tablet" effect selectors.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get tabletVisible():Boolean
+ {
+ return _tabletVisible;
+ }
+
+ public function set tabletVisible(value:Boolean):void
+ {
+ if (_tabletVisible != value)
+ {
+ _tabletVisible = value;
+
+ COMPILE::JS
+ {
+ if(hostComponent)
+ {
+ if(_tabletVisible)
+ {
+ if (hostClassList.contains("hidden-tablet"))
+ hostClassList.remove("hidden-tablet");
+ hostClassList.add("visible-tablet");
+ } else
+ {
+ if (hostClassList.contains("visible-tablet"))
+ hostClassList.remove("visible-tablet");
+ hostClassList.add("hidden-tablet");
+ }
+ }
+ }
+ }
+ }
+
+ private var _desktopVisible:Boolean;
+ /**
+ * Makes the cell to be visible or hidden in phone size
+ * Uses "visible-desktop" and "hidden-desktop" effect selectors.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get desktopVisible():Boolean
+ {
+ return _desktopVisible;
+ }
+
+ public function set desktopVisible(value:Boolean):void
+ {
+ if (_desktopVisible != value)
+ {
+ _desktopVisible = value;
+
+ COMPILE::JS
+ {
+ if(hostComponent)
+ {
+ if(_desktopVisible)
+ {
+ if (hostClassList.contains("hidden-desktop"))
+ hostClassList.remove("hidden-desktop");
+ hostClassList.add("visible-desktop");
+ } else
+ {
+ if (hostClassList.contains("visible-desktop"))
+ hostClassList.remove("visible-desktop");
+ hostClassList.add("hidden-desktop");
+ }
+ }
+ }
+ }
+ }
+
+ private var _wideScreenVisible:Boolean;
+ /**
+ * Makes the cell to be visible or hidden in phone size
+ * Uses "visible-widescreen" and "hidden-widescreen" effect selectors.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get wideScreenVisible():Boolean
+ {
+ return _wideScreenVisible;
+ }
+
+ public function set wideScreenVisible(value:Boolean):void
+ {
+ if (_wideScreenVisible != value)
+ {
+ _wideScreenVisible = value;
+
+ COMPILE::JS
+ {
+ if(hostComponent)
+ {
+ if(_wideScreenVisible)
+ {
+ if (hostClassList.contains("hidden-widescreen"))
+ hostClassList.remove("hidden-widescreen");
+ hostClassList.add("visible-widescreen");
+ } else
+ {
+ if (hostClassList.contains("visible-widescreen"))
+ hostClassList.remove("visible-widescreen");
+ hostClassList.add("hidden-widescreen");
+ }
+ }
+ }
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBeadLayout#layout
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ override public function layout():Boolean
+ {
+ COMPILE::SWF
+ {
+ var contentView:ILayoutView = layoutView;
+
+ var hostWidthSizedToContent:Boolean = host.isWidthSizedToContent();
+ var hostHeightSizedToContent:Boolean = host.isHeightSizedToContent();
+
+ var w:Number = hostWidthSizedToContent ? 0 : contentView.width;
+ var h:Number = hostHeightSizedToContent ? 0 : contentView.height;
+
+ var n:int = contentView.numElements;
+
+ 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, contentView.width, contentView.height);
+ var ww:Number = w;
+ var hh:Number = h;
+
+ var ilc:ILayoutChild = child as ILayoutChild;
+
+ // set the top edge of the child
+ if (!isNaN(positions.left))
+ {
+ if (ilc)
+ ilc.setX(positions.left+margins.left);
+ else
+ child.x = positions.left+margins.left;
+ ww -= positions.left + margins.left;
+ }
+
+ // set the left edge of the child
+ if (!isNaN(positions.top))
+ {
+ if (ilc)
+ ilc.setY(positions.top+margins.top);
+ else
+ child.y = positions.top+margins.top;
+ hh -= positions.top + margins.top;
+ }
+
+ // set the right edge of the child
+ if (!isNaN(positions.right))
+ {
+ if (!hostWidthSizedToContent)
+ {
+ if (!isNaN(positions.left))
+ {
+ if (ilc)
+ ilc.setWidth(ww - positions.right - margins.right, false);
+ else
+ child.width = ww - positions.right - margins.right;
+ }
+ else
+ {
+ if (ilc)
+ {
+ ilc.setX( w - positions.right - margins.left - child.width - margins.right);
+ }
+ else
+ {
+ child.x = w - positions.right - margins.left - child.width - margins.right;
+ }
+ }
+ }
+ }
+ else if (ilc != null && !isNaN(ilc.percentWidth) && !hostWidthSizedToContent)
+ {
+ ilc.setWidth((ww - margins.right - margins.left) * ilc.percentWidth/100, false);
+ }
+
+ // set the bottm edge of the child
+ if (!isNaN(positions.bottom))
+ {
+ if (!hostHeightSizedToContent)
+ {
+ if (!isNaN(positions.top))
+ {
+ if (ilc)
+ ilc.setHeight(hh - positions.bottom - margins.bottom, false);
+ else
+ child.height = hh - positions.bottom - margins.bottom;
+ }
+ else
+ {
+ if (ilc)
+ ilc.setY( h - positions.bottom - child.height - margins.bottom);
+ else
+ child.y = h - positions.bottom - child.height - margins.bottom;
+ }
+ }
+ }
+ else if (ilc != null && !isNaN(ilc.percentHeight) && !hostHeightSizedToContent)
+ {
+ ilc.setHeight((hh - margins.top - margins.bottom) * ilc.percentHeight/100, false);
+ }
+
+ if (margins.auto)
+ {
+ if (ilc)
+ ilc.setX( (w - child.width) / 2);
+ else
+ child.x = (w - child.width) / 2;
+ }
+ }
+
+ return true;
+
+ }
+
+ COMPILE::JS
+ {
+ /**
+ * This Layout uses the following CSS rules
+ * no code needed in JS for layout
+ *
+ * .layout {
+ * display: flex;
+ * }
+ *
+ * .layout.absolute {
+ * position: relative;
+ * }
+ *
+ * .layout.absolute > * {
+ * position: absolute
+ * }
+ */
+
+ return true;
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridLayout.as
new file mode 100644
index 0000000..c2a1828
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridLayout.as
@@ -0,0 +1,215 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.jewel.beads.layouts.StyledLayoutBase;
+ import org.apache.royale.core.IBeadLayout;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IParentIUIBase;
+
+ COMPILE::JS {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.core.UIBase;
+ }
+
+ /**
+ * The GridLayout class sets its childrens in a grid with cells filling all
+ * the available space. The cells can be separated by gap.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class GridLayout extends StyledLayoutBase implements IBeadLayout
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function GridLayout()
+ {
+ super();
+ }
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout grid";
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IParentIUIBase
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ COMPILE::JS
+ {
+ if (hostClassList.contains("layout"))
+ hostClassList.remove("layout");
+ hostClassList.add("layout");
+ if(hostClassList.contains("grid"))
+ hostClassList.remove("grid");
+ hostClassList.add("grid");
+
+ setGap(_gap);
+ }
+ }
+
+ private var _gap:Boolean;
+ /**
+ * Assigns variable gap to grid from 1 to 20
+ * Activate "gap-Xdp" effect selector to set a numeric gap
+ * between grid cells
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get gap():Boolean
+ {
+ return _gap;
+ }
+
+ /**
+ * @private
+ */
+ public function set gap(value:Boolean):void
+ {
+ if (_gap != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setGap(value);
+
+ _gap = value;
+ }
+ }
+ }
+
+ COMPILE::JS
+ private function setGap(value:Boolean):void
+ {
+ hostClassList.toggle("gap", value);
+ }
+
+ // protected var _gap:Number = 0;
+ // /**
+ // * Assigns variable gap to grid from 1 to 20
+ // * Activate "gap-Xdp" effect selector to set a numeric gap
+ // * between grid cells
+ // *
+ // * @langversion 3.0
+ // * @playerversion Flash 10.2
+ // * @playerversion AIR 2.6
+ // * @productversion Royale 0.9.4
+ // */
+ // public function get gap():Number
+ // {
+ // return _gap;
+ // }
+
+ // /**
+ // *
+ // */
+ // public function set gap(value:Number):void
+ // {
+ // if (_gap != value)
+ // {
+ // COMPILE::JS
+ // {
+ // if(hostComponent)
+ // setGap(value);
+
+ // _gap = value;
+ // }
+ // }
+ // }
+
+ // COMPILE::JS
+ // private function setGap(value:Number):void
+ // {
+ // if (value >= 0 && value <= 20)
+ // {
+ // if (hostClassList.contains("gap-" + _gap + "dp"))
+ // hostClassList.remove("gap-" + _gap + "dp");
+ // if(value != 0)
+ // hostClassList.add("gap-" + value + "dp");
+ // } else
+ // throw new Error("Grid gap needs to be between 0 and 20");
+ // }
+
+ /**
+ * @copy org.apache.royale.core.IBeadLayout#layout
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ override public function layout():Boolean
+ {
+ COMPILE::SWF
+ {
+ // SWF TODO
+ return true;
+ }
+
+ COMPILE::JS
+ {
+ /**
+ * This Layout uses the following CSS rules
+ * no code needed in JS for layout
+ *
+ * .layout {
+ * display: flex;
+ * }
+ *
+ * .layout.grid {
+ * flex-wrap: wrap;
+ * }
+ *
+ * .layout.grid > * {
+ * flex: 1;
+ * }
+ *
+ * .layout.grid.gap-1dp {
+ * margin: -1em 0 1em -1em;
+ * }
+ *
+ * .layout.grid.gap-1dp > * {
+ * padding: 1em 0 0 1em;
+ * }
+ */
+
+ return true;
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalCenteredLayout.as
similarity index 61%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalCenteredLayout.as
index 8dfdf7a..11497d6 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalCenteredLayout.as
@@ -28,22 +28,28 @@
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.utils.css.addDynamicSelector;
+ import org.apache.royale.utils.StringUtil;
+ import org.apache.royale.core.layout.ILayoutStyleProperties;
+
COMPILE::JS {
- import org.apache.royale.utils.cssclasslist.addStyles;
import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.core.UIBase;
}
/**
- * The HorizontalLayoutWithPaddingAndGap class is a simple layout
+ * The HorizontalCenteredLayout class is a simple layout
* bead similar to HorizontalLayout, but it adds support for
* padding and gap values.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
- public class HorizontalLayoutWithPaddingAndGap extends LayoutBase implements IBeadLayout
+ public class HorizontalCenteredLayout extends SimpleHorizontalLayout implements ILayoutStyleProperties
{
/**
* Constructor.
@@ -51,14 +57,44 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
- public function HorizontalLayoutWithPaddingAndGap()
+ public function HorizontalCenteredLayout()
{
super();
}
/**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout horizontal centered";
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IParentIUIBase
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ COMPILE::JS
+ {
+ if(hostClassList.contains("centered"))
+ hostClassList.remove("centered");
+ hostClassList.add("centered");
+
+ applyStyleToLayout(hostComponent, "gap");
+ setGap(_gap);
+ }
+ }
+
+ /**
* @private
*/
private var _paddingTop:Number = 0;
@@ -69,7 +105,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get paddingTop():Number
{
@@ -95,7 +131,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get paddingRight():Number
{
@@ -121,7 +157,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get paddingBottom():Number
{
@@ -147,7 +183,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get paddingLeft():Number
{
@@ -162,32 +198,132 @@
_paddingLeft = value;
}
+ private var gapInitialized:Boolean;
+ // private var _gap:Boolean;
/**
- * @private
- */
- private var _gap:Number = 0;
-
- /**
- * The gap between items.
+ * Assigns variable gap to grid from 1 to 20
+ * Activate "gap-Xdp" effect selector to set a numeric gap
+ * between grid cells
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
+ */
+ // public function get gap():Boolean
+ // {
+ // return _gap;
+ // }
+
+ // /**
+ // * @private
+ // */
+ // public function set gap(value:Boolean):void
+ // {
+ // if (_gap != value)
+ // {
+ // COMPILE::JS
+ // {
+ // if(hostComponent)
+ // setGap(value);
+
+ // _gap = value;
+ // gapInitialized = true;
+ // }
+ // }
+ // }
+
+ // COMPILE::JS
+ // private function setGap(value:Boolean):void
+ // {
+ // if (value)
+ // hostClassList.add("gap");
+ // else
+ // hostClassList.remove("gap");
+ // }
+
+ /**
+ * Get the component layout style and apply to if exists
+ *
+ * @param component the IUIBase component that host this layout
+ * @param cssProperty the style property in css set for the component to retrieve
+ *
+ * @see org.apache.royale.core.layout.ILayoutStyleProperties#applyStyleToLayout(component:IUIBase, cssProperty:String):void
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function applyStyleToLayout(component:IUIBase, cssProperty:String):void
+ {
+ var cssValue:* = ValuesManager.valuesImpl.getValue(component, cssProperty);
+ if (cssValue !== undefined)
+ {
+ switch(cssProperty)
+ {
+ case "gap":
+ if(!gapInitialized)
+ gap = Number(cssValue);
+ break;
+ default:
+ break;
+ }
+ }
+ }
+
+ // number of gap styles available in CSS @see $gaps variable in _layout.sass
+ public static const GAPS:Number = 10;
+ // gap step size in each gap style rule in CSS @see $gap-step variable in _layout.sass
+ public static const GAP_STEP:Number = 3;
+
+ protected var _gap:Number = 0;
+ /**
+ * Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
+ * Activate "gap-{X}x{GAP_STEP}px" effect selector to set a numeric gap between elements.
+ * i.e: gap-2x3px will result in a gap of 6px
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
*/
public function get gap():Number
- {
- return _gap;
- }
+ {
+ return _gap;
+ }
/**
* @private
*/
public function set gap(value:Number):void
{
- _gap = value;
+ if (_gap != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setGap(value);
+
+ _gap = value;
+ gapInitialized = true;
+ }
+ }
}
+ COMPILE::JS
+ private function setGap(value:Number):void
+ {
+ if (value >= 0 && value <= GAPS*GAP_STEP)
+ {
+ if (hostClassList.contains("gap-" + _gap + "x" + GAP_STEP + "px"))
+ hostClassList.remove("gap-" + _gap + "x" + GAP_STEP + "px");
+ if(value != 0)
+ hostClassList.add("gap-" + value + "x" + GAP_STEP + "px");
+ } else
+ throw new Error("Gap needs to be between 0 and " + GAPS*GAP_STEP);
+ }
+
/**
* @copy org.apache.royale.core.IBeadLayout#layout
* @royaleignorecoercion org.apache.royale.core.ILayoutHost
@@ -249,7 +385,7 @@
// the following code middle-aligns the child, but since HTML does not
// do this normally, this code is commented. (Use HorizontalFlexLayout for
// vertically centered elements in a horizontal row).
-// childYpos = hostHeight/2 - (childHeight + mt + mb)/2;
+ // childYpos = hostHeight/2 - (childHeight + mt + mb)/2;
}
if (ilc) {
@@ -274,10 +410,9 @@
}
COMPILE::JS
{
- var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- addStyles (contentView, "layout horizontal");
+ //applyStyleToLayout(c, "gap");
- var children:Array = contentView.internalChildren();
+ /*var children:Array = contentView.internalChildren();
var i:int;
var n:int = children.length;
for (i = 0; i < n; i++)
@@ -302,7 +437,7 @@
{
child.style.marginLeft = _gap + 'px';
}
- }
+ }*/
return true;
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalFlowLayout.as
similarity index 62%
rename from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
rename to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalFlowLayout.as
index 8dfdf7a..f43c9cb 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalFlowLayout.as
@@ -28,22 +28,28 @@
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.utils.css.addDynamicSelector;
+ import org.apache.royale.utils.StringUtil;
+ import org.apache.royale.core.layout.ILayoutStyleProperties;
+
COMPILE::JS {
- import org.apache.royale.utils.cssclasslist.addStyles;
import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.core.UIBase;
}
/**
- * The HorizontalLayoutWithPaddingAndGap class is a simple layout
+ * The HorizontalFlowLayout class is a simple layout
* bead similar to HorizontalLayout, but it adds support for
* padding and gap values.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
- public class HorizontalLayoutWithPaddingAndGap extends LayoutBase implements IBeadLayout
+ public class HorizontalFlowLayout extends SimpleHorizontalLayout implements ILayoutStyleProperties
{
/**
* Constructor.
@@ -51,14 +57,44 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
- public function HorizontalLayoutWithPaddingAndGap()
+ public function HorizontalFlowLayout()
{
super();
}
/**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout horizontal flow";
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IParentIUIBase
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ COMPILE::JS
+ {
+ if(hostClassList.contains("flow"))
+ hostClassList.remove("flow");
+ hostClassList.add("flow");
+
+ applyStyleToLayout(hostComponent, "gap");
+ setGap(_gap);
+ }
+ }
+
+ /**
* @private
*/
private var _paddingTop:Number = 0;
@@ -69,7 +105,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get paddingTop():Number
{
@@ -95,7 +131,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get paddingRight():Number
{
@@ -121,7 +157,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get paddingBottom():Number
{
@@ -147,7 +183,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get paddingLeft():Number
{
@@ -162,32 +198,132 @@
_paddingLeft = value;
}
+ private var gapInitialized:Boolean;
+ // private var _gap:Boolean;
/**
- * @private
- */
- private var _gap:Number = 0;
-
- /**
- * The gap between items.
+ * Assigns variable gap to grid from 1 to 20
+ * Activate "gap-Xdp" effect selector to set a numeric gap
+ * between grid cells
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
+ */
+ // public function get gap():Boolean
+ // {
+ // return _gap;
+ // }
+
+ // /**
+ // * @private
+ // */
+ // public function set gap(value:Boolean):void
+ // {
+ // if (_gap != value)
+ // {
+ // COMPILE::JS
+ // {
+ // if(hostComponent)
+ // setGap(value);
+
+ // _gap = value;
+ // gapInitialized = true;
+ // }
+ // }
+ // }
+
+ // COMPILE::JS
+ // private function setGap(value:Boolean):void
+ // {
+ // if (value)
+ // hostClassList.add("gap");
+ // else
+ // hostClassList.remove("gap");
+ // }
+
+ /**
+ * Get the component layout style and apply to if exists
+ *
+ * @param component the IUIBase component that host this layout
+ * @param cssProperty the style property in css set for the component to retrieve
+ *
+ * @see org.apache.royale.core.layout.ILayoutStyleProperties#applyStyleToLayout(component:IUIBase, cssProperty:String):void
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function applyStyleToLayout(component:IUIBase, cssProperty:String):void
+ {
+ var cssValue:* = ValuesManager.valuesImpl.getValue(component, cssProperty);
+ if (cssValue !== undefined)
+ {
+ switch(cssProperty)
+ {
+ case "gap":
+ if(!gapInitialized)
+ gap = Number(cssValue);
+ break;
+ default:
+ break;
+ }
+ }
+ }
+
+ // number of gap styles available in CSS @see $gaps variable in _layout.sass
+ public static const GAPS:Number = 10;
+ // gap step size in each gap style rule in CSS @see $gap-step variable in _layout.sass
+ public static const GAP_STEP:Number = 3;
+
+ protected var _gap:Number = 0;
+ /**
+ * Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
+ * Activate "gap-{X}x{GAP_STEP}px" effect selector to set a numeric gap between elements.
+ * i.e: gap-2x3px will result in a gap of 6px
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
*/
public function get gap():Number
- {
- return _gap;
- }
+ {
+ return _gap;
+ }
/**
* @private
*/
public function set gap(value:Number):void
{
- _gap = value;
+ if (_gap != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setGap(value);
+
+ _gap = value;
+ gapInitialized = true;
+ }
+ }
}
+ COMPILE::JS
+ private function setGap(value:Number):void
+ {
+ if (value >= 0 && value <= GAPS*GAP_STEP)
+ {
+ if (hostClassList.contains("gap-" + _gap + "x" + GAP_STEP + "px"))
+ hostClassList.remove("gap-" + _gap + "x" + GAP_STEP + "px");
+ if(value != 0)
+ hostClassList.add("gap-" + value + "x" + GAP_STEP + "px");
+ } else
+ throw new Error("Gap needs to be between 0 and " + GAPS*GAP_STEP);
+ }
+
/**
* @copy org.apache.royale.core.IBeadLayout#layout
* @royaleignorecoercion org.apache.royale.core.ILayoutHost
@@ -249,7 +385,7 @@
// the following code middle-aligns the child, but since HTML does not
// do this normally, this code is commented. (Use HorizontalFlexLayout for
// vertically centered elements in a horizontal row).
-// childYpos = hostHeight/2 - (childHeight + mt + mb)/2;
+ // childYpos = hostHeight/2 - (childHeight + mt + mb)/2;
}
if (ilc) {
@@ -274,10 +410,9 @@
}
COMPILE::JS
{
- var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- addStyles (contentView, "layout horizontal");
+ //applyStyleToLayout(c, "gap");
- var children:Array = contentView.internalChildren();
+ /*var children:Array = contentView.internalChildren();
var i:int;
var n:int = children.length;
for (i = 0; i < n; i++)
@@ -302,7 +437,7 @@
{
child.style.marginLeft = _gap + 'px';
}
- }
+ }*/
return true;
}
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
index f93bf6a..d8cc47b 100644
--- 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
@@ -18,32 +18,38 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.layouts
{
+ import org.apache.royale.core.LayoutBase;
import org.apache.royale.core.IBeadLayout;
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.IParentIUIBase;
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.core.ValuesManager;
- import org.apache.royale.core.LayoutBase;
+ import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.utils.css.addDynamicSelector;
+ import org.apache.royale.utils.StringUtil;
+ import org.apache.royale.core.layout.ILayoutStyleProperties;
COMPILE::JS {
- import org.apache.royale.utils.cssclasslist.addStyles;
- }
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.core.UIBase;
+ }
/**
- * 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.
+ * The HorizontalLayout class is a simple layout
+ * bead similar to HorizontalLayout, but it adds support for
+ * padding and gap values.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
- public class HorizontalLayout extends LayoutBase implements IBeadLayout
+ public class HorizontalLayout extends SimpleHorizontalLayout implements ILayoutStyleProperties
{
/**
* Constructor.
@@ -51,16 +57,274 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function HorizontalLayout()
{
super();
}
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout horizontal";
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IParentIUIBase
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ COMPILE::JS
+ {
+ applyStyleToLayout(hostComponent, "gap");
+ setGap(_gap);
+ }
+ }
+
+ /**
+ * @private
+ */
+ private var _paddingTop:Number = 0;
+
+ /**
+ * The top padding value.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ 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.9.4
+ */
+ 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.9.4
+ */
+ 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.9.4
+ */
+ public function get paddingLeft():Number
+ {
+ return _paddingLeft;
+ }
+
+ /**
+ * @private
+ */
+ public function set paddingLeft(value:Number):void
+ {
+ _paddingLeft = value;
+ }
+
+ private var gapInitialized:Boolean;
+ // private var _gap:Boolean;
+ /**
+ * Assigns variable gap to grid from 1 to 20
+ * Activate "gap-Xdp" effect selector to set a numeric gap
+ * between grid cells
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ // public function get gap():Boolean
+ // {
+ // return _gap;
+ // }
+
+ // /**
+ // * @private
+ // */
+ // public function set gap(value:Boolean):void
+ // {
+ // if (_gap != value)
+ // {
+ // COMPILE::JS
+ // {
+ // if(hostComponent)
+ // setGap(value);
+
+ // _gap = value;
+ // gapInitialized = true;
+ // }
+ // }
+ // }
+
+ // COMPILE::JS
+ // private function setGap(value:Boolean):void
+ // {
+ // if (value)
+ // hostClassList.add("gap");
+ // else
+ // hostClassList.remove("gap");
+ // }
+
+ /**
+ * Get the component layout style and apply to if exists
+ *
+ * @param component the IUIBase component that host this layout
+ * @param cssProperty the style property in css set for the component to retrieve
+ *
+ * @see org.apache.royale.core.layout.ILayoutStyleProperties#applyStyleToLayout(component:IUIBase, cssProperty:String):void
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function applyStyleToLayout(component:IUIBase, cssProperty:String):void
+ {
+ var cssValue:* = ValuesManager.valuesImpl.getValue(component, cssProperty);
+ if (cssValue !== undefined)
+ {
+ switch(cssProperty)
+ {
+ case "gap":
+ if(!gapInitialized)
+ gap = Number(cssValue);
+ break;
+ default:
+ break;
+ }
+ }
+ }
+
+ // number of gap styles available in CSS @see $gaps variable in _layout.sass
+ public static const GAPS:Number = 10;
+ // gap step size in each gap style rule in CSS @see $gap-step variable in _layout.sass
+ public static const GAP_STEP:Number = 3;
+
+ protected var _gap:Number = 0;
+ /**
+ * Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
+ * Activate "gap-{X}x{GAP_STEP}px" effect selector to set a numeric gap between elements.
+ * i.e: gap-2x3px will result in a gap of 6px
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get gap():Number
+ {
+ return _gap;
+ }
+
+ /**
+ * @private
+ */
+ public function set gap(value:Number):void
+ {
+ if (_gap != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setGap(value);
+
+ _gap = value;
+ gapInitialized = true;
+ }
+ }
+ }
+
+ COMPILE::JS
+ private function setGap(value:Number):void
+ {
+ if (value >= 0 && value <= GAPS*GAP_STEP)
+ {
+ if (hostClassList.contains("gap-" + _gap + "x" + GAP_STEP + "px"))
+ hostClassList.remove("gap-" + _gap + "x" + GAP_STEP + "px");
+ if(value != 0)
+ hostClassList.add("gap-" + value + "x" + GAP_STEP + "px");
+ } else
+ throw new Error("Gap needs to be between 0 and " + GAPS*GAP_STEP);
+ }
+
/**
* @copy org.apache.royale.core.IBeadLayout#layout
* @royaleignorecoercion org.apache.royale.core.ILayoutHost
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion org.apache.royale.core.IBorderPaddingMarginValuesImpl
*/
override public function layout():Boolean
{
@@ -75,14 +339,18 @@
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 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 = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getPaddingMetrics(host);
+ 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
@@ -99,30 +367,28 @@
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; // default y position
- var childYpos:Number = ypos + margins.top; // default y position
+ if (!hostHeightSizedToContent) {
+ var childHeight:Number = child.height;
+ if (ilc != null && !isNaN(ilc.percentHeight)) {
+ childHeight = hostHeight * ilc.percentHeight/100.0;
+ ilc.setHeight(childHeight);
+ }
+ // the following code middle-aligns the child, but since HTML does not
+ // do this normally, this code is commented. (Use HorizontalFlexLayout for
+ // vertically centered elements in a horizontal row).
+ // childYpos = hostHeight/2 - (childHeight + mt + mb)/2;
+ }
- 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)) {
+ if (!hostWidthSizedToContent && !isNaN(ilc.percentWidth)) {
var newWidth:Number = hostWidth * ilc.percentWidth / 100;
ilc.setWidth(newWidth);
}
@@ -132,7 +398,7 @@
child.y = childYpos;
}
- xpos += child.width + margins.right;
+ xpos += child.width + _gap;
}
return true;
@@ -140,21 +406,34 @@
}
COMPILE::JS
{
- var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- addStyles(contentView, "layout horizontal");
+ //applyStyleToLayout(c, "gap");
- /**
- * This Layout uses the following CSS rules
- *
- * .layout.horizontal {
- * white-space: nowrap;
- * display: block;
- * }
- *
- * .layout.horizontal > * {
- * display: inline-block;
- * }
- */
+ /*var children:Array = contentView.internalChildren();
+ var i:int;
+ var n:int = children.length;
+ for (i = 0; i < n; i++)
+ {
+ var child:WrappedHTMLElement = children[i] as WrappedHTMLElement;
+ if (child == null) continue;
+ child.style.marginTop = _paddingTop + 'px';
+ if(i === (n - 1))
+ {
+ child.style.marginRight = _paddingRight + 'px';
+ }
+ else
+ {
+ child.style.marginRight = '0px';
+ }
+ child.style.marginBottom = _paddingBottom + 'px';
+ if(i == 0)
+ {
+ child.style.marginLeft = _paddingLeft + 'px';
+ }
+ else
+ {
+ child.style.marginLeft = _gap + 'px';
+ }
+ }*/
return true;
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/NullLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/NullLayout.as
new file mode 100644
index 0000000..8618f27
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/NullLayout.as
@@ -0,0 +1,57 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.ILayoutChild;
+ import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.IStrand;
+
+ COMPILE::JS {
+ import org.apache.royale.core.UIBase;
+ }
+
+ /**
+ * The NullLayout class is a layout class used to override other layout classes
+ * This class should be temporal and make Royale be able to pass ClassReference (null)
+ * in CSS to not use the layout defined in parent class
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class NullLayout extends LayoutBase implements IBeadLayout
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function NullLayout()
+ {
+ super();
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/ResponsiveVisibility.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/ResponsiveVisibility.as
new file mode 100644
index 0000000..ea50c85
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/ResponsiveVisibility.as
@@ -0,0 +1,250 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.StyledUIBase;
+
+ /**
+ * The ResponsiveVisibility bead class is a specialty bead that
+ * can be used to show or hide a Jewel control depending on responsive
+ * rules.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class ResponsiveVisibility implements IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ResponsiveVisibility()
+ {
+ }
+
+ private var _phoneVisible:Boolean;
+ /**
+ * Makes the component to be visible or hidden in phone size
+ * Uses "visible-phone" and "hidden-phone" effect selectors.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get phoneVisible():Boolean
+ {
+ return _phoneVisible;
+ }
+
+ public function set phoneVisible(value:Boolean):void
+ {
+ if (_phoneVisible != value)
+ {
+ COMPILE::JS
+ {
+ _phoneVisible = value;
+
+ if(_strand)
+ showOrHideHost();
+ }
+ }
+ }
+
+ private var _tabletVisible:Boolean;
+ /**
+ * Makes the component to be visible or hidden in phone size
+ * Uses "visible-tablet" and "hidden-tablet" effect selectors.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get tabletVisible():Boolean
+ {
+ return _tabletVisible;
+ }
+
+ public function set tabletVisible(value:Boolean):void
+ {
+ if (_tabletVisible != value)
+ {
+ COMPILE::JS
+ {
+ _tabletVisible = value;
+
+ if(_strand)
+ showOrHideHost();
+ }
+ }
+ }
+
+ private var _desktopVisible:Boolean;
+ /**
+ * Makes the component to be visible or hidden in phone size
+ * Uses "visible-desktop" and "hidden-desktop" effect selectors.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get desktopVisible():Boolean
+ {
+ return _desktopVisible;
+ }
+
+ public function set desktopVisible(value:Boolean):void
+ {
+ if (_desktopVisible != value)
+ {
+ COMPILE::JS
+ {
+ _desktopVisible = value;
+
+ if(_strand)
+ showOrHideHost();
+ }
+ }
+ }
+
+ private var _wideScreenVisible:Boolean;
+ /**
+ * Makes the component to be visible or hidden in phone size
+ * Uses "visible-widescreen" and "hidden-widescreen" effect selectors.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get wideScreenVisible():Boolean
+ {
+ return _wideScreenVisible;
+ }
+
+ public function set wideScreenVisible(value:Boolean):void
+ {
+ if (_wideScreenVisible != value)
+ {
+ COMPILE::JS
+ {
+ _wideScreenVisible = value;
+
+ if(_strand)
+ showOrHideHost();
+ }
+ }
+ }
+
+ 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.4
+ * @royaleignorecoercion HTMLInputElement
+ * @royaleignorecoercion org.apache.royale.core.UIBase;
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ showOrHideHost();
+ }
+
+ private function showOrHideHost():void
+ {
+ var host:StyledUIBase = _strand as StyledUIBase;
+ if (host)
+ {
+ if(_phoneVisible != null)
+ {
+ if(_phoneVisible)
+ {
+ if (host.containsClass("hidden-phone"))
+ host.removeClass("hidden-phone");
+ host.addClass("visible-phone");
+ } else
+ {
+ if (host.containsClass("visible-phone"))
+ host.removeClass("visible-phone");
+ host.addClass("hidden-phone");
+ }
+ }
+
+ if(_tabletVisible != null)
+ {
+ if(_tabletVisible)
+ {
+ if (host.containsClass("hidden-tablet"))
+ host.removeClass("hidden-tablet");
+ host.addClass("visible-tablet");
+ } else
+ {
+ if (host.containsClass("visible-tablet"))
+ host.removeClass("visible-tablet");
+ host.addClass("hidden-tablet");
+ }
+ }
+
+ if(_desktopVisible != null)
+ {
+ if(_desktopVisible)
+ {
+ if (host.containsClass("hidden-desktop"))
+ host.removeClass("hidden-desktop");
+ host.addClass("visible-desktop");
+ } else
+ {
+ if (host.containsClass("visible-desktop"))
+ host.removeClass("visible-desktop");
+ host.addClass("hidden-desktop");
+ }
+ }
+
+ if(_wideScreenVisible != null)
+ {
+ if(_wideScreenVisible)
+ {
+ if (host.containsClass("hidden-widescreen"))
+ host.removeClass("hidden-widescreen");
+ host.addClass("visible-widescreen");
+ } else
+ {
+ if (host.containsClass("visible-widescreen"))
+ host.removeClass("visible-widescreen");
+ host.addClass("hidden-widescreen");
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutSpaceBetween.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleHorizontalLayout.as
similarity index 74%
rename from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutSpaceBetween.as
rename to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleHorizontalLayout.as
index d6632f4..e69fe2f 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutSpaceBetween.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleHorizontalLayout.as
@@ -18,18 +18,19 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.layouts
{
+ import org.apache.royale.jewel.beads.layouts.StyledLayoutBase;
import org.apache.royale.core.IBeadLayout;
import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
import org.apache.royale.core.ILayoutChild;
import org.apache.royale.core.ILayoutView;
- import org.apache.royale.core.IParentIUIBase;
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.core.ValuesManager;
- import org.apache.royale.core.LayoutBase;
+ import org.apache.royale.core.IStrand;
- COMPILE::JS {
- import org.apache.royale.utils.cssclasslist.addStyles;
+ COMPILE::JS
+ {
+ import org.apache.royale.core.UIBase;
}
/**
@@ -41,9 +42,9 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
- public class HorizontalLayoutSpaceBetween extends LayoutBase implements IBeadLayout
+ public class SimpleHorizontalLayout extends StyledLayoutBase implements IBeadLayout
{
/**
* Constructor.
@@ -51,17 +52,53 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
- public function HorizontalLayoutSpaceBetween()
+ public function SimpleHorizontalLayout()
{
super();
}
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout horizontal";
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IParentIUIBase
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ COMPILE::JS
+ {
+ if (hostClassList.contains("layout"))
+ hostClassList.remove("layout");
+ hostClassList.add("layout");
+ if(hostClassList.contains("horizontal"))
+ hostClassList.remove("horizontal");
+ hostClassList.add("horizontal");
+ }
+ }
+
/**
- * @copy org.apache.royale.core.IBeadLayout#layout
- * @royaleignorecoercion org.apache.royale.core.ILayoutHost
- */
+ * Layout children vertically
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.ILayoutHost
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
override public function layout():Boolean
{
COMPILE::SWF
@@ -140,15 +177,17 @@
}
COMPILE::JS
{
- var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- addStyles (contentView, "layout horizontal space");
-
/**
* This Layout uses the following CSS rules
+ * no code needed in JS for layout
*
- * .layout.horizontal.space {
+ * .layout {
* display: flex;
- * justify-content: space-between;
+ * }
+ *
+ * .layout.horizontal {
+ * flex-flow: row nowrap;
+ * align-items: flex-start
* }
*/
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleVerticalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleVerticalLayout.as
new file mode 100644
index 0000000..a4c0084
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleVerticalLayout.as
@@ -0,0 +1,209 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.jewel.beads.layouts.StyledLayoutBase;
+ import org.apache.royale.core.IBeadLayout;
+ import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+ import org.apache.royale.core.ILayoutChild;
+ import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.layout.EdgeData;
+ import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.core.IStrand;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.UIBase;
+ }
+
+ /**
+ * 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.4
+ */
+ public class SimpleVerticalLayout extends StyledLayoutBase implements IBeadLayout
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function SimpleVerticalLayout()
+ {
+ super();
+ }
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout vertical";
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IParentIUIBase
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ COMPILE::JS
+ {
+ if (hostClassList.contains("layout"))
+ hostClassList.remove("layout");
+ hostClassList.add("layout");
+ if(hostClassList.contains("vertical"))
+ hostClassList.remove("vertical");
+ hostClassList.add("vertical");
+ }
+ }
+
+ /**
+ * Layout children vertically
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @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 = contentView.internalChildren();
+ // var i:int;
+ // var n:int = children.length;
+ // for (i = 0; i < n; i++)
+ // {
+ // var child:WrappedHTMLElement = children[i] as WrappedHTMLElement;
+ // if (child == null) continue;
+
+ // child.royale_wrapper.dispatchEvent('sizeChanged');
+ // }
+
+ /**
+ * This Layout uses the following CSS rules
+ * no code needed in JS for layout
+ *
+ * .layout {
+ * display: flex:
+ * }
+ * .layout.vertical {
+ * flex-flow: column nowrap;
+ * align-items: flex-start;
+ * }
+ */
+
+ return true;
+ }
+ }
+
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/StyledLayoutBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/StyledLayoutBase.as
new file mode 100644
index 0000000..44a622e
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/StyledLayoutBase.as
@@ -0,0 +1,242 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.IStrand;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.ValuesManager;
+
+
+ /**
+ * The StyledLayoutBase class is an extension of LayoutBase
+ * to define various common layout features for the rest of
+ * child classes
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class StyledLayoutBase extends LayoutBase implements IBeadLayout
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function StyledLayoutBase()
+ {
+ super();
+ }
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "";
+
+ protected var hostComponent:UIBase;
+
+ COMPILE::JS
+ protected var hostClassList:DOMTokenList;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IParentIUIBase
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ COMPILE::JS
+ {
+ hostComponent = host as UIBase;
+ hostClassList = hostComponent.positioner.classList;
+
+ initStyleToLayout(hostComponent, "itemsExpand");
+ setHostClassList("itemsExpand", _itemsExpand ? "itemsExpand":"");
+
+ initStyleToLayout(hostComponent, "itemsHorizontalAlign");
+ setHostClassList(_itemsHorizontalAlign, _itemsHorizontalAlign);
+
+ initStyleToLayout(hostComponent, "itemsVerticalAlign");
+ setHostClassList(_itemsVerticalAlign, _itemsVerticalAlign);
+ }
+ }
+
+ /**
+ * Get the component layout style and init to if exists
+ *
+ * @param component the IUIBase component that host this layout
+ * @param cssProperty the style property in css set for the component to retrieve
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected function initStyleToLayout(component:IUIBase, cssProperty:String):void
+ {
+ ///-----------------------------------------
+ /// This function works as the same as
+ /// org.apache.royale.core.layout.ILayoutStyleProperties#applyStyleToLayout(component:IUIBase, cssProperty:String):void
+ /// Because StyledLayoutBase does not implement ILayoutStyleProperties
+ /// To avoid conflict with subclass like HorizontalLayout.applyStyleToLayout
+ /// Names this function - initStyleToLayout
+ ///-----------------------------------------
+ var cssValue:* = ValuesManager.valuesImpl.getValue(component, cssProperty);
+ if (cssValue !== undefined)
+ {
+ switch(cssProperty)
+ {
+ case "itemsExpand":
+ if(!itemsExpandInitialized)
+ itemsExpand = "true" == cssValue;
+ break;
+ case "itemsHorizontalAlign":
+ if (!itemsHorizontalAlign)
+ itemsHorizontalAlign = String(cssValue);
+ break;
+ case "itemsVerticalAlign":
+ if (!itemsVerticalAlign)
+ itemsVerticalAlign = String(cssValue);
+ break;
+ default:
+ break;
+ }
+ }
+ }
+
+ private var _itemsHorizontalAlign:String;
+ /**
+ * Distribute all items horizontally
+ * Possible values are:
+ * - itemsLeft
+ * - itemsCenter
+ * - itemsRight
+ * - itemsSpaceBetween
+ * - itemsSpaceAround
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get itemsHorizontalAlign():String
+ {
+ return _itemsHorizontalAlign;
+ }
+
+ public function set itemsHorizontalAlign(value:String):void
+ {
+ if (_itemsHorizontalAlign != value)
+ {
+ COMPILE::JS
+ {
+ setHostClassList(_itemsHorizontalAlign, value);
+ _itemsHorizontalAlign = value;
+ }
+ }
+ }
+
+ private var _itemsVerticalAlign:String;
+ /**
+ * Distribute all items vertically
+ * Possible values are:
+ * - itemsSameHeight
+ * - itemsCentered
+ * - itemsTop
+ * - itemsBottom
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get itemsVerticalAlign():String
+ {
+ return _itemsVerticalAlign;
+ }
+
+ public function set itemsVerticalAlign(value:String):void
+ {
+ if (_itemsVerticalAlign != value)
+ {
+ COMPILE::JS
+ {
+ setHostClassList(_itemsVerticalAlign, value);
+ _itemsVerticalAlign = value;
+ }
+ }
+ }
+
+ private var itemsExpandInitialized:Boolean;
+ private var _itemsExpand:Boolean = false;
+ /**
+ * A boolean flag to activate "itemsExpand" effect selector.
+ * Make items resize to the fill all container space
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get itemsExpand():Boolean
+ {
+ return _itemsExpand;
+ }
+
+ public function set itemsExpand(value:Boolean):void
+ {
+ if (_itemsExpand != value)
+ {
+
+ COMPILE::JS
+ {
+ setHostClassList("itemsExpand", value ? "itemsExpand" : "");
+ _itemsExpand = value;
+ itemsExpandInitialized = true;
+ }
+ }
+ }
+
+ COMPILE::JS
+ protected function setHostClassList(oldValue:String, newValue:String):void {
+ if (!hostComponent) return;
+
+ if (oldValue && hostClassList.contains(oldValue)) {
+ if (oldValue == newValue) return;
+ hostClassList.remove(oldValue);
+ }
+
+ if (newValue) hostClassList.add(newValue);
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TableLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TableLayout.as
new file mode 100644
index 0000000..bf9a58f
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TableLayout.as
@@ -0,0 +1,235 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.ILayoutChild;
+ import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.IStrand;
+
+ COMPILE::JS {
+ import org.apache.royale.core.UIBase;
+ }
+
+ /**
+ * The TableLayout class is a simple layout
+ * bead. It takes the set of children and lays them out
+ * as a Table.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class TableLayout extends LayoutBase implements IBeadLayout
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function TableLayout()
+ {
+ super();
+ }
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout table";
+
+ COMPILE::JS
+ private var hostComponent:UIBase;
+
+ COMPILE::JS
+ protected var hostClassList:DOMTokenList;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ COMPILE::JS
+ {
+ hostComponent = host as UIBase;
+ hostClassList = hostComponent.positioner.classList;
+ if (hostClassList.contains("layout"))
+ hostClassList.remove("layout");
+ hostClassList.add("layout");
+ if(hostClassList.contains("table"))
+ hostClassList.remove("table");
+ hostClassList.add("table");
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBeadLayout#layout
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ override public function layout():Boolean
+ {
+ COMPILE::SWF
+ {
+ var contentView:ILayoutView = layoutView;
+
+ var hostWidthSizedToContent:Boolean = host.isWidthSizedToContent();
+ var hostHeightSizedToContent:Boolean = host.isHeightSizedToContent();
+
+ var w:Number = hostWidthSizedToContent ? 0 : contentView.width;
+ var h:Number = hostHeightSizedToContent ? 0 : contentView.height;
+
+ var n:int = contentView.numElements;
+
+ 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, contentView.width, contentView.height);
+ var ww:Number = w;
+ var hh:Number = h;
+
+ var ilc:ILayoutChild = child as ILayoutChild;
+
+ // set the top edge of the child
+ if (!isNaN(positions.left))
+ {
+ if (ilc)
+ ilc.setX(positions.left+margins.left);
+ else
+ child.x = positions.left+margins.left;
+ ww -= positions.left + margins.left;
+ }
+
+ // set the left edge of the child
+ if (!isNaN(positions.top))
+ {
+ if (ilc)
+ ilc.setY(positions.top+margins.top);
+ else
+ child.y = positions.top+margins.top;
+ hh -= positions.top + margins.top;
+ }
+
+ // set the right edge of the child
+ if (!isNaN(positions.right))
+ {
+ if (!hostWidthSizedToContent)
+ {
+ if (!isNaN(positions.left))
+ {
+ if (ilc)
+ ilc.setWidth(ww - positions.right - margins.right, false);
+ else
+ child.width = ww - positions.right - margins.right;
+ }
+ else
+ {
+ if (ilc)
+ {
+ ilc.setX( w - positions.right - margins.left - child.width - margins.right);
+ }
+ else
+ {
+ child.x = w - positions.right - margins.left - child.width - margins.right;
+ }
+ }
+ }
+ }
+ else if (ilc != null && !isNaN(ilc.percentWidth) && !hostWidthSizedToContent)
+ {
+ ilc.setWidth((ww - margins.right - margins.left) * ilc.percentWidth/100, false);
+ }
+
+ // set the bottm edge of the child
+ if (!isNaN(positions.bottom))
+ {
+ if (!hostHeightSizedToContent)
+ {
+ if (!isNaN(positions.top))
+ {
+ if (ilc)
+ ilc.setHeight(hh - positions.bottom - margins.bottom, false);
+ else
+ child.height = hh - positions.bottom - margins.bottom;
+ }
+ else
+ {
+ if (ilc)
+ ilc.setY( h - positions.bottom - child.height - margins.bottom);
+ else
+ child.y = h - positions.bottom - child.height - margins.bottom;
+ }
+ }
+ }
+ else if (ilc != null && !isNaN(ilc.percentHeight) && !hostHeightSizedToContent)
+ {
+ ilc.setHeight((hh - margins.top - margins.bottom) * ilc.percentHeight/100, false);
+ }
+
+ if (margins.auto)
+ {
+ if (ilc)
+ ilc.setX( (w - child.width) / 2);
+ else
+ child.x = (w - child.width) / 2;
+ }
+ }
+
+ return true;
+
+ }
+
+ COMPILE::JS
+ {
+ /**
+ * This Layout uses the following CSS rules
+ * no code needed in JS for layout
+ *
+ * .layout {
+ * display: flex;
+ * }
+ *
+ * .layout.absolute {
+ * position: relative;
+ * }
+ *
+ * .layout.absolute > * {
+ * position: absolute
+ * }
+ */
+
+ return true;
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
new file mode 100644
index 0000000..9c2585e
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
@@ -0,0 +1,471 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.IBorderPaddingMarginValuesImpl;
+ import org.apache.royale.core.IParentIUIBase;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.layout.EdgeData;
+ import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.core.layout.ILayoutStyleProperties;
+ import org.apache.royale.core.UIBase;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ /**
+ * The TileLayout class bead sizes and positions the elements it manages into rows and columns.
+ * The size of each element is determined either by setting TileLayout's columnWidth and rowHeight
+ * properties, or having the tile size determined by factoring the numColumns into the area assigned
+ * for the layout.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class TileLayout extends LayoutBase implements IBeadLayout, ILayoutStyleProperties
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function TileLayout()
+ {
+ super();
+ }
+
+ private var _numColumns:Number = 4;
+ private var _columnWidth:Number = Number.NaN;
+ private var _rowHeight:Number = Number.NaN;
+
+ /**
+ * The number of tiles to fit horizontally into the layout.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get numColumns():Number
+ {
+ return _numColumns;
+ }
+ public function set numColumns(value:Number):void
+ {
+ _numColumns = value;
+ }
+
+ /**
+ * The width of each column, in pixels. If left unspecified, the
+ * columnWidth is determined by dividing the numColumns into the
+ * strand's bounding box width.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get columnWidth():Number
+ {
+ return _columnWidth;
+ }
+ public function set columnWidth(value:Number):void
+ {
+ _columnWidth = value;
+ }
+
+ /**
+ * The height of each row, in pixels. If left unspecified, the
+ * rowHeight is determine by dividing the possible number of rows
+ * into the strand's bounding box height.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get rowHeight():Number
+ {
+ return _rowHeight;
+ }
+ public function set rowHeight(value:Number):void
+ {
+ _rowHeight = value;
+ }
+
+ /**
+ * @private
+ */
+ private var _paddingTop:Number = 0;
+
+ /**
+ * The top padding value.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ 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.9.4
+ */
+ 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.9.4
+ */
+ 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.9.4
+ */
+ public function get paddingLeft():Number
+ {
+ return _paddingLeft;
+ }
+
+ /**
+ * @private
+ */
+ public function set paddingLeft(value:Number):void
+ {
+ _paddingLeft = value;
+ }
+
+ /**
+ * @private
+ */
+ private var verticalGapInitialized:Boolean;
+ public static const VERTICAL_GAP_STYLE:String = "verticalGap"
+ private var _verticalGap:Number = 0;
+
+ /**
+ * The verticalGap between items.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get verticalGap():Number
+ {
+ return _verticalGap;
+ }
+
+ /**
+ * @private
+ */
+ public function set verticalGap(value:Number):void
+ {
+ _verticalGap = value;
+ verticalGapInitialized = true;
+ }
+
+ /**
+ * @private
+ */
+ private var horizontalGapInitialized:Boolean;
+ public static const HORIZONTAL_GAP_STYLE:String = "horizontalGap"
+ private var _horizontalGap:Number = 0;
+
+ /**
+ * The horizontalGap between items.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get horizontalGap():Number
+ {
+ return _horizontalGap;
+ }
+
+ /**
+ * @private
+ */
+ public function set horizontalGap(value:Number):void
+ {
+ _horizontalGap = value;
+ horizontalGapInitialized = true;
+ }
+
+ /**
+ * Get the component layout style and apply to if exists
+ *
+ * @param component the IUIBase component that host this layout
+ * @param cssProperty the style property in css set for the component to retrieve
+ *
+ * @see org.apache.royale.core.layout.ILayoutStyleProperties#applyStyleToLayout(component:IUIBase, cssProperty:String):void
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function applyStyleToLayout(component:IUIBase, cssProperty:String):void
+ {
+ var cssValue:* = ValuesManager.valuesImpl.getValue(component, cssProperty);
+ if (cssValue !== undefined)
+ {
+ switch(cssProperty)
+ {
+ case VERTICAL_GAP_STYLE:
+ if(!verticalGapInitialized)
+ {
+ verticalGap = Number(cssValue);
+ }
+ break;
+ default:
+ break;
+ }
+ }
+ }
+
+ /**
+ * Layout children
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.ILayoutHost
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function layout():Boolean
+ {
+ COMPILE::SWF
+ {
+ var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
+ var area:UIBase = layoutView as UIBase;
+
+ var xpos:Number = 0;
+ var ypos:Number = 0;
+ var useWidth:Number = columnWidth;
+ var useHeight:Number = rowHeight;
+ var n:Number = area.numElements;
+ if (n == 0) return false;
+
+ var adjustedWidth:Number = Math.floor(host.width - borderMetrics.left - borderMetrics.right);
+ var adjustedHeight:Number = Math.floor(host.height - borderMetrics.top - borderMetrics.bottom);
+
+ var realN:Number = n;
+ for(var j:int=0; j < n; j++)
+ {
+ var testChild:IUIBase = area.getElementAt(i) as IUIBase;
+ if (testChild == null || !testChild.visible) realN--;
+ }
+
+ if (isNaN(useWidth)) useWidth = Math.floor(adjustedWidth / numColumns); // + verticalGap
+ if (isNaN(useHeight)) {
+ // given the width and total number of items, how many rows?
+ var numRows:Number = Math.ceil(realN/numColumns);
+ if (host.isHeightSizedToContent()) useHeight = 30; // default height
+ else useHeight = Math.floor(adjustedHeight / numRows);
+ }
+
+ var maxWidth:Number = useWidth;
+ var maxHeight:Number = useHeight;
+
+ for(var i:int=0; i < n; i++)
+ {
+ var child:IUIBase = area.getElementAt(i) as IUIBase;
+ if (child == null || !child.visible) continue;
+ child.width = useWidth;
+ child.height = useHeight;
+ child.x = xpos;
+ child.y = ypos;
+
+ xpos += useWidth;
+ maxWidth = Math.max(maxWidth,xpos);
+
+ var test:Number = (i+1)%numColumns;
+
+ if (test == 0) {
+ xpos = 0;
+ ypos += useHeight;
+ maxHeight = Math.max(maxHeight,ypos);
+ }
+ }
+
+ maxWidth = Math.max(maxWidth, numColumns*useWidth);
+ maxHeight = Math.max(maxHeight, numRows*useHeight);
+
+ // Only return true if the contentView needs to be larger; that new
+ // size is stored in the model.
+ var sizeChanged:Boolean = true;
+
+ return sizeChanged;
+ }
+ COMPILE::JS
+ {
+ var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+ var c:UIBase = (contentView as UIBase);
+ c.element.classList.add("layout");
+ c.element.classList.add("tile");
+
+ var children:Array = contentView.internalChildren();
+ var i:int;
+ var n:int = children.length;
+ if (n === 0) return false;
+
+ var realN:int = n;
+ for (i = 0; i < n; i++)
+ {
+ child = children[i].royale_wrapper;
+ if (!child.visible) realN--;
+ }
+
+ var useWidth:Number = columnWidth;
+ var useHeight:Number = rowHeight;
+ var needWidth:Boolean = isNaN(useWidth);
+ var needHeight:Boolean = isNaN(useHeight);
+
+ // given the width and total number of items, how many rows?
+ var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
+ var adjustedWidth:Number = Math.floor(host.width - borderMetrics.left - borderMetrics.right);
+ var adjustedHeight:Number = Math.floor(host.height - borderMetrics.top - borderMetrics.bottom);
+ var numRows:Number = Math.ceil(realN / (numColumns + _verticalGap));
+
+ if(needWidth || needHeight)
+ {
+ if (needWidth)
+ useWidth = Math.floor(adjustedWidth / numColumns);// + _horizontalGap;
+
+ if (needHeight)
+ {
+ if (host.isHeightSizedToContent())
+ useHeight = 30; // default height
+ else
+ useHeight = Math.floor(adjustedHeight / numRows);// + _verticalGap;
+ }
+ }
+
+ var child:UIBase;
+ var numCols:Number = Math.floor(1+(adjustedWidth - useWidth) / (useWidth + _horizontalGap));
+
+ for (i = 0; i < n; i++)
+ {
+ child = children[i].royale_wrapper;
+ if (!child.visible) continue;
+ child.width = useWidth;
+ child.height = useHeight;
+
+ var childW:WrappedHTMLElement = children[i];
+ if (childW == null) continue;
+
+ if(i < numCols)
+ {
+ childW.style.marginTop = _paddingTop + 'px';
+ }
+ else
+ {
+ childW.style.marginTop = _verticalGap + 'px';
+ }
+
+ if(i % numCols)
+ {
+ childW.style.marginLeft = _horizontalGap + 'px';
+ }
+ else
+ {
+ childW.style.marginLeft = _paddingLeft + 'px';
+ }
+
+ childW.royale_wrapper.dispatchEvent('sizeChanged');
+ }
+ return true;
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalCenteredLayout.as
similarity index 62%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalCenteredLayout.as
index 8dfdf7a..0316c2f 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalCenteredLayout.as
@@ -28,22 +28,28 @@
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.utils.css.addDynamicSelector;
+ import org.apache.royale.utils.StringUtil;
+ import org.apache.royale.core.layout.ILayoutStyleProperties;
+
COMPILE::JS {
- import org.apache.royale.utils.cssclasslist.addStyles;
import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.core.UIBase;
}
/**
- * The HorizontalLayoutWithPaddingAndGap class is a simple layout
+ * The VerticalCenteredLayout class is a simple layout
* bead similar to HorizontalLayout, but it adds support for
* padding and gap values.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
- public class HorizontalLayoutWithPaddingAndGap extends LayoutBase implements IBeadLayout
+ public class VerticalCenteredLayout extends SimpleVerticalLayout implements ILayoutStyleProperties
{
/**
* Constructor.
@@ -51,14 +57,44 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
- public function HorizontalLayoutWithPaddingAndGap()
+ public function VerticalCenteredLayout()
{
super();
}
/**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout vertical centered";
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IParentIUIBase
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ COMPILE::JS
+ {
+ if(hostClassList.contains("centered"))
+ hostClassList.remove("centered");
+ hostClassList.add("centered");
+
+ applyStyleToLayout(hostComponent, "gap");
+ setGap(_gap);
+ }
+ }
+
+ /**
* @private
*/
private var _paddingTop:Number = 0;
@@ -69,7 +105,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get paddingTop():Number
{
@@ -95,7 +131,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get paddingRight():Number
{
@@ -121,7 +157,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get paddingBottom():Number
{
@@ -147,7 +183,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get paddingLeft():Number
{
@@ -162,32 +198,132 @@
_paddingLeft = value;
}
+ private var gapInitialized:Boolean;
+ // private var _gap:Boolean;
/**
- * @private
- */
- private var _gap:Number = 0;
-
- /**
- * The gap between items.
+ * Assigns variable gap to grid from 1 to 20
+ * Activate "gap-Xdp" effect selector to set a numeric gap
+ * between grid cells
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
+ */
+ // public function get gap():Boolean
+ // {
+ // return _gap;
+ // }
+
+ // /**
+ // * @private
+ // */
+ // public function set gap(value:Boolean):void
+ // {
+ // if (_gap != value)
+ // {
+ // COMPILE::JS
+ // {
+ // if(hostComponent)
+ // setGap(value);
+
+ // _gap = value;
+ // gapInitialized = true;
+ // }
+ // }
+ // }
+
+ // COMPILE::JS
+ // private function setGap(value:Boolean):void
+ // {
+ // if (value)
+ // hostClassList.add("gap");
+ // else
+ // hostClassList.remove("gap");
+ // }
+
+ /**
+ * Get the component layout style and apply to if exists
+ *
+ * @param component the IUIBase component that host this layout
+ * @param cssProperty the style property in css set for the component to retrieve
+ *
+ * @see org.apache.royale.core.layout.ILayoutStyleProperties#applyStyleToLayout(component:IUIBase, cssProperty:String):void
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function applyStyleToLayout(component:IUIBase, cssProperty:String):void
+ {
+ var cssValue:* = ValuesManager.valuesImpl.getValue(component, cssProperty);
+ if (cssValue !== undefined)
+ {
+ switch(cssProperty)
+ {
+ case "gap":
+ if(!gapInitialized)
+ gap = Number(cssValue);
+ break;
+ default:
+ break;
+ }
+ }
+ }
+
+ // number of gap styles available in CSS @see $gaps variable in _layout.sass
+ public static const GAPS:Number = 10;
+ // gap step size in each gap style rule in CSS @see $gap-step variable in _layout.sass
+ public static const GAP_STEP:Number = 3;
+
+ protected var _gap:Number = 0;
+ /**
+ * Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
+ * Activate "gap-{X}x{GAP_STEP}px" effect selector to set a numeric gap between elements.
+ * i.e: gap-2x3px will result in a gap of 6px
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
*/
public function get gap():Number
- {
- return _gap;
- }
+ {
+ return _gap;
+ }
/**
* @private
*/
public function set gap(value:Number):void
{
- _gap = value;
+ if (_gap != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setGap(value);
+
+ _gap = value;
+ gapInitialized = true;
+ }
+ }
}
+ COMPILE::JS
+ private function setGap(value:Number):void
+ {
+ if (value >= 0 && value <= GAPS*GAP_STEP)
+ {
+ if (hostClassList.contains("gap-" + _gap + "x" + GAP_STEP + "px"))
+ hostClassList.remove("gap-" + _gap + "x" + GAP_STEP + "px");
+ if(value != 0)
+ hostClassList.add("gap-" + value + "x" + GAP_STEP + "px");
+ } else
+ throw new Error("Gap needs to be between 0 and " + GAPS*GAP_STEP);
+ }
+
/**
* @copy org.apache.royale.core.IBeadLayout#layout
* @royaleignorecoercion org.apache.royale.core.ILayoutHost
@@ -249,7 +385,7 @@
// the following code middle-aligns the child, but since HTML does not
// do this normally, this code is commented. (Use HorizontalFlexLayout for
// vertically centered elements in a horizontal row).
-// childYpos = hostHeight/2 - (childHeight + mt + mb)/2;
+ // childYpos = hostHeight/2 - (childHeight + mt + mb)/2;
}
if (ilc) {
@@ -274,10 +410,9 @@
}
COMPILE::JS
{
- var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- addStyles (contentView, "layout horizontal");
+ //applyStyleToLayout(c, "gap");
- var children:Array = contentView.internalChildren();
+ /*var children:Array = contentView.internalChildren();
var i:int;
var n:int = children.length;
for (i = 0; i < n; i++)
@@ -302,7 +437,7 @@
{
child.style.marginLeft = _gap + 'px';
}
- }
+ }*/
return true;
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalFlowLayout.as
similarity index 62%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalFlowLayout.as
index 8dfdf7a..de5bafa 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalFlowLayout.as
@@ -28,22 +28,28 @@
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.utils.css.addDynamicSelector;
+ import org.apache.royale.utils.StringUtil;
+ import org.apache.royale.core.layout.ILayoutStyleProperties;
+
COMPILE::JS {
- import org.apache.royale.utils.cssclasslist.addStyles;
import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.core.UIBase;
}
/**
- * The HorizontalLayoutWithPaddingAndGap class is a simple layout
+ * The VerticalFlowLayout class is a simple layout
* bead similar to HorizontalLayout, but it adds support for
* padding and gap values.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
- public class HorizontalLayoutWithPaddingAndGap extends LayoutBase implements IBeadLayout
+ public class VerticalFlowLayout extends SimpleVerticalLayout implements ILayoutStyleProperties
{
/**
* Constructor.
@@ -51,14 +57,44 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
- public function HorizontalLayoutWithPaddingAndGap()
+ public function VerticalFlowLayout()
{
super();
}
/**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout vertical flow";
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IParentIUIBase
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ COMPILE::JS
+ {
+ if(hostClassList.contains("flow"))
+ hostClassList.remove("flow");
+ hostClassList.add("flow");
+
+ applyStyleToLayout(hostComponent, "gap");
+ setGap(_gap);
+ }
+ }
+
+ /**
* @private
*/
private var _paddingTop:Number = 0;
@@ -69,7 +105,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get paddingTop():Number
{
@@ -95,7 +131,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get paddingRight():Number
{
@@ -121,7 +157,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get paddingBottom():Number
{
@@ -147,7 +183,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get paddingLeft():Number
{
@@ -162,32 +198,132 @@
_paddingLeft = value;
}
+ private var gapInitialized:Boolean;
+ // private var _gap:Boolean;
/**
- * @private
- */
- private var _gap:Number = 0;
-
- /**
- * The gap between items.
+ * Assigns variable gap to grid from 1 to 20
+ * Activate "gap-Xdp" effect selector to set a numeric gap
+ * between grid cells
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
+ */
+ // public function get gap():Boolean
+ // {
+ // return _gap;
+ // }
+
+ // /**
+ // * @private
+ // */
+ // public function set gap(value:Boolean):void
+ // {
+ // if (_gap != value)
+ // {
+ // COMPILE::JS
+ // {
+ // if(hostComponent)
+ // setGap(value);
+
+ // _gap = value;
+ // gapInitialized = true;
+ // }
+ // }
+ // }
+
+ // COMPILE::JS
+ // private function setGap(value:Boolean):void
+ // {
+ // if (value)
+ // hostClassList.add("gap");
+ // else
+ // hostClassList.remove("gap");
+ // }
+
+ /**
+ * Get the component layout style and apply to if exists
+ *
+ * @param component the IUIBase component that host this layout
+ * @param cssProperty the style property in css set for the component to retrieve
+ *
+ * @see org.apache.royale.core.layout.ILayoutStyleProperties#applyStyleToLayout(component:IUIBase, cssProperty:String):void
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function applyStyleToLayout(component:IUIBase, cssProperty:String):void
+ {
+ var cssValue:* = ValuesManager.valuesImpl.getValue(component, cssProperty);
+ if (cssValue !== undefined)
+ {
+ switch(cssProperty)
+ {
+ case "gap":
+ if(!gapInitialized)
+ gap = Number(cssValue);
+ break;
+ default:
+ break;
+ }
+ }
+ }
+
+ // number of gap styles available in CSS @see $gaps variable in _layout.sass
+ public static const GAPS:Number = 10;
+ // gap step size in each gap style rule in CSS @see $gap-step variable in _layout.sass
+ public static const GAP_STEP:Number = 3;
+
+ protected var _gap:Number = 0;
+ /**
+ * Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
+ * Activate "gap-{X}x{GAP_STEP}px" effect selector to set a numeric gap between elements.
+ * i.e: gap-2x3px will result in a gap of 6px
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
*/
public function get gap():Number
- {
- return _gap;
- }
+ {
+ return _gap;
+ }
/**
* @private
*/
public function set gap(value:Number):void
{
- _gap = value;
+ if (_gap != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setGap(value);
+
+ _gap = value;
+ gapInitialized = true;
+ }
+ }
}
+ COMPILE::JS
+ private function setGap(value:Number):void
+ {
+ if (value >= 0 && value <= GAPS*GAP_STEP)
+ {
+ if (hostClassList.contains("gap-" + _gap + "x" + GAP_STEP + "px"))
+ hostClassList.remove("gap-" + _gap + "x" + GAP_STEP + "px");
+ if(value != 0)
+ hostClassList.add("gap-" + value + "x" + GAP_STEP + "px");
+ } else
+ throw new Error("Gap needs to be between 0 and " + GAPS*GAP_STEP);
+ }
+
/**
* @copy org.apache.royale.core.IBeadLayout#layout
* @royaleignorecoercion org.apache.royale.core.ILayoutHost
@@ -249,7 +385,7 @@
// the following code middle-aligns the child, but since HTML does not
// do this normally, this code is commented. (Use HorizontalFlexLayout for
// vertically centered elements in a horizontal row).
-// childYpos = hostHeight/2 - (childHeight + mt + mb)/2;
+ // childYpos = hostHeight/2 - (childHeight + mt + mb)/2;
}
if (ilc) {
@@ -274,10 +410,9 @@
}
COMPILE::JS
{
- var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- addStyles (contentView, "layout horizontal");
+ //applyStyleToLayout(c, "gap");
- var children:Array = contentView.internalChildren();
+ /*var children:Array = contentView.internalChildren();
var i:int;
var n:int = children.length;
for (i = 0; i < n; i++)
@@ -302,7 +437,7 @@
{
child.style.marginLeft = _gap + 'px';
}
- }
+ }*/
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
index 4b058d6..a632ca4 100644
--- 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
@@ -28,24 +28,29 @@
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.core.IStrand;
+ import org.apache.royale.utils.StringUtil;
+ import org.apache.royale.core.layout.ILayoutStyleProperties;
+
+
COMPILE::JS
{
- import org.apache.royale.utils.cssclasslist.addStyles;
import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.core.UIBase;
}
/**
* 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.
+ * 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.9.3
+ * @productversion Royale 0.9.4
*/
- public class VerticalLayout extends LayoutBase implements IBeadLayout
+ public class VerticalLayout extends SimpleVerticalLayout implements ILayoutStyleProperties
{
/**
* Constructor.
@@ -53,7 +58,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function VerticalLayout()
{
@@ -61,12 +66,269 @@
}
/**
+ * @royalesuppresspublicvarwarning
+ */
+ public static const LAYOUT_TYPE_NAMES:String = "layout vertical";
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IParentIUIBase
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ COMPILE::JS
+ {
+ applyStyleToLayout(hostComponent, "gap");
+ setGap(_gap);
+ }
+ }
+
+ /**
+ * @private
+ */
+ private var _paddingTop:Number = 0;
+
+ /**
+ * The top padding value.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ 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.9.4
+ */
+ 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.9.4
+ */
+ 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.9.4
+ */
+ public function get paddingLeft():Number
+ {
+ return _paddingLeft;
+ }
+
+ /**
+ * @private
+ */
+ public function set paddingLeft(value:Number):void
+ {
+ _paddingLeft = value;
+ }
+
+ private var gapInitialized:Boolean;
+ // private var _gap:Boolean;
+ /**
+ * Assigns variable gap to grid from 1 to 20
+ * Activate "gap-Xdp" effect selector to set a numeric gap
+ * between grid cells
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ // public function get gap():Boolean
+ // {
+ // return _gap;
+ // }
+
+ /**
+ * @private
+ */
+ // public function set gap(value:Boolean):void
+ // {
+ // if (_gap != value)
+ // {
+ // COMPILE::JS
+ // {
+ // if(hostComponent)
+ // setGap(value);
+
+ // _gap = value;
+ // gapInitialized = true;
+ // }
+ // }
+ // }
+
+ // COMPILE::JS
+ // private function setGap(value:Boolean):void
+ // {
+ // if (value)
+ // hostClassList.add("gap");
+ // else
+ // hostClassList.remove("gap");
+ // }
+
+ /**
+ * Get the component layout style and apply to if exists
+ *
+ * @param component the IUIBase component that host this layout
+ * @param cssProperty the style property in css set for the component to retrieve
+ *
+ * @see org.apache.royale.core.layout.ILayoutStyleProperties#applyStyleToLayout(component:IUIBase, cssProperty:String):void
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function applyStyleToLayout(component:IUIBase, cssProperty:String):void
+ {
+ var cssValue:* = ValuesManager.valuesImpl.getValue(component, cssProperty);
+ if (cssValue !== undefined)
+ {
+ switch(cssProperty)
+ {
+ case "gap":
+ if(!gapInitialized)
+ gap = Number(cssValue);
+ break;
+ default:
+ break;
+ }
+ }
+ }
+
+
+ // number of gap styles available in CSS @see $gaps variable in _layout.sass
+ public static const GAPS:Number = 10;
+ // gap step size in each gap style rule in CSS @see $gap-step variable in _layout.sass
+ public static const GAP_STEP:Number = 3;
+
+ protected var _gap:Number = 0;
+ /**
+ * Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
+ * Activate "gap-{X}x{GAP_STEP}px" effect selector to set a numeric gap between elements.
+ * i.e: gap-2x3px will result in a gap of 6px
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get gap():Number
+ {
+ return _gap;
+ }
+
+ /**
+ * @private
+ */
+ public function set gap(value:Number):void
+ {
+ if (_gap != value)
+ {
+ COMPILE::JS
+ {
+ if(hostComponent)
+ setGap(value);
+
+ _gap = value;
+ gapInitialized = true;
+ }
+ }
+ }
+
+ COMPILE::JS
+ private function setGap(value:Number):void
+ {
+ if (value >= 0 && value <= GAPS*GAP_STEP)
+ {
+ if (hostClassList.contains("gap-" + _gap + "x" + GAP_STEP + "px"))
+ hostClassList.remove("gap-" + _gap + "x" + GAP_STEP + "px");
+ if(value != 0)
+ hostClassList.add("gap-" + value + "x" + GAP_STEP + "px");
+ } else
+ throw new Error("Gap needs to be between 0 and " + GAPS*GAP_STEP);
+ }
+
+ /**
* Layout children vertically
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
* @royaleignorecoercion org.apache.royale.core.ILayoutHost
* @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
*/
@@ -83,14 +345,18 @@
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 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 = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getPaddingMetrics(host);
+ 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
@@ -107,32 +373,28 @@
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; // default x position
- var childXpos:Number = xpos + margins.left; // 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;
+ }
- 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)) {
+ if (!hostHeightSizedToContent && !isNaN(ilc.percentHeight)) {
var newHeight:Number = hostHeight * ilc.percentHeight / 100;
ilc.setHeight(newHeight);
}
@@ -142,37 +404,48 @@
child.y = ypos;
}
- ypos += child.height + margins.bottom;
+ ypos += child.height + _gap;
}
return true;
}
COMPILE::JS
{
- var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- addStyles (contentView, "layout vertical");
-
- var children:Array = contentView.internalChildren();
- var i:int;
- var n:int = children.length;
- for (i = 0; i < n; i++)
- {
- var child:WrappedHTMLElement = children[i] as WrappedHTMLElement;
- if (child == null) continue;
-
- child.royale_wrapper.dispatchEvent('sizeChanged');
- }
+ // var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+ // var c:UIBase = (contentView as UIBase);
+ // c.element.classList.add("layout");
+ // c.element.classList.add("vertical");
- /**
- * This Layout uses the following CSS rules
- *
- * .layout.vertical {
- * vertical-align: top;
- * }
- * .layout.vertical > * {
- * display: block !important;
- * }
- */
+ //applyStyleToLayout(c, "gap");
+
+ // var children:Array = contentView.internalChildren();
+ // var i:int;
+ // var n:int = children.length;
+ // for (i = 0; i < n; i++)
+ // {
+ // var child:WrappedHTMLElement = children[i];
+
+ // 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.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
deleted file mode 100644
index 6054163..0000000
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
+++ /dev/null
@@ -1,318 +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.
-//
-////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel.beads.layouts
-{
- import org.apache.royale.core.LayoutBase;
- import org.apache.royale.core.IBeadLayout;
- 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.IParentIUIBase;
- 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.utils.cssclasslist.addStyles;
- import org.apache.royale.core.WrappedHTMLElement;
- }
-
- /**
- * 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 contentView:IParentIUIBase = layoutView as IParentIUIBase;
- addStyles (contentView, "layout vertical");
-
- var children:Array = contentView.internalChildren();
- var i:int;
- var n:int = children.length;
- for (i = 0; i < n; i++)
- {
- var child:WrappedHTMLElement = children[i];
-
- 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.dispatchEvent('sizeChanged');
- }
-
- return true;
- }
- }
-
- }
-}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/AlertModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/AlertModel.as
new file mode 100644
index 0000000..f4b7f98
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/AlertModel.as
@@ -0,0 +1,288 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.models
+{
+ import org.apache.royale.core.IAlertModel;
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.EventDispatcher;
+
+ /**
+ * The AlertModel class bead implements the org.apache.royale.core.IAlertModel and holds the properties
+ * for an org.apache.royale.html.Alert such the buttons to use and message to display.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class AlertModel extends EventDispatcher implements IAlertModel, IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function AlertModel()
+ {
+ super();
+ }
+
+ 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.4
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ }
+
+ private var _title:String;
+
+ /**
+ * The title for the Alert.
+ *
+ * @copy org.apache.royale.core.IAlertModel#title
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get title():String
+ {
+ return _title;
+ }
+ public function set title(value:String):void
+ {
+ if( value != _title ) {
+ _title = value;
+ dispatchEvent( new Event("titleChange") );
+ }
+ }
+
+ private var _htmlTitle:String;
+
+ /**
+ * The HTML title for the Alert.
+ *
+ * @copy org.apache.royale.core.IAlertModel#htmlTitle
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get htmlTitle():String
+ {
+ return _htmlTitle;
+ }
+ public function set htmlTitle(value:String):void
+ {
+ if( value != _htmlTitle ) {
+ _htmlTitle = value;
+ dispatchEvent( new Event("htmlTitleChange") );
+ }
+ }
+
+ private var _message:String;
+
+ /**
+ * The message to display.
+ *
+ * @copy org.apache.royale.core.IAlertModel#message
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get message():String
+ {
+ return _message;
+ }
+ public function set message(value:String):void
+ {
+ if( value != _message ) {
+ _message = value;
+ dispatchEvent( new Event("messageChange") );
+ }
+ }
+
+ private var _htmlMessage:String;
+
+ /**
+ * The HTML message to display.
+ *
+ * @copy org.apache.royale.core.IAlertModel#htmlMessage
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get htmlMessage():String
+ {
+ return _htmlMessage;
+ }
+ public function set htmlMessage(value:String):void
+ {
+ if( value != _htmlMessage )
+ {
+ _htmlMessage = value;
+ dispatchEvent( new Event("htmlMessageChange") );
+ }
+ }
+
+ private var _flags:uint;
+
+ /**
+ * Which buttons to display (see Alert for details).
+ *
+ * @copy org.apache.royale.core.IAlertModel#flags
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get flags():uint
+ {
+ return _flags;
+ }
+ public function set flags(value:uint):void
+ {
+ if( value != _flags )
+ {
+ _flags = value;
+ dispatchEvent( new Event("flagsChange") );
+ }
+ }
+
+ private var _okLabel:String = "OK";
+
+ /**
+ * The label to use for the OK button.
+ *
+ * @copy org.apache.royale.core.IAlertModel#okLabel
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get okLabel():String
+ {
+ return _okLabel;
+ }
+ public function set okLabel(value:String):void
+ {
+ if( value != _okLabel )
+ {
+ _okLabel = value;
+ dispatchEvent( new Event("okLabelChange") );
+ }
+ }
+
+ private var _cancelLabel:String = "Cancel";
+
+ /**
+ * The label to use for the Cancel button.
+ *
+ * @copy org.apache.royale.core.IAlertModel#cancelLabel
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get cancelLabel():String
+ {
+ return _cancelLabel;
+ }
+ public function set cancelLabel(value:String):void
+ {
+ if( value != _cancelLabel )
+ {
+ _cancelLabel = value;
+ dispatchEvent( new Event("cancelLabelChange") );
+ }
+ }
+
+ private var _yesLabel:String = "YES";
+
+ /**
+ * The label to use for the Yes button.
+ *
+ * @copy org.apache.royale.core.IAlertModel#yesLabel
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get yesLabel():String
+ {
+ return _yesLabel;
+ }
+ public function set yesLabel(value:String):void
+ {
+ if( value != _yesLabel )
+ {
+ _yesLabel = value;
+ dispatchEvent( new Event("yesLabelChange") );
+ }
+ }
+
+ private var _noLabel:String = "NO";
+
+ /**
+ * The label to use for the NO button.
+ *
+ * @copy org.apache.royale.core.IAlertModel#noLabel
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get noLabel():String
+ {
+ return _noLabel;
+ }
+ public function set noLabel(value:String):void
+ {
+ if( value != _noLabel )
+ {
+ _noLabel = value;
+ dispatchEvent( new Event("noLabelChange") );
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/ArrayListSelectionModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/ArrayListSelectionModel.as
new file mode 100644
index 0000000..38f3696
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/ArrayListSelectionModel.as
@@ -0,0 +1,247 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.models
+{
+ import org.apache.royale.collections.IArrayList;
+ import org.apache.royale.core.IRollOverModel;
+ import org.apache.royale.core.ISelectionModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.EventDispatcher;
+
+ /**
+ * The ArrayListSelectionModel class is a selection model for
+ * a dataProvider that is an ArrayList. It assumes that items
+ * can be fetched from the dataProvider using dataProvider.getItemAt(index).
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class ArrayListSelectionModel extends EventDispatcher implements ISelectionModel, IRollOverModel
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ArrayListSelectionModel()
+ {
+ }
+
+ 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.4
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ }
+
+ private var _dataProvider:IArrayList;
+
+ [Bindable("dataProviderChanged")]
+ /**
+ * @copy org.apache.royale.core.ISelectionModel#dataProvider
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get dataProvider():Object
+ {
+ return _dataProvider;
+ }
+
+ /**
+ * @private
+ */
+ public function set dataProvider(value:Object):void
+ {
+ if (value == _dataProvider) return;
+
+ _dataProvider = value as IArrayList;
+ if(!_dataProvider || _selectedIndex >= _dataProvider.length)
+ _selectedIndex = -1;
+
+ _selectedItem = _selectedIndex == -1 ? null : _dataProvider.getItemAt(_selectedIndex);
+
+ dispatchEvent(new Event("dataProviderChanged"));
+ }
+
+ private var _selectedIndex:int = -1;
+ private var _rollOverIndex:int = -1;
+ private var _labelField:String = null;
+
+ /**
+ * @copy org.apache.royale.core.ISelectionModel#labelField
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get labelField():String
+ {
+ return _labelField;
+ }
+
+ /**
+ * @private
+ */
+ public function set labelField(value:String):void
+ {
+ if (value != _labelField) {
+ _labelField = value;
+ dispatchEvent(new Event("labelFieldChanged"));
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.ISelectionModel#selectedIndex
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get selectedIndex():int
+ {
+ return _selectedIndex;
+ }
+
+ /**
+ * @private
+ */
+ public function set selectedIndex(value:int):void
+ {
+ if (value == _selectedIndex) return;
+
+ _selectedIndex = value;
+ _selectedItem = (value == -1 || _dataProvider == null) ? null : (value < _dataProvider.length) ? _dataProvider.getItemAt(value) : null;
+ dispatchEvent(new Event("selectedIndexChanged"));
+ }
+
+ /**
+ * @copy org.apache.royale.core.IRollOverModel#rollOverIndex
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get rollOverIndex():int
+ {
+ return _rollOverIndex;
+ }
+
+ /**
+ * @private
+ */
+ public function set rollOverIndex(value:int):void
+ {
+ if (value != _rollOverIndex) {
+ _rollOverIndex = value;
+ dispatchEvent(new Event("rollOverIndexChanged"));
+ }
+ }
+
+ private var _selectedItem:Object;
+
+ /**
+ * @copy org.apache.royale.core.ISelectionModel#selectedItem
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get selectedItem():Object
+ {
+ return _selectedItem;
+ }
+
+ /**
+ * @private
+ */
+ public function set selectedItem(value:Object):void
+ {
+ if (value == _selectedItem) return;
+
+ _selectedItem = value;
+ var n:int = _dataProvider.length;
+ for (var i:int = 0; i < n; i++)
+ {
+ if (_dataProvider.getItemAt(i) == value)
+ {
+ _selectedIndex = i;
+ break;
+ }
+ }
+ dispatchEvent(new Event("selectedItemChanged"));
+ dispatchEvent(new Event("selectedIndexChanged"));
+ }
+
+ private var _selectedString:String;
+
+ /**
+ * An alternative to selectedItem for strongly typing the
+ * the selectedItem if the Array is an Array of Strings.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get selectedString():String
+ {
+ return String(_selectedItem);
+ }
+
+ /**
+ * @private
+ */
+ public function set selectedString(value:String):void
+ {
+ _selectedString = value;
+ var n:int = _dataProvider.length;
+ for (var i:int = 0; i < n; i++)
+ {
+ if (String(_dataProvider.getItemAt(i)) == value)
+ {
+ _selectedIndex = i;
+ break;
+ }
+ }
+ dispatchEvent(new Event("selectedItemChanged"));
+ dispatchEvent(new Event("selectedIndexChanged"));
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/ComboBoxModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/ComboBoxModel.as
new file mode 100644
index 0000000..9d3f097
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/ComboBoxModel.as
@@ -0,0 +1,101 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.models
+{
+ import org.apache.royale.jewel.beads.models.ArrayListSelectionModel;
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IComboBoxModel;
+ import org.apache.royale.events.Event;
+
+ /**
+ * The ComboBoxModel class bead extends org.apache.royale.jewel.beads.models.ArrayListSelectionModel
+ * and adds the text being displayed by the org.apache.royale.jewel.ComboBox's input field.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class ComboBoxModel extends ArrayListSelectionModel implements IBead, IComboBoxModel
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ComboBoxModel()
+ {
+ }
+
+ private var _text:String;
+
+ /**
+ * The string to display in the org.apache.royale.html.ComboBox input field.
+ *
+ * @copy org.apache.royale.core.IComboBoxModel#text
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get text():String
+ {
+ return _text;
+ }
+
+ public function set text(value:String):void
+ {
+ if (value != _text)
+ {
+ _text = value;
+ dispatchEvent(new Event("textChange"));
+ }
+ }
+
+ private var _html:String;
+
+ /**
+ * The HTML string to display in the org.apache.royale.html.ComboBox input field.
+ *
+ * @copy org.apache.royale.core.IComboBoxModel#html
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get html():String
+ {
+ return _html;
+ }
+
+ public function set html(value:String):void
+ {
+ if (value != _html)
+ {
+ _html = value;
+ dispatchEvent(new Event("htmlChange"));
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DataProviderModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DataProviderModel.as
new file mode 100644
index 0000000..75ad138
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DataProviderModel.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.beads.models
+{
+ import org.apache.royale.core.IDataProviderModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.EventDispatcher;
+
+ /**
+ * The DataProviderModel class is a model for
+ * a dataProvider and an optional labelField.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class DataProviderModel extends EventDispatcher implements IDataProviderModel
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function DataProviderModel()
+ {
+ }
+
+ 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.4
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ }
+
+ private var _dataProvider:Object;
+
+ /**
+ * @copy org.apache.royale.core.ISelectionModel#dataProvider
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get dataProvider():Object
+ {
+ return _dataProvider;
+ }
+
+ /**
+ * @private
+ */
+ public function set dataProvider(value:Object):void
+ {
+ if (value === _dataProvider) return;
+
+ _dataProvider = value;
+ dispatchEvent(new Event("dataProviderChanged"));
+ }
+
+ private var _labelField:String = null;
+
+ /**
+ * @copy org.apache.royale.core.ISelectionModel#labelField
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get labelField():String
+ {
+ return _labelField;
+ }
+
+ /**
+ * @private
+ */
+ public function set labelField(value:String):void
+ {
+ if (value != _labelField) {
+ _labelField = value;
+ dispatchEvent(new Event("labelFieldChanged"));
+ }
+ }
+
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DateChooserModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DateChooserModel.as
new file mode 100644
index 0000000..392aed1
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DateChooserModel.as
@@ -0,0 +1,284 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.models
+{
+ import org.apache.royale.core.IDateChooserModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.EventDispatcher;
+
+ /**
+ * The DateChooserModel is a bead class that manages the data for a DataChooser.
+ * This includes arrays of names for the months and days of the week as well the
+ * currently selected date.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class DateChooserModel extends EventDispatcher implements IDateChooserModel
+ {
+ public function DateChooserModel()
+ {
+ // default displayed year and month to "today"
+ // var today:Date = new Date();
+ // displayedYear = today.getFullYear();
+ // displayedMonth = today.getMonth();
+ }
+
+ 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.4
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ }
+
+ private var _dayNames:Array = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
+ private var _monthNames:Array = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
+ private var _days:Array;
+ private var _displayedYear:Number;
+ private var _displayedMonth:Number;
+ private var _firstDayOfWeek:Number = 0;
+ private var _selectedDate:Date;
+
+ /**
+ * An array of strings used to name the days of the week with Sunday being the
+ * first element of the array.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get dayNames():Array
+ {
+ return _dayNames;
+ }
+ public function set dayNames(value:Array):void
+ {
+ _dayNames = value;
+ dispatchEvent( new Event("dayNamesChanged") );
+ }
+
+ /**
+ * An array of strings used to name the months of the year with January being
+ * the first element of the array.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get monthNames():Array
+ {
+ return _monthNames;
+ }
+ public function set monthNames(value:Array):void
+ {
+ _monthNames = value;
+ dispatchEvent( new Event("monthNames") );
+ }
+
+ /**
+ * The year currently displayed by the DateChooser.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get displayedYear():Number
+ {
+ return _displayedYear;
+ }
+ public function set displayedYear(value:Number):void
+ {
+ if (value != _displayedYear) {
+ _displayedYear = value;
+ updateCalendar();
+ dispatchEvent( new Event("displayedYearChanged") );
+ }
+ }
+
+ /**
+ * The month currently displayed by the DateChooser.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get displayedMonth():Number
+ {
+ return _displayedMonth;
+ }
+ public function set displayedMonth(value:Number):void
+ {
+ if (_displayedMonth != value) {
+ _displayedMonth = value;
+ updateCalendar();
+ dispatchEvent( new Event("displayedMonthChanged") );
+ }
+ }
+
+ /**
+ * The index of the first day of the week, Sunday = 0.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get firstDayOfWeek():Number
+ {
+ return _firstDayOfWeek;
+ }
+ public function set firstDayOfWeek(value:Number):void
+ {
+ if (value != _firstDayOfWeek) {
+ _firstDayOfWeek = value;
+ updateCalendar();
+ dispatchEvent( new Event("firstDayOfWeekChanged") );
+ }
+ }
+
+ public function get days():Array
+ {
+ return _days;
+ }
+ public function set days(value:Array):void
+ {
+ if (value != _days) {
+ _days = value;
+ dispatchEvent( new Event("daysChanged") );
+ }
+ }
+
+ /**
+ * The currently selected date or null if no date has been selected.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get selectedDate():Date
+ {
+ return _selectedDate;
+ }
+ public function set selectedDate(value:Date):void
+ {
+ if (value != _selectedDate) {
+ _selectedDate = value;
+
+ if (value != null) {
+ var needsUpdate:Boolean = false;
+ if (value.getMonth() != _displayedMonth) {
+ needsUpdate = true;
+ _displayedMonth = value.getMonth();
+ }
+ if (value.getFullYear() != _displayedYear) {
+ needsUpdate = true;
+ _displayedYear = value.getFullYear();
+ }
+ if (needsUpdate) updateCalendar();
+ }
+
+ dispatchEvent( new Event("selectedDateChanged") );
+ }
+ }
+
+ // Utilities
+
+
+ /**
+ * @private
+ */
+ private function updateCalendar():void
+ {
+ var firstDay:Date = new Date(displayedYear, displayedMonth, 1);
+
+ _days = new Array(42);
+
+ // skip to the first day and renumber to the last day of the month
+ var i:int = firstDay.getDay() - firstDayOfWeek;
+ var dayNumber:int = 1;
+ var numDays:Number = numberOfDaysInMonth(displayedMonth, displayedYear);
+
+ while(dayNumber <= numDays)
+ {
+ _days[i++] = new Date(displayedYear, displayedMonth, dayNumber++);
+ }
+
+ }
+
+ /**
+ * @private
+ */
+ private function numberOfDaysInMonth(month:Number, year:Number):Number
+ {
+ var n:int;
+
+ if (month == 1) // Feb
+ {
+ if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) // leap year
+ n = 29;
+ else
+ n = 28;
+ }
+
+ else if (month == 3 || month == 5 || month == 8 || month == 10)
+ n = 30;
+
+ else
+ n = 31;
+
+ return n;
+ }
+
+ /**
+ * @private
+ */
+ public function getIndexForSelectedDate():Number
+ {
+ if (!_selectedDate) return -1;
+
+ var str:String = _selectedDate.toDateString();
+
+ for(var i:int=0; i < _days.length; i++) {
+ var test:Date = _days[i] as Date;
+
+ if (test && test.toDateString() == str)
+ {
+ return i;
+ }
+ }
+ return -1;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/ImageModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/ImageModel.as
new file mode 100644
index 0000000..69f5d79
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/ImageModel.as
@@ -0,0 +1,89 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.models
+{
+ import org.apache.royale.core.IImageModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.EventDispatcher;
+
+ /**
+ * The ImageModel class bead defines the data associated with an org.apache.royale.jewel.Image
+ * component, namely the source of the image.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class ImageModel extends EventDispatcher implements IImageModel
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ImageModel()
+ {
+ super();
+ }
+
+ 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.4
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ }
+
+ protected var _url:String;
+
+ /**
+ * The source of the image.
+ *
+ * @copy org.apache.royale.core.IImageModel#source
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get url():String
+ {
+ return _url;
+ }
+ public function set url(value:String):void
+ {
+ if (value != _url) {
+ _url = value;
+ dispatchEvent( new Event("urlChanged") );
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/ListPresentationModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/ListPresentationModel.as
new file mode 100644
index 0000000..622d854
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/ListPresentationModel.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.models
+{
+ import org.apache.royale.core.IListPresentationModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.EventDispatcher;
+
+ /**
+ * The ListPresentationModel holds values used by list controls for presenting
+ * their user interfaces.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class ListPresentationModel extends EventDispatcher implements IListPresentationModel
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ListPresentationModel()
+ {
+ super();
+ }
+
+ private var _rowHeight:Number = 30;
+
+ /**
+ * The height of each row.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get rowHeight():Number
+ {
+ return _rowHeight;
+ }
+
+ public function set rowHeight(value:Number):void
+ {
+ _rowHeight = value;
+ dispatchEvent(new Event("rowHeightChanged"));
+ }
+
+ private var _separatorThickness:Number = 0;
+
+ /**
+ * The distance between rows.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get separatorThickness():Number
+ {
+ return _separatorThickness;
+ }
+
+ public function set separatorThickness(value:Number):void
+ {
+ _separatorThickness = value;
+ dispatchEvent(new Event("separatorThicknessChanged"));
+ }
+
+ 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.4
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/RangeModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/RangeModel.as
new file mode 100644
index 0000000..76e2c45
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/RangeModel.as
@@ -0,0 +1,238 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.models
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IRangeModel;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.EventDispatcher;
+ import org.apache.royale.events.ValueChangeEvent;
+
+ /**
+ * The RangeModel class bead defines a set of for a numeric range of values
+ * which includes a minimum, maximum, and current value.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class RangeModel extends EventDispatcher implements IBead, IRangeModel
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function RangeModel()
+ {
+ }
+
+ protected 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.4
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ }
+
+ private var _maximum:Number = 100;
+
+ /**
+ * The maximum value for the range (defaults to 100).
+ *
+ * @copy org.apache.royale.core.IRangeModel#maximum
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get maximum():Number
+ {
+ return _maximum;
+ }
+
+ public function set maximum(value:Number):void
+ {
+ if (value != _maximum)
+ {
+ _maximum = value;
+ if (_value > _maximum) _value = _maximum;
+ dispatchEvent(new Event("maximumChange"));
+ }
+ }
+
+ private var _minimum:Number = 0;
+
+ /**
+ * The minimum value for the range (defaults to 0).
+ *
+ * @copy org.apache.royale.core.IRangeModel#minimum
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get minimum():Number
+ {
+ return _minimum;
+ }
+
+ public function set minimum(value:Number):void
+ {
+ if (value != _minimum)
+ {
+ _minimum = value;
+ if (_value < _minimum) _value = _minimum;
+ dispatchEvent(new Event("minimumChange"));
+ }
+ }
+
+ private var _snapInterval:Number = 1;
+
+ /**
+ * The modulus value for the range.
+ *
+ * @copy org.apache.royale.core.IRangeModel#snapInterval
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get snapInterval():Number
+ {
+ return _snapInterval;
+ }
+
+ public function set snapInterval(value:Number):void
+ {
+ if (value != _snapInterval)
+ {
+ _snapInterval = value;
+ dispatchEvent(new Event("snapIntervalChange"));
+ }
+ if(("" + value).indexOf(".") == -1)
+ {
+ _decimals = 0;
+ }
+ else
+ {
+ var str:String = "" + value;
+ _decimals = str.substr(str.indexOf(".")+1).length;
+ }
+ }
+ private var _decimals:int;
+
+ private var _stepSize:Number = 1;
+
+ /**
+ * The amount to adjust the value either up or down toward the edge of the range.
+ *
+ * @copy org.apache.royale.core.IRangeModel#stepSize
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get stepSize():Number
+ {
+ return _stepSize;
+ }
+
+ public function set stepSize(value:Number):void
+ {
+ if (value != _stepSize)
+ {
+ _stepSize = value;
+ dispatchEvent(new Event("stepSizeChange"));
+ }
+ }
+
+ private var _value:Number = 0;
+
+ /**
+ * The current value of the range, between the minimum and maximum values. Attempting
+ * to set the value outside of the minimum-maximum range changes the value to still be
+ * within the range. Note that the value is adjusted by the stepSize.
+ *
+ * @copy org.apache.royale.core.IRangeModel#value
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get value():Number
+ {
+ return _value;
+ }
+
+ public function set value(newValue:Number):void
+ {
+ if (newValue != _value)
+ {
+ // value must lie within the boundaries of minimum & maximum
+ // and be on a step interval, so the value is adjusted to
+ // what is coming in.
+ newValue = Math.max(minimum, newValue);
+ newValue = Math.min(maximum, newValue);
+ var oldValue:Number = _value;
+ _value = snap(newValue);
+ dispatchEvent(ValueChangeEvent.createUpdateEvent(_strand, "value", oldValue, _value));
+ }
+ }
+
+ /**
+ * @private
+ */
+ protected function snap(value:Number):Number
+ {
+ var si:Number = snapInterval;
+ var n:Number = Math.round((value - minimum) / si) * si + minimum;
+ if(_decimals)
+ n = Number(n.toFixed(_decimals));
+ if (value > 0)
+ {
+ if (value - n < n + si - value)
+ return n;
+ return n + si;
+
+ }
+ if (value - n > n + si - value)
+ return n + si;
+ return n;
+ }
+
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/ScrollBarModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/ScrollBarModel.as
new file mode 100644
index 0000000..87e9ff7
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/ScrollBarModel.as
@@ -0,0 +1,98 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.models
+{
+ import org.apache.royale.jewel.beads.models.RangeModel;
+ import org.apache.royale.core.IScrollBarModel;
+ import org.apache.royale.events.Event;
+
+ /**
+ * The ScrollBarModel class bead extends the org.apache.royale.html.beads.models.RangeModel
+ * and adds page size and page step sizes.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class ScrollBarModel extends RangeModel implements IScrollBarModel
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ScrollBarModel()
+ {
+ }
+
+ private var _pageSize:Number;
+
+ /**
+ * The amount represented by the thumb control of the org.apache.royale.html.ScrollBar.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get pageSize():Number
+ {
+ return _pageSize;
+ }
+
+ public function set pageSize(value:Number):void
+ {
+ if (value != _pageSize)
+ {
+ _pageSize = value;
+ dispatchEvent(new Event("pageSizeChange"));
+ }
+ }
+
+ private var _pageStepSize:Number;
+
+ /**
+ * The amount to adjust the org.apache.royale.html.ScrollBar if the scroll bar's
+ * track area is selected.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get pageStepSize():Number
+ {
+ return _pageStepSize;
+ }
+
+ public function set pageStepSize(value:Number):void
+ {
+ if (value != _pageStepSize)
+ {
+ _pageStepSize = value;
+ dispatchEvent(new Event("pageStepSizeChange"));
+ }
+ }
+
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/SliderRangeModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/SliderRangeModel.as
index 0d227b4..af2dc82 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/SliderRangeModel.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/SliderRangeModel.as
@@ -32,7 +32,7 @@
* It do not calculate any values for slider - just holds it.
*
* @langversion 3.0
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public class SliderRangeModel extends EventDispatcher implements IBead, IRangeModel
{
@@ -42,7 +42,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function SliderRangeModel()
{
@@ -57,7 +57,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function set strand(value:IStrand):void
{
@@ -74,7 +74,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function get maximum():Number
{
@@ -100,7 +100,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function get minimum():Number
{
@@ -126,7 +126,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function get snapInterval():Number
{
@@ -152,7 +152,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function get stepSize():Number
{
@@ -180,7 +180,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function get value():Number
{
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/TableModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/TableModel.as
new file mode 100644
index 0000000..3227d80
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/TableModel.as
@@ -0,0 +1,101 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.models
+{
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.beads.models.ArrayListSelectionModel;
+ import org.apache.royale.jewel.supportClasses.table.TableColumn;
+
+ public class TableModel extends ArrayListSelectionModel
+ {
+ public function TableModel()
+ {
+ super();
+ }
+
+ private var _columns:Array;
+ public function get columns():Array
+ {
+ return _columns;
+ }
+ public function set columns(value:Array):void
+ {
+ _columns = value;
+ }
+
+ private var _selectedItemProperty:Object;
+
+ /**
+ * @copy org.apache.royale.core.ISelectionModel#selectedItem
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get selectedItemProperty():Object
+ {
+ return _selectedItemProperty;
+ }
+
+ /**
+ * @private
+ */
+ public function set selectedItemProperty(value:Object):void
+ {
+ if(labelField == null || labelField == "") return;
+ if (value == _selectedItemProperty) return;
+
+ _selectedItemProperty = value;
+ var n:int = dataProvider.length;
+ for (var i:int = 0; i < n; i++)
+ {
+ if (dataProvider.getItemAt(i) == selectedItem && dataProvider.getItemAt(i)[labelField] == value)
+ {
+ selectedIndex = i;
+ break;
+ }
+ }
+ dispatchEvent(new Event("selectedItemPropertyChanged"));
+ }
+
+ /**
+ * @private
+ */
+ public function getIndexForSelectedItemProperty():Number
+ {
+ if (!selectedItemProperty) return -1;
+
+ var index:int = 0;
+ for(var i:int=0; i < dataProvider.length; i++) {
+ for(var j:int=0; j < _columns.length; j++) {
+ var column:TableColumn = _columns[j] as TableColumn;
+ var test:Object = dataProvider.getItemAt(i)[column.dataField] as Object;
+
+ if (dataProvider.getItemAt(i) == selectedItem && labelField == column.dataField)
+ {
+ return index;
+ }
+ index++;
+ }
+ }
+ return -1;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/TextModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/TextModel.as
new file mode 100644
index 0000000..700adfb
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/TextModel.as
@@ -0,0 +1,127 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.models
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.ITextModel;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.EventDispatcher;
+ import org.apache.royale.events.IEventDispatcher;
+
+ /**
+ * The TextModel class is most basic data model for a
+ * component that displays text. All Royale components
+ * that display text should also support HTML, although
+ * the Flash Player implementations may only support
+ * a subset of HTML.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class TextModel extends EventDispatcher implements IBead, ITextModel
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function TextModel()
+ {
+ }
+
+ 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.4
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ }
+
+ private var _text:String;
+
+ [Bindable("textChange")]
+ /**
+ * @copy org.apache.royale.core.ITextModel#text
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get text():String
+ {
+ return _text;
+ }
+
+ /**
+ * @private
+ */
+ public function set text(value:String):void
+ {
+ if (value == null)
+ value = "";
+ if (value != _text)
+ {
+ _text = value;
+ dispatchEvent(new Event("textChange"));
+ }
+ }
+
+ private var _html:String;
+
+ [Bindable("htmlChange")]
+ /**
+ * @copy org.apache.royale.core.ITextModel#html
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get html():String
+ {
+ return _html;
+ }
+
+ /**
+ * @private
+ */
+ public function set html(value:String):void
+ {
+ if (value != _html)
+ {
+ _html = value;
+ dispatchEvent(new Event("htmlChange"));
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/TitleBarModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/TitleBarModel.as
new file mode 100644
index 0000000..94efcec
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/TitleBarModel.as
@@ -0,0 +1,136 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.models
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.ITitleBarModel;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.EventDispatcher;
+
+ /**
+ * The TitleBarModel class bead holds the values for the org.apache.royale.html.TitleBar's
+ * properties.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class TitleBarModel extends EventDispatcher implements IBead, ITitleBarModel
+ {
+ public function TitleBarModel()
+ {
+ super();
+ }
+
+ 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.4
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ }
+
+ private var _title:String;
+
+ [Bindable("titleChange")]
+ /**
+ * The string title for the org.apache.royale.html.TitleBar.
+ *
+ * @copy org.apache.royale.core.ITitleBarModel#title
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get title():String
+ {
+ return _title;
+ }
+
+ public function set title(value:String):void
+ {
+ if( value != _title ) {
+ _title = value;
+ dispatchEvent( new Event('titleChange') );
+ }
+ }
+
+ private var _htmlTitle:String;
+
+ [Bindable("htmlTitleChange")]
+ /**
+ * The HTML string for the title.
+ *
+ * @copy org.apache.royale.core.ITitleBarModel#htmlTitle
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get htmlTitle():String
+ {
+ return _htmlTitle;
+ }
+
+ public function set htmlTitle(value:String):void
+ {
+ if( value != _htmlTitle ) {
+ _htmlTitle = value;
+ dispatchEvent( new Event('htmlTitleChange') );
+ }
+ }
+
+ private var _showCloseButton:Boolean = false;
+
+ [Bindable("showCloseButtonChange")]
+ /**
+ * Whether or not to show a close button.
+ *
+ * @copy org.apache.royale.core.ITitleBarModel#showCloseButton
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get showCloseButton():Boolean
+ {
+ return _showCloseButton;
+ }
+
+ public function set showCloseButton(value:Boolean):void
+ {
+ if( value != _showCloseButton ) {
+ _showCloseButton = value;
+ dispatchEvent( new Event('showCloseButtonChange') );
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/CheckBoxValidator.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/CheckBoxValidator.as
new file mode 100644
index 0000000..457f1bb
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/CheckBoxValidator.as
@@ -0,0 +1,95 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.validators
+{
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.CheckBox;
+
+ /**
+ * The CheckBoxValidator class is a specialty bead that can be used with
+ * Group control.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class CheckBoxValidator extends Validator
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function CheckBoxValidator()
+ {
+ super()
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ COMPILE::JS
+ {
+ hostComponent.addEventListener(Event.CHANGE, validate, false);
+ }
+ }
+
+
+ /**
+ * Override of the base class validate() method to validate if selected.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ override public function validate(event:Event = null):Boolean {
+ if (super.validate(event)) {
+ var selectedCount:int = 0;
+ var i:int = hostComponent.numElements;
+ while(--i > -1) {
+ var checkBox:CheckBox = hostComponent.getElementAt(i) as CheckBox;
+ if (!checkBox) continue;
+ if (checkBox.selected)
+ selectedCount++;
+ }
+ if (selectedCount < required) {
+ createErrorTip(requiredFieldError);
+ } else {
+ destroyErrorTip();
+ }
+ }
+ return !isError;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/FormValidator.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/FormValidator.as
new file mode 100644
index 0000000..4173124
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/FormValidator.as
@@ -0,0 +1,153 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.validators
+{
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.jewel.Group;
+ import org.apache.royale.core.IChild;
+
+ /**
+ * The FormValidator class is a specialty bead that can be used with
+ * form control.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class FormValidator extends Validator
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function FormValidator()
+ {
+ super();
+ super.requiredFieldError = null;
+ }
+
+ private var _trigger:IEventDispatcher;
+
+ public function get trigger():IEventDispatcher
+ {
+ return _trigger;
+ }
+
+ /**
+ * Specifies the component generating the event that triggers the validator.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function set trigger(value:IEventDispatcher):void
+ {
+ if (_triggerEvent) {
+ if (_trigger)
+ _trigger.removeEventListener(_triggerEvent, validate);
+
+ if (value)
+ value.addEventListener(_triggerEvent, validate);
+ }
+ _trigger = value;
+ }
+ private var _triggerEvent:String;
+
+ public function get triggerEvent():String
+ {
+ return _triggerEvent;
+ }
+ /**
+ * Specifies the event that triggers the validation.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function set triggerEvent(value:String):void
+ {
+ if (_trigger) {
+ if (_triggerEvent)
+ _trigger.removeEventListener(_triggerEvent, validate);
+ if (value)
+ _trigger.addEventListener(value, validate);
+ }
+ _triggerEvent = value;
+ }
+
+ private var _isError:Boolean;
+
+ /**
+ * Contains true if any validator in the form generated a validation failure.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ override public function get isError():Boolean {
+ return _isError;
+ }
+
+ /**
+ * Override of the base class validate() method to call all validators in the form.
+ * dispatch invalid/valid event when validation fails/succeeds.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ override public function validate(event:Event = null):Boolean {
+ _isError = false;
+ validateAll(hostComponent as Group);
+ if (isError) {
+ hostComponent.dispatchEvent(new Event("invalid"));
+ } else {
+ hostComponent.dispatchEvent(new Event("valid"));
+ }
+
+ return !isError;
+ }
+
+ protected function validateAll(group:Group):void {
+ for(var i:int=0; i < group.numElements; i++) {
+ var child:UIBase = group.getElementAt(i) as UIBase;
+ var validator:Validator = child.getBeadByType(Validator) as Validator;
+ if (validator && !(validator is FormValidator)) {
+ if(!validator.validate()) {
+ _isError = true;
+ }
+ }
+ if (child is Group) {
+ validateAll(child as Group);
+ }
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/RadioButtonValidator.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/RadioButtonValidator.as
new file mode 100644
index 0000000..3e8f660
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/RadioButtonValidator.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.beads.validators
+{
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.RadioButton;
+
+ /**
+ * The RadioButtonValidator class is a specialty bead that can be used with
+ * Group control.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class RadioButtonValidator extends Validator
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function RadioButtonValidator()
+ {
+ super();
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ COMPILE::JS
+ {
+ hostComponent.addEventListener(Event.CHANGE, validate, false);
+ }
+ }
+
+
+ private var _groupName:String;
+
+ public function get groupName():String
+ {
+ return _groupName;
+ }
+ /**
+ * Specifies the radio button group to be validated.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function set groupName(value:String):void
+ {
+ _groupName = value;
+ }
+
+ /**
+ * Override of the base class validate() method to validate if selected.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ override public function validate(event:Event = null):Boolean {
+ if (super.validate(event)) {
+ var selectedCount:int = 0;
+ var i:int = hostComponent.numElements;
+ while(--i > -1) {
+ var rb:RadioButton = hostComponent.getElementAt(i) as RadioButton;
+ if (!rb) continue;
+ if (groupName && rb.groupName != groupName) continue;
+ if (rb.selected) {
+ selectedCount++;
+ break;
+ }
+ }
+ if (selectedCount < 1) {
+ createErrorTip(requiredFieldError);
+ } else {
+ destroyErrorTip();
+ }
+ }
+ return !isError;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/StringValidator.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/StringValidator.as
new file mode 100644
index 0000000..eeacdb1
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/StringValidator.as
@@ -0,0 +1,151 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.validators
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.supportClasses.textinput.TextInputBase;
+ import org.apache.royale.utils.StringUtil;
+
+ /**
+ * The StringValidator class is a specialty bead that can be used with
+ * TextInput control.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class StringValidator extends Validator implements IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function StringValidator()
+ {
+ super();
+ }
+
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ COMPILE::JS
+ {
+ hostComponent.addEventListener(Event.CHANGE, validate, false);
+ updateHost();
+ }
+ }
+
+ private var _autoTrim:Boolean;
+
+ public function get autoTrim():Boolean
+ {
+ return _autoTrim;
+ }
+ /**
+ * Auto trim the entered text before validation
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function set autoTrim(value:Boolean):void
+ {
+ _autoTrim = value;
+ }
+
+ private var _maxLength:int;
+
+ public function get maxLength():int
+ {
+ return _maxLength;
+ }
+ /**
+ * Maximum length for a valid String.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function set maxLength(value:int):void
+ {
+ _maxLength = value;
+ COMPILE::JS
+ {
+ updateHost();
+ }
+ }
+
+ /**
+ * Override of the base class validate() method to validate a String.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ override public function validate(event:Event = null):Boolean {
+ var txt:TextInputBase = hostComponent as TextInputBase;
+ var str:String = txt.text;
+
+ if (autoTrim) {
+ str = StringUtil.trim(str);
+ if (str != txt.text) txt.text = str;
+ }
+
+ if (super.validate(event)) {
+ if (str.length < required) {
+ createErrorTip(requiredFieldError);
+ } else {
+ destroyErrorTip();
+ }
+ }
+ return !isError;
+ }
+
+ COMPILE::JS
+ private function updateHost():void
+ {
+ if (hostComponent)
+ {
+ (_maxLength > 0) ?
+ hostComponent.element.setAttribute('maxlength', _maxLength) :
+ hostComponent.element.removeAttribute('maxlength');
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/Validator.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/Validator.as
new file mode 100644
index 0000000..3cc0154
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/validators/Validator.as
@@ -0,0 +1,317 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.validators
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IPopUpHost;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.geom.Point;
+ import org.apache.royale.jewel.ErrorTip;
+ import org.apache.royale.utils.PointUtils;
+ import org.apache.royale.utils.UIUtils;
+
+ /**
+ * The Validator class is the base class for all validators.
+ * This class implements the ability for create/destroy error tips,
+ * user should set custom validateFunction or use sub class for validation.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class Validator implements IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function Validator()
+ {
+ }
+
+ public static const TOP:int = 10000;
+ public static const BOTTOM:int = 10001;
+ public static const LEFT:int = 10002;
+ public static const RIGHT:int = 10003;
+ public static const MIDDLE:int = 10004;
+
+ private var _errorTip:ErrorTip;
+ private var _host:IPopUpHost;
+ private var _xPos:int = LEFT;
+ private var _yPos:int = TOP;
+
+ protected var hostComponent:UIBase;
+
+ COMPILE::JS
+ protected var hostClassList:DOMTokenList;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ public function set strand(value:IStrand):void
+ {
+ COMPILE::JS
+ {
+ hostComponent = value as UIBase;
+ hostClassList = hostComponent.positioner.classList;
+ }
+ }
+ /**
+ * Contains true if the field generated a validation failure.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get isError():Boolean {
+ return (_errorTip != null);
+ }
+
+ /**
+ * A function that determines the logic in this validator
+ * the method signature has the following form:
+ * validateFunction(item:Object):String
+ * Where item is the hostComponent object
+ * and return the error text, if valid return null
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ private var _validateFunction:Function;
+
+ public function get validateFunction():Function{
+ return _validateFunction;
+ }
+ /**
+ * set your custom validation logic
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function set validateFunction(func:Function):void{
+ _validateFunction = func;
+ }
+
+ private var _required:int;
+
+ public function get required():int {
+ return _required;
+ }
+
+ /**
+ * specifies that at least required quantity causes a validation error.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function set required(value:int):void {
+ _required = value;
+ }
+
+ private var _requiredFieldError:String = "This field is required.";
+ /**
+ * The string to use as the errorTip.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get requiredFieldError():String
+ {
+ return _requiredFieldError;
+ }
+ public function set requiredFieldError(value:String):void
+ {
+ _requiredFieldError = value;
+ }
+
+ /**
+ * Performs validation and return the result.
+ * When result is false(invalid), errorTip appears on the control.
+ * And true(valid), the errorTip will disappear.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function validate(event:Event = null):Boolean {
+ if (validateFunction) {
+ var errorText:String = validateFunction(hostComponent);
+
+ if (errorText) {
+ createErrorTip(errorText);
+ } else {
+ destroyErrorTip();
+ }
+
+ return !isError;
+ }
+ return true;
+ }
+
+ /**
+ * Sets the errortip y relative position to one of
+ * LEFT, MIDDLE or RIGHT.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function set xPos(pos:int):void
+ {
+ _xPos = pos;
+ }
+
+ /**
+ * Sets the errortip y relative position to one of
+ * TOP, MIDDLE or BOTTOM.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function set yPos(pos:int):void
+ {
+ _yPos = pos;
+ }
+
+
+ /**
+ * Create an errorTip that floats a error text over a control
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected function createErrorTip(errorText:String):void
+ {
+ if (!errorText)
+ return;
+
+
+ if (_errorTip == null) {
+ _errorTip = new ErrorTip();
+
+ _host = UIUtils.findPopUpHost(hostComponent);
+ _host.popUpParent.addElement(_errorTip, false);
+ }
+
+ _errorTip.text = errorText;
+
+ var pt:Point = determinePosition();
+ _errorTip.x = pt.x;
+ _errorTip.y = pt.y;
+
+ COMPILE::JS
+ {
+ if (!hostClassList.contains("errorBorder"))
+ hostClassList.add("errorBorder");
+ }
+ }
+
+
+ /**
+ * Determines the position of the errorTip.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected function determinePosition():Point
+ {
+ var xFactor:Number = 1;
+ var yFactor:Number = 1;
+ var hp:Point = PointUtils.localToGlobal(new Point(0,0), _host);
+ var pt:Point;
+
+ if (_xPos == LEFT) {
+ xFactor = Number.POSITIVE_INFINITY;
+ }
+ else if (_xPos == MIDDLE) {
+ xFactor = 2;
+ }
+ else if (_xPos == RIGHT) {
+ xFactor = 1;
+ }
+ if (_yPos == TOP) {
+ yFactor = Number.POSITIVE_INFINITY;
+ }
+ else if (_yPos == MIDDLE) {
+ yFactor = 2;
+ }
+ else if (_yPos == BOTTOM) {
+ yFactor = 1;
+ }
+
+ pt = new Point(hostComponent.width/xFactor - hp.x, hostComponent.height/yFactor - hp.y);
+ pt = PointUtils.localToGlobal(pt, hostComponent);
+
+ return pt;
+ }
+
+ /**
+ * Destroy the created errorTip
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected function destroyErrorTip():void
+ {
+ if (_errorTip) {
+ _host.popUpParent.removeElement(_errorTip);
+
+ _errorTip = null;
+
+ COMPILE::JS
+ {
+ if (hostClassList.contains("errorBorder"))
+ hostClassList.remove("errorBorder");
+ }
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertTitleBarView.mxml b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertTitleBarView.mxml
index 46dcf28..93831d7 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertTitleBarView.mxml
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertTitleBarView.mxml
@@ -23,7 +23,7 @@
@langversion 3.0
@playerversion Flash 10.2
@playerversion AIR 2.6
- @productversion Royale 0.9.3
+ @productversion Royale 0.9.4
-->
<js:MXMLBeadView xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/royale/basic"
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
index cb3133c..e58f6f5 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
@@ -18,11 +18,13 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.views
{
+ import org.apache.royale.html.beads.GroupView;
import org.apache.royale.core.IAlertModel;
import org.apache.royale.core.IBead;
import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
import org.apache.royale.core.IParent;
import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IBeadLayout;
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.UIBase;
import org.apache.royale.core.layout.EdgeData;
@@ -30,16 +32,15 @@
import org.apache.royale.events.Event;
import org.apache.royale.events.IEventDispatcher;
import org.apache.royale.events.MouseEvent;
- import org.apache.royale.html.Group;
- import org.apache.royale.html.beads.GroupView;
+ import org.apache.royale.jewel.Group;
import org.apache.royale.jewel.Alert;
import org.apache.royale.jewel.Label;
- import org.apache.royale.jewel.TextButton;
+ import org.apache.royale.jewel.Button;
import org.apache.royale.jewel.TitleBar;
import org.apache.royale.jewel.ControlBar;
- import org.apache.royale.jewel.beads.layouts.HorizontalLayoutSpaceBetween;
import org.apache.royale.jewel.beads.views.AlertTitleBarView;
-
+ import org.apache.royale.jewel.beads.layouts.HorizontalLayout;
+
COMPILE::SWF
{
import org.apache.royale.html.beads.IBackgroundBead;
@@ -57,7 +58,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public class AlertView extends GroupView
{
@@ -67,7 +68,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function AlertView()
{
@@ -75,15 +76,45 @@
protected var alertModel:IAlertModel;
- protected var titleBar:TitleBar;
- protected var content:Group;
- protected var label:Label;
- protected var controlBar:UIBase;
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public var titleBar:TitleBar;
- protected var okButton:TextButton;
- protected var cancelButton:TextButton;
- protected var yesButton:TextButton;
- protected var noButton:TextButton;
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public var content:Group;
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public var label:Label;
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public var controlBar:UIBase;
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public var okButton:Button;
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public var cancelButton:Button;
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public var yesButton:Button;
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public var noButton:Button;
/**
* @copy org.apache.royale.core.IBead#strand
@@ -91,7 +122,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
override public function set strand(value:IStrand):void
{
@@ -126,14 +157,15 @@
// TitleBar
titleBar = new TitleBar();
- titleBar.addBead(new HorizontalLayoutSpaceBetween());
titleBar.addBead(new AlertTitleBarView());
titleBar.title = alertModel.title;
IParent(_strand).addElement(titleBar);
-
+
// Text
content = new Group();
+ content.typeNames = "content";
label = new Label();
+ label.multiline = true;
label.text = alertModel.message;
content.addElement(label);
IParent(_strand).addElement(content);
@@ -142,6 +174,10 @@
createButtons();
IParent(_strand).addElement(controlBar);
+ var layout:HorizontalLayout = controlBar.getBeadByType(IBeadLayout) as HorizontalLayout;
+ layout.itemsHorizontalAlign = "itemsRight";
+ layout.gap = 2;
+
COMPILE::SWF
{
refreshSize();
@@ -158,45 +194,52 @@
COMPILE::JS
{
controlBar = new ControlBar();
- //controlBar.addBead(new HorizontalLayoutSpaceBetween());
+
+ // var controlBarLayout:HorizontalLayout = new HorizontalLayout();
+ // controlBar.addBead(controlBarLayout);
+ // controlBarLayout.itemsHorizontalAlign = "itemsSpaceBetween";
}
var flags:uint = alertModel.flags;
if( flags & Alert.OK )
{
- okButton = new TextButton();
- okButton.primary = true;
+ okButton = new Button();
+ okButton.width = 100;
+ okButton.emphasis = "primary";
okButton.text = alertModel.okLabel;
- okButton.addEventListener("click", handleOK);
+ okButton.addEventListener(MouseEvent.CLICK, handleOK);
controlBar.addElement(okButton);
}
if( flags & Alert.CANCEL )
{
- cancelButton = new TextButton();
+ cancelButton = new Button();
+ cancelButton.width = 100;
cancelButton.text = alertModel.cancelLabel;
- cancelButton.addEventListener("click", handleCancel);
+ cancelButton.addEventListener(MouseEvent.CLICK, handleCancel);
controlBar.addElement(cancelButton);
}
if( flags & Alert.YES )
{
- yesButton = new TextButton();
- yesButton.primary = true;
+ yesButton = new Button();
+ yesButton.width = 100;
+ yesButton.emphasis = "primary";
yesButton.text = alertModel.yesLabel;
- yesButton.addEventListener("click", handleYes);
+ yesButton.addEventListener(MouseEvent.CLICK, handleYes);
controlBar.addElement(yesButton);
}
if( flags & Alert.NO )
{
- noButton = new TextButton();
+ noButton = new Button();
+ noButton.width = 100;
noButton.text = alertModel.noLabel;
- noButton.addEventListener("click", handleNo);
+ noButton.addEventListener(MouseEvent.CLICK, handleNo);
controlBar.addElement(noButton);
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/CheckBoxView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/CheckBoxView.as
index 6a0424c..13ca6ea 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/CheckBoxView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/CheckBoxView.as
@@ -46,7 +46,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public class CheckBoxView extends BeadViewBase implements IBeadView
{
@@ -56,7 +56,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function CheckBoxView()
{
@@ -103,7 +103,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
override public function set strand(value:IStrand):void
{
@@ -145,7 +145,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get text():String
{
@@ -173,7 +173,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get html():String
{
@@ -213,7 +213,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get selected():Boolean
{
@@ -252,7 +252,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
protected function layoutControl() : void
{
@@ -280,7 +280,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
protected function drawCheckBox(icon:Shape) : void
{
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as
new file mode 100644
index 0000000..29b4c5c
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as
@@ -0,0 +1,308 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.views
+{
+ COMPILE::SWF
+ {
+ import flash.utils.setTimeout;
+ }
+ import org.apache.royale.core.BeadViewBase;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.StyledUIBase;
+ import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.jewel.TextInput;
+ import org.apache.royale.jewel.Button;
+ import org.apache.royale.jewel.List;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.core.IComboBoxModel;
+ import org.apache.royale.utils.UIUtils;
+ import org.apache.royale.utils.PointUtils;
+ import org.apache.royale.core.IPopUpHost;
+ import org.apache.royale.geom.Point;
+ import org.apache.royale.jewel.beads.controls.combobox.IComboBoxView;
+ import org.apache.royale.jewel.supportClasses.util.getLabelFromData;
+ import org.apache.royale.jewel.supportClasses.combobox.ComboBoxListDataGroup;
+ import org.apache.royale.jewel.supportClasses.ResponsiveSizes;
+
+ /**
+ * The ComboBoxView class creates the visual elements of the org.apache.royale.jewel.ComboBox
+ * component. The job of the view bead is to put together the parts of the ComboBox such as the TextInput
+ * control and org.apache.royale.jewel.Button to trigger the pop-up.
+ *
+ * @viewbead
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class ComboBoxView extends BeadViewBase implements IComboBoxView
+ {
+ public function ComboBoxView()
+ {
+ super();
+ }
+
+ private var _textinput:TextInput;
+ /**
+ * The TextInput component of the ComboBox.
+ *
+ * @copy org.apache.royale.html.beads.IComboBoxView#text
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get textinput():Object
+ {
+ return _textinput;
+ }
+
+ private var _button:Button;
+ /**
+ * The Button component of the ComboBox.
+ *
+ * @copy org.apache.royale.html.beads.IComboBoxView#text
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get button():Object
+ {
+ return _button;
+ }
+
+ private var _list:List;
+
+ /**
+ * The pop-up list component of the ComboBox.
+ *
+ * @copy org.apache.royale.html.beads.IComboBoxView#text
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get popup():Object
+ {
+ return _list;
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ * @royaleignorecoercion org.apache.royale.core.StyledUIBase
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ var host:StyledUIBase = value as StyledUIBase;
+
+ _textinput = new TextInput();
+
+ _button = new Button();
+ _button.text = '\u25BC';
+
+ host.addElement(_textinput);
+ host.addElement(_button);
+
+ var model:IComboBoxModel = _strand.getBeadByType(IComboBoxModel) as IComboBoxModel;
+ model.addEventListener("selectedIndexChanged", handleItemChange);
+ model.addEventListener("selectedItemChanged", handleItemChange);
+
+ IEventDispatcher(_strand).addEventListener("sizeChanged", handleSizeChange);
+
+ // set initial value and positions using default sizes
+ itemChangeAction();
+ sizeChangeAction();
+ }
+
+ /**
+ * Returns whether or not the pop-up is visible.
+ *
+ * @copy org.apache.royale.html.beads.IComboBoxView#text
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get popUpVisible():Boolean
+ {
+ return _list == null ? false : true;
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IComboBoxModel
+ * @royaleignorecoercion org.apache.royale.core.IUIBase
+ */
+ public function set popUpVisible(value:Boolean):void
+ {
+ if (value) {
+ var popUpClass:Class = ValuesManager.valuesImpl.getValue(_strand, "iPopUp") as Class;
+ _list = new popUpClass() as List;
+
+ var model:IComboBoxModel = _strand.getBeadByType(IComboBoxModel) as IComboBoxModel;
+ _list.model = model;
+
+ var popupHost:IPopUpHost = UIUtils.findPopUpHost(_strand as IUIBase);
+ popupHost.popUpParent.addElement(_list);
+
+ // popup is ComboBoxList that fills 100% of browser window-> We want ComboBoxListDataGroup inside to adjust height
+ dataGroup = popup.view.contentView.view.contentView;
+ // dataGroup = (popup.getBeadByType(ListView) as ListView).dataGroup as ComboBoxListDataGroup;
+ dataGroup.height = 250;
+
+ setTimeout(prepareForPopUp, 300);
+
+ COMPILE::JS
+ {
+ window.addEventListener('resize', autoResizeHandler, false);
+ }
+
+ autoResizeHandler();
+ }
+ else if(_list != null) {
+ UIUtils.removePopUp(_list);
+ COMPILE::JS
+ {
+ document.body.classList.remove("viewport");
+ window.removeEventListener('resize', autoResizeHandler, false);
+ }
+ _list = null;
+ }
+ }
+
+ private function prepareForPopUp():void
+ {
+ COMPILE::JS
+ {
+ _list.element.classList.add("open");
+ //avoid scroll in html
+ document.body.classList.add("viewport");
+ }
+ }
+
+ /**
+ * @private
+ */
+ protected function handleSizeChange(event:Event):void
+ {
+ sizeChangeAction();
+ }
+
+ /**
+ * @private
+ */
+ protected function handleItemChange(event:Event):void
+ {
+ itemChangeAction();
+
+ IEventDispatcher(_strand).dispatchEvent(new Event(Event.CHANGE));
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.core.IComboBoxModel
+ */
+ protected function itemChangeAction():void
+ {
+ var model:IComboBoxModel = _strand.getBeadByType(IComboBoxModel) as IComboBoxModel;
+ _textinput.text = getLabelFromData(model, model.selectedItem);
+ }
+
+ /**
+ * reposition list dataGroup in desktop and widescreen screens
+ *
+ * @private
+ * @royaleignorecoercion org.apache.royale.core.StyledUIBase
+ */
+ protected function sizeChangeAction():void
+ {
+ //var host:StyledUIBase = StyledUIBase(_strand);
+
+ // input.x = 0;
+ // input.y = 0;
+ // if (host.isWidthSizedToContent()) {
+ // input.width = 100;
+ // } else {
+ // input.width = host.width - 20;
+ // }
+
+ // button.x = input.width;
+ // button.y = 0;
+ // button.width = 20;
+ // button.height = input.height;
+
+ // COMPILE::JS {
+ // input.element.style.position = "absolute";
+ // button.element.style.position = "absolute";
+ // }
+
+ // if (host.isHeightSizedToContent()) {
+ // host.height = input.height;
+ // }
+ // if (host.isWidthSizedToContent()) {
+ // host.width = input.width + button.width;
+ // }
+ }
+
+ private var dataGroup:ComboBoxListDataGroup;
+ /**
+ * When set to "auto" this resize handler monitors the width of the app window
+ * and switch between fixed and float modes.
+ *
+ * Note:This could be done with media queries, but since it handles open/close
+ * maybe this is the right way
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ private function autoResizeHandler(event:Event = null):void
+ {
+ COMPILE::JS
+ {
+ var outerWidth:Number = window.outerWidth;
+
+ // Desktop width size
+ if(outerWidth > ResponsiveSizes.DESKTOP_BREAKPOINT)
+ {
+ var origin:Point = new Point(0, button.y+button.height);
+ var relocated:Point = PointUtils.localToGlobal(origin,_strand);
+ // dataGroup.x = relocated.x;
+ // dataGroup.y = relocated.y;
+ dataGroup.positioner.style["left"] = relocated.x + "px";
+ dataGroup.positioner.style["top"] = relocated.y + "px";
+ }
+ else
+ {
+ dataGroup.positioner.style["left"] = "50%";
+ dataGroup.positioner.style["top"] = "calc(100% - 10px)";
+ }
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateChooserView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateChooserView.as
new file mode 100644
index 0000000..2f0eda8
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateChooserView.as
@@ -0,0 +1,289 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.views
+{
+ import org.apache.royale.collections.ArrayList;
+ import org.apache.royale.core.ClassFactory;
+ import org.apache.royale.core.IBeadModel;
+ import org.apache.royale.core.IBeadView;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.html.beads.GroupView;
+ import org.apache.royale.jewel.Button;
+ import org.apache.royale.jewel.beads.models.DateChooserModel;
+ import org.apache.royale.jewel.beads.views.TableView;
+ import org.apache.royale.jewel.itemRenderers.DateItemRenderer;
+ import org.apache.royale.jewel.supportClasses.datechooser.DateChooserTable;
+ import org.apache.royale.jewel.supportClasses.table.TableColumn;
+ import org.apache.royale.jewel.supportClasses.table.TableHeaderCell;
+ import org.apache.royale.jewel.supportClasses.table.TableRow;
+ import org.apache.royale.utils.loadBeadFromValuesManager;
+ // import org.apache.royale.jewel.beads.controllers.TableCellSelectionMouseController;
+ // import org.apache.royale.jewel.beads.controllers.DateChooserTableCellSelectionMouseController;
+
+ /**
+ * The DateChooserView class is a view bead for the DateChooser.
+ *
+ * This class creates the elements for the DateChooser: the buttons to move between
+ * months, the labels for the days of the week, and the buttons for each day
+ * of the month.
+ *
+ * @viewbead
+ */
+ public class DateChooserView extends GroupView implements IBeadView
+ {
+ /**
+ * constructor
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function DateChooserView()
+ {
+ super();
+ }
+
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ model = loadBeadFromValuesManager(IBeadModel, "iBeadModel", _strand) as DateChooserModel;
+
+ model.addEventListener("firstDayOfWeekChanged", handleModelChange);
+ model.addEventListener("dayNamesChanged", handleModelChange);
+ model.addEventListener("displayedMonthChanged", handleModelChange);
+ model.addEventListener("displayedYearChanged", handleModelChange);
+
+ createChildren();
+ updateDisplay();
+ }
+
+ private var model:DateChooserModel;
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ private function getHost():UIBase
+ {
+ return _strand as UIBase;
+ }
+
+ private var _monthLabel:Button;
+ /**
+ * The button to display month and year
+ * and select from a list of years
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get monthLabel():Button
+ {
+ return _monthLabel;
+ }
+
+ private var _prevMonthButton:Button;
+ /**
+ * The button that causes the previous month to be displayed by the DateChooser.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get prevMonthButton():Button
+ {
+ return _prevMonthButton;
+ }
+
+ private var _nextMonthButton:Button;
+ /**
+ * The button that causes the next month to be displayed by the DateChooser.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get nextMonthButton():Button
+ {
+ return _nextMonthButton;
+ }
+
+ private var _daysTable:DateChooserTable;
+ /**
+ * The DateChooserTable of days to display
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get daysTable():DateChooserTable
+ {
+ return _daysTable;
+ }
+
+ /**
+ * @private
+ */
+ private function createChildren():void
+ {
+ // HEADER BUTTONS
+ _monthLabel = new Button();
+ _monthLabel.className = "monthLabel";
+
+ _prevMonthButton = new Button();
+ _prevMonthButton.text = "<";
+ _prevMonthButton.className = "prevMonthButton";
+
+ _nextMonthButton = new Button();
+ _nextMonthButton.text = ">";
+ _nextMonthButton.className = "nextMonthButton";
+
+ // DAYS
+ createColumns();
+
+ _daysTable = new DateChooserTable();
+ COMPILE::SWF {
+ _daysTable.percentWidth = 100;
+ }
+ getHost().addElement(_daysTable, false);
+ // var controller:TableCellSelectionMouseController = _daysTable.getBeadByType(IBeadController) as TableCellSelectionMouseController;
+ // _daysTable.removeBead(controller);
+ // _daysTable.addBead(new DateChooserTableCellSelectionMouseController());
+
+ IEventDispatcher(_daysTable).dispatchEvent( new Event("itemsCreated") );
+ model.addEventListener("selectedDateChanged", selectionChangeHandler);
+
+ createButtonsRow();
+ }
+
+ private var buttonsRow:TableRow;
+
+ private function createButtonsRow():void
+ {
+ var view:TableView = _daysTable.getBeadByType(IBeadView) as TableView;
+ buttonsRow = new TableRow();
+
+ var tableHeader:TableHeaderCell = new TableHeaderCell();
+ tableHeader.className = "buttonsRow";
+ tableHeader.addElement(_monthLabel);
+ tableHeader.expandColumns = 5;
+ buttonsRow.addElement(tableHeader);
+
+ tableHeader= new TableHeaderCell();
+ tableHeader.className = "buttonsRow";
+ tableHeader.addElement(_prevMonthButton);
+ buttonsRow.addElement(tableHeader);
+
+ tableHeader= new TableHeaderCell();
+ tableHeader.className = "buttonsRow";
+ tableHeader.addElement(_nextMonthButton);
+ buttonsRow.addElement(tableHeader);
+ }
+
+ private var columns:Array;
+ private var dayNamesInit:Boolean;
+
+ public function createColumns():void
+ {
+ if(!dayNamesInit)
+ {
+ columns = [];
+ var dateItemRenderer:ClassFactory = new ClassFactory(DateItemRenderer);
+ for (var i:int = 0; i < 7; i++)
+ {
+ var column:TableColumn = new TableColumn();
+ column.dataField = "d"+i;
+ column.align = "center";
+ column.itemRenderer = dateItemRenderer;
+ columns.push(column);
+ }
+
+ dayNamesInit = true;
+ }
+ }
+
+ // cycle days array for offsetting when change firstDayOfWeek
+ private function cycleArray(array:Array, index:Number, n:Number):Number
+ {
+ return ((index + n) % array.length + array.length) % array.length;
+ }
+ /**
+ * @private
+ */
+ private function updateDisplay():void
+ {
+ _monthLabel.text = model.monthNames[model.displayedMonth] + " " + String(model.displayedYear);
+
+ var len:int = columns.length;
+ for(var index:int = 0; index < len; index++)
+ {
+ var column:TableColumn = columns[index];
+ column.columnLabelAlign = "center";
+ column.label = model.dayNames[cycleArray(model.dayNames, index, model.firstDayOfWeek)];
+ }
+
+ _daysTable.columns = columns;
+
+ var currrentMonth:Array = [];
+ var dayIndex:int = 0;
+ for(var i:int = 0; i < model.days.length/7; i++)
+ {
+ currrentMonth[i] = {};
+ for(var j:int = 0; j < columns.length; j++)
+ {
+ currrentMonth[i]["d"+j] = model.days[dayIndex];
+ dayIndex++;
+ }
+ }
+ _daysTable.dataProvider = new ArrayList(currrentMonth);
+
+ var view:TableView = _daysTable.getBeadByType(IBeadView) as TableView;
+ view.thead.addElementAt(buttonsRow, 0, false);
+
+ _daysTable.selectedIndex = model.getIndexForSelectedDate();
+ }
+
+ /**
+ * @private
+ */
+ private function selectionChangeHandler(event:Event):void
+ {
+ updateDisplay();
+
+ getHost().dispatchEvent(new Event("selectedDateChanged"));
+ getHost().dispatchEvent(new Event(Event.CHANGE));
+ }
+
+ /**
+ * @private
+ */
+ private function handleModelChange(event:Event):void
+ {
+ updateDisplay();
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as
new file mode 100644
index 0000000..a20bd96
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as
@@ -0,0 +1,328 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.views
+{
+ import org.apache.royale.core.BeadViewBase;
+ import org.apache.royale.core.IBeadModel;
+ import org.apache.royale.core.IBeadView;
+ import org.apache.royale.core.IDateChooserModel;
+ import org.apache.royale.core.IFormatBead;
+ import org.apache.royale.core.IPopUpHost;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.jewel.Button;
+ import org.apache.royale.jewel.DateChooser;
+ import org.apache.royale.jewel.TextInput;
+ import org.apache.royale.jewel.beads.controls.datefield.DateFieldMaskedTextInput;
+ import org.apache.royale.jewel.beads.controls.textinput.MaxNumberCharacters;
+ import org.apache.royale.utils.UIUtils;
+ import org.apache.royale.utils.PointUtils;
+ import org.apache.royale.geom.Point;
+ import org.apache.royale.jewel.supportClasses.ResponsiveSizes;
+ import org.apache.royale.jewel.Table;
+ import org.apache.royale.jewel.beads.views.DateChooserView;
+
+ COMPILE::SWF
+ {
+ //import org.apache.royale.jewel.beads.views.TextInputView;
+ import flash.text.TextFieldType;
+ import flash.utils.setTimeout;
+ }
+
+ /**
+ * The DateFieldView class is a bead for DateField that creates the
+ * input and button controls. This class also handles the pop-up
+ * mechanics.
+ *
+ * @viewbead
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class DateFieldView extends BeadViewBase implements IBeadView
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function DateFieldView()
+ {
+ }
+
+ private var _textInput:TextInput;
+ private var _button:Button;
+
+ /**
+ * The TextButton that triggers the display of the DateChooser pop-up.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get menuButton():Button
+ {
+ return _button;
+ }
+
+ /**
+ * The TextInput that displays the date selected.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get textInput():TextInput
+ {
+ return _textInput;
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ protected function getHost():UIBase
+ {
+ return _strand as UIBase;
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ _textInput = new TextInput();
+ _textInput.addBead(new DateFieldMaskedTextInput());
+
+ var maxNumberCharacters:MaxNumberCharacters = new MaxNumberCharacters();
+ maxNumberCharacters.maxlength = 10;
+ _textInput.addBead(maxNumberCharacters);
+
+ getHost().addElement(_textInput);
+
+ _button = new Button();
+ _button.text = "↓";
+ getHost().addElement(_button);
+
+ COMPILE::SWF {
+ _button.x = _textInput.width;
+ _button.y = _textInput.y;
+ //var view:TextInputView = _strand.getBeadByType(IBeadView) as TextInputView;
+ //if(view)
+ // view.textField.type = TextFieldType.DYNAMIC;
+ }
+
+ // COMPILE::JS
+ // {
+ // _textInput.element.setAttribute('readonly', 'true');
+ // }
+
+ getHost().addEventListener("initComplete",handleInitComplete);
+ }
+
+ private function handleInitComplete(event:Event):void
+ {
+ var formatter:IFormatBead = _strand.getBeadByType(IFormatBead) as IFormatBead;
+ formatter.addEventListener("formatChanged",handleFormatChanged);
+
+ var model:IBeadModel = _strand.getBeadByType(IBeadModel) as IBeadModel;
+ IEventDispatcher(model).addEventListener("selectedDateChanged", selectionChangeHandler);
+ }
+
+ private function handlePopUpInitComplete(event:Event):void
+ {
+ getHost().dispatchEvent(new Event("dateChooserInitComplete"));
+ }
+
+ private function handleFormatChanged(event:Event):void
+ {
+ var formatter:IFormatBead = event.target as IFormatBead;
+ _textInput.text = formatter.formattedString;
+ }
+
+ private var _popUp:DateChooser;
+
+ /**
+ * The pop-up component that holds the selection list.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get popUp():DateChooser
+ {
+ return _popUp;
+ }
+
+ private var _popUpVisible:Boolean;
+
+ /**
+ * This property is true if the pop-up selection list is currently visible.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get popUpVisible():Boolean
+ {
+ return _popUpVisible;
+ }
+ private var _showingPopup:Boolean;
+ public function set popUpVisible(value:Boolean):void
+ {
+ // prevent resursive calls
+ // setting _popUp.selectedDate below triggers a change event
+ // which tries to close the popup causing a recursive call.
+ // There might be a better way to resolve this problem, but this works for now...
+ if(_showingPopup)
+ return;
+
+ if (value != _popUpVisible)
+ {
+ _showingPopup = true;
+ _popUpVisible = value;
+ if (value)
+ {
+ if (!_popUp)
+ {
+ _popUp = new DateChooser();
+ }
+
+ _popUp.className = "datechooser-popup";
+ _popUp.addEventListener("initComplete", handlePopUpInitComplete);
+
+ var model:IDateChooserModel = _strand.getBeadByType(IDateChooserModel) as IDateChooserModel;
+ _popUp.selectedDate = model.selectedDate;
+ _popUp.model.dayNames = model.dayNames;
+ _popUp.model.monthNames = model.monthNames;
+ _popUp.model.firstDayOfWeek = model.firstDayOfWeek;
+
+ var host:IPopUpHost = UIUtils.findPopUpHost(getHost()) as IPopUpHost;
+ host.popUpParent.addElement(_popUp);
+
+ // viewBead.popUp is DateChooser that fills 100% of browser window-> We want Table inside
+ daysTable = (popUp.getBeadByType(DateChooserView) as DateChooserView).daysTable;
+
+ // rq = requestAnimationFrame(prepareForPopUp); // not work in Chrome/Firefox, while works in Safari, IE11, setInterval/Timer as well doesn't work right in Firefox
+ setTimeout(prepareForPopUp, 300);
+
+ COMPILE::JS
+ {
+ window.addEventListener('resize', autoResizeHandler, false);
+ }
+
+ autoResizeHandler();
+ }
+ else
+ {
+ UIUtils.removePopUp(_popUp);
+ COMPILE::JS
+ {
+ document.body.classList.remove("viewport");
+ window.removeEventListener('resize', autoResizeHandler, false);
+ }
+ _popUp.removeEventListener("initComplete", handlePopUpInitComplete);
+ _popUp = null;
+ }
+ }
+ _showingPopup = false;
+ }
+
+ // COMPILE::JS
+ // private var rq:int;
+ private function prepareForPopUp():void
+ {
+ _popUp.addClass("open");
+ COMPILE::JS
+ {
+ //avoid scroll in html
+ document.body.classList.add("viewport");
+ //cancelAnimationFrame(rq);
+ }
+ }
+
+ /**
+ * @private
+ */
+ private function selectionChangeHandler(event:Event = null):void
+ {
+ getHost().dispatchEvent(new Event("selectedDateChanged"));
+ getHost().dispatchEvent(new Event(Event.CHANGE));
+ }
+
+ private var daysTable:Table;
+ /**
+ * When set to "auto" this resize handler monitors the width of the app window
+ * and switch between fixed and float modes.
+ *
+ * Note:This could be done with media queries, but since it handles open/close
+ * maybe this is the right way
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ private function autoResizeHandler(event:Event = null):void
+ {
+ COMPILE::JS
+ {
+ var outerWidth:Number = window.outerWidth;
+
+ // Desktop width size
+ if(outerWidth > ResponsiveSizes.DESKTOP_BREAKPOINT)
+ {
+ // var point:Point = new Point(_textInput.width, _button.height);
+ // var p2:Point = PointUtils.localToGlobal(point, _strand);
+ // _popUp.x = p3.x;
+ // _popUp.y = p3.y;
+ // var p3:Point = PointUtils.globalToLocal(p2, host);
+
+ var origin:Point = new Point(0, _button.y + _button.height);
+ var relocated:Point = PointUtils.localToGlobal(origin, _strand);
+ // daysTable.x = relocated.x;
+ // daysTable.y = relocated.y;
+ daysTable.positioner.style["left"] = relocated.x + "px";
+ daysTable.positioner.style["top"] = relocated.y + "px";
+ }
+ else
+ {
+ daysTable.positioner.style["left"] = "50%";
+ daysTable.positioner.style["top"] = "calc(100% - 10px)";
+ }
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DropDownListView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DropDownListView.as
index 2582856..b791a2f 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DropDownListView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DropDownListView.as
@@ -18,288 +18,124 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.views
{
- import flash.display.DisplayObjectContainer;
- import flash.display.Graphics;
- import flash.display.Shape;
- import flash.display.SimpleButton;
- import flash.display.Sprite;
- 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.IChild;
- import org.apache.royale.core.IPopUpHost;
- import org.apache.royale.core.ISelectionModel;
- import org.apache.royale.core.IStrand;
- import org.apache.royale.core.IUIBase;
- import org.apache.royale.core.ValuesManager;
- import org.apache.royale.events.Event;
- import org.apache.royale.events.IEventDispatcher;
- import org.apache.royale.utils.SolidBorderUtil;
- import org.apache.royale.utils.UIUtils;
- import org.apache.royale.html.beads.IDropDownListView;
-
+ import org.apache.royale.core.ISelectionModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.html.elements.Option;
+ import org.apache.royale.html.elements.Select;
+ import org.apache.royale.html.beads.DataContainerView;
+ import org.apache.royale.jewel.DropDownList;
+ import org.apache.royale.events.Event;
+
/**
- * The DropDownListView class is the default view for
- * the org.apache.royale.html.DropDownList class.
- * It displays a simple text label with what appears to be a
- * down arrow button on the right, but really, the entire
- * view is the button that will display or dismiss the dropdown.
- *
- * @viewbead
+ * The DropDownListView class creates the visual elements of the org.apache.royale.jewel.DropDownList
+ * component. The job of the view bead is to put together the parts of the DropDownList such as the Select and Label
+ *
+ * @viewbead
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
- public class DropDownListView extends BeadViewBase implements IDropDownListView, IBeadView
- {
- /**
- * Constructor.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.3
- */
- public function DropDownListView()
- {
- upSprite = new Sprite();
- downSprite = new Sprite();
- overSprite = new Sprite();
- upTextField = new CSSTextField();
- downTextField = new CSSTextField();
- overTextField = new CSSTextField();
- upSprite.addChild(upTextField);
- overSprite.addChild(overTextField);
- downSprite.addChild(downTextField);
- upTextField.parentDrawsBackground = true;
- downTextField.parentDrawsBackground = true;
- overTextField.parentDrawsBackground = true;
- upTextField.selectable = false;
- upTextField.type = TextFieldType.DYNAMIC;
- downTextField.selectable = false;
- downTextField.type = TextFieldType.DYNAMIC;
- overTextField.selectable = false;
- overTextField.type = TextFieldType.DYNAMIC;
- // auto-size collapses if no text
- //upTextField.autoSize = "left";
- //downTextField.autoSize = "left";
- //overTextField.autoSize = "left";
+ public class DropDownListView extends DataContainerView
+ {
+ public function DropDownListView()
+ {
+ super();
+ }
- upArrows = new Shape();
- overArrows = new Shape();
- downArrows = new Shape();
- upSprite.addChild(upArrows);
- overSprite.addChild(overArrows);
- downSprite.addChild(downArrows);
- drawArrows(upArrows);
- drawArrows(overArrows);
- drawArrows(downArrows);
-
- }
-
-
- private var selectionModel:ISelectionModel;
-
- private var shape:Shape;
-
/**
* @copy org.apache.royale.core.IBead#strand
- *
+ *
+ * @royaleignorecoercion HTMLLabelElement
+ *
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
- override public function set strand(value:IStrand):void
- {
- super.strand = value;
- selectionModel = value.getBeadByType(ISelectionModel) as ISelectionModel;
- selectionModel.addEventListener("selectedIndexChanged", selectionChangeHandler);
- selectionModel.addEventListener("dataProviderChanged", selectionChangeHandler);
- shape = new Shape();
- shape.graphics.beginFill(0xCCCCCC);
- shape.graphics.drawRect(0, 0, 10, 10);
- shape.graphics.endFill();
- upTextField.styleParent = _strand;
- downTextField.styleParent = _strand;
- overTextField.styleParent = _strand;
- var button:SimpleButton = value as SimpleButton;
- button.upState = upSprite;
- button.downState = downSprite;
- button.overState = overSprite;
- button.hitTestState = shape;
- if (selectionModel.selectedIndex !== -1)
- text = selectionModel.selectedItem.toString();
- else
- text = "^W_";
- upTextField.height = upTextField.textHeight + 4;
- downTextField.height = downTextField.textHeight + 4;
- overTextField.height = overTextField.textHeight + 4;
- if (selectionModel.selectedIndex == -1)
- text = "";
-
- IEventDispatcher(value).addEventListener("heightChanged", changeHandler);
- IEventDispatcher(value).addEventListener("widthChanged", changeHandler);
- changeHandler(null);
- }
-
- private function selectionChangeHandler(event:Event):void
- {
- if (selectionModel.selectedItem == null)
- text = "";
- else if (selectionModel.labelField != null)
- text = selectionModel.selectedItem[selectionModel.labelField].toString();
- else
- text = selectionModel.selectedItem.toString();
- }
-
- private function changeHandler(event:Event):void
+ override public function set strand(value:IStrand):void
{
- var ww:Number = IUIBase(_strand).width;
- var hh:Number = IUIBase(_strand).height;
-
- upArrows.x = ww - upArrows.width - 6;
- overArrows.x = ww - overArrows.width - 6;
- downArrows.x = ww - downArrows.width - 6;
- upArrows.y = (hh - upArrows.height) / 2;
- overArrows.y = (hh - overArrows.height) / 2;
- downArrows.y = (hh - downArrows.height) / 2;
+ super.strand = value;
- upTextField.width = upArrows.x;
- downTextField.width = downArrows.x;
- overTextField.width = overArrows.x;
- upTextField.height = hh;
- downTextField.height = hh;
- overTextField.height = hh;
-
- drawBorder(upSprite, 0xf8f8f8, ww, hh);
- drawBorder(overSprite, 0xe8e8e8, ww, hh);
- drawBorder(downSprite, 0xd8d8d8, ww, hh);
-
- shape.graphics.clear();
- shape.graphics.beginFill(0xCCCCCC);
- shape.graphics.drawRect(0, 0, ww, hh);
- shape.graphics.endFill();
- }
-
- private var upTextField:CSSTextField;
- private var downTextField:CSSTextField;
- private var overTextField:CSSTextField;
- private var upSprite:Sprite;
- private var downSprite:Sprite;
- private var overSprite:Sprite;
- private var upArrows:Shape;
- private var downArrows:Shape;
- private var overArrows:Shape;
-
- private function drawBorder(sprite:Sprite, color:uint, ww:Number, hh:Number):void
- {
- sprite.graphics.clear();
- SolidBorderUtil.drawBorder(sprite.graphics, 0, 0,
- ww, hh,
- 0x808080, color, 1, 1, 4);
- }
-
- private function drawArrows(shape:Shape):void
- {
- var g:Graphics = shape.graphics;
- g.beginFill(0);
- g.moveTo(8, 0);
- g.lineTo(12, 4);
- g.lineTo(4, 4);
- g.lineTo(8, 0);
- g.endFill();
- g.beginFill(0);
- g.moveTo(8, 10);
- g.lineTo(12, 6);
- g.lineTo(4, 6);
- g.lineTo(8, 10);
- g.endFill();
- }
-
- /**
- * The text that is displayed in the view.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.3
- */
- public function get text():String
- {
- return upTextField.text;
- }
-
- /**
- * @private
- */
- public function set text(value:String):void
- {
- upTextField.text = value;
- downTextField.text = value;
- overTextField.text = value;
- }
-
- private var _popUp:IStrand;
-
- /**
- * The dropdown/popup that displays the set of choices.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.3
- */
- public function get popUp():IStrand
- {
- if (!_popUp)
+ COMPILE::JS
{
- var popUpClass:Class = ValuesManager.valuesImpl.getValue(_strand, "iPopUp") as Class;
- _popUp = new popUpClass() as IStrand;
- }
- return _popUp;
- }
-
- private var _popUpVisible:Boolean;
-
- /**
- * A flag that indicates whether the dropdown/popup is
- * visible.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.3
- */
- public function get popUpVisible():Boolean
- {
- return _popUpVisible;
- }
-
- /**
- * @private
- */
- public function set popUpVisible(value:Boolean):void
- {
- var host:IPopUpHost;
- if (value != _popUpVisible)
- {
- _popUpVisible = value;
- if (value)
- {
- host = UIUtils.findPopUpHost(_strand as IUIBase);
- IPopUpHost(host).popUpParent.addElement(popUp as IChild);
- }
- else
- {
- host = UIUtils.findPopUpHost(_strand as IUIBase);
- IPopUpHost(host).popUpParent.removeElement(popUp as IChild);
- }
+ var dropDownList:DropDownList = (value as DropDownList);
+
+ // dropDownList.labelDisplay = document.createElement('label') as HTMLLabelElement;
+ // dropDownList.labelDisplay.innerText = dropDownList.prompt;
+ // dropDownList.labelDisplay.classList.add("mdl-textfield__label");
+
+ dropDownList.dropDown = new Select();
+ // dropDownList.dropDown.className = "mdl-textfield__input";
+
+ var emptyOption:Option = new Option();
+ // emptyOption.element.style.display = "none";
+
+ dropDownList.dropDown.addElement(emptyOption);
+
+ setNameForDropDownList();
+
+ // dropDownList.element.appendChild(dropDownList.labelDisplay);
+ dropDownList.addElement(dropDownList.dropDown);
}
}
-
- }
+
+ override protected function dataProviderChangeHandler(event:Event):void
+ {
+ super.dataProviderChangeHandler(event);
+
+ COMPILE::JS
+ {
+ setProgrammaticallyChangedSelection();
+ }
+ }
+
+ override protected function itemsCreatedHandler(event:org.apache.royale.events.Event):void
+ {
+ super.itemsCreatedHandler(event);
+
+ COMPILE::JS
+ {
+ setProgrammaticallyChangedSelection();
+ }
+ }
+
+ private function selectionChangeHandler(event:Event):void
+ {
+ COMPILE::JS
+ {
+ setProgrammaticallyChangedSelection();
+ }
+ }
+
+ override protected function handleInitComplete(event:Event):void
+ {
+ super.handleInitComplete(event);
+
+ dataModel.addEventListener("selectedIndexChanged", selectionChangeHandler);
+ }
+
+ COMPILE::JS
+ private function setNameForDropDownList():void
+ {
+ var dropDownList:DropDownList = (_strand as DropDownList);
+
+ var name:String = "dropDownList" + Math.random();
+ // dropDownList.labelDisplay.htmlFor = name;
+ dropDownList.dropDown.element.name = name;
+ }
+
+ COMPILE::JS
+ private function setProgrammaticallyChangedSelection():void
+ {
+ var dropDownList:DropDownList = (_strand as DropDownList);
+ var selectedIndex:int = dropDownList.dropDown.element["selectedIndex"] - 1;
+ var model:ISelectionModel = dataModel as ISelectionModel;
+
+ if (model.selectedIndex > -1 && model.dataProvider && model.selectedIndex != selectedIndex)
+ {
+ dropDownList.dropDown.element["selectedIndex"] = model.selectedIndex + 1;
+ }
+ }
+ }
}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ImageView.as
similarity index 62%
copy from frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ImageView.as
index 7935bcf..29b134e 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ImageView.as
@@ -16,20 +16,30 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.html.beads
+package org.apache.royale.jewel.beads.views
{
- import org.apache.royale.core.IBead;
-
- /**
- * The IBackgroundBead interface is a marker interface for beads
- * that draw backgrounds.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public interface IBorderBead extends IBead
+ import org.apache.royale.core.ImageViewBase;
+
+ /**
+ * The ImageView class creates the visual elements of the org.apache.royale.jewel.Image component.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class ImageView extends ImageViewBase
{
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ImageView()
+ {
+ }
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/JewelLabelViewBead.mxml b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/JewelLabelViewBead.mxml
index 4135138..35e6f17 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/JewelLabelViewBead.mxml
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/JewelLabelViewBead.mxml
@@ -23,7 +23,7 @@
<fx:Script>
<![CDATA[
- import org.apache.royale.html.beads.models.TextModel;
+ import org.apache.royale.jewel.beads.models.TextModel;
// private function clickHandler():void
// {
@@ -38,7 +38,7 @@
<js:MXMLBeadViewDataBinding />
</js:beads>
- <j:TextButton id="textButton" text="JewelLabelViewBead" primary="true"/>
+ <j:Button id="textButton" text="JewelLabelViewBead" emphasis="primary"/>
<!--
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ListView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ListView.as
index 0312ee1..c61a12d 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ListView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ListView.as
@@ -24,7 +24,12 @@
import org.apache.royale.core.ISelectionModel;
import org.apache.royale.core.IStrand;
import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
import org.apache.royale.html.beads.DataContainerView;
+ import org.apache.royale.core.IItemRendererParent;
+ import org.apache.royale.core.IContentView;
+ import org.apache.royale.utils.loadBeadFromValuesManager;
+ import org.apache.royale.core.ILayoutView;
/**
* The ListView class creates the visual elements of the org.apache.royale.jewel.List
@@ -35,7 +40,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
COMPILE::JS
public class ListView extends DataContainerView
@@ -45,6 +50,37 @@
super();
}
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ }
+ private var _dataGroup:IItemRendererParent;
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IItemRendererParent
+ */
+ override public function get dataGroup():IItemRendererParent
+ {
+ if(!_dataGroup)
+ {
+ var c:ILayoutView = contentView;
+ if(c && c is IItemRendererParent)
+ _dataGroup = c as IItemRendererParent;
+ else
+ _dataGroup = super.dataGroup;
+ }
+ return _dataGroup;
+ }
+
+
protected var listModel:ISelectionModel;
protected var lastSelectedIndex:int = -1;
@@ -68,14 +104,16 @@
*/
protected function selectionChangeHandler(event:Event):void
{
- var ir:ISelectableItemRenderer = dataGroup.getItemRendererForIndex(lastSelectedIndex) as ISelectableItemRenderer;
+ var ir:ISelectableItemRenderer = dataGroup.getItemRendererAt(lastSelectedIndex) as ISelectableItemRenderer;
if(ir)
ir.selected = false;
- ir = dataGroup.getItemRendererForIndex(listModel.selectedIndex) as ISelectableItemRenderer;
+ ir = dataGroup.getItemRendererAt(listModel.selectedIndex) as ISelectableItemRenderer;
if(ir)
ir.selected = true;
lastSelectedIndex = listModel.selectedIndex;
+
+ IEventDispatcher(_strand).dispatchEvent(new Event(Event.CHANGE));
}
protected var lastRollOverIndex:int = -1;
@@ -87,10 +125,10 @@
*/
protected function rollOverIndexChangeHandler(event:Event):void
{
- var ir:ISelectableItemRenderer = dataGroup.getItemRendererForIndex(lastRollOverIndex) as ISelectableItemRenderer;
+ var ir:ISelectableItemRenderer = dataGroup.getItemRendererAt(lastRollOverIndex) as ISelectableItemRenderer;
if(ir)
ir.hovered = false;
- ir = dataGroup.getItemRendererForIndex((listModel as IRollOverModel).rollOverIndex) as ISelectableItemRenderer;
+ ir = dataGroup.getItemRendererAt((listModel as IRollOverModel).rollOverIndex) as ISelectableItemRenderer;
if(ir)
ir.hovered = true;
lastRollOverIndex = (listModel as IRollOverModel).rollOverIndex;
@@ -113,13 +151,26 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9
+ * @productversion Royale 0.9.4
*/
override public function set strand(value:IStrand):void
{
_strand = value;
super.strand = value;
}
+ private var _dataGroup:IItemRendererParent;
+ override public function get dataGroup():IItemRendererParent
+ {
+ if(!_dataGroup)
+ {
+ var c:ILayoutView = contentView;
+ if(c && c is IItemRendererParent)
+ _dataGroup = c as IItemRendererParent;
+ else
+ _dataGroup = super.dataGroup;
+ }
+ return _dataGroup;
+ }
/**
* @private
@@ -140,10 +191,10 @@
*/
protected function selectionChangeHandler(event:Event):void
{
- var ir:ISelectableItemRenderer = dataGroup.getItemRendererForIndex(lastSelectedIndex) as ISelectableItemRenderer;
+ var ir:ISelectableItemRenderer = dataGroup.getItemRendererAt(lastSelectedIndex) as ISelectableItemRenderer;
if (ir)
ir.selected = false;
- ir = dataGroup.getItemRendererForIndex(listModel.selectedIndex) as ISelectableItemRenderer;
+ ir = dataGroup.getItemRendererAt(listModel.selectedIndex) as ISelectableItemRenderer;
if (ir)
ir.selected = true;
lastSelectedIndex = listModel.selectedIndex;
@@ -156,10 +207,10 @@
*/
protected function rollOverIndexChangeHandler(event:Event):void
{
- var ir:ISelectableItemRenderer = dataGroup.getItemRendererForIndex(lastRollOverIndex) as ISelectableItemRenderer;
+ var ir:ISelectableItemRenderer = dataGroup.getItemRendererAt(lastRollOverIndex) as ISelectableItemRenderer;
if(ir)
ir.hovered = false;
- ir = dataGroup.getItemRendererForIndex(IRollOverModel(listModel).rollOverIndex) as ISelectableItemRenderer;
+ ir = dataGroup.getItemRendererAt(IRollOverModel(listModel).rollOverIndex) as ISelectableItemRenderer;
if(ir)
ir.hovered = true;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/NumericStepperView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/NumericStepperView.as
new file mode 100644
index 0000000..76f640c
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/NumericStepperView.as
@@ -0,0 +1,228 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.views
+{
+ import org.apache.royale.core.BeadViewBase;
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IBeadView;
+ import org.apache.royale.core.ILayoutChild;
+ import org.apache.royale.core.IParent;
+ import org.apache.royale.core.IParentIUIBase;
+ 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.events.Event;
+ import org.apache.royale.events.ValueChangeEvent
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.jewel.Label;
+ import org.apache.royale.jewel.Spinner;
+ import org.apache.royale.jewel.TextInput;
+
+ /**
+ * The NumericStepperView class creates the visual elements of the
+ * org.apache.royale.jewel.NumericStepper component. A NumberStepper consists of a
+ * org.apache.royale.jewel.TextInput component to display the value and a
+ * org.apache.royale.jewel.Spinner to change the value.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class NumericStepperView extends BeadViewBase implements IBeadView
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function NumericStepperView()
+ {
+ }
+
+ private var label:Label;
+ private var input:TextInput;
+ private var spinner:Spinner;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ * @royaleignorecoercion org.apache.royale.core.IBead
+ * @royaleignorecoercion org.apache.royale.core.IParent
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ // add an input field
+ input = new TextInput();
+ (value as IParent).addElement(input);
+
+ // add a spinner
+ spinner = new Spinner();
+ spinner.addBead( (value as UIBase).model as IBead);
+ (value as IParent).addElement(spinner);
+
+ // delay this until the resize event in JS
+ COMPILE::SWF
+ {
+ spinner.height = input.height;
+ spinner.width = input.height/2;
+ }
+
+ // listen for changes to the text input field which will reset the
+ // value. ideally, we should either set the input to accept only
+ // numeric values or, barring that, reject non-numeric entries. we
+ // cannot do that right now however.
+ input.addEventListener(Event.CHANGE,inputChangeHandler);
+
+ // listen for change events on the spinner so the value can be updated as
+ // as resizing the component
+ spinner.addEventListener("valueChange",spinnerValueChanged);
+ IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler);
+ IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler);
+ IEventDispatcher(value).addEventListener("sizeChanged",sizeChangeHandler);
+
+ // listen for changes to the model itself and update the UI accordingly
+ IEventDispatcher(UIBase(value).model).addEventListener("valueChange",modelChangeHandler);
+ IEventDispatcher(UIBase(value).model).addEventListener("minimumChange",modelChangeHandler);
+ IEventDispatcher(UIBase(value).model).addEventListener("maximumChange",modelChangeHandler);
+ IEventDispatcher(UIBase(value).model).addEventListener("stepSizeChange",modelChangeHandler);
+ IEventDispatcher(UIBase(value).model).addEventListener("snapIntervalChange",modelChangeHandler);
+
+ input.text = String(spinner.value);
+
+ COMPILE::SWF
+ {
+ var host:ILayoutChild = ILayoutChild(value);
+
+ // Complete the setup if the height is sized to content or has been explicitly set
+ // and the width is sized to content or has been explicitly set
+ if ((host.isHeightSizedToContent() || !isNaN(host.explicitHeight)) &&
+ (host.isWidthSizedToContent() || !isNaN(host.explicitWidth)))
+ sizeChangeHandler(null);
+ }
+ COMPILE::JS
+ {
+ // always run size change since there are no size change events
+ sizeChangeHandler(null);
+ }
+
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ private function sizeChangeHandler(event:Event) : void
+ {
+ // first reads
+ var widthToContent:Boolean = (_strand as UIBase).isWidthSizedToContent();
+ var inputWidth:Number = input.width;
+ var inputHeight:Number = input.height;
+ var strandWidth:Number;
+ if (!widthToContent)
+ {
+ strandWidth = (_strand as UIBase).width;
+ }
+
+ // input.x = 0;
+ // input.y = 0;
+ if (!widthToContent)
+ input.width = strandWidth - spinner.width - 2;
+
+ COMPILE::SWF
+ {
+ spinner.x = inputWidth;
+ spinner.y = 0;
+ }
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ private function spinnerValueChanged(event:ValueChangeEvent) : void
+ {
+ input.text = "" + spinner.value;
+
+ var newEvent:ValueChangeEvent = ValueChangeEvent.createUpdateEvent(_strand, "value", event.oldValue, event.newValue);
+ IEventDispatcher(_strand).dispatchEvent(newEvent);
+ }
+
+ /**
+ * @private
+ */
+ private function inputChangeHandler(event:Event) : void
+ {
+ var newValue:Number = Number(input.text);
+
+ if( !isNaN(newValue) ) {
+ spinner.value = newValue;
+ }
+ else {
+ input.text = String(spinner.value);
+ }
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ * @royaleignorecoercion org.apache.royale.core.IRangeModel
+ */
+ private function modelChangeHandler( event:Event ) : void
+ {
+ var n:Number = IRangeModel(UIBase(_strand).model).value;
+ input.text = String(IRangeModel(UIBase(_strand).model).value);
+ }
+
+ /**
+ * The area containing the TextInput and Spinner controls.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IParentIUIBase
+ */
+ public function get contentView():IParentIUIBase
+ {
+ return _strand as IParentIUIBase;
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.core.IUIBase
+ */
+ public function get resizableView():IUIBase
+ {
+ return _strand as IUIBase;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/RadioButtonView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/RadioButtonView.as
index f5752ee..8ec6cb9 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/RadioButtonView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/RadioButtonView.as
@@ -38,7 +38,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public class RadioButtonView extends BeadViewBase implements IBeadView
{
@@ -48,7 +48,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function RadioButtonView()
{
@@ -89,7 +89,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get toggleButtonModel() : IValueToggleButtonModel
{
@@ -102,7 +102,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
override public function set strand(value:IStrand):void
{
@@ -149,7 +149,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get text():String
{
@@ -173,7 +173,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public function get html():String
{
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SliderThumbView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SliderThumbView.as
index 829a5b4..5b38bea 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SliderThumbView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SliderThumbView.as
@@ -38,7 +38,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public class SliderThumbView extends BeadViewBase implements IBeadView
{
@@ -48,7 +48,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function SliderThumbView()
{
@@ -80,7 +80,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
* @royaleignoreimport org.apache.royale.core.WrappedHTMLElement
* @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
*/
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SliderTrackView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SliderTrackView.as
index c71f468..d1e34bd 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SliderTrackView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SliderTrackView.as
@@ -39,7 +39,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public class SliderTrackView extends BeadViewBase implements IBeadView
{
@@ -49,7 +49,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function SliderTrackView()
{
@@ -81,7 +81,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
* @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
*/
override public function set strand(value:IStrand):void
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SliderView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SliderView.as
index 5e95dd1..5056404 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SliderView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SliderView.as
@@ -23,7 +23,7 @@
import flash.display.Sprite;
}
- import org.apache.royale.html.beads.ISliderView;
+ import org.apache.royale.jewel.beads.controls.slider.ISliderView;
import org.apache.royale.core.BeadViewBase;
import org.apache.royale.core.IBead;
import org.apache.royale.core.IBeadModel;
@@ -46,7 +46,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public class SliderView extends BeadViewBase implements ISliderView, IBeadView
{
@@ -56,7 +56,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function SliderView()
{
@@ -75,7 +75,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function get track():IUIBase
{
@@ -88,7 +88,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function get thumb():IUIBase
{
@@ -101,7 +101,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
* @royaleignorecoercion HTMLDivElement
*/
override public function set strand(value:IStrand):void
@@ -162,7 +162,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
COMPILE::JS
public function get sliderTrackFill():HTMLDivElement
@@ -184,7 +184,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
COMPILE::JS
public function get sliderTrack():HTMLDivElement
@@ -213,7 +213,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
private function modelChangeHandler( event:Event ) : void
{
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SpinnerView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SpinnerView.as
new file mode 100644
index 0000000..27faed4
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SpinnerView.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.views
+{
+COMPILE::SWF {
+ import flash.display.DisplayObject;
+}
+
+ import org.apache.royale.core.BeadViewBase;
+ 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.ILayoutChild;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.jewel.Button;
+ // import org.apache.royale.jewel.beads.controllers.ButtonAutoRepeatController;
+ import org.apache.royale.jewel.beads.controls.spinner.ISpinnerView
+
+COMPILE::JS {
+ import org.apache.royale.jewel.beads.controllers.SpinnerMouseController;
+}
+
+ /**
+ * The SpinnerView class creates the visual elements of the org.apache.royale.jewel.Spinner
+ * component.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class SpinnerView extends BeadViewBase implements ISpinnerView, IBeadView
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function SpinnerView()
+ {
+ }
+
+ private var rangeModel:IRangeModel;
+
+ COMPILE::JS {
+ public var _increment:Button;
+ public var _decrement:Button;
+ private var controller:SpinnerMouseController;
+ }
+
+ COMPILE::SWF {
+ private var _decrement:DisplayObject;
+ private var _increment:DisplayObject;
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ COMPILE::SWF {
+ _increment = new Button();
+ // Button(_increment).addBead(new UpArrowButtonView());
+ // Button(_increment).addBead(new ButtonAutoRepeatController());
+ _decrement = new Button();
+ // Button(_decrement).addBead(new DownArrowButtonView());
+ // Button(_decrement).addBead(new ButtonAutoRepeatController());
+
+ Button(_increment).x = 0;
+ Button(_increment).y = 0;
+ Button(_decrement).x = 0;
+ Button(_decrement).y = Button(_increment).height;
+
+ UIBase(_strand).addChild(_decrement);
+ UIBase(_strand).addChild(_increment);
+ rangeModel = _strand.getBeadByType(IBeadModel) as IRangeModel;
+ }
+
+ IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler);
+ IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler);
+
+ COMPILE::JS {
+ var host:UIBase = value as UIBase;
+
+ _increment = new Button();
+ _increment.addClass("up");
+ _increment.text = '\u25B2';
+ host.addElement(_increment);
+
+ _decrement = new Button();
+ _decrement.addClass("down");
+ _decrement.text = '\u25BC';
+
+ host.addElement(_decrement);
+ }
+
+ COMPILE::SWF
+ {
+ var host:ILayoutChild = ILayoutChild(value);
+
+ // Complete the setup if the height is sized to content or has been explicitly set
+ // and the width is sized to content or has been explicitly set
+ if ((host.isHeightSizedToContent() || !isNaN(host.explicitHeight)) &&
+ (host.isWidthSizedToContent() || !isNaN(host.explicitWidth)))
+ sizeChangeHandler(null);
+ }
+ COMPILE::JS
+ {
+ // always run size change since there are no size change events
+ sizeChangeHandler(null);
+ }
+ }
+
+ /**
+ * The component for decrementing the org.apache.royale.jewel.Spinner value.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ COMPILE::SWF
+ public function get decrement():DisplayObject
+ {
+ return _decrement;
+ }
+ COMPILE::JS
+ public function get decrement():Button
+ {
+ return _decrement;
+ }
+
+ /**
+ * The component for incrementing the org.apache.royale.jewel.Spinner value.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ COMPILE::SWF
+ public function get increment():DisplayObject
+ {
+ return _increment;
+ }
+ COMPILE::JS
+ public function get increment():Button
+ {
+ return _increment;
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ private function sizeChangeHandler( event:Event ) : void
+ {
+ var w:Number = UIBase(_strand).width;
+ var h:Number = UIBase(_strand).height / 2;
+ // _increment.width = w;
+ // _increment.height = h;
+ COMPILE::SWF
+ {
+ _increment.y = 0;
+ }
+ // _decrement.width = w;
+ // _decrement.height = h;
+ COMPILE::SWF
+ {
+ _decrement.y = h;
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TableView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TableView.as
new file mode 100644
index 0000000..6e7789f
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TableView.as
@@ -0,0 +1,110 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.views
+{
+ import org.apache.royale.html.beads.DataContainerView;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.core.ISelectableItemRenderer;
+ import org.apache.royale.jewel.beads.views.ListView;
+ import org.apache.royale.jewel.supportClasses.table.THead;
+ import org.apache.royale.jewel.supportClasses.table.TFoot;
+ import org.apache.royale.jewel.beads.models.TableModel;
+
+ /**
+ * The TableView class creates the visual elements of the org.apache.royale.jewel.Table component.
+ *
+ * It creates a TBody, and defines THead and TFoot optional parts to be created by a mapper
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class TableView extends ListView
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function TableView()
+ {
+ super();
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ }
+
+ protected var model:TableModel;
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.core.ISelectionModel
+ */
+ override protected function handleInitComplete(event:Event):void
+ {
+ model = _strand.getBeadByType(TableModel) as TableModel;
+ model.addEventListener("selectedIndexChanged", selectionChangeHandler);
+ model.addEventListener("rollOverIndexChanged", rollOverIndexChangeHandler);
+
+ super.handleInitComplete(event);
+ }
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public var thead:THead;
+
+ /**
+ * @royalesuppresspublicvarwarning
+ */
+ public var tfoot:TFoot;
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.core.ISelectableItemRenderer
+ */
+ override protected function selectionChangeHandler(event:Event):void
+ {
+ var ir:ISelectableItemRenderer = dataGroup.getItemRendererAt(lastSelectedIndex) as ISelectableItemRenderer;
+ if (ir)
+ ir.selected = false;
+
+ ir = dataGroup.getItemRendererAt(listModel.selectedIndex) as ISelectableItemRenderer;
+ if (ir)
+ ir.selected = true;
+ lastSelectedIndex = listModel.selectedIndex;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TextFieldView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TextFieldView.as
index 4c8df5e..258c4c4 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TextFieldView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TextFieldView.as
@@ -24,13 +24,13 @@
/**
* The TextFieldView class is the default view for
* the org.apache.royale.jewel.Label class.
- * It displays text using a TextField, so there is no
+ * It displays text using a TextInput, so there is no
* right-to-left text support in this view.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public class TextFieldView extends TextFieldViewBase
{
@@ -40,7 +40,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function TextFieldView()
{
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TitleBarView.mxml b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TitleBarView.mxml
index d5ddfcd..9173ae0 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TitleBarView.mxml
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TitleBarView.mxml
@@ -23,7 +23,7 @@
@langversion 3.0
@playerversion Flash 10.2
@playerversion AIR 2.6
- @productversion Royale 0.9.3
+ @productversion Royale 0.9.4
-->
<js:MXMLBeadView xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/royale/basic"
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/DateItemRenderer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/DateItemRenderer.as
new file mode 100644
index 0000000..306745d
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/DateItemRenderer.as
@@ -0,0 +1,84 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.itemRenderers
+{
+ COMPILE::SWF
+ {
+ import flash.text.TextFieldAutoSize;
+ }
+
+ /**
+ * The DateItemRenderer class renders date values for the DateChooser.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class DateItemRenderer extends TableItemRenderer
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function DateItemRenderer()
+ {
+ super();
+
+ typeNames = "jewel tableitem calendar";
+ }
+
+ /**
+ * Sets the data value and uses the String version of the data for display.
+ *
+ * @param Object data The object being displayed by the itemRenderer instance.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ override public function set data(value:Object):void
+ {
+ super.data = value;
+
+ if (value[labelField] is Date) {
+ text = String( (value[labelField] as Date).getDate() );
+
+ COMPILE::SWF {
+ mouseEnabled = true;
+ mouseChildren = true;
+ }
+ } else {
+ text = "";
+
+ COMPILE::SWF {
+ mouseEnabled = false;
+ mouseChildren = false;
+ }
+
+ className = "empty-cell";
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/DropDownListItemRenderer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/DropDownListItemRenderer.as
new file mode 100644
index 0000000..298193d
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/DropDownListItemRenderer.as
@@ -0,0 +1,103 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.itemRenderers
+{
+ import org.apache.royale.html.elements.Option;
+ import org.apache.royale.html.supportClasses.MXMLItemRenderer;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ /**
+ * The DropDownListItemRenderer class creates a DropDownList menu item
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class DropDownListItemRenderer extends MXMLItemRenderer
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function DropDownListItemRenderer()
+ {
+ super();
+ typeNames = "jewel item";
+ }
+
+ private var item:Option;
+
+ /**
+ * Sets the data value and uses the String version of the data for display.
+ *
+ * @param Object data The object being displayed by the itemRenderer instance.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ override public function set data(value:Object):void
+ {
+ super.data = value;
+
+ if (labelField)
+ {
+ item.text = String(value[labelField]);
+ }
+ else
+ {
+ item.text = String(value);
+ }
+
+ COMPILE::JS
+ {
+ if (dataField)
+ {
+ item.element["value"] = String(value[dataField]);
+ }
+ else
+ {
+ item.element["value"] = String(value);
+ }
+ }
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ item = new Option();
+
+ element = item.element as WrappedHTMLElement;
+ return element;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as
index 2410da7..ade75e1 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as
@@ -18,24 +18,27 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.itemRenderers
{
+ import org.apache.royale.core.StyledMXMLItemRenderer;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.beads.controls.TextAlign;
+ import org.apache.royale.jewel.beads.itemRenderers.ITextItemRenderer;
+ import org.apache.royale.jewel.supportClasses.util.getLabelFromData;
+
COMPILE::JS
{
import org.apache.royale.core.WrappedHTMLElement;
import org.apache.royale.html.util.addElementToWrapper;
- import org.apache.royale.utils.cssclasslist.toggleStyle;
}
-
- import org.apache.royale.html.supportClasses.MXMLItemRenderer;
-
+
/**
* The ListItemRenderer defines the basic Item Renderer for a Jewel List Component.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
- public class ListItemRenderer extends MXMLItemRenderer
+ public class ListItemRenderer extends StyledMXMLItemRenderer implements ITextItemRenderer
{
/**
* constructor.
@@ -43,15 +46,19 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function ListItemRenderer()
{
super();
- typeNames = "jewel item";
+ typeNames = "jewel item";
+ addClass("selectable");
+
+ textAlign = new TextAlign();
+ addBead(textAlign);
}
-
+
private var _text:String = "";
/**
@@ -60,7 +67,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
public function get text():String
{
@@ -69,11 +76,39 @@
public function set text(value:String):void
{
- _text = value;
+ _text = value;
+
+ COMPILE::JS
+ {
+ if(textNode != null)
+ {
+ textNode.nodeValue = _text;
+ }
+ }
}
COMPILE::JS
- private var textNode:Text;
+ protected var textNode:Text;
+
+ private var textAlign:TextAlign;
+
+ /**
+ * How text align in the itemRenderer instance.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get align():String
+ {
+ return textAlign.align;
+ }
+
+ public function set align(value:String):void
+ {
+ textAlign.align = value;
+ }
/**
* Sets the data value and uses the String version of the data for display.
@@ -83,26 +118,13 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.3
+ * @productversion Royale 0.9.4
*/
override public function set data(value:Object):void
{
super.data = value;
-
- var text:String;
- if (labelField || dataField) {
- text = String(value[labelField]);
- } else {
- text = String(value);
- }
-
- COMPILE::JS
- {
- if(textNode != null)
- {
- textNode.nodeValue = text;
- }
- }
+ text = getLabelFromData(this, value);
+ dispatchEvent(new Event("dataChange"));
}
/**
@@ -112,7 +134,7 @@
COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
- addElementToWrapper(this,'li');
+ addElementToWrapper(this, 'li');
if(MXMLDescriptor == null)
{
@@ -122,6 +144,29 @@
return element;
}
+ private var _selectable:Boolean = true;
+ /**
+ * <code>true</code> if the item renderer is can be selected
+ * false otherwise. Use to configure a renderer to be non
+ * selectable.
+ *
+ * Defaults to true
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ override public function get selectable():Boolean
+ {
+ return _selectable;
+ }
+ override public function set selectable(value:Boolean):void
+ {
+ _selectable = value;
+ toggleClass("selectable", _selectable);
+ }
+
/**
* @private
*/
@@ -137,59 +182,10 @@
//else
// useColor = backgroundColor;
- COMPILE::JS
- {
- //element.className = "jewel item selected";
- toggleStyle(this, "selected", selected);
- }
+ if(hoverable)
+ toggleClass("hovered", hovered);
+ if(selectable)
+ toggleClass("selected", selected);
}
-
- private var _twoLine:Boolean;
- /**
- * Activate "twoline" class selector, for use in list item.
- * Optional Two Line List Variant
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.3
- */
- public function get twoLine():Boolean
- {
- return _twoLine;
- }
- public function set twoLine(value:Boolean):void
- {
- _twoLine = value;
-
- COMPILE::JS
- {
- element.classList.toggle("twoline", _twoLine);
- }
- }
-
- private var _threeLine:Boolean;
- /**
- * Activate "threeline" class selector, for use in list item.
- * Optional Three Line List Variant
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.3
- */
- public function get threeLine():Boolean
- {
- return _threeLine;
- }
- public function set threeLine(value:Boolean):void
- {
- _threeLine = value;
-
- COMPILE::JS
- {
- element.classList.toggle("threeline", _threeLine);
- }
- }
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/NavigationLinkItemRenderer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/NavigationLinkItemRenderer.as
new file mode 100644
index 0000000..29dd716
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/NavigationLinkItemRenderer.as
@@ -0,0 +1,174 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.itemRenderers
+{
+ import org.apache.royale.core.StyledMXMLItemRenderer;
+ import org.apache.royale.jewel.supportClasses.INavigationRenderer;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+
+ /**
+ * The NavigationLinkItemRenderer defines the basic Item Renderer for a Jewel
+ * Navigation List Component. It handles Objects with "label" and "href" data.
+ * Extend this (you can do it in MXML) to support more data like for example: icon data.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class NavigationLinkItemRenderer extends StyledMXMLItemRenderer implements INavigationRenderer
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function NavigationLinkItemRenderer()
+ {
+ super();
+
+ typeNames = "jewel navigationlink";
+ }
+
+ private var _href:String = "#";
+ /**
+ * the navigation link url
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get href():String
+ {
+ return _href;
+ }
+ public function set href(value:String):void
+ {
+ _href = value;
+ }
+
+ private var _text:String = "";
+
+ /**
+ * The text of the navigation link
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get text():String
+ {
+ return _text;
+ }
+
+ public function set text(value:String):void
+ {
+ _text = value;
+ }
+
+ COMPILE::JS
+ private var textNode:Text;
+
+ /**
+ * Sets the data value and uses the String version of the data for display.
+ *
+ * @param Object data The object being displayed by the itemRenderer instance.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ override public function set data(value:Object):void
+ {
+ super.data = value;
+
+ if(value == null) return;
+
+ if (labelField)
+ {
+ text = String(value[labelField]);
+ }
+ else if(value.label !== undefined)
+ {
+ text = String(value.label);
+ }
+ else
+ {
+ text = String(value);
+ }
+
+ if(value.href !== undefined)
+ {
+ href = String(value.href);
+ }
+
+ COMPILE::JS
+ {
+ if(textNode != null)
+ {
+ textNode.nodeValue = text;
+ (element as HTMLElement).setAttribute('href', href);
+ }
+ }
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion Text
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ var a:WrappedHTMLElement = addElementToWrapper(this,'a');
+ a.setAttribute('href', href);
+
+ if(MXMLDescriptor == null)
+ {
+ textNode = document.createTextNode('') as Text;
+ a.appendChild(textNode);
+ }
+
+ return element;
+ }
+
+ /**
+ * @private
+ *
+ * Styles are handled in CSS and usualy This renderer does not uses "selected" state
+ * at least if the drawer is closed after selection.
+ */
+ override public function updateRenderer():void
+ {
+ // override all and do nothing, all is managed in CSS
+ // there's no selection only hover state
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/StringItemRenderer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/StringItemRenderer.as
new file mode 100644
index 0000000..9b6ea04
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/StringItemRenderer.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.itemRenderers
+{
+ import org.apache.royale.html.supportClasses.DataItemRenderer;
+ COMPILE::SWF
+ {
+ import flash.text.TextFieldAutoSize;
+ import flash.text.TextFieldType;
+
+ import org.apache.royale.core.CSSTextField;
+ }
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+ import org.apache.royale.jewel.beads.controls.TextAlign;
+ import org.apache.royale.jewel.beads.itemRenderers.ITextItemRenderer;
+ import org.apache.royale.jewel.supportClasses.util.getLabelFromData;
+
+ /**
+ * The StringItemRenderer class displays data in string form using the data's toString()
+ * function.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class StringItemRenderer extends DataItemRenderer implements ITextItemRenderer
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function StringItemRenderer()
+ {
+ super();
+
+ typeNames = "jewel item string";
+
+ COMPILE::SWF
+ {
+ textField = new CSSTextField();
+ textField.type = TextFieldType.DYNAMIC;
+ textField.autoSize = TextFieldAutoSize.LEFT;
+ textField.selectable = false;
+ textField.parentDrawsBackground = true;
+ }
+
+ textAlign = new TextAlign();
+ addBead(textAlign);
+ }
+
+ private var textAlign:TextAlign;
+
+ COMPILE::SWF
+ public var textField:CSSTextField;
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ override public function addedToParent():void
+ {
+ super.addedToParent();
+
+ addChild(textField);
+
+ adjustSize();
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ override public function adjustSize():void
+ {
+ var cy:Number = height/2;
+
+ textField.x = 0;
+ textField.y = cy - textField.height/2;
+ textField.width = width;
+
+ updateRenderer();
+ }
+
+ /**
+ * The text currently displayed by the itemRenderer instance.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get text():String
+ {
+ COMPILE::SWF
+ {
+ return textField.text;
+ }
+ COMPILE::JS
+ {
+ return this.element.textContent;
+ }
+ }
+
+ public function set text(value:String):void
+ {
+ COMPILE::SWF
+ {
+ textField.text = value;
+ }
+ COMPILE::JS
+ {
+ this.element.textContent = value;
+ }
+ }
+
+ /**
+ * How text align in the itemRenderer instance.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get align():String
+ {
+ return textAlign.align;
+ }
+
+ public function set align(value:String):void
+ {
+ textAlign.align = value;
+ }
+
+ /**
+ * Sets the data value and uses the String version of the data for display.
+ *
+ * @param Object data The object being displayed by the itemRenderer instance.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion String
+ */
+ override public function set data(value:Object):void
+ {
+ super.data = value;
+ text = getLabelFromData(this, value);
+ }
+
+ // COMPILE::JS
+ // private var backgroundView:WrappedHTMLElement;
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this,'span');
+ // itemRenderers should provide something for the background to handle
+ // the selection and highlight
+ // backgroundView = element;
+ // return element;
+ }
+
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TableItemRenderer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TableItemRenderer.as
new file mode 100644
index 0000000..a729464
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TableItemRenderer.as
@@ -0,0 +1,76 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.itemRenderers
+{
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The TableItemRenderer class displays data in string form using the data's toString()
+ * function.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class TableItemRenderer extends ListItemRenderer
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function TableItemRenderer()
+ {
+ super();
+
+ typeNames = "jewel tableitem";
+ if(MXMLDescriptor != null)
+ {
+ typeNames += " with-childs";
+ }
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ addElementToWrapper(this, 'div');
+
+ if(MXMLDescriptor == null)
+ {
+ textNode = document.createTextNode('') as Text;
+ element.appendChild(textNode);
+ }
+ // itemRenderers should provide something for the background to handle
+ // the selection and highlight
+ // backgroundView = element;
+ return element;
+ }
+ }
+}
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/ListBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/IActivable.as
similarity index 72%
copy from frameworks/projects/Basic/src/main/royale/org/apache/royale/core/ListBase.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/IActivable.as
index a17d205..4591316 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/ListBase.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/IActivable.as
@@ -16,35 +16,30 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.core
-{
- /*
- *************
- * THIS CLASS IS NO LONGER NEEDED. INHERIT FROM DataContainerBase
- */
-
+package org.apache.royale.jewel.supportClasses
+{
+ import org.apache.royale.core.IId;
+
/**
- * The ListBase class is the base class for most lists
- * in Royale.
+ * IActivable is the interface a container implements to mark
+ * as the current active container
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
- public class ListBase extends DataContainerBase
- {
+ public interface IActivable extends IId
+ {
/**
- * Constructor.
+ * An id property for MXML documents.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
- public function ListBase()
- {
- super();
- }
+ function get isActive():Boolean;
+ function set isActive(value:Boolean):void;
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/INavigationRenderer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/INavigationRenderer.as
new file mode 100644
index 0000000..793b633
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/INavigationRenderer.as
@@ -0,0 +1,57 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ /**
+ * INavigationRenderer is the interface that all item renderers used with
+ * Navigation List component must implement.
+ * Jewel supports a basic implementation with NavigationLinkItemRenderer
+ *
+ * @see org.apache.royale.jewel.itemRenderers.NavigationLinkItemRenderer
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public interface INavigationRenderer
+ {
+ /**
+ * the navigation link url
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ function get href():String;
+ function set href(value:String):void;
+
+ /**
+ * The text of the navigation link
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ function get text():String;
+ function set text(value:String):void;
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/ResponsiveSizes.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/ResponsiveSizes.as
new file mode 100644
index 0000000..37bfe4b
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/ResponsiveSizes.as
@@ -0,0 +1,62 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ /**
+ * The ResponsiveSizes declares consants that are related to SASS variables
+ * created to provide media queries for different screen sizes
+ *
+ * by default:
+ *
+ * // DEVICE DIMENSIONS
+ * $phone: 0px
+ * $tablet: 768px
+ * $desktop: 992px
+ * $widescreen: 1200px
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class ResponsiveSizes
+ {
+ public static const PHONE:String = "phone";
+ public static const TABLET:String = "tablet";
+ public static const DESKTOP:String = "desktop";
+ public static const WIDESCREEN:String = "widescreen";
+
+ public static const PHONE_BREAKPOINT:Number = 0;
+ public static const TABLET_BREAKPOINT:Number = 768;
+ public static const DESKTOP_BREAKPOINT:Number = 992;
+ public static const WIDESCREEN_BREAKPOINT:Number = 1200;
+
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ResponsiveSizes()
+ {
+ }
+ }
+}
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
deleted file mode 100644
index 454cec2..0000000
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
+++ /dev/null
@@ -1,167 +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.
-//
-////////////////////////////////////////////////////////////////////////////////
-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;
- import org.apache.royale.utils.cssclasslist.toggleStyle;
- import org.apache.royale.utils.cssclasslist.addStyles;
- }
-
- /**
- * 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
- */
- COMPILE::JS
- public function get textNode():Text
- {
- return _textNode;
- }
-
- COMPILE::JS
- public function set textNode(value:Text):void
- {
- _textNode = value;
- }
-
- COMPILE::JS
- 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
- */
- COMPILE::JS
- public function get input():HTMLInputElement
- {
- return _input;
- }
- COMPILE::JS
- public function set input(value:HTMLInputElement):void
- {
- _input = value;
- }
-
- COMPILE::JS
- 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
- */
- COMPILE::JS
- public function get label():HTMLLabelElement
- {
- return _label;
- }
-
- COMPILE::JS
- public function set label(value:HTMLLabelElement):void
- {
- _label = value;
- }
-
-
- /**
- * override UIBase to affect positioner instead of element
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.2
- */
- COMPILE::JS
- override protected function setClassName(value:String):void
- {
- //positioner.className = value;
- addStyles(this, 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
- {
- toggleStyle(this, "is-invalid", _isInvalid);
- //positioner.classList.toggle("is-invalid", _isInvalid);
- //typeNames = positioner.className;
- }
- }
- }
-}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/Viewport.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/Viewport.as
new file mode 100644
index 0000000..21ab897
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/Viewport.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.supportClasses
+{
+ import org.apache.royale.core.IContentView;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.html.supportClasses.Viewport;
+ import org.apache.royale.utils.loadBeadFromValuesManager;
+
+ /**
+ * A Viewport is the area of a Container set aside for displaying
+ * content. If the content exceeds the visible area of the viewport
+ * it will be clipped or hidden.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class Viewport extends org.apache.royale.html.supportClasses.Viewport
+ {
+ /**
+ * Constructor
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function Viewport()
+ {
+ super();
+ }
+
+ /**
+ * @royaleignorecoercion Class
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ COMPILE::JS
+ override public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ contentArea = loadBeadFromValuesManager(IContentView, "iContentView", _strand) as UIBase;
+
+ if (!contentArea)
+ contentArea = value as UIBase;
+
+ // contentArea.element.style.overflow = "hidden";
+ contentArea.element.classList.add("viewport");
+ }
+ }
+}
\ No newline at end of file
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/checkbox/CheckBoxIcon.as
similarity index 63%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/RadioButtonIcon.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/checkbox/CheckBoxIcon.as
index 4d71794..a5ff11e 100644
--- 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/checkbox/CheckBoxIcon.as
@@ -16,55 +16,30 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel.supportClasses
+package org.apache.royale.jewel.supportClasses.checkbox
{
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 class CheckBoxIcon
{
- public function RadioButtonIcon()
+ public function CheckBoxIcon()
{
COMPILE::JS {
createElement();
}
- className = 'RadioButtonIcon';
+ className = 'CheckBoxIcon';
}
- /**
- * @private
- *
- * @royalesuppresspublicvarwarning
- */
- COMPILE::JS
- public var element:WrappedHTMLElement;
-
- COMPILE::JS
- public function get positioner():WrappedHTMLElement
- {
- return element;
+ COMPILE::JS {
+ public var element:WrappedHTMLElement;
+ public var positioner:WrappedHTMLElement;
}
-
+
private var _className:String;
- /**
- * @private
- */
public function get className():String
{
return _className;
@@ -80,9 +55,6 @@
private var _id:String;
- /**
- * @private
- */
public function get id():String
{
return _id;
@@ -104,13 +76,10 @@
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';
+ input.type = 'checkbox';
element = input as WrappedHTMLElement;
- element.royale_wrapper = this;
-
return element;
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/combobox/ComboBoxList.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/combobox/ComboBoxList.as
new file mode 100644
index 0000000..19914fb
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/combobox/ComboBoxList.as
@@ -0,0 +1,64 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.combobox
+{
+ import org.apache.royale.core.IPopUp;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.List;
+
+ //--------------------------------------
+ // Events
+ //--------------------------------------
+
+ /**
+ * @copy org.apache.royale.core.ISelectionModel#change
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="change", type="org.apache.royale.events.Event")]
+
+ /**
+ * The ComboBoxList class is the List class used internally
+ * by ComboBox as the dropdown/popup.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class ComboBoxList extends List implements IPopUp
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ComboBoxList()
+ {
+ super();
+ typeNames = "combobox-popup"
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/combobox/ComboBoxListDataGroup.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/combobox/ComboBoxListDataGroup.as
new file mode 100644
index 0000000..1557f69
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/combobox/ComboBoxListDataGroup.as
@@ -0,0 +1,57 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.combobox
+{
+ import org.apache.royale.jewel.supportClasses.list.DataGroup;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The ComboBoxListDataGroup class is the IItemRendererParent used internally
+ * by org.apache.royale.jewel.ComboBoxList class, the list component used
+ * in Jewel ComboBox
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class ComboBoxListDataGroup extends DataGroup
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ComboBoxListDataGroup()
+ {
+ super();
+
+ typeNames = "jewel list viewport scroll";
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumn.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumn.as
new file mode 100644
index 0000000..ead1b9c
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/DataGridColumn.as
@@ -0,0 +1,163 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.datagrid
+{
+ import org.apache.royale.core.IFactory;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.jewel.List;
+
+ /**
+ * The DataGridColumn class is the collection of properties that describe
+ * a column of the org.apache.royale.jewel.DataGrid: which renderer
+ * to use for each cell in the column, the width of the column, the label for the
+ * column, and the name of the field in the data containing the value to display
+ * in the column.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class DataGridColumn implements IDataGridColumn
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function DataGridColumn()
+ {
+ }
+
+ /**
+ * Returns a new instance of a UIBase component to be used as the actual
+ * column in the grid.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function createColumn():IUIBase
+ {
+ return new List();
+ }
+
+ private var _itemRenderer:IFactory;
+
+ /**
+ * The itemRenderer class or factory to use to make instances of itemRenderers for
+ * display of data.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get itemRenderer():IFactory
+ {
+ return _itemRenderer;
+ }
+ public function set itemRenderer(value:IFactory):void
+ {
+ _itemRenderer = value;
+ }
+
+ private var _columnWidth:Number = Number.NaN;
+
+ /**
+ * The width of the column (default is 100 pixels).
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get columnWidth():Number
+ {
+ return _columnWidth;
+ }
+ public function set columnWidth(value:Number):void
+ {
+ _columnWidth = value;
+ }
+
+ private var _label:String;
+
+ /**
+ * The label for the column (appears in the header area).
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get label():String
+ {
+ return _label;
+ }
+ public function set label(value:String):void
+ {
+ _label = value;
+ }
+
+ private var _dataField:String;
+
+ /**
+ * The name of the field containing the data value presented by the column. This value is used
+ * by the itemRenderer is select the property from the data.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get dataField():String
+ {
+ return _dataField;
+ }
+ public function set dataField(value:String):void
+ {
+ _dataField = value;
+ }
+
+ private var _className:String;
+
+ /**
+ * The name of the style class to use for this column. If this is not set
+ * it defaults to DataGridColumnList.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get className():String
+ {
+ return _className;
+ }
+ public function set className(value:String):void
+ {
+ _className = value;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/IDataGridColumn.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/IDataGridColumn.as
new file mode 100644
index 0000000..3708dd5
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datagrid/IDataGridColumn.as
@@ -0,0 +1,95 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.datagrid
+{
+ import org.apache.royale.core.IFactory;
+ import org.apache.royale.core.IUIBase;
+
+ public interface IDataGridColumn
+ {
+ /**
+ * The itemRenderer class or factory to use to make instances of itemRenderers for
+ * display of data.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ function get itemRenderer():IFactory;
+ function set itemRenderer(value:IFactory):void;
+
+ /**
+ * The width of the column (default is 100 pixels).
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ function get columnWidth():Number;
+ function set columnWidth(value:Number):void;
+
+ /**
+ * The label for the column (appears in the header area).
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ function get label():String;
+ function set label(value:String):void;
+
+ /**
+ * The name of the field containing the data value presented by the column. This value is used
+ * by the itemRenderer is select the property from the data.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ function get dataField():String;
+ function set dataField(value:String):void;
+
+ /**
+ * The name of the style class to use for this column. If this is not set
+ * it defaults to DataGridColumnList.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ function get className():String;
+ function set className(value:String):void;
+
+ /**
+ * Returns a new instance of a UIBase component to be used as the actual
+ * column in the grid.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ function createColumn():IUIBase;
+ }
+}
\ No newline at end of file
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datechooser/DateChooserTable.as
similarity index 81%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datechooser/DateChooserTable.as
index 75d1f7d..88ef623 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/datechooser/DateChooserTable.as
@@ -1,4 +1,3 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,13 +16,15 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-
-@namespace "http://www.w3.org/1999/xhtml";
-
-.Application
+package org.apache.royale.jewel.supportClasses.datechooser
{
- padding: 10px;
- margin: 10px;
+ import org.apache.royale.jewel.Table;
+
+ public class DateChooserTable extends Table
+ {
+ public function DateChooserTable()
+ {
+ super();
+ }
+ }
}
-
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/drawer/DrawerBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/drawer/DrawerBase.as
new file mode 100644
index 0000000..9161a34
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/drawer/DrawerBase.as
@@ -0,0 +1,137 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.drawer
+{
+ import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.IChild;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.jewel.Group;
+
+ COMPILE::SWF
+ {
+ import org.apache.royale.core.IRenderedObject;
+ import flash.display.DisplayObject;
+ }
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * Dispatched when the drawer open
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="openDrawer", type="org.apache.royale.events.Event")]
+
+ /**
+ * Dispatched when the drawer close
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="closeDrawer", type="org.apache.royale.events.Event")]
+
+ /**
+ * The DrawerBase class is the base class for a container component
+ * used for navigation.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class DrawerBase extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function DrawerBase()
+ {
+ super();
+
+ typeNames = "jewel drawer";
+ }
+
+ COMPILE::JS
+ protected var nav:HTMLElement;
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ nav = addElementToWrapper(this,'nav');
+ nav.className = "drawermain";
+
+ var aside:HTMLElement = document.createElement('aside') as HTMLElement;
+ aside.appendChild(nav);
+
+ positioner = aside as WrappedHTMLElement;
+ positioner.royale_wrapper = this;
+
+ return element;
+ }
+
+ /**
+ * @copy org.apache.royale.core.IParent#addElement()
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.IUIBase
+ */
+ override public function addElement(c:IChild, dispatchEvent:Boolean = true):void
+ {
+ COMPILE::SWF
+ {
+ if (c is IUIBase)
+ {
+ if (c is IRenderedObject)
+ $addChild(IRenderedObject(c).$displayObject);
+ else
+ $addChild(c as DisplayObject);
+ IUIBase(c).addedToParent();
+ }
+ else
+ $addChild(c as DisplayObject);
+ }
+ COMPILE::JS
+ {
+ nav.appendChild(c.positioner);
+ (c as IUIBase).addedToParent();
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/dropdownlist/DropDownListList.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/dropdownlist/DropDownListList.as
new file mode 100644
index 0000000..3fddc5c
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/dropdownlist/DropDownListList.as
@@ -0,0 +1,62 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.dropdownlist
+{
+ import org.apache.royale.core.IPopUp;
+ import org.apache.royale.jewel.List;
+
+ //--------------------------------------
+ // Events
+ //--------------------------------------
+
+ /**
+ * @copy org.apache.royale.core.ISelectionModel#change
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="change", type="org.apache.royale.events.Event")]
+
+ /**
+ * The DropDownListList class is the List class used internally
+ * by DropDownList as the dropdown/popup.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class DropDownListList extends List implements IPopUp
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function DropDownListList()
+ {
+ super();
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/list/DataGroup.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/list/DataGroup.as
new file mode 100644
index 0000000..3962ca2
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/list/DataGroup.as
@@ -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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.supportClasses.list
+{
+ import org.apache.royale.html.supportClasses.DataGroup;
+ import org.apache.royale.html.DataContainer;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ import org.apache.royale.html.beads.DataContainerView;
+ }
+
+ /**
+ * The DataGroup class is the IItemRendererParent used internally
+ * by org.apache.royale.jewel.List class.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class DataGroup extends DataContainer
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function DataGroup()
+ {
+ super();
+
+ typeNames = "jewel datagroup";
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this, 'div');
+ }
+ }
+}
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/radiobutton/RadioButtonIcon.as
similarity index 96%
rename from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/RadioButtonIcon.as
rename to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/radiobutton/RadioButtonIcon.as
index 4d71794..a1b82f5 100644
--- 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/radiobutton/RadioButtonIcon.as
@@ -16,7 +16,7 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel.supportClasses
+package org.apache.royale.jewel.supportClasses.radiobutton
{
COMPILE::JS {
import org.apache.royale.core.WrappedHTMLElement;
@@ -33,7 +33,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.4
*/
public class RadioButtonIcon
{
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/scrollbar/HScrollBar.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/scrollbar/HScrollBar.as
new file mode 100644
index 0000000..07612fb
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/scrollbar/HScrollBar.as
@@ -0,0 +1,49 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.scrollbar
+{
+ import org.apache.royale.core.IChrome;
+ import org.apache.royale.core.IViewportScroller;
+
+ /**
+ * The ScrollBar class represents either a vertical or horizontal control
+ * that allows the user to quickly scan through a component that does not
+ * wholly fit within its container.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class HScrollBar extends ScrollBar implements IChrome, IViewportScroller
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function HScrollBar()
+ {
+ super();
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/scrollbar/ScrollBar.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/scrollbar/ScrollBar.as
new file mode 100644
index 0000000..c4d6693
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/scrollbar/ScrollBar.as
@@ -0,0 +1,50 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.scrollbar
+{
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.IChrome;
+ import org.apache.royale.core.IViewportScroller;
+
+ /**
+ * The ScrollBar class represents either a vertical or horizontal control
+ * that allows the user to quickly scan through a component that does not
+ * wholly fit within its container.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class ScrollBar extends UIBase implements IChrome, IViewportScroller
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ScrollBar()
+ {
+ super();
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/scrollbar/ScrollingViewport.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/scrollbar/ScrollingViewport.as
new file mode 100644
index 0000000..0a99025
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/scrollbar/ScrollingViewport.as
@@ -0,0 +1,356 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.scrollbar
+{
+ import org.apache.royale.jewel.supportClasses.Viewport;
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+ import org.apache.royale.core.IContainer;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.IScrollingViewport;
+ import org.apache.royale.core.layout.EdgeData;
+ import org.apache.royale.core.ValuesManager;
+ COMPILE::SWF
+ {
+ import org.apache.royale.core.IViewportScroller;
+ import org.apache.royale.jewel.beads.models.ScrollBarModel;
+ import flash.geom.Rectangle;
+ import org.apache.royale.geom.Rectangle;
+ }
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.geom.Size;
+ import org.apache.royale.geom.Rectangle;
+
+ /**
+ * The ScrollingViewport extends the Viewport class by adding horizontal and
+ * vertical scroll bars, if needed, to the content area of a Container. In
+ * addition, the content of the Container is clipped so that items extending
+ * outside the Container are hidden and reachable only by scrolling.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ COMPILE::JS
+ public class ScrollingViewport extends Viewport implements IBead, IScrollingViewport
+ {
+ /**
+ * Constructor
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ScrollingViewport()
+ {
+ super();
+ }
+
+ public function get verticalScrollPosition():Number
+ {
+ return this.contentView.positioner.scrollTop;
+ }
+ public function set verticalScrollPosition(value:Number):void
+ {
+ this.contentView.positioner.scrollTop = value;
+ }
+
+ public function get horizontalScrollPosition():Number
+ {
+ return this.contentView.positioner.scrollLeft;
+ }
+ public function set horizontalScrollPosition(value:Number):void
+ {
+ this.contentView.positioner.scrollLeft = value;
+ }
+
+ /**
+ * @royaleignorecoercion HTMLElement
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ var component:UIBase;
+ if (contentView == null) {
+ component = value as UIBase;
+ } else {
+ component = contentView as UIBase;
+ }
+ //component.element.style.overflow = "auto";
+
+ //remove hard coded style in Viewport (overflow: hidden)
+ //contentArea.element.removeAttribute("style");
+ // contentArea.element.classList.add("viewport");
+ contentArea.element.classList.add("scroll");
+ }
+
+ /**
+ * @copy org.apache.royale.core.IViewport
+ */
+ override public function layoutViewportBeforeContentLayout(width:Number, height:Number):void
+ {
+ // does nothing for the JS platform
+ }
+
+ /**
+ * @copy org.apache.royale.core.IViewport
+ */
+ override public function layoutViewportAfterContentLayout(contentSize:Size):void
+ {
+ // does nothing for the JS platform
+ }
+ }
+
+ COMPILE::SWF
+ public class ScrollingViewport extends Viewport implements IBead, IScrollingViewport
+ {
+ /**
+ * Constructor
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function ScrollingViewport()
+ {
+ super();
+ }
+
+ private var _verticalScroller:ScrollBar;
+
+ public function get verticalScroller():IViewportScroller
+ {
+ return _verticalScroller;
+ }
+
+ private var _horizontalScroller:ScrollBar
+
+ public function get horizontalScroller():IViewportScroller
+ {
+ return _horizontalScroller;
+ }
+
+ private var _verticalScrollPosition:Number = 0;
+
+ public function get verticalScrollPosition():Number
+ {
+ return _verticalScrollPosition;
+ }
+ public function set verticalScrollPosition(value:Number):void
+ {
+ _verticalScrollPosition = value;
+ dispatchEvent(new Event("verticalScrollPositionChanged"));
+ handleVerticalScrollChange();
+ }
+
+ private var _horizontalScrollPosition:Number = 0;
+
+ public function get horizontalScrollPosition():Number
+ {
+ return _horizontalScrollPosition;
+ }
+ public function set horizontalScrollPosition(value:Number):void
+ {
+ _horizontalScrollPosition = value;
+ dispatchEvent(new Event("horizontalScrollPositionChanged"));
+ handleHorizontalScrollChange();
+ }
+
+ private var viewportWidth:Number;
+ private var viewportHeight:Number;
+
+ /**
+ * @copy org.apache.royale.core.IViewport
+ */
+ override public function layoutViewportBeforeContentLayout(width:Number, height:Number):void
+ {
+ super.layoutViewportBeforeContentLayout(width, height);
+ viewportWidth = width;
+ viewportHeight = height;
+ }
+
+ /**
+ * @copy org.apache.royale.core.IViewport
+ * @royaleignorecoercion org.apache.royale.core.IBorderPaddingMarginValuesImpl
+ */
+ override public function layoutViewportAfterContentLayout(contentSize:Size):void
+ {
+ var host:UIBase = UIBase(_strand);
+
+ var hadV:Boolean = _verticalScroller != null && _verticalScroller.visible;
+ var hadH:Boolean = _horizontalScroller != null && _horizontalScroller.visible;
+
+ var hostWidth:Number = host.width;
+ var hostHeight:Number = host.height;
+
+ var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(_strand as IUIBase);
+
+ hostWidth -= borderMetrics.left + borderMetrics.right;
+ hostHeight -= borderMetrics.top + borderMetrics.bottom;
+
+ var needV:Boolean = contentSize.height > viewportHeight;
+ var needH:Boolean = contentSize.width > viewportWidth;
+
+ // if sized to content, the container should stretch to fit, making the original
+ // viewport dimensions obsolete and scrollbars unnecessary.
+ // This might not work for the flexible child.
+ if (host.isWidthSizedToContent())
+ needH = false;
+ if (host.isHeightSizedToContent())
+ needV = false;
+
+ if (needV)
+ {
+ if (_verticalScroller == null) {
+ _verticalScroller = createVerticalScrollBar();
+ (_strand as IContainer).strandChildren.addElement(_verticalScroller);
+ }
+ }
+ if (needH)
+ {
+ if (_horizontalScroller == null) {
+ _horizontalScroller = createHorizontalScrollBar();
+ (_strand as IContainer).strandChildren.addElement(_horizontalScroller);
+ }
+ }
+
+ if (needV)
+ {
+ _verticalScroller.visible = true;
+ _verticalScroller.x = UIBase(_strand).width - borderMetrics.right - _verticalScroller.width;
+ _verticalScroller.y = borderMetrics.top;
+ _verticalScroller.setHeight(hostHeight - (needH ? _horizontalScroller.height : 0), false);
+
+ ScrollBarModel(_verticalScroller.model).maximum = contentSize.height;
+ ScrollBarModel(_verticalScroller.model).pageSize = contentArea.height;
+ ScrollBarModel(_verticalScroller.model).pageStepSize = contentArea.height;
+
+ if (contentSize.height > contentArea.height &&
+ (contentSize.height - contentArea.height) < _verticalScrollPosition)
+ _verticalScrollPosition = contentSize.height - contentArea.height;
+ }
+ else if (_verticalScroller) {
+ _verticalScroller.visible = false;
+ }
+
+ if (needH)
+ {
+ _horizontalScroller.visible = true;
+ _horizontalScroller.x = 0;
+ _horizontalScroller.y = UIBase(_strand).height - borderMetrics.bottom - _horizontalScroller.height;
+ _horizontalScroller.setWidth(hostWidth - (needV ? _verticalScroller.width : 0), false);
+
+ ScrollBarModel(_horizontalScroller.model).maximum = contentSize.width;
+ ScrollBarModel(_horizontalScroller.model).pageSize = contentArea.width;
+ ScrollBarModel(_horizontalScroller.model).pageStepSize = contentArea.width;
+
+ if (contentSize.width > contentArea.width &&
+ (contentSize.width - contentArea.width) < _horizontalScrollPosition)
+ _horizontalScrollPosition = contentSize.width - contentArea.width;
+ }
+ else if (_horizontalScroller) {
+ _horizontalScroller.visible = false;
+ }
+
+ var rect:flash.geom.Rectangle = new flash.geom.Rectangle(_horizontalScrollPosition, _verticalScrollPosition,
+ (_verticalScroller != null && _verticalScroller.visible) ? _verticalScroller.x : hostWidth,
+ (_horizontalScroller != null && _horizontalScroller.visible) ? _horizontalScroller.y : hostHeight);
+
+ contentArea.scrollRect = rect;
+ }
+
+ private function createVerticalScrollBar():ScrollBar
+ {
+ var vsbm:ScrollBarModel = new ScrollBarModel();
+ vsbm.minimum = 0;
+ vsbm.snapInterval = 1;
+ vsbm.stepSize = 1;
+ vsbm.value = 0;
+
+ var vsb:VScrollBar;
+ vsb = new VScrollBar();
+ vsb.model = vsbm;
+ vsb.visible = false;
+
+ vsb.addEventListener("scroll",handleVerticalScroll);
+ return vsb;
+ }
+
+ private function createHorizontalScrollBar():ScrollBar
+ {
+ var hsbm:ScrollBarModel = new ScrollBarModel();
+ hsbm.minimum = 0;
+ hsbm.snapInterval = 1;
+ hsbm.stepSize = 1;
+ hsbm.value = 0;
+
+ var hsb:HScrollBar;
+ hsb = new HScrollBar();
+ hsb.model = hsbm;
+ hsb.visible = false;
+
+ hsb.addEventListener("scroll",handleHorizontalScroll);
+ return hsb;
+ }
+
+ private function handleVerticalScroll(event:Event):void
+ {
+ var host:UIBase = UIBase(_strand);
+ var vpos:Number = ScrollBarModel(_verticalScroller.model).value;
+ var rect:flash.geom.Rectangle = contentArea.scrollRect;
+ rect.y = vpos;
+ contentArea.scrollRect = rect;
+
+ _verticalScrollPosition = vpos;
+ dispatchEvent(new Event("verticalScrollPositionChanged"));
+ }
+
+ private function handleHorizontalScroll(event:Event):void
+ {
+ var host:UIBase = UIBase(_strand);
+ var hpos:Number = ScrollBarModel(_horizontalScroller.model).value;
+ var rect:flash.geom.Rectangle = contentArea.scrollRect;
+ rect.x = hpos;
+ contentArea.scrollRect = rect;
+
+ _horizontalScrollPosition = hpos;
+ dispatchEvent(new Event("horizontalScrollPositionChanged"));
+ }
+
+ private function handleVerticalScrollChange():void
+ {
+ if (_verticalScroller) {
+ ScrollBarModel(_verticalScroller.model).value = verticalScrollPosition;
+ }
+ }
+
+ private function handleHorizontalScrollChange():void
+ {
+ if (_horizontalScroller) {
+ ScrollBarModel(_horizontalScroller.model).value = horizontalScrollPosition;
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/scrollbar/VScrollBar.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/scrollbar/VScrollBar.as
new file mode 100644
index 0000000..2a5e70e
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/scrollbar/VScrollBar.as
@@ -0,0 +1,49 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.scrollbar
+{
+ import org.apache.royale.core.IChrome;
+ import org.apache.royale.core.IViewportScroller;
+
+ /**
+ * The ScrollBar class represents either a vertical or horizontal control
+ * that allows the user to quickly scan through a component that does not
+ * wholly fit within its container.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class VScrollBar extends ScrollBar implements IChrome, IViewportScroller
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function VScrollBar()
+ {
+ super();
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TBody.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TBody.as
new file mode 100644
index 0000000..30850e9
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TBody.as
@@ -0,0 +1,62 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.table
+{
+ import org.apache.royale.jewel.Group;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The TBody class is a building block of Jewel SimpleTable and Table components,
+ * is used in TableView and represents an HTML <tbody> element
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class TBody extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function TBody()
+ {
+ super();
+
+ typeNames = "jewel tbody";
+ }
+
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this, 'tbody');
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TBodyContentArea.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TBodyContentArea.as
new file mode 100644
index 0000000..dd6012b
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TBodyContentArea.as
@@ -0,0 +1,264 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.table
+{
+ import org.apache.royale.core.IItemRenderer;
+ import org.apache.royale.core.IItemRendererParent;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.events.ItemAddedEvent;
+ import org.apache.royale.events.ItemRemovedEvent;
+ import org.apache.royale.html.supportClasses.ContainerContentArea;
+ import org.apache.royale.html.supportClasses.DataItemRenderer;
+ import org.apache.royale.jewel.supportClasses.table.TableRow;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The TBodyContentArea class is a building block of Jewel SimpleTable and Table components,
+ * is used in TableView and represents an HTML <tbody> element.
+ *
+ * The body part in a table use to be the "data" part and can be scrollable for this reason is implemented
+ * as a ContainerContentArea and provided via CSS as the IContentView.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class TBodyContentArea extends ContainerContentArea implements IItemRendererParent
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function TBodyContentArea()
+ {
+ super();
+
+ typeNames = "jewel tbody";
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this, 'tbody');
+ }
+
+ private var itemRenderers:Array = [];
+
+ /*
+ * IItemRendererParent
+ */
+
+ /**
+ * @copy org.apache.royale.core.IItemRendererParent#addItemRenderer()
+ * @private
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function addItemRenderer(renderer:IItemRenderer, dispatchAdded:Boolean):void
+ {
+ // this method is not used for now, so it needs to be tested to see if it's correctly implemented
+ var r:DataItemRenderer = renderer as DataItemRenderer;
+ r.itemRendererParent = host; // easy access from renderer to table
+ var tableCell:TableCell = new TableCell();
+ tableCell.addElement(r);
+
+ var row:TableRow;
+ if(r.rowIndex > numElements -1)
+ {
+ row = new TableRow();
+ addElementAt(row, r.rowIndex, false);
+ }
+ else
+ {
+ row = getElementAt(r.rowIndex) as TableRow;
+ }
+
+ row.addElement(tableCell, dispatchAdded);
+
+ itemRenderers.push(r);
+ dispatchItemAdded(renderer);
+ }
+
+ /**
+ * @copy org.apache.royale.core.IItemRendererParent#addItemRendererAt()
+ * @private
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function addItemRendererAt(renderer:IItemRenderer, index:int):void
+ {
+ var r:DataItemRenderer = renderer as DataItemRenderer;
+ r.itemRendererParent = host; // easy access from renderer to table
+ var tableCell:TableCell = new TableCell();
+ tableCell.addElement(r);
+
+ var row:TableRow;
+ if(r.rowIndex > numElements - 1)
+ {
+ row = new TableRow();
+ addElementAt(row, r.rowIndex, false);
+ }
+ else
+ {
+ row = getElementAt(r.rowIndex) as TableRow;
+ }
+
+ row.addElementAt(tableCell, r.columnIndex, true);
+
+ itemRenderers.push(r);
+ dispatchItemAdded(r);
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ public function dispatchItemAdded(renderer:IItemRenderer):void
+ {
+ var newEvent:ItemAddedEvent = new ItemAddedEvent("itemAdded");
+ newEvent.item = renderer;
+
+ (host as IEventDispatcher).dispatchEvent(newEvent);
+ }
+
+ /**
+ * @copy org.apache.royale.core.IItemRendererParent#removeItemRenderer()
+ * @private
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function removeItemRenderer(renderer:IItemRenderer):void
+ {
+ itemRenderers.splice(itemRenderers.indexOf(renderer), 1);
+ var newEvent:ItemRemovedEvent = new ItemRemovedEvent("itemRemoved");
+ newEvent.item = renderer;
+ (host as IEventDispatcher).dispatchEvent(newEvent);
+ }
+
+ private var processedRow:TableRow;
+
+ /**
+ * @copy org.apache.royale.core.IItemRendererParent#removeAllItemRenderers()
+ * @private
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function removeAllItemRenderers():void
+ {
+ while (numElements > 0) {
+ processedRow = getElementAt(0) as TableRow;
+ while (processedRow.numElements > 0) {
+ var cell:TableCell = processedRow.getElementAt(0) as TableCell;
+ var ir:IItemRenderer = cell.getElementAt(0) as IItemRenderer;
+ removeItemRenderer(ir);
+ cell.removeElement(ir);
+ processedRow.removeElement(cell);
+ }
+ removeElement(processedRow);
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.IItemRendererParent#getItemRendererAt()
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function getItemRendererAt(index:int):IItemRenderer
+ {
+ if (index < 0 || index >= itemRenderers.length) return null;
+ return itemRenderers[index] as IItemRenderer;
+ }
+
+ /**
+ * @copy org.apache.royale.core.IItemRendererParent#getItemRendererForIndex()
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function getItemRendererForIndex(index:int):IItemRenderer
+ {
+ if (index < 0 || index >= itemRenderers.length) return null;
+ return itemRenderers[index] as IItemRenderer;
+ }
+
+ /**
+ * Refreshes the itemRenderers. Useful after a size change by the data group.
+ * Not used for now. This should be revised in this case
+ *
+ * @copy org.apache.royale.core.IItemRendererParent#updateAllItemRenderers()
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function updateAllItemRenderers():void
+ {
+ var n:Number = numElements;
+ for (var i:Number = 0; i < n; i++)
+ {
+ var renderer:DataItemRenderer = getItemRendererAt(i) as DataItemRenderer;
+ if (renderer) {
+ renderer.setWidth(this.width,true);
+ renderer.adjustSize();
+ }
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.IItemRendererParent#numItemRenderers()
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get numItemRenderers():int{
+ return numElements;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TFoot.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TFoot.as
new file mode 100644
index 0000000..218a1b7
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TFoot.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.supportClasses.table
+{
+ import org.apache.royale.jewel.Group;
+ import org.apache.royale.core.IChrome;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The TFoot class is a building block of Jewel SimpleTable and Table components,
+ * is used in TableView and represents an HTML <tfoot> element
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class TFoot extends Group implements IChrome
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function TFoot()
+ {
+ super();
+
+ typeNames = "jewel tfoot";
+ }
+
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this, 'tfoot');
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/THead.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/THead.as
new file mode 100644
index 0000000..4e8cc84
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/THead.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.supportClasses.table
+{
+ import org.apache.royale.jewel.Group;
+ import org.apache.royale.core.IChrome;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The THead class is a building block of Jewel SimpleTable and Table components,
+ * is used in TableView and represents an HTML <thead> element
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class THead extends Group implements IChrome
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function THead()
+ {
+ super();
+
+ typeNames = "jewel thead";
+ }
+
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this, 'thead');
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableCell.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableCell.as
new file mode 100644
index 0000000..c6d5583
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableCell.as
@@ -0,0 +1,119 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.table
+{
+ import org.apache.royale.jewel.Group;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The TableCell class defines a table data cell in the Table component. This element
+ * may have nearly any type of Royale component as children.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class TableCell extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function TableCell()
+ {
+ super();
+
+ typeNames = "jewel tablecell";
+ }
+
+ private var _expandColumns:Number = 1;
+ /**
+ * The columns this cell will expand to occupy
+ * notice that you must not define the ocuppied cells
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get expandColumns():Number
+ {
+ return _expandColumns;
+ }
+ public function set expandColumns(value:Number):void
+ {
+ if(_expandColumns != value)
+ {
+ _expandColumns = value;
+
+ COMPILE::JS
+ {
+ element.setAttribute('colspan', _expandColumns);
+ }
+ }
+ }
+
+ private var _expandRows:Number = 1;
+ /**
+ * The rows this cell will expand to occupy
+ * notice that you must not define the ocuppied cells
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get expandRows():Number
+ {
+ return _expandRows;
+ }
+ public function set expandRows(value:Number):void
+ {
+ if(_expandRows != value)
+ {
+ _expandRows = value;
+
+ COMPILE::JS
+ {
+ element.setAttribute('rowspan', _expandRows);
+ }
+ }
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this,'td');
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableColumn.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableColumn.as
new file mode 100644
index 0000000..c2585fb
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableColumn.as
@@ -0,0 +1,77 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.table
+{
+ import org.apache.royale.jewel.supportClasses.datagrid.DataGridColumn;
+
+ /**
+ * TableColumn is a DataGridColumn used in Jewel Table component
+ * with special table properties.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class TableColumn extends DataGridColumn
+ {
+ public function TableColumn()
+ {
+ super();
+ }
+
+ private var _align:String = ""
+ /**
+ * How text align in the column
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get align():String
+ {
+ return _align;
+ }
+
+ public function set align(value:String):void
+ {
+ _align = value;
+ }
+
+ private var _columnLabelAlign:String = ""
+ /**
+ * How column label text align in the header
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get columnLabelAlign():String
+ {
+ return _columnLabelAlign;
+ }
+
+ public function set columnLabelAlign(value:String):void
+ {
+ _columnLabelAlign = value;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableHeaderCell.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableHeaderCell.as
new file mode 100644
index 0000000..f8ac2fd
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableHeaderCell.as
@@ -0,0 +1,62 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.table
+{
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The TableHeaderCell class defines a table header cell in the Table component.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class TableHeaderCell extends TableCell
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function TableHeaderCell()
+ {
+ super();
+
+ typeNames = "jewel tableheadercell";
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this, 'th');
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableRow.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableRow.as
new file mode 100644
index 0000000..b2ad58d
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TableRow.as
@@ -0,0 +1,65 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.table
+{
+ import org.apache.royale.jewel.Group;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The TableRow class is a building block of Jewel SimpleTable and Table components,
+ * is used in TableView and represents an HTML <tr> element
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class TableRow extends Group
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function TableRow()
+ {
+ super();
+
+ typeNames = "jewel tablerow";
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return addElementToWrapper(this, 'tr');
+ }
+ }
+}
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/textinput/ITextInput.as
similarity index 86%
rename from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/ITextField.as
rename to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/textinput/ITextInput.as
index e1ed050..d2f14c0 100644
--- 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/textinput/ITextInput.as
@@ -16,18 +16,18 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel.supportClasses
+package org.apache.royale.jewel.supportClasses.textinput
{
/**
- * ITextField is the interface that all text jewel classes.
- * It's used mainly in org.apache.royale.jewel.supportClasses.TextFieldBase
+ * ITextInput is the interface that all text jewel classes.
+ * It's used mainly in org.apache.royale.jewel.supportClasses.textinput.TextInputBase
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 9.2
*/
- public interface ITextField
+ public interface ITextInput
{
COMPILE::JS
{
@@ -37,7 +37,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.2
+ * @productversion Royale 0.9.4
*/
function get textNode():Text;
function set textNode(value:Text):void;
@@ -48,7 +48,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.2
+ * @productversion Royale 0.9.4
*/
function get input():HTMLInputElement;
function set input(value:HTMLInputElement):void;
@@ -59,7 +59,7 @@
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.9.2
+ * @productversion Royale 0.9.4
*/
function get label():HTMLLabelElement;
function set label(value:HTMLLabelElement):void;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/textinput/TextInputBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/textinput/TextInputBase.as
new file mode 100644
index 0000000..ad41d99
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/textinput/TextInputBase.as
@@ -0,0 +1,266 @@
+//
+// 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.textinput
+{
+ import org.apache.royale.core.StyledUIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.supportClasses.textinput.ITextInput;
+ import org.apache.royale.core.ITextModel;
+
+ COMPILE::JS
+ {
+ import goog.events;
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ /**
+ * Dispatched when the user changes the text.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Event(name="change", type="org.apache.royale.events.Event")]
+
+ /**
+ * The TextInputBase class is the base class for TextInput and TextArea Jewel controls
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class TextInputBase extends StyledUIBase implements ITextInput
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function TextInputBase()
+ {
+ super();
+
+ COMPILE::SWF
+ {
+ model.addEventListener("textChange", textChangeHandler);
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.html.Label#text
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion HTMLInputElement
+ */
+ [Bindable(event="change")]
+ public function get text():String
+ {
+ COMPILE::SWF
+ {
+ return ITextModel(model).text;
+ }
+ COMPILE::JS
+ {
+ return (element as HTMLInputElement).value;
+ }
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion HTMLInputElement
+ */
+ public function set text(value:String):void
+ {
+ COMPILE::SWF
+ {
+ inSetter = true;
+ ITextModel(model).text = value;
+ inSetter = false;
+ }
+ COMPILE::JS
+ {
+ (element as HTMLInputElement).value = value;
+ dispatchEvent(new Event('textChange'));
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.html.Label#html
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion HTMLInputElement
+ */
+ [Bindable(event="change")]
+ public function get html():String
+ {
+ COMPILE::SWF
+ {
+ return ITextModel(model).html;
+ }
+ COMPILE::JS
+ {
+ return (element as HTMLInputElement).value;
+ }
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion HTMLInputElement
+ */
+ public function set html(value:String):void
+ {
+ COMPILE::SWF
+ {
+ ITextModel(model).html = value;
+ }
+ COMPILE::JS
+ {
+ (element as HTMLInputElement).value = value;
+ dispatchEvent(new Event('textChange'));
+ }
+ }
+
+ private var inSetter:Boolean;
+
+ /**
+ * dispatch change event in response to a textChange event
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function textChangeHandler(event:Event):void
+ {
+ if (!inSetter)
+ dispatchEvent(new Event(Event.CHANGE));
+ }
+
+ COMPILE::JS
+ private var _textNode:Text;
+
+ /**
+ * @copy org.apache.royale.jewel.supportClasses.ITextInput#textNode
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ COMPILE::JS
+ public function get textNode():Text
+ {
+ return _textNode;
+ }
+
+ COMPILE::JS
+ public function set textNode(value:Text):void
+ {
+ _textNode = value;
+ }
+
+ COMPILE::JS
+ private var _input:HTMLInputElement;
+ /**
+ * @copy org.apache.royale.jewel.supportClasses.ITextInput#input
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ COMPILE::JS
+ public function get input():HTMLInputElement
+ {
+ return _input;
+ }
+ COMPILE::JS
+ public function set input(value:HTMLInputElement):void
+ {
+ _input = value;
+ }
+
+ COMPILE::JS
+ private var _label:HTMLLabelElement;
+
+ /**
+ * @copy org.apache.royale.jewel.supportClasses.ITextInput#label
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ COMPILE::JS
+ public function get label():HTMLLabelElement
+ {
+ return _label;
+ }
+
+ COMPILE::JS
+ public function set label(value:HTMLLabelElement):void
+ {
+ _label = value;
+ }
+
+ COMPILE::JS
+ /**
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royalesuppresspublicvarwarning
+ */
+ public var div:HTMLDivElement;
+
+ private var _isInvalid:Boolean = false;
+ /**
+ * A boolean flag to activate "is-invalid" effect selector.
+ * Defines the textinput as invalid on initial load.
+ * Optional
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get isInvalid():Boolean
+ {
+ return _isInvalid;
+ }
+ public function set isInvalid(value:Boolean):void
+ {
+ _isInvalid = value;
+
+ toggleClass("is-invalid", _isInvalid);
+ //positioner.classList.toggle("is-invalid", _isInvalid);
+ //typeNames = positioner.className;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/util/getLabelFromData.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/util/getLabelFromData.as
new file mode 100644
index 0000000..e1dde87
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/util/getLabelFromData.as
@@ -0,0 +1,49 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 "Licens"); 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.util
+{
+ /**
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ *
+ * Utility function to get a label string from a value object
+ */
+ public function getLabelFromData(obj:Object, data:Object):String
+ {
+ // slightly more code, but we bail early if it's a string which is often
+ if(!data) return "";
+
+ if (!(data is String))
+ {
+ if (obj["labelField"])
+ return String(data[obj["labelField"]]);
+
+ if (obj["dataField"])
+ return String(data[obj["dataField"]]);
+
+ if (data.hasOwnProperty("label"))
+ return String(data["label"]);
+ }
+
+ return String(data);
+
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/util/ClassListUtil.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/util/ClassListUtil.as
deleted file mode 100644
index abbdee0..0000000
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/util/ClassListUtil.as
+++ /dev/null
@@ -1,131 +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.
-//
-////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.util
-{
- /**
- * The UIBase class is the base class for most composite user interface
- * components. For the Flash Player, Buttons and Text controls may
- * have a different base class and therefore may not extend UIBase.
- * However all user interface components should implement IUIBase.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public class ClassListUtil
- {
- COMPILE::JS
- {
- import org.apache.royale.core.UIBase;
- import org.apache.royale.core.WrappedHTMLElement;
- }
-
- /**
- * Add one or more styles to the component. If the specified class already
- * exist, the class will not be added.
- *
- * @param value, a String with the style (or styles separated by an space) to
- * add from the component. If the string is empty doesn't perform any action
- *
- * @langversion 3.0
- * @productversion Royale 0.9.3
- */
- COMPILE::JS
- public static function addStyles(wrapper:UIBase, value:String):void
- {
- if (value == "") return;
-
- if (value.indexOf(" ") >= 0)
- {
- var classes:Array = value.split(" ");
- wrapper.element.classList.add.apply(wrapper.element.classList, classes);
- } else
- {
- wrapper.element.classList.add(value);
- }
- }
-
- /**
- * Removes one or more styles from the component. Removing a class that does not
- * exist, does not throw any error
- *
- * @param value, a String with the style (or styles separated by an space) to
- * remove from the component. If the string is empty doesn't perform any action
- *
- * @langversion 3.0
- * @productversion Royale 0.9.3
- */
- COMPILE::JS
- public static function removeStyles(wrapper:UIBase, value:String):void
- {
- if (value == "") return;
-
- if (value.indexOf(" ") >= 0)
- {
- var classes:Array = value.split(" ");
- wrapper.element.classList.remove.apply(wrapper.element.classList, classes);
- } else
- {
- wrapper.element.classList.remove(value);
- }
- }
-
- /**
- * Adds or removes a single style.
- *
- * The first parameter removes the style from an element, and returns false.
- * If the style does not exist, it is added to the element, and the return value is true.
- *
- * The optional second parameter is a Boolean value that forces the class to be added
- * or removed, regardless of whether or not it already existed.
- *
- * @langversion 3.0
- * @productversion Royale 0.9.3
- */
- COMPILE::JS
- public static function toggleStyle(wrapper:UIBase, value:String, force:Boolean = false):Boolean
- {
- return wrapper.element.classList.toggle(value, force);
- }
-
- /**
- * Removes all styles that are not in typeNames
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- COMPILE::JS
- public static function removeAllStyles(wrapper:UIBase):void
- {
- var classList:DOMTokenList = wrapper.element.classList;
- var i:int;
- for( i = classList.length; i > 0; i-- )
- {
- if(wrapper.typeNames.indexOf(classList[i]) != 0)
- {
- classList.remove(classList[i]);
- }
- }
- }
-
- }
-}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/_global.sass
index 19b9d16..66eb5ec 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -18,20 +18,102 @@
////////////////////////////////////////////////////////////////////////////////
@namespace j "library://ns.apache.org/royale/jewel"
+@namespace "http://www.w3.org/1999/xhtml"
-.layout.horizontal
- white-space: nowrap
- display: block
- > *
- display: inline-block
-.layout.vertical
- vertical-align: top
- > *
- display: block !important
+//j|Application *, .royale *, .royale *:before, .royale *:after
+* , :after, :before
+ box-sizing: border-box
-.layout.horizontal.space
- display: flex
- justify-content: space-between
- align-items: flex-start
+html, body
+ height: 100%
+// Firefox
+// remove dotted outline
+::-moz-focus-inner, ::-moz-focus-outer
+ border: 0
+button::-moz-focus-inner
+ padding: 0
+
+button, input, textarea
+ font-size: 100%
+
+.cursor-pointer
+ cursor: pointer
+
+j|View
+ IBeadView: ClassReference("org.apache.royale.html.beads.GroupView")
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
+
+j|ApplicationResponsiveView
+ IBeadView: ClassReference("org.apache.royale.html.beads.GroupView")
+ //IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
+
+.applicationResponsiveView
+ display: inline-flex
+ width: 100%
+ min-height: 100% // can't have 100% height without prevents app scrolling
+
+j|ApplicationView
+ IBeadView: ClassReference("org.apache.royale.html.beads.GroupView")
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
+ // IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
+
+// .responsive
+// width: 100%
+// height: 100%
+// display: flex
+// flex-direction: column
+// overflow-y: auto
+// overflow-x: hidden
+// position: relative
+// -webkit-overflow-scrolling: touch
+
+j|Group
+ IBeadView: ClassReference("org.apache.royale.html.beads.GroupView")
+
+j|HGroup
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout")
+
+j|VGroup
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
+
+j|Container
+ IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView")
+ //IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
+ IViewport: ClassReference("org.apache.royale.jewel.supportClasses.Viewport")
+ IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
+ //align-items: flex-start
+
+j|Image
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ImageModel")
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ImageView")
+//vertical-align: top
+
+//j|Grid
+// IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.GridLayout")
+
+j|DataGroup
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
+ IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.StringItemRenderer")
+ IViewport: ClassReference("org.apache.royale.jewel.supportClasses.Viewport")
+
+j|DataContainer
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DataProviderModel")
+ IBeadView: ClassReference("org.apache.royale.html.beads.DataContainerView")
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
+ IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView")
+ IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory")
+ IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.StringItemRenderer")
+ IViewport: ClassReference("org.apache.royale.jewel.supportClasses.Viewport")
+ IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
+
+@media -royale-swf
+ j|View
+ // --- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
+ // --- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead")
+
+ j|Container
+ // --- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
+ // --- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead")
+ IContentView: ClassReference("org.apache.royale.html.supportClasses.ContainerContentArea")
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as b/frameworks/projects/Jewel/src/main/sass/_mixins.sass
similarity index 67%
copy from frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
copy to frameworks/projects/Jewel/src/main/sass/_mixins.sass
index 7935bcf..4df3cdf 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/beads/IBorderBead.as
+++ b/frameworks/projects/Jewel/src/main/sass/_mixins.sass
@@ -16,20 +16,21 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.html.beads
-{
- import org.apache.royale.core.IBead;
- /**
- * The IBackgroundBead interface is a marker interface for beads
- * that draw backgrounds.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public interface IBorderBead extends IBead
- {
- }
-}
+=appear($val)
+ -webkit-appearance: $val
+ -moz-appearance: $val
+ -o-appearance: $val
+ -ms-appearance: $val
+ appearance: $val
+
+=visible-hidden-responsive-rules($size)
+ .visible-#{$size}
+ display: block !important
+
+ .hidden-#{$size}
+ display: none !important
+
+//$animation-curve-timing-function: cubic-bezier(.3, 0, .1, 2) !default
+@function animation-standard($name, $duration, $delay: 0ms)
+ @return $name $duration $delay //$animation-curve-timing-function
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/_variables.sass b/frameworks/projects/Jewel/src/main/sass/_variables.sass
new file mode 100644
index 0000000..e3b8259
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/_variables.sass
@@ -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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// DEVICE DIMENSIONS
+$phone: 0px
+$tablet: 768px
+$desktop: 992px
+$widescreen: 1200px
+
+$devices: (phone: $phone, tablet: $tablet) !default
+$computers: (desktop: $desktop, widescreen: $widescreen) !default
+$sizes: map-merge($devices, $computers)
+$size-names: map-keys($sizes)
+
+// VIISBLE rules for responsive
+$visible-sizes: ()
+@each $size in $size-names
+ $visible-sizes: append($visible-sizes, ".visible-#{$size}", comma)
+
+// HIDDEN rules for responsive
+$hidden-sizes: ()
+@each $size in $size-names
+ $hidden-sizes: append($hidden-sizes, ".hidden-#{$size}", comma)
+
+// HIDDEN FLEX rules for responsive
+$hidden-flex-sizes: ()
+@each $size in $size-names
+ $hidden-flex-sizes: append($hidden-flex-sizes, ".hidden-flex-#{$size}", comma)
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_alert.sass b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
index 5c368ab..1fe177c 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
@@ -20,55 +20,55 @@
// Jewel Alert
// Alert variables
-$alert-padding: 14px
+// $alert-padding: 14px
$alert-min-width: 350px
$alert-min-height: 200px
$alert-header-height: 50px
$alert-footer-height: 50px
-$alert-border-radius: 3px
+// $alert-border-radius: 3px
-$alert-title-font-size: 1.9em
-$alert-title-font-weight: bold
-$alert-title-color: #000000
+// $alert-title-font-size: 1.9em
+// $alert-title-font-weight: bold
+// $alert-title-color: #000000
-$alert-label-font-size: 1.1em
-$alert-label-font-weight: normal
-$alert-label-color: #000000
+// $alert-label-font-size: 1.1em
+// $alert-label-font-weight: normal
+// $alert-label-color: #000000
//$alert-close-button-size: 16px
//$alert-control-bar-align: 'center'
-$alert-modal-opacity: .5
+//$alert-modal-opacity: .5
.jewel.alert
- display: block
position: fixed
top: 50%
left: 50%
transform: translate(-50%, -50%)
- margin: 0
- padding: 0
- max-width: 100%
- max-height: 100%
+ // margin: 0
+ // padding: 0
+
+ //max-width: 100%
+ //max-height: 100%
min-width: $alert-min-width
min-height: $alert-min-height
- border: 0px solid
- border-radius: $alert-border-radius
- box-shadow: 0px 6px 60px -10px rgba(112,112,112,0.7)
- background-color: #FFFFFF
+ // border: 0px solid
+ // border-radius: $alert-border-radius
+ // box-shadow: 0px 6px 60px -10px rgba(112,112,112,0.7)
+ // background-color: #FFFFFF
.jewel.titlebar
- padding: $alert-padding $alert-padding 0px $alert-padding
+ // padding: $alert-padding $alert-padding 0px $alert-padding
height: $alert-header-height
- color: $alert-title-color
+ // color: $alert-title-color
.jewel.label
- font:
- size: $alert-title-font-size
- weight: $alert-title-font-weight
+ // font:
+ // size: $alert-title-font-size
+ // weight: $alert-title-font-weight
// .closebutton
// border: 0px
@@ -83,23 +83,26 @@
// &:hover
// background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 14 14' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-829, -278)'><g fill='#777777' transform='translate(825, 274)'><path d='M15.9921875,18 C15.8133104,18 11,13.05896 11,13.05896 C11,13.05896 6.20438984,18 6.0255127,18 C5.84663556,18 4,16.2295363 4,16.0506592 C4,15.871782 9.07348633,11 9.07348633,11 C9.07348633,11 4,6.21037128 4,6.03149414 C4,5.852617 5.84663556,4.05688477 6.0255127,4.05688477 C6.20438984,4.05688477 11,9.06176758 11,9.06176758 C11,9.06176758 15.8133104,4.05688477 15.9921875,4.05688477 C16.1710646,4.05688477 18,5.852617 18,6.03149414 C18,6.21037128 13.0563965,11 13.0563965,11 C13.0563965,11 18,15.871782 18,16.0506592 C18,16.2295363 16.1710646,18 15.9921875,18 Z'></path></g></g></svg>")
- .Group
+ .content
position: absolute
- padding: $alert-padding
+ // padding: $alert-padding
top: $alert-header-height
bottom: $alert-footer-height
+
+ //flex: 0 0 auto
width: 100%
+
overflow-y: auto
.jewel.label
white-space: normal
- color: $alert-label-color
- font:
- size: $alert-label-font-size
- weight: $alert-label-font-weight
+ // color: $alert-label-color
+ // font:
+ // size: $alert-label-font-size
+ // weight: $alert-label-font-weight
.jewel.controlbar
- padding: 0px $alert-padding $alert-padding $alert-padding
+ // padding: 0px $alert-padding $alert-padding $alert-padding
position: absolute
bottom: 0
height: $alert-footer-height
@@ -118,14 +121,19 @@
// margin-left: 6px
+ .backdrop
- background-color: rgba(0, 0, 0, $alert-modal-opacity)
+ //background-color: rgba(0, 0, 0, $alert-modal-opacity)
+
+@media (min-width: $tablet)
+ .jewel.alert
+ min-width: $alert-min-width + 100
j|Alert
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel")
+ //IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.AlertModel")
IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController")
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView")
@media -royale-swf
j|Alert
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead")
+ // --- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
+ // --- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass b/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass
new file mode 100644
index 0000000..d6df042
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_applicationmaincontent.sass
@@ -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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// Jewel ApplicationMainContent
+
+// ApplicationMainContent variables
+
+.jewel.main
+ width: 100%
+ min-height: 100%
+
+ // display: inline-block
+ // flex-grow: 1
+ // z-index: 1
+ // position: relative
+ // overflow: hidden !important
+
+// this adjust the container declared after TopAppBar and with only one row (most common case)
+// used by ApplicationMainContent
+// depends on $top-app-bar-row-height
+.has-topappbar
+ padding-top: $top-app-bar-row-height !important
+
+j|ApplicationMainContent
+ IBeadView: ClassReference("org.apache.royale.html.beads.ContainerView")
+ //IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout") // Basic layoutr doesn't work here
+ IViewport: ClassReference("org.apache.royale.jewel.supportClasses.Viewport")
+ IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_button.sass b/frameworks/projects/Jewel/src/main/sass/components/_button.sass
index 019c818..4ab510d 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_button.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_button.sass
@@ -17,4 +17,41 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Jewel Button
+
+// Button variables
+$button-margin: 0 !default
+$button-padding: 0.68em 1.12em !default
+
+.jewel.button
+ margin: $button-margin
+ padding: $button-padding
+
+ cursor: pointer
+ user-select: none
+
+ display: inline-flex
+ position: relative
+ align-items: center
+ justify-content: center
+ zoom: 1
+ vertical-align: middle
+ overflow: hidden
+ outline: none
+
+ // -- BUTTON LABEL
+ white-space: nowrap
+ line-height: normal !important
+
+ text:
+ align: center
+ decoration: none
+
+ // &:focus
+
+ &[disabled]
+ cursor: default
+
+ .fonticon
+ cursor: inherit
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textfield.sass b/frameworks/projects/Jewel/src/main/sass/components/_card.sass
similarity index 72%
copy from frameworks/projects/Jewel/src/main/sass/components/_textfield.sass
copy to frameworks/projects/Jewel/src/main/sass/components/_card.sass
index c6252cb..709dd77 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textfield.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_card.sass
@@ -17,10 +17,23 @@
//
////////////////////////////////////////////////////////////////////////////////
-.jewel.textfield
+// Jewel Card
-j|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")
+// Card variables
+$card-width: 240px !default
+$card-height: 52px !default
+
+.jewel.card
+ //flex-direction: column
+
+ min-width: $card-width
+ min-height: $card-height
+
+ // width: 350px
+ overflow: hidden
+ position: relative
+ //z-index: 1
+
+j|Card
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass b/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass
index 1af1146..5ce2423 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass
@@ -17,11 +17,85 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Jewel CheckBox
+
+// CheckBox variables
+$checkbox-button-size: 22px
+$checkbox-button-xoffset: 0px
+$checkbox-button-yoffset: 0px
+
.jewel.checkbox
+ display: inline-flex
+ position: relative
+
+ margin: 0
+ padding: 0
+
+ // width: 100%
+ height: $checkbox-button-size
+ cursor: pointer
+
+ // -- INPUT
+ input
+ +appear(none)
+ // cursor: pointer
+ display: inline-flex
+
+ margin: 0
+ padding: 0
+
+ width: $checkbox-button-size
+ height: $checkbox-button-size
+
+ line-height: $checkbox-button-size
+ opacity: 0
+
+ + span::before
+ content: ' '
+ position: absolute
+
+ left: $checkbox-button-xoffset
+ top: $checkbox-button-yoffset
+
+ width: $checkbox-button-size
+ height: $checkbox-button-size
+
+ + span::after
+ content: ' '
+ position: absolute
+
+ width: $checkbox-button-size
+ height: $checkbox-button-size
+
+ left: $checkbox-button-xoffset
+ top: $checkbox-button-yoffset
+
+ opacity: 0
+
+ &:checked + span::after, &:checked:active + span::after
+ opacity: 1
+
+ &:focus + span::before, &:checked:focus + span::before, &:checked:active:focus + span::before
+ outline: none
+
+ &[disabled]
+ cursor: unset
+
+ & + span
+ cursor: unset
+
+ // -- LABEL
+ span
+ // cursor: pointer
+
+ margin: 0
+ vertical-align: top
+
+ line-height: $checkbox-button-size + 2
@media -royale-swf
j|CheckBox
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.ToggleButtonModel")
+ // --- IBeadModel: ClassReference("org.apache.royale.html.beads.models.ToggleButtonModel")
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.CheckBoxView")
//font-size: 11px
//font-family: Arial
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass b/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
new file mode 100644
index 0000000..0e6c387
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
@@ -0,0 +1,183 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 ComboBox
+
+// ComboBox variables
+$combobox-button-width: 2.8em
+$combobox-button-size: 22px
+$combobox-input-width: 13.7em
+$combobox-button-xoffset: calc(50% - #{$combobox-button-size/2})
+$combobox-button-yoffset: calc(50% - #{$combobox-button-size/2})
+
+
+.jewel.combobox
+ display: inline-flex
+
+ .jewel.textinput
+ width: $combobox-input-width
+
+ .jewel.button
+ width: $combobox-button-width
+ &::before
+ margin: 0
+ padding: 0
+
+ line-height: $combobox-button-size
+
+ &::after
+ content: ' '
+ position: absolute
+
+ width: $combobox-button-size
+ height: $combobox-button-size
+
+ left: $combobox-button-xoffset
+ top: $combobox-button-yoffset
+
+j|ComboBox
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ComboBoxModel")
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ComboBoxView")
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ComboBoxController")
+ IPopUp: ClassReference("org.apache.royale.jewel.supportClasses.combobox.ComboBoxList")
+
+
+// ComboBoxList variables
+$combobox-popup-margin-offset: 10px
+$combobox-popup-overlay-color: #000 !default
+$combobox-popup-overlay-opacity: .65 !default
+$combobox-item-min-heigh: 34px
+
+.combobox-popup
+ position: fixed
+ pointer-events: none
+
+ bottom: 0
+ left: 0
+
+ width: 100%
+ height: 100%
+
+ overflow: hidden
+ contain: strict
+
+ z-index: 5
+
+ color: rgba(0, 0, 0, 0.8)
+
+ &::before
+ position: absolute
+ display: block
+
+ top: 0
+ left: 0
+
+ width: 100%
+ height: 100%
+
+ content: ""
+ opacity: 0
+
+ background-color: rgba($combobox-popup-overlay-color, $combobox-popup-overlay-opacity)
+ will-change: opacity
+ transition: animation-standard(opacity, .4s)
+
+
+ .jewel.list
+ transform: translate(-50%, 100%)
+ transition: none
+ will-change: transform, opacity
+
+ bottom: auto
+ top: calc(100% - #{$combobox-popup-margin-offset})
+ left: 50%
+ touch-action: none
+ box-shadow: 0px 0px 6px 1px rgba(.7, .7, .7, .7) !important
+
+ width: $combobox-input-width + $combobox-button-width
+ opacity: 0
+
+ &.open
+ pointer-events: auto
+
+ &::before
+ opacity: 1
+
+ .jewel.list
+ transform: translate(-50%, -100%)
+ transition: animation-standard(transform, .4s), animation-standard(opacity, .4s)
+ opacity: 1
+
+@media (max-width: $tablet)
+ .combobox-popup
+ .jewel.list
+ width: calc(100% - #{2*$combobox-popup-margin-offset})
+
+@media (min-width: $tablet) and (max-width: $desktop)
+ .combobox-popup
+ .jewel.list
+ width: calc(100% - #{30*$combobox-popup-margin-offset})
+
+@media (min-width: $desktop)
+ .combobox-popup
+ &::before
+ background-color: rgba($combobox-popup-overlay-color, 0)
+ .jewel.list
+ // transform: translate(0px, -200px)
+ transform: none
+ transition: none
+ box-shadow: none !important
+
+ .jewel.item
+ height: 0
+ overflow: hidden
+ transition: height 200ms ease-in
+
+ &.open
+ .jewel.list
+ transform: none
+ top: auto
+ left: auto
+
+ .jewel.item
+ height: $combobox-item-min-heigh //this should match $item-min-heigh in _itemrenderer.sass
+
+
+
+j|ComboBoxList
+ // IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ListView")
+ // IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController")
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
+ // IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory")
+ // IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.ListItemRenderer")
+ // IViewport: ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport")
+ // IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
+ // IBeadModel: ClassReference("org.apache.royale.html.beads.models.ArrayListSelectionModel")
+ // IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView")
+ IContentView: ClassReference("org.apache.royale.jewel.supportClasses.combobox.ComboBoxListDataGroup")
+ // border-style: solid
+ // border-radius: 4px
+ // border-color: #000000
+ // border-width: 1px
+ // background-color: #FFFFFF
+
+@media -royale-swf
+ j|ComboBoxList
+ IBackgroundBead: ClassReference('org.apache.royale.html.beads.SolidBackgroundBead')
+
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_controlbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_controlbar.sass
index 55e78ff..416eea4 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_controlbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_controlbar.sass
@@ -29,6 +29,6 @@
@media -royale-swf
j|ControlBar
IMeasurementBead: ClassReference("org.apache.royale.html.beads.ControlBarMeasurementBead")
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead")
+ // --- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
+ // --- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead")
//border: 1px solid #333333
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass b/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
new file mode 100644
index 0000000..bd46d75
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
@@ -0,0 +1,88 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 DateChooser
+
+// DateChooser variables
+$datechooser-button-size: 22px
+$datechooser-button-xoffset: calc(50% - #{$datechooser-button-size/2})
+$datechooser-button-yoffset: calc(50% - #{$datechooser-button-size/2})
+$datechooser-tableitem-size: 38px
+
+.jewel.datechooser
+
+ .jewel.table
+
+ .jewel.tableheadercell
+ padding: 12px 0px
+
+ .jewel.tableheadercell.buttonsRow
+
+ .prevMonthButton::before, .nextMonthButton::before
+ margin: 0
+ padding: 0
+
+ line-height: $datechooser-button-size
+ content: ' '
+ position: absolute
+
+ left: $datechooser-button-xoffset
+ top: $datechooser-button-yoffset
+
+ width: $datechooser-button-size
+ height: $datechooser-button-size
+
+ .prevMonthButton::after, .nextMonthButton::after
+ content: ' '
+ position: absolute
+
+ width: $datechooser-button-size
+ height: $datechooser-button-size
+
+ left: $datechooser-button-xoffset
+ top: $datechooser-button-yoffset
+
+ .jewel.tableheadercell.buttonsRow
+ padding: 4px
+
+ // td
+ .jewel.tableitem
+ width: $datechooser-tableitem-size
+ height: $datechooser-tableitem-size
+ .jewel.tableitem
+ padding: 2px
+ width: $datechooser-tableitem-size
+ height: $datechooser-tableitem-size
+
+.calendar
+ &.item
+ padding: 10px
+
+j|DateChooser
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DateChooserModel")
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DateChooserView")
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalFlowLayout")
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.DateChooserMouseController")
+
+j|DateChooserTable
+ // IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.DateChooserTableCellSelectionMouseController")
+ // IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.ListItemRenderer")
+ // IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView")
+ // IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController")
+
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass b/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass
new file mode 100644
index 0000000..466e3fa
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass
@@ -0,0 +1,156 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 DateField
+
+// DateField variables
+$datefield-button-size: 22px
+$datefield-button-xoffset: calc(50% - #{$datefield-button-size/2})
+$datefield-button-yoffset: calc(50% - #{$datefield-button-size/2})
+$datechooser-popup-margin-offset: 10px
+$datechooser-popup-overlay-color: #000 !default
+$datechooser-popup-overlay-opacity: .65 !default
+$datechooser-item-min-heigh: 34px
+
+.jewel.datefield
+ display: inline-flex
+
+ // .jewel.textinput
+ // input
+
+ .jewel.button
+
+ &::before
+ margin: 0
+ padding: 0
+
+ line-height: $datefield-button-size
+
+ &::after
+ content: ' '
+ position: absolute
+
+ width: $datefield-button-size
+ height: $datefield-button-size
+
+ left: $datefield-button-xoffset
+ top: $datefield-button-yoffset
+
+.datechooser-popup
+ position: fixed
+ pointer-events: none
+
+ bottom: 0
+ left: 0
+
+ width: 100%
+ height: 100%
+
+ overflow: hidden
+ contain: strict
+
+ z-index: 5
+
+ color: rgba(0, 0, 0, 0.8)
+
+ &::before
+ position: absolute
+ display: block
+
+ top: 0
+ left: 0
+
+ width: 100%
+ height: 100%
+
+ content: ""
+ opacity: 0
+
+ background-color: rgba($datechooser-popup-overlay-color, $datechooser-popup-overlay-opacity)
+ will-change: opacity
+ transition: animation-standard(opacity, .4s)
+
+
+ .jewel.table
+ transform: translate(-50%, 100%)
+ transition: none
+ will-change: transform, opacity
+
+ bottom: auto
+ top: calc(100% - #{$datechooser-popup-margin-offset})
+ left: 50%
+ touch-action: none
+ box-shadow: 0px 0px 6px 1px rgba(.7, .7, .7, .7) !important
+
+ opacity: 0
+
+ &.open
+ pointer-events: auto
+
+ &::before
+ opacity: 1
+
+ .jewel.table
+ transform: translate(-50%, -100%)
+ transition: animation-standard(transform, .4s), animation-standard(opacity, .4s)
+ opacity: 1
+
+@media (max-width: $tablet)
+ .datechooser-popup
+ .jewel.table
+ width: calc(100% - #{2*$datechooser-popup-margin-offset})
+
+@media (min-width: $tablet) and (max-width: $desktop)
+ .datechooser-popup
+ .jewel.table
+ width: calc(100% - #{30*$datechooser-popup-margin-offset})
+
+@media (min-width: $desktop)
+ .datechooser-popup
+ &::before
+ background-color: rgba($datechooser-popup-overlay-color, 0)
+ .jewel.table
+ // transform: translate(0px, -200px)
+ transform: none
+ transition: none
+ box-shadow: none !important
+
+ .jewel.item
+ height: 0
+ overflow: hidden
+ transition: height 200ms ease-in
+
+ &.open
+ .jewel.table
+ transform: none
+ top: auto
+ left: auto
+
+ .jewel.item
+ height: $datechooser-item-min-heigh //this should match $item-min-heigh in _itemrenderer.sass
+
+
+j|DateField
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DateFieldView")
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DateChooserModel")
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.DateFieldMouseController")
+ IFormatBead: ClassReference("org.apache.royale.html.accessories.DateFormatMMDDYYYY")
+
+@media -royale-swf
+
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass b/frameworks/projects/Jewel/src/main/sass/components/_divider.sass
similarity index 92%
copy from frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
copy to frameworks/projects/Jewel/src/main/sass/components/_divider.sass
index 019c818..5a27600 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_divider.sass
@@ -17,4 +17,10 @@
//
////////////////////////////////////////////////////////////////////////////////
+.jewel.divider
+ height: 0
+ margin: 0
+ border: none
+
+j|Divider
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass b/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass
new file mode 100644
index 0000000..f3abaa2
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass
@@ -0,0 +1,133 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 Drawer
+
+// Drawer variables
+$drawer-float-width-offset: 60px
+$drawer-float-max-width: 310px
+
+.jewel.drawer
+
+ &.float
+ position: fixed
+ pointer-events: none
+
+ top: 0
+ left: 0
+
+ width: 100%
+ height: 100%
+
+ overflow: hidden
+ contain: strict
+
+ z-index: 5
+
+ &::before
+ position: absolute
+ display: block
+
+ top: 0
+ left: 0
+
+ width: 100%
+ height: 100%
+
+ content: ""
+ opacity: 0
+
+ .drawermain
+ position: absolute
+
+ display: flex
+ flex-direction: column
+
+ left: 0
+ right: initial
+
+ height: 100%
+
+ &.open
+ pointer-events: auto
+
+ &::before
+ opacity: 1
+
+ &.fixed
+ width: 0
+
+ .drawermain
+ display: inline-flex
+ flex-direction: column
+
+ left: 0
+ right: auto
+
+ height: 100%
+
+ overflow: hidden
+ touch-action: none
+
+ &.open
+ pointer-events: auto
+
+ .drawermain
+ transform: none
+
+@media (min-width: $tablet)
+ .jewel.drawer
+ &.float
+ .drawermain
+ width: calc(100% - #{$drawer-float-width-offset})
+ max-width: $drawer-float-max-width
+
+// DrawerHeader
+.jewel.drawerheader
+ position: relative
+ display: flex
+ flex-direction: column
+ align-items: center
+ flex-shrink: 0
+
+ div
+ display: flex
+ position: absolute
+ top: 0
+ right: 0
+ bottom: 0
+ left: 0
+ align-items: flex-end
+
+// DrawerContent
+.jewel.drawercontent
+ flex-grow: 1
+ margin: 0
+ overflow-x: hidden
+ overflow-y: auto
+ -webkit-overflow-scrolling: touch
+ touch-action: pan-y
+
+
+
+j|Drawer
+
+j|DrawerHeader
+
+j|DrawerContent
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_dropdownlist.sass b/frameworks/projects/Jewel/src/main/sass/components/_dropdownlist.sass
index 5b13361..b757cd9 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_dropdownlist.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_dropdownlist.sass
@@ -20,12 +20,58 @@
// Jewel DropDownList
// DropDownList variables
+$dropdownlist-margin: 0 !default
+$dropdownlist-padding-vertical: .68em !default
+$dropdownlist-padding-horizontal: 1.12em !default
+$dropdownlist-button-size: 22px
+$dropdownlist-button-xoffset: calc(50% - #{$combobox-button-size/2})
+$dropdownlist-button-yoffset: calc(50% - #{$combobox-button-size/2})
+
+.jewel.dropdownlist
+ +appear(none)
+
+ margin: $dropdownlist-margin
+ padding: $dropdownlist-padding-vertical $dropdownlist-padding-horizontal
+
+ cursor: pointer
+ display: inline-flex
+
+ line-height: normal !important
+ outline: none
+
+j|DropDownList
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DropDownListView")
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ArrayListSelectionModel")
+ IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView")
+ IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory")
+ IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.DropDownListItemRenderer")
+ // IBeadController: ClassReference("org.apache.royale.mdl.beads.controllers.DropDownListController")
+
+ // IBeadModel: ClassReference("org.apache.royale.mdl.beads.models.DropDownListModel");
+ // IBeadLayout: ClassReference(null);
+ // IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayData");
@media -royale-swf
j|DropDownList
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.ArraySelectionModel")
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DropDownListView")
- IBeadController: ClassReference("org.apache.royale.html.beads.controllers.DropDownListController")
- IPopUp: ClassReference("org.apache.royale.html.supportClasses.DropDownListList")
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ArrayListSelectionModel")
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.DropDownListController")
+ IPopUp: ClassReference("org.apache.royale.jewel.supportClasses.dropdownlist.DropDownListList")
+ // font-size: 11px
+ // font-family: Arial
+
+ // j|DropDownListList
+ // IBeadModel: ClassReference("org.apache.royale.html.beads.models.ArraySelectionModel")
+ //--- IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.TextItemRendererFactoryForArrayData")
+ // IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory")
+ //--- IItemRenderer: ClassReference("org.apache.royale.core.supportClasses.StringItemRenderer")
+ //--- iBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
+ //--- iBorderBead: ClassReference('org.apache.royale.html.beads.SingleLineBorderBead')
+ //--- iBorderModel: ClassReference('org.apache.royale.html.beads.models.SingleLineBorderModel')
+
+ // border-style: solid
+ // border-radius: 4px
+ // border-color: #333333
+ // border-width: 1px
+ // background-color: #FFFFFF
// font-size: 11px
// font-family: Arial
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass b/frameworks/projects/Jewel/src/main/sass/components/_icons.sass
similarity index 81%
copy from frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
copy to frameworks/projects/Jewel/src/main/sass/components/_icons.sass
index 019c818..52ad225 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_icons.sass
@@ -17,4 +17,17 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Jewel Icons
+// Icons variables
+.fonticon
+ cursor: default
+ &.size-18
+ font-size: 18px
+ &.size-24
+ font-size: 24px
+ &.size-36
+ font-size: 36px
+ &.size-48
+ font-size: 48px
+
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass b/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
index a65da00..38a2063 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_itemRenderer.sass
@@ -20,7 +20,29 @@
// Jewel ListItemRenderer
// ListItemRenderer variables
+$item-min-height: 34px
+.jewel.item, .jewel.navigationlink
+ display: flex
+ min-height: $item-min-height
+ text-decoration: none
+ align-items: center
+ letter-spacing: 0
+ line-height: normal !important
+ overflow: hidden
+ cursor: auto
+ &.selectable
+ cursor: pointer
+
+ .fonticon
+ cursor: inherit
+
j|ListItemRenderer
- IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ItemRendererMouseController")
\ No newline at end of file
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController")
+
+.jewel.navigationlink
+ min-height: 48px
+
+j|NavigationLinkItemRenderer
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController")
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_label.sass b/frameworks/projects/Jewel/src/main/sass/components/_label.sass
index 4938afe..264df89 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_label.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_label.sass
@@ -17,11 +17,17 @@
//
////////////////////////////////////////////////////////////////////////////////
-.jewel.label
+.jewel.label
+ cursor: default
white-space: nowrap
+.jewel.label.multiline
+ white-space: normal
+ width: 100%
+
+
j|Label
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel")
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel")
//IMeasurementBead: ClassReference("org.apache.royale.html.beads.TextFieldLabelMeasurementBead")
//IBeadView: ClassReference("org.apache.royale.jewel.beads.views.JewelLabelViewBead")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
new file mode 100644
index 0000000..b155d79
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -0,0 +1,195 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 Layouts
+
+// Layouts variables
+$gaps: 10
+$gap-step: 3
+$gap: 0px
+
+$grid-columns: 12 !default
+$gap-size: 10px !default
+
+.viewport
+ overflow: hidden
+
+ &.scroll
+ overflow: auto
+
+// Absolute
+.layout.absolute
+ position: absolute
+ > *
+ position: absolute
+
+.layout
+ display: flex
+ //position: relative
+
+ // Vertical Items Align
+ &.itemsSameHeight
+ //align-items: stretch --> this doen't seems to work as expected
+ > *
+ > *
+ min-height: 100%
+ &.itemsCentered
+ align-items: center !important
+ &.itemsTop
+ align-items: flex-start !important
+ &.itemsBottom
+ align-items: flex-end !important
+
+ // Horizontal Items Align
+ &.itemsLeft
+ justify-content: flex-start !important
+ &.itemsCenter
+ justify-content: center !important
+ &.itemsRight
+ justify-content: flex-end !important
+ &.itemsSpaceBetween
+ justify-content: space-between !important
+ &.itemsSpaceAround
+ justify-content: space-around !important
+
+ &.itemsExpand
+ width: 100%
+ > *
+ flex: 1 0 auto !important
+
+ // Horizontal
+ &.horizontal
+ flex-direction: row !important
+ flex-wrap: nowrap
+ align-items: flex-start
+
+ > *
+ flex: 0 0 auto
+
+ &.flow
+ flex-wrap: wrap
+
+ &.centered
+ justify-content: center
+ align-items: center
+ align-content: center
+ height: 100%
+ > *
+ flex: 0 0 auto
+
+ @for $i from 1 through $gaps
+ &.gap-#{$i}x#{$gap-step}px
+ > *:first-child
+ margin: 0px
+ > *
+ margin: 0px 0px 0px ($gap + $i * $gap-step)
+
+ // Vertical
+ &.vertical
+ flex-direction: column !important
+ flex-wrap: nowrap
+ align-items: flex-start
+
+ > *
+ flex: 0 0 auto
+
+ &.flow
+ flex-wrap: wrap
+
+ &.centered
+ justify-content: center
+ align-items: center
+ align-content: center
+ flex-direction: column
+ height: 100%
+
+ @for $i from 1 through $gaps
+ &.gap-#{$i}x#{$gap-step}px
+ > *:first-child
+ margin: 0px
+ > *
+ margin: ($gap + $i * $gap-step) 0px 0px
+
+ // Tile
+ &.tile
+ flex-flow: row wrap
+ align-items: flex-start
+
+ // this not compile******
+ // &.gap
+ // > *:first-child
+ // margin: 0px
+ // > *:nth-child(-n+3)
+ // margin: 0px 0px 0px $gap-size
+ // > *:nth-child(3n)
+ // margin: $gap-size 0px 0px
+ // > *
+ // margin: $gap-size 0px 0px $gap-size
+
+ // Grid
+ &.grid
+ flex-flow: row wrap
+ width: 100%
+ height: 100%
+
+ > *
+ flex: 0 0 auto // flex-grow, flex-shrink and flex-basis
+ max-width: 100%
+ width: 100%
+
+
+ @each $size in $size-names
+ @media (min-width: map-get($sizes, $size))
+ @for $i from 1 through $grid-columns
+ @for $j from 1 through $i
+ .#{$size}-col-#{$j}-#{$i}
+ width: percentage($j / $i)
+ &.gap
+ > *
+ margin: $gap-size / 2
+ @each $size in $size-names
+ @media (min-width: map-get($sizes, $size))
+ @for $i from 1 through $grid-columns
+ @for $j from 1 through $i
+ .#{$size}-col-#{$j}-#{$i}
+ width: calc(#{percentage($j / $i)} - #{$gap-size})
+
+ &.table
+ display: table
+
+@each $size in $size-names
+ @if index($size-names, $size) == 1
+ @media (max-width: nth(nth($sizes, 2), 2) - 1)
+ +visible-hidden-responsive-rules($size)
+ @else if index($size-names, $size) != 1 and index($size-names, $size) < length($sizes)
+ @media (min-width: map-get($sizes, $size)) and (max-width: nth(nth($sizes, index($size-names, $size) + 1), 2) - 1)
+ +visible-hidden-responsive-rules($size)
+ @else if index($size-names, $size) == length($sizes)
+ @media (min-width: nth(nth($sizes, length($sizes)), 2))
+ +visible-hidden-responsive-rules($size)
+
+#{$visible-sizes}
+ display: none !important
+
+#{$hidden-sizes}
+ display: flex !important
+
+// #{$hidden-flex-sizes}
+// display: flex !important
+
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_list.sass b/frameworks/projects/Jewel/src/main/sass/components/_list.sass
index 734e1dd..a776c8b 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_list.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_list.sass
@@ -18,27 +18,43 @@
////////////////////////////////////////////////////////////////////////////////
// Jewel List
-
// List variables
+.jewel.list, .jewel.navigation
+ align-items: stretch
+ align-content: flex-start
+
j|List
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ListView")
- IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ListSingleSelectionMouseController")
- IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.VerticalLayout")
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController")
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory")
IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.ListItemRenderer")
- IViewport: ClassReference("org.apache.royale.html.supportClasses.ScrollingViewport")
+ IViewport: ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport")
IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.SingleSelectionCollectionViewModel")
- IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForCollectionView")
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ArrayListSelectionModel")
+ IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView")
//IBeadModel: ClassReference("org.apache.royale.html.beads.models.ArraySelectionModel")
//IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayData")
+
+j|Navigation
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ListView")
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController")
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
+ IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory")
+ IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.NavigationLinkItemRenderer")
+ IViewport: ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport")
+ IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ArrayListSelectionModel")
+ IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView")
+ // IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayData")
+
@media -royale-swf
j|List
- iBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
- iBorderBead: ClassReference('org.apache.royale.html.beads.SingleLineBorderBead')
- iBorderModel: ClassReference('org.apache.royale.html.beads.models.SingleLineBorderModel')
- IContentView: ClassReference("org.apache.royale.html.supportClasses.DataGroup")
+ //---iBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
+ //---iBorderBead: ClassReference('org.apache.royale.html.beads.SingleLineBorderBead')
+ //---iBorderModel: ClassReference('org.apache.royale.html.beads.models.SingleLineBorderModel')
+ IContentView: ClassReference("org.apache.royale.jewel.supportClasses.list.DataGroup")
//font-size: 11px
//font-family: Arial
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass b/frameworks/projects/Jewel/src/main/sass/components/_navigation.sass
similarity index 96%
copy from frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
copy to frameworks/projects/Jewel/src/main/sass/components/_navigation.sass
index 019c818..0479810 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_navigation.sass
@@ -18,3 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
+j|Navigation
+
+.jewel.navigation
+
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass b/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass
new file mode 100644
index 0000000..084b6b1
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_numericstepper.sass
@@ -0,0 +1,113 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 NumericStepper
+
+// NumericStepper variables
+$numericstepper-button-width: 22px
+$numericstepper-button-height: 10px
+$numericstepper-button-xoffset: calc(50% - #{$numericstepper-button-width/2})
+$numericstepper-button-yoffset: calc(50% - #{$numericstepper-button-height/2})
+
+.jewel.numericstepper
+ .jewel.textinput
+ display: inline-flex
+
+@media (max-width: $desktop)
+ .jewel.numericstepper
+ width: 190px
+ height: 39px
+ .jewel.textinput
+ z-index: 1
+ position: relative
+ left: 38px
+
+j|NumericStepper
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.RangeModel")
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.NumericStepperView")
+
+@media -royale-swf
+ j|NumericStepper
+ // iBorderBead: ClassReference('org.apache.royale.html.beads.SingleLineBorderBead')
+ // iBackgroundBead: ClassReference('org.apache.royale.html.beads.SolidBackgroundBead')
+ // padding: 0px
+ // border-style: none
+
+
+// Jewel Spinner
+
+// Spinner variables
+.jewel.spinner
+ display: inline-flex
+ flex-direction: column
+ vertical-align: top
+ .jewel.button
+ display: flex
+
+ &.up
+
+ &::after
+ content: ' '
+ position: absolute
+
+ width: $numericstepper-button-width
+ height: $numericstepper-button-height
+
+ left: $numericstepper-button-xoffset
+ top: $numericstepper-button-yoffset
+ &.down
+
+ &::after
+ content: ' '
+ position: absolute
+
+ width: $numericstepper-button-width
+ height: $numericstepper-button-height
+
+ left: $numericstepper-button-xoffset
+ top: $numericstepper-button-yoffset
+
+@media (max-width: $desktop)
+ .jewel.spinner
+ position: relative
+ left: -112px
+ flex-direction: row
+ width: auto
+ .jewel.button
+ width: 39px
+ height: 38px
+
+ &.up
+ // position: absolute
+ // left: 20px
+ &.down
+ // position: absolute
+ left: 110px
+
+
+j|Spinner
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.RangeModel")
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.SpinnerView")
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.SpinnerMouseController")
+ // width: 16px
+ // height: 32px
+
+@media -royale-swf
+ j|Spinner
+ // IBeadController: ClassReference("org.apache.royale.html.beads.controllers.SpinnerMouseController")
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_radiobutton.sass b/frameworks/projects/Jewel/src/main/sass/components/_radiobutton.sass
index bac5b6a..aa95a98 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_radiobutton.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_radiobutton.sass
@@ -17,11 +17,85 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Jewel RadioButton
+
+// RadioButton variables
+$radiobutton-button-size: 22px
+$radiobutton-button-xoffset: 0px
+$radiobutton-button-yoffset: 0px
+
.jewel.radiobutton
+ display: inline-flex
+ position: relative
+
+ margin: 0
+ padding: 0
+
+ // width: 100%
+ height: $radiobutton-button-size
+ cursor: pointer
+
+ // -- INPUT
+ input
+ +appear(none)
+ // cursor: pointer
+ display: inline-flex
+
+ margin: 0
+ padding: 0
+
+ width: $radiobutton-button-size
+ height: $radiobutton-button-size
+
+ line-height: $radiobutton-button-size
+ opacity: 0
+
+ + span::before
+ content: ' '
+ position: absolute
+
+ left: $radiobutton-button-xoffset
+ top: $radiobutton-button-yoffset
+
+ width: $radiobutton-button-size
+ height: $radiobutton-button-size
+
+ + span::after
+ content: ' '
+ position: absolute
+
+ left: $radiobutton-button-xoffset
+ top: $radiobutton-button-yoffset
+
+ width: $radiobutton-button-size
+ height: $radiobutton-button-size
+
+ opacity: 0
+
+ &:checked + span::after, &:checked:active + span::after
+ opacity: 1
+
+ &:focus + span::before, &:checked:focus + span::before, &:checked:active:focus + span::before
+ outline: none
+
+ &[disabled]
+ cursor: unset
+
+ & + span
+ cursor: unset
+
+ // -- LABEL
+ span
+ // cursor: pointer
+
+ margin: 0
+ vertical-align: top
+
+ line-height: $radiobutton-button-size + 2
@media -royale-swf
j|RadioButton
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel")
+ // --- IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel")
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.RadioButtonView")
//font-size: 11px
//font-family: Arial
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textfield.sass b/frameworks/projects/Jewel/src/main/sass/components/_sectioncontent.sass
similarity index 76%
rename from frameworks/projects/Jewel/src/main/sass/components/_textfield.sass
rename to frameworks/projects/Jewel/src/main/sass/components/_sectioncontent.sass
index c6252cb..87ea6b7 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textfield.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_sectioncontent.sass
@@ -17,10 +17,18 @@
//
////////////////////////////////////////////////////////////////////////////////
-.jewel.textfield
+// Jewel SectionContent
-j|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")
+// SectionContent variables
+.jewel.section
+ //padding: 40px
+ display: none
+ flex-flow: column nowrap
+
+ &.is-active
+ display: flex
+
+j|SectionContent
+ // IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
+ // gap: 3
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_slider.sass b/frameworks/projects/Jewel/src/main/sass/components/_slider.sass
index 122bbbb..bb4c187 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_slider.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_slider.sass
@@ -17,10 +17,105 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Jewel Slider
+
+// Slider variables
+$slider-margin: 20px
+$slider-padding: 0
+$slider-min-width: calc(100% - #{2 * $slider-margin})
+$slider-track-min-height: 6px
+$slider-thumb-size: 18px
+$slider-container-height: #{$slider-thumb-size + round($slider-thumb-size/2)}
+
.jewel.slider
- //width: 100px
- //height: 30px
- //position: relative
+ position: relative
+ height: $slider-container-height
+
+ display: flex !important
+ flex-direction: row
+
+ background: none
+
+ // -- INPUT
+ input
+ +appear(none)
+ outline: 0
+
+ cursor: pointer
+ user-select: none
+
+ align-self: center
+ z-index: 1
+
+ margin: 0 $slider-margin
+ padding: $slider-padding
+
+ width: $slider-min-width
+ height: $slider-thumb-size * 2 //needed for IE11
+
+ background: transparent
+
+ // -- TRACK
+ &::-webkit-slider-runnable-track
+ background: transparent
+
+ &::-moz-range-track
+ background: transparent
+ border: none
+
+ &::-ms-track
+ width: 100%
+ height: $slider-track-min-height
+ background: none
+ border: none
+ color: transparent
+
+ &::-ms-fill-lower
+ padding: 0
+ &::-ms-fill-upper
+ padding: 0
+
+ // -- THUMB
+ &::-webkit-slider-thumb, &::-moz-range-thumb
+ +appear(none)
+
+ &:focus
+ outline: none
+
+ &[disabled]
+ cursor: unset
+
+ &::-ms-tooltip
+ display: none
+
+.slider-track-container
+ position: absolute
+ display: flex
+
+ overflow: hidden
+ transform: translate(0, -#{ round($slider-track-min-height/2) })
+
+ margin: 0 #{ $slider-margin + round($slider-thumb-size/2) }
+ padding: 0
+
+ left: 0
+
+ width: calc(100% - #{ 2 * $slider-margin + $slider-thumb-size })
+ height: $slider-track-min-height
+
+ background: transparent
+ border: 0
+
+.slider-track-fill
+ position: relative
+ flex: 0
+ padding: 0
+
+.slider-track
+ position: relative
+ flex: 0
+ padding: 0
+
j|Slider
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.SliderRangeModel")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_table.sass b/frameworks/projects/Jewel/src/main/sass/components/_table.sass
new file mode 100644
index 0000000..6d5ff89
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_table.sass
@@ -0,0 +1,167 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 SimpleTable
+
+// SimpleTable variables
+
+.jewel.simpletable
+ position: relative
+ white-space: nowrap
+ border-spacing: 0px
+ overflow: hidden
+
+ .jewel.tableheadercell
+ position: relative
+ vertical-align: bottom
+ text-overflow: ellipsis
+ letter-spacing: 0
+ padding: 12px
+ text-align: left
+
+ .jewel.tbody
+ .jewel.tablerow
+ position: relative
+ transition-duration: .28s
+ // transition-timing-function: cubic-bezier(.4,0,.2,1)
+ transition-property: background-color
+
+ //td
+ .jewel.tablecell
+ position: relative
+ > *
+ padding: 12px
+
+j|SimpleTable
+
+
+
+// Jewel Table
+
+// Table variables
+$tableitem-min-height: 34px
+.jewel.table
+ position: relative
+ white-space: nowrap
+ border-spacing: 0px
+ overflow: hidden
+
+ // th
+ .jewel.tableheadercell
+ position: relative
+ vertical-align: bottom
+ text-overflow: ellipsis
+ letter-spacing: 0
+ padding: 12px
+ text-align: left
+
+ .jewel.tbody
+ .jewel.tablerow
+ position: relative
+ transition-duration: .28s
+ // transition-timing-function: cubic-bezier(.4,0,.2,1)
+ transition-property: background-color
+
+ // td
+ .jewel.tablecell
+ position: relative
+ // > *
+ // padding: 12px
+
+ &.fixedHeader
+ table-layout: fixed
+
+ // .jewel.thead tr
+ // display: block
+
+ .jewel.tbody
+ display: block
+ overflow: auto
+ // width must be table width
+
+ .jewel.tablerow
+ display: block
+
+ .jewel.tablecell
+ display: inline-block
+
+j|Table
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.TableLayout")
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.TableView")
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TableModel")
+ IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory")
+ IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.TableItemRenderer")
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.TableCellSelectionMouseController")
+ IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.TableItemRendererFactoryForCollectionView")
+ IViewport: ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport")
+ IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
+ IContentView: ClassReference("org.apache.royale.jewel.supportClasses.table.TBodyContentArea")
+
+
+.jewel.tableitem
+ padding: 10px
+ cursor: pointer
+ text-decoration: none
+ align-items: center
+ letter-spacing: 0
+ line-height: normal !important
+ overflow: hidden
+
+ &.with-childs
+ padding: 6px
+ &.calendar
+ border-radius: 10%
+
+.empty-cell
+ pointer-events: none
+
+j|TableItemRenderer
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController")
+
+
+
+j|TBody
+j|THead
+j|TFoot
+
+j|TableCell
+j|TableHeaderCell
+j|TableRow
+j|TableColumn
+
+
+@media -royale-swf
+ j|SimpleTable
+ // IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead")
+ // IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
+
+ j|TableCell
+ // IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.TableCellLayout")
+ // IBeadView: ClassReference("org.apache.royale.html.beads.TableCellView")
+
+ j|TableHeaderCell
+ // IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.TableHeaderLayout")
+ // IBeadView: ClassReference("org.apache.royale.html.beads.TableCellView")
+
+// Table Component
+// j|Table
+ // IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.SimpleTableLayout")
+ // IBeadView: ClassReference("org.apache.royale.jewel.beads.views.TableView")
+
+
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass b/frameworks/projects/Jewel/src/main/sass/components/_text.sass
similarity index 89%
copy from frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
copy to frameworks/projects/Jewel/src/main/sass/components/_text.sass
index 019c818..c30cd9a 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_text.sass
@@ -17,4 +17,9 @@
//
////////////////////////////////////////////////////////////////////////////////
-
+.alignTextLeft
+ text-align: left
+.alignTextRight
+ text-align: right
+.alignTextCenter
+ text-align: center
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
new file mode 100644
index 0000000..20f20a7
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
@@ -0,0 +1,112 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 TextInput
+
+// TextInput variables
+$textinput-margin: 0 !default
+$textinput-padding-vertical: .68em !default
+$textinput-padding-horizontal: 1.12em !default
+
+.jewel
+ &.textinput
+ position: relative
+ display: inline-flex
+
+ input
+ +appear(none)
+ margin: $textinput-margin
+ padding: $textinput-padding-vertical $textinput-padding-horizontal
+
+ max-width: 100%
+
+ flex: 1 0 auto
+ outline: none
+
+ text:
+ align: left
+ line-height: normal !important
+
+ &[disabled]
+ cursor: unset
+
+ &.icon
+ input
+ padding-left: $textinput-padding-horizontal + 1
+
+ i
+ &.fonticon
+ cursor: default
+ pointer-events: none
+ top: 50%
+ left: .45em
+ right: auto
+ position: absolute
+ text-align: center
+ margin-top: -.5em
+
+ &.right
+ input
+ padding-right: $textinput-padding-horizontal + 1
+ padding-left: $textinput-padding-horizontal
+
+ i
+ &.fonticon
+ left: auto
+ right: .45em
+
+
+j|TextInput
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel")
+ //IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView")
+ //IBeadController: ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController")
+
+
+// Jewel TextArea
+
+// TextArea variables
+$textarea-margin: 0 !default
+$textarea-padding: .72em 1.12em !default
+
+.jewel
+ &.textarea
+ position: relative
+ display: inline-flex
+
+ textarea
+ +appear(none)
+ margin: $textarea-margin
+ padding: $textarea-padding
+
+ max-width: 100%
+
+ flex: 1 0 auto
+ outline: none
+
+ text:
+ align: left
+ line-height: normal !important
+
+ &[disabled]
+ cursor: unset
+
+j|TextArea
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel")
+ //IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView")
+ //IBeadController: ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_titlebar.sass b/frameworks/projects/Jewel/src/main/sass/components/_titlebar.sass
index 49eca6d..873eae0 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_titlebar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_titlebar.sass
@@ -23,12 +23,12 @@
min-height: 34px
j|TitleBar
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.TitleBarModel")
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TitleBarModel")
IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout")
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.TitleBarView")
@media -royale-swf
j|TitleBar
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead")
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
+ // --- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead")
+ // --- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
//border: 1px solid #333333
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_togglebutton.sass b/frameworks/projects/Jewel/src/main/sass/components/_togglebutton.sass
new file mode 100644
index 0000000..cc129ce
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_togglebutton.sass
@@ -0,0 +1,58 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 variables
+$button-margin: 0 !default
+$button-padding: 0.72em 1.12em !default
+
+.jewel.togglebutton
+ margin: $button-margin
+ padding: $button-padding
+
+ cursor: pointer
+ user-select: none
+
+ display: inline-flex
+ position: relative
+ align-items: center
+ justify-content: center
+ zoom: 1
+ vertical-align: middle
+ overflow: hidden
+ outline: none
+
+ // -- BUTTON LABEL
+ white-space: nowrap
+ line-height: normal !important
+
+ text:
+ align: center
+ decoration: none
+
+ // &:focus
+
+ &[disabled]
+ cursor: unset
+
+@media -royale-swf
+ j|ToggleTextButton
+ //IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.ToggleButtonModel")
+ //IBeadView: ClassReference("org.apache.royale.html.beads.CSSTextToggleButtonView")
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/frameworks/projects/Jewel/src/main/sass/components/_tooltip.sass
similarity index 81%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to frameworks/projects/Jewel/src/main/sass/components/_tooltip.sass
index 75d1f7d..dd81997 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/frameworks/projects/Jewel/src/main/sass/components/_tooltip.sass
@@ -1,4 +1,3 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,13 +16,21 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-@namespace "http://www.w3.org/1999/xhtml";
+// Jewel ToolTip
-.Application
-{
- padding: 10px;
- margin: 10px;
-}
-
\ No newline at end of file
+// ToolTip variables
+
+
+.jewel
+ &.errorTip
+ padding: 6px
+ z-index: 5
+ margin-top: -31px !important
+
+ &::before
+ top: 100%
+ left: 8px
+ position: absolute
+ content: ""
+ margin-top: 0px
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
new file mode 100644
index 0000000..89b9aa1
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_topappbar.sass
@@ -0,0 +1,139 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 TopAppBar
+
+// TopAppBar variables
+$top-app-bar-row-height: 64px
+$top-app-bar-button-size: 48px
+
+.jewel.topappbar
+ display: inline-flex
+ flex: 1 1 auto
+
+ .topBarAppHeader
+ display: flex
+ flex-direction: column
+ justify-content: space-between
+ width: 100%
+ z-index: 4
+ position: fixed
+
+ &.fixed
+ transition: box-shadow 200ms linear
+
+.jewel.topappbarrow
+ display: flex
+ position: relative
+ width: 100%
+ height: $top-app-bar-row-height
+
+.jewel.topappbarsection
+ display: inline-flex
+ flex: 1 1 auto
+ align-items: center
+ min-width: 0
+ z-index: 1
+ justify-content: flex-start
+ order: -1
+
+ &.alignRight
+ justify-content: flex-end
+ order: 1
+
+ button
+ will-change: transform, opacity
+ display: flex
+ position: relative
+ flex-shrink: 0
+ align-items: center
+ justify-content: center
+ width: $top-app-bar-button-size
+ height: $top-app-bar-button-size
+ outline: none
+ text-decoration: none
+ opacity: 1
+
+ // &:active, &:active:focus, &:focus
+ // transition: opacity 0.4s 0ms
+ // opacity: 0.5
+
+ // &:before
+ // content: ""
+ // background: #90EE90
+ // display: block
+ // position: absolute
+ // padding-top: 300%
+ // padding-left: 350%
+ // margin-left: -20px!important
+ // margin-top: -120%
+ // opacity: 0
+ // transition: all 0.8s
+ // &:after
+ // content: ""
+ // background: #90EE90
+ // display: block
+ // position: absolute
+ // padding-top: 300%
+ // padding-left: 350%
+ // margin-left: -20px!important
+ // margin-top: -120%
+ // opacity: 0
+ // transition: all 0.8s
+
+ // &:active:after
+ // padding: 0
+ // margin: 0
+ // opacity: 1
+ // transition: 0s
+
+ // &:hover, &:hover:focus, &:active, &:active:focus, &:focus
+ // background: transparent
+ // box-shadow: none
+ // border: none
+
+ // &[disabled]
+ // background: transparent
+ // box-shadow: none
+ // border: none
+
+ .fonticon
+ margin-left: 0px
+ margin-right: 0px
+
+.jewel.topappbartitle
+ -moz-osx-font-smoothing: grayscale
+ -webkit-font-smoothing: antialiased
+ white-space: nowrap
+ overflow: hidden
+ z-index: 1
+ line-height: 2rem
+ letter-spacing: .0125em
+ text:
+ decoration: inherit
+ transform: inherit
+ overflow: ellipsis
+
+j|ToolBar
+
+j|ToolBarRow
+
+j|ToolBarSection
+
+j|ToolBarTitle
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index 239c77b..e17e52a 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -16,22 +16,40 @@
*/
// Variables
-
+@import "variables"
+@import "mixins"
+
// Global
@import "global"
// Components
@import "components/alert"
@import "components/button"
+@import "components/card"
@import "components/checkbox"
@import "components/controlbar"
+@import "components/combobox"
+@import "components/datechooser"
+@import "components/datefield"
+@import "components/divider"
+@import "components/drawer"
@import "components/dropdownlist"
+@import "components/icons"
@import "components/itemRenderer"
@import "components/label"
+@import "components/layout"
@import "components/list"
+@import "components/navigation"
+@import "components/numericstepper"
@import "components/radiobutton"
+@import "components/sectioncontent"
@import "components/slider"
-@import "components/textbutton"
-@import "components/textfield"
+@import "components/table"
+@import "components/text"
+@import "components/textinput"
@import "components/titlebar"
+@import "components/togglebutton"
+@import "components/tooltip"
+@import "components/topappbar"
+@import "components/applicationmaincontent"
diff --git a/frameworks/projects/MXRoyale/src/main/resources/mx-royale-manifest.xml b/frameworks/projects/MXRoyale/src/main/resources/mx-royale-manifest.xml
index 0358b09..c2db677 100644
--- a/frameworks/projects/MXRoyale/src/main/resources/mx-royale-manifest.xml
+++ b/frameworks/projects/MXRoyale/src/main/resources/mx-royale-manifest.xml
@@ -45,7 +45,8 @@
<component id="Container" class="mx.core.Container" />
<component id="HBox" class="mx.containers.HBox" />
<component id="HDividedBox" class="mx.containers.HDividedBox" />
- <component id="VBox" class="mx.containers.VBox" />
+ <component id="Panel" class="mx.containers.Panel" />
+ <component id="VBox" class="mx.containers.VBox" />
<component id="VDividedBox" class="mx.containers.VDividedBox" />
<component id="Panel" class="mx.containers.Panel" />
<component id="ViewStack" class="mx.containers.ViewStack" />
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/errors/EOFError.as b/frameworks/projects/MXRoyale/src/main/royale/mx/errors/EOFError.as
index 964894a..59593d5 100644
--- a/frameworks/projects/MXRoyale/src/main/royale/mx/errors/EOFError.as
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/errors/EOFError.as
@@ -58,7 +58,7 @@
}
COMPILE::JS
-public class EOFError extends Object
+public class EOFError
{
//--------------------------------------------------------------------------
//
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/external/ExternalInterface.as b/frameworks/projects/MXRoyale/src/main/royale/mx/external/ExternalInterface.as
index 7408f87..5b9df42 100644
--- a/frameworks/projects/MXRoyale/src/main/royale/mx/external/ExternalInterface.as
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/external/ExternalInterface.as
@@ -21,7 +21,7 @@
- public final class ExternalInterface extends Object
+ public final class ExternalInterface
{
public function ExternalInterface()
{
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/filters/BitmapFilter.as b/frameworks/projects/MXRoyale/src/main/royale/mx/filters/BitmapFilter.as
index be6e81e..442081a 100644
--- a/frameworks/projects/MXRoyale/src/main/royale/mx/filters/BitmapFilter.as
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/filters/BitmapFilter.as
@@ -28,7 +28,7 @@
* @playerversion AIR 1.1
* @productversion Royale 0.9.4
*/
-public class BitmapFilter extends Object
+public class BitmapFilter
{
public function BitmapFilter()
diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/system/ApplicationDomain.as b/frameworks/projects/MXRoyale/src/main/royale/mx/system/ApplicationDomain.as
index 4c2fd1f..6e89d39 100644
--- a/frameworks/projects/MXRoyale/src/main/royale/mx/system/ApplicationDomain.as
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/system/ApplicationDomain.as
@@ -29,7 +29,7 @@
* @productversion Royale 0.9.3
* @royalesuppresspublicvarwarning
*/
-public class ApplicationDomain extends Object
+public class ApplicationDomain
{
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/MDLClasses.as b/frameworks/projects/MaterialDesignLite/src/main/royale/MDLClasses.as
index e98aa02..15c4a11 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/MDLClasses.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/MDLClasses.as
@@ -40,6 +40,10 @@
import org.apache.royale.mdl.beads.UpgradeChildren; UpgradeChildren;
import org.apache.royale.mdl.beads.controllers.DropDownListController; DropDownListController;
+ COMPILE::JS
+ {
+ import org.apache.royale.mdl.utils.getMdlContainerParent; getMdlContainerParent;
+ }
COMPILE::SWF
{
import org.apache.royale.mdl.beads.views.SliderThumbView; org.apache.royale.mdl.beads.views.SliderThumbView;
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Dialog.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Dialog.as
index 99bfcb2..ff7ea62 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Dialog.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Dialog.as
@@ -126,6 +126,7 @@
public function showModal():void
{
prepareDialog();
+ _open = true;
COMPILE::JS
{
@@ -147,6 +148,7 @@
public function show():void
{
prepareDialog();
+ _open = true;
COMPILE::JS
{
@@ -164,10 +166,36 @@
*/
public function close():void
{
+ _open = false;
COMPILE::JS
{
dialog.close();
}
}
+
+ private var _open:Boolean;
+ /**
+ * Indicates whether the dialog is open.
+ * see https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/open
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get open():Boolean
+ {
+ return _open;
+ }
+
+ override public function get visible():Boolean{
+ return _open;
+ }
+ override public function set visible(value:Boolean):void{
+ if(value)
+ show();
+ else
+ close();
+ }
}
}
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Menu.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Menu.as
index 4c9bbd1..02f929b 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Menu.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Menu.as
@@ -229,5 +229,13 @@
{
return _classList.compute() + super.computeFinalClassNames();
}
+
+ public function toggle():void
+ {
+ COMPILE::JS
+ {
+ element["MaterialMenu"]["toggle"]();
+ }
+ }
}
}
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayout.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayout.as
index a469ea6..af29b46 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayout.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayout.as
@@ -21,12 +21,13 @@
import org.apache.royale.core.IApplicationView;
import org.apache.royale.events.Event;
import org.apache.royale.html.Group;
+ import org.apache.royale.utils.ClassSelectorList;
+ import org.apache.royale.core.IParent;
- COMPILE::JS
+ COMPILE::JS
{
import org.apache.royale.core.WrappedHTMLElement;
- import org.apache.royale.html.util.addElementToWrapper;
- import org.apache.royale.core.CSSClassList;
+ import org.apache.royale.mdl.utils.getMdlContainerParent;
}
/**
@@ -53,16 +54,11 @@
{
super();
- COMPILE::JS
- {
- _classList = new CSSClassList();
- }
-
+ classSelectorList = new ClassSelectorList(this);
typeNames = "mdl-layout mdl-js-layout";
}
- COMPILE::JS
- private var _classList:CSSClassList;
+ protected var classSelectorList:ClassSelectorList;
private var _applicationModel:Object;
@@ -112,12 +108,7 @@
{
_fixedHeader = value;
- COMPILE::JS
- {
- var classVal:String = "mdl-layout--fixed-header";
- value ? _classList.add(classVal) : _classList.remove(classVal);
- setClassName(computeFinalClassNames());
- }
+ classSelectorList.toggle("mdl-layout--fixed-header", value);
}
}
@@ -142,19 +133,23 @@
{
_fixedDrawer = value;
- COMPILE::JS
- {
- var classVal:String = "mdl-layout--fixed-drawer";
- value ? _classList.add(classVal) : _classList.remove(classVal);
- setClassName(computeFinalClassNames());
- }
+ classSelectorList.toggle("mdl-layout--fixed-drawer", value);
}
}
COMPILE::JS
- override protected function computeFinalClassNames():String
+ override protected function setClassName(value:String):void
{
- return _classList.compute() + super.computeFinalClassNames();
+ classSelectorList.addNames(value);
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IParent
+ */
+ COMPILE::JS
+ override public function get parent():IParent
+ {
+ return getMdlContainerParent(this.positioner);
}
}
}
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/ProgressBar.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/ProgressBar.as
index 8dbaa23..820a9f5 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/ProgressBar.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/ProgressBar.as
@@ -149,7 +149,7 @@
{
if (materialProgress && !_indeterminate)
{
- materialProgress.setProgress(value);
+ materialProgress["setProgress"](value);
}
}
@@ -171,7 +171,7 @@
{
if (!event.currentTarget) return;
- materialProgress = event.currentTarget.MaterialProgress;
+ materialProgress = event.currentTarget["MaterialProgress"];
setCurrentProgress(_currentProgress);
setCurrentBuffer(_currentBuffer);
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/itemRenderers/MenuItemRenderer.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/itemRenderers/MenuItemRenderer.as
index 0c2ae97..15d1ec2 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/itemRenderers/MenuItemRenderer.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/itemRenderers/MenuItemRenderer.as
@@ -18,7 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.mdl.itemRenderers
{
- import org.apache.royale.html.supportClasses.MXMLItemRenderer;
+ import org.apache.royale.html.supportClasses.MXMLItemRenderer;;
COMPILE::JS
{
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/itemRenderers/NavigationLinkItemRenderer.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/itemRenderers/NavigationLinkItemRenderer.as
index ff44147..93ca1d0 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/itemRenderers/NavigationLinkItemRenderer.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/itemRenderers/NavigationLinkItemRenderer.as
@@ -24,7 +24,7 @@
import org.apache.royale.html.util.addElementToWrapper;
}
- import org.apache.royale.html.supportClasses.MXMLItemRenderer;
+ import org.apache.royale.html.supportClasses.MXMLItemRenderer;;
/**
* The NavigationLinkItemRenderer defines the basic Item Renderer for a MDL NavigationLink List Component.
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/itemRenderers/TableRowItemRenderer.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/itemRenderers/TableRowItemRenderer.as
index 0ef30f7..45b556e 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/itemRenderers/TableRowItemRenderer.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/itemRenderers/TableRowItemRenderer.as
@@ -25,7 +25,7 @@
}
import org.apache.royale.html.TableRow;
- import org.apache.royale.html.supportClasses.MXMLItemRenderer;
+ import org.apache.royale.html.supportClasses.MXMLItemRenderer;;
/**
* The TableItemRenderer defines the basic Item Renderer for a MDL Table Component.
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabBarButtonItemRendererBase.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabBarButtonItemRendererBase.as
index 52e0a8c..e81a697 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabBarButtonItemRendererBase.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabBarButtonItemRendererBase.as
@@ -18,7 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.mdl.supportClasses
{
- import org.apache.royale.html.supportClasses.MXMLItemRenderer;
+ import org.apache.royale.html.supportClasses.MXMLItemRenderer;;
COMPILE::JS
{
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabItemRendererBase.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabItemRendererBase.as
index b357c0a..6347d9e 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabItemRendererBase.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabItemRendererBase.as
@@ -18,7 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.mdl.supportClasses
{
- import org.apache.royale.html.supportClasses.MXMLItemRenderer;
+ import org.apache.royale.html.supportClasses.MXMLItemRenderer;;
COMPILE::JS
{
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/utils/getMdlContainerParent.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/utils/getMdlContainerParent.as
new file mode 100644
index 0000000..3620450
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/utils/getMdlContainerParent.as
@@ -0,0 +1,52 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 "Licens"); 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.mdl.utils
+{
+ import org.apache.royale.core.IParent;
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ /**
+ * To some MDL components after upgrading process
+ * MDL framework adding additional container which is not part of Royale.
+ * Function is trying to return parent component of that added container.
+ *
+ * @langversion 3.0
+ * @productversion Royale 0.9.4
+ *
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion org.apache.royale.core.IParent
+ */
+ COMPILE::JS
+ public function getMdlContainerParent(positioner:WrappedHTMLElement):IParent
+ {
+ var p:WrappedHTMLElement = positioner.parentNode as WrappedHTMLElement;
+ var wrapper:IParent = p ? p.royale_wrapper as IParent : null;
+
+ if (!wrapper)
+ {
+ p = p ? p.parentNode as WrappedHTMLElement : null;
+ wrapper = p ? p.royale_wrapper as IParent : null;
+ }
+
+ return wrapper;
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Mobile/src/main/royale/org/apache/royale/mobile/beads/StackedViewManagerView.as b/frameworks/projects/Mobile/src/main/royale/org/apache/royale/mobile/beads/StackedViewManagerView.as
index 71bb7b3..3e028d6 100644
--- a/frameworks/projects/Mobile/src/main/royale/org/apache/royale/mobile/beads/StackedViewManagerView.as
+++ b/frameworks/projects/Mobile/src/main/royale/org/apache/royale/mobile/beads/StackedViewManagerView.as
@@ -25,7 +25,6 @@
import org.apache.royale.core.SimpleCSSStylesWithFlex;
import org.apache.royale.events.IEventDispatcher;
import org.apache.royale.events.Event;
- import org.apache.royale.html.beads.ContainerView;
import org.apache.royale.html.beads.layouts.HorizontalLayout;
import org.apache.royale.mobile.IViewManager;
import org.apache.royale.mobile.IViewManagerView;
diff --git a/frameworks/projects/Mobile/src/main/royale/org/apache/royale/mobile/beads/TabbedViewManagerView.as b/frameworks/projects/Mobile/src/main/royale/org/apache/royale/mobile/beads/TabbedViewManagerView.as
index bef33ee..01b7c15 100644
--- a/frameworks/projects/Mobile/src/main/royale/org/apache/royale/mobile/beads/TabbedViewManagerView.as
+++ b/frameworks/projects/Mobile/src/main/royale/org/apache/royale/mobile/beads/TabbedViewManagerView.as
@@ -25,7 +25,6 @@
import org.apache.royale.core.SimpleCSSStylesWithFlex;
import org.apache.royale.events.IEventDispatcher;
import org.apache.royale.events.Event;
- import org.apache.royale.html.beads.ContainerView;
import org.apache.royale.html.beads.layouts.HorizontalLayout;
import org.apache.royale.mobile.IViewManager;
import org.apache.royale.mobile.IViewManagerView;
diff --git a/frameworks/projects/Mobile/src/main/royale/org/apache/royale/mobile/beads/TopTabbedViewManagerView.as b/frameworks/projects/Mobile/src/main/royale/org/apache/royale/mobile/beads/TopTabbedViewManagerView.as
index 3f5cb21..6009e64 100644
--- a/frameworks/projects/Mobile/src/main/royale/org/apache/royale/mobile/beads/TopTabbedViewManagerView.as
+++ b/frameworks/projects/Mobile/src/main/royale/org/apache/royale/mobile/beads/TopTabbedViewManagerView.as
@@ -25,7 +25,6 @@
import org.apache.royale.core.SimpleCSSStylesWithFlex;
import org.apache.royale.events.IEventDispatcher;
import org.apache.royale.events.Event;
- import org.apache.royale.html.beads.ContainerView;
import org.apache.royale.html.beads.layouts.HorizontalLayout;
import org.apache.royale.mobile.IViewManager;
import org.apache.royale.mobile.IViewManagerView;
diff --git a/frameworks/projects/Mobile/src/main/royale/org/apache/royale/mobile/beads/ViewManagerViewBase.as b/frameworks/projects/Mobile/src/main/royale/org/apache/royale/mobile/beads/ViewManagerViewBase.as
index de5a84a..98675d5 100644
--- a/frameworks/projects/Mobile/src/main/royale/org/apache/royale/mobile/beads/ViewManagerViewBase.as
+++ b/frameworks/projects/Mobile/src/main/royale/org/apache/royale/mobile/beads/ViewManagerViewBase.as
@@ -18,6 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.mobile.beads
{
+ import org.apache.royale.html.beads.GroupView;
import org.apache.royale.core.IBeadModel;
import org.apache.royale.core.IBeadView;
import org.apache.royale.core.IStrand;
@@ -28,7 +29,6 @@
import org.apache.royale.events.Event;
import org.apache.royale.html.Container;
import org.apache.royale.html.beads.layouts.HorizontalLayout;
- import org.apache.royale.html.beads.GroupView;
import org.apache.royale.mobile.IViewManagerView;
import org.apache.royale.mobile.chrome.NavigationBar;
import org.apache.royale.mobile.models.ViewManagerModel;
diff --git a/frameworks/projects/Network/src/main/resources/basic-manifest.xml b/frameworks/projects/Network/src/main/resources/basic-manifest.xml
index 99d4ad3..52ab687 100644
--- a/frameworks/projects/Network/src/main/resources/basic-manifest.xml
+++ b/frameworks/projects/Network/src/main/resources/basic-manifest.xml
@@ -18,10 +18,10 @@
-->
-
<componentPackage>
-
+ <component id="SimpleRemoteObject" class="org.apache.royale.net.SimpleRemoteObject"/>
<component id="RemoteObject" class="org.apache.royale.net.RemoteObject"/>
+ <component id="CompressedRemoteObject" class="org.apache.royale.net.CompressedRemoteObject"/>
<component id="HTTPService" class="org.apache.royale.net.HTTPService"/>
<component id="BinaryUploader" class="org.apache.royale.net.BinaryUploader"/>
<component id="CORSCredentialsBead" class="org.apache.royale.net.beads.CORSCredentialsBead"/>
diff --git a/frameworks/projects/Network/src/main/royale/NetworkClasses.as b/frameworks/projects/Network/src/main/royale/NetworkClasses.as
index 8326aee..902c70e 100644
--- a/frameworks/projects/Network/src/main/royale/NetworkClasses.as
+++ b/frameworks/projects/Network/src/main/royale/NetworkClasses.as
@@ -33,21 +33,22 @@
import org.apache.royale.net.events.ResultEvent; ResultEvent;
import org.apache.royale.net.events.FaultEvent; FaultEvent;
- import org.apache.royale.net.remoting.messages.AcknowledgeMessageExt;
- import org.apache.royale.net.remoting.messages.CommandMessage;
- import org.apache.royale.net.remoting.messages.AsyncMessage; AsyncMessage;
- import org.apache.royale.net.remoting.messages.RemotingMessage; RemotingMessage;
import org.apache.royale.net.remoting.messages.AcknowledgeMessage; AcknowledgeMessage;
+ import org.apache.royale.net.remoting.messages.AcknowledgeMessageExt;
+ import org.apache.royale.net.remoting.messages.AsyncMessage; AsyncMessage;
+ import org.apache.royale.net.remoting.messages.AsyncMessageExt;
+ import org.apache.royale.net.remoting.messages.CommandMessage; CommandMessage;
+ import org.apache.royale.net.remoting.messages.CommandMessageExt;
+ import org.apache.royale.net.remoting.messages.RemotingMessage; RemotingMessage;
import org.apache.royale.net.remoting.messages.RoyaleClient; RoyaleClient;
- import org.apache.royale.net.utils.RPCUIDUtil; RPCUIDUtil;
-
import org.apache.royale.reflection.registerClassAlias;
//RpcClassAliasInitializer
- registerClassAlias("org.apache.royale.net.remoting.messages.CommandMessage", CommandMessage);
registerClassAlias("DSK", AcknowledgeMessageExt);
-
+ registerClassAlias("DSA", AsyncMessageExt);
+ registerClassAlias("DSC", CommandMessageExt);
+
}
}
diff --git a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/CompressedRemoteObject.as b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/CompressedRemoteObject.as
new file mode 100644
index 0000000..363861c
--- /dev/null
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/CompressedRemoteObject.as
@@ -0,0 +1,73 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.net
+{
+ import org.apache.royale.net.remoting.amf.AMFBinaryData;
+ import org.apache.royale.net.events.ResultEvent;
+
+ COMPILE::SWF
+ {
+ import flash.utils.ByteArray;
+ }
+
+ /**
+ * A RemoteObject that performs automatic serialization/deserialization of results.
+ *
+ * It deserializes the compressed ByteArray in order to optimize the transfer time.
+ * TOOD improve to serialize the sending.
+ *
+ */
+ public class CompressedRemoteObject extends RemoteObject
+ {
+ /**
+ * Uses the pako library for the zlib compression algorithm
+ *
+ * <inject_html>
+ * <script src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.6/pako.min.js"></script>
+ * </inject_html>
+ */
+ public function CompressedRemoteObject()
+ {
+ super();
+ }
+
+ override public function resultHandler(param:Object):void
+ {
+ COMPILE::JS
+ {
+ // --- Transform the number array into a bytearray
+ var bytearray:Uint8Array = new Uint8Array(param.body);
+
+ // --- uncompress the bytearray to get the real object (tree) and create the AMFBinaryData with it
+ var data:AMFBinaryData = new AMFBinaryData(window["pako"].inflate(bytearray));
+
+ // --- dispatch the ResultEvent like in the standard RemoteObject with the inflated result object
+ dispatchEvent(new ResultEvent(ResultEvent.RESULT, data.readObject()));
+ }
+
+ COMPILE::SWF
+ {
+ // --- SWF not tested
+ var byteArray:ByteArray = param.body as ByteArray;
+ byteArray.uncompress();
+ dispatchEvent(new ResultEvent(ResultEvent.RESULT, byteArray.readObject()));
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/HTTPConstants.as b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/HTTPConstants.as
index 2a4acad..f36295a 100644
--- a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/HTTPConstants.as
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/HTTPConstants.as
@@ -18,7 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.net
{
- public final class HTTPConstants extends Object
+ public final class HTTPConstants
{
/**
*
diff --git a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/RemoteObject.as b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/RemoteObject.as
index 95d8b09..0067f3d 100755
--- a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/RemoteObject.as
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/RemoteObject.as
@@ -1,119 +1,109 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-// 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.net
-{
-
- import org.apache.royale.core.IBead;
- import org.apache.royale.core.IStrand;
- import org.apache.royale.events.EventDispatcher;
- import org.apache.royale.net.events.FaultEvent;
- import org.apache.royale.net.events.ResultEvent;
- import org.apache.royale.net.remoting.Operation;
- import org.apache.royale.net.remoting.amf.AMFNetConnection;
- import org.apache.royale.reflection.getClassByAlias;
- import org.apache.royale.reflection.registerClassAlias;
- import org.apache.royale.net.remoting.messages.AcknowledgeMessage;
- import org.apache.royale.net.remoting.messages.RoyaleClient;
-
- [Event(name="result", type="org.apache.royale.net.events.ResultEvent")]
- [Event(name="fault", type="org.apache.royale.net.events.FaultEvent")]
- public class RemoteObject extends EventDispatcher implements IBead
- {
- private var _endPoint:String;
- private var _destination:String;
- private var _source:String;
-
- /**
- * @private
- * The connection to the server
- *
- * @royalesuppresspublicvarwarning
- */
- public var nc:AMFNetConnection = new AMFNetConnection();
-
- /**
- *
- */
- public function RemoteObject()
- {
- }
-
- private var _strand:IStrand;
-
- public function set strand(value:IStrand):void
- {
- _strand = value;
- }
-
- public function set endPoint(value:String):void
- {
- _endPoint = value;
- }
- public function get endPoint():String
- {
- return _endPoint;
- }
-
- public function set destination(value:String):void
- {
- _destination = value;
- }
- public function get destination():String
- {
- return _destination;
- }
-
- public function set source(value:String):void
- {
- _source = value;
- }
- public function get source():String
- {
- return _source;
- }
-
- public function send(operation:String, params:Array):void
- {
- nc.connect(endPoint);
-
- var op:Operation = new Operation(operation, this, params);
- op.send();
- }
-
- public function resultHandler(param:Object):void
- {
- if (param is AcknowledgeMessage)
- {
- // Set the server assigned RoyaleClient Id.
- if (RoyaleClient.getInstance().id == null && param.clientId)//msg.headers[AbstractMessage.ROYALE_CLIENT_ID_HEADER] != null)
- {
- RoyaleClient.getInstance().id = param.clientId;//msg.headers[AbstractMessage.ROYALE_CLIENT_ID_HEADER];
- //trace("SET RoyaleClient.getInstance().id " + RoyaleClient.getInstance().id);
- }
- }
-
- dispatchEvent(new ResultEvent(ResultEvent.RESULT, param.body));
- }
-
- public function faultHandler(param:Object):void
- {
- dispatchEvent(new FaultEvent(FaultEvent.FAULT, param));
- }
- }
-}
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.net
+{
+
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.EventDispatcher;
+ import org.apache.royale.net.events.FaultEvent;
+ import org.apache.royale.net.events.ResultEvent;
+ import org.apache.royale.net.remoting.Operation;
+ import org.apache.royale.net.remoting.amf.AMFNetConnection;
+
+ [Event(name="result", type="org.apache.royale.net.events.ResultEvent")]
+ [Event(name="fault", type="org.apache.royale.net.events.FaultEvent")]
+ /**
+ * This is the RemoteObject that has a similar behaviour that Flex RemoteObject
+ * and can be use with BlazeDS, LCDS or CF backends
+ */
+ public class RemoteObject extends EventDispatcher implements IBead
+ {
+ private var _endPoint:String;
+ private var _destination:String;
+
+ /**
+ * @private
+ * The connection to the server
+ *
+ * @royalesuppresspublicvarwarning
+ */
+ public var nc:AMFNetConnection = new AMFNetConnection();
+
+ /**
+ * @private
+ * A channel specific override to determine whether small messages should
+ * be used. If set to false, small messages will not be used even if they
+ * are supported by an endpoint.
+ *
+ * @royalesuppresspublicvarwarning
+ */
+ public var enableSmallMessages:Boolean = true;
+
+ /**
+ * constructor
+ */
+ public function RemoteObject()
+ {
+ }
+
+ private var _strand:IStrand;
+
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ }
+
+ public function set endPoint(value:String):void
+ {
+ _endPoint = value;
+ }
+ public function get endPoint():String
+ {
+ return _endPoint;
+ }
+
+ public function set destination(value:String):void
+ {
+ _destination = value;
+ }
+ public function get destination():String
+ {
+ return _destination;
+ }
+
+ public function send(operation:String, params:Array):void
+ {
+ nc.connect(endPoint);
+
+ var op:Operation = new Operation(operation, this, params);
+ op.send();
+ }
+
+ public function resultHandler(param:Object):void
+ {
+ dispatchEvent(new ResultEvent(ResultEvent.RESULT, param.body));
+ }
+
+ public function faultHandler(param:Object):void
+ {
+ dispatchEvent(new FaultEvent(FaultEvent.FAULT, param));
+ }
+ }
+}
diff --git a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/SimpleRemoteObject.as b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/SimpleRemoteObject.as
new file mode 100755
index 0000000..ef0d33a
--- /dev/null
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/SimpleRemoteObject.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.net
+{
+
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.EventDispatcher;
+ import org.apache.royale.net.events.FaultEvent;
+ import org.apache.royale.net.events.ResultEvent;
+ import org.apache.royale.net.remoting.SimpleOperation;
+ import org.apache.royale.net.remoting.amf.AMFNetConnection;
+
+ [Event(name="result", type="org.apache.royale.net.events.ResultEvent")]
+ [Event(name="fault", type="org.apache.royale.net.events.FaultEvent")]
+ /**
+ * This is the most simple implementation os a RemoteObject it can be use with
+ * simple backends like AMFPHP. To use with BlazeDS better us RemoteObject since
+ * it manages clientId and small messages
+ */
+ public class SimpleRemoteObject extends EventDispatcher implements IBead
+ {
+ private var _endPoint:String;
+ private var _destination:String;
+ private var _source:String;
+
+ /**
+ * @private
+ * The connection to the server
+ *
+ * @royalesuppresspublicvarwarning
+ */
+ public var nc:AMFNetConnection = new AMFNetConnection();
+
+ /**
+ *
+ */
+ public function SimpleRemoteObject()
+ {
+ }
+
+ private var _strand:IStrand;
+
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+ }
+
+ public function set endPoint(value:String):void
+ {
+ _endPoint = value;
+ }
+ public function get endPoint():String
+ {
+ return _endPoint;
+ }
+
+ public function set destination(value:String):void
+ {
+ _destination = value;
+ }
+ public function get destination():String
+ {
+ return _destination;
+ }
+
+ /**
+ * source is a deprecated property. It exposes
+ * backend resources and it used by old AMF backend implementations.
+ * You should use "destination" property instead. This property is for
+ * backward compatibility with old implementations.
+ * Use at your own risk.
+ */
+ public function set source(value:String):void
+ {
+ _source = value;
+ }
+ public function get source():String
+ {
+ return _source;
+ }
+
+ public function send(operation:String, params:Array):void
+ {
+ nc.connect(endPoint);
+
+ var op:SimpleOperation = new SimpleOperation(operation, this, params);
+ op.send();
+ }
+
+ public function resultHandler(param:Object):void
+ {
+ dispatchEvent(new ResultEvent(ResultEvent.RESULT, param.body));
+ }
+
+ public function faultHandler(param:Object):void
+ {
+ dispatchEvent(new FaultEvent(FaultEvent.FAULT, param));
+ }
+ }
+}
diff --git a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/URLRequest.as b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/URLRequest.as
index 712bb91..512d726 100644
--- a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/URLRequest.as
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/URLRequest.as
@@ -30,7 +30,7 @@
*
* @royalesuppresspublicvarwarning
*/
- public final class URLRequest extends Object
+ public final class URLRequest
{
/**
* The URL to be requested.
diff --git a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/Operation.as b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/Operation.as
index e887640..8005203 100755
--- a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/Operation.as
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/Operation.as
@@ -22,22 +22,27 @@
import org.apache.royale.net.RemoteObject;
import org.apache.royale.net.Responder;
import org.apache.royale.net.remoting.messages.AcknowledgeMessage;
+ import org.apache.royale.net.remoting.messages.AcknowledgeMessageExt;
import org.apache.royale.net.remoting.messages.CommandMessage;
import org.apache.royale.net.remoting.messages.RemotingMessage;
- import org.apache.royale.net.events.FaultEvent;
- import org.apache.royale.net.events.ResultEvent;
+ import org.apache.royale.net.remoting.messages.ISmallMessage;
import org.apache.royale.net.remoting.messages.AbstractMessage;
import org.apache.royale.net.remoting.messages.IMessage;
import org.apache.royale.net.remoting.messages.RoyaleClient;
-
+ /**
+ * used by RemoteObject implementation
+ */
public class Operation extends EventDispatcher
{
private var _name:String;
private var _args:Array;
private var _ro:RemoteObject;
+ /**
+ * This Operation is used by RemoteObject to deal with a BlazeDS, LCDS or CF AMF server
+ */
public function Operation(name:String, remoteObject:RemoteObject, args:Array)
{
_name = name;
@@ -45,22 +50,37 @@
_ro = remoteObject;
}
+ /**
+ * performs the sendind. If we have a clientId, we send the message, if not we make a ping operation command
+ * to make the server generate an UUID for us and use it in the rest of communications so the server knows who we are.
+ */
public function send():void
{
- var connectMessage:CommandMessage = new CommandMessage();
-
var id:String = RoyaleClient.getInstance().id;
- //connectMessage.operation = (id != null) ? CommandMessage.TRIGGER_CONNECT_OPERATION : CommandMessage.CLIENT_PING_OPERATION;
- connectMessage.operation = CommandMessage.TRIGGER_CONNECT_OPERATION
- // if(connectMessage.operation == CommandMessage.CLIENT_PING_OPERATION)
- // {
- connectMessage.correlationId = null;
- setRoyaleClientIdOnMessage(connectMessage);
- connectMessage.headers[CommandMessage.MESSAGING_VERSION] = messagingVersion;
- // } else {
- connectMessage.destination = _ro.destination;
- // }
- _ro.nc.call(null, new Responder(destinationResultHandler, destinationFaultHandler), connectMessage);
+
+ // check if we already get the DSId
+ if(id != null)
+ {
+ destinationResultHandler(null);
+ } else
+ {
+ var message:IMessage = new CommandMessage();
+
+ (message as CommandMessage).operation = (id != null) ? CommandMessage.TRIGGER_CONNECT_OPERATION : CommandMessage.CLIENT_PING_OPERATION;
+ setRoyaleClientIdOnMessage(message);
+ message.headers[CommandMessage.MESSAGING_VERSION] = messagingVersion;
+
+ //if "Small Messages" are enabled, send this form instead the normal message.
+ if (_ro.enableSmallMessages && message is ISmallMessage)
+ {
+ var smallMessage:IMessage = ISmallMessage(message).getSmallMessage();
+ if (smallMessage != null)
+ {
+ message = smallMessage;
+ }
+ }
+ _ro.nc.call(null, new Responder(destinationResultHandler, destinationFaultHandler), message);
+ }
}
private function destinationResultHandler(param:Object):void
@@ -70,27 +90,30 @@
var message:RemotingMessage = new RemotingMessage();
message.operation = _name;
message.body = _args;
- message.source = _ro.source;
message.destination = _ro.destination;
setRoyaleClientIdOnMessage(message);
_ro.nc.call(null, new Responder(_ro.resultHandler, _ro.faultHandler), message);
}
COMPILE::JS
{
- if (param is AcknowledgeMessage) // this force links AcknowledgeMessage so it deserializes correctly in JS
+ //if we receive this kind of message it was from a PING operation and then we must retrieve the clientId for later use in all further communications
+ if (param is AcknowledgeMessage || param is AcknowledgeMessageExt)
{
- var message:RemotingMessage = new RemotingMessage();
- message.operation = _name;
- message.body = _args;
- message.source = _ro.source;
- message.destination = _ro.destination;
- setRoyaleClientIdOnMessage(message);
- _ro.nc.call(null, new Responder(_ro.resultHandler, _ro.faultHandler), message);
+ // Set the server assigned RoyaleClient Id.
+ if (RoyaleClient.getInstance().id == null && param.headers[AbstractMessage.ROYALE_CLIENT_ID_HEADER] != null)
+ {
+ RoyaleClient.getInstance().id = param.headers[AbstractMessage.ROYALE_CLIENT_ID_HEADER];
+ }
}
- else
- trace("destination result handler", param);
+
+ var message:RemotingMessage = new RemotingMessage();
+ message.operation = _name;
+ message.body = _args;
+ message.destination = _ro.destination;
+ setRoyaleClientIdOnMessage(message);
+ _ro.nc.call(null, new Responder(_ro.resultHandler, _ro.faultHandler), message);
}
}
diff --git a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/SimpleOperation.as b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/SimpleOperation.as
new file mode 100755
index 0000000..9841795
--- /dev/null
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/SimpleOperation.as
@@ -0,0 +1,86 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.net.remoting
+{
+ import org.apache.royale.events.EventDispatcher;
+ import org.apache.royale.net.SimpleRemoteObject;
+ import org.apache.royale.net.Responder;
+ import org.apache.royale.net.remoting.messages.AcknowledgeMessage;
+ import org.apache.royale.net.remoting.messages.CommandMessage;
+ import org.apache.royale.net.remoting.messages.RemotingMessage;
+ import org.apache.royale.net.events.FaultEvent;
+ import org.apache.royale.net.events.ResultEvent;
+
+ /**
+ * used by SimpleRemoteObject implementation
+ */
+ public class SimpleOperation extends EventDispatcher
+ {
+ private var _name:String;
+ private var _args:Array;
+ private var _ro:SimpleRemoteObject;
+
+ public function SimpleOperation(name:String, remoteObject:SimpleRemoteObject, args:Array)
+ {
+ _name = name;
+ _args = args;
+ _ro = remoteObject;
+ }
+
+ public function send():void
+ {
+ var connectMessage:CommandMessage = new CommandMessage();
+ connectMessage.operation = CommandMessage.TRIGGER_CONNECT_OPERATION;
+ connectMessage.destination = _ro.destination;
+ _ro.nc.call(null, new Responder(destinationResultHandler, destinationFaultHandler), connectMessage);
+ }
+
+ private function destinationResultHandler(param:Object):void
+ {
+ COMPILE::SWF
+ {
+ var message:RemotingMessage = new RemotingMessage();
+ message.operation = _name;
+ message.body = _args;
+ message.source = _ro.source;
+ message.destination = _ro.destination;
+ _ro.nc.call(null, new Responder(_ro.resultHandler, _ro.faultHandler), message);
+ }
+ COMPILE::JS
+ {
+ if (param is AcknowledgeMessage)
+ {
+ var message:RemotingMessage = new RemotingMessage();
+ message.operation = _name;
+ message.body = _args;
+ message.source = _ro.source;
+ message.destination = _ro.destination;
+ _ro.nc.call(null, new Responder(_ro.resultHandler, _ro.faultHandler), message);
+ }
+ else
+ trace("destination result handler", param);
+ }
+ }
+
+ private function destinationFaultHandler(param:Object):void
+ {
+ trace("destination fault handler", param);
+ }
+ }
+}
diff --git a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/amf/AMFBinaryData.as b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/amf/AMFBinaryData.as
index 40067d3..54f62e6 100644
--- a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/amf/AMFBinaryData.as
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/amf/AMFBinaryData.as
@@ -20,9 +20,10 @@
package org.apache.royale.net.remoting.amf
{
-
import org.apache.royale.reflection.getAliasByClass;
import org.apache.royale.reflection.getClassByAlias;
+ import org.apache.royale.net.utils.IDataInput;
+ import org.apache.royale.net.utils.IDataOutput;
/**
* A version of BinaryData specific to AMF.
@@ -35,7 +36,7 @@
*
* @royalesuppresspublicvarwarning
*/
-public class AMFBinaryData
+public class AMFBinaryData implements IDataInput, IDataOutput
{
//--------------------------------------------------------------------------
//
@@ -93,7 +94,10 @@
public static const AMF3_VECTOR_DOUBLE:int = 15;
public static const AMF3_VECTOR_OBJECT:int = 16;
public static const AMF3_DICTIONARY:int = 17;
-
+
+ public static const EXTERNALIZED_OBJECT_REFERENCE:int = 161;
+ public static const EXTERNALIZED_OBJECT:int = 168;
+
public static const UNKNOWN_CONTENT_LENGTH:int = 1;
public static const UINT29_MASK:int = 536870911;
@@ -150,6 +154,8 @@
private var stringCount:int = 0;
private var traitCount:int = 0;
private var objectCount:int = 0;
+
+ private var flexTraitFound:Boolean = false;
public var pos:int = 0;
@@ -448,7 +454,7 @@
* @royaleignorecoercion String
* @royaleignorecoercion Number
*/
- public function writeObject(v:Object):void
+ public function writeObject(v:*):void
{
if (v == null)
{
@@ -788,7 +794,7 @@
return chararr.join("");
};
- public function readObject():Object
+ public function readObject():*
{
var type:uint = this.read();
return this.readObjectValue(type);
@@ -812,7 +818,6 @@
this.rememberString(str);
return str;
}
- return null;
};
private function rememberString(v:String):void
@@ -871,15 +876,30 @@
{
var ref:int = this.readUInt29();
if ((ref & 1) == 0)
- return this.getObject(ref >> 1);
+ {
+ this.flexTraitFound = false;
+ return this.getObject(ref >> 1);
+ }
else
{
var traits:Traits = this.readTraits(ref);
- var obj:Object;
+ if (traits.alias == "flex.messaging.io.ArrayCollection"
+ || traits.alias == "flex.messaging.io.ObjectProxy")
+ {
+ traits.alias = "";
+ this.flexTraitFound = true;
+ } else if(traits.alias == "DSK")
+ {
+ this.flexTraitFound = true;
+ traits.alias = "";
+ }
+ var obj:Object;
if (traits.alias) {
var c:Class = getClassByAlias(traits.alias);
if (c)
+ {
obj = new c();
+ }
else
{
obj = {};
@@ -893,16 +913,19 @@
this.rememberObject(obj);
if (traits.externalizable)
{
- if (obj[CLASS_ALIAS] == "flex.messaging.io.ArrayCollection"
- || obj[CLASS_ALIAS] == "flex.messaging.io.ObjectProxy")
- return this.readObject();
- else
- obj[EXTERNALIZED_FIELD] = this.readObject();
- }
+ if (this.flexTraitFound){
+ obj = this.readObject();
+ }
+ else {
+ obj[EXTERNALIZED_FIELD] = this.readObject();
+ }
+ }
else
{
for (var i:int in traits.props)
+ {
obj[traits.props[i]] = this.readObject();
+ }
if (traits.dynamic)
{
for (; ;)
@@ -1093,7 +1116,7 @@
}
catch (e)
{
- throw "Failed to deserialize: " + e;
+ throw new Error("Failed to deserialize: " + e);
}
break;
case AMF3_ARRAY:
@@ -1133,8 +1156,14 @@
case AMF0_AMF3:
value = this.readObject();
break;
+ case EXTERNALIZED_OBJECT_REFERENCE:
+ trace("EXTERNALIZED_OBJECT_REFERENCE needs to be implemented")
+ //value = this.readObject(); //TODO
+ break;
+ case EXTERNALIZED_OBJECT://DSK
+ break;
default:
- throw "Unsupported AMF type: " + type;
+ throw new Error("Unsupported AMF type: " + type);
}
return value;
};
@@ -1150,6 +1179,25 @@
return array;
}
+ //IDataOutput -------------------------------------------------------------------------------------
+
+ public function writeBytes(bytes:AMFBinaryData, offset:uint = 0, length:uint = 0):void
+ {}
+
+ public function writeByte(value:int):void
+ {}
+
+ //IDataInput -------------------------------------------------------------------------------------
+
+ public function get bytesAvailable():uint
+ {
+ return 0;
+ }
+
+ public function readUnsignedByte():uint
+ {
+ return 0;
+ }
}
}
diff --git a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/amf/AMFNetConnection.as b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/amf/AMFNetConnection.as
index b1a5354..1dd4e5f 100644
--- a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/amf/AMFNetConnection.as
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/amf/AMFNetConnection.as
@@ -238,7 +238,7 @@
var readyState:int = xhr.readyState;
if (readyState === 1)
{
- xhr.setRequestHeader("Content-Type", "application/x-amf; charset=UTF-8");
+ xhr.setRequestHeader("Content-Type", "application/x-amf");
xhr.responseType = "arraybuffer";
var actionMessage:ActionMessage = new ActionMessage();
var messageBody:MessageBody = new MessageBody();
diff --git a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/AbstractMessage.as b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/AbstractMessage.as
index 90a6736..558303a 100644
--- a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/AbstractMessage.as
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/AbstractMessage.as
@@ -19,54 +19,32 @@
package org.apache.royale.net.remoting.messages
{
+ import org.apache.royale.utils.ObjectUtil;
+ import org.apache.royale.net.utils.IDataInput;
+ import org.apache.royale.net.utils.IDataOutput;
+ import org.apache.royale.utils.BinaryData;
+ import org.apache.royale.utils.UIDUtil;
-import org.apache.royale.utils.ObjectUtil;
-import org.apache.royale.utils.UIDUtil;
-import org.apache.royale.net.utils.IDataInput;
-import org.apache.royale.net.utils.IDataOutput;
-import org.apache.royale.utils.BinaryData;
-import org.apache.royale.net.utils.RPCUIDUtil;
+ /*
+ import mx.utils.RPCObjectUtil;
+ import mx.utils.RPCStringUtil;
+ */
-/*
-import mx.utils.RPCObjectUtil;
-import mx.utils.RPCStringUtil;
-*/
-
-/**
- * Abstract base class for all messages.
- * Messages have two customizable sections; headers and body.
- * The <code>headers</code> property provides access to specialized meta
- * information for a specific message instance.
- * The <code>headers</code> property is an associative array with the specific
- * header name as the key.
- * <p>
- * The body of a message contains the instance specific data that needs to be
- * delivered and processed by the remote destination.
- * The <code>body</code> is an object and is the payload for a message.
- * </p>
- *
- * Note: readExternal and writeExternal methods compile but are not tested and maybe not work
- * but is an initial work
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
-public class AbstractMessage implements IMessage
-{
- //--------------------------------------------------------------------------
- //
- // Static Constants
- //
- //--------------------------------------------------------------------------
-
/**
- * Messages pushed from the server may arrive in a batch, with messages in the
- * batch potentially targeted to different Consumer instances.
- * Each message will contain this header identifying the Consumer instance that
- * will receive the message.
+ * Abstract base class for all messages.
+ * Messages have two customizable sections; headers and body.
+ * The <code>headers</code> property provides access to specialized meta
+ * information for a specific message instance.
+ * The <code>headers</code> property is an associative array with the specific
+ * header name as the key.
+ * <p>
+ * The body of a message contains the instance specific data that needs to be
+ * delivered and processed by the remote destination.
+ * The <code>body</code> is an object and is the payload for a message.
+ * </p>
+ *
+ * Note: readExternal and writeExternal methods compile but are not tested and maybe not work
+ * but is an initial work
*
* @langversion 3.0
* @playerversion Flash 9
@@ -74,689 +52,703 @@
* @productversion BlazeDS 4
* @productversion LCDS 3
*/
- public static const DESTINATION_CLIENT_ID_HEADER:String = "DSDstClientId";
-
- /**
- * Messages are tagged with the endpoint id for the Channel they are sent over.
- * Channels set this value automatically when they send a message.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const ENDPOINT_HEADER:String = "DSEndpoint";
-
- /**
- * This header is used to transport the global RoyaleClient Id value in outbound
- * messages once it has been assigned by the server.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const ROYALE_CLIENT_ID_HEADER:String = "DSId";
-
- /**
- * Messages sent by a MessageAgent can have a priority header with a 0-9
- * numerical value (0 being lowest) and the server can choose to use this
- * numerical value to prioritize messages to clients.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const PRIORITY_HEADER:String = "DSPriority";
-
- /**
- * Messages that need to set remote credentials for a destination
- * carry the Base64 encoded credentials in this header.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const REMOTE_CREDENTIALS_HEADER:String = "DSRemoteCredentials";
-
- /**
- * Messages that need to set remote credentials for a destination
- * may also need to report the character-set encoding that was used to
- * create the credentials String using this header.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const REMOTE_CREDENTIALS_CHARSET_HEADER:String = "DSRemoteCredentialsCharset";
-
- /**
- * Messages sent with a defined request timeout use this header.
- * The request timeout value is set on outbound messages by services or
- * channels and the value controls how long the corresponding MessageResponder
- * will wait for an acknowledgement, result or fault response for the message
- * before timing out the request.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const REQUEST_TIMEOUT_HEADER:String = "DSRequestTimeout";
-
- /**
- * A status code can provide context about the nature of a response
- * message. For example, messages received from an HTTP based channel may
- * need to report the HTTP response status code (if available).
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const STATUS_CODE_HEADER:String = "DSStatusCode";
-
-
- //--------------------------------------------------------------------------
- //
- // Private Static Constants for Serialization
- //
- //--------------------------------------------------------------------------
-
- private static const HAS_NEXT_FLAG:uint = 128;
- private static const BODY_FLAG:uint = 1;
- private static const CLIENT_ID_FLAG:uint = 2;
- private static const DESTINATION_FLAG:uint = 4;
- private static const HEADERS_FLAG:uint = 8;
- private static const MESSAGE_ID_FLAG:uint = 16;
- private static const TIMESTAMP_FLAG:uint = 32;
- private static const TIME_TO_LIVE_FLAG:uint = 64;
- private static const CLIENT_ID_BYTES_FLAG:uint = 1;
- private static const MESSAGE_ID_BYTES_FLAG:uint = 2;
-
- //--------------------------------------------------------------------------
- //
- // Constructor
- //
- //--------------------------------------------------------------------------
-
- /**
- * Constructs an instance of an AbstractMessage with an empty body and header.
- * This message type should not be instantiated or used directly.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public function AbstractMessage()
+ public class AbstractMessage implements IMessage
{
- super();
- }
+ //--------------------------------------------------------------------------
+ //
+ // Static Constants
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Messages pushed from the server may arrive in a batch, with messages in the
+ * batch potentially targeted to different Consumer instances.
+ * Each message will contain this header identifying the Consumer instance that
+ * will receive the message.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const DESTINATION_CLIENT_ID_HEADER:String = "DSDstClientId";
- //--------------------------------------------------------------------------
- //
- // Properties
- //
- //--------------------------------------------------------------------------
+ /**
+ * Messages are tagged with the endpoint id for the Channel they are sent over.
+ * Channels set this value automatically when they send a message.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const ENDPOINT_HEADER:String = "DSEndpoint";
- //----------------------------------
- // body
- //----------------------------------
+ /**
+ * This header is used to transport the global RoyaleClient Id value in outbound
+ * messages once it has been assigned by the server.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const ROYALE_CLIENT_ID_HEADER:String = "DSId";
- /**
- * @private
- */
- private var _body:Object = {};
+ /**
+ * Messages sent by a MessageAgent can have a priority header with a 0-9
+ * numerical value (0 being lowest) and the server can choose to use this
+ * numerical value to prioritize messages to clients.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const PRIORITY_HEADER:String = "DSPriority";
- /**
- * The body of a message contains the specific data that needs to be
- * delivered to the remote destination.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public function get body():Object
- {
- return _body;
- }
-
- /**
- * @private
- */
- public function set body(value:Object):void
- {
- _body = value;
- }
+ /**
+ * Messages that need to set remote credentials for a destination
+ * carry the Base64 encoded credentials in this header.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const REMOTE_CREDENTIALS_HEADER:String = "DSRemoteCredentials";
- //----------------------------------
- // clientId
- //----------------------------------
+ /**
+ * Messages that need to set remote credentials for a destination
+ * may also need to report the character-set encoding that was used to
+ * create the credentials String using this header.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const REMOTE_CREDENTIALS_CHARSET_HEADER:String = "DSRemoteCredentialsCharset";
+
+ /**
+ * Messages sent with a defined request timeout use this header.
+ * The request timeout value is set on outbound messages by services or
+ * channels and the value controls how long the corresponding MessageResponder
+ * will wait for an acknowledgement, result or fault response for the message
+ * before timing out the request.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const REQUEST_TIMEOUT_HEADER:String = "DSRequestTimeout";
- /**
- * @private
- */
- private var _clientId:String;
+ /**
+ * A status code can provide context about the nature of a response
+ * message. For example, messages received from an HTTP based channel may
+ * need to report the HTTP response status code (if available).
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const STATUS_CODE_HEADER:String = "DSStatusCode";
- /**
- * @private
- */
- private var clientIdBytes:BinaryData;
- /**
- * The clientId indicates which MessageAgent sent the message.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public function get clientId():String
- {
- return _clientId;
- }
+ //--------------------------------------------------------------------------
+ //
+ // Private Static Constants for Serialization
+ //
+ //--------------------------------------------------------------------------
- /**
- * @private
- */
- public function set clientId(value:String):void
- {
- _clientId = value;
- COMPILE::SWF
+ private static const HAS_NEXT_FLAG:uint = 128;
+ private static const BODY_FLAG:uint = 1;
+ private static const CLIENT_ID_FLAG:uint = 2;
+ private static const DESTINATION_FLAG:uint = 4;
+ private static const HEADERS_FLAG:uint = 8;
+ private static const MESSAGE_ID_FLAG:uint = 16;
+ private static const TIMESTAMP_FLAG:uint = 32;
+ private static const TIME_TO_LIVE_FLAG:uint = 64;
+ private static const CLIENT_ID_BYTES_FLAG:uint = 1;
+ private static const MESSAGE_ID_BYTES_FLAG:uint = 2;
+
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructs an instance of an AbstractMessage with an empty body and header.
+ * This message type should not be instantiated or used directly.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public function AbstractMessage()
{
- clientIdBytes = null;
+ super();
}
- }
- //----------------------------------
- // destination
- //----------------------------------
-
- /**
- * @private
- */
- private var _destination:String = "";
-
- /**
- * The message destination.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public function get destination():String
- {
- return _destination;
- }
-
- /**
- * @private
- */
- public function set destination(value:String):void
- {
- _destination = value;
- }
-
- //----------------------------------
- // headers
- //----------------------------------
+ //--------------------------------------------------------------------------
+ //
+ // Properties
+ //
+ //--------------------------------------------------------------------------
- /**
- * @private
- */
- private var _headers:Object;
+ //----------------------------------
+ // body
+ //----------------------------------
- /**
- * The headers of a message are an associative array where the key is the
- * header name and the value is the header value.
- * This property provides access to the specialized meta information for the
- * specific message instance.
- * Core header names begin with a 'DS' prefix. Custom header names should start
- * with a unique prefix to avoid name collisions.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public function get headers():Object
- {
- if (_headers == null)
- _headers = {};
+ /**
+ * @private
+ */
+ private var _body:Object = {};
- return _headers;
- }
-
- /**
- * @private
- */
- public function set headers(value:Object):void
- {
- _headers = value;
- }
-
- //----------------------------------
- // messageId
- //----------------------------------
-
- /**
- * @private
- */
- private var _messageId:String;
-
- /**
- * @private
- */
- private var messageIdBytes:BinaryData;
-
- /**
- * The unique id for the message.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public function get messageId():String
- {
- if (_messageId == null)
- _messageId = UIDUtil.createUID();
-
- return _messageId;
- }
-
- /**
- * @private
- */
- public function set messageId(value:String):void
- {
- _messageId = value;
- COMPILE::SWF
+ /**
+ * The body of a message contains the specific data that needs to be
+ * delivered to the remote destination.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public function get body():Object
{
+ return _body;
+ }
+
+ /**
+ * @private
+ */
+ public function set body(value:Object):void
+ {
+ _body = value;
+ }
+
+ //----------------------------------
+ // clientId
+ //----------------------------------
+
+ /**
+ * @private
+ */
+ private var _clientId:String;
+
+ /**
+ * @private
+ */
+ private var clientIdBytes:BinaryData;
+
+ /**
+ * The clientId indicates which MessageAgent sent the message.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public function get clientId():String
+ {
+ return _clientId;
+ }
+
+ /**
+ * @private
+ */
+ public function set clientId(value:String):void
+ {
+ _clientId = value;
+ clientIdBytes = null;
+ }
+
+ //----------------------------------
+ // destination
+ //----------------------------------
+
+ /**
+ * @private
+ */
+ private var _destination:String = "";
+
+ /**
+ * The message destination.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public function get destination():String
+ {
+ return _destination;
+ }
+
+ /**
+ * @private
+ */
+ public function set destination(value:String):void
+ {
+ _destination = value;
+ }
+
+ //----------------------------------
+ // headers
+ //----------------------------------
+
+ /**
+ * @private
+ */
+ private var _headers:Object;
+
+ /**
+ * The headers of a message are an associative array where the key is the
+ * header name and the value is the header value.
+ * This property provides access to the specialized meta information for the
+ * specific message instance.
+ * Core header names begin with a 'DS' prefix. Custom header names should start
+ * with a unique prefix to avoid name collisions.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public function get headers():Object
+ {
+ if (_headers == null)
+ _headers = {};
+
+ return _headers;
+ }
+
+ /**
+ * @private
+ */
+ public function set headers(value:Object):void
+ {
+ _headers = value;
+ }
+
+ //----------------------------------
+ // messageId
+ //----------------------------------
+
+ /**
+ * @private
+ */
+ private var _messageId:String;
+
+ /**
+ * @private
+ */
+ private var messageIdBytes:BinaryData;
+
+ /**
+ * The unique id for the message.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public function get messageId():String
+ {
+ if (_messageId == null)
+ _messageId = UIDUtil.createUID();
+
+ return _messageId;
+ }
+
+ /**
+ * @private
+ */
+ public function set messageId(value:String):void
+ {
+ _messageId = value;
messageIdBytes = null;
}
- }
- //----------------------------------
- // timestamp
- //----------------------------------
+ //----------------------------------
+ // timestamp
+ //----------------------------------
- /**
- * @private
- */
- private var _timestamp:Number = 0;
-
- /**
- * Provides access to the time stamp for the message.
- * A time stamp is the date and time that the message was sent.
- * The time stamp is used for tracking the message through the system,
- * ensuring quality of service levels and providing a mechanism for
- * message expiration.
- *
- * @see #timeToLive
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public function get timestamp():Number
- {
- return _timestamp;
- }
-
- /**
- * @private
- */
- public function set timestamp(value:Number):void
- {
- _timestamp = value;
- }
-
- //----------------------------------
- // timeToLive
- //----------------------------------
-
- /**
- * @private
- */
- private var _timeToLive:Number = 0;
-
- /**
- * The time to live value of a message indicates how long the message
- * should be considered valid and deliverable.
- * This value works in conjunction with the <code>timestamp</code> value.
- * Time to live is the number of milliseconds that this message remains
- * valid starting from the specified <code>timestamp</code> value.
- * For example, if the <code>timestamp</code> value is 04/05/05 1:30:45 PST
- * and the <code>timeToLive</code> value is 5000, then this message will
- * expire at 04/05/05 1:30:50 PST.
- * Once a message expires it will not be delivered to any other clients.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public function get timeToLive():Number
- {
- return _timeToLive;
- }
-
- /**
- * @private
- */
- public function set timeToLive(value:Number):void
- {
- _timeToLive = value;
- }
-
- //--------------------------------------------------------------------------
- //
- // Methods
- //
- //--------------------------------------------------------------------------
-
- /**
- * @private
- *
- * While this class itself does not implement flash.utils.IExternalizable,
- * ISmallMessage implementations will typically use IExternalizable to
- * serialize themselves in a smaller form. This method supports this
- * functionality by implementing IExternalizable.readExternal(IDataInput) to
- * deserialize the properties for this abstract base class.
- */
- public function readExternal(input:IDataInput):void
- {
- var flagsArray:Array = readFlags(input);
-
- for (var i:uint = 0; i < flagsArray.length; i++)
+ /**
+ * @private
+ */
+ private var _timestamp:Number = 0;
+
+ /**
+ * Provides access to the time stamp for the message.
+ * A time stamp is the date and time that the message was sent.
+ * The time stamp is used for tracking the message through the system,
+ * ensuring quality of service levels and providing a mechanism for
+ * message expiration.
+ *
+ * @see #timeToLive
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public function get timestamp():Number
{
- var flags:uint = flagsArray[i] as uint;
- var reservedPosition:uint = 0;
+ return _timestamp;
+ }
+
+ /**
+ * @private
+ */
+ public function set timestamp(value:Number):void
+ {
+ _timestamp = value;
+ }
+
+ //----------------------------------
+ // timeToLive
+ //----------------------------------
+
+ /**
+ * @private
+ */
+ private var _timeToLive:Number = 0;
+
+ /**
+ * The time to live value of a message indicates how long the message
+ * should be considered valid and deliverable.
+ * This value works in conjunction with the <code>timestamp</code> value.
+ * Time to live is the number of milliseconds that this message remains
+ * valid starting from the specified <code>timestamp</code> value.
+ * For example, if the <code>timestamp</code> value is 04/05/05 1:30:45 PST
+ * and the <code>timeToLive</code> value is 5000, then this message will
+ * expire at 04/05/05 1:30:50 PST.
+ * Once a message expires it will not be delivered to any other clients.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public function get timeToLive():Number
+ {
+ return _timeToLive;
+ }
+
+ /**
+ * @private
+ */
+ public function set timeToLive(value:Number):void
+ {
+ _timeToLive = value;
+ }
- if (i == 0)
+ //--------------------------------------------------------------------------
+ //
+ // Methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ *
+ * While this class itself does not implement flash.utils.IExternalizable,
+ * ISmallMessage implementations will typically use IExternalizable to
+ * serialize themselves in a smaller form. This method supports this
+ * functionality by implementing IExternalizable.readExternal(IDataInput) to
+ * deserialize the properties for this abstract base class.
+ */
+ public function readExternal(input:IDataInput):void
+ {
+ trace("AbstractMessage.readExternal");
+ var flagsArray:Array = readFlags(input);
+
+ for (var i:uint = 0; i < flagsArray.length; i++)
{
- if ((flags & BODY_FLAG) != 0)
- readExternalBody(input);
- else
- body = null; // default body is {} so need to set it here
+ var flags:uint = flagsArray[i] as uint;
+ var reservedPosition:uint = 0;
- if ((flags & CLIENT_ID_FLAG) != 0)
- clientId = input.readObject();
-
- if ((flags & DESTINATION_FLAG) != 0)
- destination = input.readObject() as String;
-
- if ((flags & HEADERS_FLAG) != 0)
- headers = input.readObject();
-
- if ((flags & MESSAGE_ID_FLAG) != 0)
- messageId = input.readObject() as String;
-
- if ((flags & TIMESTAMP_FLAG) != 0)
- timestamp = input.readObject() as Number;
-
- if ((flags & TIME_TO_LIVE_FLAG) != 0)
- timeToLive = input.readObject() as Number;
-
- reservedPosition = 7;
- }
- else if (i == 1)
- {
- if ((flags & CLIENT_ID_BYTES_FLAG) != 0)
+ if (i == 0)
{
- clientIdBytes = input.readObject() as BinaryData;
- clientId = RPCUIDUtil.fromByteArray(clientIdBytes);
+ if ((flags & BODY_FLAG) != 0)
+ readExternalBody(input);
+ else
+ body = null; // default body is {} so need to set it here
+
+ if ((flags & CLIENT_ID_FLAG) != 0)
+ clientId = input.readObject();
+
+ if ((flags & DESTINATION_FLAG) != 0)
+ destination = input.readObject() as String;
+
+ if ((flags & HEADERS_FLAG) != 0)
+ headers = input.readObject();
+
+ if ((flags & MESSAGE_ID_FLAG) != 0)
+ messageId = input.readObject() as String;
+
+ if ((flags & TIMESTAMP_FLAG) != 0)
+ timestamp = input.readObject() as Number;
+
+ if ((flags & TIME_TO_LIVE_FLAG) != 0)
+ timeToLive = input.readObject() as Number;
+
+ reservedPosition = 7;
}
-
- if ((flags & MESSAGE_ID_BYTES_FLAG) != 0)
+ else if (i == 1)
{
- messageIdBytes = input.readObject() as BinaryData;
- messageId = RPCUIDUtil.fromByteArray(messageIdBytes);
- }
-
- reservedPosition = 2;
- }
-
- // For forwards compatibility, read in any other flagged objects to
- // preserve the integrity of the input stream...
- if ((flags >> reservedPosition) != 0)
- {
- for (var j:uint = reservedPosition; j < 6; j++)
- {
- if (((flags >> j) & 1) != 0)
+ if ((flags & CLIENT_ID_BYTES_FLAG) != 0)
{
- input.readObject();
+ clientIdBytes = input.readObject() as BinaryData;
+ clientId = UIDUtil.fromBinary(clientIdBytes);
+ }
+
+ if ((flags & MESSAGE_ID_BYTES_FLAG) != 0)
+ {
+ messageIdBytes = input.readObject() as BinaryData;
+ messageId = UIDUtil.fromBinary(messageIdBytes);
+ }
+
+ reservedPosition = 2;
+ }
+
+ // For forwards compatibility, read in any other flagged objects to
+ // preserve the integrity of the input stream...
+ if ((flags >> reservedPosition) != 0)
+ {
+ for (var j:uint = reservedPosition; j < 6; j++)
+ {
+ if (((flags >> j) & 1) != 0)
+ {
+ input.readObject();
+ }
}
}
}
}
- }
- /**
- * Returns a string representation of the message.
- *
- * @return String representation of the message.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public function toString():String
- {
- return ObjectUtil._toString(this);
- }
+ /**
+ * Returns a string representation of the message.
+ *
+ * @return String representation of the message.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public function toString():String
+ {
+ return ObjectUtil._toString(this);
+ }
- /**
- * @private
- *
- * While this class itself does not implement flash.utils.IExternalizable,
- * ISmallMessage implementations will typically use IExternalizable to
- * serialize themselves in a smaller form. This method supports this
- * functionality by implementing IExternalizable.writeExternal(IDataOutput)
- * to efficiently serialize the properties for this abstract base class.
- */
- public function writeExternal(output:IDataOutput):void
- {
- var flags:uint = 0;
+ /**
+ * @private
+ *
+ * While this class itself does not implement flash.utils.IExternalizable,
+ * ISmallMessage implementations will typically use IExternalizable to
+ * serialize themselves in a smaller form. This method supports this
+ * functionality by implementing IExternalizable.writeExternal(IDataOutput)
+ * to efficiently serialize the properties for this abstract base class.
+ */
+ public function writeExternal(output:IDataOutput):void
+ {
+ var flags:uint = 0;
- // Since we're using custom serialization, we have to invoke the
- // messageId getter to ensure we have a valid id for the message.
- var checkForMessageId:String = messageId;
+ // Since we're using custom serialization, we have to invoke the
+ // messageId getter to ensure we have a valid id for the message.
+ var checkForMessageId:String = messageId;
- if (clientIdBytes == null)
- clientIdBytes = RPCUIDUtil.toByteArray(_clientId);
+ if (clientIdBytes == null)
+ clientIdBytes = UIDUtil.toBinary(_clientId);
- if (messageIdBytes == null)
- messageIdBytes = RPCUIDUtil.toByteArray(_messageId);
+ if (messageIdBytes == null)
+ messageIdBytes = UIDUtil.toBinary(_messageId);
- if (body != null)
- flags |= BODY_FLAG;
+ if (body != null)
+ flags |= BODY_FLAG;
- if (clientId != null && clientIdBytes == null)
- flags |= CLIENT_ID_FLAG;
+ if (clientId != null && clientIdBytes == null)
+ flags |= CLIENT_ID_FLAG;
- if (destination != null)
- flags |= DESTINATION_FLAG;
+ if (destination != null)
+ flags |= DESTINATION_FLAG;
- if (headers != null)
- flags |= HEADERS_FLAG;
+ if (headers != null)
+ flags |= HEADERS_FLAG;
- if (messageId != null && messageIdBytes == null)
- flags |= MESSAGE_ID_FLAG;
+ if (messageId != null && messageIdBytes == null)
+ flags |= MESSAGE_ID_FLAG;
- if (timestamp != 0)
- flags |= TIMESTAMP_FLAG;
+ if (timestamp != 0)
+ flags |= TIMESTAMP_FLAG;
- if (timeToLive != 0)
- flags |= TIME_TO_LIVE_FLAG;
+ if (timeToLive != 0)
+ flags |= TIME_TO_LIVE_FLAG;
- if (clientIdBytes != null || messageIdBytes != null)
- flags |= HAS_NEXT_FLAG;
+ if (clientIdBytes != null || messageIdBytes != null)
+ flags |= HAS_NEXT_FLAG;
- output.writeByte(flags);
-
- flags = 0;
-
- if (clientIdBytes != null)
- flags |= CLIENT_ID_BYTES_FLAG;
-
- if (messageIdBytes != null)
- flags |= MESSAGE_ID_BYTES_FLAG;
-
- // This is only read if the previous flag has HAS_NEXT_FLAG set
- if (flags != 0)
output.writeByte(flags);
- if (body != null)
- writeExternalBody(output);
+ flags = 0;
- if (clientId != null && clientIdBytes == null)
- output.writeObject(clientId);
+ if (clientIdBytes != null)
+ flags |= CLIENT_ID_BYTES_FLAG;
- if (destination != null)
- output.writeObject(destination);
+ if (messageIdBytes != null)
+ flags |= MESSAGE_ID_BYTES_FLAG;
- if (headers != null)
- output.writeObject(headers);
+ // This is only read if the previous flag has HAS_NEXT_FLAG set
+ if (flags != 0)
+ output.writeByte(flags);
- if (messageId != null && messageIdBytes == null)
- output.writeObject(messageId);
+ if (body != null)
+ writeExternalBody(output);
- if (timestamp != 0)
- output.writeObject(timestamp);
+ if (clientId != null && clientIdBytes == null)
+ output.writeObject(clientId);
- if (timeToLive != 0)
- output.writeObject(timeToLive);
+ if (destination != null)
+ output.writeObject(destination);
- if (clientIdBytes != null)
- output.writeObject(clientIdBytes);
+ if (headers != null)
+ output.writeObject(headers);
- if (messageIdBytes != null)
- output.writeObject(messageIdBytes);
- }
+ if (messageId != null && messageIdBytes == null)
+ output.writeObject(messageId);
- //--------------------------------------------------------------------------
- //
- // Protected Methods
- //
- //--------------------------------------------------------------------------
+ if (timestamp != 0)
+ output.writeObject(timestamp);
- /**
- * @private
- */
- /*
- protected function addDebugAttributes(attributes:Object):void
- {
- attributes["body"] = body;
- attributes["clientId"] = clientId;
- attributes["destination"] = destination;
- attributes["headers"] = headers;
- attributes["messageId"] = messageId;
- attributes["timestamp"] = timestamp;
- attributes["timeToLive"] = timeToLive;
- }
- */
-
- /**
- * @private
- */
- /*
- final protected function getDebugString():String
- {
- var result:String = "(" + getQualifiedClassName(this) + ")";
+ if (timeToLive != 0)
+ output.writeObject(timeToLive);
- var attributes:Object = {};
- addDebugAttributes(attributes);
+ if (clientIdBytes != null)
+ output.writeObject(clientIdBytes);
- var propertyNames:Array = [];
- for (var propertyName:String in attributes)
- {
- propertyNames.push(propertyName);
- }
- propertyNames.sort();
-
- var length:int = propertyNames.length;
- for (var i:uint = 0; i < length; i++)
- {
- var name:String = String(propertyNames[i]);
- var value:String = RPCObjectUtil.toString(attributes[name]);
- result += RPCStringUtil.substitute("\n {0}={1}", name, value);
+ if (messageIdBytes != null)
+ output.writeObject(messageIdBytes);
}
- return result;
- }
- */
+ //--------------------------------------------------------------------------
+ //
+ // Protected Methods
+ //
+ //--------------------------------------------------------------------------
- /**
- * @private
- */
- protected function readExternalBody(input:IDataInput):void
- {
- body = input.readObject();
- }
-
- /**
- * @private
- * To support efficient serialization for ISmallMessage implementations,
- * this utility method reads in the property flags from an IDataInput
- * stream. Flags are read in one byte at a time. Flags make use of
- * sign-extension so that if the high-bit is set to 1 this indicates that
- * another set of flags follows.
- *
- * @return The Array of property flags. Each flags byte is stored as a uint
- * in the Array.
- */
- protected function readFlags(input:IDataInput):Array
- {
- var hasNextFlag:Boolean = true;
- var flagsArray:Array = [];
-
- while (hasNextFlag && input.bytesAvailable > 0)
+ /**
+ * @private
+ */
+ /*
+ protected function addDebugAttributes(attributes:Object):void
{
- var flags:uint = input.readUnsignedByte();
- flagsArray.push(flags);
+ attributes["body"] = body;
+ attributes["clientId"] = clientId;
+ attributes["destination"] = destination;
+ attributes["headers"] = headers;
+ attributes["messageId"] = messageId;
+ attributes["timestamp"] = timestamp;
+ attributes["timeToLive"] = timeToLive;
+ }
+ */
+
+ /**
+ * @private
+ */
+ /*
+ final protected function getDebugString():String
+ {
+ var result:String = "(" + getQualifiedClassName(this) + ")";
- if ((flags & HAS_NEXT_FLAG) != 0)
- hasNextFlag = true;
- else
- hasNextFlag = false;
+ var attributes:Object = {};
+ addDebugAttributes(attributes);
+
+ var propertyNames:Array = [];
+ for (var propertyName:String in attributes)
+ {
+ propertyNames.push(propertyName);
+ }
+ propertyNames.sort();
+
+ var length:int = propertyNames.length;
+ for (var i:uint = 0; i < length; i++)
+ {
+ var name:String = String(propertyNames[i]);
+ var value:String = RPCObjectUtil.toString(attributes[name]);
+ result += RPCStringUtil.substitute("\n {0}={1}", name, value);
+ }
+
+ return result;
+ }
+ */
+
+ /**
+ * @private
+ */
+ protected function readExternalBody(input:IDataInput):void
+ {
+ body = input.readObject();
+ }
+
+ /**
+ * @private
+ * To support efficient serialization for ISmallMessage implementations,
+ * this utility method reads in the property flags from an IDataInput
+ * stream. Flags are read in one byte at a time. Flags make use of
+ * sign-extension so that if the high-bit is set to 1 this indicates that
+ * another set of flags follows.
+ *
+ * @return The Array of property flags. Each flags byte is stored as a uint
+ * in the Array.
+ */
+ protected function readFlags(input:IDataInput):Array
+ {
+ var hasNextFlag:Boolean = true;
+ var flagsArray:Array = [];
+
+ while (hasNextFlag && input.bytesAvailable > 0)
+ {
+ var flags:uint = input.readUnsignedByte();
+ flagsArray.push(flags);
+
+ if ((flags & HAS_NEXT_FLAG) != 0)
+ hasNextFlag = true;
+ else
+ hasNextFlag = false;
+ }
+
+ return flagsArray;
}
- return flagsArray;
+ /**
+ * @private
+ */
+ protected function writeExternalBody(output:IDataOutput):void
+ {
+ output.writeObject(body);
+ }
}
-
- /**
- * @private
- */
- protected function writeExternalBody(output:IDataOutput):void
- {
- output.writeObject(body);
- }
-}
-
}
diff --git a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/AcknowledgeMessage.as b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/AcknowledgeMessage.as
index bd4cee7..17b02c5 100644
--- a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/AcknowledgeMessage.as
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/AcknowledgeMessage.as
@@ -16,42 +16,17 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-
package org.apache.royale.net.remoting.messages
{
+ import org.apache.royale.net.utils.IDataInput;
+ import org.apache.royale.net.utils.IDataOutput;
-COMPILE::SWF
-{
-import flash.utils.IDataInput;
-import flash.utils.IDataOutput;
-}
-
-[RemoteClass(alias="flex.messaging.messages.AcknowledgeMessage")]
-
-/**
- * An AcknowledgeMessage acknowledges the receipt of a message that
- * was sent previously.
- * Every message sent within the messaging system must receive an
- * acknowledgement.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
-public class AcknowledgeMessage extends AsyncMessage // implements ISmallMessage
-{
- //--------------------------------------------------------------------------
- //
- // Static Constants
- //
- //--------------------------------------------------------------------------
-
+ [RemoteClass(alias="flex.messaging.messages.AcknowledgeMessage")]
/**
- * Header name for the error hint header.
- * Used to indicate that the acknowledgement is for a message that
- * generated an error.
+ * An AcknowledgeMessage acknowledges the receipt of a message that
+ * was sent previously.
+ * Every message sent within the messaging system must receive an
+ * acknowledgement.
*
* @langversion 3.0
* @playerversion Flash 9
@@ -59,90 +34,102 @@
* @productversion BlazeDS 4
* @productversion LCDS 3
*/
- public static const ERROR_HINT_HEADER:String = "DSErrorHint";
-
- //--------------------------------------------------------------------------
- //
- // Constructor
- //
- //--------------------------------------------------------------------------
-
- /**
- * Constructs an instance of an AcknowledgeMessage with an empty body and header.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public function AcknowledgeMessage()
+ public class AcknowledgeMessage extends AsyncMessage implements ISmallMessage
{
- super();
- }
-
- //--------------------------------------------------------------------------
- //
- // Overridden Methods
- //
- //--------------------------------------------------------------------------
-
- /**
- * @private
- */
- /*
- override public function getSmallMessage():IMessage
- {
- var o:Object = this;
- if (o.constructor == AcknowledgeMessage)
- return new AcknowledgeMessageExt(this);
- return null;
- }
- */
-
- /**
- * @private
- */
- /*
- override public function readExternal(input:IDataInput):void
- {
- super.readExternal(input);
-
- var flagsArray:Array = readFlags(input);
- for (var i:uint = 0; i < flagsArray.length; i++)
+ //--------------------------------------------------------------------------
+ //
+ // Static Constants
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Header name for the error hint header.
+ * Used to indicate that the acknowledgement is for a message that
+ * generated an error.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const ERROR_HINT_HEADER:String = "DSErrorHint";
+
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructs an instance of an AcknowledgeMessage with an empty body and header.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public function AcknowledgeMessage()
{
- var flags:uint = flagsArray[i] as uint;
- var reservedPosition:uint = 0;
+ super();
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden Methods
+ //
+ //--------------------------------------------------------------------------
- // For forwards compatibility, read in any other flagged objects
- // to preserve the integrity of the input stream...
- if ((flags >> reservedPosition) != 0)
+ /**
+ * @private
+ */
+ override public function getSmallMessage():IMessage
+ {
+ trace("AcknowledgeMessage.getSmallMessage");
+ var o:Object = this;
+ if (o.constructor == AcknowledgeMessage)
+ return new AcknowledgeMessageExt(this);
+ return null;
+ }
+
+ /**
+ * @private
+ */
+ override public function readExternal(input:IDataInput):void
+ {
+ super.readExternal(input);
+
+ var flagsArray:Array = readFlags(input);
+ for (var i:uint = 0; i < flagsArray.length; i++)
{
- for (var j:uint = reservedPosition; j < 6; j++)
+ var flags:uint = flagsArray[i] as uint;
+ var reservedPosition:uint = 0;
+
+ // For forwards compatibility, read in any other flagged objects
+ // to preserve the integrity of the input stream...
+ if ((flags >> reservedPosition) != 0)
{
- if (((flags >> j) & 1) != 0)
+ for (var j:uint = reservedPosition; j < 6; j++)
{
- input.readObject();
+ if (((flags >> j) & 1) != 0)
+ {
+ input.readObject();
+ }
}
}
}
}
+
+ /**
+ * @private
+ */
+ override public function writeExternal(output:IDataOutput):void
+ {
+ super.writeExternal(output);
+ trace("AcknowledgeMessage.writeExternal");
+ var flags:uint = 0;
+ output.writeByte(flags);
+ }
}
- */
-
- /**
- * @private
- */
- /*
- override public function writeExternal(output:IDataOutput):void
- {
- super.writeExternal(output);
-
- var flags:uint = 0;
- output.writeByte(flags);
- }
- */
-
-}
-
}
diff --git a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/AcknowledgeMessageExt.as b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/AcknowledgeMessageExt.as
index 25d54a8..3704c48 100644
--- a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/AcknowledgeMessageExt.as
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/AcknowledgeMessageExt.as
@@ -18,15 +18,14 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.net.remoting.messages
{
- // import flash.utils.IDataOutput;
- // import flash.utils.IExternalizable;
import org.apache.royale.net.utils.IDataOutput;
+ import org.apache.royale.net.utils.IExternalizable;
[RemoteClass(alias="DSK")]
/**
* @private
*/
- public class AcknowledgeMessageExt extends AcknowledgeMessage// implements IExternalizable
+ public class AcknowledgeMessageExt extends AcknowledgeMessage implements IExternalizable
{
//--------------------------------------------------------------------------
//
diff --git a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/AsyncMessage.as b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/AsyncMessage.as
index 93cc1b6..b2a3646 100644
--- a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/AsyncMessage.as
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/AsyncMessage.as
@@ -23,7 +23,7 @@
import org.apache.royale.net.utils.IDataInput;
import org.apache.royale.net.utils.IDataOutput;
import org.apache.royale.utils.BinaryData;
-import org.apache.royale.net.utils.RPCUIDUtil;
+import org.apache.royale.utils.UIDUtil;
[RemoteClass(alias="flex.messaging.messages.AsyncMessage")]
@@ -38,7 +38,7 @@
* @productversion BlazeDS 4
* @productversion LCDS 3
*/
-public class AsyncMessage extends AbstractMessage // implements ISmallMessage
+public class AsyncMessage extends AbstractMessage implements ISmallMessage
{
//--------------------------------------------------------------------------
//
@@ -161,7 +161,7 @@
/**
* @private
*/
- /*public function getSmallMessage():IMessage
+ public function getSmallMessage():IMessage
{
// If it is a subclass, it will need to override this itself if it wants to use
// small messages.
@@ -169,7 +169,7 @@
if (o.constructor == AsyncMessage)
return new AsyncMessageExt(this);
return null;
- }*/
+ }
/**
* @private
@@ -192,7 +192,7 @@
if ((flags & CORRELATION_ID_BYTES_FLAG) != 0)
{
correlationIdBytes = input.readObject() as BinaryData;
- correlationId = RPCUIDUtil.fromByteArray(correlationIdBytes);
+ correlationId = UIDUtil.fromBinary(correlationIdBytes);
}
reservedPosition = 2;
@@ -219,9 +219,8 @@
override public function writeExternal(output:IDataOutput):void
{
super.writeExternal(output);
-
if (correlationIdBytes == null)
- correlationIdBytes = RPCUIDUtil.toByteArray(_correlationId);
+ correlationIdBytes = UIDUtil.toBinary(_correlationId);
var flags:uint = 0;
diff --git a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/AsyncMessageExt.as b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/AsyncMessageExt.as
new file mode 100644
index 0000000..57f5f47
--- /dev/null
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/AsyncMessageExt.as
@@ -0,0 +1,76 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.net.remoting.messages
+{
+ import org.apache.royale.net.utils.IDataOutput;
+ import org.apache.royale.net.utils.IExternalizable;
+
+ [RemoteClass(alias="DSA")]
+ /**
+ * A special serialization wrapper for AsyncMessages. This wrapper is used to
+ * enable the externalizable form of an AsyncMessage for serialization. The
+ * wrapper must be applied just before the message is serialized as it does not
+ * proxy any information to the wrapped message.
+ *
+ * @private
+ */
+ public class AsyncMessageExt extends AsyncMessage implements IExternalizable
+ {
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ public function AsyncMessageExt(message:AsyncMessage=null)
+ {
+ super();
+ _message = message;
+ }
+
+ override public function writeExternal(output:IDataOutput):void
+ {
+ if (_message != null)
+ _message.writeExternal(output);
+ else
+ super.writeExternal(output);
+ }
+
+ /**
+ * The unique id for the message.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ override public function get messageId():String
+ {
+ /* If we are wrapping another message, use its messageId */
+ if (_message != null)
+ return _message.messageId;
+
+ return super.messageId;
+ }
+
+ private var _message:AsyncMessage;
+ }
+
+}
diff --git a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/CommandMessage.as b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/CommandMessage.as
index 06a02a9..7eb7570 100644
--- a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/CommandMessage.as
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/CommandMessage.as
@@ -19,565 +19,553 @@
package org.apache.royale.net.remoting.messages
{
+ import org.apache.royale.net.utils.IDataInput;
+ import org.apache.royale.net.utils.IDataOutput;
-COMPILE::SWF
-{
-import flash.utils.IDataInput;
-import flash.utils.IDataOutput;
-}
-
-[RemoteClass(alias="flex.messaging.messages.CommandMessage")]
-
-/**
- * The CommandMessage class provides a mechanism for sending commands to the
- * server infrastructure, such as commands related to publish/subscribe
- * messaging scenarios, ping operations, and cluster operations.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- *
- * @royalesuppresspublicvarwarning
- */
-public class CommandMessage extends AsyncMessage
-{
- //--------------------------------------------------------------------------
- //
- // Static Constants
- //
- //--------------------------------------------------------------------------
-
- /**
- * This operation is used to subscribe to a remote destination.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const SUBSCRIBE_OPERATION:uint = 0;
+ [RemoteClass(alias="flex.messaging.messages.CommandMessage")]
/**
- * This operation is used to unsubscribe from a remote destination.
+ * The CommandMessage class provides a mechanism for sending commands to the
+ * server infrastructure, such as commands related to publish/subscribe
+ * messaging scenarios, ping operations, and cluster operations.
*
* @langversion 3.0
* @playerversion Flash 9
* @playerversion AIR 1.1
* @productversion BlazeDS 4
* @productversion LCDS 3
+ *
+ * @royalesuppresspublicvarwarning
*/
- public static const UNSUBSCRIBE_OPERATION:uint = 1;
-
- /**
- * This operation is used to poll a remote destination for pending,
- * undelivered messages.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const POLL_OPERATION:uint = 2;
-
- /**
- * This operation is used by a remote destination to sync missed or cached messages
- * back to a client as a result of a client issued poll command.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const CLIENT_SYNC_OPERATION:uint = 4;
-
- /**
- * This operation is used to test connectivity over the current channel to
- * the remote endpoint.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const CLIENT_PING_OPERATION:uint = 5;
-
- /**
- * This operation is used to request a list of failover endpoint URIs
- * for the remote destination based on cluster membership.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const CLUSTER_REQUEST_OPERATION:uint = 7;
-
- /**
- * This operation is used to send credentials to the endpoint so that
- * the user can be logged in over the current channel.
- * The credentials need to be Base64 encoded and stored in the <code>body</code>
- * of the message.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const LOGIN_OPERATION:uint = 8;
-
- /**
- * This operation is used to log the user out of the current channel, and
- * will invalidate the server session if the channel is HTTP based.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const LOGOUT_OPERATION:uint = 9;
-
- /**
- * Endpoints can imply what features they support by reporting the
- * latest version of messaging they are capable of during the handshake of
- * the initial ping CommandMessage.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const MESSAGING_VERSION:String = "DSMessagingVersion";
-
- /**
- * This operation is used to indicate that the client's subscription with a
- * remote destination has timed out.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const SUBSCRIPTION_INVALIDATE_OPERATION:uint = 10;
-
- /**
- * Used by the MultiTopicConsumer to subscribe/unsubscribe for more
- * than one topic in the same message.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const MULTI_SUBSCRIBE_OPERATION:uint = 11;
-
- /**
- * This operation is used to indicate that a channel has disconnected.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const DISCONNECT_OPERATION:uint = 12;
+ public class CommandMessage extends AsyncMessage
+ {
+ //--------------------------------------------------------------------------
+ //
+ // Static Constants
+ //
+ //--------------------------------------------------------------------------
- /**
- * This operation is used to trigger a ChannelSet to connect.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const TRIGGER_CONNECT_OPERATION:uint = 13;
-
- /**
- * This is the default operation for new CommandMessage instances.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const UNKNOWN_OPERATION:uint = 10000;
-
- /**
- * The server message type for authentication commands.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const AUTHENTICATION_MESSAGE_REF_TYPE:String = "flex.messaging.messages.AuthenticationMessage";
+ /**
+ * This operation is used to subscribe to a remote destination.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const SUBSCRIBE_OPERATION:uint = 0;
- /**
- * Subscribe commands issued by a Consumer pass the Consumer's <code>selector</code>
- * expression in this header.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const SELECTOR_HEADER:String = "DSSelector";
-
- /**
- * Durable JMS subscriptions are preserved when an unsubscribe message
- * has this parameter set to true in its header.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const PRESERVE_DURABLE_HEADER:String = "DSPreserveDurable";
+ /**
+ * This operation is used to unsubscribe from a remote destination.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const UNSUBSCRIBE_OPERATION:uint = 1;
- /**
- * Header to indicate that the Channel needs the configuration from the
- * server.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const NEEDS_CONFIG_HEADER:String = "DSNeedsConfig";
+ /**
+ * This operation is used to poll a remote destination for pending,
+ * undelivered messages.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const POLL_OPERATION:uint = 2;
- /**
- * Header used in a MULTI_SUBSCRIBE message to specify an Array of subtopic/selector
- * pairs to add to the existing set of subscriptions.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const ADD_SUBSCRIPTIONS:String = "DSAddSub";
+ /**
+ * This operation is used by a remote destination to sync missed or cached messages
+ * back to a client as a result of a client issued poll command.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const CLIENT_SYNC_OPERATION:uint = 4;
- /**
- * Like the above, but specifies the subtopic/selector array of to remove
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const REMOVE_SUBSCRIPTIONS:String = "DSRemSub";
-
- /**
- * The separator string used for separating subtopic and selectors in the
- * add and remove subscription headers.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const SUBTOPIC_SEPARATOR:String = "_;_";
-
- /**
- * Header to drive an idle wait time before the next client poll request.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const POLL_WAIT_HEADER:String = "DSPollWait";
-
- /**
- * Header to suppress poll response processing. If a client has a long-poll
- * parked on the server and issues another poll, the response to this subsequent poll
- * should be tagged with this header in which case the response is treated as a
- * no-op and the next poll will not be scheduled. Without this, a subsequent poll
- * will put the channel and endpoint into a busy polling cycle.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const NO_OP_POLL_HEADER:String = "DSNoOpPoll";
+ /**
+ * This operation is used to test connectivity over the current channel to
+ * the remote endpoint.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const CLIENT_PING_OPERATION:uint = 5;
+
+ /**
+ * This operation is used to request a list of failover endpoint URIs
+ * for the remote destination based on cluster membership.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const CLUSTER_REQUEST_OPERATION:uint = 7;
+
+ /**
+ * This operation is used to send credentials to the endpoint so that
+ * the user can be logged in over the current channel.
+ * The credentials need to be Base64 encoded and stored in the <code>body</code>
+ * of the message.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const LOGIN_OPERATION:uint = 8;
+
+ /**
+ * This operation is used to log the user out of the current channel, and
+ * will invalidate the server session if the channel is HTTP based.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const LOGOUT_OPERATION:uint = 9;
- /**
- * Header to specify which character set encoding was used while encoding
- * login credentials.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const CREDENTIALS_CHARSET_HEADER:String = "DSCredentialsCharset";
+ /**
+ * Endpoints can imply what features they support by reporting the
+ * latest version of messaging they are capable of during the handshake of
+ * the initial ping CommandMessage.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const MESSAGING_VERSION:String = "DSMessagingVersion";
- /**
- * Header to indicate the maximum number of messages a Consumer wants to
- * receive per second.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public static const MAX_FREQUENCY_HEADER:String = "DSMaxFrequency";
-
- /**
- * Header that indicates the message is a heartbeat.
- */
- public static const HEARTBEAT_HEADER:String = "DS<3";
+ /**
+ * This operation is used to indicate that the client's subscription with a
+ * remote destination has timed out.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const SUBSCRIPTION_INVALIDATE_OPERATION:uint = 10;
- //--------------------------------------------------------------------------
- //
- // Private Static Constants for Serialization
- //
- //--------------------------------------------------------------------------
+ /**
+ * Used by the MultiTopicConsumer to subscribe/unsubscribe for more
+ * than one topic in the same message.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const MULTI_SUBSCRIBE_OPERATION:uint = 11;
+
+ /**
+ * This operation is used to indicate that a channel has disconnected.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const DISCONNECT_OPERATION:uint = 12;
+
+ /**
+ * This operation is used to trigger a ChannelSet to connect.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const TRIGGER_CONNECT_OPERATION:uint = 13;
+
+ /**
+ * This is the default operation for new CommandMessage instances.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const UNKNOWN_OPERATION:uint = 10000;
+
+ /**
+ * The server message type for authentication commands.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const AUTHENTICATION_MESSAGE_REF_TYPE:String = "flex.messaging.messages.AuthenticationMessage";
- private static const OPERATION_FLAG:uint = 1;
+ /**
+ * Subscribe commands issued by a Consumer pass the Consumer's <code>selector</code>
+ * expression in this header.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const SELECTOR_HEADER:String = "DSSelector";
+
+ /**
+ * Durable JMS subscriptions are preserved when an unsubscribe message
+ * has this parameter set to true in its header.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const PRESERVE_DURABLE_HEADER:String = "DSPreserveDurable";
- //--------------------------------------------------------------------------
- //
- // Static Variables
- //
- //--------------------------------------------------------------------------
-
- /**
- * @private
- * Map of operations to semi-descriptive operation text strings.
- */
- private static var operationTexts:Object = null;
+ /**
+ * Header to indicate that the Channel needs the configuration from the
+ * server.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const NEEDS_CONFIG_HEADER:String = "DSNeedsConfig";
-
- //--------------------------------------------------------------------------
- //
- // Constructor
- //
- //--------------------------------------------------------------------------
-
- /**
- * Constructs an instance of a CommandMessage with an empty body and header
- * and a default <code>operation</code> of <code>UNKNOWN_OPERATION</code>.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public function CommandMessage()
- {
- super();
- operation = UNKNOWN_OPERATION;
- }
+ /**
+ * Header used in a MULTI_SUBSCRIBE message to specify an Array of subtopic/selector
+ * pairs to add to the existing set of subscriptions.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const ADD_SUBSCRIPTIONS:String = "DSAddSub";
- //--------------------------------------------------------------------------
- //
- // Variables
- //
- //--------------------------------------------------------------------------
+ /**
+ * Like the above, but specifies the subtopic/selector array of to remove
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const REMOVE_SUBSCRIPTIONS:String = "DSRemSub";
+
+ /**
+ * The separator string used for separating subtopic and selectors in the
+ * add and remove subscription headers.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const SUBTOPIC_SEPARATOR:String = "_;_";
+
+ /**
+ * Header to drive an idle wait time before the next client poll request.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const POLL_WAIT_HEADER:String = "DSPollWait";
+
+ /**
+ * Header to suppress poll response processing. If a client has a long-poll
+ * parked on the server and issues another poll, the response to this subsequent poll
+ * should be tagged with this header in which case the response is treated as a
+ * no-op and the next poll will not be scheduled. Without this, a subsequent poll
+ * will put the channel and endpoint into a busy polling cycle.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const NO_OP_POLL_HEADER:String = "DSNoOpPoll";
- /**
- * Provides access to the operation/command for the CommandMessage.
- * Operations indicate how this message should be processed by the remote
- * destination.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public var operation:uint;
+ /**
+ * Header to specify which character set encoding was used while encoding
+ * login credentials.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const CREDENTIALS_CHARSET_HEADER:String = "DSCredentialsCharset";
- //--------------------------------------------------------------------------
- //
- // Overridden Methods
- //
- //--------------------------------------------------------------------------
+ /**
+ * Header to indicate the maximum number of messages a Consumer wants to
+ * receive per second.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public static const MAX_FREQUENCY_HEADER:String = "DSMaxFrequency";
+
+ /**
+ * Header that indicates the message is a heartbeat.
+ */
+ public static const HEARTBEAT_HEADER:String = "DS<3";
- /**
- * @private
- */
- /*
- override public function getSmallMessage():IMessage
- {
- // We shouldn't use small messages for PING or LOGIN operations as the
- // messaging version handshake would not yet be complete... for now just
- // optimize POLL operations.
- if (operation == POLL_OPERATION)
+ //--------------------------------------------------------------------------
+ //
+ // Private Static Constants for Serialization
+ //
+ //--------------------------------------------------------------------------
+
+ private static const OPERATION_FLAG:uint = 1;
+
+ //--------------------------------------------------------------------------
+ //
+ // Static Variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ * Map of operations to semi-descriptive operation text strings.
+ */
+ private static var operationTexts:Object = null;
+
+
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructs an instance of a CommandMessage with an empty body and header
+ * and a default <code>operation</code> of <code>UNKNOWN_OPERATION</code>.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public function CommandMessage()
{
- return new CommandMessageExt(this);
+ super();
+ operation = UNKNOWN_OPERATION;
}
- return null;
- }
- */
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
- /**
- * @private
- */
- /*
- override protected function addDebugAttributes(attributes:Object):void
- {
- super.addDebugAttributes(attributes);
- attributes["operation"] = getOperationAsString(operation);
- }
- */
-
- /**
- * Returns a string representation of the message.
- *
- * @return String representation of the message.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- /*
- override public function toString():String
- {
- return getDebugString();
- }
- */
+ /**
+ * Provides access to the operation/command for the CommandMessage.
+ * Operations indicate how this message should be processed by the remote
+ * destination.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public var operation:uint;
- //--------------------------------------------------------------------------
- //
- // Methods
- //
- //--------------------------------------------------------------------------
+ //--------------------------------------------------------------------------
+ //
+ // Overridden Methods
+ //
+ //--------------------------------------------------------------------------
- /**
- * Provides a description of the operation specified.
- * This method is used in <code>toString()</code> operations on this
- * message.
- *
- * @param op One of the CommandMessage operation constants.
- *
- * @return Short name for the operation.
- *
- * @example
- * <code><pre>
- * var msg:CommandMessage = CommandMessage(event.message);
- * trace("Current operation -'"+
- * CommandMessage.getOperationAsString(msg.operation)+ "'.");
- * </pre></code>
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- /*
- public static function getOperationAsString(op:uint):String
- {
- if (operationTexts == null)
+ /**
+ * @private
+ */
+ override public function getSmallMessage():IMessage
{
- operationTexts = {};
- operationTexts[SUBSCRIBE_OPERATION] = "subscribe";
- operationTexts[UNSUBSCRIBE_OPERATION] = "unsubscribe";
- operationTexts[POLL_OPERATION] = "poll";
- operationTexts[CLIENT_SYNC_OPERATION] = "client sync";
- operationTexts[CLIENT_PING_OPERATION] = "client ping";
- operationTexts[CLUSTER_REQUEST_OPERATION] = "cluster request";
- operationTexts[LOGIN_OPERATION] = "login";
- operationTexts[LOGOUT_OPERATION] = "logout";
- operationTexts[SUBSCRIPTION_INVALIDATE_OPERATION] = "subscription invalidate";
- operationTexts[MULTI_SUBSCRIBE_OPERATION] = "multi-subscribe";
- operationTexts[DISCONNECT_OPERATION] = "disconnect";
- operationTexts[TRIGGER_CONNECT_OPERATION] = "trigger connect";
- operationTexts[UNKNOWN_OPERATION] = "unknown";
- }
- var result:* = operationTexts[op];
- return result == undefined ? op.toString() : String(result);
- }
- */
-
- /**
- * @private
- */
- /*
- override public function readExternal(input:IDataInput):void
- {
- super.readExternal(input);
-
- var flagsArray:Array = readFlags(input);
- for (var i:uint = 0; i < flagsArray.length; i++)
- {
- var flags:uint = flagsArray[i] as uint;
- var reservedPosition:uint = 0;
-
- if (i == 0)
+ // We shouldn't use small messages for PING or LOGIN operations as the
+ // messaging version handshake would not yet be complete... for now just
+ // optimize POLL operations.
+ if (operation == POLL_OPERATION)
{
- if ((flags & OPERATION_FLAG) != 0)
- operation = input.readObject() as uint;
-
- reservedPosition = 1;
+ return new CommandMessageExt(this);
}
- // For forwards compatibility, read in any other flagged objects
- // to preserve the integrity of the input stream...
- if ((flags >> reservedPosition) != 0)
+ return null;
+ }
+
+ /**
+ * @private
+ */
+ /*
+ override protected function addDebugAttributes(attributes:Object):void
+ {
+ super.addDebugAttributes(attributes);
+ attributes["operation"] = getOperationAsString(operation);
+ }
+ */
+
+ /**
+ * Returns a string representation of the message.
+ *
+ * @return String representation of the message.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ /*
+ override public function toString():String
+ {
+ return getDebugString();
+ }
+ */
+
+ //--------------------------------------------------------------------------
+ //
+ // Methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Provides a description of the operation specified.
+ * This method is used in <code>toString()</code> operations on this
+ * message.
+ *
+ * @param op One of the CommandMessage operation constants.
+ *
+ * @return Short name for the operation.
+ *
+ * @example
+ * <code><pre>
+ * var msg:CommandMessage = CommandMessage(event.message);
+ * trace("Current operation -'"+
+ * CommandMessage.getOperationAsString(msg.operation)+ "'.");
+ * </pre></code>
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ /*
+ public static function getOperationAsString(op:uint):String
+ {
+ if (operationTexts == null)
{
- for (var j:uint = reservedPosition; j < 6; j++)
+ operationTexts = {};
+ operationTexts[SUBSCRIBE_OPERATION] = "subscribe";
+ operationTexts[UNSUBSCRIBE_OPERATION] = "unsubscribe";
+ operationTexts[POLL_OPERATION] = "poll";
+ operationTexts[CLIENT_SYNC_OPERATION] = "client sync";
+ operationTexts[CLIENT_PING_OPERATION] = "client ping";
+ operationTexts[CLUSTER_REQUEST_OPERATION] = "cluster request";
+ operationTexts[LOGIN_OPERATION] = "login";
+ operationTexts[LOGOUT_OPERATION] = "logout";
+ operationTexts[SUBSCRIPTION_INVALIDATE_OPERATION] = "subscription invalidate";
+ operationTexts[MULTI_SUBSCRIBE_OPERATION] = "multi-subscribe";
+ operationTexts[DISCONNECT_OPERATION] = "disconnect";
+ operationTexts[TRIGGER_CONNECT_OPERATION] = "trigger connect";
+ operationTexts[UNKNOWN_OPERATION] = "unknown";
+ }
+ var result:* = operationTexts[op];
+ return result == undefined ? op.toString() : String(result);
+ }
+ */
+
+ /**
+ * @private
+ */
+ override public function readExternal(input:IDataInput):void
+ {
+ super.readExternal(input);
+
+ var flagsArray:Array = readFlags(input);
+ for (var i:uint = 0; i < flagsArray.length; i++)
+ {
+ var flags:uint = flagsArray[i] as uint;
+ var reservedPosition:uint = 0;
+
+ if (i == 0)
{
- if (((flags >> j) & 1) != 0)
+ if ((flags & OPERATION_FLAG) != 0)
+ operation = input.readObject() as uint;
+
+ reservedPosition = 1;
+ }
+
+ // For forwards compatibility, read in any other flagged objects
+ // to preserve the integrity of the input stream...
+ if ((flags >> reservedPosition) != 0)
+ {
+ for (var j:uint = reservedPosition; j < 6; j++)
{
- input.readObject();
+ if (((flags >> j) & 1) != 0)
+ {
+ input.readObject();
+ }
}
}
}
}
+
+ /**
+ * @private
+ */
+ override public function writeExternal(output:IDataOutput):void
+ {
+ super.writeExternal(output);
+
+ var flags:uint = 0;
+
+ if (operation != 0)
+ flags |= OPERATION_FLAG;
+
+ output.writeByte(flags);
+
+ if (operation != 0)
+ output.writeObject(operation);
+ }
}
- */
-
- /**
- * @private
- */
- /*
- override public function writeExternal(output:IDataOutput):void
- {
- super.writeExternal(output);
-
- var flags:uint = 0;
-
- if (operation != 0)
- flags |= OPERATION_FLAG;
-
- output.writeByte(flags);
-
- if (operation != 0)
- output.writeObject(operation);
- }
- */
-
-}
-
}
diff --git a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/CommandMessageExt.as b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/CommandMessageExt.as
new file mode 100644
index 0000000..6f2a157
--- /dev/null
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/CommandMessageExt.as
@@ -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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.net.remoting.messages
+{
+ import org.apache.royale.net.utils.IDataOutput;
+ import org.apache.royale.net.utils.IExternalizable;
+
+ [RemoteClass(alias="DSC")]
+ /**
+ * A special serialization wrapper for CommandMessage. This wrapper is used to
+ * enable the externalizable form of an CommandMessage for serialization. The
+ * wrapper must be applied just before the message is serialized as it does not
+ * proxy any information to the wrapped message.
+ *
+ * @private
+ */
+ public class CommandMessageExt extends CommandMessage implements IExternalizable
+ {
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ public function CommandMessageExt(message:CommandMessage=null)
+ {
+ super();
+ _message = message;
+ }
+
+ override public function writeExternal(output:IDataOutput):void
+ {
+ if (_message != null)
+ _message.writeExternal(output);
+ else
+ super.writeExternal(output);
+ }
+
+ /**
+ * The unique id for the message.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ override public function get messageId():String
+ {
+ /* If we are wrapping another message, use its messageId */
+ if (_message != null)
+ return _message.messageId;
+
+ return super.messageId;
+ }
+
+ private var _message:CommandMessage;
+ }
+}
diff --git a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/ErrorMessage.as b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/ErrorMessage.as
index 4b5d6cb..48ad468 100644
--- a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/ErrorMessage.as
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/ErrorMessage.as
@@ -16,63 +16,59 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-
package org.apache.royale.net.remoting.messages
{
-
-[RemoteClass(alias="flex.messaging.messages.ErrorMessage")]
-
-/**
- * ErrorMessages are sometimes returned from RPC requests to a remote endpoint.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- *
- * @royalesuppresspublicvarwarning
- */
-public class ErrorMessage extends AbstractMessage
-{
- //--------------------------------------------------------------------------
- //
- // Constructor
- //
- //--------------------------------------------------------------------------
-
+ [RemoteClass(alias="flex.messaging.messages.ErrorMessage")]
/**
- * Constructs an uninitialized ErrorMessage.
+ * ErrorMessages are sometimes returned from RPC requests to a remote endpoint.
*
* @langversion 3.0
* @playerversion Flash 9
* @playerversion AIR 1.1
* @productversion BlazeDS 4
* @productversion LCDS 3
+ *
+ * @royalesuppresspublicvarwarning
*/
- public function ErrorMessage()
+ public class ErrorMessage extends AcknowledgeMessage
{
- super();
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructs an uninitialized ErrorMessage.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public function ErrorMessage()
+ {
+ super();
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Provides the error message.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public var message:String;
+
+
}
-
- //--------------------------------------------------------------------------
- //
- // Variables
- //
- //--------------------------------------------------------------------------
-
- /**
- * Provides the error message.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public var message:String;
-
-
-}
-
}
diff --git a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/IMessage.as b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/IMessage.as
index 303bf7a..2f896ee 100644
--- a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/IMessage.as
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/IMessage.as
@@ -16,34 +16,10 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-
package org.apache.royale.net.remoting.messages
{
-
-/**
- * This interface defines the contract for message objects.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
-public interface IMessage
-{
- //--------------------------------------------------------------------------
- //
- // Properties
- //
- //--------------------------------------------------------------------------
-
- //----------------------------------
- // body
- //----------------------------------
-
/**
- * The body of a message contains the specific data that needs to be
- * delivered to the remote destination.
+ * This interface defines the contract for message objects.
*
* @langversion 3.0
* @playerversion Flash 9
@@ -51,172 +27,192 @@
* @productversion BlazeDS 4
* @productversion LCDS 3
*/
- function get body():Object;
-
- /**
- * @private
- */
- function set body(value:Object):void;
-
- //----------------------------------
- // clientId
- //----------------------------------
-
- /**
- * The clientId indicates which client sent the message.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- function get clientId():String;
-
- /**
- * @private
- */
- function set clientId(value:String):void;
-
- //----------------------------------
- // destination
- //----------------------------------
-
- /**
- * The message destination.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- function get destination():String;
-
- /**
- * @private
- */
- function set destination(value:String):void;
+ public interface IMessage
+ {
+ //--------------------------------------------------------------------------
+ //
+ // Properties
+ //
+ //--------------------------------------------------------------------------
- //----------------------------------
- // headers
- //----------------------------------
+ //----------------------------------
+ // body
+ //----------------------------------
- /**
- * Provides access to the headers of the message.
- * The headers of a message are an associative array where the key is the
- * header name.
- * This property provides access to specialized meta information for the
- * specific message instance.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- function get headers():Object;
-
- /**
- * @private
- */
- function set headers(value:Object):void;
-
- //----------------------------------
- // messageId
- //----------------------------------
-
- /**
- * The unique id for the message.
- * The message id can be used to correlate a response to the original
- * request message in request-response messaging scenarios.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- function get messageId():String;
-
- /**
- * @private
- */
- function set messageId(value:String):void;
+ /**
+ * The body of a message contains the specific data that needs to be
+ * delivered to the remote destination.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ function get body():Object;
+
+ /**
+ * @private
+ */
+ function set body(value:Object):void;
+
+ //----------------------------------
+ // clientId
+ //----------------------------------
+
+ /**
+ * The clientId indicates which client sent the message.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ function get clientId():String;
+
+ /**
+ * @private
+ */
+ function set clientId(value:String):void;
+
+ //----------------------------------
+ // destination
+ //----------------------------------
+
+ /**
+ * The message destination.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ function get destination():String;
+
+ /**
+ * @private
+ */
+ function set destination(value:String):void;
- //----------------------------------
- // timestamp
- //----------------------------------
+ //----------------------------------
+ // headers
+ //----------------------------------
- /**
- * Provides access to the time stamp for the message.
- * A time stamp is the date and time that the message was sent.
- * The time stamp is used for tracking the message through the system,
- * ensuring quality of service levels and providing a mechanism for
- * expiration.
- *
- * @see #timeToLive
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- function get timestamp():Number;
-
- /**
- * @private
- */
- function set timestamp(value:Number):void;
+ /**
+ * Provides access to the headers of the message.
+ * The headers of a message are an associative array where the key is the
+ * header name.
+ * This property provides access to specialized meta information for the
+ * specific message instance.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ function get headers():Object;
+
+ /**
+ * @private
+ */
+ function set headers(value:Object):void;
+
+ //----------------------------------
+ // messageId
+ //----------------------------------
+
+ /**
+ * The unique id for the message.
+ * The message id can be used to correlate a response to the original
+ * request message in request-response messaging scenarios.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ function get messageId():String;
+
+ /**
+ * @private
+ */
+ function set messageId(value:String):void;
- //----------------------------------
- // timeToLive
- //----------------------------------
-
- /**
- * The time to live value of a message indicates how long the message
- * should be considered valid and deliverable.
- * This value works in conjunction with the <code>timestamp</code> value.
- * Time to live is the number of milliseconds that this message remains
- * valid starting from the specified <code>timestamp</code> value.
- * For example, if the <code>timestamp</code> value is 04/05/05 1:30:45 PST
- * and the <code>timeToLive</code> value is 5000, then this message will
- * expire at 04/05/05 1:30:50 PST.
- * Once a message expires it will not be delivered to any other clients.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- function get timeToLive():Number;
-
- /**
- * @private
- */
- function set timeToLive(value:Number):void;
-
- //--------------------------------------------------------------------------
- //
- // Methods
- //
- //--------------------------------------------------------------------------
-
- /**
- * This method will return a string representation of the message.
- *
- * @return String representation of the message.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- function toString():String;
-
-}
+ //----------------------------------
+ // timestamp
+ //----------------------------------
+ /**
+ * Provides access to the time stamp for the message.
+ * A time stamp is the date and time that the message was sent.
+ * The time stamp is used for tracking the message through the system,
+ * ensuring quality of service levels and providing a mechanism for
+ * expiration.
+ *
+ * @see #timeToLive
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ function get timestamp():Number;
+
+ /**
+ * @private
+ */
+ function set timestamp(value:Number):void;
+
+ //----------------------------------
+ // timeToLive
+ //----------------------------------
+
+ /**
+ * The time to live value of a message indicates how long the message
+ * should be considered valid and deliverable.
+ * This value works in conjunction with the <code>timestamp</code> value.
+ * Time to live is the number of milliseconds that this message remains
+ * valid starting from the specified <code>timestamp</code> value.
+ * For example, if the <code>timestamp</code> value is 04/05/05 1:30:45 PST
+ * and the <code>timeToLive</code> value is 5000, then this message will
+ * expire at 04/05/05 1:30:50 PST.
+ * Once a message expires it will not be delivered to any other clients.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ function get timeToLive():Number;
+
+ /**
+ * @private
+ */
+ function set timeToLive(value:Number):void;
+
+ //--------------------------------------------------------------------------
+ //
+ // Methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * This method will return a string representation of the message.
+ *
+ * @return String representation of the message.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ function toString():String;
+ }
}
diff --git a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/ISmallMessage.as b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/ISmallMessage.as
new file mode 100644
index 0000000..59bc0fc
--- /dev/null
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/ISmallMessage.as
@@ -0,0 +1,58 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.net.remoting.messages
+{
+ /**
+ * A marker interface that is used to indicate that an IMessage has an
+ * alternative smaller form for serialization.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public interface ISmallMessage extends IMessage
+ {
+ //--------------------------------------------------------------------------
+ //
+ // Methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * This method must be implemented by subclasses that have a "small" form,
+ * typically achieved through the use of
+ * <code>flash.utils.IExternalizable</code>. If a small form is not
+ * available this method should return null.
+ *
+ * @return Returns An alternative representation of an
+ * flex.messaging.messages.IMessage so that the serialized form
+ * is smaller than the regular message.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ function getSmallMessage():IMessage;
+ }
+
+}
\ No newline at end of file
diff --git a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/MessageBody.as b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/MessageBody.as
index 5df71c7..a6b5b6b 100644
--- a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/MessageBody.as
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/MessageBody.as
@@ -17,116 +17,112 @@
/***
* AMF JavaScript library by Emil Malinov https://github.com/emilkm/amfjs
*/
-
package org.apache.royale.net.remoting.messages
{
-
-COMPILE::SWF
-{
-import flash.utils.IDataInput;
-import flash.utils.IDataOutput;
-}
-
-[RemoteClass(alias="flex.messaging.io.amf.MessageBody")]
-
-/**
- * The MessageBody for an ActionMessage
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- *
- * @royalesuppresspublicvarwarning
- */
-public class MessageBody
-{
- //--------------------------------------------------------------------------
- //
- // Constructor
- //
- //--------------------------------------------------------------------------
-
- /**
- * Constructs an instance of a MessageBody
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public function MessageBody()
+ COMPILE::SWF
{
- super();
+ import flash.utils.IDataInput;
+ import flash.utils.IDataOutput;
}
- //--------------------------------------------------------------------------
- //
- // Variables
- //
- //--------------------------------------------------------------------------
+ [RemoteClass(alias="flex.messaging.io.amf.MessageBody")]
/**
- * The target URI.
+ * The MessageBody for an ActionMessage
*
* @langversion 3.0
* @playerversion Flash 9
* @playerversion AIR 1.1
* @productversion BlazeDS 4
* @productversion LCDS 3
+ *
+ * @royalesuppresspublicvarwarning
*/
- public var targetURI:String = "null";
-
- /**
- * The response URI.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public var responseURI:String = "/1";
-
- //--------------------------------------------------------------------------
- //
- // Properties
- //
- //--------------------------------------------------------------------------
-
- //----------------------------------
- // data
- //----------------------------------
-
- /**
- * @private
- */
- private var _data:Object;
-
- /**
- * The data to be sent.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public function get data():Object
+ public class MessageBody
{
- return _data;
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructs an instance of a MessageBody
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public function MessageBody()
+ {
+ super();
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * The target URI.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public var targetURI:String = "null";
+
+ /**
+ * The response URI.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public var responseURI:String = "/1";
+
+ //--------------------------------------------------------------------------
+ //
+ // Properties
+ //
+ //--------------------------------------------------------------------------
+
+ //----------------------------------
+ // data
+ //----------------------------------
+
+ /**
+ * @private
+ */
+ private var _data:Object;
+
+ /**
+ * The data to be sent.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public function get data():Object
+ {
+ return _data;
+ }
+
+ /**
+ * @private
+ */
+ public function set data(value:Object):void
+ {
+ _data = value;
+ }
}
-
- /**
- * @private
- */
- public function set data(value:Object):void
- {
- _data = value;
- }
-
-}
-
}
diff --git a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/MessageHeader.as b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/MessageHeader.as
index 19d9954..355cafa 100644
--- a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/MessageHeader.as
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/MessageHeader.as
@@ -17,117 +17,112 @@
/***
* AMF JavaScript library by Emil Malinov https://github.com/emilkm/amfjs
*/
-
-
package org.apache.royale.net.remoting.messages
{
-
-COMPILE::SWF
-{
-import flash.utils.IDataInput;
-import flash.utils.IDataOutput;
-}
-
-[RemoteClass(alias="flex.messaging.io.amf.MessageHeader")]
-
-/**
- * The MessageHeader for an ActionMessage
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- *
- * @royalesuppresspublicvarwarning
- */
-public class MessageHeader
-{
- //--------------------------------------------------------------------------
- //
- // Constructor
- //
- //--------------------------------------------------------------------------
-
- /**
- * Constructs an instance of a MessageHeader
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public function MessageHeader()
+ COMPILE::SWF
{
- super();
+ import flash.utils.IDataInput;
+ import flash.utils.IDataOutput;
}
- //--------------------------------------------------------------------------
- //
- // Variables
- //
- //--------------------------------------------------------------------------
+ [RemoteClass(alias="flex.messaging.io.amf.MessageHeader")]
/**
- * The header name.
+ * The MessageHeader for an ActionMessage
*
* @langversion 3.0
* @playerversion Flash 9
* @playerversion AIR 1.1
* @productversion BlazeDS 4
* @productversion LCDS 3
+ *
+ * @royalesuppresspublicvarwarning
*/
- public var name:String = "";
-
- /**
- * Whether the receipient must understand the header
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public var mustUnderstand:Boolean;
-
- //--------------------------------------------------------------------------
- //
- // Properties
- //
- //--------------------------------------------------------------------------
-
- //----------------------------------
- // data
- //----------------------------------
-
- /**
- * @private
- */
- private var _data:Object;
-
- /**
- * The data to be sent.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public function get data():Object
+ public class MessageHeader
{
- return _data;
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructs an instance of a MessageHeader
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public function MessageHeader()
+ {
+ super();
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * The header name.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public var name:String = "";
+
+ /**
+ * Whether the receipient must understand the header
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public var mustUnderstand:Boolean;
+
+ //--------------------------------------------------------------------------
+ //
+ // Properties
+ //
+ //--------------------------------------------------------------------------
+
+ //----------------------------------
+ // data
+ //----------------------------------
+
+ /**
+ * @private
+ */
+ private var _data:Object;
+
+ /**
+ * The data to be sent.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public function get data():Object
+ {
+ return _data;
+ }
+
+ /**
+ * @private
+ */
+ public function set data(value:Object):void
+ {
+ _data = value;
+ }
}
-
- /**
- * @private
- */
- public function set data(value:Object):void
- {
- _data = value;
- }
-
-}
-
}
diff --git a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/RemotingMessage.as b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/RemotingMessage.as
index 2d650ac..a85949f 100644
--- a/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/RemotingMessage.as
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/remoting/messages/RemotingMessage.as
@@ -16,82 +16,79 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-
package org.apache.royale.net.remoting.messages
{
-
-[RemoteClass(alias="flex.messaging.messages.RemotingMessage")]
-
-/**
- * RemotingMessages are used to send RPC requests to a remote endpoint.
- * These messages use the <code>operation</code> property to specify which
- * method to call on the remote object.
- * The <code>destination</code> property indicates what object/service should be
- * used.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- *
- * @royalesuppresspublicvarwarning
- */
-public class RemotingMessage extends AbstractMessage
-{
- //--------------------------------------------------------------------------
- //
- // Constructor
- //
- //--------------------------------------------------------------------------
-
+ [RemoteClass(alias="flex.messaging.messages.RemotingMessage")]
/**
- * Constructs an uninitialized RemotingMessage.
+ * RemotingMessages are used to send RPC requests to a remote endpoint.
+ * These messages use the <code>operation</code> property to specify which
+ * method to call on the remote object.
+ * The <code>destination</code> property indicates what object/service should be
+ * used.
*
* @langversion 3.0
* @playerversion Flash 9
* @playerversion AIR 1.1
* @productversion BlazeDS 4
* @productversion LCDS 3
+ *
+ * @royalesuppresspublicvarwarning
*/
- public function RemotingMessage()
+ public class RemotingMessage extends AbstractMessage
{
- super();
- operation = "";
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Constructs an uninitialized RemotingMessage.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public function RemotingMessage()
+ {
+ super();
+ operation = "";
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * Provides access to the name of the remote method/operation that
+ * should be called.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public var operation:String;
+
+ /**
+ * This property is provided for backwards compatibility. The best
+ * practice, however, is to not expose the underlying source of a
+ * RemoteObject destination on the client and only one source to
+ * a destination. Some types of Remoting Services may even ignore
+ * this property for security reasons.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 9
+ * @playerversion AIR 1.1
+ * @productversion BlazeDS 4
+ * @productversion LCDS 3
+ */
+ public var source:String;
}
-
- //--------------------------------------------------------------------------
- //
- // Variables
- //
- //--------------------------------------------------------------------------
-
- /**
- * Provides access to the name of the remote method/operation that
- * should be called.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public var operation:String;
-
- /**
- * This property is provided for backwards compatibility. The best
- * practice, however, is to not expose the underlying source of a
- * RemoteObject destination on the client and only one source to
- * a destination. Some types of Remoting Services may even ignore
- * this property for security reasons.
- *
- * @langversion 3.0
- * @playerversion Flash 9
- * @playerversion AIR 1.1
- * @productversion BlazeDS 4
- * @productversion LCDS 3
- */
- public var source:String;
-}
}
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/utils/IExternalizable.as
similarity index 77%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to frameworks/projects/Network/src/main/royale/org/apache/royale/net/utils/IExternalizable.as
index 75d1f7d..19364f4 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/frameworks/projects/Network/src/main/royale/org/apache/royale/net/utils/IExternalizable.as
@@ -1,4 +1,3 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,13 +16,15 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-
-@namespace "http://www.w3.org/1999/xhtml";
-
-.Application
+package org.apache.royale.net.utils
{
- padding: 10px;
- margin: 10px;
+ /**
+ * replacement for flash.utils.IExternalizable
+ */
+ public interface IExternalizable
+ {
+ function readExternal(input:IDataInput):void;
+
+ function writeExternal(output:IDataOutput):void;
+ }
}
-
\ No newline at end of file
diff --git a/frameworks/projects/Reflection/src/main/royale/org/apache/royale/reflection/getClassByAlias.as b/frameworks/projects/Reflection/src/main/royale/org/apache/royale/reflection/getClassByAlias.as
index 7ba6cc5..c430afd 100644
--- a/frameworks/projects/Reflection/src/main/royale/org/apache/royale/reflection/getClassByAlias.as
+++ b/frameworks/projects/Reflection/src/main/royale/org/apache/royale/reflection/getClassByAlias.as
@@ -36,8 +36,14 @@
COMPILE::JS {
if (aliasName == null) throw new TypeError("Parameter aliasName must be non-null.");
if (aliasName.length==0) throw new TypeError("Parameter aliasName must be non-empty string.");
- var klazz:Class = TypeDefinition.getClassByAlias(aliasName);
- if (!klazz) throw new ReferenceError("Class "+aliasName+" could not be found.");
+ try
+ {
+ var klazz:Class = TypeDefinition.getClassByAlias(aliasName);
+ }
+ catch (e)
+ {
+ throw new ReferenceError("Class "+aliasName+" could not be found.");
+ }
return klazz;
}
}
diff --git a/frameworks/projects/SparkRoyale/src/main/royale/spark/primitives/Path.as b/frameworks/projects/SparkRoyale/src/main/royale/spark/primitives/Path.as
index a88bf68..5add61c 100644
--- a/frameworks/projects/SparkRoyale/src/main/royale/spark/primitives/Path.as
+++ b/frameworks/projects/SparkRoyale/src/main/royale/spark/primitives/Path.as
@@ -2074,7 +2074,7 @@
* @playerversion AIR 1.5
* @productversion Royale 0.9.4
*/
-/* class PathSegment extends Object
+/* class PathSegment
{ */
//--------------------------------------------------------------------------
diff --git a/frameworks/projects/TLF/src/main/royale/org/apache/royale/textLayout/edit/TextFlowEdit.as b/frameworks/projects/TLF/src/main/royale/org/apache/royale/textLayout/edit/TextFlowEdit.as
index 780f6de..28fb93c 100644
--- a/frameworks/projects/TLF/src/main/royale/org/apache/royale/textLayout/edit/TextFlowEdit.as
+++ b/frameworks/projects/TLF/src/main/royale/org/apache/royale/textLayout/edit/TextFlowEdit.as
@@ -628,7 +628,7 @@
/**
* @private
* findAndSplitElement - starting at the child <code>elementIdx</code> of <code>fbe</code>, iterate
- * through the elements untill we find the one located at the aboslute index of <code>startIdx</code>. Upon
+ * through the elements until we find the one located at the aboslute index of <code>startIdx</code>. Upon
* locating the child, split either the element itself OR its children based on the value of <code>splitSubBlockContents</code>
*
* @param fbe:FlowGroupElement - the FBE into which the newSPB is being inserted.
diff --git a/frameworks/projects/Testing/build.xml b/frameworks/projects/Testing/build.xml
index b63d0d1..e0361c4 100644
--- a/frameworks/projects/Testing/build.xml
+++ b/frameworks/projects/Testing/build.xml
@@ -62,8 +62,7 @@
<target name="compile-js">
<ant dir="${ROYALE_HOME}/frameworks/js/projects/${ant.project.name}JS/" inheritAll="false" >
- <property name="FALCON_HOME" value="${FALCON_HOME}"/>
- <property name="FALCONJX_HOME" value="${FALCONJX_HOME}"/>
+ <property name="ROYALE_COMPILER_HOME" value="${ROYALE_COMPILER_HOME}"/>
<property name="FLEX_HOME" value="${FLEX_HOME}"/>
</ant>
</target>
@@ -105,11 +104,10 @@
<target name="compile" description="Compiles .as files into .swc" if="env.AIR_HOME">
<echo message="Compiling libs/${ant.project.name}.swc"/>
<echo message="FLEX_HOME: ${FLEX_HOME}"/>
- <echo message="FALCON_HOME: ${FALCON_HOME}"/>
- <echo message="FALCONJX_HOME: ${FALCONJX_HOME}"/>
+ <echo message="ROYALE_COMPILER_HOME: ${ROYALE_COMPILER_HOME}"/>
<echo message="FLEXUNIT_HOME: ${FLEXUNIT_HOME}"/>
- <java jar="${FALCONJX_HOME}/lib/compc.jar" fork="true" >
+ <java jar="${ROYALE_COMPILER_HOME}/lib/compc.jar" fork="true" >
<jvmarg value="-Xmx384m" />
<jvmarg value="-Dsun.io.useCanonCaches=false" />
<jvmarg value="-Droyalelib=${FLEX_HOME}/frameworks" />
@@ -126,35 +124,35 @@
</java>
</target>
- <target name="check-compiler" depends="check-falcon-home,check-falconjx-home">
+ <target name="check-compiler" depends="check-compiler-home,check-transpiler-home">
<path id="lib.path">
- <fileset dir="${FALCONJX_HOME}/lib" includes="falcon-royaleTasks.jar"/>
+ <fileset dir="${ROYALE_COMPILER_HOME}/lib" includes="compiler-royaleTasks.jar"/>
</path>
<taskdef resource="flexTasks.tasks" classpathref="lib.path"/>
</target>
- <target name="check-falcon-home"
- description="Set FALCON_HOME to point at the compiler.">
+ <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="FALCON_HOME"
+ property="ROYALE_SWF_COMPILER_HOME"
value="${ROYALE_HOME}"/>
- <fail message="FALCON_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="FALCON_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-falconjx-home"
- description="Set FALCONJX_HOME to point at the cross-compiler.">
+ <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="FALCONJX_HOME"
+ property="ROYALE_COMPILER_HOME"
value="${ROYALE_HOME}/js"/>
- <fail message="FALCONJX_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="FALCONJX_HOME"/>
+ <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/Testing/src/test/royale/build.xml b/frameworks/projects/Testing/src/test/royale/build.xml
index b99be2f..422093e 100644
--- a/frameworks/projects/Testing/src/test/royale/build.xml
+++ b/frameworks/projects/Testing/src/test/royale/build.xml
@@ -26,7 +26,7 @@
<property environment="env"/>
<property file="${ROYALE_HOME}/build.properties"/>
<property name="FLEX_HOME" value="${env.FLEX_HOME}"/>
- <property name="FALCON_HOME" value="${env.FALCON_HOME}"/>
+ <property name="ROYALE_COMPILER_HOME" value="${env.ROYALE_COMPILER_HOME}"/>
<property name="target.name" value="Core-${release.version}.swc" />
<!-- adding flexuint style meta collection, and additional testing meta tags (Event,Bindable,TestMeta)-->
@@ -89,13 +89,13 @@
</target>
<path id="lib.path">
- <fileset dir="${FALCONJX_HOME}/lib" includes="falcon-royaleTasks.jar"/>
+ <fileset dir="${ROYALE_COMPILER_HOME}/lib" includes="falcon-royaleTasks.jar"/>
</path>
<target name="compile" description="Compiles FlexUnitApplication.swf">
<echo message="Compiling FlexUnitRoyaleApplication.swf"/>
<echo message="FLEX_HOME: ${FLEX_HOME}"/>
- <echo message="FALCON_HOME: ${FALCON_HOME}"/>
+ <echo message="ROYALE_COMPILER_HOME: ${ROYALE_COMPILER_HOME}"/>
<echo message="FLEXUNIT_HOME: ${FLEXUNIT_HOME}"/>
<echo message="playerglobal.version: ${playerglobal.version}"/>
diff --git a/frameworks/projects/XML/src/main/royale/XML.as b/frameworks/projects/XML/src/main/royale/XML.as
index 1dfd5b9..b9e8694 100644
--- a/frameworks/projects/XML/src/main/royale/XML.as
+++ b/frameworks/projects/XML/src/main/royale/XML.as
@@ -140,6 +140,9 @@
case "&":
outArr[i] = "&";
break;
+ case '"':
+ outArr[i] = """;
+ break;
case "\u000A":
outArr[i] = "
";
break;
diff --git a/frameworks/projects/pom.xml b/frameworks/projects/pom.xml
index d562703..59ac1a1 100644
--- a/frameworks/projects/pom.xml
+++ b/frameworks/projects/pom.xml
@@ -61,6 +61,7 @@
<module>TLF</module>
<module>RoyaleSite</module>
<module>MXRoyale</module>
+ <module>Icons</module>
<module>SparkRoyale</module>
<module>Jewel</module>
</modules>
diff --git a/frameworks/themes/Basic/src/basic.css b/frameworks/themes/Basic/src/basic.css
index 44cc745..919e626 100644
--- a/frameworks/themes/Basic/src/basic.css
+++ b/frameworks/themes/Basic/src/basic.css
@@ -42,6 +42,19 @@
padding: 4px;
}
+CloseButton
+{
+ width: 12px;
+ height: 12px;
+}
+
+TitleBar CloseButton
+{
+ width: 16px;
+ height: 16px;
+ margin: 0px;
+}
+
CheckBox
{
font-size: 12px;
@@ -71,6 +84,16 @@
border-width: 1px;
}
+PanelContent
+{
+ background-color: #FFFFFF;
+}
+
+PanelTitleBar
+{
+ border-bottom: 1px solid #333333;
+}
+
RadioButton
{
font-size: 12px;
@@ -93,4 +116,37 @@
{
font-size: 12px;
font-family: sans-serif;
-}
\ No newline at end of file
+}
+ToggleTextButton
+{
+ background-color: #f8f8f8;
+ border: 1px solid #808080;
+ padding: 4px;
+}
+
+ToggleTextButton:hover
+{
+ background-color: #e8e8e8;
+ border: 1px solid #808080;
+ padding: 4px;
+}
+
+ToggleTextButton.selected
+{
+ background-color: #d8d8d8;
+ border: 1px solid #808080;
+ padding: 4px;
+}
+
+ToggleTextButton.selected:hover
+{
+ background-color: #e8e8e8;
+ border: 1px solid #808080;
+ padding: 4px;
+}
+
+TitleBarTitle {
+ font-weight: bold;
+ padding: 0;
+ margin: 0px 5px;
+}
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Amethyst-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Amethyst-Theme/pom.xml
index da121f4..7304ee1 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Amethyst-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Amethyst-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Amethyst-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Amethyst-Theme/src/main/resources/defaults.css
index e86e26f..28fe933 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Amethyst-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Amethyst-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#d43bd1, #b427b1);
border: 1px solid #8a1e88;
box-shadow: inset 0 1px 0 #e279e0;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(75, 17, 74, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#C92CC6, #9f239d);
@@ -82,101 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #8a1e88;
box-shadow: inset 0px 0px 0px 1px rgba(253, 247, 253, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#d43bd1, #b427b1);
- border: 1px solid #8a1e88;
- box-shadow: inset 0 1px 0 #e279e0;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(75, 17, 74, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#C92CC6, #9f239d);
- border: 1px solid #751a74;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#9f239d, #751a74);
- border: 1px solid #4b114a;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #8a1e88;
- box-shadow: inset 0px 0px 0px 1px rgba(253, 247, 253, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Amethyst-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Amethyst-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Amethyst-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Amethyst-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Blue-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Blue-Theme/pom.xml
index 7bd0718..fef5427 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Blue-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Blue-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Blue-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Blue-Theme/src/main/resources/defaults.css
index bbaa039..291c613 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Blue-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Blue-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#54b7f3, #24a3ef);
border: 1px solid #0f88d1;
box-shadow: inset 0 1px 0 #9bd5f8;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#3CADF1, #1198e9);
@@ -82,101 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #0f88d1;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#54b7f3, #24a3ef);
- border: 1px solid #0f88d1;
- box-shadow: inset 0 1px 0 #9bd5f8;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#3CADF1, #1198e9);
- border: 1px solid #0d79ba;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#1198e9, #0d79ba);
- border: 1px solid #0a5a8a;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #0f88d1;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Blue-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Blue-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Blue-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Blue-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Emerald-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Emerald-Theme/pom.xml
index 467614d..d35cac4 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Emerald-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Emerald-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Emerald-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Emerald-Theme/src/main/resources/defaults.css
index 5ff0ccb..9f0273f 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Emerald-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Emerald-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#98cc50, #7eb435);
border: 1px solid #638c29;
box-shadow: inset 0 1px 0 #bbdd8b;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#8CC63C, #71a02f);
@@ -82,101 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #638c29;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#98cc50, #7eb435);
- border: 1px solid #638c29;
- box-shadow: inset 0 1px 0 #bbdd8b;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#8CC63C, #71a02f);
- border: 1px solid #557923;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#71a02f, #557923);
- border: 1px solid #395118;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #638c29;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Emerald-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Emerald-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Emerald-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Emerald-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Green-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Green-Theme/pom.xml
index e2acb53..cf1502d 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Green-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Green-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Green-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Green-Theme/src/main/resources/defaults.css
index 82a6374..b75a49d 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Green-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Green-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#45c354, #34a241);
border: 1px solid #277b32;
box-shadow: inset 0 1px 0 #7fd68a;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(21, 65, 26, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#3AB549, #2e8e39);
@@ -82,101 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #277b32;
box-shadow: inset 0px 0px 0px 1px rgba(243, 251, 244, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#45c354, #34a241);
- border: 1px solid #277b32;
- box-shadow: inset 0 1px 0 #7fd68a;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(21, 65, 26, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#3AB549, #2e8e39);
- border: 1px solid #21682a;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#2e8e39, #21682a);
- border: 1px solid #15411a;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #277b32;
- box-shadow: inset 0px 0px 0px 1px rgba(243, 251, 244, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Green-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Green-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Green-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Green-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Orange-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Orange-Theme/pom.xml
index 0944c1c..18d7c4d 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Orange-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Orange-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Orange-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Orange-Theme/src/main/resources/defaults.css
index a187ab9..f560138 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Orange-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Orange-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f8a036, #f28809);
border: 1px solid #c16c07;
box-shadow: inset 0 1px 0 #fac380;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(119, 67, 4, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#F7941D, #d97a08);
@@ -82,101 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #c16c07;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f8a036, #f28809);
- border: 1px solid #c16c07;
- box-shadow: inset 0 1px 0 #fac380;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(119, 67, 4, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#F7941D, #d97a08);
- border: 1px solid #a85e06;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#d97a08, #a85e06);
- border: 1px solid #774304;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #c16c07;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Orange-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Orange-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Orange-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Orange-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Red-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Red-Theme/pom.xml
index a6da19f..c81e06d 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Red-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Red-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Red-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Red-Theme/src/main/resources/defaults.css
index 7b00a89..faaba44 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Red-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Red-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#ee343b, #dc121a);
border: 1px solid #ad0e15;
box-shadow: inset 0 1px 0 #f47a7f;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(102, 9, 12, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#EC1C24, #c51017);
@@ -82,101 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #ad0e15;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#ee343b, #dc121a);
- border: 1px solid #ad0e15;
- box-shadow: inset 0 1px 0 #f47a7f;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(102, 9, 12, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#EC1C24, #c51017);
- border: 1px solid #950d12;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#c51017, #950d12);
- border: 1px solid #66090c;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #ad0e15;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Red-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Red-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Red-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Red-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sapphire-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sapphire-Theme/pom.xml
index 6503db7..d60bc91 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sapphire-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sapphire-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sapphire-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sapphire-Theme/src/main/resources/defaults.css
index e8da288..2dd017d 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sapphire-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sapphire-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#3481d0, #2767a9);
border: 1px solid #1e4e80;
box-shadow: inset 0 1px 0 #72a7de;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(15, 40, 66, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#2C74BE, #225b95);
@@ -82,101 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #1e4e80;
box-shadow: inset 0px 0px 0px 1px rgba(238, 244, 251, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#3481d0, #2767a9);
- border: 1px solid #1e4e80;
- box-shadow: inset 0 1px 0 #72a7de;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(15, 40, 66, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#2C74BE, #225b95);
- border: 1px solid #19416b;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#225b95, #19416b);
- border: 1px solid #0f2842;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #1e4e80;
- box-shadow: inset 0px 0px 0px 1px rgba(238, 244, 251, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sapphire-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sapphire-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sapphire-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sapphire-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sunflower-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sunflower-Theme/pom.xml
index 2d23d7c..8427878 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sunflower-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sunflower-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sunflower-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sunflower-Theme/src/main/resources/defaults.css
index 205e680..4b27934 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sunflower-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sunflower-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f9bb58, #f7a726);
border: 1px solid #e28f08;
box-shadow: inset 0 1px 0 #fcd9a1;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(152, 96, 6, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#F8B13F, #f69d0e);
@@ -82,101 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #e28f08;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f9bb58, #f7a726);
- border: 1px solid #e28f08;
- box-shadow: inset 0 1px 0 #fcd9a1;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(152, 96, 6, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#F8B13F, #f69d0e);
- border: 1px solid #ca7f07;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#f69d0e, #ca7f07);
- border: 1px solid #986006;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #e28f08;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sunflower-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sunflower-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sunflower-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Sunflower-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Topaz-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Topaz-Theme/pom.xml
index caae602..c636a07 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Topaz-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Topaz-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Topaz-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Topaz-Theme/src/main/resources/defaults.css
index c4e25df..fc219a8 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Topaz-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Topaz-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f16c42, #ed4812);
border: 1px solid #be390e;
box-shadow: inset 0 1px 0 #f6a389;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#EF5A2A, #d64010);
@@ -82,101 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #be390e;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f16c42, #ed4812);
- border: 1px solid #be390e;
- box-shadow: inset 0 1px 0 #f6a389;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#EF5A2A, #d64010);
- border: 1px solid #a6320d;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#d64010, #a6320d);
- border: 1px solid #772409;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #be390e;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Topaz-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Topaz-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Topaz-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Topaz-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Turquoise-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Turquoise-Theme/pom.xml
index 0db2ef1..a2c9a87 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Turquoise-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Turquoise-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Turquoise-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Turquoise-Theme/src/main/resources/defaults.css
index 4c52b88..f6807cc 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Turquoise-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Turquoise-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#2ebcb2, #24948c);
border: 1px solid #1a6b65;
box-shadow: inset 0 1px 0 #5fd8cf;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(11, 45, 43, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#29A89F, #1f7f78);
@@ -82,101 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #1a6b65;
box-shadow: inset 0px 0px 0px 1px rgba(218, 246, 244, 0.5), inset 0 1px 0 rgba(239, 251, 250, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#2ebcb2, #24948c);
- border: 1px solid #1a6b65;
- box-shadow: inset 0 1px 0 #5fd8cf;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(11, 45, 43, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#29A89F, #1f7f78);
- border: 1px solid #155651;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#1f7f78, #155651);
- border: 1px solid #0b2d2b;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #1a6b65;
- box-shadow: inset 0px 0px 0px 1px rgba(218, 246, 244, 0.5), inset 0 1px 0 rgba(239, 251, 250, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Turquoise-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Turquoise-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Turquoise-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Turquoise-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Violet-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Violet-Theme/pom.xml
index 07c50c8..5dd332b 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Violet-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Violet-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Violet-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Violet-Theme/src/main/resources/defaults.css
index 4bba04e..7b8a29b 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Violet-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Violet-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#7432a4, #58267c);
border: 1px solid #3c1a55;
box-shadow: inset 0 1px 0 #9a56cc;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(19, 8, 27, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#662C90, #4a2069);
@@ -82,101 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #3c1a55;
box-shadow: inset 0px 0px 0px 1px rgba(224, 204, 239, 0.5), inset 0 1px 0 rgba(236, 223, 245, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#7432a4, #58267c);
- border: 1px solid #3c1a55;
- box-shadow: inset 0 1px 0 #9a56cc;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(19, 8, 27, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#662C90, #4a2069);
- border: 1px solid #2f1442;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#4a2069, #2f1442);
- border: 1px solid #13081b;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #3c1a55;
- box-shadow: inset 0px 0px 0px 1px rgba(224, 204, 239, 0.5), inset 0 1px 0 rgba(236, 223, 245, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Violet-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Violet-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Violet-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Violet-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Yellow-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Yellow-Theme/pom.xml
index 770a580..5a9110e 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Yellow-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Yellow-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Yellow-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Yellow-Theme/src/main/resources/defaults.css
index 8c158c0..a5a58ea 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Yellow-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Yellow-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f4e813, #cac00a);
border: 1px solid #999207;
box-shadow: inset 0 1px 0 #f7ef5c;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(80, 76, 4, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#E2D70B, #b1a909);
@@ -82,101 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #999207;
box-shadow: inset 0px 0px 0px 1px rgba(254, 253, 238, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f4e813, #cac00a);
- border: 1px solid #999207;
- box-shadow: inset 0 1px 0 #f7ef5c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(80, 76, 4, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#E2D70B, #b1a909);
- border: 1px solid #817a06;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#b1a909, #817a06);
- border: 1px solid #504c04;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #999207;
- box-shadow: inset 0px 0px 0px 1px rgba(254, 253, 238, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Yellow-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Yellow-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Yellow-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Emphasized-Yellow-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/pom.xml
index 9012e6c..76f234d 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
index 9a79882..6e33530 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: black;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #FFFFFF;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#666666, #4c4c4c);
@@ -109,44 +111,22 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#666666, #4c4c4c);
border: 1px solid #333333;
box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#595959, #404040);
@@ -158,28 +138,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #333333;
box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#d43bd1, #b427b1);
border: 1px solid #8a1e88;
box-shadow: inset 0 1px 0 #e279e0;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(75, 17, 74, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#C92CC6, #9f239d);
@@ -191,91 +178,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #8a1e88;
box-shadow: inset 0px 0px 0px 1px rgba(253, 247, 253, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #1a1a1a;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23C92CC6' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23C92CC6' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23C92CC6' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #e68ee5;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#eba3ea, #e279e0);
border: 1px solid #8a1e88;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23C92CC6' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: #8c8c8c;
+ border: 1px solid #595959;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #595959;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #737373;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #666666;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23C92CC6' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23C92CC6' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: #8c8c8c;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23FFFFFF' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #595959;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: #8c8c8c;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: #8c8c8c;
+ border-left: 0;
+ border-right: 1px solid #595959;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#d43bd1, #b427b1);
+ border-bottom: 1px solid #751a74;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(#7f7f7f, #737373);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23C92CC6' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #8a1e88;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +410,24 @@
background: #b427b1;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #737373;
+}
+.jewel.navigationlink:active {
+ background: #595959;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +437,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #333333;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #333333;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23C92CC6' cx='11' cy='11' r='6'></circle></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23C92CC6' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23C92CC6' cx='11' cy='11' r='6'></circle></g></g></svg>"), #e68ee5;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#eba3ea, #e279e0);
border: 1px solid #8a1e88;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23191919' cx='11' cy='11' r='6'></circle></g></g></svg>"), #404040;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23191919' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #C92CC6;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#d232cf, #bc29ba);
+ border: 1px solid #8a1e88;
+ box-shadow: inset 0 1px 0 #e279e0;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(#7f7f7f, #666666);
+ border: 1px solid #333333;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#d232cf, #bc29ba);
+ border: 1px solid #8a1e88;
+ box-shadow: inset 0 1px 0 #e279e0, 0 0 0 1px rgba(140, 140, 140, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#d232cf, #bc29ba);
@@ -413,18 +554,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #333333;
+ border: 1px solid black;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #404040;
border: 1px solid black;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +587,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#d232cf, #bc29ba);
border: 1px solid #8a1e88;
box-shadow: inset 0 1px 0 #e279e0;
@@ -464,142 +598,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#7f7f7f, #666666);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#d43bd1, #b427b1);
- border: 1px solid #8a1e88;
- box-shadow: inset 0 1px 0 #e279e0;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(75, 17, 74, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#C92CC6, #9f239d);
- border: 1px solid #751a74;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#9f239d, #751a74);
- border: 1px solid #4b114a;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #8a1e88;
- box-shadow: inset 0px 0px 0px 1px rgba(253, 247, 253, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #FFFFFF;
+.jewel.simpletable {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.table {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #C92CC6;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #b427b1;
+}
+
+a:link {
+ color: #C92CC6;
+}
+
+a:active {
+ color: #8a1e88;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #8a1e88;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: white;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: #737373;
}
+.jewel.textinput input[disabled] + i {
+ color: #737373;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #8a1e88;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: white;
+}
+.jewel.textarea textarea[disabled] {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+ color: #737373;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: #737373;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#d43bd1, #b427b1);
+ border-top: 1px solid #dd64db;
+ border-bottom: 1px solid #751a74;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(75, 17, 74, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(75, 17, 74, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/pom.xml
index 4006988..200daee 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
index 79ecc3c..80bee78 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: black;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #FFFFFF;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#666666, #4c4c4c);
@@ -109,44 +111,22 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#666666, #4c4c4c);
border: 1px solid #333333;
box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#595959, #404040);
@@ -158,28 +138,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #333333;
box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#54b7f3, #24a3ef);
border: 1px solid #0f88d1;
box-shadow: inset 0 1px 0 #9bd5f8;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#3CADF1, #1198e9);
@@ -191,91 +178,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #0f88d1;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #1a1a1a;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%233CADF1' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%233CADF1' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%233CADF1' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #b3dffa;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#cbe9fb, #9bd5f8);
border: 1px solid #0f88d1;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233CADF1' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: #8c8c8c;
+ border: 1px solid #595959;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #595959;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #737373;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #666666;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%233CADF1' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%233CADF1' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: #8c8c8c;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23FFFFFF' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #595959;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: #8c8c8c;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: #8c8c8c;
+ border-left: 0;
+ border-right: 1px solid #595959;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#54b7f3, #24a3ef);
+ border-bottom: 1px solid #0d79ba;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(#7f7f7f, #737373);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233CADF1' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #0f88d1;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +410,24 @@
background: #24a3ef;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #737373;
+}
+.jewel.navigationlink:active {
+ background: #595959;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +437,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #333333;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #333333;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%233CADF1' cx='11' cy='11' r='6'></circle></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%233CADF1' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%233CADF1' cx='11' cy='11' r='6'></circle></g></g></svg>"), #b3dffa;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#cbe9fb, #9bd5f8);
border: 1px solid #0f88d1;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23191919' cx='11' cy='11' r='6'></circle></g></g></svg>"), #404040;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23191919' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #3CADF1;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#4ab3f2, #2ea7f0);
+ border: 1px solid #0f88d1;
+ box-shadow: inset 0 1px 0 #9bd5f8;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(#7f7f7f, #666666);
+ border: 1px solid #333333;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#4ab3f2, #2ea7f0);
+ border: 1px solid #0f88d1;
+ box-shadow: inset 0 1px 0 #9bd5f8, 0 0 0 1px rgba(140, 140, 140, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#4ab3f2, #2ea7f0);
@@ -413,18 +554,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #333333;
+ border: 1px solid black;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #404040;
border: 1px solid black;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +587,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#4ab3f2, #2ea7f0);
border: 1px solid #0f88d1;
box-shadow: inset 0 1px 0 #9bd5f8;
@@ -464,142 +598,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#7f7f7f, #666666);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#54b7f3, #24a3ef);
- border: 1px solid #0f88d1;
- box-shadow: inset 0 1px 0 #9bd5f8;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#3CADF1, #1198e9);
- border: 1px solid #0d79ba;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#1198e9, #0d79ba);
- border: 1px solid #0a5a8a;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #0f88d1;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #FFFFFF;
+.jewel.simpletable {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.table {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #3CADF1;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #24a3ef;
+}
+
+a:link {
+ color: #3CADF1;
+}
+
+a:active {
+ color: #0f88d1;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #0f88d1;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: white;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: #737373;
}
+.jewel.textinput input[disabled] + i {
+ color: #737373;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #0f88d1;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: white;
+}
+.jewel.textarea textarea[disabled] {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+ color: #737373;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: #737373;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#54b7f3, #24a3ef);
+ border-top: 1px solid #83cbf6;
+ border-bottom: 1px solid #0d79ba;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/pom.xml
index 45da60b..ec2e445 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
index b194bfc..cfc4d77 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: black;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #FFFFFF;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#666666, #4c4c4c);
@@ -109,44 +111,22 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#666666, #4c4c4c);
border: 1px solid #333333;
box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#595959, #404040);
@@ -158,28 +138,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #333333;
box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#98cc50, #7eb435);
border: 1px solid #638c29;
box-shadow: inset 0 1px 0 #bbdd8b;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#8CC63C, #71a02f);
@@ -191,91 +178,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #638c29;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #1a1a1a;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%238CC63C' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%238CC63C' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%238CC63C' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #c6e39f;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#d2e9b2, #bbdd8b);
border: 1px solid #638c29;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%238CC63C' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: #8c8c8c;
+ border: 1px solid #595959;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #595959;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #737373;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #666666;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%238CC63C' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%238CC63C' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: #8c8c8c;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23FFFFFF' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #595959;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: #8c8c8c;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: #8c8c8c;
+ border-left: 0;
+ border-right: 1px solid #595959;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#98cc50, #7eb435);
+ border-bottom: 1px solid #557923;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(#7f7f7f, #737373);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%238CC63C' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #638c29;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +410,24 @@
background: #7eb435;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #737373;
+}
+.jewel.navigationlink:active {
+ background: #595959;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +437,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #333333;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #333333;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%238CC63C' cx='11' cy='11' r='6'></circle></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%238CC63C' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%238CC63C' cx='11' cy='11' r='6'></circle></g></g></svg>"), #c6e39f;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#d2e9b2, #bbdd8b);
border: 1px solid #638c29;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23191919' cx='11' cy='11' r='6'></circle></g></g></svg>"), #404040;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23191919' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #8CC63C;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#93c948, #84bc37);
+ border: 1px solid #638c29;
+ box-shadow: inset 0 1px 0 #bbdd8b;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(#7f7f7f, #666666);
+ border: 1px solid #333333;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#93c948, #84bc37);
+ border: 1px solid #638c29;
+ box-shadow: inset 0 1px 0 #bbdd8b, 0 0 0 1px rgba(140, 140, 140, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#93c948, #84bc37);
@@ -413,18 +554,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #333333;
+ border: 1px solid black;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #404040;
border: 1px solid black;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +587,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#93c948, #84bc37);
border: 1px solid #638c29;
box-shadow: inset 0 1px 0 #bbdd8b;
@@ -464,142 +598,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#7f7f7f, #666666);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#98cc50, #7eb435);
- border: 1px solid #638c29;
- box-shadow: inset 0 1px 0 #bbdd8b;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#8CC63C, #71a02f);
- border: 1px solid #557923;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#71a02f, #557923);
- border: 1px solid #395118;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #638c29;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #FFFFFF;
+.jewel.simpletable {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.table {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #8CC63C;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #7eb435;
+}
+
+a:link {
+ color: #8CC63C;
+}
+
+a:active {
+ color: #638c29;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #638c29;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: white;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: #737373;
}
+.jewel.textinput input[disabled] + i {
+ color: #737373;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #638c29;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: white;
+}
+.jewel.textarea textarea[disabled] {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+ color: #737373;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: #737373;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#98cc50, #7eb435);
+ border-top: 1px solid #afd777;
+ border-bottom: 1px solid #557923;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/pom.xml
index b20db61..6f85f06 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
index 8c1b05d..762c598 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: black;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #FFFFFF;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#666666, #4c4c4c);
@@ -109,44 +111,22 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#666666, #4c4c4c);
border: 1px solid #333333;
box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#595959, #404040);
@@ -158,28 +138,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #333333;
box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#45c354, #34a241);
border: 1px solid #277b32;
box-shadow: inset 0 1px 0 #7fd68a;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(21, 65, 26, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#3AB549, #2e8e39);
@@ -191,91 +178,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #277b32;
box-shadow: inset 0px 0px 0px 1px rgba(243, 251, 244, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #1a1a1a;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%233AB549' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%233AB549' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%233AB549' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #92dc9b;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#a6e2ad, #7fd68a);
border: 1px solid #277b32;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233AB549' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: #8c8c8c;
+ border: 1px solid #595959;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #595959;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #737373;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #666666;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%233AB549' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%233AB549' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: #8c8c8c;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23FFFFFF' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #595959;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: #8c8c8c;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: #8c8c8c;
+ border-left: 0;
+ border-right: 1px solid #595959;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#45c354, #34a241);
+ border-bottom: 1px solid #21682a;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(#7f7f7f, #737373);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233AB549' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #277b32;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +410,24 @@
background: #34a241;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #737373;
+}
+.jewel.navigationlink:active {
+ background: #595959;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +437,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #333333;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #333333;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%233AB549' cx='11' cy='11' r='6'></circle></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%233AB549' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%233AB549' cx='11' cy='11' r='6'></circle></g></g></svg>"), #92dc9b;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#a6e2ad, #7fd68a);
border: 1px solid #277b32;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23191919' cx='11' cy='11' r='6'></circle></g></g></svg>"), #404040;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23191919' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #3AB549;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#3ec14e, #36a944);
+ border: 1px solid #277b32;
+ box-shadow: inset 0 1px 0 #7fd68a;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(#7f7f7f, #666666);
+ border: 1px solid #333333;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#3ec14e, #36a944);
+ border: 1px solid #277b32;
+ box-shadow: inset 0 1px 0 #7fd68a, 0 0 0 1px rgba(140, 140, 140, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#3ec14e, #36a944);
@@ -413,18 +554,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #333333;
+ border: 1px solid black;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #404040;
border: 1px solid black;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +587,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#3ec14e, #36a944);
border: 1px solid #277b32;
box-shadow: inset 0 1px 0 #7fd68a;
@@ -464,142 +598,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#7f7f7f, #666666);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#45c354, #34a241);
- border: 1px solid #277b32;
- box-shadow: inset 0 1px 0 #7fd68a;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(21, 65, 26, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#3AB549, #2e8e39);
- border: 1px solid #21682a;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#2e8e39, #21682a);
- border: 1px solid #15411a;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #277b32;
- box-shadow: inset 0px 0px 0px 1px rgba(243, 251, 244, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #FFFFFF;
+.jewel.simpletable {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.table {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #3AB549;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #34a241;
+}
+
+a:link {
+ color: #3AB549;
+}
+
+a:active {
+ color: #277b32;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #277b32;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: white;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: #737373;
}
+.jewel.textinput input[disabled] + i {
+ color: #737373;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #277b32;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: white;
+}
+.jewel.textarea textarea[disabled] {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+ color: #737373;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: #737373;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#45c354, #34a241);
+ border-top: 1px solid #6cd078;
+ border-bottom: 1px solid #21682a;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(21, 65, 26, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(21, 65, 26, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/pom.xml
index c863da5..2272098 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
index c8af851..bbbe13e 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: black;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #FFFFFF;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#666666, #4c4c4c);
@@ -109,44 +111,22 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#666666, #4c4c4c);
border: 1px solid #333333;
box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#595959, #404040);
@@ -158,28 +138,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #333333;
box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f8a036, #f28809);
border: 1px solid #c16c07;
box-shadow: inset 0 1px 0 #fac380;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(119, 67, 4, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#F7941D, #d97a08);
@@ -191,91 +178,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #c16c07;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #1a1a1a;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23F7941D' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23F7941D' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23F7941D' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #fbce98;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#fcdab1, #fac380);
border: 1px solid #c16c07;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23F7941D' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: #8c8c8c;
+ border: 1px solid #595959;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #595959;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #737373;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #666666;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23F7941D' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23F7941D' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: #8c8c8c;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23FFFFFF' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #595959;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: #8c8c8c;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: #8c8c8c;
+ border-left: 0;
+ border-right: 1px solid #595959;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#f8a036, #f28809);
+ border-bottom: 1px solid #a85e06;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(#7f7f7f, #737373);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23F7941D' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #c16c07;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +410,24 @@
background: #f28809;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #737373;
+}
+.jewel.navigationlink:active {
+ background: #595959;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +437,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #333333;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #333333;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23F7941D' cx='11' cy='11' r='6'></circle></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23F7941D' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23F7941D' cx='11' cy='11' r='6'></circle></g></g></svg>"), #fbce98;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#fcdab1, #fac380);
border: 1px solid #c16c07;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23191919' cx='11' cy='11' r='6'></circle></g></g></svg>"), #404040;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23191919' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #F7941D;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#f89b2c, #f68d0e);
+ border: 1px solid #c16c07;
+ box-shadow: inset 0 1px 0 #fac380;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(#7f7f7f, #666666);
+ border: 1px solid #333333;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#f89b2c, #f68d0e);
+ border: 1px solid #c16c07;
+ box-shadow: inset 0 1px 0 #fac380, 0 0 0 1px rgba(140, 140, 140, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#f89b2c, #f68d0e);
@@ -413,18 +554,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #333333;
+ border: 1px solid black;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #404040;
border: 1px solid black;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +587,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#f89b2c, #f68d0e);
border: 1px solid #c16c07;
box-shadow: inset 0 1px 0 #fac380;
@@ -464,142 +598,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#7f7f7f, #666666);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f8a036, #f28809);
- border: 1px solid #c16c07;
- box-shadow: inset 0 1px 0 #fac380;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(119, 67, 4, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#F7941D, #d97a08);
- border: 1px solid #a85e06;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#d97a08, #a85e06);
- border: 1px solid #774304;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #c16c07;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #FFFFFF;
+.jewel.simpletable {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.table {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #F7941D;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #f28809;
+}
+
+a:link {
+ color: #F7941D;
+}
+
+a:active {
+ color: #c16c07;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #c16c07;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: white;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: #737373;
}
+.jewel.textinput input[disabled] + i {
+ color: #737373;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #c16c07;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: white;
+}
+.jewel.textarea textarea[disabled] {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+ color: #737373;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: #737373;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#f8a036, #f28809);
+ border-top: 1px solid #fab767;
+ border-bottom: 1px solid #a85e06;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(119, 67, 4, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(119, 67, 4, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/pom.xml
index 1a4e077..01aeab4 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
index ada4dde..0937e58 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: black;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #FFFFFF;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#666666, #4c4c4c);
@@ -109,44 +111,22 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#666666, #4c4c4c);
border: 1px solid #333333;
box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#595959, #404040);
@@ -158,28 +138,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #333333;
box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#ee343b, #dc121a);
border: 1px solid #ad0e15;
box-shadow: inset 0 1px 0 #f47a7f;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(102, 9, 12, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#EC1C24, #c51017);
@@ -191,91 +178,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #ad0e15;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #1a1a1a;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23EC1C24' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23EC1C24' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23EC1C24' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f69296;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#f8a9ac, #f47a7f);
border: 1px solid #ad0e15;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23EC1C24' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: #8c8c8c;
+ border: 1px solid #595959;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #595959;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #737373;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #666666;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23EC1C24' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23EC1C24' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: #8c8c8c;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23FFFFFF' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #595959;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: #8c8c8c;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: #8c8c8c;
+ border-left: 0;
+ border-right: 1px solid #595959;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#ee343b, #dc121a);
+ border-bottom: 1px solid #950d12;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(#7f7f7f, #737373);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23EC1C24' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #ad0e15;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +410,24 @@
background: #dc121a;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #737373;
+}
+.jewel.navigationlink:active {
+ background: #595959;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +437,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #333333;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #333333;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23EC1C24' cx='11' cy='11' r='6'></circle></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23EC1C24' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23EC1C24' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f69296;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#f8a9ac, #f47a7f);
border: 1px solid #ad0e15;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23191919' cx='11' cy='11' r='6'></circle></g></g></svg>"), #404040;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23191919' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #EC1C24;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#ed2a32, #e5131b);
+ border: 1px solid #ad0e15;
+ box-shadow: inset 0 1px 0 #f47a7f;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(#7f7f7f, #666666);
+ border: 1px solid #333333;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#ed2a32, #e5131b);
+ border: 1px solid #ad0e15;
+ box-shadow: inset 0 1px 0 #f47a7f, 0 0 0 1px rgba(140, 140, 140, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#ed2a32, #e5131b);
@@ -413,18 +554,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #333333;
+ border: 1px solid black;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #404040;
border: 1px solid black;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +587,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#ed2a32, #e5131b);
border: 1px solid #ad0e15;
box-shadow: inset 0 1px 0 #f47a7f;
@@ -464,142 +598,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#7f7f7f, #666666);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#ee343b, #dc121a);
- border: 1px solid #ad0e15;
- box-shadow: inset 0 1px 0 #f47a7f;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(102, 9, 12, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#EC1C24, #c51017);
- border: 1px solid #950d12;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#c51017, #950d12);
- border: 1px solid #66090c;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #ad0e15;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #FFFFFF;
+.jewel.simpletable {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.table {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #EC1C24;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #dc121a;
+}
+
+a:link {
+ color: #EC1C24;
+}
+
+a:active {
+ color: #ad0e15;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #ad0e15;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: white;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: #737373;
}
+.jewel.textinput input[disabled] + i {
+ color: #737373;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #ad0e15;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: white;
+}
+.jewel.textarea textarea[disabled] {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+ color: #737373;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: #737373;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#ee343b, #dc121a);
+ border-top: 1px solid #f26368;
+ border-bottom: 1px solid #950d12;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(102, 9, 12, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(102, 9, 12, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/pom.xml
index 7c1a99b..9570b90 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
index 3034fcf..8229bed 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: black;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #FFFFFF;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#666666, #4c4c4c);
@@ -109,44 +111,22 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#666666, #4c4c4c);
border: 1px solid #333333;
box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#595959, #404040);
@@ -158,28 +138,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #333333;
box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#3481d0, #2767a9);
border: 1px solid #1e4e80;
box-shadow: inset 0 1px 0 #72a7de;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(15, 40, 66, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#2C74BE, #225b95);
@@ -191,91 +178,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #1e4e80;
box-shadow: inset 0px 0px 0px 1px rgba(238, 244, 251, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #1a1a1a;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%232C74BE' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%232C74BE' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%232C74BE' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #86b4e3;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#9bc1e8, #72a7de);
border: 1px solid #1e4e80;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%232C74BE' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: #8c8c8c;
+ border: 1px solid #595959;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #595959;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #737373;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #666666;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%232C74BE' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%232C74BE' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: #8c8c8c;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23FFFFFF' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #595959;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: #8c8c8c;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: #8c8c8c;
+ border-left: 0;
+ border-right: 1px solid #595959;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#3481d0, #2767a9);
+ border-bottom: 1px solid #19416b;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(#7f7f7f, #737373);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%232C74BE' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #1e4e80;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +410,24 @@
background: #2767a9;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #737373;
+}
+.jewel.navigationlink:active {
+ background: #595959;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +437,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #333333;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #333333;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%232C74BE' cx='11' cy='11' r='6'></circle></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%232C74BE' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%232C74BE' cx='11' cy='11' r='6'></circle></g></g></svg>"), #86b4e3;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#9bc1e8, #72a7de);
border: 1px solid #1e4e80;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23191919' cx='11' cy='11' r='6'></circle></g></g></svg>"), #404040;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23191919' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #2C74BE;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#2f7cca, #296cb2);
+ border: 1px solid #1e4e80;
+ box-shadow: inset 0 1px 0 #72a7de;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(#7f7f7f, #666666);
+ border: 1px solid #333333;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#2f7cca, #296cb2);
+ border: 1px solid #1e4e80;
+ box-shadow: inset 0 1px 0 #72a7de, 0 0 0 1px rgba(140, 140, 140, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#2f7cca, #296cb2);
@@ -413,18 +554,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #333333;
+ border: 1px solid black;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #404040;
border: 1px solid black;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +587,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#2f7cca, #296cb2);
border: 1px solid #1e4e80;
box-shadow: inset 0 1px 0 #72a7de;
@@ -464,142 +598,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#7f7f7f, #666666);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#3481d0, #2767a9);
- border: 1px solid #1e4e80;
- box-shadow: inset 0 1px 0 #72a7de;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(15, 40, 66, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#2C74BE, #225b95);
- border: 1px solid #19416b;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#225b95, #19416b);
- border: 1px solid #0f2842;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #1e4e80;
- box-shadow: inset 0px 0px 0px 1px rgba(238, 244, 251, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #FFFFFF;
+.jewel.simpletable {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.table {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #2C74BE;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #2767a9;
+}
+
+a:link {
+ color: #2C74BE;
+}
+
+a:active {
+ color: #1e4e80;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #1e4e80;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: white;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: #737373;
}
+.jewel.textinput input[disabled] + i {
+ color: #737373;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #1e4e80;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: white;
+}
+.jewel.textarea textarea[disabled] {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+ color: #737373;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: #737373;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#3481d0, #2767a9);
+ border-top: 1px solid #5d9ad9;
+ border-bottom: 1px solid #19416b;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(15, 40, 66, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(15, 40, 66, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/pom.xml
index 5a0a39d..c58769e 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
index db720fc..c8268a7 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: black;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #FFFFFF;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#666666, #4c4c4c);
@@ -109,44 +111,22 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#666666, #4c4c4c);
border: 1px solid #333333;
box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#595959, #404040);
@@ -158,28 +138,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #333333;
box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f9bb58, #f7a726);
border: 1px solid #e28f08;
box-shadow: inset 0 1px 0 #fcd9a1;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(152, 96, 6, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#F8B13F, #f69d0e);
@@ -191,91 +178,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #e28f08;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #1a1a1a;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23F8B13F' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23F8B13F' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23F8B13F' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #fce3ba;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#fdedd3, #fcd9a1);
border: 1px solid #e28f08;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23F8B13F' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: #8c8c8c;
+ border: 1px solid #595959;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #595959;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #737373;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #666666;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23F8B13F' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23F8B13F' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: #8c8c8c;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23FFFFFF' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #595959;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: #8c8c8c;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: #8c8c8c;
+ border-left: 0;
+ border-right: 1px solid #595959;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#f9bb58, #f7a726);
+ border-bottom: 1px solid #ca7f07;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(#7f7f7f, #737373);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23F8B13F' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #e28f08;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +410,24 @@
background: #f7a726;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #737373;
+}
+.jewel.navigationlink:active {
+ background: #595959;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +437,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #333333;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #333333;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23F8B13F' cx='11' cy='11' r='6'></circle></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23F8B13F' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23F8B13F' cx='11' cy='11' r='6'></circle></g></g></svg>"), #fce3ba;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#fdedd3, #fcd9a1);
border: 1px solid #e28f08;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23191919' cx='11' cy='11' r='6'></circle></g></g></svg>"), #404040;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23191919' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #F8B13F;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#f9b74e, #f7ab30);
+ border: 1px solid #e28f08;
+ box-shadow: inset 0 1px 0 #fcd9a1;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(#7f7f7f, #666666);
+ border: 1px solid #333333;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#f9b74e, #f7ab30);
+ border: 1px solid #e28f08;
+ box-shadow: inset 0 1px 0 #fcd9a1, 0 0 0 1px rgba(140, 140, 140, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#f9b74e, #f7ab30);
@@ -413,18 +554,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #333333;
+ border: 1px solid black;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #404040;
border: 1px solid black;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +587,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#f9b74e, #f7ab30);
border: 1px solid #e28f08;
box-shadow: inset 0 1px 0 #fcd9a1;
@@ -464,142 +598,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#7f7f7f, #666666);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f9bb58, #f7a726);
- border: 1px solid #e28f08;
- box-shadow: inset 0 1px 0 #fcd9a1;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(152, 96, 6, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#F8B13F, #f69d0e);
- border: 1px solid #ca7f07;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#f69d0e, #ca7f07);
- border: 1px solid #986006;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #e28f08;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #FFFFFF;
+.jewel.simpletable {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.table {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #F8B13F;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #f7a726;
+}
+
+a:link {
+ color: #F8B13F;
+}
+
+a:active {
+ color: #e28f08;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #e28f08;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: white;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: #737373;
}
+.jewel.textinput input[disabled] + i {
+ color: #737373;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #e28f08;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: white;
+}
+.jewel.textarea textarea[disabled] {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+ color: #737373;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: #737373;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#f9bb58, #f7a726);
+ border-top: 1px solid #fbcf89;
+ border-bottom: 1px solid #ca7f07;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(152, 96, 6, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(152, 96, 6, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/pom.xml
index d7049a5..dac11f3 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
index 7c7a0bd..1730b9e 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: black;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #FFFFFF;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#666666, #4c4c4c);
@@ -109,44 +111,22 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#666666, #4c4c4c);
border: 1px solid #333333;
box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#595959, #404040);
@@ -158,28 +138,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #333333;
box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f16c42, #ed4812);
border: 1px solid #be390e;
box-shadow: inset 0 1px 0 #f6a389;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#EF5A2A, #d64010);
@@ -191,91 +178,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #be390e;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #1a1a1a;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23EF5A2A' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23EF5A2A' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23EF5A2A' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8b6a1;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#fac8b8, #f6a389);
border: 1px solid #be390e;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23EF5A2A' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: #8c8c8c;
+ border: 1px solid #595959;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #595959;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #737373;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #666666;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23EF5A2A' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23EF5A2A' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: #8c8c8c;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23FFFFFF' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #595959;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: #8c8c8c;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: #8c8c8c;
+ border-left: 0;
+ border-right: 1px solid #595959;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#f16c42, #ed4812);
+ border-bottom: 1px solid #a6320d;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(#7f7f7f, #737373);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23EF5A2A' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #be390e;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +410,24 @@
background: #ed4812;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #737373;
+}
+.jewel.navigationlink:active {
+ background: #595959;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +437,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #333333;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #333333;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23EF5A2A' cx='11' cy='11' r='6'></circle></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23EF5A2A' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23EF5A2A' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f8b6a1;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#fac8b8, #f6a389);
border: 1px solid #be390e;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23191919' cx='11' cy='11' r='6'></circle></g></g></svg>"), #404040;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23191919' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #EF5A2A;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#f06538, #ee4f1c);
+ border: 1px solid #be390e;
+ box-shadow: inset 0 1px 0 #f6a389;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(#7f7f7f, #666666);
+ border: 1px solid #333333;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#f06538, #ee4f1c);
+ border: 1px solid #be390e;
+ box-shadow: inset 0 1px 0 #f6a389, 0 0 0 1px rgba(140, 140, 140, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#f06538, #ee4f1c);
@@ -413,18 +554,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #333333;
+ border: 1px solid black;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #404040;
border: 1px solid black;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +587,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#f06538, #ee4f1c);
border: 1px solid #be390e;
box-shadow: inset 0 1px 0 #f6a389;
@@ -464,142 +598,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#7f7f7f, #666666);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f16c42, #ed4812);
- border: 1px solid #be390e;
- box-shadow: inset 0 1px 0 #f6a389;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#EF5A2A, #d64010);
- border: 1px solid #a6320d;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#d64010, #a6320d);
- border: 1px solid #772409;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #be390e;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #FFFFFF;
+.jewel.simpletable {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.table {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #EF5A2A;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #ed4812;
+}
+
+a:link {
+ color: #EF5A2A;
+}
+
+a:active {
+ color: #be390e;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #be390e;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: white;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: #737373;
}
+.jewel.textinput input[disabled] + i {
+ color: #737373;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #be390e;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: white;
+}
+.jewel.textarea textarea[disabled] {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+ color: #737373;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: #737373;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#f16c42, #ed4812);
+ border-top: 1px solid #f49171;
+ border-bottom: 1px solid #a6320d;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/pom.xml
index fc09561..522fe38 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
index e1a5d86..255cbdf 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: black;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #FFFFFF;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#666666, #4c4c4c);
@@ -109,44 +111,22 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#666666, #4c4c4c);
border: 1px solid #333333;
box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#595959, #404040);
@@ -158,28 +138,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #333333;
box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#2ebcb2, #24948c);
border: 1px solid #1a6b65;
box-shadow: inset 0 1px 0 #5fd8cf;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(11, 45, 43, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#29A89F, #1f7f78);
@@ -191,91 +178,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #1a6b65;
box-shadow: inset 0px 0px 0px 1px rgba(218, 246, 244, 0.5), inset 0 1px 0 rgba(239, 251, 250, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #1a1a1a;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%2329A89F' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%2329A89F' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%2329A89F' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #74ddd5;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#88e2dc, #5fd8cf);
border: 1px solid #1a6b65;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%2329A89F' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: #8c8c8c;
+ border: 1px solid #595959;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #595959;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #737373;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #666666;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%2329A89F' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%2329A89F' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: #8c8c8c;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23FFFFFF' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #595959;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: #8c8c8c;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: #8c8c8c;
+ border-left: 0;
+ border-right: 1px solid #595959;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#2ebcb2, #24948c);
+ border-bottom: 1px solid #155651;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(#7f7f7f, #737373);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%2329A89F' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #1a6b65;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +410,24 @@
background: #24948c;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #737373;
+}
+.jewel.navigationlink:active {
+ background: #595959;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +437,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #333333;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #333333;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%2329A89F' cx='11' cy='11' r='6'></circle></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%2329A89F' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%2329A89F' cx='11' cy='11' r='6'></circle></g></g></svg>"), #74ddd5;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#88e2dc, #5fd8cf);
border: 1px solid #1a6b65;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23191919' cx='11' cy='11' r='6'></circle></g></g></svg>"), #404040;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23191919' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #29A89F;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#2cb4ab, #269c93);
+ border: 1px solid #1a6b65;
+ box-shadow: inset 0 1px 0 #5fd8cf;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(#7f7f7f, #666666);
+ border: 1px solid #333333;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#2cb4ab, #269c93);
+ border: 1px solid #1a6b65;
+ box-shadow: inset 0 1px 0 #5fd8cf, 0 0 0 1px rgba(140, 140, 140, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#2cb4ab, #269c93);
@@ -413,18 +554,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #333333;
+ border: 1px solid black;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #404040;
border: 1px solid black;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +587,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#2cb4ab, #269c93);
border: 1px solid #1a6b65;
box-shadow: inset 0 1px 0 #5fd8cf;
@@ -464,142 +598,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#7f7f7f, #666666);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#2ebcb2, #24948c);
- border: 1px solid #1a6b65;
- box-shadow: inset 0 1px 0 #5fd8cf;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(11, 45, 43, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#29A89F, #1f7f78);
- border: 1px solid #155651;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#1f7f78, #155651);
- border: 1px solid #0b2d2b;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #1a6b65;
- box-shadow: inset 0px 0px 0px 1px rgba(218, 246, 244, 0.5), inset 0 1px 0 rgba(239, 251, 250, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #FFFFFF;
+.jewel.simpletable {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.table {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #29A89F;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #24948c;
+}
+
+a:link {
+ color: #29A89F;
+}
+
+a:active {
+ color: #1a6b65;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #1a6b65;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: white;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: #737373;
}
+.jewel.textinput input[disabled] + i {
+ color: #737373;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #1a6b65;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: white;
+}
+.jewel.textarea textarea[disabled] {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+ color: #737373;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: #737373;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#2ebcb2, #24948c);
+ border-top: 1px solid #4bd3c9;
+ border-bottom: 1px solid #155651;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(11, 45, 43, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(11, 45, 43, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/pom.xml
index 3bf695f..f530229 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
index 724e0e0..fbe5621 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: black;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #FFFFFF;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#666666, #4c4c4c);
@@ -109,44 +111,22 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#666666, #4c4c4c);
border: 1px solid #333333;
box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#595959, #404040);
@@ -158,28 +138,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #333333;
box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#7432a4, #58267c);
border: 1px solid #3c1a55;
box-shadow: inset 0 1px 0 #9a56cc;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(19, 8, 27, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#662C90, #4a2069);
@@ -191,91 +178,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #3c1a55;
box-shadow: inset 0px 0px 0px 1px rgba(224, 204, 239, 0.5), inset 0 1px 0 rgba(236, 223, 245, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #1a1a1a;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23662C90' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23662C90' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23662C90' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #a66ad1;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#b27ed7, #9a56cc);
border: 1px solid #3c1a55;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23662C90' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: #8c8c8c;
+ border: 1px solid #595959;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #595959;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #737373;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #666666;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23662C90' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23662C90' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: #8c8c8c;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23FFFFFF' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #595959;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: #8c8c8c;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: #8c8c8c;
+ border-left: 0;
+ border-right: 1px solid #595959;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#7432a4, #58267c);
+ border-bottom: 1px solid #2f1442;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(#7f7f7f, #737373);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23662C90' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #3c1a55;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +410,24 @@
background: #58267c;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #737373;
+}
+.jewel.navigationlink:active {
+ background: #595959;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +437,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #333333;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #333333;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23662C90' cx='11' cy='11' r='6'></circle></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23662C90' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23662C90' cx='11' cy='11' r='6'></circle></g></g></svg>"), #a66ad1;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#b27ed7, #9a56cc);
border: 1px solid #3c1a55;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23191919' cx='11' cy='11' r='6'></circle></g></g></svg>"), #404040;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23191919' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #662C90;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#6e309c, #5e2884);
+ border: 1px solid #3c1a55;
+ box-shadow: inset 0 1px 0 #9a56cc;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(#7f7f7f, #666666);
+ border: 1px solid #333333;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#6e309c, #5e2884);
+ border: 1px solid #3c1a55;
+ box-shadow: inset 0 1px 0 #9a56cc, 0 0 0 1px rgba(140, 140, 140, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#6e309c, #5e2884);
@@ -413,18 +554,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #333333;
+ border: 1px solid black;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #404040;
border: 1px solid black;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +587,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#6e309c, #5e2884);
border: 1px solid #3c1a55;
box-shadow: inset 0 1px 0 #9a56cc;
@@ -464,142 +598,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#7f7f7f, #666666);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#7432a4, #58267c);
- border: 1px solid #3c1a55;
- box-shadow: inset 0 1px 0 #9a56cc;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(19, 8, 27, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#662C90, #4a2069);
- border: 1px solid #2f1442;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#4a2069, #2f1442);
- border: 1px solid #13081b;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #3c1a55;
- box-shadow: inset 0px 0px 0px 1px rgba(224, 204, 239, 0.5), inset 0 1px 0 rgba(236, 223, 245, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #FFFFFF;
+.jewel.simpletable {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.table {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #662C90;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #58267c;
+}
+
+a:link {
+ color: #662C90;
+}
+
+a:active {
+ color: #3c1a55;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #3c1a55;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: white;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: #737373;
}
+.jewel.textinput input[disabled] + i {
+ color: #737373;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #3c1a55;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: white;
+}
+.jewel.textarea textarea[disabled] {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+ color: #737373;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: #737373;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#7432a4, #58267c);
+ border-top: 1px solid #8f43c6;
+ border-bottom: 1px solid #2f1442;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(19, 8, 27, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(19, 8, 27, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/pom.xml
index ad172b8..071189f 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
index 0fe1faa..7e96ed8 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: black;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #FFFFFF;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#666666, #4c4c4c);
@@ -109,44 +111,22 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#666666, #4c4c4c);
border: 1px solid #333333;
box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#595959, #404040);
@@ -158,28 +138,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #333333;
box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f4e813, #cac00a);
border: 1px solid #999207;
box-shadow: inset 0 1px 0 #f7ef5c;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(80, 76, 4, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#E2D70B, #b1a909);
@@ -191,91 +178,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #999207;
box-shadow: inset 0px 0px 0px 1px rgba(254, 253, 238, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
+ color: #737373;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #1a1a1a;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23E2D70B' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23E2D70B' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23E2D70B' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f174;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#f9f48d, #f7ef5c);
border: 1px solid #999207;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23191919' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #404040;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23191919' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23E2D70B' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: #8c8c8c;
+ border: 1px solid #595959;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #595959;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #737373;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #666666;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23E2D70B' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23E2D70B' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: #8c8c8c;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23FFFFFF' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #595959;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: #8c8c8c;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: #8c8c8c;
+ border-left: 0;
+ border-right: 1px solid #595959;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#f4e813, #cac00a);
+ border-bottom: 1px solid #817a06;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(#7f7f7f, #737373);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23E2D70B' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #999207;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +410,24 @@
background: #cac00a;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #737373;
+}
+.jewel.navigationlink:active {
+ background: #595959;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +437,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #333333;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #333333;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23E2D70B' cx='11' cy='11' r='6'></circle></g></g></svg>"), #787878;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23E2D70B' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23E2D70B' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f8f174;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#f9f48d, #f7ef5c);
border: 1px solid #999207;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #404040;
border: 1px solid #0d0d0d;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: #737373;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23191919' cx='11' cy='11' r='6'></circle></g></g></svg>"), #404040;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #0d0d0d;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23191919' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #E2D70B;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#f1e50c, #d3c90a);
+ border: 1px solid #999207;
+ box-shadow: inset 0 1px 0 #f7ef5c;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(#7f7f7f, #666666);
+ border: 1px solid #333333;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#f1e50c, #d3c90a);
+ border: 1px solid #999207;
+ box-shadow: inset 0 1px 0 #f7ef5c, 0 0 0 1px rgba(140, 140, 140, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#f1e50c, #d3c90a);
@@ -413,18 +554,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #333333;
+ border: 1px solid black;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #404040;
border: 1px solid black;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +587,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#f1e50c, #d3c90a);
border: 1px solid #999207;
box-shadow: inset 0 1px 0 #f7ef5c;
@@ -464,142 +598,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#7f7f7f, #666666);
border: 1px solid #333333;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#666666, #4c4c4c);
- border: 1px solid #333333;
- box-shadow: inset 0 1px 0 #8c8c8c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(13, 13, 13, 0.7);
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#595959, #404040);
- border: 1px solid #262626;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(#404040, #262626);
- border: 1px solid #0d0d0d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #333333;
- box-shadow: inset 0px 0px 0px 1px rgba(217, 217, 217, 0.5), inset 0 1px 0 rgba(229, 229, 229, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f4e813, #cac00a);
- border: 1px solid #999207;
- box-shadow: inset 0 1px 0 #f7ef5c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(80, 76, 4, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#E2D70B, #b1a909);
- border: 1px solid #817a06;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#b1a909, #817a06);
- border: 1px solid #504c04;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #999207;
- box-shadow: inset 0px 0px 0px 1px rgba(254, 253, 238, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
- color: #737373;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #FFFFFF;
+.jewel.simpletable {
background: linear-gradient(#7f7f7f, #737373);
border: 1px solid #333333;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.table {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #595959;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(#7f7f7f, #737373);
+ box-shadow: inset 0 1px 0 #8c8c8c;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #FFFFFF;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #595959;
+ border-left: 1px solid #595959;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(#7f7f7f, #8c8c8c);
+ box-shadow: inset 0 1px 0 #a6a6a6;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #E2D70B;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #cac00a;
+}
+
+a:link {
+ color: #E2D70B;
+}
+
+a:active {
+ color: #999207;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #999207;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: white;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: #737373;
}
+.jewel.textinput input[disabled] + i {
+ color: #737373;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #FFFFFF;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(#7f7f7f, #737373);
+ border: 1px solid #333333;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #999207;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: white;
+}
+.jewel.textarea textarea[disabled] {
+ background: #404040;
+ border: 1px solid #0d0d0d;
+ box-shadow: none;
+ color: #737373;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: #737373;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#f4e813, #cac00a);
+ border-top: 1px solid #f6ed44;
+ border-bottom: 1px solid #817a06;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(80, 76, 4, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(80, 76, 4, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Amethyst-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Amethyst-Theme/pom.xml
index bef6883..4ec105d 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Amethyst-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Amethyst-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Amethyst-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Amethyst-Theme/src/main/resources/defaults.css
index 2e4433e..cbaf738 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Amethyst-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Amethyst-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#d43bd1, #b427b1);
border: 1px solid #8a1e88;
box-shadow: inset 0 1px 0 #e279e0;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(75, 17, 74, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#C92CC6, #9f239d);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #8a1e88;
box-shadow: inset 0px 0px 0px 1px rgba(253, 247, 253, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#d43bd1, #b427b1);
- border: 1px solid #8a1e88;
- box-shadow: inset 0 1px 0 #e279e0;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(75, 17, 74, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#C92CC6, #9f239d);
- border: 1px solid #751a74;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#9f239d, #751a74);
- border: 1px solid #4b114a;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #8a1e88;
- box-shadow: inset 0px 0px 0px 1px rgba(253, 247, 253, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #9f239d;
+}
+
+a:hover {
+ color: #C92CC6;
+}
+
+a:active {
+ color: #d94fd6;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Amethyst-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Amethyst-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Amethyst-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Amethyst-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Blue-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Blue-Theme/pom.xml
index ba881e1..10c8db2 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Blue-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Blue-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Blue-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Blue-Theme/src/main/resources/defaults.css
index ec16635..7e4c3a2 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Blue-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Blue-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#54b7f3, #24a3ef);
border: 1px solid #0f88d1;
box-shadow: inset 0 1px 0 #9bd5f8;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#3CADF1, #1198e9);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #0f88d1;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#54b7f3, #24a3ef);
- border: 1px solid #0f88d1;
- box-shadow: inset 0 1px 0 #9bd5f8;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#3CADF1, #1198e9);
- border: 1px solid #0d79ba;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#1198e9, #0d79ba);
- border: 1px solid #0a5a8a;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #0f88d1;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #1198e9;
+}
+
+a:hover {
+ color: #3CADF1;
+}
+
+a:active {
+ color: #6cc1f4;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Blue-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Blue-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Blue-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Blue-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Emerald-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Emerald-Theme/pom.xml
index 354c061..2e0c7c5 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Emerald-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Emerald-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Emerald-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Emerald-Theme/src/main/resources/defaults.css
index 2aea92c..495efaf 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Emerald-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Emerald-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#98cc50, #7eb435);
border: 1px solid #638c29;
box-shadow: inset 0 1px 0 #bbdd8b;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#8CC63C, #71a02f);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #638c29;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#98cc50, #7eb435);
- border: 1px solid #638c29;
- box-shadow: inset 0 1px 0 #bbdd8b;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#8CC63C, #71a02f);
- border: 1px solid #557923;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#71a02f, #557923);
- border: 1px solid #395118;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #638c29;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #71a02f;
+}
+
+a:hover {
+ color: #8CC63C;
+}
+
+a:active {
+ color: #a3d263;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Emerald-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Emerald-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Emerald-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Emerald-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Green-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Green-Theme/pom.xml
index f903337..6c6bded 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Green-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Green-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Green-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Green-Theme/src/main/resources/defaults.css
index b11ca2a..39d06f2 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Green-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Green-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#45c354, #34a241);
border: 1px solid #277b32;
box-shadow: inset 0 1px 0 #7fd68a;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(21, 65, 26, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#3AB549, #2e8e39);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #277b32;
box-shadow: inset 0px 0px 0px 1px rgba(243, 251, 244, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#45c354, #34a241);
- border: 1px solid #277b32;
- box-shadow: inset 0 1px 0 #7fd68a;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(21, 65, 26, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#3AB549, #2e8e39);
- border: 1px solid #21682a;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#2e8e39, #21682a);
- border: 1px solid #15411a;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #277b32;
- box-shadow: inset 0px 0px 0px 1px rgba(243, 251, 244, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #2e8e39;
+}
+
+a:hover {
+ color: #3AB549;
+}
+
+a:active {
+ color: #58ca66;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Green-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Green-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Green-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Green-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Orange-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Orange-Theme/pom.xml
index 82a9fbd..9708175 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Orange-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Orange-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Orange-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Orange-Theme/src/main/resources/defaults.css
index 019a486..353f38a 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Orange-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Orange-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f8a036, #f28809);
border: 1px solid #c16c07;
box-shadow: inset 0 1px 0 #fac380;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(119, 67, 4, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#F7941D, #d97a08);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #c16c07;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f8a036, #f28809);
- border: 1px solid #c16c07;
- box-shadow: inset 0 1px 0 #fac380;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(119, 67, 4, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#F7941D, #d97a08);
- border: 1px solid #a85e06;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#d97a08, #a85e06);
- border: 1px solid #774304;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #c16c07;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #d97a08;
+}
+
+a:hover {
+ color: #F7941D;
+}
+
+a:active {
+ color: #f9ab4e;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Orange-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Orange-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Orange-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Orange-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Red-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Red-Theme/pom.xml
index 63dece3..fef25e9 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Red-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Red-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Red-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Red-Theme/src/main/resources/defaults.css
index 1e52d2f..ca4d7b5 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Red-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Red-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#ee343b, #dc121a);
border: 1px solid #ad0e15;
box-shadow: inset 0 1px 0 #f47a7f;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(102, 9, 12, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#EC1C24, #c51017);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #ad0e15;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#ee343b, #dc121a);
- border: 1px solid #ad0e15;
- box-shadow: inset 0 1px 0 #f47a7f;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(102, 9, 12, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#EC1C24, #c51017);
- border: 1px solid #950d12;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#c51017, #950d12);
- border: 1px solid #66090c;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #ad0e15;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #c51017;
+}
+
+a:hover {
+ color: #EC1C24;
+}
+
+a:active {
+ color: #f04b51;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Red-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Red-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Red-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Red-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sapphire-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sapphire-Theme/pom.xml
index a6bd4d9..d5ab64b 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sapphire-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sapphire-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sapphire-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sapphire-Theme/src/main/resources/defaults.css
index 7257cc3..f1ead73 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sapphire-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sapphire-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#3481d0, #2767a9);
border: 1px solid #1e4e80;
box-shadow: inset 0 1px 0 #72a7de;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(15, 40, 66, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#2C74BE, #225b95);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #1e4e80;
box-shadow: inset 0px 0px 0px 1px rgba(238, 244, 251, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#3481d0, #2767a9);
- border: 1px solid #1e4e80;
- box-shadow: inset 0 1px 0 #72a7de;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(15, 40, 66, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#2C74BE, #225b95);
- border: 1px solid #19416b;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#225b95, #19416b);
- border: 1px solid #0f2842;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #1e4e80;
- box-shadow: inset 0px 0px 0px 1px rgba(238, 244, 251, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #225b95;
+}
+
+a:hover {
+ color: #2C74BE;
+}
+
+a:active {
+ color: #488ed5;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sapphire-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sapphire-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sapphire-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sapphire-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sunflower-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sunflower-Theme/pom.xml
index a948a69..1d13fbf 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sunflower-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sunflower-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sunflower-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sunflower-Theme/src/main/resources/defaults.css
index a028bcf..8e0179c 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sunflower-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sunflower-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f9bb58, #f7a726);
border: 1px solid #e28f08;
box-shadow: inset 0 1px 0 #fcd9a1;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(152, 96, 6, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#F8B13F, #f69d0e);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #e28f08;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f9bb58, #f7a726);
- border: 1px solid #e28f08;
- box-shadow: inset 0 1px 0 #fcd9a1;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(152, 96, 6, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#F8B13F, #f69d0e);
- border: 1px solid #ca7f07;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#f69d0e, #ca7f07);
- border: 1px solid #986006;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #e28f08;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #f69d0e;
+}
+
+a:hover {
+ color: #F8B13F;
+}
+
+a:active {
+ color: #fac570;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sunflower-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sunflower-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sunflower-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Sunflower-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Topaz-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Topaz-Theme/pom.xml
index ee96b15..9bf0bb2 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Topaz-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Topaz-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Topaz-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Topaz-Theme/src/main/resources/defaults.css
index 4338868..510cb9c 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Topaz-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Topaz-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f16c42, #ed4812);
border: 1px solid #be390e;
box-shadow: inset 0 1px 0 #f6a389;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#EF5A2A, #d64010);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #be390e;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f16c42, #ed4812);
- border: 1px solid #be390e;
- box-shadow: inset 0 1px 0 #f6a389;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#EF5A2A, #d64010);
- border: 1px solid #a6320d;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#d64010, #a6320d);
- border: 1px solid #772409;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #be390e;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #d64010;
+}
+
+a:hover {
+ color: #EF5A2A;
+}
+
+a:active {
+ color: #f37f59;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Topaz-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Topaz-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Topaz-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Topaz-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Turquoise-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Turquoise-Theme/pom.xml
index d5007e2..c7fe43a 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Turquoise-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Turquoise-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Turquoise-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Turquoise-Theme/src/main/resources/defaults.css
index e0ca910..ad8b9ad 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Turquoise-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Turquoise-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#2ebcb2, #24948c);
border: 1px solid #1a6b65;
box-shadow: inset 0 1px 0 #5fd8cf;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(11, 45, 43, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#29A89F, #1f7f78);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #1a6b65;
box-shadow: inset 0px 0px 0px 1px rgba(218, 246, 244, 0.5), inset 0 1px 0 rgba(239, 251, 250, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#2ebcb2, #24948c);
- border: 1px solid #1a6b65;
- box-shadow: inset 0 1px 0 #5fd8cf;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(11, 45, 43, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#29A89F, #1f7f78);
- border: 1px solid #155651;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#1f7f78, #155651);
- border: 1px solid #0b2d2b;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #1a6b65;
- box-shadow: inset 0px 0px 0px 1px rgba(218, 246, 244, 0.5), inset 0 1px 0 rgba(239, 251, 250, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #1f7f78;
+}
+
+a:hover {
+ color: #29A89F;
+}
+
+a:active {
+ color: #36cec3;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Turquoise-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Turquoise-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Turquoise-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Turquoise-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Violet-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Violet-Theme/pom.xml
index d9b69f3..901511b 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Violet-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Violet-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Violet-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Violet-Theme/src/main/resources/defaults.css
index 23cd028..a003ec1 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Violet-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Violet-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#7432a4, #58267c);
border: 1px solid #3c1a55;
box-shadow: inset 0 1px 0 #9a56cc;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(19, 8, 27, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#662C90, #4a2069);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #3c1a55;
box-shadow: inset 0px 0px 0px 1px rgba(224, 204, 239, 0.5), inset 0 1px 0 rgba(236, 223, 245, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#7432a4, #58267c);
- border: 1px solid #3c1a55;
- box-shadow: inset 0 1px 0 #9a56cc;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(19, 8, 27, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#662C90, #4a2069);
- border: 1px solid #2f1442;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#4a2069, #2f1442);
- border: 1px solid #13081b;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #3c1a55;
- box-shadow: inset 0px 0px 0px 1px rgba(224, 204, 239, 0.5), inset 0 1px 0 rgba(236, 223, 245, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #4a2069;
+}
+
+a:hover {
+ color: #662C90;
+}
+
+a:active {
+ color: #8238b7;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Violet-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Violet-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Violet-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Violet-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Yellow-Theme/pom.xml b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Yellow-Theme/pom.xml
index 0f47ce3..9d41565 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Yellow-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Yellow-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Yellow-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Yellow-Theme/src/main/resources/defaults.css
index decd55b..d0ff840 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Yellow-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Yellow-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: black;
font-family: "Lato", sans-serif;
color: #FFFFFF;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #1a1a1a;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f4e813, #cac00a);
border: 1px solid #999207;
box-shadow: inset 0 1px 0 #f7ef5c;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(80, 76, 4, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#E2D70B, #b1a909);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #999207;
box-shadow: inset 0px 0px 0px 1px rgba(254, 253, 238, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #404040;
- border: 1px solid #0d0d0d;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f4e813, #cac00a);
- border: 1px solid #999207;
- box-shadow: inset 0 1px 0 #f7ef5c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(80, 76, 4, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#E2D70B, #b1a909);
- border: 1px solid #817a06;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#b1a909, #817a06);
- border: 1px solid #504c04;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #999207;
- box-shadow: inset 0px 0px 0px 1px rgba(254, 253, 238, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #404040;
border: 1px solid #0d0d0d;
box-shadow: none;
color: #737373;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #b1a909;
+}
+
+a:hover {
+ color: #E2D70B;
+}
+
+a:active {
+ color: #f5ea2b;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Yellow-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Yellow-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Yellow-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Dark-NoFlat-Secondary-Yellow-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Amethyst-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Amethyst-Theme/pom.xml
index 33754e2..d61a709 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Amethyst-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Amethyst-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Amethyst-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Amethyst-Theme/src/main/resources/defaults.css
index fa2aca1..826ae61 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Amethyst-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Amethyst-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#d43bd1, #b427b1);
border: 1px solid #8a1e88;
box-shadow: inset 0 1px 0 #e279e0;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(75, 17, 74, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#C92CC6, #9f239d);
@@ -82,100 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #8a1e88;
box-shadow: inset 0px 0px 0px 1px rgba(253, 247, 253, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#d43bd1, #b427b1);
- border: 1px solid #8a1e88;
- box-shadow: inset 0 1px 0 #e279e0;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(75, 17, 74, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#C92CC6, #9f239d);
- border: 1px solid #751a74;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#9f239d, #751a74);
- border: 1px solid #4b114a;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #8a1e88;
- box-shadow: inset 0px 0px 0px 1px rgba(253, 247, 253, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Amethyst-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Amethyst-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Amethyst-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Amethyst-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Blue-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Blue-Theme/pom.xml
index a89f1ce..7cfdff8 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Blue-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Blue-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Blue-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Blue-Theme/src/main/resources/defaults.css
index a0bc506..1cfa6e0 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Blue-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Blue-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#54b7f3, #24a3ef);
border: 1px solid #0f88d1;
box-shadow: inset 0 1px 0 #9bd5f8;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#3CADF1, #1198e9);
@@ -82,100 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #0f88d1;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#54b7f3, #24a3ef);
- border: 1px solid #0f88d1;
- box-shadow: inset 0 1px 0 #9bd5f8;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#3CADF1, #1198e9);
- border: 1px solid #0d79ba;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#1198e9, #0d79ba);
- border: 1px solid #0a5a8a;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #0f88d1;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Blue-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Blue-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Blue-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Blue-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Emerald-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Emerald-Theme/pom.xml
index 835fc02..7835bf1 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Emerald-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Emerald-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Emerald-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Emerald-Theme/src/main/resources/defaults.css
index 7e32a1c..88f92f6 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Emerald-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Emerald-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#98cc50, #7eb435);
border: 1px solid #638c29;
box-shadow: inset 0 1px 0 #bbdd8b;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#8CC63C, #71a02f);
@@ -82,100 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #638c29;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#98cc50, #7eb435);
- border: 1px solid #638c29;
- box-shadow: inset 0 1px 0 #bbdd8b;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#8CC63C, #71a02f);
- border: 1px solid #557923;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#71a02f, #557923);
- border: 1px solid #395118;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #638c29;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Emerald-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Emerald-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Emerald-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Emerald-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Green-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Green-Theme/pom.xml
index e193b5e..1e03555 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Green-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Green-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Green-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Green-Theme/src/main/resources/defaults.css
index 737c036..f63b6fa 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Green-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Green-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#45c354, #34a241);
border: 1px solid #277b32;
box-shadow: inset 0 1px 0 #7fd68a;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(21, 65, 26, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#3AB549, #2e8e39);
@@ -82,100 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #277b32;
box-shadow: inset 0px 0px 0px 1px rgba(243, 251, 244, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#45c354, #34a241);
- border: 1px solid #277b32;
- box-shadow: inset 0 1px 0 #7fd68a;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(21, 65, 26, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#3AB549, #2e8e39);
- border: 1px solid #21682a;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#2e8e39, #21682a);
- border: 1px solid #15411a;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #277b32;
- box-shadow: inset 0px 0px 0px 1px rgba(243, 251, 244, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Green-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Green-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Green-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Green-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Orange-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Orange-Theme/pom.xml
index 20d2a11..e8f9003 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Orange-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Orange-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Orange-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Orange-Theme/src/main/resources/defaults.css
index 8f301fa..562fb76 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Orange-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Orange-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f8a036, #f28809);
border: 1px solid #c16c07;
box-shadow: inset 0 1px 0 #fac380;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(119, 67, 4, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#F7941D, #d97a08);
@@ -82,100 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #c16c07;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f8a036, #f28809);
- border: 1px solid #c16c07;
- box-shadow: inset 0 1px 0 #fac380;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(119, 67, 4, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#F7941D, #d97a08);
- border: 1px solid #a85e06;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#d97a08, #a85e06);
- border: 1px solid #774304;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #c16c07;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Orange-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Orange-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Orange-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Orange-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Red-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Red-Theme/pom.xml
index b7f7c05..513a6d4 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Red-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Red-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Red-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Red-Theme/src/main/resources/defaults.css
index 27a8123..c438efe 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Red-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Red-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#ee343b, #dc121a);
border: 1px solid #ad0e15;
box-shadow: inset 0 1px 0 #f47a7f;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(102, 9, 12, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#EC1C24, #c51017);
@@ -82,100 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #ad0e15;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#ee343b, #dc121a);
- border: 1px solid #ad0e15;
- box-shadow: inset 0 1px 0 #f47a7f;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(102, 9, 12, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#EC1C24, #c51017);
- border: 1px solid #950d12;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#c51017, #950d12);
- border: 1px solid #66090c;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #ad0e15;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Red-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Red-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Red-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Red-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sapphire-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sapphire-Theme/pom.xml
index c4a0ceb..cc852af 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sapphire-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sapphire-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sapphire-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sapphire-Theme/src/main/resources/defaults.css
index 972de14..4ddd94e 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sapphire-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sapphire-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#3481d0, #2767a9);
border: 1px solid #1e4e80;
box-shadow: inset 0 1px 0 #72a7de;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(15, 40, 66, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#2C74BE, #225b95);
@@ -82,100 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #1e4e80;
box-shadow: inset 0px 0px 0px 1px rgba(238, 244, 251, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#3481d0, #2767a9);
- border: 1px solid #1e4e80;
- box-shadow: inset 0 1px 0 #72a7de;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(15, 40, 66, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#2C74BE, #225b95);
- border: 1px solid #19416b;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#225b95, #19416b);
- border: 1px solid #0f2842;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #1e4e80;
- box-shadow: inset 0px 0px 0px 1px rgba(238, 244, 251, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sapphire-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sapphire-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sapphire-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sapphire-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sunflower-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sunflower-Theme/pom.xml
index 835b323..9f7ae43 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sunflower-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sunflower-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sunflower-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sunflower-Theme/src/main/resources/defaults.css
index 6ba102b..9edeb1f 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sunflower-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sunflower-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f9bb58, #f7a726);
border: 1px solid #e28f08;
box-shadow: inset 0 1px 0 #fcd9a1;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(152, 96, 6, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#F8B13F, #f69d0e);
@@ -82,100 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #e28f08;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f9bb58, #f7a726);
- border: 1px solid #e28f08;
- box-shadow: inset 0 1px 0 #fcd9a1;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(152, 96, 6, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#F8B13F, #f69d0e);
- border: 1px solid #ca7f07;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#f69d0e, #ca7f07);
- border: 1px solid #986006;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #e28f08;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sunflower-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sunflower-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sunflower-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Sunflower-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Topaz-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Topaz-Theme/pom.xml
index db8ac1b..348dd90 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Topaz-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Topaz-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Topaz-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Topaz-Theme/src/main/resources/defaults.css
index 54390e5..fa07f3a 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Topaz-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Topaz-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f16c42, #ed4812);
border: 1px solid #be390e;
box-shadow: inset 0 1px 0 #f6a389;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#EF5A2A, #d64010);
@@ -82,100 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #be390e;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f16c42, #ed4812);
- border: 1px solid #be390e;
- box-shadow: inset 0 1px 0 #f6a389;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#EF5A2A, #d64010);
- border: 1px solid #a6320d;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#d64010, #a6320d);
- border: 1px solid #772409;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #be390e;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Topaz-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Topaz-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Topaz-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Topaz-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Turquoise-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Turquoise-Theme/pom.xml
index 322eba9..a6eaa99 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Turquoise-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Turquoise-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Turquoise-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Turquoise-Theme/src/main/resources/defaults.css
index d8689e9..c671ded 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Turquoise-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Turquoise-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#2ebcb2, #24948c);
border: 1px solid #1a6b65;
box-shadow: inset 0 1px 0 #5fd8cf;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(11, 45, 43, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#29A89F, #1f7f78);
@@ -82,100 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #1a6b65;
box-shadow: inset 0px 0px 0px 1px rgba(218, 246, 244, 0.5), inset 0 1px 0 rgba(239, 251, 250, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#2ebcb2, #24948c);
- border: 1px solid #1a6b65;
- box-shadow: inset 0 1px 0 #5fd8cf;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(11, 45, 43, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#29A89F, #1f7f78);
- border: 1px solid #155651;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#1f7f78, #155651);
- border: 1px solid #0b2d2b;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #1a6b65;
- box-shadow: inset 0px 0px 0px 1px rgba(218, 246, 244, 0.5), inset 0 1px 0 rgba(239, 251, 250, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Turquoise-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Turquoise-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Turquoise-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Turquoise-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Violet-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Violet-Theme/pom.xml
index e5a990a..ec91b24 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Violet-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Violet-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Violet-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Violet-Theme/src/main/resources/defaults.css
index 5e187e0..5d5741e 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Violet-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Violet-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#7432a4, #58267c);
border: 1px solid #3c1a55;
box-shadow: inset 0 1px 0 #9a56cc;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(19, 8, 27, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#662C90, #4a2069);
@@ -82,100 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #3c1a55;
box-shadow: inset 0px 0px 0px 1px rgba(224, 204, 239, 0.5), inset 0 1px 0 rgba(236, 223, 245, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#7432a4, #58267c);
- border: 1px solid #3c1a55;
- box-shadow: inset 0 1px 0 #9a56cc;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(19, 8, 27, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#662C90, #4a2069);
- border: 1px solid #2f1442;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#4a2069, #2f1442);
- border: 1px solid #13081b;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #3c1a55;
- box-shadow: inset 0px 0px 0px 1px rgba(224, 204, 239, 0.5), inset 0 1px 0 rgba(236, 223, 245, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Violet-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Violet-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Violet-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Violet-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Yellow-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Yellow-Theme/pom.xml
index a86cb78..7b12a3a 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Yellow-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Yellow-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Yellow-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Yellow-Theme/src/main/resources/defaults.css
index aa1ee55..931daec 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Yellow-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Yellow-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f4e813, #cac00a);
border: 1px solid #999207;
box-shadow: inset 0 1px 0 #f7ef5c;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(80, 76, 4, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#E2D70B, #b1a909);
@@ -82,100 +90,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #999207;
box-shadow: inset 0px 0px 0px 1px rgba(254, 253, 238, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f4e813, #cac00a);
- border: 1px solid #999207;
- box-shadow: inset 0 1px 0 #f7ef5c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(80, 76, 4, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#E2D70B, #b1a909);
- border: 1px solid #817a06;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#b1a909, #817a06);
- border: 1px solid #504c04;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #999207;
- box-shadow: inset 0px 0px 0px 1px rgba(254, 253, 238, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Yellow-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Yellow-Theme/src/main/sass/defaults.sass
index a75b210..82e205f 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Yellow-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Emphasized-Yellow-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-emphasized/alert"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/button"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/card"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-emphasized/list"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/slider"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-emphasized/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/text"
+@import "../../../../JewelTheme/src/main/sass/components-emphasized/textinput"
@import "../../../../JewelTheme/src/main/sass/components-emphasized/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/pom.xml
index 25a15eb..1b852be 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
index ac78e09..ed0f78e 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: white;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #808080;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#e6e6e6, #cccccc);
@@ -109,44 +111,21 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#e6e6e6, #cccccc);
border: 1px solid #b3b3b3;
box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #808080;
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#d9d9d9, silver);
@@ -158,28 +137,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #b3b3b3;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#d43bd1, #b427b1);
border: 1px solid #8a1e88;
box-shadow: inset 0 1px 0 #e279e0;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(75, 17, 74, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#C92CC6, #9f239d);
@@ -191,91 +177,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #8a1e88;
box-shadow: inset 0px 0px 0px 1px rgba(253, 247, 253, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #ebebeb;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23C92CC6' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23C92CC6' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23C92CC6' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #e68ee5;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#eba3ea, #e279e0);
border: 1px solid #8a1e88;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23C92CC6' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: white;
+ border: 1px solid #d9d9d9;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #f3f3f3;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #e6e6e6;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23C92CC6' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23C92CC6' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: white;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23808080' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #d9d9d9;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: white;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: white;
+ border-left: 0;
+ border-right: 1px solid #d9d9d9;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#d43bd1, #b427b1);
+ border-bottom: 1px solid #751a74;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(white, #f3f3f3);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23C92CC6' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #8a1e88;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +409,24 @@
background: #b427b1;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #f3f3f3;
+}
+.jewel.navigationlink:active {
+ background: #d9d9d9;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +436,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #b3b3b3;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23C92CC6' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23C92CC6' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23C92CC6' cx='11' cy='11' r='6'></circle></g></g></svg>"), #e68ee5;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#eba3ea, #e279e0);
border: 1px solid #8a1e88;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23cccccc' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f3f3f3;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23cccccc' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #C92CC6;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#d232cf, #bc29ba);
+ border: 1px solid #8a1e88;
+ box-shadow: inset 0 1px 0 #e279e0;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(white, #e6e6e6);
+ border: 1px solid #b3b3b3;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#d232cf, #bc29ba);
+ border: 1px solid #8a1e88;
+ box-shadow: inset 0 1px 0 #e279e0, 0 0 0 1px rgba(255, 255, 255, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#d232cf, #bc29ba);
@@ -413,18 +553,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #e6e6e6;
+ border: 1px solid silver;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #f3f3f3;
border: 1px solid silver;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +586,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#d232cf, #bc29ba);
border: 1px solid #8a1e88;
box-shadow: inset 0 1px 0 #e279e0;
@@ -464,141 +597,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(white, #e6e6e6);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#d43bd1, #b427b1);
- border: 1px solid #8a1e88;
- box-shadow: inset 0 1px 0 #e279e0;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(75, 17, 74, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#C92CC6, #9f239d);
- border: 1px solid #751a74;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#9f239d, #751a74);
- border: 1px solid #4b114a;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #8a1e88;
- box-shadow: inset 0px 0px 0px 1px rgba(253, 247, 253, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #808080;
+.jewel.simpletable {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.table {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #C92CC6;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #b427b1;
+}
+
+a:link {
+ color: #C92CC6;
+}
+
+a:active {
+ color: #8a1e88;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #8a1e88;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: #a6a6a6;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: silver;
}
+.jewel.textinput input[disabled] + i {
+ color: silver;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #8a1e88;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+.jewel.textarea textarea[disabled] {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+ color: silver;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: silver;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#d43bd1, #b427b1);
+ border-top: 1px solid #dd64db;
+ border-bottom: 1px solid #751a74;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(75, 17, 74, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(75, 17, 74, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/pom.xml
index 14239f1..deb6619 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
index 4c8d011..766dec9 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: white;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #808080;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#e6e6e6, #cccccc);
@@ -109,44 +111,21 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#e6e6e6, #cccccc);
border: 1px solid #b3b3b3;
box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #808080;
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#d9d9d9, silver);
@@ -158,28 +137,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #b3b3b3;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#54b7f3, #24a3ef);
border: 1px solid #0f88d1;
box-shadow: inset 0 1px 0 #9bd5f8;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#3CADF1, #1198e9);
@@ -191,91 +177,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #0f88d1;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #ebebeb;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%233CADF1' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%233CADF1' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%233CADF1' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #b3dffa;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#cbe9fb, #9bd5f8);
border: 1px solid #0f88d1;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233CADF1' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: white;
+ border: 1px solid #d9d9d9;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #f3f3f3;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #e6e6e6;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%233CADF1' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%233CADF1' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: white;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23808080' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #d9d9d9;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: white;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: white;
+ border-left: 0;
+ border-right: 1px solid #d9d9d9;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#54b7f3, #24a3ef);
+ border-bottom: 1px solid #0d79ba;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(white, #f3f3f3);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233CADF1' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #0f88d1;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +409,24 @@
background: #24a3ef;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #f3f3f3;
+}
+.jewel.navigationlink:active {
+ background: #d9d9d9;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +436,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #b3b3b3;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%233CADF1' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%233CADF1' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%233CADF1' cx='11' cy='11' r='6'></circle></g></g></svg>"), #b3dffa;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#cbe9fb, #9bd5f8);
border: 1px solid #0f88d1;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23cccccc' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f3f3f3;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23cccccc' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #3CADF1;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#4ab3f2, #2ea7f0);
+ border: 1px solid #0f88d1;
+ box-shadow: inset 0 1px 0 #9bd5f8;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(white, #e6e6e6);
+ border: 1px solid #b3b3b3;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#4ab3f2, #2ea7f0);
+ border: 1px solid #0f88d1;
+ box-shadow: inset 0 1px 0 #9bd5f8, 0 0 0 1px rgba(255, 255, 255, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#4ab3f2, #2ea7f0);
@@ -413,18 +553,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #e6e6e6;
+ border: 1px solid silver;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #f3f3f3;
border: 1px solid silver;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +586,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#4ab3f2, #2ea7f0);
border: 1px solid #0f88d1;
box-shadow: inset 0 1px 0 #9bd5f8;
@@ -464,141 +597,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(white, #e6e6e6);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#54b7f3, #24a3ef);
- border: 1px solid #0f88d1;
- box-shadow: inset 0 1px 0 #9bd5f8;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#3CADF1, #1198e9);
- border: 1px solid #0d79ba;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#1198e9, #0d79ba);
- border: 1px solid #0a5a8a;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #0f88d1;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #808080;
+.jewel.simpletable {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.table {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #3CADF1;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #24a3ef;
+}
+
+a:link {
+ color: #3CADF1;
+}
+
+a:active {
+ color: #0f88d1;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #0f88d1;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: #a6a6a6;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: silver;
}
+.jewel.textinput input[disabled] + i {
+ color: silver;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #0f88d1;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+.jewel.textarea textarea[disabled] {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+ color: silver;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: silver;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#54b7f3, #24a3ef);
+ border-top: 1px solid #83cbf6;
+ border-bottom: 1px solid #0d79ba;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/pom.xml
index 64d76fb..68a15f9 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
index c2dd4cd..0e23ae1 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: white;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #808080;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#e6e6e6, #cccccc);
@@ -109,44 +111,21 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#e6e6e6, #cccccc);
border: 1px solid #b3b3b3;
box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #808080;
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#d9d9d9, silver);
@@ -158,28 +137,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #b3b3b3;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#98cc50, #7eb435);
border: 1px solid #638c29;
box-shadow: inset 0 1px 0 #bbdd8b;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#8CC63C, #71a02f);
@@ -191,91 +177,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #638c29;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #ebebeb;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%238CC63C' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%238CC63C' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%238CC63C' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #c6e39f;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#d2e9b2, #bbdd8b);
border: 1px solid #638c29;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%238CC63C' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: white;
+ border: 1px solid #d9d9d9;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #f3f3f3;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #e6e6e6;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%238CC63C' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%238CC63C' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: white;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23808080' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #d9d9d9;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: white;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: white;
+ border-left: 0;
+ border-right: 1px solid #d9d9d9;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#98cc50, #7eb435);
+ border-bottom: 1px solid #557923;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(white, #f3f3f3);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%238CC63C' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #638c29;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +409,24 @@
background: #7eb435;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #f3f3f3;
+}
+.jewel.navigationlink:active {
+ background: #d9d9d9;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +436,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #b3b3b3;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%238CC63C' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%238CC63C' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%238CC63C' cx='11' cy='11' r='6'></circle></g></g></svg>"), #c6e39f;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#d2e9b2, #bbdd8b);
border: 1px solid #638c29;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23cccccc' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f3f3f3;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23cccccc' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #8CC63C;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#93c948, #84bc37);
+ border: 1px solid #638c29;
+ box-shadow: inset 0 1px 0 #bbdd8b;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(white, #e6e6e6);
+ border: 1px solid #b3b3b3;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#93c948, #84bc37);
+ border: 1px solid #638c29;
+ box-shadow: inset 0 1px 0 #bbdd8b, 0 0 0 1px rgba(255, 255, 255, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#93c948, #84bc37);
@@ -413,18 +553,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #e6e6e6;
+ border: 1px solid silver;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #f3f3f3;
border: 1px solid silver;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +586,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#93c948, #84bc37);
border: 1px solid #638c29;
box-shadow: inset 0 1px 0 #bbdd8b;
@@ -464,141 +597,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(white, #e6e6e6);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#98cc50, #7eb435);
- border: 1px solid #638c29;
- box-shadow: inset 0 1px 0 #bbdd8b;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#8CC63C, #71a02f);
- border: 1px solid #557923;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#71a02f, #557923);
- border: 1px solid #395118;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #638c29;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #808080;
+.jewel.simpletable {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.table {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #8CC63C;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #7eb435;
+}
+
+a:link {
+ color: #8CC63C;
+}
+
+a:active {
+ color: #638c29;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #638c29;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: #a6a6a6;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: silver;
}
+.jewel.textinput input[disabled] + i {
+ color: silver;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #638c29;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+.jewel.textarea textarea[disabled] {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+ color: silver;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: silver;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#98cc50, #7eb435);
+ border-top: 1px solid #afd777;
+ border-bottom: 1px solid #557923;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/pom.xml
index d3250d9..91a2449 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
index af41898..d08449c 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: white;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #808080;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#e6e6e6, #cccccc);
@@ -109,44 +111,21 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#e6e6e6, #cccccc);
border: 1px solid #b3b3b3;
box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #808080;
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#d9d9d9, silver);
@@ -158,28 +137,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #b3b3b3;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#45c354, #34a241);
border: 1px solid #277b32;
box-shadow: inset 0 1px 0 #7fd68a;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(21, 65, 26, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#3AB549, #2e8e39);
@@ -191,91 +177,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #277b32;
box-shadow: inset 0px 0px 0px 1px rgba(243, 251, 244, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #ebebeb;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%233AB549' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%233AB549' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%233AB549' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #92dc9b;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#a6e2ad, #7fd68a);
border: 1px solid #277b32;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233AB549' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: white;
+ border: 1px solid #d9d9d9;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #f3f3f3;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #e6e6e6;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%233AB549' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%233AB549' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: white;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23808080' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #d9d9d9;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: white;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: white;
+ border-left: 0;
+ border-right: 1px solid #d9d9d9;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#45c354, #34a241);
+ border-bottom: 1px solid #21682a;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(white, #f3f3f3);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233AB549' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #277b32;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +409,24 @@
background: #34a241;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #f3f3f3;
+}
+.jewel.navigationlink:active {
+ background: #d9d9d9;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +436,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #b3b3b3;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%233AB549' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%233AB549' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%233AB549' cx='11' cy='11' r='6'></circle></g></g></svg>"), #92dc9b;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#a6e2ad, #7fd68a);
border: 1px solid #277b32;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23cccccc' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f3f3f3;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23cccccc' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #3AB549;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#3ec14e, #36a944);
+ border: 1px solid #277b32;
+ box-shadow: inset 0 1px 0 #7fd68a;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(white, #e6e6e6);
+ border: 1px solid #b3b3b3;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#3ec14e, #36a944);
+ border: 1px solid #277b32;
+ box-shadow: inset 0 1px 0 #7fd68a, 0 0 0 1px rgba(255, 255, 255, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#3ec14e, #36a944);
@@ -413,18 +553,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #e6e6e6;
+ border: 1px solid silver;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #f3f3f3;
border: 1px solid silver;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +586,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#3ec14e, #36a944);
border: 1px solid #277b32;
box-shadow: inset 0 1px 0 #7fd68a;
@@ -464,141 +597,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(white, #e6e6e6);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#45c354, #34a241);
- border: 1px solid #277b32;
- box-shadow: inset 0 1px 0 #7fd68a;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(21, 65, 26, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#3AB549, #2e8e39);
- border: 1px solid #21682a;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#2e8e39, #21682a);
- border: 1px solid #15411a;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #277b32;
- box-shadow: inset 0px 0px 0px 1px rgba(243, 251, 244, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #808080;
+.jewel.simpletable {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.table {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #3AB549;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #34a241;
+}
+
+a:link {
+ color: #3AB549;
+}
+
+a:active {
+ color: #277b32;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #277b32;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: #a6a6a6;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: silver;
}
+.jewel.textinput input[disabled] + i {
+ color: silver;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #277b32;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+.jewel.textarea textarea[disabled] {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+ color: silver;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: silver;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#45c354, #34a241);
+ border-top: 1px solid #6cd078;
+ border-bottom: 1px solid #21682a;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(21, 65, 26, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(21, 65, 26, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/pom.xml
index 5532139..16e69a7 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
index 544683b..97d3401 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: white;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #808080;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#e6e6e6, #cccccc);
@@ -109,44 +111,21 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#e6e6e6, #cccccc);
border: 1px solid #b3b3b3;
box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #808080;
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#d9d9d9, silver);
@@ -158,28 +137,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #b3b3b3;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f8a036, #f28809);
border: 1px solid #c16c07;
box-shadow: inset 0 1px 0 #fac380;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(119, 67, 4, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#F7941D, #d97a08);
@@ -191,91 +177,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #c16c07;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #ebebeb;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23F7941D' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23F7941D' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23F7941D' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #fbce98;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#fcdab1, #fac380);
border: 1px solid #c16c07;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23F7941D' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: white;
+ border: 1px solid #d9d9d9;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #f3f3f3;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #e6e6e6;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23F7941D' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23F7941D' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: white;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23808080' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #d9d9d9;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: white;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: white;
+ border-left: 0;
+ border-right: 1px solid #d9d9d9;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#f8a036, #f28809);
+ border-bottom: 1px solid #a85e06;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(white, #f3f3f3);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23F7941D' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #c16c07;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +409,24 @@
background: #f28809;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #f3f3f3;
+}
+.jewel.navigationlink:active {
+ background: #d9d9d9;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +436,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #b3b3b3;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23F7941D' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23F7941D' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23F7941D' cx='11' cy='11' r='6'></circle></g></g></svg>"), #fbce98;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#fcdab1, #fac380);
border: 1px solid #c16c07;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23cccccc' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f3f3f3;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23cccccc' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #F7941D;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#f89b2c, #f68d0e);
+ border: 1px solid #c16c07;
+ box-shadow: inset 0 1px 0 #fac380;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(white, #e6e6e6);
+ border: 1px solid #b3b3b3;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#f89b2c, #f68d0e);
+ border: 1px solid #c16c07;
+ box-shadow: inset 0 1px 0 #fac380, 0 0 0 1px rgba(255, 255, 255, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#f89b2c, #f68d0e);
@@ -413,18 +553,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #e6e6e6;
+ border: 1px solid silver;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #f3f3f3;
border: 1px solid silver;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +586,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#f89b2c, #f68d0e);
border: 1px solid #c16c07;
box-shadow: inset 0 1px 0 #fac380;
@@ -464,141 +597,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(white, #e6e6e6);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f8a036, #f28809);
- border: 1px solid #c16c07;
- box-shadow: inset 0 1px 0 #fac380;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(119, 67, 4, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#F7941D, #d97a08);
- border: 1px solid #a85e06;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#d97a08, #a85e06);
- border: 1px solid #774304;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #c16c07;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #808080;
+.jewel.simpletable {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.table {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #F7941D;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #f28809;
+}
+
+a:link {
+ color: #F7941D;
+}
+
+a:active {
+ color: #c16c07;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #c16c07;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: #a6a6a6;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: silver;
}
+.jewel.textinput input[disabled] + i {
+ color: silver;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #c16c07;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+.jewel.textarea textarea[disabled] {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+ color: silver;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: silver;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#f8a036, #f28809);
+ border-top: 1px solid #fab767;
+ border-bottom: 1px solid #a85e06;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(119, 67, 4, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(119, 67, 4, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/pom.xml
index 21bc05a..dd2cfcc 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
index 3d372cb..60c957d 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: white;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #808080;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#e6e6e6, #cccccc);
@@ -109,44 +111,21 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#e6e6e6, #cccccc);
border: 1px solid #b3b3b3;
box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #808080;
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#d9d9d9, silver);
@@ -158,28 +137,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #b3b3b3;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#ee343b, #dc121a);
border: 1px solid #ad0e15;
box-shadow: inset 0 1px 0 #f47a7f;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(102, 9, 12, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#EC1C24, #c51017);
@@ -191,91 +177,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #ad0e15;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #ebebeb;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23EC1C24' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23EC1C24' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23EC1C24' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f69296;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#f8a9ac, #f47a7f);
border: 1px solid #ad0e15;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23EC1C24' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: white;
+ border: 1px solid #d9d9d9;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #f3f3f3;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #e6e6e6;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23EC1C24' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23EC1C24' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: white;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23808080' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #d9d9d9;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: white;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: white;
+ border-left: 0;
+ border-right: 1px solid #d9d9d9;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#ee343b, #dc121a);
+ border-bottom: 1px solid #950d12;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(white, #f3f3f3);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23EC1C24' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #ad0e15;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +409,24 @@
background: #dc121a;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #f3f3f3;
+}
+.jewel.navigationlink:active {
+ background: #d9d9d9;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +436,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #b3b3b3;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23EC1C24' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23EC1C24' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23EC1C24' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f69296;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#f8a9ac, #f47a7f);
border: 1px solid #ad0e15;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23cccccc' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f3f3f3;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23cccccc' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #EC1C24;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#ed2a32, #e5131b);
+ border: 1px solid #ad0e15;
+ box-shadow: inset 0 1px 0 #f47a7f;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(white, #e6e6e6);
+ border: 1px solid #b3b3b3;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#ed2a32, #e5131b);
+ border: 1px solid #ad0e15;
+ box-shadow: inset 0 1px 0 #f47a7f, 0 0 0 1px rgba(255, 255, 255, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#ed2a32, #e5131b);
@@ -413,18 +553,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #e6e6e6;
+ border: 1px solid silver;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #f3f3f3;
border: 1px solid silver;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +586,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#ed2a32, #e5131b);
border: 1px solid #ad0e15;
box-shadow: inset 0 1px 0 #f47a7f;
@@ -464,141 +597,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(white, #e6e6e6);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#ee343b, #dc121a);
- border: 1px solid #ad0e15;
- box-shadow: inset 0 1px 0 #f47a7f;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(102, 9, 12, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#EC1C24, #c51017);
- border: 1px solid #950d12;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#c51017, #950d12);
- border: 1px solid #66090c;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #ad0e15;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #808080;
+.jewel.simpletable {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.table {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #EC1C24;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #dc121a;
+}
+
+a:link {
+ color: #EC1C24;
+}
+
+a:active {
+ color: #ad0e15;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #ad0e15;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: #a6a6a6;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: silver;
}
+.jewel.textinput input[disabled] + i {
+ color: silver;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #ad0e15;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+.jewel.textarea textarea[disabled] {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+ color: silver;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: silver;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#ee343b, #dc121a);
+ border-top: 1px solid #f26368;
+ border-bottom: 1px solid #950d12;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(102, 9, 12, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(102, 9, 12, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/pom.xml
index 5770b35..8987f54 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
index 598ffa9..05d1330 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: white;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #808080;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#e6e6e6, #cccccc);
@@ -109,44 +111,21 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#e6e6e6, #cccccc);
border: 1px solid #b3b3b3;
box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #808080;
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#d9d9d9, silver);
@@ -158,28 +137,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #b3b3b3;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#3481d0, #2767a9);
border: 1px solid #1e4e80;
box-shadow: inset 0 1px 0 #72a7de;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(15, 40, 66, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#2C74BE, #225b95);
@@ -191,91 +177,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #1e4e80;
box-shadow: inset 0px 0px 0px 1px rgba(238, 244, 251, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #ebebeb;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%232C74BE' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%232C74BE' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%232C74BE' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #86b4e3;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#9bc1e8, #72a7de);
border: 1px solid #1e4e80;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%232C74BE' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: white;
+ border: 1px solid #d9d9d9;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #f3f3f3;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #e6e6e6;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%232C74BE' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%232C74BE' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: white;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23808080' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #d9d9d9;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: white;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: white;
+ border-left: 0;
+ border-right: 1px solid #d9d9d9;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#3481d0, #2767a9);
+ border-bottom: 1px solid #19416b;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(white, #f3f3f3);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%232C74BE' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #1e4e80;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +409,24 @@
background: #2767a9;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #f3f3f3;
+}
+.jewel.navigationlink:active {
+ background: #d9d9d9;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +436,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #b3b3b3;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%232C74BE' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%232C74BE' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%232C74BE' cx='11' cy='11' r='6'></circle></g></g></svg>"), #86b4e3;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#9bc1e8, #72a7de);
border: 1px solid #1e4e80;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23cccccc' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f3f3f3;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23cccccc' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #2C74BE;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#2f7cca, #296cb2);
+ border: 1px solid #1e4e80;
+ box-shadow: inset 0 1px 0 #72a7de;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(white, #e6e6e6);
+ border: 1px solid #b3b3b3;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#2f7cca, #296cb2);
+ border: 1px solid #1e4e80;
+ box-shadow: inset 0 1px 0 #72a7de, 0 0 0 1px rgba(255, 255, 255, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#2f7cca, #296cb2);
@@ -413,18 +553,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #e6e6e6;
+ border: 1px solid silver;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #f3f3f3;
border: 1px solid silver;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +586,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#2f7cca, #296cb2);
border: 1px solid #1e4e80;
box-shadow: inset 0 1px 0 #72a7de;
@@ -464,141 +597,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(white, #e6e6e6);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#3481d0, #2767a9);
- border: 1px solid #1e4e80;
- box-shadow: inset 0 1px 0 #72a7de;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(15, 40, 66, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#2C74BE, #225b95);
- border: 1px solid #19416b;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#225b95, #19416b);
- border: 1px solid #0f2842;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #1e4e80;
- box-shadow: inset 0px 0px 0px 1px rgba(238, 244, 251, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #808080;
+.jewel.simpletable {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.table {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #2C74BE;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #2767a9;
+}
+
+a:link {
+ color: #2C74BE;
+}
+
+a:active {
+ color: #1e4e80;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #1e4e80;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: #a6a6a6;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: silver;
}
+.jewel.textinput input[disabled] + i {
+ color: silver;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #1e4e80;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+.jewel.textarea textarea[disabled] {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+ color: silver;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: silver;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#3481d0, #2767a9);
+ border-top: 1px solid #5d9ad9;
+ border-bottom: 1px solid #19416b;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(15, 40, 66, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(15, 40, 66, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/pom.xml
index 2960196..d9bb7a3 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
index 557f9b0..cfebe6b 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: white;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #808080;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#e6e6e6, #cccccc);
@@ -109,44 +111,21 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#e6e6e6, #cccccc);
border: 1px solid #b3b3b3;
box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #808080;
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#d9d9d9, silver);
@@ -158,28 +137,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #b3b3b3;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f9bb58, #f7a726);
border: 1px solid #e28f08;
box-shadow: inset 0 1px 0 #fcd9a1;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(152, 96, 6, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#F8B13F, #f69d0e);
@@ -191,91 +177,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #e28f08;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #ebebeb;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23F8B13F' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23F8B13F' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23F8B13F' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #fce3ba;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#fdedd3, #fcd9a1);
border: 1px solid #e28f08;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23F8B13F' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: white;
+ border: 1px solid #d9d9d9;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #f3f3f3;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #e6e6e6;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23F8B13F' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23F8B13F' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: white;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23808080' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #d9d9d9;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: white;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: white;
+ border-left: 0;
+ border-right: 1px solid #d9d9d9;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#f9bb58, #f7a726);
+ border-bottom: 1px solid #ca7f07;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(white, #f3f3f3);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23F8B13F' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #e28f08;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +409,24 @@
background: #f7a726;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #f3f3f3;
+}
+.jewel.navigationlink:active {
+ background: #d9d9d9;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +436,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #b3b3b3;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23F8B13F' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23F8B13F' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23F8B13F' cx='11' cy='11' r='6'></circle></g></g></svg>"), #fce3ba;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#fdedd3, #fcd9a1);
border: 1px solid #e28f08;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23cccccc' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f3f3f3;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23cccccc' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #F8B13F;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#f9b74e, #f7ab30);
+ border: 1px solid #e28f08;
+ box-shadow: inset 0 1px 0 #fcd9a1;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(white, #e6e6e6);
+ border: 1px solid #b3b3b3;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#f9b74e, #f7ab30);
+ border: 1px solid #e28f08;
+ box-shadow: inset 0 1px 0 #fcd9a1, 0 0 0 1px rgba(255, 255, 255, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#f9b74e, #f7ab30);
@@ -413,18 +553,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #e6e6e6;
+ border: 1px solid silver;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #f3f3f3;
border: 1px solid silver;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +586,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#f9b74e, #f7ab30);
border: 1px solid #e28f08;
box-shadow: inset 0 1px 0 #fcd9a1;
@@ -464,141 +597,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(white, #e6e6e6);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f9bb58, #f7a726);
- border: 1px solid #e28f08;
- box-shadow: inset 0 1px 0 #fcd9a1;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(152, 96, 6, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#F8B13F, #f69d0e);
- border: 1px solid #ca7f07;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#f69d0e, #ca7f07);
- border: 1px solid #986006;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #e28f08;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #808080;
+.jewel.simpletable {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.table {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #F8B13F;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #f7a726;
+}
+
+a:link {
+ color: #F8B13F;
+}
+
+a:active {
+ color: #e28f08;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #e28f08;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: #a6a6a6;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: silver;
}
+.jewel.textinput input[disabled] + i {
+ color: silver;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #e28f08;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+.jewel.textarea textarea[disabled] {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+ color: silver;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: silver;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#f9bb58, #f7a726);
+ border-top: 1px solid #fbcf89;
+ border-bottom: 1px solid #ca7f07;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(152, 96, 6, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(152, 96, 6, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/pom.xml
index 7311d24..03afa46 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
index 85cdd1f..09eebca 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: white;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #808080;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#e6e6e6, #cccccc);
@@ -109,44 +111,21 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#e6e6e6, #cccccc);
border: 1px solid #b3b3b3;
box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #808080;
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#d9d9d9, silver);
@@ -158,28 +137,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #b3b3b3;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f16c42, #ed4812);
border: 1px solid #be390e;
box-shadow: inset 0 1px 0 #f6a389;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#EF5A2A, #d64010);
@@ -191,91 +177,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #be390e;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #ebebeb;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23EF5A2A' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23EF5A2A' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23EF5A2A' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8b6a1;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#fac8b8, #f6a389);
border: 1px solid #be390e;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23EF5A2A' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: white;
+ border: 1px solid #d9d9d9;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #f3f3f3;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #e6e6e6;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23EF5A2A' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23EF5A2A' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: white;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23808080' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #d9d9d9;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: white;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: white;
+ border-left: 0;
+ border-right: 1px solid #d9d9d9;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#f16c42, #ed4812);
+ border-bottom: 1px solid #a6320d;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(white, #f3f3f3);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23EF5A2A' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #be390e;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +409,24 @@
background: #ed4812;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #f3f3f3;
+}
+.jewel.navigationlink:active {
+ background: #d9d9d9;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +436,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #b3b3b3;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23EF5A2A' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23EF5A2A' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23EF5A2A' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f8b6a1;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#fac8b8, #f6a389);
border: 1px solid #be390e;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23cccccc' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f3f3f3;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23cccccc' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #EF5A2A;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#f06538, #ee4f1c);
+ border: 1px solid #be390e;
+ box-shadow: inset 0 1px 0 #f6a389;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(white, #e6e6e6);
+ border: 1px solid #b3b3b3;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#f06538, #ee4f1c);
+ border: 1px solid #be390e;
+ box-shadow: inset 0 1px 0 #f6a389, 0 0 0 1px rgba(255, 255, 255, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#f06538, #ee4f1c);
@@ -413,18 +553,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #e6e6e6;
+ border: 1px solid silver;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #f3f3f3;
border: 1px solid silver;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +586,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#f06538, #ee4f1c);
border: 1px solid #be390e;
box-shadow: inset 0 1px 0 #f6a389;
@@ -464,141 +597,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(white, #e6e6e6);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f16c42, #ed4812);
- border: 1px solid #be390e;
- box-shadow: inset 0 1px 0 #f6a389;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#EF5A2A, #d64010);
- border: 1px solid #a6320d;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#d64010, #a6320d);
- border: 1px solid #772409;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #be390e;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #808080;
+.jewel.simpletable {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.table {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #EF5A2A;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #ed4812;
+}
+
+a:link {
+ color: #EF5A2A;
+}
+
+a:active {
+ color: #be390e;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #be390e;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: #a6a6a6;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: silver;
}
+.jewel.textinput input[disabled] + i {
+ color: silver;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #be390e;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+.jewel.textarea textarea[disabled] {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+ color: silver;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: silver;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#f16c42, #ed4812);
+ border-top: 1px solid #f49171;
+ border-bottom: 1px solid #a6320d;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/pom.xml
index a8677b3..1cda1b0 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
index 767e566..d34deb0 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: white;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #808080;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#e6e6e6, #cccccc);
@@ -109,44 +111,21 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#e6e6e6, #cccccc);
border: 1px solid #b3b3b3;
box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #808080;
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#d9d9d9, silver);
@@ -158,28 +137,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #b3b3b3;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#2ebcb2, #24948c);
border: 1px solid #1a6b65;
box-shadow: inset 0 1px 0 #5fd8cf;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(11, 45, 43, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#29A89F, #1f7f78);
@@ -191,91 +177,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #1a6b65;
box-shadow: inset 0px 0px 0px 1px rgba(218, 246, 244, 0.5), inset 0 1px 0 rgba(239, 251, 250, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #ebebeb;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%2329A89F' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%2329A89F' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%2329A89F' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #74ddd5;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#88e2dc, #5fd8cf);
border: 1px solid #1a6b65;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%2329A89F' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: white;
+ border: 1px solid #d9d9d9;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #f3f3f3;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #e6e6e6;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%2329A89F' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%2329A89F' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: white;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23808080' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #d9d9d9;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: white;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: white;
+ border-left: 0;
+ border-right: 1px solid #d9d9d9;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#2ebcb2, #24948c);
+ border-bottom: 1px solid #155651;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(white, #f3f3f3);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%2329A89F' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #1a6b65;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +409,24 @@
background: #24948c;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #f3f3f3;
+}
+.jewel.navigationlink:active {
+ background: #d9d9d9;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +436,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #b3b3b3;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%2329A89F' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%2329A89F' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%2329A89F' cx='11' cy='11' r='6'></circle></g></g></svg>"), #74ddd5;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#88e2dc, #5fd8cf);
border: 1px solid #1a6b65;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23cccccc' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f3f3f3;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23cccccc' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #29A89F;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#2cb4ab, #269c93);
+ border: 1px solid #1a6b65;
+ box-shadow: inset 0 1px 0 #5fd8cf;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(white, #e6e6e6);
+ border: 1px solid #b3b3b3;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#2cb4ab, #269c93);
+ border: 1px solid #1a6b65;
+ box-shadow: inset 0 1px 0 #5fd8cf, 0 0 0 1px rgba(255, 255, 255, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#2cb4ab, #269c93);
@@ -413,18 +553,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #e6e6e6;
+ border: 1px solid silver;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #f3f3f3;
border: 1px solid silver;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +586,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#2cb4ab, #269c93);
border: 1px solid #1a6b65;
box-shadow: inset 0 1px 0 #5fd8cf;
@@ -464,141 +597,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(white, #e6e6e6);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#2ebcb2, #24948c);
- border: 1px solid #1a6b65;
- box-shadow: inset 0 1px 0 #5fd8cf;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(11, 45, 43, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#29A89F, #1f7f78);
- border: 1px solid #155651;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#1f7f78, #155651);
- border: 1px solid #0b2d2b;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #1a6b65;
- box-shadow: inset 0px 0px 0px 1px rgba(218, 246, 244, 0.5), inset 0 1px 0 rgba(239, 251, 250, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #808080;
+.jewel.simpletable {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.table {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #29A89F;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #24948c;
+}
+
+a:link {
+ color: #29A89F;
+}
+
+a:active {
+ color: #1a6b65;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #1a6b65;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: #a6a6a6;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: silver;
}
+.jewel.textinput input[disabled] + i {
+ color: silver;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #1a6b65;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+.jewel.textarea textarea[disabled] {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+ color: silver;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: silver;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#2ebcb2, #24948c);
+ border-top: 1px solid #4bd3c9;
+ border-bottom: 1px solid #155651;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(11, 45, 43, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(11, 45, 43, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/pom.xml
index a0d67e1..9dd09e3 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
index 7c071bb..5e3e9f5 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: white;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #808080;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#e6e6e6, #cccccc);
@@ -109,44 +111,21 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#e6e6e6, #cccccc);
border: 1px solid #b3b3b3;
box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #808080;
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#d9d9d9, silver);
@@ -158,28 +137,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #b3b3b3;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#7432a4, #58267c);
border: 1px solid #3c1a55;
box-shadow: inset 0 1px 0 #9a56cc;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(19, 8, 27, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#662C90, #4a2069);
@@ -191,91 +177,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #3c1a55;
box-shadow: inset 0px 0px 0px 1px rgba(224, 204, 239, 0.5), inset 0 1px 0 rgba(236, 223, 245, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #ebebeb;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23662C90' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23662C90' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23662C90' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #a66ad1;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#b27ed7, #9a56cc);
border: 1px solid #3c1a55;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23662C90' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: white;
+ border: 1px solid #d9d9d9;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #f3f3f3;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #e6e6e6;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23662C90' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23662C90' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: white;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23808080' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #d9d9d9;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: white;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: white;
+ border-left: 0;
+ border-right: 1px solid #d9d9d9;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#7432a4, #58267c);
+ border-bottom: 1px solid #2f1442;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(white, #f3f3f3);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23662C90' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #3c1a55;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +409,24 @@
background: #58267c;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #f3f3f3;
+}
+.jewel.navigationlink:active {
+ background: #d9d9d9;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +436,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #b3b3b3;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23662C90' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23662C90' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23662C90' cx='11' cy='11' r='6'></circle></g></g></svg>"), #a66ad1;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#b27ed7, #9a56cc);
border: 1px solid #3c1a55;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23cccccc' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f3f3f3;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23cccccc' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #662C90;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#6e309c, #5e2884);
+ border: 1px solid #3c1a55;
+ box-shadow: inset 0 1px 0 #9a56cc;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(white, #e6e6e6);
+ border: 1px solid #b3b3b3;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#6e309c, #5e2884);
+ border: 1px solid #3c1a55;
+ box-shadow: inset 0 1px 0 #9a56cc, 0 0 0 1px rgba(255, 255, 255, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#6e309c, #5e2884);
@@ -413,18 +553,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #e6e6e6;
+ border: 1px solid silver;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #f3f3f3;
border: 1px solid silver;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +586,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#6e309c, #5e2884);
border: 1px solid #3c1a55;
box-shadow: inset 0 1px 0 #9a56cc;
@@ -464,141 +597,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(white, #e6e6e6);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#7432a4, #58267c);
- border: 1px solid #3c1a55;
- box-shadow: inset 0 1px 0 #9a56cc;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(19, 8, 27, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#662C90, #4a2069);
- border: 1px solid #2f1442;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#4a2069, #2f1442);
- border: 1px solid #13081b;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #3c1a55;
- box-shadow: inset 0px 0px 0px 1px rgba(224, 204, 239, 0.5), inset 0 1px 0 rgba(236, 223, 245, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #808080;
+.jewel.simpletable {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.table {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #662C90;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #58267c;
+}
+
+a:link {
+ color: #662C90;
+}
+
+a:active {
+ color: #3c1a55;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #3c1a55;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: #a6a6a6;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: silver;
}
+.jewel.textinput input[disabled] + i {
+ color: silver;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #3c1a55;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+.jewel.textarea textarea[disabled] {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+ color: silver;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: silver;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#7432a4, #58267c);
+ border-top: 1px solid #8f43c6;
+ border-bottom: 1px solid #2f1442;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(19, 8, 27, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(19, 8, 27, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/pom.xml
index 6cb8fe7..a001158 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
index 81377e4..3be3fe1 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: white;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #808080;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#e6e6e6, #cccccc);
@@ -109,44 +111,21 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#e6e6e6, #cccccc);
border: 1px solid #b3b3b3;
box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #808080;
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#d9d9d9, silver);
@@ -158,28 +137,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #b3b3b3;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f4e813, #cac00a);
border: 1px solid #999207;
box-shadow: inset 0 1px 0 #f7ef5c;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(80, 76, 4, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#E2D70B, #b1a909);
@@ -191,91 +177,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #999207;
box-shadow: inset 0px 0px 0px 1px rgba(254, 253, 238, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #ebebeb;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23E2D70B' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23E2D70B' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23E2D70B' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f174;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#f9f48d, #f7ef5c);
border: 1px solid #999207;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23E2D70B' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: white;
+ border: 1px solid #d9d9d9;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #f3f3f3;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #e6e6e6;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23E2D70B' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%23E2D70B' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: white;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23808080' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #d9d9d9;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: white;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: white;
+ border-left: 0;
+ border-right: 1px solid #d9d9d9;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#f4e813, #cac00a);
+ border-bottom: 1px solid #817a06;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
+.jewel.dropdownlist {
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(white, #f3f3f3);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23E2D70B' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+}
+.jewel.dropdownlist:focus {
+ border: 1px solid #999207;
+}
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
+}
+
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -286,9 +409,24 @@
background: #cac00a;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #f3f3f3;
+}
+.jewel.navigationlink:active {
+ background: #d9d9d9;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -298,111 +436,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #b3b3b3;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23E2D70B' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23E2D70B' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23E2D70B' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f8f174;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#f9f48d, #f7ef5c);
border: 1px solid #999207;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23cccccc' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f3f3f3;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23cccccc' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #E2D70B;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#f1e50c, #d3c90a);
+ border: 1px solid #999207;
+ box-shadow: inset 0 1px 0 #f7ef5c;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(white, #e6e6e6);
+ border: 1px solid #b3b3b3;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#f1e50c, #d3c90a);
+ border: 1px solid #999207;
+ box-shadow: inset 0 1px 0 #f7ef5c, 0 0 0 1px rgba(255, 255, 255, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#f1e50c, #d3c90a);
@@ -413,18 +553,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #e6e6e6;
+ border: 1px solid silver;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #f3f3f3;
border: 1px solid silver;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -439,24 +586,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#f1e50c, #d3c90a);
border: 1px solid #999207;
box-shadow: inset 0 1px 0 #f7ef5c;
@@ -464,141 +597,233 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(white, #e6e6e6);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f4e813, #cac00a);
- border: 1px solid #999207;
- box-shadow: inset 0 1px 0 #f7ef5c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(80, 76, 4, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#E2D70B, #b1a909);
- border: 1px solid #817a06;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#b1a909, #817a06);
- border: 1px solid #504c04;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #999207;
- box-shadow: inset 0px 0px 0px 1px rgba(254, 253, 238, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #808080;
+.jewel.simpletable {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.table {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #E2D70B;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #cac00a;
+}
+
+a:link {
+ color: #E2D70B;
+}
+
+a:active {
+ color: #999207;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #999207;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: #a6a6a6;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
color: silver;
}
+.jewel.textinput input[disabled] + i {
+ color: silver;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #999207;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+.jewel.textarea textarea[disabled] {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+ color: silver;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
+ color: silver;
+}
+
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#f4e813, #cac00a);
+ border-top: 1px solid #f6ed44;
+ border-bottom: 1px solid #817a06;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(80, 76, 4, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(80, 76, 4, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/sass/defaults.sass
index a3dd1b4..3f1eff1 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/sass/defaults.sass
@@ -28,13 +28,27 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-primary/alert"
@import "../../../../JewelTheme/src/main/sass/components-primary/button"
+@import "../../../../JewelTheme/src/main/sass/components-primary/card"
@import "../../../../JewelTheme/src/main/sass/components-primary/checkbox"
+@import "../../../../JewelTheme/src/main/sass/components-primary/combobox"
@import "../../../../JewelTheme/src/main/sass/components-primary/controlbar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datechooser"
+@import "../../../../JewelTheme/src/main/sass/components-primary/datefield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/divider"
+@import "../../../../JewelTheme/src/main/sass/components-primary/drawer"
+@import "../../../../JewelTheme/src/main/sass/components-primary/dropdownlist"
+@import "../../../../JewelTheme/src/main/sass/components-primary/icons"
@import "../../../../JewelTheme/src/main/sass/components-primary/itemRenderer"
@import "../../../../JewelTheme/src/main/sass/components-primary/label"
@import "../../../../JewelTheme/src/main/sass/components-primary/list"
+@import "../../../../JewelTheme/src/main/sass/components-primary/navigation"
+@import "../../../../JewelTheme/src/main/sass/components-primary/numericstepper"
@import "../../../../JewelTheme/src/main/sass/components-primary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-primary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-primary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-primary/table"
+@import "../../../../JewelTheme/src/main/sass/components-primary/text"
+@import "../../../../JewelTheme/src/main/sass/components-primary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-primary/titlebar"
+@import "../../../../JewelTheme/src/main/sass/components-primary/togglebutton"
+@import "../../../../JewelTheme/src/main/sass/components-primary/tooltip"
+@import "../../../../JewelTheme/src/main/sass/components-primary/topappbar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Amethyst-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Amethyst-Theme/pom.xml
index 8ce3ef5..df52aba 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Amethyst-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Amethyst-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Amethyst-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Amethyst-Theme/src/main/resources/defaults.css
index 445cee9..f6679bf 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Amethyst-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Amethyst-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#d43bd1, #b427b1);
border: 1px solid #8a1e88;
box-shadow: inset 0 1px 0 #e279e0;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(75, 17, 74, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#C92CC6, #9f239d);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #8a1e88;
box-shadow: inset 0px 0px 0px 1px rgba(253, 247, 253, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#d43bd1, #b427b1);
- border: 1px solid #8a1e88;
- box-shadow: inset 0 1px 0 #e279e0;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(75, 17, 74, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#C92CC6, #9f239d);
- border: 1px solid #751a74;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#9f239d, #751a74);
- border: 1px solid #4b114a;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #8a1e88;
- box-shadow: inset 0px 0px 0px 1px rgba(253, 247, 253, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #9f239d;
+}
+
+a:hover {
+ color: #C92CC6;
+}
+
+a:active {
+ color: #d94fd6;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Amethyst-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Amethyst-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Amethyst-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Amethyst-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Blue-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Blue-Theme/pom.xml
index 0ddbdda..b7dadf3 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Blue-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Blue-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Blue-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Blue-Theme/src/main/resources/defaults.css
index ca2877c..31eed49 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Blue-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Blue-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#54b7f3, #24a3ef);
border: 1px solid #0f88d1;
box-shadow: inset 0 1px 0 #9bd5f8;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#3CADF1, #1198e9);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #0f88d1;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#54b7f3, #24a3ef);
- border: 1px solid #0f88d1;
- box-shadow: inset 0 1px 0 #9bd5f8;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#3CADF1, #1198e9);
- border: 1px solid #0d79ba;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#1198e9, #0d79ba);
- border: 1px solid #0a5a8a;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #0f88d1;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #1198e9;
+}
+
+a:hover {
+ color: #3CADF1;
+}
+
+a:active {
+ color: #6cc1f4;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Blue-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Blue-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Blue-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Blue-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme/pom.xml
index c82a330..fef1a7b 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme/src/main/resources/defaults.css
index cc31db0..13f0274 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#98cc50, #7eb435);
border: 1px solid #638c29;
box-shadow: inset 0 1px 0 #bbdd8b;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#8CC63C, #71a02f);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #638c29;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#98cc50, #7eb435);
- border: 1px solid #638c29;
- box-shadow: inset 0 1px 0 #bbdd8b;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#8CC63C, #71a02f);
- border: 1px solid #557923;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#71a02f, #557923);
- border: 1px solid #395118;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #638c29;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #71a02f;
+}
+
+a:hover {
+ color: #8CC63C;
+}
+
+a:active {
+ color: #a3d263;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Emerald-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Green-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Green-Theme/pom.xml
index 81306dc..d81d414 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Green-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Green-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Green-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Green-Theme/src/main/resources/defaults.css
index 107821d..ff9717f 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Green-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Green-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#45c354, #34a241);
border: 1px solid #277b32;
box-shadow: inset 0 1px 0 #7fd68a;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(21, 65, 26, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#3AB549, #2e8e39);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #277b32;
box-shadow: inset 0px 0px 0px 1px rgba(243, 251, 244, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#45c354, #34a241);
- border: 1px solid #277b32;
- box-shadow: inset 0 1px 0 #7fd68a;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(21, 65, 26, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#3AB549, #2e8e39);
- border: 1px solid #21682a;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#2e8e39, #21682a);
- border: 1px solid #15411a;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #277b32;
- box-shadow: inset 0px 0px 0px 1px rgba(243, 251, 244, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #2e8e39;
+}
+
+a:hover {
+ color: #3AB549;
+}
+
+a:active {
+ color: #58ca66;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Green-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Green-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Green-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Green-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Orange-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Orange-Theme/pom.xml
index 238bcc5..84e192a 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Orange-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Orange-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Orange-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Orange-Theme/src/main/resources/defaults.css
index 003dfca..2abd195 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Orange-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Orange-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f8a036, #f28809);
border: 1px solid #c16c07;
box-shadow: inset 0 1px 0 #fac380;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(119, 67, 4, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#F7941D, #d97a08);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #c16c07;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f8a036, #f28809);
- border: 1px solid #c16c07;
- box-shadow: inset 0 1px 0 #fac380;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(119, 67, 4, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#F7941D, #d97a08);
- border: 1px solid #a85e06;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#d97a08, #a85e06);
- border: 1px solid #774304;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #c16c07;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #d97a08;
+}
+
+a:hover {
+ color: #F7941D;
+}
+
+a:active {
+ color: #f9ab4e;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Orange-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Orange-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Orange-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Orange-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Red-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Red-Theme/pom.xml
index 7f0aa8b..a402e04 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Red-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Red-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Red-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Red-Theme/src/main/resources/defaults.css
index 0ae4f11..f2f8d40 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Red-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Red-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#ee343b, #dc121a);
border: 1px solid #ad0e15;
box-shadow: inset 0 1px 0 #f47a7f;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(102, 9, 12, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#EC1C24, #c51017);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #ad0e15;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#ee343b, #dc121a);
- border: 1px solid #ad0e15;
- box-shadow: inset 0 1px 0 #f47a7f;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(102, 9, 12, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#EC1C24, #c51017);
- border: 1px solid #950d12;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#c51017, #950d12);
- border: 1px solid #66090c;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #ad0e15;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #c51017;
+}
+
+a:hover {
+ color: #EC1C24;
+}
+
+a:active {
+ color: #f04b51;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Red-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Red-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Red-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Red-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sapphire-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sapphire-Theme/pom.xml
index 80d523e..d0ae4c8 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sapphire-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sapphire-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sapphire-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sapphire-Theme/src/main/resources/defaults.css
index 4513643..d92d102 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sapphire-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sapphire-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#3481d0, #2767a9);
border: 1px solid #1e4e80;
box-shadow: inset 0 1px 0 #72a7de;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(15, 40, 66, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#2C74BE, #225b95);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #1e4e80;
box-shadow: inset 0px 0px 0px 1px rgba(238, 244, 251, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#3481d0, #2767a9);
- border: 1px solid #1e4e80;
- box-shadow: inset 0 1px 0 #72a7de;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(15, 40, 66, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#2C74BE, #225b95);
- border: 1px solid #19416b;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#225b95, #19416b);
- border: 1px solid #0f2842;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #1e4e80;
- box-shadow: inset 0px 0px 0px 1px rgba(238, 244, 251, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #225b95;
+}
+
+a:hover {
+ color: #2C74BE;
+}
+
+a:active {
+ color: #488ed5;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sapphire-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sapphire-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sapphire-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sapphire-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sunflower-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sunflower-Theme/pom.xml
index d155bf4..7e74ae1 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sunflower-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sunflower-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sunflower-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sunflower-Theme/src/main/resources/defaults.css
index 932ad5c..d047508 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sunflower-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sunflower-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f9bb58, #f7a726);
border: 1px solid #e28f08;
box-shadow: inset 0 1px 0 #fcd9a1;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(152, 96, 6, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#F8B13F, #f69d0e);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #e28f08;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f9bb58, #f7a726);
- border: 1px solid #e28f08;
- box-shadow: inset 0 1px 0 #fcd9a1;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(152, 96, 6, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#F8B13F, #f69d0e);
- border: 1px solid #ca7f07;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#f69d0e, #ca7f07);
- border: 1px solid #986006;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #e28f08;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #f69d0e;
+}
+
+a:hover {
+ color: #F8B13F;
+}
+
+a:active {
+ color: #fac570;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sunflower-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sunflower-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sunflower-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Sunflower-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Topaz-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Topaz-Theme/pom.xml
index d9c6556..d855761 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Topaz-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Topaz-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Topaz-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Topaz-Theme/src/main/resources/defaults.css
index 4d95da9..4705beb 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Topaz-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Topaz-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f16c42, #ed4812);
border: 1px solid #be390e;
box-shadow: inset 0 1px 0 #f6a389;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#EF5A2A, #d64010);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #be390e;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f16c42, #ed4812);
- border: 1px solid #be390e;
- box-shadow: inset 0 1px 0 #f6a389;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#EF5A2A, #d64010);
- border: 1px solid #a6320d;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#d64010, #a6320d);
- border: 1px solid #772409;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #be390e;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #d64010;
+}
+
+a:hover {
+ color: #EF5A2A;
+}
+
+a:active {
+ color: #f37f59;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Topaz-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Topaz-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Topaz-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Topaz-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Turquoise-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Turquoise-Theme/pom.xml
index 2120036..56eb865 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Turquoise-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Turquoise-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Turquoise-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Turquoise-Theme/src/main/resources/defaults.css
index fa7d316..a1e45fa 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Turquoise-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Turquoise-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#2ebcb2, #24948c);
border: 1px solid #1a6b65;
box-shadow: inset 0 1px 0 #5fd8cf;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(11, 45, 43, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#29A89F, #1f7f78);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #1a6b65;
box-shadow: inset 0px 0px 0px 1px rgba(218, 246, 244, 0.5), inset 0 1px 0 rgba(239, 251, 250, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#2ebcb2, #24948c);
- border: 1px solid #1a6b65;
- box-shadow: inset 0 1px 0 #5fd8cf;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(11, 45, 43, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#29A89F, #1f7f78);
- border: 1px solid #155651;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#1f7f78, #155651);
- border: 1px solid #0b2d2b;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #1a6b65;
- box-shadow: inset 0px 0px 0px 1px rgba(218, 246, 244, 0.5), inset 0 1px 0 rgba(239, 251, 250, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #1f7f78;
+}
+
+a:hover {
+ color: #29A89F;
+}
+
+a:active {
+ color: #36cec3;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Turquoise-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Turquoise-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Turquoise-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Turquoise-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Violet-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Violet-Theme/pom.xml
index 8b7e629..aade3dd 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Violet-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Violet-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Violet-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Violet-Theme/src/main/resources/defaults.css
index f359030..8e5d2de 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Violet-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Violet-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#7432a4, #58267c);
border: 1px solid #3c1a55;
box-shadow: inset 0 1px 0 #9a56cc;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(19, 8, 27, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#662C90, #4a2069);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #3c1a55;
box-shadow: inset 0px 0px 0px 1px rgba(224, 204, 239, 0.5), inset 0 1px 0 rgba(236, 223, 245, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#7432a4, #58267c);
- border: 1px solid #3c1a55;
- box-shadow: inset 0 1px 0 #9a56cc;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(19, 8, 27, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#662C90, #4a2069);
- border: 1px solid #2f1442;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#4a2069, #2f1442);
- border: 1px solid #13081b;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #3c1a55;
- box-shadow: inset 0px 0px 0px 1px rgba(224, 204, 239, 0.5), inset 0 1px 0 rgba(236, 223, 245, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #4a2069;
+}
+
+a:hover {
+ color: #662C90;
+}
+
+a:active {
+ color: #8238b7;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Violet-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Violet-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Violet-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Violet-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Yellow-Theme/pom.xml b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Yellow-Theme/pom.xml
index e711072..4297893 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Yellow-Theme/pom.xml
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Yellow-Theme/pom.xml
@@ -44,7 +44,7 @@
<includeFiles>
<include-file>
<name>assets/*</name>
- <path>../src/main/resources/assets/*</path>
+ <path>../../JewelTheme/src/main/resources/assets/*</path>
</include-file>
<include-file>
<name>defaults.css</name>
@@ -57,7 +57,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<resources>
<!-- Depends on JewelTheme SASS framework files-->
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Yellow-Theme/src/main/resources/defaults.css b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Yellow-Theme/src/main/resources/defaults.css
index cf952db..db9eff8 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Yellow-Theme/src/main/resources/defaults.css
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Yellow-Theme/src/main/resources/defaults.css
@@ -16,61 +16,69 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f4e813, #cac00a);
border: 1px solid #999207;
box-shadow: inset 0 1px 0 #f7ef5c;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(80, 76, 4, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#E2D70B, #b1a909);
@@ -82,58 +90,26 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #999207;
box-shadow: inset 0px 0px 0px 1px rgba(254, 253, 238, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f4e813, #cac00a);
- border: 1px solid #999207;
- box-shadow: inset 0 1px 0 #f7ef5c;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(80, 76, 4, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#E2D70B, #b1a909);
- border: 1px solid #817a06;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#b1a909, #817a06);
- border: 1px solid #504c04;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #999207;
- box-shadow: inset 0px 0px 0px 1px rgba(254, 253, 238, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #b1a909;
+}
+
+a:hover {
+ color: #E2D70B;
+}
+
+a:active {
+ color: #f5ea2b;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Yellow-Theme/src/main/sass/defaults.sass b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Yellow-Theme/src/main/sass/defaults.sass
index 29681e8..e751716 100644
--- a/frameworks/themes/Jewel-Light-NoFlat-Secondary-Yellow-Theme/src/main/sass/defaults.sass
+++ b/frameworks/themes/Jewel-Light-NoFlat-Secondary-Yellow-Theme/src/main/sass/defaults.sass
@@ -28,6 +28,7 @@
// Components
@import "../../../../JewelTheme/src/main/sass/components-secondary/alert"
@import "../../../../JewelTheme/src/main/sass/components-secondary/button"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/card"
@import "../../../../JewelTheme/src/main/sass/components-secondary/checkbox"
@import "../../../../JewelTheme/src/main/sass/components-secondary/controlbar"
@import "../../../../JewelTheme/src/main/sass/components-secondary/itemRenderer"
@@ -35,6 +36,6 @@
@import "../../../../JewelTheme/src/main/sass/components-secondary/list"
@import "../../../../JewelTheme/src/main/sass/components-secondary/radiobutton"
@import "../../../../JewelTheme/src/main/sass/components-secondary/slider"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textbutton"
-@import "../../../../JewelTheme/src/main/sass/components-secondary/textfield"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/text"
+@import "../../../../JewelTheme/src/main/sass/components-secondary/textinput"
@import "../../../../JewelTheme/src/main/sass/components-secondary/titlebar"
diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml
index 8d2496f..259676f 100644
--- a/frameworks/themes/JewelTheme/pom.xml
+++ b/frameworks/themes/JewelTheme/pom.xml
@@ -70,7 +70,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
<configuration>
<!-- <sassOptions>
<style>:compressed</style>
@@ -110,20 +110,6 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
- <artifactId>Basic</artifactId>
- <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.3-SNAPSHOT</version>
- <type>swc</type>
- <classifier>js</classifier>
- </dependency>
- <dependency>
- <groupId>org.apache.royale.framework</groupId>
<artifactId>Language</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/assets/apache-royale-jewel-logo-white.svg b/frameworks/themes/JewelTheme/src/main/resources/assets/apache-royale-jewel-logo-white.svg
new file mode 100644
index 0000000..f63292a
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/assets/apache-royale-jewel-logo-white.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!--
+
+ 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.
+
+-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 230 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g><text x="66.075px" y="168.312px" style="font-family:'Aclonica-Regular', 'Aclonica', serif;font-size:30.553px;fill:#fefffe;">JEWEL</text></g><g><path d="M115.101,139.018l-71.09,-97.732l49.004,-32.183l44.118,-0.121l48.856,32.356l-70.888,97.68Zm-50.211,-94.072l34.939,-23.069l29.919,0.006l35.043,23.115l-50.096,68.462l-49.805,-68.514Z" style="fill:#fefffe;"/></g></svg>
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg b/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg
deleted file mode 100644
index f95ec08..0000000
--- a/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg
+++ /dev/null
@@ -1,19 +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.
-
--->
-<svg viewBox="0 0 16 13" version="1.1" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-763, -290)"><g transform="translate(760, 285)"><g><polygon points="3 13 9 18 19 7 16 5 9 13 6 10"></polygon></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
index bce4706..c8cc2df 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -16,61 +16,66 @@
*/
@namespace j "library://ns.apache.org/royale/jewel";
@namespace "http://www.w3.org/1999/xhtml";
-.royale *, .royale *:before, .royale *:after {
- box-sizing: border-box;
-}
-
j|Application {
background: white;
font-family: "Lato", sans-serif;
color: #808080;
+ padding: 0px;
+ margin: 0px;
}
h1 {
- font-size: 2em;
+ font-size: 2.5em;
}
h2 {
- font-size: 1.5em;
+ font-size: 2em;
}
h3 {
- font-size: 1.17em;
+ font-size: 1.5em;
}
h4 {
- font-size: 15px;
+ font-size: 1.25em;
+}
+
+h5 {
+ font-size: 1em;
}
span {
- font-size: 14px;
+ font-size: 1em;
}
div {
font-size: 14px;
}
-.container {
- background: #ebebeb;
- border-radius: 10px;
- padding: 20px;
+.jewel.xsmall {
+ font-size: 0.6em !important;
}
-::-moz-focus-inner, ::-moz-focus-outer {
- border: 0;
+.jewel.small {
+ font-size: 0.8em !important;
+}
+
+.jewel {
+ font-size: 1em !important;
+}
+
+.jewel.large {
+ font-size: 1.2em !important;
+}
+
+.jewel.xlarge {
+ font-size: 1.4em !important;
}
.jewel.alert {
- display: block;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
margin: 0;
padding: 0;
- max-width: 100%;
- max-height: 100%;
- min-width: 420px;
+ min-width: 320px;
min-height: 240px;
border: 0px solid;
background-color: white;
@@ -86,19 +91,16 @@
font-size: 1.9em;
font-weight: bold;
}
-.jewel.alert .Group {
- position: absolute;
+.jewel.alert .content {
padding: 20px;
top: 50px;
- bottom: 80px;
- width: 100%;
- overflow-y: auto;
+ bottom: 84px;
}
-.jewel.alert .Group .jewel.label {
+.jewel.alert .content .jewel.label {
white-space: normal;
color: #808080;
font-size: 1.1em;
- font-weight: normal;
+ font-weight: 400;
}
.jewel.alert .jewel.controlbar {
background: linear-gradient(#e6e6e6, #cccccc);
@@ -109,44 +111,21 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 80px;
- display: flex;
- justify-content: flex-end;
-}
-.jewel.alert .jewel.controlbar > *:first-child {
- margin-left: 0px;
-}
-.jewel.alert .jewel.controlbar > * {
- flex: 0 0 100px;
- margin-left: 6px;
+ height: 84px;
}
.jewel.alert + .backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
-j|Alert {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel");
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
-}
-
-@media -royale-swf {
- j|Alert {
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead");
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead");
- }
-}
.jewel.button {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#e6e6e6, #cccccc);
border: 1px solid #b3b3b3;
box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #808080;
+ font-family: "Lato", sans-serif;
+ font-weight: bold;
+ text-transform: uppercase;
}
.jewel.button:hover, .jewel.button:hover:focus {
background: linear-gradient(#d9d9d9, silver);
@@ -158,28 +137,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: none;
border: 1px solid #b3b3b3;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
+}
+.jewel.button[disabled] {
+ font-weight: 400;
+ text-shadow: unset;
+}
+.jewel.button.icon i {
+ margin-left: 0px;
+ margin-right: 0px;
+}
+.jewel.button.iconWithSpace i {
+ margin-left: 0px;
+ margin-right: 8px;
}
.jewel.button.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#54b7f3, #24a3ef);
border: 1px solid #0f88d1;
box-shadow: inset 0 1px 0 #9bd5f8;
- border-radius: 3px;
+ border-radius: 0.25rem;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
}
.jewel.button.primary:hover, .jewel.button.primary:hover:focus {
background: linear-gradient(#3CADF1, #1198e9);
@@ -191,133 +177,228 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: none;
border: 1px solid #0f88d1;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.primary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
+ color: silver;
}
-.jewel.checkbox {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.card {
+ font-size: 1em;
+ font-weight: 400;
+ background: #ebebeb;
+ border: 0px;
+ border-radius: 10px;
+ padding: 20px;
}
-.jewel.checkbox input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+j|Card {
+ gap: 3;
+}
+
+.jewel.checkbox input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%233CADF1' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%233CADF1' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.checkbox input:checked:checked:focus, .jewel.checkbox input:checked:checked:active:focus, .jewel.checkbox input:checked:active:checked:focus, .jewel.checkbox input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%233CADF1' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #b3dffa;
- background-repeat: no-repeat;
- background-size: 90%;
- background-position: center;
- background-attachment: fixed;
+.jewel.checkbox input:checked + span::after, .jewel.checkbox input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.checkbox input:focus {
- outline: none;
+.jewel.checkbox input:focus + span::before, .jewel.checkbox input:checked:focus + span::before, .jewel.checkbox input:checked:active:focus + span::before {
+ background: linear-gradient(#cbe9fb, #9bd5f8);
border: 1px solid #0f88d1;
}
-.jewel.checkbox input[disabled] {
- cursor: unset;
+.jewel.checkbox input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.checkbox input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.checkbox input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='%23cccccc' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #f3f3f3;
- background-size: 90%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.checkbox input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Cpolygon fill='%23cccccc' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.checkbox span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
+.jewel.combobox .jewel.textinput input {
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.combobox .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.combobox .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233CADF1' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.datechooser .jewel.table {
+ background: white;
+ border: 1px solid #d9d9d9;
+ border-radius: 0.25rem;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.button {
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton {
+ border-radius: 50%;
+ color: transparent;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:hover, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:hover {
+ background: #f3f3f3;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton:active, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton:active {
+ background: #e6e6e6;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after, .jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background-size: 40%;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .prevMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%233CADF1' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell.buttonsRow .nextMonthButton::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-7.000000, -5.000000)'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='%233CADF1' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.datechooser .jewel.table .jewel.tableheadercell {
+ background: white;
+ box-shadow: none;
+ border-left: 0px;
+}
+.jewel.datechooser .jewel.table .jewel.tablecell {
+ border-top: 0px;
+ border-left: 0px;
+ padding: 4px;
+}
+
+.calendar.item {
+ font-size: 1em;
+}
+.calendar.item.dayName {
+ font-weight: 600;
+}
+.calendar.item.date {
+ color: grey;
+}
+
+.jewel.datefield .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+.jewel.datefield .jewel.button {
+ color: transparent;
+ border-bottom-left-radius: 0px;
+ border-top-left-radius: 0px;
+ border-left: 0px;
+}
+.jewel.datefield .jewel.button::after {
+ background-size: 66%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect x='0' y='0' width='22' height='22'%3E%3C/rect%3E%3Cpath d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='%23808080' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+.jewel.divider {
+ border-bottom-color: #d9d9d9;
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
+.jewel.drawer.float {
+ color: rgba(0, 0, 0, 0.8);
+}
+.jewel.drawer.float::before {
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.jewel.drawer.float .drawermain {
+ box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7);
+ transform: translateX(-104%);
+ will-change: transform;
+ width: calc(100% - 54px);
+ max-width: 280px;
+ background-color: white;
+ transition: transform 250ms 0ms;
+}
+.jewel.drawer.float.open .drawermain {
+ transform: none;
+ transition: transform 300ms 0ms;
+}
+.jewel.drawer.fixed .drawermain {
+ width: 240px;
+ transform: translateX(-104%);
+ will-change: transform;
+ transition: transform 250ms 0ms;
+ background-color: white;
+ border-left: 0;
+ border-right: 1px solid #d9d9d9;
+}
+.jewel.drawer.fixed.open {
+ width: auto;
+}
+.jewel.drawer.fixed.open .drawermain {
+ transition: transform 300ms 0ms;
+}
+
+.jewel.drawerheader {
+ background: linear-gradient(#54b7f3, #24a3ef);
+ border-bottom: 1px solid #0d79ba;
+ color: #FFFFFF;
+ padding: 16px;
+}
+.jewel.drawerheader div {
+ padding: 16px;
+}
+
.jewel.dropdownlist {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
+ width: 200px;
+ height: 38px;
+ background-color: linear-gradient(white, #f3f3f3);
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%233CADF1' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+ background-size: 8%;
+ background-position: 170px center;
+ background-repeat: no-repeat;
border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.dropdownlist:hover, .jewel.dropdownlist:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.dropdownlist:active, .jewel.dropdownlist:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
+ border-radius: 0.25rem;
}
.jewel.dropdownlist:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+ border: 1px solid #0f88d1;
}
-.jewel.dropdownlist[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
+
+.fonticon.dark {
+ color: #676767;
+}
+.fonticon.dark.inactive {
+ color: rgba(128, 128, 128, 0.3);
+}
+.fonticon.light {
+ color: white;
+}
+.fonticon.light.inactive {
+ color: rgba(255, 255, 255, 0.5);
}
.jewel.item {
- cursor: pointer;
padding: 8px;
- flex-shrink: 0;
- flex-grow: 1;
}
.jewel.item:hover {
color: #FFFFFF;
@@ -328,9 +409,24 @@
background: #24a3ef;
}
+.jewel.navigationlink {
+ margin: 0;
+ padding: 0 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 1em;
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.6);
+}
+.jewel.navigationlink:hover {
+ background: #f3f3f3;
+}
+.jewel.navigationlink:active {
+ background: #d9d9d9;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
- font-size: 14px;
+ font-size: 1em;
}
.jewel.list {
@@ -340,111 +436,113 @@
border-radius: 3px;
}
-.jewel.radiobutton {
- display: inline-block;
- margin: 0;
- padding: 0;
- position: relative;
- width: 100%;
- height: 22px;
+.jewel.navigation {
+ background-color: #ffffff;
}
-.jewel.radiobutton input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
+
+.jewel.numericstepper .jewel.textinput input {
+ width: 8em;
+ border-radius: 0.25rem 0px 0px 0.25rem;
+}
+
+@media (max-width: 992px) {
+ .jewel.numericstepper .jewel.textinput input {
+ border-radius: 0;
+ }
+}
+.jewel.spinner {
+ width: 34px;
+}
+.jewel.spinner .jewel.button {
+ padding: 0px;
+ height: 19px;
+ color: transparent;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-left: 0px;
+}
+.jewel.spinner .jewel.button.up {
+ border-bottom-right-radius: 0px;
+}
+.jewel.spinner .jewel.button.up::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+.jewel.spinner .jewel.button.down {
+ border-top-right-radius: 0px;
+ border-top-style: groove;
+}
+.jewel.spinner .jewel.button.down::after {
+ background-size: 46%;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.000000, -1.000000)' fill='%23808080' fill-rule='nonzero'%3E%3Cg transform='translate(-2.000000, 0.000000)'%3E%3Cpolygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
+}
+
+@media (max-width: 992px) {
+ .jewel.spinner .jewel.button.up {
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem 0 0 0.25rem;
+ }
+ .jewel.spinner .jewel.button.down {
+ border: 1px solid #b3b3b3;
+ border-radius: 0 0.25rem 0.25rem 0;
+ border-top-style: solid;
+ }
+}
+.jewel.radiobutton input + span::before {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 50%;
}
-.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%233CADF1' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f8f8f8;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%233CADF1' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
+ border: 1px solid transparent;
+ transition: all 0.3s ease;
+ transform: scale(0);
}
-.jewel.radiobutton input:checked:checked:focus, .jewel.radiobutton input:checked:checked:active:focus, .jewel.radiobutton input:checked:active:checked:focus, .jewel.radiobutton input:checked:active:checked:active:focus {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%233CADF1' cx='11' cy='11' r='6'></circle></g></g></svg>"), #b3dffa;
- background-repeat: no-repeat;
- background-size: 60%;
- background-position: center;
- background-attachment: fixed;
+.jewel.radiobutton input:checked + span::after, .jewel.radiobutton input:checked:active + span::after {
+ transform: scale(1);
}
-.jewel.radiobutton input:focus {
- outline: none;
+.jewel.radiobutton input:focus + span::before, .jewel.radiobutton input:checked:focus + span::before, .jewel.radiobutton input:checked:active:focus + span::before {
+ background: linear-gradient(#cbe9fb, #9bd5f8);
border: 1px solid #0f88d1;
}
-.jewel.radiobutton input[disabled] {
- cursor: unset;
+.jewel.radiobutton input[disabled] + span::before {
background: #f3f3f3;
border: 1px solid #d9d9d9;
}
.jewel.radiobutton input[disabled] + span {
- cursor: unset;
color: silver;
}
-.jewel.radiobutton input[disabled]:checked {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='%23cccccc' cx='11' cy='11' r='6'></circle></g></g></svg>"), #f3f3f3;
- background-size: 60%;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
- border: 1px solid #d9d9d9;
+.jewel.radiobutton input[disabled] + span::after {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='22' height='22' fill-opacity='0'/%3E%3Ccircle fill='%23cccccc' cx='11' cy='11' r='6'/%3E%3C/svg%3E") no-repeat center center;
}
.jewel.radiobutton span {
- cursor: pointer;
- position: relative;
- margin: 0;
- padding-left: 6px;
- vertical-align: top;
- line-height: 22px;
+ padding-left: 8px;
font-size: 16px;
}
-.jewel.slider {
- position: relative;
- height: 27px;
- display: flex !important;
- flex-direction: row;
- background: none;
-}
.jewel.slider input {
- cursor: pointer;
- user-select: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- outline: 0;
- align-self: center;
- z-index: 1;
- margin: 0 20px;
- padding: 0;
- width: calc(100% - 40px);
- height: 6px;
- background: transparent;
color: #3CADF1;
}
-.jewel.slider input::-webkit-slider-runnable-track {
- background: transparent;
+.jewel.slider input::-ms-fill-lower {
+ background: linear-gradient(#4ab3f2, #2ea7f0);
+ border: 1px solid #0f88d1;
+ box-shadow: inset 0 1px 0 #9bd5f8;
+ border-radius: 3px;
}
-.jewel.slider input::-moz-range-track {
- background: transparent;
- border: none;
+.jewel.slider input::-ms-fill-upper {
+ background: linear-gradient(white, #e6e6e6);
+ border: 1px solid #b3b3b3;
+ border-radius: 3px;
}
.jewel.slider input::-webkit-slider-thumb, .jewel.slider input::-moz-range-thumb {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
+ width: 18px;
+ height: 18px;
+ background: linear-gradient(#4ab3f2, #2ea7f0);
+ border: 1px solid #0f88d1;
+ box-shadow: inset 0 1px 0 #9bd5f8, 0 0 0 1px rgba(255, 255, 255, 0.3);
+ border-radius: 50%;
+}
+.jewel.slider input::-ms-thumb {
width: 18px;
height: 18px;
background: linear-gradient(#4ab3f2, #2ea7f0);
@@ -455,18 +553,25 @@
.jewel.slider input:active::-webkit-slider-thumb, .jewel.slider input:active::-moz-range-thumb {
transform: scale(1.4);
}
-.jewel.slider input:focus {
- outline: none;
+.jewel.slider input:active::-ms-thumb {
+ transform: scale(0.8);
}
-.jewel.slider input[disabled] {
- cursor: unset;
+.jewel.slider input[disabled]::-ms-fill-lower {
+ background: #e6e6e6;
+ border: 1px solid silver;
+ box-shadow: none;
}
-.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb {
+.jewel.slider input[disabled]::-ms-fill-upper {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+}
+.jewel.slider input[disabled]::-webkit-slider-thumb, .jewel.slider input[disabled]::-moz-range-thumb, .jewel.slider input[disabled]::-ms-thumb {
background: #f3f3f3;
border: 1px solid silver;
box-shadow: none;
}
-.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb {
+.jewel.slider input[disabled]:active::-webkit-slider-thumb, .jewel.slider input[disabled]:active::-moz-range-thumb, .jewel.slider input[disabled]:active::-ms-thumb {
transform: scale(1);
}
.jewel.slider input[disabled] + .slider-track-container > .slider-track-fill {
@@ -481,24 +586,10 @@
}
.slider-track-container {
- position: absolute;
- display: flex;
- overflow: hidden;
- transform: translate(0, -3px);
- margin: 0 29px;
- padding: 0;
top: 50%;
- left: 0;
- width: calc(100% - 58px);
- height: 6px;
- background: transparent;
- border: 0;
}
.slider-track-fill {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(#4ab3f2, #2ea7f0);
border: 1px solid #0f88d1;
box-shadow: inset 0 1px 0 #9bd5f8;
@@ -506,154 +597,242 @@
}
.slider-track {
- position: relative;
- flex: 0;
- padding: 0;
background: linear-gradient(white, #e6e6e6);
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.primary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#54b7f3, #24a3ef);
- border: 1px solid #0f88d1;
- box-shadow: inset 0 1px 0 #9bd5f8;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
-}
-.jewel.textbutton.primary:hover, .jewel.textbutton.primary:hover:focus {
- background: linear-gradient(#3CADF1, #1198e9);
- border: 1px solid #0d79ba;
-}
-.jewel.textbutton.primary:active, .jewel.textbutton.primary:active:focus {
- background: linear-gradient(#1198e9, #0d79ba);
- border: 1px solid #0a5a8a;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.primary:focus {
- outline: none;
- border: 1px solid #0f88d1;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.primary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textfield {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield input {
- -webkit-appearance: none;
- -moz-appearance: none;
- -o-appearance: none;
- appearance: none;
- margin: 0;
- padding: 0.67em 1em;
- max-width: 100%;
- flex: 1 0 auto;
- outline: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- text-align: left;
- line-height: 1.4em;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: normal;
- color: #808080;
+.jewel.simpletable {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
- border-radius: 3px;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.simpletable .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.simpletable .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.simpletable .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.table {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ box-shadow: inset 0 1px 0 white;
+ border-radius: 0.25rem;
+}
+.jewel.table .jewel.thead tr {
+ border-bottom: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tableheadercell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tableheadercell {
+ background: linear-gradient(white, #f3f3f3);
+ box-shadow: inset 0 1px 0 white;
+ font-weight: 700;
+ line-height: normal !important;
+ font-size: 1em;
+ color: #808080;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tablecell:first-of-type {
+ border-left: 0px;
+}
+.jewel.table .jewel.tablecell {
+ border-top: 1px solid #d9d9d9;
+ border-left: 1px solid #d9d9d9;
+}
+.jewel.table .jewel.tfoot .jewel.tablecell {
+ border-left: 0px;
+ background: linear-gradient(white, white);
+ box-shadow: inset 0 1px 0 white;
+}
+
+.jewel.tableitem {
+ cursor: auto;
+}
+.jewel.tableitem.selectable {
+ cursor: pointer;
+}
+.jewel.tableitem.hovered:hover {
+ color: #FFFFFF;
+ background: #3CADF1;
+}
+.jewel.tableitem.selected, .jewel.tableitem.selectable:active {
+ color: #FFFFFF;
+ background: #24a3ef;
+}
+
+a:link {
+ color: #3CADF1;
+}
+
+a:active {
+ color: #0f88d1;
+}
+
+.jewel.textinput {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textinput input {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textinput input {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield input:focus {
+.jewel.textinput input:focus {
border: 1px solid #0f88d1;
}
-.jewel.textfield input::placeholder {
+.jewel.textinput input::placeholder, .jewel.textinput input:-ms-input-placeholder {
color: #a6a6a6;
}
-.jewel.textfield input[disabled] {
- cursor: unset;
+.jewel.textinput input[disabled] {
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
}
-.jewel.textfield input[disabled]::placeholder {
+.jewel.textinput input[disabled]::placeholder, .jewel.textinput input[disabled]:-ms-input-placeholder {
+ color: silver;
+}
+.jewel.textinput input[disabled] + i {
+ color: silver;
+}
+.jewel.textinput.errorBorder input {
+ border: 1px #EC1C24 solid;
+}
+
+.jewel.textarea {
+ font-weight: 400;
+ color: #808080;
+}
+.jewel.textarea textarea {
+ font-family: "Lato", sans-serif;
+}
+.jewel.textarea textarea {
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ border-radius: 0.25rem;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
+}
+.jewel.textarea textarea:focus {
+ border: 1px solid #0f88d1;
+}
+.jewel.textarea textarea::placeholder, .jewel.textarea textarea:-ms-input-placeholder {
+ color: #a6a6a6;
+}
+.jewel.textarea textarea[disabled] {
+ background: #f3f3f3;
+ border: 1px solid #d9d9d9;
+ box-shadow: none;
+ color: silver;
+}
+.jewel.textarea textarea[disabled]::placeholder, .jewel.textarea textarea[disabled]:-ms-input-placeholder {
color: silver;
}
+.jewel.togglebutton .fonticon {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.jewel.errorTip {
+ color: #FFFFFF;
+ background: #EC1C24;
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
+ animation: slide-up 0.4s ease;
+}
+.jewel.errorTip::before {
+ border-top-color: #EC1C24;
+ border: solid 8px transparent;
+}
+@keyframes slide-up {
+ 0% {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.jewel.topappbar .topBarAppHeader {
+ background: linear-gradient(#54b7f3, #24a3ef);
+ border-top: 1px solid #83cbf6;
+ border-bottom: 1px solid #0d79ba;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
+}
+.jewel.topappbar .topBarAppHeader.has-drawer {
+ width: calc(100% - 240px);
+}
+
+.jewel.topappbarsection {
+ padding: 8px 12px;
+}
+.jewel.topappbarsection button {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 12px;
+ fill: #FFFFFF;
+ color: inherit;
+ text-shadow: 0 -1px 0 rgba(10, 90, 138, 0.7);
+}
+.jewel.topappbarsection button:hover, .jewel.topappbarsection button:hover:focus, .jewel.topappbarsection button:active, .jewel.topappbarsection button:active:focus, .jewel.topappbarsection button:focus {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+.jewel.topappbarsection button[disabled] {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+}
+
+.jewel.topappbartitle {
+ font-family: "Lato", sans-serif;
+ font-size: 1.4em !important;
+ font-weight: 800;
+ padding-left: 20px;
+ padding-right: 0;
+}
+
.jewel.button.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#f16c42, #ed4812);
border: 1px solid #be390e;
box-shadow: inset 0 1px 0 #f6a389;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
}
.jewel.button.secondary:hover, .jewel.button.secondary:hover:focus {
background: linear-gradient(#EF5A2A, #d64010);
@@ -665,71 +844,35 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: none;
border: 1px solid #be390e;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.secondary[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton.secondary {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#f16c42, #ed4812);
- border: 1px solid #be390e;
- box-shadow: inset 0 1px 0 #f6a389;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(119, 36, 9, 0.7);
-}
-.jewel.textbutton.secondary:hover, .jewel.textbutton.secondary:hover:focus {
- background: linear-gradient(#EF5A2A, #d64010);
- border: 1px solid #a6320d;
-}
-.jewel.textbutton.secondary:active, .jewel.textbutton.secondary:active:focus {
- background: linear-gradient(#d64010, #a6320d);
- border: 1px solid #772409;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.secondary:focus {
- outline: none;
- border: 1px solid #be390e;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.secondary[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
+}
+
+a:visited {
+ color: #d64010;
+}
+
+a:hover {
+ color: #EF5A2A;
+}
+
+a:active {
+ color: #f37f59;
}
.jewel.button.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 8px;
- min-width: 34px;
- min-height: 34px;
background: linear-gradient(#98cc50, #7eb435);
border: 1px solid #638c29;
box-shadow: inset 0 1px 0 #bbdd8b;
border-radius: 3px;
+ color: #FFFFFF;
+ text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
}
.jewel.button.emphasized:hover, .jewel.button.emphasized:hover:focus {
background: linear-gradient(#8CC63C, #71a02f);
@@ -741,100 +884,14 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: none;
border: 1px solid #638c29;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jewel.button.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
-}
-
-.jewel.textbutton {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#e6e6e6, #cccccc);
- border: 1px solid #b3b3b3;
- box-shadow: inset 0 1px 0 white;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #808080;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton:hover, .jewel.textbutton:hover:focus {
- background: linear-gradient(#d9d9d9, silver);
- border: 1px solid #a6a6a6;
-}
-.jewel.textbutton:active, .jewel.textbutton:active:focus {
- background: linear-gradient(silver, #a6a6a6);
- border: 1px solid #8d8d8d;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton:focus {
- outline: none;
- border: 1px solid #b3b3b3;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton[disabled] {
- cursor: unset;
background: #f3f3f3;
border: 1px solid #d9d9d9;
box-shadow: none;
color: silver;
- font-weight: normal;
- text-shadow: unset;
-}
-
-.jewel.textbutton.emphasized {
- cursor: pointer;
- display: inline-block;
- margin: 0;
- padding: 10px 16px;
- min-width: 74px;
- min-height: 34px;
- background: linear-gradient(#98cc50, #7eb435);
- border: 1px solid #638c29;
- box-shadow: inset 0 1px 0 #bbdd8b;
- border-radius: 3px;
- font-family: "Lato", sans-serif;
- font-size: 14px;
- font-weight: bold;
- color: #FFFFFF;
- text-transform: uppercase;
- text-decoration: none;
- text-shadow: 0 -1px 0 rgba(57, 81, 24, 0.7);
-}
-.jewel.textbutton.emphasized:hover, .jewel.textbutton.emphasized:hover:focus {
- background: linear-gradient(#8CC63C, #71a02f);
- border: 1px solid #557923;
-}
-.jewel.textbutton.emphasized:active, .jewel.textbutton.emphasized:active:focus {
- background: linear-gradient(#71a02f, #557923);
- border: 1px solid #395118;
- box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
-}
-.jewel.textbutton.emphasized:focus {
- outline: none;
- border: 1px solid #638c29;
- box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-.jewel.textbutton.emphasized[disabled] {
- cursor: unset;
- background: #f3f3f3;
- border: 1px solid #d9d9d9;
- box-shadow: none;
- color: silver;
- font-weight: normal;
- text-shadow: unset;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/resources/jeweltheme-as-manifest.xml b/frameworks/themes/JewelTheme/src/main/resources/jeweltheme-as-manifest.xml
index e38496a..cd0f5b4 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/jeweltheme-as-manifest.xml
+++ b/frameworks/themes/JewelTheme/src/main/resources/jeweltheme-as-manifest.xml
@@ -21,5 +21,4 @@
<componentPackage>
-
</componentPackage>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/svgs/checkbox-tick.svg b/frameworks/themes/JewelTheme/src/main/resources/svgs/checkbox-tick.svg
index e4d5091..075b904 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/svgs/checkbox-tick.svg
+++ b/frameworks/themes/JewelTheme/src/main/resources/svgs/checkbox-tick.svg
@@ -4,40 +4,34 @@
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 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,
+ 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 16 13' preserveAspectRatio='xMinYMid' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
- <g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>
- <g transform='translate(-763.000000, -350.000000)' fill='#777777'>
- <g transform='translate(760.000000, 345.000000)'>
- <g>
- <polygon points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon>
- </g>
- </g>
- </g>
- </g>
+<svg viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <rect x="0" y="0" width="22" height="22" fill-opacity="0"/>
+ <polygon fill="#{$primary-color}" points="3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625"/>
</svg>
-<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
- <g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>
- <g transform='translate(-763.000000, -290.000000)'>
- <g transform='translate(760.000000, 285.000000)'>
- <g>
- <rect id='Bounds' x='0' y='0' width='22' height='22'></rect>
- <polygon fill='#777777' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon>
- </g>
- </g>
- </g>
- </g>
-</svg>
\ No newline at end of file
+<svg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(-7.000000, -5.000000)'><rect x='0' y='0' width='22' height='22'></rect><path d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='#777777' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '></path></g></g></svg>
+
+
+<svg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(-7.000000, -5.000000)'><rect x='0' y='0' width='22' height='22'></rect><path d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='#777777' fill-rule='nonzero'></path></g></g></svg>
+
+
+<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><rect x='0' y='0' width='22' height='22'></rect><path d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='#000000' fill-rule='nonzero'></path></g></svg>
+
+
+<svg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(0.000000, -1.000000)' fill='#000000' fill-rule='nonzero'><g transform='translate(-2.000000, 0.000000)'><polygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'></polygon></g></g></g></svg>
+
+
+<svg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(0.000000, -1.000000)' fill='#000000' fill-rule='nonzero'><g transform='translate(-2.000000, 0.000000)'><polygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'></polygon></g></g></g></svg>
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/assets/close-icon.svg b/frameworks/themes/JewelTheme/src/main/resources/svgs/close-icon.svg
similarity index 100%
rename from frameworks/themes/JewelTheme/src/main/resources/assets/close-icon.svg
rename to frameworks/themes/JewelTheme/src/main/resources/svgs/close-icon.svg
diff --git a/frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg b/frameworks/themes/JewelTheme/src/main/resources/svgs/radiobutton-circle.svg
similarity index 79%
rename from frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg
rename to frameworks/themes/JewelTheme/src/main/resources/svgs/radiobutton-circle.svg
index 07beb17..b2af818 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg
+++ b/frameworks/themes/JewelTheme/src/main/resources/svgs/radiobutton-circle.svg
@@ -16,4 +16,7 @@
limitations under the License.
-->
-<svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-616, -350)"><g transform="translate(611, 345)"><g><circle cx="11" cy="11" r="6"></circle></g></g></g></svg>
\ No newline at end of file
+<svg viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <rect x="0" y="0" width="22" height="22" fill-opacity="0"/>
+ <circle fill="#{$primary-color}" cx="11" cy="11" r="6"/>
+</svg>
diff --git a/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/jewel/beads/views/LabelViewBead.mxml b/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/jewel/beads/views/LabelViewBead.mxml
index bd47055..96a86b4 100644
--- a/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/jewel/beads/views/LabelViewBead.mxml
+++ b/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/jewel/beads/views/LabelViewBead.mxml
@@ -36,7 +36,7 @@
]]>
</fx:Script>
- <j:TextButton text="THEME-LABELVIEWBEAD!!"/>
+ <j:Button text="THEME-LABELVIEWBEAD!!"/>
<!-- <js:beads>
<js:MXMLBeadViewDataBinding />
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_colors.sass b/frameworks/themes/JewelTheme/src/main/sass/_colors.sass
index 1348380..831737e 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_colors.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_colors.sass
@@ -38,4 +38,6 @@
$font-light-color: #808080
$dark-color: #595959
-$font-dark-color: #FFFFFF
\ No newline at end of file
+$font-dark-color: #FFFFFF
+
+$error-color: #EC1C24
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_functions.sass b/frameworks/themes/JewelTheme/src/main/sass/_functions.sass
index f37e986..6a27771 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_functions.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_functions.sass
@@ -18,9 +18,30 @@
////////////////////////////////////////////////////////////////////////////////
// Firefox needs colors inside inline SVGs to be encoded changing # for %23, i.e: #FF0000 needs to be %23FF0000
-@function encodecolor($string)
+// @function encodecolor($string)
+// @if type-of($string) == 'color'
+// $string: unquote('#{str-slice('' + $string, 2)}')
+// @return '%23' + $string
+
+// Function to encode a SVG to use as inline data in CSS
+// This makes SVGs work in IE11, Chrome, Firefox, Safari,...
+// It procudces a shorter result than base64
+@function encodeSVG($svgImage)
+ $svgImage: replace-text($svgImage, '<', '%3C')
+ $svgImage: replace-text($svgImage, '>', '%3E')
+ $svgImage: replace-text($svgImage, '&', '%26')
+ $svgImage: replace-text($svgImage, '#', '%23')
+ // $svgImage: replace-text($svgImage, '"', "'")
+ @return url("data:image/svg+xml,#{$svgImage}")
- @if type-of($string) == 'color'
- $string: unquote('#{str-slice('' + $string, 2)}')
-
- @return '%23' + $string
+@function replace-text($string, $search, $replace: '')
+ $index: str-index($string, $search)
+ @if $index
+ @return str-slice($string, 1, $index - 1) + $replace + replace-text(str-slice($string, $index + str-length($search)), $search, $replace)
+ @return $string
+
+
+//$animation-curve-timing-function: cubic-bezier(.3, 0, .1, 2) !default
+@function animation-standard($name, $duration, $delay: 0ms)
+ @return $name $duration $delay //$animation-curve-timing-function
+
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
index f823320..ad49fc2 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
@@ -20,47 +20,52 @@
@namespace j "library://ns.apache.org/royale/jewel"
@namespace "http://www.w3.org/1999/xhtml"
-
-.royale *, .royale *:before, .royale *:after
- box-sizing: border-box
-
j|Application
background: $background-color
font:
family: $font-stack
color: $default-font-color
+ padding: 0px
+ margin: 0px
h1
- font-size: 2em
+ font-size: 2.5em
h2
- font-size: 1.5em
+ font-size: 2em
h3
- font-size: 1.17em
+ font-size: 1.5em
h4
- font-size: 15px
+ font-size: 1.25em
+
+h5
+ font-size: 1em
span
- font-size: 14px
+ font-size: 1em
div
font-size: 14px
+//Sizes for Button, TextInput, Icons and other controls
+.jewel.xsmall
+ font:
+ size: $font-size-xsmall !important
-//temporal
-.container
- @if $dark
- background: lighten($background-color, 10%)
- @else
- background: darken($background-color, 8%)
+.jewel.small
+ font:
+ size: $font-size-small !important
+
+.jewel
+ font:
+ size: $font-size !important
- border-radius: 10px
- padding: 20px
-
-
-// Firefox
-// remove dotted outline
-::-moz-focus-inner, ::-moz-focus-outer
- border: 0
\ No newline at end of file
+.jewel.large
+ font:
+ size: $font-size-large !important
+
+.jewel.xlarge
+ font:
+ size: $font-size-xlarge !important
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
index 5bc6e7d..c309e2c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
@@ -17,30 +17,16 @@
//
////////////////////////////////////////////////////////////////////////////////
-
-=appear($val)
- -webkit-appearance: $val
- -moz-appearance: $val
- -o-appearance: $val
- appearance: $val
-
-//=trans($val...)
-// -webkit-transition: $val
-// -moz-transition: $val
-// -o-transition: $val
-// transition: $val
-
-
-=jewel-bg-border($state, $bg-color, $border-radius: 0px)
+=jewel-bg-border($state, $bg-color, $bg-border-radius: 0px)
@if ($state == "normal")
@if $flat
background: $bg-color
border: 0px solid
@else
background: linear-gradient(lighten($bg-color, 5%), darken($bg-color, 5%))
- border: 1px solid darken($bg-color, 15%)// .094em
+ border: 1px solid darken($bg-color, 15%)
box-shadow: inset 0 1px 0 lighten($bg-color, 20%)
- border-radius: $border-radius //.625em
+ border-radius: $bg-border-radius
@else if ($state == "hover")
@if $flat
@@ -48,7 +34,7 @@
border: 0px solid
@else
background: linear-gradient($bg-color, darken($bg-color, 10%))
- border: 1px solid darken($bg-color, 20%)// .094em
+ border: 1px solid darken($bg-color, 20%)
@else if ($state == "active")
@if $flat
@@ -56,7 +42,7 @@
border: 0px solid
@else
background: linear-gradient(darken($bg-color, 10%), darken($bg-color, 20%))
- border: 1px solid darken($bg-color, 30%)// .094em
+ border: 1px solid darken($bg-color, 30%)
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
@else if ($state == "focus")
@@ -73,5 +59,5 @@
border: 0px solid
@else
background: $disabled-color
- border: 1px solid $disabled-border-color// .094em
+ border: 1px solid $disabled-border-color
box-shadow: none
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
index 8ebb24c..81c1946 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -17,6 +17,12 @@
//
////////////////////////////////////////////////////////////////////////////////
+// DEVICE DIMENSIONS
+$phone: 0px
+$tablet: 768px
+$desktop: 992px
+$widescreen: 1200px
+
// TRANSITIONS
$transitions-enable: false
$transition-duration: .3s
@@ -24,9 +30,18 @@
// FONTS
$font-stack: 'Lato', sans-serif
-$font-size: 14px//0.75rem
+$font-weight-normal: 400
+
+// FONT-SIZES
+$font-size-xsmall: .6em
+$font-size-small: .8em
+$font-size: 1em
+$font-size-large: 1.2em
+$font-size-xlarge: 1.4em
// VARIABLES
+$border-radius: .25rem
+
$default-color: $light-color
@if $dark
$default-color: $dark-color
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_button.sass
index 6875321..48e07aa 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_button.sass
@@ -20,46 +20,33 @@
// Jewel Button
// Button variables
-$button-margin: 0 !default
-$button-padding: 8px !default
-$button-min-height: 34px !default
-$button-min-width: 34px !default
-
$button-border-radius: 3px
-=button-theme($button-color)
- cursor: pointer
- display: inline-block
-
- margin: $button-margin //1rem
- padding: $button-padding //.938em 1.875em
-
- min-width: $button-min-width
- min-height: $button-min-height
+=button-theme($button-color, $text-color)
+jewel-bg-border("normal", $button-color, $button-border-radius)
- @if $transitions-enable
- transition:
- duration: $transition-duration
- timing-function: $transition-timing
+ color: $text-color
+
+ @if not $flat and $text-color == $font-theme-color
+ text:
+ shadow: 0 -1px 0 rgba(darken($button-color, 30%), .7) //0 .063em
&:hover, &:hover:focus
+jewel-bg-border("hover", $button-color)
-
+
&:active, &:active:focus
+jewel-bg-border("active", $button-color)
-
- &:focus
- outline: none
- +jewel-bg-border("focus", $button-color)
+ &:focus
+ +jewel-bg-border("focus", $button-color)
+
&[disabled]
- cursor: unset
+jewel-bg-border("disabled", $button-color)
+ color: $disabled-font-color
.jewel.button.emphasized
- +button-theme($emphasized-color)
+ +button-theme($emphasized-color, $font-theme-color)
//SVGs
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_card.sass
similarity index 96%
copy from frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_card.sass
index 019c818..6f19be4 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_card.sass
@@ -17,4 +17,6 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Jewel Card
+// Card variables
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_text.sass
similarity index 93%
copy from frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_text.sass
index 019c818..39baff0 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_text.sass
@@ -17,4 +17,6 @@
//
////////////////////////////////////////////////////////////////////////////////
-
+// selected link
+// a:active
+// color: $emphasized-color
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_textbutton.sass
deleted file mode 100644
index 67c2703..0000000
--- a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_textbutton.sass
+++ /dev/null
@@ -1,82 +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.
-//
-////////////////////////////////////////////////////////////////////////////////
-
-// Jewel TextButton
-
-// TextButton variables
-$textbutton-margin: 0 !default
-$textbutton-padding: 10px 16px !default
-$textbutton-min-height: 34px !default
-$textbutton-min-width: 74px !default
-
-$textbutton-border-radius: 3px
-
-=textbutton-theme($textbutton-color, $text-color)
- cursor: pointer
- display: inline-block
-
- margin: $textbutton-margin //1rem
- padding: $textbutton-padding //.938em 1.875em
-
- min-width: $textbutton-min-width
- min-height: $textbutton-min-height
-
- +jewel-bg-border("normal", $textbutton-color, $textbutton-border-radius)
-
- @if $transitions-enable
- transition:
- duration: $transition-duration
- timing-function: $transition-timing
-
- font:
- family: $font-stack
- size: $font-size
- weight: bold
- color: $text-color
- text:
- transform: uppercase
- decoration: none
- @if not $flat and $text-color == $font-theme-color
- text:
- shadow: 0 -1px 0 rgba(darken($textbutton-color, 30%), .7) //0 .063em
-
- &:hover, &:hover:focus
- +jewel-bg-border("hover", $textbutton-color)
-
- &:active, &:active:focus
- +jewel-bg-border("active", $textbutton-color)
-
- &:focus
- outline: none
- +jewel-bg-border("focus", $textbutton-color)
-
- &[disabled]
- cursor: unset
- +jewel-bg-border("disabled", $textbutton-color)
- color: $disabled-font-color
- font:
- weight: normal
- text:
- shadow: unset
-
-.jewel.textbutton
- +textbutton-theme($default-color, $default-font-color)
-
-.jewel.textbutton.emphasized
- +textbutton-theme($emphasized-color, $font-theme-color)
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_textinput.sass
similarity index 95%
copy from frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_textinput.sass
index 019c818..b79f015 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_textinput.sass
@@ -17,4 +17,6 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Jewel textinput
+// textinput variables
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass
index d685217..687121f 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass
@@ -21,10 +21,10 @@
// Alert variables
$alert-padding: 20px
-$alert-min-width: 420px
+$alert-min-width: 320px
$alert-min-height: 240px
$alert-header-height: 50px
-$alert-footer-height: 80px
+$alert-footer-height: 84px
$alert-border-radius: 3px
$alert-title-font-size: 1.9em
@@ -32,7 +32,7 @@
$alert-title-color: darken($default-font-color, 15%)
$alert-label-font-size: 1.1em
-$alert-label-font-weight: normal
+$alert-label-font-weight: $font-weight-normal
$alert-label-color: $default-font-color
$alert-control-bar-align: 'left'
@@ -40,18 +40,17 @@
$alert-modal-opacity: .5
.jewel.alert
- display: block
- position: fixed
+ // position: fixed
- top: 50%
- left: 50%
- transform: translate(-50%, -50%)
+ // top: 50%
+ // left: 50%
+ // transform: translate(-50%, -50%)
margin: 0
padding: 0
- max-width: 100%
- max-height: 100%
+ //max-width: 100%
+ //max-height: 100%
min-width: $alert-min-width
min-height: $alert-min-height
@@ -71,13 +70,13 @@
size: $alert-title-font-size
weight: $alert-title-font-weight
- .Group
- position: absolute
+ .content
+ // position: absolute
padding: $alert-padding
top: $alert-header-height
bottom: $alert-footer-height
- width: 100%
- overflow-y: auto
+ // width: 100%
+ // overflow-y: auto
.jewel.label
white-space: normal
@@ -102,24 +101,5 @@
width: 100%
height: $alert-footer-height
- display: flex
- justify-content: flex-end
-
- > *:first-child
- margin-left: 0px
- > *
- flex: 0 0 100px
- margin-left: 6px
-
+ .backdrop
background-color: rgba(0, 0, 0, $alert-modal-opacity)
-
-j|Alert
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.AlertModel")
- IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController")
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView")
-
-@media -royale-swf
- j|Alert
- IBackgroundBead: ClassReference("org.apache.royale.html.beads.SolidBackgroundBead")
- IBorderBead: ClassReference("org.apache.royale.html.beads.SingleLineBorderBead")
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass
index 6d0b37d..5afdb92 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass
@@ -20,46 +20,63 @@
// Jewel Button
// Button variables
-$button-margin: 0 !default
-$button-padding: 8px !default
-$button-min-height: 34px !default
-$button-min-width: 34px !default
+$button-border-radius: $border-radius
-$button-border-radius: 3px
-
-=button-theme($button-color)
- cursor: pointer
- display: inline-block
-
- margin: $button-margin //1rem
- padding: $button-padding //.938em 1.875em
-
- min-width: $button-min-width
- min-height: $button-min-height
+=button-theme($button-color, $text-color)
+jewel-bg-border("normal", $button-color, $button-border-radius)
+ color: $text-color
+
+ @if not $flat and $text-color == $font-theme-color
+ text:
+ shadow: 0 -1px 0 rgba(darken($button-color, 30%), .7)
+
+ &:hover, &:hover:focus
+ +jewel-bg-border("hover", $button-color)
+
+ &:active, &:active:focus
+ +jewel-bg-border("active", $button-color)
+
+ &:focus
+ +jewel-bg-border("focus", $button-color)
+
+ &[disabled]
+ +jewel-bg-border("disabled", $button-color)
+ color: $disabled-font-color
+
+.jewel.button
+ +button-theme($default-color, $default-font-color)
+
+ // -- BUTTON LABEL
+ font:
+ family: $font-stack
+ weight: bold
+ text:
+ transform: uppercase
+
@if $transitions-enable
transition:
duration: $transition-duration
timing-function: $transition-timing
-
- &:hover, &:hover:focus
- +jewel-bg-border("hover", $button-color)
-
- &:active, &:active:focus
- +jewel-bg-border("active", $button-color)
-
- &:focus
- outline: none
- +jewel-bg-border("focus", $button-color)
&[disabled]
- cursor: unset
- +jewel-bg-border("disabled", $button-color)
+ font:
+ weight: $font-weight-normal
+ text:
+ shadow: unset
+
+ &.icon
+ i
+ margin-left: 0px
+ margin-right: 0px
-.jewel.button
- +button-theme($default-color)
+ &.iconWithSpace
+ i
+ margin-left: 0px
+ margin-right: 8px
.jewel.button.primary
- +button-theme($primary-color)
+ +button-theme($primary-color, $font-theme-color)
+
+
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
similarity index 72%
copy from frameworks/projects/Jewel/src/main/sass/components/_textfield.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
index c6252cb..fd1cd6c 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
@@ -17,10 +17,25 @@
//
////////////////////////////////////////////////////////////////////////////////
-.jewel.textfield
+// Jewel Card
-j|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")
+// Card variables
+// $card-width: 320px !default
+// $card-height: 180px !default
+.jewel.card
+ font:
+ size: $font-size
+ weight: 400
+
+ @if $dark
+ background: lighten($background-color, 10%)
+ @else
+ background: darken($background-color, 8%)
+
+ border: 0px
+ border-radius: 10px
+ padding: 20px
+
+j|Card
+ gap: 3
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass
index d7e1dbc..6aa2e75 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_checkbox.sass
@@ -20,104 +20,59 @@
// Jewel CheckBox
// CheckBox variables
-$checkbox-button-size: 22px
$checkbox-border-radius: 3px
-$checkbox-label-separation: 6px
+$checkbox-label-separation: 8px
$checkbox-label-font-size: 16px
.jewel.checkbox
- display: inline-block
-
- margin: 0
- padding: 0
-
- position: relative
- width: 100%
- height: $checkbox-button-size
-
// -- INPUT
input
- +appear(none)
- cursor: pointer
- display: inline-block
- margin: 0
- padding: 0
-
- width: $checkbox-button-size
- height: $checkbox-button-size
-
- line-height: $checkbox-button-size
-
- @if $flat
- background: $default-color
- border: 1px solid transparent
- @else
- background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
- border: 1px solid darken($default-color, 15%)
- border-radius: $checkbox-border-radius
-
- &:checked, &:checked:active
+ + span::before
@if $flat
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='#{encodecolor($primary-color)}' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), $default-color
+ background: $default-color
+ border: 1px solid transparent
@else
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='#{encodecolor($primary-color)}' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), lighten($default-color, 12%)//linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
- background-repeat: no-repeat
- background-size: 90%
- background-position: center
- background-attachment: fixed
+ background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
+ border: 1px solid darken($default-color, 15%)
+ border-radius: $checkbox-border-radius
- &:checked:focus, &:checked:active:focus
- @if $flat
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='#{encodecolor($primary-color)}' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), lighten($primary-color, 25%)
- @else
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='#{encodecolor($primary-color)}' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), lighten($primary-color, 25%)//linear-gradient(lighten($default-color, 25%), lighten($default-color, 20%))
- background-repeat: no-repeat
- background-size: 90%
- background-position: center
- background-attachment: fixed
+ + span::after
+ background: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><polygon fill='#{$primary-color}' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/></svg>") no-repeat center center
+ border: 1px solid transparent
- &:focus
- outline: none
+ transition: all .3s ease
+ transform: scale(0)
+
+ &:checked + span::after, &:checked:active + span::after
+ transform: scale(1)
+
+ &:focus + span::before, &:checked:focus + span::before, &:checked:active:focus + span::before
@if $flat
background: lighten($primary-color, 25%)
border: 1px solid transparent
@else
+ background: linear-gradient(lighten($primary-color, 30%), lighten($primary-color, 20%))
border: 1px solid darken($primary-color, 15%)
&[disabled]
- cursor: unset
- background: $disabled-color
- @if $flat
- border: 1px solid transparent
- @else
- border: 1px solid $disabled-border-color// .094em
- & + span
- cursor: unset
- color: $disabled-font-color
-
- &:checked
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='#{encodecolor(darken($disabled-color, 15%))}' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), $disabled-color
- background-size: 90%
- background-position: center
- background-repeat: no-repeat
- background-attachment: fixed
+ & + span::before
+ background: $disabled-color
@if $flat
border: 1px solid transparent
@else
border: 1px solid $disabled-border-color// .094em
-
+
+ & + span
+ color: $disabled-font-color
+
+ & + span::after
+ background: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><polygon fill='#{darken($disabled-color, 15%)}' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/></svg>") no-repeat center center
+
// -- LABEL
span
- cursor: pointer
- position: relative
-
- margin: 0
padding-left: $checkbox-label-separation
-
- vertical-align: top
- line-height: $checkbox-button-size
-
font-size: $checkbox-label-font-size
+
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_combobox.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_combobox.sass
new file mode 100644
index 0000000..0cee2b3
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_combobox.sass
@@ -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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// Jewel ComboBox
+
+// ComboBox variables
+// $combobox-input-width: 8em
+$combobox-border-radius: $border-radius
+
+.jewel.combobox
+ .jewel.textinput
+ input
+ // width: $combobox-input-width
+ border-radius: $combobox-border-radius 0px 0px $combobox-border-radius
+
+ .jewel.button
+ color: transparent
+ border-bottom-left-radius: 0px
+ border-top-left-radius: 0px
+ border-left: 0px
+
+ &::before
+
+ &::after
+ background-size: 66%
+ background: encodeSVG("<svg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(0.000000, -1.000000)' fill='#{$primary-color}' fill-rule='nonzero'><g transform='translate(-2.000000, 0.000000)'><polygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'></polygon></g></g></g></svg>") no-repeat center center
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass
new file mode 100644
index 0000000..8c40a81
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass
@@ -0,0 +1,87 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 DateChooser
+
+// DateChooser variables
+$datechooser-border-radius: $border-radius
+$datechooser-buttons-border-radius: 50%
+
+.jewel.datechooser
+
+ .jewel.table
+ background: lighten($default-color, 20%)
+ border: 1px solid $default-color
+ border-radius: $datechooser-border-radius
+ // background: lighten($default-color, 20%)
+ // border: none
+ box-shadow: none
+
+ .jewel.button
+ background: transparent
+ border: none
+ box-shadow: none
+
+ .jewel.tableheadercell.buttonsRow
+ border-bottom: 1px solid $default-color
+
+ .prevMonthButton, .nextMonthButton
+ border-radius: $datechooser-buttons-border-radius
+ color: transparent
+ &:hover
+ background: lighten($default-color, 10%)
+ &:active
+ background: lighten($default-color, 5%)
+
+ .prevMonthButton::before, .nextMonthButton::before
+
+ .prevMonthButton::after, .nextMonthButton::after
+ background-size: 40%
+
+ .prevMonthButton::after
+ background: encodeSVG("<svg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(-7.000000, -5.000000)'><rect x='0' y='0' width='22' height='22'></rect><path d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='#{$primary-color}' fill-rule='nonzero'></path></g></g></svg>") no-repeat center center
+
+
+ .nextMonthButton::after
+ background: encodeSVG("<svg viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(-7.000000, -5.000000)'><rect x='0' y='0' width='22' height='22'></rect><path d='M14.9911518,6.4116803 C14.9876664,5.88503401 14.7746504,5.53560917 14.5762939,5.35284424 C14.3779375,5.17007931 14.0808684,5.04951371 13.4608967,5.00170898 L7.01066011,11.0034834 L13.4822102,17.0014648 C14.1196233,16.9113382 14.3962441,16.8099967 14.5762939,16.6435547 C14.7563438,16.4771126 14.9881385,16.1084637 15.0074566,15.5914935 L10.0769967,11.0034834 L14.9911518,6.4116803 Z' fill='#{$primary-color}' fill-rule='nonzero' transform='translate(11.009058, 11.001587) scale(-1, 1) translate(-11.009058, -11.001587) '></path></g></g></svg>") no-repeat center center
+
+ .jewel.tableheadercell
+ @if $flat
+ background: lighten($default-color, 20%)
+ @else
+ background: lighten($default-color, 20%)
+ box-shadow: none
+ border-left: 0px
+
+ .jewel.tablecell
+ border-top: 0px
+ border-left: 0px
+ padding: 4px
+
+
+.calendar
+ &.item
+ font:
+ size: 1em
+ &.dayName
+ font:
+ weight: 600
+
+ &.date
+ color: grey
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datefield.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datefield.sass
new file mode 100644
index 0000000..357f9e3
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datefield.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 DateField
+
+// DateField variables
+$datefield-input-width: 8em
+$datefield-border-radius: $border-radius
+
+.jewel.datefield
+
+ .jewel.textinput
+ input
+ width: $datefield-input-width
+ border-radius: $datefield-border-radius 0px 0px $datefield-border-radius
+
+ .jewel.button
+ color: transparent
+ border-bottom-left-radius: 0px
+ border-top-left-radius: 0px
+ border-left: 0px
+
+ &::before
+
+ &::after
+ background-size: 66%
+ background: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><rect x='0' y='0' width='22' height='22'></rect><path d='M18.3333333,2.75 L17.4166667,2.75 L17.4166667,0.916666667 L15.5833333,0.916666667 L15.5833333,2.75 L6.41666667,2.75 L6.41666667,0.916666667 L4.58333333,0.916666667 L4.58333333,2.75 L3.66666667,2.75 C2.65833333,2.75 1.83333333,3.575 1.83333333,4.58333333 L1.83333333,19.25 C1.83333333,20.2583333 2.65833333,21.0833333 3.66666667,21.0833333 L18.3333333,21.0833333 C19.3416667,21.0833333 20.1666667,20.2583333 20.1666667,19.25 L20.1666667,4.58333333 C20.1666667,3.575 19.3416667,2.75 18.3333333,2.75 Z M18.3333333,19.25 L3.66666667,19.25 L3.66666667,7.33333333 L18.3333333,7.33333333 L18.3333333,19.25 Z' fill='#{$default-font-color}' fill-rule='nonzero'></path></g></svg>") no-repeat center center
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_divider.sass
similarity index 88%
rename from frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_textfield.sass
rename to frameworks/themes/JewelTheme/src/main/sass/components-primary/_divider.sass
index 5ac77c9..5ebc81c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_divider.sass
@@ -17,6 +17,10 @@
//
////////////////////////////////////////////////////////////////////////////////
-// Jewel Textfield
+.jewel.divider
+ border-bottom-color: $default-color
+ border-bottom-width: 1px
+ border-bottom-style: solid
-// Textfield variables
+j|Divider
+
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_drawer.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_drawer.sass
new file mode 100644
index 0000000..897deb6
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_drawer.sass
@@ -0,0 +1,106 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+$drawer-width-offset: 54px
+$drawer-max-width: 280px
+$drawer-header-padding: 16px
+$drawer-transition-close-time: 250ms
+$drawer-transition-open-time: 300ms
+$drawer-transition-close: animation-standard(transform, $drawer-transition-close-time)
+$drawer-transition-open: animation-standard(transform, $drawer-transition-open-time)
+$drawer-overlay-color: #000 !default
+$drawer-overlay-opacity: .65 !default
+
+$drawer-fixed-width: 240px
+
+.jewel.drawer
+
+ &.float
+ color: rgba(0, 0, 0, 0.8)
+
+ &::before
+ background-color: rgba($drawer-overlay-color, $drawer-overlay-opacity)
+ will-change: opacity
+ transition: animation-standard(opacity, .4s)
+
+
+ .drawermain
+ box-shadow: 0px 0px 6px 1px rgba(.7, .7, .7, .7)
+ transform: translateX(-104%)
+ will-change: transform
+ width: calc(100% - #{$drawer-width-offset})
+ max-width: $drawer-max-width
+ background-color: lighten($default-color, 20%)
+ transition: $drawer-transition-close
+
+ &.open
+ .drawermain
+ transform: none
+ transition: $drawer-transition-open
+
+ &.fixed
+
+ .drawermain
+ width: $drawer-fixed-width
+ transform: translateX(-104%)
+ // transform: translateX(-100%) translateX(-20px)
+ will-change: transform
+ //max-width: $drawer-max-width
+ transition: $drawer-transition-close
+
+ background-color: lighten($default-color, 20%)
+ border-left: 0
+ border-right: 1px solid $default-color
+
+ &.open
+ width: auto //$drawer-fixed-width
+
+ .drawermain
+ transition: $drawer-transition-open
+
+ // &.permanent
+
+// DrawerHeader
+.jewel.drawerheader
+ @if $flat
+ background: $primary-color
+ border: 0px solid
+ @else
+ background: linear-gradient(lighten($primary-color, 5%), darken($primary-color, 5%))
+ border-bottom: 1px solid darken($primary-color, 20%)
+
+ color: $font-theme-color
+ padding: $drawer-header-padding
+
+ // &::before
+ // padding-top: 9 / 16 * 100%
+
+ div
+ padding: $drawer-header-padding
+
+// DrawerContent
+.jewel.drawercontent
+
+
+
+j|Drawer
+
+j|DrawerHeader
+
+j|DrawerContent
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_dropdownlist.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_dropdownlist.sass
index 87ecfb3..fc8ac9c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_dropdownlist.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_dropdownlist.sass
@@ -20,60 +20,74 @@
// Jewel DropDownList
// DropDownList variables
-$textbutton-margin: 0 !default
-$textbutton-padding: 10px 16px !default
-$textbutton-min-height: 34px !default
-$textbutton-min-width: 74px !default
+$dropdownlist-border-radius: $border-radius
-$textbutton-border-radius: 3px
+// =dropdownlist-theme($dropdownlist-color, $text-color)
+
+// // +jewel-bg-border("normal", $dropdownlist-color, $dropdownlist-border-radius)
-=textbutton-theme($textbutton-color, $text-color)
- cursor: pointer
- display: inline-block
+// // @if $transitions-enable
+// // transition:
+// // duration: $transition-duration
+// // timing-function: $transition-timing
- margin: $textbutton-margin //1rem
- padding: $textbutton-padding //.938em 1.875em
+// font:
+// family: $font-stack
+// size: $font-size
+// // weight: bold
+// color: $text-color
+// text:
+// // transform: uppercase
+// weight: $font-weight-normal
+// decoration: none
+// @if not $flat and $text-color == $font-theme-color
+// text:
+// shadow: 0 -1px 0 rgba(darken($dropdownlist-color, 30%), .7) //0 .063em
- min-width: $textbutton-min-width
- min-height: $textbutton-min-height
+// // &:hover, &:hover:focus
+// // +jewel-bg-border("hover", $dropdownlist-color)
- +jewel-bg-border("normal", $textbutton-color, $textbutton-border-radius)
+// // &:active, &:active:focus
+// // +jewel-bg-border("active", $dropdownlist-color)
- @if $transitions-enable
- transition:
- duration: $transition-duration
- timing-function: $transition-timing
-
- font:
- family: $font-stack
- size: $font-size
- weight: bold
- color: $text-color
- text:
- transform: uppercase
- decoration: none
- @if not $flat and $text-color == $font-theme-color
- text:
- shadow: 0 -1px 0 rgba(darken($textbutton-color, 30%), .7) //0 .063em
-
- &:hover, &:hover:focus
- +jewel-bg-border("hover", $textbutton-color)
-
- &:active, &:active:focus
- +jewel-bg-border("active", $textbutton-color)
-
- &:focus
- outline: none
- +jewel-bg-border("focus", $textbutton-color)
+// &:focus
+// outline: none
+// // +jewel-bg-border("focus", $dropdownlist-color)
- &[disabled]
- cursor: unset
- +jewel-bg-border("disabled", $textbutton-color)
- color: $disabled-font-color
- font:
- weight: normal
- text:
- shadow: unset
+// &[disabled]
+// cursor: unset
+// // +jewel-bg-border("disabled", $dropdownlist-color)
+// color: $disabled-font-color
+// // font:
+// // weight: $font-weight-normal
+// // text:
+// // shadow: unset
.jewel.dropdownlist
- +textbutton-theme($default-color, $default-font-color)
\ No newline at end of file
+ // +dropdownlist-theme($default-color, $default-font-color)
+ width: 200px
+ height: 38px
+ @if $flat
+ background: $default-color
+ border: 0px solid
+ @else
+ background-color: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
+ background-image: encodeSVG("<svg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(0.000000, -1.000000)' fill='#{$primary-color}' fill-rule='nonzero'><g transform='translate(-2.000000, 0.000000)'><polygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'></polygon></g></g></g></svg>")
+ background-size: 8%
+ background-position: 170px center
+ background-repeat: no-repeat
+ border: 1px solid darken($default-color, 15%)
+ border-radius: $dropdownlist-border-radius
+
+ // &::before
+
+ // &::after
+ // background-size: 66%
+ // background: encodeSVG("<svg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(0.000000, -1.000000)' fill='#{$primary-color}' fill-rule='nonzero'><g transform='translate(-2.000000, 0.000000)'><polygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'></polygon></g></g></g></svg>") no-repeat center center
+
+
+ &:focus
+ @if $flat
+ background: lighten($primary-color, 25%)
+ @else
+ border: 1px solid darken($primary-color, 15%)
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_icons.sass
similarity index 69%
copy from frameworks/projects/Jewel/src/main/sass/components/_textfield.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components-primary/_icons.sass
index c6252cb..4a638da 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_icons.sass
@@ -17,10 +17,20 @@
//
////////////////////////////////////////////////////////////////////////////////
-.jewel.textfield
+// Jewel Icons
-j|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")
+// Icons variables
+.fonticon
+ // icons black on light background
+ &.dark
+ color: rgba(darken($font-light-color, 10%), 1)
+ &.dark
+ &.inactive
+ color: rgba($font-light-color, 0.3)
+ // icons white on dark background
+ &.light
+ color: rgba(lighten($font-dark-color, 20%), 1)
+ &.light
+ &.inactive
+ color: rgba(lighten($font-dark-color, 10%), .5)
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_itemRenderer.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_itemRenderer.sass
index 5934026..0b4fcfc 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_itemRenderer.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_itemRenderer.sass
@@ -18,15 +18,12 @@
////////////////////////////////////////////////////////////////////////////////
// Jewel ListItemRenderer
+$itemrenderer-padding: 16px
// ListItemRenderer variables
.jewel.item
- cursor: pointer
padding: 8px
- flex-shrink: 0
- flex-grow: 1
-
&:hover
color: $font-theme-color
background: $primary-color
@@ -34,3 +31,21 @@
&:active, &.selected
color: $font-theme-color
background: darken($primary-color, 5%)
+
+.jewel.navigationlink
+ margin: 0
+ padding: 0 $itemrenderer-padding
+ font:
+ family: $font-stack
+ size: $font-size
+ weight: $font-weight-normal + 100
+
+ color: rgba(black, 0.6)
+
+ &:hover
+ //color: $font-theme-color
+ background: lighten($default-color, 10%)
+
+ &:active
+ //color: $font-theme-color
+ background: $default-color
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_label.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_label.sass
index 7887e00..553888c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_label.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_label.sass
@@ -18,7 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
j|Label
- //IBeadView: ClassReference("org.apache.royale.html.beads.TextFieldView")
+ //IBeadView: ClassReference("org.apache.royale.html.beads.textinputView")
//IBeadView: ClassReference("org.apache.royale.jewel.beads.views.LabelViewBead")
.jewel.label
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_navigation.sass
similarity index 93%
copy from frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components-primary/_navigation.sass
index 019c818..66ff92d 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_navigation.sass
@@ -18,3 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
+j|Navigation
+
+.jewel.navigation
+ background-color: #ffffff
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_numericstepper.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_numericstepper.sass
new file mode 100644
index 0000000..e003904
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_numericstepper.sass
@@ -0,0 +1,77 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 NumericStepper
+
+// NumericStepper variables
+$numericstepper-input-width: 8em
+$numericstepper-border-radius: $border-radius
+
+.jewel.numericstepper
+ .jewel.textinput
+ input
+ width: $numericstepper-input-width
+ border-radius: $numericstepper-border-radius 0px 0px $numericstepper-border-radius
+
+@media (max-width: $desktop)
+ .jewel.numericstepper
+ .jewel.textinput
+ input
+ border-radius: 0
+
+
+// Jewel Spinner
+
+// Spinner variables
+.jewel.spinner
+ width: 34px
+
+ .jewel.button
+ padding: 0px
+ height: 19px
+
+ color: transparent
+ border-radius: 0 $numericstepper-border-radius $numericstepper-border-radius 0
+ border-left: 0px
+
+ &.up
+ border-bottom-right-radius: 0px
+
+ &::after
+ background-size: 46%
+ background: encodeSVG("<svg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(0.000000, -1.000000)' fill='#{$default-font-color}' fill-rule='nonzero'><g transform='translate(-2.000000, 0.000000)'><polygon points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'></polygon></g></g></g></svg>") no-repeat center center
+
+ &.down
+ border-top-right-radius: 0px
+ border-top-style: groove
+
+ &::after
+ background-size: 46%
+ background: encodeSVG("<svg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(0.000000, -1.000000)' fill='#{$default-font-color}' fill-rule='nonzero'><g transform='translate(-2.000000, 0.000000)'><polygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'></polygon></g></g></g></svg>") no-repeat center center
+
+@media (max-width: $desktop)
+ .jewel.spinner
+ .jewel.button
+ &.up
+ border: 1px solid darken($default-color, 15%)
+ border-radius: $numericstepper-border-radius 0 0 $numericstepper-border-radius
+ &.down
+ border: 1px solid darken($default-color, 15%)
+ border-radius: 0 $numericstepper-border-radius $numericstepper-border-radius 0
+ border-top-style: solid
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_radiobutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_radiobutton.sass
index 945c4b3..7ea4cd8 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_radiobutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_radiobutton.sass
@@ -20,104 +20,59 @@
// Jewel RadioButton
// RadioButton variables
-$radiobutton-button-size: 22px
$radiobutton-border-radius: 50%
-$radiobutton-label-separation: 6px
+$radiobutton-label-separation: 8px
$radiobutton-label-font-size: 16px
.jewel.radiobutton
- display: inline-block
-
- margin: 0
- padding: 0
-
- position: relative
-
- width: 100%
- height: $radiobutton-button-size
// -- INPUT
input
- +appear(none)
- cursor: pointer
- display: inline-block
-
- margin: 0
- padding: 0
-
- width: $radiobutton-button-size
- height: $radiobutton-button-size
- line-height: $radiobutton-button-size
-
- @if $flat
- background: $default-color
- border: 1px solid transparent
- @else
- background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
- border: 1px solid darken($default-color, 15%)
- border-radius: $radiobutton-border-radius
-
- &:checked, &:checked:active
+ + span::before
@if $flat
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='#{encodecolor($primary-color)}' cx='11' cy='11' r='6'></circle></g></g></svg>"), $default-color
+ background: $default-color
+ border: 1px solid transparent
@else
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='#{encodecolor($primary-color)}' cx='11' cy='11' r='6'></circle></g></g></svg>"), lighten($default-color, 12%)//linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
- background-repeat: no-repeat
- background-size: 60%
- background-position: center
- background-attachment: fixed
+ background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
+ border: 1px solid darken($default-color, 15%)
+ border-radius: $radiobutton-border-radius
- &:checked:focus, &:checked:active:focus
- @if $flat
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='#{encodecolor($primary-color)}' cx='11' cy='11' r='6'></circle></g></g></svg>"), lighten($primary-color, 25%)
- @else
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='#{encodecolor($primary-color)}' cx='11' cy='11' r='6'></circle></g></g></svg>"), lighten($primary-color, 25%) //linear-gradient(lighten($default-color, 25%), lighten($default-color, 20%))
- background-repeat: no-repeat
- background-size: 60%
- background-position: center
- background-attachment: fixed
+ + span::after
+ background: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><circle fill='#{$primary-color}' cx='11' cy='11' r='6'/></svg>") no-repeat center center
+ border: 1px solid transparent
- &:focus
- outline: none
+ transition: all .3s ease
+ transform: scale(0)
+
+ &:checked + span::after, &:checked:active + span::after
+ transform: scale(1)
+
+ &:focus + span::before, &:checked:focus + span::before, &:checked:active:focus + span::before
@if $flat
background: lighten($primary-color, 25%)
border: 1px solid transparent
@else
+ background: linear-gradient(lighten($primary-color, 30%), lighten($primary-color, 20%))
border: 1px solid darken($primary-color, 15%)
&[disabled]
- cursor: unset
- background: $disabled-color
- @if $flat
- border: 1px solid transparent
- @else
- border: 1px solid $disabled-border-color// .094em
- & + span
- cursor: unset
- color: $disabled-font-color
-
- &:checked
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='#{encodecolor(darken($disabled-color, 15%))}' cx='11' cy='11' r='6'></circle></g></g></svg>"), $disabled-color
- background-size: 60%
- background-position: center
- background-repeat: no-repeat
- background-attachment: fixed
+ & + span::before
+ background: $disabled-color
@if $flat
border: 1px solid transparent
@else
border: 1px solid $disabled-border-color// .094em
-
+
+ & + span
+ color: $disabled-font-color
+
+ & + span::after
+ background: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><circle fill='#{darken($disabled-color, 15%)}' cx='11' cy='11' r='6'/></svg>") no-repeat center center
+
// -- LABEL
span
- cursor: pointer
- position: relative
-
- margin: 0
padding-left: $radiobutton-label-separation
-
- vertical-align: top
- line-height: $radiobutton-button-size
-
font-size: $radiobutton-label-font-size
+
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass
index f0b545b..f59a358 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_slider.sass
@@ -20,54 +20,38 @@
// Jewel Slider
// Slider variables
-$slider-margin: 20px
-$slider-padding: 0
-$slider-min-width: calc(100% - #{2 * $slider-margin})
-$slider-track-min-height: 6px
+$slider-thumb-size: 18px // TODO (carlos_rovira) this is as well part of structure, need revision
$slider-track-border-radius: 3px
-$slider-thumb-size: 18px
$slider-border-radius: 50%
-$slider-container-height: #{$slider-thumb-size + round($slider-thumb-size/2)}
+$slider-scale-transform: 1.4
.jewel.slider
- position: relative
- height: $slider-container-height
- display: flex !important
- flex-direction: row
-
- background: none
-
+ // -- INPUT
input
- cursor: pointer
- user-select: none
-
- +appear(none)
- outline: 0
-
- align-self: center
- z-index: 1
-
- margin: 0 $slider-margin
- padding: $slider-padding
-
- width: $slider-min-width
- height: $slider-track-min-height
-
- background: transparent
color: $primary-color
- // TRACK
- &::-webkit-slider-runnable-track
- background: transparent
-
- &::-moz-range-track
- background: transparent
- border: none
+ &::-ms-fill-lower
+ @if $flat
+ background: $primary-color
+ border: 0
+ @else
+ background: linear-gradient(lighten($primary-color, 3%), darken($primary-color, 3%))
+ border: 1px solid darken($primary-color, 15%)
+ box-shadow: inset 0 1px 0 lighten($primary-color, 20%)
+ border-radius: $slider-track-border-radius
- // THUMB
+ &::-ms-fill-upper
+ @if $flat
+ background: $default-color
+ border: 0
+ @else
+ background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 5%))
+ border: 1px solid darken($default-color, 15%)
+ border-radius: $slider-track-border-radius
+
+ // -- THUMB
&::-webkit-slider-thumb, &::-moz-range-thumb
- +appear(none)
width: $slider-thumb-size
height: $slider-thumb-size
@if $flat
@@ -75,30 +59,46 @@
border: 0
@else
background: linear-gradient(lighten($primary-color, 3%), darken($primary-color, 3%))
- // background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><radialGradient cx='6.43382353%' cy='50%' fx='6.43382353%' fy='50%' r='85.5152803%' id='radialGradient-1'><stop stop-color='#54B7F4' offset='0%'></stop><stop stop-color='#26A3EF' offset='100%'></stop></radialGradient><circle id='path-2' cx='9' cy='9' r='9'></circle></defs><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(-655.000000, -228.000000)'><g transform='translate(611.000000, 195.000000)'><g transform='translate(10.000000, 33.000000)'><g transform='translate(34.000000, 0.000000)'><g><use fill='url(#radialGradient-1)' fill-rule='evenodd' xlink:href='#path-2'></use><circle stroke='#0F88D1' stroke-width='1' cx='9' cy='9' r='8.5'></circle></g><rect fill='#3DADF1' x='0' y='8' width='2' height='3'></rect></g></g></g></g></g></svg>")
- // background-repeat: no-repeat
- // background-size: 100%
- // background-position: center
- // background-attachment: fixed
border: 1px solid darken($primary-color, 15%)
box-shadow: inset 0 1px 0 lighten($primary-color, 20%), 0 0 0 1px lighten(rgba($default-color, 0.3), 20%)
border-radius: $slider-border-radius
-
- &:active::-webkit-slider-thumb, &:active::-moz-range-thumb
- transform: scale(1.4)
- &:focus
- outline: none
-
+ &::-ms-thumb
+ width: $slider-thumb-size
+ height: $slider-thumb-size
+ @if $flat
+ background: $primary-color
+ border: 0
+ @else
+ background: linear-gradient(lighten($primary-color, 3%), darken($primary-color, 3%))
+ border: 1px solid darken($primary-color, 15%)
+ box-shadow: inset 0 1px 0 lighten($primary-color, 20%), 0 0 0 1px lighten(rgba($default-color, 0.3), 20%)
+ border-radius: $slider-border-radius
+
+ &:active::-webkit-slider-thumb, &:active::-moz-range-thumb
+ transform: scale($slider-scale-transform)
+
+ &:active::-ms-thumb
+ transform: scale(.8) //$slider-scale-transform) in IE thumb is cut by track
+
&[disabled]
- cursor: unset
- &::-webkit-slider-thumb, &::-moz-range-thumb
+ &::-ms-fill-lower
+ background: darken($disabled-color, 5%)
+ border: 1px solid darken($disabled-border-color, 10%)
+ box-shadow: none
+
+ &::-ms-fill-upper
+ background: $disabled-color
+ border: 1px solid $disabled-border-color
+ box-shadow: none
+
+ &::-webkit-slider-thumb, &::-moz-range-thumb, &::-ms-thumb
background: $disabled-color
border: 1px solid darken($disabled-border-color, 10%)
box-shadow: none
- &:active::-webkit-slider-thumb, &:active::-moz-range-thumb
+ &:active::-webkit-slider-thumb, &:active::-moz-range-thumb, &:active::-ms-thumb
transform: scale(1.0)
+ .slider-track-container > .slider-track-fill
@@ -112,30 +112,9 @@
box-shadow: none
.slider-track-container
- position: absolute
- display: flex
-
- overflow: hidden
- transform: translate(0, -#{ round($slider-track-min-height/2) })
-
- margin: 0 #{ $slider-margin + round($slider-thumb-size/2) }
- padding: 0
-
top: $slider-border-radius
- left: 0
-
- width: calc(100% - #{ 2 * $slider-margin + $slider-thumb-size })
- height: $slider-track-min-height
-
- background: transparent
- border: 0
.slider-track-fill
- position: relative
- flex: 0
-
- padding: 0
-
@if $flat
background: $primary-color
border: 0
@@ -146,11 +125,6 @@
border-radius: $slider-track-border-radius
.slider-track
- position: relative
- flex: 0
-
- padding: 0
-
@if $flat
background: $default-color
border: 0
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass
new file mode 100644
index 0000000..16e0cfe
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_table.sass
@@ -0,0 +1,135 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 SimpleTable
+
+// SimpleTable variables
+$simpletable-border-radius: $border-radius
+
+.jewel.simpletable
+ @if $flat
+ background: $default-color
+ border: 1px solid transparent
+ @else
+ background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
+ border: 1px solid darken($default-color, 15%)
+ box-shadow: inset 0 1px 0 lighten($default-color, 20%)
+ border-radius: $simpletable-border-radius
+
+ .jewel.thead tr
+ border-bottom: 1px solid $default-color
+
+ // th
+ .jewel.tableheadercell:first-of-type
+ border-left: 0px
+ .jewel.tableheadercell
+ @if $flat
+ background: $default-color
+ @else
+ background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
+ box-shadow: inset 0 1px 0 lighten($default-color, 20%)
+ font-weight: 700
+ line-height: normal !important
+ font-size: $font-size
+ color: $default-font-color
+ border-left: 1px solid $default-color
+
+ // td
+ .jewel.tablecell:first-of-type
+ border-left: 0px
+ .jewel.tablecell
+ border-top: 1px solid $default-color
+ border-left: 1px solid $default-color
+
+ .jewel.tfoot
+ .jewel.tablecell
+ border-left: 0px
+ @if $flat
+ background: lighten($default-color, 10%)
+ @else
+ background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 20%))
+ box-shadow: inset 0 1px 0 lighten($default-color, 30%)
+ // border-bottom: 1px solid darken($light-color, 20%)
+
+
+// Jewel Table
+
+// Table variables
+$table-border-radius: $border-radius
+
+.jewel.table
+ @if $flat
+ background: $default-color
+ border: 1px solid transparent
+ @else
+ background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
+ border: 1px solid darken($default-color, 15%)
+ box-shadow: inset 0 1px 0 lighten($default-color, 20%)
+ border-radius: $table-border-radius
+
+ .jewel.thead tr
+ border-bottom: 1px solid $default-color
+
+ // th
+ .jewel.tableheadercell:first-of-type
+ border-left: 0px
+ .jewel.tableheadercell
+ @if $flat
+ background: $default-color
+ @else
+ background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
+ box-shadow: inset 0 1px 0 lighten($default-color, 20%)
+ font-weight: 700
+ line-height: normal !important
+ font-size: $font-size
+ color: $default-font-color
+ border-left: 1px solid $default-color
+
+ // td
+ .jewel.tablecell:first-of-type
+ border-left: 0px
+ .jewel.tablecell
+ border-top: 1px solid $default-color
+ border-left: 1px solid $default-color
+
+ .jewel.tfoot
+ .jewel.tablecell
+ border-left: 0px
+ @if $flat
+ background: lighten($default-color, 10%)
+ @else
+ background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 20%))
+ box-shadow: inset 0 1px 0 lighten($default-color, 30%)
+
+// .jewel.tableheadercell
+// border: 1px solid black
+
+.jewel.tableitem
+ cursor: auto
+ // padding: 12px 0px 14px 0px
+ &.selectable
+ cursor: pointer
+
+ &.hovered:hover
+ color: $font-theme-color
+ background: $primary-color
+
+ &.selected, &.selectable:active
+ color: $font-theme-color
+ background: darken($primary-color, 5%)
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_text.sass
similarity index 90%
copy from frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components-primary/_text.sass
index 019c818..0fb6f3e 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_text.sass
@@ -17,4 +17,8 @@
//
////////////////////////////////////////////////////////////////////////////////
-
+// unvisited link
+a:link
+ color: $primary-color
+a:active
+ color: darken($primary-color, 15%)
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textbutton.sass
deleted file mode 100644
index 7beb855..0000000
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textbutton.sass
+++ /dev/null
@@ -1,83 +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.
-//
-////////////////////////////////////////////////////////////////////////////////
-
-// Jewel TextButton
-
-// TextButton variables
-$textbutton-margin: 0 !default
-$textbutton-padding: 10px 16px !default
-$textbutton-min-height: 34px !default
-$textbutton-min-width: 74px !default
-
-$textbutton-border-radius: 3px
-
-=textbutton-theme($textbutton-color, $text-color)
- cursor: pointer
- display: inline-block
-
- margin: $textbutton-margin //1rem
- padding: $textbutton-padding //.938em 1.875em
-
- min-width: $textbutton-min-width
- min-height: $textbutton-min-height
-
- +jewel-bg-border("normal", $textbutton-color, $textbutton-border-radius)
-
- @if $transitions-enable
- transition:
- duration: $transition-duration
- timing-function: $transition-timing
-
- font:
- family: $font-stack
- size: $font-size
- weight: bold
- color: $text-color
- text:
- transform: uppercase
- decoration: none
- @if not $flat and $text-color == $font-theme-color
- text:
- shadow: 0 -1px 0 rgba(darken($textbutton-color, 30%), .7) //0 .063em
-
- &:hover, &:hover:focus
- +jewel-bg-border("hover", $textbutton-color)
-
- &:active, &:active:focus
- +jewel-bg-border("active", $textbutton-color)
-
- &:focus
- outline: none
- +jewel-bg-border("focus", $textbutton-color)
-
- &[disabled]
- cursor: unset
- +jewel-bg-border("disabled", $textbutton-color)
- color: $disabled-font-color
- font:
- weight: normal
- text:
- shadow: unset
-
-.jewel.textbutton
- +textbutton-theme($default-color, $default-font-color)
-
-.jewel.textbutton.primary
- +textbutton-theme($primary-color, $font-theme-color)
-
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textfield.sass
deleted file mode 100644
index f1e9b08..0000000
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textfield.sass
+++ /dev/null
@@ -1,106 +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.
-//
-////////////////////////////////////////////////////////////////////////////////
-
-// Jewel Textfield
-
-// Textfield variables
-$textfield-margin: 0 !default
-$textfield-padding: .67em 1em !default
-//10px 16px
-$textfield-min-height: 34px !default
-$textfield-min-width: 74px !default
-
-$textfield-border-radius: 3px
-
-=textfield-theme($textfield-text-color)
- position: relative
- display: inline-flex
-
- input
- +appear(none)
- margin: $textfield-margin
- padding: $textfield-padding
-
- max-width: 100%
-
- flex: 1 0 auto
- outline: none
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
-
- text-align: left
- line-height: 1.4em
-
- font:
- family: $font-stack
- size: $font-size
- weight: normal
- color: $textfield-text-color
-
- @if $flat
- background: $default-color
- border: 0px solid
- @else
- background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
- border: 1px solid darken($default-color, 15%)
- //box-shadow: none
- border-radius: $textfield-border-radius
-
- @if $transitions-enable
- transition:
- duration: $transition-duration
- timing-function: $transition-timing
-
- &:focus
- @if $flat
- background: lighten($primary-color, 25%)
- @else
- border: 1px solid darken($primary-color, 15%)
-
- //&:hover
- // padding: 5px;
- // background-color: #DFDFDF;
-
- &::placeholder
- color: lighten($textfield-text-color, 15%)
-
- &[disabled]
- cursor: unset
- @if $flat
- background: $disabled-color
- border: 0px solid
- @else
- background: $disabled-color
- border: 1px solid $disabled-border-color// .094em
- box-shadow: none
- color: $disabled-font-color
-
- &::placeholder
- color: $disabled-font-color
-
-.jewel.textfield
- @if $dark
- +textfield-theme($font-dark-color)
- @else
- +textfield-theme($font-light-color)
-
-// .jewel.textfield.primary
-// @if $dark
-// +textfield-theme($primary-color, $font-dark-color)
-// @else
-// +textfield-theme($primary-color, $font-light-color)
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass
new file mode 100644
index 0000000..c659b24
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass
@@ -0,0 +1,150 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 TextInput
+
+// TextInput variables
+$textinput-border-radius: $border-radius
+
+=textinput-theme($textinput-text-color)
+
+ color: $textinput-text-color
+
+ input
+ @if $flat
+ background: $default-color
+ border: 0px solid
+ @else
+ background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
+ border: 1px solid darken($default-color, 15%)
+ //box-shadow: none
+ border-radius: $textinput-border-radius
+
+ @if $transitions-enable
+ transition:
+ duration: $transition-duration
+ timing-function: $transition-timing
+
+ &:focus
+ @if $flat
+ background: lighten($primary-color, 25%)
+ @else
+ border: 1px solid darken($primary-color, 15%)
+
+ //&:hover
+
+ &::placeholder, &:-ms-input-placeholder
+ color: lighten($textinput-text-color, 15%)
+
+ &[disabled]
+ @if $flat
+ background: $disabled-color
+ border: 0px solid
+ @else
+ background: $disabled-color
+ border: 1px solid $disabled-border-color
+ box-shadow: none
+ color: $disabled-font-color
+
+ &::placeholder, &:-ms-input-placeholder
+ color: $disabled-font-color
+
+ + i
+ color: $disabled-font-color
+
+.jewel
+ &.textinput
+ font:
+ weight: $font-weight-normal
+
+ input
+ font:
+ family: $font-stack
+
+ @if $dark
+ +textinput-theme($font-dark-color)
+ @else
+ +textinput-theme($font-light-color)
+
+ &.errorBorder
+ input
+ border: 1px $error-color solid
+
+// Jewel TextArea
+
+// TextArea variables
+$textarea-border-radius: $border-radius
+
+=textarea-theme($textarea-text-color)
+
+ color: $textarea-text-color
+
+ textarea
+ @if $flat
+ background: $default-color
+ border: 0px solid
+ @else
+ background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
+ border: 1px solid darken($default-color, 15%)
+ //box-shadow: none
+ border-radius: $textarea-border-radius
+
+ @if $transitions-enable
+ transition:
+ duration: $transition-duration
+ timing-function: $transition-timing
+
+ &:focus
+ @if $flat
+ background: lighten($primary-color, 25%)
+ @else
+ border: 1px solid darken($primary-color, 15%)
+
+ //&:hover
+
+ &::placeholder, &:-ms-input-placeholder
+ color: lighten($textarea-text-color, 15%)
+
+ &[disabled]
+ @if $flat
+ background: $disabled-color
+ border: 0px solid
+ @else
+ background: $disabled-color
+ border: 1px solid $disabled-border-color
+ box-shadow: none
+ color: $disabled-font-color
+
+ &::placeholder, &:-ms-input-placeholder
+ color: $disabled-font-color
+
+.jewel
+ &.textarea
+ font:
+ weight: $font-weight-normal
+
+ textarea
+ font:
+ family: $font-stack
+
+ @if $dark
+ +textarea-theme($font-dark-color)
+ @else
+ +textarea-theme($font-light-color)
+
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_togglebutton.sass
similarity index 88%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to frameworks/themes/JewelTheme/src/main/sass/components-primary/_togglebutton.sass
index 75d1f7d..a812ead 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_togglebutton.sass
@@ -1,4 +1,3 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,13 +16,12 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-@namespace "http://www.w3.org/1999/xhtml";
+// Jewel Button
-.Application
-{
- padding: 10px;
- margin: 10px;
-}
-
\ No newline at end of file
+// Button variables
+
+.jewel.togglebutton
+ .fonticon
+ margin-left: 0px
+ margin-right: 8px
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tooltip.sass
similarity index 64%
copy from frameworks/projects/Jewel/src/main/sass/components/_textfield.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components-primary/_tooltip.sass
index c6252cb..031bb44 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_tooltip.sass
@@ -17,10 +17,26 @@
//
////////////////////////////////////////////////////////////////////////////////
-.jewel.textfield
+// Jewel ToolTip
-j|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")
+// ToolTip variables
+
+.jewel
+ &.errorTip
+ color: $font-theme-color
+ background: $error-color
+ box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4)
+ animation: slide-up 0.4s ease
+
+ &::before
+ border-top-color: $error-color //this the arrow
+ border: solid 8px transparent
+
+ @keyframes slide-up
+ 0%
+ opacity: 0
+ transform: translateY(20px)
+ 100%
+ opacity: 1
+ transform: translateY(0)
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_topappbar.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_topappbar.sass
new file mode 100644
index 0000000..2ac3e2d
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_topappbar.sass
@@ -0,0 +1,97 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 TopAppBar
+
+// TopAppBar variables
+$top-app-bar-row-height: 64px
+$top-app-bar-section-vertical-padding: 8px
+$top-app-bar-section-horizontal-padding: 12px
+$top-app-bar-button-padding: 12px
+
+.jewel.topappbar
+
+ .topBarAppHeader
+ @if $flat
+ background: $primary-color
+ border: 0px solid
+ @else
+ background: linear-gradient(lighten($primary-color, 5%), darken($primary-color, 5%))
+ border-top: 1px solid lighten($primary-color, 15%)
+ border-bottom: 1px solid darken($primary-color, 20%)
+ // box-shadow: 0px 0px 6px 1px rgba(.7, .7, .7, .7)
+
+ color: $font-theme-color
+
+ @if not $flat //and $text-color == $font-theme-color
+ text:
+ shadow: 0 -1px 0 rgba(darken($primary-color, 30%), .7)
+
+ // this adjust the TopAppBar width when there's a drawer to avoid content on the right get lost (overflow the screen)
+ // used by TopAppBar
+ // depends on Drawer: $drawer-fixed-width
+ &.has-drawer
+ width: calc(100% - #{$drawer-fixed-width})
+ //&.fixed
+ // transition: box-shadow 200ms linear
+
+.jewel.topappbarrow
+
+.jewel.topappbarsection
+ padding: $top-app-bar-section-vertical-padding $top-app-bar-section-horizontal-padding
+
+ &.alignRight
+
+ button
+ background: transparent
+ box-shadow: none
+ border: none
+ padding: $top-app-bar-button-padding
+ fill: $font-theme-color
+ color: inherit
+
+ @if not $flat //and $text-color == $font-theme-color
+ text:
+ shadow: 0 -1px 0 rgba(darken($primary-color, 30%), .7)
+
+ &:hover, &:hover:focus, &:active, &:active:focus, &:focus
+ background: transparent
+ box-shadow: none
+ border: none
+
+ &[disabled]
+ background: transparent
+ box-shadow: none
+ border: none
+
+.jewel.topappbartitle
+ font:
+ family: $font-stack
+ size: $font-size-xlarge !important
+ weight: $font-weight-normal * 2
+ padding-left: 20px
+ padding-right: 0
+
+j|ToolBar
+
+j|ToolBarRow
+
+j|ToolBarSection
+
+j|ToolBarTitle
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_button.sass
index 674fd65..2ebafe4 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_button.sass
@@ -20,43 +20,30 @@
// Jewel Button
// Button variables
-$button-margin: 0 !default
-$button-padding: 8px !default
-$button-min-height: 34px !default
-$button-min-width: 34px !default
-
$button-border-radius: 3px
-=button-theme($button-color)
- cursor: pointer
- display: inline-block
-
- margin: $button-margin //1rem
- padding: $button-padding //.938em 1.875em
-
- min-width: $button-min-width
- min-height: $button-min-height
+=button-theme($button-color, $text-color)
+jewel-bg-border("normal", $button-color, $button-border-radius)
- @if $transitions-enable
- transition:
- duration: $transition-duration
- timing-function: $transition-timing
+ color: $text-color
+
+ @if not $flat and $text-color == $font-theme-color
+ text:
+ shadow: 0 -1px 0 rgba(darken($button-color, 30%), .7) //0 .063em
&:hover, &:hover:focus
+jewel-bg-border("hover", $button-color)
-
+
&:active, &:active:focus
+jewel-bg-border("active", $button-color)
-
+
&:focus
- outline: none
+jewel-bg-border("focus", $button-color)
-
+
&[disabled]
- cursor: unset
+jewel-bg-border("disabled", $button-color)
-
+ color: $disabled-font-color
+
.jewel.button.secondary
- +button-theme($secondary-color)
+ +button-theme($secondary-color, $font-theme-color)
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_card.sass
similarity index 96%
rename from frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
rename to frameworks/themes/JewelTheme/src/main/sass/components-secondary/_card.sass
index 019c818..2a08931 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_card.sass
@@ -17,4 +17,6 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Jewel Card
+// Card variables
diff --git a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_text.sass
similarity index 83%
copy from examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
copy to frameworks/themes/JewelTheme/src/main/sass/components-secondary/_text.sass
index 75d1f7d..f6b627c 100644
--- a/examples/blog/BE0004_Adding_an_item_to_a_Jewel_List/src/main/resources/styles.css
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_text.sass
@@ -1,4 +1,3 @@
-/*
////////////////////////////////////////////////////////////////////////////////
//
// Licensed to the Apache Software Foundation (ASF) under one or more
@@ -17,13 +16,13 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-*/
-@namespace "http://www.w3.org/1999/xhtml";
-
-.Application
-{
- padding: 10px;
- margin: 10px;
-}
-
\ No newline at end of file
+// visited link
+a:visited
+ color: darken($secondary-color, 10%)
+// mouse over link
+a:hover
+ color: $secondary-color
+// selected link
+a:active
+ color: lighten($secondary-color, 10%)
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_textbutton.sass
deleted file mode 100644
index 12c1939..0000000
--- a/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_textbutton.sass
+++ /dev/null
@@ -1,79 +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.
-//
-////////////////////////////////////////////////////////////////////////////////
-
-// Jewel TextButton
-
-// TextButton variables
-$textbutton-margin: 0 !default
-$textbutton-padding: 10px 16px !default
-$textbutton-min-height: 34px !default
-$textbutton-min-width: 74px !default
-
-$textbutton-border-radius: 3px
-
-=textbutton-theme($textbutton-color, $text-color)
- cursor: pointer
- display: inline-block
-
- margin: $textbutton-margin //1rem
- padding: $textbutton-padding //.938em 1.875em
-
- min-width: $textbutton-min-width
- min-height: $textbutton-min-height
-
- +jewel-bg-border("normal", $textbutton-color, $textbutton-border-radius)
-
- @if $transitions-enable
- transition:
- duration: $transition-duration
- timing-function: $transition-timing
-
- font:
- family: $font-stack
- size: $font-size
- weight: bold
- color: $text-color
- text:
- transform: uppercase
- decoration: none
- @if not $flat and $text-color == $font-theme-color
- text:
- shadow: 0 -1px 0 rgba(darken($textbutton-color, 30%), .7) //0 .063em
-
- &:hover, &:hover:focus
- +jewel-bg-border("hover", $textbutton-color)
-
- &:active, &:active:focus
- +jewel-bg-border("active", $textbutton-color)
-
- &:focus
- outline: none
- +jewel-bg-border("focus", $textbutton-color)
-
- &[disabled]
- cursor: unset
- +jewel-bg-border("disabled", $textbutton-color)
- color: $disabled-font-color
- font:
- weight: normal
- text:
- shadow: unset
-
-.jewel.textbutton.secondary
- +textbutton-theme($secondary-color, $font-theme-color)
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_textfield.sass
deleted file mode 100644
index 5ac77c9..0000000
--- a/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_textfield.sass
+++ /dev/null
@@ -1,22 +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.
-//
-////////////////////////////////////////////////////////////////////////////////
-
-// Jewel Textfield
-
-// Textfield variables
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_textinput.sass
similarity index 95%
copy from frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components-secondary/_textinput.sass
index 019c818..b79f015 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_textinput.sass
@@ -17,4 +17,6 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Jewel textinput
+// textinput variables
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index 74c5d22..f1edfd7 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -28,20 +28,34 @@
// Components
@import "components-primary/alert"
@import "components-primary/button"
+@import "components-primary/card"
@import "components-primary/checkbox"
+@import "components-primary/combobox"
@import "components-primary/controlbar"
+@import "components-primary/datechooser"
+@import "components-primary/datefield"
+@import "components-primary/divider"
+@import "components-primary/drawer"
@import "components-primary/dropdownlist"
+@import "components-primary/icons"
@import "components-primary/itemRenderer"
@import "components-primary/label"
@import "components-primary/list"
+@import "components-primary/navigation"
+@import "components-primary/numericstepper"
@import "components-primary/radiobutton"
@import "components-primary/slider"
-@import "components-primary/textbutton"
-@import "components-primary/textfield"
+@import "components-primary/table"
+@import "components-primary/text"
+@import "components-primary/textinput"
@import "components-primary/titlebar"
+@import "components-primary/togglebutton"
+@import "components-primary/tooltip"
+@import "components-primary/topappbar"
@import "components-secondary/alert"
@import "components-secondary/button"
+@import "components-secondary/card"
@import "components-secondary/checkbox"
@import "components-secondary/controlbar"
@import "components-secondary/dropdownlist"
@@ -50,12 +64,13 @@
@import "components-secondary/list"
@import "components-secondary/radiobutton"
@import "components-secondary/slider"
-@import "components-secondary/textbutton"
-@import "components-secondary/textfield"
+@import "components-secondary/text"
+@import "components-secondary/textinput"
@import "components-secondary/titlebar"
@import "components-emphasized/alert"
@import "components-emphasized/button"
+@import "components-emphasized/card"
@import "components-emphasized/checkbox"
@import "components-emphasized/controlbar"
@import "components-emphasized/dropdownlist"
@@ -64,6 +79,6 @@
@import "components-emphasized/list"
@import "components-emphasized/radiobutton"
@import "components-emphasized/slider"
-@import "components-emphasized/textbutton"
-@import "components-emphasized/textfield"
+@import "components-emphasized/text"
+@import "components-emphasized/textinput"
@import "components-emphasized/titlebar"
diff --git a/frameworks/themes/MDL/pom.xml b/frameworks/themes/MDL/pom.xml
new file mode 100644
index 0000000..234a5f5
--- /dev/null
+++ b/frameworks/themes/MDL/pom.xml
@@ -0,0 +1,55 @@
+<?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.3-SNAPSHOT</version>
+ </parent>
+
+ <artifactId>MDLTheme</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <packaging>swc</packaging>
+
+ <name>Apache Royale: Framework: Themes: MDL</name>
+
+ <build>
+ <sourceDirectory>src</sourceDirectory>
+ <plugins>
+ <plugin>
+ <groupId>org.apache.royale.compiler</groupId>
+ <artifactId>royale-maven-plugin</artifactId>
+ <version>${royale.compiler.version}</version>
+ <extensions>true</extensions>
+ <configuration>
+ <includeFiles>
+ <include-file>
+ <name>defaults.css</name>
+ <path>../src/defaults.css</path>
+ </include-file>
+ </includeFiles>
+ </configuration>
+ </plugin>
+ </plugins>
+ </build>
+
+</project>
diff --git a/frameworks/themes/MDL/src/defaults.css b/frameworks/themes/MDL/src/defaults.css
new file mode 100644
index 0000000..27b77cc
--- /dev/null
+++ b/frameworks/themes/MDL/src/defaults.css
@@ -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.
+ *
+ */
+
+@namespace "library://ns.apache.org/royale/mdl";
+
+Button
+{
+}
+
+Button:hover
+{
+
+}
+
+Button:active
+{
+
+}
\ No newline at end of file
diff --git a/frameworks/themes/pom.xml b/frameworks/themes/pom.xml
index b886b43..7892eb5 100644
--- a/frameworks/themes/pom.xml
+++ b/frameworks/themes/pom.xml
@@ -34,7 +34,9 @@
<modules>
<module>Basic</module>
-
+ <module>MDL</module>
+ <module>MXRoyale</module>
+
<module>JewelTheme</module>
<module>Jewel-Light-NoFlat-Primary-Amethyst-Theme</module>
diff --git a/manualtests/ContainerTest/src/products/ProductItemRenderer.as b/manualtests/ContainerTest/src/products/ProductItemRenderer.as
index d405154..e498402 100644
--- a/manualtests/ContainerTest/src/products/ProductItemRenderer.as
+++ b/manualtests/ContainerTest/src/products/ProductItemRenderer.as
@@ -20,7 +20,7 @@
{
import org.apache.royale.html.Image;
import org.apache.royale.html.Label;
- import org.apache.royale.html.supportClasses.DataItemRenderer;
+ import org.apache.royale.core.DataItemRenderer;
public class ProductItemRenderer extends DataItemRenderer
{
diff --git a/manualtests/DataGridXcompile/src/org/apache/royale/html/customControls/beads/DataItemRendererFactoryForColumnData.as b/manualtests/DataGridXcompile/src/org/apache/royale/html/customControls/beads/DataItemRendererFactoryForColumnData.as
index eabd80d..e4b85d2 100644
--- a/manualtests/DataGridXcompile/src/org/apache/royale/html/customControls/beads/DataItemRendererFactoryForColumnData.as
+++ b/manualtests/DataGridXcompile/src/org/apache/royale/html/customControls/beads/DataItemRendererFactoryForColumnData.as
@@ -28,7 +28,7 @@
import org.apache.royale.core.ValuesManager;
import org.apache.royale.events.Event;
import org.apache.royale.events.IEventDispatcher;
- import org.apache.royale.html.supportClasses.DataItemRenderer;
+ import org.apache.royale.core.DataItemRenderer;
import org.apache.royale.html.beads.IListView;
public class DataItemRendererFactoryForColumnData implements IBead, IDataProviderItemRendererMapper
diff --git a/manualtests/ListsTest/src/products/ProductItemRenderer.as b/manualtests/ListsTest/src/products/ProductItemRenderer.as
index 315a406..5230ab6 100644
--- a/manualtests/ListsTest/src/products/ProductItemRenderer.as
+++ b/manualtests/ListsTest/src/products/ProductItemRenderer.as
@@ -20,7 +20,7 @@
{
import org.apache.royale.html.Label;
import org.apache.royale.html.Image;
- import org.apache.royale.html.supportClasses.DataItemRenderer;
+ import org.apache.royale.core.DataItemRenderer;
public class ProductItemRenderer extends DataItemRenderer
{
diff --git a/manualtests/RoyaleTest_Panel/src/MyInitialView.mxml b/manualtests/RoyaleTest_Panel/src/MyInitialView.mxml
index 5af7baf..861a1c0 100644
--- a/manualtests/RoyaleTest_Panel/src/MyInitialView.mxml
+++ b/manualtests/RoyaleTest_Panel/src/MyInitialView.mxml
@@ -152,7 +152,7 @@
<js:Spacer height="10" />
<js:Label id="slideMe" text="slider value" />
<js:Label id="slideMe2" text="{slider.value}" />
- <js:Slider id="slider" width="200"
+ <js:Slider id="slider" width="200" height="15"
valueChange="sliderChanged(slider)"
minimum="0"
maximum="100"
diff --git a/manualtests/UnitTests/src/main/royale/MyInitialView.mxml b/manualtests/UnitTests/src/main/royale/MyInitialView.mxml
index 2f157a2..375981d 100644
--- a/manualtests/UnitTests/src/main/royale/MyInitialView.mxml
+++ b/manualtests/UnitTests/src/main/royale/MyInitialView.mxml
@@ -53,7 +53,7 @@
public function runTests():void {
var label:Label;
var groups:Array = TestClasses.testClasses;
- var spaces:String = PLATFORM == "JS" ? " " : " ";
+ var spaces:String = PLATFORM == "JS" ? "\u00A0\u00A0\u00A0" : " ";
while (groups.length) {
var testGroupClass:Class = groups.shift() as Class;
var td:TypeDefinition = describeType(testGroupClass);
@@ -136,11 +136,11 @@
if (result.warning != null) {
message = spaces + result.warning +newline +message;
}
- if (PLATFORM == "JS") {
- message = escapeForHtml(message);
- var jsSpaces:String = spaces.split(" ").join(" ");
- message = message.split(spaces).join(jsSpaces);
- }
+ // if (PLATFORM == "JS") {
+ // message = escapeForHtml(message);
+ // var jsSpaces:String = spaces.split(" ").join(" ");
+ // message = message.split(spaces).join(jsSpaces);
+ // }
label.text = message;
diff --git a/manualtests/UnitTests/src/main/royale/flexUnitTests/core/BinaryDataTesterTest.as b/manualtests/UnitTests/src/main/royale/flexUnitTests/core/BinaryDataTesterTest.as
index 7e8553d..a2473f8 100644
--- a/manualtests/UnitTests/src/main/royale/flexUnitTests/core/BinaryDataTesterTest.as
+++ b/manualtests/UnitTests/src/main/royale/flexUnitTests/core/BinaryDataTesterTest.as
@@ -562,6 +562,53 @@
}
}
+ [Test]
+ public function testReadOddBytes():void
+ {
+ var ba:BinaryData = new BinaryData();
+ for (var i:int=0;i<50;i++) ba.writeByte(i);
+ ba.endian = Endian.BIG_ENDIAN;
+ ba.position=0;
+ Assert.assertEquals("BinaryData readByte: should be 0", 0, ba.readByte());
+ Assert.assertEquals("BinaryData readShort: should be 258", 258, ba.readShort());
+ Assert.assertEquals("BinaryData readInt: should be 50595078", 50595078, ba.readInt());
+ ba.endian = Endian.LITTLE_ENDIAN;
+ ba.position=0;
+ Assert.assertEquals("BinaryData readByte: should be 0", 0, ba.readByte());
+ Assert.assertEquals("BinaryData readShort: should be 513", 513, ba.readShort());
+ Assert.assertEquals("BinaryData readInt: should be 100992003", 100992003, ba.readInt());
+
+ ba = new BinaryData();
+ ba.writeByte(25);
+ ba.writeShort(65535);
+ ba.writeUnsignedInt(4294967295);
+ ba.position = 0;
+ Assert.assertEquals("BinaryData readByte: should be 25", 25, ba.readByte());
+ Assert.assertEquals("BinaryData readUnsignedShort: should be 65535", 65535, ba.readUnsignedShort());
+ Assert.assertEquals("BinaryData readInt: should be 4294967295", 4294967295, ba.readUnsignedInt());
+
+ ba = new BinaryData();
+ ba.writeByte(-25);
+ ba.writeShort(-1029);
+ ba.writeInt(-131072);
+ ba.writeFloat(12345.2);
+ ba.writeDouble(3.1415927410);
+ ba.position = 0;
+ Assert.assertEquals("BinaryData readByte: should be -25", -25, ba.readByte());
+ Assert.assertEquals("BinaryData readShort: should be -1029", -1029, ba.readShort());
+ Assert.assertEquals("BinaryData readInt: should be -131072", -131072, ba.readInt());
+ Assert.assertEquals("BinaryData readFloat: should be 12345.2", 12345.2, Math.round(ba.readFloat() * 100)/100);
+ Assert.assertEquals("BinaryData readDouble: should be 3.1415927410", 3.1415927410, ba.readDouble());
+ ba = new BinaryData()
+ ba.writeFloat(12345.2);
+ ba.position = 0;
+ Assert.assertEquals("BinaryData readFloat: should be 12345.2", 12345.2, Math.round(ba.readFloat() * 100)/100);
+ ba.position = 0;
+ ba.writeDouble(3.1415927410);
+ ba.position = 0;
+ Assert.assertEquals("BinaryData readDouble: should be 3.1415927410", 3.1415927410, ba.readDouble());
+ }
+
}
}
diff --git a/manualtests/pom.xml b/manualtests/pom.xml
index b999451..1d6887a 100644
--- a/manualtests/pom.xml
+++ b/manualtests/pom.xml
@@ -103,6 +103,20 @@
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
+ <artifactId>Basic</artifactId>
+ <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.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
<artifactId>HTML</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
diff --git a/mustella/src/main/royale/Bug.as b/mustella/src/main/royale/Bug.as
index 8f8ee81..4486071 100644
--- a/mustella/src/main/royale/Bug.as
+++ b/mustella/src/main/royale/Bug.as
@@ -18,7 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package
{
- public class Bug extends Object
+ public class Bug
{
public var bugID:String;
diff --git a/npm/README.md b/npm/README.md
index d637783..3f9fb00 100644
--- a/npm/README.md
+++ b/npm/README.md
@@ -8,7 +8,9 @@
The package: `@apache-royale/royale-js` supports only the JS/HTML output.
The package: `@apache-royale/royale-js-swf` supports both JS/HTML and SWF/AIR output.
-**For End Users**
+##For End Users
+
+**Manual installs**
To install these packages, users need to run the following commands:
@@ -17,7 +19,13 @@
npm install @apache-royale/royale-js-swf -g
```
-**For Release Managers:**
+**Automated installs**
+
+Set the environment variable: `ACCEPT_ALL_ROYALE_LICENSES=true` to accept all the licenses prompted
+by the npm installer script. This lets you use the installer in a automated environment without
+interactive prompts.
+
+##For Release Managers
To setup the publish scripts, first run:
diff --git a/npm/cli/package.json b/npm/cli/package.json
index c64ec43..ac97a45 100644
--- a/npm/cli/package.json
+++ b/npm/cli/package.json
@@ -1,6 +1,6 @@
{
"name": "@apache-royale/cli",
- "version": "0.1.0",
+ "version": "0.2.0",
"description": "CLI tool for Apache Royale",
"keywords": [
"royale",
diff --git a/npm/js-swf/dependencies/AdobeAIR.js b/npm/js-swf/dependencies/AdobeAIR.js
index 30c77da..4261212 100644
--- a/npm/js-swf/dependencies/AdobeAIR.js
+++ b/npm/js-swf/dependencies/AdobeAIR.js
@@ -96,5 +96,11 @@
AdobeAIR.install = function()
{
- promptForAdobeAIR();
+ if(process.env.ACCEPT_ALL_ROYALE_LICENSES === 'true')
+ {
+ downloadAdobeAIR();
+ }
+ else {
+ promptForAdobeAIR();
+ }
};
\ No newline at end of file
diff --git a/npm/js-swf/dependencies/FlashPlayerGlobal.js b/npm/js-swf/dependencies/FlashPlayerGlobal.js
index ca2abd2..bfb6edd 100644
--- a/npm/js-swf/dependencies/FlashPlayerGlobal.js
+++ b/npm/js-swf/dependencies/FlashPlayerGlobal.js
@@ -97,5 +97,11 @@
FlashPlayerGlobal.install = function()
{
- FlashPlayerGlobal.promptForFlashPlayerGlobal();
+ if(process.env.ACCEPT_ALL_ROYALE_LICENSES === 'true')
+ {
+ FlashPlayerGlobal.downloadFlashPlayerGlobal();
+ }
+ else {
+ FlashPlayerGlobal.promptForFlashPlayerGlobal();
+ }
};
\ No newline at end of file
diff --git a/npm/js-swf/dependencies/FlatUI.js b/npm/js-swf/dependencies/FlatUI.js
index ea4a88c..41cb89a 100644
--- a/npm/js-swf/dependencies/FlatUI.js
+++ b/npm/js-swf/dependencies/FlatUI.js
@@ -127,5 +127,11 @@
FlatUI.install = function()
{
- FlatUI.prompt();
+ if(process.env.ACCEPT_ALL_ROYALE_LICENSES === 'true')
+ {
+ FlatUI.downloadFlatUI();
+ }
+ else {
+ FlatUI.prompt();
+ }
};
\ No newline at end of file
diff --git a/npm/js-swf/package.json b/npm/js-swf/package.json
index d85b77b..c6eb651 100644
--- a/npm/js-swf/package.json
+++ b/npm/js-swf/package.json
@@ -3,8 +3,8 @@
"version": "0.9.3",
"description": "Apache Royale (formerly FlexJS)",
"keywords": [
- "royale",
- "apache royale",
+ "royale",
+ "apache royale",
"flex",
"flexjs",
"apache flexjs",
@@ -23,10 +23,8 @@
"merge-dirs": "^0.2.1",
"mkdirp": "^0.5.1",
"prompt": "^0.2.14",
- "replace": "^0.3.0",
"request": "^2.67.0",
- "unzip": "^0.1.11",
- "wrench": "^1.5.8"
+ "unzip": "^0.1.11"
},
"scripts": {
"postinstall": "node royale-asjs/npm/js-swf/dependencies/download_dependencies.js"
diff --git a/pom.xml b/pom.xml
index d2c97ed..e8dcbd1 100644
--- a/pom.xml
+++ b/pom.xml
@@ -46,7 +46,7 @@
<connection>scm:git:git@github.com:apache/royale-asjs.git</connection>
<developerConnection>scm:git:git@github.com:apache/royale-asjs.git</developerConnection>
<url>scm:git:git@github.com:apache/royale-asjs.git</url>
- <tag>HEAD</tag>
+ <tag>release/0.9.3</tag>
</scm>
<properties>
@@ -154,7 +154,7 @@
<plugin>
<groupId>nl.geodienstencentrum.maven</groupId>
<artifactId>sass-maven-plugin</artifactId>
- <version>3.5.2</version>
+ <version>3.5.4</version>
</plugin>
<plugin>
