69-add-color-to-time-slots

src/app/persons/components/person-view/person-view.component.html

@@ -12,28 +12,44 @@ <h4 class="person-view-title">{{ person().name }}</h4>
         <p class="person-view-info">{{ person().info }}</p>
       </div>
 
-      <div class="person-view-knowledge">
-        @for (knowledge of person().priorKnowledge; track knowledge.priorKnowledge.id) {
-          <div [class]="dotCSSClass(knowledge.priorKnowledge.color)"
-               [ngbTooltip]="tooltip"
-               [tooltipClass]="tooltipCSSClass(knowledge.priorKnowledge.color)">
+      <div class="flex-grow-1"></div>
+
+      <div class="hstack gap-2">
+        @if (person().priorKnowledge.length > 0) {
+          <div class="person-view-knowledge">
+            @for (knowledge of person().priorKnowledge; track knowledge.priorKnowledge.id) {
+              <div [class]="dotCSSClass(knowledge.priorKnowledge.color)"
+                   [ngbTooltip]="tooltip"
+                   [tooltipClass]="tooltipCSSClass(knowledge.priorKnowledge.color)">
+              </div>
+
+              <ng-template #tooltip>
+                <div><strong>{{ knowledge.priorKnowledge.name }}: </strong></div>
+                <div>{{ knowledge.remark }}</div>
+              </ng-template>
+            }
           </div>
 
-          <ng-template #tooltip>
-            <div><strong>{{ knowledge.priorKnowledge.name }}: </strong></div>
-            <div>{{ knowledge.remark }}</div>
-          </ng-template>
+          <div class="vr"></div>
         }
+
+        <div class="person-view-timeslots-info">
+          @for (slot of person().timeSlots; track slot.timeSlot.id) {
+            <div [class]="dotCSSClass(slot.timeSlot.color)"
+                 [ngbTooltip]="slot.timeSlot.description"
+                 [tooltipClass]="tooltipCSSClass(slot.timeSlot.color)">
+            </div>
+          }
+        </div>
       </div>
 
       <div class="person-view-slots">
         @for (slotPriority of slotKeys; track $index) {
           <div class="person-view-slot">
             <span class="slot-priority">{{ slotPriority }}</span>
             @for (slot of slots().get(slotPriority); track slot.timeSlot.id) {
-              <div class="badge bg-light text-primary rounded-pill me-2">
-                {{ slot.timeSlot.description }}
-              </div>
+              <app-time-slot-pill [timeSlot]="slot.timeSlot"
+                                  class="me-2"/>
             }
           </div>
         }
@@ -42,9 +58,9 @@ <h4 class="person-view-title">{{ person().name }}</h4>
 
     <div class="person-view-timeslots-info">
       @for (slot of person().timeSlots; track slot.timeSlot.id) {
-        <div class="badge bg-light text-primary rounded-pill me-2"
-             [class.preferred]="(slot.priority || 0) === 1">
-          {{ slot.timeSlot.description }}
+        <div [class]="dotCSSClass(slot.timeSlot.color)"
+             [ngbTooltip]="slot.timeSlot.description"
+             [tooltipClass]="tooltipCSSClass(slot.timeSlot.color)">
         </div>
       }
     </div>

src/app/persons/components/person-view/person-view.component.ts

@@ -7,6 +7,7 @@ import {NgbDropdown, NgbDropdownItem, NgbDropdownMenu, NgbDropdownToggle, NgbToo
 import {timeCompare} from '../../../shared/helper/comparison';
 import {PriorKnowledgePillComponent} from '../../../prior-knowledge/components/prior-knowledge-pill/prior-knowledge-pill.component';
 import {dotCSSClass, tooltipCSSClass} from '../../../shared/data/default-colors.data';
+import {TimeSlotPillComponent} from '../../../timeslots/components/time-slot-pill/time-slot-pill.component';
 
 
 @Component({
@@ -19,7 +20,8 @@ import {dotCSSClass, tooltipCSSClass} from '../../../shared/data/default-colors.
     NgbDropdownMenu,
     NgbDropdownItem,
     PriorKnowledgePillComponent,
-    NgbTooltip
+    NgbTooltip,
+    TimeSlotPillComponent
   ],
   templateUrl: './person-view.component.html',
   styleUrl: './person-view.component.scss'

src/app/prior-knowledge/components/prior-knowledge-badge-list/prior-knowledge-badge-list.component.html

@@ -1,4 +1,4 @@
-<div class="knowledge-badge-list">
+<div class="badge-list">
   @for (knowledge of knowledgeList$ | async; track knowledge.id) {
     <app-prior-knowledge-pill [knowledge]="knowledge"
                               [remark]="knowledge.description"/>

src/app/prior-knowledge/components/prior-knowledge-edit/prior-knowledge-edit.component.ts

@@ -78,5 +78,13 @@ export class PriorKnowledgeEditComponent {
     if (keyboardEvent.code === "Space") {
       this.onColorSelected(color);
     }
+
+    if (keyboardEvent.code === "Escape") {
+      this.onCancel();
+    }
+
+    if (keyboardEvent.code === "Enter") {
+      this.onSubmit();
+    }
   }
 }

src/app/prior-knowledge/components/prior-knowledge-view/prior-knowledge-view.component.html

@@ -1,6 +1,7 @@
 <div class="d-flex justify-content-between">
   <div class="d-flex align-items-center">
-    <div [class]="dotCSSClass(knowledge().color)" class="dot-preview me-3"></div>
+    <div [class]="dotCSSClass(knowledge().color)"
+         class="dot-preview me-3"></div>
 
     <div>
       <div class="fw-medium">

src/app/shared/data/default-colors.data.ts

@@ -3,20 +3,29 @@ export interface ColorType {
 }
 
 export const colors = new Map<string, ColorType>([
-  ["gray", { name: "Gray" }],
-  ["pink", { name: "Pink" }],
-  ["t-red", {name: "Fire engine red" }],
-  ["t-orange", {name: "Orange" }],
-  ["t-yellow", {name: "Xanthous" }],
-  ["t-green", {name: "Cambridge Green" }],
-  ["cyan", { name: "Cyan" }],
-  ["blue", { name: "Blue" }],
-  ["indigo", { name: "Indigo" }],
-  ["purple", { name: "Purple" }],
-  ["t-blue", { name: "Prussian blue" }],
-  ["green", { name: "Green" }],
+  ["gray", {name: "Gray"}],
+  ["pink", {name: "Pink"}],
+  ["t-red", {name: "Fire engine red"}],
+  ["t-orange", {name: "Orange"}],
+  ["t-yellow", {name: "Xanthous"}],
+  ["t-green", {name: "Cambridge Green"}],
+  ["cyan", {name: "Cyan"}],
+  ["blue", {name: "Blue"}],
+  ["indigo", {name: "Indigo"}],
+  ["purple", {name: "Purple"}],
+  ["t-blue", {name: "Prussian blue"}],
+  ["green", {name: "Green"}],
 ]);
 
+export const timeSlotColors = new Map<string, ColorType>([
+  ["morning-dawn", {name: "Morning dawn"}],
+  ["morning", {name: "Morning"}],
+  ["noon", {name: "Noon"}],
+  ["afternoon", {name: "Afternoon"}],
+  ["evening", {name: "Evening"}],
+  ["night", {name: "Night"}]
+])
+
 
 export function badgeCSSClass(color: string): string {
   return `badge badge-colored-${color}`;

src/app/shared/data/default-time-slots.data.ts

@@ -3,8 +3,8 @@ import {createTime} from '../models/time.model';
 
 
 export const defaultTimeSlots: TimeSlot[] = [
-  createTimeSlot("Slot 1", createTime(9, 0), createTime(10, 30)),
-  createTimeSlot("Slot 2", createTime(10, 45), createTime(12, 15)),
-  createTimeSlot("Slot 3", createTime(13, 15), createTime(14, 45)),
-  createTimeSlot("Slot 4", createTime(15, 0), createTime(16, 30))
+  createTimeSlot("Slot 1", "morning", createTime(9, 0), createTime(10, 30)),
+  createTimeSlot("Slot 2", "noon", createTime(10, 45), createTime(12, 15)),
+  createTimeSlot("Slot 3", "afternoon", createTime(13, 15), createTime(14, 45)),
+  createTimeSlot("Slot 4", "evening", createTime(15, 0), createTime(16, 30))
 ];

src/app/styles/_colors.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/variables-dark";
@@ -27,6 +29,24 @@ $t-colors: (
   "gray": $gray-600
 );
 
+$morning-dawn: #E8E8E8;
+$morning: #D6D6D6;
+$noon: #BFBFBF;
+$afternoon: #A9A9A9;
+$evening: #7F7F7F;
+$night: #595959;
+
+$t-grays: (
+  "morning-dawn": $morning-dawn,
+  "morning": $morning,
+  "noon": $noon,
+  "afternoon": $afternoon,
+  "evening": $evening,
+  "night": $night
+);
+
+$all-t-colors: map.merge($t-colors, $t-grays);
+
 @each $color, $value in $t-colors {
   .badge-colored-#{$color} {
     color: shift-color($value, 45%);
@@ -37,6 +57,16 @@ $t-colors: (
   }
 }
 
+@each $color, $value in $t-grays {
+  .badge-colored-#{$color} {
+    color: color-contrast($value);
+    background-color: $value;
+
+    border: var(--bs-border-width) solid color-contrast($value);
+    border-radius: 20rem;
+  }
+}
+
 @each $color, $value in $t-colors {
   .dot-colored-#{$color} {
     --dot-width: 1rem;
@@ -53,12 +83,43 @@ $t-colors: (
   }
 }
 
+@each $color, $value in $t-grays {
+  .dot-colored-#{$color} {
+    --dot-width: 1rem;
+
+    display: inline-block;
+
+    background-color: $value;
+    border: var(--bs-border-width) solid darken($value, 30);
+    border-radius: 50%;
+
+    width: var(--dot-width);
+    height: var(--dot-width);
+    line-height: 1rem;
+  }
+}
+
 @each $color, $value in $t-colors {
   .tooltip-colored-#{$color} {
+    $fg-color: $value;
     $bg-color: opaque(#fff, rgba($value, 0.35));
 
     --bs-tooltip-bg: #{$bg-color};
-    --bs-tooltip-color: #{$value};
+    --bs-tooltip-opacity: 1;
+    --bs-tooltip-color: #{$fg-color};
+
+    font-weight: 500;
+  }
+}
+
+@each $color, $value in $t-grays {
+  .tooltip-colored-#{$color} {
+    $fg-color: color-contrast($value);
+    $bg-color: opaque(#fff, rgba($value, 0.35));
+
+    --bs-tooltip-bg: #{$bg-color};
+    --bs-tooltip-opacity: 1;
+    --bs-tooltip-color: #{$fg-color};
 
     font-weight: 500;
   }
@@ -77,9 +138,10 @@ $t-colors: (
  Create CSS classes for each color defined in t-colors. The resulting
  classes are named `bg-color-<color-name>` and `text-<color-name>`.
  */
-$all-colors: map-merge-multiple($t-colors, $blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
+$all-colors: map-merge-multiple($t-colors, $t-grays, $blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
+$all-colors-without-grays: map-merge-multiple($t-colors, $blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
 
-$utilities: map-merge(
+$utilities: map.merge(
     $utilities,
     (
       "bg-color": map-merge(
@@ -96,16 +158,16 @@ $utilities: map-merge(
     )
 );
 
-$utilities: map-merge(
+$utilities: map.merge(
     $utilities,
     (
-      "fg-color": map-merge(
-          map-get($utilities, "color"),
+      "fg-color": map.merge(
+          map.get($utilities, "color"),
           (
-            values: map-merge(
-                map-get(map-get($utilities, "color"), "values"),
+            values: map.merge(
+                map.get(map.get($utilities, "color"), "values"),
                   (
-                    $all-colors
+                    $all-colors-without-grays
                   )
             )
           )

src/app/styles/bootstrap-custom.scss

@@ -41,6 +41,9 @@
   $card-bg: var(--bs-secondary),
   $card-cap-bg: var(--bs-secondary),
   $card-border-width: 0,
+
+  // Vertical ruler
+  $vr-border-width: 2px
 );
 
 // In order to avoid errors regarding the order of @use and @import

src/app/styles/persons.scss

@@ -92,13 +92,17 @@
     display: flex;
     justify-content: space-between;
     margin-bottom: 0.25rem;
+    gap: 0.5rem;
 
     p {
       margin-bottom: 0;
     }
 
-    .person-view-knowledge {
+    .person-view-knowledge,
+    .person-view-timeslots-info {
       display: none;
+      gap: 0.5rem;
+      align-items: flex-start;
     }
   }
 
@@ -181,7 +185,9 @@
     }
 
     .person-view-timeslots-info {
-      display: block;
+      display: flex;
+      gap: 0.75rem;
+      align-items: flex-start;
 
       .badge {
         font-size: 0.7rem;
@@ -215,7 +221,8 @@
     .person-view-timeslots-info,
     .person-view-knowledge,
     .person-view-info,
-    .knowledge-pill {
+    .knowledge-pill,
+    .vr {
       display: none;
     }
   }
@@ -230,30 +237,32 @@
       padding: 0.5rem;
 
       .person-view-header {
+        .person-view-timeslots-info,
         .person-view-knowledge {
           display: flex;
           gap: 0.5rem;
           margin-top: 0;
         }
       }
 
+      .person-view-timeslots-info,
       .person-view-knowledge {
         display: none;
       }
-
-      .person-view-info-container {
-        display: flex;
-        align-items: baseline;
-        gap: 0.5rem;
-      }
     }
   }
 }
 
 .cdk-drag-preview.person-mini-view {
   .person-view-slots,
-  .person-view-timeslots-info,
+  .person-view-knowledge,
   .person-view-info {
     display: none;
   }
+
+  .person-view-header {
+    .person-view-timeslots-info {
+      display: flex;
+    }
+  }
 }