Allow for custom-sized modal windows

[RevanProdigalKnight]

Currently, a modal window's size classes are restricted to Bootstrap's built-in window classes of .modal-sm or .modal-lg, but if a user adds a custom modal size class (e.g. .modal-xl or .modal-xs), they cannot use it in $modal.open().

Looking at the templates (template/modal/window.html), this could be simply modified from the existing

// ui-bootstrap-tpls.js line 4064
ng-class="{'modal-sm': size == 'sm', 'modal-lg': size == 'lg'}"

to instead be

ng-class="size ? 'modal-' + size : ''"

or something of that nature.

[wesleycho]

Couldn't one use the windowClass option to override the behavior in the modal?

[RobJacobs]

Here is a demo using the windowClass property to achieve this.

[RevanProdigalKnight]

windowClass adds a class to the outermost <div class="modal">, whereas the modal size class is applied on the next level, <div class="modal-dialog">

[wesleycho]

One should be able to use that top level class to do any CSS overrides of the inner class

[RevanProdigalKnight]

It's rather inconvenient to have to override other CSS properties, though.

[wesleycho]

I think in this case, it is more desirable than adding an additional watch expression & add complexity to the modal API for something that can be solved with the existing API and pure CSS.

[RevanProdigalKnight]

Unless I don't understand how watch expressions work, it doesn't seem like it's adding an additional watch expression the way I suggested.

Currently, it has to check the size attribute once for each of the modal-<size> classes when generating the modal. Using the method I suggested, it still only has to check the size attribute twice (since I used a ternary)

[wesleycho]

Ah, I see now. I think I can actually get behind this then - sorry, I misunderstood what you were suggesting as the implementation.

Would you like to file a PR with this implementation and the appropriate documentation change?

[RevanProdigalKnight]

I'll have to look up how to do that (first time), but sure.

[RobJacobs]

We might be better of changing it to a function call, I believe that would remove the watch altogether.

[chrisirhc]

@RobJacobs , while I like less watchers, I think, for this particular case, it's better to keep it as a watcher since it's less likely that there'll be so many modals that the number of watchers per modal matters. Also, it's more readable to keep classes at the template.

We can refactor this later for performance if needed.

[RevanProdigalKnight]

The suggestion does make sense. After all, in theory a modal's size shouldn't change once it's been created.

[ermalmino]

Thank you @RevanProdigalKnight for this suggestion, it was really useful.