[DOCS] Updates Canvas docs with new menus (#66061) (#68170)

* [DOCS] Updates for Canvas menus * Image set up * Update docs/canvas/canvas-share-workpad.asciidoc Co-authored-by: Catherine Liu <catherineqliu@outlook.com> * Update docs/canvas/canvas-present-workpad.asciidoc Co-authored-by: Catherine Liu <catherineqliu@outlook.com> * Update docs/canvas/canvas-tutorial.asciidoc Co-authored-by: Catherine Liu <catherineqliu@outlook.com> * [DOCS] Adds Catherine's images and minor updates to content * Final images and clean up Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Catherine Liu <catherineqliu@outlook.com> # Conflicts: # docs/images/canvas-fullscreen.png # docs/images/canvas-zoom-controls.png
elastic · Jun 5, 2020 · f0300a9 · f0300a9
1 parent b6fb4b1
commit f0300a9
Show file tree

Hide file tree

Showing 24 changed files with 85 additions and 166 deletions.
diff --git a/docs/canvas/canvas-elements.asciidoc b/docs/canvas/canvas-elements.asciidoc
@@ -27,36 +27,38 @@ By default, most of the elements you create use demo data until you change the d
 
 * *Timelion* &mdash; Access your time series data using <<timelion,Timelion>> queries. To use Timelion queries, you can enter a query using the <<lucene-query,Lucene Query Syntax>>.
 
+Each element can display a different data source. Pages and workpads often contain multiple data sources.
+
 [float]
 [[canvas-add-object]]
 ==== Add a saved object
 
-Add a <<managing-saved-objects,saved object>>, then customize it to fit your display needs.
+Add <<managing-saved-objects,saved objects>> to your workpad, such as maps and visualizations.
 
-. Click *Embed object*.
+. Click *Add element > Add from Visualize Library*.
 
-. Select the object you want to add.
+. Select the saved object you want to add.
 +
 [role="screenshot"]
 image::images/canvas-map-embed.gif[]
 
 . To use the customization options, click the panel menu, then select one of the following options:
 
-* *Edit map* &mdash; Opens <<maps,Maps>> so that you can edit the original map.
+* *Edit map* &mdash; Opens <<maps,Maps>> or <<visualize,Visualize>> so that you can edit the original saved object.
 
-* *Customize panel* &mdash; Specifies the object title options.
+* *Edit panel title* &mdash; Adds a title to the saved object.
 
-* *Inspect* &mdash; Allows you to drill down into the element data.
+* *Customize time range* &mdash; Exposes a time filter dedicated to the saved object.
 
-* *Customize time range* &mdash; Exposes a time filter dedicated to the map.
+* *Inspect* &mdash; Allows you to drill down into the element data.
 
 [float]
 [[canvas-add-image]]
 ==== Add your own image
 
 To personalize your workpad, add your own logos and graphics.
 
-. Click *Manage assets*.
+. Click *Add element > Manage assets*.
 
 . On the *Manage workpad assets* window, drag and drop your images.
 
@@ -83,40 +85,25 @@ Move and resize your elements to meet your design needs.
 [[format-canvas-elements]]
 ==== Format elements
 
-Align, distribute, and reorder elements for consistency and readability across your workpad pages.
-
-Access the align, distribute, and reorder options by clicking the *Element options* icon.
-
-[role="screenshot"]
-image::images/canvas_element_options.png[]
+For consistency and readability across your workpad pages, align, distribute, and reorder elements.
 
-To align elements:
+To align two or more elements:
 
 . Press and hold Shift, then select the elements you want to align.
 
-. Click the , then select *Group*.
+. Click *Edit > Alignment*, then select the alignment option.
 
-. Click the *Element options* icon, then select *Alignment*.
-
-. Select the alignment option.
-
-To distribute elements:
+To distribute three or more elements:
 
 . Press and hold Shift, then select the elements you want to distribute.
 
-. Click the *Element options* icon, then select *Group*.
-
-. Click the *Element options* icon, then select *Distribution*.
-
-. Select the distribution option.
+. Click *Edit > Distribution*, then select the distribution option.
 
 To reorder elements:
 
 . Select the element you want to reorder.
 
-. Click the *Element options* icon, then select *Order*.
-
-. Select the order option.
+. Click *Edit > Order*, then select the order option.
 
 [float]
 [[data-display]]
@@ -157,14 +144,14 @@ text.align: center;
 
 To use the elements across all workpads, save the elements.
 
-When you're ready to save your element, select the element, then click the *Save as new element* icon.
+When you're ready to save your element, select the element, then click *Edit > Save as new element*.
 
 [role="screenshot"]
 image::images/canvas_save_element.png[]
 
-To save a group of elements, press and hold Shift, then select the elements you want to save.
+To save a group of elements, press and hold Shift, select the elements you want to save, then click *Edit > Save as new element*.
 
-To access your saved elements, click *Add element*, then select *My elements*.
+To access your saved elements, click *Add element > My elements*.
 
 [float]
 [[delete-elements]]
@@ -174,9 +161,7 @@ When you no longer need an element, delete it from your workpad.
 
 . Select the element you want to delete.
 
-. Click the *Element options* icon.
+. Click *Edit > Delete*.
 +
 [role="screenshot"]
 image::images/canvas_element_options.png[]
-
-. Select *Delete*.
diff --git a/docs/canvas/canvas-present-workpad.asciidoc b/docs/canvas/canvas-present-workpad.asciidoc
@@ -4,24 +4,20 @@
 
 When you are ready to present your workpad, use and enable the presentation options.
 
-[float]
-[[view-fullscreen-mode]]
-==== View your workpad in fullscreen mode
+. Configure the autoplay options.
 
-Click the *Enter fullscreen mode* icon.
+.. From the workpad menu, click *View > Autoplay settings*.
 
+.. Under *Change cycling interval*, select the interval you want to use, or *Set a custom interval*.
++
 [role="screenshot"]
-image::images/canvas-fullscreen.png[Fullscreen mode]
-
-[float]
-[[enable-autoplay]]
-==== Enable autoplay 
+image::images/canvas-autoplay-interval.png[Element autoplay interval]
 
-Automatically cycle through your workpads pages in fullscreen mode.
+. To enable autoplay, click *View > Turn autoplay on*.
 
-. Click the *Control settings* icon.
-
-. Under *Change cycling interval*, select the interval you want to use.
+. To start your presentation, click *View > Enter fullscreen mode*.
 +
 [role="screenshot"]
-image::images/canvas-refresh-interval.png[Element data refresh interval]
+image::images/canvas-fullscreen.png[Fullscreen mode]
+
+. When you are ready to exit fullscreen mode, press the Esc (Escape) key.
diff --git a/docs/canvas/canvas-share-workpad.asciidoc b/docs/canvas/canvas-share-workpad.asciidoc
@@ -10,84 +10,56 @@ When you've finished your workpad, you can share it outside of {kib}.
 
 Create a JSON file of your workpad that you can export outside of {kib}.
 
-. From your workpad, click the *Share workpad* icon.
+Click *Share > Download as JSON*.
 
-. Select *Download as JSON*.
-+
 [role="screenshot"]
 image::images/canvas-export-workpad.png[Export single workpad]
 
-Want to export multiple workpads? Go to the *Canvas workpads* view, select the workpads you want to export, then click *Export*.
+Want to export multiple workpads? Go to the *Canvas* home page, select the workpads you want to export, then click *Export*.
 
 [float]
 [[create-workpad-pdf]]
 ==== Create a PDF
 
 If you have a license that supports the {report-features}, you can create a PDF copy of your workpad that you can save and share outside {kib}.
 
-For more information, refer to <<reporting-getting-started, Reporting from Kibana>>.
-
-. From your workpad, click the *Share workpad* icon, then select *PDF reports*.
+Click *Share > PDF reports > Generate PDF*.
 
-. Click *Generate PDF*.
-+
 [role="screenshot"]
 image::images/canvas-generate-pdf.gif[Generate PDF]
 
+For more information, refer to <<reporting-getting-started, Reporting from Kibana>>.
+
 [float]
 [[create-workpad-URL]]
 ==== Create a POST URL
 
 If you have a license that supports the {report-features}, you can create a POST URL that you can use to automatically generate PDF reports using Watcher or a script.
 
-For more information, refer to <<automating-report-generation, Automating report generation>>.
-
-. From your workpad, click the *Share workpad* icon, then select *PDF reports*.
+Click *Share > PDF reports > Copy POST URL*.
 
-. Click *Copy POST URL*.
-+
 [role="screenshot"]
 image::images/canvas-create-URL.gif[Create POST URL]
 
+For more information, refer to <<automating-report-generation, Automating report generation>>.
+
 [float]
 [[add-workpad-website]]
 ==== Share the workpad on a website
 
 beta[] Canvas allows you to create _shareables_, which are workpads that you download and securely share on any website. To customize the behavior of the workpad on your website, you can choose to autoplay the pages or hide the workpad toolbar.
 
-. From your workpad, click the *Share this workpad* icon, then select *Share on a website*.
+. Click *Share > Share on a website*.
 
-. On the *Share on a website* pane, follow the instructions.
+. Follow the *Share on a website* instructions.
 
 . To customize the workpad behavior to autoplay the pages or hide the toolbar, use the inline parameters.
 +
 To make sure that your data remains secure, the data in the JSON file is not connected to {kib}. Canvas does not display elements that manipulate the data on the workpad.
 +
 [role="screenshot"]
-image::images/canvas-embed_workpad.gif[Share the workpad on a website]
+image::canvas/images/canvas-embed_workpad.gif[Share the workpad on a website]
 +
 NOTE: Shareable workpads encode the current state of the workpad in a JSON file. When you make changes to the workpad, the changes do not appear in the shareable workpad on your website.
 
-[float]
-[[change-the-workpad-settings]]
-==== Change the settings
-
-After you've added the workpad to your website, you can change the autoplay and toolbar settings.
-
-To change the autoplay settings:
-
-. Click the settings icon.
-
-. Click *Auto Play*, then change the settings.
-+
-[role="screenshot"]
-image::images/canvas_share_autoplay_480.gif[Autoplay settings]
-
-To change the toolbar settings:
-
-. Click the settings icon.
-
-. Click *Toolbar*, then change the settings.
-+
-[role="screenshot"]
-image::images/canvas_share_hidetoolbar_480.gif[Hide toolbar settings]
+. To change the settings, click the settings icon, then choose the settings you want to use.