Skip to content

Commit ccde924

Browse files
SultanTheHLSultanTheHL
committed
Assessment: position change for manual feedback
1 parent 444fd5d commit ccde924

1 file changed

Lines changed: 150 additions & 84 deletions

File tree

‎src/main/webapp/app/assessment/manage/unreferenced-feedback-detail/unreferenced-feedback-detail.component.html‎

Lines changed: 150 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -12,101 +12,167 @@
1212
</div>
1313
}
1414

15-
<div class="flex min-w-0 items-center justify-between gap-2">
16-
<!-- Read-only points (linked instruction / read-only card) render as a colored pill; editable points as a stepper. -->
17-
@if (pointsDisabled()) {
18-
<tum-ui-tag class="text-base" [severity]="pointsSeverityFor(feedback().credits)" [value]="pointsLabelFor(feedback().credits)" />
19-
} @else {
20-
<tum-ui-input-group class="w-auto">
21-
<tum-ui-input-group-addon>
22-
<button
23-
type="button"
24-
class="feedback-card__step flex self-stretch cursor-pointer items-center justify-center border-0 bg-transparent text-inherit"
25-
[attr.aria-label]="'artemisApp.assessment.detail.decreasePoints' | artemisTranslate"
26-
(click)="stepCredits(-CREDITS_STEP)"
27-
>
28-
<fa-icon [icon]="faMinus" />
29-
</button>
30-
</tum-ui-input-group-addon>
31-
<input
32-
[id]="pointsInputId"
33-
tumUiInput
34-
class="feedback-card__points-input w-18 rounded-none text-center font-semibold"
35-
type="number"
36-
[step]="CREDITS_STEP"
37-
[ngModel]="feedback().credits"
38-
(ngModelChange)="updateCredits($event)"
39-
[attr.aria-label]="'artemisApp.exercise.score' | artemisTranslate"
40-
/>
41-
<tum-ui-input-group-addon>
42-
<button
43-
type="button"
44-
class="feedback-card__step flex self-stretch cursor-pointer items-center justify-center border-0 bg-transparent text-inherit"
45-
[attr.aria-label]="'artemisApp.assessment.detail.increasePoints' | artemisTranslate"
46-
(click)="stepCredits(CREDITS_STEP)"
47-
>
48-
<fa-icon [icon]="faPlus" />
49-
</button>
50-
</tum-ui-input-group-addon>
51-
</tum-ui-input-group>
52-
}
53-
54-
<div class="flex min-w-0 flex-wrap items-center gap-1.5">
55-
<!-- Accept/Discard for feedback suggestions -->
56-
@if (isSuggestion()) {
57-
<tum-ui-button severity="success" size="small" [icon]="faCheck" (clicked)="onAcceptSuggestion.emit(feedback())">
58-
<span jhiTranslate="artemisApp.assessment.detail.accept"></span>
59-
</tum-ui-button>
60-
<tum-ui-button severity="danger" size="small" variant="outlined" [icon]="faTrash" (clicked)="onDiscardSuggestion.emit(feedback())">
61-
<span jhiTranslate="artemisApp.assessment.detail.discard"></span>
62-
</tum-ui-button>
63-
}
64-
@if (!readOnly()) {
65-
<button
66-
jhiDeleteButton
67-
tumUiButton
68-
severity="secondary"
69-
variant="outlined"
70-
size="small"
71-
[buttonSize]="ButtonSize.SMALL"
72-
[translateValues]="{ text: this.feedback() | feedbackContent | quoted: ' ' }"
73-
deleteQuestion="artemisApp.feedback.delete.question"
74-
(delete)="delete()"
75-
[dialogError]="dialogError$"
76-
[renderButtonStyle]="false"
77-
[renderButtonText]="false"
78-
>
79-
<fa-icon class="text-state-danger" [icon]="faTrashAlt" />
80-
</button>
81-
}
82-
</div>
83-
</div>
84-
8515
@if (showHeaderSection()) {
16+
<!-- Title above; input + points + actions share one row so controls align with the field. -->
8617
<div class="flex min-w-0 flex-col gap-1">
8718
@if (headerReadOnly()) {
8819
<span class="text-muted-color text-[0.6875rem] font-bold tracking-[0.05em] uppercase" jhiTranslate="artemisApp.assessment.detail.feedbackHeader"></span>
89-
@if (displayTitle(); as title) {
90-
<p class="m-0 min-w-0 text-sm font-semibold whitespace-pre-wrap">{{ title }}</p>
91-
}
9220
} @else {
9321
<label
9422
class="text-muted-color text-[0.6875rem] font-bold tracking-[0.05em] uppercase"
9523
[attr.for]="headerInputId"
9624
jhiTranslate="artemisApp.assessment.detail.feedbackHeader"
9725
></label>
98-
<input
99-
[id]="headerInputId"
100-
tumUiInput
101-
class="feedback-card__header-input box-border w-full max-w-full"
102-
type="text"
103-
[ngModel]="displayTitle() ?? ''"
104-
(ngModelChange)="updateHeaderTitle($event)"
105-
[readOnly]="readOnly()"
106-
[disabled]="readOnly()"
107-
[placeholder]="'artemisApp.assessment.feedbackHeaderPlaceholder' | artemisTranslate"
108-
/>
10926
}
27+
<div class="flex min-w-0 items-center gap-2">
28+
@if (headerReadOnly()) {
29+
@if (displayTitle(); as title) {
30+
<p class="m-0 min-w-0 flex-1 text-sm font-semibold whitespace-pre-wrap">{{ title }}</p>
31+
}
32+
} @else {
33+
<input
34+
[id]="headerInputId"
35+
tumUiInput
36+
class="feedback-card__header-input box-border min-w-0 flex-1"
37+
type="text"
38+
[ngModel]="displayTitle() ?? ''"
39+
(ngModelChange)="updateHeaderTitle($event)"
40+
[readOnly]="readOnly()"
41+
[disabled]="readOnly()"
42+
[placeholder]="'artemisApp.assessment.feedbackHeaderPlaceholder' | artemisTranslate"
43+
/>
44+
}
45+
@if (pointsDisabled()) {
46+
<tum-ui-tag class="shrink-0 text-base" [severity]="pointsSeverityFor(feedback().credits)" [value]="pointsLabelFor(feedback().credits)" />
47+
} @else {
48+
<tum-ui-input-group class="w-auto shrink-0">
49+
<tum-ui-input-group-addon>
50+
<button
51+
type="button"
52+
class="feedback-card__step flex self-stretch cursor-pointer items-center justify-center border-0 bg-transparent text-inherit"
53+
[attr.aria-label]="'artemisApp.assessment.detail.decreasePoints' | artemisTranslate"
54+
(click)="stepCredits(-CREDITS_STEP)"
55+
>
56+
<fa-icon [icon]="faMinus" />
57+
</button>
58+
</tum-ui-input-group-addon>
59+
<input
60+
[id]="pointsInputId"
61+
tumUiInput
62+
class="feedback-card__points-input w-18 rounded-none text-center font-semibold"
63+
type="number"
64+
[step]="CREDITS_STEP"
65+
[ngModel]="feedback().credits"
66+
(ngModelChange)="updateCredits($event)"
67+
[attr.aria-label]="'artemisApp.exercise.score' | artemisTranslate"
68+
/>
69+
<tum-ui-input-group-addon>
70+
<button
71+
type="button"
72+
class="feedback-card__step flex self-stretch cursor-pointer items-center justify-center border-0 bg-transparent text-inherit"
73+
[attr.aria-label]="'artemisApp.assessment.detail.increasePoints' | artemisTranslate"
74+
(click)="stepCredits(CREDITS_STEP)"
75+
>
76+
<fa-icon [icon]="faPlus" />
77+
</button>
78+
</tum-ui-input-group-addon>
79+
</tum-ui-input-group>
80+
}
81+
@if (isSuggestion()) {
82+
<tum-ui-button severity="success" size="small" [icon]="faCheck" (clicked)="onAcceptSuggestion.emit(feedback())">
83+
<span jhiTranslate="artemisApp.assessment.detail.accept"></span>
84+
</tum-ui-button>
85+
<tum-ui-button severity="danger" size="small" variant="outlined" [icon]="faTrash" (clicked)="onDiscardSuggestion.emit(feedback())">
86+
<span jhiTranslate="artemisApp.assessment.detail.discard"></span>
87+
</tum-ui-button>
88+
}
89+
@if (!readOnly()) {
90+
<button
91+
jhiDeleteButton
92+
tumUiButton
93+
severity="secondary"
94+
variant="outlined"
95+
size="small"
96+
class="shrink-0"
97+
[buttonSize]="ButtonSize.SMALL"
98+
[translateValues]="{ text: this.feedback() | feedbackContent | quoted: ' ' }"
99+
deleteQuestion="artemisApp.feedback.delete.question"
100+
(delete)="delete()"
101+
[dialogError]="dialogError$"
102+
[renderButtonStyle]="false"
103+
[renderButtonText]="false"
104+
>
105+
<fa-icon class="text-state-danger" [icon]="faTrashAlt" />
106+
</button>
107+
}
108+
</div>
109+
</div>
110+
} @else {
111+
<div class="flex min-w-0 items-center justify-between gap-2">
112+
@if (pointsDisabled()) {
113+
<tum-ui-tag class="text-base" [severity]="pointsSeverityFor(feedback().credits)" [value]="pointsLabelFor(feedback().credits)" />
114+
} @else {
115+
<tum-ui-input-group class="w-auto">
116+
<tum-ui-input-group-addon>
117+
<button
118+
type="button"
119+
class="feedback-card__step flex self-stretch cursor-pointer items-center justify-center border-0 bg-transparent text-inherit"
120+
[attr.aria-label]="'artemisApp.assessment.detail.decreasePoints' | artemisTranslate"
121+
(click)="stepCredits(-CREDITS_STEP)"
122+
>
123+
<fa-icon [icon]="faMinus" />
124+
</button>
125+
</tum-ui-input-group-addon>
126+
<input
127+
[id]="pointsInputId"
128+
tumUiInput
129+
class="feedback-card__points-input w-18 rounded-none text-center font-semibold"
130+
type="number"
131+
[step]="CREDITS_STEP"
132+
[ngModel]="feedback().credits"
133+
(ngModelChange)="updateCredits($event)"
134+
[attr.aria-label]="'artemisApp.exercise.score' | artemisTranslate"
135+
/>
136+
<tum-ui-input-group-addon>
137+
<button
138+
type="button"
139+
class="feedback-card__step flex self-stretch cursor-pointer items-center justify-center border-0 bg-transparent text-inherit"
140+
[attr.aria-label]="'artemisApp.assessment.detail.increasePoints' | artemisTranslate"
141+
(click)="stepCredits(CREDITS_STEP)"
142+
>
143+
<fa-icon [icon]="faPlus" />
144+
</button>
145+
</tum-ui-input-group-addon>
146+
</tum-ui-input-group>
147+
}
148+
<div class="flex shrink-0 flex-wrap items-center gap-1.5">
149+
@if (isSuggestion()) {
150+
<tum-ui-button severity="success" size="small" [icon]="faCheck" (clicked)="onAcceptSuggestion.emit(feedback())">
151+
<span jhiTranslate="artemisApp.assessment.detail.accept"></span>
152+
</tum-ui-button>
153+
<tum-ui-button severity="danger" size="small" variant="outlined" [icon]="faTrash" (clicked)="onDiscardSuggestion.emit(feedback())">
154+
<span jhiTranslate="artemisApp.assessment.detail.discard"></span>
155+
</tum-ui-button>
156+
}
157+
@if (!readOnly()) {
158+
<button
159+
jhiDeleteButton
160+
tumUiButton
161+
severity="secondary"
162+
variant="outlined"
163+
size="small"
164+
[buttonSize]="ButtonSize.SMALL"
165+
[translateValues]="{ text: this.feedback() | feedbackContent | quoted: ' ' }"
166+
deleteQuestion="artemisApp.feedback.delete.question"
167+
(delete)="delete()"
168+
[dialogError]="dialogError$"
169+
[renderButtonStyle]="false"
170+
[renderButtonText]="false"
171+
>
172+
<fa-icon class="text-state-danger" [icon]="faTrashAlt" />
173+
</button>
174+
}
175+
</div>
110176
</div>
111177
}
112178

0 commit comments

Comments
 (0)