deref / exo

A process manager & log viewer for dev
https://exo.deref.io
Apache License 2.0
415 stars 17 forks source link

Improved global `Modal` system #535

Closed jrysana closed 2 years ago

jrysana commented 3 years ago

This adds a new custom Modal system using a Svelte store, intended to replace in-situ custom modals like the workspace delete modal and all the window.alert-type popup calls.

image

image

Fixes #386

Todo:

jrysana commented 2 years ago

This PR now has everything intended (as far as I'm aware) - but seems to have check issues, I think probably because it's based on an outdated main, and also might have some cleanup or restriction needed in the Modal system adapted from this: https://svelte.dev/repl/033e824fad0a4e34907666e7196caec4?version=3.43.1

(i.e., not sure if we need to have all the custom styling it provides - maybe better to delete a lot of that generality and clean up our Modal.svelte)

jrysana commented 2 years ago

Never mind, the base of this is actually the head of main.

It seems like the 8 errors in checks are all this strange thing where it seems to be reading Modal.svelte as a React JSX file instead of a Svelte file?? Does this seem like what's happening to you too @brandonbloom ?

jrysana commented 2 years ago
====================================
Loading svelte-check in workspace: /home/runner/work/exo/exo/gui
Getting Svelte diagnostics...

/home/runner/work/exo/exo/gui/src/components/modal/Modal.svelte:245:1
Error: Property 'sveltewindow' does not exist on type 'JSX.IntrinsicElements'. (ts)

<svelte:window on:keydown={handleKeydown} />

/home/runner/work/exo/exo/gui/src/components/modal/Modal.svelte:249:5
Error: Type '{ children: Element; style: any; class: string; onmousedown: (event: MouseEvent) => void; onmouseup: (event: MouseEvent) => void; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Did you mean 'className'? (ts)
  <div
    class="bg"
    on:mousedown={handleOuterMousedown}

/home/runner/work/exo/exo/gui/src/components/modal/Modal.svelte:256:10
Error: Type '{ children: Element; style: any; class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Did you mean 'className'? (ts)
  >
    <div class="window-wrap" bind:this={wrap} style={cssWindowWrap}>
      <div

/home/runner/work/exo/exo/gui/src/components/modal/Modal.svelte:263:9
Error: Type '{ children: Element[]; onintrostart: any; onoutrostart: any; onintroend: any; onoutroend: any; style: any; class: string; role: "dialog"; "aria-modal": "true"; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Property 'onintrostart' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. (ts)
        transition:currentTransitionWindow={state.transitionWindowProps}
        on:introstart={onOpen}
        on:outrostart={onClose}

/home/runner/work/exo/exo/gui/src/components/modal/Modal.svelte:271:13
Error: Property 'sveltecomponent' does not exist on type 'JSX.IntrinsicElements'. (ts)
          {#if isFunction(state.closeButton)}
            <svelte:component this={state.closeButton} onClose={close} />
          {:else}

/home/runner/work/exo/exo/gui/src/components/modal/Modal.svelte:273:21
Error: Type '{ onclick: (callback?: Record<string, any>) => void; class: string; style: any; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
  Property 'onclick' does not exist on type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'. Did you mean 'onClick'? (ts)
          {:else}
            <button on:click={close} class="close" style={cssCloseButton} />
          {/if}

/home/runner/work/exo/exo/gui/src/components/modal/Modal.svelte:276:14
Error: Type '{ children: Element; class: string; style: any; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Did you mean 'className'? (ts)
        {/if}
        <div class="content" style={cssContent}>
          <svelte:component this={Component} />

/home/runner/work/exo/exo/gui/src/components/modal/Modal.svelte:277:11
Error: Property 'sveltecomponent' does not exist on type 'JSX.IntrinsicElements'. (ts)
        <div class="content" style={cssContent}>
          <svelte:component this={Component} />
        </div>
jrysana commented 2 years ago

Thanks @BenElgar - merging now :)