You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/03/27 08:31:55 UTC
[royale-asjs] branch feature/jewel-ui-set updated (df9808d ->
cf3ded9)
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a change to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git.
discard df9808d removes workaround for element styles thanks to bugs apache/royale-compiler#30 and apache/royale-compiler#32 solved
discard 5540a9c this styles div, span (no dot) are not seeing in final app. the them I must to move them from theme to final app
discard b3df546 disabled labels look in check and radio
discard d1ef88d radiobutton almost done but as checbox needs of #35 solved to be finished
discard 772fb81 checkbox mostly done, but needs #35 solved to be finished
discard dc19ca3 change location of unused svgs
discard 95ceb5c initial work on checkbox. get inline svg with color variable substitution
discard 43e54be textfield flat and placeholder styles
discard 3941ee6 - Fix TextField disabled w/wout prompt - Improve focus on buttons and textfield
discard c1f9b66 some initial slider look
discard dea6c10 remove primary from textfield and integrate in border when focus
discard 3e810dd -Fix textfield -Make dark/light themes depend on only one var
discard 4f2bd77 remove wrong lines
discard c02877b - Change slider to input range (but still is unfinished , no events), and CSS compilation give problem (reported as issues) - CheckBox and Radio Button still need more progress, but still fins problems in CSS compilation that needs to be solved
discard fe6dc14 organizing and presenting example in a better way and making room for more components and examples that test look'n feel
discard ea3f27f some work on textfield
discard c712dfb more fixes
discard a2aa0bc Preparing textfield, radio and check, but there're some bugs in compiler css that prevents to complete this task
discard 10cd936 Headings and text styling, condense vars in one file
discard 5ec64a9 add transition configuration
discard 12062af - Add theme styles: flat / gradient - Add light / dark styles - Add more variables to tune final themes - Adjust some values for better looking
discard 2bec9c2 12 Color Palette Plan Almost done and working for Button, but only one project theme for now
discard 591b5aa some minor changes
discard 5117924 introduce jewel checkbox and refactor styles to make more easy handle the rest of components to be included
discard f9e119f changes to slider
discard dddab04 viewbeads inlib and theme (commented)
discard e5ed0c9 remove settings
discard a97657b fix classreference compilation with themes in pom.xml
discard 89c862f remove unused css
discard abe1e9b fix new classlist utility methods
discard 1d2fc9b Moved util functions to package-level ones
discard 702be14 Insert a ViewBead that is in JewelTheme and compiles ok, but JewelExample can't see it, why??
discard 517bf0b Refactor new styles API in UIBase to new ClassListUtil
discard 9b956e0 update css
discard 95dfd47 Decouple theme in JewelTheme and JewelBlueTheme
discard a525852 UIBase typenames and classNames proposal - working, but I'm sure will be things to modify and/or enhance for performance
discard 9090896 remove JewelThemeFontInject
discard 385188a Ant build for Jewel project, theme and example
discard f1d2710 Added HorizontalLayoutWithPaddingAndGap and VerticalLayoutWithPaddingAndGap using CSS, but gaps and padding are still in inline style, what can be ok, but can't be modified at runtime, this must be revisited some time later
discard 74d1630 HorizontalLayout and VerticalLayout in Jewel based on CSS working
discard b6d815f add TextFieldView;
discard 3a7fb7f Jewel Label added
discard 814ab68 testing Lato font in theme
discard 58d225a added html template to example until we get font injection from theme
discard e4b6e62 fix textfield error setting typeNames in constructor
discard 3aa905d update classList to fix issues. Now work totaly as expected
discard ff65d93 uibase refactor to classList
discard 1abfee0 forgotten changes in pom
discard 6428b63 redo branch due to mistake in the rebase
add afaa8c9 BrowserInfo ASDoc
new 0d9809c redo branch due to mistake in the rebase
new b438acb forgotten changes in pom
new 595f471 uibase refactor to classList
new 50de4e2 update classList to fix issues. Now work totaly as expected
new 0153d19 fix textfield error setting typeNames in constructor
new bc9abe6 added html template to example until we get font injection from theme
new 4379fb8 testing Lato font in theme
new 2ac42bb Jewel Label added
new 563e4ed add TextFieldView;
new 00145f4 HorizontalLayout and VerticalLayout in Jewel based on CSS working
new 9a5363e Added HorizontalLayoutWithPaddingAndGap and VerticalLayoutWithPaddingAndGap using CSS, but gaps and padding are still in inline style, what can be ok, but can't be modified at runtime, this must be revisited some time later
new 4a48a11 Ant build for Jewel project, theme and example
new b165856 remove JewelThemeFontInject
new 3aab244 UIBase typenames and classNames proposal - working, but I'm sure will be things to modify and/or enhance for performance
new f02b231 Decouple theme in JewelTheme and JewelBlueTheme
new 419c582 update css
new a096a0b Refactor new styles API in UIBase to new ClassListUtil
new 97f4e77 Insert a ViewBead that is in JewelTheme and compiles ok, but JewelExample can't see it, why??
new 18568d1 Moved util functions to package-level ones
new fa1f349 fix new classlist utility methods
new 3bd08b9 remove unused css
new 97283f7 fix classreference compilation with themes in pom.xml
new f96fcac remove settings
new a5860f9 viewbeads inlib and theme (commented)
new 24d3b4a changes to slider
new 9c443ca introduce jewel checkbox and refactor styles to make more easy handle the rest of components to be included
new ea8b44e some minor changes
new 38be443 12 Color Palette Plan Almost done and working for Button, but only one project theme for now
new 465f132 - Add theme styles: flat / gradient - Add light / dark styles - Add more variables to tune final themes - Adjust some values for better looking
new 6c763af add transition configuration
new 54f5e07 Headings and text styling, condense vars in one file
new 7e3fc97 Preparing textfield, radio and check, but there're some bugs in compiler css that prevents to complete this task
new a7b39df more fixes
new 75b52c1 some work on textfield
new d70be77 organizing and presenting example in a better way and making room for more components and examples that test look'n feel
new f1283ac - Change slider to input range (but still is unfinished , no events), and CSS compilation give problem (reported as issues) - CheckBox and Radio Button still need more progress, but still fins problems in CSS compilation that needs to be solved
new 8d22317 remove wrong lines
new df8c93f -Fix textfield -Make dark/light themes depend on only one var
new d10aa7d remove primary from textfield and integrate in border when focus
new a593e34 some initial slider look
new 5b299c1 - Fix TextField disabled w/wout prompt - Improve focus on buttons and textfield
new 1faf223 textfield flat and placeholder styles
new ce37f5a initial work on checkbox. get inline svg with color variable substitution
new a2db70b change location of unused svgs
new af93c92 checkbox mostly done, but needs #35 solved to be finished
new c62176c radiobutton almost done but as checbox needs of #35 solved to be finished
new b1e73b5 disabled labels look in check and radio
new 805b0ab this styles div, span (no dot) are not seeing in final app. the them I must to move them from theme to final app
new cf3ded9 removes workaround for element styles thanks to bugs apache/royale-compiler#30 and apache/royale-compiler#32 solved
This update added new revisions after undoing existing revisions.
That is to say, some revisions that were in the old version of the
branch are not in the new version. This situation occurs
when a user --force pushes a change and generates a repository
containing something like this:
* -- * -- B -- O -- O -- O (df9808d)
\
N -- N -- N refs/heads/feature/jewel-ui-set (cf3ded9)
You should already have received notification emails for all of the O
revisions, and so the following emails describe only the N revisions
from the common base, B.
Any revisions marked "omit" are not gone; other references still
refer to them. Any revisions marked "discard" are gone forever.
The 49 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
.../royale/org/apache/royale/utils/BrowserInfo.as | 50 ++++++++++++++++++++++
1 file changed, 50 insertions(+)
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 17/49: Refactor new styles API in UIBase to new
ClassListUtil
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit a096a0b33050dfeba56246138b78590e9234ca87
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Mar 15 19:22:50 2018 +0100
Refactor new styles API in UIBase to new ClassListUtil
---
.../main/royale/org/apache/royale/core/UIBase.as | 95 +--------------
.../main/royale/org/apache/royale/jewel/Button.as | 8 +-
.../royale/org/apache/royale/util/ClassListUtil.as | 131 +++++++++++++++++++++
3 files changed, 139 insertions(+), 95 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as
index 1a04fcf..de5e089 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as
@@ -37,6 +37,7 @@ package org.apache.royale.core
{
import org.apache.royale.html.util.addElementToWrapper;
import org.apache.royale.utils.CSSUtils;
+ import org.apache.royale.util.ClassListUtil;
}
/**
@@ -1074,6 +1075,7 @@ package org.apache.royale.core
return StringUtil.trim((_className ? _className : "") + " " + (typeNames ? typeNames : ""));
}
+
/**
* Sets the component styles in JS
*
@@ -1083,99 +1085,10 @@ package org.apache.royale.core
COMPILE::JS
protected function setClassName(value:String):void
{
- addStyles(value);
- }
-
- /**
- * 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
- protected function addStyles(value:String):void
- {
- if (value == "") return;
-
- if (value.indexOf(" ") >= 0)
- {
- var classes:Array = value.split(" ");
- element.classList.add.apply(element.classList, classes);
- } else
- {
- 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
- protected function removeStyles(value:String):void
- {
- if (value == "") return;
-
- if (value.indexOf(" ") >= 0)
- {
- var classes:Array = value.split(" ");
- element.classList.remove.apply(element.classList, classes);
- } else
- {
- 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
- protected function toggleStyle(value:String, force:Boolean = false):Boolean
- {
- return 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
- protected function removeAllStyles():void
- {
- var classList:DOMTokenList = element.classList;
- var i:int;
- for( i = classList.length; i > 0; i-- )
- {
- if(typeNames.indexOf(classList[i]) != 0)
- {
- classList.remove(classList[i]);
- }
- }
+ ClassListUtil.addStyles(this, value);
}
+
/**
* @copy org.apache.royale.core.IUIBase#element
*
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 1fea4bc..5e4dba9 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
@@ -23,7 +23,7 @@ package org.apache.royale.jewel
COMPILE::JS
{
import org.apache.royale.core.WrappedHTMLElement;
- import org.apache.royale.html.util.addElementToWrapper;
+ import org.apache.royale.util.ClassListUtil;
}
/**
@@ -88,7 +88,7 @@ package org.apache.royale.jewel
COMPILE::JS
{
- toggleStyle("primary", value);
+ ClassListUtil.toggleStyle(this, "primary", value);
}
}
}
@@ -118,7 +118,7 @@ package org.apache.royale.jewel
COMPILE::JS
{
- toggleStyle("secondary", value);
+ ClassListUtil.toggleStyle(this, "secondary", value);
}
}
}
@@ -148,7 +148,7 @@ package org.apache.royale.jewel
COMPILE::JS
{
- toggleStyle("emphasized", value);
+ ClassListUtil.toggleStyle(this, "emphasized", value);
}
}
}
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
new file mode 100644
index 0000000..abbdee0
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/util/ClassListUtil.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.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
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 49/49: removes workaround for element styles thanks
to bugs apache/royale-compiler#30 and apache/royale-compiler#32 solved
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit cf3ded96b0a3c350d2382d48f9e2b75ff63baec9
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Mar 27 10:02:00 2018 +0200
removes workaround for element styles thanks to bugs apache/royale-compiler#30 and apache/royale-compiler#32 solved
---
.../src/main/resources/jewel-example-styles.css | 7 +++-
.../src/main/royale/RadioButtonPlayGround.mxml | 2 +-
.../royale/org/apache/royale/jewel/CheckBox.as | 4 +-
.../royale/org/apache/royale/jewel/RadioButton.as | 4 +-
.../main/royale/org/apache/royale/jewel/Slider.as | 2 +-
.../royale/org/apache/royale/jewel/TextField.as | 2 +-
.../JewelTheme/src/main/resources/defaults.css | 48 +++++++++++-----------
.../src/main/sass/components/_checkbox.sass | 4 +-
.../src/main/sass/components/_radiobutton.sass | 4 +-
.../src/main/sass/components/_slider.sass | 2 +-
.../src/main/sass/components/_textfield.sass | 2 +-
11 files changed, 42 insertions(+), 39 deletions(-)
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 003d6c8..c2ea379 100644
--- a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
+++ b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
@@ -21,10 +21,13 @@
@namespace "http://www.w3.org/1999/xhtml";
-
+body{
+ background: #fff;
+}
.container {
background: #efefef;
border-radius: 10px;
padding: 20px;
-}
\ No newline at end of file
+}
+
\ No newline at end of file
diff --git a/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml
index 3d34b18..9e6806d 100644
--- a/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml
@@ -30,7 +30,7 @@ limitations under the License.
<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"/>
+ <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">
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 d69fad6..5c78dbc 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
@@ -99,11 +99,11 @@ package org.apache.royale.jewel
input = addElementToWrapper(this,'input') as HTMLInputElement;
input.type = 'checkbox';
- input.className = 'input';
+ //input.className = 'input';
label.appendChild(input);
checkbox = document.createElement('span') as HTMLSpanElement;
- checkbox.className = 'span';
+ //checkbox.className = 'span';
label.appendChild(checkbox);
positioner = label as WrappedHTMLElement;
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 19d5981..b36b51a 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
@@ -316,14 +316,14 @@ package org.apache.royale.jewel
icon = addElementToWrapper(this,'input') as HTMLInputElement;
icon.type = "radio";
- icon.className = 'input';
+ //icon.className = 'input';
icon.id = '_radio_' + + Math.random();
label.appendChild(icon);
textNode = document.createTextNode('') as Text;
radio = document.createElement('span') as HTMLSpanElement;
- radio.className = 'span';
+ //radio.className = 'span';
radio.appendChild(textNode);
label.appendChild(radio);
//radio.addEventListener('mouseover', mouseOverHandler, false);
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 0cb0101..a9ddbbe 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
@@ -184,7 +184,7 @@ package org.apache.royale.jewel
var input:HTMLInputElement = addElementToWrapper(this,'input') as HTMLInputElement;
input.setAttribute('type', 'range');
- input.className = "slider";
+ //input.className = "slider";
//attach input handler to dispatch royale change event when user write in textinput
//goog.events.listen(element, 'change', killChangeHandler);
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
index 1c12711..a5d5c1c 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/TextField.as
@@ -82,7 +82,7 @@ package org.apache.royale.jewel
input = addElementToWrapper(this,'input') as HTMLInputElement;
input.setAttribute('type', 'text');
- input.className = "input";
+ //input.className = "input";
//attach input handler to dispatch royale change event when user write in textinput
//goog.events.listen(element, 'change', killChangeHandler);
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 8f90431..e23ebd2 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -196,7 +196,7 @@ div {
width: 100%;
height: 22px;
}
-.jewel.checkbox .input {
+.jewel.checkbox input {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
@@ -212,26 +212,26 @@ div {
border: 1px solid #b3b3b3;
border-radius: 3px;
}
-.jewel.checkbox .input:checked, .jewel.checkbox .input:checked:active {
+.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)'><g><polygon fill='#3CADF1' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></g></svg>");
background-repeat: no-repeat;
background-size: 90%;
background-position: center;
background-attachment: fixed;
}
-.jewel.checkbox .input:focus {
+.jewel.checkbox input:focus {
outline: none;
border: 1px solid #0f88d1;
}
-.jewel.checkbox .input[disabled] {
+.jewel.checkbox input[disabled] {
cursor: unset;
border: 1px solid #c6c6c6;
background: #F9F9F9;
}
-.jewel.checkbox .input[disabled] + .span {
+.jewel.checkbox input[disabled] + .span {
color: #c6c6c6;
}
-.jewel.checkbox .input[disabled]:checked {
+.jewel.checkbox input[disabled]:checked {
border: 1px solid #c6c6c6;
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)'><g><polygon fill='lightgray' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></g></svg>");
background-size: 90%;
@@ -239,7 +239,7 @@ div {
background-repeat: no-repeat;
background-attachment: fixed;
}
-.jewel.checkbox .span {
+.jewel.checkbox span {
cursor: pointer;
position: absolute;
margin: 0;
@@ -262,7 +262,7 @@ div {
width: 100%;
height: 22px;
}
-.jewel.radiobutton .input {
+.jewel.radiobutton input {
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
@@ -278,26 +278,26 @@ div {
border: 1px solid #b3b3b3;
border-radius: 50%;
}
-.jewel.radiobutton .input:checked, .jewel.radiobutton .input:checked:active {
+.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)'><g><circle fill='#3CADF1' cx='11' cy='11' r='6'></circle></g></g></g></svg>");
background-repeat: no-repeat;
background-size: 60%;
background-position: center;
background-attachment: fixed;
}
-.jewel.radiobutton .input:focus {
+.jewel.radiobutton input:focus {
outline: none;
border: 1px solid #0f88d1;
}
-.jewel.radiobutton .input[disabled] {
+.jewel.radiobutton input[disabled] {
cursor: unset;
border: 1px solid #c6c6c6;
background: #F9F9F9;
}
-.jewel.radiobutton .input[disabled] + .span {
+.jewel.radiobutton input[disabled] + .span {
color: #c6c6c6;
}
-.jewel.radiobutton .input[disabled]:checked {
+.jewel.radiobutton input[disabled]:checked {
border: 1px solid #c6c6c6;
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)'><g><circle fill='lightgray' cx='11' cy='11' r='6'></circle></g></g></g></svg>");
background-size: 60%;
@@ -305,7 +305,7 @@ div {
background-repeat: no-repeat;
background-attachment: fixed;
}
-.jewel.radiobutton .span {
+.jewel.radiobutton span {
cursor: pointer;
position: absolute;
margin: 0;
@@ -314,7 +314,7 @@ div {
line-height: 22px;
}
-.jewel.slider .slider {
+.jewel.slider input {
-webkit-appearance: none;
width: 100%;
height: 15px;
@@ -325,13 +325,13 @@ div {
-webkit-transition: 0.2s;
transition: opacity 0.2s;
}
-.jewel.slider .slider:hover {
+.jewel.slider input:hover {
opacity: 1;
}
-.jewel.slider .slider:focus {
+.jewel.slider input:focus {
outline: none;
}
-.jewel.slider .slider::-webkit-slider-thumb {
+.jewel.slider input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
@@ -340,7 +340,7 @@ div {
background: #3CADF1;
cursor: pointer;
}
-.jewel.slider .slider::-moz-range-thumb {
+.jewel.slider input::-moz-range-thumb {
width: 15px;
height: 15px;
border-radius: 50%;
@@ -523,7 +523,7 @@ div {
position: relative;
display: inline-flex;
}
-.jewel.textfield .input {
+.jewel.textfield input {
margin: 0;
padding: 0.67em 1em;
max-width: 100%;
@@ -542,20 +542,20 @@ div {
transition-duration: 0.3s;
transition-timing-function: easein;
}
-.jewel.textfield .input:focus {
+.jewel.textfield input:focus {
border: 1px solid #0f88d1;
}
-.jewel.textfield .input::placeholder {
+.jewel.textfield input::placeholder {
color: #a6a6a6;
}
-.jewel.textfield .input[disabled] {
+.jewel.textfield input[disabled] {
cursor: unset;
border: 1px solid #c6c6c6;
background: #F9F9F9;
box-shadow: none;
color: #c6c6c6;
}
-.jewel.textfield .input[disabled]::placeholder {
+.jewel.textfield input[disabled]::placeholder {
color: #c6c6c6;
}
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
index e79c952..92f4fd0 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
@@ -39,7 +39,7 @@ $checkbox-label-font-size: 16px
height: $checkbox-button-size
// -- INPUT
- .input
+ input
+appear(none)
cursor: pointer
display: inline-block
@@ -102,7 +102,7 @@ $checkbox-label-font-size: 16px
//background: $disabled-color
// -- LABEL
- .span
+ span
cursor: pointer
position: absolute
margin: 0
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
index a224f28..d45a56a 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
@@ -39,7 +39,7 @@ $radiobutton-label-font-size: 16px
height: $radiobutton-button-size
// -- INPUT
- .input
+ input
+appear(none)
cursor: pointer
display: inline-block
@@ -93,7 +93,7 @@ $radiobutton-label-font-size: 16px
background-attachment: fixed
// -- LABEL
- .span
+ span
cursor: pointer
position: absolute
margin: 0
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass
index f92fdd0..115df2c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass
@@ -19,7 +19,7 @@
.jewel.slider
- .slider
+ input
-webkit-appearance: none
width: 100%
height: 15px
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
index 4165f6d..3e04d9a 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
@@ -32,7 +32,7 @@ $textfield-border-radius: 3px
position: relative
display: inline-flex
- .input
+ input
margin: $textfield-margin
padding: $textfield-padding
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 26/49: introduce jewel checkbox and refactor styles
to make more easy handle the rest of components to be included
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 9c443caa4e17eac3ac0e6f2a43627d7e997769f9
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Mar 19 12:16:16 2018 +0100
introduce jewel checkbox and refactor styles to make more easy handle the rest of components to be included
---
.../src/main/royale/TextInputPlayGround.mxml | 2 +-
.../projects/Jewel/src/main/resources/defaults.css | 32 ++-
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../projects/Jewel/src/main/royale/JewelClasses.as | 4 +-
.../royale/org/apache/royale/jewel/CheckBox.as | 230 +++++++++++++++++++++
.../{RadioButtonView.as => views/CheckBoxView.as} | 205 +++++++++---------
.../jewel/beads/{ => views}/RadioButtonView.as | 2 +-
.../projects/Jewel/src/main/sass/_global.sass | 37 ----
.../Jewel/src/main/sass/components/_button.sass | 20 ++
.../Jewel/src/main/sass/components/_check.sass | 27 +++
.../Jewel/src/main/sass/components/_label.sass | 27 +++
.../Jewel/src/main/sass/components/_radio.sass | 18 ++
.../sass/{_global.sass => components/_slider.sass} | 38 +---
.../src/main/sass/components/_textbutton.sass | 20 ++
.../Jewel/src/main/sass/components/_textfield.sass | 24 +++
.../projects/Jewel/src/main/sass/defaults.sass | 10 +
16 files changed, 523 insertions(+), 174 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index 489bfb9..cb236e9 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -24,5 +24,5 @@ limitations under the License.
<j:RadioButton/>
<j:TextField text="Text Input" width="120" height="40"/>
-
+ <j:CheckBox/>
</js:Group>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 583ef87..627c8e3 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -30,16 +30,24 @@
display: block !important;
}
-Label {
- iBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
+@media -royale-swf {
+ CheckBox {
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.ToggleButtonModel");
+ IBeadView: ClassReference("org.apache.royale.html.beads.CheckBoxView");
+ }
}
-
.jewel.label {
white-space: nowrap;
}
-TextField {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
+Label {
+ iBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
+}
+
+.jewel.slider {
+ width: 100px;
+ height: 30px;
+ position: relative;
}
Slider {
@@ -49,12 +57,6 @@ Slider {
IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController");
}
-.jewel.slider {
- width: 100px;
- height: 30px;
- position: relative;
-}
-
.SliderTrack {
position: absolute;
}
@@ -74,6 +76,14 @@ Slider {
IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel");
IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView");
}
+
+ CheckBox {
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.ToggleButtonModel");
+ IBeadView: ClassReference("org.apache.royale.html.beads.CheckBoxView");
+ }
+}
+TextField {
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index c0840b8..7799373 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -28,6 +28,7 @@
<component id="TextField" class="org.apache.royale.jewel.TextField"/>
<component id="Slider" class="org.apache.royale.jewel.Slider"/>
<component id="RadioButton" class="org.apache.royale.jewel.RadioButton"/>
+ <component id="CheckBox" class="org.apache.royale.jewel.CheckBox"/>
<component id="Disabled" class="org.apache.royale.jewel.beads.Disabled"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index 4f909d2..41f586d 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -36,7 +36,9 @@ package
import org.apache.royale.jewel.beads.SliderThumbView; SliderThumbView;
import org.apache.royale.jewel.beads.SliderTrackView; SliderTrackView;
- import org.apache.royale.jewel.beads.RadioButtonView; RadioButtonView;
+ import org.apache.royale.jewel.beads.views.RadioButtonView; RadioButtonView;
+ import org.apache.royale.jewel.beads.views.CheckBoxView; CheckBoxView;
+
}
import org.apache.royale.jewel.beads.layouts.HorizontalLayout; HorizontalLayout;
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
new file mode 100644
index 0000000..ee8dbff
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/CheckBox.as
@@ -0,0 +1,230 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT 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.CheckBox;
+ import org.apache.royale.core.IToggleButtonModel;
+
+ 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.core.CSSClassList;
+ }
+
+ /**
+ * The CheckBox class provides a Jewel UI-like appearance for a CheckBox.
+ *
+ * A checkbox consists of a small square and, typically, text that clearly
+ * communicates a binary condition that will be set or unset when the user
+ * clicks or touches it.
+ * Checkboxes typically, but not necessarily, appear in groups, and can be
+ * selected and deselected individually. The Jewel checkbox component allows
+ * you to add display and click effects.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class CheckBox extends org.apache.royale.html.CheckBox
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function CheckBox()
+ {
+ super();
+
+ typeNames = "jewel checkbox";
+ }
+
+ COMPILE::JS
+ protected var input:HTMLInputElement;
+
+ COMPILE::JS
+ protected var checkbox:HTMLSpanElement;
+
+ COMPILE::JS
+ protected var label:HTMLLabelElement;
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion HTMLLabelElement
+ * @royaleignorecoercion HTMLInputElement
+ * @royaleignorecoercion HTMLSpanElement
+ * @royaleignorecoercion Text
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ label = addElementToWrapper(this,'label') as HTMLLabelElement;
+
+ input = document.createElement('input') as HTMLInputElement;
+ input.type = 'checkbox';
+ //input.className = 'input';
+ label.appendChild(input);
+
+ checkbox = document.createElement('span') as HTMLSpanElement;
+ //checkbox.className = 'label';
+ label.appendChild(checkbox);
+
+ (input as WrappedHTMLElement).royale_wrapper = this;
+ (checkbox as WrappedHTMLElement).royale_wrapper = this;
+ return element;
+ }
+
+ /**
+ * The text label for the CheckBox.
+ *
+ * @royaleignorecoercion Text
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
+ */
+ override public function get text():String
+ {
+ COMPILE::SWF
+ {
+ return IToggleButtonModel(model).text;
+ }
+ COMPILE::JS
+ {
+ return textNode ? textNode.nodeValue : "";
+ }
+ }
+
+ /**
+ * @private
+ */
+ override public function set text(value:String):void
+ {
+ COMPILE::SWF
+ {
+ IToggleButtonModel(model).text = value;
+ }
+
+ COMPILE::JS
+ {
+ if(!textNode)
+ {
+ textNode = document.createTextNode('') as Text;
+ checkbox.appendChild(textNode);
+ }
+
+ textNode.nodeValue = value;
+ }
+ }
+
+ /**
+ * The value associated with the CheckBox.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9
+ */
+ public function get value():String
+ {
+ COMPILE::SWF
+ {
+ return IToggleButtonModel(model).html;
+ }
+
+ COMPILE::JS
+ {
+ return input.value;
+ }
+ }
+ public function set value(newValue:String):void
+ {
+ COMPILE::SWF
+ {
+ IToggleButtonModel(model).html = newValue;
+ }
+
+ COMPILE::JS
+ {
+ input.value = newValue;
+ }
+ }
+
+ COMPILE::JS
+ protected var textNode:Text;
+
+ [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.8
+ */
+ override public function get selected():Boolean
+ {
+ COMPILE::SWF
+ {
+ return IToggleButtonModel(model).selected;
+ }
+ COMPILE::JS
+ {
+ return input.checked;
+ }
+ }
+
+ /**
+ * @private
+ */
+ override public function set selected(value:Boolean):void
+ {
+ COMPILE::SWF
+ {
+ IToggleButtonModel(model).selected = value;
+ }
+
+ COMPILE::JS
+ {
+ if(input.checked == value)
+ return;
+ var instance:Object = element['JewelCheckbox'];
+ if(instance)
+ {
+ if(value)
+ instance["check"]();
+ else
+ instance["uncheck"]();
+ }
+ else
+ input.checked = value;
+ dispatchEvent(new Event(Event.CHANGE));
+ }
+ }
+ }
+
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/RadioButtonView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/CheckBoxView.as
similarity index 61%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/RadioButtonView.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/CheckBoxView.as
index 984b7b5..6a0424c 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/RadioButtonView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/CheckBoxView.as
@@ -16,7 +16,7 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel.beads
+package org.apache.royale.jewel.beads.views
{
import flash.display.Shape;
import flash.display.SimpleButton;
@@ -28,29 +28,37 @@ package org.apache.royale.jewel.beads
import org.apache.royale.core.CSSTextField;
import org.apache.royale.core.IBeadView;
import org.apache.royale.core.IStrand;
- import org.apache.royale.core.IValueToggleButtonModel;
+ import org.apache.royale.core.IToggleButtonModel;
import org.apache.royale.events.Event;
- /**
- * The RadioButtonView class creates the visual elements of the org.apache.royale.html.RadioButton
- * component.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public class RadioButtonView extends BeadViewBase implements IBeadView
+ /**
+ * The CheckBoxView class is the default view for
+ * the org.apache.royale.html.CheckBox class.
+ * It displays a simple checkbox with an 'x' if checked,
+ * and a label on the right. There are no styles or
+ * properties to configure the look of the 'x' or the
+ * position of the label relative to the checkbox as
+ * there are no equivalents in the standard HTML checkbox.
+ *
+ * A more complex CheckBox could implement more view
+ * configuration.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class CheckBoxView extends BeadViewBase implements IBeadView
{
- /**
- * constructor.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public function RadioButtonView()
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function CheckBoxView()
{
sprites = [ upSprite = new Sprite(),
downSprite = new Sprite(),
@@ -81,46 +89,38 @@ package org.apache.royale.jewel.beads
private var sprites:Array;
- private var _toggleButtonModel:IValueToggleButtonModel;
-
- /**
- * The model used for the RadioButton.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public function get toggleButtonModel() : IValueToggleButtonModel
+ private var _toggleButtonModel:IToggleButtonModel;
+
+ // TODO: Can we remove this?
+ private function get toggleButtonModel() : IToggleButtonModel
{
return _toggleButtonModel;
}
- /**
- * @copy org.apache.royale.core.IBead#strand
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
override public function set strand(value:IStrand):void
{
super.strand = value;
- _toggleButtonModel = value.getBeadByType(IValueToggleButtonModel) as IValueToggleButtonModel;
+
+ _toggleButtonModel = value.getBeadByType(IToggleButtonModel) as IToggleButtonModel;
_toggleButtonModel.addEventListener("textChange", textChangeHandler);
_toggleButtonModel.addEventListener("htmlChange", htmlChangeHandler);
- _toggleButtonModel.addEventListener("selectedValueChange", selectedValueChangeHandler);
- if (_toggleButtonModel.text != null)
+ _toggleButtonModel.addEventListener("selectedChange", selectedChangeHandler);
+ if (_toggleButtonModel.text !== null)
text = _toggleButtonModel.text;
- if (_toggleButtonModel.html != null)
- html = _toggleButtonModel.html;
for each( var s:Sprite in sprites )
{
var tf:CSSTextField = s.getChildByName("textField") as CSSTextField;
tf.styleParent = value;
}
-
+
layoutControl();
var hitArea:Shape = new Shape();
@@ -137,25 +137,25 @@ package org.apache.royale.jewel.beads
text = toggleButtonModel.text;
if (toggleButtonModel.html !== null)
html = toggleButtonModel.html;
-
- if (toggleButtonModel.selected && toggleButtonModel.value == value) {
- selected = true;
- }
}
- /**
- * The string label for the org.apache.royale.html.RadioButton.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
+ /**
+ * @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
{
var tf:CSSTextField = upSprite.getChildByName('textField') as CSSTextField;
return tf.text;
}
+
+ /**
+ * @private
+ */
public function set text(value:String):void
{
for each( var s:Sprite in sprites )
@@ -167,19 +167,23 @@ package org.apache.royale.jewel.beads
layoutControl();
}
- /**
- * The HTML string for the org.apache.royale.html.RadioButton.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
+ /**
+ * @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
{
var tf:CSSTextField = upSprite.getChildByName('textField') as CSSTextField;
return tf.htmlText;
}
+
+ /**
+ * @private
+ */
public function set html(value:String):void
{
for each(var s:Sprite in sprites)
@@ -191,17 +195,11 @@ package org.apache.royale.jewel.beads
layoutControl();
}
- /**
- * @private
- */
private function textChangeHandler(event:Event):void
{
text = toggleButtonModel.text;
}
- /**
- * @private
- */
private function htmlChangeHandler(event:Event):void
{
html = toggleButtonModel.html;
@@ -209,17 +207,28 @@ package org.apache.royale.jewel.beads
private var _selected:Boolean;
- /**
- * The selection state of the RadioButton
- */
+ /**
+ * @copy org.apache.royale.core.IToggleButtonModel#selected
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
public function get selected():Boolean
{
return _selected;
}
+
+ /**
+ * @private
+ */
public function set selected(value:Boolean):void
{
_selected = value;
+ layoutControl();
+
if( value ) {
SimpleButton(_strand).upState = upAndSelectedSprite;
SimpleButton(_strand).downState = downAndSelectedSprite;
@@ -230,21 +239,21 @@ package org.apache.royale.jewel.beads
SimpleButton(_strand).downState = downSprite;
SimpleButton(_strand).overState = overSprite;
}
-
- layoutControl();
}
- /**
- * @private
- */
- private function selectedValueChangeHandler(event:Event):void
+ private function selectedChangeHandler(event:Event):void
{
- selected = _toggleButtonModel.value == _toggleButtonModel.selectedValue;
+ selected = toggleButtonModel.selected;
}
- /**
- * @private
- */
+ /**
+ * Display the icon and text label
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
protected function layoutControl() : void
{
for each(var s:Sprite in sprites)
@@ -252,7 +261,7 @@ package org.apache.royale.jewel.beads
var icon:Shape = s.getChildByName("icon") as Shape;
var tf:CSSTextField = s.getChildByName("textField") as CSSTextField;
- drawRadioButton(icon);
+ drawCheckBox(icon);
var mh:Number = Math.max(icon.height,tf.height);
@@ -265,21 +274,27 @@ package org.apache.royale.jewel.beads
}
- /**
- * @private
- */
- protected function drawRadioButton(icon:Shape) : void
+ /**
+ * Draw the checkbox
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ protected function drawCheckBox(icon:Shape) : void
{
icon.graphics.clear();
icon.graphics.beginFill(0xf8f8f8);
icon.graphics.lineStyle(1,0x808080);
- icon.graphics.drawEllipse(0,0,10,10);
+ icon.graphics.drawRect(0,0,10,10);
icon.graphics.endFill();
- if( selected ) {
- icon.graphics.beginFill(0);
- icon.graphics.drawEllipse(3,3,4,4);
- icon.graphics.endFill();
+ if( _toggleButtonModel.selected ) {
+ icon.graphics.lineStyle(2,0);
+ icon.graphics.moveTo(3,4);
+ icon.graphics.lineTo(5,7);
+ icon.graphics.lineTo(9,0);
}
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/RadioButtonView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/RadioButtonView.as
similarity index 99%
rename from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/RadioButtonView.as
rename to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/RadioButtonView.as
index 984b7b5..f5752ee 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/RadioButtonView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/RadioButtonView.as
@@ -16,7 +16,7 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel.beads
+package org.apache.royale.jewel.beads.views
{
import flash.display.Shape;
import flash.display.SimpleButton;
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/_global.sass
index 4233a68..9fa8336 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -29,43 +29,6 @@
> *
display: block !important
-Label
- iBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel")
- //iBeadView: ClassReference("org.apache.royale.jewel.beads.views.JewelLabelViewBead")
- //iMeasurementBead: ClassReference("org.apache.royale.html.beads.TextFieldLabelMeasurementBead")
-.jewel.label
- white-space: nowrap
-
-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")
-
-Slider
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel")
- IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView")
- IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout")
- IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController")
-
-.jewel.slider
- width: 100px
- height: 30px
- position: relative
-
-.SliderTrack
- position: absolute
-.SliderThumb
- position: absolute
- border-radius: 15px
-@media -royale-swf
- Slider
- iThumbView: ClassReference("org.apache.royale.jewel.beads.SliderThumbView")
- iTrackView: ClassReference("org.apache.royale.jewel.beads.SliderTrackView")
- RadioButton
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel")
- IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView")
- //font-size: 11px
- //font-family: Arial
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_button.sass b/frameworks/projects/Jewel/src/main/sass/components/_button.sass
new file mode 100644
index 0000000..019c818
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_button.sass
@@ -0,0 +1,20 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_check.sass b/frameworks/projects/Jewel/src/main/sass/components/_check.sass
new file mode 100644
index 0000000..a4b504a
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_check.sass
@@ -0,0 +1,27 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT 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.check
+
+@media -royale-swf
+ CheckBox
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.ToggleButtonModel")
+ IBeadView: ClassReference("org.apache.royale.html.beads.CheckBoxView")
+ //font-size: 11px
+ //font-family: Arial
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_label.sass b/frameworks/projects/Jewel/src/main/sass/components/_label.sass
new file mode 100644
index 0000000..628e3ca
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_label.sass
@@ -0,0 +1,27 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT 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.label
+ white-space: nowrap
+
+Label
+ iBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel")
+ //iBeadView: ClassReference("org.apache.royale.jewel.beads.views.JewelLabelViewBead")
+ //iMeasurementBead: ClassReference("org.apache.royale.html.beads.TextFieldLabelMeasurementBead")
+
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_radio.sass b/frameworks/projects/Jewel/src/main/sass/components/_radio.sass
new file mode 100644
index 0000000..0c6fb82
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_radio.sass
@@ -0,0 +1,18 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/components/_slider.sass
similarity index 70%
copy from frameworks/projects/Jewel/src/main/sass/_global.sass
copy to frameworks/projects/Jewel/src/main/sass/components/_slider.sass
index 4233a68..b61e110 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_slider.sass
@@ -17,29 +17,10 @@
//
////////////////////////////////////////////////////////////////////////////////
-@namespace "library://ns.apache.org/royale/jewel"
-
-.layout.horizontal
- white-space: nowrap
- display: block
- > *
- display: inline-block !important
-.layout.vertical
- vertical-align: top
- > *
- display: block !important
-
-Label
- iBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel")
- //iBeadView: ClassReference("org.apache.royale.jewel.beads.views.JewelLabelViewBead")
- //iMeasurementBead: ClassReference("org.apache.royale.html.beads.TextFieldLabelMeasurementBead")
-.jewel.label
- white-space: nowrap
-
-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")
+.jewel.slider
+ width: 100px
+ height: 30px
+ position: relative
Slider
IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel")
@@ -47,11 +28,6 @@ Slider
IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout")
IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController")
-.jewel.slider
- width: 100px
- height: 30px
- position: relative
-
.SliderTrack
position: absolute
@@ -69,3 +45,9 @@ Slider
IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView")
//font-size: 11px
//font-family: Arial
+
+ CheckBox
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.ToggleButtonModel")
+ IBeadView: ClassReference("org.apache.royale.html.beads.CheckBoxView")
+ //font-size: 11px
+ //font-family: Arial
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass b/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
new file mode 100644
index 0000000..019c818
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_textbutton.sass
@@ -0,0 +1,20 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textfield.sass b/frameworks/projects/Jewel/src/main/sass/components/_textfield.sass
new file mode 100644
index 0000000..7742b3f
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_textfield.sass
@@ -0,0 +1,24 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+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")
+
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index 10e81d9..a113a73 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -19,3 +19,13 @@
// Global
@import "global"
+
+// Components
+@import "components/button"
+@import "components/check"
+@import "components/label"
+@import "components/radio"
+@import "components/slider"
+@import "components/textbutton"
+@import "components/textfield"
+
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 08/49: Jewel Label added
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 2ac42bb6efab7bf5a62090f8e3f1431867661d2c
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Mar 13 17:45:21 2018 +0100
Jewel Label added
---
.../src/main/royale/ButtonPlayGround.mxml | 8 +-
frameworks/projects/Jewel/pom.xml | 2 +-
.../resources/{jewel.css => jewel-framework.css} | 12 +-
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../main/royale/org/apache/royale/jewel/Label.as | 189 +++++++++++++++++++++
.../projects/Jewel/src/main/sass/_global.sass | 14 +-
.../main/sass/{jewel.sass => jewel-framework.sass} | 16 +-
.../src/main/resources/royale-jewel-blue.css | 8 +
.../src/main/resources/royale-jewel-red.css | 8 +
.../src/main/sass/{ => components}/_button.sass | 0
.../{_textfield.sass => components/_label.sass} | 52 +-----
.../main/sass/{ => components}/_textbutton.sass | 0
.../src/main/sass/{ => components}/_textfield.sass | 0
.../src/main/sass/royale-jewel-blue.sass | 13 +-
.../JewelTheme/src/main/sass/royale-jewel-red.sass | 13 +-
15 files changed, 248 insertions(+), 88 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index 5ca13a1..fd5f879 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -35,14 +35,14 @@ limitations under the License.
<js:VerticalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
- <js:Label text="Basic"/>
+ <j:Label text="Basic"/>
<js:Button/>
<js:TextButton text="Basic"/>
- <js:Label text="Jewel Button"/>
+ <j:Label text="Jewel Button"/>
<j:Button primary="true"/>
- <js:Label text="Jewel TextButton"/>
+ <j:Label text="Jewel TextButton"/>
<j:TextButton text="DEFAULT"/>
@@ -60,7 +60,7 @@ limitations under the License.
</j:beads>
</j:TextButton>
- <js:Label text="Jewel Button Sizing (respect min values)"/>
+ <j:Label text="Jewel Button Sizing (respect min values)"/>
<j:Slider id="slider" width="250" value="100" minimum="0" maximum="500"
valueChange="onValueChange(event)"/>
<j:Slider id="slider_v" width="250" value="40" minimum="0" maximum="300"
diff --git a/frameworks/projects/Jewel/pom.xml b/frameworks/projects/Jewel/pom.xml
index 74e2bd2..82b2c68 100644
--- a/frameworks/projects/Jewel/pom.xml
+++ b/frameworks/projects/Jewel/pom.xml
@@ -58,7 +58,7 @@
<includeFiles>
<include-file>
<name>jewel.css</name>
- <path>../src/main/resources/jewel.css</path>
+ <path>../src/main/resources/jewel-framework.css</path>
</include-file>
</includeFiles>
<includeLookupOnly>true</includeLookupOnly>
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel.css b/frameworks/projects/Jewel/src/main/resources/jewel-framework.css
similarity index 84%
rename from frameworks/projects/Jewel/src/main/resources/jewel.css
rename to frameworks/projects/Jewel/src/main/resources/jewel-framework.css
index 21f1648..1d18965 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel.css
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-framework.css
@@ -23,6 +23,16 @@
}
/**
+ * Jewel Label
+ */ */
+Label {
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
+ IBeadView: ClassReference("org.apache.royale.html.beads.TextFieldView");
+ iMeasurementBead: ClassReference("org.apache.royale.html.beads.TextFieldLabelMeasurementBead");
+ white-space: nowrap;
+}
+
+/**
* Jewel TextField
*/
TextField {
@@ -60,4 +70,4 @@ RadioButton {
IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView");
}
-/*# sourceMappingURL=jewel.css.map */
+/*# sourceMappingURL=jewel-framework.css.map */
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index b3bfccb..96b6b31 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -24,6 +24,7 @@
<component id="Application" class="org.apache.royale.jewel.Application"/>
<component id="Button" class="org.apache.royale.jewel.Button"/>
<component id="TextButton" class="org.apache.royale.jewel.TextButton"/>
+ <component id="Label" class="org.apache.royale.jewel.Label"/>
<component id="TextField" class="org.apache.royale.jewel.TextField"/>
<component id="Slider" class="org.apache.royale.jewel.Slider"/>
<component id="RadioButton" class="org.apache.royale.jewel.RadioButton"/>
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
new file mode 100644
index 0000000..a9e683e
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Label.as
@@ -0,0 +1,189 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT 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;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * Dispatched when the user clicks on a Label.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.0
+ */
+ [Event(name="click", type="org.apache.royale.events.MouseEvent")]
+
+ /*
+ * Label probably should extend TextField 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
+ * view be swapped out.
+ */
+
+ /**
+ * The Label class implements the basic control for labeling
+ * other controls.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class Label extends UIBase
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function Label()
+ {
+ super();
+ typeNames = "jewel label";
+ }
+
+ COMPILE::JS
+ protected var textNode:Text;
+
+ COMPILE::JS
+ private var _text:String = "";
+
+ [Bindable("textChange")]
+ /**
+ * The text to display in the label.
+ *
+ * @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 _text;
+ }
+ }
+
+ /**
+ * @private
+ */
+ public function set text(value:String):void
+ {
+ COMPILE::SWF
+ {
+ ITextModel(model).text = value;
+ }
+ COMPILE::JS
+ {
+ if (textNode)
+ {
+ _text = value;
+ textNode.nodeValue = value;
+ this.dispatchEvent('textChange');
+ }
+ }
+
+ }
+
+ [Bindable("htmlChange")]
+ /**
+ * The html-formatted text to display in the label.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get html():String
+ {
+ COMPILE::SWF
+ {
+ return ITextModel(model).html;
+ }
+ COMPILE::JS
+ {
+ return element.innerHTML;
+ }
+ }
+
+ /**
+ * @private
+ */
+ public function set html(value:String):void
+ {
+ COMPILE::SWF
+ {
+ ITextModel(model).html = value;
+ }
+ COMPILE::JS
+ {
+ this.element.innerHTML = value;
+ this.dispatchEvent('textChange');
+ }
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ override public function addedToParent():void
+ {
+ super.addedToParent();
+ model.addEventListener("textChange", repeaterListener);
+ model.addEventListener("htmlChange", repeaterListener);
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ addElementToWrapper(this,'span');
+
+ textNode = document.createTextNode(_text) as Text;
+ element.appendChild(textNode);
+
+ //element.style.whiteSpace = "nowrap";
+
+ return element;
+ }
+
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/_global.sass
index b98f623..99552d3 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -24,15 +24,23 @@
white-space: nowrap
.vertical
display: block !important
-
+
+/**
+ * Jewel Label
+ */
+Label
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel")
+ IBeadView: ClassReference("org.apache.royale.html.beads.TextFieldView")
+ iMeasurementBead: ClassReference("org.apache.royale.html.beads.TextFieldLabelMeasurementBead")
+ white-space: nowrap
/**
* Jewel TextField
*/
TextField
IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel")
- //IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView");
- //IBeadController: ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController");
+ //IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView")
+ //IBeadController: ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController")
.vTextField--input
.vTextField--label
diff --git a/frameworks/projects/Jewel/src/main/sass/jewel.sass b/frameworks/projects/Jewel/src/main/sass/jewel-framework.sass
similarity index 82%
rename from frameworks/projects/Jewel/src/main/sass/jewel.sass
rename to frameworks/projects/Jewel/src/main/sass/jewel-framework.sass
index 598c490..10e81d9 100644
--- a/frameworks/projects/Jewel/src/main/sass/jewel.sass
+++ b/frameworks/projects/Jewel/src/main/sass/jewel-framework.sass
@@ -16,20 +16,6 @@
*/
// Variables
-//import "variables"
-//import "mixins"
-//import "functions"
-
+
// Global
@import "global"
-
-// Components
-
-// Button
-//import "button"
-
-// TextButton
-//import "textbutton"
-
-// TextField
-//import "textfield"
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
index 03d06cb..32894c4 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
@@ -218,6 +218,14 @@
}
/**
+ * Jewel Label
+ */
+.jewel.label {
+ font-family: "Lato", sans-serif;
+ font-size: 0.75rem;
+}
+
+/**
* Jewel TextField
*/
TextField {
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
index ef40149..f6d83dd 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
@@ -218,6 +218,14 @@
}
/**
+ * Jewel Label
+ */
+.jewel.label {
+ font-family: "Lato", sans-serif;
+ font-size: 0.75rem;
+}
+
+/**
* Jewel TextField
*/
TextField {
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
similarity index 100%
rename from frameworks/themes/JewelTheme/src/main/sass/_button.sass
rename to frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_label.sass
similarity index 55%
copy from frameworks/themes/JewelTheme/src/main/sass/_textfield.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components/_label.sass
index 84b696c..63b60c9 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_label.sass
@@ -18,50 +18,10 @@
////////////////////////////////////////////////////////////////////////////////
/**
- * Jewel TextField
+ * Jewel Label
*/
-TextField
- position: relative
- display: inline-block
- box-sizing: border-box
- width: 300px
- max-width: 100%
- margin: 0
-
-.vTextField--input
- font-size: 16px
- font-family: 'Lato', sans-serif
-
- border: none
- border-bottom: 2px solid
- border-bottom-color: #ff0000
- display: block
- margin: 0
- padding: 4 0
- width: 100px
- background: transparent
- text-align: left
- color: inherit
- outline: none
-
-.vTextField--label
- bottom: 0
- color: #ff0000
- font-size: 13px
- left: 0
- right: 0
- pointer-events: none
- position: absolute
- display: block
- width: 100%
- overflow: hidden
- white-space: nowrap
- text-align: left
-
-// padding: 5px;
-// border: solid 1px #666666;
-// border-radius: 6px;
-// color: #333333;
-//:hover
-// padding: 5px;
-// background-color: #DFDFDF;
+.jewel.label
+ //IBeadView: ClassReference("org.apache.royale.html.beads.TextFieldView")
+ font:
+ family: $font-stack
+ size: $font-size
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
similarity index 100%
rename from frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
rename to frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
similarity index 100%
rename from frameworks/themes/JewelTheme/src/main/sass/_textfield.sass
rename to frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
diff --git a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
index 3c82eb7..2a9526d 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
@@ -25,12 +25,7 @@
@import "global"
// Components
-
-// Button
-@import "button"
-
-// TextButton
-@import "textbutton"
-
-// TextField
-@import "textfield"
+@import "components/button"
+@import "components/textbutton"
+@import "components/label"
+@import "components/textfield"
diff --git a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
index 54e8f75..2ecaa8c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
@@ -25,12 +25,7 @@
@import "global"
// Components
-
-// Button
-@import "button"
-
-// TextButton
-@import "textbutton"
-
-// TextField
-@import "textfield"
+@import "components/button"
+@import "components/textbutton"
+@import "components/label"
+@import "components/textfield"
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 40/49: some initial slider look
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit a593e345f040ba88f5494d4d78fd1df51e53927f
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Mar 24 10:49:24 2018 +0100
some initial slider look
---
.../JewelTheme/src/main/sass/components/_slider.sass | 15 +++++++++------
1 file changed, 9 insertions(+), 6 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass
index 6e8d491..9fd2299 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass
@@ -33,18 +33,21 @@
&:hover
opacity: 1
+ :focus
+ outline: none
+
&::-webkit-slider-thumb
-webkit-appearance: none
appearance: none
- width: 25px
- height: 25px
+ width: 15px
+ height: 15px
border-radius: 50%
- background: #4CAF50
+ background: $primary-color
cursor: pointer
&::-moz-range-thumb
- width: 25px
- height: 25px
+ width: 15px
+ height: 15px
border-radius: 50%
- background: #4CAF50
+ background: $primary-color
cursor: pointer
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 28/49: 12 Color Palette Plan Almost done and working
for Button, but only one project theme for now
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 38be443c5ff9c9d9799bf6679efe44feffa63d9d
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Mar 21 00:32:23 2018 +0100
12 Color Palette Plan Almost done and working for Button, but only one project theme for now
---
examples/royale/JewelExample/pom.xml | 4 +-
.../src/main/royale/ButtonPlayGround.mxml | 6 +-
.../JewelTheme/src/main/resources/defaults.css | 276 ++++++++++++++-------
.../src/main/sass/_default-color-palette.sass | 32 ++-
.../themes/JewelTheme/src/main/sass/_mixins.sass | 19 +-
.../JewelTheme/src/main/sass/_variables.sass | 10 +-
.../src/main/sass/components/_button.sass | 42 ++--
.../src/main/sass/components/_textbutton.sass | 68 +++--
.../src/main/sass/components/_textfield.sass | 9 +-
9 files changed, 295 insertions(+), 171 deletions(-)
diff --git a/examples/royale/JewelExample/pom.xml b/examples/royale/JewelExample/pom.xml
index 5427bc4..b2b08f8 100644
--- a/examples/royale/JewelExample/pom.xml
+++ b/examples/royale/JewelExample/pom.xml
@@ -120,13 +120,13 @@
<scope>theme</scope>
<classifier>js</classifier>
</dependency>
- <dependency>
+ <!-- <dependency>
<groupId>org.apache.royale.framework</groupId>
<artifactId>JewelBlueTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<scope>theme</scope>
- </dependency>
+ </dependency> -->
</dependencies>
</project>
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index f89ecaa..51b95e5 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -53,10 +53,10 @@ limitations under the License.
</j:beads>
</j:TextButton>
<j:Label text="Jewel Button Sizing (respect min values)"/>
- <j:Slider id="slider" width="250" value="100" minimum="0" maximum="500"
+ <j:Slider id="slider" width="250" value="120" minimum="100" maximum="500"
valueChange="onValueChange(event)"/>
- <j:Slider id="slider_v" width="250" value="40" minimum="0" maximum="300"
+ <j:Slider id="slider_v" width="250" value="40" minimum="40" maximum="300"
valueChange="onValueChange(event)"/>
- <j:TextButton id="button" text="Button" width="100" height="40" primary="true"/>
+ <j:TextButton id="button" text="Button" width="120" height="40" primary="true"/>
</js:Group>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index cc10a23..6e720c5 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -27,10 +27,7 @@
margin: 10px;
}
-/**
- * Jewel Button
- */
-.jewel.button, .jewel.button:hover, .jewel.textbutton, .jewel.textbutton:hover {
+.jewel.button {
cursor: pointer;
display: inline-block;
margin: 0;
@@ -38,194 +35,299 @@
min-width: 74px;
min-height: 34px;
/* Background: */
- border: none;
border-radius: 3px;
-}
-
-.jewel.button {
- background-color: rgba(0, 0, 0, 0.3);
- transition-duration: 0.4s;
- color: rgba(0, 0, 0, 0.4);
+ border: 1px solid #b3b3b3;
+ background: linear-gradient(#e6e6e6, #cccccc);
+ box-shadow: inset 0 1px 0 white;
}
.jewel.button:hover {
- background-color: rgba(15, 15, 15, 0.3);
+ border: 1px solid #a6a6a6;
+ background: linear-gradient(#d9d9d9, silver);
}
.jewel.button:active {
- background-color: rgba(0, 0, 0, 0.3);
+ border: 1px solid #8d8d8d;
+ background: linear-gradient(silver, #a6a6a6);
+ box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
}
.jewel.button:focus {
outline: 0;
}
.jewel.button[disabled] {
- background-color: #CCCCCC;
- color: #888888;
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ box-shadow: none;
cursor: unset;
}
.jewel.button.primary {
- background-color: #dedede;
- transition-duration: 0.4s;
- color: #000000;
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 10px 16px;
+ min-width: 74px;
+ min-height: 34px;
+ /* Background: */
+ border-radius: 3px;
+ border: 1px solid #0f88d1;
+ background: linear-gradient(#54b7f3, #24a3ef);
+ box-shadow: inset 0 1px 0 #9bd5f8;
}
.jewel.button.primary:hover {
- background-color: #ededed;
+ border: 1px solid #0d79ba;
+ background: linear-gradient(#3CADF1, #1198e9);
}
.jewel.button.primary:active {
- background-color: #cfcfcf;
+ border: 1px solid #0a5a8a;
+ background: linear-gradient(#1198e9, #0d79ba);
+ box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
}
.jewel.button.primary:focus {
outline: 0;
}
.jewel.button.primary[disabled] {
- background-color: #CCCCCC;
- color: #888888;
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ box-shadow: none;
cursor: unset;
}
.jewel.button.secondary {
- background-color: #011833;
- transition-duration: 0.4s;
- color: #000000;
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 10px 16px;
+ min-width: 74px;
+ min-height: 34px;
+ /* Background: */
+ border-radius: 3px;
+ border: 1px solid #be390e;
+ background: linear-gradient(#f16c42, #ed4812);
+ box-shadow: inset 0 1px 0 #f6a389;
}
.jewel.button.secondary:hover {
- background-color: #022651;
+ border: 1px solid #a6320d;
+ background: linear-gradient(#EF5A2A, #d64010);
}
.jewel.button.secondary:active {
- background-color: #000a15;
+ border: 1px solid #772409;
+ background: linear-gradient(#d64010, #a6320d);
+ box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
}
.jewel.button.secondary:focus {
outline: 0;
}
.jewel.button.secondary[disabled] {
- background-color: #CCCCCC;
- color: #888888;
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ box-shadow: none;
cursor: unset;
}
.jewel.button.emphasized {
- background-color: #1FD348;
- transition-duration: 0.4s;
- color: #000000;
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 10px 16px;
+ min-width: 74px;
+ min-height: 34px;
+ /* Background: */
+ border-radius: 3px;
+ border: 1px solid #277b32;
+ background: linear-gradient(#45c354, #34a241);
+ box-shadow: inset 0 1px 0 #7fd68a;
}
.jewel.button.emphasized:hover {
- background-color: #30e158;
+ border: 1px solid #21682a;
+ background: linear-gradient(#3AB549, #2e8e39);
}
.jewel.button.emphasized:active {
- background-color: #1bb83f;
+ border: 1px solid #15411a;
+ background: linear-gradient(#2e8e39, #21682a);
+ box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
}
.jewel.button.emphasized:focus {
outline: 0;
}
.jewel.button.emphasized[disabled] {
- background-color: #CCCCCC;
- color: #888888;
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ box-shadow: none;
cursor: unset;
}
-/**
- * Jewel TextButton
- */
-.jewel.textbutton, .jewel.textbutton:hover {
- /* TextField */
+.jewel.label {
font-family: "Lato", sans-serif;
- font-style: bold;
- font-size: 0.75rem;
- text-transform: uppercase;
- text-decoration: none;
-}
-.jewel.textbutton [disabled] {
- text-shadow: unset;
+ font-size: 14px;
}
.jewel.textbutton {
- background-color: rgba(0, 0, 0, 0.3);
- transition-duration: 0.4s;
- color: rgba(0, 0, 0, 0.4);
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 10px 16px;
+ min-width: 74px;
+ min-height: 34px;
+ /* Background: */
+ border-radius: 3px;
+ border: 1px solid #b3b3b3;
+ background: linear-gradient(#e6e6e6, #cccccc);
+ box-shadow: inset 0 1px 0 white;
+ font-family: "Lato", sans-serif;
+ font-size: 14px;
+ font-weight: bold;
+ color: #808080;
+ text-transform: uppercase;
+ text-decoration: none;
}
.jewel.textbutton:hover {
- background-color: rgba(15, 15, 15, 0.3);
+ border: 1px solid #a6a6a6;
+ background: linear-gradient(#d9d9d9, silver);
}
.jewel.textbutton:active {
- background-color: rgba(0, 0, 0, 0.3);
+ border: 1px solid #8d8d8d;
+ background: linear-gradient(silver, #a6a6a6);
+ box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
}
.jewel.textbutton:focus {
outline: 0;
}
.jewel.textbutton[disabled] {
- background-color: #CCCCCC;
- color: #888888;
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ color: #b9b9b9;
+ box-shadow: none;
cursor: unset;
+ font-weight: normal;
+ text-shadow: unset;
}
.jewel.textbutton.primary {
- background-color: #dedede;
- transition-duration: 0.4s;
- color: #000000;
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 10px 16px;
+ min-width: 74px;
+ min-height: 34px;
+ /* Background: */
+ border-radius: 3px;
+ border: 1px solid #0f88d1;
+ background: linear-gradient(#54b7f3, #24a3ef);
+ box-shadow: inset 0 1px 0 #9bd5f8;
+ font-family: "Lato", sans-serif;
+ font-size: 14px;
+ font-weight: bold;
+ color: #FFFFFF;
+ text-transform: uppercase;
+ text-decoration: none;
+ shadow: 0 1px 0 #d9d9d9;
}
.jewel.textbutton.primary:hover {
- background-color: #ededed;
+ border: 1px solid #0d79ba;
+ background: linear-gradient(#3CADF1, #1198e9);
}
.jewel.textbutton.primary:active {
- background-color: #cfcfcf;
+ border: 1px solid #0a5a8a;
+ background: linear-gradient(#1198e9, #0d79ba);
+ box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
}
.jewel.textbutton.primary:focus {
outline: 0;
}
.jewel.textbutton.primary[disabled] {
- background-color: #CCCCCC;
- color: #888888;
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ color: #b9b9b9;
+ box-shadow: none;
cursor: unset;
+ font-weight: normal;
+ text-shadow: unset;
}
.jewel.textbutton.secondary {
- background-color: #011833;
- transition-duration: 0.4s;
- color: #000000;
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 10px 16px;
+ min-width: 74px;
+ min-height: 34px;
+ /* Background: */
+ border-radius: 3px;
+ border: 1px solid #be390e;
+ background: linear-gradient(#f16c42, #ed4812);
+ box-shadow: inset 0 1px 0 #f6a389;
+ font-family: "Lato", sans-serif;
+ font-size: 14px;
+ font-weight: bold;
+ color: #FFFFFF;
+ text-transform: uppercase;
+ text-decoration: none;
+ shadow: 0 1px 0 #d9d9d9;
}
.jewel.textbutton.secondary:hover {
- background-color: #022651;
+ border: 1px solid #a6320d;
+ background: linear-gradient(#EF5A2A, #d64010);
}
.jewel.textbutton.secondary:active {
- background-color: #000a15;
+ border: 1px solid #772409;
+ background: linear-gradient(#d64010, #a6320d);
+ box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
}
.jewel.textbutton.secondary:focus {
outline: 0;
}
.jewel.textbutton.secondary[disabled] {
- background-color: #CCCCCC;
- color: #888888;
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ color: #b9b9b9;
+ box-shadow: none;
cursor: unset;
+ font-weight: normal;
+ text-shadow: unset;
}
.jewel.textbutton.emphasized {
- background-color: #1FD348;
- transition-duration: 0.4s;
- color: #000000;
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 10px 16px;
+ min-width: 74px;
+ min-height: 34px;
+ /* Background: */
+ border-radius: 3px;
+ border: 1px solid #277b32;
+ background: linear-gradient(#45c354, #34a241);
+ box-shadow: inset 0 1px 0 #7fd68a;
+ font-family: "Lato", sans-serif;
+ font-size: 14px;
+ font-weight: bold;
+ color: #FFFFFF;
+ text-transform: uppercase;
+ text-decoration: none;
+ shadow: 0 1px 0 #d9d9d9;
}
.jewel.textbutton.emphasized:hover {
- background-color: #30e158;
+ border: 1px solid #21682a;
+ background: linear-gradient(#3AB549, #2e8e39);
}
.jewel.textbutton.emphasized:active {
- background-color: #1bb83f;
+ border: 1px solid #15411a;
+ background: linear-gradient(#2e8e39, #21682a);
+ box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
}
.jewel.textbutton.emphasized:focus {
outline: 0;
}
.jewel.textbutton.emphasized[disabled] {
- background-color: #CCCCCC;
- color: #888888;
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ color: #b9b9b9;
+ box-shadow: none;
cursor: unset;
+ font-weight: normal;
+ text-shadow: unset;
}
-.jewel.label {
- font-family: "Lato", sans-serif;
- font-size: 0.75rem;
-}
-
-/**
- * Jewel TextField
- */
-TextField {
+.jewel.textfield {
position: relative;
display: inline-block;
box-sizing: border-box;
@@ -234,7 +336,7 @@ TextField {
margin: 0;
}
-.vTextField--input {
+.jewel.textfield > input {
font-size: 16px;
font-family: "Lato", sans-serif;
border: none;
@@ -250,7 +352,7 @@ TextField {
outline: none;
}
-.vTextField--label {
+.jewel.textfield > label {
bottom: 0;
color: #ff0000;
font-size: 13px;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass b/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
index 1b331d7..a4cfa7c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
@@ -16,11 +16,29 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-// Color Themes
-$default-color: rgba(0,0,0,.3)
-$primary-color: #dedede
-$secondary-color: #011833
-$emphasized-color: #1FD348
-$default-font-color: rgba(0, 0, 0, .4)
-$font-color: #000000
\ No newline at end of file
+// 12 Color Themes (this will go to one separate project each one)
+$red: #EC1C24
+$amethyst: #922590
+$violet: #662C90
+$Sapphire: #2C74BE
+$blue: #3CADF1
+$turquoise: #29A89F
+$green: #3AB549
+$emerald: #8CC63C
+$yellow: #FCEF0A
+$sunflower: #F8B13F
+$orange: #F7941D
+$topaz: #EF5A2A
+
+// Common Colors
+$font-color: #FFFFFF
+$default-color: #d9d9d9
+$default-font-color: #808080
+$disabled-color: #F9F9F9
+
+// Var Colors
+$default-color: $default-color
+$primary-color: $blue
+$secondary-color: $topaz
+$emphasized-color: $green
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
index f4e7302..22b1b05 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
@@ -17,24 +17,7 @@
//
////////////////////////////////////////////////////////////////////////////////
-=button-theme($button-color, $text-color)
- //border-color: darken($button-color, 20%)
- background-color: $button-color
- transition:
- duration: 0.4s
- color: $text-color
- &:hover
- background-color: lighten($button-color, 6%)
- //box-shadow: 0 .125em $off-wht, inset 0 .063em $off-wht, inset 0 -.188em lighten($btn-color, 2%)
- &:active
- background-color: darken($button-color, 6%)
- //box-shadow: 0 .063em $off-wht, inset 0 0 1.094em darken($btn-color, 40%), inset 0 .063em darken($btn-color, 20%),inset 0 -0.188em darken($btn-color, 20%)
- &:focus
- outline: 0
- &[disabled]
- background-color: $disabled-color
- color: $font-disabled-color
- cursor: unset
+
//=trans($val...)
// -webkit-transition: $val
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
index 3a6b64b..9a5fef9 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -18,14 +18,12 @@
////////////////////////////////////////////////////////////////////////////////
$font-stack: 'Lato', sans-serif
-$font-size: 0.75rem
-
-// Common Colors
-$white: rgba(white,.9)
-$disabled-color: #CCCCCC
-$font-disabled-color: #888888
+$font-size: 14px//0.75rem
// Button variables
+$button-margin: 0 !default
+$button-padding: 10px 16px !default
+$button-min-height: 34px !default
$button-min-width: 74px !default
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
index f8c5952..fc76a5a 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
@@ -17,34 +17,46 @@
//
////////////////////////////////////////////////////////////////////////////////
-%button-def
+=button-theme($button-color)
cursor: pointer
-
display: inline-block
- margin: 0 //1rem
- padding: 10px 16px //.938em 1.875em
+ margin: $button-margin //1rem
+ padding: $button-padding //.938em 1.875em
min-width: $button-min-width
- min-height: 34px
-
+ min-height: $button-min-height
/* Background: */
- border: none // .094em solid
border-radius: 3px //.625em
- //box-shadow: 0 .375em .313em -.313em rgba(black,.8), inset 0 .063em $off-wht, inset 0 -.188em rgba(black,.15)
-
-.jewel.button, .jewel.button:hover
- @extend %button-def
+ border: 1px solid darken($button-color, 15%)// .094em solid
+ background: linear-gradient(lighten($button-color, 5%), darken($button-color, 5%))
+ box-shadow: inset 0 1px 0 lighten($button-color, 20%)
+ //transition:
+ // duration: 0.4s
+ &:hover
+ border: 1px solid darken($button-color, 20%)// .094em solid
+ background: linear-gradient($button-color, darken($button-color, 10%))
+ &:active
+ border: 1px solid darken($button-color, 30%)// .094em solid
+ background: linear-gradient(darken($button-color, 10%), darken($button-color, 20%))
+ box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75)
+ &:focus
+ outline: 0
+ &[disabled]
+ border: 1px solid darken($disabled-color, 20%)// .094em solid
+ background: $disabled-color
+ box-shadow: none
+ cursor: unset
.jewel.button
- +button-theme($default-color, $default-font-color)
+ +button-theme($default-color)
.jewel.button.primary
- +button-theme($primary-color, $font-color)
+ +button-theme($primary-color)
.jewel.button.secondary
- +button-theme($secondary-color, $font-color)
+ +button-theme($secondary-color)
.jewel.button.emphasized
- +button-theme($emphasized-color, $font-color)
+ +button-theme($emphasized-color)
//SVGs
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
index eb82343..d081579 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
@@ -17,45 +17,59 @@
//
////////////////////////////////////////////////////////////////////////////////
-%textbutton-def
- @extend %button-def
- /* TextField */
+
+=textbutton-theme($button-color, $text-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
+ /* Background: */
+ border-radius: 3px //.625em
+ border: 1px solid darken($button-color, 15%)// .094em solid
+ background: linear-gradient(lighten($button-color, 5%), darken($button-color, 5%))
+ box-shadow: inset 0 1px 0 lighten($button-color, 20%)
+ //transition:
+ // duration: 0.4s
font:
family: $font-stack
- style: bold
- size: $font-size
- //+trans(0.2s ease-in-out)
+ size: $font-size//+trans(0.2s ease-in-out)
+ weight: bold
+ color: $text-color
text:
transform: uppercase
decoration: none
- //shadow: 0 -1px 0 rgba(0,0,0,0.70) //0 .063em
- [disabled]
+ @if $text-color == $font-color
+ shadow: 0 1px 0 darken($text-color, 15%) //0 .063em
+ &:hover
+ border: 1px solid darken($button-color, 20%)// .094em solid
+ background: linear-gradient($button-color, darken($button-color, 10%))
+ &:active
+ border: 1px solid darken($button-color, 30%)// .094em solid
+ background: linear-gradient(darken($button-color, 10%), darken($button-color, 20%))
+ box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75)
+ &:focus
+ outline: 0
+ &[disabled]
+ border: 1px solid darken($disabled-color, 20%)// .094em solid
+ background: $disabled-color
+ color: darken($disabled-color, 25%)
+ box-shadow: none
+ cursor: unset
+ font:
+ weight: normal
text:
shadow: unset
-.jewel.textbutton, .jewel.textbutton:hover
- @extend %textbutton-def
-
.jewel.textbutton
- +button-theme($default-color, $default-font-color)
+ +textbutton-theme($default-color, $default-font-color)
.jewel.textbutton.primary
- +button-theme($primary-color, $font-color)
+ +textbutton-theme($primary-color, $font-color)
.jewel.textbutton.secondary
- +button-theme($secondary-color, $font-color)
+ +textbutton-theme($secondary-color, $font-color)
.jewel.textbutton.emphasized
- +button-theme($emphasized-color, $font-color)
-
-// /* TextField: */
-// font-family: $font-stack
-// font-size: 14px
-// font-weight: bold
-// color: $font-normal-color
-// text-shadow: 0 1px 0 #555
-
-// padding: 10px 0px
-// display: inline-block
-// min-width: 80px
-
+ +textbutton-theme($emphasized-color, $font-color)
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
index 84b696c..952e7c5 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
@@ -17,10 +17,7 @@
//
////////////////////////////////////////////////////////////////////////////////
-/**
- * Jewel TextField
- */
-TextField
+.jewel.textfield
position: relative
display: inline-block
box-sizing: border-box
@@ -28,7 +25,7 @@ TextField
max-width: 100%
margin: 0
-.vTextField--input
+.jewel.textfield > input
font-size: 16px
font-family: 'Lato', sans-serif
@@ -44,7 +41,7 @@ TextField
color: inherit
outline: none
-.vTextField--label
+.jewel.textfield > label
bottom: 0
color: #ff0000
font-size: 13px
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 13/49: remove JewelThemeFontInject
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit b165856dd7096e3970c21cd5d69d97a000cff612
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Mar 15 14:15:51 2018 +0100
remove JewelThemeFontInject
---
.../src/main/royale/JewelThemeClasses.as | 5 +--
.../apache/royale/jewel/JewelThemeFontInject.as | 46 ----------------------
2 files changed, 1 insertion(+), 50 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as b/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
index 3e88523..20662dc 100644
--- a/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
+++ b/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
@@ -27,10 +27,7 @@ package
*/
internal class JewelThemeClasses
{
- COMPILE::JS
- {
- import org.apache.royale.jewel.JewelThemeFontInject; JewelThemeFontInject;
- }
+
}
}
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/jewel/JewelThemeFontInject.as b/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/jewel/JewelThemeFontInject.as
deleted file mode 100644
index 9d5f913..0000000
--- a/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/jewel/JewelThemeFontInject.as
+++ /dev/null
@@ -1,46 +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
-{
-
- /**
- * @private
- * This class is used to link the font in html
- */
- public class JewelThemeFontInject
- {
- /**
- * constructor.
- *
- * <inject_html>
- * <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
- * </inject_html>
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.2
- */
- public function JewelThemeFontInject()
- {
- super();
- }
- }
-
-}
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 38/49: -Fix textfield -Make dark/light themes depend
on only one var
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit df8c93fec9718f6209cb8d9c5fce9449f65058da
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Mar 24 10:07:37 2018 +0100
-Fix textfield
-Make dark/light themes depend on only one var
---
.../royale/org/apache/royale/jewel/TextField.as | 17 ++++++++-
.../JewelTheme/src/main/resources/defaults.css | 43 +++++++++++-----------
.../JewelTheme/src/main/sass/_variables.sass | 11 +++++-
.../src/main/sass/components/_textfield.sass | 18 +++++----
4 files changed, 58 insertions(+), 31 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
index 859bf62..1c12711 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/TextField.as
@@ -53,6 +53,21 @@ package org.apache.royale.jewel
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;
+ }
+
/**
* @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
* @royaleignorecoercion HTMLDivElement
@@ -84,7 +99,7 @@ package org.apache.royale.jewel
positioner = div as WrappedHTMLElement;
//(label as WrappedHTMLElement).royale_wrapper = this;
- positioner.royale_wrapper = this;
+ _positioner.royale_wrapper = this;
return element;
}
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index bf22702..8352a0f 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -21,7 +21,7 @@
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Lato", sans-serif;
- color: #808080;
+ color: #FFFFFF;
}
.royale {
@@ -56,18 +56,18 @@ span {
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 1px solid #b3b3b3;
- background: linear-gradient(#e6e6e6, #cccccc);
- box-shadow: inset 0 1px 0 white;
+ border: 1px solid #404040;
+ background: linear-gradient(#737373, #595959);
+ box-shadow: inset 0 1px 0 #999999;
border-radius: 3px;
}
.jewel.button:hover {
- border: 1px solid #a6a6a6;
- background: linear-gradient(#d9d9d9, silver);
+ border: 1px solid #333333;
+ background: linear-gradient(#666666, #4d4d4d);
}
.jewel.button:active {
- border: 1px solid #8d8d8d;
- background: linear-gradient(silver, #a6a6a6);
+ border: 1px solid #1a1a1a;
+ background: linear-gradient(#4d4d4d, #333333);
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
@@ -234,24 +234,25 @@ span {
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 1px solid #b3b3b3;
- background: linear-gradient(#e6e6e6, #cccccc);
- box-shadow: inset 0 1px 0 white;
+ border: 1px solid #404040;
+ background: linear-gradient(#737373, #595959);
+ box-shadow: inset 0 1px 0 #999999;
border-radius: 3px;
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: bold;
- color: #808080;
+ color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
+ shadow: 0 1px 0 #d9d9d9;
}
.jewel.textbutton:hover {
- border: 1px solid #a6a6a6;
- background: linear-gradient(#d9d9d9, silver);
+ border: 1px solid #333333;
+ background: linear-gradient(#666666, #4d4d4d);
}
.jewel.textbutton:active {
- border: 1px solid #8d8d8d;
- background: linear-gradient(silver, #a6a6a6);
+ border: 1px solid #1a1a1a;
+ background: linear-gradient(#4d4d4d, #333333);
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.textbutton:focus {
@@ -406,9 +407,9 @@ span {
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: normal;
- background: linear-gradient(white, #f3f3f3);
- border: 1px solid #b3b3b3;
- color: #808080;
+ color: #FFFFFF;
+ background: linear-gradient(#8c8c8c, gray);
+ border: 1px solid #404040;
border-radius: 3px;
box-shadow: none;
}
@@ -429,9 +430,9 @@ span {
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: normal;
- background: linear-gradient(white, #f3f3f3);
- border: 1px solid #0f88d1;
color: #FFFFFF;
+ background: linear-gradient(#8c8c8c, gray);
+ border: 1px solid #0f88d1;
border-radius: 3px;
box-shadow: none;
}
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
index 1d5a14f..974be28 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -41,6 +41,7 @@ $font-dark-color: #FFFFFF
//Theme Style (Flat or Gradient)
$flat: false
+$dark: false
$transitions-enable: false
$transition-duration: .3s
$transition-timing: easein
@@ -50,12 +51,18 @@ $font-stack: 'Lato', sans-serif
$font-size: 14px//0.75rem
// VARIABLES
-$default-color: $light-color // change this from light to dark
+$default-color: $light-color
+@if $dark
+ $default-color: $dark-color
+
$primary-color: $blue
$secondary-color: $topaz
$emphasized-color: $green
-$default-font-color: $font-light-color // change this from light to dark
+$default-font-color: $font-light-color
+@if $dark
+ $default-font-color: $font-dark-color
+
$disabled-color: #F9F9F9 // maybe make it dependent of theme colors
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
index 81feb03..15c2744 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
@@ -28,7 +28,7 @@ $textfield-min-width: 74px !default
$textfield-border-radius: 3px
-=textfield-theme($textfield-color, $text-color)
+=textfield-theme($textfield-color, $textfield-text-color)
position: relative
display: inline-flex
@@ -49,10 +49,10 @@ $textfield-border-radius: 3px
family: $font-stack
size: $font-size
weight: normal
-
+ color: $textfield-text-color
+
background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
border: 1px solid darken($textfield-color, 15%)
- color: $text-color
border-radius: $textfield-border-radius
//transition: transition
@@ -62,10 +62,14 @@ $textfield-border-radius: 3px
// padding: 5px;
// background-color: #DFDFDF;
-
.jewel.textfield
- +textfield-theme($default-color, $default-font-color)
+ @if $dark
+ +textfield-theme($default-color, $font-dark-color)
+ @else
+ +textfield-theme($default-color, $font-light-color)
.jewel.textfield.primary
- +textfield-theme($primary-color, $font-theme-color)
-
+ @if $dark
+ +textfield-theme($primary-color, $font-dark-color)
+ @else
+ +textfield-theme($primary-color, $font-light-color)
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 32/49: Preparing textfield, radio and check,
but there're some bugs in compiler css that prevents to complete
this task
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 7e3fc97b61495798cd85c095126e5c2e91488313
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Mar 21 21:42:40 2018 +0100
Preparing textfield, radio and check, but there're some bugs in compiler css that prevents to complete this task
---
.../src/main/royale/TextInputPlayGround.mxml | 4 +-
.../royale/org/apache/royale/jewel/RadioButton.as | 13 +++--
.../components/{_check.sass => _checkbox.sass} | 2 +-
.../Jewel/src/main/sass/components/_radio.sass | 18 -------
.../src/main/sass/components/_radiobutton.sass} | 2 +-
.../Jewel/src/main/sass/components/_textfield.sass | 1 +
.../projects/Jewel/src/main/sass/defaults.sass | 4 +-
.../JewelTheme/src/main/resources/defaults.css | 33 ++++++++++--
.../components/{_radio.sass => _checkbox.sass} | 16 +++++-
.../src/main/sass/components/_radiobutton.sass} | 18 +++++--
.../src/main/sass/components/_textfield.sass | 58 ++++++++++++----------
.../themes/JewelTheme/src/main/sass/defaults.sass | 4 +-
12 files changed, 107 insertions(+), 66 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index 903bd68..83535ff 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -38,9 +38,9 @@ limitations under the License.
<j:TextField text="Text Input" width="120" height="40"/>
<html:H4 text="Jewel CheckBox"/>
- <j:CheckBox/>
+ <j:CheckBox text="label"/>
<html:H4 text="Jewel RadioButton"/>
- <j:RadioButton/>
+ <j:RadioButton text="label"/>
</js:Group>
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 b4a8e91..fd9f037 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
@@ -61,13 +61,20 @@ package org.apache.royale.jewel
{
super(upState, overState, downState, hitTestState);
- typeNames = "jewel radio"
+ typeNames = "jewel radiobutton"
}
}
COMPILE::JS
public class RadioButton extends org.apache.royale.html.RadioButton
{
+ public function RadioButton()
+ {
+ super();
+
+ typeNames = "jewel radiobutton";
+ }
+
/**
* @private
*
@@ -87,8 +94,6 @@ package org.apache.royale.jewel
*/
override protected function createElement():WrappedHTMLElement
{
-
-
icon = new RadioButtonIcon()
icon.id = '_radio_' + org.apache.royale.jewel.RadioButton.radioCounter++;
@@ -101,8 +106,6 @@ package org.apache.royale.jewel
(textNode as WrappedHTMLElement).royale_wrapper = this;
(icon.element as WrappedHTMLElement).royale_wrapper = this;
- typeNames = 'RadioButton';
-
return element;
}
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_check.sass b/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass
similarity index 98%
rename from frameworks/projects/Jewel/src/main/sass/components/_check.sass
rename to frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass
index a4b504a..f4369fe 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_check.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass
@@ -17,7 +17,7 @@
//
////////////////////////////////////////////////////////////////////////////////
-.jewel.check
+.jewel.checkbox
@media -royale-swf
CheckBox
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_radio.sass b/frameworks/projects/Jewel/src/main/sass/components/_radio.sass
deleted file mode 100644
index 0c6fb82..0000000
--- a/frameworks/projects/Jewel/src/main/sass/components/_radio.sass
+++ /dev/null
@@ -1,18 +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.
-//
-////////////////////////////////////////////////////////////////////////////////
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_check.sass b/frameworks/projects/Jewel/src/main/sass/components/_radiobutton.sass
similarity index 98%
rename from frameworks/themes/JewelTheme/src/main/sass/components/_check.sass
rename to frameworks/projects/Jewel/src/main/sass/components/_radiobutton.sass
index 7608f63..e5ec802 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_check.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_radiobutton.sass
@@ -17,4 +17,4 @@
//
////////////////////////////////////////////////////////////////////////////////
-.jewel.check
\ No newline at end of file
+.jewel.radiobutton
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textfield.sass b/frameworks/projects/Jewel/src/main/sass/components/_textfield.sass
index 7742b3f..b1e8ea3 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textfield.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_textfield.sass
@@ -22,3 +22,4 @@ TextField
//IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView")
//IBeadController: ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController")
+.jewel.textfield
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index a113a73..dc2d096 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -22,9 +22,9 @@
// Components
@import "components/button"
-@import "components/check"
+@import "components/checkbox"
@import "components/label"
-@import "components/radio"
+@import "components/radiobutton"
@import "components/slider"
@import "components/textbutton"
@import "components/textfield"
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index cb1350f..5a5cc8f 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -173,11 +173,37 @@ span {
cursor: unset;
}
+.jewel.checkbox > input[type="checkbox"] {
+ width: 50px;
+ height: 50px;
+}
+
+.jewel.checkbox label {
+ cursor: auto;
+ position: relative;
+ display: block;
+ padding-left: 20px;
+ outline: none;
+}
+
.jewel.label {
font-family: "Lato", sans-serif;
font-size: 14px;
}
+.jewel.radiobutton > input[type="radio"] {
+ width: 50px;
+ height: 50px;
+}
+
+.jewel.checkbox label {
+ cursor: auto;
+ position: relative;
+ display: block;
+ padding-left: 20px;
+ outline: none;
+}
+
.jewel.textbutton {
cursor: pointer;
display: inline-block;
@@ -350,9 +376,10 @@ span {
margin: 0;
}
-.jewel.textfield input {
- font-size: 16px;
+.jewel.textfield > input {
font-family: "Lato", sans-serif;
+ font-size: 14px;
+ font-weight: normal;
border: none;
border-bottom: 2px solid;
border-bottom-color: #ff0000;
@@ -366,7 +393,7 @@ span {
outline: none;
}
-.jewel.textfield label {
+.jewel.textfield > label {
bottom: 0;
color: #ff0000;
font-size: 13px;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_radio.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
similarity index 77%
rename from frameworks/themes/JewelTheme/src/main/sass/components/_radio.sass
rename to frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
index 689f939..a96b39c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_radio.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
@@ -17,4 +17,18 @@
//
////////////////////////////////////////////////////////////////////////////////
-.jewel.radio
\ No newline at end of file
+.jewel.checkbox
+
+.jewel.checkbox
+ > input[type="checkbox"]
+ width: 50px
+ height: 50px
+
+.jewel.checkbox
+ label
+ cursor: auto
+ position: relative
+ display: block
+ padding-left: 20px
+ outline: none
+ //font-size: @labelFontSize
\ 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/_radiobutton.sass
similarity index 77%
copy from frameworks/projects/Jewel/src/main/sass/components/_textfield.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
index 7742b3f..00f4eb2 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
@@ -17,8 +17,18 @@
//
////////////////////////////////////////////////////////////////////////////////
-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")
+.jewel.radiobutton
+.jewel.radiobutton
+ > input[type="radio"]
+ width: 50px
+ height: 50px
+
+.jewel.checkbox
+ label
+ cursor: auto
+ position: relative
+ display: block
+ padding-left: 20px
+ outline: none
+ //font-size: @labelFontSize
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
index d2d842a..62dcfd4 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
@@ -25,35 +25,39 @@
max-width: 100%
margin: 0
-.jewel.textfield input
- font-size: 16px
- font-family: 'Lato', sans-serif
+.jewel.textfield
+ > input
+ font:
+ family: $font-stack
+ size: $font-size
+ weight: normal
- border: none
- border-bottom: 2px solid
- border-bottom-color: #ff0000
- display: block
- margin: 0
- padding: 4 0
- width: 100px
- background: transparent
- text-align: left
- color: inherit
- outline: none
+ border: none
+ border-bottom: 2px solid
+ border-bottom-color: #ff0000
+ display: block
+ margin: 0
+ padding: 4 0
+ width: 100px
+ background: transparent
+ text-align: left
+ color: inherit
+ outline: none
-.jewel.textfield label
- bottom: 0
- color: #ff0000
- font-size: 13px
- left: 0
- right: 0
- pointer-events: none
- position: absolute
- display: block
- width: 100%
- overflow: hidden
- white-space: nowrap
- text-align: left
+.jewel.textfield
+ > label
+ bottom: 0
+ color: #ff0000
+ font-size: 13px
+ left: 0
+ right: 0
+ pointer-events: none
+ position: absolute
+ display: block
+ width: 100%
+ overflow: hidden
+ white-space: nowrap
+ text-align: left
// padding: 5px;
// border: solid 1px #666666;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index e377e4d..dad6b9a 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -25,9 +25,9 @@
// Components
@import "components/button"
-@import "components/check"
+@import "components/checkbox"
@import "components/label"
-@import "components/radio"
+@import "components/radiobutton"
@import "components/slider"
@import "components/textbutton"
@import "components/textfield"
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 33/49: more fixes
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit a7b39df57887eb6a003d63719a5f82cb9a3c93fc
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Mar 21 22:03:53 2018 +0100
more fixes
---
frameworks/themes/JewelTheme/src/main/resources/defaults.css | 8 ++------
.../themes/JewelTheme/src/main/sass/components/_checkbox.sass | 6 +-----
.../themes/JewelTheme/src/main/sass/components/_radiobutton.sass | 6 +-----
.../themes/JewelTheme/src/main/sass/components/_textfield.sass | 5 ++---
4 files changed, 6 insertions(+), 19 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 5a5cc8f..3b93a57 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -177,8 +177,7 @@ span {
width: 50px;
height: 50px;
}
-
-.jewel.checkbox label {
+.jewel.checkbox > label {
cursor: auto;
position: relative;
display: block;
@@ -195,8 +194,7 @@ span {
width: 50px;
height: 50px;
}
-
-.jewel.checkbox label {
+.jewel.radiobutton > label {
cursor: auto;
position: relative;
display: block;
@@ -375,7 +373,6 @@ span {
max-width: 100%;
margin: 0;
}
-
.jewel.textfield > input {
font-family: "Lato", sans-serif;
font-size: 14px;
@@ -392,7 +389,6 @@ span {
color: inherit;
outline: none;
}
-
.jewel.textfield > label {
bottom: 0;
color: #ff0000;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
index a96b39c..da62df3 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
@@ -18,14 +18,10 @@
////////////////////////////////////////////////////////////////////////////////
.jewel.checkbox
-
-.jewel.checkbox
> input[type="checkbox"]
width: 50px
height: 50px
-
-.jewel.checkbox
- label
+ > label
cursor: auto
position: relative
display: block
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
index 00f4eb2..eb1cdf6 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
@@ -18,14 +18,10 @@
////////////////////////////////////////////////////////////////////////////////
.jewel.radiobutton
-
-.jewel.radiobutton
> input[type="radio"]
width: 50px
height: 50px
-
-.jewel.checkbox
- label
+ > label
cursor: auto
position: relative
display: block
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
index 62dcfd4..3739212 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
@@ -17,6 +17,7 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Jewel Textfield
.jewel.textfield
position: relative
display: inline-block
@@ -25,7 +26,6 @@
max-width: 100%
margin: 0
-.jewel.textfield
> input
font:
family: $font-stack
@@ -43,8 +43,7 @@
text-align: left
color: inherit
outline: none
-
-.jewel.textfield
+
> label
bottom: 0
color: #ff0000
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 27/49: some minor changes
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit ea8b44ece1fb5848d25639ae387a457cdf1c2f08
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Mar 19 17:10:05 2018 +0100
some minor changes
---
.../royale/org/apache/royale/jewel/TextField.as | 4 +-
.../src/main/sass/components/_button.sass | 3 --
.../components/{_textbutton.sass => _check.sass} | 46 +---------------------
.../components/{_textbutton.sass => _radio.sass} | 46 +---------------------
.../components/{_textbutton.sass => _slider.sass} | 46 +---------------------
.../src/main/sass/components/_textbutton.sass | 7 +---
.../themes/JewelTheme/src/main/sass/defaults.sass | 5 ++-
7 files changed, 11 insertions(+), 146 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
index 69af720..6bd9f01 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/TextField.as
@@ -89,14 +89,14 @@ package org.apache.royale.jewel
input = addElementToWrapper(this,'input') as HTMLInputElement;
input.setAttribute('type', 'text');
- input.className = "vTextField--input";
+ //input.className = "vTextField--input";
//attach input handler to dispatch royale change event when user write in textinput
//goog.events.listen(element, 'change', killChangeHandler);
goog.events.listen(input, 'input', textChangeHandler);
label = document.createElement('label') as HTMLLabelElement;
- label.className = "vTextField--label";
+ //label.className = "vTextField--label";
textNode = document.createTextNode('') as Text;
label.appendChild(textNode);
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
index d04d186..f8c5952 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
@@ -17,9 +17,6 @@
//
////////////////////////////////////////////////////////////////////////////////
-/**
- * Jewel Button
- */
%button-def
cursor: pointer
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_check.sass
similarity index 52%
copy from frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components/_check.sass
index b02123a..7608f63 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_check.sass
@@ -16,49 +16,5 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-
-/**
- * Jewel TextButton
- */
-%textbutton-def
- @extend %button-def
- /* TextField */
- font:
- family: $font-stack
- style: bold
- size: $font-size
- //+trans(0.2s ease-in-out)
- text:
- transform: uppercase
- decoration: none
- //shadow: 0 .063em rgba(black,.3)
- [disabled]
- text:
- shadow: unset
-
-.jewel.textbutton, .jewel.textbutton:hover
- @extend %textbutton-def
-
-.jewel.textbutton
- +button-theme($default-color, $default-font-color)
-
-.jewel.textbutton.primary
- +button-theme($primary-color, $font-color)
-
-.jewel.textbutton.secondary
- +button-theme($secondary-color, $font-color)
-
-.jewel.textbutton.emphasized
- +button-theme($emphasized-color, $font-color)
-
-// /* TextField: */
-// font-family: $font-stack
-// font-size: 14px
-// font-weight: bold
-// color: $font-normal-color
-// text-shadow: 0 1px 0 #555
-
-// padding: 10px 0px
-// display: inline-block
-// min-width: 80px
+.jewel.check
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_radio.sass
similarity index 52%
copy from frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components/_radio.sass
index b02123a..689f939 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_radio.sass
@@ -16,49 +16,5 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-
-/**
- * Jewel TextButton
- */
-%textbutton-def
- @extend %button-def
- /* TextField */
- font:
- family: $font-stack
- style: bold
- size: $font-size
- //+trans(0.2s ease-in-out)
- text:
- transform: uppercase
- decoration: none
- //shadow: 0 .063em rgba(black,.3)
- [disabled]
- text:
- shadow: unset
-
-.jewel.textbutton, .jewel.textbutton:hover
- @extend %textbutton-def
-
-.jewel.textbutton
- +button-theme($default-color, $default-font-color)
-
-.jewel.textbutton.primary
- +button-theme($primary-color, $font-color)
-
-.jewel.textbutton.secondary
- +button-theme($secondary-color, $font-color)
-
-.jewel.textbutton.emphasized
- +button-theme($emphasized-color, $font-color)
-
-// /* TextField: */
-// font-family: $font-stack
-// font-size: 14px
-// font-weight: bold
-// color: $font-normal-color
-// text-shadow: 0 1px 0 #555
-
-// padding: 10px 0px
-// display: inline-block
-// min-width: 80px
+.jewel.radio
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass
similarity index 52%
copy from frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
copy to frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass
index b02123a..1d72a04 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass
@@ -16,49 +16,5 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-
-/**
- * Jewel TextButton
- */
-%textbutton-def
- @extend %button-def
- /* TextField */
- font:
- family: $font-stack
- style: bold
- size: $font-size
- //+trans(0.2s ease-in-out)
- text:
- transform: uppercase
- decoration: none
- //shadow: 0 .063em rgba(black,.3)
- [disabled]
- text:
- shadow: unset
-
-.jewel.textbutton, .jewel.textbutton:hover
- @extend %textbutton-def
-
-.jewel.textbutton
- +button-theme($default-color, $default-font-color)
-
-.jewel.textbutton.primary
- +button-theme($primary-color, $font-color)
-
-.jewel.textbutton.secondary
- +button-theme($secondary-color, $font-color)
-
-.jewel.textbutton.emphasized
- +button-theme($emphasized-color, $font-color)
-
-// /* TextField: */
-// font-family: $font-stack
-// font-size: 14px
-// font-weight: bold
-// color: $font-normal-color
-// text-shadow: 0 1px 0 #555
-
-// padding: 10px 0px
-// display: inline-block
-// min-width: 80px
+.jewel.slider
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
index b02123a..eb82343 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
@@ -16,10 +16,7 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-
-/**
- * Jewel TextButton
- */
+
%textbutton-def
@extend %button-def
/* TextField */
@@ -31,7 +28,7 @@
text:
transform: uppercase
decoration: none
- //shadow: 0 .063em rgba(black,.3)
+ //shadow: 0 -1px 0 rgba(0,0,0,0.70) //0 .063em
[disabled]
text:
shadow: unset
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index b3bd62e..7ecc056 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -26,6 +26,9 @@
// Components
@import "components/button"
-@import "components/textbutton"
+@import "components/check"
@import "components/label"
+@import "components/radio"
+@import "components/slider"
+@import "components/textbutton"
@import "components/textfield"
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 39/49: remove primary from textfield and integrate in
border when focus
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit d10aa7da2b025b6c9533a0a5f61546eedc306a14
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Mar 24 10:48:29 2018 +0100
remove primary from textfield and integrate in border when focus
---
.../src/main/royale/TextInputPlayGround.mxml | 2 +-
.../royale/jewel/supportClasses/TextFieldBase.as | 32 +--------
.../JewelTheme/src/main/resources/defaults.css | 79 +++++++++-------------
.../src/main/sass/components/_textfield.sass | 21 +++---
4 files changed, 46 insertions(+), 88 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index 6880431..e5a1021 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -34,7 +34,7 @@ limitations under the License.
<j:HorizontalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
<j:TextButton text="Check it!" primary="true"/>
- <j:TextField text="A TextField" primary="true"/>
+ <j:TextField text="A TextField"/>
</js:Group>
<js:Group>
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
index 5977727..0a8399e 100644
--- 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
@@ -127,37 +127,7 @@ package org.apache.royale.jewel.supportClasses
//positioner.className = value;
addStyles(positioner, value);
}
-
- private var _primary:Boolean = false;
-
- /**
- * A boolean flag to activate "primary" effect selector.
- * Applies primary color display effect.
- * Colors are defined in royale-jewel.css
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.2
- */
- public function get primary():Boolean
- {
- return _primary;
- }
-
- public function set primary(value:Boolean):void
- {
- if (_primary != value)
- {
- _primary = value;
-
- COMPILE::JS
- {
- toggleStyle(positioner, "primary", _primary);
- }
- }
- }
-
+
private var _isInvalid:Boolean = false;
/**
* A boolean flag to activate "is-invalid" effect selector.
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 8352a0f..92c4c04 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -21,7 +21,7 @@
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Lato", sans-serif;
- color: #FFFFFF;
+ color: #808080;
}
.royale {
@@ -56,18 +56,18 @@ span {
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 1px solid #404040;
- background: linear-gradient(#737373, #595959);
- box-shadow: inset 0 1px 0 #999999;
+ border: 1px solid #b3b3b3;
+ background: linear-gradient(#e6e6e6, #cccccc);
+ box-shadow: inset 0 1px 0 white;
border-radius: 3px;
}
.jewel.button:hover {
- border: 1px solid #333333;
- background: linear-gradient(#666666, #4d4d4d);
+ border: 1px solid #a6a6a6;
+ background: linear-gradient(#d9d9d9, silver);
}
.jewel.button:active {
- border: 1px solid #1a1a1a;
- background: linear-gradient(#4d4d4d, #333333);
+ border: 1px solid #8d8d8d;
+ background: linear-gradient(silver, #a6a6a6);
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
@@ -173,6 +173,11 @@ span {
cursor: unset;
}
+.jewel.checkbox {
+ position: absolute;
+ left: -9999px;
+ cursor: pointer;
+}
.jewel.checkbox .span {
padding-left: 5px;
}
@@ -206,6 +211,7 @@ span {
opacity: 0.7;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
+ focus-outline: none;
}
.jewel.slider .slider:hover {
opacity: 1;
@@ -213,17 +219,17 @@ span {
.jewel.slider .slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
- width: 25px;
- height: 25px;
+ width: 15px;
+ height: 15px;
border-radius: 50%;
- background: #4CAF50;
+ background: #3CADF1;
cursor: pointer;
}
.jewel.slider .slider::-moz-range-thumb {
- width: 25px;
- height: 25px;
+ width: 15px;
+ height: 15px;
border-radius: 50%;
- background: #4CAF50;
+ background: #3CADF1;
cursor: pointer;
}
@@ -234,25 +240,24 @@ span {
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 1px solid #404040;
- background: linear-gradient(#737373, #595959);
- box-shadow: inset 0 1px 0 #999999;
+ border: 1px solid #b3b3b3;
+ background: linear-gradient(#e6e6e6, #cccccc);
+ box-shadow: inset 0 1px 0 white;
border-radius: 3px;
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: bold;
- color: #FFFFFF;
+ color: #808080;
text-transform: uppercase;
text-decoration: none;
- shadow: 0 1px 0 #d9d9d9;
}
.jewel.textbutton:hover {
- border: 1px solid #333333;
- background: linear-gradient(#666666, #4d4d4d);
+ border: 1px solid #a6a6a6;
+ background: linear-gradient(#d9d9d9, silver);
}
.jewel.textbutton:active {
- border: 1px solid #1a1a1a;
- background: linear-gradient(#4d4d4d, #333333);
+ border: 1px solid #8d8d8d;
+ background: linear-gradient(silver, #a6a6a6);
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.textbutton:focus {
@@ -407,34 +412,14 @@ span {
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: normal;
- color: #FFFFFF;
- background: linear-gradient(#8c8c8c, gray);
- border: 1px solid #404040;
+ color: #808080;
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
border-radius: 3px;
box-shadow: none;
}
-
-.jewel.textfield.primary {
- position: relative;
- display: inline-flex;
-}
-.jewel.textfield.primary .input {
- 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;
- background: linear-gradient(#8c8c8c, gray);
+.jewel.textfield .input:focus {
border: 1px solid #0f88d1;
- border-radius: 3px;
- box-shadow: none;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
index 15c2744..6e38184 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
@@ -28,7 +28,7 @@ $textfield-min-width: 74px !default
$textfield-border-radius: 3px
-=textfield-theme($textfield-color, $textfield-text-color)
+=textfield-theme($textfield-text-color)
position: relative
display: inline-flex
@@ -52,24 +52,27 @@ $textfield-border-radius: 3px
color: $textfield-text-color
background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
- border: 1px solid darken($textfield-color, 15%)
+ border: 1px solid darken($default-color, 15%)
border-radius: $textfield-border-radius
//transition: transition
box-shadow: none
+ &:focus
+ border: 1px solid darken($primary-color, 15%)
+
//:hover
// padding: 5px;
// background-color: #DFDFDF;
.jewel.textfield
@if $dark
- +textfield-theme($default-color, $font-dark-color)
+ +textfield-theme($font-dark-color)
@else
- +textfield-theme($default-color, $font-light-color)
+ +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)
+// .jewel.textfield.primary
+// @if $dark
+// +textfield-theme($primary-color, $font-dark-color)
+// @else
+// +textfield-theme($primary-color, $font-light-color)
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 16/49: update css
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 419c582c78fc3f594c6281fcde249f333603e531
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Mar 15 18:40:53 2018 +0100
update css
---
frameworks/themes/JewelTheme/src/main/resources/defaults.css | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 423dc09..714ec69 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -65,7 +65,7 @@
.jewel.button.primary {
background-color: #dedede;
transition-duration: 0.4s;
- color: black;
+ color: #000000;
}
.jewel.button.primary:hover {
background-color: #ededed;
@@ -85,7 +85,7 @@
.jewel.button.secondary {
background-color: #011833;
transition-duration: 0.4s;
- color: black;
+ color: #000000;
}
.jewel.button.secondary:hover {
background-color: #022651;
@@ -105,7 +105,7 @@
.jewel.button.emphasized {
background-color: #1FD348;
transition-duration: 0.4s;
- color: black;
+ color: #000000;
}
.jewel.button.emphasized:hover {
background-color: #30e158;
@@ -160,7 +160,7 @@
.jewel.textbutton.primary {
background-color: #dedede;
transition-duration: 0.4s;
- color: black;
+ color: #000000;
}
.jewel.textbutton.primary:hover {
background-color: #ededed;
@@ -180,7 +180,7 @@
.jewel.textbutton.secondary {
background-color: #011833;
transition-duration: 0.4s;
- color: black;
+ color: #000000;
}
.jewel.textbutton.secondary:hover {
background-color: #022651;
@@ -200,7 +200,7 @@
.jewel.textbutton.emphasized {
background-color: #1FD348;
transition-duration: 0.4s;
- color: black;
+ color: #000000;
}
.jewel.textbutton.emphasized:hover {
background-color: #30e158;
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 43/49: initial work on checkbox. get inline svg with
color variable substitution
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit ce37f5a0b0d01cd04f5b6ed4d025e171e0b17444
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Mar 24 21:32:37 2018 +0100
initial work on checkbox. get inline svg with color variable substitution
---
.../src/main/resources/assets/checkbox-tick.svg | 29 ++++
.../JewelTheme/src/main/resources/defaults.css | 20 +--
.../src/main/sass/components/_checkbox.sass | 150 ++++++++++++++++++++-
3 files changed, 185 insertions(+), 14 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg b/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg
new file mode 100644
index 0000000..64606dc
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg
@@ -0,0 +1,29 @@
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT 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" 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>
\ 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 22b39bc..789eec4 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -203,18 +203,18 @@ span {
border: 1px solid #3CADF1;
border-radius: 3px;
}
-.jewel.checkbox .input:checked {
- border: 3px solid #3CADF1;
+.jewel.checkbox .input:checked, .jewel.checkbox .input:checked:active {
+ border: 1px solid #0f88d1;
+ background: url("data:image/svg+xml;utf8,<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, -350.000000)' fill='#3CADF1'><g transform='translate(760.000000, 345.000000)'><g><polygon id='Tick' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></g></g></svg>");
+ background-size: cover;
+ padding: 2px;
}
-.jewel.checkbox .input:checked:active {
- border: 4px solid #EF5A2A;
+.jewel.checkbox .input:checked path, .jewel.checkbox .input:checked:active path {
+ fill: #ff0000;
}
-.jewel.checkbox .input:checked:after {
- font-size: 14px;
- position: absolute;
- top: 0px;
- left: 3px;
- color: #99a1a7;
+.jewel.checkbox .input:focus {
+ outline: none;
+ border: 1px solid #0f88d1;
}
.jewel.checkbox .input[disabled] {
cursor: unset;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
index 485b972..af39fc9 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
@@ -17,14 +17,156 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Jewel CheckBox
+
+// CheckBox variables
+$checkbox-label-height: 24px
+$checkbox-button-size: 22px
+
.jewel.checkbox
+ cursor: pointer
+ display: inline-block
+
+ margin: 0
+ padding: 0
+
+ position: relative
+ vertical-align: middle
+
+ box-sizing: border-box
+
+ width: 100%
+ height: $checkbox-label-height
+
+ // INPUT
+ .input
+ +appear(none)
+ // position: absolute
+ // cursor: pointer
+ // overflow: hidden
+ // display: inline-block
+
+ // box-sizing: border-box
+ // margin: 0
+ // top: 0//$checkbox-top-offset
+ // left: 0
+
+ width: $checkbox-button-size
+ height: $checkbox-button-size
+
+ line-height: $checkbox-label-height
+
+ border: 1px solid $primary-color
+ border-radius: 3px
+ &:checked, &:checked:active
+ @if $flat
+ background: lighten($primary-color, 25%)
+ @else
+ border: 1px solid darken($primary-color, 15%)
+ //background: url(assets/checkbox-tick.svg)
+ background: url("data:image/svg+xml;utf8,<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, -350.000000)' fill='#{$primary-color}'><g transform='translate(760.000000, 345.000000)'><g><polygon id='Tick' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></g></g></svg>")
+ background-size: cover
+ padding: 2px
+
+ & path
+ fill: #ff0000
+
+
+ //&:checked:after
+ //content: url(assets/jewel-button.svg)
+ //background: #3f51b5 url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSI [...]
+ //background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22 2v20h-20v-20h20zm2-2h-24v24h24v-24zm-6 16.538l-4.592-4.548 4.546-4.587-1.416-1.403-4.545 4.589-4.588-4.543-1.405 1.405 4.593 4.552-4.547 4.592 1.405 1.405 4.555-4.596 4.591 4.55 1.403-1.416z"/></svg>')
+ //background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>")
+ //background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSA [...]
+ //content: url(assets/jewel-button.svg)
+ //font-size: 14px
+ //position: absolute
+ //top: 0px
+ //left: 3px
+ //color: #99a1a7
+
+ &:focus
+ outline: none
+ @if $flat
+ background: lighten($primary-color, 25%)
+ @else
+ border: 1px solid darken($primary-color, 15%)
+
+ &[disabled]
+ cursor: unset
+ border: 1px solid darken($disabled-color, 20%)
+ background: $disabled-color
+ //box-shadow: none
+
+ // LABEL
.span
padding-left: 5px
- .input
- width: 15px
- height: 15px
- border: 1px solid
+
+
+// [type="checkbox"]:not(:checked) + label,
+// [type="checkbox"]:checked + label {
+// position: relative;
+// padding-left: 32px;
+// margin-bottom: 4px;
+// display: inline-block;
+// font-size: 16px;
+// }
+// /* checkbox aspect */
+// [type="checkbox"]:not(:checked) + label:before,
+// [type="checkbox"]:checked + label:before {
+// content: '';
+// position: absolute;
+// left: 0px; top: 0px;
+// width: 22px; height: 22px;
+// border: 2px solid #cccccc;
+// background: #ffffff;
+// border-radius: 4px;
+// box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
+// }
+// /* checked mark aspect */
+// [type="checkbox"]:not(:checked) + label:after,
+// [type="checkbox"]:checked + label:after {
+// content: '✔';
+// position: absolute;
+// top: 0px; left: 5px;
+// font-size: 20px;
+// line-height: 1.2;
+// color: #09ad7e;
+// transition: all .2s;
+// }
+// /* checked mark aspect changes */
+// [type="checkbox"]:not(:checked) + label:after {
+// opacity: 0;
+// transform: scale(0);
+// }
+// [type="checkbox"]:checked + label:after {
+// opacity: 1;
+// transform: scale(1);
+// }
+// /* disabled checkbox */
+// [type="checkbox"]:disabled:not(:checked) + label:before,
+// [type="checkbox"]:disabled:checked + label:before {
+// box-shadow: none;
+// border-color: #999999;
+// background-color: #dddddd;
+// }
+// [type="checkbox"]:disabled:checked + label:after {
+// color: #999999;
+// }
+// [type="checkbox"]:disabled + label {
+// color: #aaaaaa;
+// }
+// /* accessibility */
+// [type="checkbox"]:checked:focus + label:before,
+// [type="checkbox"]:not(:checked):focus + label:before {
+// border: 2px dotted #0000ff;
+// }
+// /* hover style just for information */
+// label:hover:before {
+// border: 2px solid #4778d9!important;
+// background: #ffffff
+
// > input[type="checkbox"]
// width: 50px
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 47/49: disabled labels look in check and radio
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit b1e73b56c0faf84585ba7a3a45893064160802a7
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Mar 25 17:45:09 2018 +0200
disabled labels look in check and radio
---
frameworks/themes/JewelTheme/src/main/resources/defaults.css | 6 ++++++
.../themes/JewelTheme/src/main/sass/components/_checkbox.sass | 3 +++
.../themes/JewelTheme/src/main/sass/components/_radiobutton.sass | 3 +++
3 files changed, 12 insertions(+)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index d39517f..0a78701 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -222,6 +222,9 @@ span {
border: 1px solid #c6c6c6;
background: #F9F9F9;
}
+.jewel.checkbox .input[disabled] + .span {
+ color: #c6c6c6;
+}
.jewel.checkbox .input[disabled]:checked {
border: 1px solid #c6c6c6;
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)'><g><polygon fill='lightgray' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></g></svg>");
@@ -285,6 +288,9 @@ span {
border: 1px solid #c6c6c6;
background: #F9F9F9;
}
+.jewel.radiobutton .input[disabled] + .span {
+ color: #c6c6c6;
+}
.jewel.radiobutton .input[disabled]:checked {
border: 1px solid #c6c6c6;
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)'><g><circle fill='lightgray' cx='11' cy='11' r='6'></circle></g></g></g></svg>");
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
index d1ab54c..e79c952 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
@@ -87,6 +87,9 @@ $checkbox-label-font-size: 16px
border: 1px solid darken($disabled-color, 20%)
background: $disabled-color
+ & + .span
+ color: darken($disabled-color, 20%)
+
&:checked
border: 1px solid darken($disabled-color, 20%)
//background: url(assets/checkbox-tick.svg), $disabled-color
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
index df3f1ed..a224f28 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
@@ -80,6 +80,9 @@ $radiobutton-label-font-size: 16px
border: 1px solid darken($disabled-color, 20%)
background: $disabled-color
+ & + .span
+ color: darken($disabled-color, 20%)
+
&:checked
border: 1px solid darken($disabled-color, 20%)
//background: url(assets/radiobutton-tick.svg), $disabled-color
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 24/49: viewbeads inlib and theme (commented)
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit a5860f92fcb5fd73b38ec678fad9b3a5305e4a24
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Mar 17 23:19:21 2018 +0100
viewbeads inlib and theme (commented)
---
.../projects/Jewel/src/main/resources/defaults.css | 5 ++++-
.../Jewel/src/main/resources/jewel-manifest.xml | 2 ++
.../projects/Jewel/src/main/royale/JewelClasses.as | 3 +++
.../jewel/beads/views/JewelLabelViewBead.mxml} | 23 ++++++++++---------
.../projects/Jewel/src/main/sass/_global.sass | 7 +++---
frameworks/themes/JewelTheme/pom.xml | 11 +++++++++
.../JewelTheme/src/main/resources/defaults.css | 4 ----
.../src/main/resources/jeweltheme-as-manifest.xml | 25 +++++++++++++++++++++
.../src/main/resources/jeweltheme-manifest.xml | 26 ++++++++++++++++++++++
.../src/main/royale/JewelThemeClasses.as | 2 +-
.../{ => jewel}/beads/views/LabelViewBead.mxml | 2 +-
.../src/main/sass/components/_label.sass | 9 ++++----
12 files changed, 93 insertions(+), 26 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 0c58f7b..ece389d 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -30,8 +30,11 @@
display: block !important;
}
+Label {
+ iBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
+}
+
.jewel.label {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
white-space: nowrap;
}
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index b57f9a2..c0840b8 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -35,5 +35,7 @@
<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="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 547acc3..4f909d2 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -43,6 +43,9 @@ package
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.views.JewelLabelViewBead; JewelLabelViewBead;
+
}
}
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/beads/views/LabelViewBead.mxml b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/JewelLabelViewBead.mxml
similarity index 82%
copy from frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/beads/views/LabelViewBead.mxml
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/JewelLabelViewBead.mxml
index 815c4dd..6489b46 100644
--- a/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/beads/views/LabelViewBead.mxml
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/JewelLabelViewBead.mxml
@@ -18,31 +18,32 @@ limitations under the License.
-->
<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"
+ xmlns:j="library://ns.apache.org/royale/jewel">
<fx:Script>
<![CDATA[
- // import org.apache.royale.core.ITitleBarModel;
- // import org.apache.royale.core.UIBase;
- // import org.apache.royale.events.Event;
- // import com.transpiledactionscript.puremvc.royale.employeeadmin.model.CustomPanelWithControlBarModel;
-
+ import org.apache.royale.html.beads.models.TextModel;
+
// private function clickHandler():void
// {
// var newEvent:org.apache.royale.events.Event = new org.apache.royale.events.Event('close');
// UIBase(_strand).dispatchEvent(newEvent);
// }
+
]]>
</fx:Script>
- <js:TextButton text="VIEWBEAD!!"/>
-
- <!-- <js:beads>
+ <js:beads>
<js:MXMLBeadViewDataBinding />
- <js:LayoutChangeNotifier watchedProperty="{titleLabel.text}" />
- <js:LayoutChangeNotifier watchedProperty="{additionalInfoLabel.text}" />
</js:beads>
+ <j:TextButton id="textButton" text="A view bead" primary="true"/>
+
+<!--
+
+ <js:LayoutChangeNotifier watchedProperty="{additionalInfoLabel.text}" />
+
<js:Label id="titleLabel" text="{CustomPanelWithControlBarModel(model).title}" className="TitleBarTitle" >
<js:style>
<js:SimpleCSSStyles fontWeight="inherit" marginLeft="5" />
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/_global.sass
index c886218..707946e 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -29,10 +29,11 @@
> *
display: block !important
-.jewel.label
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel")
- //IBeadView: ClassReference("org.apache.royale.jewel.beads.TextFieldView")
+Label
+ iBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel")
+ //iBeadView: ClassReference("org.apache.royale.jewel.beads.views.JewelLabelViewBead")
//iMeasurementBead: ClassReference("org.apache.royale.html.beads.TextFieldLabelMeasurementBead")
+.jewel.label
white-space: nowrap
TextField
diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml
index 84e7e1e..4eda5c7 100644
--- a/frameworks/themes/JewelTheme/pom.xml
+++ b/frameworks/themes/JewelTheme/pom.xml
@@ -41,6 +41,17 @@
<version>${royale.compiler.version}</version>
<extensions>true</extensions>
<configuration>
+ <namespaces>
+ <namespace>
+ <uri>library://ns.apache.org/royale/jewel</uri>
+ <manifest>${project.basedir}/src/main/resources/jeweltheme-manifest.xml</manifest>
+ </namespace>
+ <namespace>
+ <type>as</type>
+ <uri>library://ns.apache.org/royale/jewel</uri>
+ <manifest>${project.basedir}/src/main/resources/jeweltheme-as-manifest.xml</manifest>
+ </namespace>
+ </namespaces>
<includeClasses>
<includeClass>JewelThemeClasses</includeClass>
</includeClasses>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 9022239..cc10a23 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -217,11 +217,7 @@
cursor: unset;
}
-/**
- * Jewel Label
- */
.jewel.label {
- IBeadView: ClassReference("org.apache.royale.beads.views.LabelViewBead");
font-family: "Lato", sans-serif;
font-size: 0.75rem;
}
diff --git a/frameworks/themes/JewelTheme/src/main/resources/jeweltheme-as-manifest.xml b/frameworks/themes/JewelTheme/src/main/resources/jeweltheme-as-manifest.xml
new file mode 100644
index 0000000..e38496a
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/jeweltheme-as-manifest.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<componentPackage>
+
+
+</componentPackage>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/jeweltheme-manifest.xml b/frameworks/themes/JewelTheme/src/main/resources/jeweltheme-manifest.xml
new file mode 100644
index 0000000..95e305d
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/jeweltheme-manifest.xml
@@ -0,0 +1,26 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<componentPackage>
+
+ <!-- <component id="LabelViewBead" class="org.apache.royale.beads.views.LabelViewBead"/> -->
+
+</componentPackage>
diff --git a/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as b/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
index cb5d275..433d387 100644
--- a/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
+++ b/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
@@ -27,7 +27,7 @@ package
*/
internal class JewelThemeClasses
{
- import org.apache.royale.beads.views.LabelViewBead; LabelViewBead;
+ //import org.apache.royale.jewwl.beads.views.LabelViewBead; LabelViewBead;
}
}
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/beads/views/LabelViewBead.mxml b/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/jewel/beads/views/LabelViewBead.mxml
similarity index 97%
rename from frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/beads/views/LabelViewBead.mxml
rename to frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/jewel/beads/views/LabelViewBead.mxml
index 815c4dd..e8963bb 100644
--- a/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/beads/views/LabelViewBead.mxml
+++ b/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/jewel/beads/views/LabelViewBead.mxml
@@ -35,7 +35,7 @@ limitations under the License.
]]>
</fx:Script>
- <js:TextButton text="VIEWBEAD!!"/>
+ <js:TextButton text="LABELVIEWBEAD!!"/>
<!-- <js:beads>
<js:MXMLBeadViewDataBinding />
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_label.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_label.sass
index 27906d1..8accaa7 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_label.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_label.sass
@@ -17,12 +17,11 @@
//
////////////////////////////////////////////////////////////////////////////////
-/**
- * Jewel Label
- */
-.jewel.label
+Label
+ //iBeadView: ClassReference("org.apache.royale.jewel.beads.views.LabelViewBead")
//IBeadView: ClassReference("org.apache.royale.html.beads.TextFieldView")
- IBeadView: ClassReference("org.apache.royale.beads.views.LabelViewBead")
+
+.jewel.label
font:
family: $font-stack
size: $font-size
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 31/49: Headings and text styling,
condense vars in one file
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 54f5e07d52da7c1fb95271ae67a6f7e0a360b3dc
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Mar 21 16:46:09 2018 +0100
Headings and text styling, condense vars in one file
---
.../src/main/royale/ButtonPlayGround.mxml | 10 ++--
.../src/main/royale/TextInputPlayGround.mxml | 20 +++++++-
.../royale/org/apache/royale/jewel/TextField.as | 2 +-
.../JewelTheme/src/main/resources/defaults.css | 46 +++++++++---------
.../src/main/sass/_default-color-palette.sass | 55 ----------------------
.../themes/JewelTheme/src/main/sass/_global.sass | 20 ++++++++
.../JewelTheme/src/main/sass/_variables.sass | 42 ++++++++++++++---
.../src/main/sass/components/_button.sass | 12 ++++-
.../src/main/sass/components/_textbutton.sass | 3 +-
.../src/main/sass/components/_textfield.sass | 4 +-
.../themes/JewelTheme/src/main/sass/defaults.sass | 1 -
11 files changed, 118 insertions(+), 97 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index 51b95e5..32596a8 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -19,6 +19,7 @@ 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">
<fx:Script>
@@ -35,13 +36,10 @@ limitations under the License.
<j:VerticalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
- <j:Label text="Basic"/>
- <js:Button/>
- <js:TextButton text="Basic"/>
-
- <j:Label text="Jewel Button"/>
+ <html:H4 text="Jewel Button"/>
<j:Button primary="true"/>
- <j:Label text="Jewel TextButton"/>
+
+ <html:H4 text="Jewel TextButton"/>
<j:TextButton text="Default"/>
<j:TextButton text="Button With More Text"/>
<j:TextButton text="Primary" primary="true"/>
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index cb236e9..903bd68 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -19,10 +19,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">
+ <js:beads>
+ <j:VerticalLayoutWithPaddingAndGap gap="10"/>
+ </js:beads>
- <j:RadioButton/>
+ <html:H1 text="Heading H1"/>
+ <html:H2 text="Heading H2"/>
+ <html:H3 text="Heading H3"/>
+ <html:H4 text="Heading H4"/>
+
+ <html:Span text="Normal text to use in labels, texts and fields with single line or multiple lines."/>
+
+ <html:H4 text="Jewel TextField"/>
+
<j:TextField text="Text Input" width="120" height="40"/>
+
+ <html:H4 text="Jewel CheckBox"/>
<j:CheckBox/>
+
+ <html:H4 text="Jewel RadioButton"/>
+ <j:RadioButton/>
+
</js:Group>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
index 6bd9f01..c3e18d5 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/TextField.as
@@ -50,7 +50,7 @@ package org.apache.royale.jewel
{
super();
- typeNames = "jewel textField";
+ typeNames = "jewel textfield";
}
COMPILE::JS
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index dac767d..cb1350f 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -20,6 +20,8 @@
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
+ font-family: "Lato", sans-serif;
+ color: #808080;
}
.royale {
@@ -27,6 +29,26 @@
margin: 10px;
}
+h1 {
+ font-size: 22px;
+}
+
+h2 {
+ font-size: 19px;
+}
+
+h3 {
+ font-size: 17px;
+}
+
+h4 {
+ font-size: 15px;
+}
+
+span {
+ font-size: 14px;
+}
+
.jewel.button {
cursor: pointer;
display: inline-block;
@@ -38,8 +60,6 @@
background: linear-gradient(#e6e6e6, #cccccc);
box-shadow: inset 0 1px 0 white;
border-radius: 3px;
- transition-duration: 1s;
- transition-timing-function: ease;
}
.jewel.button:hover {
border: 1px solid #a6a6a6;
@@ -71,8 +91,6 @@
background: linear-gradient(#54b7f3, #24a3ef);
box-shadow: inset 0 1px 0 #9bd5f8;
border-radius: 3px;
- transition-duration: 1s;
- transition-timing-function: ease;
}
.jewel.button.primary:hover {
border: 1px solid #0d79ba;
@@ -104,8 +122,6 @@
background: linear-gradient(#f16c42, #ed4812);
box-shadow: inset 0 1px 0 #f6a389;
border-radius: 3px;
- transition-duration: 1s;
- transition-timing-function: ease;
}
.jewel.button.secondary:hover {
border: 1px solid #a6320d;
@@ -137,8 +153,6 @@
background: linear-gradient(#45c354, #34a241);
box-shadow: inset 0 1px 0 #7fd68a;
border-radius: 3px;
- transition-duration: 1s;
- transition-timing-function: ease;
}
.jewel.button.emphasized:hover {
border: 1px solid #21682a;
@@ -175,8 +189,6 @@
background: linear-gradient(#e6e6e6, #cccccc);
box-shadow: inset 0 1px 0 white;
border-radius: 3px;
- transition-duration: 1s;
- transition-timing-function: ease;
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: bold;
@@ -187,7 +199,6 @@
.jewel.textbutton:hover {
border: 1px solid #a6a6a6;
background: linear-gradient(#d9d9d9, silver);
- box-shadow: inser 0 0 0;
}
.jewel.textbutton:active {
border: 1px solid #8d8d8d;
@@ -218,8 +229,6 @@
background: linear-gradient(#54b7f3, #24a3ef);
box-shadow: inset 0 1px 0 #9bd5f8;
border-radius: 3px;
- transition-duration: 1s;
- transition-timing-function: ease;
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: bold;
@@ -231,7 +240,6 @@
.jewel.textbutton.primary:hover {
border: 1px solid #0d79ba;
background: linear-gradient(#3CADF1, #1198e9);
- box-shadow: inser 0 0 0;
}
.jewel.textbutton.primary:active {
border: 1px solid #0a5a8a;
@@ -262,8 +270,6 @@
background: linear-gradient(#f16c42, #ed4812);
box-shadow: inset 0 1px 0 #f6a389;
border-radius: 3px;
- transition-duration: 1s;
- transition-timing-function: ease;
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: bold;
@@ -275,7 +281,6 @@
.jewel.textbutton.secondary:hover {
border: 1px solid #a6320d;
background: linear-gradient(#EF5A2A, #d64010);
- box-shadow: inser 0 0 0;
}
.jewel.textbutton.secondary:active {
border: 1px solid #772409;
@@ -306,8 +311,6 @@
background: linear-gradient(#45c354, #34a241);
box-shadow: inset 0 1px 0 #7fd68a;
border-radius: 3px;
- transition-duration: 1s;
- transition-timing-function: ease;
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: bold;
@@ -319,7 +322,6 @@
.jewel.textbutton.emphasized:hover {
border: 1px solid #21682a;
background: linear-gradient(#3AB549, #2e8e39);
- box-shadow: inser 0 0 0;
}
.jewel.textbutton.emphasized:active {
border: 1px solid #15411a;
@@ -348,7 +350,7 @@
margin: 0;
}
-.jewel.textfield > input {
+.jewel.textfield input {
font-size: 16px;
font-family: "Lato", sans-serif;
border: none;
@@ -364,7 +366,7 @@
outline: none;
}
-.jewel.textfield > label {
+.jewel.textfield label {
bottom: 0;
color: #ff0000;
font-size: 13px;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass b/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
deleted file mode 100644
index d585185..0000000
--- a/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
+++ /dev/null
@@ -1,55 +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.
-//
-////////////////////////////////////////////////////////////////////////////////
-
-// CONSTANTS
-// 12 Color Themes (this will go to one separate project each one)
-$red: #EC1C24
-$amethyst: #922590
-$violet: #662C90
-$Sapphire: #2C74BE
-$blue: #3CADF1
-$turquoise: #29A89F
-$green: #3AB549
-$emerald: #8CC63C
-$yellow: #FCEF0A
-$sunflower: #F8B13F
-$orange: #F7941D
-$topaz: #EF5A2A
-$font-theme-color: #FFFFFF
-
-$light-color: #d9d9d9
-$font-light-color: #808080
-
-$dark-color: #666666
-$font-dark-color: #FFFFFF
-
-//Theme Style (Flat or Gradient)
-$flat: false
-$transitions-enable: false
-$transition-duration: .3s
-$transition-timing: easein
-
-// VARIABLES
-$default-color: $light-color // change this from light to dark
-$primary-color: $blue
-$secondary-color: $topaz
-$emphasized-color: $green
-
-$default-font-color: $font-light-color // change this from light to dark
-$disabled-color: #F9F9F9 // maybe make it dependent of theme colors
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
index 23fa5ea..0a30c44 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
@@ -26,6 +26,26 @@
-webkit-box-sizing: border-box
box-sizing: border-box
+ font:
+ family: $font-stack
+ color: $default-font-color
+
+
.royale
padding: 10px
margin: 10px
+
+h1
+ font-size: 22px
+
+h2
+ font-size: 19px
+
+h3
+ font-size: 17px
+
+h4
+ font-size: 15px
+
+span
+ font-size: 14px
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
index 73291fb..1d5a14f 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -17,16 +17,46 @@
//
////////////////////////////////////////////////////////////////////////////////
+// CONSTANTS
+// 12 Color Themes (this will go to one separate project each one)
+$red: #EC1C24
+$amethyst: #922590
+$violet: #662C90
+$Sapphire: #2C74BE
+$blue: #3CADF1
+$turquoise: #29A89F
+$green: #3AB549
+$emerald: #8CC63C
+$yellow: #FCEF0A
+$sunflower: #F8B13F
+$orange: #F7941D
+$topaz: #EF5A2A
+$font-theme-color: #FFFFFF
+
+$light-color: #d9d9d9
+$font-light-color: #808080
+
+$dark-color: #666666
+$font-dark-color: #FFFFFF
+
+//Theme Style (Flat or Gradient)
+$flat: false
+$transitions-enable: false
+$transition-duration: .3s
+$transition-timing: easein
+
+// FONTS
$font-stack: 'Lato', sans-serif
$font-size: 14px//0.75rem
-// Button variables
-$button-margin: 0 !default
-$button-padding: 10px 16px !default
-$button-min-height: 34px !default
-$button-min-width: 74px !default
+// VARIABLES
+$default-color: $light-color // change this from light to dark
+$primary-color: $blue
+$secondary-color: $topaz
+$emphasized-color: $green
-$button-border-radius: 3px
+$default-font-color: $font-light-color // change this from light to dark
+$disabled-color: #F9F9F9 // maybe make it dependent of theme colors
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
index 17a4fb7..6b8551f 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
@@ -17,6 +17,14 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Button variables
+$button-margin: 0 !default
+$button-padding: 10px 16px !default
+$button-min-height: 34px !default
+$button-min-width: 74px !default
+
+$button-border-radius: 3px
+
=button-theme($button-color)
cursor: pointer
display: inline-block
@@ -31,7 +39,7 @@
border: 0px solid
background: $button-color
@else
- border: 1px solid darken($button-color, 15%)// .094em solid
+ border: 1px solid darken($button-color, 15%)// .094em
background: linear-gradient(lighten($button-color, 5%), darken($button-color, 5%))
box-shadow: inset 0 1px 0 lighten($button-color, 20%)
border-radius: $button-border-radius //.625em
@@ -45,7 +53,7 @@
@if $flat
background: darken($button-color, 5%)
@else
- border: 1px solid darken($button-color, 20%)// .094em solid
+ border: 1px solid darken($button-color, 20%)// .094em
background: linear-gradient($button-color, darken($button-color, 10%))
&:active
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
index 663ada9..03b66da 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
@@ -17,6 +17,7 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Note: Use Button variables
=textbutton-theme($button-color, $text-color)
cursor: pointer
@@ -44,7 +45,7 @@
font:
family: $font-stack
- size: $font-size//+trans(0.2s ease-in-out)
+ size: $font-size
weight: bold
color: $text-color
text:
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
index 952e7c5..d2d842a 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
@@ -25,7 +25,7 @@
max-width: 100%
margin: 0
-.jewel.textfield > input
+.jewel.textfield input
font-size: 16px
font-family: 'Lato', sans-serif
@@ -41,7 +41,7 @@
color: inherit
outline: none
-.jewel.textfield > label
+.jewel.textfield label
bottom: 0
color: #ff0000
font-size: 13px
diff --git a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index 7ecc056..e377e4d 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -16,7 +16,6 @@
*/
// Variables
-@import "default-color-palette"
@import "variables"
@import "mixins"
@import "functions"
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 19/49: Moved util functions to package-level ones
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 18568d106551989ea5338350b187d055b60f92d3
Author: Harbs <ha...@in-tools.com>
AuthorDate: Fri Mar 16 13:05:15 2018 +0200
Moved util functions to package-level ones
(not sure about removeAllStyles — it seemed to have had a bug so it was probably not functional either way)
---
.../projects/Core/src/main/royale/CoreClasses.as | 5 +++
.../apache/royale/utils/cssclasslist/addStyles.as | 47 ++++++++++++++++++++++
.../royale/utils/cssclasslist/removeAllStyles.as | 41 +++++++++++++++++++
.../royale/utils/cssclasslist/removeStyles.as | 46 +++++++++++++++++++++
.../royale/utils/cssclasslist/toggleStyle.as | 39 ++++++++++++++++++
.../main/royale/org/apache/royale/core/UIBase.as | 4 +-
.../main/royale/org/apache/royale/jewel/Button.as | 8 ++--
7 files changed, 184 insertions(+), 6 deletions(-)
diff --git a/frameworks/projects/Core/src/main/royale/CoreClasses.as b/frameworks/projects/Core/src/main/royale/CoreClasses.as
index 2ec8859..3df4330 100644
--- a/frameworks/projects/Core/src/main/royale/CoreClasses.as
+++ b/frameworks/projects/Core/src/main/royale/CoreClasses.as
@@ -226,6 +226,11 @@ internal class CoreClasses
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;
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
new file mode 100644
index 0000000..aa995a0
--- /dev/null
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/addStyles.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 "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 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
+ */
+ public function addStyles(wrapper:IUIBase, 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);
+ }
+ }
+
+}
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/removeAllStyles.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/removeAllStyles.as
new file mode 100644
index 0000000..4d19c79
--- /dev/null
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/removeAllStyles.as
@@ -0,0 +1,41 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed 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 all styles
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function removeAllStyles(wrapper:IUIBase):void
+ {
+ var classList:DOMTokenList = wrapper.element.classList;
+ var i:int;
+ for( i = classList.length -1; i > 0; i-- )
+ {
+ classList.remove(classList[i]);
+ }
+ }
+
+}
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
new file mode 100644
index 0000000..21f59e0
--- /dev/null
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/removeStyles.as
@@ -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 "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
+ *
+ * @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
+ */
+ public function removeStyles(wrapper:IUIBase, 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);
+ }
+ }
+}
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
new file mode 100644
index 0000000..8ef9224
--- /dev/null
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/toggleStyle.as
@@ -0,0 +1,39 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed 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.
+ *
+ * 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
+ */
+ public function toggleStyle(wrapper:IUIBase, value:String, force:Boolean = false):Boolean
+ {
+ return wrapper.element.classList.toggle(value, force);
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as
index de5e089..c14e113 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as
@@ -37,7 +37,7 @@ package org.apache.royale.core
{
import org.apache.royale.html.util.addElementToWrapper;
import org.apache.royale.utils.CSSUtils;
- import org.apache.royale.util.ClassListUtil;
+ import org.apache.royale.utils.cssclasslist.addStyles;
}
/**
@@ -1085,7 +1085,7 @@ package org.apache.royale.core
COMPILE::JS
protected function setClassName(value:String):void
{
- ClassListUtil.addStyles(this, value);
+ addStyles(this, value);
}
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 5e4dba9..4059764 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
@@ -23,7 +23,7 @@ package org.apache.royale.jewel
COMPILE::JS
{
import org.apache.royale.core.WrappedHTMLElement;
- import org.apache.royale.util.ClassListUtil;
+ import org.apache.royale.utils.cssclasslist.toggleStyle;
}
/**
@@ -88,7 +88,7 @@ package org.apache.royale.jewel
COMPILE::JS
{
- ClassListUtil.toggleStyle(this, "primary", value);
+ toggleStyle(this, "primary", value);
}
}
}
@@ -118,7 +118,7 @@ package org.apache.royale.jewel
COMPILE::JS
{
- ClassListUtil.toggleStyle(this, "secondary", value);
+ toggleStyle(this, "secondary", value);
}
}
}
@@ -148,7 +148,7 @@ package org.apache.royale.jewel
COMPILE::JS
{
- ClassListUtil.toggleStyle(this, "emphasized", value);
+ toggleStyle(this, "emphasized", value);
}
}
}
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 25/49: changes to slider
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 24d3b4af9ddf8be2285d9d15316fcb9c7098507a
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Mar 19 11:45:14 2018 +0100
changes to slider
---
frameworks/projects/Jewel/src/main/resources/defaults.css | 5 +++++
.../Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as | 2 ++
.../Jewel/src/main/royale/org/apache/royale/jewel/Slider.as | 7 ++++---
frameworks/projects/Jewel/src/main/sass/_global.sass | 4 ++++
4 files changed, 15 insertions(+), 3 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index ece389d..583ef87 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -47,6 +47,11 @@ Slider {
IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView");
IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout");
IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController");
+}
+
+.jewel.slider {
+ width: 100px;
+ height: 30px;
position: relative;
}
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 05a5b3d..b4a8e91 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
@@ -60,6 +60,8 @@ package org.apache.royale.jewel
public function RadioButton(upState:DisplayObject=null, overState:DisplayObject=null, downState:DisplayObject=null, hitTestState:DisplayObject=null)
{
super(upState, overState, downState, hitTestState);
+
+ typeNames = "jewel radio"
}
}
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 9d4f6d9..8d52a61 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
@@ -23,6 +23,7 @@ package org.apache.royale.jewel
COMPILE::JS
{
import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
}
[Event(name="valueChange", type="org.apache.royale.events.Event")]
@@ -56,17 +57,17 @@ package org.apache.royale.jewel
public function Slider()
{
super();
- }
+ typeNames = "jewel slider"
+ }
-
/**
* @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
*/
COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
- return super.createElement();
+ return addElementToWrapper(this,'div');
}
}
}
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/_global.sass
index 707946e..4233a68 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -46,6 +46,10 @@ Slider
IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView")
IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout")
IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController")
+
+.jewel.slider
+ width: 100px
+ height: 30px
position: relative
.SliderTrack
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 23/49: remove settings
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit f96fcacba7801e4c0fc89c816d7ed2cfa1f6266b
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Mar 17 23:04:28 2018 +0100
remove settings
---
examples/royale/JewelExample/.vscode/settings.json | 2 +-
frameworks/projects/Jewel/.vscode/settings.json | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/examples/royale/JewelExample/.vscode/settings.json b/examples/royale/JewelExample/.vscode/settings.json
index 1f5a970..e79d739 100644
--- a/examples/royale/JewelExample/.vscode/settings.json
+++ b/examples/royale/JewelExample/.vscode/settings.json
@@ -1,3 +1,3 @@
{
- "nextgenas.sdk.framework": "/Users/carlosrovira/Dev/Royale/Sdks/apache-royale-0.9.2-SNAPSHOT"
+ "nextgenas.sdk.framework": "/Users/carlosrovira/Dev/Royale/Sdks/apache-royale-snapshot"
}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/.vscode/settings.json b/frameworks/projects/Jewel/.vscode/settings.json
index 1f5a970..e79d739 100644
--- a/frameworks/projects/Jewel/.vscode/settings.json
+++ b/frameworks/projects/Jewel/.vscode/settings.json
@@ -1,3 +1,3 @@
{
- "nextgenas.sdk.framework": "/Users/carlosrovira/Dev/Royale/Sdks/apache-royale-0.9.2-SNAPSHOT"
+ "nextgenas.sdk.framework": "/Users/carlosrovira/Dev/Royale/Sdks/apache-royale-snapshot"
}
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 03/49: uibase refactor to classList
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 595f471724bc02c51c7e985498f51316e3f9451c
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Mar 12 23:46:16 2018 +0100
uibase refactor to classList
---
.../main/royale/org/apache/royale/core/UIBase.as | 1581 ++++++++++++++++++++
.../main/royale/org/apache/royale/jewel/Button.as | 14 +-
.../royale/org/apache/royale/jewel/TextButton.as | 4 +-
3 files changed, 1587 insertions(+), 12 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as
new file mode 100644
index 0000000..7abe638
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as
@@ -0,0 +1,1581 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT 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
+{
+ COMPILE::SWF
+ {
+ import flash.display.DisplayObject;
+ import flash.display.Sprite;
+ import flash.display.Stage;
+ import org.apache.royale.events.utils.MouseEventConverter;
+ }
+
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.events.ValueChangeEvent;
+ import org.apache.royale.utils.loadBeadFromValuesManager;
+ import org.apache.royale.utils.StringUtil;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.html.util.addElementToWrapper;
+ import org.apache.royale.utils.CSSUtils;
+ }
+
+ /**
+ * Set a different class for click 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="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.0
+ */
+ [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.0
+ */
+ [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.0
+ */
+ [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.0
+ */
+ [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.0
+ */
+ [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.0
+ */
+ [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.0
+ */
+ [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.0
+ */
+ [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.0
+ */
+ [Event(name="doubleClick", type="org.apache.royale.events.MouseEvent")]
+
+ /**
+ * 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 UIBase extends HTMLElementWrapper implements IStrandWithModel, IEventDispatcher, IParentIUIBase, IStyleableObject, ILayoutChild, IRoyaleElement
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function UIBase()
+ {
+ super();
+
+ COMPILE::SWF
+ {
+ MouseEventConverter.setupInstanceConverters(this);
+ doubleClickEnabled = true; // make JS and flash consistent
+ }
+
+ COMPILE::JS
+ {
+ createElement();
+ }
+ }
+
+ COMPILE::SWF
+ public function get $displayObject():DisplayObject
+ {
+ return this;
+ }
+
+ public function get royale_wrapper():Object
+ {
+ return this;
+ }
+ public function set royale_wrapper(value:Object):void
+ {
+ }
+
+ private var _explicitWidth:Number;
+
+ /**
+ * The explicitly set width (as opposed to measured width
+ * or percentage width).
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get explicitWidth():Number
+ {
+ return _explicitWidth;
+ }
+
+ /**
+ * @private
+ */
+ public function set explicitWidth(value:Number):void
+ {
+ if (_explicitWidth == value)
+ return;
+
+ // width can be pixel or percent not both
+ if (!isNaN(value))
+ _percentWidth = NaN;
+
+ _explicitWidth = value;
+
+ dispatchEvent(new Event("explicitWidthChanged"));
+ }
+
+ private var _explicitHeight:Number;
+
+ /**
+ * The explicitly set width (as opposed to measured width
+ * or percentage width).
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get explicitHeight():Number
+ {
+ return _explicitHeight;
+ }
+
+ /**
+ * @private
+ */
+ public function set explicitHeight(value:Number):void
+ {
+ if (_explicitHeight == value)
+ return;
+
+ // height can be pixel or percent not both
+ if (!isNaN(value))
+ _percentHeight = NaN;
+
+ _explicitHeight = value;
+
+ dispatchEvent(new Event("explicitHeightChanged"));
+ }
+
+ private var _percentWidth:Number;
+
+ /**
+ * The requested percentage width this component
+ * should have in the parent container. Note that
+ * the actual percentage may be different if the
+ * total is more than 100% or if there are other
+ * components with explicitly set widths.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get percentWidth():Number
+ {
+ return _percentWidth;
+ }
+
+ /**
+ * @private
+ */
+ public function set percentWidth(value:Number):void
+ {
+ COMPILE::SWF {
+ if (_percentWidth == value)
+ return;
+
+ if (!isNaN(value))
+ _explicitWidth = NaN;
+
+ _percentWidth = value;
+ }
+ COMPILE::JS {
+ this._percentWidth = value;
+ this.positioner.style.width = value.toString() + '%';
+ if (!isNaN(value))
+ this._explicitWidth = NaN;
+ }
+
+ dispatchEvent(new Event("percentWidthChanged"));
+ }
+
+ private var _percentHeight:Number;
+
+ /**
+ * The requested percentage height this component
+ * should have in the parent container. Note that
+ * the actual percentage may be different if the
+ * total is more than 100% or if there are other
+ * components with explicitly set heights.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get percentHeight():Number
+ {
+ return _percentHeight;
+ }
+
+ /**
+ * @private
+ */
+ public function set percentHeight(value:Number):void
+ {
+ COMPILE::SWF {
+ if (_percentHeight == value)
+ return;
+
+ if (!isNaN(value))
+ _explicitHeight = NaN;
+
+ _percentHeight = value;
+ }
+
+ COMPILE::JS {
+ this._percentHeight = value;
+ this.positioner.style.height = value.toString() + '%';
+ if (!isNaN(value))
+ this._explicitHeight = NaN;
+ }
+
+ dispatchEvent(new Event("percentHeightChanged"));
+ }
+
+ private var _width:Number;
+
+ [Bindable("widthChanged")]
+ [PercentProxy("percentWidth")]
+ /**
+ * The width of the component. If no width has been previously
+ * set the default width may be specified in the IValuesImpl
+ * or determined as the bounding box around all child
+ * components and graphics.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ COMPILE::SWF
+ override public function get width():Number
+ {
+ var w:Number = _width;
+ if (isNaN(w)) {
+ w = $width;
+ }
+ return w;
+ }
+
+ [Bindable("widthChanged")]
+ [PercentProxy("percentWidth")]
+ /**
+ * @royaleignorecoercion String
+ */
+ COMPILE::JS
+ public function get width():Number
+ {
+ var pixels:Number;
+ var strpixels:String = element.style.width as String;
+ if(strpixels == null)
+ pixels = NaN;
+ else
+ pixels = CSSUtils.toNumber(strpixels,NaN);
+ if (isNaN(pixels)) {
+ pixels = positioner.offsetWidth;
+ if (pixels == 0 && positioner.scrollWidth != 0) {
+ // invisible child elements cause offsetWidth to be 0.
+ pixels = positioner.scrollWidth;
+ }
+ }
+ return pixels;
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ override public function set width(value:Number):void
+ {
+ if (explicitWidth !== value)
+ {
+ explicitWidth = value;
+ }
+
+ setWidth(value);
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::JS
+ public function set width(value:Number):void
+ {
+ if (explicitWidth !== value)
+ {
+ explicitWidth = value;
+ }
+
+ setWidth(value);
+ }
+
+ /**
+ * Retrieve the low-level bounding box width.
+ * Not implemented in JS.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ COMPILE::SWF
+ public function get $width():Number
+ {
+ return super.width;
+ }
+
+ private var _height:Number;
+
+ [Bindable("heightChanged")]
+ [PercentProxy("percentHeight")]
+ /**
+ * The height of the component. If no height has been previously
+ * set the default height may be specified in the IValuesImpl
+ * or determined as the bounding box around all child
+ * components and graphics.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ COMPILE::SWF
+ override public function get height():Number
+ {
+ var h:Number = _height;
+ if (isNaN(h)) {
+ h = $height;
+ }
+ return h;
+ }
+
+ [Bindable("heightChanged")]
+ [PercentProxy("percentHeight")]
+ /**
+ * @royaleignorecoercion String
+ */
+ COMPILE::JS
+ public function get height():Number
+ {
+ var pixels:Number;
+ var strpixels:String = element.style.height as String;
+ if(strpixels == null)
+ pixels = NaN;
+ else
+ pixels = CSSUtils.toNumber(strpixels,NaN);
+ if (isNaN(pixels)) {
+ pixels = positioner.offsetHeight;
+ if (pixels == 0 && positioner.scrollHeight != 0) {
+ // invisible child elements cause offsetHeight to be 0.
+ pixels = positioner.scrollHeight;
+ }
+ }
+ return pixels;
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ override public function set height(value:Number):void
+ {
+ if (explicitHeight !== value)
+ {
+ explicitHeight = value;
+ }
+
+ setHeight(value);
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::JS
+ public function set height(value:Number):void
+ {
+ if (explicitHeight !== value)
+ {
+ explicitHeight = value;
+ }
+
+ setHeight(value);
+ }
+
+ /**
+ * Retrieve the low-level bounding box height.
+ * Not implemented in JS.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ COMPILE::SWF
+ public function get $height():Number
+ {
+ return super.height;
+ }
+
+ /**
+ * @copy org.apache.royale.core.ILayoutChild#setHeight
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function setHeight(value:Number, noEvent:Boolean = false):void
+ {
+ if (_height !== value)
+ {
+ _height = value;
+ COMPILE::JS
+ {
+ this.positioner.style.height = value.toString() + 'px';
+ }
+ if (!noEvent)
+ dispatchEvent(new Event("heightChanged"));
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.ILayoutChild#setWidth
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function setWidth(value:Number, noEvent:Boolean = false):void
+ {
+ if (_width !== value)
+ {
+ _width = value;
+ COMPILE::JS
+ {
+ this.positioner.style.width = value.toString() + 'px';
+ }
+ if (!noEvent)
+ dispatchEvent(new Event("widthChanged"));
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.ILayoutChild#setWidthAndHeight
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function setWidthAndHeight(newWidth:Number, newHeight:Number, noEvent:Boolean = false):void
+ {
+ if (_width !== newWidth)
+ {
+ _width = newWidth;
+ COMPILE::JS
+ {
+ this.positioner.style.width = newWidth.toString() + 'px';
+ }
+ if (!noEvent)
+ dispatchEvent(new Event("widthChanged"));
+ }
+ if (_height !== newHeight)
+ {
+ _height = newHeight;
+ COMPILE::JS
+ {
+ this.positioner.style.height = newHeight.toString() + 'px';
+ }
+ if (!noEvent)
+ dispatchEvent(new Event("heightChanged"));
+ }
+ dispatchEvent(new Event("sizeChanged"));
+ }
+
+ /**
+ * @copy org.apache.royale.core.ILayoutChild#isWidthSizedToContent
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function isWidthSizedToContent():Boolean
+ {
+ if (!isNaN(_explicitWidth))
+ return false;
+ if (!isNaN(_percentWidth))
+ return false;
+ var left:* = ValuesManager.valuesImpl.getValue(this, "left");
+ var right:* = ValuesManager.valuesImpl.getValue(this, "right");
+ return (left === undefined || right === undefined);
+
+ }
+
+ /**
+ * @copy org.apache.royale.core.ILayoutChild#isHeightSizedToContent
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function isHeightSizedToContent():Boolean
+ {
+ if (!isNaN(_explicitHeight))
+ return false;
+ if (!isNaN(_percentHeight))
+ return false;
+ var top:* = ValuesManager.valuesImpl.getValue(this, "top");
+ var bottom:* = ValuesManager.valuesImpl.getValue(this, "bottom");
+ return (top === undefined || bottom === undefined);
+ }
+
+ private var _x:Number;
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ override public function set x(value:Number):void
+ {
+ super.x = _x = value;
+ if (!style)
+ style = { left: value };
+ else
+ style.left = value;
+ }
+
+ /**
+ * @royaleignorecoercion HTMLElement
+ */
+ COMPILE::JS
+ public function set x(value:Number):void
+ {
+ //positioner.style.position = 'absolute';
+ if (positioner.parentNode != positioner.offsetParent)
+ value += (positioner.parentNode as HTMLElement).offsetLeft;
+ positioner.style.left = value.toString() + 'px';
+ }
+
+ /**
+ * @royaleignorecoercion String
+ * @royaleignorecoercion HTMLElement
+ */
+ COMPILE::JS
+ public function get x():Number
+ {
+ var strpixels:String = positioner.style.left as String;
+ var pixels:Number = parseFloat(strpixels);
+ if (isNaN(pixels))
+ {
+ pixels = positioner.offsetLeft;
+ if (positioner.parentNode != positioner.offsetParent)
+ pixels -= (positioner.parentNode as HTMLElement).offsetLeft;
+ }
+ return pixels;
+ }
+
+ /**
+ * @copy org.apache.royale.core.ILayoutChild#setX
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ * @royaleignorecoercion HTMLElement
+ */
+ public function setX(value:Number):void
+ {
+ COMPILE::SWF
+ {
+ super.x = value;
+ }
+ COMPILE::JS
+ {
+ //positioner.style.position = 'absolute';
+ if (positioner.parentNode != positioner.offsetParent)
+ value += (positioner.parentNode as HTMLElement).offsetLeft;
+ positioner.style.left = value.toString() + 'px';
+ }
+ }
+
+ private var _y:Number;
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ override public function set y(value:Number):void
+ {
+ super.y = _y = value;
+ if (!style)
+ style = { top: value };
+ else
+ style.top = value;
+ }
+
+ /**
+ * @royaleignorecoercion HTMLElement
+ */
+ COMPILE::JS
+ public function set y(value:Number):void
+ {
+ //positioner.style.position = 'absolute';
+ if (positioner.parentNode != positioner.offsetParent)
+ value += (positioner.parentNode as HTMLElement).offsetTop;
+ positioner.style.top = value.toString() + 'px';
+ }
+
+ /**
+ * @royaleignorecoercion String
+ * @royaleignorecoercion HTMLElement
+ */
+ COMPILE::JS
+ public function get y():Number
+ {
+ var strpixels:String = positioner.style.top as String;
+ var pixels:Number = parseFloat(strpixels);
+ if (isNaN(pixels))
+ {
+ pixels = positioner.offsetTop;
+ if (positioner.parentNode != positioner.offsetParent)
+ pixels -= (positioner.parentNode as HTMLElement).offsetTop;
+ }
+ return pixels;
+ }
+
+ /**
+ * @copy org.apache.royale.core.ILayoutChild#setY
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ * @royaleignorecoercion HTMLElement
+ */
+ public function setY(value:Number):void
+ {
+ COMPILE::SWF
+ {
+ super.y = value;
+ }
+ COMPILE::JS
+ {
+ //positioner.style.position = 'absolute';
+ if (positioner.parentNode != positioner.offsetParent)
+ value += (positioner.parentNode as HTMLElement).offsetTop;
+ positioner.style.top = value.toString() + 'px';
+ }
+ }
+
+ /**
+ * @private
+ */
+ [Bindable("visibleChanged")]
+ COMPILE::SWF
+ override public function set visible(value:Boolean):void
+ {
+ super.visible = value;
+ dispatchEvent(new Event(value?"show":"hide"));
+ dispatchEvent(new Event("visibleChanged"));
+ }
+
+ COMPILE::JS
+ private var displayStyleForLayout:String;
+
+ /**
+ * The display style is used for both visible
+ * and layout so is managed as a special case.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ COMPILE::JS
+ public function setDisplayStyleForLayout(value:String):void
+ {
+ if (positioner.style.display !== 'none')
+ positioner.style.display = value;
+ else
+ displayStyleForLayout = value;
+ }
+
+ [Bindable("visibleChanged")]
+ COMPILE::JS
+ public function get visible():Boolean
+ {
+ return positioner.style.display !== 'none';
+ }
+
+ COMPILE::JS
+ public function set visible(value:Boolean):void
+ {
+ var oldValue:Boolean = positioner.style.display !== 'none';
+ if (value !== oldValue)
+ {
+ if (!value)
+ {
+ displayStyleForLayout = positioner.style.display;
+ positioner.style.display = 'none';
+ dispatchEvent(new Event('hide'));
+ }
+ else
+ {
+ if (displayStyleForLayout != null)
+ positioner.style.display = displayStyleForLayout;
+ dispatchEvent(new Event('show'));
+ }
+ dispatchEvent(new Event('visibleChanged'));
+ }
+ }
+
+ /**
+ * @return The array of children.
+ * @royaleignorecoercion Array
+ */
+ COMPILE::JS
+ public function internalChildren():Array
+ {
+ return element.childNodes as Array;
+ }
+
+ COMPILE::SWF
+ private var _model:IBeadModel;
+
+ /**
+ * An IBeadModel that serves as the data model for the component.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ COMPILE::SWF
+ public function get model():Object
+ {
+ if (_model == null)
+ {
+ // addbead will set _model
+ addBead(new (ValuesManager.valuesImpl.getValue(this, "iBeadModel")) as IBead);
+ }
+ return _model;
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ public function set model(value:Object):void
+ {
+ if (_model != value)
+ {
+ addBead(value as IBead);
+ dispatchEvent(new Event("modelChanged"));
+ }
+ }
+
+ private var _view:IBeadView;
+
+ /**
+ * An IBeadView that serves as the view for the component.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ * @royaleignorecoercion Class
+ */
+ public function get view():IBeadView
+ {
+ if(!_view)
+ _view = loadBeadFromValuesManager(IBeadView, "iBeadView", this) as IBeadView;
+ return _view;
+ }
+
+ /**
+ * @private
+ */
+ public function set view(value:IBeadView):void
+ {
+ if (_view != value)
+ {
+ addBead(value as IBead);
+ dispatchEvent(new Event("viewChanged"));
+ }
+ }
+
+ private var _id:String;
+
+ /**
+ * An id property for MXML documents.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get id():String
+ {
+ return _id;
+ }
+
+ /**
+ * @private
+ */
+ public function set id(value:String):void
+ {
+ if (_id !== value)
+ {
+ _id = value;
+ dispatchEvent(new Event("idChanged"));
+ }
+ COMPILE::JS
+ {
+ element.id = _id;
+ }
+ }
+
+ private var _style:Object;
+
+ /**
+ * The object that contains
+ * "styles" and other associated
+ * name-value pairs. You can
+ * also specify a string in
+ * HTML style attribute format.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get style():Object
+ {
+ return _style;
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion String
+ */
+ public function set style(value:Object):void
+ {
+ if (_style !== value)
+ {
+ if (value is String)
+ {
+ _style = ValuesManager.valuesImpl.parseStyles(value as String);
+ }
+ else
+ _style = value;
+ if (!isNaN(_y))
+ _style.top = _y;
+ if (!isNaN(_x))
+ _style.left = _x;
+ COMPILE::JS
+ {
+ if (parent)
+ ValuesManager.valuesImpl.applyStyles(this, _style);
+ }
+ dispatchEvent(new Event("stylesChanged"));
+ }
+ }
+
+ /**
+ * A list of type names. Often used for CSS
+ * type selector lookups.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ *
+ * @royalesuppresspublicvarwarning
+ */
+ public var typeNames:String;
+
+ private var _className:String;
+
+ /**
+ * The classname. Often used for CSS
+ * class selector lookups.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get className():String
+ {
+ return _className;
+ }
+
+ /**
+ * @private
+ */
+ public function set className(value:String):void
+ {
+ if (_className !== value)
+ {
+ _className = value;
+
+ COMPILE::JS
+ {
+ setClassName(_className);
+ }
+
+ dispatchEvent(new Event("classNameChanged"));
+ }
+ }
+
+ COMPILE::JS
+ protected function setClassName(value:String):void
+ {
+ element.classList.add(value);
+ }
+
+ /**
+ * @copy org.apache.royale.core.IUIBase#element
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ COMPILE::SWF
+ public function get element():IRoyaleElement
+ {
+ return this;
+ }
+
+ /**
+ * @copy org.apache.royale.core.Application#beads
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ *
+ * @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.0
+ */
+ override public function addBead(bead:IBead):void
+ {
+ var isView:Boolean;
+ if (!_beads)
+ _beads = new Vector.<IBead>;
+ _beads.push(bead);
+ if (bead is IBeadModel)
+ _model = bead as IBeadModel;
+ else if (bead is IBeadView)
+ {
+ _view = bead as IBeadView;
+ isView = true
+ }
+ bead.strand = this;
+
+ if (isView) {
+ IEventDispatcher(this).dispatchEvent(new Event("viewChanged"));
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.IStrand#getBeadByType()
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ 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.0
+ */
+ 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.0
+ * @royaleignorecoercion org.apache.royale.core.IUIBase
+ */
+ 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
+ {
+ element.appendChild(c.positioner);
+ (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.0
+ * @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(IUIBase(c).$displayObject, index);
+ else
+ addChildAt(c as DisplayObject, index);
+ IUIBase(c).addedToParent();
+ }
+ else
+ addChildAt(c as DisplayObject, index);
+ }
+ COMPILE::JS
+ {
+ var children:Array = 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.0
+ */
+ public function getElementAt(index:int):IChild
+ {
+ COMPILE::SWF
+ {
+ return getChildAt(index) as IChild;
+ }
+ COMPILE::JS
+ {
+ var children:Array = internalChildren();
+ if (children.length == 0)
+ {
+ return null;
+ }
+ 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.0
+ */
+ public function getElementIndex(c:IChild):int
+ {
+ COMPILE::SWF
+ {
+ if (c is IRenderedObject)
+ return getChildIndex(IRenderedObject(c).$displayObject);
+ else
+ return getChildIndex(c as DisplayObject);
+ }
+ COMPILE::JS
+ {
+ var children:Array = 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.0
+ * @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.0
+ */
+ public function get numElements():int
+ {
+ COMPILE::SWF
+ {
+ return numChildren;
+ }
+ COMPILE::JS
+ {
+ var children:Array = internalChildren();
+ return children.length;
+ }
+ }
+
+ /**
+ * The method called when added to a parent. This is a good
+ * time to set up beads.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ * @royaleignorecoercion Class
+ * @royaleignorecoercion Number
+ */
+ public function addedToParent():void
+ {
+ var c:Class;
+
+ COMPILE::JS
+ {
+ if (style)
+ ValuesManager.valuesImpl.applyStyles(this, style);
+ }
+
+ if (isNaN(_explicitWidth) && isNaN(_percentWidth))
+ {
+ var value:* = ValuesManager.valuesImpl.getValue(this,"width");
+ if (value !== undefined)
+ {
+ if (value is String)
+ {
+ var s:String = String(value);
+ if (s.indexOf("%") > -1)
+ _percentWidth = Number(s.substring(0, s.length - 1));
+ else
+ {
+ if (s.indexOf("px") !== -1)
+ s = s.substring(0, s.length - 2);
+ _width = _explicitWidth = Number(s);
+ }
+ }
+ else
+ _width = _explicitWidth = value as Number;
+ }
+ }
+
+ if (isNaN(_explicitHeight) && isNaN(_percentHeight))
+ {
+ value = ValuesManager.valuesImpl.getValue(this,"height");
+ if (value !== undefined)
+ {
+ if (value is String)
+ {
+ s = String(value);
+ if (s.indexOf("%") !== -1)
+ _percentHeight = Number(s.substring(0, s.length - 1));
+ else
+ {
+ if (s.indexOf("px") !== -1)
+ s = s.substring(0, s.length - 2);
+ _height = _explicitHeight = Number(s);
+ }
+ }
+ else
+ _height = _explicitHeight = value as Number;
+ }
+ }
+
+ for each (var bead:IBead in beads)
+ addBead(bead);
+
+ loadBeadFromValuesManager(IBeadModel, "iBeadModel", this);
+ loadBeadFromValuesManager(IBeadView, "iBeadView", this);
+ loadBeadFromValuesManager(IBeadController, "iBeadController", this);
+ dispatchEvent(new Event("beadsAdded"));
+ }
+
+ private var _measurementBead:IMeasurementBead;
+ /**
+ * A measurement bead, if one exists.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get measurementBead() : IMeasurementBead
+ {
+ if(!_measurementBead)
+ {
+ _measurementBead = loadBeadFromValuesManager(IMeasurementBead, "iMeasurementBead", this) as IMeasurementBead;
+ }
+ return _measurementBead;
+ }
+
+ COMPILE::SWF
+ private var _stageProxy:StageProxy;
+
+ /**
+ * @copy org.apache.royale.core.IUIBase#topMostEventDispatcher
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+ */
+ public function get topMostEventDispatcher():IEventDispatcher
+ {
+ COMPILE::SWF
+ {
+ if (!_stageProxy)
+ {
+ _stageProxy = new StageProxy(stage);
+ _stageProxy.addEventListener("removedFromStage", stageProxy_removedFromStageHandler);
+ }
+
+ return _stageProxy;
+ }
+ COMPILE::JS
+ {
+ var e:WrappedHTMLElement = document.body as WrappedHTMLElement;
+ return e.royale_wrapper as IEventDispatcher;
+ }
+ }
+
+ COMPILE::SWF
+ private function stageProxy_removedFromStageHandler(event:Event):void
+ {
+ _stageProxy = null;
+ }
+
+ /**
+ * Rebroadcast an event from a sub component from the component.
+ */
+ protected function repeaterListener(event:Event):void
+ {
+ dispatchEvent(event);
+ }
+
+ /**
+ * The HTMLElement used to position the component.
+ */
+ COMPILE::JS
+ public function get positioner():WrappedHTMLElement
+ {
+ return element;
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::JS
+ public function set positioner(value:WrappedHTMLElement):void
+ {
+ element = value;
+ }
+
+ /**
+ * @return The actual element to be parented.
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ protected function createElement():WrappedHTMLElement
+ {
+ addElementToWrapper(this,'div');
+ positioner.style.display = 'block';
+ //positioner.style.position = 'relative';
+ return element;
+ }
+
+
+ /**
+ * The HTMLElement used to position the component.
+ * @royaleignorecoercion String
+ */
+ COMPILE::JS
+ public function get alpha():Number
+ {
+ var stralpha:String = positioner.style.opacity as String;
+ var alpha:Number = parseFloat(stralpha);
+ return alpha;
+ }
+
+ COMPILE::JS
+ public function set alpha(value:Number):void
+ {
+ positioner.style.opacity = value;
+ }
+
+ /**
+ * @param value The event containing new style properties.
+ */
+ COMPILE::JS
+ protected function styleChangeHandler(value:ValueChangeEvent):void
+ {
+ var newStyle:Object = {};
+ newStyle[value.propertyName] = value.newValue;
+ ValuesManager.valuesImpl.applyStyles(this, newStyle);
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion org.apache.royale.core.IParent
+ */
+ COMPILE::JS
+ public function get parent():IParent
+ {
+ var p:WrappedHTMLElement = this.positioner.parentNode as WrappedHTMLElement;
+ var wrapper:IParent = p ? p.royale_wrapper as IParent : null;
+ return wrapper;
+ }
+
+ COMPILE::SWF
+ {
+ [SWFOverride(returns="flash.display.DisplayObjectContainer")]
+ override public function get parent():IParent
+ {
+ return super.parent as IParent;
+ }
+ }
+
+ COMPILE::SWF
+ public function get transformElement():IRoyaleElement
+ {
+ return this;
+ }
+
+ COMPILE::JS
+ public function get transformElement():WrappedHTMLElement
+ {
+ return element;
+ }
+
+ COMPILE::SWF
+ {
+ [SWFOverride(params="flash.events.Event", altparams="org.apache.royale.events.Event:org.apache.royale.events.MouseEvent")]
+ override public function dispatchEvent(event:org.apache.royale.events.Event):Boolean
+ {
+ return super.dispatchEvent(event);
+ }
+ }
+
+ }
+}
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 70d4d58..224c789 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
@@ -59,15 +59,11 @@ package org.apache.royale.jewel
{
super();
- typeNames = "jewel button";
+ COMPILE::JS {
+ element.classList.add("jewel", "button");
+ }
}
- COMPILE::JS
- override protected function computeFinalClassNames():String
- {
- return super.computeFinalClassNames() + " " + element.classList;
- }
-
private var _primary:Boolean = false;
/**
@@ -93,9 +89,7 @@ package org.apache.royale.jewel
COMPILE::JS
{
-
element.classList.toggle("primary", value);
- setClassName(computeFinalClassNames());
}
}
}
@@ -126,7 +120,6 @@ package org.apache.royale.jewel
COMPILE::JS
{
element.classList.toggle("secondary", value);
- setClassName(computeFinalClassNames());
}
}
}
@@ -157,7 +150,6 @@ package org.apache.royale.jewel
COMPILE::JS
{
element.classList.toggle("emphasized", value);
- setClassName(computeFinalClassNames());
}
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as
index 67fdcdd..23eb625 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as
@@ -51,7 +51,9 @@ package org.apache.royale.jewel
{
super();
- typeNames = "jewel textbutton";
+ COMPILE::JS {
+ element.classList.add("jewel", "textbutton");
+ }
}
/**
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 12/49: Ant build for Jewel project, theme and example
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 4a48a11715acb8f9acd92ad10065eff53e9a304b
Author: Alex Harui <ah...@apache.org>
AuthorDate: Wed Mar 14 09:34:23 2018 -0700
Ant build for Jewel project, theme and example
---
examples/royale/JewelExample/build.xml | 4 -
.../src/main/config/compile-app-config.xml | 1 +
.../JewelTheme => js/projects/JewelJS}/build.xml | 105 ++++++++++-----------
.../JewelJS/src/main/config/compile-js-config.xml} | 54 ++++++-----
.../src/main/config/compile-js-config.xml} | 53 ++++++-----
frameworks/themes/JewelTheme/build.xml | 4 +-
.../src/main/config/compile-swf-config.xml | 5 -
.../src/main/resources/royale-jewel-blue.css | 1 +
8 files changed, 115 insertions(+), 112 deletions(-)
diff --git a/examples/royale/JewelExample/build.xml b/examples/royale/JewelExample/build.xml
index b0cb3d3..5d5d8d3 100644
--- a/examples/royale/JewelExample/build.xml
+++ b/examples/royale/JewelExample/build.xml
@@ -43,10 +43,6 @@
<include name="**" />
</fileset>
</copy>
- <replace file="${basedir}/bin/js-debug/index.html" token="${primary}" value="indigo" />
- <replace file="${basedir}/bin/js-debug/index.html" token="${accent}" value="pink" />
- <replace file="${basedir}/bin/js-release/index.html" token="${primary}" value="indigo" />
- <replace file="${basedir}/bin/js-release/index.html" token="${accent}" value="pink" />
</target>
<target name="clean">
diff --git a/examples/royale/JewelExample/src/main/config/compile-app-config.xml b/examples/royale/JewelExample/src/main/config/compile-app-config.xml
index df6ea5b..d81fba3 100644
--- a/examples/royale/JewelExample/src/main/config/compile-app-config.xml
+++ b/examples/royale/JewelExample/src/main/config/compile-app-config.xml
@@ -23,6 +23,7 @@
<compiler>
<theme>
<filename>../../../../../../frameworks/libs/JewelTheme.swc</filename>
+ <filename>../../../../../../frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css</filename>
</theme>
</compiler>
</royale-config>
diff --git a/frameworks/themes/JewelTheme/build.xml b/frameworks/js/projects/JewelJS/build.xml
similarity index 50%
copy from frameworks/themes/JewelTheme/build.xml
copy to frameworks/js/projects/JewelJS/build.xml
index 6174e3e..151360c 100644
--- a/frameworks/themes/JewelTheme/build.xml
+++ b/frameworks/js/projects/JewelJS/build.xml
@@ -19,8 +19,8 @@
-->
-<project name="JewelTheme" default="main" basedir=".">
- <property name="ROYALE_HOME" location="../../.."/>
+<project name="JewelJS" default="main" basedir=".">
+ <property name="ROYALE_HOME" location="../../../.."/>
<property file="${ROYALE_HOME}/env.properties"/>
<property environment="env"/>
@@ -28,40 +28,17 @@
<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"/>
- <!-- doesn't contain compiled files so only need to compile JS version -->
- <target name="main" depends="clean,check-compiler,compile,compile-js,copy-swc,test" description="Full build of ${ant.project.name}.swc">
- </target>
-
- <target name="compile-js">
- <!-- doesn't contain compiled files so only need to compile JS version
- <ant dir="${ROYALE_HOME}/frameworks/js/projects/${ant.project.name}JS/" inheritAll="false" >
- <property name="ROYALE_SWF_COMPILER_HOME" value="${ROYALE_SWF_COMPILER_HOME}"/>
- <property name="ROYALE_COMPILER_HOME" value="${ROYALE_COMPILER_HOME}"/>
- <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
- </ant>
- -->
- </target>
-
- <target name="copy-swc" if="env.AIR_HOME">
- <copy file="${basedir}/target/${target.name}" tofile="${ROYALE_HOME}/frameworks/libs/${target.name}" />
- </target>
-
- <target name="check-for-tests" >
- <condition property="skip-tests" >
- <not>
- <available file="${basedir}/src/test/royale/build.xml" />
- </not>
- </condition>
- </target>
-
- <target name="test" depends="check-for-tests" unless="skip-tests">
- <ant dir="src/test/royale" />
+ <target 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/libs">
+ <fileset dir="${ROYALE_HOME}/frameworks/js/libs">
<include name="${target.name}"/>
</fileset>
</delete>
@@ -70,61 +47,75 @@
<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}"/>
+ <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="+playerglobal.version=${playerglobal.version}" />
- <arg value="+env.AIR_HOME=${env.AIR_HOME}" />
<arg value="-compiler.strict-xml=true" />
- <arg value="-compiler.targets=SWF" />
+ <arg value="-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" />
+ <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="check-compiler" depends="check-compiler-home,check-transpiler-home">
+ <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"
- description="Set ROYALE_SWF_COMPILER_HOME to point at the compiler.">
+ <target name="check-compiler-home" unless="ROYALE_SWF_COMPILER_HOME"
+ description="Check ROYALE_SWF_COMPILER_HOME is a directory.">
- <available file="${ROYALE_HOME}/lib/compiler-mxmlc.jar"
+ <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="${ROYALE_HOME}"/>
+ value="${env.ROYALE_SWF_COMPILER_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"
+ <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"
- description="Set ROYALE_COMPILER_HOME to point at the cross-compiler.">
+ <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}/js/lib/jsc.jar"
+ <available file="${ROYALE_HOME}/../royale-compiler/compiler-jx/lib/jsc.jar"
type="file"
property="ROYALE_COMPILER_HOME"
- value="${ROYALE_HOME}/js"/>
+ 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"/>
diff --git a/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml b/frameworks/js/projects/JewelJS/src/main/config/compile-js-config.xml
similarity index 57%
copy from frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml
copy to frameworks/js/projects/JewelJS/src/main/config/compile-js-config.xml
index bb3e613..c49c05c 100644
--- a/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml
+++ b/frameworks/js/projects/JewelJS/src/main/config/compile-js-config.xml
@@ -23,21 +23,11 @@
<!-- 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/Basic.swc</path-element>
- <path-element>../../../../../libs/Collections.swc</path-element>
- <path-element>../../../../../libs/HTML.swc</path-element>
- </external-library-path>
-
- <allow-subclass-overrides>true</allow-subclass-overrides>
<mxml>
<children-as-data>true</children-as-data>
</mxml>
@@ -47,7 +37,7 @@
<define>
<name>COMPILE::SWF</name>
- <value>true</value>
+ <value>false</value>
</define>
<define>
<name>COMPILE::JS</name>
@@ -64,10 +54,29 @@
<locale/>
- <library-path/>
-
+ <!-- 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/BindingJS.swc</path-element>
+ <path-element>../../../../../libs/CoreJS.swc</path-element>
+ <path-element>../../../../../libs/GraphicsJS.swc</path-element>
+ <path-element>../../../../../libs/CollectionsJS.swc</path-element>
+ <path-element>../../../../../libs/BasicJS.swc</path-element>
+ <path-element>../../../../../libs/HTMLJS.swc</path-element>
+ </library-path>
+
+ <namespaces>
+ <namespace>
+ <uri>library://ns.apache.org/royale/jewel</uri>
+ <manifest>../../../../../../projects/Jewel/src/main/resources/jewel-manifest.xml</manifest>
+ </namespace>
+ </namespaces>
+
<source-path>
- <path-element>../royale</path-element>
+ <path-element>../../../../../../projects/Jewel/src/main/royale</path-element>
</source-path>
<warn-no-constructor>false</warn-no-constructor>
@@ -75,16 +84,19 @@
<include-file>
<name>defaults.css</name>
- <path>../resources/defaults.css</path>
+ <path>../../../../../../projects/Jewel/src/main/resources/defaults.css</path>
</include-file>
-
- <include-lookup-only>true</include-lookup-only>
+
+ <include-sources>
+ </include-sources>
<include-classes>
- <class>JewelThemeClasses</class>
+ <class>JewelClasses</class>
</include-classes>
- <target-player>${playerglobal.version}</target-player>
-
+ <include-namespaces>
+ <uri>library://ns.apache.org/royale/jewel</uri>
+ </include-namespaces>
+
</royale-config>
diff --git a/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml b/frameworks/js/themes/JewelThemeJS/src/main/config/compile-js-config.xml
similarity index 59%
copy from frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml
copy to frameworks/js/themes/JewelThemeJS/src/main/config/compile-js-config.xml
index bb3e613..f663b1c 100644
--- a/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml
+++ b/frameworks/js/themes/JewelThemeJS/src/main/config/compile-js-config.xml
@@ -23,21 +23,11 @@
<!-- 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/Basic.swc</path-element>
- <path-element>../../../../../libs/Collections.swc</path-element>
- <path-element>../../../../../libs/HTML.swc</path-element>
- </external-library-path>
-
- <allow-subclass-overrides>true</allow-subclass-overrides>
<mxml>
<children-as-data>true</children-as-data>
</mxml>
@@ -47,7 +37,7 @@
<define>
<name>COMPILE::SWF</name>
- <value>true</value>
+ <value>false</value>
</define>
<define>
<name>COMPILE::JS</name>
@@ -64,27 +54,44 @@
<locale/>
- <library-path/>
-
+ <!-- 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/BindingJS.swc</path-element>
+ <path-element>../../../../../libs/CoreJS.swc</path-element>
+ <path-element>../../../../../libs/GraphicsJS.swc</path-element>
+ <path-element>../../../../../libs/CollectionsJS.swc</path-element>
+ <path-element>../../../../../libs/BasicJS.swc</path-element>
+ <path-element>../../../../../libs/HTMLJS.swc</path-element>
+ </library-path>
+
+ <!--<namespaces>
+ <namespace>
+ <uri>library://ns.apache.org/royale/jewel</uri>
+ <manifest>../../../../../../themes/JewelTheme/src/main/resources/jewel-manifest.xml</manifest>
+ </namespace>
+ </namespaces>-->
+
<source-path>
- <path-element>../royale</path-element>
+ <path-element>../../../../../../themes/JewelTheme/src/main/royale</path-element>
</source-path>
<warn-no-constructor>false</warn-no-constructor>
</compiler>
- <include-file>
- <name>defaults.css</name>
- <path>../resources/defaults.css</path>
- </include-file>
-
- <include-lookup-only>true</include-lookup-only>
+ <include-sources>
+ </include-sources>
<include-classes>
<class>JewelThemeClasses</class>
</include-classes>
- <target-player>${playerglobal.version}</target-player>
-
+ <!--<include-namespaces>
+ <uri>library://ns.apache.org/royale/jewel</uri>
+ </include-namespaces>-->
+
</royale-config>
diff --git a/frameworks/themes/JewelTheme/build.xml b/frameworks/themes/JewelTheme/build.xml
index 6174e3e..d2e5467 100644
--- a/frameworks/themes/JewelTheme/build.xml
+++ b/frameworks/themes/JewelTheme/build.xml
@@ -91,11 +91,11 @@
<arg value="+playerglobal.version=${playerglobal.version}" />
<arg value="+env.AIR_HOME=${env.AIR_HOME}" />
<arg value="-compiler.strict-xml=true" />
- <arg value="-compiler.targets=SWF" />
+ <arg value="-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" />
+ <arg value="-js-load-config+=${basedir}/../../js/themes/${ant.project.name}JS/src/main/config/compile-js-config.xml" />
</java>
</target>
diff --git a/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml b/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml
index bb3e613..38cf08c 100644
--- a/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml
+++ b/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml
@@ -73,11 +73,6 @@
<warn-no-constructor>false</warn-no-constructor>
</compiler>
- <include-file>
- <name>defaults.css</name>
- <path>../resources/defaults.css</path>
- </include-file>
-
<include-lookup-only>true</include-lookup-only>
<include-classes>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
index 32894c4..91f4512 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
@@ -20,6 +20,7 @@
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
+ fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject")
}
.royale {
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 42/49: textfield flat and placeholder styles
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 1faf223f6d584bb6f23be710279ebf9a48004d2b
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Mar 24 19:46:46 2018 +0100
textfield flat and placeholder styles
---
.../src/main/sass/components/_textfield.sass | 39 +++++++++++++++++-----
1 file changed, 31 insertions(+), 8 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
index 6e38184..4165f6d 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
@@ -51,20 +51,43 @@ $textfield-border-radius: 3px
weight: normal
color: $textfield-text-color
- background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
- border: 1px solid darken($default-color, 15%)
+ @if $flat
+ border: 0px solid
+ background: $default-color
+ @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
- //transition: transition
-
- box-shadow: none
-
+
+ @if $transitions-enable
+ transition:
+ duration: $transition-duration
+ timing-function: $transition-timing
+
&:focus
- border: 1px solid darken($primary-color, 15%)
+ @if $flat
+ background: lighten($primary-color, 25%)
+ @else
+ border: 1px solid darken($primary-color, 15%)
- //:hover
+ //&:hover
// padding: 5px;
// background-color: #DFDFDF;
+ &::placeholder
+ color: lighten($textfield-text-color, 15%)
+
+ &[disabled]
+ cursor: unset
+ border: 1px solid darken($disabled-color, 20%)
+ background: $disabled-color
+ box-shadow: none
+ color: darken($disabled-color, 20%)
+
+ &::placeholder
+ color: darken($disabled-color, 20%)
+
.jewel.textfield
@if $dark
+textfield-theme($font-dark-color)
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 21/49: remove unused css
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 3bd08b909638c4caa2a3bdd75340658cd7bdda5d
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Mar 16 16:21:30 2018 +0100
remove unused css
---
frameworks/projects/Jewel/pom.xml | 4 ----
1 file changed, 4 deletions(-)
diff --git a/frameworks/projects/Jewel/pom.xml b/frameworks/projects/Jewel/pom.xml
index e7de6c2..196c471 100644
--- a/frameworks/projects/Jewel/pom.xml
+++ b/frameworks/projects/Jewel/pom.xml
@@ -60,10 +60,6 @@
<name>defaults.css</name>
<path>../src/main/resources/defaults.css</path>
</include-file>
- <include-file>
- <name>jewel-framework.css</name>
- <path>../src/main/resources/jewel-framework.css</path>
- </include-file>
</includeFiles>
<includeLookupOnly>true</includeLookupOnly>
<!--<allowSubclassOverrides>true</allowSubclassOverrides>-->
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 18/49: Insert a ViewBead that is in JewelTheme and
compiles ok, but JewelExample can't see it, why??
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 97f4e77e3bfe76e006fefd919f5943449ccd4fe8
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Mar 15 23:00:12 2018 +0100
Insert a ViewBead that is in JewelTheme and compiles ok, but JewelExample can't see it, why??
---
examples/royale/JewelExample/pom.xml | 4 +-
.../Jewel/src/main/resources/jewel-framework.css | 71 ----------------------
frameworks/themes/JewelTheme/pom.xml | 39 ++++++++++++
.../JewelTheme/src/main/resources/defaults.css | 1 +
.../src/main/royale/JewelThemeClasses.as | 2 +-
.../apache/royale/beads/views/LabelViewBead.mxml | 59 ++++++++++++++++++
.../src/main/sass/components/_label.sass | 1 +
7 files changed, 103 insertions(+), 74 deletions(-)
diff --git a/examples/royale/JewelExample/pom.xml b/examples/royale/JewelExample/pom.xml
index 19f1837..31fd5b8 100644
--- a/examples/royale/JewelExample/pom.xml
+++ b/examples/royale/JewelExample/pom.xml
@@ -97,13 +97,13 @@
<type>swc</type>
<scope>theme</scope>
</dependency>
- <dependency>
+ <!-- <dependency>
<groupId>org.apache.royale.framework</groupId>
<artifactId>JewelBlueTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<scope>theme</scope>
- </dependency>
+ </dependency> -->
</dependencies>
</project>
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-framework.css b/frameworks/projects/Jewel/src/main/resources/jewel-framework.css
deleted file mode 100644
index ac1da5e..0000000
--- a/frameworks/projects/Jewel/src/main/resources/jewel-framework.css
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-@namespace "library://ns.apache.org/royale/jewel";
-.layout.horizontal {
- white-space: nowrap;
- display: block;
-}
-.layout.horizontal > * {
- display: inline-block !important;
-}
-
-.layout.vertical {
- vertical-align: top;
-}
-.layout.vertical > * {
- display: block !important;
-}
-
-.jewel.label {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
- white-space: nowrap;
-}
-
-TextField {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
-}
-
-Slider {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView");
- IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout");
- IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController");
- position: relative;
-}
-
-.SliderTrack {
- position: absolute;
-}
-
-.SliderThumb {
- position: absolute;
- border-radius: 15px;
-}
-
-@media -royale-swf {
- Slider {
- iThumbView: ClassReference("org.apache.royale.jewel.beads.SliderThumbView");
- iTrackView: ClassReference("org.apache.royale.jewel.beads.SliderTrackView");
- }
-
- RadioButton {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView");
- }
-}
-
-/*# sourceMappingURL=jewel-framework.css.map */
diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml
index 6370b58..84e7e1e 100644
--- a/frameworks/themes/JewelTheme/pom.xml
+++ b/frameworks/themes/JewelTheme/pom.xml
@@ -61,6 +61,7 @@
<artifactId>sass-maven-plugin</artifactId>
<version>3.5.2</version>
<configuration>
+ <targets>JSRoyale,SWF</targets>
<resources>
<resource>
<source>
@@ -85,4 +86,42 @@
</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>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>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Language</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ </dependencies>
+
</project>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 714ec69..9022239 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -221,6 +221,7 @@
* Jewel Label
*/
.jewel.label {
+ IBeadView: ClassReference("org.apache.royale.beads.views.LabelViewBead");
font-family: "Lato", sans-serif;
font-size: 0.75rem;
}
diff --git a/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as b/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
index 20662dc..cb5d275 100644
--- a/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
+++ b/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
@@ -27,7 +27,7 @@ package
*/
internal class JewelThemeClasses
{
-
+ import org.apache.royale.beads.views.LabelViewBead; LabelViewBead;
}
}
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/beads/views/LabelViewBead.mxml b/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/beads/views/LabelViewBead.mxml
new file mode 100644
index 0000000..815c4dd
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/beads/views/LabelViewBead.mxml
@@ -0,0 +1,59 @@
+<?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:MXMLBeadView xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:js="library://ns.apache.org/royale/basic">
+
+ <fx:Script>
+ <![CDATA[
+ // import org.apache.royale.core.ITitleBarModel;
+ // import org.apache.royale.core.UIBase;
+ // import org.apache.royale.events.Event;
+ // import com.transpiledactionscript.puremvc.royale.employeeadmin.model.CustomPanelWithControlBarModel;
+
+ // private function clickHandler():void
+ // {
+ // var newEvent:org.apache.royale.events.Event = new org.apache.royale.events.Event('close');
+ // UIBase(_strand).dispatchEvent(newEvent);
+ // }
+ ]]>
+ </fx:Script>
+
+ <js:TextButton text="VIEWBEAD!!"/>
+
+ <!-- <js:beads>
+ <js:MXMLBeadViewDataBinding />
+ <js:LayoutChangeNotifier watchedProperty="{titleLabel.text}" />
+ <js:LayoutChangeNotifier watchedProperty="{additionalInfoLabel.text}" />
+ </js:beads>
+
+ <js:Label id="titleLabel" text="{CustomPanelWithControlBarModel(model).title}" className="TitleBarTitle" >
+ <js:style>
+ <js:SimpleCSSStyles fontWeight="inherit" marginLeft="5" />
+ </js:style>
+ </js:Label>
+ <js:Label id="additionalInfoLabel" text="{CustomPanelWithControlBarModel(model).info}" height="16">
+ <js:style>
+ <js:SimpleCSSStyles fontWeight="inherit" marginRight="5" />
+ </js:style>
+ </js:Label>
+ <js:CloseButton id="closeButton" click="clickHandler()" className="TitleBarCloseButton"
+ visible="{CustomPanelWithControlBarModel(model).showCloseButton}"/>
+ -->
+</js:MXMLBeadView>
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_label.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_label.sass
index 63b60c9..27906d1 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_label.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_label.sass
@@ -22,6 +22,7 @@
*/
.jewel.label
//IBeadView: ClassReference("org.apache.royale.html.beads.TextFieldView")
+ IBeadView: ClassReference("org.apache.royale.beads.views.LabelViewBead")
font:
family: $font-stack
size: $font-size
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 45/49: checkbox mostly done,
but needs #35 solved to be finished
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit af93c92bd61eb12baac29d142e2208233775b72e
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Mar 25 16:41:45 2018 +0200
checkbox mostly done, but needs #35 solved to be finished
---
.../src/main/royale/CheckBoxPlayGround.mxml | 12 +-
.../src/main/royale/TextInputPlayGround.mxml | 2 +-
.../royale/org/apache/royale/jewel/CheckBox.as | 43 ++++-
.../royale/jewel/supportClasses/TextFieldBase.as | 115 +++++++------
.../src/main/resources/assets/checkbox-tick.svg | 12 +-
.../JewelTheme/src/main/resources/defaults.css | 40 +++--
.../src/main/resources/svgs/checkbox-tick.svg | 43 +++++
.../src/main/sass/components/_checkbox.sass | 178 ++++++---------------
8 files changed, 234 insertions(+), 211 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/CheckBoxPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/CheckBoxPlayGround.mxml
index a26ac6e..5190f82 100644
--- a/examples/royale/JewelExample/src/main/royale/CheckBoxPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/CheckBoxPlayGround.mxml
@@ -29,11 +29,17 @@ limitations under the License.
<html:H3 text="Jewel CheckBox"/>
- <j:CheckBox text="Checkbox 1"/>
+ <j:CheckBox text="Not Checkbox"/>
- <j:CheckBox text="Checkbox 2"/>
+ <j:CheckBox text="Checked" selected="true"/>
- <j:CheckBox text="Checkbox Disabled">
+ <j:CheckBox text="Disabled">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:CheckBox>
+
+ <j:CheckBox text="Checked And Disabled" selected="true">
<j:beads>
<j:Disabled/>
</j:beads>
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index fa64a53..e7538d5 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -43,7 +43,7 @@ limitations under the License.
</js:beads>
<j:TextField>
<j:beads>
- <js:TextPromptBead prompt="With Placeholder..."/>
+ <js:TextPromptBead prompt="With prompt..."/>
</j:beads>
</j:TextField>
<j:TextButton text="Send" primary="true"/>
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 3eb4807..abf8185 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
@@ -23,10 +23,11 @@ package org.apache.royale.jewel
COMPILE::JS
{
+ import org.apache.royale.core.CSSClassList;
import org.apache.royale.core.WrappedHTMLElement;
import org.apache.royale.events.Event;
import org.apache.royale.html.util.addElementToWrapper;
- import org.apache.royale.core.CSSClassList;
+ import org.apache.royale.utils.cssclasslist.addStyles;
}
/**
@@ -69,6 +70,21 @@ package org.apache.royale.jewel
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
@@ -80,9 +96,9 @@ package org.apache.royale.jewel
COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
- label = addElementToWrapper(this,'label') as HTMLLabelElement;
+ var label:HTMLLabelElement = document.createElement('label') as HTMLLabelElement;
- input = document.createElement('input') as HTMLInputElement;
+ input = addElementToWrapper(this,'input') as HTMLInputElement;
input.type = 'checkbox';
input.className = 'input';
label.appendChild(input);
@@ -91,11 +107,28 @@ package org.apache.royale.jewel
checkbox.className = 'span';
label.appendChild(checkbox);
- (input as WrappedHTMLElement).royale_wrapper = this;
- (checkbox as WrappedHTMLElement).royale_wrapper = this;
+ positioner = label as WrappedHTMLElement;
+ _positioner.royale_wrapper = this;
+ //(input as WrappedHTMLElement).royale_wrapper = this;
+ //(checkbox as WrappedHTMLElement).royale_wrapper = this;
return element;
}
+ COMPILE::JS
+ /**
+ * override UIBase to affect positioner instead of element
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ override protected function setClassName(value:String):void
+ {
+ //positioner.className = value;
+ addStyles(positioner, value);
+ }
+
/**
* The text label for the CheckBox.
*
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
index 0a8399e..d478400 100644
--- 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
@@ -53,67 +53,75 @@ package org.apache.royale.jewel.supportClasses
super();
}
+
COMPILE::JS
- {
- private var _textNode:Text;
- /**
- * @copy org.apache.royale.jewel.supportClasses.ITextField#textNode
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.2
- */
- public function get textNode():Text
- {
- return _textNode;
- }
+ private var _textNode:Text;
- public function set textNode(value:Text):void
- {
- _textNode = value;
- }
+ /**
+ * @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;
+ }
- private var _input:HTMLInputElement;
- /**
- * @copy org.apache.royale.jewel.supportClasses.ITextField#input
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.2
- */
- public function get input():HTMLInputElement
- {
- return _input;
- }
+ COMPILE::JS
+ public function set textNode(value:Text):void
+ {
+ _textNode = value;
+ }
- public function set input(value:HTMLInputElement):void
- {
- _input = 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;
+ }
- private var _label:HTMLLabelElement;
- /**
- * @copy org.apache.royale.jewel.supportClasses.ITextField#label
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.2
- */
- public function get label():HTMLLabelElement
- {
- return _label;
- }
+ COMPILE::JS
+ private var _label:HTMLLabelElement;
- public function set label(value:HTMLLabelElement):void
- {
- _label = value;
- }
+ /**
+ * @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
*
@@ -122,12 +130,13 @@ package org.apache.royale.jewel.supportClasses
* @playerversion AIR 2.6
* @productversion Royale 0.9.2
*/
+ COMPILE::JS
override protected function setClassName(value:String):void
{
//positioner.className = value;
addStyles(positioner, value);
}
-
+
private var _isInvalid:Boolean = false;
/**
* A boolean flag to activate "is-invalid" effect selector.
diff --git a/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg b/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg
index 64606dc..f95ec08 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg
+++ b/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg
@@ -16,14 +16,4 @@
limitations under the License.
-->
-<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, -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>
\ No newline at end of file
+<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 789eec4..29eb2b3 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -182,35 +182,36 @@ span {
}
.jewel.checkbox {
- cursor: pointer;
display: inline-block;
margin: 0;
padding: 0;
position: relative;
vertical-align: middle;
- box-sizing: border-box;
width: 100%;
- height: 24px;
+ height: 22px;
}
.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: 24px;
- border: 1px solid #3CADF1;
+ line-height: 22px;
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
border-radius: 3px;
}
.jewel.checkbox .input:checked, .jewel.checkbox .input:checked:active {
- border: 1px solid #0f88d1;
- background: url("data:image/svg+xml;utf8,<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, -350.000000)' fill='#3CADF1'><g transform='translate(760.000000, 345.000000)'><g><polygon id='Tick' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></g></g></svg>");
- background-size: cover;
- padding: 2px;
-}
-.jewel.checkbox .input:checked path, .jewel.checkbox .input:checked:active path {
- fill: #ff0000;
+ 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)'><g><polygon fill='#3CADF1' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></g></svg>");
+ background-repeat: no-repeat;
+ background-size: 90%;
+ background-position: center;
+ background-attachment: fixed;
}
.jewel.checkbox .input:focus {
outline: none;
@@ -221,8 +222,21 @@ span {
border: 1px solid #c6c6c6;
background: #F9F9F9;
}
+.jewel.checkbox .input[disabled]:checked {
+ border: 1px solid #c6c6c6;
+ 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)'><g><polygon fill='lightgray' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></g></svg>");
+ background-size: 90%;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+}
.jewel.checkbox .span {
- padding-left: 5px;
+ cursor: pointer;
+ position: absolute;
+ margin: 0;
+ padding-left: 6px;
+ font-size: 16px;
+ line-height: 22px;
}
.jewel.label {
diff --git a/frameworks/themes/JewelTheme/src/main/resources/svgs/checkbox-tick.svg b/frameworks/themes/JewelTheme/src/main/resources/svgs/checkbox-tick.svg
new file mode 100644
index 0000000..e4d5091
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/svgs/checkbox-tick.svg
@@ -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.
+
+-->
+<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>
+
+
+<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
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
index af39fc9..d1ab54c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
@@ -20,11 +20,13 @@
// Jewel CheckBox
// CheckBox variables
-$checkbox-label-height: 24px
$checkbox-button-size: 22px
+$checkbox-border-radius: 3px
+$checkbox-label-separation: 6px
+$checkbox-label-font-size: 16px
.jewel.checkbox
- cursor: pointer
+ //cursor: pointer
display: inline-block
margin: 0
@@ -33,59 +35,46 @@ $checkbox-button-size: 22px
position: relative
vertical-align: middle
- box-sizing: border-box
-
width: 100%
- height: $checkbox-label-height
+ height: $checkbox-button-size
- // INPUT
+ // -- INPUT
.input
+appear(none)
- // position: absolute
- // cursor: pointer
- // overflow: hidden
- // display: inline-block
-
- // box-sizing: border-box
- // margin: 0
- // top: 0//$checkbox-top-offset
- // left: 0
-
+ cursor: pointer
+ display: inline-block
+
+ margin: 0
+ padding: 0
+
width: $checkbox-button-size
height: $checkbox-button-size
- line-height: $checkbox-label-height
-
- border: 1px solid $primary-color
- border-radius: 3px
-
- &:checked, &:checked:active
- @if $flat
- background: lighten($primary-color, 25%)
- @else
- border: 1px solid darken($primary-color, 15%)
- //background: url(assets/checkbox-tick.svg)
- background: url("data:image/svg+xml;utf8,<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, -350.000000)' fill='#{$primary-color}'><g transform='translate(760.000000, 345.000000)'><g><polygon id='Tick' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></g></g></svg>")
- background-size: cover
- padding: 2px
-
- & path
- fill: #ff0000
+ line-height: $checkbox-button-size
+ @if $flat
+ border: 0px solid
+ background: $default-color
+ @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:after
- //content: url(assets/jewel-button.svg)
- //background: #3f51b5 url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSI [...]
- //background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22 2v20h-20v-20h20zm2-2h-24v24h24v-24zm-6 16.538l-4.592-4.548 4.546-4.587-1.416-1.403-4.545 4.589-4.588-4.543-1.405 1.405 4.593 4.552-4.547 4.592 1.405 1.405 4.555-4.596 4.591 4.55 1.403-1.416z"/></svg>')
- //background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>")
- //background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSA [...]
- //content: url(assets/jewel-button.svg)
- //font-size: 14px
- //position: absolute
- //top: 0px
- //left: 3px
- //color: #99a1a7
-
+ &:checked, &:checked:active
+ //background: url(assets/checkbox-tick.svg), lighten($primary-color, 25%)
+ 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)'><g><polygon fill='#{$primary-color}' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></g></svg>")
+ background-repeat: no-repeat
+ background-size: 90%
+ background-position: center
+ background-attachment: fixed
+ //z-index: -10
+ //box-shadow: inset 0px 0px 0px 3px $disabled-color
+ //fill: $primary-color
+ // @if $flat
+ // background: lighten($primary-color, 25%)
+ // @else
+ // border: 1px solid darken($primary-color, 15%)
+
&:focus
outline: none
@if $flat
@@ -97,84 +86,23 @@ $checkbox-button-size: 22px
cursor: unset
border: 1px solid darken($disabled-color, 20%)
background: $disabled-color
- //box-shadow: none
+
+ &:checked
+ border: 1px solid darken($disabled-color, 20%)
+ //background: url(assets/checkbox-tick.svg), $disabled-color
+ 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)'><g><polygon fill='#{darken($disabled-color, 15%)}' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></g></svg>")
+ background-size: 90%
+ background-position: center
+ background-repeat: no-repeat
+ background-attachment: fixed
+ //background: $disabled-color 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)'><g><polygon fill='#{darken($disabled-color, 15%)}' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></g></svg>) no-repeat fixed center/90%
+ //background: $disabled-color
- // LABEL
+ // -- LABEL
.span
- padding-left: 5px
-
-
-// [type="checkbox"]:not(:checked) + label,
-// [type="checkbox"]:checked + label {
-// position: relative;
-// padding-left: 32px;
-// margin-bottom: 4px;
-// display: inline-block;
-// font-size: 16px;
-// }
-// /* checkbox aspect */
-// [type="checkbox"]:not(:checked) + label:before,
-// [type="checkbox"]:checked + label:before {
-// content: '';
-// position: absolute;
-// left: 0px; top: 0px;
-// width: 22px; height: 22px;
-// border: 2px solid #cccccc;
-// background: #ffffff;
-// border-radius: 4px;
-// box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
-// }
-// /* checked mark aspect */
-// [type="checkbox"]:not(:checked) + label:after,
-// [type="checkbox"]:checked + label:after {
-// content: '✔';
-// position: absolute;
-// top: 0px; left: 5px;
-// font-size: 20px;
-// line-height: 1.2;
-// color: #09ad7e;
-// transition: all .2s;
-// }
-// /* checked mark aspect changes */
-// [type="checkbox"]:not(:checked) + label:after {
-// opacity: 0;
-// transform: scale(0);
-// }
-// [type="checkbox"]:checked + label:after {
-// opacity: 1;
-// transform: scale(1);
-// }
-// /* disabled checkbox */
-// [type="checkbox"]:disabled:not(:checked) + label:before,
-// [type="checkbox"]:disabled:checked + label:before {
-// box-shadow: none;
-// border-color: #999999;
-// background-color: #dddddd;
-// }
-// [type="checkbox"]:disabled:checked + label:after {
-// color: #999999;
-// }
-// [type="checkbox"]:disabled + label {
-// color: #aaaaaa;
-// }
-// /* accessibility */
-// [type="checkbox"]:checked:focus + label:before,
-// [type="checkbox"]:not(:checked):focus + label:before {
-// border: 2px dotted #0000ff;
-// }
-// /* hover style just for information */
-// label:hover:before {
-// border: 2px solid #4778d9!important;
-// background: #ffffff
-
-
- // > input[type="checkbox"]
- // width: 50px
- // height: 50px
- // > label
- // cursor: auto
- // position: relative
- // display: block
- // padding-left: 20px
- // outline: none
- //font-size: @labelFontSize
\ No newline at end of file
+ cursor: pointer
+ position: absolute
+ margin: 0
+ padding-left: $checkbox-label-separation
+ font-size: $checkbox-label-font-size
+ line-height: $checkbox-button-size
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 15/49: Decouple theme in JewelTheme and JewelBlueTheme
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit f02b2311663bd9b2b190a9a333705781fbfd2045
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Mar 15 17:13:45 2018 +0100
Decouple theme in JewelTheme and JewelBlueTheme
---
examples/royale/JewelExample/pom.xml | 7 ++
.../src/main/config/compile-app-config.xml | 2 +-
.../resources/jewel-example-index-template.html | 2 +-
frameworks/themes/JewelBlueTheme/asconfig.json | 34 ++++++
frameworks/themes/JewelBlueTheme/build.xml | 133 +++++++++++++++++++++
.../themes/{JewelTheme => JewelBlueTheme}/pom.xml | 6 +-
.../src/main/config/compile-swf-config.xml | 85 +++++++++++++
.../src/main/resources/assets/JewelButton2.svg | 44 +++++++
.../src/main/resources/assets/jewel-button.svg | 37 ++++++
.../src/main/resources/royale-jewel-blue.css | 1 -
.../src/main/royale/JewelBlueThemeClasses.as} | 21 ++--
.../src/main/sass}/_blue-color-palette.sass | 0
.../src/main/sass/_functions.sass} | 8 --
.../src/main/sass/_global.sass | 2 +-
.../src/main/sass/_mixins.sass} | 35 ++++--
.../src/main/sass/_variables.sass} | 20 ++--
.../src/main/sass/components/_button.sass | 73 +++++++++++
.../src/main/sass/components/_label.sass} | 15 +--
.../src/main/sass/components/_textbutton.sass} | 52 ++++++--
.../src/main/sass/components/_textfield.sass} | 55 +++++++--
.../src/main/sass/royale-jewel-blue.sass} | 2 +-
frameworks/themes/JewelTheme/pom.xml | 4 +-
.../{royale-jewel-red.css => defaults.css} | 66 +++++-----
...or-palette.sass => _default-color-palette.sass} | 12 +-
.../themes/JewelTheme/src/main/sass/_global.sass | 3 +-
.../sass/{royale-jewel-blue.sass => defaults.sass} | 2 +-
frameworks/themes/pom.xml | 1 +
27 files changed, 609 insertions(+), 113 deletions(-)
diff --git a/examples/royale/JewelExample/pom.xml b/examples/royale/JewelExample/pom.xml
index 5d0bcc6..19f1837 100644
--- a/examples/royale/JewelExample/pom.xml
+++ b/examples/royale/JewelExample/pom.xml
@@ -97,6 +97,13 @@
<type>swc</type>
<scope>theme</scope>
</dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>JewelBlueTheme</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <scope>theme</scope>
+ </dependency>
</dependencies>
</project>
diff --git a/examples/royale/JewelExample/src/main/config/compile-app-config.xml b/examples/royale/JewelExample/src/main/config/compile-app-config.xml
index d81fba3..ccb20e9 100644
--- a/examples/royale/JewelExample/src/main/config/compile-app-config.xml
+++ b/examples/royale/JewelExample/src/main/config/compile-app-config.xml
@@ -23,7 +23,7 @@
<compiler>
<theme>
<filename>../../../../../../frameworks/libs/JewelTheme.swc</filename>
- <filename>../../../../../../frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css</filename>
+ <filename>../../../../../../frameworks/themes/JewelTheme/src/main/resources/defaults.css</filename>
</theme>
</compiler>
</royale-config>
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 cf5ea3c..d98e4cf 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
@@ -22,7 +22,7 @@
<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" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
${head}
</head>
<body>
diff --git a/frameworks/themes/JewelBlueTheme/asconfig.json b/frameworks/themes/JewelBlueTheme/asconfig.json
new file mode 100644
index 0000000..b30f1fd
--- /dev/null
+++ b/frameworks/themes/JewelBlueTheme/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": [
+ "JewelBlueThemeClasses"
+ ],
+ "include-sources": [
+ "src/main/royale"
+ ],
+ "output": "target/JewelBlueTheme.swc"
+ }
+}
diff --git a/frameworks/themes/JewelBlueTheme/build.xml b/frameworks/themes/JewelBlueTheme/build.xml
new file mode 100644
index 0000000..d809961
--- /dev/null
+++ b/frameworks/themes/JewelBlueTheme/build.xml
@@ -0,0 +1,133 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<project name="JewelBlueTheme" default="main" basedir=".">
+ <property name="ROYALE_HOME" location="../../.."/>
+
+ <property file="${ROYALE_HOME}/env.properties"/>
+ <property environment="env"/>
+ <property file="${ROYALE_HOME}/build.properties"/>
+ <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+
+ <property name="target.name" value="${ant.project.name}.swc" />
+
+ <!-- doesn't contain compiled files so only need to compile JS version -->
+ <target name="main" depends="clean,check-compiler,compile,compile-js,copy-swc,test" description="Full build of ${ant.project.name}.swc">
+ </target>
+
+ <target name="compile-js">
+ <!-- doesn't contain compiled files so only need to compile JS version
+ <ant dir="${ROYALE_HOME}/frameworks/js/projects/${ant.project.name}JS/" inheritAll="false" >
+ <property name="ROYALE_SWF_COMPILER_HOME" value="${ROYALE_SWF_COMPILER_HOME}"/>
+ <property name="ROYALE_COMPILER_HOME" value="${ROYALE_COMPILER_HOME}"/>
+ <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+ </ant>
+ -->
+ </target>
+
+ <target name="copy-swc" if="env.AIR_HOME">
+ <copy file="${basedir}/target/${target.name}" tofile="${ROYALE_HOME}/frameworks/libs/${target.name}" />
+ </target>
+
+ <target name="check-for-tests" >
+ <condition property="skip-tests" >
+ <not>
+ <available file="${basedir}/src/test/royale/build.xml" />
+ </not>
+ </condition>
+ </target>
+
+ <target name="test" depends="check-for-tests" unless="skip-tests">
+ <ant dir="src/test/royale" />
+ </target>
+
+ <target name="clean">
+ <delete failonerror="false">
+ <fileset dir="${ROYALE_HOME}/frameworks/libs">
+ <include name="${target.name}"/>
+ </fileset>
+ </delete>
+ <delete failonerror="false" includeemptydirs="true">
+ <fileset dir="${basedir}/target">
+ <include name="**/**"/>
+ </fileset>
+ </delete>
+ <antcall target="clean-tests" />
+ </target>
+
+ <target name="clean-tests" depends="check-for-tests" unless="skip-tests">
+ <ant dir="src/test/royale" target="clean"/>
+ </target>
+
+ <target name="compile" description="Compiles .as files into .swc" if="env.AIR_HOME">
+ <echo message="Compiling libs/${ant.project.name}.swc"/>
+ <echo message="ROYALE_HOME: ${ROYALE_HOME}"/>
+ <echo message="ROYALE_SWF_COMPILER_HOME: ${ROYALE_SWF_COMPILER_HOME}"/>
+ <echo message="ROYALE_COMPILER_HOME: ${ROYALE_COMPILER_HOME}"/>
+
+ <java jar="${ROYALE_COMPILER_HOME}/lib/compc.jar" fork="true" >
+ <jvmarg value="-Xmx384m" />
+ <jvmarg value="-Dsun.io.useCanonCaches=false" />
+ <jvmarg value="-Droyalelib=${ROYALE_HOME}/frameworks" />
+ <arg value="+royalelib=${ROYALE_HOME}/frameworks" />
+ <arg value="+playerglobal.version=${playerglobal.version}" />
+ <arg value="+env.AIR_HOME=${env.AIR_HOME}" />
+ <arg value="-compiler.strict-xml=true" />
+ <arg value="-compiler.targets=SWF,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/themes/${ant.project.name}JS/src/main/config/compile-js-config.xml" />
+ </java>
+ </target>
+
+ <target name="check-compiler" depends="check-compiler-home,check-transpiler-home">
+ <path id="lib.path">
+ <fileset dir="${ROYALE_COMPILER_HOME}/lib" includes="compiler-royaleTasks.jar"/>
+ </path>
+ <taskdef resource="flexTasks.tasks" classpathref="lib.path"/>
+ </target>
+
+ <target name="check-compiler-home"
+ description="Set ROYALE_SWF_COMPILER_HOME to point at the compiler.">
+
+ <available file="${ROYALE_HOME}/lib/compiler-mxmlc.jar"
+ type="file"
+ property="ROYALE_SWF_COMPILER_HOME"
+ value="${ROYALE_HOME}"/>
+
+ <fail message="ROYALE_SWF_COMPILER_HOME must be set to a folder with a lib sub-folder containing compiler-mxmlc.jar such as the compiler folder in royale-compiler repo or the root of a Royale SDK"
+ unless="ROYALE_SWF_COMPILER_HOME"/>
+ </target>
+
+ <target name="check-transpiler-home"
+ description="Set ROYALE_COMPILER_HOME to point at the cross-compiler.">
+
+ <available file="${ROYALE_HOME}/js/lib/jsc.jar"
+ type="file"
+ property="ROYALE_COMPILER_HOME"
+ value="${ROYALE_HOME}/js"/>
+
+ <fail message="ROYALE_COMPILER_HOME must be set to a folder with a lib sub-folder containing jsc.jar such as the compiler-jx folder in royale-compiler repo or the js folder of a Royale SDK"
+ unless="ROYALE_COMPILER_HOME"/>
+ </target>
+
+</project>
diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelBlueTheme/pom.xml
similarity index 94%
copy from frameworks/themes/JewelTheme/pom.xml
copy to frameworks/themes/JewelBlueTheme/pom.xml
index 055a04d..30632ff 100644
--- a/frameworks/themes/JewelTheme/pom.xml
+++ b/frameworks/themes/JewelBlueTheme/pom.xml
@@ -26,11 +26,11 @@
<version>0.9.3-SNAPSHOT</version>
</parent>
- <artifactId>JewelTheme</artifactId>
+ <artifactId>JewelBlueTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<packaging>swc</packaging>
- <name>Apache Royale: Framework: Themes: JewelTheme</name>
+ <name>Apache Royale: Framework: Themes: JewelBlueTheme</name>
<build>
<sourceDirectory>src/main/royale</sourceDirectory>
@@ -42,7 +42,7 @@
<extensions>true</extensions>
<configuration>
<includeClasses>
- <includeClass>JewelThemeClasses</includeClass>
+ <includeClass>JewelBlueThemeClasses</includeClass>
</includeClasses>
<includeFiles>
<include-file>
diff --git a/frameworks/themes/JewelBlueTheme/src/main/config/compile-swf-config.xml b/frameworks/themes/JewelBlueTheme/src/main/config/compile-swf-config.xml
new file mode 100644
index 0000000..221a32b
--- /dev/null
+++ b/frameworks/themes/JewelBlueTheme/src/main/config/compile-swf-config.xml
@@ -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.
+
+-->
+<royale-config>
+
+ <compiler>
+ <accessible>false</accessible>
+
+ <!-- build both SWF and JS. -->
+ <targets>
+ <target>JSRoyale</target>
+ </targets>
+ <strict-xml>true</strict-xml>
+
+ <external-library-path>
+ <path-element>${env.AIR_HOME}/frameworks/libs/air/airglobal.swc</path-element>
+ <path-element>../../../../../libs/Binding.swc</path-element>
+ <path-element>../../../../../libs/Core.swc</path-element>
+ <path-element>../../../../../libs/Graphics.swc</path-element>
+ <path-element>../../../../../libs/Basic.swc</path-element>
+ <path-element>../../../../../libs/Collections.swc</path-element>
+ <path-element>../../../../../libs/HTML.swc</path-element>
+ </external-library-path>
+
+ <allow-subclass-overrides>true</allow-subclass-overrides>
+ <mxml>
+ <children-as-data>true</children-as-data>
+ </mxml>
+ <binding-value-change-event>org.apache.royale.events.ValueChangeEvent</binding-value-change-event>
+ <binding-value-change-event-kind>org.apache.royale.events.ValueChangeEvent</binding-value-change-event-kind>
+ <binding-value-change-event-type>valueChange</binding-value-change-event-type>
+
+ <define>
+ <name>COMPILE::SWF</name>
+ <value>true</value>
+ </define>
+ <define>
+ <name>COMPILE::JS</name>
+ <value>true</value>
+ </define>
+
+ <keep-as3-metadata>
+ <name>Bindable</name>
+ <name>Managed</name>
+ <name>ChangeEvent</name>
+ <name>NonCommittingChangeEvent</name>
+ <name>Transient</name>
+ </keep-as3-metadata>
+
+ <locale/>
+
+ <library-path/>
+
+ <source-path>
+ <path-element>../royale</path-element>
+ </source-path>
+
+ <warn-no-constructor>false</warn-no-constructor>
+ </compiler>
+
+ <include-lookup-only>true</include-lookup-only>
+
+ <include-classes>
+ <class>JewelBlueThemeClasses</class>
+ </include-classes>
+
+ <target-player>${playerglobal.version}</target-player>
+
+
+</royale-config>
diff --git a/frameworks/themes/JewelBlueTheme/src/main/resources/assets/JewelButton2.svg b/frameworks/themes/JewelBlueTheme/src/main/resources/assets/JewelButton2.svg
new file mode 100644
index 0000000..ad0c128
--- /dev/null
+++ b/frameworks/themes/JewelBlueTheme/src/main/resources/assets/JewelButton2.svg
@@ -0,0 +1,44 @@
+
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+<svg width="152px" height="42px" viewBox="0 0 152 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <linearGradient x1="50%" y1="3.10307717%" x2="50%" y2="98.2081246%" id="linearGradient-1">
+ <stop stop-color="#3BB0FF" offset="0%"></stop>
+ <stop stop-color="#1E36FA" offset="100%"></stop>
+ </linearGradient>
+ <rect id="path-2" x="0" y="0" width="150" height="40" rx="3"></rect>
+ <linearGradient x1="50%" y1="0%" x2="50%" y2="98.2362085%" id="linearGradient-3">
+ <stop stop-color="#8EDEFF" offset="0%"></stop>
+ <stop stop-color="#1D89E6" offset="100%"></stop>
+ </linearGradient>
+ </defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="JewelButton">
+ <g id="Background" transform="translate(1.000000, 1.000000)">
+ <g>
+ <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
+ <rect stroke="#244084" stroke-width="1" x="-0.5" y="-0.5" width="151" height="41" rx="3"></rect>
+ </g>
+ <rect stroke="url(#linearGradient-3)" x="0.5" y="0.5" width="149" height="39" rx="3"></rect>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/frameworks/themes/JewelBlueTheme/src/main/resources/assets/jewel-button.svg b/frameworks/themes/JewelBlueTheme/src/main/resources/assets/jewel-button.svg
new file mode 100644
index 0000000..63bfc72
--- /dev/null
+++ b/frameworks/themes/JewelBlueTheme/src/main/resources/assets/jewel-button.svg
@@ -0,0 +1,37 @@
+
+
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<svg viewBox="0 0 126 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <rect id="path-1" x="0" y="0" width="126" height="48" rx="4"></rect>
+ </defs>
+ <g id="Jewel" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="button/large">
+ <mask id="mask-2" fill="white">
+ <use xlink:href="#path-1"></use>
+ </mask>
+ <use id="mask" fill="#009EF5" fill-rule="evenodd" xlink:href="#path-1"></use>
+ <g id="colors/primary" mask="url(#mask-2)" fill="#006CEB" fill-rule="evenodd">
+ <rect x="0" y="0" width="126" height="48"></rect>
+ </g>
+ <text id="CTA" mask="url(#mask-2)" font-family="Lato-Bold, Lato" font-size="18" font-weight="bold" line-spacing="24" letter-spacing="-0.225000009"></text>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css b/frameworks/themes/JewelBlueTheme/src/main/resources/royale-jewel-blue.css
similarity index 98%
rename from frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
rename to frameworks/themes/JewelBlueTheme/src/main/resources/royale-jewel-blue.css
index 91f4512..32894c4 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
+++ b/frameworks/themes/JewelBlueTheme/src/main/resources/royale-jewel-blue.css
@@ -20,7 +20,6 @@
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
- fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject")
}
.royale {
diff --git a/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass b/frameworks/themes/JewelBlueTheme/src/main/royale/JewelBlueThemeClasses.as
similarity index 76%
copy from frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
copy to frameworks/themes/JewelBlueTheme/src/main/royale/JewelBlueThemeClasses.as
index b564176..fddadba 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/royale/JewelBlueThemeClasses.as
@@ -16,11 +16,18 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-// Color Themes
-$default-color: rgba(0,0,0,0.20)
-$primary-color: #FF0000
-$secondary-color: #342F30
-$emphasized-color: #016936
+package
+{
-$default-font-color: rgba(0, 0, 0, .5)
-$font-color: white
\ No newline at end of file
+ /**
+ * @private
+ * This class is used to link additional classes into JewelBlueTheme.swc
+ * beyond those that are found by dependecy analysis starting
+ * from the classes specified in manifest.xml.
+ */
+ internal class JewelBlueThemeClasses
+ {
+
+ }
+
+}
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/_blue-color-palette.sass
similarity index 100%
copy from frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
copy to frameworks/themes/JewelBlueTheme/src/main/sass/_blue-color-palette.sass
diff --git a/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/_functions.sass
similarity index 84%
copy from frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
copy to frameworks/themes/JewelBlueTheme/src/main/sass/_functions.sass
index 3bdf08e..0c6fb82 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/_functions.sass
@@ -16,11 +16,3 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-// Color Themes
-$default-color: rgba(0,0,0,.3)
-$primary-color: #006CEB
-$secondary-color: #011833
-$emphasized-color: #1FD348
-
-$default-font-color: rgba(0, 0, 0, .4)
-$font-color: white
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/_global.sass
similarity index 94%
copy from frameworks/themes/JewelTheme/src/main/sass/_global.sass
copy to frameworks/themes/JewelBlueTheme/src/main/sass/_global.sass
index 3a8a0ef..febf662 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/_global.sass
@@ -25,7 +25,7 @@
-moz-box-sizing: border-box
-webkit-box-sizing: border-box
box-sizing: border-box
- //fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject")
+ //fonts: ClassReference("org.apache.royale.jewel.JewelBlueThemeFontInject")
.royale
padding: 10px
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/_mixins.sass
similarity index 55%
copy from frameworks/themes/JewelTheme/src/main/sass/_global.sass
copy to frameworks/themes/JewelBlueTheme/src/main/sass/_mixins.sass
index 3a8a0ef..f4e7302 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/_mixins.sass
@@ -17,16 +17,27 @@
//
////////////////////////////////////////////////////////////////////////////////
-@namespace j "library://ns.apache.org/royale/jewel"
-@namespace "http://www.w3.org/1999/xhtml"
+=button-theme($button-color, $text-color)
+ //border-color: darken($button-color, 20%)
+ background-color: $button-color
+ transition:
+ duration: 0.4s
+ color: $text-color
+ &:hover
+ background-color: lighten($button-color, 6%)
+ //box-shadow: 0 .125em $off-wht, inset 0 .063em $off-wht, inset 0 -.188em lighten($btn-color, 2%)
+ &:active
+ background-color: darken($button-color, 6%)
+ //box-shadow: 0 .063em $off-wht, inset 0 0 1.094em darken($btn-color, 40%), inset 0 .063em darken($btn-color, 20%),inset 0 -0.188em darken($btn-color, 20%)
+ &:focus
+ outline: 0
+ &[disabled]
+ background-color: $disabled-color
+ color: $font-disabled-color
+ cursor: unset
-
-.royale *, .royale *:before, .royale *:after
- -moz-box-sizing: border-box
- -webkit-box-sizing: border-box
- box-sizing: border-box
- //fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject")
-
-.royale
- padding: 10px
- margin: 10px
+//=trans($val...)
+// -webkit-transition: $val
+// -moz-transition: $val
+// -o-transition: $val
+// transition: $val
diff --git a/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
similarity index 82%
copy from frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
copy to frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
index b564176..3a6b64b 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/_variables.sass
@@ -16,11 +16,17 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-// Color Themes
-$default-color: rgba(0,0,0,0.20)
-$primary-color: #FF0000
-$secondary-color: #342F30
-$emphasized-color: #016936
-$default-font-color: rgba(0, 0, 0, .5)
-$font-color: white
\ No newline at end of file
+$font-stack: 'Lato', sans-serif
+$font-size: 0.75rem
+
+// Common Colors
+$white: rgba(white,.9)
+$disabled-color: #CCCCCC
+$font-disabled-color: #888888
+
+// Button variables
+$button-min-width: 74px !default
+
+
+
diff --git a/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
new file mode 100644
index 0000000..d04d186
--- /dev/null
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_button.sass
@@ -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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Jewel Button
+ */
+%button-def
+ cursor: pointer
+
+ display: inline-block
+ margin: 0 //1rem
+ padding: 10px 16px //.938em 1.875em
+ min-width: $button-min-width
+ min-height: 34px
+
+ /* Background: */
+ border: none // .094em solid
+ border-radius: 3px //.625em
+ //box-shadow: 0 .375em .313em -.313em rgba(black,.8), inset 0 .063em $off-wht, inset 0 -.188em rgba(black,.15)
+
+.jewel.button, .jewel.button:hover
+ @extend %button-def
+
+.jewel.button
+ +button-theme($default-color, $default-font-color)
+
+.jewel.button.primary
+ +button-theme($primary-color, $font-color)
+
+.jewel.button.secondary
+ +button-theme($secondary-color, $font-color)
+
+.jewel.button.emphasized
+ +button-theme($emphasized-color, $font-color)
+
+
+//SVGs
+//border:1px; /*without this svg shows scaled and bigger*/
+//border-image-source: url(assets/jewel-button.svg) ;
+//border-image-slice: 4;
+//border-image-width: 4;
+
+//background-image: linear-gradient(#3BB0FF, #1E36FA);
+
+//background-color: #006CEB;
+//background-size: cover;
+//background-repeat: no-repeat;
+//background-clip: padding-box;
+
+//background: url(assets/4slicewithpattern.svg);
+//background-size: cover;
+//width: fit-content;
+//height: fit-content;
+
+//.button:active
+//box-shadow: #E6431D 0 1px 0 inset;
+//text-shadow: 0 -1px 0 #5F3A29;
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
similarity index 84%
rename from frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
rename to frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
index 3bdf08e..63b60c9 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_label.sass
@@ -16,11 +16,12 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-// Color Themes
-$default-color: rgba(0,0,0,.3)
-$primary-color: #006CEB
-$secondary-color: #011833
-$emphasized-color: #1FD348
-$default-font-color: rgba(0, 0, 0, .4)
-$font-color: white
\ No newline at end of file
+/**
+ * Jewel Label
+ */
+.jewel.label
+ //IBeadView: ClassReference("org.apache.royale.html.beads.TextFieldView")
+ font:
+ family: $font-stack
+ size: $font-size
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
similarity index 52%
copy from frameworks/themes/JewelTheme/src/main/sass/_global.sass
copy to frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
index 3a8a0ef..b02123a 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textbutton.sass
@@ -16,17 +16,49 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Jewel TextButton
+ */
+%textbutton-def
+ @extend %button-def
+ /* TextField */
+ font:
+ family: $font-stack
+ style: bold
+ size: $font-size
+ //+trans(0.2s ease-in-out)
+ text:
+ transform: uppercase
+ decoration: none
+ //shadow: 0 .063em rgba(black,.3)
+ [disabled]
+ text:
+ shadow: unset
-@namespace j "library://ns.apache.org/royale/jewel"
-@namespace "http://www.w3.org/1999/xhtml"
+.jewel.textbutton, .jewel.textbutton:hover
+ @extend %textbutton-def
+.jewel.textbutton
+ +button-theme($default-color, $default-font-color)
-.royale *, .royale *:before, .royale *:after
- -moz-box-sizing: border-box
- -webkit-box-sizing: border-box
- box-sizing: border-box
- //fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject")
+.jewel.textbutton.primary
+ +button-theme($primary-color, $font-color)
+
+.jewel.textbutton.secondary
+ +button-theme($secondary-color, $font-color)
+
+.jewel.textbutton.emphasized
+ +button-theme($emphasized-color, $font-color)
+
+// /* TextField: */
+// font-family: $font-stack
+// font-size: 14px
+// font-weight: bold
+// color: $font-normal-color
+// text-shadow: 0 1px 0 #555
+
+// padding: 10px 0px
+// display: inline-block
+// min-width: 80px
-.royale
- padding: 10px
- margin: 10px
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textfield.sass
similarity index 56%
copy from frameworks/themes/JewelTheme/src/main/sass/_global.sass
copy to frameworks/themes/JewelBlueTheme/src/main/sass/components/_textfield.sass
index 3a8a0ef..84b696c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/components/_textfield.sass
@@ -17,16 +17,51 @@
//
////////////////////////////////////////////////////////////////////////////////
-@namespace j "library://ns.apache.org/royale/jewel"
-@namespace "http://www.w3.org/1999/xhtml"
+/**
+ * Jewel TextField
+ */
+TextField
+ position: relative
+ display: inline-block
+ box-sizing: border-box
+ width: 300px
+ max-width: 100%
+ margin: 0
+.vTextField--input
+ font-size: 16px
+ font-family: 'Lato', sans-serif
-.royale *, .royale *:before, .royale *:after
- -moz-box-sizing: border-box
- -webkit-box-sizing: border-box
- box-sizing: border-box
- //fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject")
+ border: none
+ border-bottom: 2px solid
+ border-bottom-color: #ff0000
+ display: block
+ margin: 0
+ padding: 4 0
+ width: 100px
+ background: transparent
+ text-align: left
+ color: inherit
+ outline: none
+
+.vTextField--label
+ bottom: 0
+ color: #ff0000
+ font-size: 13px
+ left: 0
+ right: 0
+ pointer-events: none
+ position: absolute
+ display: block
+ width: 100%
+ overflow: hidden
+ white-space: nowrap
+ text-align: left
-.royale
- padding: 10px
- margin: 10px
+// padding: 5px;
+// border: solid 1px #666666;
+// border-radius: 6px;
+// color: #333333;
+//:hover
+// padding: 5px;
+// background-color: #DFDFDF;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass b/frameworks/themes/JewelBlueTheme/src/main/sass/royale-jewel-blue.sass
similarity index 96%
rename from frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
rename to frameworks/themes/JewelBlueTheme/src/main/sass/royale-jewel-blue.sass
index 2ecaa8c..f92a6ae 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
+++ b/frameworks/themes/JewelBlueTheme/src/main/sass/royale-jewel-blue.sass
@@ -16,7 +16,7 @@
*/
// Variables
-@import "colors/red-color-palette"
+@import "blue-color-palette"
@import "variables"
@import "mixins"
@import "functions"
diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml
index 055a04d..6370b58 100644
--- a/frameworks/themes/JewelTheme/pom.xml
+++ b/frameworks/themes/JewelTheme/pom.xml
@@ -50,8 +50,8 @@
<path>../src/main/resources/assets/*</path>
</include-file>
<include-file>
- <name>royale-jewel-blue.css</name>
- <path>../src/main/resources/royale-jewel-blue.css</path>
+ <name>defaults.css</name>
+ <path>../src/main/resources/defaults.css</path>
</include-file>
</includeFiles>
</configuration>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
similarity index 82%
rename from frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
rename to frameworks/themes/JewelTheme/src/main/resources/defaults.css
index f6d83dd..423dc09 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -43,15 +43,15 @@
}
.jewel.button {
- background-color: rgba(0, 0, 0, 0.2);
+ background-color: rgba(0, 0, 0, 0.3);
transition-duration: 0.4s;
- color: rgba(0, 0, 0, 0.5);
+ color: rgba(0, 0, 0, 0.4);
}
.jewel.button:hover {
- background-color: rgba(15, 15, 15, 0.2);
+ background-color: rgba(15, 15, 15, 0.3);
}
.jewel.button:active {
- background-color: rgba(0, 0, 0, 0.2);
+ background-color: rgba(0, 0, 0, 0.3);
}
.jewel.button:focus {
outline: 0;
@@ -63,15 +63,15 @@
}
.jewel.button.primary {
- background-color: #FF0000;
+ background-color: #dedede;
transition-duration: 0.4s;
- color: white;
+ color: black;
}
.jewel.button.primary:hover {
- background-color: #ff1f1f;
+ background-color: #ededed;
}
.jewel.button.primary:active {
- background-color: #e00000;
+ background-color: #cfcfcf;
}
.jewel.button.primary:focus {
outline: 0;
@@ -83,15 +83,15 @@
}
.jewel.button.secondary {
- background-color: #342F30;
+ background-color: #011833;
transition-duration: 0.4s;
- color: white;
+ color: black;
}
.jewel.button.secondary:hover {
- background-color: #443e3f;
+ background-color: #022651;
}
.jewel.button.secondary:active {
- background-color: #242021;
+ background-color: #000a15;
}
.jewel.button.secondary:focus {
outline: 0;
@@ -103,15 +103,15 @@
}
.jewel.button.emphasized {
- background-color: #016936;
+ background-color: #1FD348;
transition-duration: 0.4s;
- color: white;
+ color: black;
}
.jewel.button.emphasized:hover {
- background-color: #018746;
+ background-color: #30e158;
}
.jewel.button.emphasized:active {
- background-color: #014b26;
+ background-color: #1bb83f;
}
.jewel.button.emphasized:focus {
outline: 0;
@@ -138,15 +138,15 @@
}
.jewel.textbutton {
- background-color: rgba(0, 0, 0, 0.2);
+ background-color: rgba(0, 0, 0, 0.3);
transition-duration: 0.4s;
- color: rgba(0, 0, 0, 0.5);
+ color: rgba(0, 0, 0, 0.4);
}
.jewel.textbutton:hover {
- background-color: rgba(15, 15, 15, 0.2);
+ background-color: rgba(15, 15, 15, 0.3);
}
.jewel.textbutton:active {
- background-color: rgba(0, 0, 0, 0.2);
+ background-color: rgba(0, 0, 0, 0.3);
}
.jewel.textbutton:focus {
outline: 0;
@@ -158,15 +158,15 @@
}
.jewel.textbutton.primary {
- background-color: #FF0000;
+ background-color: #dedede;
transition-duration: 0.4s;
- color: white;
+ color: black;
}
.jewel.textbutton.primary:hover {
- background-color: #ff1f1f;
+ background-color: #ededed;
}
.jewel.textbutton.primary:active {
- background-color: #e00000;
+ background-color: #cfcfcf;
}
.jewel.textbutton.primary:focus {
outline: 0;
@@ -178,15 +178,15 @@
}
.jewel.textbutton.secondary {
- background-color: #342F30;
+ background-color: #011833;
transition-duration: 0.4s;
- color: white;
+ color: black;
}
.jewel.textbutton.secondary:hover {
- background-color: #443e3f;
+ background-color: #022651;
}
.jewel.textbutton.secondary:active {
- background-color: #242021;
+ background-color: #000a15;
}
.jewel.textbutton.secondary:focus {
outline: 0;
@@ -198,15 +198,15 @@
}
.jewel.textbutton.emphasized {
- background-color: #016936;
+ background-color: #1FD348;
transition-duration: 0.4s;
- color: white;
+ color: black;
}
.jewel.textbutton.emphasized:hover {
- background-color: #018746;
+ background-color: #30e158;
}
.jewel.textbutton.emphasized:active {
- background-color: #014b26;
+ background-color: #1bb83f;
}
.jewel.textbutton.emphasized:focus {
outline: 0;
@@ -268,4 +268,4 @@ TextField {
text-align: left;
}
-/*# sourceMappingURL=royale-jewel-red.css.map */
+/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass b/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
similarity index 85%
rename from frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
rename to frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
index b564176..1b331d7 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
@@ -17,10 +17,10 @@
//
////////////////////////////////////////////////////////////////////////////////
// Color Themes
-$default-color: rgba(0,0,0,0.20)
-$primary-color: #FF0000
-$secondary-color: #342F30
-$emphasized-color: #016936
+$default-color: rgba(0,0,0,.3)
+$primary-color: #dedede
+$secondary-color: #011833
+$emphasized-color: #1FD348
-$default-font-color: rgba(0, 0, 0, .5)
-$font-color: white
\ No newline at end of file
+$default-font-color: rgba(0, 0, 0, .4)
+$font-color: #000000
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
index 3a8a0ef..23fa5ea 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
@@ -25,8 +25,7 @@
-moz-box-sizing: border-box
-webkit-box-sizing: border-box
box-sizing: border-box
- //fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject")
-
+
.royale
padding: 10px
margin: 10px
diff --git a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
similarity index 96%
rename from frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
rename to frameworks/themes/JewelTheme/src/main/sass/defaults.sass
index 2a9526d..b3bd62e 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/defaults.sass
@@ -16,7 +16,7 @@
*/
// Variables
-@import "colors/blue-color-palette"
+@import "default-color-palette"
@import "variables"
@import "mixins"
@import "functions"
diff --git a/frameworks/themes/pom.xml b/frameworks/themes/pom.xml
index 19fbbe6..a30c613 100644
--- a/frameworks/themes/pom.xml
+++ b/frameworks/themes/pom.xml
@@ -35,6 +35,7 @@
<modules>
<module>Basic</module>
<module>JewelTheme</module>
+ <module>JewelBlueTheme</module>
</modules>
<dependencies>
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 36/49: - Change slider to input range (but still is
unfinished , no events),
and CSS compilation give problem (reported as issues) - CheckBox and Radio
Button still need more progress,
but still fins problems in CSS compilation that needs to be solved
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit f1283ac45f62e7207f9a9bb6be53a81e5afbd67c
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Mar 23 00:13:36 2018 +0100
- Change slider to input range (but still is unfinished , no events), and CSS compilation give problem (reported as issues)
- CheckBox and Radio Button still need more progress, but still fins problems in CSS compilation that needs to be solved
---
.../src/main/royale/TextInputPlayGround.mxml | 2 +-
.../projects/Jewel/src/main/resources/defaults.css | 4 +-
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../projects/Jewel/src/main/royale/JewelClasses.as | 4 +-
.../royale/org/apache/royale/jewel/CheckBox.as | 4 +-
.../royale/org/apache/royale/jewel/RadioButton.as | 1 +
.../main/royale/org/apache/royale/jewel/Slider.as | 145 +++++++++-
.../royale/org/apache/royale/jewel/TextField.as | 23 +-
.../org/apache/royale/jewel/beads/SliderView.as | 5 +-
.../beads/controllers/SliderMouseController.as | 307 +++++++++++++++++++++
.../jewel/beads/layouts/HorizontalSliderLayout.as | 144 ++++++++++
.../royale/jewel/supportClasses/TextFieldBase.as | 38 ++-
.../Jewel/src/main/sass/components/_slider.sass | 4 +-
.../JewelTheme/src/main/resources/defaults.css | 95 +++++--
.../src/main/sass/components/_button.sass | 2 +
.../src/main/sass/components/_checkbox.sass | 26 +-
.../src/main/sass/components/_radiobutton.sass | 24 +-
.../src/main/sass/components/_slider.sass | 32 ++-
.../src/main/sass/components/_textbutton.sass | 1 +
.../src/main/sass/components/_textfield.sass | 54 ++--
20 files changed, 816 insertions(+), 100 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index e5a1021..6880431 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -34,7 +34,7 @@ limitations under the License.
<j:HorizontalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
<j:TextButton text="Check it!" primary="true"/>
- <j:TextField text="A TextField"/>
+ <j:TextField text="A TextField" primary="true"/>
</js:Group>
<js:Group>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 627c8e3..ed036f4 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -53,8 +53,8 @@ Label {
Slider {
IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel");
IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView");
- IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout");
- IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController");
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalSliderLayout");
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.SliderMouseController");
}
.SliderTrack {
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 7799373..029c767 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -37,6 +37,7 @@
<component id="HorizontalLayoutWithPaddingAndGap" class="org.apache.royale.jewel.beads.layouts.HorizontalLayoutWithPaddingAndGap"/>
<component id="VerticalLayoutWithPaddingAndGap" class="org.apache.royale.jewel.beads.layouts.VerticalLayoutWithPaddingAndGap"/>
+ <component id="HorizontalSliderLayout" class="org.apache.royale.jewel.beads.layouts.HorizontalSliderLayout" />
<!-- <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 41f586d..3860218 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -28,7 +28,9 @@ package
internal class JewelClasses
{
import org.apache.royale.jewel.beads.SliderView; SliderView;
-
+ import org.apache.royale.jewel.beads.controllers.SliderMouseController; SliderMouseController;
+ import org.apache.royale.jewel.beads.layouts.HorizontalSliderLayout; HorizontalSliderLayout;
+
COMPILE::SWF
{
import org.apache.royale.html.beads.TextFieldView; TextFieldView;
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 ee8dbff..3eb4807 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
@@ -84,11 +84,11 @@ package org.apache.royale.jewel
input = document.createElement('input') as HTMLInputElement;
input.type = 'checkbox';
- //input.className = 'input';
+ input.className = 'input';
label.appendChild(input);
checkbox = document.createElement('span') as HTMLSpanElement;
- //checkbox.className = 'label';
+ checkbox.className = 'span';
label.appendChild(checkbox);
(input as WrappedHTMLElement).royale_wrapper = this;
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 fd9f037..e77196e 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
@@ -102,6 +102,7 @@ package org.apache.royale.jewel
labelFor = addElementToWrapper(this,'label') as HTMLLabelElement;
labelFor.appendChild(icon.element);
labelFor.appendChild(textNode);
+ icon.element.className = "input";
(textNode as WrappedHTMLElement).royale_wrapper = this;
(icon.element as WrappedHTMLElement).royale_wrapper = this;
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 8d52a61..817efe8 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
@@ -18,16 +18,43 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
- import org.apache.royale.html.Slider;
+ import org.apache.royale.core.IRangeModel;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.Event;
COMPILE::JS
{
import org.apache.royale.core.WrappedHTMLElement;
import org.apache.royale.html.util.addElementToWrapper;
+ import org.apache.royale.utils.cssclasslist.addStyles;
}
+ //--------------------------------------
+ // Events
+ //--------------------------------------
+
[Event(name="valueChange", type="org.apache.royale.events.Event")]
+ /**
+ * Dispatched when Slider ends its change from one position to another.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
+ */
+ [Event(name="change", type="org.apache.royale.events.Event")]
+
+ /**
+ * Dispatched each time user moves the slider thumb from one position to another
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
+ */
+ [Event(name="input", type="org.apache.royale.events.Event")]
+
/**
* The Slider class is a component that displays a range of values using a
* track and a thumb control. The Slider uses the following bead types:
@@ -44,7 +71,7 @@ package org.apache.royale.jewel
* @playerversion AIR 2.6
* @productversion Royale 0.9.2
*/
- public class Slider extends org.apache.royale.html.Slider
+ public class Slider extends UIBase
{
/**
* constructor.
@@ -61,13 +88,125 @@ package org.apache.royale.jewel
typeNames = "jewel slider"
}
+ /**
+ * The current value of the Slider.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
+ */
+ public function get value():Number
+ {
+ return IRangeModel(model).value;
+ }
+ public function set value(newValue:Number):void
+ {
+ IRangeModel(model).value = newValue;
+ }
+
+ /**
+ * The minimum value of the Slider.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
+ */
+ public function get minimum():Number
+ {
+ return IRangeModel(model).minimum;
+ }
+ public function set minimum(value:Number):void
+ {
+ IRangeModel(model).minimum = value;
+ }
+
+ /**
+ * The maximum value of the Slider.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
+ */
+ public function get maximum():Number
+ {
+ return IRangeModel(model).maximum;
+ }
+ public function set maximum(value:Number):void
+ {
+ IRangeModel(model).maximum = value;
+ }
+
+ /**
+ * The amount to move the thumb when the track is selected. This value is
+ * adjusted to fit the nearest snapInterval.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
+ */
+ public function get stepSize():Number
+ {
+ return IRangeModel(model).stepSize;
+ }
+
+ public function set stepSize(value:Number):void
+ {
+ 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
*/
COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
- return addElementToWrapper(this,'div');
+ var div:HTMLDivElement = document.createElement('div') as HTMLDivElement;
+ div.className = typeNames;
+
+ var input:HTMLInputElement = addElementToWrapper(this,'input') as HTMLInputElement;
+ input.setAttribute('type', 'range');
+ input.className = "slider";
+
+ //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);
+
+ div.appendChild(input);
+
+ positioner = div as WrappedHTMLElement;
+ _positioner.royale_wrapper = this;
+
+ return element;
+ }
+
+ /**
+ * since we have a div surronding the main input, we need to
+ * route the class assignaments to div
+ */
+ COMPILE::JS
+ override protected function setClassName(value:String):void
+ {
+ addStyles(positioner, value);
}
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
index fa795ef..0a49aeb 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/TextField.as
@@ -53,27 +53,6 @@ package org.apache.royale.jewel
typeNames = "jewel textfield";
}
- COMPILE::JS
- private var _positioner:WrappedHTMLElement;
-
- COMPILE::JS
- /**
- * The HTMLElement used to position the component.
- */
- override public function get positioner():WrappedHTMLElement
- {
- return _positioner;
- }
-
- COMPILE::JS
- /**
- * @private
- */
- override public function set positioner(value:WrappedHTMLElement):void
- {
- _positioner = value;
- }
-
/**
* @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
* @royaleignorecoercion HTMLDivElement
@@ -106,7 +85,7 @@ package org.apache.royale.jewel
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/beads/SliderView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderView.as
index c62a3fc..f7ceec2 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderView.as
@@ -61,6 +61,7 @@ package org.apache.royale.jewel.beads
*/
public function SliderView()
{
+ super();
}
private var rangeModel:IRangeModel;
@@ -98,7 +99,7 @@ package org.apache.royale.jewel.beads
s.addElement(_thumb);
}
- COMPILE::JS {
+ /*COMPILE::JS {
_track = new Button();
_track.className = "SliderTrack";
host.addElement(_track);
@@ -107,7 +108,7 @@ package org.apache.royale.jewel.beads
_thumb.className = "SliderThumb";
_thumb.text = '\u29BF';
host.addElement(_thumb);
- }
+ }*/
rangeModel = _strand.getBeadByType(IBeadModel) as IRangeModel;
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
new file mode 100644
index 0000000..7dfe805
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/SliderMouseController.as
@@ -0,0 +1,307 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT 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.collections.parsers.JSONInputParser;
+ import org.apache.royale.core.IBead;
+ 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.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ 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;
+
+ COMPILE::JS
+ {
+ import goog.events;
+ import goog.events.EventType;
+ import org.apache.royale.events.BrowserEvent;
+ import org.apache.royale.html.Slider;
+ }
+
+ /**
+ * The SliderMouseController class bead handles mouse events on the
+ * org.apache.royale.html.Slider's component parts (thumb and track) and
+ * dispatches change events on behalf of the Slider (as well as co-ordinating visual
+ * changes (such as moving the thumb when the track has been tapped or clicked). Use
+ * this controller for horizontally oriented Sliders.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class SliderMouseController implements IBead, IBeadController
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function SliderMouseController()
+ {
+ }
+
+ private var rangeModel:IRangeModel;
+
+ private var _strand:IStrand;
+
+ private var oldValue:Number;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ rangeModel = UIBase(value).model as IRangeModel;
+
+ COMPILE::SWF
+ {
+ var sliderView:ISliderView = value.getBeadByType(ISliderView) as ISliderView;
+ sliderView.thumb.addEventListener(MouseEvent.MOUSE_DOWN, thumbDownHandler);
+
+ // add handler to detect click on track
+ sliderView.track.addEventListener(MouseEvent.CLICK, trackClickHandler, false, 99999);
+
+ }
+ /*COMPILE::JS
+ {
+ var sliderView:ISliderView = value.getBeadByType(ISliderView) as ISliderView;
+ track = sliderView.track as UIBase;
+ thumb = sliderView.thumb as UIBase;
+
+ goog.events.listen(track.element, goog.events.EventType.CLICK,
+ handleTrackClick, false, this);
+
+ goog.events.listen(thumb.element, goog.events.EventType.MOUSEDOWN,
+ handleThumbDown, false, this);
+
+ }*/
+ }
+
+ /*COMPILE::JS
+ private var track:UIBase;
+
+ COMPILE::JS
+ private var thumb:UIBase;
+ */
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ private function thumbDownHandler( event:MouseEvent ) : void
+ {
+ UIBase(_strand).topMostEventDispatcher.addEventListener(MouseEvent.MOUSE_MOVE, thumbMoveHandler);
+ UIBase(_strand).topMostEventDispatcher.addEventListener(MouseEvent.MOUSE_UP, thumbUpHandler);
+
+ var sliderView:ISliderView = _strand.getBeadByType(ISliderView) as ISliderView;
+
+ origin = new Point(event.screenX, event.screenY);
+ thumb = new Point(sliderView.thumb.x,sliderView.thumb.y);
+ oldValue = rangeModel.value;
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ private function thumbUpHandler( event:MouseEvent ) : void
+ {
+ UIBase(_strand).topMostEventDispatcher.removeEventListener(MouseEvent.MOUSE_MOVE, thumbMoveHandler);
+ UIBase(_strand).topMostEventDispatcher.removeEventListener(MouseEvent.MOUSE_UP, thumbUpHandler);
+
+ var vce:ValueChangeEvent = ValueChangeEvent.createUpdateEvent(_strand, "value", oldValue, rangeModel.value);
+ IEventDispatcher(_strand).dispatchEvent(vce);
+ }
+
+ COMPILE::SWF
+ private var origin:Point;
+ COMPILE::SWF
+ private var thumb:Point;
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ private function thumbMoveHandler( event:MouseEvent ) : void
+ {
+ var sliderView:ISliderView = _strand.getBeadByType(ISliderView) as ISliderView;
+
+ var deltaX:Number = event.screenX - origin.x;
+ var thumbW:Number = sliderView.thumb.width/2;
+ var newX:Number = thumb.x + deltaX;
+
+ var p:Number = newX/sliderView.track.width;
+ var n:Number = p*(rangeModel.maximum - rangeModel.minimum) + rangeModel.minimum;
+
+ var vce:ValueChangeEvent = ValueChangeEvent.createUpdateEvent(_strand, "value", rangeModel.value, n);
+ rangeModel.value = n;
+
+ IEventDispatcher(_strand).dispatchEvent(vce);
+ }
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ private function trackClickHandler( event:MouseEvent ) : void
+ {
+ event.stopImmediatePropagation();
+
+ var sliderView:ISliderView = _strand.getBeadByType(ISliderView) as ISliderView;
+
+ var xloc:Number = event.localX;
+ var p:Number = xloc/sliderView.track.width;
+ var n:Number = p*(rangeModel.maximum - rangeModel.minimum) + rangeModel.minimum;
+
+ var vce:ValueChangeEvent = ValueChangeEvent.createUpdateEvent(_strand, "value", rangeModel.value, n);
+ rangeModel.value = n;
+
+ IEventDispatcher(_strand).dispatchEvent(vce);
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.events.BrowserEvent
+ */
+ /*COMPILE::JS
+ private function handleTrackClick(event:MouseEvent):void
+ {
+ var bevent:BrowserEvent = event["wrappedEvent"] as BrowserEvent;
+ var host:Slider = _strand as Slider;
+ var xloc:Number = bevent.offsetX;
+ var useWidth:Number = parseInt(track.element.style.width, 10) * 1.0;
+ var p:Number = xloc / useWidth;
+ var n:Number = p*(rangeModel.maximum - rangeModel.minimum) + rangeModel.minimum;
+
+ var vce:ValueChangeEvent = ValueChangeEvent.createUpdateEvent(_strand, "value", rangeModel.value, n);
+ rangeModel.value = n;
+
+ host.dispatchEvent(vce);
+ }*/
+
+
+ /**
+ * @royaleignorecoercion org.apache.royale.events.BrowserEvent
+ */
+ // COMPILE::JS
+ // private function handleThumbDown(event:MouseEvent):void
+ // {
+ // var bevent:BrowserEvent = event["wrappedEvent"] as BrowserEvent;
+ // var host:Slider = _strand as Slider;
+ // goog.events.listen(host.element, goog.events.EventType.MOUSEUP,
+ // handleThumbUp, false, this);
+ // goog.events.listen(host.element, goog.events.EventType.MOUSEMOVE,
+ // handleThumbMove, false, this);
+ // goog.events.listen(host.element, goog.events.EventType.MOUSELEAVE,
+ // handleThumbLeave, false, this);
+
+ // mouseOrigin = bevent.screenX; //.clientX;
+ // thumbOrigin = parseInt(thumb.element.style.left, 10);
+ // oldValue = rangeModel.value;
+ // }
+
+ // COMPILE::JS
+ // private var mouseOrigin:Number;
+ // COMPILE::JS
+ // private var thumbOrigin:int;
+
+ /**
+ * @royaleignorecoercion org.apache.royale.events.BrowserEvent
+ */
+ // COMPILE::JS
+ // private function handleThumbUp(event:MouseEvent):void
+ // {
+ // var bevent:BrowserEvent = event["wrappedEvent"] as BrowserEvent;
+ // var host:Slider = _strand as Slider;
+ // goog.events.unlisten(host.element, goog.events.EventType.MOUSEUP,
+ // handleThumbUp, false, this);
+ // goog.events.unlisten(host.element, goog.events.EventType.MOUSEMOVE,
+ // handleThumbMove, false, this);
+ // goog.events.unlisten(host.element, goog.events.EventType.MOUSELEAVE,
+ // handleThumbLeave, false, this);
+
+ // calcValFromMousePosition(bevent, false);
+ // var vce:ValueChangeEvent = ValueChangeEvent.createUpdateEvent(_strand, "value", oldValue, rangeModel.value);
+
+ // host.dispatchEvent(vce);
+ // }
+
+
+ /**
+ * @royaleignorecoercion org.apache.royale.events.BrowserEvent
+ */
+ // COMPILE::JS
+ // private function handleThumbMove(event:MouseEvent):void
+ // {
+ // var bevent:BrowserEvent = event["wrappedEvent"] as BrowserEvent;
+ // var host:Slider = _strand as Slider;
+ // var lastValue:Number = rangeModel.value;
+ // calcValFromMousePosition(bevent, false);
+
+ // var vce:ValueChangeEvent = ValueChangeEvent.createUpdateEvent(_strand, "value", lastValue, rangeModel.value);
+
+ // host.dispatchEvent(vce);
+ // }
+
+ // COMPILE::JS
+ // private function handleThumbLeave(event:MouseEvent):void
+ // {
+ // var host:Slider = _strand as Slider;
+ // goog.events.unlisten(host.element, goog.events.EventType.MOUSEUP,
+ // handleThumbUp, false, this);
+ // goog.events.unlisten(host.element, goog.events.EventType.MOUSEMOVE,
+ // handleThumbMove, false, this);
+ // goog.events.unlisten(host.element, goog.events.EventType.MOUSELEAVE,
+ // handleThumbLeave, false, this);
+ // }
+
+
+ /**
+ */
+ // COMPILE::JS
+ // private function calcValFromMousePosition(event:BrowserEvent, useOffset:Boolean):void
+ // {
+ // var deltaX:Number = event.screenX - mouseOrigin;
+ // if (deltaX == 0) return;
+
+ // var thumbW:int = parseInt(thumb.element.style.width, 10) / 2;
+ // var newPointX:Number = thumbOrigin + deltaX;
+
+ // var useWidth:Number = parseInt(track.element.style.width,10) * 1.0;
+ // var p:Number = newPointX / useWidth;
+ // var n:Number = p*(rangeModel.maximum - rangeModel.minimum) + rangeModel.minimum;
+
+ // rangeModel.value = n;
+ // }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalSliderLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalSliderLayout.as
new file mode 100644
index 0000000..320a81b
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalSliderLayout.as
@@ -0,0 +1,144 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT 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.IBeadLayout;
+ 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.IEventDispatcher;
+ import org.apache.royale.html.beads.ISliderView;
+
+ /**
+ * Use the HorizontalSliderLayout with a Slider to orient the Slider
+ * horizontally.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9
+ */
+ public class HorizontalSliderLayout implements IBeadLayout
+ {
+ /**
+ * Constructor
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9
+ */
+ public function HorizontalSliderLayout()
+ {
+ }
+
+ private var _strand:IStrand;
+
+ /**
+ * @see org.apache.royale.core.IStrand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ host.addEventListener("layoutNeeded", performLayout);
+
+ host.addEventListener("widthChanged",performLayout);
+ host.addEventListener("heightChanged",performLayout);
+ }
+
+ /**
+ * @private
+ */
+ private function performLayout(event:Event):void
+ {
+ layout();
+ }
+
+ /**
+ * @private
+ */
+ public function get host():UIBase
+ {
+ return _strand as UIBase;
+ }
+
+ /**
+ * Performs the layout (size and positioning) of the elements of the slider.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9
+ */
+ public function layout():Boolean
+ {
+ var viewBead:ISliderView = host.view as ISliderView;
+ if (viewBead == null) {
+ return false;
+ }
+
+ var useWidth:Number = host.width;
+ if (isNaN(useWidth)) {
+ useWidth = 100;
+ }
+ var useHeight:Number = host.height;
+ if (isNaN(useHeight)) {
+ useHeight = 25;
+ }
+ var square:Number = Math.min(useWidth, useHeight);
+ var trackHeight:Number = useHeight / 3;
+
+ // determine the thumb position from the model information
+ var model:IRangeModel = host.model as IRangeModel;
+ var value:Number = model.value;
+ if (value < model.minimum) value = model.minimum;
+ if (value > model.maximum) value = model.maximum;
+ var p:Number = (value-model.minimum)/(model.maximum-model.minimum);
+ var xloc:Number = p * (useWidth - square);
+
+ var thumb:IUIBase = viewBead.thumb as IUIBase;
+ if(thumb != null) {
+ thumb.width = square;
+ thumb.height = square;
+
+ thumb.x = xloc;
+ thumb.y = 0;
+ }
+
+ var track:IUIBase = viewBead.track as IUIBase;
+ if(track != null)
+ {
+ track.x = square/2;
+ track.y = trackHeight; // 1/3 of the totalHeight
+ track.width = useWidth - square;
+ track.height = trackHeight;
+ }
+
+ return true;
+ }
+ }
+}
\ No newline at end of file
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
index 06a8d63..5977727 100644
--- 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
@@ -25,7 +25,9 @@ package org.apache.royale.jewel.supportClasses
COMPILE::JS
{
import goog.events;
- import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.utils.cssclasslist.toggleStyle;
+ import org.apache.royale.utils.cssclasslist.addStyles;
}
/**
@@ -122,9 +124,40 @@ package org.apache.royale.jewel.supportClasses
*/
override protected function setClassName(value:String):void
{
- positioner.className = value;
+ //positioner.className = value;
+ addStyles(positioner, value);
}
+ private var _primary:Boolean = false;
+
+ /**
+ * A boolean flag to activate "primary" effect selector.
+ * Applies primary color display effect.
+ * Colors are defined in royale-jewel.css
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function get primary():Boolean
+ {
+ return _primary;
+ }
+
+ public function set primary(value:Boolean):void
+ {
+ if (_primary != value)
+ {
+ _primary = value;
+
+ COMPILE::JS
+ {
+ toggleStyle(positioner, "primary", _primary);
+ }
+ }
+ }
+
private var _isInvalid:Boolean = false;
/**
* A boolean flag to activate "is-invalid" effect selector.
@@ -146,6 +179,7 @@ package org.apache.royale.jewel.supportClasses
COMPILE::JS
{
+ toggleStyle(positioner, "is-invalid", _isInvalid);
//positioner.classList.toggle("is-invalid", _isInvalid);
//typeNames = positioner.className;
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_slider.sass b/frameworks/projects/Jewel/src/main/sass/components/_slider.sass
index b61e110..7633733 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_slider.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_slider.sass
@@ -25,8 +25,8 @@
Slider
IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel")
IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView")
- IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout")
- IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController")
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalSliderLayout")
+ IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.SliderMouseController")
.SliderTrack
position: absolute
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index c4286da..bf22702 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -173,16 +173,13 @@ span {
cursor: unset;
}
-.jewel.checkbox > input[type="checkbox"] {
- width: 50px;
- height: 50px;
+.jewel.checkbox .span {
+ padding-left: 5px;
}
-.jewel.checkbox > label {
- cursor: auto;
- position: relative;
- display: block;
- padding-left: 20px;
- outline: none;
+.jewel.checkbox .input {
+ width: 15px;
+ height: 15px;
+ border: 1px solid;
}
.jewel.label {
@@ -190,16 +187,44 @@ span {
font-size: 14px;
}
-.jewel.radiobutton > input[type="radio"] {
- width: 50px;
- height: 50px;
+.jewel.radiobutton {
+ padding-left: 5px;
}
-.jewel.radiobutton > label {
- cursor: auto;
- position: relative;
- display: block;
- padding-left: 20px;
+.jewel.radiobutton .input {
+ width: 15px;
+ height: 15px;
+ border: 1px solid;
+}
+
+.jewel.slider .slider {
+ -webkit-appearance: none;
+ width: 100%;
+ height: 15px;
+ border-radius: 5px;
+ background: #d3d3d3;
outline: none;
+ opacity: 0.7;
+ -webkit-transition: 0.2s;
+ transition: opacity 0.2s;
+}
+.jewel.slider .slider:hover {
+ opacity: 1;
+}
+.jewel.slider .slider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ background: #4CAF50;
+ cursor: pointer;
+}
+.jewel.slider .slider::-moz-range-thumb {
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ background: #4CAF50;
+ cursor: pointer;
}
.jewel.textbutton {
@@ -367,24 +392,46 @@ span {
.jewel.textfield {
position: relative;
- font-size: 14px;
- font-weight: normal;
display: inline-flex;
}
.jewel.textfield .input {
- margin: 0em;
+ 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.2em;
+ line-height: 1.4em;
font-family: "Lato", sans-serif;
font-size: 14px;
+ font-weight: normal;
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #b3b3b3;
+ color: #808080;
+ border-radius: 3px;
+ box-shadow: none;
+}
+
+.jewel.textfield.primary {
+ position: relative;
+ display: inline-flex;
+}
+.jewel.textfield.primary .input {
+ margin: 0;
padding: 0.67em 1em;
- background: #ffffff;
- border: 1px solid rgba(34, 36, 38, 0.15);
- color: rgba(0, 0, 0, 0.87);
+ 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;
+ background: linear-gradient(white, #f3f3f3);
+ border: 1px solid #0f88d1;
+ color: #FFFFFF;
border-radius: 3px;
box-shadow: none;
}
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
index 6b8551f..6afddb2 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
@@ -17,6 +17,8 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Jewel Button
+
// Button variables
$button-margin: 0 !default
$button-padding: 10px 16px !default
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
index da62df3..485b972 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
@@ -18,13 +18,21 @@
////////////////////////////////////////////////////////////////////////////////
.jewel.checkbox
- > input[type="checkbox"]
- width: 50px
- height: 50px
- > label
- cursor: auto
- position: relative
- display: block
- padding-left: 20px
- outline: none
+
+ .span
+ padding-left: 5px
+ .input
+ width: 15px
+ height: 15px
+ border: 1px solid
+
+ // > input[type="checkbox"]
+ // width: 50px
+ // height: 50px
+ // > label
+ // cursor: auto
+ // position: relative
+ // display: block
+ // padding-left: 20px
+ // outline: none
//font-size: @labelFontSize
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
index eb1cdf6..0bba0f1 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
@@ -18,13 +18,19 @@
////////////////////////////////////////////////////////////////////////////////
.jewel.radiobutton
- > input[type="radio"]
- width: 50px
- height: 50px
- > label
- cursor: auto
- position: relative
- display: block
- padding-left: 20px
- outline: none
+ padding-left: 5px
+ .input
+ width: 15px
+ height: 15px
+ border: 1px solid
+
+ // > input[type="radio"]
+ // width: 50px
+ // height: 50px
+ // > label
+ // cursor: auto
+ // position: relative
+ // display: block
+ // padding-left: 20px
+ // outline: none
//font-size: @labelFontSize
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass
index 1d72a04..6e8d491 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass
@@ -17,4 +17,34 @@
//
////////////////////////////////////////////////////////////////////////////////
-.jewel.slider
\ No newline at end of file
+.jewel.slider
+
+ .slider
+ -webkit-appearance: none
+ width: 100%
+ height: 15px
+ border-radius: 5px
+ background: #d3d3d3
+ outline: none
+ opacity: 0.7
+ -webkit-transition: .2s
+ transition: opacity .2s
+
+ &:hover
+ opacity: 1
+
+ &::-webkit-slider-thumb
+ -webkit-appearance: none
+ appearance: none
+ width: 25px
+ height: 25px
+ border-radius: 50%
+ background: #4CAF50
+ cursor: pointer
+
+ &::-moz-range-thumb
+ width: 25px
+ height: 25px
+ border-radius: 50%
+ background: #4CAF50
+ cursor: pointer
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
index 03b66da..d10fb6e 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
@@ -17,6 +17,7 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Jewel TextButton
// Note: Use Button variables
=textbutton-theme($button-color, $text-color)
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
index 0a606f8..81feb03 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
@@ -18,40 +18,54 @@
////////////////////////////////////////////////////////////////////////////////
// Jewel Textfield
-.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-color, $text-color)
position: relative
- font:
- //family: $font-stack
- size: $font-size
- weight: normal
display: inline-flex
.input
- margin: 0em
+ 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.2em
+ line-height: 1.4em
font:
family: $font-stack
size: $font-size
- padding: .67em 1em
-
- background: #ffffff
- border: 1px solid rgba(34, 36, 38, .15)
- color: rgba(0, 0, 0, .87)
- border-radius: 3px
+ weight: normal
+
+ background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
+ border: 1px solid darken($textfield-color, 15%)
+ color: $text-color
+ border-radius: $textfield-border-radius
//transition: transition
box-shadow: none
-// padding: 5px;
-// border: solid 1px #666666;
-// border-radius: 6px;
-// color: #333333;
-//:hover
-// padding: 5px;
-// background-color: #DFDFDF;
+ //:hover
+ // padding: 5px;
+ // background-color: #DFDFDF;
+
+
+.jewel.textfield
+ +textfield-theme($default-color, $default-font-color)
+
+.jewel.textfield.primary
+ +textfield-theme($primary-color, $font-theme-color)
+
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 48/49: this styles div,
span (no dot) are not seeing in final app. the them I must to move
them from theme to final app
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 805b0abc243019462d0f78e91fc82f530f7f5eb9
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Mar 25 23:48:33 2018 +0200
this styles div, span (no dot) are not seeing in final app. the them I must to move them from theme to final app
---
examples/royale/JewelExample/src/main/royale/App.mxml | 3 ++-
frameworks/themes/JewelTheme/src/main/resources/defaults.css | 6 ++++++
frameworks/themes/JewelTheme/src/main/sass/_global.sass | 5 +++++
3 files changed, 13 insertions(+), 1 deletion(-)
diff --git a/examples/royale/JewelExample/src/main/royale/App.mxml b/examples/royale/JewelExample/src/main/royale/App.mxml
index 2d53f6a..c85a8a3 100644
--- a/examples/royale/JewelExample/src/main/royale/App.mxml
+++ b/examples/royale/JewelExample/src/main/royale/App.mxml
@@ -49,13 +49,14 @@
<local:TextInputPlayGround/>
<local:CheckBoxPlayGround/>
<local:RadioButtonPlayGround/>
- <local:SliderPlayGround/>
+
</js:Group>
<js:Group>
<js:beads>
<j:VerticalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
+ <local:SliderPlayGround/>
<local:HeadingsAndText/>
</js:Group>
</js:View>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 0a78701..8f90431 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -49,6 +49,12 @@ span {
font-size: 14px;
}
+div {
+ font-size: 14px;
+ white-space: normal;
+ word-wrap: break-word;
+}
+
.jewel.button {
cursor: pointer;
display: inline-block;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
index 0a30c44..89db9f5 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
@@ -49,3 +49,8 @@ h4
span
font-size: 14px
+
+div
+ font-size: 14px
+ white-space: normal
+ word-wrap: break-word
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 07/49: testing Lato font in theme
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 4379fb824b0a24e49d3966a9f93a4fb9e5c6158e
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Mar 13 17:10:45 2018 +0100
testing Lato font in theme
---
frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css | 4 ++--
frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css | 4 ++--
frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass | 2 +-
frameworks/themes/JewelTheme/src/main/sass/_variables.sass | 3 ++-
4 files changed, 7 insertions(+), 6 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
index e642ce7..03d06cb 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
@@ -127,9 +127,9 @@
*/
.jewel.textbutton, .jewel.textbutton:hover {
/* TextField */
- font-family: "Lato-Bold", sans-serif;
+ font-family: "Lato", sans-serif;
font-style: bold;
- font-size: 0.7rem;
+ font-size: 0.75rem;
text-transform: uppercase;
text-decoration: none;
}
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
index 60f16ca..ef40149 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
@@ -127,9 +127,9 @@
*/
.jewel.textbutton, .jewel.textbutton:hover {
/* TextField */
- font-family: "Lato-Bold", sans-serif;
+ font-family: "Lato", sans-serif;
font-style: bold;
- font-size: 0.7rem;
+ font-size: 0.75rem;
text-transform: uppercase;
text-decoration: none;
}
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
index c24dbec..b02123a 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
@@ -26,7 +26,7 @@
font:
family: $font-stack
style: bold
- size: .7rem
+ size: $font-size
//+trans(0.2s ease-in-out)
text:
transform: uppercase
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
index b1f1f39..3a6b64b 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -17,7 +17,8 @@
//
////////////////////////////////////////////////////////////////////////////////
-$font-stack: 'Lato-Bold', sans-serif
+$font-stack: 'Lato', sans-serif
+$font-size: 0.75rem
// Common Colors
$white: rgba(white,.9)
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 20/49: fix new classlist utility methods
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit fa1f3492c35389fda6f07c211cb44078d7e6ab5d
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Mar 16 16:05:16 2018 +0100
fix new classlist utility methods
---
examples/royale/JewelExample/pom.xml | 4 ++--
.../apache/royale/utils/cssclasslist/addStyles.as | 12 ++++++++----
.../royale/utils/cssclasslist/removeAllStyles.as | 10 +++++++---
.../royale/utils/cssclasslist/removeStyles.as | 12 ++++++++----
.../apache/royale/utils/cssclasslist/toggleStyle.as | 10 +++++++---
.../main/royale/org/apache/royale/core/UIBase.as | 2 +-
.../main/royale/org/apache/royale/jewel/Button.as | 6 +++---
.../Jewel/src/main/sass/jewel-framework.sass | 21 ---------------------
.../JewelTheme/src/main/resources/defaults.css | 1 -
.../JewelTheme/src/main/sass/components/_label.sass | 2 +-
10 files changed, 37 insertions(+), 43 deletions(-)
diff --git a/examples/royale/JewelExample/pom.xml b/examples/royale/JewelExample/pom.xml
index 31fd5b8..19f1837 100644
--- a/examples/royale/JewelExample/pom.xml
+++ b/examples/royale/JewelExample/pom.xml
@@ -97,13 +97,13 @@
<type>swc</type>
<scope>theme</scope>
</dependency>
- <!-- <dependency>
+ <dependency>
<groupId>org.apache.royale.framework</groupId>
<artifactId>JewelBlueTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<scope>theme</scope>
- </dependency> -->
+ </dependency>
</dependencies>
</project>
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
index aa995a0..aa07062 100644
--- 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
@@ -18,7 +18,10 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.utils.cssclasslist
{
- import org.apache.royale.core.IUIBase;
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
/**
* Add one or more styles to the component. If the specified class already
@@ -30,17 +33,18 @@ package org.apache.royale.utils.cssclasslist
* @langversion 3.0
* @productversion Royale 0.9.3
*/
- public function addStyles(wrapper:IUIBase, value:String):void
+ COMPILE::JS
+ public function addStyles(element:WrappedHTMLElement, value:String):void
{
if (value == "") return;
if (value.indexOf(" ") >= 0)
{
var classes:Array = value.split(" ");
- wrapper.element.classList.add.apply(wrapper.element.classList, classes);
+ element.classList.add.apply(element.classList, classes);
} else
{
- wrapper.element.classList.add(value);
+ element.classList.add(value);
}
}
diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/removeAllStyles.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/removeAllStyles.as
index 4d19c79..fc34fde 100644
--- a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/removeAllStyles.as
+++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/removeAllStyles.as
@@ -18,7 +18,10 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.utils.cssclasslist
{
- import org.apache.royale.core.IUIBase;
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
/**
* Removes all styles
@@ -28,9 +31,10 @@ package org.apache.royale.utils.cssclasslist
* @playerversion AIR 2.6
* @productversion Royale 0.9.3
*/
- public function removeAllStyles(wrapper:IUIBase):void
+ COMPILE::JS
+ public function removeAllStyles(element:WrappedHTMLElement):void
{
- var classList:DOMTokenList = wrapper.element.classList;
+ var classList:DOMTokenList = element.classList;
var i:int;
for( i = classList.length -1; i > 0; i-- )
{
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
index 21f59e0..badf5dd 100644
--- 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
@@ -18,7 +18,10 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.utils.cssclasslist
{
- import org.apache.royale.core.IUIBase;
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
/**
* Removes one or more styles from the component. Removing a class that does not
@@ -30,17 +33,18 @@ package org.apache.royale.utils.cssclasslist
* @langversion 3.0
* @productversion Royale 0.9.3
*/
- public function removeStyles(wrapper:IUIBase, value:String):void
+ COMPILE::JS
+ public function removeStyles(element:WrappedHTMLElement, value:String):void
{
if (value == "") return;
if (value.indexOf(" ") >= 0)
{
var classes:Array = value.split(" ");
- wrapper.element.classList.remove.apply(wrapper.element.classList, classes);
+ element.classList.remove.apply(element.classList, classes);
} else
{
- wrapper.element.classList.remove(value);
+ 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
index 8ef9224..85d7331 100644
--- 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
@@ -18,7 +18,10 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.utils.cssclasslist
{
- import org.apache.royale.core.IUIBase;
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
/**
* Adds or removes a single style.
@@ -32,8 +35,9 @@ package org.apache.royale.utils.cssclasslist
* @langversion 3.0
* @productversion Royale 0.9.3
*/
- public function toggleStyle(wrapper:IUIBase, value:String, force:Boolean = false):Boolean
+ COMPILE::JS
+ public function toggleStyle(element:WrappedHTMLElement, value:String, force:Boolean = false):Boolean
{
- return wrapper.element.classList.toggle(value, force);
+ return element.classList.toggle(value, force);
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as
index c14e113..7b37fab 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as
@@ -1085,7 +1085,7 @@ package org.apache.royale.core
COMPILE::JS
protected function setClassName(value:String):void
{
- addStyles(this, value);
+ addStyles(element, value);
}
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 4059764..2d5c831 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
@@ -88,7 +88,7 @@ package org.apache.royale.jewel
COMPILE::JS
{
- toggleStyle(this, "primary", value);
+ toggleStyle(element, "primary", value);
}
}
}
@@ -118,7 +118,7 @@ package org.apache.royale.jewel
COMPILE::JS
{
- toggleStyle(this, "secondary", value);
+ toggleStyle(element, "secondary", value);
}
}
}
@@ -148,7 +148,7 @@ package org.apache.royale.jewel
COMPILE::JS
{
- toggleStyle(this, "emphasized", value);
+ toggleStyle(element, "emphasized", value);
}
}
}
diff --git a/frameworks/projects/Jewel/src/main/sass/jewel-framework.sass b/frameworks/projects/Jewel/src/main/sass/jewel-framework.sass
deleted file mode 100644
index 10e81d9..0000000
--- a/frameworks/projects/Jewel/src/main/sass/jewel-framework.sass
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// Variables
-
-// Global
-@import "global"
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 9022239..714ec69 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -221,7 +221,6 @@
* Jewel Label
*/
.jewel.label {
- IBeadView: ClassReference("org.apache.royale.beads.views.LabelViewBead");
font-family: "Lato", sans-serif;
font-size: 0.75rem;
}
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_label.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_label.sass
index 27906d1..bb933f8 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_label.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_label.sass
@@ -22,7 +22,7 @@
*/
.jewel.label
//IBeadView: ClassReference("org.apache.royale.html.beads.TextFieldView")
- IBeadView: ClassReference("org.apache.royale.beads.views.LabelViewBead")
+ //IBeadView: ClassReference("org.apache.royale.beads.views.LabelViewBead")
font:
family: $font-stack
size: $font-size
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 11/49: Added HorizontalLayoutWithPaddingAndGap and
VerticalLayoutWithPaddingAndGap using CSS,
but gaps and padding are still in inline style, what can be ok,
but can't be modified at runtime, this must be revisited some time later
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 9a5363e8326b336d4103e3d671f4a246bdeb3776
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Mar 14 16:44:54 2018 +0100
Added HorizontalLayoutWithPaddingAndGap and VerticalLayoutWithPaddingAndGap using CSS, but gaps and padding are still in inline style, what can be ok, but can't be modified at runtime, this must be revisited some time later
---
.../src/main/royale/ButtonPlayGround.mxml | 19 +--
frameworks/projects/Jewel/pom.xml | 6 +-
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../projects/Jewel/src/main/royale/JewelClasses.as | 1 +
...Gap.as => HorizontalLayoutWithPaddingAndGap.as} | 174 +++++++++------------
.../royale/jewel/beads/layouts/VerticalLayout.as | 4 +-
.../layouts/VerticalLayoutWithPaddingAndGap.as | 37 +----
7 files changed, 90 insertions(+), 152 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index fd5f879..f89ecaa 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -32,7 +32,7 @@ limitations under the License.
</fx:Script>
<js:beads>
- <js:VerticalLayoutWithPaddingAndGap gap="10"/>
+ <j:VerticalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
<j:Label text="Basic"/>
@@ -41,31 +41,22 @@ limitations under the License.
<j:Label text="Jewel Button"/>
<j:Button primary="true"/>
-
<j:Label text="Jewel TextButton"/>
-
- <j:TextButton text="DEFAULT"/>
-
+ <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="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>
-
<j:Label text="Jewel Button Sizing (respect min values)"/>
<j:Slider id="slider" width="250" value="100" minimum="0" maximum="500"
valueChange="onValueChange(event)"/>
<j:Slider id="slider_v" width="250" value="40" minimum="0" maximum="300"
valueChange="onValueChange(event)"/>
-
<j:TextButton id="button" text="Button" width="100" height="40" primary="true"/>
</js:Group>
diff --git a/frameworks/projects/Jewel/pom.xml b/frameworks/projects/Jewel/pom.xml
index 53fb1fc..e7de6c2 100644
--- a/frameworks/projects/Jewel/pom.xml
+++ b/frameworks/projects/Jewel/pom.xml
@@ -60,10 +60,10 @@
<name>defaults.css</name>
<path>../src/main/resources/defaults.css</path>
</include-file>
- <!-- <include-file>
- <name>jewel.css</name>
+ <include-file>
+ <name>jewel-framework.css</name>
<path>../src/main/resources/jewel-framework.css</path>
- </include-file> -->
+ </include-file>
</includeFiles>
<includeLookupOnly>true</includeLookupOnly>
<!--<allowSubclassOverrides>true</allowSubclassOverrides>-->
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 96b6b31..b57f9a2 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -33,6 +33,7 @@
<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"/>
</componentPackage>
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index b2dfb99..547acc3 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -41,6 +41,7 @@ package
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;
}
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/HorizontalLayoutWithPaddingAndGap.as
similarity index 62%
copy from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
index f941993..95b689d 100644
--- 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/HorizontalLayoutWithPaddingAndGap.as
@@ -21,47 +21,39 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.LayoutBase;
import org.apache.royale.core.IBeadLayout;
- import org.apache.royale.core.IBeadModel;
import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
import org.apache.royale.core.ILayoutChild;
import org.apache.royale.core.ILayoutHost;
import org.apache.royale.core.ILayoutView;
- import org.apache.royale.core.ILayoutParent;
import org.apache.royale.core.IParentIUIBase;
- import org.apache.royale.core.IStrand;
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.core.ValuesManager;
- COMPILE::JS
- {
- import org.apache.royale.core.WrappedHTMLElement;
- }
- import org.apache.royale.events.Event;
- import org.apache.royale.events.IEventDispatcher;
- import org.apache.royale.geom.Rectangle;
- import org.apache.royale.utils.CSSUtils;
-
- /**
- * The VerticalLayoutWithPaddingAndGap class is a simple layout
- * bead similar to VerticalLayout, but it adds support for
+ COMPILE::JS {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ /**
+ * The HorizontalLayoutWithPaddingAndGap 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
- */
- public class VerticalLayoutWithPaddingAndGap extends LayoutBase implements IBeadLayout
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class HorizontalLayoutWithPaddingAndGap extends LayoutBase implements IBeadLayout
{
- /**
- * Constructor.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
- public function VerticalLayoutWithPaddingAndGap()
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function HorizontalLayoutWithPaddingAndGap()
{
super();
}
@@ -196,20 +188,16 @@ package org.apache.royale.jewel.beads.layouts
_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
- */
+ /**
+ * @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
{
- COMPILE::SWF
- {
+ COMPILE::SWF
+ {
var contentView:ILayoutView = layoutView;
var n:Number = contentView.numElements;
@@ -228,7 +216,7 @@ package org.apache.royale.jewel.beads.layouts
var paddingMetrics:EdgeData = new EdgeData();
paddingMetrics.left = _paddingLeft;
- paddingMetrics.top = _paddingTop;
+ paddingMetrics.top = _paddingTop;
paddingMetrics.right = _paddingRight;
paddingMetrics.bottom = _paddingBottom;
var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
@@ -250,92 +238,74 @@ package org.apache.royale.jewel.beads.layouts
ilc = child as ILayoutChild;
- var childXpos:Number = xpos; // default x position
+ var childYpos:Number = ypos; // default y position
- if (!hostWidthSizedToContent) {
- var childWidth:Number = child.width;
- if (ilc != null && !isNaN(ilc.percentWidth)) {
- childWidth = hostWidth * ilc.percentWidth/100.0;
- ilc.setWidth(childWidth);
+ 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 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;
+ // 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;
}
if (ilc) {
- ilc.setX(childXpos);
- ilc.setY(ypos);
+ ilc.setX(xpos);
+ ilc.setY(childYpos);
- if (!hostHeightSizedToContent && !isNaN(ilc.percentHeight)) {
- var newHeight:Number = hostHeight * ilc.percentHeight / 100;
- ilc.setHeight(newHeight);
+ if (!hostWidthSizedToContent && !isNaN(ilc.percentWidth)) {
+ var newWidth:Number = hostWidth * ilc.percentWidth / 100;
+ ilc.setWidth(newWidth);
}
} else {
- child.x = childXpos;
- child.y = ypos;
+ child.x = xpos;
+ child.y = childYpos;
}
- ypos += child.height + _gap;
+ xpos += child.width + _gap;
}
return true;
- }
- COMPILE::JS
- {
- var children:Array;
- var i:int;
- var n:int;
- var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- contentView.element.style["vertical-align"] = "top";
-
- children = contentView.internalChildren();
- n = children.length;
- for (i = 0; i < n; i++)
- {
- var child:WrappedHTMLElement = children[i];
-
- child.className += " vertical-layout-padding-gap";
+ }
+ COMPILE::JS
+ {
+ var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+ contentView.element.classList.add("layout", "horizontal");
- /*if(i == 0)
- {
- child.style.marginTop = _paddingTop + 'px';
- }
- else
- {
- child.style.marginTop = _gap + 'px';
- }
- child.style.marginRight = _paddingRight + 'px';
+ 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.marginBottom = _paddingBottom + 'px';
+ child.style.marginRight = _paddingRight + 'px';
}
else
{
- child.style.marginBottom = '0px';
+ child.style.marginRight = '0px';
}
- child.style.marginLeft = _paddingLeft + 'px';
- child.royale_wrapper.setDisplayStyleForLayout('block');
- if (child.style.display === 'none')
+ child.style.marginBottom = _paddingBottom + 'px';
+ if(i == 0)
{
- child.royale_wrapper.setDisplayStyleForLayout('block');
+ child.style.marginLeft = _paddingLeft + 'px';
}
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');
+ child.style.marginLeft = _gap + 'px';
+ }
}
- return true;
- }
+ 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 cc217c2..947a7de 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
@@ -153,10 +153,8 @@ package org.apache.royale.jewel.beads.layouts
contentView.element.classList.add("layout", "vertical");
var children:Array = contentView.internalChildren();
- n = children.length;
-
var i:int;
- var n:int;
+ var n:int = children.length;
for (i = 0; i < n; i++)
{
var child:WrappedHTMLElement = children[i] as WrappedHTMLElement;
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
index f941993..ed602a2 100644
--- 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
@@ -21,14 +21,11 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.LayoutBase;
import org.apache.royale.core.IBeadLayout;
- import org.apache.royale.core.IBeadModel;
import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
import org.apache.royale.core.ILayoutChild;
import org.apache.royale.core.ILayoutHost;
import org.apache.royale.core.ILayoutView;
- import org.apache.royale.core.ILayoutParent;
import org.apache.royale.core.IParentIUIBase;
- import org.apache.royale.core.IStrand;
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.core.ValuesManager;
@@ -36,10 +33,6 @@ package org.apache.royale.jewel.beads.layouts
{
import org.apache.royale.core.WrappedHTMLElement;
}
- import org.apache.royale.events.Event;
- import org.apache.royale.events.IEventDispatcher;
- import org.apache.royale.geom.Rectangle;
- import org.apache.royale.utils.CSSUtils;
/**
* The VerticalLayoutWithPaddingAndGap class is a simple layout
@@ -285,22 +278,17 @@ package org.apache.royale.jewel.beads.layouts
}
COMPILE::JS
{
- var children:Array;
- var i:int;
- var n:int;
var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- contentView.element.style["vertical-align"] = "top";
-
- children = contentView.internalChildren();
- n = children.length;
+ contentView.element.classList.add("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];
- child.className += " vertical-layout-padding-gap";
-
-
- /*if(i == 0)
+ if(i == 0)
{
child.style.marginTop = _paddingTop + 'px';
}
@@ -318,18 +306,7 @@ package org.apache.royale.jewel.beads.layouts
child.style.marginBottom = '0px';
}
child.style.marginLeft = _paddingLeft + 'px';
- child.royale_wrapper.setDisplayStyleForLayout('block');
- if (child.style.display === 'none')
- {
- child.royale_wrapper.setDisplayStyleForLayout('block');
- }
- else
- {
- // block elements don't measure width correctly so set to inline for a second
- child.style.display = 'inline-block';
- child.style.display = 'block';
- }
- */
+
child.royale_wrapper.dispatchEvent('sizeChanged');
}
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 09/49: add TextFieldView;
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 563e4ed9064cb1ec10045233793e11728be9d7cc
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Mar 13 18:01:55 2018 +0100
add TextFieldView;
---
.../projects/Jewel/src/main/royale/JewelClasses.as | 2 +
.../apache/royale/jewel/beads/TextFieldView.as} | 57 +++++++++++++---------
2 files changed, 35 insertions(+), 24 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index 3cb788e..b2dfb99 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -31,6 +31,8 @@ package
COMPILE::SWF
{
+ import org.apache.royale.html.beads.TextFieldView; TextFieldView;
+
import org.apache.royale.jewel.beads.SliderThumbView; SliderThumbView;
import org.apache.royale.jewel.beads.SliderTrackView; SliderTrackView;
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/TextFieldView.as
similarity index 51%
copy from frameworks/projects/Jewel/src/main/royale/JewelClasses.as
copy to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/TextFieldView.as
index 3cb788e..884d8d6 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/TextFieldView.as
@@ -16,30 +16,39 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package
+package org.apache.royale.jewel.beads
{
-
+ import flash.text.TextFieldType;
+
/**
- * @private
- * This class is used to link additional classes into jewel.swc
- * beyond those that are found by dependecy analysis starting
- * from the classes specified in manifest.xml.
+ * 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
+ * right-to-left text support in this view.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
*/
- internal class JewelClasses
- {
- import org.apache.royale.jewel.beads.SliderView; SliderView;
-
- COMPILE::SWF
- {
- import org.apache.royale.jewel.beads.SliderThumbView; SliderThumbView;
- import org.apache.royale.jewel.beads.SliderTrackView; SliderTrackView;
-
- import org.apache.royale.jewel.beads.RadioButtonView; RadioButtonView;
- }
-
- import org.apache.royale.jewel.beads.layouts.HorizontalLayout; HorizontalLayout;
- import org.apache.royale.jewel.beads.layouts.VerticalLayout; VerticalLayout;
- import org.apache.royale.jewel.beads.layouts.VerticalLayoutWithPaddingAndGap; VerticalLayoutWithPaddingAndGap;
- }
-
-}
\ No newline at end of file
+ public class TextFieldView extends TextFieldViewBase
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function TextFieldView()
+ {
+ super();
+
+ textField.selectable = false;
+ textField.type = TextFieldType.DYNAMIC;
+ textField.mouseEnabled = false;
+ textField.autoSize = "left";
+ }
+ }
+}
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 41/49: - Fix TextField disabled w/wout prompt -
Improve focus on buttons and textfield
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 5b299c1ad48c56353087db5ad4c753b52f403bff
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Mar 24 19:45:47 2018 +0100
- Fix TextField disabled w/wout prompt
- Improve focus on buttons and textfield
---
.../src/main/royale/TextInputPlayGround.mxml | 11 ++-
.../JewelTheme/src/main/resources/defaults.css | 104 ++++++++++++++++-----
.../themes/JewelTheme/src/main/sass/_mixins.sass | 5 +
.../src/main/sass/components/_button.sass | 12 ++-
.../src/main/sass/components/_slider.sass | 4 +-
.../src/main/sass/components/_textbutton.sass | 10 +-
6 files changed, 117 insertions(+), 29 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index e5a1021..fa64a53 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -49,11 +49,20 @@ limitations under the License.
<j:TextButton text="Send" primary="true"/>
</js:Group>
- <j:TextField>
+ <j:TextField text="Disabled with text...">
<j:beads>
<js:TextPromptBead prompt="Disabled Textfield..."/>
<j:Disabled/>
</j:beads>
</j:TextField>
+ <j:TextField>
+ <j:beads>
+ <js:TextPromptBead prompt="Disabled with prompt..."/>
+ <j:Disabled/>
+ </j:beads>
+ </j:TextField>
+
+
+
</js:Group>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 92c4c04..22b39bc 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -71,7 +71,9 @@ span {
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
- outline: 0;
+ 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] {
border: 1px solid #c6c6c6;
@@ -102,7 +104,9 @@ span {
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
- outline: 0;
+ 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] {
border: 1px solid #c6c6c6;
@@ -133,7 +137,9 @@ span {
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
- outline: 0;
+ 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] {
border: 1px solid #c6c6c6;
@@ -164,7 +170,9 @@ span {
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
- outline: 0;
+ 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] {
border: 1px solid #c6c6c6;
@@ -174,18 +182,48 @@ span {
}
.jewel.checkbox {
- position: absolute;
- left: -9999px;
cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ vertical-align: middle;
+ box-sizing: border-box;
+ width: 100%;
+ height: 24px;
+}
+.jewel.checkbox .input {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ -o-appearance: none;
+ appearance: none;
+ width: 22px;
+ height: 22px;
+ line-height: 24px;
+ border: 1px solid #3CADF1;
+ border-radius: 3px;
+}
+.jewel.checkbox .input:checked {
+ border: 3px solid #3CADF1;
+}
+.jewel.checkbox .input:checked:active {
+ border: 4px solid #EF5A2A;
+}
+.jewel.checkbox .input:checked:after {
+ font-size: 14px;
+ position: absolute;
+ top: 0px;
+ left: 3px;
+ color: #99a1a7;
+}
+.jewel.checkbox .input[disabled] {
+ cursor: unset;
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
}
.jewel.checkbox .span {
padding-left: 5px;
}
-.jewel.checkbox .input {
- width: 15px;
- height: 15px;
- border: 1px solid;
-}
.jewel.label {
font-family: "Lato", sans-serif;
@@ -211,11 +249,13 @@ span {
opacity: 0.7;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
- focus-outline: none;
}
.jewel.slider .slider:hover {
opacity: 1;
}
+.jewel.slider .slider:focus {
+ outline: none;
+}
.jewel.slider .slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
@@ -261,12 +301,14 @@ span {
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.textbutton:focus {
- outline: 0;
+ 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] {
border: 1px solid #c6c6c6;
background: #F9F9F9;
- color: #b9b9b9;
+ color: #c6c6c6;
box-shadow: none;
cursor: unset;
font-weight: normal;
@@ -302,12 +344,14 @@ span {
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.textbutton.primary:focus {
- outline: 0;
+ 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] {
border: 1px solid #c6c6c6;
background: #F9F9F9;
- color: #b9b9b9;
+ color: #c6c6c6;
box-shadow: none;
cursor: unset;
font-weight: normal;
@@ -343,12 +387,14 @@ span {
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.textbutton.secondary:focus {
- outline: 0;
+ 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] {
border: 1px solid #c6c6c6;
background: #F9F9F9;
- color: #b9b9b9;
+ color: #c6c6c6;
box-shadow: none;
cursor: unset;
font-weight: normal;
@@ -384,12 +430,14 @@ span {
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.textbutton.emphasized:focus {
- outline: 0;
+ 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] {
border: 1px solid #c6c6c6;
background: #F9F9F9;
- color: #b9b9b9;
+ color: #c6c6c6;
box-shadow: none;
cursor: unset;
font-weight: normal;
@@ -416,10 +464,24 @@ span {
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 3px;
- box-shadow: none;
+ transition-duration: 0.3s;
+ transition-timing-function: easein;
}
.jewel.textfield .input:focus {
border: 1px solid #0f88d1;
}
+.jewel.textfield .input::placeholder {
+ color: #a6a6a6;
+}
+.jewel.textfield .input[disabled] {
+ cursor: unset;
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+ box-shadow: none;
+ color: #c6c6c6;
+}
+.jewel.textfield .input[disabled]::placeholder {
+ color: #c6c6c6;
+}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
index 22b1b05..a0a4045 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
@@ -18,6 +18,11 @@
////////////////////////////////////////////////////////////////////////////////
+=appear($val)
+ -webkit-appearance: $val
+ -moz-appearance: $val
+ -o-appearance: $val
+ appearance: $val
//=trans($val...)
// -webkit-transition: $val
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
index 6afddb2..fc7e11f 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
@@ -43,7 +43,7 @@ $button-border-radius: 3px
@else
border: 1px solid darken($button-color, 15%)// .094em
background: linear-gradient(lighten($button-color, 5%), darken($button-color, 5%))
- box-shadow: inset 0 1px 0 lighten($button-color, 20%)
+ box-shadow: inset 0 1px 0 lighten($button-color, 20%) //0px 0px 0px 4px rgba($light-color,.3),
border-radius: $button-border-radius //.625em
@if $transitions-enable
@@ -67,8 +67,14 @@ $button-border-radius: 3px
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
&:focus
- outline: 0
-
+ outline: none
+ @if $flat
+ border: 1px solid $button-color
+ box-shadow: inset 0px 0px 0px 1px rgba(lighten($button-color, 50%), .5)
+ @else
+ border: 1px solid darken($button-color, 15%)
+ box-shadow: inset 0px 0px 0px 1px rgba(lighten($button-color, 50%), .5), inset 0 1px 0 rgba(lighten($button-color, 55%), .6)
+
&[disabled]
border: 1px solid darken($disabled-color, 20%)// .094em solid
background: $disabled-color
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass
index 9fd2299..f92fdd0 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_slider.sass
@@ -33,9 +33,9 @@
&:hover
opacity: 1
- :focus
+ &:focus
outline: none
-
+
&::-webkit-slider-thumb
-webkit-appearance: none
appearance: none
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
index d10fb6e..1609be9 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
@@ -70,12 +70,18 @@
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
&:focus
- outline: 0
+ outline: none
+ @if $flat
+ border: 1px solid $button-color
+ box-shadow: inset 0px 0px 0px 1px rgba(lighten($button-color, 50%), .5)
+ @else
+ border: 1px solid darken($button-color, 15%)
+ box-shadow: inset 0px 0px 0px 1px rgba(lighten($button-color, 50%), .5), inset 0 1px 0 rgba(lighten($button-color, 55%), .6)
&[disabled]
border: 1px solid darken($disabled-color, 20%)// .094em solid
background: $disabled-color
- color: darken($disabled-color, 25%)
+ color: darken($disabled-color, 20%)
box-shadow: none
cursor: unset
font:
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 46/49: radiobutton almost done but as checbox needs
of #35 solved to be finished
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit c62176cb6819e33f1062dc05f2415d2422ffaef3
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Mar 25 17:32:53 2018 +0200
radiobutton almost done but as checbox needs of #35 solved to be finished
---
.../src/main/royale/RadioButtonPlayGround.mxml | 14 +-
.../royale/org/apache/royale/jewel/CheckBox.as | 6 +-
.../royale/org/apache/royale/jewel/RadioButton.as | 433 +++++++++++++++++++--
.../main/resources/assets/radiobutton-circle.svg | 19 +
.../JewelTheme/src/main/resources/defaults.css | 57 ++-
.../src/main/sass/components/_radiobutton.sass | 93 ++++-
6 files changed, 553 insertions(+), 69 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml
index 14da2a1..3d34b18 100644
--- a/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml
@@ -29,9 +29,17 @@ limitations under the License.
<html:H3 text="Jewel RadioButton"/>
- <j:RadioButton text="RadioButton 1"/>
- <j:RadioButton text="RadioButton 2"/>
- <j:RadioButton text="RadioButton Disabled">
+ <j:RadioButton text="RadioButton 1" groupName="radios" value="Test 1"/>
+ <j:RadioButton text="RadioButton 2" groupName="radios" value="Test 2"/>
+ <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="Set and Disabled" selected="true">
<j:beads>
<j:Disabled/>
</j:beads>
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 abf8185..d69fad6 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
@@ -23,7 +23,6 @@ package org.apache.royale.jewel
COMPILE::JS
{
- import org.apache.royale.core.CSSClassList;
import org.apache.royale.core.WrappedHTMLElement;
import org.apache.royale.events.Event;
import org.apache.royale.html.util.addElementToWrapper;
@@ -114,7 +113,6 @@ package org.apache.royale.jewel
return element;
}
- COMPILE::JS
/**
* override UIBase to affect positioner instead of element
*
@@ -123,10 +121,10 @@ package org.apache.royale.jewel
* @playerversion AIR 2.6
* @productversion Royale 0.9.2
*/
+ COMPILE::JS
override protected function setClassName(value:String):void
{
- //positioner.className = value;
- addStyles(positioner, value);
+ addStyles(positioner, value);
}
/**
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 e77196e..19d5981 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
@@ -18,96 +18,443 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
- import org.apache.royale.html.RadioButton;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.MouseEvent;
COMPILE::SWF
{
- import flash.display.DisplayObject;
+ import flash.utils.Dictionary;
+ import org.apache.royale.core.UIButtonBase;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IValueToggleButtonModel;
}
COMPILE::JS
{
+ import org.apache.royale.core.UIBase;
import org.apache.royale.core.WrappedHTMLElement;
- import org.apache.royale.jewel.supportClasses.RadioButtonIcon;
import org.apache.royale.html.util.addElementToWrapper;
+ import org.apache.royale.utils.cssclasslist.addStyles;
}
+ //--------------------------------------
+ // Events
+ //--------------------------------------
+
+ /**
+ * Dispatched when the user clicks on RadioButton.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
+ */
+ [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
+ */
+ [Event(name="change", type="org.apache.royale.events.Event")]
+
/**
- * The RadioButton class is a component that displays a selectable Button. RadioButtons
- * are typically used in groups, identified by the groupName property. RadioButton use
- * the following beads:
- *
- * org.apache.royale.core.IBeadModel: the data model, which includes the groupName.
- * org.apache.royale.core.IBeadView: the bead that constructs the visual parts of the RadioButton..
- *
- * @toplevel
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- */
+ * 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
+ * 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.8
+ */
COMPILE::SWF
- public class RadioButton extends org.apache.royale.html.RadioButton
- {
+ public class RadioButton extends UIButtonBase implements IStrand
+ {
/**
* constructor.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.8
*/
- public function RadioButton(upState:DisplayObject=null, overState:DisplayObject=null, downState:DisplayObject=null, hitTestState:DisplayObject=null)
+ public function RadioButton()
{
- super(upState, overState, downState, hitTestState);
+ super();
+
+ typeNames = "jewel radiobutton";
- typeNames = "jewel radiobutton"
+ addEventListener(org.apache.royale.events.MouseEvent.CLICK, internalMouseHandler);
}
- }
+ protected static var dict:Dictionary = new Dictionary(true);
+
+ /**
+ * The name of the group. Only one RadioButton in a group is selected.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
+ */
+ public function get groupName() : String
+ {
+ return IValueToggleButtonModel(model).groupName;
+ }
+ public function set groupName(value:String) : void
+ {
+ IValueToggleButtonModel(model).groupName = value;
+ }
+
+ /**
+ * The string used as a label for the RadioButton.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
+ */
+ public function get text():String
+ {
+ return IValueToggleButtonModel(model).text;
+ }
+ public function set text(value:String):void
+ {
+ IValueToggleButtonModel(model).text = value;
+ }
+
+ /**
+ * Whether or not the RadioButton instance is selected. Setting this property
+ * causes the currently selected RadioButton in the same group to lose the
+ * selection.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
+ */
+ public function get selected():Boolean
+ {
+ return IValueToggleButtonModel(model).selected;
+ }
+ public function set selected(selValue:Boolean):void
+ {
+ IValueToggleButtonModel(model).selected = selValue;
+
+ // if this button is being selected, its value should become
+ // its group's selectedValue
+ if( selValue ) {
+ for each(var rb:org.apache.royale.jewel.RadioButton in dict)
+ {
+ if( rb.groupName == groupName )
+ {
+ rb.selectedValue = value;
+ }
+ }
+ }
+ }
+
+ /**
+ * The value associated with the RadioButton. For example, RadioButtons with labels,
+ * "Red", "Green", and "Blue" might have the values 0, 1, and 2 respectively.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
+ */
+ public function get value():Object
+ {
+ return IValueToggleButtonModel(model).value;
+ }
+ public function set value(newValue:Object):void
+ {
+ IValueToggleButtonModel(model).value = newValue;
+ }
+
+ /**
+ * The group's currently selected value.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
+ */
+ public function get selectedValue():Object
+ {
+ return IValueToggleButtonModel(model).selectedValue;
+ }
+ public function set selectedValue(newValue:Object):void
+ {
+ // a radio button is really selected when its value matches that of the group's value
+ IValueToggleButtonModel(model).selected = (newValue == value);
+ IValueToggleButtonModel(model).selectedValue = newValue;
+ }
+
+ /**
+ * @private
+ */
+ override public function addedToParent():void
+ {
+ super.addedToParent();
+
+ // if this instance is selected, set the local selectedValue to
+ // this instance's value
+ if( selected ) selectedValue = value;
+
+ else {
+
+ // make sure this button's selectedValue is set from its group's selectedValue
+ // to keep it in sync with the rest of the buttons in its group.
+ for each(var rb:org.apache.royale.jewel.RadioButton in dict)
+ {
+ if( rb.groupName == groupName )
+ {
+ selectedValue = rb.selectedValue;
+ break;
+ }
+ }
+ }
+
+ dict[this] = this;
+ }
+
+ /**
+ * @private
+ */
+ private function internalMouseHandler(event:MouseEvent) : void
+ {
+ // prevent radiobutton from being turned off by a click
+ if( !selected ) {
+ selected = !selected;
+ dispatchEvent(new Event(Event.CHANGE));
+ }
+ }
+ }
+
+ /**
+ * Dispatched when the user clicks on RadioButton.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
+ */
+ [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
+ */
+ [Event(name="change", type="org.apache.royale.events.Event")]
+
COMPILE::JS
- public class RadioButton extends org.apache.royale.html.RadioButton
+ public class RadioButton extends UIBase
{
- public function RadioButton()
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.8
+ */
+ public function RadioButton()
{
- super();
+ super();
typeNames = "jewel radiobutton";
- }
+ }
/**
- * @private
- *
- * @royalesuppresspublicvarwarning
+ * Provides unique name
*/
- public static var radioCounter:int = 0;
+ protected static var radioCounter:int = 0;
- private var labelFor:HTMLLabelElement;
+ private var radio:HTMLSpanElement;
+ private var icon:HTMLInputElement;
+ private var label:HTMLLabelElement;
private var textNode:Text;
- private var icon:RadioButtonIcon;
+
+ 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
* @royaleignorecoercion HTMLLabelElement
+ * @royaleignorecoercion HTMLInputElement
+ * @royaleignorecoercion HTMLSpanElement
* @royaleignorecoercion Text
*/
override protected function createElement():WrappedHTMLElement
{
- icon = new RadioButtonIcon()
- icon.id = '_radio_' + org.apache.royale.jewel.RadioButton.radioCounter++;
+ var label:HTMLLabelElement = document.createElement('label') as HTMLLabelElement;
+
+ icon = addElementToWrapper(this,'input') as HTMLInputElement;
+ icon.type = "radio";
+ icon.className = 'input';
+ icon.id = '_radio_' + + Math.random();
+ label.appendChild(icon);
textNode = document.createTextNode('') as Text;
- labelFor = addElementToWrapper(this,'label') as HTMLLabelElement;
- labelFor.appendChild(icon.element);
- labelFor.appendChild(textNode);
- icon.element.className = "input";
-
- (textNode as WrappedHTMLElement).royale_wrapper = this;
- (icon.element as WrappedHTMLElement).royale_wrapper = this;
+ radio = document.createElement('span') as HTMLSpanElement;
+ radio.className = 'span';
+ 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;
return element;
}
+
+ /**
+ * 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
+ {
+ addStyles(positioner, value);
+ }
+
+ override public function addEventListener(type:String, handler:Function, opt_capture:Boolean = false, opt_handlerScope:Object = null):void
+ {
+ if (type == MouseEvent.CLICK)
+ {
+ icon.addEventListener(type, handler, opt_capture);
+ }
+ else
+ {
+ super.addEventListener(type, handler, opt_capture, opt_handlerScope);
+ }
+ }
+
+ public function clickHandler(event:Event):void
+ {
+ selected = !selected;
+ }
+
+ public function get groupName():String
+ {
+ return icon.name as String;
+ }
+
+ public function set groupName(value:String):void
+ {
+ icon.name = value;
+ }
+
+ public function get text():String
+ {
+ return textNode.nodeValue;
+ }
+
+ public function set text(value:String):void
+ {
+ textNode.nodeValue = value;
+ }
+
+ /** @export */
+ public function get selected():Boolean
+ {
+ return icon.checked;
+ }
+
+ public function set selected(value:Boolean):void
+ {
+ if(icon.checked == value)
+ return;
+ var instance:Object = element['MaterialRadio'];
+ if(instance)
+ {
+ if(value)
+ instance["check"]();
+ else
+ instance["uncheck"]();
+ }
+ else
+ icon.checked = value;
+ dispatchEvent(new Event(Event.CHANGE));
+ }
+
+ public function get value():Object
+ {
+ return icon.value;
+ }
+ public function set value(v:Object):void
+ {
+ icon.value = v as String;
+ }
+
+ public function get selectedValue():Object
+ {
+ var groupName:String = icon.name as String;
+ var buttons:NodeList = document.getElementsByName(groupName);
+ var n:int = buttons.length;
+
+ for (var i:int = 0; i < n; i++)
+ {
+ if (buttons[i].checked)
+ {
+ return buttons[i].value;
+ }
+ }
+ return null;
+ }
+
+ /**
+ * @royaleignorecoercion HTMLInputElement
+ */
+ public function set selectedValue(value:Object):void
+ {
+ var groupName:String = icon.name as String;
+ var buttons:NodeList = document.getElementsByName(groupName);
+ var n:int = buttons.length;
+
+ for (var i:int = 0; i < n; i++)
+ {
+ if (buttons[i].value === value)
+ {
+ buttons[i].checked = true;
+ break;
+ }
+ }
+ }
}
}
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg b/frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg
new file mode 100644
index 0000000..07beb17
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg
@@ -0,0 +1,19 @@
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT 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
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 29eb2b3..d39517f 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -245,12 +245,61 @@ span {
}
.jewel.radiobutton {
- padding-left: 5px;
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ vertical-align: middle;
+ width: 100%;
+ height: 22px;
}
.jewel.radiobutton .input {
- width: 15px;
- height: 15px;
- border: 1px solid;
+ -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;
+ 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)'><g><circle fill='#3CADF1' cx='11' cy='11' r='6'></circle></g></g></g></svg>");
+ background-repeat: no-repeat;
+ background-size: 60%;
+ background-position: center;
+ background-attachment: fixed;
+}
+.jewel.radiobutton .input:focus {
+ outline: none;
+ border: 1px solid #0f88d1;
+}
+.jewel.radiobutton .input[disabled] {
+ cursor: unset;
+ border: 1px solid #c6c6c6;
+ background: #F9F9F9;
+}
+.jewel.radiobutton .input[disabled]:checked {
+ border: 1px solid #c6c6c6;
+ 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)'><g><circle fill='lightgray' cx='11' cy='11' r='6'></circle></g></g></g></svg>");
+ background-size: 60%;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+}
+.jewel.radiobutton .span {
+ cursor: pointer;
+ position: absolute;
+ margin: 0;
+ padding-left: 6px;
+ font-size: 16px;
+ line-height: 22px;
}
.jewel.slider .slider {
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
index 0bba0f1..df3f1ed 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
@@ -17,20 +17,83 @@
//
////////////////////////////////////////////////////////////////////////////////
+// Jewel RadioButton
+
+// RadioButton variables
+$radiobutton-button-size: 22px
+$radiobutton-border-radius: 50%
+$radiobutton-label-separation: 6px
+$radiobutton-label-font-size: 16px
+
.jewel.radiobutton
- padding-left: 5px
+ //cursor: pointer
+ display: inline-block
+
+ margin: 0
+ padding: 0
+
+ position: relative
+ vertical-align: middle
+
+ width: 100%
+ height: $radiobutton-button-size
+
+ // -- INPUT
.input
- width: 15px
- height: 15px
- border: 1px solid
-
- // > input[type="radio"]
- // width: 50px
- // height: 50px
- // > label
- // cursor: auto
- // position: relative
- // display: block
- // padding-left: 20px
- // outline: none
- //font-size: @labelFontSize
\ No newline at end of file
+ +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
+ border: 0px solid
+ background: $default-color
+ @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
+ //background: url(assets/radiobutton-tick.svg), lighten($primary-color, 25%)
+ 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)'><g><circle fill='#{$primary-color}' cx='11' cy='11' r='6'></circle></g></g></g></svg>")
+ background-repeat: no-repeat
+ background-size: 60%
+ background-position: center
+ background-attachment: fixed
+
+ &:focus
+ outline: none
+ @if $flat
+ background: lighten($primary-color, 25%)
+ @else
+ border: 1px solid darken($primary-color, 15%)
+
+ &[disabled]
+ cursor: unset
+ border: 1px solid darken($disabled-color, 20%)
+ background: $disabled-color
+
+ &:checked
+ border: 1px solid darken($disabled-color, 20%)
+ //background: url(assets/radiobutton-tick.svg), $disabled-color
+ 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)'><g><circle fill='#{darken($disabled-color, 15%)}' cx='11' cy='11' r='6'></circle></g></g></g></svg>")
+ background-size: 60%
+ background-position: center
+ background-repeat: no-repeat
+ background-attachment: fixed
+
+ // -- LABEL
+ .span
+ cursor: pointer
+ position: absolute
+ margin: 0
+ padding-left: $radiobutton-label-separation
+ font-size: $radiobutton-label-font-size
+ line-height: $radiobutton-button-size
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 30/49: add transition configuration
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 6c763af1872f0dffea38155f1efe04f630bdb431
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Mar 21 15:54:09 2018 +0100
add transition configuration
---
.../JewelTheme/src/main/resources/defaults.css | 119 +++++++++++++++------
.../src/main/sass/_default-color-palette.sass | 3 +
.../src/main/sass/components/_button.sass | 13 ++-
.../src/main/sass/components/_textbutton.sass | 13 ++-
4 files changed, 112 insertions(+), 36 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 53d0f88..dac767d 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -34,15 +34,21 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 0px solid;
- background: #d9d9d9;
+ border: 1px solid #b3b3b3;
+ background: linear-gradient(#e6e6e6, #cccccc);
+ box-shadow: inset 0 1px 0 white;
border-radius: 3px;
+ transition-duration: 1s;
+ transition-timing-function: ease;
}
.jewel.button:hover {
- background: #cccccc;
+ border: 1px solid #a6a6a6;
+ background: linear-gradient(#d9d9d9, silver);
}
.jewel.button:active {
- background: #b3b3b3;
+ border: 1px solid #8d8d8d;
+ background: linear-gradient(silver, #a6a6a6);
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button:focus {
outline: 0;
@@ -61,15 +67,21 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 0px solid;
- background: #3CADF1;
+ border: 1px solid #0f88d1;
+ background: linear-gradient(#54b7f3, #24a3ef);
+ box-shadow: inset 0 1px 0 #9bd5f8;
border-radius: 3px;
+ transition-duration: 1s;
+ transition-timing-function: ease;
}
.jewel.button.primary:hover {
- background: #24a3ef;
+ border: 1px solid #0d79ba;
+ background: linear-gradient(#3CADF1, #1198e9);
}
.jewel.button.primary:active {
- background: #0f88d1;
+ border: 1px solid #0a5a8a;
+ background: linear-gradient(#1198e9, #0d79ba);
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.primary:focus {
outline: 0;
@@ -88,15 +100,21 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 0px solid;
- background: #EF5A2A;
+ border: 1px solid #be390e;
+ background: linear-gradient(#f16c42, #ed4812);
+ box-shadow: inset 0 1px 0 #f6a389;
border-radius: 3px;
+ transition-duration: 1s;
+ transition-timing-function: ease;
}
.jewel.button.secondary:hover {
- background: #ed4812;
+ border: 1px solid #a6320d;
+ background: linear-gradient(#EF5A2A, #d64010);
}
.jewel.button.secondary:active {
- background: #be390e;
+ border: 1px solid #772409;
+ background: linear-gradient(#d64010, #a6320d);
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.secondary:focus {
outline: 0;
@@ -115,15 +133,21 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 0px solid;
- background: #3AB549;
+ border: 1px solid #277b32;
+ background: linear-gradient(#45c354, #34a241);
+ box-shadow: inset 0 1px 0 #7fd68a;
border-radius: 3px;
+ transition-duration: 1s;
+ transition-timing-function: ease;
}
.jewel.button.emphasized:hover {
- background: #34a241;
+ border: 1px solid #21682a;
+ background: linear-gradient(#3AB549, #2e8e39);
}
.jewel.button.emphasized:active {
- background: #277b32;
+ border: 1px solid #15411a;
+ background: linear-gradient(#2e8e39, #21682a);
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.button.emphasized:focus {
outline: 0;
@@ -147,9 +171,12 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 0px solid;
- background: #d9d9d9;
+ border: 1px solid #b3b3b3;
+ background: linear-gradient(#e6e6e6, #cccccc);
+ box-shadow: inset 0 1px 0 white;
border-radius: 3px;
+ transition-duration: 1s;
+ transition-timing-function: ease;
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: bold;
@@ -158,10 +185,14 @@
text-decoration: none;
}
.jewel.textbutton:hover {
- background: #cccccc;
+ border: 1px solid #a6a6a6;
+ background: linear-gradient(#d9d9d9, silver);
+ box-shadow: inser 0 0 0;
}
.jewel.textbutton:active {
- background: #b3b3b3;
+ border: 1px solid #8d8d8d;
+ background: linear-gradient(silver, #a6a6a6);
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.textbutton:focus {
outline: 0;
@@ -183,21 +214,29 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 0px solid;
- background: #3CADF1;
+ border: 1px solid #0f88d1;
+ background: linear-gradient(#54b7f3, #24a3ef);
+ box-shadow: inset 0 1px 0 #9bd5f8;
border-radius: 3px;
+ transition-duration: 1s;
+ transition-timing-function: ease;
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
+ shadow: 0 1px 0 #d9d9d9;
}
.jewel.textbutton.primary:hover {
- background: #24a3ef;
+ border: 1px solid #0d79ba;
+ background: linear-gradient(#3CADF1, #1198e9);
+ box-shadow: inser 0 0 0;
}
.jewel.textbutton.primary:active {
- background: #0f88d1;
+ border: 1px solid #0a5a8a;
+ background: linear-gradient(#1198e9, #0d79ba);
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.textbutton.primary:focus {
outline: 0;
@@ -219,21 +258,29 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 0px solid;
- background: #EF5A2A;
+ border: 1px solid #be390e;
+ background: linear-gradient(#f16c42, #ed4812);
+ box-shadow: inset 0 1px 0 #f6a389;
border-radius: 3px;
+ transition-duration: 1s;
+ transition-timing-function: ease;
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
+ shadow: 0 1px 0 #d9d9d9;
}
.jewel.textbutton.secondary:hover {
- background: #ed4812;
+ border: 1px solid #a6320d;
+ background: linear-gradient(#EF5A2A, #d64010);
+ box-shadow: inser 0 0 0;
}
.jewel.textbutton.secondary:active {
- background: #be390e;
+ border: 1px solid #772409;
+ background: linear-gradient(#d64010, #a6320d);
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.textbutton.secondary:focus {
outline: 0;
@@ -255,21 +302,29 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- border: 0px solid;
- background: #3AB549;
+ border: 1px solid #277b32;
+ background: linear-gradient(#45c354, #34a241);
+ box-shadow: inset 0 1px 0 #7fd68a;
border-radius: 3px;
+ transition-duration: 1s;
+ transition-timing-function: ease;
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
+ shadow: 0 1px 0 #d9d9d9;
}
.jewel.textbutton.emphasized:hover {
- background: #34a241;
+ border: 1px solid #21682a;
+ background: linear-gradient(#3AB549, #2e8e39);
+ box-shadow: inser 0 0 0;
}
.jewel.textbutton.emphasized:active {
- background: #277b32;
+ border: 1px solid #15411a;
+ background: linear-gradient(#2e8e39, #21682a);
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5);
}
.jewel.textbutton.emphasized:focus {
outline: 0;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass b/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
index 4b25446..d585185 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
@@ -41,6 +41,9 @@ $font-dark-color: #FFFFFF
//Theme Style (Flat or Gradient)
$flat: false
+$transitions-enable: false
+$transition-duration: .3s
+$transition-timing: easein
// VARIABLES
$default-color: $light-color // change this from light to dark
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
index 99e4e04..17a4fb7 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
@@ -20,8 +20,10 @@
=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
@@ -33,14 +35,19 @@
background: linear-gradient(lighten($button-color, 5%), darken($button-color, 5%))
box-shadow: inset 0 1px 0 lighten($button-color, 20%)
border-radius: $button-border-radius //.625em
- //transition:
- // duration: 0.4s
+
+ @if $transitions-enable
+ transition:
+ duration: $transition-duration
+ timing-function: $transition-timing
+
&:hover
@if $flat
background: darken($button-color, 5%)
@else
border: 1px solid darken($button-color, 20%)// .094em solid
background: linear-gradient($button-color, darken($button-color, 10%))
+
&:active
@if $flat
background: darken($button-color, 15%)
@@ -48,8 +55,10 @@
border: 1px solid darken($button-color, 30%)// .094em solid
background: linear-gradient(darken($button-color, 10%), darken($button-color, 20%))
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
+
&:focus
outline: 0
+
&[disabled]
border: 1px solid darken($disabled-color, 20%)// .094em solid
background: $disabled-color
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
index b5d2be4..663ada9 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
@@ -21,8 +21,10 @@
=textbutton-theme($button-color, $text-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
@@ -34,8 +36,12 @@
background: linear-gradient(lighten($button-color, 5%), darken($button-color, 5%))
box-shadow: inset 0 1px 0 lighten($button-color, 20%)
border-radius: $button-border-radius //.625em
- //transition:
- // duration: 0.4s
+
+ @if $transitions-enable
+ transition:
+ duration: $transition-duration
+ timing-function: $transition-timing
+
font:
family: $font-stack
size: $font-size//+trans(0.2s ease-in-out)
@@ -46,6 +52,7 @@
decoration: none
@if not $flat and $text-color == $font-theme-color
shadow: 0 1px 0 darken($text-color, 15%) //0 .063em
+
&:hover
@if $flat
background: darken($button-color, 5%)
@@ -59,8 +66,10 @@
border: 1px solid darken($button-color, 30%)// .094em solid
background: linear-gradient(darken($button-color, 10%), darken($button-color, 20%))
box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
+
&:focus
outline: 0
+
&[disabled]
border: 1px solid darken($disabled-color, 20%)// .094em solid
background: $disabled-color
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 10/49: HorizontalLayout and VerticalLayout in Jewel
based on CSS working
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 00145f406e4b0dd8aacc91f5fe91e03fd2221f31
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Mar 14 13:57:24 2018 +0100
HorizontalLayout and VerticalLayout in Jewel based on CSS working
---
.../royale/JewelExample/src/main/royale/App.mxml | 2 +-
frameworks/projects/Jewel/pom.xml | 6 +-
.../projects/Jewel/src/main/resources/defaults.css | 79 +++++++++++-----------
.../Jewel/src/main/resources/jewel-framework.css | 34 +++++-----
.../main/royale/org/apache/royale/jewel/Label.as | 4 +-
.../royale/jewel/beads/layouts/HorizontalLayout.as | 61 ++++-------------
.../royale/jewel/beads/layouts/VerticalLayout.as | 41 +++++------
.../projects/Jewel/src/main/sass/_global.sass | 40 +++++------
.../projects/Jewel/src/main/sass/defaults.sass | 21 ++++++
9 files changed, 130 insertions(+), 158 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/App.mxml b/examples/royale/JewelExample/src/main/royale/App.mxml
index 3d41276..f403dc7 100644
--- a/examples/royale/JewelExample/src/main/royale/App.mxml
+++ b/examples/royale/JewelExample/src/main/royale/App.mxml
@@ -31,7 +31,7 @@
<js:initialView>
<js:View>
<js:beads>
- <js:HorizontalLayout />
+ <j:HorizontalLayout />
</js:beads>
<local:ButtonPlayGround/>
<local:TextInputPlayGround/>
diff --git a/frameworks/projects/Jewel/pom.xml b/frameworks/projects/Jewel/pom.xml
index 82b2c68..53fb1fc 100644
--- a/frameworks/projects/Jewel/pom.xml
+++ b/frameworks/projects/Jewel/pom.xml
@@ -57,9 +57,13 @@
</includeClasses>
<includeFiles>
<include-file>
+ <name>defaults.css</name>
+ <path>../src/main/resources/defaults.css</path>
+ </include-file>
+ <!-- <include-file>
<name>jewel.css</name>
<path>../src/main/resources/jewel-framework.css</path>
- </include-file>
+ </include-file> -->
</includeFiles>
<includeLookupOnly>true</includeLookupOnly>
<!--<allowSubclassOverrides>true</allowSubclassOverrides>-->
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index f09b980..0c58f7b 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -1,5 +1,4 @@
-/*
- *
+/**
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
@@ -14,57 +13,59 @@
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
- *
*/
-
@namespace "library://ns.apache.org/royale/jewel";
+.layout.horizontal {
+ white-space: nowrap;
+ display: block;
+}
+.layout.horizontal > * {
+ display: inline-block !important;
+}
-.vertical-layout-padding-gap {
- display: block !important;
+.layout.vertical {
+ vertical-align: top;
+}
+.layout.vertical > * {
+ display: block !important;
+}
+
+.jewel.label {
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
+ white-space: nowrap;
}
-/*
-* Jewel TextField
-*/
TextField {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
- /*IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView");
- IBeadController: ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController");*/
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
}
-.vTextField--input {}
-.vTextField--label {}
-/*
-* Jewel Slider
-*/
Slider {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView");
- IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout");
- IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController");
- position: relative;
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView");
+ IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout");
+ IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController");
+ position: relative;
}
+
.SliderTrack {
- position: absolute;
+ position: absolute;
}
+
.SliderThumb {
- position: absolute;
- border-radius: 15px;
+ position: absolute;
+ border-radius: 15px;
}
-@media -royale-swf
-{
- Slider
- {
- iThumbView: ClassReference("org.apache.royale.jewel.beads.SliderThumbView");
- iTrackView: ClassReference("org.apache.royale.jewel.beads.SliderTrackView");
- }
+@media -royale-swf {
+ Slider {
+ iThumbView: ClassReference("org.apache.royale.jewel.beads.SliderThumbView");
+ iTrackView: ClassReference("org.apache.royale.jewel.beads.SliderTrackView");
+ }
- RadioButton
- {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView");
- /*font-size: 11px;
- font-family: Arial;*/
- }
+ RadioButton {
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView");
+ }
}
+
+/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-framework.css b/frameworks/projects/Jewel/src/main/resources/jewel-framework.css
index 1d18965..ac1da5e 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-framework.css
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-framework.css
@@ -15,33 +15,30 @@
* limitations under the License.
*/
@namespace "library://ns.apache.org/royale/jewel";
-.layout .horizontal {
+.layout.horizontal {
white-space: nowrap;
+ display: block;
}
-.layout .vertical {
+.layout.horizontal > * {
+ display: inline-block !important;
+}
+
+.layout.vertical {
+ vertical-align: top;
+}
+.layout.vertical > * {
display: block !important;
}
-/**
- * Jewel Label
- */ */
-Label {
+.jewel.label {
IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
- IBeadView: ClassReference("org.apache.royale.html.beads.TextFieldView");
- iMeasurementBead: ClassReference("org.apache.royale.html.beads.TextFieldLabelMeasurementBead");
white-space: nowrap;
}
-/**
- * Jewel TextField
- */
TextField {
IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
}
-/**
- * Jewel Slider
- */
Slider {
IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel");
IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView");
@@ -64,10 +61,11 @@ Slider {
iThumbView: ClassReference("org.apache.royale.jewel.beads.SliderThumbView");
iTrackView: ClassReference("org.apache.royale.jewel.beads.SliderTrackView");
}
-}
-RadioButton {
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel");
- IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView");
+
+ RadioButton {
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView");
+ }
}
/*# sourceMappingURL=jewel-framework.css.map */
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 a9e683e..90f3827 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
@@ -179,9 +179,7 @@ package org.apache.royale.jewel
textNode = document.createTextNode(_text) as Text;
element.appendChild(textNode);
-
- //element.style.whiteSpace = "nowrap";
-
+
return element;
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
index 16950a3..eff02f9 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
@@ -31,9 +31,6 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::SWF {
import org.apache.royale.core.UIBase;
}
- COMPILE::JS {
- import org.apache.royale.core.WrappedHTMLElement;
- }
/**
* The HorizontalLayout class is a simple layout
@@ -62,32 +59,8 @@ package org.apache.royale.jewel.beads.layouts
}
/**
- * @copy org.apache.royale.core.IBead#strand
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
- * @royaleignorecoercion HTMLElement
- * @royaleignorecoercion org.apache.royale.core.IUIBase
- */
- override public function set strand(value:IStrand):void
- {
- super.strand = value;
-
- COMPILE::JS
- {
- var base:IUIBase = value as IUIBase;
- if (base.element.style.display !== "none") {
- base.element.style.display = "block";
- }
- }
- }
-
- /**
* @copy org.apache.royale.core.IBeadLayout#layout
* @royaleignorecoercion org.apache.royale.core.ILayoutHost
- * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
*/
override public function layout():Boolean
{
@@ -167,27 +140,21 @@ package org.apache.royale.jewel.beads.layouts
}
COMPILE::JS
{
- var children:Array;
- var i:int;
- var n:int;
var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- contentView.element.classList.add("layout parent"); //style["white-space"] = "nowrap";
- children = contentView.internalChildren();
-
- n = children.length;
- for (i = 0; i < n; i++)
- {
- var child:WrappedHTMLElement = children[i] as WrappedHTMLElement;
- if (child == null) continue;
-
- child.classList.add("layout horizontal");
-
- /*child.royale_wrapper.setDisplayStyleForLayout('inline-block');
- if (child.style.display !== 'none')
- {
- child.style.display = 'inline-block';
- }*/
- }
+ contentView.element.classList.add("layout", "horizontal");
+
+ /**
+ * This Layout uses the following CSS rules
+ *
+ * .layout.horizontal {
+ * white-space: nowrap;
+ * display: block;
+ * }
+ *
+ * .layout.horizontal > * {
+ * display: inline-block !important;
+ * }
+ */
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 fab6700..cc217c2 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
@@ -21,14 +21,11 @@ package org.apache.royale.jewel.beads.layouts
import org.apache.royale.core.LayoutBase;
import org.apache.royale.core.IBeadLayout;
- import org.apache.royale.core.IBeadModel;
import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
import org.apache.royale.core.ILayoutChild;
import org.apache.royale.core.ILayoutHost;
import org.apache.royale.core.ILayoutView;
- import org.apache.royale.core.ILayoutParent;
import org.apache.royale.core.IParentIUIBase;
- import org.apache.royale.core.IStrand;
import org.apache.royale.core.IUIBase;
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.core.ValuesManager;
@@ -36,10 +33,6 @@ package org.apache.royale.jewel.beads.layouts
{
import org.apache.royale.core.WrappedHTMLElement;
}
- import org.apache.royale.events.Event;
- import org.apache.royale.events.IEventDispatcher;
- import org.apache.royale.geom.Rectangle;
- import org.apache.royale.utils.CSSUtils;
/**
* The VerticalLayout class is a simple layout
@@ -156,35 +149,33 @@ package org.apache.royale.jewel.beads.layouts
}
COMPILE::JS
{
- var children:Array;
- var i:int;
- var n:int;
var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- contentView.element.classList.add("layout parent");//style["vertical-align"] = "top";
+ contentView.element.classList.add("layout", "vertical");
- children = contentView.internalChildren();
+ var children:Array = contentView.internalChildren();
n = children.length;
+
+ var i:int;
+ var n:int;
for (i = 0; i < n; i++)
{
var child:WrappedHTMLElement = children[i] as WrappedHTMLElement;
if (child == null) continue;
- child.classList.add("layout vertical");
-
- /*child.royale_wrapper.setDisplayStyleForLayout('block');
- if (child.style.display === 'none')
- {
- child.royale_wrapper.setDisplayStyleForLayout('block');
- }
- else
- {
- // block elements don't measure width correctly so set to inline for a second
- child.style.display = 'inline-block';
- child.style.display = 'block';
- }*/
child.royale_wrapper.dispatchEvent('sizeChanged');
}
+ /**
+ * This Layout uses the following CSS rules
+ *
+ * .layout.vertical {
+ * vertical-align: top;
+ * }
+ * .layout.vertical > * {
+ * display: block !important;
+ * }
+ */
+
return true;
}
}
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/_global.sass
index 99552d3..c886218 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -19,35 +19,27 @@
@namespace "library://ns.apache.org/royale/jewel"
-.layout
- .horizontal
- white-space: nowrap
- .vertical
+.layout.horizontal
+ white-space: nowrap
+ display: block
+ > *
+ display: inline-block !important
+.layout.vertical
+ vertical-align: top
+ > *
display: block !important
-/**
- * Jewel Label
- */
-Label
+.jewel.label
IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel")
- IBeadView: ClassReference("org.apache.royale.html.beads.TextFieldView")
- iMeasurementBead: ClassReference("org.apache.royale.html.beads.TextFieldLabelMeasurementBead")
+ //IBeadView: ClassReference("org.apache.royale.jewel.beads.TextFieldView")
+ //iMeasurementBead: ClassReference("org.apache.royale.html.beads.TextFieldLabelMeasurementBead")
white-space: nowrap
-/**
- * Jewel TextField
- */
TextField
IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel")
//IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView")
//IBeadController: ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController")
-.vTextField--input
-.vTextField--label
-
-/**
- * Jewel Slider
- */
Slider
IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel")
IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView")
@@ -67,8 +59,8 @@ Slider
iThumbView: ClassReference("org.apache.royale.jewel.beads.SliderThumbView")
iTrackView: ClassReference("org.apache.royale.jewel.beads.SliderTrackView")
-RadioButton
- IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel")
- IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView")
- //font-size: 11px
- //font-family: Arial
+ RadioButton
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel")
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView")
+ //font-size: 11px
+ //font-family: Arial
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass b/frameworks/projects/Jewel/src/main/sass/defaults.sass
new file mode 100644
index 0000000..10e81d9
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -0,0 +1,21 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Variables
+
+// Global
+@import "global"
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 34/49: some work on textfield
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 75b52c1a01dcee4ddf932dc16f461ff2affbd083
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Mar 21 23:15:07 2018 +0100
some work on textfield
---
.../src/main/royale/TextInputPlayGround.mxml | 12 ++++-
.../royale/org/apache/royale/jewel/TextField.as | 14 +++---
.../royale/jewel/supportClasses/TextFieldBase.as | 4 +-
.../JewelTheme/src/main/resources/defaults.css | 47 +++++++-----------
.../src/main/sass/components/_textfield.sass | 56 +++++++++-------------
5 files changed, 59 insertions(+), 74 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index 83535ff..332b444 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -35,7 +35,17 @@ limitations under the License.
<html:H4 text="Jewel TextField"/>
- <j:TextField text="Text Input" width="120" height="40"/>
+ <js:Group>
+ <js:beads>
+ <j:HorizontalLayoutWithPaddingAndGap gap="10"/>
+ </js:beads>
+ <j:TextField>
+ <j:beads>
+ <js:TextPromptBead prompt="A Textfield..."/>
+ </j:beads>
+ </j:TextField>
+ <j:TextButton text="Send" primary="true"/>
+ </js:Group>
<html:H4 text="Jewel CheckBox"/>
<j:CheckBox text="label"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
index c3e18d5..fa795ef 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/TextField.as
@@ -89,23 +89,23 @@ package org.apache.royale.jewel
input = addElementToWrapper(this,'input') as HTMLInputElement;
input.setAttribute('type', 'text');
- //input.className = "vTextField--input";
+ input.className = "input";
//attach input handler to dispatch royale change event when user write in textinput
//goog.events.listen(element, 'change', killChangeHandler);
goog.events.listen(input, 'input', textChangeHandler);
- label = document.createElement('label') as HTMLLabelElement;
- //label.className = "vTextField--label";
+ //label = document.createElement('label') as HTMLLabelElement;
+ //label.className = "jewel-textfield-label";
- textNode = document.createTextNode('') as Text;
- label.appendChild(textNode);
+ //textNode = document.createTextNode('') as Text;
+ //label.appendChild(textNode);
div.appendChild(input);
- div.appendChild(label);
+ //div.appendChild(label);
positioner = div as WrappedHTMLElement;
- (label as WrappedHTMLElement).royale_wrapper = this;
+ //(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/supportClasses/TextFieldBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
index 5cb5924..06a8d63 100644
--- 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
@@ -146,8 +146,8 @@ package org.apache.royale.jewel.supportClasses
COMPILE::JS
{
- positioner.classList.toggle("is-invalid", _isInvalid);
- typeNames = positioner.className;
+ //positioner.classList.toggle("is-invalid", _isInvalid);
+ //typeNames = positioner.className;
}
}
}
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 3b93a57..c4286da 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -367,41 +367,26 @@ span {
.jewel.textfield {
position: relative;
- display: inline-block;
- box-sizing: border-box;
- width: 300px;
- max-width: 100%;
- margin: 0;
-}
-.jewel.textfield > input {
- font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: normal;
- border: none;
- border-bottom: 2px solid;
- border-bottom-color: #ff0000;
- display: block;
- margin: 0;
- padding: 4 0;
- width: 100px;
- background: transparent;
- text-align: left;
- color: inherit;
- outline: none;
+ display: inline-flex;
}
-.jewel.textfield > label {
- bottom: 0;
- color: #ff0000;
- font-size: 13px;
- left: 0;
- right: 0;
- pointer-events: none;
- position: absolute;
- display: block;
- width: 100%;
- overflow: hidden;
- white-space: nowrap;
+.jewel.textfield .input {
+ margin: 0em;
+ max-width: 100%;
+ flex: 1 0 auto;
+ outline: none;
+ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
text-align: left;
+ line-height: 1.2em;
+ font-family: "Lato", sans-serif;
+ font-size: 14px;
+ padding: 0.67em 1em;
+ background: #ffffff;
+ border: 1px solid rgba(34, 36, 38, 0.15);
+ color: rgba(0, 0, 0, 0.87);
+ border-radius: 3px;
+ box-shadow: none;
}
/*# sourceMappingURL=defaults.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
index 3739212..0a606f8 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textfield.sass
@@ -20,43 +20,33 @@
// Jewel Textfield
.jewel.textfield
position: relative
- display: inline-block
- box-sizing: border-box
- width: 300px
- max-width: 100%
- margin: 0
+ font:
+ //family: $font-stack
+ size: $font-size
+ weight: normal
+ display: inline-flex
+
+ .input
+ margin: 0em
+ max-width: 100%
+ flex: 1 0 auto
+ outline: none
+ -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
+ text-align: left
+ line-height: 1.2em
- > input
font:
- family: $font-stack
+ family: $font-stack
size: $font-size
- weight: normal
+ padding: .67em 1em
- border: none
- border-bottom: 2px solid
- border-bottom-color: #ff0000
- display: block
- margin: 0
- padding: 4 0
- width: 100px
- background: transparent
- text-align: left
- color: inherit
- outline: none
-
- > label
- bottom: 0
- color: #ff0000
- font-size: 13px
- left: 0
- right: 0
- pointer-events: none
- position: absolute
- display: block
- width: 100%
- overflow: hidden
- white-space: nowrap
- text-align: left
+ background: #ffffff
+ border: 1px solid rgba(34, 36, 38, .15)
+ color: rgba(0, 0, 0, .87)
+ border-radius: 3px
+ //transition: transition
+
+ box-shadow: none
// padding: 5px;
// border: solid 1px #666666;
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 02/49: forgotten changes in pom
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit b438acb7ad5629578859e06871c1e27e4c71e2be
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Mar 12 22:28:45 2018 +0100
forgotten changes in pom
---
pom.xml | 8 ++++++++
1 file changed, 8 insertions(+)
diff --git a/pom.xml b/pom.xml
index 232afe9..9fba592 100644
--- a/pom.xml
+++ b/pom.xml
@@ -150,6 +150,12 @@
<artifactId>build-helper-maven-plugin</artifactId>
<version>3.0.0</version>
</plugin>
+
+ <plugin>
+ <groupId>nl.geodienstencentrum.maven</groupId>
+ <artifactId>sass-maven-plugin</artifactId>
+ <version>3.5.2</version>
+ </plugin>
<!--
<plugin>
<groupId>org.sonarsource.scanner.maven</groupId>
@@ -197,6 +203,8 @@
<!-- Ignore IntelliJ IDEA project files -->
<exclude>**/*.iml</exclude>
<exclude>**/.idea/**</exclude>
+ <!-- SASS cc.map generated files by sass-maven-plugin-->
+ <exclude>**/*.css.map</exclude>
<!--
Exclude any eventually existing content of target directories.
Some times when building with a bigger maven reactor and then
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 06/49: added html template to example until we get
font injection from theme
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit bc9abe6c3345c91f9229a1228a1d8a2c5765723f
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Mar 13 17:10:18 2018 +0100
added html template to example until we get font injection from theme
---
examples/royale/JewelExample/pom.xml | 2 +-
.../resources/jewel-example-index-template.html | 31 ++++++++++++++++++++++
2 files changed, 32 insertions(+), 1 deletion(-)
diff --git a/examples/royale/JewelExample/pom.xml b/examples/royale/JewelExample/pom.xml
index e71767e..5d0bcc6 100644
--- a/examples/royale/JewelExample/pom.xml
+++ b/examples/royale/JewelExample/pom.xml
@@ -48,7 +48,7 @@
<configuration>
<mainClass>App.mxml</mainClass>
<targets>JSRoyale,SWF</targets>
- <!--<htmlTemplate>${basedir}/target/javascript/bin/js-debug/jewel-js-index-template.html</htmlTemplate>-->
+ <htmlTemplate>${basedir}/target/javascript/bin/js-debug/jewel-example-index-template.html</htmlTemplate>
</configuration>
</plugin>
</plugins>
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
new file mode 100644
index 0000000..cf5ea3c
--- /dev/null
+++ b/examples/royale/JewelExample/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" rel="stylesheet">
+${head}
+</head>
+<body>
+${body}
+</body>
+</html>
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 14/49: UIBase typenames and classNames proposal -
working,
but I'm sure will be things to modify and/or enhance for performance
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 3aab244eecd6393c7a5cb7b8923e084df1088df2
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Mar 15 14:16:50 2018 +0100
UIBase typenames and classNames proposal - working, but I'm sure will be things to modify and/or enhance for performance
---
.../main/royale/org/apache/royale/core/UIBase.as | 139 ++++++++++++++++-----
.../main/royale/org/apache/royale/jewel/Button.as | 6 +-
2 files changed, 112 insertions(+), 33 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as
index 2d279c0..1a04fcf 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as
@@ -1025,8 +1025,10 @@ package org.apache.royale.core
*
* @royalesuppresspublicvarwarning
*/
- private var _typeNames:String;
+ public var typeNames:String;
+ private var _className:String;
+
/**
* The classname. Often used for CSS
* class selector lookups.
@@ -1036,67 +1038,142 @@ package org.apache.royale.core
* @playerversion AIR 2.6
* @productversion Royale 0.0
*/
- public function get typeNames():String
+ public function get className():String
{
- return _typeNames;
+ return _className;
}
/**
* @private
*/
- public function set typeNames(value:String):void
+ public function set className(value:String):void
{
- if (_typeNames !== value)
+ if (_className !== value)
{
- _typeNames = value;
+ _className = value;
COMPILE::JS
{
- element.className = "";
- setClassName(_typeNames);
+ setClassName(computeFinalClassNames());
}
+
+ dispatchEvent(new Event("classNameChanged"));
}
}
- private var _className:String;
-
/**
- * The classname. Often used for CSS
- * class selector lookups.
+ * Computes the final syles for this component joining typeNames and classNames
+ * styles
*
* @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
- public function get className():String
+ COMPILE::JS
+ protected function computeFinalClassNames():String
{
- return _className;
+ return StringUtil.trim((_className ? _className : "") + " " + (typeNames ? typeNames : ""));
}
/**
- * @private
+ * Sets the component styles in JS
+ *
+ * @langversion 3.0
+ * @productversion Royale 0.0
*/
- public function set className(value:String):void
+ COMPILE::JS
+ protected function setClassName(value:String):void
{
- if (_className !== value)
+ addStyles(value);
+ }
+
+ /**
+ * 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
+ protected function addStyles(value:String):void
+ {
+ if (value == "") return;
+
+ if (value.indexOf(" ") >= 0)
{
- _className = value;
+ var classes:Array = value.split(" ");
+ element.classList.add.apply(element.classList, classes);
+ } else
+ {
+ element.classList.add(value);
+ }
+ }
- COMPILE::JS
- {
- setClassName(typeNames ? typeNames + " " + _className : _className);
- }
-
- dispatchEvent(new Event("classNameChanged"));
+ /**
+ * 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
+ protected function removeStyles(value:String):void
+ {
+ if (value == "") return;
+
+ if (value.indexOf(" ") >= 0)
+ {
+ var classes:Array = value.split(" ");
+ element.classList.remove.apply(element.classList, classes);
+ } else
+ {
+ 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
- protected function setClassName(value:String):void
+ protected function toggleStyle(value:String, force:Boolean = false):Boolean
{
- var classes:Array = value.split(" ");
- element.classList.add.apply(element.classList, classes);
+ return 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
+ protected function removeAllStyles():void
+ {
+ var classList:DOMTokenList = element.classList;
+ var i:int;
+ for( i = classList.length; i > 0; i-- )
+ {
+ if(typeNames.indexOf(classList[i]) != 0)
+ {
+ classList.remove(classList[i]);
+ }
+ }
}
/**
@@ -1385,6 +1462,8 @@ package org.apache.royale.core
COMPILE::JS
{
+ setClassName(computeFinalClassNames());
+
if (style)
ValuesManager.valuesImpl.applyStyles(this, style);
}
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 53f58e4..1fea4bc 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
@@ -88,7 +88,7 @@ package org.apache.royale.jewel
COMPILE::JS
{
- element.classList.toggle("primary", value);
+ toggleStyle("primary", value);
}
}
}
@@ -118,7 +118,7 @@ package org.apache.royale.jewel
COMPILE::JS
{
- element.classList.toggle("secondary", value);
+ toggleStyle("secondary", value);
}
}
}
@@ -148,7 +148,7 @@ package org.apache.royale.jewel
COMPILE::JS
{
- element.classList.toggle("emphasized", value);
+ toggleStyle("emphasized", value);
}
}
}
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 44/49: change location of unused svgs
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit a2db70b2e6ab4025929ef458794d0d5dcb7c9522
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Mar 25 16:39:23 2018 +0200
change location of unused svgs
---
.../JewelTheme/src/main/resources/{assets => svgs}/JewelButton2.svg | 0
.../JewelTheme/src/main/resources/{assets => svgs}/jewel-button.svg | 0
2 files changed, 0 insertions(+), 0 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/assets/JewelButton2.svg b/frameworks/themes/JewelTheme/src/main/resources/svgs/JewelButton2.svg
similarity index 100%
rename from frameworks/themes/JewelTheme/src/main/resources/assets/JewelButton2.svg
rename to frameworks/themes/JewelTheme/src/main/resources/svgs/JewelButton2.svg
diff --git a/frameworks/themes/JewelTheme/src/main/resources/assets/jewel-button.svg b/frameworks/themes/JewelTheme/src/main/resources/svgs/jewel-button.svg
similarity index 100%
rename from frameworks/themes/JewelTheme/src/main/resources/assets/jewel-button.svg
rename to frameworks/themes/JewelTheme/src/main/resources/svgs/jewel-button.svg
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 29/49: - Add theme styles: flat / gradient - Add
light / dark styles - Add more variables to tune final themes - Adjust some
values for better looking
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 465f13206bd86870fbd0b7465bae953b1d0cf1f2
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Mar 21 10:44:41 2018 +0100
- Add theme styles: flat / gradient
- Add light / dark styles
- Add more variables to tune final themes
- Adjust some values for better looking
---
.../JewelTheme/src/main/resources/defaults.css | 107 ++++++---------------
.../src/main/sass/_default-color-palette.sass | 22 +++--
.../JewelTheme/src/main/sass/_variables.sass | 2 +
.../src/main/sass/components/_button.sass | 30 ++++--
.../src/main/sass/components/_textbutton.sass | 38 +++++---
5 files changed, 93 insertions(+), 106 deletions(-)
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 6e720c5..53d0f88 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -34,20 +34,15 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- /* Background: */
+ border: 0px solid;
+ background: #d9d9d9;
border-radius: 3px;
- border: 1px solid #b3b3b3;
- background: linear-gradient(#e6e6e6, #cccccc);
- box-shadow: inset 0 1px 0 white;
}
.jewel.button:hover {
- border: 1px solid #a6a6a6;
- background: linear-gradient(#d9d9d9, silver);
+ background: #cccccc;
}
.jewel.button:active {
- border: 1px solid #8d8d8d;
- background: linear-gradient(silver, #a6a6a6);
- box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+ background: #b3b3b3;
}
.jewel.button:focus {
outline: 0;
@@ -66,20 +61,15 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- /* Background: */
+ border: 0px solid;
+ background: #3CADF1;
border-radius: 3px;
- border: 1px solid #0f88d1;
- background: linear-gradient(#54b7f3, #24a3ef);
- box-shadow: inset 0 1px 0 #9bd5f8;
}
.jewel.button.primary:hover {
- border: 1px solid #0d79ba;
- background: linear-gradient(#3CADF1, #1198e9);
+ background: #24a3ef;
}
.jewel.button.primary:active {
- border: 1px solid #0a5a8a;
- background: linear-gradient(#1198e9, #0d79ba);
- box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+ background: #0f88d1;
}
.jewel.button.primary:focus {
outline: 0;
@@ -98,20 +88,15 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- /* Background: */
+ border: 0px solid;
+ background: #EF5A2A;
border-radius: 3px;
- border: 1px solid #be390e;
- background: linear-gradient(#f16c42, #ed4812);
- box-shadow: inset 0 1px 0 #f6a389;
}
.jewel.button.secondary:hover {
- border: 1px solid #a6320d;
- background: linear-gradient(#EF5A2A, #d64010);
+ background: #ed4812;
}
.jewel.button.secondary:active {
- border: 1px solid #772409;
- background: linear-gradient(#d64010, #a6320d);
- box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+ background: #be390e;
}
.jewel.button.secondary:focus {
outline: 0;
@@ -130,20 +115,15 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- /* Background: */
+ border: 0px solid;
+ background: #3AB549;
border-radius: 3px;
- border: 1px solid #277b32;
- background: linear-gradient(#45c354, #34a241);
- box-shadow: inset 0 1px 0 #7fd68a;
}
.jewel.button.emphasized:hover {
- border: 1px solid #21682a;
- background: linear-gradient(#3AB549, #2e8e39);
+ background: #34a241;
}
.jewel.button.emphasized:active {
- border: 1px solid #15411a;
- background: linear-gradient(#2e8e39, #21682a);
- box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+ background: #277b32;
}
.jewel.button.emphasized:focus {
outline: 0;
@@ -167,11 +147,9 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- /* Background: */
+ border: 0px solid;
+ background: #d9d9d9;
border-radius: 3px;
- border: 1px solid #b3b3b3;
- background: linear-gradient(#e6e6e6, #cccccc);
- box-shadow: inset 0 1px 0 white;
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: bold;
@@ -180,13 +158,10 @@
text-decoration: none;
}
.jewel.textbutton:hover {
- border: 1px solid #a6a6a6;
- background: linear-gradient(#d9d9d9, silver);
+ background: #cccccc;
}
.jewel.textbutton:active {
- border: 1px solid #8d8d8d;
- background: linear-gradient(silver, #a6a6a6);
- box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+ background: #b3b3b3;
}
.jewel.textbutton:focus {
outline: 0;
@@ -208,27 +183,21 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- /* Background: */
+ border: 0px solid;
+ background: #3CADF1;
border-radius: 3px;
- border: 1px solid #0f88d1;
- background: linear-gradient(#54b7f3, #24a3ef);
- box-shadow: inset 0 1px 0 #9bd5f8;
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
- shadow: 0 1px 0 #d9d9d9;
}
.jewel.textbutton.primary:hover {
- border: 1px solid #0d79ba;
- background: linear-gradient(#3CADF1, #1198e9);
+ background: #24a3ef;
}
.jewel.textbutton.primary:active {
- border: 1px solid #0a5a8a;
- background: linear-gradient(#1198e9, #0d79ba);
- box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+ background: #0f88d1;
}
.jewel.textbutton.primary:focus {
outline: 0;
@@ -250,27 +219,21 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- /* Background: */
+ border: 0px solid;
+ background: #EF5A2A;
border-radius: 3px;
- border: 1px solid #be390e;
- background: linear-gradient(#f16c42, #ed4812);
- box-shadow: inset 0 1px 0 #f6a389;
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
- shadow: 0 1px 0 #d9d9d9;
}
.jewel.textbutton.secondary:hover {
- border: 1px solid #a6320d;
- background: linear-gradient(#EF5A2A, #d64010);
+ background: #ed4812;
}
.jewel.textbutton.secondary:active {
- border: 1px solid #772409;
- background: linear-gradient(#d64010, #a6320d);
- box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+ background: #be390e;
}
.jewel.textbutton.secondary:focus {
outline: 0;
@@ -292,27 +255,21 @@
padding: 10px 16px;
min-width: 74px;
min-height: 34px;
- /* Background: */
+ border: 0px solid;
+ background: #3AB549;
border-radius: 3px;
- border: 1px solid #277b32;
- background: linear-gradient(#45c354, #34a241);
- box-shadow: inset 0 1px 0 #7fd68a;
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
- shadow: 0 1px 0 #d9d9d9;
}
.jewel.textbutton.emphasized:hover {
- border: 1px solid #21682a;
- background: linear-gradient(#3AB549, #2e8e39);
+ background: #34a241;
}
.jewel.textbutton.emphasized:active {
- border: 1px solid #15411a;
- background: linear-gradient(#2e8e39, #21682a);
- box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75);
+ background: #277b32;
}
.jewel.textbutton.emphasized:focus {
outline: 0;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass b/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
index a4cfa7c..4b25446 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_default-color-palette.sass
@@ -17,6 +17,7 @@
//
////////////////////////////////////////////////////////////////////////////////
+// CONSTANTS
// 12 Color Themes (this will go to one separate project each one)
$red: #EC1C24
$amethyst: #922590
@@ -30,15 +31,22 @@ $yellow: #FCEF0A
$sunflower: #F8B13F
$orange: #F7941D
$topaz: #EF5A2A
+$font-theme-color: #FFFFFF
-// Common Colors
-$font-color: #FFFFFF
-$default-color: #d9d9d9
-$default-font-color: #808080
-$disabled-color: #F9F9F9
+$light-color: #d9d9d9
+$font-light-color: #808080
-// Var Colors
-$default-color: $default-color
+$dark-color: #666666
+$font-dark-color: #FFFFFF
+
+//Theme Style (Flat or Gradient)
+$flat: false
+
+// VARIABLES
+$default-color: $light-color // change this from light to dark
$primary-color: $blue
$secondary-color: $topaz
$emphasized-color: $green
+
+$default-font-color: $font-light-color // change this from light to dark
+$disabled-color: #F9F9F9 // maybe make it dependent of theme colors
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
index 9a5fef9..73291fb 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -26,5 +26,7 @@ $button-padding: 10px 16px !default
$button-min-height: 34px !default
$button-min-width: 74px !default
+$button-border-radius: 3px
+
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
index fc76a5a..99e4e04 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_button.sass
@@ -24,20 +24,30 @@
padding: $button-padding //.938em 1.875em
min-width: $button-min-width
min-height: $button-min-height
- /* Background: */
- border-radius: 3px //.625em
- border: 1px solid darken($button-color, 15%)// .094em solid
- background: linear-gradient(lighten($button-color, 5%), darken($button-color, 5%))
- box-shadow: inset 0 1px 0 lighten($button-color, 20%)
+
+ @if $flat
+ border: 0px solid
+ background: $button-color
+ @else
+ border: 1px solid darken($button-color, 15%)// .094em solid
+ background: linear-gradient(lighten($button-color, 5%), darken($button-color, 5%))
+ box-shadow: inset 0 1px 0 lighten($button-color, 20%)
+ border-radius: $button-border-radius //.625em
//transition:
// duration: 0.4s
&:hover
- border: 1px solid darken($button-color, 20%)// .094em solid
- background: linear-gradient($button-color, darken($button-color, 10%))
+ @if $flat
+ background: darken($button-color, 5%)
+ @else
+ border: 1px solid darken($button-color, 20%)// .094em solid
+ background: linear-gradient($button-color, darken($button-color, 10%))
&:active
- border: 1px solid darken($button-color, 30%)// .094em solid
- background: linear-gradient(darken($button-color, 10%), darken($button-color, 20%))
- box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75)
+ @if $flat
+ background: darken($button-color, 15%)
+ @else
+ border: 1px solid darken($button-color, 30%)// .094em solid
+ background: linear-gradient(darken($button-color, 10%), darken($button-color, 20%))
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
&:focus
outline: 0
&[disabled]
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
index d081579..b5d2be4 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_textbutton.sass
@@ -25,11 +25,15 @@
padding: $button-padding //.938em 1.875em
min-width: $button-min-width
min-height: $button-min-height
- /* Background: */
- border-radius: 3px //.625em
- border: 1px solid darken($button-color, 15%)// .094em solid
- background: linear-gradient(lighten($button-color, 5%), darken($button-color, 5%))
- box-shadow: inset 0 1px 0 lighten($button-color, 20%)
+
+ @if $flat
+ border: 0px solid
+ background: $button-color
+ @else
+ border: 1px solid darken($button-color, 15%)// .094em solid
+ background: linear-gradient(lighten($button-color, 5%), darken($button-color, 5%))
+ box-shadow: inset 0 1px 0 lighten($button-color, 20%)
+ border-radius: $button-border-radius //.625em
//transition:
// duration: 0.4s
font:
@@ -40,15 +44,21 @@
text:
transform: uppercase
decoration: none
- @if $text-color == $font-color
+ @if not $flat and $text-color == $font-theme-color
shadow: 0 1px 0 darken($text-color, 15%) //0 .063em
&:hover
- border: 1px solid darken($button-color, 20%)// .094em solid
- background: linear-gradient($button-color, darken($button-color, 10%))
+ @if $flat
+ background: darken($button-color, 5%)
+ @else
+ border: 1px solid darken($button-color, 20%)// .094em solid
+ background: linear-gradient($button-color, darken($button-color, 10%))
&:active
- border: 1px solid darken($button-color, 30%)// .094em solid
- background: linear-gradient(darken($button-color, 10%), darken($button-color, 20%))
- box-shadow: inset 0px 2px 3px 0px rgba(50, 50, 50, 0.75)
+ @if $flat
+ background: darken($button-color, 15%)
+ @else
+ border: 1px solid darken($button-color, 30%)// .094em solid
+ background: linear-gradient(darken($button-color, 10%), darken($button-color, 20%))
+ box-shadow: inset 0px 1px 3px 0px rgba(50, 50, 50, 0.5)
&:focus
outline: 0
&[disabled]
@@ -66,10 +76,10 @@
+textbutton-theme($default-color, $default-font-color)
.jewel.textbutton.primary
- +textbutton-theme($primary-color, $font-color)
+ +textbutton-theme($primary-color, $font-theme-color)
.jewel.textbutton.secondary
- +textbutton-theme($secondary-color, $font-color)
+ +textbutton-theme($secondary-color, $font-theme-color)
.jewel.textbutton.emphasized
- +textbutton-theme($emphasized-color, $font-color)
+ +textbutton-theme($emphasized-color, $font-theme-color)
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 37/49: remove wrong lines
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 8d223170f942ab85686caaab1afb3c93098d3d23
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Mar 24 00:30:30 2018 +0100
remove wrong lines
---
.../projects/Jewel/src/main/royale/org/apache/royale/jewel/Slider.as | 1 -
.../projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as | 1 -
2 files changed, 2 deletions(-)
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 817efe8..0cb0101 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
@@ -181,7 +181,6 @@ package org.apache.royale.jewel
override protected function createElement():WrappedHTMLElement
{
var div:HTMLDivElement = document.createElement('div') as HTMLDivElement;
- div.className = typeNames;
var input:HTMLInputElement = addElementToWrapper(this,'input') as HTMLInputElement;
input.setAttribute('type', 'range');
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
index 0a49aeb..859bf62 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/TextField.as
@@ -64,7 +64,6 @@ package org.apache.royale.jewel
override protected function createElement():WrappedHTMLElement
{
var div:HTMLDivElement = document.createElement('div') as HTMLDivElement;
- div.className = typeNames;
input = addElementToWrapper(this,'input') as HTMLInputElement;
input.setAttribute('type', 'text');
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 35/49: organizing and presenting example in a better
way and making room for more components and examples that test look'n feel
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit d70be7749138e69163a61cb7cf414f71a633134f
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Mar 22 13:17:02 2018 +0100
organizing and presenting example in a better way and making room for more components and examples that test look'n feel
---
.../src/main/resources/jewel-example-styles.css | 5 +++
.../royale/JewelExample/src/main/royale/App.mxml | 29 ++++++++++++++--
.../src/main/royale/ButtonPlayGround.mxml | 30 +++++-----------
...nputPlayGround.mxml => CheckBoxPlayGround.mxml} | 40 +++++++---------------
...xtInputPlayGround.mxml => HeadingsAndText.mxml} | 27 ++++-----------
...tPlayGround.mxml => RadioButtonPlayGround.mxml} | 38 ++++++--------------
...ButtonPlayGround.mxml => SliderPlayGround.mxml} | 18 ++--------
...onPlayGround.mxml => TextButtonPlayGround.mxml} | 17 +++------
.../src/main/royale/TextInputPlayGround.mxml | 31 +++++++++--------
9 files changed, 94 insertions(+), 141 deletions(-)
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 48829b3..003d6c8 100644
--- a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
+++ b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
@@ -23,3 +23,8 @@
+.container {
+ background: #efefef;
+ border-radius: 10px;
+ padding: 20px;
+}
\ No newline at end of file
diff --git a/examples/royale/JewelExample/src/main/royale/App.mxml b/examples/royale/JewelExample/src/main/royale/App.mxml
index f403dc7..2d53f6a 100644
--- a/examples/royale/JewelExample/src/main/royale/App.mxml
+++ b/examples/royale/JewelExample/src/main/royale/App.mxml
@@ -31,10 +31,33 @@
<js:initialView>
<js:View>
<js:beads>
- <j:HorizontalLayout />
+ <j:HorizontalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
- <local:ButtonPlayGround/>
- <local:TextInputPlayGround/>
+
+ <js:Group>
+ <js:beads>
+ <j:VerticalLayoutWithPaddingAndGap gap="10"/>
+ </js:beads>
+ <local:ButtonPlayGround/>
+ <local:TextButtonPlayGround/>
+ </js:Group>
+
+ <js:Group>
+ <js:beads>
+ <j:VerticalLayoutWithPaddingAndGap gap="10"/>
+ </js:beads>
+ <local:TextInputPlayGround/>
+ <local:CheckBoxPlayGround/>
+ <local:RadioButtonPlayGround/>
+ <local:SliderPlayGround/>
+ </js:Group>
+
+ <js:Group>
+ <js:beads>
+ <j:VerticalLayoutWithPaddingAndGap gap="10"/>
+ </js:beads>
+ <local:HeadingsAndText/>
+ </js:Group>
</js:View>
</js:initialView>
</j:Application>
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
index 32596a8..7344748 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -20,14 +20,15 @@ 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: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;
+ //button.width = slider.value;
+ //button.height = slider_v.value;
}
]]>
</fx:Script>
@@ -36,25 +37,10 @@ limitations under the License.
<j:VerticalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
- <html:H4 text="Jewel Button"/>
+ <html:H3 text="Jewel Button"/>
+
+ <j:Button />
<j:Button primary="true"/>
+ <j:Button emphasized="true"/>
- <html:H4 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>
- <j:Label text="Jewel Button Sizing (respect min values)"/>
- <j:Slider id="slider" width="250" value="120" minimum="100" maximum="500"
- valueChange="onValueChange(event)"/>
- <j:Slider id="slider_v" width="250" value="40" minimum="40" maximum="300"
- valueChange="onValueChange(event)"/>
- <j:TextButton id="button" text="Button" width="120" height="40" primary="true"/>
-
</js:Group>
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/CheckBoxPlayGround.mxml
similarity index 60%
copy from examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
copy to examples/royale/JewelExample/src/main/royale/CheckBoxPlayGround.mxml
index 332b444..a26ac6e 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/CheckBoxPlayGround.mxml
@@ -20,37 +20,23 @@ 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:j="library://ns.apache.org/royale/jewel"
+ className="container">
<js:beads>
<j:VerticalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
- <html:H1 text="Heading H1"/>
- <html:H2 text="Heading H2"/>
- <html:H3 text="Heading H3"/>
- <html:H4 text="Heading H4"/>
-
- <html:Span text="Normal text to use in labels, texts and fields with single line or multiple lines."/>
-
- <html:H4 text="Jewel TextField"/>
-
- <js:Group>
- <js:beads>
- <j:HorizontalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
- <j:TextField>
- <j:beads>
- <js:TextPromptBead prompt="A Textfield..."/>
- </j:beads>
- </j:TextField>
- <j:TextButton text="Send" primary="true"/>
- </js:Group>
-
- <html:H4 text="Jewel CheckBox"/>
- <j:CheckBox text="label"/>
-
- <html:H4 text="Jewel RadioButton"/>
- <j:RadioButton text="label"/>
+ <html:H3 text="Jewel CheckBox"/>
+
+ <j:CheckBox text="Checkbox 1"/>
+
+ <j:CheckBox text="Checkbox 2"/>
+
+ <j:CheckBox text="Checkbox Disabled">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:CheckBox>
</js:Group>
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/HeadingsAndText.mxml
similarity index 66%
copy from examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
copy to examples/royale/JewelExample/src/main/royale/HeadingsAndText.mxml
index 332b444..d594508 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/HeadingsAndText.mxml
@@ -20,37 +20,22 @@ 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: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"/>
+
<html:H1 text="Heading H1"/>
<html:H2 text="Heading H2"/>
<html:H3 text="Heading H3"/>
<html:H4 text="Heading H4"/>
- <html:Span text="Normal text to use in labels, texts and fields with single line or multiple lines."/>
-
- <html:H4 text="Jewel TextField"/>
-
- <js:Group>
- <js:beads>
- <j:HorizontalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
- <j:TextField>
- <j:beads>
- <js:TextPromptBead prompt="A Textfield..."/>
- </j:beads>
- </j:TextField>
- <j:TextButton text="Send" primary="true"/>
- </js:Group>
-
- <html:H4 text="Jewel CheckBox"/>
- <j:CheckBox text="label"/>
+ <html:Span text="Some span text."/>
- <html:H4 text="Jewel RadioButton"/>
- <j:RadioButton text="label"/>
+ <html:Div text="Normal text used in a div, texts and fields with single line or multiple lines."/>
</js:Group>
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml
similarity index 59%
copy from examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
copy to examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml
index 332b444..14da2a1 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml
@@ -20,37 +20,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">
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ className="container">
<js:beads>
<j:VerticalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
- <html:H1 text="Heading H1"/>
- <html:H2 text="Heading H2"/>
- <html:H3 text="Heading H3"/>
- <html:H4 text="Heading H4"/>
-
- <html:Span text="Normal text to use in labels, texts and fields with single line or multiple lines."/>
-
- <html:H4 text="Jewel TextField"/>
-
- <js:Group>
- <js:beads>
- <j:HorizontalLayoutWithPaddingAndGap gap="10"/>
- </js:beads>
- <j:TextField>
- <j:beads>
- <js:TextPromptBead prompt="A Textfield..."/>
- </j:beads>
- </j:TextField>
- <j:TextButton text="Send" primary="true"/>
- </js:Group>
-
- <html:H4 text="Jewel CheckBox"/>
- <j:CheckBox text="label"/>
-
- <html:H4 text="Jewel RadioButton"/>
- <j:RadioButton text="label"/>
+ <html:H3 text="Jewel RadioButton"/>
+
+ <j:RadioButton text="RadioButton 1"/>
+ <j:RadioButton text="RadioButton 2"/>
+ <j:RadioButton text="RadioButton Disabled">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:RadioButton>
</js:Group>
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml
similarity index 74%
copy from examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
copy to examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml
index 32596a8..639e9b6 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/SliderPlayGround.mxml
@@ -20,7 +20,8 @@ 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:j="library://ns.apache.org/royale/jewel"
+ className="container">
<fx:Script>
<![CDATA[
@@ -36,21 +37,8 @@ limitations under the License.
<j:VerticalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
- <html:H4 text="Jewel Button"/>
- <j:Button primary="true"/>
+ <html:H3 text="Jewel Slider"/>
- <html:H4 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>
- <j:Label text="Jewel Button Sizing (respect min values)"/>
<j:Slider id="slider" width="250" value="120" minimum="100" maximum="500"
valueChange="onValueChange(event)"/>
<j:Slider id="slider_v" width="250" value="40" minimum="40" maximum="300"
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextButtonPlayGround.mxml
similarity index 71%
copy from examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
copy to examples/royale/JewelExample/src/main/royale/TextButtonPlayGround.mxml
index 32596a8..e9461e8 100644
--- a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextButtonPlayGround.mxml
@@ -20,14 +20,15 @@ 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: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;
+ //button.width = slider.value;
+ //button.height = slider_v.value;
}
]]>
</fx:Script>
@@ -36,10 +37,8 @@ limitations under the License.
<j:VerticalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
- <html:H4 text="Jewel Button"/>
- <j:Button primary="true"/>
+ <html:H3 text="Jewel TextButton"/>
- <html:H4 text="Jewel TextButton"/>
<j:TextButton text="Default"/>
<j:TextButton text="Button With More Text"/>
<j:TextButton text="Primary" primary="true"/>
@@ -50,11 +49,5 @@ limitations under the License.
<j:Disabled/>
</j:beads>
</j:TextButton>
- <j:Label text="Jewel Button Sizing (respect min values)"/>
- <j:Slider id="slider" width="250" value="120" minimum="100" maximum="500"
- valueChange="onValueChange(event)"/>
- <j:Slider id="slider_v" width="250" value="40" minimum="40" maximum="300"
- valueChange="onValueChange(event)"/>
- <j:TextButton id="button" text="Button" width="120" height="40" primary="true"/>
</js:Group>
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index 332b444..e5a1021 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -20,20 +20,22 @@ 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:j="library://ns.apache.org/royale/jewel"
+ className="container">
<js:beads>
<j:VerticalLayoutWithPaddingAndGap gap="10"/>
</js:beads>
- <html:H1 text="Heading H1"/>
- <html:H2 text="Heading H2"/>
- <html:H3 text="Heading H3"/>
- <html:H4 text="Heading H4"/>
+ <html:H3 text="Jewel TextField"/>
- <html:Span text="Normal text to use in labels, texts and fields with single line or multiple lines."/>
-
- <html:H4 text="Jewel TextField"/>
+ <js:Group>
+ <js:beads>
+ <j:HorizontalLayoutWithPaddingAndGap gap="10"/>
+ </js:beads>
+ <j:TextButton text="Check it!" primary="true"/>
+ <j:TextField text="A TextField"/>
+ </js:Group>
<js:Group>
<js:beads>
@@ -41,16 +43,17 @@ limitations under the License.
</js:beads>
<j:TextField>
<j:beads>
- <js:TextPromptBead prompt="A Textfield..."/>
+ <js:TextPromptBead prompt="With Placeholder..."/>
</j:beads>
</j:TextField>
<j:TextButton text="Send" primary="true"/>
</js:Group>
- <html:H4 text="Jewel CheckBox"/>
- <j:CheckBox text="label"/>
-
- <html:H4 text="Jewel RadioButton"/>
- <j:RadioButton text="label"/>
+ <j:TextField>
+ <j:beads>
+ <js:TextPromptBead prompt="Disabled Textfield..."/>
+ <j:Disabled/>
+ </j:beads>
+ </j:TextField>
</js:Group>
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 22/49: fix classreference compilation with themes in
pom.xml
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 97283f7324808aadcb447186ce4e71732c9bd0e6
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Mar 16 18:39:42 2018 +0100
fix classreference compilation with themes in pom.xml
---
examples/royale/JewelExample/pom.xml | 23 ++++++++++++++++++++++
.../JewelTheme/src/main/resources/defaults.css | 1 +
.../src/main/sass/components/_label.sass | 2 +-
3 files changed, 25 insertions(+), 1 deletion(-)
diff --git a/examples/royale/JewelExample/pom.xml b/examples/royale/JewelExample/pom.xml
index 19f1837..5427bc4 100644
--- a/examples/royale/JewelExample/pom.xml
+++ b/examples/royale/JewelExample/pom.xml
@@ -81,6 +81,13 @@
<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>
@@ -92,10 +99,26 @@
</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>JewelTheme</artifactId>
<version>0.9.3-SNAPSHOT</version>
<type>swc</type>
<scope>theme</scope>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>JewelTheme</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <scope>theme</scope>
+ <classifier>js</classifier>
</dependency>
<dependency>
<groupId>org.apache.royale.framework</groupId>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 714ec69..9022239 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -221,6 +221,7 @@
* Jewel Label
*/
.jewel.label {
+ IBeadView: ClassReference("org.apache.royale.beads.views.LabelViewBead");
font-family: "Lato", sans-serif;
font-size: 0.75rem;
}
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_label.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_label.sass
index bb933f8..27906d1 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_label.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_label.sass
@@ -22,7 +22,7 @@
*/
.jewel.label
//IBeadView: ClassReference("org.apache.royale.html.beads.TextFieldView")
- //IBeadView: ClassReference("org.apache.royale.beads.views.LabelViewBead")
+ IBeadView: ClassReference("org.apache.royale.beads.views.LabelViewBead")
font:
family: $font-stack
size: $font-size
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 04/49: update classList to fix issues. Now work
totaly as expected
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 50de4e20111ca338dd863e153c2e810180fb4843
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Mar 13 16:21:45 2018 +0100
update classList to fix issues. Now work totaly as expected
---
.../main/royale/org/apache/royale/core/UIBase.as | 38 ++++++++++++++++++++--
.../main/royale/org/apache/royale/jewel/Button.as | 5 ++-
.../royale/org/apache/royale/jewel/TextButton.as | 4 +--
3 files changed, 38 insertions(+), 9 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as
index 7abe638..2d279c0 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as
@@ -1025,8 +1025,39 @@ package org.apache.royale.core
*
* @royalesuppresspublicvarwarning
*/
- public var typeNames:String;
+ private var _typeNames:String;
+ /**
+ * The classname. Often used for CSS
+ * class selector lookups.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get typeNames():String
+ {
+ return _typeNames;
+ }
+
+ /**
+ * @private
+ */
+ public function set typeNames(value:String):void
+ {
+ if (_typeNames !== value)
+ {
+ _typeNames = value;
+
+ COMPILE::JS
+ {
+ element.className = "";
+ setClassName(_typeNames);
+ }
+ }
+ }
+
private var _className:String;
/**
@@ -1054,7 +1085,7 @@ package org.apache.royale.core
COMPILE::JS
{
- setClassName(_className);
+ setClassName(typeNames ? typeNames + " " + _className : _className);
}
dispatchEvent(new Event("classNameChanged"));
@@ -1064,7 +1095,8 @@ package org.apache.royale.core
COMPILE::JS
protected function setClassName(value:String):void
{
- element.classList.add(value);
+ var classes:Array = value.split(" ");
+ element.classList.add.apply(element.classList, classes);
}
/**
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 224c789..53f58e4 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
@@ -59,9 +59,8 @@ package org.apache.royale.jewel
{
super();
- COMPILE::JS {
- element.classList.add("jewel", "button");
- }
+
+ typeNames = "jewel button";
}
private var _primary:Boolean = false;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as
index 23eb625..67fdcdd 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as
@@ -51,9 +51,7 @@ package org.apache.royale.jewel
{
super();
- COMPILE::JS {
- element.classList.add("jewel", "textbutton");
- }
+ typeNames = "jewel textbutton";
}
/**
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 01/49: redo branch due to mistake in the rebase
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 0d9809c9cb127b2a164a2d12981c7ccdb6a92da4
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Mar 12 22:10:01 2018 +0100
redo branch due to mistake in the rebase
---
examples/royale/JewelExample/.vscode/launch.json | 21 ++
examples/royale/JewelExample/.vscode/settings.json | 3 +
examples/royale/JewelExample/.vscode/tasks.json | 8 +
examples/royale/JewelExample/README.txt | 26 ++
examples/royale/JewelExample/asconfig.json | 31 ++
examples/royale/JewelExample/build.xml | 68 ++++
examples/royale/JewelExample/pom.xml | 102 ++++++
.../src/main/config/compile-app-config.xml | 28 ++
.../src/main/resources/jewel-example-styles.css | 25 ++
.../royale/JewelExample/src/main/royale/App.mxml | 40 +++
.../src/main/royale/ButtonPlayGround.mxml | 71 +++++
.../src/main/royale/TextInputPlayGround.mxml | 30 ++
frameworks/projects/Jewel/.vscode/launch.json | 21 ++
frameworks/projects/Jewel/.vscode/settings.json | 3 +
frameworks/projects/Jewel/.vscode/tasks.json | 8 +
frameworks/projects/Jewel/asconfig.json | 34 ++
frameworks/projects/Jewel/build.xml | 130 ++++++++
frameworks/projects/Jewel/pom.xml | 186 +++++++++++
.../Jewel/src/main/config/compile-swf-config.xml | 105 +++++++
.../projects/Jewel/src/main/resources/defaults.css | 70 +++++
.../Jewel/src/main/resources/jewel-as-manifest.xml | 25 ++
.../Jewel/src/main/resources/jewel-manifest.xml | 37 +++
.../projects/Jewel/src/main/resources/jewel.css | 63 ++++
.../projects/Jewel/src/main/royale/JewelClasses.as | 45 +++
.../royale/org/apache/royale/jewel/Application.as | 70 +++++
.../main/royale/org/apache/royale/jewel/Button.as | 165 ++++++++++
.../royale/org/apache/royale/jewel/RadioButton.as | 107 +++++++
.../main/royale/org/apache/royale/jewel/Slider.as | 72 +++++
.../royale/org/apache/royale/jewel/TextButton.as | 129 ++++++++
.../royale/org/apache/royale/jewel/TextField.as | 115 +++++++
.../org/apache/royale/jewel/beads/Disabled.as | 107 +++++++
.../apache/royale/jewel/beads/RadioButtonView.as | 286 +++++++++++++++++
.../apache/royale/jewel/beads/SliderThumbView.as | 121 ++++++++
.../apache/royale/jewel/beads/SliderTrackView.as | 121 ++++++++
.../org/apache/royale/jewel/beads/SliderView.as | 172 +++++++++++
.../royale/jewel/beads/layouts/HorizontalLayout.as | 196 ++++++++++++
.../royale/jewel/beads/layouts/VerticalLayout.as | 193 ++++++++++++
.../layouts/VerticalLayoutWithPaddingAndGap.as | 341 +++++++++++++++++++++
.../royale/jewel/supportClasses/ITextField.as | 68 ++++
.../royale/jewel/supportClasses/RadioButtonIcon.as | 117 +++++++
.../royale/jewel/supportClasses/TextFieldBase.as | 154 ++++++++++
.../projects/Jewel/src/main/sass/_global.sass | 66 ++++
frameworks/projects/Jewel/src/main/sass/jewel.sass | 35 +++
frameworks/projects/pom.xml | 1 +
frameworks/themes/JewelTheme/.vscode/launch.json | 21 ++
frameworks/themes/JewelTheme/.vscode/settings.json | 3 +
frameworks/themes/JewelTheme/.vscode/tasks.json | 8 +
frameworks/themes/JewelTheme/asconfig.json | 34 ++
frameworks/themes/JewelTheme/build.xml | 133 ++++++++
frameworks/themes/JewelTheme/pom.xml | 88 ++++++
.../src/main/config/compile-swf-config.xml | 90 ++++++
.../src/main/resources/assets/JewelButton2.svg | 44 +++
.../src/main/resources/assets/jewel-button.svg | 37 +++
.../src/main/resources/royale-jewel-blue.css | 263 ++++++++++++++++
.../src/main/resources/royale-jewel-red.css | 263 ++++++++++++++++
.../src/main/royale/JewelThemeClasses.as | 36 +++
.../apache/royale/jewel/JewelThemeFontInject.as | 46 +++
.../themes/JewelTheme/src/main/sass/_button.sass | 73 +++++
.../JewelTheme/src/main/sass/_functions.sass | 18 ++
.../themes/JewelTheme/src/main/sass/_global.sass | 32 ++
.../themes/JewelTheme/src/main/sass/_mixins.sass | 43 +++
.../JewelTheme/src/main/sass/_textbutton.sass | 64 ++++
.../JewelTheme/src/main/sass/_textfield.sass | 67 ++++
.../JewelTheme/src/main/sass/_variables.sass | 31 ++
.../src/main/sass/colors/_blue-color-palette.sass | 26 ++
.../src/main/sass/colors/_red-color-palette.sass | 26 ++
.../src/main/sass/royale-jewel-blue.sass | 36 +++
.../JewelTheme/src/main/sass/royale-jewel-red.sass | 36 +++
frameworks/themes/pom.xml | 1 +
69 files changed, 5335 insertions(+)
diff --git a/examples/royale/JewelExample/.vscode/launch.json b/examples/royale/JewelExample/.vscode/launch.json
new file mode 100644
index 0000000..5dfb672
--- /dev/null
+++ b/examples/royale/JewelExample/.vscode/launch.json
@@ -0,0 +1,21 @@
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Launch Chrome against debug.html, with sourcemaps",
+ "type": "chrome",
+ "request": "launch",
+ "file": "${workspaceRoot}/target/javascript/bin/js-debug/index.html",
+ "sourceMaps": true,
+ "preLaunchTask": "mvn"
+ },
+ {
+ "name": "Launch Firefox against debug.html, with sourcemaps",
+ "type": "firefox",
+ "request": "launch",
+ "file": "${workspaceRoot}/target/javascript/bin/js-debug/index.html",
+ "sourceMaps": true,
+ "preLaunchTask": "mvn"
+ }
+ ]
+}
diff --git a/examples/royale/JewelExample/.vscode/settings.json b/examples/royale/JewelExample/.vscode/settings.json
new file mode 100644
index 0000000..1f5a970
--- /dev/null
+++ b/examples/royale/JewelExample/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "nextgenas.sdk.framework": "/Users/carlosrovira/Dev/Royale/Sdks/apache-royale-0.9.2-SNAPSHOT"
+}
\ No newline at end of file
diff --git a/examples/royale/JewelExample/.vscode/tasks.json b/examples/royale/JewelExample/.vscode/tasks.json
new file mode 100644
index 0000000..5d6198d
--- /dev/null
+++ b/examples/royale/JewelExample/.vscode/tasks.json
@@ -0,0 +1,8 @@
+{
+ // for the documentation about the tasks.json format
+ "version": "0.1.0",
+ "command": "mvn",
+ "args": ["clean", "install", "-DskipTests"],
+ "isShellCommand": true,
+ "showOutput": "always"
+}
\ No newline at end of file
diff --git a/examples/royale/JewelExample/README.txt b/examples/royale/JewelExample/README.txt
new file mode 100644
index 0000000..7b84b3a
--- /dev/null
+++ b/examples/royale/JewelExample/README.txt
@@ -0,0 +1,26 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+DESCRIPTION
+
+The JewelExample is demo app to customize styles on Royale components
+
+Right now this is a starter project with only a button to start developing styles
+
+
diff --git a/examples/royale/JewelExample/asconfig.json b/examples/royale/JewelExample/asconfig.json
new file mode 100644
index 0000000..4b6259e
--- /dev/null
+++ b/examples/royale/JewelExample/asconfig.json
@@ -0,0 +1,31 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+{
+ "config": "royale",
+ "compilerOptions": {
+ "debug": false,
+ "targets": ["JSRoyale","SWF"],
+ "source-map": true
+ },
+ "additionalOptions": "-remove-circulars -js-output-optimization=skipAsCoercions",
+ "files":
+ [
+ "src/main/royale/App.mxml"
+ ]
+}
diff --git a/examples/royale/JewelExample/build.xml b/examples/royale/JewelExample/build.xml
new file mode 100644
index 0000000..b0cb3d3
--- /dev/null
+++ b/examples/royale/JewelExample/build.xml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<project name="JewelExample" default="main" basedir=".">
+ <property name="ROYALE_HOME" location="../../.."/>
+ <property name="example" value="App" />
+
+ <property file="${ROYALE_HOME}/env.properties"/>
+ <property environment="env"/>
+ <property file="${ROYALE_HOME}/build.properties"/>
+ <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+
+ <include file="${basedir}/../../build_example.xml" />
+
+ <target name="main" depends="clean,build_example.compile" description="Clean build of ${example}">
+ <mkdir dir="${basedir}/bin/js-debug/assets" />
+ <copy todir="${basedir}/bin/js-debug/assets" failonerror="false">
+ <fileset dir="${basedir}/src/main/resources/assets">
+ <include name="**" />
+ </fileset>
+ </copy>
+ <mkdir dir="${basedir}/bin/js-release/assets" />
+ <copy todir="${basedir}/bin/js-release/assets" failonerror="false">
+ <fileset dir="${basedir}/src/main/resources/assets">
+ <include name="**" />
+ </fileset>
+ </copy>
+ <replace file="${basedir}/bin/js-debug/index.html" token="${primary}" value="indigo" />
+ <replace file="${basedir}/bin/js-debug/index.html" token="${accent}" value="pink" />
+ <replace file="${basedir}/bin/js-release/index.html" token="${primary}" value="indigo" />
+ <replace file="${basedir}/bin/js-release/index.html" token="${accent}" value="pink" />
+ </target>
+
+ <target name="clean">
+ <delete dir="${basedir}/bin" failonerror="false" />
+ <delete dir="${basedir}/bin-debug" failonerror="false" />
+ <delete dir="${basedir}/bin-release" failonerror="false" />
+ <delete dir="${basedir}/target" failonerror="false" />
+ </target>
+
+ <target name="examine" depends="build_example.get.browser">
+ <property name="which" value="debug" />
+ <echo message="See various team members."/>
+ <exec executable="${browser}" dir="${basedir}/bin/js-${which}" failonerror="true">
+ <arg value="${basedir}/bin/js-${which}/index.html"/>
+ </exec>
+ </target>
+
+
+</project>
diff --git a/examples/royale/JewelExample/pom.xml b/examples/royale/JewelExample/pom.xml
new file mode 100644
index 0000000..e71767e
--- /dev/null
+++ b/examples/royale/JewelExample/pom.xml
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+ <modelVersion>4.0.0</modelVersion>
+
+ <parent>
+ <groupId>org.apache.royale.examples</groupId>
+ <artifactId>examples-royale</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ </parent>
+
+ <artifactId>JewelExample</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <packaging>swf</packaging>
+
+ <name>Apache Royale: Examples: Royale: JewelExample</name>
+
+ <properties>
+ <!-- Customize Jewel colors -->
+ <primary>red</primary>
+ <secondary>grey</secondary>
+ </properties>
+
+ <build>
+ <sourceDirectory>src/main/royale</sourceDirectory>
+ <plugins>
+ <plugin>
+ <groupId>org.apache.royale.compiler</groupId>
+ <artifactId>royale-maven-plugin</artifactId>
+ <extensions>true</extensions>
+ <configuration>
+ <mainClass>App.mxml</mainClass>
+ <targets>JSRoyale,SWF</targets>
+ <!--<htmlTemplate>${basedir}/target/javascript/bin/js-debug/jewel-js-index-template.html</htmlTemplate>-->
+ </configuration>
+ </plugin>
+ </plugins>
+ </build>
+
+ <dependencies>
+ <dependency>
+ <groupId>com.adobe.flash.framework</groupId>
+ <artifactId>playerglobal</artifactId>
+ <version>${flash.version}</version>
+ <type>swc</type>
+ <scope>provided</scope>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Jewel</artifactId>
+ <version>0.9.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>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>JewelTheme</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <scope>theme</scope>
+ </dependency>
+ </dependencies>
+
+</project>
diff --git a/examples/royale/JewelExample/src/main/config/compile-app-config.xml b/examples/royale/JewelExample/src/main/config/compile-app-config.xml
new file mode 100644
index 0000000..df6ea5b
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/config/compile-app-config.xml
@@ -0,0 +1,28 @@
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<royale-config>
+ <js-output-optimization>
+ <optimization>skipAsCoercions</optimization>
+ </js-output-optimization>
+ <compiler>
+ <theme>
+ <filename>../../../../../../frameworks/libs/JewelTheme.swc</filename>
+ </theme>
+ </compiler>
+</royale-config>
diff --git a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
new file mode 100644
index 0000000..48829b3
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
@@ -0,0 +1,25 @@
+/*
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+*/
+
+@namespace "http://www.w3.org/1999/xhtml";
+
+
+
diff --git a/examples/royale/JewelExample/src/main/royale/App.mxml b/examples/royale/JewelExample/src/main/royale/App.mxml
new file mode 100644
index 0000000..3d41276
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/App.mxml
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!---
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+-->
+<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:js="library://ns.apache.org/royale/basic"
+ xmlns:local="*">
+
+ <fx:Style source="../../main/resources/jewel-example-styles.css"/>
+
+ <js:valuesImpl>
+ <js:SimpleCSSValuesImpl />
+ </js:valuesImpl>
+ <js:initialView>
+ <js:View>
+ <js:beads>
+ <js:HorizontalLayout />
+ </js:beads>
+ <local:ButtonPlayGround/>
+ <local:TextInputPlayGround/>
+ </js:View>
+ </js:initialView>
+</j:Application>
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
new file mode 100644
index 0000000..5ca13a1
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements. See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License. You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:js="library://ns.apache.org/royale/basic"
+ xmlns:j="library://ns.apache.org/royale/jewel">
+
+ <fx:Script>
+ <![CDATA[
+ private function onValueChange(event:Event):void
+ {
+ button.width = slider.value;
+ button.height = slider_v.value;
+ }
+ ]]>
+ </fx:Script>
+
+ <js:beads>
+ <js:VerticalLayoutWithPaddingAndGap gap="10"/>
+ </js:beads>
+
+ <js:Label text="Basic"/>
+ <js:Button/>
+ <js:TextButton text="Basic"/>
+
+ <js:Label text="Jewel Button"/>
+ <j:Button primary="true"/>
+
+ <js:Label 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:Label text="Jewel Button Sizing (respect min values)"/>
+ <j:Slider id="slider" width="250" value="100" minimum="0" maximum="500"
+ valueChange="onValueChange(event)"/>
+ <j:Slider id="slider_v" width="250" value="40" minimum="0" maximum="300"
+ valueChange="onValueChange(event)"/>
+
+ <j:TextButton id="button" text="Button" width="100" height="40" primary="true"/>
+
+</js:Group>
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
new file mode 100644
index 0000000..aa8c81a
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements. See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License. You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:js="library://ns.apache.org/royale/basic"
+ xmlns:j="library://ns.apache.org/royale/jewel">
+
+
+
+ <j:TextField text="Text Input" width="120" height="40"/>
+
+ <j:RadioButton/>
+
+</js:Group>
diff --git a/frameworks/projects/Jewel/.vscode/launch.json b/frameworks/projects/Jewel/.vscode/launch.json
new file mode 100644
index 0000000..5dfb672
--- /dev/null
+++ b/frameworks/projects/Jewel/.vscode/launch.json
@@ -0,0 +1,21 @@
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Launch Chrome against debug.html, with sourcemaps",
+ "type": "chrome",
+ "request": "launch",
+ "file": "${workspaceRoot}/target/javascript/bin/js-debug/index.html",
+ "sourceMaps": true,
+ "preLaunchTask": "mvn"
+ },
+ {
+ "name": "Launch Firefox against debug.html, with sourcemaps",
+ "type": "firefox",
+ "request": "launch",
+ "file": "${workspaceRoot}/target/javascript/bin/js-debug/index.html",
+ "sourceMaps": true,
+ "preLaunchTask": "mvn"
+ }
+ ]
+}
diff --git a/frameworks/projects/Jewel/.vscode/settings.json b/frameworks/projects/Jewel/.vscode/settings.json
new file mode 100644
index 0000000..1f5a970
--- /dev/null
+++ b/frameworks/projects/Jewel/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "nextgenas.sdk.framework": "/Users/carlosrovira/Dev/Royale/Sdks/apache-royale-0.9.2-SNAPSHOT"
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/.vscode/tasks.json b/frameworks/projects/Jewel/.vscode/tasks.json
new file mode 100644
index 0000000..5d6198d
--- /dev/null
+++ b/frameworks/projects/Jewel/.vscode/tasks.json
@@ -0,0 +1,8 @@
+{
+ // for the documentation about the tasks.json format
+ "version": "0.1.0",
+ "command": "mvn",
+ "args": ["clean", "install", "-DskipTests"],
+ "isShellCommand": true,
+ "showOutput": "always"
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/asconfig.json b/frameworks/projects/Jewel/asconfig.json
new file mode 100644
index 0000000..f4421c7
--- /dev/null
+++ b/frameworks/projects/Jewel/asconfig.json
@@ -0,0 +1,34 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ {
+ "config": "royale",
+ "type": "lib",
+ "compilerOptions": {
+ "debug": true,
+ "targets": [
+ "JSRoyale",
+ "SWF"
+ ],
+ "include-classes": [
+ "JewelClasses"
+ ],
+ "include-sources": [
+ "src/main/royale"
+ ],
+ "output": "target/Jewel.swc"
+ }
+}
diff --git a/frameworks/projects/Jewel/build.xml b/frameworks/projects/Jewel/build.xml
new file mode 100644
index 0000000..5ad2877
--- /dev/null
+++ b/frameworks/projects/Jewel/build.xml
@@ -0,0 +1,130 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<project name="Jewel" default="main" basedir=".">
+ <property name="ROYALE_HOME" location="../../.."/>
+
+ <property file="${ROYALE_HOME}/env.properties"/>
+ <property environment="env"/>
+ <property file="${ROYALE_HOME}/build.properties"/>
+ <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+
+ <property name="target.name" value="${ant.project.name}.swc" />
+
+ <target name="main" depends="clean,check-compiler,compile,compile-js,copy-swc,test" description="Full build of ${ant.project.name}.swc">
+ </target>
+
+ <target name="compile-js">
+ <ant dir="${ROYALE_HOME}/frameworks/js/projects/${ant.project.name}JS/" inheritAll="false" >
+ <property name="ROYALE_SWF_COMPILER_HOME" value="${ROYALE_SWF_COMPILER_HOME}"/>
+ <property name="ROYALE_COMPILER_HOME" value="${ROYALE_COMPILER_HOME}"/>
+ <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+ </ant>
+ </target>
+
+ <target name="copy-swc" if="env.AIR_HOME">
+ <copy file="${basedir}/target/${target.name}" tofile="${ROYALE_HOME}/frameworks/libs/${target.name}" />
+ </target>
+
+ <target name="check-for-tests" >
+ <condition property="skip-tests" >
+ <not>
+ <available file="${basedir}/src/test/royale/build.xml" />
+ </not>
+ </condition>
+ </target>
+
+ <target name="test" depends="check-for-tests" unless="skip-tests">
+ <ant dir="src/test/royale" />
+ </target>
+
+ <target name="clean">
+ <delete failonerror="false">
+ <fileset dir="${ROYALE_HOME}/frameworks/libs">
+ <include name="${target.name}"/>
+ </fileset>
+ </delete>
+ <delete failonerror="false" includeemptydirs="true">
+ <fileset dir="${basedir}/target">
+ <include name="**/**"/>
+ </fileset>
+ </delete>
+ <antcall target="clean-tests" />
+ </target>
+
+ <target name="clean-tests" depends="check-for-tests" unless="skip-tests">
+ <ant dir="src/test/royale" target="clean"/>
+ </target>
+
+ <target name="compile" description="Compiles .as files into .swc" if="env.AIR_HOME">
+ <echo message="Compiling libs/${ant.project.name}.swc"/>
+ <echo message="ROYALE_HOME: ${ROYALE_HOME}"/>
+ <echo message="ROYALE_SWF_COMPILER_HOME: ${ROYALE_SWF_COMPILER_HOME}"/>
+ <echo message="ROYALE_COMPILER_HOME: ${ROYALE_COMPILER_HOME}"/>
+
+ <java jar="${ROYALE_COMPILER_HOME}/lib/compc.jar" fork="true" >
+ <jvmarg value="-Xmx384m" />
+ <jvmarg value="-Dsun.io.useCanonCaches=false" />
+ <jvmarg value="-Droyalelib=${ROYALE_HOME}/frameworks" />
+ <arg value="+royalelib=${ROYALE_HOME}/frameworks" />
+ <arg value="+playerglobal.version=${playerglobal.version}" />
+ <arg value="+env.AIR_HOME=${env.AIR_HOME}" />
+ <arg value="-compiler.strict-xml=true" />
+ <arg value="-compiler.targets=SWF,JSRoyale" />
+ <arg value="-output=${basedir}/target/${target.name}" />
+ <arg value="-load-config=${basedir}/src/main/config/compile-swf-config.xml" />
+ <arg value="-js-load-config=${ROYALE_HOME}/frameworks/js-config.xml" />
+ <arg value="-js-load-config+=${basedir}/../../js/projects/${ant.project.name}JS/src/main/config/compile-js-config.xml" />
+ </java>
+ </target>
+
+ <target name="check-compiler" depends="check-compiler-home,check-transpiler-home">
+ <path id="lib.path">
+ <fileset dir="${ROYALE_COMPILER_HOME}/lib" includes="compiler-royaleTasks.jar"/>
+ </path>
+ <taskdef resource="flexTasks.tasks" classpathref="lib.path"/>
+ </target>
+
+ <target name="check-compiler-home"
+ description="Set ROYALE_SWF_COMPILER_HOME to point at the compiler.">
+
+ <available file="${ROYALE_HOME}/lib/compiler-mxmlc.jar"
+ type="file"
+ property="ROYALE_SWF_COMPILER_HOME"
+ value="${ROYALE_HOME}"/>
+
+ <fail message="ROYALE_SWF_COMPILER_HOME must be set to a folder with a lib sub-folder containing compiler-mxmlc.jar such as the compiler folder in royale-compiler repo or the root of a Royale SDK"
+ unless="ROYALE_SWF_COMPILER_HOME"/>
+ </target>
+
+ <target name="check-transpiler-home"
+ description="Set ROYALE_COMPILER_HOME to point at the cross-compiler.">
+
+ <available file="${ROYALE_HOME}/js/lib/jsc.jar"
+ type="file"
+ property="ROYALE_COMPILER_HOME"
+ value="${ROYALE_HOME}/js"/>
+
+ <fail message="ROYALE_COMPILER_HOME must be set to a folder with a lib sub-folder containing jsc.jar such as the compiler-jx folder in royale-compiler repo or the js folder of a Royale SDK"
+ unless="ROYALE_COMPILER_HOME"/>
+ </target>
+
+</project>
diff --git a/frameworks/projects/Jewel/pom.xml b/frameworks/projects/Jewel/pom.xml
new file mode 100644
index 0000000..74e2bd2
--- /dev/null
+++ b/frameworks/projects/Jewel/pom.xml
@@ -0,0 +1,186 @@
+<?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>Jewel</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <packaging>swc</packaging>
+
+ <name>Apache Royale: Framework: Libs: Jewel</name>
+
+ <build>
+ <sourceDirectory>src/main/royale</sourceDirectory>
+ <plugins>
+ <plugin>
+ <groupId>org.apache.royale.compiler</groupId>
+ <artifactId>royale-maven-plugin</artifactId>
+ <version>${royale.compiler.version}</version>
+ <extensions>true</extensions>
+ <configuration>
+ <namespaces>
+ <namespace>
+ <uri>library://ns.apache.org/royale/jewel</uri>
+ <manifest>${project.basedir}/src/main/resources/jewel-manifest.xml</manifest>
+ </namespace>
+ <namespace>
+ <type>as</type>
+ <uri>library://ns.apache.org/royale/jewel</uri>
+ <manifest>${project.basedir}/src/main/resources/jewel-as-manifest.xml</manifest>
+ </namespace>
+ </namespaces>
+ <includeClasses>
+ <includeClass>JewelClasses</includeClass>
+ </includeClasses>
+ <includeFiles>
+ <include-file>
+ <name>jewel.css</name>
+ <path>../src/main/resources/jewel.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>
+ <plugin>
+ <groupId>nl.geodienstencentrum.maven</groupId>
+ <artifactId>sass-maven-plugin</artifactId>
+ <version>3.5.2</version>
+ <configuration>
+ <resources>
+ <resource>
+ <source>
+ <directory>${basedir}/src/main/sass</directory>
+ <includes>
+ <include>**/*.sass</include>
+ </includes>
+ </source>
+ <destination>${basedir}/src/main/resources</destination>
+ </resource>
+ </resources>
+ </configuration>
+ <executions>
+ <execution>
+ <id>generate-css-using-sass</id>
+ <goals>
+ <goal>update-stylesheets</goal>
+ </goals>
+ </execution>
+ </executions>
+ </plugin>
+ </plugins>
+ </build>
+
+ <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>Binding</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Binding</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Graphics</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Graphics</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>js</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Collections</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>swf</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.royale.framework</groupId>
+ <artifactId>Collections</artifactId>
+ <version>0.9.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>
+ <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>
+ </dependencies>
+
+</project>
diff --git a/frameworks/projects/Jewel/src/main/config/compile-swf-config.xml b/frameworks/projects/Jewel/src/main/config/compile-swf-config.xml
new file mode 100644
index 0000000..4c2f19e
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/config/compile-swf-config.xml
@@ -0,0 +1,105 @@
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<royale-config>
+
+ <compiler>
+ <accessible>false</accessible>
+
+ <!-- build both SWF and JS. -->
+ <targets>
+ <target>JSRoyale</target>
+ </targets>
+ <strict-xml>true</strict-xml>
+
+ <external-library-path>
+ <path-element>${env.AIR_HOME}/frameworks/libs/air/airglobal.swc</path-element>
+ <path-element>../../../../../libs/Binding.swc</path-element>
+ <path-element>../../../../../libs/Core.swc</path-element>
+ <path-element>../../../../../libs/Graphics.swc</path-element>
+ <path-element>../../../../../libs/Basic.swc</path-element>
+ <path-element>../../../../../libs/Collections.swc</path-element>
+ <path-element>../../../../../libs/HTML.swc</path-element>
+ </external-library-path>
+
+ <allow-subclass-overrides>true</allow-subclass-overrides>
+ <mxml>
+ <children-as-data>true</children-as-data>
+ </mxml>
+ <binding-value-change-event>org.apache.royale.events.ValueChangeEvent</binding-value-change-event>
+ <binding-value-change-event-kind>org.apache.royale.events.ValueChangeEvent</binding-value-change-event-kind>
+ <binding-value-change-event-type>valueChange</binding-value-change-event-type>
+
+ <define>
+ <name>COMPILE::SWF</name>
+ <value>true</value>
+ </define>
+ <define>
+ <name>COMPILE::JS</name>
+ <value>false</value>
+ </define>
+
+ <keep-as3-metadata>
+ <name>Bindable</name>
+ <name>Managed</name>
+ <name>ChangeEvent</name>
+ <name>NonCommittingChangeEvent</name>
+ <name>Transient</name>
+ </keep-as3-metadata>
+
+ <locale/>
+
+ <library-path/>
+
+ <namespaces>
+ <namespace>
+ <uri>library://ns.apache.org/royale/jewel</uri>
+ <manifest>../resources/jewel-manifest.xml</manifest>
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/royale/jewel</uri>
+ <manifest>../resources/jewel-as-manifest.xml</manifest>
+ </namespace>
+ </namespaces>
+
+ <source-path>
+ <path-element>../royale</path-element>
+ </source-path>
+
+ <warn-no-constructor>false</warn-no-constructor>
+ </compiler>
+
+ <include-file>
+ <name>defaults.css</name>
+ <path>../resources/defaults.css</path>
+ </include-file>
+
+ <include-lookup-only>true</include-lookup-only>
+
+ <include-classes>
+ <class>JewelClasses</class>
+ </include-classes>
+
+ <include-namespaces>
+ <uri>library://ns.apache.org/royale/jewel</uri>
+ </include-namespaces>
+
+ <target-player>${playerglobal.version}</target-player>
+
+
+</royale-config>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
new file mode 100644
index 0000000..f09b980
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -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.
+ *
+ */
+
+@namespace "library://ns.apache.org/royale/jewel";
+
+.vertical-layout-padding-gap {
+ display: block !important;
+}
+
+/*
+* Jewel TextField
+*/
+TextField {
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
+ /*IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView");
+ IBeadController: ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController");*/
+}
+.vTextField--input {}
+.vTextField--label {}
+
+/*
+* Jewel Slider
+*/
+Slider {
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView");
+ IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout");
+ IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController");
+ position: relative;
+}
+.SliderTrack {
+ position: absolute;
+}
+.SliderThumb {
+ position: absolute;
+ border-radius: 15px;
+}
+
+@media -royale-swf
+{
+ Slider
+ {
+ iThumbView: ClassReference("org.apache.royale.jewel.beads.SliderThumbView");
+ iTrackView: ClassReference("org.apache.royale.jewel.beads.SliderTrackView");
+ }
+
+ RadioButton
+ {
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView");
+ /*font-size: 11px;
+ font-family: Arial;*/
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-as-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-as-manifest.xml
new file mode 100644
index 0000000..e38496a
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-as-manifest.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<componentPackage>
+
+
+</componentPackage>
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
new file mode 100644
index 0000000..b3bfccb
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -0,0 +1,37 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<componentPackage>
+
+ <component id="Application" class="org.apache.royale.jewel.Application"/>
+ <component id="Button" class="org.apache.royale.jewel.Button"/>
+ <component id="TextButton" class="org.apache.royale.jewel.TextButton"/>
+ <component id="TextField" class="org.apache.royale.jewel.TextField"/>
+ <component id="Slider" class="org.apache.royale.jewel.Slider"/>
+ <component id="RadioButton" class="org.apache.royale.jewel.RadioButton"/>
+
+ <component id="Disabled" class="org.apache.royale.jewel.beads.Disabled"/>
+
+ <component id="HorizontalLayout" class="org.apache.royale.jewel.beads.layouts.HorizontalLayout"/>
+ <component id="VerticalLayout" class="org.apache.royale.jewel.beads.layouts.VerticalLayout"/>
+ <component id="VerticalLayoutWithPaddingAndGap" class="org.apache.royale.jewel.beads.layouts.VerticalLayoutWithPaddingAndGap"/>
+
+</componentPackage>
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel.css b/frameworks/projects/Jewel/src/main/resources/jewel.css
new file mode 100644
index 0000000..21f1648
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/resources/jewel.css
@@ -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.
+ */
+@namespace "library://ns.apache.org/royale/jewel";
+.layout .horizontal {
+ white-space: nowrap;
+}
+.layout .vertical {
+ display: block !important;
+}
+
+/**
+ * Jewel TextField
+ */
+TextField {
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
+}
+
+/**
+ * Jewel Slider
+ */
+Slider {
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView");
+ IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout");
+ IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController");
+ position: relative;
+}
+
+.SliderTrack {
+ position: absolute;
+}
+
+.SliderThumb {
+ position: absolute;
+ border-radius: 15px;
+}
+
+@media -royale-swf {
+ Slider {
+ iThumbView: ClassReference("org.apache.royale.jewel.beads.SliderThumbView");
+ iTrackView: ClassReference("org.apache.royale.jewel.beads.SliderTrackView");
+ }
+}
+RadioButton {
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView");
+}
+
+/*# sourceMappingURL=jewel.css.map */
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
new file mode 100644
index 0000000..3cb788e
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -0,0 +1,45 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+
+ /**
+ * @private
+ * This class is used to link additional classes into jewel.swc
+ * beyond those that are found by dependecy analysis starting
+ * from the classes specified in manifest.xml.
+ */
+ internal class JewelClasses
+ {
+ import org.apache.royale.jewel.beads.SliderView; SliderView;
+
+ COMPILE::SWF
+ {
+ import org.apache.royale.jewel.beads.SliderThumbView; SliderThumbView;
+ import org.apache.royale.jewel.beads.SliderTrackView; SliderTrackView;
+
+ import org.apache.royale.jewel.beads.RadioButtonView; RadioButtonView;
+ }
+
+ import org.apache.royale.jewel.beads.layouts.HorizontalLayout; HorizontalLayout;
+ import org.apache.royale.jewel.beads.layouts.VerticalLayout; VerticalLayout;
+ import org.apache.royale.jewel.beads.layouts.VerticalLayoutWithPaddingAndGap; VerticalLayoutWithPaddingAndGap;
+ }
+
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Application.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Application.as
new file mode 100644
index 0000000..b29f0a4
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Application.as
@@ -0,0 +1,70 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel
+{
+ import org.apache.royale.core.Application;
+ import org.apache.royale.core.SimpleCSSValuesImpl;
+
+ /**
+ * Jewel Application holds specific Jewel need in a Royale Application.
+ *
+ * This class extends the standard Application and sets up the
+ * SimpleCSSValuesImpl (implementation) for convenience.
+ *
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public class Application extends org.apache.royale.core.Application
+ {
+ /**
+ * constructor.
+ *
+ * <inject_html>
+ * <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
+ */
+ public function Application()
+ {
+ super();
+
+ this.valuesImpl = new SimpleCSSValuesImpl();
+
+ // this a is temp solution until we get a better way to get a reference to Application
+ //topLevelApplication = this;
+ }
+
+ /**
+ * static reference to this application used mainly for dialog (Dialog class)
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ //public static var topLevelApplication:Object;
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
new file mode 100644
index 0000000..70d4d58
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
@@ -0,0 +1,165 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT 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.Button;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The Button class is a simple button. Use TextButton for
+ * buttons that should show text. This is the lightest weight
+ * button used for non-text buttons like the arrow buttons
+ * in a Scrollbar or NumericStepper.
+ *
+ * The most common view for this button is CSSButtonView that
+ * allows you to specify a backgroundImage in CSS that defines
+ * the look of the button.
+ *
+ * However, when used in ScrollBar and when composed in many
+ * other components, it is more common to assign a custom view
+ * to the button.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class Button extends org.apache.royale.html.Button
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function Button()
+ {
+ super();
+
+ typeNames = "jewel button";
+ }
+
+ COMPILE::JS
+ override protected function computeFinalClassNames():String
+ {
+ return super.computeFinalClassNames() + " " + element.classList;
+ }
+
+ private var _primary:Boolean = false;
+
+ /**
+ * A boolean flag to activate "primary" effect selector.
+ * Applies primary color display effect.
+ * Colors are defined in royale-jewel.css
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function get primary():Boolean
+ {
+ return _primary;
+ }
+
+ public function set primary(value:Boolean):void
+ {
+ if (_primary != value)
+ {
+ _primary = value;
+
+ COMPILE::JS
+ {
+
+ element.classList.toggle("primary", value);
+ setClassName(computeFinalClassNames());
+ }
+ }
+ }
+
+ private var _secondary:Boolean = false;
+
+ /**
+ * A boolean flag to activate "secondary" effect selector.
+ * Applies secondary color display effect.
+ * Colors are defined in royale-jewel.css
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function get secondary():Boolean
+ {
+ return _secondary;
+ }
+
+ public function set secondary(value:Boolean):void
+ {
+ if (_secondary != value)
+ {
+ _secondary = value;
+
+ COMPILE::JS
+ {
+ element.classList.toggle("secondary", value);
+ setClassName(computeFinalClassNames());
+ }
+ }
+ }
+
+ private var _emphasized:Boolean = false;
+
+ /**
+ * A boolean flag to activate "emphasized" effect selector.
+ * Applies emphasized color display effect.
+ * Colors are defined in royale-jewel.css
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function get emphasized():Boolean
+ {
+ return _emphasized;
+ }
+
+ public function set emphasized(value:Boolean):void
+ {
+ if (_emphasized != value)
+ {
+ _emphasized = value;
+
+ COMPILE::JS
+ {
+ element.classList.toggle("emphasized", value);
+ setClassName(computeFinalClassNames());
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as
new file mode 100644
index 0000000..05a5b3d
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as
@@ -0,0 +1,107 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel
+{
+ import org.apache.royale.html.RadioButton;
+
+ COMPILE::SWF
+ {
+ import flash.display.DisplayObject;
+ }
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.jewel.supportClasses.RadioButtonIcon;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The RadioButton class is a component that displays a selectable Button. RadioButtons
+ * are typically used in groups, identified by the groupName property. RadioButton use
+ * the following beads:
+ *
+ * org.apache.royale.core.IBeadModel: the data model, which includes the groupName.
+ * org.apache.royale.core.IBeadView: the bead that constructs the visual parts of the RadioButton..
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ COMPILE::SWF
+ public class RadioButton extends org.apache.royale.html.RadioButton
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function RadioButton(upState:DisplayObject=null, overState:DisplayObject=null, downState:DisplayObject=null, hitTestState:DisplayObject=null)
+ {
+ super(upState, overState, downState, hitTestState);
+ }
+ }
+
+ COMPILE::JS
+ public class RadioButton extends org.apache.royale.html.RadioButton
+ {
+ /**
+ * @private
+ *
+ * @royalesuppresspublicvarwarning
+ */
+ public static var radioCounter:int = 0;
+
+ private var labelFor:HTMLLabelElement;
+ private var textNode:Text;
+ private var icon:RadioButtonIcon;
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion HTMLInputElement
+ * @royaleignorecoercion HTMLLabelElement
+ * @royaleignorecoercion Text
+ */
+ override protected function createElement():WrappedHTMLElement
+ {
+
+
+ icon = new RadioButtonIcon()
+ icon.id = '_radio_' + org.apache.royale.jewel.RadioButton.radioCounter++;
+
+ textNode = document.createTextNode('') as Text;
+
+ labelFor = addElementToWrapper(this,'label') as HTMLLabelElement;
+ labelFor.appendChild(icon.element);
+ labelFor.appendChild(textNode);
+
+ (textNode as WrappedHTMLElement).royale_wrapper = this;
+ (icon.element as WrappedHTMLElement).royale_wrapper = this;
+
+ typeNames = 'RadioButton';
+
+ return element;
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Slider.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Slider.as
new file mode 100644
index 0000000..9d4f6d9
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Slider.as
@@ -0,0 +1,72 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel
+{
+ import org.apache.royale.html.Slider;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ [Event(name="valueChange", type="org.apache.royale.events.Event")]
+
+ /**
+ * The Slider class is a component that displays a range of values using a
+ * track and a thumb control. The Slider uses the following bead types:
+ *
+ * org.apache.royale.core.IBeadModel: the data model, typically an IRangeModel, that holds the Slider values.
+ * org.apache.royale.core.IBeadView: the bead that constructs the visual parts of the Slider.
+ * org.apache.royale.core.IBeadController: the bead that handles input.
+ * org.apache.royale.core.IThumbValue: the bead responsible for the display of the thumb control.
+ * org.apache.royale.core.ITrackView: the bead responsible for the display of the track.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public class Slider extends org.apache.royale.html.Slider
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function Slider()
+ {
+ super();
+ }
+
+
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ return super.createElement();
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as
new file mode 100644
index 0000000..67fdcdd
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as
@@ -0,0 +1,129 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT 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/TextField.as
new file mode 100644
index 0000000..145ab37
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
@@ -0,0 +1,115 @@
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel
+{
+ import org.apache.royale.jewel.supportClasses.TextFieldBase;
+
+ COMPILE::JS
+ {
+ import goog.events;
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The TextField class implements the basic control for
+ * single-line text input.
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public class TextField extends TextFieldBase
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function TextField()
+ {
+ super();
+ }
+
+ COMPILE::JS
+ private var _positioner:WrappedHTMLElement;
+
+ COMPILE::JS
+ /**
+ * The HTMLElement used to position the component.
+ */
+ override public function get positioner():WrappedHTMLElement
+ {
+ return _positioner;
+ }
+
+ COMPILE::JS
+ /**
+ * @private
+ */
+ override public function set positioner(value:WrappedHTMLElement):void
+ {
+ _positioner = value;
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion HTMLDivElement
+ * @royaleignorecoercion HTMLInputElement
+ * @royaleignorecoercion HTMLLabelElement
+ * @royaleignorecoercion Text
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ typeNames = "TextField";
+
+ var div:HTMLDivElement = document.createElement('div') as HTMLDivElement;
+ div.className = typeNames;
+
+ input = addElementToWrapper(this,'input') as HTMLInputElement;
+ input.setAttribute('type', 'text');
+ input.className = "vTextField--input";
+
+ //attach input handler to dispatch royale change event when user write in textinput
+ //goog.events.listen(element, 'change', killChangeHandler);
+ goog.events.listen(input, 'input', textChangeHandler);
+
+ label = document.createElement('label') as HTMLLabelElement;
+ label.className = "vTextField--label";
+
+ textNode = document.createTextNode('') as Text;
+ label.appendChild(textNode);
+
+ div.appendChild(input);
+ div.appendChild(label);
+
+ positioner = div as WrappedHTMLElement;
+ (label as WrappedHTMLElement).royale_wrapper = this;
+ _positioner.royale_wrapper = this;
+
+ return element;
+ }
+
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/Disabled.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/Disabled.as
new file mode 100644
index 0000000..30429d6
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/Disabled.as
@@ -0,0 +1,107 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.UIBase;
+
+ /**
+ * The Disabled bead class is a specialty bead that can be used to disable a Jewel control.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public class Disabled implements IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function Disabled()
+ {
+ }
+
+ private var _disabled:Boolean = true;
+ /**
+ * A boolean flag to enable or disable the host control.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function get disabled():Boolean
+ {
+ return _disabled;
+ }
+ public function set disabled(value:Boolean):void
+ {
+ _disabled = value;
+
+ COMPILE::JS
+ {
+ updateHost();
+ }
+ }
+
+ private var _strand:IStrand;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ * @royaleignorecoercion HTMLInputElement
+ * @royaleignorecoercion org.apache.royale.core.UIBase;
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ var host:UIBase = value as UIBase;
+
+ COMPILE::JS
+ {
+ updateHost();
+ }
+ }
+
+ COMPILE::JS
+ private function updateHost():void
+ {
+ var host:UIBase = _strand as UIBase;
+
+ if (host)
+ {
+ _disabled ?
+ host.element.setAttribute('disabled', '') :
+ host.element.removeAttribute('disabled');
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/RadioButtonView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/RadioButtonView.as
new file mode 100644
index 0000000..984b7b5
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/RadioButtonView.as
@@ -0,0 +1,286 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads
+{
+ import flash.display.Shape;
+ import flash.display.SimpleButton;
+ import flash.display.Sprite;
+ import flash.text.TextFieldAutoSize;
+ import flash.text.TextFieldType;
+
+ import org.apache.royale.core.BeadViewBase;
+ import org.apache.royale.core.CSSTextField;
+ import org.apache.royale.core.IBeadView;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IValueToggleButtonModel;
+ import org.apache.royale.events.Event;
+
+ /**
+ * The RadioButtonView class creates the visual elements of the org.apache.royale.html.RadioButton
+ * component.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class RadioButtonView extends BeadViewBase implements IBeadView
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function RadioButtonView()
+ {
+ sprites = [ upSprite = new Sprite(),
+ downSprite = new Sprite(),
+ overSprite = new Sprite(),
+ upAndSelectedSprite = new Sprite(),
+ downAndSelectedSprite = new Sprite(),
+ overAndSelectedSprite = new Sprite() ];
+
+ for each( var s:Sprite in sprites )
+ {
+ var tf:CSSTextField = new CSSTextField();
+ tf.type = TextFieldType.DYNAMIC;
+ tf.autoSize = TextFieldAutoSize.LEFT;
+ tf.name = "textField";
+ var icon:Shape = new Shape();
+ icon.name = "icon";
+ s.addChild(icon);
+ s.addChild(tf);
+ }
+ }
+
+ private var upSprite:Sprite;
+ private var downSprite:Sprite;
+ private var overSprite:Sprite;
+ private var upAndSelectedSprite:Sprite;
+ private var downAndSelectedSprite:Sprite;
+ private var overAndSelectedSprite:Sprite;
+
+ private var sprites:Array;
+
+ private var _toggleButtonModel:IValueToggleButtonModel;
+
+ /**
+ * The model used for the RadioButton.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get toggleButtonModel() : IValueToggleButtonModel
+ {
+ return _toggleButtonModel;
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ _toggleButtonModel = value.getBeadByType(IValueToggleButtonModel) as IValueToggleButtonModel;
+ _toggleButtonModel.addEventListener("textChange", textChangeHandler);
+ _toggleButtonModel.addEventListener("htmlChange", htmlChangeHandler);
+ _toggleButtonModel.addEventListener("selectedValueChange", selectedValueChangeHandler);
+ if (_toggleButtonModel.text != null)
+ text = _toggleButtonModel.text;
+ if (_toggleButtonModel.html != null)
+ html = _toggleButtonModel.html;
+ for each( var s:Sprite in sprites )
+ {
+ var tf:CSSTextField = s.getChildByName("textField") as CSSTextField;
+ tf.styleParent = value;
+ }
+
+ layoutControl();
+
+ var hitArea:Shape = new Shape();
+ hitArea.graphics.beginFill(0x000000);
+ hitArea.graphics.drawRect(0,0,upSprite.width, upSprite.height);
+ hitArea.graphics.endFill();
+
+ SimpleButton(value).upState = upSprite;
+ SimpleButton(value).downState = downSprite;
+ SimpleButton(value).overState = overSprite;
+ SimpleButton(value).hitTestState = hitArea;
+
+ if (toggleButtonModel.text !== null)
+ text = toggleButtonModel.text;
+ if (toggleButtonModel.html !== null)
+ html = toggleButtonModel.html;
+
+ if (toggleButtonModel.selected && toggleButtonModel.value == value) {
+ selected = true;
+ }
+ }
+
+ /**
+ * The string label for the org.apache.royale.html.RadioButton.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get text():String
+ {
+ var tf:CSSTextField = upSprite.getChildByName('textField') as CSSTextField;
+ return tf.text;
+ }
+ public function set text(value:String):void
+ {
+ for each( var s:Sprite in sprites )
+ {
+ var tf:CSSTextField = s.getChildByName('textField') as CSSTextField;
+ tf.text = value;
+ }
+
+ layoutControl();
+ }
+
+ /**
+ * The HTML string for the org.apache.royale.html.RadioButton.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get html():String
+ {
+ var tf:CSSTextField = upSprite.getChildByName('textField') as CSSTextField;
+ return tf.htmlText;
+ }
+ public function set html(value:String):void
+ {
+ for each(var s:Sprite in sprites)
+ {
+ var tf:CSSTextField = s.getChildByName('textField') as CSSTextField;
+ tf.htmlText = value;
+ }
+
+ layoutControl();
+ }
+
+ /**
+ * @private
+ */
+ private function textChangeHandler(event:Event):void
+ {
+ text = toggleButtonModel.text;
+ }
+
+ /**
+ * @private
+ */
+ private function htmlChangeHandler(event:Event):void
+ {
+ html = toggleButtonModel.html;
+ }
+
+ private var _selected:Boolean;
+
+ /**
+ * The selection state of the RadioButton
+ */
+ public function get selected():Boolean
+ {
+ return _selected;
+ }
+ public function set selected(value:Boolean):void
+ {
+ _selected = value;
+
+ if( value ) {
+ SimpleButton(_strand).upState = upAndSelectedSprite;
+ SimpleButton(_strand).downState = downAndSelectedSprite;
+ SimpleButton(_strand).overState = overAndSelectedSprite;
+
+ } else {
+ SimpleButton(_strand).upState = upSprite;
+ SimpleButton(_strand).downState = downSprite;
+ SimpleButton(_strand).overState = overSprite;
+ }
+
+ layoutControl();
+ }
+
+ /**
+ * @private
+ */
+ private function selectedValueChangeHandler(event:Event):void
+ {
+ selected = _toggleButtonModel.value == _toggleButtonModel.selectedValue;
+ }
+
+ /**
+ * @private
+ */
+ protected function layoutControl() : void
+ {
+ for each(var s:Sprite in sprites)
+ {
+ var icon:Shape = s.getChildByName("icon") as Shape;
+ var tf:CSSTextField = s.getChildByName("textField") as CSSTextField;
+
+ drawRadioButton(icon);
+
+ var mh:Number = Math.max(icon.height,tf.height);
+
+ icon.x = 0;
+ icon.y = (mh - icon.height)/2;
+
+ tf.x = icon.x + icon.width + 1;
+ tf.y = (mh - tf.height)/2;
+ }
+
+ }
+
+ /**
+ * @private
+ */
+ protected function drawRadioButton(icon:Shape) : void
+ {
+ icon.graphics.clear();
+ icon.graphics.beginFill(0xf8f8f8);
+ icon.graphics.lineStyle(1,0x808080);
+ icon.graphics.drawEllipse(0,0,10,10);
+ icon.graphics.endFill();
+
+ if( selected ) {
+ icon.graphics.beginFill(0);
+ icon.graphics.drawEllipse(3,3,4,4);
+ icon.graphics.endFill();
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderThumbView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderThumbView.as
new file mode 100644
index 0000000..4df51c8
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderThumbView.as
@@ -0,0 +1,121 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads
+{
+ import flash.display.Graphics;
+ import flash.display.Shape;
+ import flash.display.SimpleButton;
+
+ import org.apache.royale.core.BeadViewBase;
+ import org.apache.royale.core.IBeadView;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.html.Button;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.core.IChild;
+
+ /**
+ * The SliderThumbView class creates the draggable input element for the
+ * org.apache.royale.html.Slider component.
+ *
+ * @viewbead
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class SliderThumbView extends BeadViewBase implements IBeadView
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function SliderThumbView()
+ {
+ hitArea = new Shape();
+ upView = new Shape();
+ downView = new Shape();
+ overView = new Shape();
+ }
+
+ /**
+ * @private
+ */
+ private function drawView(g:Graphics, bgColor:uint):void
+ {
+ var host:Button = Button(_strand);
+ var button:SimpleButton = IChild(_strand).$displayObject as SimpleButton;
+ g.clear();
+ g.lineStyle(1,0x000000);
+ g.beginFill(bgColor,1.0);
+ g.drawCircle(host.width/2, host.height/2, 10);
+ g.endFill();
+ }
+
+ private var hitArea:Shape;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ * @royaleignoreimport org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ drawView(hitArea.graphics, 0xDD0000);
+ drawView(upView.graphics, 0xFFFFFF);
+ drawView(downView.graphics, 0x999999);
+ drawView(overView.graphics, 0xDDDDDD);
+
+ var button:SimpleButton = IChild(value).$displayObject as SimpleButton;
+ button.upState = upView;
+ button.downState = downView;
+ button.overState = overView;
+ button.hitTestState = hitArea;
+
+ IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler);
+ IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler);
+ }
+
+ private var upView:Shape;
+ private var downView:Shape;
+ private var overView:Shape;
+
+ /**
+ * @private
+ */
+ private function sizeChangeHandler( event:Event ) : void
+ {
+ drawView(hitArea.graphics, 0xDD0000);
+ drawView(upView.graphics, 0xFFFFFF);
+ drawView(downView.graphics, 0x999999);
+ drawView(overView.graphics, 0xDDDDDD);
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderTrackView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderTrackView.as
new file mode 100644
index 0000000..a5e0410
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderTrackView.as
@@ -0,0 +1,121 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads
+{
+ import flash.display.Graphics;
+ import flash.display.Shape;
+ import flash.display.SimpleButton;
+
+ import org.apache.royale.core.BeadViewBase;
+ import org.apache.royale.core.IBeadView;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.html.Button;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.core.IChild;
+
+ /**
+ * The SliderTrackView class creates the track area for the org.apache.royale.html.Slider
+ * component.
+ *
+ * @viewbead
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class SliderTrackView extends BeadViewBase implements IBeadView
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function SliderTrackView()
+ {
+ hitArea = new Shape();
+ upView = new Shape();
+ downView = new Shape();
+ overView = new Shape();
+ }
+
+ /**
+ * @private
+ */
+ private function drawView(g:Graphics, bgColor:uint):void
+ {
+ var host:Button = Button(_strand);
+ var button:SimpleButton = IChild(_strand).$displayObject as SimpleButton;
+ g.clear();
+ g.lineStyle(1,0x000000);
+ g.beginFill(bgColor);
+ g.drawRect(0, 0, host.width, host.height);
+ g.endFill();
+ }
+
+ private var hitArea:Shape;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ drawView(hitArea.graphics, 0xDD0000);
+ drawView(upView.graphics, 0xCCCCCC);
+ drawView(downView.graphics, 0x808080);
+ drawView(overView.graphics, 0xEEEEEE);
+
+ var button:SimpleButton = IChild(value).$displayObject as SimpleButton;
+ button.upState = upView;
+ button.downState = downView;
+ button.overState = overView;
+ button.hitTestState = hitArea;
+
+ IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler);
+ IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler);
+ }
+
+ private var upView:Shape;
+ private var downView:Shape;
+ private var overView:Shape;
+
+ /**
+ * @private
+ */
+ private function sizeChangeHandler( event:Event ) : void
+ {
+ drawView(hitArea.graphics, 0xDD0000);
+ drawView(upView.graphics, 0xCCCCCC);
+ drawView(downView.graphics, 0x808080);
+ drawView(overView.graphics, 0xEEEEEE);
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderView.as
new file mode 100644
index 0000000..c62a3fc
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderView.as
@@ -0,0 +1,172 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads
+{
+ COMPILE::SWF {
+ import flash.display.DisplayObject;
+ import flash.display.Sprite;
+ }
+
+ import org.apache.royale.html.beads.ISliderView;
+ import org.apache.royale.core.BeadViewBase;
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IBeadLayout;
+ import org.apache.royale.core.IBeadModel;
+ import org.apache.royale.core.IBeadView;
+ import org.apache.royale.core.IRangeModel;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.html.Button;
+ import org.apache.royale.html.TextButton;
+
+ /**
+ * The SliderView class creates the visual elements of the org.apache.royale.html.Slider
+ * component. The Slider has a track and a thumb control which are also created with view beads.
+ *
+ * @viewbead
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class SliderView extends BeadViewBase implements ISliderView, IBeadView
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function SliderView()
+ {
+ }
+
+ private var rangeModel:IRangeModel;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ var layout:IBeadLayout = _strand.getBeadByType(IBeadLayout) as IBeadLayout;
+ if (layout == null) {
+ var klass:Class = ValuesManager.valuesImpl.getValue(_strand, "iBeadLayout");
+ _strand.addBead(new klass() as IBead);
+ }
+
+ COMPILE::SWF {
+ var s:UIBase = UIBase(_strand);
+
+ _track = new Button();
+ _track.addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iTrackView")) as IBead);
+ _track.className = "SliderTrack";
+ s.addElement(_track);
+
+ _thumb = new TextButton();
+ _thumb.text = '\u29BF';
+ _thumb.addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iThumbView")) as IBead);
+ _thumb.className = "SliderThumb";
+ s.addElement(_thumb);
+
+ }
+ COMPILE::JS {
+ _track = new Button();
+ _track.className = "SliderTrack";
+ host.addElement(_track);
+
+ _thumb = new TextButton();
+ _thumb.className = "SliderThumb";
+ _thumb.text = '\u29BF';
+ host.addElement(_thumb);
+ }
+
+ rangeModel = _strand.getBeadByType(IBeadModel) as IRangeModel;
+
+ var rm:IEventDispatcher = rangeModel as IEventDispatcher;
+
+ // listen for changes to the model and adjust the UI accordingly.
+ rm.addEventListener("valueChange",modelChangeHandler);
+ rm.addEventListener("minimumChange",modelChangeHandler);
+ rm.addEventListener("maximumChange",modelChangeHandler);
+ rm.addEventListener("stepSizeChange",modelChangeHandler);
+ rm.addEventListener("snapIntervalChange",modelChangeHandler);
+
+ (_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded"));
+ }
+
+ private var _track:Button;
+ private var _thumb:TextButton;
+
+
+ /**
+ * The track component.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get track():IUIBase
+ {
+ return _track;
+ }
+
+ /**
+ * The thumb component.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get thumb():IUIBase
+ {
+ return _thumb;
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ private function get host():UIBase
+ {
+ return _strand as UIBase;
+ }
+
+ /**
+ * @private
+ */
+ private function modelChangeHandler( event:Event ) : void
+ {
+ (_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded"));
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
new file mode 100644
index 0000000..16950a3
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
@@ -0,0 +1,196 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT 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.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.IStrand;
+ 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;
+ COMPILE::SWF {
+ import org.apache.royale.core.UIBase;
+ }
+ COMPILE::JS {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ /**
+ * The HorizontalLayout class is a simple layout
+ * bead. It takes the set of children and lays them out
+ * horizontally in one row, separating them according to
+ * CSS layout rules for margin and vertical-align styles.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class HorizontalLayout extends LayoutBase implements IBeadLayout
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function HorizontalLayout()
+ {
+ super();
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ * @royaleignorecoercion HTMLElement
+ * @royaleignorecoercion org.apache.royale.core.IUIBase
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ COMPILE::JS
+ {
+ var base:IUIBase = value as IUIBase;
+ if (base.element.style.display !== "none") {
+ base.element.style.display = "block";
+ }
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBeadLayout#layout
+ * @royaleignorecoercion org.apache.royale.core.ILayoutHost
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function layout():Boolean
+ {
+ COMPILE::SWF
+ {
+ var contentView:ILayoutView = layoutView;
+
+ var n:Number = contentView.numElements;
+ if (n == 0) return false;
+
+ var maxWidth:Number = 0;
+ var maxHeight:Number = 0;
+ var hostWidthSizedToContent:Boolean = host.isWidthSizedToContent();
+ var hostHeightSizedToContent:Boolean = host.isHeightSizedToContent();
+ var hostWidth:Number = host.width;
+ var hostHeight:Number = host.height;
+
+ var ilc:ILayoutChild;
+ var data:Object;
+ var canAdjust:Boolean = false;
+
+ var paddingMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getPaddingMetrics(host);
+ var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
+
+ // adjust the host's usable size by the metrics. If hostSizedToContent, then the
+ // resulting adjusted value may be less than zero.
+ hostWidth -= paddingMetrics.left + paddingMetrics.right + borderMetrics.left + borderMetrics.right;
+ hostHeight -= paddingMetrics.top + paddingMetrics.bottom + borderMetrics.top + borderMetrics.bottom;
+
+ var xpos:Number = borderMetrics.left + paddingMetrics.left;
+ var ypos:Number = borderMetrics.top + paddingMetrics.top;
+
+ // First pass determines the data about the child.
+ for(var i:int=0; i < n; i++)
+ {
+ var child:IUIBase = contentView.getElementAt(i) as IUIBase;
+ if (child == null || !child.visible) continue;
+ var positions:Object = childPositions(child);
+ var margins:Object = childMargins(child, hostWidth, hostHeight);
+
+ ilc = child as ILayoutChild;
+
+ xpos += margins.left;
+
+ var childYpos:Number = ypos + margins.top; // default y position
+
+ var childHeight:Number = child.height;
+ if (ilc != null && !isNaN(ilc.percentHeight)) {
+ childHeight = hostHeight * ilc.percentHeight/100.0;
+ ilc.setHeight(childHeight);
+ }
+ var valign:Object = ValuesManager.valuesImpl.getValue(child, "vertical-align");
+ if (valign == "middle")
+ {
+ childYpos = hostHeight/2 - (childHeight + margins.top + margins.bottom)/2;
+ }
+
+ if (ilc) {
+ ilc.setX(xpos);
+ ilc.setY(childYpos);
+
+ if (!isNaN(ilc.percentWidth)) {
+ var newWidth:Number = hostWidth * ilc.percentWidth / 100;
+ ilc.setWidth(newWidth);
+ }
+
+ } else {
+ child.x = xpos;
+ child.y = childYpos;
+ }
+
+ xpos += child.width + margins.right;
+ }
+
+ return true;
+
+ }
+ COMPILE::JS
+ {
+ var children:Array;
+ var i:int;
+ var n:int;
+ var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+ contentView.element.classList.add("layout parent"); //style["white-space"] = "nowrap";
+ children = contentView.internalChildren();
+
+ n = children.length;
+ for (i = 0; i < n; i++)
+ {
+ var child:WrappedHTMLElement = children[i] as WrappedHTMLElement;
+ if (child == null) continue;
+
+ child.classList.add("layout horizontal");
+
+ /*child.royale_wrapper.setDisplayStyleForLayout('inline-block');
+ if (child.style.display !== 'none')
+ {
+ child.style.display = 'inline-block';
+ }*/
+ }
+
+ return true;
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
new file mode 100644
index 0000000..fab6700
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
@@ -0,0 +1,193 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads.layouts
+{
+ import org.apache.royale.core.LayoutBase;
+
+ import org.apache.royale.core.IBeadLayout;
+ import org.apache.royale.core.IBeadModel;
+ import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+ import org.apache.royale.core.ILayoutChild;
+ import org.apache.royale.core.ILayoutHost;
+ import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.ILayoutParent;
+ import org.apache.royale.core.IParentIUIBase;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.layout.EdgeData;
+ import org.apache.royale.core.ValuesManager;
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.geom.Rectangle;
+ import org.apache.royale.utils.CSSUtils;
+
+ /**
+ * The VerticalLayout class is a simple layout
+ * bead. It takes the set of children and lays them out
+ * vertically in one column, separating them according to
+ * CSS layout rules for margin and horizontal-align styles.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class VerticalLayout extends LayoutBase implements IBeadLayout
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function VerticalLayout()
+ {
+ super();
+ }
+
+ /**
+ * Layout children vertically
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ * @royaleignorecoercion org.apache.royale.core.ILayoutHost
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function layout():Boolean
+ {
+ COMPILE::SWF
+ {
+ var contentView:ILayoutView = layoutView;
+
+ var n:Number = contentView.numElements;
+ if (n == 0) return false;
+
+ var maxWidth:Number = 0;
+ var maxHeight:Number = 0;
+ var hostWidthSizedToContent:Boolean = host.isWidthSizedToContent();
+ var hostHeightSizedToContent:Boolean = host.isHeightSizedToContent();
+ var hostWidth:Number = host.width;
+ var hostHeight:Number = host.height;
+
+ var ilc:ILayoutChild;
+ var data:Object;
+ var canAdjust:Boolean = false;
+
+ var paddingMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getPaddingMetrics(host);
+ var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
+
+ // adjust the host's usable size by the metrics. If hostSizedToContent, then the
+ // resulting adjusted value may be less than zero.
+ hostWidth -= paddingMetrics.left + paddingMetrics.right + borderMetrics.left + borderMetrics.right;
+ hostHeight -= paddingMetrics.top + paddingMetrics.bottom + borderMetrics.top + borderMetrics.bottom;
+
+ var xpos:Number = borderMetrics.left + paddingMetrics.left;
+ var ypos:Number = borderMetrics.top + paddingMetrics.top;
+
+ // First pass determines the data about the child.
+ for(var i:int=0; i < n; i++)
+ {
+ var child:IUIBase = contentView.getElementAt(i) as IUIBase;
+ if (child == null || !child.visible) continue;
+ var positions:Object = childPositions(child);
+ var margins:Object = childMargins(child, hostWidth, hostHeight);
+
+ ilc = child as ILayoutChild;
+
+ ypos += margins.top;
+
+ var childXpos:Number = xpos + margins.left; // default x position
+
+ var childWidth:Number = child.width;
+ if (ilc != null && !isNaN(ilc.percentWidth)) {
+ childWidth = hostWidth * ilc.percentWidth/100.0;
+ ilc.setWidth(childWidth);
+ }
+ else if (ilc.isWidthSizedToContent() && !margins.auto)
+ {
+ childWidth = hostWidth;
+ ilc.setWidth(childWidth);
+ }
+ if (margins.auto)
+ childXpos = (hostWidth - childWidth) / 2;
+
+ if (ilc) {
+ ilc.setX(childXpos);
+ ilc.setY(ypos);
+
+ if (!isNaN(ilc.percentHeight)) {
+ var newHeight:Number = hostHeight * ilc.percentHeight / 100;
+ ilc.setHeight(newHeight);
+ }
+
+ } else {
+ child.x = childXpos;
+ child.y = ypos;
+ }
+
+ ypos += child.height + margins.bottom;
+ }
+
+ return true;
+ }
+ COMPILE::JS
+ {
+ var children:Array;
+ var i:int;
+ var n:int;
+ var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+ contentView.element.classList.add("layout parent");//style["vertical-align"] = "top";
+
+ children = contentView.internalChildren();
+ n = children.length;
+ for (i = 0; i < n; i++)
+ {
+ var child:WrappedHTMLElement = children[i] as WrappedHTMLElement;
+ if (child == null) continue;
+
+ child.classList.add("layout vertical");
+
+ /*child.royale_wrapper.setDisplayStyleForLayout('block');
+ if (child.style.display === 'none')
+ {
+ child.royale_wrapper.setDisplayStyleForLayout('block');
+ }
+ else
+ {
+ // block elements don't measure width correctly so set to inline for a second
+ child.style.display = 'inline-block';
+ child.style.display = 'block';
+ }*/
+ child.royale_wrapper.dispatchEvent('sizeChanged');
+ }
+
+ return true;
+ }
+ }
+
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
new file mode 100644
index 0000000..f941993
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
@@ -0,0 +1,341 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads.layouts
+{
+ import org.apache.royale.core.LayoutBase;
+
+ import org.apache.royale.core.IBeadLayout;
+ import org.apache.royale.core.IBeadModel;
+ import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+ import org.apache.royale.core.ILayoutChild;
+ import org.apache.royale.core.ILayoutHost;
+ import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.ILayoutParent;
+ import org.apache.royale.core.IParentIUIBase;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.layout.EdgeData;
+ import org.apache.royale.core.ValuesManager;
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.geom.Rectangle;
+ import org.apache.royale.utils.CSSUtils;
+
+ /**
+ * The VerticalLayoutWithPaddingAndGap class is a simple layout
+ * bead similar to VerticalLayout, but it adds support for
+ * padding and gap values.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class VerticalLayoutWithPaddingAndGap extends LayoutBase implements IBeadLayout
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function VerticalLayoutWithPaddingAndGap()
+ {
+ super();
+ }
+
+ /**
+ * @private
+ */
+ private var _paddingTop:Number = 0;
+
+ /**
+ * The top padding value.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get paddingTop():Number
+ {
+ return _paddingTop;
+ }
+
+ /**
+ * @private
+ */
+ public function set paddingTop(value:Number):void
+ {
+ _paddingTop = value;
+ }
+
+ /**
+ * @private
+ */
+ private var _paddingRight:Number = 0;
+
+ /**
+ * The right padding value.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get paddingRight():Number
+ {
+ return _paddingRight;
+ }
+
+ /**
+ * @private
+ */
+ public function set paddingRight(value:Number):void
+ {
+ _paddingRight = value;
+ }
+
+ /**
+ * @private
+ */
+ private var _paddingBottom:Number = 0;
+
+ /**
+ * The top padding value.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get paddingBottom():Number
+ {
+ return _paddingBottom;
+ }
+
+ /**
+ * @private
+ */
+ public function set paddingBottom(value:Number):void
+ {
+ _paddingBottom = value;
+ }
+
+ /**
+ * @private
+ */
+ private var _paddingLeft:Number = 0;
+
+ /**
+ * The left padding value.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get paddingLeft():Number
+ {
+ return _paddingLeft;
+ }
+
+ /**
+ * @private
+ */
+ public function set paddingLeft(value:Number):void
+ {
+ _paddingLeft = value;
+ }
+
+ /**
+ * @private
+ */
+ private var _gap:Number = 0;
+
+ /**
+ * The gap between items.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get gap():Number
+ {
+ return _gap;
+ }
+
+ /**
+ * @private
+ */
+ public function set gap(value:Number):void
+ {
+ _gap = value;
+ }
+
+ /**
+ * Layout children vertically
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ * @royaleignorecoercion org.apache.royale.core.ILayoutHost
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override public function layout():Boolean
+ {
+ COMPILE::SWF
+ {
+ var contentView:ILayoutView = layoutView;
+
+ var n:Number = contentView.numElements;
+ if (n == 0) return false;
+
+ var maxWidth:Number = 0;
+ var maxHeight:Number = 0;
+ var hostWidthSizedToContent:Boolean = host.isWidthSizedToContent();
+ var hostHeightSizedToContent:Boolean = host.isHeightSizedToContent();
+ var hostWidth:Number = hostWidthSizedToContent ? 0 : contentView.width;
+ var hostHeight:Number = hostHeightSizedToContent ? 0 : contentView.height;
+
+ var ilc:ILayoutChild;
+ var data:Object;
+ var canAdjust:Boolean = false;
+
+ var paddingMetrics:EdgeData = new EdgeData();
+ paddingMetrics.left = _paddingLeft;
+ paddingMetrics.top = _paddingTop;
+ paddingMetrics.right = _paddingRight;
+ paddingMetrics.bottom = _paddingBottom;
+ var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
+
+ // adjust the host's usable size by the metrics. If hostSizedToContent, then the
+ // resulting adjusted value may be less than zero.
+ hostWidth -= paddingMetrics.left + paddingMetrics.right + borderMetrics.left + borderMetrics.right;
+ hostHeight -= paddingMetrics.top + paddingMetrics.bottom + borderMetrics.top + borderMetrics.bottom;
+
+ var xpos:Number = borderMetrics.left + paddingMetrics.left;
+ var ypos:Number = borderMetrics.top + paddingMetrics.top;
+
+ // First pass determines the data about the child.
+ for(var i:int=0; i < n; i++)
+ {
+ var child:IUIBase = contentView.getElementAt(i) as IUIBase;
+ if (child == null || !child.visible) continue;
+ var positions:Object = childPositions(child);
+
+ ilc = child as ILayoutChild;
+
+ var childXpos:Number = xpos; // default x position
+
+ if (!hostWidthSizedToContent) {
+ var childWidth:Number = child.width;
+ if (ilc != null && !isNaN(ilc.percentWidth)) {
+ childWidth = hostWidth * ilc.percentWidth/100.0;
+ ilc.setWidth(childWidth);
+ }
+ // the following code center-aligns the child, but since HTML does not
+ // do this normally, this code is commented. (Use VerticalFlexLayout for
+ // horizontally centered elements in a vertical column).
+ // childXpos = hostWidth/2 - (childWidth + ml + mr)/2;
+ }
+
+ if (ilc) {
+ ilc.setX(childXpos);
+ ilc.setY(ypos);
+
+ if (!hostHeightSizedToContent && !isNaN(ilc.percentHeight)) {
+ var newHeight:Number = hostHeight * ilc.percentHeight / 100;
+ ilc.setHeight(newHeight);
+ }
+
+ } else {
+ child.x = childXpos;
+ child.y = ypos;
+ }
+
+ ypos += child.height + _gap;
+ }
+
+ return true;
+ }
+ COMPILE::JS
+ {
+ var children:Array;
+ var i:int;
+ var n:int;
+ var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+ contentView.element.style["vertical-align"] = "top";
+
+ children = contentView.internalChildren();
+ n = children.length;
+ for (i = 0; i < n; i++)
+ {
+ var child:WrappedHTMLElement = children[i];
+
+ child.className += " vertical-layout-padding-gap";
+
+
+ /*if(i == 0)
+ {
+ child.style.marginTop = _paddingTop + 'px';
+ }
+ else
+ {
+ child.style.marginTop = _gap + 'px';
+ }
+ child.style.marginRight = _paddingRight + 'px';
+ if(i === (n - 1))
+ {
+ child.style.marginBottom = _paddingBottom + 'px';
+ }
+ else
+ {
+ child.style.marginBottom = '0px';
+ }
+ child.style.marginLeft = _paddingLeft + 'px';
+ child.royale_wrapper.setDisplayStyleForLayout('block');
+ if (child.style.display === 'none')
+ {
+ child.royale_wrapper.setDisplayStyleForLayout('block');
+ }
+ else
+ {
+ // block elements don't measure width correctly so set to inline for a second
+ child.style.display = 'inline-block';
+ child.style.display = 'block';
+ }
+ */
+ child.royale_wrapper.dispatchEvent('sizeChanged');
+ }
+
+ return true;
+ }
+ }
+
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/ITextField.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/ITextField.as
new file mode 100644
index 0000000..e1ed050
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/ITextField.as
@@ -0,0 +1,68 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.supportClasses
+{
+ /**
+ * ITextField is the interface that all text jewel classes.
+ * It's used mainly in org.apache.royale.jewel.supportClasses.TextFieldBase
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 9.2
+ */
+ public interface ITextField
+ {
+ COMPILE::JS
+ {
+ /**
+ * the textNode
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ function get textNode():Text;
+ function set textNode(value:Text):void;
+
+ /**
+ * the input
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ function get input():HTMLInputElement;
+ function set input(value:HTMLInputElement):void;
+
+ /**
+ * the label
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ function get label():HTMLLabelElement;
+ function set label(value:HTMLLabelElement):void;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/RadioButtonIcon.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/RadioButtonIcon.as
new file mode 100644
index 0000000..4d71794
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/RadioButtonIcon.as
@@ -0,0 +1,117 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.supportClasses
+{
+ COMPILE::JS {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ /**
+ * The RadioButton class is a component that displays a selectable Button. RadioButtons
+ * are typically used in groups, identified by the groupName property. RadioButton use
+ * the following beads:
+ *
+ * org.apache.royale.core.IBeadModel: the data model, which includes the groupName.
+ * org.apache.royale.core.IBeadView: the bead that constructs the visual parts of the RadioButton..
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class RadioButtonIcon
+ {
+ public function RadioButtonIcon()
+ {
+ COMPILE::JS {
+ createElement();
+ }
+
+ className = 'RadioButtonIcon';
+ }
+
+ /**
+ * @private
+ *
+ * @royalesuppresspublicvarwarning
+ */
+ COMPILE::JS
+ public var element:WrappedHTMLElement;
+
+ COMPILE::JS
+ public function get positioner():WrappedHTMLElement
+ {
+ return element;
+ }
+
+ private var _className:String;
+
+ /**
+ * @private
+ */
+ public function get className():String
+ {
+ return _className;
+ }
+ public function set className(value:String):void
+ {
+ _className = value;
+
+ COMPILE::JS {
+ element.className = value;
+ }
+ }
+
+ private var _id:String;
+
+ /**
+ * @private
+ */
+ public function get id():String
+ {
+ return _id;
+ }
+ public function set id(value:String):void
+ {
+ _id = value;
+
+ COMPILE::JS {
+ element.id = value;
+ }
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion HTMLInputElement
+ * @royaleignorecoercion Text
+ */
+ COMPILE::JS
+ protected function createElement():WrappedHTMLElement
+ {
+ //This class does not subclass anything, so these properties must be set explicitly
+ var input:HTMLInputElement = document.createElement('input') as HTMLInputElement;
+ input.type = 'radio';
+
+ element = input as WrappedHTMLElement;
+ element.royale_wrapper = this;
+
+ return element;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
new file mode 100644
index 0000000..5cb5924
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
@@ -0,0 +1,154 @@
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.supportClasses
+{
+ import org.apache.royale.events.Event;
+ import org.apache.royale.html.TextInput;
+
+ import org.apache.royale.jewel.supportClasses.ITextField;
+
+ COMPILE::JS
+ {
+ import goog.events;
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ /**
+ * The TextFieldBase class is the base class for TextField and TextArea Jewel controls
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public class TextFieldBase extends TextInput implements ITextField
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function TextFieldBase()
+ {
+ super();
+ }
+
+ COMPILE::JS
+ {
+ private var _textNode:Text;
+ /**
+ * @copy org.apache.royale.jewel.supportClasses.ITextField#textNode
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function get textNode():Text
+ {
+ return _textNode;
+ }
+
+ public function set textNode(value:Text):void
+ {
+ _textNode = value;
+ }
+
+ private var _input:HTMLInputElement;
+ /**
+ * @copy org.apache.royale.jewel.supportClasses.ITextField#input
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function get input():HTMLInputElement
+ {
+ return _input;
+ }
+
+ public function set input(value:HTMLInputElement):void
+ {
+ _input = value;
+ }
+
+ private var _label:HTMLLabelElement;
+ /**
+ * @copy org.apache.royale.jewel.supportClasses.ITextField#label
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function get label():HTMLLabelElement
+ {
+ return _label;
+ }
+
+ public function set label(value:HTMLLabelElement):void
+ {
+ _label = value;
+ }
+ }
+
+ COMPILE::JS
+ /**
+ * override UIBase to affect positioner instead of element
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ override protected function setClassName(value:String):void
+ {
+ positioner.className = value;
+ }
+
+ private var _isInvalid:Boolean = false;
+ /**
+ * A boolean flag to activate "is-invalid" effect selector.
+ * Defines the textfield as invalid on initial load.
+ * Optional
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function get isInvalid():Boolean
+ {
+ return _isInvalid;
+ }
+ public function set isInvalid(value:Boolean):void
+ {
+ _isInvalid = value;
+
+ COMPILE::JS
+ {
+ positioner.classList.toggle("is-invalid", _isInvalid);
+ typeNames = positioner.className;
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/_global.sass
new file mode 100644
index 0000000..b98f623
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -0,0 +1,66 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+@namespace "library://ns.apache.org/royale/jewel"
+
+.layout
+ .horizontal
+ white-space: nowrap
+ .vertical
+ display: block !important
+
+
+/**
+ * Jewel TextField
+ */
+TextField
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel")
+ //IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView");
+ //IBeadController: ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController");
+
+.vTextField--input
+.vTextField--label
+
+/**
+ * Jewel Slider
+ */
+Slider
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel")
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView")
+ IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout")
+ IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController")
+ position: relative
+
+.SliderTrack
+ position: absolute
+
+.SliderThumb
+ position: absolute
+ border-radius: 15px
+
+@media -royale-swf
+ Slider
+ iThumbView: ClassReference("org.apache.royale.jewel.beads.SliderThumbView")
+ iTrackView: ClassReference("org.apache.royale.jewel.beads.SliderTrackView")
+
+RadioButton
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel")
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView")
+ //font-size: 11px
+ //font-family: Arial
diff --git a/frameworks/projects/Jewel/src/main/sass/jewel.sass b/frameworks/projects/Jewel/src/main/sass/jewel.sass
new file mode 100644
index 0000000..598c490
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/jewel.sass
@@ -0,0 +1,35 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Variables
+//import "variables"
+//import "mixins"
+//import "functions"
+
+// Global
+@import "global"
+
+// Components
+
+// Button
+//import "button"
+
+// TextButton
+//import "textbutton"
+
+// TextField
+//import "textfield"
\ No newline at end of file
diff --git a/frameworks/projects/pom.xml b/frameworks/projects/pom.xml
index 4a548f3..6545709 100644
--- a/frameworks/projects/pom.xml
+++ b/frameworks/projects/pom.xml
@@ -60,6 +60,7 @@
<module>Text</module>
<module>TLF</module>
<module>RoyaleSite</module>
+ <module>Jewel</module>
</modules>
<profiles>
diff --git a/frameworks/themes/JewelTheme/.vscode/launch.json b/frameworks/themes/JewelTheme/.vscode/launch.json
new file mode 100644
index 0000000..5dfb672
--- /dev/null
+++ b/frameworks/themes/JewelTheme/.vscode/launch.json
@@ -0,0 +1,21 @@
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Launch Chrome against debug.html, with sourcemaps",
+ "type": "chrome",
+ "request": "launch",
+ "file": "${workspaceRoot}/target/javascript/bin/js-debug/index.html",
+ "sourceMaps": true,
+ "preLaunchTask": "mvn"
+ },
+ {
+ "name": "Launch Firefox against debug.html, with sourcemaps",
+ "type": "firefox",
+ "request": "launch",
+ "file": "${workspaceRoot}/target/javascript/bin/js-debug/index.html",
+ "sourceMaps": true,
+ "preLaunchTask": "mvn"
+ }
+ ]
+}
diff --git a/frameworks/themes/JewelTheme/.vscode/settings.json b/frameworks/themes/JewelTheme/.vscode/settings.json
new file mode 100644
index 0000000..1f5a970
--- /dev/null
+++ b/frameworks/themes/JewelTheme/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "nextgenas.sdk.framework": "/Users/carlosrovira/Dev/Royale/Sdks/apache-royale-0.9.2-SNAPSHOT"
+}
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/.vscode/tasks.json b/frameworks/themes/JewelTheme/.vscode/tasks.json
new file mode 100644
index 0000000..5d6198d
--- /dev/null
+++ b/frameworks/themes/JewelTheme/.vscode/tasks.json
@@ -0,0 +1,8 @@
+{
+ // for the documentation about the tasks.json format
+ "version": "0.1.0",
+ "command": "mvn",
+ "args": ["clean", "install", "-DskipTests"],
+ "isShellCommand": true,
+ "showOutput": "always"
+}
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/asconfig.json b/frameworks/themes/JewelTheme/asconfig.json
new file mode 100644
index 0000000..1cb76c0
--- /dev/null
+++ b/frameworks/themes/JewelTheme/asconfig.json
@@ -0,0 +1,34 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ {
+ "config": "royale",
+ "type": "lib",
+ "compilerOptions": {
+ "debug": true,
+ "targets": [
+ "JSRoyale",
+ "SWF"
+ ],
+ "include-classes": [
+ "JewelThemeClasses"
+ ],
+ "include-sources": [
+ "src/main/royale"
+ ],
+ "output": "target/JewelTheme.swc"
+ }
+}
diff --git a/frameworks/themes/JewelTheme/build.xml b/frameworks/themes/JewelTheme/build.xml
new file mode 100644
index 0000000..6174e3e
--- /dev/null
+++ b/frameworks/themes/JewelTheme/build.xml
@@ -0,0 +1,133 @@
+<?xml version="1.0"?>
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+
+<project name="JewelTheme" default="main" basedir=".">
+ <property name="ROYALE_HOME" location="../../.."/>
+
+ <property file="${ROYALE_HOME}/env.properties"/>
+ <property environment="env"/>
+ <property file="${ROYALE_HOME}/build.properties"/>
+ <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+
+ <property name="target.name" value="${ant.project.name}.swc" />
+
+ <!-- doesn't contain compiled files so only need to compile JS version -->
+ <target name="main" depends="clean,check-compiler,compile,compile-js,copy-swc,test" description="Full build of ${ant.project.name}.swc">
+ </target>
+
+ <target name="compile-js">
+ <!-- doesn't contain compiled files so only need to compile JS version
+ <ant dir="${ROYALE_HOME}/frameworks/js/projects/${ant.project.name}JS/" inheritAll="false" >
+ <property name="ROYALE_SWF_COMPILER_HOME" value="${ROYALE_SWF_COMPILER_HOME}"/>
+ <property name="ROYALE_COMPILER_HOME" value="${ROYALE_COMPILER_HOME}"/>
+ <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+ </ant>
+ -->
+ </target>
+
+ <target name="copy-swc" if="env.AIR_HOME">
+ <copy file="${basedir}/target/${target.name}" tofile="${ROYALE_HOME}/frameworks/libs/${target.name}" />
+ </target>
+
+ <target name="check-for-tests" >
+ <condition property="skip-tests" >
+ <not>
+ <available file="${basedir}/src/test/royale/build.xml" />
+ </not>
+ </condition>
+ </target>
+
+ <target name="test" depends="check-for-tests" unless="skip-tests">
+ <ant dir="src/test/royale" />
+ </target>
+
+ <target name="clean">
+ <delete failonerror="false">
+ <fileset dir="${ROYALE_HOME}/frameworks/libs">
+ <include name="${target.name}"/>
+ </fileset>
+ </delete>
+ <delete failonerror="false" includeemptydirs="true">
+ <fileset dir="${basedir}/target">
+ <include name="**/**"/>
+ </fileset>
+ </delete>
+ <antcall target="clean-tests" />
+ </target>
+
+ <target name="clean-tests" depends="check-for-tests" unless="skip-tests">
+ <ant dir="src/test/royale" target="clean"/>
+ </target>
+
+ <target name="compile" description="Compiles .as files into .swc" if="env.AIR_HOME">
+ <echo message="Compiling libs/${ant.project.name}.swc"/>
+ <echo message="ROYALE_HOME: ${ROYALE_HOME}"/>
+ <echo message="ROYALE_SWF_COMPILER_HOME: ${ROYALE_SWF_COMPILER_HOME}"/>
+ <echo message="ROYALE_COMPILER_HOME: ${ROYALE_COMPILER_HOME}"/>
+
+ <java jar="${ROYALE_COMPILER_HOME}/lib/compc.jar" fork="true" >
+ <jvmarg value="-Xmx384m" />
+ <jvmarg value="-Dsun.io.useCanonCaches=false" />
+ <jvmarg value="-Droyalelib=${ROYALE_HOME}/frameworks" />
+ <arg value="+royalelib=${ROYALE_HOME}/frameworks" />
+ <arg value="+playerglobal.version=${playerglobal.version}" />
+ <arg value="+env.AIR_HOME=${env.AIR_HOME}" />
+ <arg value="-compiler.strict-xml=true" />
+ <arg value="-compiler.targets=SWF" />
+ <arg value="-output=${basedir}/target/${target.name}" />
+ <arg value="-load-config=${basedir}/src/main/config/compile-swf-config.xml" />
+ <arg value="-js-load-config=${ROYALE_HOME}/frameworks/js-config.xml" />
+ <arg value="-js-load-config+=${basedir}/../../js/projects/${ant.project.name}JS/src/main/config/compile-js-config.xml" />
+ </java>
+ </target>
+
+ <target name="check-compiler" depends="check-compiler-home,check-transpiler-home">
+ <path id="lib.path">
+ <fileset dir="${ROYALE_COMPILER_HOME}/lib" includes="compiler-royaleTasks.jar"/>
+ </path>
+ <taskdef resource="flexTasks.tasks" classpathref="lib.path"/>
+ </target>
+
+ <target name="check-compiler-home"
+ description="Set ROYALE_SWF_COMPILER_HOME to point at the compiler.">
+
+ <available file="${ROYALE_HOME}/lib/compiler-mxmlc.jar"
+ type="file"
+ property="ROYALE_SWF_COMPILER_HOME"
+ value="${ROYALE_HOME}"/>
+
+ <fail message="ROYALE_SWF_COMPILER_HOME must be set to a folder with a lib sub-folder containing compiler-mxmlc.jar such as the compiler folder in royale-compiler repo or the root of a Royale SDK"
+ unless="ROYALE_SWF_COMPILER_HOME"/>
+ </target>
+
+ <target name="check-transpiler-home"
+ description="Set ROYALE_COMPILER_HOME to point at the cross-compiler.">
+
+ <available file="${ROYALE_HOME}/js/lib/jsc.jar"
+ type="file"
+ property="ROYALE_COMPILER_HOME"
+ value="${ROYALE_HOME}/js"/>
+
+ <fail message="ROYALE_COMPILER_HOME must be set to a folder with a lib sub-folder containing jsc.jar such as the compiler-jx folder in royale-compiler repo or the js folder of a Royale SDK"
+ unless="ROYALE_COMPILER_HOME"/>
+ </target>
+
+</project>
diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml
new file mode 100644
index 0000000..055a04d
--- /dev/null
+++ b/frameworks/themes/JewelTheme/pom.xml
@@ -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.
+
+-->
+<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>JewelTheme</artifactId>
+ <version>0.9.3-SNAPSHOT</version>
+ <packaging>swc</packaging>
+
+ <name>Apache Royale: Framework: Themes: JewelTheme</name>
+
+ <build>
+ <sourceDirectory>src/main/royale</sourceDirectory>
+ <plugins>
+ <plugin>
+ <groupId>org.apache.royale.compiler</groupId>
+ <artifactId>royale-maven-plugin</artifactId>
+ <version>${royale.compiler.version}</version>
+ <extensions>true</extensions>
+ <configuration>
+ <includeClasses>
+ <includeClass>JewelThemeClasses</includeClass>
+ </includeClasses>
+ <includeFiles>
+ <include-file>
+ <name>assets/*</name>
+ <path>../src/main/resources/assets/*</path>
+ </include-file>
+ <include-file>
+ <name>royale-jewel-blue.css</name>
+ <path>../src/main/resources/royale-jewel-blue.css</path>
+ </include-file>
+ </includeFiles>
+ </configuration>
+ </plugin>
+ <plugin>
+ <groupId>nl.geodienstencentrum.maven</groupId>
+ <artifactId>sass-maven-plugin</artifactId>
+ <version>3.5.2</version>
+ <configuration>
+ <resources>
+ <resource>
+ <source>
+ <directory>${basedir}/src/main/sass</directory>
+ <includes>
+ <include>**/*.sass</include>
+ </includes>
+ </source>
+ <destination>${basedir}/src/main/resources</destination>
+ </resource>
+ </resources>
+ </configuration>
+ <executions>
+ <execution>
+ <id>generate-css-using-sass</id>
+ <goals>
+ <goal>update-stylesheets</goal>
+ </goals>
+ </execution>
+ </executions>
+ </plugin>
+ </plugins>
+ </build>
+
+</project>
diff --git a/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml b/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml
new file mode 100644
index 0000000..bb3e613
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml
@@ -0,0 +1,90 @@
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<royale-config>
+
+ <compiler>
+ <accessible>false</accessible>
+
+ <!-- build both SWF and JS. -->
+ <targets>
+ <target>JSRoyale</target>
+ </targets>
+ <strict-xml>true</strict-xml>
+
+ <external-library-path>
+ <path-element>${env.AIR_HOME}/frameworks/libs/air/airglobal.swc</path-element>
+ <path-element>../../../../../libs/Binding.swc</path-element>
+ <path-element>../../../../../libs/Core.swc</path-element>
+ <path-element>../../../../../libs/Graphics.swc</path-element>
+ <path-element>../../../../../libs/Basic.swc</path-element>
+ <path-element>../../../../../libs/Collections.swc</path-element>
+ <path-element>../../../../../libs/HTML.swc</path-element>
+ </external-library-path>
+
+ <allow-subclass-overrides>true</allow-subclass-overrides>
+ <mxml>
+ <children-as-data>true</children-as-data>
+ </mxml>
+ <binding-value-change-event>org.apache.royale.events.ValueChangeEvent</binding-value-change-event>
+ <binding-value-change-event-kind>org.apache.royale.events.ValueChangeEvent</binding-value-change-event-kind>
+ <binding-value-change-event-type>valueChange</binding-value-change-event-type>
+
+ <define>
+ <name>COMPILE::SWF</name>
+ <value>true</value>
+ </define>
+ <define>
+ <name>COMPILE::JS</name>
+ <value>true</value>
+ </define>
+
+ <keep-as3-metadata>
+ <name>Bindable</name>
+ <name>Managed</name>
+ <name>ChangeEvent</name>
+ <name>NonCommittingChangeEvent</name>
+ <name>Transient</name>
+ </keep-as3-metadata>
+
+ <locale/>
+
+ <library-path/>
+
+ <source-path>
+ <path-element>../royale</path-element>
+ </source-path>
+
+ <warn-no-constructor>false</warn-no-constructor>
+ </compiler>
+
+ <include-file>
+ <name>defaults.css</name>
+ <path>../resources/defaults.css</path>
+ </include-file>
+
+ <include-lookup-only>true</include-lookup-only>
+
+ <include-classes>
+ <class>JewelThemeClasses</class>
+ </include-classes>
+
+ <target-player>${playerglobal.version}</target-player>
+
+
+</royale-config>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/assets/JewelButton2.svg b/frameworks/themes/JewelTheme/src/main/resources/assets/JewelButton2.svg
new file mode 100644
index 0000000..ad0c128
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/assets/JewelButton2.svg
@@ -0,0 +1,44 @@
+
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+<svg width="152px" height="42px" viewBox="0 0 152 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <linearGradient x1="50%" y1="3.10307717%" x2="50%" y2="98.2081246%" id="linearGradient-1">
+ <stop stop-color="#3BB0FF" offset="0%"></stop>
+ <stop stop-color="#1E36FA" offset="100%"></stop>
+ </linearGradient>
+ <rect id="path-2" x="0" y="0" width="150" height="40" rx="3"></rect>
+ <linearGradient x1="50%" y1="0%" x2="50%" y2="98.2362085%" id="linearGradient-3">
+ <stop stop-color="#8EDEFF" offset="0%"></stop>
+ <stop stop-color="#1D89E6" offset="100%"></stop>
+ </linearGradient>
+ </defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="JewelButton">
+ <g id="Background" transform="translate(1.000000, 1.000000)">
+ <g>
+ <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
+ <rect stroke="#244084" stroke-width="1" x="-0.5" y="-0.5" width="151" height="41" rx="3"></rect>
+ </g>
+ <rect stroke="url(#linearGradient-3)" x="0.5" y="0.5" width="149" height="39" rx="3"></rect>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/assets/jewel-button.svg b/frameworks/themes/JewelTheme/src/main/resources/assets/jewel-button.svg
new file mode 100644
index 0000000..63bfc72
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/assets/jewel-button.svg
@@ -0,0 +1,37 @@
+
+
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<svg viewBox="0 0 126 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <rect id="path-1" x="0" y="0" width="126" height="48" rx="4"></rect>
+ </defs>
+ <g id="Jewel" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="button/large">
+ <mask id="mask-2" fill="white">
+ <use xlink:href="#path-1"></use>
+ </mask>
+ <use id="mask" fill="#009EF5" fill-rule="evenodd" xlink:href="#path-1"></use>
+ <g id="colors/primary" mask="url(#mask-2)" fill="#006CEB" fill-rule="evenodd">
+ <rect x="0" y="0" width="126" height="48"></rect>
+ </g>
+ <text id="CTA" mask="url(#mask-2)" font-family="Lato-Bold, Lato" font-size="18" font-weight="bold" line-spacing="24" letter-spacing="-0.225000009"></text>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
new file mode 100644
index 0000000..e642ce7
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
@@ -0,0 +1,263 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@namespace j "library://ns.apache.org/royale/jewel";
+@namespace "http://www.w3.org/1999/xhtml";
+.royale *, .royale *:before, .royale *:after {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.royale {
+ padding: 10px;
+ margin: 10px;
+}
+
+/**
+ * Jewel Button
+ */
+.jewel.button, .jewel.button:hover, .jewel.textbutton, .jewel.textbutton:hover {
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 10px 16px;
+ min-width: 74px;
+ min-height: 34px;
+ /* Background: */
+ border: none;
+ border-radius: 3px;
+}
+
+.jewel.button {
+ background-color: rgba(0, 0, 0, 0.3);
+ transition-duration: 0.4s;
+ color: rgba(0, 0, 0, 0.4);
+}
+.jewel.button:hover {
+ background-color: rgba(15, 15, 15, 0.3);
+}
+.jewel.button:active {
+ background-color: rgba(0, 0, 0, 0.3);
+}
+.jewel.button:focus {
+ outline: 0;
+}
+.jewel.button[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.button.primary {
+ background-color: #006CEB;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.button.primary:hover {
+ background-color: #0b7bff;
+}
+.jewel.button.primary:active {
+ background-color: #005ecc;
+}
+.jewel.button.primary:focus {
+ outline: 0;
+}
+.jewel.button.primary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.button.secondary {
+ background-color: #011833;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.button.secondary:hover {
+ background-color: #022651;
+}
+.jewel.button.secondary:active {
+ background-color: #000a15;
+}
+.jewel.button.secondary:focus {
+ outline: 0;
+}
+.jewel.button.secondary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.button.emphasized {
+ background-color: #1FD348;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.button.emphasized:hover {
+ background-color: #30e158;
+}
+.jewel.button.emphasized:active {
+ background-color: #1bb83f;
+}
+.jewel.button.emphasized:focus {
+ outline: 0;
+}
+.jewel.button.emphasized[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+/**
+ * Jewel TextButton
+ */
+.jewel.textbutton, .jewel.textbutton:hover {
+ /* TextField */
+ font-family: "Lato-Bold", sans-serif;
+ font-style: bold;
+ font-size: 0.7rem;
+ text-transform: uppercase;
+ text-decoration: none;
+}
+.jewel.textbutton [disabled] {
+ text-shadow: unset;
+}
+
+.jewel.textbutton {
+ background-color: rgba(0, 0, 0, 0.3);
+ transition-duration: 0.4s;
+ color: rgba(0, 0, 0, 0.4);
+}
+.jewel.textbutton:hover {
+ background-color: rgba(15, 15, 15, 0.3);
+}
+.jewel.textbutton:active {
+ background-color: rgba(0, 0, 0, 0.3);
+}
+.jewel.textbutton:focus {
+ outline: 0;
+}
+.jewel.textbutton[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.textbutton.primary {
+ background-color: #006CEB;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.textbutton.primary:hover {
+ background-color: #0b7bff;
+}
+.jewel.textbutton.primary:active {
+ background-color: #005ecc;
+}
+.jewel.textbutton.primary:focus {
+ outline: 0;
+}
+.jewel.textbutton.primary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.textbutton.secondary {
+ background-color: #011833;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.textbutton.secondary:hover {
+ background-color: #022651;
+}
+.jewel.textbutton.secondary:active {
+ background-color: #000a15;
+}
+.jewel.textbutton.secondary:focus {
+ outline: 0;
+}
+.jewel.textbutton.secondary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.textbutton.emphasized {
+ background-color: #1FD348;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.textbutton.emphasized:hover {
+ background-color: #30e158;
+}
+.jewel.textbutton.emphasized:active {
+ background-color: #1bb83f;
+}
+.jewel.textbutton.emphasized:focus {
+ outline: 0;
+}
+.jewel.textbutton.emphasized[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+/**
+ * Jewel TextField
+ */
+TextField {
+ position: relative;
+ display: inline-block;
+ box-sizing: border-box;
+ width: 300px;
+ max-width: 100%;
+ margin: 0;
+}
+
+.vTextField--input {
+ font-size: 16px;
+ font-family: "Lato", sans-serif;
+ border: none;
+ border-bottom: 2px solid;
+ border-bottom-color: #ff0000;
+ display: block;
+ margin: 0;
+ padding: 4 0;
+ width: 100px;
+ background: transparent;
+ text-align: left;
+ color: inherit;
+ outline: none;
+}
+
+.vTextField--label {
+ bottom: 0;
+ color: #ff0000;
+ font-size: 13px;
+ left: 0;
+ right: 0;
+ pointer-events: none;
+ position: absolute;
+ display: block;
+ width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-align: left;
+}
+
+/*# sourceMappingURL=royale-jewel-blue.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
new file mode 100644
index 0000000..60f16ca
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
@@ -0,0 +1,263 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@namespace j "library://ns.apache.org/royale/jewel";
+@namespace "http://www.w3.org/1999/xhtml";
+.royale *, .royale *:before, .royale *:after {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.royale {
+ padding: 10px;
+ margin: 10px;
+}
+
+/**
+ * Jewel Button
+ */
+.jewel.button, .jewel.button:hover, .jewel.textbutton, .jewel.textbutton:hover {
+ cursor: pointer;
+ display: inline-block;
+ margin: 0;
+ padding: 10px 16px;
+ min-width: 74px;
+ min-height: 34px;
+ /* Background: */
+ border: none;
+ border-radius: 3px;
+}
+
+.jewel.button {
+ background-color: rgba(0, 0, 0, 0.2);
+ transition-duration: 0.4s;
+ color: rgba(0, 0, 0, 0.5);
+}
+.jewel.button:hover {
+ background-color: rgba(15, 15, 15, 0.2);
+}
+.jewel.button:active {
+ background-color: rgba(0, 0, 0, 0.2);
+}
+.jewel.button:focus {
+ outline: 0;
+}
+.jewel.button[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.button.primary {
+ background-color: #FF0000;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.button.primary:hover {
+ background-color: #ff1f1f;
+}
+.jewel.button.primary:active {
+ background-color: #e00000;
+}
+.jewel.button.primary:focus {
+ outline: 0;
+}
+.jewel.button.primary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.button.secondary {
+ background-color: #342F30;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.button.secondary:hover {
+ background-color: #443e3f;
+}
+.jewel.button.secondary:active {
+ background-color: #242021;
+}
+.jewel.button.secondary:focus {
+ outline: 0;
+}
+.jewel.button.secondary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.button.emphasized {
+ background-color: #016936;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.button.emphasized:hover {
+ background-color: #018746;
+}
+.jewel.button.emphasized:active {
+ background-color: #014b26;
+}
+.jewel.button.emphasized:focus {
+ outline: 0;
+}
+.jewel.button.emphasized[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+/**
+ * Jewel TextButton
+ */
+.jewel.textbutton, .jewel.textbutton:hover {
+ /* TextField */
+ font-family: "Lato-Bold", sans-serif;
+ font-style: bold;
+ font-size: 0.7rem;
+ text-transform: uppercase;
+ text-decoration: none;
+}
+.jewel.textbutton [disabled] {
+ text-shadow: unset;
+}
+
+.jewel.textbutton {
+ background-color: rgba(0, 0, 0, 0.2);
+ transition-duration: 0.4s;
+ color: rgba(0, 0, 0, 0.5);
+}
+.jewel.textbutton:hover {
+ background-color: rgba(15, 15, 15, 0.2);
+}
+.jewel.textbutton:active {
+ background-color: rgba(0, 0, 0, 0.2);
+}
+.jewel.textbutton:focus {
+ outline: 0;
+}
+.jewel.textbutton[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.textbutton.primary {
+ background-color: #FF0000;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.textbutton.primary:hover {
+ background-color: #ff1f1f;
+}
+.jewel.textbutton.primary:active {
+ background-color: #e00000;
+}
+.jewel.textbutton.primary:focus {
+ outline: 0;
+}
+.jewel.textbutton.primary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.textbutton.secondary {
+ background-color: #342F30;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.textbutton.secondary:hover {
+ background-color: #443e3f;
+}
+.jewel.textbutton.secondary:active {
+ background-color: #242021;
+}
+.jewel.textbutton.secondary:focus {
+ outline: 0;
+}
+.jewel.textbutton.secondary[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+.jewel.textbutton.emphasized {
+ background-color: #016936;
+ transition-duration: 0.4s;
+ color: white;
+}
+.jewel.textbutton.emphasized:hover {
+ background-color: #018746;
+}
+.jewel.textbutton.emphasized:active {
+ background-color: #014b26;
+}
+.jewel.textbutton.emphasized:focus {
+ outline: 0;
+}
+.jewel.textbutton.emphasized[disabled] {
+ background-color: #CCCCCC;
+ color: #888888;
+ cursor: unset;
+}
+
+/**
+ * Jewel TextField
+ */
+TextField {
+ position: relative;
+ display: inline-block;
+ box-sizing: border-box;
+ width: 300px;
+ max-width: 100%;
+ margin: 0;
+}
+
+.vTextField--input {
+ font-size: 16px;
+ font-family: "Lato", sans-serif;
+ border: none;
+ border-bottom: 2px solid;
+ border-bottom-color: #ff0000;
+ display: block;
+ margin: 0;
+ padding: 4 0;
+ width: 100px;
+ background: transparent;
+ text-align: left;
+ color: inherit;
+ outline: none;
+}
+
+.vTextField--label {
+ bottom: 0;
+ color: #ff0000;
+ font-size: 13px;
+ left: 0;
+ right: 0;
+ pointer-events: none;
+ position: absolute;
+ display: block;
+ width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-align: left;
+}
+
+/*# sourceMappingURL=royale-jewel-red.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as b/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
new file mode 100644
index 0000000..3e88523
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
@@ -0,0 +1,36 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+
+ /**
+ * @private
+ * This class is used to link additional classes into JewelTheme.swc
+ * beyond those that are found by dependecy analysis starting
+ * from the classes specified in manifest.xml.
+ */
+ internal class JewelThemeClasses
+ {
+ COMPILE::JS
+ {
+ import org.apache.royale.jewel.JewelThemeFontInject; JewelThemeFontInject;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/jewel/JewelThemeFontInject.as b/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/jewel/JewelThemeFontInject.as
new file mode 100644
index 0000000..9d5f913
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/jewel/JewelThemeFontInject.as
@@ -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.jewel
+{
+
+ /**
+ * @private
+ * This class is used to link the font in html
+ */
+ public class JewelThemeFontInject
+ {
+ /**
+ * constructor.
+ *
+ * <inject_html>
+ * <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
+ * </inject_html>
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.2
+ */
+ public function JewelThemeFontInject()
+ {
+ super();
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
new file mode 100644
index 0000000..d04d186
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
@@ -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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Jewel Button
+ */
+%button-def
+ cursor: pointer
+
+ display: inline-block
+ margin: 0 //1rem
+ padding: 10px 16px //.938em 1.875em
+ min-width: $button-min-width
+ min-height: 34px
+
+ /* Background: */
+ border: none // .094em solid
+ border-radius: 3px //.625em
+ //box-shadow: 0 .375em .313em -.313em rgba(black,.8), inset 0 .063em $off-wht, inset 0 -.188em rgba(black,.15)
+
+.jewel.button, .jewel.button:hover
+ @extend %button-def
+
+.jewel.button
+ +button-theme($default-color, $default-font-color)
+
+.jewel.button.primary
+ +button-theme($primary-color, $font-color)
+
+.jewel.button.secondary
+ +button-theme($secondary-color, $font-color)
+
+.jewel.button.emphasized
+ +button-theme($emphasized-color, $font-color)
+
+
+//SVGs
+//border:1px; /*without this svg shows scaled and bigger*/
+//border-image-source: url(assets/jewel-button.svg) ;
+//border-image-slice: 4;
+//border-image-width: 4;
+
+//background-image: linear-gradient(#3BB0FF, #1E36FA);
+
+//background-color: #006CEB;
+//background-size: cover;
+//background-repeat: no-repeat;
+//background-clip: padding-box;
+
+//background: url(assets/4slicewithpattern.svg);
+//background-size: cover;
+//width: fit-content;
+//height: fit-content;
+
+//.button:active
+//box-shadow: #E6431D 0 1px 0 inset;
+//text-shadow: 0 -1px 0 #5F3A29;
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_functions.sass b/frameworks/themes/JewelTheme/src/main/sass/_functions.sass
new file mode 100644
index 0000000..0c6fb82
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/_functions.sass
@@ -0,0 +1,18 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
new file mode 100644
index 0000000..3a8a0ef
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
@@ -0,0 +1,32 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+@namespace j "library://ns.apache.org/royale/jewel"
+@namespace "http://www.w3.org/1999/xhtml"
+
+
+.royale *, .royale *:before, .royale *:after
+ -moz-box-sizing: border-box
+ -webkit-box-sizing: border-box
+ box-sizing: border-box
+ //fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject")
+
+.royale
+ padding: 10px
+ margin: 10px
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
new file mode 100644
index 0000000..f4e7302
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/_mixins.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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+=button-theme($button-color, $text-color)
+ //border-color: darken($button-color, 20%)
+ background-color: $button-color
+ transition:
+ duration: 0.4s
+ color: $text-color
+ &:hover
+ background-color: lighten($button-color, 6%)
+ //box-shadow: 0 .125em $off-wht, inset 0 .063em $off-wht, inset 0 -.188em lighten($btn-color, 2%)
+ &:active
+ background-color: darken($button-color, 6%)
+ //box-shadow: 0 .063em $off-wht, inset 0 0 1.094em darken($btn-color, 40%), inset 0 .063em darken($btn-color, 20%),inset 0 -0.188em darken($btn-color, 20%)
+ &:focus
+ outline: 0
+ &[disabled]
+ background-color: $disabled-color
+ color: $font-disabled-color
+ cursor: unset
+
+//=trans($val...)
+// -webkit-transition: $val
+// -moz-transition: $val
+// -o-transition: $val
+// transition: $val
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
new file mode 100644
index 0000000..c24dbec
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
@@ -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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Jewel TextButton
+ */
+%textbutton-def
+ @extend %button-def
+ /* TextField */
+ font:
+ family: $font-stack
+ style: bold
+ size: .7rem
+ //+trans(0.2s ease-in-out)
+ text:
+ transform: uppercase
+ decoration: none
+ //shadow: 0 .063em rgba(black,.3)
+ [disabled]
+ text:
+ shadow: unset
+
+.jewel.textbutton, .jewel.textbutton:hover
+ @extend %textbutton-def
+
+.jewel.textbutton
+ +button-theme($default-color, $default-font-color)
+
+.jewel.textbutton.primary
+ +button-theme($primary-color, $font-color)
+
+.jewel.textbutton.secondary
+ +button-theme($secondary-color, $font-color)
+
+.jewel.textbutton.emphasized
+ +button-theme($emphasized-color, $font-color)
+
+// /* TextField: */
+// font-family: $font-stack
+// font-size: 14px
+// font-weight: bold
+// color: $font-normal-color
+// text-shadow: 0 1px 0 #555
+
+// padding: 10px 0px
+// display: inline-block
+// min-width: 80px
+
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/_textfield.sass
new file mode 100644
index 0000000..84b696c
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/_textfield.sass
@@ -0,0 +1,67 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Jewel TextField
+ */
+TextField
+ position: relative
+ display: inline-block
+ box-sizing: border-box
+ width: 300px
+ max-width: 100%
+ margin: 0
+
+.vTextField--input
+ font-size: 16px
+ font-family: 'Lato', sans-serif
+
+ border: none
+ border-bottom: 2px solid
+ border-bottom-color: #ff0000
+ display: block
+ margin: 0
+ padding: 4 0
+ width: 100px
+ background: transparent
+ text-align: left
+ color: inherit
+ outline: none
+
+.vTextField--label
+ bottom: 0
+ color: #ff0000
+ font-size: 13px
+ left: 0
+ right: 0
+ pointer-events: none
+ position: absolute
+ display: block
+ width: 100%
+ overflow: hidden
+ white-space: nowrap
+ text-align: left
+
+// padding: 5px;
+// border: solid 1px #666666;
+// border-radius: 6px;
+// color: #333333;
+//:hover
+// padding: 5px;
+// background-color: #DFDFDF;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
new file mode 100644
index 0000000..b1f1f39
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+$font-stack: 'Lato-Bold', sans-serif
+
+// Common Colors
+$white: rgba(white,.9)
+$disabled-color: #CCCCCC
+$font-disabled-color: #888888
+
+// Button variables
+$button-min-width: 74px !default
+
+
+
diff --git a/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass b/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
new file mode 100644
index 0000000..3bdf08e
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
@@ -0,0 +1,26 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+// Color Themes
+$default-color: rgba(0,0,0,.3)
+$primary-color: #006CEB
+$secondary-color: #011833
+$emphasized-color: #1FD348
+
+$default-font-color: rgba(0, 0, 0, .4)
+$font-color: white
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass b/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
new file mode 100644
index 0000000..b564176
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
@@ -0,0 +1,26 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+// Color Themes
+$default-color: rgba(0,0,0,0.20)
+$primary-color: #FF0000
+$secondary-color: #342F30
+$emphasized-color: #016936
+
+$default-font-color: rgba(0, 0, 0, .5)
+$font-color: white
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
new file mode 100644
index 0000000..3c82eb7
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
@@ -0,0 +1,36 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Variables
+@import "colors/blue-color-palette"
+@import "variables"
+@import "mixins"
+@import "functions"
+
+// Global
+@import "global"
+
+// Components
+
+// Button
+@import "button"
+
+// TextButton
+@import "textbutton"
+
+// TextField
+@import "textfield"
diff --git a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
new file mode 100644
index 0000000..54e8f75
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
@@ -0,0 +1,36 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Variables
+@import "colors/red-color-palette"
+@import "variables"
+@import "mixins"
+@import "functions"
+
+// Global
+@import "global"
+
+// Components
+
+// Button
+@import "button"
+
+// TextButton
+@import "textbutton"
+
+// TextField
+@import "textfield"
diff --git a/frameworks/themes/pom.xml b/frameworks/themes/pom.xml
index e674d5f..19fbbe6 100644
--- a/frameworks/themes/pom.xml
+++ b/frameworks/themes/pom.xml
@@ -34,6 +34,7 @@
<modules>
<module>Basic</module>
+ <module>JewelTheme</module>
</modules>
<dependencies>
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.
[royale-asjs] 05/49: fix textfield error setting typeNames in
constructor
Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 0153d19aac698690982037b532bc5e3c4c83f1e4
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Mar 13 16:31:10 2018 +0100
fix textfield error setting typeNames in constructor
---
.../royale/JewelExample/src/main/royale/TextInputPlayGround.mxml | 6 ++----
.../Jewel/src/main/royale/org/apache/royale/jewel/TextField.as | 4 ++--
2 files changed, 4 insertions(+), 6 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index aa8c81a..489bfb9 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -22,9 +22,7 @@ limitations under the License.
xmlns:j="library://ns.apache.org/royale/jewel">
-
- <j:TextField text="Text Input" width="120" height="40"/>
-
<j:RadioButton/>
-
+ <j:TextField text="Text Input" width="120" height="40"/>
+
</js:Group>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
index 145ab37..69af720 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/TextField.as
@@ -49,6 +49,8 @@ package org.apache.royale.jewel
public function TextField()
{
super();
+
+ typeNames = "jewel textField";
}
COMPILE::JS
@@ -82,8 +84,6 @@ package org.apache.royale.jewel
COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
- typeNames = "TextField";
-
var div:HTMLDivElement = document.createElement('div') as HTMLDivElement;
div.className = typeNames;
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.