diff --git a/source/components/index.rst b/source/components/index.rst --- a/source/components/index.rst +++ b/source/components/index.rst @@ -18,6 +18,7 @@ slider spinbox splitter + swipelistitem tableview * :doc:`actionbutton` @@ -32,4 +33,5 @@ * :doc:`slider` * :doc:`spinbox` * :doc:`splitter` +* :doc:`swipelistitem` * :doc:`tableview` diff --git a/source/components/swipelistitem.rst b/source/components/swipelistitem.rst new file mode 100644 --- /dev/null +++ b/source/components/swipelistitem.rst @@ -0,0 +1,44 @@ +Swipe list item +=============== + +.. image:: /img/Slide_to_reveal.jpg + :alt: Slide to reveal actions + :scale: 40 % + +When to use +----------- + +This uses an :doc:`on-demand pattern ` as +alternative to always visible controls in lists. If the user +often performs tasks on single items of a list, add a handle on the side +the list item (next to the context drawer's edge, defined by a +system-wide configuration) which. + +How to use +---------- + +- See :doc:`on-demand pattern ` for + general recomendations. +- |desktopicon| If only one action is available, most the time it's better + to not use the on-demand pattern, but show the action right away. + +Behavior +--------- + +The item slides only as far as needed, so the user has a visual hint +which item is swiped. + +|desktopicon| Desktop +~~~~~~~~~~~~~~~~~~~~~ + +On-demand controls are shown when hovering over the item with the cursor. +A handle is shown to support devices with touch screens. Swiping the handle +right to left reveals the actions. +As soon as the user taps anywhere else or the pointer is not any longer +hovering the item, the handle is slid back. + +|mobileicon| Mobile +~~~~~~~~~~~~~~~~~~~ +On-demand controls are revealed by sliding a handle from right to left +to reveal them. As soon as the user taps anywhere else, the +handle is slid back. diff --git a/source/img/Dolphin_hover.png b/source/img/Dolphin_hover.png new file mode 100644 index 0000000000000000000000000000000000000000..7935d639239d4b89a5346bb51f087a4d7c084787 GIT binary patch literal 10034 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 literal 0 Hc$@`. +- Only use on-demand controls, if the actions are the same for each item. +- Since the actions don't have a label, don't use the on-demand pattern, + if the actions are not clearly identifiable. + +.. caution:: + Especially if only one action is available, it is often better to show + the action directly or have the action as default on the item. + + +Behavior +--------- + +|desktopicon| Desktop +~~~~~~~~~~~~~~~~~~~~~ + +On-demand controls are shown when hovering over the item with the cursor. +A handle can be added to enable touch screen support. +As soon as the user taps anywhere else or the pointer is not any longer +hovering the item, the on-demand controls are hiden again. + +.. image:: /img/Dolphin_hover.png + :alt: 240px + :scale: 60 % + +|mobileicon| Mobile +~~~~~~~~~~~~~~~~~~~ +On-demand controls are revealed by sliding a handle from right to left +to reveal them. As soon as the user taps anywhere else, the +handle is slid back. +For futher guidelines see :doc:`swip list item `. diff --git a/source/patterns/command/slide.rst b/source/patterns/command/slide.rst deleted file mode 100644 --- a/source/patterns/command/slide.rst +++ /dev/null @@ -1,13 +0,0 @@ -Slide to reveal actions -======================= - -.. image:: /img/Slide_to_reveal.jpg - :alt: Slide to reveal actions - :scale: 40 % - -This is an alternative to always visible controls in lists: If the user -often performs tasks on single items of a list, add a handle on the side -the list item (next to the context drawer's edge, defined by a -system-wide configuration) which, when slid sideways, reveals actions -for that particular item. As soon as the user taps anywhere else, the -handle is slid back.