From 1f702cf239cf6343f1b1912cda9a248dbb34a4e4 Mon Sep 17 00:00:00 2001 From: Alexander Platov Date: Mon, 22 May 2023 01:07:21 +0300 Subject: [PATCH 1/3] UBER-194: add application icons, update layout Signed-off-by: Alexander Platov --- packages/theme/styles/_layouts.scss | 1 + packages/theme/styles/common.scss | 3 + packages/ui/src/components/Scroller.svelte | 4 +- plugins/board-assets/assets/icons.svg | 10 +-- plugins/calendar-assets/assets/icons.svg | 15 +++-- plugins/calendar-assets/src/index.ts | 1 + plugins/calendar/src/index.ts | 3 +- plugins/chunter-assets/assets/icons.svg | 4 +- plugins/contact-assets/assets/icons.svg | 7 +- plugins/devmodel-resources/src/index.ts | 2 +- plugins/document-assets/assets/icons.svg | 4 +- plugins/hr-assets/assets/icons.svg | 9 +-- plugins/inventory-assets/assets/icons.svg | 6 +- plugins/lead-assets/assets/icons.svg | 7 +- plugins/notification-assets/assets/icons.svg | 8 ++- plugins/notification-assets/src/index.ts | 3 +- plugins/notification/src/index.ts | 1 + plugins/recruit-assets/assets/icons.svg | 8 +-- plugins/tracker-assets/assets/icons.svg | 5 +- plugins/view-assets/assets/icons.svg | 4 ++ plugins/view-assets/src/index.ts | 1 + plugins/view/src/index.ts | 1 + .../src/components/App.svelte | 25 +++---- .../src/components/AppItem.svelte | 37 +++++----- .../src/components/Applications.svelte | 5 +- .../src/components/Workbench.svelte | 67 +++++++------------ .../src/components/icons/Settings.svelte | 10 ++- .../src/components/icons/TopMenu.svelte | 10 ++- 28 files changed, 129 insertions(+), 132 deletions(-) diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index 85b07a2a2e..2d8ce605a8 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -395,6 +395,7 @@ input.search { & > :first-child { margin-right: 0; } } } +.gapV-1 > *:not(:last-child) { margin-bottom: .25rem; } .gap-1-5 { &:not(.reverse) > *:not(:last-child) { margin-right: .375rem; } &.reverse > *:not(:first-child) { margin-left: .375rem; } diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss index 48e8a2d035..7555f8cc7e 100644 --- a/packages/theme/styles/common.scss +++ b/packages/theme/styles/common.scss @@ -39,6 +39,9 @@ } &.lastDivider { border-color: var(--theme-navpanel-border); } } +.normal-font .antiPanel-application .app .icon-container.noty { clip-path: url(#notify-normal); } +.small-font .antiPanel-application .app .icon-container.noty { clip-path: url(#notify-small); } + .antiPanel-navigator, .antiPanel-component { flex-grow: 1; diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte index 8b4285043c..eb1db2cf88 100644 --- a/packages/ui/src/components/Scroller.svelte +++ b/packages/ui/src/components/Scroller.svelte @@ -32,7 +32,7 @@ export let invertScroll: boolean = false export let horizontal: boolean = false export let contentDirection: 'vertical' | 'vertical-reverse' | 'horizontal' = 'vertical' - export let gap: 'gap-1' | 'gap-1-5' | 'gap-2' | 'gap-3' | 'gap-around-2' | 'gap-around-4' | undefined = undefined + export let gap: string | undefined = undefined export let noStretch: boolean = autoscroll export let buttons: 'normal' | 'union' | false = false export let shrink: boolean = false @@ -499,7 +499,7 @@
- - - - - + + + + + diff --git a/plugins/calendar-assets/assets/icons.svg b/plugins/calendar-assets/assets/icons.svg index 19cb135b1f..f1b5fd4490 100644 --- a/plugins/calendar-assets/assets/icons.svg +++ b/plugins/calendar-assets/assets/icons.svg @@ -1,13 +1,18 @@ - - + + - - - + + + + + + + + diff --git a/plugins/calendar-assets/src/index.ts b/plugins/calendar-assets/src/index.ts index a7099bc2d0..43a6a7dd19 100644 --- a/plugins/calendar-assets/src/index.ts +++ b/plugins/calendar-assets/src/index.ts @@ -20,6 +20,7 @@ const icons = require('../assets/icons.svg') as string // eslint-disable-line loadMetadata(calendar.icon, { Calendar: `${icons}#calendar`, Reminder: `${icons}#reminder`, + Notifications: `${icons}#notifications`, Location: `${icons}#location` }) diff --git a/plugins/calendar/src/index.ts b/plugins/calendar/src/index.ts index 258fd23ef8..3141d0bf6d 100644 --- a/plugins/calendar/src/index.ts +++ b/plugins/calendar/src/index.ts @@ -71,7 +71,8 @@ const calendarPlugin = plugin(calendarId, { icon: { Calendar: '' as Asset, Location: '' as Asset, - Reminder: '' as Asset + Reminder: '' as Asset, + Notifications: '' as Asset }, space: { // Space for all personal events. diff --git a/plugins/chunter-assets/assets/icons.svg b/plugins/chunter-assets/assets/icons.svg index b138f19dff..543a0262b8 100644 --- a/plugins/chunter-assets/assets/icons.svg +++ b/plugins/chunter-assets/assets/icons.svg @@ -1,6 +1,6 @@ - - + + diff --git a/plugins/contact-assets/assets/icons.svg b/plugins/contact-assets/assets/icons.svg index 9fc65afd25..b95bdc3ce2 100644 --- a/plugins/contact-assets/assets/icons.svg +++ b/plugins/contact-assets/assets/icons.svg @@ -1,8 +1,7 @@ - - - - + + + diff --git a/plugins/devmodel-resources/src/index.ts b/plugins/devmodel-resources/src/index.ts index c956f1b858..a3fbbccb61 100644 --- a/plugins/devmodel-resources/src/index.ts +++ b/plugins/devmodel-resources/src/index.ts @@ -150,7 +150,7 @@ export async function Hook (client: AccountClient): Promise { core.space.Model, { label: 'DevModel' as IntlString, - icon: view.icon.Model, + icon: view.icon.DevModel, alias: devModelId, hidden: false, navigatorModel: { diff --git a/plugins/document-assets/assets/icons.svg b/plugins/document-assets/assets/icons.svg index 19ed29fd7e..8b1a827cf3 100644 --- a/plugins/document-assets/assets/icons.svg +++ b/plugins/document-assets/assets/icons.svg @@ -1,6 +1,6 @@ - - + + diff --git a/plugins/hr-assets/assets/icons.svg b/plugins/hr-assets/assets/icons.svg index 9c08d8d268..80c8c68c82 100644 --- a/plugins/hr-assets/assets/icons.svg +++ b/plugins/hr-assets/assets/icons.svg @@ -6,10 +6,11 @@ - - - - + + + + + diff --git a/plugins/inventory-assets/assets/icons.svg b/plugins/inventory-assets/assets/icons.svg index 703824cad0..dd850822f1 100644 --- a/plugins/inventory-assets/assets/icons.svg +++ b/plugins/inventory-assets/assets/icons.svg @@ -1,8 +1,6 @@ - - - + + diff --git a/plugins/lead-assets/assets/icons.svg b/plugins/lead-assets/assets/icons.svg index a7ca67ddef..aafffb3783 100644 --- a/plugins/lead-assets/assets/icons.svg +++ b/plugins/lead-assets/assets/icons.svg @@ -3,11 +3,8 @@ - - - + + diff --git a/plugins/notification-assets/assets/icons.svg b/plugins/notification-assets/assets/icons.svg index ddd2706547..b7bb767c8d 100644 --- a/plugins/notification-assets/assets/icons.svg +++ b/plugins/notification-assets/assets/icons.svg @@ -1,7 +1,9 @@ - - - + + + + + diff --git a/plugins/notification-assets/src/index.ts b/plugins/notification-assets/src/index.ts index 1c986b467d..18f8e7ac28 100644 --- a/plugins/notification-assets/src/index.ts +++ b/plugins/notification-assets/src/index.ts @@ -18,7 +18,8 @@ import notification, { notificationId } from '@hcengineering/notification' const icons = require('../assets/icons.svg') as string // eslint-disable-line loadMetadata(notification.icon, { - Notifications: `${icons}#notification`, + Notifications: `${icons}#notifications`, + Inbox: `${icons}#inbox`, Track: `${icons}#track`, Hide: `${icons}#hide`, DontTrack: `${icons}#donttrack` diff --git a/plugins/notification/src/index.ts b/plugins/notification/src/index.ts index 29fa9b9c1e..e09d399c2e 100644 --- a/plugins/notification/src/index.ts +++ b/plugins/notification/src/index.ts @@ -220,6 +220,7 @@ const notification = plugin(notificationId, { }, icon: { Notifications: '' as Asset, + Inbox: '' as Asset, Track: '' as Asset, DontTrack: '' as Asset, Hide: '' as Asset diff --git a/plugins/recruit-assets/assets/icons.svg b/plugins/recruit-assets/assets/icons.svg index a7f654a761..2930c79550 100644 --- a/plugins/recruit-assets/assets/icons.svg +++ b/plugins/recruit-assets/assets/icons.svg @@ -1,10 +1,6 @@ - - - - - - + + diff --git a/plugins/tracker-assets/assets/icons.svg b/plugins/tracker-assets/assets/icons.svg index 0ee218f69e..00bb4bb485 100644 --- a/plugins/tracker-assets/assets/icons.svg +++ b/plugins/tracker-assets/assets/icons.svg @@ -1,7 +1,6 @@ - - - + + diff --git a/plugins/view-assets/assets/icons.svg b/plugins/view-assets/assets/icons.svg index 33a58de170..2b772a1366 100644 --- a/plugins/view-assets/assets/icons.svg +++ b/plugins/view-assets/assets/icons.svg @@ -86,6 +86,10 @@ + + + + diff --git a/plugins/view-assets/src/index.ts b/plugins/view-assets/src/index.ts index 942723c54d..e5c2ec13ce 100644 --- a/plugins/view-assets/src/index.ts +++ b/plugins/view-assets/src/index.ts @@ -36,6 +36,7 @@ loadMetadata(view.icon, { Views: `${icons}#views`, Pin: `${icons}#pin`, Model: `${icons}#model`, + DevModel: `${icons}#devmodel`, ViewButton: `${icons}#viewButton`, Filter: `${icons}#filter` }) diff --git a/plugins/view/src/index.ts b/plugins/view/src/index.ts index 2e7adad58f..b98a2735f7 100644 --- a/plugins/view/src/index.ts +++ b/plugins/view/src/index.ts @@ -746,6 +746,7 @@ const view = plugin(viewId, { Views: '' as Asset, Pin: '' as Asset, Model: '' as Asset, + DevModel: '' as Asset, ViewButton: '' as Asset, Filter: '' as Asset }, diff --git a/plugins/workbench-resources/src/components/App.svelte b/plugins/workbench-resources/src/components/App.svelte index 6943cbe03c..b21490a4dc 100644 --- a/plugins/workbench-resources/src/components/App.svelte +++ b/plugins/workbench-resources/src/components/App.svelte @@ -38,7 +38,7 @@ use:tooltip={{ label }} >
- +
{#if notify}
{/if} {#if editable} @@ -64,8 +64,8 @@ .app { position: relative; padding: 0; - width: 2.5rem; - height: 2.5rem; + width: 2.25rem; + height: 2.25rem; background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; @@ -79,16 +79,9 @@ margin: 0.125rem 0; } .icon-container { - width: 1.5rem; - height: 1.5rem; + width: 1.25rem; + height: 1.25rem; color: var(--theme-navpanel-icons-color); - - .normal-font &.noty { - clip-path: url(#notify-normal); - } - .small-font &.noty { - clip-path: url(#notify-small); - } } &:hover .icon-container { @@ -102,8 +95,8 @@ } &.selected { - background-color: var(--theme-button-enabled); - border: 1px solid var(--theme-button-border); + background-color: var(--theme-button-pressed); + .icon-container { color: var(--theme-caption-color); } @@ -122,8 +115,8 @@ .marker { position: absolute; - top: 1.25rem; - right: 0.5rem; + top: 1.1rem; + right: 0.375rem; width: 0.425rem; height: 0.425rem; border-radius: 50%; diff --git a/plugins/workbench-resources/src/components/AppItem.svelte b/plugins/workbench-resources/src/components/AppItem.svelte index 000f6396dc..e562ed772e 100644 --- a/plugins/workbench-resources/src/components/AppItem.svelte +++ b/plugins/workbench-resources/src/components/AppItem.svelte @@ -20,13 +20,13 @@ export let label: IntlString export let icon: Asset | AnySvelteComponent export let selected: boolean = false - export let mini: boolean = false + export let size: 'small' | 'medium' | 'large' = 'large' export let notify: boolean = false - @@ -36,35 +36,34 @@ position: relative; flex-shrink: 0; padding: 0; - width: 2.25rem; - height: 2.25rem; background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; cursor: pointer; outline: none; - &.mini, - .icon-container.mini { + &.large { + width: 2.25rem; + height: 2.25rem; + } + &.medium { + width: 2rem; + height: 2rem; + } + &.small, + &.small .icon-container { width: calc(var(--status-bar-height) - 8px); height: calc(var(--status-bar-height) - 8px); border-radius: 0.25rem; } - &.mini.selected { + &.small.selected { background-color: var(--theme-button-pressed); } .icon-container { - width: 1.5rem; - height: 1.5rem; + width: 1.25rem; + height: 1.25rem; color: var(--theme-navpanel-icons-color); - - .normal-font &.noty { - clip-path: url(#notify-normal); - } - .small-font &.noty { - clip-path: url(#notify-small); - } } &:hover .icon-container { @@ -88,7 +87,7 @@ .marker { position: absolute; - top: 1.125rem; + top: 1.1rem; right: 0.375rem; width: 0.425rem; height: 0.425rem; diff --git a/plugins/workbench-resources/src/components/Applications.svelte b/plugins/workbench-resources/src/components/Applications.svelte index 216dd503d9..0a0fc21f49 100644 --- a/plugins/workbench-resources/src/components/Applications.svelte +++ b/plugins/workbench-resources/src/components/Applications.svelte @@ -41,6 +41,7 @@ - + + - + +
{ @@ -613,7 +612,7 @@ {#if $configurationStore.has(calendarId)} showPopup(calendar.component.RemindersPopup, {}, notifyPosition)} /> @@ -627,12 +626,14 @@ />
- - -
(shownMenu = !shownMenu)} tabindex="0"> - -
-
+ (shownMenu = !shownMenu)} + /> +
*:not(:last-child) { margin-right: 0.75rem; @@ -863,7 +846,7 @@ min-width: 1px; max-width: 1px; height: 100%; - background-color: var(--divider-color); + background-color: var(--theme-divider-color); transition: background-color 0.15s ease-in-out; &::before { diff --git a/plugins/workbench-resources/src/components/icons/Settings.svelte b/plugins/workbench-resources/src/components/icons/Settings.svelte index d7850e70a6..5fddf3fb4c 100644 --- a/plugins/workbench-resources/src/components/icons/Settings.svelte +++ b/plugins/workbench-resources/src/components/icons/Settings.svelte @@ -3,11 +3,15 @@ const fill: string = 'currentColor' - + diff --git a/plugins/workbench-resources/src/components/icons/TopMenu.svelte b/plugins/workbench-resources/src/components/icons/TopMenu.svelte index 1f03afb299..6c77b373f8 100644 --- a/plugins/workbench-resources/src/components/icons/TopMenu.svelte +++ b/plugins/workbench-resources/src/components/icons/TopMenu.svelte @@ -3,7 +3,11 @@ const fill: string = 'currentColor' - - - + + + From 176532a02255466665fb13b2289dd202dd19abe2 Mon Sep 17 00:00:00 2001 From: Alexander Platov Date: Mon, 22 May 2023 01:08:36 +0300 Subject: [PATCH 2/3] UBER-166: fixed mobile layout Signed-off-by: Alexander Platov --- packages/theme/styles/panel.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss index eceac107ab..d6d6fe4f84 100644 --- a/packages/theme/styles/panel.scss +++ b/packages/theme/styles/panel.scss @@ -183,7 +183,6 @@ .popupPanel-body__header { display: flex; align-items: center; - height: 100%; min-height: 0; &-wrapper { From 466c0f5cfa79a335504c0dc154539e7f9c4092b5 Mon Sep 17 00:00:00 2001 From: Alexander Platov Date: Mon, 22 May 2023 01:09:39 +0300 Subject: [PATCH 3/3] UBER-185: fixed Inbox list Signed-off-by: Alexander Platov --- packages/ui/src/components/ListView.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/ui/src/components/ListView.svelte b/packages/ui/src/components/ListView.svelte index 21ebe999df..2c8162f5cc 100644 --- a/packages/ui/src/components/ListView.svelte +++ b/packages/ui/src/components/ListView.svelte @@ -91,7 +91,6 @@ user-select: none; .list-item { - flex-grow: 1; margin: 0 0.5rem; min-width: 0; border-radius: 0.25rem;