Skip to content

Commit 5f036c7

Browse files
eksrhaeksrha
authored
add ability to resize frame (#67)
1 parent dac3e25 commit 5f036c7

File tree

11 files changed

+91
-116
lines changed

11 files changed

+91
-116
lines changed

‎projects/lib-workspace/src/app/app.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<fs-nav-frame [navFrameConfig]="navFrameConfig" [navRoutes]="navRoutes">
1+
<fs-nav-frame [navFrameConfig]="navFrameConfig" [sizing]="sizing">
22
<fs-nav-frame-toolbar>
33
<fs-nav-frame-toolbar-start>Current App Title</fs-nav-frame-toolbar-start>
44

‎projects/lib-workspace/src/app/app.component.ts‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { registerLocaleData } from '@angular/common';
22
import localeDe from '@angular/common/locales/de';
33
import localeDeExtra from '@angular/common/locales/extra/de';
44
import { Component, OnInit } from '@angular/core';
5-
import { NavFrameConfig, NavRoutes } from 'projects/ng-mat-components/src/public-api';
5+
import { NavFrameConfig, NavFrameSizing, NavRoutes } from 'projects/ng-mat-components/src/public-api';
66

77
@Component({
88
selector: 'app-root',
@@ -11,6 +11,18 @@ import { NavFrameConfig, NavRoutes } from 'projects/ng-mat-components/src/public
1111
})
1212
export class AppComponent implements OnInit {
1313
title = 'FS DevOps`s ng mat components';
14+
15+
navFrameConfig: NavFrameConfig = {
16+
appName: 'Demo App',
17+
appVersion: '0.0.0',
18+
// logoSrc: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1024px-Angular_full_color_logo.svg.png',
19+
};
20+
sizing: NavFrameSizing = {
21+
toolbarHeight: 3,
22+
sidebarWidthClosed: 4,
23+
sidebarWidthOpened: 18,
24+
};
25+
1426
navRoutes: NavRoutes = [
1527
{
1628
title: 'Home',
@@ -67,12 +79,6 @@ export class AppComponent implements OnInit {
6779
},
6880
];
6981

70-
navFrameConfig: NavFrameConfig = {
71-
appName: 'Demo App',
72-
appVersion: '0.0.0',
73-
// logoSrc: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1024px-Angular_full_color_logo.svg.png',
74-
};
75-
7682
constructor() {}
7783

7884
ngOnInit() {

‎projects/ng-mat-components/src/fs-nav-frame/_variables.scss‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎projects/ng-mat-components/src/fs-nav-frame/components/fs-nav-frame-sidebar-item/fs-nav-frame-sidebar-item.component.scss‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
fs-nav-frame-sidebar-item {
2-
height: 4rem;
2+
height: var(--sidebar-width-closed);
33
display: block;
44
}
55

66
fs-nav-frame-sidebar-item button {
7-
width: 100%;
8-
height: 4rem !important;
97
display: inline-block !important;
8+
width: 100%;
9+
height: var(--sidebar-width-closed) !important;
10+
min-width: var(--sidebar-width-closed) !important;
1011

1112
.mdc-button__label {
1213
display: inline-flex;
@@ -15,10 +16,10 @@ fs-nav-frame-sidebar-item button {
1516
width: 100%;
1617
overflow: hidden;
1718
text-overflow: ellipsis;
18-
height: 4rem !important;
19+
height: var(--sidebar-width-closed) !important;
1920

2021
> i {
21-
margin-left: 12px;
22+
width: calc(var(--sidebar-width-closed) - 16px);
2223
}
2324

2425
> span {
@@ -29,9 +30,13 @@ fs-nav-frame-sidebar-item button {
2930
}
3031
}
3132

32-
.sidebar.opened > fs-nav-frame-sidebar > fs-nav-frame-sidebar-item button .mdc-button__label > span {
33-
display: block;
33+
.sidebar.opened > fs-nav-frame-sidebar > fs-nav-frame-sidebar-item button .mdc-button__label {
34+
> span {
35+
display: block;
36+
}
3437
}
35-
.sidebar:not(.opened) > fs-nav-frame-sidebar > fs-nav-frame-sidebar-item button .mdc-button__label > span {
36-
display: none;
38+
.sidebar:not(.opened) > fs-nav-frame-sidebar > fs-nav-frame-sidebar-item button .mdc-button__label {
39+
> span {
40+
display: none;
41+
}
3742
}

‎projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.scss‎

Lines changed: 17 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
1-
@use './_variables' as *;
2-
31
// logo
42
.fs-nav-frame-logo {
53
position: fixed;
64
z-index: 2;
75
top: 0;
86
left: 0;
9-
width: $sidebar-width-closed;
10-
height: $toolbar-height;
7+
width: var(--sidebar-width-closed);
8+
height: var(--toolbar-height);
119
transition: all 0.3s ease-in-out;
1210
display: grid;
13-
grid-template-columns: $sidebar-width-closed 1fr;
11+
grid-template-columns: var(--sidebar-width-closed) 1fr;
1412

1513
.logo-wrapper {
16-
width: $sidebar-width-closed;
17-
height: $toolbar-height;
14+
width: var(--sidebar-width-closed);
15+
height: var(--toolbar-height);
1816
display: flex;
1917
justify-content: center;
2018
align-items: center;
@@ -30,7 +28,7 @@
3028

3129
.app-info-wrapper {
3230
position: relative;
33-
height: $toolbar-height;
31+
height: var(--toolbar-height);
3432
display: none;
3533
align-items: center;
3634
justify-content: space-between;
@@ -56,34 +54,33 @@
5654
position: fixed;
5755
z-index: 2;
5856
top: 0;
59-
left: $sidebar-width-closed;
57+
left: var(--sidebar-width-closed);
6058
transition: all 0.3s ease-in-out;
6159
right: 0;
62-
height: $toolbar-height;
60+
height: var(--toolbar-height);
6361
}
6462

6563
::ng-deep .fs-nav-frame-content.opened,
6664
::ng-deep .fs-nav-frame-toolbar.opened {
67-
left: $sidebar-width-opened;
65+
left: var(--sidebar-width-opened);
6866
}
6967

7068
.sidebar.opened,
7169
.fs-nav-frame-logo.opened {
72-
width: $sidebar-width-opened;
70+
width: var(--sidebar-width-opened);
7371
}
7472

7573
.sidebar {
7674
position: fixed;
7775
z-index: 2;
78-
top: $toolbar-height;
76+
top: var(--toolbar-height);
7977
left: 0;
8078
bottom: 0;
81-
width: $sidebar-width-closed;
79+
width: var(--sidebar-width-closed);
8280
transition: all 0.3s ease-in-out;
8381

8482
display: grid;
85-
// grid-template-rows: 3rem 1fr 4rem;
86-
grid-template-rows: 1fr 4rem;
83+
grid-template-rows: 1fr var(--sidebar-width-closed);
8784
}
8885

8986
ul {
@@ -92,61 +89,10 @@ ul {
9289
text-decoration: none;
9390
}
9491

95-
.sidebar .nav-links {
96-
overflow-x: hidden;
97-
overflow-y: auto;
98-
margin: 0;
99-
padding: 0;
100-
101-
> li {
102-
position: relative;
103-
display: inline-grid;
104-
grid-template-columns: 1fr 3rem;
105-
align-items: center;
106-
width: 100%;
107-
108-
> button:nth-child(1) {
109-
width: 100%;
110-
height: $sidebar-width-closed;
111-
display: inline-flex;
112-
justify-content: flex-start;
113-
align-items: center;
114-
115-
::ng-deep span:nth-child(1) {
116-
max-width: 100%;
117-
overflow: hidden;
118-
text-overflow: ellipsis;
119-
}
120-
121-
.link-name {
122-
margin-left: 1rem;
123-
white-space: nowrap;
124-
text-overflow: ellipsis;
125-
}
126-
}
127-
128-
button:nth-child(2) {
129-
height: 3rem;
130-
width: 3rem;
131-
}
132-
133-
.nav-links-l2 {
134-
li {
135-
button {
136-
width: 100%;
137-
display: inline-flex;
138-
justify-content: flex-start;
139-
align-items: center;
140-
}
141-
}
142-
}
143-
}
144-
}
145-
14692
::ng-deep .fs-nav-frame-content {
14793
position: fixed;
148-
top: $toolbar-height;
149-
left: $sidebar-width-closed;
94+
top: var(--toolbar-height);
95+
left: var(--sidebar-width-closed);
15096
right: 0;
15197
bottom: 0;
15298
padding: 1rem;
@@ -157,8 +103,8 @@ ul {
157103

158104
.glassplane.opened {
159105
position: absolute;
160-
top: $toolbar-height;
161-
left: $sidebar-width-closed;
106+
top: var(--toolbar-height);
107+
left: var(--sidebar-width-closed);
162108
transition: all 0.3s ease-in-out;
163109
right: 0;
164110
bottom: 0;

‎projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.component.ts‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { Component, ContentChild, ElementRef, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core';
1+
import { Component, ContentChild, ElementRef, HostBinding, Input, OnDestroy, OnInit, TemplateRef } from '@angular/core';
22
import { Title } from '@angular/platform-browser';
33
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
44
import { filter, map } from 'rxjs';
5-
import { NavFrameConfig, NavRoutes } from './fs-nav-frame.modules';
5+
import { NavFrameConfig, NavFrameSizing } from './fs-nav-frame.modules';
66
import { FsNavFrameService, MenuState } from './services/fs-nav-frame.service';
77

88
@Component({
@@ -14,19 +14,27 @@ import { FsNavFrameService, MenuState } from './services/fs-nav-frame.service';
1414
},
1515
})
1616
export class FsNavFrameComponent implements OnInit, OnDestroy {
17-
@Input() navRoutes: NavRoutes = [];
1817
@Input() navFrameConfig: NavFrameConfig = {
19-
appName: 'Demo App',
18+
appName: '',
19+
};
20+
@Input() sizing: NavFrameSizing = {
21+
toolbarHeight: 3,
22+
sidebarWidthClosed: 4,
23+
sidebarWidthOpened: 18,
2024
};
21-
2225
@ContentChild('navLinks') navLinks: TemplateRef<any> | undefined;
2326

27+
body = document.querySelector('body');
2428
profileContentElement!: HTMLElement | null;
2529
isClosed: boolean = true;
2630

2731
constructor(private elementRef: ElementRef, private frameService: FsNavFrameService, private titleService: Title) {}
2832

2933
ngOnInit(): void {
34+
this.body!.style.setProperty('--toolbar-height', `${this.sizing.toolbarHeight!}rem`);
35+
this.body!.style.setProperty('--sidebar-width-closed', `${this.sizing.sidebarWidthClosed!}rem`);
36+
this.body!.style.setProperty('--sidebar-width-opened', `${this.sizing.sidebarWidthOpened!}rem`);
37+
3038
this.frameService.menuStateEvent.subscribe((state: MenuState) => {
3139
if (state == MenuState.OPENED) {
3240
this.frameService.menuState = MenuState.OPENED;

‎projects/ng-mat-components/src/fs-nav-frame/fs-nav-frame.modules.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,16 @@
66
* @logoSrc {string} (optional) link to logo, can be relative or full URL
77
*/
88
export interface NavFrameConfig {
9-
appName: string;
9+
appName?: string;
1010
appVersion?: string;
1111
logoSrc?: string;
12+
sizing?: NavFrameSizing;
13+
}
14+
15+
export interface NavFrameSizing {
16+
toolbarHeight?: number; // in rem
17+
sidebarWidthClosed?: number; // in rem
18+
sidebarWidthOpened?: number; // in rem
1219
}
1320

1421
export interface NavItem {

‎projects/ng-mat-components/src/fs-nav-frame/fs-nav-user-profile/fs-nav-user-profile.component.scss‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
fs-nav-user-profile {
22
position: relative;
3-
height: 4rem;
3+
height: var(--sidebar-width-closed);
44
display: grid;
5-
grid-template-columns: 4rem 1fr;
5+
grid-template-columns: var(--sidebar-width-closed) 1fr;
66
}
77

88
.profile-pic-button-wrapper {
9-
width: 4rem;
10-
height: 4rem;
9+
width: var(--sidebar-width-closed);
10+
height: var(--sidebar-width-closed);
1111
display: flex;
1212
justify-content: center;
1313
align-items: center;
1414

1515
button {
16-
width: 3rem !important;
17-
height: 3rem !important;
18-
font-size: 3rem;
16+
width: var(--sidebar-width-closed) !important;
17+
height: var(--sidebar-width-closed) !important;
18+
font-size: calc(var(--sidebar-width-closed)*0.8);
19+
min-width: var(--sidebar-width-closed) !important;
1920

2021
.mdc-button__label {
2122
display: inline-flex;
@@ -27,8 +28,8 @@ fs-nav-user-profile {
2728
}
2829

2930
.pic {
30-
height: 3rem;
31-
width: 3rem;
31+
height: calc(var(--sidebar-width-closed)*0.8);
32+
width: calc(var(--sidebar-width-closed)*0.8);
3233
margin-left: auto;
3334
margin-right: auto;
3435
background-size: cover;
@@ -38,16 +39,16 @@ fs-nav-user-profile {
3839
}
3940

4041
.default-profile-pic {
41-
width: 3rem;
42-
height: 3rem;
43-
font-size: 3rem;
42+
width: calc(var(--sidebar-width-closed)*0.8);
43+
height: calc(var(--sidebar-width-closed)*0.8);
44+
font-size: calc(var(--sidebar-width-closed)*0.8);
4445
}
4546
}
4647
}
4748

4849
.profile-content-wrapper {
4950
position: relative;
50-
height: 4rem;
51+
height: var(--sidebar-width-closed);
5152
display: none;
5253
align-items: center;
5354
justify-content: space-between;

‎projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.scss‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
1-
@use '../_variables' as *;
2-
31
.fs-nav-frame-toolbar {
42
position: fixed;
53
z-index: 2;
64
top: 0;
7-
left: $sidebar-width-closed;
5+
left: var(--sidebar-width-closed);
86
transition: all 0.3s ease-in-out;
97
right: 0;
10-
height: $toolbar-height;
8+
height: var(--toolbar-height);
119
padding: 0 1rem;
1210
}
1311

1412
.fs-nav-frame-toolbar.opened {
15-
left: $sidebar-width-opened;
13+
left: var(--sidebar-width-opened);
1614
}
1715

1816
.fs-nav-frame-toolbar-wrapper {

0 commit comments

Comments
 (0)