🔨 Fix tentative remote events styles

thunderbird · May 29, 2024 · d5c09fc · d5c09fc
1 parent 41526f1
commit d5c09fc
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 17 deletions.
diff --git a/frontend/src/elements/calendar/CalendarEvent.vue b/frontend/src/elements/calendar/CalendarEvent.vue
@@ -3,11 +3,9 @@
     :class="{ 'text-gray-400 cursor-not-allowed': disabled, 'h-full': !monthView }"
     @mouseleave="popup = {...initialEventPopupData}"
   >
-    <div class="flex flex-col gap-1.5 overflow-y-auto"
-      :class="{
-        'h-full': !monthView,
-        'px-1' : isBusy,
-      }"
+    <div
+      class="flex flex-col gap-1.5 overflow-y-auto"
+      :class="{ 'h-full': !monthView, 'px-1' : isBusy }"
       :style="`height: ${elementHeight}px`"
     >
       <!-- placeholder event for availability bookings -->

diff --git a/frontend/src/elements/calendar/CalendarEventRemote.vue b/frontend/src/elements/calendar/CalendarEventRemote.vue
@@ -6,16 +6,17 @@
     "
     :class="{
       'rounded bg-amber-400/80 dark:text-white': event.all_day,
-      'h-full rounded': !isMonthView,
+      'h-full border-2 rounded': !isMonthView,
     }"
     :style="{
-      borderColor: eventColor(event, false).border,
-      backgroundColor: isMonthView ? eventColor(event, false).background : event.calendar_color,
-      color: !isMonthView ? getAccessibleColor(event.calendar_color) : null,
+      borderColor: !isMonthView ? eventColor(event, false).border : null,
+      backgroundColor: isMonthView || (!isMonthView && event.tentative) ? 'transparent' : event.calendar_color,
+      color: !isMonthView && !event.tentative ? getAccessibleColor(event.calendar_color) : null,
+      color: !isMonthView && event.tentative ? event.calendar_color : null,
     }"
   >
     <div
-      v-if="!event.all_day"
+      v-if="isMonthView && !event.all_day"
       class="mt-0.5 size-2.5 shrink-0 rounded-full"
       :class="{
         'bg-sky-400': !event.tentative,

diff --git a/frontend/src/utils.js b/frontend/src/utils.js
@@ -10,19 +10,15 @@ export const eventColor = (event, placeholder) => {
     background: null,
   };
   // color appointment slots
-  if (!placeholder && !event.remote) {
+  if (!placeholder) {
     color.border = event.calendar_color;
     color.background = event.calendar_color;
     // keep solid background only for slots with attendee
-    if (!event.attendee) {
+    if (!event.attendee && !event.remote) {
       color.background += '22';
     }
   }
-  // color remote tentative events
-  if (event.remote && event.tentative) {
-    color.border = `${event.calendar_color}bb`;
-    color.background = 'transparent';
-  }
+
   return color;
 };