diff --git a/developer_manual/design/atomiccomponents.rst b/developer_manual/design/atomiccomponents.rst index 7508c60dbe7..a72db7108cd 100644 --- a/developer_manual/design/atomiccomponents.rst +++ b/developer_manual/design/atomiccomponents.rst @@ -6,6 +6,8 @@ Atomic components Buttons ------- +`Buttons Vue component `_. +`Penpot buttons `_ 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 +44,9 @@ There are generally different types of buttons for different purposes: Action menu ----------- +`Action menu Vue component `_. +`Penpot action menu `_ + .. image:: ../images/action-menu.png :alt: Files action menu @@ -54,7 +59,7 @@ The action menu contains commonly used actions associated with an item. Each ent * checkboxes to quickly toggle a state, like in Mail .. image:: ../images/action-menu-radio-button.gif - :alt: Radio button in action menu in Talk + :alt: Radio button in action menu in Files link sharing * radio buttons to select from a few options, like chat notifications in Talk @@ -64,9 +69,9 @@ The action menu contains commonly used actions associated with an item. Each ent * new entry elements to quickly add items, like add a new mailbox in Mail .. image:: ../images/action-menu-second-level.gif - :alt: Second level of actions in action menu to set due date reminders in Deck + :alt: Second level of actions in action menu to configure custom permissions for link shares in Files -* a second level of actions, like due date reminders in Deck +* a second level of actions, like to configure custom permissions for link shares in Files Some commonly used actions in the action menu are favoriting, renaming, downloading and deleting. Delete should always be at the last position as to not be confused with other actions. @@ -77,8 +82,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 `_. - For Android and iOS, the action menu is generally opened as a bottom sheet. .. _Input fields: @@ -86,6 +89,9 @@ For Android and iOS, the action menu is generally opened as a bottom sheet. Input fields ------------ +`Input field Vue component `_. +`Penpot text fields `_ + .. _Text input: Text input @@ -104,8 +110,11 @@ Text inputs are usually used for free-form inputs. Make sure that the label for Dropdowns ^^^^^^^^^ +`Dropdown Vue component `_. +`Penpot dropdowns `_ + .. image:: ../images/dropdown-find-as-you-type.gif - :alt: Dropdown menu in settings + :alt: Dropdown menu in Files sharing Dropdowns allow the user to select one or more items from a list. Dropdowns can have predefined options from which the user can select one or more items, as seen in Contacts for selecting the type of a phone number. If there are not too many entries, you may also think about using a set of :ref:`checkboxes and radio buttons` instead. @@ -113,13 +122,13 @@ 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 `_. - .. _Checkboxes and radio buttons: Checkboxes and radio buttons ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ +`Checkbox and radio button Vue components `_. +`Penpot checkboxes and radio buttons `_ .. image:: ../images/checkboxes-settings.png :alt: Checkbox in Talk settings @@ -132,8 +141,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 `_. - Pickers ------- @@ -142,6 +149,7 @@ Pickers Datetime picker ^^^^^^^^^^^^^^^ +`Datetime picker Vue component `_. .. image:: ../images/files-date-picker.png :alt: Files date picker @@ -149,13 +157,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 `_. - .. _Color picker: Color picker ^^^^^^^^^^^^ +`Color picker Vue component `_. .. image:: ../images/colour-picker.gif :alt: Deck color picker @@ -163,9 +170,7 @@ 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 `_. - -In addition to these 2 pickers, there is also the `emoji picker `_ and the `timezone picker `_ which can be also be used in your app. +In addition to these 2 pickers, there is also the `emoji picker `_ and the `timezone picker `_ which can be also be used in your app. .. _Tags: @@ -183,6 +188,9 @@ Tags are used by users to manage their items. They can be colored for easy ident Modal ----- +`Modal Vue component `_. +`Penpot modals `_ + .. image:: ../images/deck-card-modal.png :alt: Deck card modal @@ -199,8 +207,6 @@ Examples of modals are: * Move or copy dialog in Files * the file picker in Mail and Talk -`Modal Vue component `_. - 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 `_. @@ -209,6 +215,9 @@ On Android and iOS, content which is in a modal would usually be shown as a full Avatar ------ +`Avatar Vue component `_. +`Penpot avatars `_ + .. image:: ../images/avatar-talk.gif :alt: Avatars in Talk @@ -218,14 +227,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 `_. - - .. _Progress bars and meters: Progress bars and meters ------------------------ +`Progress bar Vue component `_. .. image:: ../images/progress-bar.png :alt: Desktop syncing progress bar @@ -238,41 +245,41 @@ 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 `_. - .. _User bubbles: User bubbles ------------ +`User bubble Vue component `_. +`Penpot user bubbles `_ + .. 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 `_. - -.. _Tooltips: - -Tooltips --------- - -.. image:: ../images/tooltip.png - :alt: Tooltip in Files +.. _Counter bubbles: +Counter bubbles +------------ -Tooltips are small elements which appear on hover and contain information about the element. Although not necessary for every action or item on the screen, tooltips are great for providing extra information or when an element is too small for the text contained in it. +`Counter bubble Vue component `_. +`Penpot counter bubbles `_ -Using many tooltips is not advised, and if your app does this, possibly consider instead using text labels for icons, reducing the number of actions, or if the info in the tooltip is needed at all. +.. image:: ../images/talk-counter-bubble.png + :alt: Talk counter bubble -`The tooltip Vue component can be found here as a directive `_. +In Talk, it is used for showing which chats are unread and if you or your group is mentioned. .. _Empty content: Empty content ------------- +`Empty content component `_. +`Penpot empty content `_ + .. image:: ../images/empty-content.png :alt: Bookmarks empty content @@ -281,8 +288,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 `_. - .. _Skeleton screens: Skeleton screens diff --git a/developer_manual/images/action-menu-checkbox.png b/developer_manual/images/action-menu-checkbox.png index 744c04eb24e..a961792e196 100644 Binary files a/developer_manual/images/action-menu-checkbox.png and b/developer_manual/images/action-menu-checkbox.png differ diff --git a/developer_manual/images/action-menu-icon.png b/developer_manual/images/action-menu-icon.png index 11c1f2bd0cd..522a0bc33ec 100644 Binary files a/developer_manual/images/action-menu-icon.png and b/developer_manual/images/action-menu-icon.png differ diff --git a/developer_manual/images/action-menu-new-item.gif b/developer_manual/images/action-menu-new-item.gif index 608b1854fc2..2ab8f7772b3 100644 Binary files a/developer_manual/images/action-menu-new-item.gif and b/developer_manual/images/action-menu-new-item.gif differ diff --git a/developer_manual/images/action-menu-radio-button.gif b/developer_manual/images/action-menu-radio-button.gif index 3b86d111a00..0970a9d1884 100644 Binary files a/developer_manual/images/action-menu-radio-button.gif and b/developer_manual/images/action-menu-radio-button.gif differ diff --git a/developer_manual/images/action-menu-second-level.gif b/developer_manual/images/action-menu-second-level.gif index d46897ec4dd..941db16c600 100644 Binary files a/developer_manual/images/action-menu-second-level.gif and b/developer_manual/images/action-menu-second-level.gif differ diff --git a/developer_manual/images/action-menu.png b/developer_manual/images/action-menu.png index d7a3e65cf30..fa23b004726 100644 Binary files a/developer_manual/images/action-menu.png and b/developer_manual/images/action-menu.png differ diff --git a/developer_manual/images/avatar-talk.gif b/developer_manual/images/avatar-talk.gif index 67ba0bfa860..69c477d25c8 100644 Binary files a/developer_manual/images/avatar-talk.gif and b/developer_manual/images/avatar-talk.gif differ diff --git a/developer_manual/images/button-primary-secondary.png b/developer_manual/images/button-primary-secondary.png index 316a29dbb1e..1d7ee759719 100644 Binary files a/developer_manual/images/button-primary-secondary.png and b/developer_manual/images/button-primary-secondary.png differ diff --git a/developer_manual/images/checkboxes-settings.png b/developer_manual/images/checkboxes-settings.png index d4db23aacf7..86b91aec03b 100644 Binary files a/developer_manual/images/checkboxes-settings.png and b/developer_manual/images/checkboxes-settings.png differ diff --git a/developer_manual/images/colour-picker.gif b/developer_manual/images/colour-picker.gif index 23655023a7f..6a34fe1e6c5 100644 Binary files a/developer_manual/images/colour-picker.gif and b/developer_manual/images/colour-picker.gif differ diff --git a/developer_manual/images/deck-card-modal.png b/developer_manual/images/deck-card-modal.png index 3ac9b6dfa70..7191be98dd9 100644 Binary files a/developer_manual/images/deck-card-modal.png and b/developer_manual/images/deck-card-modal.png differ diff --git a/developer_manual/images/dropdown-find-as-you-type.gif b/developer_manual/images/dropdown-find-as-you-type.gif index 35130beb1c8..2ffb920618d 100644 Binary files a/developer_manual/images/dropdown-find-as-you-type.gif and b/developer_manual/images/dropdown-find-as-you-type.gif differ diff --git a/developer_manual/images/empty-content.png b/developer_manual/images/empty-content.png index a48fde1f3fb..969fd8f6ec7 100644 Binary files a/developer_manual/images/empty-content.png and b/developer_manual/images/empty-content.png differ diff --git a/developer_manual/images/skeleton-screen-talk.png b/developer_manual/images/skeleton-screen-talk.png index 38d25a992ee..d9f161a1d2c 100644 Binary files a/developer_manual/images/skeleton-screen-talk.png and b/developer_manual/images/skeleton-screen-talk.png differ diff --git a/developer_manual/images/talk-counter-bubble.png b/developer_manual/images/talk-counter-bubble.png new file mode 100644 index 00000000000..30cf0d39a49 Binary files /dev/null and b/developer_manual/images/talk-counter-bubble.png differ