IBX-6417: Describe UI/UX improvements

docs/content_management/content_organization/classify_content.md

@@ -11,7 +11,7 @@ a number of mechanisms that you can use.
 
 You can divide your Content Tree into Sections to better organize it.
 Sections let you decide which Users will have access to which parts of the tree.
-To see which Section a Content item belongs to, look at its **Details** tabs.
+To see which Section a Content item belongs to, [disable the Focus mode](../../getting_started/discover_ui.md#disable-focus-mode), and look at its **Technical details** tab.
 
 You can set up Sections by navigating to **Content** -> **Sections**.
 A few Sections are provided with each installation, and you can add new ones.
@@ -29,7 +29,7 @@ Access to Sections can be restricted by [setting up proper permissions](../../pe
 ## Object states
 
 You can assign specific Object states to all Content items in your website.
-You can do it when viewing the Content item, in the **Details** tab, in the **Object state details** section.
+To do it, [disable the Focus mode](../../getting_started/discover_ui.md#disable-focus-mode), go to the Content item details view, and make necessary changes in the **Object state details** section.
 
 ![Object state details](img/object_state_details.png)
 

docs/content_management/content_organization/copy_move_hide_content.md

@@ -23,8 +23,8 @@ If you only want to have the same Content item to another place in the Content T
 
 ### Multi-file move
 
-To move multiple items, select them and click **Move selected items** from the **Sub-items** top bar.
-Then choose a Location from the **Choose Location** modal that opens up.
+In the Content item's details screen, go to **Sub-items** tab, select multiple items, and click **Move**.
+Then choose a Location from the [content browser](../../getting_started/discover_ui.md#content-browser) in the **Choose Location** modal that opens up.
 After choosing and confirming new Location, all selected files are moved to it.
 
 ![Multi-file move](img/multi_file_move.png)
@@ -55,7 +55,13 @@ You can also permanently remove all content from the Trash by clicking **Empty T
 
 ## Multi-file delete
 
-To delete multiple items, select them and click **Delete selected items** in the **Sub-items** top bar. Confirm your choice in the pop-up window with the **Send to Trash** button. All selected files will be moved to trash.
+There are multiple ways to delete multiple items, for example:
+
+- in Content Tree, select multiple items.
+Then click the three dots menu and select **Delete**
+- in Content item's details screen, the **Sub-items** tab, select multiple items and click **Delete**
+
+Confirm your choice in the pop-up window with the **Send to trash** button. All selected files are moved to trash.
 
 ![Multi-file delete](img/multi_file_delete.png)
 

docs/content_management/content_organization/manage_locations_urls.md

@@ -20,15 +20,15 @@ A single Location can only have one Content item in it.
 
 Even if a Content item is placed in more than one Location, one of the Locations is always treated as the main one.
 
-To assign other Locations to content, view this Content item's **Location** tab and click **+ Add**.
+To assign other Locations to content, [disable the Focus mode](../../getting_started/discover_ui.md#disable-focus-mode), go to this Content item's **Locations** tab and click **+ Add**.
 Then select the new parent from the Content Browser.
 
 ![Content with two locations](img/content_with_two_locations.png "Content with two Locations")
 
 ### Hide Locations
 
 You can manage the availability of content by hiding or revealing it.
-You can do this in the Content item's Locations tab by using the Visibility switcher.
+You can do this in the Content item's **Locations** tab by using the Visibility switcher.
 Notice that this way only affects a *Location*, not the *Content item*.
 Even if you hide the content in one Location, it remains visible in its other Locations.
 You can also [hide the Content item itself](copy_move_hide_content.md#hide-content).
@@ -90,7 +90,7 @@ The Link manager list also shows whether the link is alive or dead in the **Stat
 
 Each Content item can have one or more URL aliases. They are additional URLs that can be used to access this Content item.
 
-You can add URL aliases in the URL tab under **Custom URL aliases for...** by clicking **+ Add**.
+To add URL aliases, go to the **URL** tab, and click **+ Add** in the **Custom URL aliases for...** area.
 The URL alias must be unique for the whole installation, regardless of the language.
 
 ![Creating a new URL alias](img/create_new_url_alias.png)

docs/content_management/content_versions.md

@@ -21,7 +21,8 @@ They can be created by the autosave feature, by the reviewer as part of the
 [editorial workflow](workflow_management/editorial_workflow.md), or when you save
 the work and close the Content item editing screen.
 
-You can view all versions of a Content item on the Content item details screen, in the **Versions** tab.
+You can view all versions of a Content item on the Content item details screen.
+To do it, [disable the Focus mode](../getting_started/discover_ui.md#disable-focus-mode), and go to this Content item's **Versions** tab.
 
 ![All versions of a Content item](img/content_item_versions.png "All versions of a Content item")
 
@@ -30,7 +31,7 @@ For more information, see [Editorial workflow](workflow_management/editorial_wor
 ### Autosave
 
 While you edit a Content item or product, [[= product_name =]] saves your work automatically to help you preserve the progress in an event of a failure.
-To recover your work, open the most recent draft in the **Versions** tab of the Content item.
+To recover your work, [disable the Focus mode](../getting_started/discover_ui.md#disable-focus-mode), go to this Content item's **Versions** tab, and open the most recent draft.
 Alternatively, open the most recent draft of your work on the **My dashboard** page, the **Drafts** table.
 
 Autosave is enabled by default, and set to save a draft every 60 seconds.

docs/content_management/create_edit_content_items.md

@@ -17,7 +17,7 @@ description: Create content for your website with different Fields, rich text, t
 
     !!! tip
 
-        An alternative way of creating Content items is to [drag one or more files](#upload-multiple-content-items) onto the **Sub-items** box when viewing any other Content item in a [Content Tree](../getting_started/discover_ui.md#content-tree). 
+        An alternative way of creating Content items is to [drag one or more files](#upload-multiple-content-items) onto the **Sub-items** tab when viewing any Content item in a [Content Tree](../getting_started/discover_ui.md#content-tree). 
 
 1. In a slide-out pane, make initial choices in the following fields, and click **Create**:
 
@@ -31,8 +31,7 @@ description: Create content for your website with different Fields, rich text, t
 
 1. [Fill in the Fields](#edit-new-or-existing-content-items) of the Content item.
 
-1. Click **Preview** to see, how the Content item could look to an end-user.
-
+1. Click **Preview** to see how the Content item could look to an end-user.
     !!! tip
 
         A Content item can look different on different [SiteAccesses](translate_content.md#siteaccess).
@@ -65,10 +64,8 @@ description: Create content for your website with different Fields, rich text, t
 
 When you view the Content item details in the Content Tree, you can upload files such as images, videos, PDF documents, and so on.
 This way you can add multiple sub-items without editing the original Content item.
-To do it, on the Content item details screen, in the **Sub-items** top bar, click **Upload** 
-and choose all items that you want to upload.
-When a file is uploaded with multi-file upload, it is automatically stored in a 
-Field of the Content item.
+To do it, on the Content item details screen, in the **Sub-items** tab, click **Upload** and choose all items that you want to upload.
+When a file is uploaded with multi-file upload, it is automatically stored in a Field of the Content item.
 
 !!! note
 
@@ -211,4 +208,5 @@ For this feature to work as described, the Content Type must have a **Metadata**
 
 ![Selecting Taxonomy entries](img/taxonomy_select_taxonomy_entries.png "Selecting Taxonomy entries")
 
-For more information, see [Assign tag to content from taxonomy tree](taxonomy/work_with_tags.md#assign-tag-to-content-from-taxonomy-tree).
+For more information, see [Assign tag to content from taxonomy tree](taxonomy/work_with_tags.md#assign-tag-to-content-from-taxonomy-tree).
+

docs/content_management/preview_content_items.md

@@ -0,0 +1,32 @@
+---
+description: Preview content items of various types in many places of the Back Office.
+---
+
+# Preview Content items
+
+There are several places where you can see how the Content item could look to an end-user.
+The system behaves differently depending on whether you are in [Focus mode](../getting_started/discover_ui.md#focus-mode) or not and whether you selected a specific site from the **Site context** drop-down list in the top bar.
+
+- When you [edit a Page](create_edit_content_items.md), the editor provides a visual experience.
+By clicking the following icons, you can switch between different Page views.
+
+|Icon|Description|
+|------|-----------|
+|![Preview segments](page_builder_toolbar_preview_segment.png)|Access preview of the Page for a given [segment](content_organization/classify_content.md#segments).|
+|![Timeline button](page_builder_toolbartimelinetoggler.png)|Access the timeline to preview how the Page changes with time. You can also view the list of all upcoming scheduled events.|
+
+- When you [edit a Content item](create_edit_content_items.md), click **Preview**
+- In the Content item's details screen, click **Preview**
+
+!!! tip
+
+    In the Content item preview screen, you can use a drop-down list to change site context by switching between [SiteAccesses](translate_content.md#siteaccess).
+    You can also toggle through different screen widths to see how the Content item is rendered on different devices.
+
+![View toggler](page_builder_toolbar_devicestoggler.png "View toggler")
+
+Additionally, if you select a specific SiteAccess from the **Site context** drop-down list in the top bar, three things happen:
+
+- when you hover over Content items in the Content Tree, miniature previews appear
+- in Focus mode, when you browse Content items in Content Tree, their full screen preview is displayed
+- if you [disable the Focus mode](../getting_started/discover_ui.md#disable-focus-mode) or click **Exit full view**, the **View** tab appears in the Content item's details view, where you can quickly preview the Content item

docs/content_management/publish_instantly.md

@@ -28,7 +28,7 @@ or click **Save and close** to close the window.
     A discarded draft is removed instantly, not placed in the Trash, so it can't be restored.
 
 Once you leave the editor after saving your draft, you can return to modify it, or create a new draft.
-To edit an existing draft, go to the **Versions** tab and click the edit icon in the proper line.
+To edit an existing draft, [disable the Focus mode](../getting_started/discover_ui.md#disable-focus-mode), go to this Content item's **Versions** tab and click the edit icon in the proper line.
 When you select **Edit** in a Content item that has one or more open drafts,
 you are asked which draft you want to continue working on.
 You also have the option to create a new draft based on the currently published version.

docs/content_management/translate_content.md

@@ -46,15 +46,17 @@ the same way as when editing only one language.
 
 You can compare different versions of the translations of the Content item.
 
-1\. In the left panel, go to **Content** -> **Content structure**. Then select a Content item.
+1\. [disable the Focus mode](../getting_started/discover_ui.md#disable-focus-mode).
+
+2\. In the left panel, go to **Content** -> **Content structure**. Then select a Content item.
 
-2\. Go to **Versions** tab and click the **Version compare** icon: ![Version Compare Icon](img/version_compare_icon.png){.inline-image}.
+3\. Go to **Versions** tab and click the **Version compare** icon: ![Version Compare Icon](img/version_compare_icon.png){.inline-image}.
 
-3\. In the **Comparing versions** screen, pick the split view by using the switcher in the top right corner:
+4\. In the **Comparing versions** screen, click the split view by using the switcher in the top right corner:
 
 ![View switcher](img/view_switcher.png "View switcher")
 
-4\. From the dropdowns, select two different language versions of the same Content item.
+5\. From the drop-downs, select two different language versions of the same Content item.
 The screen refreshes to display the side by side view of its Fields.
 
 ![Compare translations screen](img/compare_translations.png "Compare translations screen")
@@ -65,6 +67,8 @@ For more information, see [Work with versions](work_with_versions.md#compare-ver
 
 When you edit a Page, a bar at the top of the screen lists the most recently used [SiteAccesses](https://doc.ibexa.co/projects/userguide/en/master/website_organization/multisite/#siteaccess) on your website. Use this bar to switch between the different versions and work on them.
 
+<a name="siteaccess"></a>
+
 !!! note "SiteAccess concept"
 
     SiteAccesses are a means to present different versions of the website to different 

docs/content_management/workflow_management/work_with_versions.md

@@ -39,7 +39,8 @@ by clicking the **Request access** icon.
 ## Compare versions 
 You can compare two versions of the same Content item.
 
-To do it, in the Content item details screen, go to the **Versions** tab and click the 
+To do it, [disable the Focus mode](../../getting_started/discover_ui.md#disable-focus-mode).
+Then, in the Content item details screen, go to the **Versions** tab and click the 
 **Version Compare** icon: ![Version Compare Icon](img/version_compare_icon.png){.inline-image}.
 
 From the drop-down menus at the top of the screen, select the two versions that you want to compare.

docs/customer_management/build_customer_portal.md

@@ -17,7 +17,7 @@ If you are unfamiliar with how Page Builder works, see [Create and edit Pages](c
 To create a new Customer Portal, go to **Content** and from the menu select **Content structure**.
 There, navigate to the root folder for your Customer Portals. 
 If you don't have one, you can add it yourself.
-Remember to specify its `location_id` in the configuration, you will find it under **Details**.
+Remember to specify its `location_id` in the configuration, you will find it under **Technical details**.
 For more information, see [Configure Page Builder access to Customer Portal.]([[= developer_doc =]]/customer_management/cp_page_builder/#configure-page-builder-access-to-customer-portal)
 
 Inside a root folder you can select **Create content** from the right-side toolbar.