Dark mode admin theme, new locale Shortcode - This week in Orchard (20/11/2020)
The dark mode for the admin theme is here! But first, let's check out the new locale Shortcode, the new Select HTML tag in the Forms module, and many more!
Orchard Core updates
New locale Shortcode
This Shortcode will take the text between the tags and only display it if the current culture is the one specified. In this case, write English Text for the English culture and write French Text for the French culture. It also supports culture fallbacks. So, if your culture is en-CA and you would like to show the French text, it will fall back to en. Note that it's not content localization, it's just text localization that you want to use in your templates. Read more about it in the docs!
[locale en]English Text[/locale][locale fr]French Text[/locale]
New HTML select tag with options for Forms
Set up your site using the Agency recipe. Then navigate to the admin UI of Orchard Core and head to Configuration -> Features to enable the Forms module. Now create a new Page content item. This content type has a Flow Part attached and because of that, we can add widgets to this content item. We added a new Form widget here and inside the Form, we added the new Select widget. By using the Select widget, you can have an HTML <select> tag that creates a drop-down list with the options you provided. In this case, we created a Donation drop-down list with two options. You can also predefine the option you would like to be selected by default.
Listing Code owners
When submitting a PR updating code you're not familiar with, it's not always easy to determine who's the right person to be assigned to for review.
To fix that, the community established a list of code owners who will be automatically pinged when the code they own is updated by a PR. Read more about the code owners feature of GitHub here!
Add classes / IDs to buttons in admin to allow easier selection in E2E tests
This improvement is about adding IDs and classes to different HTML tags in the admin interface. This will allow us to write better selectors for E2E testing. So from now on, if you would like to target specific elements of the admin UI, like buttons to enable or disable a given feature or to run a given recipe, you will have an easier way to do that, because of the additional classes and IDs that you can find in the HTML source code.
Recommended development tools for Orchard Core
What tools do we recommend to build your app with Orchard Core, or work on Orchard itself? In the end, this is up to your personal preference since as long as you can edit source files and build the app you can use any tool on any platform that .NET Core supports. Check out this page in the documentation to get you going for the general editing experience as well as for other useful tools.
Orchard Dojo Library is a portable package of coding and training guidelines and development utilities. These are also part of the best practices and guidelines we use at Lombiq. This library contains Visual Studio code snippets to quickly generate code in some common scenarios for developing Orchard Core modules and themes. To effectively use this collection of VS snippets just point the Snippets Manager to where you cloned or downloaded this folder. To do this, go to Tools → Code Snippets Manager → select the C# language → Add and add the whole folder. For Razor snippets to also work select the HTML Language and do the same. Do note that Razor snippets will only be suggested when you hit Ctrl + space first. You can download the snippets from this GitHub repository and check out this recording to see more snippets in action!
Add support for sending email attachments
You can use the SendAsync method from the SmtpService to send emails from Orchard Core. The MailMessage class represents a class that contains information about the mail message. And now this class has a new property called Attachments which is a collection of message attachments. Use the MailMessageAttachment class to provide attachments by setting the attachments' filename and the attachments' file stream before calling the SendAsync method to send out your email.
Demos
Dark mode admin theme
Set up your site and navigate to the admin UI. Then go to Configuration -> Settings -> Admin and check Enable dark mode admin theme. If you save the setting you have the option to toggle dark mode for the admin theme. If your OS is using dark mode, it will automatically applies the dark mode theme for you. You might notice that there is a new button in the upper-right corner of the admin theme with different icons: Sun and Moon represent the light and dark mode, respectively.
If you switch to the dark mode the admin UI will have the following look and feel.
But that's not all of it! Check out this recording on YouTube to know more about the dark mode!
News from the community
Orchard Dojo Newsletter
Lombiq's Orchard Dojo Newsletter has 168 subscribers! We have started this newsletter to inform the community around Orchard with the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post published to Orchard Dojo, including This week in Orchard of course.
Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here!
Weiyang said
Is this dark mode released with rc2?
Zoltán Lehóczky said
No, it'll only be released with 1.0. But you can still use the latest development version from the preview feed: https://docs.orchardcore.net/en/dev/docs/getting-started/preview-package-source/#adding-orchard-core-preview-feed-with-nugetconfig