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 bf8cc1f jewel-checkbox: add checkWidth and checkHeight properties to
allow size the check view part
bf8cc1f is described below
commit bf8cc1f96277e96ef24cfae0293fdecfee327111
Author: Carlos Rovira <[email protected]>
AuthorDate: Fri Jan 31 20:21:43 2020 +0100
jewel-checkbox: add checkWidth and checkHeight properties to allow size the
check view part
---
.../projects/Jewel/src/main/resources/defaults.css | 14 +-
.../projects/Jewel/src/main/royale/JewelClasses.as | 2 +-
.../royale/org/apache/royale/jewel/CheckBox.as | 46 +++++-
.../royale/jewel/beads/views/CheckBoxView.as | 172 +++++++++++++++++++--
.../Jewel/src/main/sass/components/_checkbox.sass | 21 +--
5 files changed, 220 insertions(+), 35 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index bcc09c3..83c3fd6 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -322,9 +322,6 @@ j|Card {
display: inline-flex;
margin: 0;
padding: 0;
- width: 22px;
- height: 22px;
- line-height: 22px;
opacity: 0;
}
.jewel.checkbox input + span::before {
@@ -355,16 +352,13 @@ j|Card {
}
.jewel.checkbox span {
cursor: pointer;
- margin: 0;
- vertical-align: top;
- line-height: 24px;
+ margin: auto;
}
-@media -royale-swf {
- j|CheckBox {
- IBeadView:
ClassReference("org.apache.royale.jewel.beads.views.CheckBoxView");
- }
+j|CheckBox {
+ IBeadView:
ClassReference("org.apache.royale.jewel.beads.views.CheckBoxView");
}
+
.jewel.controlbar {
background-color: transparent;
padding: 0px;
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index f02c488..c1aa33b 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -80,6 +80,7 @@ package
import org.apache.royale.jewel.beads.views.FormHeadingView;
FormHeadingView;
import org.apache.royale.jewel.beads.views.WizardView; WizardView;
import org.apache.royale.jewel.beads.views.ButtonBarView;
ButtonBarView;
+ import org.apache.royale.jewel.beads.views.CheckBoxView;
CheckBoxView;
COMPILE::SWF
{
@@ -89,7 +90,6 @@ package
import org.apache.royale.jewel.beads.views.SliderTrackView;
SliderTrackView;
import org.apache.royale.jewel.beads.views.RadioButtonView;
RadioButtonView;
- import org.apache.royale.jewel.beads.views.CheckBoxView;
CheckBoxView;
import org.apache.royale.jewel.beads.views.ButtonView; ButtonView;
// import org.apache.royale.jewel.beads.views.DropDownListView;
DropDownListView;
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 499dbd6..6b78e8a 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
@@ -183,7 +183,7 @@ package org.apache.royale.jewel
* the org.apache.royale.core.HTMLElementWrapper#element for this
component
* added to the positioner. Is a HTMLInputElement.
*/
- protected var input:HTMLInputElement;
+ public var input:HTMLInputElement;
COMPILE::JS
/**
@@ -237,5 +237,49 @@ package org.apache.royale.jewel
_positioner.appendChild(element);
_positioner.appendChild(checkbox);
}
+
+ private var _checkWidth:Number;
+ /**
+ * Check Width
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ [Bindable("checkWidthChange")]
+ public function get checkWidth():Number
+ {
+ return _checkWidth;
+ }
+ public function set checkWidth(value:Number):void
+ {
+ if(_checkWidth != value)
+ {
+ _checkWidth = value;
+ }
+ }
+
+ private var _checkHeight:Number;
+ /**
+ * Check Height
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ [Bindable("checkHeightChange")]
+ public function get checkHeight():Number
+ {
+ return _checkHeight;
+ }
+ public function set checkHeight(value:Number):void
+ {
+ if(_checkHeight != value)
+ {
+ _checkHeight = value;
+ }
+ }
}
}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/CheckBoxView.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/CheckBoxView.as
index 434ee1e..944d9fd 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/CheckBoxView.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/CheckBoxView.as
@@ -18,18 +18,26 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.views
{
- import flash.display.Shape;
- import flash.display.SimpleButton;
- import flash.display.Sprite;
- import flash.text.TextFieldAutoSize;
- import flash.text.TextFieldType;
-
+ COMPILE::SWF
+ {
+ 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.CSSTextField;
+ }
+ COMPILE::JS
+ {
+ import org.apache.royale.events.IEventDispatcher;
+ }
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.IToggleButtonModel;
- import org.apache.royale.events.Event;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.jewel.CheckBox;
+ import org.apache.royale.core.IUIBase;
+ // import org.apache.royale.utils.css.addDynamicSelector;
/**
* The CheckBoxView class is the default view for SWF platform
@@ -48,8 +56,10 @@ package org.apache.royale.jewel.beads.views
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public class CheckBoxView extends BeadViewBase implements IBeadView
+ public class CheckBoxView extends BeadViewBase
{
+ public static const CHECK_DEFAULT_SIZE:Number = 22;
+
/**
* Constructor.
*
@@ -60,6 +70,8 @@ package org.apache.royale.jewel.beads.views
*/
public function CheckBoxView()
{
+ COMPILE::SWF
+ {
sprites = [ upSprite = new Sprite(),
downSprite = new Sprite(),
overSprite = new Sprite(),
@@ -78,15 +90,17 @@ package org.apache.royale.jewel.beads.views
s.addChild(icon);
s.addChild(tf);
}
+ }
}
+ COMPILE::SWF
+ {
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:IToggleButtonModel;
@@ -96,7 +110,15 @@ package org.apache.royale.jewel.beads.views
{
return _toggleButtonModel;
}
+ }
+ COMPILE::JS
+ /**
+ * the org.apache.royale.core.HTMLElementWrapper#element for this
component
+ * added to the positioner. Is a HTMLInputElement.
+ */
+ private var input:HTMLInputElement;
+
/**
* @copy org.apache.royale.core.IBead#strand
*
@@ -108,7 +130,21 @@ package org.apache.royale.jewel.beads.views
override public function set strand(value:IStrand):void
{
super.strand = value;
+
+ COMPILE::JS
+ {
+
IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler);
+
IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler);
+
IEventDispatcher(value).addEventListener("sizeChanged",sizeChangeHandler);
+
+ input = (_strand as CheckBox).input;
+
+ // always run size change since there are no size
change events
+ sizeChangeHandler(null);
+ }
+ COMPILE::SWF
+ {
_toggleButtonModel =
value.getBeadByType(IToggleButtonModel) as IToggleButtonModel;
_toggleButtonModel.addEventListener("textChange",
textChangeHandler);
_toggleButtonModel.addEventListener("htmlChange",
htmlChangeHandler);
@@ -137,6 +173,87 @@ package org.apache.royale.jewel.beads.views
text = toggleButtonModel.text;
if (toggleButtonModel.html !== null)
html = toggleButtonModel.html;
+ }
+ }
+
+ public function addDynamicSelector(selector:String,
rule:String):void
+ {
+ COMPILE::JS
+ {
+ var selectorString:String = selector + ' { ' +
rule + ' }'
+ var element:HTMLStyleElement =
document.getElementById("royale_dynamic_css") as HTMLStyleElement;
+ if(element)
+ {
+ var sheet:CSSStyleSheet = element.sheet
as CSSStyleSheet;
+ sheet.insertRule(selectorString);
+ }
+ else
+ {
+ var style:HTMLStyleElement =
document.createElement('style') as HTMLStyleElement;
+ style.type = 'text/css';
+ style.id = "royale_dynamic_css";
+ style.innerHTML = selectorString;
+
document.getElementsByTagName('head')[0].appendChild(style);
+ }
+ }
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ COMPILE::JS
+ private function sizeChangeHandler(event:Event) : void
+ {
+ // first reads
+ var widthToContent:Boolean = (_strand as
UIBase).isWidthSizedToContent();
+ // trace("widthToContent:" + widthToContent);
+
+ var checkbox:CheckBox = (_strand as CheckBox);
+ // var inputWidth:String = input.style.width + "px";
+ // var inputHeight:String = input.style.height + "px";
+
+ var ruleName:String;
+ var beforeSelector:String = "";
+ if(checkbox.checkWidth || checkbox.checkHeight) {
+ ruleName = "chkb" + ((new Date()).getTime());
+ // addDynamicSelector(".jewel.checkbox." +
ruleName, "border: 1px solid red;");
+ // addDynamicSelector(".jewel.checkbox",
"border: 1px solid red;");
+ checkbox.className = ruleName;
+ }
+
+ if(checkbox.checkWidth) {
+ input.style.width = checkbox.checkWidth + "px";
+ beforeSelector += "width: "+
checkbox.checkWidth +"px;";
+ }
+ else {
+ input.style.width = CHECK_DEFAULT_SIZE + "px";
+ beforeSelector += "width: "+ CHECK_DEFAULT_SIZE
+"px;";
+ }
+
+ if(checkbox.checkHeight) {
+ input.style.height = checkbox.checkHeight +
"px";
+ beforeSelector += "height: "+
checkbox.checkHeight +"px;";
+ }
+ else {
+ input.style.height = CHECK_DEFAULT_SIZE + "px";
+ beforeSelector += "height: "+
CHECK_DEFAULT_SIZE +"px;";
+ }
+
+ if(checkbox.checkWidth || checkbox.checkHeight) {
+ addDynamicSelector(".jewel.checkbox." +
ruleName + " input+span::before" , beforeSelector);
+ addDynamicSelector(".jewel.checkbox." +
ruleName + " input+span::after" , beforeSelector);
+ }
+ // var strandWidth:Number;
+ // if (!widthToContent)
+ // {
+ // strandWidth = (_strand as UIBase).width;
+ // }
+
+ // // input.x = 0;
+ // // input.y = 0;
+ // if (!widthToContent)
+ // input.width = strandWidth - spinner.width - 2;
}
/**
@@ -149,8 +266,15 @@ package org.apache.royale.jewel.beads.views
*/
public function get text():String
{
+ COMPILE::JS
+ {
+ return "";
+ }
+ COMPILE::SWF
+ {
var tf:CSSTextField =
upSprite.getChildByName('textField') as CSSTextField;
return tf.text;
+ }
}
/**
@@ -158,6 +282,8 @@ package org.apache.royale.jewel.beads.views
*/
public function set text(value:String):void
{
+ COMPILE::SWF
+ {
for each( var s:Sprite in sprites )
{
var tf:CSSTextField =
s.getChildByName('textField') as CSSTextField;
@@ -165,6 +291,7 @@ package org.apache.royale.jewel.beads.views
}
layoutControl();
+ }
}
/**
@@ -177,8 +304,15 @@ package org.apache.royale.jewel.beads.views
*/
public function get html():String
{
+ COMPILE::JS
+ {
+ return "";
+ }
+ COMPILE::SWF
+ {
var tf:CSSTextField =
upSprite.getChildByName('textField') as CSSTextField;
return tf.htmlText;
+ }
}
/**
@@ -186,6 +320,8 @@ package org.apache.royale.jewel.beads.views
*/
public function set html(value:String):void
{
+ COMPILE::SWF
+ {
for each(var s:Sprite in sprites)
{
var tf:CSSTextField =
s.getChildByName('textField') as CSSTextField;
@@ -193,13 +329,16 @@ package org.apache.royale.jewel.beads.views
}
layoutControl();
+ }
}
+ COMPILE::SWF
private function textChangeHandler(event:Event):void
{
text = toggleButtonModel.text;
}
+ COMPILE::SWF
private function htmlChangeHandler(event:Event):void
{
html = toggleButtonModel.html;
@@ -227,6 +366,8 @@ package org.apache.royale.jewel.beads.views
{
_selected = value;
+ COMPILE::SWF
+ {
layoutControl();
if( value ) {
@@ -239,8 +380,10 @@ package org.apache.royale.jewel.beads.views
SimpleButton(_strand).downState = downSprite;
SimpleButton(_strand).overState = overSprite;
}
+ }
}
+ COMPILE::SWF
private function selectedChangeHandler(event:Event):void
{
selected = toggleButtonModel.selected;
@@ -254,6 +397,7 @@ package org.apache.royale.jewel.beads.views
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
+ COMPILE::SWF
protected function layoutControl() : void
{
for each(var s:Sprite in sprites)
@@ -271,7 +415,6 @@ package org.apache.royale.jewel.beads.views
tf.x = icon.x + icon.width + 1;
tf.y = (mh - tf.height)/2;
}
-
}
/**
@@ -282,6 +425,7 @@ package org.apache.royale.jewel.beads.views
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
+ COMPILE::SWF
protected function drawCheckBox(icon:Shape) : void
{
icon.graphics.clear();
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass
b/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass
index 8c24493..d04762e 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass
@@ -42,10 +42,10 @@ $checkbox-button-yoffset: 0px
margin: 0
padding: 0
- width: $checkbox-button-size
- height: $checkbox-button-size
+ // width: $checkbox-button-size
+ // height: $checkbox-button-size
- line-height: $checkbox-button-size
+ // line-height: $checkbox-button-size
opacity: 0
+ span::before
@@ -84,14 +84,17 @@ $checkbox-button-yoffset: 0px
span
cursor: pointer
- margin: 0
- vertical-align: top
+ margin: auto
+ // vertical-align: top
+
+ // line-height: $checkbox-button-size + 2
- line-height: $checkbox-button-size + 2
+j|CheckBox
+ IBeadView:
ClassReference("org.apache.royale.jewel.beads.views.CheckBoxView")
-@media -royale-swf
- j|CheckBox
+// @media -royale-swf
+ // j|CheckBox
// --- IBeadModel:
ClassReference("org.apache.royale.html.beads.models.ToggleButtonModel")
- IBeadView:
ClassReference("org.apache.royale.jewel.beads.views.CheckBoxView")
+ // IBeadView:
ClassReference("org.apache.royale.jewel.beads.views.CheckBoxView")
//font-size: 11px
//font-family: Arial
