Modify the style of language and modify variable name

Signed-off-by: Yogi_Wang <yawang@vmware.com>
This commit is contained in:
Yogi_Wang 2019-11-22 15:06:21 +08:00
parent cfff0b6aaa
commit 1a3e8ebb81
5 changed files with 15 additions and 10 deletions

View File

@ -1,6 +1,6 @@
<clr-main-container> <clr-main-container>
<global-message [isAppLevel]="true"></global-message> <global-message [isAppLevel]="true"></global-message>
<navigator (showAccountSettingsModal)="openModal($event)" (showPwdChangeModal)="openModal($event)"></navigator> <navigator (showAccountSettingsModal)="openModal($event)" (showDialogModalAction)="openModal($event)"></navigator>
<div class="content-container"> <div class="content-container">
<div class="content-area" [class.container-override]="showSearch" <div class="content-area" [class.container-override]="showSearch"
[class.content-area-override]="!shouldOverrideContent" [class.content-area-override]="!shouldOverrideContent"

View File

@ -13,7 +13,7 @@
</div> </div>
<global-search></global-search> <global-search></global-search>
<div class="header-actions"> <div class="header-actions">
<clr-dropdown class="dropdown bottom-left" *ngIf="!isIntegrationMode"> <clr-dropdown class="dropdown-lang dropdown bottom-left" *ngIf="!isIntegrationMode">
<button class="nav-icon nav-icon-width" clrDropdownToggle> <button class="nav-icon nav-icon-width" clrDropdownToggle>
<clr-icon shape="world" class="icon-left"></clr-icon> <clr-icon shape="world" class="icon-left"></clr-icon>
<span class="currentLang">{{currentLang}}</span> <span class="currentLang">{{currentLang}}</span>
@ -28,6 +28,7 @@
<a href="javascript:void(0)" clrDropdownItem (click)='switchLanguage("tr-tr")' [class.lang-selected]='matchLang("tr-tr")'>Türkçe</a> <a href="javascript:void(0)" clrDropdownItem (click)='switchLanguage("tr-tr")' [class.lang-selected]='matchLang("tr-tr")'>Türkçe</a>
</clr-dropdown-menu> </clr-dropdown-menu>
</clr-dropdown> </clr-dropdown>
<div class="nav-divider"></div>
<clr-dropdown class="dropdown" *ngIf="isSessionValid"> <clr-dropdown class="dropdown" *ngIf="isSessionValid">
<button class="nav-text" clrDropdownToggle> <button class="nav-text" clrDropdownToggle>
<clr-icon shape="user" class="is-inverse user-icon" size="24"></clr-icon> <clr-icon shape="user" class="is-inverse user-icon" size="24"></clr-icon>
@ -42,7 +43,6 @@
<a href="javascript:void(0)" clrDropdownItem (click)="logOut()">{{'ACCOUNT_SETTINGS.LOGOUT' | translate}}</a> <a href="javascript:void(0)" clrDropdownItem (click)="logOut()">{{'ACCOUNT_SETTINGS.LOGOUT' | translate}}</a>
</clr-dropdown-menu> </clr-dropdown-menu>
</clr-dropdown> </clr-dropdown>
<div class="nav-divider" *ngIf="!isSessionValid"></div>
<a href="javascript:void(0)" id="aboutMenu" class="nav-link nav-text nav-about-link" (click)="openAboutDialog()" *ngIf="!isSessionValid">{{'ACCOUNT_SETTINGS.ABOUT' | translate}}</a> <a href="javascript:void(0)" id="aboutMenu" class="nav-link nav-text nav-about-link" (click)="openAboutDialog()" *ngIf="!isSessionValid">{{'ACCOUNT_SETTINGS.ABOUT' | translate}}</a>
</div> </div>
</clr-header> </clr-header>

View File

@ -31,8 +31,10 @@
} }
.nav-about-link { .nav-about-link {
padding-left: 12px !important; padding-left: 1.6rem !important;
padding-right: 12px !important; padding-right: 1rem !important;
min-width: 125px;
text-align: left !important;
} }
.harbor-logo { .harbor-logo {
@ -47,7 +49,7 @@
left: -8px; left: -8px;
} }
.currentLang { .currentLang {
padding-right: 8px; padding-right: 30px;
} }
} }
@ -62,4 +64,7 @@
} }
.dropdown-item { .dropdown-item {
outline: none; outline: none;
}
.dropdown-lang {
padding-right: 1.3rem;
} }

View File

@ -38,7 +38,7 @@ import { SkinableConfig } from "../../skinable-config.service";
export class NavigatorComponent implements OnInit { export class NavigatorComponent implements OnInit {
// constructor(private router: Router){} // constructor(private router: Router){}
@Output() showAccountSettingsModal = new EventEmitter<ModalEvent>(); @Output() showAccountSettingsModal = new EventEmitter<ModalEvent>();
@Output() showPwdChangeModal = new EventEmitter<ModalEvent>(); @Output() showDialogModalAction = new EventEmitter<ModalEvent>();
selectedLang: string = enLang; selectedLang: string = enLang;
appTitle: string = 'APP_TITLE.HARBOR'; appTitle: string = 'APP_TITLE.HARBOR';
@ -132,7 +132,7 @@ export class NavigatorComponent implements OnInit {
// Open change password dialog // Open change password dialog
openChangePwdModal(): void { openChangePwdModal(): void {
this.showPwdChangeModal.emit({ this.showDialogModalAction.emit({
modalName: modalEvents.CHANGE_PWD, modalName: modalEvents.CHANGE_PWD,
modalFlag: true modalFlag: true
}); });
@ -140,7 +140,7 @@ export class NavigatorComponent implements OnInit {
// Open about dialog // Open about dialog
openAboutDialog(): void { openAboutDialog(): void {
this.showPwdChangeModal.emit({ this.showDialogModalAction.emit({
modalName: modalEvents.ABOUT, modalName: modalEvents.ABOUT,
modalFlag: true modalFlag: true
}); });

View File

@ -1,6 +1,6 @@
<clr-main-container> <clr-main-container>
<global-message [isAppLevel]="true"></global-message> <global-message [isAppLevel]="true"></global-message>
<navigator (showPwdChangeModal)="openModal($event)"></navigator> <navigator (showDialogModalAction)="openModal($event)"></navigator>
<search-result></search-result> <search-result></search-result>
<div class="login-wrapper" [ngStyle]="{'background-image': customLoginBgImg? 'url(/images/' + customLoginBgImg + ')': ''}"> <div class="login-wrapper" [ngStyle]="{'background-image': customLoginBgImg? 'url(/images/' + customLoginBgImg + ')': ''}">
<form #signInForm="ngForm" class="login"> <form #signInForm="ngForm" class="login">