This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new bdfd510 jewel-iinputbutton: refactor CheckButtonSize to
InputButtonSize to affect CheckBox and RadioButton using IInputButton interface
bdfd510 is described below
commit bdfd5102201d09f63a24407cf77b22942fa62744
Author: Carlos Rovira <[email protected]>
AuthorDate: Sun Feb 2 19:55:32 2020 +0100
jewel-iinputbutton: refactor CheckButtonSize to InputButtonSize to affect
CheckBox and RadioButton using IInputButton interface
---
.../jewel/todomvc/renderers/TodoItemRenderer.mxml | 2 +-
.../src/main/royale/CheckBoxPlayGround.mxml | 12 +--
.../src/main/royale/RadioButtonPlayGround.mxml | 24 ++++++
.../projects/Jewel/src/main/resources/defaults.css | 4 +-
.../Jewel/src/main/resources/jewel-manifest.xml | 2 +-
.../royale/org/apache/royale/jewel/CheckBox.as | 16 +++-
.../royale/org/apache/royale/jewel/RadioButton.as | 16 +++-
.../CheckBoxSize.as => InputButtonSize.as} | 94 ++++++++++++----------
.../royale/jewel/supportClasses/IInputButton.as | 43 ++++++++++
.../src/main/sass/components/_radiobutton.sass | 6 +-
10 files changed, 159 insertions(+), 60 deletions(-)
diff --git
a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/renderers/TodoItemRenderer.mxml
b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/renderers/TodoItemRenderer.mxml
index 67c4b77..b8e80dd 100644
---
a/examples/jewel/todomvc/src/main/royale/jewel/todomvc/renderers/TodoItemRenderer.mxml
+++
b/examples/jewel/todomvc/src/main/royale/jewel/todomvc/renderers/TodoItemRenderer.mxml
@@ -140,7 +140,7 @@ limitations under the License.
visible.normal="true" visible.editing="false"
click="changeItemState(event);">
<j:beads>
- <j:CheckBoxSize checkWidth="40" checkHeight="40"/>
+ <j:InputButtonSize width="40" height="40"/>
</j:beads>
</j:CheckBox>
diff --git
a/examples/royale/TourDeJewel/src/main/royale/CheckBoxPlayGround.mxml
b/examples/royale/TourDeJewel/src/main/royale/CheckBoxPlayGround.mxml
index 8d50424..41b9045 100644
--- a/examples/royale/TourDeJewel/src/main/royale/CheckBoxPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/CheckBoxPlayGround.mxml
@@ -51,20 +51,20 @@ limitations under the License.
<html:H3 text="Jewel CheckBox Sizing"/>
<j:CheckBox text="No size"/>
- <j:CheckBox text="CheckWidth and checkHeight to
60">
+ <j:CheckBox text="width and height to 60">
<j:beads>
- <j:CheckBoxSize checkWidth="60"
checkHeight="60"/>
+ <j:InputButtonSize width="60"
height="60"/>
</j:beads>
</j:CheckBox>
- <j:CheckBox text="Only checkWidth to 45">
+ <j:CheckBox text="Only width to 45">
<j:beads>
- <j:CheckBoxSize
checkWidth="45"/>
+ <j:InputButtonSize width="45"/>
</j:beads>
</j:CheckBox>
- <j:CheckBox text="Only checkHeight to 35 and
disabled" selected="true">
+ <j:CheckBox text="Only height to 35 and
disabled" selected="true">
<j:beads>
<j:Disabled id="opt3disable"
disabled="true"/>
- <j:CheckBoxSize
checkWidth="35"/>
+ <j:InputButtonSize height="35"/>
</j:beads>
</j:CheckBox>
</j:Card>
diff --git
a/examples/royale/TourDeJewel/src/main/royale/RadioButtonPlayGround.mxml
b/examples/royale/TourDeJewel/src/main/royale/RadioButtonPlayGround.mxml
index d2ce460..26f5c42 100644
--- a/examples/royale/TourDeJewel/src/main/royale/RadioButtonPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/RadioButtonPlayGround.mxml
@@ -45,6 +45,30 @@ limitations under the License.
</j:RadioButton>
</j:Card>
</j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="1"
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1"
phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel RadioButton Sizing"/>
+
+ <j:RadioButton groupName="radios_sizes"
text="No size"/>
+ <j:RadioButton groupName="radios_sizes"
text="width and height to 60">
+ <j:beads>
+ <j:InputButtonSize width="60"
height="60"/>
+ </j:beads>
+ </j:RadioButton>
+ <j:RadioButton groupName="radios_sizes"
text="Only width to 45">
+ <j:beads>
+ <j:InputButtonSize width="45"/>
+ </j:beads>
+ </j:RadioButton>
+ <j:RadioButton groupName="radios_sizes"
text="Only height to 35 and disabled" selected="true">
+ <j:beads>
+ <j:Disabled id="opt3disable"
disabled="true"/>
+ <j:InputButtonSize height="35"/>
+ </j:beads>
+ </j:RadioButton>
+ </j:Card>
+ </j:GridCell>
</j:Grid>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 12ad9b6..d83c90d 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3348,7 +3348,7 @@ j|PopUp {
position: relative;
margin: 0;
padding: 0;
- height: 22px;
+ height: auto;
}
.jewel.radiobutton input {
-webkit-appearance: none;
@@ -3393,8 +3393,6 @@ j|PopUp {
.jewel.radiobutton span {
cursor: pointer;
margin: 0;
- vertical-align: top;
- line-height: 24px;
}
@media -royale-swf {
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 11c0622..157041d 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -151,7 +151,7 @@
<component id="ResponsiveDrawer"
class="org.apache.royale.jewel.beads.controls.drawer.ResponsiveDrawer"/>
- <component id="CheckBoxSize"
class="org.apache.royale.jewel.beads.controls.checkbox.CheckBoxSize"/>
+ <component id="InputButtonSize"
class="org.apache.royale.jewel.beads.controls.InputButtonSize"/>
<component id="MultiLine"
class="org.apache.royale.jewel.beads.controls.MultiLine"/>
<component id="NavigationActionNotifier"
class="org.apache.royale.jewel.beads.controls.NavigationActionNotifier"/>
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 f8884c1..22ac7ec 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
@@ -31,6 +31,7 @@ package org.apache.royale.jewel
import org.apache.royale.html.util.addElementToWrapper;
}
+ import org.apache.royale.jewel.supportClasses.IInputButton;
import org.apache.royale.jewel.supportClasses.button.SelectableButtonBase;
/**
@@ -48,7 +49,7 @@ package org.apache.royale.jewel
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public class CheckBox extends SelectableButtonBase
+ public class CheckBox extends SelectableButtonBase implements IInputButton
{
/**
* Constructor.
@@ -185,6 +186,19 @@ package org.apache.royale.jewel
*/
public var input:HTMLInputElement;
+ /**
+ * the input button
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ COMPILE::JS
+ public function get inputButton():HTMLInputElement {
+ return input;
+ }
+
COMPILE::JS
/**
* a HTMLSpanElement decorator for this component
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 df3df86..edda47c 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
@@ -33,6 +33,7 @@ package org.apache.royale.jewel
}
import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.jewel.supportClasses.IInputButton;
import org.apache.royale.jewel.supportClasses.button.SelectableButtonBase;
/**
@@ -49,7 +50,7 @@ package org.apache.royale.jewel
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public class RadioButton extends SelectableButtonBase
+ public class RadioButton extends SelectableButtonBase implements
IInputButton
{
/**
* Constructor.
@@ -293,6 +294,19 @@ package org.apache.royale.jewel
* added to the positioner. Is a HTMLInputElement.
*/
protected var icon:HTMLInputElement;
+
+ /**
+ * the input button
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ COMPILE::JS
+ public function get inputButton():HTMLInputElement {
+ return icon;
+ }
COMPILE::JS
/**
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/checkbox/CheckBoxSize.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/InputButtonSize.as
similarity index 60%
rename from
frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/checkbox/CheckBoxSize.as
rename to
frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/InputButtonSize.as
index 59e7d9c..846e8f7 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/checkbox/CheckBoxSize.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/InputButtonSize.as
@@ -16,25 +16,28 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel.beads.controls.checkbox
+package org.apache.royale.jewel.beads.controls
{
import org.apache.royale.core.IBead;
import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.StyledUIBase;
import org.apache.royale.events.Event;
- import org.apache.royale.jewel.CheckBox;
+ import org.apache.royale.events.IEventDispatcher;
+ import org.apache.royale.jewel.supportClasses.IInputButton;
import org.apache.royale.utils.css.addDynamicSelector;
/**
- * The CheckBoxSize class
+ * The InputButtonSize class implements input button size for controls
+ * like CheckBox or RadioButton that need to size the selectable
button part.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.7
*/
- public class CheckBoxSize implements IBead
+ public class InputButtonSize implements IBead
{
- public static const CHECK_DEFAULT_SIZE:Number = 22;
+ public static const INPUTBUTTON_DEFAULT_SIZE:Number = 22;
/**
* Constructor.
@@ -44,61 +47,64 @@ package org.apache.royale.jewel.beads.controls.checkbox
* @playerversion AIR 2.6
* @productversion Royale 0.9.7
*/
- public function CheckBoxSize()
+ public function InputButtonSize()
{
}
- private var _checkWidth:Number;
+ private var _width:Number;
/**
- * Check Width
+ * Input button width
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.7
*/
- [Bindable("checkWidthChange")]
- public function get checkWidth():Number
+ [Bindable("inputButtonWidthChange")]
+ public function get width():Number
{
- return _checkWidth;
+ return _width;
}
- public function set checkWidth(value:Number):void
+ public function set width(value:Number):void
{
- if(_checkWidth != value)
+ if(_width != value)
{
- _checkWidth = value;
+ _width = value;
}
}
- private var _checkHeight:Number;
+ private var _height:Number;
/**
- * Check Height
+ * Input button height
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.7
*/
- [Bindable("checkHeightChange")]
- public function get checkHeight():Number
+ [Bindable("inputButtonHeightChange")]
+ public function get height():Number
{
- return _checkHeight;
+ return _height;
}
- public function set checkHeight(value:Number):void
+ public function set height(value:Number):void
{
- if(_checkHeight != value)
+ if(_height != value)
{
- _checkHeight = value;
+ _height = value;
}
}
/**
- * the _strand
+ * The IInputButton control that host the inputButton
*/
- private var checkbox:CheckBox;
+ private var host:IInputButton;
+ /**
+ * The input button
+ */
COMPILE::JS
- private var input:HTMLInputElement;
+ private var inputButton:HTMLInputElement;
/**
* @copy org.apache.royale.core.IBead#strand
@@ -110,15 +116,15 @@ package org.apache.royale.jewel.beads.controls.checkbox
*/
public function set strand(value:IStrand):void
{
- checkbox = value as CheckBox;
+ host = value as IInputButton;
COMPILE::JS
{
- input = checkbox.input;
+ inputButton = host.inputButton;
-
checkbox.addEventListener("widthChanged",sizeChangeHandler);
-
checkbox.addEventListener("heightChanged",sizeChangeHandler);
- checkbox.addEventListener("sizeChanged",sizeChangeHandler);
+
IEventDispatcher(host).addEventListener("widthChanged",sizeChangeHandler);
+
IEventDispatcher(host).addEventListener("heightChanged",sizeChangeHandler);
+
IEventDispatcher(host).addEventListener("sizeChanged",sizeChangeHandler);
// always run size change since there are no size
change events
sizeChangeHandler(null);
@@ -134,30 +140,30 @@ package org.apache.royale.jewel.beads.controls.checkbox
{
var ruleName:String;
var beforeSelector:String = "";
- if(checkWidth || checkHeight) {
- ruleName = "chkb" + ((new Date()).getTime() +
"-" + Math.floor(Math.random()*1000));
- checkbox.className = ruleName;
+ if(width || height) {
+ ruleName = "inpbtn" + ((new Date()).getTime() +
"-" + Math.floor(Math.random()*1000));
+ (host as StyledUIBase).className = ruleName;
}
- if(checkWidth) {
- input.style.width = checkWidth + "px";
- beforeSelector += "width: "+ checkWidth +"px;";
+ if(width) {
+ inputButton.style.width = width + "px";
+ beforeSelector += "width: "+ width +"px;";
}
else {
- input.style.width = CHECK_DEFAULT_SIZE + "px";
- beforeSelector += "width: "+ CHECK_DEFAULT_SIZE
+"px;";
+ inputButton.style.width =
INPUTBUTTON_DEFAULT_SIZE + "px";
+ beforeSelector += "width: "+
INPUTBUTTON_DEFAULT_SIZE +"px;";
}
- if(checkHeight) {
- input.style.height = checkHeight + "px";
- beforeSelector += "height: "+ checkHeight
+"px;";
+ if(height) {
+ inputButton.style.height = height + "px";
+ beforeSelector += "height: "+ height +"px;";
}
else {
- input.style.height = CHECK_DEFAULT_SIZE + "px";
- beforeSelector += "height: "+
CHECK_DEFAULT_SIZE +"px;";
+ inputButton.style.height =
INPUTBUTTON_DEFAULT_SIZE + "px";
+ beforeSelector += "height: "+
INPUTBUTTON_DEFAULT_SIZE +"px;";
}
- if(checkWidth || checkHeight) {
+ if(width || height) {
addDynamicSelector(".jewel." + ruleName + "
input+span::before" , beforeSelector);
addDynamicSelector(".jewel." + ruleName + "
input+span::after" , beforeSelector);
}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/IInputButton.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/IInputButton.as
new file mode 100644
index 0000000..c2151ce
--- /dev/null
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/IInputButton.as
@@ -0,0 +1,43 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.supportClasses
+{
+ /**
+ * IInputButton is the interface that implements controls like CheckBox
and RadioButton
+ * that owns a button input part
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public interface IInputButton
+ {
+ /**
+ * the input button
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ COMPILE::JS
+ function get inputButton():HTMLInputElement;
+ }
+}
diff --git
a/frameworks/projects/Jewel/src/main/sass/components/_radiobutton.sass
b/frameworks/projects/Jewel/src/main/sass/components/_radiobutton.sass
index 1e65a51..276b1e3 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_radiobutton.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_radiobutton.sass
@@ -32,7 +32,7 @@ $radiobutton-button-yoffset: 0px
padding: 0
// width: 100%
- height: $radiobutton-button-size
+ height: auto //$radiobutton-button-size
// -- INPUT
input
@@ -85,9 +85,9 @@ $radiobutton-button-yoffset: 0px
cursor: pointer
margin: 0
- vertical-align: top
+ // vertical-align: top
- line-height: $radiobutton-button-size + 2
+ // line-height: $radiobutton-button-size + 2
@media -royale-swf
j|RadioButton
