Skip to content

Commit e6df2fa

Browse files
rasmirasmi
committed
Nicer editor styling.
1 parent aeced5b commit e6df2fa

3 files changed

Lines changed: 85 additions & 84 deletions

File tree

‎frontend/src/components/stages/profile_stage_editor.scss‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,27 @@
77
height: 100%;
88
}
99

10-
.checkbox-wrapper {
10+
.profile-option {
1111
@include common.flex-row-align-center;
12-
gap: common.$spacing-medium;
12+
cursor: pointer;
13+
gap: common.$spacing-small;
1314
}
1415

15-
md-checkbox {
16-
flex-shrink: 0;
16+
.divider {
17+
border-bottom: 1px solid var(--md-sys-color-outline-variant);
1718
}
1819

19-
.profile-options {
20-
@include common.flex-column;
21-
gap: common.$spacing-medium;
20+
.title {
21+
@include typescale.title-medium;
22+
color: var(--md-sys-color-secondary);
2223
}
2324

24-
.profile-option {
25+
.checkbox-wrapper {
2526
@include common.flex-row-align-center;
27+
cursor: pointer;
2628
gap: common.$spacing-small;
29+
}
2730

28-
label {
29-
cursor: pointer;
30-
}
31+
md-checkbox {
32+
flex-shrink: 0;
3133
}

‎frontend/src/components/stages/profile_stage_editor.ts‎

Lines changed: 71 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -62,79 +62,78 @@ export class ProfileStageEditorComponent extends MobxLitElement {
6262
});
6363
};
6464

65+
const isAnonymous =
66+
this.stage.profileType === ProfileType.ANONYMOUS_ANIMAL ||
67+
this.stage.profileType === ProfileType.ANONYMOUS_PARTICIPANT;
68+
6569
return html`
66-
<div class="profile-options">
67-
<div class="profile-option">
68-
<md-radio
69-
name="profile-type"
70-
value="default"
71-
?checked=${this.stage.profileType === ProfileType.DEFAULT}
72-
?disabled=${!this.experimentEditor.canEditStages}
73-
@change=${() => handleProfileTypeChange(ProfileType.DEFAULT)}
74-
></md-radio>
75-
<label>Let participants set their own profiles</label>
76-
</div>
77-
<div class="profile-option">
78-
<md-radio
79-
name="profile-type"
80-
value="default-gendered"
81-
?checked=${this.stage.profileType === ProfileType.DEFAULT_GENDERED}
82-
?disabled=${!this.experimentEditor.canEditStages}
83-
@change=${() =>
84-
handleProfileTypeChange(ProfileType.DEFAULT_GENDERED)}
85-
></md-radio>
86-
<label>Let participants choose from the default gendered set</label>
87-
</div>
88-
<div class="profile-option">
89-
<md-radio
90-
name="profile-type"
91-
value="animal"
92-
?checked=${this.stage.profileType === ProfileType.ANONYMOUS_ANIMAL}
93-
?disabled=${!this.experimentEditor.canEditStages}
94-
@change=${() =>
95-
handleProfileTypeChange(ProfileType.ANONYMOUS_ANIMAL)}
96-
></md-radio>
97-
<label>🐱 Generate anonymous animal-themed profiles</label>
98-
</div>
99-
${this.stage.profileType === ProfileType.ANONYMOUS_ANIMAL
100-
? html`
101-
<label class="checkbox-wrapper">
102-
<md-checkbox
103-
touch-target="wrapper"
104-
?checked=${this.stage.informalNameStyle}
105-
?disabled=${!this.experimentEditor.canEditStages}
106-
@click=${() => {
107-
if (!this.stage) return;
108-
this.experimentEditor.updateStage({
109-
...this.stage,
110-
informalNameStyle: !this.stage.informalNameStyle,
111-
});
112-
}}
113-
>
114-
</md-checkbox>
115-
<span
116-
>Use informal name style (e.g., bear123 instead of Bear
117-
1002)</span
118-
>
119-
</label>
120-
`
121-
: nothing}
122-
<div class="profile-option">
123-
<md-radio
124-
name="profile-type"
125-
value="participant"
126-
?checked=${this.stage.profileType ===
127-
ProfileType.ANONYMOUS_PARTICIPANT}
128-
?disabled=${!this.experimentEditor.canEditStages}
129-
@change=${() =>
130-
handleProfileTypeChange(ProfileType.ANONYMOUS_PARTICIPANT)}
131-
></md-radio>
132-
<label
133-
>👤 Generate anonymous participant profiles (Participant 1, 2,
134-
...)</label
135-
>
136-
</div>
137-
</div>
70+
<div class="title">Participant-created profiles</div>
71+
<label class="profile-option">
72+
<md-radio
73+
name="profile-type"
74+
value="default"
75+
?checked=${this.stage.profileType === ProfileType.DEFAULT}
76+
?disabled=${!this.experimentEditor.canEditStages}
77+
@change=${() => handleProfileTypeChange(ProfileType.DEFAULT)}
78+
></md-radio>
79+
Let participants set their own profiles
80+
</label>
81+
<label class="profile-option">
82+
<md-radio
83+
name="profile-type"
84+
value="default-gendered"
85+
?checked=${this.stage.profileType === ProfileType.DEFAULT_GENDERED}
86+
?disabled=${!this.experimentEditor.canEditStages}
87+
@change=${() => handleProfileTypeChange(ProfileType.DEFAULT_GENDERED)}
88+
></md-radio>
89+
Let participants choose from the default gendered set
90+
</label>
91+
<div class="divider"></div>
92+
<div class="title">Anonymous profiles</div>
93+
<label class="profile-option">
94+
<md-radio
95+
name="profile-type"
96+
value="animal"
97+
?checked=${this.stage.profileType === ProfileType.ANONYMOUS_ANIMAL}
98+
?disabled=${!this.experimentEditor.canEditStages}
99+
@change=${() => handleProfileTypeChange(ProfileType.ANONYMOUS_ANIMAL)}
100+
></md-radio>
101+
🐱 Generate anonymous animal-themed profiles
102+
</label>
103+
<label class="profile-option">
104+
<md-radio
105+
name="profile-type"
106+
value="participant"
107+
?checked=${this.stage.profileType ===
108+
ProfileType.ANONYMOUS_PARTICIPANT}
109+
?disabled=${!this.experimentEditor.canEditStages}
110+
@change=${() =>
111+
handleProfileTypeChange(ProfileType.ANONYMOUS_PARTICIPANT)}
112+
></md-radio>
113+
👤 Generate anonymous participant profiles (Participant 1, 2, ...)
114+
</label>
115+
${isAnonymous
116+
? html`
117+
<label class="checkbox-wrapper">
118+
<md-checkbox
119+
touch-target="wrapper"
120+
?checked=${this.stage.informalNameStyle}
121+
?disabled=${!this.experimentEditor.canEditStages}
122+
@click=${() => {
123+
if (!this.stage) return;
124+
this.experimentEditor.updateStage({
125+
...this.stage,
126+
informalNameStyle: !this.stage.informalNameStyle,
127+
});
128+
}}
129+
>
130+
</md-checkbox>
131+
<span
132+
>Use informal name style (e.g., bear123 or participant123)</span
133+
>
134+
</label>
135+
`
136+
: nothing}
138137
`;
139138
}
140139
}

‎utils/src/participant.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,7 @@ export function setProfile(
223223
[PROFILE_SET_ANIMALS_2_ID]: profileFromSet(PROFILE_SET_ANIMALS_2),
224224
[PROFILE_SET_NATURE_ID]: profileFromSet(PROFILE_SET_NATURE),
225225
[PROFILE_SET_ANONYMOUS_PARTICIPANT_ID]: {
226-
name: `Participant ${randomNumber}`,
226+
name: formatName('Participant'),
227227
avatar: '👤',
228228
repeat: 0,
229229
},

0 commit comments

Comments
 (0)