webOS command menu icons

Avishkar Autar · Oct 30 2010 · webOS

The list of standard icons for the command menu buttons aren’t found anywhere in the developer documentation.

webOS command menu

h/t to Jason Robitaille for his post on the precentral.net forums with the list of icons pulled from /usr/palm/frameworks/mojo/submissions/175.7/stylesheets/global-menus.css

/* Example Icons */

.palm-menu-icon.back { background-image: url(../images/menu-icon-back.png); }
.palm-menu-icon.forward { background-image: url(../images/menu-icon-forward.png); }
.palm-menu-icon.refresh { background-image: url(../images/menu-icon-refresh.png); }
.palm-menu-icon.search { background-image: url(../images/menu-icon-search.png); }
.palm-menu-icon.new { background-image: url(../images/menu-icon-new.png); }
.palm-menu-icon.stop { background-image: url(../images/menu-icon-stop.png); }
.palm-menu-icon.attach { background-image: url(../images/menu-icon-attach.png); }
.palm-menu-icon.compose { background-image: url(../images/menu-icon-compose.png); }
.palm-menu-icon.conversation { background-image: url(../images/menu-icon-conversation.png); }
.palm-menu-icon.delete { background-image: url(../images/menu-icon-delete.png); }
.palm-menu-icon.file { background-image: url(../images/menu-icon-file.png); }
.palm-menu-icon.forward-email { background-image: url(../images/menu-icon-forward-email.png); }
.palm-menu-icon.info { background-image: url(../images/menu-icon-info.png); }
.palm-menu-icon.priority { background-image: url(../images/menu-icon-priority.png); }
.palm-menu-icon.reply-all { background-image: url(../images/menu-icon-reply-all.png); }
.palm-menu-icon.reply { background-image: url(../images/menu-icon-reply.png); }
.palm-menu-icon.save { background-image: url(../images/menu-icon-save.png); }
.palm-menu-icon.send { background-image: url(../images/menu-icon-send.png); }
.palm-menu-icon.sync { background-image: url(../images/menu-icon-sync.png); }
.palm-menu-icon.edit-profile { background-image: url(../images/menu-icon-edit-profile.png); }
.palm-menu-icon.make-vip { background-image: url(../images/menu-icon-make-vip.png); }
.palm-menu-icon.new-contact { background-image: url(../images/menu-icon-new-contact.png); }
.palm-menu-icon.remove-vip { background-image: url(../images/menu-icon-remove-vip.png); }
.palm-menu-icon.down { background-image: url(../images/menu-icon-down.png); }

Use the name after “.palm-menu-icon.” when setting up the command menu model.

this.cmdMenuModel = {
visible: true,
items: [
{items:[{label: $L('Add'), icon:'new', command:'cmd-add'}]},
{items:[{label: $L('Refresh'), icon:'refresh', command:'cmd-refresh'}]}
]
};

7

You can follow any responses to this entry through the RSS 2.0 feed.

You can leave a response, or trackback from your own site.

7 Comments

  1. Ganesh
    May 9 2011 · Link

    Hi!
    Its me again.
    I have a small issue with command menu.
    I am using the following code.

    this.controller.setupWidget(Mojo.Menu.commandMenu,
    this.attributes = {
    spacerHeight: 0,
    menuClass: ‘no-fade’
    },
    this.model = {
    visible: true,
    items: [
    {icon: “back”, command: “do-Previous”},
    { icon: ‘forward’, command: ‘do-Next’}
    ]
    }
    );

    but the back icon is repeated many times how to solve this problem ?
    Kindly help.
    Thanks.

  2. Avishkar Autar
    May 9 2011 · Link

    I don’t see a problem with the code you posted.
    I ran it and it created the command menu correctly.

    Did you override any CSS values? (specifically, check width and background-repeat properties)

  3. Ganesh
    Jul 4 2011 · Link

    Hello!!

    I have a little problem with using command menu.
    I want to use command menu in my scene which i am showing in my showdialog scene template .
    But it is not showing.I don’t know why ?
    Can you please help??
    I want to have command menu in the scene template of my showdailog.
    Your help would be greatly appreciated.

    Thanks!!

  4. Avishkar Autar
    Jul 7 2011 · Link

    I’ll need more information to help.
    There could be a number of reasons it isn’t showing up. Also be sure to check the log.

  5. Ganesh
    Jul 14 2011 · Link

    Thanks for your reply.
    i am using the following code in the assistant page of the showdialog scenetemplate

    this.cmdMenuModel = {
    visible: true,
    items: [
    {
    items: [
    {label: $L(‘Back’), icon:’back’, command:’back’},
    {label: $L(‘Forward’), icon:’forward’, command:’fwd’}
    ]
    },
    {
    items: [
    {label: $L(‘Back’), command:’back’},
    {label: $L(‘Fwd’), command:’fwd’}
    ]
    }
    ]
    };
    this.controller.setupWidget(Mojo.Menu.commandMenu, undefined, this.cmdMenuModel);

    But it is not showing .
    I want to show the command menu in my showdialog scene.
    If you can help in any way, iwould be really glad.
    Thanks again

  6. Avishkar Autar
    Jul 18 2011 · Link

    Few things:

    1. Trying setting attributes for the menu:

    this.cmdMenuAttr = { menuClass: ‘no-fade’ };
    this.controller.setupWidget(Mojo.Menu.commandMenu, this.cmdMenuAttr, this.cmdMenuModel);

    2. Make sure this is actually a reference to the assistant, or this.controller will be undefined.

    3. Not familiar with showdialog scenetemplate, are you trying to put this menu within a dialog? I’m not sure if that’s possible.

  7. Ganesh
    Jul 19 2011 · Link

    Thanks for your reply, yes i am trying to put the menu withing the dialog.
    Anyway i will try your suggestion.
    Thanks again.