mirrors/nextcloud-documentation
3
0
Fork 0
mirror of https://github.com/nextcloud/documentation.git synced 2025-10-26 11:18:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

add docs for folders and drag and drop

Browse Source
This commit is contained in:
Bernhard Posselt 2014-08-28 12:55:50 +02:00
parent 5de90ec439
commit 83efbb88f7
2 changed files with 51 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
developer_manual/app/css.rst
View File

@ -24,22 +24,67 @@ To use the commonly used layout consisting of sidebar navigation and content the
Navigation
==========
ownCloud provides a default CSS navigation layout. If list entries should have 16x16 px icons, the **with-icon** class can be added to the base **ul**:
ownCloud provides a default CSS navigation layout. If list entries should have 16x16 px icons, the **with-icon** class can be added to the base **ul**. The maximum supported indention level is two, further indentions are not recommended.
.. code-block:: html
<div id="app-navigation">
<ul class="with-icon">
<li><a href="#">First level</a></li>
<li><a href="#">First level entry</a></li>
<li>
<a href="#">First level container</a>
<ul>
<li><a href="#">Second level</a></li>
<li><a href="#">Second level</a></li>
<li><a href="#">Second level entry</a></li>
<li><a href="#">Second level entry</a></li>
</ul>
</li>
</ul>
</div>
Folders
-------
Folders are like normal entries and are only supported for the first level. In contrast to normal entries, the links which show the title of the folder need to have the **folder-icon** css class.
If the folder should be collapsible, the **collapsible** class and a button with the class **collapse** are needed. After adding the collapsible class the folder's child entries can be toggled by adding the **open** class to the list element:
.. code-block:: html
<div id="app-navigation">
<ul class="with-icon">
<li><a href="#">First level entry</a></li>
<li class="collapsible open">
<button class="collapse"></button>
<a href="#" class="folder-icon">Folder name</a>
<ul>
<li><a href="#">Folder contents</a></li>
<li><a href="#">Folder contents</a></li>
</ul>
</li>
</ul>
</div>
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 class="with-icon">
<li><a href="#">First level entry</a></li>
<li class="drag-and-drop">
<a href="#" class="folder-icon">Folder name</a>
<ul>
<li><a href="#">Folder contents</a></li>
<li><a href="#">Folder contents</a></li>
</ul>
</li>
</ul>
</div>
Settings Area
=============
To create a settings area create a div with the id **app-settings** inside the **app-navgiation** div:

4
developer_manual/testing/index.rst
View File

@ -7,7 +7,7 @@ ownCloud Test Pilots
:hidden:
The ownCloud Test Pilots help to test and improve different server and client setups with ownCloud.
The ownCloud Test Pilots help to test and improve different server and client setups with ownCloud.
Why do you want to join
-----------------------
@ -75,7 +75,7 @@ tracker. It might even be fixed, sometimes! It can also be fruitful to contact t
`developers on irc <irc://freenode/#owncloud-dev>`_. Tell them you're testing ownCloud
and share what problem you bumped into. Or just ask on the test-pilots mailing list.
Finally, if the issue you bump into is a clear bug and the developers are not aware of it, file it as a new issue. See :doc:`../bugtracker`
Finally, if the issue you bump into is a clear bug and the developers are not aware of it, file it as a new issue. See :doc:`../bugtracker/index`