From 692295ba8ea8fd562a8ced5c0e240e503ec9ce75 Mon Sep 17 00:00:00 2001
From: wixette <wixette@gmail.com>
Date: Sun, 8 Mar 2020 17:35:58 +0800
Subject: [PATCH] a better tab switching visual effect

---
 css/style.css | 18 +++++++++++++-----
 js/panel.js   | 22 ++++++++++++++++++++++
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/css/style.css b/css/style.css
index 8a13730..66f8081 100644
--- a/css/style.css
+++ b/css/style.css
@@ -22,6 +22,7 @@ header {
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: center;
+    line-height: 2em;
     padding: 5px 20px 5px 20px;
 }
 
@@ -32,6 +33,7 @@ header {
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: center;
+    line-height: 1.5em;
     padding: 5px 20px 5px 20px;
 }
 
@@ -43,22 +45,28 @@ nav {
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: space-between;
+    line-height: 1.5em;
     padding: 5px 20px 5px 20px;
 }
 
 .nav-item {
-    background-color: #ddd;
-    border: 1px solid #ccc;
-    padding: 3px 10px 3px 10px;
+    background-color: #eee;
+    border-left: 1px solid #fff;
+    border-right: 1px solid #ccc;
     cursor: pointer;
+    flex-grow: 1;
+    padding: 3px 10px 3px 10px;
+    text-align: center;
     user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -webkit-user-select: none;
 }
 
-.nav-item:hover {
-    background-color: #eee;
+nav .selected {
+    background-color: #ccc;
+    cursor: auto;
+    font-weight: bold;
 }
 
 main {
diff --git a/js/panel.js b/js/panel.js
index 64900f2..c1f23e3 100644
--- a/js/panel.js
+++ b/js/panel.js
@@ -883,6 +883,19 @@ panel.playSwitch = function() {
     panel.playSound('sound-switch');
 };
 
+/**
+ * Highlights a nav tab or removes the effect.
+ * @param {Element} elem The DOM element of the nav tab.
+ * @param {boolean} highlight Whether highlight the tab.
+ */
+panel.highlightNavTab = function(elem, highlight) {
+    if (highlight) {
+        elem.classList.add('selected');
+    } else {
+        elem.classList.remove('selected');
+    }
+};
+
 /**
  * Shows the simulator tab, and hides the other two.
  */
@@ -890,6 +903,9 @@ panel.showTabSim = function() {
     document.getElementById('tab-sim').style.display = 'block';
     document.getElementById('tab-debug').style.display = 'none';
     document.getElementById('tab-ref').style.display = 'none';
+    panel.highlightNavTab(document.getElementById('nav-sim'), true);
+    panel.highlightNavTab(document.getElementById('nav-debug'), false);
+    panel.highlightNavTab(document.getElementById('nav-ref'), false);
 };
 
 /**
@@ -899,6 +915,9 @@ panel.showTabDebug = function() {
     document.getElementById('tab-sim').style.display = 'none';
     document.getElementById('tab-debug').style.display = 'block';
     document.getElementById('tab-ref').style.display = 'none';
+    panel.highlightNavTab(document.getElementById('nav-sim'), false);
+    panel.highlightNavTab(document.getElementById('nav-debug'), true);
+    panel.highlightNavTab(document.getElementById('nav-ref'), false);
 };
 
 /**
@@ -908,4 +927,7 @@ panel.showTabRes = function() {
     document.getElementById('tab-sim').style.display = 'none';
     document.getElementById('tab-debug').style.display = 'none';
     document.getElementById('tab-ref').style.display = 'block';
+    panel.highlightNavTab(document.getElementById('nav-sim'), false);
+    panel.highlightNavTab(document.getElementById('nav-debug'), false);
+    panel.highlightNavTab(document.getElementById('nav-ref'), true);
 };