[Feature request] Option to use Plasma-style window controls (and smaller headerbar, if possible) for a more consistent Plasma look

[Voralberg]

Hi! First of all, thank you for the hard work on Rewaita, it’s a great app! With the Breeze color scheme added, it really helps unify the style between KDE Plasma and GNOME.

For an even more “perfect” integration, I’d like to request an option to force Plasma-style window controls, similar to what’s shown in the Firefox window controls. Right now it looks like window controls aren’t consistently using the expected Plasma-like ones, at least in my setup.

It could also be great to optionally use a smaller headerbar height to better match the Plasma-style window controls and make the overall titlebar/headerbar proportions feel closer to Plasma, although I don't know if it would be possible but surely it would make this app mandatory on plasma!

Thanks again!

[SwordPuffin]

I will see about adding plasma-style window decorations in the next update. The window decorations is something I would like to expand on, just the implementation code-wise is very messy.

My only concern would be getting the icons correct, there should be some stand-in icons that work.

The smaller headerbars would be more thematically correct, just we'll see how well it pans out in practice.

[SwordPuffin]

I have worked on this a bit,

This was the css, you can use ctrl-shift-d to debug any gtk4 app and try it for yourself. Or put it in ~/.config/gtk-4.0:

windowcontrols > button {
  padding: 2px;
}

windowcontrols image:not(:hover) {
	background-color: transparent;
}

windowcontrols > button.minimize > image {
	background-image: -gtk-icontheme("adw-expander-arrow-symbolic");
	transform: rotate(180deg);
	-gtk-icon-transform: scale(0);
  background-size: 18px;
	background-position: center;
	background-repeat: no-repeat;
}

windowcontrols > button.maximize > image {
	background-image: -gtk-icontheme("adw-expander-arrow-symbolic");
	-gtk-icon-transform: scale(0);
  background-size: 18px;
  background-position: center;
  background-repeat: no-repeat;
}

windowcontrols > button.close > image:hover {
	background-color: @red_1;
	color: @dark_1;
}

window.maximized > * windowcontrols > button.maximize > image {
	background-image: -gtk-icontheme("checkbox-symbolic");
	transform: rotate(45deg);
  background-size: 12px;
}

This is what it looks like:

EDIT:
I tried out the smaller headerbars, but I just found they didn't work in context of Adwaita. Especially as a lot of Adwaita apps don't really have a visible headerbar, either nothing would change, or it would squash titlebar buttons.

[mssngtxtrs]

You can use breeze icons directly in the file, but here you have to work with third-party assets. I did this before, and I may look into it.

[MorsMortium]

Feel free to try my library, restoring system titlebar to all GTK applications https://codeberg.org/MorsMortium/GTK-NoCSD

[SwordPuffin]

You can use breeze icons directly in the file, but here you have to work with third-party assets. I did this before, and I may look into it.

The arrow icons are the big challenge, I need to use pre-installed system icons only. Technically I could manually import icons as assets but I REALLY do not want do that. Worst case scenario we can take another icon and rotate it, this whole thing is still out in the open, and I haven't even started on gtk3.

Originally I tried using "go-up/down-symbolic" but it changes the icon to an arrow instead of a chevron when it gets below a certain size, and it would be too big otherwise.

[mssngtxtrs]

I need to use pre-installed system icons only.

Maybe taking assets from Breeze GTK theme may be a solution? As I remember, Plasma creates one, you can take assets from there. Or any kind of third-party assets are not allowed?

[SwordPuffin]

I need to use pre-installed system icons only.

Maybe taking assets from Breeze GTK theme may be a solution? As I remember, Plasma creates one, you can take assets from there. Or any kind of third-party assets are not allowed?

I may take the css code from Breeze GTK for gtk3, as it is probably better looking than what I could make. I could technically import third-party assets for the chevrons, I just don't want to because I don't want to code that in and add more files to the project.

[Voralberg]

First of all, thank you all for the interest!

@SwordPuffin I have tried your custom CSS and I must say that the result is already quite good! Here's a comparison between a Qt app (Konsole) and Rewaita on Plasma with the button size in the window's decorations settings set to big:

I also added a custom CSS myself to hide the drop shadow since I don't have it on QT apps with:

window,
window .frame {
  box-shadow: none;
  border: none;
  background-image: none;
}

If it were not for just two things, it would already be perfect! The first is the close button, which has both an odd size and a suboptimal colour when highlighted (the shape itself becomes greyish on hover). The other thing that my OCD regarding uniformity can't stand is the maximised window button:

Although I must confess that if the other headerbar icons could also swap to their Qt counterparts that would be magnificent, but I really wouldn't want to get greedy!

As for @MorsMortium , I recall having used that library on Fedora in the past, so I'll take the chance to thank you as well. Even if I loved it, unfortunately I recall that it broke some GTK app usability entirely: I remember GNOME Disks as an example, where it became impossible to go forward or back since those buttons were on the headerbar. I think the same would apply to newer GTK4 apps, although I may be mistaken.

In any case (I know it's not much help, though), I thank you all for making the unification of the style between the two seem more and more like a reality!

[MorsMortium]

As for @MorsMortium , I recall having used that library on Fedora in the past, so I'll take the chance to thank you as well. Even if I loved it, unfortunately I recall that it broke some GTK app usability entirely: I remember GNOME Disks as an example, where it became impossible to go forward or back since those buttons were on the headerbar. I think the same would apply to newer GTK4 apps, although I may be mistaken.

The widgets from the headerbar are always moved to a container under them. I just tried and cannot reproduce it, but reports are always welcome, with a bit more detail. Also, this library started even hackier than the old gtk3-nocsd, (when it was GTK4 only) with directly communicating with the window manager, and now after multiple overhauls it is less hacky than gtk3-nocsd, with using all public APIs, so it also depends on when it was tried

[SwordPuffin]

First of all, thank you all for the interest!

@SwordPuffin I have tried your custom CSS and I must say that the result is already quite good! Here's a comparison between a Qt app (Konsole) and Rewaita on Plasma with the button size in the window's decorations settings set to big:

I also added a custom CSS myself to hide the drop shadow since I don't have it on QT apps with:

window,
window .frame {
box-shadow: none;
border: none;
background-image: none;
}

If it were not for just two things, it would already be perfect! The first is the close button, which has both an odd size and a suboptimal colour when highlighted (the shape itself becomes greyish on hover). The other thing that my OCD regarding uniformity can't stand is the maximised window button:

Although I must confess that if the other headerbar icons could also swap to their Qt counterparts that would be magnificent, but I really wouldn't want to get greedy!

As for @MorsMortium , I recall having used that library on Fedora in the past, so I'll take the chance to thank you as well. Even if I loved it, unfortunately I recall that it broke some GTK app usability entirely: I remember GNOME Disks as an example, where it became impossible to go forward or back since those buttons were on the headerbar. I think the same would apply to newer GTK4 apps, although I may be mistaken.

In any case (I know it's not much help, though), I thank you all for making the unification of the style between the two seem more and more like a reality!

Try the most recent push, I think I fixed all the issues you had. For the maximised window button, I just gave up trying to use icons and ended up drawing it with css, so it should look the same on all platforms.

I'm just about finished the release, but there is still a little more testing to be done.