diff --git a/developer_manual/design/index.rst b/developer_manual/design/index.rst index ff65e8fe9..89829bf81 100644 --- a/developer_manual/design/index.rst +++ b/developer_manual/design/index.rst @@ -8,6 +8,7 @@ Design guidelines navigation settings content + list popovermenu html icons diff --git a/developer_manual/design/list.rst b/developer_manual/design/list.rst new file mode 100644 index 000000000..6d399696f --- /dev/null +++ b/developer_manual/design/list.rst @@ -0,0 +1,125 @@ +.. sectionauthor:: John Molakvoæ +.. codeauthor:: John Molakvoæ +.. _list: + +============= +Content list +============= + +Introduction +============= + +On the main content, you may want to have a list of items displayed (like the contacts, or the mail app). +We provide a standardized structure for this specific purpose. + +Basic layout +============= + +.. figure:: ../images/list.png + :alt: Content list screenshot + +.. code-block:: html + +
+
+ + +
C
+
Contact 1
+
+ + +
+
T
+
Favourited task #2
+
+ + +
T
+
Task #2
+
+ + +
M
+
Important mail is very important! Don't ignore me
+
Hello there, here is an important mail from your mom
+ + +
N
+
Important mail with a very long subject
+
Hello there, here is an important mail from your mom
+ 8 hours ago +
+ + +
N
+
New contact
+
blabla@bla.com
+
+ +
+
+
+
+ + +Rules +============= + +* You need to have the following structure for your global content: + +.. code-block:: html + +
+
HERE YOUR CONTENT LIST
+
HERE YOUR GLOBAL CONTENT
+
+ +* The first code/screenshot example show all the combination allowed/available. +* When displaying the checkbox, the star will automatically be hidden. +* You can **NOT** have more than one button in an entry. You need to create a :ref:`popover menu ` if multiple options are needed. + * In case of a popovermenu, see the :ref:`popover menu `. + * As always, the **JS** is still needed to toggle the ``open`` class on this menu + +.. _popovermenulist: + +Popovermenu in item +==================== + +If you need a menu inside an item, you need to wrap it with the ``icon-more`` ``div`` inside a ``app-content-list-menu`` div. + +.. figure:: ../images/list-menu.png + :alt: Content list with menu + :figclass: figure-with-code + +.. code-block:: html + +
+
+
+ +
+
diff --git a/developer_manual/images/list-menu.png b/developer_manual/images/list-menu.png new file mode 100644 index 000000000..53bd60c63 Binary files /dev/null and b/developer_manual/images/list-menu.png differ diff --git a/developer_manual/images/list.png b/developer_manual/images/list.png new file mode 100644 index 000000000..da996ecaa Binary files /dev/null and b/developer_manual/images/list.png differ