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 to top and add some links

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

42
developer_manual/design/atomiccomponents.rst
View File

@@ -6,6 +6,7 @@ Atomic components
Buttons
-------
`Buttons Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcButton>`_.
Buttons are used to initiate actions in your app. This may be a primary action, or it may be used to confirm an action in a dialog, or simply be used for any major action in your app.
@@ -42,6 +43,8 @@ There are generally different types of buttons for different purposes:
Action menu
-----------
`Action menu Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcActions>`_.
.. image:: ../images/action-menu.png
:alt: Files action menu
@@ -77,8 +80,6 @@ It is important to keep the action menu simple and its length at a minimum. Too
In most cases the action menu is accessed through a 3-dot menu. In certain cases, it is better to use a specific icon instead of the generic 3-dot icon. For example in Talk a paperclip icon is used for accessing the action menu for attaching an item, and a heading icon is used in Text formatting bar for heading level selection.
`Action menu Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcActions>`_.
For Android and iOS, the action menu is generally opened as a bottom sheet.
.. _Input fields:
@@ -86,6 +87,8 @@ For Android and iOS, the action menu is generally opened as a bottom sheet.
Input fields
------------
`Input field Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcFields?id=ncinputfield>`_.
.. _Text input:
Text input
@@ -104,6 +107,8 @@ Text inputs are usually used for free-form inputs. Make sure that the label for
Dropdowns
^^^^^^^^^
`Dropdown Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcSelect>`_.
.. image:: ../images/dropdown-find-as-you-type.gif
:alt: Dropdown menu in settings
@@ -113,13 +118,12 @@ Although not always necessary, it is generally a good idea to have a default ite
Another variation of the dropdown allows the user to find their preferred option by typing it in, like in Mail where the "To" field in the composer allows you to type an email address, and as you type it shows a dropdown with the results matching the input. This kind of dropdown is useful for when there are many options and the user would already know what they are looking for. It can also be a good idea to allow new inputs if there are no matches.
`Dropdown Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcSelect>`_.
.. _Checkboxes and radio buttons:
Checkboxes and radio buttons
^^^^^^^^^^^^^^^^^^^^^^^^^^^^
`Checkbox and radio button Vue components <https://nextcloud-vue-components.netlify.app/#/Components/NcCheckboxRadioSwitch>`_.
.. image:: ../images/checkboxes-settings.png
:alt: Checkbox in Talk settings
@@ -132,8 +136,6 @@ Checkboxes and radio buttons are very common input methods. They are most common
They should have a concise label, especially if they are inside an action menu. If more explanation is needed, you can also add a subline.
`Checkbox and radio button Vue components <https://nextcloud-vue-components.netlify.app/#/Components/NcCheckboxRadioSwitch>`_.
Pickers
-------
@@ -142,6 +144,7 @@ Pickers
Datetime picker
^^^^^^^^^^^^^^^
`Datetime picker Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcPickers?id=ncdatetimepicker>`_.
.. image:: ../images/files-date-picker.png
:alt: Files date picker
@@ -149,13 +152,12 @@ Datetime picker
A user can quickly select dates, times and date ranges using the datetime picker. Use good default dates relevant to the task at hand. For example, in the case of setting an expiration date, unless the server has something enforced as default, 1 week is a good default.
`Datetime picker Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcPickers?id=ncdatetimepicker>`_.
.. _Color picker:
Color picker
^^^^^^^^^^^^
`Color picker Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcPickers?id=nccolorpicker>`_.
.. image:: ../images/colour-picker.gif
:alt: Deck color picker
@@ -163,8 +165,6 @@ Color picker
For certain elements of your UI you might want to allow people to set colors. This can easily be achieved using a color picker with some predefined colors. Be cautious about using different colors in the UI. In most Nextcloud apps like Deck and Calendar, user defined colors for UI elements are used sparingly and shown as a circle next to the element they refer to.
`Color picker Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcPickers?id=nccolorpicker>`_.
In addition to these 2 pickers, there is also the `emoji picker <https://nextcloud-vue-components.netlify.app/#/Components/NcPickers?id=ncemojipicker>`_ and the `timezone picker <https://nextcloud-vue-components.netlify.app/#/Components/NcPickers?id=nctimezonepicker>`_ which can be also be used in your app.
.. _Tags:
@@ -183,6 +183,8 @@ Tags are used by users to manage their items. They can be colored for easy ident
Modal
-----
`Modal Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcModal>`_.
.. image:: ../images/deck-card-modal.png
:alt: Deck card modal
@@ -199,8 +201,6 @@ Examples of modals are:
* Move or copy dialog in Files
* the file picker in Mail and Talk
`Modal Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcModal>`_.
On Android and iOS, content which is in a modal would usually be shown as a full-screen overlay, like for example composing a new mail in `iOS Mail <https://developer.apple.com/documentation/messageui/mfmailcomposeviewcontroller>`_.
@@ -209,6 +209,8 @@ On Android and iOS, content which is in a modal would usually be shown as a full
Avatar
------
`Avatar Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcAvatar>`_.
.. image:: ../images/avatar-talk.gif
:alt: Avatars in Talk
@@ -218,14 +220,12 @@ When using an avatar it is usually accompanied by the name of the user as well,
When multiple people are working on or are assigned to the same element, like in Text, Office, a Deck card, or in the Files list for sharing, they are shown as overlapped.
`Avatar Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcAvatar>`_.
.. _Progress bars and meters:
Progress bars and meters
------------------------
`Progress bar Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcProgressBar>`_.
.. image:: ../images/progress-bar.png
:alt: Desktop syncing progress bar
@@ -238,28 +238,26 @@ Progress bars shows progress for a potentially lengthy process such as uploading
The progress bar component is also sometimes used as a meter to visualize data as seen in the settings for Files to show the quota.
`Progress bar Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcProgressBar>`_.
.. _User bubbles:
User bubbles
------------
`User bubble Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcUserBubble>`_.
.. image:: ../images/talk-user-bubble.png
:alt: Talk user bubble
When referring to a user inline in your app, a user bubble element can be used. In Talk and Comments, user bubbles are used in the content when someone mentions a user. In Mail, it is used in the header for the recipients of the message.
`User bubble Vue component <https://nextcloud-vue-components.netlify.app/#/Components/NcUserBubble>`_.
.. _Tooltips:
.. _Empty content:
Empty content
-------------
`Empty content component <https://nextcloud-vue-components.netlify.app/#/Components/NcEmptyContent>`_.
.. image:: ../images/empty-content.png
:alt: Bookmarks empty content
@@ -268,8 +266,6 @@ The empty content state provides feedback that a view is empty, e.g. a new folde
Make sure that empty content views only show when the view is really empty, and not while it is loading – otherwise people will be shocked as to where their data is gone. The wording on the empty content view should be friendly and helping people out of the situation, for example in the Bookmarks app.
`Empty content component <https://nextcloud-vue-components.netlify.app/#/Components/NcEmptyContent>`_.
.. _Skeleton screens:
Skeleton screens