This is an automated email from the ASF dual-hosted git repository. piotrz pushed a commit to branch feature/jewel-ui-set in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit df9808dc6ad261d33e58715c46448a1da5ee50ad Author: Carlos Rovira <[email protected]> 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 [email protected].
