ui: update button for mobile

zio/stable
Anthony Fu 2022-12-23 19:26:28 +01:00
parent 589cf463bd
commit cd268c9bc7
6 changed files with 28 additions and 13 deletions

View File

@ -22,6 +22,7 @@ defineProps<{
</div> </div>
<div flex items-center flex-shrink-0 gap-x-2> <div flex items-center flex-shrink-0 gap-x-2>
<slot name="actions" /> <slot name="actions" />
<PwaBadge lg:hidden />
<NavUser v-if="isHydrated.value" /> <NavUser v-if="isHydrated.value" />
</div> </div>
</div> </div>

View File

@ -0,0 +1,17 @@
<script setup>
import { pwa } from '~/composables/pwa'
</script>
<template>
<button
v-if="pwa.needRefresh"
bg="fade" relative rounded
flex="~ gap-1 center" px3 py1 text-primary
@click="pwa.updateServiceWorker()"
>
<div i-ri-download-cloud-2-line />
<h2 flex="~ gap-2" items-center>
{{ $t('pwa.update_available_short') }}
</h2>
</button>
</template>

View File

@ -1,28 +1,22 @@
<script setup> <script setup>
import { usePWA } from '~/composables/pwa' import { pwa } from '~/composables/pwa'
const { close, needRefresh, updateServiceWorker } = usePWA()
</script> </script>
<!-- TODO: remove shadow on mobile and position it above the bottom nav -->
<template> <template>
<div <div
v-if="needRefresh" v-if="pwa.needRefresh"
role="alertdialog"
aria-labelledby="pwa-toast-title"
aria-describedby="pwa-toast-description"
m-2 p5 bg="fade" relative m-2 p5 bg="fade" relative
rounded-lg of-hidden rounded-lg of-hidden
flex="~ col gap-3" flex="~ col gap-3"
> >
<h2 id="pwa-toast-title" flex="~ gap-2" items-center> <h2 flex="~ gap-2" items-center>
{{ $t('pwa.title') }} {{ $t('pwa.title') }}
</h2> </h2>
<div flex="~ gap-1"> <div flex="~ gap-1">
<button type="button" btn-solid px-4 py-1 text-center text-sm @click="updateServiceWorker()"> <button type="button" btn-solid px-4 py-1 text-center text-sm @click="pwa.updateServiceWorker()">
{{ $t('pwa.update') }} {{ $t('pwa.update') }}
</button> </button>
<button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="close()"> <button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="pwa.close()">
{{ $t('pwa.dismiss') }} {{ $t('pwa.dismiss') }}
</button> </button>
</div> </div>

View File

@ -44,3 +44,5 @@ export const usePWA = () => {
close, close,
} }
} }
export const pwa = reactive(usePWA())

View File

@ -53,7 +53,7 @@
<slot name="right"> <slot name="right">
<SearchWidget /> <SearchWidget />
<div flex-auto /> <div flex-auto />
<PWAPrompt /> <PwaPrompt />
<NavFooter /> <NavFooter />
</slot> </slot>
</div> </div>

View File

@ -210,7 +210,8 @@
"message": "@:pwa.title{','} click on the @:pwa.reload button to update.", "message": "@:pwa.title{','} click on the @:pwa.reload button to update.",
"reload": "Reload", "reload": "Reload",
"title": "New Elk update available!", "title": "New Elk update available!",
"update": "Update" "update": "Update",
"update_available_short": "Update Elk"
}, },
"search": { "search": {
"search_desc": "Search for people & hashtags" "search_desc": "Search for people & hashtags"