enhance(frontend): モデレーターはノートに添付された画像上から直接NSFW設定できるように

This commit is contained in:
syuilo 2023-05-07 18:18:32 +09:00
parent 8310d929dc
commit 448a933f77
2 changed files with 30 additions and 0 deletions

View file

@ -49,6 +49,7 @@
- データセーバーモードを追加 - データセーバーモードを追加
* 画像が全て隠れた状態で表示されるようになります * 画像が全て隠れた状態で表示されるようになります
- 閲覧注意設定された画像は表示した状態でもそれが閲覧注意だと分かる表示をするように - 閲覧注意設定された画像は表示した状態でもそれが閲覧注意だと分かる表示をするように
- モデレーターはートに添付された画像上から直接NSFW設定できるように
- 1枚だけのメディアリストの画像のアスペクト比を画像に応じて縦長にするように - 1枚だけのメディアリストの画像のアスペクト比を画像に応じて縦長にするように
- プロフィール設定「追加情報」の項目の削除と並び替えができるように - プロフィール設定「追加情報」の項目の削除と並び替えができるように
- 新しい実績を追加 - 新しい実績を追加

View file

@ -23,6 +23,7 @@
<div v-if="image.isSensitive" :class="$style.indicator" style="color: var(--warn);">NSFW</div> <div v-if="image.isSensitive" :class="$style.indicator" style="color: var(--warn);">NSFW</div>
</div> </div>
<button v-tooltip="i18n.ts.hide" :class="$style.hide" class="_button" @click="hide = true"><i class="ti ti-eye-off"></i></button> <button v-tooltip="i18n.ts.hide" :class="$style.hide" class="_button" @click="hide = true"><i class="ti ti-eye-off"></i></button>
<button :class="$style.menu" class="_button" @click.stop="showMenu"><i class="ti ti-dots"></i></button>
</div> </div>
</template> </template>
@ -34,6 +35,8 @@ import bytes from '@/filters/bytes';
import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue'; import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import * as os from '@/os';
import { iAmModerator } from '@/account';
const props = defineProps<{ const props = defineProps<{
image: misskey.entities.DriveFile; image: misskey.entities.DriveFile;
@ -57,6 +60,17 @@ watch(() => props.image, () => {
deep: true, deep: true,
immediate: true, immediate: true,
}); });
function showMenu(ev: MouseEvent) {
os.popupMenu([...(iAmModerator ? [{
text: i18n.ts.markAsSensitive,
icon: 'ti ti-eye-off',
action: () => {
os.apiWithDialog('drive/files/update', { fileId: props.image.id, isSensitive: true });
},
}] : [])], ev.currentTarget ?? ev.target);
}
</script> </script>
<style lang="scss" module> <style lang="scss" module>
@ -106,6 +120,21 @@ watch(() => props.image, () => {
right: 12px; right: 12px;
} }
.menu {
display: block;
position: absolute;
border-radius: 6px;
background-color: rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
color: #fff;
font-size: 0.8em;
padding: 6px 8px;
text-align: center;
bottom: 12px;
right: 12px;
}
.imageContainer { .imageContainer {
display: block; display: block;
cursor: zoom-in; cursor: zoom-in;