Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Make issue/patch body stand out more via background color
dnlklmn committed 2 years ago
commit 6e1f3dea8b09f9744c07cbe7058764481ae803ce
parent c32cf7c559cb38edaee563988660c6b71c0bbf09
6 files changed +172 -157
modified src/components/Button.svelte
@@ -292,30 +292,29 @@
  }



  .tab {
- 
    background-color: var(--color-background-default);
+ 
    background-color: transparent;

    color: var(--color-foreground-contrast);
- 
    border: 1px solid transparent;
- 
    border-bottom: 1px solid var(--color-fill-separator);
+ 
    border: 1px solid var(--color-border-hint);
+ 
    border-radius: 4px 4px 0 0;

  }



  .tab[disabled] {

    background-color: var(--color-background-default);

    color: var(--color-foreground-disabled);
+ 
    border: none;
+ 
    border-bottom: 1px solid var(--color-border-hint);

  }



  .tab:not([disabled]):hover {

    background-color: var(--color-fill-float-hover);
- 
    border-top-right-radius: var(--border-radius-tiny) !important;
- 
    border-top-left-radius: var(--border-radius-tiny) !important;

  }



  .tab-active {

    background-color: var(--color-background-default);

    border: 1px solid var(--color-fill-separator);

    border-bottom: 1px solid var(--color-background-default);
+ 
    border-radius: 4px 4px 0 0;

    color: var(--color-foreground-contrast);
- 
    border-top-right-radius: var(--border-radius-tiny) !important;
- 
    border-top-left-radius: var(--border-radius-tiny) !important;

  }



  .tab-active[disabled] {
modified src/components/Radio.svelte
@@ -6,7 +6,7 @@
<style>

  .radio {

    display: flex;
- 
    gap: 0.25rem;
+ 
    gap: 0.375rem;

    border-radius: var(--border-radius-tiny);

    justify-content: center;

    align-items: center;
modified src/views/projects/Cob/CobHeader.svelte
@@ -1,6 +1,7 @@
<style>

  .header {

    display: flex;
+ 
    padding: 1rem;

    flex-direction: column;

    border-radius: var(--border-radius-small);

  }
@@ -18,11 +19,11 @@
    align-items: center;

    justify-content: space-between;

    gap: 0.5rem;
- 
    margin-bottom: 1rem;
+ 
    margin-bottom: 0.5rem;

  }

  .description {

    font-size: var(--font-size-small);
- 
    margin-top: 1rem;
+ 
    margin-top: 2rem;

    word-break: break-word;

  }

</style>
modified src/views/projects/Issue.svelte
@@ -404,6 +404,21 @@
    flex: 1;

    min-height: 100%;

  }
+ 
  .main {
+ 
    display: flex;
+ 
    flex: 1;
+ 
    flex-direction: column;
+ 
    gap: 1.5rem;
+ 
    background-color: var(--color-background-float);
+ 
  }
+ 
  .bottom {
+ 
    padding: 1rem;
+ 
    display: flex;
+ 
    flex-direction: column;
+ 
    gap: 1.5rem;
+ 
    background-color: var(--color-background-default);
+ 
  }
+ 


  .metadata {

    display: flex;

    flex-direction: column;
@@ -463,7 +478,7 @@


<Layout {baseUrl} {project} activeTab="issues">

  <div class="issue">
- 
    <div class="content">
+ 
    <div class="main">

      <CobHeader>

        <svelte:fragment slot="title">

          {#if issueState !== "read"}
@@ -572,40 +587,44 @@
          {/if}

        </div>

      </CobHeader>
- 
      {#if threads.length > 0}
- 
        <div class="threads">
- 
          {#each threads as thread (thread.root.id)}
- 
            <ThreadComponent
- 
              enableAttachments
- 
              {thread}
- 
              rawPath={rawPath(project.head)}
- 
              canEditComment={partial(
- 
                role.isDelegateOrAuthor,
- 
                session?.publicKey,
- 
                project.delegates,
- 
              )}
- 
              editComment={session && partial(editComment, session.id)}
- 
              createReply={session && partial(createReply, session.id)}
- 
              handleReaction={session && partial(handleReaction, session)} />
- 
          {/each}
- 
        </div>
- 
      {/if}
- 
      {#if session}
- 
        <CommentToggleInput
- 
          rawPath={rawPath(project.head)}
- 
          placeholder="Leave your comment"
- 
          enableAttachments
- 
          submit={partial(createComment, session.id)} />
- 
        <div style:display="flex">
- 
          {#if role.isDelegateOrAuthor(session.publicKey, project.delegates, issue.author.id)}
- 
            <CobStateButton
- 
              items={items.filter(([, state]) => !isEqual(state, issue.state))}
- 
              {selectedItem}
- 
              state={issue.state}
- 
              save={partial(saveStatus, session.id)} />
- 
          {/if}
- 
        </div>
- 
      {/if}
+ 
      <div class="bottom">
+ 
        {#if threads.length > 0}
+ 
          <div class="threads">
+ 
            {#each threads as thread (thread.root.id)}
+ 
              <ThreadComponent
+ 
                enableAttachments
+ 
                {thread}
+ 
                rawPath={rawPath(project.head)}
+ 
                canEditComment={partial(
+ 
                  role.isDelegateOrAuthor,
+ 
                  session?.publicKey,
+ 
                  project.delegates,
+ 
                )}
+ 
                editComment={session && partial(editComment, session.id)}
+ 
                createReply={session && partial(createReply, session.id)}
+ 
                handleReaction={session && partial(handleReaction, session)} />
+ 
            {/each}
+ 
          </div>
+ 
        {/if}
+ 
        {#if session}
+ 
          <CommentToggleInput
+ 
            rawPath={rawPath(project.head)}
+ 
            placeholder="Leave your comment"
+ 
            enableAttachments
+ 
            submit={partial(createComment, session.id)} />
+ 
          <div style:display="flex">
+ 
            {#if role.isDelegateOrAuthor(session.publicKey, project.delegates, issue.author.id)}
+ 
              <CobStateButton
+ 
                items={items.filter(
+ 
                  ([, state]) => !isEqual(state, issue.state),
+ 
                )}
+ 
                {selectedItem}
+ 
                state={issue.state}
+ 
                save={partial(saveStatus, session.id)} />
+ 
            {/if}
+ 
          </div>
+ 
        {/if}
+ 
      </div>

    </div>

    <div class="metadata global-hide-on-mobile">

      <AssigneeInput
modified src/views/projects/Patch.svelte
@@ -561,7 +561,12 @@
    display: flex;

    flex: 1;

    min-height: 100%;
- 
    min-height: 100%;
+ 
  }
+ 
  .main {
+ 
    display: flex;
+ 
    flex: 1;
+ 
    flex-direction: column;
+ 
    background-color: var(--color-background-float);

  }

  .metadata {

    display: flex;
@@ -583,11 +588,10 @@
    font-size: var(--font-size-large);

    height: 2.5rem;

  }
- 
  .content {
- 
    display: flex;
- 
    flex: 1;
- 
    flex-direction: column;
- 
    min-width: 25rem;
+ 
  .bottom {
+ 
    background-color: var(--color-background-default);
+ 
    padding: 1rem;
+ 
    height: 100%;

  }

  .tabs {

    font-size: var(--font-size-tiny);
@@ -596,18 +600,12 @@
    justify-content: left;

    flex-wrap: wrap;

    position: relative;
- 
    margin-top: 1.5rem;
- 
    margin-bottom: 1.5rem;
- 
  }
- 
  .tabs::after {
- 
    content: "";
- 
    position: absolute;
- 
    left: -1rem;
- 
    bottom: 0;
- 
    border-bottom: 1px solid var(--color-fill-separator);
- 
    width: calc(100% + 2rem);
- 
    width: calc(100% + 2rem);
- 
    z-index: -1;
+ 
    margin-top: 1rem;
+ 
    box-shadow: inset 0 -1px 0 var(--color-border-hint);
+ 
  }
+ 
  .tabs-spacer {
+ 
    width: 1rem;
+ 
    height: 100%;

  }

  .author {

    display: flex;
@@ -659,7 +657,7 @@


<Layout {baseUrl} {project} activeTab="patches">

  <div class="patch">
- 
    <div class="content">
+ 
    <div class="main">

      <CobHeader>

        <svelte:fragment slot="title">

          {#if patchState !== "read"}
@@ -740,11 +738,11 @@
      </CobHeader>



      <div class="tabs">
+ 
        <div class="tabs-spacer" />

        <Radio>

          {#each Object.entries(tabs) as [name, { route, icon }]}

            <Link {route}>

              <Button
- 
                styleBorderRadius="0"

                size="large"

                variant={name === view.name ? "tab-active" : "tab"}>

                <IconSmall name={icon} />
@@ -765,7 +763,7 @@
                  toCommit: view.toCommit,

                },

              }}>
- 
              <Button styleBorderRadius="0" size="large" variant="tab-active">
+ 
              <Button size="large" variant="tab-active">

                Compare <span class="diff-button-range">

                  {view.fromCommit.substring(0, 6)}..{view.toCommit.substring(

                    0,
@@ -842,93 +840,96 @@
            </div>

          {/if}

        </div>
+ 
        <div class="tabs-spacer" />

      </div>
- 
      {#if view.name === "diff"}
- 
        <div style:margin-top="1rem">
- 
          <Changeset
- 
            {baseUrl}
- 
            projectId={project.id}
- 
            revision={view.toCommit}
- 
            files={view.files}
- 
            diff={view.diff} />
- 
        </div>
- 
      {:else if view.name === "activity"}
- 
        {#each timelineTuple as [revision, timelines], index}
- 
          {@const previousRevision =
- 
            index > 0 ? patch.revisions[index - 1] : undefined}
- 
          <RevisionComponent
- 
            {baseUrl}
- 
            {rawPath}
- 
            projectId={project.id}
- 
            {timelines}
- 
            projectDefaultBranch={project.defaultBranch}
- 
            projectHead={project.head}
- 
            {...revision}
- 
            first={index === 0}
- 
            canEdit={partial(
- 
              role.isDelegateOrAuthor,
- 
              session?.publicKey,
- 
              project.delegates,
- 
            )}
- 
            editRevision={session &&
- 
              partial(editRevision, session.id, revision.revisionId)}
- 
            editComment={session &&
- 
              partial(editComment, session.id, revision.revisionId)}
- 
            handleReaction={session &&
- 
              partial(handleReaction, session, revision.revisionId)}
- 
            createReply={session &&
- 
              partial(createReply, session.id, revision.revisionId)}
- 
            patchId={patch.id}
- 
            patchState={patch.state}
- 
            expanded={index === patch.revisions.length - 1}
- 
            previousRevId={previousRevision?.id}
- 
            previousRevOid={previousRevision?.oid}>
- 
            {#if index === patch.revisions.length - 1}
- 
              {#if session && view.name === "activity"}
- 
                <div class="connector" />
- 
                <CommentToggleInput
- 
                  rawPath={rawPath(patch.revisions[0].id)}
- 
                  enableAttachments
- 
                  placeholder="Leave your comment"
- 
                  submit={partial(
- 
                    createComment,
- 
                    session.id,
- 
                    revision.revisionId,
- 
                  )} />
- 
                {#if role.isDelegateOrAuthor(session.publicKey, project.delegates, patch.author.id)}
+ 
      <div class="bottom">
+ 
        {#if view.name === "diff"}
+ 
          <div style:margin-top="1rem">
+ 
            <Changeset
+ 
              {baseUrl}
+ 
              projectId={project.id}
+ 
              revision={view.toCommit}
+ 
              files={view.files}
+ 
              diff={view.diff} />
+ 
          </div>
+ 
        {:else if view.name === "activity"}
+ 
          {#each timelineTuple as [revision, timelines], index}
+ 
            {@const previousRevision =
+ 
              index > 0 ? patch.revisions[index - 1] : undefined}
+ 
            <RevisionComponent
+ 
              {baseUrl}
+ 
              {rawPath}
+ 
              projectId={project.id}
+ 
              {timelines}
+ 
              projectDefaultBranch={project.defaultBranch}
+ 
              projectHead={project.head}
+ 
              {...revision}
+ 
              first={index === 0}
+ 
              canEdit={partial(
+ 
                role.isDelegateOrAuthor,
+ 
                session?.publicKey,
+ 
                project.delegates,
+ 
              )}
+ 
              editRevision={session &&
+ 
                partial(editRevision, session.id, revision.revisionId)}
+ 
              editComment={session &&
+ 
                partial(editComment, session.id, revision.revisionId)}
+ 
              handleReaction={session &&
+ 
                partial(handleReaction, session, revision.revisionId)}
+ 
              createReply={session &&
+ 
                partial(createReply, session.id, revision.revisionId)}
+ 
              patchId={patch.id}
+ 
              patchState={patch.state}
+ 
              expanded={index === patch.revisions.length - 1}
+ 
              previousRevId={previousRevision?.id}
+ 
              previousRevOid={previousRevision?.oid}>
+ 
              {#if index === patch.revisions.length - 1}
+ 
                {#if session && view.name === "activity"}

                  <div class="connector" />
- 
                  <div style="display: flex;">
- 
                    <CobStateButton
- 
                      items={items.filter(
- 
                        ([, state]) => !isEqual(state, patch.state),
- 
                      )}
- 
                      {selectedItem}
- 
                      state={patch.state}
- 
                      save={partial(saveStatus, session.id)} />
- 
                  </div>
+ 
                  <CommentToggleInput
+ 
                    rawPath={rawPath(patch.revisions[0].id)}
+ 
                    enableAttachments
+ 
                    placeholder="Leave your comment"
+ 
                    submit={partial(
+ 
                      createComment,
+ 
                      session.id,
+ 
                      revision.revisionId,
+ 
                    )} />
+ 
                  {#if role.isDelegateOrAuthor(session.publicKey, project.delegates, patch.author.id)}
+ 
                    <div class="connector" />
+ 
                    <div style="display: flex;">
+ 
                      <CobStateButton
+ 
                        items={items.filter(
+ 
                          ([, state]) => !isEqual(state, patch.state),
+ 
                        )}
+ 
                        {selectedItem}
+ 
                        state={patch.state}
+ 
                        save={partial(saveStatus, session.id)} />
+ 
                    </div>
+ 
                  {/if}

                {/if}

              {/if}
- 
            {/if}
- 
          </RevisionComponent>
- 
        {:else}
- 
          <div style:margin="4rem 0">
- 
            <Placeholder
- 
              iconName="no-patches"
- 
              caption="No activity on this patch yet" />
+ 
            </RevisionComponent>
+ 
          {:else}
+ 
            <div style:margin="4rem 0">
+ 
              <Placeholder
+ 
                iconName="no-patches"
+ 
                caption="No activity on this patch yet" />
+ 
            </div>
+ 
          {/each}
+ 
        {:else if view.name === "changes"}
+ 
          <div style:margin-top="1rem">
+ 
            <Changeset
+ 
              {baseUrl}
+ 
              projectId={project.id}
+ 
              revision={view.oid}
+ 
              files={view.files}
+ 
              diff={view.diff} />

          </div>
- 
        {/each}
- 
      {:else if view.name === "changes"}
- 
        <div style:margin-top="1rem">
- 
          <Changeset
- 
            {baseUrl}
- 
            projectId={project.id}
- 
            revision={view.oid}
- 
            files={view.files}
- 
            diff={view.diff} />
- 
        </div>
- 
      {:else}
- 
        {utils.unreachable(view)}
- 
      {/if}
+ 
        {:else}
+ 
          {utils.unreachable(view)}
+ 
        {/if}
+ 
      </div>

    </div>



    <div class="metadata global-hide-on-mobile">
modified src/views/projects/Source/Header.svelte
@@ -46,6 +46,7 @@
  .header {

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

    display: flex;
+ 
    gap: 0.375rem;

    align-items: center;

    justify-content: left;

    flex-wrap: wrap;
@@ -93,7 +94,7 @@
</div>



<div class="header">
- 
  <div style="display: flex; gap: 0.25rem;">
+ 
  <div style="display: flex; gap: 0.375rem;">

    <Link

      route={{

        resource: "project.source",
@@ -102,10 +103,7 @@
        peer,

        revision,

      }}>
- 
      <Button
- 
        styleBorderRadius="0"
- 
        size="large"
- 
        variant={filesLinkActive ? "tab-active" : "tab"}>
+ 
      <Button size="large" variant={filesLinkActive ? "tab-active" : "tab"}>

        <IconSmall name="file" />Files

      </Button>

    </Link>
@@ -118,10 +116,7 @@
        peer,

        revision,

      }}>
- 
      <Button
- 
        styleBorderRadius="0"
- 
        size="large"
- 
        variant={historyLinkActive ? "tab-active" : "tab"}>
+ 
      <Button size="large" variant={historyLinkActive ? "tab-active" : "tab"}>

        <IconSmall name="commit" />

        <div class="title-counter">

          Commits