Filament Selection dialog Fixes / Improvements (#12325)

* Update 22.js

* fix printer list empty

* switch to vertical scrolling on custom filaments

* Update 23.css

* add stats

* fix uncommon filament types

* fix setup wizerd styling

---------

Co-authored-by: SoftFever <softfeverever@gmail.com>

resources/web/guide/23/23.css

@@ -143,14 +143,12 @@
 #CFilament_List
 {
 	display:flex;
-	overflow-x:auto;
+	overflow-y:auto;
 	flex-wrap:wrap;
-	flex-direction: column;
 	justify-content:flex-start;
 	align-items: flex-start;
 	align-content:flex-start;
 	line-height: 32px;
-
 	height: 100%;
 }
 
@@ -158,12 +156,17 @@
 {
 	display: flex;
 	align-items: center;
-	margin-right: 30px;
+	margin-right: 10%;
+	width: 44%;
+}
+
+.CFilament_Item:nth-of-type(2n) {
+	margin-right: 2%;
 }
 
 .CFilament_Name
 {
-	width: 220px;
+	width: 100%;
 	overflow: hidden;
     white-space: nowrap; /* ?????? */
     text-overflow: ellipsis; /* ????????? */
@@ -270,6 +273,11 @@ body:has(#SystemFilamentBtn.TitleSelected) #Content { /* :has selector browser s
 	margin: 3px;
 }
 
+.list-item-count {
+	color:var(--fg-color-label);
+	margin-left:10px
+}
+
 .cbr-filter-btns {
 	display: flex;
 	margin: 5px 5px 5px auto;

resources/web/guide/23/23.js

@@ -74,10 +74,10 @@ function SortUI()
 	
 	$('#MachineList .CValues').append(HtmlMode);	
 	$('#MachineList .CValues input').prop("checked",true);
-	if(nMode<=1)
-	{
-		$('#MachineList').hide();
-	}
+	//if(nMode<=1)
+	//{
+	//	$('#MachineList').hide();
+	//}
 	
 	//Filament - Create sorted array with generic vendor first
 	let FilamentArray=new Array();
@@ -171,7 +171,7 @@ function SortUI()
 	        if(pFila.length==0)
 		    {
 				/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
-			    let HtmlFila='<label class="MItem"><input type="checkbox" vendor="'+fVendor+'"  filatype="'+fType+'" filalist="'+fWholeName+';'+'"  model="'+fModel+'" name="'+fShortName+'" /><span>'+fShortName+'</span></label>';
+			    let HtmlFila='<label class="MItem"><input type="checkbox" onChange="UpdateStats()" vendor="'+fVendor+'"  filatype="'+fType+'" filalist="'+fWholeName+';'+'"  model="'+fModel+'" name="'+fShortName+'" /><span>'+fShortName+'</span></label>';
 			
 			    $("#ItemBlockArea").append(HtmlFila);
 		    } 
@@ -238,6 +238,8 @@ function SortUI()
 	//------
 	if(SelectNumber==0)
 		ChooseDefaultFilament();
+
+	UpdateStats();
 }
 
 
@@ -403,9 +405,29 @@ function SortFilament()
 			else
 				$(OneNode).hide();
 		}
-		else
+		else{
 			$(OneNode).hide();
+			//alert(fName) //debug non common filament type
+		}
+			
 	}
+
+	UpdateStats();
+}
+
+function UpdateStats()
+{
+	let $i             = $("#ItemBlockArea");
+	let $allItems      = $i.find(".MItem");
+	let $visibleItems  = $i.find(".MItem:visible");
+	let $filteredItems = $visibleItems.filter(function() { return $(this).css('position') !== 'absolute'});
+	let visibleCount   = Math.min($filteredItems.length, $visibleItems.length);
+	
+	$(".list-item-count").text(
+		$i.find("input:checked").length + " / " + 
+		$allItems.length +
+		($allItems.length > visibleCount ? (" [" + visibleCount + "]") : "") // filtered items
+	);
 }
 
 function ChooseDefaultFilament()
@@ -461,6 +483,8 @@ function SelectAllFilament( nShow )
 	else {
 		$('#ItemBlockArea .MItem:visible input').prop("checked",nShow!=0);
 	}
+
+	UpdateStats();
 }
 
 function ShowNotice( nShow )

resources/web/guide/23/index.html

@@ -87,6 +87,7 @@
 					<option value="2">Unchecked</option>
 				</select>
 			</div>
+			<div class="list-item-count"></div>
 			<div class="cbr-filter-btns">
 				<span class="cbr-filter-mode-filter  trans">Select filtered</span>
 				<span class="cbr-filter-mode-visible trans">Select visible</span>
@@ -107,7 +108,7 @@
 	<div id="CFilament_Btn_Area">
 		<div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t111" onClick="OnClickCustomFilamentAdd()">Create New</div>
 	</div>
-    <div id="CFilament_List" class="ZScrol">
+    <div id="CFilament_List" class="thin-scroll">
 	</div>
 </div>
 	
@@ -228,6 +229,8 @@
 		}
 	
         list.querySelector('.cbr-no-items').style.display = (hidden === items.length) ? "block" : "none";
+
+		UpdateStats();
 	});
 	addClearBtnEvents(filterBar);