WEBUI: grid add/edit - more intelligent dialog position/size handling

tvheadend · Nov 20, 2015 · 0b62719 · 0b62719
1 parent a26944c
commit 0b62719
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 5 deletions.
diff --git a/src/webui/static/app/extensions.js b/src/webui/static/app/extensions.js
@@ -1737,3 +1737,80 @@ Ext.ux.form.TwinDateTimeField = Ext.extend(Ext.form.Field, {
   }
 });
 
+
+/**
+ *
+ */
+
+// create namespace
+Ext.ns('Ext.ux');
+
+/**
+ *
+ * @class Ext.ux.Window
+ * @extends Ext.Window
+ */
+Ext.ux.Window = Ext.extend(Ext.Window, {
+
+  initComponent : function() {
+    Ext.Window.superclass.initComponent.call(this);
+    Ext.EventManager.onWindowResize(this.keepItVisible, this, [true]);
+    this.originalWidth = 0;
+    this.originalHeight = 0;
+  },
+
+  beforeDestroy : function() {
+    Ext.EventManager.removeResizeListener(this.keepItVisible, this);
+    Ext.Window.superclass.beforeDestroy.call(this);
+  },
+
+  keepItVisible : function(resize) {
+    var w = this.getWidth();
+    var h = this.getHeight();
+    var aw = Ext.lib.Dom.getViewWidth();
+    var ah = Ext.lib.Dom.getViewHeight();
+    var c = 0;
+
+    if (w > 200 && this.originalWidth === 0)
+      this.originalWidth = w;
+    else if (resize && this.originalWidth) {
+      w = this.originalWidth;
+      c = 1;
+    }
+    if (h > 100 && this.originalHeight === 0)
+      this.originalHeight = h;
+    else if (resize && this.originalHeight) {
+      h = this.originalHeight;
+      c = 1;
+    }
+
+    if (w > aw) {
+      w = aw;
+      c = 1;
+    }
+    if (h > ah) {
+      h = ah;
+      c = 1;
+    }
+    if (c) {
+      this.autoWidth = false;
+      this.autoHeight = false;
+      if (w === this.originalWidth)
+        w = w + 15;
+      this.setSize(w, h);
+      this.center();
+    } else if (resize) {
+      this.center();
+    }
+  },
+
+  onShow : function() {
+    this.keepItVisible();
+  },
+
+  onResize : function() {
+    Ext.Window.superclass.onResize.apply(this, arguments);
+    this.keepItVisible(false);
+  },
+
+});
diff --git a/src/webui/static/app/idnode.js b/src/webui/static/app/idnode.js
@@ -941,6 +941,15 @@ tvheadend.idnode_editor = function(item, conf)
         });
         buttons.push(saveBtn);
 
+        if (conf.cancel) {
+            var cancelBtn = new Ext.Button({
+                text: _('Cancel'),
+                iconCls: 'cancel',
+                handler: conf.cancel
+            });
+            buttons.push(cancelBtn);
+        }
+
         if (conf.help) {
             var helpBtn = new Ext.Button({
                 text: _('Help'),
@@ -1008,12 +1017,13 @@ tvheadend.idnode_create = function(conf, onlyDefault)
             });
         }
     });
-    var undoBtn = new Ext.Button({
+    var cancelBtn = new Ext.Button({
         tooltip: _('Cancel operation'),
         text: _('Cancel'),
         iconCls: 'cancelButton',
         handler: function() {
             win.close();
+            win = null;
         }
     });
 
@@ -1029,16 +1039,17 @@ tvheadend.idnode_create = function(conf, onlyDefault)
         defaultType: 'textfield',
         buttonAlign: 'left',
         items: [],
-        buttons: [undoBtn, saveBtn]
+        buttons: [cancelBtn, saveBtn]
     });
 
     /* Create window */
-    win = new Ext.Window({
+    win = new Ext.ux.Window({
         title: String.format(_('Add {0}'), conf.titleS),
         iconCls: 'add',
         layout: 'fit',
         autoWidth: true,
         autoHeight: true,
+        autoScroll: true,
         plain: true,
         items: panel
     });
@@ -1463,7 +1474,13 @@ tvheadend.idnode_grid = function(panel, conf)
                                 success: function(d) {
                                     d = json_decode(d);
                                     var w = null;
-                                    var c = {win: w};
+                                    var c = {
+                                        win: w,
+                                        cancel: function() {
+                                            w.close();
+                                            w = null;
+                                        }
+                                    };
                                     if (uuids.length > 1) {
                                         var title = String.format(_('Edit {0} ({1} entries)'),
                                                                   conf.titleS, uuids.length);
@@ -1473,12 +1490,13 @@ tvheadend.idnode_grid = function(panel, conf)
                                     }
                                     var p = tvheadend.idnode_editor(d[0], c);
                                     var width = p.fixedWidth;
-                                    w = new Ext.Window({
+                                    w = new Ext.ux.Window({
                                         title: title,
                                         iconCls: 'edit',
                                         layout: 'fit',
                                         autoWidth: width ? false : true,
                                         autoHeight: true,
+                                        autoScroll: true,
                                         plain: true,
                                         items: p
                                     });