organicmaps/organicmaps-tmp
Archived
13
Fork 1
Code Issues 2.7k Pull requests 182 Projects Releases 65 Wiki Activity Actions

[ios] Redesign and refactor main Search screen UI #10213

Merged
root merged 10 commits from ios/redesing-search-vc into master 2025-02-25 12:17:35 +00:00
Conversation 0 Commits 10 Files changed 55 +2207 -1955
kirylkaveryn commented 2025-02-05 13:49:11 +00:00
Member
Copy link

Closes https://github.com/orgs/organicmaps/projects/6/views/3?filterQuery=assignee:kirylkaveryn+search&pane=issue&itemId=35384557&issue=organicmaps%7Corganicmaps%7C5675

The suggested roadmap to complete the entire Search redesign (each step - one PR):

  • Implement the main search screen as a modal (on the iPad the screen is not changed - it is a side table) (current PR)
  • Update the screen style/table or collections cells design (organicmaps/organicmaps#10242)
  • Implement the filters collection under the search bar in the results table view
  • Core improvements (see todo core below)

Design

https://www.figma.com/file/NVxK4owQmNjEyjPCxHcvmS?node-id=0:1&locale=en&type=design

Discussion

Public view of Organic Maps | Zulip team chat

This PR:

  1. implements the search as a modal screen (rewritten on swift)
  2. the cpp code is removed from the UI components so they can be easily redesigned
  3. refactors the MWMSearch and related logic

TODO UI/UX:

  • Replace the navigation/route building search with the new modal screen and remove legacy code
  • The search should be enabled on the screen opened with the suggestions and categories
  • Remove the marks form the map on fast swipe
  • For the landscape the compact mode should be on Search tap
  • When the map is dragging the search screen should be collapsed
  • Smooth open/close/drag animation
  • Add searching placeholder view with activity indicator
  • Add empty result placeholder screen
  • Implement animation between the screens
  • Presentation controller for the ipad. For the ipad the search screen should be the same as earlier
  • Animate witching Between the states
  • Hide the search when PP is presented
  • Show the search when PP is hidden during the searching
  • Redesign the categories cell (maybe the collection like on the Yandex?)
  • Redesign the suggestions cell
  • Show the results when the search is finished
  • Collapse the screen when the search button is tapped to show the results
  • Hide keyboard on dragging or swiping
  • Hide keyboard on tap when results are empty
  • Fix Empty search Results layout - to be in the center
  • When results are empty show the searchNoResultsViewController should be always visible even in the compact mode
  • Scroll the presenter down on the swipe when the results are empty or the content offset is 0 (the table view is not scrolled) - the dumping shold not be used in this situation
  • Make the first opening animation faster and smoother (==solved by removing the custom animators so the system is using the native animations==)
  • Close the screen on the fast swipe (with high velocity)
  • Open on the full screen on fast swipe (high velocity)
  • Set search screen collapsed when the user starts dragging the map and bring back when ends
  • Update the Side controls + and - while searching (see the available area)
  • Show the results on the map
  • Investigate how the search works from the Navigation dashboard and Navigation view and replace with the new modal search screen
  • Handle the searching from the deepliks and other sources - see the MWMMapViewControlsManager
  • Enable the map searching (drawing the blue map marks) after the search screen is wake up from the hidden state - when the user selects the some poi and than goes back
  • Scroll to the closest step when the velocity is low but the transition is big - if the user scrolls to the top the screen should scroll to the fulls teen step and vice verse

TODO Core (not part of this PR):

  • Implement titles for the searching results marks organicmaps/organicmaps#10416
  • The selected mark should be bigger or highlighed by the color organicmaps/organicmaps#10417
  • The results zooming should be bigger to fit the results in the halfscreen mode on the phone organicmaps/organicmaps#10415
  • When searching not a category, but a regular search (“cleaning”) it displays the smaller circles/dots instead of category icons. The icons should be consistent withe the categories too (and be bigger)

Tested on:

  • iPhone 15 pro ios 18.2 (device)
  • iPhone 6 ios 12.5 (device)
  • iPhone 8 pro ios 15.5 (sim)
  • iPad 9 pro ios 15.2 (sim)
  • macOS

Results

image image image

Simulator Screen Recording - iPhone 16 Pro - 2025-02-05 at 17 46 14
Simulator Screen Recording - iPhone 16 Pro - 2025-02-05 at 17 46 30
Simulator Screen Recording - iPhone 16 Pro - 2025-02-05 at 17 47 00
Simulator Screen Recording - iPhone 16 Pro - 2025-02-05 at 17 48 30

Closes https://github.com/orgs/organicmaps/projects/6/views/3?filterQuery=assignee:kirylkaveryn+search&pane=issue&itemId=35384557&issue=organicmaps%7Corganicmaps%7C5675 ### The suggested roadmap to complete the entire Search redesign (each step - one PR): - [x] Implement the main search screen as a modal (on the iPad the screen is not changed - it is a side table) (current PR) - [x] Update the screen style/table or collections cells design (https://git.omaps.dev/organicmaps/organicmaps/pulls/10242) - [ ] Implement the `filters` collection under the search bar in the results table view - [ ] Core improvements (see todo core below) ### Design https://www.figma.com/file/NVxK4owQmNjEyjPCxHcvmS?node-id=0:1&locale=en&type=design ### Discussion [Public view of Organic Maps \| Zulip team chat](https://organicmaps.zulipchat.com/#narrow/stream/418347-UI.2FUX-Design/topic/.235675.20Improve.20Search.20UI) ### This PR: 1. implements the search as a modal screen (rewritten on swift) 2. the cpp code is removed from the UI components so they can be easily redesigned 3. refactors the MWMSearch and related logic ___ ### TODO UI/UX: - [x] Replace the navigation/route building search with the new modal screen and remove legacy code - [x] The search should be enabled on the screen opened with the suggestions and categories - [x] Remove the marks form the map on fast swipe - [x] For the landscape the compact mode should be on Search tap - [x] When the map is dragging the search screen should be collapsed - [x] Smooth open/close/drag animation - [x] Add searching placeholder view with activity indicator - [x] Add empty result placeholder screen - [x] Implement animation between the screens - [x] Presentation controller for the ipad. For the ipad the search screen should be the same as earlier - [x] Animate witching Between the states - [x] Hide the search when PP is presented - [x] Show the search when PP is hidden during the searching - [x] Redesign the categories cell (maybe the collection like on the Yandex?) - [x] Redesign the suggestions cell - [x] Show the results when the search is finished - [x] Collapse the screen when the search button is tapped to show the results - [x] Hide keyboard on dragging or swiping - [x] Hide keyboard on tap when results are empty - [x] Fix Empty search Results layout - to be in the center - [x] When results are empty show the searchNoResultsViewController should be always visible even in the compact mode - [x] Scroll the presenter down on the swipe when the results are empty or the content offset is 0 (the table view is not scrolled) - the dumping shold not be used in this situation - [x] Make the first opening animation faster and smoother (==solved by removing the custom animators so the system is using the native animations==) - [x] Close the screen on the fast swipe (with high velocity) - [x] Open on the full screen on fast swipe (high velocity) - [x] Set search screen collapsed when the user starts dragging the map and bring back when ends - [x] Update the Side controls + and - while searching (see the available area) - [x] Show the results on the map - [x] Investigate how the search works from the Navigation dashboard and Navigation view and replace with the new modal search screen - [x] Handle the searching from the deepliks and other sources - see the `MWMMapViewControlsManager` - [x] Enable the map searching (drawing the blue map marks) after the search screen is wake up from the hidden state - when the user selects the some poi and than goes back - [ ] Scroll to the closest step when the velocity is low but the transition is big - if the user scrolls to the top the screen should scroll to the fulls teen step and vice verse ### TODO Core (not part of this PR): - [ ] Implement titles for the searching results marks https://git.omaps.dev/organicmaps/organicmaps/issues/10416 - [ ] The selected mark should be bigger or highlighed by the color https://git.omaps.dev/organicmaps/organicmaps/issues/10417 - [ ] The results zooming should be bigger to fit the results in the halfscreen mode on the phone https://git.omaps.dev/organicmaps/organicmaps/issues/10415 - [ ] When searching not a category, but a regular search (“cleaning”) it displays the smaller circles/dots instead of category icons. The icons should be consistent withe the categories too (and be bigger) ### Tested on: - [x] iPhone 15 pro ios 18.2 (device) - [x] iPhone 6 ios 12.5 (device) - [x] iPhone 8 pro ios 15.5 (sim) - [x] iPad 9 pro ios 15.2 (sim) - [x] macOS ___ ### Results <img width="300" alt="image" src="https://github.com/user-attachments/assets/c610a52d-518b-4556-a0d8-025727ecf283" /> <img width="300" alt="image" src="https://github.com/user-attachments/assets/2e121a1f-88a4-489a-89b9-376a146f64ca" /> <img width="500" alt="image" src="https://github.com/user-attachments/assets/f3529030-85eb-435a-abf7-f0d161272c21" /> ![Simulator Screen Recording - iPhone 16 Pro - 2025-02-05 at 17 46 14](https://github.com/user-attachments/assets/df48e750-bb6f-429a-9f8b-407a56bbea1c) ![Simulator Screen Recording - iPhone 16 Pro - 2025-02-05 at 17 46 30](https://github.com/user-attachments/assets/c54d4615-f4d5-47cd-845a-40520cb9f35d) ![Simulator Screen Recording - iPhone 16 Pro - 2025-02-05 at 17 47 00](https://github.com/user-attachments/assets/ab057191-0403-45a1-8385-02faa4ed1ead) ![Simulator Screen Recording - iPhone 16 Pro - 2025-02-05 at 17 48 30](https://github.com/user-attachments/assets/db6cc62c-fdd3-4b6b-8b41-8247809cdbed)
🚀 7
vng (Migrated from github.com) reviewed 2025-02-05 13:49:11 +00:00
oleg-rswll reviewed 2025-02-05 13:49:11 +00:00
rtsisyk approved these changes 2025-02-11 08:49:44 +00:00
rtsisyk left a comment
Owner

Works perfectly. Awesome UX improvement! The only thing I would suggest is updating the results in the list when moving the map, but that can be done later.

Works perfectly. Awesome UX improvement! The only thing I would suggest is updating the results in the list when moving the map, but that can be done later.
This repo is archived. You cannot comment on pull requests.
Reviewers
No reviewers
vng
oleg-rswll
rtsisyk
Labels
Clear labels   
Accessibility

issues affecting users with specific needs

  
Accessibility

issues affecting users with specific needs

  
Address

Issues with addresses, post codes, city/town/village borders

  
Address

Issues with addresses, post codes, city/town/village borders

  
Android

Android development

  
Android

Android development

  
Android Auto

Android Auto

  
Android Auto

Android Auto

  
Android Automotive (AAOS)

   
Android Automotive (AAOS)

   
API

Short Links, deep links and url schemes, including ge0 and om://

  
API

Short Links, deep links and url schemes, including ge0 and om://

  
AppGallery

Huawei AppGallery

  
AppGallery

Huawei AppGallery

  
AppStore

Apple AppStore

  
AppStore

Apple AppStore

  
Battery and Performance

Performance and battery consumption-related issues and optimizations

  
Battery and Performance

Performance and battery consumption-related issues and optimizations

  
Blocker

An issue blocking the release

  
Blocker

An issue blocking the release

  
Bookmarks and Tracks

Bookmarks, imported tracks, and KML, KMZ, KMB, GPX, GPZ import or export

  
Bookmarks and Tracks

Bookmarks, imported tracks, and KML, KMZ, KMB, GPX, GPZ import or export

  
Borders

Country borders and polygons

  
Borders

Country borders and polygons

  
Bug

Something isn't working

  
Bug

Something isn't working

  
Build

Compilation issue

  
Build

Compilation issue

  
CarPlay

CarPlay Integration

  
CarPlay

CarPlay Integration

  
Classificator

Classify object by types

  
Classificator

Classify object by types

  
Community

Community relations

  
Community

Community relations

  
Core

Cross-platform C++ libraries with a core functionality

  
Core

Cross-platform C++ libraries with a core functionality

  
CrashReports

Crash Reporting

  
CrashReports

Crash Reporting

  
Cycling

Bike, cycle, biking and related

  
Cycling

Bike, cycle, biking and related

  
Desktop

Desktop application

  
Desktop

Desktop application

  
DevEx

Developer Experience

  
DevEx

Developer Experience

  
DevOps

Automation and pipelines

  
DevOps

Automation and pipelines

  
dev_sandbox

A desktop app to debug rendering

  
dev_sandbox

A desktop app to debug rendering

  
Directions

Issues with next turns, labels, streets, voice instructions

  
Directions

Issues with next turns, labels, streets, voice instructions

  
Documentation

Improvements or additions to documentation

  
Documentation

Improvements or additions to documentation

  
Downloader

Map dowloader

  
Downloader

Map dowloader

  
Drape

Drape OpenGL, Vulkan and Metal graphics rendering engine

  
Drape

Drape OpenGL, Vulkan and Metal graphics rendering engine

  
Driving

Drive a car related issues

  
Driving

Drive a car related issues

  
Duplicate

This issue or pull request already exists

  
Duplicate

This issue or pull request already exists

  
Editor

OSM Editor

  
Editor

OSM Editor

  
Elevation

Isolines and altitude

  
Elevation

Isolines and altitude

  
Enhancement

New feature or request, an improvement of some existing feature

  
Enhancement

New feature or request, an improvement of some existing feature

  
Epic

A large body work

  
Epic

A large body work

  
External Map Datasets

TIGER, Ordnance Survey, ASTER, SRTM, etc.

  
External Map Datasets

TIGER, Ordnance Survey, ASTER, SRTM, etc.

  
F-Droid

F-Droid build and distribution

  
F-Droid

F-Droid build and distribution

  
Fonts

Font and text rendering

  
Fonts

Font and text rendering

  
Frequently User Reported

Most annoying UX and other issues for users reported by many people

  
Frequently User Reported

Most annoying UX and other issues for users reported by many people

  
Fund

   
Fund

   
Generator

Related to generator tool.

  
Generator

Related to generator tool.

  
Good first issue

Good for newcomers

  
Good first issue

Good for newcomers

  
Google Play

Google Play

  
Google Play

Google Play

  
GPS

Location and positioning issues

  
GPS

Location and positioning issues

  
GSoC

Ideas for Google Summer of Code

  
GSoC

Ideas for Google Summer of Code

  
iCloud

   
iCloud

   
Icons

Map and app icons

  
Icons

Map and app icons

  
iOS

iOS development

  
iOS

iOS development

  
Legal

Legal aspects

  
Legal

Legal aspects

  
Linux Desktop

Ubuntu, Gentoo, Red Hat, Debian, Cent OS, Fedora, etc.

  
Linux Desktop

Ubuntu, Gentoo, Red Hat, Debian, Cent OS, Fedora, etc.

  
Linux packaging

   
Linux packaging

   
Linux Phone

LibreM, PinePhone, Wayland and other mobile Linux versions

  
Linux Phone

LibreM, PinePhone, Wayland and other mobile Linux versions

  
Mac OS

Desktop issues related to Mac OS X, OM running on M1, M2, M3 Apple silicon, or Qt version

  
Mac OS

Desktop issues related to Mac OS X, OM running on M1, M2, M3 Apple silicon, or Qt version

  
Map Data

OpenStreetMap data related issues

  
Map Data

OpenStreetMap data related issues

  
Metro

Subway, Tube, light-rail public transport issues

  
Metro

Subway, Tube, light-rail public transport issues

  
Navigation

Issues related to the active Navigator / Navigation mode

  
Navigation

Issues related to the active Navigator / Navigation mode

  
Need Feedback

Further information is requested

  
Need Feedback

Further information is requested

  
Night Mode

Night or dark mode feature

  
Night Mode

Night or dark mode feature

  
NLnet 2024-06-281

Tasks related to NLnet 2024-06-281 project.

  
NLnet 2024-06-281

Tasks related to NLnet 2024-06-281 project.

  
No Feature Parity

A platform needs this to be implemented to have feature parity with other platforms

  
No Feature Parity

A platform needs this to be implemented to have feature parity with other platforms

  
Opening Hours

Business Hours, off time, holidays, seasonal

  
Opening Hours

Business Hours, off time, holidays, seasonal

  
Outdoors

Hiking, mtb, 4x4...

  
Outdoors

Hiking, mtb, 4x4...

  
POI Info

Feature metadata, OSM tags that are displayed in Place Page

  
POI Info

Feature metadata, OSM tags that are displayed in Place Page

  
Privacy

Privacy

  
Privacy

Privacy

  
Public Transport

Bus, trolleybus, train, tram, metro, subway, light rail

  
Public Transport

Bus, trolleybus, train, tram, metro, subway, light rail

  
Raw Idea

An idea that needs to be elaborated

  
Raw Idea

An idea that needs to be elaborated

  
Refactoring

   
Refactoring

   
Regional

This issue is different depending on the country or region

  
Regional

This issue is different depending on the country or region

  
Regression

A regression bug

  
Regression

A regression bug

  
Releases

Meta-tickets for tracking the release procedure

  
Releases

Meta-tickets for tracking the release procedure

  
RoboTest

Robo / Monkey Auto Tests

  
RoboTest

Robo / Monkey Auto Tests

  
Route Planning

Preview and plan your track

  
Route Planning

Preview and plan your track

  
Routing

Route building issues, e.g. valid route, valid ETA

  
Routing

Route building issues, e.g. valid route, valid ETA

  
Ruler

Helicopter routing, "as a crow flies"

  
Ruler

Helicopter routing, "as a crow flies"

  
Search

Search

  
Search

Search

  
Security

Security improvements

  
Security

Security improvements

  
Styles

Map drawing styles

  
Styles

Map drawing styles

  
Tests

   
Tests

   
Track Recording

Track Recording

  
Track Recording

Track Recording

  
Translations

Localization and translations issues

  
Translations

Localization and translations issues

  
TTS

Text-to-Speech

  
TTS

Text-to-Speech

  
UI

User interface issues

  
UI

User interface issues

  
UX

User eXperience, an issue with usability

  
UX

User eXperience, an issue with usability

  
Walk Navigation

Foot pedestrian mode

  
Walk Navigation

Foot pedestrian mode

  
Watches

Android Watches or Apple Watches support

  
Watches

Android Watches or Apple Watches support

  
Web

https://organicmaps.app/

  
Web

https://organicmaps.app/

  
Wikipedia

Issues related to Wiki articles embedded in OM data files.

  
Wikipedia

Issues related to Wiki articles embedded in OM data files.

  
Windows

Windows

  
Windows

Windows

  
Won't fix

Unfeasible or impossible to resolve

  
Won't fix

Unfeasible or impossible to resolve

  
World Map

Issues about improving the base map of the whole world that is bundled with the app

  
World Map

Issues about improving the base map of the whole world that is bundled with the app

No labels
Accessibility
Accessibility
Address
Address
Android
Android
Android Auto
Android Auto
Android Automotive (AAOS)
Android Automotive (AAOS)
API
API
AppGallery
AppGallery
AppStore
AppStore
Battery and Performance
Battery and Performance
Blocker
Blocker
Bookmarks and Tracks
Bookmarks and Tracks
Borders
Borders
Bug
Bug
Build
Build
CarPlay
CarPlay
Classificator
Classificator
Community
Community
Core
Core
CrashReports
CrashReports
Cycling
Cycling
Desktop
Desktop
DevEx
DevEx
DevOps
DevOps
dev_sandbox
dev_sandbox
Directions
Directions
Documentation
Documentation
Downloader
Downloader
Drape
Drape
Driving
Driving
Duplicate
Duplicate
Editor
Editor
Elevation
Elevation
Enhancement
Enhancement
Epic
Epic
External Map Datasets
External Map Datasets
F-Droid
F-Droid
Fonts
Fonts
Frequently User Reported
Frequently User Reported
Fund
Fund
Generator
Generator
Good first issue
Good first issue
Google Play
Google Play
GPS
GPS
GSoC
GSoC
iCloud
iCloud
Icons
Icons
iOS
iOS
Legal
Legal
Linux Desktop
Linux Desktop
Linux packaging
Linux packaging
Linux Phone
Linux Phone
Mac OS
Mac OS
Map Data
Map Data
Metro
Metro
Navigation
Navigation
Need Feedback
Need Feedback
Night Mode
Night Mode
NLnet 2024-06-281
NLnet 2024-06-281
No Feature Parity
No Feature Parity
Opening Hours
Opening Hours
Outdoors
Outdoors
POI Info
POI Info
Privacy
Privacy
Public Transport
Public Transport
Raw Idea
Raw Idea
Refactoring
Refactoring
Regional
Regional
Regression
Regression
Releases
Releases
RoboTest
RoboTest
Route Planning
Route Planning
Routing
Routing
Ruler
Ruler
Search
Search
Security
Security
Styles
Styles
Tests
Tests
Track Recording
Track Recording
Translations
Translations
TTS
TTS
UI
UI
UX
UX
Walk Navigation
Walk Navigation
Watches
Watches
Web
Web
Wikipedia
Wikipedia
Windows
Windows
Won't fix
Won't fix
World Map
World Map
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
4 participants
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: organicmaps/organicmaps-tmp#10213
No description provided.
Delete branch "ios/redesing-search-vc"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?