Upstream/Plan
1
0
Fork 0
mirror of https://github.com/plan-player-analytics/Plan.git synced 2024-09-09 21:38:15 +02: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; package com.djrapitops.plan.delivery.rendering.html.structure;
import com.djrapitops.plan.delivery.rendering.html.icon.Icon; 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. * Html utility for creating navigation link html.
@ -27,29 +27,39 @@ import com.djrapitops.plugin.utilities.Format;
public class NavLink { public class NavLink {
private final Icon icon; private final Icon icon;
private String tabID;
private final String tabName; private final String tabName;
private final boolean collapsed; private final boolean collapsed;
public NavLink(Icon icon, String tabName) { private NavLink(Icon icon, String tabID, String tabName, boolean collapsed) {
this(icon, tabName, false);
}
private NavLink(Icon icon, String tabName, boolean collapsed) {
this.icon = icon; this.icon = icon;
this.tabID = tabID;
this.tabName = tabName; this.tabName = tabName;
this.collapsed = collapsed; this.collapsed = collapsed;
} }
public static NavLink main(Icon icon, String tabName) { 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) { 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() { public String toHtml() {
String tabID = new Format(tabName).justLetters().lowerCase().toString(); String tabID = getTabID();
if (collapsed) { if (collapsed) {
return "<a class=\"collapse-item nav-button\" href=\"#tab-" + tabID + "\">" + return "<a class=\"collapse-item nav-button\" href=\"#tab-" + tabID + "\">" +
icon.toHtml() + ' ' + icon.toHtml() + ' ' +
@ -62,4 +72,7 @@ public class NavLink {
"</li>"; "</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.FormatType;
import com.djrapitops.plan.extension.implementation.TabInformation; import com.djrapitops.plan.extension.implementation.TabInformation;
import com.djrapitops.plan.extension.implementation.results.*; import com.djrapitops.plan.extension.implementation.results.*;
import com.djrapitops.plugin.utilities.Format;
import java.util.*; import java.util.*;
@ -86,13 +85,13 @@ public class PlayerPluginTab implements Comparable<PlayerPluginTab> {
private void generate() { private void generate() {
if (playerData.isEmpty()) { if (playerData.isEmpty()) {
nav = NavLink.collapsed(Icon.called("cubes").build(), serverName + " (No Data)").toHtml(); nav = NavLink.collapsed(Icon.called("cubes").build(), "plugins-" + serverName, serverName + " (No Data)").toHtml();
tab = wrapInTab( tab = wrapInWideTab(
serverName + " (No Data)", 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 { } else {
nav = NavLink.collapsed(Icon.called("cubes").build(), serverName).toHtml(); nav = NavLink.collapsed(Icon.called("cubes").build(), "plugins-" + serverName, serverName).toHtml();
tab = generatePageTab(); tab = generatePageTab();
} }
} }
@ -120,11 +119,21 @@ public class PlayerPluginTab implements Comparable<PlayerPluginTab> {
tabBuilder.append(wrapInContainer(extensionInformation, tabsElement)); tabBuilder.append(wrapInContainer(extensionInformation, tabsElement));
} }
return wrapInTab(serverName, tabBuilder.toString()); return wrapInCardColumnsTab(serverName, tabBuilder.toString());
} }
private String wrapInTab(String serverName, String content) { private String wrapInWideTab(String serverName, String content) {
return "<div class=\"tab\" id=\"plugins-" + new Format(serverName).justLetters().lowerCase() + "\"><div class=\"container-fluid mt-4\">" + 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 // Page heading
"<div class=\"d-sm-flex align-items-center justify-content-between mb-4\">" + "<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}" + "<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.TabInformation;
import com.djrapitops.plan.extension.implementation.results.*; import com.djrapitops.plan.extension.implementation.results.*;
import com.djrapitops.plan.utilities.java.Lists; import com.djrapitops.plan.utilities.java.Lists;
import com.djrapitops.plugin.utilities.Format;
import java.util.*; import java.util.*;
@ -85,15 +84,14 @@ public class ServerPluginTabs {
} }
private void generate() { private void generate() {
String tabID = "plugins-overview";
if (serverData.isEmpty()) { if (serverData.isEmpty()) {
String tabName = "Overview (No Data)"; nav = new StringBuilder(NavLink.main(Icon.called("cubes").build(), tabID, "Overview (No Data)").toHtml());
nav = new StringBuilder(new NavLink(Icon.called("cubes").build(), tabName).toHtml()); tab = wrapInWideColumnTab(
tab = wrapInTab( tabID, "<div class=\"card\"><div class=\"card-body\"><p>No Extension Data</p></div></div>"
tabName,
"<div class=\"col-md-12\"><div class=\"card\"><div class=\"card-body\"><p>No Extension Data</p></div></div></div>"
); );
} else { } 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(); tab = generatePageTabs();
} }
} }
@ -125,14 +123,15 @@ public class ServerPluginTabs {
).toHtmlFull(); ).toHtmlFull();
} }
tabBuilder.append(wrapInTab(extensionInformation.getPluginName(), wrapInContainer(extensionInformation, tabsElement))); String tabName = extensionInformation.getPluginName();
nav.append(new NavLink(Icon.fromExtensionIcon(extensionInformation.getIcon()), extensionInformation.getPluginName()).toHtml()); tabBuilder.append(wrapInWideColumnTab(tabName, wrapInContainer(extensionInformation, tabsElement)));
nav.append(NavLink.main(Icon.fromExtensionIcon(extensionInformation.getIcon()), "plugins-" + tabName, tabName).toHtml());
} }
return tabBuilder.toString(); return tabBuilder.toString();
} }
private String generateOverviewTab() { private String generateOverviewTab() {
StringBuilder tabBuilder = new StringBuilder(); StringBuilder contentBuilder = new StringBuilder();
for (ExtensionData datum : serverData) { for (ExtensionData datum : serverData) {
ExtensionInformation extensionInformation = datum.getExtensionInformation(); ExtensionInformation extensionInformation = datum.getExtensionInformation();
@ -149,19 +148,29 @@ public class ServerPluginTabs {
).toHtmlFull(); ).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) { private String wrapInWideColumnTab(String tabName, String content) {
return "<div class=\"tab\" id=\"plugins-" + new Format(tabName).justLetters().lowerCase() + "\"><div class=\"container-fluid mt-4\">" + return "<div class=\"tab\" id=\"" + NavLink.format("plugins-" + tabName) + "\"><div class=\"container-fluid mt-4\">" +
// Page heading // Page heading
"<div class=\"d-sm-flex align-items-center justify-content-between mb-4\">" + "<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}" + "<h1 class=\"h3 mb-0 text-gray-800\"><i class=\"sidebar-toggler fa fa-fw fa-bars\"></i>${serverName} &middot; " + tabName + "</h1>${backButton}" +
"</div>" + "</div>" +
// End Page heading // 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>"; "<div class=\"card-columns\">" + content + "</div></div></div>";
} }