diff --git a/source/patterns/command/content.rst b/source/patterns/command/content.rst index ff631a2..0e20793 100644 --- a/source/patterns/command/content.rst +++ b/source/patterns/command/content.rst @@ -1,10 +1,10 @@ Controls within content ======================= -.. image:: /img/Content_controls.jpg +.. image:: /img/Content1.png :alt: Controls within content - :scale: 40 % + :scale: 70 % If controls are directly necessary for the primary tasks of an -application (e.g. the "take photo" button in a camera app) and there is +application (e.g. the "write a sms" button in a address book app) and there is space left in the content area, put them directly within the content. diff --git a/source/patterns/navigation/column.rst b/source/patterns/navigation/column.rst index 2e44355..173fc9b 100644 --- a/source/patterns/navigation/column.rst +++ b/source/patterns/navigation/column.rst @@ -1,66 +1,68 @@ Column-based navigation ======================= .. container:: intend |desktopicon| |mobileicon| .. container:: available plasma |nbsp| Examples of column-based navigation in a phone and a desktop UI .. image:: /img/Desktop.png :alt: Column-based navigation on the desktop :scale: 40% -.. image:: /img/PageRow.png - :alt: Column-based navigation on mobile - :scale: 20% +.. raw:: html + + When to use ----------- Column-based navigation is ideal for navigating through a hierarchically organized information space, where users often go back and forth between different levels of the hierarchy For example: - Accounts ->Folders -> (Sub-Folders) -> Mails -> Invidual mail - Folders -> RSS Feeds -> Feed items -> Individual item - File system hirachy Kirigami implements this pattern in the form of a PageRow, which allows users to scroll horizontally through pages and allows the application to add and remove pages to and from the stack dynamically. This allows easy back and forward navigation through the hierarchy by swiping left-right on touch screens. A header with the title of the current page doubles as a breadcrumb trail which the user can scroll through and tap to go to a specific page. How to use it ------------- General ~~~~~~~ - Use one page/column for each level of the hierarchy (or more generally, for each step of the navigation). - Pages can for example be :doc:`lists ` or :doc:`grids `, or a detail view of a particular item. - Make sure to set meaningful but short page titles, so they can create a useful breadcrumb trail. - When on the lowest level, showing the content of an individual list item, use a swipe beyond the top/bottom of the content to jump to the previous/next item in the list - For the command structure, see the :doc:`command patterns `. Implementation -------------- If you use `org::kde::kirigami::ApplicationWindow`_ for your application, it automatically uses PageRow for its content.