Radish alpha
r
radicle-desktop
Radicle desktop app
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Fix FileDiff corner styling
Rūdolfs Ošiņš committed 1 year ago
commit d07ee2c2e1a85c1a96c1ee4a5bf30d75bdbd17a9
parent 6b54c4ab66ae39b2e97dfcac159ac0d71ea76b43
4 files changed +45 -11
modified public/index.css
@@ -133,6 +133,21 @@ body {
    0 100%

  );
+ 
  --2px-bottom-corner-fill: polygon(
+ 
    0 0,
+ 
    100% 0,
+ 
    100% calc(100% - 4px),
+ 
    calc(100% - 2px) calc(100% - 4px),
+ 
    calc(100% - 2px) calc(100% - 2px),
+ 
    calc(100% - 4px) calc(100% - 2px),
+ 
    calc(100% - 4px) 100%,
+ 
    4px 100%,
+ 
    4px calc(100% - 2px),
+ 
    2px calc(100% - 2px),
+ 
    2px calc(100% - 4px),
+ 
    0 calc(100% - 4px)
+ 
  );
+ 


  --3px-corner-fill: polygon(

    0 6px,

    2px 6px,
modified src/components/Changeset.svelte
@@ -20,10 +20,12 @@


<div class="diff-list">

  {#each diff.files as file}
- 
    <FileDiff
- 
      filePath={"path" in file ? file.path : file.newPath}
- 
      oldFilePath={"oldPath" in file ? file.oldPath : undefined}
- 
      fileDiff={file.diff}
- 
      headerBadgeCaption={file.status} />
+ 
    <div style:margin-bottom="1rem">
+ 
      <FileDiff
+ 
        filePath={"path" in file ? file.path : file.newPath}
+ 
        oldFilePath={"oldPath" in file ? file.oldPath : undefined}
+ 
        fileDiff={file.diff}
+ 
        headerBadgeCaption={file.status} />
+ 
    </div>

  {/each}

</div>
modified src/components/Changeset/FileDiff.svelte
@@ -65,7 +65,6 @@
<style>

  .container {

    font-size: var(--font-size-small);
- 
    background: var(--color-background-float);

    overflow-x: auto;

  }

  .actions {
modified src/components/File.svelte
@@ -16,9 +16,19 @@
    height: 3rem;

    align-items: center;

    padding: 0 0.5rem 0 1rem;
- 
    border: 1px solid var(--color-border-hint);
- 
    background-color: var(--color-background-default);

    z-index: 2;
+ 
    font-size: var(--font-size-small);
+ 
  }
+ 
  .header::after {
+ 
    position: absolute;
+ 
    z-index: -1;
+ 
    content: " ";
+ 
    background-color: var(--color-fill-float-hover);
+ 
    clip-path: var(--2px-top-corner-fill);
+ 
    width: 100%;
+ 
    height: 100%;
+ 
    top: 0;
+ 
    left: 0;

  }



  .sticky {
@@ -36,9 +46,17 @@
  .container {

    position: relative;

    overflow-x: auto;
- 
    border: 1px solid var(--color-border-hint);
- 
    border-top: 0;
- 
    background: var(--color-background-float);
+ 
  }
+ 
  .container::after {
+ 
    position: absolute;
+ 
    z-index: -1;
+ 
    content: " ";
+ 
    background-color: var(--color-background-float);
+ 
    clip-path: var(--2px-bottom-corner-fill);
+ 
    width: 100%;
+ 
    height: 100%;
+ 
    top: 0;
+ 
    left: 0;

  }

</style>