pretty-print2
This commit is contained in:
parent
b417000cc1
commit
9cbd5e4288
|
|
@ -240,6 +240,8 @@ const AdminPage: Component<AdminPageProps> = (props) => {
|
|||
const [successMessage, setSuccessMessage] = createSignal<string | null>(null)
|
||||
const [showBodyModal, setShowBodyModal] = createSignal(false)
|
||||
const [selectedShoutBody, setSelectedShoutBody] = createSignal<string>('')
|
||||
const [showMediaBodyModal, setShowMediaBodyModal] = createSignal(false)
|
||||
const [selectedMediaBody, setSelectedMediaBody] = createSignal<string>('')
|
||||
|
||||
// Переменные среды
|
||||
const [envSections, setEnvSections] = createSignal<EnvSection[]>([])
|
||||
|
|
@ -1325,6 +1327,39 @@ const AdminPage: Component<AdminPageProps> = (props) => {
|
|||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Компонент модального окна для просмотра содержимого media.body
|
||||
*/
|
||||
const MediaBodyModal: Component = () => {
|
||||
const language = () => detectLanguage(selectedMediaBody())
|
||||
const formattedCode = () => formatCode(selectedMediaBody())
|
||||
|
||||
return (
|
||||
<Show when={showMediaBodyModal()}>
|
||||
<div class="modal-overlay" onClick={() => setShowMediaBodyModal(false)}>
|
||||
<div class="modal-content" onClick={(e) => e.stopPropagation()}>
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">
|
||||
<h3>Содержимое media.body</h3>
|
||||
<span class="language-badge">
|
||||
{language() === 'markup' ? 'HTML' :
|
||||
language() === 'json' ? 'JSON' :
|
||||
'Plain Text'}
|
||||
</span>
|
||||
</div>
|
||||
<button class="close-button" onClick={() => setShowMediaBodyModal(false)}>×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<pre class="body-content">
|
||||
<code class={`language-${language()}`} innerHTML={formattedCode()} />
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Обработчик изменения страницы для публикаций
|
||||
* @param page - Номер страницы
|
||||
|
|
@ -1667,7 +1702,26 @@ const AdminPage: Component<AdminPageProps> = (props) => {
|
|||
</td>
|
||||
<td>
|
||||
<Show when={shout.media && shout.media.length > 0}>
|
||||
<span class="media-count">{shout.media!.length} файл(ов)</span>
|
||||
<div style="display: flex; flex-direction: column; gap: 4px;">
|
||||
<For each={shout.media}>
|
||||
{(mediaItem, idx) => (
|
||||
<div style="display: flex; align-items: center; gap: 6px;">
|
||||
<span class="media-count">{mediaItem.title || `media[${idx()}]`}</span>
|
||||
<Show when={mediaItem.body}>
|
||||
<button
|
||||
class="edit-button"
|
||||
style="padding: 2px 8px; font-size: 12px;"
|
||||
title="Показать содержимое body"
|
||||
onClick={() => {
|
||||
setSelectedMediaBody(mediaItem.body)
|
||||
setShowMediaBodyModal(true)
|
||||
}}
|
||||
>👁 body</button>
|
||||
</Show>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={!shout.media || shout.media.length === 0}>
|
||||
<span class="no-data">-</span>
|
||||
|
|
@ -1697,6 +1751,7 @@ const AdminPage: Component<AdminPageProps> = (props) => {
|
|||
</Show>
|
||||
|
||||
<BodyModal />
|
||||
<MediaBodyModal />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<svg width="175" height="32" viewBox="0 0 175 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="172" height="32" viewBox="0 0 175 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- D -->
|
||||
<path d="M24.51 28.16H19.78V23H5.074V28.16H0.344V18.055H2.881C3.11033 17.7397 3.397 17.2093 3.741 16.464C4.11367 15.69 4.472 14.6437 4.816 13.325C5.18867 12.0063 5.504 10.3723 5.762 8.423C6.02 6.47367 6.149 4.166 6.149 1.5H21.113V18.055H24.51V28.16ZM15.523 18.313V6.23H11.008C10.9507 7.262 10.8503 8.36567 10.707 9.541C10.5637 10.6877 10.3773 11.8057 10.148 12.895C9.94733 13.9843 9.70367 15.002 9.417 15.948C9.13033 16.894 8.815 17.6823 8.471 18.313H15.523Z" fill="currentColor"/>
|
||||
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
|
|
@ -1,4 +1,4 @@
|
|||
<svg width="140" height="32" viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="96" height="32" viewBox="0 0 96 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- p (без перекладины, чистая петля) -->
|
||||
<path d="M15 28V6C15 3 20 3 20 6V16C20 19 15 19 15 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
170
panel/styles.css
170
panel/styles.css
|
|
@ -622,9 +622,9 @@ tr:hover {
|
|||
flex-wrap: wrap;
|
||||
gap: var(--spacing-4);
|
||||
padding: var(--spacing-4);
|
||||
background-color: var(--primary-light);
|
||||
border-radius: var(--border-radius-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
background: #ededed;
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
|
|
@ -644,53 +644,52 @@ tr:hover {
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
border: 1px solid var(--border-color);
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-medium);
|
||||
cursor: pointer;
|
||||
transition: var(--transition-fast);
|
||||
border-radius: var(--border-radius-md);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pagination-button:hover:not(:disabled) {
|
||||
background-color: var(--primary-light);
|
||||
border-color: var(--primary-color);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.pagination-button:focus-visible {
|
||||
outline: 2px solid var(--primary-color);
|
||||
outline-offset: 2px;
|
||||
min-width: 44px;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
background: #181818;
|
||||
color: #fff;
|
||||
border: 1px solid #222;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
margin-bottom: 8px;
|
||||
transition: background 0.15s, color 0.15s, border 0.15s;
|
||||
}
|
||||
|
||||
.pagination-button.active {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--bg-color);
|
||||
border-color: var(--primary-color);
|
||||
font-weight: var(--font-semibold);
|
||||
background: #fff;
|
||||
color: #111;
|
||||
border: 2px solid #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pagination-button:hover:not(:disabled) {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border-color: #111;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.pagination-button:disabled {
|
||||
background: #aaa;
|
||||
color: #fff;
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
background-color: var(--primary-light);
|
||||
border-color: #888;
|
||||
}
|
||||
|
||||
.pagination-ellipsis {
|
||||
display: inline-flex;
|
||||
background: transparent;
|
||||
color: #888;
|
||||
min-width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 36px;
|
||||
padding: var(--spacing-2);
|
||||
color: var(--text-secondary);
|
||||
user-select: none;
|
||||
border: none;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.pagination-per-page {
|
||||
|
|
@ -702,24 +701,11 @@ tr:hover {
|
|||
}
|
||||
|
||||
.pagination-per-page select {
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius-md);
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.pagination-per-page select:hover {
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.pagination-per-page select:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: var(--shadow-sm);
|
||||
background: #181818;
|
||||
color: #fff;
|
||||
border: 1px solid #222;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Поиск */
|
||||
|
|
@ -1414,3 +1400,75 @@ button:hover,
|
|||
outline: 2px solid var(--primary-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Убираем скругления и делаем строгий стиль для пагинации и кнопок */
|
||||
button,
|
||||
.pagination,
|
||||
.pagination-button,
|
||||
.pagination-per-page select {
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
background: #ededed;
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.pagination-button {
|
||||
min-width: 44px;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
background: #181818;
|
||||
color: #fff;
|
||||
border: 1px solid #222;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
margin-bottom: 8px;
|
||||
transition: background 0.15s, color 0.15s, border 0.15s;
|
||||
}
|
||||
|
||||
.pagination-button.active {
|
||||
background: #fff;
|
||||
color: #111;
|
||||
border: 2px solid #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pagination-button:hover:not(:disabled) {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border-color: #111;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.pagination-button:disabled {
|
||||
background: #aaa;
|
||||
color: #fff;
|
||||
opacity: 0.5;
|
||||
border-color: #888;
|
||||
}
|
||||
|
||||
.pagination-ellipsis {
|
||||
background: transparent;
|
||||
color: #888;
|
||||
min-width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.pagination-per-page select {
|
||||
background: #181818;
|
||||
color: #fff;
|
||||
border: 1px solid #222;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user