Refactor backend UI to improve accessibility and use Vue.js #5865

NateWr · 2020-05-13T15:21:20Z

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 (Implement modals/tabs support in Vue.js #3595)
Adds technique for accessing global constants, locale strings and CSRF token in Vue.js (Consider global translation strings handling in UI Library components #4639, Inject constant dependencies directly into Vue components #4379)
Replaces announcements grid with new list panel. (Replace announcements grid with Vue.js 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.

Migrate changes to OPS.
Add a database migration to change the announcements expiryDate from DATETIME to DATE.
Refactor select list panels in Allow subeditors to be assigned to Categories #5694.
- OMP appears to have a category list panel in its SeriesForm that needs to be fixed.
Refactor select reviewer list panel to use new FilterSlider. Add range slider for filter by last activity in submissions list #5601
Refactor scheduling in issue workflow to use one modal, a clearer set of steps, and a cancel button. Editors fail to schedule for publication #5532

PRs (not ready for merge):
pkp/ui-library#88
#5866
pkp/ojs#2746
pkp/omp#812
pkp/ops#38
pkp/quickSubmit#48
pkp/citationStyleLanguage#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 (Restore use of browser history for tabbed navigation #2773)

The text was updated successfully, but these errors were encountered:

NateWr · 2020-05-13T15:33:50Z

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 · 2020-05-13T15:35:30Z

The user nav has been tidied up.

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

NateWr · 2020-05-13T15:36:37Z

New toast-style notifications.

NateWr · 2020-05-13T15:37:42Z

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

alexxxmendonca · 2020-05-13T15:41:41Z

This all looks so beautiful 😍
👍 👍 👍 👍

- Fixes incorrect color for scheduled submissions in archives. - Fixes URLs that open-to-tab with #anchors. - Adds Page components for backend site layout. - Adds toast-style notifications. - Adds support for modals and dialogs controlled by Vue.js. - Adds global CSRF token. - Adds global locale keys. - Adds global constants. - Adds AnnouncementsListPanel. - Refactors backend site layout with new approach to header and site navigation. - Refactors ListPanels to use slots and removes support for ordering and selecting items. - Removes SelectSubmissionsListPanel. - Refactors buttons to use a slot. - Some components like buttons are now globally available. - Updates documentation to reflect these changes.

- Fix editLinks don't open correct tab. - Adds /announcements REST API endpoints. - Replaces announcements grid with list panel. - Move JS globals out of jQuery namespace. - Use Vue.js Page components for backend site layout. - Refactors backend site layout with new approach to header and site navigation. - Refactors ListPanels to use slots. - Replaces SelectSubmissionsListPanel with slot-based template. - Replace PNotify toast-style notifications. - Add new patterns for passing locale keys, constants and CSRF token to the browser. - Make some components like buttons globally available. - Remove Underscores.js.

asmecher · 2020-05-13T16:10:34Z

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. 💯

- Refactors backend site layout with new approach to header and site navigation. - Adds /announcements REST API endpoints. - Replace PNotify toast-style notifications. - Refactors ListPanels to use slots. - Replaces SelectSubmissionsListPanel with slot-based template. - Add new patterns for passing locale keys, constants and CSRF token to the browser.

- Refactors backend site layout with new approach to header and site navigation. - Replace PNotify toast-style notifications. - Refactors ListPanels to use slots. - Add new patterns for passing locale keys, constants and CSRF token to the browser.

- Fixes incorrect color for scheduled submissions in archives. - Fixes URLs that open-to-tab with #anchors. - Adds Page components for backend site layout. - Adds toast-style notifications. - Adds support for modals and dialogs controlled by Vue.js. - Adds global CSRF token. - Adds global locale keys. - Adds global constants. - Adds AnnouncementsListPanel. - Refactors backend site layout with new approach to header and site navigation. - Refactors ListPanels to use slots and removes support for ordering and selecting items. - Removes SelectSubmissionsListPanel. - Refactors buttons to use a slot. - Some components like buttons are now globally available. - Updates documentation to reflect these changes.

- Fix editLinks don't open correct tab. - Adds /announcements REST API endpoints. - Replaces announcements grid with list panel. - Move JS globals out of jQuery namespace. - Use Vue.js Page components for backend site layout. - Refactors backend site layout with new approach to header and site navigation. - Refactors ListPanels to use slots. - Replaces SelectSubmissionsListPanel with slot-based template. - Replace PNotify toast-style notifications. - Add new patterns for passing locale keys, constants and CSRF token to the browser. - Make some components like buttons globally available. - Remove Underscores.js.

- Refactors backend site layout with new approach to header and site navigation. - Adds /announcements REST API endpoints. - Replace PNotify toast-style notifications. - Refactors ListPanels to use slots. - Replaces SelectSubmissionsListPanel with slot-based template. - Add new patterns for passing locale keys, constants and CSRF token to the browser.

- Fixes incorrect color for scheduled submissions in archives. - Fixes URLs that open-to-tab with #anchors. - Adds Page components for backend site layout. - Adds toast-style notifications. - Adds support for modals and dialogs controlled by Vue.js. - Adds global CSRF token. - Adds global locale keys. - Adds global constants. - Adds AnnouncementsListPanel. - Refactors backend site layout with new approach to header and site navigation. - Refactors ListPanels to use slots and removes support for ordering and selecting items. - Removes SelectSubmissionsListPanel. - Refactors buttons to use a slot. - Some components like buttons are now globally available. - Updates documentation to reflect these changes.

- Fix editLinks don't open correct tab. - Adds /announcements REST API endpoints. - Replaces announcements grid with list panel. - Move JS globals out of jQuery namespace. - Use Vue.js Page components for backend site layout. - Refactors backend site layout with new approach to header and site navigation. - Refactors ListPanels to use slots. - Replaces SelectSubmissionsListPanel with slot-based template. - Replace PNotify toast-style notifications. - Add new patterns for passing locale keys, constants and CSRF token to the browser. - Make some components like buttons globally available. - Remove Underscores.js.

asmecher · 2020-06-25T23:08:21Z

@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 · 2020-06-29T10:10:03Z

Thanks! Should be fixed in pkp/omp@dc03e34. I'll monitor the build and close this if it's passing.

NateWr · 2020-06-30T07:47:48Z

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 · 2020-07-02T22:06:01Z

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 · 2020-07-06T16:12:57Z

OMP was missing some of the new code for announcements.

PR:
pkp/omp#846

pkp/pkp-lib#5865 Fix fatal error with missing announcements

NateWr · 2020-07-07T08:26:44Z

The OMP master branch should be fixed now.

…in backend UI

This commit also fixes the notification request that was broken during the UI refactor in pkp#5865.

- Refactors backend site layout with new approach to header and site navigation. - Adds /announcements REST API endpoints. - Replace PNotify toast-style notifications. - Refactors ListPanels to use slots. - Replaces SelectSubmissionsListPanel with slot-based template. - Add new patterns for passing locale keys, constants and CSRF token to the browser.

pkp/pkp-lib#5865 Major refactor to backend UI

- Fixes incorrect color for scheduled submissions in archives. - Fixes URLs that open-to-tab with #anchors. - Adds Page components for backend site layout. - Adds toast-style notifications. - Adds support for modals and dialogs controlled by Vue.js. - Adds global CSRF token. - Adds global locale keys. - Adds global constants. - Adds AnnouncementsListPanel. - Refactors backend site layout with new approach to header and site navigation. - Refactors ListPanels to use slots and removes support for ordering and selecting items. - Removes SelectSubmissionsListPanel. - Refactors buttons to use a slot. - Some components like buttons are now globally available. - Updates documentation to reflect these changes.

…ication

…form

pkp/pkp-lib#5865 Major refactor to backend UI

…in backend UI

NateWr added Enhancement:3:Major A new feature or improvement that will take a month or more to complete. UI/UX Review labels May 13, 2020

NateWr added this to the OJS/OMP 3.3 (Unconfirmed) milestone May 13, 2020

NateWr self-assigned this May 13, 2020

asmecher reopened this Jun 25, 2020

NateWr mentioned this issue Jun 30, 2020

OJS 3.2 Tab "Help" overlapping top bar menu in the dashboard #6013

Closed

ajnyga pushed a commit to ajnyga/omp that referenced this issue Jul 1, 2020

pkp/pkp-lib#5865 Fix error in chapter form author options

dc03e34

This was referenced Jul 2, 2020

Add reviewer modal expanding reviewer details javascript error #6024

Closed

pkp/pkp-lib#5865 Fix fatal error with missing announcements pkp/omp#846

Merged

NateWr added a commit to NateWr/omp that referenced this issue Jul 6, 2020

pkp/pkp-lib#5865 Fix fatal error with announcements

b7eaf59

NateWr added a commit to pkp/omp that referenced this issue Jul 7, 2020

Merge pull request #846 from NateWr/i5865_omp_tests

906a4e0

pkp/pkp-lib#5865 Fix fatal error with missing announcements

NateWr closed this as completed Jul 7, 2020

NateWr mentioned this issue Jul 20, 2020

Lazyload property causes PHP Notice #6101

Closed

salmanm2003 added a commit to ubiquitypress/ops that referenced this issue Jul 28, 2020

pkp/pkp-lib#5865 Add to migration process

3a7db97

NateWr mentioned this issue Oct 7, 2020

Review form button placement #1980

Closed

NateWr added a commit to pkp/ui-library that referenced this issue Nov 4, 2020

pkp/pkp-lib#5865 Make return link header scroll with the main header …

88352f1

…in backend UI

NateWr added a commit to NateWr/pkp-lib that referenced this issue Nov 10, 2020

pkp#6234 Make overdue reviews notice clearer for authors

a34fa1b

This commit also fixes the notification request that was broken during the UI refactor in pkp#5865.

NateWr mentioned this issue Nov 10, 2020

pkp/pkp-lib#6234 Make overdue reviews notice clearer for authors #6327

Merged

NateWr added a commit to pkp/exampleImportExport that referenced this issue Nov 27, 2020

pkp/pkp-lib#5865 Update with changes to UI refactor in 3.3

c1f76e3

asmecher mentioned this issue Jan 7, 2021

ONIX 3.0 Monograph Export Plugin - wrong instructions #6551

Closed

JackBlackLight pushed a commit to cul/ojs-plugin-doi that referenced this issue Sep 15, 2021

Merge pull request #2746 from NateWr/i5865_ui_refactor

6f7da08

pkp/pkp-lib#5865 Major refactor to backend UI

henriqueramos pushed a commit to henriqueramos/ui-library that referenced this issue Jan 20, 2022

pkp/pkp-lib#5865 Use correct label when unpublishing a scheduled publ…

70d7fdd

…ication

henriqueramos pushed a commit to henriqueramos/ui-library that referenced this issue Jan 20, 2022

pkp/pkp-lib#5865 Remove unused data helpers

7608a38

henriqueramos pushed a commit to henriqueramos/ui-library that referenced this issue Jan 20, 2022

pkp/pkp-lib#5865 Fix title doesn't update after saving titleAbstract …

c55b1fa

…form

henriqueramos pushed a commit to henriqueramos/ui-library that referenced this issue Jan 20, 2022

Merge pull request pkp#88 from NateWr/i5865_ui_refactor

2d94064

pkp/pkp-lib#5865 Major refactor to backend UI

henriqueramos pushed a commit to henriqueramos/ui-library that referenced this issue Jan 20, 2022

pkp/pkp-lib#5865 Make return link header scroll with the main header …

d25c955

…in backend UI

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor backend UI to improve accessibility and use Vue.js #5865

Refactor backend UI to improve accessibility and use Vue.js #5865

NateWr commented May 13, 2020 •

edited

Loading

NateWr commented May 13, 2020

NateWr commented May 13, 2020

NateWr commented May 13, 2020

NateWr commented May 13, 2020

alexxxmendonca commented May 13, 2020

asmecher commented May 13, 2020

asmecher commented Jun 25, 2020

NateWr commented Jun 29, 2020

NateWr commented Jun 30, 2020

willinsky commented Jul 2, 2020

NateWr commented Jul 6, 2020

NateWr commented Jul 7, 2020

Refactor backend UI to improve accessibility and use Vue.js #5865

Refactor backend UI to improve accessibility and use Vue.js #5865

Comments

NateWr commented May 13, 2020 • edited Loading

NateWr commented May 13, 2020

NateWr commented May 13, 2020

NateWr commented May 13, 2020

NateWr commented May 13, 2020

alexxxmendonca commented May 13, 2020

asmecher commented May 13, 2020

asmecher commented Jun 25, 2020

NateWr commented Jun 29, 2020

NateWr commented Jun 30, 2020

willinsky commented Jul 2, 2020

NateWr commented Jul 6, 2020

NateWr commented Jul 7, 2020

NateWr commented May 13, 2020 •

edited

Loading