Improve modal and add more customising options

[kasper]

Improve modal and add more customising options.

1. Adjust alignment and size
2. Use NSVisualEffectView as content view
3. Allow origin to be updated dynamically
4. Ability to adjust weight dynamically
5. Ability to change appearance (dark|light|transparent)
6. Deprecate message-property for removal in next minor release
7. Add text-property, alias message-property to text
8. Ability to display an app icon
9. Add convenience factory method Modal.build(properties)
10. Document dynamic properties

[kasper]

Tada! 🎉

var parent = Screen.main().visibleFrameInRectangle();
var modal = new Modal();
modal.weight = 100;
modal.appearance = 'transparent';
modal.text = '🐱';
modal.origin = {
  x: parent.x + (parent.width / 2) - (modal.frame().width / 2),
  y: parent.y + (parent.height / 2) - (modal.frame().height / 2)
};
modal.show();

[kasper]

[mafredri]

Epic! Don't know what I'm gonna do with it yet, but I look forward to playing around with it 😆!

[kasper]

@mafredri How about a nice little cat vs. mouse mini-game? 😆 I’m also looking into adding the support to display an app icon alongside the message. (These were just some additional benefits for that.)

[mafredri]

How about a nice little cat vs. mouse mini-game?

Haha, would be a fun proof of concept xD!

I’m also looking into adding the support to display an app icon alongside the message

Oh yes, that will be very nice, especially when showing modals on a per-window basis!

[kasper]

I think this will be a nice little feature! 😉

[kasper]

If someone finds any bugs, please report! This feature should be mostly done now. Just some cleaning up to do.

[mafredri]

Looking really nice, great work! I'll try to find some time this week to play around with them :).

[kasper]

Lastly, a nice factory method!

var parent = Screen.main().visibleFrameInRectangle();
var modal = Modal.build({
  appearance: 'light',
  icon: App.get('Spotify').icon(),
  text: 'Spotify',
  origin: function (frame) {
    return {
      x: parent.x + (parent.width / 2) - (frame.width / 2),
      y: parent.y + (parent.height / 2) - (frame.height / 2)
    };
  }
});
modal.show();