聚合物1.0：如何在聚合物设计一个现代化的认证UX如果情态动词必须走出去＆LT;纸抽屉面板＆gt ;? [英] Polymer 1.0: How to design a modern authentication UX in Polymer if modals must go outside <paper-drawer-panel>?

问题描述

我们的挑战：

在我看来，聚合物1.0开发者社区面临着以下挑战现在：

1. 我们没有任何用户身份验证UX榜样。 This计算器问题请求用户认证UX例子。并介绍了为什么它的需要。 此Github上的问题还介绍了这样的用户身份验证UX例如多个用户请求。而同时也出现了大量的聚合物松弛网站这个问题，以及传闻喋喋不休。




2. 情态动词目前没有内工作＆LT;纸抽屉面板＆gt; 的这种开放的错误问题的报告，<一个href=\"http://stackoverflow.com/questions/31394305/polymer-1-0-modal-appears-behind-its-backdrop\">this计算器问题和接受的答案共同证明一个错误，需要＆LT;纸对话模式＆GT; 元素必须到外面去任何＆LT;造纸-drawer-面板＆gt; 元素，以使模式来正确渲染（即在模式的背景前，而不是背后）。 此问题的报告和<一个href=\"http://stackoverflow.com/questions/31405906/paper-dialog-shows-up-behind-drawer-panel-when-placed-in-a-custom-element?rq=1\">this计算器问题也验证相同。




3. 但是里面的板模态已经成为事实上的标准AUTH UX设计。在我看来，现代Web应用程序设计的一个原则，即用户认证键（例如：登录和注册）去的＆LT任何版本或模拟相当于在里面;纸抽屉面板＆gt; 任何给定的Web应用程序恰巧使用。的（此外，这些权威性按钮通常出现在应用程序的每一个屏幕上，直到用户登录的右上角。然后，他们都与指示的登录状态的图标或链接更换。）的

code例子：

请参考code例子<一个href=\"http://stackoverflow.com/questions/31394305/polymer-1-0-modal-appears-behind-its-backdrop\">contained这里（在问题和答案）。这code将是这个问题太一样的。

问：

我们如何，聚合物1.0开发社区，最大限度地满足这些挑战，打造最好的用户身份验证UX体验？也许，在我的事实或假设的错误如上所述？也许有人有直接（或解决方法）解决方案，他们可以分享？或许从谷歌的聚合物团队有人想附和？任何及所有意见，建议，反馈的和答案的欢迎。

解决方案

在这个bug rubenstolk 提供了一个黑客修复如下：

  

要实现 @dhpollack 的黑客在一个不错的方式，这个功能添加到您的自定义元素：

  // https://github.com/PolymerElements/paper-dialog/issues/7
patchOverlay：功能（E）{
  如果（e.target.withBackdrop）{
    e.target.parentNode.insertBefore（e.target._backdrop，e.target）;
  }
}，
 

  

和增加上铁覆盖开=patchOverlay所有的＆LT;纸对话＆GT; 的

我测试并验证它的工作原理。因此，现在能解决的挑战＃2中的问题。因此，我想就足够了，现在要等到错误是固定的。

Our Challenges:

It seems to me The Polymer 1.0 developer community faces the following challenges right now:

1. We have no user auth UX example to follow. This Stackoverflow question requests a user authentication UX example. And describes why it's needed. This Github issue also documents multiple user requests for such a user auth UX example. And there has also been lots of anecdotal chatter on the Polymer Slack Site about this issue as well.

2. Modals don't currently work inside <paper-drawer-panel>. This open bug issue report, this Stackoverflow question and its accepted answer collectively prove that a bug requires <paper-dialog modal> elements must go outside any <paper-drawer-panel> element in order for the modal to render properly (i.e., in front of the modal's backdrop, not behind it). This issue report and this Stackoverflow question also verify same.

3. But modals inside panels have become the defacto standard auth UX design. It seems to me a principle of modern web app design that user authentication buttons (e.g., login and signup) go inside the equivalent of whatever version or "analog" of <paper-drawer-panel> any given web app happens to use. (Also, these auth buttons usually appear in the upper right corner of every screen of the app until the user logs in. Then they are replaced with an icon or link indicating login status.)

Code Examples:

Refer to the code examples contained here (in the question and answer). That code would be the same for this question too.

Question:

How do we, the Polymer 1.0 development community, best meet these challenges and build the best user auth UX experience possible? Perhaps there is a mistake in my facts or assumptions stated above? Perhaps someone has a direct (or workaround) solution they can share? Perhaps someone from Google's Polymer team would like to chime in? Any and all ideas, suggestions, feedback and answers are welcome.

解决方案

On this bug report rubenstolk provides a hack-fix as follows:

To implement @dhpollack's hack in a nice way, add this function to your custom element:

// https://github.com/PolymerElements/paper-dialog/issues/7
patchOverlay: function (e) {
  if (e.target.withBackdrop) {
    e.target.parentNode.insertBefore(e.target._backdrop, e.target);
  }
},

And add on-iron-overlay-opened="patchOverlay" to all your <paper-dialog>'s

I have tested it and verifies that it works. So for now, that solves challenge #2 in the question. Therefore, I suppose it is sufficient for now to wait until the bug is fixed.

这篇关于聚合物1.0：如何在聚合物设计一个现代化的认证UX如果情态动词必须走出去＆LT;纸抽屉面板＆gt ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！