From 2b5e67ebb302bdd8f15993753c27c71465cdc959 Mon Sep 17 00:00:00 2001
From: Arkerthan <arkerthan@gmail.com>
Date: Thu, 1 Apr 2021 21:33:52 +0200
Subject: [PATCH] Convert Main to new tab system
---
css/gui/tabs.css | 5 ++---
src/gui/tabs.js | 30 ++++++++++++++++++++++++------
src/js/slaveListing.js | 35 +++++++++++------------------------
3 files changed, 37 insertions(+), 33 deletions(-)
diff --git a/css/gui/tabs.css b/css/gui/tabs.css
index afa0a58b812..e4a8c1df42e 100644
--- a/css/gui/tabs.css
+++ b/css/gui/tabs.css
@@ -57,11 +57,10 @@ div.tab-bar a.active {
}
.tab-content.active {
- display: unset;
+ display: block;
}
-.tab-content:not(.noFade) {
- /*display: none;*/
+.tab-content:not(.no-fade) {
padding: 6px 12px;
-webkit-animation: fadeEffect 0.3s;
animation: fadeEffect 0.3s;
diff --git a/src/gui/tabs.js b/src/gui/tabs.js
index da794affab0..a618182521a 100644
--- a/src/gui/tabs.js
+++ b/src/gui/tabs.js
@@ -1,6 +1,6 @@
App.UI.tabs = (function() {
/**
- * @type {Array<HTMLButtonElement>}
+ * @type {Array<HTMLButtonElement|HTMLAnchorElement>}
*/
let active = null;
@@ -11,6 +11,7 @@ App.UI.tabs = (function() {
* @property {string} id
* @property {Node} content
* @property {string} [buttonClass]
+ * @property {string} [contentClass]
*/
/**
@@ -28,28 +29,31 @@ App.UI.tabs = (function() {
* @param {string} name Display name
* @param {string} id Saved, should stay the same across versions
* @param {Node} content
- * @param {string} [buttonClass] class applied to the button
+ * @param {string} [buttonClass] CSS class applied to the button
+ * @param {string} [contentClass] CSS class applied to the content holder
*/
- addTab(name, id, content, buttonClass) {
+ addTab(name, id, content, buttonClass, contentClass) {
this._tabs.push({
name: name,
id: id,
content: content,
buttonClass: buttonClass,
+ contentClass: contentClass,
});
}
/**
+ * @param {boolean} plainLinks
* @returns {DocumentFragment}
*/
- render() {
+ render(plainLinks = false) {
const f = new DocumentFragment();
const tabBar = document.createElement("div");
tabBar.classList.add("tab-bar");
f.append(tabBar);
/**
- * @type {Array<HTMLButtonElement>}
+ * @type {Array<HTMLButtonElement|HTMLAnchorElement>}
*/
const buttonList = [];
/**
@@ -64,9 +68,19 @@ App.UI.tabs = (function() {
selected = V.tabChoice[this._id] === tab.id;
}
- const button = App.UI.DOM.appendNewElement("button", tabBar, tab.name, tab.buttonClass);
+ /** @type {HTMLButtonElement|HTMLAnchorElement} */
+ let button;
+ if (!plainLinks) {
+ button = App.UI.DOM.appendNewElement("button", tabBar, tab.name, tab.buttonClass);
+ } else {
+ button = App.UI.DOM.makeElement("a", tab.name, tab.buttonClass);
+ }
buttonList.push(button);
+
const contentHolder = App.UI.DOM.appendNewElement("div", f, tab.content, "tab-content");
+ if (tab.contentClass) {
+ contentHolder.classList.add(tab.contentClass);
+ }
contentList.push(contentHolder);
button.onclick = () => {
@@ -84,6 +98,10 @@ App.UI.tabs = (function() {
selected = false;
}
+ if (plainLinks) {
+ tabBar.append(App.UI.DOM.generateLinksStrip(buttonList));
+ }
+
active = buttonList;
return f;
diff --git a/src/js/slaveListing.js b/src/js/slaveListing.js
index 0dad38b0a0e..5bd6ffa1439 100644
--- a/src/js/slaveListing.js
+++ b/src/js/slaveListing.js
@@ -1019,34 +1019,21 @@ App.UI.SlaveList.penthousePage = function() {
tabs.push(allTab());
}
- const div = document.createElement("div");
- div.classList.add("tab-bar");
+ const tabBar = new App.UI.tabs.TabBar("Main");
+ let buttonClass = undefined;
+ if (V.useSlaveSummaryTabs === 2) {
+ buttonClass = "card";
+ }
+ let contentClass = undefined;
if (V.useSlaveSummaryTabs === 0) {
- const links = [];
- for (const tab of tabs) {
- links.push(App.UI.tabBar.tabButton(tab.tabName, tab.caption, true));
- }
- div.append(App.UI.DOM.generateLinksStrip(links));
- } else {
- for (const tab of tabs) {
- const button = App.UI.tabBar.tabButton(tab.tabName, tab.caption);
- if (V.useSlaveSummaryTabs === 2) {
- button.classList.add("card");
- }
- div.append(button);
- }
+ contentClass = "no-fade";
+ } else if (V.useSlaveSummaryTabs === 2) {
+ contentClass = "card";
}
- fragment.append(div);
-
for (const tab of tabs) {
- const div = App.UI.tabBar.makeTab(tab.tabName, tab.content);
- if (V.useSlaveSummaryTabs === 0) {
- div.classList.add("noFade");
- } else if (V.useSlaveSummaryTabs === 2) {
- div.classList.add("card");
- }
- fragment.append(div);
+ tabBar.addTab(tab.caption, tab.tabName, tab.content, buttonClass, contentClass);
}
+ fragment.append(tabBar.render(V.useSlaveSummaryTabs === 0));
if (V.positionMainLinks <= 0) {
fragment.append(App.UI.DOM.makeElement("div", App.UI.View.mainLinks(), "center"));
--
GitLab