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/09/02 21:12:53 UTC
[royale-asjs] branch develop updated: ComboBox and DateField popups
for Phone/Table (sliding up from bottom) and Desktop (classic fade out from
control) responsive modes
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 d8dcb41 ComboBox and DateField popups for Phone/Table (sliding up from bottom) and Desktop (classic fade out from control) responsive modes
d8dcb41 is described below
commit d8dcb41819ba2c695c603aa3fe044c593a92b1fe
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Sep 2 23:12:47 2018 +0200
ComboBox and DateField popups for Phone/Table (sliding up from bottom) and Desktop (classic fade out from control) responsive modes
---
.../projects/Jewel/src/main/resources/defaults.css | 50 +++++++++++++---
.../royale/jewel/beads/views/ComboBoxView.as | 11 ++--
.../royale/jewel/beads/views/DateFieldView.as | 68 +++++++++++++++++++---
.../Jewel/src/main/sass/components/_combobox.sass | 21 ++++++-
.../Jewel/src/main/sass/components/_datefield.sass | 36 ++++++++++--
5 files changed, 158 insertions(+), 28 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 3dd04fb..e6aa8da 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -308,14 +308,15 @@ j|ComboBox {
}
.combobox-popup .jewel.list {
transform: translate(-50%, 100%);
- transition: transform 0.15s 0ms;
- will-change: transform;
+ transition: none;
+ will-change: transform, opacity;
bottom: auto;
top: calc(100% - 10px);
left: 50%;
touch-action: none;
box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7) !important;
width: 16.5em;
+ opacity: 0;
}
.combobox-popup.open {
pointer-events: auto;
@@ -325,7 +326,8 @@ j|ComboBox {
}
.combobox-popup.open .jewel.list {
transform: translate(-50%, -100%);
- transition: transform 0.3s 0ms;
+ transition: transform 0.4s 0ms, opacity 0.4s 0ms;
+ opacity: 1;
}
@media (max-width: 768px) {
@@ -343,13 +345,23 @@ j|ComboBox {
background-color: rgba(0, 0, 0, 0);
}
.combobox-popup .jewel.list {
+ transform: none;
+ transition: none;
box-shadow: none !important;
}
+ .combobox-popup .jewel.list .jewel.item {
+ height: 0;
+ overflow: hidden;
+ transition: height 200ms ease-in;
+ }
.combobox-popup.open .jewel.list {
transform: none;
top: auto;
left: auto;
}
+ .combobox-popup.open .jewel.list .jewel.item {
+ height: 34px;
+ }
}
j|ComboBoxList {
IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout");
@@ -451,14 +463,14 @@ j|DateChooser {
}
.datechooser-popup .jewel.table {
transform: translate(-50%, 100%);
- transition: transform 0.15s 0ms;
- will-change: transform;
+ transition: none;
+ will-change: transform, opacity;
bottom: auto;
top: calc(100% - 10px);
left: 50%;
- overflow: hidden;
touch-action: none;
box-shadow: 0px 0px 6px 1px rgba(1, 1, 1, 0.7) !important;
+ opacity: 0;
}
.datechooser-popup.open {
pointer-events: auto;
@@ -468,7 +480,8 @@ j|DateChooser {
}
.datechooser-popup.open .jewel.table {
transform: translate(-50%, -100%);
- transition: transform 0.3s 0ms;
+ transition: transform 0.4s 0ms, opacity 0.4s 0ms;
+ opacity: 1;
}
@media (max-width: 768px) {
@@ -481,6 +494,29 @@ j|DateChooser {
width: calc(100% - 300px);
}
}
+@media (min-width: 992px) {
+ .datechooser-popup::before {
+ background-color: rgba(0, 0, 0, 0);
+ }
+ .datechooser-popup .jewel.table {
+ transform: none;
+ transition: none;
+ box-shadow: none !important;
+ }
+ .datechooser-popup .jewel.table .jewel.item {
+ height: 0;
+ overflow: hidden;
+ transition: height 200ms ease-in;
+ }
+ .datechooser-popup.open .jewel.table {
+ transform: none;
+ top: auto;
+ left: auto;
+ }
+ .datechooser-popup.open .jewel.table .jewel.item {
+ height: 34px;
+ }
+}
j|DateField {
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DateFieldView");
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DateChooserModel");
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as
index 116efcc..6d720de 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as
@@ -166,7 +166,6 @@ package org.apache.royale.jewel.beads.views
var model:IComboBoxModel = _strand.getBeadByType(IComboBoxModel) as IComboBoxModel;
_list.model = model;
-
var popupHost:IPopUpHost = UIUtils.findPopUpHost(_strand as IUIBase);
popupHost.popUpParent.addElement(_list);
@@ -292,15 +291,15 @@ package org.apache.royale.jewel.beads.views
{
var origin:Point = new Point(0, button.y+button.height);
var relocated:Point = PointUtils.localToGlobal(origin,_strand);
- dataGroup.x = relocated.x;
- dataGroup.y = relocated.y;
- // dataGroup.element.style.left = relocated.x+"px";
- // dataGroup.element.style.top = relocated.y+"px";
+ // dataGroup.x = relocated.x;
+ // dataGroup.y = relocated.y;
+ dataGroup.positioner.style["left"] = relocated.x + "px";
+ dataGroup.positioner.style["top"] = relocated.y + "px";
}
else
{
- dataGroup.positioner.style["top"] = "calc(100% - 10px)";
dataGroup.positioner.style["left"] = "50%";
+ dataGroup.positioner.style["top"] = "calc(100% - 10px)";
}
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as
index 6a209a3..a20bd96 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as
@@ -34,6 +34,12 @@ package org.apache.royale.jewel.beads.views
import org.apache.royale.jewel.beads.controls.datefield.DateFieldMaskedTextInput;
import org.apache.royale.jewel.beads.controls.textinput.MaxNumberCharacters;
import org.apache.royale.utils.UIUtils;
+ import org.apache.royale.utils.PointUtils;
+ import org.apache.royale.geom.Point;
+ import org.apache.royale.jewel.supportClasses.ResponsiveSizes;
+ import org.apache.royale.jewel.Table;
+ import org.apache.royale.jewel.beads.views.DateChooserView;
+
COMPILE::SWF
{
//import org.apache.royale.jewel.beads.views.TextInputView;
@@ -223,19 +229,21 @@ package org.apache.royale.jewel.beads.views
_popUp.model.monthNames = model.monthNames;
_popUp.model.firstDayOfWeek = model.firstDayOfWeek;
-
var host:IPopUpHost = UIUtils.findPopUpHost(getHost()) as IPopUpHost;
- // var point:Point = new Point(_textInput.width, _button.height);
- // var p2:Point = PointUtils.localToGlobal(point, _strand);
- // var p3:Point = PointUtils.globalToLocal(p2, host);
- // _popUp.x = p3.x;
- // _popUp.y = p3.y;
-
host.popUpParent.addElement(_popUp);
-
+ // viewBead.popUp is DateChooser that fills 100% of browser window-> We want Table inside
+ daysTable = (popUp.getBeadByType(DateChooserView) as DateChooserView).daysTable;
+
// rq = requestAnimationFrame(prepareForPopUp); // not work in Chrome/Firefox, while works in Safari, IE11, setInterval/Timer as well doesn't work right in Firefox
setTimeout(prepareForPopUp, 300);
+
+ COMPILE::JS
+ {
+ window.addEventListener('resize', autoResizeHandler, false);
+ }
+
+ autoResizeHandler();
}
else
{
@@ -243,6 +251,7 @@ package org.apache.royale.jewel.beads.views
COMPILE::JS
{
document.body.classList.remove("viewport");
+ window.removeEventListener('resize', autoResizeHandler, false);
}
_popUp.removeEventListener("initComplete", handlePopUpInitComplete);
_popUp = null;
@@ -272,5 +281,48 @@ package org.apache.royale.jewel.beads.views
getHost().dispatchEvent(new Event("selectedDateChanged"));
getHost().dispatchEvent(new Event(Event.CHANGE));
}
+
+ private var daysTable:Table;
+ /**
+ * When set to "auto" this resize handler monitors the width of the app window
+ * and switch between fixed and float modes.
+ *
+ * Note:This could be done with media queries, but since it handles open/close
+ * maybe this is the right way
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ private function autoResizeHandler(event:Event = null):void
+ {
+ COMPILE::JS
+ {
+ var outerWidth:Number = window.outerWidth;
+
+ // Desktop width size
+ if(outerWidth > ResponsiveSizes.DESKTOP_BREAKPOINT)
+ {
+ // var point:Point = new Point(_textInput.width, _button.height);
+ // var p2:Point = PointUtils.localToGlobal(point, _strand);
+ // _popUp.x = p3.x;
+ // _popUp.y = p3.y;
+ // var p3:Point = PointUtils.globalToLocal(p2, host);
+
+ var origin:Point = new Point(0, _button.y + _button.height);
+ var relocated:Point = PointUtils.localToGlobal(origin, _strand);
+ // daysTable.x = relocated.x;
+ // daysTable.y = relocated.y;
+ daysTable.positioner.style["left"] = relocated.x + "px";
+ daysTable.positioner.style["top"] = relocated.y + "px";
+ }
+ else
+ {
+ daysTable.positioner.style["left"] = "50%";
+ daysTable.positioner.style["top"] = "calc(100% - 10px)";
+ }
+ }
+ }
}
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass b/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
index 1e67397..0e6c387 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_combobox.sass
@@ -62,6 +62,7 @@ j|ComboBox
$combobox-popup-margin-offset: 10px
$combobox-popup-overlay-color: #000 !default
$combobox-popup-overlay-opacity: .65 !default
+$combobox-item-min-heigh: 34px
.combobox-popup
position: fixed
@@ -100,8 +101,8 @@ $combobox-popup-overlay-opacity: .65 !default
.jewel.list
transform: translate(-50%, 100%)
- transition: animation-standard(transform, .15s)
- will-change: transform
+ transition: none
+ will-change: transform, opacity
bottom: auto
top: calc(100% - #{$combobox-popup-margin-offset})
@@ -110,6 +111,7 @@ $combobox-popup-overlay-opacity: .65 !default
box-shadow: 0px 0px 6px 1px rgba(.7, .7, .7, .7) !important
width: $combobox-input-width + $combobox-button-width
+ opacity: 0
&.open
pointer-events: auto
@@ -119,7 +121,8 @@ $combobox-popup-overlay-opacity: .65 !default
.jewel.list
transform: translate(-50%, -100%)
- transition: animation-standard(transform, .3s)
+ transition: animation-standard(transform, .4s), animation-standard(opacity, .4s)
+ opacity: 1
@media (max-width: $tablet)
.combobox-popup
@@ -136,13 +139,25 @@ $combobox-popup-overlay-opacity: .65 !default
&::before
background-color: rgba($combobox-popup-overlay-color, 0)
.jewel.list
+ // transform: translate(0px, -200px)
+ transform: none
+ transition: none
box-shadow: none !important
+
+ .jewel.item
+ height: 0
+ overflow: hidden
+ transition: height 200ms ease-in
+
&.open
.jewel.list
transform: none
top: auto
left: auto
+ .jewel.item
+ height: $combobox-item-min-heigh //this should match $item-min-heigh in _itemrenderer.sass
+
j|ComboBoxList
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass b/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass
index 7f07f5d..466e3fa 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass
@@ -26,6 +26,7 @@ $datefield-button-yoffset: calc(50% - #{$datefield-button-size/2})
$datechooser-popup-margin-offset: 10px
$datechooser-popup-overlay-color: #000 !default
$datechooser-popup-overlay-opacity: .65 !default
+$datechooser-item-min-heigh: 34px
.jewel.datefield
display: inline-flex
@@ -88,24 +89,27 @@ $datechooser-popup-overlay-opacity: .65 !default
.jewel.table
transform: translate(-50%, 100%)
- transition: animation-standard(transform, .15s)
- will-change: transform
+ transition: none
+ will-change: transform, opacity
bottom: auto
top: calc(100% - #{$datechooser-popup-margin-offset})
left: 50%
- overflow: hidden
touch-action: none
box-shadow: 0px 0px 6px 1px rgba(.7, .7, .7, .7) !important
+ opacity: 0
+
&.open
pointer-events: auto
+
&::before
opacity: 1
.jewel.table
transform: translate(-50%, -100%)
- transition: animation-standard(transform, .3s)
+ transition: animation-standard(transform, .4s), animation-standard(opacity, .4s)
+ opacity: 1
@media (max-width: $tablet)
.datechooser-popup
@@ -117,6 +121,30 @@ $datechooser-popup-overlay-opacity: .65 !default
.jewel.table
width: calc(100% - #{30*$datechooser-popup-margin-offset})
+@media (min-width: $desktop)
+ .datechooser-popup
+ &::before
+ background-color: rgba($datechooser-popup-overlay-color, 0)
+ .jewel.table
+ // transform: translate(0px, -200px)
+ transform: none
+ transition: none
+ box-shadow: none !important
+
+ .jewel.item
+ height: 0
+ overflow: hidden
+ transition: height 200ms ease-in
+
+ &.open
+ .jewel.table
+ transform: none
+ top: auto
+ left: auto
+
+ .jewel.item
+ height: $datechooser-item-min-heigh //this should match $item-min-heigh in _itemrenderer.sass
+
j|DateField
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DateFieldView")