usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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:
syuilo 2019-07-08 04:36:06 +09:00 committed by GitHub
parent 393ad283e1 6064c3ae47
commit eb783f827c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 73 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
locales/ja-JP.yml
View File

@ -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: "パスワード"

9
src/client/app/boot.js
View File

@ -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
View 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>

3
src/client/app/common/views/components/settings/settings.vue
View File

@ -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: {

4
src/client/app/desktop/views/home/home.vue
View File

@ -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

28
src/client/app/desktop/views/home/timeline.vue
View File

@ -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

1
src/client/app/store.ts
View File

@ -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,