We don't need that switch-button, a native Boostrap button is enough and less disturbing

changelog/56_UNRELEASED_2020-xx-xx.md

@@ -17,4 +17,5 @@
 
 ### General & other improvements/fixes
 - Optimized the top navbar height to waste less space
+- Replaced the scan-mode-switch-button by a native button because it's less disturbing
 - Fixed that the "contextual time ago" of date/time pickers was not displayed

package.json

@@ -9,7 +9,6 @@
 		"bootbox": "^5.3.2",
 		"bootstrap": "^4.3.1",
 		"bootstrap-select": "^1.13.10",
-		"bootstrap-switch-button": "https://github.com/walidbagh/bootstrap-switch-button#Fix-module-export",
 		"chart.js": "^2.8.0",
 		"datatables.net": "^1.10.19",
 		"datatables.net-bs4": "^1.10.19",

public/viewjs/consume.js

@@ -521,10 +521,6 @@ if (GetUriParam("embedded") !== undefined)
 // Default input field
 Grocy.Components.ProductPicker.GetInputElement().focus();
 
-// Can only be set via JS however...
-$("#scan-mode").addClass("user-setting-control");
-$("#scan-mode").attr("data-setting-key", "scan_mode_consume_enabled");
-
 $(document).on("change", "#scan-mode", function(e)
 {
 	if ($(this).prop("checked"))
@@ -532,3 +528,18 @@ $(document).on("change", "#scan-mode", function(e)
 		Grocy.UISound.AskForPermission();
 	}
 });
+
+$("#scan-mode-button").on("click", function(e)
+{
+	document.activeElement.blur();
+	$("#scan-mode").click();
+	$("#scan-mode-button").toggleClass("btn-success").toggleClass("btn-danger");
+	if ($("#scan-mode").prop("checked"))
+	{
+		$("#scan-mode-status").text(__t("on"));
+	}
+	else
+	{
+		$("#scan-mode-status").text(__t("off"));
+	}
+});

public/viewjs/purchase.js

@@ -362,14 +362,25 @@ function UndoStockTransaction(transactionId)
 	);
 };
 
-// Can only be set via JS however...
+$("#scan-mode").on("change", function(e)
-$("#scan-mode").addClass("user-setting-control");
-$("#scan-mode").attr("data-setting-key", "scan_mode_purchase_enabled");
-
-$(document).on("change", "#scan-mode", function(e)
 {
 	if ($(this).prop("checked"))
 	{
 		Grocy.UISound.AskForPermission();
 	}
 });
+
+$("#scan-mode-button").on("click", function(e)
+{
+	document.activeElement.blur();
+	$("#scan-mode").click();
+	$("#scan-mode-button").toggleClass("btn-success").toggleClass("btn-danger");
+	if ($("#scan-mode").prop("checked"))
+	{
+		$("#scan-mode-status").text(__t("on"));
+	}
+	else
+	{
+		$("#scan-mode-status").text(__t("off"));
+	}
+});

views/consume.blade.php

@@ -4,12 +4,7 @@
 @section('activeNav', 'consume')
 @section('viewJsName', 'consume')
 
-@push('pageStyles')
-	<link href="{{ $U('/node_modules/bootstrap-switch-button/css/bootstrap-switch-button.css?v=', true) }}{{ $version }}" rel="stylesheet">
-@endpush
-
 @push('pageScripts')
-	<script src="{{ $U('/node_modules/bootstrap-switch-button/js/bootstrap-switch-button.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy_uisound.js?v=', true) }}{{ $version }}"></script>
 @endpush
 
@@ -19,7 +14,8 @@
 		<h1>
 			@yield('title')
 			@if(!$embedded)
-			<input @if(boolval($userSettings['scan_mode_consume_enabled'])) checked @endif id="scan-mode" type="checkbox" data-setting-key="scan_mode_consume_enabled" data-toggle="switchbutton" data-onlabel="{{ $__t('Scan mode') }} {{ $__t('on') }}" data-offlabel="{{ $__t('Scan mode') }} {{ $__t('off') }}" data-onstyle="success" data-offstyle="primary" data-style="ml-2" data-width="180">
+			<button id="scan-mode-button" class="btn @if(boolval($userSettings['scan_mode_consume_enabled'])) btn-success @else btn-danger @endif" type="checkbox">{{ $__t('Scan mode') }} <span id="scan-mode-status">@if(boolval($userSettings['scan_mode_consume_enabled'])) {{ $__t('on') }} @else {{ $__t('off') }} @endif</span></button>
+			<input id="scan-mode" type="checkbox" class="d-none user-setting-control" data-setting-key="scan_mode_consume_enabled" @if(boolval($userSettings['scan_mode_consume_enabled'])) checked @endif>
 			@else
 			<script>
 				Grocy.UserSettings.scan_mode_consume_enabled = false;

views/purchase.blade.php

@@ -4,12 +4,7 @@
 @section('activeNav', 'purchase')
 @section('viewJsName', 'purchase')
 
-@push('pageStyles')
-	<link href="{{ $U('/node_modules/bootstrap-switch-button/css/bootstrap-switch-button.css?v=', true) }}{{ $version }}" rel="stylesheet">
-@endpush
-
 @push('pageScripts')
-	<script src="{{ $U('/node_modules/bootstrap-switch-button/js/bootstrap-switch-button.js?v=', true) }}{{ $version }}"></script>
 	<script src="{{ $U('/js/grocy_uisound.js?v=', true) }}{{ $version }}"></script>
 @endpush
 
@@ -19,7 +14,8 @@
 		<h1>
 			@yield('title')
 			@if(!$embedded)
-			<input @if(boolval($userSettings['scan_mode_purchase_enabled'])) checked @endif id="scan-mode" type="checkbox" data-setting-key="scan_mode_purchase_enabled" data-toggle="switchbutton" data-onlabel="{{ $__t('Scan mode') }} {{ $__t('on') }}" data-offlabel="{{ $__t('Scan mode') }} {{ $__t('off') }}" data-onstyle="success" data-offstyle="primary" data-style="ml-2" data-width="180">
+			<button id="scan-mode-button" class="btn @if(boolval($userSettings['scan_mode_purchase_enabled'])) btn-success @else btn-danger @endif" type="checkbox">{{ $__t('Scan mode') }} <span id="scan-mode-status">@if(boolval($userSettings['scan_mode_purchase_enabled'])) {{ $__t('on') }} @else {{ $__t('off') }} @endif</span></button>
+			<input id="scan-mode" type="checkbox" class="d-none user-setting-control" data-setting-key="scan_mode_purchase_enabled" @if(boolval($userSettings['scan_mode_purchase_enabled'])) checked @endif>
 			@else
 			<script>
 				Grocy.UserSettings.scan_mode_purchase_enabled = false;

yarn.lock

@@ -80,10 +80,6 @@ bootstrap-select@^1.13.10:
   resolved "https://registry.yarnpkg.com/bootstrap-select/-/bootstrap-select-1.13.12.tgz#81b9f1394cb8d7151aea16fb9030c112330dbf98"
   integrity sha512-epsPt6WpgmL9Q9Y22JFntajdhhqvCwV/JKiBZF3YFvMHK9YzzDPQft/Cjqvsgq0bhF32BlvG03Qs3qA/pVRAqQ==
 
-"bootstrap-switch-button@https://github.com/walidbagh/bootstrap-switch-button#Fix-module-export":
-  version "1.0.0"
-  resolved "https://github.com/walidbagh/bootstrap-switch-button#551ccd361cc9e291cd04c2278357b1db76318f1e"
-
 bootstrap@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0.tgz#ceb03842c145fcc1b9b4e15da2a05656ba68469a"