diff --git a/developer_manual/design/checkboxes.rst b/developer_manual/design/checkboxes.rst new file mode 100644 index 000000000..50f6d91b7 --- /dev/null +++ b/developer_manual/design/checkboxes.rst @@ -0,0 +1,7 @@ +.. sectionauthor:: John Molakvoæ +.. codeauthor:: John Molakvoæ +.. _checkboxes: + +=============== +Checkboxes +=============== diff --git a/developer_manual/design/content.rst b/developer_manual/design/content.rst new file mode 100644 index 000000000..7b9cfadd0 --- /dev/null +++ b/developer_manual/design/content.rst @@ -0,0 +1,7 @@ +.. sectionauthor:: John Molakvoæ +.. codeauthor:: John Molakvoæ +.. _content: + +=============== +Main content +=============== diff --git a/developer_manual/design/index.rst b/developer_manual/design/index.rst index dc48991e7..37f0d7ec1 100644 --- a/developer_manual/design/index.rst +++ b/developer_manual/design/index.rst @@ -6,4 +6,8 @@ Design Guidelines :maxdepth: 2 navigation + settings + content popovermenu + progress + checkboxes diff --git a/developer_manual/design/navigation.rst b/developer_manual/design/navigation.rst index d632ba0c3..63de59cae 100644 --- a/developer_manual/design/navigation.rst +++ b/developer_manual/design/navigation.rst @@ -1,5 +1,6 @@ .. sectionauthor:: John Molakvoæ .. codeauthor:: John Molakvoæ +.. _navigation: =============== App Navigation @@ -19,6 +20,9 @@ It needs to be: Nextcloud provide a very organized way of building menus. We implemented various essential functions and provide easy way of using them. +.. figure:: ../images/navigation.png + :alt: Navigation screenshot + Basic layout ============= @@ -44,51 +48,58 @@ Each entry is allowed to have a counter and/or a button for user interraction. * 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 buttons - * One button and one counter + * Two buttons + * One button and one counter * 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-block:: html
-
    -
  • 1
    • -
  • - -
    • -
+
    +
  • 1
    • +
  • + +
    • +
+.. _navigation_menu: + Menu ^^^^^ -If you need to add a few interractions for your entry, you can but everything in a popover menu. +If you need to add a few interractions for your entry, you can put everything in a popover menu. The menu needs to be placed after the ``app-navigation-entry-utils``. +For the global rules and/or layout, you can check the dedicated :ref:`popover menu section `. + +.. figure:: ../images/navigation-menu.png + :alt: Navigation menu + .. code-block:: html
- +
Counter @@ -97,12 +108,33 @@ Counter If you need to add a counter to your menu entry, you can simply use this structure. Do not change the alignment of the text. If you're using +.. figure:: ../images/navigation-counter.png + :alt: Navigation entry with counter + .. code-block:: html
  • 1
    • +Drag and drop +============== +The class which should be applied to a first level element **li** that hosts or can host a second level is **drag-and-drop**. +This will cause the hovered entry to slide down giving a visual hint that it can accept the dragged element. +In case of jQuery UI's droppable feature, the **hoverClass** option should be set to the **drag-and-drop** class. +.. code-block:: html + Collapsible entry ================== diff --git a/developer_manual/design/popovermenu.rst b/developer_manual/design/popovermenu.rst index da886e5a7..bf1bd22e9 100644 --- a/developer_manual/design/popovermenu.rst +++ b/developer_manual/design/popovermenu.rst @@ -1,5 +1,6 @@ .. sectionauthor:: John Molakvoæ .. codeauthor:: John Molakvoæ +.. _popovermenu: =============== Popover Menu @@ -9,7 +10,8 @@ What is a popover menu ======================= This is a quick menu that open on click. We're usually using the three dots icons on nextcloud. -This menu currently differs from the navigation menu on the app-navigation section on the left. We should definitely merge those two and make one single way to create a popover menu on nextcloud (see app-navigation-entry-menu class on css files) + +This is exactly the same as the :ref:`navigation menu `. The only difference is the popovermenu class. .. image:: ../images/popovermenu.png @@ -18,30 +20,30 @@ Basic layout .. code-block:: html -
    -
    +
    +
    Technical details ================== diff --git a/developer_manual/design/progress.rst b/developer_manual/design/progress.rst new file mode 100644 index 000000000..1d72e6b02 --- /dev/null +++ b/developer_manual/design/progress.rst @@ -0,0 +1,7 @@ +.. sectionauthor:: John Molakvoæ +.. codeauthor:: John Molakvoæ +.. _progress: + +=============== +Progress bar +=============== diff --git a/developer_manual/design/settings.rst b/developer_manual/design/settings.rst new file mode 100644 index 000000000..6449f315e --- /dev/null +++ b/developer_manual/design/settings.rst @@ -0,0 +1,7 @@ +.. sectionauthor:: John Molakvoæ +.. codeauthor:: John Molakvoæ +.. _settings: + +=============== +Settings +=============== diff --git a/developer_manual/images/navigation-counter.png b/developer_manual/images/navigation-counter.png new file mode 100644 index 000000000..cd9ffc866 Binary files /dev/null and b/developer_manual/images/navigation-counter.png differ diff --git a/developer_manual/images/navigation-menu.png b/developer_manual/images/navigation-menu.png new file mode 100644 index 000000000..6c36dd44e Binary files /dev/null and b/developer_manual/images/navigation-menu.png differ diff --git a/developer_manual/images/navigation.png b/developer_manual/images/navigation.png new file mode 100644 index 000000000..16704168f Binary files /dev/null and b/developer_manual/images/navigation.png differ