Tahoe Skin - Color of background-tab-color nearly matches disabled-button-color
Hi there,
We are currently testing out the Tahoe skin and have problems to figure out which tabs are clickable and which are not.
We have mutliple views where we have a Tabset with 4-5 tabs and in som of the tabs there are toolstrips with buttons (enabled and disabled ones).
The disabled buttons are grey, the enabled buttons are blue - this is fine.
But the color of the background-tabs does match the color of the disabled button so close that with a non-calibrated monitor you cannot see any difference. When there is a disabled tab the user will see the difference between a disabled tab and a background-tab, but if there is no disabled tab, the user will think that the tab is also disabled like the button below.
Therefore we think most of the users might think they cannot interact with the other tabs.
Version: SmartClient_v111p_2017-07-20_Pro
Browser: Firefox 54.0.1 (32-Bit)
Skin: Tahoe
Density: Medium
Enterprise Skin:
Tahoe Skin:
Maybe switching to another color for the background-tabs would be helpful?
e.g. with the color #b2d8f1?
Code for reproduction
Best regards
We are currently testing out the Tahoe skin and have problems to figure out which tabs are clickable and which are not.
We have mutliple views where we have a Tabset with 4-5 tabs and in som of the tabs there are toolstrips with buttons (enabled and disabled ones).
The disabled buttons are grey, the enabled buttons are blue - this is fine.
But the color of the background-tabs does match the color of the disabled button so close that with a non-calibrated monitor you cannot see any difference. When there is a disabled tab the user will see the difference between a disabled tab and a background-tab, but if there is no disabled tab, the user will think that the tab is also disabled like the button below.
Therefore we think most of the users might think they cannot interact with the other tabs.
Version: SmartClient_v111p_2017-07-20_Pro
Browser: Firefox 54.0.1 (32-Bit)
Skin: Tahoe
Density: Medium
Enterprise Skin:
Tahoe Skin:
Maybe switching to another color for the background-tabs would be helpful?
e.g. with the color #b2d8f1?
Code for reproduction
Code:
Canvas.resizeControls(4);
Canvas.resizeFonts(2);
isc.TabSet.create({
"ID": "theTabset",
"width": "100%",
"height": "100%",
"tabs":
[{
"ID": "firstTab",
"title": "First Tab",
pane: isc.VLayout.create({
"ID": "paneIntab",
"members":
[isc.ToolStrip.create({
"ID": "theToolstrip",
"width": "100%",
"members":
[
isc.Button.create({
"ID": "theShortButton",
"overflow": "visible",
"title": "short text",
"icon": "https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-62-16.png",
}),
isc.Button.create({
"ID": "theLongButton",
"overflow": "visible",
"disabled": true,
"title": "Disabled Button",
"showDisabledIcon": false,
"icon": "https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-62-16.png"
})
]
})]
})
}, {
"disabled": false,
"title": "Background Tab",
pane: isc.VLayout.create({
"ID": "aLayout",
})
}, {
"title": "Disabled Tab",
"disabled": true,
pane: isc.VLayout.create({
"ID": "aLayout",
})
}
]
});
Comment