[Question] Replace Devices icon ASP.net / Javascript
Question
Bonjour,
I want replace icon for selected devices like in preset-webpage but i don't understand why this code doesn't work and nothing appear on panel :
var panelDevices = editor.Panels.addPanel({ id: 'devices-c', visible: 'true' });
var btnresult = editor.Panels.addButton('devices-c', [{
id: 'set-device-desktop',
command: 'set-device-desktop',
className: 'fa fa-desktop',
active: 1,
attributes: { title: 'Desktop' }
}, {
id: 'set-device-tablet',
command: 'set-device-tablet',
className: 'fa fa-tablet',
attributes: { title: 'Tablette' }
},
{
id: 'set-device-mobile',
command: 'set-device-mobile',
className: 'fa fa-mobile',
attributes: { title: 'Mobile' }
},
]);
panelDevices.render();
editor.Commands.add('set-device-desktop', {
run: function (editor, sender) {
editor.setDevice('Desktop');;
}
});
editor.Commands.add('set-device-tablet', {
run: function (editor, sender) {
editor.setDevice('Tablet');;
}
});
editor.Commands.add('set-device-mobile', {
run: function (editor, sender) {
editor.setDevice('Mobile portrait');;
}
});
Can you help me ?
Merci et bonne journée.
Answers (3)
quick and ugly, less than 24 hours working with this right now, i didn't want to totally redo the panels so i did this:
Editor.Panels.addPanel({
id: 'devices-b',
visible: true,
buttons: [{
id: 'set-device-desktop',
command: function (Editor, Model, Options) { Editor.setDevice('Desktop') },
label: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" width="24" height="24" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M21 15.998H3v-12h18m0-2H3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7v2H8v2h8v-2h-2v-2h7a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2z" fill="#ffffff"/></svg>',
active: true
}, {
id: 'set-device-tablet',
command: function (Editor, Model, Options) { Editor.setDevice('Tablet') },
label: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" width="24" height="24" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 408 512"><path d="M352 0q22 0 37.5 15.5T405 53v406q0 22-15.5 37.5T352 512H53q-22 0-37.5-15.5T0 459V53q0-22 15.5-37.5T53 0h299zM202.5 491q13.5 0 23-9.5t9.5-23-9.5-22.5-23-9-22.5 9-9 22.5 9 23 22.5 9.5zM363 405V64H43v341h320z" fill="#ffffff"/></svg>'
}, {
id: 'set-device-mobile',
command: function (Editor, Model, Options) { Editor.setDevice('Mobile portrait') },
label: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" width="24" height="24" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 768 1280"><path d="M464 1152q0-33-23.5-56.5T384 1072t-56.5 23.5T304 1152t23.5 56.5T384 1232t56.5-23.5T464 1152zm208-160V288q0-13-9.5-22.5T640 256H128q-13 0-22.5 9.5T96 288v704q0 13 9.5 22.5t22.5 9.5h512q13 0 22.5-9.5T672 992zM480 144q0-16-16-16H304q-16 0-16 16t16 16h160q16 0 16-16zm288-16v1024q0 52-38 90t-90 38H128q-52 0-90-38t-38-90V128q0-52 38-90t90-38h512q52 0 90 38t38 90z" fill="#ffffff"/></svg>'
}]
});
Editor.on('load', function () {
Editor.Panels.removePanel('devices-c');
Editor.Panels.getButton('views', 'open-blocks').set('active', true);
});
@ogousseau avoid panelDevices.render() and check your panel in the inspector, probably it's just behind some other one
Super merci !!!!!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1602
[QUESTIONS] - Panel visibility
Hey @artf , How have you been? Quick question: a Panel has a property called visible. I'm trying to set it to false but nothing happens. I'...
Issue #1031
[Question] Custom icons
I want to add a custom icon to the grapesjs panel at the top of the editor page. Is it possible to do this with any SVG or with text? If so...
Issue #1215
[Question]Adding Google Font doesn't work
Bonjour, I try to add Google Font : When i click on Typography, script stop in Grapes.jp show: function show() { this.$el.addClass(this.pfx...
Issue #1254
addType in domcomponent for html conditionals doesn't work grapesjs 0.10.7 version
Hi Artur, First of all, thank you for sharing such a great project :) I want to tell you a problem that I have experienced. You commented b...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.