Title for rule elements.

7 years ago · 7e486ebf0f
26 changed files with 162 additions and 76 deletions
--- a/extensions/Squidex.Extensions/Actions/AzureQueue/AzureQueueAction.cs
+++ b/extensions/Squidex.Extensions/Actions/AzureQueue/AzureQueueAction.cs
@ -15,6 +15,7 @@ using Squidex.Infrastructure.Validation;
 namespace Squidex.Extensions.Actions.AzureQueue
 {
    [RuleAction(
+        Title = "Azure Queue",
        IconImage = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M.011 16L0 6.248l12-1.63V16zM14 4.328L29.996 2v14H14zM30 18l-.004 14L14 29.75V18zM12 29.495L.01 27.851.009 18H12z'/></svg>",
        IconColor = "#0d9bf9",
        Display = "Send to Azure Queue",
--- a/extensions/Squidex.Extensions/Actions/Discourse/DiscourseAction.cs
+++ b/extensions/Squidex.Extensions/Actions/Discourse/DiscourseAction.cs
@ -14,6 +14,7 @@ using Squidex.Infrastructure.Validation;
 namespace Squidex.Extensions.Actions.Discourse
 {
    [RuleAction(
+        Title = "Discourse",
        IconImage = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16.137 0C7.376 0 0 7.037 0 15.721V32l16.134-.016C24.895 31.984 32 24.676 32 15.995S24.888 0 16.137 0zm.336 6.062a9.862 9.862 0 0 1 5.119 1.555l-.038-.023a.747.747 0 0 1 .05.033l-.033-.021c.288.183.529.353.762.534l-.022-.016c.058.044.094.073.131.103l-.018-.014c.218.174.411.34.597.514l-.005-.005a9.48 9.48 0 0 1 .639.655l.009.01c.073.082.154.176.233.272l.014.018c.053.06.116.133.177.206l.013.017-.052-.047-.008-.007c.104.126.218.273.328.423l.02.028.001.001-.001-.001c-.01-.018.005.005.019.028l.024.042c.145.206.301.451.445.704l.025.048c.131.226.273.51.402.801l.025.063a9.504 9.504 0 0 1 .802 3.853c0 5.38-4.401 9.741-9.831 9.741a9.866 9.866 0 0 1-4.106-.888l.061.025-6.39 1.43 1.78-5.672a7.888 7.888 0 0 1-.293-.584l-.025-.061a8.226 8.226 0 0 1-.254-.617l-.022-.068A1.043 1.043 0 0 1 7 19.017l-.022-.067a8.428 8.428 0 0 1-.246-.829l-.014-.067a9.402 9.402 0 0 1-.265-2.248c0-5.381 4.403-9.744 9.834-9.744l.194.002h-.01z'/></svg>",
        IconColor = "#eB6121",
        Display = "Post to discourse",
--- a/extensions/Squidex.Extensions/Actions/ElasticSearch/ElasticSearchAction.cs
+++ b/extensions/Squidex.Extensions/Actions/ElasticSearch/ElasticSearchAction.cs
@ -14,9 +14,10 @@ using Squidex.Infrastructure.Validation;
 namespace Squidex.Extensions.Actions.ElasticSearch
 {
    [RuleAction(
+        Title = "Elasticsearch",
        IconImage = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 28'><path d='M13.427 17.436H4.163C3.827 16.354 3.636 15.2 3.636 14s.182-2.355.527-3.436h15.245c1.891 0 3.418 1.545 3.418 3.445a3.421 3.421 0 0 1-3.418 3.427h-5.982zm-.436 1.146H4.6a11.508 11.508 0 0 0 4.2 4.982 11.443 11.443 0 0 0 15.827-3.209 5.793 5.793 0 0 0-4.173-1.773H12.99zm7.464-9.164a5.794 5.794 0 0 0 4.173-1.773 11.45 11.45 0 0 0-9.536-5.1c-2.327 0-4.491.7-6.3 1.891a11.554 11.554 0 0 0-4.2 4.982h15.864z'/></svg>",
        IconColor = "#1e5470",
-        Display = "Populate ElasticSearch index",
+        Display = "Populate Elasticsearch index",
        Description = "Populate and synchronize indexes in ElasticSearch for full text search.",
        ReadMore = "https://www.elastic.co/")]
    public sealed class ElasticSearchAction : RuleAction
--- a/extensions/Squidex.Extensions/Actions/Email/EmailAction.cs
+++ b/extensions/Squidex.Extensions/Actions/Email/EmailAction.cs
@ -12,6 +12,7 @@ using Squidex.Domain.Apps.Core.Rules;
 namespace Squidex.Extensions.Actions.Email
 {
    [RuleAction(
+        Title = "Email",
        IconImage = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M28 5h-24c-2.209 0-4 1.792-4 4v13c0 2.209 1.791 4 4 4h24c2.209 0 4-1.791 4-4v-13c0-2.208-1.791-4-4-4zM2 10.25l6.999 5.25-6.999 5.25v-10.5zM30 22c0 1.104-0.898 2-2 2h-24c-1.103 0-2-0.896-2-2l7.832-5.875 4.368 3.277c0.533 0.398 1.166 0.6 1.8 0.6 0.633 0 1.266-0.201 1.799-0.6l4.369-3.277 7.832 5.875zM30 20.75l-7-5.25 7-5.25v10.5zM17.199 18.602c-0.349 0.262-0.763 0.4-1.199 0.4s-0.851-0.139-1.2-0.4l-12.8-9.602c0-1.103 0.897-2 2-2h24c1.102 0 2 0.897 2 2l-12.801 9.602z'/></svg>",
        IconColor = "#333300",
        Display = "Send an email",
--- a/extensions/Squidex.Extensions/Actions/Fastly/FastlyAction.cs
+++ b/extensions/Squidex.Extensions/Actions/Fastly/FastlyAction.cs
@ -12,6 +12,7 @@ using Squidex.Domain.Apps.Core.Rules;
 namespace Squidex.Extensions.Actions.Fastly
 {
    [RuleAction(
+        Title = "Fastly",
        IconImage = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 32'><path d='M10.68.948v1.736h.806v2.6A12.992 12.992 0 0 0 .951 18.051c0 7.178 5.775 12.996 12.9 12.996 7.124 0 12.9-5.819 12.9-12.996-.004-6.332-4.502-11.605-10.455-12.755l-.081-.013V2.684h.807V.948H10.68zm3.53 10.605c3.218.173 5.81 2.713 6.09 5.922v.211h-.734v.737h.734v.201c-.279 3.21-2.871 5.752-6.09 5.925v-.723h-.733v.721c-3.281-.192-5.905-2.845-6.077-6.152h.728v-.737h-.724c.195-3.284 2.808-5.911 6.073-6.103v.725h.733v-.727zm2.513 3.051l-2.462 2.282a1.13 1.13 0 0 0-.41-.078c-.633 0-1.147.517-1.147 1.155a1.15 1.15 0 0 0 1.147 1.155c.633 0 1.147-.517 1.147-1.155 0-.117-.018-.23-.05-.337l.002.008 2.223-2.505-.449-.526z'/></svg>",
        IconColor = "#e23335",
        Display = "Purge fastly cache",
--- a/extensions/Squidex.Extensions/Actions/Kafka/KafkaAction.cs
+++ b/extensions/Squidex.Extensions/Actions/Kafka/KafkaAction.cs
@ -12,6 +12,7 @@ using Squidex.Domain.Apps.Core.Rules;
 namespace Squidex.Extensions.Actions.Kafka
 {
    [RuleAction(
+        Title = "Kafka",
        IconImage = "<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 1000' enable-background='new 0 0 1000 1000' xml:space='preserve'><g><path d = 'M674.2,552.7c-38.2,0-72.4,17-95.9,43.6l-60.1-42.5c6.5-17.4,10.1-36.4,10.1-56.1c0-19.5-3.6-38-9.6-55.2l59.9-42c23.5,26.4,57.5,43.4,95.7,43.4c70.4,0,127.7-57.2,127.7-127.7c0-70.4-57.2-127.7-127.7-127.7c-70.4,0-127.7,57.2-127.7,127.7c0,12.5,2,24.8,5.4,36.2l-60.1,42c-25-31.1-61.3-52.8-102.2-59.5v-72.2c57.9-12.3,101.5-63.7,101.5-125C491.1,67.2,433.8,10,363.4,10S235.7,67.2,235.7,137.7c0,60.6,42.5,111.3,99.3,124.5v73.1c-77.8,13.4-136.8,80.9-136.8,162.3c0,81.6,59.7,149.4,137.5,162.5v77.4c-57.2,12.5-100.4,63.7-100.4,124.8c0,70.4,57.2,127.7,127.7,127.7c70.4,0,128.1-57.2,128.1-127.9c0-61-43.2-112.2-100.4-124.8V660c40.2-6.7,75.6-27.9,100.4-58.4l60.4,42.7c-3.4,11.4-5.1,23.5-5.1,36c0,70.4,57.2,127.7,127.7,127.7c70.4,0,127.7-57.2,127.7-127.7C801.6,609.9,744.6,552.7,674.2,552.7L674.2,552.7z M674.2,253.9c34.2,0,61.9,27.7,61.9,61.9c0,34.2-27.7,61.9-61.9,61.9c-34.2,0-62.2-27.7-62.2-61.9C612,281.7,640,253.9,674.2,253.9L674.2,253.9z M301.2,137.7c0-34.2,27.7-61.9,61.9-61.9c34.2,0,61.9,27.7,61.9,61.9s-27.7,61.9-61.9,61.9C329,199.6,301.2,171.7,301.2,137.7L301.2,137.7z M425.1,862.1c0,34.2-27.7,61.9-61.9,61.9c-34.2,0-61.9-27.7-61.9-61.9c0-34.2,27.7-61.9,61.9-61.9C397.4,800.2,425.1,828.1,425.1,862.1L425.1,862.1z M363.2,584c-47.6,0-86.3-38.7-86.3-86.3c0-47.6,38.7-86.3,86.3-86.3c47.6,0,86.3,38.7,86.3,86.3C449.7,545.3,410.8,584,363.2,584L363.2,584z M674.2,742.5c-34.2,0-61.9-27.7-61.9-61.9c0-34.2,27.7-61.9,61.9-61.9c34.2,0,61.9,27.7,61.9,61.9C736.1,714.8,708.2,742.5,674.2,742.5L674.2,742.5z'/></g></svg>",
        IconColor = "#404244",
        Display = "Push to kafka",
--- a/extensions/Squidex.Extensions/Actions/Medium/MediumAction.cs
+++ b/extensions/Squidex.Extensions/Actions/Medium/MediumAction.cs
@ -12,6 +12,7 @@ using Squidex.Domain.Apps.Core.Rules;
 namespace Squidex.Extensions.Actions.Medium
 {
    [RuleAction(
+        Title = "Medium",
        IconImage = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M3.795 8.48a1.239 1.239 0 0 0-.404-1.045l-2.987-3.6v-.537H9.68l7.171 15.727 6.304-15.727H32v.537l-2.556 2.449a.749.749 0 0 0-.284.717v18a.749.749 0 0 0 .284.716l2.493 2.449v.537H19.39v-.537l2.583-2.509c.253-.253.253-.328.253-.717V10.392l-7.187 18.251h-.969L5.703 10.392v12.232a1.69 1.69 0 0 0 .463 1.404l3.36 4.08v.536H-.001v-.537l3.36-4.08c.36-.371.52-.893.435-1.403V8.48z'/></svg>",
        IconColor = "#00ab6c",
        Display = "Post to Medium",
--- a/extensions/Squidex.Extensions/Actions/Prerender/PrerenderAction.cs
+++ b/extensions/Squidex.Extensions/Actions/Prerender/PrerenderAction.cs
@ -12,6 +12,7 @@ using Squidex.Domain.Apps.Core.Rules;
 namespace Squidex.Extensions.Actions.Prerender
 {
    [RuleAction(
+        Title = "Prerender",
        IconImage = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M2.073 17.984l8.646-5.36v-1.787L.356 17.325v1.318l10.363 6.488v-1.787zM29.927 17.984l-8.646-5.36v-1.787l10.363 6.488v1.318l-10.363 6.488v-1.787zM18.228 6.693l-6.276 19.426 1.656.548 6.276-19.426z'/></svg>",
        IconColor = "#2c3e50",
        Display = "Recache URL",
--- a/extensions/Squidex.Extensions/Actions/Slack/SlackAction.cs
+++ b/extensions/Squidex.Extensions/Actions/Slack/SlackAction.cs
@ -14,6 +14,7 @@ using Squidex.Infrastructure.Validation;
 namespace Squidex.Extensions.Actions.Slack
 {
    [RuleAction(
+        Title = "Slack",
        IconImage = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 28'><path d='M23.734 12.125c1.281 0 2.266.938 2.266 2.219 0 1-.516 1.703-1.453 2.031l-2.688.922.875 2.609c.078.234.109.484.109.734 0 1.234-1 2.266-2.234 2.266a2.271 2.271 0 0 1-2.172-1.547l-.859-2.578-4.844 1.656.859 2.562c.078.234.125.484.125.734 0 1.219-1 2.266-2.25 2.266a2.25 2.25 0 0 1-2.156-1.547l-.859-2.547-2.391.828c-.25.078-.516.141-.781.141-1.266 0-2.219-.938-2.219-2.203 0-.969.625-1.844 1.547-2.156l2.438-.828-1.641-4.891-2.438.844c-.25.078-.5.125-.75.125-1.25 0-2.219-.953-2.219-2.203 0-.969.625-1.844 1.547-2.156l2.453-.828-.828-2.484a2.337 2.337 0 0 1-.125-.734c0-1.234 1-2.266 2.25-2.266a2.25 2.25 0 0 1 2.156 1.547l.844 2.5L13.14 5.5 12.296 3a2.337 2.337 0 0 1-.125-.734c0-1.234 1.016-2.266 2.25-2.266.984 0 1.859.625 2.172 1.547l.828 2.516 2.531-.859c.219-.063.438-.094.672-.094 1.219 0 2.266.906 2.266 2.156 0 .969-.75 1.781-1.625 2.078l-2.453.844 1.641 4.937 2.562-.875a2.32 2.32 0 0 1 .719-.125zm-12.406 4.094l4.844-1.641-1.641-4.922-4.844 1.672z'/></svg>",
        IconColor = "#5c3a58",
        Display = "Send to Slack",
--- a/extensions/Squidex.Extensions/Actions/Twitter/TweetAction.cs
+++ b/extensions/Squidex.Extensions/Actions/Twitter/TweetAction.cs
@ -12,6 +12,7 @@ using Squidex.Domain.Apps.Core.Rules;
 namespace Squidex.Extensions.Actions.Twitter
 {
    [RuleAction(
+        Title = "Twitter",
        IconImage = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M32 7.075a12.941 12.941 0 0 1-3.769 1.031 6.601 6.601 0 0 0 2.887-3.631 13.21 13.21 0 0 1-4.169 1.594A6.565 6.565 0 0 0 22.155 4a6.563 6.563 0 0 0-6.563 6.563c0 .512.056 1.012.169 1.494A18.635 18.635 0 0 1 2.23 5.195a6.56 6.56 0 0 0-.887 3.3 6.557 6.557 0 0 0 2.919 5.463 6.565 6.565 0 0 1-2.975-.819v.081a6.565 6.565 0 0 0 5.269 6.437 6.574 6.574 0 0 1-2.968.112 6.588 6.588 0 0 0 6.131 4.563 13.17 13.17 0 0 1-9.725 2.719 18.568 18.568 0 0 0 10.069 2.95c12.075 0 18.681-10.006 18.681-18.681 0-.287-.006-.569-.019-.85A13.216 13.216 0 0 0 32 7.076z'/></svg>",
        IconColor = "#1da1f2",
        Display = "Tweet",
--- a/extensions/Squidex.Extensions/Actions/Webhook/WebhookAction.cs
+++ b/extensions/Squidex.Extensions/Actions/Webhook/WebhookAction.cs
@ -13,6 +13,7 @@ using Squidex.Domain.Apps.Core.Rules;
 namespace Squidex.Extensions.Actions.Webhook
 {
    [RuleAction(
+        Title = "Webhook",
        IconImage = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><path d='M5.95 27.125h-.262C1.75 26.425 0 23.187 0 20.3c0-2.713 1.575-5.688 5.075-6.563V9.712c0-.525.35-.875.875-.875s.875.35.875.875v4.725c0 .438-.35.787-.7.875-2.975.438-4.375 2.8-4.375 4.988s1.313 4.55 4.2 5.075h.175a.907.907 0 0 1 .7 1.05c-.088.438-.438.7-.875.7zM21.175 27.387c-2.8 0-5.775-1.662-6.65-5.075H9.712c-.525 0-.875-.35-.875-.875s.35-.875.875-.875h5.512c.438 0 .787.35.875.7.438 2.975 2.8 4.288 4.988 4.375 2.188 0 4.55-1.313 5.075-4.2v-.088a.908.908 0 0 1 1.05-.7.908.908 0 0 1 .7 1.05v.088c-.612 3.85-3.85 5.6-6.737 5.6zM21.525 18.55c-.525 0-.875-.35-.875-.875v-4.813c0-.438.35-.787.7-.875 2.975-.438 4.288-2.8 4.375-4.987 0-2.188-1.313-4.55-4.2-5.075h-.088c-.525-.175-.875-.613-.787-1.05s.525-.788 1.05-.7h.088c3.938.7 5.688 3.937 5.688 6.825 0 2.713-1.662 5.688-5.075 6.563v4.113c0 .438-.438.875-.875.875zM1.137 6.737H.962c-.438-.087-.788-.525-.7-.963v-.087c.7-3.938 3.85-5.688 6.737-5.688h.087c2.712 0 5.688 1.662 6.563 5.075h4.025c.525 0 .875.35.875.875s-.35.875-.875.875h-4.725c-.438 0-.788-.35-.875-.7-.438-2.975-2.8-4.288-4.988-4.375-2.188 0-4.55 1.313-5.075 4.2v.087c-.088.438-.438.7-.875.7z'/><path d='M7 10.588c-.875 0-1.837-.35-2.538-1.05a3.591 3.591 0 0 1 0-5.075C5.162 3.851 6.037 3.5 7 3.5s1.838.35 2.537 1.05c.7.7 1.05 1.575 1.05 2.537s-.35 1.837-1.05 2.538c-.7.612-1.575.963-2.537.963zM7 5.25c-.438 0-.875.175-1.225.525a1.795 1.795 0 0 0 2.538 2.538c.35-.35.525-.788.525-1.313s-.175-.875-.525-1.225S7.525 5.25 7 5.25zM21.088 23.887a3.65 3.65 0 0 1-2.537-1.05 3.591 3.591 0 0 1 0-5.075c.7-.7 1.575-1.05 2.537-1.05s1.838.35 2.537 1.05c.7.7 1.05 1.575 1.05 2.538s-.35 1.837-1.05 2.537c-.787.7-1.662 1.05-2.537 1.05zm0-5.337c-.525 0-.963.175-1.313.525a1.795 1.795 0 0 0 2.537 2.538c.35-.35.525-.788.525-1.313s-.175-.963-.525-1.313-.787-.438-1.225-.438zM20.387 10.588c-.875 0-1.837-.35-2.537-1.05S16.8 7.963 16.8 7.001s.35-1.837 1.05-2.538c.7-.612 1.662-.962 2.537-.962s1.838.35 2.538 1.05c1.4 1.4 1.4 3.675 0 5.075-.7.612-1.575.963-2.538.963zm0-5.338c-.525 0-.962.175-1.313.525s-.525.788-.525 1.313.175.962.525 1.313c.7.7 1.838.7 2.538 0s.7-1.838 0-2.538c-.263-.438-.7-.612-1.225-.612zM7.087 23.887c-.875 0-1.837-.35-2.538-1.05s-1.05-1.575-1.05-2.537.35-1.838 1.05-2.538c.7-.612 1.575-.962 2.538-.962s1.837.35 2.538 1.05c1.4 1.4 1.4 3.675 0 5.075-.7.612-1.575.962-2.538.962zm0-5.337c-.525 0-.962.175-1.313.525s-.525.788-.525 1.313.175.963.525 1.313a1.794 1.794 0 1 0 2.538-2.537c-.263-.438-.7-.612-1.225-.612z'/></svg>",
        IconColor = "#4bb958",
        Display = "Send webhook",
--- a/src/Squidex.Domain.Apps.Core.Operations/HandleRules/RuleActionAttribute.cs
+++ b/src/Squidex.Domain.Apps.Core.Operations/HandleRules/RuleActionAttribute.cs
@ -12,6 +12,8 @@ namespace Squidex.Domain.Apps.Core.HandleRules
    [AttributeUsage(AttributeTargets.Class, Inherited = false)]
    public sealed class RuleActionAttribute : Attribute
    {
+        public string Title { get; set; }
+
        public string ReadMore { get; set; }

        public string IconImage { get; set; }
--- a/src/Squidex.Domain.Apps.Core.Operations/HandleRules/RuleActionDefinition.cs
+++ b/src/Squidex.Domain.Apps.Core.Operations/HandleRules/RuleActionDefinition.cs
@ -14,6 +14,8 @@ namespace Squidex.Domain.Apps.Core.HandleRules
    {
        public Type Type { get; set; }

+        public string Title { get; set; }
+
        public string ReadMore { get; set; }

        public string IconImage { get; set; }
--- a/src/Squidex.Domain.Apps.Core.Operations/HandleRules/RuleRegistry.cs
+++ b/src/Squidex.Domain.Apps.Core.Operations/HandleRules/RuleRegistry.cs
@ -61,6 +61,7 @@ namespace Squidex.Domain.Apps.Core.HandleRules
                new RuleActionDefinition
                {
                    Type = actionType,
+                    Title = metadata.Title,
                    Display = metadata.Display,
                    Description = metadata.Description,
                    IconColor = metadata.IconColor,
--- a/src/Squidex/Areas/Api/Controllers/Rules/Models/RuleElementDto.cs
+++ b/src/Squidex/Areas/Api/Controllers/Rules/Models/RuleElementDto.cs
@ -26,6 +26,11 @@ namespace Squidex.Areas.Api.Controllers.Rules.Models
        [Required]
        public string Display { get; set; }

+        /// <summary>
+        /// Optional title.
+        /// </summary>
+        public string Title { get; set; }
+
        /// <summary>
        /// The color for the icon.
        /// </summary>
--- a/src/Squidex/app/features/rules/declarations.ts
+++ b/src/Squidex/app/features/rules/declarations.ts
@ -12,9 +12,10 @@ export * from './pages/rules/triggers/content-changed-trigger.component';
 export * from './pages/rules/triggers/schema-changed-trigger.component';
 export * from './pages/rules/triggers/usage-trigger.component';

-export * from './pages/rules/rule.component';
 export * from './pages/rules/rule-element.component';
+export * from './pages/rules/rule-icon.component';
 export * from './pages/rules/rule-wizard.component';
+export * from './pages/rules/rule.component';
 export * from './pages/rules/rules-page.component';

 export * from './pages/events/pipes';
--- a/src/Squidex/app/features/rules/module.ts
+++ b/src/Squidex/app/features/rules/module.ts
@ -22,6 +22,7 @@ import {
    RuleElementComponent,
    RuleEventBadgeClassPipe,
    RuleEventsPageComponent,
+    RuleIconComponent,
    RulesPageComponent,
    RuleWizardComponent,
    SchemaChangedTriggerComponent,
@ -62,6 +63,7 @@ const routes: Routes = [
        RuleElementComponent,
        RuleEventBadgeClassPipe,
        RuleEventsPageComponent,
+        RuleIconComponent,
        RulesPageComponent,
        RuleWizardComponent,
        SchemaChangedTriggerComponent,
--- a/src/Squidex/app/features/rules/pages/rules/rule-element.component.html
+++ b/src/Squidex/app/features/rules/pages/rules/rule-element.component.html
@ -1,11 +1,7 @@
 <ng-container *ngIf="isSmall; else large">
    <div class="small" *ngIf="element" [style.background]="element.iconColor" [sqxHoverBackground]="element.iconColor | sqxDarken:5">
        <div class="small-icon" [style.background]="element.iconColor | sqxDarken:5">
-            <i *ngIf="element.iconCode; else svgIcon" class="icon icon-{{element.iconCode}}"></i>
-
-            <ng-template #svgIcon>
-                <i class="svg-icon" [innerHtml]="element.iconImage | sqxSafeHtml"></i>
-            </ng-template>
+            <sqx-rule-icon size="md" [element]="element"></sqx-rule-icon>
        </div>
        <div class="small-text">
            {{element.display}}
@ -17,15 +13,11 @@
    <div class="row no-gutters large">
        <div class="col-auto">
            <div class="large-icon" [style.background]="element.iconColor | sqxDarken:5">
-                <i *ngIf="element.iconCode; else svgIcon" class="icon icon-{{element.iconCode}}"></i>
-
-                <ng-template #svgIcon>
-                    <i class="svg-icon" [innerHtml]="element.iconImage | sqxSafeHtml"></i>
-                </ng-template>
+                <sqx-rule-icon size="lg" [element]="element"></sqx-rule-icon>
            </div>
        </div>
        <div class="col">
-            <div class="large-title">{{type}}</div>
+            <div class="large-title">{{element.title || type}}</div>

            <div class="large-text text-muted">
                {{element.description}}
--- a/src/Squidex/app/features/rules/pages/rules/rule-element.component.scss
+++ b/src/Squidex/app/features/rules/pages/rules/rule-element.component.scss
@ -27,14 +27,6 @@
        font-weight: normal;
        padding: 0 .8rem;
    }
-
-    .icon {
-        font-size: 20px;
-    }
-
-    .svg-icon {
-        width: 20px;
-    }
 }

 .large {
@ -68,23 +60,4 @@
        padding: 1rem;
        line-height: 1px;
    }
-
-    .icon {
-        font-size: 30px;
-    }
-
-    .svg-icon {
-        width: 30px;
-    }
-}
-
-.svg-icon {
-    display: inline-block;
-}
-
-::ng-deep {
-    svg {
-        fill: $color-dark-foreground;
-        display: block;
-    }
 }
--- a/src/Squidex/app/features/rules/pages/rules/rule-icon.component.ts
+++ b/src/Squidex/app/features/rules/pages/rules/rule-icon.component.ts
@ -0,0 +1,70 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+// tslint:disable: component-selector
+
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+import { RuleElementDto } from '@app/shared';
+
+@Component({
+    selector: 'sqx-rule-icon',
+    template: `
+        <span class="icon {{size}}">
+            <i *ngIf="element.iconCode; else svgIcon" class="icon icon-{{element.iconCode}}"></i>
+
+            <ng-template #svgIcon>
+                <i class="svg-icon" [innerHtml]="element.iconImage | sqxSafeHtml"></i>
+            </ng-template>
+        </span>`,
+    styles: [
+        `.svg-icon {
+            display: inline-block;
+        }
+
+        .icon {
+            color: white;
+        }
+
+        .sm .icon {
+            font-size: 14px;
+        }
+
+        .sm .svg-icon {
+            width: 14px;
+        }
+
+        .md .icon {
+            font-size: 20px;
+        }
+
+        .md .svg-icon {
+            width: 20px;
+        }
+
+        .lg .icon {
+            font-size: 30px;
+        }
+
+        .lg .svg-icon {
+            width: 30px;
+        }
+
+        ::ng-deep svg {
+            fill: white;
+            display: block;
+        }`
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class RuleIconComponent {
+    @Input()
+    public element: RuleElementDto;
+
+    @Input()
+    public size: 'sm' | 'md' | 'lg' = 'sm';
+}
--- a/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.html
+++ b/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.html
@ -6,17 +6,8 @@
        <ng-container *ngIf="mode === 'EditAction'">
            Edit Action
        </ng-container>
-        <ng-container *ngIf="mode === 'Wizard' && step === 1">
-            Step 1 of 4: Select Trigger
-        </ng-container>
-        <ng-container *ngIf="mode === 'Wizard' && step === 2">
-            Step 2 of 4: Configure Trigger
-        </ng-container>
-        <ng-container *ngIf="mode === 'Wizard' && step === 3">
-            Step 3 of 4: Select Action
-        </ng-container>
-        <ng-container *ngIf="mode === 'Wizard' && step === 4">
-            Step 4 of 4: Configure Action
+        <ng-container *ngIf="mode === 'Wizard'">
+            {{titles[step - 1]}}
        </ng-container>
    </ng-container>

@ -34,8 +25,12 @@
        </div>
        
        <ng-container *ngIf="step === 2 && schemas">
-            <form [formGroup]="triggerForm.form" (ngSubmit)="saveTrigger()">  
-                <h3 class="wizard-title">{{ruleTriggers[triggerType].display}}</h3>
+            <form [formGroup]="triggerForm.form" (ngSubmit)="saveTrigger()">
+                <h3 class="wizard-title" [style.background]="triggerElement.iconColor">
+                    <sqx-rule-icon size="sm" [element]="triggerElement"></sqx-rule-icon>
+                    
+                    <span class="ml-2">{{triggerElement.display}}</span>
+                </h3>

                <ng-container [ngSwitch]="triggerType">
                    <ng-container *ngSwitchCase="'AssetChanged'">
@ -85,10 +80,14 @@
    
        <ng-container *ngIf="step === 4">
            <form [formGroup]="actionForm.form" (ngSubmit)="saveAction()">
-                <h3 class="wizard-title">{{ruleActions[actionType].display}}</h3>
+                <h3 class="wizard-title" [style.background]="actionElement.iconColor">
+                    <sqx-rule-icon size="sm" [element]="actionElement"></sqx-rule-icon>
+                    
+                    <span class="ml-2">{{actionElement.display}}</span>
+                </h3>

                <sqx-generic-action
-                    [definition]="ruleActions[actionType]"
+                    [definition]="actionElement"
                    [action]="action"
                    [actionForm]="actionForm.form"
                    [actionFormSubmitted]="actionForm.submitted | async">
--- a/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.scss
+++ b/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.scss
@ -6,11 +6,10 @@
 }

 .wizard-title {
-    background: $color-border;
+    color: $color-dark-foreground;
    margin: -1.5rem -1.75rem;
    margin-bottom: 1rem;
    font-weight: 400;
    font-size: 1.05rem;
    padding: 1rem 1.75rem;
 }
-
--- a/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.ts
+++ b/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.ts
@ -16,9 +16,16 @@ import {
    SchemaDto
 } from '@app/shared';

-export const MODE_WIZARD = 'Wizard';
-export const MODE_EDIT_TRIGGER = 'EditTrigger';
-export const MODE_EDIT_ACTION  = 'EditAction';
+const MODE_WIZARD = 'Wizard';
+const MODE_EDIT_TRIGGER = 'EditTrigger';
+const MODE_EDIT_ACTION  = 'EditAction';
+
+const TITLES: ReadonlyArray<string> = [
+    'Step 1 of 4: Select Trigger',
+    'Step 2 of 4: Configure Trigger',
+    'Step 3 of 4: Select Action',
+    'Step 4 of 4: Configure Action'
+];

@Component({
    selector: 'sqx-rule-wizard',
@ -52,6 +59,16 @@ export class RuleWizardComponent implements AfterViewInit, OnInit {
    public triggerType: string;
    public trigger: any = {};

+    public titles = TITLES;
+
+    public get actionElement() {
+        return this.ruleActions[this.actionType];
+    }
+
+    public get triggerElement() {
+        return this.ruleTriggers[this.triggerType];
+    }
+
    public isEditable: boolean;

    public step = 1;
--- a/src/Squidex/app/shared/services/rules.service.spec.ts
+++ b/src/Squidex/app/shared/services/rules.service.spec.ts
@ -60,6 +60,7 @@ describe('RulesService', () => {

        req.flush({
            'action2': {
+                title: 'title2',
                display: 'display2',
                description: 'description2',
                iconColor: '#222',
@ -82,6 +83,7 @@ describe('RulesService', () => {
                }]
            },
            'action1': {
+                title: 'title1',
                display: 'display1',
                description: 'description1',
                iconColor: '#111',
@ -91,9 +93,9 @@ describe('RulesService', () => {
            }
        });

-        const action1 = new RuleElementDto('display1', 'description1', '#111', '<svg path="1" />', null, 'link1', []);
+        const action1 = new RuleElementDto('title1', 'display1', 'description1', '#111', '<svg path="1" />', null, 'link1', []);

-        const action2 = new RuleElementDto('display2', 'description2', '#222', '<svg path="2" />', null, 'link2', [
+        const action2 = new RuleElementDto('title2', 'display2', 'description2', '#222', '<svg path="2" />', null, 'link2', [
            new RuleElementPropertyDto('property1', 'Editor1', 'Display1', 'Description1', false, true),
            new RuleElementPropertyDto('property2', 'Editor2', 'Display2', 'Description2', true, false)
        ]);
--- a/src/Squidex/app/shared/services/rules.service.ts
+++ b/src/Squidex/app/shared/services/rules.service.ts
@ -29,6 +29,7 @@ export type RuleElementMetadataDto = {
    display: string;
    iconColor: string;
    iconCode: string;
+    title?: string;
 };

 export type TriggersDto = { [key: string]: RuleElementMetadataDto };
@ -38,25 +39,29 @@ export const ALL_TRIGGERS: TriggersDto = {
        description: 'For content changes like created, updated, published, unpublished...',
        display: 'Content changed',
        iconColor: '#3389ff',
-        iconCode: 'contents'
+        iconCode: 'contents',
+        title: 'Content changed'
    },
    'AssetChanged': {
        description: 'For asset changes like uploaded, updated (reuploaded), renamed, deleted...',
        display: 'Asset changed',
        iconColor: '#3389ff',
-        iconCode: 'assets'
+        iconCode: 'assets',
+        title: 'Asset changed'
    },
    'SchemaChanged': {
        description: 'When a schema definition has been created, updated, published or deleted...',
        display: 'Schema changed',
        iconColor: '#3389ff',
-        iconCode: 'schemas'
+        iconCode: 'schemas',
+        title: 'Schema changed'
    },
    'Usage': {
        description: 'When monthly API calls exceed a specified limit for one time a month...',
        display: 'Usage exceeded',
        iconColor: '#3389ff',
-        iconCode: 'dashboard'
+        iconCode: 'dashboard',
+        title: 'Usage'
    }
 };

@ -64,6 +69,7 @@ export type ActionsDto = { [name: string]: RuleElementDto };

 export class RuleElementDto {
    constructor(
+        public readonly title: string,
        public readonly display: string,
        public readonly description: string,
        public readonly iconColor: string,
@ -202,6 +208,7 @@ export class RulesService {
                        ));

                    actions[key] = new RuleElementDto(
+                        value.title,
                        value.display,
                        value.description,
                        value.iconColor,
--- a/tests/Squidex.Domain.Apps.Core.Tests/Operations/HandleRules/RuleElementRegistryTests.cs
+++ b/tests/Squidex.Domain.Apps.Core.Tests/Operations/HandleRules/RuleElementRegistryTests.cs
@ -28,11 +28,12 @@ namespace Squidex.Domain.Apps.Core.Operations.HandleRules
        }

        [RuleAction(
-           IconImage = "<svg></svg>",
-           IconColor = "#1e5470",
-           Display = "Action display",
-           Description = "Action description.",
-           ReadMore = "https://www.readmore.com/")]
+            Title = "Invalid",
+            IconImage = "<svg></svg>",
+            IconColor = "#1e5470",
+            Display = "Action display",
+            Description = "Action description.",
+            ReadMore = "https://www.readmore.com/")]
        public sealed class MyInvalidRuleAction : RuleAction
        {
            [DataType(DataType.Custom)]
@ -40,11 +41,12 @@ namespace Squidex.Domain.Apps.Core.Operations.HandleRules
        }

        [RuleAction(
-           IconImage = "<svg></svg>",
-           IconColor = "#1e5470",
-           Display = "Action display",
-           Description = "Action description.",
-           ReadMore = "https://www.readmore.com/")]
+            Title = "Action",
+            IconImage = "<svg></svg>",
+            IconColor = "#1e5470",
+            Display = "Action display",
+            Description = "Action description.",
+            ReadMore = "https://www.readmore.com/")]
        public sealed class MyRuleAction : RuleAction
        {
            [Required]
@ -84,6 +86,7 @@ namespace Squidex.Domain.Apps.Core.Operations.HandleRules
            var expected = new RuleActionDefinition
            {
                Type = typeof(MyRuleAction),
+                Title = "Action",
                IconImage = "<svg></svg>",
                IconColor = "#1e5470",
                Display = "Action display",