fix(elements/applauncher): add eco app launcher components, wifi/sound/battery menus, demos and new eco-screensaver; replace dees-screensaver (breaking API change)
This commit is contained in:
@@ -0,0 +1,71 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
import type { IAppIcon } from './eco-applauncher.js';
|
||||
import type { IWifiNetwork } from '../eco-applauncher-wifimenu/index.js';
|
||||
import type { IAudioDevice } from '../eco-applauncher-soundmenu/index.js';
|
||||
|
||||
const mockApps: IAppIcon[] = [
|
||||
{ name: 'Settings', icon: 'lucide:settings', action: () => console.log('Settings clicked') },
|
||||
{ name: 'Browser', icon: 'lucide:globe', action: () => console.log('Browser clicked') },
|
||||
{ name: 'Terminal', icon: 'lucide:terminal', action: () => console.log('Terminal clicked') },
|
||||
{ name: 'Files', icon: 'lucide:folder', action: () => console.log('Files clicked') },
|
||||
{ name: 'Calendar', icon: 'lucide:calendar', action: () => console.log('Calendar clicked') },
|
||||
{ name: 'Mail', icon: 'lucide:mail', action: () => console.log('Mail clicked') },
|
||||
{ name: 'Music', icon: 'lucide:music', action: () => console.log('Music clicked') },
|
||||
{ name: 'Photos', icon: 'lucide:image', action: () => console.log('Photos clicked') },
|
||||
{ name: 'Notes', icon: 'lucide:fileText', action: () => console.log('Notes clicked') },
|
||||
{ name: 'Calculator', icon: 'lucide:calculator', action: () => console.log('Calculator clicked') },
|
||||
{ name: 'Weather', icon: 'lucide:cloudSun', action: () => console.log('Weather clicked') },
|
||||
{ name: 'Maps', icon: 'lucide:map', action: () => console.log('Maps clicked') },
|
||||
];
|
||||
|
||||
const mockNetworks: IWifiNetwork[] = [
|
||||
{ ssid: 'HomeNetwork', signalStrength: 95, secured: true },
|
||||
{ ssid: 'OfficeWiFi', signalStrength: 75, secured: true },
|
||||
{ ssid: 'CoffeeShop_Guest', signalStrength: 60, secured: false },
|
||||
{ ssid: 'Neighbor_5G', signalStrength: 40, secured: true },
|
||||
{ ssid: 'WeakSignal', signalStrength: 15, secured: true },
|
||||
];
|
||||
|
||||
const mockAudioDevices: IAudioDevice[] = [
|
||||
{ id: 'speakers', name: 'Built-in Speakers', type: 'speaker' },
|
||||
{ id: 'headphones', name: 'AirPods Pro', type: 'bluetooth' },
|
||||
{ id: 'hdmi', name: 'LG Monitor', type: 'hdmi' },
|
||||
];
|
||||
|
||||
export const demo = () => html`
|
||||
<style>
|
||||
.demo-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div class="demo-container">
|
||||
<eco-applauncher
|
||||
.apps=${mockApps}
|
||||
.batteryLevel=${85}
|
||||
.networkStatus=${'online'}
|
||||
.soundLevel=${70}
|
||||
.networks=${mockNetworks}
|
||||
.connectedNetwork=${'HomeNetwork'}
|
||||
.wifiEnabled=${true}
|
||||
.timeRemaining=${'2h 30m remaining'}
|
||||
.outputDevices=${mockAudioDevices}
|
||||
.activeDeviceId=${'speakers'}
|
||||
.muted=${false}
|
||||
.userName=${'John Doe'}
|
||||
.notificationCount=${3}
|
||||
@wifi-toggle=${(e: CustomEvent) => console.log('WiFi toggle:', e.detail)}
|
||||
@network-select=${(e: CustomEvent) => console.log('Network selected:', e.detail)}
|
||||
@wifi-settings-click=${() => console.log('WiFi settings clicked')}
|
||||
@battery-saver-toggle=${(e: CustomEvent) => console.log('Battery saver:', e.detail)}
|
||||
@battery-settings-click=${() => console.log('Battery settings clicked')}
|
||||
@volume-change=${(e: CustomEvent) => console.log('Volume:', e.detail)}
|
||||
@mute-toggle=${(e: CustomEvent) => console.log('Mute:', e.detail)}
|
||||
@device-select=${(e: CustomEvent) => console.log('Device:', e.detail)}
|
||||
@sound-settings-click=${() => console.log('Sound settings clicked')}
|
||||
@search-click=${() => console.log('Search clicked')}
|
||||
@notifications-click=${() => console.log('Notifications clicked')}
|
||||
@user-click=${() => console.log('User clicked')}
|
||||
></eco-applauncher>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,955 @@
|
||||
import {
|
||||
customElement,
|
||||
DeesElement,
|
||||
type TemplateResult,
|
||||
html,
|
||||
property,
|
||||
css,
|
||||
cssManager,
|
||||
state,
|
||||
} from '@design.estate/dees-element';
|
||||
import { DeesIcon } from '@design.estate/dees-catalog';
|
||||
import { demo } from './eco-applauncher.demo.js';
|
||||
import { EcoApplauncherWifimenu, type IWifiNetwork } from '../eco-applauncher-wifimenu/index.js';
|
||||
import { EcoApplauncherBatterymenu } from '../eco-applauncher-batterymenu/index.js';
|
||||
import { EcoApplauncherSoundmenu, type IAudioDevice } from '../eco-applauncher-soundmenu/index.js';
|
||||
|
||||
// Ensure components are registered
|
||||
DeesIcon;
|
||||
EcoApplauncherWifimenu;
|
||||
EcoApplauncherBatterymenu;
|
||||
EcoApplauncherSoundmenu;
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'eco-applauncher': EcoApplauncher;
|
||||
}
|
||||
}
|
||||
|
||||
export interface IAppIcon {
|
||||
name: string;
|
||||
icon: string;
|
||||
action?: () => void;
|
||||
}
|
||||
|
||||
export interface IStatusBarConfig {
|
||||
showTime?: boolean;
|
||||
showNetwork?: boolean;
|
||||
showBattery?: boolean;
|
||||
showSound?: boolean;
|
||||
}
|
||||
|
||||
export interface ITopBarConfig {
|
||||
showSearch?: boolean;
|
||||
showDate?: boolean;
|
||||
showNotifications?: boolean;
|
||||
showUser?: boolean;
|
||||
}
|
||||
|
||||
export type TNetworkStatus = 'online' | 'offline' | 'connecting';
|
||||
export type TBatteryStatus = number | 'charging';
|
||||
|
||||
@customElement('eco-applauncher')
|
||||
export class EcoApplauncher extends DeesElement {
|
||||
public static demo = demo;
|
||||
public static demoGroup = 'App Launcher';
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: ${cssManager.bdTheme('hsl(220 20% 97%)', 'hsl(240 10% 4%)')};
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.launcher-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
height: 48px;
|
||||
background: ${cssManager.bdTheme('hsl(220 15% 94%)', 'hsl(240 6% 8%)')};
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('hsl(220 15% 88%)', 'hsl(240 5% 15%)')};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.top-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.top-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.top-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.top-date {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 80%)')};
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
background: ${cssManager.bdTheme('hsl(220 15% 90%)', 'hsl(240 5% 12%)')};
|
||||
border-radius: 20px;
|
||||
min-width: 200px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.search-box:hover {
|
||||
background: ${cssManager.bdTheme('hsl(220 15% 86%)', 'hsl(240 5% 15%)')};
|
||||
}
|
||||
|
||||
.search-box dees-icon {
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
|
||||
}
|
||||
|
||||
.search-text {
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
|
||||
}
|
||||
|
||||
.top-icon-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 70%)')};
|
||||
}
|
||||
|
||||
.top-icon-button:hover {
|
||||
background: ${cssManager.bdTheme('hsl(220 15% 88%)', 'hsl(240 5% 15%)')};
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(217 91% 50%)')};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.user-avatar:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.notification-badge {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.notification-badge .badge {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 0 4px;
|
||||
background: hsl(0 72% 51%);
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.apps-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.apps-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
gap: 32px;
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, transform 0.15s ease;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.app-icon:hover {
|
||||
background: ${cssManager.bdTheme('hsl(220 15% 92%)', 'hsl(240 5% 12%)')};
|
||||
}
|
||||
|
||||
.app-icon:active {
|
||||
transform: scale(0.95);
|
||||
background: ${cssManager.bdTheme('hsl(220 15% 88%)', 'hsl(240 5% 16%)')};
|
||||
}
|
||||
|
||||
.app-icon-circle {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 16px;
|
||||
background: ${cssManager.bdTheme('hsl(220 15% 90%)', 'hsl(240 5% 15%)')};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 80%)')};
|
||||
}
|
||||
|
||||
.app-icon-circle dees-icon {
|
||||
--dees-icon-size: 28px;
|
||||
}
|
||||
|
||||
.app-icon-name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 25%)', 'hsl(0 0% 85%)')};
|
||||
text-align: center;
|
||||
max-width: 90px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
height: 48px;
|
||||
background: ${cssManager.bdTheme('hsl(220 15% 94%)', 'hsl(240 6% 8%)')};
|
||||
border-top: 1px solid ${cssManager.bdTheme('hsl(220 15% 88%)', 'hsl(240 5% 15%)')};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.status-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 70%)')};
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
font-size: 16px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.status-time {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
|
||||
}
|
||||
|
||||
.battery-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.battery-bar {
|
||||
width: 24px;
|
||||
height: 12px;
|
||||
border: 1.5px solid ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.battery-bar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -4px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 2px;
|
||||
height: 6px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
|
||||
border-radius: 0 1px 1px 0;
|
||||
}
|
||||
|
||||
.battery-fill {
|
||||
height: 100%;
|
||||
background: hsl(142 71% 45%);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.battery-fill.low {
|
||||
background: hsl(0 72% 51%);
|
||||
}
|
||||
|
||||
.battery-fill.charging {
|
||||
background: hsl(47 100% 50%);
|
||||
}
|
||||
|
||||
.network-indicator {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 2px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.network-bar {
|
||||
width: 3px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 75%)', 'hsl(0 0% 40%)')};
|
||||
border-radius: 1px;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.network-bar.active {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 90%)')};
|
||||
}
|
||||
|
||||
.network-bar:nth-child(1) { height: 4px; }
|
||||
.network-bar:nth-child(2) { height: 7px; }
|
||||
.network-bar:nth-child(3) { height: 10px; }
|
||||
.network-bar:nth-child(4) { height: 14px; }
|
||||
|
||||
.sound-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.sound-bars {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 2px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.sound-bar {
|
||||
width: 2px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 90%)')};
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.sound-bar:nth-child(1) { height: 4px; }
|
||||
.sound-bar:nth-child(2) { height: 8px; }
|
||||
.sound-bar:nth-child(3) { height: 12px; }
|
||||
|
||||
.status-item-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.status-item.clickable {
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
margin: -4px -8px;
|
||||
border-radius: 6px;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.status-item.clickable:hover {
|
||||
background: ${cssManager.bdTheme('hsl(220 15% 88%)', 'hsl(240 5% 15%)')};
|
||||
}
|
||||
|
||||
.status-item.clickable.active {
|
||||
background: ${cssManager.bdTheme('hsl(220 15% 85%)', 'hsl(240 5% 18%)')};
|
||||
}
|
||||
|
||||
.menu-popup {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 8px);
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.apps-area {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.apps-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.app-icon-circle {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.app-icon-name {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.status-left,
|
||||
.status-right {
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
@property({ type: Array })
|
||||
accessor apps: IAppIcon[] = [];
|
||||
|
||||
@property({ type: Object })
|
||||
accessor statusConfig: IStatusBarConfig = {
|
||||
showTime: true,
|
||||
showNetwork: true,
|
||||
showBattery: true,
|
||||
showSound: true,
|
||||
};
|
||||
|
||||
@property({ type: Object })
|
||||
accessor topBarConfig: ITopBarConfig = {
|
||||
showSearch: true,
|
||||
showDate: true,
|
||||
showNotifications: true,
|
||||
showUser: true,
|
||||
};
|
||||
|
||||
@property({ type: String })
|
||||
accessor userName = 'User';
|
||||
|
||||
@property({ type: Number })
|
||||
accessor notificationCount = 0;
|
||||
|
||||
@property({ type: Number })
|
||||
accessor batteryLevel: TBatteryStatus = 100;
|
||||
|
||||
@property({ type: String })
|
||||
accessor networkStatus: TNetworkStatus = 'online';
|
||||
|
||||
@property({ type: Number })
|
||||
accessor soundLevel = 50;
|
||||
|
||||
@state()
|
||||
accessor currentTime = '';
|
||||
|
||||
@state()
|
||||
accessor currentDate = '';
|
||||
|
||||
@state()
|
||||
accessor wifiMenuOpen = false;
|
||||
|
||||
@state()
|
||||
accessor batteryMenuOpen = false;
|
||||
|
||||
@state()
|
||||
accessor soundMenuOpen = false;
|
||||
|
||||
@property({ type: Array })
|
||||
accessor networks: IWifiNetwork[] = [];
|
||||
|
||||
@property({ type: String })
|
||||
accessor connectedNetwork: string | null = null;
|
||||
|
||||
@property({ type: Boolean })
|
||||
accessor wifiEnabled = true;
|
||||
|
||||
@property({ type: Boolean })
|
||||
accessor isCharging = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
accessor batterySaverEnabled = false;
|
||||
|
||||
@property({ type: String })
|
||||
accessor timeRemaining: string | null = null;
|
||||
|
||||
@property({ type: Array })
|
||||
accessor outputDevices: IAudioDevice[] = [];
|
||||
|
||||
@property({ type: String })
|
||||
accessor activeDeviceId: string | null = null;
|
||||
|
||||
@property({ type: Boolean })
|
||||
accessor muted = false;
|
||||
|
||||
private timeUpdateInterval: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.updateTime();
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="launcher-container">
|
||||
${this.renderTopBar()}
|
||||
<div class="apps-area">
|
||||
<div class="apps-grid">
|
||||
${this.apps.map((app) => this.renderAppIcon(app))}
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-bar">
|
||||
<div class="status-left">
|
||||
${this.statusConfig.showNetwork ? this.renderNetworkStatusWithMenu() : ''}
|
||||
${this.statusConfig.showBattery ? this.renderBatteryStatusWithMenu() : ''}
|
||||
${this.statusConfig.showSound ? this.renderSoundStatusWithMenu() : ''}
|
||||
</div>
|
||||
<div class="status-right">
|
||||
${this.statusConfig.showTime ? html`
|
||||
<span class="status-time">${this.currentTime}</span>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderAppIcon(app: IAppIcon): TemplateResult {
|
||||
return html`
|
||||
<div class="app-icon" @click=${() => this.handleAppClick(app)}>
|
||||
<div class="app-icon-circle">
|
||||
<dees-icon .icon=${app.icon} .iconSize=${28}></dees-icon>
|
||||
</div>
|
||||
<span class="app-icon-name">${app.name}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderTopBar(): TemplateResult {
|
||||
const userInitials = this.userName
|
||||
.split(' ')
|
||||
.map((n) => n[0])
|
||||
.join('')
|
||||
.slice(0, 2)
|
||||
.toUpperCase();
|
||||
|
||||
return html`
|
||||
<div class="top-bar">
|
||||
<div class="top-left">
|
||||
${this.topBarConfig.showDate ? html`
|
||||
<span class="top-date">${this.currentDate}</span>
|
||||
` : ''}
|
||||
</div>
|
||||
<div class="top-center">
|
||||
${this.topBarConfig.showSearch ? html`
|
||||
<div class="search-box" @click=${this.handleSearchClick}>
|
||||
<dees-icon .icon=${'lucide:search'} .iconSize=${16}></dees-icon>
|
||||
<span class="search-text">Search apps...</span>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
<div class="top-right">
|
||||
${this.topBarConfig.showNotifications ? html`
|
||||
<div
|
||||
class="top-icon-button notification-badge"
|
||||
@click=${this.handleNotificationsClick}
|
||||
>
|
||||
<dees-icon .icon=${'lucide:bell'} .iconSize=${18}></dees-icon>
|
||||
${this.notificationCount > 0 ? html`
|
||||
<span class="badge">${this.notificationCount > 99 ? '99+' : this.notificationCount}</span>
|
||||
` : ''}
|
||||
</div>
|
||||
` : ''}
|
||||
${this.topBarConfig.showUser ? html`
|
||||
<div class="user-avatar" @click=${this.handleUserClick}>
|
||||
${userInitials}
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderNetworkStatusWithMenu(): TemplateResult {
|
||||
const bars = this.getNetworkBars();
|
||||
return html`
|
||||
<div class="status-item-wrapper">
|
||||
<div
|
||||
class="status-item clickable ${this.wifiMenuOpen ? 'active' : ''}"
|
||||
@click=${this.handleNetworkClick}
|
||||
>
|
||||
<div class="network-indicator">
|
||||
${[1, 2, 3, 4].map((bar) => html`
|
||||
<div class="network-bar ${bar <= bars ? 'active' : ''}"></div>
|
||||
`)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-popup">
|
||||
<eco-applauncher-wifimenu
|
||||
?open=${this.wifiMenuOpen}
|
||||
.networks=${this.networks}
|
||||
.connectedNetwork=${this.connectedNetwork}
|
||||
.wifiEnabled=${this.wifiEnabled}
|
||||
@menu-close=${this.handleWifiMenuClose}
|
||||
@wifi-toggle=${this.handleWifiToggle}
|
||||
@network-select=${this.handleNetworkSelect}
|
||||
@settings-click=${this.handleWifiSettingsClick}
|
||||
></eco-applauncher-wifimenu>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderNetworkStatus(): TemplateResult {
|
||||
const bars = this.getNetworkBars();
|
||||
return html`
|
||||
<div class="status-item">
|
||||
<div class="network-indicator">
|
||||
${[1, 2, 3, 4].map((bar) => html`
|
||||
<div class="network-bar ${bar <= bars ? 'active' : ''}"></div>
|
||||
`)}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderBatteryStatusWithMenu(): TemplateResult {
|
||||
const level = typeof this.batteryLevel === 'number' ? this.batteryLevel : 100;
|
||||
const isCharging = this.batteryLevel === 'charging' || this.isCharging;
|
||||
const isLow = level < 20;
|
||||
|
||||
return html`
|
||||
<div class="status-item-wrapper">
|
||||
<div
|
||||
class="status-item battery-indicator clickable ${this.batteryMenuOpen ? 'active' : ''}"
|
||||
@click=${this.handleBatteryClick}
|
||||
>
|
||||
<div class="battery-bar">
|
||||
<div
|
||||
class="battery-fill ${isLow ? 'low' : ''} ${isCharging ? 'charging' : ''}"
|
||||
style="width: ${level}%"
|
||||
></div>
|
||||
</div>
|
||||
${isCharging
|
||||
? html`<dees-icon .icon=${'lucide:zap'} .iconSize=${14}></dees-icon>`
|
||||
: html`<span>${level}%</span>`
|
||||
}
|
||||
</div>
|
||||
<div class="menu-popup">
|
||||
<eco-applauncher-batterymenu
|
||||
?open=${this.batteryMenuOpen}
|
||||
.batteryLevel=${level}
|
||||
.isCharging=${isCharging}
|
||||
.batterySaverEnabled=${this.batterySaverEnabled}
|
||||
.timeRemaining=${this.timeRemaining}
|
||||
@menu-close=${this.handleBatteryMenuClose}
|
||||
@battery-saver-toggle=${this.handleBatterySaverToggle}
|
||||
@settings-click=${this.handleBatterySettingsClick}
|
||||
></eco-applauncher-batterymenu>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderBatteryStatus(): TemplateResult {
|
||||
const level = typeof this.batteryLevel === 'number' ? this.batteryLevel : 100;
|
||||
const isCharging = this.batteryLevel === 'charging';
|
||||
const isLow = level < 20;
|
||||
|
||||
return html`
|
||||
<div class="status-item battery-indicator">
|
||||
<div class="battery-bar">
|
||||
<div
|
||||
class="battery-fill ${isLow ? 'low' : ''} ${isCharging ? 'charging' : ''}"
|
||||
style="width: ${level}%"
|
||||
></div>
|
||||
</div>
|
||||
${isCharging
|
||||
? html`<dees-icon .icon=${'lucide:zap'} .iconSize=${14}></dees-icon>`
|
||||
: html`<span>${level}%</span>`
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderSoundStatusWithMenu(): TemplateResult {
|
||||
const activeBars = Math.ceil((this.soundLevel / 100) * 3);
|
||||
const soundIcon = this.muted || this.soundLevel === 0 ? 'lucide:volumeX' : 'lucide:volume2';
|
||||
|
||||
return html`
|
||||
<div class="status-item-wrapper">
|
||||
<div
|
||||
class="status-item sound-indicator clickable ${this.soundMenuOpen ? 'active' : ''}"
|
||||
@click=${this.handleSoundClick}
|
||||
>
|
||||
<dees-icon .icon=${soundIcon} .iconSize=${16}></dees-icon>
|
||||
<div class="sound-bars">
|
||||
${[1, 2, 3].map((bar) => html`
|
||||
<div
|
||||
class="sound-bar"
|
||||
style="opacity: ${bar <= activeBars && !this.muted ? 1 : 0.3}"
|
||||
></div>
|
||||
`)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-popup">
|
||||
<eco-applauncher-soundmenu
|
||||
?open=${this.soundMenuOpen}
|
||||
.volume=${this.soundLevel}
|
||||
.muted=${this.muted}
|
||||
.outputDevices=${this.outputDevices}
|
||||
.activeDeviceId=${this.activeDeviceId}
|
||||
@menu-close=${this.handleSoundMenuClose}
|
||||
@volume-change=${this.handleVolumeChange}
|
||||
@mute-toggle=${this.handleMuteToggle}
|
||||
@device-select=${this.handleDeviceSelect}
|
||||
@settings-click=${this.handleSoundSettingsClick}
|
||||
></eco-applauncher-soundmenu>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderSoundStatus(): TemplateResult {
|
||||
const activeBars = Math.ceil((this.soundLevel / 100) * 3);
|
||||
const soundIcon = this.soundLevel === 0 ? 'lucide:volumeX' : 'lucide:volume2';
|
||||
return html`
|
||||
<div class="status-item sound-indicator">
|
||||
<dees-icon .icon=${soundIcon} .iconSize=${16}></dees-icon>
|
||||
<div class="sound-bars">
|
||||
${[1, 2, 3].map((bar) => html`
|
||||
<div
|
||||
class="sound-bar"
|
||||
style="opacity: ${bar <= activeBars ? 1 : 0.3}"
|
||||
></div>
|
||||
`)}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private getNetworkBars(): number {
|
||||
switch (this.networkStatus) {
|
||||
case 'online':
|
||||
return 4;
|
||||
case 'connecting':
|
||||
return 2;
|
||||
case 'offline':
|
||||
return 0;
|
||||
default:
|
||||
return 4;
|
||||
}
|
||||
}
|
||||
|
||||
private handleAppClick(app: IAppIcon): void {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('app-click', {
|
||||
detail: { app },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
if (app.action) {
|
||||
app.action();
|
||||
}
|
||||
}
|
||||
|
||||
private handleNetworkClick(e: MouseEvent): void {
|
||||
e.stopPropagation();
|
||||
this.batteryMenuOpen = false;
|
||||
this.soundMenuOpen = false;
|
||||
this.wifiMenuOpen = !this.wifiMenuOpen;
|
||||
}
|
||||
|
||||
private handleBatteryClick(e: MouseEvent): void {
|
||||
e.stopPropagation();
|
||||
this.wifiMenuOpen = false;
|
||||
this.soundMenuOpen = false;
|
||||
this.batteryMenuOpen = !this.batteryMenuOpen;
|
||||
}
|
||||
|
||||
private handleSoundClick(e: MouseEvent): void {
|
||||
e.stopPropagation();
|
||||
this.wifiMenuOpen = false;
|
||||
this.batteryMenuOpen = false;
|
||||
this.soundMenuOpen = !this.soundMenuOpen;
|
||||
}
|
||||
|
||||
private handleWifiMenuClose(): void {
|
||||
this.wifiMenuOpen = false;
|
||||
}
|
||||
|
||||
private handleBatteryMenuClose(): void {
|
||||
this.batteryMenuOpen = false;
|
||||
}
|
||||
|
||||
private handleSoundMenuClose(): void {
|
||||
this.soundMenuOpen = false;
|
||||
}
|
||||
|
||||
private handleVolumeChange(e: CustomEvent): void {
|
||||
this.soundLevel = e.detail.volume;
|
||||
this.dispatchEvent(new CustomEvent('volume-change', {
|
||||
detail: e.detail,
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}
|
||||
|
||||
private handleMuteToggle(e: CustomEvent): void {
|
||||
this.muted = e.detail.muted;
|
||||
this.dispatchEvent(new CustomEvent('mute-toggle', {
|
||||
detail: e.detail,
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}
|
||||
|
||||
private handleDeviceSelect(e: CustomEvent): void {
|
||||
this.activeDeviceId = e.detail.device.id;
|
||||
this.dispatchEvent(new CustomEvent('device-select', {
|
||||
detail: e.detail,
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}
|
||||
|
||||
private handleSoundSettingsClick(): void {
|
||||
this.soundMenuOpen = false;
|
||||
this.dispatchEvent(new CustomEvent('sound-settings-click', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}
|
||||
|
||||
private handleWifiToggle(e: CustomEvent): void {
|
||||
this.wifiEnabled = e.detail.enabled;
|
||||
this.dispatchEvent(new CustomEvent('wifi-toggle', {
|
||||
detail: e.detail,
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}
|
||||
|
||||
private handleNetworkSelect(e: CustomEvent): void {
|
||||
this.dispatchEvent(new CustomEvent('network-select', {
|
||||
detail: e.detail,
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}
|
||||
|
||||
private handleWifiSettingsClick(): void {
|
||||
this.wifiMenuOpen = false;
|
||||
this.dispatchEvent(new CustomEvent('wifi-settings-click', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}
|
||||
|
||||
private handleBatterySaverToggle(e: CustomEvent): void {
|
||||
this.batterySaverEnabled = e.detail.enabled;
|
||||
this.dispatchEvent(new CustomEvent('battery-saver-toggle', {
|
||||
detail: e.detail,
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}
|
||||
|
||||
private handleBatterySettingsClick(): void {
|
||||
this.batteryMenuOpen = false;
|
||||
this.dispatchEvent(new CustomEvent('battery-settings-click', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}
|
||||
|
||||
private handleSearchClick(): void {
|
||||
this.dispatchEvent(new CustomEvent('search-click', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}
|
||||
|
||||
private handleNotificationsClick(): void {
|
||||
this.dispatchEvent(new CustomEvent('notifications-click', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}
|
||||
|
||||
private handleUserClick(): void {
|
||||
this.dispatchEvent(new CustomEvent('user-click', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}
|
||||
|
||||
private updateTime(): void {
|
||||
const now = new Date();
|
||||
const hours = now.getHours();
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
const ampm = hours >= 12 ? 'PM' : 'AM';
|
||||
const displayHours = hours % 12 || 12;
|
||||
this.currentTime = `${displayHours}:${minutes} ${ampm}`;
|
||||
|
||||
// Update date
|
||||
const options: Intl.DateTimeFormatOptions = {
|
||||
weekday: 'short',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
};
|
||||
this.currentDate = now.toLocaleDateString('en-US', options);
|
||||
}
|
||||
|
||||
async connectedCallback(): Promise<void> {
|
||||
await super.connectedCallback();
|
||||
this.updateTime();
|
||||
this.timeUpdateInterval = setInterval(() => this.updateTime(), 1000);
|
||||
}
|
||||
|
||||
async disconnectedCallback(): Promise<void> {
|
||||
await super.disconnectedCallback();
|
||||
if (this.timeUpdateInterval) {
|
||||
clearInterval(this.timeUpdateInterval);
|
||||
this.timeUpdateInterval = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './eco-applauncher.js';
|
||||
Reference in New Issue
Block a user