From f0cca26e9b6305e74dc5d6b4ab0112b3a103d6d9 Mon Sep 17 00:00:00 2001 From: Alexander Platov Date: Sat, 16 Apr 2022 06:06:32 +0300 Subject: [PATCH] Update TagEditor layout (#1420) Signed-off-by: Alexander Platov --- packages/presentation/lang/en.json | 2 +- packages/presentation/lang/ru.json | 2 +- .../src/components/UserBoxList.svelte | 2 +- packages/theme/styles/_layouts.scss | 2 + packages/theme/styles/popups.scss | 65 +++++- packages/ui/src/components/Icon.svelte | 2 +- .../ui/src/components/PopupInstance.svelte | 4 +- plugins/recruit-assets/lang/en.json | 3 +- plugins/recruit-assets/lang/ru.json | 3 +- .../src/components/CreateApplication.svelte | 30 +-- .../src/components/CreateCandidate.svelte | 41 ++-- .../src/components/YesNo.svelte | 49 +++-- plugins/recruit-resources/src/plugin.ts | 3 +- .../src/components/CategoryBar.svelte | 35 ++-- .../src/components/TagItem.svelte | 9 +- .../tags-resources/src/components/Tags.svelte | 1 + .../src/components/TagsEditor.svelte | 110 +++------- .../src/components/TagsPopup.svelte | 198 +++++++++++++----- .../src/components/TagsView.svelte | 4 +- .../src/components/icons/View.svelte | 25 +++ .../src/components/icons/ViewHide.svelte | 26 +++ tests/sanity/tests/tags.spec.ts | 16 +- 22 files changed, 391 insertions(+), 241 deletions(-) create mode 100644 plugins/tags-resources/src/components/icons/View.svelte create mode 100644 plugins/tags-resources/src/components/icons/ViewHide.svelte diff --git a/packages/presentation/lang/en.json b/packages/presentation/lang/en.json index 69d8aea00f..b56c8ff544 100644 --- a/packages/presentation/lang/en.json +++ b/packages/presentation/lang/en.json @@ -15,6 +15,6 @@ "Search": "Search...", "Unassigned": "Unassigned", "CreateMore": "Create more", - "NumberMembers": "{lenght, plural, =0 {no members} =1 {1 member} other {# members}}" + "NumberMembers": "{count, plural, =0 {no members} =1 {1 member} other {# members}}" } } diff --git a/packages/presentation/lang/ru.json b/packages/presentation/lang/ru.json index 396f6e8235..159c4389c6 100644 --- a/packages/presentation/lang/ru.json +++ b/packages/presentation/lang/ru.json @@ -15,6 +15,6 @@ "Search": "Поиск...", "Unassigned": "Не назначен", "CreateMore": "Создать еще", - "NumberMembers": "{lenght, plural, =0 {нет участников} =1 {1 участик} other {# участника}}" + "NumberMembers": "{count, plural, =0 {нет участников} =1 {1 участик} other {# участника}}" } } diff --git a/packages/presentation/src/components/UserBoxList.svelte b/packages/presentation/src/components/UserBoxList.svelte index b90f5960fd..30a378320c 100644 --- a/packages/presentation/src/components/UserBoxList.svelte +++ b/packages/presentation/src/components/UserBoxList.svelte @@ -79,7 +79,7 @@ {#if persons.length > 0}
- {#await translate(presentation.string.NumberMembers, { lenght: persons.length }) then text} + {#await translate(presentation.string.NumberMembers, { count: persons.length }) then text} {text} {/await}
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index 145aa44989..1482b17517 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -296,6 +296,7 @@ p:last-child { margin-block-end: 0; } .ml-12 { margin-left: 3rem; } .ml-22 { margin-left: 5.5rem; } .mr-1 { margin-right: .25rem; } +.mr-1-5 { margin-right: .375rem; } .mr-2 { margin-right: .5rem; } .mr-3 { margin-right: .75rem; } .mr-4 { margin-right: 1rem; } @@ -461,6 +462,7 @@ a.no-line { color: var(--theme-content-trans-color); user-select: none; } +.text-xs { font-size: .625rem; } .text-sm { font-size: .75rem; } .text-md { font-size: .8125rem; } .text-lg { font-size: 1.125rem; } diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss index e71146e1a2..a84574f797 100644 --- a/packages/theme/styles/popups.scss +++ b/packages/theme/styles/popups.scss @@ -18,18 +18,20 @@ overflow: hidden; display: flex; flex-direction: column; - width: min-content; + width: fit-content; min-width: 10rem; - max-width: 45rem; - max-height: 20rem; + max-width: 15rem; + max-height: 22rem; background: var(--popup-bg-color); border-radius: .5rem; box-shadow: var(--popup-shadow); will-change: transform; + &.maxHeight { height: 22rem; } .header { border-bottom: 1px solid var(--popup-divider); + &.no-border { border-bottom-color: transparent; } input { margin: 0; padding: .625rem .75rem; @@ -59,25 +61,33 @@ .menu-item { flex-shrink: 0; justify-content: start; - padding: 0 .75rem; - height: 2rem; + padding: .25rem .75rem; + min-height: 2rem; text-align: left; color: var(--caption-color); cursor: pointer; &.high { height: 3rem; } - .icon { + + .icon, .color, .tag { + flex-shrink: 0; margin-right: .75rem; + } + .icon { width: 1rem; height: 1rem; } .color { - margin-right: .75rem; width: .875rem; height: .875rem; border: 1px solid rgba(0, 0, 0, .1); border-radius: .25rem; } + .tag { + width: .5rem; + height: .5rem; + border-radius: 50%; + } .label { flex-grow: 1; min-width: 0; @@ -89,11 +99,50 @@ display: flex; align-items: center; margin-right: .75rem; - height: 2rem; } .check-right { margin: 0 0 0 2rem; } &:hover { background-color: var(--popup-bg-hover); } } + .sticky-wrapper { + display: flex; + flex-direction: column; + + &:not(:first-child) { margin-top: 1px; } + } + .menu-group { + overflow: hidden; + display: flex; + flex-direction: column; + height: 0; + transition: height .5s ease; + + &__header { + position: sticky; + top: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: space-between; + padding: .125rem .25rem; + min-height: 1.5rem; + font-weight: 500; + font-size: .75rem; + text-align: left; + color: var(--accent-color); + background-color: var(--button-bg-color); + cursor: pointer; + + .icon { + width: .25rem; + transform-origin: 40% 50%; + transform: rotate(0deg); + transition: transform .15s cubic-bezier(0.175, 0.885, 0.32, 1.275); + } + &.show .icon { transform: rotate(90deg); } + &:hover { color: var(--caption-color); } + &.show + .menu-group { height: auto; } + } + } } .antiPopup { diff --git a/packages/ui/src/components/Icon.svelte b/packages/ui/src/components/Icon.svelte index 40b9e3f8ba..310dd0f8cc 100644 --- a/packages/ui/src/components/Icon.svelte +++ b/packages/ui/src/components/Icon.svelte @@ -17,7 +17,7 @@ import { AnySvelteComponent } from '../types' export let icon: Asset | AnySvelteComponent - export let size: 'x-small' | 'small' | 'medium' | 'large' | 'full' + export let size: 'inline' | 'x-small' | 'small' | 'medium' | 'large' | 'full' export let fill = 'currentColor' export let filled: boolean = false diff --git a/packages/ui/src/components/PopupInstance.svelte b/packages/ui/src/components/PopupInstance.svelte index 8a6d57d500..915ff52259 100644 --- a/packages/ui/src/components/PopupInstance.svelte +++ b/packages/ui/src/components/PopupInstance.svelte @@ -31,6 +31,7 @@ let modalHTML: HTMLElement let componentInstance: any let show: boolean = false + let height: number function _update (result: any): void { if (onUpdate !== undefined) onUpdate(result) @@ -61,11 +62,12 @@ } } afterUpdate(() => fitPopup()) + $: if (height) fitPopup() -
+
_update(ev.detail)} on:close={(ev) => _close(ev.detail)} />
escapeClose()} /> diff --git a/plugins/recruit-assets/lang/en.json b/plugins/recruit-assets/lang/en.json index 7d32645282..c742f5f8bd 100644 --- a/plugins/recruit-assets/lang/en.json +++ b/plugins/recruit-assets/lang/en.json @@ -86,7 +86,8 @@ "Participants": "Participants", "NoParticipants": "No participants added", "PersonsLabel": "{name}", - "AddDescription": "Add description" + "AddDescription": "Add description", + "NumberSkills": "{count, plural, =0 {no skills} =1 {1 skill} other {# skills}}" }, "status": { "CandidateRequired": "Please select candidate", diff --git a/plugins/recruit-assets/lang/ru.json b/plugins/recruit-assets/lang/ru.json index d4e78fde32..719edef14c 100644 --- a/plugins/recruit-assets/lang/ru.json +++ b/plugins/recruit-assets/lang/ru.json @@ -87,7 +87,8 @@ "Participants": "Участники", "NoParticipants": "Участники не добавлены", "PersonsLabel": "{name}", - "AddDescription": "Add description" + "AddDescription": "Add description", + "NumberSkills": "{count, plural, =0 {нет навыков} =1 {1 навык} =2 {2 навыка} other {# навыков}}" }, "status": { "CandidateRequired": "Пожалуйста выберите кандидата", diff --git a/plugins/recruit-resources/src/components/CreateApplication.svelte b/plugins/recruit-resources/src/components/CreateApplication.svelte index 6e395a8489..9a78344c0d 100644 --- a/plugins/recruit-resources/src/components/CreateApplication.svelte +++ b/plugins/recruit-resources/src/components/CreateApplication.svelte @@ -231,22 +231,22 @@ + {/if} + + + diff --git a/plugins/tags-resources/src/components/TagsPopup.svelte b/plugins/tags-resources/src/components/TagsPopup.svelte index 2fe4d64af5..c429ecbc63 100644 --- a/plugins/tags-resources/src/components/TagsPopup.svelte +++ b/plugins/tags-resources/src/components/TagsPopup.svelte @@ -15,27 +15,38 @@ -
-
-
-
- - -
- +
+
+
+
+ +
+
+
{ + search = '' + searchElement.focus() + }}> + {#if search !== ''}
{/if}
- - -
-
-
-
-
- {#each available as element} -
{ - addTag(element) - }} - > -
- { - addTag(element) - }} - /> +
+
+ {#each categories as cat} + {#if objects.filter(el => el.category === cat._id).length > 0} +
+ +
+ {#each objects.filter(el => el.category === cat._id) as element} + + {/each} +
-
+ {/if} {/each} + {#if objects.length === 0} +
+
+ {/if}
-
-
+ + diff --git a/plugins/tags-resources/src/components/TagsView.svelte b/plugins/tags-resources/src/components/TagsView.svelte index e4adb8fb12..1c080c7131 100644 --- a/plugins/tags-resources/src/components/TagsView.svelte +++ b/plugins/tags-resources/src/components/TagsView.svelte @@ -42,7 +42,7 @@ } } - function showCreateDialog (ev: Event) { + function showCreateDialog () { showPopup(CreateTagElement, { targetClass, keyTitle }, 'top') } const opt: FindOptions = { @@ -65,7 +65,7 @@ updateResultQuery(search, category) }} /> -
+ + + + + + + diff --git a/plugins/tags-resources/src/components/icons/ViewHide.svelte b/plugins/tags-resources/src/components/icons/ViewHide.svelte new file mode 100644 index 0000000000..77588a0c14 --- /dev/null +++ b/plugins/tags-resources/src/components/icons/ViewHide.svelte @@ -0,0 +1,26 @@ + + + + + + + + + diff --git a/tests/sanity/tests/tags.spec.ts b/tests/sanity/tests/tags.spec.ts index cb140ce0f6..09d2619369 100644 --- a/tests/sanity/tests/tags.spec.ts +++ b/tests/sanity/tests/tags.spec.ts @@ -24,17 +24,19 @@ test.describe('recruit tests', () => { // Fill [placeholder="Appleseed"] await page.fill('[placeholder="Appleseed"]', 'Dooliutl') // Click .ml-4 .tooltip-trigger .flex-center - await page.click('#add-tag') + await page.click('button:has-text("Skills")') // Click text=Add/Create Skill Suggested Cancel >> button - await page.click('#new-tag') + await page.click('.buttons-group button:nth-child(3)') // Fill [placeholder="Please\ type\ Skill\ title"] - await page.fill('[placeholder="Please\\ type\\ Skill\\ title"]', 's1') + await page.fill('[placeholder="Please\\ type\\ \\ title"]', 's1') // Click text=Create Skill s1 Please type description here Category Other Create Cancel >> button await page.click('text=Create more Create >> button') + await page.click('button:has-text("Other (1)")') // Click text=s1 await page.click('text=s1') // Click :nth-match(:text("Cancel"), 2) - await page.click('button:has-text("Cancel")') + // await page.click('button:has-text("Cancel")') + await page.keyboard.press('Escape') // Click button:has-text("Create") await page.click('button:has-text("Create")') }) @@ -74,11 +76,13 @@ test.describe('recruit tests', () => { // Click button:has-text("Candidate") await page.click('button:has-text("Candidate")') // Click #add-tag div div - await page.click('#add-tag div div') + await page.click('button:has-text("Skills")') + await page.click('button:has-text("Backend development (1)")') // Click text=java await page.click('text=java') // Click :nth-match(:text("Cancel"), 2) - await page.click('button:has-text("Cancel")') + // await page.click('button:has-text("Cancel")') + await page.keyboard.press('Escape') // Click [placeholder="John"] await page.click('[placeholder="John"]') // Fill [placeholder="John"]