[GitHub] tobias-istvan closed pull request #32: [AMBARI-24882] [Log Search UI] Change sticky filter panel solution from JS to clean css.

[GitBox <gi...@apache.org>]

tobias-istvan closed pull request #32: [AMBARI-24882] [Log Search UI] Change sticky filter panel solution from JS to clean css.
URL: https://github.com/apache/ambari-logsearch/pull/32
 
 
   

This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:

As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):

diff --git a/ambari-logsearch-web/src/app/components/filters-panel/filters-panel.component.less b/ambari-logsearch-web/src/app/components/filters-panel/filters-panel.component.less
index c748c37492..628ed2a222 100644
--- a/ambari-logsearch-web/src/app/components/filters-panel/filters-panel.component.less
+++ b/ambari-logsearch-web/src/app/components/filters-panel/filters-panel.component.less
@@ -19,13 +19,18 @@
 @import '../../modules/shared/mixins';
 
 :host {
+  background-color: @filters-panel-background-color;
+  box-shadow: 0 2px 2px rgba(0,0,0,.1);
   display: block;
+  opacity: .95;
   padding: @filters-panel-padding;
-  background-color: @filters-panel-background-color;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
 
   .filter-input-container {
-    display: flex;
     align-items: flex-start;
+    display: flex;
     justify-content: flex-start;
 
     .search-button {
diff --git a/ambari-logsearch-web/src/app/components/log-index-filter/log-index-filter.component.less b/ambari-logsearch-web/src/app/components/log-index-filter/log-index-filter.component.less
index efdb2c663b..68d2e6a480 100644
--- a/ambari-logsearch-web/src/app/components/log-index-filter/log-index-filter.component.less
+++ b/ambari-logsearch-web/src/app/components/log-index-filter/log-index-filter.component.less
@@ -29,7 +29,7 @@
         margin-bottom: 0;
         position: sticky;
         top: -1px;
-        z-index: 10;
+        z-index: 1010;
         tr {
           box-shadow: -2px 2px 2px fadeout(@fluid-gray-1, 50%);
         }
diff --git a/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.less b/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.less
index f0f4765292..3cfb08b910 100644
--- a/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.less
+++ b/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.less
@@ -40,19 +40,6 @@
     }
   }
 
-  .fixed-filterbar {
-    filters-panel {
-      background-color: fadeout(@filters-panel-background-color, 5%);
-      box-shadow: 0 2px 2px rgba(0,0,0,.1);
-      left: 0;
-      margin: 0;
-      position: fixed;
-      top: 0;
-      width: 100%;
-      z-index: 1;
-    }
-  }
-
   .events-count {
     margin-top: @block-margin-top;
   }
diff --git a/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.ts b/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.ts
index 842218c4c2..ea27163a27 100644
--- a/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.ts
+++ b/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.ts
@@ -152,11 +152,6 @@ export class LogsContainerComponent implements OnInit, OnDestroy {
       this.activeTabId$.distinctUntilChanged().subscribe(this.onActiveTabIdChange)
     );
 
-    // set the position of the filter panel depending on the scroll height: so it is fixed when it would be out from the screen
-    this.subscriptions.push(
-      Observable.fromEvent(window, 'scroll').debounceTime(10).subscribe(this.setFixedPositionValue)
-    );
-
   }
 
   ngOnDestroy() {
@@ -351,28 +346,6 @@ export class LogsContainerComponent implements OnInit, OnDestroy {
   // SECTION END: FILTER SYNCHRONIZATION
   //
 
-  /**
-   * The goal is to set the fixed position of the filter panel when it is scrolled to the top. So that the panel
-   * can be always visible for the user.
-   */
-  private setFixedPositionValue = (): void => {
-    const el: Element = this.containerRef.nativeElement;
-    const top: number = el.getBoundingClientRect().top;
-    const valueBefore: boolean = this.isFilterPanelFixedPostioned;
-    if (valueBefore !== (top <= 0)) {
-      const fpEl: Element = this.filtersPanelRef.containerEl;
-      this.isFilterPanelFixedPostioned = top <= 0;
-      const filtersPanelHeight: number = fpEl.getBoundingClientRect().height;
-      const containerPaddingTop: number = parseFloat(window.getComputedStyle(el).paddingTop);
-      const htmlEl: HTMLElement = this.containerRef.nativeElement;
-      if (this.isFilterPanelFixedPostioned) {
-        htmlEl.style.paddingTop = (containerPaddingTop + filtersPanelHeight) + 'px';
-      } else {
-        htmlEl.style.paddingTop = (containerPaddingTop - filtersPanelHeight) + 'px';
-      }
-    }
-  }
-
   setCustomTimeRange(startTime: number, endTime: number): void {
     this.logsContainerService.setCustomTimeRange(startTime, endTime);
   }
diff --git a/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.less b/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.less
index 7461da3b8f..415a8fd149 100644
--- a/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.less
+++ b/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.less
@@ -21,7 +21,7 @@
 :host {
   max-height: @dropdown-max-height;
   max-width: @dropdown-max-width;
-  overflow-y: hidden;
+  overflow-y: auto;
   z-index: 1100;
 
   > li {


 

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services