Open-Harbor/osrm-backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

moving UI to new boxes

Browse Source
This commit is contained in:
shiin 2012-05-08 22:37:27 +02:00
parent c8912ad6ee
commit 84677ddddf
12 changed files with 73 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
WebContent/gui/OSRM.MainGUI.js
View File

@ -52,7 +52,6 @@ setLabels: function() {
document.getElementById("gui-reset").innerHTML = OSRM.loc("GUI_RESET");
document.getElementById("gui-reverse").innerHTML = OSRM.loc("GUI_REVERSE");
document.getElementById("gui-option-highlight-nonames-label").innerHTML = OSRM.loc("GUI_HIGHLIGHT_UNNAMED_ROADS");
document.getElementById("gui-options-toggle").innerHTML = OSRM.loc("GUI_OPTIONS");
document.getElementById("gui-search-source").innerHTML = OSRM.loc("GUI_SEARCH");
document.getElementById("gui-search-target").innerHTML = OSRM.loc("GUI_SEARCH");
document.getElementById("gui-search-source-label").innerHTML = OSRM.loc("GUI_START")+":";
@ -68,15 +67,6 @@ clearResults: function() {
document.getElementById('information-box-header').innerHTML = "";
},
// show/hide small options bubble
toggleOptions: function() {
if(document.getElementById('options-box').style.visibility=="visible") {
document.getElementById('options-box').style.visibility="hidden";
} else {
document.getElementById('options-box').style.visibility="visible";
}
},
// reposition and hide zoom controls before main box animation
beforeMainTransition: function() {
var zoom_controls = OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom');

1
WebContent/gui/OSRM.RoutingGUI.js
View File

@ -37,7 +37,6 @@ init: function() {
document.getElementById("gui-reset").onclick = OSRM.GUI.resetRouting;
document.getElementById("gui-reverse").onclick = OSRM.GUI.reverseRouting;
document.getElementById("gui-options-toggle").onclick = OSRM.GUI.toggleOptions;
document.getElementById("open-josm").onclick = OSRM.GUI.openJOSM;
document.getElementById("open-osmbugs").onclick = OSRM.GUI.openOSMBugs;
document.getElementById("option-highlight-nonames").onclick = OSRM.Routing.getZoomRoute;

BIN
WebContent/images/config.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 397 B

BIN
WebContent/images/config_active.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 493 B

BIN
WebContent/images/config_hover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 482 B

BIN
WebContent/images/mapping.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 329 B

BIN
WebContent/images/mapping_active.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 378 B

BIN
WebContent/images/mapping_hover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 347 B

BIN
WebContent/images/raw/gui.pdf
View File

Binary file not shown.

36
WebContent/main.css
View File

@ -117,14 +117,46 @@ html, body {
#main-input
{
width:390px;
height:200px;
height:140px;
}
#main-output
{
width:390px;
top:220px; /* main-input.height+2*gui-box.margin+2*gui-box.padding */
top:160px; /* main-input.height+2*gui-box.margin+2*gui-box.padding */
bottom:0px;
}
#mapping-wrapper
{
width:410px;
height:100px;
bottom:25px;
right:-410px;
}
#mapping-content
{
width:390px;
height:80px;
}
#config-wrapper
{
width:410px;
height:100px;
bottom:25px;
right:-410px;
}
#config-content
{
width:390px;
height:80px;
}
/* general styles for gui box content */
div.label
{
font-weight:bold;
margin-bottom:10px;
}
/* styles for main-input areas */

55
WebContent/main.html
View File

@ -83,21 +83,41 @@ or see http://www.gnu.org/licenses/agpl.txt.
<!--map-->
<div id="map"></div>
<div id="config-wrapper" class="box-wrapper not-sectable" style="width:410px;height:100px;bottom:25px;right:-410px;">
<div id="config-content" class="box-content" style="width:390px;height:80px;">
<!-- config gui -->
<div id="config-wrapper" class="box-wrapper not-sectable">
<div id="config-content" class="box-content">
<div id="config-toggle" class="iconic-button cancel-marker top-right-button"></div>
Config block
<div id="config-label" class="label">Configuraion</div>
<div class="full">
<div class="row"><div class="left">Language:</div><div class="left">German</div></div>
<div class="row"><div class="left">Units:</div><div class="left">Miles</div></div>
</div>
</div>
</div>
<div id="mapping-wrapper" class="box-wrapper not-sectable" style="width:410px;height:100px;bottom:25px;right:-410px;">
<div id="mapping-content" class="box-content" style="width:390px;height:80px;">
<!-- mapping gui -->
<div id="mapping-wrapper" class="box-wrapper not-sectable">
<div id="mapping-content" class="box-content">
<div id="mapping-toggle" class="iconic-button cancel-marker top-right-button"></div>
Mapping block
<div id="mapping-label" class="label">Mapping Tools</div>
<div class="full">
<div class="left">
<input type="checkbox" id="option-highlight-nonames" value="highlight-nonames" />
<span id="gui-option-highlight-nonames-label" class="checkbox-label small-font">Highlight unnamed streets</span>
</div>
<div class="right">
<a class="button" id="open-josm">JOSM</a>
<a class="button" id="open-osmbugs">OSM Bugs</a>
</div>
</div>
<!-- show main gui -->
</div>
</div>
<!-- main gui -->
<div id="main-wrapper" class="box-wrapper not-selectable">
<!-- input box -->
@ -134,27 +154,6 @@ Mapping block
<div class="right"><a class="button" id="gui-reverse">Reverse</a></div>
</div>
</div>
<div class="quad"></div>
<!-- options -->
<div id="input-mask-options">
<!-- option toggle -->
<span id="gui-options-toggle" class="small-font">Mapping Tools</span>
<!-- actual options -->
<div id="options-box" class="full">
<div class="left">
<input type="checkbox" id="option-highlight-nonames" value="highlight-nonames" />
<span id="gui-option-highlight-nonames-label" class="checkbox-label small-font">Highlight unnamed streets</span>
</div>
<div class="right">
<a class="button" id="open-josm">JOSM</a>
<a class="button" id="open-osmbugs">OSM Bugs</a>
</div>
</div>
</div>
</div>
<!-- output box -->

18
WebContent/main.js
View File

@ -59,6 +59,12 @@ OSRM.prefetchImages = function() {
{id:'restore', url:'images/restore.png'},
{id:'restore_active', url:'images/restore_active.png'},
{id:'restore_hover', url:'images/restore_hover.png'},
{id:'config', url:'images/config.png'},
{id:'config_active', url:'images/config_active.png'},
{id:'config_hover', url:'images/config_hover.png'},
{id:'mapping', url:'images/mapping.png'},
{id:'mapping_active', url:'images/mapping_active.png'},
{id:'mapping_hover', url:'images/mapping_hover.png'},
{id:'printer', url:'images/printer.png'},
{id:'printer_active', url:'images/printer_active.png'},
{id:'printer_hover', url:'images/printer_hover.png'},
@ -129,13 +135,13 @@ OSRM.prefetchCSSIcons = function() {
{ id:'#input-mask-header', image_id:'osrm-logo'},
{ id:'.styled-select', image_id:'selector'},
{ id:'#config-handle-icon', image_id:'cancel'},
{ id:'#config-handle-icon:hover', image_id:'cancel_hover'},
{ id:'#config-handle-icon:active', image_id:'cancel_active'},
{ id:'#config-handle-icon', image_id:'config'},
{ id:'#config-handle-icon:hover', image_id:'config_hover'},
{ id:'#config-handle-icon:active', image_id:'config_active'},
{ id:'#mapping-handle-icon', image_id:'cancel'},
{ id:'#mapping-handle-icon:hover', image_id:'cancel_hover'},
{ id:'#mapping-handle-icon:active', image_id:'cancel_active'},
{ id:'#mapping-handle-icon', image_id:'mapping'},
{ id:'#mapping-handle-icon:hover', image_id:'mapping_hover'},
{ id:'#mapping-handle-icon:active', image_id:'mapping_active'},
{ id:'#main-handle-icon', image_id:'restore'},
{ id:'#main-handle-icon:hover', image_id:'restore_hover'},