andrew
cfd1fab6b2
Rework the CommonwealthOnline browser UI: restructure HTML into a nav + subpanel layout, add SVG/PNG/font assets and new sprites, and overhaul styles with a new font-face and refreshed color/spacing variables. Refactor components: tabs use a left nav list; filters extraction (renderRow) and reset focus handling; direct-connect renders into a dedicated container; server-list switched to compact row layout and adds a scroll indicator; server-details now uses a preview area and simplified preview/stats rendering. Update app logic: adjust focus zone handling (nextFocusZone), limit zones per tab, update connection status/count display, and avoid rendering details for direct-connect. Overall changes improve responsiveness, visual hierarchy, and focus/navigation behavior.
45 lines
1.3 KiB
JavaScript
45 lines
1.3 KiB
JavaScript
(function () {
|
|
"use strict";
|
|
|
|
var TAB_ORDER = ["direct-connect", "server-browser", "favorites", "recent"];
|
|
|
|
window.CO_Tabs = {
|
|
TAB_ORDER: TAB_ORDER,
|
|
|
|
render: function (root, state) {
|
|
var navEl = root.querySelector(".co-nav-list");
|
|
if (!navEl) return;
|
|
|
|
var labels = {
|
|
"direct-connect": "Direct Connect",
|
|
"server-browser": "Browse",
|
|
favorites: "Favorites",
|
|
recent: "Recent"
|
|
};
|
|
|
|
navEl.innerHTML = TAB_ORDER.map(function (tabId, index) {
|
|
var active = state.activeTab === tabId ? " active" : "";
|
|
var focused = state.focusZone === "tabs" && state.selectedTabIndex === index ? " focused" : "";
|
|
return (
|
|
'<button type="button" class="co-nav-item' + active + focused + '" data-tab="' + tabId + '" data-index="' + index + '">' +
|
|
labels[tabId] +
|
|
"</button>"
|
|
);
|
|
}).join("");
|
|
|
|
navEl.className = "co-nav-list" + (state.focusZone === "tabs" ? " focused" : "");
|
|
},
|
|
|
|
bind: function (root, onTabClick) {
|
|
var navEl = root.querySelector(".co-nav-list");
|
|
if (!navEl) return;
|
|
|
|
navEl.addEventListener("click", function (e) {
|
|
var btn = e.target.closest(".co-nav-item");
|
|
if (!btn) return;
|
|
onTabClick(btn.getAttribute("data-tab"));
|
|
});
|
|
}
|
|
};
|
|
})();
|