Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dock progress bar looks a bit dated #4016

Open
Feichtmeier opened this issue Nov 16, 2023 · 19 comments
Open

dock progress bar looks a bit dated #4016

Feichtmeier opened this issue Nov 16, 2023 · 19 comments

Comments

@Feichtmeier
Copy link
Member

we've talked about this some years ago 🧓 🧓 👴

image

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
Copy link
Member

Jupi007 commented Nov 17, 2023

I fully agree on this.

@Feichtmeier
Copy link
Member Author

Bildschirmfoto 2023-11-20 um 15 42 00 this is from macos, which looks quite similar but doesnt have a gradient in trough

@Feichtmeier
Copy link
Member Author

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

@sergio-costas
Copy link
Contributor

Is there a way of quickly emulate a bar?

@sergio-costas
Copy link
Contributor

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

@sergio-costas
Copy link
Contributor

Solved the emulation problem.

@Feichtmeier
Copy link
Member Author

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
Copy link
Contributor

3v1n0 commented Mar 1, 2024

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
Copy link
Contributor

@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... 😅

@Feichtmeier
Copy link
Member Author

@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
Copy link
Contributor

That's why we have Gimp :-D

imagen

@sergio-costas
Copy link
Contributor

@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
Copy link
Contributor

@Feichtmeier The Mac has borders in both, too

imagen

@3v1n0
Copy link
Contributor

3v1n0 commented Mar 1, 2024

@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
Copy link
Member Author

@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
Copy link
Contributor

Maybe using a darker color...

imagen

@Feichtmeier
Copy link
Member Author

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 added a commit to sergio-costas/dash-to-dock that referenced this issue Mar 1, 2024
As commented in ubuntu/yaru#4016, the
progress bar, with its 3D gradient track, doesn't fit very well
in the current Gnome/Yaru theme.

This patch changes this, moving the track to a planar look, and
also allows to set the colors in the CSS.
@sergio-costas
Copy link
Contributor

@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
Copy link
Member Author

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 :(

3v1n0 pushed a commit to sergio-costas/dash-to-dock that referenced this issue Mar 21, 2024
As commented in ubuntu/yaru#4016, the
progress bar, with its 3D gradient track, doesn't fit very well
in the current Gnome/Yaru theme.

This patch changes this, moving the track to a planar look, and
also allows to set the colors in the CSS.
3v1n0 pushed a commit to micheleg/dash-to-dock that referenced this issue Mar 21, 2024
As commented in ubuntu/yaru#4016, the
progress bar, with its 3D gradient track, doesn't fit very well
in the current Gnome/Yaru theme.

This patch changes this, moving the track to a planar look, and
also allows to set the colors in the CSS.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants