mirror of
https://github.com/OrcaSlicer/OrcaSlicer.git
synced 2026-09-08 09:46:55 +00:00
Optimize login user layout
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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 |
@@ -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>
|
||||
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user