feat: Updated UI for better distinction of orca cloud and bambu cloud (#13755)

* feat: Updated UI for better distinction of orca cloud and bambu cloud

* refined UI
This commit is contained in:
Ian Chua
2026-05-20 19:21:02 +08:00
committed by GitHub
parent 4542a15009
commit 62d4344e59
5 changed files with 1839 additions and 1717 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -129,7 +129,12 @@ body
border: 1px solid rgba(129, 129, 131, 0.64);
}
/*--- Account Sections ---*/
.AccountSectionLabel { color: #818183; }
.OrcaAccountText { color: #efeff0; }
.AccountStatusText { color: #818183; }
/*--- Bambu Cloud Section ---*/
#BambuCloudHeader { color: #818183; }
#BambuCloudHeader:hover { color: #efeff0; }
.bambu-chevron svg path { stroke: currentColor; }
.bambu-chevron svg path { stroke: currentColor; }

View File

@@ -80,7 +80,6 @@ body
#LoginArea
{
min-height: 180px;
display: flex;
flex-direction: column;
align-items: center;
@@ -89,6 +88,38 @@ body
width:262px;
}
.AccountSectionLabel
{
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--fg-color-text);
padding: 16px 20px 6px;
width: 262px;
box-sizing: border-box;
}
.AccountSectionIcon
{
width: 18px;
height: 18px;
flex: 0 0 auto;
}
.AccountStatusText
{
font-size: 12px;
color: #A8A8A8;
margin-top: 8px;
}
.OrcaAccountText
{
font-weight: bold;
}
#OrcaLoginSection
{
display: flex;

View File

@@ -24,11 +24,17 @@
<div id="LoginArea">
<!-- Orca Login Section -->
<div id="OrcaLoginSection">
<div id="OrcaLogin1">
<div id="Icon1"><img id="BBLIcon" src="../image/logo.png" /></div> <!-- ORCA use square icon for better consistency on UI -->
<div id="LoginBtn" class="ButtonStyleRegular ButtonTypeWindow" onClick="OnLoginOrRegister()"><span class="trans" tid="t26">login</span> / <span class="trans" tid="t27">register</span></div>
</div>
<div id="OrcaSectionLabel" class="AccountSectionLabel">
<img class="AccountSectionIcon" src="../../images/OrcaSlicer_gradient_circle.svg" alt="" />
<span class="trans OrcaAccountText" tid="orca7">Orca Cloud</span>
</div>
<div id="OrcaLoginSection">
<div id="OrcaLogin1">
<div id="Icon1"><img id="BBLIcon" src="../image/logo.png" /></div> <!-- ORCA use square icon for better consistency on UI -->
<div id="LoginBtn" class="ButtonStyleRegular ButtonTypeWindow" onClick="OnLoginOrRegister()"><span class="trans" tid="t26">login</span> / <span class="trans" tid="t27">register</span></div>
<div id="OrcaStatusText" class="AccountStatusText trans" tid="orca8">Not signed in</div>
</div>
<div id="OrcaLogin2">
<div>
@@ -261,4 +267,3 @@

View File

@@ -173,6 +173,7 @@ function GotoMenu( strMenu )
function SetOrcaLoginInfo( strAvatar, strName )
{
$("#OrcaLogin1").hide();
$("#OrcaStatusText").hide();
$("#UserName").text(strName);
@@ -196,6 +197,7 @@ function SetOrcaUserOffline()
$("#OrcaLogin1").show();
$("#OrcaLogin1").css("display","flex");
$("#OrcaStatusText").show();
}
function SetMallUrl( strUrl )
@@ -437,6 +439,8 @@ function SetBambuLoginInfo(strAvatar, strName) {
$("#BambuLogin2").show();
$("#BambuLogin2").css("display", "flex");
$(".bambu-status-dot").addClass("online");
$("#BambuStatusText").text("Connected");
$("#BambuStatusText").attr("tid", "orca11");
}
function SetBambuUserOffline() {
@@ -448,6 +452,8 @@ function SetBambuUserOffline() {
$("#BambuLogin1").css("display", "flex");
}
$(".bambu-status-dot").removeClass("online");
$("#BambuStatusText").text("Not connected");
$("#BambuStatusText").attr("tid", "orca10");
}
function OnBambuLoginOrRegister() { SendSimpleCommand("homepage_bambu_login_or_register"); }