feat(test-app): add emoji icons to platform and status badges
Add platform-specific emojis (🤖 Android, 🍎 iOS, 🌐 Web) and status indicators (✅ Ready, ⚠️ Not Ready, ❓ Unknown) to improve visual clarity in the home view welcome section.
This commit is contained in:
@@ -21,10 +21,10 @@
|
|||||||
</p>
|
</p>
|
||||||
<div class="platform-info">
|
<div class="platform-info">
|
||||||
<span class="platform-badge" :class="platformClass">
|
<span class="platform-badge" :class="platformClass">
|
||||||
{{ platformName }}
|
{{ platformEmoji }} {{ platformName }}
|
||||||
</span>
|
</span>
|
||||||
<span class="status-badge" :class="statusClass">
|
<span class="status-badge" :class="statusClass">
|
||||||
{{ statusText }}
|
{{ statusEmoji }} {{ statusText }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -138,6 +138,20 @@ const platformName = computed(() => {
|
|||||||
return platform.charAt(0).toUpperCase() + platform.slice(1)
|
return platform.charAt(0).toUpperCase() + platform.slice(1)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const platformEmoji = computed(() => {
|
||||||
|
const platform = Capacitor.getPlatform()
|
||||||
|
switch (platform) {
|
||||||
|
case 'android':
|
||||||
|
return '🤖'
|
||||||
|
case 'ios':
|
||||||
|
return '🍎'
|
||||||
|
case 'web':
|
||||||
|
return '🌐'
|
||||||
|
default:
|
||||||
|
return '📱'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
const platformClass = computed(() => `platform-${Capacitor.getPlatform()}`)
|
const platformClass = computed(() => `platform-${Capacitor.getPlatform()}`)
|
||||||
|
|
||||||
const statusClass = computed(() => {
|
const statusClass = computed(() => {
|
||||||
@@ -154,6 +168,13 @@ const statusText = computed(() => {
|
|||||||
return 'Not Ready'
|
return 'Not Ready'
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const statusEmoji = computed(() => {
|
||||||
|
const status = appStore.notificationStatus
|
||||||
|
if (!status) return '❓'
|
||||||
|
if (status.canScheduleNow) return '✅'
|
||||||
|
return '⚠️'
|
||||||
|
})
|
||||||
|
|
||||||
const systemStatus = computed(() => {
|
const systemStatus = computed(() => {
|
||||||
const status = appStore.notificationStatus
|
const status = appStore.notificationStatus
|
||||||
if (!status) {
|
if (!status) {
|
||||||
|
|||||||
Reference in New Issue
Block a user