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/06/12 14:46:18 UTC
[incubator-streampipes] 01/02: [hotfix] Add reusable component for basic page view
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 efade3aabf3503320a228cd49eb9ef2060e07cec
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Sun Jun 12 16:45:40 2022 +0200
[hotfix] Add reusable component for basic page view
---
ui/projects/streampipes/shared-ui/package.json | 4 +-
.../basic-view/basic-view.component.html | 62 ++++++++++++++++++++++
.../basic-view/basic-view.component.scss} | 35 +++++++++---
.../components/basic-view/basic-view.component.ts} | 31 ++++++++---
.../shared-ui/src/lib/shared-ui.module.ts | 14 +++--
.../streampipes/shared-ui/src/public-api.ts | 3 +-
6 files changed, 128 insertions(+), 21 deletions(-)
diff --git a/ui/projects/streampipes/shared-ui/package.json b/ui/projects/streampipes/shared-ui/package.json
index 95c747714..a602da9ba 100644
--- a/ui/projects/streampipes/shared-ui/package.json
+++ b/ui/projects/streampipes/shared-ui/package.json
@@ -3,10 +3,12 @@
"version": "0.0.1",
"peerDependencies": {
"@angular/animations": "^13.3.0",
+ "@angular/cdk": "^13.3.0",
"@angular/common": "^13.3.0",
"@angular/core": "^13.3.0",
+ "@angular/flex-layout": "^13.0.0-beta.38",
"@angular/material": "^13.3.0",
- "@angular/cdk": "^13.3.0",
+ "@angular/router": "^13.3.0",
"rxjs": "^6.6.2"
},
"dependencies": {
diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html
new file mode 100644
index 000000000..0c1c6ffce
--- /dev/null
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.html
@@ -0,0 +1,62 @@
+<!--
+ ~ 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.
+ ~
+ -->
+
+<!--
+ ~ 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 class="pl-5 pr-5"
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ style="border-right: 2px solid var(--color-bg-2)" *ngIf="showBackLink">
+ <button mat-button
+ mat-icon-button
+ color="accent"
+ matTooltip="Back"
+ (click)="navigateBack()"
+ class="edit-menu-btn"
+ data-cy="save-data-explorer-go-back-to-overview">
+ <mat-icon>arrow_back</mat-icon>
+ </button>
+ </div>
+ <ng-content select="[nav]"></ng-content>
+ </div>
+ </div>
+
+ <div [ngClass]="padding ? '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-view/basic-view.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-view/basic-view.component.scss
index b7b26edd9..a73f16375 100644
--- a/ui/projects/streampipes/shared-ui/src/public-api.ts
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss
@@ -16,15 +16,34 @@
*
*/
-export * from './lib/shared-ui.module';
+.page-container-nav {
+ line-height:24px;
+ height: 50px;
+ border-bottom:1px solid var(--color-bg-3);
+}
-export * from './lib/dialog/base-dialog/base-dialog.model';
-// export * from './lib/dialog/base-dialog/base-dialog.component';
-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);
+}
+.page-container {
+ margin: 10px;
+ border: 1px solid var(--color-bg-3);
+ min-height: calc(100% - 20px);
+}
+.page-container-padding-inner {
+ margin: 10px;
+}
+
+.pl-5 {
+ padding-left: 5px;
+}
+
+.pr-5 {
+ padding-right: 5px;
+}
diff --git a/ui/projects/streampipes/shared-ui/src/public-api.ts b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.ts
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-view/basic-view.component.ts
index b7b26edd9..f77767864 100644
--- a/ui/projects/streampipes/shared-ui/src/public-api.ts
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.ts
@@ -16,15 +16,30 @@
*
*/
-export * from './lib/shared-ui.module';
+import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
-export * from './lib/dialog/base-dialog/base-dialog.model';
-// export * from './lib/dialog/base-dialog/base-dialog.component';
-export * from './lib/dialog/base-dialog/base-dialog.service';
-export * from './lib/dialog/base-dialog/dialog-ref';
+@Component({
+ selector: 'sp-basic-view',
+ templateUrl: './basic-view.component.html',
+ styleUrls: ['./basic-view.component.scss']
+})
+export class SpBasicViewComponent {
-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()
+ padding = false;
+ @Input()
+ showBackLink = false;
+ @Input()
+ backLinkTarget: string[];
+
+ constructor(private router: Router) {
+
+ }
+
+ navigateBack() {
+ this.router.navigate(this.backLinkTarget);
+ }
+}
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 f7102fcbc..7d26b8e54 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
@@ -24,21 +24,29 @@ import { CommonModule } from '@angular/common';
import { PortalModule } from '@angular/cdk/portal';
import { MatButtonModule } from '@angular/material/button';
import { OverlayModule } from '@angular/cdk/overlay';
+import { SpBasicViewComponent } from './components/basic-view/basic-view.component';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
@NgModule({
declarations: [
ConfirmDialogComponent,
PanelDialogComponent,
- StandardDialogComponent
+ StandardDialogComponent,
+ SpBasicViewComponent
],
imports: [
CommonModule,
- PortalModule,
+ FlexLayoutModule,
MatButtonModule,
+ MatIconModule,
+ MatTooltipModule,
+ PortalModule,
OverlayModule
],
exports: [
- ConfirmDialogComponent, PanelDialogComponent, StandardDialogComponent
+ ConfirmDialogComponent, PanelDialogComponent, StandardDialogComponent, SpBasicViewComponent
]
})
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 b7b26edd9..cd25a6bd7 100644
--- a/ui/projects/streampipes/shared-ui/src/public-api.ts
+++ b/ui/projects/streampipes/shared-ui/src/public-api.ts
@@ -19,7 +19,6 @@
export * from './lib/shared-ui.module';
export * from './lib/dialog/base-dialog/base-dialog.model';
-// export * from './lib/dialog/base-dialog/base-dialog.component';
export * from './lib/dialog/base-dialog/base-dialog.service';
export * from './lib/dialog/base-dialog/dialog-ref';
@@ -27,4 +26,6 @@ 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';
+