From f3fb6512875511e63d9c30d1e38c759daba7cf14 Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Sat, 14 Jun 2025 16:09:07 +0200 Subject: [PATCH] Small UI improvements. --- frontend/angular.json | 8 +- .../clients/client-add-form.component.html | 2 +- .../contributor-add-form.component.html | 2 +- .../pages/jobs/jobs-page.component.html | 2 +- .../language-add-form.component.html | 2 +- .../pages/plans/plans-page.component.html | 2 - .../pages/roles/role-add-form.component.html | 48 +++--- .../pages/roles/roles-page.component.html | 2 +- .../templates/templates-page.component.html | 2 +- .../workflow-add-form.component.html | 48 +++--- .../workflows/workflows-page.component.html | 8 +- .../contributor-add-form.component.html | 2 +- .../modals/dialog-renderer.component.html | 7 +- .../modals/dialog-renderer.component.scss | 47 +++--- .../angular/modals/dialog-renderer.stories.ts | 139 ++++++++++++++++++ frontend/src/app/theme/_bootstrap.scss | 4 + 16 files changed, 238 insertions(+), 87 deletions(-) create mode 100644 frontend/src/app/framework/angular/modals/dialog-renderer.stories.ts diff --git a/frontend/angular.json b/frontend/angular.json index 69701a029..6790b6ce6 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -200,7 +200,13 @@ "configDir": ".storybook", "browserTarget": "squidex:build", "compodoc": false, - "port": 6006 + "port": 6006, + "stylePreprocessorOptions": { + "includePaths": [ + "./src/app/theme", + "node_modules" + ] + } } }, "build-storybook": { diff --git a/frontend/src/app/features/settings/pages/clients/client-add-form.component.html b/frontend/src/app/features/settings/pages/clients/client-add-form.component.html index 586d26524..98cf7e28f 100644 --- a/frontend/src/app/features/settings/pages/clients/client-add-form.component.html +++ b/frontend/src/app/features/settings/pages/clients/client-add-form.component.html @@ -1,4 +1,4 @@ -
+
{{ "clients.add.title" | sqxTranslate }}
diff --git a/frontend/src/app/features/settings/pages/contributors/contributor-add-form.component.html b/frontend/src/app/features/settings/pages/contributors/contributor-add-form.component.html index 0b5dbefe0..0b3d3659c 100644 --- a/frontend/src/app/features/settings/pages/contributors/contributor-add-form.component.html +++ b/frontend/src/app/features/settings/pages/contributors/contributor-add-form.component.html @@ -1,4 +1,4 @@ -
+
{{ "contributors.add.title" | sqxTranslate }}
diff --git a/frontend/src/app/features/settings/pages/jobs/jobs-page.component.html b/frontend/src/app/features/settings/pages/jobs/jobs-page.component.html index cca5b2e9b..e6e6985df 100644 --- a/frontend/src/app/features/settings/pages/jobs/jobs-page.component.html +++ b/frontend/src/app/features/settings/pages/jobs/jobs-page.component.html @@ -1,5 +1,5 @@ - + -
+
+ +
-
- -
+
+
- - {{ "roles.add.description" | sqxTranslate }} -
+
+ + {{ "roles.add.description" | sqxTranslate }}
diff --git a/frontend/src/app/features/settings/pages/roles/roles-page.component.html b/frontend/src/app/features/settings/pages/roles/roles-page.component.html index 3e3a9d989..af0b9dd53 100644 --- a/frontend/src/app/features/settings/pages/roles/roles-page.component.html +++ b/frontend/src/app/features/settings/pages/roles/roles-page.component.html @@ -15,7 +15,7 @@ @if (rolesState.defaultRoles | async; as defaultRoles) { @if (defaultRoles.length > 0) {
-
{{ "roles.defaultRoles" | sqxTranslate }}
+
{{ "roles.defaultRoles" | sqxTranslate }}
{{ "roles.defaultRoles.hint" | sqxTranslate }} @for (role of defaultRoles; track role.name) { diff --git a/frontend/src/app/features/settings/pages/templates/templates-page.component.html b/frontend/src/app/features/settings/pages/templates/templates-page.component.html index a9a942116..e5b372b0a 100644 --- a/frontend/src/app/features/settings/pages/templates/templates-page.component.html +++ b/frontend/src/app/features/settings/pages/templates/templates-page.component.html @@ -1,5 +1,5 @@ - + -
+
+ +
-
- -
+
+
- - {{ "workflows.add.description" | sqxTranslate }} - + + + {{ "workflows.add.description" | sqxTranslate }} diff --git a/frontend/src/app/features/settings/pages/workflows/workflows-page.component.html b/frontend/src/app/features/settings/pages/workflows/workflows-page.component.html index 47888abf2..98ac8b1c9 100644 --- a/frontend/src/app/features/settings/pages/workflows/workflows-page.component.html +++ b/frontend/src/app/features/settings/pages/workflows/workflows-page.component.html @@ -24,6 +24,10 @@ } } + @if (workflowsState.canCreate | async) { + + } + @if (schemasSource && (workflowsState.isLoaded | async) && (workflowsState.workflows | async); as workflows) { @for (workflow of workflows; track workflow.id) { @@ -32,10 +36,6 @@ {{ "workflows.empty" | sqxTranslate }} } - - @if (workflowsState.canCreate | async) { - - } } diff --git a/frontend/src/app/features/teams/pages/contributors/contributor-add-form.component.html b/frontend/src/app/features/teams/pages/contributors/contributor-add-form.component.html index fc90b3972..71e35fc03 100644 --- a/frontend/src/app/features/teams/pages/contributors/contributor-add-form.component.html +++ b/frontend/src/app/features/teams/pages/contributors/contributor-add-form.component.html @@ -1,4 +1,4 @@ -
+
{{ "contributors.add.title" | sqxTranslate }}
diff --git a/frontend/src/app/framework/angular/modals/dialog-renderer.component.html b/frontend/src/app/framework/angular/modals/dialog-renderer.component.html index 64f41f3e7..9ed46ac67 100644 --- a/frontend/src/app/framework/angular/modals/dialog-renderer.component.html +++ b/frontend/src/app/framework/angular/modals/dialog-renderer.component.html @@ -19,12 +19,13 @@ } +
@for (notification of snapshot.notifications; track notification) { - diff --git a/frontend/src/app/framework/angular/modals/dialog-renderer.component.scss b/frontend/src/app/framework/angular/modals/dialog-renderer.component.scss index a4eb1e998..82eff4beb 100644 --- a/frontend/src/app/framework/angular/modals/dialog-renderer.component.scss +++ b/frontend/src/app/framework/angular/modals/dialog-renderer.component.scss @@ -34,25 +34,31 @@ &-bottom-left { @include fixed(auto, auto, 0, 0); } +} - .shadow, - .shadowed { - position: relative; - } +.alert { + overflow-x: hidden; + overflow-y: hidden; +} + +.timed { + position: relative; +} + +.timer { + @include absolute(0, auto, 0, 0); + animation: width 10s 1 linear; + border: 0; + border-radius: 0; + height: 4px; + width: 100%; - .shadowed { - z-index: 2; + &-danger { + background-color: $color-theme-error; } - .shadow { - @include absolute(0, auto, 0, 0); - animation: width 10s 1 linear; - background: $color-black; - border: 0; - opacity: .1; - overflow: hidden; - width: 100%; - z-index: 1; + &-primary { + background-color: $color-theme-brand; } } @@ -71,12 +77,13 @@ $caret-size: 6px; color: $color-white; font-size: $font-small; font-weight: normal; - padding: .5rem; + padding: .25rem .5rem; + pointer-events: none; white-space: nowrap; &-left { &::after { - @include caret-right($color-tooltip, $caret-size); + @include caret-right($color-tooltip, $caret-size + 1px); @include absolute(50%, -$caret-size * 2, auto, auto); margin-top: -$caret-size; } @@ -84,7 +91,7 @@ $caret-size: 6px; &-right { &::after { - @include caret-left($color-tooltip, $caret-size); + @include caret-left($color-tooltip, $caret-size + 1px); @include absolute(50%, auto, auto, -$caret-size * 2); margin-top: -$caret-size; } @@ -92,7 +99,7 @@ $caret-size: 6px; &-top { &::after { - @include caret-bottom($color-tooltip, $caret-size); + @include caret-bottom($color-tooltip, $caret-size + 1px); @include absolute(auto, auto, -$caret-size * 2, 50%); margin-left: -$caret-size; } @@ -100,7 +107,7 @@ $caret-size: 6px; &-bottom { &::after { - @include caret-top($color-tooltip, $caret-size); + @include caret-top($color-tooltip, $caret-size + 1px); @include absolute(-$caret-size * 2, auto, auto, 50%); margin-left: -$caret-size; } diff --git a/frontend/src/app/framework/angular/modals/dialog-renderer.stories.ts b/frontend/src/app/framework/angular/modals/dialog-renderer.stories.ts new file mode 100644 index 000000000..cf1b29d4b --- /dev/null +++ b/frontend/src/app/framework/angular/modals/dialog-renderer.stories.ts @@ -0,0 +1,139 @@ +/* + * Squidex Headless CMS + * + * @license + * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. + */ + +import { Component, inject, Input } from '@angular/core'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; +import { ConfirmClickDirective, DialogRendererComponent, DialogService, ErrorDto, LocalizerService, RootViewComponent, TooltipDirective } from '@app/framework'; + +type TestMode = 'ErrorText' | 'ErrorDetails' | 'Info'; + +@Component({ + selector: 'sqx-test', + template: ` + + `, + imports: [ + DialogRendererComponent, + ], +}) +class TestComponent { + public readonly dialogs = inject(DialogService); + + @Input() + public mode: TestMode = 'Info'; + + public test() { + if (this.mode === 'ErrorDetails') { + const error = new ErrorDto(500, + 'Error in Server', + 'Error Code', + [ + 'Details 1', + 'Details 2', + 'Details 3', + 'Details 4', + ], + ); + + this.dialogs.notifyError(error); + } else if (this.mode === 'ErrorText') { + this.dialogs.notifyError('Error'); + } else { + this.dialogs.notifyInfo('Info'); + } + } +} + +export default { + title: 'Framework/Dialogs', + component: DialogRendererComponent, + decorators: [ + moduleMetadata({ + imports: [ + BrowserAnimationsModule, + ConfirmClickDirective, + RootViewComponent, + TestComponent, + TooltipDirective, + ], + providers: [ + DialogService, + { + provide: LocalizerService, + useValue: new LocalizerService({ + 'common.no': 'No', + 'common.remember': 'Remember', + 'common.yes': 'Yes', + }), + }, + ], + }), + ], + render: args => ({ + props: args, + template: ` + +
+

Dialogs

+
+ + + +
+ +

Tooltips

+
+ + + + +
+ +

Immediate Tooltips

+
+ + + + +
+ +

Confirm

+
+ + + +
+
+ + + + `, + }), +} as Meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + }, +}; \ No newline at end of file diff --git a/frontend/src/app/theme/_bootstrap.scss b/frontend/src/app/theme/_bootstrap.scss index 6ced88ba6..f464eb9ff 100644 --- a/frontend/src/app/theme/_bootstrap.scss +++ b/frontend/src/app/theme/_bootstrap.scss @@ -669,6 +669,10 @@ $icon-size: 4.5rem; &-title { margin-bottom: 1rem; } + + &-create { + padding: 1.5rem 2rem; + } } //