[GSoC] Quick navigation UI #396

sofiaromorales · 2022-07-20T04:15:16Z

Bug/issue #, if applicable: NA

Summary

UI for Quick Navigation feature with keyboard navigation support

Dependencies

NA

Testing

Steps:

Set the quickNavigation.enable flag to true inside theme-settings.json in the swift project theming settings (https://www.swift.org/documentation/docc/customizing-the-appearance-of-your-documentation-pages)
Preview the documentation
Open the quick navigation modal component by clicking on the button inside the filter input, / key or ⌘ + shift + o
Type something inside the input bar to trigger the fuzzy search
Assert that the symbols listed correspond to your input
Use arrow keys to move through the results list
Press Enter to access the symbol

Demo: https://sofiaromorales.github.io/SwiftDocC/documentation/swiftdocc

Checklist

Make sure you check off the following items. If they cannot be completed, provide a reason.

Added tests
Ran npm test, and it succeeded
Updated documentation if necessary

…tion * Introduced a new component "QuickNavigationModal" that serves as UI for the new searching functionality. * New regex pattern to match symbol titles by fuzzy and string match. * Data store to control the Quick navigation modal from anywhere on the app without having to pass the data through multiple child compoents. This change is under the quickNavigation feature flag.

…rance of a character

…fiaromorales/swift-docc-render into sr/quick-navigation/algorithm

* Refactor of match highlighter for Safari support using `QuickNavigationHighlighter` component * Code quality improvements suggested on pr review

* Quick navigation modal with redesigned UI * Keyboard navigation support

* `QuickNavigationModal` unit tests * `QuickNavigationHighlighter` unit tests * Styling refactor * Minor UI fixes

sofiaromorales · 2022-07-28T06:01:42Z

@marinaaisa ready for review :)

marinaaisa

Thanks, Sofía!
I started reviewing your PR, I'll continue tomorrow. I leave you some comments in the meantime.

src/components/Filter/FilterInput.vue

src/components/Navigator/NavigatorCard.vue

* Implemented tab navigation on matches list * Changes to sorting logic to create more predictable results * Made matching algorithm case insensitive * Code cleanup

marinaaisa

Hi Sofía, thanks a lot for this huge PR! It's great work 🙌 I added some comments.

My main concerns is to see how we can do FilterInput more generic without adding specific logic to it. I left comments about it. Also, there is an AX issue with the keyboard tabbing backwards, I left another comment.

Congratulations on the tests, I'll see if we can add more and let you know. But your current progress on testing is very very good :)

src/components/Navigator/QuickNavigationModal.vue

src/components/Filter/FilterInput.vue

src/components/Navigator/QuickNavigationModal.vue

src/views/DocumentationTopic.vue

tests/unit/components/Navigator/QuickNavigationModal.spec.js

* Freezing the index added into the store

* Input select with `cmd+A` * Padding reduced and modal size increased * Wrap around while scrolling up (closes #412) * Modal resize on narrower viewports (closes #411) * Removal of space character from the search * Parent symbols transformed to original case * Debounce time reduced

* `QuickNavigationBar` component * `QuickNavigationBar` test file

marinaaisa · 2022-09-27T16:05:39Z

I still see some regressions on the FilterInput

We should delete the padding on the clear-rounded-icon because it adds an extra 5px into the view.
Also the clear-rounded-icon elements looks visually much bigger than the filter__filter-button element so I would reduce its width to 12px.

Currently:

Proposed changes:

Also there is an extra left spacing on the quick-navigation__magnifier-icon-container that we may want to remove too.

… on the value of `enableNavigator` to prevent trying to fetch data when the archive does not come with an index. Also, the logic to open `QuickNavigationModal ` depends on `enableNavigator`.

…into a utility file to clean up `NavigatorDataProvider`

src/components/Navigator/QuickNavigationModal.vue

src/views/DocumentationTopic.vue

src/components/GenericModal.vue

marinaaisa

Hey @sofiaromorales , I left couple of more comments.
I'll continue reviewing next week, hopefully we get to merge it soon, sorry for the delay. It's taking a long time but the progress and feature is big and amazing! Thanks again! :)

src/components/Navigator/QuickNavigationModal.vue

marinaaisa · 2022-10-21T18:11:01Z

src/components/Navigator/QuickNavigationModal.vue

+      color: var(--color-figure-blue);
+    }
+  }
+  &__match-list {
    overflow: scroll;


In Chrome, with an macOS system config of "Show scroll bar... Automatically"

This overflow scroll is creating a jumping effect and also an extra padding in the bottom when there is no results.

overflow-jump.mov

Thanks for catching this, Marina. I fixed the padding overflow by setting the height to 0, but the layout shift is more tricky to fix, scrollbars, when set to show always, reposition the web content causing that jumping effect, overflow-y: overlay seems to fix it but is not widely supported by all browsers.

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#browser_compatibility

You can check the implementation here 76dfe47

tests/unit/utils/indexData.spec.js

tests/unit/components/Navigator/QuickNavigationModal.spec.js

marinaaisa · 2022-10-24T17:31:35Z

Just a quick UI detail:

Whenever we have the focus on the Quick Navigation's filter, we may want to delete the border line on top of the match list. To achieve this you can add this line of CSS

.quick-navigation__filter.focus + .quick-navigation__match-list {
  border-top: 0;
}

…ser input into a valid string for fuzzy match

`indexData`utils file renamed to `navigatorData` Removed border-top form match list on focus

sofiaromorales · 2022-10-27T18:37:34Z

Thanks a lot for the review and patience @marinaaisa! Do you think it's safe to merge this already? I want to give people the opportunity to test quick navigation in their documentation, this way I can receive feedback and discover new bugs if any, and since it's under a feature flag, it will not affect the current functionality of the project

marinaaisa · 2022-10-31T17:48:38Z

@swift-ci test

marinaaisa

Congratulations on your hard work, Sofia, it's ready to be merged :)

sofiaromorales added 19 commits June 18, 2022 15:26

feat - Initial commit with quick navigation algorithm

f810a32

Fuzzy match algorithm made with regex only

616a78a

Tests for quick navigation component

7140bae

Merge branch 'main' into sr/quick-navigation/algorithm

988ac70

fix: Reversed changes of package-lock.json

a3c7271

fix: inputCoincidencesRegexPattern now only matches the first appea…

bf6823a

…rance of a character

fix: Remove hard coded items inside flatten Index state + fixed typo

2fd6f7b

Merge branch 'main' into sr/quick-navigation/algorithm

1e8f806

Merge branch 'main' into sr/quick-navigation/algorithm

6d545cd

Merge branch 'sr/quick-navigation/algorithm' of https://github.com/so…

4e6b434

…fiaromorales/swift-docc-render into sr/quick-navigation/algorithm

fix: Fuzzy match highlighting

c2d8214

* Refactor of match highlighter for Safari support using `QuickNavigationHighlighter` component * Code quality improvements suggested on pr review

feat: Quick navigation UI

a3170fe

* Quick navigation modal with redesigned UI * Keyboard navigation support

Merge branch 'main' into sr/quick-navigation/ui

86b4715

feat: Quick navigation unit tests

0ab2e19

* `QuickNavigationModal` unit tests * `QuickNavigationHighlighter` unit tests * Styling refactor * Minor UI fixes

Merge branch 'main' into sr/quick-navigation/ui

45aa06a

fix: Code cleanup

73fdb01

fix: cleanup

a18c5fe

fix: tests updated

b977af9

sofiaromorales marked this pull request as ready for review July 28, 2022 06:01

marinaaisa requested changes Aug 1, 2022

View reviewed changes

sofiaromorales added 3 commits August 7, 2022 00:54

feat: AX keyboard nav improvements

83c9145

* Implemented tab navigation on matches list * Changes to sorting logic to create more predictable results * Made matching algorithm case insensitive * Code cleanup

Merge branch 'main' into sr/quick-navigation/ui

bfc319f

fix: Code cleanup

34e2bd4

marinaaisa requested changes Aug 10, 2022

View reviewed changes

sofiaromorales added 4 commits August 16, 2022 00:22

fix: Requested changes

aaa7e4f

fix: Performance improvements

293c3a9

* Freezing the index added into the store

feat: New component to open Quick Navigation modal

155ef51

* `QuickNavigationBar` component * `QuickNavigationBar` test file

sofiaromorales added 6 commits September 29, 2022 11:33

refactor: NavigatorDataProvider is rendered conditionally depending…

4038fea

… on the value of `enableNavigator` to prevent trying to fetch data when the archive does not come with an index. Also, the logic to open `QuickNavigationModal ` depends on `enableNavigator`.

refactor: Moved methods related to the navigator index data provider …

c17ff68

…into a utility file to clean up `NavigatorDataProvider`

fix: Consistent margins on FilterInput and resize of clear icon

6c037be

Merge branch 'main' into sr/quick-navigation/ui

26171b6

fix failing test

e37e2f4

fix: Tests updated and obsolete snapshots removed

b09c7b3

marinaaisa reviewed Oct 4, 2022

View reviewed changes

src/components/Navigator/QuickNavigationModal.vue Outdated Show resolved Hide resolved

src/components/Navigator/QuickNavigationModal.vue Outdated Show resolved Hide resolved

src/views/DocumentationTopic.vue Outdated Show resolved Hide resolved

refactor: Code quality improvements and test cleanup

0b98f4c

marinaaisa reviewed Oct 4, 2022

View reviewed changes

src/components/GenericModal.vue Outdated Show resolved Hide resolved

sofiaromorales added 3 commits October 4, 2022 22:25

refactor: Styling for modal applied using /deep/ selector

2fa4743

refactor: Merged similar util files + code cleanup

c83834b

Merge branch 'main' into sr/quick-navigation/ui

4126b21

sofiaromorales requested a review from marinaaisa October 20, 2022 03:48

marinaaisa requested changes Oct 21, 2022

View reviewed changes

marinaaisa reviewed Oct 24, 2022

View reviewed changes

tests/unit/components/Navigator/QuickNavigationModal.spec.js Outdated Show resolved Hide resolved

sofiaromorales added 4 commits October 27, 2022 10:15

refactor: Added processedUserInput computed property to transform u…

39f81c6

…ser input into a valid string for fuzzy match

fix: Minor UI fixes, code cleanup, and file renaming

e39a36f

`indexData`utils file renamed to `navigatorData` Removed border-top form match list on focus

fix: Prevent content shifting when the scrollbar is visible

76dfe47

Merge branch 'main' into sr/quick-navigation/ui

b0646d5

marinaaisa self-requested a review October 31, 2022 17:48

Merge branch 'main' into sr/quick-navigation/ui

6cc23bd

marinaaisa approved these changes Oct 31, 2022

View reviewed changes

marinaaisa merged commit 2dd023d into swiftlang:main Oct 31, 2022

This was referenced Nov 1, 2022

[Quick Navigation] Quick Navigation modal doesn't resize on narrower viewports #411

Closed

[Quick Navigation] When typing in the filter bar, pressing '/' incorrectly shows the Quick Navigation modal #410

Closed

dobromir-hristov mentioned this pull request Nov 1, 2022

Fix issue with Navigator closing sibling trees #474

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[GSoC] Quick navigation UI #396

[GSoC] Quick navigation UI #396

sofiaromorales commented Jul 20, 2022 •

edited

Loading

sofiaromorales commented Jul 28, 2022

marinaaisa left a comment

marinaaisa left a comment

marinaaisa commented Sep 27, 2022

marinaaisa left a comment

marinaaisa Oct 21, 2022

sofiaromorales Oct 27, 2022

marinaaisa commented Oct 24, 2022

sofiaromorales commented Oct 27, 2022

marinaaisa commented Oct 31, 2022

marinaaisa left a comment

[GSoC] Quick navigation UI #396

[GSoC] Quick navigation UI #396

Conversation

sofiaromorales commented Jul 20, 2022 • edited Loading

Summary

Dependencies

Testing

Checklist

sofiaromorales commented Jul 28, 2022

marinaaisa left a comment

Choose a reason for hiding this comment

marinaaisa left a comment

Choose a reason for hiding this comment

marinaaisa commented Sep 27, 2022

marinaaisa left a comment

Choose a reason for hiding this comment

marinaaisa Oct 21, 2022

Choose a reason for hiding this comment

sofiaromorales Oct 27, 2022

Choose a reason for hiding this comment

marinaaisa commented Oct 24, 2022

sofiaromorales commented Oct 27, 2022

marinaaisa commented Oct 31, 2022

marinaaisa left a comment

Choose a reason for hiding this comment

sofiaromorales commented Jul 20, 2022 •

edited

Loading