Announcement

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

    RibbonButton doesn't scale vertically?

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

    Hello, it seems that the RibbonButton doesn't scale vertically:

    Click image for larger version  Name:	2024-07-01 09.30.39.jpg Views:	14 Size:	7.0 KB ID:	272772
    Click image for larger version  Name:	2024-07-01 09.30.33.jpg Views:	12 Size:	8.2 KB ID:	272773

    Code:
    isc.RibbonButton.create({
        title: "title",
    // showButtonTitle: false,
        autoDraw: true,
        click: "isc.say(this.title + ' button clicked');",
        vertical: false, icon: "pieces/16/star_yellow.png"
    });
    Last edited by claudiobosticco; 3 Jul 2024, 05:39.

    #2
    hi Claudio,

    You were right, we weren't scaling RibbonButtons directly - however, we were scaling RibbonGroup.rowHeight, so RibbonButtons would have scaled when used in Ribbons.

    We've added regular scaling for standalone RibbonButton, likely for tomorrow's builds.
    Last edited by Isomorphic; 2 Jul 2024, 00:11.

    Comment


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

      Thanks, now I see it's scaling, just a note: in Spacious density it's 32px tall, just like an IButton, while in Dense density is 29px vs 24px for an IButton. Is it intended like that?

      These heights are with the sample from post #1.

      Comment


        #4
        hi Claudio - we've fixed the scaling here when RibbonButtons are used outisde of Ribbons. They will now show at a similar size to other buttons and scale appropriately.

        Please retest with a build dated July 6 or later.

        Comment


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

          I see it's fixed, thank you very much

          Comment


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

            Hello, I found that when using a specified "size" attribute in SVG string with a RibbonButton configured like this:

            Code:
            var spriteFile = "[SKIN]images/stockIcons.svg";
            
            var spritePrefix = "sprite:svg:" + spriteFile;
            
            isc.RibbonButton.create({
                showMenuButtonImage: false,
                showMenuIcon: false,
                showMenuOnClick: true,
                showButtonTitle: false,
                autoDraw: true,
                vertical: false,
                icon: spritePrefix+"#add_circle;size:20,20;"
            });
            the icon scales as described by this new feature: https://forums.smartclient.com/forum...733#post272733

            However, when the size exceeds a certain limit, which I think is >= 18 for "Spacious" density, the icon is no longer centered.

            This is with spacious density and size 20, as in the sample above:

            Click image for larger version

Name:	2024-07-08 17.37.42.jpg
Views:	59
Size:	620 Bytes
ID:	272844

            is it expected?

            Comment


              #7
              hi Claudio,

              Yes, that's expected - RibbonButton has an iconSize set to 16, and that scales with density to 19. But you're showing an SVG in the icon element at 20px, which will scale to 23.

              The "size" attribute in src-strings is really to make an SVG *smaller* than it's container, but your code is fine - you'll just need to set RibbonButton.iconSize to at least the same as you specify in the src-string - at which point, you won't really need the size attribute in the src-string, because it will inherit the iconSize.

              Note that, like other widget sizes, RibbonButton.iconSize will only be scaled if you set it globally (eg, in load_skin.js) before scaling runs.
              Last edited by Isomorphic; 8 Jul 2024, 18:52.

              Comment


                #8
                Thank you very much for the clarification!

                Comment


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

                  Hello, I just noticed that now, in Twilight, the RibbonButton (with the above test case) has a white border, I don't think it's intended to be like that:

                  Click image for larger version  Name:	2024-07-20 15.02.04.jpg Views:	0 Size:	3.7 KB ID:	272983

                  Also, with spacious density, it's 36px tall, while in shiva it's 32px.

                  Also, in Obsidian, Stratus and Tahoe, it doesn't scale no more, it's always 24px tall:

                  Click image for larger version  Name:	2024-07-20 15.03.03.jpg Views:	0 Size:	4.2 KB ID:	272984

                  Comment


                    #10
                    hi Claudio, we've removed that test-border from Twilight and fixed RibbonButton sizing in other Flat skins - they'll now all scale from 22 to 32, but note that your sample would need to use the default iconSize of 16 in the src-string, to properly test in Dense and Spacious modes.

                    Please retest with tomorrow's builds, dated July 21 or later
                    Last edited by Isomorphic; 20 Jul 2024, 07:15.

                    Comment


                      #11
                      Originally posted by Isomorphic View Post
                      [cut]...note that your sample would need to use the default iconSize of 16 in the src-string, to properly test in Dense and Spacious modes.
                      yep, I was actually testing with the sample from post #1, and in my application I use a SVG without a size in the src-string.

                      Comment


                        #12

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

                        I see it's fixed in all flat skins, thank you very much

                        Comment

                        Working...
                        X