Skip to content

Commit 0268728

Browse files
mschwrdtnrmschwrdtnr
authored
feat(welcome-popup): redesign welcome popup (#131)
* enhance: redesign first popup - style notification dialog - add mixin for mat-icon - use mixin in whole project * enhance(welcome-popup): disable hover effect - Hover effect disabled - change border and header color to theme primary - renamed classname in `interactive-attribute-field` * feat(welcome-popup): change styles and positions * remove "Du wirst es nicht bereuen" * Update Phonebook.Frontend/src/app/shared/dialogs/display-notification-dialog/display-notification.dialog.html Co-Authored-By: DanielHabenicht <daniel-habenicht@outlook.de> * Update Phonebook.Frontend/src/app/shared/dialogs/display-notification-dialog/display-notification.dialog.html Co-Authored-By: DanielHabenicht <daniel-habenicht@outlook.de> * Update Phonebook.Frontend/src/app/shared/dialogs/display-notification-dialog/display-notification.dialog.html Co-Authored-By: DanielHabenicht <daniel-habenicht@outlook.de> * Update Phonebook.Frontend/src/app/shared/dialogs/display-notification-dialog/display-notification.dialog.html Co-Authored-By: DanielHabenicht <daniel-habenicht@outlook.de> * Update Phonebook.Frontend/src/app/shared/dialogs/display-notification-dialog/display-notification.dialog.html Co-Authored-By: DanielHabenicht <daniel-habenicht@outlook.de> * Update Phonebook.Frontend/src/app/shared/dialogs/display-notification-dialog/display-notification.dialog.html Co-Authored-By: DanielHabenicht <daniel-habenicht@outlook.de> * Update Phonebook.Frontend/src/app/shared/dialogs/display-notification-dialog/display-notification.dialog.html Co-Authored-By: DanielHabenicht <daniel-habenicht@outlook.de> * Update Phonebook.Frontend/src/app/shared/dialogs/display-notification-dialog/display-notification.dialog.html Co-Authored-By: DanielHabenicht <daniel-habenicht@outlook.de> * fix(welcome-page): style changes * fix: move line-height * Revert "fix: move line-height" This reverts commit b4d3c62.
1 parent 368848e commit 0268728

File tree

7 files changed

+244
-111
lines changed

7 files changed

+244
-111
lines changed

‎Phonebook.Frontend/src/app/modules/profile-picture/components/profile-picture/profile-picture.component.scss‎

Lines changed: 64 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,64 @@
1-
@keyframes fadein {
2-
from {
3-
opacity: 0;
4-
}
5-
to {
6-
opacity: 1;
7-
}
8-
}
9-
10-
#image-container {
11-
position: relative;
12-
margin: auto;
13-
overflow: hidden;
14-
display: flex;
15-
align-items: center;
16-
width: 100%;
17-
height: 100%;
18-
19-
img {
20-
vertical-align: middle;
21-
width: 100%;
22-
height: auto;
23-
animation: fadein 0.2s ease-in alternate;
24-
}
25-
26-
#enlarge {
27-
position: absolute;
28-
top: 0;
29-
left: 0;
30-
width: 100%;
31-
height: 100%;
32-
background: rgba(0, 0, 0, 0.6);
33-
align-items: center;
34-
justify-content: center;
35-
display: flex;
36-
opacity: 0;
37-
-webkit-transition: opacity 0.2s ease-in-out;
38-
-moz-transition: opacity 0.2s ease-in-out;
39-
-ms-transition: opacity 0.2s ease-in-out;
40-
-o-transition: opacity 0.2s ease-in-out;
41-
transition: opacity 0.2s ease-in-out;
42-
mat-icon {
43-
height: 38px;
44-
width: 36px;
45-
font-size: 40px;
46-
color: white;
47-
}
48-
}
49-
50-
&:not(.no-hover):hover {
51-
#enlarge {
52-
opacity: 100;
53-
cursor: pointer;
54-
}
55-
}
56-
57-
.image-placeholder {
58-
width: 100%;
59-
height: 100%;
60-
display: flex;
61-
align-items: center;
62-
justify-content: center;
63-
}
64-
}
1+
@import 'mixins';
2+
3+
@keyframes fadein {
4+
from {
5+
opacity: 0;
6+
}
7+
to {
8+
opacity: 1;
9+
}
10+
}
11+
12+
#image-container {
13+
position: relative;
14+
margin: auto;
15+
overflow: hidden;
16+
display: flex;
17+
align-items: center;
18+
width: 100%;
19+
height: 100%;
20+
21+
img {
22+
vertical-align: middle;
23+
width: 100%;
24+
height: auto;
25+
animation: fadein 0.2s ease-in alternate;
26+
}
27+
28+
#enlarge {
29+
position: absolute;
30+
top: 0;
31+
left: 0;
32+
width: 100%;
33+
height: 100%;
34+
background: rgba(0, 0, 0, 0.6);
35+
align-items: center;
36+
justify-content: center;
37+
display: flex;
38+
opacity: 0;
39+
-webkit-transition: opacity 0.2s ease-in-out;
40+
-moz-transition: opacity 0.2s ease-in-out;
41+
-ms-transition: opacity 0.2s ease-in-out;
42+
-o-transition: opacity 0.2s ease-in-out;
43+
transition: opacity 0.2s ease-in-out;
44+
mat-icon {
45+
@include mat-icon-size(40px);
46+
color: white;
47+
}
48+
}
49+
50+
&:not(.no-hover):hover {
51+
#enlarge {
52+
opacity: 100;
53+
cursor: pointer;
54+
}
55+
}
56+
57+
.image-placeholder {
58+
width: 100%;
59+
height: 100%;
60+
display: flex;
61+
align-items: center;
62+
justify-content: center;
63+
}
64+
}

‎Phonebook.Frontend/src/app/shared/components/search/search.component.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import 'mixins';
2+
13
input {
24
margin: 0;
35
flex: 1;
@@ -23,8 +25,7 @@ input {
2325

2426
button {
2527
mat-icon {
26-
font-size: 30px;
27-
width: 30px;
28+
@include mat-icon-size(30px);
2829
}
2930
}
3031

@@ -35,8 +36,7 @@ button {
3536
@media (max-width: 599px) {
3637
button {
3738
mat-icon {
38-
font-size: 24px;
39-
width: 24px;
39+
@include mat-icon-size(24px);
4040
}
4141
}
4242
}

‎Phonebook.Frontend/src/app/shared/dialogs/display-notification-dialog/display-notification.dialog.html‎

Lines changed: 120 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,132 @@
11
<div class="displayDialog">
2-
<h2 mat-dialog-title>Willkommen beim neuen Phonebook!</h2>
2+
<h3 mat-dialog-title class="pb-color-primary">
3+
Willkommen beim neuen Phonebook!
4+
</h3>
35
<mat-dialog-content>
46
<span
57
>Das neue Phonebook bietet dir nicht nur ein neues Design sondern auch zahlreiche Funktionen, die es besser als
6-
seinen Vorgänger machen:
8+
seinen Vorgänger machen.
79
</span>
8-
<mat-list>
9-
<mat-list-item>
10-
<h5 matLine>Das Profilbild kann von dir selbst ausgetauscht werden.</h5>
11-
<p matLine>Klicke dafür einfach oben rechts auf <mat-icon>person</mat-icon> Icon und dann auf "Mein Profil".</p>
12-
</mat-list-item>
13-
<mat-list-item>
14-
<h5 matLine>Häufig kontaktierte Kollegen können als Favoriten gespeichert werden.</h5>
15-
</mat-list-item>
16-
<mat-list-item>
17-
<h5 matLine>Die Tabellenspalten können nach persönlichen Präferenzen angepasst und sortiert werden.</h5>
18-
</mat-list-item>
19-
<mat-list-item>
20-
<h5 matLine>Personen können über Links geteilt werden.</h5>
21-
</mat-list-item>
22-
<mat-list-item>
23-
<h5 matLine>Das Phonebook steht dir in Deutsch und Englisch zur Verfügung.</h5>
24-
<p matLine>Klicke einfach oben rechts auf das <mat-icon>person</mat-icon> Icon und dann auf "Einstellungen".</p>
25-
</mat-list-item>
26-
<mat-list-item>
27-
<h5 matLine>Eine Raumübersicht</h5>
28-
<p matLine>Damit kannst du ganz einfach nachgucken wer wo sitzt.</p>
29-
</mat-list-item>
30-
</mat-list>
31-
32-
<p>
33-
Da fehlt noch was oder dir ist direkt der erste Fehler ins Auge gesprungen (hoffentlich nicht)? Dann teile uns
34-
deine <a href="https://github.com/T-Systems-MMS/phonebook">Anmerkungen oder Ideen </a> mit. Bugs kannst du
35-
<a href="https://github.com/T-Systems-MMS/phonebook">hier</a>
36-
melden oder jederzeit oben links.
37-
</p>
38-
<h3>Aufruf an dich!</h3>
39-
<p>Dies ist ein OpenSource-Projekt, es lebt von Mitstreitern die aktiv mitgestalten.</p>
40-
<p>
41-
Wenn du also Interesse, Zeit oder Ideen hast und mitmachen möchtest
42-
<a href="https://github.com/T-Systems-MMS/phonebook">melde dich bei uns, bzw. leg direkt los</a>. Programmieren
43-
ist dafür nämlich keine Voraussetzung!
44-
</p>
10+
<!-- call for contributors -->
11+
<div class="pb-flex pb-card-container">
12+
<mat-card class="pb-card-call pb-border-color-primary">
13+
<mat-card-header>
14+
<mat-card-title><mat-icon [color]="'primary'">error_outline</mat-icon></mat-card-title>
15+
</mat-card-header>
16+
<mat-card-title>Aufruf an dich!</mat-card-title>
17+
<mat-card-content>
18+
<span>
19+
Dies ist ein Open Source Projekt und lebt von seinen aktiven Mitgestaltern. Dabei gibt es verschiedene
20+
Themen die du übernehmen kannst. Du könntest uns z.B. helfen indem du ein
21+
<a href="https://github.com/T-Systems-MMS/phonebook/issues" target="_blank">Issue</a> bearbeitest, am
22+
User-Guide schreibst oder einfach nur beim Verbessern der Software hilfst indem du neue
23+
<a href="https://github.com/T-Systems-MMS/phonebook/issues/new/choose" target="_blank">Bugs einstellst</a>
24+
und beschreibst.
25+
</span>
26+
<span>
27+
Melde dich bei Interesse gern
28+
<a href="https://github.com/T-Systems-MMS/phonebook/" target="_blank">im offiziellen Repo</a> oder starte
29+
mit einem Blick auf unsere
30+
<a href="https://t-systems-mms.github.io/phonebook/" target="_blank">Dokumentation</a>.
31+
<div><b>Programmieren ist keine Voraussetzung um ein Teil der Community zu werden!</b></div>
32+
</span>
33+
</mat-card-content>
34+
</mat-card>
35+
</div>
36+
<div class="pb-flex-row pb-card-container">
37+
<!-- Profilbild -->
38+
<mat-card class="pb-border-color-primary">
39+
<mat-card-header>
40+
<mat-card-title><mat-icon class="big-icon" [color]="'primary'">person</mat-icon></mat-card-title>
41+
</mat-card-header>
42+
<mat-card-title>
43+
Du kannst selbst ein Profilbild einstellen
44+
</mat-card-title>
45+
<mat-card-content>
46+
Klicke dafür einfach oben rechts auf das
47+
<button mat-icon-button disabled="true"><mat-icon [color]="'primary'">person</mat-icon></button>
48+
Icon und dann auf "Mein Profil".
49+
</mat-card-content>
50+
</mat-card>
51+
<!-- Bookmark -->
52+
<mat-card mat-card class="pb-border-color-primary">
53+
<mat-card-header>
54+
<mat-card-title><mat-icon [color]="'primary'">bookmark_border</mat-icon></mat-card-title>
55+
</mat-card-header>
56+
<mat-card-title>
57+
Kollegen können als Favorit gespeichert werden
58+
</mat-card-title>
59+
<mat-card-content>
60+
Klicke dafür auf das
61+
<button mat-icon-button disabled="true"><mat-icon [color]="'primary'">bookmark_border</mat-icon></button>
62+
Icon bei einem deiner Kollegen.
63+
</mat-card-content>
64+
</mat-card>
65+
<!-- table settings -->
66+
<mat-card mat-card class="pb-border-color-primary">
67+
<mat-card-header>
68+
<mat-card-title><mat-icon [color]="'primary'">settings</mat-icon></mat-card-title>
69+
</mat-card-header>
70+
<mat-card-title>
71+
Tabellenspalten können sortiert und angepasst werden
72+
</mat-card-title>
73+
<mat-card-content>
74+
Die Einstellungen
75+
<button mat-icon-button disabled="true"><mat-icon [color]="'primary'">settings</mat-icon></button>
76+
findest du bei der Suchseite rechts oben.
77+
</mat-card-content>
78+
</mat-card>
79+
<!-- share -->
80+
<mat-card mat-card class="pb-border-color-primary">
81+
<mat-card-header>
82+
<mat-card-title><mat-icon [color]="'primary'">share</mat-icon></mat-card-title>
83+
</mat-card-header>
84+
<mat-card-title>
85+
Personen können über Links geteilt werden
86+
</mat-card-title>
87+
<mat-card-content>
88+
Die verschiedenen Möglichkeiten zum Teilen eines Profils findest du mit einem Klick auf das
89+
<button mat-icon-button disabled="true"><mat-icon [color]="'primary'">share</mat-icon></button>
90+
Symbol.
91+
</mat-card-content>
92+
</mat-card>
93+
<!-- language -->
94+
<mat-card mat-card class="pb-border-color-primary">
95+
<mat-card-header>
96+
<mat-card-title><mat-icon [color]="'primary'">language</mat-icon></mat-card-title>
97+
</mat-card-header>
98+
<mat-card-title>
99+
Das Phonebook steht dir in Deutsch und Englisch zur Verfügung
100+
</mat-card-title>
101+
<mat-card-content>
102+
Klicke dafür einfach oben rechts auf das
103+
<button mat-icon-button disabled="true"><mat-icon [color]="'primary'">person</mat-icon></button>
104+
Icon und wechsle zu den Einstellungen.
105+
</mat-card-content>
106+
</mat-card>
107+
<!-- roomplan -->
108+
<mat-card mat-card class="pb-border-color-primary">
109+
<mat-card-header>
110+
<mat-card-title><mat-icon [color]="'primary'">room</mat-icon></mat-card-title>
111+
</mat-card-header>
112+
<mat-card-title>
113+
Du kannst dir für jeden Mitarbeiter einen Raumplan anzeigen lassen
114+
</mat-card-title>
115+
<mat-card-content>
116+
Gehe dafür einfach auf das Profil eines Kollegen und scroll nach unten.
117+
</mat-card-content>
118+
</mat-card>
119+
</div>
45120
</mat-dialog-content>
46121
<div class="spacer"></div>
47122
<mat-dialog-actions>
48-
<p>Diese Seite nutzt Cookies um die Grundfunktionalität der App sicherzustellen.</p>
123+
<p>
124+
Diese Seite nutzt Cookies um die Grundfunktionalität der App sicherzustellen.
125+
</p>
49126
<div class="actions">
50-
<button mat-button mat-dialog-close cdkFocusInitial>Cool!</button>
127+
<button mat-button mat-dialog-close cdkFocusInitial>
128+
Cool!
129+
</button>
51130
</div>
52131
</mat-dialog-actions>
53132
</div>

‎Phonebook.Frontend/src/app/shared/dialogs/display-notification-dialog/display-notification.dialog.scss‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1+
@import 'mixins';
2+
@import 'media-queries';
3+
@import '~@angular/material/theming';
4+
15
h3 {
2-
font-size: 1.5rem;
6+
font-size: 2rem;
37
}
48

59
p {
@@ -10,6 +14,7 @@ p {
1014
height: 100%;
1115
display: flex;
1216
flex-direction: column;
17+
text-align: center; //center whole text in dialog
1318
}
1419

1520
.mat-dialog-content {
@@ -23,3 +28,38 @@ p {
2328
.actions {
2429
margin: 0 0 0 auto;
2530
}
31+
32+
.pb-card-container {
33+
justify-content: center;
34+
}
35+
36+
mat-card {
37+
flex: 1;
38+
min-width: 25%;
39+
margin: 1%;
40+
border: 1px solid;
41+
42+
@include below-big {
43+
min-width: 40%;
44+
}
45+
@include below-med {
46+
min-width: 80%;
47+
}
48+
49+
mat-card-header {
50+
//place for the icon
51+
justify-content: center;
52+
mat-icon {
53+
@include mat-icon-size(60px);
54+
}
55+
}
56+
57+
mat-card-title {
58+
line-height: 1;
59+
}
60+
}
61+
62+
.pb-card-call {
63+
flex: 1;
64+
min-width: 80%;
65+
}

‎Phonebook.Frontend/src/app/shared/interactive-attribute-field/interactive-attribute-field.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
>
1818
{{ value }}
1919
</a>
20-
<a *ngIf="!tel && !mailto" mat-button class="pb-color-primary" disabled>
20+
<a *ngIf="!tel && !mailto" mat-button class="pb-color-background" disabled>
2121
{{ value }}
2222
</a>
2323
<button

0 commit comments

Comments
 (0)