Radish alpha
r
radicle-desktop
Radicle desktop app
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Style comment reply box according to design
Rūdolfs Ošiņš committed 1 year ago
commit 3a685584d2461ddc712f34290cc1ec72258e9173
parent 6052098c18ff08d6fb42f8cbbdfcf059e354564f
2 files changed +84 -63
modified src/components/Border.svelte
@@ -10,6 +10,7 @@
  export let styleCursor: "default" | "pointer" | "text" = "default";

  export let styleGap: string = "0.5rem";

  export let styleOverflow: string | undefined = undefined;
+ 
  export let flatTop: boolean = false;



  $: style =

    `--local-button-color-1: var(--color-fill-${variant});` +
@@ -17,15 +18,41 @@
</script>



<style>
- 
  .pixel {
- 
    background-color: transparent;
+ 
  .container {
+ 
    white-space: nowrap;
+
+ 
    -webkit-touch-callout: none;
+ 
    -webkit-user-select: none;
+ 
    user-select: none;
+
+ 
    column-gap: 0;
+ 
    row-gap: 0;
+ 
    display: grid;
+ 
    grid-template-columns: 2px 2px auto 2px 2px;
+ 
    grid-template-rows: 2px 2px auto 2px 2px;
+ 
    grid-template-areas:
+ 
      "p1-1 p1-2 p1-3 p1-4 p1-5"
+ 
      "p2-1 p2-2 p2-3 p2-4 p2-5"
+ 
      "p3-1 p3-2 p3-3 p3-4 p3-5"
+ 
      "p4-1 p4-2 p4-3 p4-4 p4-5"
+ 
      "p5-1 p5-2 p5-3 p5-4 p5-5";
+ 
  }
+
+ 
  .container:hover .p2-3,
+ 
  .container:hover .p3-2,
+ 
  .container:hover .p3-3,
+ 
  .container:hover .p3-4,
+ 
  .container:hover .p4-3 {
+ 
    background-color: var(--local-hover-background-color);

  }



  .p1-1 {

    grid-area: p1-1;
+ 
    background-color: transparent;

  }

  .p1-2 {

    grid-area: p1-2;
+ 
    background-color: transparent;

  }

  .p1-3 {

    grid-area: p1-3;
@@ -33,13 +60,16 @@
  }

  .p1-4 {

    grid-area: p1-4;
+ 
    background-color: transparent;

  }

  .p1-5 {

    grid-area: p1-5;
+ 
    background-color: transparent;

  }



  .p2-1 {

    grid-area: p2-1;
+ 
    background-color: transparent;

  }

  .p2-2 {

    grid-area: p2-2;
@@ -47,6 +77,7 @@
  }

  .p2-3 {

    grid-area: p2-3;
+ 
    background-color: var(--color-background-default);

  }

  .p2-4 {

    grid-area: p2-4;
@@ -54,6 +85,7 @@
  }

  .p2-5 {

    grid-area: p2-5;
+ 
    background-color: transparent;

  }



  .p3-1 {
@@ -62,14 +94,17 @@
  }

  .p3-2 {

    grid-area: p3-2;
+ 
    background-color: var(--color-background-default);

  }

  .p3-3 {

    grid-area: p3-3;

    display: flex;

    align-items: center;
+ 
    background-color: var(--color-background-default);

  }

  .p3-4 {

    grid-area: p3-4;
+ 
    background-color: var(--color-background-default);

  }

  .p3-5 {

    grid-area: p3-5;
@@ -78,6 +113,7 @@


  .p4-1 {

    grid-area: p4-1;
+ 
    background-color: transparent;

  }

  .p4-2 {

    grid-area: p4-2;
@@ -85,6 +121,7 @@
  }

  .p4-3 {

    grid-area: p4-3;
+ 
    background-color: var(--color-background-default);

  }

  .p4-4 {

    grid-area: p4-4;
@@ -92,13 +129,16 @@
  }

  .p4-5 {

    grid-area: p4-5;
+ 
    background-color: transparent;

  }



  .p5-1 {

    grid-area: p5-1;
+ 
    background-color: transparent;

  }

  .p5-2 {

    grid-area: p5-2;
+ 
    background-color: transparent;

  }

  .p5-3 {

    grid-area: p5-3;
@@ -106,44 +146,24 @@
  }

  .p5-4 {

    grid-area: p5-4;
+ 
    background-color: transparent;

  }

  .p5-5 {

    grid-area: p5-5;
+ 
    background-color: transparent;

  }
- 
  .container {
- 
    white-space: nowrap;
-
- 
    -webkit-touch-callout: none;
- 
    -webkit-user-select: none;
- 
    user-select: none;
-
- 
    column-gap: 0;
- 
    row-gap: 0;
- 
    display: grid;
- 
    grid-template-columns: 2px 2px auto 2px 2px;
- 
    grid-template-rows: 2px 2px auto 2px 2px;
- 
    grid-template-areas:
- 
      "p1-1 p1-2 p1-3 p1-4 p1-5"
- 
      "p2-1 p2-2 p2-3 p2-4 p2-5"
- 
      "p3-1 p3-2 p3-3 p3-4 p3-5"
- 
      "p4-1 p4-2 p4-3 p4-4 p4-5"
- 
      "p5-1 p5-2 p5-3 p5-4 p5-5";
- 
  }
- 
  .container .p2-3,
- 
  .container .p3-2,
- 
  .container .p3-3,
- 
  .container .p3-4,
- 
  .container .p4-3 {
- 
    background-color: var(--color-background-default);
+ 
  .flat-top > .p1-3,
+ 
  .flat-top > .p2-2,
+ 
  .flat-top > .p2-4 {
+ 
    background-color: transparent;

  }
- 
  .container:hover .p2-3,
- 
  .container:hover .p3-2,
- 
  .container:hover .p3-3,
- 
  .container:hover .p3-4,
- 
  .container:hover .p4-3 {
- 
    background-color: var(--local-hover-background-color);
+ 
  .flat-top > .p1-1,
+ 
  .flat-top > .p1-5,
+ 
  .flat-top > .p2-1,
+ 
  .flat-top > .p2-5 {
+ 
    background-color: var(--local-button-color-1);

  }

</style>
@@ -152,45 +172,46 @@
  style:width={styleWidth}

  style:cursor={styleCursor}

  class="container"
+ 
  class:flat-top={flatTop}

  {onclick}

  role="button"

  tabindex={onclick !== undefined ? 0 : -1}

  {style}

  style:min-height={styleMinHeight}

  style:height={styleHeight}>
- 
  <div class="pixel p1-1"></div>
- 
  <div class="pixel p1-2"></div>
- 
  <div class="pixel p1-3"></div>
- 
  <div class="pixel p1-4"></div>
- 
  <div class="pixel p1-5"></div>
-
- 
  <div class="pixel p2-1"></div>
- 
  <div class="pixel p2-2"></div>
- 
  <div class="pixel p2-3"></div>
- 
  <div class="pixel p2-4"></div>
- 
  <div class="pixel p2-5"></div>
-
- 
  <div class="pixel p3-1"></div>
- 
  <div class="pixel p3-2"></div>
+ 
  <div class="p1-1"></div>
+ 
  <div class="p1-2"></div>
+ 
  <div class="p1-3"></div>
+ 
  <div class="p1-4"></div>
+ 
  <div class="p1-5"></div>
+
+ 
  <div class="p2-1"></div>
+ 
  <div class="p2-2"></div>
+ 
  <div class="p2-3"></div>
+ 
  <div class="p2-4"></div>
+ 
  <div class="p2-5"></div>
+
+ 
  <div class="p3-1"></div>
+ 
  <div class="p3-2"></div>

  <div
- 
    class="pixel p3-3"
+ 
    class="p3-3"

    style:padding={stylePadding}

    style:gap={styleGap}

    style:overflow={styleOverflow}>

    <slot />

  </div>
- 
  <div class="pixel p3-4"></div>
- 
  <div class="pixel p3-5"></div>
-
- 
  <div class="pixel p4-1"></div>
- 
  <div class="pixel p4-2"></div>
- 
  <div class="pixel p4-3"></div>
- 
  <div class="pixel p4-4"></div>
- 
  <div class="pixel p4-5"></div>
-
- 
  <div class="pixel p5-1"></div>
- 
  <div class="pixel p5-2"></div>
- 
  <div class="pixel p5-3"></div>
- 
  <div class="pixel p5-4"></div>
- 
  <div class="pixel p5-5"></div>
+ 
  <div class="p3-4"></div>
+ 
  <div class="p3-5"></div>
+
+ 
  <div class="p4-1"></div>
+ 
  <div class="p4-2"></div>
+ 
  <div class="p4-3"></div>
+ 
  <div class="p4-4"></div>
+ 
  <div class="p4-5"></div>
+
+ 
  <div class="p5-1"></div>
+ 
  <div class="p5-2"></div>
+ 
  <div class="p5-3"></div>
+ 
  <div class="p5-4"></div>
+ 
  <div class="p5-5"></div>

</div>
modified src/components/Thread.svelte
@@ -102,7 +102,7 @@
    </CommentComponent>

  </div>

  {#if replies.length > 0 || (createReply && showReplyForm)}
- 
    <Border variant="float">
+ 
    <Border variant="float" flatTop>

      <div style:width="100%">

        {#if replies.length > 0}

          {#each replies as reply}