Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Some visual improvements to projects view
Alexis Sellier committed 4 years ago
commit 896372cd09d9ed63494b5218db10d611dce9d0c9
parent d0d4e993da97738d371afaa139da4eccad3d64be
5 files changed +17 -11
modified src/Diagram.svelte
@@ -4,7 +4,6 @@


  export let strokeWidth: number;

  export let points: CommitGroup[];
- 
  export let strokeColor = "#ff55ff";

  export let viewBoxWidth: number;

  export let viewBoxHeight: number;
@@ -12,7 +11,7 @@
  let path = "";

  let areaPath = "";
- 
  let heightWithPadding = viewBoxHeight + 10;
+ 
  let heightWithPadding = viewBoxHeight + 16;



  // The latest point on the x axis, starting at 0 until `viewBoxWidth`

  let lastWidthPoint = viewBoxWidth;
@@ -65,14 +64,21 @@
    // Creates the stroke path with the array of points

    path = createPath();

    // Concats a path closing for it to be the area under the stroke
- 
    areaPath = path.concat(`L${lastWidthPoint},${heightWithPadding}L${viewBoxWidth},${viewBoxHeight+10}Z`);
+ 
    areaPath = path.concat(`L${lastWidthPoint},${viewBoxHeight}L${viewBoxWidth},${viewBoxHeight}Z`);

  });

</script>



<svg viewBox="0 0 {viewBoxWidth} {heightWithPadding}" xmlns="http://www.w3.org/2000/svg">
- 
  <use fill="url(#gradient)" />
+ 
  <svg style="height: 0; width: 0;" xmlns="http://www.w3.org/2000/svg">
+ 
    <defs>
+ 
      <linearGradient id="fillGradient" x1="0" y1="1" x2="0" y2="0">
+ 
        <stop offset="0%" stop-color="#ff55ff" stop-opacity="0" />
+ 
        <stop offset="100%" stop-color="#ff55ff" stop-opacity="0.2" />
+ 
      </linearGradient>
+ 
    </defs>
+ 
  </svg>

  <g>
- 
    <path fill="transparent" stroke={strokeColor} stroke-width={strokeWidth} d={path} />
- 
    <path fill="url('#gradient')" stroke="transparent" d={areaPath} />
+ 
    <path fill="transparent" stroke="url(#gradient)" stroke-width={strokeWidth} stroke-linejoin="round" d={path} />
+ 
    <path fill="url(#fillGradient)" stroke="transparent" d={areaPath} />

  </g>

</svg>
modified src/LinearGradient.svelte
@@ -6,8 +6,9 @@
<svg style="height: 0; width: 0;" xmlns="http://www.w3.org/2000/svg">

  <defs>

    <linearGradient {id} x1="0" y1="1" x2="0" y2="0">
- 
      <stop offset="0%" stop-color={fillColor} stop-opacity="0" />
- 
      <stop offset="100%" stop-color={fillColor} stop-opacity="0.4" />
+ 
      <stop offset="0%" stop-color={fillColor} stop-opacity="0.2" />
+ 
      <stop offset="50%" stop-color={fillColor} stop-opacity="0.8" />
+ 
      <stop offset="100%" stop-color={fillColor} stop-opacity="1" />

    </linearGradient>

  </defs>

</svg>
modified src/base/orgs/View/Projects.svelte
@@ -50,7 +50,7 @@
    margin-top: 1rem;

  }

  .projects .project {
- 
    margin-bottom: 1rem;
+ 
    margin-bottom: 0.5rem;

  }

  .actions {

    display: flex;
modified src/base/projects/History.svelte
@@ -1,7 +1,6 @@
<script lang="ts">

  import CommitTeaser from "./Commit/CommitTeaser.svelte";

  import { Project } from "@app/project";
- 
  import { ProjectContent } from "@app/project";

  import Loading from "@app/Loading.svelte";

  import { groupCommitHistory, GroupedCommitsHistory } from "@app/commit";

  import Message from "@app/Message.svelte";
modified src/base/projects/Widget.svelte
@@ -166,7 +166,7 @@
    {#await loadCommits() then points}

      <div class="desktop activity">

        <Diagram {points}
- 
          strokeWidth={1.25}
+ 
          strokeWidth={3}

          viewBoxHeight={100}

          viewBoxWidth={600}

        />