Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Add clipboard button to clone input
Alexis Sellier committed 4 years ago
commit 000e15c48a857e27067c152eb92eb0538f40de0f
parent 69b45e1cf02f8f8730257c1ff002951eaada3446
3 files changed +55 -16
modified public/index.css
@@ -31,6 +31,7 @@
	--color-light: #add0e4;

	--color-yellow: #ffff99;

	--color-yellow-background: #ffff9911;
+ 
	--color-yellow-background-solid: #222929;

	--color-yellow-background-lighter: #ffff9922;

	--color-positive: #53db53;

	--color-positive-background: #53db5311;
@@ -352,6 +353,11 @@ label.input {
	background: var(--color-yellow-background);

}
+ 
.yellow {
+ 
	color: var(--color-yellow);
+ 
	background: var(--color-yellow-background-solid);
+ 
}
+ 


.off-centered {

	height: 100%;

	padding-top: 5rem;
added src/Input.svelte
@@ -0,0 +1,45 @@
+ 
<script lang="ts">
+ 
  import Clipboard from '@app/Clipboard.svelte';
+
+ 
  export let name: string;
+ 
  export let value: string;
+ 
  export let small = false;
+ 
  export let clipboard = false;
+ 
</script>
+
+ 
<style>
+ 
  main {
+ 
    display: flex;
+ 
  }
+ 
  .clipboard {
+ 
    visibility: hidden;
+ 
    margin-left: -4rem;
+ 
    width: 4rem;
+ 
    text-align: right;
+ 
    -webkit-mask: linear-gradient(90deg, transparent 0%, #fff 50%);
+ 
    mask: linear-gradient(90deg, transparent 0%, #fff 50%);
+ 
    border-radius: 0 0.25rem 0.25rem 0;
+ 
  }
+ 
  input {
+ 
    font-size: 0.75rem;
+ 
    font-family: var(--font-family-monospace);
+ 
    padding: 0.5rem;
+ 
    border: none;
+ 
    outline: none;
+ 
    width: 24rem;
+ 
    text-overflow: ellipsis !important;
+ 
    border-radius: 0.25rem;
+ 
  }
+ 
  main:hover .clipboard {
+ 
    visibility: visible;
+ 
  }
+ 
</style>
+
+ 
<main>
+ 
  <input class={$$props.class} readonly={clipboard} {name} {value} />
+ 
  {#if clipboard}
+ 
    <span class="clipboard {$$props.class}">
+ 
      <Clipboard text={value} {small} />
+ 
    </span>
+ 
  {/if}
+ 
</main>
modified src/base/projects/Header.svelte
@@ -5,6 +5,7 @@
  import { Browser, ProjectContent, Project } from '@app/project';

  import AnchorBadge from '@app/base/profiles/AnchorBadge.svelte';

  import type { Tree } from "@app/project";
+ 
  import Input from "@app/Input.svelte";

  import BranchSelector from './BranchSelector.svelte';

  import PeerSelector from './PeerSelector.svelte';
@@ -102,20 +103,6 @@
  .clone-dropdown.clone-dropdown-visible {

    display: block;

  }
- 
  .clone-dropdown input {
- 
    color: var(--color-yellow);
- 
    background: var(--color-yellow-background);
- 
  }
- 
  .dropdown input {
- 
    font-size: 0.75rem;
- 
    font-family: var(--font-family-monospace);
- 
    padding: 0.5rem;
- 
    border: none;
- 
    outline: none;
- 
    width: 24rem;
- 
    text-overflow: ellipsis !important;
- 
    border-radius: 0.25rem;
- 
  }

  .dropdown label {

    display: block;

    color: var(--color-foreground-faded);
@@ -172,10 +159,11 @@
        class="dropdown clone-dropdown"

        class:clone-dropdown-visible={dropdownState.clone}

      >
- 
        <input
- 
          readonly
+ 
        <Input

          name="clone-url"

          value="https://{seed.git.host}/{utils.parseRadicleId(urn)}.git"
+ 
          class="yellow"
+ 
          clipboard

        />

        <label for="clone-url"

          >Use Git to clone this repository from the URL above.</label