feat(account): Refactor account UI styles into reusable design tokens, apply updated styles across views and fix login submit behavior
This commit is contained in:
@@ -12,6 +12,7 @@ import {
|
||||
import * as plugins from '../../plugins.js';
|
||||
import * as states from '../../states/accountstate.js';
|
||||
import { IdpState } from '../../states/idp.state.js';
|
||||
import { accountDesignTokens } from './sharedstyles.js';
|
||||
|
||||
import { commitinfo } from '../../../dist_ts/00_commitinfo_data.js';
|
||||
|
||||
@@ -23,108 +24,122 @@ declare global {
|
||||
|
||||
@customElement('lele-accountnavigation')
|
||||
export class LeleAccountNavigation extends DeesElement {
|
||||
@property()
|
||||
accessor options: { text: string; id: string }[] = [
|
||||
{
|
||||
id: '1',
|
||||
text: 'Apps',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
text: 'Users',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
text: 'Activity',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
text: 'Billing & Subscription',
|
||||
},
|
||||
];
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
accountDesignTokens,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
padding: 10px;
|
||||
padding-left: 0px;
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#000')};
|
||||
border-right: ${cssManager.bdTheme('1px solid #ccc', '1px solid #111')};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--card);
|
||||
border-right: 1px solid var(--border);
|
||||
height: 100%;
|
||||
}
|
||||
:host([hidden]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logoArea {
|
||||
padding: 20px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: 'Cal Sans';
|
||||
letter-spacing: 0.0125em;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
padding: 16px 0px 16px 0px;
|
||||
margin: -8px -8px -16px 0px;
|
||||
border-bottom: 1px solid #111111;
|
||||
cursor: default;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
font-family: 'Cal Sans', 'Geist Sans', sans-serif;
|
||||
letter-spacing: -0.02em;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--foreground);
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
background: ${unsafeCSS(plugins.deesCatalog.colors.dark.blue)};
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.logo dees-icon {
|
||||
font-size: 24px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.navContent {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.commitinfo {
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
font-family: 'Intel One Mono';
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
padding: 8px;
|
||||
border-top: ${cssManager.bdTheme('1px solid #ccc', '1px solid #333')};
|
||||
color: ${cssManager.bdTheme('#666', '#ccc')};
|
||||
font-family: 'Geist Mono', monospace;
|
||||
font-size: 10px;
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
color: var(--muted-foreground);
|
||||
opacity: 0.6;
|
||||
background: var(--card);
|
||||
}
|
||||
|
||||
.navigationGroupLabel {
|
||||
width: min-content;
|
||||
white-space: nowrap;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
border-bottom: 1px solid;
|
||||
border-image: linear-gradient(to right, orange, #44444400) 1;
|
||||
color: ${cssManager.bdTheme('#666', '#ccc')};
|
||||
margin-bottom: 5px;
|
||||
padding-top: 32px;
|
||||
padding-left: 10px;
|
||||
padding-bottom: 5px;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted-foreground);
|
||||
padding: 20px 16px 8px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.navigationGroupLabel:first-of-type {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.navigationOption {
|
||||
border-top-right-radius: 30px;
|
||||
border-bottom-right-radius: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
margin: 2px 8px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
padding: 8px;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
color: var(--muted-foreground);
|
||||
transition: all 0.15s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navigationOption:hover {
|
||||
cursor: default;
|
||||
background: ${cssManager.bdTheme('#bbb', plugins.deesCatalog.colors.dark.blue)};
|
||||
background: var(--muted);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.navigationOption dees-icon {
|
||||
font-size: 16px;
|
||||
opacity: 0.7;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navigationOption:hover dees-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
margin: 8px 16px;
|
||||
}
|
||||
|
||||
dees-input-dropdown {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
margin-left: 8px;
|
||||
margin: 8px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
@@ -136,57 +151,98 @@ export class LeleAccountNavigation extends DeesElement {
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style></style>
|
||||
<div class="commitinfo">idp.global v${commitinfo.version}</div>
|
||||
<div class="logo">idp.global</div>
|
||||
<div class="navigationGroupLabel">Account Settings</div>
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {
|
||||
const subrouter = await this.getAccountRouter();
|
||||
subrouter.pushUrl('');
|
||||
}}
|
||||
>
|
||||
overview
|
||||
<div class="logoArea">
|
||||
<div class="logo">
|
||||
<dees-icon .icon=${'lucide:fingerprint'}></dees-icon>
|
||||
idp.global
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
idpState.domtools.router.pushUrl('/logout');
|
||||
}}
|
||||
>
|
||||
logout
|
||||
|
||||
<div class="navContent">
|
||||
<div class="navigationGroupLabel">Account</div>
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {
|
||||
const subrouter = await this.getAccountRouter();
|
||||
subrouter.pushUrl('');
|
||||
}}
|
||||
>
|
||||
<dees-icon .icon=${'lucide:home'}></dees-icon>
|
||||
Overview
|
||||
</div>
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {
|
||||
|
||||
}}
|
||||
>
|
||||
<dees-icon .icon=${'lucide:shield'}></dees-icon>
|
||||
Manage Roles
|
||||
</div>
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {
|
||||
}}
|
||||
>
|
||||
<dees-icon .icon=${'lucide:plus'}></dees-icon>
|
||||
Create Organization
|
||||
</div>
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
idpState.domtools.router.pushUrl('/logout');
|
||||
}}
|
||||
>
|
||||
<dees-icon .icon=${'lucide:power'}></dees-icon>
|
||||
Log Out
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="navigationGroupLabel">Organization</div>
|
||||
<dees-input-dropdown
|
||||
.label=${'Select organization'}
|
||||
@selectedOption=${(eventArg: CustomEvent) => {
|
||||
const currentState = states.accountState.getState();
|
||||
states.accountState.dispatchAction(
|
||||
states.setSelectedOrg,
|
||||
currentState.organizations.find((org) => org.data.slug === eventArg.detail.payload)
|
||||
);
|
||||
}}
|
||||
></dees-input-dropdown>
|
||||
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {}}
|
||||
>
|
||||
<dees-icon .icon=${'lucide:box'}></dees-icon>
|
||||
Apps
|
||||
</div>
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {}}
|
||||
>
|
||||
<dees-icon .icon=${'lucide:users'}></dees-icon>
|
||||
Users
|
||||
</div>
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {}}
|
||||
>
|
||||
<dees-icon .icon=${'lucide:activity'}></dees-icon>
|
||||
Activity
|
||||
</div>
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {}}
|
||||
>
|
||||
<dees-icon .icon=${'lucide:wallet'}></dees-icon>
|
||||
Billing
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {
|
||||
|
||||
}}
|
||||
>
|
||||
manage roles
|
||||
</div>
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {
|
||||
}}
|
||||
>
|
||||
create an org
|
||||
</div>
|
||||
<div class="navigationGroupLabel">Organization Settings</div>
|
||||
<dees-input-dropdown
|
||||
.label=${'choose org:'}
|
||||
@selectedOption=${(eventArg: CustomEvent) => {
|
||||
const currentState = states.accountState.getState();
|
||||
states.accountState.dispatchAction(
|
||||
states.setSelectedOrg,
|
||||
currentState.organizations.find((org) => org.data.slug === eventArg.detail.payload)
|
||||
);
|
||||
}}
|
||||
></dees-input-dropdown>
|
||||
${this.options.map((option) => {
|
||||
return html` <div class="navigationOption">${option.text}</div> `;
|
||||
})}
|
||||
|
||||
<div class="commitinfo">v${commitinfo.version}</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user