👌 💄 FB JH: further design improvements

Author: FabianWilms

personalization-webcomponents/src/ChecklistDetail.ce.vue

@@ -24,22 +24,23 @@
               <checklist-list
                 v-if="openCheckList.length !== 0"
                 :checklist-items="openCheckList"
+                :disabled="loadingSort || loadingCheck"
                 @checked="onCheckedOpen"
                 @sort="onSortOpen"
               ></checklist-list>
               <muc-banner
                 v-else
                 class="banner"
                 type="success"
-                >Herzlichen Glückwunsch, Sie haben alle Aufgaben erledigt! Wir
-                bewahren diese Checkliste noch bis zum {{ deletionDate }} für
-                Sie auf. Danach wird sie automatisch gelöscht.
+                >
+                Herzlichen Glückwunsch, Sie haben alle Aufgaben erledigt! Wir bewahren diese Checkliste noch bis zum {{ deletionDate }} für Sie auf. Danach wird sie automatisch gelöscht.
               </muc-banner>
               <h2 class="headline">
                 Erledigte Aufgaben ({{ closedCheckList.length }})
               </h2>
               <checklist-list
                 v-if="closedCheckList.length !== 0"
+                :disabled="loadingSort || loadingCheck"
                 :checklist-items="closedCheckList"
                 @checked="onCheckedClosed"
                 :is-draggable="false"
@@ -48,7 +49,8 @@
                 v-else
                 class="banner"
                 type="info"
-                >Sie haben noch keine erledigten Aufgaben. Haken Sie Aufgaben in
+                >
+                Sie haben noch keine erledigten Aufgaben. Haken Sie Aufgaben in
                 der Checkliste ab, um sie als erledigt zu markieren.
               </muc-banner>
             </div>
@@ -78,6 +80,8 @@ import { QUERY_PARAM_CHECKLIST_ID, setAccessToken } from "@/util/Constants.ts";
 
 const checklist = ref<Checklist | null>(null);
 const loading = ref(true);
+const loadingSort = ref(false);
+const loadingCheck = ref(false);
 
 const { loggedIn } = useDBSLoginWebcomponentPlugin(_authChangedCallback);
 
@@ -152,7 +156,7 @@ const deletionDate = computed(() => {
 
 function onCheckedOpen(serviceID: string) {
   if (checklist.value) {
-    loading.value = true;
+    loadingCheck.value = true;
     const service = new ChecklistService();
     service
       .checkChecklistentry(checklist.value.id, serviceID)
@@ -170,13 +174,13 @@ function onCheckedOpen(serviceID: string) {
       .catch((err) => {
         console.debug(err);
       })
-      .finally(() => (loading.value = false));
+      .finally(() => (loadingCheck.value = false));
   }
 }
 
 function onCheckedClosed(serviceID: string) {
   if (checklist.value) {
-    loading.value = true;
+    loadingCheck.value = true;
     const service = new ChecklistService();
     service
       .uncheckChecklistentry(checklist.value.id, serviceID)
@@ -194,7 +198,7 @@ function onCheckedClosed(serviceID: string) {
       .catch((err) => {
         console.debug(err);
       })
-      .finally(() => (loading.value = false));
+      .finally(() => (loadingCheck.value = false));
   }
 }
 
@@ -211,7 +215,7 @@ function onSortOpen(evt: { oldIndex: number; newIndex: number }) {
     return item.serviceID === elementToSort.serviceID;
   }) as number;
   if (oldIndex >= 0 && checklist.value) {
-    loading.value = true;
+    loadingSort.value = true;
 
     const newIndex = oldIndex + (evt.newIndex - evt.oldIndex);
     const element = checklist.value.checklistItems[oldIndex] as ChecklistItem;
@@ -235,7 +239,7 @@ function onSortOpen(evt: { oldIndex: number; newIndex: number }) {
       .catch((err) => {
         console.debug(err);
       })
-      .finally(() => (loading.value = false));
+      .finally(() => (loadingSort.value = false));
   }
 }
 </script>

personalization-webcomponents/src/components/ChecklistList.vue

@@ -29,8 +29,10 @@
         >
           <p13n-checkbox
             :id="'cb-' + element.serviceID"
+            :aria-label="!!element.checked ? element.title + ' als nicht erledigt markieren.' : element.title + ' als erledigt markieren.'"
             :checked="!!element.checked"
             :disabled="disabled"
+            style="margin-left: 8px;"
             @check="() => onSelectChange(element.serviceID)"
           />
           <span
@@ -191,23 +193,24 @@ function handleArrowKeyDown(event: KeyboardEvent) {
   background-color: #d0e7ff;
 }
 
-.container {
-  max-width: 600px;
-  margin: 1rem auto;
-  padding-left: 0;
-}
-
 .list {
   list-style: none;
   padding: 0;
   margin: 0;
-  border-top: 1px solid #ddd;
+  border-top: 1px solid var(--color-neutrals-beau-blue-light, #E5EEF5);
+  border-bottom: 1px solid var(--color-neutrals-beau-blue-light, #E5EEF5);
+}
+
+.container {
+  padding-left: 0;
+  padding-right: 0;
+  padding-bottom: 56px;
 }
 
 .list-item {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--color-neutrals-beau-blue-light, #E5EEF5);
   user-select: none;
   cursor: grab;
   color: var(--color-brand-main-blue);
@@ -241,7 +244,7 @@ function handleArrowKeyDown(event: KeyboardEvent) {
   text-decoration: underline;
 }
 
-@media (max-width: 450px) {
+@media (max-width: 576px) {
   .label-text {
     padding: 12px 8px;
   }

personalization-webcomponents/src/components/P13nCheckbox.vue

@@ -4,8 +4,9 @@
       tabindex="0"
       class="radio-look"
       :disabled="disabled"
+      :aria-disabled="disabled"
       :checked="checked"
-      @click="emit('check')"
+      @click="!disabled ? emit('check') : null"
       @keydown="(evt) => evt.keyCode == 32 ? emit('check') : null"
   >
     <muc-icon
@@ -64,19 +65,24 @@ const emit = defineEmits(["check"])
   transition: opacity 0.3s ease;
 }
 
-.radio-look[checked]:hover, .radio-look[checked]:focus {
+.radio-look[disabled=true] {
+  border-color: var(--color-neutrals-grey);
+  background: var(--gray-x-light, #9CA8B3);
+}
+
+.radio-look[checked][disabled=false]:hover, .radio-look[checked][disabled=false]:focus {
   border-color: var(--color-brand-main-blue);
   background-color: var(--color-neutrals-blue);
 }
 
-.radio-look[checked=false]:hover .check-icon, .radio-look[checked=false]:focus .check-icon {
+.radio-look[checked=false][disabled=false]:hover .check-icon, .radio-look[checked=false][disabled=false]:focus .check-icon {
   opacity: 1;
 }
-.radio-look[checked=true]:hover .check-icon, .radio-look[checked=true]:focus .check-icon {
+.radio-look[checked=true][disabled=false]:hover .check-icon, .radio-look[checked=true][disabled=false]:focus .check-icon {
   opacity: 0;
 }
 
-.radio-look[checked=true] {
+.radio-look[checked=true][disabled=false] {
   border-color: var(--color-brand-main-blue-dark, #004376);
   background-color: var(--color-brand-main-blue)
 }