Resize content tab sidebar

Paxa · Aug 30, 2021 · 2453e8c · 2453e8c
1 parent 7d8175f
commit 2453e8c
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 2 deletions.
diff --git a/app/views/db_screen_view.js b/app/views/db_screen_view.js
@@ -96,7 +96,7 @@ class DbScreenView {
       "Refresh Tables": this.reloadStructure.bind(this)
     });
 
-    new SidebarResize(this.content.find('.resize-handler'));
+    this.sidebarResizer = new SidebarResize(this.content.find('.resize-handler'));
   }
 
   // Public API

diff --git a/app/views/panes/content.js b/app/views/panes/content.js
@@ -290,6 +290,8 @@ class Content extends PaneBase {
 
     this.footer = this.content.find('.summary-and-pages');
 
+    this.initFooterResize();
+
     this.nextPageEl = this.footer.find('.pages.next');
     this.prevPageEl = this.footer.find('.pages.prev');
 
@@ -424,6 +426,11 @@ class Content extends PaneBase {
   initContextMenu () {
     var table = this.content.find('.rescol-content-wrapper table');
 
+    // this may heppen when there is render error
+    if (table.length == 0) {
+      return;
+    }
+
     // bind for delete button
     if (this.currentTableType == 'BASE TABLE') {
       $u(table).on('generic-table-init', () => {
@@ -498,6 +505,17 @@ class Content extends PaneBase {
     }
   }
 
+  // Move footer according to left sidebar resize
+  initFooterResize() {
+    if (!this.footer[0]) {
+      return;
+    }
+    this.footer[0].style.marginLeft = '' + (this.handler.view.sidebarResizer.currentWith - 1) + 'px';
+    this.handler.view.content.on('sidebar-resize', (e, newWidth) => {
+      this.footer[0].style.marginLeft = '' + (newWidth - 1) + 'px';
+    })
+  }
+
   async deleteRow (row) {
     if (this.currentTableType != 'BASE TABLE') {
       $u.alert("Can't delete from " + this.currentTableType);

diff --git a/lib/sidebar_resize.js b/lib/sidebar_resize.js
@@ -2,6 +2,7 @@ class SidebarResize {
   /*::
   following: boolean
   minWidth: number
+  currentWith: number
   element: JQuery<HTMLElement>
   sidebar: JQuery<HTMLElement>
   mainbar: JQuery<HTMLElement>
@@ -20,12 +21,16 @@ class SidebarResize {
     this.doc[0].addEventListener('mousemove', (move_ev) => {
       if (this.following) this.onChanged(move_ev);
     });
+
+    this.currentWith = parseInt(this.sidebar[0].style.width, 10);
   }
 
   onChanged (event) {
     var width = event.pageX > this.minWidth ? event.pageX : this.minWidth;
+    this.currentWith = width;
     this.mainbar[0].style.marginLeft = '' + width + 'px';
     this.sidebar[0].style.width =      '' + width + 'px';
+    this.mainbar.trigger("sidebar-resize", width);
   }
 
   startTracking () {

diff --git a/vendor/datasets/different_types.sql b/vendor/datasets/different_types.sql
@@ -11,18 +11,21 @@ CREATE TABLE different_types (
   col_matrix_3x3 integer[3][3],
   col_array_text text[],
   song text[][],
+  json_array jsonb[],
   col_hstore hstore,
   col_gender human_gender,
 );
 
 -- insert all nulls
 insert into different_types (id) values (nextval('different_types_id_seq'::regclass));
 
-insert into different_types (col_array_int, col_matrix_3x3, col_array_text, col_hstore, col_gender) values
+insert into different_types (col_array_int, col_matrix_3x3, col_array_text, song, json_array, col_hstore, col_gender) values
   (
     '{1, 2, 3, 4, 5}',
     '{ {1, 2, 3}, {11, 12, 13}, {21, 22, 23} }',
     '{"apple", "orange", "banana", "mangga"}',
+    '{ {"Hello", "darkness", "my", "old", "friend"}, {"I\'ve", "come", "to", "talk", "with", "you", "again"} }',
+    '{ "{\"x\": 123}", "{\"y\": 456}"}',
     'author => "Katherine Dunn", pages => 368, category => fiction',
     'male'
   );