Skip to content

Commit b6d196c

Browse files
zackhazackha
authored
Merge pull request #12 from zackha/development
Development
2 parents a754b4c + 97a9e53 commit b6d196c

File tree

5 files changed

+83
-52
lines changed

5 files changed

+83
-52
lines changed

‎app/components/Dropdown.vue

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<script setup lang="ts">
2+
const { clear, user } = useUserSession();
3+
const colorMode = useColorMode();
4+
5+
const isDarkMode = computed({
6+
get: () => colorMode.preference === 'dark',
7+
set: () => (colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'),
8+
});
9+
</script>
10+
11+
<template>
12+
<UPopover :popper="{ placement: 'bottom-end' }" :ui="{ background: '', shadow: '', ring: '' }">
13+
<button class="button bg-white/20 p-1.5 hover:bg-white/25">
14+
<UIcon name="i-heroicons-cog-8-tooth" class="h-5 w-5" />
15+
</button>
16+
<template #panel>
17+
<div class="dropdown">
18+
<!--<div class="m-2 flex cursor-pointer items-center gap-3 rounded-lg p-2 transition hover:bg-white/10">
19+
<UAvatar :src="user?.avatar_url" size="md" />
20+
<div class="flex flex-col">
21+
<div class="font-medium">{{ user?.name }}</div>
22+
<div>@{{ user?.login }}</div>
23+
</div>
24+
</div>
25+
<div class="border-b border-white/10"></div>-->
26+
<div @click="isDarkMode = !isDarkMode" class="m-1 flex cursor-pointer items-center gap-3 rounded-lg p-2 transition hover:bg-black/30">
27+
<UIcon :name="colorMode.preference === 'dark' || colorMode.preference === 'system' ? 'i-heroicons-moon' : 'i-heroicons-sun'" class="h-5 w-5" />
28+
<span>Dark mode</span>
29+
</div>
30+
<div class="border-b border-white/5"></div>
31+
<div @click="clear()" class="m-1 flex cursor-pointer items-center gap-3 rounded-lg p-2 transition hover:bg-black/30">
32+
<UIcon name="i-heroicons-arrow-right-on-rectangle-20-solid" class="h-5 w-5" />
33+
<span>Sign out</span>
34+
</div>
35+
</div>
36+
</template>
37+
</UPopover>
38+
</template>
39+
40+
<style lang="postcss">
41+
.dropdown {
42+
@apply mt-1 flex select-none flex-col rounded-xl border border-white/5 text-sm text-white/80;
43+
background: hsla(0, 0%, 100%, 0.05);
44+
box-shadow:
45+
0 24px 32px -12px hsla(0, 0%, 7%, 0.1),
46+
inset 2px 4px 16px 0 hsla(0, 0%, 97%, 0.06);
47+
-webkit-backdrop-filter: blur(50px);
48+
backdrop-filter: blur(50px);
49+
}
50+
</style>

‎app/components/EmptyHabits.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const createHabitModal = ref(false);
99
<div v-for="col in 27" :key="col" class="h-2.5 w-2.5 rounded-sm bg-neutral-600/5"></div>
1010
</div>
1111
</div>
12-
<div class="z-10 flex flex-col items-center justify-center gap-2 p-6">
12+
<div class="flex flex-col items-center justify-center gap-2 p-6">
1313
<button @click="createHabitModal = true" class="button mb-2 bg-green-400 p-2.5 text-green-950 hover:bg-green-300">
1414
<UIcon name="i-heroicons-plus-16-solid" class="h-6 w-6" />
1515
</button>

‎app/components/HabitCard.vue

+15-7
Original file line numberDiff line numberDiff line change
@@ -86,11 +86,6 @@ const { mutate: toggleTodayCompletion } = useMutation({
8686
}
8787
},
8888
});
89-
90-
const items = (habit: Habit) => [
91-
[{ label: 'Edit', icon: 'i-heroicons-pencil-square-20-solid', click: () => editHabit(habit) }],
92-
[{ label: 'Delete', labelClass: 'text-red-500', iconClass: 'bg-red-500', icon: 'i-heroicons-trash-20-solid', click: () => openDeleteConfirmation(habit) }],
93-
];
9489
</script>
9590

9691
<template>
@@ -142,11 +137,24 @@ const items = (habit: Habit) => [
142137
{{ isTodayCompleted(habit) ? 'Undo' : 'Complete' }}
143138
</button>
144139

145-
<UDropdown :items="items(habit)" :popper="{ placement: 'bottom-end', arrow: true }" :ui="{ width: 'w-auto' }">
140+
<UPopover :popper="{ placement: 'bottom-end' }" :ui="{ background: '', shadow: '', ring: '' }">
146141
<button class="button bg-white/10 p-1.5 hover:bg-white/25">
147142
<UIcon name="i-heroicons-ellipsis-horizontal-20-solid" class="h-5 w-5" />
148143
</button>
149-
</UDropdown>
144+
<template #panel>
145+
<div class="dropdown">
146+
<div @click="editHabit(habit)" class="m-1 flex cursor-pointer items-center gap-3 rounded-lg p-2 transition hover:bg-black/30">
147+
<UIcon name="i-heroicons-pencil-square-20-solid" class="h-5 w-5" />
148+
<span>Edit</span>
149+
</div>
150+
<div class="border-b border-white/5"></div>
151+
<div @click="openDeleteConfirmation(habit)" class="m-1 flex cursor-pointer items-center gap-3 rounded-lg p-2 text-red-500 transition hover:bg-red-900/30">
152+
<UIcon name="i-heroicons-trash-20-solid" class="h-5 w-5" />
153+
<span>Delete</span>
154+
</div>
155+
</div>
156+
</template>
157+
</UPopover>
150158
</div>
151159
</div>
152160
<ContentBox class="flex flex-col gap-2 bg-neutral-200/5 p-4 backdrop-blur-2xl">

‎app/components/HabitHeatmap.vue

+16-1
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,11 @@ defineProps<{ habit: Habit; habitDays: number }>();
66
<div class="flex gap-0.5 overflow-hidden rounded-xl">
77
<div v-for="(week, weekIndex) in generateWeeks(habitDays)" :key="weekIndex" class="flex flex-col gap-0.5">
88
<div v-for="(day, dayIndex) in week" :key="dayIndex">
9-
<UTooltip :text="formatDate(day.date)" :popper="{ placement: 'top' }" :ui="{ wrapper: 'flex', rounded: 'rounded-full' }">
9+
<UTooltip :popper="{ placement: 'top' }" :ui="{ wrapper: '', background: '', ring: '', shadow: '', base: '' }">
1010
<div :class="['day', { active: habit.completeDays.includes(day.date) }]"></div>
11+
<template #text>
12+
<div :class="['chip', { active: habit.completeDays.includes(day.date) }]">{{ formatDate(day.date) }}</div>
13+
</template>
1114
</UTooltip>
1215
</div>
1316
</div>
@@ -21,4 +24,16 @@ defineProps<{ habit: Habit; habitDays: number }>();
2124
@apply bg-gradient-to-tr from-green-400 via-green-500 to-green-800 shadow-sm shadow-green-800;
2225
}
2326
}
27+
28+
.chip {
29+
font-size: 0.75rem;
30+
box-shadow:
31+
inset 0.5px 0.5px 1px 0px rgba(255, 255, 255, 0.1),
32+
inset -0.5px -0.5px 1px 0px rgba(0, 0, 0, 0.1),
33+
rgba(0, 0, 0, 0.2) 0px 3px 10px -5px;
34+
@apply flex select-none items-center justify-center rounded-full bg-black/80 px-2.5 py-0.5;
35+
&.active {
36+
@apply bg-green-950/80 text-green-400;
37+
}
38+
}
2439
</style>

‎app/components/ProfileActions.vue

+1-43
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,4 @@
11
<script setup lang="ts">
2-
const { clear, user } = useUserSession();
3-
const colorMode = useColorMode();
4-
5-
const isDarkMode = computed({
6-
get: () => colorMode.preference === 'dark',
7-
set: () => (colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'),
8-
});
9-
10-
const items = [
11-
[{ label: 'Profile', slot: 'account' }],
12-
[{ label: 'Theme', slot: 'theme', click: () => (isDarkMode.value = !isDarkMode.value) }],
13-
[{ label: 'Sign out', click: () => clear() }],
14-
];
15-
162
const createHabitModal = ref(false);
173
</script>
184

@@ -22,35 +8,7 @@ const createHabitModal = ref(false);
228
<UIcon name="i-heroicons-plus-16-solid" class="h-5 w-5" />
239
Create
2410
</button>
25-
26-
<UDropdown :items="items" :popper="{ placement: 'bottom-end' }">
27-
<button class="button bg-white/20 p-1.5 hover:bg-white/25">
28-
<UIcon name="i-heroicons-cog-8-tooth" class="h-5 w-5" />
29-
</button>
30-
<template #account>
31-
<div class="flex items-center gap-2.5">
32-
<UAvatar :src="user?.avatar_url" size="md" />
33-
<div class="text-left">
34-
<p>{{ user?.name }}</p>
35-
<p class="truncate font-medium text-gray-900 dark:text-white">@{{ user?.login }}</p>
36-
</div>
37-
</div>
38-
</template>
39-
40-
<template #theme>
41-
<div class="flex flex-1 items-center justify-between">
42-
<span class="truncate">Dark mode</span>
43-
<UIcon
44-
:name="colorMode.preference === 'dark' || colorMode.preference === 'system' ? 'i-heroicons-moon' : 'i-heroicons-sun'"
45-
class="ms-auto h-5 w-5 flex-shrink-0 text-gray-400" />
46-
</div>
47-
</template>
48-
49-
<template #item>
50-
<span class="truncate">Sign out</span>
51-
<UIcon name="i-heroicons-arrow-right-on-rectangle-20-solid" class="ms-auto h-5 w-5 flex-shrink-0 text-gray-400" />
52-
</template>
53-
</UDropdown>
11+
<Dropdown />
5412
</div>
5513
<UModal v-model="createHabitModal" :ui="{ width: 'w-80', background: '', shadow: '', overlay: { base: 'backdrop-blur-2xl', background: 'dark:bg-black/60' } }">
5614
<HabitForm @habitAdded="createHabitModal = false" />

0 commit comments

Comments
 (0)