-
-For built in mobile support your content has to be wrapped inside another div with the id **app-content-wrapper**.
-
-Navigation
-==========
-Nextcloud 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
-
-
-
-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 **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:
-
-.. code-block:: html
-
-
-
-
-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
-
-
-
-Menus
------
-
-.. versionadded:: 8
-
-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:
-
-.. code-block:: html
-
-
-
-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 limitted 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 behaviour:
-
-.. code-block:: js
-
- app.filter('counterFormatter', function () {
- 'use strict';
- return function (count) {
- if (count > 999) {
- return '999+';
- }
- return count;
- };
- });
-
-Use it like this:
-
-.. code-block:: html
-
-
{{ count | counterFormatter }}
-
-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 case of AngularJS the following small directive can be added to handle all the display and click logic out of the box:
-
-.. code-block:: js
-
- app.run(function ($document, $rootScope) {
- 'use strict';
- $document.click(function (event) {
- $rootScope.$broadcast('documentClicked', event);
- });
- });
-
- app.directive('appNavigationEntryUtils', function () {
- 'use strict';
- return {
- restrict: 'C',
- link: 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
--------
-
-.. versionadded:: 8
-
-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:
-
-.. code-block:: html
-
-
-
-If AngularJS is used you want to autofocus 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:
-
-.. code-block:: js
-
- 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
-----------
-
-.. versionadded:: 8
-
-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 7 seconds:
-
-
-.. code-block:: html
-
-
-
-
-Settings Area
-=============
-To create a settings area create a div with the id **app-settings** inside the **app-navigation** div:
-
-.. code-block:: html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-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**.
-
-* **icon-breadcrumb**:
- .. image:: ../img/7/breadcrumb.png
-
-* **icon-loading**:
- .. image:: ../img/7/loading.png
-
-* **icon-loading-dark**:
- .. image:: ../img/7/loading-dark.png
-
-* **icon-loading-small**:
- .. image:: ../img/7/loading-small.png
-
-* **icon-add**:
- .. image:: ../img/7/actions/add.png
-
-* **icon-caret**:
- .. image:: ../img/7/actions/caret.png
-
-* **icon-caret-dark**:
- .. image:: ../img/7/actions/caret-dark.png
-
-* **icon-checkmark**:
- .. image:: ../img/7/actions/checkmark.png
-
-* **icon-checkmark-white**:
- .. image:: ../img/7/actions/checkmark-white.png
-
-* **icon-clock**:
- .. image:: ../img/7/actions/clock.png
-
-* **icon-close**:
- .. image:: ../img/7/actions/close.png
-
-* **icon-confirm**:
- .. image:: ../img/7/actions/confirm.png
-
-* **icon-delete**:
- .. image:: ../img/7/actions/delete.png
-
-* **icon-download**:
- .. image:: ../img/7/actions/download.png
-
-* **icon-history**:
- .. image:: ../img/7/actions/history.png
-
-* **icon-info**:
- .. image:: ../img/7/actions/info.png
-
-* **icon-lock**:
- .. image:: ../img/7/actions/lock.png
-
-* **icon-logout**:
- .. image:: ../img/7/actions/logout.png
-
-* **icon-mail**:
- .. image:: ../img/7/actions/mail.png
-
-* **icon-more**:
- .. image:: ../img/7/actions/more.png
-
-* **icon-password**:
- .. image:: ../img/7/actions/password.png
-
-* **icon-pause**:
- .. image:: ../img/7/actions/pause.png
-
-* **icon-pause-big**:
- .. image:: ../img/7/actions/pause-big.png
-
-* **icon-play**:
- .. image:: ../img/7/actions/play.png
-
-* **icon-play-add**:
- .. image:: ../img/7/actions/play-add.png
-
-* **icon-play-big**:
- .. image:: ../img/7/actions/play-big.png
-
-* **icon-play-next**:
- .. image:: ../img/7/actions/play-next.png
-
-* **icon-play-previous**:
- .. image:: ../img/7/actions/play-previous.png
-
-* **icon-public**:
- .. image:: ../img/7/actions/public.png
-
-* **icon-rename**:
- .. image:: ../img/7/actions/rename.png
-
-* **icon-search**:
- .. image:: ../img/7/actions/search.png
-
-* **icon-settings**:
- .. image:: ../img/7/actions/settings.png
-
-
-* **icon-share**:
- .. image:: ../img/7/actions/share.png
-
-* **icon-shared**:
- .. image:: ../img/7/actions/shared.png
-
-* **icon-sound**:
- .. image:: ../img/7/actions/sound.png
-
-* **icon-sound-off**:
- .. image:: ../img/7/actions/sound-off.png
-
-* **icon-star**:
- .. image:: ../img/7/actions/star.png
-
-* **icon-starred**:
- .. image:: ../img/7/actions/starred.png
-
-* **icon-toggle**:
- .. image:: ../img/7/actions/toggle.png
-
-
-* **icon-triangle-e**:
- .. image:: ../img/7/actions/triangle-e.png
-
-* **icon-triangle-n**:
- .. image:: ../img/7/actions/triangle-n.png
-
-* **icon-triangle-s**:
- .. image:: ../img/7/actions/triangle-s.png
-
-
-* **icon-upload**:
- .. image:: ../img/7/actions/upload.png
-
-* **icon-upload-white**:
- .. image:: ../img/7/actions/upload-white.png
-
-
-* **icon-user**:
- .. image:: ../img/7/actions/user.png
-
-* **icon-view-close**:
- .. image:: ../img/7/actions/view-close.png
-
-* **icon-view-next**:
- .. image:: ../img/7/actions/view-next.png
-
-* **icon-view-pause**:
- .. image:: ../img/7/actions/view-pause.png
-
-* **icon-view-play**:
- .. image:: ../img/7/actions/view-play.png
-
-* **icon-view-previous**:
- .. image:: ../img/7/actions/view-previous.png
-
-* **icon-calendar-dark**:
- .. image:: ../img/7/places/calendar-dark.png
-
-* **icon-contacts-dark**:
- .. image:: ../img/7/places/contacts-dark.png
-
-* **icon-file**:
- .. image:: ../img/7/places/file.png
-
-* **icon-files**:
- .. image:: ../img/7/places/files.png
-
-* **icon-folder**:
- .. image:: ../img/7/places/folder.png
-
-* **icon-filetype-text**:
- .. image:: ../img/7/filetypes/text.png
-
-* **icon-filetype-folder**:
- .. image:: ../img/7/filetypes/folder.png
-
-* **icon-home**:
- .. image:: ../img/7/places/home.png
-
-* **icon-link**:
- .. image:: ../img/7/places/link.png
-
-* **icon-music**:
- .. image:: ../img/7/places/music.png
-
-* **icon-picture**:
- .. image:: ../img/7/places/picture.png
diff --git a/developer_manual/conf.py b/developer_manual/conf.py
index 2062e281a..686c06641 100644
--- a/developer_manual/conf.py
+++ b/developer_manual/conf.py
@@ -48,9 +48,9 @@ copyright = u'2012-2017, The Nextcloud developers'
# built documents.
#
# The short X.Y version.
-version = '12'
+version = '13'
# The full version, including alpha/beta/rc tags.
-release = '12'
+release = '13'
# The language for content autogenerated by Sphinx. Refer to documentation
# for a list of supported languages.
@@ -179,7 +179,7 @@ latex_elements = {
#'pointsize': '10pt',
# Additional stuff for the LaTeX preamble.
-#'preamble': '',
+'preamble': '\extrafloats{100}\maxdeadcycles=500',
}
# Grouping the document tree into LaTeX files. List of tuples
@@ -292,3 +292,12 @@ epub_copyright = u'2012-2017, The Nextcloud developers'
# Include todos?
todo_include_todos = True
+
+
+from sphinx.builders.html import StandaloneHTMLBuilder
+StandaloneHTMLBuilder.supported_image_types = [
+ 'image/svg+xml',
+ 'image/gif',
+ 'image/png',
+ 'image/jpeg'
+]
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/html.rst b/developer_manual/design/html.rst
new file mode 100644
index 000000000..8fb819848
--- /dev/null
+++ b/developer_manual/design/html.rst
@@ -0,0 +1,77 @@
+.. sectionauthor:: John Molakvoæ
+.. codeauthor:: John Molakvoæ
+.. _html:
+
+===============
+Html elements
+===============
+
+Progress bar
+=============
+
+Nextcloud support and provides an already themed progress bar.
+
+Please use the html5 ``progress`` element.
+
+.. figure:: ../images/progress.png
+ :alt: Progress html5
+ :figclass: figure-with-code
+
+.. code-block:: html
+
+
+
+Checkboxes and radios
+======================
+
+As default html5 checkboxes & radios are **not** customisable, we created an override using label and ``::after`` elements.
+
+There is 2 colors:
+
+* Default themed with the primary color.
+* White colored.
+
+Requirements:
+
+* You need to have a ``label`` element **directly** after the ``input`` element.
+* The input **must** have the ``checkbox`` or ``radio`` class.
+* To use the white theme, you **need** to also add the ``checkbox--white`` or ``radio--white`` class.
+* Your label **must** have an associated text for accessibility.
+
+.. figure:: ../images/checkboxes.png
+ :alt: Nextcloud's themed checkboxes
+ :figclass: figure-with-code
+
+.. code-block:: html
+
+
+
+
+
+
+
+
+
+
+.. figure:: ../images/radios.png
+ :alt: Nextcloud's themed radios
+ :figclass: figure-with-code
+
+.. code-block:: html
+
+
+
+
+
+
+
+
+
+
+
+Buttons
+==================
diff --git a/developer_manual/design/icons-gen.py b/developer_manual/design/icons-gen.py
new file mode 100755
index 000000000..f40048a60
--- /dev/null
+++ b/developer_manual/design/icons-gen.py
@@ -0,0 +1,39 @@
+#! /bin/env python
+# Generate the icon part of the design documentation
+# coding=utf8
+# the above tag defines encoding for this document and is for Python 2.x compatibility
+
+import re
+import os
+
+iconregex = re.compile("(\.icon-[a-z-]*)")
+pathregex = r"url\('([a-z-./]*\.svg)"
+
+os.system('rm -R ./img/')
+os.system('rm icons.txt')
+os.system('wget https://github.com/nextcloud/server/archive/master.zip')
+os.system("unzip -p master.zip 'server-master/core/css/icons.scss' > icons.scss")
+os.system("unzip -u master.zip 'server-master/core/img/*'")
+os.system('mv ./server-master/core/img .')
+os.system('rm master.zip')
+os.system('rm -R ./server-master/')
+
+icons = {}
+
+scss = open('icons.scss')
+lines = scss.readlines()
+
+for i, line in enumerate(lines):
+ for match in re.finditer(pathregex, line):
+ iconclass = iconregex.match(lines[i-1])
+ if iconclass:
+ icons[iconclass.groups()[0]] = match.groups()[0]
+
+result = ""
+for icon, path in sorted(icons.items()):
+ result += ".. figure:: " + path[3:-3]+"*\n :height: 32\n :width: 32\n\n " + icon[1:] + "\n\n"
+ os.system('inkscape -z '+path[3:]+' -e '+path[3:-3]+'png')
+
+f = open('icons.txt', 'w')
+f.write(result);
+f.close()
\ No newline at end of file
diff --git a/developer_manual/design/icons.rst b/developer_manual/design/icons.rst
new file mode 100644
index 000000000..a461dc9f6
--- /dev/null
+++ b/developer_manual/design/icons.rst
@@ -0,0 +1,12 @@
+.. sectionauthor:: John Molakvoæ
+.. codeauthor:: John Molakvoæ
+.. _icons:
+
+========
+Icons
+========
+
+White icons only have a grey background on this documentation page for readability purposes.
+
+ .. include:: icons.txt
+ :class: icons-flex
diff --git a/developer_manual/design/icons.scss b/developer_manual/design/icons.scss
new file mode 100644
index 000000000..6d855381f
--- /dev/null
+++ b/developer_manual/design/icons.scss
@@ -0,0 +1,551 @@
+/**
+ * @copyright Copyright (c) 2016, John Molakvoæ
+ * @copyright Copyright (c) 2016, Joas Schilling
+ * @copyright Copyright (c) 2016, Lukas Reschke
+ * @copyright Copyright (c) 2016, Roeland Jago Douma
+ * @copyright Copyright (c) 2016, Vincent Chan
+ * @copyright Copyright (c) 2015, Thomas Müller
+ * @copyright Copyright (c) 2015, Hendrik Leppelsack
+ * @copyright Copyright (c) 2015, Jan-Christoph Borchardt
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ */
+
+/* GLOBAL ------------------------------------------------------------------- */
+[class^='icon-'], [class*=' icon-'] {
+ background-repeat: no-repeat;
+ background-position: center;
+ min-width: 16px;
+ min-height: 16px;
+}
+
+.icon-breadcrumb {
+ background-image: url('../img/breadcrumb.svg?v=1');
+}
+
+/* LOADING ------------------------------------------------------------------ */
+.loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark {
+ position: relative;
+ &:after {
+ z-index: 2;
+ content: '';
+ height: 28px;
+ width: 28px;
+ margin: -16px 0 0 -16px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ border-radius: 100%;
+ -webkit-animation: rotate .8s infinite linear;
+ animation: rotate .8s infinite linear;
+ -webkit-transform-origin: center;
+ -ms-transform-origin: center;
+ transform-origin: center;
+ border: 2px solid rgba($color-loading, 0.5);
+ border-top-color: $color-loading;
+ }
+}
+
+.icon-loading-dark:after,
+.icon-loading-small-dark:after {
+ border: 2px solid rgba($color-loading-dark, 0.5);
+ border-top-color: $color-loading-dark;
+}
+
+.icon-loading-small:after,
+.icon-loading-small-dark:after {
+ height: 12px;
+ width: 12px;
+ margin: -8px 0 0 -8px;
+}
+
+/* Css replaced elements don't have ::after nor ::before */
+img, object, video, button, textarea, input, select {
+ .icon-loading {
+ background-image: url('../img/loading.gif');
+ }
+ .icon-loading-dark {
+ background-image: url('../img/loading-dark.gif');
+ }
+ .icon-loading-small {
+ background-image: url('../img/loading-small.gif');
+ }
+ .icon-loading-small-dark {
+ background-image: url('../img/loading-small-dark.gif');
+ }
+}
+
+@keyframes rotate {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.icon-32 {
+ background-size: 32px !important;
+}
+
+/* ICONS -------------------------------------------------------------------- */
+.icon-add {
+ background-image: url('../img/actions/add.svg?v=1');
+}
+
+.icon-audio {
+ background-image: url('../img/actions/audio.svg?v=1');
+}
+
+.icon-audio-white {
+ background-image: url('../img/actions/audio-white.svg?v=2');
+}
+
+.icon-audio-off {
+ background-image: url('../img/actions/audio-off.svg?v=1');
+}
+
+.icon-audio-off-white {
+ background-image: url('../img/actions/audio-off-white.svg?v=1');
+}
+
+.icon-caret {
+ background-image: url('../img/actions/caret.svg?v=1');
+}
+
+.icon-caret-dark {
+ background-image: url('../img/actions/caret-dark.svg?v=1');
+}
+
+.icon-checkmark {
+ background-image: url('../img/actions/checkmark.svg?v=1');
+}
+
+.icon-checkmark-white {
+ background-image: url('../img/actions/checkmark-white.svg?v=1');
+}
+
+.icon-checkmark-color {
+ background-image: url('../img/actions/checkmark-color.svg?v=1');
+}
+
+.icon-clippy {
+ background-image: url('../img/actions/clippy.svg?v=2');
+}
+
+.icon-close {
+ background-image: url('../img/actions/close.svg?v=1');
+}
+
+.icon-close-white {
+ background-image: url('../img/actions/close-white.svg?v=1');
+}
+
+.icon-comment {
+ background-image: url('../img/actions/comment.svg?v=1');
+}
+
+.icon-confirm {
+ background-image: url('../img/actions/confirm.svg?v=2');
+}
+
+.icon-confirm-white {
+ background-image: url('../img/actions/confirm-white.svg?v=2');
+}
+
+.icon-delete {
+ background-image: url('../img/actions/delete.svg?v=1');
+ &.no-permission {
+ &:hover, &:focus {
+ background-image: url('../img/actions/delete.svg?v=1');
+ }
+ }
+ &:hover, &:focus {
+ background-image: url('../img/actions/delete-hover.svg?v=1');
+ }
+}
+
+.icon-delete-white {
+ background-image: url('../img/actions/delete-white.svg?v=1');
+ &.no-permission {
+ &:hover, &:focus {
+ background-image: url('../img/actions/delete-white.svg?v=1');
+ }
+ }
+ &:hover, &:focus {
+ background-image: url('../img/actions/delete-hover.svg?v=1');
+ }
+}
+
+.icon-details {
+ background-image: url('../img/actions/details.svg?v=1');
+}
+
+.icon-download {
+ background-image: url('../img/actions/download.svg?v=1');
+}
+
+.icon-download-white {
+ background-image: url('../img/actions/download-white.svg?v=1');
+}
+
+.icon-edit {
+ background-image: url('../img/actions/edit.svg?v=1');
+}
+
+.icon-error {
+ background-image: url('../img/actions/error.svg?v=1');
+}
+
+.icon-error-white {
+ background-image: url('../img/actions/error-white.svg?v=1');
+}
+
+.icon-error-color {
+ background-image: url('../img/actions/error-color.svg?v=1');
+}
+
+.icon-external {
+ background-image: url('../img/actions/external.svg?v=1');
+}
+
+.icon-fullscreen {
+ background-image: url('../img/actions/fullscreen.svg?v=1');
+}
+
+.icon-fullscreen-white {
+ background-image: url('../img/actions/fullscreen-white.svg?v=2');
+}
+
+.icon-history {
+ background-image: url('../img/actions/history.svg?v=1');
+}
+
+.icon-info {
+ background-image: url('../img/actions/info.svg?v=1');
+}
+
+.icon-info-white {
+ background-image: url('../img/actions/info-white.svg?v=1');
+}
+
+.icon-logout {
+ background-image: url('../img/actions/logout.svg?v=1');
+}
+
+.icon-mail {
+ background-image: url('../img/actions/mail.svg?v=1');
+}
+
+.icon-menu {
+ background-image: url('../img/actions/menu.svg?v=1');
+}
+
+.icon-more {
+ background-image: url('../img/actions/more.svg?v=1');
+}
+
+.icon-more-white {
+ background-image: url('../img/actions/more-white.svg?v=1');
+}
+
+.icon-password {
+ background-image: url('../img/actions/password.svg?v=1');
+}
+
+.icon-pause {
+ background-image: url('../img/actions/pause.svg?v=1');
+}
+
+.icon-pause-big {
+ background-image: url('../img/actions/pause-big.svg?v=1');
+}
+
+.icon-play {
+ background-image: url('../img/actions/play.svg?v=1');
+}
+
+.icon-play-add {
+ background-image: url('../img/actions/play-add.svg?v=1');
+}
+
+.icon-play-big {
+ background-image: url('../img/actions/play-big.svg?v=1');
+}
+
+.icon-play-next {
+ background-image: url('../img/actions/play-next.svg?v=1');
+}
+
+.icon-play-previous {
+ background-image: url('../img/actions/play-previous.svg?v=1');
+}
+
+.icon-public {
+ background-image: url('../img/actions/public.svg?v=1');
+}
+
+.icon-rename {
+ background-image: url('../img/actions/rename.svg?v=1');
+}
+
+.icon-screen {
+ background-image: url('../img/actions/screen.svg?v=1');
+}
+
+.icon-screen-white {
+ background-image: url('../img/actions/screen-white.svg?v=1');
+}
+
+.icon-screen-off {
+ background-image: url('../img/actions/screen-off.svg?v=1');
+}
+
+.icon-screen-off-white {
+ background-image: url('../img/actions/screen-off-white.svg?v=1');
+}
+
+.icon-search {
+ background-image: url('../img/actions/search.svg?v=1');
+}
+
+.icon-search-white {
+ background-image: url('../img/actions/search-white.svg?v=1');
+}
+
+.icon-settings {
+ background-image: url('../img/actions/settings.svg?v=1');
+}
+
+.icon-settings-dark {
+ background-image: url('../img/actions/settings-dark.svg?v=1');
+}
+
+.icon-settings-white {
+ background-image: url('../img/actions/settings-white.svg?v=1');
+}
+
+/* always use icon-shared, AdBlock blocks icon-share */
+.icon-shared,
+.icon-share {
+ background-image: url('../img/actions/share.svg?v=1');
+}
+
+.icon-sound {
+ background-image: url('../img/actions/sound.svg?v=1');
+}
+
+.icon-sound-off {
+ background-image: url('../img/actions/sound-off.svg?v=1');
+}
+
+.icon-favorite {
+ background-image: url('../img/actions/star-dark.svg?v=1');
+}
+
+.icon-star {
+ background-image: url('../img/actions/star.svg?v=1');
+}
+
+.icon-starred {
+ &:hover, &:focus {
+ background-image: url('../img/actions/star.svg?v=1');
+ }
+ background-image: url('../img/actions/starred.svg?v=1');
+}
+
+.icon-star {
+ &:hover, &:focus {
+ background-image: url('../img/actions/starred.svg?v=1');
+ }
+}
+
+.icon-tag {
+ background-image: url('../img/actions/tag.svg?v=1');
+}
+
+.icon-toggle {
+ background-image: url('../img/actions/toggle.svg?v=1');
+}
+
+.icon-toggle-pictures {
+ background-image: url('../img/actions/toggle-pictures.svg?v=1');
+}
+
+.icon-triangle-e {
+ background-image: url('../img/actions/triangle-e.svg?v=1');
+}
+
+.icon-triangle-n {
+ background-image: url('../img/actions/triangle-n.svg?v=1');
+}
+
+.icon-triangle-s {
+ background-image: url('../img/actions/triangle-s.svg?v=1');
+}
+
+.icon-upload {
+ background-image: url('../img/actions/upload.svg?v=1');
+}
+
+.icon-upload-white {
+ background-image: url('../img/actions/upload-white.svg?v=1');
+}
+
+.icon-user {
+ background-image: url('../img/actions/user.svg?v=1');
+}
+
+.icon-video {
+ background-image: url('../img/actions/video.svg?v=1');
+}
+
+.icon-video-white {
+ background-image: url('../img/actions/video-white.svg?v=2');
+}
+
+.icon-video-off {
+ background-image: url('../img/actions/video-off.svg?v=1');
+}
+
+.icon-video-off-white {
+ background-image: url('../img/actions/video-off-white.svg?v=1');
+}
+
+.icon-view-close {
+ background-image: url('../img/actions/view-close.svg?v=1');
+}
+
+.icon-view-download {
+ background-image: url('../img/actions/view-download.svg?v=1');
+}
+
+.icon-view-next {
+ background-image: url('../img/actions/view-next.svg?v=1');
+}
+
+.icon-view-pause {
+ background-image: url('../img/actions/view-pause.svg?v=1');
+}
+
+.icon-view-play {
+ background-image: url('../img/actions/view-play.svg?v=1');
+}
+
+.icon-view-previous {
+ background-image: url('../img/actions/view-previous.svg?v=1');
+}
+
+/* PLACES ------------------------------------------------------------------- */
+.icon-calendar {
+ background-image: url('../img/places/calendar.svg?v=1');
+}
+.icon-calendar-dark {
+ background-image: url('../img/places/calendar-dark.svg?v=1');
+}
+
+.icon-contacts {
+ background-image: url('../img/places/contacts.svg?v=1');
+}
+
+.icon-contacts-dark {
+ background-image: url('../img/places/contacts-dark.svg?v=1');
+}
+
+.icon-files {
+ background-image: url('../img/places/files.svg?v=1');
+}
+
+.icon-files-dark {
+ background-image: url('../img/places/files-dark.svg?v=1');
+}
+
+.icon-file, .icon-filetype-text {
+ background-image: url('../img/filetypes/text.svg?v=1');
+}
+
+.icon-folder, .icon-filetype-folder {
+ background-image: url('../img/filetypes/folder.svg?v=1');
+}
+
+.icon-filetype-folder-drag-accept {
+ background-image: url('../img/filetypes/folder-drag-accept.svg?v=1') !important;
+}
+
+.icon-home {
+ background-image: url('../img/places/home.svg?v=1');
+}
+
+.icon-link {
+ background-image: url('../img/places/link.svg?v=1');
+}
+
+.icon-music {
+ background-image: url('../img/places/music.svg?v=1');
+}
+
+.icon-picture {
+ background-image: url('../img/places/picture.svg?v=1');
+}
+
+/* APP CATEGORIES ------------------------------------------------------------------- */
+.icon-category-installed {
+ background-image: url('../img/actions/user.svg?v=1');
+}
+
+.icon-category-enabled {
+ background-image: url('../img/actions/checkmark.svg?v=1');
+}
+
+.icon-category-disabled {
+ background-image: url('../img/actions/close.svg?v=1');
+}
+
+.icon-category-app-bundles {
+ background-image: url('../img/categories/bundles.svg?v=1');
+}
+
+.icon-category-updates {
+ background-image: url('../img/actions/download.svg?v=1');
+}
+
+.icon-category-files {
+ background-image: url('../img/categories/files.svg?v=1');
+}
+
+.icon-category-social {
+ background-image: url('../img/categories/social.svg?v=1');
+}
+
+.icon-category-office {
+ background-image: url('../img/categories/office.svg?v=1');
+}
+
+.icon-category-auth {
+ background-image: url('../img/categories/auth.svg?v=1');
+}
+
+.icon-category-monitoring {
+ background-image: url('../img/categories/monitoring.svg?v=1');
+}
+
+.icon-category-multimedia {
+ background-image: url('../img/categories/multimedia.svg?v=1');
+}
+
+.icon-category-organization {
+ background-image: url('../img/categories/organization.svg?v=1');
+}
+
+.icon-category-customization {
+ background-image: url('../img/categories/customization.svg?v=1');
+}
+
+.icon-category-integration {
+ background-image: url('../img/categories/integration.svg?v=1');
+}
+
+.icon-category-tools {
+ background-image: url('../img/actions/settings-dark.svg?v=1');
+}
diff --git a/developer_manual/design/icons.txt b/developer_manual/design/icons.txt
new file mode 100644
index 000000000..babae052d
--- /dev/null
+++ b/developer_manual/design/icons.txt
@@ -0,0 +1,648 @@
+.. figure:: img/actions/add.*
+ :height: 32
+ :width: 32
+
+ icon-add
+
+.. figure:: img/actions/audio.*
+ :height: 32
+ :width: 32
+
+ icon-audio
+
+.. figure:: img/actions/audio-off.*
+ :height: 32
+ :width: 32
+
+ icon-audio-off
+
+.. figure:: img/actions/audio-off-white.*
+ :height: 32
+ :width: 32
+
+ icon-audio-off-white
+
+.. figure:: img/actions/audio-white.*
+ :height: 32
+ :width: 32
+
+ icon-audio-white
+
+.. figure:: img/breadcrumb.*
+ :height: 32
+ :width: 32
+
+ icon-breadcrumb
+
+.. figure:: img/places/calendar.*
+ :height: 32
+ :width: 32
+
+ icon-calendar
+
+.. figure:: img/places/calendar-dark.*
+ :height: 32
+ :width: 32
+
+ icon-calendar-dark
+
+.. figure:: img/actions/caret.*
+ :height: 32
+ :width: 32
+
+ icon-caret
+
+.. figure:: img/actions/caret-dark.*
+ :height: 32
+ :width: 32
+
+ icon-caret-dark
+
+.. figure:: img/categories/bundles.*
+ :height: 32
+ :width: 32
+
+ icon-category-app-bundles
+
+.. figure:: img/categories/auth.*
+ :height: 32
+ :width: 32
+
+ icon-category-auth
+
+.. figure:: img/categories/customization.*
+ :height: 32
+ :width: 32
+
+ icon-category-customization
+
+.. figure:: img/actions/close.*
+ :height: 32
+ :width: 32
+
+ icon-category-disabled
+
+.. figure:: img/actions/checkmark.*
+ :height: 32
+ :width: 32
+
+ icon-category-enabled
+
+.. figure:: img/categories/files.*
+ :height: 32
+ :width: 32
+
+ icon-category-files
+
+.. figure:: img/actions/user.*
+ :height: 32
+ :width: 32
+
+ icon-category-installed
+
+.. figure:: img/categories/integration.*
+ :height: 32
+ :width: 32
+
+ icon-category-integration
+
+.. figure:: img/categories/monitoring.*
+ :height: 32
+ :width: 32
+
+ icon-category-monitoring
+
+.. figure:: img/categories/multimedia.*
+ :height: 32
+ :width: 32
+
+ icon-category-multimedia
+
+.. figure:: img/categories/office.*
+ :height: 32
+ :width: 32
+
+ icon-category-office
+
+.. figure:: img/categories/organization.*
+ :height: 32
+ :width: 32
+
+ icon-category-organization
+
+.. figure:: img/categories/social.*
+ :height: 32
+ :width: 32
+
+ icon-category-social
+
+.. figure:: img/actions/settings-dark.*
+ :height: 32
+ :width: 32
+
+ icon-category-tools
+
+.. figure:: img/actions/download.*
+ :height: 32
+ :width: 32
+
+ icon-category-updates
+
+.. figure:: img/actions/checkmark.*
+ :height: 32
+ :width: 32
+
+ icon-checkmark
+
+.. figure:: img/actions/checkmark-color.*
+ :height: 32
+ :width: 32
+
+ icon-checkmark-color
+
+.. figure:: img/actions/checkmark-white.*
+ :height: 32
+ :width: 32
+
+ icon-checkmark-white
+
+.. figure:: img/actions/clippy.*
+ :height: 32
+ :width: 32
+
+ icon-clippy
+
+.. figure:: img/actions/close.*
+ :height: 32
+ :width: 32
+
+ icon-close
+
+.. figure:: img/actions/close-white.*
+ :height: 32
+ :width: 32
+
+ icon-close-white
+
+.. figure:: img/actions/comment.*
+ :height: 32
+ :width: 32
+
+ icon-comment
+
+.. figure:: img/actions/confirm.*
+ :height: 32
+ :width: 32
+
+ icon-confirm
+
+.. figure:: img/actions/confirm-white.*
+ :height: 32
+ :width: 32
+
+ icon-confirm-white
+
+.. figure:: img/places/contacts.*
+ :height: 32
+ :width: 32
+
+ icon-contacts
+
+.. figure:: img/places/contacts-dark.*
+ :height: 32
+ :width: 32
+
+ icon-contacts-dark
+
+.. figure:: img/actions/delete.*
+ :height: 32
+ :width: 32
+
+ icon-delete
+
+.. figure:: img/actions/delete-white.*
+ :height: 32
+ :width: 32
+
+ icon-delete-white
+
+.. figure:: img/actions/details.*
+ :height: 32
+ :width: 32
+
+ icon-details
+
+.. figure:: img/actions/download.*
+ :height: 32
+ :width: 32
+
+ icon-download
+
+.. figure:: img/actions/download-white.*
+ :height: 32
+ :width: 32
+
+ icon-download-white
+
+.. figure:: img/actions/edit.*
+ :height: 32
+ :width: 32
+
+ icon-edit
+
+.. figure:: img/actions/error.*
+ :height: 32
+ :width: 32
+
+ icon-error
+
+.. figure:: img/actions/error-color.*
+ :height: 32
+ :width: 32
+
+ icon-error-color
+
+.. figure:: img/actions/error-white.*
+ :height: 32
+ :width: 32
+
+ icon-error-white
+
+.. figure:: img/actions/external.*
+ :height: 32
+ :width: 32
+
+ icon-external
+
+.. figure:: img/actions/star-dark.*
+ :height: 32
+ :width: 32
+
+ icon-favorite
+
+.. figure:: img/filetypes/text.*
+ :height: 32
+ :width: 32
+
+ icon-file
+
+.. figure:: img/places/files.*
+ :height: 32
+ :width: 32
+
+ icon-files
+
+.. figure:: img/places/files-dark.*
+ :height: 32
+ :width: 32
+
+ icon-files-dark
+
+.. figure:: img/filetypes/folder-drag-accept.*
+ :height: 32
+ :width: 32
+
+ icon-filetype-folder-drag-accept
+
+.. figure:: img/filetypes/folder.*
+ :height: 32
+ :width: 32
+
+ icon-folder
+
+.. figure:: img/actions/fullscreen.*
+ :height: 32
+ :width: 32
+
+ icon-fullscreen
+
+.. figure:: img/actions/fullscreen-white.*
+ :height: 32
+ :width: 32
+
+ icon-fullscreen-white
+
+.. figure:: img/actions/history.*
+ :height: 32
+ :width: 32
+
+ icon-history
+
+.. figure:: img/places/home.*
+ :height: 32
+ :width: 32
+
+ icon-home
+
+.. figure:: img/actions/info.*
+ :height: 32
+ :width: 32
+
+ icon-info
+
+.. figure:: img/actions/info-white.*
+ :height: 32
+ :width: 32
+
+ icon-info-white
+
+.. figure:: img/places/link.*
+ :height: 32
+ :width: 32
+
+ icon-link
+
+.. figure:: img/actions/logout.*
+ :height: 32
+ :width: 32
+
+ icon-logout
+
+.. figure:: img/actions/mail.*
+ :height: 32
+ :width: 32
+
+ icon-mail
+
+.. figure:: img/actions/menu.*
+ :height: 32
+ :width: 32
+
+ icon-menu
+
+.. figure:: img/actions/more.*
+ :height: 32
+ :width: 32
+
+ icon-more
+
+.. figure:: img/actions/more-white.*
+ :height: 32
+ :width: 32
+
+ icon-more-white
+
+.. figure:: img/places/music.*
+ :height: 32
+ :width: 32
+
+ icon-music
+
+.. figure:: img/actions/password.*
+ :height: 32
+ :width: 32
+
+ icon-password
+
+.. figure:: img/actions/pause.*
+ :height: 32
+ :width: 32
+
+ icon-pause
+
+.. figure:: img/actions/pause-big.*
+ :height: 32
+ :width: 32
+
+ icon-pause-big
+
+.. figure:: img/places/picture.*
+ :height: 32
+ :width: 32
+
+ icon-picture
+
+.. figure:: img/actions/play.*
+ :height: 32
+ :width: 32
+
+ icon-play
+
+.. figure:: img/actions/play-add.*
+ :height: 32
+ :width: 32
+
+ icon-play-add
+
+.. figure:: img/actions/play-big.*
+ :height: 32
+ :width: 32
+
+ icon-play-big
+
+.. figure:: img/actions/play-next.*
+ :height: 32
+ :width: 32
+
+ icon-play-next
+
+.. figure:: img/actions/play-previous.*
+ :height: 32
+ :width: 32
+
+ icon-play-previous
+
+.. figure:: img/actions/public.*
+ :height: 32
+ :width: 32
+
+ icon-public
+
+.. figure:: img/actions/rename.*
+ :height: 32
+ :width: 32
+
+ icon-rename
+
+.. figure:: img/actions/screen.*
+ :height: 32
+ :width: 32
+
+ icon-screen
+
+.. figure:: img/actions/screen-off.*
+ :height: 32
+ :width: 32
+
+ icon-screen-off
+
+.. figure:: img/actions/screen-off-white.*
+ :height: 32
+ :width: 32
+
+ icon-screen-off-white
+
+.. figure:: img/actions/screen-white.*
+ :height: 32
+ :width: 32
+
+ icon-screen-white
+
+.. figure:: img/actions/search.*
+ :height: 32
+ :width: 32
+
+ icon-search
+
+.. figure:: img/actions/search-white.*
+ :height: 32
+ :width: 32
+
+ icon-search-white
+
+.. figure:: img/actions/settings.*
+ :height: 32
+ :width: 32
+
+ icon-settings
+
+.. figure:: img/actions/settings-dark.*
+ :height: 32
+ :width: 32
+
+ icon-settings-dark
+
+.. figure:: img/actions/settings-white.*
+ :height: 32
+ :width: 32
+
+ icon-settings-white
+
+.. figure:: img/actions/share.*
+ :height: 32
+ :width: 32
+
+ icon-share
+
+.. figure:: img/actions/sound.*
+ :height: 32
+ :width: 32
+
+ icon-sound
+
+.. figure:: img/actions/sound-off.*
+ :height: 32
+ :width: 32
+
+ icon-sound-off
+
+.. figure:: img/actions/star.*
+ :height: 32
+ :width: 32
+
+ icon-star
+
+.. figure:: img/actions/tag.*
+ :height: 32
+ :width: 32
+
+ icon-tag
+
+.. figure:: img/actions/toggle.*
+ :height: 32
+ :width: 32
+
+ icon-toggle
+
+.. figure:: img/actions/toggle-pictures.*
+ :height: 32
+ :width: 32
+
+ icon-toggle-pictures
+
+.. figure:: img/actions/triangle-e.*
+ :height: 32
+ :width: 32
+
+ icon-triangle-e
+
+.. figure:: img/actions/triangle-n.*
+ :height: 32
+ :width: 32
+
+ icon-triangle-n
+
+.. figure:: img/actions/triangle-s.*
+ :height: 32
+ :width: 32
+
+ icon-triangle-s
+
+.. figure:: img/actions/upload.*
+ :height: 32
+ :width: 32
+
+ icon-upload
+
+.. figure:: img/actions/upload-white.*
+ :height: 32
+ :width: 32
+
+ icon-upload-white
+
+.. figure:: img/actions/user.*
+ :height: 32
+ :width: 32
+
+ icon-user
+
+.. figure:: img/actions/video.*
+ :height: 32
+ :width: 32
+
+ icon-video
+
+.. figure:: img/actions/video-off.*
+ :height: 32
+ :width: 32
+
+ icon-video-off
+
+.. figure:: img/actions/video-off-white.*
+ :height: 32
+ :width: 32
+
+ icon-video-off-white
+
+.. figure:: img/actions/video-white.*
+ :height: 32
+ :width: 32
+
+ icon-video-white
+
+.. figure:: img/actions/view-close.*
+ :height: 32
+ :width: 32
+
+ icon-view-close
+
+.. figure:: img/actions/view-download.*
+ :height: 32
+ :width: 32
+
+ icon-view-download
+
+.. figure:: img/actions/view-next.*
+ :height: 32
+ :width: 32
+
+ icon-view-next
+
+.. figure:: img/actions/view-pause.*
+ :height: 32
+ :width: 32
+
+ icon-view-pause
+
+.. figure:: img/actions/view-play.*
+ :height: 32
+ :width: 32
+
+ icon-view-play
+
+.. figure:: img/actions/view-previous.*
+ :height: 32
+ :width: 32
+
+ icon-view-previous
+
diff --git a/developer_manual/design/img/actions/add.png b/developer_manual/design/img/actions/add.png
new file mode 100644
index 000000000..c673fb7af
Binary files /dev/null and b/developer_manual/design/img/actions/add.png differ
diff --git a/developer_manual/design/img/actions/add.svg b/developer_manual/design/img/actions/add.svg
new file mode 100644
index 000000000..91e5fe64c
--- /dev/null
+++ b/developer_manual/design/img/actions/add.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/arrow-left.svg b/developer_manual/design/img/actions/arrow-left.svg
new file mode 100644
index 000000000..34b2fda24
--- /dev/null
+++ b/developer_manual/design/img/actions/arrow-left.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/actions/arrow-right.svg b/developer_manual/design/img/actions/arrow-right.svg
new file mode 100644
index 000000000..102b9cf6b
--- /dev/null
+++ b/developer_manual/design/img/actions/arrow-right.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/actions/audio-off-white.png b/developer_manual/design/img/actions/audio-off-white.png
new file mode 100644
index 000000000..ead7e742e
Binary files /dev/null and b/developer_manual/design/img/actions/audio-off-white.png differ
diff --git a/developer_manual/design/img/actions/audio-off-white.svg b/developer_manual/design/img/actions/audio-off-white.svg
new file mode 100644
index 000000000..1968e4c7c
--- /dev/null
+++ b/developer_manual/design/img/actions/audio-off-white.svg
@@ -0,0 +1,10 @@
+
+
diff --git a/developer_manual/design/img/actions/audio-off.png b/developer_manual/design/img/actions/audio-off.png
new file mode 100644
index 000000000..edce1edac
Binary files /dev/null and b/developer_manual/design/img/actions/audio-off.png differ
diff --git a/developer_manual/design/img/actions/audio-off.svg b/developer_manual/design/img/actions/audio-off.svg
new file mode 100644
index 000000000..8cf7fbcb5
--- /dev/null
+++ b/developer_manual/design/img/actions/audio-off.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/developer_manual/design/img/actions/audio-white.png b/developer_manual/design/img/actions/audio-white.png
new file mode 100644
index 000000000..b2f30c130
Binary files /dev/null and b/developer_manual/design/img/actions/audio-white.png differ
diff --git a/developer_manual/design/img/actions/audio-white.svg b/developer_manual/design/img/actions/audio-white.svg
new file mode 100644
index 000000000..ac5d888a5
--- /dev/null
+++ b/developer_manual/design/img/actions/audio-white.svg
@@ -0,0 +1,10 @@
+
+
diff --git a/developer_manual/design/img/actions/audio.png b/developer_manual/design/img/actions/audio.png
new file mode 100644
index 000000000..09bacca78
Binary files /dev/null and b/developer_manual/design/img/actions/audio.png differ
diff --git a/developer_manual/design/img/actions/audio.svg b/developer_manual/design/img/actions/audio.svg
new file mode 100644
index 000000000..fa55c949a
--- /dev/null
+++ b/developer_manual/design/img/actions/audio.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/actions/caret-dark.png b/developer_manual/design/img/actions/caret-dark.png
new file mode 100644
index 000000000..93cb4d6ad
Binary files /dev/null and b/developer_manual/design/img/actions/caret-dark.png differ
diff --git a/developer_manual/design/img/actions/caret-dark.svg b/developer_manual/design/img/actions/caret-dark.svg
new file mode 100644
index 000000000..87c895e15
--- /dev/null
+++ b/developer_manual/design/img/actions/caret-dark.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/caret.png b/developer_manual/design/img/actions/caret.png
new file mode 100644
index 000000000..a1eec2388
Binary files /dev/null and b/developer_manual/design/img/actions/caret.png differ
diff --git a/developer_manual/design/img/actions/caret.svg b/developer_manual/design/img/actions/caret.svg
new file mode 100644
index 000000000..21a97f8be
--- /dev/null
+++ b/developer_manual/design/img/actions/caret.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/checkbox-mark-white.svg b/developer_manual/design/img/actions/checkbox-mark-white.svg
new file mode 100644
index 000000000..1441e8666
--- /dev/null
+++ b/developer_manual/design/img/actions/checkbox-mark-white.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/developer_manual/design/img/actions/checkbox-mark.svg b/developer_manual/design/img/actions/checkbox-mark.svg
new file mode 100644
index 000000000..1013b6cc3
--- /dev/null
+++ b/developer_manual/design/img/actions/checkbox-mark.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/checkbox-mixed-white.svg b/developer_manual/design/img/actions/checkbox-mixed-white.svg
new file mode 100644
index 000000000..6909d0fc0
--- /dev/null
+++ b/developer_manual/design/img/actions/checkbox-mixed-white.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/developer_manual/design/img/actions/checkbox-mixed.svg b/developer_manual/design/img/actions/checkbox-mixed.svg
new file mode 100644
index 000000000..308baae39
--- /dev/null
+++ b/developer_manual/design/img/actions/checkbox-mixed.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/checkmark-color.png b/developer_manual/design/img/actions/checkmark-color.png
new file mode 100644
index 000000000..3687c8b4e
Binary files /dev/null and b/developer_manual/design/img/actions/checkmark-color.png differ
diff --git a/developer_manual/design/img/actions/checkmark-color.svg b/developer_manual/design/img/actions/checkmark-color.svg
new file mode 100644
index 000000000..0a3c76277
--- /dev/null
+++ b/developer_manual/design/img/actions/checkmark-color.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/checkmark-white.png b/developer_manual/design/img/actions/checkmark-white.png
new file mode 100644
index 000000000..ce71d426b
Binary files /dev/null and b/developer_manual/design/img/actions/checkmark-white.png differ
diff --git a/developer_manual/design/img/actions/checkmark-white.svg b/developer_manual/design/img/actions/checkmark-white.svg
new file mode 100644
index 000000000..299e1518b
--- /dev/null
+++ b/developer_manual/design/img/actions/checkmark-white.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/checkmark.png b/developer_manual/design/img/actions/checkmark.png
new file mode 100644
index 000000000..c1fa5ebd2
Binary files /dev/null and b/developer_manual/design/img/actions/checkmark.png differ
diff --git a/developer_manual/design/img/actions/checkmark.svg b/developer_manual/design/img/actions/checkmark.svg
new file mode 100644
index 000000000..689e202d6
--- /dev/null
+++ b/developer_manual/design/img/actions/checkmark.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/clippy.png b/developer_manual/design/img/actions/clippy.png
new file mode 100644
index 000000000..e9a6f35b4
Binary files /dev/null and b/developer_manual/design/img/actions/clippy.png differ
diff --git a/developer_manual/design/img/actions/clippy.svg b/developer_manual/design/img/actions/clippy.svg
new file mode 100644
index 000000000..af496f393
--- /dev/null
+++ b/developer_manual/design/img/actions/clippy.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/developer_manual/design/img/actions/close-white.png b/developer_manual/design/img/actions/close-white.png
new file mode 100644
index 000000000..dc00b8e2c
Binary files /dev/null and b/developer_manual/design/img/actions/close-white.png differ
diff --git a/developer_manual/design/img/actions/close-white.svg b/developer_manual/design/img/actions/close-white.svg
new file mode 100644
index 000000000..cd2a8c624
--- /dev/null
+++ b/developer_manual/design/img/actions/close-white.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/developer_manual/design/img/actions/close.png b/developer_manual/design/img/actions/close.png
new file mode 100644
index 000000000..2d311c0ba
Binary files /dev/null and b/developer_manual/design/img/actions/close.png differ
diff --git a/developer_manual/design/img/actions/close.svg b/developer_manual/design/img/actions/close.svg
new file mode 100644
index 000000000..c58fe6379
--- /dev/null
+++ b/developer_manual/design/img/actions/close.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/developer_manual/design/img/actions/comment.png b/developer_manual/design/img/actions/comment.png
new file mode 100644
index 000000000..639d229fb
Binary files /dev/null and b/developer_manual/design/img/actions/comment.png differ
diff --git a/developer_manual/design/img/actions/comment.svg b/developer_manual/design/img/actions/comment.svg
new file mode 100644
index 000000000..2e4ee63a8
--- /dev/null
+++ b/developer_manual/design/img/actions/comment.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/actions/confirm-white.png b/developer_manual/design/img/actions/confirm-white.png
new file mode 100644
index 000000000..a1dfe2d8b
Binary files /dev/null and b/developer_manual/design/img/actions/confirm-white.png differ
diff --git a/developer_manual/design/img/actions/confirm-white.svg b/developer_manual/design/img/actions/confirm-white.svg
new file mode 100644
index 000000000..266f2bc1a
--- /dev/null
+++ b/developer_manual/design/img/actions/confirm-white.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/developer_manual/design/img/actions/confirm.png b/developer_manual/design/img/actions/confirm.png
new file mode 100644
index 000000000..4eb36dcb5
Binary files /dev/null and b/developer_manual/design/img/actions/confirm.png differ
diff --git a/developer_manual/design/img/actions/confirm.svg b/developer_manual/design/img/actions/confirm.svg
new file mode 100644
index 000000000..fd954cdcb
--- /dev/null
+++ b/developer_manual/design/img/actions/confirm.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/developer_manual/design/img/actions/delete-hover.svg b/developer_manual/design/img/actions/delete-hover.svg
new file mode 100644
index 000000000..faf2f5293
--- /dev/null
+++ b/developer_manual/design/img/actions/delete-hover.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/delete-white.png b/developer_manual/design/img/actions/delete-white.png
new file mode 100644
index 000000000..ffb49e08b
Binary files /dev/null and b/developer_manual/design/img/actions/delete-white.png differ
diff --git a/developer_manual/design/img/actions/delete-white.svg b/developer_manual/design/img/actions/delete-white.svg
new file mode 100644
index 000000000..2e8836c70
--- /dev/null
+++ b/developer_manual/design/img/actions/delete-white.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/delete.png b/developer_manual/design/img/actions/delete.png
new file mode 100644
index 000000000..700565460
Binary files /dev/null and b/developer_manual/design/img/actions/delete.png differ
diff --git a/developer_manual/design/img/actions/delete.svg b/developer_manual/design/img/actions/delete.svg
new file mode 100644
index 000000000..c20929aaa
--- /dev/null
+++ b/developer_manual/design/img/actions/delete.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/details.png b/developer_manual/design/img/actions/details.png
new file mode 100644
index 000000000..95d1def66
Binary files /dev/null and b/developer_manual/design/img/actions/details.png differ
diff --git a/developer_manual/design/img/actions/details.svg b/developer_manual/design/img/actions/details.svg
new file mode 100644
index 000000000..464ed4175
--- /dev/null
+++ b/developer_manual/design/img/actions/details.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/download-white.png b/developer_manual/design/img/actions/download-white.png
new file mode 100644
index 000000000..a58ae9226
Binary files /dev/null and b/developer_manual/design/img/actions/download-white.png differ
diff --git a/developer_manual/design/img/actions/download-white.svg b/developer_manual/design/img/actions/download-white.svg
new file mode 100644
index 000000000..d4fc9549d
--- /dev/null
+++ b/developer_manual/design/img/actions/download-white.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/download.png b/developer_manual/design/img/actions/download.png
new file mode 100644
index 000000000..15cac7d3f
Binary files /dev/null and b/developer_manual/design/img/actions/download.png differ
diff --git a/developer_manual/design/img/actions/download.svg b/developer_manual/design/img/actions/download.svg
new file mode 100644
index 000000000..77d9cd05e
--- /dev/null
+++ b/developer_manual/design/img/actions/download.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/edit.png b/developer_manual/design/img/actions/edit.png
new file mode 100644
index 000000000..7709b05e4
Binary files /dev/null and b/developer_manual/design/img/actions/edit.png differ
diff --git a/developer_manual/design/img/actions/edit.svg b/developer_manual/design/img/actions/edit.svg
new file mode 100644
index 000000000..a8ab7162a
--- /dev/null
+++ b/developer_manual/design/img/actions/edit.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/error-color.png b/developer_manual/design/img/actions/error-color.png
new file mode 100644
index 000000000..61ad7a993
Binary files /dev/null and b/developer_manual/design/img/actions/error-color.png differ
diff --git a/developer_manual/design/img/actions/error-color.svg b/developer_manual/design/img/actions/error-color.svg
new file mode 100644
index 000000000..1dd9c6798
--- /dev/null
+++ b/developer_manual/design/img/actions/error-color.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/error-white.png b/developer_manual/design/img/actions/error-white.png
new file mode 100644
index 000000000..03d12959e
Binary files /dev/null and b/developer_manual/design/img/actions/error-white.png differ
diff --git a/developer_manual/design/img/actions/error-white.svg b/developer_manual/design/img/actions/error-white.svg
new file mode 100644
index 000000000..fdcc46f21
--- /dev/null
+++ b/developer_manual/design/img/actions/error-white.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/error.png b/developer_manual/design/img/actions/error.png
new file mode 100644
index 000000000..929e9007f
Binary files /dev/null and b/developer_manual/design/img/actions/error.png differ
diff --git a/developer_manual/design/img/actions/error.svg b/developer_manual/design/img/actions/error.svg
new file mode 100644
index 000000000..3bbf23a5f
--- /dev/null
+++ b/developer_manual/design/img/actions/error.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/external.png b/developer_manual/design/img/actions/external.png
new file mode 100644
index 000000000..32288e3a4
Binary files /dev/null and b/developer_manual/design/img/actions/external.png differ
diff --git a/developer_manual/design/img/actions/external.svg b/developer_manual/design/img/actions/external.svg
new file mode 100644
index 000000000..6df1551c4
--- /dev/null
+++ b/developer_manual/design/img/actions/external.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/fullscreen-white.png b/developer_manual/design/img/actions/fullscreen-white.png
new file mode 100644
index 000000000..3c55d17f8
Binary files /dev/null and b/developer_manual/design/img/actions/fullscreen-white.png differ
diff --git a/developer_manual/design/img/actions/fullscreen-white.svg b/developer_manual/design/img/actions/fullscreen-white.svg
new file mode 100644
index 000000000..887cd99ee
--- /dev/null
+++ b/developer_manual/design/img/actions/fullscreen-white.svg
@@ -0,0 +1,10 @@
+
+
diff --git a/developer_manual/design/img/actions/fullscreen.png b/developer_manual/design/img/actions/fullscreen.png
new file mode 100644
index 000000000..b5f2f85b2
Binary files /dev/null and b/developer_manual/design/img/actions/fullscreen.png differ
diff --git a/developer_manual/design/img/actions/fullscreen.svg b/developer_manual/design/img/actions/fullscreen.svg
new file mode 100644
index 000000000..8bf215779
--- /dev/null
+++ b/developer_manual/design/img/actions/fullscreen.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/developer_manual/design/img/actions/history.png b/developer_manual/design/img/actions/history.png
new file mode 100644
index 000000000..8ee0bc60f
Binary files /dev/null and b/developer_manual/design/img/actions/history.png differ
diff --git a/developer_manual/design/img/actions/history.svg b/developer_manual/design/img/actions/history.svg
new file mode 100644
index 000000000..42d5e70e5
--- /dev/null
+++ b/developer_manual/design/img/actions/history.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/info-white.png b/developer_manual/design/img/actions/info-white.png
new file mode 100644
index 000000000..f065bab3f
Binary files /dev/null and b/developer_manual/design/img/actions/info-white.png differ
diff --git a/developer_manual/design/img/actions/info-white.svg b/developer_manual/design/img/actions/info-white.svg
new file mode 100644
index 000000000..e289aacc4
--- /dev/null
+++ b/developer_manual/design/img/actions/info-white.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/info.png b/developer_manual/design/img/actions/info.png
new file mode 100644
index 000000000..95d1def66
Binary files /dev/null and b/developer_manual/design/img/actions/info.png differ
diff --git a/developer_manual/design/img/actions/info.svg b/developer_manual/design/img/actions/info.svg
new file mode 100644
index 000000000..35926af30
--- /dev/null
+++ b/developer_manual/design/img/actions/info.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/logout.png b/developer_manual/design/img/actions/logout.png
new file mode 100644
index 000000000..8be5c35d0
Binary files /dev/null and b/developer_manual/design/img/actions/logout.png differ
diff --git a/developer_manual/design/img/actions/logout.svg b/developer_manual/design/img/actions/logout.svg
new file mode 100644
index 000000000..4159e85b8
--- /dev/null
+++ b/developer_manual/design/img/actions/logout.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/mail.png b/developer_manual/design/img/actions/mail.png
new file mode 100644
index 000000000..ff829d72c
Binary files /dev/null and b/developer_manual/design/img/actions/mail.png differ
diff --git a/developer_manual/design/img/actions/mail.svg b/developer_manual/design/img/actions/mail.svg
new file mode 100644
index 000000000..a6626a585
--- /dev/null
+++ b/developer_manual/design/img/actions/mail.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/menu.png b/developer_manual/design/img/actions/menu.png
new file mode 100644
index 000000000..5bd15eb56
Binary files /dev/null and b/developer_manual/design/img/actions/menu.png differ
diff --git a/developer_manual/design/img/actions/menu.svg b/developer_manual/design/img/actions/menu.svg
new file mode 100644
index 000000000..222b39eaa
--- /dev/null
+++ b/developer_manual/design/img/actions/menu.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/more-white.png b/developer_manual/design/img/actions/more-white.png
new file mode 100644
index 000000000..eb3d165e3
Binary files /dev/null and b/developer_manual/design/img/actions/more-white.png differ
diff --git a/developer_manual/design/img/actions/more-white.svg b/developer_manual/design/img/actions/more-white.svg
new file mode 100644
index 000000000..bae78cf0a
--- /dev/null
+++ b/developer_manual/design/img/actions/more-white.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/more.png b/developer_manual/design/img/actions/more.png
new file mode 100644
index 000000000..0b5ad21fa
Binary files /dev/null and b/developer_manual/design/img/actions/more.png differ
diff --git a/developer_manual/design/img/actions/more.svg b/developer_manual/design/img/actions/more.svg
new file mode 100644
index 000000000..48c499ef7
--- /dev/null
+++ b/developer_manual/design/img/actions/more.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/password.png b/developer_manual/design/img/actions/password.png
new file mode 100644
index 000000000..04eaf44a0
Binary files /dev/null and b/developer_manual/design/img/actions/password.png differ
diff --git a/developer_manual/design/img/actions/password.svg b/developer_manual/design/img/actions/password.svg
new file mode 100644
index 000000000..3d161917f
--- /dev/null
+++ b/developer_manual/design/img/actions/password.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/pause-big.png b/developer_manual/design/img/actions/pause-big.png
new file mode 100644
index 000000000..2bb29362c
Binary files /dev/null and b/developer_manual/design/img/actions/pause-big.png differ
diff --git a/developer_manual/design/img/actions/pause-big.svg b/developer_manual/design/img/actions/pause-big.svg
new file mode 100644
index 000000000..2d6f54f60
--- /dev/null
+++ b/developer_manual/design/img/actions/pause-big.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/pause.png b/developer_manual/design/img/actions/pause.png
new file mode 100644
index 000000000..e881d0bf6
Binary files /dev/null and b/developer_manual/design/img/actions/pause.png differ
diff --git a/developer_manual/design/img/actions/pause.svg b/developer_manual/design/img/actions/pause.svg
new file mode 100644
index 000000000..eb9b5b47f
--- /dev/null
+++ b/developer_manual/design/img/actions/pause.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/play-add.png b/developer_manual/design/img/actions/play-add.png
new file mode 100644
index 000000000..0c85beeaf
Binary files /dev/null and b/developer_manual/design/img/actions/play-add.png differ
diff --git a/developer_manual/design/img/actions/play-add.svg b/developer_manual/design/img/actions/play-add.svg
new file mode 100644
index 000000000..300e5a9e7
--- /dev/null
+++ b/developer_manual/design/img/actions/play-add.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/play-big.png b/developer_manual/design/img/actions/play-big.png
new file mode 100644
index 000000000..4c30ca56b
Binary files /dev/null and b/developer_manual/design/img/actions/play-big.png differ
diff --git a/developer_manual/design/img/actions/play-big.svg b/developer_manual/design/img/actions/play-big.svg
new file mode 100644
index 000000000..8769f885a
--- /dev/null
+++ b/developer_manual/design/img/actions/play-big.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/play-next.png b/developer_manual/design/img/actions/play-next.png
new file mode 100644
index 000000000..d15d6b1a0
Binary files /dev/null and b/developer_manual/design/img/actions/play-next.png differ
diff --git a/developer_manual/design/img/actions/play-next.svg b/developer_manual/design/img/actions/play-next.svg
new file mode 100644
index 000000000..d57509b34
--- /dev/null
+++ b/developer_manual/design/img/actions/play-next.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/play-previous.png b/developer_manual/design/img/actions/play-previous.png
new file mode 100644
index 000000000..60ac635dc
Binary files /dev/null and b/developer_manual/design/img/actions/play-previous.png differ
diff --git a/developer_manual/design/img/actions/play-previous.svg b/developer_manual/design/img/actions/play-previous.svg
new file mode 100644
index 000000000..e5d69b8da
--- /dev/null
+++ b/developer_manual/design/img/actions/play-previous.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/play.png b/developer_manual/design/img/actions/play.png
new file mode 100644
index 000000000..845a51a67
Binary files /dev/null and b/developer_manual/design/img/actions/play.png differ
diff --git a/developer_manual/design/img/actions/play.svg b/developer_manual/design/img/actions/play.svg
new file mode 100644
index 000000000..5d19ae3e0
--- /dev/null
+++ b/developer_manual/design/img/actions/play.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/public.png b/developer_manual/design/img/actions/public.png
new file mode 100644
index 000000000..4a0e52cde
Binary files /dev/null and b/developer_manual/design/img/actions/public.png differ
diff --git a/developer_manual/design/img/actions/public.svg b/developer_manual/design/img/actions/public.svg
new file mode 100644
index 000000000..627810f10
--- /dev/null
+++ b/developer_manual/design/img/actions/public.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/rename.png b/developer_manual/design/img/actions/rename.png
new file mode 100644
index 000000000..b9c0d2bf8
Binary files /dev/null and b/developer_manual/design/img/actions/rename.png differ
diff --git a/developer_manual/design/img/actions/rename.svg b/developer_manual/design/img/actions/rename.svg
new file mode 100644
index 000000000..6d0d4811c
--- /dev/null
+++ b/developer_manual/design/img/actions/rename.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/screen-off-white.png b/developer_manual/design/img/actions/screen-off-white.png
new file mode 100644
index 000000000..e3c158739
Binary files /dev/null and b/developer_manual/design/img/actions/screen-off-white.png differ
diff --git a/developer_manual/design/img/actions/screen-off-white.svg b/developer_manual/design/img/actions/screen-off-white.svg
new file mode 100644
index 000000000..dca13c32b
--- /dev/null
+++ b/developer_manual/design/img/actions/screen-off-white.svg
@@ -0,0 +1,10 @@
+
+
diff --git a/developer_manual/design/img/actions/screen-off.png b/developer_manual/design/img/actions/screen-off.png
new file mode 100644
index 000000000..adc0afc85
Binary files /dev/null and b/developer_manual/design/img/actions/screen-off.png differ
diff --git a/developer_manual/design/img/actions/screen-off.svg b/developer_manual/design/img/actions/screen-off.svg
new file mode 100644
index 000000000..54b4218ba
--- /dev/null
+++ b/developer_manual/design/img/actions/screen-off.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/developer_manual/design/img/actions/screen-white.png b/developer_manual/design/img/actions/screen-white.png
new file mode 100644
index 000000000..aa1c87072
Binary files /dev/null and b/developer_manual/design/img/actions/screen-white.png differ
diff --git a/developer_manual/design/img/actions/screen-white.svg b/developer_manual/design/img/actions/screen-white.svg
new file mode 100644
index 000000000..20372949a
--- /dev/null
+++ b/developer_manual/design/img/actions/screen-white.svg
@@ -0,0 +1,10 @@
+
+
diff --git a/developer_manual/design/img/actions/screen.png b/developer_manual/design/img/actions/screen.png
new file mode 100644
index 000000000..dea43610a
Binary files /dev/null and b/developer_manual/design/img/actions/screen.png differ
diff --git a/developer_manual/design/img/actions/screen.svg b/developer_manual/design/img/actions/screen.svg
new file mode 100644
index 000000000..b4005ca5d
--- /dev/null
+++ b/developer_manual/design/img/actions/screen.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/developer_manual/design/img/actions/search-white.png b/developer_manual/design/img/actions/search-white.png
new file mode 100644
index 000000000..a7aeec8e3
Binary files /dev/null and b/developer_manual/design/img/actions/search-white.png differ
diff --git a/developer_manual/design/img/actions/search-white.svg b/developer_manual/design/img/actions/search-white.svg
new file mode 100644
index 000000000..ca9121881
--- /dev/null
+++ b/developer_manual/design/img/actions/search-white.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/search.png b/developer_manual/design/img/actions/search.png
new file mode 100644
index 000000000..bd86e2156
Binary files /dev/null and b/developer_manual/design/img/actions/search.png differ
diff --git a/developer_manual/design/img/actions/search.svg b/developer_manual/design/img/actions/search.svg
new file mode 100644
index 000000000..2dbb3fa89
--- /dev/null
+++ b/developer_manual/design/img/actions/search.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/settings-dark.png b/developer_manual/design/img/actions/settings-dark.png
new file mode 100644
index 000000000..78afc3f1b
Binary files /dev/null and b/developer_manual/design/img/actions/settings-dark.png differ
diff --git a/developer_manual/design/img/actions/settings-dark.svg b/developer_manual/design/img/actions/settings-dark.svg
new file mode 100644
index 000000000..2160b673e
--- /dev/null
+++ b/developer_manual/design/img/actions/settings-dark.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/actions/settings-white.png b/developer_manual/design/img/actions/settings-white.png
new file mode 100644
index 000000000..8ba8853cd
Binary files /dev/null and b/developer_manual/design/img/actions/settings-white.png differ
diff --git a/developer_manual/design/img/actions/settings-white.svg b/developer_manual/design/img/actions/settings-white.svg
new file mode 100644
index 000000000..2371d2049
--- /dev/null
+++ b/developer_manual/design/img/actions/settings-white.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/actions/settings.png b/developer_manual/design/img/actions/settings.png
new file mode 100644
index 000000000..61b0e5f8d
Binary files /dev/null and b/developer_manual/design/img/actions/settings.png differ
diff --git a/developer_manual/design/img/actions/settings.svg b/developer_manual/design/img/actions/settings.svg
new file mode 100644
index 000000000..52a11d4de
--- /dev/null
+++ b/developer_manual/design/img/actions/settings.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/share.png b/developer_manual/design/img/actions/share.png
new file mode 100644
index 000000000..d588d292a
Binary files /dev/null and b/developer_manual/design/img/actions/share.png differ
diff --git a/developer_manual/design/img/actions/share.svg b/developer_manual/design/img/actions/share.svg
new file mode 100644
index 000000000..c0ad95223
--- /dev/null
+++ b/developer_manual/design/img/actions/share.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/shared.svg b/developer_manual/design/img/actions/shared.svg
new file mode 100644
index 000000000..c0ad95223
--- /dev/null
+++ b/developer_manual/design/img/actions/shared.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/sound-off.png b/developer_manual/design/img/actions/sound-off.png
new file mode 100644
index 000000000..8647d04eb
Binary files /dev/null and b/developer_manual/design/img/actions/sound-off.png differ
diff --git a/developer_manual/design/img/actions/sound-off.svg b/developer_manual/design/img/actions/sound-off.svg
new file mode 100644
index 000000000..030a61e65
--- /dev/null
+++ b/developer_manual/design/img/actions/sound-off.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/sound.png b/developer_manual/design/img/actions/sound.png
new file mode 100644
index 000000000..694488166
Binary files /dev/null and b/developer_manual/design/img/actions/sound.png differ
diff --git a/developer_manual/design/img/actions/sound.svg b/developer_manual/design/img/actions/sound.svg
new file mode 100644
index 000000000..e5624308f
--- /dev/null
+++ b/developer_manual/design/img/actions/sound.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/star-dark.png b/developer_manual/design/img/actions/star-dark.png
new file mode 100644
index 000000000..8af1f7afc
Binary files /dev/null and b/developer_manual/design/img/actions/star-dark.png differ
diff --git a/developer_manual/design/img/actions/star-dark.svg b/developer_manual/design/img/actions/star-dark.svg
new file mode 100644
index 000000000..6edb7ea50
--- /dev/null
+++ b/developer_manual/design/img/actions/star-dark.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/actions/star.png b/developer_manual/design/img/actions/star.png
new file mode 100644
index 000000000..ce2d1c62a
Binary files /dev/null and b/developer_manual/design/img/actions/star.png differ
diff --git a/developer_manual/design/img/actions/star.svg b/developer_manual/design/img/actions/star.svg
new file mode 100644
index 000000000..32d8dd471
--- /dev/null
+++ b/developer_manual/design/img/actions/star.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/starred.png b/developer_manual/design/img/actions/starred.png
new file mode 100644
index 000000000..aa5bced77
Binary files /dev/null and b/developer_manual/design/img/actions/starred.png differ
diff --git a/developer_manual/design/img/actions/starred.svg b/developer_manual/design/img/actions/starred.svg
new file mode 100644
index 000000000..a993aff42
--- /dev/null
+++ b/developer_manual/design/img/actions/starred.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/tag.png b/developer_manual/design/img/actions/tag.png
new file mode 100644
index 000000000..049e7291d
Binary files /dev/null and b/developer_manual/design/img/actions/tag.png differ
diff --git a/developer_manual/design/img/actions/tag.svg b/developer_manual/design/img/actions/tag.svg
new file mode 100644
index 000000000..464ab936a
--- /dev/null
+++ b/developer_manual/design/img/actions/tag.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/toggle-filelist.svg b/developer_manual/design/img/actions/toggle-filelist.svg
new file mode 100644
index 000000000..10bc79fa0
--- /dev/null
+++ b/developer_manual/design/img/actions/toggle-filelist.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/toggle-pictures.png b/developer_manual/design/img/actions/toggle-pictures.png
new file mode 100644
index 000000000..ff3275b8c
Binary files /dev/null and b/developer_manual/design/img/actions/toggle-pictures.png differ
diff --git a/developer_manual/design/img/actions/toggle-pictures.svg b/developer_manual/design/img/actions/toggle-pictures.svg
new file mode 100644
index 000000000..270cf4b2d
--- /dev/null
+++ b/developer_manual/design/img/actions/toggle-pictures.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/toggle.png b/developer_manual/design/img/actions/toggle.png
new file mode 100644
index 000000000..eefe1a719
Binary files /dev/null and b/developer_manual/design/img/actions/toggle.png differ
diff --git a/developer_manual/design/img/actions/toggle.svg b/developer_manual/design/img/actions/toggle.svg
new file mode 100644
index 000000000..1f3de01ff
--- /dev/null
+++ b/developer_manual/design/img/actions/toggle.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/triangle-e.png b/developer_manual/design/img/actions/triangle-e.png
new file mode 100644
index 000000000..d2b0beabe
Binary files /dev/null and b/developer_manual/design/img/actions/triangle-e.png differ
diff --git a/developer_manual/design/img/actions/triangle-e.svg b/developer_manual/design/img/actions/triangle-e.svg
new file mode 100644
index 000000000..a5413943e
--- /dev/null
+++ b/developer_manual/design/img/actions/triangle-e.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/triangle-n.png b/developer_manual/design/img/actions/triangle-n.png
new file mode 100644
index 000000000..61ef57c3f
Binary files /dev/null and b/developer_manual/design/img/actions/triangle-n.png differ
diff --git a/developer_manual/design/img/actions/triangle-n.svg b/developer_manual/design/img/actions/triangle-n.svg
new file mode 100644
index 000000000..4a7f92209
--- /dev/null
+++ b/developer_manual/design/img/actions/triangle-n.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/triangle-s.png b/developer_manual/design/img/actions/triangle-s.png
new file mode 100644
index 000000000..93cb4d6ad
Binary files /dev/null and b/developer_manual/design/img/actions/triangle-s.png differ
diff --git a/developer_manual/design/img/actions/triangle-s.svg b/developer_manual/design/img/actions/triangle-s.svg
new file mode 100644
index 000000000..0de5901af
--- /dev/null
+++ b/developer_manual/design/img/actions/triangle-s.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/upload-white.png b/developer_manual/design/img/actions/upload-white.png
new file mode 100644
index 000000000..c59fcc1d5
Binary files /dev/null and b/developer_manual/design/img/actions/upload-white.png differ
diff --git a/developer_manual/design/img/actions/upload-white.svg b/developer_manual/design/img/actions/upload-white.svg
new file mode 100644
index 000000000..56350e598
--- /dev/null
+++ b/developer_manual/design/img/actions/upload-white.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/upload.png b/developer_manual/design/img/actions/upload.png
new file mode 100644
index 000000000..761eb9173
Binary files /dev/null and b/developer_manual/design/img/actions/upload.png differ
diff --git a/developer_manual/design/img/actions/upload.svg b/developer_manual/design/img/actions/upload.svg
new file mode 100644
index 000000000..eecbd0fe9
--- /dev/null
+++ b/developer_manual/design/img/actions/upload.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/user-plus.svg b/developer_manual/design/img/actions/user-plus.svg
new file mode 100644
index 000000000..16c59261a
--- /dev/null
+++ b/developer_manual/design/img/actions/user-plus.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/developer_manual/design/img/actions/user-times.svg b/developer_manual/design/img/actions/user-times.svg
new file mode 100644
index 000000000..f853784ef
--- /dev/null
+++ b/developer_manual/design/img/actions/user-times.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/developer_manual/design/img/actions/user.png b/developer_manual/design/img/actions/user.png
new file mode 100644
index 000000000..0f6104a39
Binary files /dev/null and b/developer_manual/design/img/actions/user.png differ
diff --git a/developer_manual/design/img/actions/user.svg b/developer_manual/design/img/actions/user.svg
new file mode 100644
index 000000000..4f83dbb71
--- /dev/null
+++ b/developer_manual/design/img/actions/user.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/verified.svg b/developer_manual/design/img/actions/verified.svg
new file mode 100644
index 000000000..2f9e34e23
--- /dev/null
+++ b/developer_manual/design/img/actions/verified.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/developer_manual/design/img/actions/verify.svg b/developer_manual/design/img/actions/verify.svg
new file mode 100644
index 000000000..5ad114810
--- /dev/null
+++ b/developer_manual/design/img/actions/verify.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/developer_manual/design/img/actions/verifying.svg b/developer_manual/design/img/actions/verifying.svg
new file mode 100644
index 000000000..beb824b7e
--- /dev/null
+++ b/developer_manual/design/img/actions/verifying.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/developer_manual/design/img/actions/video-off-white.png b/developer_manual/design/img/actions/video-off-white.png
new file mode 100644
index 000000000..d85b3ebdf
Binary files /dev/null and b/developer_manual/design/img/actions/video-off-white.png differ
diff --git a/developer_manual/design/img/actions/video-off-white.svg b/developer_manual/design/img/actions/video-off-white.svg
new file mode 100644
index 000000000..dbd3120a3
--- /dev/null
+++ b/developer_manual/design/img/actions/video-off-white.svg
@@ -0,0 +1,10 @@
+
+
diff --git a/developer_manual/design/img/actions/video-off.png b/developer_manual/design/img/actions/video-off.png
new file mode 100644
index 000000000..6f7e40045
Binary files /dev/null and b/developer_manual/design/img/actions/video-off.png differ
diff --git a/developer_manual/design/img/actions/video-off.svg b/developer_manual/design/img/actions/video-off.svg
new file mode 100644
index 000000000..cb61fe519
--- /dev/null
+++ b/developer_manual/design/img/actions/video-off.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/developer_manual/design/img/actions/video-white.png b/developer_manual/design/img/actions/video-white.png
new file mode 100644
index 000000000..239d3f55d
Binary files /dev/null and b/developer_manual/design/img/actions/video-white.png differ
diff --git a/developer_manual/design/img/actions/video-white.svg b/developer_manual/design/img/actions/video-white.svg
new file mode 100644
index 000000000..59dc1b253
--- /dev/null
+++ b/developer_manual/design/img/actions/video-white.svg
@@ -0,0 +1,10 @@
+
+
diff --git a/developer_manual/design/img/actions/video.png b/developer_manual/design/img/actions/video.png
new file mode 100644
index 000000000..d3ce3be0f
Binary files /dev/null and b/developer_manual/design/img/actions/video.png differ
diff --git a/developer_manual/design/img/actions/video.svg b/developer_manual/design/img/actions/video.svg
new file mode 100644
index 000000000..002198dc0
--- /dev/null
+++ b/developer_manual/design/img/actions/video.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/actions/view-close.png b/developer_manual/design/img/actions/view-close.png
new file mode 100644
index 000000000..17ef0fd7f
Binary files /dev/null and b/developer_manual/design/img/actions/view-close.png differ
diff --git a/developer_manual/design/img/actions/view-close.svg b/developer_manual/design/img/actions/view-close.svg
new file mode 100644
index 000000000..7b76c6d17
--- /dev/null
+++ b/developer_manual/design/img/actions/view-close.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/view-download.png b/developer_manual/design/img/actions/view-download.png
new file mode 100644
index 000000000..4ab0c3500
Binary files /dev/null and b/developer_manual/design/img/actions/view-download.png differ
diff --git a/developer_manual/design/img/actions/view-download.svg b/developer_manual/design/img/actions/view-download.svg
new file mode 100644
index 000000000..89bba33f6
--- /dev/null
+++ b/developer_manual/design/img/actions/view-download.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/view-next.png b/developer_manual/design/img/actions/view-next.png
new file mode 100644
index 000000000..df0f9a662
Binary files /dev/null and b/developer_manual/design/img/actions/view-next.png differ
diff --git a/developer_manual/design/img/actions/view-next.svg b/developer_manual/design/img/actions/view-next.svg
new file mode 100644
index 000000000..662b2172d
--- /dev/null
+++ b/developer_manual/design/img/actions/view-next.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/view-pause.png b/developer_manual/design/img/actions/view-pause.png
new file mode 100644
index 000000000..933aca43e
Binary files /dev/null and b/developer_manual/design/img/actions/view-pause.png differ
diff --git a/developer_manual/design/img/actions/view-pause.svg b/developer_manual/design/img/actions/view-pause.svg
new file mode 100644
index 000000000..edc29cacc
--- /dev/null
+++ b/developer_manual/design/img/actions/view-pause.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/view-play.png b/developer_manual/design/img/actions/view-play.png
new file mode 100644
index 000000000..d4c5bf715
Binary files /dev/null and b/developer_manual/design/img/actions/view-play.png differ
diff --git a/developer_manual/design/img/actions/view-play.svg b/developer_manual/design/img/actions/view-play.svg
new file mode 100644
index 000000000..9d9fb12bd
--- /dev/null
+++ b/developer_manual/design/img/actions/view-play.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/actions/view-previous.png b/developer_manual/design/img/actions/view-previous.png
new file mode 100644
index 000000000..fc5c2fa3c
Binary files /dev/null and b/developer_manual/design/img/actions/view-previous.png differ
diff --git a/developer_manual/design/img/actions/view-previous.svg b/developer_manual/design/img/actions/view-previous.svg
new file mode 100644
index 000000000..492f8f50d
--- /dev/null
+++ b/developer_manual/design/img/actions/view-previous.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/appstore.svg b/developer_manual/design/img/appstore.svg
new file mode 100644
index 000000000..7fa79e370
--- /dev/null
+++ b/developer_manual/design/img/appstore.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/background.png b/developer_manual/design/img/background.png
new file mode 100644
index 000000000..67e1a4b00
Binary files /dev/null and b/developer_manual/design/img/background.png differ
diff --git a/developer_manual/design/img/background.svg b/developer_manual/design/img/background.svg
new file mode 100644
index 000000000..6002015ef
--- /dev/null
+++ b/developer_manual/design/img/background.svg
@@ -0,0 +1,20024 @@
+
diff --git a/developer_manual/design/img/breadcrumb.png b/developer_manual/design/img/breadcrumb.png
new file mode 100644
index 000000000..21cfd72ec
Binary files /dev/null and b/developer_manual/design/img/breadcrumb.png differ
diff --git a/developer_manual/design/img/breadcrumb.svg b/developer_manual/design/img/breadcrumb.svg
new file mode 100644
index 000000000..3bd8759fe
--- /dev/null
+++ b/developer_manual/design/img/breadcrumb.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/categories/auth.png b/developer_manual/design/img/categories/auth.png
new file mode 100644
index 000000000..a61f9e87f
Binary files /dev/null and b/developer_manual/design/img/categories/auth.png differ
diff --git a/developer_manual/design/img/categories/auth.svg b/developer_manual/design/img/categories/auth.svg
new file mode 100644
index 000000000..e770e396a
--- /dev/null
+++ b/developer_manual/design/img/categories/auth.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/categories/bundles.png b/developer_manual/design/img/categories/bundles.png
new file mode 100644
index 000000000..7709780e2
Binary files /dev/null and b/developer_manual/design/img/categories/bundles.png differ
diff --git a/developer_manual/design/img/categories/bundles.svg b/developer_manual/design/img/categories/bundles.svg
new file mode 100644
index 000000000..4ad1413ae
--- /dev/null
+++ b/developer_manual/design/img/categories/bundles.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/categories/customization.png b/developer_manual/design/img/categories/customization.png
new file mode 100644
index 000000000..6712d9c43
Binary files /dev/null and b/developer_manual/design/img/categories/customization.png differ
diff --git a/developer_manual/design/img/categories/customization.svg b/developer_manual/design/img/categories/customization.svg
new file mode 100644
index 000000000..7136e4d55
--- /dev/null
+++ b/developer_manual/design/img/categories/customization.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/categories/files.png b/developer_manual/design/img/categories/files.png
new file mode 100644
index 000000000..fb147adf2
Binary files /dev/null and b/developer_manual/design/img/categories/files.png differ
diff --git a/developer_manual/design/img/categories/files.svg b/developer_manual/design/img/categories/files.svg
new file mode 100644
index 000000000..8ed1bf118
--- /dev/null
+++ b/developer_manual/design/img/categories/files.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/categories/integration.png b/developer_manual/design/img/categories/integration.png
new file mode 100644
index 000000000..d58af21e7
Binary files /dev/null and b/developer_manual/design/img/categories/integration.png differ
diff --git a/developer_manual/design/img/categories/integration.svg b/developer_manual/design/img/categories/integration.svg
new file mode 100644
index 000000000..b2cbc9531
--- /dev/null
+++ b/developer_manual/design/img/categories/integration.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/categories/monitoring.png b/developer_manual/design/img/categories/monitoring.png
new file mode 100644
index 000000000..d73db0558
Binary files /dev/null and b/developer_manual/design/img/categories/monitoring.png differ
diff --git a/developer_manual/design/img/categories/monitoring.svg b/developer_manual/design/img/categories/monitoring.svg
new file mode 100644
index 000000000..d672b660b
--- /dev/null
+++ b/developer_manual/design/img/categories/monitoring.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/categories/multimedia.png b/developer_manual/design/img/categories/multimedia.png
new file mode 100644
index 000000000..d55733133
Binary files /dev/null and b/developer_manual/design/img/categories/multimedia.png differ
diff --git a/developer_manual/design/img/categories/multimedia.svg b/developer_manual/design/img/categories/multimedia.svg
new file mode 100644
index 000000000..3ea1ed2e5
--- /dev/null
+++ b/developer_manual/design/img/categories/multimedia.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/categories/office.png b/developer_manual/design/img/categories/office.png
new file mode 100644
index 000000000..7709b05e4
Binary files /dev/null and b/developer_manual/design/img/categories/office.png differ
diff --git a/developer_manual/design/img/categories/office.svg b/developer_manual/design/img/categories/office.svg
new file mode 100644
index 000000000..0cb37f3b2
--- /dev/null
+++ b/developer_manual/design/img/categories/office.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/categories/organization.png b/developer_manual/design/img/categories/organization.png
new file mode 100644
index 000000000..0bfaceca9
Binary files /dev/null and b/developer_manual/design/img/categories/organization.png differ
diff --git a/developer_manual/design/img/categories/organization.svg b/developer_manual/design/img/categories/organization.svg
new file mode 100644
index 000000000..10bc79fa0
--- /dev/null
+++ b/developer_manual/design/img/categories/organization.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/categories/social.png b/developer_manual/design/img/categories/social.png
new file mode 100644
index 000000000..d1e442a65
Binary files /dev/null and b/developer_manual/design/img/categories/social.png differ
diff --git a/developer_manual/design/img/categories/social.svg b/developer_manual/design/img/categories/social.svg
new file mode 100644
index 000000000..7953cd068
--- /dev/null
+++ b/developer_manual/design/img/categories/social.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/desktopapp.svg b/developer_manual/design/img/desktopapp.svg
new file mode 100644
index 000000000..67145f859
--- /dev/null
+++ b/developer_manual/design/img/desktopapp.svg
@@ -0,0 +1,2 @@
+
+
diff --git a/developer_manual/design/img/facebook.svg b/developer_manual/design/img/facebook.svg
new file mode 100644
index 000000000..2d0c64774
--- /dev/null
+++ b/developer_manual/design/img/facebook.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/favicon-fb.png b/developer_manual/design/img/favicon-fb.png
new file mode 100644
index 000000000..dc07d7c1c
Binary files /dev/null and b/developer_manual/design/img/favicon-fb.png differ
diff --git a/developer_manual/design/img/favicon-mask.svg b/developer_manual/design/img/favicon-mask.svg
new file mode 100644
index 000000000..380c89056
--- /dev/null
+++ b/developer_manual/design/img/favicon-mask.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/favicon-touch.png b/developer_manual/design/img/favicon-touch.png
new file mode 100644
index 000000000..635806813
Binary files /dev/null and b/developer_manual/design/img/favicon-touch.png differ
diff --git a/developer_manual/design/img/favicon-touch.svg b/developer_manual/design/img/favicon-touch.svg
new file mode 100644
index 000000000..82dfdc4fd
--- /dev/null
+++ b/developer_manual/design/img/favicon-touch.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/favicon.ico b/developer_manual/design/img/favicon.ico
new file mode 100644
index 000000000..cadd9d347
Binary files /dev/null and b/developer_manual/design/img/favicon.ico differ
diff --git a/developer_manual/design/img/favicon.png b/developer_manual/design/img/favicon.png
new file mode 100644
index 000000000..3988dce0b
Binary files /dev/null and b/developer_manual/design/img/favicon.png differ
diff --git a/developer_manual/design/img/favicon.svg b/developer_manual/design/img/favicon.svg
new file mode 100644
index 000000000..a7e98470c
--- /dev/null
+++ b/developer_manual/design/img/favicon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/filetypes/application-pdf.svg b/developer_manual/design/img/filetypes/application-pdf.svg
new file mode 100644
index 000000000..4f75f6c03
--- /dev/null
+++ b/developer_manual/design/img/filetypes/application-pdf.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/filetypes/application.svg b/developer_manual/design/img/filetypes/application.svg
new file mode 100644
index 000000000..9c9bd5680
--- /dev/null
+++ b/developer_manual/design/img/filetypes/application.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/filetypes/audio.svg b/developer_manual/design/img/filetypes/audio.svg
new file mode 100644
index 000000000..ad774daac
--- /dev/null
+++ b/developer_manual/design/img/filetypes/audio.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/filetypes/file.svg b/developer_manual/design/img/filetypes/file.svg
new file mode 100644
index 000000000..bb91dff51
--- /dev/null
+++ b/developer_manual/design/img/filetypes/file.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/filetypes/folder-drag-accept.png b/developer_manual/design/img/filetypes/folder-drag-accept.png
new file mode 100644
index 000000000..907b5128d
Binary files /dev/null and b/developer_manual/design/img/filetypes/folder-drag-accept.png differ
diff --git a/developer_manual/design/img/filetypes/folder-drag-accept.svg b/developer_manual/design/img/filetypes/folder-drag-accept.svg
new file mode 100644
index 000000000..519d8da08
--- /dev/null
+++ b/developer_manual/design/img/filetypes/folder-drag-accept.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/filetypes/folder-external.svg b/developer_manual/design/img/filetypes/folder-external.svg
new file mode 100644
index 000000000..8d99109e3
--- /dev/null
+++ b/developer_manual/design/img/filetypes/folder-external.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/filetypes/folder-public.svg b/developer_manual/design/img/filetypes/folder-public.svg
new file mode 100644
index 000000000..d2793ec97
--- /dev/null
+++ b/developer_manual/design/img/filetypes/folder-public.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/filetypes/folder-shared.svg b/developer_manual/design/img/filetypes/folder-shared.svg
new file mode 100644
index 000000000..00507465f
--- /dev/null
+++ b/developer_manual/design/img/filetypes/folder-shared.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/filetypes/folder-starred.svg b/developer_manual/design/img/filetypes/folder-starred.svg
new file mode 100644
index 000000000..ba6df445f
--- /dev/null
+++ b/developer_manual/design/img/filetypes/folder-starred.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/filetypes/folder.png b/developer_manual/design/img/filetypes/folder.png
new file mode 100644
index 000000000..3f943bf7a
Binary files /dev/null and b/developer_manual/design/img/filetypes/folder.png differ
diff --git a/developer_manual/design/img/filetypes/folder.svg b/developer_manual/design/img/filetypes/folder.svg
new file mode 100644
index 000000000..14b2b6693
--- /dev/null
+++ b/developer_manual/design/img/filetypes/folder.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/filetypes/image.svg b/developer_manual/design/img/filetypes/image.svg
new file mode 100644
index 000000000..01b856de0
--- /dev/null
+++ b/developer_manual/design/img/filetypes/image.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/filetypes/link.svg b/developer_manual/design/img/filetypes/link.svg
new file mode 100644
index 000000000..999a9deb7
--- /dev/null
+++ b/developer_manual/design/img/filetypes/link.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/filetypes/location.svg b/developer_manual/design/img/filetypes/location.svg
new file mode 100644
index 000000000..737b1dd66
--- /dev/null
+++ b/developer_manual/design/img/filetypes/location.svg
@@ -0,0 +1,2 @@
+
+
diff --git a/developer_manual/design/img/filetypes/package-x-generic.svg b/developer_manual/design/img/filetypes/package-x-generic.svg
new file mode 100644
index 000000000..2d77898ba
--- /dev/null
+++ b/developer_manual/design/img/filetypes/package-x-generic.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/filetypes/text-calendar.svg b/developer_manual/design/img/filetypes/text-calendar.svg
new file mode 100644
index 000000000..c031ad63e
--- /dev/null
+++ b/developer_manual/design/img/filetypes/text-calendar.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/filetypes/text-code.svg b/developer_manual/design/img/filetypes/text-code.svg
new file mode 100644
index 000000000..87e739c5a
--- /dev/null
+++ b/developer_manual/design/img/filetypes/text-code.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/filetypes/text-vcard.svg b/developer_manual/design/img/filetypes/text-vcard.svg
new file mode 100644
index 000000000..976838b75
--- /dev/null
+++ b/developer_manual/design/img/filetypes/text-vcard.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/filetypes/text.png b/developer_manual/design/img/filetypes/text.png
new file mode 100644
index 000000000..087cd5dca
Binary files /dev/null and b/developer_manual/design/img/filetypes/text.png differ
diff --git a/developer_manual/design/img/filetypes/text.svg b/developer_manual/design/img/filetypes/text.svg
new file mode 100644
index 000000000..f32cc2904
--- /dev/null
+++ b/developer_manual/design/img/filetypes/text.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/filetypes/video.svg b/developer_manual/design/img/filetypes/video.svg
new file mode 100644
index 000000000..419385674
--- /dev/null
+++ b/developer_manual/design/img/filetypes/video.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/filetypes/x-office-document.svg b/developer_manual/design/img/filetypes/x-office-document.svg
new file mode 100644
index 000000000..7d98bf428
--- /dev/null
+++ b/developer_manual/design/img/filetypes/x-office-document.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/filetypes/x-office-presentation.svg b/developer_manual/design/img/filetypes/x-office-presentation.svg
new file mode 100644
index 000000000..e365a242b
--- /dev/null
+++ b/developer_manual/design/img/filetypes/x-office-presentation.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/filetypes/x-office-spreadsheet.svg b/developer_manual/design/img/filetypes/x-office-spreadsheet.svg
new file mode 100644
index 000000000..62eeb2cd5
--- /dev/null
+++ b/developer_manual/design/img/filetypes/x-office-spreadsheet.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/googleplay.png b/developer_manual/design/img/googleplay.png
new file mode 100644
index 000000000..170a9d0c1
Binary files /dev/null and b/developer_manual/design/img/googleplay.png differ
diff --git a/developer_manual/design/img/googleplus.svg b/developer_manual/design/img/googleplus.svg
new file mode 100644
index 000000000..7e001f467
--- /dev/null
+++ b/developer_manual/design/img/googleplus.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/loading-dark.gif b/developer_manual/design/img/loading-dark.gif
new file mode 100644
index 000000000..72c66c07d
Binary files /dev/null and b/developer_manual/design/img/loading-dark.gif differ
diff --git a/developer_manual/design/img/loading-small-dark.gif b/developer_manual/design/img/loading-small-dark.gif
new file mode 100644
index 000000000..1aa3da800
Binary files /dev/null and b/developer_manual/design/img/loading-small-dark.gif differ
diff --git a/developer_manual/design/img/loading-small.gif b/developer_manual/design/img/loading-small.gif
new file mode 100644
index 000000000..83587a634
Binary files /dev/null and b/developer_manual/design/img/loading-small.gif differ
diff --git a/developer_manual/design/img/loading.gif b/developer_manual/design/img/loading.gif
new file mode 100644
index 000000000..c7abd3261
Binary files /dev/null and b/developer_manual/design/img/loading.gif differ
diff --git a/developer_manual/design/img/logo-icon-175px.png b/developer_manual/design/img/logo-icon-175px.png
new file mode 100644
index 000000000..6397f61cd
Binary files /dev/null and b/developer_manual/design/img/logo-icon-175px.png differ
diff --git a/developer_manual/design/img/logo-mail.png b/developer_manual/design/img/logo-mail.png
new file mode 100644
index 000000000..80304ae7e
Binary files /dev/null and b/developer_manual/design/img/logo-mail.png differ
diff --git a/developer_manual/design/img/logo.png b/developer_manual/design/img/logo.png
new file mode 100644
index 000000000..df32e1c7e
Binary files /dev/null and b/developer_manual/design/img/logo.png differ
diff --git a/developer_manual/design/img/logo.svg b/developer_manual/design/img/logo.svg
new file mode 100644
index 000000000..5fdf57a01
--- /dev/null
+++ b/developer_manual/design/img/logo.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/mail.svg b/developer_manual/design/img/mail.svg
new file mode 100644
index 000000000..37d97065d
--- /dev/null
+++ b/developer_manual/design/img/mail.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/manifest.json b/developer_manual/design/img/manifest.json
new file mode 100644
index 000000000..fcecb8566
--- /dev/null
+++ b/developer_manual/design/img/manifest.json
@@ -0,0 +1,14 @@
+{
+ "name": "Nextcloud",
+ "start_url": "../../",
+ "icons": [{
+ "src": "favicon-touch.png",
+ "type": "image/png",
+ "sizes": "128x128"
+ }, {
+ "src": "favicon-mask.svg",
+ "type": "image/svg+xml",
+ "sizes": "16x16"
+ }],
+ "display": "standalone"
+}
diff --git a/developer_manual/design/img/places/calendar-dark.png b/developer_manual/design/img/places/calendar-dark.png
new file mode 100644
index 000000000..d66c597f9
Binary files /dev/null and b/developer_manual/design/img/places/calendar-dark.png differ
diff --git a/developer_manual/design/img/places/calendar-dark.svg b/developer_manual/design/img/places/calendar-dark.svg
new file mode 100644
index 000000000..9290ef60f
--- /dev/null
+++ b/developer_manual/design/img/places/calendar-dark.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/places/calendar.png b/developer_manual/design/img/places/calendar.png
new file mode 100644
index 000000000..3d88f2723
Binary files /dev/null and b/developer_manual/design/img/places/calendar.png differ
diff --git a/developer_manual/design/img/places/calendar.svg b/developer_manual/design/img/places/calendar.svg
new file mode 100644
index 000000000..68249fa97
--- /dev/null
+++ b/developer_manual/design/img/places/calendar.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/places/contacts-dark.png b/developer_manual/design/img/places/contacts-dark.png
new file mode 100644
index 000000000..e67ad9009
Binary files /dev/null and b/developer_manual/design/img/places/contacts-dark.png differ
diff --git a/developer_manual/design/img/places/contacts-dark.svg b/developer_manual/design/img/places/contacts-dark.svg
new file mode 100644
index 000000000..56ff262e9
--- /dev/null
+++ b/developer_manual/design/img/places/contacts-dark.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/places/contacts.png b/developer_manual/design/img/places/contacts.png
new file mode 100644
index 000000000..08daa9484
Binary files /dev/null and b/developer_manual/design/img/places/contacts.png differ
diff --git a/developer_manual/design/img/places/contacts.svg b/developer_manual/design/img/places/contacts.svg
new file mode 100644
index 000000000..4e6206db0
--- /dev/null
+++ b/developer_manual/design/img/places/contacts.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/places/default-app-icon.svg b/developer_manual/design/img/places/default-app-icon.svg
new file mode 100644
index 000000000..7ef7f0869
--- /dev/null
+++ b/developer_manual/design/img/places/default-app-icon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/places/files-dark.png b/developer_manual/design/img/places/files-dark.png
new file mode 100644
index 000000000..3c91d0ec5
Binary files /dev/null and b/developer_manual/design/img/places/files-dark.png differ
diff --git a/developer_manual/design/img/places/files-dark.svg b/developer_manual/design/img/places/files-dark.svg
new file mode 100644
index 000000000..75fe17e0b
--- /dev/null
+++ b/developer_manual/design/img/places/files-dark.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/places/files.png b/developer_manual/design/img/places/files.png
new file mode 100644
index 000000000..7ce87e41b
Binary files /dev/null and b/developer_manual/design/img/places/files.png differ
diff --git a/developer_manual/design/img/places/files.svg b/developer_manual/design/img/places/files.svg
new file mode 100644
index 000000000..5a205380c
--- /dev/null
+++ b/developer_manual/design/img/places/files.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/places/home.png b/developer_manual/design/img/places/home.png
new file mode 100644
index 000000000..9ec79348a
Binary files /dev/null and b/developer_manual/design/img/places/home.png differ
diff --git a/developer_manual/design/img/places/home.svg b/developer_manual/design/img/places/home.svg
new file mode 100644
index 000000000..30ef3e31a
--- /dev/null
+++ b/developer_manual/design/img/places/home.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/places/link.png b/developer_manual/design/img/places/link.png
new file mode 100644
index 000000000..d1208fd96
Binary files /dev/null and b/developer_manual/design/img/places/link.png differ
diff --git a/developer_manual/design/img/places/link.svg b/developer_manual/design/img/places/link.svg
new file mode 100644
index 000000000..08127c001
--- /dev/null
+++ b/developer_manual/design/img/places/link.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/places/music.png b/developer_manual/design/img/places/music.png
new file mode 100644
index 000000000..c02d6b6d7
Binary files /dev/null and b/developer_manual/design/img/places/music.png differ
diff --git a/developer_manual/design/img/places/music.svg b/developer_manual/design/img/places/music.svg
new file mode 100644
index 000000000..c73be3349
--- /dev/null
+++ b/developer_manual/design/img/places/music.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/places/picture.png b/developer_manual/design/img/places/picture.png
new file mode 100644
index 000000000..36b53aa8d
Binary files /dev/null and b/developer_manual/design/img/places/picture.png differ
diff --git a/developer_manual/design/img/places/picture.svg b/developer_manual/design/img/places/picture.svg
new file mode 100644
index 000000000..5cef599c2
--- /dev/null
+++ b/developer_manual/design/img/places/picture.svg
@@ -0,0 +1 @@
+
diff --git a/developer_manual/design/img/rating/s0.svg b/developer_manual/design/img/rating/s0.svg
new file mode 100644
index 000000000..594f8ee9b
--- /dev/null
+++ b/developer_manual/design/img/rating/s0.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/rating/s1.svg b/developer_manual/design/img/rating/s1.svg
new file mode 100644
index 000000000..5469cccc6
--- /dev/null
+++ b/developer_manual/design/img/rating/s1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/rating/s10.svg b/developer_manual/design/img/rating/s10.svg
new file mode 100644
index 000000000..14ba6c3ef
--- /dev/null
+++ b/developer_manual/design/img/rating/s10.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/rating/s2.svg b/developer_manual/design/img/rating/s2.svg
new file mode 100644
index 000000000..a59725b16
--- /dev/null
+++ b/developer_manual/design/img/rating/s2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/rating/s3.svg b/developer_manual/design/img/rating/s3.svg
new file mode 100644
index 000000000..75acd660e
--- /dev/null
+++ b/developer_manual/design/img/rating/s3.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/rating/s4.svg b/developer_manual/design/img/rating/s4.svg
new file mode 100644
index 000000000..411544a83
--- /dev/null
+++ b/developer_manual/design/img/rating/s4.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/rating/s5.svg b/developer_manual/design/img/rating/s5.svg
new file mode 100644
index 000000000..759ff447c
--- /dev/null
+++ b/developer_manual/design/img/rating/s5.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/rating/s6.svg b/developer_manual/design/img/rating/s6.svg
new file mode 100644
index 000000000..e967c094f
--- /dev/null
+++ b/developer_manual/design/img/rating/s6.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/rating/s7.svg b/developer_manual/design/img/rating/s7.svg
new file mode 100644
index 000000000..5ea2b9d62
--- /dev/null
+++ b/developer_manual/design/img/rating/s7.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/rating/s8.svg b/developer_manual/design/img/rating/s8.svg
new file mode 100644
index 000000000..ec8a0fac1
--- /dev/null
+++ b/developer_manual/design/img/rating/s8.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/rating/s9.svg b/developer_manual/design/img/rating/s9.svg
new file mode 100644
index 000000000..7b9f3819c
--- /dev/null
+++ b/developer_manual/design/img/rating/s9.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/rss.svg b/developer_manual/design/img/rss.svg
new file mode 100644
index 000000000..6962c85b1
--- /dev/null
+++ b/developer_manual/design/img/rss.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/img/twitter.svg b/developer_manual/design/img/twitter.svg
new file mode 100644
index 000000000..da1de00be
--- /dev/null
+++ b/developer_manual/design/img/twitter.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/developer_manual/design/index.rst b/developer_manual/design/index.rst
new file mode 100644
index 000000000..113650a73
--- /dev/null
+++ b/developer_manual/design/index.rst
@@ -0,0 +1,13 @@
+=================
+Design Guidelines
+=================
+
+.. toctree::
+ :maxdepth: 2
+
+ navigation
+ settings
+ content
+ popovermenu
+ html
+ icons
diff --git a/developer_manual/design/navigation.rst b/developer_manual/design/navigation.rst
new file mode 100644
index 000000000..b5686a2e0
--- /dev/null
+++ b/developer_manual/design/navigation.rst
@@ -0,0 +1,388 @@
+.. sectionauthor:: John Molakvoæ
+.. codeauthor:: John Molakvoæ
+.. _navigation:
+
+===============
+App Navigation
+===============
+
+Introduction
+=============
+
+The main navigation menu represents the main navigation of your app.
+
+It needs to be:
+
+* Organised
+* Simple
+* Responsive
+
+Nextcloud provides a very organized way of building menus.
+We implemented various essential functions and provide easy way of using them.
+
+
+Basic layout
+=============
+
+.. figure:: ../images/navigation.png
+ :alt: Navigation screenshot
+ :figclass: figure-with-code
+
+.. code-block:: html
+
+
+
+
+Basic rules
+=============
+
+* You can **not** change the default padding of the navigation elements.
+* We encourage you to add icons on every top-level item of your navigation for accessibility.
+* Do **not** override the default structure and/or CSS. Everything has been carefully tuned.
+
+Utils: menu, counter & buttons
+===============================
+
+Each entry is allowed to have a counter and/or a button for user interaction.
+
+* 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 :ref:`buttons `
+ * One :ref:`button ` and one :ref:`button `
+* 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
+
+
+
+
+
+
+.. _navigation_menu:
+
+Menu
+^^^^^^
+
+If you need to add a few interactions 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
+ :figclass: figure-with-code
+
+.. code-block:: html
+
+
+
+The menu is hidden by default and has to be triggered by adding the ``open`` class to the ``app-navigation-entry-menu`` div.
+In case of AngularJS the following small directive can be added to handle all the display and click logic out of the box:
+
+.. code-block:: js
+
+ app.run(function ($document, $rootScope) {
+ 'use strict';
+ $document.click(function (event) {
+ $rootScope.$broadcast('documentClicked', event);
+ });
+ });
+
+ app.directive('appNavigationEntryUtils', function () {
+ 'use strict';
+ return {
+ restrict: 'C',
+ link: 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');
+ }
+ });
+ }
+ };
+ });
+
+.. _navigation_counter:
+
+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
+ :figclass: figure-with-code
+
+.. code-block:: html
+
+
1
+
+The count should be limitted 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 behaviour:
+
+.. code-block:: js
+
+ app.filter('counterFormatter', function () {
+ 'use strict';
+ return function (count) {
+ if (count > 999) {
+ return '999+';
+ }
+ return count;
+ };
+ });
+
+Use it like this:
+
+.. code-block:: html
+
+
{{ count | counterFormatter }}
+
+.. _navigation_buttons:
+
+Buttons
+^^^^^^^^^
+
+The same way we display the menu three-dot-icon button, you're allowed to use up to 2 buttons in a single entry.
+
+* The icon class goes directly on the ``button`` element.
+* If no class is set, the three-dot-icon will be used by default
+
+.. figure:: ../images/navigation-buttons.png
+ :alt: Navigation entry with counter
+ :figclass: figure-with-code
+
+.. code-block:: html
+
+
+
+
+
+
+
+
+
+
+
+
+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
+==================
+
+By default, all sub-entries are shown.
+This behavior can be changed by creating a collapsible menu.
+This way, the menu will be hidden and an arrow will be added in in front of it (replacing the icon if any).
+
+The opening of the menu is activated and animated by the class ``open`` on the main ``li``.
+
+* You can **not** have a collapsible menu on a sub-item, this can only exist on a top-level element.
+* You can set the open class by default if you want.
+* Do **not** use the collapsible menu if your element does not have sub-items.
+* You **still** need to use JS to handle the click event.
+
+.. IMPORTANT::
+ * If your top-level link is only used as a header, the **entire** ``a`` needs to be used to toggle the ``open`` class.
+ * If your top-level link is used to redirect the user or to trigger something else, you **need** to add the collapsible button and use it as the ``open`` class toggle trigger.
+
+.. figure:: ../images/navigation-collapsible.*
+ :alt: Collapsible navigation entry
+ :figclass: figure-with-code
+
+.. code-block:: html
+
+
+
+Entry bullet
+=============
+
+Every entry can have a colored marker in front of it.
+We call it a `bullet`.
+
+* You can **not** combine an icon with a bullet.
+* You need to use the CSS to define the bullet color.
+
+.. figure:: ../images/navigation-bullet.png
+ :alt: Navigation entry with bullet
+ :figclass: figure-with-code
+
+.. code-block:: html
+
+
+
+Undo entry
+===========
+
+* Undo entries can be used on any level you want.
+* When an entry is deleted, please use the usual **7 seconds delay feedback** before final deletion.
+* Please use the sentence *Deleted XXXX* as the feedback message.
+* You need to use the ``deleted`` class to trigger the animated hide/show of the undo entry.
+
+.. figure:: ../images/navigation-undo.*
+ :alt: Navigation entry with undo action
+ :figclass: figure-with-code
+
+.. code-block:: html
+
+
+
+Edit entry
+===========
+
+* Editable entries can be used on any level you want.
+* You can replace the ``form`` by a ``div`` if you wish to do your request with JS.
+* You need to use the ``editing`` class to trigger the animated hide/show of the input.
+* You're allowed to use only one submit input. It **must** be the validation button.
+* The input **must** have the same value as the entry link text.
+
+.. figure:: ../images/navigation-edit.*
+ :alt: Editable navigation entry
+ :figclass: figure-with-code
+
+.. code-block:: html
+
+
+
+Pinned entry
+=============
+
+Every top-level entry can be `pinned` at the bottom.
+
+* All the pinned entries can be mixed between non-pinned entries.
+* All the pinned entries **must** have the ``pinned`` class.
+* The **first** pinned entry **must** also have the ``first-pinned`` class.
+
+.. figure:: ../images/navigation-pinned.png
+ :alt: Pinned navigation entries
+ :figclass: figure-with-code
+
+.. code-block:: html
+
+
+
+Various informations
+=====================
+
+* You can add the ``icon-loading-small`` class to any ``li`` element to set it in a `loading` state.
+* Every element as a ``min-height`` of 44px as that is the minimum recommended touch target. It also helps with clickability and separation on desktop environments.
diff --git a/developer_manual/design/popovermenu.rst b/developer_manual/design/popovermenu.rst
new file mode 100644
index 000000000..47000e9c0
--- /dev/null
+++ b/developer_manual/design/popovermenu.rst
@@ -0,0 +1,72 @@
+.. sectionauthor:: John Molakvoæ
+.. codeauthor:: John Molakvoæ
+.. _popovermenu:
+
+===============
+Popover Menu
+===============
+
+What is a popover menu
+=======================
+
+This is a quick menu that open on click. For menus, we use the three-dot-icon.
+
+This is exactly the same as the :ref:`navigation menu `. The only difference is the popovermenu class.
+
+Basic layout
+=============
+
+.. figure:: ../images/popovermenu.png
+ :alt: Popover image example
+ :figclass: figure-with-code
+
+.. code-block:: html
+
+
+
+Technical details
+==================
+
+* The only allowed menu items elements are **a** and **button**.
+* You can mix between a and button on the same menu (in case of form or direct link) like the example above
+* You need to put the entire menu just after the three dot icon ``
...
``
+* You do not need JS, CSS only is ok for positioning. JS is **still** required to handle the hide/show.
+* Only **one** ul is allowed.
+* Only **one level** of menu is allowed.
+* Every entry **needs** to have its own icon. This greatly improves the UX.
+* The required **right** distance to the border (or padding, whatever you want to use) of the three-dot icon should be 14px (5 for menu margin and 6 for arrow position)
+
+.. image:: ../images/popover-position.png
+
+Alignment
+==========
+If you want to align your menu, you can add the class to the main popovermenu div.
+
+* Center: ``menu-center``
+* Left: ``menu-left``
+* Right is by default
diff --git a/developer_manual/design/settings.rst b/developer_manual/design/settings.rst
new file mode 100644
index 000000000..a2d676b74
--- /dev/null
+++ b/developer_manual/design/settings.rst
@@ -0,0 +1,35 @@
+.. sectionauthor:: John Molakvoæ
+.. codeauthor:: John Molakvoæ
+.. _settings:
+
+===============
+Settings
+===============
+
+To create a settings area create a div with the id ``app-settings`` inside the ``app-navigation`` 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.
+* Max height of the settings area is 300px. Do **not** change that.
+* Keep it clear, organized and simple.
+
+.. figure:: ../images/settings.*
+ :alt: Settings
+ :figclass: figure-with-code
+
+.. code-block:: html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/developer_manual/images/checkboxes.png b/developer_manual/images/checkboxes.png
new file mode 100644
index 000000000..5567c21ba
Binary files /dev/null and b/developer_manual/images/checkboxes.png differ
diff --git a/developer_manual/images/navigation-bullet.png b/developer_manual/images/navigation-bullet.png
new file mode 100644
index 000000000..edf6a105e
Binary files /dev/null and b/developer_manual/images/navigation-bullet.png differ
diff --git a/developer_manual/images/navigation-buttons.png b/developer_manual/images/navigation-buttons.png
new file mode 100644
index 000000000..64f9cfbda
Binary files /dev/null and b/developer_manual/images/navigation-buttons.png differ
diff --git a/developer_manual/images/navigation-collapsible.gif b/developer_manual/images/navigation-collapsible.gif
new file mode 100644
index 000000000..1e5c5c33d
Binary files /dev/null and b/developer_manual/images/navigation-collapsible.gif differ
diff --git a/developer_manual/images/navigation-collapsible.png b/developer_manual/images/navigation-collapsible.png
new file mode 100644
index 000000000..61ef54bd1
Binary files /dev/null and b/developer_manual/images/navigation-collapsible.png differ
diff --git a/developer_manual/images/navigation-counter.png b/developer_manual/images/navigation-counter.png
new file mode 100644
index 000000000..29312a4b2
Binary files /dev/null and b/developer_manual/images/navigation-counter.png differ
diff --git a/developer_manual/images/navigation-edit.gif b/developer_manual/images/navigation-edit.gif
new file mode 100644
index 000000000..55543e2f1
Binary files /dev/null and b/developer_manual/images/navigation-edit.gif differ
diff --git a/developer_manual/images/navigation-edit.png b/developer_manual/images/navigation-edit.png
new file mode 100644
index 000000000..8dd722cb5
Binary files /dev/null and b/developer_manual/images/navigation-edit.png differ
diff --git a/developer_manual/images/navigation-menu.png b/developer_manual/images/navigation-menu.png
new file mode 100644
index 000000000..889fd5555
Binary files /dev/null and b/developer_manual/images/navigation-menu.png differ
diff --git a/developer_manual/images/navigation-pinned.png b/developer_manual/images/navigation-pinned.png
new file mode 100644
index 000000000..50632d302
Binary files /dev/null and b/developer_manual/images/navigation-pinned.png differ
diff --git a/developer_manual/images/navigation-undo.gif b/developer_manual/images/navigation-undo.gif
new file mode 100644
index 000000000..a31fa3e44
Binary files /dev/null and b/developer_manual/images/navigation-undo.gif differ
diff --git a/developer_manual/images/navigation-undo.png b/developer_manual/images/navigation-undo.png
new file mode 100644
index 000000000..0eecdb47b
Binary files /dev/null and b/developer_manual/images/navigation-undo.png differ
diff --git a/developer_manual/images/navigation.png b/developer_manual/images/navigation.png
new file mode 100644
index 000000000..48502fbdf
Binary files /dev/null and b/developer_manual/images/navigation.png differ
diff --git a/developer_manual/images/popover-position.png b/developer_manual/images/popover-position.png
new file mode 100644
index 000000000..2002ccaea
Binary files /dev/null and b/developer_manual/images/popover-position.png differ
diff --git a/developer_manual/images/popovermenu.png b/developer_manual/images/popovermenu.png
new file mode 100644
index 000000000..bc5cc61de
Binary files /dev/null and b/developer_manual/images/popovermenu.png differ
diff --git a/developer_manual/images/progress.png b/developer_manual/images/progress.png
new file mode 100644
index 000000000..7b9ab211e
Binary files /dev/null and b/developer_manual/images/progress.png differ
diff --git a/developer_manual/images/radios.png b/developer_manual/images/radios.png
new file mode 100644
index 000000000..a3f0e2aee
Binary files /dev/null and b/developer_manual/images/radios.png differ
diff --git a/developer_manual/images/settings.gif b/developer_manual/images/settings.gif
new file mode 100644
index 000000000..b281a9bf4
Binary files /dev/null and b/developer_manual/images/settings.gif differ
diff --git a/developer_manual/images/settings.png b/developer_manual/images/settings.png
new file mode 100644
index 000000000..2e6827438
Binary files /dev/null and b/developer_manual/images/settings.png differ
diff --git a/developer_manual/index.rst b/developer_manual/index.rst
index 8e1ffde09..f300334ee 100644
--- a/developer_manual/index.rst
+++ b/developer_manual/index.rst
@@ -16,6 +16,7 @@ Table of Contents
general/index
app/index
+ design/index
android_library/index
client_apis/index
core/index