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

Capitalize words based on GNOME HIG #191

Closed
nana-4 opened this issue Dec 23, 2018 · 21 comments
Closed

Capitalize words based on GNOME HIG #191

nana-4 opened this issue Dec 23, 2018 · 21 comments
Projects

Comments

@nana-4
Copy link
Member

nana-4 commented Dec 23, 2018

See "Capitalization" in https://developer.gnome.org/hig/stable/writing-style.html.en

@actionless Do you agree with this? (e.g. "Theme style" -> "Theme Style") If you agree, should I send a PR for this?

@nana-4 nana-4 created this issue from a note in UI revamp (To do) Dec 23, 2018
@actionless
Copy link
Member

yes, thanks in advance!

@actionless
Copy link
Member

actionless commented Dec 24, 2018

Header capitalization should be used for any headings, including header bar headings and page, tab and menu titles. It should also be used for short control labels that do not normally form proper sentences, such as button labels, switch labels and menu items.

I am again re-reading the HIG and now I am under impression what for theme options only first word should be capitalized, while every word should be capitalized only for buttons and section headlines, for example transmission:

2018-12-24--1545628901_814x791_scrot

as you see in headlines and buttons (and main and dropdown menus, which are not on the screenshot) every word is capitalized while options are not

@actionless
Copy link
Member

or nautilus as a more canonic gnome app:

2018-12-24--1545629219_811x748_scrot

@nana-4
Copy link
Member Author

nana-4 commented Dec 24, 2018

In HIG, "Sentence capitalization" is used for checkbox and radio labels, since these labels are usually sentences.

IMHO Oomox's row labels are rather closer to "Header" than "Sentence".

@actionless
Copy link
Member

headers in theme models are typed as separator (it indeed could make sense to make it more semantically correct and name them header or headline)

@actionless
Copy link
Member

actionless commented Dec 24, 2018

here's more stripped down example from transmission to show what i mean (as section headline is capitalized while normal labels are not):

2018-12-24--1545630311_621x106_scrot

@nana-4
Copy link
Member Author

nana-4 commented Dec 24, 2018

Hmm, in GNOME Settings, "Header capitalization" is adapted to the row list labels basically.

image

Another example from GNOME's mockup: https://gitlab.gnome.org/Teams/Design/app-mockups/blob/master/tweaks/tweaks-wires.png

@actionless
Copy link
Member

i've also capitalized few more labels and replaced e.g. which wasn't recommended to use in HIG

@actionless
Copy link
Member

i did few more writing style and typography improvements, please install the latest oomox-git and check if it's all done

@nana-4
Copy link
Member Author

nana-4 commented Dec 24, 2018

Looks much better! Nice job!

A few things I noticed:

  1. I've never seen the ellipsis (…) used for buttons in other GTK apps, so it looks a bit odd to me. Can't we remove the ellipsis from the buttons?

  2. I think it would look better to use : instead of () for DE/GTK name.
    For example: (GTK3) -> GTK3:, (Cinnamon) -> Cinnamon:

  3. I noticed that only "Accent Color" contains the word "Color" at the end. What about removing Color, or alternatively, renaming Accent Color (Checkboxes, Radios) to Selection Controls?

  4. Instead of a line break, how about using a smaller font size for the theme descriptions GTK2, GTK3, Qt5ct, Cinnamon, [...] like my mockup?

@actionless
Copy link
Member

  1. in HIG it's written it should be if they open some dialog (except for Preferences)
  2. ok
  3. i think i can rename Selection Highlight to Selection Color for the consistency
  4. i think splitting it into toolkits and DE/WM's makes it easier to read

@actionless
Copy link
Member

  1. i've tried removing brackets and it doesn't look well, mb in GTK+3 there is some widget or style similar to "Badge" for such case?

@actionless
Copy link
Member

  1. attempted to fix this
  2. and this

@actionless
Copy link
Member

  1. i temporarily commented out ellipsis-es on button for the latest release (also released it on flatpak) until it will be clarified more

@actionless
Copy link
Member

please check the current status of this ticket

@nana-4
Copy link
Member Author

nana-4 commented Dec 27, 2018

So sorry for the late reply. I checked the current status now.

  1. I re-checked HIG, and it seems you are right; HIG recommends using ellipses for buttons as well. (Personally I still feel a bit strange that the headerbar buttons have ellipses, though. However, if they become popover menu-items, they'd look normal in my opinion.)
  2. Please see below.
  3. For consistency with "Selection Text", I think "Selection Background" is better than "Selection Color".
  4. OK. (I still prefer my proposal one, but it's okay as it's not a big matter.)

Regarding 2:

I am sorry, but to be honest, I prefer the previous style of only the "Theme Options" section (for consistency with other themes). It was easier to see to me. Also IMO, "Primary Caret" and "Secondary Caret" should be in the top "Theme Colors" section. However, if you prefer the current style, I won't be against it.

i've tried removing brackets and it doesn't look well

Maybe if there are separators between rows, it may look better, I guess.

mb in GTK+3 there is some widget or style similar to "Badge" for such case?

AFAIK, there is no useful widget or style for such case, unfortunately.

@actionless
Copy link
Member

  1. I think what splitting into smaller blocks looks closer to wires which you sent at the first message of this ticket Redesign main lists based on GNOME HIG #190
  2. It's not always background.
  3. i don't like both too much actually, so we could think of more options later on

@actionless actionless moved this from To do to In progress in UI revamp Dec 31, 2018
@actionless
Copy link
Member

@nana-4 so, can this one be closed or more capitalization / text stuff remains?

@nana-4
Copy link
Member Author

nana-4 commented Jan 16, 2019

Sorry, I forgot to reply this:

  1. It's not always background.

But it's also not always "Selection", isn't it? (e.g. progress bar)

For the sake of consistency, personally I prefer:

  • Selected Background than Selection Color
  • Selected Text than Selection Text
  • Selection controls (Checkbox, Radio) than Accent Color (Checkboxes, Radios)

But this is a relatively trivial thing, so if it doesn't fit your taste, please go ahead and let's close this issue.

@actionless
Copy link
Member

actionless commented Jan 16, 2019

selected_bg / fg naming is sorta for uniformity with gtk2 and gtk3 themes there those are standard naming

while, of course, in UI there is no need to follow that technical side, but still could be nice for people who hacking on theme files manually

Selected Background than Selection Color
Selected Text than Selection Text

those minor renaming i don't mind at all

Selection controls (Checkbox, Radio) than Accent Color (Checkboxes, Radios)

this could be quite misleading because under the hood theme var is called ACCENT

@nana-4
Copy link
Member Author

nana-4 commented Jan 16, 2019

those minor renaming i don't mind at all

👍

this could be quite misleading because under the hood theme var is called ACCENT

Indeed. Regarding that, I take it back.

UI revamp automation moved this from In progress to Done Jan 17, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
UI revamp
  
Done
Development

No branches or pull requests

2 participants