Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add top(header) menu #641

Open
wants to merge 2 commits into
base: future
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,15 @@ public class PerspectivesModule extends AbstractOrienteerModule
public static final String NAME = "perspectives";
public static final String OCLASS_PERSPECTIVE="OPerspective";
public static final String OCLASS_ITEM = "OPerspectiveItem";
public static final String OCLASS_TOP_ITEM = "OPerspectiveTopItem";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why these 2 classes additionally needed? There is already class for menu items for left menu - lets just use that.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Top menu not support recursive trees display. Only top level and dropdowns.All - without icons.

public static final String OCLASS_TOP_SUB_ITEM = "OPerspectiveTopSubItem";

public static final String DEFAULT_PERSPECTIVE = "Default";


public PerspectivesModule()
{
super(NAME, 5);
super(NAME, 6);
}

@Override
Expand All @@ -58,9 +60,10 @@ public ODocument onInstall(OrienteerWebApplication app, ODatabaseDocument db) {
.oProperty("icon", OType.STRING)
.oProperty("homeUrl", OType.STRING)
.oProperty("menu", OType.LINKLIST).assignVisualization("table")
.oProperty("topMenu", OType.LINKLIST).assignVisualization("table")
.oProperty("footer", OType.STRING).assignVisualization("textarea")
.switchDisplayable(true, "name", "homeUrl")
.orderProperties("name", "icon", "homeUrl", "footer", "menu")
.orderProperties("name", "icon", "homeUrl", "footer", "menu","topMenu")
.oClass(OCLASS_ITEM)
.oProperty("name", OType.EMBEDDEDMAP).assignVisualization("localization").markAsDocumentName()
.oProperty("icon", OType.STRING)
Expand All @@ -75,7 +78,26 @@ public ODocument onInstall(OrienteerWebApplication app, ODatabaseDocument db) {
.oProperty("perspective", OType.LINK).linkedClass(OCLASS_PERSPECTIVE)
.setupRelationship(OCLASS_ITEM, "subItems", OCLASS_ITEM, "perspectiveItem")
.oProperty("perspectiveItem", OType.LINK).linkedClass(OCLASS_ITEM)
.oClass(OIdentity.CLASS_NAME);
.oClass(OIdentity.CLASS_NAME)

.oClass(OCLASS_TOP_ITEM)
.oClass(OCLASS_TOP_SUB_ITEM)
.oProperty("name", OType.EMBEDDEDMAP).assignVisualization("localization").markAsDocumentName()
.oProperty("url", OType.STRING)
.oProperty("perspectiveItem", OType.LINK).linkedClass(OCLASS_TOP_ITEM).markAsLinkToParent()
.switchDisplayable(true, "name")
.orderProperties("name", "perspectiveItem","url")
.oClass(OCLASS_TOP_ITEM)
.oProperty("name", OType.EMBEDDEDMAP).assignVisualization("localization").markAsDocumentName()
.oProperty("url", OType.STRING)
.oProperty("perspective", OType.LINK).markAsLinkToParent()
.oProperty("subItems", OType.LINKLIST).assignVisualization("table")
.switchDisplayable(true, "name", "url")
.orderProperties("name", "perspective", "url")
.setupRelationship(OCLASS_PERSPECTIVE, "topMenu", OCLASS_TOP_ITEM, "perspective")
.setupRelationship(OCLASS_TOP_ITEM, "subItems", OCLASS_TOP_SUB_ITEM, "perspectiveItem")
;

return null;
}

Expand All @@ -99,6 +121,8 @@ public void onUpdate(OrienteerWebApplication app, ODatabaseDocument db,
OSchemaHelper.bind(db)
.oClass(OIdentity.CLASS_NAME)
.oProperty("perspective", OType.LINK).linkedClass(OCLASS_PERSPECTIVE);
case 6:
onInstall(app, db);
default:
break;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<wicket:panel xmlns:wicket="http://www.w3.org/1999/xhtml">
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li wicket:id="items" class="nav-item">
<a href="#" class="nav-link" wicket:id="link">
<span wicket:id="name"></span>
</a>
<div class="dropdown-menu">
<div wicket:id="subItems">
<a wicket:id="subItemLink" class="dropdown-item" href="#"><span wicket:id="name"></span></a>
</div>
</div>
</li>
</ul>
</div>
</wicket:panel>
103 changes: 103 additions & 0 deletions orienteer-core/src/main/java/org/orienteer/core/web/FlatMenuPanel.java
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
package org.orienteer.core.web;

import java.util.List;

import org.apache.wicket.AttributeModifier;
import org.apache.wicket.behavior.AttributeAppender;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.link.ExternalLink;
import org.apache.wicket.markup.html.list.ListItem;
import org.apache.wicket.markup.html.list.ListView;
import org.apache.wicket.markup.html.panel.GenericPanel;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.PropertyModel;
import org.apache.wicket.request.cycle.RequestCycle;
import org.orienteer.core.model.ODocumentNameModel;

import com.orientechnologies.orient.core.record.impl.ODocument;

import ru.ydn.wicket.wicketorientdb.model.ODocumentPropertyModel;

/**
*
* Flat menu panel with dropdown support
*
*/
public class FlatMenuPanel extends GenericPanel<ODocument>{
private static final long serialVersionUID = 1L;
private String itemsFieldName;

public FlatMenuPanel(String id, IModel<ODocument> itemModel, String itemsFieldName) {
super(id, itemModel);
this.itemsFieldName = itemsFieldName;
setOutputMarkupId(true);
add(new ListView<ODocument>("items", new PropertyModel<List<ODocument>>(this, "items")) {

@Override
protected void populateItem(ListItem<ODocument> item) {
IModel<ODocument> itemModel = item.getModel();
ODocumentPropertyModel<String> urlModel = new ODocumentPropertyModel<String>(itemModel, "url");
ODocumentPropertyModel<List<ODocument>> subItems = new ODocumentPropertyModel<List<ODocument>>(itemModel, "subItems");
final boolean hasSubItems = subItems.getObject() != null && !subItems.getObject().isEmpty();
ExternalLink link = new ExternalLink("link", urlModel)
.setContextRelative(true);
link.add(new Label("name", new ODocumentNameModel(item.getModel())).setRenderBodyOnly(true));
item.add(link);
if (isActiveItem(urlModel)) {
link.add(new AttributeAppender("class", " active"));
}
if (hasSubItems){
link.add(new AttributeModifier("aria-expanded", "false"));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why these lines needed? It can be coded right in HTML.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If i do - all links show as dropdowns

link.add(new AttributeModifier("aria-haspopup", "true"));
link.add(new AttributeModifier("data-toggle", "dropdown"));

item.add(new AttributeAppender("class", " dropdown"));
link.add(new AttributeAppender("class", " dropdown-toggle"));
}
item.add(new ListView<ODocument>("subItems", subItems) {
@Override
protected void populateItem(ListItem<ODocument> item) {
item.setRenderBodyOnly(true);
IModel<ODocument> itemModel = item.getModel();
ODocumentPropertyModel<String> urlModel = new ODocumentPropertyModel<String>(itemModel, "url");
ExternalLink link = new ExternalLink("subItemLink", urlModel)
.setContextRelative(true);
link.add(new Label("name", new ODocumentNameModel(item.getModel())).setRenderBodyOnly(true));
item.add(link);
}
});
}
});
}

@Override
protected void onConfigure() {
super.onConfigure();
List<ODocument> subItems = getItems();
setVisible(subItems!=null && !subItems.isEmpty());
}

public List<ODocument> getItems() {
return getItems(getModelObject());
}

public List<ODocument> getItems(ODocument doc) {
List<ODocument> items = null;
if(doc!=null) {
items = doc.field(getItemsFieldName());
}
if(items!=null) items.remove(null); //Remove deleted records
return items;
}

public String getItemsFieldName() {
return itemsFieldName;
}

private boolean isActiveItem(ODocumentPropertyModel<String> urlModel) {
String currentUrl = RequestCycle.get().getRequest().getUrl().getPath();
String url = urlModel.getObject();
return url!=null && currentUrl.equals(url.replaceFirst("^/", ""));
}

}
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@
<span class="navbar-toggler-icon"></span>
</button>

<nav class="navbar navbar-expand-lg" wicket:id="topMenu">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is menu looks good from mobile? Menu should be just collapsed.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is bootstrap menu. I think mobile devices supported.

</nav>

<ul class="nav navbar-nav d-md-down-none ml-auto">
<li class="nav-item px-1">
<form wicket:id="searchForm" class="sidebar-search">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ public boolean isEnabled(Component component) {

@Override
protected void populateItem(final ListItem<ODocument> item) {
item.setRenderBodyOnly(true);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Commonly it's not recommended because of AJAX. Why it's needed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In bootstrap4 dropdowns use links directly, without external tags.

IModel<ODocument> itemModel = item.getModel();
Link<ODocument> link = new AjaxFallbackLink<ODocument>("link", itemModel) {
@Override
Expand Down Expand Up @@ -109,6 +110,7 @@ public void onClick(AjaxRequestTarget target) {
add(new BookmarkablePageLink<Object>("logout", LogoutPage.class).setVisible(signedIn));

add(new RecursiveMenuPanel("perspectiveItems", perspectiveModel));
add(new FlatMenuPanel("topMenu", perspectiveModel,"topMenu"));


add(feedbacks = new OrienteerFeedbackPanel("feedbacks"));
Expand Down