UBER-573,-574: updated button styles, fixed ListView (#3484)

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

models/lead/src/index.ts

@@ -342,7 +342,7 @@ export function createModel (builder: Builder): void {
             size: 'small',
             kind: 'list'
           },
-          displayProps: { optional: true }
+          displayProps: { compression: true }
         },
         { key: 'modifiedOn', displayProps: { key: 'modified', fixed: 'right', dividerBefore: true } },
         {

models/recruit/src/index.ts

@@ -723,7 +723,7 @@ export function createModel (builder: Builder): void {
             size: 'small',
             kind: 'list'
           },
-          displayProps: { optional: true }
+          displayProps: { compression: true }
         },
         { key: 'modifiedOn', displayProps: { key: 'modified', fixed: 'right', dividerBefore: true } },
         {

models/tracker/src/index.ts

@@ -486,7 +486,7 @@ export function createModel (builder: Builder): void {
         {
           key: 'labels',
           presenter: tags.component.LabelsPresenter,
-          displayProps: { optional: true },
+          displayProps: { compression: true },
           props: { kind: 'list', full: false }
         },
         {
@@ -501,8 +501,7 @@ export function createModel (builder: Builder): void {
           displayProps: {
             key: 'milestone',
             excludeByKey: 'milestone',
-            compression: true,
+            compression: true
-            optional: true
           }
         },
         {
@@ -517,15 +516,14 @@ export function createModel (builder: Builder): void {
           displayProps: {
             key: 'component',
             excludeByKey: 'component',
-            compression: true,
+            compression: true
-            optional: true
           }
         },
         {
           key: '',
           label: tracker.string.DueDate,
           presenter: tracker.component.DueDatePresenter,
-          displayProps: { key: 'dueDate', optional: true },
+          displayProps: { key: 'dueDate', compression: true },
           props: { kind: 'list' }
         },
         {
@@ -533,7 +531,7 @@ export function createModel (builder: Builder): void {
           label: tracker.string.Estimation,
           presenter: tracker.component.EstimationEditor,
           props: { kind: 'list', size: 'small' },
-          displayProps: { key: 'estimation', fixed: 'left', dividerBefore: true }
+          displayProps: { key: 'estimation', fixed: 'left', dividerBefore: true, optional: true }
         },
         {
           key: 'modifiedOn',
@@ -633,21 +631,21 @@ export function createModel (builder: Builder): void {
           },
           displayProps: {
             excludeByKey: 'milestone',
-            compression: true,
+            compression: true
-            optional: true
           }
         },
         {
           key: '',
           label: tracker.string.DueDate,
           presenter: tracker.component.DueDatePresenter,
-          displayProps: { key: 'dueDate', optional: true },
+          displayProps: { key: 'dueDate', compression: true },
           props: { kind: 'list', size: 'small' }
         },
         {
           key: '',
           label: tracker.string.Estimation,
           presenter: tracker.component.EstimationEditor,
+          displayProps: { optional: true },
           props: { kind: 'list', size: 'small' }
         },
         {
@@ -703,7 +701,7 @@ export function createModel (builder: Builder): void {
             size: 'small',
             shouldShowPlaceholder: false
           },
-          displayProps: { key: 'component', compression: true, optional: true }
+          displayProps: { key: 'component', compression: true }
         },
         {
           key: '',
@@ -714,7 +712,7 @@ export function createModel (builder: Builder): void {
             size: 'small',
             shouldShowPlaceholder: false
           },
-          displayProps: { key: 'milestone', compression: true, optional: true }
+          displayProps: { key: 'milestone', compression: true }
         },
         {
           key: '',
@@ -724,7 +722,7 @@ export function createModel (builder: Builder): void {
             kind: 'list',
             size: 'small'
           },
-          displayProps: { key: 'estimation', optional: true }
+          displayProps: { key: 'estimation', compression: true }
         },
         { key: '', displayProps: { grow: true } },
         {

packages/text-editor/src/components/StyleButton.svelte

@@ -50,7 +50,7 @@
     }
     &:focus {
       color: var(--theme-caption-color);
-      box-shadow: 0 0 0 2px var(--accented-button-focused-border);
+      box-shadow: 0 0 0 2px var(--accented-button-outline);
     }
     &.selected {
       background-color: var(--theme-button-pressed);

packages/theme/styles/_colors.scss

@@ -16,27 +16,27 @@
 /* Common Colors */
 * {
   --accented-button-color: #fff;
+  --accented-button-content-color: rgba(255, 255, 255, .8);
   --accented-button-border: rgba(255, 255, 255, .09);
-  --accented-button-focused-border: #fff;
   --accented-button-outline: #5190EC;
   --accented-button-transparent: rgba(43, 81, 144, 0.2);
 
   --accented-button-default: #2B5190;
   --accented-button-hovered: #325FA9;
   --accented-button-pressed: #284B86;
-  --accented-button-focused: #284B86;
+  --accented-button-focused: #2B5190;
   --brand-button-default: #4169E1;
   --brand-button-hovered: #587BE5;
   --brand-button-pressed: #2C58DE;
-  --brand-button-focused: #2C58DE;
+  --brand-button-focused: #4169E1;
   --positive-button-default: #26A869;
   --positive-button-hovered: #2BBB75;
   --positive-button-pressed: #21915B;
-  --positive-button-focused: #21915B;
+  --positive-button-focused: #26A869;
   --negative-button-default: #CA4242;
   --negative-button-hovered: #D05858;
   --negative-button-pressed: #BF3636;
-  --negative-button-focused: #BF3636;
+  --negative-button-focused: #CA4242;
 
   --white-color: #fff;
   --duotone-color: rgba(126, 134, 158, .25);
@@ -66,21 +66,21 @@
 
 /* Dark Theme */
 .theme-dark {
-  --accented-button-disabled: #12213B;
+  --accented-button-disabled: rgba(255, 255, 255, .12);
-  --accented-button-disabled-color: #5E88CF;
+  --accented-button-disabled-color: rgba(255, 255, 255, .4);
-  --brand-button-disabled: #111F4B;
+  --brand-button-disabled: rgba(255, 255, 255, .12);
-  --brand-button-disabled-color: #6585E7;
+  --brand-button-disabled-color: rgba(255, 255, 255, .4);
-  --positive-button-disabled: #092518;
+  --positive-button-disabled: rgba(38, 168, 105, .2);
-  --positive-button-disabled-color: #25A265;
+  --positive-button-disabled-color: rgba(38, 168, 105, .6);
-  --negative-button-disabled: #330F0F;
+  --negative-button-disabled: rgba(202, 66, 66, .2);
-  --negative-button-disabled-color: #D06262;
+  --negative-button-disabled-color: rgba(202, 66, 66, .6);
 
   --theme-button-default: rgba(255, 255, 255, .02);
   --theme-button-hovered: rgba(255, 255, 255, .04);
   --theme-button-pressed: rgba(255, 255, 255, .08);
   --theme-button-focused: rgba(255, 255, 255, .04);
   --theme-button-focused-border: rgba(255, 255, 255, .09);
-  --theme-button-disabled: rgba(255, 255, 255, .08);
+  --theme-button-disabled: transparent;
   --theme-button-border: rgba(255, 255, 255, .09);
 
   --theme-button-contrast-color: #000;
@@ -260,14 +260,14 @@
 
 /* Light Theme */
 .theme-light {
-  --accented-button-disabled: #E0E8F6;
+  --accented-button-disabled: rgba(0, 0, 0, .12);
-  --accented-button-disabled-color: #284B86;
+  --accented-button-disabled-color: rgba(0, 0, 0, .4);
-  --brand-button-disabled: #DCE3F9;
+  --brand-button-disabled: rgba(0, 0, 0, .12);
-  --brand-button-disabled-color: #2C58DE;
+  --brand-button-disabled-color: rgba(0, 0, 0, .4);
-  --positive-button-disabled: #DEF7EB;
+  --positive-button-disabled: rgba(38, 168, 105, .2);
-  --positive-button-disabled-color: #1A7046;
+  --positive-button-disabled-color: rgba(33, 145, 91, .6);
-  --negative-button-disabled: #F6E0E0;
+  --negative-button-disabled: rgba(202, 66, 66, .2);
-  --negative-button-disabled-color: #962C2C;
+  --negative-button-disabled-color: rgba(202, 66, 66, .6);
 
   --theme-button-default: rgba(0, 0, 0, .02);
   --theme-button-hovered: rgba(0, 0, 0, .04);

packages/theme/styles/button.scss

@@ -185,16 +185,24 @@
     }
     &:not(.no-focus):focus { box-shadow: none; }
   }
+  &.accented, &.brand, &.positive, &.negative {
+    &:hover, &:active, &:focus {
+      color: var(--accented-button-color);
+      .btn-icon { color: var(--accented-button-color); }
+    }
+  }
+  &.regular, &.ghost {
+    &:hover, &:active, &:focus { color: var(--theme-caption-color); }
+  }
   &.accented,
   &.brand,
   &.positive,
   &.negative {
     padding: 0 1.5rem;
-    color: var(--accented-button-color);
+    color: var(--accented-button-content-color);
     border-color: var(--accented-button-border);
 
-    .btn-icon { color: var(--accented-button-color); }
+    .btn-icon { color: var(--accented-button-content-color); }
-    &:focus { border-color: var(--accented-button-focused-border); }
   }
   &.accented {
     background-color: var(--accented-button-default);
@@ -272,7 +280,7 @@
   }
 
   &:disabled {
-    color: var(--theme-trans-color);
+    color: var(--theme-darker-color);
     border-color: transparent;
     cursor: not-allowed;
 

packages/theme/styles/components.scss

@@ -686,7 +686,6 @@
       border-color: transparent;
     }
     &:focus {
-      border-color: var(--accented-button-focused-border);
       box-shadow: 0 0 0 3px var(--accented-button-outline);
       & > .icon { color: var(--caption-color); }
     }
@@ -894,7 +893,7 @@
   .fix-margin { margin-left: .875rem; }
   .name { margin-left: .375rem; }
 
-  .optional-bar {
+  .compression-bar {
     overflow: hidden;
     display: flex;
     justify-content: flex-end;
@@ -913,7 +912,7 @@
       width: max-content;
     }
     & > *:not(:first-child) { margin-left: .25rem; }
-    & > * > * { min-width: fit-content; }
+    & > * > *:not(.only-icon) { min-width: fit-content; }
   }
 }
 // Labels on the ListView
@@ -956,7 +955,7 @@
 .kanban-container .card-container .card-labels .label { font-size: .8125rem !important; }
 
 /* ListView & Kanban */
-.list-container .optional-bar .label-wrapper,
+.list-container .compression-bar .label-wrapper,
 .kanban-container .card-container .card-labels .label-wrapper {
   display: flex;
   align-items: center;

packages/ui/src/components/Button.svelte

@@ -60,6 +60,7 @@
     label === undefined &&
     $$slots.content === undefined &&
     (icon !== undefined || iconRight !== undefined || $$slots.icon || $$slots.iconRight)
+  $: primary = ['accented', 'brand', 'positive', 'negative'].some((p) => p === kind)
 
   onMount(() => {
     if (focus && input) {
@@ -129,7 +130,11 @@
     </div>
   {/if}
   {#if loading}
-    <div class="btn-icon pointer-events-none caption-color spinner" class:resetIconSize>
+    <div
+      class="btn-icon pointer-events-none spinner"
+      class:resetIconSize
+      style:color={primary ? 'var(--accented-button-color)' : 'var(--theme-caption-color)'}
+    >
       <Spinner size={iconSize === 'inline' ? 'inline' : 'small'} />
     </div>
   {/if}

plugins/attachment-resources/src/components/AttachmentsPresenter.svelte

@@ -35,18 +35,6 @@
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <DocNavLink {object} {disabled} inline noUnderline shrink={0}>
     {#if kind === 'list'}
-      {#if compactMode}
-        <div
-          use:tooltip={{
-            component: AttachmentPopup,
-            props: popupProps
-          }}
-          class="sm-tool-icon"
-        >
-          <div class="icon halfcontent"><IconAttachment {size} /></div>
-          {#if showCounter}{value ?? 0}{/if}
-        </div>
-      {:else}
       <Button
         {kind}
         {size}
@@ -56,11 +44,10 @@
         }}
       >
         <div slot="icon"><IconAttachment {size} /></div>
-          <div slot="content" style:margin-left={showCounter ? '.375rem' : '0'}>
+        <div slot="content" style:margin-left={showCounter && !compactMode ? '.375rem' : '0'}>
-            {#if showCounter}{value ?? 0}{/if}
+          {#if showCounter && !compactMode}{value ?? 0}{/if}
         </div>
       </Button>
-      {/if}
     {:else}
       <div
         use:tooltip={{

plugins/chunter-resources/src/components/CommentsPresenter.svelte

@@ -32,18 +32,6 @@
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <DocNavLink {object} inline noUnderline={true} shrink={0}>
     {#if kind === 'list'}
-      {#if compactMode}
-        <div
-          use:tooltip={{
-            component: CommentPopup,
-            props: { objectId: object._id, object, withInput }
-          }}
-          class="sm-tool-icon"
-        >
-          <div class="icon halfcontent"><IconThread {size} /></div>
-          {#if showCounter}{value ?? 0}{/if}
-        </div>
-      {:else}
       <Button
         {kind}
         {size}
@@ -53,11 +41,10 @@
         }}
       >
         <div slot="icon"><IconThread {size} /></div>
-          <div slot="content" style:margin-left={showCounter ? '.375rem' : '0'}>
+        <div slot="content" style:margin-left={showCounter && !compactMode ? '.375rem' : '0'}>
-            {#if showCounter}{value ?? 0}{/if}
+          {#if showCounter && !compactMode}{value ?? 0}{/if}
         </div>
       </Button>
-      {/if}
     {:else}
       <div
         use:tooltip={{

plugins/document-resources/src/components/EditDoc.svelte

@@ -574,7 +574,6 @@
     transition: border-color 0.1s var(--timing-main), box-shadow 0.1s var(--timing-main);
 
     &:focus-within {
-      border-color: var(--accented-button-focused-border);
       box-shadow: 0 0 0 3px var(--accented-button-outline);
     }
   }

plugins/telegram-resources/src/components/PinPad.svelte

@@ -116,8 +116,7 @@
     }
 
     &:focus {
-      border: 1px solid var(--accented-button-focused-border);
+      box-shadow: 0 0 0 2px var(--accented-button-outline);
-      box-shadow: 0 0 0 3px var(--accented-button-outline);
     }
   }
 

plugins/tracker-resources/src/components/AppItem.svelte

@@ -60,8 +60,7 @@
       color: var(--caption-color);
     }
     &:focus {
-      border: 1px solid var(--accented-button-focused-border);
+      box-shadow: 0 0 0 2px var(--accented-button-outline);
-      box-shadow: 0 0 0 3px var(--accented-button-outline);
       .icon-container {
         color: var(--caption-color);
       }
@@ -70,7 +69,7 @@
     &.selected {
       background-color: var(--menu-bg-select);
       .icon-container {
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
       }
     }
   }

plugins/view-resources/src/components/ColorsPopup.svelte

@@ -54,16 +54,15 @@
       cursor: pointer;
 
       &:hover {
-        border-color: var(--accented-button-focused-border);
+        box-shadow: 0 0 0 2px var(--accented-button-outline);
-        box-shadow: 0 0 0 3px var(--accented-button-outline);
       }
       &.selected {
         border-color: var(--caption-color);
-        box-shadow: 0 0 0 3px var(--trans-content-20);
+        box-shadow: 0 0 0 2px var(--trans-content-20);
 
         &:hover {
           border-color: var(--system-error-color);
-          box-shadow: 0 0 0 3px var(--trans-content-20);
+          box-shadow: 0 0 0 2px var(--trans-content-20);
         }
       }
     }

plugins/view-resources/src/components/list/ListHeader.svelte

@@ -109,7 +109,7 @@
     }}
     on:click={() => dispatch('collapse')}
   >
-    <div class="flex-row-center clear-mins flex-grow">
+    <div class="flex-row-center flex-grow" style:color={headerComponent ? headerTextColor : 'inherit'}>
       {#if level === 0}
         <div class="chevron"><IconCollapseArrow size={'small'} /></div>
       {/if}
@@ -118,7 +118,6 @@
           <Label label={view.string.NoGrouping} />
         </span>
       {:else if headerComponent}
-        <span class="clear-mins" style:color={headerTextColor}>
         <svelte:component
           this={headerComponent.presenter}
           value={category}
@@ -131,7 +130,6 @@
             accentColor = evt.detail
           }}
         />
-        </span>
       {/if}
 
       {#if selected.length > 0}

plugins/view-resources/src/components/list/ListItem.svelte

@@ -112,25 +112,24 @@
       />
     </div>
   </div>
-  {#each model.filter((p) => !(p.displayProps?.optional === true || p.displayProps?.suffix === true)) as attributeModel, i}
+  {#each model.filter((p) => !(p.displayProps?.optional === true || p.displayProps?.compression === true || p.displayProps?.suffix === true)) as attributeModel, i}
     {@const displayProps = attributeModel.displayProps}
     {#if !groupByKey || displayProps?.excludeByKey !== groupByKey}
       {#if displayProps?.grow}
-        {#if !compactMode}
         {#each model.filter((p) => p.displayProps?.suffix === true) as attrModel}
           <ListPresenter
             {docObject}
             attributeModel={attrModel}
             {props}
+            {compactMode}
             value={getObjectValue(attrModel.key, docObject)}
             onChange={getOnChange(docObject, attrModel)}
           />
         {/each}
-        {/if}
         <GrowPresenter />
         {#if !compactMode}
-          <div class="optional-bar">
+          <div class="compression-bar">
-            {#each model.filter((p) => p.displayProps?.optional === true) as attrModel}
+            {#each model.filter((p) => p.displayProps?.compression === true) as attrModel}
               <ListPresenter
                 {docObject}
                 attributeModel={attrModel}
@@ -140,16 +139,13 @@
               />
             {/each}
           </div>
-        {:else}
+          {#each model.filter((p) => p.displayProps?.optional === true) as attrModel}
-          <GrowPresenter />
-          {#each model.filter((p) => p.displayProps?.suffix === true) as attrModel}
             <ListPresenter
               {docObject}
               attributeModel={attrModel}
               {props}
               value={getObjectValue(attrModel.key, docObject)}
               onChange={getOnChange(docObject, attrModel)}
-              compactMode
             />
           {/each}
         {/if}
@@ -180,7 +176,8 @@
         <IconCircles />
       </div>
       <div class="scroll-box gap-2">
-        {#each model.filter((m) => m.displayProps?.optional) as attributeModel, j}
+        <div class="compression-bar">
+          {#each model.filter((m) => m.displayProps?.compression) as attributeModel, j}
             {@const displayProps = attributeModel.displayProps}
             {@const value = getObjectValue(attributeModel.key, docObject)}
             {#if displayProps?.excludeByKey !== groupByKey && value !== undefined}
@@ -195,6 +192,23 @@
             {/if}
           {/each}
         </div>
+        {#each model.filter((m) => m.displayProps?.optional) as attributeModel, j}
+          {#if j === 0}
+            <GrowPresenter />
+          {/if}
+          {@const displayProps = attributeModel.displayProps}
+          {@const value = getObjectValue(attributeModel.key, docObject)}
+          {#if displayProps?.excludeByKey !== groupByKey && value !== undefined}
+            <ListPresenter
+              {docObject}
+              {attributeModel}
+              {props}
+              value={getObjectValue(attributeModel.key, docObject)}
+              onChange={getOnChange(docObject, attributeModel)}
+            />
+          {/if}
+        {/each}
+      </div>
     </div>
   {/if}
 </div>