feat(console): split granted from owned project modules, general ui ux fixes (#286)

* add iam label, user avatar

* avatar component

* split granted and owned modules

* move components to resp module

* refactor project contributors, g project nav

* rem console logs, add avatar for org members

* fix changes loading, auth user page

* refactor home, i18n

* fix changes side overflow

* lint

console/src/app/modules/avatar/avatar.component.html

@@ -0,0 +1,4 @@
+<div class="avatar-circle dontcloseonclick"
+    [ngStyle]="{'height': size+'px', 'width': size+'px', 'fontSize': fontSize+'px'}" [ngClass]="{'active': active}">
+    {{credentials}}
+</div>

console/src/app/modules/avatar/avatar.component.scss

@@ -0,0 +1,15 @@
+:host {
+    display: block;
+}
+
+.avatar-circle {
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-transform: uppercase;
+
+    &.active:hover  {
+        border: 2px solid #81868a;
+    }
+}

console/src/app/modules/avatar/avatar.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AvatarComponent } from './avatar.component';
+
+describe('AvatarComponent', () => {
+    let component: AvatarComponent;
+    let fixture: ComponentFixture<AvatarComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [AvatarComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AvatarComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

console/src/app/modules/avatar/avatar.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-avatar',
+    templateUrl: './avatar.component.html',
+    styleUrls: ['./avatar.component.scss'],
+})
+export class AvatarComponent implements OnInit {
+    @Input() name: string = '';
+    @Input() credentials: string = '';
+    @Input() size: number = 24;
+    @Input() fontSize: number = 16;
+    @Input() active: boolean = false;
+    constructor() { }
+
+    ngOnInit(): void {
+        if (!this.credentials) {
+            const split: string[] = this.name.split(' ');
+            this.credentials = split[0].charAt(0) + (split[1] ? split[1].charAt(0) : '');
+        }
+
+        if (this.size > 50) {
+            this.fontSize = 32;
+        }
+    }
+}

console/src/app/modules/avatar/avatar.module.ts

@@ -0,0 +1,18 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { AvatarComponent } from './avatar.component';
+
+
+
+@NgModule({
+    declarations: [AvatarComponent],
+    imports: [
+        CommonModule,
+    ],
+    exports: [
+        AvatarComponent,
+    ],
+})
+export class AvatarModule { }
+