Update popups layouts (#1864)

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

packages/ui/src/components/Component.svelte

@@ -23,13 +23,14 @@
 
   export let is: AnyComponent
   export let props = {}
+  export let shrink: boolean = true
 
   $: component = is != null ? getResource(is) : Promise.reject(new Error('is not defined'))
 </script>
 
 {#if is}
   {#await component}
-    <Loading />
+    <Loading {shrink} />
   {:then Ctor}
     <ErrorBoundary>
       <Ctor {...props} on:change on:close on:open on:click on:delete>

packages/ui/src/components/Loading.svelte

@@ -15,16 +15,21 @@
 -->
 <script type="ts">
   import Spinner from './Spinner.svelte'
+
+  export let shrink: boolean = false
 </script>
 
-<div class="spinner-container"><div class="inner"><Spinner /></div></div>
+<div class="spinner-container" class:fullHeight={!shrink}><div class="inner"><Spinner /></div></div>
 
 <style lang="scss">
   .spinner-container {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100%;
+
+    &.fullHeight {
+      height: 100%;
+    }
   }
 
   @keyframes makeVisible {

packages/ui/src/components/PanelInstance.svelte

@@ -131,6 +131,7 @@
     <slot name="panel-header" />
     <div
       class="panel-instance"
+      class:anim={props.element === 'float' || props.element === 'content'}
       class:bg={props.element === 'content'}
       bind:this={modalHTML}
       style:top={options.props.top}
@@ -178,11 +179,13 @@
     z-index: 401;
     position: fixed;
     background-color: transparent;
-    will-change: top, bottom, left, right;
-    transition-property: top, bottom, left, right, width, height;
-    transition-duration: 0.15s;
-    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 
+    &.anim {
+      will-change: top, bottom, left, right;
+      transition-property: top, bottom, left, right, width, height;
+      transition-duration: 0.15s;
+      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
     &.bg {
       background-color: var(--body-color);
     }
@@ -196,6 +199,7 @@
       }
     }
   }
+
   .modal-overlay {
     z-index: 400;
     position: fixed;

packages/ui/src/components/PopupInstance.svelte

@@ -97,6 +97,7 @@
 
 <div
   class="popup"
+  class:anim={element === 'float' || element === 'content'}
   bind:this={modalHTML}
   style={`z-index: ${zIndex + 1};`}
   style:top={options.props.top}
@@ -139,10 +140,13 @@
     justify-content: center;
     max-height: calc(100vh - 2rem);
     background-color: transparent;
-    will-change: top, bottom, left, right;
-    transition-property: top, bottom, left, right, width, height;
-    transition-duration: 0.15s;
-    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
+    &.anim {
+      will-change: top, bottom, left, right;
+      transition-property: top, bottom, left, right, width, height;
+      transition-duration: 0.15s;
+      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
   }
   .modal-overlay {
     position: fixed;

plugins/attachment-resources/src/components/Attachments.svelte

@@ -45,7 +45,7 @@
     {/if}
   </div>
 
-  {#if attachments === 0 && !loading}
+  {#if !loading && (attachments === null || attachments === 0)}
     <AttachmentDroppable bind:loading bind:dragover objectClass={_class} {objectId} {space}>
       <div class="flex-col-center mt-5 zone-container" class:solid={dragover}>
         <UploadDuo size={'large'} />

plugins/calendar-assets/lang/en.json

@@ -33,6 +33,7 @@
     "CreatedReminder": "Created a reminder",
     "Reminders": "Reminders",
     "Shift": "Shift",
-    "State": "State"
+    "State": "State",
+    "NoReminders": "No reminders"
   }
 }

plugins/calendar-assets/lang/ru.json

@@ -31,6 +31,7 @@
     "EditReminder": "Редактировать напоминание",
     "CreateReminder": "Создать напоминание",
     "CreatedReminder": "Создал напоминание",
-    "Reminders": "Напоминания"
+    "Reminders": "Напоминания",
+    "NoReminders": "Нет напоминаний"
   }
 }

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

@@ -16,22 +16,47 @@
   import { EmployeeAccount } from '@anticrm/contact'
   import { getCurrentAccount } from '@anticrm/core'
   import { Table } from '@anticrm/view-resources'
+  import { createQuery } from '@anticrm/presentation'
+  import { Label, Scroller } from '@anticrm/ui'
   import calendar from '../plugin'
 
   const currentUser = getCurrentAccount() as EmployeeAccount
+  let remindersCount: number = 0
+
+  const query = createQuery()
+  $: query.query(calendar.mixin.Reminder, { state: 'active', participants: currentUser.employee }, (res) => {
+    remindersCount = res.length
+  })
 </script>
 
-<div class="antiPopup">
-  <Table
-    _class={calendar.mixin.Reminder}
-    config={['']}
-    options={{}}
-    query={{ state: 'active', participants: currentUser.employee }}
-  />
+<div class="selectPopup reminder" class:justify-center={!remindersCount}>
+  {#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
+          _class={calendar.mixin.Reminder}
+          config={['']}
+          options={{}}
+          query={{ state: 'active', participants: currentUser.employee }}
+          hiddenHeader
+        />
+      </div>
+    </Scroller>
+  {:else}
+    <div class="flex-center h-full">
+      <Label label={calendar.string.NoReminders} />
+    </div>
+  {/if}
 </div>
 
 <style lang="scss">
-  .antiPopup {
-    padding: 1rem;
+  .reminder {
+    padding: 0.5rem 0;
+    width: fit-content;
+    min-width: 16rem;
+    min-height: 12rem;
   }
 </style>

plugins/calendar-resources/src/plugin.ts

@@ -36,6 +36,7 @@ export default mergeIds(calendarId, calendar, {
     TableView: '' as IntlString,
     DueMinutes: '' as IntlString,
     DueHours: '' as IntlString,
-    DueDays: '' as IntlString
+    DueDays: '' as IntlString,
+    NoReminders: '' as IntlString
   }
 })

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

@@ -20,7 +20,7 @@
   import { getCurrentAccount, SortingOrder } from '@anticrm/core'
   import type { Notification } from '@anticrm/notification'
   import { createQuery } from '@anticrm/presentation'
-  import { Grid } from '@anticrm/ui'
+  import { Scroller } from '@anticrm/ui'
   import Label from '@anticrm/ui/src/components/Label.svelte'
   import notification from '../plugin'
   import NotificationView from './NotificationView.svelte'
@@ -49,28 +49,30 @@
   })
 </script>
 
-<div class="antiPopup popup">
-  <div class="ap-space" />
-  <div class="ap-scroll">
-    <div class="ap-box">
-      {#if notifications.length > 0}
-        <Grid column={1} rowGap={1.5}>
-          {#each notifications as n (n._id)}
-            <NotificationView notification={n} {viewlets} />
-          {/each}
-        </Grid>
-      {:else}
-        <Label label={notification.string.NoNotifications} />
-      {/if}
+<div class="selectPopup notification" class:justify-center={notifications.length === 0}>
+  {#if notifications.length > 0}
+    <div class="header fs-title pl-4 pb-2">
+      <Label label={notification.string.Notifications} />
     </div>
-  </div>
-  <div class="ap-space" />
+    <Scroller>
+      <div class="flex-col px-4 clear-mins">
+        {#each notifications as n (n._id)}
+          <NotificationView notification={n} {viewlets} />
+        {/each}
+      </div>
+    </Scroller>
+  {:else}
+    <div class="flex-center h-full">
+      <Label label={notification.string.NoNotifications} />
+    </div>
+  {/if}
 </div>
 
 <style lang="scss">
-  .popup {
-    max-width: 55rem;
-    padding: 0.75rem;
-    max-height: 35rem;
+  .notification {
+    padding: 0.5rem 0;
+    width: fit-content;
+    min-width: 16rem;
+    min-height: 12rem;
   }
 </style>

plugins/recruit-resources/src/components/EditVacancy.svelte

@@ -113,7 +113,12 @@
       </div>
     </div>
     <div class="mt-10">
-      <Attachments objectId={object._id} _class={object._class} space={object.space} />
+      <Attachments
+        objectId={object._id}
+        _class={object._class}
+        space={object.space}
+        attachments={object.attachments ?? 0}
+      />
     </div>
     <div class="flex-col mt-10 flex-no-shrink">
       <span class="fs-title text-xl overflow-label mb-2 flex-no-shrink">

plugins/tracker-resources/src/components/CreateIssue.svelte

@@ -153,7 +153,7 @@
         showPopup(
           SetDueDateActionPopup,
           { value: object, shouldSaveOnChange: false },
-          undefined,
+          'top',
           undefined,
           (newDueDate) => newDueDate !== undefined && (object.dueDate = newDueDate)
         )
@@ -166,7 +166,7 @@
         showPopup(
           SetParentIssueActionPopup,
           { value: { ...object, space }, shouldSaveOnChange: false },
-          undefined,
+          'top',
           (selectedIssue) => {
             if (selectedIssue !== undefined) {
               parentIssue = selectedIssue

plugins/view-resources/src/components/Table.svelte

@@ -29,6 +29,7 @@
   export let enableChecking: boolean = false
   export let showNotification: boolean = false
   export let highlightRows: boolean = false
+  export let hiddenHeader: boolean = false
   export let options: FindOptions<Doc> | undefined = undefined
   export let baseMenuClass: Ref<Class<Doc>> | undefined = undefined
   export let config: (BuildModelKey | string)[]
@@ -158,45 +159,47 @@
   <Loading />
 {:then model}
   <table class="antiTable" class:metaColumn={enableChecking || showNotification} class:highlightRows>
-    <thead class="scroller-thead">
-      <tr class="scroller-thead__tr">
-        {#if enableChecking || showNotification}
-          <th>
-            {#if enableChecking && objects?.length > 0}
-              <div class="antiTable-cells__checkCell" class:checkall={checkedSet.size > 0}>
-                <CheckBox
-                  symbol={'minus'}
-                  checked={objects?.length === checkedSet.size && objects?.length > 0}
-                  on:value={(event) => {
-                    check(objects, event.detail)
-                  }}
-                />
-              </div>
-            {/if}
-          </th>
-        {/if}
-        {#each model as attribute}
-          <th
-            class:sortable={attribute.sortingKey}
-            class:sorted={attribute.sortingKey === sortKey}
-            on:click={() => changeSorting(attribute.sortingKey)}
-          >
-            <div class="antiTable-cells">
-              <Label label={attribute.label} />
-              {#if attribute.sortingKey === sortKey}
-                <div class="icon">
-                  {#if sortOrder === SortingOrder.Ascending}
-                    <IconUp size={'small'} />
-                  {:else}
-                    <IconDown size={'small'} />
-                  {/if}
+    {#if !hiddenHeader}
+      <thead class="scroller-thead">
+        <tr class="scroller-thead__tr">
+          {#if enableChecking || showNotification}
+            <th>
+              {#if enableChecking && objects?.length > 0}
+                <div class="antiTable-cells__checkCell" class:checkall={checkedSet.size > 0}>
+                  <CheckBox
+                    symbol={'minus'}
+                    checked={objects?.length === checkedSet.size && objects?.length > 0}
+                    on:value={(event) => {
+                      check(objects, event.detail)
+                    }}
+                  />
                 </div>
               {/if}
-            </div>
-          </th>
-        {/each}
-      </tr>
-    </thead>
+            </th>
+          {/if}
+          {#each model as attribute}
+            <th
+              class:sortable={attribute.sortingKey}
+              class:sorted={attribute.sortingKey === sortKey}
+              on:click={() => changeSorting(attribute.sortingKey)}
+            >
+              <div class="antiTable-cells">
+                <Label label={attribute.label} />
+                {#if attribute.sortingKey === sortKey}
+                  <div class="icon">
+                    {#if sortOrder === SortingOrder.Ascending}
+                      <IconUp size={'small'} />
+                    {:else}
+                      <IconDown size={'small'} />
+                    {/if}
+                  </div>
+                {/if}
+              </div>
+            </th>
+          {/each}
+        </tr>
+      </thead>
+    {/if}
     {#if objects.length}
       <tbody>
         {#each objects as object, row (object._id)}