Merge pull request #1294 from swissgeol/GSNGM-1160_update_scroll

Update scroll for geometries panel
swisstopo · Jun 7, 2024 · cefc0cd · cefc0cd
2 parents bc05c6d + ba7c76b
commit cefc0cd
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 37 deletions.
diff --git a/ui/cypress/e2e/toolbox.cy.ts b/ui/cypress/e2e/toolbox.cy.ts
@@ -38,8 +38,8 @@ describe('Toolbox', () => {
     cy.get('.ngm-slice-types > div:nth-child(2) .ngm-slice-side > div:first-child').click();
     cy.get('.ngm-slice-types > div:nth-child(2) .ngm-slice-side > div:first-child').should('have.class', 'active');
     cy.get('.ngm-slice-types > div:nth-child(2) .ngm-slice-to-draw button').click();
-    cy.get('ngm-slicer .ngm-geom-list .ngm-action-list-item:first-child').click();
-    cy.get('ngm-slicer .ngm-geom-list .ngm-action-list-item:first-child > .ngm-action-list-item-header > div:first-child').should('have.class', 'active');
+    cy.get('ngm-slicer .ngm-geom-filter').click();
+    cy.get('ngm-slicer .ngm-geom-filter > .ngm-action-list-item-header > div:first-child').should('have.class', 'active');
     cy.get('.ngm-slice-types > div:first-child').click();
     cy.get('.ngm-slice-types > div:first-child').click();
     cy.get('.cesium-widget > canvas').click(450, 280);
@@ -66,7 +66,7 @@ describe('Toolbox', () => {
     cy.get('.ngm-geom-edit-actions > button:first-child').click();
     cy.get('.ngm-back-icon').click();
     cy.get('.ngm-gst-icon').click();
-    cy.get('ngm-gst-interaction .ngm-geom-list .ngm-point-draw-icon').click();
+    cy.get('ngm-gst-interaction .ngm-geom-filter .ngm-point-draw-icon').click();
     testGstOutput();
   });
 
@@ -79,7 +79,7 @@ describe('Toolbox', () => {
     cy.get('.cesium-widget > canvas').dblclick(450, 200);
     cy.get('.ngm-back-icon').click();
     cy.get('.ngm-gst-icon').click();
-    cy.get('ngm-gst-interaction .ngm-geom-list .ngm-line-draw-icon').click();
+    cy.get('ngm-gst-interaction .ngm-geom-filter .ngm-line-draw-icon').click();
     testGstOutput();
   });
 });
diff --git a/ui/src/style/ngm-side-bar.css b/ui/src/style/ngm-side-bar.css
@@ -69,7 +69,7 @@ ngm-auth:hover {
 
 .ngm-side-bar-panel {
   width: 250px;
-  height: 100%;
+  height: calc(100vh - var(--ngm-header-height));
   max-width: 1028px;
   background-color: #F1F3F5;
   box-shadow: 4px 0 4px #00000029;
@@ -96,7 +96,7 @@ ngm-auth:hover {
 }
 
 .ngm-panel-header {
-  height: 34px;
+  height: var(--ngm-panel-header-height);
   border-bottom: 2px solid #DFE2E6;
   display: flex;
   align-items: center;
@@ -124,7 +124,6 @@ ngm-auth:hover {
   display: flex;
   flex-direction: column;
   margin-top: 9px;
-  max-height: calc(100% - 124px);
   overflow-y: auto;
   overflow-x: hidden;
   padding-bottom: 40px;

diff --git a/ui/src/style/ngm-toolbox.css b/ui/src/style/ngm-toolbox.css
@@ -1,12 +1,30 @@
+ngm-tools {
+  height: 100%;
+}
+
 ngm-draw-tool,
 ngm-slicer,
 ngm-gst-interaction,
 ngm-measure,
 data-download {
-  height: calc(100vh - 142px);
-  display: block;
+  height: calc(100% - (var(--ngm-panel-header-height) + 10px));
+  display: flex;
+  flex-direction: column;
+}
+
+ngm-geometries-list {
+  min-height: 140px;
+}
+
+ngm-geometries-simple-list {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  height: 100%;
+}
+
+.ngm-geom-list {
   overflow-y: auto;
-  overflow-x: hidden;
 }
 
 .ngm-draw-list-item,

diff --git a/ui/src/style/variables.css b/ui/src/style/variables.css
@@ -8,4 +8,5 @@
   --ngm-header-height: 88px;
   --ngm-header-height-mobile: 48px;
   --ngm-bottom-menu-height: 72px;
+  --ngm-panel-header-height: 34px;
 }
diff --git a/ui/src/toolbox/ngm-geometries-simple-list.ts b/ui/src/toolbox/ngm-geometries-simple-list.ts
@@ -182,35 +182,35 @@ export default class NgmGeometriesSimpleList extends LitElementI18n {
         }
         return html`
             <div .hidden="${!this.listTitle}" class="ngm-geom-label">${this.listTitle}</div>
-            <div class="ngm-geom-list">
-                <div class="ngm-action-list-item ngm-geom-filter">
-                    <div class="ngm-action-list-item-header">
-                        <div class=${classMap({active: !this.selectedFilter})} @click=${() => this.selectFilter()}>
-                            ${i18next.t('tbx_all_label')}
-                        </div>
-                        <div class="ngm-point-draw-icon ${classMap({active: this.selectedFilter === 'point'})}"
-                             title=${i18next.t('tbx_filter_point')}
-                             @click=${() => this.selectFilter('point')}>
-                        </div>
-                        <div class="ngm-line-draw-icon ${classMap({active: this.selectedFilter === 'line'})}"
-                             title=${i18next.t('tbx_filter_line')}
-                             @click=${() => this.selectFilter('line')}>
-                        </div>
-                        <div class="ngm-polygon-draw-icon ${classMap({active: this.selectedFilter === 'polygon'})}"
-                             title=${i18next.t('tbx_filter_polygon')}
-                             @click=${() => this.selectFilter('polygon')}>
-                        </div>
-                        <div class="ngm-rectangle-draw-icon ${classMap({active: this.selectedFilter === 'rectangle'})}"
-                             title=${i18next.t('tbx_filter_rectangle')}
-                             @click=${() => this.selectFilter('rectangle')}>
-                        </div>
-                        ${this.viewMode ? '' : html`
-                            <div class="ui dropdown right pointing ngm-action-menu">
-                                <div class="ngm-action-menu-icon"></div>
-                                ${this.filterMenuTemplate()}
-                            </div>`}
+            <div class="ngm-action-list-item ngm-geom-filter">
+                <div class="ngm-action-list-item-header">
+                    <div class=${classMap({active: !this.selectedFilter})} @click=${() => this.selectFilter()}>
+                        ${i18next.t('tbx_all_label')}
+                    </div>
+                    <div class="ngm-point-draw-icon ${classMap({active: this.selectedFilter === 'point'})}"
+                         title=${i18next.t('tbx_filter_point')}
+                         @click=${() => this.selectFilter('point')}>
                     </div>
+                    <div class="ngm-line-draw-icon ${classMap({active: this.selectedFilter === 'line'})}"
+                         title=${i18next.t('tbx_filter_line')}
+                         @click=${() => this.selectFilter('line')}>
+                    </div>
+                    <div class="ngm-polygon-draw-icon ${classMap({active: this.selectedFilter === 'polygon'})}"
+                         title=${i18next.t('tbx_filter_polygon')}
+                         @click=${() => this.selectFilter('polygon')}>
+                    </div>
+                    <div class="ngm-rectangle-draw-icon ${classMap({active: this.selectedFilter === 'rectangle'})}"
+                         title=${i18next.t('tbx_filter_rectangle')}
+                         @click=${() => this.selectFilter('rectangle')}>
+                    </div>
+                    ${this.viewMode ? '' : html`
+                        <div class="ui dropdown right pointing ngm-action-menu">
+                            <div class="ngm-action-menu-icon"></div>
+                            ${this.filterMenuTemplate()}
+                        </div>`}
                 </div>
+            </div>
+            <div class="ngm-geom-list">
                 ${geometries.map((geom, index) => {
                     const disabled = (this.disabledCallback && this.disabledCallback(geom)) || this.disabledTypes.includes(geom.type) || this.editingEnabled;
                     const active = !disabled && this.selectedId === geom.id;