Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Better organize org creation component
Alexis Sellier committed 5 years ago
commit 8d5094583ecad970551b9297ddc651e0baa17ab1
parent 7bc87cc0cec115c10c1bbd96ad1c6ca7ff987bbc
1 file changed +47 -39
modified src/base/orgs/CreateOrg.svelte
@@ -54,61 +54,69 @@


{#if error}

  <Error {error} floating on:close />
- 
{:else}
+ 
{:else if org} <!-- Org created -->

  <Modal floating on:close>

    <span slot="title">
- 
      {#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}
+ 
      <strong>Your org was successfully created.</strong>
+ 
    </span>
+
+ 
    <span slot="body">
+ 
      <table>
+ 
        <tr><td class="label">Address</td><td>{org.address}</td></tr>
+ 
        <tr><td class="label">Owner</td><td>{org.safe}</td></tr>
+ 
      </table>
+ 
    </span>
+
+ 
    <span slot="actions">
+ 
      <button on:click={() => dispatch('close')}>
+ 
        Done
+ 
      </button>
+ 
    </span>
+ 
  </Modal>
+ 
{:else} <!-- Org creation flow -->
+ 
  <Modal floating on:close>
+ 
    <span slot="title">
+ 
      ✨
+ 
    </span>
+
+ 
    <span slot="subtitle">
+ 
      <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}

    </span>



    <span slot="body">
- 
      {#if org}
- 
        <table>
- 
          <tr><td class="label">Address</td><td>{org.address}</td></tr>
- 
          <tr><td class="label">Owner</td><td>{org.safe}</td></tr>
- 
        </table>
- 
      {:else if state === State.Idle}
+ 
      {#if state === State.Idle}

        <Options name="governance" disabled={state !== State.Idle}

                 selected="{governance}" options={orgTypes}

                 on:changed={onGovernanceChanged} />
+ 
      {:else}
+ 
        <Loading center small />

      {/if}

    </span>



    <span slot="actions">
- 
      {#if !org}
- 
        {#if state === State.Idle}
- 
          <button
- 
            on:click={createOrg}
- 
            class="primary"
- 
            data-waiting={[State.Signing, State.Pending].includes(state) || null}
- 
            disabled={state !== State.Idle}
- 
          >
- 
            Create
- 
          </button>
-
- 
          <button on:click={() => dispatch('close')} class="text">
- 
            Cancel
- 
          </button>
- 
        {:else}
- 
          <Loading center small />
- 
        {/if}
- 
      {:else}
- 
        <button on:click={() => dispatch('close')}>
- 
          Done
+ 
      {#if state === State.Idle}
+ 
        <button
+ 
          on:click={createOrg}
+ 
          class="primary"
+ 
          data-waiting={[State.Signing, State.Pending].includes(state) || null}
+ 
          disabled={state !== State.Idle}
+ 
        >
+ 
          Create
+ 
        </button>
+
+ 
        <button on:click={() => dispatch('close')} class="text">
+ 
          Cancel

        </button>

      {/if}

    </span>