diff --git a/source/components/navigation/contextdrawer.rst b/source/components/navigation/contextdrawer.rst index fab9d80..3ba1ee2 100644 --- a/source/components/navigation/contextdrawer.rst +++ b/source/components/navigation/contextdrawer.rst @@ -1,112 +1,121 @@ Context drawer ============== +.. container:: intend + + |desktopicon| |mobileicon| + +.. container:: available plasma qwidgets + + |nbsp| + + .. figure:: /img/Contextdrawer1.png :figclass: border :scale: 50 % :alt: Examples of a context drawer on mobile 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/globaldrawer.rst b/source/components/navigation/globaldrawer.rst index 87fcd33..bd75a1d 100644 --- a/source/components/navigation/globaldrawer.rst +++ b/source/components/navigation/globaldrawer.rst @@ -1,95 +1,128 @@ Global drawer ============= -.. figure:: /img/Menu_Drawer.png - :alt: Examples of different global drawers +.. container:: intend - Examples of different global drawers + |desktopicon| |mobileicon| + +.. container:: available plasma qwidgets + + |nbsp| + + +.. figure:: /img/Globaldrawer1.png + :alt: Global drawer on mobile + :figclass: border + :scale: 40 % + + Global drawer on mobile Purpose ------- The Global Drawer is a standard element in KDE mobile applications. It contains an application's main menu, and any functions which are not part of the application's main usecases but are not specific to the current context either. Is this the right control? -------------------------- +.. figure:: /img/Globaldrawer3.png + :figclass: border + :alt: Global drawer on desktop + :scale: 40 % + + Global drawer on desktop + Use a Global Drawer whenever your application has any functions which are not central enough to the application's main purpose to put them in the main user interface, and which are not dependent on the current context. For context-specific actions (e.g. those affecting a selected item), use the :doc:`Context Drawer ` Guidelines ---------- -The Global 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. +.. figure:: /img/Globaldrawer2.png + :alt: Global drawer on desktop + :scale: 40 % + :figclass: border + + Hamburger button on the toolbar on desktop. + +The Global Drawer is either opened by clicking on the hamburger button on the +toolbar or by swiping from the left edge of the screen. It can be closed by +swiping in the other direction, clicking the close button or tapping outside of +it. A Global Drawer may contain the following controls: - :doc:`Tabs ` - A main menu - :doc:`Push Buttons ` to execute non-contextual actions - :doc:`Checkboxes <../editing/checkbox>` or :doc:`Radio Buttons <../editing/radiobutton>` to change settings which are commonly changed The main menu - Must not have more than three levels - Should if possible not contain more elements than fit on the screen - Should contain an entry :doc:`Settings ` in the last position if the application has settings which are not commonly changed - Selecting an entry in the menu either executes an action or goes down one level, replacing the menu with the items in the selected submenu - In lower menu levels, below the entries there is a button to go up one level. Do not use the Menu Drawer for navigation purposes. Code ---- Kirigami ^^^^^^^^ .. code-block:: qml ... import QtQuick.Controls 2.2 as Controls import org.kde.kirigami 2.4 as Kirigami ... Kirigami.ApplicationWindow { ... globalDrawer: Kirigami.GlobalDrawer { + title: "..." + titleIcon: "..." + + topContent: [ + ... + ] + actions: [ Kirigami.Action { iconName: "list-import-user" text: i18n("&Import") }, Kirigami.Action { iconName: "list-export-user" text: i18n("&Export") }, Kirigami.Action { iconName: "user-group-delete" text: i18n("&Merge contacts") }, Kirigami.Action { iconName: "user-group-new" text: i18n("&Search dupplicate contacts") }, Kirigami.Action { iconName: "configure" text: i18n("&Settings") } ] } ... } diff --git a/source/img/Globaldrawer1.png b/source/img/Globaldrawer1.png new file mode 100644 index 0000000..90ab44b Binary files /dev/null and b/source/img/Globaldrawer1.png differ diff --git a/source/img/Globaldrawer2.png b/source/img/Globaldrawer2.png new file mode 100644 index 0000000..12ac72d Binary files /dev/null and b/source/img/Globaldrawer2.png differ diff --git a/source/img/Globaldrawer3.png b/source/img/Globaldrawer3.png new file mode 100644 index 0000000..79b83aa Binary files /dev/null and b/source/img/Globaldrawer3.png differ diff --git a/source/patterns/command/drawer.rst b/source/patterns/command/drawer.rst index 096639a..f5c92bf 100644 --- a/source/patterns/command/drawer.rst +++ b/source/patterns/command/drawer.rst @@ -1,49 +1,55 @@ Drawers ======= Drawers do not take away any room from the content, but need an extra action to access, and should therefore not be used for controls that are part of an application's main tasks. Global drawer ------------- -.. image:: /img/Menu_drawer_single.jpg +.. figure:: /img/Globaldrawer1.png :alt: Global drawer :scale: 40 % + :figclass: border + + Global drawer on mobile The global drawer is used for global, context-independent controls. - The drawer is opened by an edge-swipe (the side is system-defined) and closed by swiping in the other direction or tapping outside of the panel - For the guidelines regarding its content, see :doc:`global drawer `. Context drawer -------------- -.. image:: /img/Context_drawer.jpg +.. figure:: /img/Contextdrawer1.png :alt: Context drawer :scale: 40 % + :figclass: border + + Context drawer on mobile The context drawer (the side is system-defined) is used for context-specific controls that affect only the currently selected object (e.g. copy, delete etc.). - The drawer is opened by an edge-swipe and closed by swiping in the other direction or tapping outside of the panel - For the guidelines regarding its content, see the :doc:`context drawer `. Bottom drawer and dialog sheet ------------------------------ .. image:: /img/Bottom_Drawer.png :alt: Bottom drawer :scale: 40 % For a full modal dialog, use a :doc:`dialog sheet `. For a quick choice, use a :doc:`bottom drawer `.