diff --git a/src/app/components/avatar.component.ts b/src/app/components/avatar.component.ts
index bd294db407..91105b17da 100644
--- a/src/app/components/avatar.component.ts
+++ b/src/app/components/avatar.component.ts
@@ -8,7 +8,8 @@ import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-avatar',
- template: '',
+ template: '',
})
export class AvatarComponent implements OnChanges, OnInit {
@Input() data: string;
@@ -19,6 +20,7 @@ export class AvatarComponent implements OnChanges, OnInit {
@Input() fontSize = 20;
@Input() fontWeight = 300;
@Input() dynamic = false;
+ @Input() circle = false;
src: string;
diff --git a/src/app/layouts/organization-layout.component.html b/src/app/layouts/organization-layout.component.html
index 28dca81162..ce20ebef9c 100644
--- a/src/app/layouts/organization-layout.component.html
+++ b/src/app/layouts/organization-layout.component.html
@@ -1,3 +1,25 @@
+
+
+
+
+
{{organization.name}}
+
+
+
+
diff --git a/src/app/layouts/organization-layout.component.ts b/src/app/layouts/organization-layout.component.ts
index df0e885707..f4be50fea8 100644
--- a/src/app/layouts/organization-layout.component.ts
+++ b/src/app/layouts/organization-layout.component.ts
@@ -1,9 +1,32 @@
import {
Component,
+ OnInit,
} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { Organization } from 'jslib/models/domain/organization';
@Component({
selector: 'app-organization-layout',
templateUrl: 'organization-layout.component.html',
})
-export class OrganizationLayoutComponent { }
+export class OrganizationLayoutComponent implements OnInit {
+ organization: Organization;
+
+ private organizationId: string;
+
+ constructor(private route: ActivatedRoute, private userService: UserService) { }
+
+ ngOnInit() {
+ this.route.params.subscribe(async (params) => {
+ this.organizationId = params.organizationId;
+ await this.load();
+ });
+ }
+
+ async load() {
+ this.organization = await this.userService.getOrganization(this.organizationId);
+ }
+}
diff --git a/src/app/organizations/vault.component.ts b/src/app/organizations/vault.component.ts
index d02243bf59..c5dd14d23a 100644
--- a/src/app/organizations/vault.component.ts
+++ b/src/app/organizations/vault.component.ts
@@ -1,11 +1,19 @@
import {
- Component
+ Component,
+ OnInit,
} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-org-vault',
templateUrl: 'vault.component.html',
})
-export class VaultComponent {
+export class VaultComponent implements OnInit {
+ constructor(private route: ActivatedRoute) { }
+ ngOnInit() {
+ this.route.parent.params.subscribe(async (params) => {
+
+ });
+ }
}
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index bc9418d15b..f332e649f0 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -571,3 +571,41 @@ app-user-billing {
.form-check-block + .form-check-block {
@extend .mt-3;
}
+
+.orgnav {
+ background-color: $input-bg;
+ border-bottom: 1px solid $border-color;
+ height: 100px;
+ min-height: 100px;
+
+ .container {
+ height: 100%;
+ }
+
+ .nav-tabs {
+ border-bottom: none;
+
+ a {
+ color: $body-color;
+
+ &:hover:not(.active) {
+ border-color: transparent;
+ }
+
+ &.active {
+ border-top: 3px solid theme-color("primary");
+ font-weight: bold;
+ padding-top: calc(#{$nav-link-padding-y} - 2px);
+ }
+
+ &.disabled {
+ color: $input-placeholder-color;
+ }
+ }
+ }
+
+ span {
+ font-size: $font-size-lg;
+ @extend .ml-3;
+ }
+}