midsuit
/
core-jgi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

IDEMPIERE-4493 Mobile: Animation for Swipe Gesture (#301)

This commit is contained in:
hengsin 2020-10-16 17:46:48 +08:00 committed by GitHub
parent 3246bb8b1e
commit a21fe225e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 81 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/adwindow/ADTabpanel.java
View File

@ -135,6 +135,14 @@ import org.zkoss.zul.impl.XulElement;
public class ADTabpanel extends Div implements Evaluatee, EventListener<Event>,
DataStatusListener, IADTabpanel, IdSpace, IFieldEditorContainer
{
private static final String SLIDE_LEFT_IN_CSS = "slide-left-in";
private static final String SLIDE_LEFT_OUT_CSS = "slide-left-out";
private static final String SLIDE_RIGHT_IN_CSS = "slide-right-in";
private static final String SLIDE_RIGHT_OUT_CSS = "slide-right-out";
/**
*
*/
@ -263,11 +271,25 @@ DataStatusListener, IADTabpanel, IdSpace, IFieldEditorContainer
{
form.addEventListener("onSwipeRight", e -> {
if (windowPanel != null && windowPanel.getBreadCrumb() != null && windowPanel.getBreadCrumb().isPreviousEnabled())
windowPanel.onPrevious();
{
windowPanel.saveAndNavigate(b -> {
if (b) {
LayoutUtils.addSclass(SLIDE_RIGHT_OUT_CSS, form);
windowPanel.onPrevious();
}
});
}
});
form.addEventListener("onSwipeLeft", e -> {
if (windowPanel != null && windowPanel.getBreadCrumb() != null && windowPanel.getBreadCrumb().isNextEnabled())
windowPanel.onNext();
{
windowPanel.saveAndNavigate(b -> {
if (b) {
LayoutUtils.addSclass(SLIDE_LEFT_OUT_CSS, form);
windowPanel.onNext();
}
});
}
});
}
@ -872,6 +894,20 @@ DataStatusListener, IADTabpanel, IdSpace, IFieldEditorContainer
return;
}
if (form.getSclass() != null && form.getSclass().contains(SLIDE_RIGHT_OUT_CSS)) {
Executions.schedule(getDesktop(), e -> {
LayoutUtils.removeSclass(SLIDE_RIGHT_OUT_CSS, form);
LayoutUtils.addSclass(SLIDE_RIGHT_IN_CSS, form);
Executions.schedule(getDesktop(), e1 -> onAfterSlide(e1), new Event("onAfterSlide", form));
}, new Event("onAfterSlideRightOut", form));
} else if (form.getSclass() != null && form.getSclass().contains(SLIDE_LEFT_OUT_CSS)) {
Executions.schedule(getDesktop(), e -> {
LayoutUtils.removeSclass(SLIDE_LEFT_OUT_CSS, form);
LayoutUtils.addSclass(SLIDE_LEFT_IN_CSS, form);
Executions.schedule(getDesktop(), e1 -> onAfterSlide(e1), new Event("onAfterSlide", form));
}, new Event("onAfterSlideLeftOut", form));
}
List<Group> collapsedGroups = new ArrayList<Group>();
for (Group group : allCollapsibleGroups) {
if (! group.isOpen())
@ -1014,6 +1050,15 @@ DataStatusListener, IADTabpanel, IdSpace, IFieldEditorContainer
if (logger.isLoggable(Level.CONFIG)) logger.config(gridTab.toString() + " - fini - " + (col<=0 ? "complete" : "seletive"));
} // dynamicDisplay
private void onAfterSlide(Event e) {
//delay to let animation complete
try {
Thread.sleep(500);
} catch (InterruptedException e1) {}
LayoutUtils.removeSclass(SLIDE_LEFT_IN_CSS, form);
LayoutUtils.removeSclass(SLIDE_RIGHT_IN_CSS, form);
}
private void echoDeferSetSelectedNodeEvent() {
if (getAttribute(ON_DEFER_SET_SELECTED_NODE_ATTR) == null) {
setAttribute(ON_DEFER_SET_SELECTED_NODE_ATTR, Boolean.TRUE);

34
org.adempiere.ui.zk/theme/default/css/fragment/adwindow.css.dsp
View File

@ -363,3 +363,37 @@
cursor: pointer;
display: inline-block;
}
.slide-right-out {
animation: slide-right-out 0.3s forwards;
animation-timing-function: ease-in;
}
@keyframes slide-right-out {
0% { transform: translateX(0%); }
100% { transform: translateX(100%); }
}
.slide-right-in {
animation: slide-right-in 0.3s forwards;
animation-timing-function: ease-out;
}
@keyframes slide-right-in {
0% { transform: translateX(-100%); }
100% { transform: translateX(0%); }
}
.slide-left-out {
animation: slide-left-out 0.3s forwards;
animation-timing-function: ease-in;
}
@keyframes slide-left-out {
0% { transform: translateX(0%); }
100% { transform: translateX(-100%); }
}
.slide-left-in {
animation: slide-left-in 0.3s forwards;
animation-timing-function: ease-out;
}
@keyframes slide-left-in {
0% { transform: translateX(100%); }
100% { transform: translateX(0%); }
}