You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2022/07/07 20:53:15 UTC
[incubator-streampipes] 01/02: [STREAMPIPES-537] Add reusable tab-based navbar component
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 3a2c2a6812923e363a9a9d47d6843382e670acf7
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Thu Jul 7 22:52:41 2022 +0200
[STREAMPIPES-537] Add reusable tab-based navbar component
---
.../basic-nav-tabs/basic-nav-tabs.component.html | 37 ++++++++++++++++++++++
.../basic-nav-tabs/basic-nav-tabs.component.scss} | 28 +++++++++++-----
.../basic-nav-tabs/basic-nav-tabs.component.ts} | 28 +++++++++++-----
.../models/sp-navigation.model.ts} | 18 +++--------
.../shared-ui/src/lib/shared-ui.module.ts | 17 +++++++---
.../streampipes/shared-ui/src/public-api.ts | 3 ++
6 files changed, 98 insertions(+), 33 deletions(-)
diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.html
new file mode 100644
index 000000000..25f3eadd1
--- /dev/null
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.html
@@ -0,0 +1,37 @@
+<!--
+ ~ Licensed to the Apache Software Foundation (ASF) under one or more
+ ~ contributor license agreements. See the NOTICE file distributed with
+ ~ this work for additional information regarding copyright ownership.
+ ~ The ASF licenses this file to You under the Apache License, Version 2.0
+ ~ (the "License"); you may not use this file except in compliance with
+ ~ the License. You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+ ~
+ -->
+
+<div fxLayout="column" class="page-container">
+ <div fxLayout="row" class="p-0 sp-bg-lightgray page-container-nav">
+ <div fxLayout="fill">
+ <div fxFlex="100" class="page-container-nav">
+ <nav mat-tab-nav-bar color="accent">
+ <a mat-tab-link *ngFor="let item of spNavigationItems"
+ (click)="navigateTo(item)"
+ [active]="activeLink === item.itemId">
+ <span class="upper-case">{{item.itemTitle}}</span>
+ </a>
+ </nav>
+ </div>
+ </div>
+ </div>
+
+ <div class="fixed-height page-container-padding-inner" fxLayout="column" fxFlex="100">
+ <ng-content fxFlex="100"></ng-content>
+ </div>
+</div>
diff --git a/ui/projects/streampipes/shared-ui/src/public-api.ts b/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.scss
similarity index 62%
copy from ui/projects/streampipes/shared-ui/src/public-api.ts
copy to ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.scss
index cd25a6bd7..ce626dc9d 100644
--- a/ui/projects/streampipes/shared-ui/src/public-api.ts
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.scss
@@ -16,16 +16,28 @@
*
*/
-export * from './lib/shared-ui.module';
+.page-container-padding-inner {
+ padding: 10px;
+}
-export * from './lib/dialog/base-dialog/base-dialog.model';
-export * from './lib/dialog/base-dialog/base-dialog.service';
-export * from './lib/dialog/base-dialog/dialog-ref';
+.sp-bg-lightgray {
+ background-color: var(--color-bg-1);
+}
-export * from './lib/dialog/confirm-dialog/confirm-dialog.component';
-export * from './lib/dialog/panel-dialog/panel-dialog.component';
-export * from './lib/dialog/standard-dialog/standard-dialog.component';
+.sp-tab-bg {
+ background-color: var(--color-bg-1);
+}
-export * from './lib/components/basic-view/basic-view.component';
+.page-container {
+ margin: 10px;
+ border: 1px solid var(--color-bg-3);
+ min-height: calc(100% - 20px);
+}
+.page-container-padding-inner {
+ margin: 10px;
+}
+.upper-case {
+ text-transform: uppercase;
+}
diff --git a/ui/projects/streampipes/shared-ui/src/public-api.ts b/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.ts
similarity index 57%
copy from ui/projects/streampipes/shared-ui/src/public-api.ts
copy to ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.ts
index cd25a6bd7..bdace86dd 100644
--- a/ui/projects/streampipes/shared-ui/src/public-api.ts
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.ts
@@ -16,16 +16,28 @@
*
*/
-export * from './lib/shared-ui.module';
+import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
+import { SpNavigationItem } from '../../models/sp-navigation.model';
-export * from './lib/dialog/base-dialog/base-dialog.model';
-export * from './lib/dialog/base-dialog/base-dialog.service';
-export * from './lib/dialog/base-dialog/dialog-ref';
+@Component({
+ selector: 'sp-basic-nav-tabs',
+ templateUrl: './basic-nav-tabs.component.html',
+ styleUrls: ['./basic-nav-tabs.component.scss']
+})
+export class SpBasicNavTabsComponent {
-export * from './lib/dialog/confirm-dialog/confirm-dialog.component';
-export * from './lib/dialog/panel-dialog/panel-dialog.component';
-export * from './lib/dialog/standard-dialog/standard-dialog.component';
+ @Input()
+ spNavigationItems: SpNavigationItem[];
-export * from './lib/components/basic-view/basic-view.component';
+ @Input()
+ activeLink: string;
+ constructor(private router: Router) {
+ }
+
+ navigateTo(spNavigationItem: SpNavigationItem) {
+ this.router.navigate(spNavigationItem.itemLink);
+ }
+}
diff --git a/ui/projects/streampipes/shared-ui/src/public-api.ts b/ui/projects/streampipes/shared-ui/src/lib/models/sp-navigation.model.ts
similarity index 61%
copy from ui/projects/streampipes/shared-ui/src/public-api.ts
copy to ui/projects/streampipes/shared-ui/src/lib/models/sp-navigation.model.ts
index cd25a6bd7..d9d9938ec 100644
--- a/ui/projects/streampipes/shared-ui/src/public-api.ts
+++ b/ui/projects/streampipes/shared-ui/src/lib/models/sp-navigation.model.ts
@@ -16,16 +16,8 @@
*
*/
-export * from './lib/shared-ui.module';
-
-export * from './lib/dialog/base-dialog/base-dialog.model';
-export * from './lib/dialog/base-dialog/base-dialog.service';
-export * from './lib/dialog/base-dialog/dialog-ref';
-
-export * from './lib/dialog/confirm-dialog/confirm-dialog.component';
-export * from './lib/dialog/panel-dialog/panel-dialog.component';
-export * from './lib/dialog/standard-dialog/standard-dialog.component';
-
-export * from './lib/components/basic-view/basic-view.component';
-
-
+export interface SpNavigationItem {
+ itemId: string;
+ itemTitle: string;
+ itemLink: string[];
+}
diff --git a/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts b/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts
index 7d26b8e54..1758565cf 100644
--- a/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts
+++ b/ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts
@@ -28,25 +28,34 @@ import { SpBasicViewComponent } from './components/basic-view/basic-view.compone
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
+import { SpBasicNavTabsComponent } from './components/basic-nav-tabs/basic-nav-tabs.component';
+import { MatTabsModule } from '@angular/material/tabs';
@NgModule({
declarations: [
ConfirmDialogComponent,
PanelDialogComponent,
StandardDialogComponent,
- SpBasicViewComponent
+ SpBasicViewComponent,
+ SpBasicNavTabsComponent
],
imports: [
CommonModule,
FlexLayoutModule,
MatButtonModule,
MatIconModule,
+ MatTabsModule,
MatTooltipModule,
PortalModule,
- OverlayModule
+ OverlayModule,
],
exports: [
- ConfirmDialogComponent, PanelDialogComponent, StandardDialogComponent, SpBasicViewComponent
+ ConfirmDialogComponent,
+ PanelDialogComponent,
+ StandardDialogComponent,
+ SpBasicViewComponent,
+ SpBasicNavTabsComponent,
]
})
-export class SharedUiModule { }
+export class SharedUiModule {
+}
diff --git a/ui/projects/streampipes/shared-ui/src/public-api.ts b/ui/projects/streampipes/shared-ui/src/public-api.ts
index cd25a6bd7..007b7cd99 100644
--- a/ui/projects/streampipes/shared-ui/src/public-api.ts
+++ b/ui/projects/streampipes/shared-ui/src/public-api.ts
@@ -28,4 +28,7 @@ export * from './lib/dialog/standard-dialog/standard-dialog.component';
export * from './lib/components/basic-view/basic-view.component';
+export * from './lib/components/basic-nav-tabs/basic-nav-tabs.component';
+export * from './lib/models/sp-navigation.model';
+