sauer/bfa-dryer-design
1
0
Fork 0
mirror of http://10.0.2.1:3031/sauer/bfa-dryer-design.git synced 2026-06-30 13:06:42 +10:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix GrapesJS panels: use default layout, add device buttons

Browse Source
This commit is contained in:
Richard Sauer 2026-04-08 17:08:16 +10:00
parent 1831759563
commit 73705bdad7
1 changed files with 9 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
templates/editor.html
View File

@ -130,11 +130,7 @@ const editor = grapesjs.init({
{id: 'desktop', name: 'Desktop (Full)', width: ''}, {id: 'desktop', name: 'Desktop (Full)', width: ''},
] ]
}, },
panels: {defaults: []},
layerManager: {appendTo: '.gjs-pn-views-container'},
selectorManager: {appendTo: '.gjs-pn-views-container'},
styleManager: { styleManager: {
appendTo: '.gjs-pn-views-container',
sectors: [ sectors: [
{ {
name: 'Typography', name: 'Typography',
@ -199,51 +195,22 @@ const editor = grapesjs.init({
} }
] ]
}, },
traitManager: {appendTo: '.gjs-pn-views-container'}, blockManager: {blocks: []},
blockManager: {
appendTo: '.gjs-pn-views-container',
blocks: []
},
canvas: { canvas: {
styles: ['static/hmi-canvas.css'], styles: ['static/hmi-canvas.css'],
} }
}); });
// ══════════════════════════════════════════════════════ // Use GrapesJS default panels — they include blocks, styles, layers, traits
// Panels: Views (Blocks, Styles, Layers, Traits) // Just add device switching buttons
// ══════════════════════════════════════════════════════ editor.Panels.addButton('options', {
editor.Panels.addPanel({ id: 'device-tab5', command: e => e.setDevice('tab5'), label: 'Tab5', attributes: {title: 'Tab5 1280x720'}
id: 'views',
el: '.gjs-pn-views',
buttons: [
{id: 'open-blocks', command: 'open-blocks', active: true, label: 'Blocks', attributes: {title: 'HMI Components'}},
{id: 'open-sm', command: 'open-sm', label: 'Style', attributes: {title: 'Style Manager'}},
{id: 'open-layers', command: 'open-layers', label: 'Layers', attributes: {title: 'Layers'}},
{id: 'open-tm', command: 'open-tm', label: 'Traits', attributes: {title: 'Component Settings'}},
]
}); });
editor.Panels.addButton('options', {
// Device buttons id: 'device-schneider', command: e => e.setDevice('schneider'), label: 'HMIDT', attributes: {title: 'Schneider 1280x800'}
editor.Panels.addPanel({
id: 'devices',
el: '.gjs-pn-devices-c',
buttons: [
{id: 'device-tab5', command: e => e.setDevice('tab5'), label: 'Tab5', active: true},
{id: 'device-schneider', command: e => e.setDevice('schneider'), label: 'Schneider'},
{id: 'device-desktop', command: e => e.setDevice('desktop'), label: 'Full'},
]
}); });
editor.Panels.addButton('options', {
// Toolbar commands id: 'device-full', command: e => e.setDevice('desktop'), label: 'Full', attributes: {title: 'Full width'}
editor.Panels.addPanel({
id: 'basic-actions',
el: '.gjs-pn-panel .gjs-pn-commands',
buttons: [
{id: 'undo', command: 'core:undo', label: 'Undo'},
{id: 'redo', command: 'core:redo', label: 'Redo'},
{id: 'preview', command: 'core:preview', label: 'Preview'},
{id: 'clear', command: 'core:canvas-clear', label: 'Clear'},
]
}); });
// ══════════════════════════════════════════════════════ // ══════════════════════════════════════════════════════