undo button for mobile

images/icons/undo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18.885 3.515c-4.617-4.618-12.056-4.676-16.756-.195l-2.129-2.258v7.938h7.484l-2.066-2.191c2.82-2.706 7.297-2.676 10.073.1 4.341 4.341 1.737 12.291-5.491 12.291v4.8c3.708 0 6.614-1.244 8.885-3.515 4.686-4.686 4.686-12.284 0-16.97z"/></svg>

index.html

@@ -37,6 +37,9 @@
 		<div class="submenu">
 			<a class="logo" href="#">miniPaint</a>
 			<div class="block attributes" id="action_attributes"></div>
+			<button class="undo_button" id="undo_button" type="button">
+				<span class="sr_only">Undo</span>
+			</button>
 		</div>
 		
 		<div class="sidebar_left" id="tools_container"></div>

src/css/layout.css

@@ -174,6 +174,27 @@ body .sp-preview{
 	font-size:15px;
 	font-weight:bold;
 }
+.undo_button {
+	display: none;
+	width: 50px;
+	height: 50px;
+	top: 0;
+	border: 0;
+	outline: none;
+	cursor: pointer;
+	filter: var(--mobile-menu-toggle-filter);
+	background: url(images/icons/undo.svg) no-repeat center center;
+	background-size: auto 25px;
+	margin-left: 10px;
+}
+.undo_button:hover {
+	background-color: transparent;
+}
+@media screen and (max-width: 700px){
+	.undo_button {
+		display: block;
+	}
+}
 
 /* ========== sub-header ==================================================== */
 

src/js/modules/edit/undo.js

@@ -1,9 +1,26 @@
 import Base_state_class from './../../core/base-state.js';
 
+var instance = null;
+
 class Edit_undo_class {
 
 	constructor() {
+		//singleton
+		if (instance) {
+			return instance;
+		}
+		instance = this;
+
 		this.Base_state = new Base_state_class();
+		this.events();
+	}
+
+	events(){
+		var _this = this;
+
+		document.querySelector('#undo_button').addEventListener('click', function (event) {
+			_this.Base_state.undo();
+		});
 	}
 
 	undo() {