Need help with button:hover

[letkan]

launcher.config.txt Hi, please take a look at the attached config file for a launcher and help me understand why icons grow only to the right on hover whether the position of it is on the left (which makes sense) or the right of the screen. What am I missing?

[LBCrion]

What visual effect are you trying to achieve on hover?

On Fri, May 17, 2024 at 8:21 PM letkan @.***> wrote:

launcher.config.txt https://github.com/LBCrion/sfwbar/files/15356777/launcher.config.txt Hi, please take a look at the attached config file for a launcher and help me understand why icons grow only to the right on hover whether the position of it is on the left (which makes sense) or the right of the screen. What am I missing?

— Reply to this email directly, view it on GitHub https://github.com/LBCrion/sfwbar/issues/188, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASHPFFDHYHT4P3Y4GVTKI5DZCZKEZAVCNFSM6AAAAABH4VFJVOVHI2DSMVQWIX3LMV43ASLTON2WKOZSGMYDGNBSGI2DAOA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[letkan]

If you are familiar with plank, the same effect, zoom the icon when the mouse is over it, evidently away from the edge of the screen

[LBCrion]

So, the issue is that the icon is expanding differently depending on which side of the screen the bar is? I think you would need to flip the margin in the hover section when the bar is on the right, from margin-right to margin-left.

On Fri, May 17, 2024 at 9:47 PM letkan @.***> wrote:

If you are familiar with plank, the same effect, zoom the icon when the mouse is over it

— Reply to this email directly, view it on GitHub https://github.com/LBCrion/sfwbar/issues/188#issuecomment-2118363448, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASHPFFGTEDXNGFZNGNUSEIDZCZUHLAVCNFSM6AAAAABH4VFJVOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMJYGM3DGNBUHA . You are receiving this because you commented.Message ID: @.***>

[letkan]

Well, the margin-right/margin-left are there to define the distance of the buttons from the edge of the screen, so for the bar on the right I need margin-right. What happens (with the bar on the right) is that when I hover a button its size changes top/buttom/right instead of left and all other buttons stay aligned with the left side of it so they move away from the right side of the screen.  This happens correctly on the left side of the screen. There are only 2 variables I change, margin-/right/left and -GtkWidget-direction: right/left for window.

May 18, 2024, 11:18 by @.***:

So, the issue is that the icon is expanding differently depending on which side of the screen the bar is? I think you would need to flip the margin in the hover section when the bar is on the right, from margin-right to margin-left.

On Fri, May 17, 2024 at 9:47 PM letkan @.***> wrote:

If you are familiar with plank, the same effect, zoom the icon when the mouse is over it

— Reply to this email directly, view it on GitHub https://github.com/LBCrion/sfwbar/issues/188#issuecomment-2118363448, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASHPFFGTEDXNGFZNGNUSEIDZCZUHLAVCNFSM6AAAAABH4VFJVOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMJYGM3DGNBUHA . You are receiving this because you commented.Message ID: @.***>

— Reply to this email directly, > view it on GitHub https://github.com/LBCrion/sfwbar/issues/188#issuecomment-2118690349> , or > unsubscribe https://github.com/notifications/unsubscribe-auth/ACEZQ5PGXC6SYUDBLLS3OV3ZC4FFTAVCNFSM6AAAAABH4VFJVOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMJYGY4TAMZUHE> . You are receiving this because you authored the thread.> Message ID: > <LBCrion/sfwbar/issues/188/2118690349> @> github> .> com>

[letkan]

Here's a little video in case my explanation is not clear enough

[LBCrion]

I don't think the video got attached. Can I also check which version of sfwbar you're using?

[letkan]

Sfwbar 1.0_beta14, Arch linux, labwc launcher.webm

[letkan]

left-side.webm This is how it's supposed to work

[LBCrion]

Ok, I think the margin math is a bit off. In the default state your buttons are 9mm min-height + 1.4mm top margin + 1.4mm bottom margin = 11.8mm. (I ignore padding because it doesn't change on hover). In hover state you have 12mm min-height -0.2mm top margin -0.4mm bottom margin = 11.4mm.

Try changing your hover margins to 0mm top and -0.2mm bottom. For something like this, you may also want to us dimensions in 'px' rather than 'mm' to avoid rounding issues. mm is converted to px using a constant dpi anyway and the result is rounded to a px, so you can end up with a slightly unexpected px dimensions after rounding.

On Sat, May 18, 2024 at 10:03 PM letkan @.***> wrote:

left-side.webm https://github.com/LBCrion/sfwbar/assets/9017461/57f90772-1449-474f-b82f-b03672932fd2 This is how it's supposed to work

— Reply to this email directly, view it on GitHub https://github.com/LBCrion/sfwbar/issues/188#issuecomment-2119002407, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASHPFFFSCNDHV7MVXFPBJ73ZC66Z5AVCNFSM6AAAAABH4VFJVOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMJZGAYDENBQG4 . You are receiving this because you commented.Message ID: @.***>

[letkan]

I made the corrections you suggested but the result is the same.

[LBCrion]

Ok, it looks like by default, the min-size change on the button triggers a transition (i.e. the size increase is animated). So what you get is margin changing right away, but the button changing over time, so the overall widget dimensions change as margin shinks and then the button is gradually expanding. You can disable this by adding transition-property: none; to the button CSS node. This isn't as pretty though, so may need to look into how to make transition consistent.

On Sun, May 19, 2024 at 11:08 AM letkan @.***> wrote:

I made the corrections you suggested but the result is the same.

— Reply to this email directly, view it on GitHub https://github.com/LBCrion/sfwbar/issues/188#issuecomment-2119178839, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASHPFFEZBQZ2BHX423C7AK3ZDB2Y3AVCNFSM6AAAAABH4VFJVOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMJZGE3TQOBTHE . You are receiving this because you commented.Message ID: @.***>

[LBCrion]

Playing with this some more. It looks like margin does transition over time as well, but given the difference in magnitude of change of top margin, bottom margin and widget height, they transition at different rate (in terms of pixels). This results in resizing throughout the resizing process. I get the best result using linear timing function and margin change = 1/2 of height change. I.e. height goes from 40px to 60px, margin goes from 10x to 0px for both top and bottom.

On Sun, May 19, 2024 at 3:01 PM Lev Babiev @.***> wrote:

Ok, it looks like by default, the min-size change on the button triggers a transition (i.e. the size increase is animated). So what you get is margin changing right away, but the button changing over time, so the overall widget dimensions change as margin shinks and then the button is gradually expanding. You can disable this by adding transition-property: none; to the button CSS node. This isn't as pretty though, so may need to look into how to make transition consistent.

On Sun, May 19, 2024 at 11:08 AM letkan @.***> wrote:

I made the corrections you suggested but the result is the same.

— Reply to this email directly, view it on GitHub https://github.com/LBCrion/sfwbar/issues/188#issuecomment-2119178839, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASHPFFEZBQZ2BHX423C7AK3ZDB2Y3AVCNFSM6AAAAABH4VFJVOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMJZGE3TQOBTHE . You are receiving this because you commented.Message ID: @.***>