Merge pull request #9971 from jwangyangls/modify-navgator

Modify the style of language and modify variable name

src/portal/src/app/base/harbor-shell/harbor-shell.component.html

@@ -1,6 +1,6 @@
 <clr-main-container>
     <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-area" [class.container-override]="showSearch"
              [class.content-area-override]="!shouldOverrideContent"

src/portal/src/app/base/navigator/navigator.component.html

@@ -13,7 +13,7 @@
     </div>
     <global-search></global-search>
     <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>
                 <clr-icon shape="world" class="icon-left"></clr-icon>
                 <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>
             </clr-dropdown-menu>
         </clr-dropdown>
+        <div class="nav-divider"></div>
         <clr-dropdown class="dropdown" *ngIf="isSessionValid">
             <button class="nav-text" clrDropdownToggle>
               <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>
             </clr-dropdown-menu>
         </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>
     </div>
 </clr-header>

src/portal/src/app/base/navigator/navigator.component.scss

@@ -31,8 +31,10 @@
 }
 
 .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 {
@@ -47,7 +49,7 @@
         left: -8px;
     }
     .currentLang {
-        padding-right: 8px;
+        padding-right: 30px;
     }
 }
 
@@ -62,4 +64,7 @@
 }
 .dropdown-item {
     outline: none;
+}
+.dropdown-lang {
+    padding-right: 1.3rem;
 }

src/portal/src/app/base/navigator/navigator.component.ts

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

src/portal/src/app/sign-in/sign-in.component.html

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