UBER-984: UI fixes, Panel auto resize

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
hcengineering · Oct 9, 2023 · d224b42 · d224b42
1 parent 4e08b75
commit d224b42
Show file tree

Hide file tree

Showing 30 changed files with 115 additions and 46 deletions.
diff --git a/dev/prod/src/index.ejs b/dev/prod/src/index.ejs
@@ -6,10 +6,11 @@
 
   <title>Platform</title>
 
-  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-  <link rel="manifest" href="/site.webmanifest">
+  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
+  <link rel="icon" type="image/svg+xml" sizes="any" href="favicon.svg">
+  <link rel="icon" type="image/png" sizes="16x16" href="favicon_16.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="favicon_32.png">
+  <link rel="icon" type="image/png" sizes="192x192" href="favicon_192.png">
 </head>
 
 <body style="margin: 0; overflow: hidden;">

diff --git a/packages/presentation/src/components/DocPopup.svelte b/packages/presentation/src/components/DocPopup.svelte
@@ -58,6 +58,7 @@
   export let readonly = false
   export let disallowDeselect: Ref<Doc>[] | undefined = undefined
   export let created: Doc[] = []
+  export let embedded: boolean = false
 
   let search: string = ''
 
@@ -158,6 +159,7 @@
   class:full-width={width === 'full'}
   class:plainContainer={!shadows}
   class:width-40={width === 'large'}
+  class:embedded
   on:keydown={onKeydown}
   use:resizeObserver={() => {
     dispatch('changeContent')
@@ -230,7 +232,7 @@
       </ListView>
     </div>
   </div>
-  <div class="menu-space" />
+  {#if !embedded}<div class="menu-space" />{/if}
 </div>
 
 <style lang="scss">

diff --git a/packages/presentation/src/components/NavLink.svelte b/packages/presentation/src/components/NavLink.svelte
@@ -58,7 +58,7 @@
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <span
     class:cursor-pointer={!disabled}
-    class:noUnderline
+    class:noUnderline={noUnderline || disabled}
     class:noOverflow
     class:inline
     class:colorInherit
@@ -71,7 +71,7 @@
 {:else}
   <a
     {href}
-    class:noUnderline
+    class:noUnderline={noUnderline || disabled}
     class:noOverflow
     class:inline
     class:colorInherit

diff --git a/packages/presentation/src/components/ObjectPopup.svelte b/packages/presentation/src/components/ObjectPopup.svelte
@@ -46,6 +46,7 @@
   export let create: ObjectCreate | undefined = undefined
   export let readonly = false
   export let disallowDeselect: Ref<Doc>[] | undefined = undefined
+  export let embedded: boolean = false
 
   export let filter: (it: Doc) => boolean = () => {
     return true
@@ -108,6 +109,7 @@
   {create}
   {readonly}
   {disallowDeselect}
+  {embedded}
   on:update
   on:close
   on:changeContent

diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss
@@ -240,8 +240,7 @@
     &__aside {
       width: 25%;
       min-width: var(--panel-aside-width);
-      border-left: 1px solid var(--theme-divider-color);
-
+
       &.float {
         position: absolute;
         flex-shrink: 0;
@@ -252,6 +251,7 @@
         max-width: var(--panel-aside-width);
         height: 100%;
         background-color: var(--theme-panel-color);
+        border-left: 1px solid var(--theme-divider-color);
         border-bottom-right-radius: .45rem;
         box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
         transition: box-shadow 150ms ease 0s, transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss
@@ -23,12 +23,15 @@
   max-width: 17rem;
   max-height: 22rem;
 
-  background: var(--theme-popup-color);
-  border: 1px solid var(--theme-popup-divider);
-  border-radius: .5rem;
-  box-shadow: var(--theme-popup-shadow);
+  &:not(.embedded) {
+    background: var(--theme-popup-color);
+    border: 1px solid var(--theme-popup-divider);
+    border-radius: .5rem;
+    box-shadow: var(--theme-popup-shadow);
+  }
 
-  &.noShadow {
+  &.noShadow,
+  &.embedded {
     background: none;
     border: none;
     box-shadow: none;

diff --git a/packages/ui/src/components/PanelInstance.svelte b/packages/ui/src/components/PanelInstance.svelte
@@ -19,7 +19,7 @@
 
   import { closePanel, PanelProps, panelstore } from '../panelup'
   import { fitPopupElement, popupstore } from '../popups'
-  import { deviceOptionsStore as deviceInfo } from '..'
+  import { deviceOptionsStore as deviceInfo, resizeObserver } from '..'
   import type { AnySvelteComponent, PopupOptions, DeviceOptions } from '../types'
   import Spinner from './Spinner.svelte'
 
@@ -45,6 +45,7 @@
   }
 
   let component: AnySvelteComponent | undefined
+  let keepSize: boolean = false
 
   let props: PanelProps | undefined
   function _close () {
@@ -107,8 +108,16 @@
     }
   }
 
+  const checkResize = (el: Element) => {
+    if (props) fitPopup(props, contentPanel)
+  }
+
   afterUpdate(() => {
     if (props) fitPopup(props, contentPanel)
+    if (!keepSize && props?.element === 'content' && contentPanel !== undefined) {
+      keepSize = true
+      resizeObserver(contentPanel, checkResize)
+    }
   })
   export function fitPopupInstance (): void {
     if (props) fitPopup(props, contentPanel)

diff --git a/packages/ui/src/components/SelectPopup.svelte b/packages/ui/src/components/SelectPopup.svelte
@@ -52,6 +52,7 @@
   export let size: 'small' | 'medium' | 'large' = 'small'
   export let onSelect: ((value: ValueType['id']) => void) | undefined = undefined
   export let showShadow: boolean = true
+  export let embedded: boolean = false
 
   let search: string = ''
 
@@ -101,6 +102,7 @@
   class:noShadow={showShadow === false}
   class:full-width={width === 'full'}
   class:max-width-40={width === 'large'}
+  class:embedded
   use:resizeObserver={() => {
     dispatch('changeContent')
   }}
@@ -179,5 +181,5 @@
       </ListView>
     </div>
   </div>
-  <div class="menu-space" />
+  {#if !embedded}<div class="menu-space" />{/if}
 </div>
diff --git a/packages/ui/src/components/Separator.svelte b/packages/ui/src/components/Separator.svelte
@@ -26,7 +26,7 @@
   export let prevElementSize: SeparatedItem | undefined = undefined
   export let nextElementSize: SeparatedItem | undefined = undefined
   export let separatorSize: number = 1
-  export let color: string = 'var(--theme-navpanel-border)'
+  export let color: string = 'var(--theme-divider-color)'
   export let name: string
   export let index: number // index = -1 ; for custom sizes without saving to a localStorage
 
@@ -412,7 +412,7 @@
     &::before {
       position: absolute;
       content: '';
-      z-index: 10;
+      z-index: 999;
     }
     &::after {
       background-color: var(--theme-primary-default);

diff --git a/plugins/hr-resources/src/components/Schedule.svelte b/plugins/hr-resources/src/components/Schedule.svelte
@@ -132,7 +132,7 @@
       departmentById={departments}
       on:selected={(e) => departmentSelected(e.detail)}
     />
-    <Separator name={'workbench'} index={0} />
+    <Separator name={'workbench'} index={0} color={'var(--theme-navpanel-border)'} />
   {/if}
 
   <div class="antiPanel-component filled">

diff --git a/plugins/notification-resources/src/components/Inbox.svelte b/plugins/notification-resources/src/components/Inbox.svelte
@@ -139,7 +139,7 @@
 
 <div class="flex-row-top h-full">
   {#if visibileNav}
-    <div class="antiPanel-component header border-right aside min-w-100 flex-no-shrink">
+    <div class="antiPanel-component header aside min-w-100 flex-no-shrink">
       <Tabs
         bind:selected={selectedTab}
         model={tabs}

diff --git a/plugins/recruit-resources/src/components/VacancyPresenter.svelte b/plugins/recruit-resources/src/components/VacancyPresenter.svelte
@@ -46,9 +46,9 @@
     {:else}
       <div class="flex-presenter" use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
         <div class="icon"><Icon icon={recruit.icon.Vacancy} size={'small'} /></div>
-        <span class="label nowrap" class:no-underline={noUnderline || disabled} class:fs-bold={accent}
-          >{value.name}</span
-        >
+        <span class="label nowrap" class:no-underline={noUnderline || disabled} class:fs-bold={accent}>
+          {value.name}
+        </span>
       </div>
     {/if}
   </DocNavLink>

diff --git a/plugins/task-resources/src/components/StatusSelector.svelte b/plugins/task-resources/src/components/StatusSelector.svelte
@@ -10,9 +10,11 @@
   import { IntlString } from '@hcengineering/platform'
 
   export let value: Task | Task[]
+  export let width: 'medium' | 'large' | 'full' = 'medium'
   export let placeholder: IntlString
   export let ofAttribute: Ref<Attribute<Status>>
   export let _class: Ref<Class<Status>>
+  export let embedded: boolean = false
 
   const queryOptions: FindOptions<Status> = {
     lookup: {
@@ -91,6 +93,8 @@
       changeStatus(evt.detail === null ? null : evt.detail?._id)
     }}
     {placeholder}
+    {width}
+    {embedded}
     on:changeContent
   >
     <svelte:fragment slot="item" let:item>

diff --git a/plugins/task-resources/src/components/state/StateEditor.svelte b/plugins/task-resources/src/components/state/StateEditor.svelte
@@ -31,6 +31,7 @@
   export let justify: 'left' | 'center' = 'center'
   export let shouldShowName: boolean = true
   export let shrink: number = 0
+  export let disabled: boolean = false
 
   $: state = $statusStore.get(value)
   let opened: boolean = false
@@ -50,13 +51,13 @@
 </script>
 
 {#if kind === 'list' || kind === 'list-header'}
-  <StatePresenter value={state} {shouldShowName} shouldShowTooltip on:click={handleClick} />
+  <StatePresenter value={state} {shouldShowName} {disabled} shouldShowTooltip on:click={handleClick} />
 {:else}
   <Button {kind} {size} {width} {justify} {shrink} on:click={handleClick}>
     <svelte:fragment slot="content">
       {#if state}
         <div class="pointer-events-none clear-mins">
-          <StatePresenter value={state} {shouldShowName} />
+          <StatePresenter value={state} {shouldShowName} {disabled} />
         </div>
       {/if}
     </svelte:fragment>

diff --git a/plugins/task-resources/src/components/state/StatePresenter.svelte b/plugins/task-resources/src/components/state/StatePresenter.svelte
@@ -32,6 +32,7 @@
   export let shouldShowName: boolean = true
   export let shouldShowTooltip: boolean = false
   export let noUnderline: boolean = false
+  export let shrink: number = 0
 
   const dispatch = createEventDispatcher()
 
@@ -47,7 +48,12 @@
 
 {#if value}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="flex-presenter" class:inline-presenter={inline} on:click>
+  <div
+    class="flex-presenter"
+    class:inline-presenter={inline}
+    class:flex-no-shrink={!shouldShowName || shrink === 0}
+    on:click
+  >
     {#if shouldShowAvatar}
       <div
         class="state-container"
@@ -58,9 +64,9 @@
       />
     {/if}
     {#if shouldShowName}
-      <span class="overflow-label label" class:nowrap={oneLine} class:no-underline={noUnderline || disabled}
-        >{value.name}</span
-      >
+      <span class="overflow-label label" class:nowrap={oneLine} class:no-underline={noUnderline || disabled}>
+        {value.name}
+      </span>
     {/if}
   </div>
 {/if}

diff --git a/plugins/task-resources/src/components/state/StateRefPresenter.svelte b/plugins/task-resources/src/components/state/StateRefPresenter.svelte
@@ -28,14 +28,15 @@
   export let size: ButtonSize = 'medium'
   export let shouldShowName: boolean = true
   export let shrink: number = 0
+  export let disabled: boolean = false
 
   $: state = $statusStore.get(typeof value === 'string' ? value : (value?.values?.[0]?._id as Ref<Status>))
 </script>
 
 {#if value}
   {#if onChange !== undefined && state !== undefined}
-    <StateEditor value={state._id} {space} {onChange} {kind} {size} {shouldShowName} {shrink} />
+    <StateEditor value={state._id} {space} {onChange} {kind} {size} {shouldShowName} {shrink} {disabled} />
   {:else}
-    <StatePresenter value={state} {shouldShowName} on:accent-color />
+    <StatePresenter value={state} {shouldShowName} {disabled} {shrink} on:accent-color />
   {/if}
 {/if}
diff --git a/plugins/tracker-resources/src/components/components/ComponentPresenter.svelte b/plugins/tracker-resources/src/components/components/ComponentPresenter.svelte
@@ -24,7 +24,7 @@
   export let value: WithLookup<Component> | undefined
   export let shouldShowAvatar = true
   export let onClick: (() => void) | undefined = undefined
-  export let disabled = false
+  export let disabled: boolean = false
   export let inline: boolean = false
   export let accent: boolean = false
   export let noUnderline = false

diff --git a/plugins/tracker-resources/src/components/components/ComponentRefPresenter.svelte b/plugins/tracker-resources/src/components/components/ComponentRefPresenter.svelte
@@ -21,10 +21,12 @@
 
   export let value: Ref<Component> | AggregateValue | undefined
   export let kind: 'list' | undefined = undefined
+  export let disabled: boolean = false
+  export let accent: boolean = false
 
   $: componentValue = $componentStore.get(
     typeof value === 'string' ? value : (value?.values?.[0]?._id as Ref<Component>)
   )
 </script>
 
-<ComponentPresenter value={componentValue} {kind} on:accent-color />
+<ComponentPresenter value={componentValue} {kind} {disabled} {accent} on:accent-color />
diff --git a/plugins/tracker-resources/src/components/issues/PriorityRefPresenter.svelte b/plugins/tracker-resources/src/components/issues/PriorityRefPresenter.svelte
@@ -37,7 +37,7 @@
   })
 </script>
 
-<div class="flex-presenter cursor-default">
+<div class="flex-presenter">
   {#if !inline && icon}
     <Icon {icon} {size} fill={'var(--theme-caption-color)'} />
   {/if}

diff --git a/plugins/tracker-resources/src/components/issues/StatusPresenter.svelte b/plugins/tracker-resources/src/components/issues/StatusPresenter.svelte
@@ -27,7 +27,7 @@
 </script>
 
 {#if value}
-  <div class="flex-presenter cursor-default" style:color={'inherit'}>
+  <div class="flex-presenter" style:color={'inherit'}>
     {#if !inline}
       <IssueStatusIcon {value} {size} {space} on:accent-color />
     {/if}

diff --git a/plugins/view-assets/lang/en.json b/plugins/view-assets/lang/en.json
@@ -31,6 +31,7 @@
     "SelectItem": "Select focused item",
     "SelectItemAll": "Select all items",
     "SelectItemNone": "Deselect all items",
+    "NumberItems": "{count, plural, =0 {no items} =1 {1 item} other {# items}}",
 
     "Assigned": "Assigned",
     "Created": "Created",

diff --git a/plugins/view-assets/lang/ru.json b/plugins/view-assets/lang/ru.json
@@ -35,6 +35,7 @@
     "SelectItem": "Выбрать",
     "SelectItemAll": "Выбрать все",
     "SelectItemNone": "Снять все выделения",
+    "NumberItems": "{count, plural, =0 {нет объектов} one {# объект} few {# объекта} other {# объектов}}",
     "Assigned": "Назначенные",
     "Created": "Созданные",
     "Subscribed": "Отслеживаемые",