Skip to content

Commit a0d3d0f

Browse files
eksrhaeksrha
authored
possible to use plain button in profile (#73)
1 parent 5f036c7 commit a0d3d0f

File tree

6 files changed

+178
-65
lines changed

6 files changed

+178
-65
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,10 @@
3939

4040
<fs-nav-user-profile-actions>
4141
<button mat-icon-button>
42-
<mat-icon>manage_accounts</mat-icon>
42+
<i class="material-icons">manage_accounts</i>
4343
</button>
44-
<button mat-icon-button>
45-
<mat-icon>logout</mat-icon>
44+
<button>
45+
<i class="material-icons">logout</i>
4646
</button>
4747
</fs-nav-user-profile-actions>
4848
</fs-nav-user-profile>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { MAT_DATE_LOCALE } from '@angular/material/core';
1313
import { MatFormFieldModule } from '@angular/material/form-field';
1414
import { MatIconModule } from '@angular/material/icon';
1515
import { MatInputModule } from '@angular/material/input';
16+
import { MatDialogModule } from '@angular/material/dialog';
1617
import { MatSelectModule } from '@angular/material/select';
1718
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
1819
import * as dateFnsLocales from 'date-fns/locale';
@@ -40,6 +41,7 @@ const locales: any = dateFnsLocales;
4041
MatSelectModule,
4142
MatCardModule,
4243
MatSlideToggleModule,
44+
MatDialogModule,
4345
/* Lib modules */
4446
FsNavFrameModule,
4547
FsCalendarModule,

‎projects/lib-workspace/src/app/content/showcase-nav-frame/dialog-content-example-dialog.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<h2 mat-dialog-title>Install Angular</h2>
2+
<mat-dialog-content class="mat-typography">
3+
<h3>Develop across all platforms</h3>
4+
<p>Learn one way to build applications with Angular and reuse your code and abilities to build
5+
apps for any deployment target. For web, mobile web, native mobile and native desktop.</p>
6+
7+
<h3>Speed &amp; Performance</h3>
8+
<p>Achieve the maximum speed possible on the Web Platform today, and take it further, via Web
9+
Workers and server-side rendering. Angular puts you in control over scalability. Meet huge
10+
data requirements by building data models on RxJS, Immutable.js or another push-model.</p>
11+
12+
<h3>Incredible tooling</h3>
13+
<p>Build features quickly with simple, declarative templates. Extend the template language with
14+
your own components and use a wide array of existing components. Get immediate Angular-specific
15+
help and feedback with nearly every IDE and editor. All this comes together so you can focus
16+
on building amazing apps rather than trying to make the code work.</p>
17+
18+
<h3>Loved by millions</h3>
19+
<p>From prototype through global deployment, Angular delivers the productivity and scalable
20+
infrastructure that supports Google's largest applications.</p>
21+
22+
<h3>What is Angular?</h3>
23+
24+
<p>Angular is a platform that makes it easy to build applications with the web. Angular
25+
combines declarative templates, dependency injection, end to end tooling, and integrated
26+
best practices to solve development challenges. Angular empowers developers to build
27+
applications that live on the web, mobile, or the desktop</p>
28+
29+
<h3>Architecture overview</h3>
30+
31+
<p>Angular is a platform and framework for building client applications in HTML and TypeScript.
32+
Angular is itself written in TypeScript. It implements core and optional functionality as a
33+
set of TypeScript libraries that you import into your apps.</p>
34+
35+
<p>The basic building blocks of an Angular application are NgModules, which provide a compilation
36+
context for components. NgModules collect related code into functional sets; an Angular app is
37+
defined by a set of NgModules. An app always has at least a root module that enables
38+
bootstrapping, and typically has many more feature modules.</p>
39+
40+
<p>Components define views, which are sets of screen elements that Angular can choose among and
41+
modify according to your program logic and data. Every app has at least a root component.</p>
42+
43+
<p>Components use services, which provide specific functionality not directly related to views.
44+
Service providers can be injected into components as dependencies, making your code modular,
45+
reusable, and efficient.</p>
46+
47+
<p>Both components and services are simply classes, with decorators that mark their type and
48+
provide metadata that tells Angular how to use them.</p>
49+
50+
<p>The metadata for a component class associates it with a template that defines a view. A
51+
template combines ordinary HTML with Angular directives and binding markup that allow Angular
52+
to modify the HTML before rendering it for display.</p>
53+
54+
<p>The metadata for a service class provides the information Angular needs to make it available
55+
to components through Dependency Injection (DI).</p>
56+
57+
<p>An app's components typically define many views, arranged hierarchically. Angular provides
58+
the Router service to help you define navigation paths among views. The router provides
59+
sophisticated in-browser navigational capabilities.</p>
60+
</mat-dialog-content>
61+
<mat-dialog-actions align="end">
62+
<button mat-button mat-dialog-close>Cancel</button>
63+
<button mat-button [mat-dialog-close]="true" cdkFocusInitial>Install</button>
64+
</mat-dialog-actions>

‎projects/lib-workspace/src/app/content/showcase-nav-frame/showcase-nav-frame.component.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,5 @@
1212

1313
<p style="position: absolute; top: 200px">&#8592; In the sidenav you can set preregisterd entrys</p>
1414
</div>
15+
16+
<button mat-raised-button (click)="openDialog()">Open a dialog</button>

‎projects/lib-workspace/src/app/content/showcase-nav-frame/showcase-nav-frame.component.ts

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,32 @@
11
import { Component, OnInit } from '@angular/core';
2+
import { MatButtonModule } from '@angular/material/button';
3+
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
24

35
@Component({
46
selector: 'app-showcase-nav-frame',
57
templateUrl: './showcase-nav-frame.component.html',
68
styleUrls: ['./showcase-nav-frame.component.css'],
79
})
810
export class ShowcaseNavFrameComponent implements OnInit {
9-
constructor() {}
11+
constructor(public dialog: MatDialog) {}
1012

1113
ngOnInit() {}
14+
15+
openDialog() {
16+
const dialogRef = this.dialog.open(DialogContentExampleDialog, {
17+
disableClose: true,
18+
});
19+
20+
dialogRef.afterClosed().subscribe(result => {
21+
console.log(`Dialog result: ${result}`);
22+
});
23+
}
1224
}
25+
26+
@Component({
27+
selector: 'dialog-content-example-dialog',
28+
templateUrl: 'dialog-content-example-dialog.html',
29+
standalone: true,
30+
imports: [MatDialogModule, MatButtonModule],
31+
})
32+
export class DialogContentExampleDialog {}

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

Lines changed: 86 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,108 @@
11
fs-nav-user-profile {
2-
position: relative;
3-
height: var(--sidebar-width-closed);
4-
display: grid;
5-
grid-template-columns: var(--sidebar-width-closed) 1fr;
2+
position: relative;
3+
height: var(--sidebar-width-closed);
4+
display: grid;
5+
grid-template-columns: var(--sidebar-width-closed) 1fr;
66
}
77

88
.profile-pic-button-wrapper {
9-
width: var(--sidebar-width-closed);
10-
height: var(--sidebar-width-closed);
11-
display: flex;
12-
justify-content: center;
13-
align-items: center;
9+
width: var(--sidebar-width-closed);
10+
height: var(--sidebar-width-closed);
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
1414

15-
button {
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;
15+
button {
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;
2020

21-
.mdc-button__label {
22-
display: inline-flex;
23-
justify-content: center;
24-
align-items: center;
25-
width: 100%;
26-
height: 100%;
27-
overflow: hidden;
28-
}
21+
.mdc-button__label {
22+
display: inline-flex;
23+
justify-content: center;
24+
align-items: center;
25+
width: 100%;
26+
height: 100%;
27+
overflow: hidden;
28+
}
2929

30-
.pic {
31-
height: calc(var(--sidebar-width-closed)*0.8);
32-
width: calc(var(--sidebar-width-closed)*0.8);
33-
margin-left: auto;
34-
margin-right: auto;
35-
background-size: cover;
36-
flex-shrink: 0;
37-
object-fit: cover;
38-
border-radius: 50%;
39-
}
30+
.pic {
31+
height: calc(var(--sidebar-width-closed) * 0.8);
32+
width: calc(var(--sidebar-width-closed) * 0.8);
33+
margin-left: auto;
34+
margin-right: auto;
35+
background-size: cover;
36+
flex-shrink: 0;
37+
object-fit: cover;
38+
border-radius: 50%;
39+
}
4040

41-
.default-profile-pic {
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);
45-
}
41+
.default-profile-pic {
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);
4645
}
46+
}
4747
}
4848

4949
.profile-content-wrapper {
50-
position: relative;
51-
height: var(--sidebar-width-closed);
52-
display: none;
53-
align-items: center;
54-
justify-content: space-between;
50+
position: relative;
51+
height: var(--sidebar-width-closed);
52+
display: none;
53+
align-items: center;
54+
justify-content: space-between;
5555

56-
.user-infos {
57-
height: 2rem;
58-
display: inline-flex;
59-
flex-direction: column;
60-
justify-content: space-around;
56+
.user-infos {
57+
height: 2rem;
58+
display: inline-flex;
59+
flex-direction: column;
60+
justify-content: space-around;
6161

62-
.fs-nav-user-profile-name {
63-
font-size: 1rem;
64-
white-space: nowrap;
65-
text-overflow: ellipsis;
66-
}
62+
.fs-nav-user-profile-name {
63+
font-size: 1rem;
64+
white-space: nowrap;
65+
text-overflow: ellipsis;
66+
}
6767

68-
.fs-nav-user-profile-subname {
69-
font-size: .7rem;
70-
white-space: nowrap;
71-
text-overflow: ellipsis;
72-
}
68+
.fs-nav-user-profile-subname {
69+
font-size: 0.7rem;
70+
white-space: nowrap;
71+
text-overflow: ellipsis;
7372
}
73+
}
74+
75+
.fs-nav-user-profile-actions {
76+
display: inline-flex;
77+
justify-content: space-around;
78+
gap: 0.5rem;
79+
80+
> button {
81+
cursor: pointer;
82+
border: none;
83+
padding: 12px;
84+
border-radius: 50%;
85+
flex-shrink: 0;
86+
text-align: center;
87+
display: inline-block;
88+
position: relative;
89+
box-sizing: border-box;
90+
border: none;
91+
outline: none;
92+
background-color: rgba(0, 0, 0, 0);
93+
fill: currentColor;
94+
color: inherit;
95+
text-decoration: none;
96+
user-select: none;
97+
overflow: visible;
7498

75-
.fs-nav-user-profile-actions {
76-
display: inline-flex;
77-
justify-content: space-around;
99+
> i {
100+
font-size: 1.3rem;
101+
}
78102
}
103+
}
79104
}
80105

81106
.profile-content-wrapper.opened {
82-
display: flex;
107+
display: flex;
83108
}

0 commit comments

Comments
 (0)