Update reminders layout (#1874)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/presentation/src/components/AttributesBar.svelte

@@ -69,7 +69,7 @@
     }
     &.vertical {
       display: grid;
-      grid-template-columns: 1fr 1.5fr;
+      grid-template-columns: 1fr 2fr;
       grid-auto-flow: row;
       justify-content: start;
       align-items: center;

packages/presentation/src/components/EditableAvatar.svelte

@@ -38,7 +38,7 @@
     } else {
       return inputRef.click()
     }
-    showPopup(EditAvatarPopup, { file }, 'full', (blob) => {
+    showPopup(EditAvatarPopup, { file }, undefined, (blob) => {
       if (blob === undefined) {
         return
       }

packages/theme/styles/_colors.scss

@@ -85,7 +85,7 @@
   --popup-bg-color: linear-gradient(136.61deg, var(--accent-bg-color) 13.72%, #2d2e31 74.3%);
   --popup-bg-hover: #37373c;
   --popup-divider: #313236;
-  --popup-shadow: rgb(0 0 0 / 20%) 0px 4px 24px;
+  --popup-shadow: rgb(0 0 0 / 50%) 0px 4px 24px;
   --popup-panel-shadow: rgb(0 0 0 / 55%) 0px 7px 24px;
   --popup-aside-shadow: rgb(0 0 0 / 25%) 0px 8px 16px;
   --card-shadow: rgb(0 0 0 / 50%) 0px 16px 70px;

packages/theme/styles/popups.scss

@@ -332,6 +332,31 @@
   }
 }
 
+.notifyPopup {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  height: max-content;
+  padding-bottom: 0.5rem;
+  min-width: 32rem;
+  max-width: 32rem;
+  min-height: 22rem;
+  max-height: 22rem;
+  background: var(--popup-bg-color);
+  border-radius: 0.5rem;
+  box-shadow: var(--popup-shadow);
+
+  .header {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 0 1rem;
+    height: 3rem;
+    border-bottom: 1px solid var(--popup-divider);
+  }
+}
+
 // Remove highlights table rows and hide dots in popups
 .popup .tr-body:hover, .popup-tooltip .tr-body:hover { background-color: transparent !important; }
 .popup-tooltip .tr-body .menuRow { visibility: hidden !important; }

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

@@ -62,10 +62,10 @@
         const rectPopup = modalHTML.getBoundingClientRect()
         // Vertical
         if (rect.bottom + rectPopup.height + 28 <= document.body.clientHeight) {
-          modalHTML.style.top = `calc(${rect.bottom}px + .5rem)`
+          modalHTML.style.top = `calc(${rect.bottom}px + 1px)`
         } else if (rectPopup.height + 28 < rect.top) {
-          modalHTML.style.bottom = `calc(${document.body.clientHeight - rect.y}px + .5rem)`
+          modalHTML.style.bottom = `calc(${document.body.clientHeight - rect.y}px + 1px)`
-        } else modalHTML.style.top = `calc(${rect.bottom}px + .5rem)`
+        } else modalHTML.style.top = `calc(${rect.bottom}px + 1px)`
 
         // Horizontal
         if (rect.left + rectPopup.width + 16 > document.body.clientWidth) {

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

@@ -16,12 +16,31 @@
   import { createEventDispatcher } from 'svelte'
   import { dpstore } from '../..'
   import Month from './Month.svelte'
+  import Scroller from '../Scroller.svelte'
+  import TimeShiftPresenter from '../TimeShiftPresenter.svelte'
+
+  export let direction: 'before' | 'after' = 'after'
+  export let minutes: number[] = [5, 15, 30]
+  export let hours: number[] = [1, 2, 4, 8, 12]
+  export let days: number[] = [1, 3, 7, 30]
 
   const dispatch = createEventDispatcher()
 
   const today: Date = new Date(Date.now())
   $: currentDate = $dpstore.currentDate ?? today
   const mondayStart: boolean = true
+
+  $: base = direction === 'before' ? -1 : 1
+  const MINUTE = 60 * 1000
+  const HOUR = 60 * MINUTE
+  const DAY = 24 * HOUR
+  $: values = [
+    ...minutes.map((m) => m * MINUTE),
+    'divider',
+    ...hours.map((m) => m * HOUR),
+    'divider',
+    ...days.map((m) => m * DAY)
+  ]
 </script>
 
 <div class="month-popup-container">
@@ -34,12 +53,78 @@
       }
     }}
   />
+  <div class="shift-container">
+    <Scroller>
+      {#each values as value}
+        {#if typeof value === 'number'}
+          <div
+            class="btn"
+            on:click={() => {
+              const shiftedDate = new Date(today.getTime() + value * base)
+              dispatch('change', shiftedDate)
+            }}
+          >
+            <TimeShiftPresenter value={value * base} />
+          </div>
+        {:else if value === 'divider'}
+          <div class="divider" />
+        {/if}
+      {/each}
+    </Scroller>
+  </div>
 </div>
 
 <style lang="scss">
   .month-popup-container {
+    position: relative;
     background: var(--popup-bg-color);
     border-radius: 0.5rem;
     box-shadow: var(--popup-shadow);
+
+    .shift-container {
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      padding: 0.5rem;
+      top: 1rem;
+      right: calc(100% - 3.5rem);
+      bottom: 1rem;
+      width: fit-content;
+      width: 12rem;
+      min-width: 12rem;
+      background: var(--popup-bg-color);
+      border: 1px solid var(--divider-color);
+      border-radius: 0.5rem;
+      box-shadow: var(--popup-shadow);
+      z-index: -1;
+      transition: right 0.1s ease-in-out;
+
+      .btn {
+        flex-shrink: 0;
+        margin-right: 0.75rem;
+        padding: 0.25rem 0.5rem;
+        // font-weight: 500;
+        // color: var(--dark-color);
+        background-color: transparent;
+        border-radius: 0.25rem;
+        cursor: pointer;
+
+        &:hover {
+          color: var(--caption-color);
+          background-color: var(--button-bg-hover);
+        }
+      }
+
+      &:hover {
+        right: calc(100% - 0.5rem);
+      }
+
+      .divider {
+        margin: 0.25rem 0.75rem 0.25rem 0;
+        height: 1px;
+        min-height: 1px;
+        background-color: var(--divider-color);
+      }
+    }
   }
 </style>

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

@@ -111,8 +111,8 @@
     edits = edits
   }
   const saveDate = (): void => {
-    currentDate.setHours(edits[3].value > 0 ? edits[3].value : 0)
+    // currentDate.setHours(edits[3].value > 0 ? edits[3].value : 0)
-    currentDate.setMinutes(edits[4].value > 0 ? edits[4].value : 0)
+    // currentDate.setMinutes(edits[4].value > 0 ? edits[4].value : 0)
     currentDate.setSeconds(0, 0)
     value = currentDate.getTime()
     dateToEdits()

plugins/activity-resources/src/components/TxView.svelte

@@ -135,7 +135,7 @@
 
     <div class="flex-grow flex-col clear-mins">
       <div class="flex-between">
-        <div class="flex-grow label">
+        <div class="flex-row-center flex-grow label">
           <div class="bold">
             {#if employee}
               {formatName(employee.name)}
@@ -162,7 +162,7 @@
               {/if}
             </div>
           {:else if viewlet && viewlet.label}
-            <div class="flex-center">
+            <div class="flex-row-center">
               <span class="lower">
                 <Label label={viewlet.label} params={viewlet.labelParams ?? {}} />
               </span>

plugins/calendar-resources/src/components/CreateReminder.svelte

@@ -16,7 +16,7 @@
   import contact, { Employee, EmployeeAccount } from '@anticrm/contact'
   import { Class, Doc, getCurrentAccount, Ref } from '@anticrm/core'
   import { Card, getClient, UserBoxList } from '@anticrm/presentation'
-  import { DateOrShift, TimeShiftPicker, Grid, StylishEdit } from '@anticrm/ui'
+  import ui, { EditBox, DateRangePresenter } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import calendar from '../plugin'
 
@@ -24,7 +24,7 @@
   export let attachedToClass: Ref<Class<Doc>>
   export let title: string = ''
 
-  let value: DateOrShift = { shift: 30 * 60 * 1000 }
+  let value: number | null | undefined = null
   const currentUser = getCurrentAccount() as EmployeeAccount
   let participants: Ref<Employee>[] = [currentUser.employee]
   const space = calendar.space.PersonalEvents
@@ -37,15 +37,14 @@
   }
 
   async function saveReminder () {
-    let date: number | undefined = undefined
+    let date: number | undefined
-    if (value.date !== undefined) {
+    if (value != null) date = value
-      date = new Date(value.date).getTime()
+    // if (value.date !== undefined) {
-    } else if (value.shift !== undefined) {
+    //   date = new Date(value.date).getTime()
-      date = new Date().getTime() + value.shift
+    // } else if (value.shift !== undefined) {
-    }
+    //   date = new Date().getTime() + value.shift
-    if (date === undefined) {
+    // }
-      return
+    if (date === undefined) return
-    }
     const _id = await client.createDoc(calendar.class.Event, space, {
       attachedTo,
       attachedToClass,
@@ -66,19 +65,15 @@
 <Card
   label={calendar.string.CreateReminder}
   okAction={saveReminder}
-  canSave={title !== undefined &&
+  canSave={title !== undefined && title.trim().length > 0 && participants.length > 0 && value !== undefined}
-    title.trim().length > 0 &&
-    participants.length > 0 &&
-    (value.date !== undefined || value.shift !== undefined)}
   on:close={() => {
     dispatch('close')
   }}
 >
-  <Grid column={1} rowGap={1.75}>
+  <EditBox bind:value={title} placeholder={calendar.string.Title} maxWidth={'37.5rem'} kind={'large-style'} focus />
-    <StylishEdit bind:value={title} label={calendar.string.Title} />
+  <svelte:fragment slot="pool">
-    <div class="antiComponentBox">
+    <!-- <TimeShiftPicker title={calendar.string.Date} bind:value direction="after" /> -->
-      <TimeShiftPicker title={calendar.string.Date} bind:value direction="after" />
+    <DateRangePresenter bind:value withTime={true} editable={true} labelNull={ui.string.SelectDate} />
-    </div>
     <UserBoxList
       _class={contact.class.Employee}
       items={participants}
@@ -96,5 +91,5 @@
         }
       }}
     />
-  </Grid>
+  </svelte:fragment>
 </Card>

plugins/calendar-resources/src/components/DocRemindersPopup.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import { EmployeeAccount } from '@anticrm/contact'
   import { Class, Doc, getCurrentAccount, Ref } from '@anticrm/core'
-  import { Button, showPopup } from '@anticrm/ui'
+  import { Button, showPopup, Label, Scroller, IconAdd } from '@anticrm/ui'
   import { Table } from '@anticrm/view-resources'
   import calendar from '../plugin'
   import CreateReminder from './CreateReminder.svelte'
@@ -31,19 +31,20 @@
   const currentUser = getCurrentAccount() as EmployeeAccount
 </script>
 
-<div class="antiPopup">
+<div class="notifyPopup">
-  <Button label={calendar.string.CreateReminder} kind={'primary'} on:click={(e) => click(e)} />
+  <div class="header flex-between">
-  <div class="ap-space" />
+    <span class="fs-title overflow-label"><Label label={calendar.string.Reminders} /></span>
-  <Table
+    <Button icon={IconAdd} size={'medium'} kind={'transparent'} on:click={(e) => click(e)} />
-    _class={calendar.mixin.Reminder}
+  </div>
-    config={['']}
+  <Scroller>
-    options={{}}
+    <div class="px-4 clear-mins">
-    query={{ attachedTo, state: 'active', participants: currentUser.employee }}
+      <Table
-  />
+        _class={calendar.mixin.Reminder}
+        config={['']}
+        options={{}}
+        query={{ attachedTo, state: 'active', participants: currentUser.employee }}
+        hiddenHeader
+      />
+    </div>
+  </Scroller>
 </div>
-
-<style lang="scss">
-  .antiPopup {
-    padding: 1rem;
-  }
-</style>

plugins/calendar-resources/src/components/RemindersPopup.svelte

@@ -29,11 +29,11 @@
   })
 </script>
 
-<div class="selectPopup reminder" class:justify-center={!remindersCount}>
+<div class="notifyPopup" class:justify-center={!remindersCount}>
+  <div class="header">
+    <span class="fs-title overflow-label"><Label label={calendar.string.Reminders} /></span>
+  </div>
   {#if remindersCount}
-    <div class="header fs-title pl-4 pb-2">
-      <Label label={calendar.string.Reminders} />
-    </div>
     <Scroller>
       <div class="px-4 clear-mins">
         <Table
@@ -46,17 +46,8 @@
       </div>
     </Scroller>
   {:else}
-    <div class="flex-center h-full">
+    <div class="flex-grow flex-center">
       <Label label={calendar.string.NoReminders} />
     </div>
   {/if}
 </div>
-
-<style lang="scss">
-  .reminder {
-    padding: 0.5rem 0;
-    width: fit-content;
-    min-width: 16rem;
-    min-height: 12rem;
-  }
-</style>

plugins/chunter-resources/src/components/activity/TxBacklinkReference.svelte

@@ -61,7 +61,7 @@
       <svelte:component this={targetPresenter.presenter} value={target} />
     </div>
   {/if}
-  <span class="lower">&nbsp; <Label label={chunter.string.In} /></span>
+  <span class="lower"><Label label={chunter.string.In} /></span>
   <div class="ml-2">
     <svelte:component this={presenter.presenter} value={doc} />
   </div>

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

@@ -26,7 +26,7 @@
   $: handlePersonEdit = onEmployeeEdit ?? onEdit
 </script>
 
-<div bind:this={container} class="flex-center container">
+<div bind:this={container} class="flex-row-center clear-mins">
   <div class="over-underline" class:pr-2={shouldShowName}>
     <PersonPresenter {value} onEdit={handlePersonEdit} {shouldShowAvatar} {shouldShowName} />
   </div>
@@ -38,11 +38,6 @@
 </div>
 
 <style lang="scss">
-  .container {
-    width: fit-content;
-    margin-bottom: 0.25rem;
-  }
-
   .status {
     font-weight: 400;
     font-size: 0.875rem;

plugins/notification-resources/src/components/NotificationsPopup.svelte

@@ -49,30 +49,21 @@
   })
 </script>
 
-<div class="selectPopup notification" class:justify-center={notifications.length === 0}>
+<div class="notifyPopup" class:justify-center={notifications.length === 0}>
+  <div class="header">
+    <span class="fs-title overflow-label"><Label label={notification.string.Notifications} /></span>
+  </div>
   {#if notifications.length > 0}
-    <div class="header fs-title pl-4 pb-2">
-      <Label label={notification.string.Notifications} />
-    </div>
     <Scroller>
-      <div class="flex-col px-4 clear-mins">
+      <div class="px-2 clear-mins">
         {#each notifications as n (n._id)}
           <NotificationView notification={n} {viewlets} />
         {/each}
       </div>
     </Scroller>
   {:else}
-    <div class="flex-center h-full">
+    <div class="flex-grow flex-center">
       <Label label={notification.string.NoNotifications} />
     </div>
   {/if}
 </div>
-
-<style lang="scss">
-  .notification {
-    padding: 0.5rem 0;
-    width: fit-content;
-    min-width: 16rem;
-    min-height: 12rem;
-  }
-</style>

plugins/workbench-resources/src/components/Workbench.svelte

@@ -371,7 +371,7 @@
           }}
           notify={hasNotification}
         />
-        <div class="flex-center">
+        <div class="flex-center mt-2">
           <div
             id="profile-button"
             class="cursor-pointer"