jsnbuchanan/crowd-funder-for-time-pwa
1
0
Fork 1
forked from trent_larson/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

Notification UI changes to accommodate mute

Browse Source
This commit is contained in:
Jose Olarte III
2023-09-07 18:03:33 +08:00
parent bd2455458f
commit 6f4027f614
2 changed files with 127 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/views/AccountViewView.vue
View File

@@ -117,20 +117,67 @@
>
Edit Identity
</router-link>
<button
@click="
this.$notify(
{
group: 'modal',
type: 'notification-permission',
},
-1,
)
"
class="block w-full text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-8"
>
Turn on Notifications
</button>
<div class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8">
<label
for="toggleNotifications"
class="flex items-center cursor-pointer"
@click="
this.$notify(
{
group: 'modal',
type: 'notification-permission',
},
-1,
)
"
>
<!-- toggle -->
<div class="relative">
<!-- input -->
<input type="checkbox" name="toggleNotifications" class="sr-only" />
<!-- line -->
<div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
<!-- dot -->
<div
class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
></div>
</div>
<!-- label -->
<div class="ml-2">App Notifications</div>
</label>
<label
for="toggleMuteNotifications"
class="flex items-center cursor-pointer mt-4"
@click="
this.$notify(
{
group: 'modal',
type: 'notification-mute',
},
-1,
)
"
>
<!-- toggle -->
<div class="relative">
<!-- input -->
<input
type="checkbox"
name="toggleMuteNotifications"
class="sr-only"
/>
<!-- line -->
<div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
<!-- dot -->
<div
class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
></div>
</div>
<!-- label -->
<div class="ml-2">Mute Notifications</div>
</label>
</div>
<h3 class="text-sm uppercase font-semibold mb-3">Data</h3>