[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
Title/description/date inputs
+169
-36
+13
package-lock.json
+13
package-lock.json
···
12
12
"@typescript-eslint/eslint-plugin": "^5.30.5",
13
13
"@typescript-eslint/parser": "^5.30.5",
14
14
"autoprefixer": "^10.4.7",
15
+
"date-picker-svelte": "^2.0.0",
15
16
"eslint": "^8.19.0",
16
17
"eslint-config-prettier": "^8.5.0",
17
18
"eslint-plugin-svelte3": "^4.0.0",
···
948
949
"engines": {
949
950
"node": ">=4"
950
951
}
952
+
},
953
+
"node_modules/date-picker-svelte": {
954
+
"version": "2.0.0",
955
+
"resolved": "https://registry.npmjs.org/date-picker-svelte/-/date-picker-svelte-2.0.0.tgz",
956
+
"integrity": "sha512-hV1DZj2e31wQ7IpKKAqnp/IwP3ZSKYYQ1IL2jgVeowJEJd3onPics8AA3GUOsaFH49UUPhOvpa6psZujawWG7A==",
957
+
"dev": true
951
958
},
952
959
"node_modules/debug": {
953
960
"version": "4.3.4",
···
3802
3809
"version": "3.0.0",
3803
3810
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
3804
3811
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
3812
+
"dev": true
3813
+
},
3814
+
"date-picker-svelte": {
3815
+
"version": "2.0.0",
3816
+
"resolved": "https://registry.npmjs.org/date-picker-svelte/-/date-picker-svelte-2.0.0.tgz",
3817
+
"integrity": "sha512-hV1DZj2e31wQ7IpKKAqnp/IwP3ZSKYYQ1IL2jgVeowJEJd3onPics8AA3GUOsaFH49UUPhOvpa6psZujawWG7A==",
3805
3818
"dev": true
3806
3819
},
3807
3820
"debug": {
+1
package.json
+1
package.json
+2
-2
src-tauri/src/main.rs
+2
-2
src-tauri/src/main.rs
···
24
24
.setup(|app| {
25
25
let _win = WindowBuilder::new(app, "main", WindowUrl::default())
26
26
.title("RemindMeAgain")
27
-
.inner_size(800.0, 550.0)
28
-
.min_inner_size(400.0, 200.0)
27
+
.inner_size(400.0, 550.0)
28
+
.min_inner_size(300.0, 200.0)
29
29
.transparent(true)
30
30
.build()
31
31
.expect("Unable to create window");
+15
-34
src/App.svelte
+15
-34
src/App.svelte
···
1
1
<script lang="ts">
2
2
import './app.css'
3
-
4
-
type Group = {
5
-
title: string
6
-
description: string
7
-
enabled: boolean
8
-
}
3
+
import Item from './lib/Item.svelte'
4
+
import type { Group } from './lib/types'
9
5
10
6
let groups: Group[] = [
11
-
{ title: 'Rabbit foot water', description: 'Yo', enabled: true },
12
-
{ title: 'Rabbit foot water', description: 'Yo', enabled: false },
7
+
{ title: 'Rabbit foot water', description: 'Yo', enabled: true, id: 0 },
8
+
{ title: 'Rabbit foot water', description: 'Yo', enabled: true, id: 1 },
9
+
{ title: 'Rabbit foot water', description: 'Yo', enabled: true, id: 2 },
13
10
]
14
11
</script>
15
12
16
-
<div class="mx-6 my-2">
17
-
<h1 class="mb-2 cursor-default select-none text-2xl font-normal text-white">Reminders</h1>
18
-
{#each groups as group}
19
-
<div
20
-
class="my-6 flex items-center rounded-lg border border-white border-opacity-[1%] bg-[#131214] px-4 py-4"
21
-
>
22
-
<div>
23
-
<p class="text-sm">{group.title}</p>
24
-
<p class="text-xs text-white text-opacity-75">{group.description}</p>
25
-
</div>
26
-
<div
27
-
class="ml-auto rounded-md bg-[#16261E] bg-opacity-70 p-2.5 text-[#3ee570] transition-colors ease-out hover:bg-opacity-100"
28
-
>
29
-
<svg
30
-
xmlns="http://www.w3.org/2000/svg"
31
-
width="16"
32
-
height="16"
33
-
viewBox="0 0 24 24"
34
-
fill="currentColor"
35
-
><path
36
-
d="M14.078 7.061l2.861 2.862-10.799 10.798-3.584.723.724-3.585 10.798-10.798zm0-2.829l-12.64 12.64-1.438 7.128 7.127-1.438 12.642-12.64-5.691-5.69zm7.105 4.277l2.817-2.82-5.691-5.689-2.816 2.817 5.69 5.692z"
37
-
/></svg
38
-
>
39
-
</div>
40
-
</div>
41
-
{/each}
13
+
<div class="flex h-screen w-full flex-col overflow-y-scroll px-4 py-2">
14
+
<h1 class="mb-2 cursor-default select-none text-center text-2xl font-normal text-white">
15
+
Reminders
16
+
</h1>
17
+
<div class="h-full outline-none">
18
+
{#each groups as group (group.id)}
19
+
<Item bind:group />
20
+
{/each}
21
+
</div>
42
22
</div>
43
23
44
24
<style lang="sass">
···
47
27
font-size: 18px
48
28
background-color: #000000
49
29
color: #ffffff
30
+
overflow: hidden
50
31
</style>
+8
src/global.d.ts
+8
src/global.d.ts
···
1
+
declare type DndEvent = import('svelte-dnd-action').DndEvent
2
+
declare namespace svelte.JSX {
3
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
4
+
interface HTMLAttributes<T> {
5
+
onconsider?: (event: CustomEvent<DndEvent> & { target: EventTarget & T }) => void
6
+
onfinalize?: (event: CustomEvent<DndEvent> & { target: EventTarget & T }) => void
7
+
}
8
+
}
+124
src/lib/Item.svelte
+124
src/lib/Item.svelte
···
1
+
<script lang="ts">
2
+
import { onMount } from 'svelte'
3
+
import type { Group } from './types'
4
+
import { DateInput } from 'date-picker-svelte'
5
+
import { slide } from 'svelte/transition'
6
+
import { cubicOut } from 'svelte/easing'
7
+
8
+
export let group: Group
9
+
let editMode = true
10
+
11
+
let textarea: HTMLTextAreaElement
12
+
onMount(resize)
13
+
function resize() {
14
+
textarea.style.height = ''
15
+
textarea.style.height = textarea.scrollHeight + 'px'
16
+
}
17
+
function onInput() {
18
+
resize()
19
+
}
20
+
</script>
21
+
22
+
<button
23
+
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:ring-2 focus:ring-[#31898c]"
24
+
class:bg-[#0E2426]={group.enabled}
25
+
on:click={() => {
26
+
if (!editMode) {
27
+
group.enabled = !group.enabled
28
+
}
29
+
}}
30
+
on:mousedown={(e) => {
31
+
if (editMode) {
32
+
e.stopPropagation()
33
+
}
34
+
}}
35
+
>
36
+
<div class="mr-3.5 rounded-md p-2">
37
+
{#if group.enabled}
38
+
<svg
39
+
xmlns="http://www.w3.org/2000/svg"
40
+
width="18"
41
+
height="18"
42
+
viewBox="0 0 24 24"
43
+
fill="#3edce5"
44
+
><path
45
+
d="M15 21c0 1.598-1.392 3-2.971 3s-3.029-1.402-3.029-3h6zm.137-17.055c-.644-.374-1.042-1.07-1.041-1.82v-.003c.001-1.172-.938-2.122-2.096-2.122s-2.097.95-2.097 2.122v.003c.001.751-.396 1.446-1.041 1.82-4.668 2.709-1.985 11.715-6.862 13.306v1.749h20v-1.749c-4.877-1.591-2.193-10.598-6.863-13.306zm-3.137-2.945c.552 0 1 .449 1 1 0 .552-.448 1-1 1s-1-.448-1-1c0-.551.448-1 1-1zm-6.451 16c1.189-1.667 1.605-3.891 1.964-5.815.447-2.39.869-4.648 2.354-5.509 1.38-.801 2.956-.76 4.267 0 1.485.861 1.907 3.119 2.354 5.509.359 1.924.775 4.148 1.964 5.815h-12.903z"
46
+
/></svg
47
+
>
48
+
{:else}
49
+
<svg
50
+
xmlns="http://www.w3.org/2000/svg"
51
+
width="18"
52
+
height="18"
53
+
viewBox="0 0 24 24"
54
+
fill="currentColor"
55
+
><path
56
+
d="M22 17.251v1.749h-13.008l2.205-2h7.254c-1.015-1.422-1.465-3.248-1.798-4.949l1.735-1.574c.561 2.98 1.016 5.928 3.612 6.774zm-9.971 6.749c1.578 0 2.971-1.402 2.971-3h-6c0 1.598 1.449 3 3.029 3zm10.971-19.75l-20.654 18.734-1.346-1.479 2.762-2.505h-1.762v-1.749c4.877-1.591 2.194-10.597 6.863-13.306.645-.374 1.041-1.069 1.04-1.82v-.003c0-1.172.939-2.122 2.097-2.122s2.097.95 2.097 2.122v.003c-.001.75.396 1.447 1.04 1.82 1.076.624 1.759 1.585 2.236 2.711l4.285-3.886 1.342 1.48zm-12-2.25c0 .552.448 1 1 1s1-.448 1-1c0-.551-.448-1-1-1s-1 .449-1 1zm-5.032 15l9.812-8.898c-.353-1.083-.842-1.961-1.646-2.427-1.312-.76-2.888-.801-4.267 0-1.485.862-1.907 3.119-2.353 5.51-.36 1.924-.776 4.148-1.965 5.815h.419z"
57
+
/></svg
58
+
>
59
+
{/if}
60
+
</div>
61
+
<div
62
+
class="mr-auto flex w-full flex-col"
63
+
class:pointer-events-none={!editMode}
64
+
on:click={(e) => {
65
+
if (editMode) {
66
+
e.preventDefault()
67
+
}
68
+
}}
69
+
>
70
+
<input
71
+
class="w-full rounded-sm border-none bg-white bg-opacity-0 px-2 py-1 text-sm focus:ring-2 focus:ring-[#31898c]"
72
+
class:bg-opacity-10={editMode}
73
+
tabindex={editMode ? 0 : -1}
74
+
type="text"
75
+
bind:value={group.title}
76
+
/>
77
+
<div class="transition-all duration-200 ease-out" class:mt-2={editMode} />
78
+
<textarea
79
+
bind:this={textarea}
80
+
rows="1"
81
+
class="w-full resize-none rounded-sm border-none bg-white bg-opacity-0 px-2 py-1 text-xs text-white text-opacity-75 focus:ring-2 focus:ring-[#31898c]"
82
+
class:bg-opacity-10={editMode}
83
+
tabindex={editMode ? 0 : -1}
84
+
type="text"
85
+
bind:value={group.description}
86
+
on:input={onInput}
87
+
/>
88
+
{#if editMode}
89
+
<div class="mt-2" transition:slide={{ easing: cubicOut }}>
90
+
<DateInput
91
+
--date-picker-background="#1b1e27"
92
+
--date-picker-foreground="#f7f7f7"
93
+
--date-input-width="100%"
94
+
/>
95
+
</div>
96
+
{/if}
97
+
</div>
98
+
<button
99
+
class="ml-3.5 scale-90 rounded-md bg-[#01484c] bg-opacity-50 p-2 text-[#3edce5] opacity-0 outline-none transition-all duration-150 ease-out hover:bg-opacity-70 focus:scale-100 focus:opacity-100 focus:ring-2 focus:ring-[#31898c] group-hover:scale-100 group-hover:opacity-100 group-focus:scale-100 group-focus:opacity-100"
100
+
on:click={(e) => {
101
+
editMode = !editMode
102
+
e.stopPropagation()
103
+
e.preventDefault()
104
+
}}
105
+
>
106
+
<svg
107
+
xmlns="http://www.w3.org/2000/svg"
108
+
width="14"
109
+
height="14"
110
+
viewBox="0 0 24 24"
111
+
fill="currentColor"
112
+
><path
113
+
d="M14.078 7.061l2.861 2.862-10.799 10.798-3.584.723.724-3.585 10.798-10.798zm0-2.829l-12.64 12.64-1.438 7.128 7.127-1.438 12.642-12.64-5.691-5.69zm7.105 4.277l2.817-2.82-5.691-5.689-2.816 2.817 5.69 5.692z"
114
+
/></svg
115
+
>
116
+
</button>
117
+
</button>
118
+
119
+
<style lang="sass">
120
+
:global(.date-time-field input)
121
+
background-color: hsla(0, 0, 100, 0.1)
122
+
border: none
123
+
font-size: 12px
124
+
</style>