stufflog3/frontend/src/lib/components/common/Modal.svelte

<script lang="ts">
  import { getModalContext } from "../contexts/ModalContext.svelte";
  import Icon from "../layout/Icon.svelte";

  export let show: boolean = false;
  export let verb: string = "Submit";
  export let noun: string = "Form";
  export let wide: boolean = false;
  export let error: string | null = null;
  export let closable: boolean = false;
  export let disabled: boolean = false;

  const {closeModal} = getModalContext();
</script>

{#if show}
  <div class="modal-background">
    <div class="modal" class:wide>
      <div class="header">
        <div class="title" class:noclose={!closable}>{verb} {noun}</div>  
        {#if (closable)}
          <div class="x">
            <div class="button" on:click={closeModal}>
              <Icon name="times" />
            </div>
          </div>
        {/if}
      </div>
      {#if (error != null)}
        <div class="error">{error}</div>
      {/if}
      <div class="body">
        <slot></slot>
      </div>
      <div class="button-row">
        <button disabled={disabled} type="submit">{verb} {noun}</button>
        <button disabled={!closable} on:click|preventDefault={closeModal} >Cancel</button>
      </div>
    </div>
  </div>
{/if}

<style lang="scss">
  @import "../../css/colors";

  div.modal-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
  }
  
  div.modal {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(100vw - 4em);
    max-width: 40ch;
    max-height: calc(100vh - 4em);
    overflow: auto;
    transform: translate(-50%,-50%);
    border-radius: 0.5em;
  
    background: $color-entry1;
  }
  div.modal.wide {
    max-width: 80ch;
  }

  div.header {
    padding: 1em;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  
  div.error {
    margin: 0.5em;
    padding: 0.5em;
  
    border: 1px solid rgb(204, 65, 65);
    border-radius: 0.2em;
    background-color: rgb(133, 39, 39);
    color: rgb(211, 141, 141);
  
    animation: fadein 0.5s;
  }
  
  div.body {
    padding: 1em 0;
    margin-top: 0;
    padding-top: 0;

    display: flex;
    flex-direction: row;

    @media screen and (max-width: 749px) {
      display: block;
    }
  }
  
  div.title {
    color: $color-entry10;
    line-height: 1em;
  }

  div.x {
    position: relative;
    line-height: 1em;
    top: -1em;
    text-align: right;
  }
  div.x div.button {
    color: $color-entry7;
    display: inline-block;
    padding: 0em 0.5ch 0.1em 0.5ch;
    line-height: 1em;
    user-select: none;
    cursor: pointer;
  }
  div.x div.button:hover {
    color: $color-entry10;
  }  

  div.button-row {
    display: flex;
    flex-direction: row;
    border-top: 0.5px solid $color-entry2;

    button {
      display: inline-block;
      padding: 0.25em 1ch;
      font-size: 1.25em;
    
      background: none;
      border: none;
      color: $color-entry7;
      border-left : 0.5px solid $color-entry2;
    
      cursor: pointer;
    }
    button:first-of-type {
      margin-left: auto;
    }
    button:hover {
      background-color: $color-entryhalf;
    }
    button:disabled {
      color: $color-entry4;
    }
  }
  
  div.modal :global(label) {
    padding: 1em 0 0.125em 0.25ch;
    font-size: 0.9em;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
  }
  
  div.modal :global(input), div.modal :global(select), div.modal :global(textarea) {
    width: calc(100% - 2ch);
    margin-bottom: 1em;
    margin-top: 0.25em;
  
    background: $color-entryhalf;
    color: $color-entry8;
    border: none;
    outline: none;
    resize: vertical;
    padding: 0.5em 1ch;
  }
  div.modal :global(select) {
    padding-left: 0.5ch;
    padding: 0.45em 1ch;
    width: 100%;
  }
  div.modal :global(select option), div.modal :global(select optgroup) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0.5em 0;
  }

  div.modal :global(input)::placeholder {
    opacity: 0.5;
  }
  div.modal :global(select:disabled) {
    background: $color-entryhalf;
    color: $color-entry4;
  }
  div.modal :global(input:disabled) {
    background: $color-entryhalf;
    color: $color-entry4;
  }
  div.modal :global(textarea) {
    min-height: 3.5em;
    height: 3.5em;
    font-family: inherit;
  }
  div.modal :global(textarea:disabled) {
    background: #444;
    color: #aaa;
  }
  
  div.modal :global(input.nolast) {
    margin-bottom: 0.5em;
  }
  
  div.modal :global(input[type="checkbox"]) {
    width: initial;
    display: inline-block;
  }
  div.modal :global(input[type="checkbox"] + label) {
    width: initial;
    display: inline-block;
    padding: 0;
    margin: 0;
  }
  
  div.modal :global(input:focus), div.modal :global(select:focus), div.modal :global(textarea:focus) {
    background: $color-entry0;
    color: $color-entry10;
    border: none;
    outline: none;
  }
  
  div.modal :global(p) {
    margin: 0.25em 1ch 1em 1ch;
    font-size: 0.9em;
  }

  div.modal :global(input::-webkit-outer-spin-button),
  div.modal :global(input::-webkit-inner-spin-button) {
    -webkit-appearance: none;
    margin: 0;
  }

  div.modal :global(input[type=number]) {
    -moz-appearance: textfield;
  }
  
  @keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
</style>