Better display in narrow desktop and choosing client type; Fix #1442, F…

…ix #2106, Resolve #4552 (#4549) * fix #1442, fix #2106 * revert * wip * ✌️ * clean up * fix * https://github.com/syuilo/misskey/pull/4549#discussion_r287750004
misskey-dev · Jul 7, 2019 · eb783f8 · eb783f8
2 parents 393ad28 + 6064c3a
commit eb783f8
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 17 deletions.
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
@@ -637,6 +637,15 @@ common/views/components/emoji-picker.vue:
   symbols: "記号"
   flags: "旗"
 
+common/views/components/settings/app-type.vue:
+  title: "モード"
+  intro: "デスクトップ版とモバイル版のどちらを使うかを指定できます。"
+  choices:
+    auto: "自動で選択"
+    desktop: "デスクトップ版に固定"
+    mobile: "モバイル版に固定"
+  info: "変更はページの再度読み込み後に反映されます。"
+
 common/views/components/signin.vue:
   username: "ユーザー名"
   password: "パスワード"

diff --git a/src/client/app/boot.js b/src/client/app/boot.js
@@ -84,7 +84,14 @@
 
 	// Detect the user agent
 	const ua = navigator.userAgent.toLowerCase();
-	const isMobile = /mobile|iphone|ipad|android/.test(ua);
+	let isMobile = /mobile|iphone|ipad|android/.test(ua) || window.innerWidth < 576;
+	if (settings && settings.device.appTypeForce) {
+		if (settings.device.appTypeForce === 'mobile') {
+			isMobile = true;
+		} else if (settings.device.appTypeForce === 'desktop') {
+			isMobile = false;
+		}
+	}
 
 	// Get the <head> element
 	const head = document.getElementsByTagName('head')[0];

diff --git a/src/client/app/common/views/components/settings/app-type.vue b/src/client/app/common/views/components/settings/app-type.vue
@@ -0,0 +1,36 @@
+<template>
+<ui-card>
+	<template #title><fa :icon="faMobileAlt"/> {{ $t('title') }}</template>
+
+	<section class="fit-top">
+		<p>{{ $t('intro') }}</p>
+		<ui-select v-model="appTypeForce" :placeholder="$t('intro')">
+			<option v-for="x in ['auto', 'desktop', 'mobile']" :value="x" :key="x">{{ $t(`choices.${x}`) }}</option>
+		</ui-select>
+		<ui-info warn>{{ $t('info') }}</ui-info>
+	</section>
+</ui-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../../i18n';
+import { faMobileAlt } from '@fortawesome/free-solid-svg-icons'
+
+export default Vue.extend({
+	i18n: i18n('common/views/components/settings/app-type.vue'),
+
+	data() {
+		return {
+			faMobileAlt
+		};
+	},
+
+	computed: {
+		appTypeForce: {
+			get() { return this.$store.state.device.appTypeForce; },
+			set(value) { this.$store.commit('device/set', { key: 'appTypeForce', value }); }
+		},
+	},
+});
+</script>
diff --git a/src/client/app/common/views/components/settings/settings.vue b/src/client/app/common/views/components/settings/settings.vue
@@ -163,6 +163,7 @@
 		</ui-card>
 
 		<x-language/>
+		<x-app-type/>
 	</template>
 
 	<template v-if="page == null || page == 'notification'">
@@ -271,6 +272,7 @@ import XPassword from './password.vue';
 import XProfile from './profile.vue';
 import XApi from './api.vue';
 import XLanguage from './language.vue';
+import XAppType from './app-type.vue';
 import XNotification from './notification.vue';
 
 import { url, version } from '../../../../config';
@@ -291,6 +293,7 @@ export default Vue.extend({
 		XProfile,
 		XApi,
 		XLanguage,
+		XAppType,
 		XNotification,
 	},
 	props: {

diff --git a/src/client/app/desktop/views/home/home.vue b/src/client/app/desktop/views/home/home.vue
@@ -62,7 +62,7 @@
 				</div>
 			</template>
 			<template v-else>
-				<div v-for="place in ['left', 'right']" :class="place">
+				<div v-for="place in ['left', 'right']" :class="place" :key="place">
 					<component v-for="widget in widgets[place]" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" platform="desktop"/>
 				</div>
 				<div class="main">
@@ -392,7 +392,7 @@ export default Vue.extend({
 					margin 0 auto
 
 		&:not(.side)
-			@media (max-width 1200px)
+			@media (max-width 1100px)
 				> *:not(.main)
 					display none
 

diff --git a/src/client/app/desktop/views/home/timeline.vue b/src/client/app/desktop/views/home/timeline.vue
@@ -4,12 +4,12 @@
 	<div class="main">
 		<component :is="src == 'list' ? 'mk-user-list-timeline' : 'x-core'" ref="tl" v-bind="options">
 			<header class="zahtxcqi">
-				<span :data-active="src == 'home'" @click="src = 'home'"><fa icon="home"/> {{ $t('home') }}</span>
-				<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline"><fa :icon="['far', 'comments']"/> {{ $t('local') }}</span>
-				<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline"><fa icon="share-alt"/> {{ $t('hybrid') }}</span>
-				<span :data-active="src == 'global'" @click="src = 'global'" v-if="enableGlobalTimeline"><fa icon="globe"/> {{ $t('global') }}</span>
-				<span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl"><fa icon="hashtag"/> {{ tagTl.title }}</span>
-				<span :data-active="src == 'list'" @click="src = 'list'" v-if="list"><fa icon="list"/> {{ list.name }}</span>
+				<div :data-active="src == 'home'" @click="src = 'home'"><fa icon="home"/> {{ $t('home') }}</div>
+				<div :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline"><fa :icon="['far', 'comments']"/> {{ $t('local') }}</div>
+				<div :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline"><fa icon="share-alt"/> {{ $t('hybrid') }}</div>
+				<div :data-active="src == 'global'" @click="src = 'global'" v-if="enableGlobalTimeline"><fa icon="globe"/> {{ $t('global') }}</div>
+				<div :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl"><fa icon="hashtag"/> {{ tagTl.title }}</div>
+				<div :data-active="src == 'list'" @click="src = 'list'" v-if="list"><fa icon="list"/> {{ list.name }}</div>
 				<div class="buttons">
 					<button :data-active="src == 'mentions'" @click="src = 'mentions'" :title="$t('mentions')"><fa icon="at"/><i class="indicator" v-if="$store.state.i.hasUnreadMentions"><fa icon="circle"/></i></button>
 					<button :data-active="src == 'messages'" @click="src = 'messages'" :title="$t('messages')"><fa :icon="['far', 'envelope']"/><i class="indicator" v-if="$store.state.i.hasUnreadSpecifiedNotes"><fa icon="circle"/></i></button>
@@ -200,18 +200,19 @@ export default Vue.extend({
 		&.shadow
 			box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
 
-	.zahtxcqi
+	header.zahtxcqi
+		display flex
+		flex-wrap wrap
 		padding 0 8px
 		z-index 10
 		background var(--faceHeader)
 		box-shadow 0 var(--lineWidth) var(--desktopTimelineHeaderShadow)
 
+		> *
+			flex-shrink 0
+
 		> .buttons
-			position absolute
-			z-index 2
-			top 0
-			right 0
-			padding-right 8px
+			margin-left auto
 
 			> button
 				padding 0 8px
@@ -244,8 +245,7 @@ export default Vue.extend({
 						height 2px
 						background var(--primary)
 
-		> span
-			display inline-block
+		> div:not(.buttons)
 			padding 0 10px
 			line-height 42px
 			font-size 12px

diff --git a/src/client/app/store.ts b/src/client/app/store.ts
@@ -61,6 +61,7 @@ const defaultDeviceSettings = {
 	soundVolume: 0.5,
 	mediaVolume: 0.5,
 	lang: null,
+	appTypeForce: 'auto',
 	debug: false,
 	lightmode: false,
 	loadRawImages: false,