Fix category styles (#1475)

Signed-off-by: Artyom Grigorovich <grigorovichartyom@gmail.com>
2025-04-13 11:50:56 +00:00 · 2022-04-26 14:12:58 +07:00 · 2022-04-26 14:12:58 +07:00 · 6d6f1fb48a
commit 6d6f1fb48a
parent af3c251d36
6 changed files with 119 additions and 87 deletions
--- a/packages/presentation/src/components/Avatar.svelte
+++ b/packages/presentation/src/components/Avatar.svelte
@ -12,7 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
-
 <script lang="ts">
  import Avatar from './icons/Avatar.svelte'

@ -20,7 +19,7 @@

  export let avatar: string | null | undefined = undefined
  export let direct: Blob | undefined = undefined
-  export let size: 'inline' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large'
+  export let size: 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large'

  let url: string | undefined
  $: if (direct !== undefined) {
@ -37,11 +36,11 @@
 <div class="ava-{size} flex-center avatar-container" class:no-img={!url}>
  {#if url}
    {#if size === 'large' || size === 'x-large'}
-      <img class="ava-{size} ava-blur" src={url} alt={''}/>
+      <img class="ava-{size} ava-blur" src={url} alt={''} />
    {/if}
-    <img class="ava-{size} ava-mask" src={url} alt={''}/>
+    <img class="ava-{size} ava-mask" src={url} alt={''} />
  {:else}
-    <Avatar {size}/>
+    <Avatar {size} />
  {/if}
 </div>

@ -58,31 +57,39 @@
      object-fit: cover;
      border: 2px solid var(--theme-avatar-border);
    }
-    &.no-img { border-color: transparent; }
+    &.no-img {
+      border-color: transparent;
+    }
  }

  .ava-inline {
-    width: .875rem;   // 24
-    height: .875rem;
+    width: 0.875rem; // 24
+    height: 0.875rem;
  }
+
+  .ava-tiny {
+    width: 1.13rem; // ~18
+    height: 1.13rem;
+  }
+
  .ava-x-small {
-    width: 1.5rem;   // 24
+    width: 1.5rem; // 24
    height: 1.5rem;
  }
  .ava-small {
-    width: 2rem;     // 32
+    width: 2rem; // 32
    height: 2rem;
  }
  .ava-medium {
-    width: 2.25rem;  // 36
+    width: 2.25rem; // 36
    height: 2.25rem;
  }
  .ava-large {
-    width: 4.5rem;   // 72
+    width: 4.5rem; // 72
    height: 4.5rem;
  }
  .ava-x-large {
-    width: 7.5rem;   // 120
+    width: 7.5rem; // 120
    height: 7.5rem;
  }

@ -96,8 +103,14 @@
    border-radius: 50%;
  }

-  .ava-inline .ava-mask, .ava-inline.no-img,
-  .ava-x-small .ava-mask, .ava-x-small.no-img,
-  .ava-small .ava-mask, .ava-small.no-img,
-  .ava-medium .ava-mask, .ava-medium.no-img { border-style: none; }
-</style>
+  .ava-inline .ava-mask,
+  .ava-inline.no-img,
+  .ava-x-small .ava-mask,
+  .ava-x-small.no-img,
+  .ava-small .ava-mask,
+  .ava-small.no-img,
+  .ava-medium .ava-mask,
+  .ava-medium.no-img {
+    border-style: none;
+  }
+</style>
--- a/packages/presentation/src/components/icons/Avatar.svelte
+++ b/packages/presentation/src/components/icons/Avatar.svelte
@ -13,27 +13,38 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 -->
-
 <script lang="ts">
-  export let size: 'inline' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large'
+  export let size: 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large'

  const fill: string = 'var(--theme-caption-color)'
 </script>

 <svg class="svg-avatar {size}" {fill} viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
-  <circle class="op" cx="20" cy="13.6" r="6.4"/>
-  <path d="M33.1,33.3c-0.8-2.2-2.5-4.2-4.9-5.5c-2.3-1.3-5.2-2.1-8.2-2.1s-5.8,0.7-8.2,2.1c-2.4,1.4-4.1,3.3-4.9,5.5 c-0.1,0.4,0.1,0.8,0.5,1c0.4,0.1,0.8-0.1,1-0.5c0.7-1.9,2.2-3.5,4.2-4.7c2.1-1.2,4.7-1.9,7.4-1.9c2.7,0,5.3,0.7,7.4,1.9 c2.1,1.2,3.6,2.9,4.2,4.7c0.1,0.3,0.4,0.5,0.7,0.5c0.1,0,0.2,0,0.3,0C33,34.1,33.2,33.7,33.1,33.3z"/>
-  <path d="M20,20.8c3.9,0,7.1-3.2,7.1-7.1S23.9,6.5,20,6.5c-3.9,0-7.1,3.2-7.1,7.1S16.1,20.8,20,20.8z M20,8 c3.1,0,5.6,2.5,5.6,5.6s-2.5,5.6-5.6,5.6c-3.1,0-5.6-2.5-5.6-5.6S16.9,8,20,8z"/>
+  <circle class="op" cx="20" cy="13.6" r="6.4" />
+  <path
+    d="M33.1,33.3c-0.8-2.2-2.5-4.2-4.9-5.5c-2.3-1.3-5.2-2.1-8.2-2.1s-5.8,0.7-8.2,2.1c-2.4,1.4-4.1,3.3-4.9,5.5 c-0.1,0.4,0.1,0.8,0.5,1c0.4,0.1,0.8-0.1,1-0.5c0.7-1.9,2.2-3.5,4.2-4.7c2.1-1.2,4.7-1.9,7.4-1.9c2.7,0,5.3,0.7,7.4,1.9 c2.1,1.2,3.6,2.9,4.2,4.7c0.1,0.3,0.4,0.5,0.7,0.5c0.1,0,0.2,0,0.3,0C33,34.1,33.2,33.7,33.1,33.3z"
+  />
+  <path
+    d="M20,20.8c3.9,0,7.1-3.2,7.1-7.1S23.9,6.5,20,6.5c-3.9,0-7.1,3.2-7.1,7.1S16.1,20.8,20,20.8z M20,8 c3.1,0,5.6,2.5,5.6,5.6s-2.5,5.6-5.6,5.6c-3.1,0-5.6-2.5-5.6-5.6S16.9,8,20,8z"
+  />
 </svg>

 <style lang="scss">
  .svg-avatar {
-    .op { opacity: .05; }
+    .op {
+      opacity: 0.05;
+    }
  }
  .inline {
-    width: .75rem;
-    height: .75rem;
+    width: 0.75rem;
+    height: 0.75rem;
  }
+
+  .tiny {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
  .x-small {
    width: 1rem;
    height: 1rem;
--- a/plugins/tracker-assets/assets/icons.svg
+++ b/plugins/tracker-assets/assets/icons.svg
@ -76,7 +76,7 @@
    <rect width="2" height="2" rx="1" transform="matrix(-1 0 0 1 8 6)" />
    <rect width="2" height="2" rx="1" transform="matrix(-1 0 0 1 11 6)" />
  </symbol>
-  <symbol id="priority-urgent" viewBox="0 0 16 16">
+  <symbol id="priority-urgent" viewBox="-1 -1 16 16">
    <path d="M2 0a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V2a2 2 0 00-2-2H2zm3.914 3h1.738L7.5 8.602H6.07L5.914 3zm1.809 7.164a.95.95 0 01-.938.938.934.934 0 110-1.867c.5 0 .934.417.938.93z" />
  </symbol>
  <symbol id="priority-high" viewBox="0 0 16 16">
--- a/plugins/tracker-resources/src/components/issues/AssigneePresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/AssigneePresenter.svelte
@ -110,7 +110,7 @@
  <Tooltip {label} props={{ value: formattedName }}>
    <div class="flex-presenter" on:click={handleAssigneeEditorOpened}>
      <div class="icon">
-        <Avatar size={'x-small'} {avatar} />
+        <Avatar size={'tiny'} {avatar} />
      </div>
      {#if shouldShowLabel}
        <div class="label nowrap ml-2">
@ -122,7 +122,7 @@
 {:else}
  <div class="presenter">
    <div class="icon">
-      <Avatar size={'x-small'} {avatar} />
+      <Avatar size={'tiny'} {avatar} />
    </div>
    {#if shouldShowLabel}
      <div class="label nowrap ml-2">
--- a/plugins/tracker-resources/src/components/issues/CategoryPresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/CategoryPresenter.svelte
@ -68,7 +68,7 @@
        />
        <span class="eLabelCounter ml-2">{issuesAmount}</span>
      </div>
-      <div class="flex mr-1">
+      <div class="flex">
        <Tooltip label={tracker.string.AddIssueTooltip} direction={'left'}>
          <Button icon={IconAdd} kind={'transparent'} on:click={handleNewIssueAdded} />
        </Tooltip>
@ -101,7 +101,8 @@
  .categoryHeader {
    height: 2.5rem;
    background-color: var(--theme-table-bg-hover);
-    padding-left: 2.3rem;
+    padding-left: 2.25rem;
+    padding-right: 1.35rem;
  }

  .label {
--- a/plugins/tracker-resources/src/components/issues/IssuesList.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuesList.svelte
@ -106,68 +106,72 @@
          class:mListGridChecked={selectedIssueIds.has(docObject._id)}
          class:mListGridFixed={rowIndex === selectedRowIndex}
        >
-          {#each itemModels as attributeModel, attributeModelIndex}
-            {#if attributeModelIndex === 0}
-              <div class="gridElement">
-                <Tooltip direction={'bottom'} label={tracker.string.SelectIssue}>
-                  <div class="eListGridCheckBox ml-2">
-                    <CheckBox
-                      checked={selectedIssueIds.has(docObject._id)}
-                      on:value={(event) => {
-                        handleIssueSelected(docObject._id, event)
-                      }}
+          <div class="contentWrapper">
+            {#each itemModels as attributeModel, attributeModelIndex}
+              {#if attributeModelIndex === 0}
+                <div class="gridElement">
+                  <Tooltip direction={'bottom'} label={tracker.string.SelectIssue}>
+                    <div class="eListGridCheckBox">
+                      <CheckBox
+                        checked={selectedIssueIds.has(docObject._id)}
+                        on:value={(event) => {
+                          handleIssueSelected(docObject._id, event)
+                        }}
+                      />
+                    </div>
+                  </Tooltip>
+                  <div class="priorityPresenter">
+                    <svelte:component
+                      this={attributeModel.presenter}
+                      value={getObjectValue(attributeModel.key, docObject) ?? ''}
+                      {...attributeModel.props}
                    />
                  </div>
-                </Tooltip>
-                <div class="priorityPresenter">
+                </div>
+              {:else if attributeModelIndex === 1}
+                <div class="issuePresenter">
+                  <svelte:component
+                    this={attributeModel.presenter}
+                    value={getObjectValue(attributeModel.key, docObject) ?? ''}
+                    {...attributeModel.props}
+                  />
+                  <div
+                    id="context-menu"
+                    class="eIssuePresenterContextMenu"
+                    on:click={(event) => showMenu(event, docObject, rowIndex)}
+                  >
+                    <IconMoreV size={'small'} />
+                  </div>
+                </div>
+              {:else if attributeModelIndex === 3}
+                <svelte:component
+                  this={attributeModel.presenter}
+                  value={getObjectValue(attributeModel.key, docObject) ?? ''}
+                  {...attributeModel.props}
+                />
+                <div class="filler" />
+              {:else}
+                <div class="gridElement">
                  <svelte:component
                    this={attributeModel.presenter}
                    value={getObjectValue(attributeModel.key, docObject) ?? ''}
                    {...attributeModel.props}
                  />
                </div>
-              </div>
-            {:else if attributeModelIndex === 1}
-              <div class="issuePresenter">
-                <svelte:component
-                  this={attributeModel.presenter}
-                  value={getObjectValue(attributeModel.key, docObject) ?? ''}
-                  {...attributeModel.props}
-                />
-                <div
-                  id="context-menu"
-                  class="eIssuePresenterContextMenu"
-                  on:click={(event) => showMenu(event, docObject, rowIndex)}
-                >
-                  <IconMoreV size={'small'} />
-                </div>
-              </div>
-            {:else if attributeModelIndex === 3}
-              <svelte:component
-                this={attributeModel.presenter}
-                value={getObjectValue(attributeModel.key, docObject) ?? ''}
-                {...attributeModel.props}
-              />
-              <div class="filler" />
-            {:else}
-              <div class="gridElement">
-                <svelte:component
-                  this={attributeModel.presenter}
-                  value={getObjectValue(attributeModel.key, docObject) ?? ''}
-                  {...attributeModel.props}
-                />
-              </div>
-            {/if}
-          {/each}
+              {/if}
+            {/each}
+          </div>
        </div>
      {/each}
    {:else if loadingProps !== undefined}
      {#each Array(getLoadingElementsLength(loadingProps, options)) as _, rowIndex}
-        <div class="listGrid mListGridIsLoading" class:fixed={rowIndex === selectedRowIndex}>
-          <div class="gridElement">
-            <CheckBox checked={false} />
-            <div class="ml-4">
-              <Spinner size="small" />
+        <div class="listGrid" class:fixed={rowIndex === selectedRowIndex}>
+          <div class="contentWrapper">
+            <div class="gridElement">
+              <CheckBox checked={false} />
+              <div class="ml-4">
+                <Spinner size="small" />
+              </div>
            </div>
          </div>
        </div>
@ -185,9 +189,16 @@
    width: 100%;
  }

-  .listGrid {
+  .contentWrapper {
    display: flex;
    align-items: center;
+    height: 100%;
+    padding-left: 0.75rem;
+    padding-right: 1.15rem;
+  }
+
+  .listGrid {
+    width: 100%;
    height: 3.25rem;
    color: var(--theme-caption-color);
    border-bottom: 1px solid var(--theme-button-border-hovered);
@ -206,10 +217,6 @@
      }
    }

-    &.mListGridIsLoading {
-      justify-content: flex-start;
-    }
-
    &:hover {
      background-color: var(--theme-table-bg-hover);
    }
@ -243,7 +250,7 @@
  }

  .priorityPresenter {
-    padding-left: 0.75rem;
+    padding-left: 0.65rem;
  }

  .issuePresenter {