3D-printing/OrcaSlicer
1
0
Fork 0
mirror of https://github.com/SoftFever/OrcaSlicer.git synced 2025-07-06 22:47:32 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add Filament / Printer window & web based windows improvements (#9431)

Browse source 
* update

* update

* Update 23.css

* update

* update

* Update 21.css

* update
This commit is contained in:
yw4z 2025-04-24 11:23:28 +03:00 • committed by GitHub
parent 07634d2ba2
commit 0d3683c3e1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 211 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
resources/web/guide/11/earth.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Before After
Before After

BIN
resources/web/guide/11/tip.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

Before After
Before After

41
resources/web/guide/21/21.css
View file

@ -1,7 +1,7 @@
#Content #Content
{ {
overflow-y:auto; overflow-y:auto;
padding: 32px; /* ORCA Specify & Reduce horizontal paddings to fit 4 items per row */
} }
.BlockBanner .BlockBanner
@ -21,7 +21,11 @@
align-items: center; align-items: center;
height: 40px; height: 40px;
text-align: center; text-align: center;
margin-right: 10px; margin-right: 0px; /* ORCA align buttons with end of horizontal separator/line */
}
.BannerBtns>.SmallBtn_Green.trans{
margin-right: 7px; /* ORCA adds a small gap between buttons */
} }
.BlockBanner a .BlockBanner a
@ -36,7 +40,7 @@
.PrinterArea .PrinterArea
{ {
padding: 10px; padding: 10px 0px; /* ORCA Reduce horizontal paddings to fit 4 items per row */
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -66,7 +70,7 @@
align-items: center; align-items: center;
justify-content:flex-start; justify-content:flex-start;
color: #5A5A5A; color: #5A5A5A;
padding-left: 10px; padding-left: 0px; /* ORCA Align checkboxes with with model text */
} }
.pNozzel input .pNozzel input
@ -133,22 +137,43 @@
.searchTerm { .searchTerm {
width: 100%; width: 100%;
border: 3px solid #009688; border: 1px solid #DBDBDB; /* ORCA Searchbox > match border style */
/*border-right: none;*/ /*border-right: none;*/
padding: 5px; padding: 5px;
height: 20px; padding-left:32px;
height: 20px; /* ORCA match height */
line-height: 20px; /* ORCA center text vertically */
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
outline: none; outline: none;
color: #9DBFAF; color: #9DBFAF;
} }
@media (prefers-color-scheme: dark) { /* ORCA Searchbox > add dark mode support */
.searchTerm {border: 1px solid #4A4A51;}
}
.searchTerm:focus{ .searchTerm:focus{
color: #009688; color: #363636; /* ORCA Searchbox > use normal text color */
border-color:#009688; /* ORCA Searchbox > highlight border color when focused. like on normal UI */
}
@media (prefers-color-scheme: dark) { /* ORCA Searchbox > add dark mode support */
.searchTerm:focus{color: #FFFFFF}
}
#search-icon{ /* ORCA */
position:absolute;
top: 50%;
transform: translateY(-50%);
left:8px;
margin:0px auto;
fill:#7C8282
}
@media (prefers-color-scheme: dark) { /* ORCA Searchbox > add dark mode support */
#search-icon{fill:#949494}
} }
/*Resize the wrap to see the search bar change!*/ /*Resize the wrap to see the search bar change!*/
.wrap{ .wrap{
width: 30%; width: 30%;
padding-bottom: 5px; padding-bottom: 5px;
padding-left: 42px; padding-left: 32px; /* ORCA Align with content */
} }

6
resources/web/guide/21/21.js
View file

@ -98,7 +98,8 @@ function HandleModelList( pVal )
for(let m=0;m<NozzleArray.length;m++) for(let m=0;m<NozzleArray.length;m++)
{ {
let nNozzel=NozzleArray[m]; let nNozzel=NozzleArray[m];
HtmlNozzel += '<div class="pNozzel TextS2"><input type="checkbox" model="' + OneModel['model'] + '" nozzel="' + nNozzel + '" vendor="' + strVendor +'" onclick="CheckBoxOnclick(this)" /><span>'+nNozzel+'</span><span class="trans" tid="t13">mm nozzle</span></div>'; /* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
HtmlNozzel += '<label class="pNozzel TextS2"><input type="checkbox" model="' + OneModel['model'] + '" nozzel="' + nNozzel + '" vendor="' + strVendor +'" onclick="CheckBoxOnclick(this)" /><span>'+nNozzel+'</span><span class="trans" tid="t13">mm nozzle</span></label>';
} }
let CoverImage=OneModel['cover']; let CoverImage=OneModel['cover'];
@ -261,7 +262,8 @@ function FilterModelList(keyword) {
let HtmlNozzel = ''; let HtmlNozzel = '';
for (let m = 0; m < NozzleArray.length; m++) { for (let m = 0; m < NozzleArray.length; m++) {
let nNozzel = NozzleArray[m]; let nNozzel = NozzleArray[m];
HtmlNozzel += '<div class="pNozzel TextS2"><input type="checkbox" model="' + OneModel['model'] + '" nozzel="' + nNozzel + '" vendor="' + strVendor + '" onclick="CheckBoxOnclick(this)" /><span>' + nNozzel + '</span><span class="trans" tid="t13">mm nozzle</span></div>'; /* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
HtmlNozzel += '<label class="pNozzel TextS2"><input type="checkbox" model="' + OneModel['model'] + '" nozzel="' + nNozzel + '" vendor="' + strVendor + '" onclick="CheckBoxOnclick(this)" /><span>' + nNozzel + '</span><span class="trans" tid="t13">mm nozzle</span></label>';
} }
let CoverImage = OneModel['cover']; let CoverImage = OneModel['cover'];

4
resources/web/guide/21/index.html
View file

@ -22,6 +22,10 @@
<div class="wrap"> <div class="wrap">
<div class="search"> <div class="search">
<input type="text" class="searchTerm" placeholder="Device keyword" oninput="textInput(this)"> <input type="text" class="searchTerm" placeholder="Device keyword" oninput="textInput(this)">
<svg id="search-icon" width="16px" height="16px"> <!-- ORCA -->
<path d="M6.5,2A4.505,4.505,0,0,0,2,6.5a.5.5,0,0,0,1,0A3.5,3.5,0,0,1,6.5,3a.5.5,0,0,0,0-1Z"/>
<path d="M14.854,14.146l-3.423-3.422a6.518,6.518,0,1,0-.707.707l3.422,3.423a.5.5,0,0,0,.708-.708ZM1,6.5A5.5,5.5,0,1,1,6.5,12,5.507,5.507,0,0,1,1,6.5Z"/>
</svg>
</div> </div>
</div> </div>
<div id="Content" class="ZScrol"> <div id="Content" class="ZScrol">

2
resources/web/guide/22/22.css
View file

@ -60,7 +60,7 @@ input
.MItem .MItem
{ {
min-width: 220px; min-width: 180px; /* ORCA Filtered items > slightly reduce min width to fit more items*/
height: 32px; height: 32px;
} }

13
resources/web/guide/22/22.js
View file

@ -95,8 +95,8 @@ function SortUI()
for(let n=0;n<nMode;n++) for(let n=0;n<nMode;n++)
{ {
let sModel=ModelList[n]; let sModel=ModelList[n];
/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
HtmlMode+='<div><input type="checkbox" mode="'+sModel['model']+'" nozzle="'+sModel['nozzle_selected']+'" onChange="MachineClick()" />'+sModel['model']+'</div>'; HtmlMode+='<label><input type="checkbox" mode="'+sModel['model']+'" nozzle="'+sModel['nozzle_selected']+'" onChange="MachineClick()" />'+sModel['model']+'</label>';
} }
$('#MachineList .CValues').append(HtmlMode); $('#MachineList .CValues').append(HtmlMode);
@ -172,7 +172,8 @@ function SortUI()
let LowType=fType.toLowerCase(); let LowType=fType.toLowerCase();
if(!TypeHtmlArray.hasOwnProperty(LowType)) if(!TypeHtmlArray.hasOwnProperty(LowType))
{ {
let HtmlType='<div><input type="checkbox" filatype="'+fType+'" onChange="FilaClick()" />'+fType+'</div>'; /* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
let HtmlType='<label><input type="checkbox" filatype="'+fType+'" onChange="FilaClick()" />'+fType+'</label>';
TypeHtmlArray[LowType]=HtmlType; TypeHtmlArray[LowType]=HtmlType;
} }
@ -181,7 +182,8 @@ function SortUI()
let lowVendor=fVendor.toLowerCase(); let lowVendor=fVendor.toLowerCase();
if(!VendorHtmlArray.hasOwnProperty(lowVendor)) if(!VendorHtmlArray.hasOwnProperty(lowVendor))
{ {
let HtmlVendor='<div><input type="checkbox" vendor="'+fVendor+'" onChange="VendorClick()" />'+fVendor+'</div>'; /* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
let HtmlVendor='<label><input type="checkbox" vendor="'+fVendor+'" onChange="VendorClick()" />'+fVendor+'</label>';
VendorHtmlArray[lowVendor]=HtmlVendor; VendorHtmlArray[lowVendor]=HtmlVendor;
} }
@ -190,7 +192,8 @@ function SortUI()
let pFila=$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']"); let pFila=$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']");
if(pFila.length==0) if(pFila.length==0)
{ {
let HtmlFila='<div class="MItem"><input type="checkbox" vendor="'+fVendor+'" filatype="'+fType+'" filalist="'+fWholeName+';'+'" model="'+fModel+'" name="'+fShortName+'" />'+fShortName+'</div>'; /* 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+'" />'+fShortName+'</label>';
$("#ItemBlockArea").append(HtmlFila); $("#ItemBlockArea").append(HtmlFila);
} }

6
resources/web/guide/22/index.html
View file

@ -24,7 +24,7 @@
<div id="MachineList" class="ChooseBlock"> <div id="MachineList" class="ChooseBlock">
<div class="CName"><span class="trans" tid="t15">printer</span>：</div> <div class="CName"><span class="trans" tid="t15">printer</span>：</div>
<div class="CValues"> <div class="CValues">
<div><input type="checkbox" mode="all" onClick="ChooseAllMachine()" /><span class="trans" tid="t11">all</span></div> <label><input type="checkbox" mode="all" onClick="ChooseAllMachine()" /><span class="trans" tid="t11">all</span></label>
<!-- <div><input type="checkbox" mode="-normal" onChange="SortFilament()" />Bambulab BBL-3DP-001-V4-normal</div> <!-- <div><input type="checkbox" mode="-normal" onChange="SortFilament()" />Bambulab BBL-3DP-001-V4-normal</div>
<div><input type="checkbox" />Bambulab BBL-3DP-001-V5-normal</div> <div><input type="checkbox" />Bambulab BBL-3DP-001-V5-normal</div>
<div><input type="checkbox" />Bambulab BBL-3DP-001-V4-normal</div> <div><input type="checkbox" />Bambulab BBL-3DP-001-V4-normal</div>
@ -48,7 +48,7 @@
<div id="FilatypeList" class="ChooseBlock"> <div id="FilatypeList" class="ChooseBlock">
<div class="CName"><span class="trans" tid="t16">filament type</span>：</div> <div class="CName"><span class="trans" tid="t16">filament type</span>：</div>
<div class="CValues"> <div class="CValues">
<div><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllFilament()" /><span class="trans" tid="t11">all</span></div> <label><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllFilament()" /><span class="trans" tid="t11">all</span></label>
<!-- <div><input type="checkbox" filatype="PLA" />PLA</div> <!-- <div><input type="checkbox" filatype="PLA" />PLA</div>
<div><input type="checkbox" />PET</div> <div><input type="checkbox" />PET</div>
<div><input type="checkbox" />ABS</div> <div><input type="checkbox" />ABS</div>
@ -67,7 +67,7 @@
<div id="VendorList" class="ChooseBlock"> <div id="VendorList" class="ChooseBlock">
<div class="CName"><span class="trans" tid="t17">vendor</span>：</div> <div class="CName"><span class="trans" tid="t17">vendor</span>：</div>
<div class="CValues"> <div class="CValues">
<div><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllVendor()" /><span class="trans" tid="t11">all</span></div> <label><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllVendor()" /><span class="trans" tid="t11">all</span></label>
<!-- <div><input type="checkbox" vendor="Unknow" />Unknown</div> <!-- <div><input type="checkbox" vendor="Unknow" />Unknown</div>
<div><input type="checkbox" />BBL</div> <div><input type="checkbox" />BBL</div>
<div><input type="checkbox" />eSUN</div> <div><input type="checkbox" />eSUN</div>

2
resources/web/guide/23/23.css
View file

@ -61,7 +61,7 @@ input
.MItem .MItem
{ {
min-width: 220px; min-width: 180px; /* ORCA Filtered items > slightly reduce min width to fit more items*/
height: 32px; height: 32px;
} }

13
resources/web/guide/23/23.js
View file

@ -68,8 +68,8 @@ function SortUI()
for(let n=0;n<nMode;n++) for(let n=0;n<nMode;n++)
{ {
let sModel=ModelList[n]; let sModel=ModelList[n];
/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
HtmlMode+='<div><input type="checkbox" mode="'+sModel['model']+'" nozzle="'+sModel['nozzle_selected']+'" onChange="MachineClick()" />'+sModel['model']+'</div>'; HtmlMode+='<label><input type="checkbox" mode="'+sModel['model']+'" nozzle="'+sModel['nozzle_selected']+'" onChange="MachineClick()" /><span>'+sModel['model']+'</span></label>';
} }
$('#MachineList .CValues').append(HtmlMode); $('#MachineList .CValues').append(HtmlMode);
@ -135,7 +135,8 @@ function SortUI()
let LowType=fType.toLowerCase(); let LowType=fType.toLowerCase();
if(!TypeHtmlArray.hasOwnProperty(LowType)) if(!TypeHtmlArray.hasOwnProperty(LowType))
{ {
let HtmlType='<div><input type="checkbox" filatype="'+fType+'" onChange="FilaClick()" />'+fType+'</div>'; /* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
let HtmlType='<label><input type="checkbox" filatype="'+fType+'" onChange="FilaClick()" /><span>'+fType+'</span></label>';
TypeHtmlArray[LowType]=HtmlType; TypeHtmlArray[LowType]=HtmlType;
} }
@ -144,7 +145,8 @@ function SortUI()
let lowVendor=fVendor.toLowerCase(); let lowVendor=fVendor.toLowerCase();
if(!VendorHtmlArray.hasOwnProperty(lowVendor)) if(!VendorHtmlArray.hasOwnProperty(lowVendor))
{ {
let HtmlVendor='<div><input type="checkbox" vendor="'+fVendor+'" onChange="VendorClick()" />'+fVendor+'</div>'; /* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
let HtmlVendor='<label><input type="checkbox" vendor="'+fVendor+'" onChange="VendorClick()" /><span>'+fVendor+'</span></label>';
VendorHtmlArray[lowVendor]=HtmlVendor; VendorHtmlArray[lowVendor]=HtmlVendor;
} }
@ -153,7 +155,8 @@ function SortUI()
let pFila=$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']"); let pFila=$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']");
if(pFila.length==0) if(pFila.length==0)
{ {
let HtmlFila='<div class="MItem"><input type="checkbox" vendor="'+fVendor+'" filatype="'+fType+'" filalist="'+fWholeName+';'+'" model="'+fModel+'" name="'+fShortName+'" />'+fShortName+'</div>'; /* 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>';
$("#ItemBlockArea").append(HtmlFila); $("#ItemBlockArea").append(HtmlFila);
} }

6
resources/web/guide/23/index.html
View file

@ -25,7 +25,7 @@
<div id="MachineList" class="ChooseBlock"> <div id="MachineList" class="ChooseBlock">
<div class="CName"><span class="trans" tid="t15">printer</span>：</div> <div class="CName"><span class="trans" tid="t15">printer</span>：</div>
<div class="CValues"> <div class="CValues">
<div><input type="checkbox" mode="all" onClick="ChooseAllMachine()" /><span class="trans" tid="t11">all</span></div> <label><input type="checkbox" mode="all" onClick="ChooseAllMachine()" /><span class="trans" tid="t11">all</span></label>
<!-- <div><input type="checkbox" mode="-normal" onChange="SortFilament()" />Bambulab BBL-3DP-001-V4-normal</div> <!-- <div><input type="checkbox" mode="-normal" onChange="SortFilament()" />Bambulab BBL-3DP-001-V4-normal</div>
<div><input type="checkbox" />Bambulab BBL-3DP-001-V5-normal</div> <div><input type="checkbox" />Bambulab BBL-3DP-001-V5-normal</div>
<div><input type="checkbox" />Bambulab BBL-3DP-001-V4-normal</div> <div><input type="checkbox" />Bambulab BBL-3DP-001-V4-normal</div>
@ -40,7 +40,7 @@
<div id="FilatypeList" class="ChooseBlock"> <div id="FilatypeList" class="ChooseBlock">
<div class="CName"><span class="trans" tid="t16">filament type</span>：</div> <div class="CName"><span class="trans" tid="t16">filament type</span>：</div>
<div class="CValues"> <div class="CValues">
<div><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllFilament()" /><span class="trans" tid="t11">all</span></div> <label><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllFilament()" /><span class="trans" tid="t11">all</span></label>
<!-- <div><input type="checkbox" filatype="PLA" />PLA</div> <!-- <div><input type="checkbox" filatype="PLA" />PLA</div>
<div><input type="checkbox" />PET</div> <div><input type="checkbox" />PET</div>
<div><input type="checkbox" />ABS</div> <div><input type="checkbox" />ABS</div>
@ -53,7 +53,7 @@
<div id="VendorList" class="ChooseBlock"> <div id="VendorList" class="ChooseBlock">
<div class="CName"><span class="trans" tid="t17">vendor</span>：</div> <div class="CName"><span class="trans" tid="t17">vendor</span>：</div>
<div class="CValues"> <div class="CValues">
<div><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllVendor()" /><span class="trans" tid="t11">all</span></div> <label><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllVendor()" /><span class="trans" tid="t11">all</span></label>
<!-- <div><input type="checkbox" vendor="Unknow" />Unknown</div> <!-- <div><input type="checkbox" vendor="Unknow" />Unknown</div>
<div><input type="checkbox" />BBL</div> <div><input type="checkbox" />BBL</div>
<div><input type="checkbox" />eSUN</div> <div><input type="checkbox" />eSUN</div>

40
resources/web/guide/24/24.css
View file

@ -1,6 +1,7 @@
#Content #Content
{ {
overflow-y:auto; overflow-y:auto;
padding: 32px; /* ORCA Specify & Reduce horizontal paddings to fit 4 items per row */
} }
.BlockBanner .BlockBanner
@ -20,7 +21,11 @@
align-items: center; align-items: center;
height: 40px; height: 40px;
text-align: center; text-align: center;
margin-right: 10px; margin-right: 0px; /* ORCA align buttons with end of horizontal separator/line */
}
.BannerBtns>.SmallBtn_Green.trans{
margin-right: 7px; /* ORCA adds a small gap between buttons */
} }
/*.Banner-Btn /*.Banner-Btn
@ -59,7 +64,7 @@
.PrinterArea .PrinterArea
{ {
padding: 10px; padding: 10px 0px; /* ORCA Reduce horizontal paddings to fit 4 items per row */
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -89,7 +94,7 @@
align-items: center; align-items: center;
justify-content:flex-start; justify-content:flex-start;
color: #5A5A5A; color: #5A5A5A;
padding-left: 10px; padding-left: 0px; /* ORCA Align checkboxes with with model text */
} }
.pNozzel input .pNozzel input
@ -156,22 +161,43 @@
.searchTerm { .searchTerm {
width: 100%; width: 100%;
border: 3px solid #009688; border: 1px solid #DBDBDB; /* ORCA Searchbox > match border style */
/*border-right: none;*/ /*border-right: none;*/
padding: 5px; padding: 5px;
height: 20px; padding-left:32px;
height: 20px; /* ORCA match height */
line-height: 20px; /* ORCA center text vertically */
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
outline: none; outline: none;
color: #9DBFAF; color: #9DBFAF;
} }
@media (prefers-color-scheme: dark) { /* ORCA Searchbox > add dark mode support */
.searchTerm {border: 1px solid #4A4A51;}
}
.searchTerm:focus{ .searchTerm:focus{
color: #009688; color: #363636; /* ORCA Searchbox > use normal text color */
border-color:#009688; /* ORCA Searchbox > highlight border color when focused. like on normal UI */
}
@media (prefers-color-scheme: dark) { /* ORCA Searchbox > add dark mode support */
.searchTerm:focus{color: #FFFFFF}
}
#search-icon{ /* ORCA */
position:absolute;
top: 50%;
transform: translateY(-50%);
left:8px;
margin:0px auto;
fill:#7C8282
}
@media (prefers-color-scheme: dark) { /* ORCA Searchbox > add dark mode support */
#search-icon{fill:#949494}
} }
/*Resize the wrap to see the search bar change!*/ /*Resize the wrap to see the search bar change!*/
.wrap{ .wrap{
width: 30%; width: 30%;
padding-bottom: 5px; padding-bottom: 5px;
padding-left: 42px; padding-left: 32px; /* ORCA Align with content */
} }

6
resources/web/guide/24/24.js
View file

@ -98,7 +98,8 @@ function HandleModelList( pVal )
for(let m=0;m<NozzleArray.length;m++) for(let m=0;m<NozzleArray.length;m++)
{ {
let nNozzel=NozzleArray[m]; let nNozzel=NozzleArray[m];
HtmlNozzel += '<div class="pNozzel TextS2"><input type="checkbox" model="' + OneModel['model'] + '" nozzel="' + nNozzel + '" vendor="' + strVendor +'" onclick="CheckBoxOnclick(this)" /><span>'+nNozzel+'</span><span class="trans" tid="t13">mm nozzle</span></div>'; /* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
HtmlNozzel += '<label class="pNozzel TextS2"><input type="checkbox" model="' + OneModel['model'] + '" nozzel="' + nNozzel + '" vendor="' + strVendor +'" onclick="CheckBoxOnclick(this)" /><span>'+nNozzel+'</span><span class="trans" tid="t13">mm nozzle</span></label>';
} }
let CoverImage=OneModel['cover']; let CoverImage=OneModel['cover'];
@ -261,7 +262,8 @@ function FilterModelList(keyword) {
let HtmlNozzel = ''; let HtmlNozzel = '';
for (let m = 0; m < NozzleArray.length; m++) { for (let m = 0; m < NozzleArray.length; m++) {
let nNozzel = NozzleArray[m]; let nNozzel = NozzleArray[m];
HtmlNozzel += '<div class="pNozzel TextS2"><input type="checkbox" model="' + OneModel['model'] + '" nozzel="' + nNozzel + '" vendor="' + strVendor + '" onclick="CheckBoxOnclick(this)" /><span>' + nNozzel + '</span><span class="trans" tid="t13">mm nozzle</span></div>'; /* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
HtmlNozzel += '<label class="pNozzel TextS2"><input type="checkbox" model="' + OneModel['model'] + '" nozzel="' + nNozzel + '" vendor="' + strVendor + '" onclick="CheckBoxOnclick(this)" /><span>' + nNozzel + '</span><span class="trans" tid="t13">mm nozzle</span></label>';
} }
let CoverImage = OneModel['cover']; let CoverImage = OneModel['cover'];

4
resources/web/guide/24/index.html
View file

@ -22,6 +22,10 @@
<div class="wrap"> <div class="wrap">
<div class="search"> <div class="search">
<input type="text" class="searchTerm" placeholder="Device keyword" oninput="textInput(this)"> <input type="text" class="searchTerm" placeholder="Device keyword" oninput="textInput(this)">
<svg id="search-icon" width="16px" height="16px"> <!-- ORCA -->
<path d="M6.5,2A4.505,4.505,0,0,0,2,6.5a.5.5,0,0,0,1,0A3.5,3.5,0,0,1,6.5,3a.5.5,0,0,0,0-1Z"/>
<path d="M14.854,14.146l-3.423-3.422a6.518,6.518,0,1,0-.707.707l3.422,3.423a.5.5,0,0,0,.708-.708ZM1,6.5A5.5,5.5,0,1,1,6.5,12,5.507,5.507,0,0,1,1,6.5Z"/>
</svg>
</div> </div>
</div> </div>
<div id="Content" class="ZScrol"s> <div id="Content" class="ZScrol"s>

4
resources/web/guide/3/index.html
View file

@ -26,10 +26,10 @@
</div> </div>
<br/> <br/>
<div> <label> <!-- ORCA use label tag to allow checkbox to toggle when user clicked to text -->
<input id="ChoosePrivacy" type="checkbox" onClick="SendPrivacySelect()" onChange="SendPrivacySelect()" /> <input id="ChoosePrivacy" type="checkbox" onClick="SendPrivacySelect()" onChange="SendPrivacySelect()" />
<span class="trans TextS1" tid="t7">Allow sending anonymous data</span> <span class="trans TextS1" tid="t7">Allow sending anonymous data</span>
</div> </label>
</div> </div>
<div id="AcceptArea"> <div id="AcceptArea">
<div class="GrayBtn trans" tid="t8" id="PreBtn" onclick="window.open('../11/index.html','_self')">Back</div> <div class="GrayBtn trans" tid="t8" id="PreBtn" onclick="window.open('../11/index.html','_self')">Back</div>

4
resources/web/guide/31/index.html
View file

@ -25,10 +25,10 @@
</div> </div>
<br/> <br/>
<div> <label><!-- ORCA use label tag to allow checkbox to toggle when user clicked to text -->
<input id="ChoosePrivacy" type="checkbox" onClick="SendPrivacySelect()" onChange="SendPrivacySelect()" /> <input id="ChoosePrivacy" type="checkbox" onClick="SendPrivacySelect()" onChange="SendPrivacySelect()" />
<span class="trans" tid="t7">Allow sending anonymous data</span> <span class="trans" tid="t7">Allow sending anonymous data</span>
</div> </label>
</div> </div>
<div id="AcceptArea"> <div id="AcceptArea">
<div class="GrayBtn trans" tid="t8" id="PreBtn" onclick="window.open('../11/index.html','_self')">Back</div> <div class="GrayBtn trans" tid="t8" id="PreBtn" onclick="window.open('../11/index.html','_self')">Back</div>

4
resources/web/guide/4orca/4orca.css
View file

@ -16,12 +16,12 @@
margin-top:10mm; margin-top:10mm;
line-height: 30px; line-height: 30px;
} }
/* ORCA brokes shape of custom css checkbox
#StealthMode #StealthMode
{ {
width: 30px; width: 30px;
} }
*/
#RestartText #RestartText
{ {
padding-left:30px; padding-left:30px;

4
resources/web/guide/4orca/index.html
View file

@ -25,8 +25,8 @@
</div> </div>
<!-- ORCA use label tag to allow checkbox to toggle when user clicked to text -->
<div id="CheckArea"><input id="StealthMode" onClick="SendStealthModeCheck()" type="checkbox"><a tid="orca5" class="trans TextS1">Enable Stealth Mode.</a></div> <label id="CheckArea"><input id="StealthMode" onClick="SendStealthModeCheck()" type="checkbox"><a tid="orca5" class="trans TextS1">Enable Stealth Mode.</a></label>
<div id="RestartText" tid="t70" class="trans" ></div> <div id="RestartText" tid="t70" class="trans" ></div>
</div> </div>

3
resources/web/guide/5/5.css
View file

@ -16,11 +16,12 @@
margin-top:10mm; margin-top:10mm;
line-height: 30px; line-height: 30px;
} }
/* ORCA brokes shape of custom css checkbox
#InstallCheck #InstallCheck
{ {
width: 30px; width: 30px;
} }
*/
#RestartText #RestartText
{ {

4
resources/web/guide/5/index.html
View file

@ -31,8 +31,8 @@
</div> </div>
<!-- ORCA use label tag to allow checkbox to toggle when user clicked to text -->
<div id="CheckArea"><input id="InstallCheck" onClick="SendInstallPluginCheck()" type="checkbox"><a tid="t69" class="trans TextS1">Install Bambu Network Plug-in. </a></div> <label id="CheckArea"><input id="InstallCheck" onClick="SendInstallPluginCheck()" type="checkbox"><a tid="t69" class="trans TextS1">Install Bambu Network Plug-in. </a></label>
<div id="RestartText" tid="t70" class="trans" ></div> <div id="RestartText" tid="t70" class="trans" ></div>
</div> </div>

51
resources/web/guide/css/common.css
View file

@ -133,16 +133,17 @@ body
padding: 3mm 9mm; padding: 3mm 9mm;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
border: 1px solid #575757; /* border: 1px solid #575757; */ /* ORCA match button style */
border-radius: 18px; border-radius: 18px;
color: #575757; background-color: #D9D9D9;
color: #000; /* ORCA match button style */
cursor: pointer; cursor: pointer;
margin-left: 10px; margin-left: 10px;
} }
.GrayBtn:hover .GrayBtn:hover
{ {
background-color:#E8E8E8; background-color:#CCCCCC; /* ORCA match button style */
} }
.SmallBtn .SmallBtn
@ -189,6 +190,50 @@ body
cursor: pointer; cursor: pointer;
} }
/*---Checkboxes ORCA ---*/
label:has(input[type="checkbox"]){
margin:0;
padding: 0;
margin-right: 20px;
}
label:has(input[type="checkbox"])>span{
vertical-align: middle;
margin:0;
}
input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
background-color:#FFFFFF;
margin:0;
margin-right: 6px;
width: 1em;
height: 1em;
border: 0.1em solid #DBDBDB;
border-radius: 0.15em;
display: inline-flex;
place-content: center;
background-color:#FFFFFF;
}
input[type="checkbox"]::before {
content: "";
width: 0.8em;
height: 0.8em;
transform: scale(0);
box-shadow: inset 1em 1em #FFFFFF;
clip-path: polygon(7% 37%, 0 45%, 33% 78%, 100% 30%, 95% 21%, 33% 64%);
}
input[type="checkbox"]:checked {
border-color:#009688;
background-color:#009688;
}
input[type="checkbox"]:checked::before {
transform: scale(1);
}
/*----------------Light Mode-------------------*/ /*----------------Light Mode-------------------*/

33
resources/web/guide/css/dark.css
View file

@ -6,7 +6,7 @@
body body
{ {
background-color:#3E3E45; background-color:#2D2D31; /* ORCA match background color */
color: #efeff0; color: #efeff0;
} }
@ -23,17 +23,32 @@ body
color: #009688; color: #009688;
} }
/*-----Button-----*/ .search>input[type=text]{
.GrayBtn background-color:#2D2D31;
{
border: 1px solid #B9B9BC;
color: #B9B9BC;
} }
.GrayBtn:hover /*---Checkboxes ORCA---*/
input[type=checkbox]{
background-color:#2D2D31;
border-color:#4A4A51;
}
input[type=checkbox]:checked{
background-color:#009688;
}
/*-----Button-----*/
.GrayBtn, .SmallBtn /* ORCA match button style GrayBtn & SmallBtn */
{ {
background-color:#E8E8E8; background-color:#3E3E45;
color: #565656; /* border: 1px solid #B9B9BC; */
color: #FFFFFF;
}
.GrayBtn:hover, .SmallBtn:hover /* ORCA match button style GrayBtn & SmallBtn */
{
background-color:#49494E;
color: #FFFFFF;
} }
/*-------Text------*/ /*-------Text------*/