add Bottom Bar

mei23 · Oct 11, 2020 · ed10408 · ed10408
1 parent e9e4a9d
commit ed10408
Show file tree

Hide file tree

Showing 9 changed files with 151 additions and 28 deletions.
diff --git a/locales/en-US.yml b/locales/en-US.yml
@@ -273,6 +273,7 @@ common:
     ShowAdvancedSettings: "Display unnecessary settings"
     navbar-position: "Navbar position"
     navbar-position-top: "Top"
+    navbar-position-bottom: "Bottom"
     navbar-position-left: "Left"
     navbar-position-right: "Right"
     i-am-under-limited-internet: "I have limited bandwidth"

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
@@ -303,6 +303,7 @@ common:
     ShowAdvancedSettings: "いらない設定を表示する"
     navbar-position: "ナビゲーションバーの位置"
     navbar-position-top: "上"
+    navbar-position-bottom: "下"
     navbar-position-left: "左"
     navbar-position-right: "右"
     i-am-under-limited-internet: "私は通信を制限されている"

diff --git a/src/client/app/common/views/components/settings/settings.vue b/src/client/app/common/views/components/settings/settings.vue
@@ -28,6 +28,7 @@
 			<section v-if="!$root.isMobile">
 				<header>{{ $t('@._settings.navbar-position') }}</header>
 				<ui-radio v-model="navbar" value="top">{{ $t('@._settings.navbar-position-top') }}</ui-radio>
+				<ui-radio v-model="navbar" value="bottom">{{ $t('@._settings.navbar-position-bottom') }}</ui-radio>
 				<ui-radio v-model="navbar" value="left">{{ $t('@._settings.navbar-position-left') }}</ui-radio>
 				<ui-radio v-model="navbar" value="right">{{ $t('@._settings.navbar-position-right') }}</ui-radio>
 			</section>

diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -1,11 +1,20 @@
 <template>
 <div class="account" v-hotkey.global="keymap">
 	<button class="header" :data-active="isOpen" @click="toggle">
-		<span class="username">{{ $store.state.i.username }}<template v-if="!isOpen"><fa icon="angle-down"/></template><template v-if="isOpen"><fa icon="angle-up"/></template></span>
+		<span class="username">{{ $store.state.i.username }}
+			<template v-if="!isOpen">
+				<fa v-if="navbar == 'bottom'" icon="angle-up"/>
+				<fa v-if="navbar == 'top'" icon="angle-down"/>
+			</template>
+			<template v-if="isOpen">
+				<fa v-if="navbar == 'top'" icon="angle-up"/>
+				<fa v-if="navbar == 'bottom'" icon="angle-down"/>
+			</template>
+		</span>
 		<mk-avatar class="avatar" :user="$store.state.i"/>
 	</button>
 	<transition name="zoom-in-top">
-		<div class="menu" v-if="isOpen">
+		<div class="menu" :class="navbar" v-if="isOpen">
 			<ul>
 				<li @click="closeMenu">
 					<router-link :to="`/@${ $store.state.i.username }`">
@@ -125,6 +134,9 @@ export default Vue.extend({
 		};
 	},
 	computed: {
+		navbar(): string {
+			return this.$store.state.device.navbar;
+		},
 		keymap(): any {
 			return {
 				'a|m': this.toggle
@@ -245,36 +257,56 @@ export default Vue.extend({
 		$bgcolor = var(--secondary)
 		display block
 		position absolute
-		top 56px
 		right -2px
 		width 230px
 		font-size 0.8em
 		background $bgcolor
 		border-radius 4px
 		box-shadow 0 var(--lineWidth) 4px rgba(#000, 0.25)
 
+		&.top
+			top 56px
+
+			&:before
+				border-bottom solid 14px rgba(#000, 0.1)
+				top -28px
+
+			&:after
+				border-bottom solid 14px $bgcolor
+				top -27px
+
+		&.bottom
+			bottom 56px
+
+			&:before
+				border-top solid 14px rgba(#000, 0.1)
+				bottom -27px
+
+
+			&:after
+				border-top solid 14px $bgcolor
+				bottom -27px
+
 		&:before
 			content ""
 			pointer-events none
 			display block
 			position absolute
-			top -28px
 			right 12px
 			border-top solid 14px transparent
 			border-right solid 14px transparent
-			border-bottom solid 14px rgba(#000, 0.1)
+			border-bottom solid 14px transparent
 			border-left solid 14px transparent
 
 		&:after
 			content ""
 			pointer-events none
 			display block
 			position absolute
-			top -27px
 			right 12px
 			border-top solid 14px transparent
 			border-right solid 14px transparent
-			border-bottom solid 14px $bgcolor
+			border-bottom solid 14px transparent
 			border-left solid 14px transparent
 
 		ul

diff --git a/src/client/app/desktop/views/components/ui.header.clock.vue b/src/client/app/desktop/views/components/ui.header.clock.vue
@@ -7,7 +7,7 @@
 			<span class="hhnn">{{ hh }}<span :style="{ visibility: now.getSeconds() % 2 == 0 ? 'visible' : 'hidden' }">:</span>{{ nn }}</span>
 		</time>
 	</div>
-	<div class="content">
+	<div class="content" :class="navbar">
 		<mk-analog-clock :dark="true"/>
 	</div>
 </div>
@@ -24,6 +24,10 @@ export default Vue.extend({
 		};
 	},
 	computed: {
+		navbar(): string {
+			return this.$store.state.device.navbar;
+		},
+
 		yyyy(): number {
 			return this.now.getFullYear();
 		},
@@ -95,10 +99,15 @@ export default Vue.extend({
 				opacity 0.7
 
 	> .content
+		&.top
+			top auto
+
+		&.bottom
+			bottom 48px
+
 		visibility hidden
 		display block
 		position absolute
-		top auto
 		right 0
 		z-index 3
 		margin 0

diff --git a/src/client/app/desktop/views/components/ui.header.nav.vue b/src/client/app/desktop/views/components/ui.header.nav.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="nav">
+<div class="nav" :class="navbar">
 	<ul>
 		<li class="timeline" :class="{ active: $route.name == 'index' }" @click="goToTop">
 			<router-link to="/"><fa icon="home"/><p>{{ $t('@.timeline') }}</p></router-link>
@@ -36,6 +36,11 @@ export default Vue.extend({
 			faNewspaper, faHashtag
 		};
 	},
+	computed: {
+		navbar(): string {
+			return this.$store.state.device.navbar;
+		},
+	},
 	mounted() {
 		if (this.$store.getters.isSignedIn) {
 			this.connection = this.$root.stream.useSharedConnection('main');
@@ -80,6 +85,20 @@ export default Vue.extend({
 	line-height 3rem
 	vertical-align top
 
+	&.top
+		> ul
+			> li
+				&.active
+					> a
+						border-bottom solid 3px var(--primary)
+
+	&.bottom
+		> ul
+			> li
+				&.active
+					> a
+						border-top solid 3px var(--primary)
+
 	> ul
 		display inline-block
 		margin 0
@@ -94,10 +113,6 @@ export default Vue.extend({
 			height 48px
 			line-height 48px
 
-			&.active
-				> a
-					border-bottom solid 3px var(--primary)
-
 			> a
 				display inline-block
 				z-index 1

diff --git a/src/client/app/desktop/views/components/ui.header.notifications.vue b/src/client/app/desktop/views/components/ui.header.notifications.vue
@@ -4,7 +4,7 @@
 		<i class="bell"><fa :icon="['far', 'bell']"/></i>
 		<i class="circle" v-if="hasUnreadNotification"><fa icon="circle"/></i>
 	</button>
-	<div class="pop" v-if="isOpen">
+	<div class="pop" :class="navbar" v-if="isOpen">
 		<div class="read-all" v-if="hasUnreadNotification">
 			<button @click="readAllNotifications">{{ $t('mark-all-as-read') }}</button>
 		</div>
@@ -27,6 +27,10 @@ export default Vue.extend({
 	},
 
 	computed: {
+		navbar(): string {
+			return this.$store.state.device.navbar;
+		},
+
 		hasUnreadNotification(): boolean {
 			return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadNotification;
 		},
@@ -102,9 +106,31 @@ export default Vue.extend({
 
 	> .pop
 		$bgcolor = var(--secondary)
+
+		&.top
+			top 56px
+
+			&:before
+				top -28px
+				border-bottom solid 14px rgba(#000, 0.1)
+
+			&:after
+				top -27px
+				border-bottom solid 14px $bgcolor
+
+		&.bottom
+			bottom 56px
+
+			&:before
+				bottom -28px
+				border-top solid 14px rgba(#000, 0.1)
+
+			&:after
+				bottom -27px
+				border-top solid 14px $bgcolor
+
 		display block
 		position absolute
-		top 56px
 		right -72px
 		width 300px
 		background $bgcolor
@@ -124,23 +150,21 @@ export default Vue.extend({
 			pointer-events none
 			display block
 			position absolute
-			top -28px
 			right 74px
 			border-top solid 14px transparent
 			border-right solid 14px transparent
-			border-bottom solid 14px rgba(#000, 0.1)
+			border-bottom solid 14px transparent
 			border-left solid 14px transparent
 
 		&:after
 			content ""
 			pointer-events none
 			display block
 			position absolute
-			top -27px
 			right 74px
 			border-top solid 14px transparent
 			border-right solid 14px transparent
-			border-bottom solid 14px $bgcolor
+			border-bottom solid 14px transparent
 			border-left solid 14px transparent
 
 		> .mk-notifications

diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="header" :style="{'box-shadow': '0 0px 8px rgba(0, 0, 0, 0.2)'}">
+<div class="header" :class="navbar" :style="{'box-shadow': '0 0px 8px rgba(0, 0, 0, 0.2)'}">
 	<div class="main" ref="main">
 		<div class="backdrop"></div>
 		<div class="main">
@@ -57,6 +57,12 @@ export default Vue.extend({
 		};
 	},
 
+	computed: {
+		navbar(): string {
+			return this.$store.state.device.navbar;
+		},
+	},
+
 	mounted() {
 		this.$store.commit('setUiHeaderHeight', this.$el.offsetHeight);
 	},
@@ -75,10 +81,25 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 .header
 	position fixed
-	top 0
 	z-index 1000
 	width 100%
 
+	&.top
+		top 0
+
+	&.bottom
+		bottom 0
+
+	&.top
+		> .main
+			> .backdrop
+				background var(--desktopHeaderBg)
+
+	&.bottom
+		> .main
+			> .backdrop
+				background var(--secondary)
+
 	> .warn
 		display block
 		margin 0
@@ -97,7 +118,6 @@ export default Vue.extend({
 			z-index 1000
 			width 100%
 			height 48px
-			background var(--desktopHeaderBg)
 
 		> .main
 			z-index 1001

diff --git a/src/client/app/desktop/views/components/ui.vue b/src/client/app/desktop/views/components/ui.vue
@@ -2,10 +2,12 @@
 <div class="mk-ui" v-hotkey.global="keymap">
 	<div class="bg" v-if="$store.getters.isSignedIn && $store.state.i.wallpaperUrl" :style="style"></div>
 	<x-header class="header" v-if="navbar == 'top'" v-show="!zenMode" ref="header"/>
-	<x-sidebar class="sidebar" v-if="navbar != 'top'" v-show="!zenMode" ref="sidebar"/>
-	<div class="content" :class="[{ sidebar: navbar != 'top', zen: zenMode }, navbar]">
+	<x-sidebar class="sidebar" v-if="navbar == 'left'" v-show="!zenMode" ref="sidebar"/>
+	<x-sidebar class="sidebar" v-if="navbar == 'right'" v-show="!zenMode" ref="sidebar"/>
+	<div class="content" :class="[{ sidebar: (navbar != 'top' && navbar != 'bottom'), zen: zenMode }, navbar]">
 		<slot></slot>
 	</div>
+	<x-header class="header" v-if="navbar == 'bottom'" v-show="!zenMode" ref="header"/>
 	<mk-stream-indicator v-if="$store.getters.isSignedIn"/>
 </div>
 </template>
@@ -50,18 +52,36 @@ export default Vue.extend({
 
 	watch: {
 		'$store.state.uiHeaderHeight'() {
-			this.$el.style.paddingTop = this.$store.state.uiHeaderHeight + 'px';
+			if (this.navbar == 'bottom') {
+				this.$el.style.paddingTop = '0px';
+				this.$el.style.paddingBottom = this.$store.state.uiHeaderHeight + 'px';
+			}else if(this.navbar == 'top'){
+				this.$el.style.paddingTop = this.$store.state.uiHeaderHeight + 'px';
+				this.$el.style.paddingBottom = '0px';
+			}else{
+				this.$el.style.paddingTop = this.$store.state.uiHeaderHeight + 'px';
+				this.$el.style.paddingBottom = this.$store.state.uiHeaderHeight + 'px';
+			}
 		},
 
 		navbar() {
-			if (this.navbar != 'top') {
+			if (this.navbar != 'top' && this.navbar != 'bottom') {
 				this.$store.commit('setUiHeaderHeight', 0);
 			}
 		}
 	},
 
 	mounted() {
-		this.$el.style.paddingTop = this.$store.state.uiHeaderHeight + 'px';
+		if (this.navbar == 'bottom') {
+			this.$el.style.paddingTop = '0px';
+			this.$el.style.paddingBottom = this.$store.state.uiHeaderHeight + 'px';
+		}else if(this.navbar == 'top'){
+			this.$el.style.paddingTop = this.$store.state.uiHeaderHeight + 'px';
+			this.$el.style.paddingBottom = '0px';
+		}else{
+			this.$el.style.paddingTop = this.$store.state.uiHeaderHeight + 'px';
+			this.$el.style.paddingBottom = this.$store.state.uiHeaderHeight + 'px';
+		}
 	},
 
 	methods: {