Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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'},
    }])

Issue Analytics

State:
Created 4 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

11reactions

Phil-Bcommented, Nov 3, 2021

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" }
        ]
    });

1reaction

umerrinayatcommented, Jan 31, 2020

@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();