fix(header): change "create" button, add credentials avatar (#955)

* Upgrade to Angular 10.2 * primeng style fixes * update primeng styles * update primeng styles * update primeng styles * update primeng styles * update primeng styles * update primeng styles * update primeng styles * update primeng autocomplete * update primeng styles * update primeng styles * update primeng styles * update primeng styles * update primeng styles * update primeng styles * update primeng styles * update primeng styles * upgrade to Angular 11 * add import statement * Angular 11 upgrade - style fixes and Auto-complete API changes * Angular 11 upgrade - style fixes * Angular 11 upgrade - radio box in reactive form fix for issue primefaces/primeng#9631 * Angular 11 upgrade - style fix * Angular 11 upgrade - style fixs * Angular 11 RxJs fixes * Angular 11 RxJs fixes * Angular 11 RxJs fixes * Angular 11 RxJs fixes * Angular 11 RxJs fixes * Angular 11 RxJs fixes * Angular 11 RxJs fixes * Angular 11 fixes after master merge * update kaltura-ng libs * update clientlib * typo fix * fix(live stream): change universal live call to use new RxJS syntax (#945) * fix(entries/categories): endless load of Entitlements tab (use new RxJS syntax) (#946) * fix(playlists/details): switch to next/previous playlist (left/right arrows) (#949) * fix(settings/transcoding): table has wrong width on IE11 (#950) * typo fix * fix(entries/edit/flavors/): Match from Drop Folder error due to old RxJS syntax (use new RxJS syntax) (#947) * fix(categories): After selecting another Category all of them disappear on Move Category (#952) * fix(entry): IE-11 - Back arrow cut-off in all relevant pages KMCNG-2340 (#948) * fix(entries/edit): IE-11 - Back arrow cut-off in all relevant pages * fix(entry): back button is cut-off in IE11 * fix(entries/distribution): refresh button is cut off KMCNG-2320 (#951) * fix(entries/distribution): refresh button is cut off * fix(entry/distribution): IE11 - refresh button is cut off * fix: angular.json * fix(theme): change controls color to primary, change analytics logo, change header gradient KMCNG-2370 (#953) * fix(theme): change controls color to primary, change analytics logo, change header gradient * fix: link colors, logo for dpi 1 * fix(theme): style and RxJS fixes for Angular 11 (#954) * fix(header): change "create" button, add credentials avatar * fix: add checking to appUser * fix: user dropdown position, long user name * fix layout * load partner status Co-authored-by: amirch1 <[email protected]>
kaltura · Oct 28, 2021 · 2fc9b62 · 2fc9b62
1 parent 332ebaa
commit 2fc9b62
Show file tree

Hide file tree

Showing 12 changed files with 109 additions and 54 deletions.
diff --git a/src/applications/kmc-upload-app/upload-button/upload-button.component.html b/src/applications/kmc-upload-app/upload-button/upload-button.component.html
@@ -1,6 +1,8 @@
 <button pButton [disabled]="_disabled"
-        label="{{'app.titles.create' | translate | uppercase}}"
-        class="kButtonDefault kUploadBtn"
+        label="{{'app.titles.create' | translate}}"
+        class="kUploadBtn"
+        icon="kIconplus"
+        iconPos="left"
         (click)="uploadmenu.open()"></button>
 
 <kPopupWidget #uploadmenu data-aid="uploadmenu" [popupWidth]="360" [popupHeight]="385" [closeBtn]="true"

diff --git a/src/applications/kmc-upload-app/upload-button/upload-button.component.scss b/src/applications/kmc-upload-app/upload-button/upload-button.component.scss
@@ -2,22 +2,22 @@
 
 .kUploadBtn {
   height: 34px;
-  font-size: 12px;
+  font-size: 14px;
   letter-spacing: 0.1em;
   font-weight: 700;
-  color: $kGrayscale1;
   margin-right: 12px;
-  padding-left: 6px;
-  padding-right: 6px;
-  border: none !important;
+  background: transparent;
+  color: #fff;
+  border: 1px solid #fff;
   &:disabled{
       color: $kGrayscale4;
       background: transparent;
       border: 1px solid $kGrayscale4 !important;
       cursor: none;
   }
-    ::ng-deep   .p-button-label {
-        padding: .25em 1em;
+
+    ::ng-deep .p-button-icon {
+        font-size: 20px;
     }
 }
 
diff --git a/src/kmc-app/components/app-menu/app-menu.component.html b/src/kmc-app/components/app-menu/app-menu.component.html
@@ -21,20 +21,21 @@
                             {{item.menuTitle | uppercase}}
                     </a>
                 </div>
+
+                <kUploadButton></kUploadButton>
             </div>
 
             <div class="kMenu-right">
                 <k-logs-record mode="button"
                                *ngIf="(_kmcLogs.logsRecordMode | async).enabled"
                                [logLevel]="(_kmcLogs.logsRecordMode | async).logLevel"></k-logs-record>
-                <kUploadButton></kUploadButton>
                 <kUploadMonitor [appmenu]="appmenu"></kUploadMonitor>
 
                 <i *ngFor="let item of rightMenuConfig" (click)="item.open()" [ngClass]="item.icon" [class.open]="item === selectedMenuItem" [kTooltip]="item.menuTitle" [placement]="'bottom'"></i>
 
                 <i #help class="kIconhelp" [class.has-notification]="_showChangelog" [class.open]="_helpMenuOpened"></i>
                 <div #username class="kUserName">
-                    <span>{{_userAuthentication.appUser?.fullName}}</span>
+                    <div class="kUserInitials">{{userInitials}}</div>
                     <i class="kIcondropdown_arrow_bottom"></i>
                 </div>
             </div>
@@ -59,13 +60,13 @@
               [popupWidth]="240"
               [closeBtn]="false"
               [targetRef]="username"
-              [targetOffset]="{'x': 8, 'y': 30}"
+              [targetOffset]="{'x': 8, 'y': 37}"
               (onOpen)="username.className='kUserName open'"
               (onClose)="username.className='kUserName'">
     <kKMCUserSettings [parentPopup]="usersettings"></kKMCUserSettings>
 </kPopupWidget>
 
-<kPopupWidget #helpmenu data-aid="helpmenu" [appendTo]="appmenu" [popupWidth]="240" [closeBtn]="false" [targetRef]="help" [targetOffset]="{'x':-109, 'y': 35}" (onOpen)="_helpMenuOpened = true" (onClose)="_helpMenuOpened = false">
+<kPopupWidget #helpmenu data-aid="helpmenu" [appendTo]="appmenu" [popupWidth]="240" [closeBtn]="false" [targetRef]="help" [targetOffset]="{'x':-140, 'y': 35}" (onOpen)="_helpMenuOpened = true" (onClose)="_helpMenuOpened = false">
     <ng-template>
         <div class="kHelpMenu">
             <!--p *ngIf="_kmcOverviewLinkExists || _mediaManagementLinkExists" class="kHelpTitle">{{'app.helpMenu.gettingStarted' | translate | uppercase}}</p>

diff --git a/src/kmc-app/components/app-menu/app-menu.component.scss b/src/kmc-app/components/app-menu/app-menu.component.scss
@@ -103,25 +103,28 @@
     .kUserName {
         display: flex;
         align-items: center;
-        opacity: 0.6;
-        color: $headerTextColor;
+        color: #fff;
         cursor: pointer;
         font-weight: 400;
         margin-left: 12px;
         font-size: 14px;
-        &:hover, &.open {
-            opacity: 1;
-            color: $mainLinkHoverColor;
-            i {
-                color: $mainLinkHoverColor;
-                opacity: 1;
-            }
-        }
         i {
             font-size: 10px;
             margin-left: 6px;
             margin-top: 2px;
         }
+
+        .kUserInitials {
+            height: 34px;
+            width: 34px;
+            background: rgba(255,255,255,0.2);
+            border-radius: 50%;
+            color: #fff;
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
     }
     .kLogo {
         color: white;

diff --git a/src/kmc-app/components/app-menu/app-menu.component.ts b/src/kmc-app/components/app-menu/app-menu.component.ts
@@ -21,11 +21,11 @@ import {ResetMenuEvent, UpdateMenuEvent} from 'app-shared/kmc-shared/events';
     ]
 
 })
-export class AppMenuComponent implements OnInit, OnDestroy{
+export class AppMenuComponent implements OnInit, OnDestroy {
 
-    @ViewChild('helpmenu', { static: true }) private _helpmenu: PopupWidgetComponent;
-    @ViewChild('supportPopup', { static: true }) private _supportPopup: PopupWidgetComponent;
-    @ViewChild('leftMenu', { static: true }) private leftMenu: ElementRef;
+    @ViewChild('helpmenu', {static: true}) private _helpmenu: PopupWidgetComponent;
+    @ViewChild('supportPopup', {static: true}) private _supportPopup: PopupWidgetComponent;
+    @ViewChild('leftMenu', {static: true}) private leftMenu: ElementRef;
     private _appCachedVersionToken = 'kmc-cached-app-version';
 
     public _showChangelog = false;
@@ -46,8 +46,9 @@ export class AppMenuComponent implements OnInit, OnDestroy{
     selectedMenuItem: KMCAppMenuItem;
     showSubMenu = true;
 
-    public _customerCareLink = this._supportLinkExists ? serverConfig.externalLinks.kaltura.customerCare : "";
-    public _customerPortalLink = this._supportLinkExists ? serverConfig.externalLinks.kaltura.customerPortal : "";
+    public _customerCareLink = this._supportLinkExists ? serverConfig.externalLinks.kaltura.customerCare : '';
+    public _customerPortalLink = this._supportLinkExists ? serverConfig.externalLinks.kaltura.customerPortal : '';
+    public userInitials: string;
 
     constructor(public _kmcLogs: KmcLoggerConfigurator,
                 private _contextualHelpService: ContextualHelpService,
@@ -85,9 +86,12 @@ export class AppMenuComponent implements OnInit, OnDestroy{
         }
 
         this._powerUser = this._browserService.getInitialQueryParam('mode') === 'poweruser';
+        if (this._userAuthentication.appUser?.fullName) {
+            this.userInitials = this._userAuthentication.appUser.fullName.toUpperCase().split(' ').slice(0, 2).map(s => s[0]).join('');
+        }
     }
 
-    ngOnInit(){
+    ngOnInit() {
         const cachedVersion = this._browserService.getFromLocalStorage(this._appCachedVersionToken);
         this._showChangelog = cachedVersion !== globalConfig.client.appVersion;
         this._appEvents.event(UpdateMenuEvent)
@@ -109,22 +113,22 @@ export class AppMenuComponent implements OnInit, OnDestroy{
 
     }
 
-    private replaceMenu(menuID: string,  menu: KMCAppMenuItem[]): void{
+    private replaceMenu(menuID: string, menu: KMCAppMenuItem[]): void {
         this.renderer.setStyle(this.leftMenu.nativeElement, 'opacity', 0);
         this.renderer.setStyle(this.leftMenu.nativeElement, 'marginLeft', '100px');
-        setTimeout( ()=> {
+        setTimeout(() => {
             this.leftMenuConfig = menu;
             this.renderer.setStyle(this.leftMenu.nativeElement, 'opacity', 1);
             this.renderer.setStyle(this.leftMenu.nativeElement, 'marginLeft', '0px');
             this.setSelectedRoute(this.router.routerState.snapshot.url);
             this.menuID = menuID;
-        },300);
+        }, 300);
     }
 
     setSelectedRoute(path) {
         if (this.menuConfig) {
             this.selectedMenuItem = this.leftMenuConfig.find(item => item.isActiveView(path));
-            if (!this.selectedMenuItem){
+            if (!this.selectedMenuItem) {
                 this.selectedMenuItem = this.rightMenuConfig.find(item => item.isActiveView(path));
             }
             this.showSubMenu = this.selectedMenuItem && this.selectedMenuItem.children && this.selectedMenuItem.children.length > 0;
@@ -136,7 +140,7 @@ export class AppMenuComponent implements OnInit, OnDestroy{
 
     openHelpLink(key) {
         let link = '';
-        switch (key){
+        switch (key) {
             case 'manual':
                 link = serverConfig.externalLinks.kaltura.userManual;
                 break;

diff --git a/src/kmc-app/components/changelog/changelog.component.html b/src/kmc-app/components/changelog/changelog.component.html
@@ -7,7 +7,7 @@
   <ng-template>
     <div class="kChangelogPopup">
       <div class="kChangelogHeader">
-        <h1>{{ 'app.changelog.header' | translate }}</h1>
+        <h1 (dblclick)="_error()">{{ 'app.changelog.header' | translate }}</h1>
       </div>
       <div class="kChangelogContent">
         <kChangelogContent></kChangelogContent>

diff --git a/src/kmc-app/components/changelog/changelog.component.ts b/src/kmc-app/components/changelog/changelog.component.ts
@@ -1,18 +1,26 @@
 import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { PopupWidgetComponent } from '@kaltura-ng/kaltura-ui';
+import { BrowserService } from "app-shared/kmc-shell";
 
 @Component({
   selector: 'kChangelog',
   templateUrl: './changelog.component.html',
   styleUrls: ['./changelog.component.scss']
 })
 export class ChangelogComponent {
-    @Input() changelogIsShown = false;
+  @Input() changelogIsShown = false;
   @Output() showChangelog = new EventEmitter<void>();
   @ViewChild('changelog', { static: true }) changelogPopup: PopupWidgetComponent;
 
+  constructor(private _browserService: BrowserService,) {
+  }
+
   public _openChangelog(): void {
     this.showChangelog.emit();
     this.changelogPopup.open();
   }
+
+  public _error(): void {
+      this._browserService.navigateToError();
+  }
 }
diff --git a/src/kmc-app/components/user-settings/user-settings.component.html b/src/kmc-app/components/user-settings/user-settings.component.html
@@ -1,21 +1,14 @@
 <div class="kUserSettings">
     <ul>
-        <!--li class="kMenuItemLabel"><span class="kIcon kIconuser_small"></span>
-            <div class="kMenuItem">
-                <div>{{_userAuthentication.appUser?.fullName}}</div>
-            </div>
-        </li-->
-        <li class="kMenuItemLabel"><span (dblclick)="egg()" class="kIcon kIconhouse"></span>
-            <div class="kMenuItem">
-                <div>{{_userAuthentication.appUser?.partnerInfo?.name}}</div>
+        <li class="kMenuItemLabel">
+            <div class="kUserInitials">{{userInitials}}</div>
+            <div class="kMenuItem partner-info">
+                <p *ngFor="let info of partnerInfo">{{info}}</p>
             </div>
         </li>
     </ul>
 
     <hr>
-    <!--div class="kMenuItemLabel">
-        <span>{{'app.languageMenu.selectLang' | translate}}</span>
-    </div-->
 
     <ul class="kLanguages kOverrideFAIcons">
         <p-dropdown [options]="_languages" [(ngModel)]="_selectedLanguage" [scrollHeight]="300"
@@ -28,12 +21,14 @@
     </ul>
 
     <hr>
+
     <div class="kLinks">
         <a (click)="changeAccountPopup.open();parentPopup.close()">{{'app.userSettings.changeAccount' | translate}}</a>
         <a (click)="logout()">{{'app.userSettings.logout' | translate}}</a>
     </div>
 
 </div>
+
 <kPopupWidget #changeAccountPopup data-aid="changeAccountPopup" [popupWidth]="500" [popupHeight]="370" [modal]="true">
     <ng-template>
         <kChangeAccount></kChangeAccount>

diff --git a/src/kmc-app/components/user-settings/user-settings.component.scss b/src/kmc-app/components/user-settings/user-settings.component.scss
@@ -47,6 +47,8 @@ hr{
 .kMenuItemLabel {
     font-size: 15px;
     color: $kGrayscale1;
+    display: flex;
+    align-items: center;
 }
 
 .kMenuItem {
@@ -69,3 +71,36 @@ hr{
     min-width: 208px;
     width: 208px !important;
 }
+
+.kUserInitials {
+    height: 34px;
+    width: 34px;
+    min-width: 34px;
+    background: $kGrayscale6;
+    border-radius: 50%;
+    color: $kGrayscale1;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.partner-info {
+    display: flex;
+    flex-direction: column;
+    font-weight: 700;
+    margin-top: 0px;
+    margin-left: 16px;
+    word-break: break-word;
+    p {
+        margin: 3px 0px;
+
+        &:first-child {
+            color: $kGrayscale1;
+        }
+
+        &:last-child {
+            color: #888888;
+        }
+    }
+}
diff --git a/src/kmc-app/components/user-settings/user-settings.component.ts b/src/kmc-app/components/user-settings/user-settings.component.ts
@@ -3,7 +3,6 @@ import {BrowserService} from 'app-shared/kmc-shell';
 import {AppAuthentication, AppUser} from 'app-shared/kmc-shell';
 import { kmcAppConfig } from '../../kmc-app-config';
 import {PopupWidgetComponent} from '@kaltura-ng/kaltura-ui';
-import { Router } from '@angular/router';
 
 @Component({
   selector: 'kKMCUserSettings',
@@ -19,8 +18,10 @@ export class UserSettingsComponent {
   ];
   public _selectedLanguage = 'en';
   public _selectedDateFormat = this.browserService.getFromLocalStorage('kmc_date_format') || 'month-day-year';
+  public userInitials: string;
+  public partnerInfo: string[];
 
-  constructor(public _userAuthentication: AppAuthentication, private browserService: BrowserService, private _router: Router) {
+  constructor(public _userAuthentication: AppAuthentication, private browserService: BrowserService) {
       kmcAppConfig.locales.forEach(locale => {
       this._languages.push({label: locale.label, value: locale.id});
     });
@@ -34,6 +35,13 @@ export class UserSettingsComponent {
         this._selectedLanguage = lang.value;
       }
     }
+
+    if (this._userAuthentication.appUser?.fullName) {
+        this.userInitials = this._userAuthentication.appUser.fullName.toUpperCase().split(' ').slice(0, 2).map(s => s[0]).join('');
+    }
+    if (this._userAuthentication.appUser?.partnerInfo?.name) {
+        this.partnerInfo = this._userAuthentication.appUser.partnerInfo.name.split('-').slice(0, 2);
+    }
   }
 
   logout() {
@@ -50,8 +58,4 @@ export class UserSettingsComponent {
       this._userAuthentication.reload();
   }
 
-    egg(){
-        this._router.navigateByUrl(kmcAppConfig.routing.errorRoute, { replaceUrl: true });
-    }
-
 }
diff --git a/src/shared/kmc-shell/auth/app-authentication.service.ts b/src/shared/kmc-shell/auth/app-authentication.service.ts
@@ -331,6 +331,7 @@ export class AppAuthentication {
             partnerInfo: {
                 partnerId: user.partnerId,
                 name: partner.name,
+                status: partner.status,
                 adminSecret: partner.adminSecret,
                 partnerPackage: partner.partnerPackage,
                 landingPage: partner.landingPage,

diff --git a/src/shared/kmc-shell/auth/app-user.ts b/src/shared/kmc-shell/auth/app-user.ts
@@ -1,8 +1,10 @@
 import { KalturaPartnerAuthenticationType } from "kaltura-ngx-client";
+import {KalturaPartnerStatus} from "kaltura-ngx-client/lib/api/types/KalturaPartnerStatus";
 
 export interface PartnerInfo {
     partnerId: number;
     name: string;
+    status: KalturaPartnerStatus,
     adminSecret: string;
     partnerPackage: PartnerPackageTypes;
     landingPage: string;