[READ-ONLY] Mirror of https://github.com/probablykasper/remind-me-again. Toggleable cron reminders app for Mac, Linux and Windows
linux
macos
notifications
reminder
tauri
windows
Fancier transitions
+35
-32
+2
-2
src/App.svelte
+2
-2
src/App.svelte
···
39
39
]
40
40
41
41
const [send, receive] = crossfade({
42
-
duration: (d) => Math.sqrt(d * 200),
43
42
fallback(node) {
44
43
const style = getComputedStyle(node)
45
44
const transform = style.transform === 'none' ? '' : style.transform
46
45
47
46
return {
47
+
duration: 400,
48
48
easing: cubicOut,
49
49
css: (t) => `
50
-
transform: ${transform} scale(${t});
50
+
transform: ${transform} scale(${1 + (t - 1) * 0.2});
51
51
opacity: ${t}
52
52
`,
53
53
}
+31
-28
src/lib/Edit.svelte
+31
-28
src/lib/Edit.svelte
···
1
1
<script lang="ts">
2
2
import { DateInput } from 'date-picker-svelte'
3
-
import { cubicOut } from 'svelte/easing'
4
-
import { slide } from 'svelte/transition'
3
+
import { slide, fly } from 'svelte/transition'
5
4
import type { Group } from './types'
6
5
7
6
export let group: Group
···
11
10
}
12
11
</script>
13
12
14
-
<div class="mt-2" transition:slide={{ easing: cubicOut }}>
15
-
<DateInput
16
-
bind:value={group.nextDate}
17
-
closeOnSelection={true}
18
-
--date-picker-background="#031212"
19
-
--date-picker-foreground="#f7f7f7"
20
-
--date-input-width="100%"
21
-
--date-picker-highlight-border="hsl(183, 98%, 49%)"
22
-
--date-picker-highlight-shadow="hsla(183, 98%, 49%, 50%)"
23
-
--date-picker-selected-color="hsl(183, 100%, 85%)"
24
-
--date-picker-selected-background="hsla(183, 98%, 49%, 20%)"
25
-
/>
26
-
</div>
27
-
<div class="flex w-full">
28
-
<button
29
-
type="button"
30
-
class="mt-2 mr-2 w-full cursor-default rounded-sm bg-[#576f70] px-2 py-1 text-sm"
31
-
transition:slide={{ easing: cubicOut }}
32
-
on:click|stopPropagation={() => onCancel()}>Cancel</button
33
-
>
34
-
<button
35
-
type="submit"
36
-
class="mt-2 w-full cursor-default rounded-sm bg-[#31898c] px-2 py-1 text-sm"
37
-
transition:slide={{ easing: cubicOut }}
38
-
on:click|stopPropagation={() => onSave()}>Save</button
39
-
>
13
+
<!-- <div class="mt-2" transition:slide={{ easing: cubicOut }}> -->
14
+
<div in:slide={{ duration: 200 }} out:slide={{ duration: 300 }}>
15
+
<!-- <div transition:fly={{ y: -10, delay: 100 }}> -->
16
+
<div in:fly={{ duration: 300, y: -20 }} out:fly={{ duration: 200, y: -20 }}>
17
+
<div class="mt-2">
18
+
<DateInput
19
+
bind:value={group.nextDate}
20
+
closeOnSelection={true}
21
+
--date-picker-background="#031212"
22
+
--date-picker-foreground="#f7f7f7"
23
+
--date-input-width="100%"
24
+
--date-picker-highlight-border="hsl(183, 98%, 49%)"
25
+
--date-picker-highlight-shadow="hsla(183, 98%, 49%, 50%)"
26
+
--date-picker-selected-color="hsl(183, 100%, 85%)"
27
+
--date-picker-selected-background="hsla(183, 98%, 49%, 20%)"
28
+
/>
29
+
</div>
30
+
<div class="flex w-full">
31
+
<button
32
+
type="button"
33
+
class="mt-2 mr-2 w-full cursor-default rounded-sm bg-[#576f70] px-2 py-1 text-sm"
34
+
on:click|stopPropagation={() => onCancel()}>Cancel</button
35
+
>
36
+
<button
37
+
type="submit"
38
+
class="mt-2 w-full cursor-default rounded-sm bg-[#31898c] px-2 py-1 text-sm"
39
+
on:click|stopPropagation={() => onSave()}>Save</button
40
+
>
41
+
</div>
42
+
</div>
40
43
</div>
+1
-1
src/lib/Item.svelte
+1
-1
src/lib/Item.svelte
···
73
73
<form
74
74
on:submit|preventDefault={save}
75
75
bind:this={card}
76
-
class="group my-3 flex w-full cursor-default items-center rounded-lg p-3.5 text-left shadow-xl outline-none transition-colors duration-150 ease-out focus:bg-[#133134] active:bg-[#133134]"
76
+
class="group mb-3 flex w-full cursor-default items-center rounded-lg p-3.5 text-left shadow-xl outline-none transition-colors duration-150 ease-out focus:bg-[#133134] active:bg-[#133134]"
77
77
class:bg-[#0E2426]={group.enabled}
78
78
class:bg-[#133134]={editMode}
79
79
on:keydown={keydown}