Floating Panel Enhancements

[mhdostal]

An initial version of a Floating Panel has been created. The goal is to have a component similar in functionality to the Data Collection Open Source App floating panel. The original OSA floating panel design is below. The code can be found here.

This would include the following additional features:

• Header view to provide summary information and navigation support
• Integrate scrolling and detent such that pulling downward from the top of scrollable content reduces the detent and pulling upward increases the detent.
• Revise how the initial viewpoint is created in the example in response to this comment
• The ability to snap to or be locked on pre-defined heights for "summary", "half-height", "full height" while dragging. E.g. presentationDetents(_:)
• Custom detent sizes. E.g. fraction(_:) or height(_:) Floating Panel - Custom detents #133
• Size-class-specific location of handle: on the bottom of the panel for iPad, at the top for iPhone.
• Instead of the Floating Panel being a public view, expose a modifier for it. See the discussion [here].(Mhd/floating panel #12 (review)) df/FloatingPanelEnhancements #108

The floating panel isn't really a floating panel unless it is in an overlay, right? Otherwise it could be presented in a popover or used in a navigation view. Instead of exposing it as a view, consider exposing it as a modifier, similar to how SwiftUI doesn't have a SheetView, but a modifier that presents a sheet.

The original Floating Panel Design

# Floating Panel

@Since 1.3 / 0.2

A floating panel is a view that overlays a map view and supplies map-related content such as a legend, bookmarks, search results, etc.. Apple Maps, Google Maps, Windows 10, and Collector have floating panel implementations, sometimes referred to as a "bottom sheet".

Floating Panels are non-modal and can be transient, only displaying information for a short period of time like identify results, or persistent, where the information is always displayed, for example a dedicated search panel. They will also be primarily simple containers that clients will fill with their own content. However, we will provide a basic set of optional UI elements for displaying a Title, Close button and other common items as a convenience to the client.

Examples:

Apple Maps

Google Maps

Windows 10

Collector

Design

A floating panel will have the following properties:

• works equally well on a tablet or phone in either portrait or landscape orientations
• the height of the panel would have three "modes"
  • "Summary" - the panel height would be constrained to only a few lines of text
  • "Half-height" - the panel is roughly 30-40% of the height of the available display (height is customizable)
  • "Full-height" - the panel is the full height of the display
• switching between the modes is handled by a gesture or optionally a button or other UI element; any gestures must be indicated in some way in the UI; when switching modes via a gesture or UI element, the panel will snap to the appropriate mode
• for regular-width situations (tablet or phone in landscape):
  • the panel width is fixed
  • would generally be anchored on either the left or right side of the screen, but exact placement can be app-dependent
  • the panel is anchored at the top of the screen with the handlebar at the bottom of the panel
• for compact-width situations:
  • the panel would be full-width
  • the panel is anchored at the bottom of the screen with the handlebar at the top
• a customizable "Title" area with a Title label, image, subtitle, and an optional "close" button would be provided to simplify common layouts. The close button would to dismiss the panel; drag-down to dismiss on certain devices is also supported
• customizable buffer space between edges of panel and edges of the display

API Design

TBD

Resources

"FloatingPanel" - an open source implementation of a floating panel: https://github.com/SCENEE/FloatingPanel

Eric Ito has a private repo he has used for research with a prototype implementation of a floating panel. His implementation is of a "container" controller, which would house the app's content view and the floating planel.

[dfeinzimer]

Size-class-specific location of handle: on the bottom of the panel for iPad, at the top for iPhone.

Checking off as completed in #74

[yo1995]

Hoping to see an equivalent of the LegendViewController in the new toolkit 👀

It would be useful for many webmaps that contains technical symbologies which are not easy to perceive.