From b6de3da74aa3aff1a09ba8e7801cd2a84d3e3206 Mon Sep 17 00:00:00 2001 From: Alexander Platov Date: Sat, 2 Apr 2022 07:06:48 +0300 Subject: [PATCH] New style (#1253) Signed-off-by: Alexander Platov --- models/tracker/src/index.ts | 12 +- .../presentation/src/components/Card.svelte | 4 +- .../src/components/EditAvatarPopup.svelte | 2 +- .../src/components/MessageBox.svelte | 4 +- .../src/components/PDFViewer.svelte | 4 +- .../src/components/SpaceCreateCard.svelte | 4 +- .../src/components/UserBoxList.svelte | 2 +- .../src/components/UsersPopup.svelte | 2 +- packages/theme/styles/_colors.scss | 58 ++++++ packages/theme/styles/_layouts.scss | 35 +++- packages/theme/styles/common.scss | 84 +++++--- packages/theme/styles/components.scss | 17 +- packages/theme/styles/dialogs.scss | 79 ++++++-- packages/theme/styles/global.scss | 5 +- packages/theme/styles/popups.scss | 96 +++++++-- packages/ui/src/components/Button.svelte | 185 +++++++++++------- packages/ui/src/components/Dialog.svelte | 2 +- packages/ui/src/components/EditBox.svelte | 80 ++++---- .../ui/src/components/EditWithIcon.svelte | 28 +-- packages/ui/src/components/MiniToggle.svelte | 98 ++++++++++ .../ui/src/components/PopupInstance.svelte | 11 +- packages/ui/src/components/Toggle.svelte | 34 ++-- .../src/components/calendar/DatePopup.svelte | 2 +- .../ui/src/components/icons/Attachment.svelte | 2 +- packages/ui/src/components/icons/Close.svelte | 4 +- .../ui/src/components/icons/Expand.svelte | 5 +- .../ui/src/components/internal/Root.svelte | 1 + packages/ui/src/index.ts | 1 + .../src/components/CalendarView.svelte | 6 +- .../src/components/DocRemindersPopup.svelte | 2 +- .../src/components/Channels.svelte | 2 +- .../src/components/Contacts.svelte | 2 +- .../src/components/Chats.svelte | 6 +- .../src/components/Connect.svelte | 2 +- .../src/components/FullMessage.svelte | 2 +- .../src/components/NewMessage.svelte | 2 +- .../src/components/Categories.svelte | 3 +- .../src/components/Products.svelte | 3 +- .../src/components/Form.svelte | 2 +- .../src/components/InviteLink.svelte | 6 +- .../src/components/SelectWorkspace.svelte | 2 +- .../components/NotificationSettings.svelte | 2 +- .../src/components/ApplicationsView.svelte | 2 +- .../src/components/Candidates.svelte | 2 +- .../src/components/Vacancies.svelte | 2 +- .../src/components/Password.svelte | 2 +- .../src/components/PluginCard.svelte | 4 +- .../TxIntegrationDisableReconnect.svelte | 2 +- .../src/components/TagsPopup.svelte | 1 - .../src/components/TagsView.svelte | 2 +- .../src/components/Chat.svelte | 6 +- .../src/components/Connect.svelte | 2 +- .../src/components/Reconnect.svelte | 2 +- .../src/components/Templates.svelte | 4 +- plugins/tracker-assets/assets/icons.svg | 74 +++++++ plugins/tracker-assets/lang/en.json | 12 ++ plugins/tracker-assets/lang/ru.json | 14 +- plugins/tracker-assets/src/index.ts | 20 +- .../src/components/Card.svelte | 38 ++-- .../src/components/CreateIssue.svelte | 89 +++++++-- .../src/components/NewIssueHeader.svelte | 16 +- .../src/components/SelectPopup.svelte | 64 ++++++ plugins/tracker-resources/src/plugin.ts | 14 +- plugins/tracker/src/index.ts | 21 +- .../view-resources/src/components/Move.svelte | 4 +- .../src/components/AppItem.svelte | 2 +- .../src/components/Navigator.svelte | 17 +- .../src/components/SpaceHeader.svelte | 4 +- .../src/components/Workbench.svelte | 9 +- .../src/components/navigator/SpacesNav.svelte | 4 +- .../navigator/SpecialElement.svelte | 6 +- .../components/navigator/TreeElement.svelte | 29 ++- .../src/components/navigator/TreeNode.svelte | 6 +- plugins/workbench/src/index.ts | 1 + tests/sanity/tests/settings.spec.ts | 8 +- 75 files changed, 1007 insertions(+), 379 deletions(-) create mode 100644 packages/ui/src/components/MiniToggle.svelte create mode 100644 plugins/tracker-resources/src/components/SelectPopup.svelte diff --git a/models/tracker/src/index.ts b/models/tracker/src/index.ts index 1e9d13ecb5..b199598dd7 100644 --- a/models/tracker/src/index.ts +++ b/models/tracker/src/index.ts @@ -156,21 +156,21 @@ export function createModel (builder: Builder): void { id: 'inbox', position: 'top', label: tracker.string.Inbox, - icon: tracker.icon.TrackerApplication, + icon: tracker.icon.Inbox, component: tracker.component.Inbox }, { id: 'my-issues', position: 'top', label: tracker.string.MyIssues, - icon: tracker.icon.TrackerApplication, + icon: tracker.icon.MyIssues, component: tracker.component.MyIssues }, { id: 'views', position: 'top', label: tracker.string.Views, - icon: tracker.icon.TrackerApplication, + icon: tracker.icon.Views, component: tracker.component.Views } ], @@ -178,14 +178,14 @@ export function createModel (builder: Builder): void { { label: tracker.string.Teams, spaceClass: tracker.class.Team, - // icon: tracker.icon.TrackerApplication, addSpaceLabel: tracker.string.CreateTeam, createComponent: tracker.component.CreateTeam, + icon: tracker.icon.Home, specials: [ { id: 'issues', label: tracker.string.Issues, - icon: tracker.icon.TrackerApplication, + icon: tracker.icon.Issues, component: tracker.component.Issues }, { @@ -209,7 +209,7 @@ export function createModel (builder: Builder): void { { id: 'projects', label: tracker.string.Projects, - icon: tracker.icon.TrackerApplication, + icon: tracker.icon.Projects, component: tracker.component.Projects } ] diff --git a/packages/presentation/src/components/Card.svelte b/packages/presentation/src/components/Card.svelte index 859f9564ea..e1fd6bb441 100644 --- a/packages/presentation/src/components/Card.svelte +++ b/packages/presentation/src/components/Card.svelte @@ -58,7 +58,7 @@ {/if}
-
diff --git a/packages/presentation/src/components/EditAvatarPopup.svelte b/packages/presentation/src/components/EditAvatarPopup.svelte index cdd69b4823..f418d8de22 100644 --- a/packages/presentation/src/components/EditAvatarPopup.svelte +++ b/packages/presentation/src/components/EditAvatarPopup.svelte @@ -62,7 +62,7 @@
-
diff --git a/packages/presentation/src/components/PDFViewer.svelte b/packages/presentation/src/components/PDFViewer.svelte index 9bf0fc737c..f30e1a4b7b 100644 --- a/packages/presentation/src/components/PDFViewer.svelte +++ b/packages/presentation/src/components/PDFViewer.svelte @@ -51,8 +51,8 @@
-
{#if contentType && contentType.startsWith('image/') }
diff --git a/packages/presentation/src/components/SpaceCreateCard.svelte b/packages/presentation/src/components/SpaceCreateCard.svelte index 9347090874..179a92aef9 100644 --- a/packages/presentation/src/components/SpaceCreateCard.svelte +++ b/packages/presentation/src/components/SpaceCreateCard.svelte @@ -39,7 +39,7 @@
-
diff --git a/packages/presentation/src/components/UserBoxList.svelte b/packages/presentation/src/components/UserBoxList.svelte index c228d0c414..565a4021cd 100644 --- a/packages/presentation/src/components/UserBoxList.svelte +++ b/packages/presentation/src/components/UserBoxList.svelte @@ -79,7 +79,7 @@ {/if} {#each persons as person}
- +
removePerson(person)} />
diff --git a/packages/presentation/src/components/UsersPopup.svelte b/packages/presentation/src/components/UsersPopup.svelte index c5de2d3093..a9c6001692 100644 --- a/packages/presentation/src/components/UsersPopup.svelte +++ b/packages/presentation/src/components/UsersPopup.svelte @@ -55,7 +55,7 @@
{#each objects as person} diff --git a/packages/ui/src/components/Dialog.svelte b/packages/ui/src/components/Dialog.svelte index 67d0dc73e4..2666a508ee 100644 --- a/packages/ui/src/components/Dialog.svelte +++ b/packages/ui/src/components/Dialog.svelte @@ -43,7 +43,7 @@
-
diff --git a/packages/ui/src/components/EditBox.svelte b/packages/ui/src/components/EditBox.svelte index ed096503d4..3d9e226d3c 100644 --- a/packages/ui/src/components/EditBox.svelte +++ b/packages/ui/src/components/EditBox.svelte @@ -29,6 +29,7 @@ export let placeholder: IntlString = plugin.string.EditBoxPlaceholder export let placeholderParam: any | undefined = undefined export let format: 'text'| 'password' | 'number' = 'text' + export let kind: 'editbox' | 'large-style' = 'editbox' export let focus: boolean = false const dispatch = createEventDispatcher() @@ -66,61 +67,62 @@ }) -
{ input.focus() }}> -
+
{ input.focus() }}> +
{#if label}
{/if} -
+
{#if icon}
{/if} -
- {#if format === 'password'} - ev.target && computeSize(ev.target)} on:change/> - {:else if format === 'number'} - ev.target && computeSize(ev.target)} on:change/> - {:else} - ev.target && computeSize(ev.target)} on:change/> - {/if} -
+ {#if format === 'password'} + ev.target && computeSize(ev.target)} on:change/> + {:else if format === 'number'} + ev.target && computeSize(ev.target)} on:change/> + {:else} + ev.target && computeSize(ev.target)} on:change/> + {/if}
\ No newline at end of file diff --git a/packages/ui/src/components/EditWithIcon.svelte b/packages/ui/src/components/EditWithIcon.svelte index 592f0e26c6..c76afd3236 100644 --- a/packages/ui/src/components/EditWithIcon.svelte +++ b/packages/ui/src/components/EditWithIcon.svelte @@ -42,7 +42,7 @@
textHTML.focus()}> -
+
{#if value} @@ -54,28 +54,32 @@ diff --git a/packages/ui/src/components/MiniToggle.svelte b/packages/ui/src/components/MiniToggle.svelte new file mode 100644 index 0000000000..dc105fb16f --- /dev/null +++ b/packages/ui/src/components/MiniToggle.svelte @@ -0,0 +1,98 @@ + + + + +
+ + { on = !on }}> +
+ + diff --git a/packages/ui/src/components/PopupInstance.svelte b/packages/ui/src/components/PopupInstance.svelte index 024962872a..ea331e688e 100644 --- a/packages/ui/src/components/PopupInstance.svelte +++ b/packages/ui/src/components/PopupInstance.svelte @@ -60,9 +60,9 @@ const rectPopup = modalHTML.getBoundingClientRect() // Vertical if (rect.bottom + rectPopup.height + 28 <= document.body.clientHeight) { - modalHTML.style.top = `calc(${rect.bottom}px + .75rem)` + 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 + .75rem)` + modalHTML.style.bottom = `calc(${document.body.clientHeight - rect.y}px + 1px)` } else { modalHTML.style.top = modalHTML.style.bottom = '1rem' } @@ -91,7 +91,7 @@ modalHTML.style.right = '0' } } else { - modalHTML.style.top = '50%' + modalHTML.style.top = '25%' modalHTML.style.left = '50%' modalHTML.style.transform = 'translate(-50%, -50%)' show = true @@ -112,7 +112,7 @@
_update(ev.detail)} on:close={(ev) => _close(ev.detail)} />
-
escapeClose()} /> +
escapeClose()} /> diff --git a/packages/ui/src/components/Toggle.svelte b/packages/ui/src/components/Toggle.svelte index 640d8824ca..18f1064fec 100644 --- a/packages/ui/src/components/Toggle.svelte +++ b/packages/ui/src/components/Toggle.svelte @@ -25,10 +25,10 @@ diff --git a/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte b/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte index 44ea571d58..15cbcced67 100644 --- a/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte +++ b/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte @@ -82,10 +82,10 @@ } - [addSpace]} indent={'ml-2'}> + [addSpace]} indent={'ml-2'}> {#each spaces as space (space._id)} {#if model.specials} - getActions(space)}> + getActions(space)}> {#each model.specials as special}
{ dispatch('click') }} diff --git a/plugins/workbench-resources/src/components/navigator/TreeElement.svelte b/plugins/workbench-resources/src/components/navigator/TreeElement.svelte index 4288a414b2..10200a4b8c 100644 --- a/plugins/workbench-resources/src/components/navigator/TreeElement.svelte +++ b/plugins/workbench-resources/src/components/navigator/TreeElement.svelte @@ -13,13 +13,10 @@ // limitations under the License. --> - + \ No newline at end of file diff --git a/plugins/workbench/src/index.ts b/plugins/workbench/src/index.ts index 351cf9b1df..771eecd103 100644 --- a/plugins/workbench/src/index.ts +++ b/plugins/workbench/src/index.ts @@ -42,6 +42,7 @@ export interface SpacesNavModel { spaceClass: Ref> addSpaceLabel: IntlString createComponent: AnyComponent + icon?: Asset // Child special items. specials?: SpecialNavModel[] diff --git a/tests/sanity/tests/settings.spec.ts b/tests/sanity/tests/settings.spec.ts index 111037fcd3..2b62ee8ffc 100644 --- a/tests/sanity/tests/settings.spec.ts +++ b/tests/sanity/tests/settings.spec.ts @@ -75,7 +75,7 @@ test.describe('contact tests', () => { // Click #create-template div await page.click('#create-template div') const tid = 'template-' + generateId() - const t = page.locator('#templates >> .container:has-text("New Template")').last() + const t = page.locator('#templates div:has-text("New Template")').first() await t.click() await t.locator('input').fill(tid) // await page.locator(`#templates >> .container:has-text("${tid}")`).type('Enter') @@ -83,16 +83,16 @@ test.describe('contact tests', () => { // Click text=Active statuses >> div await page.click('text=Active statuses >> div') - const s1 = page.locator('.container:has-text("New State")').first() + const s1 = page.locator('.states:has-text("New State")').first() await s1.click() await s1.locator('input').fill('State1') await page.click('text=Active statuses >> div') - const s2 = page.locator('.container:has-text("New State")').first() + const s2 = page.locator('.states:has-text("New State")').first() await s2.click() await s2.locator('input').fill('State2') await page.click('text=Active statuses >> div') - const s3 = page.locator('.container:has-text("New State")').first() + const s3 = page.locator('.states:has-text("New State")').first() await s3.click() await s3.locator('input').fill('State3') })