Disabled MenuButton in Toolstrip has same color as an enabled Button

[SimonF]

Hi,
Creating a toolstrip with two buttons and 1 menuItem and disabling one button and the menuItem does look a bit weird.
The menubutton keeps the color blue, but should also be grey like the disabled button.


Version: SmartClient_v111p_2017-07-30_Pro
Browser: All
Skin: Tahoe
Density: Medium



Code for reproduction:

Canvas.resizeControls(4);
Canvas.resizeFonts(2);
isc.ToolStrip.create({
    "width": "100%",
    "hideUsingDisplayNone": false,
    "layoutLeftMargin": 3,
    "layoutRightMargin": 3,
    "leaveScrollbarGap": false,
    "members":
    [
        isc.Button.create({
            "ID": "deleteButton_84",
            "disabled": false,
            "width": 160,
            "title": "a enabled button",
            "showDisabledIcon": false
        }),
        isc.Button.create({
            "ID": "deleteButton_84",
            "disabled": true,
            "width": 160,
            "title": "a disabled button",
            "showDisabledIcon": false
        }),
        isc.MenuButton.create({
            "ID": "rotateButton_84",
            "width": 160,
            "disabled": true,

            "title": "a disabled menuButton",
            "icon": "https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Boss.png",
            "showDisabledIcon": false,
            menu: isc.Menu.create({
                "ID": "rotateMenu_84",

                "members":
                [],
                "data":
                [{
                        "icon": "https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Boss.png",
                        "enabled": false,
                        "title": "Test1"
                    }, {
                        "icon": "https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Boss.png",
                        "enabled": false,
                        "title": "Test1"
                    }
                ]
            })
        })
    ]
})

best regards

[SimonF]

It seems the update of has already changed the color of the MenuButton.
But it has also changed the color of the normal disabled button.
Changing that has also affected the legibility of the text on the button, so its very hard to read.
The gray seems to be a little bit too light.

For reproduction the same code as above can be used

SmartClient_v111p_2017-08-01_Pro

SmartClient_v111p_2017-08-02_Pro


We do have a certain amount of icons in addition to the new Tahoe-Skin and most of our buttons have a corresponding icon.
Like the MenuItem the Icons on the Buttons are shown in white. Which was ok with the previous version, but with a lighter gray it looks some kind of weird. Maybe the icons should be dark-gray? But it seems there is no option to set a specific icon as disabeldIcon in the docs of the button (http://www.smartclient.com/smartclie...=class..Button).
With SmartClient_v111p_2017-08-01_Pro

With: SmartClient_v111p_2017-08-02_Pro


Also the Picker-Symbol (also in white) would be quite prettier if the disabled Button would be a bit darker.

[Isomorphic]

Hi Simon
Whether or not a disabled version of the icon for a button or menu button is determined by the "showDisabledIcon" property.
(In your original code snippet in the first post, you appear to be disabling this for most buttons).

If true, when the button is disabled, the icon displayed will have the suffix "disabled" appended to it (so if your icon was "icon.gif", it would attempt to load "icon_disabled.gif" when the button was disabled).

Regards
Isomorphic Software

[SimonF]

Thanks for the hint to "showDisabledIcon". I was aware that disabling this will show the white icon.
Sadly you didn't mentioned if there will be any change regarding the background-color of a disabled button.
With the new gray it's hard to see the disabled button. So having a disabled button into a row of enabled Buttons looks like a hole and forces the user to look, what there would be.
Also If your monitor is not good calibrated, you won't see any button.

See this for an example:


Best regards

[SimonF]

Thanks for the change,
Issue has been resolved in SmartClient_v111p_2017-08-04_Pro

Best regards

[SimonF]

This is also opened again with the latest release

SmartClient_v111p_2017-08-08_Pro:

SmartClient_v111p_2017-08-10_Pro;


Was this change on purpose?

[SimonF]

I would like to add 3 more issues in a similar example:
* a jumping of the menuPicker-icon
* a small 1 pixel jump of the MenuItem to the left when disabling
* a jump of the size of datepicker symbol
in the latest release SmartClient_v111p_2017-08-15_Pro.
Also the disabled MenuButton is blue, and should be gray like reported in the previous post.


Note: The red lines are for referencing the position.

Code:

Canvas.resizeControls(4);
Canvas.resizeFonts(2);
isc.ToolStrip.create({
    "width": "100%",
    "hideUsingDisplayNone": false,
    "layoutLeftMargin": 3,
    "layoutRightMargin": 3,
    "leaveScrollbarGap": false,
    "members":
    [
        isc.Button.create({
            "ID": "enabledButton",
            "disabled": false,
            "width": 160,
            "title": "a enabled button",
            "showDisabledIcon": false
        }), isc.ToolStripSeparator.create({
            "ID": "saveToolStripSeparator_15",
            "hideUsingDisplayNone": false
        }),
        isc.Button.create({
            "ID": "disabledButton",
            "disabled": true,
            "width": 160,
            "title": "a disabled button",
            "showDisabledIcon": false
        }),
        isc.MenuButton.create({
            "ID": "menuButton",
            "width": 160,
            "disabled": true,

            "title": "a disabled menuButton",
            "icon": "https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Boss.png",
            "showDisabledIcon": false,
            menu: isc.Menu.create({
                "ID": "rotateMenu_84",

                "members":
                [],
                "data":
                [{
                        "icon": "https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Boss.png",
                        "enabled": false,
                        "title": "Test1"
                    }, {
                        "icon": "https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Boss.png",
                        "enabled": false,
                        "title": "Test1"
                    }
                ]
            })
        }),

        isc.DynamicForm.create({
            "ID": "dateForm",
            "disabled": true,
            "fields":
            [{
                    "ID": "dateItem",
                    "name": "dateItem",
                    "title": "Date",
                    "type": "date",
                    "width": 110,
                    "iconWidth": 16,
                    "iconHeight": 16,
                    "textAlign": "left",
                    "readOnlyDisplay": "static",
                    "showIcons": true,
                    "useTextField": true,
                    "showChooserWeekPicker": true
                }
            ],
            "values": {}
        })
    ]
});
var theBoolean = true;
isc.Button.create({
    title: "toggle",
    top: 50,
    left: 10,
    click: function () {

        theBoolean = !theBoolean;
        if (theBoolean) {
            enabledButton.disable();
            disabledButton.disable();
            menuButton.disable();
            dateForm.disable();
        } else {
            enabledButton.enable();
            disabledButton.enable();
            menuButton.enable();
            dateForm.enable();
        }
    }
})

Bes regards

[Isomorphic]

The regression with disabled styling of buttons is now resolved. Please try the next nightly build dated August 16 or above.

Regards
Isomorphic Software

[Isomorphic]

The issue with the jumping date picker image has also been resolved in the nightly build dated August 16 or above.

Regards
Isomorphic Software

[SimonF]

Thanks for the fix, most of the reported issues are now fixed.

In the latest build SmartClient_v111p_2017-08-16_Pro there seem to be 2 bugs.
Both are reproducable:
Version: SmartClient_v111p_2017-08-16_Pro
Browser: All tested browsers
* Firefox 54.0.1 (32-Bit),
* Chrome Version 60.0.3112.90 (64-Bit)
* IE 11.0.9600.18738
Skin: Tahoe
Density: Medium
Plattform: Windows 7 Pro with latest patches

1. The picker-symbol on the MenuButton is jumping when enabling and disabling the button.

code:

Canvas.resizeControls(4);
Canvas.resizeFonts(2);
isc.ToolStrip.create({
    "width": "100%",
    "hideUsingDisplayNone": false,
    "layoutLeftMargin": 3,
    "layoutRightMargin": 3,
    "leaveScrollbarGap": false,
    "members":
    [
        isc.Button.create({
            "ID": "enabledButton",
            "disabled": false,
            "width": 160,
            "title": "a enabled button",
            "showDisabledIcon": false
        }), isc.ToolStripSeparator.create(
             {
              "ID":"saveToolStripSeparator_15",
              "hideUsingDisplayNone":false
             }
             ),
        isc.Button.create({
            "ID": "disabledButton",
            "disabled": true,
            "width": 160,
            "title": "a disabled button",
            "showDisabledIcon": false
        }),
        isc.MenuButton.create({
            "ID": "menuButton",
            "width": 160,
            "disabled": true,

            "title": "a disabled menuButton",
            "icon": "https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Boss.png",
            "showDisabledIcon": false,
            menu: isc.Menu.create({
                "ID": "rotateMenu_84",

                "members":
                [],
                "data":
                [{
                        "icon": "https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Boss.png",
                        "enabled": false,
                        "title": "Test1"
                    }, {
                        "icon": "https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Boss.png",
                        "enabled": false,
                        "title": "Test1"
                    }
                ]
            })
        }),

        isc.DynamicForm.create(
             {
              "ID":"dateForm",
              "disabled":true,
              "fields":
              [
               {
                "ID":"dateItem",
                "name":"dateItem",
                "title":"Date",
                "type":"date",
                "width":110,
                "iconWidth":16,
                "iconHeight":16,
                "textAlign":"left",
                "readOnlyDisplay":"static",
                "showIcons":true,
                "useTextField":true,
                "showChooserWeekPicker":true
               }
              ],
              "values":
              {
              }
             }
             )
    ]
});
var theBoolean = true;
isc.Button.create({
title: "toggle",
top: 50,
left: 10,
click: function(){

    theBoolean = !theBoolean;
    if(theBoolean){
        enabledButton.disable();
        disabledButton.disable();
        menuButton.disable();
        dateForm.disable();
    }else{
        enabledButton.enable();
        disabledButton.enable();
        menuButton.enable();
        dateForm.enable();
    }
}
})

2. When enabling and disabling a button with a longer text, the width of the button changed when toggling.

Canvas.resizeControls(4);
Canvas.resizeFonts(2);

isc.ToolStrip.create({
    "width": "500",
    "members":
    [
        isc.Button.create({
            "ID": "editPersonsButton_103",
            "disabled": true,
            "title": "edit",
            "overflow": "visible",
            "icon": "https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-62-16.png",
            "showDisabledIcon": false
        }),
        isc.ToolStripSeparator.create({
            "hideUsingDisplayNone": false
        }),
        isc.Button.create({
            "ID": "buyVouchersButton_103",
            "disabled": true,
            "overflow": "visible",
            "showDisabledIcon": false,
            "title": "longer text shown",
            "icon": "https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-62-16.png"
        }),
        isc.ToolStripSeparator.create({
            "hideUsingDisplayNone": false
        }),
        isc.Button.create({
            "ID": "personImportButton_103",
            "overflow": "visible",
            "title": "another One",
            "icon": "https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-62-16.png",
            "showDisabledIcon": false
        })
    ]
})

var theBoolean = true;
isc.Button.create({
    title: "toggle",
    top: 50,
    left: 10,
    click: function () {

        theBoolean = !theBoolean;
        if (theBoolean) {
            editPersonsButton_103.enable();
            buyVouchersButton_103.enable();

        } else {
            editPersonsButton_103.disable();
            buyVouchersButton_103.disable();
        }
    }
})

Best regards

[Isomorphic]

The last two issues with the jumping menu button picker and button size change are resolved in the nightly build dated August 17 or above.

Regards
Isomorphic Software

[SimonF]

Thanks, fix confirmed.

Best regards