4

I am referring to the effect eg. the session indicator has or the keyboard language adder has. I'd prefer it with the responsiveness the session listbox has.

enter image description here

3

The most common way a designer can do this is by applying on an upper layer a semitransparent png image or gradient with fading transparency from 1 to 0 and white color. Another option is a gtk box shadow with white color.

edit: I believe this is what are you looking for:

ctl+shft+d dev tool

The style is into gtk-widgets.css, line 3840

popover undershoot.top {
background:
    linear-gradient(
        @bg_color 0%,
        alpha(@bg_color, 0) 50%
    );}

gtk-widgets.css

5
  • Sure, but is this how it's done properly by elemenetary? I mean, I examined the source code of the session indicator but I couldn't find anything like it. – user258456 Jan 27 '20 at 17:23
  • It is more like a style than the code and probably you can find this not into session indicator code but in elementary os theme. Look at my answer again – Bo rislav Jan 27 '20 at 17:44
  • That was exactly what I was looking for. Thanks! – user258456 Jan 28 '20 at 0:50
  • that is super helpful! However for me @bg_color didn't work, but @theme_bg_color did. It may be because i'm not on elementary OS, but just using plain gtk. – Emmanuel Touzery Jun 28 '20 at 6:20
  • 1
    It is just a variable name that for sure could be different depending on the gtk theme. It can be safely replaced with any hexadecimal color value like #ffffff or #000 or even web colors like red, or white for example. – Bo rislav Jun 28 '20 at 8:56
0

Gtk.ScrolledWindow is what you're looking for. It comes with everything you see in the screenshot you added: the vertical scroll bar to the right, the blue hue animations when reaching the top or the bottom of the list...

Basically, I suggest creating a Gtk.ListBox, populate it with whatever widgets you might need, and then add it to a Gtk.ScrolledWindow. Then, add the Gtk.ScrollerWindow to whatever container you need it to appear into. It will most likely inherit the container's width and height, and try to display the ListBox's contents as pretty as possible. Using a ListBox will also allow you to easily implement filtering of it's contents, if needed. I can supply an example here if you're interested.

This a screenshot of the implementation linked above: enter image description here

1
  • That was not what I was looking for. I was looking for the fading, not the blue light. – user258456 Jan 28 '20 at 0:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.