Mark the active Text or Image tab.

The active tab stays solid green, and the other tab is pale with green
text. A tab whose field failed validation now shows red text.

publish/style.css

@@ -118,11 +118,27 @@ div.note {
   padding-top: 3px;
   padding-bottom: 3px;
   padding-left: 5px;
-  background-color: #006633;
+  background-color: #e3ebe6;
-  color: white;
+  color: #006633;
   cursor: pointer;
   border-radius: 8px 0 0 8px;
 }
+#main .tab:hover {
+  background-color: #d2e2d8;
+}
+/* The tab that is showing */
+#main .tab.active {
+  background-color: #006633;
+  color: white;
+  cursor: default;
+}
+/* A tab whose field failed validation */
+#main .tab.red {
+  color: #cc0000;
+}
+#main .tab.active.red {
+  color: #ffd0d0;
+}
 /* WordCount */
 #main .counter {
   font-size: 11pt;

publish/utilities.js

@@ -19,6 +19,12 @@ function showHide(show) {
     document.getElementById(show+'parent').style.display = "block";
   }
 
+  // Mark the tab that is showing
+  var showTab = document.getElementById(show+'tab');
+  var hideTab = document.getElementById(hide+'tab');
+  if (showTab) showTab.classList.add('active');
+  if (hideTab) hideTab.classList.remove('active');
+
   return true;
 
 }

publish/write.inc.php

@@ -46,8 +46,8 @@ if (count($validate) !== 0) {
 <div class="note">(An email address where editors can reach the author.)</div>
 
 <div class="tabs">
-  <span class="tab<?= isset($validate['story']) ? ' red' : '' ?>" onclick="showHide('text');">Text:</span>
+  <span id="texttab" class="tab active<?= isset($validate['story']) ? ' red' : '' ?>" onclick="showHide('text');">Text:</span>
-  <span class="tab<?= isset($validate['upload']) ? ' red' : '' ?>" onclick="showHide('upload');">Image:</span> 
+  <span id="uploadtab" class="tab<?= isset($validate['upload']) ? ' red' : '' ?>" onclick="showHide('upload');">Image:</span>
   <span id="wordcounter" class="counter" style="display: none;">0 words</span>
 </div>
 <div class="textarea rightcolumn">

tests/js/helpers.js

@@ -19,6 +19,7 @@ const STORY_FORM = `
     <label for="author">Author:</label><input id="author" name="author">
     <label for="email">Email address:</label><input id="email" name="email">
     <label for="story">Story:</label>
+    <span id="texttab" class="tab active">Text:</span><span id="uploadtab" class="tab">Image:</span>
     <div id="textparent"><textarea id="story" name="story"></textarea></div>
     <div id="uploadparent" style="display: none;"><input type="file" id="upload" name="upload"></div>
     <span id="wordcounter" class="counter" style="display: none;">0 words</span>

tests/js/utilities.test.js

@@ -91,6 +91,16 @@ test("showHide switches between the text and the image tabs", () => {
   assert.equal(w.showHide("other"), false);
 });
 
+test("showHide marks the tab that is showing", () => {
+  const w = publishWindow();
+  const text = w.document.getElementById("texttab");
+  const upload = w.document.getElementById("uploadtab");
+  w.showHide("upload");
+  assert.deepEqual([text.classList.contains("active"), upload.classList.contains("active")], [false, true]);
+  w.showHide("text");
+  assert.deepEqual([text.classList.contains("active"), upload.classList.contains("active")], [true, false]);
+});
+
 test("review asks for a title, then an author", () => {
   const w = publishWindow("<p>words</p>");
   assert.equal(w.review(), false);