Tracker: Issue List - DueDate presenter

packages/presentation/src/components/UserBox.svelte

@@ -18,7 +18,7 @@
   import contact, { Contact, formatName } from '@anticrm/contact'
   import type { Class, Ref } from '@anticrm/core'
   import type { IntlString } from '@anticrm/platform'
-  import type { TooltipAligment } from '@anticrm/ui'
+  import type { TooltipAlignment } from '@anticrm/ui'
   import { Button, Label, showPopup, Tooltip } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import presentation from '..'
@@ -39,7 +39,7 @@
   export let size: 'small' | 'medium' | 'large' | 'x-large' = 'small'
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = undefined
-  export let labelDirection: TooltipAligment | undefined = undefined
+  export let labelDirection: TooltipAlignment | undefined = undefined
 
   const dispatch = createEventDispatcher()
 

packages/ui/src/components/ActionIcon.svelte

@@ -15,14 +15,14 @@
 
 <script lang="ts">
   import type { IntlString, Asset } from '@anticrm/platform'
-  import type { AnySvelteComponent, TooltipAligment } from '../types'
+  import type { AnySvelteComponent, TooltipAlignment } from '../types'
 
   import Icon from './Icon.svelte'
   import Tooltip from './Tooltip.svelte'
 
   export let label: IntlString = '' as IntlString
   export let labelProps: any = undefined
-  export let direction: TooltipAligment | undefined = undefined
+  export let direction: TooltipAlignment | undefined = undefined
   export let icon: Asset | AnySvelteComponent
   export let size: 'small' | 'medium' | 'large'
   export let action: (ev: Event) => Promise<void> | void = async () => { }

packages/ui/src/components/Dropdown.svelte

@@ -20,7 +20,7 @@
   import Label from './Label.svelte'
   import Icon from './Icon.svelte'
   import { showPopup, Button, Tooltip, DropdownPopup } from '..'
-  import type { AnySvelteComponent, ListItem, TooltipAligment } from '../types'
+  import type { AnySvelteComponent, ListItem, TooltipAlignment } from '../types'
 
   export let icon: Asset | AnySvelteComponent | undefined = undefined
   export let label: IntlString
@@ -32,7 +32,7 @@
   export let size: 'small' | 'medium' | 'large' | 'x-large' = 'small'
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = undefined
-  export let labelDirection: TooltipAligment | undefined = undefined
+  export let labelDirection: TooltipAlignment | undefined = undefined
 
   let container: HTMLElement
   let opened: boolean = false

packages/ui/src/components/DropdownLabels.svelte

@@ -16,7 +16,7 @@
 <script lang="ts">
   import { IntlString, Asset } from '@anticrm/platform'
   import DropdownLabelsPopup from './DropdownLabelsPopup.svelte'
-  import type { AnySvelteComponent, DropdownTextItem, TooltipAligment } from '../types'
+  import type { AnySvelteComponent, DropdownTextItem, TooltipAlignment } from '../types'
   import { showPopup, Tooltip, Button, Label } from '..'
   import { createEventDispatcher } from 'svelte'
   import ui from '../plugin'
@@ -31,7 +31,7 @@
   export let size: 'small' | 'medium' | 'large' | 'x-large' = 'small'
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = undefined
-  export let labelDirection: TooltipAligment | undefined = undefined
+  export let labelDirection: TooltipAlignment | undefined = undefined
 
   let container: HTMLElement
   let opened: boolean = false

packages/ui/src/components/Tooltip.svelte

@@ -14,11 +14,11 @@
 -->
 <script lang="ts">
   import type { IntlString } from '@anticrm/platform'
-  import type { TooltipAligment, AnySvelteComponent, AnyComponent } from '..'
+  import type { TooltipAlignment, AnySvelteComponent, AnyComponent } from '..'
   import { tooltipstore as tooltip, showTooltip } from '..'
 
   export let label: IntlString | undefined = undefined
-  export let direction: TooltipAligment | undefined = undefined
+  export let direction: TooltipAlignment | undefined = undefined
   export let component: AnySvelteComponent | AnyComponent | undefined = undefined
   export let props: any | undefined = undefined
   export let anchor: HTMLElement | undefined = undefined

packages/ui/src/components/TooltipInstance.svelte

@@ -15,12 +15,12 @@
 <script lang="ts">
   import { afterUpdate, onDestroy } from 'svelte'
   import { tooltipstore as tooltip, closeTooltip, Component } from '..'
-  import type { TooltipAligment } from '..'
+  import type { TooltipAlignment } from '..'
   import Label from './Label.svelte'
 
   let tooltipHTML: HTMLElement
   let nubHTML: HTMLElement
-  let dir: TooltipAligment
+  let dir: TooltipAlignment
   let rect: DOMRect
   let rectAnchor: DOMRect
   let tooltipSW: boolean // tooltipSW = true - Label; false - Component

packages/ui/src/components/calendar/DatePresenter.svelte

@@ -25,10 +25,11 @@
   export let withTime: boolean = false
   export let mondayStart: boolean = true
   export let editable: boolean = false
-  export let icon: 'normal' | 'warning' | 'overdue' = 'normal'
+  export let icon: 'normal' | 'warning' | 'critical' | 'overdue' = 'normal'
   export let labelOver: IntlString | undefined = undefined // label instead of date
   export let labelNull: IntlString = ui.string.NoDate
   export let showIcon = true
+  export let shouldShowLabel: boolean = true
 
   const dispatch = createEventDispatcher()
 
@@ -54,27 +55,35 @@
 <button
   class="datetime-button"
   class:editable
+  class:dateTimeButtonNoLabel={!shouldShowLabel}
   on:click={() => {
     if (editable && !opened) {
       opened = true
-      showPopup(DatePopup,
-                { currentDate, mondayStart, withTime },
-                undefined,
-                () => { opened = false },
-                (result) => { if (result !== undefined) onChange(result) })
+      showPopup(
+        DatePopup,
+        { currentDate, mondayStart, withTime },
+        undefined,
+        () => {
+          opened = false
+        },
+        (result) => {
+          if (result !== undefined) onChange(result)
+        }
+      )
     }
   }}
 >
   {#if showIcon}
-    <div class="btn-icon {icon}">
-      <Icon icon={icon === 'overdue' ? DPCalendarOver : DPCalendar} size={'full'}/>
+    <div class="btn-icon {icon}" class:buttonIconNoLabel={!shouldShowLabel}>
+      <Icon icon={icon === 'overdue' ? DPCalendarOver : DPCalendar} size={'full'} />
     </div>
   {/if}
   {#if value !== null && value !== undefined}
-    {#if labelOver !== undefined}
+    {#if shouldShowLabel && labelOver !== undefined}
       <Label label={labelOver} />
-    {:else}
-      {new Date(value).getDate()} {getMonthName(new Date(value), 'short')}
+    {:else if shouldShowLabel}
+      {new Date(value).getDate()}
+      {getMonthName(new Date(value), 'short')}
       {#if new Date(value).getFullYear() !== today.getFullYear()}
         {new Date(value).getFullYear()}
       {/if}
@@ -85,7 +94,7 @@
         {new Date(value).getMinutes().toString().padStart(2, '0')}
       {/if}
     {/if}
-  {:else}
+  {:else if shouldShowLabel}
     <Label label={labelNull} />
   {/if}
 </button>
@@ -96,7 +105,7 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    padding: 0 .5rem;
+    padding: 0 0.5rem;
     font-weight: 400;
     min-width: 1.5rem;
     width: auto;
@@ -106,22 +115,38 @@
     color: var(--accent-color);
     background-color: var(--button-bg-color);
     border: 1px solid transparent;
-    border-radius: .25rem;
+    border-radius: 0.25rem;
     box-shadow: var(--button-shadow);
     transition-property: border, background-color, color, box-shadow;
-    transition-duration: .15s;
+    transition-duration: 0.15s;
     cursor: default;
 
+    &.dateTimeButtonNoLabel {
+      padding: 0;
+    }
+
     .btn-icon {
-      margin-right: .375rem;
-      width: .875rem;
-      height: .875rem;
-      transition: color .15s;
+      margin-right: 0.375rem;
+      width: 0.875rem;
+      height: 0.875rem;
+      transition: color 0.15s;
       pointer-events: none;
 
-      &.normal { color: var(--content-color); }
-      &.warning { color: var(--warning-color); }
-      &.overdue { color: var(--error-color); }
+      &.buttonIconNoLabel {
+        margin-right: 0;
+      }
+      &.normal {
+        color: var(--content-color);
+      }
+      &.warning {
+        color: var(--warning-color);
+      }
+      &.critical {
+        color: var(--error-color);
+      }
+      &.overdue {
+        color: var(--error-color);
+      }
     }
 
     &:hover {
@@ -134,15 +159,28 @@
       &:hover {
         background-color: var(--button-bg-hover);
         .btn-icon {
-          &.normal { color: var(--caption-color); }
-          &.warning { color: var(--warning-color); }
-          &.overdue { color: var(--error-color); }
+          &.normal {
+            color: var(--caption-color);
+          }
+          &.warning {
+            color: var(--warning-color);
+          }
+          &.critical {
+            color: var(--error-color);
+          }
+          &.overdue {
+            color: var(--error-color);
+          }
+        }
+        .time-divider {
+          background-color: var(--button-border-hover);
         }
-        .time-divider { background-color: var(--button-border-hover); }
       }
       &:focus-within {
         border-color: var(--primary-edit-border-color);
-        &:hover { background-color: transparent; }
+        &:hover {
+          background-color: transparent;
+        }
       }
     }
     &:disabled {
@@ -151,17 +189,21 @@
 
       &:hover {
         color: var(--content-color);
-        .btn-icon { color: var(--content-color); }
+        .btn-icon {
+          color: var(--content-color);
+        }
       }
     }
     .time-divider {
       flex-shrink: 0;
-      margin: 0 .25rem;
+      margin: 0 0.25rem;
       width: 1px;
       min-width: 1px;
-      height: .75rem;
+      height: 0.75rem;
       background-color: var(--button-border-color);
     }
-    .separator { margin: 0 .1rem; }
+    .separator {
+      margin: 0 0.1rem;
+    }
   }
 </style>

packages/ui/src/components/calendar/internal/DateUtils.ts

@@ -78,6 +78,7 @@ export function getMonthName (date: Date, option: 'narrow' | 'short' | 'long' |
     return new Intl.DateTimeFormat(locale, { month: option }).format(date)
   } catch (err) {
     console.error(err)
+    return ''
   }
 }
 
@@ -100,3 +101,10 @@ export function addZero (value: number): string {
   }
   return `${value}`
 }
+
+export const getDaysDifference = (from: Date, to: Date): number => {
+  const firstDateMs = from.setHours(0, 0, 0, 0)
+  const secondDateMs = to.setHours(0, 0, 0, 0)
+
+  return Math.round(Math.abs(secondDateMs - firstDateMs) / MILLISECONDS_IN_DAY)
+}

packages/ui/src/index.ts

@@ -20,7 +20,7 @@ import { readable } from 'svelte/store'
 
 import Root from './components/internal/Root.svelte'
 
-export type { AnyComponent, AnySvelteComponent, Action, LabelAndProps, TooltipAligment, AnySvelteComponentWithProps, Location, PopupAlignment } from './types'
+export type { AnyComponent, AnySvelteComponent, Action, LabelAndProps, TooltipAlignment, AnySvelteComponentWithProps, Location, PopupAlignment } from './types'
 // export { applicationShortcutKey } from './utils'
 export { getCurrentLocation, locationToUrl, navigate, location } from './location'
 
@@ -102,6 +102,8 @@ export { default as IconCheck } from './components/icons/Check.svelte'
 export { default as IconArrowLeft } from './components/icons/ArrowLeft.svelte'
 export { default as IconNavPrev } from './components/icons/NavPrev.svelte'
 export { default as IconNavNext } from './components/icons/NavNext.svelte'
+export { default as IconDPCalendar } from './components/calendar/icons/DPCalendar.svelte'
+export { default as IconDPCalendarOver } from './components/calendar/icons/DPCalendarOver.svelte'
 
 export { default as PanelInstance } from './components/PanelInstance.svelte'
 export { default as Panel } from './components/Panel.svelte'
@@ -110,6 +112,7 @@ export * from './utils'
 export * from './popups'
 export * from './tooltips'
 export * from './panelup'
+export * from './components/calendar/internal/DateUtils'
 
 export function createApp (target: HTMLElement): SvelteComponent {
   return new Root({ target })

packages/ui/src/tooltips.ts

@@ -1,4 +1,4 @@
-import { AnySvelteComponent, AnyComponent, LabelAndProps, TooltipAligment } from './types'
+import { AnySvelteComponent, AnyComponent, LabelAndProps, TooltipAlignment } from './types'
 import { IntlString } from '@anticrm/platform'
 import { writable } from 'svelte/store'
 
@@ -15,7 +15,7 @@ export const tooltipstore = writable<LabelAndProps>({
 export function showTooltip (
   label: IntlString | undefined,
   element: HTMLElement,
-  direction?: TooltipAligment,
+  direction?: TooltipAlignment,
   component?: AnySvelteComponent | AnyComponent,
   props?: any,
   anchor?: HTMLElement,

packages/ui/src/types.ts

@@ -65,12 +65,12 @@ export type TabModel = Tab[]
 
 export type PopupAlignment = HTMLElement | EventTarget | null | 'right' | 'top' | 'account' | 'full' | 'content' | 'middle'
 
-export type TooltipAligment = 'top' | 'bottom' | 'left' | 'right'
+export type TooltipAlignment = 'top' | 'bottom' | 'left' | 'right'
 
 export interface LabelAndProps {
   label: IntlString | undefined
   element: HTMLElement | undefined
-  direction?: TooltipAligment
+  direction?: TooltipAlignment
   component?: AnySvelteComponent | AnyComponent
   props?: any
   anchor: HTMLElement | undefined

plugins/contact-resources/src/components/OrganizationSelector.svelte

@@ -19,7 +19,7 @@
   import { IntlString } from '@anticrm/platform'
   import { createQuery } from '@anticrm/presentation'
   import { Dropdown } from '@anticrm/ui'
-  import type { TooltipAligment } from '@anticrm/ui'
+  import type { TooltipAlignment } from '@anticrm/ui'
   import { ListItem } from '@anticrm/ui/src/types'
   import { createEventDispatcher } from 'svelte'
   import contact from '../plugin'
@@ -32,7 +32,7 @@
   export let size: 'small' | 'medium' | 'large' | 'x-large' = 'small'
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = undefined
-  export let labelDirection: TooltipAligment | undefined = undefined
+  export let labelDirection: TooltipAlignment | undefined = undefined
 
   const query = createQuery()
   const dispatch = createEventDispatcher()