This commit is contained in:
syuilo 2023-05-30 14:34:55 +09:00
parent f091007882
commit a3a47b8d35
3 changed files with 16 additions and 28 deletions

View file

@ -32,7 +32,6 @@
<div v-if="image.comment" :class="$style.indicator">ALT</div> <div v-if="image.comment" :class="$style.indicator">ALT</div>
<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.stop.prevent="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> <button :class="$style.menu" class="_button" @click.stop="showMenu"><i class="ti ti-dots"></i></button>
</template> </template>
</div> </div>
@ -79,9 +78,15 @@ watch(() => props.image, () => {
}); });
function showMenu(ev: MouseEvent) { function showMenu(ev: MouseEvent) {
os.popupMenu([...(iAmModerator ? [{ os.popupMenu([{
text: i18n.ts.markAsSensitive, text: i18n.ts.hide,
icon: 'ti ti-eye-off', icon: 'ti ti-eye-off',
action: () => {
hide = true;
},
}, ...(iAmModerator ? [{
text: i18n.ts.markAsSensitive,
icon: 'ti ti-eye-exclamation',
action: () => { action: () => {
os.apiWithDialog('drive/files/update', { fileId: props.image.id, isSensitive: true }); os.apiWithDialog('drive/files/update', { fileId: props.image.id, isSensitive: true });
}, },
@ -122,21 +127,6 @@ function showMenu(ev: MouseEvent) {
background-size: 16px 16px; background-size: 16px 16px;
} }
.hide {
display: block;
position: absolute;
border-radius: 6px;
background-color: var(--accentedBg);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
color: var(--accent);
font-size: 0.8em;
padding: 6px 8px;
text-align: center;
top: 12px;
right: 12px;
}
.menu { .menu {
display: block; display: block;
position: absolute; position: absolute;
@ -148,8 +138,8 @@ function showMenu(ev: MouseEvent) {
font-size: 0.8em; font-size: 0.8em;
padding: 6px 8px; padding: 6px 8px;
text-align: center; text-align: center;
bottom: 12px; bottom: 10px;
right: 12px; right: 10px;
} }
.imageContainer { .imageContainer {
@ -166,12 +156,10 @@ function showMenu(ev: MouseEvent) {
.indicators { .indicators {
display: inline-flex; display: inline-flex;
position: absolute; position: absolute;
top: 12px; top: 10px;
left: 12px; left: 10px;
text-align: center;
pointer-events: none; pointer-events: none;
opacity: .5; opacity: .5;
font-size: 14px;
gap: 6px; gap: 6px;
} }
@ -182,7 +170,7 @@ function showMenu(ev: MouseEvent) {
color: var(--accentLighten); color: var(--accentLighten);
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: 0.8em;
padding: 2px 6px; padding: 2px 5px;
} }
</style> </style>

View file

@ -93,7 +93,7 @@ function showFileMenu(file, ev: MouseEvent) {
action: () => { rename(file); }, action: () => { rename(file); },
}, { }, {
text: file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive, text: file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
icon: file.isSensitive ? 'ti ti-eye-off' : 'ti ti-eye', icon: file.isSensitive ? 'ti ti-eye-exclamation' : 'ti ti-eye',
action: () => { toggleSensitive(file); }, action: () => { toggleSensitive(file); },
}, { }, {
text: i18n.ts.describeFile, text: i18n.ts.describeFile,

View file

@ -73,7 +73,7 @@ export function getDriveFileMenu(file: Misskey.entities.DriveFile) {
action: () => rename(file), action: () => rename(file),
}, { }, {
text: file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive, text: file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
icon: file.isSensitive ? 'ti ti-eye' : 'ti ti-eye-off', icon: file.isSensitive ? 'ti ti-eye' : 'ti ti-eye-exclamation',
action: () => toggleSensitive(file), action: () => toggleSensitive(file),
}, { }, {
text: i18n.ts.describeFile, text: i18n.ts.describeFile,