main menu transformed to icons

Author: ondras

css/ui.css

@@ -1,3 +1,7 @@
+button:not(:disabled) {
+	cursor: pointer;
+}
+
 .ui {
 	position: fixed;
 	right: 0;
@@ -24,7 +28,7 @@
 	text-align: center;
 }
 
-.ui button, .ui select, .ui input {
+.ui select, .ui input {
 	color: #000;
 	border: none;
 	font-size: 13px;
@@ -35,47 +39,42 @@
 	transition: all 250ms linear;
 }
 
-.ui p button:hover, .ui p select:hover, .ui p input:hover, .ui p :focus {
+.ui select:hover, .ui input:hover {
 	opacity: 0.8;
 }
 
-.ui:not([id]) p button {
-	color: #fff;
-}
-
-.ui:not([id]) p:nth-of-type(1) button {
-	background-color: #1abc9c;
-}
-
-.ui:not([id]) p:nth-of-type(2) button {
-	background-color: #3498db;
+.ui select, .ui input, .ui #color {
+	width: 168px;
 }
 
-.ui:not([id]) p:nth-of-type(3) button {
-	background-color: #2ecc71;
+.ui .go {
+	font-weight: bold;
 }
 
-
-.ui button {
-	cursor: pointer;
-	text-align: center;
-	width: 82px;
+.ui p {
+	margin: 8px 16px;
 }
 
-.ui select, .ui input, .ui #color {
-	width: 168px;
+.ui:not([id]) button {
+	border: none;
+	padding: 0;
+	margin: 0 4px;
+	background-color: transparent;
+	width: 32px;
 }
 
 .ui button:first-child {
-	margin-right: 4px;
+	margin-left: 0;
 }
 
-.ui button.go {
-	font-weight: bold;
+.ui button:last-child {
+	margin-right: 0;
 }
 
-.ui p {
-	margin: 8px 16px;
+.ui button[data-command=Help] {
+	position: absolute;
+	left: -50px;
+	top: 5px;
 }
 
 .ui table {
@@ -134,13 +133,14 @@
 .ui #toggle {
 	z-index: 999;
 	position: absolute;
-	left: -22px;
+	left: -23px;
 	top: 48%;
-	width: 36px;
-	height: 36px;
+	width: 35px;
+	height: 35px;
 	padding: 0 0 0 2px;
 	text-align: left;
 
+	border: none;
 	background-color: #fff;
 	box-shadow: -3px 0 2px 0px #666;
 

icons/help.png

@@ -21,13 +21,10 @@
 		<div class="ui">
 			<h3>Map</h3>
 			<p>
-				<button data-command="New">New</button><button data-command="Load">Load</button>
-			</p>
-			<p>
-				<button data-command="Save">Save</button><button data-command="SaveAs">Save As</button>
-			</p>
-			<p>
-				<button data-command="Center">Center</button><button data-command="Help">Help</button>
+				<button data-command="New" title="New"><img src="icons/new.png" alt="New" /></button>
+				<button data-command="Load" title="Open"><img src="icons/open.png" alt="Open" /></button>
+				<button data-command="Save" title="Save"><img src="icons/save.png" alt="Save" /></button>
+				<button data-command="SaveAs" title="Save as"><img src="icons/save-as.png" alt="Save as" /></button>
 			</p>
 
 			<h3>Item</h3>
@@ -83,6 +80,7 @@ <h3>Item</h3>
 
 			<a id="github" target="_blank" href="https://github.com/ondras/my-mind" title="GitHub project page"><img src="github.png" alt="GitHub project page" /></a>
 			<button id="toggle" title="Toggle UI"></button>
+			<button data-command="Help" title="Help"><img src="icons/help.png" alt="Help" /></button>
 		</div>
 
 

icons/new.png

@@ -1542,7 +1542,7 @@ MM.Command.Pan._step = function() {
 		offset[1] += dirs[ch][1];
 	});
 
-	MM.App.map.moveBy(10*offset[0], 10*offset[1]);
+	MM.App.map.moveBy(15*offset[0], 15*offset[1]);
 }
 
 MM.Command.Pan.handleEvent = function(e) {

icons/open.png

@@ -227,7 +227,7 @@ MM.Command.Pan._step = function() {
 		offset[1] += dirs[ch][1];
 	});
 
-	MM.App.map.moveBy(10*offset[0], 10*offset[1]);
+	MM.App.map.moveBy(15*offset[0], 15*offset[1]);
 }
 
 MM.Command.Pan.handleEvent = function(e) {