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.

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

Open multiple dialogs? #698

Closed
fhrtms opened this issue Nov 20, 2014 · 36 comments

Comments

@fhrtms
Copy link

commented Nov 20, 2014

I would like to open multiple layered dialogs from each controller. Is this possible?
Currently if i open a second dialog, the first one closes automatically.

@marcysutton

This comment has been minimized.

Copy link
Contributor

commented Nov 20, 2014

Currently you can only open one dialog at a time. According to the Material Design spec, whether multiple dialogs should be allowed depends on the context and type of dialog:

Avoid opening additional dialogs from within a dialog.

Full-screen dialogs may open additional dialogs, such as pickers, because their design accommodates additional layers of material without significantly increasing the perceived z-depth of the app or increasing visual noise.

Avoid creating dialogs with scrolling content, particularly alerts. Instead, consider alternate containers or layouts that are optimized for reading or interacting with significant amounts of content.

https://www.google.com/design/spec/components/dialogs.html#dialogs-content

@ThomasBurleson ThomasBurleson changed the title QUESTION ... Is it possible to open multiple dialogs? Open multiple dialogs? Nov 20, 2014

@ThomasBurleson

This comment has been minimized.

Copy link
Contributor

commented Nov 20, 2014

@marcysutton, @fhrtms - there have been discussions regarding extensions to $$interimService to cache a LIFO-stack of dialogs; where the hide() will pop off the most recent and hide/close that instance.

@ThomasBurleson ThomasBurleson added this to the 0.8.0-rc1 milestone Nov 20, 2014

@marcysutton

This comment has been minimized.

Copy link
Contributor

commented Nov 20, 2014

@ThomasBurleson ahh! Apologies for prematurely closing. That sounds like similar behavior to the "escape stack" we discussed for Sidenav & Bottom Sheet.

@ThomasBurleson

This comment has been minimized.

Copy link
Contributor

commented Nov 20, 2014

@marcysutton - exactly. After you indicated that the Spec loosely allows mulitple dialogs, I thought we should formally add the feature to Angular Material.

@marcysutton

This comment has been minimized.

Copy link
Contributor

commented Nov 20, 2014

@ThomasBurleson it says "[f]ull-screen dialogs may open additional dialogs, such as pickers, because their design accommodates additional layers". That leaves me with a few spec questions:

  1. Can a dialog can trigger another dialog as long as it's smaller, and you're in a full-screen experience? What happens on smaller screens?
  2. Can multiple dialogs be triggered from a page? When one dialog closes, is focus sent to the next dialog?
@ThomasBurleson

This comment has been minimized.

Copy link
Contributor

commented Nov 20, 2014

👍 for excellent questions.

@ajoslin

This comment has been minimized.

Copy link
Contributor

commented Nov 20, 2014

There's also the iOS style: if a popup opens while another is already open, it will temporarily hide the first popup, show the new popup until the user is done interacting with the new popup, then show the first popup again.

@ThomasBurleson

This comment has been minimized.

Copy link
Contributor

commented Nov 20, 2014

👏 - I really like that idea also. Sounds like an option flag currentDialog: hide || close || overlay

@ThomasBurleson

This comment has been minimized.

Copy link
Contributor

commented Dec 7, 2014

Consider $timeout() which returns a promise and the `$timeout.cancel( ) is used to cancels a task associated with the promise.

Since $mdDialog.show() returns a promise, perhaps, $mdDialog.close( <promise> ) could be used to close a specific dialog instance.

@brettstack

This comment has been minimized.

Copy link
Contributor

commented Dec 7, 2014

Another use case?:
I often use modals for create/update forms and I often need to show a confirmation message. Although this is probably better handled by a bottom sheet now. Is this correct?

@ThomasBurleson

This comment has been minimized.

Copy link
Contributor

commented Dec 7, 2014

Or you can use Toast components to show transient messages.

@brettstack

This comment has been minimized.

Copy link
Contributor

commented Dec 7, 2014

I should have been more clear. By confirmation message, I mean a dialog with "OK", "Cancel" options. Toast messages aren't obvious enough for this purpose, but I do use them to show e.g. a successful save message.

@fhrtms

This comment has been minimized.

Copy link
Author

commented Dec 9, 2014

I'm found a nice way to use one dialog with back reference to the parent.

Image of Yaktocat

/* BERABEITUNGSDIALOG */
$scope.dialogEditor = function(ev, item) {
    var item = angular.copy(item);
    $scope.editDialog = $mdDialog;
    $scope.editDialog.show({
        templateUrl: 'app/views/myDialog.html',
        clickOutsideToClose: false,
        locals: {local: [$scope.db, item, $scope.editDialog, $scope]},
        controller: ['$scope', '$mdDialog', '$mdToast', 'socket', 'local', myDialogController]
    }).then(function() {
        $scope.alert = 'You said "Okay".';
    }, function() {
        $scope.alert = 'You cancelled the dialog.';
    });
};


var myDialogController = function ($scope, $mdDialog, $mdToast, socket, local) {
    $scope.dialog = local[3].dialogEditor;

    /* DATENSATZ LOESCHEN */
    $scope.deleteData = function() {
        var confirm = $mdDialog.confirm()
            .title('Möchtest Du den zuvor gewählten Datensatz wirklich löschen?')
            .content('Wenn Du dir NICHT sicher bist, dann tippe einfach auf \'NEE, LIEBER DOCH NICHT\' und fahre mit der Bearbeitung fort.')
            .ok('Ja, jetzt löschen')
            .cancel('Neee, lieber doch nicht');

        $mdDialog.show(confirm).then(function() {
            $scope.saveData({delete: true});
        }, function() {
            //$scope.dialogClose();
            $scope.dialog(null, local[1]); /* DATENSATZ ZURUECKGEBEN */
        });
    };
´´´
@brettstack

This comment has been minimized.

Copy link
Contributor

commented Dec 9, 2014

Thanks for sharing. What tool do you use to capture those gifs?
On 9 Dec 2014 02:28, "fhrtms" notifications@github.com wrote:

I'm found a nice way to use one dialog with back reference to the parent.

[image: Image of Yaktocat]
https://camo.githubusercontent.com/93e2c74cf5c2f8cca68d73dcf28a5a4f094978a1/687474703a2f2f692e696d6775722e636f6d2f4e423258774e342e6769663f31

/* BERABEITUNGSDIALOG */
$scope.dialogEditor = function(ev, item) {
var item = angular.copy(item);
$scope.editDialog = $mdDialog;
$scope.editDialog.show({
templateUrl: 'app/views/myDialog.html',
clickOutsideToClose: false,
locals: {local: [$scope.db, item, $scope.editDialog, $scope]},
controller: ['$scope', '$mdDialog', '$mdToast', 'socket', 'local', myDialogController]
}).then(function() {
$scope.alert = 'You said "Okay".';
}, function() {
$scope.alert = 'You cancelled the dialog.';
});
};

var myDialogController = function ($scope, $mdDialog, $mdToast, socket, local) {
$scope.dialog = local[3].dialogEditor;

/* DATENSATZ LOESCHEN */
$scope.deleteData = function() {
    var confirm = $mdDialog.confirm()
        .title('Möchtest Du den zuvor gewählten Datensatz wirklich löschen?')
        .content('Wenn Du dir NICHT sicher bist, dann tippe einfach auf \'NEE, LIEBER DOCH NICHT\' und fahre mit der Bearbeitung fort.')
        .ok('Ja, jetzt löschen')
        .cancel('Neee, lieber doch nicht');

    $mdDialog.show(confirm).then(function() {
        $scope.saveData({delete: true});
    }, function() {
        //$scope.dialogClose();
        $scope.dialog(null, local[1]); /* DATENSATZ ZURUECKGEBEN */
    });
};

´´´


Reply to this email directly or view it on GitHub
#698 (comment).

@fhrtms

This comment has been minimized.

Copy link
Author

commented Dec 9, 2014

I like this one on Windows:
screentogif.codeplex.com

No install, very handy and easy to use!

and this on Linux:
recorditnow.sourceforge.net

@marcospgp

This comment has been minimized.

Copy link

commented Jan 6, 2015

@fhrtms thanks for that code! It took me a while to figure out what you were doing since there were no english comments but it seems you are just saving the main dialog's scope before opening the second dialog, and then if the user cancels this second one, you just reopen the main with the old scope, is that right?
I'm going to do it a bit differently from you, but the idea remains the same. Thanks a lot!

@fhrtms

This comment has been minimized.

Copy link
Author

commented Jan 8, 2015

@marcosportugal: Yes, this is what i do.

@benn0r

This comment has been minimized.

Copy link

commented Jan 13, 2015

I really need nested dialogs for our application, so i tinkered with the source code. I didn't test it very well but i think its working, at least for us. Its a quick solution (manipulating the z-index like i do is not very nice, i guess).

If a new dialog opens, old dialogs won't close. If $mdDialog.cancel() is called the most recent dialog will be closed.

hayloft@2ad189a
Obviously some unit tests break with this commit...

Updated for 0.8.3: hayloft@1650734

@paynecodes

This comment has been minimized.

Copy link
Contributor

commented Jan 22, 2015

Has anyone from core team been able to try out @benn0r's code? The change seems easy to digest.

@robertmesserle robertmesserle modified the milestones: 0.9.0, 0.8.0 Feb 19, 2015

@ThomasBurleson ThomasBurleson modified the milestones: 0.10.0, 0.11.0 Jun 16, 2015

@everlaat

This comment has been minimized.

Copy link

commented Jun 17, 2015

+1

@websirnik

This comment has been minimized.

Copy link

commented Jun 26, 2015

+1.
I like this idea: #698 (comment):

Sounds like an option flag currentDialog: hide || close || overlay

Assume: If the original dialog is scrollable, and the trigger for the new dialog is somewhere inside the scrollable container.
When the child dialog is closed, I would like to be returned back to the position of the trigger inside the scrollable container of the original dialog.

@ishener

This comment has been minimized.

Copy link

commented Jul 6, 2015

+1

@dyatchenko

This comment has been minimized.

Copy link

commented Jul 8, 2015

I would be really glad to have this issue fixed.

@kikhtenko

This comment has been minimized.

Copy link

commented Jul 10, 2015

+1

1 similar comment
@edicius6

This comment has been minimized.

Copy link

commented Jul 10, 2015

+1

@ThomasBurleson

This comment has been minimized.

Copy link
Contributor

commented Jul 10, 2015

Locking this issue until it becomes active, in-progress.

@angular angular locked and limited conversation to collaborators Jul 10, 2015

@ThomasBurleson ThomasBurleson modified the milestones: 0.11.0, post-1.0 Jul 31, 2015

@ThomasBurleson ThomasBurleson modified the milestone: post-1.0 Aug 10, 2015

@ThomasBurleson ThomasBurleson modified the milestones: post-1.0 , Backlog Jan 5, 2016

@ginader

This comment has been minimized.

Copy link

commented Mar 11, 2016

any update on this @ThomasBurleson?

@ThomasBurleson ThomasBurleson modified the milestones: Backlog, Deprecated Apr 20, 2016

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.