347 lines
9.0 KiB
TypeScript
347 lines
9.0 KiB
TypeScript
import {
|
|
customElement,
|
|
DeesElement,
|
|
type TemplateResult,
|
|
html,
|
|
property,
|
|
css,
|
|
cssManager,
|
|
} from '@design.estate/dees-element';
|
|
import { DeesIcon } from '@design.estate/dees-catalog';
|
|
import { demo } from './eco-applauncher-batterymenu.demo.js';
|
|
|
|
// Ensure dees-icon is registered
|
|
DeesIcon;
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'eco-applauncher-batterymenu': EcoApplauncherBatterymenu;
|
|
}
|
|
}
|
|
|
|
@customElement('eco-applauncher-batterymenu')
|
|
export class EcoApplauncherBatterymenu extends DeesElement {
|
|
public static demo = demo;
|
|
public static demoGroup = 'App Launcher';
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.menu-container {
|
|
background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 10%)')};
|
|
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 20%)')};
|
|
border-radius: 12px;
|
|
box-shadow: ${cssManager.bdTheme(
|
|
'0 8px 32px rgba(0, 0, 0, 0.15)',
|
|
'0 8px 32px rgba(0, 0, 0, 0.4)'
|
|
)};
|
|
min-width: 280px;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
transform: scale(0.95) translateY(-8px);
|
|
transition: all 0.2s ease-out;
|
|
pointer-events: none;
|
|
}
|
|
|
|
:host([open]) .menu-container {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.battery-display {
|
|
padding: 24px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.battery-visual {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.battery-icon {
|
|
position: relative;
|
|
width: 80px;
|
|
height: 36px;
|
|
border: 2px solid ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 70%)')};
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.battery-icon::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: -6px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 4px;
|
|
height: 14px;
|
|
background: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 70%)')};
|
|
border-radius: 0 2px 2px 0;
|
|
}
|
|
|
|
.battery-fill {
|
|
height: 100%;
|
|
transition: width 0.3s ease, background 0.3s ease;
|
|
}
|
|
|
|
.battery-fill.good {
|
|
background: hsl(142 71% 45%);
|
|
}
|
|
|
|
.battery-fill.medium {
|
|
background: hsl(47 100% 50%);
|
|
}
|
|
|
|
.battery-fill.low {
|
|
background: hsl(0 72% 51%);
|
|
}
|
|
|
|
.battery-fill.charging {
|
|
background: linear-gradient(
|
|
90deg,
|
|
hsl(142 71% 45%) 0%,
|
|
hsl(142 71% 55%) 50%,
|
|
hsl(142 71% 45%) 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: charging-pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes charging-pulse {
|
|
0% { background-position: 100% 0; }
|
|
100% { background-position: -100% 0; }
|
|
}
|
|
|
|
.charging-icon {
|
|
color: hsl(47 100% 50%);
|
|
}
|
|
|
|
.battery-percentage {
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
|
|
}
|
|
|
|
.battery-status {
|
|
font-size: 14px;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.menu-divider {
|
|
height: 1px;
|
|
background: ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(240 5% 15%)')};
|
|
}
|
|
|
|
.menu-option {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 16px;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.menu-option:hover {
|
|
background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(240 5% 15%)')};
|
|
}
|
|
|
|
.option-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 14px;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
|
|
}
|
|
|
|
.option-description {
|
|
font-size: 12px;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 60%)', 'hsl(0 0% 50%)')};
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.toggle-switch {
|
|
position: relative;
|
|
width: 44px;
|
|
height: 24px;
|
|
background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(240 5% 25%)')};
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.toggle-switch.active {
|
|
background: hsl(217 91% 60%);
|
|
}
|
|
|
|
.toggle-switch::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
transition: transform 0.2s ease;
|
|
box-shadow: ${cssManager.bdTheme('0 1px 3px rgba(0,0,0,0.2)', 'none')};
|
|
}
|
|
|
|
.toggle-switch.active::after {
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
.menu-footer {
|
|
padding: 12px 16px;
|
|
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(240 5% 15%)')};
|
|
}
|
|
|
|
.settings-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 14px;
|
|
color: hsl(217 91% 60%);
|
|
cursor: pointer;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.settings-link:hover {
|
|
color: hsl(217 91% 50%);
|
|
}
|
|
`,
|
|
];
|
|
|
|
@property({ type: Boolean, reflect: true })
|
|
accessor open = false;
|
|
|
|
@property({ type: Number })
|
|
accessor batteryLevel = 100;
|
|
|
|
@property({ type: Boolean })
|
|
accessor isCharging = false;
|
|
|
|
@property({ type: Boolean })
|
|
accessor batterySaverEnabled = false;
|
|
|
|
@property({ type: String })
|
|
accessor timeRemaining: string | null = null;
|
|
|
|
private boundHandleClickOutside = this.handleClickOutside.bind(this);
|
|
|
|
public render(): TemplateResult {
|
|
const fillClass = this.getFillClass();
|
|
|
|
return html`
|
|
<div class="menu-container">
|
|
<div class="battery-display">
|
|
<div class="battery-visual">
|
|
<div class="battery-icon">
|
|
<div
|
|
class="battery-fill ${fillClass} ${this.isCharging ? 'charging' : ''}"
|
|
style="width: ${this.batteryLevel}%"
|
|
></div>
|
|
</div>
|
|
${this.isCharging ? html`
|
|
<dees-icon class="charging-icon" .icon=${'lucide:zap'} .iconSize=${24}></dees-icon>
|
|
` : ''}
|
|
</div>
|
|
<div class="battery-percentage">${this.batteryLevel}%</div>
|
|
<div class="battery-status">
|
|
${this.isCharging ? html`
|
|
<dees-icon .icon=${'lucide:plug'} .iconSize=${14}></dees-icon>
|
|
Charging
|
|
` : this.timeRemaining ? html`
|
|
<dees-icon .icon=${'lucide:clock'} .iconSize=${14}></dees-icon>
|
|
${this.timeRemaining}
|
|
` : html`
|
|
<dees-icon .icon=${'lucide:battery'} .iconSize=${14}></dees-icon>
|
|
On Battery
|
|
`}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="menu-divider"></div>
|
|
|
|
<div class="menu-option" @click=${this.handleBatterySaverToggle}>
|
|
<div class="option-label">
|
|
<dees-icon .icon=${'lucide:leaf'} .iconSize=${18}></dees-icon>
|
|
<div>
|
|
<div>Battery Saver</div>
|
|
<div class="option-description">Extends battery life</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="toggle-switch ${this.batterySaverEnabled ? 'active' : ''}"
|
|
@click=${(e: Event) => e.stopPropagation()}
|
|
></div>
|
|
</div>
|
|
|
|
<div class="menu-footer">
|
|
<div class="settings-link" @click=${this.handleSettingsClick}>
|
|
<dees-icon .icon=${'lucide:settings'} .iconSize=${14}></dees-icon>
|
|
Power Settings...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private getFillClass(): string {
|
|
if (this.batteryLevel > 50) return 'good';
|
|
if (this.batteryLevel > 20) return 'medium';
|
|
return 'low';
|
|
}
|
|
|
|
private handleBatterySaverToggle(): void {
|
|
this.batterySaverEnabled = !this.batterySaverEnabled;
|
|
this.dispatchEvent(new CustomEvent('battery-saver-toggle', {
|
|
detail: { enabled: this.batterySaverEnabled },
|
|
bubbles: true,
|
|
composed: true,
|
|
}));
|
|
}
|
|
|
|
private handleSettingsClick(): void {
|
|
this.dispatchEvent(new CustomEvent('settings-click', {
|
|
bubbles: true,
|
|
composed: true,
|
|
}));
|
|
}
|
|
|
|
private handleClickOutside(e: MouseEvent): void {
|
|
if (this.open && !this.contains(e.target as Node)) {
|
|
this.open = false;
|
|
this.dispatchEvent(new CustomEvent('menu-close', {
|
|
bubbles: true,
|
|
composed: true,
|
|
}));
|
|
}
|
|
}
|
|
|
|
async connectedCallback(): Promise<void> {
|
|
await super.connectedCallback();
|
|
setTimeout(() => {
|
|
document.addEventListener('click', this.boundHandleClickOutside);
|
|
}, 0);
|
|
}
|
|
|
|
async disconnectedCallback(): Promise<void> {
|
|
await super.disconnectedCallback();
|
|
document.removeEventListener('click', this.boundHandleClickOutside);
|
|
}
|
|
}
|