Merge branch 'develop' into hazelnoot/following-timeline

This commit is contained in:
Hazel K 2024-10-02 11:45:09 -04:00
commit 705ae79eb1
23 changed files with 132 additions and 29 deletions

View file

@ -7,7 +7,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-show="props.modelValue.length != 0" :class="$style.root">
<Sortable :modelValue="props.modelValue" :class="$style.files" itemKey="id" :animation="150" :delay="100" :delayOnTouchOnly="true" @update:modelValue="v => emit('update:modelValue', v)">
<template #item="{element}">
<div :class="$style.file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
<div
:class="$style.file"
role="button"
tabindex="0"
@click="showFileMenu(element, $event)"
@keydown.space.enter="showFileMenu(element, $event)"
@contextmenu.prevent="showFileMenu(element, $event)"
>
<MkDriveFileThumbnail :data-id="element.id" :class="$style.thumbnail" :file="element" fit="cover"/>
<div v-if="element.isSensitive" :class="$style.sensitive">
<i class="ti ti-eye-exclamation" style="margin: auto;"></i>
@ -132,7 +139,7 @@ async function crop(file: Misskey.entities.DriveFile): Promise<void> {
emit('replaceFile', file, newFile);
}
function showFileMenu(file: Misskey.entities.DriveFile, ev: MouseEvent): void {
function showFileMenu(file: Misskey.entities.DriveFile, ev: MouseEvent | KeyboardEvent): void {
if (menuShowing) return;
const isImage = file.type.startsWith('image/');
@ -187,6 +194,10 @@ function showFileMenu(file: Misskey.entities.DriveFile, ev: MouseEvent): void {
border-radius: var(--radius-xs);
overflow: hidden;
cursor: move;
&:focus-visible {
outline-offset: 4px;
}
}
.thumbnail {

View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div v-if="instance" :class="$style.root">
<div :class="[$style.main, $style.panel]">
<img :src="instance.iconUrl || '/apple-touch-icon.png'" alt="" :class="$style.mainIcon"/>
<img :src="instance.sidebarLogoUrl || instance.iconUrl || '/apple-touch-icon.png'" alt="" :class="instance.sidebarLogoUrl ? $style.wideIcon : $style.mainIcon"/>
<button class="_button _acrylic" :class="$style.mainMenu" @click="showMenu"><i class="ti ti-dots"></i></button>
<div :class="$style.mainFg">
<h1 :class="$style.mainTitle">
@ -126,6 +126,14 @@ function showMenu(ev: MouseEvent) {
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}
.wideIcon {
min-width: 85px;
max-width: 60%;
margin-top: -47px;
vertical-align: bottom;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}
.mainMenu {
position: absolute;
top: 16px;