mirror of
https://iceshrimp.dev/limepotato/jormungandr-bite.git
synced 2024-11-29 05:17:39 -07:00
Implement image dialog
This commit is contained in:
parent
7bb49f1352
commit
caa850d52a
7 changed files with 82 additions and 2 deletions
|
@ -6,6 +6,7 @@ unreleased
|
|||
### ✨Improvements
|
||||
* 投稿詳細ページで前後の投稿を見れるように
|
||||
* 自分のfollowersノートはRenoteできるように
|
||||
* 画像ダイアログを実装
|
||||
* フォロー申請ページの調整
|
||||
* 壁紙設定の強化
|
||||
* 画面が狭い状態でMisskeyを起動した場合でも、画面幅が広がったときにウィジェットを表示するように
|
||||
|
|
|
@ -402,6 +402,7 @@ existingAcount: "既存のアカウント"
|
|||
regenerate: "再生成"
|
||||
fontSize: "フォントサイズ"
|
||||
noFollowRequests: "フォロー申請はありません"
|
||||
openImageInNewTab: "画像を新しいタブで開く"
|
||||
|
||||
_ago:
|
||||
unknown: "謎"
|
||||
|
|
54
src/client/components/image-viewer.vue
Normal file
54
src/client/components/image-viewer.vue
Normal 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>
|
|
@ -20,6 +20,7 @@ import Vue from 'vue';
|
|||
import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
|
||||
import i18n from '../i18n';
|
||||
import { getStaticImageUrl } from '../scripts/get-static-image-url';
|
||||
import ImageViewer from './image-viewer.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
i18n,
|
||||
|
@ -60,7 +61,16 @@ export default Vue.extend({
|
|||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
if (this.$store.state.device.imageNewTab) {
|
||||
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>
|
||||
<div class="mk-modal">
|
||||
<div class="mk-modal" v-hotkey.global="keymap">
|
||||
<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
|
||||
<div class="bg" ref="bg" v-if="show" @click="close()"></div>
|
||||
</transition>
|
||||
|
@ -20,6 +20,13 @@ export default Vue.extend({
|
|||
show: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
keymap(): any {
|
||||
return {
|
||||
'esc': this.close,
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.show = false;
|
||||
|
|
|
@ -19,6 +19,7 @@
|
|||
<mk-button @click="readAllMessagingMessages">{{ $t('markAsReadAllTalkMessages') }}</mk-button>
|
||||
</div>
|
||||
<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="reduceAnimation">{{ $t('reduceUiAnimation') }}</mk-switch>
|
||||
<mk-switch v-model="useOsNativeEmojis">
|
||||
|
@ -96,6 +97,11 @@ export default Vue.extend({
|
|||
get() { return this.$store.state.device.useOsNativeEmojis; },
|
||||
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: {
|
||||
|
|
|
@ -38,6 +38,7 @@ const defaultDeviceSettings = {
|
|||
theme: 'light',
|
||||
animation: true,
|
||||
animatedMfm: true,
|
||||
imageNewTab: false,
|
||||
userData: {},
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in a new issue