From dc59251c5bb4d42efd12891c2795e4e8fb5f6b7e Mon Sep 17 00:00:00 2001
From: "J.T. Sage" <jtsage+datebox@gmail.com>
Date: Mon, 19 Aug 2024 10:29:50 -0400
Subject: [PATCH] Tweak find list, tweak select highlight, tweak close buttons
 on overlays. Re: #255

---
 renderer/main.html                 | 18 ++++++++++++++++--
 renderer/renderJS/main_ui_lib.js   | 20 ++++++++++++++------
 renderer/renderJS/util/util_lib.js |  2 +-
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/renderer/main.html b/renderer/main.html
index 86d260cc..9fcf1841 100644
--- a/renderer/main.html
+++ b/renderer/main.html
@@ -210,6 +210,12 @@
 			background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, var(--bs-danger-bg-subtle) 80%);
 		}
 
+		.bg-mod-selected {
+			--bs-bg-opacity: 0.80;
+			background-color: rgba(var(--bs-success-rgb),var(--bs-bg-opacity))!important;
+			color: white;
+		}
+
 	</style>
 	
 </head>
@@ -359,6 +365,7 @@ <h2 class="ps-2 mastHead">
 
 	</div>
 
+	<!-- MARK: game launch modal -->
 	<div class="modal" id="open_game_modal" tabindex="-1">
 		<div class="modal-dialog modal-dialog-centered">
 			<div class="modal-content">
@@ -388,6 +395,7 @@ <h2 class="ps-2 mastHead">
 		</div>
 	</div>
 
+	<!-- MARK: source site -->
 	<div class="modal" id="open_mod_info_modal" tabindex="-1">
 		<div class="modal-dialog modal-dialog-centered">
 			<div class="modal-content">
@@ -411,6 +419,7 @@ <h2 class="ps-2 mastHead">
 	</div>
 
 
+	<!-- MARK: drag-drop back -->
 	<div id="drag_back" class="d-none position-absolute w-100 h-100 text-center" style="z-index: 10000; background-color: #00000066">
 		<div class="row h-100">
 			<div id="drag_add_file" class="bg-opacity-50 col">
@@ -430,6 +439,7 @@ <h2 class="ps-2 mastHead">
 		</div>
 	</div>
 
+	<!-- MARK: version pick -->
 	<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas-version" style="-webkit-app-region: no-drag; transition: 0.5s" aria-labelledby="offcanvasLabel">
 		<div class="offcanvas-header">
 			<i18n-text class="h5 offcanvas-title" id="offcanvasLabel" data-key="notes_title_version"></i18n-text>
@@ -441,9 +451,10 @@ <h2 class="ps-2 mastHead">
 		</div>
 	</div>
 
+	<!-- MARK: pref canvas-->
 	<div class="offcanvas offcanvas-end w-75" tabindex="-1" id="prefcanvas" style="-webkit-app-region: no-drag; transition: 0.5s" aria-labelledby="offcanvasLabel-prefs">
 		<div class="offcanvas-header justify-content-start" style="-webkit-app-region: drag;">
-			<button type="button" style="-webkit-app-region: no-drag; z-index: 1;" class="btn btn-secondary" data-bs-dismiss="offcanvas" data-bs-target="#prefcanvas" aria-label="Close"><i class="bi-x-lg"></i></button>
+			<button id="prefs--close-btn" type="button" style="-webkit-app-region: no-drag; z-index: 1;" class="btn btn-secondary"><i class="bi-x-lg"></i></button>
 			<i18n-text class="h5 offcanvas-title ps-3" id="offcanvasLabel-prefs" data-key="user_pref_title_main"></i18n-text>
 		</div>
 		<div class="offcanvas-body full-scroll" id="prefcanvas_content">
@@ -576,9 +587,10 @@ <h2 class="ps-2 mastHead">
 		</div>
 	</div>
 
+	<!-- MARK: file canvas -->
 	<div class="offcanvas offcanvas-bottom h-100" tabindex="-1" id="fileOpCanvas" style="-webkit-app-region: no-drag; transition: 0.5s">
 		<div class="offcanvas-header justify-content-start" style="-webkit-app-region: drag;">
-			<button type="button" style="-webkit-app-region: no-drag; z-index: 1;" class="btn btn-secondary" data-bs-dismiss="offcanvas" data-bs-target="#fileOpCanvas" aria-label="Close"><i class="bi-x-lg"></i></button>
+			<button type="button" id="fileOpCanvas-button-close" style="-webkit-app-region: no-drag; z-index: 1;" class="btn btn-secondary"><i class="bi-x-lg"></i></button>
 			<i18n-text class="h5 offcanvas-title ps-3" data-key="app_name"></i18n-text>
 		</div>
 		<div class="offcanvas-body full-scroll">
@@ -622,6 +634,7 @@ <h2 class="ps-2 mastHead">
 		</div>
 	</div>
 
+	<!-- MARK : loader -->
 	<div id="loadOverlay" class="modal" tabindex="-1">
 		<div class="modal-dialog modal-lg modal-dialog-centered" style="width:600px; height:300px;">
 			<div class="modal-content p-0 m-0 bg-dark">
@@ -650,6 +663,7 @@ <h2 class="ps-2 mastHead">
 		</div>
 	</div>
 
+	<!-- MARK: file progress -->
 	<div class="modal fade" id="fileOpProgress">
 		<div class="modal-dialog modal-dialog-centered w-50">
 			<div class="modal-content" style="height: 220px;">
diff --git a/renderer/renderJS/main_ui_lib.js b/renderer/renderJS/main_ui_lib.js
index 2e0c418c..a98cdd6d 100644
--- a/renderer/renderJS/main_ui_lib.js
+++ b/renderer/renderJS/main_ui_lib.js
@@ -10,6 +10,7 @@
 
 // eslint-disable-next-line no-unused-vars
 class StateManager {
+	selectClass     = 'bg-mod-selected'
 	malwareSkip     = []
 	malwareSuppress = []
 
@@ -282,7 +283,7 @@ class StateManager {
 
 	// MARK: translated UI selects
 	async updateI18NDrops() {
-		const finds = ['find_all', 'find_author', 'find_title', 'find_name', 'find_version']
+		const finds = ['find_all', 'find_author', 'find_title', 'find_name']
 		const sorts = ['sort_name', 'sort_title', 'sort_author', 'sort_date', 'sort_version']
 
 		const findOptions = finds.map((x) =>
@@ -750,11 +751,11 @@ class StateManager {
 
 		if ( doAdd ) {
 			this.track.selected.add(id)
-			MA.safeClsAdd(id, 'bg-success-subtle')
+			MA.safeClsAdd(id, this.selectClass)
 			MA.safeClsAdd(`${id}--scroller`, 'bg-success')
 		} else {
 			this.track.selected.delete(id)
-			MA.safeClsRem(id, 'bg-success-subtle')
+			MA.safeClsRem(id, this.selectClass)
 			MA.safeClsRem(`${id}--scroller`, 'bg-success')
 		}
 		
@@ -770,8 +771,8 @@ class StateManager {
 
 	// MARK: safe refresh
 	refreshSelected() {
-		for ( const element of MA.query('.mod-row.bg-success-subtle') ) {
-			element.classList.remove('bg-success-subtle')
+		for ( const element of MA.query(`.mod-row.${this.selectClass}`) ) {
+			element.classList.remove(this.selectClass)
 		}
 		for ( const element of MA.query('scroller-item.bg-success') ) {
 			element.classList.remove('bg-success')
@@ -781,7 +782,7 @@ class StateManager {
 			if ( !id.startsWith(this.track.openCollection) ) {
 				this.track.selected.delete(id)
 			} else {
-				MA.safeClsAdd(id, 'bg-success-subtle')
+				MA.safeClsAdd(id, this.selectClass)
 				MA.safeClsAdd(`${id}--scroller`, 'bg-success')
 			}
 		}
@@ -1146,6 +1147,9 @@ class PrefLib {
 			MA.byId('prefcanvas').querySelector('.offcanvas-body').scrollTop = 0
 			window.state.dragDrop.flags.preventRun = true
 		})
+		MA.byId('prefs--close-btn').addEventListener('click', () => {
+			this.overlay.hide()
+		})
 		window.settings.receive('settings:invalidate', () => { this.forceUpdate() })
 		this.init()
 	}
@@ -1343,6 +1347,7 @@ class PrefLib {
 					window.settings.get('lang_lock').then((value) => {
 						lang_lock.checked = value
 					})
+					window.state.updateI18NDrops()
 				}
 
 				this.update.push(lang_update)
@@ -1854,6 +1859,9 @@ class FileLib {
 			MA.byId('fileOpCanvas').querySelector('.offcanvas-body').scrollTop = 0
 		})
 		MA.byId('fileOpCanvas-button').addEventListener('click', () => { this.process() })
+		MA.byId('fileOpCanvas-button-close').addEventListener('click', () => {
+			this.overlay.hide()
+		})
 
 		window.main_IPC.receive('files:operation', (mode, mods) => {
 			this.start_external(mode, mods)
diff --git a/renderer/renderJS/util/util_lib.js b/renderer/renderJS/util/util_lib.js
index db52534f..f6dcb795 100644
--- a/renderer/renderJS/util/util_lib.js
+++ b/renderer/renderJS/util/util_lib.js
@@ -560,7 +560,7 @@ window.addEventListener('DOMContentLoaded', () => {
 	})(window.console)
 	
 	// eslint-disable-next-line no-constant-condition
-	if ( false ) {
+	if ( true ) {
 		window.console = newConsole
 	}