Issue Right sidebar UI Update

/cc @dzaporozhets

@creamzy thank you for creating this issue.

Reassigned to @dzaporozhets

mentioned in merge request !2058 (merged)

mentioned in commit 03a5df99

mentioned in issue #4122 (closed)

First iteration is merged. Padding and colors will be improved in 8.4

Milestone changed to 8.4

After call with UX people we can few ideas how to make it better but for 8.3 we will do next:

revert sidebar position below issue/mr description
move cross-project reference right to emoji bar to save some vertical space

@dzaporozhets ❤ 👍

With these two changes, the new sidebar will look awesome and better than ever in 8.3! And besides looking good, it will even improve usability! Thanks everyone!

@pelle @haynes thank you guys for your feedbacks, we pressed you hard yesterday, but you stayed strong. Right now middle ground solution is introduced to keep community rocking.

Thank you @creamzy! Often these middle ground solutions turn out to be pretty good solutions 😉 I'm sure all this sidebar stuff can be improved even more and I'm looking forward to your UI/UX improvements to GitLab in the future 🚀

@pelle There is a clear vision of what needs to be achieved

We need more horizontal space, right now there are too many boxes
We need main working elements to be reachable without scrolling
MR layout is crucial

We need to push sidebar up anyway, but without eating part of issue/MR space. There is already ideas around it, just a dirty wireframe available for now, please be patient, we will share ideas soon.

@creamzy your screenshot is awesome!

Merge Request with middle ground solution for 8.3 - !2132 (merged)

Assignee removed

Added ~19492 and removed ~127616 labels

mentioned in issue #4213 (closed)

Reassigned to @creamzy

@dzaporozhets what do you think about collapsed sidebar? It looks quite ugly due to font we use, it is time to start doing our icon font maybe as we don't have proper coverage. New weight icon wit scales does not quite reflect the meaning.

Assignee removed

@creamzy collapsed sidebar is awesome. The font we will change but not now. So far even with old icons it looks great compare to current situation

Pages in gitlab1.atype

Issue: New Branch_ centered layout
Issue: New Branch_ liquid layout
Issue: collapsed sidebars
MRwith right sidebar

And please don't forget about tooltips in the collapsed states.

@creamzy I think changing layout (from gray background to white) should be separate issue. Can you please link it here since I think its need to be done before implementing new sidebar?

@dzaporozhets we have this issue #4122 (closed) from @JobV that brings the urge.

@creamzy yes but it does not say "New layout: remove gray background and borders". It is about issue weight which is too far from layout changes. If you want frontend developer to implement something it should be clear description what should be done (aka TODO).

mentioned in issue #6061 (closed)

mentioned in merge request !2410 (merged)

Added ~127616 label

Removed ~19492 label

@jschatz1 I want you to focus on this big issue for 8.5 so our recent layout redesign makes sense. Are you ok with that?

@dzaporozhets I am ok with that!

@jschatz1 great. Please start working on this right after 8.4 released (Jan 22). For now focus on small issues and possible UI regressions in 8.4.

Milestone changed to 8.5

@jschatz1 Please start working on it next week so we have some time for review/feedback/testing

mentioned in issue #12453 (closed)

mentioned in issue #6062 (closed)

Reassigned to @jschatz1

@creamzy I love your design. Do you think the collapse button should be on the bottom to be consistent with the left side menu collapse button? I like it's position but in comparing them it seems odd.

@creamzy How do you want the assignee to show up in the collapse menu when no assignee is selected? @dzaporozhets any thoughts?

How do you want the assignee to show up in the collapse menu when no assignee is selected?

@jschatz1 @creamzy I propose use font awesome user icon

@dzaporozhets I agree I'll go for that.

@jschatz1 👍

@dzaporozhets @creamzy @skyruler Multiple labels in collapsed sidebar. I'll just go for a count. Obviously can't list them there.

mentioned in merge request !2645 (merged)

@jschatz1 cool

Added ~122770 label

Status changed to closed by commit 34edb3ab

mentioned in commit 34edb3ab

Status changed to reopened

TODO:

fix bug on merge request changes tab (visit tab and reload window)
fix overflow issue with close/reopen button overflow when issue has edited ago text

@creamzy @jschatz1 I want to discuss new sidebar size. Right now its 312px which I found a bit a lot for laptop screen. I want you to think about making it smaller by around 30px. What do you think?

312px (Current)

282px (proposal)

mentioned in commit 5d2299ac

mentioned in merge request !2718 (merged)

@jschatz1 mini-request: make shortcuts for prev-next buttons with j and k

can be later if it's more than very little work

@JobV shortcuts is awesome adjustment, I wanted to write about them and totally forgot! Thank you.

286px is the min possible for sidebar based on the Participants section, let's do it 286px. And with buttons overflow - we need to change open by just to by , context is clear without extra word

286px is the min possible for sidebar based on the Participants section, let's do it 286px

@creamzy @jschatz1 lets do 290px in this case. I like round numbers

Close this issue when #13215 (closed) addressed

Status changed to closed by commit 5d2299ac

mentioned in commit 008ef89d

mentioned in issue #13215 (closed)

mentioned in merge request !2826 (merged)

The sidebar has an extra scrollbar for me (even though all content fits), and always had it since day 0. To worsen things, the scrollbar covers right-align text (which is noticeable when collapsed):