diff --git a/developer_manual/design/checkboxes.rst b/developer_manual/design/html.rst similarity index 84% rename from developer_manual/design/checkboxes.rst rename to developer_manual/design/html.rst index 50f6d91b7..43dd724e0 100644 --- a/developer_manual/design/checkboxes.rst +++ b/developer_manual/design/html.rst @@ -1,7 +1,7 @@ .. sectionauthor:: John Molakvoæ .. codeauthor:: John Molakvoæ -.. _checkboxes: +.. _html: =============== -Checkboxes +Html elements =============== diff --git a/developer_manual/design/index.rst b/developer_manual/design/index.rst index 37f0d7ec1..17a8e1b27 100644 --- a/developer_manual/design/index.rst +++ b/developer_manual/design/index.rst @@ -9,5 +9,4 @@ Design Guidelines settings content popovermenu - progress - checkboxes + html diff --git a/developer_manual/design/navigation.rst b/developer_manual/design/navigation.rst index cb6d8047f..b7b96891b 100644 --- a/developer_manual/design/navigation.rst +++ b/developer_manual/design/navigation.rst @@ -29,18 +29,18 @@ Basic layout .. code:: html - + Utils ====== @@ -49,22 +49,22 @@ Each entry is allowed to have a counter and/or a button for user interaction. * The ``app-navigation-entry-utils`` snippet need to be placed right next to the main link of your entry. * Maximum **two** items are allowed into the utils section. You can have: - * Two :ref:`buttons ` - * One :ref:`button ` and one :ref:`button ` + * Two :ref:`buttons ` + * One :ref:`button ` and one :ref:`button ` * You **can't** have more than two buttons, if you need more, you need to add a menu. * The order of the button and the counter are **not** interchangeable. You need to put the counter before the menu. .. code:: html :class: with-figure -
-
    -
  • 1
    • -
  • - -
    • -
-
+
+
    +
  • 1
    • +
  • + +
    • +
+
.. _navigation_menu: @@ -82,28 +82,28 @@ For the global rules and/or layout, you can check the dedicated :ref:`popover me .. code:: html -
- -
+
+ +
.. _navigation_counter: @@ -119,7 +119,7 @@ Do not change the alignment of the text. If you're using .. code:: html -
  • 1
    • +
  • 1
    • .. _navigation_buttons: @@ -137,16 +137,16 @@ The same way we display the menu three-dot-icon button, you're allowed to use up .. code:: html -
    -
      -
    • - -
      • -
    • - -
      • -
    -
    +
    +
      +
    • + +
      • +
    • + +
      • +
    +
    Drag and drop ============== @@ -156,22 +156,55 @@ In case of jQuery UI's droppable feature, the **hoverClass** option should be se .. code:: html - + Collapsible entry ================== +By default, all sub-entries are shown. +This behavior can be changed by creating a collapsible menu. +This way, the menu will be hidden and an arrow will be added in in front of it (replacing the icon if any). + +The opening of the menu is activated and animated by the class ``open`` on the main ``li``. + +* You can **not** have a collapsible menu on a sub-item, this can only exist on a top-level element. +* You can set the open class by default if you want. +* Do **not** use the collapsible menu if your element does not have sub-items. +* You **still** need to use JS to handle the click event. + +.. IMPORTANT:: + * If your top-level link is only used as a header, the **entire** ``a`` needs to be used to toggle the ``open`` class. + * If your top-level link is used to redirect the user or to trigger something else, you **need** to add the collapsible button and use it as the ``open`` class toggle trigger. + +.. figure:: ../images/navigation-collapsible.gif + :alt: Collapsible navigation entry + :align: right + +.. code:: html + +
  • + This is optional + Folder collapsed menu + +
    • Entry bullet ============= diff --git a/developer_manual/design/progress.rst b/developer_manual/design/progress.rst deleted file mode 100644 index 1d72e6b02..000000000 --- a/developer_manual/design/progress.rst +++ /dev/null @@ -1,7 +0,0 @@ -.. sectionauthor:: John Molakvoæ -.. codeauthor:: John Molakvoæ -.. _progress: - -=============== -Progress bar -=============== diff --git a/developer_manual/images/navigation-collapsible.gif b/developer_manual/images/navigation-collapsible.gif new file mode 100644 index 000000000..ec87c186b Binary files /dev/null and b/developer_manual/images/navigation-collapsible.gif differ diff --git a/developer_manual/images/navigation-collapsible.png b/developer_manual/images/navigation-collapsible.png new file mode 100644 index 000000000..61ef54bd1 Binary files /dev/null and b/developer_manual/images/navigation-collapsible.png differ