UBER-345: fixed Inbox. (#3325)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/theme/styles/common.scss

@@ -51,6 +51,7 @@
   min-height: 0;
   overflow: hidden;
   
+  &.header { background-color: var(--theme-comp-header-color); }
   &.filled { background-color: var(--theme-bg-color); }
   &.filledNav { background-color: var(--theme-navpanel-color); }
   &.border-left { border-left: 1px solid var(--theme-divider-color); }

packages/theme/styles/components.scss

@@ -794,16 +794,11 @@
     .inbox-activity__content {
       display: flex;
       flex-direction: column;
-      // flex-grow: 1;
       color: var(--theme-caption-color);
 
       &.shrink { padding: .75rem 0; }
       &:not(.shrink) { padding: 1rem 0; }
-      &.read {
-        opacity: .6;
-
-        .time { color: var(--theme-content-color); }
-      }
+      // &.read {}
     }
     
     .time { color: var(--theme-halfcontent-color); }
@@ -815,8 +810,11 @@
       width: 0.5rem;
       background-color: var(--theme-inbox-notify);
       border-radius: 50%;
-
-      &.people { background-color: var(--theme-inbox-counter-bgcolor); }
+      
+      &.people {
+        top: 1.5rem;
+        background-color: var(--theme-inbox-people-notify);
+      }
     }
     .counter {
       display: flex;
@@ -835,7 +833,7 @@
       }
       &.people {
         color: var(--theme-inbox-people-notify);
-        background-color: var(--theme-inbox-counter-bgcolor);
+        background-color: var(--theme-inbox-people-counter-bgcolor);
       }
     }
     .arrow {
@@ -854,8 +852,16 @@
       border-radius: 0.25rem;
 
       .notify { left: .125rem; }
-      .inbox-activity__content { padding: 1rem 1.25rem; }
-      .counter.float { right: 1.25rem; }
+      .inbox-activity__content {
+        padding: 1rem 1.25rem;
+
+        &.shrink { padding: .75rem 1.25rem; }
+      }
+      .counter {
+        visibility: hidden;
+
+        &.float { right: 1.25rem; }
+      }
       .arrow { right: 1.25rem; }
     }
   }

packages/ui/src/components/Tabs.svelte

@@ -19,12 +19,12 @@
 
   export let model: TabModel
   export let selected = 0
-  export let withPadding: boolean = false
+  export let padding: string | undefined = undefined
   export let noMargin: boolean = false
   export let size: 'small' | 'medium' = 'medium'
 </script>
 
-<TabsControl {model} {withPadding} {noMargin} {size} bind:selected>
+<TabsControl {model} {padding} {noMargin} {size} bind:selected>
   <svelte:fragment slot="rightButtons">
     {#if $$slots.rightButtons}
       <div class="flex">

packages/ui/src/components/TabsControl.svelte

@@ -18,18 +18,12 @@
 
   export let model: TabBase[]
   export let selected = 0
-  export let withPadding: boolean = false
+  export let padding: string | undefined = undefined
   export let noMargin: boolean = false
   export let size: 'small' | 'medium' = 'medium'
 </script>
 
-<div
-  class="flex-stretch tabs-container"
-  class:small={size === 'small'}
-  class:pr-4={withPadding}
-  class:pl-4={withPadding}
-  class:noMargin
->
+<div class="flex-stretch tabs-container" class:small={size === 'small'} style:padding class:noMargin>
   {#each model as tab, i}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div

plugins/notification-resources/src/components/Activity.svelte

@@ -111,6 +111,24 @@
   })
 
   let selected = 0
+
+  function onKeydown (key: KeyboardEvent): void {
+    if (key.code === 'ArrowUp') {
+      key.stopPropagation()
+      key.preventDefault()
+      selected--
+    }
+    if (key.code === 'ArrowDown') {
+      key.stopPropagation()
+      key.preventDefault()
+      selected++
+    }
+    if (key.code === 'Enter') {
+      key.preventDefault()
+      key.stopPropagation()
+      // dispatch('open', selected)
+    }
+  }
 </script>
 
 <ActionContext
@@ -128,6 +146,7 @@
           value={item}
           selected={selected === i}
           {viewlets}
+          on:keydown={onKeydown}
           on:click={() => {
             selected = i
           }}

plugins/notification-resources/src/components/EmployeeInbox.svelte

@@ -136,6 +136,24 @@
       dispatch('dm', id)
     }
   }
+
+  function onKeydown (key: KeyboardEvent): void {
+    if (key.code === 'ArrowUp') {
+      key.stopPropagation()
+      key.preventDefault()
+      selected--
+    }
+    if (key.code === 'ArrowDown') {
+      key.stopPropagation()
+      key.preventDefault()
+      selected++
+    }
+    if (key.code === 'Enter') {
+      key.preventDefault()
+      key.stopPropagation()
+      changeSelected(selected)
+    }
+  }
 </script>
 
 <ActionContext
@@ -144,32 +162,32 @@
   }}
 />
 <div class="flex-between header bottom-divider">
-  <div class="flex-row-center flex-gap-1">
-    <ActionIcon
-      icon={IconBack}
-      size="medium"
-      action={() => {
-        dispatch('close')
-      }}
-    />
+  <div class="flex-row-center">
+    <div class="clear-mins flex-no-shrink mr-4">
+      <ActionIcon
+        icon={IconBack}
+        size="medium"
+        action={() => {
+          dispatch('close')
+        }}
+      />
+    </div>
     {#if employee}
-      <Avatar size="medium" avatar={employee.avatar} />
-      <span class="font-medium">{getName(employee)}</span>
+      <Avatar size="smaller" avatar={employee.avatar} />
+      <span class="font-medium mx-2">{getName(employee)}</span>
     {/if}
     {#if newTxes > 0}
-      <div class="counter">
+      <span class="counter">
         {newTxes}
-      </div>
+      </span>
     {/if}
   </div>
   {#if me !== accountId}
-    <div>
-      <Button label={chunter.string.Message} kind="primary" on:click={openDM} />
-    </div>
+    <Button label={chunter.string.Message} kind="primary" on:click={openDM} />
   {/if}
 </div>
-<div class="clear-mins container">
-  <Scroller>
+<div class="inbox-activity">
+  <Scroller noStretch>
     {#if loading}
       <Loading />
     {:else}
@@ -178,6 +196,7 @@
           value={item}
           selected={selected === i}
           {viewlets}
+          on:keydown={onKeydown}
           on:click={() => {
             selected = i
             changeSelected(selected)
@@ -190,18 +209,21 @@
 
 <style lang="scss">
   .header {
-    padding: 0.5rem 1rem;
-    height: 3.25rem;
+    flex-shrink: 0;
+    padding: 0.625rem 1.25rem 0.625rem 1.75rem;
+    min-width: 0;
+    min-height: 3.25rem;
+    background-color: var(--theme-comp-header-color);
   }
 
   .counter {
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 1.25rem;
-    width: 1.25rem;
-    color: #2b5190;
-    background-color: var(--theme-calendar-today-bgcolor);
+    height: 1.375rem;
+    width: 1.375rem;
+    color: var(--theme-inbox-people-notify);
+    background-color: var(--theme-inbox-people-counter-bgcolor);
     border-radius: 50%;
   }
 </style>

plugins/notification-resources/src/components/Inbox.svelte

@@ -84,7 +84,7 @@
 
 <div class="flex-row-top h-full">
   {#if visibileNav}
-    <div class="antiPanel-component border-right indent aside min-w-100">
+    <div class="antiPanel-component header border-right aside min-w-100 flex-no-shrink">
       {#if selectedEmployee === undefined}
         <Tabs
           bind:selected={selectedTab}
@@ -93,7 +93,7 @@
           on:open={(e) => {
             selectedEmployee = e.detail
           }}
-          withPadding
+          padding={'0 1.75rem'}
           noMargin
           size="small"
         >

plugins/notification-resources/src/components/NotificationView.svelte

@@ -63,17 +63,19 @@
   function showMenu (e: MouseEvent) {
     showPopup(Menu, { object: value, baseMenuClass: value._class }, getEventPositionElement(e))
   }
+
+  let div: HTMLDivElement
+  $: if (selected && div !== undefined) div.focus()
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 {#if doc}
-  <div class="inbox-activity__container" class:selected>
+  <div bind:this={div} class="inbox-activity__container" class:selected tabindex="-1" on:keydown on:click>
     {#if newTxes > 0 && !selected}<div class="notify" />{/if}
     <div
-      class="inbox-activity__content clear-mins"
+      class="inbox-activity__content flex-grow clear-mins"
       class:read={newTxes === 0}
       on:contextmenu|preventDefault={showMenu}
-      on:click
     >
       <div class="flex-row-center flex-no-shrink mr-8">
         {#if presenter}

plugins/notification-resources/src/components/PeopleNotificationsView.svelte

@@ -85,7 +85,7 @@
   >
     {#if newTxes > 0 && !selected}<div class="notify people" />{/if}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div class="inbox-activity__content shrink clear-mins" class:read={newTxes === 0}>
+    <div class="inbox-activity__content shrink flex-grow clear-mins" class:read={newTxes === 0}>
       <div class="flex-row-center gap-2">
         <Avatar avatar={employee?.avatar} size="small" />
         {#if employee}
@@ -124,64 +124,3 @@
     </div>
   </div>
 {/if}
-
-<!-- <style lang="scss">
-  .time {
-    align-self: flex-end;
-    margin-bottom: 0.25rem;
-  }
-
-  .container {
-    margin-right: 0.5rem;
-    margin-left: 0.5rem;
-    display: flex;
-    border-radius: 0.25rem;
-    flex-grow: 1;
-
-    &:focus-visible {
-      outline: none;
-    }
-
-    &:hover {
-      background-color: var(--highlight-hover);
-    }
-    &.selected {
-      background-color: var(--highlight-select);
-
-      &:hover {
-        background-color: var(--highlight-select-hover);
-      }
-    }
-
-    .content {
-      margin-right: 0.5rem;
-      display: flex;
-      flex-grow: 1;
-      padding: 0.5rem 0;      
-    }
-  }
-
-  .notify {
-    height: 0.5rem;
-    width: 0.5rem;
-    min-width: 0.5rem;
-    margin-top: 1.25rem;
-    margin-right: 0.5rem;
-    background-color: #2b5190;
-    border-radius: 50%;
-    &.hidden {
-      opacity: 0;
-    }
-  }
-
-  .counter {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 1.25rem;
-    width: 1.25rem;
-    color: #2b5190;
-    background-color: var(--theme-calendar-today-bgcolor);
-    border-radius: 50%;
-  }
-</style> -->