From 9ae64a41dc9839a50535ea159af3590b4dd9566d Mon Sep 17 00:00:00 2001 From: Luke Stanley Date: Mon, 14 Oct 2024 23:16:14 +0100 Subject: [PATCH] Revert "Migrate angular MUI to MDC components (#454)" This reverts commit 36e31d0d7e51350afb464c210ee13d727d6fe79f, since the commit was found to have an old parent that was introducing unrelated regressions. --- cypress/e2e/context_and_state.ts | 2 +- .../material/mat-input.component.ts | 15 ++- src/app/_shared/ui-form/types/array.type.html | 4 +- src/app/_shared/ui-form/types/array.type.scss | 3 + .../ui-form/types/image-viewer.type.ts | 2 +- .../_shared/ui-form/types/money.component.ts | 2 +- .../ui-form/types/percentage.component.ts | 2 +- .../ui-form/types/playlists.component.html | 2 +- .../_shared/ui-form/types/textarea.type.ts | 2 +- .../ui-form/types/video-viewer.component.ts | 2 +- .../ui-form/types/video-viewer2.component.ts | 2 +- .../ui-form/types/video-viewerDM.component.ts | 2 +- src/app/app.component.html | 28 ++++-- .../card-block/card-block.component.html | 2 +- .../card-block/card-block.component.scss | 7 ++ .../image-block/image-block.component.scss | 3 + .../block-builder-box.component.html | 4 +- ...lock-comparison-builder-box.component.html | 2 +- .../block-gosub-builder-box.component.html | 10 +- .../block-mapping-builder-box.component.html | 2 +- .../components/layout/layout.component.html | 16 ++- .../components/layout/layout.component.scss | 13 ++- src/app/components/layout/layout.component.ts | 2 + .../workflow-sidenav.component.html | 20 ++-- .../workflow-sidenav.component.scss | 10 +- ...blocks-config-select-dialog.component.html | 36 ++++--- ...adapter-query-select-dialog.component.html | 36 ++++--- .../add-block-dialog.component.html | 2 +- .../add-block-dialog.component.scss | 9 +- .../edit-clip-dialog.component.html | 42 ++++---- ...it-workflow-metadata-dialog.component.html | 64 ++++++------ .../export-config-dialog.component.html | 16 ++- .../form-data-select-dialog.component.html | 21 ++-- .../form-select-dialog.component.html | 44 ++++----- .../import-progress-dialog.component.html | 4 +- .../load-workflow-dialog.component.html | 14 ++- .../paste-config-dialog.component.html | 15 ++- .../save-workflow-dialog.component.html | 36 +++---- .../show-share-link-dialog.component.html | 30 ++---- .../swagger-form-select-dialog.component.html | 42 ++++---- .../formly-card-list.component.html | 2 +- .../formly-card-list.component.scss | 3 + .../teosto-user-form.component.html | 2 +- .../teosto-user-form.component.scss | 3 + .../user-ipn-form.component.html | 2 +- .../user-ipn-form.component.scss | 3 + src/app/messages/messages.component.html | 2 +- .../adapters-page.component.html | 2 +- .../adapters-page.component.scss | 4 +- .../blocks-builder-page.component.scss | 6 ++ .../bloomen-search-page.component.html | 4 +- .../bloomen-search-page.component.scss | 3 + .../bloomen-test-page.component.html | 4 +- src/app/pages/connect/connect.component.html | 15 ++- src/app/pages/connect/connect.component.scss | 21 ++-- .../settings-page.component.html | 6 +- .../settings-page.component.scss | 3 + .../test-api-page.component.html | 8 +- .../test-api-page.component.scss | 3 + .../upload-page/upload-page.component.scss | 5 +- .../pages/user-page/user-page.component.html | 4 +- .../pages/user-page/user-page.component.scss | 3 + .../youtube-page/youtube-page.component.html | 2 +- src/styles.scss | 81 ++++++++------- src/styles/_ng-select-theme.scss | 52 +++++----- src/styles/main.scss | 99 +++++++++++++------ 66 files changed, 494 insertions(+), 418 deletions(-) diff --git a/cypress/e2e/context_and_state.ts b/cypress/e2e/context_and_state.ts index 4a77f0515..014c3b6f7 100644 --- a/cypress/e2e/context_and_state.ts +++ b/cypress/e2e/context_and_state.ts @@ -234,7 +234,7 @@ describe('Kendraio context and state', () => { loadFlowCode([ { "type": "context-save", - "valueGetter": "`false`", + "valueGetter": "`true`", "contextKey": "state.global.disabled", }, { diff --git a/src/app/_shared/components/material/mat-input.component.ts b/src/app/_shared/components/material/mat-input.component.ts index 550e163e9..b83591239 100644 --- a/src/app/_shared/components/material/mat-input.component.ts +++ b/src/app/_shared/components/material/mat-input.component.ts @@ -5,10 +5,9 @@ import { ICellEditorAngularComp } from 'ag-grid-angular'; @Component({ selector: "input-cell", template: ` - +
- - Title + @@ -17,10 +16,10 @@ import { ICellEditorAngularComp } from 'ag-grid-angular'; `, styles: [ ` - .container { - width: 350px; - } - ` + .container { + width: 350px; + } + ` ] }) export class MatInputComponent implements ICellEditorAngularComp { @@ -95,4 +94,4 @@ export class MatInputComponent implements ICellEditorAngularComp { event.preventDefault(); event.stopPropagation(); } -} \ No newline at end of file +} diff --git a/src/app/_shared/ui-form/types/array.type.html b/src/app/_shared/ui-form/types/array.type.html index db2033b30..5871bcdf8 100644 --- a/src/app/_shared/ui-form/types/array.type.html +++ b/src/app/_shared/ui-form/types/array.type.html @@ -1,4 +1,4 @@ - +

{{ to.label }}

{{ to.description }}

@@ -8,7 +8,7 @@

{{ to.label }}

- +
diff --git a/src/app/_shared/ui-form/types/array.type.scss b/src/app/_shared/ui-form/types/array.type.scss index ac1a6fcf4..1f9b33548 100644 --- a/src/app/_shared/ui-form/types/array.type.scss +++ b/src/app/_shared/ui-form/types/array.type.scss @@ -2,3 +2,6 @@ display: block; margin-bottom: 1em; } +mat-card { + margin-bottom: 1em; +} diff --git a/src/app/_shared/ui-form/types/image-viewer.type.ts b/src/app/_shared/ui-form/types/image-viewer.type.ts index fe76018e9..f5918c682 100644 --- a/src/app/_shared/ui-form/types/image-viewer.type.ts +++ b/src/app/_shared/ui-form/types/image-viewer.type.ts @@ -6,7 +6,7 @@ import { FieldType } from '@ngx-formly/core'; selector: 'app-thumbnail-viewer', template: ` - + {{to.label}} diff --git a/src/app/_shared/ui-form/types/money.component.ts b/src/app/_shared/ui-form/types/money.component.ts index dfd0a96c8..83a0dafa4 100644 --- a/src/app/_shared/ui-form/types/money.component.ts +++ b/src/app/_shared/ui-form/types/money.component.ts @@ -6,7 +6,7 @@ import createNumberMask from 'text-mask-addons/dist/createNumberMask'; selector: 'formly-field-input-money', template: ` - + {{ to.label }} + {{ to.label }} diff --git a/src/app/_shared/ui-form/types/playlists.component.html b/src/app/_shared/ui-form/types/playlists.component.html index 96b95a90c..d512b3880 100644 --- a/src/app/_shared/ui-form/types/playlists.component.html +++ b/src/app/_shared/ui-form/types/playlists.component.html @@ -1,7 +1,7 @@
- + diff --git a/src/app/_shared/ui-form/types/textarea.type.ts b/src/app/_shared/ui-form/types/textarea.type.ts index 8e77d24df..d9050febf 100644 --- a/src/app/_shared/ui-form/types/textarea.type.ts +++ b/src/app/_shared/ui-form/types/textarea.type.ts @@ -19,7 +19,7 @@ import { MatInput } from '@angular/material/input'; - + diff --git a/src/app/components/block-comparison-builder-box/block-comparison-builder-box.component.html b/src/app/components/block-comparison-builder-box/block-comparison-builder-box.component.html index a159f61e7..db3e49d10 100644 --- a/src/app/components/block-comparison-builder-box/block-comparison-builder-box.component.html +++ b/src/app/components/block-comparison-builder-box/block-comparison-builder-box.component.html @@ -1,5 +1,5 @@
- + Value source (jmespath) diff --git a/src/app/components/block-gosub-builder-box/block-gosub-builder-box.component.html b/src/app/components/block-gosub-builder-box/block-gosub-builder-box.component.html index 9755f75f8..461e88fdd 100644 --- a/src/app/components/block-gosub-builder-box/block-gosub-builder-box.component.html +++ b/src/app/components/block-gosub-builder-box/block-gosub-builder-box.component.html @@ -1,5 +1,4 @@ - - Adapter + @@ -9,8 +8,7 @@ - - Workflow + @@ -21,7 +19,7 @@ - + - \ No newline at end of file + diff --git a/src/app/components/block-mapping-builder-box/block-mapping-builder-box.component.html b/src/app/components/block-mapping-builder-box/block-mapping-builder-box.component.html index fea4ff85a..40651655f 100644 --- a/src/app/components/block-mapping-builder-box/block-mapping-builder-box.component.html +++ b/src/app/components/block-mapping-builder-box/block-mapping-builder-box.component.html @@ -1,5 +1,5 @@ - + diff --git a/src/app/components/layout/layout.component.html b/src/app/components/layout/layout.component.html index 637b164af..9b7b67f98 100644 --- a/src/app/components/layout/layout.component.html +++ b/src/app/components/layout/layout.component.html @@ -1,8 +1,13 @@ - + + + + + + favorite Assets @@ -14,11 +19,13 @@ + {{ link.icon }} {{ link.title }} + @@ -37,13 +44,18 @@ + + + + +
- +
diff --git a/src/app/components/layout/layout.component.scss b/src/app/components/layout/layout.component.scss index 14d75c19f..78a47966e 100644 --- a/src/app/components/layout/layout.component.scss +++ b/src/app/components/layout/layout.component.scss @@ -1,15 +1,14 @@ .spacer { flex: 1 1 auto; } - .page-content { margin: 1em; } .app-container { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; -} + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } diff --git a/src/app/components/layout/layout.component.ts b/src/app/components/layout/layout.component.ts index 24360e99d..f586a0d75 100644 --- a/src/app/components/layout/layout.component.ts +++ b/src/app/components/layout/layout.component.ts @@ -1,7 +1,9 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; +import { MatMenu } from '@angular/material/menu'; import { MatSidenav } from '@angular/material/sidenav'; import { Observable } from 'rxjs'; +import {SharedModule} from '../../_shared/shared.module'; import { PageTitleService } from '../../services/page-title.service'; @Component({ diff --git a/src/app/components/workflow-sidenav/workflow-sidenav.component.html b/src/app/components/workflow-sidenav/workflow-sidenav.component.html index 08b18727e..fa321d87f 100644 --- a/src/app/components/workflow-sidenav/workflow-sidenav.component.html +++ b/src/app/components/workflow-sidenav/workflow-sidenav.component.html @@ -7,7 +7,7 @@ - +
- -
-

- Title: {{ workflow.title }}
- Adapter: {{ workflow.getAdapterName() }}
- Workflow ID: {{ workflow.id }}
- Tags: {{ workflow.tags.join(', ') }} -

+ +
-
+
+

+ Title: {{ workflow.title }}
+ Adapter: {{ workflow.getAdapterName() }}
+ Flow ID: {{ workflow.id || 'Flow ID' }}
+ Tags: {{ workflow.tags.join(', ') }} +

diff --git a/src/app/components/workflow-sidenav/workflow-sidenav.component.scss b/src/app/components/workflow-sidenav/workflow-sidenav.component.scss index 71e4ab54f..563db05cd 100644 --- a/src/app/components/workflow-sidenav/workflow-sidenav.component.scss +++ b/src/app/components/workflow-sidenav/workflow-sidenav.component.scss @@ -12,15 +12,9 @@ .adapter-metadata { margin-bottom: 1em; } - -.adapter-metadata-edit{ - display: flex; -} - -.adapter-metadata-edit-text { - flex: 1; +.metadata-edit { + float: right; } - app-blocks-editor { display: block; margin-bottom: 4rem; diff --git a/src/app/dialogs/adapter-blocks-config-select-dialog/adapter-blocks-config-select-dialog.component.html b/src/app/dialogs/adapter-blocks-config-select-dialog/adapter-blocks-config-select-dialog.component.html index 3d79eee48..7b14a2de8 100644 --- a/src/app/dialogs/adapter-blocks-config-select-dialog/adapter-blocks-config-select-dialog.component.html +++ b/src/app/dialogs/adapter-blocks-config-select-dialog/adapter-blocks-config-select-dialog.component.html @@ -1,22 +1,20 @@ - -

Load config from Adapter:

- +

Load config from Adapter:

+ - + - + - - - - - - + + +

+ + diff --git a/src/app/dialogs/adapter-query-select-dialog/adapter-query-select-dialog.component.html b/src/app/dialogs/adapter-query-select-dialog/adapter-query-select-dialog.component.html index 54595ba21..5994d9cc8 100644 --- a/src/app/dialogs/adapter-query-select-dialog/adapter-query-select-dialog.component.html +++ b/src/app/dialogs/adapter-query-select-dialog/adapter-query-select-dialog.component.html @@ -1,22 +1,20 @@ - -

Load query from Adapter:

- +

Load query from Adapter:

+ - + - + - - - - - - + + +

+ + diff --git a/src/app/dialogs/add-block-dialog/add-block-dialog.component.html b/src/app/dialogs/add-block-dialog/add-block-dialog.component.html index d7f5b53a9..7614b9e51 100644 --- a/src/app/dialogs/add-block-dialog/add-block-dialog.component.html +++ b/src/app/dialogs/add-block-dialog/add-block-dialog.component.html @@ -14,7 +14,7 @@
- +

{{ selectedBlockType.label }}

{{ selectedBlockType.description }}

diff --git a/src/app/dialogs/add-block-dialog/add-block-dialog.component.scss b/src/app/dialogs/add-block-dialog/add-block-dialog.component.scss index b1844fc65..95c54d0bb 100644 --- a/src/app/dialogs/add-block-dialog/add-block-dialog.component.scss +++ b/src/app/dialogs/add-block-dialog/add-block-dialog.component.scss @@ -1,12 +1,17 @@ .dialog-buttons > button { margin-right: 1em; } - .button-selections { margin-bottom: 1em; } -.mat-mdc-unelevated-button { +mat-card { + height: 150px; + margin-bottom: 1em; +} + + +.mat-flat-button { display: inline-block; min-width: 12em; height: 3em; diff --git a/src/app/dialogs/edit-clip-dialog/edit-clip-dialog.component.html b/src/app/dialogs/edit-clip-dialog/edit-clip-dialog.component.html index d78323b63..51be84113 100644 --- a/src/app/dialogs/edit-clip-dialog/edit-clip-dialog.component.html +++ b/src/app/dialogs/edit-clip-dialog/edit-clip-dialog.component.html @@ -1,30 +1,28 @@

Edit Clip

- - - Name - - + + + + - - Add rights group - - - {{group}} - - - + + + + {{group}} + + + - - Role - - - - Contributor - - - + + + + + + + + +
diff --git a/src/app/dialogs/edit-workflow-metadata-dialog/edit-workflow-metadata-dialog.component.html b/src/app/dialogs/edit-workflow-metadata-dialog/edit-workflow-metadata-dialog.component.html index 42333917d..5949f61f4 100644 --- a/src/app/dialogs/edit-workflow-metadata-dialog/edit-workflow-metadata-dialog.component.html +++ b/src/app/dialogs/edit-workflow-metadata-dialog/edit-workflow-metadata-dialog.component.html @@ -1,36 +1,30 @@ - -
- - Title - - - - Adapter name - - - - Workflow ID - - - - Add tag... - - - {{tag}} - cancel - - - - -
- - - - - +
+ + + + + + + + + + + + + {{tag}} + cancel + + + + +
+
+ + +
diff --git a/src/app/dialogs/export-config-dialog/export-config-dialog.component.html b/src/app/dialogs/export-config-dialog/export-config-dialog.component.html index a2ce54ea9..b2d9915bc 100644 --- a/src/app/dialogs/export-config-dialog/export-config-dialog.component.html +++ b/src/app/dialogs/export-config-dialog/export-config-dialog.component.html @@ -1,10 +1,6 @@ - -

Config export:

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

Config export:

+
+ + diff --git a/src/app/dialogs/form-data-select-dialog/form-data-select-dialog.component.html b/src/app/dialogs/form-data-select-dialog/form-data-select-dialog.component.html index 31ff2ee30..9d67ae881 100644 --- a/src/app/dialogs/form-data-select-dialog/form-data-select-dialog.component.html +++ b/src/app/dialogs/form-data-select-dialog/form-data-select-dialog.component.html @@ -1,12 +1,11 @@

Select data ({{ data?.schemaName }}):

- - - - - - - + + + +

+ + diff --git a/src/app/dialogs/form-select-dialog/form-select-dialog.component.html b/src/app/dialogs/form-select-dialog/form-select-dialog.component.html index 7804f6c51..b8d03d127 100644 --- a/src/app/dialogs/form-select-dialog/form-select-dialog.component.html +++ b/src/app/dialogs/form-select-dialog/form-select-dialog.component.html @@ -1,30 +1,28 @@

Load form from Adapter:

- - + - + - - - - - + + + + - - No forms - - - - - + + +No forms + +

+ + diff --git a/src/app/dialogs/import-progress-dialog/import-progress-dialog.component.html b/src/app/dialogs/import-progress-dialog/import-progress-dialog.component.html index b859fc912..2e29961b8 100644 --- a/src/app/dialogs/import-progress-dialog/import-progress-dialog.component.html +++ b/src/app/dialogs/import-progress-dialog/import-progress-dialog.component.html @@ -1,4 +1,2 @@

Importing...

- - - + diff --git a/src/app/dialogs/load-workflow-dialog/load-workflow-dialog.component.html b/src/app/dialogs/load-workflow-dialog/load-workflow-dialog.component.html index 7dcca37a2..5c3512da8 100644 --- a/src/app/dialogs/load-workflow-dialog/load-workflow-dialog.component.html +++ b/src/app/dialogs/load-workflow-dialog/load-workflow-dialog.component.html @@ -1,4 +1,4 @@ - +
Select configuration @@ -7,11 +7,9 @@ - - - - - - - +
+
+ + +
diff --git a/src/app/dialogs/paste-config-dialog/paste-config-dialog.component.html b/src/app/dialogs/paste-config-dialog/paste-config-dialog.component.html index 3756f7c23..b553aefb6 100644 --- a/src/app/dialogs/paste-config-dialog/paste-config-dialog.component.html +++ b/src/app/dialogs/paste-config-dialog/paste-config-dialog.component.html @@ -1,9 +1,6 @@ - -

Paste config:

- - - - - - +

Paste config:

+ +
+ + diff --git a/src/app/dialogs/save-workflow-dialog/save-workflow-dialog.component.html b/src/app/dialogs/save-workflow-dialog/save-workflow-dialog.component.html index 375aacec9..06d3b6fab 100644 --- a/src/app/dialogs/save-workflow-dialog/save-workflow-dialog.component.html +++ b/src/app/dialogs/save-workflow-dialog/save-workflow-dialog.component.html @@ -1,29 +1,21 @@
- -
-

- Workflow ID: {{ data.adapterName }}/{{ data.id }} -

-
- - - - - - +
+

+ Workflow ID: {{ data.adapterName }}/{{ data.id }} +

+
+ + +
- -
-

- Please login to save workflows. -

-
- - - - +
+

+ Please login to save workflows. +

+
+ - + Publisher. @@ -13,7 +13,7 @@

Import from Bloomen API

 - + 
{{ userInfo$ | async | json }}
diff --git a/src/app/pages/connect/connect.component.html b/src/app/pages/connect/connect.component.html index c36344d37..f6ddd57bd 100644 --- a/src/app/pages/connect/connect.component.html +++ b/src/app/pages/connect/connect.component.html @@ -1,11 +1,18 @@ + +

Loading...

+
- - person - click here for the old account page - + + + + +
+ +
diff --git a/src/app/pages/connect/connect.component.scss b/src/app/pages/connect/connect.component.scss index 5d4a67df3..59449d342 100644 --- a/src/app/pages/connect/connect.component.scss +++ b/src/app/pages/connect/connect.component.scss @@ -1,12 +1,13 @@ -.preview-message a { - color: black; - text-decoration: none; +.preview-message { + font-size: 0.75rem; + margin-bottom: 1rem; + margin-top: 1rem; + padding: 0.5rem; + background-color: #f7fafc; + display: flex; + justify-content: flex-start; + align-items: center; } - -.preview-message .mat-icon { - padding-top: 2px; +.preview-message p { + margin: 0 1rem 0 0; } - -.preview-message span { - padding-left: 10px; -} \ No newline at end of file diff --git a/src/app/pages/settings-page/settings-page.component.html b/src/app/pages/settings-page/settings-page.component.html index 01fac36ca..f3fb4b716 100644 --- a/src/app/pages/settings-page/settings-page.component.html +++ b/src/app/pages/settings-page/settings-page.component.html @@ -1,4 +1,4 @@ - +

Delete all data...

@@ -7,7 +7,7 @@ - +

Debug mode {{ isDebug ? 'enabled' : 'disabled' }}

@@ -16,7 +16,7 @@ - +

Show Help {{ showHelp ? 'on' : 'off' }}

diff --git a/src/app/pages/settings-page/settings-page.component.scss b/src/app/pages/settings-page/settings-page.component.scss index e69de29bb..08577110d 100644 --- a/src/app/pages/settings-page/settings-page.component.scss +++ b/src/app/pages/settings-page/settings-page.component.scss @@ -0,0 +1,3 @@ +mat-card { + margin-bottom: 1em; +} diff --git a/src/app/pages/test-api-page/test-api-page.component.html b/src/app/pages/test-api-page/test-api-page.component.html index f9ea86350..e25954b9a 100644 --- a/src/app/pages/test-api-page/test-api-page.component.html +++ b/src/app/pages/test-api-page/test-api-page.component.html @@ -2,7 +2,7 @@

Temporary page to test API

- + Entity type @@ -14,7 +14,7 @@

Temporary page to test API

 - + Entity ID. @@ -28,10 +28,10 @@

Temporary page to test API

 - + 
{{ entity | json }}
 - + 
{{ allItems | json }}
 diff --git a/src/app/pages/test-api-page/test-api-page.component.scss b/src/app/pages/test-api-page/test-api-page.component.scss index e69de29bb..08577110d 100644 --- a/src/app/pages/test-api-page/test-api-page.component.scss +++ b/src/app/pages/test-api-page/test-api-page.component.scss @@ -0,0 +1,3 @@ +mat-card { + margin-bottom: 1em; +} diff --git a/src/app/pages/upload-page/upload-page.component.scss b/src/app/pages/upload-page/upload-page.component.scss index 590667777..fb7804102 100644 --- a/src/app/pages/upload-page/upload-page.component.scss +++ b/src/app/pages/upload-page/upload-page.component.scss @@ -2,9 +2,12 @@ flex: 1 1 auto; min-width: 2rem; } - .upload-file, .upload-button { margin-top: 1em; text-align: center; } + +mat-progress-bar { + max-width: 70%; +} diff --git a/src/app/pages/user-page/user-page.component.html b/src/app/pages/user-page/user-page.component.html index 85ed233d0..13e0f5c3a 100644 --- a/src/app/pages/user-page/user-page.component.html +++ b/src/app/pages/user-page/user-page.component.html @@ -1,6 +1,6 @@ - +

Identities

You are logged in as {{ profile?.nickname }}

@@ -33,7 +33,7 @@

Identities

 - +

Connected Profiles

No profiles are saved on this device. You can connect multiple profiles by diff --git a/src/app/pages/user-page/user-page.component.scss b/src/app/pages/user-page/user-page.component.scss index 1f661aff4..153089762 100644 --- a/src/app/pages/user-page/user-page.component.scss +++ b/src/app/pages/user-page/user-page.component.scss @@ -1,3 +1,6 @@ +mat-card { + margin-bottom: 1em; +} .full-width-field { width: 100%; diff --git a/src/app/pages/youtube-page/youtube-page.component.html b/src/app/pages/youtube-page/youtube-page.component.html index 82fe035ca..61510bd8e 100644 --- a/src/app/pages/youtube-page/youtube-page.component.html +++ b/src/app/pages/youtube-page/youtube-page.component.html @@ -1,4 +1,4 @@ - +

{{ error }}

 diff --git a/src/styles.scss b/src/styles.scss index 3c512c9d3..e76dc01e4 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,55 +1,60 @@ @use '@angular/material' as mat; @import '../node_modules/ag-grid-community/styles/ag-grid.css'; @import '../node_modules/ag-grid-community/styles/ag-theme-alpine.css'; -@import "@fortawesome/fontawesome-free/css/all.css"; +@import "@fortawesome/fontawesome-free/css/all.css"; // Custom Theming for Angular Material // For more information: https://material.angular.io/guide/theming -// Include the common styles for Angular Material. -// We include this here so that you only have to load a single css file for Angular Material in your app. -@include mat.all-component-typographies(); -@include mat.core(); +// Plus imports for other components in your app. + +// Include the common styles for Angular Material. We include this here so that you only +// have to load a single css file for Angular Material in your app. +// Be sure that you only ever include this mixin once! +// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles. +// The following line adds: +// 1. Default typography styles for all components +// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1) +// If you specify typography styles for the components you use elsewhere, you should delete this line. +// If you don't need the default component typographies but still want the hierarchy styles, +// you can delete this line and instead use: +// `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());` + +@include mat.all-legacy-component-typographies(); +@include mat.legacy-core(); +@import '@angular/material/theming'; +@include mat-core(); // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker -// hue. Available color palettes up to vM2: https://material.io/design/color/ -$kendraio-app-primary: mat.m2-define-palette(mat.$m2-green-palette); -$kendraio-app-accent: mat.m2-define-palette(mat.$m2-orange-palette, A200, A100, A400); -$kendraio-app-warn: mat.m2-define-palette(mat.$m2-red-palette); +// hue. Available color palettes: https://material.io/design/color/ +$kendraio-app-primary: mat.define-palette(mat.$green-palette); +$kendraio-app-accent: mat.define-palette(mat.$orange-palette, A200, A100, A400); -$container-padding: 20px; +// The warn palette is optional (defaults to red). +$kendraio-app-warn: mat.define-palette(mat.$red-palette); -// Create custom MUI theme. -$kendraio-app-theme: mat.m2-define-light-theme(( +// Create the theme object (a Sass map containing all of the palettes). +$kendraio-app-theme: mat.define-light-theme(( color: ( primary: $kendraio-app-primary, accent: $kendraio-app-accent, warn: $kendraio-app-warn ), - typography: mat.m2-define-typography-config(), - density: -1, + typography: mat.define-typography-config(), + density: 0, )); -@include mat.all-component-themes($kendraio-app-theme); + +// Include theme styles for core and each component used in your app. +// Alternatively, you can import and @include the theme mixins for each component +// that you are using. +@include mat.all-legacy-component-themes($kendraio-app-theme); +@include angular-material-theme($kendraio-app-theme); -// Global style, not part of the custom theme. html, body { height: 100%; overflow: hidden; } body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } -.mat-mdc-dialog-container .mat-mdc-dialog-actions { - padding: 10px 20px 20px; -} - -.mdc-button.mat-mdc-button > .mat-icon, -.mdc-button.mat-mdc-unelevated-button > .mat-icon, -.mdc-button.mat-mdc-raised-button > .mat-icon, -.mdc-button.mat-mdc-outlined-button > .mat-icon { - font-size: 1.5rem; - height: 1.5rem; - width: 1.5rem; -} - .mb-1 { margin-bottom: 1em; } @@ -57,10 +62,10 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } margin-top: 1em; } -dynamic-material-form-control .mat-mdc-form-field { +dynamic-material-form-control .mat-form-field { width: 100%; } -.mat-mdc-radio-button ~ .mat-radio-button { +.mat-radio-button ~ .mat-radio-button { margin-left: 16px; } @@ -72,16 +77,18 @@ dynamic-material-form-control .mat-mdc-form-field { } .schedule-popup{ + // display:none; position: absolute; box-shadow: 3px 3px 3px rgba(55,3, 3, .5); padding: 16px; background-color: silver; - transform: translatey(-80px); - transition: all 2s ease; - z-index: 9; - &.in{ - display: block; - } +transform: translatey(-80px); +transition: all 2s ease; +z-index: 9; +&.in{ + display: block; +// transform: translate(80px,-80px); +} } .editor-config-column .mat-expansion-panel-body { diff --git a/src/styles/_ng-select-theme.scss b/src/styles/_ng-select-theme.scss index ddc730a3f..30484bb3c 100644 --- a/src/styles/_ng-select-theme.scss +++ b/src/styles/_ng-select-theme.scss @@ -10,16 +10,16 @@ $background: map-get($theme, background); - $highlight-color: if($isdark, mat.m2-get-color-from-palette($foreground, text) ,mat.m2-get-color-from-palette($primary)); + $highlight-color: if($isdark, mat.get-color-from-palette($foreground, text) ,mat.get-color-from-palette($primary)); .ng-select, .ng-select-container, .ng-input>input { - color: mat.m2-get-color-from-palette($foreground, text) !important; + color: mat.get-color-from-palette($foreground, text) !important; font: inherit; font-family: inherit; } .ng-placeholder{ display: none; - color: mat.m2-get-color-from-palette($foreground, text,.54) !important; + color: mat.get-color-from-palette($foreground, text,.54) !important; } .ng-select-focused { @@ -35,10 +35,10 @@ .ng-clear-wrapper, .ng-arrow-wrapper{ height: 1em; - color: mat.m2-get-color-from-palette($foreground, text, .4); + color: mat.get-color-from-palette($foreground, text, .4); } .ng-clear-wrapper:hover, .ng-arrow-wrapper:hover{ - color: mat.m2-get-color-from-palette($foreground, text); + color: mat.get-color-from-palette($foreground, text); } .ng-select .ng-arrow-wrapper .ng-arrow{ border-left: 5px solid transparent; @@ -55,8 +55,8 @@ margin-bottom: -4px; .ng-value{ // WIP - color: mat.m2-get-color-from-palette($primary, default-contrast); - background: mat.m2-get-color-from-palette($primary); + color: mat.get-color-from-palette($primary, default-contrast); + background: mat.get-color-from-palette($primary); padding: 4px 8px; border-radius: 12px; margin: 0 4px 2px 0; @@ -71,15 +71,15 @@ .ng-dropdown-panel{ @include mat.elevation(4); - background: mat.m2-get-color-from-palette($background, card); - color: mat.m2-get-color-from-palette($foreground, text) !important; + background: mat.get-color-from-palette($background, card); + color: mat.get-color-from-palette($foreground, text) !important; - .mat-mdc-option.ng-option-selected:not(.ng-option-marked):not(:hover) { - background: mat.m2-get-color-from-palette($background, card); + .mat-option.ng-option-selected:not(.ng-option-marked):not(:hover) { + background: mat.get-color-from-palette($background, card); &:not(.ng-option-disabled) { - color: mat.m2-get-color-from-palette($foreground, text); + color: mat.get-color-from-palette($foreground, text); } } @@ -93,23 +93,23 @@ &.multiple { .ng-option { &.selected { - background: mat.m2-get-color-from-palette($background,card); + background: mat.get-color-from-palette($background,card); } &.marked { - background: mat.m2-get-color-from-palette($foreground, text, .04); + background: mat.get-color-from-palette($foreground, text, .04); } } } .ng-dropdown-header { - border-bottom: 1px solid mat.m2-get-color-from-palette($foreground, text,.12); + border-bottom: 1px solid mat.get-color-from-palette($foreground, text,.12); padding: 0 16px; line-height: 3em; min-height: 3em; } .ng-dropdown-footer { - border-top: 1px solid mat.m2-get-color-from-palette($foreground, text,.12); + border-top: 1px solid mat.get-color-from-palette($foreground, text,.12); padding: 0 16px; line-height: 3em; min-height: 3em; @@ -122,16 +122,16 @@ line-height: 3em; height: 3em; padding: 0 16px; - color: mat.m2-get-color-from-palette($foreground, text); + color: mat.get-color-from-palette($foreground, text); font-weight: 500; &.ng-option-marked { - background:mat.m2-get-color-from-palette($foreground, text, .04); + background:mat.get-color-from-palette($foreground, text, .04); } &.ng-option-disabled { cursor: default; } &.ng-option-selected { - background: mat.m2-get-color-from-palette($foreground, text, .12); + background: mat.get-color-from-palette($foreground, text, .12); color: $highlight-color; } } @@ -144,19 +144,19 @@ padding: 0 16px; text-decoration: none; position: relative; - color: mat.m2-get-color-from-palette($foreground, text,.87); + color: mat.get-color-from-palette($foreground, text,.87); text-align: left; &.ng-option-marked { - background: mat.m2-get-color-from-palette($foreground, text, .04); - color: mat.m2-get-color-from-palette($foreground, text,.87); + background: mat.get-color-from-palette($foreground, text, .04); + color: mat.get-color-from-palette($foreground, text,.87); } &.ng-option-selected { - background: mat.m2-get-color-from-palette($foreground, text, .12); + background: mat.get-color-from-palette($foreground, text, .12); color: $highlight-color; } &.ng-option-disabled { - color: mat.m2-get-color-from-palette($foreground, text, 0.38); + color: mat.get-color-from-palette($foreground, text, 0.38); } &.ng-option-child { padding-left: 32px; @@ -165,9 +165,9 @@ padding-right: 5px; font-size: 80%; font-weight: 400; - color: mat.m2-get-color-from-palette($foreground, text, 0.38); + color: mat.get-color-from-palette($foreground, text, 0.38); } } } } -} \ No newline at end of file +} diff --git a/src/styles/main.scss b/src/styles/main.scss index aa74795de..7a25b733b 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -8,8 +8,11 @@ Global Style Guide: *********/ -@import "@ng-select/ng-select/themes/material.theme.css"; +@import "~@ng-select/ng-select/themes/material.theme.css"; +.formFieldWidth380 .mat-form-field-infix { + width: 380px; +} .ken-tree-invisible { display: none; opacity: 0; @@ -32,6 +35,12 @@ Global Style Guide: overflow: hidden; } +.ken-tree li>ul>.mat-tree-node li, +.mat-nested-tree-node li { + // background: rgba(0, 0, 0, 0.04); + // font-size: 12px +} + .mat-nested-tree-node ul li { min-height: 28px !important; } @@ -51,16 +60,21 @@ button:focus { padding: 16px; } +.mat-tree-node { + // padding-left: 16px; +} button.active { + // background-color: silver!important; opacity: 0.4; cursor: default; } .menu-item--active { + // background: rgba(0, 0, 0, 0.2); background-color: whitesmoke; } -.mat-mdc-menu-item { +.mat-menu-item { padding: 10px 16px; } @@ -131,18 +145,16 @@ button.active { right: 0; } -.mat-drawer-side { - margin-left: 10px; -} - -.mat-drawer-side li .mat-icon { - margin-right: 10px; -} - -.mat-mdc-menu-item { +.mat-menu-item { text-transform: capitalize; } +// .mat-drawer, .mat-sidenav { +// min-width:200px; +// transition: all 3s ease-in-out; +// position: relative!important; +// } + .form-container>* { width: 100%; } @@ -151,16 +163,17 @@ dynamic-material-form-control:not(:last-child) { margin-right: 40px; } -.mat-mdc-menu-item .mat-icon-no-color, -.mat-mdc-menu-item-submenu-trigger::after { +.mat-menu-item .mat-icon-no-color, +.mat-menu-item-submenu-trigger::after { color: rgba(0, 0, 0, 1); } -.mat-mdc-card { - transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); - display: block; - position: relative; - padding: 1em; +.mat-card { + img { + object-fit: cover; + width: 100%; + margin-top: 20px; + } } // HELPER CLASS @@ -186,6 +199,7 @@ ng-select { } .ng-select { + .ng-select-container { overflow: visible !important; } @@ -211,11 +225,46 @@ formly-field { } } + +.mat-form-field-type-boolean .mat-form-field-wrapper { + padding-bottom: 0 !important; + height: 44px; +} + +formly-object-type formly-object-type>formly-field { + //margin-left: 40px +} + +formly-object-type legend { + //margin-left: 20px +} + +formly-object-type { + // background-color: blue; +} + formly-array-type { - .mat-mdc-card { + // >.mat-card { + // display: flex; + // flex-wrap: wrap; + // align-content: space-around ; + // align-items: flex-end; + .mat-card { margin-right: 16px; } + // } + mat-card-header { + font-size: 1.5rem; + } + mat-card { + margin-bottom: 16px + } + +} + +.mat-form-field{ + margin-bottom: 1rem; } // Fix for cut-off Formly Material label @@ -241,15 +290,3 @@ formly-array-type { margin-left: 2%; position: relative; } - -.mat-mdc-progress-spinner, -.spinner-wrapper { - display: flex; - justify-content: center; - align-items: center; - margin: 20px; -} - -.spinner-wrapper-allpage { - height: 100vh; -} \ No newline at end of file