Various Design Fixes and Improvements

[danielromlein]

Issue details

• Kubernetes logo not properly aligned with breadcrumb. Breadcrumb needs to be moved down 1px, and I think logo has to go up 1px.
  • 
• When a second level of breadcrumb is added, the parent jumps up a pixel
  • 
• Breadcrumb should start with overview page (e.g. Workloads > Pods)
• "Kubernetes" logo is too close to menu icon – should be 24px
  • 
• Divider between local & global actions should be 1px instead of 2px; 32px tall instead of 40px
  • Desired:
    
• Some action buttons have insufficient right padding ("Create" is too tight; "Edit" is correct)
  
• Increase space between action button icon and text by 2px
  • 
• Selected Namespace shouldn’t be blue and have gray background.
  • 
  • Selected should be blue; hover state should have gray background, as per the Material spec.
• Namespace dropdown font should be Roboto Medium, not Roboto Mono Medium
• Namespace dropdown should have 10px spacing between Namespace and bottom border (currently 7px)
  

• [x] Cards should have 2px border radius

  
• Cards should have 1px border of 0,0,0, .12
• “Ingress” is currently the only singular nav item. Change to "Ingresses"
• Titles of graphs: "history" is redundant in “CPU usage history”. I think we should change to "CPU / Memory Usage [or Utilization?]" or even just "CPU".

Environment

Dashboard version: 1.4.0
Operating system: OSX
Chrome and Firefox

[maciaszczykm]

@romlein I hope you don't have anything against putting checkboxes near items that need be completed :)

[floreks]

Cards should have 1px border of 0,0,0, .12

Is it border between title and content?

Cards should have 2px border radius

Is it blur radius or spread radius? Current value for box shadow is quite complex.
0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12)

[floreks]

Breadcrumb should start with overview page (e.g. Workloads > Pods)

We've abandoned this idea at some point but I'm not sure why. We can add this again I think. @bryk @maciaszczykm what do you think?

Some action buttons have insufficient right padding ("Create" is too tight; "Edit" is correct)

Unfortunately this is default angular material behavior. When text is too long and takes too much space then padding is smaller. To fix that globally we'd need some kind of wrapper for md-button. Anyone has a better idea for that?

Selected Namespace shouldn’t be blue and have gray background.

Same as above. Not easy to fix and requires default angular material behavior override.

Titles of graphs: "history" is redundant in “CPU usage history”. I think we should change to "CPU / Memory Usage [or Utilization?]" or even just "CPU".

I don't have any strong opinions here. Simple CPU/Memory Usage sounds good to me. I'll change that once we agree on something.

[danielromlein]

@maciaszczykm checkboxes are great! Sorry, I didn't know you could include those.

@floreks

Breadcrumb should start with overview page (e.g. Workloads > Pods)

As with all of these I'm totally open to being to persuaded otherwise if there's a good reason.

Some action buttons have insufficient right padding ("Create" is too tight; "Edit" is correct)

Ah ok, that's unfortunate. No I don't have any ideas.

Simple CPU/Memory Usage sounds good to me

Cool, let's wait for @bryk to weigh in.

Is it border between title and content?

No, I was referring to the border all the way around the card. Since the divider between title and content is #ddd, that would work for the border all the way around as well I think.

Cards should have 2px border radius

That's referring to the rounding of the corners of the card itself – not the shadow.

[floreks]

Current state (with border changed from #ddd to rgba(0,0,0,.12)):

Card

Logo & breadcrumbs

Logo & breadcrumbs (2 levels)

Overall

[bryk]

Breadcrumb should start with overview page (e.g. Workloads > Pods)

We've abandoned this idea at some point but I'm not sure why. We can add this again I think. @bryk @maciaszczykm what do you think?

This was at the time of menu with workloads only. This can be reintroduced.

[bryk]

Simple CPU/Memory Usage sounds good to me

Cool, let's wait for @bryk to weigh in.

I'd go with CPU/Memory or CPU usage/Memory usage. I've been commenting about this before.

[bryk]

Some action buttons have insufficient right padding ("Create" is too tight; "Edit" is correct)

Hmm.. This looks like a bug. I'll take a look.

[danielromlein]

@bryk where do we stand with these remaining changes? It'd be nice to wrap these up.
Still to be done:

• Rename CPU & Memory graphs
• Start breadcrumb with overview page (e.g. Workloads > Pods)
• Fix padding issue where some action buttons have insufficient right padding ("Create" is too tight; "Edit" is correct)
• Selected Namespace shouldn’t be blue and have gray background.

[bryk]

Rename CPU & Memory graphs

This is done already.

Start breadcrumb with overview page (e.g. Workloads > Pods)

I'll take care of this.

[bryk]

Fix padding issue where some action buttons have insufficient right padding ("Create" is too tight; "Edit" is correct)

This is harder than expected, as the behavior is built into the library we use...

But all other comments are done :)

[maciaszczykm]

But all other comments are done :)

Can we close it then?

[danielromlein]

If the button padding is too hard to correct for this release we can punt that, but I would like to see the following fixed:

Selected Namespace shouldn’t be blue and have gray background.

Thoughts on how difficult that would be @maciaszczykm?

[maciaszczykm]

@danielromlein As @floreks already noticed it's hard to implement. We use Angular Material select component (https://material.angularjs.org/latest/demo/select) and unfortunately it's not working as described in Material Design docs (https://material.io/guidelines/components/buttons.html#buttons-dropdown-buttons). We would need to override standard behavior, which is not good for us. We can make issue on Angular Material repsitory, maybe they'll be willing to fix it.

[maciaszczykm]

Opened issue in Angular Material repo, will track it from #1730. Closing this issue.

[danielromlein]

@maciaszczykm sounds good! Thank you for taking care of that