Merge pull request #638 from nextcloud/content-list

Content list documentation

developer_manual/design/index.rst

@@ -8,6 +8,7 @@ Design guidelines
    navigation
    settings
    content
+   list
    popovermenu
    html
    icons

developer_manual/design/list.rst

@@ -0,0 +1,125 @@
+.. sectionauthor:: John Molakvoæ <skjnldsv@protonmail.com>
+.. codeauthor:: John Molakvoæ <skjnldsv@protonmail.com>
+..  _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
+
+    <div id="app-content-wrapper">
+        <div class="app-content-list">
+            <a href="#" class="app-content-list-item">
+                <input type="checkbox" id="test1" class="app-content-list-item-checkbox checkbox" checked="checked"><label for="test1"></label>
+                <div class="app-content-list-item-icon" style="background-color: rgb(231, 192, 116);">C</div>
+                <div class="app-content-list-item-line-one">Contact 1</div>
+                <div class="icon-delete"></div>
+            </a>
+            <a href="#" class="app-content-list-item">
+                <div class="app-content-list-item-star icon-starred"></div>
+                <div class="app-content-list-item-icon" style="background-color: rgb(151, 72, 96);">T</div>
+                <div class="app-content-list-item-line-one">Favourited task #2</div>
+                <div class="icon-more"></div>
+            </a>
+            <a href="#" class="app-content-list-item">
+                <div class="app-content-list-item-icon" style="background-color: rgb(152, 59, 144);">T</div>
+                <div class="app-content-list-item-line-one">Task #2</div>
+                <div class="icon-more"></div>
+            </a>
+            <a href="#" class="app-content-list-item">
+                <div class="app-content-list-item-icon" style="background-color: rgb(31, 192, 216);">M</div>
+                <div class="app-content-list-item-line-one">Important mail is very important! Don't ignore me</div>
+                <div class="app-content-list-item-line-two">Hello there, here is an important mail from your mom</div>
+            </a>
+            <a href="#" class="app-content-list-item">
+                <div class="app-content-list-item-icon" style="background-color: rgb(41, 97, 156);">N</div>
+                <div class="app-content-list-item-line-one">Important mail with a very long subject</div>
+                <div class="app-content-list-item-line-two">Hello there, here is an important mail from your mom</div>
+                <span class="app-content-list-item-details">8 hours ago</span>
+                <div class="icon-delete"></div>
+            </a>
+            <a href="#" class="app-content-list-item">
+                <div class="app-content-list-item-icon" style="background-color: rgb(141, 197, 156);">N</div>
+                <div class="app-content-list-item-line-one">New contact</div>
+                <div class="app-content-list-item-line-two">blabla@bla.com</div>
+                <div class="icon-delete"></div>
+            </a>
+        </div>
+        <div class="app-content-detail">
+        </div>
+    </div>
+
+
+Rules
+=============
+
+* You need to have the following structure for your global content:
+
+.. code-block:: html
+
+    <div id="app-content-wrapper">
+        <div class="app-content-list">HERE YOUR CONTENT LIST</div>
+        <div class="app-content-detail">HERE YOUR GLOBAL CONTENT</div>
+    </div>
+
+* 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 <popovermenu>` if multiple options are needed.
+   * In case of a popovermenu, see the :ref:`popover menu <popovermenulist>`.
+   * 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
+
+    <div class="app-content-list-item-menu">
+        <div class="icon-more"></div>
+        <div class="popovermenu">
+            <ul>
+                <li>
+                    <a href="#" class="icon-details">
+                        <span>Details</span>
+                    </a>
+                </li>
+                <li>
+                    <button class="icon-details">
+                        <span>Details</span>
+                    </button>
+                </li>
+                <li>
+                    <button>
+                        <span class="icon-details"></span>
+                        <span>Details</span>
+                    </button>
+                </li>
+                <li>
+                    <a>
+                        <span class="icon-details"></span>
+                        <span>Details</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>