From 338901ab51f78e34468a42dd7939f1b8d154214a Mon Sep 17 00:00:00 2001 From: Alexander Platov Date: Thu, 17 Mar 2022 09:07:38 +0300 Subject: [PATCH] Upd: DataPicker with region selection. Presenters. (#1153) Signed-off-by: Alexander Platov --- packages/presentation/lang/ru.json | 2 +- .../src/components/UserBox.svelte | 34 +---- packages/theme/styles/_layouts.scss | 22 +++- packages/theme/styles/components.scss | 103 +++++++++++++++ packages/ui/lang/en.json | 2 + packages/ui/lang/ru.json | 2 + packages/ui/src/components/DatePicker.svelte | 105 +++++++++------- packages/ui/src/components/DatePopup.svelte | 117 +++++++++++++++--- .../ui/src/components/DatePresenter.svelte | 41 ++++++ packages/ui/src/components/Popup.svelte | 2 +- .../ui/src/components/PopupInstance.svelte | 10 +- packages/ui/src/index.ts | 1 + packages/ui/src/plugin.ts | 2 + packages/ui/src/popups.ts | 8 +- packages/ui/src/types.ts | 8 ++ .../src/components/Activity.svelte | 4 +- plugins/recruit-assets/lang/en.json | 1 + plugins/recruit-assets/lang/ru.json | 1 + .../components/ApplicationPresenter.svelte | 8 +- .../components/VacancyItemPresenter.svelte | 20 ++- .../src/components/VacancyPresenter.svelte | 8 +- .../src/components/review/CreateReview.svelte | 23 ++-- .../components/review/ReviewPresenter.svelte | 8 +- plugins/recruit-resources/src/plugin.ts | 1 + .../src/components/todos/CreateTodo.svelte | 9 +- .../src/components/todos/EditTodo.svelte | 2 +- .../components/todos/TodoItemPresenter.svelte | 13 +- .../src/components/Chat.svelte | 2 +- .../src/components/DatePresenter.svelte | 7 +- tests/sanity/tests/recruit.spec.ts | 2 +- 30 files changed, 420 insertions(+), 148 deletions(-) create mode 100644 packages/ui/src/components/DatePresenter.svelte diff --git a/packages/presentation/lang/ru.json b/packages/presentation/lang/ru.json index f835448870..314cf407ac 100644 --- a/packages/presentation/lang/ru.json +++ b/packages/presentation/lang/ru.json @@ -6,7 +6,7 @@ "Save": "Сохранить", "Download": "Загрузить", "Close": "Закрыть", - "NotSelected": "Не выделено", + "NotSelected": "Не выбрано", "Deselect": "Снять выделение", "AddSocialLinks": "Добавить контактную информацию" } diff --git a/packages/presentation/src/components/UserBox.svelte b/packages/presentation/src/components/UserBox.svelte index 67243fecd1..c70ec8e34a 100644 --- a/packages/presentation/src/components/UserBox.svelte +++ b/packages/presentation/src/components/UserBox.svelte @@ -66,7 +66,7 @@ } -
{ btn.focus() if (!opened) { @@ -85,36 +85,14 @@ } }} > - -
-
-
+
+ + {#if selected}{getName(selected)}{:else}
+
- - diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index 7f9c5fd6d8..e788117975 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -159,6 +159,8 @@ p:last-child { margin-block-end: 0; } .flex-col { display: flex; flex-direction: column; + flex-wrap: nowrap; + min-height: 0; } .flex-col-center { display: flex; @@ -175,6 +177,7 @@ p:last-child { margin-block-end: 0; } .items-baseline { align-items: baseline; } .flex-presenter, .inline-presenter { + flex-wrap: nowrap; cursor: pointer; .icon { @@ -195,11 +198,20 @@ p:last-child { margin-block-end: 0; } -webkit-line-clamp: 2; line-clamp: 2; user-select: none; -} - &:hover .icon { color: var(--theme-caption-color); } - &:hover .label { - text-decoration: underline; - color: var(--theme-caption-color); + + &.nowrap { white-space: nowrap; } + } + .action { + visibility: hidden; + margin-left: .75rem; + } + &:hover { + .icon { color: var(--theme-caption-color); } + .label { + text-decoration: underline; + color: var(--theme-caption-color); + } + .action { visibility: visible; } } } .flex-presenter { diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss index 4569cdd321..c9f09d47e2 100644 --- a/packages/theme/styles/components.scss +++ b/packages/theme/styles/components.scss @@ -424,3 +424,106 @@ border-radius: .75rem; box-shadow: 0px 3px 3px rgba(0, 0, 0, .2); } + +/* Select */ +.antiSelect { + display: flex; + align-items: center; + flex-wrap: nowrap; + min-width: 0; + cursor: pointer; + + .button { + width: 2.25rem; + height: 2.25rem; + background-color: transparent; + border: 1px solid var(--theme-card-divider); + + &.circle { border-radius: 50%; } + &.round-2 { border-radius: .5rem; } + + & > .icon { color: var(--theme-content-trans-color); } + &.selected { + background-color: var(--theme-button-bg-focused); + border: none; + } + &:focus { + border: 1px solid var(--primary-button-focused-border); + box-shadow: 0 0 0 3px var(--primary-button-outline); + & > .icon { color: var(--theme-caption-color); } + } + } + &:hover .button { + background-color: var(--theme-button-bg-pressed); + border: 1px solid var(--theme-bg-accent-color); + & > .icon { color: var(--theme-caption-color); } + } + + .label, .result { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + user-select: none; + min-width: 0; + } + .label { + font-size: .75rem; + font-weight: 500; + color: var(--theme-content-accent-color); + } + .result { + &.selected { color: var(--theme-caption-color); } + &.not-selected { color: var(--theme-content-dark-color); } + &.highlight { + font-weight: 500; + font-size: 1rem; + } + } + + .group { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + margin-left: .75rem; + min-height: 0; + } + .wrap { + position: relative; + display: flex; + align-items: center; + flex-wrap: nowrap; + min-width: 0; + + &::after, &::before { + position: absolute; + width: 6px; + height: 6px; + background-color: var(--primary-button-enabled); + } + &::before { + top: -2px; + left: -4px; + clip-path: path('M0,6v-6h6v1h-5v5z'); + } + &::after { + bottom: -2px; + right: -4px; + clip-path: path('M0,6h6v-6h-1v5h-5z'); + } + &.wraped::before, &.wraped::after { content: ''; } + } + + .divider { + margin: 0 .125rem; + font-weight: 500; + font-size: .75em; + color: var(--theme-content-dark-color); + + &.inter { font-size: 1em; } + &.max { + margin: 0 .5rem; + font-size: .75rem; + color: var(--theme-content-trans-color); + } + } +} diff --git a/packages/ui/lang/en.json b/packages/ui/lang/en.json index 6eea16d4d2..7ee945535c 100644 --- a/packages/ui/lang/en.json +++ b/packages/ui/lang/en.json @@ -12,6 +12,8 @@ "Suggested": "Suggested", "TimeTooltip": "{value}", "None": "None", + "NotSelected": "Not selected", + "Today": "Today", "English": "English", "Russian": "Russian" } diff --git a/packages/ui/lang/ru.json b/packages/ui/lang/ru.json index 3735f55c64..a98fba401c 100644 --- a/packages/ui/lang/ru.json +++ b/packages/ui/lang/ru.json @@ -12,6 +12,8 @@ "Suggested": "Предложено", "TimeTooltip": "{value}", "None": "Нет", + "NotSelected": "Не выбрано", + "Today": "Сегодня", "English": "Английский", "Russian": "Русский" } diff --git a/packages/ui/src/components/DatePicker.svelte b/packages/ui/src/components/DatePicker.svelte index 42be6be708..036064266f 100644 --- a/packages/ui/src/components/DatePicker.svelte +++ b/packages/ui/src/components/DatePicker.svelte @@ -13,64 +13,83 @@ // limitations under the License. --> -
+
{ + btn.focus() + if (!opened) { + opened = true + showPopup(DatePopup, { title, value, range }, container, onClosePopup, onUpdatePopup) + } + }} +> -
-
-
- {selected.getMonth() + 1} / {selected.getDate()} / {selected.getFullYear()} -
+
+ + {#if value !== undefined} +
+ + {#if range !== undefined} + — + + {/if} +
+ {:else} + + {/if}
- - diff --git a/packages/ui/src/components/DatePopup.svelte b/packages/ui/src/components/DatePopup.svelte index 528a1502fb..f19094ce71 100644 --- a/packages/ui/src/components/DatePopup.svelte +++ b/packages/ui/src/components/DatePopup.svelte @@ -14,16 +14,31 @@ -->
@@ -63,6 +106,7 @@ on:click|preventDefault={() => { view.setMonth(view.getMonth() - 1) view = view + renderCellStyles() }}>
{monthYear} @@ -72,6 +116,7 @@ on:click|preventDefault={() => { view.setMonth(view.getMonth() + 1) view = view + renderCellStyles() }}>
@@ -86,14 +131,25 @@
Su
{#each days as day, i}
{ - selected = new Date(view.getFullYear(), view.getMonth(), i + 1) - dispatch('close', selected) + if (firstClick) { + result[0] = new Date(view.getFullYear(), view.getMonth(), i + 1) + value = result[0] + firstClick = false + if (result[1] === undefined) dispatch('close', result) + else dispatch('update', result) + } else { + result[1] = new Date(view.getFullYear(), view.getMonth(), i + 1) + if (result[0] && result[1] && result[0].getTime() > result[1].getTime()) + [result[0], result[1]] = [result[1], result[0]] + value = result[0] + range = result[1] + dispatch('close', result) + } }} > {i + 1} @@ -152,17 +208,40 @@ height: 2.25rem; color: var(--theme-content-dark-color); } - .caption { - font-size: .75rem; - } + .caption { font-size: .75rem; } .day { border-radius: .5rem; + border: 1px solid transparent; cursor: pointer; &.selected { - background-color: var(--theme-button-bg-focused); - border: 1px solid var(--theme-bg-accent-color); + background-color: var(--primary-button-disabled); + border-color: transparent; + color: var(--theme-content-accent-color); + + &-start, &-end { + background-color: var(--primary-button-enabled); + border-color: var(--primary-button-focused-border); + color: var(--primary-button-color); + } + } + &.today { + position: relative; + border-color: var(--theme-content-color); + font-weight: 500; color: var(--theme-caption-color); + + &::after { + position: absolute; + content: attr(data-today); + top: 0; + left: 50%; + transform: translateX(-50%); + font-weight: 600; + font-size: .35rem; + text-transform: uppercase; + color: var(--theme-content-dark-color); + } } } } diff --git a/packages/ui/src/components/DatePresenter.svelte b/packages/ui/src/components/DatePresenter.svelte new file mode 100644 index 0000000000..96a862144b --- /dev/null +++ b/packages/ui/src/components/DatePresenter.svelte @@ -0,0 +1,41 @@ + + + +{#if value !== undefined} +
+ + {#if value === null}--{:else}{inter ? value.getDate() : value.getMonth() + 1}{/if} + + {inter ? '.' : '/'} + + {#if value === null}--{:else}{inter ? value.getMonth() + 1 : value.getDate()}{/if} + + {inter ? '.' : '/'} + + {#if value === null}--{:else}{value.getFullYear()}{/if} + +
+{/if} diff --git a/packages/ui/src/components/Popup.svelte b/packages/ui/src/components/Popup.svelte index 766fcdc7e3..9c39219bd7 100644 --- a/packages/ui/src/components/Popup.svelte +++ b/packages/ui/src/components/Popup.svelte @@ -18,6 +18,6 @@ {#each $modal as popup, i} - + {/each} diff --git a/packages/ui/src/components/PopupInstance.svelte b/packages/ui/src/components/PopupInstance.svelte index e8af260931..024962872a 100644 --- a/packages/ui/src/components/PopupInstance.svelte +++ b/packages/ui/src/components/PopupInstance.svelte @@ -22,6 +22,7 @@ export let props: object export let element: PopupAlignment | undefined export let onClose: ((result: any) => void) | undefined + export let onUpdate: ((result: any) => void) | undefined export let zIndex: number export let top: boolean export let close: () => void @@ -30,7 +31,12 @@ let componentInstance: any let show: boolean = false - function _close (result: any) { + function _update (result: any): void { + if (onUpdate !== undefined) onUpdate(result) + fitPopup() + } + + function _close (result: any): void { if (onClose !== undefined) onClose(result) close() } @@ -104,7 +110,7 @@
- _close(ev.detail) } /> + _update(ev.detail)} on:close={(ev) => _close(ev.detail)} />
escapeClose()} /> diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 03578dec8b..76e7649704 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -46,6 +46,7 @@ export { default as TextArea } from './components/TextArea.svelte' export { default as Section } from './components/Section.svelte' export { default as DatePicker } from './components/DatePicker.svelte' export { default as DatePopup } from './components/DatePopup.svelte' +export { default as DatePresenter } from './components/DatePresenter.svelte' export { default as StylishEdit } from './components/StylishEdit.svelte' export { default as Grid } from './components/Grid.svelte' export { default as Row } from './components/Row.svelte' diff --git a/packages/ui/src/plugin.ts b/packages/ui/src/plugin.ts index a3182dc0b2..e7f81ed8bd 100644 --- a/packages/ui/src/plugin.ts +++ b/packages/ui/src/plugin.ts @@ -37,6 +37,8 @@ export default plugin(uiId, { Suggested: '' as IntlString, TimeTooltip: '' as IntlString, None: '' as IntlString, + NotSelected: '' as IntlString, + Today: '' as IntlString, English: '' as IntlString, Russian: '' as IntlString }, diff --git a/packages/ui/src/popups.ts b/packages/ui/src/popups.ts index ed29a2159f..ee5d526f67 100644 --- a/packages/ui/src/popups.ts +++ b/packages/ui/src/popups.ts @@ -8,6 +8,7 @@ interface CompAndProps { props: any element?: PopupAlignment onClose?: (result: any) => void + onUpdate?: (result: any) => void close: () => void } @@ -23,7 +24,8 @@ export function showPopup ( component: AnySvelteComponent | AnyComponent, props: any, element?: PopupAlignment, - onClose?: (result: any) => void + onClose?: (result: any) => void, + onUpdate?: (result: any) => void ): () => void { const id = `${popupId++}` const closePopupOp = (): void => { @@ -36,9 +38,9 @@ export function showPopup ( }) } if (typeof component === 'string') { - getResource(component).then((resolved) => addPopup({ id, is: resolved, props, element, onClose, close: closePopupOp })).catch((err) => console.log(err)) + getResource(component).then((resolved) => addPopup({ id, is: resolved, props, element, onClose, onUpdate, close: closePopupOp })).catch((err) => console.log(err)) } else { - addPopup({ id, is: component, props, element, onClose, close: closePopupOp }) + addPopup({ id, is: component, props, element, onClose, onUpdate, close: closePopupOp }) } return closePopupOp } diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts index 13d838963b..b260a18bc9 100644 --- a/packages/ui/src/types.ts +++ b/packages/ui/src/types.ts @@ -85,3 +85,11 @@ export interface DropdownTextItem { id: string label: string } + +export type TSelectDate = Date | null | undefined +export type TCellStyle = 'not-selected' | 'selected' | 'selected-start' | 'selected-end' +export interface ICell { + dayOfWeek: number + style: TCellStyle + today?: boolean +} diff --git a/plugins/activity-resources/src/components/Activity.svelte b/plugins/activity-resources/src/components/Activity.svelte index ab7ac92ba3..2f879d931f 100644 --- a/plugins/activity-resources/src/components/Activity.svelte +++ b/plugins/activity-resources/src/components/Activity.svelte @@ -58,7 +58,7 @@ {#if transparent !== undefined && !transparent}
-
+
@@ -90,7 +90,7 @@
-
+
diff --git a/plugins/recruit-assets/lang/en.json b/plugins/recruit-assets/lang/en.json index f6bb603c66..706ab259b1 100644 --- a/plugins/recruit-assets/lang/en.json +++ b/plugins/recruit-assets/lang/en.json @@ -74,6 +74,7 @@ "ReviewShortLabel": "RVE", "StartDate": "Start date", "DueDate": "Due date", + "Period": "Period", "ReviewCategoryTitle":"Category", "Verdict": "Verdict", "OpinionSave": "Save", diff --git a/plugins/recruit-assets/lang/ru.json b/plugins/recruit-assets/lang/ru.json index 5d83fbaf1a..8008cd3e3a 100644 --- a/plugins/recruit-assets/lang/ru.json +++ b/plugins/recruit-assets/lang/ru.json @@ -75,6 +75,7 @@ "ReviewShortLabel": "RVE", "StartDate": "Дата начала", "DueDate": "Дата конца", + "Period": "Период", "ReviewCategoryTitle":"Категория", "Verdict": "Вердикт", "OpinionSave": "Сохранить", diff --git a/plugins/recruit-resources/src/components/ApplicationPresenter.svelte b/plugins/recruit-resources/src/components/ApplicationPresenter.svelte index 381916a3c8..086805a395 100644 --- a/plugins/recruit-resources/src/components/ApplicationPresenter.svelte +++ b/plugins/recruit-resources/src/components/ApplicationPresenter.svelte @@ -22,6 +22,7 @@ import view from '@anticrm/view' export let value: Applicant + export let inline: boolean = false const client = getClient() const shortLabel = client.getHierarchy().getClass(value._class).shortLabel @@ -32,7 +33,10 @@ {#if value && shortLabel} -
-  {#if shortLabel}