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

Please consider reducing widget heights #15

Open
ocludo opened this issue Sep 19, 2017 · 19 comments
Open

Please consider reducing widget heights #15

ocludo opened this issue Sep 19, 2017 · 19 comments

Comments

@ocludo
Copy link

ocludo commented Sep 19, 2017

Please consider reducing the size of generic buttons and the height of menu bars, combo (drop-down) boxes, and tab headers. The Adwaita heights don't go well with the Adwaita Tweaks title bar height, especially since CSD header bar buttons in Adwaita Tweaks (such as the path bar and top-right buttons in Nautilus) are already shorter than the former. Please see the attached screenshots

screenshot-adwaita_tweaks-geany
screenshot-adwaita_tweaks-nautilus_preferences
screenshot-adwaita_tweaks-nautilus

@Jazqa
Copy link
Owner

Jazqa commented Sep 19, 2017

Thanks for the thorough issue. I'm a bit busy but I'll implement and release the changes within a few days.

However, your Geany doesn't have vanilla menu bar and it seems to adjust to the icons. Below is a picture of vanilla Geany (I've shrunk it a little since taking the screenie).

screenshot from 2017-09-19 11-10-07


After playing with the buttons and menu bar a bit, I think they're going to look something like the following.

image

image

@ocludo
Copy link
Author

ocludo commented Sep 21, 2017

Thanks for taking the feedback. The merged menu bar in Geany had slipped my mind; sorry about that. Anyway, the new design looks perfect - much more consistent and cohesive, and in keeping with the Adwaita Tweaks style. It allows better screen space usage and matches the title bar, apart from giving Adwaita Tweaks a distinctive identity.

PS: You should update your screenshot of GNOME Tweak Tool on the home page, to show the new button sizes.

@ocludo
Copy link
Author

ocludo commented Sep 21, 2017

I tried the latest version, and I find just two things amiss:-

  • I get a border below the title bar, unlike the merged bars in your screenshots. If your screenshots were just demonstrative/experimental, my two cents would be that the merged title bar looks better.
  • The menu items/entries themselves (including those in drop-down boxes) are still large compared to the menu bar, and some other widgets, such as text boxes and toggle switches also still appear to be the default Adwaita sizes, which creates a slight mismatch when these appear together.

Please see the attached screenshots.

screenshot-adwaita_tweaks-terminal_menu
screenshot-adwaita_tweaks-geany_menu
screenshot-adwaita_tweaks-calculator_preferences

@Jazqa
Copy link
Owner

Jazqa commented Sep 21, 2017

I get a border below the title bar, unlike the merged bars in your screenshots. If your screenshots were just demonstrative/experimental, my two cents would be that the merged title bar looks better.

Glad to hear this. I was experimenting with it and I personally enjoyed the merged look as well. I'll push the changes tonight as I already have them on my computer. I'm usually a little unsure of larger changes like this one, so I really appreciate the feedback.

The menu items/entries themselves (including those in drop-down boxes) are still large compared to the menu bar, and some other widgets, such as text boxes and toggle switches also still appear to be the default Adwaita sizes, which creates a slight mismatch when these appear together.

I completely overlooked the menu entries, I'll look into them tonight or tomorrow morning. Text boxes should be tinier than the defaults, it's the "+" and "-" buttons in your screenshot I completely forgot, I'll fix them as soon as possible. As for the switches, I'll deal with them too. They are the only element that couldn't be shrunk within the code, so I'll have to fire Gimp up soon ;)

@ghost
Copy link

ghost commented Sep 21, 2017

Could I make a suggestion? Is it possible to keep both styles? I am worried the change may impact users with HiDPI-displays negatively. I will of course have to test this to be sure. At the moment the theme works wonderfully on a 13" display with 1080P.

Not sure how it will affect higher resolutions as they may be able to scale differently.

@Jazqa
Copy link
Owner

Jazqa commented Sep 21, 2017

@nooryani84, if it becomes an issue, I'll keep both versions available. I highly doubt it will as I'm merely adjusting the padding of the elements (the empty space around the text). The text will remain the same and the elements will adjust to the text.

@ghost
Copy link

ghost commented Sep 21, 2017

You're probably right, I just have the mindset "don't fix it if it isn't broken" As you say, will probably be fine. :)

@ocludo
Copy link
Author

ocludo commented Sep 21, 2017

By the way, circular buttons, such as the one for accessing the settings of a connected network in the GNOME 3.24 Wi-Fi settings panel, are (now) squashed. I don't mind the squashed look, and I don't know if it's the result of the new button height reduction, but I thought I should mention it.

@Jazqa
Copy link
Owner

Jazqa commented Sep 22, 2017

@ocludo, I've pushed the "merged" look now and shrunk down the menus. Spinbuttons and switches are still large because I couldn't find a way to easily shrink them, I'll have to fire up Gimp when I have some free time.

@ocludo
Copy link
Author

ocludo commented Sep 22, 2017

Thanks. It looks beautiful now. I'll wait for you to update the graphical elements (spinners and switches).

@ocludo
Copy link
Author

ocludo commented Sep 22, 2017

Will it be possible for you to either reintroduce a slight amount of padding in the text boxes (less than Adwaita's), or thin down their borders? With the thick Adwaita borders the text boxes look crowded when there is no padding. For instance, look at the Properties of a file or folder in Nautilus and notice the text box containing the name.

@Jazqa
Copy link
Owner

Jazqa commented Sep 22, 2017

@ocludo, yes. Sorry I couldn't fix it today. I have a few hours tomorrow to fix all the issues and make the buttons look all nice and smooth.

@ghost
Copy link

ghost commented Sep 23, 2017

Is there any way I can get the border back below the titlebar? I'm not a fan of how flat it becomes with the merged look, maybe I'm just out of touch. This is in the Nautilus options menu, there is no clear separation between the title bar and rest of the window like there was before.. The Gedit-preferences looks good though
image

@Jazqa
Copy link
Owner

Jazqa commented Sep 23, 2017

@nooryani84, sure. I wish there was a way to disable the border for some programs (f.ex. Chrome, Geany, Terminal) and enable it for some. Sadly, these things are up to one's taste and choosing the way to go with the theme is quite difficult.

Do you want the old, darker gradients back too? If you know how to edit the gtk.css keep reading, if not, just ignore the rest of the text and reply here and I'll add a downloadable variant for you and others who prefer the older look ;)

You want to edit the color code for the borders. F.ex. to revert the changes change the two border-bottom: 1px solid #E8E8E7; to border-bottom: 1px solid #B6B6B3;.

If you want the stronger gradients back. Lower the gradients from background: linear-gradient(to bottom, rgba(242, 242, 242, 1), rgba(232, 232, 231, 1)); to background: linear-gradient(to bottom, rgba(242, 242, 242, 1), rgba(207, 207, 207, 1));

Just for clarification, it's these two elements you'd be editing:

headerbar,
headerbar.titlebar {
	background: linear-gradient(to bottom, rgba(242, 242, 242, 1), rgba(232, 232, 231, 1));
	min-height: 22px;
	padding-top: 0;
	padding-bottom: 0;
	box-shadow: none;
	border: none;
	border-bottom: 1px solid #E8E8E7;
}

headerbar:backdrop,
headerbar.titlebar:backdrop {
	background: #E8E8E7;
	box-shadow: none;
	border-bottom: 1px solid #E8E8E7;
}

@ocludo
Copy link
Author

ocludo commented Sep 23, 2017

Padded text boxes any time soon? ;)

@Jazqa
Copy link
Owner

Jazqa commented Sep 23, 2017

@ocludo textboxes and buttons should be the same as regular Adwaita now, only difference being that they shrink if you make your font smaller (a huge flaw in regular Adwaita, in my opinion).

I'll have to completely redo the GTK2 and GTK3 widgets at some point as shrinking them down didn't really work out. At least the menus ended up okay. Unfortunately, I have a ton of work plus a bachelor's thesis due soon and I'll have to get them out of the way first.

@ocludo
Copy link
Author

ocludo commented Sep 23, 2017

textboxes and buttons should be the same as regular Adwaita now, only difference being that they shrink if you make your font smaller

My font is smaller than default, but text boxes and buttons are smaller than Adwaita's (i. e., Adwaita widgets are larger at the same small font size; haven't checked using default/large font size). Anyway, I like the buttons smaller in Adwaita Tweaks, and I've set the text box padding myself in the CSS - it's fine now.

I'll have to completely redo the GTK2 and GTK3 widgets at some point as shrinking them down didn't really work out.

I'll take the current version as final for the time being, then. As I said, I like the widgets small in this theme, since it matches the title and header bars and keeps things consistent. I hope you'll keep the small-widget version available.

@Jazqa
Copy link
Owner

Jazqa commented Sep 23, 2017

@ocludo, I'll definitely shrink them down when I have the time. Problem was, I was trying to shrink them down in a hurry and with minimal code changes (I named the mod "Tweaks" because it started with ~30 lines of code, most GTK themes are thousands of lines long). Going with general and global changes like button, entry and list worked for most elements, but broke some rare ones. I need to inspect the elements further and see which ones to shrink and which ones to keep. As an example, shrinking the notebook tabs too much worked for Nautilus, Gedit and many other programs but broke LibreOffice's style menu.

@ghost
Copy link

ghost commented Sep 24, 2017

@Jazqa Thank you for taking time to explain how to revert the changes. I don't want to be a difficult person and this theme should be for as many people to enjoy as possible, so I suppose I will just have to get used to your changes. If I were to manually change the theme back as you explained it will work just fine, but I would be missing out on all your other changes as well. I just have to say thank you for the theme, and perhaps I should fork your theme and make the changes as you suggested. I don't want to create extra work for you :)

Edit: If it is possible, can you leave the https://github.com/Jazqa/adwaita-tweaks/releases/download/v1.5/adwaita-tweaks.zip as a separate branch? I have used this now and it works perfect!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants