khanh.pndc/nextcloud-docs
1
0
Fork 0
mirror of https://github.com/nextcloud/documentation.git synced 2026-01-02 17:59:36 +07:00
Code Issues Packages Projects Releases Wiki Activity

Move links up and add a few links

Browse Source 
Signed-off-by: Simon L <szaimen@e.mail.de>
This commit is contained in:
Simon L
2023-05-23 16:39:42 +02:00
parent b73b99456f
commit 925259ba3c
1 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
developer_manual/design/layoutcomponents.rst
View File

@@ -6,6 +6,7 @@ All Nextcloud apps are built using individual reusable components for consistenc
Navigation
----------
`Vue component for the app navigation <https://nextcloud-vue-components.netlify.app/#/Components/App%20containers/NcAppNavigation?id=ncappnavigation-1>`_.
.. image:: ../images/contacts-navigation.png
:alt: Contacts navigation
@@ -13,8 +14,6 @@ Navigation
The left navigation provides a way for users to move around different sections of your app.
`Vue component for the app navigation <https://nextcloud-vue-components.netlify.app/#/Components/App%20containers/NcAppNavigation?id=ncappnavigation-1>`_.
The navigation consists of 4 main elements:
@@ -26,6 +25,8 @@ The navigation consists of 4 main elements:
Main action button
^^^^^^^^^^^^^^^^^^
`Navigation AppNew Vue component <https://nextcloud-vue-components.netlify.app/#/Components/App%20containers/NcAppNavigation?id=ncappnavigationnew>`_.
.. image:: ../images/mail-primary-action-button.png
:alt: Mail primary action button.png
@@ -42,6 +43,8 @@ For most apps, the first element in the navigation is the main action button. Fo
Navigation entries
^^^^^^^^^^^^^^^^^^
`Navigation entries Vue component <https://nextcloud-vue-components.netlify.app/#/Components/App%20containers/NcAppNavigation?id=ncappnavigationitem>`_.
.. image:: ../images/mail-navigation-entries.png
:alt: Mail navigation entries
@@ -62,11 +65,11 @@ Top-level navigation entries ideally have a suitable icon left next to them. Opt
A sublevel of navigation is possible, but can lead to entries being hard to discover. It is only advised if there is actually a hierarchy like for folders in Mail or News.
`Navigation entries Vue component <https://nextcloud-vue-components.netlify.app/#/Components/App%20containers/NcAppNavigation?id=ncappnavigationitem>`_.
New item element
^^^^^^^^^^^^^^^^
`New item Vue component <https://nextcloud-vue-components.netlify.app/#/Components/App%20containers/NcAppNavigation?id=ncappnavigationnewitem>`_.
.. image:: ../images/new-item-element.gif
:alt: Add new item element
@@ -78,13 +81,13 @@ Users can easily create a new item with a suitable name by using the new item el
* "Add mailbox" in Mail
* "New calendar" in Calendar
`New item Vue component <https://nextcloud-vue-components.netlify.app/#/Components/App%20containers/NcAppNavigation?id=ncappnavigationnewitem>`_.
.. _Settings:
Settings
^^^^^^^^
`Settings Vue component <https://nextcloud-vue-components.netlify.app/#/Components/App%20containers/NcAppNavigation?id=ncappnavigationsettings>`_.
.. image:: ../images/talk-settings-modal.png
:alt: Talk settings modal
@@ -94,8 +97,6 @@ The user-specific settings for your app may be shown in a settings modal, which
You can also include a "Help" as an entry in the settings of your app and provide some simple information about your app and how to use it. Some apps like Talk and Mail also include keyboard shortcuts, if they are not disabled by the user.
The global javascript function ``OCP.Accessibility.disableKeyboardShortcuts()`` can be used to check that.
`Settings Vue component <https://nextcloud-vue-components.netlify.app/#/Components/App%20containers/NcAppNavigation?id=ncappnavigationsettings>`_.
Also see: :ref:`Modal`
.. _List:
@@ -103,6 +104,7 @@ Also see: :ref:`Modal`
List item
----------
`List item Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcListItems>`_.
.. image:: ../images/list-item.gif
:alt: Talk list
@@ -114,8 +116,6 @@ List items can be used to display a collection of elements from which one can be
* an :ref:`Action menu` which has commonly used actions for that type of item
* a counter bubble: Talk for example uses an unread messages counter
`List item Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcListItems>`_.
.. _Content:
Content
@@ -149,16 +149,18 @@ Spacing between elements in your app should be in multiples of 4px.
Sidebar
-------
Details of a particular entry in your content, as well as some actions associated with it, are shown in the right sidebar. In apps where the sidebar is used, it only opens when required. The sidebar is never used in the 3-column layout (Navigation + list + content). It contains the main information and sometimes a preview of the selected item, as well as a maximum of 3 possible tabs.
`Sidebar Vue component <https://nextcloud-vue-components.netlify.app/#/Components/App%20containers/NcAppSidebar?id=ncappsidebar-1>`_.
Details of a particular entry in your content, as well as some actions associated with it, are shown in the right sidebar. In apps where the sidebar is used, it only opens when required. The sidebar is never used in the 3-column layout (Navigation + list + content). It contains the main information and sometimes a preview of the selected item, as well as a maximum of 3 possible tabs.
Commonly used tabs in the sidebar are:
Details
^^^^^^^
`Sidebar Tabs Vue component <https://nextcloud-vue-components.netlify.app/#/Components/App%20containers/NcAppSidebar?id=ncappsidebartabs>`_.
.. image:: ../images/sidebar-details.png
:alt: Details tab in Calendar sidebar