Update reminders layout (#1874)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
2025-04-20 07:10:02 +00:00 · 2022-05-26 12:12:02 +03:00 · 2022-05-26 12:12:02 +03:00 · c25c5cfdad
commit c25c5cfdad
parent ca3cf44c70
15 changed files with 167 additions and 84 deletions
--- a/packages/presentation/src/components/AttributesBar.svelte
+++ b/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;
--- a/packages/presentation/src/components/EditableAvatar.svelte
+++ b/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
      }
--- a/packages/theme/styles/_colors.scss
+++ b/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;
--- a/packages/theme/styles/popups.scss
+++ b/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; }
--- a/packages/ui/src/components/calendar/DatePickerPopup.svelte
+++ b/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)`
-        } else modalHTML.style.top = `calc(${rect.bottom}px + .5rem)`
+          modalHTML.style.bottom = `calc(${document.body.clientHeight - rect.y}px + 1px)`
+        } else modalHTML.style.top = `calc(${rect.bottom}px + 1px)`

        // Horizontal
        if (rect.left + rectPopup.width + 16 > document.body.clientWidth) {
--- a/packages/ui/src/components/calendar/DateRangePopup.svelte
+++ b/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>
--- a/packages/ui/src/components/calendar/DateRangePresenter.svelte
+++ b/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.setMinutes(edits[4].value > 0 ? edits[4].value : 0)
+    // currentDate.setHours(edits[3].value > 0 ? edits[3].value : 0)
+    // currentDate.setMinutes(edits[4].value > 0 ? edits[4].value : 0)
    currentDate.setSeconds(0, 0)
    value = currentDate.getTime()
    dateToEdits()
--- a/plugins/activity-resources/src/components/TxView.svelte
+++ b/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>
--- a/plugins/calendar-resources/src/components/CreateReminder.svelte
+++ b/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
-    if (value.date !== undefined) {
-      date = new Date(value.date).getTime()
-    } else if (value.shift !== undefined) {
-      date = new Date().getTime() + value.shift
-    }
-    if (date === undefined) {
-      return
-    }
+    let date: number | undefined
+    if (value != null) date = value
+    // if (value.date !== undefined) {
+    //   date = new Date(value.date).getTime()
+    // } else if (value.shift !== undefined) {
+    //   date = new Date().getTime() + value.shift
+    // }
+    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 &&
-    title.trim().length > 0 &&
-    participants.length > 0 &&
-    (value.date !== undefined || value.shift !== undefined)}
+  canSave={title !== undefined && title.trim().length > 0 && participants.length > 0 && value !== undefined}
  on:close={() => {
    dispatch('close')
  }}
 >
-  <Grid column={1} rowGap={1.75}>
-    <StylishEdit bind:value={title} label={calendar.string.Title} />
-    <div class="antiComponentBox">
-      <TimeShiftPicker title={calendar.string.Date} bind:value direction="after" />
-    </div>
+  <EditBox bind:value={title} placeholder={calendar.string.Title} maxWidth={'37.5rem'} kind={'large-style'} focus />
+  <svelte:fragment slot="pool">
+    <!-- <TimeShiftPicker title={calendar.string.Date} bind:value direction="after" /> -->
+    <DateRangePresenter bind:value withTime={true} editable={true} labelNull={ui.string.SelectDate} />
    <UserBoxList
      _class={contact.class.Employee}
      items={participants}
@ -96,5 +91,5 @@
        }
      }}
    />
-  </Grid>
+  </svelte:fragment>
 </Card>
--- a/plugins/calendar-resources/src/components/DocRemindersPopup.svelte
+++ b/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">
-  <Button label={calendar.string.CreateReminder} kind={'primary'} on:click={(e) => click(e)} />
-  <div class="ap-space" />
-  <Table
-    _class={calendar.mixin.Reminder}
-    config={['']}
-    options={{}}
-    query={{ attachedTo, state: 'active', participants: currentUser.employee }}
-  />
+<div class="notifyPopup">
+  <div class="header flex-between">
+    <span class="fs-title overflow-label"><Label label={calendar.string.Reminders} /></span>
+    <Button icon={IconAdd} size={'medium'} kind={'transparent'} on:click={(e) => click(e)} />
+  </div>
+  <Scroller>
+    <div class="px-4 clear-mins">
+      <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>
--- a/plugins/calendar-resources/src/components/RemindersPopup.svelte
+++ b/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>
--- a/plugins/chunter-resources/src/components/activity/TxBacklinkReference.svelte
+++ b/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>
--- a/plugins/contact-resources/src/components/EmployeePresenter.svelte
+++ b/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;
--- a/plugins/notification-resources/src/components/NotificationsPopup.svelte
+++ b/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>
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/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"