UBER-307,-308,-310,-311,-312: fixed activity in Inbox (#3298)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
hcengineering · May 31, 2023 · d3a8a80 · d3a8a80
1 parent be78f1d
commit d3a8a80
Show file tree

Hide file tree

Showing 30 changed files with 284 additions and 212 deletions.
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
@@ -142,6 +142,15 @@
   --theme-calendar-holiday-bgcolor: rgba(235, 87, 87, .1);
   --theme-calendar-weekend-bgcolor: rgba(242, 153, 74, .05);
 
+  --theme-inbox-notify: #F47758;
+  --theme-inbox-people-notify: #2B5190;
+  --theme-inbox-activity-bgcolor: #1A1A28;
+  --theme-inbox-activitymsg-bgcolor: rgba(255, 255, 255, .03);
+  --theme-inbox-activitymsg-divider: rgba(255, 255, 255, .1);
+  --theme-inbox-activitymsg-border: rgba(255, 255, 255, .03);
+  --theme-inbox-counter-bgcolor: rgba(255, 255, 255, .06);
+  --theme-inbox-people-counter-bgcolor: rgba(43, 81, 144, .1);
+
   --theme-toggle-sw-color: #fff;
   --theme-toggle-on-sw-color: #fff;
   --theme-toggle-bg-color: rgba(120, 120, 128, 0.32);
@@ -313,6 +322,16 @@
   --theme-calendar-today-bgcolor: rgba(43, 81, 144, .1);
   --theme-calendar-holiday-bgcolor: rgba(235, 87, 87, .1);
   --theme-calendar-weekend-bgcolor: rgba(242, 153, 74, .1);
+
+  --theme-inbox-notify: #F47758;
+  --theme-inbox-people-notify: #2B5190;
+  --theme-inbox-activity-bgcolor: #fff;
+  --theme-inbox-activitymsg-bgcolor: #F2F2F2;
+  --theme-inbox-activitymsg-divider: rgba(0, 0, 0, .1);
+  --theme-inbox-activitymsg-border: rgba(0, 0, 0, .03);
+  --theme-inbox-counter-bgcolor: rgba(0, 0, 0, .06);
+  --theme-inbox-people-counter-bgcolor: rgba(43, 81, 144, .1);
+
   --theme-toggle-sw-color: #fff;
   --theme-toggle-on-sw-color: #fff;
   --theme-toggle-bg-color: rgba(120, 120, 128, 0.32);

diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
@@ -648,6 +648,7 @@ input.search {
 .min-w-8 { min-width: 2rem; }
 .min-w-9 { min-width: 2.25rem; }
 .min-w-80 { min-width: 20rem; }
+.min-w-100 { min-width: 25rem; }
 .min-w-168 { min-width: 42rem; }
 .min-w-min { min-width: min-content; }
 .min-h-0 { min-height: 0; }

diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
@@ -48,6 +48,7 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  min-height: 0;
   overflow: hidden;
 
   &.filled { background-color: var(--theme-bg-color); }

diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
@@ -765,6 +765,102 @@
   }
 }
 
+/* Inbox */
+.inbox-activity {
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  background-color: var(--theme-inbox-activity-bgcolor);
+
+  &__container {
+    position: relative;
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 0;
+    min-width: 0;
+    min-height: 0;
+    font-size: .8125rem;
+    border: 1px solid transparent;
+    outline: none;
+
+    &:not(.selected) {
+      margin: 0 1.75rem;
+      cursor: pointer;
+    }
+
+    .crop-presenter,
+    .inline-presenter { margin: -.3125rem 0; }
+
+    .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); }
+      }
+    }
+
+    .time { color: var(--theme-halfcontent-color); }
+    .notify {
+      position: absolute;
+      top: 1rem;
+      left: -1.125rem;
+      height: 0.5rem;
+      width: 0.5rem;
+      background-color: var(--theme-inbox-notify);
+      border-radius: 50%;
+
+      &.people { background-color: var(--theme-inbox-counter-bgcolor); }
+    }
+    .counter {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 1.375rem;
+      width: 1.375rem;
+      color: var(--theme-dark-color);
+      background-color: var(--theme-inbox-counter-bgcolor);
+      border-radius: 50%;
+
+      &.float {
+        position: absolute;
+        top: .5625rem;
+        right: 0;
+      }
+      &.people {
+        color: var(--theme-inbox-people-notify);
+        background-color: var(--theme-inbox-counter-bgcolor);
+      }
+    }
+    .arrow {
+      position: absolute;
+      top: 1.125rem;
+      right: 0;
+    }
+
+    &:last-child:not(.selected) { border-bottom: 1px solid var(--theme-inbox-activitymsg-divider); }
+    &:not(.selected) + &:not(.selected) { border-top-color: var(--theme-inbox-activitymsg-divider); }
+
+    &.selected {
+      margin: 0 0.5rem;
+      background-color: var(--theme-inbox-activitymsg-bgcolor);
+      border: 1px solid var(--theme-inbox-activitymsg-border);
+      border-radius: 0.25rem;
+
+      .notify { left: .125rem; }
+      .inbox-activity__content { padding: 1rem 1.25rem; }
+      .counter.float { right: 1.25rem; }
+      .arrow { right: 1.25rem; }
+    }
+  }
+}
+
 /* ListView - global style */
 .list-container .category-container .categoryHeader.subLevel.closed {
   border-radius: 0 0 0.25rem 0.25rem;

diff --git a/packages/ui/src/components/Tabs.svelte b/packages/ui/src/components/Tabs.svelte
@@ -20,10 +20,11 @@
   export let model: TabModel
   export let selected = 0
   export let withPadding: boolean = false
+  export let noMargin: boolean = false
   export let size: 'small' | 'medium' = 'medium'
 </script>
 
-<TabsControl {model} {withPadding} {size} bind:selected>
+<TabsControl {model} {withPadding} {noMargin} {size} bind:selected>
   <svelte:fragment slot="rightButtons">
     {#if $$slots.rightButtons}
       <div class="flex">

diff --git a/packages/ui/src/components/TabsControl.svelte b/packages/ui/src/components/TabsControl.svelte
@@ -19,10 +19,17 @@
   export let model: TabBase[]
   export let selected = 0
   export let withPadding: boolean = false
+  export let noMargin: boolean = false
   export let size: 'small' | 'medium' = 'medium'
 </script>
 
-<div class="flex-stretch container" class:small={size === 'small'} class:pr-4={withPadding} class:pl-4={withPadding}>
+<div
+  class="flex-stretch tabs-container"
+  class:small={size === 'small'}
+  class:pr-4={withPadding}
+  class:pl-4={withPadding}
+  class:noMargin
+>
   {#each model as tab, i}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div
@@ -47,15 +54,17 @@
 <slot name="content" {selected} />
 
 <style lang="scss">
-  .container {
+  .tabs-container {
     flex-shrink: 0;
     flex-wrap: nowrap;
-    margin-bottom: 0.5rem;
     width: 100%;
     height: 4.5rem;
     align-items: center;
-    border-bottom: 1px solid var(--divider-color);
+    border-bottom: 1px solid var(--theme-divider-color);
 
+    &:not(.noMargin) {
+      margin-bottom: 0.5rem;
+    }
     &.small {
       height: 3.25rem;
 
@@ -66,18 +75,18 @@
 
     .tab {
       height: 4.5rem;
-      color: var(--dark-color);
+      color: var(--theme-dark-color);
       cursor: pointer;
       user-select: none;
 
       &.selected {
         border-top: 0.125rem solid transparent;
         border-bottom: 0.125rem solid var(--theme-tablist-plain-color);
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
         cursor: default;
       }
       &:not(.selected):hover {
-        color: var(--accent-color);
+        color: var(--theme-content-color);
       }
     }
     .tab + .tab {

diff --git a/plugins/contact-resources/src/components/ContactPresenter.svelte b/plugins/contact-resources/src/components/ContactPresenter.svelte
@@ -24,7 +24,8 @@
 
   export let value: Contact
   export let inline: boolean = false
-  export let disabled = false
+  export let disabled: boolean = false
+  export let accent: boolean = false
   export let maxWidth = ''
 
   function isPerson (value: Contact): boolean {
@@ -42,9 +43,9 @@
 </script>
 
 {#if isEmployee(value)}
-  <EmployeePresenter {disabled} value={toEmployee(value)} {inline} />
+  <EmployeePresenter {disabled} value={toEmployee(value)} {inline} {accent} />
 {:else if isPerson(value)}
-  <PersonPresenter {disabled} {value} {inline} />
+  <PersonPresenter {disabled} {value} {inline} {accent} />
 {:else}
-  <OrganizationPresenter value={toOrg(value)} {inline} {maxWidth} />
+  <OrganizationPresenter value={toOrg(value)} {inline} {accent} {maxWidth} />
 {/if}
diff --git a/plugins/contact-resources/src/components/ContactRefPresenter.svelte b/plugins/contact-resources/src/components/ContactRefPresenter.svelte
@@ -21,15 +21,16 @@
   import ContactPresenter from './ContactPresenter.svelte'
 
   export let value: Ref<Contact>
-  export let disabled = false
+  export let disabled: boolean = false
+  export let accent: boolean = false
   export let maxWidth = ''
-  export let inline = false
+  export let inline: boolean = false
 
   let doc: Contact | undefined
   const query = createQuery()
   $: value && query.query(contact.class.Contact, { _id: value }, (res) => ([doc] = res), { limit: 1 })
 </script>
 
 {#if doc}
-  <ContactPresenter value={doc} {disabled} {maxWidth} {inline} />
+  <ContactPresenter value={doc} {disabled} {maxWidth} {inline} {accent} />
 {/if}
diff --git a/plugins/contact-resources/src/components/EmployeeAccountPresenter.svelte b/plugins/contact-resources/src/components/EmployeeAccountPresenter.svelte
@@ -24,8 +24,9 @@
 
   export let value: Account
   export let avatarSize: IconSize = 'x-small'
-  export let disabled = false
-  export let inline = false
+  export let disabled: boolean = false
+  export let inline: boolean = false
+  export let accent: boolean = false
 
   $: employee = $employeeByIdStore.get((value as EmployeeAccount).employee)
 
@@ -35,11 +36,13 @@
 {#if value}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   {#if employee}
-    <EmployeePresenter value={employee} {disabled} {inline} {avatarSize} />
+    <EmployeePresenter value={employee} {disabled} {inline} {accent} {avatarSize} />
   {:else}
     <div class="flex-row-center">
       <Avatar size={avatarSize} />
-      <span class="overflow-label user" use:tooltip={{ label: valueLabel }}><Label label={valueLabel} /></span>
+      <span class="overflow-label user" class:fs-bold={accent} use:tooltip={{ label: valueLabel }}>
+        <Label label={valueLabel} />
+      </span>
     </div>
   {/if}
 {/if}

diff --git a/plugins/contact-resources/src/components/EmployeeAccountRefPresenter.svelte b/plugins/contact-resources/src/components/EmployeeAccountRefPresenter.svelte
@@ -22,8 +22,9 @@
 
   export let value: Ref<EmployeeAccount>
   export let avatarSize: IconSize = 'x-small'
-  export let disabled = false
-  export let inline = false
+  export let disabled: boolean = false
+  export let inline: boolean = false
+  export let accent: boolean = false
 
   $: account = $employeeAccountByIdStore.get(value)
 </script>

diff --git a/plugins/contact-resources/src/components/MemberPresenter.svelte b/plugins/contact-resources/src/components/MemberPresenter.svelte
@@ -22,14 +22,15 @@
   export let value: Member
   export let disabled: boolean = false
   export let inline: boolean = false
+  export let accent: boolean = false
 
   const contactRef = getClient().findOne(contact.class.Contact, { _id: value.contact })
 </script>
 
-<DocNavLink object={value} {inline} {disabled} noUnderline={disabled}>
+<DocNavLink object={value} {inline} {disabled} {accent} noUnderline={disabled}>
   {#await contactRef then ct}
     {#if ct}
-      <ContactPresenter disabled={true} value={ct} {inline} />
+      <ContactPresenter disabled={true} value={ct} {inline} {accent} />
     {/if}
   {/await}
 </DocNavLink>
diff --git a/plugins/contact-resources/src/components/OrganizationPresenter.svelte b/plugins/contact-resources/src/components/OrganizationPresenter.svelte
@@ -22,21 +22,23 @@
 
   export let value: Organization
   export let inline: boolean = false
+  export let disabled: boolean = false
+  export let accent: boolean = false
   export let maxWidth = ''
 </script>
 
 {#if value}
-  <DocNavLink {inline} object={value}>
+  <DocNavLink {disabled} {inline} object={value} {accent} noUnderline={disabled}>
     <div
-      class="flex-presenter overflow-label"
+      class="flex-presenter"
       style:max-width={maxWidth}
       class:inline-presenter={inline}
       use:tooltip={{ label: getEmbeddedLabel(value.name) }}
     >
       {#if !inline}
         <div class="icon circle"><Company size={'small'} /></div>
       {/if}
-      <span class="label">{value.name}</span>
+      <span class="overflow-label label" class:no-underline={disabled} class:fs-bold={accent}>{value.name}</span>
     </div>
   </DocNavLink>
 {/if}
diff --git a/plugins/contact-resources/src/components/PersonRefPresenter.svelte b/plugins/contact-resources/src/components/PersonRefPresenter.svelte
@@ -25,6 +25,7 @@
   export let inline = false
   export let enlargedText = false
   export let disabled = false
+  export let accent: boolean = false
   export let shouldShowAvatar = true
   export let shouldShowName = true
   export let shouldShowPlaceholder = false
@@ -57,4 +58,5 @@
   {enlargedText}
   {disabled}
   {inline}
+  {accent}
 />
diff --git a/plugins/document-resources/src/components/DocumentPresenter.svelte b/plugins/document-resources/src/components/DocumentPresenter.svelte
@@ -21,7 +21,9 @@
   import document from '../plugin'
 
   export let value: WithLookup<Document>
-  export let inline = false
+  export let inline: boolean = false
+  export let disabled: boolean = false
+  export let accent: boolean = false
 </script>
 
 {#if value}
@@ -35,6 +37,6 @@
         <Icon icon={document.icon.Document} size={'small'} />
       </div>
     {/if}
-    <span class="label">{value.name}-{value.version}</span>
+    <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>{value.name}-{value.version}</span>
   </a>
 {/if}