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

콜아웃 색상과 모바일 설정 패널 정리

Browse Source
This commit is contained in:
zenn
2026-06-04 10:38:49 +09:00
parent b38fc9f154
commit 24611af8b6
14 changed files with 89 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
components/admin/AdminBlockEditor.vue
View File

@@ -49,10 +49,42 @@ const calloutBackgroundOptions = [
{ value: 'green', label: '초록' },
{ value: 'yellow', label: '노랑' },
{ value: 'red', label: '빨강' },
{ value: 'purple', label: '보라' },
{ value: 'pink', label: '핑크' }
{ value: 'purple', label: '보라' }
]
/**
* 콜아웃 배경 스와치 색상을 반환한다.
* @param {string} background - 배경 키
* @returns {string} CSS 배경색
*/
const getCalloutBackgroundSwatch = (background) => {
if (background === 'gray') {
return 'color-mix(in srgb, #050505 10%, #ffffff)'
}
if (background === 'blue') {
return 'color-mix(in srgb, #0055ff 10%, #ffffff)'
}
if (background === 'green') {
return 'color-mix(in srgb, #16ae68 10%, #ffffff)'
}
if (background === 'yellow') {
return 'color-mix(in srgb, #ffff00 10%, #ffffff)'
}
if (background === 'red') {
return 'color-mix(in srgb, #ff0000 10%, #ffffff)'
}
if (background === 'purple') {
return 'color-mix(in srgb, #8800ff 10%, #ffffff)'
}
return 'color-mix(in srgb, #0055ff 10%, #ffffff)'
}
const blockCommands = [
{
type: 'paragraph',
@@ -2170,15 +2202,7 @@ defineExpose({
></span>
<span
class="relative block size-full rounded-full border-2 border-white ring-1 ring-black/10"
:style="{
background: block.calloutBackground === 'gray' ? 'rgba(100,116,139,0.28)'
: block.calloutBackground === 'blue' ? 'rgba(59,130,246,0.3)'
: block.calloutBackground === 'green' ? 'rgba(34,197,94,0.3)'
: block.calloutBackground === 'yellow' ? 'rgba(245,158,11,0.34)'
: block.calloutBackground === 'red' ? 'rgba(239,68,68,0.3)'
: block.calloutBackground === 'purple' ? 'rgba(168,85,247,0.3)'
: 'rgba(236,72,153,0.3)'
}"
:style="{ background: getCalloutBackgroundSwatch(block.calloutBackground) }"
></span>
</button>
@@ -2197,15 +2221,7 @@ defineExpose({
>
<span
class="size-[1.4rem] rounded-full border border-black/10"
:style="{
background: backgroundOption.value === 'gray' ? 'rgba(100,116,139,0.28)'
: backgroundOption.value === 'blue' ? 'rgba(59,130,246,0.3)'
: backgroundOption.value === 'green' ? 'rgba(34,197,94,0.3)'
: backgroundOption.value === 'yellow' ? 'rgba(245,158,11,0.34)'
: backgroundOption.value === 'red' ? 'rgba(239,68,68,0.3)'
: backgroundOption.value === 'purple' ? 'rgba(168,85,247,0.3)'
: 'rgba(236,72,153,0.3)'
}"
:style="{ background: getCalloutBackgroundSwatch(backgroundOption.value) }"
></span>
</button>
</li>

12
components/admin/AdminEditorBlockPanel.vue
View File

@@ -2,6 +2,7 @@
import { getImageAltAttribute, getImageDefaultAltLabel } from '../../lib/markdown-image.js'
import {
CALLOUT_BACKGROUND_OPTIONS,
CALLOUT_BACKGROUND_SWATCHES,
CALLOUT_EMOJI_OPTIONS,
QUOTE_BACKGROUND_LABELS,
QUOTE_BACKGROUND_OPTIONS,
@@ -42,18 +43,11 @@ const backgroundLabels = {
green: '초록',
yellow: '노랑',
red: '빨강',
purple: '보라',
pink: '분홍'
purple: '보라'
}
const backgroundSwatches = {
gray: 'rgba(100,116,139,0.28)',
blue: 'rgba(59,130,246,0.3)',
green: 'rgba(34,197,94,0.3)',
yellow: 'rgba(245,158,11,0.34)',
red: 'rgba(239,68,68,0.3)',
purple: 'rgba(168,85,247,0.3)',
pink: 'rgba(236,72,153,0.28)'
...CALLOUT_BACKGROUND_SWATCHES
}
const languageOptions = ['', 'javascript', 'html', 'css', 'vue', 'json', 'bash', 'markdown', 'sql']

4
components/admin/AdminPostForm.vue
View File

@@ -1621,11 +1621,11 @@ defineExpose({
</div>
<aside
class="admin-post-form__settings flex h-screen shrink-0 flex-col overflow-hidden border-[#e3e6e8] bg-white transition-[width,border-color] duration-300 ease-out"
class="admin-post-form__settings flex h-screen shrink-0 flex-col overflow-hidden border-[#e3e6e8] bg-white transition-[width,border-color] duration-300 ease-out max-lg:fixed max-lg:inset-y-0 max-lg:right-0 max-lg:z-50 max-lg:max-w-[calc(100vw-40px)] max-lg:shadow-[-18px_0_60px_rgba(15,23,42,0.14)]"
:class="isSettingsOpen ? 'w-[420px] border-l' : 'w-0 border-l-0'"
:aria-hidden="!isSettingsOpen"
>
<div class="admin-post-form__settings-inner relative flex h-full w-[420px] flex-col">
<div class="admin-post-form__settings-inner relative flex h-full w-[420px] max-lg:w-full flex-col">
<div class="admin-post-form__settings-header flex h-[56px] shrink-0 items-center justify-between px-6">
<h2 class="admin-post-form__settings-title text-xl font-bold text-black">
게시물 설정

2
components/content/ContentMarkdownEditableInline.vue
View File

@@ -499,6 +499,8 @@ const getNavigationElements = () => {
}
return [...root.querySelectorAll('[data-source-line]')]
.filter((element) => element.getAttribute('contenteditable') === 'true'
|| element.getAttribute('data-preview-card-block') === 'true')
.sort((left, right) => Number(left.dataset.sourceLine) - Number(right.dataset.sourceLine))
}

20
components/content/ProseCallout.vue
View File

@@ -35,10 +35,6 @@ const backgroundClass = computed(() => {
return 'prose-callout--purple'
}
if (props.background === 'pink') {
return 'prose-callout--pink'
}
return 'prose-callout--blue'
})
</script>
@@ -59,30 +55,26 @@ const backgroundClass = computed(() => {
<style scoped>
.prose-callout--gray {
background: rgba(100, 116, 139, 0.12);
background: color-mix(in srgb, #050505 10%, #ffffff);
}
.prose-callout--blue {
background: rgba(59, 130, 246, 0.14);
background: color-mix(in srgb, #0055ff 10%, #ffffff);
}
.prose-callout--green {
background: rgba(34, 197, 94, 0.14);
background: color-mix(in srgb, #16ae68 10%, #ffffff);
}
.prose-callout--yellow {
background: rgba(245, 158, 11, 0.16);
background: color-mix(in srgb, #ffff00 10%, #ffffff);
}
.prose-callout--red {
background: rgba(239, 68, 68, 0.14);
background: color-mix(in srgb, #ff0000 10%, #ffffff);
}
.prose-callout--purple {
background: rgba(168, 85, 247, 0.14);
}
.prose-callout--pink {
background: rgba(236, 72, 153, 0.14);
background: color-mix(in srgb, #8800ff 10%, #ffffff);
}
</style>