Pkp-lib: Refactor backend UI to improve accessibility and use Vue.js

[NateWr]

This issue describes work on the editorial and administrative backend that provides a new page architecture driven by Vue.js. A short summary of this work includes:

• Adds new page layout that increases focus on main content and removes the main navigation menu for users with only one navigation item. (See screenshots).
• Migrates navigation menus and header dropdowns to Vue.js. (See screenshots).
• Refactors ListPanel components to use slots in order to be easier to build and extend.
• Adds Vue.js support for modals and dialogues (#3595)
• Adds technique for accessing global constants, locale strings and CSRF token in Vue.js (#4639, #4379)
• Replaces announcements grid with new list panel. (#4081)
• Replaces PNotify with own toast-style notifications. (See screenshots).
• UI Library documentation restructured to document utilities and pages.
• Restores ability to open to a tab with an #anchor. Use #parent-tab/child-tab to reach nested tabs.
• Removes Underscore.js dependency.
• Uses more accessible technique to broadcast when forms are saved and saving. (See screenshots).
• <pkp-button> components use slots.

This work is not yet ready for merge. When it is clear to merge in 3.3, the following work needs to be done.

• [x] Migrate changes to OPS.
• [x] Add a database migration to change the announcements expiryDate from DATETIME to DATE.
• [x] Refactor select list panels in #5694.
  
  
  
  • [x] OMP appears to have a category list panel in its SeriesForm that needs to be fixed.
  
  
• [x] Refactor select reviewer list panel to use new FilterSlider. #5601
• [ ] Refactor scheduling in issue workflow to use one modal, a clearer set of steps, and a cancel button. #5532

PRs (not ready for merge):
https://github.com/pkp/ui-library/pull/88
https://github.com/pkp/pkp-lib/pull/5866
https://github.com/pkp/ojs/pull/2746
https://github.com/pkp/omp/pull/812
https://github.com/pkp/ops/pull/38
https://github.com/pkp/quickSubmit/pull/48
https://github.com/pkp/citationStyleLanguage/pull/71

Additional work that would be nice to include if time permits:

• [ ] The main navigation menu should be sticky if it is not too tall for the browser window.
• [ ] Several basic components, such as <badge> and <pkp-button> have been made global components. More components could be made global so that they can be used by plugins.
• [ ] Support browser history in tabs (#2773)

[NateWr]

A new page layout that provides more breathing space.

Users that have only one navigation item (authors, reviewers, section editors, subscription managers) don't see a navigation menu.

When not on their "home" page (submissions or payments), they get a link back to it in the header.

[NateWr]

The user nav has been tidied up.

And includes a clear indication when logged in as another user.

[NateWr]

New toast-style notifications.

[NateWr]

Forms now broadcast their Saving/Saved status messages in a more accessible way.

[alexxxmendonca]

This all looks so beautiful 😍
👍 👍 👍 👍

[asmecher]

Jeez, @NateWr, I'm practically blind to the UI I'm working with when I get so used to it -- but when improvements like these are proposed they seem so obvious in hindsight. :100:

[NateWr]

All merged!

[NateWr]

An error during rebase led to a fatal error with announcements. The PR below fixes that and adds a test to catch further regressions.

PR:
https://github.com/pkp/pkp-lib/pull/6034

Tests:
https://github.com/pkp/ojs/pull/2820

[asmecher]

@NateWr, I think this broke the Travis tests for OMP master. The log fills with:

PHP Warning:  Illegal string offset 'id' in /home/travis/build/pkp/omp/controllers/grid/users/chapter/form/ChapterForm.inc.php on line 151

...until Travis kills the job because of log length.

[NateWr]

Thanks! Should be fixed in https://github.com/pkp/omp/commit/dc03e3438677423b02d64ac5ca51ff346f16f2fd. I'll monitor the build and close this if it's passing.

[NateWr]

I think I fixed it in the commit above, but I can't actually find a build of OMP reflecting that. Is there a way in Travis to kick off a test on the latest master branch, short of raising a PR on it?

[willinsky]

Let me leave my compliments, as well, Nate, for the clean, informative, tasteful UI design.

On this one design below, I wondered about the way that the article title lacks the white framing background and just sits in the background. I'd suggest keeping the pattern from the submissions list of author in bold over the title only set it in its own narrowly framed box of white (or very light gray) background. I wouldn't line it up with "Library" as it suggests some connection. There is no "Help" tab in this one, which I wasn't sure about but Library is in more of that category, as a resource, and could be placed either where Help goes or near Help if Help is to be added.

[NateWr]

OMP was missing some of the new code for announcements.

PR:
https://github.com/pkp/omp/pull/846

[NateWr]

The OMP master branch should be fixed now.