App update docs (#462)

* Add "nagivation" page for app

* Updates

* Add separate screen for search results

* Screenshot updates

docs/app/connect.md

@@ -66,82 +66,3 @@ To edit the server profile details, long press on the server profile, and select
 {% with id="edit", url="app/edit_server.png", maxheight="240px", description="Edit server profile" %}
 {% include 'img.html' %}
 {% endwith %}
-
-## Home Screen
-
-The app *home screen* provides quick-access buttons for stock view and actions:
-
-{% with id="home", url="app/home.png", maxheight="240px", description="Home screen" %}
-{% include 'img.html' %}
-{% endwith %}
-
-### Scan Barcode
-
-Select the *Scan Barcode* icon to open the [barcode scanner](./barcode.md). Scan a barcode to navigate to a detail view for the item you have scanned.
-
-### Search
-
-Select the *Search* icon to open the InvenTree search window. Entering a search term will return multiple search results, as shown in the examples below:
-
-{% with id="search_1", url="app/search_1.png", maxheight="240px", description="Search results" %}
-{% include 'img.html' %}
-{% endwith %}
-
-{% with id="search_2", url="app/search_2.png", maxheight="240px", description="Search results" %}
-{% include 'img.html' %}
-{% endwith %}
-
-### Parts
-
-Select the *Parts* icon to open the [parts display](./part.md). This initially displays the top-level part category, showing information for parts and sub categories.
-
-### Starred Parts
-
-Selected the *Starred Parts* icon to show a list of parts you have personally marked as your "favorite" parts.
-
-### Stock
-
-Select the *Stock* icon to open the [stock display](./stock.md). This initially displays the top-level stock category, showing information for stock items and sub locations.
-
-### Purchase Orders
-
-Select the *Purchase Orders* icon to open the [purchase orders display](./po.md). This shows a list of currently outstanding purchase orders, allowing line items to be received into stock.
-
-### Settings
-
-Select the *Settings* icon to open the [settings display](./settings.md)
-
-## Drawer Menu
-
-The *Drawer Menu* is a quick-access menu which is accessible from most display screens:
-
-{% with id="drawer", url="app/drawer.png", maxheight="240px", description="Open drawer menu" %}
-{% include 'img.html' %}
-{% endwith %}
-
-The *Drawer Menu* can be accessed in the following ways:
-
-- From the *Home Screen* select the *Drawer* icon in the top-left corner of the screen
-- From any other screen, long-press the *Back* button in the top-left corner of the screen
-
-!!! tip "Long Press Menu"
-    Performing a "long press" on the *back* button will provide quick access to the drawer menu from any view
-
-The *Drawer Menu* provides instant access to the following actions:
-
-### InvenTree
-
-Select *InvenTree* to navigate to the [home screen](#home-screen).
-
-### Scan Barcode
-
-Select *Scan Barcode* to open the barcode scanner, and scan an InvenTree stock item or location to instantly jump to the relevant view. Refer to the [barcode documentation](./barcode.md) for more information.
-
-### Search
-
-Select *Search* to open a global search screen.
-
-### Settings
-
-Select *Settings* to navigate to the app [settings](./settings.md) menu.
-

docs/app/navigation.md

@@ -0,0 +1,62 @@
+---
+title: App Navigation
+---
+
+
+## Home Screen
+
+The app *home screen* provides quick-access buttons for stock view and actions:
+
+{% with id="home", url="app/home.png", maxheight="240px", description="Home screen" %}
+{% include 'img.html' %}
+{% endwith %}
+
+## Tab Display
+
+Some screens provide multiple tabbed views, which are displayed at the top of the screen:
+
+{% with id="global_nav", url="app/app_tabs.png", maxheight="240px", description="App tabs" %}
+{% include 'img.html' %}
+{% endwith %}
+
+Tabs can be navigated by pressing on the text of each tab, or by scrolling the screen left or right.
+
+## Global Actions
+
+The *Global Action* buttons are visible on most screens, displayed in the bottom left corner of the screen:
+
+{% with id="global_nav", url="app/app_global_navigation.png", maxheight="240px", description="Global navigation actions" %}
+{% include 'img.html' %}
+{% endwith %}
+
+### Open Drawer Menu
+
+The <span class='fas fa-list'></span> action opens the *Drawer Menu*, which is a quick-access menu for global navigation:
+
+{% with id="drawer", url="app/drawer.png", maxheight="240px", description="Open drawer menu" %}
+{% include 'img.html' %}
+{% endwith %}
+
+The *Drawer Menu* can be accessed in the following ways:
+
+- From the *Home Screen* select the *Drawer* icon in the top-left corner of the screen
+- From any other screen, long-press the *Back* button in the top-left corner of the screen
+
+### Search
+
+The <span class='fas fa-search'></span> action opens the [Search](./search.md) screen
+
+### Scan Barcode
+
+The <span class='fas fa-qrcode'></span> action opens the [barcode scan](./barcode.md) window, which allows quick access to the barcode scanning functionality.
+
+## Context Actions
+
+Within a given view, certain context actions may be available. If there are contextual actions which can be performed, they are displayed in the bottom right corner:
+
+{% with id="drawer", url="app/context_actions.png", maxheight="240px", description="Context actions" %}
+{% include 'img.html' %}
+{% endwith %}
+
+!!! tip "Barcode Actions"
+    Available barcode actions are displayed in a separate context action menu 

docs/app/part.md

@@ -10,7 +10,7 @@ From the *home screen*, select *Parts* to open the top-level part category view.
 
 The *Details* tab shows information about the selected part category. In particular, it shows the name and description of the category, a link to the parent category (if available) and a list of subcategories.
 
-{% with id="part-category", url="part_category_detail.jpg" %}
+{% with id="part-category", url="part_category_detail.png" %}
 {% include "app_img.html" %}
 {% endwith %}
 
@@ -26,21 +26,21 @@ If the current category has any subcategories, these are listed here. Select any
 
 The *Parts* tab displays all the parts available in this category. Tap a displayed part to navigate to the part detail view.
 
-{% with id="cat-parts", url="category_parts_tab.jpg" %}
+{% with id="cat-parts", url="category_parts_tab.png" %}
 {% include "app_img.html" %}
 {% endwith %}
 
 The list of available parts can be filtered using the input box at the top of the screen:
 
-{% with id="cat-parts-filter", url="category_parts_filter.jpg" %}
+{% with id="cat-parts-filter", url="category_parts_filter.png" %}
 {% include "app_img.html" %}
 {% endwith %}
 
-### Actions Tab
+### Context Actions
 
-The *Actions* tab displays the available actions for the selected category:
+The following *Context Actions* are available for the selected category:
 
-{% with id="cat-actions", url="category_actions_tab.jpg" %}
+{% with id="cat-actions", url="category_actions_tab.png" %}
 {% include "app_img.html" %}
 {% endwith %}
 
@@ -77,7 +77,7 @@ In the part category display screen, there are three tabs of information availab
 
 The *Part Detail* view displays information about a single part:
 
-{% with id="part-details", url="part_details.jpg" %}
+{% with id="part-details", url="part_details.png" %}
 {% include "app_img.html" %}
 {% endwith %}
 
@@ -117,7 +117,7 @@ Select a particular attachment file to downloaded it to the local device.
 
 The *Stock* tab displays all the stock items available for this part. Tap on a particular stock item to navigate to a detail view for that item.
 
-{% with id="part-stock", url="part_stock.jpg" %}
+{% with id="part-stock", url="part_stock.png" %}
 {% include "app_img.html" %}
 {% endwith %}
 

docs/app/search.md

@@ -0,0 +1,15 @@
+---
+title: App Search
+---
+
+## Search Screen
+
+The global search screen provides quick search functionality across the connected InvenTree database. Entering a search term will return multiple search results, as shown in the examples below:
+
+{% with id="search_1", url="app/search_1.png", maxheight="240px", description="Search results" %}
+{% include 'img.html' %}
+{% endwith %}
+
+{% with id="search_2", url="app/search_2.png", maxheight="240px", description="Search results" %}
+{% include 'img.html' %}
+{% endwith %}

docs/app/stock.md

@@ -10,7 +10,7 @@ From the *home screen*, select *Stock* to open the top-level stock location view
 
 The *Details* tab shows information about the selected stock location.
 
-{% with id="loc-detail", url="location_detail.jpg" %}
+{% with id="loc-detail", url="location_detail.png" %}
 {% include "app_img.html" %}
 {% endwith %}
 
@@ -26,7 +26,7 @@ If the current stock location has any sublocations, they are listed here. Select
 
 The *Stock* tab displays all the stock items available in this location. Tap a displayed stock item to navigate to the stock item detail view.
 
-{% with id="loc-stock", url="location_stock.jpg" %}
+{% with id="loc-stock", url="location_stock.png" %}
 {% include "app_img.html" %}
 {% endwith %}
 
@@ -38,11 +38,11 @@ The list of available stock items can be filtered using the input box at the top
 {% endwith %}
 
 
-### Actions Tab
+### Context Actions
 
-The *Actions* tab displays the available actions for the selected location:
+The following *Context Actions* are available for the selected location:
 
-{% with id="loc-actions", url="location_actions.jpg" %}
+{% with id="loc-actions", url="location_actions.png" %}
 {% include "app_img.html" %}
 {% endwith %}
 
@@ -74,7 +74,7 @@ Use the barcode scanner to scan a stock item into the current location.
 
 The *Stock Item Detail* view displays information about a single stock item:
 
-{% with id="stock-detail", url="stock_detail.jpg" %}
+{% with id="stock-detail", url="stock_detail.png" %}
 {% include "app_img.html" %}
 {% endwith %}
 
@@ -99,7 +99,7 @@ Tap on the notes tile to display and edit the notes for this stock item
 
 The *actions* tab displays the available actions for the selected stock item:
 
-{% with id="stock-actions", url="stock_actions.jpg" %}
+{% with id="stock-actions", url="stock_actions.png" %}
 {% include "app_img.html" %}
 {% endwith %}
 

mkdocs.yml

@@ -135,6 +135,19 @@ nav:
     - Error Logs: settings/logs.md
     - Email: settings/email.md
     - Background Tasks: settings/tasks.md
+  - App:
+    - InvenTree App: app/app.md
+    - Connect: app/connect.md
+    - Navigation: app/navigation.md
+    - Search: app/search.md
+    - Barcodes: app/barcode.md
+    - Parts: app/part.md
+    - Stock: app/stock.md
+    - Purchase Orders: app/po.md
+    - Settings: app/settings.md
+    - Privacy: app/privacy.md
+    - Translation: app/translation.md
+    - Suggestions: app/issues.md
   - Extend:
     - InvenTree API:
       - Overview: api/api.md
@@ -151,17 +164,6 @@ nav:
       - Internal Barcodes: barcodes/internal.md
       - External Barcodes: barcodes/external.md
       - Custom Barcodes: barcodes/custom.md
-    - App:
-      - InvenTree App: app/app.md
-      - Connect: app/connect.md
-      - Barcodes: app/barcode.md
-      - Parts: app/part.md
-      - Stock: app/stock.md
-      - Purchase Orders: app/po.md
-      - Settings: app/settings.md
-      - Privacy: app/privacy.md
-      - Translation: app/translation.md
-      - Suggestions: app/issues.md
     - Plugins:
       - Overview: extend/plugins.md
       - Installation: extend/plugins/install.md