793f432 Make 'Form' render links and addresses correctly — radicle-explorer

Radicle web interface

Make 'Form' render links and addresses correctly

Alexis Sellier committed 5 years ago

commit 793f4327f2b5bd2d79ae10700afecc17a83bb9e7
parent f50ec8e614d7fb1c3180fde48ac3ecb560a4bf31

3 files changed +42 -17

modified public/index.css

@@ -159,8 +159,8 @@ a {

 	border-bottom: 1px solid #444;
 }
 a:hover {
 	color: #e0e0e0;
 	border-bottom-color: #e0e0e0;
 	color: var(--color-foreground);
 	border-bottom-color: var(--color-foreground);
 }
 a.primary {
 	color: var(--color-primary);

@@ -169,6 +169,9 @@ a.primary:hover {

 	color: var(--color-primary-faded);
 	border-bottom-color: var(--color-primary-faded);
 }
 a.address {
 	border-bottom-color: transparent;
 }
 input[type="text"], button {
 	line-height: 1.5em;

modified src/Form.svelte

@@ -10,7 +10,8 @@

 <script lang="typescript">
   import { createEventDispatcher } from 'svelte';
   import { capitalize } from '@app/utils';
   import { link } from 'svelte-routing';
   import { capitalize, isUrl, isAddress } from '@app/utils';
   export let fields: Field[];
   export let editable = false;

@@ -32,23 +33,18 @@

     align-self: center;
   }
   input.field {
     padding: 0;
   .field {
     width: 28rem;
     border: 1px dashed transparent;
     padding: 0.25rem 1rem;
     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;

@@ -60,6 +56,10 @@

     border-color: var(--color-secondary) !important;
   }
   span.field {
     display: inline-block;
   }
   .label {
     border: 1px solid transparent;
   }

@@ -83,9 +83,20 @@

       {field.label || capitalize(field.name)}
     </div>
     <div>
       <input name={field.name} class="field" placeholder={field.placeholder}
              disabled={!field.editable || !editable || disabled} bind:value={field.value}
              type="text" />
       {#if field.value && (!field.editable || !editable || disabled)}
         <span class="field">
           {#if isUrl(field.value)}
             <a href="{field.value}" target="_blank">{field.value}</a>
           {:else if isAddress(field.value)}
             <a use:link href={`/resolve?q=${field.value}`} class="address">{field.value}</a>
           {:else}
             {field.value}
           {/if}
         </span>
       {:else}
         <input name={field.name} class="field" placeholder={field.placeholder}
                bind:value={field.value} type="text" />
       {/if}
     </div>
   {/each}
 </div>

modified src/utils.ts

@@ -36,7 +36,18 @@ export function isRadicleId(input: string): boolean {

   return /^rad:[a-z]+:[a-zA-Z0-9]+$/.test(input);
 }
 // Check whether the input is a URL.
 export function isUrl(input: string): boolean {
   return /^https?:\/\//.test(input);
 }
 // Check whether the input is an Ethereum address.
 export function isAddress(input: string): boolean {
   return ethers.utils.isAddress(input);
 }
 // Get search parameters from location.
 export function getSearchParam(key: string, location: RouteLocation): string | null {
   let params = new URLSearchParams(location.search);
   return params.get(key);
 };
 }