Commit d4cedfd6 authored by Fabian Riethmayer's avatar Fabian Riethmayer

Improved the page about toolbar pattern

Summary: Added links to the components, new images and updated the mobile section

Reviewers: colomar, #kde_human_interface_guidelines, ngraham

Reviewed By: #kde_human_interface_guidelines, ngraham

Subscribers: ngraham

Tags: #kde_human_interface_guidelines

Differential Revision: https://phabricator.kde.org/D16539
parent e54894a4
......@@ -2,10 +2,14 @@ Toolbar
=======
|desktopicon| Desktop
--------------------
---------------------
.. image:: /img/CP-Toolbar+MenuButton.png
.. figure:: /img/Toolbar1.png
:alt: Toolbar + Menu Button
:scale: 60%
Toolbar with the most common actions and a menu button for additional
actions
- Use Toolbar + Menu Button command pattern when the number of
frequently used commands are about 8 or less, and the remaining
......@@ -15,6 +19,9 @@ Toolbar
structure.
- Commands are also exposed using context menus, a context panel or by
the direct manipulation of content.
See :doc:`toolbar </components/navigation/toolbar>` for
more details.
Examples
~~~~~~~~
......@@ -25,14 +32,18 @@ Music player, Archiver
|mobileicon| Mobile
-------------------
.. image:: /img/Phone_toolbar.jpg
.. image:: /img/Actionbutton2.png
:alt: Toolbar
:scale: 40 %
:scale: 60 %
On mobile, a toolbar is diplayed as a group of
:doc:`primary action buttons </components/navigation/actionbutton>`.
- If there are controls that need to be accessed often within the
application's primary tasks but the content needs as much space to be
available as possible, put the main controls in a toolbar.
- The toolbar is at the bottom of the user interface and should not
contain more than four buttons.
- If there are more then four actions, put the remaining ones in the
global drawer or context drawer
available as possible, you can add up to three primary action buttons
- The primary action buttons are at the bottom of the user interface and
there cannot be more then three buttons.
- If more than three actions are required, put the remaining ones in the
:doc:`global drawer </components/navigation/globaldrawer>`
or :doc:`context drawer </components/navigation/contextdrawer>`.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment