From b8918b55c776735b8c7a1f716f93c48571ce9215 Mon Sep 17 00:00:00 2001
From: Arkerthan <arkerthan@gmail.com>
Date: Wed, 4 Mar 2020 11:24:22 +0100
Subject: [PATCH] add card tab style
---
src/003-assets/CSS/tabs.css | 22 ++++++++++++++++++++++
src/js/slaveListing.js | 16 +++++++++++-----
src/uncategorized/options.tw | 1 +
3 files changed, 34 insertions(+), 5 deletions(-)
diff --git a/src/003-assets/CSS/tabs.css b/src/003-assets/CSS/tabs.css
index f5fe2e83a3f..1cccf03dbc5 100644
--- a/src/003-assets/CSS/tabs.css
+++ b/src/003-assets/CSS/tabs.css
@@ -14,6 +14,16 @@ div.tabbar button {
font-size: large;
}
+div.tabbar button.card {
+ border-top-left-radius: 15px;
+ border-top-right-radius: 15px;
+ border: none;
+}
+
+div.tabbar button.card.active {
+ background-color: #1a1a1a;
+}
+
div.tabbar button:hover {
background-color: #414141;
}
@@ -36,6 +46,18 @@ div.tabbar a.active {
animation: fadeEffect 0.3s;
}
+.tabcontent.card {
+ border-radius: 0 8px 8px 8px;
+ background-color: #1a1a1a;
+ box-shadow: 10px 10px 5px black;
+ margin-bottom: 15px;
+}
+
+
+.tabcontent.card div.slaveSummary.card {
+ background-color: #252525;
+}
+
@-webkit-keyframes fadeEffect {
from {
opacity: 0;
diff --git a/src/js/slaveListing.js b/src/js/slaveListing.js
index 1335a75950e..804486eab59 100644
--- a/src/js/slaveListing.js
+++ b/src/js/slaveListing.js
@@ -805,7 +805,7 @@ App.UI.SlaveList.penthousePage = function() {
const fragment = document.createDocumentFragment();
const A = V.arcologies[0];
- let slaveWrapper = document.createElement("div"); // first is a div so we have space between slave and buttons
+ let slaveWrapper = document.createElement("div"); // first is a div so we have no space between slave and buttons
if (V.HeadGirl) {
/** @type {App.Entity.SlaveState} */
const HG = V.HeadGirl;
@@ -986,7 +986,7 @@ App.UI.SlaveList.penthousePage = function() {
function allTab() {
const penthouseSlavesIndices = ph.employeesIndices();
SlaveSort.indices(penthouseSlavesIndices);
- return makeTabDesc('all', `All${V.useSlaveSummaryTabs === 1 ? ` (${penthouseSlavesIndices.length})` : ""}`,
+ return makeTabDesc('all', `All${V.useSlaveSummaryTabs > 0 ? ` (${penthouseSlavesIndices.length})` : ""}`,
App.UI.SlaveList.render.listDOM(penthouseSlavesIndices, [], App.UI.SlaveList.SlaveInteract.penthouseInteract));
}
@@ -1016,13 +1016,13 @@ App.UI.SlaveList.penthousePage = function() {
for (const jn of ph.jobsNames) {
const slaves = _slavesForJob(jn);
if (slaves.n > 0) {
- tabs.push(makeTabDesc(jn, `${ph.desc.jobs[jn].position}${V.useSlaveSummaryTabs === 1 ? ` (${slaves.n})` : ""}`, App.UI.DOM.combineNodes(encycTips(jn), slaves.dom)));
+ tabs.push(makeTabDesc(jn, `${ph.desc.jobs[jn].position}${V.useSlaveSummaryTabs > 0 ? ` (${slaves.n})` : ""}`, App.UI.DOM.combineNodes(encycTips(jn), slaves.dom)));
} else if (V.useSlaveSummaryTabs === 0) {
tabs.push(makeTabDesc(jn, ph.desc.jobs[jn].position, encycTips(jn)));
}
}
- if (V.useSlaveSummaryTabs === 1) {
+ if (V.useSlaveSummaryTabs > 0) {
tabs.push(allTab());
}
@@ -1036,7 +1036,11 @@ App.UI.SlaveList.penthousePage = function() {
div.append(App.UI.DOM.arrayToList(links, " | ", " | "));
} else {
for (const tab of tabs) {
- div.append(App.UI.tabbar.tabButtonDOM(tab.tabName, tab.caption));
+ const button = App.UI.tabbar.tabButtonDOM(tab.tabName, tab.caption);
+ if (V.useSlaveSummaryTabs === 2) {
+ button.classList.add("card");
+ }
+ div.append(button);
}
}
fragment.append(div);
@@ -1045,6 +1049,8 @@ App.UI.SlaveList.penthousePage = function() {
const div = App.UI.tabbar.makeTabDOM(tab.tabName, tab.content);
if (V.useSlaveSummaryTabs === 0) {
div.classList.add("noFade");
+ } else if (V.useSlaveSummaryTabs === 2) {
+ div.classList.add("card");
}
fragment.append(div);
}
diff --git a/src/uncategorized/options.tw b/src/uncategorized/options.tw
index c070caa0886..3c6b1fb3f7f 100644
--- a/src/uncategorized/options.tw
+++ b/src/uncategorized/options.tw
@@ -223,6 +223,7 @@ This save was created using FC version $ver build $releaseID.
Main menu slave tabs are
<<option 1 "Enabled">>
<<option 0 "Disabled">>
+ <<option 2 "Cardstyle">>
<</options>>
<<options $useSlaveListInPageJSNavigation>>
--
GitLab