Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Style created/deleted badges consistently
Rūdolfs Ošiņš committed 3 years ago
commit 3e76e55c6c039fe7eb101631c5bf1c8342046f79
parent e5f9317436f24f73f521484c5fcdd832d9d56699
2 files changed +25 -28
modified src/Badge.svelte
@@ -1,5 +1,11 @@
<script lang="ts">
- 
  export let variant: "foreground" | "caution" | "primary" | "tertiary";
+ 
  export let variant:
+ 
    | "caution"
+ 
    | "foreground"
+ 
    | "negative"
+ 
    | "positive"
+ 
    | "primary"
+ 
    | "tertiary";

</script>



<style>
@@ -15,6 +21,14 @@
    color: var(--color-foreground-faded);

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

  }
+ 
  .positive {
+ 
    color: var(--color-positive);
+ 
    background-color: var(--color-positive-1);
+ 
  }
+ 
  .negative {
+ 
    color: var(--color-negative);
+ 
    background-color: var(--color-negative-1);
+ 
  }

  .primary {

    color: var(--color-primary);

    background: var(--color-primary-background);
@@ -33,8 +47,10 @@
  on:mouseenter

  on:mouseleave

  class="badge"
- 
  class:foreground={variant === "foreground"}

  class:caution={variant === "caution"}
+ 
  class:foreground={variant === "foreground"}
+ 
  class:negative={variant === "negative"}
+ 
  class:positive={variant === "positive"}

  class:primary={variant === "primary"}

  class:tertiary={variant === "tertiary"}>

  <slot />
modified src/base/projects/SourceBrowser/FileDiff.svelte
@@ -3,6 +3,7 @@
  import Icon from "@app/Icon.svelte";

  import { lineNumberL, lineNumberR, lineSign } from "@app/diff";

  import type { FileDiff } from "@app/diff";
+ 
  import Badge from "@app/Badge.svelte";



  const dispatch = createEventDispatcher();
@@ -44,10 +45,11 @@
    flex-direction: row;

    justify-content: space-between;

  }
- 
  header div.actions {
+ 
  .actions {

    display: flex;

    flex-direction: row;

    align-items: center;
+ 
    gap: 1rem;

  }

  .binary {

    padding: 1rem;
@@ -112,37 +114,16 @@
  .browse {

    display: flex;

  }
-
- 
  .created {
- 
    color: var(--color-positive);
- 
    font-family: var(--font-family-monospace);
- 
    font-size: 0.75rem;
- 
    background-color: var(--color-positive-1);
- 
  }
- 
  .deleted {
- 
    color: var(--color-negative);
- 
    font-family: var(--font-family-monospace);
- 
    font-size: 0.75rem;
- 
    background-color: var(--color-negative-1);
- 
  }
- 
  .file-header .diff-type {
- 
    margin-left: 1rem;
- 
    padding: 0rem 0.5rem;
- 
    border-radius: var(--border-radius-medium);
- 
  }

</style>



<article id={file.path} class="changeset-file">

  <header class="file-header" on:click={collapse}>

    <div class="actions">

      <p class="file-path">{file.path}</p>
- 
      {#if mode}
- 
        <span
- 
          class="diff-type"
- 
          class:created={mode === "created"}
- 
          class:deleted={mode === "deleted"}>
- 
          {mode}
- 
        </span>
+ 
      {#if mode === "created"}
+ 
        <Badge variant="positive">created</Badge>
+ 
      {:else if mode === "deleted"}
+ 
        <Badge variant="negative">deleted</Badge>

      {/if}

    </div>

    <div class="browse clickable" on:click|stopPropagation={() => dispatch("browse", file.path)}>