Add right border bar to Dark and Light theme #74504

tesuji · 2020-07-19T05:43:49Z

Demo:
Light theme: #74504 (comment)
Dark theme: #74504 (comment)
Ayu theme: #74504 (comment)

tesuji · 2020-07-19T05:44:30Z

r? @jyn514

jyn514 · 2020-07-19T05:48:38Z

@bors delegate=@Cldfire

bors · 2020-07-19T05:48:40Z

✌️ @@Cldfire can now approve this pull request

Cldfire · 2020-07-19T05:54:48Z

So, I intentionally added this as a feature. The highlight color I used is very subtle (to keep contrast high on the text and make it easy to read), and I added the highlight bar to provide an "anchor" of sorts that you can quickly scan for with your eyes when scrolling through the page.

Normally when the docs window is larger the highlight bar is much less tall which makes it less distracting:

I've found it very handy in my own usage and I would be sad to see it go. I'm curious if other people agree that it is distracting, though 🙂.

tesuji · 2020-07-19T06:13:06Z

Personally, I don't get used to this highlight color bar yet. The first time I saw this bar, I wonder why is it highlighted?
Is something special about this function? I keep asking myself about it. Another potential reason is that I don't find
the similar feature in other document sites like MSDN, MDN or Java Oracle, ...

That's just my reason. If people like the highlighted bar, let's keep it.

Cldfire · 2020-07-19T06:44:57Z

The first time I saw this bar, I wonder why is it highlighted? Is something special about this function? I keep asking myself about it.

Hmm, interesting. My thinking here is that the bar appears alongside the highlight color which makes it clear that it's part of the highlighted function style.

I can see this being the case though. Let's see what other people think!

jyn514 · 2020-07-19T12:24:46Z

I like the highlight because it makes the function stand out a little more. Without the bar the yellow on black is a little hard to see.

tesuji · 2020-07-19T12:27:47Z

If people like it, I would expect we make the highlighting bar on other themes too for consistences.

tesuji · 2020-07-22T14:22:43Z

How do we continue the discussion? Maybe I ping other rustdoc devs like @GuillaumeGomez , @ollie27 .

GuillaumeGomez · 2020-07-22T14:27:29Z

I have to admit that I like the right border highlighted too. So I'm curious what it would look like in the other themes as well.

tesuji · 2020-07-22T14:37:11Z

With the same CSS rule:
On Dark theme:

On Light theme:

GuillaumeGomez · 2020-07-22T14:40:35Z

Looks good to me. :)

Someone from @rust-lang/rustdoc wants to comment here maybe?

jyn514 · 2020-07-22T14:42:03Z

I think adding the highlight bar to the light theme so it's consistent is a great idea :)

tesuji · 2020-07-22T14:52:08Z

Ok, I changed the patch to include CSS rule for Dark and Light theme.

GuillaumeGomez · 2020-07-22T14:54:48Z

On second thought: can you make the border color a bit less luminous in the dark theme please?

tesuji · 2020-07-22T15:13:35Z

My color picking is nightmare: Is #bb7410 OK ?
Old:

New:

GuillaumeGomez · 2020-07-22T15:15:35Z

Oh nice! Just need to have @Cldfire ok with this since it's the ayu theme. Can you do something equivalent with the dark theme too please? 😛

Manishearth · 2020-07-22T15:19:23Z

I have no opinion on the color choice, it seems fine.

tesuji · 2020-07-22T15:31:49Z

Dark theme:
#ffb44c :

#bb7410:

GuillaumeGomez · 2020-07-22T15:41:46Z

Let's go for #bb7410 then! :)

Cldfire · 2020-07-22T18:52:20Z

Looks great!

As far as my thoughts on the colors, I would say we should do the following:

#ffb44c for the light theme (because the theme is very bright and the border color needs to be bright to fit in there)
#bb7410 for the dark theme (or whatever @GuillaumeGomez thinks is best)
rgba(255, 180, 76, 0.85) for the ayu theme:

Before:

After:

I would like to avoid using #bb7410 for the ayu theme because that color has a different tone to it that doesn't mesh with the rest of the color set.

@lzutao can you try those three colors out please? 😄

tesuji · 2020-07-23T03:08:40Z

Updated the PR.

tesuji · 2020-07-23T12:24:20Z

Just a note: @Cldfire You have bors right in this PR, you could comment @bors r+ to approve this PR.

GuillaumeGomez · 2020-07-23T12:26:09Z

Looks good to me, thanks a lot!

@bors: r+ rollup

bors · 2020-07-23T12:26:10Z

📌 Commit da9c77e62fd08cf715929e713d7ac87866206fa9 has been approved by GuillaumeGomez

Co-authored-by: Cldfire <[email protected]>

Ayu has it. Adding similar rule to other themes makes users less surprised and makes GUI more consistent.

tesuji · 2020-07-24T02:10:33Z

Rebased and added co-author commit.

GuillaumeGomez · 2020-07-24T08:16:00Z

Let's go again!

@bors: r+ rollup

bors · 2020-07-24T08:16:02Z

📌 Commit 7005ddb has been approved by GuillaumeGomez

@ghost

Rollup of 12 pull requests Successful merges: - rust-lang#74361 (Improve doc theme logo display) - rust-lang#74504 (Add right border bar to Dark and Light theme) - rust-lang#74572 (Internally unify rustc_deprecated and deprecated) - rust-lang#74601 (Clean up E0724 explanation) - rust-lang#74623 (polymorphize GlobalAlloc::Function) - rust-lang#74665 (Don't ICE on unconstrained anonymous lifetimes inside associated types.) - rust-lang#74666 (More BTreeMap test cases, some exposing undefined behaviour) - rust-lang#74669 (Fix typo) - rust-lang#74677 (Remove needless unsafety from BTreeMap::drain_filter) - rust-lang#74680 (Add missing backticks in diagnostics note) - rust-lang#74694 (Clean up E0727 explanation) - rust-lang#74703 (Fix ICE while building MIR with type errors) Failed merges: r? @ghost

rust-highfive assigned jyn514 Jul 19, 2020

tesuji force-pushed the ayu-border-selected-fn branch from 49f6d79 to df9a047 Compare July 22, 2020 14:49

tesuji changed the title ~~Remove distracting right-border on selected functions~~ Add right border bar to Dark and Light theme Jul 22, 2020

tesuji force-pushed the ayu-border-selected-fn branch from df9a047 to da9c77e Compare July 23, 2020 03:08

bors added the S-waiting-on-bors Status: Waiting on bors to run and complete tests. Bors will change the label on completion. label Jul 23, 2020

tesuji and others added 2 commits July 24, 2020 02:09

ayu: Change to less luminous color

ccbb024

Co-authored-by: Cldfire <[email protected]>

Add right border bar to Dark and Light theme

7005ddb

Ayu has it. Adding similar rule to other themes makes users less surprised and makes GUI more consistent.

tesuji force-pushed the ayu-border-selected-fn branch from da9c77e to 7005ddb Compare July 24, 2020 02:09

JohnTitor mentioned this pull request Jul 24, 2020

Rollup of 12 pull requests #74710

Merged

bors merged commit 52476f5 into rust-lang:master Jul 24, 2020

tesuji deleted the ayu-border-selected-fn branch July 24, 2020 14:00

cuviper added this to the 1.47.0 milestone May 2, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add right border bar to Dark and Light theme #74504

Add right border bar to Dark and Light theme #74504

tesuji commented Jul 19, 2020 •

edited

Loading

tesuji commented Jul 19, 2020

jyn514 commented Jul 19, 2020

bors commented Jul 19, 2020

Cldfire commented Jul 19, 2020 •

edited

Loading

tesuji commented Jul 19, 2020 •

edited

Loading

Cldfire commented Jul 19, 2020 •

edited

Loading

jyn514 commented Jul 19, 2020

tesuji commented Jul 19, 2020 •

edited

Loading

tesuji commented Jul 22, 2020

GuillaumeGomez commented Jul 22, 2020

tesuji commented Jul 22, 2020

GuillaumeGomez commented Jul 22, 2020 •

edited

Loading

jyn514 commented Jul 22, 2020

tesuji commented Jul 22, 2020

GuillaumeGomez commented Jul 22, 2020

tesuji commented Jul 22, 2020 •

edited

Loading

GuillaumeGomez commented Jul 22, 2020 •

edited

Loading

Manishearth commented Jul 22, 2020

tesuji commented Jul 22, 2020 •

edited

Loading

GuillaumeGomez commented Jul 22, 2020

Cldfire commented Jul 22, 2020

tesuji commented Jul 23, 2020 •

edited

Loading

tesuji commented Jul 23, 2020 •

edited

Loading

GuillaumeGomez commented Jul 23, 2020

bors commented Jul 23, 2020

tesuji commented Jul 24, 2020

GuillaumeGomez commented Jul 24, 2020

bors commented Jul 24, 2020

Add right border bar to Dark and Light theme #74504

Add right border bar to Dark and Light theme #74504

Conversation

tesuji commented Jul 19, 2020 • edited Loading

tesuji commented Jul 19, 2020

jyn514 commented Jul 19, 2020

bors commented Jul 19, 2020

Cldfire commented Jul 19, 2020 • edited Loading

tesuji commented Jul 19, 2020 • edited Loading

Cldfire commented Jul 19, 2020 • edited Loading

jyn514 commented Jul 19, 2020

tesuji commented Jul 19, 2020 • edited Loading

tesuji commented Jul 22, 2020

GuillaumeGomez commented Jul 22, 2020

tesuji commented Jul 22, 2020

GuillaumeGomez commented Jul 22, 2020 • edited Loading

jyn514 commented Jul 22, 2020

tesuji commented Jul 22, 2020

GuillaumeGomez commented Jul 22, 2020

tesuji commented Jul 22, 2020 • edited Loading

GuillaumeGomez commented Jul 22, 2020 • edited Loading

Manishearth commented Jul 22, 2020

tesuji commented Jul 22, 2020 • edited Loading

GuillaumeGomez commented Jul 22, 2020

Cldfire commented Jul 22, 2020

tesuji commented Jul 23, 2020 • edited Loading

tesuji commented Jul 23, 2020 • edited Loading

GuillaumeGomez commented Jul 23, 2020

bors commented Jul 23, 2020

tesuji commented Jul 24, 2020

GuillaumeGomez commented Jul 24, 2020

bors commented Jul 24, 2020

tesuji commented Jul 19, 2020 •

edited

Loading

Cldfire commented Jul 19, 2020 •

edited

Loading

tesuji commented Jul 19, 2020 •

edited

Loading

Cldfire commented Jul 19, 2020 •

edited

Loading

tesuji commented Jul 19, 2020 •

edited

Loading

GuillaumeGomez commented Jul 22, 2020 •

edited

Loading

tesuji commented Jul 22, 2020 •

edited

Loading

GuillaumeGomez commented Jul 22, 2020 •

edited

Loading

tesuji commented Jul 22, 2020 •

edited

Loading

tesuji commented Jul 23, 2020 •

edited

Loading

tesuji commented Jul 23, 2020 •

edited

Loading