Use icon for show map button

This commit is contained in:
Carlos Salaverria 2016-08-19 17:57:20 -05:00
parent 1c2bea38df
commit 2215a98a08
3 changed files with 23 additions and 7 deletions

View file

@ -53,12 +53,12 @@
<div id="sidebar_container">
<div id="splitter" class="ui-resizable-handle ui-resizable-w"></div>
<div id="sidebar_canvas">
<a id="show_map_button" href="#"></a>
<div id="sudo_buttons">
<table style="width: 100%">
<tr>
<td style="width: 150px; text-align: center;">
<span id="reset_map_button" class="pointer" onclick="resetMap();">[ Reset Map ]</span>
<span id="show_map_button" class="pointer" onclick="showMap();">[ Show Map ]</span>
[ <span class="pointer" onclick="resetMap();">Reset Map</span> ]
</td>
<td style="width: 150px; text-align: center;" class="pointer">
[ <span onclick="selectAllPlanes();">Select All</span> ]

View file

@ -202,12 +202,12 @@ function initialize() {
// Set up map/sidebar splitter
$("#sidebar_container").resizable({handles: {w: '#splitter'}});
// Set up event handler for show/hide sidebar button
// Set up event handlers for buttons
$("#toggle_sidebar_button").click(toggleSidebarVisibility);
// Set up event handler for expand sidebar button
$("#expand_sidebar_button").click(expandSidebar);
$("#show_map_button").click(showMap);
// Set initial element visibility
$("#show_map_button").hide();
setColumnVisibility();
@ -1049,7 +1049,7 @@ function expandSidebar(e) {
$("#map_container").hide()
$("#toggle_sidebar_button").hide();
$("#splitter").hide();
$("#reset_map_button").hide();
$("#sudo_buttons").hide();
$("#show_map_button").show();
$("#sidebar_container").width("100%");
setColumnVisibility();
@ -1060,7 +1060,7 @@ function showMap() {
$("#map_container").show()
$("#toggle_sidebar_button").show();
$("#splitter").show();
$("#reset_map_button").show();
$("#sudo_buttons").show();
$("#show_map_button").hide();
$("#sidebar_container").width("410px");
setColumnVisibility();

View file

@ -21,6 +21,7 @@ html, body {
}
#toggle_sidebar_button {
display: block;
width: 48px;
height: 40px;
position: absolute;
@ -45,6 +46,7 @@ html, body {
}
#expand_sidebar_button {
display: block;
width: 48px;
height: 40px;
position: absolute;
@ -60,6 +62,20 @@ html, body {
background-image: url("images/show_sidebar_active_48x40.png");
}
#show_map_button {
display: block;
width: 48px;
height: 40px;
}
#show_map_button {
background-image: url("images/hide_sidebar_inactive_48x40.png");
}
#show_map_button:hover {
background-image: url("images/hide_sidebar_active_48x40.png");
}
#sidebar_container {
display: flex;
width: 410px;