Patternfly vertical navigation and project bar #1932

spadgett · 2017-08-14T14:00:40Z

https://trello.com/c/ZcLBaLK7

This is #1929, rebased

@sg00dwin I've left you as the commit author.
@rhamilto FYI

TODOs:

Follow on:

Update application launcher to use secondary nav flyout at mobile
Update Customizing the logo documentation to include max width and height values documented in _navbar-vertical.less.
Update branding for OCP per https://gist.github.com/rhamilto/c5c671d4dba9da2b8b62ff3fe0ad9f41#file-gistfile1-txt-L5-L20
Use HTML5 fullscreen for chromeless
Move YAML editor to a modal
determine if pages currently utilizing .surface-shaded should continue to do so --> Jenny to provide design direction
- about, command line interface, projects, catalog, etc.
- edit pages

spadgett · 2017-08-14T14:30:59Z

app/scripts/extensions/nav/dropdownMobile.js

@@ -24,38 +24,38 @@ angular.module('openshiftConsole')
        dropdownItems = dropdownItems.concat([{
          type: 'dom',
          node: [
-            '<li>',
+            '<li class="list-group-item">',


This will break existing extensions if we require a new class on menu items.

@rhamilto @jeff-phillips-18 Any ideas on how we can avoid that?

Options:

Duplicate the PatternFly's LESS rules related to styling the mobile nav in the console's LESS. Poses a maintenance challenge and duplicates rules.

Use JS to add the classes.

Both options are not ideal, but I think I favor the second one?

We've also got a bug that's related. As it stands, primary nav links need an ng-click="nav.showMobileNav = false;" to correctly close the nav at mobile.

I have this fixed except for active styles.

The active styles work now too

spadgett · 2017-08-25T16:48:13Z

@dtaylor113 FYI, we should be able to update the application launcher menu to match the mobile design when this lands. I suggest we do it as a follow on to this PR.

spadgett · 2017-08-28T19:33:03Z

app/styles/_variables.less

@@ -7,7 +7,15 @@
 // Patternfly overrides
 @dropdown-divider-margin: 4px 0;
 @list-view-hover-bg: #fafafa;
-@navbar-pf-alt-navbar-brand-padding: 20px 0;
+@navbar-pf-height:


Needs a value?

actually not used, needs to be removed

spadgett · 2017-08-28T19:33:38Z

app/styles/_variables.less

-@navbar-os-header-height-mobile: 46px;
+@navbar-header-right-margin: 10px;
+@navbar-os-header-desktop: 59px;
+@navbar-os-header-mobile: 39px;


Why remove height from the var name?

can't recall why 🤔 but shouldn't have been.

spadgett · 2017-08-30T20:13:49Z

I've added some basic accessibility support to the nav. Tested using the keyboard and iOS simulator.

spadgett · 2017-08-31T10:49:45Z

app/views/_sidebar.html

        </a>
+
+        <!-- mobile secondary nav -->


I don't think this is just for mobile? It's secondary nav for desktop, too, right?

If so, let's update the comment.

spadgett · 2017-08-31T11:16:09Z

@jeff-phillips-18 Let me know if you'd like to review this. It's a large PR, but the views are mostly whitespace changes and removed elements. The important changes are in nav.js, header.html, and _sidebar.html -- and then of course many changes to the less styles.

@rhamilto Is working on a few last items to show active nav for pages that didn't used to have a left nav. We are showing this at the design review today to verify what we've done with @openshift/team-ux-review

We opted to go with base Patternfly to keep compatibility with our extension points. We have about 5 extension points in the masthead and left nav that we must keep supporting without breaking existing extensions.

I'd like to give this PR review priority if possible. For one, if we merge it earlier in the sprint, it has more soak time. It's also difficult to rebase since it touches many files.

@rhamilto Can you review the less changes from @sg00dwin?

@openshift/team-ux-review I'm really happy with the UX of the new nav. Thanks! This PR also removes more code than it adds, while adding function, which is great.

@rhamilto @sg00dwin Thanks for all your work on this

spadgett · 2017-08-31T11:17:14Z

@abhgupta Heads up that nav changes are likely coming this sprint. You should not need to change any of the online extensions, but we should verify.

spadgett · 2017-08-31T12:43:50Z

app/styles/_vertical-nav.less

+    margin-left: 20px;
+  }
+  .nav-vertical-primary {
+    display: none;


Ideally we should use an ng-if for this rather than hiding the vertical nav in CSS

rhamilto · 2017-08-31T17:28:58Z

@abhgupta Heads up that nav changes are likely coming this sprint. You should not need to change any of the online extensions, but we should verify.

https://github.com/openshift/online/pull/1408 is required for the new nav to work correctly with online.

spadgett · 2017-09-01T13:09:14Z

Cleaned up indentation in the views, squashed, and added dist

spadgett · 2017-09-01T15:15:54Z

[test]

rhamilto

Great teamwork on this one!

spadgett · 2017-09-01T15:49:16Z

Looks like we have some test failures to work through :)

spadgett · 2017-09-01T16:25:00Z

@sg00dwin We should try to avoid the double scrollbars. I'm not sure the sidebar needs to scroll separately. (Can be a follow on.)

Update navigation to use the standard Patternfly vertical navigation. Add a project bar to the masthead when in the context of a project.

spadgett · 2017-09-01T16:43:21Z

Tests are passing. Thanks everyone.

[merge]

openshift-bot · 2017-09-01T16:48:15Z

Evaluated for origin web console test up to bc13e0e

openshift-bot · 2017-09-01T16:48:24Z

Origin Web Console Test Results: Running (https://ci.openshift.redhat.com/jenkins/job/test_pull_request_origin_web_console/111/) (Base Commit: 4be3793) (PR Branch Commit: bc13e0e)

openshift-bot · 2017-09-01T16:48:26Z

Evaluated for origin web console merge up to bc13e0e

openshift-bot · 2017-09-01T16:48:34Z

Origin Web Console Merge Results: SUCCESS (https://ci.openshift.redhat.com/jenkins/job/merge_pull_request_origin_web_console/95/) (Base Commit: 4be3793) (PR Branch Commit: bc13e0e)

spadgett mentioned this pull request Aug 14, 2017

[WIP] [DO_NOT_MERGE] pf header, vertical nav and secondary nav #1929

Closed

jeff-phillips-18 self-requested a review August 14, 2017 14:04

spadgett commented Aug 14, 2017

View reviewed changes

openshift-bot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Aug 17, 2017

rhamilto mentioned this pull request Aug 23, 2017

Fixing bug where mobile menu doesn't close when clicking a primary na… spadgett/origin-web-console#63

Merged

spadgett force-pushed the pf-vertical-nav branch from 6338ea7 to 13bd176 Compare August 24, 2017 20:03

spadgett removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Aug 24, 2017

rhamilto mentioned this pull request Aug 25, 2017

Vertical navigation is not keyboard accessible patternfly/patternfly-3#723

Closed

spadgett mentioned this pull request Aug 25, 2017

Bump origin-web-common to 0.0.48 #1967

Merged

spadgett force-pushed the pf-vertical-nav branch from d579700 to 9d2ae6f Compare August 25, 2017 18:34

spadgett changed the title ~~[WIP] [DO NOT MERGE] Use Patternfly vertical navigation and add project bar~~ Use Patternfly vertical navigation and add project bar Aug 28, 2017

spadgett changed the title ~~Use Patternfly vertical navigation and add project bar~~ [WIP] Use Patternfly vertical navigation and add project bar Aug 28, 2017

rhamilto mentioned this pull request Aug 28, 2017

Notifications drawer #1326

Merged

5 tasks

spadgett commented Aug 28, 2017

View reviewed changes

spadgett force-pushed the pf-vertical-nav branch from 512ac26 to 42c5218 Compare August 28, 2017 19:48

spadgett mentioned this pull request Aug 29, 2017

Notification counter loses state on page changes #1985

Closed

spadgett force-pushed the pf-vertical-nav branch from 73d5ae9 to 4435b27 Compare August 30, 2017 19:04

spadgett force-pushed the pf-vertical-nav branch from 69fa11d to 6176ddb Compare August 30, 2017 22:20

spadgett mentioned this pull request Aug 31, 2017

Avoid multiple selfsubjectrulesreviews requests openshift/origin-web-common#165

Merged

spadgett commented Aug 31, 2017

View reviewed changes

spadgett mentioned this pull request Aug 31, 2017

Bump origin-web-common to 0.0.51 #1992

Merged

spadgett commented Aug 31, 2017

View reviewed changes

spadgett force-pushed the pf-vertical-nav branch 2 times, most recently from 2111a81 to c2913bf Compare September 1, 2017 13:02

spadgett force-pushed the pf-vertical-nav branch from c2913bf to 2b2df05 Compare September 1, 2017 15:07

spadgett changed the title ~~[WIP] Use Patternfly vertical navigation and add project bar~~ Patternfly vertical navigation and project bar Sep 1, 2017

jeff-phillips-18 approved these changes Sep 1, 2017

View reviewed changes

rhamilto approved these changes Sep 1, 2017

View reviewed changes

Patternfly vertical navigation and project bar

bc13e0e

Update navigation to use the standard Patternfly vertical navigation. Add a project bar to the masthead when in the context of a project.

spadgett force-pushed the pf-vertical-nav branch from aea7d40 to bc13e0e Compare September 1, 2017 16:42

openshift-bot merged commit 59d0df1 into openshift:master Sep 1, 2017

spadgett deleted the pf-vertical-nav branch September 1, 2017 20:26

spadgett mentioned this pull request Sep 4, 2017

Double scrollbar in events sidebar #2004

Closed

rhamilto mentioned this pull request Sep 5, 2017

Selected very long project names in the project picker result in horizontal scrollbar at mobile resolutions in Safari #1374

Closed

rhamilto mentioned this pull request Sep 15, 2017

Changing gray background color to darker gray #2086

Merged

david-martin mentioned this pull request Nov 17, 2017

💄 Update the selector classes to fix mobile icon size in nav feedhenry/mcp-standalone#220

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Patternfly vertical navigation and project bar #1932

Patternfly vertical navigation and project bar #1932

spadgett commented Aug 14, 2017 •

edited by rhamilto

spadgett Aug 14, 2017

rhamilto Aug 21, 2017

rhamilto Aug 23, 2017

spadgett Aug 25, 2017

spadgett Aug 29, 2017

spadgett commented Aug 25, 2017

spadgett Aug 28, 2017

sg00dwin Aug 29, 2017

spadgett Aug 28, 2017

sg00dwin Aug 29, 2017

spadgett commented Aug 30, 2017

spadgett Aug 31, 2017

spadgett commented Aug 31, 2017

spadgett commented Aug 31, 2017

spadgett Aug 31, 2017

rhamilto commented Aug 31, 2017 •

edited

spadgett commented Sep 1, 2017

spadgett commented Sep 1, 2017

rhamilto left a comment

spadgett commented Sep 1, 2017

spadgett commented Sep 1, 2017

spadgett commented Sep 1, 2017

openshift-bot commented Sep 1, 2017

openshift-bot commented Sep 1, 2017

openshift-bot commented Sep 1, 2017

openshift-bot commented Sep 1, 2017 •

edited

Patternfly vertical navigation and project bar #1932

Patternfly vertical navigation and project bar #1932

Conversation

spadgett commented Aug 14, 2017 • edited by rhamilto

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

spadgett commented Aug 25, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

spadgett commented Aug 30, 2017

Choose a reason for hiding this comment

spadgett commented Aug 31, 2017

spadgett commented Aug 31, 2017

Choose a reason for hiding this comment

rhamilto commented Aug 31, 2017 • edited

spadgett commented Sep 1, 2017

spadgett commented Sep 1, 2017

rhamilto left a comment

Choose a reason for hiding this comment

spadgett commented Sep 1, 2017

spadgett commented Sep 1, 2017

spadgett commented Sep 1, 2017

openshift-bot commented Sep 1, 2017

openshift-bot commented Sep 1, 2017

openshift-bot commented Sep 1, 2017

openshift-bot commented Sep 1, 2017 • edited

spadgett commented Aug 14, 2017 •

edited by rhamilto

rhamilto commented Aug 31, 2017 •

edited

openshift-bot commented Sep 1, 2017 •

edited