From c25c5cfdadae1935781740978ec0eeedf85fb18b Mon Sep 17 00:00:00 2001 From: Alexander Platov Date: Thu, 26 May 2022 12:12:02 +0300 Subject: [PATCH] Update reminders layout (#1874) Signed-off-by: Alexander Platov --- .../src/components/AttributesBar.svelte | 2 +- .../src/components/EditableAvatar.svelte | 2 +- packages/theme/styles/_colors.scss | 2 +- packages/theme/styles/popups.scss | 25 ++++++ .../calendar/DatePickerPopup.svelte | 6 +- .../components/calendar/DateRangePopup.svelte | 85 +++++++++++++++++++ .../calendar/DateRangePresenter.svelte | 4 +- .../src/components/TxView.svelte | 4 +- .../src/components/CreateReminder.svelte | 37 ++++---- .../src/components/DocRemindersPopup.svelte | 33 +++---- .../src/components/RemindersPopup.svelte | 19 ++--- .../activity/TxBacklinkReference.svelte | 2 +- .../src/components/EmployeePresenter.svelte | 7 +- .../src/components/NotificationsPopup.svelte | 21 ++--- .../src/components/Workbench.svelte | 2 +- 15 files changed, 167 insertions(+), 84 deletions(-) diff --git a/packages/presentation/src/components/AttributesBar.svelte b/packages/presentation/src/components/AttributesBar.svelte index 81819a7aa0..10250781b7 100644 --- 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; diff --git a/packages/presentation/src/components/EditableAvatar.svelte b/packages/presentation/src/components/EditableAvatar.svelte index 0463b21e87..c608b1c763 100644 --- 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 } diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss index 934198e59d..9369076ec3 100644 --- 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; diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss index de5275828b..8f426af3ff 100644 --- 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; } diff --git a/packages/ui/src/components/calendar/DatePickerPopup.svelte b/packages/ui/src/components/calendar/DatePickerPopup.svelte index 4ff42d23ff..f8d0b9a765 100644 --- 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) { diff --git a/packages/ui/src/components/calendar/DateRangePopup.svelte b/packages/ui/src/components/calendar/DateRangePopup.svelte index f549d830b3..254d07ae04 100644 --- 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) + ]
@@ -34,12 +53,78 @@ } }} /> +
+ + {#each values as value} + {#if typeof value === 'number'} +
{ + const shiftedDate = new Date(today.getTime() + value * base) + dispatch('change', shiftedDate) + }} + > + +
+ {:else if value === 'divider'} +
+ {/if} + {/each} + +
diff --git a/packages/ui/src/components/calendar/DateRangePresenter.svelte b/packages/ui/src/components/calendar/DateRangePresenter.svelte index 71867e59a8..5007fc6597 100644 --- 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() diff --git a/plugins/activity-resources/src/components/TxView.svelte b/plugins/activity-resources/src/components/TxView.svelte index 46e74a6d4e..35618bf7b5 100644 --- a/plugins/activity-resources/src/components/TxView.svelte +++ b/plugins/activity-resources/src/components/TxView.svelte @@ -135,7 +135,7 @@
-
+
{#if employee} {formatName(employee.name)} @@ -162,7 +162,7 @@ {/if}
{:else if viewlet && viewlet.label} -
+
diff --git a/plugins/calendar-resources/src/components/CreateReminder.svelte b/plugins/calendar-resources/src/components/CreateReminder.svelte index 14783336c2..65102c2ff7 100644 --- 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> 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[] = [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 @@ 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') }} > - - -
- -
+ + + + - + diff --git a/plugins/calendar-resources/src/components/DocRemindersPopup.svelte b/plugins/calendar-resources/src/components/DocRemindersPopup.svelte index 4f32810650..afddd4a33c 100644 --- a/plugins/calendar-resources/src/components/DocRemindersPopup.svelte +++ b/plugins/calendar-resources/src/components/DocRemindersPopup.svelte @@ -15,7 +15,7 @@ -
-