Feature/5760 update search bar to latest UI design #199
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Reviewing it now |
utas-raymondng
requested changes
Oct 24, 2024
| @@ -31,6 +33,8 @@ const searchQueryResult = (state: RootState) => | |||
|
|
|||
| const getComponentState = (state: RootState) => state.paramReducer; | |||
|
|
|||
| export { searchQueryResult, getComponentState }; | |||
| const getSearchbarExpanded = (state: RootState) => state.searchbar.isExpanded; | |||
There was a problem hiding this comment.
Is it necessary to use store to remember state of the component? Can we determine it by text inside and then use similar approach as the map expand which signal the component event?
You can find code in map.tsx, that is you try to observer a component resize and act accordingly
// Create a resize observer to the canvas so we know if its size have changed
// and we need to redraw the map
const resizeObserver = new ResizeObserver((entries) =>
// https://stackoverflow.com/questions/70533564/mapbox-gl-flickers-when-resizing-the-container-div
setTimeout(() => map.resize(), 0.1)
);
resizeObserver.observe(map.getContainer());
There was a problem hiding this comment.
Seems I made things complicated...I removed the change in redux and mange the search bar width in Header. Thanks!
I will raise a ticket to refactor all the style constants in one file for next iteration. Thanks Raymond! |
NekoLyn
deleted the
feature/5760-update-search-bar-to-latest-UI-design
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
update searchbar UI to latest design
remove the parameter chips of filters, only displaying a badge with number indicate number of selected filter options
both the 'filter' button and the 'search' button belong to the searchbar button group. They are all expandable (showing icon and button name at the same time instead of only icon) and only one button is expanded at a time in the group.
searchbar in landing page:
improve the key-enter-search function: do search right after press enter
searchbar in search result page:
only appears in header, and looks shorter than normal
will expand when there exists text input or text input field is focused
the expansion of searchbar will make the menu in header collapse into an icon (click to open)
if no text input and text input field is not focused, searchbar will shrink to the shorter one