Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Tweak issue/patch titles/labels
Rūdolfs Ošiņš committed 1 year ago
commit 5c07399ab5c4ecd7511b54b58337931892282679
parent 2da1461fdf32d28655346134da38da31f0f656a8
4 files changed +100 -85
modified src/components/InlineMarkdown.svelte
@@ -42,5 +42,4 @@
  class:txt-small={fontSize === "small"}

  class:txt-tiny={fontSize === "tiny"}>

  {@html render(content)}
- 
  <slot />

</span>
modified src/components/Link.svelte
@@ -6,6 +6,7 @@


  export let route: Route;

  export let disabled: boolean = false;
+ 
  export let styleHoverState: boolean = false;

  export let title: string | undefined = undefined;

  export let style: string | undefined = undefined;
@@ -29,6 +30,19 @@
  }

</script>
- 
<a on:click={navigateToRoute} href={routeToPath(route)} {title} {style}>
+ 
<style>
+ 
  .hover-style:hover {
+ 
    text-decoration: underline;
+ 
    text-decoration-thickness: 1px;
+ 
    text-underline-offset: 2px;
+ 
  }
+ 
</style>
+
+ 
<a
+ 
  class:hover-style={styleHoverState}
+ 
  on:click={navigateToRoute}
+ 
  href={routeToPath(route)}
+ 
  {title}
+ 
  {style}>

  <slot />

</a>
modified src/views/projects/Issue/IssueTeaser.svelte
@@ -43,10 +43,10 @@
    flex: 1;

  }

  .subtitle {
- 
    font-size: var(--font-size-small);
- 
    flex-wrap: wrap;

    display: flex;
- 
    align-items: center;
+ 
    flex-direction: column;
+ 
    flex-wrap: wrap;
+ 
    font-size: var(--font-size-small);

    gap: 0.5rem;

  }

  .summary {
@@ -54,12 +54,6 @@
    align-items: flex-start;

    gap: 0.5rem;

  }
- 
  .issue-title:hover {
- 
    text-decoration: underline;
- 
    text-decoration-thickness: 1px;
- 
    text-underline-offset: 2px;
- 
    cursor: pointer;
- 
  }

  .right {

    display: flex;

    margin-left: auto;
@@ -89,28 +83,29 @@
  </div>

  <div class="content">

    <div class="summary">
- 
      <Link
- 
        route={{
- 
          resource: "project.issue",
- 
          project: projectId,
- 
          node: baseUrl,
- 
          issue: issue.id,
- 
        }}>
- 
        <span class="issue-title">
+ 
      <span class="issue-title">
+ 
        <Link
+ 
          styleHoverState
+ 
          route={{
+ 
            resource: "project.issue",
+ 
            project: projectId,
+ 
            node: baseUrl,
+ 
            issue: issue.id,
+ 
          }}>

          {#if !issue.title}

            <span class="txt-missing">No title</span>

          {:else}
- 
            <InlineMarkdown fontSize="regular" content={issue.title}>
- 
              {#if issue.labels.length > 0}
- 
                <span
- 
                  style="display: inline-flex; gap: 0.5rem; flex-wrap: wrap;">
- 
                  <Labels labels={issue.labels} />
- 
                </span>
- 
              {/if}
- 
            </InlineMarkdown>
+ 
            <InlineMarkdown fontSize="regular" content={issue.title} />

          {/if}
+ 
        </Link>
+ 
      </span>
+ 
      {#if issue.labels.length > 0}
+ 
        <span
+ 
          class="global-hide-on-small-desktop-down"
+ 
          style="display: inline-flex; gap: 0.5rem;">
+ 
          <Labels labels={issue.labels} />

        </span>
- 
      </Link>
+ 
      {/if}

      <div class="right">

        {#if commentCount > 0}

          <CommentCounter {commentCount} />
@@ -118,15 +113,25 @@
      </div>

    </div>

    <div class="subtitle">
- 
      <NodeId
- 
        stylePopoverPositionLeft="-13px"
- 
        nodeId={issue.author.id}
- 
        alias={issue.author.alias} />
- 
      opened
- 
      <span class="global-oid">{formatObjectId(issue.id)}</span>
- 
      <span title={absoluteTimestamp(issue.discussion[0].timestamp)}>
- 
        {formatTimestamp(issue.discussion[0].timestamp)}
- 
      </span>
+ 
      {#if issue.labels.length > 0}
+ 
        <div
+ 
          class="global-hide-on-medium-desktop-up"
+ 
          style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
+ 
          <Labels labels={issue.labels} />
+ 
        </div>
+ 
      {/if}
+ 
      <div
+ 
        style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
+ 
        <NodeId
+ 
          stylePopoverPositionLeft="-13px"
+ 
          nodeId={issue.author.id}
+ 
          alias={issue.author.alias} />
+ 
        opened
+ 
        <span class="global-oid">{formatObjectId(issue.id)}</span>
+ 
        <span title={absoluteTimestamp(issue.discussion[0].timestamp)}>
+ 
          {formatTimestamp(issue.discussion[0].timestamp)}
+ 
        </span>
+ 
      </div>

    </div>

  </div>

</div>
modified src/views/projects/Patch/PatchTeaser.svelte
@@ -47,23 +47,16 @@
  }

  .subtitle {

    display: flex;
- 
    flex-direction: row;
- 
    align-items: center;
- 
    gap: 0.5rem;
- 
    font-size: var(--font-size-small);
+ 
    flex-direction: column;

    flex-wrap: wrap;
+ 
    font-size: var(--font-size-small);
+ 
    gap: 0.5rem;

  }

  .summary {

    display: flex;
- 
    flex-direction: row;
+ 
    align-items: flex-start;

    gap: 0.5rem;

  }
- 
  .patch-title:hover {
- 
    text-decoration: underline;
- 
    text-decoration-thickness: 1px;
- 
    text-underline-offset: 2px;
- 
    cursor: pointer;
- 
  }

  .right {

    margin-left: auto;

    display: flex;
@@ -93,12 +86,6 @@
    gap: 0.5rem;

    min-height: 1.5rem;

  }
- 
  @media (max-width: 719.98px) {
- 
    .diff-comment {
- 
      flex-direction: column-reverse;
- 
      align-items: flex-end;
- 
    }
- 
  }

</style>



<div role="button" tabindex="0" class="patch-teaser">
@@ -112,23 +99,23 @@
  </div>

  <div class="content">

    <div class="summary">
- 
      <span class="patch-title">
- 
        <Link
- 
          route={{
- 
            resource: "project.patch",
- 
            project: projectId,
- 
            node: baseUrl,
- 
            patch: patch.id,
- 
          }}>
- 
          <InlineMarkdown fontSize="regular" content={patch.title}>
- 
            {#if patch.labels.length > 0}
- 
              <span style="display: inline-flex; gap: 0.5rem; flex-wrap: wrap;">
- 
                <Labels labels={patch.labels} />
- 
              </span>
- 
            {/if}
- 
          </InlineMarkdown>
- 
        </Link>
- 
      </span>
+ 
      <Link
+ 
        styleHoverState
+ 
        route={{
+ 
          resource: "project.patch",
+ 
          project: projectId,
+ 
          node: baseUrl,
+ 
          patch: patch.id,
+ 
        }}>
+ 
        <InlineMarkdown fontSize="regular" content={patch.title} />
+ 
      </Link>
+ 
      {#if patch.labels.length > 0}
+ 
        <span
+ 
          class="global-hide-on-small-desktop-down"
+ 
          style="display: inline-flex; gap: 0.5rem;">
+ 
          <Labels labels={patch.labels} />
+ 
        </span>
+ 
      {/if}

      <div class="right">

        <div class="diff-comment">

          {#if commentCount > 0}
@@ -140,22 +127,32 @@
    </div>

    <div class="summary">

      <span class="subtitle">
- 
        <NodeId
- 
          stylePopoverPositionLeft="-13px"
- 
          nodeId={patch.author.id}
- 
          alias={patch.author.alias} />
- 
        {patch.revisions.length > 1 ? "updated" : "opened"}
- 
        <span class="global-oid">{formatObjectId(patch.id)}</span>
- 
        {#if patch.revisions.length > 1}
- 
          <span class="global-hide-on-mobile-down">
- 
            to <span class="global-oid">
- 
              {formatObjectId(patch.revisions[patch.revisions.length - 1].id)}
+ 
        {#if patch.labels.length > 0}
+ 
          <div
+ 
            class="global-hide-on-medium-desktop-up"
+ 
            style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
+ 
            <Labels labels={patch.labels} />
+ 
          </div>
+ 
        {/if}
+ 
        <div
+ 
          style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
+ 
          <NodeId
+ 
            stylePopoverPositionLeft="-13px"
+ 
            nodeId={patch.author.id}
+ 
            alias={patch.author.alias} />
+ 
          {patch.revisions.length > 1 ? "updated" : "opened"}
+ 
          <span class="global-oid">{formatObjectId(patch.id)}</span>
+ 
          {#if patch.revisions.length > 1}
+ 
            <span class="global-hide-on-mobile-down">
+ 
              to <span class="global-oid">
+ 
                {formatObjectId(patch.revisions[patch.revisions.length - 1].id)}
+ 
              </span>

            </span>
+ 
          {/if}
+ 
          <span title={absoluteTimestamp(latestRevision.timestamp)}>
+ 
            {formatTimestamp(latestRevision.timestamp)}

          </span>
- 
        {/if}
- 
        <span title={absoluteTimestamp(latestRevision.timestamp)}>
- 
          {formatTimestamp(latestRevision.timestamp)}
- 
        </span>
+ 
        </div>

      </span>

    </div>

  </div>