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

fhrtms 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.

Show comment
Hide comment
@marcysutton

marcysutton Nov 20, 2014

Member

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

Member

marcysutton 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 from QUESTION ... Is it possible to open multiple dialogs? to Open multiple dialogs? Nov 20, 2014

@ThomasBurleson

This comment has been minimized.

Show comment
Hide comment
@ThomasBurleson

ThomasBurleson Nov 20, 2014

Contributor

@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.

Contributor

ThomasBurleson 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.

Show comment
Hide comment
@marcysutton

marcysutton Nov 20, 2014

Member

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

Member

marcysutton 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.

Show comment
Hide comment
@ThomasBurleson

ThomasBurleson Nov 20, 2014

Contributor

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

Contributor

ThomasBurleson 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.

Show comment
Hide comment
@marcysutton

marcysutton Nov 20, 2014

Member

@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?
Member

marcysutton 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.

Show comment
Hide comment
@ThomasBurleson

ThomasBurleson Nov 20, 2014

Contributor

👍 for excellent questions.

Contributor

ThomasBurleson commented Nov 20, 2014

👍 for excellent questions.

@ajoslin

This comment has been minimized.

Show comment
Hide comment
@ajoslin

ajoslin Nov 20, 2014

Contributor

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.

Contributor

ajoslin 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.

Show comment
Hide comment
@ThomasBurleson

ThomasBurleson Nov 20, 2014

Contributor

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

Contributor

ThomasBurleson 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.

Show comment
Hide comment
@ThomasBurleson

ThomasBurleson Dec 7, 2014

Contributor

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.

Contributor

ThomasBurleson 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.

Show comment
Hide comment
@brettstack

brettstack Dec 7, 2014

Contributor

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?

Contributor

brettstack 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.

Show comment
Hide comment
@ThomasBurleson

ThomasBurleson Dec 7, 2014

Contributor

Or you can use Toast components to show transient messages.

Contributor

ThomasBurleson commented Dec 7, 2014

Or you can use Toast components to show transient messages.

@brettstack

This comment has been minimized.

Show comment
Hide comment
@brettstack

brettstack Dec 7, 2014

Contributor

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.

Contributor

brettstack 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.

Show comment
Hide comment
@fhrtms

fhrtms 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 */
        });
    };
´´´

fhrtms 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.

Show comment
Hide comment
@brettstack

brettstack Dec 9, 2014

Contributor

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).

Contributor

brettstack 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.

Show comment
Hide comment
@fhrtms

fhrtms 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

fhrtms 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.

Show comment
Hide comment
@marcospgp

marcospgp 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!

marcospgp 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.

Show comment
Hide comment
@fhrtms

fhrtms Jan 8, 2015

@marcosportugal: Yes, this is what i do.

fhrtms commented Jan 8, 2015

@marcosportugal: Yes, this is what i do.

@benn0r

This comment has been minimized.

Show comment
Hide comment
@benn0r

benn0r 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

benn0r 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

@jpdesigndev

This comment has been minimized.

Show comment
Hide comment
@jpdesigndev

jpdesigndev Jan 22, 2015

Contributor

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

Contributor

jpdesigndev 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

@emusabaev

This comment has been minimized.

Show comment
Hide comment
@emusabaev

emusabaev Mar 13, 2015

Is it possible to update template of current dialog instead showing different dialog?

emusabaev commented Mar 13, 2015

Is it possible to update template of current dialog instead showing different dialog?

@rschmukler

This comment has been minimized.

Show comment
Hide comment
@rschmukler

rschmukler Apr 5, 2015

Contributor

@ThomasBurleson the UX team stated that dialogs should stack, but I think that the UX @fhrtms might be better given that dialogs could be different sizes. Could we explicitly show them the screenshot and see what they say.

ScreenShot

Contributor

rschmukler commented Apr 5, 2015

@ThomasBurleson the UX team stated that dialogs should stack, but I think that the UX @fhrtms might be better given that dialogs could be different sizes. Could we explicitly show them the screenshot and see what they say.

ScreenShot

@rschmukler rschmukler modified the milestones: 0.10.0, 0.9.0 Apr 5, 2015

@DmitryEfimenko

This comment has been minimized.

Show comment
Hide comment

DmitryEfimenko commented Apr 7, 2015

+1

@ThomasBurleson

This comment has been minimized.

Show comment
Hide comment
@ThomasBurleson

ThomasBurleson Apr 7, 2015

Contributor

@rschmukler - excellent idea.
@fhrtms - thank you.

Contributor

ThomasBurleson commented Apr 7, 2015

@rschmukler - excellent idea.
@fhrtms - thank you.

@patriknyd

This comment has been minimized.

Show comment
Hide comment
@patriknyd

patriknyd Apr 8, 2015

Yes, please, I would love to see this fixed. Bumped in to this problem today. Large dialog needs to show a smaller confirmation dialog. Looks like this has been moved up to 0.10.0, so I guess I'll have to hack 0.9.X with some version of benn0rs code until then. Or something else.

patriknyd commented Apr 8, 2015

Yes, please, I would love to see this fixed. Bumped in to this problem today. Large dialog needs to show a smaller confirmation dialog. Looks like this has been moved up to 0.10.0, so I guess I'll have to hack 0.9.X with some version of benn0rs code until then. Or something else.

@ThomasBurleson

This comment has been minimized.

Show comment
Hide comment
@ThomasBurleson

ThomasBurleson Apr 8, 2015

Contributor

@patriknyd - this is a new feature that we will try to address in 0.10.

0.90 is focused on bugs and polish.

Contributor

ThomasBurleson commented Apr 8, 2015

@patriknyd - this is a new feature that we will try to address in 0.10.

0.90 is focused on bugs and polish.

@anderson-arlen

This comment has been minimized.

Show comment
Hide comment
@anderson-arlen

anderson-arlen Apr 26, 2015

Contributor

+1

Contributor

anderson-arlen commented Apr 26, 2015

+1

@mathiasmoeller

This comment has been minimized.

Show comment
Hide comment

mathiasmoeller commented May 9, 2015

+1

@sammy-tam

This comment has been minimized.

Show comment
Hide comment
@sammy-tam

sammy-tam commented Jun 15, 2015

+1

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

@everlaat

This comment has been minimized.

Show comment
Hide comment
@everlaat

everlaat commented Jun 17, 2015

+1

@websirnik

This comment has been minimized.

Show comment
Hide comment
@websirnik

websirnik 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.

websirnik 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.

Show comment
Hide comment
@ishener

ishener commented Jul 6, 2015

+1

@dyatchenko

This comment has been minimized.

Show comment
Hide comment
@dyatchenko

dyatchenko Jul 8, 2015

I would be really glad to have this issue fixed.

dyatchenko commented Jul 8, 2015

I would be really glad to have this issue fixed.

@kikhtenko

This comment has been minimized.

Show comment
Hide comment
@kikhtenko

kikhtenko commented Jul 10, 2015

+1

@edicius6

This comment has been minimized.

Show comment
Hide comment
@edicius6

edicius6 commented Jul 10, 2015

+1

@ThomasBurleson

This comment has been minimized.

Show comment
Hide comment
@ThomasBurleson

ThomasBurleson Jul 10, 2015

Contributor

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

Contributor

ThomasBurleson 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.

Show comment
Hide comment
@ginader

ginader Mar 11, 2016

any update on this @ThomasBurleson?

ginader 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.