Implement image dialog

This commit is contained in:
syuilo 2020-02-16 22:46:18 +09:00
parent dc39caed1e
commit 091923764d
7 changed files with 82 additions and 2 deletions

View file

@ -6,6 +6,7 @@ unreleased
### ✨Improvements ### ✨Improvements
* 投稿詳細ページで前後の投稿を見れるように * 投稿詳細ページで前後の投稿を見れるように
* 自分のfollowersートはRenoteできるように * 自分のfollowersートはRenoteできるように
* 画像ダイアログを実装
* フォロー申請ページの調整 * フォロー申請ページの調整
* 壁紙設定の強化 * 壁紙設定の強化
* 画面が狭い状態でMisskeyを起動した場合でも、画面幅が広がったときにウィジェットを表示するように * 画面が狭い状態でMisskeyを起動した場合でも、画面幅が広がったときにウィジェットを表示するように

View file

@ -402,6 +402,7 @@ existingAcount: "既存のアカウント"
regenerate: "再生成" regenerate: "再生成"
fontSize: "フォントサイズ" fontSize: "フォントサイズ"
noFollowRequests: "フォロー申請はありません" noFollowRequests: "フォロー申請はありません"
openImageInNewTab: "画像を新しいタブで開く"
_ago: _ago:
unknown: "謎" unknown: "謎"

View file

@ -0,0 +1,54 @@
<template>
<x-modal ref="modal" @closed="() => { $emit('closed'); destroyDom(); }">
<img class="xubzgfga" ref="img" :src="image.url" :alt="image.name" :title="image.name" @click="close" tabindex="-1"/>
</x-modal>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../i18n';
import XModal from './modal.vue';
export default Vue.extend({
i18n,
components: {
XModal,
},
props: {
image: {
type: Object,
required: true
},
},
mounted() {
this.$nextTick(() => {
this.$refs.img.focus();
});
},
methods: {
close() {
this.$refs.modal.close();
},
}
});
</script>
<style lang="scss" scoped>
.xubzgfga {
position: fixed;
z-index: 2;
top: 0;
right: 0;
bottom: 0;
left: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
cursor: zoom-out;
image-orientation: from-image;
}
</style>

View file

@ -20,6 +20,7 @@ import Vue from 'vue';
import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'; import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
import i18n from '../i18n'; import i18n from '../i18n';
import { getStaticImageUrl } from '../scripts/get-static-image-url'; import { getStaticImageUrl } from '../scripts/get-static-image-url';
import ImageViewer from './image-viewer.vue';
export default Vue.extend({ export default Vue.extend({
i18n, i18n,
@ -60,7 +61,16 @@ export default Vue.extend({
}, },
methods: { methods: {
onClick() { onClick() {
if (this.$store.state.device.imageNewTab) {
window.open(this.image.url, '_blank'); window.open(this.image.url, '_blank');
} else {
const viewer = this.$root.new(ImageViewer, {
image: this.image
});
this.$once('hook:beforeDestroy', () => {
viewer.close();
});
}
} }
} }
}); });

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-modal"> <div class="mk-modal" v-hotkey.global="keymap">
<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear> <transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
<div class="bg" ref="bg" v-if="show" @click="close()"></div> <div class="bg" ref="bg" v-if="show" @click="close()"></div>
</transition> </transition>
@ -20,6 +20,13 @@ export default Vue.extend({
show: true, show: true,
}; };
}, },
computed: {
keymap(): any {
return {
'esc': this.close,
};
},
},
methods: { methods: {
close() { close() {
this.show = false; this.show = false;

View file

@ -19,6 +19,7 @@
<mk-button @click="readAllMessagingMessages">{{ $t('markAsReadAllTalkMessages') }}</mk-button> <mk-button @click="readAllMessagingMessages">{{ $t('markAsReadAllTalkMessages') }}</mk-button>
</div> </div>
<div class="_content"> <div class="_content">
<mk-switch v-model="imageNewTab">{{ $t('openImageInNewTab') }}</mk-switch>
<mk-switch v-model="disableAnimatedMfm">{{ $t('disableAnimatedMfm') }}</mk-switch> <mk-switch v-model="disableAnimatedMfm">{{ $t('disableAnimatedMfm') }}</mk-switch>
<mk-switch v-model="reduceAnimation">{{ $t('reduceUiAnimation') }}</mk-switch> <mk-switch v-model="reduceAnimation">{{ $t('reduceUiAnimation') }}</mk-switch>
<mk-switch v-model="useOsNativeEmojis"> <mk-switch v-model="useOsNativeEmojis">
@ -96,6 +97,11 @@ export default Vue.extend({
get() { return this.$store.state.device.useOsNativeEmojis; }, get() { return this.$store.state.device.useOsNativeEmojis; },
set(value) { this.$store.commit('device/set', { key: 'useOsNativeEmojis', value }); } set(value) { this.$store.commit('device/set', { key: 'useOsNativeEmojis', value }); }
}, },
imageNewTab: {
get() { return this.$store.state.device.imageNewTab; },
set(value) { this.$store.commit('device/set', { key: 'imageNewTab', value }); }
},
}, },
watch: { watch: {

View file

@ -38,6 +38,7 @@ const defaultDeviceSettings = {
theme: 'light', theme: 'light',
animation: true, animation: true,
animatedMfm: true, animatedMfm: true,
imageNewTab: false,
userData: {}, userData: {},
}; };