visual glitches for TabSet with many tabs

[claudiobosticco]

SmartClient Version: SNAPSHOT_v13.1d_2024-04-07/AllModules Development Only (built 2024-04-07)

Chrome on MacOS

Hello, in the tabsAddAndRemove sample, If you try to add tabs until the tabPicker is shown, you'll see that it seems aligned too high:



if using tabBarPosition: "left", with a bigger tabBarThickness:

isc.TabSet.create({
    ID: "tabSet",
    tabBarPosition: "left",
tabBarThickness: 120,
    width: 400,
    height: 200,
    tabs: [
        {title: "Blue", icon: "pieces/16/pawn_blue.png", iconSize:16,
         pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_blue.png"})},
        {title: "Green", icon: "pieces/16/pawn_green.png", iconSize:16,
         pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_green.png"})}
    ]
});

isc.HLayout.create({
    top: 225,
    membersMargin: 10,
    members: [
        isc.IButton.create({
            title: "Add Tab",
            click: function () {
                // alternate between yellow pawn and green cube
                if (tabSet.tabs.length % 2 == 0) {
                    tabSet.addTab({
                        title: "Yellow",
                        icon: "pieces/16/pawn_yellow.png", iconSize:16,
                        pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_yellow.png"})
                    });
                } else {
                    tabSet.addTab({
                        title: "Green",
                        icon: "pieces/16/cube_green.png", iconSize:16,
                        pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/cube_green.png"})
                    });
                }
                if (tabSet.tabs.length == 1) tabSet.selectTab(0);
            }
        }),
        isc.IButton.create({
            title: "Remove Tab",
            click: function () {
                tabSet.removeTab(tabSet.tabs.length-1);
            }
        })
    ]
});

you'll see that it shows two icons for the tabPicker, and the orientation doesn't seem right:

[Isomorphic]

hi Claudio,

We'll be improving the layout of these tab-management buttons in the next few days - we'll update here when the change arrives.

[Isomorphic]

hi Claudio,

We've fixed the "picker" alignment issue in all Flat skins and added a new look for these widgets in Shiva; a rounded button layout with SVG chevrons and rollover button-styling.

Please take at look at a build April 20 or later and let us know what you think.

[claudiobosticco]

SmartClient Version: SNAPSHOT_v13.1d_2024-04-21/AllModules Development Only (built 2024-04-21)

Hello, first, for Shiva skin:

much nicer :)

For vertical tabs:



the arrows orientation doesn't seem right, and they're shifted 5px or so downward, until you click on the tabPicker.

For Twilight, Obsidian and Stratus, the scroller seems too big:





and the arrow orientation of the tabPicker isn't right.

In Stratus the tabPicker icon is also too small:



Tahoe has just the wrong arrow orientation of the tabPicker:

[Isomorphic]

Thanks Claudio,

For the height of the button-layout (the width in vertical tabs), the layout currently sizes to the TabBar's size. We'll take a look at that and the various icon issues and get back to you.

[Edit] We'll also fix the scroller's extra length in Twilight/Obsidian/Stratus.

[Isomorphic]

hi Claudio,

We've fixed these various issues and tweaked the icon colors in Shiva to match other icons in Shiva - there remains a 1px shift when you click the picker-icon in Shiva when the tabPosition is left or right - we'll get to that shortly.

You'll see the changes in tomorrow's builds.