clones/8800-simulator
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

a better tab switching visual effect

This commit is contained in:
wixette 2020-03-08 17:35:58 +08:00
parent badbe39466
commit 692295ba8e
2 changed files with 35 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/style.css
View File

@ -22,6 +22,7 @@ header {
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: center; justify-content: center;
line-height: 2em;
padding: 5px 20px 5px 20px; padding: 5px 20px 5px 20px;
} }
@ -32,6 +33,7 @@ header {
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: center; justify-content: center;
line-height: 1.5em;
padding: 5px 20px 5px 20px; padding: 5px 20px 5px 20px;
} }
@ -43,22 +45,28 @@ nav {
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-between; justify-content: space-between;
line-height: 1.5em;
padding: 5px 20px 5px 20px; padding: 5px 20px 5px 20px;
} }
.nav-item { .nav-item {
background-color: #ddd; background-color: #eee;
border: 1px solid #ccc; border-left: 1px solid #fff;
padding: 3px 10px 3px 10px; border-right: 1px solid #ccc;
cursor: pointer; cursor: pointer;
flex-grow: 1;
padding: 3px 10px 3px 10px;
text-align: center;
user-select: none; user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
} }
.nav-item:hover { nav .selected {
background-color: #eee; background-color: #ccc;
cursor: auto;
font-weight: bold;
} }
main { main {

22
js/panel.js
View File

@ -883,6 +883,19 @@ panel.playSwitch = function() {
panel.playSound('sound-switch'); 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. * 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-sim').style.display = 'block';
document.getElementById('tab-debug').style.display = 'none'; document.getElementById('tab-debug').style.display = 'none';
document.getElementById('tab-ref').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-sim').style.display = 'none';
document.getElementById('tab-debug').style.display = 'block'; document.getElementById('tab-debug').style.display = 'block';
document.getElementById('tab-ref').style.display = 'none'; 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-sim').style.display = 'none';
document.getElementById('tab-debug').style.display = 'none'; document.getElementById('tab-debug').style.display = 'none';
document.getElementById('tab-ref').style.display = 'block'; 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);
}; };