Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-10-02 23:37:38 +02:00
Code Issues Projects Releases Wiki Activity

Add global message component to UI.

Browse Source
This commit is contained in:
kunw 2017-02-16 17:59:36 +08:00
parent e7b8a5492c
commit 5348c954ea
5 changed files with 94 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
harbor-app/src/app/base/harbor-shell/harbor-shell.component.html
View File

@ -1,40 +1,41 @@
<clr-main-container>
<clr-modal [(clrModalOpen)]="account_settings_opened">
<h3 class="modal-title">Accout Settings</h3>
<div class="modal-body">
<form>
<section class="form-block">
<div class="form-group">
<label for="account_settings_username" class="col-md-4">Username</label>
<input type="text" class="col-md-8" id="account_settings_username" size="20">
</div>
<div class="form-group">
<label for="account_settings_email" class="col-md-4">Email</label>
<input type="text" class="col-md-8" id="account_settings_email" size="20">
</div>
<div class="form-group">
<label for="account_settings_full_name" class="col-md-4">Full name</label>
<input type="text" class="col-md-8" id="account_settings_full_name" size="20">
</div>
<div class="form-group">
<label for="account_settings_comments" class="col-md-4">Comments</label>
<input type="text" class="col-md-8" id="account_settings_comments" size="20">
</div>
<div class="form-group">
<button type="button" class="col-md-4" class="btn btn-outline">Change Password</button>
</div>
</section>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline" (click)="account_settings_opened = false">Cancel</button>
<button type="button" class="btn btn-primary" (click)="account_settings_opened = false">Ok</button>
</div>
</clr-modal>
<navigator></navigator>
<div class="content-container">
<div class="content-area">
<router-outlet></router-outlet>
</div>
<clr-modal [(clrModalOpen)]="account_settings_opened">
<h3 class="modal-title">Accout Settings</h3>
<div class="modal-body">
<form>
<section class="form-block">
<div class="form-group">
<label for="account_settings_username" class="col-md-4">Username</label>
<input type="text" class="col-md-8" id="account_settings_username" size="20">
</div>
<div class="form-group">
<label for="account_settings_email" class="col-md-4">Email</label>
<input type="text" class="col-md-8" id="account_settings_email" size="20">
</div>
<div class="form-group">
<label for="account_settings_full_name" class="col-md-4">Full name</label>
<input type="text" class="col-md-8" id="account_settings_full_name" size="20">
</div>
<div class="form-group">
<label for="account_settings_comments" class="col-md-4">Comments</label>
<input type="text" class="col-md-8" id="account_settings_comments" size="20">
</div>
<div class="form-group">
<button type="button" class="col-md-4" class="btn btn-outline">Change Password</button>
</div>
</section>
</form>
</div>
</clr-main-container>
<div class="modal-footer">
<button type="button" class="btn btn-outline" (click)="account_settings_opened = false">Cancel</button>
<button type="button" class="btn btn-primary" (click)="account_settings_opened = false">Ok</button>
</div>
</clr-modal>
<navigator></navigator>
<global-message></global-message>
<div class="content-container">
<div class="content-area">
<router-outlet></router-outlet>
</div>
</div>
</clr-main-container>

7
harbor-app/src/app/global-message/message.component.html Normal file
View File

@ -0,0 +1,7 @@
<clr-alert [clrAlertType]="'alert-danger'" [clrAlertAppLevel]="true" [(clrAlertClosed)]="!globalMessageOpened" (clrAlertClosedChange)="onClose()">
<div class="alert-item">
<span class="alert-text">
{{globalMessage}}
</span>
</div>
</clr-alert>

26
harbor-app/src/app/global-message/message.component.ts Normal file
View File

@ -0,0 +1,26 @@
import { Component } from '@angular/core';
import { MessageService } from './message.service';
@Component({
selector: 'global-message',
templateUrl: 'message.component.html'
})
export class MessageComponent {
globalMessageOpened: boolean;
globalMessage: string;
constructor(messageService: MessageService) {
messageService.messageAnnounced$.subscribe(
message=>{
this.globalMessageOpened = true;
this.globalMessage = message;
console.log('received message:' + message);
}
)
}
onClose() {
this.globalMessageOpened = false;
}
}

14
harbor-app/src/app/global-message/message.service.ts Normal file
View File

@ -0,0 +1,14 @@
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class MessageService {
private messageAnnouncedSource = new Subject<string>();
messageAnnounced$ = this.messageAnnouncedSource.asObservable();
announceMessage(message: string) {
this.messageAnnouncedSource.next(message);
}
}

11
harbor-app/src/app/shared/shared.module.ts
View File

@ -1,13 +1,18 @@
import { NgModule } from '@angular/core';
import { CoreModule } from '../core/core.module';
import { MessageComponent } from '../global-message/message.component';
import { MessageService } from '../global-message/message.service';
@NgModule({
imports: [
CoreModule
],
declarations: [
MessageComponent
],
exports: [
CoreModule
]
CoreModule, MessageComponent
],
providers:[ MessageService ]
})
export class SharedModule {