Add page info card

formwork/translations/de.yaml

@@ -23,16 +23,19 @@ page.cacheable: Im Cache speichern
 page.content: Inhalt
 page.files: Dateien
 page.image: Bild
-page.listed: Im Menü sichtbar
+page.listed: Aufgelistet
 page.noImage: Kein Bild
 page.none: (Keine)
 page.noTags: Keine Tags
+page.notListed: Nicht aufgelistet
+page.notRoutable: Nicht routbar
 page.options: Optionen
 page.page: Seite
 page.parent: Übergeordnete Seite
 page.postsPerPage: Beiträge pro Seite
 page.publishDate: Veröffentlichungsdatum
 page.routable: Routbar
+page.slug: Slug
 page.status.notPublished: Nicht veröffentlicht
 page.status.notRoutable: Nicht routbar
 page.status.published: Veröffentlicht

formwork/translations/en.yaml

@@ -23,18 +23,20 @@ page.cacheable: Cacheable
 page.content: Content
 page.files: Files
 page.image: Image
-page.listed: Visible in the menu
+page.listed: Listed
 page.noImage: No image
 page.none: (None)
 page.noTags: No tags
+page.notListed: Not listed
+page.notRoutable: Not routable
 page.options: Options
 page.page: Page
 page.parent: Parent page
 page.postsPerPage: Posts per page
 page.publishDate: Publish date
 page.routable: Routable
+page.slug: Slug
 page.status.notPublished: Not published
-page.status.notRoutable: Not routable
 page.status.published: Published
 page.summary: Summary
 page.tags: Tags

formwork/translations/es.yaml

@@ -23,16 +23,19 @@ page.cacheable: En caché
 page.content: Contenido
 page.files: Archivos
 page.image: Imagen
-page.listed: Visible en el menú
+page.listed: Listada
 page.noImage: Sin imagen
 page.none: (Ninguno)
 page.noTags: Sin etiquetas
+page.notListed: No listada
+page.notRoutable: No enrutable
 page.options: Opciones
 page.page: Página
 page.parent: Página principal
 page.postsPerPage: Publicaciones por página
 page.publishDate: Fecha de publicación
 page.routable: Enrutable
+page.slug: Slug
 page.status.notPublished: No publicado
 page.status.notRoutable: No enrutable
 page.status.published: Publicado

formwork/translations/fr.yaml

@@ -23,18 +23,20 @@ page.cacheable: Activer le cache
 page.content: Contenu
 page.files: Fichiers
 page.image: Image d’accroche
-page.listed: Visible dans le menu
+page.listed: Répertoriée
 page.noImage: Aucune image
 page.none: (Aucun)
 page.noTags: Aucun tag
+page.notListed: Non répertoriée
+page.notRoutable: Inaccessible
 page.options: Options
 page.page: Page
 page.parent: Parent
 page.postsPerPage: Articles par page
 page.publishDate: Date de publication
 page.routable: Accessible
+page.slug: Slug
 page.status.notPublished: Brouillon
-page.status.notRoutable: Inaccessible
 page.status.published: Publié
 page.summary: Résumé
 page.tags: Tags

formwork/translations/it.yaml

@@ -23,16 +23,19 @@ page.cacheable: Abilita cache
 page.content: Contenuto
 page.files: File
 page.image: Immagine
-page.listed: Visibile nel menu
+page.listed: Elencata
 page.noImage: Nessuna immagine
 page.none: (Nessuna)
 page.noTags: Nessun tag
+page.notListed: Non elencata
+page.notRoutable: Non raggiungibile
 page.options: Opzioni
 page.page: Pagina
 page.parent: Pagina superiore
 page.postsPerPage: Post per pagina
 page.publishDate: Data di pubblicazione
 page.routable: Raggiungibile
+page.slug: Slug
 page.status.notPublished: Non pubblicato
 page.status.notRoutable: Non raggiungibile
 page.status.published: Pubblicato

formwork/translations/pt.yaml

@@ -23,16 +23,19 @@ page.cacheable: Cache
 page.content: Conteúdo
 page.files: Ficheiros
 page.image: Imagem
-page.listed: Visível no menu
+page.listed: Listada
 page.noImage: Sem imagem
 page.none: (Nenhum)
 page.noTags: Sem tags
+page.notListed: Não listada
+page.notRoutable: Não roteável
 page.options: Opções
 page.page: Página
 page.parent: Página parente
 page.postsPerPage: Items por página
 page.publishDate: Data de publicação
 page.routable: Roteável
+page.slug: Slug
 page.status.notPublished: Não publicado
 page.status.notRoutable: Não roteável
 page.status.published: Publicado

formwork/translations/ru.yaml

@@ -23,16 +23,19 @@ page.cacheable: Кешируемый
 page.content: Содержание
 page.files: Файлы
 page.image: Изображение
-page.listed: Видимо в меню
+page.listed: Указана
 page.noImage: Нет изображения
 page.none: (Нет)
 page.noTags: Нет тегов
+page.notListed: Не указана
+page.notRoutable: Не маршрутизируемый
 page.options: Параметры
 page.page: Страница
 page.parent: Родитель страницы
 page.postsPerPage: Сообщения на странице
 page.publishDate: Дата публикации
 page.routable: Маршрутизируемый
+page.slug: Slug
 page.status.notPublished: Не Опубликовано
 page.status.notRoutable: Не маршрутизируемый
 page.status.published: Опубликованный

panel/assets/icons/svg/eye-slash.svg

@@ -0,0 +1 @@
+<svg class="icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><g clip-path="url(#eye-slash__a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.53 1.53A.75.75 0 0 0 14.47.47l-14 14a.75.75 0 1 0 1.06 1.06l2.7-2.7a8.18 8.18 0 0 0 3.77.92c3.497 0 6.48-2.207 7.89-5.343a.993.993 0 0 0 0-.814 9.39 9.39 0 0 0-2.823-3.6L15.53 1.53Zm-3.535 3.535-1.41 1.411a3 3 0 0 1-4.109 4.109l-1.12 1.12A6.676 6.676 0 0 0 8 12.25c2.757 0 5.19-1.696 6.425-4.25a7.81 7.81 0 0 0-2.43-2.935ZM7.611 9.45A1.502 1.502 0 0 0 9.45 7.611L7.611 9.45Z"/><path d="M8 2.25a8.16 8.16 0 0 1 2.186.297L8.919 3.813A6.666 6.666 0 0 0 8 3.75C5.243 3.75 2.81 5.446 1.575 8c.339.7.767 1.336 1.268 1.89l-1.061 1.06A9.554 9.554 0 0 1 .11 8.408a.993.993 0 0 1 0-.814C1.52 4.457 4.503 2.25 8 2.25Z"/></g><defs><clipPath id="eye-slash__a"><path d="M0 0h16v16H0z"/></clipPath></defs></svg>

panel/src/scss/components/_pages.scss

@@ -56,13 +56,45 @@
     white-space: nowrap;
 }
 
-.page-actions .button-link {
+.page-info {
-    font-size: $font-size-md;
+    position: absolute;
+    z-index: 8;
+    display: none;
+    padding: 0.5rem;
+    border: 1px solid var(--color-base-500);
+    border-radius: $border-radius;
+    margin: 0.25rem 0 1rem;
+    background-color: var(--color-base-900);
+    box-shadow: $box-shadow-md;
 }
 
-.page-info {
+.page-icon > .icon {
-    padding: 0 0.25rem;
+    vertical-align: -0.25rem;
-    margin-bottom: 0.75rem;
+}
+
+.page-icon:hover .page-info {
+    display: block;
+}
+
+.is-dragging .page-icon:hover .page-info {
+    display: none;
+}
+
+.page-info-row {
+    padding: 0.5rem 0.25rem;
+    border-bottom: 1px solid var(--color-base-600);
+    font-size: $font-size-sm;
+}
+
+.page-info-badges {
+    padding: 0.5rem 0.25rem;
+    font-size: $font-size-md;
+    white-space: nowrap;
+}
+
+.page-languages {
+    font-size: $font-size-md;
+    white-space: nowrap;
 }
 
 .page-slug-change {

panel/views/pages/editor.php

@@ -3,7 +3,14 @@
     <input type="submit" <?= $this->attr(['hidden' => true, 'aria-hidden' => 'true', 'data-command' => 'save', 'formaction' => $history?->isJustCreated() ? '?publish=false' : null]) ?>>
     <div class="header">
         <div class="min-w-0 flex-grow-1">
-            <div class="header-title"><?= $this->icon($page->icon()) ?> <?= $this->escape($page->title()) ?></div>
+            <div class="flex">
+                <div class="page-icon mr-3">
+                    <?= $this->icon($page->icon()) ?>
+                </div>
+                <div class="header-title truncate">
+                    <?= $this->escape($page->title()) ?>
+                </div>
+            </div>
             <div class="flex">
                 <div><?= $this->insert('_pages/status', ['page' => $page]) ?></div>
                 <?php if (!$page->isIndexPage() && !$page->isErrorPage()) : ?>
@@ -23,16 +30,16 @@
             <a class="<?= $this->classes(['button', 'button-link', 'show-from-md', 'disabled' => !$previousPage]) ?>" role="button" <?php if ($previousPage) : ?>href="<?= $panel->uri('/pages/' . trim($previousPage->route(), '/') . '/edit/') ?>" <?php endif ?> title="<?= $this->translate('panel.pages.previous') ?>" aria-label="<?= $this->translate('panel.pages.previous') ?>"><?= $this->icon('chevron-left') ?></a>
             <a class="<?= $this->classes(['button', 'button-link', 'show-from-md', 'disabled' => !$nextPage]) ?>" role="button" <?php if ($nextPage) : ?>href="<?= $panel->uri('/pages/' . trim($nextPage->route(), '/') . '/edit/') ?>" <?php endif ?> title="<?= $this->translate('panel.pages.next') ?>" aria-label="<?= $this->translate('panel.pages.next') ?>"><?= $this->icon('chevron-right') ?></a>
             <a class="<?= $this->classes(['button', 'button-link', 'disabled' => !$page->published() || !$page->routable()]) ?>" role="button" <?php if ($page->published() && $page->routable()) : ?>href="<?= $page->uri(includeLanguage: $currentLanguage ?: true) ?>" <?php endif ?> target="formwork-view-page-<?= $page->uid() ?>" title="<?= $this->translate('panel.pages.viewPage') ?>" aria-label="<?= $this->translate('panel.pages.viewPage') ?>"><?= $this->icon('arrow-right-up-box') ?></a>
-            <button type="submit" class="<?= $this->classes(['button', 'button-link']) ?>" data-command="preview" formaction="<?= $panel->uri('/pages/' . trim($page->route(), '/') . '/preview/') ?>" formtarget=" formwork-preview-<?= $page->uid() ?>" title="<?= $this->translate('panel.pages.preview') ?>" aria-label="<?= $this->translate('panel.pages.preview') ?>"><?= $this->icon('eye') ?></button>
+            <button type="submit" class="<?= $this->classes(['button', 'button-link', 'disabled' => !$page->routable()]) ?>" data-command="preview" formaction="<?= $panel->uri('/pages/' . trim($page->route(), '/') . '/preview/') ?>" formtarget=" formwork-preview-<?= $page->uid() ?>" title="<?= $this->translate('panel.pages.preview') ?>" aria-label="<?= $this->translate('panel.pages.preview') ?>"><?= $this->icon('eye') ?></button>
             <?php if ($panel->user()->permissions()->has('pages.delete')) : ?>
                 <button type="button" class="button button-link" data-modal="deletePageModal" data-modal-action="<?= $panel->uri('/pages/' . trim($page->route(), '/') . '/delete/' . ($currentLanguage ? 'language/' . $currentLanguage . '/' : '')) ?>" title="<?= $this->translate('panel.pages.deletePage') ?>" aria-label="<?= $this->translate('panel.pages.deletePage') ?>" <?php if (!$page->isDeletable()) : ?> disabled<?php endif ?>><?= $this->icon('trash') ?></button>
             <?php endif ?>
             <?php if (!$site->languages()->available()->isEmpty()) : ?>
                 <div class="dropdown">
-                    <button type="button" class="button dropdown-button caret button-accent" data-dropdown="languages-dropdown"><?= $this->icon('translate') ?> <?= $this->translate('panel.pages.languages') ?><?php if ($currentLanguage) : ?> <span class="badge"><?= $currentLanguage ?></span><?php endif ?></button>
+                    <button type="button" class="button dropdown-button caret button-accent" data-dropdown="languages-dropdown"><?= $this->icon('translate') ?> <?= $this->translate('panel.pages.languages') ?><?php if ($currentLanguage) : ?> <span class="badge badge-blue"><?= $currentLanguage ?></span><?php endif ?></button>
                     <div class="dropdown-menu" id="languages-dropdown">
                         <?php foreach ($site->languages()->available() as $language) : ?>
-                            <a href="<?= $panel->uri('/pages/' . trim($page->route(), '/') . '/edit/language/' . $language . '/') ?>" class="dropdown-item"><?= $page->languages()->available()->has($language) ? $this->translate('panel.pages.languages.editLanguage', $language->nativeName() . ' (' . $language->code() . ')') : $this->translate('panel.pages.languages.editLanguage', $language->nativeName() . ' (' . $language->code() . ')') ?></a>
+                            <a href="<?= $panel->uri('/pages/' . trim($page->route(), '/') . '/edit/language/' . $language . '/') ?>" class="dropdown-item"><?= $page->languages()->available()->has($language) ? $this->translate('panel.pages.languages.editLanguage', $language->nativeName() . ' (' . $language->code() . ')') : $this->translate('panel.pages.languages.addLanguage', $language->nativeName() . ' (' . $language->code() . ')') ?></a>
                         <?php endforeach ?>
                     </div>
                 </div>

panel/views/pages/tree.php

@@ -20,8 +20,7 @@
                     ])
                     ?>" data-route="<?= $page->route() ?>">
             <div class="pages-tree-row">
-                <div class="pages-tree-item-cell page-details">
+                <div class="pages-tree-item-cell page-details flex">
-                    <div class="page-title flex">
                     <div class="pages-tree-icon sortable-handle mr-2">
                         <?php if ($orderable && $page->orderable()) : ?>
                             <span title="<?= $this->translate('panel.dragToReorder') ?>"><?= $this->icon('grabber') ?></span>
@@ -34,15 +33,23 @@
                             <?php endif ?>
                         </div>
                     <?php endif ?>
-                        <div class="mr-2" class="pages-tree-icon"><?= $this->icon($page->icon()) ?></div>
+                    <div class="page-icon mr-3">
-                        <div class="min-w-0">
+                        <?= $this->icon($page->icon()) ?>
-                            <div class="truncate text-color-accent"><a href="<?= $panel->uri('/pages/' . trim($page->route(), '/') . '/edit/') ?>"><?= $this->escape($page->title()) ?></a></div>
+                        <?= $this->insert('_pages/info', ['page' => $page]) ?>
-                            <?php foreach ($page->languages()->available() as $language) : ?>
-                                <span class="badge"><?= $language->code() ?></span>
-                            <?php endforeach ?>
-                            <div class="page-route truncate" aria-hidden="true">
-                                <span><?= $page->canonicalRoute() ?? $page->route() ?></span>
                     </div>
+                    <div class="min-w-0">
+                        <div class="flex">
+                            <div class="page-title truncate mr-2">
+                                <a href="<?= $panel->uri('/pages/' . trim($page->route(), '/') . '/edit/') ?>"><?= $this->escape($page->title()) ?></a>
+                            </div>
+                            <div class="page-languages show-from-xs">
+                                <?php foreach ($page->languages()->available() as $language) : ?>
+                                    <a href="<?= $panel->uri('/pages/' . trim($page->route(), '/') . '/edit/language/' . $language->code() . '/') ?>" title="<?= $this->translate('panel.pages.languages.editLanguage', $language->nativeName() . ' (' . $language->code() . ')') ?>"><span class="badge badge-blue"><span><?= $this->icon('translate') ?></span> <?= $language->code() ?></a></span>
+                                <?php endforeach ?>
+                            </div>
+                        </div>
+                        <div class="page-route truncate mr-2" aria-hidden="true">
+                            <span><?= $page->canonicalRoute() ?? $page->route() ?></span>
                         </div>
                     </div>
                 </div>

panel/views/partials/pages/info.php

@@ -0,0 +1,16 @@
+<div class="page-info">
+    <div class="page-info-row"><strong><?= $this->translate('page.template') ?>:</strong> <?= $page->template()->title() ?></div>
+    <div class="page-info-row"><strong><?= $this->translate('page.slug') ?>:</strong> <?= $page->slug() ?></div>
+    <div class="page-info-badges">
+        <?php if ($page->routable()): ?>
+            <span class="badge badge-amber"><?= $this->icon('circle-small-fill') ?> <?= $this->translate('page.routable') ?></span>
+        <?php else: ?>
+            <span class="badge badge-amber"><?= $this->icon('circle-small') ?> <?= $this->translate('page.notRoutable') ?></span>
+        <?php endif ?>
+        <?php if ($page->listed()): ?>
+            <span class="badge badge-purple"><?= $this->icon('eye') ?> <?= $this->translate('page.listed') ?></span>
+        <?php else: ?>
+            <span class="badge badge-purple"><?= $this->icon('eye-slash') ?> <?= $this->translate('page.notListed') ?></span>
+        <?php endif ?>
+    </div>
+</div>