MenuItem.icon doesn't work on Windows 7

Bastian82 commented 11 years ago

After setting :

FileItem_submenu.append(new gui.MenuItem(

{ 

    type: 'normal',
    label: 'Exit',
    icon: 'img\exit.png',
    click: function () {

        gui.Window.get().close(true);

    }

}));

FileItem.submenu = FileItem_submenu;

Icon doesn't show in submenu, next to the label.

richardcypher commented 11 years ago

I cannot reproduce it with the code below,

<html>
<head>
  <title> Menu </title>
</head>
<body>
<script>
// Load native UI library
var gui = require('nw.gui');

// Create an empty menu

// Get the current window
var win = gui.Window.get();

// Create a menubar for window menu
var menubar = new gui.Menu({ type: 'menubar' });

// Create a menuitem
var sub1 = new gui.Menu();

sub1.append(new gui.MenuItem({
    type: 'normal',
  label: 'Exit',
  icon: 'pic.png',
  click: function () {
      gui.Window.get().close(true);
  }
}));

// You can have submenu!
menubar.append(new gui.MenuItem({ label: 'Sub1', submenu: sub1}));

//assign the menubar to window menu
win.menu = menubar;

</script>  
</body>
</html>

I can see the icon shows next to the label, could you paste more code so I can reproduce it? I'm using node-webkit-v0.7.3 on windows 7

Bastian82 commented 11 years ago

native_gui.js:



 // Load native UI library
var gui = require('nw.gui');

var exit_app = 0;

// Create an empty menu bar
var MenuBar = new gui.Menu({
    type:   'menubar'
});

// Create a tray icon
var tray = new gui.Tray({ 
    title: 'TicketHero', 
    icon: 'img/tickethero.png', 
    tooltip: 'TicketHero'
    });

// Create and menu for tray icon
var Tray_Menu = new gui.Menu();

Tray_Menu.append(new gui.MenuItem({

```
            label: "Open",
            click: function () {

                gui.Window.get().show();

            }

            }));
```

Tray_Menu.append(new gui.MenuItem({

```
            label: "Exit",
            click: function () {

                gui.Window.get().close(true);

            }

            }));                
```

//Append menu to tray icon
tray.menu = Tray_Menu;              

var AboutItem = new gui.MenuItem({
        label: 'About',
        click: function () {

```
        var win = gui.Window.open('about.html', {
            title: 'About',
            position: 'center',
            width: 300,
            height: 250,
            resizable: false, 
            toolbar: false,
            icon: 'img/tickethero.png'
            });

    }
```

});

var FileItem = new gui.MenuItem({
        label: 'File',
        click: function () {

```
            FileItem_submenu.popup();

            }
});
```

var ViewItem = new gui.MenuItem({
        label: 'View',
        click: function () {

```
        ViewItem_submenu.popup();

    }

});
```

// Append all Items to Menu bar item
MenuBar.append(FileItem);
MenuBar.append(ViewItem);
MenuBar.append(AboutItem);

var FileItem_submenu = new gui.Menu();

FileItem_submenu.append(new gui.MenuItem(

{ 
        type: "normal",
        label: 'Export',
        icon: 'img\exportcsv.png',
        click: function (Table) {

```
    var csv_str = Table.export_csv();

    }

}));
```

FileItem_submenu.append(new gui.MenuItem(

```
{ 

    type: 'normal',
    label: 'Exit',
    icon: 'img\exit.png',
    click: function () {

        gui.Window.get().close(true);

    }

}));    
```

FileItem.submenu = FileItem_submenu;

var ViewItem_submenu = new gui.Menu();
ViewItem_submenu.append(new gui.MenuItem(

```
{

    label: 'Refresh',
    click: function () {

        messages_section = document.getElementById("messages");

        loading_text = document.createElement("p");

        loading_text.setAttribute('id', 'loading');

        loading_text.innerHTML = 'Loading data...';

        messages_section.appendChild(loading_text);

        //odswiez tabele
        refresh_table();

    },
    icon: "img\refresh.png"

}));
```

ViewItem.submenu = ViewItem_submenu;

//Hide window on startup
gui.Window.get().hide();

//Assign menubar to window
gui.Window.get().menu = MenuBar;

//Hide window on close action instead of quit application

gui.Window.get().on('close', function () {

```
    this.hide();
```

});



and html file:

``` html5



 
  
  
  
  
 
 
  
  Search:
  
  
  
  
   Main queue
   
   
   
  
  
  



```

richardcypher commented 11 years ago

@Bastian82 , I can reproduce it with your code, there is a workaround for this, if you move

MenuBar.append(FileItem);
MenuBar.append(ViewItem);
MenuBar.append(AboutItem);

after appending menuitems to these menus and before gui.Window.get().menu = MenuBar;, the icon should show by then.

Bastian82 commented 11 years ago

OK, thanks. Now it is working. Worth to mention that if you will use backslash in your path it will not work too in Windows

icon: 'img\exit.png'

I don't know it is the same on Linux, but if it is, it might be a bit confusing.

richardcypher commented 11 years ago

have you tried double backslashes?

Bastian82 commented 11 years ago

With double backslashes works fine. OK I'm closing ticket then. Thanks.

katanacrimson commented 11 years ago

I'd suggest using path.normalize() in the future for portable filepaths.

nwjs / nw.js

MenuItem.icon doesn't work on Windows 7 #1098

Main queue