Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Make registration editable
Alexis Sellier committed 5 years ago
commit a9a0b7baee043d2bad83bbd5e8f1f81055c8a6dc
parent 718642d22bf21d4f3dcecb9a3c5dfd811cc4d3c2
3 files changed +111 -32
modified public/index.css
@@ -116,7 +116,8 @@ button.primary {
	color: var(--color-primary);

	border-color: var(--color-primary);

}
- 
button.primary:hover {
+ 
button.primary:hover, button.primary.active {
+ 
	color: var(--color-background);

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

}

button.primary[disabled] {
added src/Form.svelte
@@ -0,0 +1,71 @@
+ 
<script context="module" lang="typescript">
+ 
  export interface Field {
+ 
    label: string,
+ 
    value: string | null,
+ 
    placeholder?: string,
+ 
    type: string,
+ 
    editable: boolean
+ 
  }
+ 
</script>
+
+ 
<script lang="typescript">
+ 
  export let fields: Field[];
+ 
  export let editable = false ;
+ 
</script>
+
+ 
<style>
+ 
  .fields {
+ 
    display: grid;
+ 
    grid-template-columns: auto auto;
+ 
    grid-gap: 1.5rem;
+ 
  }
+ 
  .fields > div {
+ 
    justify-self: start;
+ 
    align-self: center;
+ 
  }
+
+ 
  input.field {
+ 
    padding: 0;
+ 
    margin: 0;
+ 
    border: none;
+ 
  }
+ 
  input.field {
+ 
    padding: 0.25rem 1rem;
+ 
    border-radius: 1rem;
+ 
    border: 1px dashed transparent;
+ 
    width: 28rem;
+ 
    overflow: hidden;
+ 
    text-overflow: ellipsis;
+ 
  }
+ 
  input.field[disabled] {
+ 
    color: var(--color-foreground);
+ 
    font-style: normal;
+ 
  }
+ 
  input.field::placeholder {
+ 
    color: var(--color-subtle);
+ 
    font-style: italic;
+ 
  }
+ 
  input.field:not([disabled])::placeholder {
+ 
    color: transparent;
+ 
  }
+ 
  input.field:not([disabled]) {
+ 
    border-color: var(--color-secondary) !important;
+ 
  }
+
+ 
  .label {
+ 
    border: 1px solid transparent;
+ 
  }
+ 
</style>
+
+ 
<div class="fields">
+ 
  {#each fields as field}
+ 
    <div class="label">
+ 
      {field.label}
+ 
    </div>
+ 
    <div>
+ 
      <input class="field" placeholder={field.placeholder}
+ 
             disabled={!field.editable || !editable}
+ 
             type={field.type} value={field.value} />
+ 
    </div>
+ 
  {/each}
+ 
</div>
modified src/base/register/Registration.svelte
@@ -6,55 +6,62 @@
  import Loading from '@app/Loading.svelte';

  import Link from '@app/Link.svelte';

  import Modal from '@app/Modal.svelte';
+ 
  import Form from '@app/Form.svelte';
+ 
  import type { Field } from '@app/Form.svelte';



  export let subdomain: string;

  export let config: Config;
+ 
  let editable = false;
+ 
  let fields: Field[] = [];
+
+ 
  const loadRegistration = getRegistration(subdomain, config)
+ 
    .then(registration => {
+ 
      if (registration) {
+ 
        fields = [
+ 
          { label: "Address", type: "text", placeholder: "Not set",
+ 
            value: registration.address, editable: true },
+ 
          { label: "Owner", type: "text", placeholder: "",
+ 
            value: registration.owner, editable: false },
+ 
        ];
+ 
      }
+ 
      return registration;
+ 
    });
+ 


  $: isOwner = (registration: Registration): boolean => {

    return registration.owner === ($session && $session.address);

  };

</script>



<style>
- 
  .fields {
- 
    display: grid;
- 
    grid-template-columns: auto auto auto;
- 
    grid-gap: 1.5rem;
+ 
  main > header {
+ 
    display: flex;
+ 
    align-items: center;
+ 
    justify-content: left;
+ 
    margin-bottom: 2rem;

  }
- 
  .fields > div {
- 
    justify-self: start;
- 
    align-self: center;
+ 
  main > header > * {
+ 
    margin: 0 1rem 0 0;

  }

</style>
- 
{#await getRegistration(subdomain, config)}
+ 
{#await loadRegistration}

  <Loading />

{:then registration}

  {#if registration}

    <main>
- 
      <h1 class="bold">{subdomain}.{config.registrar.domain}</h1>
- 
      <div class="fields">
- 
        <!-- Address -->
- 
        <div class="label">Address</div>
- 
        <div>
- 
          {#if registration.address}
- 
            {registration.address}
- 
          {:else}
- 
            <span class="subtle">Not set</span>
- 
          {/if}
- 
        </div>
- 
        <div>
- 
          <button class="tiny primary" disabled={!isOwner(registration)}>
- 
            Set
- 
          </button>
- 
        </div>
- 
        <!-- Owner -->
- 
        <div class="label">Owner</div>
- 
        <div>{registration.owner}</div>
- 
        <div>
- 
          <button class="tiny secondary" disabled={!isOwner(registration)}>Transfer</button>
- 
        </div>
- 
      </div>
+ 
      <header>
+ 
        <h1 class="bold">{subdomain}.{config.registrar.domain}</h1>
+ 
        <button
+ 
          class="tiny primary" class:active={editable} disabled={!isOwner(registration)}
+ 
          on:click={() => editable = !editable}>
+ 
            Edit
+ 
        </button>
+ 
        <button class="tiny secondary" disabled={!isOwner(registration)}>
+ 
          Transfer
+ 
        </button>
+ 
      </header>
+ 
      <Form {editable} {fields} />

    </main>

  {:else}

    <Modal subtle>