From 13163426b4aac62605d5bcb8bc70223044d85281 Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Mon, 5 Dec 2022 21:00:03 +0100 Subject: [PATCH 1/3] Small screen improvements (#947) * Typings for editor SDK. * Fix line height and cut text. * Improve integrated documentation for .NET SDK * Add access token to preview URL. * Improve layout system for small screens. --- backend/i18n/frontend_en.json | 4 + backend/i18n/frontend_it.json | 4 + backend/i18n/frontend_nl.json | 4 + backend/i18n/frontend_zh.json | 4 + backend/i18n/source/backend_en.json | 2 +- backend/i18n/source/frontend_en.json | 4 + .../Contents/Queries/ContentQueryParser.cs | 52 +++-- backend/src/Squidex.Shared/Texts.it.resx | 6 +- backend/src/Squidex.Shared/Texts.nl.resx | 6 +- backend/src/Squidex.Shared/Texts.resx | 6 +- backend/src/Squidex.Shared/Texts.zh.resx | 6 +- .../Squidex/wwwroot/scripts/editor-sdk.d.ts | 199 ++++++++++++++++ .../pages/users/user-page.component.html | 2 +- .../comments/comments-page.component.html | 2 +- .../content-history-page.component.html | 2 +- .../shared/list/content.component.scss | 2 +- .../shared/preview-button.component.ts | 9 +- .../references/reference-item.component.html | 8 +- .../client-connect-form.component.html | 55 ++++- .../client-connect-form.component.scss | 6 + .../clients/client-connect-form.component.ts | 34 +-- .../angular/language-selector.stories.tsx | 2 +- .../angular/layout-container.directive.ts | 17 +- .../framework/angular/layout.component.html | 32 ++- .../app/framework/angular/layout.component.ts | 106 ++++++--- .../app/framework/angular/layout.stories.tsx | 216 ++++++++++++++++++ .../app/framework/angular/loader.stories.ts | 2 +- .../framework/angular/status-icon.stories.tsx | 4 +- .../forms/markdown-editor.component.scss | 1 - .../components/help/help.component.html | 2 +- .../components/history/history.component.html | 2 +- frontend/src/app/theme/_mixins.scss | 20 +- frontend/src/app/theme/_panels2.scss | 70 ++++-- frontend/src/app/theme/_vars.scss | 10 +- frontend/src/config/webpack.config.js | 6 +- 35 files changed, 742 insertions(+), 165 deletions(-) create mode 100644 backend/src/Squidex/wwwroot/scripts/editor-sdk.d.ts create mode 100644 frontend/src/app/framework/angular/layout.stories.tsx diff --git a/backend/i18n/frontend_en.json b/backend/i18n/frontend_en.json index 69dcec1d9..255a2c651 100644 --- a/backend/i18n/frontend_en.json +++ b/backend/i18n/frontend_en.json @@ -188,12 +188,16 @@ "clients.connectWizard.manuallyTokenHint": "Tokens usally expire after 30days, but you can request multiple tokens.", "clients.connectWizard.postManDocs": "Start with the Postman tutorial in the [Documentation](https://docs.squidex.io/02-documentation/developer-guides/api-overview/postman).", "clients.connectWizard.sdk": "Connect to your App with SDK", + "clients.connectWizard.sdkDocumentation": "Documentations for the .NET SDK is available: ", "clients.connectWizard.sdkHelp": "You need another SDK?", "clients.connectWizard.sdkHelpLink": "Contact us in the Support Forum", "clients.connectWizard.sdkHint": "Download an SDK and establish a connection to this app.", "clients.connectWizard.sdkStep1": "Install the .NET SDK", "clients.connectWizard.sdkStep1Download": "The SDK is available on [nuget](https://www.nuget.org/packages/Squidex.ClientLibrary/)", "clients.connectWizard.sdkStep2": "Create a client manager", + "clients.connectWizard.sdkStep3": "Optionally: Install the Service Extensions for the SDK", + "clients.connectWizard.sdkStep3Download": "The SDK Extension is available on [nuget](https://www.nuget.org/packages/Squidex.ClientLibrary.ServiceExtensions/)", + "clients.connectWizard.sdkStep4": "Optionally: Register the client manager and all clients", "clients.connectWizard.step0Title": "Setup client", "clients.connectWizard.step1Title": "Choose connection method", "clients.connectWizard.step2Title": "Connect", diff --git a/backend/i18n/frontend_it.json b/backend/i18n/frontend_it.json index 017d15e91..bf5fcd697 100644 --- a/backend/i18n/frontend_it.json +++ b/backend/i18n/frontend_it.json @@ -188,12 +188,16 @@ "clients.connectWizard.manuallyTokenHint": "Solitamente i Token scadono dopo 30 giorni, ma puoi richiedere token multipli.", "clients.connectWizard.postManDocs": "Per il tutorial Postman inizia da questo link [Documentazione](https://docs.squidex.io/02-documentation/developer-guides/api-overview/postman).", "clients.connectWizard.sdk": "Connetti la tua APP utilizzando SDK", + "clients.connectWizard.sdkDocumentation": "Documentations for the .NET SDK is available: ", "clients.connectWizard.sdkHelp": "Hai bisogno di un altro SDK?", "clients.connectWizard.sdkHelpLink": "Contattaci nel Forum di assistenza", "clients.connectWizard.sdkHint": "Scarica l'SDK e connetti quest'app.", "clients.connectWizard.sdkStep1": "Installa .NET SDK", "clients.connectWizard.sdkStep1Download": "L'SDK è disponibile su [nuget](https://www.nuget.org/packages/Squidex.ClientLibrary/)", "clients.connectWizard.sdkStep2": "Crea un client manager", + "clients.connectWizard.sdkStep3": "Optionally: Install the Service Extensions for the SDK", + "clients.connectWizard.sdkStep3Download": "The SDK Extension is available on [nuget](https://www.nuget.org/packages/Squidex.ClientLibrary.ServiceExtensions/)", + "clients.connectWizard.sdkStep4": "Optionally: Register the client manager and all clients", "clients.connectWizard.step0Title": "Setup client", "clients.connectWizard.step1Title": "Scegli la tipologia di connessione", "clients.connectWizard.step2Title": "Collega", diff --git a/backend/i18n/frontend_nl.json b/backend/i18n/frontend_nl.json index 67b81d8be..6cfcc8cb4 100644 --- a/backend/i18n/frontend_nl.json +++ b/backend/i18n/frontend_nl.json @@ -188,12 +188,16 @@ "clients.connectWizard.manuallyTokenHint": "Tokens vervallen gewoonlijk na 30 dagen, maar je kunt meerdere tokens aanvragen.", "clients.connectWizard.postManDocs": "Begin met de Postman-tutorial in de [Documentatie] (https://docs.squidex.io/02-documentation/developer-guides/api-overview/postman).", "clients.connectWizard.sdk": "Maak verbinding met uw app met SDK", + "clients.connectWizard.sdkDocumentation": "Documentations for the .NET SDK is available: ", "clients.connectWizard.sdkHelp": "Heb je een andere SDK nodig?", "clients.connectWizard.sdkHelpLink": "Neem contact met ons op in het ondersteuningsforum", "clients.connectWizard.sdkHint": "Download een SDK en maak verbinding met deze app.", "clients.connectWizard.sdkStep1": "Installeer de .NET SDK", "clients.connectWizard.sdkStep1Download": "De SDK is beschikbaar op [nuget] (https://www.nuget.org/packages/Squidex.ClientLibrary/)", "clients.connectWizard.sdkStep2": "Maak een klantenbeheerder", + "clients.connectWizard.sdkStep3": "Optionally: Install the Service Extensions for the SDK", + "clients.connectWizard.sdkStep3Download": "The SDK Extension is available on [nuget](https://www.nuget.org/packages/Squidex.ClientLibrary.ServiceExtensions/)", + "clients.connectWizard.sdkStep4": "Optionally: Register the client manager and all clients", "clients.connectWizard.step0Title": "Client instellen", "clients.connectWizard.step1Title": "Kies verbindingsmethode", "clients.connectWizard.step2Title": "Verbinden", diff --git a/backend/i18n/frontend_zh.json b/backend/i18n/frontend_zh.json index 7b6f0be35..fde0b2fa9 100644 --- a/backend/i18n/frontend_zh.json +++ b/backend/i18n/frontend_zh.json @@ -188,12 +188,16 @@ "clients.connectWizard.manuallyTokenHint": "令牌通常会在 30 天后过期，但您可以请求多个令牌。", "clients.connectWizard.postManDocs": "从 [文档](https://docs.squidex.io/02-documentation/developer-guides/api-overview/postman) 中的 Postman 教程开始。", "clients.connectWizard.sdk": "使用 SDK 连接到您的应用程序", + "clients.connectWizard.sdkDocumentation": "Documentations for the .NET SDK is available: ", "clients.connectWizard.sdkHelp": "你需要另一个 SDK？", "clients.connectWizard.sdkHelpLink": "在支持论坛联系我们", "clients.connectWizard.sdkHint": "下载 SDK 并建立与此应用程序的连接。", "clients.connectWizard.sdkStep1": "安装.NET SDK", "clients.connectWizard.sdkStep1Download": "SDK 可在 [nuget](https://www.nuget.org/packages/Squidex.ClientLibrary/)", "clients.connectWizard.sdkStep2": "创建客户端管理器", + "clients.connectWizard.sdkStep3": "Optionally: Install the Service Extensions for the SDK", + "clients.connectWizard.sdkStep3Download": "The SDK Extension is available on [nuget](https://www.nuget.org/packages/Squidex.ClientLibrary.ServiceExtensions/)", + "clients.connectWizard.sdkStep4": "Optionally: Register the client manager and all clients", "clients.connectWizard.step0Title": "设置客户端", "clients.connectWizard.step1Title": "选择连接方式", "clients.connectWizard.step2Title": "连接", diff --git a/backend/i18n/source/backend_en.json b/backend/i18n/source/backend_en.json index 3f302b4dd..80c7318bf 100644 --- a/backend/i18n/source/backend_en.json +++ b/backend/i18n/source/backend_en.json @@ -215,6 +215,7 @@ "history.apps.clientAdded": "added client {[Id]} to app", "history.apps.clientRevoked": "revoked client {[Id]}", "history.apps.clientUpdated": "updated client {[Id]}", + "history.apps.common.updated": "updated general settings", "history.apps.contributoreAssigned": "assigned {user:[Contributor]} as {[Role]}", "history.apps.contributoreRemoved": "removed {user:[Contributor]} from app", "history.apps.created": "created the app.", @@ -231,7 +232,6 @@ "history.apps.roleUpdated": "updated role {[Name]}", "history.apps.settingsUpdated": "updated UI settings", "history.apps.transfered": "updated app to client", - "history.apps.updated": "updated general settings", "history.apps.workflowAdded": "added workflow {[Name]}.", "history.apps.workflowDeleted": "deleted a workflow.", "history.apps.workflowUpdated": "updated a workflow.", diff --git a/backend/i18n/source/frontend_en.json b/backend/i18n/source/frontend_en.json index 69dcec1d9..255a2c651 100644 --- a/backend/i18n/source/frontend_en.json +++ b/backend/i18n/source/frontend_en.json @@ -188,12 +188,16 @@ "clients.connectWizard.manuallyTokenHint": "Tokens usally expire after 30days, but you can request multiple tokens.", "clients.connectWizard.postManDocs": "Start with the Postman tutorial in the [Documentation](https://docs.squidex.io/02-documentation/developer-guides/api-overview/postman).", "clients.connectWizard.sdk": "Connect to your App with SDK", + "clients.connectWizard.sdkDocumentation": "Documentations for the .NET SDK is available: ", "clients.connectWizard.sdkHelp": "You need another SDK?", "clients.connectWizard.sdkHelpLink": "Contact us in the Support Forum", "clients.connectWizard.sdkHint": "Download an SDK and establish a connection to this app.", "clients.connectWizard.sdkStep1": "Install the .NET SDK", "clients.connectWizard.sdkStep1Download": "The SDK is available on [nuget](https://www.nuget.org/packages/Squidex.ClientLibrary/)", "clients.connectWizard.sdkStep2": "Create a client manager", + "clients.connectWizard.sdkStep3": "Optionally: Install the Service Extensions for the SDK", + "clients.connectWizard.sdkStep3Download": "The SDK Extension is available on [nuget](https://www.nuget.org/packages/Squidex.ClientLibrary.ServiceExtensions/)", + "clients.connectWizard.sdkStep4": "Optionally: Register the client manager and all clients", "clients.connectWizard.step0Title": "Setup client", "clients.connectWizard.step1Title": "Choose connection method", "clients.connectWizard.step2Title": "Connect", diff --git a/backend/src/Squidex.Domain.Apps.Entities/Contents/Queries/ContentQueryParser.cs b/backend/src/Squidex.Domain.Apps.Entities/Contents/Queries/ContentQueryParser.cs index 821b2a81f..1546c3128 100644 --- a/backend/src/Squidex.Domain.Apps.Entities/Contents/Queries/ContentQueryParser.cs +++ b/backend/src/Squidex.Domain.Apps.Entities/Contents/Queries/ContentQueryParser.cs @@ -80,38 +80,40 @@ public class ContentQueryParser query.Filter = await GeoQueryTransformer.TransformAsync(query.Filter, context, schema, textIndex); } - if (!string.IsNullOrWhiteSpace(query.FullText)) + if (string.IsNullOrWhiteSpace(query.FullText)) { - if (schema == null) - { - ThrowHelper.InvalidOperationException(); - return; - } + return; + } - var textQuery = new TextQuery(query.FullText, 1000) - { - PreferredSchemaId = schema.Id - }; + if (schema == null) + { + ThrowHelper.InvalidOperationException(); + return; + } - var fullTextIds = await textIndex.SearchAsync(context.App, textQuery, context.Scope()); - var fullTextFilter = ClrFilter.Eq("id", "__notfound__"); + var textQuery = new TextQuery(query.FullText, 1000) + { + PreferredSchemaId = schema.Id + }; - if (fullTextIds?.Any() == true) - { - fullTextFilter = ClrFilter.In("id", fullTextIds.Select(x => x.ToString()).ToList()); - } + var fullTextIds = await textIndex.SearchAsync(context.App, textQuery, context.Scope()); + var fullTextFilter = ClrFilter.Eq("id", "__notfound__"); - if (query.Filter != null) - { - query.Filter = ClrFilter.And(query.Filter, fullTextFilter); - } - else - { - query.Filter = fullTextFilter; - } + if (fullTextIds?.Any() == true) + { + fullTextFilter = ClrFilter.In("id", fullTextIds.Select(x => x.ToString()).ToList()); + } - query.FullText = null; + if (query.Filter != null) + { + query.Filter = ClrFilter.And(query.Filter, fullTextFilter); } + else + { + query.Filter = fullTextFilter; + } + + query.FullText = null; } private async Task ParseClrQueryAsync(Context context, Q q, ISchemaEntity? schema) diff --git a/backend/src/Squidex.Shared/Texts.it.resx b/backend/src/Squidex.Shared/Texts.it.resx index 61a98269c..b0b521fc0 100644 --- a/backend/src/Squidex.Shared/Texts.it.resx +++ b/backend/src/Squidex.Shared/Texts.it.resx @@ -730,6 +730,9 @@ Aggiornato client {[Id]} + + updated general settings + Associato {user:[Contributor]} al ruolo {[Role]} @@ -778,9 +781,6 @@ updated app to client - - updated general settings - added workflow {[Name]}. diff --git a/backend/src/Squidex.Shared/Texts.nl.resx b/backend/src/Squidex.Shared/Texts.nl.resx index 0a686470c..f2f2cb5ce 100644 --- a/backend/src/Squidex.Shared/Texts.nl.resx +++ b/backend/src/Squidex.Shared/Texts.nl.resx @@ -730,6 +730,9 @@ bijgewerkte client {[Id]} + + updated general settings + heeft {user:[Contributor]} toegewezen als {[Role]} @@ -778,9 +781,6 @@ updated app to client - - updated general settings - added workflow {[Name]}. diff --git a/backend/src/Squidex.Shared/Texts.resx b/backend/src/Squidex.Shared/Texts.resx index 257f258ac..a8c6b3f3c 100644 --- a/backend/src/Squidex.Shared/Texts.resx +++ b/backend/src/Squidex.Shared/Texts.resx @@ -730,6 +730,9 @@ updated client {[Id]} + + updated general settings + assigned {user:[Contributor]} as {[Role]} @@ -778,9 +781,6 @@ updated app to client - - updated general settings - added workflow {[Name]}. diff --git a/backend/src/Squidex.Shared/Texts.zh.resx b/backend/src/Squidex.Shared/Texts.zh.resx index 9c84b1442..af0013190 100644 --- a/backend/src/Squidex.Shared/Texts.zh.resx +++ b/backend/src/Squidex.Shared/Texts.zh.resx @@ -730,6 +730,9 @@ 更新的客户端 {[Id]} + + updated general settings + 已分配 {user:[Contributor]} 作为 {[Role]} @@ -778,9 +781,6 @@ updated app to client - - updated general settings - added workflow {[Name]}. diff --git a/backend/src/Squidex/wwwroot/scripts/editor-sdk.d.ts b/backend/src/Squidex/wwwroot/scripts/editor-sdk.d.ts new file mode 100644 index 000000000..51e76a843 --- /dev/null +++ b/backend/src/Squidex/wwwroot/scripts/editor-sdk.d.ts @@ -0,0 +1,199 @@ +declare class EditorPlugin { + /** + * Get the current context. + */ + getContext(): any; + + /** + * Notifies the parent to navigate to the path. + */ + navigate(url: string): void; + + /** + * Register an function that is called when the sidebar is initialized. + * + * @param {Function} callback: The callback to invoke. + */ + onInit(callback: () => void): void; + + /** + * Register an function that is called whenever the value of the content has changed. + * + * @param {Function} callback: The callback to invoke. Argument 1: Content value (any). + */ + onContentChanged(callback: (content: any) => void): void; + + /** + * Clean the editor SDK. + */ + clean(): void; +} + +declare class SquidexFormField { + /** + * Get the current value. + */ + getValue(): any; + + /** + * Get the current value. + */ + getContext(): any; + + /** + * Get the current form value. + */ + getFormValue(): any; + + /** + * Get the current field language. + */ + getLanguage(): string | undefined | null; + + /** + * Get the current index when the field is an array item. + */ + getIndex(): number | undefined | null; + + /** + * Get the disabled state. + */ + isDisabled(): boolean; + + /** + * Get the fullscreen state. + */ + isFullscreen(): boolean; + /** + * Get the expanded state. + */ + isExpanded(): boolean; + + /** + * Notifies the control container that the editor has been touched. + */ + touched(): void; + + /** + * Notifies the parent to navigate to the path. + * + * @param {string} url: The url to navigate to. + */ + navigate(url: string): void; + + /** + * Notifies the parent to go to fullscreen mode. + */ + toggleFullscreen(): void; + + /** + * Notifies the parent to go to expanded mode. + */ + toggleExpanded(): void; + + /** + * Notifies the control container that the value has been changed. + * + * @param {any} newValue: The new field value. + */ + valueChanged(newValue: any): void; + + /** + * Shows an info alert. + * + * @param {string} text: The info text. + */ + notifyInfo(text: string): void; + + /** + * Shows an error alert. + * + * @param {string} text: error info text. + */ + notifyError(text: string): void; + + /** + * Shows an confirm dialog. + * + * @param {string} title The title of the dialog. + * @param {string} text The text of the dialog. + * @param {function} callback The callback to invoke when the dialog is completed or closed. + */ + confirm(title: string, text: string, callback: (result: boolean) => void): void; + + /** + * Shows the dialog to pick assets. + * + * @param {function} callback The callback to invoke when the dialog is completed or closed. + */ + pickAssets(callback: (assets: any[]) => void): void; + + /** + * Shows the dialog to pick contents. + * + * @param {string} schemas: The list of schema names. + * @param {function} callback The callback to invoke when the dialog is completed or closed. + */ + pickContents(schemas: string[], callback: (assets: any[]) => void): void; + + /** + * Register an function that is called when the field is initialized. + * + * @param {Function} callback: The callback to invoke. + */ + onInit(callback: () => void): void; + + /** + * Register an function that is called when the field is moved. + * + * @param {Function} callback: The callback to invoke. Argument 1: New position (number). + */ + onMoved(callback: (index: number) => void): void; + + /** + * Register an function that is called whenever the field is disabled or enabled. + * + * @param {Function} callback: The callback to invoke. Argument 1: New disabled state (boolean, disabled = true, enabled = false). + */ + onDisabled(callback: (isDisabled: boolean) => void): void; + + /** + * Register an function that is called whenever the field language is changed. + * + * @param {Function} callback: The callback to invoke. Argument 1: Language code (string). + */ + onLanguageChanged(callback: (language: string) => void): void; + + /** + * Register an function that is called whenever the value of the field has changed. + * + * @param {Function} callback: The callback to invoke. Argument 1: Field value (any). + */ + onValueChanged(callback: (value: any) => void): void; + + /** + * Register an function that is called whenever the value of the content has changed. + * + * @param {Function} callback: The callback to invoke. Argument 1: Content value (any). + */ + onFormValueChanged(callback: (value: any) => void): void; + + /** + * Register an function that is called whenever the fullscreen mode has changed. + * + * @param {Function} callback: The callback to invoke. Argument 1: Fullscreen state (boolean, fullscreen on = true, fullscreen off = false). + */ + onFullscreen(callback: (isFullscreen: boolean) => void): void; + + /** + * Register an function that is called whenever the expanded mode has changed. + * + * @param {Function} callback: The callback to invoke. Argument 1: Expanded state (boolean, expanded on = true, expanded off = false). + */ + onExpanded(callback: (isExpanded: boolean) => void): void; + + /** + * Clean the editor SDK. + */ + clean(): void; +} \ No newline at end of file diff --git a/frontend/src/app/features/administration/pages/users/user-page.component.html b/frontend/src/app/features/administration/pages/users/user-page.component.html index 770417c9c..a80fa5a58 100644 --- a/frontend/src/app/features/administration/pages/users/user-page.component.html +++ b/frontend/src/app/features/administration/pages/users/user-page.component.html @@ -2,7 +2,7 @@
- + diff --git a/frontend/src/app/features/content/pages/comments/comments-page.component.html b/frontend/src/app/features/content/pages/comments/comments-page.component.html index 1686fcc64..a412160a5 100644 --- a/frontend/src/app/features/content/pages/comments/comments-page.component.html +++ b/frontend/src/app/features/content/pages/comments/comments-page.component.html @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/frontend/src/app/features/content/pages/content/content-history-page.component.html b/frontend/src/app/features/content/pages/content/content-history-page.component.html index 25556315e..14c986205 100644 --- a/frontend/src/app/features/content/pages/content/content-history-page.component.html +++ b/frontend/src/app/features/content/pages/content/content-history-page.component.html @@ -1,4 +1,4 @@ - +
diff --git a/frontend/src/app/features/content/shared/list/content.component.scss b/frontend/src/app/features/content/shared/list/content.component.scss index a9615d8a6..95ef1f57f 100644 --- a/frontend/src/app/features/content/shared/list/content.component.scss +++ b/frontend/src/app/features/content/shared/list/content.component.scss @@ -19,7 +19,7 @@ tr { } td { - border-bottom: 1px solid $color-border; + border-bottom: .7px solid $color-border; border-left: 1px solid $color-white; border-top: 0 !important; position: relative; diff --git a/frontend/src/app/features/content/shared/preview-button.component.ts b/frontend/src/app/features/content/shared/preview-button.component.ts index 8da47700c..2568b0273 100644 --- a/frontend/src/app/features/content/shared/preview-button.component.ts +++ b/frontend/src/app/features/content/shared/preview-button.component.ts @@ -8,7 +8,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'; import { Observable } from 'rxjs'; import { take } from 'rxjs/operators'; -import { ContentDto, interpolate, LocalStoreService, ModalModel, SchemaDto, Settings, StatefulComponent } from '@app/shared'; +import { AuthService, ContentDto, interpolate, LocalStoreService, ModalModel, SchemaDto, Settings, StatefulComponent } from '@app/shared'; interface State { // The name of the selected preview config. @@ -37,6 +37,7 @@ export class PreviewButtonComponent extends StatefulComponent implements public dropdown = new ModalModel(); constructor(changeDetector: ChangeDetectorRef, + private readonly authService: AuthService, private readonly localStore: LocalStoreService, ) { super(changeDetector, { @@ -74,7 +75,11 @@ export class PreviewButtonComponent extends StatefulComponent implements } private navigateTo(name: string) { - const url = interpolate(this.schema.previewUrls[name], this.content, 'iv'); + const vars = { ...this.content }; + + vars['accessToken'] = this.authService.user?.accessToken; + + const url = interpolate(this.schema.previewUrls[name], vars, 'iv'); window.open(url, '_blank'); } diff --git a/frontend/src/app/features/content/shared/references/reference-item.component.html b/frontend/src/app/features/content/shared/references/reference-item.component.html index 32c63be56..386dc88bd 100644 --- a/frontend/src/app/features/content/shared/references/reference-item.component.html +++ b/frontend/src/app/features/content/shared/references/reference-item.component.html @@ -49,10 +49,6 @@ - - - - + + + +
diff --git a/frontend/src/app/features/settings/pages/clients/client-connect-form.component.html b/frontend/src/app/features/settings/pages/clients/client-connect-form.component.html index 4e6609126..7bc5747ba 100644 --- a/frontend/src/app/features/settings/pages/clients/client-connect-form.component.html +++ b/frontend/src/app/features/settings/pages/clients/client-connect-form.component.html @@ -69,7 +69,15 @@
1 {{ 'clients.connectWizard.manuallyStep1' | sqxTranslate }}

- {{connectHttpText}} + +

$ curl
+
-X POST '{{apiUrl.buildUrl('/identity-server/connect/token')}}'
+
-H 'Content-Type: application/x-www-form-urlencoded'
+
-d 'grant_type=client_credentials&
+
client_id={{appName}}:{{client.id}}
+
client_secret={{client.secret}}
+
scope=squidex-api'
+

@@ -77,7 +85,7 @@
2 {{ 'clients.connectWizard.manuallyStep2' | sqxTranslate }}

- {{connectToken?.accessToken}} + {{appToken?.accessToken}}

@@ -129,6 +137,12 @@ +
+ + {{ 'clients.connectWizard.sdkDocumentation' | sqxTranslate }} {{ 'common.documentation' | sqxTranslate }} + +
+
1 {{ 'clients.connectWizard.sdkStep1' | sqxTranslate }}
@@ -143,7 +157,42 @@
2 {{ 'clients.connectWizard.sdkStep2' | sqxTranslate }}

- {{connectLibraryText}} + +

var clientManager = new SquidexClientManager(new SquidexOptions
+
{{'{'}}
+
AppName = {{appName}},
+
ClientId = {{appName}}:{{client.id}},
+
ClientSecret = {{client.secret}},
+
Url = {{apiUrl.value}}
+
});
+ +

+
+ + +
+
3 {{ 'clients.connectWizard.sdkStep3' | sqxTranslate }}
+ +
+ +

+ dotnet add package Squidex.ClientLibrary.ServiceExtensions +

+
+ +
+
4 {{ 'clients.connectWizard.sdkStep4' | sqxTranslate }}
+ +

+ +

services.AddSquidex(options =>
+
{{'{'}}
+
options.AppName = {{appName}};
+
options.ClientId = {{appName}}:{{client.id}};
+
options.ClientSecret = {{client.secret}};
+
options.Url = {{apiUrl.value}};
+
});
+

diff --git a/frontend/src/app/features/settings/pages/clients/client-connect-form.component.scss b/frontend/src/app/features/settings/pages/clients/client-connect-form.component.scss index 645b642f2..9bf1100f4 100644 --- a/frontend/src/app/features/settings/pages/clients/client-connect-form.component.scss +++ b/frontend/src/app/features/settings/pages/clients/client-connect-form.component.scss @@ -43,4 +43,10 @@ font-size: $font-smallest; font-weight: normal; } +} + +sqx-code { + pre { + white-space: pre; + } } \ No newline at end of file diff --git a/frontend/src/app/features/settings/pages/clients/client-connect-form.component.ts b/frontend/src/app/features/settings/pages/clients/client-connect-form.component.ts index 21fcaafee..95693cc71 100644 --- a/frontend/src/app/features/settings/pages/clients/client-connect-form.component.ts +++ b/frontend/src/app/features/settings/pages/clients/client-connect-form.component.ts @@ -21,10 +21,7 @@ export class ClientConnectFormComponent implements OnInit { public client!: ClientDto; public appName!: string; - - public connectToken?: AccessTokenDto; - public connectHttpText = ''; - public connectLibraryText = ''; + public appToken?: AccessTokenDto; public step = 'Start'; @@ -44,13 +41,10 @@ export class ClientConnectFormComponent implements OnInit { public ngOnInit() { this.appName = this.appsState.appName; - this.connectHttpText = connectHttpText(this.apiUrl, this.appName, this.client); - this.connectLibraryText = connectLibrary(this.apiUrl, this.appName, this.client); - this.clientsService.createToken(this.appsState.appName, this.client) .subscribe({ next: dto => { - this.connectToken = dto; + this.appToken = dto; this.changeDetector.detectChanges(); }, @@ -63,26 +57,4 @@ export class ClientConnectFormComponent implements OnInit { public go(step: string) { this.step = step; } -} - -function connectHttpText(apiUrl: ApiUrlConfig, app: string, client: { id: string; secret: string }) { - const url = apiUrl.buildUrl('identity-server/connect/token'); - - return `$ curl - -X POST '${url}' - -H 'Content-Type: application/x-www-form-urlencoded' - -d 'grant_type=client_credentials& - client_id=${app}:${client.id}& - client_secret=${client.secret}& - scope=squidex-api'`; -} - -function connectLibrary(apiUrl: ApiUrlConfig, app: string, client: { id: string; secret: string }) { - const url = apiUrl.value; - - return `var clientManager = new SquidexClientManager( - "${url}", - "${app}", - "${app}:${client.id}", - "${client.secret}")`; -} +} \ No newline at end of file diff --git a/frontend/src/app/framework/angular/language-selector.stories.tsx b/frontend/src/app/framework/angular/language-selector.stories.tsx index 37a2930e1..71e82b176 100644 --- a/frontend/src/app/framework/angular/language-selector.stories.tsx +++ b/frontend/src/app/framework/angular/language-selector.stories.tsx @@ -15,7 +15,7 @@ export default { component: LanguageSelectorComponent, argTypes: { size: { - control: 'enum', + control: 'select', options: [ 'sm', 'md', diff --git a/frontend/src/app/framework/angular/layout-container.directive.ts b/frontend/src/app/framework/angular/layout-container.directive.ts index 6f8a5138c..2639679c3 100644 --- a/frontend/src/app/framework/angular/layout-container.directive.ts +++ b/frontend/src/app/framework/angular/layout-container.directive.ts @@ -63,13 +63,14 @@ export class LayoutContainerDirective implements AfterViewInit { } let currentSize = 0; + let layoutWidth = this.containerWidth; let layoutsWidthSpread = 0; for (const layout of layouts) { - if (layout.desiredWidth > 0) { - const layoutWidth = layout.desiredWidth; + const desiredWidth = layout.computeDesiredWidth(layouts.length, layoutWidth); - layout.measure(`${layoutWidth}rem`); + if (desiredWidth >= 0) { + layout.measure(`${desiredWidth}rem`); currentSize += layout.renderWidth; } else { @@ -77,10 +78,12 @@ export class LayoutContainerDirective implements AfterViewInit { } } - const spreadWidth = (this.containerWidth - currentSize) / layoutsWidthSpread; + const spreadWidth = (layoutWidth - currentSize) / layoutsWidthSpread; for (const layout of layouts) { - if (layout.desiredWidth <= 0) { + const desiredWidth = layout.computeDesiredWidth(layouts.length, layoutWidth); + + if (desiredWidth < 0) { layout.measure(`${spreadWidth}px`); currentSize += layout.renderWidth; @@ -97,8 +100,10 @@ export class LayoutContainerDirective implements AfterViewInit { currentLayer -= 10; } - const diff = Math.max(0, currentPosition - this.containerWidth); + const diff = Math.max(0, currentPosition - layoutWidth); + this.renderer.setStyle(this.element.nativeElement, 'overflow-x', diff > 1 ? 'auto' : 'hidden'); + this.renderer.setStyle(this.element.nativeElement, 'overflow-y', 'hidden'); this.renderer.setProperty(this.element.nativeElement, 'scrollLeft', diff); } } diff --git a/frontend/src/app/framework/angular/layout.component.html b/frontend/src/app/framework/angular/layout.component.html index f52f59f27..1455e24c8 100644 --- a/frontend/src/app/framework/angular/layout.component.html +++ b/frontend/src/app/framework/angular/layout.component.html @@ -1,8 +1,8 @@ -
- -
-
-
+
+ +
+
+

{{ titleText | sqxTranslate }}

@@ -13,9 +13,21 @@
+ + + + + + + + + + + +
-
-
+
+
@@ -23,7 +35,7 @@ -
+

@@ -37,7 +49,7 @@

- @@ -75,7 +87,7 @@
-
+
diff --git a/frontend/src/app/framework/angular/layout.component.ts b/frontend/src/app/framework/angular/layout.component.ts index dadbeb411..1acc9b833 100644 --- a/frontend/src/app/framework/angular/layout.component.ts +++ b/frontend/src/app/framework/angular/layout.component.ts @@ -7,7 +7,7 @@ /* eslint-disable import/no-cycle */ -import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, OnInit, Optional, Renderer2, ViewChild } from '@angular/core'; import { ActivatedRoute, NavigationEnd, QueryParamsHandling, Router } from '@angular/router'; import { concat, defer, filter, map, of } from 'rxjs'; import { LayoutContainerDirective } from './layout-container.directive'; @@ -36,7 +36,7 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit { public titleCollapsed = ''; @Input() - public layout: 'simple' | 'left' | 'main' = 'simple'; + public layout: 'left' | 'main' | 'right' = 'main'; @Input() public width = -1; @@ -69,15 +69,16 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit { public panel!: ElementRef; public isCollapsed = false; - - public get desiredWidth() { - return this.isCollapsed ? 3 : this.width; - } + public isMinimized = false; public get desiredInnerWidth() { return this.innerWidth <= 0 ? '100%' : `${this.innerWidth}rem`; } + public get desiredWidth() { + return this.width <= 0 ? '100%' : `${this.width}rem`; + } + public get isViewInit() { return this.isViewInitField; } @@ -88,22 +89,27 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit { public firstChild = concat( - defer(() => of(!!this.route.firstChild)), - this.router.events.pipe( + defer(() => of(!!this.route?.firstChild)), + this.router?.events.pipe( filter(event => event instanceof NavigationEnd), map(() => { - return !!this.route.firstChild; + return !!this.route?.firstChild; }), - )); + ) || of({})); constructor( + private readonly changeDetector: ChangeDetectorRef, private readonly container: LayoutContainerDirective, private readonly renderer: Renderer2, - public readonly route: ActivatedRoute, - public readonly router: Router, + @Optional() public readonly route?: ActivatedRoute, + @Optional() public readonly router?: Router, ) { } + public ngOnDestroy() { + this.container.peek(); + } + public ngOnInit() { this.container.push(this); } @@ -114,46 +120,76 @@ export class LayoutComponent implements OnInit, OnDestroy, AfterViewInit { this.container.invalidate(); } - public ngOnDestroy() { - this.container.peek(); + public computeDesiredWidth(numberOfLayouts: number, availableWidth: number) { + if (this.layout === 'main') { + return this.width; + } + + const isMinimized = availableWidth < 1200 && numberOfLayouts > 1; + + if (isMinimized !== this.isMinimized) { + this.isCollapsed = !this.isMinimized; + this.isMinimized = isMinimized; + this.changeDetector.detectChanges(); + } + + return this.isMinimized || this.isCollapsed ? (this.layout === 'left' ? 3 : 0) : this.width; } public measure(size: string) { - if (this.widthPrevious !== size && this.isViewInitField) { - this.widthPrevious = size; + if (!this.isViewInitField || this.widthPrevious === size) { + return; + } - const element = this.panel.nativeElement; + this.widthPrevious = size; - if (element) { - this.renderer.setStyle(element, 'width', size); + const element = this.panel.nativeElement; - if (this.layout === 'main') { - this.renderer.setStyle(element, 'minWidth', `${this.innerWidth + this.innerWidthPadding}rem`); - } + if (!element) { + return; + } - this.widthToRender = element.offsetWidth; - } + this.renderer.setStyle(element, 'width', size); + + if (this.layout === 'main') { + this.renderer.setStyle(element, 'minWidth', `${this.innerWidth + this.innerWidthPadding}rem`); } + + this.widthToRender = element.offsetWidth; } public arrange(left: any, layer: any) { - if (this.isViewInit) { - const element = this.panel.nativeElement; + if (!this.isViewInitField) { + return; + } - if (element) { - this.renderer.setStyle(element, 'top', '0px'); - this.renderer.setStyle(element, 'left', left); - this.renderer.setStyle(element, 'bottom', '0px'); - this.renderer.setStyle(element, 'position', 'absolute'); + const element = this.panel.nativeElement; - this.renderer.setStyle(element, 'z-index', layer); - } + if (element) { + this.renderer.setStyle(element, 'top', '0px'); + this.renderer.setStyle(element, 'left', left); + this.renderer.setStyle(element, 'bottom', '0px'); + this.renderer.setStyle(element, 'position', 'absolute'); + this.renderer.setStyle(element, 'z-index', layer); } } public toggle() { - this.isCollapsed = !this.isCollapsed; + this.setCollapsed(!this.isCollapsed); + } - this.container.invalidate(); + public expand(event: MouseEvent) { + if (event.target?.['nodeName'] !== 'DIV') { + return; + } + + this.setCollapsed(false); + } + + private setCollapsed(isCollapsed: boolean) { + if (this.isCollapsed !== isCollapsed) { + this.isCollapsed = isCollapsed; + this.container.invalidate(); + } } } diff --git a/frontend/src/app/framework/angular/layout.stories.tsx b/frontend/src/app/framework/angular/layout.stories.tsx new file mode 100644 index 000000000..5b30ddff4 --- /dev/null +++ b/frontend/src/app/framework/angular/layout.stories.tsx @@ -0,0 +1,216 @@ +/* + * Squidex Headless CMS + * + * @license + * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. + */ + +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { moduleMetadata } from '@storybook/angular'; +import { Meta, Story } from '@storybook/angular/types-6-0'; +import { LayoutComponent, LocalizerService, SqxFrameworkModule } from '@app/framework'; + +export default { + title: 'Framework/Layout', + component: LayoutComponent, + argTypes: { + titleText: { + control: 'text', + }, + titleCollapsed: { + control: 'text', + }, + titleIcon: { + control: 'select', + options: [ + '', + 'help', + 'help2', + ], + }, + layout: { + control: 'select', + options: [ + 'left', + 'main', + 'right', + ], + defaultValue: 'left', + }, + innerWidth: { + control: 'number', + }, + }, + parameters: { + layout: 'fullscreen', + }, + decorators: [ + moduleMetadata({ + imports: [ + BrowserAnimationsModule, + SqxFrameworkModule, + SqxFrameworkModule.forRoot(), + ], + providers: [ + { provide: LocalizerService, useValue: new LocalizerService({}) }, + ], + }), + ], +} as Meta; + +const Template: Story = (args: LayoutComponent) => ({ + props: args, + template: ` + +
+ +
+ +
+
+ Content +
+
+
+
+ Content +
+
+
+
+ Content +
+
+ +
+ +
+ + `, +}); + +const ComplexTemplate: Story = (args: LayoutComponent) => ({ + props: args, + template: ` + +
+ +
+ +
+
+ Content +
+
+
+
+ Content +
+
+
+
+ Content +
+
+ +
+ + +
+ +
+
+ Content +
+
+
+
+ Content +
+
+
+
+ Content +
+
+ +
+ + +
+
+
+ Content +
+
+
+
+ Content +
+
+
+
+ Content +
+
+
+ +
+ + `, +}); + +export const Empty = Template.bind({}); + +Empty.args = { + titleText: 'Title', +}; + +export const Icon = Template.bind({}); + +Icon.args = { + titleText: 'Title', + titleIcon: 'help', +}; + +export const InnerWidth = Template.bind({}); + +InnerWidth.args = { + titleText: 'Title', + titleIcon: '', + innerWidth: 30, + layout: 'main', +}; + +export const Left = Template.bind({}); + +Left.args = { + titleText: 'Title', + titleCollapsed: 'I am collapsed', + layout: 'left', +}; + +export const Right = Template.bind({}); + +Right.args = { + titleText: 'Title', + titleCollapsed: 'I am collapsed', + layout: 'right', +}; + +export const Complex = ComplexTemplate.bind({}); + +Complex.args = { + titleText: 'Main', + titleIcon: 'help', + innerWidth: 20, +}; \ No newline at end of file diff --git a/frontend/src/app/framework/angular/loader.stories.ts b/frontend/src/app/framework/angular/loader.stories.ts index da1c0a8bd..02467e567 100644 --- a/frontend/src/app/framework/angular/loader.stories.ts +++ b/frontend/src/app/framework/angular/loader.stories.ts @@ -17,7 +17,7 @@ export default { control: 'number', }, color: { - control: 'enum', + control: 'select', options: [ 'white', 'theme', diff --git a/frontend/src/app/framework/angular/status-icon.stories.tsx b/frontend/src/app/framework/angular/status-icon.stories.tsx index 641fd70f9..30e4a6e41 100644 --- a/frontend/src/app/framework/angular/status-icon.stories.tsx +++ b/frontend/src/app/framework/angular/status-icon.stories.tsx @@ -13,7 +13,7 @@ export default { component: StatusIconComponent, argTypes: { status: { - control: 'enum', + control: 'select', options: [ 'Failed', 'Success', @@ -25,7 +25,7 @@ export default { control: 'text', }, size: { - control: 'enum', + control: 'select', options: [ 'sm', 'md', diff --git a/frontend/src/app/shared/components/forms/markdown-editor.component.scss b/frontend/src/app/shared/components/forms/markdown-editor.component.scss index 058f24bb6..7b55ed019 100644 --- a/frontend/src/app/shared/components/forms/markdown-editor.component.scss +++ b/frontend/src/app/shared/components/forms/markdown-editor.component.scss @@ -6,7 +6,6 @@ $background: #fff; :host ::ng-deep { /* stylelint-disable-next-line selector-class-pattern */ .CodeMirror { - box-sizing: content-box; height: 300px; padding-bottom: 10px; padding-top: 10px; diff --git a/frontend/src/app/shared/components/help/help.component.html b/frontend/src/app/shared/components/help/help.component.html index d1574757f..c3ed7684d 100644 --- a/frontend/src/app/shared/components/help/help.component.html +++ b/frontend/src/app/shared/components/help/help.component.html @@ -1,4 +1,4 @@ - +
diff --git a/frontend/src/app/shared/components/history/history.component.html b/frontend/src/app/shared/components/history/history.component.html index 94c0df676..7223ac029 100644 --- a/frontend/src/app/shared/components/history/history.component.html +++ b/frontend/src/app/shared/components/history/history.component.html @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/frontend/src/app/theme/_mixins.scss b/frontend/src/app/theme/_mixins.scss index 89deaa17a..f3454ab9c 100644 --- a/frontend/src/app/theme/_mixins.scss +++ b/frontend/src/app/theme/_mixins.scss @@ -89,12 +89,28 @@ width: $width; } +@mixin force-width-important($width) { + // Ensure that we use the minimum width in flex scenarios. + max-width: $width !important; + min-width: $width !important; + // Normal width definition. + width: $width !important; +} + @mixin force-height($height) { - // Normal height definition. - height: $height; // Ensure that we use the minimum height in flex scenarios. max-height: $height; min-height: $height; + // Normal height definition. + height: $height; +} + +@mixin force-height-important($height) { + // Ensure that we use the minimum height in flex scenarios. + max-height: $height !important; + min-height: $height !important; + // Normal height definition. + height: $height !important; } @mixin caret-top($color, $size: .6rem) { diff --git a/frontend/src/app/theme/_panels2.scss b/frontend/src/app/theme/_panels2.scss index 540d3d8d3..aff06f966 100644 --- a/frontend/src/app/theme/_panels2.scss +++ b/frontend/src/app/theme/_panels2.scss @@ -43,9 +43,35 @@ align-items: stretch; display: flex; flex-direction: row; + flex-grow: inherit; + + &.minimized { + z-index: 30 !important; + + & > .panel2-slice { + &.right { + @include absolute(0, 0, 0); + @include box-shadow-outer(0, -2px, 3px, .13); + } + + &.left { + @include box-shadow-outer(0, 2px, 3px, .13); + max-width: none; + } + + &.collapsed { + box-shadow: none; + } + } + + .panel2-collapse { + display: inline !important; + } + } &-slice { align-items: stretch; + background-color: $color-background; display: flex; flex-direction: column; flex-grow: 0; @@ -58,8 +84,12 @@ flex-shrink: 1; max-width: 100%; + .panel2-sidebar-title { + white-space: nowrap; + } + &.collapsed { - width: 3.25rem !important; + @include force-width-important(3.25rem); .panel2-sidebar-title { opacity: 1; @@ -73,15 +103,13 @@ display: none; } - .panel2-header { - padding-left: 0; - padding-right: 0; - width: 3rem !important; - } - .panel2-collapse { transform: rotate(180deg); } + + & { + cursor: pointer; + } } } @@ -106,7 +134,7 @@ overflow: hidden; } - &.simple { + &.right { border: 0; border-left: 1px solid $color-border; width: 100%; @@ -177,6 +205,15 @@ @include absolute(50%, null, null, .5rem); } } + + &.right { + .panel2-collapse { + @include absolute(55%, .5rem, null, null); + display: none; + font-size: .9rem; + font-weight: lighter; + } + } } &-collapse { @@ -211,7 +248,7 @@ width: 100%; } - &.simple { + &.right { width: 100%; } @@ -234,8 +271,7 @@ } &-sidebar-title { - @include absolute(7rem, 1.5rem); - font-size: $font-small; + @include absolute(7rem, 1.75rem); opacity: 0; transform: rotate(270deg); transform-origin: right; @@ -278,8 +314,8 @@ } .nav-link { - border: 0; border-radius: $border-radius; + border: 0; color: lighten($color-text, 20%); cursor: pointer; font-size: inherit; @@ -294,17 +330,19 @@ margin-right: 1rem; } + &:hover, + &:active, &.active { background-color: $color-theme-brand-light; - color: $color-theme-brand; - cursor: default; - font-weight: 500; } &:hover { - background-color: $color-theme-brand-light; color: $color-text; } + + &.active { + color: $color-theme-brand; + } } .nav-heading { diff --git a/frontend/src/app/theme/_vars.scss b/frontend/src/app/theme/_vars.scss index 80e35983c..a0e539205 100644 --- a/frontend/src/app/theme/_vars.scss +++ b/frontend/src/app/theme/_vars.scss @@ -78,14 +78,16 @@ $panel-sidebar: 3.75rem; $font-small: 85%; $font-smallest: 80%; +$headings-line-height: 1.3; + $btn-disabled-color: inherit; $btn-disabled-bg: inherit; $btn-disabled-border-color: inherit; -$history-dot-size: 10px; -$history-dot-offset-x: -($history-dot-size * .5 + 1px); -$history-dot-sm-size: 6px; -$history-dot-sm-offset-x: -($history-dot-sm-size * .5 + 1px); +$history-dot-size: 10px; +$history-dot-offset-x: -($history-dot-size * .5 + 1px); +$history-dot-sm-size: 6px; +$history-dot-sm-offset-x: -($history-dot-sm-size * .5 + 1px); $asset-width: 14.5rem; $asset-folder-height: 4rem; diff --git a/frontend/src/config/webpack.config.js b/frontend/src/config/webpack.config.js index 416cf6f8b..7ab5f3bdd 100644 --- a/frontend/src/config/webpack.config.js +++ b/frontend/src/config/webpack.config.js @@ -74,11 +74,11 @@ module.exports = (config, _, options) => { if (index >= 0) { config.plugins.splice(index, 1); } - + config.plugins.push(new plugins.MiniCssExtractPlugin({ filename: '[name].css', })); - + /* * Specifies the name of each output file on disk. * @@ -93,7 +93,7 @@ module.exports = (config, _, options) => { */ config.output.chunkFilename = '[id].[fullhash].chunk.js'; - /* + /* * The filename for assets. */ config.output.assetModuleFilename = 'assets/[hash][ext][query]'; From a7405be4e1b864096854a0a15bdf43a3e0d7bd0a Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Mon, 5 Dec 2022 21:00:16 +0100 Subject: [PATCH 2/3] Gha (#946) * Typings for editor SDK. * Multiplatform build. * Remove old port. * Test something. * Gha build. * No set output. * Shared concurrency. * Remove old step. * Improve versions. --- .github/workflows/dev.yml | 116 ++++++++++------------------ .github/workflows/release.yml | 141 +++++++++++++++------------------- Dockerfile | 9 ++- 3 files changed, 105 insertions(+), 161 deletions(-) diff --git a/.github/workflows/dev.yml b/.github/workflows/dev.yml index 45029b267..8832f9ca4 100644 --- a/.github/workflows/dev.yml +++ b/.github/workflows/dev.yml @@ -1,5 +1,5 @@ name: Dev -concurrency: dev +concurrency: build on: push: @@ -16,94 +16,59 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v3.1.0 - name: Inject slug/short variables uses: rlespinasse/github-slug-action@v4.3.2 - - name: Calculate Version - env: - BUILD_NUMBER: ${{ github.run_number }} - run: | - echo "BUILD_NUMBER=$(($BUILD_NUMBER + 6000))" >> $GITHUB_ENV - - name: Set up QEMU uses: docker/setup-qemu-action@v2.1.0 - name: Set up Docker Buildx uses: docker/setup-buildx-action@v2.2.1 - - name: Cache Docker layers - uses: actions/cache@v3.0.11 + - name: Login to Docker Hub + uses: docker/login-action@v2.1.0 with: - path: /tmp/.buildx-cache - key: ${{ runner.os }}-buildx-${{ github.sha }} - restore-keys: | - ${{ runner.os }}-buildx- + username: ${{ secrets.DOCKER_USERNAME }} + password: ${{ secrets.DOCKER_PASSWORD }} - name: BUILD uses: docker/build-push-action@v3.2.0 with: - push: false - load: true - build-args: "SQUIDEX__VERSION=5.0.0-dev-${{ env.BUILD_NUMBER }}" - cache-from: type=local,src=/tmp/.buildx-cache - cache-to: type=local,dest=/tmp/.buildx-cache-new - tags: squidex-tmp - - - name: Export Image - run: docker save squidex-tmp | gzip > squidex-tmp.tar.gz - - - name: Save Image to Cache - uses: actions/cache@v3.0.11 - with: - path: squidex-tmp.tar.gz - key: squidex-dev-image-${{ github.sha }} - - - name: Move cache - run: | - rm -rf /tmp/.buildx-cache - mv /tmp/.buildx-cache-new /tmp/.buildx-cache + push: true + build-args: "SQUIDEX__RUNTIME__VERSION=7.0.0-dev-${{ env.BUILD_NUMBER }}" + cache-from: type=gha + cache-to: type=gha,mode=max + tags: squidex/squidex-build test: needs: build runs-on: ubuntu-latest steps: - - name: Calculate Version - env: - BUILD_NUMBER: ${{ github.run_number }} - run: | - echo "BUILD_NUMBER=$(($BUILD_NUMBER + 6000))" >> $GITHUB_ENV - - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v3.1.0 - name: Inject slug/short variables uses: rlespinasse/github-slug-action@v4.3.2 - - - name: Get Image From Cache - uses: actions/cache@v3.0.11 - with: - path: squidex-tmp.tar.gz - key: squidex-dev-image-${{ github.sha }} - - - name: Load Image - run: docker load < squidex-tmp.tar.gz + + - name: Pull from Cache + run: docker pull squidex/squidex-build - name: Replace Image Name1 uses: mikefarah/yq@v4.28.2 with: - cmd: yq e '.services.squidex1.image = "squidex-tmp"' -i backend/tests/docker-compose.yml + cmd: yq e '.services.squidex1.image = "squidex/squidex-build"' -i backend/tests/docker-compose.yml - name: Replace Image Name2 uses: mikefarah/yq@v4.28.2 with: - cmd: yq e '.services.squidex2.image = "squidex-tmp"' -i backend/tests/docker-compose.yml + cmd: yq e '.services.squidex2.image = "squidex/squidex-build"' -i backend/tests/docker-compose.yml - name: Replace Image Name3 uses: mikefarah/yq@v4.28.2 with: - cmd: yq e '.services.squidex3.image = "squidex-tmp"' -i backend/tests/docker-compose.yml + cmd: yq e '.services.squidex3.image = "squidex/squidex-build"' -i backend/tests/docker-compose.yml - name: Start Test run: docker-compose up -d @@ -166,42 +131,39 @@ jobs: publish: needs: test runs-on: ubuntu-latest + if: github.event_name != 'pull_request' steps: + - name: Checkout + uses: actions/checkout@v3.1.0 + + - name: Inject slug/short variables + uses: rlespinasse/github-slug-action@v4.3.2 + - name: Calculate Version env: BUILD_NUMBER: ${{ github.run_number }} run: | echo "BUILD_NUMBER=$(($BUILD_NUMBER + 6000))" >> $GITHUB_ENV - - name: Inject slug/short variables - uses: rlespinasse/github-slug-action@v4.3.2 + - name: Set up QEMU + uses: docker/setup-qemu-action@v2.1.0 + + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v2.2.1 - name: Login to Docker Hub uses: docker/login-action@v2.1.0 - if: github.event_name != 'pull_request' with: username: ${{ secrets.DOCKER_USERNAME }} password: ${{ secrets.DOCKER_PASSWORD }} - - name: Get Image From Cache - if: github.event_name != 'pull_request' - uses: actions/cache@v3.0.11 + - name: BUILD + uses: docker/build-push-action@v3.2.0 with: - path: squidex-tmp.tar.gz - key: squidex-dev-image-${{ github.sha }} - - - name: Load Image - if: github.event_name != 'pull_request' - run: docker load < squidex-tmp.tar.gz - - - name: Rename Tags - if: github.event_name != 'pull_request' - run: | - docker tag squidex-tmp squidex/squidex:dev - docker tag squidex-tmp squidex/squidex:dev-${{ env.BUILD_NUMBER }} - - - name: Push Tags - if: github.event_name != 'pull_request' - run: | - docker push squidex/squidex:dev - docker push squidex/squidex:dev-${{ env.BUILD_NUMBER }} + push: true + build-args: "SQUIDEX__RUNTIME__VERSION=7.0.0-dev-${{ env.BUILD_NUMBER }}" + cache-from: type=gha + cache-to: type=gha,mode=max + tags: | + squidex/squidex:dev + squidex/squidex:dev-${{ env.BUILD_NUMBER }} diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 5bee6fcc6..cb9ff8a6d 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -1,5 +1,5 @@ name: Release -concurrency: release +concurrency: build on: push: @@ -11,7 +11,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v3.1.0 - name: Inject slug/short variables uses: rlespinasse/github-slug-action@v4.3.2 @@ -22,71 +22,48 @@ jobs: - name: Set up Docker Buildx uses: docker/setup-buildx-action@v2.2.1 - - name: Cache Docker layers - uses: actions/cache@v3.0.11 + - name: Login to Docker Hub + uses: docker/login-action@v2.1.0 with: - path: /tmp/.buildx-cache - key: ${{ runner.os }}-buildx-${{ github.sha }} - restore-keys: | - ${{ runner.os }}-buildx- + username: ${{ secrets.DOCKER_USERNAME }} + password: ${{ secrets.DOCKER_PASSWORD }} - name: BUILD uses: docker/build-push-action@v3.2.0 with: - push: false - load: true - tags: squidex-tmp - build-args: "SQUIDEX__VERSION=${{ env.GITHUB_REF_SLUG }}" - cache-from: type=local,src=/tmp/.buildx-cache - cache-to: type=local,dest=/tmp/.buildx-cache-new - - - name: Export Image - run: docker save squidex-tmp | gzip > squidex-tmp.tar.gz - - - name: Save Image to Cache - uses: actions/cache@v3.0.11 - with: - path: squidex-tmp.tar.gz - key: squidex-release-image-${{ github.sha }} - - - name: Move cache - run: | - rm -rf /tmp/.buildx-cache - mv /tmp/.buildx-cache-new /tmp/.buildx-cache + push: true + build-args: "SQUIDEX__BUILD__VERSION=${{ env.GITHUB_REF_SLUG }},SQUIDEX__RUNTIME__VERSION=${{ env.GITHUB_REF_SLUG }}" + cache-from: type=gha + cache-to: type=gha,mode=max + tags: squidex/squidex-build test: needs: build runs-on: ubuntu-latest steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v3.1.0 - name: Inject slug/short variables uses: rlespinasse/github-slug-action@v4.3.2 - - - name: Get Image From Cache - uses: actions/cache@v3.0.11 - with: - path: squidex-tmp.tar.gz - key: squidex-release-image-${{ github.sha }} - - - name: Load Image - run: docker load < squidex-tmp.tar.gz + + - name: Pull from Cache + run: docker pull squidex/squidex-build - name: Replace Image Name1 uses: mikefarah/yq@v4.28.2 with: - cmd: yq e '.services.squidex1.image = "squidex-tmp"' -i backend/tests/docker-compose.yml + cmd: yq e '.services.squidex1.image = "squidex/squidex-build"' -i backend/tests/docker-compose.yml - name: Replace Image Name2 uses: mikefarah/yq@v4.28.2 with: - cmd: yq e '.services.squidex2.image = "squidex-tmp"' -i backend/tests/docker-compose.yml + cmd: yq e '.services.squidex2.image = "squidex/squidex-build"' -i backend/tests/docker-compose.yml - name: Replace Image Name3 uses: mikefarah/yq@v4.28.2 with: - cmd: yq e '.services.squidex3.image = "squidex-tmp"' -i backend/tests/docker-compose.yml + cmd: yq e '.services.squidex3.image = "squidex/squidex-build"' -i backend/tests/docker-compose.yml - name: Start Test run: docker-compose up -d @@ -150,18 +127,15 @@ jobs: needs: test runs-on: ubuntu-latest steps: + - name: Checkout + uses: actions/checkout@v3.1.0 + - name: Inject slug/short variables uses: rlespinasse/github-slug-action@v4.3.2 - - name: Login to Docker Hub - uses: docker/login-action@v2.1.0 - with: - username: ${{ secrets.DOCKER_USERNAME }} - password: ${{ secrets.DOCKER_PASSWORD }} - - name: Get Major Version id: version - uses: rishabhgupta/split-by@v1.0.1 + uses: rishabhgupta/split-by@v1 with: string: "${{ env.GITHUB_REF_SLUG }}" split-by: "." @@ -170,59 +144,64 @@ jobs: id: normal-version run: | if [[ ${{ env.GITHUB_REF_SLUG }} =~ ^[0-9]+\.[0-9]+$ ]]; then - echo ::set-output name=match::true + echo "STABLE_VERSION=true" >> $GITHUB_ENV fi - - name: Get Image From Cache - uses: actions/cache@v3.0.11 - with: - path: squidex-tmp.tar.gz - key: squidex-release-image-${{ github.sha }} + - name: Set up QEMU + uses: docker/setup-qemu-action@v2.1.0 - - name: Load Image - run: docker load < squidex-tmp.tar.gz + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v2.2.1 - - name: Rename Tags - run: | - docker tag squidex-tmp squidex/squidex:latest - docker tag squidex-tmp squidex/squidex:${{ env.GITHUB_REF_SLUG }} - docker tag squidex-tmp squidex/squidex:${{ steps.version.outputs._0 }} + - name: Login to Docker Hub + uses: docker/login-action@v2.1.0 + with: + username: ${{ secrets.DOCKER_USERNAME }} + password: ${{ secrets.DOCKER_PASSWORD }} - - name: Push Version - run: | - docker push squidex/squidex:latest - docker push squidex/squidex:${{ env.GITHUB_REF_SLUG }} - docker push squidex/squidex:${{ steps.version.outputs._0 }} + - name: BUILD + uses: docker/build-push-action@v3.2.0 + with: + push: true + build-args: "SQUIDEX__BUILD__VERSION=${{ env.GITHUB_REF_SLUG }},SQUIDEX__RUNTIME__VERSION=${{ env.GITHUB_REF_SLUG }}" + cache-from: type=gha + cache-to: type=gha,mode=max + tags: | + squidex/squidex:latest + squidex/squidex:${{ env.GITHUB_REF_SLUG }} + squidex/squidex:${{ steps.version.outputs._0 }} + if: env.STABLE_VERSION == 'true' - - name: Push Latest - run: | - docker push squidex/squidex:latest - if: steps.normal-version.outputs.match == 'true' + - name: BUILD + uses: docker/build-push-action@v3.2.0 + with: + push: true + build-args: "SQUIDEX__BUILD__VERSION=${{ env.GITHUB_REF_SLUG }},SQUIDEX__RUNTIME__VERSION=${{ env.GITHUB_REF_SLUG }}" + cache-from: type=gha + cache-to: type=gha,mode=max + tags: | + squidex/squidex:${{ env.GITHUB_REF_SLUG }} + squidex/squidex:${{ steps.version.outputs._0 }} + if: env.STABLE_VERSION != 'true' release: needs: publish runs-on: ubuntu-latest steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v3.1.0 - name: Inject slug/short variables uses: rlespinasse/github-slug-action@v4.3.2 - - - name: Get Image From Cache - uses: actions/cache@v3.0.11 - with: - path: squidex-tmp.tar.gz - key: squidex-release-image-${{ github.sha }} - - - name: Load Image - run: docker load < squidex-tmp.tar.gz + + - name: Pull from Cache + run: docker pull squidex/squidex-build - name: Make directories run: sudo mkdir /build /release - name: Create container - run: docker create --name squidex-container squidex-tmp:latest + run: docker create --name squidex-container squidex/squidex-build - name: Get binaries run: sudo docker cp squidex-container:/app/. /build diff --git a/Dockerfile b/Dockerfile index 7a3d1af0b..23d234f7c 100644 --- a/Dockerfile +++ b/Dockerfile @@ -3,7 +3,7 @@ # FROM mcr.microsoft.com/dotnet/sdk:7.0 as backend -ARG SQUIDEX__VERSION=7.0.0 +ARG SQUIDEX__BUILD__VERSION=7.0.0 WORKDIR /src @@ -30,7 +30,7 @@ COPY backend . RUN dotnet test --no-restore --filter Category!=Dependencies # Publish -RUN dotnet publish --no-restore src/Squidex/Squidex.csproj --output /build/ --configuration Release -p:version=$SQUIDEX__VERSION +RUN dotnet publish --no-restore src/Squidex/Squidex.csproj --output /build/ --configuration Release -p:version=$SQUIDEX__BUILD__VERSION # Install tools RUN dotnet tool install --tool-path /tools dotnet-counters \ @@ -70,6 +70,8 @@ RUN cp -a build /build/ # FROM mcr.microsoft.com/dotnet/aspnet:7.0-bullseye-slim +ARG SQUIDEX__RUNTIME__VERSION=7.0.0 + # Curl for debugging and libc-dev for protobuf RUN apt-get update \ && apt-get install -y curl libc-dev @@ -89,7 +91,6 @@ COPY --from=frontend /build/ wwwroot/build/ EXPOSE 80 EXPOSE 443 -EXPOSE 11111 ENV DIAGNOSTICS__COUNTERSTOOL=/tools/dotnet-counters ENV DIAGNOSTICS__DUMPTOOL=/tools/dotnet-dump @@ -97,3 +98,5 @@ ENV DIAGNOSTICS__GCDUMPTOOL=/tools/dotnet-gcdump ENV DIAGNOSTICS__TRACETOOL=/tools/dotnet-trace ENTRYPOINT ["dotnet", "Squidex.dll"] + +ENV EXPOSEDCONFIGURATION__VERSION=$SQUIDEX__RUNTIME__VERSION \ No newline at end of file From b607c8606249b52c4e695d2edfe3a999e1ad7e80 Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Tue, 6 Dec 2022 09:57:58 +0100 Subject: [PATCH 3/3] Change category name (#948) * Typings for editor SDK. * Fix line height and cut text. * Improve integrated documentation for .NET SDK * Add access token to preview URL. * Change category name. * Fix tests. --- .../rules/pages/rules/rule.component.html | 13 +- .../pages/clients/client.component.html | 10 +- .../workflows/workflow-step.component.html | 7 +- .../app/framework/angular/avatar.stories.tsx | 11 +- .../forms/editable-title.component.html | 63 ++++---- .../forms/editable-title.component.scss | 46 +++--- .../angular/forms/editable-title.component.ts | 51 ++++--- .../angular/forms/editable-title.stories.ts | 134 ++++++++++++++++++ .../components/schema-category.component.html | 15 +- .../components/schema-category.component.scss | 19 ++- .../components/schema-category.component.ts | 6 + .../app/shared/state/schemas.state.spec.ts | 12 ++ .../src/app/shared/state/schemas.state.ts | 27 +++- 13 files changed, 317 insertions(+), 97 deletions(-) create mode 100644 frontend/src/app/framework/angular/forms/editable-title.stories.ts diff --git a/frontend/src/app/features/rules/pages/rules/rule.component.html b/frontend/src/app/features/rules/pages/rules/rule.component.html index 2771ba252..991650598 100644 --- a/frontend/src/app/features/rules/pages/rules/rule.component.html +++ b/frontend/src/app/features/rules/pages/rules/rule.component.html @@ -2,12 +2,13 @@
- +
diff --git a/frontend/src/app/features/settings/pages/clients/client.component.html b/frontend/src/app/features/settings/pages/clients/client.component.html index f9b98d175..a5afdae21 100644 --- a/frontend/src/app/features/settings/pages/clients/client.component.html +++ b/frontend/src/app/features/settings/pages/clients/client.component.html @@ -1,8 +1,12 @@
-
+
- +
@@ -10,7 +14,7 @@ {{ 'clients.connect' | sqxTranslate }}
-
+
- - + +
+
+
+ + +
- +
+ +
+
+ +
+
+ - -
-

- {{name || fallback}} + +
+
+

+ {{inputTitle || displayFallback}}

- -
- -
\ No newline at end of file +
+ +
+
+ +
+

+ \ No newline at end of file diff --git a/frontend/src/app/framework/angular/forms/editable-title.component.scss b/frontend/src/app/framework/angular/forms/editable-title.component.scss index 5579d5550..eb5b6f36c 100644 --- a/frontend/src/app/framework/angular/forms/editable-title.component.scss +++ b/frontend/src/app/framework/angular/forms/editable-title.component.scss @@ -1,34 +1,36 @@ @import 'mixins'; @import 'vars'; -.title { - @include hover-visible('.title-edit', inline); - position: relative; - - &-edit { - @include absolute(0, 0, null, null); - color: darken($color-border-dark, 20%); - cursor: pointer; - padding: .6rem .25rem; - } +:host { + display: block; +} - &-name { - display: inline; - font-size: 1.2rem; - font-weight: normal; - padding-right: 1.75rem; - } +.title-view { + @include hover-visible('.title-edit', block); - &-view { - @include truncate; - border-bottom: 1px solid transparent; - border-top: 0; - padding: .375rem 0; - position: absolute; + .col { + overflow: hidden; } } +.btn-placeholder { + padding-left: 0; + padding-right: 0; + width: 0; +} + +.row { + flex-wrap: nowrap; +} + h3 { + margin: 0; + + &.sm { + font-size: 1rem; + font-weight: normal; + } + &.fallback { color: $color-text-decent; } diff --git a/frontend/src/app/framework/angular/forms/editable-title.component.ts b/frontend/src/app/framework/angular/forms/editable-title.component.ts index 9c2a0a114..2d69fb0ab 100644 --- a/frontend/src/app/framework/angular/forms/editable-title.component.ts +++ b/frontend/src/app/framework/angular/forms/editable-title.component.ts @@ -6,42 +6,41 @@ */ import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { UntypedFormControl, Validators } from '@angular/forms'; +import { FormControl, ValidatorFn, Validators } from '@angular/forms'; import { Keys } from '@app/framework/internal'; @Component({ - selector: 'sqx-editable-title[name]', + selector: 'sqx-editable-title[inputTitle]', styleUrls: ['./editable-title.component.scss'], templateUrl: './editable-title.component.html', }) export class EditableTitleComponent { @Output() - public nameChange = new EventEmitter(); + public inputTitleChange = new EventEmitter(); @Input() - public disabled?: boolean | null; + public inputTitle!: string; @Input() - public fallback = ''; + public inputTitleLength = 20; @Input() - public name!: string; + public inputTitleRequired = true; @Input() - public maxLength = 20; + public disabled?: boolean | null; @Input() - public set isRequired(value: boolean) { - const validator = - value ? - Validators.required : - Validators.nullValidator; + public closeButton = true; - this.renameForm.setValidators(validator); - } + @Input() + public size: 'sm' | 'md' | 'lg' = 'md'; + + @Input() + public displayFallback = ''; public renaming = false; - public renameForm = new UntypedFormControl(); + public renameForm = new FormControl(''); public onKeyDown(event: KeyboardEvent) { if (Keys.isEscape(event)) { @@ -54,7 +53,21 @@ export class EditableTitleComponent { return; } - this.renameForm.setValue(this.name || ''); + if (!this.renaming) { + let validators: ValidatorFn[] = []; + + if (this.inputTitleLength) { + validators.push(Validators.maxLength(this.inputTitleLength)); + } + + if (this.inputTitleRequired) { + validators.push(Validators.required); + } + + this.renameForm.setValidators(validators); + } + + this.renameForm.setValue(this.inputTitle || ''); this.renaming = !this.renaming; } @@ -64,10 +77,10 @@ export class EditableTitleComponent { } if (this.renameForm.valid) { - const name = this.renameForm.value; + const text = this.renameForm.value || ''; - this.nameChange.emit(name); - this.name = name; + this.inputTitleChange.emit(text); + this.inputTitle = text; this.renaming = false; } diff --git a/frontend/src/app/framework/angular/forms/editable-title.stories.ts b/frontend/src/app/framework/angular/forms/editable-title.stories.ts new file mode 100644 index 000000000..7f1ec2d0b --- /dev/null +++ b/frontend/src/app/framework/angular/forms/editable-title.stories.ts @@ -0,0 +1,134 @@ +/* + * Squidex Headless CMS + * + * @license + * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. + */ + +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { moduleMetadata } from '@storybook/angular'; +import { Meta, Story } from '@storybook/angular/types-6-0'; +import { EditableTitleComponent, LocalizerService, SqxFrameworkModule } from '@app/framework'; + +export default { + title: 'Framework/EditableTitle', + component: EditableTitleComponent, + argTypes: { + inputTitle: { + control: 'inputTitle', + }, + closeButton: { + control: 'boolean', + }, + inputTitleRequired: { + control: 'boolean', + }, + inputTitleLength: { + control: 'number', + }, + size: { + control: 'select', + options: [ + 'sm', + 'md', + 'lg', + ], + }, + }, + args: { + closeButton: true, + inputTitleLength: 30, + inputTitleRequired: true, + }, + decorators: [ + moduleMetadata({ + imports: [ + BrowserAnimationsModule, + FormsModule, + ReactiveFormsModule, + SqxFrameworkModule, + SqxFrameworkModule.forRoot(), + ], + providers: [ + { provide: LocalizerService, useValue: new LocalizerService({}) }, + ], + }), + ], +} as Meta; + +const Template: Story = (args: EditableTitleComponent) => ({ + props: args, + template: ` +
+
+
+ + +
+
+ +
+
+
+ `, +}); + +export const Default = Template.bind({}); + +Default.args = { + inputTitle: 'My Title', + size: 'md', +}; + +export const DefaultNoCloseButton = Template.bind({}); + +DefaultNoCloseButton.args = { + inputTitle: 'My Title', + size: 'md', + closeButton: false, +}; + +export const Small = Template.bind({}); + +Small.args = { + inputTitle: 'My Title', + size: 'sm', +}; + +export const SmallNoCloseButton = Template.bind({}); + +SmallNoCloseButton.args = { + inputTitle: 'My Title', + size: 'sm', + closeButton: false, +}; + +export const Large = Template.bind({}); + +Large.args = { + inputTitle: 'My Title', + size: 'lg', +}; + +export const LargeNoCloseButton = Template.bind({}); + +LargeNoCloseButton.args = { + inputTitle: 'My Title', + size: 'lg', + closeButton: false, +}; + +export const LongTitle = Template.bind({}); + +LongTitle.args = { + inputTitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua', + size: 'md', +}; \ No newline at end of file diff --git a/frontend/src/app/shared/components/schema-category.component.html b/frontend/src/app/shared/components/schema-category.component.html index 0f914a115..2ad60eb6e 100644 --- a/frontend/src/app/shared/components/schema-category.component.html +++ b/frontend/src/app/shared/components/schema-category.component.html @@ -6,16 +6,21 @@ (cdkDropListDropped)="changeCategory($event)">
  • -
    +
    -
    -
    - {{schemaCategory.displayName | sqxTranslate}} -
    +
    + +
    diff --git a/frontend/src/app/shared/components/schema-category.component.scss b/frontend/src/app/shared/components/schema-category.component.scss index 542d20fa3..140a16f43 100644 --- a/frontend/src/app/shared/components/schema-category.component.scss +++ b/frontend/src/app/shared/components/schema-category.component.scss @@ -3,10 +3,6 @@ $drag-margin: -8px; -.col { - overflow: hidden; -} - .btn { width: 2rem; @@ -59,6 +55,7 @@ $drag-margin: -8px; .nav-heading { margin-left: -1rem; margin-top: 0; + max-width: none; } .nav-collapsed { @@ -69,6 +66,14 @@ $drag-margin: -8px; margin-top: 1rem; } +.nav-category { + max-width: 100%; +} + +.nav-panel { + max-width: 100%; +} + .nav-item { align-items: center; @@ -81,12 +86,6 @@ $drag-margin: -8px; margin-bottom: 1px; } -.nav-category, -.nav-panel, -sqx-schema-category { - max-width: 100%; -} - .categories { padding: 0; padding-left: 1rem; diff --git a/frontend/src/app/shared/components/schema-category.component.ts b/frontend/src/app/shared/components/schema-category.component.ts index d922c2a41..a741db883 100644 --- a/frontend/src/app/shared/components/schema-category.component.ts +++ b/frontend/src/app/shared/components/schema-category.component.ts @@ -65,6 +65,12 @@ export class SchemaCategoryComponent implements OnChanges { } } + public changeName(name: string) { + if (name !== this.schemaCategory.displayName) { + this.schemasState.renameCategory(this.schemaCategory.displayName, name); + } + } + public changeCategory(drag: CdkDragDrop) { if (drag.previousContainer !== drag.container) { this.schemasState.changeCategory(drag.item.data, this.schemaCategory.name); diff --git a/frontend/src/app/shared/state/schemas.state.spec.ts b/frontend/src/app/shared/state/schemas.state.spec.ts index 34c58793b..da0b1fc4f 100644 --- a/frontend/src/app/shared/state/schemas.state.spec.ts +++ b/frontend/src/app/shared/state/schemas.state.spec.ts @@ -474,6 +474,18 @@ describe('SchemasState', () => { expect(schemasState.snapshot.schemas).toEqual([updated, schema2]); expect(schemasState.snapshot.selectedSchema).toEqual(updated); }); + + it('should update schema with matching category', () => { + const updated = createSchema(1, '_new'); + + schemasService.setup(x => x.putCategory(app, schema1, { name: 'new-name' }, version)) + .returns(() => of(updated)).verifiable(); + + schemasState.renameCategory('schema-category1', 'new-name').subscribe(); + + expect(schemasState.snapshot.schemas).toEqual([updated, schema2]); + expect(schemasState.snapshot.selectedSchema).toEqual(updated); + }); }); }); diff --git a/frontend/src/app/shared/state/schemas.state.ts b/frontend/src/app/shared/state/schemas.state.ts index 03515172f..7368997ef 100644 --- a/frontend/src/app/shared/state/schemas.state.ts +++ b/frontend/src/app/shared/state/schemas.state.ts @@ -6,7 +6,7 @@ */ import { Injectable } from '@angular/core'; -import { EMPTY, Observable, of } from 'rxjs'; +import { EMPTY, forkJoin, Observable, of } from 'rxjs'; import { catchError, finalize, tap } from 'rxjs/operators'; import { DialogService, LoadingState, shareMapSubscribed, shareSubscribed, State, Version } from '@app/framework'; import { AddFieldDto, CreateSchemaDto, FieldDto, FieldRule, NestedFieldDto, RootFieldDto, SchemaDto, SchemasService, UpdateFieldDto, UpdateSchemaDto, UpdateUIFields } from './../services/schemas.service'; @@ -186,6 +186,31 @@ export class SchemasState extends State { }, 'Category Removed'); } + public renameCategory(oldName: string, name: string) { + const schemas = this.snapshot.schemas.filter(x => x.category === oldName); + + return forkJoin(schemas.map(s => this.schemasService.putCategory(this.appName, s, { name }, s.version))).pipe( + tap(updated => { + this.next(s => { + let { schemas, selectedSchema } = s; + + for (const schema of updated) { + schemas = schemas.replacedBy('id', schema).sortedByString(x => x.displayName); + + selectedSchema = + schema && + selectedSchema && + selectedSchema.id === schema.id ? + schema : + selectedSchema; + } + + return { ...s, schemas, selectedSchema }; + }, 'Updated'); + }), + shareSubscribed(this.dialogs)); + } + public publish(schema: SchemaDto): Observable { return this.schemasService.publishSchema(this.appName, schema, schema.version).pipe( tap(updated => {