CSS

The CSS files reside in the css/ folder and should be included in the template:

<?php
// include one file
style('myapp', 'style');  // adds css/style.css

// include multiple files for the same app
style('myapp', ['style', 'navigation']);  // adds css/style.css, css/navigation.css

// include vendor file (also allows vendor syntax)
vendor_style('myapp', 'style');  // adds vendor/style.css

Web Components go into the component/ folder and can be imported like this:

<?php
// include one file
component('myapp', 'tabs');  // adds component/tabs.html

// include multiple files for the same app
component('myapp', ['tabs', 'forms']);  // adds component/tabs.html, component/forms.html

Keep in mind that Web Components are still new and you might need to add polyfills using Polymer

Standard Layout

To use the commonly used layout consisting of sidebar navigation and content the app-navigation and app-content ids can be utilized:

<div id="app">
    <div id="app-navigation">Your navigation</div>
    <div id="app-content">
        <div id="app-content-wrapper">
            Your content in here
        </div>
    </div>
</div>

For built in mobile support your content has to be wrapped inside another div with the id app-content-wrapper.

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; we do not recommend further indentations.

<div id="app-navigation">
    <ul class="with-icon">
        <li><a href="#">First level entry</a></li>
        <li>
            <a href="#">First level container</a>
            <ul>
                <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 standard entries, the links which show the title of the folder need to have the icon-folder 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:

<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="icon-folder svg">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 the case of jQuery UI’s droppable feature, the hoverClass option should be set to the drag-and-drop class.

<div id="app-navigation">
    <ul class="with-icon">
        <li><a href="#">First level entry</a></li>
        <li class="drag-and-drop">
            <a href="#" class="icon-folder svg">Folder name</a>
            <ul>
                <li><a href="#">Folder contents</a></li>
                <li><a href="#">Folder contents</a></li>
            </ul>
        </li>
    </ul>
</div>

Menus

To add actions that affect the current list element, you can add a menu for second and/or first level elements by adding the button and menu inside the corresponding li element and adding the with-menu CSS class:

<div id="app-navigation">
    <ul>
        <li class="with-counter with-menu">
            <a href="#">First level entry</a>

            <div class="app-navigation-entry-utils">
                <ul>
                    <li class="app-navigation-entry-utils-counter">15</li>
                    <li class="app-navigation-entry-utils-menu-button svg"><button></button></li>
                </ul>
            </div>

            <div class="app-navigation-entry-menu open">
                <ul>
                    <li><button class="icon-rename svg" title="rename"></button></li>
                    <li><button class="icon-delete svg" title="delete"></button></li>
                </ul>
            </div>

        </li>
</div>

The div with the class app-navigation-entry-utils contains only the button (class: app-navigation-entry-utils-menu-button) to display the menu but in many cases, another entry is needed to display some sort of count (mails count, unread feed count, etc.). In that case, add the with-counter class to the list entry to adjust the correct padding and text-overflow of the entry’s title.

The count should be limited to 999 and turn to 999+ if any higher number is given. If AngularJS is used the following filter can be used to get the correct behavior:

app.filter('counterFormatter', function () {
    'use strict';
    return function (count) {
        if (count > 999) {
            return '999+';
        }
        return count;
    };
});

Use it like this:

<li class="app-navigation-entry-utils-counter">{{ count | counterFormatter }}</li>

The menu is hidden by default (display: none) and has to be triggered by adding the open class to the app-navigation-entry-menu div. In the case of AngularJS the following small directive can be added to handle all the display and click logic out of the box:

app.run(function ($document, $rootScope) {
    'use strict';
    $document.click(function (event) {
        $rootScope.$broadcast('documentClicked', event);
    });
});

app.directive('appNavigationEntryUtils', function () {
    'use strict';
    return {
        restrict: 'C',
         function (scope, elm) {
            var menu = elm.siblings('.app-navigation-entry-menu');
            var button = $(elm)
                .find('.app-navigation-entry-utils-menu-button button');

            button.click(function () {
                menu.toggleClass('open');
            });

            scope.$on('documentClicked', function (scope, event) {
                if (event.target !== button[0]) {
                    menu.removeClass('open');
                }
            });
        }
    };
});

Editing

Often an edit option is needed for an entry. To add one for a given entry simply hide the title and add the following div inside the entry:

<div id="app-navigation">
    <ul class="with-icon">
        <li>
            <a href="#" class="hidden">First level entry</a>

            <div class="app-navigation-entry-edit">
                <form>
                    <input type="text" value="First level entry" autofocus-on-insert>
                    <input type="submit" value="" class="action icon-checkmark svg">
                </form>
            </div>

        </li>
    </ul>
</div>

If AngularJS is used you want to auto-focus the input box. This can be achieved by placing the show condition inside an ng-if on the app-navigation-entry-edit div and adding the following directive:

app.directive('autofocusOnInsert', function () {
    'use strict';
    return function (scope, elm) {
        elm.focus();
    };
});

ng-if is required because it removes/inserts the element into the DOM dynamically instead of just adding a display: none to it like ng-show and ng-hide.

Undo Entry

If you want to undo a performed action on a navigation entry such as deletion, you should show the undo directly in place of the entry and make it disappear after location change or seven seconds:

<div id="app-navigation">
    <ul class="with-icon">
        <li>
            <a href="#" class="hidden">First level entry</a>

            <div class="app-navigation-entry-deleted">
                <div class="app-navigation-entry-deleted-description">Deleted X</div>
                <button class="app-navigation-entry-deleted-button icon-history svg" title="Undo"></button>
            </div>
        </li>
    </ul>
</div>

Settings Area

To create a settings area create a div with the id app-settings inside the app-navgiation div:

<div id="app">

    <div id="app-navigation">

        <!-- Your navigation here -->

        <div id="app-settings">
            <div id="app-settings-header">
                <button class="settings-button"
                        data-apps-slide-toggle="#app-settings-content"
                ></button>
            </div>
            <div id="app-settings-content">
                <!-- Your settings in here -->
            </div>
        </div>
    </div>
</div>

The data attribute data-apps-slide-toggle slides up a target area using a jQuery selector and hides the area if the user clicks outside of it.

Icons

To use icons which are shipped in core, special classes to apply the background image are supplied. All of these classes use background-position: center and background-repeat: no-repeat.

Name	Image
icon-breadcrumb
icon-loading
icon-loading-dark
icon-loading-small
icon-add
icon-caret
icon-caret-dark
icon-checkmark
icon-checkmark-white
icon-clock
icon-close
icon-confirm
icon-delete
icon-download
icon-history
icon-info
icon-lock
icon-logout
icon-mail
icon-more
icon-password
icon-pause
icon-pause-big
icon-play
icon-play-add
icon-play-big
icon-play-next
icon-play-previous
icon-public
icon-rename
icon-search
icon-settings
icon-share
icon-shared
icon-sound
icon-sound-off
icon-star
icon-starred
icon-toggle
icon-triangle-e
icon-triangle-n
icon-triangle-s
icon-upload
icon-upload-white
icon-user
icon-view-close
icon-view-next
icon-view-pause
icon-view-play
icon-view-previous
icon-calendar-dark
icon-contacts-dark
icon-file
icon-files
icon-folder
icon-filetype-text
icon-filetype-folder
icon-home
icon-link
icon-music
icon-picture

Name

Image

icon-breadcrumb