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 e376e79 jewel-checkbox: move the size of the check part to an
optional CheckBoxSize bead to make it more PAYG, and left Jewel ChecBoxView
optional as before (and only SWF for now)
e376e79 is described below
commit e376e797ff7add676bdfe4cdd00c1f110b163475
Author: Carlos Rovira <[email protected]>
AuthorDate: Sun Feb 2 16:40:03 2020 +0100
jewel-checkbox: move the size of the check part to an optional CheckBoxSize
bead to make it more PAYG, and left Jewel ChecBoxView optional as before (and
only SWF for now)
---
.../todomvc/src/main/resources/todomvc-styles.css | 4 +-
.../jewel/todomvc/renderers/TodoItemRenderer.mxml | 9 +-
.../src/main/royale/CheckBoxPlayGround.mxml | 15 +-
.../projects/Jewel/src/main/resources/defaults.css | 6 +-
.../Jewel/src/main/resources/jewel-manifest.xml | 2 +
.../royale/org/apache/royale/jewel/CheckBox.as | 44 -----
.../jewel/beads/controls/checkbox/CheckBoxSize.as | 183 +++++++++++++++++++++
.../royale/jewel/beads/views/CheckBoxView.as | 60 +++----
.../Jewel/src/main/sass/components/_checkbox.sass | 10 +-
9 files changed, 242 insertions(+), 91 deletions(-)
diff --git a/examples/jewel/todomvc/src/main/resources/todomvc-styles.css
b/examples/jewel/todomvc/src/main/resources/todomvc-styles.css
index 61da97c..e547b1f 100644
--- a/examples/jewel/todomvc/src/main/resources/todomvc-styles.css
+++ b/examples/jewel/todomvc/src/main/resources/todomvc-styles.css
@@ -244,14 +244,12 @@ todomvc|TodoListSection
.jewel.checkbox input + span::before {
background: url("data:image/svg+xml,%3Csvg viewBox='0 -18 100 135'
xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='50'
cy='50' r='50' fill='none' stroke='%23ededed' stroke-width='3'/%3E%3C/svg%3E")
no-repeat center center;
- /* background: none; */
border: none;
border-radius: 50%;
}
.jewel.checkbox input + span::after {
background: url("data:image/svg+xml,%3Csvg viewBox='0 -18 100 135'
xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='50'
cy='50' r='50' fill='none' stroke='%23bddad5' stroke-width='3'/%3E%3Cpath
fill='%235dc2af' d='M72 25L42 71 27 56l-4 4 20 20 34-52z'/%3E%3C/svg%3E")
no-repeat center center;
- border: 1px solid transparent;
- border-radius: 50%;
+ border: none;
transition: none;
transform: none;
}
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 325215b..67c4b77 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
@@ -136,9 +136,14 @@ limitations under the License.
<js:ItemRendererDataBinding />
</j:beads>
- <j:CheckBox selected="{item ? item.done : false }" checkWidth="40"
checkHeight="40"
+ <j:CheckBox selected="{item ? item.done : false}"
visible.normal="true" visible.editing="false"
- click="changeItemState(event);"/>
+ click="changeItemState(event);">
+ <j:beads>
+ <j:CheckBoxSize checkWidth="40" checkHeight="40"/>
+ </j:beads>
+ </j:CheckBox>
+
<j:Label localId="description" width="84%"
text="{item ? item.label : ''}" multiline="true"
diff --git
a/examples/royale/TourDeJewel/src/main/royale/CheckBoxPlayGround.mxml
b/examples/royale/TourDeJewel/src/main/royale/CheckBoxPlayGround.mxml
index 1dfc9f1..8d50424 100644
--- a/examples/royale/TourDeJewel/src/main/royale/CheckBoxPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/CheckBoxPlayGround.mxml
@@ -51,11 +51,20 @@ limitations under the License.
<html:H3 text="Jewel CheckBox Sizing"/>
<j:CheckBox text="No size"/>
- <j:CheckBox text="CheckWidth and checkHeight to
120" checkWidth="120" checkHeight="120"/>
- <j:CheckBox text="Only checkWidth to 45"
checkWidth="45"/>
- <j:CheckBox text="Only checkHeight to 60 and
disabled" checkHeight="60" selected="true">
+ <j:CheckBox text="CheckWidth and checkHeight to
60">
+ <j:beads>
+ <j:CheckBoxSize checkWidth="60"
checkHeight="60"/>
+ </j:beads>
+ </j:CheckBox>
+ <j:CheckBox text="Only checkWidth to 45">
+ <j:beads>
+ <j:CheckBoxSize
checkWidth="45"/>
+ </j:beads>
+ </j:CheckBox>
+ <j:CheckBox text="Only checkHeight to 35 and
disabled" selected="true">
<j:beads>
<j:Disabled id="opt3disable"
disabled="true"/>
+ <j:CheckBoxSize
checkWidth="35"/>
</j:beads>
</j:CheckBox>
</j:Card>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 83c3fd6..12ad9b6 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -322,6 +322,8 @@ j|Card {
display: inline-flex;
margin: 0;
padding: 0;
+ width: 22px;
+ height: 22px;
opacity: 0;
}
.jewel.checkbox input + span::before {
@@ -355,10 +357,6 @@ j|Card {
margin: auto;
}
-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/resources/jewel-manifest.xml
b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 1b6d9a9..11c0622 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -150,6 +150,8 @@
<component id="ResponsiveVisibility"
class="org.apache.royale.jewel.beads.layouts.ResponsiveVisibility"/>
<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="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 6b78e8a..f8884c1 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
@@ -237,49 +237,5 @@ 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/controls/checkbox/CheckBoxSize.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/checkbox/CheckBoxSize.as
new file mode 100644
index 0000000..59e7d9c
--- /dev/null
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/checkbox/CheckBoxSize.as
@@ -0,0 +1,183 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.controls.checkbox
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.CheckBox;
+ import org.apache.royale.utils.css.addDynamicSelector;
+
+ /**
+ * The CheckBoxSize class
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public class CheckBoxSize implements IBead
+ {
+ public static const CHECK_DEFAULT_SIZE:Number = 22;
+
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function CheckBoxSize()
+ {
+ }
+
+ 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;
+ }
+ }
+
+ /**
+ * the _strand
+ */
+ private var checkbox:CheckBox;
+
+ COMPILE::JS
+ private var input:HTMLInputElement;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function set strand(value:IStrand):void
+ {
+ checkbox = value as CheckBox;
+
+ COMPILE::JS
+ {
+ input = checkbox.input;
+
+
checkbox.addEventListener("widthChanged",sizeChangeHandler);
+
checkbox.addEventListener("heightChanged",sizeChangeHandler);
+ checkbox.addEventListener("sizeChanged",sizeChangeHandler);
+
+ // always run size change since there are no size
change events
+ sizeChangeHandler(null);
+ }
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.jewel.CheckBox
+ */
+ COMPILE::JS
+ private function sizeChangeHandler(event:Event):void
+ {
+ var ruleName:String;
+ var beforeSelector:String = "";
+ if(checkWidth || checkHeight) {
+ ruleName = "chkb" + ((new Date()).getTime() +
"-" + Math.floor(Math.random()*1000));
+ checkbox.className = ruleName;
+ }
+
+ if(checkWidth) {
+ input.style.width = checkWidth + "px";
+ beforeSelector += "width: "+ checkWidth +"px;";
+ }
+ else {
+ input.style.width = CHECK_DEFAULT_SIZE + "px";
+ beforeSelector += "width: "+ CHECK_DEFAULT_SIZE
+"px;";
+ }
+
+ if(checkHeight) {
+ input.style.height = checkHeight + "px";
+ beforeSelector += "height: "+ checkHeight
+"px;";
+ }
+ else {
+ input.style.height = CHECK_DEFAULT_SIZE + "px";
+ beforeSelector += "height: "+
CHECK_DEFAULT_SIZE +"px;";
+ }
+
+ if(checkWidth || checkHeight) {
+ addDynamicSelector(".jewel." + ruleName + "
input+span::before" , beforeSelector);
+ addDynamicSelector(".jewel." + ruleName + "
input+span::after" , beforeSelector);
+ }
+
+ // first reads
+ //var widthToContent:Boolean = (input as
UIBase).isWidthSizedToContent();
+ // trace("widthToContent:" + widthToContent);
+ // var inputWidth:String = input.style.width + "px";
+ // var inputHeight:String = input.style.height + "px";
+
+ // var strandWidth:Number;
+ // if (!widthToContent)
+ // {
+ // strandWidth = (_strand as UIBase).width;
+ // }
+
+ // input.x = 0;
+ // input.y = 0;
+ // if (!widthToContent)
+ // input.width = strandWidth
+ }
+ }
+}
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 4a4983f..6df6d9f 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
@@ -186,44 +186,44 @@ package org.apache.royale.jewel.beads.views
private function sizeChangeHandler(event:Event) : void
{
// first reads
- var widthToContent:Boolean = (_strand as
UIBase).isWidthSizedToContent();
+ // var widthToContent:Boolean = (_strand as
UIBase).isWidthSizedToContent();
// trace("widthToContent:" + widthToContent);
- var checkbox:CheckBox = (_strand as CheckBox);
+ // 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() +
"-" + Math.floor(Math.random()*1000));
- // addDynamicSelector(".jewel.checkbox." +
ruleName, "border: 1px solid red;");
- // addDynamicSelector(".jewel.checkbox",
"border: 1px solid red;");
- checkbox.className = ruleName;
- }
+ // var ruleName:String;
+ // var beforeSelector:String = "";
+ // if(checkbox.checkWidth || checkbox.checkHeight) {
+ // ruleName = "chkb" + ((new Date()).getTime() +
"-" + Math.floor(Math.random()*1000));
+ // // 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.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.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);
- }
+ // 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)
// {
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass
b/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass
index d04762e..070b8fd 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_checkbox.sass
@@ -42,8 +42,8 @@ $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
opacity: 0
@@ -90,11 +90,11 @@ $checkbox-button-yoffset: 0px
// line-height: $checkbox-button-size + 2
j|CheckBox
- IBeadView:
ClassReference("org.apache.royale.jewel.beads.views.CheckBoxView")
+ // IBeadView:
ClassReference("org.apache.royale.jewel.beads.views.CheckBoxView")
// @media -royale-swf
- // j|CheckBox
+ 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
