diff --git a/docs/content_management/content_organization/classify_content.md b/docs/content_management/content_organization/classify_content.md index a662252d..87540719 100644 --- a/docs/content_management/content_organization/classify_content.md +++ b/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) diff --git a/docs/content_management/content_organization/copy_move_hide_content.md b/docs/content_management/content_organization/copy_move_hide_content.md index 9da53900..6122a3aa 100644 --- a/docs/content_management/content_organization/copy_move_hide_content.md +++ b/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) diff --git a/docs/content_management/content_organization/manage_locations_urls.md b/docs/content_management/content_organization/manage_locations_urls.md index 3a69625a..25b25f9a 100644 --- a/docs/content_management/content_organization/manage_locations_urls.md +++ b/docs/content_management/content_organization/manage_locations_urls.md @@ -20,7 +20,7 @@ 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") @@ -28,7 +28,7 @@ Then select the new parent from the Content Browser. ### 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) diff --git a/docs/content_management/content_versions.md b/docs/content_management/content_versions.md index 0bef0b2d..a6d7bb5d 100644 --- a/docs/content_management/content_versions.md +++ b/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. diff --git a/docs/content_management/create_edit_content_items.md b/docs/content_management/create_edit_content_items.md index 0d226853..f01faf1a 100644 --- a/docs/content_management/create_edit_content_items.md +++ b/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). \ No newline at end of file +For more information, see [Assign tag to content from taxonomy tree](taxonomy/work_with_tags.md#assign-tag-to-content-from-taxonomy-tree). + diff --git a/docs/content_management/preview_content_items.md b/docs/content_management/preview_content_items.md new file mode 100644 index 00000000..f1c7c668 --- /dev/null +++ b/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 diff --git a/docs/content_management/publish_instantly.md b/docs/content_management/publish_instantly.md index 93d79971..617e9d1b 100644 --- a/docs/content_management/publish_instantly.md +++ b/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. diff --git a/docs/content_management/translate_content.md b/docs/content_management/translate_content.md index 6b989cbb..c13a18c8 100644 --- a/docs/content_management/translate_content.md +++ b/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. + + !!! note "SiteAccess concept" SiteAccesses are a means to present different versions of the website to different diff --git a/docs/content_management/workflow_management/work_with_versions.md b/docs/content_management/workflow_management/work_with_versions.md index 0db7597d..bad8e1f0 100644 --- a/docs/content_management/workflow_management/work_with_versions.md +++ b/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. diff --git a/docs/customer_management/build_customer_portal.md b/docs/customer_management/build_customer_portal.md index c3e1bb17..deb1a24f 100644 --- a/docs/customer_management/build_customer_portal.md +++ b/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. diff --git a/docs/getting_started/discover_ui.md b/docs/getting_started/discover_ui.md index 940314e4..98a179b7 100644 --- a/docs/getting_started/discover_ui.md +++ b/docs/getting_started/discover_ui.md @@ -4,6 +4,25 @@ description: Take a quick tour of the Back Office. # User interface +## Top bar + +At the top of the main screen you can see a top bar. +Depending on your location within the Back Office, it can contain the following important features: + +- Logo in the left corner, which is a direct link to the [dashboard](#my-dashboard) +- "Focus mode" badge which informs you that the [focus mode](#focus-mode) is on +- Global search field that allows you to [find content](../search/search_for_content.md) by checking all searchable Fields +- Drop-down that changes the site context +- Notification icon that informs you about incoming assignments, for example, items assigned for [your review](../content_management/workflow_management/editorial_workflow.md#review-queue) +- User avatar with a drop-down menu with access to [user profile and settings](get_started.md#edit-user-profile) + +!!! note "Site context" + + Changing the site context results in the [Content Tree](#content-tree) showing content items that belong to the selected website. + The appearance of Content items can also change if they use different designs or languages depending on the [SiteAccess](../website_organization/multisite.md#siteaccess) settings. + +![Top bar with site context selector](img/top_bar.png "Top bar with site context selector") + ## My dashboard The first screen that you see after logging in is **My dashboard**. @@ -21,22 +40,24 @@ You can also [reschedule or cancel planned publications](../content_management/s You can always return to the **My dashboard** screen by clicking the logo in the upper left corner. -The left side menu allows you to move between important sections of the application. +## Main menu -![Side menu](img/top_bar.png "Side menu") +The main menu allows you to move between important sections of the application. -Depending on the product edition and your [permissions](../permission_management/permission_system.md), the top level sections on the leftmost pane may include, for example: +![Main menu](img/side_menu.png "Main menu") + +Depending on the product edition and your [permissions](../permission_management/permission_system.md), the main menu may include, for example: - **Content**, which gives you access to the content Repository. It lets you navigate the Content Tree, create, edit, move, copy, delete content, etc. -- [[% include 'snippets/experience_badge.md' %]] [[% include 'snippets/commerce_badge.md' %]] **Site**, which enables you to create and edit block-based Pages and manage multiple websites. +- [[% include 'snippets/experience_badge.md' %]] [[% include 'snippets/commerce_badge.md' %]] **Site management**, which enables you to create and edit block-based Pages and manage multiple websites. - **PIM**, which enables you to handle products presented on the website, including their specifications and pricing. - **Admin**, which is the administration panel where you can manage Users, Sections, permissions, etc. ## Content Tree -If you want to navigate through your website with a menu, go to the **Content** tab, and select **Content structure**. -**Content Tree** in the left sidebar opens an expandable content menu of your website. +If you want to navigate through your website with a menu, in the main menu, go to the **Content** -> **Content structure**. +The **Content Tree** area is an expandable content menu of your website. ![Content Tree in the menu](img/left_menu_tree.png "Content Tree in the menu") @@ -69,7 +90,57 @@ You can also use the **Content Browser** to search the Repository for content, e !!! note If you have administrator permissions, you can also view and manage User accounts and site skeletons in the **Admin** tab. - + For more information about users and permissions, see [Users](../permission_management/permissions_and_users.md). - + For more information about site skeletons, see [Site skeletons]([[= developer_doc =]]/multisite/site_factory/site_factory_configuration/#site-skeletons). + +## Focus mode + +Focus mode helps editors focus on information that is only relevant to their line of work and omit technical details that would distract. +It is enabled by default, after you log in. +If you need access to certain settings or technical details, you can [disable the focus mode](#disable-focus-mode) at any time. + +Dark theme for Content Tree +: In areas where the Content Tree is displayed, for example, in **Content structure**, the tree is displayed on a dark background. + +![Dark theme for Content Tree](img/FM_dark_content_tree.png "Dark theme for Content Tree") + +Settings unavailable in Content area +: In Focus mode, in **Content** area of the main menu, the **Settings** part of the menu is not available. + +![Content tab in Focus mode](img/FM_menu_without_settings.png) + +Content item view +: If you select a specific [SiteAccess](translate_content.md#siteaccess) from the **Site context** drop-down list on the right side of the top bar and then browse Content items in Content Tree, they are displayed in full view, with a limited set of actions available. +To display the Content item details view with more actions, click **Exit full view**. + +![Content item in full view](img/FM_content_item_full_view.png "Content item in full view") + +!!! tip + + Even when you're out of the full view or not in Focus mode, you can still preview the Content item in the **View** tab. + +Different details view tabs in Focus mode and when it is disabled +: In Focus mode, the tabs in Content item's detail view are different than the ones visible when it is disabled. +Additionally, they are displayed in different order to expose the ones that are more important from the editor's perspective. + +![Content item tabs in Focus mode](img/FM_less_ci_tabs.png "Content item tabs in Focus mode") + +Different columns available for selection +: You can decide which columns are displayed in the **Sub-items** table, to adjust the view to your use case. +The list of columns available for selection is limited in Focus mode. + +![Columns in Sub-items table](img/FM_subitems_column_list.png "Columns in Sub-items table") + +### Disable Focus mode + +Focus mode is enabled by default when you first log into [[= product_name =]], but you can toggle it in two places: + +- in User settings + +![Focus mode user setting](img/FM_user_settings.png "Focus mode user setting") + +- in the drop-down menu on the right side of the top bar + +![Focus mode switch](img/FM_switch.png "Focus mode switch") \ No newline at end of file diff --git a/docs/getting_started/img/FM_content_item_full_view.png b/docs/getting_started/img/FM_content_item_full_view.png new file mode 100644 index 00000000..6ef07add Binary files /dev/null and b/docs/getting_started/img/FM_content_item_full_view.png differ diff --git a/docs/getting_started/img/FM_dark_content_tree.png b/docs/getting_started/img/FM_dark_content_tree.png new file mode 100644 index 00000000..e3faf30b Binary files /dev/null and b/docs/getting_started/img/FM_dark_content_tree.png differ diff --git a/docs/getting_started/img/FM_less_ci_tabs.png b/docs/getting_started/img/FM_less_ci_tabs.png new file mode 100644 index 00000000..d09f8675 Binary files /dev/null and b/docs/getting_started/img/FM_less_ci_tabs.png differ diff --git a/docs/getting_started/img/FM_menu_without_settings.png b/docs/getting_started/img/FM_menu_without_settings.png new file mode 100644 index 00000000..79b3e2e4 Binary files /dev/null and b/docs/getting_started/img/FM_menu_without_settings.png differ diff --git a/docs/getting_started/img/FM_subitems_column_list.png b/docs/getting_started/img/FM_subitems_column_list.png new file mode 100644 index 00000000..67226186 Binary files /dev/null and b/docs/getting_started/img/FM_subitems_column_list.png differ diff --git a/docs/getting_started/img/FM_switch.png b/docs/getting_started/img/FM_switch.png new file mode 100644 index 00000000..ee07785c Binary files /dev/null and b/docs/getting_started/img/FM_switch.png differ diff --git a/docs/getting_started/img/FM_user_settings.png b/docs/getting_started/img/FM_user_settings.png new file mode 100644 index 00000000..5837d4d1 Binary files /dev/null and b/docs/getting_started/img/FM_user_settings.png differ diff --git a/docs/getting_started/img/side_menu.png b/docs/getting_started/img/side_menu.png new file mode 100644 index 00000000..d10a0f61 Binary files /dev/null and b/docs/getting_started/img/side_menu.png differ diff --git a/docs/getting_started/img/top_bar.png b/docs/getting_started/img/top_bar.png index 3878d023..35b55934 100644 Binary files a/docs/getting_started/img/top_bar.png and b/docs/getting_started/img/top_bar.png differ diff --git a/docs/personalization/content_import.md b/docs/personalization/content_import.md index a8fc57fb..c40d76bd 100644 --- a/docs/personalization/content_import.md +++ b/docs/personalization/content_import.md @@ -41,7 +41,7 @@ For more information about user attribute import, see [User API]([[= developer_d ## List of import operations -In the Back Office, from the top bar under **Personalization**, you can access +In the Back Office, from the main menu, under **Personalization**, you can access the **Import** page that displays a list of historical import operations and their details, such as the number of imported content items/products, their type and language. diff --git a/docs/website_organization/work_with_sites.md b/docs/website_organization/work_with_sites.md index 4cf9b5c7..49c79492 100644 --- a/docs/website_organization/work_with_sites.md +++ b/docs/website_organization/work_with_sites.md @@ -14,7 +14,7 @@ For more information see developer documentation on [Site Factory]([[= developer ## Create a website -To access Site Factory, in the leftmost pane, click the **Site** icon and then **List**. +To access Site Factory, in the leftmost pane, click the **Site management* icon and then **List**. If Site Factory is enabled, and you have sufficient permissions, you should see the **Create** button. Click it to access the **Creating New Site** modal. @@ -27,7 +27,7 @@ First, you select a name, a predefined design, and a Parent Location for your we ![Create a new website step one](img/site_factory_new_site_step_1.png) If the design defines a Site skeleton, you can choose if you want to copy the entire content structure of the design with a toggle. -To preview the Site skeleton architecture, click **Site**, and then **Site skeletons**. +To preview the Site skeleton architecture, click **Site management**, and then **Site skeletons**. Next, you can decide if the website will go live after creation or will be offline with the Status switcher. In this section you also define the SiteAccess URL addresses with their main languages, fallback languages, and optional paths for the website. @@ -41,7 +41,7 @@ For more information about SiteAccesses, see [Multisite]([[= developer_doc =]]/m ![Create a new website step two](img/site_factory_new_site_step_2.png) -If all required fields are filled out you can select **Create,** and the website will be added to the website list in the **Site** tab. +If all required fields are filled out you can select **Create**, and the website is be added to the website list in the **Site management** area. !!! note diff --git a/mkdocs.yml b/mkdocs.yml index 3e480de2..978720c6 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -19,6 +19,7 @@ nav: - Create and edit pages: - Create and edit pages: content_management/create_edit_pages.md - Block reference: content_management/block_reference.md + - Preview Content items: content_management/preview_content_items.md - Translate content: content_management/translate_content.md - Work with forms: content_management/work_with_forms.md - Edit images: content_management/edit_images.md