fix(help-center): replace inline content with standard navigation panel
Rewrite help panel to use the same grouped navigation pattern as the admin aside panel (details/summary with nav links). Remove inline keyboard shortcuts table and about section. Panel now shows permission-gated navigation groups: Documentation (docs viewer, API docs) and System (system info). Remove custom CSS — panel inherits existing app-sidebar-admin-nav styling. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,16 +1,6 @@
|
||||
{
|
||||
"Help": "Hilfe",
|
||||
"Documentation": "Dokumentation",
|
||||
"Keyboard shortcuts": "Tastenkuerzel",
|
||||
"Action": "Aktion",
|
||||
"Shortcut": "Kuerzel",
|
||||
"About": "Info",
|
||||
"Application": "Anwendung",
|
||||
"CoreCore Admin": "CoreCore Admin",
|
||||
"Open search": "Suche oeffnen",
|
||||
"Save in edit pages": "Speichern auf Bearbeitungsseiten",
|
||||
"Toggle sidebar": "Seitenleiste umschalten",
|
||||
"Switch sidebar section": "Seitenleisten-Bereich wechseln",
|
||||
"Back": "Zurueck",
|
||||
"Forward": "Vorwaerts"
|
||||
"System": "System",
|
||||
"System info": "Systeminfo"
|
||||
}
|
||||
|
||||
@@ -1,16 +1,6 @@
|
||||
{
|
||||
"Help": "Help",
|
||||
"Documentation": "Documentation",
|
||||
"Keyboard shortcuts": "Keyboard shortcuts",
|
||||
"Action": "Action",
|
||||
"Shortcut": "Shortcut",
|
||||
"About": "About",
|
||||
"Application": "Application",
|
||||
"CoreCore Admin": "CoreCore Admin",
|
||||
"Open search": "Open search",
|
||||
"Save in edit pages": "Save in edit pages",
|
||||
"Toggle sidebar": "Toggle sidebar",
|
||||
"Switch sidebar section": "Switch sidebar section",
|
||||
"Back": "Back",
|
||||
"Forward": "Forward"
|
||||
"System": "System",
|
||||
"System info": "System info"
|
||||
}
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
/**
|
||||
* Help Center module manifest.
|
||||
*
|
||||
* Adds a help icon to the sidebar with documentation links,
|
||||
* keyboard shortcuts reference, and system information.
|
||||
* Adds a help icon to the sidebar with navigation links
|
||||
* to documentation, API docs, and system information.
|
||||
*/
|
||||
return [
|
||||
'id' => 'help-center',
|
||||
@@ -31,13 +31,6 @@ return [
|
||||
'order' => 900,
|
||||
],
|
||||
],
|
||||
'layout.head_style' => [
|
||||
[
|
||||
'key' => 'help-center-style',
|
||||
'path' => 'modules/help-center/css/components/app-help-panel.css',
|
||||
'order' => 200,
|
||||
],
|
||||
],
|
||||
],
|
||||
|
||||
'authorization_policies' => [],
|
||||
|
||||
@@ -1,65 +1,77 @@
|
||||
<?php
|
||||
|
||||
use MintyPHP\Service\Docs\DocsCatalogService;
|
||||
use MintyPHP\Service\Ui\HotkeyService;
|
||||
|
||||
$layoutAuth = is_array($viewAuth['layout'] ?? null) ? $viewAuth['layout'] : [];
|
||||
$canViewDocs = !empty($layoutAuth['can_view_docs']);
|
||||
$canViewApiDocs = !empty($layoutAuth['api_docs.view']);
|
||||
$hasDocumentation = $canViewDocs || $canViewApiDocs;
|
||||
$canViewSystemInfo = !empty($layoutAuth['can_view_system_info']);
|
||||
|
||||
$docsDefaultSlug = $canViewDocs ? DocsCatalogService::defaultSlug() : '';
|
||||
$docsUrl = $docsDefaultSlug !== '' ? lurl('admin/docs/' . $docsDefaultSlug) : '';
|
||||
$apiDocsUrl = $canViewApiDocs ? lurl('admin/api-docs') : '';
|
||||
|
||||
$isMac = str_contains(strtolower((string) ($_SERVER['HTTP_USER_AGENT'] ?? '')), 'mac');
|
||||
$hotkeys = HotkeyService::list();
|
||||
$helpNavGroups = [
|
||||
[
|
||||
'key' => 'help-documentation',
|
||||
'label' => t('Documentation'),
|
||||
'icon' => 'bi-book',
|
||||
'items' => [
|
||||
[
|
||||
'label' => t('Documentation'),
|
||||
'path' => $docsDefaultSlug !== '' ? 'admin/docs/' . $docsDefaultSlug : '',
|
||||
'active' => navActive('admin/docs', true),
|
||||
'visible' => $canViewDocs && $docsDefaultSlug !== '',
|
||||
],
|
||||
[
|
||||
'label' => t('API docs'),
|
||||
'path' => 'admin/api-docs',
|
||||
'active' => navActive('admin/api-docs', true),
|
||||
'visible' => $canViewApiDocs,
|
||||
],
|
||||
],
|
||||
],
|
||||
[
|
||||
'key' => 'help-system',
|
||||
'label' => t('System'),
|
||||
'icon' => 'bi-info-circle',
|
||||
'items' => [
|
||||
[
|
||||
'label' => t('System info'),
|
||||
'path' => 'admin/system-info',
|
||||
'active' => navActive('admin/system-info', true),
|
||||
'visible' => $canViewSystemInfo,
|
||||
],
|
||||
],
|
||||
],
|
||||
];
|
||||
?>
|
||||
<div class="app-help-panel">
|
||||
<?php if ($hasDocumentation): ?>
|
||||
<div class="app-sidebar-group">
|
||||
<h3 class="app-sidebar-title"><?php e(t('Documentation')); ?></h3>
|
||||
<ul>
|
||||
<?php if ($canViewDocs && $docsUrl !== ''): ?>
|
||||
<li><a href="<?php e($docsUrl); ?>"><i class="bi bi-book"></i> <?php e(t('Documentation')); ?></a></li>
|
||||
<?php endif; ?>
|
||||
<?php if ($canViewApiDocs): ?>
|
||||
<li><a href="<?php e($apiDocsUrl); ?>"><i class="bi bi-braces"></i> <?php e(t('API docs')); ?></a></li>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="app-sidebar-group">
|
||||
<h3 class="app-sidebar-title"><?php e(t('Keyboard shortcuts')); ?></h3>
|
||||
<table class="app-help-shortcuts-table" role="grid">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col"><?php e(t('Action')); ?></th>
|
||||
<th scope="col"><?php e(t('Shortcut')); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($hotkeys as $hotkey):
|
||||
$shortcut = $isMac ? ($hotkey['mac'] ?? '') : ($hotkey['win'] ?? '');
|
||||
$action = t($hotkey['action_key'] ?? '');
|
||||
?>
|
||||
<tr>
|
||||
<td><?php e($action); ?></td>
|
||||
<td><kbd><?php e($shortcut); ?></kbd></td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="app-sidebar-group">
|
||||
<h3 class="app-sidebar-title"><?php e(t('About')); ?></h3>
|
||||
<ul>
|
||||
<li class="app-help-about-item">
|
||||
<span class="app-help-about-label"><?php e(t('Application')); ?></span>
|
||||
<span class="app-help-about-value"><?php e(t('CoreCore Admin')); ?></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="app-sidebar-admin-nav" aria-label="<?php e(t('Help')); ?>">
|
||||
<?php foreach ($helpNavGroups as $group):
|
||||
$items = array_values(array_filter($group['items'], static fn ($item) => !empty($item['visible'])));
|
||||
if (!$items) { continue; }
|
||||
$groupIsActive = false;
|
||||
foreach ($items as $item) {
|
||||
$activeState = $item['active'] ?? [];
|
||||
if (!empty($activeState['isActive'])) { $groupIsActive = true; break; }
|
||||
}
|
||||
?>
|
||||
<li class="app-sidebar-group app-sidebar-admin-group">
|
||||
<details data-details-key="<?php e($group['key']); ?>"<?php if ($groupIsActive): ?> open<?php endif; ?>>
|
||||
<summary>
|
||||
<i class="bi <?php e($group['icon']); ?>"></i>
|
||||
<span><?php e($group['label']); ?></span>
|
||||
</summary>
|
||||
<ul>
|
||||
<?php foreach ($items as $item):
|
||||
$active = $item['active'] ?? ['class' => '', 'aria' => ''];
|
||||
?>
|
||||
<li>
|
||||
<a href="<?php e(lurl($item['path'])); ?>" class="<?php e($active['class'] ?? ''); ?>" <?php echo $active['aria'] ?? ''; ?>>
|
||||
<?php e($item['label']); ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
|
||||
@@ -1,103 +0,0 @@
|
||||
@layer components {
|
||||
.app-help-panel {
|
||||
padding: var(--app-spacing);
|
||||
}
|
||||
|
||||
.app-help-panel .app-sidebar-title {
|
||||
text-transform: uppercase;
|
||||
font-size: var(--app-text-2xs);
|
||||
font-weight: 600;
|
||||
color: var(--app-muted-color);
|
||||
margin: 0 0 0.5rem;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.app-help-panel .app-sidebar-group {
|
||||
margin-bottom: calc(var(--app-spacing) * 1.5);
|
||||
}
|
||||
|
||||
.app-help-panel .app-sidebar-group ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.app-help-panel .app-sidebar-group ul li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.35rem 0.5rem;
|
||||
border-radius: var(--app-border-radius);
|
||||
color: var(--app-color);
|
||||
text-decoration: none;
|
||||
font-size: var(--app-text-sm);
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
|
||||
.app-help-panel .app-sidebar-group ul li a:hover {
|
||||
background-color: var(--app-accordion-border-color);
|
||||
}
|
||||
|
||||
.app-help-panel .app-sidebar-group ul li a i {
|
||||
font-size: 1rem;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.app-help-shortcuts-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--app-text-sm);
|
||||
}
|
||||
|
||||
.app-help-shortcuts-table th,
|
||||
.app-help-shortcuts-table td {
|
||||
padding: 0.3rem 0.5rem;
|
||||
text-align: left;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.app-help-shortcuts-table th {
|
||||
font-weight: 600;
|
||||
color: var(--app-muted-color);
|
||||
font-size: var(--app-text-2xs);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
border-bottom: 1px solid var(--app-border);
|
||||
}
|
||||
|
||||
.app-help-shortcuts-table td {
|
||||
border-bottom: 1px solid var(--app-border);
|
||||
}
|
||||
|
||||
.app-help-shortcuts-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.app-help-shortcuts-table kbd {
|
||||
display: inline-block;
|
||||
padding: 0.1rem 0.35rem;
|
||||
font-size: var(--app-text-xs);
|
||||
font-family: var(--app-font-family-mono, monospace);
|
||||
background: var(--app-card-background-color);
|
||||
border: 1px solid var(--app-border);
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 0 var(--app-border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-help-about-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.35rem 0.5rem;
|
||||
font-size: var(--app-text-sm);
|
||||
}
|
||||
|
||||
.app-help-about-label {
|
||||
color: var(--app-muted-color);
|
||||
}
|
||||
|
||||
.app-help-about-value {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user