New Update User Guide - Add Details panel and new Side Bar for dashbo…

…ards (geosolutions-it#10071)

* add_9721

* add_images

* Update docs/user-guide/exploring-dashboards.md

Co-authored-by: Tobia Di Pisa <[email protected]>

---------

Co-authored-by: Tobia Di Pisa <[email protected]>

docs/user-guide/adding-widgets.md

@@ -2,7 +2,7 @@
 
 ****************
 
-With a click on the <img src="../img/button/+++.jpg" class="ms-docbutton"/> button in [Sidebar](exploring-dashboards.md#sidebar) the *Widget* panel opens, showing the list of the available widget types that can be added to the dashboard:
+With a click on the <img src="../img/button/++++.jpg" class="ms-docbutton"/> button in [Side Toolbar](exploring-dashboards.md#side-toolbar) the *Widget* panel opens, showing the list of the available widget types that can be added to the dashboard:
 
 <img src="../img/adding-widgets/widgets-panel.jpg" class="ms-docimage"  style="max-width:400px;"/>
 

docs/user-guide/connecting-widgets.md

@@ -5,7 +5,7 @@ In dashboards it is possible to connect the added widgets allowing the user to i
 
 <video class="ms-docimage" style="max-width:700px;" controls><source src="../img/connecting-widgets/widgets_interaction.mp4"/></video>
 
-Once at least one connection between widgets is set, it is possible to identify the connected widgets turning on the connections button in the dashboard [Sidebar](exploring-dashboards.md#sidebar) making it green <img src="../img/button/connections.jpg" class="ms-docbutton"/>. This will highlight the connected elements with a colored bar on their upper side.
+Once at least one connection between widgets is set, it is possible to identify the connected widgets turning on the connections button in the dashboard [Side Toolbar](exploring-dashboards.md#side-toolbar) making it green <img src="../img/button/connections.jpg" class="ms-docbutton"/>. This will highlight the connected elements with a colored bar on their upper side.
 
 <video class="ms-docimage" style="max-width:700px;" controls><source src="../img/connecting-widgets/connections_widgets.mp4"/></video>
 
@@ -37,23 +37,23 @@ As soon as more than one Map widget is added to the dashboard, the connect/disco
 
 With a click on it, if only another Map widget is present, by default the connection will be made towards that Map widgets. When more than one Map widget is present in the dashboard, instead, it is possible choose one through a page like the following:
 
-<img src="../img/connecting-widgets/map-to-connect.jpg" class="ms-docimage"/>
+<video class="ms-docimage" style="max-width:700px;" controls><source src="../img/connecting-widgets/map-to-connect.mp4"/></video>
 
 ### Maps with Charts, Tables and Counters
 
 In order to connect Charts, Tables or Counters widget with Maps widget, the procedure is similar to that seen in the [previous section](#connecting-widgets). The result is that the information displayed in the Chart, Table or Counter changes accordingly with the map portion displayed in the connected Map widget. For example the result could be:
 
 * Connecting Charts with Maps:
 
-<img src="../img/connecting-widgets/chart-map.jpg" class="ms-docimage"/>
+<video class="ms-docimage" style="max-width:700px;" controls><source src="../img/connecting-widgets/chart-map.mp4"/></video>
 
 * Connecting Tables with Maps:
 
-<img src="../img/connecting-widgets/table-map.jpg" class="ms-docimage"/>
+<video class="ms-docimage" style="max-width:700px;" controls><source src="../img/connecting-widgets/table-map.mp4"/></video>
 
 * Connecting Counters with Maps:
 
-<img src="../img/connecting-widgets/counter-map.jpg" class="ms-docimage"/>
+<video class="ms-docimage" style="max-width:700px;" controls><source src="../img/connecting-widgets/counter-map.mp4"/></video>
 
 When a pan or zoom operation is performed in the Map widget, the other connected widgets are spatially filtered according to the Map viewport.
 

docs/user-guide/exploring-dashboards.md

@@ -12,49 +12,49 @@ In order to create a new dashboard, the **New Dashboard** button <img src="../im
 
 <img src="../img/exploring-dashboards/dashboard-1.jpg" class="ms-docimage"/>
 
-## Topbar
+## Top Toolbar
 
-Through the *Topbar* it is possible to:
+Through the *Top Toolbar* it is possible to:
 
 * Access [GeoSolutions website](https://www.geosolutionsgroup.com/) with a click on the <img src="../img/button/geosolutions-link.jpg" class="ms-docbutton"/> icon
 
 * Set the language, with the *Language switcher*:
 
 <img src="../img/exploring-dashboards/language-switcher.jpg" class="ms-docimage"  style="max-width:150px;"/>
 
-* Go back to the [Homepage](https://mapstore.geosolutionsgroup.com/mapstore/#/) with the <img src="../img/button/home-page-icon.jpg" class="ms-docbutton"/> button
+* Go back to the [Homepage](https://mapstore.geosolutionsgroup.com/mapstore/#/) by clicking the <img src="../img/button/home-page-icon.jpg" class="ms-docbutton"/> button
 
-* Take a look at the account info, change password and logout, with the <img src="../img/button/logged.jpg" class="ms-docbutton"/> button (more info about these options are available in [Managing Users and Groups](managing-users-and-groups.md#managing-users-and-groups) section)
+* **Login/Logout** by clicking the <img src="../img/button/logged.jpg" class="ms-docbutton"/> button (for more information see the [Managing Users and Groups](managing-users-and-groups.md) section)
 
-### Options Menu
+### Side Toolbar
 
-In the **Options** <img src="../img/button/burger.jpg" class="ms-docbutton"/> drop-down menu you can:
+From the **Side Toolbar** the user can:
 
 <img src="../img/exploring-dashboards/options-menu.jpg" class="ms-docimage"  style="max-width:150px;"/>
 
-* **Export** dashboard in `json` format
+* [Add new widgets](adding-widgets.md#adding-widgets) with the <img src="../img/button/++++.jpg" class="ms-docbutton"/> button
 
-* **Import** dashboard in `json` format (it will replace without asking the current dashboard)
+* See the connections between widgets with the <img src="../img/button/show-connections.jpg" class="ms-docbutton"/> button, available when connections are present (more information about this option are available in [Connecting Widgets](connecting-widgets.md#connecting-widgets) section)
 
-* [Save/Save as](resources-properties.md) the dashboard
+* See the **About this dashboard** panel by clicking the <img src="../img/button/details2.jpg" class="ms-docbutton"/> button, when [Details](resources-properties.md#details) are present
 
-* **Delete** the dashboard
+* **Export** dashboard in `json` format by clicking the <img src="../img/button/export2.jpg" class="ms-docbutton"/> button
 
-* Open the [Share](share.md#link) panel
+* **Import** `json` dashboard files from your computer by clicking the <img src="../img/button/import2.jpg" class="ms-docbutton"/> button (it will replace the current dashboard directly)
 
-* Start the **Tutorial**
+* **Save** the dashboard by clicking the <img src="../img/button/save2.jpg" class="ms-docbutton"/> button, in order to apply the changes made in an existing dashboard. Selecting this option, the [Resources Properties](resources-properties.md) window opens, already filled with the current dashboard properties
 
-* See the information about the deployed **Version** of [MapStore](https://mapstore.geosolutionsgroup.com/mapstore/#/) in the **About** panel.
+* **Save as** when the user needs to save a copy of a dashboard or save one for the first time by clicking the <img src="../img/button/saveas2.jpg" class="ms-docbutton"/> button. Selecting this option an empty [Resources Properties](resources-properties.md) window opens.
 
-<img src="../img/exploring-dashboards/version-panel.jpg" class="ms-docimage" />
+* **Delete dashboard** in order to delete the current dashboard by clicking the <img src="../img/button/delete2.jpg" class="ms-docbutton"/> button
 
-## Sidebar
+* [Share](share.md) the dashboard by clicking the <img src="../img/button/share2.jpg" class="ms-docbutton"/> button
 
-The *Sidebar* allows the user to:
+* Start the **Tutorial** by clicking the <img src="../img/button/tutorial2.jpg" class="ms-docbutton"/> button
 
-* [Add new widgets](adding-widgets.md#adding-widgets) with the <img src="../img/button/+++.jpg" class="ms-docbutton"/> button
+* Know more information **About** [MapStore](https://mapstore.geosolutionsgroup.com/mapstore/#/) and the deployed **Version** of *MapStore* by clicking the <img src="../img/button/about2.jpg" class="ms-docbutton"/> button
 
-* See the connections between widgets with the <img src="../img/button/show-connections.jpg" class="ms-docbutton"/> button, available when connections are present (more information about this option are available in [Connecting Widgets](connecting-widgets.md#connecting-widgets) section)
+<img src="../img/exploring-dashboards/version-panel.jpg" class="ms-docimage" />
 
 ## Viewer
 

docs/user-guide/img/connecting-widgets/desktop.ini

@@ -0,0 +1,2 @@
+[LocalizedFileNames]
+legend-map.jpg[email protected],0

docs/user-guide/resources-properties.md

@@ -8,29 +8,23 @@ In order to customize the properties of a resource, the Admin or a normal user w
 
 Through the *Edit properties* window the user can perform the following operations:
 
-* Add an image as a **Thumbnail** dropping it or clicking inside the *Thumbnail* box.
+* Add a *Thumbnail*
 
-!!! warning
-    The image to be added must not be larger than 500 kb and its best dimensions are 300x180 px. The supported formats are `jpg` (or `jpeg`) and `png`.
+* Add a *Name* and a *Description*
 
-* Add a **Name** and a **Description**
+* Add a *Permission* rule
 
-!!! note
+!!! warning
     The name of a resource is the only mandatory field. Note that is not allowed to choose a name that has already been assigned to another resource.
 
-* Enable the **Unadvertised** option to make the owner of the resource or the MapStore admin the only ones who can see and search that resource in the [Home Page](home-page.md) or in the [Map Catalog](map-catalog.md) tool.
-
-* Add a [**Permission** rule](resources-properties.md#permission-rules)
+## Thumbnail
 
-* Add **Details** (only for *Maps* and *Dashboard*)
+It is possible to add an image as thumbnail dropping it or clicking inside the following box:
 
-Once a resource is saved, the *Edit properties* panel shows the creation and the last modification dates. An example in the image below:
+<img src="../img/resource-properties/thumb.jpg" class="ms-docimage"/>
 
-<img src="../img/resource-properties/resource_data.jpg" class="ms-docimage"  style="max-width:400px;"/>
-
-Admin users can also see who created and modified the resource. An example in the image below:
-
-<img src="../img/resource-properties/resource_creation.jpg" class="ms-docimage"  style="max-width:400px;"/>
+!!! warning
+    The image to be added must not be larger than 500 kb and its best dimensions are 300x180 px. The supported formats are `jpg` (or `jpeg`) and `png`.
 
 ## Permission rules
 
@@ -51,16 +45,16 @@ How to manage users and groups is a topic present in the [Managing Users](managi
 
 ## Details
 
-Only for resources of type *map* and *dashboard*, it is possible to add details as additional information in form of descriptive content for the resource itself. This is useful to associate some information to the resource and provide an overview of its content. In this case the *Edit properties* window is the following:
+For *Map* and *Dashboard* resources, it is possible to add details. This is useful to associate some information to the map/dashboard or an overview description of its content. In this case the *Edit properties* window is the following:
 
 <img src="../img/resource-properties/edit-map-properties-panel_details.jpg" class="ms-docimage"  style="max-width:400px;"/>
 
-With a click on the **Add new details** button <img src="../img/button/add_details_button.jpg" class="ms-docbutton"/> a panel opens and the user can write the details of the resource.
+With a click on the **Add new details** button <img src="../img/button/add_details_button.jpg" class="ms-docbutton"/> it opens a panel where the user can write the details.
 
 <img src="../img/resource-properties/details_panel.jpg" class="ms-docimage"/>
 
 The text can be edited and some links and images can be added through the [Text Editor Toolbar](text-editor-toolbar.md#text-editor-toolbar).
-Once the editing is done, the map details can be saved with the **Save** button <img src="../img/button/save_large_button.jpg" class="ms-docbutton"/> and other buttons appear on the *Edit properties* panel.
+Once the editing is done, the details can be saved with the **Save** button <img src="../img/button/save_large_button.jpg" class="ms-docbutton"/> and other buttons appear on the *Edit properties* panel.
 
 <img src="../img/resource-properties/details_sheet_buttons.jpg" class="ms-docimage"/>
 
@@ -75,16 +69,16 @@ Here, the user is allowed to:
 <img src="../img/resource-properties/show-as-modal.jpg" class="ms-docimage"/>
 
 !!! note
-    If the **Show as modal** button is not activated once the user opens the *About this map* button, the details are displayed on a panel. <img src="../img/resource-properties/show-as-panel.jpg" class="ms-docimage"/>
+    If the **Show as modal** button is not activated once the user opens the *About this map/dashboard* button, the details are displayed on a panel. <img src="../img/resource-properties/show-as-panel.jpg" class="ms-docimage"/>
 
 !!! warning
-    The *About this map* button is visible in the [Side Toolbar](mapstore-toolbars.md#side-toolbar) only when the details are present on the map.
+    The *About this map/dashboard* button is visible in the [Side Toolbar](mapstore-toolbars.md#side-toolbar) only when the details are present on the map/dashboard.
 
-* Enable the **Show at startup** <img src="../img/button/show-at-starup-button.jpg" class="ms-docbutton"/> button. If active, when the user opens a resource with defined details, these are visualized in a descriptive panel.
+* Enable the **Show at startup** <img src="../img/button/show-at-starup-button.jpg" class="ms-docbutton"/> button. If active, as soon as the user opens the map/dashboard, the details panel is visualized.
 
 * **Delete** the details sheet <img src="../img/button/delete_white_button.jpg" class="ms-docbutton"/>
 
-Once the details are saved, the **Show details** button <img src="../img/button/details_button.jpg" class="ms-docbutton"/> appears also on the map card in [Homepage](https://mapstore.geosolutionsgroup.com/mapstore/#/)
+Once the details are saved, the **Show details** button <img src="../img/button/details_button.jpg" class="ms-docbutton"/> appears also on the map/dashboard card in [Homepage](https://mapstore.geosolutionsgroup.com/mapstore/#/)
 
 <img src="../img/resource-properties/card-map-details-button.jpg" class="ms-docimage" style="max-width:400px;"/>