Almost finished refactoring.

extensions/Squidex.Extensions/Actions/Algolia/AlgoliaAction.cs

@@ -6,15 +6,17 @@
 // ==========================================================================
 
 using System.ComponentModel.DataAnnotations;
-using Squidex.Domain.Apps.Core.HandleRules;
 using Squidex.Domain.Apps.Core.Rules;
 
 namespace Squidex.Extensions.Actions.Algolia
 {
     [RuleActionHandler(typeof(AlgoliaActionHandler))]
-    [RuleAction(Link = "https://www.algolia.com/",
+    [RuleAction(
+        IconImage = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 .842C7.633.842.842 7.625.842 16S7.625 31.158 16 31.158c8.374 0 15.158-6.791 15.158-15.166S24.375.842 16 .842zm0 25.83c-5.898 0-10.68-4.781-10.68-10.68S10.101 5.313 16 5.313s10.68 4.781 10.68 10.679-4.781 10.68-10.68 10.68zm0-19.156v7.956c0 .233.249.388.458.279l7.055-3.663a.312.312 0 0 0 .124-.434 8.807 8.807 0 0 0-7.319-4.447z'/></svg>",
+        IconColor = "#0d9bf9",
         Display = "Populate Algolia index",
-        Description = "Populate and synchronize indices in Algolia for full text search.")]
+        Description = "Populate and synchronize indices in Algolia for full text search.",
+        ReadMore = "https://www.algolia.com/")]
     public sealed class AlgoliaAction : RuleAction
     {
         [Required]

extensions/Squidex.Extensions/Actions/AzureQueue/AzureQueueAction.cs

@@ -8,16 +8,18 @@
 using System.Collections.Generic;
 using System.ComponentModel.DataAnnotations;
 using System.Text.RegularExpressions;
-using Squidex.Domain.Apps.Core.HandleRules;
 using Squidex.Domain.Apps.Core.Rules;
 using Squidex.Infrastructure;
 
 namespace Squidex.Extensions.Actions.AzureQueue
 {
     [RuleActionHandler(typeof(AzureQueueActionHandler))]
-    [RuleAction(Link = "https://azure.microsoft.com/en-us/services/storage/queues/",
+    [RuleAction(
+        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",
-        Description = "Send an event to azure queue storage.")]
+        Description = "Send an event to azure queue storage.",
+        ReadMore = "https://azure.microsoft.com/en-us/services/storage/queues/")]
     public sealed class AzureQueueAction : RuleAction
     {
         [Required]

extensions/Squidex.Extensions/Actions/Discourse/DiscourseAction.cs

@@ -7,14 +7,18 @@
 
 using System;
 using System.ComponentModel.DataAnnotations;
-using Squidex.Domain.Apps.Core.HandleRules;
 using Squidex.Domain.Apps.Core.Rules;
 using Squidex.Infrastructure;
 
 namespace Squidex.Extensions.Actions.Discourse
 {
     [RuleActionHandler(typeof(DiscourseActionHandler))]
-    [RuleAction(Description = "")]
+    [RuleAction(
+        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",
+        Description = "Create a post or topic at discourse.",
+        ReadMore = "https://www.discourse.org/")]
     public sealed class DiscourseAction : RuleAction
     {
         [AbsoluteUrl]

extensions/Squidex.Extensions/Actions/ElasticSearch/ElasticSearchAction.cs

@@ -7,16 +7,18 @@
 
 using System;
 using System.ComponentModel.DataAnnotations;
-using Squidex.Domain.Apps.Core.HandleRules;
 using Squidex.Domain.Apps.Core.Rules;
 using Squidex.Infrastructure;
 
 namespace Squidex.Extensions.Actions.ElasticSearch
 {
     [RuleActionHandler(typeof(ElasticSearchActionHandler))]
-    [RuleAction(Link = "https://www.elastic.co/",
+    [RuleAction(
+        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",
-        Description = "Populate and synchronize indices in ElasticSearch for full text search.")]
+        Description = "Populate and synchronize indices in ElasticSearch for full text search.",
+        ReadMore = "https://www.elastic.co/")]
     public sealed class ElasticSearchAction : RuleAction
     {
         [AbsoluteUrl]

extensions/Squidex.Extensions/Actions/Fastly/FastlyAction.cs

@@ -6,15 +6,17 @@
 // ==========================================================================
 
 using System.ComponentModel.DataAnnotations;
-using Squidex.Domain.Apps.Core.HandleRules;
 using Squidex.Domain.Apps.Core.Rules;
 
 namespace Squidex.Extensions.Actions.Fastly
 {
     [RuleActionHandler(typeof(FastlyActionHandler))]
-    [RuleAction(Link = "https://www.fastly.com/",
+    [RuleAction(
+        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",
-        Description = "Remove entries from the fastly CDN cache.")]
+        Description = "Remove entries from the fastly CDN cache.",
+        ReadMore = "https://www.fastly.com/")]
     public sealed class FastlyAction : RuleAction
     {
         [Required]

extensions/Squidex.Extensions/Actions/Medium/MediumAction.cs

@@ -6,15 +6,17 @@
 // ==========================================================================
 
 using System.ComponentModel.DataAnnotations;
-using Squidex.Domain.Apps.Core.HandleRules;
 using Squidex.Domain.Apps.Core.Rules;
 
 namespace Squidex.Extensions.Actions.Medium
 {
     [RuleActionHandler(typeof(MediumActionHandler))]
-    [RuleAction(Link = "https://medium.com/",
+    [RuleAction(
+        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",
-        Description = "Create a new story or post at medium.")]
+        Description = "Create a new story or post at medium.",
+        ReadMore = "https://medium.com/")]
     public sealed class MediumAction : RuleAction
     {
         [Required]

extensions/Squidex.Extensions/Actions/Medium/MediumActionHandler.cs

@@ -14,7 +14,6 @@ using Newtonsoft.Json.Linq;
 using Squidex.Domain.Apps.Core.HandleRules;
 using Squidex.Domain.Apps.Core.HandleRules.Actions.Utils;
 using Squidex.Domain.Apps.Core.HandleRules.EnrichedEvents;
-using Squidex.Infrastructure;
 using Squidex.Infrastructure.Http;
 
 #pragma warning disable SA1649 // File name must match first type name

extensions/Squidex.Extensions/Actions/RuleActionAttribute.cs

@@ -12,7 +12,11 @@ namespace Squidex.Extensions.Actions
     [AttributeUsage(AttributeTargets.Class, AllowMultiple = false, Inherited = false)]
     public sealed class RuleActionAttribute : Attribute
     {
-        public string Link { get; set; }
+        public string ReadMore { get; set; }
+
+        public string IconImage { get; set; }
+
+        public string IconColor { get; set; }
 
         public string Display { get; set; }
 

extensions/Squidex.Extensions/Actions/RuleElement.cs

@@ -11,22 +11,16 @@ namespace Squidex.Extensions.Actions
 {
     public sealed class RuleElement
     {
-        public Type Type { get; }
+        public Type Type { get; set; }
 
-        public string Link { get; set; }
+        public string ReadMore { get; set; }
 
-        public string Display { get; }
+        public string IconImage { get; set; }
 
-        public string Description { get; }
+        public string IconColor { get; set; }
 
-        public RuleElement(Type type, string color, string display, string description, string link = null)
+        public string Display { get; set; }
-        {
-            Type = type;
-
-            Display = display;
-            Description = description;
 
-            Link = link;
+        public string Description { get; set; }
-        }
     }
 }

extensions/Squidex.Extensions/Actions/RuleElementRegistry.cs

@@ -9,9 +9,7 @@ using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Reflection;
-using Squidex.Domain.Apps.Core.HandleRules;
 using Squidex.Domain.Apps.Core.Rules;
-using Squidex.Domain.Apps.Core.Rules.Triggers;
 using Squidex.Infrastructure;
 
 namespace Squidex.Extensions.Actions
@@ -21,6 +19,29 @@ namespace Squidex.Extensions.Actions
         private const string Suffix = "Action";
         private static readonly HashSet<Type> ActionHandlerTypes = new HashSet<Type>();
         private static readonly Dictionary<string, RuleElement> ActionTypes = new Dictionary<string, RuleElement>();
+        private static readonly Dictionary<string, RuleElement> TriggerTypes = new Dictionary<string, RuleElement>
+        {
+            ["ContentChanged"] = new RuleElement
+            {
+                IconImage = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><path d='M21.875 28H6.125A6.087 6.087 0 0 1 0 21.875V6.125A6.087 6.087 0 0 1 6.125 0h15.75A6.087 6.087 0 0 1 28 6.125v15.75A6.088 6.088 0 0 1 21.875 28zM6.125 1.75A4.333 4.333 0 0 0 1.75 6.125v15.75a4.333 4.333 0 0 0 4.375 4.375h15.75a4.333 4.333 0 0 0 4.375-4.375V6.125a4.333 4.333 0 0 0-4.375-4.375H6.125z'/><path d='M13.125 12.25H7.35c-1.575 0-2.888-1.313-2.888-2.888V7.349c0-1.575 1.313-2.888 2.888-2.888h5.775c1.575 0 2.887 1.313 2.887 2.888v2.013c0 1.575-1.312 2.888-2.887 2.888zM7.35 6.212c-.613 0-1.138.525-1.138 1.138v2.012A1.16 1.16 0 0 0 7.35 10.5h5.775a1.16 1.16 0 0 0 1.138-1.138V7.349a1.16 1.16 0 0 0-1.138-1.138H7.35zM22.662 16.713H5.337c-.525 0-.875-.35-.875-.875s.35-.875.875-.875h17.237c.525 0 .875.35.875.875s-.35.875-.787.875zM15.138 21.262h-9.8c-.525 0-.875-.35-.875-.875s.35-.875.875-.875h9.713c.525 0 .875.35.875.875s-.35.875-.787.875z'/></svg>",
+                IconColor = "#3389ff",
+                Display = "Content changed",
+                Description = "Content changed like created, updated, published, unpublished..."
+            },
+
+            ["AssetChanged"] = new RuleElement
+            {
+                IconImage = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><path d='M21.875 28H6.125A6.087 6.087 0 0 1 0 21.875V6.125A6.087 6.087 0 0 1 6.125 0h15.75A6.087 6.087 0 0 1 28 6.125v15.75A6.088 6.088 0 0 1 21.875 28zM6.125 1.75A4.333 4.333 0 0 0 1.75 6.125v15.75a4.333 4.333 0 0 0 4.375 4.375h15.75a4.333 4.333 0 0 0 4.375-4.375V6.125a4.333 4.333 0 0 0-4.375-4.375H6.125z'/><path d='M21.088 23.537H9.1c-.35 0-.612-.175-.787-.525s-.088-.7.088-.962l8.225-9.713c.175-.175.438-.35.7-.35s.525.175.7.35l5.25 7.525c.088.087.088.175.088.262.438 1.225.087 2.012-.175 2.45-.613.875-1.925.963-2.1.963zm-10.063-1.75h10.15c.175 0 .612-.088.7-.262.088-.088.088-.35 0-.7l-4.55-6.475-6.3 7.438zM9.1 13.737c-2.1 0-3.85-1.75-3.85-3.85S7 6.037 9.1 6.037s3.85 1.75 3.85 3.85-1.663 3.85-3.85 3.85zm0-5.949c-1.138 0-2.1.875-2.1 2.1s.962 2.1 2.1 2.1 2.1-.962 2.1-2.1-.875-2.1-2.1-2.1z'/></svg>",
+                IconColor = "#3389ff",
+                Display = "Asset changed",
+                Description = "Asset changed like created, updated, renamed..."
+            }
+        };
+
+        public static IReadOnlyDictionary<string, RuleElement> Triggers
+        {
+            get { return TriggerTypes; }
+        }
 
         public static IReadOnlyDictionary<string, RuleElement> Actions
         {
@@ -54,10 +75,15 @@ namespace Squidex.Extensions.Actions
                 var metadata = actionType.GetCustomAttribute<RuleActionAttribute>();
 
                 ActionTypes[name] =
-                    new RuleElement(actionType,
+                    new RuleElement
-                        metadata.Display,
+                    {
-                        metadata.Description,
+                        Type = actionType,
-                        metadata.Link);
+                        Display = metadata.Display,
+                        Description = metadata.Description,
+                        IconColor = metadata.IconColor,
+                        IconImage = metadata.IconImage,
+                        ReadMore = metadata.ReadMore
+                    };
 
                 ActionHandlerTypes.Add(actionType.GetCustomAttribute<RuleActionHandlerAttribute>().HandlerType);
             }

extensions/Squidex.Extensions/Actions/Slack/SlackAction.cs

@@ -7,16 +7,18 @@
 
 using System;
 using System.ComponentModel.DataAnnotations;
-using Squidex.Domain.Apps.Core.HandleRules;
 using Squidex.Domain.Apps.Core.Rules;
 using Squidex.Infrastructure;
 
 namespace Squidex.Extensions.Actions.Slack
 {
     [RuleActionHandler(typeof(SlackActionHandler))]
-    [RuleAction(Link = "https://slack.com",
+    [RuleAction(
+        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",
-        Description = "Create a status update at slack to a channel you define.")]
+        Description = "Create a status update at slack to a channel you define.",
+        ReadMore = "https://slack.com")]
     public sealed class SlackAction : RuleAction
     {
         [AbsoluteUrl]

extensions/Squidex.Extensions/Actions/Twitter/TweetAction.cs

@@ -6,15 +6,17 @@
 // ==========================================================================
 
 using System.ComponentModel.DataAnnotations;
-using Squidex.Domain.Apps.Core.HandleRules;
 using Squidex.Domain.Apps.Core.Rules;
 
 namespace Squidex.Extensions.Actions.Twitter
 {
     [RuleActionHandler(typeof(TweetActionHandler))]
-    [RuleAction(Link = "https://twitter.com",
+    [RuleAction(
+        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",
-        Description = "Create a status update at Tweet to a your user account.")]
+        Description = "Create a status update at Tweet to a your user account.",
+        ReadMore = "https://twitter.com")]
     public sealed class TweetAction : RuleAction
     {
         [Required]

extensions/Squidex.Extensions/Actions/WebhookAction/WebhookAction.cs

@@ -7,7 +7,6 @@
 
 using System;
 using System.ComponentModel.DataAnnotations;
-using Squidex.Domain.Apps.Core.HandleRules;
 using Squidex.Domain.Apps.Core.Rules;
 using Squidex.Infrastructure;
 
@@ -15,8 +14,11 @@ namespace Squidex.Extensions.Actions.Webhook
 {
     [RuleActionHandler(typeof(WebhookActionHandler))]
     [RuleAction(
+        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",
-        Description = "Send events like ContentPublished to your webhook.")]
+        Description = "Send events like ContentPublished to your webhook.",
+        ReadMore = "https://en.wikipedia.org/wiki/Webhook")]
     public sealed class WebhookAction : RuleAction
     {
         [AbsoluteUrl]

src/Squidex/Areas/Api/Controllers/Rules/Models/RuleElementDto.cs

@@ -23,9 +23,19 @@ namespace Squidex.Areas.Api.Controllers.Rules.Models
         [Required]
         public string Display { get; set; }
 
+        /// <summary>
+        /// The color for the icon.
+        /// </summary>
+        public string IconColor { get; set; }
+
+        /// <summary>
+        /// The image for the icon.
+        /// </summary>
+        public string IconImage { get; set; }
+
         /// <summary>
         /// The optional link to the product that is integrated.
         /// </summary>
-        public string Link { get; set; }
+        public string ReadMore { get; set; }
     }
 }

src/Squidex/Areas/Api/Controllers/Rules/RulesController.cs

@@ -74,20 +74,7 @@ namespace Squidex.Areas.Api.Controllers.Rules
         [ApiCosts(0)]
         public IActionResult GetTriggers()
         {
-            var response = new Dictionary<string, RuleElementDto>
+            var response = RuleElementRegistry.Triggers.ToDictionary(x => x.Key, x => SimpleMapper.Map(x.Value, new RuleElementDto()));
-            {
-                ["ContentChanged"] = new RuleElementDto
-                {
-                    Display = "Content changed",
-                    Description = "Content changed like created, updated, published, unpublished..."
-                },
-
-                ["AssetChanged"] = new RuleElementDto
-                {
-                    Display = "Asset changed",
-                    Description = "Asset changed like created, updated, renamed..."
-                }
-            };
 
             return Ok(response);
         }

src/Squidex/app/features/rules/declarations.ts

@@ -9,6 +9,7 @@ export * from './pages/rules/triggers/asset-changed-trigger.component';
 export * from './pages/rules/triggers/content-changed-trigger.component';
 
 export * from './pages/rules/rule-action.component';
+export * from './pages/rules/rule-element.component';
 export * from './pages/rules/rule-wizard.component';
 export * from './pages/rules/rules-page.component';
 

src/Squidex/app/features/rules/module.ts

@@ -22,6 +22,7 @@ import {
     AssetChangedTriggerComponent,
     ContentChangedTriggerComponent,
     RuleActionComponent,
+    RuleElementComponent,
     RuleEventBadgeClassPipe,
     RuleEventsPageComponent,
     RulesPageComponent,
@@ -62,6 +63,7 @@ const routes: Routes = [
         AssetChangedTriggerComponent,
         ContentChangedTriggerComponent,
         RuleActionComponent,
+        RuleElementComponent,
         RuleEventBadgeClassPipe,
         RuleEventsPageComponent,
         RulesPageComponent,

src/Squidex/app/features/rules/pages/rules/rule-action.component.ts

@@ -39,11 +39,7 @@ export class RuleActionComponent implements OnChanges, OnInit {
     }
 
     public ngOnChanges() {
-        if (this.component) {
+        this.updateInnerValues();
-            this.component.instance.action = this.action;
-            this.component.instance.actionForm = this.actionForm;
-            this.component.instance.actionFormSubmitted = this.actionFormSubmitted;
-        }
     }
 
     public ngOnInit() {
@@ -52,8 +48,14 @@ export class RuleActionComponent implements OnChanges, OnInit {
 
         this.component = this.viewContainer.createComponent(factory);
 
+        this.updateInnerValues();
+    }
+
+    private updateInnerValues() {
+        if (this.component) {
             this.component.instance.action = this.action;
             this.component.instance.actionForm = this.actionForm;
             this.component.instance.actionFormSubmitted = this.actionFormSubmitted;
         }
+    }
 }

src/Squidex/app/features/rules/pages/rules/rule-element.component.html

@@ -0,0 +1,30 @@
+<ng-container *ngIf="isSmall; else large">
+    <div class="rule-element-small" *ngIf="element" [style.background]="element.iconColor" [sqxHoverBackground]="element.iconColor | sqxDarken:5">
+        <span class="rule-element-small-icon" [style.background]="element.iconColor | sqxDarken:5">
+            <i class="svg-icon" [innerHtml]="element.iconImage | sqxSafeHtml"></i>
+        </span>
+        <span class="rule-element-small-text">
+            {{element.display}}
+        </span>
+    </div>
+</ng-container>
+<ng-template #large>
+    <div class="row no-gutters rule-element-large">
+        <div class="col col-auto">
+            <div class="rule-element-large-icon" [style.background]="element.iconColor | sqxDarken:5">
+                <div class="svg-icon" [innerHtml]="element.iconImage | sqxSafeHtml"></div>
+            </div>
+        </div>
+        <div class="col">
+            <div class="rule-element-large-title">{{type}}</div>
+
+            <div class="rule-element-large-text text-muted">
+                {{element.description}}
+            </div>
+
+            <div class="rule-element-large-link" *ngIf="element.readMore">
+                <a [href]="element.readMore" target="_blank">Read More</a>
+            </div>
+        </div>
+    </div>
+</ng-template>

src/Squidex/app/features/rules/pages/rules/rule-element.component.scss

@@ -0,0 +1,76 @@
+@import '_vars';
+@import '_mixins';
+
+.rule-element {
+    &-small {
+        & {
+            @include truncate;
+            @include transition(background-color .4s ease);
+            color: $color-dark-foreground;
+            cursor: pointer;
+            line-height: 2.8rem;
+            font-size: 1rem;
+            font-weight: normal;
+            padding-right: .8rem;
+        }
+
+        &-icon {
+            height: 3rem;
+            display: inline-block;
+            line-height: 3rem;
+            font-size: 1.2rem;
+            font-weight: normal;
+            margin: 0;
+            margin-right: .5rem;
+            padding: 0 .8rem;
+        }
+
+        .svg-icon {
+            display: inline-block;
+            min-width: 20px;
+            max-width: 20px;
+            min-height: 20px;
+            max-height: 20px;
+            fill: $color-dark-foreground;
+        }
+    }
+
+    &-large {
+        & {
+            cursor: pointer;
+            min-height: 100px;
+            max-height: 100px;
+        }
+
+        &-title {
+            font-weight: bold;
+        }
+
+        &-link {
+            font-size: .8rem;
+        }
+
+        &-text {
+            font-size: .8rem;
+            margin-top: .25rem;
+            margin-bottom: .25rem;
+        }
+
+        &-icon {
+            display: inline-block;
+            margin-right: .5rem;
+            position: relative;
+            padding: 1rem;
+            line-height: 1px;
+        }
+
+        .svg-icon {
+            display: inline-block;
+            min-width: 30px;
+            max-width: 30px;
+            min-height: 30px;
+            max-height: 30px;
+            fill: $color-dark-foreground;
+        }
+    }
+}

src/Squidex/app/features/rules/pages/rules/rule-element.component.ts

@@ -0,0 +1,27 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+import { RuleElementDto } from '@app/shared';
+
+@Component({
+    selector: 'sqx-rule-element',
+    styleUrls: ['./rule-element.component.scss'],
+    templateUrl: './rule-element.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class RuleElementComponent {
+    @Input()
+    public type: string;
+
+    @Input()
+    public element: RuleElementDto;
+
+    @Input()
+    public isSmall = true;
+}

src/Squidex/app/features/rules/pages/rules/rule-wizard.component.html

@@ -1,4 +1,4 @@
-<sqx-modal-dialog large="true" fullHeight="true" (closed)="complete()">
+<sqx-modal-dialog large="true" fullHeight="true" (closed)="complete()" [showFooter]="step === 2 || step === 4">
     <ng-container title>
         <ng-container *ngIf="mode === 'EditTrigger'">
             Edit Trigger
@@ -22,14 +22,9 @@
 
     <ng-container content>
         <div class="row no-gutters" *ngIf="step === 1">
-            <div *ngFor="let trigger of ruleTriggers | sqxKeys" class="col-12 col-md-6 col-lg-4">
+            <div *ngFor="let triggerType of ruleTriggers | sqxKeys" class="col-12 col-md-6">
-                <div class="rule-element rule-element-{{trigger}} " (click)="selectTriggerType(trigger)">
+                <div class="rule-element" (click)="selectTriggerType(triggerType)">
-                    <span class="rule-element-icon">
+                    <sqx-rule-element [type]="triggerType" [isSmall]="false" [element]="ruleTriggers[triggerType]"></sqx-rule-element>
-                        <i class="icon-trigger-{{trigger}}"></i>
-                    </span>
-                    <span class="rule-element-text">
-                        {{ruleTriggers[trigger].name}}
-                    </span>
                 </div>
             </div>
         </div>
@@ -57,14 +52,9 @@
         </ng-container>
     
         <div class="row no-gutters" *ngIf="step === 3">
-            <div *ngFor="let action of ruleActions | sqxKeys" class="col-12 col-md-6 col-lg-4">
+            <div *ngFor="let actionType of ruleActions | sqxKeys" class="col-12 col-md-6">
-                <div class="rule-element rule-element-{{action}} " (click)="selectActionType(action)">
+                <div class="rule-element" (click)="selectActionType(actionType)">
-                    <span class="rule-element-icon">
+                    <sqx-rule-element [type]="actionType" [isSmall]="false" [element]="ruleActions[actionType]"></sqx-rule-element>
-                        <i class="icon-action-{{action}}"></i>
-                    </span>
-                    <span class="rule-element-text">
-                            {{ruleActions[action].name}}
-                    </span>
                 </div>
             </div>
         </div>

src/Squidex/app/features/rules/pages/rules/rule-wizard.component.scss

@@ -4,3 +4,15 @@
 .rule-element {
     margin: .25rem;
 }
+
+:host /deep/ {
+    .wizard-title {
+        background: $color-border;
+        margin: -1rem;
+        margin-bottom: 1rem;
+        font-weight: 400;
+        font-size: 1.05rem;
+        padding: 1rem;
+    }
+}
+

src/Squidex/app/features/rules/pages/rules/rules-page.component.html

@@ -36,26 +36,16 @@
                                 <h3>If</h3>
                             </td>
                             <td class="cell-auto">
-                                <span class="rule-element rule-element-{{rule.triggerType}}" (click)="editTrigger(rule)">
+                                <span (click)="editTrigger(rule)">
-                                    <span class="rule-element-icon">
+                                    <sqx-rule-element [type]="rule.triggerType" [element]="ruleTriggers[rule.triggerType]"></sqx-rule-element>
-                                        <i class="icon-trigger-{{rule.triggerType}}"></i>
-                                    </span>
-                                    <span class="rule-element-text">
-                                        {{ruleTriggers[rule.triggerType].display}}
-                                    </span>
                                 </span>
                             </td>
                             <td class="cell-separator">
                                 <h3>then</h3>
                             </td>
                             <td class="cell-auto">
-                                <span class="rule-element rule-element-{{rule.actionType}}" (click)="editAction(rule)">
+                                <span (click)="editAction(rule)">
-                                    <span class="rule-element-icon">
+                                    <sqx-rule-element [type]="rule.actionType" [element]="ruleActions[rule.actionType]"></sqx-rule-element>
-                                        <i class="icon-action-{{rule.actionType}}"></i>
-                                    </span>
-                                    <span class="rule-element-text">
-                                        {{ruleActions[rule.actionType].display}}
-                                    </span>
                                 </span>
                             </td>
                             <td class="cell-actions">

src/Squidex/app/features/rules/pages/rules/rules-page.component.ts

@@ -41,7 +41,6 @@ export class RulesPageComponent implements OnInit {
     }
 
     public ngOnInit() {
-
         this.rulesState.load().pipe(onErrorResumeNext()).subscribe();
 
         this.rulesService.getActions()

src/Squidex/app/features/rules/pages/rules/triggers/asset-changed-trigger.component.html

@@ -1,4 +1,4 @@
-<h3 class="wizard-title">Trigger rule when asset has been...</h3>
+<h3 class="wizard-title">Trigger rule when events happen for assets...</h3>
 
 <div [formGroup]="triggerForm" class="form-horizontal">
     <div class="form-group">

src/Squidex/app/features/rules/pages/rules/triggers/content-changed-trigger.component.html

@@ -1,4 +1,4 @@
-<h3 class="wizard-title">Trigger rule when an events for a schemas happens</h3>
+<h3 class="wizard-title">Trigger rule when events happen for schemas...</h3>
 
 <ng-container *ngIf="!triggerForm.controls.handleAll.value">
     <table class="table table-middle table-sm table-fixed table-borderless">

src/Squidex/app/features/rules/pages/rules/triggers/content-changed-trigger.component.scss

@@ -7,6 +7,10 @@
     padding-bottom: 0;
 }
 
+.table {
+    margin-top: 3.5rem;
+}
+
 .form-check {
     margin-top: 1rem;
 }

src/Squidex/app/framework/angular/hover-background.directive.ts

@@ -0,0 +1,36 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';
+
+@Directive({
+    selector: '[sqxHoverBackground]'
+})
+export class HoverBackgroundDirective {
+    private previousBackground: string | null;
+
+    @Input('sqxHoverBackground')
+    public background: string;
+
+    constructor(
+        private readonly element: ElementRef,
+        private readonly renderer: Renderer2
+    ) {
+    }
+
+    @HostListener('mouseenter')
+    public onEnter() {
+        this.previousBackground = (<HTMLElement>this.element.nativeElement).style.background;
+
+        this.renderer.setStyle(this.element.nativeElement, 'background', this.background);
+    }
+
+    @HostListener('mouseleave')
+    public onLEave() {
+        this.renderer.setStyle(this.element.nativeElement, 'background', this.previousBackground);
+    }
+}

src/Squidex/app/framework/angular/modals/modal-dialog.component.html

@@ -13,7 +13,7 @@
                 </button>
             </div>
 
-            <div class="modal-tabs {{tabsClass}} clearfix" #tabsElement [hidden]="!showTabs">
+            <div class="modal-tabs {{tabsClass}} clearfix" #tabsElement [hidden]="!showTabs || !hasTabs">
                 <ng-content select=[tabs]></ng-content>
             </div>
 
@@ -21,7 +21,7 @@
                 <ng-content select=[content]></ng-content>
             </div>
 
-            <div class="modal-footer" [hidden]="!showFooter">
+            <div class="modal-footer" [hidden]="!showFooter || !hasFooter">
                 <div class="clearfix" #footerElement>
                     <ng-content select=[footer]></ng-content>
                 </div>

src/Squidex/app/framework/angular/modals/modal-dialog.component.ts

@@ -25,6 +25,12 @@ export class ModalDialogComponent implements AfterViewInit {
     @Input()
     public showHeader = true;
 
+    @Input()
+    public showFooter = true;
+
+    @Input()
+    public showTabs = true;
+
     @Input()
     public large = false;
 
@@ -46,8 +52,8 @@ export class ModalDialogComponent implements AfterViewInit {
     @ViewChild('footerElement')
     public footerElement: ElementRef;
 
-    public showTabs = false;
+    public hasTabs = false;
-    public showFooter = false;
+    public hasFooter = false;
 
     constructor(
         private readonly changeDetector: ChangeDetectorRef
@@ -55,8 +61,8 @@ export class ModalDialogComponent implements AfterViewInit {
     }
 
     public ngAfterViewInit() {
-        this.showTabs = this.tabsElement.nativeElement.children.length > 0;
+        this.hasTabs = this.tabsElement.nativeElement.children.length > 0;
-        this.showFooter = this.footerElement.nativeElement.children.length > 0;
+        this.hasFooter = this.footerElement.nativeElement.children.length > 0;
 
         this.changeDetector.detectChanges();
     }

src/Squidex/app/framework/angular/pipes/colors.pipes.spec.ts

@@ -0,0 +1,64 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { DarkenPipe, LightenPipe } from './colors.pipes';
+
+describe('DarkenPipe', () => {
+    const pipe = new DarkenPipe();
+
+    it('should keep black unchanged', () => {
+        const result = pipe.transform('#000', 20);
+
+        expect(result).toEqual('#000000');
+    });
+
+    it('should darken rgb gray', () => {
+        const result = pipe.transform('rgb(100, 100, 100)', 20);
+
+        expect(result).toEqual('#505050');
+    });
+
+    it('should darken hey gray', () => {
+        const result = pipe.transform('#646464', 20);
+
+        expect(result).toEqual('#505050');
+    });
+
+    it('should darken mixed color', () => {
+        const result = pipe.transform('#FF91D1', 20);
+
+        expect(result).toEqual('#cc74a7');
+    });
+});
+
+describe('LightenPipe', () => {
+    const pipe = new LightenPipe();
+
+    it('should keep white unchanged', () => {
+        const result = pipe.transform('#fff', 20);
+
+        expect(result).toEqual('#ffffff');
+    });
+
+    it('should lighten rgb gray', () => {
+        const result = pipe.transform('rgb(100, 100, 100)', 20);
+
+        expect(result).toEqual('#787878');
+    });
+
+    it('should lighten hey gray', () => {
+        const result = pipe.transform('#646464', 20);
+
+        expect(result).toEqual('#787878');
+    });
+
+    it('should lighten mixed color', () => {
+        const result = pipe.transform('#7F4868', 20);
+
+        expect(result).toEqual('#98567d');
+    });
+});

src/Squidex/app/framework/angular/pipes/colors.pipes.ts

@@ -0,0 +1,164 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { Pipe, PipeTransform } from '@angular/core';
+
+interface RGBColor {
+    r: number;
+    g: number;
+    b: number;
+}
+
+interface HSVColor {
+    h: number;
+    s: number;
+    v: number;
+}
+
+interface IColorDefinition {
+    regex: RegExp;
+
+    process(bots: RegExpExecArray): RGBColor;
+}
+
+const ColorDefinitions: IColorDefinition[] = [
+    {
+        regex: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,
+        process: (bits) => ({
+            r: parseInt(bits[1], 10) / 255,
+            g: parseInt(bits[2], 10) / 255,
+            b: parseInt(bits[3], 10) / 255
+        })
+    },
+    {
+        regex: /^(\w{2})(\w{2})(\w{2})$/,
+        process: (bits) => ({
+            r: parseInt(bits[1], 16) / 255,
+            g: parseInt(bits[2], 16) / 255,
+            b: parseInt(bits[3], 16) / 255
+        })
+    },
+    {
+        regex: /^(\w{1})(\w{1})(\w{1})$/,
+        process: (bits) => ({
+            r: parseInt(bits[1] + bits[1], 16) / 255,
+            g: parseInt(bits[2] + bits[2], 16) / 255,
+            b: parseInt(bits[3] + bits[3], 16) / 255
+        })
+    }
+];
+
+function parseColor(value: string) {
+    if (value.charAt(0) === '#') {
+        value = value.substr(1, 6);
+    }
+
+    value = value.replace(/ /g, '').toLowerCase();
+
+    for (let colorDefinition of ColorDefinitions) {
+        const bits = colorDefinition.regex.exec(value);
+
+        if (bits) {
+            return colorDefinition.process(bits);
+        }
+    }
+
+    throw new Error('Color is not in a valid format.');
+}
+
+function rgbToHsv({ r, g, b }: RGBColor): HSVColor {
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+
+    let h = 0;
+    let d = max - min;
+    let s = max === 0 ? 0 : d / max;
+    let v = max;
+
+    if (max === min) {
+        h = 0;
+    } else {
+        switch (max) {
+            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+            case g: h = (b - r) / d + 2; break;
+            case b: h = (r - g) / d + 4; break;
+        }
+
+        h /= 6;
+    }
+
+    return { h, s, v };
+}
+
+function hsvToRgb({ h, s, v }: HSVColor): RGBColor {
+    let r = 0, g = 0, b = 0;
+
+    let i = Math.floor(h * 6);
+    let f = h * 6 - i;
+    let p = v * (1 - s);
+    let q = v * (1 - f * s);
+    let t = v * (1 - (1 - f) * s);
+
+    switch (i % 6) {
+        case 0: r = v, g = t, b = p; break;
+        case 1: r = q, g = v, b = p; break;
+        case 2: r = p, g = v, b = t; break;
+        case 3: r = p, g = q, b = v; break;
+        case 4: r = t, g = p, b = v; break;
+        case 5: r = v, g = p, b = q; break;
+    }
+
+    return { r, g, b };
+}
+
+function colorString({ r, g, b }: RGBColor) {
+    let rs = Math.round(r * 255).toString(16);
+    let gs = Math.round(g * 255).toString(16);
+    let bs = Math.round(b * 255).toString(16);
+
+    if (rs.length === 1) {
+        rs = '0' + rs;
+    }
+    if (gs.length === 1) {
+        gs = '0' + gs;
+    }
+    if (bs.length === 1) {
+        bs = '0' + bs;
+    }
+
+    return '#' + rs + gs + bs;
+}
+
+@Pipe({
+    name: 'sqxDarken',
+    pure: true
+})
+export class DarkenPipe implements PipeTransform {
+    public transform(value: string, percentage: number): any {
+        const rgb = parseColor(value);
+        const hsv = rgbToHsv(rgb);
+
+        hsv.v = Math.max(0, hsv.v * (1 - (percentage / 100)));
+
+        return colorString(hsvToRgb(hsv));
+    }
+}
+
+@Pipe({
+    name: 'sqxLighten',
+    pure: true
+})
+export class LightenPipe implements PipeTransform {
+    public transform(value: string, percentage: number): any {
+        const rgb = parseColor(value);
+        const hsv = rgbToHsv(rgb);
+
+        hsv.v = Math.min(1, hsv.v * (1 + (percentage / 100)));
+
+        return colorString(hsvToRgb(hsv));
+    }
+}

src/Squidex/app/framework/angular/safe-html.pipe.ts

@@ -0,0 +1,24 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Pipe({
+    name: 'sqxSafeHtml',
+    pure: true
+})
+export class SafeHtmlPipe implements PipeTransform {
+    constructor(
+        public readonly domSanitizer: DomSanitizer
+    ) {
+    }
+
+    public transform(html: string): SafeHtml {
+        return this.domSanitizer.bypassSecurityTrustHtml(html);
+    }
+}

src/Squidex/app/framework/declarations.ts

@@ -37,6 +37,7 @@ export * from './angular/modals/onboarding-tooltip.component';
 export * from './angular/modals/tooltip.component';
 export * from './angular/modals/root-view.component';
 
+export * from './angular/pipes/colors.pipes';
 export * from './angular/pipes/date-time.pipes';
 export * from './angular/pipes/keys.pipe';
 export * from './angular/pipes/money.pipe';
@@ -46,12 +47,14 @@ export * from './angular/pipes/numbers.pipes';
 export * from './angular/routers/can-deactivate.guard';
 export * from './angular/routers/parent-link.directive';
 
+export * from './angular/hover-background.directive';
 export * from './angular/ignore-scrollbar.directive';
 export * from './angular/image-source.directive';
 export * from './angular/panel.component';
 export * from './angular/panel-container.directive';
 export * from './angular/pager.component';
 export * from './angular/popup-link.directive';
+export * from './angular/safe-html.pipe';
 export * from './angular/scroll-active.directive';
 export * from './angular/shortcut.component';
 export * from './angular/sorted.directive';

src/Squidex/app/framework/module.ts

@@ -17,6 +17,7 @@ import {
     ConfirmClickDirective,
     ControlErrorsComponent,
     CopyDirective,
+    DarkenPipe,
     DatePipe,
     DateTimeEditorComponent,
     DayOfWeekPipe,
@@ -32,6 +33,7 @@ import {
     FormErrorComponent,
     FromNowPipe,
     FullDateTimePipe,
+    HoverBackgroundDirective,
     IFrameEditorComponent,
     IgnoreScrollbarDirective,
     ImageSourceDirective,
@@ -41,6 +43,7 @@ import {
     JsonEditorComponent,
     KeysPipe,
     KNumberPipe,
+    LightenPipe,
     LocalStoreService,
     MessageBus,
     ModalDialogComponent,
@@ -58,6 +61,7 @@ import {
     ProgressBarComponent,
     ResourceLoaderService,
     RootViewComponent,
+    SafeHtmlPipe,
     ScrollActiveDirective,
     ShortcutComponent,
     ShortcutService,
@@ -87,6 +91,7 @@ import {
         ConfirmClickDirective,
         ControlErrorsComponent,
         CopyDirective,
+        DarkenPipe,
         DateTimeEditorComponent,
         DatePipe,
         DayOfWeekPipe,
@@ -101,6 +106,7 @@ import {
         FormErrorComponent,
         FromNowPipe,
         FullDateTimePipe,
+        HoverBackgroundDirective,
         IFrameEditorComponent,
         IgnoreScrollbarDirective,
         ImageSourceDirective,
@@ -110,6 +116,7 @@ import {
         JsonEditorComponent,
         KeysPipe,
         KNumberPipe,
+        LightenPipe,
         ModalDialogComponent,
         ModalTargetDirective,
         ModalViewDirective,
@@ -123,6 +130,7 @@ import {
         PopupLinkDirective,
         ProgressBarComponent,
         RootViewComponent,
+        SafeHtmlPipe,
         ScrollActiveDirective,
         ShortcutComponent,
         ShortDatePipe,
@@ -144,6 +152,7 @@ import {
         ConfirmClickDirective,
         ControlErrorsComponent,
         CopyDirective,
+        DarkenPipe,
         DatePipe,
         DateTimeEditorComponent,
         DayOfWeekPipe,
@@ -159,6 +168,7 @@ import {
         FormsModule,
         FromNowPipe,
         FullDateTimePipe,
+        HoverBackgroundDirective,
         IFrameEditorComponent,
         IgnoreScrollbarDirective,
         ImageSourceDirective,
@@ -168,6 +178,7 @@ import {
         JsonEditorComponent,
         KeysPipe,
         KNumberPipe,
+        LightenPipe,
         ModalDialogComponent,
         ModalTargetDirective,
         ModalViewDirective,
@@ -182,6 +193,7 @@ import {
         ProgressBarComponent,
         ReactiveFormsModule,
         RootViewComponent,
+        SafeHtmlPipe,
         ScrollActiveDirective,
         ShortcutComponent,
         ShortDatePipe,

src/Squidex/app/shared/services/rules.service.spec.ts

@@ -15,6 +15,7 @@ import {
     CreateRuleDto,
     DateTime,
     RuleDto,
+    RuleElementDto,
     RuleEventDto,
     RuleEventsDto,
     RulesService,
@@ -44,6 +45,80 @@ describe('RulesService', () => {
         httpMock.verify();
     }));
 
+    it('should make get request to get actions',
+        inject([RulesService, HttpTestingController], (rulesService: RulesService, httpMock: HttpTestingController) => {
+
+        let actions: { [ name: string ]: RuleElementDto };
+
+        rulesService.getActions().subscribe(result => {
+            actions = result;
+        });
+
+        const req = httpMock.expectOne('http://service/p/api/rules/actions');
+
+        expect(req.request.method).toEqual('GET');
+        expect(req.request.headers.get('If-Match')).toBeNull();
+
+        req.flush({
+            'action2': {
+                display: 'display2',
+                description: 'description2',
+                iconColor: '#222',
+                iconImage: '<svg path="2" />',
+                readMore: 'link2'
+            },
+            'action1': {
+                display: 'display1',
+                description: 'description1',
+                iconColor: '#111',
+                iconImage: '<svg path="1" />',
+                readMore: 'link1'
+            }
+        });
+
+        expect(actions!).toEqual({
+            'action1': new RuleElementDto('display1', 'description1', '#111', '<svg path="1" />', 'link1'),
+            'action2': new RuleElementDto('display2', 'description2', '#222', '<svg path="2" />', 'link2')
+        });
+    }));
+
+    it('should make get request to get triggers',
+        inject([RulesService, HttpTestingController], (rulesService: RulesService, httpMock: HttpTestingController) => {
+
+        let triggers: { [ name: string ]: RuleElementDto };
+
+        rulesService.getTriggers().subscribe(result => {
+            triggers = result;
+        });
+
+        const req = httpMock.expectOne('http://service/p/api/rules/triggers');
+
+        expect(req.request.method).toEqual('GET');
+        expect(req.request.headers.get('If-Match')).toBeNull();
+
+        req.flush({
+            'trigger2': {
+                display: 'display2',
+                description: 'description2',
+                iconColor: '#222',
+                iconImage: '<svg path="2" />',
+                readMore: 'link2'
+            },
+            'trigger1': {
+                display: 'display1',
+                description: 'description1',
+                iconColor: '#111',
+                iconImage: '<svg path="1" />',
+                readMore: 'link1'
+            }
+        });
+
+        expect(triggers!).toEqual({
+            'trigger1': new RuleElementDto('display1', 'description1', '#111', '<svg path="1" />', 'link1'),
+            'trigger2': new RuleElementDto('display2', 'description2', '#222', '<svg path="2" />', 'link2')
+        });
+    }));
+
     it('should make get request to get app rules',
         inject([RulesService, HttpTestingController], (rulesService: RulesService, httpMock: HttpTestingController) => {
 

src/Squidex/app/shared/services/rules.service.ts

@@ -25,7 +25,9 @@ export class RuleElementDto {
     constructor(
         public readonly display: string,
         public readonly description: string,
-        public readonly link: string
+        public readonly iconColor: string,
+        public readonly iconImage: string,
+        public readonly readMore: string
     ) {
     }
 }
@@ -111,12 +113,10 @@ export class RulesService {
 
                 const result: { [name: string]: RuleElementDto } = {};
 
-                for (let key in items) {
+                for (let key of Object.keys(items).sort()) {
-                    if (items.hasOwnProperty(key)) {
                     const value = items[key];
 
-                        result[key] = new RuleElementDto(value.display, value.description, value.link);
+                    result[key] = new RuleElementDto(value.display, value.description, value.iconColor, value.iconImage, value.readMore);
-                    }
                 }
 
                 return result;
@@ -133,12 +133,10 @@ export class RulesService {
 
                 const result: { [name: string]: RuleElementDto } = {};
 
-                for (let key in items) {
+                for (let key of Object.keys(items).sort()) {
-                    if (items.hasOwnProperty(key)) {
                     const value = items[key];
 
-                        result[key] = new RuleElementDto(value.display, value.description, value.link);
+                    result[key] = new RuleElementDto(value.display, value.description, value.iconColor, value.iconImage, value.readMore);
-                    }
                 }
 
                 return result;

src/Squidex/app/theme/_mixins.scss

@@ -177,8 +177,10 @@
  
 @mixin circle($size) {
     @include border-radius($size * .5);
-     width: $size;
+    min-height: $size;
-    height: $size;
+    max-height: $size;
+    min-width: $size;
+    max-width: $size;
 }
 
 @mixin wrap() {

src/Squidex/app/theme/_rules.scss

@@ -1,98 +0,0 @@
-@import '_mixins';
-@import '_vars';
-
-$trigger-asset-changed:   #3389ff;
-$trigger-content-changed: #3389ff;
-
-$action-webhook:          #4bb958;
-$action-elasticsearch:    #1e5470;
-$action-algolia:          #0d9bf9;
-$action-slack:            #5c3a58;
-$action-azure:            #55b3ff;
-$action-fastly:           #e23335;
-$action-medium:           #00ab6c;
-$action-twitter:          #1da1f2;
-
-// sass-lint:disable class-name-format
-
-@mixin build-element($color) {
-    & {
-        background: $color;
-    }
-
-    &:hover {
-        background: darken($color, 5%);
-    }
-
-    .rule-element-icon {
-        background: darken($color, 5%);
-    }
-}
-
-.wizard-title {
-    margin-bottom: 1rem;
-}
-
-.rule-element {
-    & {
-        @include truncate;
-        @include transition(background-color .4s ease);
-        color: $color-dark-foreground;
-        cursor: pointer;
-        line-height: 2.8rem;
-        font-size: 1rem;
-        font-weight: normal;
-        padding-right: .8rem;
-    }
-
-    &-icon {
-        height: 3rem;
-        display: inline-block;
-        line-height: 3rem;
-        font-size: 1.2rem;
-        font-weight: normal;
-        margin: 0;
-        margin-right: .5rem;
-        padding: 0 .8rem;
-    }
-}
-
-.rule-element-AssetChanged {
-    @include build-element($trigger-asset-changed);
-}
-
-.rule-element-ContentChanged {
-    @include build-element($trigger-content-changed);
-}
-
-.rule-element-AzureQueue {
-    @include build-element($action-azure);
-}
-
-.rule-element-Algolia {
-    @include build-element($action-algolia);
-}
-
-.rule-element-ElasticSearch {
-    @include build-element($action-elasticsearch);
-}
-
-.rule-element-Fastly {
-    @include build-element($action-fastly);
-}
-
-.rule-element-Medium {
-    @include build-element($action-medium);
-}
-
-.rule-element-Slack {
-    @include build-element($action-slack);
-}
-
-.rule-element-Tweet {
-    @include build-element($action-twitter);
-}
-
-.rule-element-Webhook {
-    @include build-element($action-webhook);
-}

src/Squidex/app/theme/icomoon/demo-files/demo.css

@@ -150,10 +150,10 @@ p {
   font-size: 32px;
 }
 .fs2 {
-  font-size: 32px;
+  font-size: 24px;
 }
 .fs3 {
-  font-size: 24px;
+  font-size: 32px;
 }
 .fs4 {
   font-size: 28px;

src/Squidex/app/theme/icomoon/fonts/icomoon.svg

@@ -71,38 +71,32 @@
 <glyph unicode="&#xe93d;" glyph-name="bug" horiz-adv-x="951" d="M932.571 402.286c0-20-16.571-36.571-36.571-36.571h-128c0-71.429-15.429-125.143-38.286-165.714l118.857-119.429c14.286-14.286 14.286-37.143 0-51.429-6.857-7.429-16.571-10.857-25.714-10.857s-18.857 3.429-25.714 10.857l-113.143 112.571s-74.857-68.571-172-68.571v512h-73.143v-512c-103.429 0-178.857 75.429-178.857 75.429l-104.571-118.286c-7.429-8-17.143-12-27.429-12-8.571 0-17.143 2.857-24.571 9.143-14.857 13.714-16 36.571-2.857 52l115.429 129.714c-20 39.429-33.143 90.286-33.143 156.571h-128c-20 0-36.571 16.571-36.571 36.571s16.571 36.571 36.571 36.571h128v168l-98.857 98.857c-14.286 14.286-14.286 37.143 0 51.429s37.143 14.286 51.429 0l98.857-98.857h482.286l98.857 98.857c14.286 14.286 37.143 14.286 51.429 0s14.286-37.143 0-51.429l-98.857-98.857v-168h128c20 0 36.571-16.571 36.571-36.571zM658.286 731.428h-365.714c0 101.143 81.714 182.857 182.857 182.857s182.857-81.714 182.857-182.857z" />
 <glyph unicode="&#xe93e;" glyph-name="download" d="M640 853.334q78 0 149.167-30.5t122.5-81.833 81.833-122.5 30.5-149.167q0-85-35-160.667t-96.667-129.167-140-77.5l21 20.667q18 18.333 28 42.667 9.333 22.667 9.333 49.333 0 6.667-0.333 9.333 59.333 41.333 93.833 105.833t34.5 139.5q0 60.667-23.667 116t-63.667 95.333-95.333 63.667-116 23.667q-55.333 0-106.5-19.833t-90-53.833-65-81.333-33.833-101h-88.667q-70.667 0-120.667-50t-50-120.667q0-38.667 15.167-71.667t39.833-54.167 54.833-33 60.833-11.833h50q11.667-29.333 30-48l37.667-37.333h-117.667q-69.667 0-128.5 34.333t-93.167 93.167-34.333 128.5 34.333 128.5 93.167 93.167 128.5 34.333h22q26.333 74.333 79.333 132.167t126.833 90.833 155.833 33zM554.667 512q17.667 0 30.167-12.5t12.5-30.167v-281l55 55.333q12.333 12.333 30.333 12.333 18.333 0 30.5-12.167t12.167-30.5q0-18-12.333-30.333l-128-128q-12.333-12.333-30.333-12.333t-30.333 12.333l-128 128q-12.333 13-12.333 30.333 0 17.667 12.5 30.167t30.167 12.5q18 0 30.333-12.333l55-55.333v281q0 17.667 12.5 30.167t30.167 12.5z" />
 <glyph unicode="&#xe93f;" glyph-name="document-unpublish" d="M358.4 848.457c-28.314 0-51.2-22.886-51.2-51.2v-153.6h51.2v153.6h307.2v-153.6c0-28.314 22.886-51.2 51.2-51.2h153.6v-512h-358.4v-51.2h358.4c28.314 0 51.2 22.886 51.2 51.2v548.2l-219.8 219.8h-292.2zM716.8 761.057l117.4-117.4h-117.4zM332.8 490.057l-230.4-256v-51.2h102.4v-153.6h256v153.6h102.4v51.2zM332.8 413.557l161.5-179.5h-84.7v-153.6h-153.6v153.6h-84.7zM102.4 593.325h460.8v-52.068h-460.8v52.068z" />
-<glyph unicode="&#xe940;" glyph-name="microsoft, action-AzureQueue" d="M0.35 448l-0.35 312.074 384 52.144v-364.218zM448 821.518l511.872 74.482v-448h-511.872zM959.998 384l-0.126-448-511.872 72.016v375.984zM384 16.164l-383.688 52.594-0.020 315.242h383.708z" />
+<glyph unicode="&#xe940;" glyph-name="microsoft" d="M0.35 448l-0.35 312.074 384 52.144v-364.218zM448 821.518l511.872 74.482v-448h-511.872zM959.998 384l-0.126-448-511.872 72.016v375.984zM384 16.164l-383.688 52.594-0.020 315.242h383.708z" />
 <glyph unicode="&#xe941;" glyph-name="github" d="M512 960c-282.88 0-512-229.248-512-512 0-226.24 146.688-418.112 350.080-485.76 25.6-4.8 35.008 11.008 35.008 24.64 0 12.16-0.448 44.352-0.64 87.040-142.464-30.912-172.48 68.672-172.48 68.672-23.296 59.136-56.96 74.88-56.96 74.88-46.4 31.744 3.584 31.104 3.584 31.104 51.392-3.584 78.4-52.736 78.4-52.736 45.696-78.272 119.872-55.68 149.12-42.56 4.608 33.088 17.792 55.68 32.448 68.48-113.728 12.8-233.216 56.832-233.216 252.992 0 55.872 19.84 101.568 52.672 137.408-5.76 12.928-23.040 64.96 4.48 135.488 0 0 42.88 13.76 140.8-52.48 40.96 11.392 84.48 17.024 128 17.28 43.52-0.256 87.040-5.888 128-17.28 97.28 66.24 140.16 52.48 140.16 52.48 27.52-70.528 10.24-122.56 5.12-135.488 32.64-35.84 52.48-81.536 52.48-137.408 0-196.672-119.68-240-233.6-252.608 17.92-15.36 34.56-46.72 34.56-94.72 0-68.48-0.64-123.52-0.64-140.16 0-13.44 8.96-29.44 35.2-24.32 204.864 67.136 351.424 259.136 351.424 485.056 0 282.752-229.248 512-512 512z" />
 <glyph unicode="&#xe942;" glyph-name="checkmark" d="M927.936 687.008l-68.288 68.288c-12.608 12.576-32.96 12.576-45.536 0l-409.44-409.44-194.752 196.16c-12.576 12.576-32.928 12.576-45.536 0l-68.288-68.288c-12.576-12.608-12.576-32.96 0-45.536l285.568-287.488c12.576-12.576 32.96-12.576 45.536 0l500.736 500.768c12.576 12.544 12.576 32.96 0 45.536z" />
 <glyph unicode="&#xe943;" glyph-name="elapsed" d="M512.002 766.788v65.212h128v64c0 35.346-28.654 64-64.002 64h-191.998c-35.346 0-64-28.654-64-64v-64h128v-65.212c-214.798-16.338-384-195.802-384-414.788 0-229.75 186.25-416 416-416s416 186.25 416 416c0 218.984-169.202 398.448-384 414.788zM706.276 125.726c-60.442-60.44-140.798-93.726-226.274-93.726s-165.834 33.286-226.274 93.726c-60.44 60.44-93.726 140.8-93.726 226.274s33.286 165.834 93.726 226.274c58.040 58.038 134.448 91.018 216.114 93.548l-21.678-314.020c-1.86-26.29 12.464-37.802 31.836-37.802s33.698 11.512 31.836 37.802l-21.676 314.022c81.666-2.532 158.076-35.512 216.116-93.55 60.44-60.44 93.726-140.8 93.726-226.274s-33.286-165.834-93.726-226.274z" />
 <glyph unicode="&#xe944;" glyph-name="timeout" d="M512 832c-247.424 0-448-200.576-448-448s200.576-448 448-448 448 200.576 448 448-200.576 448-448 448zM512 24c-198.824 0-360 161.178-360 360 0 198.824 161.176 360 360 360 198.822 0 360-161.176 360-360 0-198.822-161.178-360-360-360zM934.784 672.826c16.042 28.052 25.216 60.542 25.216 95.174 0 106.040-85.96 192-192 192-61.818 0-116.802-29.222-151.92-74.596 131.884-27.236 245.206-105.198 318.704-212.578v0zM407.92 885.404c-35.116 45.374-90.102 74.596-151.92 74.596-106.040 0-192-85.96-192-192 0-34.632 9.174-67.122 25.216-95.174 73.5 107.38 186.822 185.342 318.704 212.578zM512 384v256h-64v-320h256v64z" />
 <glyph unicode="&#xe945;" glyph-name="api" d="M592 557.257h-156.8c-57.6 0-105.6 48-105.6 105.6v182.4c0 57.6 48 105.6 105.6 105.6h156.8c57.6 0 105.6-48 105.6-105.6v-182.4c-3.2-57.6-48-105.6-105.6-105.6zM432 886.857c-22.4 0-41.6-19.2-41.6-41.6v-182.4c0-22.4 19.2-41.6 41.6-41.6h156.8c22.4 0 41.6 19.2 41.6 41.6v182.4c0 22.4-19.2 41.6-41.6 41.6h-156.8zM195.2-73.143c-105.6 0-195.2 89.6-195.2 195.2 0 108.8 89.6 195.2 195.2 195.2s195.2-89.6 195.2-195.2c3.2-105.6-86.4-195.2-195.2-195.2zM195.2 256.457c-73.6 0-131.2-60.8-131.2-131.2 0-73.6 60.8-134.4 131.2-134.4 73.6 0 131.2 60.8 131.2 131.2 3.2 73.6-57.6 134.4-131.2 134.4zM828.8-73.143c-108.8 0-195.2 89.6-195.2 195.2 0 108.8 89.6 195.2 195.2 195.2s195.2-89.6 195.2-195.2c0-105.6-89.6-195.2-195.2-195.2zM828.8 256.457c-73.6 0-131.2-60.8-131.2-131.2 0-73.6 60.8-131.2 131.2-131.2 73.6 0 131.2 60.8 131.2 131.2s-60.8 131.2-131.2 131.2zM332.8 310.857c-6.4 0-12.8 0-16 3.2-16 9.6-19.2 28.8-9.6 44.8l83.2 137.6c9.6 16 28.8 19.2 44.8 9.6s19.2-28.8 9.6-44.8l-83.2-137.6c-6.4-6.4-16-12.8-28.8-12.8zM691.2 310.857c-9.6 0-22.4 6.4-28.8 16l-83.2 137.6c-9.6 16-3.2 35.2 9.6 44.8s35.2 3.2 44.8-9.6l83.2-137.6c9.6-16 3.2-35.2-9.6-44.8-6.4-6.4-12.8-6.4-16-6.4z" />
 <glyph unicode="&#xe946;" glyph-name="contents, trigger-ContentChanged" d="M800-73.143h-576c-124.8 0-224 99.2-224 224v576c0 124.8 99.2 224 224 224h576c124.8 0 224-99.2 224-224v-576c0-124.8-99.2-224-224-224zM224 886.857c-89.6 0-160-70.4-160-160v-576c0-89.6 70.4-160 160-160h576c89.6 0 160 70.4 160 160v576c0 89.6-70.4 160-160 160h-576zM480 502.857h-211.2c-57.6 0-105.6 48-105.6 105.6v73.6c0 57.6 48 105.6 105.6 105.6h211.2c57.6 0 105.6-48 105.6-105.6v-73.6c0-57.6-48-105.6-105.6-105.6zM268.8 723.657c-22.4 0-41.6-19.2-41.6-41.6v-73.6c0-22.4 19.2-41.6 41.6-41.6h211.2c22.4 0 41.6 19.2 41.6 41.6v73.6c0 22.4-19.2 41.6-41.6 41.6h-211.2zM828.8 339.657h-633.6c-19.2 0-32 12.8-32 32s12.8 32 32 32h630.4c19.2 0 32-12.8 32-32s-12.8-32-28.8-32zM553.6 173.257h-358.4c-19.2 0-32 12.8-32 32s12.8 32 32 32h355.2c19.2 0 32-12.8 32-32s-12.8-32-28.8-32z" />
-<glyph unicode="&#xe947;" glyph-name="rules, action-Webhook" d="M217.6-41.143c-3.2 0-3.2 0-6.4 0h-3.2c-144 25.6-208 144-208 249.6 0 99.2 57.6 208 185.6 240v147.2c0 19.2 12.8 32 32 32s32-12.8 32-32v-172.8c0-16-12.8-28.8-25.6-32-108.8-16-160-102.4-160-182.4s48-166.4 153.6-185.6h6.4c16-3.2 28.8-19.2 25.6-38.4-3.2-16-16-25.6-32-25.6zM774.4-50.743c0 0 0 0 0 0-102.4 0-211.2 60.8-243.2 185.6h-176c-19.2 0-32 12.8-32 32s12.8 32 32 32h201.6c16 0 28.8-12.8 32-25.6 16-108.8 102.4-156.8 182.4-160 80 0 166.4 48 185.6 153.6v3.2c3.2 16 19.2 28.8 38.4 25.6 16-3.2 28.8-19.2 25.6-38.4v-3.2c-22.4-140.8-140.8-204.8-246.4-204.8zM787.2 272.457c-19.2 0-32 12.8-32 32v176c0 16 12.8 28.8 25.6 32 108.8 16 156.8 102.4 160 182.4 0 80-48 166.4-153.6 185.6h-3.2c-19.2 6.4-32 22.4-28.8 38.4s19.2 28.8 38.4 25.6h3.2c144-25.6 208-144 208-249.6 0-99.2-60.8-208-185.6-240v-150.4c0-16-16-32-32-32zM41.6 704.457c-3.2 0-3.2 0-6.4 0-16 3.2-28.8 19.2-25.6 35.2v3.2c25.6 144 140.8 208 246.4 208 0 0 3.2 0 3.2 0 99.2 0 208-60.8 240-185.6h147.2c19.2 0 32-12.8 32-32s-12.8-32-32-32h-172.8c-16 0-28.8 12.8-32 25.6-16 108.8-102.4 156.8-182.4 160-80 0-166.4-48-185.6-153.6v-3.2c-3.2-16-16-25.6-32-25.6zM256 563.657c-32 0-67.2 12.8-92.8 38.4-51.2 51.2-51.2 134.4 0 185.6 25.6 22.4 57.6 35.2 92.8 35.2s67.2-12.8 92.8-38.4c25.6-25.6 38.4-57.6 38.4-92.8s-12.8-67.2-38.4-92.8c-25.6-22.4-57.6-35.2-92.8-35.2zM256 758.857c-16 0-32-6.4-44.8-19.2-25.6-25.6-25.6-67.2 0-92.8s67.2-25.6 92.8 0c12.8 12.8 19.2 28.8 19.2 48s-6.4 32-19.2 44.8-28.8 19.2-48 19.2zM771.2 77.257c-32 0-67.2 12.8-92.8 38.4-51.2 51.2-51.2 134.4 0 185.6 25.6 25.6 57.6 38.4 92.8 38.4s67.2-12.8 92.8-38.4c25.6-25.6 38.4-57.6 38.4-92.8s-12.8-67.2-38.4-92.8c-28.8-25.6-60.8-38.4-92.8-38.4zM771.2 272.457c-19.2 0-35.2-6.4-48-19.2-25.6-25.6-25.6-67.2 0-92.8s67.2-25.6 92.8 0c12.8 12.8 19.2 28.8 19.2 48s-6.4 35.2-19.2 48-28.8 16-44.8 16zM745.6 563.657c-32 0-67.2 12.8-92.8 38.4s-38.4 57.6-38.4 92.8 12.8 67.2 38.4 92.8c25.6 22.4 60.8 35.2 92.8 35.2s67.2-12.8 92.8-38.4c51.2-51.2 51.2-134.4 0-185.6v0c-25.6-22.4-57.6-35.2-92.8-35.2zM745.6 758.857c-19.2 0-35.2-6.4-48-19.2s-19.2-28.8-19.2-48 6.4-35.2 19.2-48c25.6-25.6 67.2-25.6 92.8 0s25.6 67.2 0 92.8c-9.6 16-25.6 22.4-44.8 22.4zM259.2 77.257c-32 0-67.2 12.8-92.8 38.4s-38.4 57.6-38.4 92.8 12.8 67.2 38.4 92.8c25.6 22.4 57.6 35.2 92.8 35.2s67.2-12.8 92.8-38.4c51.2-51.2 51.2-134.4 0-185.6v0c-25.6-22.4-57.6-35.2-92.8-35.2zM259.2 272.457c-19.2 0-35.2-6.4-48-19.2s-19.2-28.8-19.2-48 6.4-35.2 19.2-48c25.6-25.6 67.2-25.6 92.8 0s25.6 67.2 0 92.8c-9.6 16-25.6 22.4-44.8 22.4z" />
+<glyph unicode="&#xe947;" glyph-name="rules" d="M217.6-41.143c-3.2 0-3.2 0-6.4 0h-3.2c-144 25.6-208 144-208 249.6 0 99.2 57.6 208 185.6 240v147.2c0 19.2 12.8 32 32 32s32-12.8 32-32v-172.8c0-16-12.8-28.8-25.6-32-108.8-16-160-102.4-160-182.4s48-166.4 153.6-185.6h6.4c16-3.2 28.8-19.2 25.6-38.4-3.2-16-16-25.6-32-25.6zM774.4-50.743c0 0 0 0 0 0-102.4 0-211.2 60.8-243.2 185.6h-176c-19.2 0-32 12.8-32 32s12.8 32 32 32h201.6c16 0 28.8-12.8 32-25.6 16-108.8 102.4-156.8 182.4-160 80 0 166.4 48 185.6 153.6v3.2c3.2 16 19.2 28.8 38.4 25.6 16-3.2 28.8-19.2 25.6-38.4v-3.2c-22.4-140.8-140.8-204.8-246.4-204.8zM787.2 272.457c-19.2 0-32 12.8-32 32v176c0 16 12.8 28.8 25.6 32 108.8 16 156.8 102.4 160 182.4 0 80-48 166.4-153.6 185.6h-3.2c-19.2 6.4-32 22.4-28.8 38.4s19.2 28.8 38.4 25.6h3.2c144-25.6 208-144 208-249.6 0-99.2-60.8-208-185.6-240v-150.4c0-16-16-32-32-32zM41.6 704.457c-3.2 0-3.2 0-6.4 0-16 3.2-28.8 19.2-25.6 35.2v3.2c25.6 144 140.8 208 246.4 208 0 0 3.2 0 3.2 0 99.2 0 208-60.8 240-185.6h147.2c19.2 0 32-12.8 32-32s-12.8-32-32-32h-172.8c-16 0-28.8 12.8-32 25.6-16 108.8-102.4 156.8-182.4 160-80 0-166.4-48-185.6-153.6v-3.2c-3.2-16-16-25.6-32-25.6zM256 563.657c-32 0-67.2 12.8-92.8 38.4-51.2 51.2-51.2 134.4 0 185.6 25.6 22.4 57.6 35.2 92.8 35.2s67.2-12.8 92.8-38.4c25.6-25.6 38.4-57.6 38.4-92.8s-12.8-67.2-38.4-92.8c-25.6-22.4-57.6-35.2-92.8-35.2zM256 758.857c-16 0-32-6.4-44.8-19.2-25.6-25.6-25.6-67.2 0-92.8s67.2-25.6 92.8 0c12.8 12.8 19.2 28.8 19.2 48s-6.4 32-19.2 44.8-28.8 19.2-48 19.2zM771.2 77.257c-32 0-67.2 12.8-92.8 38.4-51.2 51.2-51.2 134.4 0 185.6 25.6 25.6 57.6 38.4 92.8 38.4s67.2-12.8 92.8-38.4c25.6-25.6 38.4-57.6 38.4-92.8s-12.8-67.2-38.4-92.8c-28.8-25.6-60.8-38.4-92.8-38.4zM771.2 272.457c-19.2 0-35.2-6.4-48-19.2-25.6-25.6-25.6-67.2 0-92.8s67.2-25.6 92.8 0c12.8 12.8 19.2 28.8 19.2 48s-6.4 35.2-19.2 48-28.8 16-44.8 16zM745.6 563.657c-32 0-67.2 12.8-92.8 38.4s-38.4 57.6-38.4 92.8 12.8 67.2 38.4 92.8c25.6 22.4 60.8 35.2 92.8 35.2s67.2-12.8 92.8-38.4c51.2-51.2 51.2-134.4 0-185.6v0c-25.6-22.4-57.6-35.2-92.8-35.2zM745.6 758.857c-19.2 0-35.2-6.4-48-19.2s-19.2-28.8-19.2-48 6.4-35.2 19.2-48c25.6-25.6 67.2-25.6 92.8 0s25.6 67.2 0 92.8c-9.6 16-25.6 22.4-44.8 22.4zM259.2 77.257c-32 0-67.2 12.8-92.8 38.4s-38.4 57.6-38.4 92.8 12.8 67.2 38.4 92.8c25.6 22.4 57.6 35.2 92.8 35.2s67.2-12.8 92.8-38.4c51.2-51.2 51.2-134.4 0-185.6v0c-25.6-22.4-57.6-35.2-92.8-35.2zM259.2 272.457c-19.2 0-35.2-6.4-48-19.2s-19.2-28.8-19.2-48 6.4-35.2 19.2-48c25.6-25.6 67.2-25.6 92.8 0s25.6 67.2 0 92.8c-9.6 16-25.6 22.4-44.8 22.4z" />
 <glyph unicode="&#xe948;" glyph-name="assets" d="M800-73.143h-576c-124.8 0-224 99.2-224 224v576c0 124.8 99.2 224 224 224h576c124.8 0 224-99.2 224-224v-576c0-124.8-99.2-224-224-224zM224 886.857c-89.6 0-160-70.4-160-160v-576c0-89.6 70.4-160 160-160h576c89.6 0 160 70.4 160 160v576c0 89.6-70.4 160-160 160h-576zM771.2 90.057h-438.4c-12.8 0-22.4 6.4-28.8 19.2s-3.2 25.6 3.2 35.2l300.8 355.2c6.4 6.4 16 12.8 25.6 12.8s19.2-6.4 25.6-12.8l192-275.2c3.2-3.2 3.2-6.4 3.2-9.6 16-44.8 3.2-73.6-6.4-89.6-22.4-32-70.4-35.2-76.8-35.2zM403.2 154.057h371.2c6.4 0 22.4 3.2 25.6 9.6 3.2 3.2 3.2 12.8 0 25.6l-166.4 236.8-230.4-272zM332.8 448.457c-76.8 0-140.8 64-140.8 140.8s64 140.8 140.8 140.8 140.8-64 140.8-140.8-60.8-140.8-140.8-140.8zM332.8 666.057c-41.6 0-76.8-32-76.8-76.8s35.2-76.8 76.8-76.8 76.8 35.2 76.8 76.8-32 76.8-76.8 76.8z" />
 <glyph unicode="&#xe949;" glyph-name="document-lock" d="M358.4 848.457c-28.314 0-51.2-22.886-51.2-51.2v-204.8h51.2v204.8h307.2v-153.6c0-28.314 22.886-51.2 51.2-51.2h153.6v-512h-307.2v-51.2h307.2c28.314 0 51.2 22.886 51.2 51.2v548.2l-219.8 219.8h-292.2zM716.8 761.057l117.4-117.4h-117.4zM153.6 310.857v-281.6h358.4v281.6zM179.2 310.857v76.8c0 84.48 69.12 153.6 153.6 153.6s153.6-69.12 153.6-153.6v-76.8h-51.2v76.8c0 56.32-46.080 102.4-102.4 102.4s-102.4-46.080-102.4-102.4v-76.8z" />
 <glyph unicode="&#xe94a;" glyph-name="type-Tags" d="M295.954 137.249h-94.705c-47.353 0-88.786 41.434-88.786 88.786v491.283c0 47.353 41.434 88.786 88.786 88.786h94.705v59.191h-94.705c-82.867 0-147.977-65.11-147.977-147.977v-491.283c0-82.867 65.11-147.977 147.977-147.977h94.705v59.191zM970.728 486.474c-82.867 171.653-201.249 378.821-272.277 378.821h-112.462v-59.191h112.462c35.514-11.838 136.139-177.572 213.087-337.387-76.948-153.896-177.572-325.549-213.087-337.387h-112.462v-59.191h112.462c71.029 0 183.491 207.168 272.277 384.74l5.919 11.838-5.919 17.757zM266.358 622.659v-260.462h59.191v260.462zM479.422 622.659v-260.462h59.191v260.462z" />
 <glyph unicode="&#xe94b;" glyph-name="orleans" d="M512 924.477l-424.96-242.8v-485.64l424.96-242.8 424.96 242.8v485.64l-424.96 242.8zM512 715.337l245.76-138.24v-276.48l-245.76-138.24-245.76 138.24v276.48l245.76 138.24z" />
-<glyph unicode="&#xe94c;" glyph-name="action-Algolia" d="M512 933.053c-267.728 0-485.053-217.059-485.053-485.053s217.069-485.053 485.053-485.053c267.983 0 485.053 217.314 485.053 485.308s-217.069 484.797-485.053 484.797zM512 106.504c-188.747 0-341.745 152.988-341.745 341.752 0 188.745 152.998 341.733 341.745 341.733 188.765 0 341.745-152.988 341.745-341.733 0-188.763-152.98-341.752-341.745-341.752zM512 719.478v-254.585c0-7.443 7.957-12.405 14.654-8.939l225.774 117.231c5.042 2.659 6.844 8.986 3.96 13.901-46.936 82.204-133.855 138.576-234.205 142.298z" />
-<glyph unicode="&#xe94d;" glyph-name="action-Slack" horiz-adv-x="951" d="M868 507.428c46.857 0 82.857-34.286 82.857-81.143 0-36.571-18.857-62.286-53.143-74.286l-98.286-33.714 32-95.429c2.857-8.571 4-17.714 4-26.857 0-45.143-36.571-82.857-81.714-82.857-36 0-68 22.286-79.429 56.571l-31.429 94.286-177.143-60.571 31.429-93.714c2.857-8.571 4.571-17.714 4.571-26.857 0-44.571-36.571-82.857-82.286-82.857-36 0-67.429 22.286-78.857 56.571l-31.429 93.143-87.429-30.286c-9.143-2.857-18.857-5.143-28.571-5.143-46.286 0-81.143 34.286-81.143 80.571 0 35.429 22.857 67.429 56.571 78.857l89.143 30.286-60 178.857-89.143-30.857c-9.143-2.857-18.286-4.571-27.429-4.571-45.714 0-81.143 34.857-81.143 80.571 0 35.429 22.857 67.429 56.571 78.857l89.714 30.286-30.286 90.857c-2.857 8.571-4.571 17.714-4.571 26.857 0 45.143 36.571 82.857 82.286 82.857 36 0 67.429-22.286 78.857-56.571l30.857-91.429 177.143 60-30.857 91.429c-2.857 8.571-4.571 17.714-4.571 26.857 0 45.143 37.143 82.857 82.286 82.857 36 0 68-22.857 79.429-56.571l30.286-92 92.571 31.429c8 2.286 16 3.429 24.571 3.429 44.571 0 82.857-33.143 82.857-78.857 0-35.429-27.429-65.143-59.429-76l-89.714-30.857 60-180.571 93.714 32c8.571 2.857 17.714 4.571 26.286 4.571zM414.286 357.714l177.143 60-60 180-177.143-61.143z" />
-<glyph unicode="&#xe94e;" glyph-name="action-Fastly" horiz-adv-x="886" d="M341.758 929.668v-55.545h25.806v-83.195c-193.056-37.236-336.992-205.942-337.132-408.544v-0.016c0-229.687 184.814-415.885 412.793-415.885v0c227.979 0 412.793 186.198 412.793 415.885v0c-0.125 202.629-144.065 371.351-334.545 408.173l-2.587 0.416v83.165h25.809v55.545h-202.936zM454.729 590.311c102.973-5.539 185.923-86.823 194.885-189.491v-6.763h-23.479v-23.589h23.485v-6.447c-8.918-102.72-91.882-184.055-194.891-189.594v23.144h-23.444v-23.078c-104.989 6.154-188.976 91.042-194.458 196.868h23.297v23.589h-23.172c6.225 105.086 89.86 189.163 194.333 195.295v-23.195h23.444v23.261zM535.132 492.688l-78.775-73.035c-3.893 1.564-8.405 2.478-13.126 2.494h-0.006c-20.265 0-36.693-16.551-36.693-36.967v0c0-20.417 16.428-36.967 36.693-36.967v0c20.265 0 36.693 16.551 36.693 36.967v0c-0.010 3.753-0.574 7.37-1.613 10.776l0.069-0.262 71.128 80.156-14.369 16.838z" />
 <glyph unicode="&#xe94f;" glyph-name="control-Slug" d="M512 960c-15.36 0-25.6-10.24-25.6-25.6s10.24-25.6 25.6-25.6h128v-870.4h-128c-15.36 0-25.6-10.24-25.6-25.6s10.24-25.6 25.6-25.6h307.2c15.36 0 25.6 10.24 25.6 25.6s-10.24 25.6-25.6 25.6h-128v870.4h128c15.36 0 25.6 10.24 25.6 25.6s-10.24 25.6-25.6 25.6h-307.2zM51.2 755.2c-28.16 0-51.2-23.040-51.2-51.2v-460.8c0-28.16 23.040-51.2 51.2-51.2h537.6v51.2h-512c-15.36 0-25.6 10.24-25.6 25.6v409.6c0 15.36 10.24 25.6 25.6 25.6h512v51.2h-537.6zM742.4 755.2v-51.2h204.8c15.36 0 25.6-10.24 25.6-25.6v-409.6c0-15.36-10.24-25.6-25.6-25.6h-204.8v-51.2h230.4c28.16 0 51.2 23.040 51.2 51.2v460.8c0 28.16-23.040 51.2-51.2 51.2h-230.4zM386.56 353.28c0-12.8-7.68-23.040-20.48-25.6-28.16-10.24-58.88-15.36-92.16-15.36-35.84 0-66.56 10.24-84.48 25.6s-25.6 38.4-25.6 66.56 10.24 51.2 25.6 66.56c17.92 17.92 46.080 23.040 84.48 23.040h69.12v38.4c0 35.84-25.6 53.76-64 53.76-23.040 0-46.080-7.68-69.12-20.48-2.56-2.56-5.12-2.56-10.24-2.56-10.24 0-20.48 7.68-20.48 20.48 0 7.68 2.56 12.8 10.24 17.92 30.72 20.48 61.44 25.6 92.16 25.6 56.32 0 104.96-30.72 104.96-92.16v-181.76zM345.6 458.24h-69.12c-61.44 0-69.12-28.16-69.12-53.76s7.68-56.32 69.12-56.32c23.040 0 46.080 2.56 69.12 10.24v99.84z" />
 <glyph unicode="&#xe950;" glyph-name="clock" d="M658.744 210.744l-210.744 210.746v282.51h128v-229.49l173.256-173.254zM512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512 64c-212.078 0-384 171.922-384 384s171.922 384 384 384c212.078 0 384-171.922 384-384s-171.922-384-384-384z" />
 <glyph unicode="&#xe951;" glyph-name="circle" d="M1024 448c0-282.77-229.23-512-512-512s-512 229.23-512 512c0 282.77 229.23 512 512 512s512-229.23 512-512z" />
-<glyph unicode="&#xe952;" glyph-name="action-ElasticSearch" horiz-adv-x="1071" d="M491.055 313.184h-338.784c-12.301 39.564-19.283 81.787-19.283 125.673s6.649 86.109 19.283 125.673h557.548c69.153 0 125.008-56.519 125.008-126.005 0-69.153-55.855-125.34-125.008-125.34h-218.764zM475.096 271.293h-306.868c32.582-74.473 86.442-137.974 153.6-182.192v0c66.161-43.553 145.288-69.153 230.4-69.153 145.288 0 273.288 74.14 348.426 186.514-38.566 39.896-92.758 64.831-152.603 64.831h-272.956zM748.052 606.421c59.844 0 114.036 24.935 152.603 64.831-75.138 112.374-203.138 186.514-348.758 186.514-85.112 0-164.239-25.6-230.4-69.153v0c-67.158-44.551-121.018-107.719-153.6-182.192h580.156z" />
 <glyph unicode="&#xe953;" glyph-name="spinner" d="M192 448c0 12.18 0.704 24.196 2.030 36.022l-184.98 60.104c-5.916-31.14-9.050-63.264-9.050-96.126 0-147.23 62.166-279.922 161.654-373.324l114.284 157.296c-52.124 56.926-83.938 132.758-83.938 216.028zM832 448c0-83.268-31.812-159.102-83.938-216.028l114.284-157.296c99.488 93.402 161.654 226.094 161.654 373.324 0 32.862-3.132 64.986-9.048 96.126l-184.98-60.104c1.324-11.828 2.028-23.842 2.028-36.022zM576 761.592c91.934-18.662 169.544-76.742 214.45-155.826l184.978 60.102c-73.196 155.42-222.24 268.060-399.428 290.156v-194.432zM233.55 605.768c44.906 79.084 122.516 137.164 214.45 155.826v194.43c-177.188-22.096-326.23-134.736-399.426-290.154l184.976-60.102zM644.556 156.672c-40.39-18.408-85.272-28.672-132.556-28.672s-92.166 10.264-132.554 28.67l-114.292-157.31c73.206-40.366 157.336-63.36 246.846-63.36s173.64 22.994 246.848 63.36l-114.292 157.312z" />
 <glyph unicode="&#xe954;" glyph-name="hour-glass" d="M728.992 448c137.754 87.334 231.008 255.208 231.008 448 0 21.676-1.192 43.034-3.478 64h-889.042c-2.29-20.968-3.48-42.326-3.48-64 0-192.792 93.254-360.666 231.006-448-137.752-87.334-231.006-255.208-231.006-448 0-21.676 1.19-43.034 3.478-64h889.042c2.288 20.966 3.478 42.324 3.478 64 0.002 192.792-93.252 360.666-231.006 448zM160 0c0 186.912 80.162 345.414 224 397.708v100.586c-143.838 52.29-224 210.792-224 397.706v0h704c0-186.914-80.162-345.416-224-397.706v-100.586c143.838-52.294 224-210.796 224-397.708h-704zM619.626 290.406c-71.654 40.644-75.608 93.368-75.626 125.366v64.228c0 31.994 3.804 84.914 75.744 125.664 38.504 22.364 71.808 56.348 97.048 98.336h-409.582c25.266-42.032 58.612-76.042 97.166-98.406 71.654-40.644 75.606-93.366 75.626-125.366v-64.228c0-31.992-3.804-84.914-75.744-125.664-72.622-42.18-126.738-125.684-143.090-226.336h501.67c-16.364 100.708-70.53 184.248-143.212 226.406z" />
 <glyph unicode="&#xe955;" glyph-name="exclamation" horiz-adv-x="366" d="M292.571 237.714v-128c0-20-16.571-36.571-36.571-36.571h-146.286c-20 0-36.571 16.571-36.571 36.571v128c0 20 16.571 36.571 36.571 36.571h146.286c20 0 36.571-16.571 36.571-36.571zM309.714 841.143l-16-438.857c-0.571-20-17.714-36.571-37.714-36.571h-146.286c-20 0-37.143 16.571-37.714 36.571l-16 438.857c-0.571 20 15.429 36.571 35.429 36.571h182.857c20 0 36-16.571 35.429-36.571z" />
 <glyph unicode="&#xe956;" glyph-name="type-Array" d="M832 682.057h-657.92c-15.36 0-25.6 10.24-25.6 25.6s10.24 25.6 25.6 25.6h657.92c15.36 0 25.6-10.24 25.6-25.6s-10.24-25.6-25.6-25.6zM832 497.737h-409.6c-15.36 0-25.6 10.24-25.6 25.6s10.24 25.6 25.6 25.6h409.6c15.36 0 25.6-10.24 25.6-25.6s-10.24-25.6-25.6-25.6zM832 308.297h-409.6c-15.36 0-25.6 10.24-25.6 25.6s10.24 25.6 25.6 25.6h409.6c15.36 0 25.6-10.24 25.6-25.6s-10.24-25.6-25.6-25.6zM832 118.857h-409.6c-15.36 0-25.6 10.24-25.6 25.6s10.24 25.6 25.6 25.6h409.6c15.36 0 25.6-10.24 25.6-25.6s-10.24-25.6-25.6-25.6z" />
 <glyph unicode="&#xe957;" glyph-name="multiple-content" horiz-adv-x="1029" d="M777.143 4.571h-525.714c-89.143 0-160 70.857-160 160v297.143c0 89.143 70.857 160 160 160h525.714c89.143 0 160-70.857 160-160v-297.143c0-89.143-70.857-160-160-160zM251.429 576c-64 0-114.286-50.286-114.286-114.286v-297.143c0-64 50.286-114.286 114.286-114.286h525.714c64 0 114.286 50.286 114.286 114.286v297.143c0 64-50.286 114.286-114.286 114.286h-525.714zM731.429 370.286h-457.143c-13.714 0-22.857 9.143-22.857 22.857s9.143 22.857 22.857 22.857h457.143c13.714 0 22.857-9.143 22.857-22.857s-9.143-22.857-22.857-22.857zM502.857 210.286h-228.571c-13.714 0-22.857 9.143-22.857 22.857s9.143 22.857 22.857 22.857h228.571c13.714 0 22.857-9.143 22.857-22.857s-9.143-22.857-22.857-22.857zM777.143 690.286h-525.714c-13.714 0-22.857 9.143-22.857 22.857s9.143 22.857 22.857 22.857h525.714c13.714 0 22.857-9.143 22.857-22.857s-9.143-22.857-22.857-22.857zM685.714 804.571h-342.857c-13.714 0-22.857 9.143-22.857 22.857s9.143 22.857 22.857 22.857h342.857c13.714 0 22.857-9.143 22.857-22.857s-9.143-22.857-22.857-22.857z" />
 <glyph unicode="&#xe958;" glyph-name="single-content" horiz-adv-x="1029" d="M251.429 850.277c-87.896 0-160-72.104-160-160v-525.714c0-87.896 72.104-160 160-160h525.714c87.896 0 160 72.104 160 160v525.714c0 87.896-72.104 160-160 160zM251.429 804.562h525.714c62.961 0 114.286-51.325 114.286-114.286v-525.714c0-62.961-51.325-114.286-114.286-114.286h-525.714c-62.961 0-114.286 51.325-114.286 114.286v525.714c0 62.961 51.325 114.286 114.286 114.286zM251.429 644.562c-0.096 0.001-0.21 0.002-0.323 0.002-12.625 0-22.859-10.235-22.859-22.859s10.235-22.859 22.859-22.859c0.114 0 0.227 0.001 0.34 0.002h525.697c0.096-0.001 0.21-0.002 0.323-0.002 12.625 0 22.859 10.235 22.859 22.859s-10.235 22.859-22.859 22.859c-0.114 0-0.227-0.001-0.34-0.002h0.017zM251.429 507.419c-0.096 0.001-0.21 0.002-0.323 0.002-12.625 0-22.859-10.235-22.859-22.859s10.235-22.859 22.859-22.859c0.114 0 0.227 0.001 0.34 0.002h297.126c0.096-0.001 0.21-0.002 0.323-0.002 12.625 0 22.859 10.235 22.859 22.859s-10.235 22.859-22.859 22.859c-0.114 0-0.227-0.001-0.34-0.002h0.017zM251.429 370.277c-0.096 0.001-0.21 0.002-0.323 0.002-12.625 0-22.859-10.235-22.859-22.859s10.235-22.859 22.859-22.859c0.114 0 0.227 0.001 0.34 0.002h297.126c0.096-0.001 0.21-0.002 0.323-0.002 12.625 0 22.859 10.235 22.859 22.859s-10.235 22.859-22.859 22.859c-0.114 0-0.227-0.001-0.34-0.002h0.017z" />
-<glyph unicode="&#xe959;" glyph-name="action-Medium" d="M121.429 688.64c1.28 12.587-3.541 25.003-12.928 33.451l-95.573 115.2v17.195h296.832l229.461-503.253 201.728 503.253h283.051v-17.195l-81.792-78.379c-7.040-5.376-10.539-14.208-9.088-22.955v-576c-1.451-8.704 2.048-17.493 9.088-22.912l79.787-78.379v-17.195h-401.493v17.195l82.645 80.299c8.107 8.107 8.107 10.496 8.107 22.955v465.536l-229.973-584.021h-31.019l-267.733 584.021v-391.424c-2.219-16.469 3.243-33.024 14.805-44.928l107.52-130.56v-17.152h-304.853v17.195l107.52 130.56c11.52 11.861 16.64 28.587 13.909 44.885v452.608z" />
 <glyph unicode="&#xe95a;" glyph-name="support" d="M726 426.667c0-24-20-42-44-42h-426l-170-172v598c0 24 18 42 42 42h554c24 0 44-18 44-42v-384zM896 682.667c24 0 42-18 42-42v-640l-170 170h-470c-24 0-42 18-42 42v86h554v384h86z" />
 <glyph unicode="&#xe95b;" glyph-name="backup" d="M512 810.667c212 0 384-172 384-384s-172-384-384-384c-88 0-170 30-234 80l60 60c50-34 110-54 174-54 166 0 298 132 298 298s-132 298-298 298-298-132-298-298h128l-172-170-170 170h128c0 212 172 384 384 384zM598 426.667c0-46-40-86-86-86s-86 40-86 86 40 86 86 86 86-40 86-86z" />
-<glyph unicode="&#xe95c;" glyph-name="twitter, action-Tweet" d="M1024 733.6c-37.6-16.8-78.2-28-120.6-33 43.4 26 76.6 67.2 92.4 116.2-40.6-24-85.6-41.6-133.4-51-38.4 40.8-93 66.2-153.4 66.2-116 0-210-94-210-210 0-16.4 1.8-32.4 5.4-47.8-174.6 8.8-329.4 92.4-433 219.6-18-31-28.4-67.2-28.4-105.6 0-72.8 37-137.2 93.4-174.8-34.4 1-66.8 10.6-95.2 26.2 0-0.8 0-1.8 0-2.6 0-101.8 72.4-186.8 168.6-206-17.6-4.8-36.2-7.4-55.4-7.4-13.6 0-26.6 1.4-39.6 3.8 26.8-83.4 104.4-144.2 196.2-146-72-56.4-162.4-90-261-90-17 0-33.6 1-50.2 3 93.2-59.8 203.6-94.4 322.2-94.4 386.4 0 597.8 320.2 597.8 597.8 0 9.2-0.2 18.2-0.6 27.2 41 29.4 76.6 66.4 104.8 108.6z" />
+<glyph unicode="&#xe95c;" glyph-name="twitter" d="M1024 733.6c-37.6-16.8-78.2-28-120.6-33 43.4 26 76.6 67.2 92.4 116.2-40.6-24-85.6-41.6-133.4-51-38.4 40.8-93 66.2-153.4 66.2-116 0-210-94-210-210 0-16.4 1.8-32.4 5.4-47.8-174.6 8.8-329.4 92.4-433 219.6-18-31-28.4-67.2-28.4-105.6 0-72.8 37-137.2 93.4-174.8-34.4 1-66.8 10.6-95.2 26.2 0-0.8 0-1.8 0-2.6 0-101.8 72.4-186.8 168.6-206-17.6-4.8-36.2-7.4-55.4-7.4-13.6 0-26.6 1.4-39.6 3.8 26.8-83.4 104.4-144.2 196.2-146-72-56.4-162.4-90-261-90-17 0-33.6 1-50.2 3 93.2-59.8 203.6-94.4 322.2-94.4 386.4 0 597.8 320.2 597.8 597.8 0 9.2-0.2 18.2-0.6 27.2 41 29.4 76.6 66.4 104.8 108.6z" />
 <glyph unicode="&#xe95d;" glyph-name="star-full" d="M1024 562.95l-353.78 51.408-158.22 320.582-158.216-320.582-353.784-51.408 256-249.538-60.432-352.352 316.432 166.358 316.432-166.358-60.434 352.352 256.002 249.538z" />
 <glyph unicode="&#xe95e;" glyph-name="star-empty" d="M1024 562.95l-353.78 51.408-158.22 320.582-158.216-320.582-353.784-51.408 256-249.538-60.432-352.352 316.432 166.358 316.432-166.358-60.434 352.352 256.002 249.538zM512 206.502l-223.462-117.48 42.676 248.83-180.786 176.222 249.84 36.304 111.732 226.396 111.736-226.396 249.836-36.304-180.788-176.222 42.678-248.83-223.462 117.48z" />
-<glyph unicode="&#xe95f;" glyph-name="action-Discourse" d="M516.375 960c-280.342 0-516.375-225.198-516.375-503.070v-520.93l516.278 0.501c280.342 0 507.722 233.87 507.722 511.644s-227.581 511.855-507.625 511.855zM527.127 766.031c60.539-1.361 116.545-19.455 163.822-49.771l-1.231 0.74c1.255-0.811 1.433-0.931 1.61-1.052l-1.066 0.686c9.209-5.848 16.936-11.303 24.393-17.085l-0.691 0.516c1.847-1.424 3.017-2.351 4.181-3.287l-0.584 0.455c6.987-5.558 13.161-10.888 19.117-16.446l-0.159 0.147c2.158-2.024 4.147-3.94 6.111-5.881l-0.005 0.005c4.962-4.875 9.74-9.891 14.349-15.059l0.293-0.334c2.34-2.624 4.921-5.64 7.445-8.705l0.449-0.562c1.711-1.93 3.701-4.249 5.657-6.598l0.429-0.53c-0.418 0.387-1.038 0.952-1.661 1.516l-0.245 0.218c3.336-4.033 6.991-8.738 10.511-13.546l0.63-0.903c0.029-0.029 0.036-0.036 0.042-0.042l-0.023 0.023c-0.306 0.565 0.151-0.158 0.604-0.883l0.776-1.333c4.635-6.582 9.622-14.446 14.255-22.537l0.814-1.546c4.177-7.246 8.751-16.326 12.879-25.645l0.79-2.001c16.218-36.345 25.659-78.731 25.659-123.301 0-172.151-140.846-311.706-314.589-311.706-46.906 0-91.415 10.172-131.402 28.411l1.955-0.799-204.493-45.776 56.952 181.504c-2.82 4.996-6.227 11.776-9.386 18.691l-0.802 1.962c-2.441 5.14-5.422 12.383-8.131 19.756l-0.696 2.168c-0.067-0.083-0.856 1.957-1.625 4.007l-0.709 2.158c-2.628 7.191-5.486 16.773-7.88 26.535l-0.442 2.132c-5.397 21.611-8.492 46.422-8.492 71.949 0 172.205 140.891 311.805 314.688 311.805 2.075 0 4.144-0.020 6.209-0.059l-0.309 0.005z" />
 <glyph unicode="&#xe9ca;" glyph-name="earth" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512-0.002c-62.958 0-122.872 13.012-177.23 36.452l233.148 262.29c5.206 5.858 8.082 13.422 8.082 21.26v96c0 17.674-14.326 32-32 32-112.99 0-232.204 117.462-233.374 118.626-6 6.002-14.14 9.374-22.626 9.374h-128c-17.672 0-32-14.328-32-32v-192c0-12.122 6.848-23.202 17.69-28.622l110.31-55.156v-187.886c-116.052 80.956-192 215.432-192 367.664 0 68.714 15.49 133.806 43.138 192h116.862c8.488 0 16.626 3.372 22.628 9.372l128 128c6 6.002 9.372 14.14 9.372 22.628v77.412c40.562 12.074 83.518 18.588 128 18.588 70.406 0 137.004-16.26 196.282-45.2-4.144-3.502-8.176-7.164-12.046-11.036-36.266-36.264-56.236-84.478-56.236-135.764s19.97-99.5 56.236-135.764c36.434-36.432 85.218-56.264 135.634-56.26 3.166 0 6.342 0.080 9.518 0.236 13.814-51.802 38.752-186.656-8.404-372.334-0.444-1.744-0.696-3.488-0.842-5.224-81.324-83.080-194.7-134.656-320.142-134.656z" />
 <glyph unicode="&#xf00a;" glyph-name="grid" d="M292.571 237.714v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM292.571 530.286v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM658.286 237.714v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM292.571 822.857v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM658.286 530.286v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM1024 237.714v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM658.286 822.857v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM1024 530.286v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM1024 822.857v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857z" />
 <glyph unicode="&#xf0c9;" glyph-name="list" horiz-adv-x="878" d="M877.714 182.857v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571zM877.714 475.428v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571zM877.714 768v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571z" />

src/Squidex/app/theme/icomoon/style.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?it2nng');
+  src:  url('fonts/icomoon.eot?6ptey9');
-  src:  url('fonts/icomoon.eot?it2nng#iefix') format('embedded-opentype'),
+  src:  url('fonts/icomoon.eot?6ptey9#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?it2nng') format('truetype'),
+    url('fonts/icomoon.ttf?6ptey9') format('truetype'),
-    url('fonts/icomoon.woff?it2nng') format('woff'),
+    url('fonts/icomoon.woff?6ptey9') format('woff'),
-    url('fonts/icomoon.svg?it2nng#icomoon') format('svg');
+    url('fonts/icomoon.svg?6ptey9#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -24,24 +24,132 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-action-Discourse:before {
+.icon-star-full:before {
-  content: "\e95f";
+  content: "\e95d";
+}
+.icon-star-empty:before {
+  content: "\e95e";
+}
+.icon-twitter:before {
+  content: "\e95c";
+}
+.icon-hour-glass:before {
+  content: "\e954";
+}
+.icon-spinner:before {
+  content: "\e953";
+}
+.icon-clock:before {
+  content: "\e950";
+}
+.icon-bin2:before {
+  content: "\e902";
+}
+.icon-earth:before {
+  content: "\e9ca";
+}
+.icon-elapsed:before {
+  content: "\e943";
+}
+.icon-google:before {
+  content: "\e93b";
+}
+.icon-lock:before {
+  content: "\e934";
+}
+.icon-microsoft:before {
+  content: "\e940";
+}
+.icon-pause:before {
+  content: "\e92f";
+}
+.icon-play:before {
+  content: "\e930";
+}
+.icon-reset:before {
+  content: "\e92e";
+}
+.icon-settings2:before {
+  content: "\e92d";
+}
+.icon-timeout:before {
+  content: "\e944";
+}
+.icon-unlocked:before {
+  content: "\e933";
+}
+.icon-backup:before {
+  content: "\e95b";
+}
+.icon-support:before {
+  content: "\e95a";
+}
+.icon-control-RichText:before {
+  content: "\e939";
+}
+.icon-download:before {
+  content: "\e93e";
+}
+.icon-logo:before {
+  content: "\e91c";
+}
+.icon-media:before {
+  content: "\e91d";
+}
+.icon-type-Assets:before {
+  content: "\e91d";
+}
+.icon-trigger-AssetChanged:before {
+  content: "\e91d";
+}
+.icon-more:before {
+  content: "\e91e";
+}
+.icon-dots:before {
+  content: "\e91e";
+}
+.icon-pencil:before {
+  content: "\e91f";
+}
+.icon-reference:before {
+  content: "\e920";
+}
+.icon-schemas:before {
+  content: "\e921";
+}
+.icon-search:before {
+  content: "\e922";
+}
+.icon-settings:before {
+  content: "\e923";
+}
+.icon-type-Boolean:before {
+  content: "\e924";
 }
-.icon-action-Medium:before {
+.icon-type-DateTime:before {
-  content: "\e959";
+  content: "\e925";
+}
+.icon-type-Json:before {
+  content: "\e91a";
+}
+.icon-json:before {
+  content: "\e91a";
+}
+.icon-type-Number:before {
+  content: "\e926";
+}
+.icon-type-String:before {
+  content: "\e927";
+}
+.icon-user:before {
+  content: "\e928";
 }
 .icon-circle:before {
   content: "\e951";
 }
-.icon-action-Fastly:before {
-  content: "\e94e";
-}
 .icon-control-Slug:before {
   content: "\e94f";
 }
-.icon-action-Algolia:before {
-  content: "\e94c";
-}
 .icon-type-Tags:before {
   content: "\e94a";
 }
@@ -189,78 +297,6 @@
 .icon-user:before {
   content: "\e928";
 }
-.icon-star-full:before {
-  content: "\e95d";
-}
-.icon-star-empty:before {
-  content: "\e95e";
-}
-.icon-twitter:before {
-  content: "\e95c";
-}
-.icon-action-Tweet:before {
-  content: "\e95c";
-}
-.icon-hour-glass:before {
-  content: "\e954";
-}
-.icon-spinner:before {
-  content: "\e953";
-}
-.icon-clock:before {
-  content: "\e950";
-}
-.icon-bin2:before {
-  content: "\e902";
-}
-.icon-earth:before {
-  content: "\e9ca";
-}
-.icon-elapsed:before {
-  content: "\e943";
-}
-.icon-google:before {
-  content: "\e93b";
-}
-.icon-lock:before {
-  content: "\e934";
-}
-.icon-microsoft:before {
-  content: "\e940";
-}
-.icon-action-AzureQueue:before {
-  content: "\e940";
-}
-.icon-pause:before {
-  content: "\e92f";
-}
-.icon-play:before {
-  content: "\e930";
-}
-.icon-reset:before {
-  content: "\e92e";
-}
-.icon-settings2:before {
-  content: "\e92d";
-}
-.icon-timeout:before {
-  content: "\e944";
-}
-.icon-unlocked:before {
-  content: "\e933";
-}
-.icon-backup:before {
-  content: "\e95b";
-}
-.icon-support:before {
-  content: "\e95a";
-}
-.icon-control-RichText:before {
-  content: "\e939";
-}
-.icon-download:before {
-  content: "\e93e";
-}
 .icon-single-content:before {
   content: "\e958";
 }
@@ -273,12 +309,6 @@
 .icon-exclamation:before {
   content: "\e955";
 }
-.icon-action-ElasticSearch:before {
-  content: "\e952";
-}
-.icon-action-Slack:before {
-  content: "\e94d";
-}
 .icon-orleans:before {
   content: "\e94b";
 }
@@ -348,8 +378,11 @@
 .icon-rules:before {
   content: "\e947";
 }
-.icon-action-Webhook:before {
+.icon-browser:before {
-  content: "\e947";
+  content: "\e935";
+}
+.icon-checkmark:before {
+  content: "\e942";
 }
 .icon-browser:before {
   content: "\e935";

src/Squidex/app/theme/theme.scss

@@ -16,5 +16,4 @@
 @import '_panels';
 @import '_forms';
 @import '_lists';
-@import '_rules';
 @import '_static';

tests/Squidex.Domain.Apps.Entities.Tests/Rules/Guards/GuardRuleTests.cs

@@ -14,7 +14,6 @@ using Squidex.Domain.Apps.Core.Rules.Triggers;
 using Squidex.Domain.Apps.Entities.Rules.Commands;
 using Squidex.Domain.Apps.Entities.Schemas;
 using Squidex.Domain.Apps.Entities.TestHelpers;
-using Squidex.Domain.Apps.Rules.Action.Webhook;
 using Squidex.Infrastructure;
 using Xunit;
 

tests/Squidex.Domain.Apps.Entities.Tests/Rules/RuleEnqueuerTests.cs

@@ -17,7 +17,6 @@ using Squidex.Domain.Apps.Core.Rules;
 using Squidex.Domain.Apps.Core.Rules.Triggers;
 using Squidex.Domain.Apps.Entities.Rules.Repositories;
 using Squidex.Domain.Apps.Events.Contents;
-using Squidex.Domain.Apps.Rules.Action.Webhook;
 using Squidex.Infrastructure;
 using Squidex.Infrastructure.EventSourcing;
 using Xunit;

tests/Squidex.Domain.Apps.Entities.Tests/Rules/RuleGrainTests.cs

@@ -14,7 +14,6 @@ using Squidex.Domain.Apps.Entities.Rules.Commands;
 using Squidex.Domain.Apps.Entities.Rules.State;
 using Squidex.Domain.Apps.Entities.TestHelpers;
 using Squidex.Domain.Apps.Events.Rules;
-using Squidex.Domain.Apps.Rules.Action.Webhook;
 using Squidex.Infrastructure;
 using Squidex.Infrastructure.Commands;
 using Squidex.Infrastructure.Log;