Commit b7ce474a authored by Steven Zou's avatar Steven Zou
Browse files

refine harbor shell component

parent 7795850e
<clr-modal [(clrModalOpen)]="opened" [clrModalStaticBackdrop]="staticBackdrop">
<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)="close()">Cancel</button>
<button type="button" class="btn btn-primary" (click)="submit()">Ok</button>
</div>
</clr-modal>
\ No newline at end of file
import { Component } from '@angular/core';
@Component({
selector: "account-settings-modal",
templateUrl: "account-settings-modal.component.html"
})
export class AccountSettingsModalComponent{
opened:boolean = false;
staticBackdrop: boolean = true;
open() {
this.opened = true;
}
close() {
this.opened = false;
}
submit() {
console.info("ok here!");
this.close();
}
}
\ No newline at end of file
<clr-dropdown [clrMenuPosition]="'bottom-right'">
<button class="nav-text" clrDropdownToggle>
<!--<clr-icon shape="user" class="is-inverse" size="24"></clr-icon>-->
<span>Administrator</span>
<clr-icon shape="caret down"></clr-icon>
</button>
<div class="dropdown-menu">
<a href="javascript:void(0)" clrDropdownItem>Add User</a>
<a href="javascript:void(0)" clrDropdownItem>Account Setting</a>
<a href="javascript:void(0)" clrDropdownItem>About</a>
</div>
</clr-dropdown>
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
@Component({
selector: "base-settings",
templateUrl: "base-settings.component.html"
})
/**
* Component to handle the account settings
*/
export class BaseSettingsComponent implements OnInit {
ngOnInit(): void {
}
}
......@@ -9,7 +9,7 @@ import { NavigatorComponent } from './navigator/navigator.component';
import { GlobalSearchComponent } from './global-search/global-search.component';
import { FooterComponent } from './footer/footer.component';
import { HarborShellComponent } from './harbor-shell/harbor-shell.component';
import { BaseSettingsComponent } from './base-settings/base-settings.component';
import { AccountSettingsModalComponent } from './account-settings/account-settings-modal.component';
import { BaseRoutingModule } from './base-routing.module';
......@@ -24,9 +24,9 @@ import { BaseRoutingModule } from './base-routing.module';
declarations: [
NavigatorComponent,
GlobalSearchComponent,
BaseSettingsComponent,
FooterComponent,
HarborShellComponent
HarborShellComponent,
AccountSettingsModalComponent
],
exports: [ HarborShellComponent ]
})
......
<a class="nav-link">
<span class="nav-text">
<clr-icon shape="search"></clr-icon>
</span>
</a>
\ No newline at end of file
<form class="search">
<label for="search_input">
<input id="search_input" type="text" placeholder="Search Harbor...">
</label>
</form>
\ No newline at end of file
<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>
<navigator (showAccountSettingsModal)="openModal($event)"></navigator>
<global-message></global-message>
<div class="content-container">
<div class="content-area">
<router-outlet></router-outlet>
</div>
<nav class="sidenav">
<section class="sidenav-content">
<a routerLink="/harbor/projects" routerLinkActive="active" class="nav-link">
Projects
</a>
<section class="nav-group collapsible">
<input id="tabsystem" type="checkbox">
<label for="tabsystem">System Managements</label>
<ul class="nav-list">
<li><a class="nav-link">Users</a></li>
<li><a class="nav-link">Replications</a></li>
<li><a class="nav-link">Quarantine[*]</a></li>
<li><a class="nav-link">Configurations[*]</a></li>
</ul>
</section>
</section>
</nav>
</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>
<global-message></global-message>
<div class="content-container">
<div class="content-area">
<router-outlet></router-outlet>
</div>
</div>
</clr-main-container>
<account-settings-modal></account-settings-modal>
\ No newline at end of file
import { Component } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { SessionService } from '../../shared/session.service';
import { ModalEvent } from '../modal-event';
import { AccountSettingsModalComponent } from '../account-settings/account-settings-modal.component';
@Component({
selector: 'harbor-shell',
templateUrl: 'harbor-shell.component.html'
})
export class HarborShellComponent {
export class HarborShellComponent implements OnInit {
@ViewChild(AccountSettingsModalComponent)
private accountSettingsModal: AccountSettingsModalComponent;
constructor(private session: SessionService) { }
ngOnInit() {
let cUser = this.session.getCurrentUser();
if (!cUser) {
//Try to update the session
this.session.retrieveUser();
}
}
//Open modal dialog
openModal(event: ModalEvent): void {
switch (event.modalName) {
case "account-settings":
this.accountSettingsModal.open();
default:
break;
}
}
//Close the modal dialog
closeModal(event: ModalEvent): void {
switch (event.modalName) {
case "account-settings":
this.accountSettingsModal.close();
default:
break;
}
}
}
\ No newline at end of file
//Define a object to store the modal event
export class ModalEvent {
modalName: string;
modalFlag: boolean; //true for open, false for close
}
\ No newline at end of file
<clr-header class="header-4 header">
<clr-header class="header-5 header">
<div class="branding">
<a href="#" class="nav-link">
<clr-icon shape="vm-bug"></clr-icon>
<span class="title">Harbor</span>
</a>
</div>
<div class="divider"></div>
<div class="header-nav">
<a class="nav-link" id="dashboard-link" [routerLink]="['/harbor', 'dashboard']" routerLinkActive="active">
<span class="nav-text">Dashboard</span>
</a>
<a class="nav-link" id="dashboard-link" [routerLink]="['/harbor', 'projects']" routerLinkActive="active">
<span class="nav-text">Project</span>
</a>
</div>
<global-search></global-search>
<div class="header-actions">
<clr-dropdown [clrMenuPosition]="'bottom-right'">
<!--<clr-icon shape="user" class="is-inverse" size="24"></clr-icon>-->
<clr-dropdown [clrMenuPosition]="'bottom-right'" class="dropdown">
<button class="nav-text" clrDropdownToggle>
<clr-icon shape="user" class="is-inverse" size="24" style="left:-5px;"></clr-icon>
<span>Administrator</span>
<clr-icon shape="caret down"></clr-icon>
</button>
<div class="dropdown-menu">
<a href="javascript:void(0)" clrDropdownItem>Add User</a>
<a href="javascript:void(0)" clrDropdownItem>Account Setting</a>
<a href="javascript:void(0)" clrDropdownItem>About</a>
<a href="javascript:void(0)" clrDropdownItem (click)="open()">Account Setting</a>
<a href="javascript:void(0)" clrDropdownItem>Log out</a>
</div>
</clr-dropdown>
<global-search></global-search>
<clr-dropdown class="dropdown bottom-right">
<button class="nav-text" clrDropdownToggle>
<button class="nav-icon" clrDropdownToggle>
<clr-icon shape="cog"></clr-icon>
<clr-icon shape="caret down"></clr-icon>
</button>
<div class="dropdown-menu">
<a href="javascript:void(0)" clrDropdownItem>Preferences</a>
<a href="javascript:void(0)" clrDropdownItem>Log out</a>
<a href="javascript:void(0)" clrDropdownItem>Add User</a>
<a href="javascript:void(0)" clrDropdownItem>About</a>
</div>
</clr-dropdown>
</div>
......
import { Component } from '@angular/core';
import { Component, Output, EventEmitter } from '@angular/core';
import { Router } from '@angular/router';
import { ModalEvent } from '../modal-event';
@Component({
selector: 'navigator',
templateUrl: "navigator.component.html"
})
export class NavigatorComponent {
// constructor(private router: Router){}
@Output() showAccountSettingsModal = new EventEmitter<ModalEvent>();
//Open the account setting dialog
open():void {
this.showAccountSettingsModal.emit({
modalName:"account-settings",
modalFlag: true
});
}
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment