Upstream/Plan
1
0
Fork 0
mirror of https://github.com/plan-player-analytics/Plan.git synced 2025-01-02 14:37:45 +01:00
Code Issues Projects Releases Wiki Activity

Extra Extension tabs now take full width

Browse Source 
Regression during redesign placed single tab content in card-columns div,
which caused the content to be displayed with a sub-par width.

Fixed by extracting new code that handles case for wide tabs, which
display the plugin container as full page width.

- Additionally, solved some issues with the plugin tab names & ids

Affects issues:
- Fixed #1276
This commit is contained in:
Rsl1122 2020-01-13 15:41:07 +02:00
parent 50948c7a65
commit 5908c6f41b
3 changed files with 62 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/html/structure/NavLink.java
View File

@ -17,7 +17,7 @@
package com.djrapitops.plan.delivery.rendering.html.structure;
import com.djrapitops.plan.delivery.rendering.html.icon.Icon;
import com.djrapitops.plugin.utilities.Format;
import org.apache.commons.lang3.StringUtils;
/**
* Html utility for creating navigation link html.
@ -27,29 +27,39 @@ import com.djrapitops.plugin.utilities.Format;
public class NavLink {
private final Icon icon;
private String tabID;
private final String tabName;
private final boolean collapsed;
public NavLink(Icon icon, String tabName) {
this(icon, tabName, false);
}
private NavLink(Icon icon, String tabName, boolean collapsed) {
private NavLink(Icon icon, String tabID, String tabName, boolean collapsed) {
this.icon = icon;
this.tabID = tabID;
this.tabName = tabName;
this.collapsed = collapsed;
}
public static NavLink main(Icon icon, String tabName) {
return new NavLink(icon, tabName, false);
return new NavLink(icon, null, tabName, false);
}
public static NavLink main(Icon icon, String tabID, String tabName) {
return new NavLink(icon, tabID, tabName, false);
}
public static NavLink collapsed(Icon icon, String tabName) {
return new NavLink(icon, tabName, true);
return new NavLink(icon, null, tabName, true);
}
public static NavLink collapsed(Icon icon, String tabID, String tabName) {
return new NavLink(icon, tabID, tabName, true);
}
public static String format(String id) {
return StringUtils.replaceChars(StringUtils.lowerCase(id), ' ', '-');
}
public String toHtml() {
String tabID = new Format(tabName).justLetters().lowerCase().toString();
String tabID = getTabID();
if (collapsed) {
return "<a class=\"collapse-item nav-button\" href=\"#tab-" + tabID + "\">" +
icon.toHtml() + ' ' +
@ -62,4 +72,7 @@ public class NavLink {
"</li>";
}
private String getTabID() {
return format(tabID != null ? tabID : tabName);
}
}

25
Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/pages/PlayerPluginTab.java
View File

@ -25,7 +25,6 @@ import com.djrapitops.plan.extension.ElementOrder;
import com.djrapitops.plan.extension.FormatType;
import com.djrapitops.plan.extension.implementation.TabInformation;
import com.djrapitops.plan.extension.implementation.results.*;
import com.djrapitops.plugin.utilities.Format;
import java.util.*;
@ -86,13 +85,13 @@ public class PlayerPluginTab implements Comparable<PlayerPluginTab> {
private void generate() {
if (playerData.isEmpty()) {
nav = NavLink.collapsed(Icon.called("cubes").build(), serverName + " (No Data)").toHtml();
tab = wrapInTab(
nav = NavLink.collapsed(Icon.called("cubes").build(), "plugins-" + serverName, serverName + " (No Data)").toHtml();
tab = wrapInWideTab(
serverName + " (No Data)",
"<div class=\"col-md-12\"><div class=\"card\"><div class=\"card-body\"><p>No Extension Data</p></div></div></div>"
"<div class=\"card\"><div class=\"card-body\"><p>No Extension Data</p></div></div>"
);
} else {
nav = NavLink.collapsed(Icon.called("cubes").build(), serverName).toHtml();
nav = NavLink.collapsed(Icon.called("cubes").build(), "plugins-" + serverName, serverName).toHtml();
tab = generatePageTab();
}
}
@ -120,11 +119,21 @@ public class PlayerPluginTab implements Comparable<PlayerPluginTab> {
tabBuilder.append(wrapInContainer(extensionInformation, tabsElement));
}
return wrapInTab(serverName, tabBuilder.toString());
return wrapInCardColumnsTab(serverName, tabBuilder.toString());
}
private String wrapInTab(String serverName, String content) {
return "<div class=\"tab\" id=\"plugins-" + new Format(serverName).justLetters().lowerCase() + "\"><div class=\"container-fluid mt-4\">" +
private String wrapInWideTab(String serverName, String content) {
return "<div class=\"tab\" id=\"" + NavLink.format("plugins-" + serverName) + "\"><div class=\"container-fluid mt-4\">" +
// Page heading
"<div class=\"d-sm-flex align-items-center justify-content-between mb-4\">" +
"<h1 class=\"h3 mb-0 text-gray-800\"><i class=\"sidebar-toggler fa fa-fw fa-bars\"></i>" + serverName + " &middot; Plugins Overview</h1>${backButton}" +
"</div>" +
// End Page heading
"<div class=\"row\"><div class=\"col-md-12\">" + content + "</div></div></div></div>";
}
private String wrapInCardColumnsTab(String serverName, String content) {
return "<div class=\"tab\" id=\"" + NavLink.format("plugins-" + serverName) + "\"><div class=\"container-fluid mt-4\">" +
// Page heading
"<div class=\"d-sm-flex align-items-center justify-content-between mb-4\">" +
"<h1 class=\"h3 mb-0 text-gray-800\"><i class=\"sidebar-toggler fa fa-fw fa-bars\"></i>" + serverName + " &middot; Plugins Overview</h1>${backButton}" +

37
Plan/common/src/main/java/com/djrapitops/plan/delivery/rendering/pages/ServerPluginTabs.java
View File

@ -26,7 +26,6 @@ import com.djrapitops.plan.extension.FormatType;
import com.djrapitops.plan.extension.implementation.TabInformation;
import com.djrapitops.plan.extension.implementation.results.*;
import com.djrapitops.plan.utilities.java.Lists;
import com.djrapitops.plugin.utilities.Format;
import java.util.*;
@ -85,15 +84,14 @@ public class ServerPluginTabs {
}
private void generate() {
String tabID = "plugins-overview";
if (serverData.isEmpty()) {
String tabName = "Overview (No Data)";
nav = new StringBuilder(new NavLink(Icon.called("cubes").build(), tabName).toHtml());
tab = wrapInTab(
tabName,
"<div class=\"col-md-12\"><div class=\"card\"><div class=\"card-body\"><p>No Extension Data</p></div></div></div>"
nav = new StringBuilder(NavLink.main(Icon.called("cubes").build(), tabID, "Overview (No Data)").toHtml());
tab = wrapInWideColumnTab(
tabID, "<div class=\"card\"><div class=\"card-body\"><p>No Extension Data</p></div></div>"
);
} else {
nav = new StringBuilder(new NavLink(Icon.called("cubes").build(), "Overview").toHtml());
nav = new StringBuilder(NavLink.main(Icon.called("cubes").build(), tabID, "Overview").toHtml());
tab = generatePageTabs();
}
}
@ -125,14 +123,15 @@ public class ServerPluginTabs {
).toHtmlFull();
}
tabBuilder.append(wrapInTab(extensionInformation.getPluginName(), wrapInContainer(extensionInformation, tabsElement)));
nav.append(new NavLink(Icon.fromExtensionIcon(extensionInformation.getIcon()), extensionInformation.getPluginName()).toHtml());
String tabName = extensionInformation.getPluginName();
tabBuilder.append(wrapInWideColumnTab(tabName, wrapInContainer(extensionInformation, tabsElement)));
nav.append(NavLink.main(Icon.fromExtensionIcon(extensionInformation.getIcon()), "plugins-" + tabName, tabName).toHtml());
}
return tabBuilder.toString();
}
private String generateOverviewTab() {
StringBuilder tabBuilder = new StringBuilder();
StringBuilder contentBuilder = new StringBuilder();
for (ExtensionData datum : serverData) {
ExtensionInformation extensionInformation = datum.getExtensionInformation();
@ -149,19 +148,29 @@ public class ServerPluginTabs {
).toHtmlFull();
}
tabBuilder.append(wrapInContainer(extensionInformation, tabsElement));
contentBuilder.append(wrapInContainer(extensionInformation, tabsElement));
}
return wrapInTab("Plugins Overview", tabBuilder.toString());
return wrapInOverviewTab(contentBuilder.toString());
}
private String wrapInTab(String tabName, String content) {
return "<div class=\"tab\" id=\"plugins-" + new Format(tabName).justLetters().lowerCase() + "\"><div class=\"container-fluid mt-4\">" +
private String wrapInWideColumnTab(String tabName, String content) {
return "<div class=\"tab\" id=\"" + NavLink.format("plugins-" + tabName) + "\"><div class=\"container-fluid mt-4\">" +
// Page heading
"<div class=\"d-sm-flex align-items-center justify-content-between mb-4\">" +
"<h1 class=\"h3 mb-0 text-gray-800\"><i class=\"sidebar-toggler fa fa-fw fa-bars\"></i>${serverName} &middot; " + tabName + "</h1>${backButton}" +
"</div>" +
// End Page heading
"<div class=\"row\"><div class=\"col-md-12\">" + content + "</div></div></div></div>";
}
private String wrapInOverviewTab(String content) {
return "<div class=\"tab\" id=\"" + NavLink.format("plugins-overview") + "\"><div class=\"container-fluid mt-4\">" +
// Page heading
"<div class=\"d-sm-flex align-items-center justify-content-between mb-4\">" +
"<h1 class=\"h3 mb-0 text-gray-800\"><i class=\"sidebar-toggler fa fa-fw fa-bars\"></i>${serverName} &middot; Plugins Overview</h1>${backButton}" +
"</div>" +
// End Page heading
"<div class=\"card-columns\">" + content + "</div></div></div>";
}