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 ec4e328 a bit of animation for Jewel Alert
ec4e328 is described below
commit ec4e32869149b3ba8a081547600a9b6b8c1992e9
Author: Carlos Rovira <[email protected]>
AuthorDate: Mon Sep 10 18:21:17 2018 +0200
a bit of animation for Jewel Alert
---
.../projects/Jewel/src/main/resources/defaults.css | 1 -
.../org/apache/royale/jewel/beads/views/AlertView.as | 13 +++++++++++++
.../projects/Jewel/src/main/sass/components/_alert.sass | 2 +-
.../themes/JewelTheme/src/main/resources/defaults.css | 14 ++++++++++++++
.../src/main/sass/components-primary/_alert.sass | 16 +++++++++++++++-
5 files changed, 43 insertions(+), 3 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index db37cf9..8b910a9 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -113,7 +113,6 @@ j|Form {
position: fixed;
top: 50%;
left: 50%;
- transform: translate(-50%, -50%);
min-width: 350px;
min-height: 200px;
}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
index e4de92e..5051e0d 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
@@ -48,6 +48,7 @@ package org.apache.royale.jewel.beads.views
import org.apache.royale.core.IMeasurementBead;
import org.apache.royale.core.ValuesManager;
import org.apache.royale.utils.loadBeadFromValuesManager;
+ import flash.utils.setTimeout;
}
/**
@@ -182,6 +183,18 @@ package org.apache.royale.jewel.beads.views
{
refreshSize();
}
+
+ setTimeout(prepareForPopUp, 300);
+ }
+
+ private function prepareForPopUp():void
+ {
+ COMPILE::JS
+ {
+ UIBase(_strand).element.classList.add("open");
+ //avoid scroll in html
+ document.body.classList.add("viewport");
+ }
}
private function createButtons():void
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
index 1fe177c..06d0867 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
@@ -45,7 +45,7 @@ $alert-footer-height: 50px
position: fixed
top: 50%
left: 50%
- transform: translate(-50%, -50%)
+ // transform: translate(-50%, -60%)
// margin: 0
// padding: 0
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 5b3a5d7..89fd749 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -77,6 +77,7 @@ div {
}
.jewel.alert {
+ transform: translate(-50%, -60%);
margin: 0;
padding: 0;
min-width: 320px;
@@ -85,6 +86,17 @@ div {
background-color: white;
box-shadow: 0px 20px 65px 0px rgba(0, 0, 0, 0.8);
border-radius: 3px;
+ opacity: 0;
+ will-change: opacity, transform;
+}
+.jewel.alert.open {
+ opacity: 1;
+ transform: translate(-50%, -50%);
+ transition: opacity 0.4s 0ms, transform 0.4s 0ms;
+}
+.jewel.alert.open + .backdrop {
+ opacity: 1;
+ transition: opacity 0.4s 0ms;
}
.jewel.alert .jewel.titlebar {
padding: 20px 20px 0px 20px;
@@ -118,6 +130,8 @@ div {
height: 84px;
}
.jewel.alert + .backdrop {
+ opacity: 0;
+ will-change: opacity;
background-color: rgba(0, 0, 0, 0.5);
}
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass
index 687121f..fc39cf0 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_alert.sass
@@ -44,7 +44,7 @@ $alert-modal-opacity: .5
// top: 50%
// left: 50%
- // transform: translate(-50%, -50%)
+ transform: translate(-50%, -60%)
margin: 0
padding: 0
@@ -60,6 +60,18 @@ $alert-modal-opacity: .5
box-shadow: 0px 20px 65px 0px rgba(0,0,0,0.8)
border-radius: $alert-border-radius
+ opacity: 0
+ will-change: opacity, transform
+
+ &.open
+ opacity: 1
+ transform: translate(-50%, -50%)
+ transition: animation-standard(opacity, .4s),
animation-standard(transform, .4s)
+
+ + .backdrop
+ opacity: 1
+ transition: animation-standard(opacity, .4s)
+
.jewel.titlebar
padding: $alert-padding $alert-padding 0px $alert-padding
height: $alert-header-height
@@ -102,4 +114,6 @@ $alert-modal-opacity: .5
height: $alert-footer-height
+ .backdrop
+ opacity: 0
+ will-change: opacity
background-color: rgba(0, 0, 0, $alert-modal-opacity)
