From fcdf70cb5d3b45c970bce392357369c6dd93accd Mon Sep 17 00:00:00 2001
From: Chunosov <Chunosov.N@gmail.com>
Date: Fri, 21 Mar 2025 23:10:27 +0700
Subject: [PATCH] Small visual fixes fot calendar events (#8310)

Signed-off-by: Nikolay Chunosov <Chunosov.N@gmail.com>
---
 packages/theme/styles/_colors.scss            |  8 ++
 packages/theme/styles/components.scss         |  1 +
 packages/theme/styles/editors.scss            |  4 -
 packages/ui/src/components/Dropdown.svelte    | 10 ++-
 .../ui/src/components/DropdownPopup.svelte    |  7 +-
 .../src/components/AddParticipant.svelte      |  4 +-
 .../src/components/CreateEvent.svelte         |  5 +-
 .../src/components/DateEditor.svelte          |  4 +-
 .../src/components/EditEvent.svelte           | 11 +--
 .../src/components/EventElement.svelte        |  6 +-
 .../src/components/EventParticipants.svelte   |  2 +-
 .../src/components/EventReminders.svelte      |  4 +-
 .../components/EventTimeExtraButton.svelte    |  6 +-
 .../src/components/ScheduleEditor.svelte      |  5 +-
 .../src/components/VisibilityEditor.svelte    | 75 ++++++++++++++-----
 .../src/components/RoomSelector.svelte        |  1 +
 .../src/components/EditWorkSlot.svelte        | 13 +++-
 17 files changed, 113 insertions(+), 53 deletions(-)

diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 60b95aa2a7..5c0ccc4137 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -376,6 +376,10 @@
   --theme-state-regular-background-color: rgba(123, 123, 123, 0.1);
   --theme-state-regular-border-color: rgba(123, 123, 123, 0.15);
   --theme-wizard-not-visited-color: #34343c;
+
+  --calendar-event-back-color: #2B2D41;
+  --calendar-event-border-color: rgba(43, 81, 144, 0.2);
+  --calendar-event-handle-color: #2b5190;
 }
 
 /* Light Theme */
@@ -668,4 +672,8 @@
   --theme-state-regular-background-color: rgba(123, 123, 123, 0.1);
   --theme-state-regular-border-color: rgba(123, 123, 123, 0.15);
   --theme-wizard-not-visited-color: #e8e9e9;
+
+  --calendar-event-back-color: #f3f6fb;
+  --calendar-event-border-color: rgba(43, 81, 144, 0.2);
+  --calendar-event-handle-color: #2b5190;
 }
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 7bd43ef2a7..4b9192eaa3 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -909,6 +909,7 @@
 
 .hulyToDoLine-draggable {
   position: relative;
+  width: 100%;
 
   &.is-dragging-over-up::before {
     position: absolute;
diff --git a/packages/theme/styles/editors.scss b/packages/theme/styles/editors.scss
index e19972d887..52ca43cabd 100644
--- a/packages/theme/styles/editors.scss
+++ b/packages/theme/styles/editors.scss
@@ -87,8 +87,6 @@
     border: 1px solid transparent;
     
     .antiEditBoxInput {
-      color: inherit;
-
       &::placeholder { color: var(--theme-darker-color); }
     }
     &:hover { background-color: var(--theme-button-hovered); }
@@ -110,8 +108,6 @@
     font-size: 1.5rem;
 
     .antiEditBoxInput {
-      font: inherit;
-
       &::placeholder {
         color: var(--input-PlaceholderColor);
       }
diff --git a/packages/ui/src/components/Dropdown.svelte b/packages/ui/src/components/Dropdown.svelte
index 655f726e34..297af8c130 100644
--- a/packages/ui/src/components/Dropdown.svelte
+++ b/packages/ui/src/components/Dropdown.svelte
@@ -28,6 +28,7 @@
   export let items: ListItem[] = []
   export let selected: ListItem | undefined = undefined
   export let disabled: boolean = false
+  export let padding: string = '0 .75rem'
 
   export let kind: ButtonKind = 'no-border'
   export let size: ButtonSize = 'small'
@@ -55,6 +56,7 @@
     {kind}
     {justify}
     {disabled}
+    {padding}
     showTooltip={{ label, direction: labelDirection }}
     on:click={() => {
       if (!opened && !disabled) {
@@ -71,7 +73,13 @@
     }}
   >
     <span slot="content" class="overflow-label disabled">
-      {#if selected}{selected.label}{:else}<Label label={placeholder} />{/if}
+      {#if selected}
+        {selected.label}
+      {:else}
+        <div style="color: var(--theme-darker-color);">
+          <Label label={placeholder} />
+        </div>
+      {/if}
     </span>
   </Button>
 </div>
diff --git a/packages/ui/src/components/DropdownPopup.svelte b/packages/ui/src/components/DropdownPopup.svelte
index 57a6feeac8..ccba32aaa5 100644
--- a/packages/ui/src/components/DropdownPopup.svelte
+++ b/packages/ui/src/components/DropdownPopup.svelte
@@ -75,7 +75,7 @@
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')} on:keydown={onKeydown}>
+<div class="selectPopup popup" use:resizeObserver={() => dispatch('changeContent')} on:keydown={onKeydown}>
   {#if withSearch}
     <div class="header">
       <input
@@ -95,7 +95,7 @@
           {@const item = objects[idx]}
 
           <button
-            class="flex-between menu-item w-full"
+            class="flex-between menu-item withList w-full"
             disabled={item.isSelectable === false}
             on:click={(evt) => {
               handleSelection(evt, idx)
@@ -140,4 +140,7 @@
       max-width: fit-content;
     }
   }
+  .popup {
+    padding: 0.5rem 0;
+  }
 </style>
diff --git a/plugins/calendar-resources/src/components/AddParticipant.svelte b/plugins/calendar-resources/src/components/AddParticipant.svelte
index b92659f51a..6989754433 100644
--- a/plugins/calendar-resources/src/components/AddParticipant.svelte
+++ b/plugins/calendar-resources/src/components/AddParticipant.svelte
@@ -195,7 +195,7 @@
 >
   <div class="hidden-text" bind:this={text} />
   <div class="flex-row-center w-full">
-    <div class="ghost flex-row-center clear-mins" class:focusable class:w-full={fullSize}>
+    <div class="antiEditBox ghost" class:focusable class:w-full={fullSize}>
       <input
         {disabled}
         bind:this={input}
@@ -203,7 +203,7 @@
         bind:value
         placeholder={phTranslate}
         {style}
-        class="search"
+        class="antiEditBoxInput search"
         on:input={(ev) => {
           computeSize(ev.target)
         }}
diff --git a/plugins/calendar-resources/src/components/CreateEvent.svelte b/plugins/calendar-resources/src/components/CreateEvent.svelte
index b26b6ae500..97332360ba 100644
--- a/plugins/calendar-resources/src/components/CreateEvent.svelte
+++ b/plugins/calendar-resources/src/components/CreateEvent.svelte
@@ -239,7 +239,7 @@
     <div class="block">
       <DocCreateExtComponent manager={docCreateManager} kind={'body'} />
     </div>
-    <div class="block row gap-1-5">
+    <div class="block row">
       <div class="top-icon">
         <Icon icon={calendar.icon.Description} size={'small'} />
       </div>
@@ -257,7 +257,7 @@
       <CalendarSelector bind:value={_calendar} focusIndex={10101} />
       <div class="flex-row-center flex-gap-1">
         <Icon icon={calendar.icon.Hidden} size={'small'} />
-        <VisibilityEditor bind:value={visibility} kind={'tertiary'} size={'small'} focusIndex={10102} withoutIcon />
+        <VisibilityEditor bind:value={visibility} kind="inline" size="medium" focusIndex={10102} withoutIcon />
       </div>
       <EventReminders bind:reminders focusIndex={10103} />
     </div>
@@ -319,6 +319,7 @@
     .top-icon {
       flex-shrink: 0;
       margin-top: 1.375rem;
+      margin-right: 0.125rem;
     }
   }
 </style>
diff --git a/plugins/calendar-resources/src/components/DateEditor.svelte b/plugins/calendar-resources/src/components/DateEditor.svelte
index e03969a8ec..7ab9bf9da4 100644
--- a/plugins/calendar-resources/src/components/DateEditor.svelte
+++ b/plugins/calendar-resources/src/components/DateEditor.svelte
@@ -164,11 +164,11 @@
 {#if !withoutTime && difference > 0}
   <div class="divider" />
   {#if fixed === undefined}
-    <div class="p-2 font-regular-14 sunshine-text-color">
+    <div class="p-2 font-regular-14">
       <TimeShiftPresenter value={date - difference} exact />
     </div>
   {:else}
-    <FixedColumn key={fixed + '-duration'} addClass={'p-2 font-regular-14 sunshine-text-color'}>
+    <FixedColumn key={fixed + '-duration'} addClass={'p-2 font-regular-14'}>
       <TimeShiftPresenter value={date - difference} exact />
     </FixedColumn>
   {/if}
diff --git a/plugins/calendar-resources/src/components/EditEvent.svelte b/plugins/calendar-resources/src/components/EditEvent.svelte
index fb5efd9a0b..15367bf172 100644
--- a/plugins/calendar-resources/src/components/EditEvent.svelte
+++ b/plugins/calendar-resources/src/components/EditEvent.svelte
@@ -201,7 +201,7 @@
       <EventParticipants bind:participants bind:externalParticipants disabled={readOnly} focusIndex={10006} />
       <ComponentExtensions extension={calendar.extensions.EditEventExtensions} props={{ readOnly, value: object }} />
     </div>
-    <div class="block row gap-1-5">
+    <div class="block row">
       <div class="top-icon">
         <Icon icon={calendar.icon.Description} size={'small'} />
       </div>
@@ -221,13 +221,7 @@
       <CalendarSelector bind:value={_calendar} focusIndex={10008} />
       <div class="flex-row-center flex-gap-1">
         <Icon icon={calendar.icon.Hidden} size={'small'} />
-        <VisibilityEditor
-          bind:value={visibility}
-          kind={'tertiary'}
-          disabled={readOnly}
-          withoutIcon
-          focusIndex={10009}
-        />
+        <VisibilityEditor bind:value={visibility} kind="inline" disabled={readOnly} withoutIcon focusIndex={10009} />
       </div>
       <EventReminders bind:reminders focusIndex={10010} disabled={readOnly} />
     </div>
@@ -290,6 +284,7 @@
     .top-icon {
       flex-shrink: 0;
       margin-top: 1.375rem;
+      margin-right: 0.125rem;
     }
   }
 </style>
diff --git a/plugins/calendar-resources/src/components/EventElement.svelte b/plugins/calendar-resources/src/components/EventElement.svelte
index a1b9ee54ca..413e76126e 100644
--- a/plugins/calendar-resources/src/components/EventElement.svelte
+++ b/plugins/calendar-resources/src/components/EventElement.svelte
@@ -85,9 +85,9 @@
     min-width: 0;
     min-height: 0;
     font-size: 0.8125rem;
-    background-color: #f3f6fb;
-    border: 1px solid rgba(43, 81, 144, 0.2);
-    border-left: 0.25rem solid #2b5190;
+    background-color: var(--calendar-event-back-color);
+    border: 1px solid var(--calendar-event-border-color);
+    border-left: 0.25rem solid var(--calendar-event-handle-color);
     border-radius: 0.25rem;
     cursor: pointer;
     padding: 0.25rem 0.5rem 0.25rem 1rem;
diff --git a/plugins/calendar-resources/src/components/EventParticipants.svelte b/plugins/calendar-resources/src/components/EventParticipants.svelte
index bdfef1f289..42a362baf8 100644
--- a/plugins/calendar-resources/src/components/EventParticipants.svelte
+++ b/plugins/calendar-resources/src/components/EventParticipants.svelte
@@ -83,7 +83,7 @@
   }
 </script>
 
-<div class="flex-row-center gap-1-5 pb-0-5 pr-1">
+<div class="flex-row-center flex-gap-1 container flex-no-shrink">
   <Icon icon={calendar.icon.Participants} size="small" />
   <AddParticipant
     {placeholder}
diff --git a/plugins/calendar-resources/src/components/EventReminders.svelte b/plugins/calendar-resources/src/components/EventReminders.svelte
index 7a2a203f3a..4acfba898f 100644
--- a/plugins/calendar-resources/src/components/EventReminders.svelte
+++ b/plugins/calendar-resources/src/components/EventReminders.svelte
@@ -44,7 +44,7 @@
   }
 </script>
 
-<div class="flex-row-center gap-1-5 pr-1" class:pb-0-5={reminders.length}>
+<div class="flex-row-center gap-1 pr-1" class:pb-0-5={reminders.length}>
   <Icon icon={calendar.icon.Notifications} size="small" />
   <Button
     label={reminders.length > 0 ? calendar.string.AddReminder : calendar.string.Reminders}
@@ -59,7 +59,7 @@
   />
 </div>
 {#if reminders.length}
-  <Scroller padding={'.125rem .25rem 0 1.5rem'} shrink>
+  <Scroller padding={'.125rem .25rem 0 1.25rem'} shrink>
     {#if reminders.length > maxReminders && !shown}
       {#each reminders.slice(0, maxReminders - 2) as reminder, i}
         <EventReminderItem
diff --git a/plugins/calendar-resources/src/components/EventTimeExtraButton.svelte b/plugins/calendar-resources/src/components/EventTimeExtraButton.svelte
index 5af2259b73..cc3298a102 100644
--- a/plugins/calendar-resources/src/components/EventTimeExtraButton.svelte
+++ b/plugins/calendar-resources/src/components/EventTimeExtraButton.svelte
@@ -69,7 +69,7 @@
 
 {#if !allDay && rules.length === 0 && myTimezone === timeZone}
   {#if !readOnly}
-    <div class="antiButton ghost x-small sh-no-shape text-11px pl-2 pr-2 pt-1 pb-1 mt-1 ml-5-5 gap-3 w-min">
+    <div class="antiButton ghost x-small sh-no-shape text-11px pl-1 pr-2 pt-1 pb-1 mt-1 ml-5-5 gap-3 w-min">
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div class="overflow-label cursor-pointer" on:click={() => (allDay = true)}>
@@ -106,12 +106,12 @@
       }}
     />
   </div>
-  <div class="flex-row-center gap-1-5 mt-1">
+  <div class="flex-row-center gap-1 mt-1">
     <Icon icon={calendar.icon.Globe} size={'small'} fill={'var(--theme-dark-color)'} />
     <TimeZoneSelector bind:timeZone disabled={readOnly} />
   </div>
   {#if !noRepeat}
-    <div class="flex-row-center gap-1-5 mt-1">
+    <div class="flex-row-center gap-1 mt-1">
       <Icon icon={calendar.icon.Repeat} size={'small'} fill={'var(--theme-dark-color)'} />
       <Button
         label={rules.length > 0 ? undefined : calendar.string.Repeat}
diff --git a/plugins/calendar-resources/src/components/ScheduleEditor.svelte b/plugins/calendar-resources/src/components/ScheduleEditor.svelte
index 767d22fcc0..c4fe8a6441 100644
--- a/plugins/calendar-resources/src/components/ScheduleEditor.svelte
+++ b/plugins/calendar-resources/src/components/ScheduleEditor.svelte
@@ -285,7 +285,7 @@
     </div>
   </div>
   <Scroller thinScrollBars>
-    <div class="block row gap-1-5">
+    <div class="block row">
       <div class="top-icon">
         <Icon icon={calendar.icon.Description} size={'small'} />
       </div>
@@ -325,7 +325,7 @@
       </div>
     </div>
     <div class="block rightCropPadding">
-      <div class="flex-row-center flex-gap-1">
+      <div class="flex-row-center flex-gap-1-5">
         <Icon icon={calendar.icon.Globe} size={'small'} />
         <TimeZoneSelector bind:timeZone />
       </div>
@@ -449,6 +449,7 @@
     .top-icon {
       flex-shrink: 0;
       margin-top: 1.375rem;
+      margin-right: 0.125rem;
     }
 
     .weekDay {
diff --git a/plugins/calendar-resources/src/components/VisibilityEditor.svelte b/plugins/calendar-resources/src/components/VisibilityEditor.svelte
index f9ec088329..c6f79711dc 100644
--- a/plugins/calendar-resources/src/components/VisibilityEditor.svelte
+++ b/plugins/calendar-resources/src/components/VisibilityEditor.svelte
@@ -1,5 +1,5 @@
 <!--
-// Copyright © 2023 Hardcore Engineering Inc.
+// Copyright © 2023-2025 Hardcore Engineering Inc.
 //
 // Licensed under the Eclipse Public License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License. You may
@@ -14,17 +14,27 @@
 -->
 <script lang="ts">
   import { Visibility } from '@hcengineering/calendar'
-  import { ButtonMenu, DropdownIntlItem, themeStore } from '@hcengineering/ui'
+  import {
+    Button,
+    ButtonMenu,
+    closeTooltip,
+    DropdownIntlItem,
+    eventToHTMLElement,
+    showPopup,
+    ModernPopup
+  } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import calendar from '../plugin'
 
   export let value: Visibility | undefined
   export let disabled: boolean = false
-  export let kind: 'primary' | 'secondary' | 'tertiary' | 'negative' = 'secondary'
+  export let kind: 'primary' | 'secondary' | 'tertiary' | 'negative' | 'inline' = 'secondary'
   export let size: 'small' | 'medium' | 'large' = 'medium'
   export let withoutIcon: boolean = false
   export let focusIndex = -1
 
+  let opened: boolean = false
+
   const dispatch = createEventDispatcher()
 
   const items: DropdownIntlItem[] = [
@@ -47,25 +57,54 @@
 
   $: selected = value !== undefined ? items.find((item) => item.id === value) : undefined
 
-  function change (val: Visibility) {
+  function change (val: Visibility): void {
     if (value !== val) {
+      console.log('Changed', val)
       dispatch('change', val)
       value = val
     }
   }
+
+  function openPopup (ev: MouseEvent): void {
+    if (!opened) {
+      opened = true
+      closeTooltip()
+      showPopup(ModernPopup, { items, selected: selected?.id }, eventToHTMLElement(ev), (selectedId) => {
+        console.log('Selected', selectedId)
+        if (selectedId !== undefined) {
+          change(selectedId)
+        }
+        opened = false
+      })
+    }
+  }
 </script>
 
-<ButtonMenu
-  icon={withoutIcon ? undefined : calendar.icon.Hidden}
-  label={selected?.label}
-  selected={selected?.id}
-  {items}
-  {kind}
-  {size}
-  {disabled}
-  {focusIndex}
-  id={'visibleButton'}
-  on:selected={(event) => {
-    if (event.detail) change(event.detail)
-  }}
-/>
+{#if kind === 'inline'}
+  <Button
+    icon={withoutIcon ? undefined : calendar.icon.Hidden}
+    label={selected?.label}
+    kind="ghost"
+    padding="0.5rem"
+    {size}
+    {disabled}
+    {focusIndex}
+    id={'visibleButton'}
+    on:click={openPopup}
+  />
+{:else}
+  <ButtonMenu
+    icon={withoutIcon ? undefined : calendar.icon.Hidden}
+    label={selected?.label}
+    selected={selected?.id}
+    {items}
+    {kind}
+    {size}
+    {disabled}
+    {focusIndex}
+    id={'visibleButton'}
+    on:selected={(event) => {
+      change(event.detail)
+    }}
+  />
+{/if}
diff --git a/plugins/love-resources/src/components/RoomSelector.svelte b/plugins/love-resources/src/components/RoomSelector.svelte
index 4c8f7c0ca6..5e0b4d978d 100644
--- a/plugins/love-resources/src/components/RoomSelector.svelte
+++ b/plugins/love-resources/src/components/RoomSelector.svelte
@@ -110,6 +110,7 @@
       kind={'ghost'}
       size={'medium'}
       placeholder={love.string.Room}
+      padding="0.5rem"
       {items}
       withSearch={false}
       {selected}
diff --git a/plugins/time-resources/src/components/EditWorkSlot.svelte b/plugins/time-resources/src/components/EditWorkSlot.svelte
index b27342cd75..2cbc3e9d38 100644
--- a/plugins/time-resources/src/components/EditWorkSlot.svelte
+++ b/plugins/time-resources/src/components/EditWorkSlot.svelte
@@ -122,8 +122,10 @@
     <EventTimeEditor {allDay} bind:startDate bind:dueDate disabled={readOnly} focusIndex={10004} />
   </div>
   <div class="block flex-no-shrink">
-    <div class="flex-row-center gap-1-5 mb-1">
-      <Icon icon={calendar.icon.Description} size={'small'} />
+    <div class="flex mb-1">
+      <div class="top-icon">
+        <Icon icon={calendar.icon.Description} size={'small'} />
+      </div>
       <StyledTextBox
         alwaysEdit={true}
         kind={'indented'}
@@ -140,7 +142,7 @@
     <CalendarSelector bind:value={_calendar} disabled={readOnly} focusIndex={10007} />
     <div class="flex-row-center flex-gap-1">
       <Icon icon={calendar.icon.Hidden} size={'small'} />
-      <VisibilityEditor bind:value={visibility} kind={'tertiary'} withoutIcon disabled={readOnly} focusIndex={10008} />
+      <VisibilityEditor bind:value={visibility} kind="inline" withoutIcon disabled={readOnly} focusIndex={10008} />
     </div>
     <EventReminders bind:reminders disabled={readOnly} focusIndex={10009} />
   </div>
@@ -190,5 +192,10 @@
         padding: 0.75rem 1rem 0.75rem 1.25rem;
       }
     }
+    .top-icon {
+      flex-shrink: 0;
+      margin-top: 1.375rem;
+      margin-right: 0.125rem;
+    }
   }
 </style>