sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

モバイル版でもデッキを使えるように (#4366)

Browse Source 
* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Fix bug

* wip

* Update notifications.vue

* Update user-menu.vue

* deck settings

* indicate
This commit is contained in:
syuilo
2019-02-25 19:45:00 +09:00
committed by GitHub
parent 3654f247c4
commit c0a60260c2
53 changed files with 711 additions and 666 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/app/desktop/views/components/index.ts
View File

@@ -2,6 +2,7 @@ import Vue from 'vue';
import ui from './ui.vue';
import uiNotification from './ui-notification.vue';
import note from './note.vue';
import notes from './notes.vue';
import subNoteContent from './sub-note-content.vue';
import window from './window.vue';
@@ -20,6 +21,7 @@ import uiContainer from './ui-container.vue';
Vue.component('mk-ui', ui);
Vue.component('mk-ui-notification', uiNotification);
Vue.component('mk-note', note);
Vue.component('mk-notes', notes);
Vue.component('mk-sub-note-content', subNoteContent);
Vue.component('mk-window', window);

9
src/client/app/desktop/views/components/note-preview.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="qiziqtywpuaucsgarwajitwaakggnisj" :title="title">
<mk-avatar class="avatar" :user="note.user" v-if="!mini"/>
<mk-avatar class="avatar" :user="note.user" v-if="!narrow"/>
<div class="main">
<mk-note-header class="header" :note="note" :mini="true"/>
<div class="body">
@@ -25,9 +25,10 @@ export default Vue.extend({
type: Object,
required: true
},
mini: {
type: Boolean,
required: false,
},
inject: {
narrow: {
default: false
}
},

11
src/client/app/desktop/views/components/note.sub.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="tkfdzaxtkdeianobciwadajxzbddorql" :class="{ mini }" :title="title">
<div class="tkfdzaxtkdeianobciwadajxzbddorql" :class="{ mini: narrow }" :title="title">
<mk-avatar class="avatar" :user="note.user"/>
<div class="main">
<mk-note-header class="header" :note="note"/>
@@ -24,10 +24,11 @@ export default Vue.extend({
note: {
type: Object,
required: true
},
mini: {
type: Boolean,
required: false,
}
},
inject: {
narrow: {
default: false
}
},

31
src/client/app/desktop/views/components/note.vue
View File

@@ -1,23 +1,23 @@
<template>
<div
class="note"
:class="{ mini }"
:class="{ mini: narrow }"
v-show="(this.$store.state.settings.remainDeletedNote || appearNote.deletedAt == null) && !hideThisNote"
:tabindex="appearNote.deletedAt == null ? '-1' : null"
v-hotkey="keymap"
:title="title"
>
<div class="conversation" v-if="detail && conversation.length > 0">
<x-sub v-for="note in conversation" :key="note.id" :note="note" :mini="mini"/>
<x-sub v-for="note in conversation" :key="note.id" :note="note"/>
</div>
<div class="reply-to" v-if="appearNote.reply && (!$store.getters.isSignedIn || $store.state.settings.showReplyTarget)">
<x-sub :note="appearNote.reply" :mini="mini"/>
<x-sub :note="appearNote.reply"/>
</div>
<mk-renote class="renote" v-if="isRenote" :note="note"/>
<article>
<article class="article">
<mk-avatar class="avatar" :user="appearNote.user"/>
<div class="main">
<mk-note-header class="header" :note="appearNote" :mini="mini"/>
<mk-note-header class="header" :note="appearNote"/>
<div class="body" v-if="appearNote.deletedAt == null">
<p v-if="appearNote.cw != null" class="cw">
<mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis" />
@@ -35,12 +35,12 @@
</div>
<mk-poll v-if="appearNote.poll" :note="appearNote" ref="pollViewer"/>
<a class="location" v-if="appearNote.geo" :href="`https://maps.google.com/maps?q=${appearNote.geo.coordinates[1]},${appearNote.geo.coordinates[0]}`" target="_blank"><fa icon="map-marker-alt"/> 位置情報</a>
<div class="renote" v-if="appearNote.renote"><mk-note-preview :note="appearNote.renote" :mini="mini"/></div>
<mk-url-preview v-for="url in urls" :url="url" :key="url" :mini="mini" :compact="compact"/>
<div class="renote" v-if="appearNote.renote"><mk-note-preview :note="appearNote.renote"/></div>
<mk-url-preview v-for="url in urls" :url="url" :key="url" :compact="compact"/>
</div>
</div>
<footer v-if="appearNote.deletedAt == null">
<span class="app" v-if="appearNote.app && mini && $store.state.settings.showVia">via <b>{{ appearNote.app.name }}</b></span>
<span class="app" v-if="appearNote.app && narrow && $store.state.settings.showVia">via <b>{{ appearNote.app.name }}</b></span>
<mk-reactions-viewer :note="appearNote" ref="reactionsViewer"/>
<button class="replyButton" @click="reply()" :title="$t('reply')">
<template v-if="appearNote.reply"><fa icon="reply-all"/></template>
@@ -70,7 +70,7 @@
</div>
</article>
<div class="replies" v-if="detail && replies.length > 0">
<x-sub v-for="note in replies" :key="note.id" :note="note" :mini="mini"/>
<x-sub v-for="note in replies" :key="note.id" :note="note"/>
</div>
</div>
</template>
@@ -110,9 +110,10 @@ export default Vue.extend({
required: false,
default: false
},
mini: {
type: Boolean,
required: false,
},
inject: {
narrow: {
default: false
}
},
@@ -152,7 +153,7 @@ export default Vue.extend({
border-bottom solid var(--lineWidth) var(--faceDivider)
&.mini
font-size 14px
font-size 13px
> .renote
padding 8px 16px 0 16px
@@ -161,7 +162,7 @@ export default Vue.extend({
width 20px
height 20px
> article
> .article
padding 16px 16px 4px
> .avatar
@@ -189,7 +190,7 @@ export default Vue.extend({
> .renote + article
padding-top 8px
> article
> .article
display flex
padding 28px 32px 18px 32px

7
src/client/app/desktop/views/components/notes.vue
View File

@@ -17,7 +17,7 @@
<!-- トランジションを有効にするとなぜかメモリリークする -->
<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="notes transition" tag="div" ref="notes">
<template v-for="(note, i) in _notes">
<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)" :compact="true" ref="note"/>
<mk-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)" :compact="true" ref="note"/>
<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
<span><fa icon="angle-up"/>{{ note._datetext }}</span>
<span><fa icon="angle-down"/>{{ _notes[i + 1]._datetext }}</span>
@@ -39,17 +39,12 @@ import Vue from 'vue';
import i18n from '../../../i18n';
import * as config from '../../../config';
import shouldMuteNote from '../../../common/scripts/should-mute-note';
import XNote from './note.vue';
const displayLimit = 30;
export default Vue.extend({
i18n: i18n(),
components: {
XNote
},
props: {
makePromise: {
required: true

20
src/client/app/desktop/views/components/settings.vue
View File

@@ -115,18 +115,18 @@
<ui-switch v-model="remainDeletedNote">{{ $t('remain-deleted-note') }}</ui-switch>
</section>
<section>
<header>{{ $t('deck-column-align') }}</header>
<ui-radio v-model="deckColumnAlign" value="center">{{ $t('deck-column-align-center') }}</ui-radio>
<ui-radio v-model="deckColumnAlign" value="left">{{ $t('deck-column-align-left') }}</ui-radio>
<ui-radio v-model="deckColumnAlign" value="flexible">{{ $t('deck-column-align-flexible') }}</ui-radio>
<header>{{ $t('@.deck-column-align') }}</header>
<ui-radio v-model="deckColumnAlign" value="center">{{ $t('@.deck-column-align-center') }}</ui-radio>
<ui-radio v-model="deckColumnAlign" value="left">{{ $t('@.deck-column-align-left') }}</ui-radio>
<ui-radio v-model="deckColumnAlign" value="flexible">{{ $t('@.deck-column-align-flexible') }}</ui-radio>
</section>
<section>
<header>{{ $t('deck-column-width') }}</header>
<ui-radio v-model="deckColumnWidth" value="narrow">{{ $t('deck-column-width-narrow') }}</ui-radio>
<ui-radio v-model="deckColumnWidth" value="narrower">{{ $t('deck-column-width-narrower') }}</ui-radio>
<ui-radio v-model="deckColumnWidth" value="normal">{{ $t('deck-column-width-normal') }}</ui-radio>
<ui-radio v-model="deckColumnWidth" value="wider">{{ $t('deck-column-width-wider') }}</ui-radio>
<ui-radio v-model="deckColumnWidth" value="wide">{{ $t('deck-column-width-wide') }}</ui-radio>
<header>{{ $t('@.deck-column-width') }}</header>
<ui-radio v-model="deckColumnWidth" value="narrow">{{ $t('@.deck-column-width-narrow') }}</ui-radio>
<ui-radio v-model="deckColumnWidth" value="narrower">{{ $t('@.deck-column-width-narrower') }}</ui-radio>
<ui-radio v-model="deckColumnWidth" value="normal">{{ $t('@.deck-column-width-normal') }}</ui-radio>
<ui-radio v-model="deckColumnWidth" value="wider">{{ $t('@.deck-column-width-wider') }}</ui-radio>
<ui-radio v-model="deckColumnWidth" value="wide">{{ $t('@.deck-column-width-wide') }}</ui-radio>
</section>
<section>
<ui-switch v-model="games_reversi_showBoardLabels">{{ $t('@.show-reversi-board-labels') }}</ui-switch>