Fixed triangles

src/frontend/partials/controls.eta.html

@@ -126,7 +126,7 @@
 							data-bs-target="#collapseSettingsStorages"
 							aria-expanded="<%= it.active == 'SETT_STORE' ? 'true' : 'false'%>"
 							aria-controls="collapseSettingsStorages">
-							<i class="bi bi-caret-left-fill dropdownIndicator"></i>
+							<i class="bi bi-caret-left-fill dropdownIndicator" data-ref-target="#collapseSettingsStorages"></i>
 						</span>
 					</a>
 
@@ -159,20 +159,18 @@
 						<a class="nav-link ms-4 <%= it.active == 'SETT_IMPORT_JSON' ? 'active' : ''%>" href="/manage/import/json"> <i class="bi bi-filetype-json"></i> JSON Import</a>
 					</div>
 				</ul>
-				
 			</div>
 			<!-- Align the mode picker at the bottom of the navbar -->
 
 			<ul class="nav flex-column mb-2 position-absolute bottom-0 align-items-center w-100">
 				<div class="input-group mb-3 justify-content-center w-100">
-					
 					<label class="btn btn-secondary" for="mode_light"><i class="bi bi-brightness-high"></i></label>
-					<input type="radio" class="btn-check" name="options" id="mode_light" autocomplete="off" >
+					<input type="radio" class="btn-check" name="options" id="mode_light" autocomplete="off" />
 
-					<input type="radio" class="btn-check" name="options" id="mode_auto" autocomplete="off" checked>
+					<input type="radio" class="btn-check" name="options" id="mode_auto" autocomplete="off" checked />
 					<label class="btn btn-secondary" for="mode_auto"><i class="bi bi-magic"></i></label>
 
-					<input type="radio" class="btn-check" name="options" id="mode_dark" autocomplete="off">
+					<input type="radio" class="btn-check" name="options" id="mode_dark" autocomplete="off" />
 					<label class="btn btn-secondary" for="mode_dark"><i class="bi bi-moon"></i></label>
 				</div>
 				<script>
@@ -189,20 +187,21 @@
 					}
 					modeLight.addEventListener('click', () => {
 						localStorage.setItem('bs.theme', 'light');
-						document.documentElement.setAttribute('data-bs-theme', 'light');
+						updateColorMode()
+						//document.documentElement.setAttribute('data-bs-theme', 'light');
 					});
 					modeAuto.addEventListener('click', () => {
 						localStorage.setItem('bs.theme', 'auto');
-						document.documentElement.setAttribute('data-bs-theme', 'auto');
+						updateColorMode()
+						//document.documentElement.setAttribute('data-bs-theme', 'auto');
 					});
 					modeDark.addEventListener('click', () => {
 						localStorage.setItem('bs.theme', 'dark');
-						document.documentElement.setAttribute('data-bs-theme', 'dark');
+						updateColorMode()
+						//document.documentElement.setAttribute('data-bs-theme', 'dark');
 					});
 				</script>
 			</ul>
-			
-			      
 		</nav>
 
 		<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4" style="min-height: 100%">

static/css/dashboard.css

@@ -108,10 +108,17 @@ body {
 	transform: rotate(-90deg) !important;
 	transition: 0.5s;
 }
-
+.derotate {
-.dropdownIndicator {
+	transform: rotate(0deg) !important;
 	transition: 0.5s;
 }
+.derotate::before {
+	transform: rotate(0deg) !important;
+	transition: 0.5s;
+}
+.dropdownIndicator {
+	transition: all 0.5s;
+}
 
 
 /*

static/js/handleSidebarTriangles.js

@@ -1,18 +1,22 @@
 const trinagles = $('.dropdownIndicator');
-//const containers = $('');
+console.log(`Found ${trinagles.length} triangles`)
+
 
 trinagles.each(function () {
 	var target = $(this.dataset.refTarget);
+	var triTar = $(this);
+	// Apply rotate if target is open
+	if (target.hasClass('show')) {
+		$(this).addClass('rotate');
+	}
+
+	console.log('target', target);
 	target.on('show.bs.collapse', function () {
-		//$(this).parent.addClass('rotate');
+		$(triTar).addClass('rotate');
-		 $(this).parent().find('.dropdownIndicator').addClass('rotate');
+		$(triTar).removeClass('derotate');
-		 console.log($(this).parent().find('.dropdownIndicator'));
-		console.log('show');
 	});
 	target.on('hide.bs.collapse', function () {
-		//$(this).parent.removeClass('rotate');
+		$(triTar).removeClass('rotate');
-		 $(this).parent().find('.dropdownIndicator').removeClass('rotate');
+		$(triTar).addClass('derotate');
-		console.log('hide');
 	});
-	// bootstrap.Collapse.getOrCreateInstance(document.querySelector(this.dataset.refTarget))
 });

static/js/normalizeToast.js

@@ -1,8 +0,0 @@
-function normalizeToast(){
-	console.warn("Something is using the deprecated function normalizeToast(). Please use createNewToast() instead.")
-	$('#generalToast').removeClass('text-bg-primary');
-	$('#generalToast').removeClass('text-bg-success');
-	$('#generalToast').removeClass('text-bg-danger');
-	$('#generalToast').removeClass('text-bg-warning');
-	$('#generalToast').removeClass('text-bg-info');
-}

static/js/toastHandler.js

@@ -1,5 +1,13 @@
 const currentToasts = [];
 
+/**
+ * Generic function to create a new toast
+ * @param {String} message The message to be displayed
+ * @param {String} colorSelector The bootstrap color selector class, can be one of the following: text-bg-primary, text-bg-success, text-bg-danger, text-bg-warning, text-bg-info
+ * @param {Number} autoHideTime  The time in milliseconds to auto hide the toast, default is 3000
+ * @param {Boolean} autoReload Should the page reload after the toast is hidden, default is true (for compatibility with old code)
+ * @returns {String} The id of the created toast, format: toast-<number>
+ */
 function createNewToast(message, colorSelector, autoHideTime = 3000, autoReload = true){
 	const targetContainer = document.getElementById('toastMainController');
 	const masterToast = document.getElementById('masterToast');
@@ -17,11 +25,26 @@ function createNewToast(message, colorSelector, autoHideTime = 3000, autoReload
 			location.reload();
 		}
 	}, autoHideTime);
+	return newToast.id;
 }
 
+/**
+ * Generic function to destroy a toast
+ * @param {String} id The id of the toast to destroy
+ */
 function destroyToast(id){
 	const targetContainer = document.getElementById('toastMainController');
 	const targetToast = document.getElementById(id);
 	targetContainer.removeChild(targetToast);
 	currentToasts.splice(currentToasts.indexOf(targetToast), 1);
 }
+
+// Moved here
+function normalizeToast(){
+	console.warn("Something is using the deprecated function normalizeToast(). Please use createNewToast() instead.")
+	$('#generalToast').removeClass('text-bg-primary');
+	$('#generalToast').removeClass('text-bg-success');
+	$('#generalToast').removeClass('text-bg-danger');
+	$('#generalToast').removeClass('text-bg-warning');
+	$('#generalToast').removeClass('text-bg-info');
+}