Radish alpha
r
radicle-desktop
Radicle desktop app
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Tweak title line alignment everywhere
Rūdolfs Ošiņš committed 1 year ago
commit 74470ecaff91a20a983d978c9d6207b8c2f69bfe
parent 5832be571648f9f3e36e5782e4e0f5dd4be34dd8
17 files changed +214 -91
modified public/index.css
@@ -62,6 +62,7 @@ body {
  padding: 0 0.5rem;

  min-width: 1.5rem;

  font-weight: var(--font-weight-regular);
+ 
  flex-shrink: 0;

}



:root {
modified src/components/Button.svelte
@@ -38,6 +38,7 @@
    -webkit-user-select: none;

    user-select: none;
+ 
    height: 2rem;

    column-gap: 0;

    row-gap: 0;

    display: grid;
@@ -301,7 +302,7 @@
  .p3-3 {

    grid-area: p3-3;

    background-color: var(--button-color-1);
- 
    padding: 2px 8px;
+ 
    padding: 0 8px;

    display: flex;

    align-items: center;

    gap: 0.5rem;
modified src/components/DropdownListItem.svelte
@@ -26,8 +26,8 @@
    display: flex;

    align-items: center;

    flex-direction: row;
- 
    gap: 0.375rem;
- 
    padding: 0.5rem 0.375rem;
+ 
    min-height: 2rem;
+ 
    padding: 0 0.5rem;

    white-space: nowrap;

    font-size: var(--font-size-small);

    font-weight: var(--font-weight-regular);
modified src/components/Icon.svelte
@@ -32,6 +32,7 @@
      | "markdown"

      | "moon"

      | "more-vertical"
+ 
      | "none"

      | "offline"

      | "online"

      | "patch"
@@ -442,6 +443,38 @@
    <path d="M9 2V4L7 4L7 2L9 2Z" />

    <path d="M9 7L9 9H7L7 7H9Z" />

    <path d="M9 12L9 14H7L7 12H9Z" />
+ 
  {:else if name === "none"}
+ 
    <path d="M6 13H8V14H6V13Z" />
+ 
    <path d="M10 13H7V14H10V13Z" />
+ 
    <path d="M3 5.00003L3 8.00003H2L2 5.00003L3 5.00003Z" />
+ 
    <path d="M13 6.00003V8.00003H14V6.00003H13Z" />
+ 
    <path d="M4 12H6V13H4V12Z" />
+ 
    <path d="M12 12H10V13H12V12Z" />
+ 
    <path d="M4 4.00003V6.00003H3L3 4.00003H4Z" />
+ 
    <path d="M12 4.00003V6.00003L13 6.00003V4.00003L12 4.00003Z" />
+ 
    <path d="M4 10L4 12H3L3 10H4Z" />
+ 
    <path d="M12 10V12H13V10H12Z" />
+ 
    <path d="M6 4.00003L4 4.00003L4 3.00003L6 3.00003V4.00003Z" />
+ 
    <path d="M10 4.00003L12 4.00003V3.00003L10 3.00003V4.00003Z" />
+ 
    <path d="M3 8.00003L3 10H2L2 8.00003H3Z" />
+ 
    <path d="M13 7.00003V10H14V7.00003H13Z" />
+ 
    <path d="M9 3.00003L6 3.00003V2.00003L9 2.00003V3.00003Z" />
+ 
    <path d="M8 3.00003L10 3.00003L10 2.00003L8 2.00003L8 3.00003Z" />
+ 
    <path d="M11 4.00003H12V5.00003H11V4.00003Z" />
+ 
    <path d="M10 5.00003H11V6.00003H10V5.00003Z" />
+ 
    <path d="M11 5.00003H12V6.00003L11 6.00003V5.00003Z" />
+ 
    <path d="M10 6.00003H11V7.00003H10V6.00003Z" />
+ 
    <path d="M9 7.00003L10 7.00003V8.00003H9V7.00003Z" />
+ 
    <path d="M8 8.00003H9V9.00003H8V8.00003Z" />
+ 
    <path d="M7 9.00003L8 9.00003L8 10H7V9.00003Z" />
+ 
    <path d="M6 10H7V11H6V10Z" />
+ 
    <path d="M5 11H6L6 12H5V11Z" />
+ 
    <path d="M9 6.00003H10V7.00003L9 7.00003V6.00003Z" />
+ 
    <path d="M8 7.00003H9V8.00003H8V7.00003Z" />
+ 
    <path d="M7 8.00003L8 8.00003V9.00003L7 9.00003V8.00003Z" />
+ 
    <path d="M6 9.00003H7V10H6V9.00003Z" />
+ 
    <path d="M5 10H6V11H5L5 10Z" />
+ 
    <path d="M4 11H5V12H4V11Z" />

  {:else if name === "offline"}

    <path d="M3 6L3 8H2L2 6H3Z" />

    <path d="M13 10V8H14V10H13Z" />
modified src/components/IssueSecondColumn.svelte
@@ -25,6 +25,12 @@
</script>



<style>
+ 
  .container {
+ 
    display: flex;
+ 
    justify-content: space-between;
+ 
    align-items: center;
+ 
    min-height: 40px;
+ 
  }

  .issue-list {

    margin-top: 0.5rem;

    display: flex;
@@ -34,7 +40,7 @@
  }

</style>
- 
<div class="global-flex" style:justify-content="space-between">
+ 
<div class="container">

  <div class="txt-regular txt-semibold global-flex" style:gap="4px">

    {title}

    <Icon name="chevron-right" />
modified src/components/IssueStateButton.svelte
@@ -57,13 +57,11 @@


  <Popover

    popoverPadding="0"
- 
    popoverPositionTop="3rem"
+ 
    popoverPositionTop="2.5rem"

    popoverPositionRight="0">

    {#snippet toggle(onclick)}

      <Button flatLeft {onclick} variant="secondary">
- 
        <div style:height="22px" class="global-flex">
- 
          <Icon name="chevron-down" />
- 
        </div>
+ 
        <Icon name="chevron-down" />

      </Button>

    {/snippet}

    {#snippet popover()}
modified src/components/IssuesSecondColumn.svelte
@@ -24,7 +24,6 @@
    flex-direction: column;

    height: 100%;

    justify-content: space-between;
- 
    padding-bottom: 1rem;

  }

  .tab {

    align-items: center;
@@ -59,7 +58,9 @@


<div class="container">

  <div>
- 
    <RepoTeaser name={project.data.name} seeding={repo.seeding} />
+ 
    <div style:margin-bottom="0.5rem" style:padding-left="0.75rem">
+ 
      <RepoTeaser name={project.data.name} seeding={repo.seeding} />
+ 
    </div>



    <Border

      variant="ghost"
modified src/components/NakedButton.svelte
@@ -14,7 +14,7 @@
    title,

    variant,

    onclick,
- 
    styleHeight = "32px",
+ 
    styleHeight = "2rem",

  }: Props = $props();



  const style = $derived(
@@ -71,7 +71,7 @@
  }

  .p3-3 {

    grid-area: p3-3;
- 
    padding: 2px 8px;
+ 
    padding: 0 8px;

    display: flex;

    align-items: center;

    gap: 0.5rem;
modified src/components/OutlineButton.svelte
@@ -68,7 +68,7 @@
  }

  .p3-3 {

    grid-area: p3-3;
- 
    padding: 2px 8px;
+ 
    padding: 0 8px;

    display: flex;

    align-items: center;

    gap: 0.5rem;
@@ -224,6 +224,7 @@
  }



  .container {
+ 
    height: 2rem;

    cursor: pointer;

    white-space: nowrap;
modified src/components/PatchesSecondColumn.svelte
@@ -23,7 +23,6 @@
    flex-direction: column;

    height: 100%;

    justify-content: space-between;
- 
    padding-bottom: 1rem;

  }

  .tab {

    align-items: center;
@@ -64,7 +63,9 @@


<div class="container">

  <div>
- 
    <RepoTeaser name={project.data.name} seeding={repo.seeding} />
+ 
    <div style:margin-bottom="0.5rem" style:padding-left="0.75rem">
+ 
      <RepoTeaser name={project.data.name} seeding={repo.seeding} />
+ 
    </div>



    <div style:margin-bottom="0.5rem">

      <Link
modified src/components/RepoTeaser.svelte
@@ -12,8 +12,7 @@
<style>

  .teaser {

    align-items: center;
- 
    height: 34px;
- 
    margin: 0 4px 1rem 12px;
+ 
    min-height: 40px;

  }



  .seeding {
modified src/components/Sidebar.svelte
@@ -44,7 +44,7 @@
</style>



<div class="global-flex" style:flex-direction="column" style:gap="0.5rem">
- 
  <div class="global-flex" style:margin-bottom="5px" style:height="40px">
+ 
  <div class="global-flex" style:height="40px">

    <Icon name="repo" />

  </div>

  {#if activeTab.type === "issues"}
modified src/views/repo/Issue.svelte
@@ -14,7 +14,12 @@
  import * as roles from "@app/lib/roles";

  import { invoke } from "@app/lib/invoke";

  import { nodeRunning } from "@app/lib/events";
- 
  import { publicKeyFromDid, scrollIntoView } from "@app/lib/utils";
+ 
  import {
+ 
    issueStatusBackgroundColor,
+ 
    issueStatusColor,
+ 
    publicKeyFromDid,
+ 
    scrollIntoView,
+ 
  } from "@app/lib/utils";



  import { announce } from "@app/components/AnnounceSwitch.svelte";
@@ -310,7 +315,13 @@
    align-items: center;

    justify-content: space-between;

    word-break: break-all;
- 
    padding-top: 4px;
+ 
    min-height: 40px;
+ 
  }
+ 
  .status {
+ 
    padding: 0;
+ 
    margin-right: 0.75rem;
+ 
    height: 2rem;
+ 
    width: 2rem;

  }

  .issue-body {

    margin-top: 1rem;
@@ -342,7 +353,6 @@
    gap: 1rem;

    margin-left: 1rem;

    align-items: center;
- 
    height: 40px;

  }

  .metadata-divider {

    width: 2px;
@@ -384,9 +394,17 @@
  {/snippet}



  <div class="content">
- 
    <div style:margin-bottom="1rem">
+ 
    <div style:margin-bottom="0.5rem">

      {#if editingTitle}

        <div class="title">
+ 
          <div
+ 
            class="global-counter status"
+ 
            style:color={issueStatusColor[issue.state.status]}
+ 
            style:background-color={issueStatusBackgroundColor[
+ 
              issue.state.status
+ 
            ]}>
+ 
            <Icon name="issue" />
+ 
          </div>

          <TextInput

            valid={updatedTitle.trim().length > 0}

            bind:value={updatedTitle}
@@ -419,7 +437,17 @@
        </div>

      {:else}

        <div class="title">
- 
          <InlineTitle content={issue.title} fontSize="medium" />
+ 
          <div class="global-flex" style:gap="0">
+ 
            <div
+ 
              class="global-counter status"
+ 
              style:color={issueStatusColor[issue.state.status]}
+ 
              style:background-color={issueStatusBackgroundColor[
+ 
                issue.state.status
+ 
              ]}>
+ 
              <Icon name="issue" />
+ 
            </div>
+ 
            <InlineTitle content={issue.title} fontSize="medium" />
+ 
          </div>

          {#if roles.isDelegateOrAuthor( config.publicKey, repo.delegates.map(delegate => delegate.did), issue.body.author.did, )}

            <div class="title-icons">

              <Icon name="pen" onclick={() => (editingTitle = !editingTitle)} />
modified src/views/repo/Issues.svelte
@@ -14,6 +14,7 @@
  import IssueTeaser from "@app/components/IssueTeaser.svelte";

  import IssuesSecondColumn from "@app/components/IssuesSecondColumn.svelte";

  import Sidebar from "@app/components/Sidebar.svelte";
+ 
  import Border from "@app/components/Border.svelte";



  interface Props {

    repo: RepoInfo;
@@ -28,19 +29,22 @@
</script>



<style>
+ 
  .container {
+ 
    padding: 1rem 1rem 1rem 0;
+ 
  }

  .list {

    display: flex;

    flex-direction: column;

    gap: 2px;
- 
    padding: 0 1rem 1rem 0;

  }

  .header {

    font-weight: var(--font-weight-medium);

    font-size: var(--font-size-medium);

    display: flex;
- 
    padding: 1rem 1rem 0.5rem 1rem;

    align-items: center;

    justify-content: space-between;
+ 
    min-height: 40px;
+ 
    margin-bottom: 0.5rem;

  }

</style>
@@ -57,41 +61,52 @@
  {/snippet}



  {#snippet secondColumn()}
- 
    <div style:margin-left="1rem" style:height="100%">
- 
      <IssuesSecondColumn {project} {status} {repo} />
- 
    </div>
+ 
    <IssuesSecondColumn {project} {status} {repo} />

  {/snippet}
- 
  <div class="header">
- 
    <div>Issues</div>
- 
    <div class="txt-regular txt-semibold">
- 
      <Button
- 
        variant="secondary"
- 
        onclick={() => {
- 
          void router.push({
- 
            resource: "repo.createIssue",
- 
            status,
- 
            rid: repo.rid,
- 
          });
- 
        }}>
- 
        <Icon name="plus" />New
- 
      </Button>
+ 
  <div class="container">
+ 
    <div class="header">
+ 
      <div>Issues</div>
+ 
      <div class="txt-regular txt-semibold">
+ 
        <Button
+ 
          variant="secondary"
+ 
          onclick={() => {
+ 
            void router.push({
+ 
              resource: "repo.createIssue",
+ 
              status,
+ 
              rid: repo.rid,
+ 
            });
+ 
          }}>
+ 
          <Icon name="plus" />New
+ 
        </Button>
+ 
      </div>

    </div>
- 
  </div>
- 
  <div class="list">
- 
    {#each issues as issue}
- 
      <IssueTeaser {issue} rid={repo.rid} {status} />
- 
    {/each}
+ 
    <div class="list">
+ 
      {#each issues as issue}
+ 
        <IssueTeaser {issue} rid={repo.rid} {status} />
+ 
      {/each}
- 
    {#if issues.length === 0}
- 
      <div class="txt-missing txt-small" style:margin-left="1rem">
- 
        {#if status === "all"}
- 
          No issues.
- 
        {:else}
- 
          No {status} issues.
- 
        {/if}
- 
      </div>
- 
    {/if}
+ 
      {#if issues.length === 0}
+ 
        <Border
+ 
          variant="ghost"
+ 
          styleAlignItems="center"
+ 
          styleJustifyContent="center">
+ 
          <div
+ 
            class="global-flex"
+ 
            style:height="74px"
+ 
            style:justify-content="center">
+ 
            <div class="txt-missing txt-small global-flex" style:gap="0.25rem">
+ 
              <Icon name="none" />
+ 
              {#if status === "all"}
+ 
                No issues.
+ 
              {:else}
+ 
                No {status} issues.
+ 
              {/if}
+ 
            </div>
+ 
          </div>
+ 
        </Border>
+ 
      {/if}
+ 
    </div>

  </div>

</Layout>
modified src/views/repo/Layout.svelte
@@ -108,22 +108,18 @@


  .sidebar {

    grid-column: 1 / 2;
- 
    width: 40px;
- 
    margin: 0 1rem;
+ 
    padding: 1rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: space-between;
- 
    margin-top: 13px;
- 
    margin-bottom: 1rem;

  }



  .secondColumn {

    grid-column: 2 / 3;
- 
    margin: 1rem 0 0 0;

    max-width: 28rem;

    min-width: 14rem;
- 
    margin-right: 1rem;
+ 
    padding: 1rem 1rem 1rem 0;

  }



  .content {
@@ -139,12 +135,16 @@
    <Header {publicKey} center={headerCenter}></Header>

  </div>
- 
  <div class="sidebar" style:display={hideSidebar ? "none" : "flex"}>
+ 
  <div
+ 
    class="sidebar"
+ 
    style:display={hideSidebar ? "none" : "flex"}
+ 
    style:padding-right="1rem">

    {@render sidebar()}

  </div>



  <div

    class="secondColumn"
+ 
    style:padding-left={hideSidebar ? "1rem" : "0"}

    bind:this={secondColumnContainer}

    style:display={oneColumnLayout && !hideSidebar ? "none" : undefined}

    style:overflow={styleSecondColumnOverflow}>
modified src/views/repo/Patch.svelte
@@ -12,7 +12,12 @@
  import partial from "lodash/partial";



  import * as roles from "@app/lib/roles";
- 
  import { formatOid, publicKeyFromDid } from "@app/lib/utils";
+ 
  import {
+ 
    formatOid,
+ 
    patchStatusBackgroundColor,
+ 
    patchStatusColor,
+ 
    publicKeyFromDid,
+ 
  } from "@app/lib/utils";

  import { invoke } from "@app/lib/invoke";

  import { nodeRunning } from "@app/lib/events";
@@ -223,7 +228,16 @@
    font-weight: var(--font-weight-medium);

    -webkit-user-select: text;

    user-select: text;
- 
    margin-bottom: 1rem;
+ 
    display: flex;
+ 
    align-items: center;
+ 
    word-break: break-all;
+ 
    min-height: 40px;
+ 
  }
+ 
  .status {
+ 
    padding: 0;
+ 
    margin-right: 0.75rem;
+ 
    height: 2rem;
+ 
    width: 2rem;

  }

  .patch-list {

    margin-top: 0.5rem;
@@ -233,7 +247,7 @@
    padding-bottom: 1rem;

  }

  .content {
- 
    padding: 1.5rem 1rem 1rem 0;
+ 
    padding: 1rem 1rem 1rem 0;

  }



  .patch-body {
@@ -286,7 +300,7 @@
    <div

      class="txt-regular txt-semibold global-flex"

      style:gap="4px"
- 
      style:min-height="34px">
+ 
      style:min-height="40px">

      {project.data.name}

      <Icon name="chevron-right" />

      Patches
@@ -305,8 +319,18 @@
  {/snippet}



  <div class="content">
- 
    <div class="title">
- 
      <InlineTitle content={patch.title} fontSize="medium" />
+ 
    <div style:margin-bottom="0.5rem">
+ 
      <div class="title">
+ 
        <div
+ 
          class="global-counter status"
+ 
          style:color={patchStatusColor[patch.state.status]}
+ 
          style:background-color={patchStatusBackgroundColor[
+ 
            patch.state.status
+ 
          ]}>
+ 
          <Icon name="patch" />
+ 
        </div>
+ 
        <InlineTitle content={patch.title} fontSize="medium" />
+ 
      </div>

    </div>



    <Border variant="ghost" styleGap="0">
modified src/views/repo/Patches.svelte
@@ -8,10 +8,12 @@
  import { invoke } from "@app/lib/invoke";



  import CopyableId from "@app/components/CopyableId.svelte";
+ 
  import Icon from "@app/components/Icon.svelte";

  import Layout from "./Layout.svelte";

  import PatchTeaser from "@app/components/PatchTeaser.svelte";

  import PatchesSecondColumn from "@app/components/PatchesSecondColumn.svelte";

  import Sidebar from "@app/components/Sidebar.svelte";
+ 
  import Border from "@app/components/Border.svelte";



  interface Props {

    repo: RepoInfo;
@@ -51,19 +53,21 @@
</script>



<style>
+ 
  .container {
+ 
    padding: 1rem 1rem 1rem 0;
+ 
  }

  .list {

    display: flex;

    flex-direction: column;

    gap: 2px;
- 
    padding: 0 1rem 1rem 0;

  }

  .header {

    font-weight: var(--font-weight-medium);

    font-size: var(--font-size-medium);
- 
    padding: 1rem 1rem 0.5rem 1rem;

    display: flex;

    align-items: center;
- 
    height: 58px;
+ 
    min-height: 40px;
+ 
    margin-bottom: 0.5rem;

  }

</style>
@@ -81,26 +85,37 @@
  {/snippet}



  {#snippet secondColumn()}
- 
    <div style:margin-left="1rem" style:height="100%">
- 
      <PatchesSecondColumn {project} {status} {repo} />
- 
    </div>
+ 
    <PatchesSecondColumn {project} {status} {repo} />

  {/snippet}
- 
  <div class="header">Patches</div>
-
- 
  <div class="list">
- 
    {#each items as patch}
- 
      <PatchTeaser rid={repo.rid} {patch} {status} />
- 
    {/each}
-
- 
    {#if patches.content.length === 0}
- 
      <div class="txt-missing txt-small" style:margin-left="1rem">
- 
        {#if status === undefined}
- 
          No patches.
- 
        {:else}
- 
          No {status} patches.
- 
        {/if}
- 
      </div>
- 
    {/if}
+ 
  <div class="container">
+ 
    <div class="header">Patches</div>
+
+ 
    <div class="list">
+ 
      {#each items as patch}
+ 
        <PatchTeaser rid={repo.rid} {patch} {status} />
+ 
      {/each}
+
+ 
      {#if patches.content.length === 0}
+ 
        <Border
+ 
          variant="ghost"
+ 
          styleAlignItems="center"
+ 
          styleJustifyContent="center">
+ 
          <div
+ 
            class="global-flex"
+ 
            style:height="74px"
+ 
            style:justify-content="center">
+ 
            <div class="txt-missing txt-small global-flex" style:gap="0.25rem">
+ 
              <Icon name="none" />
+ 
              {#if status === undefined}
+ 
                No patches.
+ 
              {:else}
+ 
                No {status} patches.
+ 
              {/if}
+ 
            </div>
+ 
          </div>
+ 
        </Border>
+ 
      {/if}
+ 
    </div>

  </div>

</Layout>