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

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
2024-12-22 02:51:54 +03:00 · 2023-07-07 08:33:55 +03:00 · 2023-07-07 08:33:55 +03:00 · a29a6b1416
commit a29a6b1416
parent e7b6522e80
16 changed files with 133 additions and 141 deletions
--- a/models/lead/src/index.ts
+++ b/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 } },
        {
--- a/models/recruit/src/index.ts
+++ b/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 } },
        {
--- a/models/tracker/src/index.ts
+++ b/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,
-            optional: true
+            compression: true
          }
        },
        {
@ -517,15 +516,14 @@ export function createModel (builder: Builder): void {
          displayProps: {
            key: 'component',
            excludeByKey: 'component',
-            compression: true,
-            optional: true
+            compression: 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,
-            optional: true
+            compression: 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 } },
        {
--- a/packages/text-editor/src/components/StyleButton.svelte
+++ b/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);
--- a/packages/theme/styles/_colors.scss
+++ b/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-color: #5E88CF;
-  --brand-button-disabled: #111F4B;
-  --brand-button-disabled-color: #6585E7;
-  --positive-button-disabled: #092518;
-  --positive-button-disabled-color: #25A265;
-  --negative-button-disabled: #330F0F;
-  --negative-button-disabled-color: #D06262;
+  --accented-button-disabled: rgba(255, 255, 255, .12);
+  --accented-button-disabled-color: rgba(255, 255, 255, .4);
+  --brand-button-disabled: rgba(255, 255, 255, .12);
+  --brand-button-disabled-color: rgba(255, 255, 255, .4);
+  --positive-button-disabled: rgba(38, 168, 105, .2);
+  --positive-button-disabled-color: rgba(38, 168, 105, .6);
+  --negative-button-disabled: rgba(202, 66, 66, .2);
+  --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-color: #284B86;
-  --brand-button-disabled: #DCE3F9;
-  --brand-button-disabled-color: #2C58DE;
-  --positive-button-disabled: #DEF7EB;
-  --positive-button-disabled-color: #1A7046;
-  --negative-button-disabled: #F6E0E0;
-  --negative-button-disabled-color: #962C2C;
+  --accented-button-disabled: rgba(0, 0, 0, .12);
+  --accented-button-disabled-color: rgba(0, 0, 0, .4);
+  --brand-button-disabled: rgba(0, 0, 0, .12);
+  --brand-button-disabled-color: rgba(0, 0, 0, .4);
+  --positive-button-disabled: rgba(38, 168, 105, .2);
+  --positive-button-disabled-color: rgba(33, 145, 91, .6);
+  --negative-button-disabled: rgba(202, 66, 66, .2);
+  --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);
--- a/packages/theme/styles/button.scss
+++ b/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); }
-    &:focus { border-color: var(--accented-button-focused-border); }
+    .btn-icon { color: var(--accented-button-content-color); }
  }
  &.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;

--- a/packages/theme/styles/components.scss
+++ b/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;
--- a/packages/ui/src/components/Button.svelte
+++ b/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}
--- a/plugins/attachment-resources/src/components/AttachmentsPresenter.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentsPresenter.svelte
@ -35,32 +35,19 @@
  <!-- 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}
+      <Button
+        {kind}
+        {size}
+        showTooltip={{
+          component: AttachmentPopup,
+          props: popupProps
+        }}
+      >
+        <div slot="icon"><IconAttachment {size} /></div>
+        <div slot="content" style:margin-left={showCounter && !compactMode ? '.375rem' : '0'}>
+          {#if showCounter && !compactMode}{value ?? 0}{/if}
        </div>
-      {:else}
-        <Button
-          {kind}
-          {size}
-          showTooltip={{
-            component: AttachmentPopup,
-            props: popupProps
-          }}
-        >
-          <div slot="icon"><IconAttachment {size} /></div>
-          <div slot="content" style:margin-left={showCounter ? '.375rem' : '0'}>
-            {#if showCounter}{value ?? 0}{/if}
-          </div>
-        </Button>
-      {/if}
+      </Button>
    {:else}
      <div
        use:tooltip={{
--- a/plugins/chunter-resources/src/components/CommentsPresenter.svelte
+++ b/plugins/chunter-resources/src/components/CommentsPresenter.svelte
@ -32,32 +32,19 @@
  <!-- 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}
+      <Button
+        {kind}
+        {size}
+        showTooltip={{
+          component: CommentPopup,
+          props: { objectId: object._id, object, withInput }
+        }}
+      >
+        <div slot="icon"><IconThread {size} /></div>
+        <div slot="content" style:margin-left={showCounter && !compactMode ? '.375rem' : '0'}>
+          {#if showCounter && !compactMode}{value ?? 0}{/if}
        </div>
-      {:else}
-        <Button
-          {kind}
-          {size}
-          showTooltip={{
-            component: CommentPopup,
-            props: { objectId: object._id, object, withInput }
-          }}
-        >
-          <div slot="icon"><IconThread {size} /></div>
-          <div slot="content" style:margin-left={showCounter ? '.375rem' : '0'}>
-            {#if showCounter}{value ?? 0}{/if}
-          </div>
-        </Button>
-      {/if}
+      </Button>
    {:else}
      <div
        use:tooltip={{
--- a/plugins/document-resources/src/components/EditDoc.svelte
+++ b/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);
    }
  }
--- a/plugins/telegram-resources/src/components/PinPad.svelte
+++ b/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 3px var(--accented-button-outline);
+      box-shadow: 0 0 0 2px var(--accented-button-outline);
    }
  }

--- a/plugins/tracker-resources/src/components/AppItem.svelte
+++ b/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 3px var(--accented-button-outline);
+      box-shadow: 0 0 0 2px 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);
      }
    }
  }
--- a/plugins/view-resources/src/components/ColorsPopup.svelte
+++ b/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 3px var(--accented-button-outline);
+        box-shadow: 0 0 0 2px 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);
        }
      }
    }
--- a/plugins/view-resources/src/components/list/ListHeader.svelte
+++ b/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,20 +118,18 @@
          <Label label={view.string.NoGrouping} />
        </span>
      {:else if headerComponent}
-        <span class="clear-mins" style:color={headerTextColor}>
-          <svelte:component
-            this={headerComponent.presenter}
-            value={category}
-            {space}
-            size={'small'}
-            kind={'list-header'}
-            colorInherit={!$themeStore.dark && level === 0}
-            accent={level === 0}
-            on:accent-color={(evt) => {
-              accentColor = evt.detail
-            }}
-          />
-        </span>
+        <svelte:component
+          this={headerComponent.presenter}
+          value={category}
+          {space}
+          size={'small'}
+          kind={'list-header'}
+          colorInherit={!$themeStore.dark && level === 0}
+          accent={level === 0}
+          on:accent-color={(evt) => {
+            accentColor = evt.detail
+          }}
+        />
      {/if}

      {#if selected.length > 0}
--- a/plugins/view-resources/src/components/list/ListItem.svelte
+++ b/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}
-              value={getObjectValue(attrModel.key, docObject)}
-              onChange={getOnChange(docObject, attrModel)}
-            />
-          {/each}
-        {/if}
+        {#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}
        <GrowPresenter />
        {#if !compactMode}
-          <div class="optional-bar">
-            {#each model.filter((p) => p.displayProps?.optional === true) as attrModel}
+          <div class="compression-bar">
+            {#each model.filter((p) => p.displayProps?.compression === true) as attrModel}
              <ListPresenter
                {docObject}
                attributeModel={attrModel}
@ -140,16 +139,13 @@
              />
            {/each}
          </div>
-        {:else}
-          <GrowPresenter />
-          {#each model.filter((p) => p.displayProps?.suffix === true) as attrModel}
+          {#each model.filter((p) => p.displayProps?.optional === true) as attrModel}
            <ListPresenter
              {docObject}
              attributeModel={attrModel}
              {props}
              value={getObjectValue(attrModel.key, docObject)}
              onChange={getOnChange(docObject, attrModel)}
-              compactMode
            />
          {/each}
        {/if}
@ -180,7 +176,26 @@
        <IconCircles />
      </div>
      <div class="scroll-box gap-2">
+        <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}
+              <ListPresenter
+                {docObject}
+                {attributeModel}
+                {props}
+                value={getObjectValue(attributeModel.key, docObject)}
+                onChange={getOnChange(docObject, attributeModel)}
+                hideDivider={j === 0}
+              />
+            {/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}
@ -190,7 +205,6 @@
              {props}
              value={getObjectValue(attributeModel.key, docObject)}
              onChange={getOnChange(docObject, attributeModel)}
-              hideDivider={j === 0}
            />
          {/if}
        {/each}