diff --git a/source/components/navigation/contextdrawer.rst b/source/components/navigation/contextdrawer.rst index e8c1af8..fab9d80 100644 --- a/source/components/navigation/contextdrawer.rst +++ b/source/components/navigation/contextdrawer.rst @@ -1,104 +1,112 @@ Context drawer ============== -.. figure:: /img/Context_drawer.jpg +.. figure:: /img/Contextdrawer1.png + :figclass: border :scale: 50 % - :alt: Examples of a context drawer + :alt: Examples of a context drawer on mobile - Examples of a context drawer + Examples of a context drawer on mobile Purpose ------- The Context Drawer is used to access controls that depend on the current context. This can be, for example, controls that affect a selected element in a list or that navigate through an opened document. Is this the right control? -------------------------- Use a Context Drawer if your application has any functions which are only relevant in specific contexts, and which are not central enough to the application's main purpose to put them in the main user interface or in a toolbar. For actions which are always available, use the :doc:`Global Drawer `. Guidelines ---------- - The Context Drawer is opened by swiping in from the left or right edge of the screen (depending on a system-wide setting) and closed by swiping in the other direction or tapping outside of it. - At the top of the drawer, state which object the controls affect (e.g. "Selected email") - By default, the Context Drawer simply contains a vertical list of action buttons which affect the currently selected/opened element - Center the list vertically instead of top-aligning, to allow an easier reach with the thumb - If needed, other controls related to the current context can be put in the Context Drawer - Try to keep the content of the context drawer in one page. If there two distinct "modes" of contextual actions (for example navigating through a PDF either by table of contents or thumbnails), consider using two :doc:`Tabs ` to separate them, but never use more than two tabs. +.. figure:: /img/Contextdrawer2.png + :figclass: border + :scale: 50 % + :alt: Examples of a context drawer on desktop + + Examples of a context drawer on desktop + Code ---- Kirigami ^^^^^^^^ .. code-block:: qml ... import QtQuick.Controls 2.2 as Controls import org.kde.kirigami 2.4 as Kirigami ... Kirigami.ApplicationWindow { ... pageStack.initialPage: Kirigami.ScrollablePage { ... actions { ... contextualActions: [ Kirigami.Action { iconName: "favorite" text: i18n("&Select as favorite") }, Kirigami.Action { iconName: "document-share" text: i18n("&Share") }, Kirigami.Action { iconName: "document-edit" text: i18n("&Edit") }, Kirigami.Action { iconName: "edit-image-face-add" text: i18n("&Choose photo") }, Kirigami.Action { iconName: "im-kick-user" text: i18n("&Block number") }, Kirigami.Action { iconName: "delete" text: i18n("&Delete contact") }, Kirigami.Action { iconName: "edit-clear-history" text: i18n("&Delete history") } ] ... } } ... contextDrawer: Kirigami.ContextDrawer { } ... } diff --git a/source/components/navigation/toolbar.rst b/source/components/navigation/toolbar.rst index 9bb1843..8afc59c 100644 --- a/source/components/navigation/toolbar.rst +++ b/source/components/navigation/toolbar.rst @@ -1,159 +1,160 @@ Toolbar ======= -.. figure:: /img/Actionbutton3.png +.. figure:: /img/Toolbar1.png :figclass: border :alt: Primary Action Buttons on Desktop - Toolbar with the most important actions :doc:`toolbar ` + Toolbar with the most important actions :doc:`toolbar ` and an + overflow menu Purpose ------- A *toolbar* is a graphical presentation of commands optimized for fast access. A toolbar can be either be defined for a whole application or as part of another component. As an application toolbar it contains buttons that correspond to items in the application's menu, providing direct access to application's most frequently used functions. A good menu bar is a comprehensive catalog of all the available top-level commands, whereas a good toolbar gives quick, convenient access to frequently used commands. As part of another component, like a card or an inline mesage, it is used to allow quick access to the most important commands for a single, focused content item. Guidelines for application -------------------------- Is this the right control ~~~~~~~~~~~~~~~~~~~~~~~~~ - For standard applications, show a toolbar by default. - Provide a toolbar in addition to the menu bar, but do not replace the menu bar. Behavior ~~~~~~~~ - A toolbar should contain only a few, frequently used operations. If the number of operations is above 5 they have to be grouped with separators. Not more than 3 of those sections should be implemented. - Do not abuse the toolbar to expose application's features. Only the most frequently functions should be add to the toolbar. - Execute operations immediately; do not require additional input. - Try to avoid using :doc:`split buttons ` or :doc:`toggle buttons <../editing/togglebutton>` in order to keep the interaction with all buttons in the toolbar consistent. - Do not hide toolbars by default. If configurable, users should easily be able to make the toolbar viewable again. - Disable buttons that do not apply to the current context. - Consider to provide customization for toolbars in respect to position and content. - Providing a label for each action is a good practice but define a meaningful icon too because the label could be hidden in mobile mode or if there isn't enough space when the window is resized. Guidelines for components ------------------------- Is this the right control ~~~~~~~~~~~~~~~~~~~~~~~~~ - Use a toolbar only if an item has few actions or few frequently used actions. - Embed a toolbar only in another control that is clearly visually seperated like a card or an inline message. Behavior ~~~~~~~~ - A toolbar should contain only a few, frequently used operations. The number of operations should not exceed 3. - Do not group with separators. - Execute operations immediately; do not require additional input. - Do not hide toolbars or make them configurable. - Toolbars can be responsive. If there is not enough space to display all the buttons, an overflow menu is shown instead. .. raw:: html Appearance ---------- - Do not change the button style from the default, which is :doc:`text beside icons `. - Use and design toolbar icons with special care. Users remember location of an object but rely as well on icon properties. - A distinct association between the underlying function and its visual depiction is crucial. Follow the advices for :doc:`icon design `. - Do not simulate Microsoft's ribbon controls. KDE stays plain and simple.Microsoft's ribbon controls. KDE stays plain and simple. Code ---- Kirigami ~~~~~~~~ Application toolbar ^^^^^^^^^^^^^^^^^^^ .. code-block:: qml ... import QtQuick.Controls 2.2 as Controls import org.kde.kirigami 2.4 as Kirigami ... Kirigami.ApplicationWindow { ... pageStack.initialPage: Kirigami.ScrollablePage { ... actions { left: Kirigami.Action { iconName: "mail-message" text: i18n("&Write mail") } main: Kirigami.Action { iconName: "call-start" text: i18n("&Make call") } right: Kirigami.Action { iconName: "kmouth-phrase-new" text: i18n("&Write SMS") } } } ... } Component toolbar ^^^^^^^^^^^^^^^^^ .. code-block:: qml ... import QtQuick.Controls 2.2 as Controls import org.kde.kirigami 2.4 as Kirigami ... Kirigami.ActionToolBar { ... actions: [ Kirigami.Action { iconName: "favorite" text: i18n("&Select as favorite") }, Kirigami.Action { iconName: "document-share" text: i18n("&Share") } ] ... } ... diff --git a/source/img/Actionbutton1.png b/source/img/Actionbutton1.png index 028d754..557cb33 100644 Binary files a/source/img/Actionbutton1.png and b/source/img/Actionbutton1.png differ diff --git a/source/img/Actionbutton2.png b/source/img/Actionbutton2.png index 8e695e0..40e98a8 100644 Binary files a/source/img/Actionbutton2.png and b/source/img/Actionbutton2.png differ diff --git a/source/img/Actionbutton3.png b/source/img/Actionbutton3.png index a21efd8..3d6fb1a 100644 Binary files a/source/img/Actionbutton3.png and b/source/img/Actionbutton3.png differ diff --git a/source/img/Contextdrawer1.png b/source/img/Contextdrawer1.png new file mode 100644 index 0000000..a739049 Binary files /dev/null and b/source/img/Contextdrawer1.png differ diff --git a/source/img/Contextdrawer2.png b/source/img/Contextdrawer2.png new file mode 100644 index 0000000..1a124ba Binary files /dev/null and b/source/img/Contextdrawer2.png differ diff --git a/source/img/Toolbar1.png b/source/img/Toolbar1.png index 1bf145e..f95230d 100644 Binary files a/source/img/Toolbar1.png and b/source/img/Toolbar1.png differ