From b672fb4186cd18c4d229cfe357e253e257bbe6ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Fri, 16 Feb 2018 08:46:46 +0100 Subject: [PATCH] New button documentation + Wording fixes and introduction to the full navigation element MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- developer_manual/design/index.rst | 1 - developer_manual/design/navigation.rst | 93 ++++++++++++++++++++++++- developer_manual/design/settings.rst | 35 ---------- developer_manual/images/newbutton.png | Bin 0 -> 4404 bytes 4 files changed, 92 insertions(+), 37 deletions(-) delete mode 100644 developer_manual/design/settings.rst create mode 100644 developer_manual/images/newbutton.png diff --git a/developer_manual/design/index.rst b/developer_manual/design/index.rst index 89829bf81..38262d68f 100644 --- a/developer_manual/design/index.rst +++ b/developer_manual/design/index.rst @@ -6,7 +6,6 @@ Design guidelines :maxdepth: 2 navigation - settings content list popovermenu diff --git a/developer_manual/design/navigation.rst b/developer_manual/design/navigation.rst index 2d45a952a..caf0be6d0 100644 --- a/developer_manual/design/navigation.rst +++ b/developer_manual/design/navigation.rst @@ -2,10 +2,61 @@ .. codeauthor:: John Molakvoæ .. _navigation: +.. _newbutton: + =============== -App navigation +Introduction =============== +The navigation section of any nextcloud app is the left sidebar. +It is basically composed of + +* a 'new' button +* a menu +* a settings area + +The 'new' button and the settings area are optional. + + +=============== +New button +=============== + +Introduction +------------- + +A 'new' button is just a stylised button located above the navigation part of your app. +It can be tied to whatever you want as long as it follow those simple rules. +The goal is to have an homogeneity of design across all apps using this button. + +Basic layout +------------- + +.. figure:: ../images/newbutton.png + :alt: Navigation with a new button + :figclass: figure-with-code + +.. code-block:: html + +
+
+ +
+
+ +Rules +------ + +* Stay simple, don't use overcomplicated text in this button. +* Avoid using sentences longer than one line. +* Do not edit the styling of this button. + +.. _appnavigation: + +===================== +App navigation menu +===================== + Introduction ------------ @@ -387,3 +438,43 @@ Various information * 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. + +.. _settings: + +========= +Settings +========= + +Introduction +------------- + +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. + +Basic layout +------------- + +.. figure:: ../images/settings.* + :alt: Settings + :figclass: figure-with-code + +.. code-block:: html + +
+ + + +
+
+ +
+
+ +
+
+
diff --git a/developer_manual/design/settings.rst b/developer_manual/design/settings.rst deleted file mode 100644 index 9d712f1b5..000000000 --- a/developer_manual/design/settings.rst +++ /dev/null @@ -1,35 +0,0 @@ -.. 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/newbutton.png b/developer_manual/images/newbutton.png new file mode 100644 index 0000000000000000000000000000000000000000..ba1dd4dfeebc766e1afe8130915176dd3e3471cc GIT binary patch literal 4404 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 literal 0 HcmV?d00001