Skip to content

Commit 8379eea

Browse files
AwakichAwakich
committed
add hint component & option hint for input, textarea, button
1 parent 66bed70 commit 8379eea

34 files changed

Lines changed: 706 additions & 389 deletions

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

Lines changed: 40 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@
22

33
<div class="page">
44
<div class="auth__greeting">
5-
<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-
>
5+
<div class="tooltip">
6+
<h3 class="text-heading-3">Кем хочешь работать?</h3>
7+
<app-tooltip
8+
[text]="
9+
'Дизайнер, веб-разработчик, инженер? Определяйся и пиши тем, кем хотел бы стать или уже стал P.S. Дальше можно будет изменить выбор'
10+
"
11+
[isVisible]="isHintAuthVisible"
12+
[position]="'right'"
13+
[tooltipWidth]="300"
14+
customClass="tooltip__hint"
15+
(show)="showTooltip('auth')"
16+
(hide)="hideTooltip('auth')"
17+
></app-tooltip>
18+
</div>
1919
<!-- <p class="auth__info">
2020
Для того, чтобы участники понимали с кем общаются и платформа могла рекомендовать тебя на
2121
самые подходящие вакансии
@@ -43,21 +43,20 @@ <h4 class="text-heading-4 content__section-heading">Поиск по библио
4343
</section>
4444
<section class="content__section content__right">
4545
<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>
46+
<div class="tooltip">
47+
<h4 class="text-heading-4">Библиотека</h4>
48+
<app-tooltip
49+
[text]="
50+
'Это наша база со всеми специальностями. Если не найдешь свою пиши в @procollab_support и мы обязательно добавим твою профессию и ты получишь +респект'
51+
"
52+
[isVisible]="isHintLibVisible"
53+
[position]="'right'"
54+
[tooltipWidth]="300"
55+
customClass="tooltip__hint"
56+
(show)="showTooltip('lib')"
57+
(hide)="hideTooltip('lib')"
58+
></app-tooltip>
59+
</div>
6160
</div>
6261
<div class="content__specs-groups">
6362
<ul class="content__specs-groups-list">
@@ -74,10 +73,20 @@ <h4 class="text-heading-4">Библиотека</h4>
7473
</div>
7574
</section>
7675
<div class="content__actions">
77-
<app-button (click)="onSkipRegistration()" color="grey" [loader]="skipSubmitting()"
76+
<app-button
77+
size="big"
78+
(click)="onSkipRegistration()"
79+
customTypographyClass="text-body-12"
80+
color="grey"
81+
[loader]="skipSubmitting()"
7882
>Закончить регистрацию позже</app-button
7983
>
80-
<app-button size="big" type="submit" [loader]="stageSubmitting()" (click)="onSubmit()"
84+
<app-button
85+
size="big"
86+
type="submit"
87+
customTypographyClass="text-body-12"
88+
[loader]="stageSubmitting()"
89+
(click)="onSubmit()"
8190
>Продолжить</app-button
8291
>
8392
</div>

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

Lines changed: 8 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,13 @@
1010
}
1111
}
1212

13+
.tooltip {
14+
position: relative;
15+
display: inline-flex;
16+
gap: 10px;
17+
align-items: center;
18+
}
19+
1320
.content {
1421
display: grid;
1522
grid-template-columns: 1fr;
@@ -61,49 +68,12 @@
6168
.field__input {
6269
padding: 12px 20px;
6370

64-
@include typography.body-16;
71+
@include typography.body-12;
6572
}
6673
}
6774
}
6875
}
6976

70-
&__hint {
71-
z-index: 10;
72-
display: inline-block;
73-
width: 24px;
74-
height: 24px;
75-
cursor: pointer;
76-
77-
&:hover {
78-
opacity: 1;
79-
}
80-
81-
@include responsive.apply-desktop {
82-
opacity: 0.5;
83-
}
84-
}
85-
86-
&__tooltip {
87-
position: absolute;
88-
top: 65%;
89-
left: 38%;
90-
z-index: 100;
91-
display: none;
92-
width: 250px;
93-
padding: 12px;
94-
color: var(--dark-grey);
95-
background-color: var(--white);
96-
border: 1px solid var(--dark-grey);
97-
border-radius: 0 15px 15px;
98-
opacity: 0;
99-
transition: opacity 0.3s ease-in-out;
100-
101-
&--visible {
102-
display: block;
103-
opacity: 1;
104-
}
105-
}
106-
10777
&__actions {
10878
display: flex;
10979
flex-direction: column;

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { SpecializationsGroupComponent } from "@office/shared/specializations-gr
1515
import { Specialization } from "@office/models/specialization";
1616
import { SpecializationsService } from "@office/services/specializations.service";
1717
import { ErrorMessage } from "@error/models/error-message";
18+
import { TooltipComponent } from "@ui/components/tooltip/tooltip.component";
1819

1920
/**
2021
* КОМПОНЕНТ ПЕРВОГО ЭТАПА ОНБОРДИНГА
@@ -58,6 +59,7 @@ import { ErrorMessage } from "@error/models/error-message";
5859
AutoCompleteInputComponent,
5960
SpecializationsGroupComponent,
6061
CommonModule,
62+
TooltipComponent,
6163
],
6264
})
6365
export class OnboardingStageOneComponent implements OnInit, OnDestroy {
@@ -80,12 +82,6 @@ export class OnboardingStageOneComponent implements OnInit, OnDestroy {
8082
map(r => r["data"])
8183
);
8284

83-
tooltipAuthText =
84-
"Дизайнер, веб-разработчик, инженер? Определяйся и пиши тем, кем хотел бы стать или уже стал P.S. Дальше можно будет изменить выбор";
85-
86-
tooltipLibText =
87-
"Это наша база со всеми специальностями. Если не найдешь свою пиши в @procollab_support и мы обязательно добавим твою профессию и ты получишь +респект";
88-
8985
isHintAuthVisible = false;
9086
isHintLibVisible = false;
9187

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

Lines changed: 40 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@
22

33
<div class="page">
44
<div class="auth__greeting">
5-
<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-
>
5+
<div class="tooltip">
6+
<h3 class="text-heading-3">Кем хочешь работать?</h3>
7+
<app-tooltip
8+
[text]="
9+
'Постарайся вспомнить все, чему тебя учили и то, что ты делал (читать, считать, программировать) Постарайся не врать, но и не будь сильно критичным к себе.'
10+
"
11+
[isVisible]="isHintAuthVisible"
12+
[position]="'right'"
13+
[tooltipWidth]="300"
14+
customClass="tooltip__hint"
15+
(show)="showTooltip('auth')"
16+
(hide)="hideTooltip('auth')"
17+
></app-tooltip>
18+
</div>
1919
<!-- <p class="auth__info">
2020
Для того, чтобы участники понимали с кем общаются и платформа могла рекомендовать тебя на
2121
самые подходящие вакансии
@@ -46,21 +46,20 @@ <h4 class="text-heading-4">Выбранные навыки</h4>
4646
</section>
4747
<section class="content__section content__right">
4848
<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>
49+
<div class="tooltip">
50+
<h4 class="text-heading-4">Библиотека</h4>
51+
<app-tooltip
52+
[text]="
53+
'База с навыками, которая может пополняться благодаря тебе! Если не найдешь свой навык, смело пиши на @procollab_support и мы добавим твой уникальный навык'
54+
"
55+
[isVisible]="isHintLibVisible"
56+
[position]="'right'"
57+
[tooltipWidth]="300"
58+
customClass="tooltip__hint"
59+
(show)="showTooltip('lib')"
60+
(hide)="hideTooltip('lib')"
61+
></app-tooltip>
62+
</div>
6463
</div>
6564
<div class="content__skills-groups">
6665
<ul class="content__skills-groups-list">
@@ -78,10 +77,20 @@ <h4 class="text-heading-4">Библиотека</h4>
7877
</div>
7978
</section>
8079
<div class="content__actions">
81-
<app-button (click)="onSkipRegistration()" color="grey" [loader]="skipSubmitting()"
80+
<app-button
81+
size="big"
82+
(click)="onSkipRegistration()"
83+
customTypographyClass="text-body-12"
84+
color="grey"
85+
[loader]="skipSubmitting()"
8286
>Закончить регистрацию позже</app-button
8387
>
84-
<app-button size="big" type="submit" [loader]="stageSubmitting()" (click)="onSubmit()"
88+
<app-button
89+
size="big"
90+
type="submit"
91+
customTypographyClass="text-body-12"
92+
[loader]="stageSubmitting()"
93+
(click)="onSubmit()"
8594
>Продолжить</app-button
8695
>
8796
</div>

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

Lines changed: 8 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,13 @@
1010
}
1111
}
1212

13+
.tooltip {
14+
position: relative;
15+
display: inline-flex;
16+
gap: 10px;
17+
align-items: center;
18+
}
19+
1320
.content {
1421
display: grid;
1522
grid-template-rows: 1fr;
@@ -39,43 +46,6 @@
3946
}
4047
}
4148

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

90-
@include typography.body-16;
60+
@include typography.body-12;
9161
}
9262
}
9363
}

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { SkillsGroup } from "@office/models/skills-group";
1616
import { SkillsGroupComponent } from "@office/shared/skills-group/skills-group.component";
1717
import { SkillsBasketComponent } from "@office/shared/skills-basket/skills-basket.component";
1818
import { ModalComponent } from "@ui/components/modal/modal.component";
19+
import { TooltipComponent } from "@ui/components/tooltip/tooltip.component";
1920

2021
/**
2122
* КОМПОНЕНТ ВТОРОГО ЭТАПА ОНБОРДИНГА
@@ -70,6 +71,7 @@ import { ModalComponent } from "@ui/components/modal/modal.component";
7071
AutoCompleteInputComponent,
7172
SkillsGroupComponent,
7273
SkillsBasketComponent,
74+
TooltipComponent,
7375
],
7476
})
7577
export class OnboardingStageTwoComponent implements OnInit, OnDestroy {
@@ -92,12 +94,6 @@ export class OnboardingStageTwoComponent implements OnInit, OnDestroy {
9294

9395
searchedSkills = signal<Skill[]>([]);
9496

95-
tooltipAuthText =
96-
"Постарайся вспомнить все, чему тебя учили и то, что ты делал (читать, считать, программировать) Постарайся не врать, но и не будь сильно критичным к себе.";
97-
98-
tooltipLibText =
99-
"База с навыками, которая может пополняться благодаря тебе! Если не найдешь свой навык, смело пиши на @procollab_support и мы добавим твой уникальный навык";
100-
10197
isHintAuthVisible = false;
10298
isHintLibVisible = false;
10399

0 commit comments

Comments
 (0)