usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🎨

This commit is contained in:
tamaina 2025-08-31 03:51:17 +09:00
parent 24338f2473
commit ad3c22de5e
1 changed files with 45 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
packages/frontend/src/pages/qr.read.vue
View File

@ -13,38 +13,45 @@ SPDX-License-Identifier: AGPL-3.0-only
'--MI-QrReadVideoHeight': 'min(calc(var(--MI-QrReadViewHeight) * 0.3), 512px)',
}"
>
<div :class="$style.view">
<video ref="videoEl" :class="$style.video" autoplay muted playsinline></video>
<div ref="overlayEl" :class="$style.overlay"></div>
<div v-if="scannerInstance" :class="$style.controls">
<MkButton v-if="qrStarted" v-tooltip="i18n.ts._qr.stopQr" iconOnly @click="stopQr"><i class="ti ti-player-play"></i></MkButton>
<MkButton v-else v-tooltip="i18n.ts._qr.startQr" iconOnly danger @click="startQr"><i class="ti ti-player-pause"></i></MkButton>
<MkStickyContainer>
<template #header>
<div :class="$style.view">
<video ref="videoEl" :class="$style.video" autoplay muted playsinline></video>
<div ref="overlayEl" :class="$style.overlay"></div>
<div v-if="scannerInstance" :class="$style.controls">
<MkButton v-if="qrStarted" v-tooltip="i18n.ts._qr.stopQr" iconOnly @click="stopQr"><i class="ti ti-player-play"></i></MkButton>
<MkButton v-else v-tooltip="i18n.ts._qr.startQr" iconOnly danger @click="startQr"><i class="ti ti-player-pause"></i></MkButton>
<MkButton v-tooltip="i18n.ts._qr.chooseCamera" iconOnly @click="chooseCamera"><i class="ti ti-camera-rotate"></i></MkButton>
<MkButton v-tooltip="i18n.ts._qr.chooseCamera" iconOnly @click="chooseCamera"><i class="ti ti-camera-rotate"></i></MkButton>
<MkButton v-if="!flashCanToggle" v-tooltip="i18n.ts._qr.cannotToggleFlash" iconOnly disabled><i class="ti ti-bolt"></i></MkButton>
<MkButton v-else-if="!flash" v-tooltip="i18n.ts._qr.turnOnFlash" iconOnly @click="toggleFlash(true)"><i class="ti ti-bolt-off"></i></MkButton>
<MkButton v-else v-tooltip="i18n.ts._qr.turnOffFlash" iconOnly @click="toggleFlash(false)"><i class="ti ti-bolt-filled"></i></MkButton>
<MkButton v-if="!flashCanToggle" v-tooltip="i18n.ts._qr.cannotToggleFlash" iconOnly disabled><i class="ti ti-bolt"></i></MkButton>
<MkButton v-else-if="!flash" v-tooltip="i18n.ts._qr.turnOnFlash" iconOnly @click="toggleFlash(true)"><i class="ti ti-bolt-off"></i></MkButton>
<MkButton v-else v-tooltip="i18n.ts._qr.turnOffFlash" iconOnly @click="toggleFlash(false)"><i class="ti ti-bolt-filled"></i></MkButton>
</div>
</div>
</template>
<div
:class="['_spacer', $style.contents]"
:style="{
'--MI_SPACER-w': '800px'
}"
>
<MkStickyContainer>
<template #header>
<MkTab v-model="tab" :class="$style.tab">
<option value="users">{{ i18n.ts.users }}</option>
<option value="notes">{{ i18n.ts.notes }}</option>
</MkTab>
</template>
<div v-if="tab === 'users'" :class="[$style.users, '_margin']" style="padding-bottom: var(--MI-margin);">
<MkUserInfo v-for="user in users" :key="user.id" :user="user"/>
</div>
<div v-else-if="tab === 'notes'" class="_margin _gaps" style="padding-bottom: var(--MI-margin);">
<MkNote v-for="note in notes" :key="note.id" :note="note" :class="$style.note"/>
</div>
</MkStickyContainer>
</div>
</div>
<div
class="_spacer"
:style="{
'--MI-stickyTop': 'calc(var(--MI-stickyTop, 0px) + var(--MI-QrReadVideoHeight, 0px))',
'--MI_SPACER-w': '800px'
}"
>
<MkTab v-model="tab" :class="$style.tab">
<option value="users">{{ i18n.ts.users }}</option>
<option value="notes">{{ i18n.ts.notes }}</option>
</MkTab>
<div v-if="tab === 'users'" :class="[$style.users, '_margin']" style="padding-bottom: var(--MI-margin);">
<MkUserInfo v-for="user in users" :key="user.id" :user="user"/>
</div>
<div v-else-if="tab === 'notes'" class="_margin _gaps" style="padding-bottom: var(--MI-margin);">
<MkNote v-for="note in notes" :key="note.id" :note="note" :class="$style.note"/>
</div>
</div>
</MkStickyContainer>
</div>
</template>
@ -340,6 +347,15 @@ html[data-color-scheme=light] .view {
background-image: linear-gradient(45deg, var(--c) 16.67%, var(--MI_THEME-bg) 16.67%, var(--MI_THEME-bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--MI_THEME-bg) 66.67%, var(--MI_THEME-bg) 100%);
}
.contents {
padding-top: calc(var(--MI-margin) / 2);
}
.tab {
padding: calc(var(--MI-margin) / 2) 0;
background: var(--MI_THEME-bg);
}
.users {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));