diff --git a/extensions/Squidex.Extensions/Actions/AzureQueue/AzureQueueAction.cs b/extensions/Squidex.Extensions/Actions/AzureQueue/AzureQueueAction.cs index b48758d01..22919d3ce 100644 --- a/extensions/Squidex.Extensions/Actions/AzureQueue/AzureQueueAction.cs +++ b/extensions/Squidex.Extensions/Actions/AzureQueue/AzureQueueAction.cs @@ -15,6 +15,7 @@ using Squidex.Infrastructure.Validation; namespace Squidex.Extensions.Actions.AzureQueue { [RuleAction( + Title = "Azure Queue", IconImage = "", IconColor = "#0d9bf9", Display = "Send to Azure Queue", diff --git a/extensions/Squidex.Extensions/Actions/Discourse/DiscourseAction.cs b/extensions/Squidex.Extensions/Actions/Discourse/DiscourseAction.cs index 69323a3bc..3c87cec0b 100644 --- a/extensions/Squidex.Extensions/Actions/Discourse/DiscourseAction.cs +++ b/extensions/Squidex.Extensions/Actions/Discourse/DiscourseAction.cs @@ -14,6 +14,7 @@ using Squidex.Infrastructure.Validation; namespace Squidex.Extensions.Actions.Discourse { [RuleAction( + Title = "Discourse", IconImage = "", IconColor = "#eB6121", Display = "Post to discourse", diff --git a/extensions/Squidex.Extensions/Actions/ElasticSearch/ElasticSearchAction.cs b/extensions/Squidex.Extensions/Actions/ElasticSearch/ElasticSearchAction.cs index 06bee097a..5446b68c1 100644 --- a/extensions/Squidex.Extensions/Actions/ElasticSearch/ElasticSearchAction.cs +++ b/extensions/Squidex.Extensions/Actions/ElasticSearch/ElasticSearchAction.cs @@ -14,9 +14,10 @@ using Squidex.Infrastructure.Validation; namespace Squidex.Extensions.Actions.ElasticSearch { [RuleAction( + Title = "Elasticsearch", IconImage = "", IconColor = "#1e5470", - Display = "Populate ElasticSearch index", + Display = "Populate Elasticsearch index", Description = "Populate and synchronize indexes in ElasticSearch for full text search.", ReadMore = "https://www.elastic.co/")] public sealed class ElasticSearchAction : RuleAction diff --git a/extensions/Squidex.Extensions/Actions/Email/EmailAction.cs b/extensions/Squidex.Extensions/Actions/Email/EmailAction.cs index 2a7ebf744..4a35b03d4 100644 --- a/extensions/Squidex.Extensions/Actions/Email/EmailAction.cs +++ b/extensions/Squidex.Extensions/Actions/Email/EmailAction.cs @@ -12,6 +12,7 @@ using Squidex.Domain.Apps.Core.Rules; namespace Squidex.Extensions.Actions.Email { [RuleAction( + Title = "Email", IconImage = "", IconColor = "#333300", Display = "Send an email", diff --git a/extensions/Squidex.Extensions/Actions/Fastly/FastlyAction.cs b/extensions/Squidex.Extensions/Actions/Fastly/FastlyAction.cs index d227e8ce1..84ed66081 100644 --- a/extensions/Squidex.Extensions/Actions/Fastly/FastlyAction.cs +++ b/extensions/Squidex.Extensions/Actions/Fastly/FastlyAction.cs @@ -12,6 +12,7 @@ using Squidex.Domain.Apps.Core.Rules; namespace Squidex.Extensions.Actions.Fastly { [RuleAction( + Title = "Fastly", IconImage = "", IconColor = "#e23335", Display = "Purge fastly cache", diff --git a/extensions/Squidex.Extensions/Actions/Kafka/KafkaAction.cs b/extensions/Squidex.Extensions/Actions/Kafka/KafkaAction.cs index a10cc5a0d..e1866bd99 100644 --- a/extensions/Squidex.Extensions/Actions/Kafka/KafkaAction.cs +++ b/extensions/Squidex.Extensions/Actions/Kafka/KafkaAction.cs @@ -12,6 +12,7 @@ using Squidex.Domain.Apps.Core.Rules; namespace Squidex.Extensions.Actions.Kafka { [RuleAction( + Title = "Kafka", IconImage = "", IconColor = "#404244", Display = "Push to kafka", diff --git a/extensions/Squidex.Extensions/Actions/Medium/MediumAction.cs b/extensions/Squidex.Extensions/Actions/Medium/MediumAction.cs index a915c9e0a..308a4bc6d 100644 --- a/extensions/Squidex.Extensions/Actions/Medium/MediumAction.cs +++ b/extensions/Squidex.Extensions/Actions/Medium/MediumAction.cs @@ -12,6 +12,7 @@ using Squidex.Domain.Apps.Core.Rules; namespace Squidex.Extensions.Actions.Medium { [RuleAction( + Title = "Medium", IconImage = "", IconColor = "#00ab6c", Display = "Post to Medium", diff --git a/extensions/Squidex.Extensions/Actions/Prerender/PrerenderAction.cs b/extensions/Squidex.Extensions/Actions/Prerender/PrerenderAction.cs index 44285379f..be5708a5f 100644 --- a/extensions/Squidex.Extensions/Actions/Prerender/PrerenderAction.cs +++ b/extensions/Squidex.Extensions/Actions/Prerender/PrerenderAction.cs @@ -12,6 +12,7 @@ using Squidex.Domain.Apps.Core.Rules; namespace Squidex.Extensions.Actions.Prerender { [RuleAction( + Title = "Prerender", IconImage = "", IconColor = "#2c3e50", Display = "Recache URL", diff --git a/extensions/Squidex.Extensions/Actions/Slack/SlackAction.cs b/extensions/Squidex.Extensions/Actions/Slack/SlackAction.cs index 6b3d2c208..eca2cea7c 100644 --- a/extensions/Squidex.Extensions/Actions/Slack/SlackAction.cs +++ b/extensions/Squidex.Extensions/Actions/Slack/SlackAction.cs @@ -14,6 +14,7 @@ using Squidex.Infrastructure.Validation; namespace Squidex.Extensions.Actions.Slack { [RuleAction( + Title = "Slack", IconImage = "", IconColor = "#5c3a58", Display = "Send to Slack", diff --git a/extensions/Squidex.Extensions/Actions/Twitter/TweetAction.cs b/extensions/Squidex.Extensions/Actions/Twitter/TweetAction.cs index 67bb45e63..fc7a69be9 100644 --- a/extensions/Squidex.Extensions/Actions/Twitter/TweetAction.cs +++ b/extensions/Squidex.Extensions/Actions/Twitter/TweetAction.cs @@ -12,6 +12,7 @@ using Squidex.Domain.Apps.Core.Rules; namespace Squidex.Extensions.Actions.Twitter { [RuleAction( + Title = "Twitter", IconImage = "", IconColor = "#1da1f2", Display = "Tweet", diff --git a/extensions/Squidex.Extensions/Actions/Webhook/WebhookAction.cs b/extensions/Squidex.Extensions/Actions/Webhook/WebhookAction.cs index 522d12625..7ca176004 100644 --- a/extensions/Squidex.Extensions/Actions/Webhook/WebhookAction.cs +++ b/extensions/Squidex.Extensions/Actions/Webhook/WebhookAction.cs @@ -13,6 +13,7 @@ using Squidex.Domain.Apps.Core.Rules; namespace Squidex.Extensions.Actions.Webhook { [RuleAction( + Title = "Webhook", IconImage = "", IconColor = "#4bb958", Display = "Send webhook", diff --git a/src/Squidex.Domain.Apps.Core.Operations/HandleRules/RuleActionAttribute.cs b/src/Squidex.Domain.Apps.Core.Operations/HandleRules/RuleActionAttribute.cs index 31c1f2368..6639b7ac0 100644 --- a/src/Squidex.Domain.Apps.Core.Operations/HandleRules/RuleActionAttribute.cs +++ b/src/Squidex.Domain.Apps.Core.Operations/HandleRules/RuleActionAttribute.cs @@ -12,6 +12,8 @@ namespace Squidex.Domain.Apps.Core.HandleRules [AttributeUsage(AttributeTargets.Class, Inherited = false)] public sealed class RuleActionAttribute : Attribute { + public string Title { get; set; } + public string ReadMore { get; set; } public string IconImage { get; set; } diff --git a/src/Squidex.Domain.Apps.Core.Operations/HandleRules/RuleActionDefinition.cs b/src/Squidex.Domain.Apps.Core.Operations/HandleRules/RuleActionDefinition.cs index 97a9110d1..f152b2436 100644 --- a/src/Squidex.Domain.Apps.Core.Operations/HandleRules/RuleActionDefinition.cs +++ b/src/Squidex.Domain.Apps.Core.Operations/HandleRules/RuleActionDefinition.cs @@ -14,6 +14,8 @@ namespace Squidex.Domain.Apps.Core.HandleRules { public Type Type { get; set; } + public string Title { get; set; } + public string ReadMore { get; set; } public string IconImage { get; set; } diff --git a/src/Squidex.Domain.Apps.Core.Operations/HandleRules/RuleRegistry.cs b/src/Squidex.Domain.Apps.Core.Operations/HandleRules/RuleRegistry.cs index c969205b2..8666a5206 100644 --- a/src/Squidex.Domain.Apps.Core.Operations/HandleRules/RuleRegistry.cs +++ b/src/Squidex.Domain.Apps.Core.Operations/HandleRules/RuleRegistry.cs @@ -61,6 +61,7 @@ namespace Squidex.Domain.Apps.Core.HandleRules new RuleActionDefinition { Type = actionType, + Title = metadata.Title, Display = metadata.Display, Description = metadata.Description, IconColor = metadata.IconColor, diff --git a/src/Squidex/Areas/Api/Controllers/Rules/Models/RuleElementDto.cs b/src/Squidex/Areas/Api/Controllers/Rules/Models/RuleElementDto.cs index 910e87c38..2ba8432d5 100644 --- a/src/Squidex/Areas/Api/Controllers/Rules/Models/RuleElementDto.cs +++ b/src/Squidex/Areas/Api/Controllers/Rules/Models/RuleElementDto.cs @@ -26,6 +26,11 @@ namespace Squidex.Areas.Api.Controllers.Rules.Models [Required] public string Display { get; set; } + /// + /// Optional title. + /// + public string Title { get; set; } + /// /// The color for the icon. /// diff --git a/src/Squidex/app/features/rules/declarations.ts b/src/Squidex/app/features/rules/declarations.ts index c7b176948..05369b922 100644 --- a/src/Squidex/app/features/rules/declarations.ts +++ b/src/Squidex/app/features/rules/declarations.ts @@ -12,9 +12,10 @@ export * from './pages/rules/triggers/content-changed-trigger.component'; export * from './pages/rules/triggers/schema-changed-trigger.component'; export * from './pages/rules/triggers/usage-trigger.component'; -export * from './pages/rules/rule.component'; export * from './pages/rules/rule-element.component'; +export * from './pages/rules/rule-icon.component'; export * from './pages/rules/rule-wizard.component'; +export * from './pages/rules/rule.component'; export * from './pages/rules/rules-page.component'; export * from './pages/events/pipes'; diff --git a/src/Squidex/app/features/rules/module.ts b/src/Squidex/app/features/rules/module.ts index 10285cbaf..6c5a534d0 100644 --- a/src/Squidex/app/features/rules/module.ts +++ b/src/Squidex/app/features/rules/module.ts @@ -22,6 +22,7 @@ import { RuleElementComponent, RuleEventBadgeClassPipe, RuleEventsPageComponent, + RuleIconComponent, RulesPageComponent, RuleWizardComponent, SchemaChangedTriggerComponent, @@ -62,6 +63,7 @@ const routes: Routes = [ RuleElementComponent, RuleEventBadgeClassPipe, RuleEventsPageComponent, + RuleIconComponent, RulesPageComponent, RuleWizardComponent, SchemaChangedTriggerComponent, diff --git a/src/Squidex/app/features/rules/pages/rules/rule-element.component.html b/src/Squidex/app/features/rules/pages/rules/rule-element.component.html index de830ffbe..ec63dd183 100644 --- a/src/Squidex/app/features/rules/pages/rules/rule-element.component.html +++ b/src/Squidex/app/features/rules/pages/rules/rule-element.component.html @@ -1,11 +1,7 @@
- - - - - +
{{element.display}} @@ -17,15 +13,11 @@
- - - - - +
-
{{type}}
+
{{element.title || type}}
{{element.description}} diff --git a/src/Squidex/app/features/rules/pages/rules/rule-element.component.scss b/src/Squidex/app/features/rules/pages/rules/rule-element.component.scss index 7c0f4f750..ad37d777d 100644 --- a/src/Squidex/app/features/rules/pages/rules/rule-element.component.scss +++ b/src/Squidex/app/features/rules/pages/rules/rule-element.component.scss @@ -27,14 +27,6 @@ font-weight: normal; padding: 0 .8rem; } - - .icon { - font-size: 20px; - } - - .svg-icon { - width: 20px; - } } .large { @@ -68,23 +60,4 @@ padding: 1rem; line-height: 1px; } - - .icon { - font-size: 30px; - } - - .svg-icon { - width: 30px; - } -} - -.svg-icon { - display: inline-block; -} - -::ng-deep { - svg { - fill: $color-dark-foreground; - display: block; - } } \ No newline at end of file diff --git a/src/Squidex/app/features/rules/pages/rules/rule-icon.component.ts b/src/Squidex/app/features/rules/pages/rules/rule-icon.component.ts new file mode 100644 index 000000000..8d858330b --- /dev/null +++ b/src/Squidex/app/features/rules/pages/rules/rule-icon.component.ts @@ -0,0 +1,70 @@ +/* + * Squidex Headless CMS + * + * @license + * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. + */ + +// tslint:disable: component-selector + +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; + +import { RuleElementDto } from '@app/shared'; + +@Component({ + selector: 'sqx-rule-icon', + template: ` + + + + + + + `, + styles: [ + `.svg-icon { + display: inline-block; + } + + .icon { + color: white; + } + + .sm .icon { + font-size: 14px; + } + + .sm .svg-icon { + width: 14px; + } + + .md .icon { + font-size: 20px; + } + + .md .svg-icon { + width: 20px; + } + + .lg .icon { + font-size: 30px; + } + + .lg .svg-icon { + width: 30px; + } + + ::ng-deep svg { + fill: white; + display: block; + }` + ], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class RuleIconComponent { + @Input() + public element: RuleElementDto; + + @Input() + public size: 'sm' | 'md' | 'lg' = 'sm'; +} \ No newline at end of file diff --git a/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.html b/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.html index 9f0fde00f..bdc63a202 100644 --- a/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.html +++ b/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.html @@ -6,17 +6,8 @@ Edit Action - - Step 1 of 4: Select Trigger - - - Step 2 of 4: Configure Trigger - - - Step 3 of 4: Select Action - - - Step 4 of 4: Configure Action + + {{titles[step - 1]}} @@ -34,8 +25,12 @@
-
-

{{ruleTriggers[triggerType].display}}

+ +

+ + + {{triggerElement.display}} +

@@ -85,10 +80,14 @@ -

{{ruleActions[actionType].display}}

+

+ + + {{actionElement.display}} +

diff --git a/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.scss b/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.scss index 4d3d9e03e..95887678b 100644 --- a/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.scss +++ b/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.scss @@ -6,11 +6,10 @@ } .wizard-title { - background: $color-border; + color: $color-dark-foreground; margin: -1.5rem -1.75rem; margin-bottom: 1rem; font-weight: 400; font-size: 1.05rem; padding: 1rem 1.75rem; } - diff --git a/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.ts b/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.ts index d9456f125..3a3baa6e4 100644 --- a/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.ts +++ b/src/Squidex/app/features/rules/pages/rules/rule-wizard.component.ts @@ -16,9 +16,16 @@ import { SchemaDto } from '@app/shared'; -export const MODE_WIZARD = 'Wizard'; -export const MODE_EDIT_TRIGGER = 'EditTrigger'; -export const MODE_EDIT_ACTION = 'EditAction'; +const MODE_WIZARD = 'Wizard'; +const MODE_EDIT_TRIGGER = 'EditTrigger'; +const MODE_EDIT_ACTION = 'EditAction'; + +const TITLES: ReadonlyArray = [ + 'Step 1 of 4: Select Trigger', + 'Step 2 of 4: Configure Trigger', + 'Step 3 of 4: Select Action', + 'Step 4 of 4: Configure Action' +]; @Component({ selector: 'sqx-rule-wizard', @@ -52,6 +59,16 @@ export class RuleWizardComponent implements AfterViewInit, OnInit { public triggerType: string; public trigger: any = {}; + public titles = TITLES; + + public get actionElement() { + return this.ruleActions[this.actionType]; + } + + public get triggerElement() { + return this.ruleTriggers[this.triggerType]; + } + public isEditable: boolean; public step = 1; diff --git a/src/Squidex/app/shared/services/rules.service.spec.ts b/src/Squidex/app/shared/services/rules.service.spec.ts index 4f0815d17..7a4fb381b 100644 --- a/src/Squidex/app/shared/services/rules.service.spec.ts +++ b/src/Squidex/app/shared/services/rules.service.spec.ts @@ -60,6 +60,7 @@ describe('RulesService', () => { req.flush({ 'action2': { + title: 'title2', display: 'display2', description: 'description2', iconColor: '#222', @@ -82,6 +83,7 @@ describe('RulesService', () => { }] }, 'action1': { + title: 'title1', display: 'display1', description: 'description1', iconColor: '#111', @@ -91,9 +93,9 @@ describe('RulesService', () => { } }); - const action1 = new RuleElementDto('display1', 'description1', '#111', '', null, 'link1', []); + const action1 = new RuleElementDto('title1', 'display1', 'description1', '#111', '', null, 'link1', []); - const action2 = new RuleElementDto('display2', 'description2', '#222', '', null, 'link2', [ + const action2 = new RuleElementDto('title2', 'display2', 'description2', '#222', '', null, 'link2', [ new RuleElementPropertyDto('property1', 'Editor1', 'Display1', 'Description1', false, true), new RuleElementPropertyDto('property2', 'Editor2', 'Display2', 'Description2', true, false) ]); diff --git a/src/Squidex/app/shared/services/rules.service.ts b/src/Squidex/app/shared/services/rules.service.ts index ad30e726d..ce66f417b 100644 --- a/src/Squidex/app/shared/services/rules.service.ts +++ b/src/Squidex/app/shared/services/rules.service.ts @@ -29,6 +29,7 @@ export type RuleElementMetadataDto = { display: string; iconColor: string; iconCode: string; + title?: string; }; export type TriggersDto = { [key: string]: RuleElementMetadataDto }; @@ -38,25 +39,29 @@ export const ALL_TRIGGERS: TriggersDto = { description: 'For content changes like created, updated, published, unpublished...', display: 'Content changed', iconColor: '#3389ff', - iconCode: 'contents' + iconCode: 'contents', + title: 'Content changed' }, 'AssetChanged': { description: 'For asset changes like uploaded, updated (reuploaded), renamed, deleted...', display: 'Asset changed', iconColor: '#3389ff', - iconCode: 'assets' + iconCode: 'assets', + title: 'Asset changed' }, 'SchemaChanged': { description: 'When a schema definition has been created, updated, published or deleted...', display: 'Schema changed', iconColor: '#3389ff', - iconCode: 'schemas' + iconCode: 'schemas', + title: 'Schema changed' }, 'Usage': { description: 'When monthly API calls exceed a specified limit for one time a month...', display: 'Usage exceeded', iconColor: '#3389ff', - iconCode: 'dashboard' + iconCode: 'dashboard', + title: 'Usage' } }; @@ -64,6 +69,7 @@ export type ActionsDto = { [name: string]: RuleElementDto }; export class RuleElementDto { constructor( + public readonly title: string, public readonly display: string, public readonly description: string, public readonly iconColor: string, @@ -202,6 +208,7 @@ export class RulesService { )); actions[key] = new RuleElementDto( + value.title, value.display, value.description, value.iconColor, diff --git a/tests/Squidex.Domain.Apps.Core.Tests/Operations/HandleRules/RuleElementRegistryTests.cs b/tests/Squidex.Domain.Apps.Core.Tests/Operations/HandleRules/RuleElementRegistryTests.cs index 36c657f05..9b67ab1aa 100644 --- a/tests/Squidex.Domain.Apps.Core.Tests/Operations/HandleRules/RuleElementRegistryTests.cs +++ b/tests/Squidex.Domain.Apps.Core.Tests/Operations/HandleRules/RuleElementRegistryTests.cs @@ -28,11 +28,12 @@ namespace Squidex.Domain.Apps.Core.Operations.HandleRules } [RuleAction( - IconImage = "", - IconColor = "#1e5470", - Display = "Action display", - Description = "Action description.", - ReadMore = "https://www.readmore.com/")] + Title = "Invalid", + IconImage = "", + IconColor = "#1e5470", + Display = "Action display", + Description = "Action description.", + ReadMore = "https://www.readmore.com/")] public sealed class MyInvalidRuleAction : RuleAction { [DataType(DataType.Custom)] @@ -40,11 +41,12 @@ namespace Squidex.Domain.Apps.Core.Operations.HandleRules } [RuleAction( - IconImage = "", - IconColor = "#1e5470", - Display = "Action display", - Description = "Action description.", - ReadMore = "https://www.readmore.com/")] + Title = "Action", + IconImage = "", + IconColor = "#1e5470", + Display = "Action display", + Description = "Action description.", + ReadMore = "https://www.readmore.com/")] public sealed class MyRuleAction : RuleAction { [Required] @@ -84,6 +86,7 @@ namespace Squidex.Domain.Apps.Core.Operations.HandleRules var expected = new RuleActionDefinition { Type = typeof(MyRuleAction), + Title = "Action", IconImage = "", IconColor = "#1e5470", Display = "Action display",