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/08/21 11:42:20 UTC
[royale-asjs] branch develop updated: make DateChooser popup in
DateField responsive to work better in phone, tablets and desktop
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 08090a0 make DateChooser popup in DateField responsive to work better in phone, tablets and desktop
08090a0 is described below
commit 08090a0a761289785087c4b975e761e9334d189f
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Aug 21 13:42:15 2018 +0200
make DateChooser popup in DateField responsive to work better in phone, tablets and desktop
---
.../src/main/royale/DateComponentsPlayGround.mxml | 31 +++++----
.../projects/Jewel/src/main/resources/defaults.css | 63 ++++++++++++++++--
.../royale/jewel/beads/views/DateFieldView.as | 47 ++++++++++++--
.../projects/Jewel/src/main/sass/_global.sass | 4 ++
.../src/main/sass/components/_datechooser.sass | 4 ++
.../Jewel/src/main/sass/components/_datefield.sass | 74 ++++++++++++++++++++--
.../Jewel/src/main/sass/components/_drawer.sass | 4 --
.../JewelTheme/src/main/resources/defaults.css | 6 +-
.../main/sass/components-primary/_datechooser.sass | 8 +--
9 files changed, 199 insertions(+), 42 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml
index b5ad0d5..597ae41 100644
--- a/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml
@@ -24,7 +24,6 @@ limitations under the License.
<fx:Script>
<![CDATA[
- import org.apache.royale.core.IFormatBead;
import org.apache.royale.html.accessories.DateFormatDDMMYYYY;
private function dateChooserDefaultChanged():void
@@ -66,15 +65,16 @@ limitations under the License.
private function configDateChooserToES():void
{
dateChooserES.model.dayNames = ['D','L','M','X','J','V','S'];
+ dateChooserES.model.monthNames = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Deciembre"];
dateChooserES.model.firstDayOfWeek = 1;
}
private function configDateFieldToES():void
{
- //dateFieldES.removeBead(dateFieldES.getBeadByType(IFormatBead));
- dateFieldES.addBead(new DateFormatDDMMYYYY());
+ dateFieldES.addBead(new DateFormatDDMMYYYY()); // this one removes the default IFormatBead
dateFieldES.model.dayNames = ['D','L','M','X','J','V','S'];
+ dateFieldES.model.monthNames = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Deciembre"];
dateFieldES.model.firstDayOfWeek = 1;
}
]]>
@@ -90,19 +90,17 @@ limitations under the License.
<j:Label id="dateChooserDefaultSelectedDate" multiline="true" html="<strong>DateChooser selected date:</strong> " width="275"/>
</j:Card>
</j:GridCell>
+
<j:GridCell desktopNumerator="1" desktopDenominator="2"
tabletNumerator="1" tabletDenominator="2"
phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel DateField (Default)"/>
-
- <j:HGroup gap="3">
- <j:DateField id="dateFieldDefault" change="dateFieldDefaultChanged()"/>
- <j:Button text="Select today" click="dateFieldToToday()" emphasis="primary"/>
- </j:HGroup>
- <j:Label id="dateFieldDefaultSelectedDate" multiline="true" html="<strong>DateField selected date:</strong> "/>
+ <html:H3 text="Jewel DateChooser (Spanish)"/>
+ <j:DateChooser id="dateChooserES" change="dateChooserESChanged()" initComplete="configDateChooserToES()"/>
+ <j:Label id="dateChooserESSelectedDate" multiline="true" html="<strong>DateChooser fecha seleccionada:</strong> " width="275"/>
</j:Card>
</j:GridCell>
+
</j:Grid>
<j:Grid gap="true">
@@ -110,11 +108,16 @@ limitations under the License.
tabletNumerator="1" tabletDenominator="2"
phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel DateChooser (Spanish)"/>
- <j:DateChooser id="dateChooserES" change="dateChooserESChanged()" initComplete="configDateChooserToES()"/>
- <j:Label id="dateChooserESSelectedDate" multiline="true" html="<strong>DateChooser fecha seleccionada:</strong> " width="275"/>
+ <html:H3 text="Jewel DateField (Default)"/>
+
+ <j:HGroup gap="3">
+ <j:DateField id="dateFieldDefault" change="dateFieldDefaultChanged()"/>
+ <j:Button text="Select today" click="dateFieldToToday()" emphasis="primary"/>
+ </j:HGroup>
+ <j:Label id="dateFieldDefaultSelectedDate" multiline="true" html="<strong>DateField selected date:</strong> "/>
</j:Card>
</j:GridCell>
+
<j:GridCell desktopNumerator="1" desktopDenominator="2"
tabletNumerator="1" tabletDenominator="2"
phoneNumerator="1" phoneDenominator="1">
@@ -123,7 +126,7 @@ limitations under the License.
<j:HGroup gap="3">
<j:DateField id="dateFieldES" change="dateFieldESChanged()" beadsAdded="configDateFieldToES()"/>
- <j:Button text="¡Selecciona Hoy!" click="dateFieldESToToday()" emphasis="primary"/>
+ <j:Button text="Selecciona Hoy" click="dateFieldESToToday()" emphasis="primary"/>
</j:HGroup>
<j:Label id="dateFieldESSelectedDate" multiline="true" html="<strong>DateField fecha seleccionada:</strong> "/>
</j:Card>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index d2c9e30..014d0f1 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -24,6 +24,10 @@ html, body {
height: 100%;
}
+.remove-app-scroll {
+ overflow: hidden;
+}
+
::-moz-focus-inner, ::-moz-focus-outer {
border: 0;
}
@@ -312,10 +316,63 @@ j|DateChooser {
top: calc(50% - 11px);
}
-.dateChooserPopUp {
+.datechooser-popup {
+ position: fixed;
+ pointer-events: none;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ contain: strict;
+ z-index: 5;
+ color: rgba(0, 0, 0, 0.8);
+}
+.datechooser-popup::before {
position: absolute;
+ display: block;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ content: "";
+ opacity: 0;
+ background-color: rgba(0, 0, 0, 0.65);
+ will-change: opacity;
+ transition: opacity 0.4s 0ms;
+}
+.datechooser-popup .jewel.table {
+ transform: translate(-50%, 100%);
+ transition: transform 0.15s 0ms;
+ will-change: transform;
+ 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;
+}
+.datechooser-popup.open {
+ pointer-events: auto;
+}
+.datechooser-popup.open::before {
+ opacity: 1;
+}
+.datechooser-popup.open .jewel.table {
+ transform: translate(-50%, -100%);
+ transition: transform 0.3s 0ms;
}
+@media (max-width: 768px) {
+ .datechooser-popup .jewel.table {
+ width: calc(100% - 20px);
+ }
+}
+@media (min-width: 768px) and (max-width: 992px) {
+ .datechooser-popup .jewel.table {
+ width: calc(100% - 300px);
+ }
+}
j|DateField {
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DateFieldView");
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DateChooserModel");
@@ -389,10 +446,6 @@ j|DateField {
max-width: 310px;
}
}
-.remove-app-scroll {
- overflow: hidden;
-}
-
.jewel.drawerheader {
position: relative;
display: flex;
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 ecad494..6f53d7b 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
@@ -151,6 +151,11 @@ package org.apache.royale.jewel.beads.views
var model:IBeadModel = _strand.getBeadByType(IBeadModel) as IBeadModel;
IEventDispatcher(model).addEventListener("selectedDateChanged", selectionChangeHandler);
}
+
+ private function handlePopUpInitComplete(event:Event):void
+ {
+ getHost().dispatchEvent(new Event("dateChooserInitComplete"));
+ }
private function handleFormatChanged(event:Event):void
{
@@ -208,27 +213,57 @@ package org.apache.royale.jewel.beads.views
_popUp = new DateChooser();
}
+ _popUp.className = "datechooser-popup";
+ _popUp.addEventListener("initComplete", handlePopUpInitComplete);
+
var model:IDateChooserModel = _strand.getBeadByType(IDateChooserModel) as IDateChooserModel;
_popUp.selectedDate = model.selectedDate;
+ _popUp.model.dayNames = model.dayNames;
+ _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;
- _popUp.className = "dateChooserPopUp";
+ // 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);
+
+ COMPILE::JS
+ {
+ // rq = requestAnimationFrame(prepareForPopUp); // not work in Chrome/Firefox, while works in Safari, IE11
+ setTimeout(prepareForPopUp, 300)
+ }
+
}
else
{
UIUtils.removePopUp(_popUp);
+ COMPILE::JS
+ {
+ document.body.classList.remove("remove-app-scroll");
+ }
}
}
_showingPopup = false;
}
+ COMPILE::JS
+ private var rq:int;
+ private function prepareForPopUp():void
+ {
+ //avoid scroll in html
+ _popUp.addClass("open");
+ COMPILE::JS
+ {
+ //cancelAnimationFrame(rq);
+ document.body.classList.add("remove-app-scroll");
+ }
+ }
+
/**
* @private
*/
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/_global.sass
index 069af7b..d92aced 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -27,6 +27,10 @@
html, body
height: 100%
+// Used for float
+.remove-app-scroll
+ overflow: hidden
+
// Firefox
// remove dotted outline
::-moz-focus-inner, ::-moz-focus-outer
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass b/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
index f0d24d1..d1d5dfd 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
@@ -24,6 +24,10 @@ $datechooser-button-size: 22px
$datechooser-button-xoffset: calc(50% - #{$datechooser-button-size/2})
$datechooser-button-yoffset: calc(50% - #{$datechooser-button-size/2})
$datechooser-tableitem-size: 42px
+
+//$animation-curve-timing-function: cubic-bezier(.3, 0, .1, 2) !default
+@function animation-standard($name, $duration, $delay: 0ms)
+ @return $name $duration $delay //$animation-curve-timing-function
.jewel.datechooser
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass b/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass
index 7c5c20d..b72f9d1 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_datefield.sass
@@ -23,6 +23,9 @@
$datefield-button-size: 22px
$datefield-button-xoffset: calc(50% - #{$datefield-button-size/2})
$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
.jewel.datefield
display: inline-flex
@@ -56,10 +59,73 @@ $datefield-button-yoffset: calc(50% - #{$datefield-button-size/2})
left: $datefield-button-xoffset
top: $datefield-button-yoffset
-
-.dateChooserPopUp
- position: absolute
-
+.datechooser-popup
+ position: fixed
+ pointer-events: none
+
+ bottom: 0
+ left: 0
+
+ width: 100%
+ height: 100%
+
+ overflow: hidden
+ contain: strict
+
+ z-index: 5
+
+ color: rgba(0, 0, 0, 0.8)
+
+ &::before
+ position: absolute
+ display: block
+
+ top: 0
+ left: 0
+
+ width: 100%
+ height: 100%
+
+ content: ""
+ opacity: 0
+
+ background-color: rgba($datechooser-popup-overlay-color, $datechooser-popup-overlay-opacity)
+ will-change: opacity
+ transition: animation-standard(opacity, .4s)
+
+
+ .jewel.table
+ transform: translate(-50%, 100%)
+ transition: animation-standard(transform, .15s)
+ will-change: transform
+
+ 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
+
+ &.open
+ pointer-events: auto
+ &::before
+ opacity: 1
+
+ .jewel.table
+ transform: translate(-50%, -100%)
+ transition: animation-standard(transform, .3s)
+
+@media (max-width: $tablet)
+ .datechooser-popup
+ .jewel.table
+ width: calc(100% - #{2*$datechooser-popup-margin-offset})
+
+@media (min-width: $tablet) and (max-width: $desktop)
+ .datechooser-popup
+ .jewel.table
+ width: calc(100% - #{30*$datechooser-popup-margin-offset})
+
+
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/sass/components/_drawer.sass b/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass
index 8c7c9b6..f3abaa2 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_drawer.sass
@@ -98,10 +98,6 @@ $drawer-float-max-width: 310px
width: calc(100% - #{$drawer-float-width-offset})
max-width: $drawer-float-max-width
-// Used for float
-.remove-app-scroll
- overflow: hidden
-
// DrawerHeader
.jewel.drawerheader
position: relative
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 87b97c4..53e7a6f 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -233,14 +233,10 @@ j|Card {
font-size: 16px;
}
-.jewel.datechooser {
+.jewel.datechooser .jewel.table {
background: white;
border: 1px solid #d9d9d9;
border-radius: 0.25rem;
-}
-.jewel.datechooser .jewel.table {
- background: white;
- border: none;
box-shadow: none;
}
.jewel.datechooser .jewel.table .jewel.button {
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass
index 578aee7..8c40a81 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_datechooser.sass
@@ -24,13 +24,13 @@ $datechooser-border-radius: $border-radius
$datechooser-buttons-border-radius: 50%
.jewel.datechooser
- background: lighten($default-color, 20%)
- border: 1px solid $default-color
- border-radius: $datechooser-border-radius
.jewel.table
background: lighten($default-color, 20%)
- border: none
+ border: 1px solid $default-color
+ border-radius: $datechooser-border-radius
+ // background: lighten($default-color, 20%)
+ // border: none
box-shadow: none
.jewel.button