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 2019/09/22 18:08:24 UTC
[royale-asjs] branch develop updated: adding collapsing transition
animation
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 a2072cb adding collapsing transition animation
a2072cb is described below
commit a2072cb2c4731a3219d2731cab77184a68dbc1c0
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Sep 22 20:08:15 2019 +0200
adding collapsing transition animation
---
.../CollapsibleNavigationSectionRenderer.as | 19 ++++++++++++++++---
.../themes/JewelTheme/src/main/resources/defaults.css | 5 +++--
.../src/main/sass/components-primary/_navigation.sass | 7 +++++--
3 files changed, 24 insertions(+), 7 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/CollapsibleNavigationSectionRenderer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/CollapsibleNavigationSectionRenderer.as
index 52153cc..672bc50 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/CollapsibleNavigationSectionRenderer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/CollapsibleNavigationSectionRenderer.as
@@ -158,8 +158,15 @@ package org.apache.royale.jewel.itemRenderers
if (_open != value){
_open = value;
if (childNavigation) {
- if (value) childNavigation.removeClass('closed');
- else childNavigation.addClass('closed');
+ COMPILE::JS
+ {
+ if (value) {
+ childNavigation.element.style.height = childNavigation.element.scrollHeight + "px";
+
+ } else {
+ childNavigation.element.style.height = 0;
+ }
+ }
}
if (!_inData) dispatchEvent(new Event('dataChange'));
}
@@ -190,7 +197,13 @@ package org.apache.royale.jewel.itemRenderers
childNavigation.addEventListener('change', _onChange);
childNavigation.className = childNavClassName;
super.addElement(childNavigation);
- if (!_open) childNavigation.addClass('closed' );
+ if (!_open)
+ {
+ COMPILE::JS
+ {
+ childNavigation.element.style.height = 0;
+ }
+ }
}
childNavigation.dataProvider = children;
}
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index b745583..9da3b2d 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -624,8 +624,9 @@ j|FormItem {
margin-left: auto;
}
-.navigation-section-group.closed {
- display: none;
+.navigation-section-group {
+ transition: height 0.5s;
+ overflow: hidden;
}
.navigation-section-group .navigationlink {
padding-left: 34px;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_navigation.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_navigation.sass
index 6810f2d..1fa0d9e 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_navigation.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_navigation.sass
@@ -55,8 +55,11 @@
margin-left: auto
.navigation-section-group
- &.closed
- display: none
+ transition: height .5s
+ overflow: hidden
+ // height: this is calculated in code using `childNavigation.element.scrollHeight`
+ //&.closed
+ // height: 0
.navigationlink
padding-left: 34px
\ No newline at end of file