Compare commits

...

1 Commits

Author SHA1 Message Date
Jose Olarte III 2eb0354b2c WIP: converted notification permission dialog into toggle 1 year ago
  1. 28
      src/App.vue
  2. 21
      src/views/AccountViewView.vue

28
src/App.vue

@ -157,7 +157,7 @@
> >
<div class="w-full px-6 py-6 text-slate-900 text-center"> <div class="w-full px-6 py-6 text-slate-900 text-center">
<p class="text-lg mb-4"> <p class="text-lg mb-4">
Would you like to turn on notifications for this app? Would you like to <b>turn on</b> notifications for this app?
</p> </p>
<button <button
@ -181,6 +181,32 @@
</div> </div>
</div> </div>
</div> </div>
<div
v-if="notification.type === 'notification-mute'"
class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
>
<div
class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
>
<div class="w-full px-6 py-6 text-slate-900 text-center">
<p class="text-lg mb-4">
Would you like to <b>turn off</b> notifications for this app?
</p>
<button
class="block w-full text-center text-md font-bold uppercase bg-rose-600 text-white px-2 py-2 rounded-md mb-2"
>
Turn off Notifications
</button>
<button
@click="close(notification.id)"
class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
>
Keep it On
</button>
</div>
</div>
</div>
</div> </div>
</Notification> </Notification>
</div> </div>

21
src/views/AccountViewView.vue

@ -123,7 +123,9 @@
> >
Switch Identity / No Identity Switch Identity / No Identity
</router-link> </router-link>
<button <label
for="toggleNotifications"
class="flex items-center cursor-pointer mt-4 mb-8"
@click=" @click="
this.$notify( this.$notify(
{ {
@ -133,10 +135,21 @@
-1, -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 <!-- toggle -->
</button> <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>
<h3 class="text-sm uppercase font-semibold mb-3">Data</h3> <h3 class="text-sm uppercase font-semibold mb-3">Data</h3>

Loading…
Cancel
Save