Announcement

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

    Improving Menu focus with a mask?

    Hello, please modify the calendarMobileSample like this:

    Code:
    isc.Calendar.create({
        ID: "eventCalendar",
        data: eventData
    });
    
    isc.Menu.create({
        ID: "menu",
        autoDraw: false,
        showShadow: true,
        shadowDepth: 10,
        placement: "fillScreen",
        data: [
            {title: "Recent Documents", icon: "[SAMPLE]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: "[SAMPLE]icons/16/export1.png", submenu: [
                {title: "XML"},
                {title: "CSV"},
                {title: "Plain text"}
            ]},
            {isSeparator: true},
            {title: "Print", enabled: false, keyTitle: "Ctrl+P", icon: "[SAMPLE]icons/16/printer3.png"}
        ]
    });
    
    var menuButton = isc.MenuButton.create({
        ID: "menuButton",
        autoDraw: false,
        title: "File",
        width: 100,
        menu: menu
    });
    
    isc.VStack.create({
        height: "100%", width: "100%",
        members: [menuButton, eventCalendar]
    });
    and then open the Menu:

    Click image for larger version

Name:	2024-08-10 21.30.50.jpg
Views:	53
Size:	51.8 KB
ID:	273245

    I feel that, the lesser the menu options, the more the user could get distracted by the "background" under the Menu.
    I think it would be better if it was masked, at least with a semi-transparent mask.
    What do you think?

    I noticed that I might be able to tweak this using navStackProperties, but I wanted to check with you as I believe this could be a visual enhancement.



    #2
    There's a distinction in the framework between a "hard mask" (actually blocks clicks, or at least the first click) and a "soft mask" (the click goes through, and dismisses whatever the pop-up is at the same time).

    Menus are soft masks, so we generally don't want to show a visual block over the rest of the screen, as that would suggest that the click is not going to go through.

    You would of course switch to a hard mask, like a SelectItem, as an alternative to a Menu.

    Comment


      #3
      Hello, but actually the Menus on a handset device won't dismiss when you touch on the mask :confused:

      Comment


        #4
        They won't actually dismiss when placement: "fillScreen", so even on desktop, in a sample like this https://www-demos.smartclient.com/sm...izeIncrease=10

        Comment

        Working...
        X