Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Start on org governance models
Alexis Sellier committed 5 years ago
commit 7bc87cc0cec115c10c1bbd96ad1c6ca7ff987bbc
parent 18e16cefeee7d1c55aeeb44d7f6d41329e992cd8
4 files changed +103 -27
modified public/index.css
@@ -254,6 +254,14 @@ h1 {
	margin-bottom: 2rem;

}
+ 
h2 {
+ 
	margin: 1.5rem 0;
+ 
}
+
+ 
h3 {
+ 
	margin: 1rem 0;
+ 
}
+ 


p {

	margin: 0.5rem 0;

}
modified src/Modal.svelte
@@ -42,7 +42,7 @@
  }

  .modal-title {

    font-size: 1.75rem;
- 
    line-height: 1.75rem;
+ 
    line-height: 2.625rem;

    margin-bottom: 2rem;

    color: var(--color-secondary);

    text-align: center;
@@ -72,9 +72,11 @@
    <div class="modal-subtitle">

      <slot name="subtitle"></slot>

    </div>
- 
    <div class="modal-body">
- 
      <slot name="body"></slot>
- 
    </div>
+ 
    {#if $$slots.body}
+ 
      <div class="modal-body">
+ 
        <slot name="body"></slot>
+ 
      </div>
+ 
    {/if}

    <div class="modal-actions">

      <slot name="actions"></slot>

    </div>
added src/Options.svelte
@@ -0,0 +1,49 @@
+ 
<script lang="typescript">
+ 
  import { createEventDispatcher } from 'svelte';
+
+ 
  export let options: { label: string, value: string }[];
+ 
  export let name: string;
+ 
  export let selected: string = "";
+ 
  export let disabled = false;
+
+ 
  const dispatch = createEventDispatcher();
+ 
</script>
+
+ 
<style>
+ 
  main {
+ 
    display: flex;
+ 
    justify-content: center;
+ 
  }
+ 
  .options {
+ 
    text-align: left;
+ 
  }
+ 
  .options label {
+ 
    display: block;
+ 
    margin-bottom: 1rem;
+ 
    line-height: 1.5rem;
+ 
    width: 100%;
+ 
  }
+ 
  .options label:last-child {
+ 
    margin-bottom: 0.5rem;
+ 
  }
+ 
  .options label, .options input {
+ 
    cursor: pointer;
+ 
  }
+ 
  .options input {
+ 
    margin-right: 0.75rem;
+ 
    display: inline-block;
+ 
  }
+ 
</style>
+
+ 
<main>
+ 
  <div class="options">
+ 
    {#each options as option}
+ 
      <label for="{option.value}">
+ 
        <input type="radio" {disabled} checked={selected === option.value} {name}
+ 
               id="{option.value}" value="{option.value}"
+ 
               on:click={() => dispatch('changed', option.value)}>
+ 
        {option.label}
+ 
      </label>
+ 
    {/each}
+ 
  </div>
+ 
</main>
modified src/base/orgs/CreateOrg.svelte
@@ -5,6 +5,8 @@
  import type { Err } from '@app/error';

  import { Org } from '@app/base/orgs/Org';

  import type { Config } from '@app/config';
+ 
  import Loading from '@app/Loading.svelte';
+ 
  import Options from '@app/Options.svelte';



  export let config: Config;

  export let owner: string;
@@ -16,9 +18,15 @@
    Success,

  }
+ 
  const orgTypes = [
+ 
    { label: "Single signer", value: "bdfl" },
+ 
    { label: "Quorum", value: "dao" },
+ 
  ];
+ 


  let state = State.Idle;

  let error: Err | null = null;

  let org: Org | null = null;
+ 
  let governance: string = "bdfl";



  const dispatch = createEventDispatcher();

  const createOrg = async () => {
@@ -38,6 +46,10 @@
      error = e;

    }

  };
+
+ 
  const onGovernanceChanged = (event: { detail: string }) => {
+ 
    governance = event.detail;
+ 
  };

</script>



{#if error}
@@ -45,16 +57,21 @@
{:else}

  <Modal floating on:close>

    <span slot="title">
- 
      {#if !org}
- 
        Create an Org
- 
      {:else}
- 
        🎉
- 
      {/if}
+ 
      {#if org}🎉{:else}✨{/if}

    </span>



    <span slot="subtitle">

      {#if org}

        <strong>Your org was successfully created.</strong>
+ 
      {:else}
+ 
        <h3>Create an Org</h3>
+ 
        {#if state === State.Idle}
+ 
          <div class="highlight">Select a governance model</div>
+ 
        {:else if state === State.Signing}
+ 
          <div class="highlight">Confirm transaction in your wallet</div>
+ 
        {:else if state === State.Pending}
+ 
          <div class="highlight">Waiting for transaction to be processed</div>
+ 
        {/if}

      {/if}

    </span>
@@ -64,31 +81,31 @@
          <tr><td class="label">Address</td><td>{org.address}</td></tr>

          <tr><td class="label">Owner</td><td>{org.safe}</td></tr>

        </table>
- 
      {:else}
- 
        <table>
- 
          <tr><td class="label">Member</td><td>{owner}</td></tr>
- 
        </table>
+ 
      {:else if state === State.Idle}
+ 
        <Options name="governance" disabled={state !== State.Idle}
+ 
                 selected="{governance}" options={orgTypes}
+ 
                 on:changed={onGovernanceChanged} />

      {/if}

    </span>



    <span slot="actions">

      {#if !org}
- 
        <button
- 
          on:click={createOrg}
- 
          class="primary"
- 
          data-waiting={[State.Signing, State.Pending].includes(state) || null}
- 
          disabled={state !== State.Idle}
- 
        >
- 
          {#if state === State.Pending}
- 
            Creating...
- 
          {:else}
+ 
        {#if state === State.Idle}
+ 
          <button
+ 
            on:click={createOrg}
+ 
            class="primary"
+ 
            data-waiting={[State.Signing, State.Pending].includes(state) || null}
+ 
            disabled={state !== State.Idle}
+ 
          >

            Create
- 
          {/if}
- 
        </button>
+ 
          </button>
- 
        <button on:click={() => dispatch('close')} class="text">
- 
          Cancel
- 
        </button>
+ 
          <button on:click={() => dispatch('close')} class="text">
+ 
            Cancel
+ 
          </button>
+ 
        {:else}
+ 
          <Loading center small />
+ 
        {/if}

      {:else}

        <button on:click={() => dispatch('close')}>

          Done