Skip to content

Commit 9716ae8

Browse files
AwakichAwakich
committed
add hints in onboarding & visual fixes
1 parent 80cc3a5 commit 9716ae8

16 files changed

Lines changed: 515 additions & 30 deletions

‎projects/core/src/lib/services/subscription-plans.service.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
/** @format */
22

33
import { Injectable, inject } from "@angular/core";
4-
import { ApiService } from "@corelib";
4+
import { SkillsApiService } from "@corelib";
55
import { PaymentStatus, SubscriptionPlan } from "../models";
66

77
@Injectable({
88
providedIn: "root",
99
})
1010
export class SubscriptionPlansService {
11-
apiService = inject(ApiService);
11+
apiService = inject(SkillsApiService);
1212

1313
getSubscriptions() {
1414
return this.apiService.get<SubscriptionPlan[]>("/auth/subscription/");

‎projects/social_platform/src/app/auth/register/register.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<h3 class="auth__title auth__title--register">
66
@if (step === "credentials") {
77
<ng-container>
8-
Добро пожаловать на Procollab!&nbsp;👋<br />
9-
С нами идеи становятся реальностью&nbsp;🚀
8+
Приветствуем на Procollab!&nbsp;👋<br />
9+
Строй свою карьеру уже сегодня&nbsp;🚀
1010
</ng-container>
1111
} @else if (step === "info") {
1212
<ng-container>

‎projects/social_platform/src/app/office/office.component.ts‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,7 @@ import { DeleteConfirmComponent } from "@ui/components/delete-confirm/delete-con
1414
import { ButtonComponent } from "@ui/components";
1515
import { ModalComponent } from "@ui/components/modal/modal.component";
1616
import { NavComponent } from "./shared/nav/nav.component";
17-
import {
18-
IconComponent,
19-
ProfileControlPanelComponent,
20-
SidebarComponent,
21-
SubscriptionPlansComponent,
22-
} from "@uilib";
17+
import { IconComponent, ProfileControlPanelComponent, SidebarComponent } from "@uilib";
2318
import { AsyncPipe } from "@angular/common";
2419
import { InviteService } from "@services/invite.service";
2520
import { toSignal } from "@angular/core/rxjs-interop";
@@ -40,7 +35,6 @@ import { toSignal } from "@angular/core/rxjs-interop";
4035
AsyncPipe,
4136
ProfileControlPanelComponent,
4237
IconComponent,
43-
SubscriptionPlansComponent,
4438
],
4539
})
4640
export class OfficeComponent implements OnInit, OnDestroy {

‎projects/social_platform/src/app/office/onboarding/stage-one/stage-one.component.html‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,19 @@
33
<div class="page">
44
<div class="auth__greeting">
55
<h3 class="auth__title">Кем хочешь работать?</h3>
6+
<i
7+
appIcon
8+
icon="hint"
9+
appSquare="24"
10+
class="content__hint"
11+
(mouseenter)="showTooltip('auth')"
12+
(mouseleave)="hideTooltip('auth')"
13+
></i>
14+
<span
15+
class="content__tooltip text-body-12"
16+
[class.content__tooltip--visible]="isHintAuthVisible"
17+
>{{ tooltipAuthText }}</span
18+
>
619
<!-- <p class="auth__info">
720
Для того, чтобы участники понимали с кем общаются и платформа могла рекомендовать тебя на
821
самые подходящие вакансии
@@ -29,7 +42,23 @@ <h4 class="text-heading-4 content__section-heading">Поиск по библио
2942
}
3043
</section>
3144
<section class="content__section content__right">
32-
<h4 class="text-heading-4 content__section-heading content__right-heading">Библиотека</h4>
45+
<div class="auth__greeting content__right-heading">
46+
<h4 class="text-heading-4">Библиотека</h4>
47+
<i
48+
appIcon
49+
icon="hint"
50+
appSquare="24"
51+
class="content__hint"
52+
(mouseenter)="showTooltip('lib')"
53+
(mouseleave)="hideTooltip('lib')"
54+
></i>
55+
<span
56+
class="content__tooltip text-body-12"
57+
style="width: 280px; left: 30%; top: 80%"
58+
[class.content__tooltip--visible]="isHintLibVisible"
59+
[innerHTML]="tooltipLibText"
60+
></span>
61+
</div>
3362
<div class="content__specs-groups">
3463
<ul class="content__specs-groups-list">
3564
@for (spec of nestedSpecializations$ | async; track spec.id) {

‎projects/social_platform/src/app/office/onboarding/stage-one/stage-one.component.scss‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
@use "styles/responsive";
22

3+
.auth {
4+
&__greeting {
5+
position: relative;
6+
display: flex;
7+
gap: 10px;
8+
align-items: center;
9+
}
10+
}
11+
312
.content {
413
display: grid;
514
grid-template-columns: 1fr;
@@ -41,6 +50,44 @@
4150

4251
&-heading {
4352
padding: 14px 14px 0;
53+
margin-bottom: 25px;
54+
}
55+
}
56+
57+
&__hint {
58+
z-index: 10;
59+
display: inline-block;
60+
width: 24px;
61+
height: 24px;
62+
cursor: pointer;
63+
64+
&:hover {
65+
opacity: 1;
66+
}
67+
68+
@include responsive.apply-desktop {
69+
opacity: 0.5;
70+
}
71+
}
72+
73+
&__tooltip {
74+
position: absolute;
75+
top: 65%;
76+
left: 38%;
77+
z-index: 100;
78+
display: none;
79+
width: 250px;
80+
padding: 12px;
81+
color: var(--dark-grey);
82+
background-color: var(--white);
83+
border: 1px solid var(--dark-grey);
84+
border-radius: 0 15px 15px;
85+
opacity: 0;
86+
transition: opacity 0.3s ease-in-out;
87+
88+
&--visible {
89+
display: block;
90+
opacity: 1;
4491
}
4592
}
4693

‎projects/social_platform/src/app/office/onboarding/stage-one/stage-one.component.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,15 @@ export class OnboardingStageOneComponent implements OnInit, OnDestroy {
5555
map(r => r["data"])
5656
);
5757

58+
tooltipAuthText =
59+
"Дизайнер, веб-разработчик, инженер? Определяйся и пиши тем, кем хотел бы стать или уже стал P.S. Дальше можно будет изменить выбор";
60+
61+
tooltipLibText =
62+
"Это наша база со всеми специальностями. Если не найдешь свою пиши в @procollab_support и мы обязательно добавим твою профессию и ты получишь +респект";
63+
64+
isHintAuthVisible = false;
65+
isHintLibVisible = false;
66+
5867
inlineSpecializations = signal<Specialization[]>([]);
5968

6069
stageSubmitting = signal(false);
@@ -92,6 +101,14 @@ export class OnboardingStageOneComponent implements OnInit, OnDestroy {
92101
this.subscriptions$().forEach($ => $.unsubscribe());
93102
}
94103

104+
showTooltip(type: "auth" | "lib"): void {
105+
type === "auth" ? (this.isHintAuthVisible = true) : (this.isHintLibVisible = true);
106+
}
107+
108+
hideTooltip(type: "auth" | "lib"): void {
109+
type === "auth" ? (this.isHintAuthVisible = false) : (this.isHintLibVisible = false);
110+
}
111+
95112
onSkipRegistration(): void {
96113
if (!this.validationService.getFormValidation(this.stageForm)) {
97114
return;

‎projects/social_platform/src/app/office/onboarding/stage-two/stage-two.component.html‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,19 @@
33
<div class="page">
44
<div class="auth__greeting">
55
<h3 class="auth__title">Расскажи, что умеешь</h3>
6+
<i
7+
appIcon
8+
icon="hint"
9+
appSquare="24"
10+
class="content__hint"
11+
(mouseenter)="showTooltip('auth')"
12+
(mouseleave)="hideTooltip('auth')"
13+
></i>
14+
<span
15+
class="content__tooltip text-body-12"
16+
[class.content__tooltip--visible]="isHintAuthVisible"
17+
>{{ tooltipAuthText }}</span
18+
>
619
<!-- <p class="auth__info">
720
Для того, чтобы участники понимали с кем общаются и платформа могла рекомендовать тебя на
821
самые подходящие вакансии
@@ -32,7 +45,23 @@ <h4 class="text-heading-4">Выбранные навыки</h4>
3245
</div>
3346
</section>
3447
<section class="content__section content__right">
35-
<h4 class="text-heading-4 content__section-heading content__right-heading">Библиотека</h4>
48+
<div class="auth__greeting content__right-heading">
49+
<h4 class="text-heading-4">Библиотека</h4>
50+
<i
51+
appIcon
52+
icon="hint"
53+
appSquare="24"
54+
class="content__hint"
55+
(mouseenter)="showTooltip('lib')"
56+
(mouseleave)="hideTooltip('lib')"
57+
></i>
58+
<span
59+
class="content__tooltip text-body-12"
60+
style="width: 280px; left: 30%; top: 80%"
61+
[class.content__tooltip--visible]="isHintLibVisible"
62+
[innerHTML]="tooltipLibText"
63+
></span>
64+
</div>
3665
<div class="content__skills-groups">
3766
<ul class="content__skills-groups-list">
3867
@for (skillGroup of nestedSkills$ | async; track skillGroup.id) {

‎projects/social_platform/src/app/office/onboarding/stage-two/stage-two.component.scss‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
@use "styles/responsive";
22

3+
.auth {
4+
&__greeting {
5+
position: relative;
6+
display: flex;
7+
gap: 10px;
8+
align-items: center;
9+
}
10+
}
11+
312
.content {
413
display: grid;
514
grid-template-rows: 1fr;
@@ -29,6 +38,43 @@
2938
}
3039
}
3140

41+
&__hint {
42+
z-index: 10;
43+
display: inline-block;
44+
width: 24px;
45+
height: 24px;
46+
cursor: pointer;
47+
48+
&:hover {
49+
opacity: 1;
50+
}
51+
52+
@include responsive.apply-desktop {
53+
opacity: 0.5;
54+
}
55+
}
56+
57+
&__tooltip {
58+
position: absolute;
59+
top: 65%;
60+
left: 38%;
61+
z-index: 100;
62+
display: none;
63+
width: 300px;
64+
padding: 12px;
65+
color: var(--dark-grey);
66+
background-color: var(--white);
67+
border: 1px solid var(--dark-grey);
68+
border-radius: 0 15px 15px;
69+
opacity: 0;
70+
transition: opacity 0.3s ease-in-out;
71+
72+
&--visible {
73+
display: block;
74+
opacity: 1;
75+
}
76+
}
77+
3278
&__left,
3379
&__search,
3480
&__skills {
@@ -68,6 +114,7 @@
68114

69115
&-heading {
70116
padding: 14px 14px 0;
117+
margin-bottom: 25px;
71118
}
72119
}
73120

‎projects/social_platform/src/app/office/onboarding/stage-two/stage-two.component.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,15 @@ export class OnboardingStageTwoComponent implements OnInit, OnDestroy {
6262

6363
searchedSkills = signal<Skill[]>([]);
6464

65+
tooltipAuthText =
66+
"Постарайся вспомнить все, чему тебя учили и то, что ты делал (читать, считать, программировать) Постарайся не врать, но и не будь сильно критичным к себе.";
67+
68+
tooltipLibText =
69+
"База с навыками, которая может пополняться благодаря тебе! Если не найдешь свой навык, смело пиши на @procollab_support и мы добавим твой уникальный навык";
70+
71+
isHintAuthVisible = false;
72+
isHintLibVisible = false;
73+
6574
stageSubmitting = signal(false);
6675
skipSubmitting = signal(false);
6776

@@ -96,6 +105,14 @@ export class OnboardingStageTwoComponent implements OnInit, OnDestroy {
96105
this.subscriptions$().forEach($ => $.unsubscribe());
97106
}
98107

108+
showTooltip(type: "auth" | "lib"): void {
109+
type === "auth" ? (this.isHintAuthVisible = true) : (this.isHintLibVisible = true);
110+
}
111+
112+
hideTooltip(type: "auth" | "lib"): void {
113+
type === "auth" ? (this.isHintAuthVisible = false) : (this.isHintLibVisible = false);
114+
}
115+
99116
onSkipRegistration(): void {
100117
if (!this.validationService.getFormValidation(this.stageForm)) {
101118
return;

0 commit comments

Comments
 (0)