feat: Add tree/card view toggle for pages list with scheme-based control #822

OffLine911 · 2025-12-19T14:11:00Z

Summary

Adds a view mode toggle to switch between tree (list) and card (grid) display for pages in the admin panel. The toggle buttons only appear when explicitly enabled via the subtreeGridDisplay option in the parent page's scheme configuration.

Motivation

Provides a more visual way to browse pages with preview images, particularly useful for content types like blog posts, portfolios, or galleries where visual representation is important. The feature is opt-in per page type, maintaining backward compatibility.

Changes

Frontend

View Toggle Buttons: Added tree/card view toggle buttons in pages header
Conditional Display: Buttons only appear when subtreeGridDisplay: true is set in scheme
Active State: Visual feedback showing current active view mode

Backend

Controller Logic: Modified PagesController::tree() to check children.subtreeGridDisplay option
View Mode Validation: Server-side validation of view parameter with fallback to tree view
Template Rendering: Conditionally renders tree or card view based on mode and permissions

JavaScript

View Mode Handlers: Click handlers for view toggle buttons
LocalStorage: Saves user's view preference
URL Management: Updates query parameter and reloads with selected view

Styling

CSS Import: Added pages-cards component import to main stylesheet
Active Button State: Utilizes existing button active state styling

Translations

Added English translations:
panel.pages.pages.viewTree: Tree view
panel.pages.pages.viewCard: Card view
panel.pages.pages.empty: No pages found

Usage

To enable card view toggle for a page type, add to the scheme YAML:

options:
    children:
        subtree: true
        subtreeGridDisplay: true  # Enables the view toggle

Example
Updated site/schemes/pages/blog.yaml with subtreeGridDisplay: true as a reference implementation.

Technical Details

Query parameter: ?view=tree or ?view=card
Scheme option path: options.children.subtreeGridDisplay
Default behavior: Tree view (maintains existing functionality)
Backward compatible: No changes to existing pages without the option

Files Modified

panel/views/pages/index.php
formwork/src/Panel/Controllers/PagesController.php
panel/src/ts/components/views/pages.ts
panel/src/scss/panel.scss
panel/translations/en.yaml
site/schemes/pages/blog.yaml (example)

Testing

[-] View toggle appears only when subtreeGridDisplay: true
[-] Tree view displays correctly
[-] Card view displays correctly (uses existing cards component)
[-] Active state updates on toggle
[-] View preference persists via localStorage
[-] Server-side validation prevents unauthorized card view access
[-] No TypeScript or PHP diagnostics errors

Introduces a new card/grid view for pages alongside the existing tree view in the panel. Adds a view mode toggle in the UI, updates the controller to handle the view mode, implements the card layout in a new SCSS and PHP view, and updates translations. Also enhances the TypeScript to handle view mode switching and persistence.

Introduced a toggle for tree and card views in the pages list, visible when 'subtreeGridDisplay' is enabled in the parent page's scheme. Updated controller logic to validate and pass view mode, adjusted SCSS for improved styling, and modified the blog page scheme as an example configuration.

Added /docs/ to .gitignore to exclude documentation files from version control. Deleted FEATURE_CHANGELOG.md as it is no longer needed.

Introduced a new .pages-view-toggle wrapper for the view mode buttons in the pages panel, updated the SCSS to style this component, and refactored the index.php view to use the new structure. Also removed Kirby-specific comments from SCSS for clarity.

Introduces the imagePreviewField option set to 'coverImage' in the post page scheme to enable image previews in the admin interface.

Refines the SCSS for page list components, adjusting font sizes, colors, spacing, and button visibility for better UI consistency. Updates the page tree view to display image previews as thumbnails within the page icon area, removing the previous larger image preview from the details section.

The default view mode now depends on the parent's grid display setting: 'card' if grid display is enabled, otherwise 'tree'. This improves the user experience by aligning the default view with the configured display option.

Enhanced the Pages component to apply search filtering and highlighting to the card view, in addition to the tree view. Card elements are now shown or hidden based on the search input, and matching text is highlighted.

Introduces a page icon next to the title in page cards by updating the cards.php view and adding new SCSS classes for layout and styling. Also refines related SCSS for better alignment, overflow handling, and hover effects for page card icons.

Updated SCSS variables and component styles for buttons, dropdowns, header, sidebar, section, and pages tree to improve visual consistency, spacing, and color scheme. Refactored layout markup in panel.php and pages/index.php to unify header structure and remove duplicate header code. These changes enhance the overall look and feel of the panel interface.

Replaces <div class="header"> with <header class="panel-header"> across multiple panel view files for improved semantic HTML structure and consistency.

Refactors the pages index header to use a new breadcrumb navigation, improved search bar, and updated action controls. Updates SCSS to add styles for the new header layout, breadcrumb, search, and action elements, providing a more modern and organized UI.

Adjusted background and border colors in panel SCSS for improved UI consistency, and added spacing to the page editor form. Updated the page editor form to use an ID for styling. Renamed blog and about page directories from '2-blog' to '1-blog' and '1-about' to '2-about' for better organization.

Updated SCSS for the files list to improve spacing, borders, font sizes, and hover effects for better visual clarity. Changed the header markup in files/edit.php from a div to a semantic header element for improved accessibility and structure.

Added border radius and background color to .files-item in SCSS for improved appearance. Changed the container class in files index.php from 'section' to 'mt-4' to adjust vertical spacing.

OffLine911 · 2025-12-21T17:48:56Z

are you going to look in this or not @giuscris?

giuscris · 2025-12-22T16:24:48Z

Thank you for the PR, I'll review when possible (I'm currently working on Formwork 2.3)

OffLine911 and others added 26 commits December 19, 2025 14:30

Create package-lock.json

dcfe25d

Update routes.php

63efc9a

Update .gitignore

1f22341

Update .gitignore and remove FEATURE_CHANGELOG.md

8c0f1da

Added /docs/ to .gitignore to exclude documentation files from version control. Deleted FEATURE_CHANGELOG.md as it is no longer needed.

Add imagePreviewField option to post page scheme

fd86068

Introduces the imagePreviewField option set to 'coverImage' in the post page scheme to enable image previews in the admin interface.

Set default page view mode based on grid display option

d44491a

The default view mode now depends on the parent's grid display setting: 'card' if grid display is enabled, otherwise 'tree'. This improves the user experience by aligning the default view with the configured display option.

Add search filter support for card view in Pages

c192a5c

Enhanced the Pages component to apply search filtering and highlighting to the card view, in addition to the tree view. Card elements are now shown or hidden based on the search input, and matching text is highlighted.

Refactor header markup to use <header> element

da76373

Replaces <div class="header"> with <header class="panel-header"> across multiple panel view files for improved semantic HTML structure and consistency.

Update _pages-tree.scss

3eed7e0

Update index.php

c04f5a7

Merge branch 'getformwork:2.x' into 2.x

44977f9

Merge branch '2.x' of https://github.com/OffLine911/formwork into 2.x

cf830b3

Merge branch 'getformwork:2.x' into 2.x

aee2979

Merge branch '2.x' of https://github.com/OffLine911/formwork into 2.x

7377100

Update files list styles and layout spacing

a451522

Added border radius and background color to .files-item in SCSS for improved appearance. Changed the container class in files index.php from 'section' to 'mt-4' to adjust vertical spacing.

Update _files-list.scss

6304347

Merge branch 'getformwork:2.x' into 2.x

871c856

OffLine911 and others added 3 commits December 21, 2025 18:50

Merge branch 'getformwork:2.x' into 2.x

197f524

small fix

2a213dd

Merge branch 'getformwork:2.x' into 2.x

2fe677c

OffLine911 and others added 2 commits December 25, 2025 16:32

Merge branch 'getformwork:2.x' into 2.x

07aaba2

update to fix scss lints

c34e912

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Add tree/card view toggle for pages list with scheme-based control #822

feat: Add tree/card view toggle for pages list with scheme-based control #822

Uh oh!

OffLine911 commented Dec 19, 2025

Uh oh!

OffLine911 commented Dec 21, 2025

Uh oh!

giuscris commented Dec 22, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

feat: Add tree/card view toggle for pages list with scheme-based control #822

Are you sure you want to change the base?

feat: Add tree/card view toggle for pages list with scheme-based control #822

Uh oh!

Conversation

OffLine911 commented Dec 19, 2025

Summary

Motivation

Changes

Usage

Technical Details

Files Modified

Uh oh!

OffLine911 commented Dec 21, 2025

Uh oh!

giuscris commented Dec 22, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants