Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Tweak issue/patch assignee/label/embed layout
Rūdolfs Ošiņš committed 1 year ago
commit 67da51f9640a534da5b8af9a08ffbc9f1fde3676
parent 3f4c65321d94aa0089c0c2f37eff19da694e27c5
6 files changed +93 -63
modified src/components/Badge.svelte
@@ -29,8 +29,6 @@
    white-space: nowrap;

    align-items: center;

    gap: 0.25rem;
- 
    /* This is aprox. a DID assignee */
- 
    max-width: 16rem;

  }

  .background {

    color: currentColor;
modified src/views/projects/Cob/AssigneeInput.svelte
@@ -97,7 +97,12 @@
    position: relative;

    margin-top: 0.5rem;

  }
-
+ 
  .input {
+ 
    width: 100%;
+ 
    display: flex;
+ 
    align-items: center;
+ 
    gap: 0.5rem;
+ 
  }

  @media (max-width: 1349.98px) {

    .wrapper {

      display: flex;
@@ -111,11 +116,17 @@
      display: flex;

      align-items: center;

    }
+ 
    .body {
+ 
      align-items: flex-start;
+ 
    }

    .no-assignees {

      height: 2rem;

      display: flex;

      align-items: center;

    }
+ 
    .input {
+ 
      width: 18rem;
+ 
    }

  }

</style>
@@ -127,12 +138,12 @@
        <Badge

          variant="neutral"

          size="small"
- 
          style="cursor: pointer;"
+ 
          style="cursor: pointer; max-width: 14rem;"

          on:click={() =>

            (removeToggles[assignee.id] = !removeToggles[assignee.id])}>

          <div class="assignee">

            <Avatar inline nodeId={assignee.id} />
- 
            <span>{formatNodeId(assignee.id)}</span>
+ 
            <span class="txt-overflow">{formatNodeId(assignee.id)}</span>

            {#if removeToggles[assignee.id]}

              <IconButton title="remove assignee">

                <IconSmall
@@ -144,32 +155,33 @@
        </Badge>

      {/each}

      {#if showInput}
- 
        <div
- 
          style="width:100%; display: flex; align-items: center; gap: 0.5rem;">
- 
          <TextInput
- 
            autofocus
- 
            disabled={submitInProgress}
- 
            bind:value={inputValue}
- 
            placeholder="Add assignee"
- 
            on:submit={addAssignee} />
- 
          <IconButton
- 
            title="discard assignee"
- 
            on:click={() => {
- 
              inputValue = "";
- 
              validationMessage = undefined;
- 
              showInput = false;
- 
            }}>
- 
            <IconSmall name="cross" />
- 
          </IconButton>
- 
          <IconButton title="save assignee" on:click={addAssignee}>
- 
            <IconSmall name="checkmark" />
- 
          </IconButton>
- 
        </div>
- 
        {#if validationMessage}
- 
          <div class="validation-message">
- 
            <IconSmall name="exclamation-circle" />{validationMessage}
+ 
        <div>
+ 
          <div class="input">
+ 
            <TextInput
+ 
              autofocus
+ 
              disabled={submitInProgress}
+ 
              bind:value={inputValue}
+ 
              placeholder="Add assignee"
+ 
              on:submit={addAssignee} />
+ 
            <IconButton
+ 
              title="discard assignee"
+ 
              on:click={() => {
+ 
                inputValue = "";
+ 
                validationMessage = undefined;
+ 
                showInput = false;
+ 
              }}>
+ 
              <IconSmall name="cross" />
+ 
            </IconButton>
+ 
            <IconButton title="save assignee" on:click={addAssignee}>
+ 
              <IconSmall name="checkmark" />
+ 
            </IconButton>

          </div>
- 
        {/if}
+ 
          {#if validationMessage}
+ 
            <div class="validation-message">
+ 
              <IconSmall name="exclamation-circle" />{validationMessage}
+ 
            </div>
+ 
          {/if}
+ 
        </div>

      {:else}

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

          <Badge
modified src/views/projects/Cob/Embeds.svelte
@@ -25,10 +25,16 @@
      display: flex;

      flex-direction: row;

      gap: 1rem;
- 
      align-items: flex-start;
+ 
      align-items: flex;

    }

    .header {

      margin-bottom: 0;
+ 
      height: 2rem;
+ 
      display: flex;
+ 
      align-items: center;
+ 
    }
+ 
    .no-attachments {
+ 
      height: 2rem;

      display: flex;

      align-items: center;

    }
@@ -39,12 +45,12 @@
  <div class="header">Attachments</div>

  <div class="body">

    {#each embeds as embed}
- 
      <Badge variant="neutral">
+ 
      <Badge variant="neutral" size="small" style="max-width: 14rem;">

        <span class="txt-overflow">{embed.name}</span>

        <Clipboard text={`![${embed.name}](${embed.content.substring(4)})`} />

      </Badge>

    {:else}
- 
      <div class="txt-missing">No attachments</div>
+ 
      <div class="txt-missing no-attachments">No attachments</div>

    {/each}

  </div>

</div>
modified src/views/projects/Cob/LabelInput.svelte
@@ -77,6 +77,12 @@
    position: relative;

    margin-top: 0.5rem;

  }
+ 
  .input {
+ 
    width: 100%;
+ 
    display: flex;
+ 
    align-items: center;
+ 
    gap: 0.5rem;
+ 
  }

  @media (max-width: 1349.98px) {

    .wrapper {

      display: flex;
@@ -90,11 +96,17 @@
      display: flex;

      align-items: center;

    }
+ 
    .body {
+ 
      align-items: flex-start;
+ 
    }

    .no-labels {

      height: 2rem;

      display: flex;

      align-items: center;

    }
+ 
    .input {
+ 
      width: 18rem;
+ 
    }

  }

</style>
@@ -106,9 +118,9 @@
        <Badge

          variant="neutral"

          size="small"
- 
          style="cursor: pointer;"
+ 
          style="cursor: pointer; max-width: 14rem;"

          on:click={() => (removeToggles[label] = !removeToggles[label])}>
- 
          <div class="label">{label}</div>
+ 
          <div class="label txt-overflow">{label}</div>

          {#if removeToggles[label]}

            <IconButton title="remove label">

              <IconSmall name="cross" on:click={() => removeLabel(label)} />
@@ -117,32 +129,33 @@
        </Badge>

      {/each}

      {#if showInput}
- 
        <div
- 
          style="width:100%; display: flex; align-items: center; gap: 0.5rem;">
- 
          <TextInput
- 
            autofocus
- 
            {valid}
- 
            disabled={submitInProgress}
- 
            placeholder="Add label"
- 
            bind:value={inputValue}
- 
            on:submit={addLabel} />
- 
          <IconButton
- 
            title="discard label"
- 
            on:click={() => {
- 
              inputValue = "";
- 
              showInput = false;
- 
            }}>
- 
            <IconSmall name="cross" />
- 
          </IconButton>
- 
          <IconButton title="save label" on:click={addLabel}>
- 
            <IconSmall name="checkmark" />
- 
          </IconButton>
- 
        </div>
- 
        {#if !valid && validationMessage}
- 
          <div class="validation-message">
- 
            <IconSmall name="exclamation-circle" />{validationMessage}
+ 
        <div>
+ 
          <div class="input">
+ 
            <TextInput
+ 
              autofocus
+ 
              {valid}
+ 
              disabled={submitInProgress}
+ 
              placeholder="Add label"
+ 
              bind:value={inputValue}
+ 
              on:submit={addLabel} />
+ 
            <IconButton
+ 
              title="discard label"
+ 
              on:click={() => {
+ 
                inputValue = "";
+ 
                showInput = false;
+ 
              }}>
+ 
              <IconSmall name="cross" />
+ 
            </IconButton>
+ 
            <IconButton title="save label" on:click={addLabel}>
+ 
              <IconSmall name="checkmark" />
+ 
            </IconButton>

          </div>
- 
        {/if}
+ 
          {#if !valid && validationMessage}
+ 
            <div class="validation-message">
+ 
              <IconSmall name="exclamation-circle" />{validationMessage}
+ 
            </div>
+ 
          {/if}
+ 
        </div>

      {:else}

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

          <Badge
modified src/views/projects/Cob/Reviews.svelte
@@ -39,6 +39,9 @@
    }

    .header {

      margin-bottom: 0;
+ 
      height: 2rem;
+ 
      display: flex;
+ 
      align-items: center;

    }

    .no-reviews {

      display: flex;
modified src/views/projects/Issue.svelte
@@ -589,9 +589,7 @@
              labels={issue.labels}

              submitInProgress={labelState === "submit"}

              on:save={({ detail: newLabels }) => void saveLabels(newLabels)} />
- 
            <div class="global-hide-on-mobile-down">
- 
              <Embeds embeds={uniqueEmbeds} />
- 
            </div>
+ 
            <Embeds embeds={uniqueEmbeds} />

          </div>

        </div>

        <svelte:fragment slot="description">