From 04b0b964b9e2c161cd7b1e42dd7cf3b114b87d9f Mon Sep 17 00:00:00 2001 From: Sebastian Stehle Date: Sat, 2 Nov 2019 22:51:09 +0100 Subject: [PATCH] Style improvements. --- frontend/app/_theme.html | 2 +- .../event-consumer.component.ts | 2 +- .../apps/pages/apps-page.component.html | 2 +- .../content-history-page.component.scss | 5 +- .../contents/contents-page.component.scss | 2 +- .../rules/pages/rules/rule.component.scss | 2 +- .../pages/schema/field-wizard.component.html | 2 +- .../pages/schema/field-wizard.component.scss | 1 + .../schemas/pages/schema/field.component.scss | 2 +- .../forms/field-form-common.component.ts | 12 ++--- .../schema/forms/field-form.component.ts | 2 +- .../schema/schema-edit-form.component.html | 2 +- .../schema/schema-export-form.component.scss | 2 + .../pages/schema/schema-fields.component.html | 52 +++++++++---------- .../pages/schema/schema-fields.component.scss | 5 +- .../pages/schema/schema-page.component.ts | 8 ++- .../schema/schema-scripts-form.component.scss | 2 + .../schema/types/references-ui.component.html | 2 +- .../clients/client-add-form.component.ts | 2 +- .../contributor-add-form.component.scss | 2 + .../contributors-page.component.html | 50 +++++++++--------- .../contributors-page.component.scss | 6 ++- .../pages/languages/language.component.html | 4 +- .../pages/roles/role-add-form.component.ts | 2 +- .../settings/pages/roles/role.component.html | 4 +- .../workflows/workflow-add-form.component.ts | 2 +- .../pages/workflows/workflow.component.html | 4 +- .../angular/forms/form-hint.component.ts | 11 ++++ .../shared/components/comment.component.scss | 4 -- .../components/history-list.component.scss | 6 +-- frontend/app/theme/_bootstrap-vars.scss | 10 ++-- frontend/app/theme/_bootstrap.scss | 2 +- frontend/app/theme/_forms.scss | 17 +++++- frontend/app/theme/_lists.scss | 6 +-- frontend/app/theme/_panels.scss | 7 +-- frontend/app/theme/_vars.scss | 17 +++--- 36 files changed, 151 insertions(+), 112 deletions(-) diff --git a/frontend/app/_theme.html b/frontend/app/_theme.html index 708cac3aa..11ca22d7a 100644 --- a/frontend/app/_theme.html +++ b/frontend/app/_theme.html @@ -512,7 +512,7 @@
- We'll never share your email with anyone else. + We'll never share your email with anyone else.
diff --git a/frontend/app/features/administration/pages/event-consumers/event-consumer.component.ts b/frontend/app/features/administration/pages/event-consumers/event-consumer.component.ts index 65a692e4e..9c72686a1 100644 --- a/frontend/app/features/administration/pages/event-consumers/event-consumer.component.ts +++ b/frontend/app/features/administration/pages/event-consumers/event-consumer.component.ts @@ -15,7 +15,7 @@ import { EventConsumerDto, EventConsumersState } from '@app/features/administrat selector: '[sqxEventConsumer]', template: ` - + diff --git a/frontend/app/features/apps/pages/apps-page.component.html b/frontend/app/features/apps/pages/apps-page.component.html index 60fac9e55..e993078b0 100644 --- a/frontend/app/features/apps/pages/apps-page.component.html +++ b/frontend/app/features/apps/pages/apps-page.component.html @@ -111,7 +111,7 @@
-
{{info}}
+
asdsadd
- You can the field as localizable. It means that is dependent on the language, for example a city name. + You can mark the field as localizable. It means that is dependent on the language, for example a city name. diff --git a/frontend/app/features/schemas/pages/schema/field-wizard.component.scss b/frontend/app/features/schemas/pages/schema/field-wizard.component.scss index 230605fcd..de0add640 100644 --- a/frontend/app/features/schemas/pages/schema/field-wizard.component.scss +++ b/frontend/app/features/schemas/pages/schema/field-wizard.component.scss @@ -6,6 +6,7 @@ $icon-size: 4.5rem; :host ::ng-deep { .table-items-row-details-tab { padding: 1.5rem 1.75rem; + padding-bottom: 0; } } diff --git a/frontend/app/features/schemas/pages/schema/field.component.scss b/frontend/app/features/schemas/pages/schema/field.component.scss index 8b2574a57..894871e4d 100644 --- a/frontend/app/features/schemas/pages/schema/field.component.scss +++ b/frontend/app/features/schemas/pages/schema/field.component.scss @@ -44,7 +44,7 @@ $padding: 1rem; position: relative; border: 1px solid $color-border; border-top-width: 0; - background: $color-table-footer; + background: $color-theme-secondary; } .nested-field { diff --git a/frontend/app/features/schemas/pages/schema/forms/field-form-common.component.ts b/frontend/app/features/schemas/pages/schema/forms/field-form-common.component.ts index 3076ccc91..b6b010547 100644 --- a/frontend/app/features/schemas/pages/schema/forms/field-form-common.component.ts +++ b/frontend/app/features/schemas/pages/schema/forms/field-form-common.component.ts @@ -17,7 +17,7 @@ import { FieldDto } from '@app/shared';
-
+
@@ -29,13 +29,13 @@ import { FieldDto } from '@app/shared';
-
+
- Define the display name for the field for documentation and user interfaces. + Display name for documentation and user interfaces.
@@ -43,13 +43,13 @@ import { FieldDto } from '@app/shared';
-
+
- Define some hints for the user and editor for the field for documentation and user interfaces. + Describe this field for documentation and user interfaces.
@@ -87,7 +87,7 @@ import { FieldDto } from '@app/shared';
-
+
diff --git a/frontend/app/features/schemas/pages/schema/forms/field-form.component.ts b/frontend/app/features/schemas/pages/schema/forms/field-form.component.ts index c6403885b..6385c5c99 100644 --- a/frontend/app/features/schemas/pages/schema/forms/field-form.component.ts +++ b/frontend/app/features/schemas/pages/schema/forms/field-form.component.ts @@ -27,7 +27,7 @@ import { FieldDto, PatternDto } from '@app/shared';
- +
diff --git a/frontend/app/features/schemas/pages/schema/schema-edit-form.component.html b/frontend/app/features/schemas/pages/schema/schema-edit-form.component.html index b57572a8d..41b80f503 100644 --- a/frontend/app/features/schemas/pages/schema/schema-edit-form.component.html +++ b/frontend/app/features/schemas/pages/schema/schema-edit-form.component.html @@ -17,7 +17,7 @@ - If the label is defined it will be shown in the UI instead of the schema name. + Display name for documentation and user interfaces.
diff --git a/frontend/app/features/schemas/pages/schema/schema-export-form.component.scss b/frontend/app/features/schemas/pages/schema/schema-export-form.component.scss index 559e9a651..220b21514 100644 --- a/frontend/app/features/schemas/pages/schema/schema-export-form.component.scss +++ b/frontend/app/features/schemas/pages/schema/schema-export-form.component.scss @@ -15,6 +15,8 @@ } .inner-header { + background: $color-theme-secondary; + border: 0; padding: 1rem $panel-padding; } diff --git a/frontend/app/features/schemas/pages/schema/schema-fields.component.html b/frontend/app/features/schemas/pages/schema/schema-fields.component.html index 45e69c554..ca1e4b9ed 100644 --- a/frontend/app/features/schemas/pages/schema/schema-fields.component.html +++ b/frontend/app/features/schemas/pages/schema/schema-fields.component.html @@ -1,33 +1,31 @@ -
-
- No field created yet. - - -
+
+ No field created yet. + + +
- -
-
- - - -
+ +
+
+ + +
+
- - -
+ + { if (Types.is(event, NavigationEnd)) { - this.selectedTab = this.route.firstChild!.snapshot.routeConfig!.path!; + this.updateTab(); } })); @@ -65,6 +67,10 @@ export class SchemaPageComponent extends ResourceOwner implements OnInit { })); } + private updateTab() { + this.selectedTab = this.route.firstChild!.snapshot.routeConfig!.path!; + } + public publish() { this.schemasState.publish(this.schema).subscribe(); } diff --git a/frontend/app/features/schemas/pages/schema/schema-scripts-form.component.scss b/frontend/app/features/schemas/pages/schema/schema-scripts-form.component.scss index 559e9a651..220b21514 100644 --- a/frontend/app/features/schemas/pages/schema/schema-scripts-form.component.scss +++ b/frontend/app/features/schemas/pages/schema/schema-scripts-form.component.scss @@ -15,6 +15,8 @@ } .inner-header { + background: $color-theme-secondary; + border: 0; padding: 1rem $panel-padding; } diff --git a/frontend/app/features/schemas/pages/schema/types/references-ui.component.html b/frontend/app/features/schemas/pages/schema/types/references-ui.component.html index 0f03581b8..4f9cc2372 100644 --- a/frontend/app/features/schemas/pages/schema/types/references-ui.component.html +++ b/frontend/app/features/schemas/pages/schema/types/references-ui.component.html @@ -30,7 +30,7 @@
- Check this item to resolve display names for referenced items for the content list.
Can only be checked when the MaxItems field in the validation tab is set to 1. + Show the name of the referenced item in content list when MaxItems is set to 1.
diff --git a/frontend/app/features/settings/pages/clients/client-add-form.component.ts b/frontend/app/features/settings/pages/clients/client-add-form.component.ts index e48e6f9ac..87c0d8e8d 100644 --- a/frontend/app/features/settings/pages/clients/client-add-form.component.ts +++ b/frontend/app/features/settings/pages/clients/client-add-form.component.ts @@ -25,7 +25,7 @@ import { AddClientForm, ClientsState } from '@app/shared';
- +
diff --git a/frontend/app/features/settings/pages/contributors/contributor-add-form.component.scss b/frontend/app/features/settings/pages/contributors/contributor-add-form.component.scss index 7751885f4..dfcfab111 100644 --- a/frontend/app/features/settings/pages/contributors/contributor-add-form.component.scss +++ b/frontend/app/features/settings/pages/contributors/contributor-add-form.component.scss @@ -12,5 +12,7 @@ } .table-items-header { + border-width: 0; + border-bottom-width: 2px; margin: 0; } \ No newline at end of file diff --git a/frontend/app/features/settings/pages/contributors/contributors-page.component.html b/frontend/app/features/settings/pages/contributors/contributors-page.component.html index b51f5d210..cb6956abe 100644 --- a/frontend/app/features/settings/pages/contributors/contributors-page.component.html +++ b/frontend/app/features/settings/pages/contributors/contributors-page.component.html @@ -1,6 +1,6 @@ - + Contributors @@ -22,43 +22,45 @@ - -
- Your plan allows up to {{maxContributors}} contributors. -
- - + +
+ Your plan allows up to {{maxContributors}} contributors. +
+ + + +
Big team? Add many contributors at once
- - - - - - -
+ + + + + +
- - + + - -
- No contributors found. -
- + +
+ No contributors found. +
+ +
diff --git a/frontend/app/features/settings/pages/contributors/contributors-page.component.scss b/frontend/app/features/settings/pages/contributors/contributors-page.component.scss index a5feb1f2d..9795c0ac2 100644 --- a/frontend/app/features/settings/pages/contributors/contributors-page.component.scss +++ b/frontend/app/features/settings/pages/contributors/contributors-page.component.scss @@ -3,6 +3,8 @@ .import-hint { margin-bottom: 1rem; - font-weight: normal; - font-size: 90%; +} + +.panel-alert { + margin: 0; } \ No newline at end of file diff --git a/frontend/app/features/settings/pages/languages/language.component.html b/frontend/app/features/settings/pages/languages/language.component.html index 5ec63b9fa..52b943bb7 100644 --- a/frontend/app/features/settings/pages/languages/language.component.html +++ b/frontend/app/features/settings/pages/languages/language.component.html @@ -29,8 +29,8 @@
- - + +
diff --git a/frontend/app/features/settings/pages/roles/role-add-form.component.ts b/frontend/app/features/settings/pages/roles/role-add-form.component.ts index fd3279cc2..90381ad2e 100644 --- a/frontend/app/features/settings/pages/roles/role-add-form.component.ts +++ b/frontend/app/features/settings/pages/roles/role-add-form.component.ts @@ -25,7 +25,7 @@ import { AddRoleForm, RolesState } from '@app/shared';
- +
diff --git a/frontend/app/features/settings/pages/roles/role.component.html b/frontend/app/features/settings/pages/roles/role.component.html index c3fed1c0a..e1cef538a 100644 --- a/frontend/app/features/settings/pages/roles/role.component.html +++ b/frontend/app/features/settings/pages/roles/role.component.html @@ -32,8 +32,8 @@
- - + +
diff --git a/frontend/app/features/settings/pages/workflows/workflow-add-form.component.ts b/frontend/app/features/settings/pages/workflows/workflow-add-form.component.ts index d39ac6459..422b00397 100644 --- a/frontend/app/features/settings/pages/workflows/workflow-add-form.component.ts +++ b/frontend/app/features/settings/pages/workflows/workflow-add-form.component.ts @@ -25,7 +25,7 @@ import { AddWorkflowForm, WorkflowsState } from '@app/shared';
- +
diff --git a/frontend/app/features/settings/pages/workflows/workflow.component.html b/frontend/app/features/settings/pages/workflows/workflow.component.html index f311d85bd..912af6bf2 100644 --- a/frontend/app/features/settings/pages/workflows/workflow.component.html +++ b/frontend/app/features/settings/pages/workflows/workflow.component.html @@ -34,8 +34,8 @@
- - + +
diff --git a/frontend/app/framework/angular/forms/form-hint.component.ts b/frontend/app/framework/angular/forms/form-hint.component.ts index 00e241b2a..c64f2ba07 100644 --- a/frontend/app/framework/angular/forms/form-hint.component.ts +++ b/frontend/app/framework/angular/forms/form-hint.component.ts @@ -13,6 +13,17 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; `, + styles: [` + :host { + display: block; + margin-top: 0; + margin-bottom: .5rem + } + + :host::last-child { + margin-bottom: 0; + }` + ], changeDetection: ChangeDetectionStrategy.OnPush }) export class FormHintComponent { diff --git a/frontend/app/shared/components/comment.component.scss b/frontend/app/shared/components/comment.component.scss index ddb67e7ac..8c129d65c 100644 --- a/frontend/app/shared/components/comment.component.scss +++ b/frontend/app/shared/components/comment.component.scss @@ -36,8 +36,4 @@ &-created { font-size: .75rem; } -} - -.text-muted { - color: $color-history; } \ No newline at end of file diff --git a/frontend/app/shared/components/history-list.component.scss b/frontend/app/shared/components/history-list.component.scss index 90f465794..8661d69ba 100644 --- a/frontend/app/shared/components/history-list.component.scss +++ b/frontend/app/shared/components/history-list.component.scss @@ -3,11 +3,11 @@ :host ::ng-deep { .user-ref { - color: $color-title; + font-weight: 500; } .marker-ref { - color: $color-title; + font-weight: 500; } } @@ -21,7 +21,7 @@ .event { & { - color: $color-history; + color: $color-text-decent; font-size: .9rem; font-weight: normal; margin-bottom: 1.5rem; diff --git a/frontend/app/theme/_bootstrap-vars.scss b/frontend/app/theme/_bootstrap-vars.scss index 1b57564ea..9e56a83b5 100644 --- a/frontend/app/theme/_bootstrap-vars.scss +++ b/frontend/app/theme/_bootstrap-vars.scss @@ -10,8 +10,6 @@ $h4-font-size: $font-size-base * 1.1; $h5-font-size: $font-size-base; $h6-font-size: $font-size-base; -$small-font-size: 90%; - $body-bg: $color-background; $border-color: $color-border; @@ -22,12 +20,16 @@ $secondary: $color-theme-secondary; $success: $color-theme-green; $warning: $color-theme-orange; +$text-muted: $color-text-decent; + $alert-bg-level: 0; $alert-color-level: -12.5; -$input-bg-disabled: $color-input-disabled; +$label-margin-bottom: .25rem; + +$input-disabled-bg: $color-input-disabled; $input-border-color: $color-input; -$input-placeholder-color: $color-text-decent; +$input-placeholder-color: lighten($color-text-decent, 20%); $badge-bg-level: 2; diff --git a/frontend/app/theme/_bootstrap.scss b/frontend/app/theme/_bootstrap.scss index 6983029b6..74e2b75f5 100644 --- a/frontend/app/theme/_bootstrap.scss +++ b/frontend/app/theme/_bootstrap.scss @@ -534,7 +534,7 @@ a { } &-tabs { - background: $color-border; + background: $color-theme-secondary; position: relative; padding: .75rem 1.25rem; height: 70px; diff --git a/frontend/app/theme/_forms.scss b/frontend/app/theme/_forms.scss index 05bb9f1f8..f2cac5dff 100644 --- a/frontend/app/theme/_forms.scss +++ b/frontend/app/theme/_forms.scss @@ -182,13 +182,28 @@ } } +.col-form-label { + font-size: 90%; +} + label { & { color: $color-title; + font-size: 90%; + font-weight: 500; + } + + &.form-check-label { + font-size: 100%; + font-weight: normal; } .hint { - color: $color-text-decent2; + color: $color-text-decent; + } + + .text-muted { + font-weight: normal; } } diff --git a/frontend/app/theme/_lists.scss b/frontend/app/theme/_lists.scss index 1698f1413..f2a28f112 100644 --- a/frontend/app/theme/_lists.scss +++ b/frontend/app/theme/_lists.scss @@ -126,16 +126,16 @@ // Caret that is placed next to the expand button. &::before { - @include caret-top($color-border); + @include caret-top($color-theme-secondary); @include absolute(-1.1rem, 0, auto, auto); } &-tab { - padding: .75rem 1.25rem 1.25rem; + padding: 1.5rem; } &-tabs { - background: $color-border; + background: $color-table-footer; position: relative; padding: 1rem 1.25rem; height: 70px; diff --git a/frontend/app/theme/_panels.scss b/frontend/app/theme/_panels.scss index cfba56e73..d6fcb6193 100644 --- a/frontend/app/theme/_panels.scss +++ b/frontend/app/theme/_panels.scss @@ -2,7 +2,7 @@ @import '_vars'; @mixin panel-icon { - color: $color-panel-icon; + color: $color-border-dark; font-size: 1.2rem; font-weight: 400; text-decoration: none; @@ -13,7 +13,8 @@ &:hover, &:focus { text-decoration: none; - color: darken($color-panel-icon, 10%); + cursor: pointer; + color: darken($color-border-dark, 10%); } &.active { @@ -341,7 +342,7 @@ &.active, &:hover { - background: $color-background; + background: $color-theme-secondary; } &.inactive { diff --git a/frontend/app/theme/_vars.scss b/frontend/app/theme/_vars.scss index c2acbe991..de8625e86 100644 --- a/frontend/app/theme/_vars.scss +++ b/frontend/app/theme/_vars.scss @@ -6,17 +6,11 @@ $color-border-dark: #b3bbbf; $color-title: #000; $color-text: #373a3c; $color-text-decent: #8091a5; -$color-text-decent2: #a9b9c0; $color-tooltip: #1a2129; -$color-history: #7f858c; $color-code-background: #f5f7f9; $color-code-text: #708090; -$color-input: #dbe4eb; -$color-input-background: #fff; -$color-input-disabled: #eef1f4; -$color-input-border: rgba(0, 0, 0, .15); $color-extern-google: #d34836; $color-extern-google-icon: #b02c1b; $color-extern-microsoft: #004185; @@ -31,7 +25,7 @@ $color-theme-blue-dark: #297ff6; $color-theme-blue-lighter: #65a6ff; $color-theme-blue-light: #9ebeea; $color-theme-blue-lightest: #d9e8fc; -$color-theme-secondary: #e1e4e8; +$color-theme-secondary: #ecf2f6; $color-theme-green: #4bb958; $color-theme-green-dark: #47b353; @@ -43,6 +37,11 @@ $color-theme-error-dark: #c00; $color-theme-info: #5bc0de; +$color-input: #dbe4eb; +$color-input-background: #fff; +$color-input-disabled: $color-theme-secondary; +$color-input-border: rgba(0, 0, 0, .15); + $color-dark1-background: #2e3842; $color-dark1-foreground: #6a7681; $color-dark1-border1: #37424c; @@ -62,8 +61,6 @@ $color-dark2-placeholder: #757e8d; $color-dark-onboarding: #273039; -$color-panel-icon: #a2b0b6; - $color-badge-success-background: #e4f6e6; $color-badge-success-foreground: #4cc159; @@ -83,7 +80,7 @@ $color-badge-secondary-background: #e6e6e6; $color-badge-secondary-foreground: #999; $color-table-background: #fff; -$color-table-footer: #ecf2f6; +$color-table-footer: $color-theme-secondary; $color-table-border: $color-border; $color-table-header: $color-text-decent;