feat(frontend): 画像を動画と同様に簡単に隠せるように (#11127)

* feat: hide image easily

* docs(changelog): add 画像を動画と同様に簡単に隠せるように
This commit is contained in:
anatawa12 2023-07-06 08:49:07 +09:00 committed by GitHub
parent 9959f5bd04
commit dc8763215a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 0 deletions

View file

@ -23,6 +23,7 @@
- Fix: sparkle内にリンクを入れるとクリック不能になる問題の修正 - Fix: sparkle内にリンクを入れるとクリック不能になる問題の修正
- deck UIのカラムのメニューからアンテナとリストの編集画面を開けるように - deck UIのカラムのメニューからアンテナとリストの編集画面を開けるように
- ドライブファイルのメニューで画像をクロップできるように - ドライブファイルのメニューで画像をクロップできるように
- 画像を動画と同様に簡単に隠せるように
### Server ### Server
- JSON.parse の回数を削減することで、ストリーミングのパフォーマンスを向上しました - JSON.parse の回数を削減することで、ストリーミングのパフォーマンスを向上しました

View file

@ -33,6 +33,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 :class="$style.menu" class="_button" @click.stop="showMenu"><i class="ti ti-dots" style="vertical-align: middle;"></i></button> <button :class="$style.menu" class="_button" @click.stop="showMenu"><i class="ti ti-dots" style="vertical-align: middle;"></i></button>
<i class="ti ti-eye-off" :class="$style.hide" @click.stop="hide = true"></i>
</template> </template>
</div> </div>
</template> </template>
@ -113,6 +114,21 @@ function showMenu(ev: MouseEvent) {
align-items: center; align-items: center;
} }
.hide {
display: block;
position: absolute;
border-radius: 6px;
background-color: var(--fg);
color: var(--accentLighten);
font-size: 14px;
opacity: .5;
padding: 3px 6px;
text-align: center;
cursor: pointer;
top: 12px;
right: 12px;
}
.hiddenTextWrapper { .hiddenTextWrapper {
display: table-cell; display: table-cell;
text-align: center; text-align: center;