zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

콜아웃 아이콘 토글 UI 정리

Browse Source
This commit is contained in:
zenn
2026-07-24 16:35:31 +09:00
parent d67f735978
commit 73248da016
6 changed files with 29 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
components/admin/AdminEditorBlockPanel.vue
View File

@@ -536,14 +536,23 @@ const onPanelFocusOut = (event) => {
>
</label>
<label class="flex cursor-pointer items-center justify-between gap-3 rounded border border-[#edf0f2] bg-[#fafafa] px-3 py-3 text-sm font-semibold text-[#394047]">
<span>아이콘 표시</span>
<input
class="size-4 rounded border-[#c8ced3] text-[#15171a]"
type="checkbox"
:checked="panel.calloutEmojiEnabled"
@change="emit('update-callout-options', { calloutEmojiEnabled: $event.target.checked })"
>
<label class="admin-editor-block-panel__callout-icon-toggle flex cursor-pointer items-center justify-between gap-4 border-t border-[#e3e6e8] pt-5 text-sm">
<span class="admin-editor-block-panel__callout-icon-toggle-copy flex min-w-0 items-center gap-3">
<span class="admin-editor-block-panel__callout-icon-toggle-label font-bold text-[#15171a]">
아이콘 표시
</span>
</span>
<span class="admin-editor-block-panel__callout-icon-toggle-control relative inline-flex h-7 w-12 shrink-0 items-center">
<input
class="peer sr-only"
type="checkbox"
aria-label="아이콘 표시"
:checked="panel.calloutEmojiEnabled"
@change="emit('update-callout-options', { calloutEmojiEnabled: $event.target.checked })"
>
<span class="absolute inset-0 rounded-full bg-[#c8ced3] transition-colors peer-checked:bg-[#15171a]" aria-hidden="true" />
<span class="relative ml-1 size-5 rounded-full bg-white shadow transition-transform peer-checked:translate-x-5" aria-hidden="true" />
</span>
</label>
<div class="grid gap-2">
@@ -551,12 +560,11 @@ const onPanelFocusOut = (event) => {
아이콘
</p>
<input
class="rounded border border-[#d7dde2] bg-[#eff1f2] px-3 py-2 text-sm text-[#15171a] outline-none transition-colors focus:border-[#8e9cac] disabled:opacity-50"
class="rounded border border-[#d7dde2] bg-[#eff1f2] px-3 py-2 text-sm text-[#15171a] outline-none transition-colors focus:border-[#8e9cac]"
:value="panel.calloutEmoji"
type="text"
maxlength="4"
placeholder="💡"
:disabled="!panel.calloutEmojiEnabled"
@input="emit('update-callout-options', { calloutEmojiEnabled: true, calloutEmoji: $event.target.value })"
>
<div class="grid grid-cols-5 gap-2">
@@ -566,7 +574,7 @@ const onPanelFocusOut = (event) => {
class="grid h-10 place-items-center rounded border text-lg transition"
:class="panel.calloutEmoji === emoji && panel.calloutEmojiEnabled ? 'border-[#15171a] bg-white' : 'border-[#dce0e5] bg-[#fafafa] hover:bg-white'"
type="button"
:disabled="!panel.calloutEmojiEnabled"
@mousedown.prevent
@click="emit('update-callout-options', { calloutEmojiEnabled: true, calloutEmoji: emoji })"
>
{{ emoji }}