Design choices for Dialog and Progress components about lumx HOT 10 CLOSED

Hi!

I don't see how the dialog could be made in a service. There is alert and confirm boxes already in a service (http://ui.lumapps.com/services/notifications), and for complex dialog, there is the directive.

For the progress, I think it might be interesting, but for now you can add it to a dive by specifying it. It's not well documented, but we're working on that. Here's how to do it:

LxProgressService.linear.show('#E95F47', '.selector');

The selector add the progress to the specific div corresponding to this selector.
But yeah, a directive would be nice. And especially the ability to have multiple progress. We'll see that when discussing our roadmap for the end of the week.

from lumx.

I've just wrapped the Dialog directive into a service, so I can use it like this:

izDialog.show({
    templateUrl: 'izLoginDialog.html',
    controller: 'izLoginDialogCtrl'
});

This is the code for izDialog service:

'use strict';

angular.module('IzzuiApp').service('izDialog', function ($q, $compile, $controller, $templateCache, $http, $rootScope, LxDialogService) {

    this.show = function (options) {
        var template = $templateCache.get(options.templateUrl),
            dialogPromise = $q.defer(),
            templatePromise;

        if (template) 
        {
            templatePromise = $q.when(template);
        }
        else {
            templatePromise = $http.get(options.templateUrl).then(function (response) {
                $templateCache.put(options.templateUrl, response.data);
                return response.data;
            });
        }

        templatePromise.then(function (template) {
            var element = angular.element(template),
                scope = $rootScope.$new();

            scope.element = element;
            scope.parent = element.parent();
            $controller(options.controller, { $scope: scope, dialogPromise: dialogPromise });
            $compile(element)(scope);
            LxDialogService.registerScope(options.templateUrl, scope);
            LxDialogService.open(options.templateUrl);

            dialogPromise.promise.finally(function () {
                LxDialogService.close(options.templateUrl);
            });
        });
        return dialogPromise.promise;
    };
});

from lumx.

Good solution. There is a downside though. It's harder to send data to the dialog controller with your solution. The current solution implemented in LumX make the dialog and the caller share the same controller, so it's easy. But your solution should be available too I think. We'll talk about it during our roadmap meeting.

Thanks for the solution!

from lumx.

Sure, my solution was in fact a quick wrapper inspired by the $mdDialog service, but it's not complete in any way. There should be an "locals" option. Take a look here to see all the options that should be in the service:

https://material.angularjs.org/#/api/material.components.dialog/service/$mdDialog

from lumx.

Just to make it clear that there are a lot of design choices in lumx that are way better than the angular-material project (that's in fact why we decided to switch). I'm just pointing out a couple of points which I thought they came up with a better solution.

from lumx.

We did not take it badly ;). Like I said, it's a good point. The roadmap will be written tomorrow, and making more service/providers in addition to directives will definitely be on the discussion.

from lumx.

Any news on the roadmap? If you would like us to pitch in with some features, we would love to.
We already built our own wrappers around dialog and progress components. We would have no problem in integrating our code into Lumx if it fits the roadmap.

from lumx.

Hi, we would be very interested if you can contribute to LumX with your wrappers? Thank you!

from lumx.

1+ 👍

It would be really good if someone could write a more advanced Dialog Service for lumX.
Thank you.

from lumx.

Needed to replace

scope.element = element;
scope.parent = element.parent();

with

scope.lxDialogIsOpened = false;
scope.lxDialogElement = element;
scope.lxDialogParent = element.parent();

to get @demetriusnunes example to work. If I could figure out how to use controller as syntax with that option while defining the izDialog.show controller option in closure I would be a happy camper :)

from lumx.