Implement image dialog
This commit is contained in:
parent
dc39caed1e
commit
091923764d
|
@ -6,6 +6,7 @@ unreleased
|
||||||
### ✨Improvements
|
### ✨Improvements
|
||||||
* 投稿詳細ページで前後の投稿を見れるように
|
* 投稿詳細ページで前後の投稿を見れるように
|
||||||
* 自分のfollowersノートはRenoteできるように
|
* 自分のfollowersノートはRenoteできるように
|
||||||
|
* 画像ダイアログを実装
|
||||||
* フォロー申請ページの調整
|
* フォロー申請ページの調整
|
||||||
* 壁紙設定の強化
|
* 壁紙設定の強化
|
||||||
* 画面が狭い状態でMisskeyを起動した場合でも、画面幅が広がったときにウィジェットを表示するように
|
* 画面が狭い状態でMisskeyを起動した場合でも、画面幅が広がったときにウィジェットを表示するように
|
||||||
|
|
|
@ -402,6 +402,7 @@ existingAcount: "既存のアカウント"
|
||||||
regenerate: "再生成"
|
regenerate: "再生成"
|
||||||
fontSize: "フォントサイズ"
|
fontSize: "フォントサイズ"
|
||||||
noFollowRequests: "フォロー申請はありません"
|
noFollowRequests: "フォロー申請はありません"
|
||||||
|
openImageInNewTab: "画像を新しいタブで開く"
|
||||||
|
|
||||||
_ago:
|
_ago:
|
||||||
unknown: "謎"
|
unknown: "謎"
|
||||||
|
|
|
@ -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>
|
|
@ -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();
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
|
@ -38,6 +38,7 @@ const defaultDeviceSettings = {
|
||||||
theme: 'light',
|
theme: 'light',
|
||||||
animation: true,
|
animation: true,
|
||||||
animatedMfm: true,
|
animatedMfm: true,
|
||||||
|
imageNewTab: false,
|
||||||
userData: {},
|
userData: {},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue