Closing a modal dialog on mobile

6 years ago I posted Automatically switch audio output when headphones inserted - #6 by _pi

gist at AudioSettings.h · GitHub

The code displays a modal dialog. On desktop it can be closed by the top-left red button:

However on mobile there is no such button:

How to close for mobile?

refs:

Component::canModalEventBeSentToComponent

When a component is modal, this callback allows it to choose which other components can still receive events.

When a modal component is active and the user clicks on a non-modal component, this method is called on the modal component, and if it returns true, the event is allowed to reach its target. If it returns false, the event is blocked and the inputAttemptWhenModal() callback is made.

Component::inputAttemptWhenModal

Called when the user tries to click on a component that is blocked by another modal component.

When a component is modal and the user clicks on one of the other components, the modal component will receive this callback.

The intuitive way to close would be to tap elsewhere on the screen (outside of the dialog-rect).

As per advice in the links I’d like to create a fullscreen (mobile) or full-window-size (desktop) 50% opacity component and then render the dialog on top of this.

However I can’t see what I need to do to my gist in order to achieve this.

This is the relevant code sequence:

pInputDeviceManager = std::make_unique<AudioDeviceManager>();
pInputDeviceManager->initialise(...)
launch(pInputDeviceManager.get(), 1, 0);


    void launch(AudioDeviceManager* pDeviceManager, int inputs, int outputs)
    {
        AudioDeviceSelectorComponent* settingsPane = new AudioDeviceSelectorComponent(*pDeviceManager, ...)
        settingsPane->setSize(640, 480);

        DialogWindow::LaunchOptions options;

        options.content.setOwned(settingsPane);
        options.dialogTitle = "Audio Settings";
        options.dialogBackgroundColour = Colours::lightgrey;
        options.escapeKeyTriggersCloseButton = true;
        options.useNativeTitleBar = true;
        options.resizable = true;

        DialogWindow* dialogWindow = options.launchAsync();
        dialogWindow->centreWithSize(450, 250);

What are the steps?

My best stab at it:

  • create a component that sets its owner to the mainContentComponent, sets its bounding-rect to owner’s, is 50% opacity, is-hidden
  • on show-modal, show this component, then launch the modal

I’m floundering already. Do I need to subclass the modal overriding canModalEventBeSentToComponent and inputAttemptWhenModal?

:pray: @ Xenakios on theaudioprogrammer Discord for showing several solution paths, the simplest of which is to simply use options.useNativeTitleBar = false

As can be seen, now the iOS app displays a :x:

1 Like