Skip to content

Commit f595474

Browse files
pbelkepbelke
authored
Merge pull request #357 from Consdata/IKC-354-sidebar
IKC-354 sidebar
2 parents b16d67b + 38cab6b commit f595474

39 files changed

+324
-137
lines changed

‎kouncil-frontend/apps/kouncil/src/app/access-denied/access-denied.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {ChangeDetectionStrategy, Component} from '@angular/core';
44
selector: 'app-access-denied',
55
template: `
66
<div class="access-denied-main">
7-
<mat-icon aria-hidden="false" class="lock-icon">lock</mat-icon>
7+
<mat-icon class="material-symbols-outlined lock-icon" aria-hidden="false">lock</mat-icon>
88
<span class="access-denied-title">Access denied.</span>
99
<span class="access-denied-text">You currently do not have access to this page.</span>
1010
</div>

‎kouncil-frontend/apps/kouncil/src/app/app.module.ts

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,10 @@ import {
1111
import {TopicComponent} from './topic/topic.component';
1212
import {RoutingModule} from './routing/routing.module';
1313
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
14-
import {NavbarComponent} from './navbar/navbar.component';
1514
import {BrokersComponent} from './brokers/brokers.component';
1615
import {ConsumerGroupsComponent} from './consumers/consumer-groups/consumer-groups.component';
1716
import {ConsumerGroupComponent} from './consumers/consumer-group/consumer-group.component';
18-
import {ToolbarComponent} from './topic/toolbar/toolbar.component';
17+
import {TopicToolbarComponent} from './topic/toolbar/topic-toolbar.component';
1918
import {ClipboardModule} from '@angular/cdk/clipboard';
2019
import {NgxJsonViewerModule} from 'ngx-json-viewer';
2120
import {TopicPartitionsComponent} from './topic/topic-partitions.component';
@@ -101,6 +100,9 @@ import {
101100
import {SurveyService} from './survey/survey.service';
102101
import {AuthBackendService, AuthDemoService, AuthService, CommonAuthModule} from '@app/common-auth';
103102
import {FeatTopicFormModule, TopicService} from '@app/feat-topic-form';
103+
import {SidebarComponent} from './sidebar/sidebar.component';
104+
import {ToolbarComponent} from './toolbar/toolbar.component';
105+
import {SidebarMenuItemComponent} from './sidebar/sidebar-menu-item/sidebar-menu-item.component';
104106

105107
export const BASE_URL = new InjectionToken('BASE_URL');
106108

@@ -146,10 +148,11 @@ export function authServiceFactory(http: HttpClient, baseUrl: string): AuthServi
146148
@NgModule({
147149
declarations: [
148150
AppComponent,
149-
NavbarComponent,
151+
ToolbarComponent,
152+
SidebarComponent,
150153
TopicComponent,
151154
ConsumerGroupsComponent,
152-
ToolbarComponent,
155+
TopicToolbarComponent,
153156
BrokersComponent,
154157
ConsumerGroupComponent,
155158
TopicPartitionsComponent,
@@ -173,7 +176,8 @@ export function authServiceFactory(http: HttpClient, baseUrl: string): AuthServi
173176
SchemaEditComponent,
174177
SchemaCreateComponent,
175178
SchemaDetailsComponent,
176-
SchemaFormComponent
179+
SchemaFormComponent,
180+
SidebarMenuItemComponent
177181
],
178182
imports: [
179183
BrowserModule,

‎kouncil-frontend/apps/kouncil/src/app/breadcrumb/breadcrumb.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
66
<div class="wrapper">
77
<div routerLink="{{parentLink}}" class="parent">{{parentName}}</div>
88
<div class="divider">
9-
<mat-icon class="arrow">arrow_forward_ios</mat-icon>
9+
<mat-icon class="material-symbols-outlined arrow">arrow_forward_ios</mat-icon>
1010
</div>
1111
<div class="name"><span [matTooltip]="name">{{name}}</span></div>
1212
</div>

‎kouncil-frontend/apps/kouncil/src/app/broker/broker.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {AbstractTableComponent, TableColumn} from '@app/common-components';
1111
<div class="drawer-header">
1212
<div class="drawer-title">Broker details</div>
1313
<div class="spacer"></div>
14-
<mat-icon mat-dialog-close class="close">close</mat-icon>
14+
<mat-icon mat-dialog-close class="material-symbols-outlined close">close</mat-icon>
1515
</div>
1616
1717
<div class="broker-details-table">

‎kouncil-frontend/apps/kouncil/src/app/consumers/consumer-groups/consumer-groups.component.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,13 @@ const CONSUMER_GROUP_FAVOURITE_KEY = 'kouncil-consumer-groups-favourites';
4545
[template]="cellTemplate">
4646
4747
<ng-template #cellTemplate let-element>
48-
<a class="datatable-cell-anchor" [routerLink]="['/consumer-groups/', element.groupId]">
49-
<mat-icon class="star-favourite" [class.gray]="element.group !== 'FAVOURITES'"
48+
<a class="datatable-cell-anchor"
49+
[routerLink]="['/consumer-groups/', element.groupId]">
50+
<mat-icon class="material-symbols-outlined star-favourite"
51+
[class.gray]="element.group !== 'FAVOURITES'"
5052
(click)="onFavouriteClick($event, element)">star
5153
</mat-icon>
52-
{{element.groupId}}
54+
{{ element.groupId }}
5355
</a>
5456
</ng-template>
5557
</app-common-table-column>

‎kouncil-frontend/apps/kouncil/src/app/demo/demo.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {ChangeDetectionStrategy, Component} from '@angular/core';
55
template: `
66
<div>
77
This is a demo version of Kouncil. Get the full version at&nbsp;<a href="https://kouncil.io" target="_blank">kouncil.io</a>
8-
<mat-icon aria-hidden="false">open_in_new</mat-icon>
8+
<mat-icon class="material-symbols-outlined" aria-hidden="false">open_in_new</mat-icon>
99
</div>
1010
`,
1111
changeDetection: ChangeDetectionStrategy.OnPush,

‎kouncil-frontend/apps/kouncil/src/app/login/login.component.scss

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1-
@import '../../../../../apps/kouncil/src/styles/palette';
1+
@import '../../styles/palette';
22

3-
.first-time-login {
4-
color: $main-60;
5-
font-size: 12px;
6-
float: left;
7-
margin-bottom: 20px;
8-
display: grid;
9-
width: 275px;
10-
animation: 1s slide-in;
3+
:host {
4+
width: 100%;
5+
6+
.first-time-login {
7+
color: $main-60;
8+
font-size: 12px;
9+
float: left;
10+
margin-bottom: 20px;
11+
display: grid;
12+
width: 275px;
13+
animation: 1s slide-in;
14+
}
1115
}

‎kouncil-frontend/apps/kouncil/src/app/main/main.component.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.sidebarOpened {
2+
width: calc(100% - 240px);
3+
overflow: auto;
4+
}
5+
6+
.sidebarClosed {
7+
width: calc(100% - 50px);
8+
overflow: auto;
9+
}

‎kouncil-frontend/apps/kouncil/src/app/main/main.component.ts

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,26 @@
11
import {ChangeDetectionStrategy, Component} from '@angular/core';
22
import {Backend} from '@app/common-model';
33
import {environment} from '../../environments/environment';
4+
import {SidebarService} from '../sidebar/sidebar.service';
45

56
@Component({
67
selector: 'app-main',
78
template: `
89
<app-demo *ngIf="backend === 'DEMO'"></app-demo>
9-
<app-kafka-navbar></app-kafka-navbar>
1010
11+
<app-kafka-navbar></app-kafka-navbar>
1112
<app-survey></app-survey>
1213
1314
<div [ngClass]="backend === 'SERVER' ? 'kafka-desktop' : 'kafka-desktop-demo'">
14-
<app-progress-bar></app-progress-bar>
15-
<router-outlet></router-outlet>
15+
16+
<app-sidebar></app-sidebar>
17+
18+
<div [ngClass]="(sidebarService.isOpened$ | async) ? 'sidebarOpened' : 'sidebarClosed'">
19+
<app-progress-bar></app-progress-bar>
20+
<router-outlet></router-outlet>
21+
</div>
1622
</div>
23+
1724
`,
1825
changeDetection: ChangeDetectionStrategy.OnPush,
1926
styleUrls: ['./main.component.scss']
@@ -22,6 +29,6 @@ export class MainComponent {
2229

2330
public backend: Backend = environment.backend;
2431

25-
constructor() {
32+
constructor(public sidebarService: SidebarService) {
2633
}
2734
}

‎kouncil-frontend/apps/kouncil/src/app/page-not-found/page-not-found.component.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ import {MatIconModule} from '@angular/material/icon';
77
selector: 'app-access-denied',
88
template: `
99
<div class="page-not-found-main">
10-
<mat-icon aria-hidden="false" class="page-not-found-icon">not_listed_location</mat-icon>
10+
<mat-icon aria-hidden="false" class="material-symbols-outlined page-not-found-icon">
11+
not_listed_location
12+
</mat-icon>
1113
<span class="page-not-found-title">Page not found.</span>
1214
<span class="page-not-found-text">Sorry, we can't find that page.</span>
1315
</div>

‎kouncil-frontend/apps/kouncil/src/app/schemas/form/form/schema-form.component.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.schema-form {
2-
margin: 50px 100px 0 100px;
2+
margin: 50px 50px 0 50px ;
33
}
44

55
.label {

‎kouncil-frontend/apps/kouncil/src/app/schemas/form/form/schema-form.component.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ import {FormControl, FormGroup, Validators} from '@angular/forms';
8080
<button *ngIf="getControl('compatibility').value && !isDisabled([ViewMode.VIEW])"
8181
mat-icon-button matSuffix type="button" class="clear-btn"
8282
(click)="$event.stopPropagation(); getControl('compatibility').patchValue(null)">
83-
<mat-icon class="clear-icon">close</mat-icon>
83+
<mat-icon class="material-symbols-outlined clear-icon">close</mat-icon>
8484
</button>
8585
8686
</mat-form-field>
@@ -95,11 +95,12 @@ import {FormControl, FormGroup, Validators} from '@angular/forms';
9595
</div>
9696
9797
<div class="actions">
98-
<button mat-button disableRipple class="action-button-white"
98+
<button mat-button [disableRipple]="true" class="action-button-white"
9999
[routerLink]="['/schemas']">
100100
Cancel
101101
</button>
102-
<button mat-button disableRipple *ngIf="isVisible([ViewMode.CREATE, ViewMode.EDIT])"
102+
<button mat-button [disableRipple]="true"
103+
*ngIf="isVisible([ViewMode.CREATE, ViewMode.EDIT])"
103104
class="action-button-black" type="submit"
104105
[disabled]="!schemaForm.valid">
105106
Save

‎kouncil-frontend/apps/kouncil/src/app/schemas/list/schemas.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import {AuthService, KouncilRole} from '@app/common-auth';
2727
2828
<button mat-button class="action-button-black" (click)="search()">
2929
Search
30-
<mat-icon class="search-icon">search</mat-icon>
30+
<mat-icon class="material-symbols-outlined search-icon">search</mat-icon>
3131
</button>
3232
3333
<button mat-button class="action-button-white" (click)="clearFilters()">

‎kouncil-frontend/apps/kouncil/src/app/sidebar/sidebar-menu-item/sidebar-menu-item.component.scss

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@use '../../../styles/inputs';
2+
@import '../../../styles/palette';
3+
4+
.menu-button {
5+
padding: 24px 8px 24px 16px ;
6+
text-decoration: none;
7+
color: $main-60;
8+
border-radius: 0;
9+
min-width: 32px;
10+
width: 100%;
11+
font-size: 12px;
12+
display: flex;
13+
place-items: center;
14+
justify-content: left;
15+
16+
&:focus {
17+
background: transparent;
18+
}
19+
20+
&.active {
21+
background: $blue-10;
22+
color: $blue-70;
23+
border-right: 2px solid $blue-70;
24+
25+
.mat-icon {
26+
color: $blue-70;
27+
}
28+
}
29+
}

‎kouncil-frontend/apps/kouncil/src/app/sidebar/sidebar-menu-item/sidebar-menu-item.component.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
2+
import {Observable} from 'rxjs';
3+
import {SidebarService} from '../sidebar.service';
4+
5+
@Component({
6+
selector: 'app-sidebar-menu-item',
7+
template: `
8+
<a class="menu-button" mat-button [disableRipple]="true"
9+
routerLinkActive="active" [routerLink]="[routeLink]"
10+
matTooltip="{{(currentState$ | async) ? '' : label}}" matTooltipPosition="after">
11+
12+
<mat-icon class="material-symbols-outlined">{{ icon }}</mat-icon>
13+
<span *ngIf="(currentState$ | async)">{{ label }}</span>
14+
</a>
15+
`,
16+
changeDetection: ChangeDetectionStrategy.OnPush,
17+
styleUrls: ['./sidebar-menu-item.component.scss']
18+
})
19+
export class SidebarMenuItemComponent {
20+
21+
@Input() routeLink: string;
22+
@Input() icon: string;
23+
@Input() label: string;
24+
25+
currentState$: Observable<boolean> = this.sidebarService.isOpened$;
26+
27+
constructor(private sidebarService: SidebarService) {
28+
}
29+
}

‎kouncil-frontend/apps/kouncil/src/app/sidebar/sidebar-state.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export enum SidebarState {
2+
3+
OPENED = 'opened',
4+
CLOSED = 'closed'
5+
6+
}

‎kouncil-frontend/apps/kouncil/src/app/sidebar/sidebar.component.scss

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
@use '../../styles/inputs';
2+
@import '../../styles/palette';
3+
4+
:host {
5+
height: 100%;
6+
7+
&.opened {
8+
width: 240px;
9+
}
10+
11+
&.closed {
12+
width: 50px;
13+
}
14+
15+
.sidenav {
16+
position: fixed;
17+
z-index: 1000;
18+
height: calc(100% - 72px);
19+
top: 72px;
20+
left: 0;
21+
background-color: $main-0;
22+
overflow-x: hidden;
23+
padding-top: 8px;
24+
25+
&.opened {
26+
width: 240px;
27+
}
28+
29+
&.closed {
30+
width: 50px;
31+
}
32+
33+
.grouping-menu-item {
34+
display: flex;
35+
border-radius: 0;
36+
min-width: 32px;
37+
color: $main-40;
38+
margin-top: 15px;
39+
padding: 8px 8px 8px 16px;
40+
width: 100%;
41+
}
42+
43+
}
44+
}

0 commit comments

Comments
 (0)