Blog posts by Ryan Bare

New CMS UI navigation

Mon, 29 Jul 2019 17:18:19 GMT

In 11.21.1, CMS UI will receive a new navigation menu, but other products and add-ons will need to opt-in to the new menu. There is one exception: if you are using the default Bootstrapper directly, without wrapping it in your own implementation, your add-on will follow the lead of the CMS UI and switch to the new navigation.

Switching to the new navigation

If you're implementing the navigation for the first time instead of upgrading, check out our Extending the navigation documentation.

Updating the view

The first step is to replace the old navigation with the new one in your view. Switch @Html.Raw(Html.GlobalMenu()) out for @Html.Raw(Html.CreatePlatformNavigationMenu())

The new navigation has a fixed position so that it will always be visible, even when scrolling. In order to prevent your content from ending up behind the navigation, you'll need to add @Html.Raw(Html.ApplyPlatformNavigation()) to the container element for your content.

@Html.Raw(Html.CreatePlatformNavigationMenu())
<div @Html.Raw(Html.ApplyFullscreenPlatformNavigation())>
    <!-- Content -->
</div>

Checking root font size

The new navigation uses the rem unit for sizing, so if you are changing the root font size from the default (16px), it will be inconsistent with the navigation font size in CMS UI. If you are using Bootstrap, Bootstrap 3 modifies the root font size, but Bootstrap 4 does not.

Updating Styles [Optional]

CMS UI has updated its styling to be more closely aligned with the new navigation. If you are using CMS UI classes, you may get some of the new styling while using the old global menu. If you have your own styling, we suggest updating your styles to match the new menu. We will be updating ux.episerver.com in the near future to provide our new color palette.

Limitations

If you are an add-on developer, there may be some limitations to consider when opting in to the new menu. These will be addressed in future releases, so if one of them is a blocker for you, you can keep the old global menu until the issue is resolved. - All limitations have been resolved by CMS UI 11.22.1.

~~Navigation right click is not supported~~ - Resolved in CMS UI 11.21.5
~~PopupMenuItem no longer pops open in a new window~~ - Resolved in CMS UI 11.22.0
~~Tooltips don't display on MenuItems~~ - Resolved in CMS UI 11.21.5
~~Epi logo is sometimes not visible~~ - Resolved in CMS UI 11.21.6
~~Search results with long text overflow~~- Resolved in CMS UI 11.21.1
~~Global navigation (app switcher drawer) has a low z-index, so apps that have content with a high z-index may overlap the drawer~~ - Resolved in CMS UI 11.21.2

CMS UI refresh

Mon, 24 Jun 2019 11:39:37 GMT

This was originally released as CMS UI 11.21.0. Due to unintended semantic breaking changes, we have removed CMS UI 11.21.0 from nuget and will re-release in the future with some additional bug fixes. We suggest downgrading to CMS UI 11.20.x for now. Thank you for your feedback and patience. :)

We are introducing a refreshed editor interface in a future release, here is a preview. The new navigation menu is functionally different from its predecessor, but the changes outside of the navigation are purely cosmetic. In order to prevent breaking changes, the new navigation will not automatically replace the old global menu in custom implementations, such as in add-ons; code changes will be required if an add-on wants to use the new navigation instead.

Our first change was to completely redesign CMS UI navigation. This modern navigation takes up less screen space by moving product navigation into a waffle menu in the top left that opens a drawer.

Once the new navigation was in place, there was a very noticeable stylistic difference between the navigation and the old UI. We set out to bring the UI more in sync with the navigation. To accomplish this, we modified the colors, flattened buttons, removed some dividers for a cleaner look and feel, and changed the font.

Before and after comparisions:

Marking notifications as read automatically

Mon, 25 Mar 2019 15:03:04 GMT

Users often have a large number of unread notifications displayed in their notification icon badge. While opening the window temporarily clears the badge, the number returns on a page reload. This has been discouraging users from utilizing notifications, as they are not using the "Mark all as read" button.

In CMS 11.19.0, all notifications will now automatically be marked as read when the notification window is closed. The notifications will retain their yellow "unread" background until either the notification is clicked, or upon a page reload. This means the "Mark all as read" button and the context menu with the "Mark as read" option are no longer necessary and have been removed.

Date picker improvements

Mon, 25 Feb 2019 09:55:23 GMT

In the next release of CMS UI (version 11.18.0), we have added two improvements to the date picker.

1. Time zone and GMT offset data for selected date
The date picker will now display the time zone (Firefox and Chrome only) and the GMT offset at the bottom of the date picker.

If the user is in an area that observes daylight savings time, the offset will change according to the currently selected date in the date picker.

2. Clear button for nullable DateTime fields
This addition allows users to clear dates quickly.