update prompt dialog

dashboard-ui/bower_components/emby-webcomponents/prompt/prompt.js

@@ -1,89 +1,59 @@
-define(['dialogHelper', 'layoutManager', 'globalize', 'material-icons', 'css!./style.css', 'emby-button', 'paper-icon-button-light', 'emby-input'], function (dialogHelper, layoutManager, globalize) {
+define(['dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', 'require', 'material-icons', 'emby-button', 'paper-icon-button-light', 'emby-input', 'emby-input', 'formDialogStyle'], function (dialogHelper, layoutManager, scrollHelper, globalize, require) {
 
-    function getIcon(icon, cssClass, canFocus, autoFocus) {
-
-        var tabIndex = canFocus ? '' : ' tabindex="-1"';
-        autoFocus = autoFocus ? ' autofocus' : '';
-        return '<button is="paper-icon-button-light" class="autoSize ' + cssClass + '"' + tabIndex + autoFocus + '><i class="md-icon promptExitIcon">' + icon + '</i></button>';
+    function setInputProperties(dlg, options) {
+        var txtInput = dlg.querySelector('#txtInput');
+        txtInput.value = options.value || '';
+        txtInput.label(options.label || '');
     }
 
-    return function (options) {
-
-        if (typeof options === 'string') {
-            options = {
-                title: '',
-                text: options
-            };
-        }
+    function showPrompt(options, template) {
 
         var dialogOptions = {
-            removeOnClose: true
+            removeOnClose: true,
+            scrollY: false
         };
 
-        var backButton = false;
-        var raisedButtons = false;
-
         if (layoutManager.tv) {
             dialogOptions.size = 'fullscreen';
-            backButton = true;
-            raisedButtons = true;
         } else {
-
-            dialogOptions.modal = false;
-            dialogOptions.entryAnimationDuration = 160;
-            dialogOptions.exitAnimationDuration = 200;
+            dialogOptions.size = 'mini';
         }
 
         var dlg = dialogHelper.createDialog(dialogOptions);
 
-        dlg.classList.add('promptDialog');
+        dlg.classList.add('formDialog');
 
-        var html = '';
-        var submitValue = '';
+        dlg.innerHTML = globalize.translateHtml(template, 'sharedcomponents');
 
-        html += '<div class="promptDialogContent">';
-        if (backButton) {
-            html += getIcon('&#xE5C4;', 'btnPromptExit', false);
+        if (layoutManager.tv) {
+            scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
         }
 
+        dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
+            dialogHelper.close(dlg);
+        });
+
         if (options.title) {
-            html += '<h2>';
-            html += options.title;
-            html += '</h2>';
+            dlg.querySelector('.dialogContentTitle').innerHTML = options.title;
+        } else {
+            dlg.querySelector('.dialogContentTitle').classList.add('hide');
         }
 
-        html += '<form>';
-
-        html += '<div class="inputContainer" style="margin-bottom:0;">';
-        html += '<input is="emby-input" type="text" autoFocus class="txtPromptValue" value="' + (options.value || '') + '" label="' + (options.label || '') + '"/>';
-
         if (options.description) {
-            html += '<div class="fieldDescription">';
-            html += options.description;
-            html += '</div>';
-        }
-        html += '</div>';
-
-        html += '<br/>';
-        if (raisedButtons) {
-            html += '<button is="emby-button" type="submit" class="raised btnSubmit"><i class="md-icon">check</i><span>' + globalize.translate('sharedcomponents#ButtonOk') + '</span></button>';
+            dlg.querySelector('.fieldDescription').innerHTML = options.description;
         } else {
-            html += '<div class="buttons">';
-            html += '<button is="emby-button" type="submit" class="btnSubmit">' + globalize.translate('sharedcomponents#ButtonOk') + '</button>';
-            html += '<button is="emby-button" type="button" class="btnPromptExit">' + globalize.translate('sharedcomponents#ButtonCancel') + '</button>';
-            html += '</div>';
+            dlg.querySelector('.fieldDescription').classList.add('hide');
         }
-        html += '</form>';
 
-        html += '</div>';
-
-        dlg.innerHTML = html;
+        setInputProperties(dlg, options);
 
         document.body.appendChild(dlg);
 
+        var submitValue;
+
         dlg.querySelector('form').addEventListener('submit', function (e) {
 
-            submitValue = dlg.querySelector('.txtPromptValue').value;
+            submitValue = dlg.querySelector('#txtInput').value;
             e.preventDefault();
             e.stopPropagation();
 
@@ -95,11 +65,6 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'material-icons', 'css!./s
             return false;
         });
 
-        dlg.querySelector('.btnPromptExit').addEventListener('click', function (e) {
-
-            dialogHelper.close(dlg);
-        });
-
         return dialogHelper.open(dlg).then(function () {
             var value = submitValue;
 
@@ -109,5 +74,21 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'material-icons', 'css!./s
                 return Promise.reject();
             }
         });
+    }
+
+    return function (options) {
+
+        return new Promise(function (resolve, reject) {
+            require(['text!./prompt.template.html'], function (template) {
+
+                if (typeof options === 'string') {
+                    options = {
+                        title: '',
+                        text: options
+                    };
+                }
+                showPrompt(options, template).then(resolve, reject);
+            });
+        });
     };
 });

dashboard-ui/bower_components/emby-webcomponents/prompt/prompt.template.html

@@ -0,0 +1,24 @@
+<div class="formDialogHeader">
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+</div>
+
+<div class="formDialogContent smoothScrollY">
+    <div class="dialogContentInner dialog-content-centered">
+        
+        <h1 class="dialogContentTitle"></h1>
+
+        <form>
+            <div class="inputContainer">
+                <input is="emby-input" type="text" id="txtInput" label="${LabelPrePaddingMinutes}"/>
+                <div class="fieldDescription"></div>
+            </div>
+
+            <div class="formDialogFooter">
+                <button is="emby-button" type="submit" class="raised btnSubmit block formDialogFooterItem">
+                    <span>${ButtonOk}</span>
+                </button>
+            </div>
+
+        </form>
+    </div>
+</div>

dashboard-ui/bower_components/emby-webcomponents/prompt/style.css

@@ -1,37 +0,0 @@
-.promptDialog {
-    flex-direction: column;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-}
-
-.promptDialogContent {
-    text-align: left;
-    margin: 0 !important;
-}
-
-.promptDialog-fullscreen .promptDialogContent {
-    padding: 0;
-    width: 50%;
-}
-
-.promptDialog-fullscreen .btnSubmit {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    justify-content: center;
-}
-
-.promptDialog-fullscreen .btnPromptExit {
-    z-index: 1002;
-    position: absolute;
-    top: .5em;
-    left: .5em;
-}
-
-    .promptDialog-fullscreen .promptExitIcon {
-        width: 4.4vh;
-        height: 4.4vh;
-        font-size: 4.4vh;
-    }