dock progress bar looks a bit dated

[Feichtmeier]

we've talked about this some years ago :older_adult: :older_adult: :older_man:

IMO the progress bar look, engraved/3d + gradient track, does not really fit to modern gnome/yaru

@3v1n0 could you eventually change this to fit a bit better?

[Jupi007]

I fully agree on this.

[Feichtmeier]

this is from macos, which looks quite similar but doesnt have a gradient in trough

[Feichtmeier]

@vanvugt @sergio-costas since you touched the dock code recently, could you eventually check if you can fix this issue here?

[sergio-costas]

Is there a way of quickly emulate a bar?

[sergio-costas]

(to avoid having to do a big copy of files)

[sergio-costas]

Solved the emulation problem.

[Feichtmeier]

Thank you @sergio-costas 🙇

I think removing the gradient and the highlight from the trough should be enough as the monochrome bar and background fits the rest of the shell. The bar could potenially be colored in the primary accent color (selection color) but since there are some risky colors in the settings (that super un saturated greens and browns...) this could not work.

[3v1n0]

Solved the emulation problem.

Oh, sorry... It can be easily done in python, eg:

from gi.repository import Unity, Gio, GObject, Dbusmenu, GLib
import sys

loop = GObject.MainLoop()

# Pretend to be nautilus for the sake of the example 
launcher = Unity.LauncherEntry.get_for_desktop_id ("org.gnome.Nautilus.desktop")
nautilus_launcher = launcher
# launcher = Unity.LauncherEntry.get_for_desktop_id ("firefox.desktop")
#launcher = Unity.LauncherEntry.get_for_desktop_id ("org.gnome.Devhelp.desktop")

# Show a count on the icon
#launcher.set_property("count", 1234)
launcher.set_property("count_visible", True)
launcher.set_property("count", int(sys.argv[1]) if len(sys.argv) > 1 else 5)
Unity.LauncherEntry.get_for_desktop_id ("org.gnome.Calculator.desktop").set_property("urgent", True)

def on_timeout1():
    print('timeout1')
    nautilus_launcher.set_property("count", 5)
    return False

def on_timeout2():
    print('timeout2')
    nautilus_launcher.set_property("count", 12345)
    return False

def on_timeout3():
    print('timeout urgent off')
    Unity.LauncherEntry.get_for_desktop_id ("org.gnome.Calculator.desktop").set_property("urgent", False)
    return False

def on_timeout4():
    print('timeout urgent on')
    Unity.LauncherEntry.get_for_desktop_id ("org.gnome.Calculator.desktop").set_property("urgent", True)
    nautilus_launcher.set_property("count", 0)
    return False

GLib.timeout_add_seconds(3, on_timeout1)
GLib.timeout_add_seconds(5, on_timeout2)
GLib.timeout_add_seconds(6, on_timeout3)
GLib.timeout_add_seconds(7, on_timeout4)

# Set progress to 42% done 
launcher.set_property("progress", 0.42)
launcher.set_property("progress_visible", True)

# Set us as urgent. Quickly! Go! Go! Go! Now! Now!

launcher = Unity.LauncherEntry.get_for_desktop_id ("org.gnome.Terminal.desktop")
launcher.set_property("urgent", True)

def on_clicked(it, time):
    print ("Item clicked "+str(it)+" at "+str(time))

# We also want a quicklist 
ql = Dbusmenu.Menuitem.new ()
item1 = Dbusmenu.Menuitem.new ()
item1.property_set (Dbusmenu.MENUITEM_PROP_LABEL, "Item 1")
item1.property_set_bool (Dbusmenu.MENUITEM_PROP_VISIBLE, True)
item1.connect("item-activated", on_clicked)
item2 = Dbusmenu.Menuitem.new ()
item2.property_set (Dbusmenu.MENUITEM_PROP_LABEL, "Item 2")
item2.property_set_bool (Dbusmenu.MENUITEM_PROP_VISIBLE, True)
item2.connect("item-activated", on_clicked)
ql.child_append (item1)
ql.child_append (item2)
# item = Dbusmenu.Menuitem.new ()
# item.property_set (Dbusmenu.MENUITEM_PROP_LABEL, "Quit")
# item.property_set_bool (Dbusmenu.MENUITEM_PROP_VISIBLE, True)
# ql.child_append (item)
item = Dbusmenu.Menuitem.new ()
item.property_set (Dbusmenu.MENUITEM_PROP_LABEL, "Close This App")
item.property_set_bool (Dbusmenu.MENUITEM_PROP_VISIBLE, True)
item.property_set_bool ("unity-quit-action", True)
item.connect("item-activated", on_clicked)
ql.child_append (item)
launcher.set_property("quicklist", ql)

loop.run()

[sergio-costas]

@Feichtmeier Done. Tell me what do you think https://github.com/micheleg/dash-to-dock/pull/2153

@3v1n0 Ehm... I did it by adding this.setProgress(0.4); at the end of the constructor... 😅

[Feichtmeier]

@Feichtmeier Done. Tell me what do you think micheleg/dash-to-dock#2153

@3v1n0 Ehm... I did it by adding this.setProgress(0.4); at the end of the constructor... 😅

Cool, thank you!

IMO the highlight could be removed too. It is a bit hard to tell in this screenshot but I think there is a soft highlight at the edges of the bar? :) 👓 👴

[sergio-costas]

That's why we have Gimp :-D

[sergio-costas]

@Feichtmeier There is a border both in the track and the bar. I can remove both, if you want.

@3v1n0 Should I better keep the original code that allows a gradient, and simply add extra configurable parameters in the SCSS to allow to set the colors as desired here, without a gradient?

[sergio-costas]

@Feichtmeier The Mac has borders in both, too

[3v1n0]

@3v1n0 Should I better keep the original code that allows a gradient, and simply add extra configurable parameters in the SCSS to allow to set the colors as desired here, without a gradient?

Yeah, if you manage to keep both ways is fine, since there's people who customize the theme too

[Feichtmeier]

@Feichtmeier There is a border both in the track and the bar. I can remove both, if you want.

@3v1n0 Should I better keep the original code that allows a gradient, and simply add extra configurable parameters in the SCSS to allow to set the colors as desired here, without a gradient?

the parameter would be the best I think!

Yes the mac has it too, the example was not perfect. We should better look around at other OSD-styled controls in the gnome shell. I can't see any element there anymore which looks this "engraved" looks :) Ofc we could get more opinions in if you like. But I know that those time windows where we can adapt yaru are pretty small

[sergio-costas]

Maybe using a darker color...

[Feichtmeier]

The darker color is nice but IMO I would try to remove the white outline on the bar, and just make the whole bar white without the grey in the middle

[sergio-costas]

@Feichtmeier @3v1n0 Ok, I did several changes and now it is possible to define ALL the progress bar parameters using CSS. It also, by default, keeps the current style. Can you review the patch, please? When it is merged, I will prepare a patch for Yaru that changes the style to what you want.

[Feichtmeier]

Can you review the patch, please? When it is merged, I will prepare a patch for Yaru that changes the style to what you want.

Thank you very much for your work! I can not review the GJS code though as I never built gnome shell myself :(