TryGhost/Ghost — pull request #2840 by novaugust (2014-05-31 23:33:09+00:00)
Title: Added popover component

Closes #2418, #2714
Ref #2446, #2565

- Added and injected `popover` service to globally control popovers
- Added `gh-popover-button` component
- Added `popover-mixin` for popover and popover-buttons to mixin
- Added body-event-listener mixin for popover service to watch for body
clicks with
- Post settings and post save button both now use `gh-popover`
- Added hacks to `ember-hacks.css` to make popovers work until ghost-ui
consolidates functionality

-------------------------------------------------------------------------

**Notes on using the popover component:**

Popovers work by using two separate components, the `{{gh-popover}}` itself and a `{{gh-popover-button}}` which does the actual toggling.

Each `gh-popover` and `gh-popover-button` are connected 1-1 via a `popoverName` property (or just `name` for the popover.

For example:
```html
{{#gh-popover-button popoverName="somePopover" ...}}
.....
{{/gh-popover-button}}

...

{{#gh-popover name="somePopover ...}}
...
{{/gh-popover}}
```
* The button and popover do not need to be anywhere near each other in the html.
* By default, popovers do not close when they (and their content) are clicked on. If that behavior is desired, you can set its `closeOnClick` property to `"true"`.
* Popovers fade in via the fade-in class. They do not fade out.
* Ghost UI needs updating to work with these cats (@pauladamdavis). Right now, they have the class `ghost-popover`, and their display is toggled via an ember-applied `open` class. For now, `ember-hacks.css` is making it work `ghost-ui.css` by arguing over a few particular selectors.