Merge pull request #589 from nextcloud/popover-update

Bump popover structure and image

developer_manual/design/html.rst

@@ -21,6 +21,8 @@ Please use the html5 ``progress`` element.
 
     <progress value="42.79" max="100"></progress>
 
+.. _checkboxes-and-radios:
+
 Checkboxes and radios
 ======================
 

developer_manual/design/popovermenu.rst

@@ -24,35 +24,47 @@ Basic layout
 
     <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>
+           <li>
+               <a href="#" class="icon-details">
+                   <span>Details</span>
+               </a>
+           </li>
+           <li>
+               <button class="icon-close">
+                   <span>Remove</span>
+               </button>
+           </li>
+           <li>
+               <button>
+                   <span class="icon-favorite"></span>
+                   <span>Favorite</span>
+               </button>
+           </li>
+           <li>
+               <a>
+                   <span class="icon-rename"></span>
+                   <span>Edit</span>
+               </a>
+           </li>
+           <li>
+               <span class="menuitem">
+                   <input id="check1" type="checkbox" class="checkbox" />
+                   <label for="check1">Enable</label>
+               </span>
+           </li>
+           <li>
+               <span class="menuitem">
+                   <input id="radio1" type="radio" class="radio" />
+                   <label for="radio1">Select</label>
+               </span>
+           </li>
         <ul>
     </div>
 
 Technical details
 ==================
 
-* The only allowed menu items elements are **a** and **button**.
+* The only allowed menu items elements are **a**, **button** and **span** for the checkbox and radio only.
 * You can mix between a and button on the same menu (in case of form or direct link) like the example above
 * You need to put the entire menu just after the three dot icon ``<div><span class="icon-more"></span><div class="popovermenu">...</div></div>``
 * You do not need JS, CSS only is ok for positioning. JS is **still** required to handle the hide/show.
@@ -60,6 +72,8 @@ Technical details
 * Only **one level** of menu is allowed.
 * Every entry **needs** to have its own icon. This greatly improves the UX.
 * The required **right** distance to the border (or padding, whatever you want to use) of the three-dot icon should be 14px (5 for menu margin and 6 for arrow position)
+* The ``span`` element **must** have the ``menuitem`` class.
+* The checkbox/radio must use the :ref:`nextcloud custom <checkboxes-and-radios>`
 
 .. image:: ../images/popover-position.png