Replaced svelte-simple-modal with own implementation of modals
This commit is contained in:
@@ -1,10 +1,8 @@
|
||||
<script>
|
||||
import Modal from 'svelte-simple-modal';
|
||||
import Content from "./contents/ContentExpense.svelte";
|
||||
|
||||
import { onMount, afterUpdate } from 'svelte';
|
||||
import axios from 'axios';
|
||||
import { getCookie } from "svelte-cookie";
|
||||
import ContentExpense from "./contents/ContentExpense.svelte";
|
||||
|
||||
let data = [];
|
||||
let parentHeight;
|
||||
@@ -35,9 +33,7 @@
|
||||
</script>
|
||||
|
||||
<div id="expenseInfo" style="max-height: {parentHeight}px;">
|
||||
<div id="modal">
|
||||
<Modal><Content /></Modal>
|
||||
</div>
|
||||
<ContentExpense />
|
||||
|
||||
<div id="expenseList" style="max-height: {listParentHeight}px;">
|
||||
<ul>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<script>
|
||||
import Content from './contents/ContentIncome.svelte';
|
||||
import Modal from 'svelte-simple-modal';
|
||||
|
||||
import { onMount, afterUpdate } from 'svelte';
|
||||
import axios from 'axios';
|
||||
import {getCookie} from "svelte-cookie";
|
||||
import ContentExpense from "./contents/ContentExpense.svelte";
|
||||
import ContentIncome from "./contents/ContentIncome.svelte";
|
||||
|
||||
let data = [];
|
||||
let parentHeight;
|
||||
@@ -35,9 +35,7 @@
|
||||
</script>
|
||||
|
||||
<div id="incomeInfo" style="max-height: {parentHeight}px;">
|
||||
<div id="modal">
|
||||
<Modal><Content /></Modal>
|
||||
</div>
|
||||
<ContentIncome />
|
||||
|
||||
<div id="incomeList" style="max-height: {listParentHeight}px;">
|
||||
<ul>
|
||||
|
||||
@@ -1,33 +1,64 @@
|
||||
<script>
|
||||
import { getContext } from 'svelte';
|
||||
import Popup from '../popups/IncomePopup.svelte';
|
||||
const { open } = getContext('simple-modal');
|
||||
const showSurprise = () => open(Popup, { message: "It's EXOENSE!" });
|
||||
import Modal from '../modals/Modal.svelte'
|
||||
let showModal;
|
||||
</script>
|
||||
|
||||
<div id="exp">
|
||||
<h2>Expenses</h2>
|
||||
<div id="openModal" role="button"
|
||||
tabindex="0"
|
||||
on:click={showSurprise}
|
||||
on:keydown={() => console.log("keydown")}>
|
||||
Log out
|
||||
<div id="openModal" class="plus-button" role="button" tabindex="1" on:click={() => (showModal = true)} on:keydown={() => console.log("keydown")}>
|
||||
+
|
||||
</div>
|
||||
<Modal bind:showModal>
|
||||
<h2 slot="header">
|
||||
modal
|
||||
<small><em>adjective</em> mod·al \ˈmō-dəl\</small>
|
||||
</h2>
|
||||
|
||||
<ol class="definition-list">
|
||||
<li>of or relating to modality in logic</li>
|
||||
<li>
|
||||
containing provisions as to the mode of procedure or the manner of taking effect —used of a
|
||||
contract or legacy
|
||||
</li>
|
||||
<li>of or relating to a musical mode</li>
|
||||
<li>of or relating to structure as opposed to substance</li>
|
||||
<li>
|
||||
of, relating to, or constituting a grammatical form or category characteristically indicating
|
||||
predication
|
||||
</li>
|
||||
<li>of or relating to a statistical mode</li>
|
||||
</ol>
|
||||
|
||||
<a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#exp {
|
||||
position: sticky;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.plus-button {
|
||||
font-size: xx-large;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.plus-button:hover {
|
||||
background: rgba(128, 128, 128, 0.5);
|
||||
}
|
||||
|
||||
#openModal {
|
||||
top: 0;
|
||||
position: sticky;
|
||||
background-color: #f2f2f2;
|
||||
padding: 10px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
z-index: 1;
|
||||
padding: 0 0 10px;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,33 +1,64 @@
|
||||
<script>
|
||||
import { getContext } from 'svelte';
|
||||
import Popup from '../popups/IncomePopup.svelte';
|
||||
const { open } = getContext('simple-modal');
|
||||
const showSurprise = () => open(Popup, { message: "It's aINCOME!" });
|
||||
import Modal from '../modals/Modal.svelte'
|
||||
let showModal;
|
||||
</script>
|
||||
|
||||
<div id="inc">
|
||||
<h2>Incomes</h2>
|
||||
<div id="openModal" role="button"
|
||||
tabindex="0"
|
||||
on:click={showSurprise}
|
||||
on:keydown={() => console.log("keydown")}>
|
||||
Log out
|
||||
<div id="exp">
|
||||
<h2>Expenses</h2>
|
||||
<div id="openModal" class="plus-button" role="button" tabindex="0" on:click={() => (showModal = true)} on:keydown={() => console.log("keydown")}>
|
||||
+
|
||||
</div>
|
||||
<Modal bind:showModal>
|
||||
<h2 slot="header">
|
||||
modal
|
||||
<small><em>adjective</em> mod·al \ˈmō-dəl\</small>
|
||||
</h2>
|
||||
|
||||
<ol class="definition-list">
|
||||
<li>of or relating to modality in logic</li>
|
||||
<li>
|
||||
containing provisions as to the mode of procedure or the manner of taking effect —used of a
|
||||
contract or legacy
|
||||
</li>
|
||||
<li>of or relating to a musical mode</li>
|
||||
<li>of or relating to structure as opposed to substance</li>
|
||||
<li>
|
||||
of, relating to, or constituting a grammatical form or category characteristically indicating
|
||||
predication
|
||||
</li>
|
||||
<li>of or relating to a statistical mode</li>
|
||||
</ol>
|
||||
|
||||
<a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#inc {
|
||||
position: sticky;
|
||||
#exp {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.plus-button {
|
||||
font-size: xx-large;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.plus-button:hover {
|
||||
background: rgba(128, 128, 128, 0.5);
|
||||
}
|
||||
|
||||
#openModal {
|
||||
top: 0;
|
||||
position: sticky;
|
||||
background-color: #f2f2f2;
|
||||
padding: 10px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
z-index: 1;
|
||||
padding: 0 0 10px;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<script>
|
||||
export let showModal; // boolean
|
||||
|
||||
let dialog; // HTMLDialogElement
|
||||
|
||||
$: if (dialog && showModal) dialog.showModal();
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
|
||||
<dialog
|
||||
bind:this={dialog}
|
||||
on:close={() => (showModal = false)}
|
||||
on:click|self={() => dialog.close()}
|
||||
>
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div on:click|stopPropagation>
|
||||
<slot name="header" />
|
||||
<hr />
|
||||
<slot />
|
||||
<hr />
|
||||
<!-- svelte-ignore a11y-autofocus -->
|
||||
<button autofocus on:click={() => dialog.close()}>close modal</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<style>
|
||||
dialog {
|
||||
max-width: 32em;
|
||||
border-radius: 0.2em;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
dialog::backdrop {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
dialog > div {
|
||||
padding: 1em;
|
||||
}
|
||||
dialog[open] {
|
||||
animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
@keyframes zoom {
|
||||
from {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
dialog[open]::backdrop {
|
||||
animation: fade 0.2s ease-out;
|
||||
}
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
button {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let message = 'Hi';
|
||||
</script>
|
||||
|
||||
<p>🎉 {message} 🍾</p>
|
||||
@@ -1,5 +0,0 @@
|
||||
<script>
|
||||
export let message = 'Hi';
|
||||
</script>
|
||||
|
||||
<p>🎉 {message} 🍾</p>
|
||||
Reference in New Issue
Block a user