Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Convert assignee/label box to a right-hand sidebar
dnlklmn committed 2 years ago
commit c32cf7c559cb38edaee563988660c6b71c0bbf09
parent 10170d79e5ff135d713f37165fb218354cdcd161
3 files changed +105 -117
modified src/views/projects/Issue.svelte
@@ -402,18 +402,14 @@
  .issue {

    display: flex;

    flex: 1;
- 
    padding: 1rem;
+ 
    min-height: 100%;

  }

  .metadata {

    display: flex;

    flex-direction: column;

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

    padding: 1rem;
- 
    margin-left: 3rem;
- 
    border: 1px solid var(--color-border-hint);
- 
    background-color: var(--color-background-float);
- 
    border-radius: var(--border-radius-small);
- 
    height: fit-content;
+ 
    border-left: 1px solid var(--color-border-hint);

    gap: 1.5rem;

    width: 20rem;

  }
modified src/views/projects/Issue/New.svelte
@@ -101,8 +101,7 @@
<style>

  .form {

    display: flex;
- 
    flex: 1;
- 
    padding: 1rem;
+ 
    min-height: 100%;

  }

  .actions {

    display: flex;
@@ -116,11 +115,7 @@
    flex-direction: column;

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

    padding: 1rem;
- 
    margin-left: 3rem;
- 
    border: 1px solid var(--color-border-hint);
- 
    background-color: var(--color-background-float);
- 
    border-radius: var(--border-radius-small);
- 
    height: fit-content;
+ 
    border-left: 1px solid var(--color-border-hint);

    gap: 1.5rem;

    width: 20rem;

  }
@@ -135,104 +130,102 @@
</style>



<Layout {baseUrl} {project} activeTab="issues">
- 
  <div>
- 
    {#if session}
- 
      <div class="form">
- 
        <div class="editor">
- 
          <CobHeader>
- 
            <svelte:fragment slot="title">
- 
              {#if !preview}
- 
                <TextInput
- 
                  placeholder="Title"
- 
                  bind:value={issueTitle}
- 
                  showKeyHint={false} />
- 
              {:else if issueTitle}
- 
                <InlineMarkdown fontSize="medium" content={issueTitle} />
- 
              {:else}
- 
                <span class="txt-missing">No title</span>
- 
              {/if}
- 
            </svelte:fragment>
- 
            <svelte:fragment slot="state">
- 
              {#if preview}
- 
                <Badge size="small" variant="positive">open</Badge>
- 
              {/if}
- 
            </svelte:fragment>
- 
            <svelte:fragment slot="description">
- 
              {#if !preview}
- 
                <Textarea
- 
                  bind:selectionStart
- 
                  bind:selectionEnd
- 
                  on:drop={handleFileDrop}
- 
                  bind:value={issueText}
- 
                  on:submit={async () => {
- 
                    if (valid && session) {
- 
                      creatingIssue = true;
- 
                      try {
- 
                        await createIssue(session.id);
- 
                      } finally {
- 
                        creatingIssue = false;
- 
                      }
+ 
  {#if session}
+ 
    <div class="form">
+ 
      <div class="editor" style="padding: 1rem;">
+ 
        <CobHeader>
+ 
          <svelte:fragment slot="title">
+ 
            {#if !preview}
+ 
              <TextInput
+ 
                placeholder="Title"
+ 
                bind:value={issueTitle}
+ 
                showKeyHint={false} />
+ 
            {:else if issueTitle}
+ 
              <InlineMarkdown fontSize="medium" content={issueTitle} />
+ 
            {:else}
+ 
              <span class="txt-missing">No title</span>
+ 
            {/if}
+ 
          </svelte:fragment>
+ 
          <svelte:fragment slot="state">
+ 
            {#if preview}
+ 
              <Badge size="small" variant="positive">open</Badge>
+ 
            {/if}
+ 
          </svelte:fragment>
+ 
          <svelte:fragment slot="description">
+ 
            {#if !preview}
+ 
              <Textarea
+ 
                bind:selectionStart
+ 
                bind:selectionEnd
+ 
                on:drop={handleFileDrop}
+ 
                bind:value={issueText}
+ 
                on:submit={async () => {
+ 
                  if (valid && session) {
+ 
                    creatingIssue = true;
+ 
                    try {
+ 
                      await createIssue(session.id);
+ 
                    } finally {
+ 
                      creatingIssue = false;

                    }
- 
                  }}
- 
                  placeholder="Write a description" />
- 
              {:else if !issueText}
- 
                <p class="txt-missing">No description</p>
- 
              {:else}
- 
                <Markdown
- 
                  rawPath={rawPath(project.head)}
- 
                  embeds={newEmbeds}
- 
                  content={issueText} />
- 
              {/if}
- 
            </svelte:fragment>
- 
            <div class="author" slot="author">
- 
              {#if preview}
- 
                opened by <NodeId
- 
                  nodeId={session.publicKey}
- 
                  alias={session.alias} /> now
- 
              {/if}
- 
            </div>
- 
          </CobHeader>
- 
          <div class="actions">
- 
            <Button
- 
              disabled={creatingIssue}
- 
              variant="none"
- 
              on:click={() => (preview = !preview)}>
- 
              {#if preview}
- 
                Resume editing
- 
              {:else}
- 
                Preview
- 
              {/if}
- 
            </Button>
- 
            <Button
- 
              disabled={!valid || creatingIssue}
- 
              variant="secondary"
- 
              on:click={async () => {
- 
                if (session) {
- 
                  creatingIssue = true;
- 
                  try {
- 
                    await createIssue(session.id);
- 
                  } finally {
- 
                    creatingIssue = false;

                  }
- 
                }
- 
              }}>
- 
              Submit
- 
            </Button>
+ 
                }}
+ 
                placeholder="Write a description" />
+ 
            {:else if !issueText}
+ 
              <p class="txt-missing">No description</p>
+ 
            {:else}
+ 
              <Markdown
+ 
                rawPath={rawPath(project.head)}
+ 
                embeds={newEmbeds}
+ 
                content={issueText} />
+ 
            {/if}
+ 
          </svelte:fragment>
+ 
          <div class="author" slot="author">
+ 
            {#if preview}
+ 
              opened by <NodeId
+ 
                nodeId={session.publicKey}
+ 
                alias={session.alias} /> now
+ 
            {/if}

          </div>
+ 
        </CobHeader>
+ 
        <div class="actions">
+ 
          <Button
+ 
            disabled={creatingIssue}
+ 
            variant="none"
+ 
            on:click={() => (preview = !preview)}>
+ 
            {#if preview}
+ 
              Resume editing
+ 
            {:else}
+ 
              Preview
+ 
            {/if}
+ 
          </Button>
+ 
          <Button
+ 
            disabled={!valid || creatingIssue}
+ 
            variant="secondary"
+ 
            on:click={async () => {
+ 
              if (session) {
+ 
                creatingIssue = true;
+ 
                try {
+ 
                  await createIssue(session.id);
+ 
                } finally {
+ 
                  creatingIssue = false;
+ 
                }
+ 
              }
+ 
            }}>
+ 
            Submit
+ 
          </Button>

        </div>
- 
        <div class="metadata">
- 
          <AssigneeInput
- 
            locallyAuthenticated={Boolean(session)}
- 
            on:save={({ detail: updatedAssignees }) =>
- 
              (assignees = updatedAssignees)} />
- 
          <LabelInput
- 
            locallyAuthenticated={Boolean(session)}
- 
            on:save={({ detail: updatedLabels }) => (labels = updatedLabels)} />
- 
        </div>

      </div>
- 
    {:else}
- 
      <ErrorMessage
- 
        message="Couldn't access issue creation. Make sure you're authenticated." />
- 
    {/if}
- 
  </div>
+ 
      <div class="metadata">
+ 
        <AssigneeInput
+ 
          locallyAuthenticated={Boolean(session)}
+ 
          on:save={({ detail: updatedAssignees }) =>
+ 
            (assignees = updatedAssignees)} />
+ 
        <LabelInput
+ 
          locallyAuthenticated={Boolean(session)}
+ 
          on:save={({ detail: updatedLabels }) => (labels = updatedLabels)} />
+ 
      </div>
+ 
    </div>
+ 
  {:else}
+ 
    <ErrorMessage
+ 
      message="Couldn't access issue creation. Make sure you're authenticated." />
+ 
  {/if}

</Layout>
modified src/views/projects/Patch.svelte
@@ -560,7 +560,8 @@
  .patch {

    display: flex;

    flex: 1;
- 
    padding: 1rem;
+ 
    min-height: 100%;
+ 
    min-height: 100%;

  }

  .metadata {

    display: flex;
@@ -568,11 +569,8 @@
    gap: 1.5rem;

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

    padding: 1rem;
- 
    margin-left: 3rem;
- 
    border: 1px solid var(--color-border-hint);
- 
    background-color: var(--color-background-float);
- 
    border-radius: var(--border-radius-small);
- 
    height: fit-content;
+ 
    border-left: 1px solid var(--color-border-hint);
+ 
    border-left: 1px solid var(--color-border-hint);

    width: 20rem;

  }

  .title {
@@ -607,7 +605,8 @@
    left: -1rem;

    bottom: 0;

    border-bottom: 1px solid var(--color-fill-separator);
- 
    width: calc(100% + 1rem);
+ 
    width: calc(100% + 2rem);
+ 
    width: calc(100% + 2rem);

    z-index: -1;

  }

  .author {
@@ -778,7 +777,7 @@
          {/if}

        </Radio>
- 
        <div style:margin-left="auto">
+ 
        <div style="margin-left: auto; margin-top: -0.5rem;">

          {#if session && role.isDelegateOrAuthor(session.publicKey, project.delegates, patch.author.id) && view.name === "activity"}

            <CobStateButton

              items={items.filter(([, state]) => !isEqual(state, patch.state))}
@@ -787,7 +786,7 @@
              save={partial(saveStatus, session.id)} />

          {/if}

          {#if view.name === "changes"}
- 
            <div style="margin-left: auto;">
+ 
            <div style="margin-left: auto; ">

              <Popover

                popoverPadding="0"

                popoverPositionTop="2.5rem"