mirror of
https://github.com/nextcloud/documentation.git
synced 2026-01-02 17:59:36 +07:00
More pages and some pictures
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
7
developer_manual/design/checkboxes.rst
Normal file
7
developer_manual/design/checkboxes.rst
Normal file
@@ -0,0 +1,7 @@
|
||||
.. sectionauthor:: John Molakvoæ <skjnldsv@protonmail.com>
|
||||
.. codeauthor:: John Molakvoæ <skjnldsv@protonmail.com>
|
||||
.. _checkboxes:
|
||||
|
||||
===============
|
||||
Checkboxes
|
||||
===============
|
||||
7
developer_manual/design/content.rst
Normal file
7
developer_manual/design/content.rst
Normal file
@@ -0,0 +1,7 @@
|
||||
.. sectionauthor:: John Molakvoæ <skjnldsv@protonmail.com>
|
||||
.. codeauthor:: John Molakvoæ <skjnldsv@protonmail.com>
|
||||
.. _content:
|
||||
|
||||
===============
|
||||
Main content
|
||||
===============
|
||||
@@ -6,4 +6,8 @@ Design Guidelines
|
||||
:maxdepth: 2
|
||||
|
||||
navigation
|
||||
settings
|
||||
content
|
||||
popovermenu
|
||||
progress
|
||||
checkboxes
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
.. sectionauthor:: John Molakvoæ <skjnldsv@protonmail.com>
|
||||
.. codeauthor:: John Molakvoæ <skjnldsv@protonmail.com>
|
||||
.. _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
|
||||
|
||||
<div class="app-navigation-entry-utils">
|
||||
<ul>
|
||||
<li class="app-navigation-entry-utils-counter">1</li>
|
||||
<li class="app-navigation-entry-utils-menu-button">
|
||||
<button></button>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li class="app-navigation-entry-utils-counter">1</li>
|
||||
<li class="app-navigation-entry-utils-menu-button">
|
||||
<button></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
.. _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 <popovermenu>`.
|
||||
|
||||
.. figure:: ../images/navigation-menu.png
|
||||
:alt: Navigation menu
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
<div class="app-navigation-entry-menu">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-add"></span>
|
||||
<span>Add</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-rename"></span>
|
||||
<span>Edit</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-delete"></span>
|
||||
<span>Remove</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-add"></span>
|
||||
<span>Add</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-rename"></span>
|
||||
<span>Edit</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-delete"></span>
|
||||
<span>Remove</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
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
|
||||
|
||||
<li class="app-navigation-entry-utils-counter">1</li>
|
||||
|
||||
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
|
||||
|
||||
<div id="app-navigation">
|
||||
<ul>
|
||||
<li><a href="#">First level entry</a></li>
|
||||
<li class="drag-and-drop">
|
||||
<a href="#" class="icon-folder">Folder name</a>
|
||||
<ul>
|
||||
<li><a href="#">Folder contents</a></li>
|
||||
<li><a href="#">Folder contents</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Collapsible entry
|
||||
==================
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
.. sectionauthor:: John Molakvoæ <skjnldsv@protonmail.com>
|
||||
.. codeauthor:: John Molakvoæ <skjnldsv@protonmail.com>
|
||||
.. _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 <navigation_menu>`. The only difference is the popovermenu class.
|
||||
|
||||
.. image:: ../images/popovermenu.png
|
||||
|
||||
@@ -18,30 +20,30 @@ Basic layout
|
||||
|
||||
.. code-block:: html
|
||||
|
||||
<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 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>
|
||||
|
||||
Technical details
|
||||
==================
|
||||
|
||||
7
developer_manual/design/progress.rst
Normal file
7
developer_manual/design/progress.rst
Normal file
@@ -0,0 +1,7 @@
|
||||
.. sectionauthor:: John Molakvoæ <skjnldsv@protonmail.com>
|
||||
.. codeauthor:: John Molakvoæ <skjnldsv@protonmail.com>
|
||||
.. _progress:
|
||||
|
||||
===============
|
||||
Progress bar
|
||||
===============
|
||||
7
developer_manual/design/settings.rst
Normal file
7
developer_manual/design/settings.rst
Normal file
@@ -0,0 +1,7 @@
|
||||
.. sectionauthor:: John Molakvoæ <skjnldsv@protonmail.com>
|
||||
.. codeauthor:: John Molakvoæ <skjnldsv@protonmail.com>
|
||||
.. _settings:
|
||||
|
||||
===============
|
||||
Settings
|
||||
===============
|
||||
BIN
developer_manual/images/navigation-counter.png
Normal file
BIN
developer_manual/images/navigation-counter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
developer_manual/images/navigation-menu.png
Normal file
BIN
developer_manual/images/navigation-menu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
BIN
developer_manual/images/navigation.png
Normal file
BIN
developer_manual/images/navigation.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Reference in New Issue
Block a user