Skip to content

Commit 83f14e5

Browse files
JulienDroulezJulienDroulez
committed
feat: rework skill edit page for mentorship
1 parent 834966b commit 83f14e5

File tree

8 files changed

+179
-52
lines changed

8 files changed

+179
-52
lines changed

‎src/components/base/ToolTip.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@ export default {
115115
--popper-theme-text-color: #{$primary-dark};
116116
--popper-theme-box-shadow: none;
117117
--popper-theme-background-color-hover: var(--popper-theme-background-color);
118+
--popper-theme-padding: #{$space-s};
118119
119120
.popper {
120121
font-size: $font-size-xs;

‎src/components/base/button/LpiButton.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,14 @@ export default {
111111
width: 35px;
112112
padding: 0;
113113
}
114+
115+
&.borderless {
116+
border: 0 none;
117+
}
118+
119+
&.squarish {
120+
border-radius: $border-radius-s;
121+
}
114122
}
115123
116124
.lpi-button :deep(svg) {

‎src/components/people/skill/EditMentorshipDrawer.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ const skillTexts = useSkillTexts()
3939
data-test="edit-mentorship-drawer"
4040
:confirm-action-name="$t('common.confirm')"
4141
:confirm-action-disabled="false"
42-
:asyncing="asyncing"
4342
:is-opened="isOpened"
4443
:title="$t('profile.edit.skills.mentorship.edit', { skill: skillTexts.title(skill) })"
4544
class="medium"

‎src/components/people/skill/SkillEditor.vue‎

Lines changed: 78 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import useSkillLevels from '@/composables/useSkillLevels.js'
66
import ConfirmModal from '@/components/base/modal/ConfirmModal.vue'
77
import EditMentorshipDrawer from '@/components/people/skill/EditMentorshipDrawer.vue'
88
import LpiButton from '@/components/base/button/LpiButton.vue'
9+
import ToolTip from '@/components/base/ToolTip.vue'
910
const props = defineProps({
1011
skill: { type: Object, required: true },
1112
type: { type: String, required: true }, // "skills" or "hobbies"
@@ -60,8 +61,9 @@ function onUpdateMentorship(mentorship) {
6061
<div class="level-editor">
6162
<label
6263
class="level"
64+
:class="{ active: level.value == clampLevel(skill.level) }"
6365
v-for="level in skillLevels"
64-
@click="$emit('set-level', { skill, level: level.value })"
66+
@click.prevent="$emit('set-level', { skill, level: level.value })"
6567
:key="level.value"
6668
>
6769
<input type="radio" :checked="level.value == clampLevel(skill.level)" />
@@ -70,10 +72,42 @@ function onUpdateMentorship(mentorship) {
7072
</div>
7173
<div class="mentorship">
7274
<LpiButton
75+
class="squarish"
76+
v-if="!skill.can_mentor && !skill.needs_mentor"
7377
secondary
7478
@click="editMentorship = true"
7579
:label="$t('profile.edit.skills.mentorship.choose')"
7680
/>
81+
82+
<ToolTip :content="skill.comment" v-else-if="skill.can_mentor" placement="bottom">
83+
<LpiButton
84+
class="squarish"
85+
secondary
86+
reversed-order
87+
btn-icon="ChatBubble"
88+
:label="$t('profile.edit.skills.mentorship.can-mentor')"
89+
/>
90+
</ToolTip>
91+
<ToolTip :content="skill.comment" v-else-if="skill.needs_mentor" placement="bottom">
92+
<LpiButton
93+
class="squarish"
94+
secondary
95+
reversed-order
96+
btn-icon="ChatBubble"
97+
:label="$t('profile.edit.skills.mentorship.needs-mentor')"
98+
/>
99+
</ToolTip>
100+
</div>
101+
<div class="edit-action">
102+
<LpiButton
103+
v-if="skill.can_mentor || skill.needs_mentor"
104+
secondary
105+
@click="editMentorship = true"
106+
label=""
107+
btn-icon="Pen"
108+
class="borderless"
109+
/>
110+
<span v-else>&nbsp;</span>
77111
</div>
78112
<div class="delete-action">
79113
<IconImage
@@ -105,28 +139,28 @@ function onUpdateMentorship(mentorship) {
105139
.entry {
106140
display: flex;
107141
flex-flow: row nowrap;
108-
justify-content: space-between;
142+
justify-content: stretch;
109143
gap: $space-unit;
110144
align-items: center;
111-
border-top: $border-width-s solid $lighter-gray;
145+
border-bottom: $border-width-s solid $lighter-gray;
112146
padding: $space-l 0;
113147
114148
&:last-child {
115149
border-bottom: $border-width-s solid $lighter-gray;
116150
}
117151
118152
.skill-name {
119-
font-weight: 700;
153+
font-weight: 400;
154+
flex-basis: 30%;
120155
}
121156
122157
.level-editor {
123158
display: flex;
124159
flex-flow: row nowrap;
125-
justify-content: flex-end;
160+
justify-content: center;
126161
align-items: center;
127162
gap: $space-m;
128-
flex-shrink: 0;
129-
flex-grow: 1;
163+
flex: 1 0 40%;
130164
131165
.level {
132166
display: flex;
@@ -136,7 +170,33 @@ function onUpdateMentorship(mentorship) {
136170
gap: $space-s;
137171
margin: 0;
138172
font-size: $font-size-m;
173+
border: $border-width-s solid $primary-dark;
174+
border-radius: $border-radius-s;
175+
position: relative;
176+
padding: $space-2xs $space-s;
177+
cursor: pointer;
178+
179+
.level-name {
180+
color: $primary-dark;
181+
font-weight: 400;
182+
}
183+
184+
&.active {
185+
background-color: $primary-dark;
186+
cursor: default;
187+
188+
.level-name {
189+
color: $white;
190+
font-weight: 700;
191+
}
192+
}
139193
194+
input[type='radio'] {
195+
visibility: hidden;
196+
position: absolute;
197+
}
198+
199+
/*
140200
input[type='radio'] {
141201
appearance: none;
142202
background-color: $white;
@@ -169,16 +229,20 @@ function onUpdateMentorship(mentorship) {
169229
input[type='radio']:checked::before {
170230
transform: translate(-50%, -50%) scale(1);
171231
}
172-
173-
.level-name {
174-
color: $primary-dark;
175-
font-weight: 700;
176-
}
232+
*/
177233
}
178234
}
179235
180-
.delete-action {
181-
padding: 0 $space-m;
236+
.mentorship {
237+
flex-basis: 30%;
238+
display: flex;
239+
gap: $space-unit;
240+
justify-content: center;
241+
}
242+
243+
.delete-action,
244+
.edit-action {
245+
flex-basis: $layout-size-l;
182246
flex-shrink: 0;
183247
184248
.delete-icon {

‎src/locales/en.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1356,6 +1356,7 @@
13561356
},
13571357

13581358
"mentorship": {
1359+
"mentorship": "Mentorship",
13591360
"choose": "Choose",
13601361
"edit": "Mentorship for \"{skill}\"",
13611362
"error": "Error while saving mentorship.",

‎src/locales/fr.json‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1329,25 +1329,25 @@
13291329
"notice-levels": "Indiquez votre niveau de maîtrise.",
13301330
"help-levels": "Plus à propos des niveaux de compétences"
13311331
},
1332-
"selection": "Compétences sélectionnées"
1332+
"selection": "Compétences"
13331333
},
13341334
"hobbies": {
1335-
"add-success": "Hobby '{name}' ajouté.",
1336-
"edit-success": "Hobby '{name}' édité.",
1337-
"delete-success": "Hobby '{name}' supprimé.",
1338-
"add": "Ajouter des hobbies",
1339-
"add-item": "Ajouter un hobby",
1335+
"add-success": "Loisir '{name}' ajouté.",
1336+
"edit-success": "Loisir '{name}' édité.",
1337+
"delete-success": "Loisir '{name}' supprimé.",
1338+
"add": "Ajouter des loisirs",
1339+
"add-item": "Ajouter un loisir",
13401340
"edit-levels": "Éditer les niveaux",
1341-
"levels-help": "Niveau des hobbies",
1342-
"already-added": "Hobby déjà ajouté",
1341+
"levels-help": "Niveau",
1342+
"already-added": "Loisir déjà ajouté",
13431343
"drawer": {
1344-
"title": "Ajouter des hobbies personnels",
1345-
"notice": "Tapez les premières lettres de hobby et sélectionnez celui qui vous convient",
1346-
"placeholder": "Tapez un hobby",
1347-
"notice-levels": "Indiquer votre niveau pour chaque hobby",
1348-
"help-levels": "En savoir plus sur les niveaux de hobby"
1344+
"title": "Ajouter des loisirs personnels",
1345+
"notice": "Tapez les premières lettres du loisir et sélectionnez celui qui vous convient",
1346+
"placeholder": "Tapez un loisir",
1347+
"notice-levels": "Indiquer votre niveau pour chaque loisir",
1348+
"help-levels": "En savoir plus sur les niveaux de loisir"
13491349
},
1350-
"selection": "Hobbies sélectionnés"
1350+
"selection": "Loisirs"
13511351
},
13521352
"levels": {
13531353
"curious": "Curieux",
@@ -1356,13 +1356,14 @@
13561356
"expert": "Expert"
13571357
},
13581358
"mentorship": {
1359+
"mentorship": "Mentorat",
13591360
"choose": "Choisir",
13601361
"edit": "Mentorat pour \"{skill}\"",
13611362
"error": "Erreur lors de la sauvegarde du mentorat.",
13621363
"success": "Mentorat sauvegardé",
13631364
"notice": "Vous souhaitez devenir mentor ou être mentoré pour cette compétence ? Vous déterminerez la fréquence d’échange qui vous arrange avec le/la mentoré·e ou votre mentor. Rassurez-vous, notre guide est là pour vous aider.",
13641365
"can-mentor": "Je peux être mentor",
1365-
"needs-mentor": "Je chercher un mentor",
1366+
"needs-mentor": "Je cherche un mentor",
13661367
"comment": "Commentaire",
13671368
"comment-placeholder": "Indiquez quelle aide vous pouvez offrir ou l’aide dont vous avez besoin (volume horaire, fréquence, etc...)"
13681369
},

‎src/pages/ProfileEditPage/ProfileEditPage.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<div class="my-profile-edit page-section-medium">
3+
<div class="my-profile-edit page-section-wide">
44
<h1 v-if="user && isSelf" class="title">{{ $t('profile.edit.edit-my-profile') }}</h1>
55
<h1 v-else-if="user" class="title">
66
{{ $t('profile.edit.edit-other-profile', { name: username }) }}

‎src/pages/ProfileEditPage/Tabs/ProfileSkillsEditTab.vue‎

Lines changed: 74 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -22,28 +22,35 @@
2222
<div class="following-screen" v-else>
2323
<div v-for="key in ['skills', 'hobbies']" :key="key" :class="key">
2424
<template v-if="getSkillOfType(key).length">
25-
<h3 class="talent-title">{{ $t(`profile.edit.skills.${key}.selection`) }}</h3>
26-
<div class="actions">
27-
<LinkButton
28-
:label="$filters.capitalize($t(`profile.edit.skills.${key}.add-item`))"
29-
btn-icon="Plus"
30-
@click="openDrawer(key)"
31-
:data-test="`add-${key}-button`"
32-
/>
33-
34-
<SkillLevelTip>
35-
<LinkButton
36-
:label="
37-
$filters.capitalize(
38-
$t(`profile.edit.skills.${key}.levels-help`)
39-
)
40-
"
41-
btn-icon="HelpCircle"
42-
data-test="skill-levels-help-button"
43-
/>
44-
</SkillLevelTip>
45-
</div>
4625
<TransitionGroup tag="div" name="skill" class="level-editor-list">
26+
<div class="skill-columns-header" :key="`${key}-header`">
27+
<div class="skill-name">
28+
<span class="column-label">{{
29+
$t(`profile.edit.skills.${key}.selection`)
30+
}}</span>
31+
</div>
32+
<div class="skill-level">
33+
<span class="column-label">{{
34+
$t(`profile.edit.skills.${key}.levels-help`)
35+
}}</span>
36+
<SkillLevelTip>
37+
<LinkButton
38+
label=""
39+
btn-icon="HelpCircle"
40+
data-test="skill-levels-help-button"
41+
secondary
42+
icon-only
43+
/>
44+
</SkillLevelTip>
45+
</div>
46+
<div class="mentorship">
47+
<span class="column-label">{{
48+
$t(`profile.edit.skills.mentorship.mentorship`)
49+
}}</span>
50+
</div>
51+
<div class="edit-action">&nbsp;</div>
52+
<div class="delete-action">&nbsp;</div>
53+
</div>
4754
<SkillEditor
4855
v-for="skill in getSkillOfType(key)"
4956
:key="skill.id"
@@ -56,6 +63,14 @@
5663
:scroll-into-view="lastAddedTalent === skill.id"
5764
/>
5865
</TransitionGroup>
66+
<div class="actions">
67+
<LinkButton
68+
:label="$filters.capitalize($t(`profile.edit.skills.${key}.add-item`))"
69+
btn-icon="Plus"
70+
@click="openDrawer(key)"
71+
:data-test="`add-${key}-button`"
72+
/>
73+
</div>
5974
</template>
6075
<div v-else class="add-action">
6176
<LpiButton
@@ -286,4 +301,42 @@ export default {
286301
margin-top: $space-xl;
287302
position: relative;
288303
}
304+
305+
.skill-columns-header {
306+
display: flex;
307+
justify-content: stretch;
308+
gap: $space-unit;
309+
align-items: center;
310+
padding: $space-l 0;
311+
border-bottom: $border-width-s solid $primary;
312+
313+
.column-label {
314+
font-weight: 700;
315+
text-transform: uppercase;
316+
color: $primary-dark;
317+
}
318+
319+
.skill-name {
320+
flex-basis: 30%;
321+
}
322+
323+
.skill-level {
324+
flex-basis: 40%;
325+
display: flex;
326+
align-items: center;
327+
justify-content: center;
328+
}
329+
330+
.mentorship {
331+
display: flex;
332+
justify-content: center;
333+
flex-basis: 30%;
334+
}
335+
336+
.delete-action,
337+
.edit-action {
338+
flex-shrink: 0;
339+
flex-basis: $layout-size-l;
340+
}
341+
}
289342
</style>

0 commit comments

Comments
 (0)