diff --git a/umap/static/umap/css/panel.css b/umap/static/umap/css/panel.css index c84c6ef9..58116c08 100644 --- a/umap/static/umap/css/panel.css +++ b/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 { - width: 100%; +.panel.full { + 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; } } diff --git a/umap/static/umap/js/modules/global.js b/umap/static/umap/js/modules/global.js index 708d9a15..7d07ba2f 100644 --- a/umap/static/umap/js/modules/global.js +++ b/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, diff --git a/umap/static/umap/js/modules/panel.js b/umap/static/umap/js/modules/panel.js index 0e94f0c7..3e612b74 100644 --- a/umap/static/umap/js/modules/panel.js +++ b/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' +} diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js index a8c37e7b..5b3e663b 100644 --- a/umap/static/umap/js/umap.js +++ b/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)) diff --git a/umap/static/umap/js/umap.tableeditor.js b/umap/static/umap/js/umap.tableeditor.js index d59fa704..d856ecdf 100644 --- a/umap/static/umap/js/umap.tableeditor.js +++ b/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 }) }, }) diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 86640d3c..c173f49e 100644 --- a/umap/static/umap/map.css +++ b/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;