Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Warning
Work in progress
Work in progress

This page will be entirely re-organised and split into separate pages.

Table of Contents

Story

Magnolia should let me navigate and browse my web site structure by using a mouse, a keyboard and using a touch device. It should be easy and quick to find a particular page without having to work myself down the site hierarchy.

Description of desired behavior

Magnolia offers to view the site structure in a tree view and single or a set of pages in a list view.

Browsing the structure

Navigating the tree view showing the web site structure is handled in Navigating trees, while working with items in the tree is described in Focusing, selecting and opening items.

Selecting an item or focusing an item for a longer time causes an "Page details" view to show additional details on a page. An important element in this view is the thumbnail preview, which shows a small rendering of the page.

Show, hide and rearrange table columns

All columns except the "Page name" and the column containing the checkboxes can be visible or hidden. Additional columns not initially visible may be offered for display by the tree view.

...

When using the keyboard, the column order and the hide/show settings of a column must be specified on a separate settings page still to be defined.

Browsing a set of pages

Navigating a list showing pages of the site is handled in Navigating lists, while working with items in the list is described in Focusing, selecting and opening items.

...

  • options to sort the list alphabetically, by last modification date and by size
  • options to filter the list by tag, author and page status
  • advanced options to filter the list, such as by site, translation status or locale (has to be further defined)

Inline editing of page attributes

Some page attributes shown in the list or structure views may be edited directly within the view. Among these are the page URL, the page name and navigation title. To enter inline editing, select an item, then click or tap on it again after a short delay (to avoid actually double-clicking it) or hit ENTER on the keyboard.

The attribute you clicked or tapped on will then become editable. When using the keyboard only, the first attribute of all editable attributes in the currently selected row or of the currently selected item becomes editable. You may select to edit a different item by hitting TAB.

Showing errors or warnings

has to be defined still

Inline editing restricted to simple attributes

Note that inline editing will be restricted to work for simple attributes only. While e.g. changing a page template in the structure view was possible in previous versions of Magnolia, it won't be supported starting with version 5. Changing a page template can be a complex operation and may require you to enter values for required attributes, both of which is not viable using inline editing. Complex page attributes thus may only be changed by actually editing the page properties in a dialog or by opening the page for editing.

For a summary of all commands availabel for inline editing, please refer to Usage summary#Inline editing of page attributes

Quickly find a page

In the list view, a search box allows to search for pages. Search results are shown immediately in the list view and may be further filtered and sorted using the options available there. There's no search option in the structure/tree view - the user shall change to the list view to run a search.

...

Alternatively, this search can be restricted to work on only one of these elements.

Grouping a set of pages

In the list view, the pages displayed may be grouped according to various criteria. Currently discussed is the grouping by tag, by author, by site and by template. Note that pages may show up in more than one group.

Mockups

Browsing the structure

Mockup
Browse web site structure
Browse web site structure
19

Browsing a set of pages, quickly find a page

Variant 1: filter and group options in top bar

Mockup
Browse a set of pages
Browse a set of pages
19
Mockup
Variant 1 - group by tag
Variant 1 - group by tag
113

Variant 2: filter and group options in side bar

Mockup
Variant 2 - filter and group in side bar
Variant 2 - filter and group in side bar
110

...

Mockup
Variant 2 - filtering, grouping with thumbnails
Variant 2 - filtering, grouping with thumbnails
13

Open questions

  • How are messages displayed: errors, warnings, informational messages