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

mdPopover: use mdPanel to create popover example #1217

Closed
ThomasBurleson opened this Issue Jan 17, 2015 · 116 comments

Comments

@ThomasBurleson
Copy link
Contributor

ThomasBurleson commented Jan 17, 2015

Unlike tooltips which have minimal content, popups can have sophisticated, rich content and should also use a directional indicator pointing to the originating/requesting element:

Example #1:
popover

Popovers are intended to have rich content that may be fully interactive.

@ThomasBurleson

This comment has been minimized.

Copy link
Contributor Author

ThomasBurleson commented Jan 17, 2015

This is related to the Pull Request #1132.

@ThomasBurleson

This comment has been minimized.

Copy link
Contributor Author

ThomasBurleson commented Jan 17, 2015

This specifications for this feature have been requested from the Material Design UX team. [response pending]

@epelc

This comment has been minimized.

Copy link
Contributor

epelc commented Jan 18, 2015

Would this be something you can click on links inside of or just for showing content?

@ThomasBurleson

This comment has been minimized.

Copy link
Contributor Author

ThomasBurleson commented Jan 18, 2015

Popovers are intended to have rich content that may be fully interactive.

tooltips_usage1

Tooltips, however, are:

  • terse,
  • read-only,
  • transient,
  • self-closing,
  • single-line,
  • informational constructs:
@ccarpediem

This comment has been minimized.

Copy link

ccarpediem commented Jan 21, 2015

So something a bit like a material version of DropJS (http://github.hubspot.com/drop/docs/welcome/)? If so I really like the idea. Covers that ground where you need a richer experience than a tooltip but without being as obtrusive as a dialog taking over your screen.

@ThomasBurleson

This comment has been minimized.

Copy link
Contributor Author

ThomasBurleson commented Jan 21, 2015

@ccarpediem - yes.

@ajoslin

This comment has been minimized.

Copy link
Contributor

ajoslin commented Jan 24, 2015

This is just a <md-tooltip> with large content and a class added to it.

@stevenh77

This comment has been minimized.

Copy link

stevenh77 commented Jan 26, 2015

@ccarpediem Here is my implementation for material design: https://github.com/stevenh77/drop-ng

@ajoslin tooltips appear on hover whereas my implementation of a popover is activated on click.

Here is the bootstrap version: http://getbootstrap.com/javascript/#popovers

@ccarpediem

This comment has been minimized.

Copy link

ccarpediem commented Jan 26, 2015

@stevenh77 Looks good. One additional thing I think would be nice, is an optional parameter you could pass to define how it closes. Right now, it seems you need to click the button again to close it. I can see the option of just clicking anywhere on the screen closing it like tooltip and dialog would at least be nice option to have. Not sure which is the better default behavior.

@ItsLeeOwen

This comment has been minimized.

Copy link

ItsLeeOwen commented Jan 26, 2015

Nice work @stevenh77

Where does the options reference "options.rootElementKeyupCallback" on line 113 come from? https://github.com/stevenh77/material/blob/popover-feature/src/components/popover/popover.js#L113

Problem being placed in scroll sections: https://www.dropbox.com/s/gx85c9qkz729a4h/angular-material-popover.mp4?dl=0

It should also probably follow the material design principles, animating out from the interaction point, or whatever that fanciness would be, like the tooltip, or dialog do.

@ilanbiala

This comment has been minimized.

Copy link
Contributor

ilanbiala commented Jan 26, 2015

@stevenh77 is there the option to change how quickly it opens? What about making it more material open from click location and expand style?

@stevenh77

This comment has been minimized.

Copy link

stevenh77 commented Jan 26, 2015

@ilanbiala @ccarpediem @ItsLeeOwen not currently but you're welcome to add the functionality.

@ItsLeeOwen that's deregistering the "escape key to close" functionality.

@naomiblack naomiblack modified the milestones: 0.9.0, 0.8.0 Jan 26, 2015

@stevenh77

This comment has been minimized.

Copy link

stevenh77 commented Jan 28, 2015

@ItsLeeOwen scrolling fixed

demo

@stevenh77

This comment has been minimized.

Copy link

stevenh77 commented Jan 28, 2015

Replacement pull request: #1324

@ThomasBurleson ThomasBurleson modified the milestones: 0.9.0, 0.8.0 Jan 30, 2015

@stevenh77

This comment has been minimized.

Copy link

stevenh77 commented Jan 31, 2015

@ccarpediem hopefully material design will decide to include a popover component. In the meantime if anyone wants to use dropjs I've created an Angular wrapper called drop-ng, available through bower. http://github.com/stevenh77/drop-ng

@rschmukler

This comment has been minimized.

Copy link
Contributor

rschmukler commented Feb 2, 2015

As per review with UX team, popover's aren't intended in material design's spec. A floating card originating from a point would be a better UX.

bradrich added a commit to bradrich/material that referenced this issue Jan 4, 2017

feat(popover): Popover component using MdPanel API
Creation of the `mdPopover` component using the `mdPanel` API.
Popovers, unlike tooltips which have minimal content, can have
sophisticated, rich content that may or may not be interactive.

Fixes angular#1217

bradrich added a commit to bradrich/material that referenced this issue Jan 4, 2017

feat(popover): Popover component using MdPanel API
Creation of the `mdPopover` component using the `mdPanel` API.
Popovers, unlike tooltips which have minimal content, can have
sophisticated, rich content that may or may not be interactive.

Fixes angular#1217

bradrich added a commit that referenced this issue Jan 6, 2017

feat(popover): Popover component using MdPanel API
Creation of the `mdPopover` component using the `mdPanel` API.
Popovers, unlike tooltips which have minimal content, can have
sophisticated, rich content that may or may not be interactive.

Fixes #1217

bradrich added a commit that referenced this issue Jan 10, 2017

feat(popover): Popover component using MdPanel API
Creation of the `mdPopover` component using the `mdPanel` API.
Popovers, unlike tooltips which have minimal content, can have
sophisticated, rich content that may or may not be interactive.

Fixes #1217

bradrich added a commit that referenced this issue Jan 10, 2017

feat(popover): Popover component using MdPanel API
Creation of the `mdPopover` component using the `mdPanel` API.
Popovers, unlike tooltips which have minimal content, can have
sophisticated, rich content that may or may not be interactive.

Fixes #1217

bradrich added a commit that referenced this issue Jan 17, 2017

feat(popover): Popover component using MdPanel API
Creation of the `mdPopover` component using the `mdPanel` API.
Popovers, unlike tooltips which have minimal content, can have
sophisticated, rich content that may or may not be interactive.

Fixes #1217

bradrich added a commit that referenced this issue Jan 23, 2017

feat(popover): Popover component using MdPanel API
Creation of the `mdPopover` component using the `mdPanel` API.
Popovers, unlike tooltips which have minimal content, can have
sophisticated, rich content that may or may not be interactive.

Fixes #1217
@b3hrooz

This comment has been minimized.

Copy link

b3hrooz commented Jan 26, 2017

Any updates on this? How's the review going? Hope for getting released sometime soon?

bradrich added a commit that referenced this issue Jan 26, 2017

feat(popover): Popover component using MdPanel API
Creation of the `mdPopover` component using the `mdPanel` API.
Popovers, unlike tooltips which have minimal content, can have
sophisticated, rich content that may or may not be interactive.

Fixes #1217

bradrich added a commit that referenced this issue Jan 26, 2017

feat(popover): Popover component using MdPanel API
Creation of the `mdPopover` component using the `mdPanel` API.
Popovers, unlike tooltips which have minimal content, can have
sophisticated, rich content that may or may not be interactive.

Fixes #1217

bradrich added a commit that referenced this issue Jan 26, 2017

feat(popover): Popover component using MdPanel API
Creation of the `mdPopover` component using the `mdPanel` API.
Popovers, unlike tooltips which have minimal content, can have
sophisticated, rich content that may or may not be interactive.

Fixes #1217
@jlacroix12

This comment has been minimized.

Copy link

jlacroix12 commented Feb 13, 2017

Any word on when this may make it into release?

@stephengardner

This comment has been minimized.

Copy link

stephengardner commented Feb 23, 2017

Hey guys, hows this coming? Excited to try it out for some help blurbs on our site.

@jlacroix12

This comment has been minimized.

Copy link

jlacroix12 commented Apr 3, 2017

Anything going on with this?

@parmarsanjay

This comment has been minimized.

Copy link

parmarsanjay commented May 29, 2017

+1. Is this happening?

@EladBezalel

This comment has been minimized.

Copy link
Member

EladBezalel commented Jun 13, 2017

We decided we're not going to implement it as part of the framework since our primary efforts are on angular/material2, this can be easily done with our Panel api.

@sdesmond

This comment has been minimized.

Copy link

sdesmond commented Jun 13, 2017

If this can "easily be done" can we please just get an example of it??? Maybe in the Panel demo page or something?

@EladBezalel

This comment has been minimized.

Copy link
Member

EladBezalel commented Jun 13, 2017

I suggest looking at @bradrich pr for it #10308

@aaroncalderon

This comment has been minimized.

Copy link

aaroncalderon commented Jun 15, 2017

@EladBezalel Thanks for your suggestion and pointing us on the right direction.

However, #10308 does not seem to be so easily done, since it requires modifications to the core panel and tooltip components, as well as additional sass and html template files.

So, merging this PR to our local copy will mean we would have to merge every update there after on our own. This will not be the best of scenarios.

@DOrlov77

This comment has been minimized.

Copy link

DOrlov77 commented Jul 5, 2017

@volmerf

This comment has been minimized.

Copy link

volmerf commented Jul 31, 2017

Is there anyone who has a working examle of the md-panel working as a popover? I can't seem to find it anywhere. Would be nice if someone could add it here. Thanks.

@timbrown81

This comment has been minimized.

Copy link

timbrown81 commented Aug 4, 2017

Here you go @volmerf, demo of using md-panel as a tooltip https://codepen.io/timbrown81/pen/rLVbaE

@Splaktar Splaktar modified the milestones: 1.2.0, 1.1.6 Nov 18, 2017

@Splaktar

This comment has been minimized.

Copy link
Member

Splaktar commented Nov 18, 2017

Thank you @timbrown81 for that CodePen. I've updated it to AngularJS Material 1.1.5 and fixed the broken image link. Here's the updated CodePen.

Now that this example with mdPanel is available, are there still concerns with keeping this issue closed and closing the related PR?

@Splaktar Splaktar modified the milestones: 1.1.6, Deprecated Nov 18, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment