chore: use a specific panel class for table view

umap/static/umap/css/panel.css

@@ -3,7 +3,7 @@
     /* as being out of the visible viewport is not enough  */
     visibility: hidden;
     position: absolute;
-    bottom: 20px;
+    bottom: 10px;
     overflow-x: auto;
     z-index: 1010;
     background-color: #fff;
@@ -17,12 +17,15 @@
     background-color: var(--color-darkGray);
     color: #efefef;
 }
-.panel.fullwidth {
+.panel.full {
-    width: 100%;
+    width: initial;
     right: -100%;
     z-index: 10000;
-    padding-left: 0;
+}
-    padding-right: 0;
+.panel.full.on {
+    visibility: visible;
+    right: 10px;
+    left: 10px;
 }
 .umap-caption-bar-enabled .panel {
     bottom: 46px;
@@ -43,6 +46,7 @@
     clear: both;
     height: calc(100% - 32px); /* Minus size of toolbox */
     padding: 10px;
+    padding-top: 32px;
 }
 .panel .toolbox {
     padding: 5px 10px;
@@ -53,10 +57,14 @@
     justify-content: flex-start;
     gap: 5px;
     line-height: 2.2em;
+    background-color: #fff;
+    position: fixed;
 }
 .panel.dark .toolbox {
     background-color: var(--color-darkGray);
-    border-bottom: 1px solid #232729;
+}
+.panel.full .toolbox {
+    width: calc(100% - 112px);
 }
 .panel .toolbox li {
     cursor: pointer;
@@ -80,7 +88,11 @@
     .panel {
         top: 0;
         margin-top: 10px;
-        width: 390px;
+        width: 400px;
+    }
+    .panel .toolbox {
+        /* It overflows otherwise, dunno why */
+        width: 398px;
     }
     .panel.condensed {
         max-height: 500px;
@@ -113,8 +125,15 @@
         bottom: 0;
         right: -100%;
     }
+    .panel.left {
+        left: -100%;
+    }
+    .panel .toolbox {
+        width: 100%;
+    }
     .panel.on {
         right: 0;
+        left: 0;
         visibility: visible;
     }
 }

umap/static/umap/js/modules/global.js

@@ -1,6 +1,6 @@
 import URLs from './urls.js'
 import Browser from './browser.js'
-import { Panel, EditPanel } from './panel.js'
+import { Panel, EditPanel, FullPanel } from './panel.js'
 import * as Utils from './utils.js'
 import { SCHEMA } from './schema.js'
 import { Request, ServerRequest, RequestError, HTTPError, NOKError } from './request.js'
@@ -19,6 +19,7 @@ window.U = {
   Browser,
   Panel,
   EditPanel,
+  FullPanel,
   Utils,
   SCHEMA,
   Orderable,

umap/static/umap/js/modules/panel.js

@@ -79,3 +79,8 @@ export class Panel {
 export class EditPanel extends Panel {
   CLASSNAME = 'right dark'
 }
+
+export class FullPanel extends Panel {
+  CLASSNAME = 'full dark'
+  MODE = 'expanded'
+}

umap/static/umap/js/umap.js

@@ -57,7 +57,10 @@ U.Map = L.Map.extend({
     this.urls = new U.URLs(this.options.urls)
 
     this.panel = new U.Panel(this._container)
-    if (this.hasEditMode()) this.editPanel = new U.EditPanel(this._container)
+    if (this.hasEditMode()) {
+      this.editPanel = new U.EditPanel(this._container)
+      this.fullPanel = new U.FullPanel(this._container)
+    }
     this.ui = new U.UI(this._container)
     this.ui.on('dataloading', (e) => this.fire('dataloading', e))
     this.ui.on('dataload', (e) => this.fire('dataload', e))

umap/static/umap/js/umap.tableeditor.js

@@ -94,7 +94,6 @@ U.TableEditor = L.Class.extend({
 
   edit: function () {
     const id = 'tableeditor:edit'
-    this.datalayer.map.fire('dataloading', { id: id })
     this.compileProperties()
     this.renderHeaders()
     this.body.innerHTML = ''
@@ -110,11 +109,10 @@ U.TableEditor = L.Class.extend({
       this.edit()
     }
     L.DomEvent.on(addButton, 'click', addProperty, this)
-    this.datalayer.map.ui.openPanel({
+    this.datalayer.map.fullPanel.open({
       data: { html: this.table },
-      className: 'umap-table-editor fullwidth dark',
+      className: 'umap-table-editor',
       actions: [addButton, U.Browser.backButton(this.datalayer.map)],
     })
-    this.datalayer.map.fire('dataload', { id: id })
   },
 })

umap/static/umap/map.css

@@ -911,7 +911,9 @@ a.umap-control-caption,
     height: 30px;
     line-height: 30px;
     background-color: var(--color-lightGray);
-    color: #666;
+}
+.umap-browser .off h5 {
+    color: #b3b3b3;
 }
 .umap-browser.dark h5 {
     background-color: #232729;
@@ -984,10 +986,6 @@ a.umap-control-caption,
 /* ********************************* */
 /*          Table Editor             */
 /* ********************************* */
-#umap-panel.umap-table-editor {
-    padding-left: 0;
-    padding-right: 0;
-}
 
 .umap-table-editor .table {
     display: table;