211 lines
8.5 KiB
TypeScript
211 lines
8.5 KiB
TypeScript
import { html, css } from '@design.estate/dees-element';
|
|
import type { DeesAppuiBar } from './dees-appui-appbar.js';
|
|
import type { IAppBarMenuItem } from './interfaces/appbarmenuitem.js';
|
|
import '@design.estate/dees-wcctools/demotools';
|
|
|
|
export const demoFunc = () => {
|
|
// Sample menu items with various configurations
|
|
// Note: Following standard desktop UI patterns, top-level menu items don't have icons
|
|
// Icons are only used in dropdown menu items for better visual hierarchy
|
|
const menuItems: IAppBarMenuItem[] = [
|
|
{
|
|
name: 'File',
|
|
action: async () => {}, // No-op action for menu with submenu
|
|
submenu: [
|
|
{ name: 'New File', shortcut: 'Cmd+N', iconName: 'file-plus', action: async () => console.log('New file') },
|
|
{ name: 'Open...', shortcut: 'Cmd+O', iconName: 'folder-open', action: async () => console.log('Open') },
|
|
{ name: 'Open Recent', action: async () => {}, submenu: [
|
|
{ name: 'project-alpha.ts', action: async () => console.log('Open recent 1') },
|
|
{ name: 'config.json', action: async () => console.log('Open recent 2') },
|
|
{ name: 'readme.md', action: async () => console.log('Open recent 3') },
|
|
]},
|
|
{ divider: true },
|
|
{ name: 'Save', shortcut: 'Cmd+S', iconName: 'save', action: async () => console.log('Save') },
|
|
{ name: 'Save As...', shortcut: 'Cmd+Shift+S', action: async () => console.log('Save as'), disabled: true },
|
|
{ divider: true },
|
|
{ name: 'Exit', shortcut: 'Cmd+Q', action: async () => console.log('Exit') },
|
|
]
|
|
},
|
|
{
|
|
name: 'Edit',
|
|
action: async () => {}, // No-op action for menu with submenu
|
|
submenu: [
|
|
{ name: 'Undo', shortcut: 'Cmd+Z', iconName: 'undo', action: async () => console.log('Undo') },
|
|
{ name: 'Redo', shortcut: 'Cmd+Shift+Z', iconName: 'redo', action: async () => console.log('Redo') },
|
|
{ divider: true },
|
|
{ name: 'Cut', shortcut: 'Cmd+X', iconName: 'scissors', action: async () => console.log('Cut') },
|
|
{ name: 'Copy', shortcut: 'Cmd+C', iconName: 'copy', action: async () => console.log('Copy') },
|
|
{ name: 'Paste', shortcut: 'Cmd+V', iconName: 'clipboard', action: async () => console.log('Paste') },
|
|
{ divider: true },
|
|
{ name: 'Find', shortcut: 'Cmd+F', iconName: 'search', action: async () => console.log('Find') },
|
|
{ name: 'Replace', shortcut: 'Cmd+H', action: async () => console.log('Replace') },
|
|
]
|
|
},
|
|
{
|
|
name: 'View',
|
|
action: async () => {}, // No-op action for menu with submenu
|
|
submenu: [
|
|
{ name: 'Toggle Fullscreen', shortcut: 'F11', iconName: 'expand', action: async () => console.log('Fullscreen') },
|
|
{ name: 'Zoom In', shortcut: 'Cmd++', iconName: 'zoom-in', action: async () => console.log('Zoom in') },
|
|
{ name: 'Zoom Out', shortcut: 'Cmd+-', iconName: 'zoom-out', action: async () => console.log('Zoom out') },
|
|
{ name: 'Reset Zoom', shortcut: 'Cmd+0', action: async () => console.log('Reset zoom') },
|
|
{ divider: true },
|
|
{ name: 'Toggle Sidebar', shortcut: 'Cmd+B', action: async () => console.log('Toggle sidebar') },
|
|
{ name: 'Toggle Terminal', shortcut: 'Cmd+J', iconName: 'terminal', action: async () => console.log('Toggle terminal') },
|
|
]
|
|
},
|
|
{
|
|
name: 'Help',
|
|
action: async () => {}, // No-op action for menu with submenu
|
|
submenu: [
|
|
{ name: 'Documentation', iconName: 'book', action: async () => console.log('Documentation') },
|
|
{ name: 'Release Notes', iconName: 'file-text', action: async () => console.log('Release notes') },
|
|
{ divider: true },
|
|
{ name: 'Report Issue', iconName: 'bug', action: async () => console.log('Report issue') },
|
|
{ name: 'About', iconName: 'info', action: async () => console.log('About') },
|
|
]
|
|
}
|
|
];
|
|
|
|
return html`
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
const appbar = elementArg.querySelector('#appbar') as DeesAppuiBar;
|
|
|
|
// Set up status toggle
|
|
const statusButtons = elementArg.querySelectorAll('.status-toggle dees-button');
|
|
statusButtons[0].addEventListener('click', () => {
|
|
appbar.user = { ...appbar.user, status: 'online' };
|
|
});
|
|
statusButtons[1].addEventListener('click', () => {
|
|
appbar.user = { ...appbar.user, status: 'busy' };
|
|
});
|
|
statusButtons[2].addEventListener('click', () => {
|
|
appbar.user = { ...appbar.user, status: 'away' };
|
|
});
|
|
statusButtons[3].addEventListener('click', () => {
|
|
appbar.user = { ...appbar.user, status: 'offline' };
|
|
});
|
|
|
|
// Set up window controls toggle
|
|
const windowControlsButton = elementArg.querySelector('.window-controls-toggle dees-button');
|
|
windowControlsButton.addEventListener('click', () => {
|
|
appbar.showWindowControls = !appbar.showWindowControls;
|
|
});
|
|
|
|
// Set up breadcrumb buttons
|
|
const breadcrumbButtons = elementArg.querySelectorAll('.breadcrumb-toggle dees-button');
|
|
breadcrumbButtons[0].addEventListener('click', () => {
|
|
appbar.breadcrumbs = 'Home > Documents > Projects > MyApp > src > index.ts';
|
|
});
|
|
breadcrumbButtons[1].addEventListener('click', () => {
|
|
appbar.breadcrumbs = 'Dashboard';
|
|
});
|
|
}}>
|
|
<style>
|
|
${css`
|
|
.demo-container {
|
|
height: 600px;
|
|
width: 100%;
|
|
background: #1a1a1a;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
padding: 20px;
|
|
color: #ccc;
|
|
}
|
|
|
|
.controls {
|
|
padding: 20px;
|
|
display: flex;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.control-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.control-group label {
|
|
font-size: 12px;
|
|
color: #888;
|
|
}
|
|
`}
|
|
</style>
|
|
|
|
<div class="demo-container">
|
|
<dees-appui-appbar
|
|
id="appbar"
|
|
.menuItems=${menuItems}
|
|
.breadcrumbs=${'Project > src > components > AppBar.ts'}
|
|
.breadcrumbSeparator=${' > '}
|
|
.showWindowControls=${true}
|
|
.showSearch=${true}
|
|
.theme=${'dark'}
|
|
.user=${{
|
|
name: 'John Doe',
|
|
status: 'online' as 'online' | 'offline' | 'busy' | 'away'
|
|
}}
|
|
@menu-select=${(e: CustomEvent) => console.log('Menu selected:', e.detail.item)}
|
|
@breadcrumb-navigate=${(e: CustomEvent) => console.log('Breadcrumb clicked:', e.detail)}
|
|
@search-click=${() => console.log('Search clicked')}
|
|
@user-menu-open=${() => console.log('User menu clicked')}
|
|
></dees-appui-appbar>
|
|
|
|
<div class="content">
|
|
<h2>App Bar Demo</h2>
|
|
<p>This demo shows various features of the app bar component:</p>
|
|
<ul>
|
|
<li>Dynamic menu items with icons, shortcuts, and submenus</li>
|
|
<li>Breadcrumb navigation</li>
|
|
<li>User account section with status indicator</li>
|
|
<li>Search icon</li>
|
|
<li>Window controls (platform-specific)</li>
|
|
<li>Dark/light theme support</li>
|
|
<li>Keyboard navigation (Tab, Enter, Escape)</li>
|
|
<li>Custom events for all interactions</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<div class="control-group">
|
|
<label>Theme</label>
|
|
<dees-button-group class="theme-toggle">
|
|
<dees-button>Dark</dees-button>
|
|
<dees-button>Light</dees-button>
|
|
</dees-button-group>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>User Status</label>
|
|
<dees-button-group class="status-toggle">
|
|
<dees-button>Online</dees-button>
|
|
<dees-button>Busy</dees-button>
|
|
<dees-button>Away</dees-button>
|
|
<dees-button>Offline</dees-button>
|
|
</dees-button-group>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Window Controls</label>
|
|
<dees-button-group class="window-controls-toggle">
|
|
<dees-button>Toggle</dees-button>
|
|
</dees-button-group>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Breadcrumbs</label>
|
|
<dees-button-group class="breadcrumb-toggle">
|
|
<dees-button>Long Path</dees-button>
|
|
<dees-button>Short Path</dees-button>
|
|
</dees-button-group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</dees-demowrapper>
|
|
`;
|
|
}; |