Checks run (2 succeeded)
flake8
passed.
JSHint
passed.
Add a new CSS component for sidebars.
Review Request #10658 — Created Aug. 15, 2019 and submitted
Our UI had 3 concepts for sidebars in the past, all a bit different.
There was the sidebar used in the Dashboard, the mobile menu, and the
administration UI. The one created for the dashboard was meant to be the
basis for a unifying one, but we didn't really have the concepts we have
now for sanely managing component styles, and the first implementation
wasn't quite right.This change introduces a new, unifying sidebar. It's based on our newer
component standard, and offers several improvements:
It's not ID-based, so there can be multiple instances (which will
eventually be useful for the mobile menu).It no longer requires an onclick, as the entirety of each item is
now a proper link (so opening in a new tab will also work).The structure of the menu is also more shallow, as we're eliminating
the "row" element within each item.The sidebar has a bit more width, preventing items from being truncated
as easily.Wrapped content in items are now vertically-aligned properly (labels,
icons, and values).The scrollbar for the sidebar now appears on the far-left of the
viewport, and not up against the content, giving more breathing room
(a personal pet peeve of the old implementation).Item types are extensible, giving us more flexibility going forward.
There's official support for section headers that work as navigation
items (the Dashboard in 4.0 had a hacky way of implementing this
previously).Currently, nothing makes use of this. Upcoming changes will move the
dashboard, admin UI, and mobile menu over to the new structure.
Made use of this in upcoming changes.
Tested that the original Dashboard sidebar (using the legacy styles)
looks and works as it did before.
Review request changed
- Description:
-
Our UI had 3 concepts for sidebars in the past, all a bit different.
There was the sidebar used in the Dashboard, the mobile menu, and the administration UI. The one created for the dashboard was meant to be the basis for a unifying one, but we didn't really have the concepts we have now for sanely managing component styles, and the first implementation wasn't quite right. This change introduces a new, unifying sidebar. It's based on our newer
component standard, and offers several improvements: -
It's not ID-based, so there can be multiple instances (which will
eventually be useful for the mobile menu).
~ -
It no longer requires an
onclick, as the entirely of each item is
now a proper link (so opening in a new tab will also work).
~ -
It no longer requires an
onclick, as the entirety of each item is
now a proper link (so opening in a new tab will also work).
-
The structure of the menu is also more shallow, as we're eliminating
the "row" element within each item.
-
The sidebar has a bit more width, preventing items from being truncated
as easily.
-
Wrapped content in items are now vertically-aligned properly (labels,
icons, and values).
-
The scrollbar for the sidebar now appears on the far-left of the
viewport, and not up against the content, giving more breathing room
(a personal pet peeve of the old implementation).
-
Item types are extensible, giving us more flexibility going forward.
Currently, nothing makes use of this. Upcoming changes will move the
dashboard, admin UI, and mobile menu over to the new structure. -
Review request changed
- Change Summary:
-
Added the missing legacy variables in
defs.less. - Commit:
-
1323e243619eabc8a68a06b4814f6c0385b740d29d09a0e7315087f28372f62b66f906554389a42e
Checks run (2 succeeded)
flake8
passed.
JSHint
passed.
Review request changed
- Change Summary:
-
- Moved various
bodystyles for sidebars (meant to control mobile mode) intopages/base.less, where they belong. - Prefixed some JS-managed state classes with
js-. - Changed how we were injecting transition styles for mobile mode.
- Added an explicit class for sidebar icons.
- Added support for header labels that function as navigation items (for Dashboard's "Overview").
- Added a missing color definition.
- Fixed a visual bug where the last item in a list had a truncated shadow.
- Moved various
- Description:
-
Our UI had 3 concepts for sidebars in the past, all a bit different.
There was the sidebar used in the Dashboard, the mobile menu, and the administration UI. The one created for the dashboard was meant to be the basis for a unifying one, but we didn't really have the concepts we have now for sanely managing component styles, and the first implementation wasn't quite right. This change introduces a new, unifying sidebar. It's based on our newer
component standard, and offers several improvements: -
It's not ID-based, so there can be multiple instances (which will
eventually be useful for the mobile menu).
~ -
It no longer requires an
onclick, as the entirety of each item is
now a proper link (so opening in a new tab will also work).
~ -
It no longer requires an onclick, as the entirety of each item is
now a proper link (so opening in a new tab will also work).
-
The structure of the menu is also more shallow, as we're eliminating
the "row" element within each item.
-
The sidebar has a bit more width, preventing items from being truncated
as easily.
-
Wrapped content in items are now vertically-aligned properly (labels,
icons, and values).
-
The scrollbar for the sidebar now appears on the far-left of the
viewport, and not up against the content, giving more breathing room
(a personal pet peeve of the old implementation).
-
Item types are extensible, giving us more flexibility going forward.
+ -
There's official support for section headers that work as navigation
items (the Dashboard in 4.0 had a hacky way of implementing this
previously).
Currently, nothing makes use of this. Upcoming changes will move the
dashboard, admin UI, and mobile menu over to the new structure. -
- Commit:
-
9d09a0e7315087f28372f62b66f906554389a42e324ab27ee49bae68b822a86ff6897b71db660d27
- Diff:
-
Revision 3 (+581 -216)
Checks run (2 succeeded)
flake8
passed.
JSHint
passed.
