admin/momentry_studio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: People context menu match WordPress design

Browse Source
This commit is contained in:
Momentry Studio
2026-06-14 23:03:34 +08:00
parent 99761c0072
commit 88ab58e56d
1 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/PeopleView.vue
View File

@@ -104,13 +104,12 @@
</div>
</div>
<div v-if="ctxMenu.show" class="ctx-menu" :style="{ left: ctxMenu.x + 'px', top: ctxMenu.y + 'px' }">
<div class="ctx-item" @click="ctxAction('star')">{{ ctxMenu.person?.starred ? '☆ Unstar' : '★ Star' }}</div>
<div class="ctx-item" @click="ctxAction('ignore')">{{ ctxMenu.person?.ignored ? '↺ Unignore' : '⊘ Ignore' }}</div>
<div class="ctx-item" @click="ctxAction('rename')">✎ Rename</div>
<div class="ctx-item" @click="ctxAction('merge')">⇄ Merge</div>
<div class="ctx-divider"></div>
<div class="ctx-item danger" @click="ctxAction('delete')">✕ Delete</div>
<div v-if="ctxMenu.show" class="ms-ctx-menu" :style="{ left: ctxMenu.x + 'px', top: ctxMenu.y + 'px' }">
<button class="ms-ctx-item" @click="ctxAction('star')">{{ ctxMenu.person?.starred ? '☆ 取消重要人物' : '★ 標為重要人物' }}</button>
<hr class="ms-ctx-menu-divider">
<button class="ms-ctx-item" @click="ctxAction('rename')">✎ 編輯名稱</button>
<button class="ms-ctx-item" @click="ctxAction('merge')">⇄ 已有此人物</button>
<button class="ms-ctx-item ms-ctx-danger" @click="ctxAction('ignore')">✕ 略過此人物</button>
</div>
<VideoPlayer v-if="playing" :file-uuid="currentVideo.fileUuid" :start-time="currentVideo.startTime" :end-time="currentVideo.endTime" :title="currentVideo.title" @close="playing = false" />
@@ -328,9 +327,11 @@ h1 { margin: 0; }
.ms-modal-actions { display: flex; justify-content: flex-end; }
h2 { margin: 0 0 16px; font-size: 1rem; }
.ms-merge-grid { display: flex; flex-wrap: wrap; gap: 16px; max-height: 50vh; overflow-y: auto; }
.ctx-menu { position: fixed; z-index: 9999; background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.15); padding: 6px; min-width: 140px; }
.ctx-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; border-radius: 8px; font-size: 0.85rem; color: #222; }
.ctx-item:hover { background: #f3f4f6; }
.ctx-item.danger { color: #d93025; }
.ctx-divider { height: 1px; background: #eee; margin: 4px 8px; }
.ms-ctx-menu { display: none; position: fixed; z-index: 99999; background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.15); padding: 6px; min-width: 160px; font-size: 13px; color: #222; }
.ms-ctx-menu.show { display: block; }
.ms-ctx-menu-item, .ms-ctx-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; border-radius: 8px; border: none; background: transparent; width: 100%; text-align: left; font-size: 13px; color: #222; font-family: inherit; }
.ms-ctx-menu-item:hover, .ms-ctx-item:hover { background: #f3f4f6; }
.ms-ctx-menu-item.danger, .ms-ctx-item.ms-ctx-danger { color: #d93025; }
.ms-ctx-menu-item.danger:hover, .ms-ctx-item.ms-ctx-danger:hover { background: #fce8e6; }
.ms-ctx-menu-divider { height: 1px; background: #eee; margin: 4px 8px; }
</style>