Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

  • 12.0p IconMenuButton state handling issues

    Hi Isomorphic,

    please see this online testcase (v12.0p_2019-03-11):
    Code:
    isc.Menu.create({
        ID: "menu",
        autoDraw: false,
        showShadow: true,
        shadowDepth: 10,
        data: [
            {title: "New", keyTitle: "Ctrl+N", icon: "icons/16/document_plain_new.png"},
            {title: "Open", keyTitle: "Ctrl+O", icon: "icons/16/folder_out.png"},
            {isSeparator: true},
            {title: "Save", keyTitle: "Ctrl+S", icon: "icons/16/disk_blue.png"},
            {title: "Save As", icon: "icons/16/save_as.png"},
            {isSeparator: true},
            {title: "Recent Documents", icon: "icons/16/folder_document.png", submenu: [
                {title: "data.xml", checked: true},
                {title: "Component Guide.doc"},
                {title: "SmartClient.doc", checked: true},
                {title: "AJAX.doc"}
            ]},
            {isSeparator: true},
            {title: "Export as...", icon: "icons/16/export1.png", submenu: [
                {title: "XML"},
                {title: "CSV"},
                {title: "Plain text"}
            ]},
            {isSeparator: true},
            {title: "Print", enabled: false, keyTitle: "Ctrl+P", icon: "icons/16/printer3.png"}
        ]
    });
    
    var menuButton = isc.IconMenuButton.create({
        ID: "menuButton",
        backgroundColor: "lightgray",
        autoDraw: false,
        title: "File",
        width: 100,
        menu: menu,
        // icon: "http://lms.localhost:8080/lms/lms/sc/skins/Tahoe/images/LT3/flags/flag.png",
        icon: "icons/16/icon_add_files.png",
        showRollOverIcon: true,
        showRollOver: true,
        showMenuOnClick: true,
    
    });
    
    var menuButton2 = isc.IconMenuButton.create({
        ID: "menuButton2",
        backgroundColor: "lightgray",
        autoDraw: false,
        title: "File 2",
        width: 100,
        menu: menu,
        // icon: "http://lms.localhost:8080/lms/lms/sc/skins/Tahoe/images/LT3/flags/flag.png",
        icon: "icons/16/icon_add_files.png",
        showRollOverIcon: true,
        showRollOver: true,
        showMenuOnClick: true,
    
    });
    
    
    isc.HStack.create({
        width: "100%", membersMargin: 10,
        members: [menuButton, menuButton2 ]
    });
    Click image for larger version

Name:	Icon not reappearing.gif
Views:	1
Size:	130.4 KB
ID:	257144

    As you can see, there are some problems with icon display / change / change back. I know that one file is missing (see here for an idea how to make debugging such things more easy)
    IMHO the icon of the button should also be in the state the button is in.
    Also, there are tabbing issues. I can't seen to tab from the 1st button to the 2nd one.

    Best regards
    Blama

  • #2
    The real problem here is that IconButtons are really intended for use in Ribbons, which handle some aspects of sizing and titling, and IconButtons are transparent transparent and borderless by default, like similar toolstrip buttons - see the id=ribbonBar sample in the showcase for expected behavior there.

    That said - there were two bugs here:

    1) The title (which includes the icons in this widget) was not always being updated when state changed

    2) there was a missing iconButtonFocused instance in the skins - the items were being selected, so you *could* tab between them and press Spacebar to open the menus, but there was no visible focused border

    Those are both fixed for tomorrow's builds.

    Note that, since IconButtons are transparent and borderless, you might want to just set baseStyle: "button", if you want to use them outside of a Ribbon and have them look like other buttons.

    Comment


    • #3
      Hi Isomorphic,

      thanks, I'll have a look at it then tomorrow, also at baseStyle: "button".

      What is the suggested best practice for the usecase "non-Ribbon button with icon that has a menu"? What we are doing plus baseStyle: "button"? Something else?

      Thank you & Best regards
      Blama

      Comment


      • #4
        There's no single best practice here. It's a matter of what appearance you prefer and the context in which you're placing the control.

        Comment

        Working...
        X