UI Spring Cleaning: Note info panels #2622

codebykat · 2021-02-03T06:58:51Z

Fix

Split note info component into two components, NoteInfo and NoteActions.
Remove publish note info from Share dialog
Remove redundant icons from the note toolbar

Fixes #2569

Known issues:

There's a bug where if you check a checkbox repeatedly. This has to do with updates to the note coming back from GAE. The timing can be off and GAE will send an update basically undoing one of the changes in-app. This isn't something we are going to fix right now as it would involve substantial work in GAE. Thanks, @dmsnell for helping track this down.
Dark mode colors aren't 100% and will be updated separately.

Screenshots

Before:

Light Mode

Dark Mode

After:

Light Mode

Note info w/ references

Note info no references

Note Actions

Dark Mode

Note info w/ references

Note info no references

Note Actions

Test

Open a note
Notice new note toolbar
Click on the new info (i) icon
Notice the new info dialog
Click the new actions (...) icon
Ensure all options work as expected
Smoke test in light and dark mode ensuring styles are correct

Release Notes

Updates the note toolbar and note info sidebar to be two dialogs, one for note info, and one for note actions.

codebykat · 2021-02-24T22:59:04Z

SVG checkbox backgrounds: checkboxes.zip

Currently known issues:

Checkboxes need these svgs as background
Dark mode background colors don't look correct
Checkboxes aren't vertically aligned correctly

dcalhoun

I know this still a work in progress, but figured I'd provide some thoughts that may be helpful as we work to complete this.

lib/note-actions/index.tsx

lib/note-info/index.tsx

dcalhoun · 2021-03-10T19:52:04Z

I noticed that 02b338c heavily modifies the package-lock.json. It would appear it changes the lock file version, which I believe occurs if you switch from npm@6 to npm@7. Just wanted to call attention to this to make sure this was an intentional change. The GB Mobile team ran into a few issues that delayed us from moving to npm@7 for a little while.

sandymcfadden · 2021-03-10T20:40:50Z

Thank you so much @dcalhoun for catching that and helping me fix it. You were totally right I was using npm@7 and now back to npm@6.

SylvesterWilmott · 2021-03-24T13:55:53Z

Looks good! Thanks @sandymcfadden

A couple of requests:

When publish is pressed in the note options, can we position the spinner on the right hand side of the row and at the same size and colour as the checkbox icons.
Pressing the "..." icon in the editor always opens the note options, even if it's already open. Instead, the "..." icon should be a toggle for the menu where pressing it a second time should hide the note options menu.
In the note info, can we add the synced time as the top-most item and change the label to "Last synced" to align with Android.
In the note options, let's keep the interaction with each row consistent. In the rows with the checkbox we require a click in the checkbox itself. Let's make it so anywhere in the row can be clicked.

sandymcfadden · 2021-03-24T19:13:41Z

Thank you @SylvesterWilmott I have those items addressed now.

SylvesterWilmott · 2021-03-25T15:57:17Z

Looks great!

One last thing, can we position the options menu higher up? It looks like it's positioned so it doesn't overlap with the tooltips but it's okay if it does. The menu should be positioned 16px relative to the bottom of the toolbar (an approximation is fine).

sandymcfadden · 2021-03-25T17:08:58Z

Thanks again @SylvesterWilmott I have that position updated now as well.

codebykat · 2021-03-26T02:24:09Z

Yayyy this is looking very good!

I have some doubts about the checkbox color in dark mode, it seems very dark:

Here it is in light mode:

SylvesterWilmott · 2021-03-26T11:15:18Z

Nice spot @codebykat

The colour of these icons in dark mode should be gray30, currently they are set at gray50.

sandymcfadden · 2021-03-29T11:37:45Z

Thank you both @codebykat and @SylvesterWilmott I had the colors reversed for light and dark mode. I have it fixed up now.

codebykat · 2021-03-30T03:51:45Z

Looks great now, I love it!

…still dark theme on note info, dark theme hover on note actions, remove icons from menubar remove publish tab from sharing dialog ignore clickoutside on the icon, remove unused icons still terrible but slowly getting less terrible switch position of preview and checklist icon make publish checkbox work checkbox styling lint adjust note info styles, cross icon, reference link titles menu item and order changes Add checkbox styles Switching from using react-clickoutside to focus-trap-react Changing clickable divs to buttons Fix linting error in css Switch from onClickOutside to focus-trap-react on the note info dialog Fix package-lock.json file Improve note Action and Info focus management (#2737) Remove redundant focus management within note Info. React Modal provides its own focus trap logic, so wrapping with FocusTrap is unnecessary. Support ClipboardButton within focus trap for note actions. In order for clipboard.js to function properly within a focus trap, we must set a container that is "reachable" from within the focus trap. Update styles for when history is disabled Update note info styles to match designs. Update border and boxshadow of note actions Updates to the note action styles Add loading state for publishing note Remove commented out no longer needed styles Fix css linting error Testing a throttle on the pin note action Removing the throttle added in the previous commit Update styles for note info dialog

…ctions

codebykat added this to the 2.7.0 milestone Feb 3, 2021

codebykat added this to In progress in UI spring cleaning Feb 3, 2021

codebykat force-pushed the update/spring-cleaning-note-info branch from abef657 to 54a4044 Compare February 3, 2021 07:38

codebykat modified the milestones: 2.7.0, 2.8.0 Feb 5, 2021

codebykat force-pushed the update/spring-cleaning-note-info branch 4 times, most recently from 0e0a031 to fe2b8eb Compare February 12, 2021 00:18

codebykat force-pushed the update/spring-cleaning-note-info branch from b625b16 to 085b2e8 Compare February 24, 2021 22:38

sandymcfadden self-assigned this Mar 9, 2021

dcalhoun reviewed Mar 9, 2021

View reviewed changes

codebykat modified the milestones: 2.8.0, 2.9.0 Mar 10, 2021

sandymcfadden force-pushed the update/spring-cleaning-note-info branch from 863916f to d664f82 Compare March 22, 2021 12:54

sandymcfadden changed the title ~~[WIP] UI Spring Cleaning: Note info panels~~ UI Spring Cleaning: Note info panels Mar 22, 2021

sandymcfadden added the [status] needs design review label Mar 22, 2021

sandymcfadden requested review from SylvesterWilmott and a team March 22, 2021 13:43

sandymcfadden marked this pull request as ready for review March 22, 2021 13:44

sandymcfadden modified the milestones: 2.9.0, 2.10.0 Mar 30, 2021

SylvesterWilmott approved these changes Mar 31, 2021

View reviewed changes

SylvesterWilmott removed the [status] needs design review label Mar 31, 2021

codebykat and others added 8 commits April 8, 2021 09:06

Update some more note info styles to match designs

637d716

Don't close note info when clicking off of it. Must use close icon

4fdbd97

Fixing publish action spinner position and testing closing the note a…

80feb91

…ctions

Set a delay on closing the note action menu

3439443

Add pointer cursor styles to have actions be consistent

53502d1

Update position of the note action menu

732e2d3

Fix colors of the note action checkboxes

eba6779

sandymcfadden force-pushed the update/spring-cleaning-note-info branch from 44940fb to eba6779 Compare April 8, 2021 12:13

sandymcfadden merged commit 54b2428 into develop Apr 8, 2021

sandymcfadden deleted the update/spring-cleaning-note-info branch April 8, 2021 12:54

sandymcfadden moved this from In progress to Done in UI spring cleaning Apr 9, 2021

This was referenced Apr 9, 2021

Add note's tags to history screen #2817

Merged

Add: Standard checkbox style #2835

Merged

sandymcfadden mentioned this pull request Apr 20, 2021

While note is (un)published, changes to pinned/MD states are discarded Automattic/Simplenote-United#124

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI Spring Cleaning: Note info panels #2622

UI Spring Cleaning: Note info panels #2622

codebykat commented Feb 3, 2021 •

edited by sandymcfadden

codebykat commented Feb 24, 2021

dcalhoun left a comment •

edited

dcalhoun commented Mar 10, 2021

sandymcfadden commented Mar 10, 2021

SylvesterWilmott commented Mar 24, 2021

sandymcfadden commented Mar 24, 2021

SylvesterWilmott commented Mar 25, 2021

sandymcfadden commented Mar 25, 2021

codebykat commented Mar 26, 2021

SylvesterWilmott commented Mar 26, 2021

sandymcfadden commented Mar 29, 2021

codebykat commented Mar 30, 2021

UI Spring Cleaning: Note info panels #2622

UI Spring Cleaning: Note info panels #2622

Conversation

codebykat commented Feb 3, 2021 • edited by sandymcfadden

Fix

Test

Release Notes

codebykat commented Feb 24, 2021

dcalhoun left a comment • edited

Choose a reason for hiding this comment

dcalhoun commented Mar 10, 2021

sandymcfadden commented Mar 10, 2021

SylvesterWilmott commented Mar 24, 2021

sandymcfadden commented Mar 24, 2021

SylvesterWilmott commented Mar 25, 2021

sandymcfadden commented Mar 25, 2021

codebykat commented Mar 26, 2021

SylvesterWilmott commented Mar 26, 2021

sandymcfadden commented Mar 29, 2021

codebykat commented Mar 30, 2021

codebykat commented Feb 3, 2021 •

edited by sandymcfadden

dcalhoun left a comment •

edited