elk/components/nav/NavFooter.vue

65 lines
2.3 KiB
Vue
Raw Normal View History

2022-11-15 17:14:10 +00:00
<script setup lang="ts">
2022-11-27 08:54:00 +00:00
const buildTime = import.meta.env.__BUILD_TIME__ as string
2022-12-04 18:18:39 +00:00
const buildCommit = import.meta.env.__BUILD_COMMIT__ as string
2022-12-02 02:18:36 +00:00
const buildTimeDate = new Date(buildTime)
const timeAgoOptions = useTimeAgoOptions()
const buildTimeAgo = useTimeAgo(buildTime, timeAgoOptions)
2022-11-15 17:14:10 +00:00
</script>
<template>
2022-11-27 23:29:21 +00:00
<footer p4 text-sm text-secondary-light flex="~ col">
<div flex="~ gap2" items-center mb4>
2022-12-02 02:18:36 +00:00
<CommonTooltip :content="$t('nav_footer.toggle_theme')">
<button flex i-ri:sun-line dark:i-ri:moon-line text-lg :aria-label="$t('nav_footer.toggle_theme')" @click="toggleDark()" />
2022-11-28 07:16:22 +00:00
</CommonTooltip>
2022-12-02 02:18:36 +00:00
<CommonTooltip :content="$t('nav_footer.zen_mode')">
2022-11-28 07:16:22 +00:00
<button
flex
text-lg
:class="isZenMode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'"
2022-12-02 02:18:36 +00:00
:aria-label="$t('nav_footer.zen_mode')"
2022-11-28 07:16:22 +00:00
@click="toggleZenMode()"
/>
</CommonTooltip>
<NavSelectLanguage>
<CommonTooltip :content="$t('nav_footer.select_language')">
<button flex :aria-label="$t('nav_footer.select_language')">
<div i-ri:earth-line text-lg />
</button>
</CommonTooltip>
</NavSelectLanguage>
<NavSelectFeatureFlags v-if="isMastoInitialised && currentUser">
<CommonTooltip :content="$t('nav_footer.select_feature_flags')">
<button flex :aria-label="$t('nav_footer.select_feature_flags')">
<div i-ri:flag-line text-lg />
</button>
</CommonTooltip>
</NavSelectFeatureFlags>
</div>
<div>
<button cursor-pointer hover:underline @click="openPreviewHelp">
2022-11-30 01:45:52 +00:00
{{ $t('nav_footer.show_intro') }}
</button>
2022-11-24 04:21:30 +00:00
</div>
2022-11-30 01:45:52 +00:00
<div>{{ $t('app_desc_short') }}</div>
<div v-if="isMastoInitialised">
2022-11-30 01:45:52 +00:00
<i18n-t keypath="nav_footer.built_at">
2022-12-02 02:18:36 +00:00
<time :datetime="buildTime" :title="$d(buildTimeDate, 'long')">{{ buildTimeAgo }}</time>
2022-12-04 18:18:39 +00:00
</i18n-t>
2022-12-04 18:59:33 +00:00
&middot;
2022-12-04 18:18:39 +00:00
<NuxtLink
v-if="buildCommit"
external
:href="`https://github.com/elk-zone/elk/commit/${buildCommit}`"
target="_blank"
font-mono
>
{{ buildCommit.slice(0, 7) }}
</NuxtLink>
2022-12-04 18:59:33 +00:00
&middot; <a href="https://github.com/elk-zone/elk" target="_blank">GitHub</a>
2022-11-30 01:45:52 +00:00
</div>
2022-11-27 23:29:21 +00:00
</footer>
2022-11-15 17:14:10 +00:00
</template>