[Question]: How to change device from dropdown to icon

[ghost]

I'm trying to replace the dropdown with icon for the devices following the example in the newsletter template yet it doesn't work.

//custom commands
    // Turn off default devices select and create new one
    let pnm = editor.Panels;
    editor.getConfig().showDevices = false;
    let devicePanel = pnm.addPanel({
        id: 'devices-c'
    });
    let deviceBtns = devicePanel.get('buttons');
    devicePanel.get('buttons').add([{
        id: 'deviceDesktop',
        command: 'set-device-desktop',
        className: 'fa fa-desktop',
        attributes: {title: 'Desktop'},
        active: 1,
    }, {
        id: 'deviceTablet',
        command: 'set-device-tablet',
        className: 'fa fa-tablet',
        attributes: {title:'Tablet'},
    }, {
        id: 'deviceMobile',
        command: 'set-device-mobile',
        className: 'fa fa-mobile',
        attributes: {title: 'Mobile'},
    }])

[artf]

You should also create those commands https://github.com/artf/grapesjs-preset-newsletter/blob/04f1eb21c1ae45f8d2b2912323e79354d8e72f18/src/commands.js#L30-L44

[umerrinayat]

@petervandeput https://github.com/artf/grapesjs/issues/1507#issuecomment-496280105 After grapesjs init.

editor.getConfig().showDevices = 0;
editor.Panels.addPanel({ id: "devices-c" }).get("buttons").add([
{ id: "set-device-desktop", command: function(e) { return e.setDevice("Desktop") }, className: "fa fa-desktop", active: 1},
{ id: "set-device-tablet", command: function(e) { return e.setDevice("Tablet") }, className: "fa fa-tablet" },
{ id: "set-device-mobile", command: function(e) { return e.setDevice("Mobile portrait") }, className: "fa fa-mobile" },
]);

// Panel should re render again otherwise 
// New button will not be shown on device panel
editor.Panels.render();

[gunslingor]

Can you do it in init as well or does it have to be after init? Something is off with mine. Everything works except that the device buttons will not change colors... more precisely, I realized they are changing colors but are then changing back to quickly for the eye. I think these 3 buttons seem to be enabled by default with the set-device-desktop plugin, but I still get this behavior when I specify nothing for it.

Possible Answer: I think you can, but when using the webpage-presents maybe you cannot?

Also, is there a slack channel for Grapes?

[Phil-B]

The above examples didn't work for me in version 0.17.28 (I presume the API has changed). This worked:

    editor.getConfig().showDevices = 0;

    editor.Panels.addPanel({
        id: 'devices', buttons: [
            { id: "set-device-desktop", command: function (e) { return e.setDevice("Desktop") }, className: "fa fa-desktop", active: 1 },
            { id: "set-device-tablet", command: function (e) { return e.setDevice("Tablet") }, className: "fa fa-tablet" },
            { id: "set-device-mobile", command: function (e) { return e.setDevice("Mobile portrait") }, className: "fa fa-mobile" }
        ]
    });

[a-szczepan]

I use version 0.19.5 and I had to rerender the whole editor (not only Panels) after adding the button. editor.Panels.addButton('options', { id: 'sample-btn' }); editor.render();