Optimize login user layout

This commit is contained in:
SoftFever
2026-09-07 23:42:29 +08:00
parent 37e1582c4c
commit 52ed9a8848
6 changed files with 508 additions and 293 deletions

View File

@@ -39,7 +39,7 @@ body
.BtnItem:hover
{
color: #efeff0;
background-color: #223C3C;
background-color: var(--row-hover);
}
.BtnItem:hover .LeftIcon
@@ -50,7 +50,7 @@ body
.BtnItemSelected
{
color: #efeff0;
background-color: #223C3C;
background-color: var(--row-hover);
}
.BtnItemSelected .LeftIcon
@@ -129,12 +129,23 @@ 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; }
/*--- Account rows and account menu ---*/
:root
{
--row-hover : #223C3C;
--warn-color : #F07E4A;
--account-avatar-bg : #3A3A40;
--account-avatar-glyph : #7E8785;
--account-surface : #36363B;
--account-name : #EFEFF0;
--account-meta : #949494;
--account-border : #4A4A51;
--account-divider : #3A3A42;
--account-action : #26A69A;
--account-danger : #FF6A6A;
--account-danger-bg : rgba(225, 71, 71, 0.16);
--account-warn-bg : rgba(240, 126, 74, 0.16); /*----var(--warn-color) at 16%----*/
--account-dot-off : #5A5A62;
--account-dot-on : #4CAF50;
--account-menu-shadow : 0 10px 28px rgba(0, 0, 0, 0.45);
}

View File

@@ -41,7 +41,7 @@ html, body {
.RedFont
{
font-size:12px;
color: #F07E4A;
color: var(--warn-color);
}
.LinkBtn
@@ -78,129 +78,267 @@ body
height: 100%;
}
#LoginArea
/*------Account rows and account menu------*/
/*----These shadow similar tokens in global.css on purpose: global.css themes on the OS
via prefers-color-scheme, while this page themes on the dark.css link that
SwitchDarkMode() injects from the app theme, so the two can disagree.----*/
:root
{
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: nowrap;
position: relative;
width:262px;
--row-hover : #BFE1DE;
--warn-color : #F07E4A;
--account-avatar-bg : #E6EBEA;
--account-avatar-glyph : #9AA5A3;
--account-surface : #FFFFFF;
--account-name : #262E30;
--account-meta : #7C8282;
--account-border : #DBDBDB;
--account-divider : #E2E4E4;
--account-action : #00796B;
--account-danger : #D33B3B;
--account-danger-bg : rgba(211, 59, 59, 0.10);
--account-warn-bg : rgba(240, 126, 74, 0.12); /*----var(--warn-color) at 12%----*/
--account-dot-off : #C4CBCA;
--account-dot-on : #34A853;
--account-menu-shadow : 0 10px 28px rgba(20, 30, 28, 0.18);
--glyph-account:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="12" r="5.6"/><path d="M4.9 29a11.1 11.1 0 0 1 22.2 0Z"/></svg>');
--glyph-logout:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 2.5H3.5v11h6"/><path d="M11 5.5L14 8l-3 2.5"/><path d="M14 8H6.5"/></svg>');
}
.AccountSectionLabel
#LoginArea
{
position: relative;
padding: 10px 8px;
box-sizing: border-box;
width: 262px;
border-bottom: 1px solid var(--account-divider);
}
.AccountRow
{
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;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
#OrcaLogin1
{
display: flex;
flex-direction: column; /*ORCA*/
align-items: center; /*Allow icon centered vertically*/
justify-content: center; /*and use login button in new line*/
padding: 8px 10px 8px 14px; /*----label column lines up with the navigation below----*/
border-radius: 8px;
cursor: pointer;
user-select: none;
padding: 10px 0;
}
#OrcaLogin2
.AccountRow:hover
{
background-color: var(--row-hover);
}
.AccountRow:focus-visible
{
outline: 2px solid var(--account-action);
outline-offset: -2px;
}
.AccountRow.Disabled
{
cursor: default;
opacity: 0.5;
}
.AccountRow.Disabled:hover
{
background-color: transparent;
}
.AccountRow.Disabled .AccountSignIn
{
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 14px 0 16px;
box-sizing: border-box;
width: 262px;
}
/* --- Bambu Cloud Section --- */
/*----Avatar----*/
.AccountAvatar
{
position: relative;
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--account-avatar-bg);
}
.AccountAvatar::before /* placeholder shown until an avatar image loads */
{
content: "";
position: absolute;
inset: 0;
-webkit-mask-image: var(--glyph-account);
mask-image: var(--glyph-account);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
background-color: var(--account-avatar-glyph);
}
.AccountAvatarImg
{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
}
.AccountAvatarImg:not([src])
{
display: none;
}
/*----Row labels----*/
.AccountText
{
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1 auto;
min-width: 0;
}
.AccountName,
.AccountSecondary /*----the provider name, or the sign-in state where the row has no name yet----*/
{
font-size: 15px;
line-height: 20px;
color: var(--account-name);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.AccountName
{
display: none;
font-weight: 600;
}
.AccountSignIn
{
flex: 0 0 auto;
font-size: 12px;
font-weight: 600;
color: var(--account-action);
}
.AccountChevron
{
display: none;
flex: 0 0 auto;
width: 12px;
height: 12px;
color: var(--account-meta);
transition: transform 0.15s ease;
}
.AccountRow.SignedIn .AccountName { display: block; }
.AccountRow.SignedIn .AccountChevron { display: block; }
.AccountRow.SignedIn .AccountSignIn { display: none; }
.AccountRow.SignedIn .AccountSecondary
{
font-size: 11px;
line-height: 14px;
color: var(--account-meta);
}
.AccountRow.MenuOpen .AccountChevron { transform: rotate(180deg); }
#NoPluginTip
{
display: none;
margin: 4px 0 2px;
padding: 8px 10px;
border-radius: 6px;
background-color: var(--account-warn-bg);
}
#NoPluginText
{
line-height: 16px;
}
#NoPluginTip .LinkBtn
{
color: var(--warn-color);
text-decoration: underline;
}
/*----Bambu Cloud, folded under the main account----*/
#BambuCloudSection
{
display: none; /* shown by cloud_providers_info from backend */
border-top: 1px solid;
width: 262px;
margin-top: 8px;
padding-top: 6px;
border-top: 1px solid var(--account-divider);
}
#BambuCloudHeader
{
height: 40px;
display: flex;
align-items: center;
padding: 0 20px;
cursor: pointer;
font-size: 13px;
color: #A8A8A8;
gap: 8px;
height: 28px;
padding: 0 10px 0 14px;
border-radius: 6px;
font-size: 12px;
color: var(--account-meta);
cursor: pointer;
user-select: none;
}
#BambuCloudHeader:hover
{
color: inherit;
color: var(--account-name);
}
.bambu-chevron
#BambuCloudHeader:focus-visible
{
outline: 2px solid var(--account-action);
outline-offset: -2px;
}
.SectionChevron
{
flex: 0 0 auto;
width: 12px;
height: 12px;
transition: transform 0.2s ease;
transform: rotate(0deg);
}
.bambu-chevron.expanded
#BambuCloudHeader.Expanded .SectionChevron
{
transform: rotate(90deg);
}
.bambu-status-dot
.SectionLabel
{
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #A8A8A8;
margin-left: auto;
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bambu-status-dot.online
#BambuStatusDot
{
background-color: #4CAF50;
flex: 0 0 auto;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: var(--account-dot-off);
}
#BambuStatusDot.Online
{
background-color: var(--account-dot-on);
}
#BambuCloudBody
@@ -208,99 +346,125 @@ body
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease;
display: flex;
flex-direction: column;
align-items: center;
}
#BambuCloudBody.expanded
#BambuCloudBody.Expanded
{
max-height: 200px;
padding-bottom: 2px;
}
#NoPluginTip
.AccountRowCompact
{
position: static;
display: none;
flex-direction: column;
padding: 5px 10px;
z-index: auto;
padding: 6px 10px 6px 24px;
}
#BambuLogin1
.AccountRowCompact .AccountAvatar
{
padding: 10px 0;
width: 26px;
height: 26px;
}
#BambuLogin2
.AccountRowCompact .AccountName,
.AccountRowCompact .AccountSecondary
{
display: none;
flex-direction: column;
align-items: center;
text-align: center;
padding: 8px 0;
width: 262px;
}
#BambuAvatarIcon
{
height: 40px;
border-radius: 50%;
}
#BambuUserName
{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 80%;
text-align: center;
font-size: 13px;
line-height: 17px;
}
#DownloadBtn
.AccountRowCompact .AccountSecondary
{
color:#00ffd9;
color: var(--account-meta);
}
#Icon1
.AccountRowCompact.SignedIn .AccountSecondary /*----the section header already names this provider----*/
{
margin-right: 10px;
display: none;
}
#BBLIcon
/*----Account menu----*/
#AccountMenu
{
height:96px; /*ORCA use bigger icon to fit logo size*/
display: none;
position: absolute;
left: 8px;
right: 8px;
z-index: 20;
padding: 4px;
border-radius: 10px;
border: 1px solid var(--account-border);
background-color: var(--account-surface);
box-shadow: var(--account-menu-shadow);
}
#UserAvatarIcon
#AccountMenu.Open
{
width: 64px;
height: 64px;
display: block;
margin: 2px auto 10px;
object-fit: cover;
border-radius: 50%;
animation: AccountMenuIn 0.12s ease-out;
}
#UserName
@keyframes AccountMenuIn
{
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce)
{
#AccountMenu.Open { animation: none; }
.AccountChevron,
.SectionChevron,
#BambuCloudBody { transition: none; }
}
#AccountMenuHandle
{
display: none;
padding: 9px 10px;
border-bottom: 1px solid var(--account-border);
font-size: 12px;
line-height: 16px;
color: var(--account-meta);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
overflow: hidden;
width: 80%;
max-width: 190px;
line-height: 22px;
}
#LogoutBtn
#AccountMenuLogout
{
margin-top: 8px;
display: flex;
align-items: center;
gap: 8px;
height: 34px;
padding: 0 10px;
border-radius: 6px;
font-size: 13px;
color: var(--account-name);
cursor: pointer;
}
#AccountMenuLogout:hover
{
background-color: var(--account-danger-bg);
color: var(--account-danger);
}
#AccountMenuLogout:focus-visible
{
outline: 2px solid var(--account-action);
outline-offset: -2px;
}
#AccountMenuLogoutIcon
{
width: 15px;
height: 15px;
-webkit-mask: var(--glyph-logout) center / contain no-repeat;
mask: var(--glyph-logout) center / contain no-repeat;
background-color: currentColor;
}
/*------------------*/
#BtnArea
{
@@ -320,12 +484,12 @@ body
.BtnItem:hover
{
background-color: #BFE1DE; /*ORCA color with %25 opacity*/
background-color: var(--row-hover);
}
.BtnItemSelected
{
background-color: #BFE1DE; /*ORCA color with %25 opacity*/
background-color: var(--row-hover);
}
.BtnIcon

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

View File

@@ -23,56 +23,65 @@
<div id="LeftBoard">
<div id="LoginArea">
<!-- Orca Login Section -->
<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>
<img id="UserAvatarIcon" src="img/c.jpg" onerror="this.onerror=null;this.src='img/c.jpg';" />
</div>
<div id="UserName" class="TextS1"></div>
<div id="LogoutBtn" class="ButtonStyleAlert ButtonTypeWindow trans" tid="t50" onClick="OnLogOut()">log out</div>
</div>
</div>
<!-- Bambu Cloud Section -->
<div id="BambuCloudSection">
<div id="BambuCloudHeader" onClick="ToggleBambuSection()">
<svg class="bambu-chevron" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.5 2.5L8 6L4.5 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<!-- Orca Cloud account -->
<div id="OrcaAccount" class="AccountRow" tabindex="0" role="button" aria-haspopup="true" aria-expanded="false"
onClick="OnAccountRowClick('orca')">
<span class="AccountAvatar">
<img id="UserAvatarIcon" class="AccountAvatarImg" alt="" onerror="OnAvatarLoadError(this)" />
</span>
<span class="AccountText">
<span id="UserName" class="AccountName"></span>
<span class="AccountSecondary">Orca Cloud</span>
</span>
<span class="AccountSignIn trans" tid="t26">Login</span>
<svg class="AccountChevron" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 4.75L6 7.75L9 4.75" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="trans" tid="orca6">Bambu Cloud</span>
<span class="bambu-status-dot"></span>
</div>
<div id="BambuCloudBody">
<div id="BambuLogin1">
<div id="BambuLoginBtn" class="ButtonStyleRegular ButtonTypeWindow" onClick="OnBambuLoginOrRegister()"><span class="trans" tid="t26">login</span></div>
<!-- Bambu Cloud, a secondary provider folded away under the main account -->
<div id="BambuCloudSection">
<div id="BambuCloudHeader" tabindex="0" role="button" aria-expanded="false" aria-controls="BambuCloudBody"
onClick="ToggleBambuSection()">
<svg class="SectionChevron" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M4.5 2.5L8 6L4.5 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="SectionLabel trans" tid="orca6">Bambu Cloud</span>
<span id="BambuStatusDot"></span>
</div>
<div id="BambuLogin2">
<div>
<img id="BambuAvatarIcon" src="img/c.jpg" onerror="this.onerror=null;this.src='img/c.jpg';" />
<div id="BambuCloudBody">
<div id="BambuAccount" class="AccountRow AccountRowCompact" tabindex="0" role="button" aria-haspopup="true" aria-expanded="false"
onClick="OnAccountRowClick('bambu')">
<span class="AccountAvatar">
<img id="BambuAvatarIcon" class="AccountAvatarImg" alt="" onerror="OnAvatarLoadError(this)" />
</span>
<span class="AccountText">
<span id="BambuUserName" class="AccountName"></span>
<span class="AccountSecondary trans" tid="orca8">Not signed in</span>
</span>
<span class="AccountSignIn trans" tid="t26">Login</span>
<svg class="AccountChevron" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 4.75L6 7.75L9 4.75" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div id="BambuUserName" class="TextS1"></div>
<div id="BambuLogoutBtn" class="ButtonStyleAlert ButtonTypeWindow trans" tid="t50" onClick="OnBambuLogOut()">log out</div>
</div>
<div id="NoPluginTip">
<div id="NoPluginText"><a class="RedFont trans" tid="t76">Network plugin not detected. Click </a><a Class="LinkBtn trans" onClick="BeginDownloadNetworkPlugin()" tid="t77">here</a><a class="RedFont trans" tid="t78"> to install it.</a></div>
<div id="NoPluginTip">
<div id="NoPluginText"><a class="RedFont trans" tid="t76">Network plugin not detected. Click </a><a Class="LinkBtn trans" onClick="BeginDownloadNetworkPlugin()" tid="t77">here</a><a class="RedFont trans" tid="t78"> to install it.</a></div>
</div>
</div>
</div>
<!-- Shared account menu, anchored under the row it was opened from.
The row already carries the avatar, name and provider, so the menu only
adds the account handle. -->
<div id="AccountMenu" role="menu">
<div id="AccountMenuHandle" role="presentation"></div>
<div id="AccountMenuLogout" role="menuitem" tabindex="0" onClick="OnAccountMenuLogout()">
<span id="AccountMenuLogoutIcon"></span>
<span class="trans" tid="t50">Log out</span>
</div>
</div>
</div>
</div>

View File

@@ -1,7 +1,6 @@
//var TestData={"sequence_id":"0","command":"get_recent_projects","response":[{"path":"D:\\work\\Models\\Toy\\3d-puzzle-cube-model_files\\3d-puzzle-cube.3mf","time":"2022\/3\/24 20:33:10"},{"path":"D:\\work\\Models\\Art\\Carved Stone Vase - remeshed+drainage\\Carved Stone Vase.3mf","time":"2022\/3\/24 17:11:51"},{"path":"D:\\work\\Models\\Art\\Kity & Cat\\Cat.3mf","time":"2022\/3\/24 17:07:55"},{"path":"D:\\work\\Models\\Toy\\鐩村墤.3mf","time":"2022\/3\/24 17:06:02"},{"path":"D:\\work\\Models\\Toy\\minimalistic-dual-tone-whistle-model_files\\minimalistic-dual-tone-whistle.3mf","time":"2022\/3\/22 21:12:22"},{"path":"D:\\work\\Models\\Toy\\spiral-city-model_files\\spiral-city.3mf","time":"2022\/3\/22 18:58:37"},{"path":"D:\\work\\Models\\Toy\\impossible-dovetail-puzzle-box-model_files\\impossible-dovetail-puzzle-box.3mf","time":"2022\/3\/22 20:08:40"}]};
var m_HotModelList=null;
var bambuSectionExpanded = false;
function OnInit()
{
@@ -12,6 +11,8 @@ function OnInit()
SendMsg_GetBambuLoginInfo();
SendMsg_GetRecentFile();
SendMsg_GetStaffPick();
Set_AccountMenu_Event();
}
//------最佳打开文件的右键菜单功能----------
@@ -89,7 +90,7 @@ function HandleStudio( pVal )
if (strCmd == "get_recent_projects") {
ShowRecentFileList(pVal["response"]);
} else if (strCmd == "orca_userlogin") {
SetOrcaLoginInfo(pVal["data"]["avatar"], pVal["data"]["name"]);
SetOrcaLoginInfo(pVal["data"]["avatar"], pVal["data"]["name"], pVal["data"]["account"]);
} else if (strCmd == "orca_useroffline") {
SetOrcaUserOffline();
} else if (strCmd == "studio_bambu_userlogin") {
@@ -118,21 +119,12 @@ function HandleStudio( pVal )
$("#LeftBoard").hide();
}
} else if (strCmd == "network_plugin_installtip") {
let nShow = pVal["show"] * 1;
// Bambu Cloud is unreachable without the network plugin, so its row only carries the tip.
let bMissing = pVal["show"] * 1 == 1;
if (nShow == 1) {
// Auto-expand Bambu section to show the tip
if (!bambuSectionExpanded) ToggleBambuSection();
$("#BambuLogin1").hide();
$("#NoPluginTip").show();
$("#NoPluginTip").css("display", "flex");
} else {
$("#NoPluginTip").hide();
// Only restore login button if not already logged in
if ($("#BambuLogin2").is(":hidden")) {
$("#BambuLogin1").show();
}
}
$("#NoPluginTip").css("display", bMissing ? "block" : "none");
$("#BambuAccount").toggleClass("Disabled", bMissing).attr("aria-disabled", bMissing ? "true" : null);
if (bMissing) SetBambuSectionExpanded(true, false);
} else if (strCmd == "modelmall_model_advise_get") {
//alert('hot');
if (m_HotModelList != null) {
@@ -170,34 +162,128 @@ function GotoMenu( strMenu )
}
}
function SetOrcaLoginInfo( strAvatar, strName )
{
$("#OrcaLogin1").hide();
$("#OrcaStatusText").hide();
/*------Account rows------*/
$("#UserName").text(strName);
/*----Everything that differs between the two cloud providers lives here----*/
var AccountRows = {
orca: { row: "#OrcaAccount", name: "#UserName", avatar: "#UserAvatarIcon", dot: null,
loginCmd: "homepage_orca_login_or_register", logoutCmd: "homepage_orca_logout" },
bambu: { row: "#BambuAccount", name: "#BambuUserName", avatar: "#BambuAvatarIcon", dot: "#BambuStatusDot",
loginCmd: "homepage_bambu_login_or_register", logoutCmd: "homepage_bambu_logout" }
};
let OriginAvatar=$("#UserAvatarIcon").prop("src");
if(strAvatar != null && strAvatar.trim() !== '' && strAvatar!=OriginAvatar)
$("#UserAvatarIcon").prop("src",strAvatar);
else
{
//alert('Avatar is Same');
}
var BAMBU_FOLD_KEY = "OrcaHome_BambuCloudExpanded";
$("#OrcaLogin2").show();
$("#OrcaLogin2").css("display","flex");
var m_OpenAccountMenu = null;
function SetAccountAvatar(selector, strAvatar) {
if (strAvatar != null && strAvatar.trim() !== '') {
if ($(selector).attr("src") !== strAvatar) $(selector).attr("src", strAvatar);
} else {
$(selector).removeAttr("src");
}
}
function SetOrcaUserOffline()
{
$("#UserAvatarIcon").prop("src","img/c.jpg");
$("#UserName").text('');
$("#OrcaLogin2").hide();
function OnAvatarLoadError(img) {
img.removeAttribute("src"); // fall back to the placeholder glyph
}
$("#OrcaLogin1").show();
$("#OrcaLogin1").css("display","flex");
$("#OrcaStatusText").show();
function SetAccountSignedIn(strProvider, strAvatar, strName, strHandle) {
var account = AccountRows[strProvider];
$(account.name).text(strName).attr("title", strName); /*----long names are ellipsized----*/
SetAccountAvatar(account.avatar, strAvatar);
/*----the handle is the one thing the row does not already show----*/
$(account.row).addClass("SignedIn").data("handle", strHandle !== strName ? strHandle : null);
$(account.dot).addClass("Online");
if (m_OpenAccountMenu === strProvider) OpenAccountMenu(strProvider);
}
function SetAccountSignedOut(strProvider) {
var account = AccountRows[strProvider];
if (m_OpenAccountMenu === strProvider) CloseAccountMenu();
$(account.name).text('').removeAttr("title");
SetAccountAvatar(account.avatar, null);
$(account.row).removeClass("SignedIn").removeData("handle");
$(account.dot).removeClass("Online");
}
function OnAccountRowClick(strProvider) {
var account = AccountRows[strProvider];
var row = $(account.row);
if (row.hasClass("Disabled")) return;
if (!row.hasClass("SignedIn")) {
CloseAccountMenu();
SendSimpleCommand(account.loginCmd);
} else if (m_OpenAccountMenu === strProvider) {
CloseAccountMenu();
} else {
OpenAccountMenu(strProvider);
}
}
function OpenAccountMenu(strProvider) {
var account = AccountRows[strProvider];
var row = $(account.row);
var top = row[0].offsetTop + row[0].offsetHeight + 6; /*----read the geometry before writing----*/
var strHandle = row.data("handle") || "";
$("#AccountMenuHandle").text(strHandle).css("display", strHandle === "" ? "none" : "block");
$("#AccountMenu").css("top", top + "px").addClass("Open");
$(".AccountRow").removeClass("MenuOpen").attr("aria-expanded", "false");
row.addClass("MenuOpen").attr("aria-expanded", "true");
m_OpenAccountMenu = strProvider;
}
function CloseAccountMenu() {
$("#AccountMenu").removeClass("Open");
$(".AccountRow").removeClass("MenuOpen").attr("aria-expanded", "false");
m_OpenAccountMenu = null;
}
function OnAccountMenuLogout() {
var account = AccountRows[m_OpenAccountMenu];
CloseAccountMenu();
if (account) SendSimpleCommand(account.logoutCmd);
}
/*----Bambu Cloud is secondary, so its account folds away under the main one----*/
function SetBambuSectionExpanded(bExpanded, bPersist) {
$("#BambuCloudBody").toggleClass("Expanded", bExpanded);
$("#BambuAccount").attr("tabindex", bExpanded ? "0" : "-1"); /*----keep the folded row out of the tab order----*/
$("#BambuCloudHeader").toggleClass("Expanded", bExpanded).attr("aria-expanded", bExpanded ? "true" : "false");
if (!bExpanded && m_OpenAccountMenu === "bambu") CloseAccountMenu();
// Best effort: the fold is a per-machine convenience, not a synced preference.
if (bPersist) { try { localStorage.setItem(BAMBU_FOLD_KEY, bExpanded ? "1" : "0"); } catch (e) {} }
}
function ToggleBambuSection() {
SetBambuSectionExpanded(!$("#BambuCloudBody").hasClass("Expanded"), true);
}
function Set_AccountMenu_Event() {
var bExpanded = false;
try { bExpanded = localStorage.getItem(BAMBU_FOLD_KEY) === "1"; } catch (e) {}
SetBambuSectionExpanded(bExpanded, false);
$(document).mousedown(function (e) {
if (m_OpenAccountMenu === null) return;
if ($(e.target).closest("#AccountMenu, .AccountRow").length === 0) CloseAccountMenu();
});
$(document).keydown(function (e) {
if (m_OpenAccountMenu !== null && e.key === "Escape") CloseAccountMenu();
});
/*----Enter and Space activate the div-based buttons of this panel----*/
$(document).on("keydown", "#LoginArea [role=button], #LoginArea [role=menuitem]", function (e) {
if (e.key !== "Enter" && e.key !== " " && e.key !== "Spacebar") return;
e.preventDefault();
this.click();
});
}
function SetMallUrl( strUrl )
@@ -279,8 +365,6 @@ function SendSimpleCommand(command) {
SendWXMessage(JSON.stringify(tSend));
}
function OnOrcaLoginOrRegister() { SendSimpleCommand("homepage_orca_login_or_register"); }
function OnOrcaLogOut() { SendSimpleCommand("homepage_orca_logout"); }
function SendMsg_GetOrcaLoginInfo() { SendSimpleCommand("get_orca_login_info"); }
@@ -294,15 +378,6 @@ function SendMsg_GetRecentFile()
}
function OnLoginOrRegister()
{
var tSend={};
tSend['sequence_id']=Math.round(new Date() / 1000);
tSend['command']="homepage_login_or_register";
SendWXMessage( JSON.stringify(tSend) );
}
function OnClickModelDepot()
{
var tSend={};
@@ -405,59 +480,13 @@ function OnExploreRecentFile( )
$("#recnet_context_menu").hide();
}
function OnLogOut()
{
var tSend={};
tSend['sequence_id']=Math.round(new Date() / 1000);
tSend['command']="homepage_logout";
// --- Cloud providers ---
SendWXMessage( JSON.stringify(tSend) );
}
function SetOrcaLoginInfo(strAvatar, strName, strAccount) { SetAccountSignedIn("orca", strAvatar, strName, strAccount); }
function SetOrcaUserOffline() { SetAccountSignedOut("orca"); }
function SetBambuLoginInfo(strAvatar, strName) { SetAccountSignedIn("bambu", strAvatar, strName, null); }
function SetBambuUserOffline() { SetAccountSignedOut("bambu"); }
// --- Bambu Cloud Section ---
function ToggleBambuSection() {
var body = document.getElementById('BambuCloudBody');
var chevron = document.querySelector('.bambu-chevron');
if (!body || !chevron) return;
bambuSectionExpanded = !bambuSectionExpanded;
if (bambuSectionExpanded) {
body.classList.add('expanded');
chevron.classList.add('expanded');
} else {
body.classList.remove('expanded');
chevron.classList.remove('expanded');
}
}
function SetBambuLoginInfo(strAvatar, strName) {
$("#BambuLogin1").hide();
$("#BambuUserName").text(strName);
if (strAvatar && strAvatar.trim() !== '') {
$("#BambuAvatarIcon").prop("src", strAvatar);
}
$("#BambuLogin2").show();
$("#BambuLogin2").css("display", "flex");
$(".bambu-status-dot").addClass("online");
$("#BambuStatusText").text("Connected");
$("#BambuStatusText").attr("tid", "orca11");
}
function SetBambuUserOffline() {
$("#BambuAvatarIcon").prop("src", "img/c.jpg");
$("#BambuUserName").text('');
$("#BambuLogin2").hide();
if ($("#NoPluginTip").is(":hidden")) {
$("#BambuLogin1").show();
$("#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"); }
function OnBambuLogOut() { SendSimpleCommand("homepage_bambu_logout"); }
function SendMsg_GetBambuLoginInfo() { SendSimpleCommand("get_bambu_login_info"); }
function BeginDownloadNetworkPlugin()

View File

@@ -859,9 +859,11 @@ std::string OrcaCloudServiceAgent::build_login_cmd()
display_name = "unknown name";
}
json cmd;
cmd["command"] = "orca_userlogin";
cmd["data"]["name"] = display_name;
cmd["data"]["avatar"] = get_user_avatar();
cmd["command"] = "orca_userlogin";
cmd["data"]["name"] = display_name;
cmd["data"]["avatar"] = get_user_avatar();
// The unique handle, shown under the display name in the homepage account menu.
cmd["data"]["account"] = get_user_name();
return cmd.dump();
}