Feat: mobile/home - footer bar

sakura-tel · Dec 18, 2022 · db1af2a · db1af2a
1 parent 76b77a8
commit db1af2a
Show file tree

Hide file tree

Showing 3 changed files with 137 additions and 4 deletions.
diff --git a/src/client/app/mobile/views/components/ui.footer.vue b/src/client/app/mobile/views/components/ui.footer.vue
@@ -0,0 +1,123 @@
+<template>
+<div class="footer" :class="{ shadow: $store.state.device.useShadow }">
+	<div class="main" ref="main">
+		<div class="backdrop"></div>
+		<div class="content">
+			<div class="tab">
+				<router-link :class="{ active: $route.name == 'index' }" to="/">
+					<fa :icon="$store.getters.isSignedIn ? 'home' : 'arrow-left'"/>
+				</router-link>
+				<router-link v-if="$store.getters.isSignedIn" :class="{ active: $route.name == 'notifications' }" to="/i/notifications">
+					<fa :icon="['far', 'bell']"/>
+					<i v-if="$parent.hasUnreadNotification" class="circle"><fa icon="circle"/></i>
+				</router-link>
+				<router-link v-if="$store.getters.isSignedIn" :class="{ active: $route.name == 'messaging' }" to="/i/messaging">
+					<fa :icon="['far', 'comments']"/>
+					<i v-if="$parent.hasUnreadMessagingMessage" class="circle"><fa icon="circle"/></i>
+				</router-link>
+				<router-link v-if="$store.getters.isSignedIn" :class="{ active: $route.name == 'widgets' }" to="/i/widgets">
+					<fa :icon="['far', 'calendar-alt']"/>
+				</router-link>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import { env } from '../../../config';
+export default Vue.extend({
+	i18n: i18n(),
+	props: ['func'],
+	data() {
+		return {
+			env: env
+		};
+	},
+	computed: {
+		hasUnreadNotification(): boolean {
+			return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadNotification;
+		},
+		hasUnreadMessagingMessage(): boolean {
+			return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadMessagingMessage;
+		}
+	}
+	mounted() {
+	},
+});
+</script>
+
+<style lang="stylus" scoped>
+
+.footer
+	$height = 58px
+	position fixed
+	bottom 0
+	left -8px
+	z-index 1024
+	width calc(100% + 16px)
+	padding 0 8px
+
+	&.shadow
+		box-shadow 0 0 8px rgba(0, 0, 0, 0.25)
+
+	&, *
+		user-select none
+
+	> .indicator
+		height 3px
+		background var(--primary)
+
+	> .warn
+		display block
+		margin 0
+		padding 4px
+		text-align center
+		font-size 12px
+		background #f00
+		color #fff
+
+	> .main
+		color var(--mobileHeaderFg)
+
+		> .backdrop
+			position absolute
+			bottom 0
+			z-index 1000
+			width 100%
+			height $height
+			-webkit-backdrop-filter blur(12px)
+			backdrop-filter blur(12px)
+			background-color var(--mobileHeaderBg)
+
+		> .content
+			z-index 1001
+
+			.tab
+				display grid
+				height $height
+				grid-template-columns 1fr 1fr 1fr 1fr
+				padding 0 16px
+
+				> a
+					display flex
+					align-items center
+					justify-content center
+					font-size 16px
+					color var(--faceText)
+
+					&.active
+						border-top 3px solid var(--primary)
+						background var(--secondary)
+
+				i.circle
+					position absolute
+					top 8px
+					right 24px
+					pointer-events none
+					font-size 8px
+					color var(--notificationIndicator)
+
+</style>
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
@@ -3,8 +3,8 @@
 	<div class="main" ref="main">
 		<div class="backdrop"></div>
 		<div class="content" ref="mainContainer">
-			<button class="nav" @click="$parent.isDrawerOpening = true"><fa icon="bars"/></button>
-			<i v-if="$parent.indicate" class="circle"><fa icon="circle"/></i>
+			<button v-if="$store.getters.isSignedIn" class="nav" @click="$parent.isDrawerOpening = true"><fa icon="bars"/></button>
+			<i v-if="hasGameInvitation" class="circle"><fa icon="circle"/></i>
 			<h1>
 				<slot>{{ $root.instanceName }}</slot>
 			</h1>

diff --git a/src/client/app/mobile/views/components/ui.vue b/src/client/app/mobile/views/components/ui.vue
@@ -4,25 +4,28 @@
 		<template #func><slot name="func"></slot></template>
 		<slot name="header"></slot>
 	</x-header>
-	<x-nav :is-open="isDrawerOpening"/>
+	<x-nav v-if="$store.getters.isSignedIn" :is-open="isDrawerOpening"/>
 	<div class="content">
 		<slot></slot>
 	</div>
 	<mk-stream-indicator v-if="$store.getters.isSignedIn"/>
 	<button class="nav button" v-if="$store.state.device.inDeckMode" @click="isDrawerOpening = !isDrawerOpening"><fa icon="bars"/><i v-if="indicate"><fa icon="circle"/></i></button>
 	<button class="post button" v-if="$store.state.device.inDeckMode" @click="$post()"><fa icon="pencil-alt"/></button>
+	<x-footer v-if="!$store.state.device.inDeckMode"/>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import MkNotify from './notify.vue';
 import XHeader from './ui.header.vue';
+import XFooter from './ui.footer.vue';
 import XNav from './ui.nav.vue';
 
 export default Vue.extend({
 	components: {
 		XHeader,
+		XFooter,
 		XNav
 	},
 
@@ -100,7 +103,9 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 .mk-ui
 	&:not(.deck)
-		padding-top 48px
+		padding 48px 0 64px 0
+		> .button
+			bottom: 64px
 
 	> .button
 		position fixed
@@ -128,6 +133,11 @@ export default Vue.extend({
 				font-size 16px
 				animation blink 1s infinite
 
+		&.home
+			left 28px
+			background var(--secondary)
+			color var(--text)
+
 		&.post
 			right 28px
 			background var(--primary)