This is an automated email from the ASF dual-hosted git repository.
tobiasistvan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/ambari-logsearch.git
The following commit(s) were added to refs/heads/master by this push:
new 50618a8 [AMBARI-24882] [Log Search UI] Change sticky filter panel
solution from JS to clean css. (#32)
50618a8 is described below
commit 50618a8ceae5eded7e8b6b820fab512067e359c8
Author: Istvan Tobias <[email protected]>
AuthorDate: Tue Nov 20 16:58:51 2018 +0100
[AMBARI-24882] [Log Search UI] Change sticky filter panel solution from JS
to clean css. (#32)
---
.../filters-panel/filters-panel.component.less | 9 ++++++--
.../log-index-filter.component.less | 2 +-
.../logs-container/logs-container.component.less | 13 -----------
.../logs-container/logs-container.component.ts | 27 ----------------------
.../dropdown-list/dropdown-list.component.less | 2 +-
5 files changed, 9 insertions(+), 44 deletions(-)
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 c748c37..628ed2a 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 efdb2c6..68d2e6a 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 f0f4765..3cfb08b 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 842218c..ea27163 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 7461da3..415a8fd 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 {
