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 3c0ac72 animate the snackbar
3c0ac72 is described below
commit 3c0ac7260ca0dbcfc993856e2968d575b12010a2
Author: Carlos Rovira <[email protected]>
AuthorDate: Mon Sep 10 19:56:18 2018 +0200
animate the snackbar
---
.../projects/Jewel/src/main/resources/defaults.css | 1 +
.../jewel/beads/controllers/SnackbarController.as | 9 +++-
.../royale/jewel/beads/views/SnackbarView.as | 15 ++++++
.../Jewel/src/main/sass/components/_alert.sass | 2 +
.../Jewel/src/main/sass/components/_snackbar.sass | 4 ++
.../JewelTheme/src/main/resources/defaults.css | 9 ++++
.../main/sass/components-primary/_snackbar.sass | 60 +++++++++++++---------
7 files changed, 74 insertions(+), 26 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 8b910a9..71af42a 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3143,6 +3143,7 @@ j|Slider {
bottom: 0;
position: fixed;
width: 100%;
+ z-index: 5;
}
.jewel.snackbar-content {
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/SnackbarController.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/SnackbarController.as
index be0f54f..dfbfb9e 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/SnackbarController.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/SnackbarController.as
@@ -137,13 +137,20 @@ package org.apache.royale.jewel.beads.controllers
*/
COMPILE::JS
private function timerHandler(event:Event):void {
+ (_strand as Snackbar).removeClass("open");
_singletonInstance = null;
if (_timer) {
_timer.stop();
_timer.removeAllListeners();
_timer = null;
}
- (_strand as Snackbar).dismiss();
+ setTimeout(prepareForDismiss, 400);
+
}
+
+ private function prepareForDismiss():void
+ {
+ (_strand as Snackbar).dismiss();
+ }
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SnackbarView.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SnackbarView.as
index 5739a03..dade0af 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SnackbarView.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/SnackbarView.as
@@ -18,11 +18,16 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.views
{
+ COMPILE::SWF
+ {
+ import flash.utils.setTimeout;
+ }
import org.apache.royale.core.BeadViewBase;
import org.apache.royale.core.IStrand;
import org.apache.royale.events.Event;
import org.apache.royale.jewel.Snackbar;
import org.apache.royale.jewel.beads.models.SnackbarModel;
+ import org.apache.royale.core.UIBase;
/**
* The SnackbarView class creates the visual elements of the
org.apache.royale.jewel.Snackbar
@@ -91,8 +96,18 @@ package org.apache.royale.jewel.beads.views
}
if (model.action) actionChangeHandler(null);
+
+ setTimeout(prepareForPopUp, 300);
}
+ private function prepareForPopUp():void
+ {
+ COMPILE::JS
+ {
+ UIBase(_strand).element.classList.add("open");
+ }
+ }
+
/**
* Update the text when message changed.
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
index 06d0867..944b17f 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
@@ -59,6 +59,8 @@ $alert-footer-height: 50px
// border-radius: $alert-border-radius
// box-shadow: 0px 6px 60px -10px rgba(112,112,112,0.7)
// background-color: #FFFFFF
+ &.open
+ + .backdrop
.jewel.titlebar
// padding: $alert-padding $alert-padding 0px $alert-padding
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_snackbar.sass
b/frameworks/projects/Jewel/src/main/sass/components/_snackbar.sass
index efdab42..ed1ff3f 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_snackbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_snackbar.sass
@@ -26,6 +26,10 @@
bottom: 0
position: fixed
width: 100%
+ z-index: 5
+
+ &.open
+
.jewel.snackbar-content
max-width: 568px
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 89fd749..3c20b8d 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -619,6 +619,15 @@ j|Card {
border-radius: 3px;
}
+.jewel.snackbar {
+ will-change: transform;
+ transform: translate(0, 100%);
+ transition: transform 0.4s 0ms;
+}
+.jewel.snackbar.open {
+ transform: translate(0);
+ transition: transform 0.4s 0ms;
+}
.jewel.snackbar.primary .jewel.snackbar-content {
background: linear-gradient(#54b7f3, #24a3ef);
border: 1px solid #0f88d1;
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_snackbar.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_snackbar.sass
index 2fa582b..c1320b2 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_snackbar.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_snackbar.sass
@@ -23,35 +23,45 @@
$snackbar-border-radius: $border-radius
$snackbar-default-color: #2C3E50
$snackbar-action-color: $action-color
+$snackbar-popup-margin-offset: 10px
-.jewel.snackbar.primary
- .jewel.snackbar-content
- @if $flat
- background: $primary-color
- border: 0px solid
- @else
- background: linear-gradient(lighten($primary-color,
5%), darken($primary-color, 5%))
- border: 1px solid darken($primary-color, 15%)
- box-shadow: inset 0 1px 0 lighten($primary-color, 20%)
- border-bottom: none
-
- // +jewel-bg-border("normal", $primary-color,
$snackbar-border-radius) --> we want only rounded corners on top corners
-
- .jewel.snackbar-message
- color: $font-theme-color
+.jewel.snackbar
+ will-change: transform
+ transform: translate(0, 100%)
+ transition: animation-standard(transform, .4s)
+
+ &.open
+ transform: translate(0)
+ transition: animation-standard(transform, .4s)
- .jewel.snackbar-action
- color: $yellow
-
- &:hover
+ &.primary
+ .jewel.snackbar-content
@if $flat
- background: darken($primary-color, 5%)
- border: none
+ background: $primary-color
+ border: 0px solid
@else
- background: linear-gradient($primary-color,
darken($primary-color, 10%))
- // +jewel-bg-border("hover", $primary-color)
- // @if $flat == false
- // border: none
+ background:
linear-gradient(lighten($primary-color, 5%), darken($primary-color, 5%))
+ border: 1px solid darken($primary-color, 15%)
+ box-shadow: inset 0 1px 0
lighten($primary-color, 20%)
+ border-bottom: none
+
+ // +jewel-bg-border("normal", $primary-color,
$snackbar-border-radius) --> we want only rounded corners on top corners
+
+ .jewel.snackbar-message
+ color: $font-theme-color
+
+ .jewel.snackbar-action
+ color: $yellow
+
+ &:hover
+ @if $flat
+ background: darken($primary-color, 5%)
+ border: none
+ @else
+ background:
linear-gradient($primary-color, darken($primary-color, 10%))
+ // +jewel-bg-border("hover", $primary-color)
+ // @if $flat == false
+ // border: none
.jewel.snackbar-content
background: $snackbar-default-color
