聚合物1.0：如何設計一個現代化的認證UX高分子如果情態動詞必須到外面去<紙抽屜面板>？

我們的挑戰：聚合物1.0：如何設計一個現代化的認證UX高分子如果情態動詞必須到外面去<紙抽屜面板>？

在我看來，聚合物1.0開發者社區面臨以下挑戰現在：

我們沒有任何用戶身份驗證UX榜樣。This Stackoverflow question請求用戶認證UX例子。並描述爲什麼需要。 This Github issue還記錄了多個用戶對這種用戶身份驗證UX示例的請求。而同時也出現了很多的Polymer Slack Site有關此問題的傳聞喋喋不休的爲好。
Modals目前不在<paper-drawer-panel>的內部工作。This open bug issue report,this Stackoverflow question及其接受的答案共同證明，爲了使modal正確呈現（即，在模式的背景之前，而不是在其之後），元素必須超出任何<paper-drawer-panel>元素以外的錯誤需要<paper-dialog modal>。 This issue report和this Stackoverflow question也驗證相同。
但模態內板已成爲事實上的標準權威性UX設計。在我看來，現代Web應用程序設計原則，即用戶認證按鈕（例如，login和signup）去的任何版本或<paper-drawer-panel>任何給定的Web應用程序恰巧使用「模擬相當於」內。 （此外，這些AUTH按鈕通常出現在應用程序，直到在用戶登錄的每個屏幕的右上角。然後，他們將被替換的圖標或鏈路指示登錄狀態。）

代碼實例：

參考代碼示例contained here（在問題和答案）。該代碼對於這個問題也是一樣的。

問：

我們如何，聚合物1.0開發社區，最大限度地滿足這些挑戰，打造最好的用戶身份驗證UX體驗？也許我的上述事實或假設有錯誤？也許有人有他們可以分享的直接（或解決方案）解決方案？也許Google的Polymer團隊的某個人想要參加？任何和所有的想法，建議，反饋和答案是受歡迎的。

來源

2015-07-19 Mowzer

感謝@Tasos的一次可愛的嘗試。但是，你錯過了商標。您在此共享的演示（此處）（http://codepen.io/anon/pen/LVBXBO）_（注意使用Safari的未來讀者：使用Chrome代替）_以至少兩種重要方式忽略了該問題。 1.驗證按鈕不出現在彩色標題面板內。說，在你的例子中標有「標題」的那個。例如，在右上角。 2.對話框不顯示模態行爲。（即變暗的背景）相反，它似乎是一個帶有滑動動畫的簡單彈出對話框。這兩個問題都是問題的基本要素。 – Mowzer

所以，當然可以隨意不同意，但我不確定我是否同意＃3。例如，iOS中的模式實際上獨立於視圖層次結構;一個模式可以從一個視圖控制器（容納所有UI組件的容器的種類）生成，並且仍然在完全不同的視圖控制器（甚至是_app_）中呈現/解散/操作。其次，除了學術方面的原因，我很好奇爲什麼你認爲將模塊嵌入特定組件/標籤非常重要？任何業務邏輯都可以在沒有此要求的情況下進行 – mbunit

1.聚合物，一般來說，這個問題特別涉及網絡應用程序。 _（「...現代網絡應用程序設計原理...」）_不是移動應用程序。所以iOS不在場。 2. Web組件和Polymer元素設計的核心概念是創建模塊化，便攜式，獨立的代碼單元。認爲「即插即用」的網絡應用程序。因此，如果想要設計一個處理用戶身份驗證用戶體驗的元素，並且希望將該模式行爲作爲該用戶體驗的一部分，那麼該模式行爲應該是該元素的本地行爲。 @mbunit – Mowzer

在this bug報告rubenstolk提供了一個黑客修復如下：

要實現@dhpollack的一個很好的方式破解，這一功能添加到您的自定義元素：

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

並將on-iron-overlay-opened="patchOverlay"添加到您的所有<paper-dialog>的

我測試了它並驗證它是否有效。所以現在，這解決了問題中的挑戰2。因此，我認爲現在就等到the bug修好了。

來源

2015-07-20 04:04:51 Mowzer

默認情況下，我修改了PSK，添加了一個登錄表單，該表單由一個紙頁面面板構成，修改未認證用戶的路由並隱藏工具欄。這樣做是有

document.getElementById('headerContainer').style.display='none'; 
document.getElementById('mainContainer').style.paddingTop=0;

的UI重新出現與

document.getElementById('headerContainer').style.display='block'; 
document.getElementById('mainContainer').style.paddingTop=168px;

這是一個解決方案僅僅是個開始。對於一個完整的解決方案，我想要一個支持通用主機和通常OAuth站點的鐵認證元素。

來源

2015-12-04 10:14:24 mico

聚合物1.0：如何設計一個現代化的認證UX高分子如果情態動詞必須到外面去<紙抽屜面板>？

回答

相關問題