Implement updated activity panel tab design (part 1) #137
Conversation
justinshreve
added
[Status] Needs Review
focus: activity panel
There was a problem hiding this comment.
Looking really great!
The only oddity I could see was when visiting a classic Woo page. When the page first loads, the panel buttons are slower to load then the rest of the screen ( makes sense due to JS render ) so wondering if we maybe add a loading indicator to that area eventually.
The other issue on classic pages is it appears div#woocommerce-layout__notice-list is still taking up horizontal space, even when the notices are not being shown. You can see both of these in the following gif... which at the end I manually add a display: none to the div in question and the spacing goes away.
I'm fine with that being handled in a follow-up PR, or feel free to fix here and merge away.
Excellent work!
| const { isPanelOpen, currentTab } = this.state; | ||
|
|
||
| if ( ! isPanelOpen ) { | ||
| return null; |
There was a problem hiding this comment.
I like this... since we won't render an expensive hidden panel that triggers many an API request. nice!
| @@ -22,6 +22,9 @@ $valid-green: #4ab866; | |||
| $error-red: #d94f4f; | |||
| $woocommerce: #95588a; | |||
|
|
|||
| // Core Colors | |||
There was a problem hiding this comment.
Is this WordPress core or Woo core?
There was a problem hiding this comment.
WP, and the naming below matches the labels in the Invision mocks, so it'll be easy to know what to use. We'll have some more shades of this as well.
|
Sorry forgot to include the gif!
|
|
Logged an issue so we can revisit some of the core handling after more of the ActivityPanel/header changes are in: #140. A loading indicator is also on the todo list! |
See #90.
There are a few todos left, so I'm leaving the "Needs Design" label off for now. I'll request design feedback on the next PR in the series which should finish implementing the new activity panel tab design and related design treatments, and I can fix issues there. I'm putting this one up since it's already quite a few lines deep and is an improvement over what we have now.
This PR implements the mobile behavior and layout and various screen sizes, new style tabs, and updated placement/width of the panel.
Todos left:
To Test: