AFG/dump1090
3
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Use icon for show map button

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
public_html/index.html
View file

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

10
public_html/script.js
View file

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

16
public_html/style.css
View file

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