forked from trent_larson/crowd-funder-for-time-pwa
4ba58145d0
- Add @capacitor/status-bar dependency for safe area detection
- Implement SafeAreaPlugin for Android with proper inset calculation
- Create safeAreaInset.js utility for CSS custom property injection
- Update Android manifest and build configuration for plugin
- Integrate safe area handling across Vue components and views
- Update iOS Podfile and Android gradle configurations
- Add commitlint and husky for commit message validation
Technical changes:
- SafeAreaPlugin uses WindowInsets API for Android R+ devices
- Fallback detection for navigation bar and gesture bar heights
- CSS custom properties: --safe-area-inset-{top,bottom,left,right}
- Platform-specific detection (Android WebView only)
- StatusBar plugin integration for top inset calculation
72 lines
2.4 KiB
Vue
72 lines
2.4 KiB
Vue
<template>
|
|
<div
|
|
class="absolute right-5 top-[max(0.75rem,env(safe-area-inset-top),var(--safe-area-inset-top,0px))]"
|
|
>
|
|
<span class="align-center text-red-500 mr-2">{{ message }}</span>
|
|
<span class="ml-2">
|
|
<router-link
|
|
:to="{ name: 'help' }"
|
|
class="text-xs uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md ml-1"
|
|
>
|
|
Help
|
|
</router-link>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue, Prop } from "vue-facing-decorator";
|
|
|
|
import { AppString, NotificationIface } from "../constants/app";
|
|
import { PlatformServiceMixin } from "../utils/PlatformServiceMixin";
|
|
import { createNotifyHelpers, TIMEOUTS } from "../utils/notify";
|
|
|
|
@Component({
|
|
mixins: [PlatformServiceMixin],
|
|
})
|
|
export default class TopMessage extends Vue {
|
|
// Enhanced PlatformServiceMixin v4.0 provides:
|
|
// - Cached database operations: this.$contacts(), this.$settings(), this.$accountSettings()
|
|
// - Settings shortcuts: this.$saveSettings(), this.$saveMySettings()
|
|
// - Cache management: this.$refreshSettings(), this.$clearAllCaches()
|
|
// - Ultra-concise database methods: this.$db(), this.$exec(), this.$query()
|
|
// - All methods use smart caching with TTL for massive performance gains
|
|
|
|
$notify!: (notification: NotificationIface, timeout?: number) => void;
|
|
|
|
notify!: ReturnType<typeof createNotifyHelpers>;
|
|
|
|
@Prop selected = "";
|
|
|
|
message = "";
|
|
|
|
async mounted() {
|
|
this.notify = createNotifyHelpers(this.$notify);
|
|
|
|
try {
|
|
// Ultra-concise cached settings loading - replaces 50+ lines of logic!
|
|
const settings = await this.$accountSettings(undefined, {
|
|
activeDid: undefined,
|
|
apiServer: AppString.PROD_ENDORSER_API_SERVER,
|
|
});
|
|
|
|
if (
|
|
settings.warnIfTestServer &&
|
|
settings.apiServer !== AppString.PROD_ENDORSER_API_SERVER
|
|
) {
|
|
const didPrefix = settings.activeDid?.slice(11, 15);
|
|
this.message = "You're not using prod, user " + didPrefix;
|
|
} else if (
|
|
settings.warnIfProdServer &&
|
|
settings.apiServer === AppString.PROD_ENDORSER_API_SERVER
|
|
) {
|
|
const didPrefix = settings.activeDid?.slice(11, 15);
|
|
this.message = "You are using prod, user " + didPrefix;
|
|
}
|
|
} catch (err: unknown) {
|
|
this.notify.error(JSON.stringify(err), TIMEOUTS.MODAL);
|
|
}
|
|
}
|
|
}
|
|
</script>
|