IDEMPIERE-3518 Improvement For Mobile Compatibility. refinement of move selected tree item.

This commit is contained in:
Heng Sin Low 2017-10-24 10:11:02 +08:00
parent eb4eb1d1a4
commit e66ebd092f
2 changed files with 48 additions and 5 deletions

View File

@ -99,6 +99,8 @@ public class TreeSearchPanel extends Panel implements EventListener<Event>, Tree
private Hlayout moveItemBox; private Hlayout moveItemBox;
private ToolBarButton moveItemBtn;
private static final String PREFIX_DOCUMENT_SEARCH = "/"; private static final String PREFIX_DOCUMENT_SEARCH = "/";
/** /**
@ -185,10 +187,12 @@ public class TreeSearchPanel extends Panel implements EventListener<Event>, Tree
//move selected treeitem for mobile, alternative to dnd //move selected treeitem for mobile, alternative to dnd
if (ClientInfo.isMobile()) if (ClientInfo.isMobile())
{ {
ToolBarButton btn = new ToolBarButton(); moveItemBtn = new ToolBarButton();
btn.setIconSclass("z-icon-arrows-alt"); moveItemBtn.setSclass("tree-moveitem-btn");
layout.appendChild(btn); moveItemBtn.setIconSclass("z-icon-arrows-alt");
btn.addEventListener(Events.ON_CLICK, evt -> onMoveBtnClicked()); layout.appendChild(moveItemBtn);
moveItemBtn.addEventListener(Events.ON_CLICK, evt -> onMoveBtnClicked());
tree.addEventListener("onPostMove", evt -> onPostMove(evt));
} }
this.appendChild(layout); this.appendChild(layout);
@ -207,11 +211,39 @@ public class TreeSearchPanel extends Panel implements EventListener<Event>, Tree
DropEvent event = new DropEvent(Events.ON_DROP, selectedRow, dragged, 0, 0, 0, 0, 0); DropEvent event = new DropEvent(Events.ON_DROP, selectedRow, dragged, 0, 0, 0, 0, 0);
moveItemBox.detach(); moveItemBox.detach();
moveItemBox = null; moveItemBox = null;
moveItemBtn.setSclass("tree-moveitem-btn");
moveItemBtn.setAttribute("draggedComponent", dragged);
Events.postEvent(event); Events.postEvent(event);
Events.postEvent("onPostMove", tree, selected);
}
}
private void onPostMove(Event evt) {
Treeitem item = (Treeitem) evt.getData();
Treerow dragged = (Treerow) moveItemBtn.getAttribute("draggedComponent");
if (dragged == null) return;
Treeitem draggedItem = (Treeitem) dragged.getParent();
if (item.getNextSibling() != null) {
Treeitem next = (Treeitem) item.getNextSibling();
if (next.getValue().equals(draggedItem.getValue())) {
tree.setSelectedItem(next);
next.focus();
Events.postEvent(Events.ON_SELECT, tree, next);
}
} }
} }
private void onMoveBtnClicked() { private void onMoveBtnClicked() {
if (moveItemBox != null) {
moveItemBox.detach();
moveItemBox = null;
moveItemBtn.setSclass("tree-moveitem-btn");
Treeitem ti = tree.getSelectedItem();
if (ti != null)
ti.focus();
return;
}
moveItemBtn.setSclass("tree-moveitem-btn pressed");
Treeitem ti = tree.getSelectedItem(); Treeitem ti = tree.getSelectedItem();
if (ti == null) return; if (ti == null) return;
Treerow tr = ti.getTreerow(); Treerow tr = ti.getTreerow();
@ -229,13 +261,16 @@ public class TreeSearchPanel extends Panel implements EventListener<Event>, Tree
btn.addEventListener(Events.ON_CLICK, e -> { btn.addEventListener(Events.ON_CLICK, e -> {
moveItemBox.detach(); moveItemBox.detach();
moveItemBox = null; moveItemBox = null;
moveItemBtn.setSclass("tree-moveitem-btn");
if (tree.getSelectedItem() != null)
tree.getSelectedItem().focus();
}); });
this.insertBefore(moveItemBox, layout); this.insertBefore(moveItemBox, layout);
String script = "var w=zk.Widget.$('#" + moveItemBox.getUuid() + "'); "; String script = "var w=zk.Widget.$('#" + moveItemBox.getUuid() + "'); ";
script += "var e=jq('#" + layout.getUuid() + "'); "; script += "var e=jq('#" + layout.getUuid() + "'); ";
script += "w.setWidth(e.css('width')); "; script += "w.setWidth(e.css('width')); ";
script += "w.setHeight(e.css('height')); ";
Clients.response(new AuScript(script)); Clients.response(new AuScript(script));
ti.focus();
} }
protected void addTreeItem(Treeitem treeItem) protected void addTreeItem(Treeitem treeItem)

View File

@ -7,3 +7,11 @@
.z-treecell-content { .z-treecell-content {
padding: 2px 1px; padding: 2px 1px;
} }
.tree-moveitem-btn {
padding: 2px 4px;
border-radius: 3px;
}
.tree-moveitem-btn.pressed {
box-shadow: inset 0 0 0 1px #efefef,inset 0 3px 15px #9f9f9f;
}