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>

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

image

icon-loading

image

icon-loading-dark

image

icon-loading-small

image

icon-add

image

icon-caret

image

icon-caret-dark

image

icon-checkmark

image

icon-checkmark-white

image

icon-clock

image

icon-close

image

icon-confirm

image

icon-delete

image

icon-download

image

icon-history

image

icon-info

image

icon-lock

image

icon-logout

image

icon-mail

image

icon-more

image

icon-password

image

icon-pause

image

icon-pause-big

image

icon-play

image

icon-play-add

image

icon-play-big

image

icon-play-next

image

icon-play-previous

image

icon-public

image

icon-rename

image

icon-search

image

icon-settings

image

icon-share

image

icon-shared

image

icon-sound

image

icon-sound-off

image

icon-star

image

icon-starred

image

icon-toggle

image

icon-triangle-e

image

icon-triangle-n

image

icon-triangle-s

image

icon-upload

image

icon-upload-white

image

icon-user

image

icon-view-close

image

icon-view-next

image

icon-view-pause

image

icon-view-play

image

icon-view-previous

image

icon-calendar-dark

image

icon-contacts-dark

image

icon-file

image

icon-files

image

icon-folder

image

icon-filetype-text

image

icon-filetype-folder

image

icon-home

image

icon-link

image

icon-music

image

icon-picture

image