juli/OrcaSlicer
1
1
Fork 0
mirror of https://github.com/OrcaSlicer/OrcaSlicer.git synced 2026-05-20 03:43:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Printer selection dialog redesign (#12248)

Browse Source 
* init

* remove debug

* update

* cleanup

* update

* animate sidebar and search bar when reduce motion not enabled

* add custom snappy scrolling to fix lags

* cleanup

* update

* scroll to vendor after layout change

* improve snapping on events

* update

* match UI of setup guide
This commit is contained in:
yw4z
2026-05-11 02:16:13 +03:00
committed by GitHub
parent f8db5b8ba3
commit 133dc1c8e5
10 changed files with 1336 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
resources/web/guide/24/24.js
View File

@@ -67,6 +67,13 @@ function HandleModelList( pVal )
return;
pModel=pVal['model'];
// ORCA ensure list correctly ordered
pModel = pModel.sort((a, b)=>(a["vendor"].localeCompare(b["vendor"])))
pModel = [ // move custom printers to top
...pModel.filter(i=>i.vendor === "Custom"),
...pModel.filter(i=>i.vendor !== "Custom")
];
let nTotal=pModel.length;
let ModelHtml={};
@@ -89,11 +96,15 @@ function HandleModelList( pVal )
let HtmlNewVendor='<div class="OneVendorBlock" Vendor="'+strVendor+'">'+
'<div class="BlockBanner">'+
' <a>'+sVV+'</a>'+
' <div class="BannerBtns">'+
' <div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t11" onClick="SelectPrinterAll('+"\'"+strVendor+"\'"+')">all</div>'+
' <div class="ButtonStyleRegular ButtonTypeWindow trans" tid="t12" onClick="SelectPrinterNone('+"\'"+strVendor+"\'"+')">none</div>'+
' </div>'+
' <a>'+sVV+'</a>'+
' <div class="BannerBtns" onClick="ChooseVendor('+"\'"+strVendor+"\'"+')">'+
' <div class="modelCount"></div>' +
' <input type="checkbox" class="VendorCheckbox"/>'+
' </div>'+
//' <div class="BannerBtns">'+
//' <div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t11" onClick="SelectPrinterAll('+"\'"+strVendor+"\'"+')">all</div>'+
//' <div class="ButtonStyleRegular ButtonTypeWindow trans" tid="t12" onClick="SelectPrinterNone('+"\'"+strVendor+"\'"+')">none</div>'+
//' </div>'+
'</div>'+
'<div class="PrinterArea"> '+
'</div>'+
@@ -130,6 +141,14 @@ function HandleModelList( pVal )
}
}
const $SidebarVendors = $('#SidebarVendors');
let SidebarHTML = "";
$(`.OneVendorBlock`).each((i, el)=>{
UpdateVendorCheckbox(el.getAttribute("vendor"));
SidebarHTML +=`<div class="SidebarItem" onclick="scrollToVendor(this.textContent)">${el.getAttribute('vendor')}</div>`;
});
$SidebarVendors.html(SidebarHTML)
// let AlreadySelect=$(".ModelCheckBoxSelected");
// let nSelect=AlreadySelect.length;
// if(nSelect==0)
@@ -140,6 +159,14 @@ function HandleModelList( pVal )
TranslatePage();
}
function scrollToVendor(vendor) {
const el = $(".OneVendorBlock[vendor='"+vendor+"']")[0];
if (el){
document.getElementById('SidebarContainer').setAttribute('open', '0');
document.getElementById('Content').scrollTo({top: el.offsetTop, behavior: "smooth"});
}
}
function SetModelSelect(vendor, model, checked) {
if (!ModelNozzleSelected.hasOwnProperty(vendor) && !checked) {
return;
@@ -153,6 +180,8 @@ function SetModelSelect(vendor, model, checked) {
if (oVendor.hasOwnProperty(model) || checked) {
oVendor[model] = checked;
}
UpdateVendorCheckbox(vendor)
}
function GetModelSelect(vendor, model) {
@@ -182,6 +211,8 @@ function FilterModelList(keyword) {
SetModelSelect(strVendor, strModel, $(OneItem).hasClass('ModelCheckBoxSelected'));
}
$('.search')[0].setAttribute("hasvalue", keyword ? "1" : "0")
let nTotal = pModel.length;
let ModelHtml = {};
let kwSplit = keyword.toLowerCase().match(/\S+/g) || [];
@@ -209,10 +240,14 @@ function FilterModelList(keyword) {
let HtmlNewVendor = '<div class="OneVendorBlock" Vendor="' + strVendor + '">' +
'<div class="BlockBanner">' +
' <a>' + sVV + '</a>' +
' <div class="BannerBtns">' +
' <div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t11" onClick="SelectPrinterAll(' + "\'" + strVendor + "\'" + ')">all</div>' +
' <div class="ButtonStyleRegular ButtonTypeWindow trans" tid="t12" onClick="SelectPrinterNone(' + "\'" + strVendor + "\'" + ')">none</div>' +
' </div>' +
' <div class="BannerBtns" onClick="ChooseVendor('+"\'"+strVendor+"\'"+')">'+
' <div class="modelCount"></div>' +
' <input type="checkbox" class="VendorCheckbox"/>'+
' </div>'+
//' <div class="BannerBtns">' +
//' <div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t11" onClick="SelectPrinterAll(' + "\'" + strVendor + "\'" + ')">all</div>' +
//' <div class="ButtonStyleRegular ButtonTypeWindow trans" tid="t12" onClick="SelectPrinterNone(' + "\'" + strVendor + "\'" + ')">none</div>' +
//' </div>' +
'</div>' +
'<div class="PrinterArea"> ' +
'</div>' +
@@ -252,6 +287,17 @@ function FilterModelList(keyword) {
$(OneItem).removeClass('ModelCheckBoxSelected');
}
const $SidebarVendors = $('#SidebarVendors');
let SidebarHTML = "";
$(`.OneVendorBlock`).each((i, el)=>{
UpdateVendorCheckbox(el.getAttribute("vendor"));
SidebarHTML +=`<div class="SidebarItem" onclick="scrollToVendor(this.textContent)">${el.getAttribute('vendor')}</div>`;
});
$SidebarVendors.html(SidebarHTML)
const $content = $('#Content');
$content.css("padding-right", $content[0].scrollHeight > $content[0].clientHeight ? "10px" : "20px");
// let AlreadySelect=$(".ModelCheckBoxSelected");
// let nSelect=AlreadySelect.length;
// if(nSelect==0)
@@ -287,9 +333,16 @@ function CreatePrinterBlock(OneModel)
'<div class="PImg">'+
'<img class="ModelThumbnail" src="' + OneModel['cover'] + '" />'+
'</div>'+
'<div class="PrinterInfoMark">?</div>'+
'<div class="PrinterInfo">'+
//' <div class="title trans">Print volume</div>'+
//' <div class="value">' + OneModel['printable_height'] + '</div>'+
' <div class="title trans">Nozzle</div>'+
' <div class="value">' + OneModel['nozzle_diameter'].replaceAll(";", " · ") + '</div>'+
'</div>'+
'<div style="display: flex;">'+
' <div class="ModelCheckBox" vendor="' +vendor+ '" model="'+OneModel['model']+'"></div>'+
' <div class="PName"><p>'+ vendorName +'</p><p>' + modelName +'</p></div>'+
' <div class="PName">'+ modelName +'</div>'+ // ><p>'+ vendorName +'</p>
'</div>'+
'</div>';
}
@@ -313,6 +366,30 @@ function SelectPrinterNone( sVendor )
});
}
function ChooseVendor(sVendor) {
const $cbs = $(`.OneVendorBlock[vendor='${sVendor}'] .ModelCheckBox`);
const sel = $cbs.length && $cbs.not('.ModelCheckBoxSelected').length;
sel ? $cbs.addClass('ModelCheckBoxSelected')
: $cbs.removeClass('ModelCheckBoxSelected');
$cbs.each((i, el)=>{SetModelSelect(sVendor, el.getAttribute('model'), sel)});
}
function UpdateVendorCheckbox(sVendor) {
const $vb = $(`.OneVendorBlock[vendor='${sVendor}']`);
const $cbs = $vb.find(`.ModelCheckBox`);
const $vcb = $vb.find(`.VendorCheckbox`);
const selCount = $cbs.filter('.ModelCheckBoxSelected').length;
const allSel = selCount === $cbs.length && selCount > 0;
const nonSel = selCount === 0;
$vcb.prop({checked: allSel , indeterminate: !allSel && !nonSel});
$vb.find(".modelCount").text(selCount + " / " + $cbs.length);
}
function OnExitFilter() {
let nTotal = 0;
@@ -430,6 +507,16 @@ function ConfirmSelect()
}
}
function CreateNewPrinter()
{
var tSend={};
tSend['sequence_id']=Math.round(new Date() / 1000);
tSend['command']="user_guide_create_printer";
tSend['data']={};
SendWXMessage( JSON.stringify(tSend) );
}