Better display in narrow desktop and choosing client type; Fix #1442, Fix #2106, Resolve #4552 (#4549)
* fix #1442, fix #2106 * revert * wip * ✌️ * clean up * fix * https://github.com/syuilo/misskey/pull/4549#discussion_r287750004
This commit is contained in:
commit
eb783f827c
|
@ -637,6 +637,15 @@ common/views/components/emoji-picker.vue:
|
||||||
symbols: "記号"
|
symbols: "記号"
|
||||||
flags: "旗"
|
flags: "旗"
|
||||||
|
|
||||||
|
common/views/components/settings/app-type.vue:
|
||||||
|
title: "モード"
|
||||||
|
intro: "デスクトップ版とモバイル版のどちらを使うかを指定できます。"
|
||||||
|
choices:
|
||||||
|
auto: "自動で選択"
|
||||||
|
desktop: "デスクトップ版に固定"
|
||||||
|
mobile: "モバイル版に固定"
|
||||||
|
info: "変更はページの再度読み込み後に反映されます。"
|
||||||
|
|
||||||
common/views/components/signin.vue:
|
common/views/components/signin.vue:
|
||||||
username: "ユーザー名"
|
username: "ユーザー名"
|
||||||
password: "パスワード"
|
password: "パスワード"
|
||||||
|
|
|
@ -84,7 +84,14 @@
|
||||||
|
|
||||||
// Detect the user agent
|
// Detect the user agent
|
||||||
const ua = navigator.userAgent.toLowerCase();
|
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
|
// Get the <head> element
|
||||||
const head = document.getElementsByTagName('head')[0];
|
const head = document.getElementsByTagName('head')[0];
|
||||||
|
|
36
src/client/app/common/views/components/settings/app-type.vue
Normal file
36
src/client/app/common/views/components/settings/app-type.vue
Normal file
|
@ -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>
|
|
@ -163,6 +163,7 @@
|
||||||
</ui-card>
|
</ui-card>
|
||||||
|
|
||||||
<x-language/>
|
<x-language/>
|
||||||
|
<x-app-type/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-if="page == null || page == 'notification'">
|
<template v-if="page == null || page == 'notification'">
|
||||||
|
@ -271,6 +272,7 @@ import XPassword from './password.vue';
|
||||||
import XProfile from './profile.vue';
|
import XProfile from './profile.vue';
|
||||||
import XApi from './api.vue';
|
import XApi from './api.vue';
|
||||||
import XLanguage from './language.vue';
|
import XLanguage from './language.vue';
|
||||||
|
import XAppType from './app-type.vue';
|
||||||
import XNotification from './notification.vue';
|
import XNotification from './notification.vue';
|
||||||
|
|
||||||
import { url, version } from '../../../../config';
|
import { url, version } from '../../../../config';
|
||||||
|
@ -291,6 +293,7 @@ export default Vue.extend({
|
||||||
XProfile,
|
XProfile,
|
||||||
XApi,
|
XApi,
|
||||||
XLanguage,
|
XLanguage,
|
||||||
|
XAppType,
|
||||||
XNotification,
|
XNotification,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
|
|
@ -62,7 +62,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<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"/>
|
<component v-for="widget in widgets[place]" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" platform="desktop"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
|
@ -392,7 +392,7 @@ export default Vue.extend({
|
||||||
margin 0 auto
|
margin 0 auto
|
||||||
|
|
||||||
&:not(.side)
|
&:not(.side)
|
||||||
@media (max-width 1200px)
|
@media (max-width 1100px)
|
||||||
> *:not(.main)
|
> *:not(.main)
|
||||||
display none
|
display none
|
||||||
|
|
||||||
|
|
|
@ -4,12 +4,12 @@
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<component :is="src == 'list' ? 'mk-user-list-timeline' : 'x-core'" ref="tl" v-bind="options">
|
<component :is="src == 'list' ? 'mk-user-list-timeline' : 'x-core'" ref="tl" v-bind="options">
|
||||||
<header class="zahtxcqi">
|
<header class="zahtxcqi">
|
||||||
<span :data-active="src == 'home'" @click="src = 'home'"><fa icon="home"/> {{ $t('home') }}</span>
|
<div :data-active="src == 'home'" @click="src = 'home'"><fa icon="home"/> {{ $t('home') }}</div>
|
||||||
<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline"><fa :icon="['far', 'comments']"/> {{ $t('local') }}</span>
|
<div :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline"><fa :icon="['far', 'comments']"/> {{ $t('local') }}</div>
|
||||||
<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline"><fa icon="share-alt"/> {{ $t('hybrid') }}</span>
|
<div :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline"><fa icon="share-alt"/> {{ $t('hybrid') }}</div>
|
||||||
<span :data-active="src == 'global'" @click="src = 'global'" v-if="enableGlobalTimeline"><fa icon="globe"/> {{ $t('global') }}</span>
|
<div :data-active="src == 'global'" @click="src = 'global'" v-if="enableGlobalTimeline"><fa icon="globe"/> {{ $t('global') }}</div>
|
||||||
<span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl"><fa icon="hashtag"/> {{ tagTl.title }}</span>
|
<div :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl"><fa icon="hashtag"/> {{ tagTl.title }}</div>
|
||||||
<span :data-active="src == 'list'" @click="src = 'list'" v-if="list"><fa icon="list"/> {{ list.name }}</span>
|
<div :data-active="src == 'list'" @click="src = 'list'" v-if="list"><fa icon="list"/> {{ list.name }}</div>
|
||||||
<div class="buttons">
|
<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 == '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>
|
<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
|
&.shadow
|
||||||
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
|
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
|
||||||
|
|
||||||
.zahtxcqi
|
header.zahtxcqi
|
||||||
|
display flex
|
||||||
|
flex-wrap wrap
|
||||||
padding 0 8px
|
padding 0 8px
|
||||||
z-index 10
|
z-index 10
|
||||||
background var(--faceHeader)
|
background var(--faceHeader)
|
||||||
box-shadow 0 var(--lineWidth) var(--desktopTimelineHeaderShadow)
|
box-shadow 0 var(--lineWidth) var(--desktopTimelineHeaderShadow)
|
||||||
|
|
||||||
|
> *
|
||||||
|
flex-shrink 0
|
||||||
|
|
||||||
> .buttons
|
> .buttons
|
||||||
position absolute
|
margin-left auto
|
||||||
z-index 2
|
|
||||||
top 0
|
|
||||||
right 0
|
|
||||||
padding-right 8px
|
|
||||||
|
|
||||||
> button
|
> button
|
||||||
padding 0 8px
|
padding 0 8px
|
||||||
|
@ -244,8 +245,7 @@ export default Vue.extend({
|
||||||
height 2px
|
height 2px
|
||||||
background var(--primary)
|
background var(--primary)
|
||||||
|
|
||||||
> span
|
> div:not(.buttons)
|
||||||
display inline-block
|
|
||||||
padding 0 10px
|
padding 0 10px
|
||||||
line-height 42px
|
line-height 42px
|
||||||
font-size 12px
|
font-size 12px
|
||||||
|
|
|
@ -61,6 +61,7 @@ const defaultDeviceSettings = {
|
||||||
soundVolume: 0.5,
|
soundVolume: 0.5,
|
||||||
mediaVolume: 0.5,
|
mediaVolume: 0.5,
|
||||||
lang: null,
|
lang: null,
|
||||||
|
appTypeForce: 'auto',
|
||||||
debug: false,
|
debug: false,
|
||||||
lightmode: false,
|
lightmode: false,
|
||||||
loadRawImages: false,
|
loadRawImages: false,
|
||||||
|
|
Loading…
Reference in a new issue