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:32:44 UTC
[royale-asjs] 49/49: removes workaround for element styles thanks
to bugs apache/royale-compiler#30 and apache/royale-compiler#32 solved
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.