diff --git a/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/adwindow/ADTabpanel.java b/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/adwindow/ADTabpanel.java index 79ecaf71f9..8dcb6a2162 100644 --- a/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/adwindow/ADTabpanel.java +++ b/org.adempiere.ui.zk/WEB-INF/src/org/adempiere/webui/adwindow/ADTabpanel.java @@ -135,6 +135,14 @@ import org.zkoss.zul.impl.XulElement; public class ADTabpanel extends Div implements Evaluatee, EventListener, 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 collapsedGroups = new ArrayList(); 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); diff --git a/org.adempiere.ui.zk/theme/default/css/fragment/adwindow.css.dsp b/org.adempiere.ui.zk/theme/default/css/fragment/adwindow.css.dsp index 9a11cf3635..b1185cd570 100644 --- a/org.adempiere.ui.zk/theme/default/css/fragment/adwindow.css.dsp +++ b/org.adempiere.ui.zk/theme/default/css/fragment/adwindow.css.dsp @@ -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%); } +} \ No newline at end of file