Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add search module bar into landscape screen #11151

Merged
merged 35 commits into from
Oct 21, 2024
Merged

add search module bar into landscape screen #11151

merged 35 commits into from
Oct 21, 2024

Conversation

renanfranca
Copy link
Contributor

@renanfranca renanfranca commented Oct 18, 2024 •
edited
Loading

A demo video showing how it works (in Full HD and smoothly captured with my Graphics card):

search_module_bar_demo_fullhd.mp4

I did my best here, and I hope it is a great enhancement to the landscape screen experience. The search module bar does not show on small screens:

image

@renanfranca
test: add test to confirm if the search module bar is rendered
5a80fe0
@renanfranca
feat: add search module bar into Landscape.html
6d5dd35
@renanfranca
refactor: change test name
b483833
@renanfranca
test: add test to highlight first module found in landscape search
ee160c6
@renanfranca
feat: add search functionality to landscape view
2f937ec
@renanfranca
refactor: use @input instead of watch with v-model to perform search
2781978
@renanfranca
refactor: simplify landscape component validation logic
db0f054
@renanfranca
test: add test that should remove the highlight when the input is cle…
99e674f 
…ared
@renanfranca
test: add test for search query not matching any modules
ee79a65
@renanfranca
refactor: extract search test setup and perform search into helper fu…
66782fc 
…nctions
@renanfranca
feat: add scrollIntoView feature to LandscapeScroller.ts
00a80de
@renanfranca
test: add tests that should scroll the screen to the highlighted modu…
db90461 
…le if it is not visible within the current viewport, and another test that should not scroll if the highlighted module is already visible
@renanfranca
feat: add scroll to highlighted module
d8611f3
@renanfranca
test: fix mocks of the elements out of Viewport or in Viewport
7f40b21
@renanfranca
feat: improve scrolling behavior for highlighted module
84d2192
@renanfranca
test: fix the landscape-container mock to test the scroll to highligh…
5435a11 
…t module feature
@renanfranca
test: refactor the search module bar scroll tests to avoid code dupli…
4f6cb62 
…cation
@renanfranca
refactor: remove unnecessary if branch to avoid creating tests solely…
bfc1a44 
… to meet 100% code coverage
@renanfranca
refactor: change methods order to make it easier to read and understa…
43917fd 
…nd in Landscape.component.ts
@renanfranca
test: add test to highlight the first feature found
ca83a5f
@renanfranca
test: remove unnecessary mockRestore call since every test is atomic …
ad3886c 
…and self-contained
@renanfranca
feat: reset the landscape container position to the initial landscape…
ae72bba 
… layout when the search query is cleared
@renanfranca
refactor: improve code quality and readability from highlightModule m…
a8dc881 
…ethod in Landscape.component.ts
@renanfranca
feat: scroll smooth when reset the landscapeContainer position in Lan…
0c97983 
…dscape.component.ts
@renanfranca
feat: add styles to the search module bar and highlight around the fo…
2397e03 
…und module
@renanfranca
feat: add z-index to anchor-point be on top of the highlighted module…
346328d 
… css class in landscape component
@renanfranca
refactor: move the highlight module pulse animation to _animation.scss
ef1eca3
@renanfranca
refactor: move .-search-highlighted to a better location in _landscap…
814ef62 
…e.scss
@renanfranca
refactor: create scss variable for the attention highlight color in _…
d5181a1 
…colors.scss
@renanfranca
feat: hide the search module bar when the screen size is small
7c39321
@renanfranca
feat: remove the .-search-highlight animation because it is overlayin…
5b730a8 
…g the .-selectable-highlighted and .-not-selectable-highlighted, which are more important to explain the dependency restriction rules
@renanfranca renanfranca self-assigned this Oct 18, 2024
@renanfranca
Copy link
Contributor Author

Thank you, @qmonmert and @DamnClin, for the review! I made the changes, please, let me know if everything looks good now. 👍

PS: The use of Optional made the code much more elegant. 😄✌

@renanfranca renanfranca merged commit bc6b61f into jhipster:main Oct 21, 2024
35 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@DamnClin DamnClin DamnClin left review comments

@qmonmert qmonmert qmonmert approved these changes

@pascalgrimaud pascalgrimaud Awaiting requested review from pascalgrimaud

Assignees

@renanfranca renanfranca

Labels
area: feature request 💡 generator: internal
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Add a search module bar to the landscape screen
3 participants
@renanfranca @qmonmert @DamnClin