-
Notifications
You must be signed in to change notification settings - Fork 159
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #637 from appwrite/chore-prerelease-modal
feat: pre release modal
- Loading branch information
Showing
9 changed files
with
361 additions
and
130 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| <script lang="ts"> | ||
| import { ModalWrapper } from '$lib/components'; | ||
| import { trackEvent } from '$lib/actions/analytics'; | ||
| export let show = false; | ||
| export let title = ''; | ||
| export let description = ''; | ||
| export let style = ''; | ||
| </script> | ||
|
|
||
| <ModalWrapper bind:show let:close {style}> | ||
| <div class="grid-1-1 u-width-full-line mk-grid"> | ||
| <div class="mk-grid-item-1 u-width-full-line"> | ||
| <slot name="side" /> | ||
| </div> | ||
| <div class="u-padding-32 mk-grid-item-2"> | ||
| <header class="modal-header"> | ||
| <div class="u-flex u-main-space-between u-gap-16"> | ||
| <h4 class="modal-title heading-level-5"> | ||
| <slot name="title"> | ||
| {title} | ||
| </slot> | ||
| </h4> | ||
| <button | ||
| type="button" | ||
| class="button is-text is-only-icon" | ||
| style="--button-size:1.5rem;" | ||
| aria-label="Close Modal" | ||
| title="Close Modal" | ||
| on:click={() => | ||
| trackEvent('click_close_modal', { | ||
| from: 'button' | ||
| })} | ||
| on:click={close}> | ||
| <span class="icon-x" aria-hidden="true" /> | ||
| </button> | ||
| </div> | ||
| <p class="u-margin-block-start-4"> | ||
| <slot name="description"> | ||
| {description} | ||
| </slot> | ||
| </p> | ||
| </header> | ||
| <div class="modal-content"> | ||
| <slot /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </ModalWrapper> | ||
|
|
||
| <style lang="scss"> | ||
| .mk-grid { | ||
| overflow: hidden; | ||
| } | ||
| @media screen and (max-width: 768px) { | ||
| .mk-grid { | ||
| &-item-1 { | ||
| order: 2; | ||
| max-height: 16rem; | ||
| } | ||
| &-item-2 { | ||
| order: 1; | ||
| } | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| <script lang="ts"> | ||
| import { createEventDispatcher, onDestroy, onMount } from 'svelte'; | ||
| import { trackEvent } from '$lib/actions/analytics'; | ||
| import { disableCommands } from '$lib/commandCenter'; | ||
| export let show = false; | ||
| export let size: 'small' | 'big' = null; | ||
| export let closable = true; | ||
| export let headerDivider = true; | ||
| export let style = ''; | ||
| let dialog: HTMLDialogElement; | ||
| const dispatch = createEventDispatcher(); | ||
| onMount(() => { | ||
| if (show) openModal(); | ||
| }); | ||
| onDestroy(() => { | ||
| if (show) closeModal(); | ||
| }); | ||
| function handleBLur(event: MouseEvent) { | ||
| if (event.target === dialog) { | ||
| trackEvent('click_close_modal', { | ||
| from: 'backdrop' | ||
| }); | ||
| closeModal(); | ||
| } | ||
| } | ||
| function openModal() { | ||
| if (dialog && !dialog.open) { | ||
| dialog.showModal(); | ||
| document.documentElement.classList.add('u-overflow-hidden'); | ||
| } | ||
| } | ||
| function closeModal() { | ||
| if (closable) { | ||
| if (dialog && dialog.open) { | ||
| dispatch('close'); | ||
| dialog.close(); | ||
| show = false; | ||
| document.documentElement.classList.remove('u-overflow-hidden'); | ||
| } | ||
| } | ||
| } | ||
| function handleKeydown(event: KeyboardEvent) { | ||
| if (event.key === 'Escape') { | ||
| event.preventDefault(); | ||
| trackEvent('click_close_modal', { | ||
| from: 'escape' | ||
| }); | ||
| closeModal(); | ||
| } | ||
| } | ||
| $: if (show) { | ||
| openModal(); | ||
| } else { | ||
| closeModal(); | ||
| } | ||
| $: $disableCommands(show); | ||
| </script> | ||
|
|
||
| <svelte:window on:mousedown={handleBLur} on:keydown={handleKeydown} /> | ||
|
|
||
| <dialog | ||
| class="modal" | ||
| class:is-small={size === 'small'} | ||
| class:is-big={size === 'big'} | ||
| class:is-separate-header={headerDivider} | ||
| {style} | ||
| bind:this={dialog} | ||
| on:cancel|preventDefault> | ||
| {#if show} | ||
| <slot close={closeModal} /> | ||
| {/if} | ||
| </dialog> |
Oops, something went wrong.