🎨 Close dialogs by clicking outside

OctoPrint has this option to prevent clicking outside
of dialogs; If TouchUI is active we will set this
by default to true. An user can override this in the
settings menu of TouchUI.

octoprint_touchui/__init__.py

@@ -12,7 +12,7 @@
 import os
 
 try:
-	from octoprint.access.permissions import ADMIN_GROUP, USER_GROUP
+	from octoprint.access.permissions import ADMIN_GROUP
 except:
 	ADMIN_GROUP=None
 	USER_GROUP=None
@@ -91,6 +91,7 @@ def get_settings_defaults(self):
 			automaticallyLoadResolution=True,
 			automaticallyLoadTouch=True,
 			useCustomization=False,
+			closeDialogsOutside=False,
 			colors=dict(
 				mainColor="#00B0FF",
 				termColor="#0F0",

octoprint_touchui/static/js/touchui.bundled.js

@@ -1434,6 +1434,11 @@ TouchUI.prototype.knockout.isReady = function (viewModels) {
 		setTimeout(function() {
 			self.plugins.multiWebCam.call(self);
 		}, 0);
+
+		// Disable clicking outside models
+		viewModels.settingsViewModel.appearance_closeModalsWithClick(this.settings.closeDialogsOutside());
+		$('#settings-appearanceCloseModalsWithClick').parent().addClass('touchui_disabled');
+		$('<span>(Disabled and managed by TouchUI)</span>').appendTo($('#settings-appearanceCloseModalsWithClick').parent());
 	}
 }
 

octoprint_touchui/static/less/touchui.bundled.less

@@ -569,6 +569,13 @@ div.error {
 background: transparent !important;
 color: inherit !important;
 }
+.touchui_disabled {
+opacity: 0.7;
+pointer-events: none;
+}
+#settings-appearanceCloseModalsWithClick span {
+font-size: 11px;
+}
 #navbar {
 background-color: @main-color;
 border: 0 none !important;

octoprint_touchui/templates/touchui_settings.jinja2

@@ -28,6 +28,12 @@
 			</label>
 		</div>
 
+		<div class="controls">
+			<label class="checkbox">
+				<input type="checkbox" data-bind="checked: settings.closeDialogsOutside"> Close dialogs by clicking outside
+			</label>
+		</div>
+
 	</div>
 
 	<div class="control-group" data-bind="css: { disabled: !settings.useCustomization() }">

source/js/knockout/isReady.js

@@ -174,5 +174,12 @@ TouchUI.prototype.knockout.isReady = function (viewModels) {
 		setTimeout(function() {
 			self.plugins.multiWebCam.call(self);
 		}, 0);
+
+		// Disable clicking outside models
+		if (viewModels.settingsViewModel.appearance_closeModalsWithClick) {
+			viewModels.settingsViewModel.appearance_closeModalsWithClick(this.settings.closeDialogsOutside());
+			$('#settings-appearanceCloseModalsWithClick').parent().addClass('touchui_disabled');
+			$('<span>(Disabled and managed by TouchUI)</span>').appendTo($('#settings-appearanceCloseModalsWithClick').parent());
+		}
 	}
 }

source/less/touchui.less

@@ -52,6 +52,15 @@
 			color: inherit !important;
 		}
 
+		.touchui_disabled {
+			opacity: 0.7;
+			pointer-events: none;
+		}
+
+		#settings-appearanceCloseModalsWithClick span {
+			font-size: 11px;
+		}
+
 		@import "layout/header.less";
 		@import "layout/general.less";
 		@import "layout/links.less";