update wysiwyg
This commit is contained in:
Juergen Kunz
@ -13,139 +13,203 @@ export const demoFunc = () => html`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 40px;
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
min-height: 400px;
|
||||
}
|
||||
.demo-area {
|
||||
background: white;
|
||||
padding: 40px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e0e0e0;
|
||||
text-align: center;
|
||||
cursor: context-menu;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.demo-area:hover {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
</style>
|
||||
<div class="demo-container">
|
||||
<div class="demo-area" @contextmenu=${(eventArg: MouseEvent) => {
|
||||
DeesContextmenu.openContextMenuWithOptions(eventArg, [
|
||||
{
|
||||
name: 'Cut',
|
||||
iconName: 'scissors',
|
||||
shortcut: 'Cmd+X',
|
||||
action: async () => {
|
||||
console.log('Cut action');
|
||||
<dees-panel heading="Basic Context Menu with Nested Submenus">
|
||||
<div class="demo-area" @contextmenu=${(eventArg: MouseEvent) => {
|
||||
DeesContextmenu.openContextMenuWithOptions(eventArg, [
|
||||
{
|
||||
name: 'File',
|
||||
iconName: 'fileText',
|
||||
action: async () => {}, // Parent items with submenus still need an action
|
||||
submenu: [
|
||||
{ name: 'New', iconName: 'filePlus', shortcut: 'Cmd+N', action: async () => console.log('New file') },
|
||||
{ name: 'Open', iconName: 'folderOpen', shortcut: 'Cmd+O', action: async () => console.log('Open file') },
|
||||
{ name: 'Save', iconName: 'save', shortcut: 'Cmd+S', action: async () => console.log('Save') },
|
||||
{ divider: true },
|
||||
{ name: 'Export as PDF', iconName: 'download', action: async () => console.log('Export PDF') },
|
||||
{ name: 'Export as HTML', iconName: 'code', action: async () => console.log('Export HTML') },
|
||||
]
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Copy',
|
||||
iconName: 'copy',
|
||||
shortcut: 'Cmd+C',
|
||||
action: async () => {
|
||||
console.log('Copy action');
|
||||
{
|
||||
name: 'Edit',
|
||||
iconName: 'edit3',
|
||||
action: async () => {}, // Parent items with submenus still need an action
|
||||
submenu: [
|
||||
{ name: 'Cut', iconName: 'scissors', shortcut: 'Cmd+X', action: async () => console.log('Cut') },
|
||||
{ name: 'Copy', iconName: 'copy', shortcut: 'Cmd+C', action: async () => console.log('Copy') },
|
||||
{ name: 'Paste', iconName: 'clipboard', shortcut: 'Cmd+V', action: async () => console.log('Paste') },
|
||||
{ divider: true },
|
||||
{ name: 'Find', iconName: 'search', shortcut: 'Cmd+F', action: async () => console.log('Find') },
|
||||
{ name: 'Replace', iconName: 'repeat', shortcut: 'Cmd+H', action: async () => console.log('Replace') },
|
||||
]
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Paste',
|
||||
iconName: 'clipboard',
|
||||
shortcut: 'Cmd+V',
|
||||
action: async () => {
|
||||
console.log('Paste action');
|
||||
{
|
||||
name: 'View',
|
||||
iconName: 'eye',
|
||||
action: async () => {}, // Parent items with submenus still need an action
|
||||
submenu: [
|
||||
{ name: 'Zoom In', iconName: 'zoomIn', shortcut: 'Cmd++', action: async () => console.log('Zoom in') },
|
||||
{ name: 'Zoom Out', iconName: 'zoomOut', shortcut: 'Cmd+-', action: async () => console.log('Zoom out') },
|
||||
{ name: 'Reset Zoom', iconName: 'maximize2', shortcut: 'Cmd+0', action: async () => console.log('Reset zoom') },
|
||||
{ divider: true },
|
||||
{ name: 'Full Screen', iconName: 'maximize', shortcut: 'F11', action: async () => console.log('Full screen') },
|
||||
]
|
||||
},
|
||||
},
|
||||
{ divider: true },
|
||||
{
|
||||
name: 'Delete',
|
||||
iconName: 'trash2',
|
||||
action: async () => {
|
||||
console.log('Delete action');
|
||||
{ divider: true },
|
||||
{
|
||||
name: 'Settings',
|
||||
iconName: 'settings',
|
||||
action: async () => console.log('Settings')
|
||||
},
|
||||
},
|
||||
{ divider: true },
|
||||
{
|
||||
name: 'Select All',
|
||||
shortcut: 'Cmd+A',
|
||||
action: async () => {
|
||||
console.log('Select All action');
|
||||
{
|
||||
name: 'Help',
|
||||
iconName: 'helpCircle',
|
||||
action: async () => {}, // Parent items with submenus still need an action
|
||||
submenu: [
|
||||
{ name: 'Documentation', iconName: 'book', action: async () => console.log('Documentation') },
|
||||
{ name: 'Keyboard Shortcuts', iconName: 'keyboard', action: async () => console.log('Shortcuts') },
|
||||
{ divider: true },
|
||||
{ name: 'About', iconName: 'info', action: async () => console.log('About') },
|
||||
]
|
||||
}
|
||||
]);
|
||||
}}>
|
||||
<h3>Right-click anywhere in this area</h3>
|
||||
<p>A context menu with nested submenus will appear</p>
|
||||
</div>
|
||||
</dees-panel>
|
||||
<dees-panel heading="Component-Specific Context Menu">
|
||||
<dees-button style="margin: 20px;" @contextmenu=${(eventArg: MouseEvent) => {
|
||||
DeesContextmenu.openContextMenuWithOptions(eventArg, [
|
||||
{
|
||||
name: 'Button Actions',
|
||||
iconName: 'mousePointer',
|
||||
action: async () => {}, // Parent items with submenus still need an action
|
||||
submenu: [
|
||||
{ name: 'Click', iconName: 'mouse', action: async () => console.log('Click action') },
|
||||
{ name: 'Double Click', iconName: 'zap', action: async () => console.log('Double click') },
|
||||
{ name: 'Long Press', iconName: 'clock', action: async () => console.log('Long press') },
|
||||
]
|
||||
},
|
||||
},
|
||||
]);
|
||||
}}>
|
||||
<h3>Right-click anywhere in this area</h3>
|
||||
<p>A context menu will appear with various options</p>
|
||||
</div>
|
||||
{
|
||||
name: 'Button State',
|
||||
iconName: 'toggleLeft',
|
||||
action: async () => {}, // Parent items with submenus still need an action
|
||||
submenu: [
|
||||
{ name: 'Enable', iconName: 'checkCircle', action: async () => console.log('Enable') },
|
||||
{ name: 'Disable', iconName: 'xCircle', action: async () => console.log('Disable') },
|
||||
{ divider: true },
|
||||
{ name: 'Show', iconName: 'eye', action: async () => console.log('Show') },
|
||||
{ name: 'Hide', iconName: 'eyeOff', action: async () => console.log('Hide') },
|
||||
]
|
||||
},
|
||||
{ divider: true },
|
||||
{
|
||||
name: 'Disabled Action',
|
||||
iconName: 'ban',
|
||||
disabled: true,
|
||||
action: async () => console.log('This should not run'),
|
||||
},
|
||||
{
|
||||
name: 'Properties',
|
||||
iconName: 'settings',
|
||||
action: async () => console.log('Button properties'),
|
||||
},
|
||||
]);
|
||||
}}>Right-click on this button</dees-button>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel heading="Advanced Context Menu Example">
|
||||
<div class="demo-area" @contextmenu=${(eventArg: MouseEvent) => {
|
||||
DeesContextmenu.openContextMenuWithOptions(eventArg, [
|
||||
{
|
||||
name: 'Format',
|
||||
iconName: 'type',
|
||||
action: async () => {}, // Parent items with submenus still need an action
|
||||
submenu: [
|
||||
{ name: 'Bold', iconName: 'bold', shortcut: 'Cmd+B', action: async () => console.log('Bold') },
|
||||
{ name: 'Italic', iconName: 'italic', shortcut: 'Cmd+I', action: async () => console.log('Italic') },
|
||||
{ name: 'Underline', iconName: 'underline', shortcut: 'Cmd+U', action: async () => console.log('Underline') },
|
||||
{ divider: true },
|
||||
{ name: 'Font Size', iconName: 'type', action: async () => console.log('Font size menu') },
|
||||
{ name: 'Font Color', iconName: 'palette', action: async () => console.log('Font color menu') },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Transform',
|
||||
iconName: 'shuffle',
|
||||
action: async () => {}, // Parent items with submenus still need an action
|
||||
submenu: [
|
||||
{ name: 'To Uppercase', iconName: 'arrowUp', action: async () => console.log('Uppercase') },
|
||||
{ name: 'To Lowercase', iconName: 'arrowDown', action: async () => console.log('Lowercase') },
|
||||
{ name: 'Capitalize', iconName: 'type', action: async () => console.log('Capitalize') },
|
||||
]
|
||||
},
|
||||
{ divider: true },
|
||||
{
|
||||
name: 'Delete',
|
||||
iconName: 'trash2',
|
||||
action: async () => console.log('Delete')
|
||||
}
|
||||
]);
|
||||
}}>
|
||||
<h3>Advanced Nested Menu Example</h3>
|
||||
<p>This shows deeply nested submenus and various formatting options</p>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-button @contextmenu=${(eventArg: MouseEvent) => {
|
||||
DeesContextmenu.openContextMenuWithOptions(eventArg, [
|
||||
{
|
||||
name: 'Button Action 1',
|
||||
iconName: 'play',
|
||||
action: async () => {
|
||||
console.log('Button action 1');
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Button Action 2',
|
||||
iconName: 'pause',
|
||||
action: async () => {
|
||||
console.log('Button action 2');
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Disabled Action',
|
||||
iconName: 'ban',
|
||||
disabled: true,
|
||||
action: async () => {
|
||||
console.log('This should not run');
|
||||
},
|
||||
},
|
||||
{ divider: true },
|
||||
{
|
||||
name: 'Settings',
|
||||
iconName: 'settings',
|
||||
action: async () => {
|
||||
console.log('Settings');
|
||||
},
|
||||
},
|
||||
]);
|
||||
}}>Right-click on this button for a different menu</dees-button>
|
||||
|
||||
<div style="margin-top: 20px;">
|
||||
<h4>Static Context Menu (always visible):</h4>
|
||||
<dees-panel heading="Static Context Menu (Always Visible)">
|
||||
<dees-contextmenu
|
||||
class="withMargin"
|
||||
.menuItems=${[
|
||||
{
|
||||
name: 'New File',
|
||||
iconName: 'filePlus',
|
||||
shortcut: 'Cmd+N',
|
||||
action: async () => console.log('New file'),
|
||||
name: 'Project',
|
||||
iconName: 'folder',
|
||||
action: async () => {}, // Parent items with submenus still need an action
|
||||
submenu: [
|
||||
{ name: 'New Project', iconName: 'folderPlus', shortcut: 'Cmd+Shift+N', action: async () => console.log('New project') },
|
||||
{ name: 'Open Project', iconName: 'folderOpen', shortcut: 'Cmd+Shift+O', action: async () => console.log('Open project') },
|
||||
{ divider: true },
|
||||
{ name: 'Recent Projects', iconName: 'clock', action: async () => {}, submenu: [
|
||||
{ name: 'Project Alpha', action: async () => console.log('Open Alpha') },
|
||||
{ name: 'Project Beta', action: async () => console.log('Open Beta') },
|
||||
{ name: 'Project Gamma', action: async () => console.log('Open Gamma') },
|
||||
]},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Open File',
|
||||
iconName: 'folderOpen',
|
||||
shortcut: 'Cmd+O',
|
||||
action: async () => console.log('Open file'),
|
||||
},
|
||||
{
|
||||
name: 'Save',
|
||||
iconName: 'save',
|
||||
shortcut: 'Cmd+S',
|
||||
action: async () => console.log('Save'),
|
||||
name: 'Tools',
|
||||
iconName: 'tool',
|
||||
action: async () => {}, // Parent items with submenus still need an action
|
||||
submenu: [
|
||||
{ name: 'Terminal', iconName: 'terminal', shortcut: 'Cmd+T', action: async () => console.log('Terminal') },
|
||||
{ name: 'Console', iconName: 'monitor', shortcut: 'Cmd+K', action: async () => console.log('Console') },
|
||||
{ divider: true },
|
||||
{ name: 'Extensions', iconName: 'package', action: async () => console.log('Extensions') },
|
||||
]
|
||||
},
|
||||
{ divider: true },
|
||||
{
|
||||
name: 'Export',
|
||||
iconName: 'download',
|
||||
action: async () => console.log('Export'),
|
||||
},
|
||||
{
|
||||
name: 'Import',
|
||||
iconName: 'upload',
|
||||
action: async () => console.log('Import'),
|
||||
name: 'Preferences',
|
||||
iconName: 'sliders',
|
||||
action: async () => console.log('Preferences'),
|
||||
},
|
||||
]}
|
||||
></dees-contextmenu>
|
||||
</div>
|
||||
</dees-panel>
|
||||
</div>
|
||||
`;
|
||||
Reference in New Issue
Block a user