diff --git a/developer_manual/design/layoutcomponents.rst b/developer_manual/design/layoutcomponents.rst index c26461b6f..d1a325123 100644 --- a/developer_manual/design/layoutcomponents.rst +++ b/developer_manual/design/layoutcomponents.rst @@ -6,6 +6,9 @@ All Nextcloud apps are built using individual reusable components for consistenc Navigation ---------- +`Vue component for the app navigation `_. + +`Penpot navigation items `_ .. image:: ../images/contacts-navigation.png :alt: Contacts navigation @@ -13,8 +16,6 @@ Navigation The left navigation provides a way for users to move around different sections of your app. -`Vue component for the app navigation `_. - The navigation consists of 4 main elements: @@ -26,6 +27,10 @@ The navigation consists of 4 main elements: Main action button ^^^^^^^^^^^^^^^^^^ +`Navigation AppNew Vue component `_. + +`Penpot buttons `_ + .. image:: ../images/mail-primary-action-button.png :alt: Mail primary action button.png @@ -42,6 +47,11 @@ For most apps, the first element in the navigation is the main action button. Fo Navigation entries ^^^^^^^^^^^^^^^^^^ +`Navigation entries Vue component `_. + +`Penpot navigation items `_ + +https://design.penpot.app/#/view/db3839da-807b-8052-8002-576401e9a375?page-id=3f784c86-6c27-80c6-8002-6ab157b6bd27§ion=interactions&index=8&share-id=88d87192-d205-8007-8002-8d8d21a0dcca .. image:: ../images/mail-navigation-entries.png :alt: Mail navigation entries @@ -62,11 +72,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 `_. - New item element ^^^^^^^^^^^^^^^^ +`New item Vue component `_. + .. image:: ../images/new-item-element.gif :alt: Add new item element @@ -78,13 +88,15 @@ 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 `_. - .. _Settings: Settings ^^^^^^^^ +`Settings Vue component `_. + +`Penpot modals `_ + .. image:: ../images/talk-settings-modal.png :alt: Talk settings modal @@ -94,8 +106,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 `_. - Also see: :ref:`Modal` .. _List: @@ -103,6 +113,9 @@ Also see: :ref:`Modal` List item ---------- +`List item Vue component `_. + +`Penpot list item `_ .. image:: ../images/list-item.gif :alt: Talk list @@ -114,8 +127,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 `_. - .. _Content: Content @@ -149,9 +160,11 @@ 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 `_. -`Sidebar Vue component `_. +`Penpot 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. Commonly used tabs in the sidebar are: @@ -159,6 +172,10 @@ Commonly used tabs in the sidebar are: Details ^^^^^^^ +`Sidebar Tabs Vue component `_. + +`Penpot sidebar `_ + .. image:: ../images/sidebar-details.png :alt: Details tab in Calendar sidebar diff --git a/developer_manual/images/contacts-navigation.png b/developer_manual/images/contacts-navigation.png index 231536a10..cdeec5b0a 100644 Binary files a/developer_manual/images/contacts-navigation.png and b/developer_manual/images/contacts-navigation.png differ diff --git a/developer_manual/images/list-item.gif b/developer_manual/images/list-item.gif index a8b1a8116..d2c9761d0 100644 Binary files a/developer_manual/images/list-item.gif and b/developer_manual/images/list-item.gif differ diff --git a/developer_manual/images/mail-navigation-entries.png b/developer_manual/images/mail-navigation-entries.png index 199ff19f9..274a968d0 100644 Binary files a/developer_manual/images/mail-navigation-entries.png and b/developer_manual/images/mail-navigation-entries.png differ diff --git a/developer_manual/images/mail-primary-action-button.png b/developer_manual/images/mail-primary-action-button.png index 4c897f1f5..08cf8ca90 100644 Binary files a/developer_manual/images/mail-primary-action-button.png and b/developer_manual/images/mail-primary-action-button.png differ diff --git a/developer_manual/images/new-item-element.gif b/developer_manual/images/new-item-element.gif index 648f81260..71b434f86 100644 Binary files a/developer_manual/images/new-item-element.gif and b/developer_manual/images/new-item-element.gif differ diff --git a/developer_manual/images/sidebar-details.png b/developer_manual/images/sidebar-details.png index 2d968c476..43a2c5e53 100644 Binary files a/developer_manual/images/sidebar-details.png and b/developer_manual/images/sidebar-details.png differ diff --git a/developer_manual/images/sidebar-sharing.png b/developer_manual/images/sidebar-sharing.png index 469431bb2..8662f420d 100644 Binary files a/developer_manual/images/sidebar-sharing.png and b/developer_manual/images/sidebar-sharing.png differ diff --git a/developer_manual/images/talk-settings-modal.png b/developer_manual/images/talk-settings-modal.png index 4db32dc6c..8c80ebdfd 100644 Binary files a/developer_manual/images/talk-settings-modal.png and b/developer_manual/images/talk-settings-modal.png differ