Skip to content

Commit 7a40cf5

Browse files
FabianWilmsFabianWilms
committed
👌 💄 FB JH: First feedback solved
1 parent 461a42e commit 7a40cf5

File tree

2 files changed

+137
-71
lines changed

2 files changed

+137
-71
lines changed

‎personalization-webcomponents/src/components/ChecklistList.vue‎

Lines changed: 46 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@
1818
role="listitem"
1919
aria-roledescription="sortierbares Listenelement"
2020
:class="{
21-
muted: element.checked !== null,
2221
'keyboard-dragging': draggedIndex === index,
2322
}"
2423
:aria-grabbed="draggedIndex === index ? 'true' : 'false'"
@@ -28,20 +27,28 @@
2827
:key="element.serviceID"
2928
@keydown="handleEnterKeyDown"
3029
>
31-
<input
32-
type="checkbox"
30+
<p13n-checkbox
3331
:id="'cb-' + element.serviceID"
34-
class="radio-look"
35-
:checked="element.checked !== null"
32+
:checked="!!element.checked"
3633
:disabled="disabled"
37-
@change="() => onSelectChange(element.serviceID)"
34+
@check="() => onSelectChange(element.serviceID)"
3835
/>
3936
<span
37+
tabindex="0"
4038
class="label-text"
41-
@click.prevent="openDialog(element)"
42-
style="cursor: pointer"
39+
:class="{
40+
muted: element.checked !== null,
41+
}"
42+
@click="(evt) => openDialog(element, evt)"
43+
@keydown="(evt) => evt.keyCode == 32 ? openDialog(element, evt) : null"
4344
>
4445
<b>{{ element.title }}</b>
46+
<span
47+
class="required-label"
48+
v-if="element.required"
49+
>
50+
- verpflichtend
51+
</span>
4552
</span>
4653
<span
4754
v-if="isDraggable"
@@ -81,6 +88,7 @@ import type ChecklistItem from "@/api/persservice/ChecklistItem.ts";
8188
import { MucIcon } from "@muenchen/muc-patternlab-vue";
8289
import { Sortable } from "sortablejs-vue3";
8390
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
91+
import P13nCheckbox from "@/components/P13nCheckbox.vue";
8492
8593
const props = withDefaults(
8694
defineProps<{
@@ -120,7 +128,8 @@ function onSelectChange(serviceID: string) {
120128
emit("checked", serviceID);
121129
}
122130
123-
function openDialog(item: ChecklistItem) {
131+
function openDialog(item: ChecklistItem, evt: Event) {
132+
evt.preventDefault();
124133
dialogItem.value = item;
125134
dialogVisible.value = true;
126135
emit("label-click", item);
@@ -198,7 +207,6 @@ function handleArrowKeyDown(event: KeyboardEvent) {
198207
.list-item {
199208
display: flex;
200209
align-items: center;
201-
padding: 0.5rem 1rem;
202210
border-bottom: 1px solid #ddd;
203211
user-select: none;
204212
cursor: grab;
@@ -211,75 +219,32 @@ function handleArrowKeyDown(event: KeyboardEvent) {
211219
212220
/* text grayed out when selected */
213221
.muted {
214-
color: #7a8d9f;
222+
color: #7a8d9f !important;
215223
}
216224
217-
.radio-look {
218-
appearance: none;
219-
-webkit-appearance: none;
220-
flex: 0 0 16px;
221-
width: 16px;
222-
height: 16px;
223-
border: 2px solid var(--color-neutrals-grey);
224-
border-radius: 50%;
225-
background: white;
226-
box-sizing: border-box;
227-
margin-right: 0.8rem;
228-
position: relative;
225+
.label-text {
229226
cursor: pointer;
230-
outline-offset: 2px;
231-
transition:
232-
border-color 0.2s ease,
233-
background-color 0.2s ease;
234-
}
235-
236-
.radio-look:hover {
237-
border-color: var(--color-brand-main-blue);
238-
background-color: #cce4ff;
239-
}
240-
241-
.radio-look:hover::before {
242-
content: "";
243-
position: absolute;
244-
top: 50%;
245-
left: 50%;
246-
width: 10px;
247-
height: 10px;
248-
background-color: var(--color-brand-main-blue);
249-
border-radius: 50%;
250-
transform: translate(-50%, -50%);
251-
opacity: 0.3;
252-
pointer-events: none;
253-
transition: opacity 0.2s ease;
254-
}
255-
256-
.radio-look:checked {
257-
border-color: var(--color-brand-main-blue);
258-
background-color: var(--color-brand-main-blue);
259-
}
260-
261-
.radio-look:checked::before {
262-
content: "✓";
263-
position: absolute;
264-
top: 50%;
265-
left: 50%;
266-
color: white;
267-
font-weight: bold;
268-
font-size: 14px;
269-
line-height: 1;
270-
transform: translate(-50%, -45%);
271-
pointer-events: none;
227+
color: var(--color-brand-main-blue);
228+
/* Body/Body 1 Bold */
229+
font-family: "Open Sans", sans-serif;
230+
font-size: 18px;
231+
font-style: normal;
232+
font-weight: 700;
233+
line-height: 150%; /* 27px */
234+
235+
padding: 16px 8px;
236+
flex-grow: 1;
272237
user-select: none;
273-
transition: color 0.2s ease;
274238
}
275239
276-
.radio-look:checked:hover::before {
277-
opacity: 0.8;
240+
.label-text:hover {
241+
text-decoration: underline;
278242
}
279243
280-
.label-text {
281-
flex-grow: 1;
282-
user-select: none;
244+
@media (max-width: 450px) {
245+
.label-text {
246+
padding: 12px 8px;
247+
}
283248
}
284249
285250
.drag-handle {
@@ -320,4 +285,14 @@ function handleArrowKeyDown(event: KeyboardEvent) {
320285
overflow-y: auto;
321286
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
322287
}
288+
289+
.required-label {
290+
color: var(--neutrals-grey, #3A5368);
291+
/* Body/Body 2 */
292+
font-family: "Open Sans", sans-serif;
293+
font-size: 16px;
294+
font-style: normal;
295+
font-weight: 400;
296+
line-height: 150%;
297+
}
323298
</style>

‎personalization-webcomponents/src/components/P13nCheckbox.vue‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<template>
2+
3+
<div
4+
tabindex="0"
5+
class="radio-look"
6+
:disabled="disabled"
7+
:checked="checked"
8+
@click="emit('check')"
9+
@keydown="(evt) => evt.keyCode == 32 ? emit('check') : null"
10+
>
11+
<muc-icon
12+
class="icon check-icon"
13+
icon="check"
14+
:color="checked ? 'white' : 'var(--color-neutrals-blue)'"
15+
/>
16+
</div>
17+
</template>
18+
19+
<script lang="ts" setup>
20+
import {MucIcon} from "@muenchen/muc-patternlab-vue";
21+
22+
const props = withDefaults(
23+
defineProps<{
24+
checked?: boolean;
25+
disabled?: boolean;
26+
}>(),
27+
{
28+
checked: false,
29+
disabled: false,
30+
}
31+
);
32+
33+
const emit = defineEmits(["check"])
34+
</script>
35+
36+
<style scoped>
37+
.radio-look {
38+
--radio-button-size: 24px;
39+
--radio-button-border-width: 2px;
40+
41+
display: inline-block;
42+
appearance: none;
43+
-webkit-appearance: none;
44+
flex: 0 0 auto;
45+
width: var(--radio-button-size);
46+
height: var(--radio-button-size);
47+
border: var(--radio-button-border-width) solid var(--color-neutrals-grey);
48+
border-radius: var(--radio-button-size);
49+
background: white;
50+
box-sizing: border-box;
51+
position: relative;
52+
cursor: pointer;
53+
outline-offset: var(--radio-button-border-width);
54+
transition: border-color 0.3s ease,
55+
background-color 0.3s ease;
56+
}
57+
58+
.check-icon {
59+
display: block;
60+
margin: auto;
61+
width: calc(var(--radio-button-size) - (2*var(--radio-button-border-width)));
62+
height: calc(var(--radio-button-size) - (2*var(--radio-button-border-width)));
63+
opacity: 0;
64+
transition: opacity 0.3s ease;
65+
}
66+
67+
.radio-look[checked]:hover, .radio-look[checked]:focus {
68+
border-color: var(--color-brand-main-blue);
69+
background-color: var(--color-neutrals-blue);
70+
}
71+
72+
.radio-look[checked=false]:hover .check-icon, .radio-look[checked=false]:focus .check-icon {
73+
opacity: 1;
74+
}
75+
.radio-look[checked=true]:hover .check-icon, .radio-look[checked=true]:focus .check-icon {
76+
opacity: 0;
77+
}
78+
79+
.radio-look[checked=true] {
80+
border-color: var(--color-brand-main-blue-dark, #004376);
81+
background-color: var(--color-brand-main-blue)
82+
}
83+
84+
.radio-look[checked=true] .check-icon {
85+
opacity: 1;
86+
}
87+
88+
89+
</style>
90+
<script setup lang="ts">
91+
</script>

0 commit comments

Comments
 (0)