From 690a35744225d81830b9aded54a427e056446abc Mon Sep 17 00:00:00 2001 From: Oleksii Aleksandrov Date: Mon, 11 Sep 2023 13:17:09 +0300 Subject: [PATCH] KAMU-141: migration SASS to SCSS (#153) * KAMU-141: migration SASS to SCSS - changes sass syntax to scss - removed empty files - removed duplicates imports - added global path for var.scss (and changed import) --- CHANGELOG.md | 3 +- angular.json | 16 +- src/app/api/dataset.api.spec.ts | 6 +- src/app/api/mock/dataset.mock.ts | 2 +- src/app/app.component.sass | 0 src/app/app.component.ts | 5 +- src/app/auth/account/account.component.sass | 45 - src/app/auth/account/account.component.scss | 52 + .../auth/account/account.component.spec.ts | 2 +- src/app/auth/account/account.component.ts | 6 +- .../datasets-tab/datasets-tab.component.sass | 0 .../datasets-tab/datasets-tab.component.ts | 5 +- .../auth/github-callback/github.callback.ts | 2 +- src/app/auth/login/login.component.sass | 0 src/app/auth/login/login.component.ts | 1 - src/app/auth/settings/settings.component.sass | 72 - src/app/auth/settings/settings.component.scss | 98 + .../auth/settings/settings.component.spec.ts | 2 +- src/app/auth/settings/settings.component.ts | 2 +- src/app/common/base.processing.component.ts | 6 +- src/app/common/errors.ts | 4 +- .../app-header/app-header.component.ts | 2 +- .../custom-pagination.component.sass | 39 - .../custom-pagination.component.scss | 51 + .../custom-pagination.component.ts | 2 +- .../dataset-list.component.ts | 6 +- .../dataset-list.module.ts | 4 +- .../dataset-list-component/dataset-list.sass | 25 - .../dataset-list-component/dataset-list.scss | 39 + .../dataset-list-item.component.sass | 30 - .../dataset-list-item.component.scss | 46 + .../dataset-list-item.component.spec.ts | 2 +- .../dataset-list-item.component.ts | 6 +- .../display-hash/display-hash.component.sass | 6 - .../display-hash/display-hash.component.scss | 5 + .../display-hash.component.spec.ts | 2 +- .../display-hash/display-hash.component.ts | 6 +- .../display-time/display-time.component.sass | 0 .../display-time/display-time.component.ts | 1 - .../dynamic-table/dynamic-table.component.ts | 2 +- .../dynamic-table/dynamic-table.sass | 36 - .../dynamic-table/dynamic-table.scss | 46 + src/app/components/modal/dynamic.component.ts | 3 +- .../components/modal/modal.service.spec.ts | 2 +- .../notification-indicator.component.ts | 2 +- .../notification-indicator.sass | 14 - .../notification-indicator.scss | 16 + ...view-history-summary-header.component.sass | 4 - ...view-history-summary-header.component.scss | 5 + ...erview-history-summary-header.component.ts | 4 +- .../page-not-found.component.sass | 11 - .../page-not-found.component.scss | 15 + .../page-not-found.component.ts | 2 +- .../pagination-component.sass | 41 - .../pagination.component.scss | 55 + .../pagination.component.ts | 2 +- ...search-additional-buttons-nav.component.ts | 2 +- .../search-additional-buttons.component.sass | 32 - .../search-additional-buttons.component.scss | 39 + .../search-additional-buttons.component.ts | 2 +- .../spinner/spinner/spinner.component.sass | 8 - .../spinner/spinner/spinner.component.scss | 9 + .../spinner/spinner/spinner.component.ts | 4 +- .../timeline.component.sass | 55 - .../timeline.component.scss | 72 + .../timeline-component/timeline.component.ts | 2 +- .../timeline-component/timeline.module.ts | 2 +- .../components/toggle/toggle.component.sass | 37 - .../components/toggle/toggle.component.scss | 52 + src/app/components/toggle/toggle.component.ts | 2 +- .../metadata-block/block.service.spec.ts | 4 +- .../block-header/block-header.component.sass | 14 - .../block-header/block-header.component.scss | 21 + .../block-header/block-header.component.ts | 4 +- .../block-navigation.component.sass | 25 - .../block-navigation.component.scss | 33 + .../block-navigation.component.ts | 6 +- .../block-row-data.component.sass | 0 .../block-row-data.component.spec.ts | 2 +- .../block-row-data.component.ts | 1 - .../add-data-event.component.spec.ts | 2 +- .../add-data-event.component.ts | 3 +- .../base-dynamic-event.component.sass | 0 .../base-dynamic-event.component.ts | 1 - .../block-interval-property.component.sass | 12 - .../block-interval-property.component.scss | 17 + .../block-interval-property.component.spec.ts | 4 +- .../block-interval-property.component.ts | 8 +- .../cache-property.component.sass | 0 .../cache-property.component.ts | 1 - .../cards-property.component.sass | 12 - .../cards-property.component.scss | 15 + .../cards-property.component.ts | 2 +- .../command-property.component.sass | 5 - .../command-property.component.scss | 6 + .../command-property.component.ts | 2 +- ...dataset-name-by-id-property.component.sass | 4 - ...dataset-name-by-id-property.component.scss | 7 + ...aset-name-by-id-property.component.spec.ts | 4 +- .../dataset-name-by-id-property.component.ts | 4 +- .../dataset-name-property.component.sass | 4 - .../dataset-name-property.component.scss | 7 + .../dataset-name-property.component.spec.ts | 2 +- .../dataset-name-property.component.ts | 4 +- .../engine-property.component.sass | 2 - .../engine-property.component.scss | 3 + .../engine-property.component.ts | 2 +- .../env-variables-property.component.sass | 2 - .../env-variables-property.component.scss | 3 + .../env-variables-property.component.ts | 4 +- .../event-time-property.component.sass | 0 .../event-time-property.component.ts | 1 - .../hash-property.component.sass | 0 .../hash-property/hash-property.component.ts | 1 - .../link-property.component.sass | 4 - .../link-property.component.scss | 7 + .../link-property/link-property.component.ts | 2 +- .../merge-strategy-property.component.sass | 2 - .../merge-strategy-property.component.scss | 3 + .../merge-strategy-property.component.ts | 2 +- .../offset-interval-property.component.sass | 7 - .../offset-interval-property.component.scss | 9 + .../offset-interval-property.component.ts | 6 +- .../order-property.component.sass | 0 .../order-property.component.ts | 1 - .../owner-property.component.sass | 4 - .../owner-property.component.scss | 7 + .../owner-property.component.ts | 6 +- .../schema-property.component.sass | 2 - .../schema-property.component.scss | 3 + .../schema-property.component.ts | 2 +- .../separator-property.component.sass | 0 .../separator-property.component.ts | 1 - .../simple-property.component.sass | 0 .../simple-property.component.ts | 3 +- .../size-property.component.sass | 0 .../size-property/size-property.component.ts | 1 - .../sql-query-viewer.component.sass | 1 - .../sql-query-viewer.component.ts | 1 - .../step-type-property.component.sass | 0 .../step-type-property.component.ts | 1 - .../temporal-tables-property.component.sass | 0 .../temporal-tables-property.component.ts | 1 - .../time-property.component.sass | 0 .../time-property/time-property.component.ts | 1 - .../unsupported-property.component.sass | 0 .../unsupported-property.component.ts | 1 - .../yaml-event-viewer.component.sass | 0 .../yaml-event-viewer.component.ts | 1 - .../execute-query-event.component.spec.ts | 4 +- .../execute-query-event.component.ts | 1 - .../execute-query-event.source.ts | 4 +- .../seed-event/seed-event.component.sass | 0 .../seed-event/seed-event.component.ts | 1 - .../set-attachments-event.component.sass | 4 - .../set-attachments-event.component.scss | 7 + .../set-attachments-event.component.spec.ts | 2 +- .../set-attachments-event.component.ts | 4 +- .../set-info-event.component.sass | 0 .../set-info-event.component.spec.ts | 4 +- .../set-info-event.component.ts | 1 - .../set-license-event.component.sass | 0 .../set-license-event.component.ts | 3 +- ...set-polling-source-event.component.spec.ts | 4 +- .../set-polling-source-event.component.ts | 1 - .../set-polling-source-event.source.ts | 2 +- .../set-transform-event.component.ts | 3 +- .../set-transform-event.source.ts | 4 +- .../set-vocab-event.component.sass | 0 .../set-vocab-event.component.spec.ts | 2 +- .../set-vocab-event.component.ts | 1 - .../set-watermark-event.component.sass | 0 .../set-watermark-event.component.spec.ts | 2 +- .../set-watermark-event.component.ts | 3 +- .../builders/set-transform-section.builder.ts | 8 +- .../event-details.component.sass | 0 .../event-details.component.spec.ts | 4 +- .../event-details/event-details.component.ts | 3 +- .../components/event-details/mock.events.ts | 2 +- .../tooltip-icon/tooltip-icon.component.sass | 19 - .../tooltip-icon/tooltip-icon.component.scss | 26 + .../tooltip-icon/tooltip-icon.component.ts | 2 +- .../yaml-view-section.component.sass | 0 .../yaml-view-section.component.spec.ts | 2 +- .../yaml-view-section.component.ts | 1 - .../metadata-block.component.sass | 19 - .../metadata-block.component.scss | 22 + .../metadata-block.component.spec.ts | 4 +- .../metadata-block.component.ts | 10 +- .../metadata-block/metadata-block.module.ts | 4 +- .../dataset-create.component.sass | 117 -- .../dataset-create.component.scss | 157 ++ .../dataset-create.component.ts | 4 +- .../dataset-create.service.spec.ts | 8 +- .../dataset-create/dataset-create.service.ts | 2 +- ...ata-component.html => data.component.html} | 0 ...mponent.spec.ts => data.component.spec.ts} | 2 +- .../{data-component.ts => data.component.ts} | 2 +- .../load-more/load-more.component.sass | 33 - .../load-more/load-more.component.scss | 43 + .../load-more/load-more.component.ts | 2 +- .../additional-components/data-tabs.mock.ts | 2 +- ...nent.spec.ts => history.component.spec.ts} | 2 +- ...tory-component.ts => history.component.ts} | 0 ...-component.html => lineage.component.html} | 0 ...nent.spec.ts => lineage.component.spec.ts} | 4 +- ...eage-component.ts => lineage.component.ts} | 2 +- .../add-polling-source.component.sass | 18 - .../add-polling-source.component.scss | 20 + .../add-polling-source.component.ts | 4 +- .../steps/base-step/base-step.component.sass | 1 - .../steps/base-step/base-step.component.ts | 1 - .../prepare-step/prepare-step.component.sass | 8 - .../prepare-step/prepare-step.component.scss | 10 + .../prepare-step/prepare-step.component.ts | 2 +- .../preprocess-step.component.sass | 7 - .../preprocess-step.component.scss | 9 + .../preprocess-step.component.ts | 2 +- .../final-yaml-modal.component.sass | 1 - .../final-yaml-modal.component.ts | 1 - .../array-keys-field.component.sass | 5 - .../array-keys-field.component.scss | 6 + .../array-keys-field.component.ts | 2 +- .../cache-field/cache-field.component.sass | 0 .../cache-field/cache-field.component.ts | 1 - .../checkbox-field.component.sass | 0 .../checkbox-field.component.ts | 1 - .../input-field/input-field.component.sass | 2 - .../input-field/input-field.component.scss | 3 + .../input-field/input-field.component.ts | 2 +- .../key-value-field.component.sass | 5 - .../key-value-field.component.scss | 6 + .../key-value-field.component.ts | 2 +- .../order-field/order-field.component.sass | 0 .../order-field/order-field.component.ts | 1 - .../schema-field/schema-field.component.sass | 54 - .../schema-field/schema-field.component.scss | 72 + .../schema-field/schema-field.component.ts | 4 +- .../select-date-format-field.component.sass | 0 .../select-date-format-field.component.ts | 1 - .../select-kind-field.component.sass | 2 - .../select-kind-field.component.scss | 3 + .../select-kind-field.component.ts | 4 +- .../typeahead-field.component.sass | 1 - .../typeahead-field.component.ts | 1 - .../engine-select.component.sass | 58 - .../engine-select.component.scss | 75 + .../engine-select/engine-select.component.ts | 2 +- .../engine-section.component.sass | 3 - .../engine-section.component.scss | 3 + .../engine-section.component.ts | 5 +- .../queries-section.component.sass | 24 - .../queries-section.component.scss | 30 + .../queries-section.component.ts | 2 +- .../search-section.component.sass | 38 - .../search-section.component.scss | 52 + .../search-section.component.ts | 10 +- .../set-transform.component.sass | 20 - .../set-transform.component.scss | 28 + .../set-transform/set-transform.component.ts | 4 +- .../stepper-navigation.component.sass | 19 - .../stepper-navigation.component.scss | 24 + .../stepper-navigation.component.ts | 2 +- ...ent.spec.ts => metadata.component.spec.ts} | 6 +- ...ata-component.ts => metadata.component.ts} | 4 +- .../edit-details-modal.component.sass | 0 .../edit-details-modal.component.ts | 1 - .../edit-license-modal.component.sass | 0 .../edit-license-modal.component.ts | 1 - .../edit-watermark-modal.component.sass | 5 - .../edit-watermark-modal.component.scss | 7 + .../edit-watermark-modal.component.ts | 4 +- .../readme-section.component.sass | 0 .../readme-section.component.ts | 1 - .../overview-component.sass | 51 - ...component.html => overview.component.html} | 0 .../overview.component.scss | 76 + ...ent.spec.ts => overview.component.spec.ts} | 8 +- ...iew-component.ts => overview.component.ts} | 6 +- .../services/dataset-commit.service.spec.ts | 2 +- .../settings.component.sass | 141 -- .../settings.component.scss | 186 ++ .../settings.component.spec.ts | 2 +- .../settings-component/settings.component.ts | 2 +- ...tml => dataset-view-header.component.html} | 0 .../dataset-view-header.component.spec.ts | 2 +- ...nt.ts => dataset-view-header.component.ts} | 2 +- ....html => dataset-view-menu.component.html} | 0 ...ts => dataset-view-menu.component.spec.ts} | 4 +- ...nent.ts => dataset-view-menu.component.ts} | 2 +- .../dataset-view/dataset-view.component.sass | 108 -- src/app/dataset-view/dataset.component.scss | 146 ++ .../dataset-view/dataset.component.spec.ts | 8 +- src/app/dataset-view/dataset.component.ts | 2 +- src/app/dataset-view/dataset.module.ts | 14 +- src/app/dataset-view/dataset.service.spec.ts | 2 +- src/app/dataset-view/dataset.service.ts | 6 +- .../dataset.subscriptions.interface.ts | 2 +- src/app/search/mock.data.ts | 4 +- src/app/search/search.component.sass | 20 - src/app/search/search.component.scss | 27 + src/app/search/search.component.spec.ts | 6 +- src/app/search/search.component.ts | 2 +- src/app/search/search.module.ts | 2 +- src/app/search/search.service.spec.ts | 2 +- src/app/services/account.service.ts | 6 +- src/app/services/navigation.service.spec.ts | 6 +- src/app/services/navigation.service.ts | 4 +- .../services/templates-yaml-events.service.ts | 2 +- src/app/shared/shared/shared.module.ts | 2 +- src/assets/styles/var.sass | 645 ------- src/assets/styles/var.scss | 790 ++++++++ src/styles.sass | 1190 ------------ src/styles.scss | 1642 +++++++++++++++++ 314 files changed, 4443 insertions(+), 3444 deletions(-) delete mode 100644 src/app/app.component.sass delete mode 100644 src/app/auth/account/account.component.sass create mode 100644 src/app/auth/account/account.component.scss delete mode 100644 src/app/auth/account/additional-components/datasets-tab/datasets-tab.component.sass delete mode 100644 src/app/auth/login/login.component.sass delete mode 100644 src/app/auth/settings/settings.component.sass create mode 100644 src/app/auth/settings/settings.component.scss delete mode 100644 src/app/components/custom-pagination-component/custom-pagination.component.sass create mode 100644 src/app/components/custom-pagination-component/custom-pagination.component.scss delete mode 100644 src/app/components/dataset-list-component/dataset-list.sass create mode 100644 src/app/components/dataset-list-component/dataset-list.scss delete mode 100644 src/app/components/dataset-list-item/dataset-list-item.component.sass create mode 100644 src/app/components/dataset-list-item/dataset-list-item.component.scss delete mode 100644 src/app/components/display-hash/display-hash.component.sass create mode 100644 src/app/components/display-hash/display-hash.component.scss delete mode 100644 src/app/components/display-time/display-time.component.sass delete mode 100644 src/app/components/dynamic-table/dynamic-table.sass create mode 100644 src/app/components/dynamic-table/dynamic-table.scss delete mode 100644 src/app/components/notification-indicator/notification-indicator.sass create mode 100644 src/app/components/notification-indicator/notification-indicator.scss delete mode 100644 src/app/components/overview-history-summary-header/overview-history-summary-header.component.sass create mode 100644 src/app/components/overview-history-summary-header/overview-history-summary-header.component.scss delete mode 100644 src/app/components/page-not-found/page-not-found.component.sass create mode 100644 src/app/components/page-not-found/page-not-found.component.scss delete mode 100644 src/app/components/pagination-component/pagination-component.sass create mode 100644 src/app/components/pagination-component/pagination.component.scss delete mode 100644 src/app/components/search-additional-buttons/search-additional-buttons.component.sass create mode 100644 src/app/components/search-additional-buttons/search-additional-buttons.component.scss delete mode 100644 src/app/components/spinner/spinner/spinner.component.sass create mode 100644 src/app/components/spinner/spinner/spinner.component.scss delete mode 100644 src/app/components/timeline-component/timeline.component.sass create mode 100644 src/app/components/timeline-component/timeline.component.scss delete mode 100644 src/app/components/toggle/toggle.component.sass create mode 100644 src/app/components/toggle/toggle.component.scss delete mode 100644 src/app/dataset-block/metadata-block/components/block-header/block-header.component.sass create mode 100644 src/app/dataset-block/metadata-block/components/block-header/block-header.component.scss delete mode 100644 src/app/dataset-block/metadata-block/components/block-navigation/block-navigation.component.sass create mode 100644 src/app/dataset-block/metadata-block/components/block-navigation/block-navigation.component.scss delete mode 100644 src/app/dataset-block/metadata-block/components/block-row-data/block-row-data.component.sass delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/base-dynamic-event/base-dynamic-event.component.sass delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/block-interval-property/block-interval-property.component.sass create mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/block-interval-property/block-interval-property.component.scss delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/cache-property/cache-property.component.sass delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/cards-property/cards-property.component.sass create mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/cards-property/cards-property.component.scss delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/command-property/command-property.component.sass create mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/command-property/command-property.component.scss delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-by-id-property/dataset-name-by-id-property.component.sass create mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-by-id-property/dataset-name-by-id-property.component.scss delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-property/dataset-name-property.component.sass create mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-property/dataset-name-property.component.scss delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/engine-property/engine-property.component.sass create mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/engine-property/engine-property.component.scss delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/env-variables-property/env-variables-property.component.sass create mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/env-variables-property/env-variables-property.component.scss delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/event-time-property/event-time-property.component.sass delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/hash-property/hash-property.component.sass delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/link-property/link-property.component.sass create mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/link-property/link-property.component.scss delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/merge-strategy-property/merge-strategy-property.component.sass create mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/merge-strategy-property/merge-strategy-property.component.scss delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/offset-interval-property/offset-interval-property.component.sass create mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/offset-interval-property/offset-interval-property.component.scss delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/order-property/order-property.component.sass delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/owner-property/owner-property.component.sass create mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/owner-property/owner-property.component.scss delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/schema-property/schema-property.component.sass create mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/schema-property/schema-property.component.scss delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/separator-property/separator-property.component.sass delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/simple-property/simple-property.component.sass delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/size-property/size-property.component.sass delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/sql-query-viewer/sql-query-viewer.component.sass delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/step-type-property/step-type-property.component.sass delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/temporal-tables-property/temporal-tables-property.component.sass delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/time-property/time-property.component.sass delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/unsupported-property/unsupported-property.component.sass delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/common/yaml-event-viewer/yaml-event-viewer.component.sass delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/seed-event/seed-event.component.sass delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.sass create mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.scss delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/set-info-event/set-info-event.component.sass delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/set-license-event/set-license-event.component.sass delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/set-vocab-event/set-vocab-event.component.sass delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/components/set-watermark-event/set-watermark-event.component.sass delete mode 100644 src/app/dataset-block/metadata-block/components/event-details/event-details.component.sass delete mode 100644 src/app/dataset-block/metadata-block/components/tooltip-icon/tooltip-icon.component.sass create mode 100644 src/app/dataset-block/metadata-block/components/tooltip-icon/tooltip-icon.component.scss delete mode 100644 src/app/dataset-block/metadata-block/components/yaml-view-section/yaml-view-section.component.sass delete mode 100644 src/app/dataset-block/metadata-block/metadata-block.component.sass create mode 100644 src/app/dataset-block/metadata-block/metadata-block.component.scss delete mode 100644 src/app/dataset-create/dataset-create.component.sass create mode 100644 src/app/dataset-create/dataset-create.component.scss rename src/app/dataset-view/additional-components/data-component/{data-component.html => data.component.html} (100%) rename src/app/dataset-view/additional-components/data-component/{data-component.spec.ts => data.component.spec.ts} (98%) rename src/app/dataset-view/additional-components/data-component/{data-component.ts => data.component.ts} (99%) delete mode 100644 src/app/dataset-view/additional-components/data-component/load-more/load-more.component.sass create mode 100644 src/app/dataset-view/additional-components/data-component/load-more/load-more.component.scss rename src/app/dataset-view/additional-components/history-component/{history-component.spec.ts => history.component.spec.ts} (96%) rename src/app/dataset-view/additional-components/history-component/{history-component.ts => history.component.ts} (100%) rename src/app/dataset-view/additional-components/lineage-component/{lineage-component.html => lineage.component.html} (100%) rename src/app/dataset-view/additional-components/lineage-component/{lineage-component.spec.ts => lineage.component.spec.ts} (93%) rename src/app/dataset-view/additional-components/lineage-component/{lineage-component.ts => lineage.component.ts} (98%) delete mode 100644 src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/add-polling-source.component.sass create mode 100644 src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/add-polling-source.component.scss delete mode 100644 src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/base-step/base-step.component.sass delete mode 100644 src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/prepare-step/prepare-step.component.sass create mode 100644 src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/prepare-step/prepare-step.component.scss delete mode 100644 src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/preprocess-step/preprocess-step.component.sass create mode 100644 src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/preprocess-step/preprocess-step.component.scss delete mode 100644 src/app/dataset-view/additional-components/metadata-component/components/final-yaml-modal/final-yaml-modal.component.sass delete mode 100644 src/app/dataset-view/additional-components/metadata-component/components/form-components/array-keys-field/array-keys-field.component.sass create mode 100644 src/app/dataset-view/additional-components/metadata-component/components/form-components/array-keys-field/array-keys-field.component.scss delete mode 100644 src/app/dataset-view/additional-components/metadata-component/components/form-components/cache-field/cache-field.component.sass delete mode 100644 src/app/dataset-view/additional-components/metadata-component/components/form-components/checkbox-field/checkbox-field.component.sass delete mode 100644 src/app/dataset-view/additional-components/metadata-component/components/form-components/input-field/input-field.component.sass create mode 100644 src/app/dataset-view/additional-components/metadata-component/components/form-components/input-field/input-field.component.scss delete mode 100644 src/app/dataset-view/additional-components/metadata-component/components/form-components/key-value-field/key-value-field.component.sass create mode 100644 src/app/dataset-view/additional-components/metadata-component/components/form-components/key-value-field/key-value-field.component.scss delete mode 100644 src/app/dataset-view/additional-components/metadata-component/components/form-components/order-field/order-field.component.sass delete mode 100644 src/app/dataset-view/additional-components/metadata-component/components/form-components/schema-field/schema-field.component.sass create mode 100644 src/app/dataset-view/additional-components/metadata-component/components/form-components/schema-field/schema-field.component.scss delete mode 100644 src/app/dataset-view/additional-components/metadata-component/components/form-components/select-date-format-field/select-date-format-field.component.sass delete mode 100644 src/app/dataset-view/additional-components/metadata-component/components/form-components/select-kind-field/select-kind-field.component.sass create mode 100644 src/app/dataset-view/additional-components/metadata-component/components/form-components/select-kind-field/select-kind-field.component.scss delete mode 100644 src/app/dataset-view/additional-components/metadata-component/components/form-components/typeahead-field/typeahead-field.component.sass delete mode 100644 src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/components/engine-select/engine-select.component.sass create mode 100644 src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/components/engine-select/engine-select.component.scss delete mode 100644 src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/engine-section.component.sass create mode 100644 src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/engine-section.component.scss delete mode 100644 src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/queries-section/queries-section.component.sass create mode 100644 src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/queries-section/queries-section.component.scss delete mode 100644 src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/search-section/search-section.component.sass create mode 100644 src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/search-section/search-section.component.scss delete mode 100644 src/app/dataset-view/additional-components/metadata-component/components/set-transform/set-transform.component.sass create mode 100644 src/app/dataset-view/additional-components/metadata-component/components/set-transform/set-transform.component.scss delete mode 100644 src/app/dataset-view/additional-components/metadata-component/components/stepper-navigation/stepper-navigation.component.sass create mode 100644 src/app/dataset-view/additional-components/metadata-component/components/stepper-navigation/stepper-navigation.component.scss rename src/app/dataset-view/additional-components/metadata-component/{metadata-component.spec.ts => metadata.component.spec.ts} (96%) rename src/app/dataset-view/additional-components/metadata-component/{metadata-component.ts => metadata.component.ts} (97%) delete mode 100644 src/app/dataset-view/additional-components/overview-component/components/edit-details-modal/edit-details-modal.component.sass delete mode 100644 src/app/dataset-view/additional-components/overview-component/components/edit-license-modal/edit-license-modal.component.sass delete mode 100644 src/app/dataset-view/additional-components/overview-component/components/edit-watermark-modal/edit-watermark-modal.component.sass create mode 100644 src/app/dataset-view/additional-components/overview-component/components/edit-watermark-modal/edit-watermark-modal.component.scss delete mode 100644 src/app/dataset-view/additional-components/overview-component/components/readme-section/readme-section.component.sass delete mode 100644 src/app/dataset-view/additional-components/overview-component/overview-component.sass rename src/app/dataset-view/additional-components/overview-component/{overview-component.html => overview.component.html} (100%) create mode 100644 src/app/dataset-view/additional-components/overview-component/overview.component.scss rename src/app/dataset-view/additional-components/overview-component/{overview-component.spec.ts => overview.component.spec.ts} (95%) rename src/app/dataset-view/additional-components/overview-component/{overview-component.ts => overview.component.ts} (96%) create mode 100644 src/app/dataset-view/additional-components/settings-component/settings.component.scss rename src/app/dataset-view/dataset-view-header/{dataset-view-header.html => dataset-view-header.component.html} (100%) rename src/app/dataset-view/dataset-view-header/{dataset-view-header-component.ts => dataset-view-header.component.ts} (98%) rename src/app/dataset-view/dataset-view-menu/{dataset-view-menu.html => dataset-view-menu.component.html} (100%) rename src/app/dataset-view/dataset-view-menu/{dataset-view-menu-component.spec.ts => dataset-view-menu.component.spec.ts} (96%) rename src/app/dataset-view/dataset-view-menu/{dataset-view-menu-component.ts => dataset-view-menu.component.ts} (98%) delete mode 100644 src/app/dataset-view/dataset-view.component.sass create mode 100644 src/app/dataset-view/dataset.component.scss delete mode 100644 src/app/search/search.component.sass create mode 100644 src/app/search/search.component.scss delete mode 100644 src/assets/styles/var.sass create mode 100644 src/assets/styles/var.scss delete mode 100644 src/styles.sass create mode 100644 src/styles.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 5ff4bcc8b..e1565462e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,10 +10,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Deleting and renaming a dataset on Settings tab - Added icons for dataset's tabs - Added more content for graph's node +- Added Load More data functionality to dataset data tab ### Changed - Upgraded to Node.JS generation 16.x - Upgraded to Angular 14.3 - Switched to different Angular wrapper for Monaco editor (ngx-monaco-editor-v2) +- Switched from SASS to SCSS stylesheets - Selected library updates/downgrades to align with Angular 14.3 and Node.JS 16.x - GraphQL code generator tuned to produce string type by default for scalars - Fixed bug with disabled state for "Run" button after error @@ -21,7 +23,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fixed bug with updating the list of datasets after deletion - Refactored observable subscriptions to pipe async - Truncated fields in material table using a configurable length -- Added Load More data functionality to dataset data tab ## [0.8.0] - 2023-08-04 diff --git a/angular.json b/angular.json index 3dcddbc54..7f0ebfce4 100644 --- a/angular.json +++ b/angular.json @@ -7,7 +7,7 @@ "projectType": "application", "schematics": { "@schematics/angular:component": { - "style": "sass" + "style": "scss" } }, "root": "", @@ -42,8 +42,13 @@ "output": "/assets/monaco/" } ], + "stylePreprocessorOptions": { + "includePaths": [ + "src/assets/styles" + ] + }, "styles": [ - "src/styles.sass", + "src/styles.scss", "node_modules/prismjs/themes/prism-okaidia.css", "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css", "node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css", @@ -113,8 +118,13 @@ "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", "assets": ["src/favicon.ico", "src/assets"], + "stylePreprocessorOptions": { + "includePaths": [ + "src/assets/styles" + ] + }, "styles": [ - "src/styles.sass", + "src/styles.scss", "node_modules/prismjs/themes/prism-okaidia.css", "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css", "node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css", diff --git a/src/app/api/dataset.api.spec.ts b/src/app/api/dataset.api.spec.ts index 7fac55d52..d9debf1de 100644 --- a/src/app/api/dataset.api.spec.ts +++ b/src/app/api/dataset.api.spec.ts @@ -6,11 +6,7 @@ import { TEST_DATASET_NAME, TEST_USER_NAME, } from "./mock/dataset.mock"; -import { - mockCommitEventResponse, - mockDatasetHistoryResponse, - mockDatasetMainDataResponse, -} from "./../search/mock.data"; +import { mockCommitEventResponse, mockDatasetHistoryResponse, mockDatasetMainDataResponse } from "../search/mock.data"; import { TestBed } from "@angular/core/testing"; import { ApolloTestingController, ApolloTestingModule } from "apollo-angular/testing"; import { DatasetApi } from "./dataset.api"; diff --git a/src/app/api/mock/dataset.mock.ts b/src/app/api/mock/dataset.mock.ts index a4346563a..846284898 100644 --- a/src/app/api/mock/dataset.mock.ts +++ b/src/app/api/mock/dataset.mock.ts @@ -5,7 +5,7 @@ import { DatasetSearchOverviewFragment, GetDatasetDataSqlRunQuery, GetMetadataBlockQuery, -} from "./../kamu.graphql.interface"; +} from "../kamu.graphql.interface"; import { DataSchemaFormat } from "../kamu.graphql.interface"; import { DatasetsAccountResponse } from "src/app/interface/dataset.interface"; diff --git a/src/app/app.component.sass b/src/app/app.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 5b51b35c5..5c5e79b3d 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -23,7 +23,6 @@ export const ALL_URLS_WITHOUT_ACCESS_TOKEN: string[] = [ProjectLinks.URL_LOGIN, @Component({ selector: "app-root", templateUrl: "./app.component.html", - styleUrls: ["./app.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class AppComponent extends BaseComponent implements OnInit { @@ -94,10 +93,10 @@ export class AppComponent extends BaseComponent implements OnInit { if (item.__typename === TypeNames.datasetType) { this.navigationService.navigateToDatasetView({ accountName: item.dataset.owner.name, - datasetName: item.dataset.name , + datasetName: item.dataset.name, }); } else { - this.navigationService.navigateToSearch(item.dataset.id ); + this.navigationService.navigateToSearch(item.dataset.id); } } public onClickAppLogo(): void { diff --git a/src/app/auth/account/account.component.sass b/src/app/auth/account/account.component.sass deleted file mode 100644 index 835ce019e..000000000 --- a/src/app/auth/account/account.component.sass +++ /dev/null @@ -1,45 +0,0 @@ -@import src/assets/styles/var -@import 'node_modules/prismjs/themes/prism-okaidia' -@import 'node_modules/bootstrap/dist/css/bootstrap.min' -@import 'node_modules/prismjs/plugins/line-numbers/prism-line-numbers' -@import 'node_modules/prismjs/plugins/line-highlight/prism-line-highlight' - -.toggle-group - box-shadow: none - border-radius: 0 !important - width: fit-content - -.mat-button-toggle-checked - border-left: none - border-top: none - border-right: none - border-bottom: 2px solid !important - border-radius: 0 - background-color: transparent !important - -.mat-button-toggle-input - background-color: transparent !important - padding-left: 32px !important - -.custom-container - display: grid - grid-template-columns: 300px 1fr - -.vcard-username - font-size: 20px - font-style: normal - font-weight: 300 - line-height: 24px - color: $app-color-fg-muted - -.organization - font-weight: 500 - -.btn-custom - background-color: #f6f8fa - border-color: #dee2e6 !important - color: $app-dark - font-weight: 500 - &:hover,&:active,&:focus - background-color: #ebedf0 - color: $app-dark diff --git a/src/app/auth/account/account.component.scss b/src/app/auth/account/account.component.scss new file mode 100644 index 000000000..2b18bd705 --- /dev/null +++ b/src/app/auth/account/account.component.scss @@ -0,0 +1,52 @@ +@import 'var'; + +.toggle-group { + box-shadow: none; + border-radius: 0 !important; + width: fit-content; +} + +.mat-button-toggle-checked { + border-left: none; + border-top: none; + border-right: none; + border-bottom: 2px solid !important; + border-radius: 0; + background-color: transparent !important; +} + +.mat-button-toggle-input { + background-color: transparent !important; + padding-left: 32px !important; +} + +.custom-container { + display: grid; + grid-template-columns: 300px 1fr; +} + +.vcard-username { + font-size: 20px; + font-style: normal; + font-weight: 300; + line-height: 24px; + color: $app-color-fg-muted; +} + +.organization { + font-weight: 500; +} + +.btn-custom { + background-color: #f6f8fa; + border-color: #dee2e6 !important; + color: $app-dark; + font-weight: 500; + + &:hover, + &:active, + &:focus { + background-color: #ebedf0; + color: $app-dark; + } +} \ No newline at end of file diff --git a/src/app/auth/account/account.component.spec.ts b/src/app/auth/account/account.component.spec.ts index 05901dc0e..03943752a 100644 --- a/src/app/auth/account/account.component.spec.ts +++ b/src/app/auth/account/account.component.spec.ts @@ -1,5 +1,5 @@ import { NavigationService } from "src/app/services/navigation.service"; -import { mockAccountDetails } from "./../../api/mock/auth.mock"; +import { mockAccountDetails } from "../../api/mock/auth.mock"; import { AccountTabs } from "./account.constants"; import { MatButtonToggleModule } from "@angular/material/button-toggle"; import { MatIconModule } from "@angular/material/icon"; diff --git a/src/app/auth/account/account.component.ts b/src/app/auth/account/account.component.ts index dd6fbefd2..95f14f409 100644 --- a/src/app/auth/account/account.component.ts +++ b/src/app/auth/account/account.component.ts @@ -1,5 +1,5 @@ import ProjectLinks from "src/app/project-links"; -import { ModalService } from "./../../components/modal/modal.service"; +import { ModalService } from "../../components/modal/modal.service"; import { BaseComponent } from "src/app/common/base.component"; import { NavigationService } from "src/app/services/navigation.service"; import { ChangeDetectionStrategy, Component, ElementRef, OnInit, ViewChild } from "@angular/core"; @@ -17,15 +17,13 @@ import { Observable } from "rxjs"; @Component({ selector: "app-account", templateUrl: "./account.component.html", - styleUrls: ["./account.component.sass"], + styleUrls: ["./account.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class AccountComponent extends BaseComponent implements OnInit { public accountViewType = AccountTabs.overview; public user: AccountDetailsFragment; - public accountTabs = AccountTabs; public accountName: string; - public isDropdownMenu = false; public currentPage = 1; public avatarLink: string; public datasetsAccount$: Observable; diff --git a/src/app/auth/account/additional-components/datasets-tab/datasets-tab.component.sass b/src/app/auth/account/additional-components/datasets-tab/datasets-tab.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/auth/account/additional-components/datasets-tab/datasets-tab.component.ts b/src/app/auth/account/additional-components/datasets-tab/datasets-tab.component.ts index bab692150..6b732e3ac 100644 --- a/src/app/auth/account/additional-components/datasets-tab/datasets-tab.component.ts +++ b/src/app/auth/account/additional-components/datasets-tab/datasets-tab.component.ts @@ -1,4 +1,4 @@ -import { NavigationService } from "./../../../../services/navigation.service"; +import { NavigationService } from "../../../../services/navigation.service"; import { ChangeDetectionStrategy, Input } from "@angular/core"; import { Component } from "@angular/core"; import { DatasetSearchOverviewFragment, PageBasedInfo, User } from "src/app/api/kamu.graphql.interface"; @@ -7,7 +7,6 @@ import { AccountTabs } from "../../account.constants"; @Component({ selector: "app-datasets-tab", templateUrl: "./datasets-tab.component.html", - styleUrls: ["./datasets-tab.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class DatasetsTabComponent { @@ -23,7 +22,7 @@ export class DatasetsTabComponent { public onSelectDataset(row: DatasetSearchOverviewFragment): void { this.navigationService.navigateToDatasetView({ accountName: (row.owner as User).name, - datasetName: row.name , + datasetName: row.name, }); } diff --git a/src/app/auth/github-callback/github.callback.ts b/src/app/auth/github-callback/github.callback.ts index 6d8fff6f7..4adbfe6fb 100644 --- a/src/app/auth/github-callback/github.callback.ts +++ b/src/app/auth/github-callback/github.callback.ts @@ -1,4 +1,4 @@ -import { NavigationService } from "./../../services/navigation.service"; +import { NavigationService } from "../../services/navigation.service"; import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core"; import { ActivatedRoute, Params } from "@angular/router"; import { AuthApi } from "../../api/auth.api"; diff --git a/src/app/auth/login/login.component.sass b/src/app/auth/login/login.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/auth/login/login.component.ts b/src/app/auth/login/login.component.ts index 10059e72c..db09f5f66 100644 --- a/src/app/auth/login/login.component.ts +++ b/src/app/auth/login/login.component.ts @@ -4,7 +4,6 @@ import { environment } from "../../../environments/environment"; @Component({ selector: "app-login", templateUrl: "./login.component.html", - styleUrls: ["./login.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class LoginComponent { diff --git a/src/app/auth/settings/settings.component.sass b/src/app/auth/settings/settings.component.sass deleted file mode 100644 index e346246e0..000000000 --- a/src/app/auth/settings/settings.component.sass +++ /dev/null @@ -1,72 +0,0 @@ -@import src/assets/styles/var - -.p-responsive - padding-left: 16px - a - text-decoration: none - -.fw-bold-custom - font-weight: 600 - -.action-list - padding: 0 - &-item - position: relative - list-style: none - border-radius: 6px - text-decoration: none - a - &:hover - cursor: pointer - text-decoration: none - &--nav__active - background: $app-color-action-list-item-default-selected-bg - a - font-weight: 600 - &::after - position: absolute - top: calc(50% - 12px) - left: -8px - width: 4px - height: 24px - content: "" - background: $app-color-accent-fg - border-radius: 6px - &-content - position: relative - display: grid - width: 100% - padding: 6px 8px - font-size: 14px - font-weight: 400 - color: $app-color-fg-default - text-align: left - user-select: none - background-color: transparent - border: none - border-radius: 6px - transition: background 33.333ms linear - touch-action: manipulation - grid-template-rows: min-content - grid-template-areas: "leadingAction leadingVisual label trailingVisual trailingAction" - grid-template-columns: min-content max-content - align-items: start - &:hover - background: $app-color-action-list-item-default-selected-bg - &-section-divider - &:not(:empty) - display: flex - padding: 6px 8px - font-size: 12px - font-weight: 500 - color: $app-color-fg-muted - flex-direction: column - &-section-divider - &:empty - display: block - height: 1px - padding: 0 - margin: 7px -8px 8px - list-style: none - background: $app-color-action-list-item-inline-divider - border: 0 diff --git a/src/app/auth/settings/settings.component.scss b/src/app/auth/settings/settings.component.scss new file mode 100644 index 000000000..1a5c6c456 --- /dev/null +++ b/src/app/auth/settings/settings.component.scss @@ -0,0 +1,98 @@ +@import 'var'; + +.p-responsive { + padding-left: 16px; + + a { + text-decoration: none; + } +} + +.fw-bold-custom { + font-weight: 600; +} + +.action-list { + padding: 0; + + &-item { + position: relative; + list-style: none; + border-radius: 6px; + text-decoration: none; + + a { + &:hover { + cursor: pointer; + text-decoration: none; + } + } + + &--nav__active { + background: $app-color-action-list-item-default-selected-bg; + + a { + font-weight: 600; + } + + &::after { + position: absolute; + top: calc(50% - 12px); + left: -8px; + width: 4px; + height: 24px; + content: ''; + background: $app-color-accent-fg; + border-radius: 6px; + } + } + } + + &-content { + position: relative; + display: grid; + width: 100%; + padding: 6px 8px; + font-size: 14px; + font-weight: 400; + color: $app-color-fg-default; + text-align: left; + user-select: none; + background-color: transparent; + border: none; + border-radius: 6px; + transition: background 33.333ms linear; + touch-action: manipulation; + grid-template-rows: min-content; + grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction'; + grid-template-columns: min-content max-content; + align-items: start; + + &:hover { + background: $app-color-action-list-item-default-selected-bg; + } + } + + &-section-divider { + &:not(:empty) { + display: flex; + padding: 6px 8px; + font-size: 12px; + font-weight: 500; + color: $app-color-fg-muted; + flex-direction: column; + } + } + + &-section-divider { + &:empty { + display: block; + height: 1px; + padding: 0; + margin: 7px -8px 8px; + list-style: none; + background: $app-color-action-list-item-inline-divider; + border: 0; + } + } +} \ No newline at end of file diff --git a/src/app/auth/settings/settings.component.spec.ts b/src/app/auth/settings/settings.component.spec.ts index e7ba24238..e50d83bac 100644 --- a/src/app/auth/settings/settings.component.spec.ts +++ b/src/app/auth/settings/settings.component.spec.ts @@ -1,4 +1,4 @@ -import { mockAccountDetails } from "./../../api/mock/auth.mock"; +import { mockAccountDetails } from "../../api/mock/auth.mock"; import { RouterTestingModule } from "@angular/router/testing"; import { ComponentFixture, TestBed } from "@angular/core/testing"; import { ActivatedRoute } from "@angular/router"; diff --git a/src/app/auth/settings/settings.component.ts b/src/app/auth/settings/settings.component.ts index 22130703a..27f15216c 100644 --- a/src/app/auth/settings/settings.component.ts +++ b/src/app/auth/settings/settings.component.ts @@ -10,7 +10,7 @@ import { BaseComponent } from "src/app/common/base.component"; @Component({ selector: "app-settings", templateUrl: "./settings.component.html", - styleUrls: ["./settings.component.sass"], + styleUrls: ["./settings.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SettingsComponent extends BaseComponent implements OnInit { diff --git a/src/app/common/base.processing.component.ts b/src/app/common/base.processing.component.ts index 047342d2a..74d7f26e5 100644 --- a/src/app/common/base.processing.component.ts +++ b/src/app/common/base.processing.component.ts @@ -1,8 +1,8 @@ -import { DatasetInfo } from "./../interface/navigation.interface"; -import { ModalService } from "./../components/modal/modal.service"; +import { DatasetInfo } from "../interface/navigation.interface"; +import { ModalService } from "../components/modal/modal.service"; import { DatasetNavigationInterface, DatasetViewTypeEnum } from "../dataset-view/dataset-view.interface"; import { searchAdditionalButtonsEnum } from "../search/search.interface"; -import { NavigationService } from "./../services/navigation.service"; +import { NavigationService } from "../services/navigation.service"; import { promiseWithCatch } from "./app.helpers"; import { BaseComponent } from "./base.component"; import { inject } from "@angular/core"; diff --git a/src/app/common/errors.ts b/src/app/common/errors.ts index 4d2b98427..d57409056 100644 --- a/src/app/common/errors.ts +++ b/src/app/common/errors.ts @@ -1,5 +1,5 @@ -import { ModalService } from "./../components/modal/modal.service"; -import { NavigationService } from "./../services/navigation.service"; +import { ModalService } from "../components/modal/modal.service"; +import { NavigationService } from "../services/navigation.service"; import { ApolloError } from "@apollo/client/core"; import { ErrorTexts } from "./errors.text"; import { logError, promiseWithCatch } from "./app.helpers"; diff --git a/src/app/components/app-header/app-header.component.ts b/src/app/components/app-header/app-header.component.ts index 311e21405..bbe357ba4 100644 --- a/src/app/components/app-header/app-header.component.ts +++ b/src/app/components/app-header/app-header.component.ts @@ -1,4 +1,4 @@ -import { MaybeNull } from "./../../common/app.types"; +import { MaybeNull } from "../../common/app.types"; import { ActivatedRoute, NavigationEnd, Params, Router, RouterEvent } from "@angular/router"; import { ChangeDetectionStrategy, diff --git a/src/app/components/custom-pagination-component/custom-pagination.component.sass b/src/app/components/custom-pagination-component/custom-pagination.component.sass deleted file mode 100644 index 15780618d..000000000 --- a/src/app/components/custom-pagination-component/custom-pagination.component.sass +++ /dev/null @@ -1,39 +0,0 @@ -@import src/assets/styles/var - -.paginate-container - margin-top: 16px - margin-bottom: 16px - text-align: center - display: grid - justify-content: center - -ngb-pagination - ::ng-deep - .page-item - .page-link - border: none !important - display: flex - justify-content: center - align-items: center - border-radius: 6px - & span - display: none - * - font-size: 14px - -.page_button - display: inline-block - width: 16px - height: 16px - content: "" - background-color: currentColor - -.previous_page - margin-right: 4px - clip-path: polygon(9.8px 12.8px, 8.7px 12.8px, 4.5px 8.5px, 4.5px 7.5px, 8.7px 3.2px, 9.8px 4.3px, 6.1px 8px, 9.8px 11.7px, 9.8px 12.8px) - @extend .page_button - -.next_page - margin-left: 4px - clip-path: polygon(6.2px 3.2px, 7.3px 3.2px, 11.5px 7.5px, 11.5px 8.5px, 7.3px 12.8px, 6.2px 11.7px, 9.9px 8px, 6.2px 4.3px, 6.2px 3.2px) - @extend .page_button diff --git a/src/app/components/custom-pagination-component/custom-pagination.component.scss b/src/app/components/custom-pagination-component/custom-pagination.component.scss new file mode 100644 index 000000000..fda174cb4 --- /dev/null +++ b/src/app/components/custom-pagination-component/custom-pagination.component.scss @@ -0,0 +1,51 @@ +@import 'var'; + +.paginate-container { + margin-top: 16px; + margin-bottom: 16px; + text-align: center; + display: grid; + justify-content: center; +} + +ngb-pagination { + ::ng-deep { + .page-item { + .page-link { + border: none !important; + display: flex; + justify-content: center; + align-items: center; + border-radius: 6px; + + & span { + display: none; + } + } + } + + * { + font-size: 14px; + } + } +} + +.page_button { + display: inline-block; + width: 16px; + height: 16px; + content: ''; + background-color: currentColor; +} + +.previous_page { + margin-right: 4px; + clip-path: polygon(9.8px 12.8px, 8.7px 12.8px, 4.5px 8.5px, 4.5px 7.5px, 8.7px 3.2px, 9.8px 4.3px, 6.1px 8px, 9.8px 11.7px, 9.8px 12.8px); + @extend .page_button; +} + +.next_page { + margin-left: 4px; + clip-path: polygon(6.2px 3.2px, 7.3px 3.2px, 11.5px 7.5px, 11.5px 8.5px, 7.3px 12.8px, 6.2px 11.7px, 9.9px 8px, 6.2px 4.3px, 6.2px 3.2px); + @extend .page_button; +} \ No newline at end of file diff --git a/src/app/components/custom-pagination-component/custom-pagination.component.ts b/src/app/components/custom-pagination-component/custom-pagination.component.ts index 8189afd31..437e176b3 100644 --- a/src/app/components/custom-pagination-component/custom-pagination.component.ts +++ b/src/app/components/custom-pagination-component/custom-pagination.component.ts @@ -3,7 +3,7 @@ import { Component, Input, Output, EventEmitter, OnChanges, ChangeDetectionStrat @Component({ selector: "app-custom-pagination", templateUrl: "custom-pagination.component.html", - styleUrls: ["custom-pagination.component.sass"], + styleUrls: ["custom-pagination.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class CustomPaginationComponent implements OnChanges { diff --git a/src/app/components/dataset-list-component/dataset-list.component.ts b/src/app/components/dataset-list-component/dataset-list.component.ts index 18e354fa1..6b840255f 100644 --- a/src/app/components/dataset-list-component/dataset-list.component.ts +++ b/src/app/components/dataset-list-component/dataset-list.component.ts @@ -1,13 +1,11 @@ import { DatasetInfo } from "../../interface/navigation.interface"; -import { NavigationService } from "../../services/navigation.service"; import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from "@angular/core"; -import { ModalService } from "../modal/modal.service"; import { DatasetBasicsFragment, DatasetSearchOverviewFragment } from "src/app/api/kamu.graphql.interface"; @Component({ selector: "app-dataset-list", templateUrl: "./dataset-list.component.html", - styleUrls: ["./dataset-list.sass"], + styleUrls: ["./dataset-list.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class DatasetListComponent { @@ -23,8 +21,6 @@ export class DatasetListComponent { active: boolean; }[]; - constructor(private modalService: ModalService, private navigationService: NavigationService) {} - public onSelectDataset(row: DatasetSearchOverviewFragment): void { const datasetBasics: DatasetBasicsFragment = row as DatasetBasicsFragment; this.selectDatasetEmit.emit({ diff --git a/src/app/components/dataset-list-component/dataset-list.module.ts b/src/app/components/dataset-list-component/dataset-list.module.ts index 139bf09da..131dd9e0a 100644 --- a/src/app/components/dataset-list-component/dataset-list.module.ts +++ b/src/app/components/dataset-list-component/dataset-list.module.ts @@ -1,5 +1,5 @@ -import { DisplayTimeModule } from "./../display-time/display-time.module"; -import { DatasetListItemComponent } from "./../dataset-list-item/dataset-list-item.component"; +import { DisplayTimeModule } from "../display-time/display-time.module"; +import { DatasetListItemComponent } from "../dataset-list-item/dataset-list-item.component"; import { ModuleWithProviders, NgModule } from "@angular/core"; import { MatIconModule } from "@angular/material/icon"; import { MatButtonModule } from "@angular/material/button"; diff --git a/src/app/components/dataset-list-component/dataset-list.sass b/src/app/components/dataset-list-component/dataset-list.sass deleted file mode 100644 index 1bc73f5c3..000000000 --- a/src/app/components/dataset-list-component/dataset-list.sass +++ /dev/null @@ -1,25 +0,0 @@ -@import src/assets/styles/var - -.dataset-list-total-count - margin: 0 - -.select-block - background: transparent - > * - background: transparent - p - z-index: 0 - &:hover - background: $app-background-btn - &.form-group - * - font-size: 16px - -#sortOptions - color: $app-dark - z-index: 1 - background: transparent - padding-left: 50px - transition: .2s cubic-bezier(0.3, 0, 0.5, 1) - &:focus-visible - outline: none diff --git a/src/app/components/dataset-list-component/dataset-list.scss b/src/app/components/dataset-list-component/dataset-list.scss new file mode 100644 index 000000000..3e8b2835c --- /dev/null +++ b/src/app/components/dataset-list-component/dataset-list.scss @@ -0,0 +1,39 @@ +@import 'var'; + +.dataset-list-total-count { + margin: 0; +} + +.select-block { + background: transparent; + + > * { + background: transparent; + } + + p { + z-index: 0; + } + + &:hover { + background: $app-background-btn; + } + + &.form-group { + * { + font-size: 16px; + } + } +} + +#sortOptions { + color: $app-dark; + z-index: 1; + background: transparent; + padding-left: 50px; + transition: .2s cubic-bezier(0.3, 0, 0.5, 1); + + &:focus-visible { + outline: none; + } +} \ No newline at end of file diff --git a/src/app/components/dataset-list-item/dataset-list-item.component.sass b/src/app/components/dataset-list-item/dataset-list-item.component.sass deleted file mode 100644 index d10087393..000000000 --- a/src/app/components/dataset-list-item/dataset-list-item.component.sass +++ /dev/null @@ -1,30 +0,0 @@ -@import src/assets/styles/var - -.dataset-list-container - width: 100% - display: grid - grid-template-columns: 1fr - grid-template-rows: 1fr - &__title-row - display: flex - justify-content: space-between - &__dataset-name - display: flex - justify-content: left - i - margin-right: 8px - &__title - display: flex - background: none - border: none - color: $app-navyBlue - font-size: 16px - &:hover, &:active - cursor: pointer - text-decoration: underline - background: none - &__additional-block - display: flex - gap: 5px - &__description - font-size: 14px diff --git a/src/app/components/dataset-list-item/dataset-list-item.component.scss b/src/app/components/dataset-list-item/dataset-list-item.component.scss new file mode 100644 index 000000000..1e2b2e952 --- /dev/null +++ b/src/app/components/dataset-list-item/dataset-list-item.component.scss @@ -0,0 +1,46 @@ +@import 'var'; + +.dataset-list-container { + width: 100%; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr; + + &__title-row { + display: flex; + justify-content: space-between; + + &__dataset-name { + display: flex; + justify-content: left; + + i { + margin-right: 8px; + } + } + } + + &__title { + display: flex; + background: none; + border: none; + color: $app-navyBlue; + font-size: 16px; + + &:hover, + &:active { + cursor: pointer; + text-decoration: underline; + background: none; + } + } + + &__additional-block { + display: flex; + gap: 5px; + } + + &__description { + font-size: 14px; + } +} \ No newline at end of file diff --git a/src/app/components/dataset-list-item/dataset-list-item.component.spec.ts b/src/app/components/dataset-list-item/dataset-list-item.component.spec.ts index 8576b95d1..adabc69dd 100644 --- a/src/app/components/dataset-list-item/dataset-list-item.component.spec.ts +++ b/src/app/components/dataset-list-item/dataset-list-item.component.spec.ts @@ -1,4 +1,4 @@ -import { NavigationService } from "./../../services/navigation.service"; +import { NavigationService } from "../../services/navigation.service"; import { MatIconModule } from "@angular/material/icon"; import { MatChipsModule } from "@angular/material/chips"; import { ComponentFixture, TestBed } from "@angular/core/testing"; diff --git a/src/app/components/dataset-list-item/dataset-list-item.component.ts b/src/app/components/dataset-list-item/dataset-list-item.component.ts index e3b1420e2..09a90cf26 100644 --- a/src/app/components/dataset-list-item/dataset-list-item.component.ts +++ b/src/app/components/dataset-list-item/dataset-list-item.component.ts @@ -1,5 +1,5 @@ -import { ModalService } from "./../modal/modal.service"; -import { DatasetSearchOverviewFragment } from "./../../api/kamu.graphql.interface"; +import { ModalService } from "../modal/modal.service"; +import { DatasetSearchOverviewFragment } from "../../api/kamu.graphql.interface"; import { Component, EventEmitter, Input, Output } from "@angular/core"; import { promiseWithCatch } from "src/app/common/app.helpers"; import { NavigationService } from "src/app/services/navigation.service"; @@ -7,7 +7,7 @@ import { NavigationService } from "src/app/services/navigation.service"; @Component({ selector: "app-dataset-list-item", templateUrl: "./dataset-list-item.component.html", - styleUrls: ["./dataset-list-item.component.sass"], + styleUrls: ["./dataset-list-item.component.scss"], }) export class DatasetListItemComponent { @Input() public row: DatasetSearchOverviewFragment; diff --git a/src/app/components/display-hash/display-hash.component.sass b/src/app/components/display-hash/display-hash.component.sass deleted file mode 100644 index aed1569ad..000000000 --- a/src/app/components/display-hash/display-hash.component.sass +++ /dev/null @@ -1,6 +0,0 @@ - -svg-icon - &:hover - cursor: pointer - - diff --git a/src/app/components/display-hash/display-hash.component.scss b/src/app/components/display-hash/display-hash.component.scss new file mode 100644 index 000000000..f5158e576 --- /dev/null +++ b/src/app/components/display-hash/display-hash.component.scss @@ -0,0 +1,5 @@ +svg-icon { + &:hover { + cursor: pointer; + } +} \ No newline at end of file diff --git a/src/app/components/display-hash/display-hash.component.spec.ts b/src/app/components/display-hash/display-hash.component.spec.ts index cf20c16d3..410743b5c 100644 --- a/src/app/components/display-hash/display-hash.component.spec.ts +++ b/src/app/components/display-hash/display-hash.component.spec.ts @@ -1,4 +1,4 @@ -import { TEST_BLOCK_HASH } from "./../../api/mock/dataset.mock"; +import { TEST_BLOCK_HASH } from "../../api/mock/dataset.mock"; import { ComponentFixture, TestBed } from "@angular/core/testing"; import { emitClickOnElementByDataTestId, findElementByDataTestId } from "src/app/common/base-test.helpers.spec"; import { mockDatasetInfo } from "src/app/search/mock.data"; diff --git a/src/app/components/display-hash/display-hash.component.ts b/src/app/components/display-hash/display-hash.component.ts index ad5531b04..602281b47 100644 --- a/src/app/components/display-hash/display-hash.component.ts +++ b/src/app/components/display-hash/display-hash.component.ts @@ -1,5 +1,5 @@ -import { DatasetInfo } from "./../../interface/navigation.interface"; -import { NavigationService } from "./../../services/navigation.service"; +import { DatasetInfo } from "../../interface/navigation.interface"; +import { NavigationService } from "../../services/navigation.service"; import { Component, Input } from "@angular/core"; import { Clipboard } from "@angular/cdk/clipboard"; import { ToastrService } from "ngx-toastr"; @@ -7,7 +7,7 @@ import { ToastrService } from "ngx-toastr"; @Component({ selector: "app-display-hash", templateUrl: "./display-hash.component.html", - styleUrls: ["./display-hash.component.sass"], + styleUrls: ["./display-hash.component.scss"], }) export class DisplayHashComponent { @Input() public value: string; diff --git a/src/app/components/display-time/display-time.component.sass b/src/app/components/display-time/display-time.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/components/display-time/display-time.component.ts b/src/app/components/display-time/display-time.component.ts index a2f39fced..4050aca21 100644 --- a/src/app/components/display-time/display-time.component.ts +++ b/src/app/components/display-time/display-time.component.ts @@ -6,7 +6,6 @@ import AppValues from "src/app/common/app.values"; @Component({ selector: "app-display-time", templateUrl: "./display-time.component.html", - styleUrls: ["./display-time.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class DisplayTimeComponent extends BasePropertyComponent { diff --git a/src/app/components/dynamic-table/dynamic-table.component.ts b/src/app/components/dynamic-table/dynamic-table.component.ts index cee464d4c..a783e3290 100644 --- a/src/app/components/dynamic-table/dynamic-table.component.ts +++ b/src/app/components/dynamic-table/dynamic-table.component.ts @@ -6,7 +6,7 @@ import { TableSourceRowInterface } from "./dynamic-table.interface"; @Component({ selector: "app-dynamic-table", templateUrl: "./dynamic-table.component.html", - styleUrls: ["./dynamic-table.sass"], + styleUrls: ["./dynamic-table.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class DynamicTableComponent implements OnInit, OnChanges, AfterContentInit { diff --git a/src/app/components/dynamic-table/dynamic-table.sass b/src/app/components/dynamic-table/dynamic-table.sass deleted file mode 100644 index 5f9018259..000000000 --- a/src/app/components/dynamic-table/dynamic-table.sass +++ /dev/null @@ -1,36 +0,0 @@ -@import src/assets/styles/var -.clickable-row - .mat-cell - color: $app-navyBlue - &:hover - cursor: pointer - text-decoration: underline - -table - width: 100% - .mat-cell - border: 1px solid - color: $app-color-fg-default - border-color: $app-color-border-default - .truncate-cell - max-width: 535px - white-space: nowrap - overflow: hidden - text-overflow: ellipsis - -.mat-header-cell - color: $app-color-fg-default - border: 1px solid - font-size: 15px - text-align: left - background: $app-aliceBlue - border-color: $app-color-border-default - -.dynamic-table th.mat-header-cell, -.dynamic-table td.mat-cell, -.dynamic-table td.mat-footer-cell, -.dynamic-table th.mat-header-cell:first-of-type, -.dynamic-table td.mat-cell:first-of-type, -.dynamic-table td.mat-footer-cell:first-of-type - padding-left: 10px - padding-right: 10px diff --git a/src/app/components/dynamic-table/dynamic-table.scss b/src/app/components/dynamic-table/dynamic-table.scss new file mode 100644 index 000000000..b22dfddaf --- /dev/null +++ b/src/app/components/dynamic-table/dynamic-table.scss @@ -0,0 +1,46 @@ +@import 'var'; + +.clickable-row { + .mat-cell { + color: $app-navyBlue; + + &:hover { + cursor: pointer; + text-decoration: underline; + } + } +} + +table { + width: 100%; + + .mat-cell { + border: 1px solid $app-color-border-default; + color: $app-color-fg-default; + } + + .truncate-cell { + max-width: 535px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +.mat-header-cell { + color: $app-color-fg-default; + border: 1px solid $app-color-border-default; + font-size: 15px; + text-align: left; + background: $app-aliceBlue; +} + +.dynamic-table th.mat-header-cell, +.dynamic-table td.mat-cell, +.dynamic-table td.mat-footer-cell, +.dynamic-table th.mat-header-cell:first-of-type, +.dynamic-table td.mat-cell:first-of-type, +.dynamic-table td.mat-footer-cell:first-of-type { + padding-left: 10px; + padding-right: 10px; +} \ No newline at end of file diff --git a/src/app/components/modal/dynamic.component.ts b/src/app/components/modal/dynamic.component.ts index b0f49efb9..6e25fd5b8 100755 --- a/src/app/components/modal/dynamic.component.ts +++ b/src/app/components/modal/dynamic.component.ts @@ -1,4 +1,5 @@ -import { ModalArgumentsInterface } from "./../../interface/modal.interface"; +import { ModalArgumentsInterface } from "../../interface/modal.interface"; + export abstract class DynamicComponent { context: ModalArgumentsInterface; } diff --git a/src/app/components/modal/modal.service.spec.ts b/src/app/components/modal/modal.service.spec.ts index 25b6a731c..fa2c4bb50 100644 --- a/src/app/components/modal/modal.service.spec.ts +++ b/src/app/components/modal/modal.service.spec.ts @@ -1,4 +1,4 @@ -import { ModalCommandInterface } from "./../../interface/modal.interface"; +import { ModalCommandInterface } from "../../interface/modal.interface"; import { TestBed } from "@angular/core/testing"; import { ModalService } from "./modal.service"; import { first } from "rxjs/operators"; diff --git a/src/app/components/notification-indicator/notification-indicator.component.ts b/src/app/components/notification-indicator/notification-indicator.component.ts index 6e62e0be0..448731f8f 100644 --- a/src/app/components/notification-indicator/notification-indicator.component.ts +++ b/src/app/components/notification-indicator/notification-indicator.component.ts @@ -3,6 +3,6 @@ import { Component } from "@angular/core"; @Component({ selector: "app-notification-indicator", templateUrl: "./notification-indicator.html", - styleUrls: ["./notification-indicator.sass"], + styleUrls: ["./notification-indicator.scss"], }) export class NotificationIndicatorComponent {} diff --git a/src/app/components/notification-indicator/notification-indicator.sass b/src/app/components/notification-indicator/notification-indicator.sass deleted file mode 100644 index 31b9cb6e1..000000000 --- a/src/app/components/notification-indicator/notification-indicator.sass +++ /dev/null @@ -1,14 +0,0 @@ -.notification-indicator - .mail-status - position: absolute - top: -13px - left: 13px - z-index: 2 - display: none - width: 14px - height: 14px - color: #fff - background-image: linear-gradient(#54a3ff, #006eed) - background-clip: padding-box - border: 2px solid var(--color-header-bg) - border-radius: 50% diff --git a/src/app/components/notification-indicator/notification-indicator.scss b/src/app/components/notification-indicator/notification-indicator.scss new file mode 100644 index 000000000..088532519 --- /dev/null +++ b/src/app/components/notification-indicator/notification-indicator.scss @@ -0,0 +1,16 @@ +.notification-indicator { + .mail-status { + position: absolute; + top: -13px; + left: 13px; + z-index: 2; + display: none; + width: 14px; + height: 14px; + color: #fff; + background-image: linear-gradient(#54a3ff, #006eed); + background-clip: padding-box; + border: 2px solid var(--color-header-bg); + border-radius: 50%; + } +} \ No newline at end of file diff --git a/src/app/components/overview-history-summary-header/overview-history-summary-header.component.sass b/src/app/components/overview-history-summary-header/overview-history-summary-header.component.sass deleted file mode 100644 index 58be7297f..000000000 --- a/src/app/components/overview-history-summary-header/overview-history-summary-header.component.sass +++ /dev/null @@ -1,4 +0,0 @@ -@import src/assets/styles/var - -.overview-summary-background - background-color: $app--color-overview-history-summary-bg diff --git a/src/app/components/overview-history-summary-header/overview-history-summary-header.component.scss b/src/app/components/overview-history-summary-header/overview-history-summary-header.component.scss new file mode 100644 index 000000000..c50a2d9b1 --- /dev/null +++ b/src/app/components/overview-history-summary-header/overview-history-summary-header.component.scss @@ -0,0 +1,5 @@ +@import 'var'; + +.overview-summary-background { + background-color: $app--color-overview-history-summary-bg; +} \ No newline at end of file diff --git a/src/app/components/overview-history-summary-header/overview-history-summary-header.component.ts b/src/app/components/overview-history-summary-header/overview-history-summary-header.component.ts index e906f8f7d..a82bd2f0e 100644 --- a/src/app/components/overview-history-summary-header/overview-history-summary-header.component.ts +++ b/src/app/components/overview-history-summary-header/overview-history-summary-header.component.ts @@ -1,4 +1,4 @@ -import { NavigationService } from "./../../services/navigation.service"; +import { NavigationService } from "../../services/navigation.service"; import { ChangeDetectionStrategy, Component, Input } from "@angular/core"; import { Account, MetadataBlockFragment } from "src/app/api/kamu.graphql.interface"; import AppValues from "src/app/common/app.values"; @@ -7,7 +7,7 @@ import { DataHelpers } from "src/app/common/data.helpers"; @Component({ selector: "app-overview-history-summary-header", templateUrl: "./overview-history-summary-header.component.html", - styleUrls: ["./overview-history-summary-header.component.sass"], + styleUrls: ["./overview-history-summary-header.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class OverviewHistorySummaryHeaderComponent { diff --git a/src/app/components/page-not-found/page-not-found.component.sass b/src/app/components/page-not-found/page-not-found.component.sass deleted file mode 100644 index 442d96d35..000000000 --- a/src/app/components/page-not-found/page-not-found.component.sass +++ /dev/null @@ -1,11 +0,0 @@ -.error-template - padding: 40px 15px - text-align: center - -.error-actions - margin-top: 20px - -.bi-house-door - &::before - font-size: 20px - margin-right: 5px diff --git a/src/app/components/page-not-found/page-not-found.component.scss b/src/app/components/page-not-found/page-not-found.component.scss new file mode 100644 index 000000000..c274cb65f --- /dev/null +++ b/src/app/components/page-not-found/page-not-found.component.scss @@ -0,0 +1,15 @@ +.error-template { + padding: 40px 15px; + text-align: center; +} + +.error-actions { + margin-top: 20px; +} + +.bi-house-door { + &::before { + font-size: 20px; + margin-right: 5px; + } +} \ No newline at end of file diff --git a/src/app/components/page-not-found/page-not-found.component.ts b/src/app/components/page-not-found/page-not-found.component.ts index 6151111fd..9520ab070 100644 --- a/src/app/components/page-not-found/page-not-found.component.ts +++ b/src/app/components/page-not-found/page-not-found.component.ts @@ -5,7 +5,7 @@ import AppValues from "src/app/common/app.values"; @Component({ selector: "app-page-not-found", templateUrl: "./page-not-found.component.html", - styleUrls: ["./page-not-found.component.sass"], + styleUrls: ["./page-not-found.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class PageNotFoundComponent { diff --git a/src/app/components/pagination-component/pagination-component.sass b/src/app/components/pagination-component/pagination-component.sass deleted file mode 100644 index ef408222f..000000000 --- a/src/app/components/pagination-component/pagination-component.sass +++ /dev/null @@ -1,41 +0,0 @@ -@import src/assets/styles/var -.paginate-container - margin-top: 16px - margin-bottom: 16px - text-align: center - display: grid - justify-content: center - - ngb-pagination - ::ng-deep - .page-item - .page-link - border: none !important - display: flex - justify-content: center - align-items: center - border-radius: 6px - & span - display: none - -ngb-pagination - ::ng-deep - * - font-size: 14px - -.page_button - display: inline-block - width: 16px - height: 16px - content: "" - background-color: currentColor - -.previous_page - margin-right: 4px - clip-path: polygon(9.8px 12.8px, 8.7px 12.8px, 4.5px 8.5px, 4.5px 7.5px, 8.7px 3.2px, 9.8px 4.3px, 6.1px 8px, 9.8px 11.7px, 9.8px 12.8px) - @extend .page_button - -.next_page - margin-left: 4px - clip-path: polygon(6.2px 3.2px, 7.3px 3.2px, 11.5px 7.5px, 11.5px 8.5px, 7.3px 12.8px, 6.2px 11.7px, 9.9px 8px, 6.2px 4.3px, 6.2px 3.2px) - @extend .page_button diff --git a/src/app/components/pagination-component/pagination.component.scss b/src/app/components/pagination-component/pagination.component.scss new file mode 100644 index 000000000..82fde572d --- /dev/null +++ b/src/app/components/pagination-component/pagination.component.scss @@ -0,0 +1,55 @@ +@import 'var'; + +.paginate-container { + margin-top: 16px; + margin-bottom: 16px; + text-align: center; + display: grid; + justify-content: center; + + ngb-pagination { + ::ng-deep { + .page-item { + .page-link { + border: none !important; + display: flex; + justify-content: center; + align-items: center; + border-radius: 6px; + + & span { + display: none; + } + } + } + } + } +} + +ngb-pagination { + ::ng-deep { + * { + font-size: 14px; + } + } +} + +.page_button { + display: inline-block; + width: 16px; + height: 16px; + content: ''; + background-color: currentColor; +} + +.previous_page { + margin-right: 4px; + clip-path: polygon(9.8px 12.8px, 8.7px 12.8px, 4.5px 8.5px, 4.5px 7.5px, 8.7px 3.2px, 9.8px 4.3px, 6.1px 8px, 9.8px 11.7px, 9.8px 12.8px); + @extend .page_button; +} + +.next_page { + margin-left: 4px; + clip-path: polygon(6.2px 3.2px, 7.3px 3.2px, 11.5px 7.5px, 11.5px 8.5px, 7.3px 12.8px, 6.2px 11.7px, 9.9px 8px, 6.2px 4.3px, 6.2px 3.2px); + @extend .page_button; +} \ No newline at end of file diff --git a/src/app/components/pagination-component/pagination.component.ts b/src/app/components/pagination-component/pagination.component.ts index 2afd22fb6..5129d6712 100644 --- a/src/app/components/pagination-component/pagination.component.ts +++ b/src/app/components/pagination-component/pagination.component.ts @@ -4,7 +4,7 @@ import { PageBasedInfo } from "src/app/api/kamu.graphql.interface"; @Component({ selector: "app-pagination", templateUrl: "./pagination.component.html", - styleUrls: ["./pagination-component.sass"], + styleUrls: ["./pagination.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class PaginationComponent { diff --git a/src/app/components/search-additional-buttons/search-additional-buttons-nav.component.ts b/src/app/components/search-additional-buttons/search-additional-buttons-nav.component.ts index 7f9d1b768..0d8376978 100644 --- a/src/app/components/search-additional-buttons/search-additional-buttons-nav.component.ts +++ b/src/app/components/search-additional-buttons/search-additional-buttons-nav.component.ts @@ -4,7 +4,7 @@ import { SearchAdditionalHeaderButtonInterface } from "./search-additional-butto @Component({ selector: "app-search-additional-buttons-nav", templateUrl: "./search-additional-buttons-nav.component.html", - styleUrls: ["./search-additional-buttons.component.sass"], + styleUrls: ["./search-additional-buttons.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SearchAdditionalButtonsNavComponent { diff --git a/src/app/components/search-additional-buttons/search-additional-buttons.component.sass b/src/app/components/search-additional-buttons/search-additional-buttons.component.sass deleted file mode 100644 index 944b475fe..000000000 --- a/src/app/components/search-additional-buttons/search-additional-buttons.component.sass +++ /dev/null @@ -1,32 +0,0 @@ -@import "../../../../src/assets/styles/var" - -* - color: $app-emperor - -[data-test-id="searchAdditionalButtons"] - background: $app-white - border: 1px solid $app-veryLightGray - box-sizing: border-box - box-shadow: 0 5px 4px $app-versatileBusinessDark - border-radius: 8px - color: $app-emperor - -.search-additional-button - height: 40px - background: $app-white - -.search-additional-buttons__nav - justify-content: end - align-items: end - -.search-additional-buttons-block - justify-content: flex-end - display: flex - -.arrow-dropdown - align-items: center - justify-content: center - display: flex - -.additional-options-btn - width: min-content !important diff --git a/src/app/components/search-additional-buttons/search-additional-buttons.component.scss b/src/app/components/search-additional-buttons/search-additional-buttons.component.scss new file mode 100644 index 000000000..1e80e7a1a --- /dev/null +++ b/src/app/components/search-additional-buttons/search-additional-buttons.component.scss @@ -0,0 +1,39 @@ +@import 'var'; + +* { + color: $app-emperor; +} + +[data-test-id='searchAdditionalButtons'] { + background: $app-white; + border: 1px solid $app-veryLightGray; + box-sizing: border-box; + box-shadow: 0 5px 4px $app-versatileBusinessDark; + border-radius: 8px; + color: $app-emperor; +} + +.search-additional-button { + height: 40px; + background: $app-white; +} + +.search-additional-buttons__nav { + justify-content: end; + align-items: end; +} + +.search-additional-buttons-block { + justify-content: flex-end; + display: flex; +} + +.arrow-dropdown { + align-items: center; + justify-content: center; + display: flex; +} + +.additional-options-btn { + width: min-content !important; +} \ No newline at end of file diff --git a/src/app/components/search-additional-buttons/search-additional-buttons.component.ts b/src/app/components/search-additional-buttons/search-additional-buttons.component.ts index 5c183b20e..ac47731cf 100644 --- a/src/app/components/search-additional-buttons/search-additional-buttons.component.ts +++ b/src/app/components/search-additional-buttons/search-additional-buttons.component.ts @@ -15,7 +15,7 @@ import { isMobileView } from "src/app/common/app.helpers"; @Component({ selector: "app-search-additional-buttons", templateUrl: "./search-additional-buttons.component.html", - styleUrls: ["./search-additional-buttons.component.sass"], + styleUrls: ["./search-additional-buttons.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SearchAdditionalButtonsComponent implements OnInit { diff --git a/src/app/components/spinner/spinner/spinner.component.sass b/src/app/components/spinner/spinner/spinner.component.sass deleted file mode 100644 index 1137e1bed..000000000 --- a/src/app/components/spinner/spinner/spinner.component.sass +++ /dev/null @@ -1,8 +0,0 @@ -.overlay - position: fixed - width: 100% - height: 100% - display: flex - align-items: center - justify-content: center - z-index: 10 diff --git a/src/app/components/spinner/spinner/spinner.component.scss b/src/app/components/spinner/spinner/spinner.component.scss new file mode 100644 index 000000000..569419288 --- /dev/null +++ b/src/app/components/spinner/spinner/spinner.component.scss @@ -0,0 +1,9 @@ +.overlay { + position: fixed; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + z-index: 10; +} \ No newline at end of file diff --git a/src/app/components/spinner/spinner/spinner.component.ts b/src/app/components/spinner/spinner/spinner.component.ts index 9719e9569..4e5b2eece 100644 --- a/src/app/components/spinner/spinner/spinner.component.ts +++ b/src/app/components/spinner/spinner/spinner.component.ts @@ -1,10 +1,10 @@ -import { SpinnerService } from "./../spinner.service"; +import { SpinnerService } from "../spinner.service"; import { ChangeDetectionStrategy, Component } from "@angular/core"; @Component({ selector: "app-spinner", templateUrl: "./spinner.component.html", - styleUrls: ["./spinner.component.sass"], + styleUrls: ["./spinner.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SpinnerComponent { diff --git a/src/app/components/timeline-component/timeline.component.sass b/src/app/components/timeline-component/timeline.component.sass deleted file mode 100644 index c52551b09..000000000 --- a/src/app/components/timeline-component/timeline.component.sass +++ /dev/null @@ -1,55 +0,0 @@ -@import src/assets/styles/var -@import 'node_modules/bootstrap/dist/css/bootstrap.min' -.timeline-block - &__item - position: relative - display: flex - padding: 16px 0 - margin-left: 16px - &::before - position: absolute - top: 0 - bottom: 0 - left: 0 - display: block - width: 2px - content: "" - background-color: $app-color-border-muted - &--condensed - padding-top: 4px - padding-bottom: 0 - .timeline-block__item-badge - height: 16px - margin-top: 8px - margin-bottom: 8px - color: $app-color-fg-muted - background-color: $app-color-canvas-overlay - border: 0 - &-badge - position: relative - z-index: 1 - display: flex - width: 32px - height: 32px - margin-right: 8px - margin-left: -15px - color: $app-color-fg-muted - align-items: center - background-color: $app-color-timeline-badge-bg - border: 2px solid $app-color-canvas-overlay - border-radius: 50% - justify-content: center - flex-shrink: 0 - &__body - min-width: 0 - max-width: 100% - margin-top: 4px - color: $app-color-fg-muted - flex: auto - &__header - font-size: 14px !important - font-weight: normal - mat-icon - justify-content: center - align-items: center - display: flex diff --git a/src/app/components/timeline-component/timeline.component.scss b/src/app/components/timeline-component/timeline.component.scss new file mode 100644 index 000000000..124a748d1 --- /dev/null +++ b/src/app/components/timeline-component/timeline.component.scss @@ -0,0 +1,72 @@ +@import 'var'; +@import 'node_modules/bootstrap/dist/css/bootstrap.min'; + +.timeline-block { + &__item { + position: relative; + display: flex; + padding: 16px 0; + margin-left: 16px; + + &::before { + position: absolute; + top: 0; + bottom: 0; + left: 0; + display: block; + width: 2px; + content: ''; + background-color: $app-color-border-muted; + } + + &--condensed { + padding-top: 4px; + padding-bottom: 0; + + .timeline-block__item-badge { + height: 16px; + margin-top: 8px; + margin-bottom: 8px; + color: $app-color-fg-muted; + background-color: $app-color-canvas-overlay; + border: 0; + } + } + + &-badge { + position: relative; + z-index: 1; + display: flex; + width: 32px; + height: 32px; + margin-right: 8px; + margin-left: -15px; + color: $app-color-fg-muted; + align-items: center; + background-color: $app-color-timeline-badge-bg; + border: 2px solid $app-color-canvas-overlay; + border-radius: 50%; + justify-content: center; + flex-shrink: 0; + } + } + + &__body { + min-width: 0; + max-width: 100%; + margin-top: 4px; + color: $app-color-fg-muted; + flex: auto; + + &__header { + font-size: 14px !important; + font-weight: normal; + } + } + + mat-icon { + justify-content: center; + align-items: center; + display: flex; + } +} \ No newline at end of file diff --git a/src/app/components/timeline-component/timeline.component.ts b/src/app/components/timeline-component/timeline.component.ts index c7ccb7545..40159226b 100644 --- a/src/app/components/timeline-component/timeline.component.ts +++ b/src/app/components/timeline-component/timeline.component.ts @@ -6,7 +6,7 @@ import { DataHelpers } from "src/app/common/data.helpers"; @Component({ selector: "app-timeline", templateUrl: "./timeline.component.html", - styleUrls: ["timeline.component.sass"], + styleUrls: ["timeline.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class TimelineComponent { diff --git a/src/app/components/timeline-component/timeline.module.ts b/src/app/components/timeline-component/timeline.module.ts index eb924cd7a..983a5ff16 100644 --- a/src/app/components/timeline-component/timeline.module.ts +++ b/src/app/components/timeline-component/timeline.module.ts @@ -1,5 +1,5 @@ import { DisplayHashModule } from "src/app/components/display-hash/dispaly-hash.module"; -import { DisplayTimeModule } from "./../display-time/display-time.module"; +import { DisplayTimeModule } from "../display-time/display-time.module"; import { NgModule } from "@angular/core"; import { MatMenuModule } from "@angular/material/menu"; import { MatIconModule } from "@angular/material/icon"; diff --git a/src/app/components/toggle/toggle.component.sass b/src/app/components/toggle/toggle.component.sass deleted file mode 100644 index 7762884ba..000000000 --- a/src/app/components/toggle/toggle.component.sass +++ /dev/null @@ -1,37 +0,0 @@ -.toggle-btn - display: inline-block - outline: 0 - width: 3em - height: 1.5em - position: relative - cursor: pointer - user-select: none - background: #ae9d9d - border-radius: 2em - padding: 2px - transition: all 0.4s ease - border: 1px solid #e8eae9 - &::after - left: 0 - position: relative - display: block - content: '' - width: 50% - height: 100% - border-radius: 2em - background: #fbfbfb - transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease - &.toggle-btn-on - background: #0d6efd - &::after - left: 50% - &:active - box-shadow: none - &::after - margin-left: -0.8em - &:active - &::after - padding-right: 0.8em - -.toggle-input - display: none diff --git a/src/app/components/toggle/toggle.component.scss b/src/app/components/toggle/toggle.component.scss new file mode 100644 index 000000000..c3df0a4a1 --- /dev/null +++ b/src/app/components/toggle/toggle.component.scss @@ -0,0 +1,52 @@ +.toggle-btn { + display: inline-block; + outline: 0; + width: 3em; + height: 1.5em; + position: relative; + cursor: pointer; + user-select: none; + background: #ae9d9d; + border-radius: 2em; + padding: 2px; + transition: all 0.4s ease; + border: 1px solid #e8eae9; + + &::after { + left: 0; + position: relative; + display: block; + content: ''; + width: 50%; + height: 100%; + border-radius: 2em; + background: #fbfbfb; + transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease; + } + + &.toggle-btn-on { + background: #0d6efd; + + &::after { + left: 50%; + } + + &:active { + box-shadow: none; + + &::after { + margin-left: -0.8em; + } + } + } + + &:active { + &::after { + padding-right: 0.8em; + } + } +} + +.toggle-input { + display: none; +} \ No newline at end of file diff --git a/src/app/components/toggle/toggle.component.ts b/src/app/components/toggle/toggle.component.ts index 4d7fefc86..5b569e80c 100644 --- a/src/app/components/toggle/toggle.component.ts +++ b/src/app/components/toggle/toggle.component.ts @@ -3,7 +3,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from @Component({ selector: "app-toggle", templateUrl: "./toggle.component.html", - styleUrls: ["./toggle.component.sass"], + styleUrls: ["./toggle.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class ToggleComponent { diff --git a/src/app/dataset-block/metadata-block/block.service.spec.ts b/src/app/dataset-block/metadata-block/block.service.spec.ts index 6231ba07a..551c15ad3 100644 --- a/src/app/dataset-block/metadata-block/block.service.spec.ts +++ b/src/app/dataset-block/metadata-block/block.service.spec.ts @@ -1,5 +1,5 @@ -import { MetadataBlockFragment } from "./../../api/kamu.graphql.interface"; -import { mockGetMetadataBlockQuery, TEST_BLOCK_HASH } from "./../../api/mock/dataset.mock"; +import { MetadataBlockFragment } from "../../api/kamu.graphql.interface"; +import { mockGetMetadataBlockQuery, TEST_BLOCK_HASH } from "../../api/mock/dataset.mock"; import { Apollo } from "apollo-angular"; import { TestBed } from "@angular/core/testing"; diff --git a/src/app/dataset-block/metadata-block/components/block-header/block-header.component.sass b/src/app/dataset-block/metadata-block/components/block-header/block-header.component.sass deleted file mode 100644 index 1a35aeced..000000000 --- a/src/app/dataset-block/metadata-block/components/block-header/block-header.component.sass +++ /dev/null @@ -1,14 +0,0 @@ - -.custom-button - height: 28px - span - font-size: 12px - button - background-color: #ffff !important - &:hover - background-color: #f3f4f6 !important - border-color: rgba(27, 31, 36, 0.1490196078) !important - transition-duration: 0.1s !important - -button.mat-menu-item - background-color: #ffff !important diff --git a/src/app/dataset-block/metadata-block/components/block-header/block-header.component.scss b/src/app/dataset-block/metadata-block/components/block-header/block-header.component.scss new file mode 100644 index 000000000..a887ed3ce --- /dev/null +++ b/src/app/dataset-block/metadata-block/components/block-header/block-header.component.scss @@ -0,0 +1,21 @@ +.custom-button { + height: 28px; + + span { + font-size: 12px; + } + + button { + background-color: #ffff !important; + + &:hover { + background-color: #f3f4f6 !important; + border-color: rgba(27, 31, 36, 0.1490196078) !important; + transition-duration: 0.1s !important; + } + } +} + +button.mat-menu-item { + background-color: #ffff !important; +} \ No newline at end of file diff --git a/src/app/dataset-block/metadata-block/components/block-header/block-header.component.ts b/src/app/dataset-block/metadata-block/components/block-header/block-header.component.ts index cfda0d92c..ddacb2285 100644 --- a/src/app/dataset-block/metadata-block/components/block-header/block-header.component.ts +++ b/src/app/dataset-block/metadata-block/components/block-header/block-header.component.ts @@ -1,5 +1,5 @@ import { BaseComponent } from "src/app/common/base.component"; -import { MetadataBlockFragment } from "./../../../../api/kamu.graphql.interface"; +import { MetadataBlockFragment } from "../../../../api/kamu.graphql.interface"; import { ChangeDetectionStrategy, Component, Input, OnInit } from "@angular/core"; import { Observable } from "rxjs"; import { DatasetInfo } from "src/app/interface/navigation.interface"; @@ -8,7 +8,7 @@ import { BlockService } from "../../block.service"; @Component({ selector: "app-block-header", templateUrl: "./block-header.component.html", - styleUrls: ["./block-header.component.sass"], + styleUrls: ["./block-header.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class BlockHeaderComponent extends BaseComponent implements OnInit { diff --git a/src/app/dataset-block/metadata-block/components/block-navigation/block-navigation.component.sass b/src/app/dataset-block/metadata-block/components/block-navigation/block-navigation.component.sass deleted file mode 100644 index 4ee39bfb2..000000000 --- a/src/app/dataset-block/metadata-block/components/block-navigation/block-navigation.component.sass +++ /dev/null @@ -1,25 +0,0 @@ -@import src/assets/styles/var - -.container-section - min-height: 420px - -.placeholder-padding-left - padding: 8px 8px 8px 35px!important - -.outline-none - outline: none - -.close-position - top: 8px - right: 20px - padding: 5px - &:hover - cursor: pointer - -.custom-border - border: 1px solid #adadad - -.position-list-icon - position: absolute - top: 9px - left: 9px diff --git a/src/app/dataset-block/metadata-block/components/block-navigation/block-navigation.component.scss b/src/app/dataset-block/metadata-block/components/block-navigation/block-navigation.component.scss new file mode 100644 index 000000000..526975320 --- /dev/null +++ b/src/app/dataset-block/metadata-block/components/block-navigation/block-navigation.component.scss @@ -0,0 +1,33 @@ +@import 'var'; + +.container-section { + min-height: 420px; +} + +.placeholder-padding-left { + padding: 8px 8px 8px 35px !important; +} + +.outline-none { + outline: none; +} + +.close-position { + top: 8px; + right: 20px; + padding: 5px; + + &:hover { + cursor: pointer; + } +} + +.custom-border { + border: 1px solid #adadad; +} + +.position-list-icon { + position: absolute; + top: 9px; + left: 9px; +} \ No newline at end of file diff --git a/src/app/dataset-block/metadata-block/components/block-navigation/block-navigation.component.ts b/src/app/dataset-block/metadata-block/components/block-navigation/block-navigation.component.ts index c91d23503..cdd8934af 100644 --- a/src/app/dataset-block/metadata-block/components/block-navigation/block-navigation.component.ts +++ b/src/app/dataset-block/metadata-block/components/block-navigation/block-navigation.component.ts @@ -1,5 +1,5 @@ -import { DatasetHistoryUpdate } from "./../../../../dataset-view/dataset.subscriptions.interface"; -import { SupportedEvents } from "./../event-details/supported.events"; +import { DatasetHistoryUpdate } from "../../../../dataset-view/dataset.subscriptions.interface"; +import { SupportedEvents } from "../event-details/supported.events"; import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from "@angular/core"; import { DatasetInfo } from "src/app/interface/navigation.interface"; import { MaybeNull } from "src/app/common/app.types"; @@ -8,7 +8,7 @@ import { IDropdownSettings } from "ng-multiselect-dropdown"; @Component({ selector: "app-block-navigation", templateUrl: "./block-navigation.component.html", - styleUrls: ["./block-navigation.component.sass"], + styleUrls: ["./block-navigation.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class BlockNavigationComponent { diff --git a/src/app/dataset-block/metadata-block/components/block-row-data/block-row-data.component.sass b/src/app/dataset-block/metadata-block/components/block-row-data/block-row-data.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-block/metadata-block/components/block-row-data/block-row-data.component.spec.ts b/src/app/dataset-block/metadata-block/components/block-row-data/block-row-data.component.spec.ts index 152af3814..cfd763710 100644 --- a/src/app/dataset-block/metadata-block/components/block-row-data/block-row-data.component.spec.ts +++ b/src/app/dataset-block/metadata-block/components/block-row-data/block-row-data.component.spec.ts @@ -1,4 +1,4 @@ -import { TooltipIconComponent } from "./../tooltip-icon/tooltip-icon.component"; +import { TooltipIconComponent } from "../tooltip-icon/tooltip-icon.component"; import { ComponentFixture, TestBed } from "@angular/core/testing"; import { BlockRowDataComponent } from "./block-row-data.component"; diff --git a/src/app/dataset-block/metadata-block/components/block-row-data/block-row-data.component.ts b/src/app/dataset-block/metadata-block/components/block-row-data/block-row-data.component.ts index 11c8500cd..f0b087275 100644 --- a/src/app/dataset-block/metadata-block/components/block-row-data/block-row-data.component.ts +++ b/src/app/dataset-block/metadata-block/components/block-row-data/block-row-data.component.ts @@ -3,7 +3,6 @@ import { ChangeDetectionStrategy, Component, Input } from "@angular/core"; @Component({ selector: "app-block-row-data", templateUrl: "./block-row-data.component.html", - styleUrls: ["./block-row-data.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class BlockRowDataComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/add-data-event/add-data-event.component.spec.ts b/src/app/dataset-block/metadata-block/components/event-details/components/add-data-event/add-data-event.component.spec.ts index 276699991..304d3faf8 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/add-data-event/add-data-event.component.spec.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/add-data-event/add-data-event.component.spec.ts @@ -1,6 +1,6 @@ import { ToastrModule } from "ngx-toastr"; import { ApolloModule } from "apollo-angular"; -import { SizePropertyComponent } from "./../common/size-property/size-property.component"; +import { SizePropertyComponent } from "../common/size-property/size-property.component"; import { DisplaySizeModule } from "src/app/common/pipes/display-size.module"; import { ChangeDetectionStrategy } from "@angular/core"; import { ComponentFixture, TestBed } from "@angular/core/testing"; diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/add-data-event/add-data-event.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/add-data-event/add-data-event.component.ts index f27e52671..b125ecd7c 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/add-data-event/add-data-event.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/add-data-event/add-data-event.component.ts @@ -1,4 +1,4 @@ -import { AddData } from "./../../../../../../api/kamu.graphql.interface"; +import { AddData } from "../../../../../../api/kamu.graphql.interface"; import { ChangeDetectionStrategy, Component, OnChanges, OnInit, SimpleChanges } from "@angular/core"; import { BaseDynamicEventComponent } from "../base-dynamic-event/base-dynamic-event.component"; import { SECTION_BUILDERS_BY_EVENT_TYPE } from "../../dynamic-events/builders/event-section.builders"; @@ -6,7 +6,6 @@ import { SECTION_BUILDERS_BY_EVENT_TYPE } from "../../dynamic-events/builders/ev @Component({ selector: "app-add-data-event", templateUrl: "../base-dynamic-event/base-dynamic-event.component.html", - styleUrls: ["../base-dynamic-event/base-dynamic-event.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class AddDataEventComponent extends BaseDynamicEventComponent implements OnChanges, OnInit { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/base-dynamic-event/base-dynamic-event.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/base-dynamic-event/base-dynamic-event.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/base-dynamic-event/base-dynamic-event.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/base-dynamic-event/base-dynamic-event.component.ts index 80dbd30b5..cd5a2dd33 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/base-dynamic-event/base-dynamic-event.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/base-dynamic-event/base-dynamic-event.component.ts @@ -15,7 +15,6 @@ import { BasePropertyComponent } from "../common/base-property/base-property.com @Component({ selector: "app-dynamic-base-event", templateUrl: "./base-dynamic-event.component.html", - styleUrls: ["./base-dynamic-event.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class BaseDynamicEventComponent implements AfterViewChecked { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/block-interval-property/block-interval-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/block-interval-property/block-interval-property.component.sass deleted file mode 100644 index ab937abe5..000000000 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/block-interval-property/block-interval-property.component.sass +++ /dev/null @@ -1,12 +0,0 @@ -p - display: inline-block - -.link - color: #0d6efd - &:hover - text-decoration: underline - -.bg-value - background-color: #f3f4f6 - padding: 3px 10px - border-radius: 5px diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/block-interval-property/block-interval-property.component.scss b/src/app/dataset-block/metadata-block/components/event-details/components/common/block-interval-property/block-interval-property.component.scss new file mode 100644 index 000000000..8e5ccb1a1 --- /dev/null +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/block-interval-property/block-interval-property.component.scss @@ -0,0 +1,17 @@ +p { + display: inline-block; +} + +.link { + color: #0d6efd; + + &:hover { + text-decoration: underline; + } +} + +.bg-value { + background-color: #f3f4f6; + padding: 3px 10px; + border-radius: 5px; +} \ No newline at end of file diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/block-interval-property/block-interval-property.component.spec.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/block-interval-property/block-interval-property.component.spec.ts index 0a7dbf271..4efb6e503 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/block-interval-property/block-interval-property.component.spec.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/block-interval-property/block-interval-property.component.spec.ts @@ -1,5 +1,5 @@ -import { mockDatasetMainDataResponse } from "./../../../../../../../search/mock.data"; -import { DatasetService } from "./../../../../../../../dataset-view/dataset.service"; +import { mockDatasetMainDataResponse } from "../../../../../../../search/mock.data"; +import { DatasetService } from "../../../../../../../dataset-view/dataset.service"; import { ApolloTestingModule } from "apollo-angular/testing"; import { ComponentFixture, TestBed } from "@angular/core/testing"; import { BlockIntervalPropertyComponent } from "./block-interval-property.component"; diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/block-interval-property/block-interval-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/block-interval-property/block-interval-property.component.ts index b5024c29a..b2633d74d 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/block-interval-property/block-interval-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/block-interval-property/block-interval-property.component.ts @@ -1,5 +1,5 @@ -import { DatasetInfo } from "./../../../../../../../interface/navigation.interface"; -import { BlockInterval, DatasetByIdQuery } from "./../../../../../../../api/kamu.graphql.interface"; +import { DatasetInfo } from "../../../../../../../interface/navigation.interface"; +import { BlockInterval, DatasetByIdQuery } from "../../../../../../../api/kamu.graphql.interface"; import { BasePropertyComponent } from "src/app/dataset-block/metadata-block/components/event-details/components/common/base-property/base-property.component"; import { ChangeDetectionStrategy, Component, Input, OnInit } from "@angular/core"; import { DatasetService } from "src/app/dataset-view/dataset.service"; @@ -7,7 +7,7 @@ import { DatasetService } from "src/app/dataset-view/dataset.service"; @Component({ selector: "app-block-interval-property", templateUrl: "./block-interval-property.component.html", - styleUrls: ["./block-interval-property.component.sass"], + styleUrls: ["./block-interval-property.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class BlockIntervalPropertyComponent extends BasePropertyComponent implements OnInit { @@ -23,7 +23,7 @@ export class BlockIntervalPropertyComponent extends BasePropertyComponent implem this.datasetSevice.requestDatasetInfoById(this.data.datasetId).subscribe((dataset: DatasetByIdQuery) => { if (dataset.datasets.byId) { this.datasetInfo.accountName = dataset.datasets.byId.owner.name; - this.datasetInfo.datasetName = dataset.datasets.byId.name ; + this.datasetInfo.datasetName = dataset.datasets.byId.name; } }), ); diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/cache-property/cache-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/cache-property/cache-property.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/cache-property/cache-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/cache-property/cache-property.component.ts index 0cff3730f..ba1291134 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/cache-property/cache-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/cache-property/cache-property.component.ts @@ -4,7 +4,6 @@ import { BasePropertyComponent } from "../base-property/base-property.component" @Component({ selector: "app-cache-property", templateUrl: "./cache-property.component.html", - styleUrls: ["./cache-property.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class CachePropertyComponent extends BasePropertyComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/cards-property/cards-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/cards-property/cards-property.component.sass deleted file mode 100644 index 59ed18853..000000000 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/cards-property/cards-property.component.sass +++ /dev/null @@ -1,12 +0,0 @@ -ul - list-style-type: none - margin: 0 - padding: 0 - overflow: hidden - li - display: inline-block - margin: 10px - border: 1px solid #DEDEDE - background-color: #f7f7f7 - padding: 3px 5px - border-radius: 5px diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/cards-property/cards-property.component.scss b/src/app/dataset-block/metadata-block/components/event-details/components/common/cards-property/cards-property.component.scss new file mode 100644 index 000000000..81e0d9fcf --- /dev/null +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/cards-property/cards-property.component.scss @@ -0,0 +1,15 @@ +ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + + li { + display: inline-block; + margin: 10px; + border: 1px solid #DEDEDE; + background-color: #f7f7f7; + padding: 3px 5px; + border-radius: 5px; + } +} \ No newline at end of file diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/cards-property/cards-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/cards-property/cards-property.component.ts index f84a85398..a10aebbda 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/cards-property/cards-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/cards-property/cards-property.component.ts @@ -4,7 +4,7 @@ import { BasePropertyComponent } from "../base-property/base-property.component" @Component({ selector: "app-cards-property", templateUrl: "./cards-property.component.html", - styleUrls: ["./cards-property.component.sass"], + styleUrls: ["./cards-property.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class CardsPropertyComponent extends BasePropertyComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/command-property/command-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/command-property/command-property.component.sass deleted file mode 100644 index b0936db0b..000000000 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/command-property/command-property.component.sass +++ /dev/null @@ -1,5 +0,0 @@ -span - border: 1px solid #DEDEDE - background-color: #f7f7f7 - padding: 3px 5px - border-radius: 5px diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/command-property/command-property.component.scss b/src/app/dataset-block/metadata-block/components/event-details/components/common/command-property/command-property.component.scss new file mode 100644 index 000000000..cc230c7e9 --- /dev/null +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/command-property/command-property.component.scss @@ -0,0 +1,6 @@ +span { + border: 1px solid #DEDEDE; + background-color: #f7f7f7; + padding: 3px 5px; + border-radius: 5px; +} \ No newline at end of file diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/command-property/command-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/command-property/command-property.component.ts index 458bec18a..d4d4ef8cc 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/command-property/command-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/command-property/command-property.component.ts @@ -4,7 +4,7 @@ import { BasePropertyComponent } from "../base-property/base-property.component" @Component({ selector: "app-command-property", templateUrl: "./command-property.component.html", - styleUrls: ["./command-property.component.sass"], + styleUrls: ["./command-property.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class CommandPropertyComponent extends BasePropertyComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-by-id-property/dataset-name-by-id-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-by-id-property/dataset-name-by-id-property.component.sass deleted file mode 100644 index 5f0cbbdfe..000000000 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-by-id-property/dataset-name-by-id-property.component.sass +++ /dev/null @@ -1,4 +0,0 @@ -.name - color: #0d6efd - &:hover - text-decoration: underline diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-by-id-property/dataset-name-by-id-property.component.scss b/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-by-id-property/dataset-name-by-id-property.component.scss new file mode 100644 index 000000000..8bf58be2e --- /dev/null +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-by-id-property/dataset-name-by-id-property.component.scss @@ -0,0 +1,7 @@ +.name { + color: #0d6efd; + + &:hover { + text-decoration: underline; + } +} \ No newline at end of file diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-by-id-property/dataset-name-by-id-property.component.spec.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-by-id-property/dataset-name-by-id-property.component.spec.ts index cf0987add..fa7262001 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-by-id-property/dataset-name-by-id-property.component.spec.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-by-id-property/dataset-name-by-id-property.component.spec.ts @@ -1,5 +1,5 @@ -import { DatasetInfo } from "./../../../../../../../interface/navigation.interface"; -import { NavigationService } from "./../../../../../../../services/navigation.service"; +import { DatasetInfo } from "../../../../../../../interface/navigation.interface"; +import { NavigationService } from "../../../../../../../services/navigation.service"; import { ApolloTestingModule } from "apollo-angular/testing"; import { ComponentFixture, TestBed } from "@angular/core/testing"; import { DatasetNameByIdPropertyComponent } from "./dataset-name-by-id-property.component"; diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-by-id-property/dataset-name-by-id-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-by-id-property/dataset-name-by-id-property.component.ts index ed996f6b4..77c8cf243 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-by-id-property/dataset-name-by-id-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-by-id-property/dataset-name-by-id-property.component.ts @@ -9,7 +9,7 @@ import { NavigationService } from "src/app/services/navigation.service"; @Component({ selector: "app-dataset-id-and-name-property", templateUrl: "./dataset-name-by-id-property.component.html", - styleUrls: ["./dataset-name-by-id-property.component.sass"], + styleUrls: ["./dataset-name-by-id-property.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class DatasetNameByIdPropertyComponent extends BasePropertyComponent implements OnInit { @@ -29,7 +29,7 @@ export class DatasetNameByIdPropertyComponent extends BasePropertyComponent impl this.datasetSevice.requestDatasetInfoById(this.data).subscribe((dataset: DatasetByIdQuery) => { if (dataset.datasets.byId) { this.datasetInfo.accountName = dataset.datasets.byId.owner.name; - this.datasetInfo.datasetName = dataset.datasets.byId.name ; + this.datasetInfo.datasetName = dataset.datasets.byId.name; this.cdr.detectChanges(); } }), diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-property/dataset-name-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-property/dataset-name-property.component.sass deleted file mode 100644 index 5f0cbbdfe..000000000 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-property/dataset-name-property.component.sass +++ /dev/null @@ -1,4 +0,0 @@ -.name - color: #0d6efd - &:hover - text-decoration: underline diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-property/dataset-name-property.component.scss b/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-property/dataset-name-property.component.scss new file mode 100644 index 000000000..8bf58be2e --- /dev/null +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-property/dataset-name-property.component.scss @@ -0,0 +1,7 @@ +.name { + color: #0d6efd; + + &:hover { + text-decoration: underline; + } +} \ No newline at end of file diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-property/dataset-name-property.component.spec.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-property/dataset-name-property.component.spec.ts index 4b80ad974..97db97e17 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-property/dataset-name-property.component.spec.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-property/dataset-name-property.component.spec.ts @@ -1,4 +1,4 @@ -import { NavigationService } from "./../../../../../../../services/navigation.service"; +import { NavigationService } from "../../../../../../../services/navigation.service"; import { ComponentFixture, TestBed } from "@angular/core/testing"; import { DatasetNamePropertyComponent } from "./dataset-name-property.component"; import { DatasetViewTypeEnum } from "src/app/dataset-view/dataset-view.interface"; diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-property/dataset-name-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-property/dataset-name-property.component.ts index b1ac64989..7694a1534 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-property/dataset-name-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/dataset-name-property/dataset-name-property.component.ts @@ -1,4 +1,4 @@ -import { NavigationService } from "./../../../../../../../services/navigation.service"; +import { NavigationService } from "../../../../../../../services/navigation.service"; import { ChangeDetectionStrategy, Component, Input } from "@angular/core"; import { BasePropertyComponent } from "../base-property/base-property.component"; import { DatasetViewTypeEnum } from "src/app/dataset-view/dataset-view.interface"; @@ -6,7 +6,7 @@ import { DatasetViewTypeEnum } from "src/app/dataset-view/dataset-view.interface @Component({ selector: "app-dataset-name-property", templateUrl: "./dataset-name-property.component.html", - styleUrls: ["./dataset-name-property.component.sass"], + styleUrls: ["./dataset-name-property.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class DatasetNamePropertyComponent extends BasePropertyComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/engine-property/engine-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/engine-property/engine-property.component.sass deleted file mode 100644 index cf5879e47..000000000 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/engine-property/engine-property.component.sass +++ /dev/null @@ -1,2 +0,0 @@ -.engine-logo - width: 50px diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/engine-property/engine-property.component.scss b/src/app/dataset-block/metadata-block/components/event-details/components/common/engine-property/engine-property.component.scss new file mode 100644 index 000000000..993b60858 --- /dev/null +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/engine-property/engine-property.component.scss @@ -0,0 +1,3 @@ +.engine-logo { + width: 50px; +} \ No newline at end of file diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/engine-property/engine-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/engine-property/engine-property.component.ts index cf5cfadce..053458e6a 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/engine-property/engine-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/engine-property/engine-property.component.ts @@ -6,7 +6,7 @@ import { BasePropertyComponent } from "../base-property/base-property.component" @Component({ selector: "app-engine-property", templateUrl: "./engine-property.component.html", - styleUrls: ["./engine-property.component.sass"], + styleUrls: ["./engine-property.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class EnginePropertyComponent extends BasePropertyComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/env-variables-property/env-variables-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/env-variables-property/env-variables-property.component.sass deleted file mode 100644 index 18b4c4a69..000000000 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/env-variables-property/env-variables-property.component.sass +++ /dev/null @@ -1,2 +0,0 @@ -.container-table - width: 400px diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/env-variables-property/env-variables-property.component.scss b/src/app/dataset-block/metadata-block/components/event-details/components/common/env-variables-property/env-variables-property.component.scss new file mode 100644 index 000000000..b464e9e4f --- /dev/null +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/env-variables-property/env-variables-property.component.scss @@ -0,0 +1,3 @@ +.container-table { + width: 400px; +} \ No newline at end of file diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/env-variables-property/env-variables-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/env-variables-property/env-variables-property.component.ts index 1bd64dba3..27d717e87 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/env-variables-property/env-variables-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/env-variables-property/env-variables-property.component.ts @@ -1,4 +1,4 @@ -import { extractSchemaFieldsFromData } from "./../../../../../../../common/table.helper"; +import { extractSchemaFieldsFromData } from "../../../../../../../common/table.helper"; import { ChangeDetectionStrategy, Component, Input } from "@angular/core"; import { EnvVar } from "src/app/api/kamu.graphql.interface"; import { DataRow, DataSchemaField } from "src/app/interface/dataset.interface"; @@ -7,7 +7,7 @@ import { BasePropertyComponent } from "../base-property/base-property.component" @Component({ selector: "app-env-variables-property", templateUrl: "./env-variables-property.component.html", - styleUrls: ["./env-variables-property.component.sass"], + styleUrls: ["./env-variables-property.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class EnvVariablesPropertyComponent extends BasePropertyComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/event-time-property/event-time-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/event-time-property/event-time-property.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/event-time-property/event-time-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/event-time-property/event-time-property.component.ts index d5fc85b2a..a43f48c87 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/event-time-property/event-time-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/event-time-property/event-time-property.component.ts @@ -5,7 +5,6 @@ import { EventTimeSource } from "src/app/api/kamu.graphql.interface"; @Component({ selector: "app-event-time-property", templateUrl: "./event-time-property.component.html", - styleUrls: ["./event-time-property.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class EventTimePropertyComponent extends BasePropertyComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/hash-property/hash-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/hash-property/hash-property.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/hash-property/hash-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/hash-property/hash-property.component.ts index 2b579299c..2d835aa20 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/hash-property/hash-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/hash-property/hash-property.component.ts @@ -4,7 +4,6 @@ import { ChangeDetectionStrategy, Component, Input } from "@angular/core"; @Component({ selector: "app-hash-property", templateUrl: "./hash-property.component.html", - styleUrls: ["./hash-property.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class HashPropertyComponent extends BasePropertyComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/link-property/link-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/link-property/link-property.component.sass deleted file mode 100644 index f97903906..000000000 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/link-property/link-property.component.sass +++ /dev/null @@ -1,4 +0,0 @@ -.name - color: #0d6efd !important - &:hover - text-decoration: underline diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/link-property/link-property.component.scss b/src/app/dataset-block/metadata-block/components/event-details/components/common/link-property/link-property.component.scss new file mode 100644 index 000000000..5624d5926 --- /dev/null +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/link-property/link-property.component.scss @@ -0,0 +1,7 @@ +.name { + color: #0d6efd !important; + + &:hover { + text-decoration: underline; + } +} \ No newline at end of file diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/link-property/link-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/link-property/link-property.component.ts index 44779fecc..4b0b87499 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/link-property/link-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/link-property/link-property.component.ts @@ -4,7 +4,7 @@ import { BasePropertyComponent } from "../base-property/base-property.component" @Component({ selector: "app-link-property", templateUrl: "./link-property.component.html", - styleUrls: ["./link-property.component.sass"], + styleUrls: ["./link-property.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class LinkPropertyComponent extends BasePropertyComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/merge-strategy-property/merge-strategy-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/merge-strategy-property/merge-strategy-property.component.sass deleted file mode 100644 index 9c2d61e57..000000000 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/merge-strategy-property/merge-strategy-property.component.sass +++ /dev/null @@ -1,2 +0,0 @@ -.strategy-logo - width: 35px diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/merge-strategy-property/merge-strategy-property.component.scss b/src/app/dataset-block/metadata-block/components/event-details/components/common/merge-strategy-property/merge-strategy-property.component.scss new file mode 100644 index 000000000..67fb7f639 --- /dev/null +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/merge-strategy-property/merge-strategy-property.component.scss @@ -0,0 +1,3 @@ +.strategy-logo { + width: 35px; +} \ No newline at end of file diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/merge-strategy-property/merge-strategy-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/merge-strategy-property/merge-strategy-property.component.ts index 1a90530cd..2370f6c84 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/merge-strategy-property/merge-strategy-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/merge-strategy-property/merge-strategy-property.component.ts @@ -6,7 +6,7 @@ import { BasePropertyComponent } from "../base-property/base-property.component" @Component({ selector: "app-merge-strategy-property", templateUrl: "./merge-strategy-property.component.html", - styleUrls: ["./merge-strategy-property.component.sass"], + styleUrls: ["./merge-strategy-property.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class MergeStrategyPropertyComponent extends BasePropertyComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/offset-interval-property/offset-interval-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/offset-interval-property/offset-interval-property.component.sass deleted file mode 100644 index c260ce0b1..000000000 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/offset-interval-property/offset-interval-property.component.sass +++ /dev/null @@ -1,7 +0,0 @@ -.bg-value - background-color: #f3f4f6 - padding: 3px 10px - border-radius: 5px - -p - display: inline-block diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/offset-interval-property/offset-interval-property.component.scss b/src/app/dataset-block/metadata-block/components/event-details/components/common/offset-interval-property/offset-interval-property.component.scss new file mode 100644 index 000000000..ea42b34d5 --- /dev/null +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/offset-interval-property/offset-interval-property.component.scss @@ -0,0 +1,9 @@ +.bg-value { + background-color: #f3f4f6; + padding: 3px 10px; + border-radius: 5px; +} + +p { + display: inline-block; +} \ No newline at end of file diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/offset-interval-property/offset-interval-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/offset-interval-property/offset-interval-property.component.ts index 3e557b89c..907a33d1a 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/offset-interval-property/offset-interval-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/offset-interval-property/offset-interval-property.component.ts @@ -1,5 +1,5 @@ -import { DatasetByIdQuery } from "./../../../../../../../api/kamu.graphql.interface"; -import { NavigationService } from "./../../../../../../../services/navigation.service"; +import { DatasetByIdQuery } from "../../../../../../../api/kamu.graphql.interface"; +import { NavigationService } from "../../../../../../../services/navigation.service"; import { BasePropertyComponent } from "src/app/dataset-block/metadata-block/components/event-details/components/common/base-property/base-property.component"; import { ChangeDetectionStrategy, Component, Input, OnInit } from "@angular/core"; import { OffsetInterval } from "src/app/api/kamu.graphql.interface"; @@ -11,7 +11,7 @@ import { MaybeNull } from "src/app/common/app.types"; @Component({ selector: "app-interval-property", templateUrl: "./offset-interval-property.component.html", - styleUrls: ["./offset-interval-property.component.sass"], + styleUrls: ["./offset-interval-property.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class OffsetIntervalPropertyComponent extends BasePropertyComponent implements OnInit { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/order-property/order-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/order-property/order-property.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/order-property/order-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/order-property/order-property.component.ts index c6865e2b9..d80e41d85 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/order-property/order-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/order-property/order-property.component.ts @@ -4,7 +4,6 @@ import { DataHelpers } from "src/app/common/data.helpers"; @Component({ selector: "app-order-property", templateUrl: "./order-property.component.html", - styleUrls: ["./order-property.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class OrderPropertyComponent extends BasePropertyComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/owner-property/owner-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/owner-property/owner-property.component.sass deleted file mode 100644 index 7404e2f9f..000000000 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/owner-property/owner-property.component.sass +++ /dev/null @@ -1,4 +0,0 @@ -.owner-link - color: #0d6efd - &:hover - text-decoration: underline diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/owner-property/owner-property.component.scss b/src/app/dataset-block/metadata-block/components/event-details/components/common/owner-property/owner-property.component.scss new file mode 100644 index 000000000..ccc14eb37 --- /dev/null +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/owner-property/owner-property.component.scss @@ -0,0 +1,7 @@ +.owner-link { + color: #0d6efd; + + &:hover { + text-decoration: underline; + } +} \ No newline at end of file diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/owner-property/owner-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/owner-property/owner-property.component.ts index 4f07358f4..751a04b10 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/owner-property/owner-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/owner-property/owner-property.component.ts @@ -1,12 +1,12 @@ -import { NavigationService } from "./../../../../../../../services/navigation.service"; -import { Account } from "./../../../../../../../api/kamu.graphql.interface"; +import { NavigationService } from "../../../../../../../services/navigation.service"; +import { Account } from "../../../../../../../api/kamu.graphql.interface"; import { ChangeDetectionStrategy, Component, Input } from "@angular/core"; import { BasePropertyComponent } from "../base-property/base-property.component"; @Component({ selector: "app-owner-property", templateUrl: "./owner-property.component.html", - styleUrls: ["./owner-property.component.sass"], + styleUrls: ["./owner-property.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class OwnerPropertyComponent extends BasePropertyComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/schema-property/schema-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/schema-property/schema-property.component.sass deleted file mode 100644 index 18b4c4a69..000000000 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/schema-property/schema-property.component.sass +++ /dev/null @@ -1,2 +0,0 @@ -.container-table - width: 400px diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/schema-property/schema-property.component.scss b/src/app/dataset-block/metadata-block/components/event-details/components/common/schema-property/schema-property.component.scss new file mode 100644 index 000000000..b337a3555 --- /dev/null +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/schema-property/schema-property.component.scss @@ -0,0 +1,3 @@ +.container-table { + width: 400px; +} \ No newline at end of file diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/schema-property/schema-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/schema-property/schema-property.component.ts index c292993c9..500d6ded5 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/schema-property/schema-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/schema-property/schema-property.component.ts @@ -6,7 +6,7 @@ import { BasePropertyComponent } from "../base-property/base-property.component" @Component({ selector: "app-schema-property", templateUrl: "./schema-property.component.html", - styleUrls: ["./schema-property.component.sass"], + styleUrls: ["./schema-property.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SchemaPropertyComponent extends BasePropertyComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/separator-property/separator-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/separator-property/separator-property.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/separator-property/separator-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/separator-property/separator-property.component.ts index b7b18b4e3..2b86921e1 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/separator-property/separator-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/separator-property/separator-property.component.ts @@ -4,7 +4,6 @@ import { BasePropertyComponent } from "../base-property/base-property.component" @Component({ selector: "app-separator-property", templateUrl: "./separator-property.component.html", - styleUrls: ["./separator-property.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SeparatorPropertyComponent extends BasePropertyComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/simple-property/simple-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/simple-property/simple-property.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/simple-property/simple-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/simple-property/simple-property.component.ts index 51ac24f0d..7b39aa693 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/simple-property/simple-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/simple-property/simple-property.component.ts @@ -1,10 +1,9 @@ -import { BasePropertyComponent } from "./../base-property/base-property.component"; +import { BasePropertyComponent } from "../base-property/base-property.component"; import { ChangeDetectionStrategy, Component, Input } from "@angular/core"; @Component({ selector: "app-simple-property", templateUrl: "./simple-property.component.html", - styleUrls: ["./simple-property.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SimplePropertyComponent extends BasePropertyComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/size-property/size-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/size-property/size-property.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/size-property/size-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/size-property/size-property.component.ts index d6e37f89f..23e2f2f3d 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/size-property/size-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/size-property/size-property.component.ts @@ -4,7 +4,6 @@ import { ChangeDetectionStrategy, Component, Input } from "@angular/core"; @Component({ selector: "app-size-property", templateUrl: "./size-property.component.html", - styleUrls: ["./size-property.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SizePropertyComponent extends BasePropertyComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/sql-query-viewer/sql-query-viewer.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/sql-query-viewer/sql-query-viewer.component.sass deleted file mode 100644 index 8b1378917..000000000 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/sql-query-viewer/sql-query-viewer.component.sass +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/sql-query-viewer/sql-query-viewer.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/sql-query-viewer/sql-query-viewer.component.ts index 466f7cb24..07fad44fe 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/sql-query-viewer/sql-query-viewer.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/sql-query-viewer/sql-query-viewer.component.ts @@ -5,7 +5,6 @@ import { BasePropertyComponent } from "../base-property/base-property.component" @Component({ selector: "app-sql-query-viewer", templateUrl: "./sql-query-viewer.component.html", - styleUrls: ["./sql-query-viewer.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SqlQueryViewerComponent extends BasePropertyComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/step-type-property/step-type-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/step-type-property/step-type-property.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/step-type-property/step-type-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/step-type-property/step-type-property.component.ts index 957089215..40941e303 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/step-type-property/step-type-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/step-type-property/step-type-property.component.ts @@ -5,7 +5,6 @@ import { DataHelpers } from "src/app/common/data.helpers"; @Component({ selector: "app-step-type-property", templateUrl: "./step-type-property.component.html", - styleUrls: ["./step-type-property.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class StepTypePropertyComponent extends BasePropertyComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/temporal-tables-property/temporal-tables-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/temporal-tables-property/temporal-tables-property.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/temporal-tables-property/temporal-tables-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/temporal-tables-property/temporal-tables-property.component.ts index e633e35cb..dd5af671b 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/temporal-tables-property/temporal-tables-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/temporal-tables-property/temporal-tables-property.component.ts @@ -5,7 +5,6 @@ import { TemporalTable } from "src/app/api/kamu.graphql.interface"; @Component({ selector: "app-temporal-tables-property", templateUrl: "./temporal-tables-property.component.html", - styleUrls: ["./temporal-tables-property.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class TemporalTablesPropertyComponent extends BasePropertyComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/time-property/time-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/time-property/time-property.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/time-property/time-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/time-property/time-property.component.ts index d84379948..292179b65 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/time-property/time-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/time-property/time-property.component.ts @@ -4,7 +4,6 @@ import { BasePropertyComponent } from "../base-property/base-property.component" @Component({ selector: "app-time-property", templateUrl: "./time-property.component.html", - styleUrls: ["./time-property.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class TimePropertyComponent extends BasePropertyComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/unsupported-property/unsupported-property.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/unsupported-property/unsupported-property.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/unsupported-property/unsupported-property.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/unsupported-property/unsupported-property.component.ts index 87abb6685..d4914372a 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/unsupported-property/unsupported-property.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/unsupported-property/unsupported-property.component.ts @@ -4,7 +4,6 @@ import { BasePropertyComponent } from "../base-property/base-property.component" @Component({ selector: "app-unsupported-property", templateUrl: "./unsupported-property.component.html", - styleUrls: ["./unsupported-property.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class UnsupportedPropertyComponent extends BasePropertyComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/yaml-event-viewer/yaml-event-viewer.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/common/yaml-event-viewer/yaml-event-viewer.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/common/yaml-event-viewer/yaml-event-viewer.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/common/yaml-event-viewer/yaml-event-viewer.component.ts index 1e2edd1ed..92a0158fd 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/common/yaml-event-viewer/yaml-event-viewer.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/common/yaml-event-viewer/yaml-event-viewer.component.ts @@ -3,7 +3,6 @@ import { ChangeDetectionStrategy, Component, Input } from "@angular/core"; @Component({ selector: "app-yaml-event-viewer", templateUrl: "./yaml-event-viewer.component.html", - styleUrls: ["./yaml-event-viewer.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class YamlEventViewerComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/execute-query-event/execute-query-event.component.spec.ts b/src/app/dataset-block/metadata-block/components/event-details/components/execute-query-event/execute-query-event.component.spec.ts index 902be6d7f..a03ab357f 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/execute-query-event/execute-query-event.component.spec.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/execute-query-event/execute-query-event.component.spec.ts @@ -1,5 +1,5 @@ -import { ExecuteQuery } from "./../../../../../../api/kamu.graphql.interface"; -import { mockExecuteQuery } from "./../../mock.events"; +import { ExecuteQuery } from "../../../../../../api/kamu.graphql.interface"; +import { mockExecuteQuery } from "../../mock.events"; import { ComponentFixture, TestBed } from "@angular/core/testing"; import { ApolloTestingModule } from "apollo-angular/testing"; import { ExecuteQueryEventComponent } from "./execute-query-event.component"; diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/execute-query-event/execute-query-event.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/execute-query-event/execute-query-event.component.ts index 7e61509aa..7fb5e9d5e 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/execute-query-event/execute-query-event.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/execute-query-event/execute-query-event.component.ts @@ -6,7 +6,6 @@ import { BaseDynamicEventComponent } from "../base-dynamic-event/base-dynamic-ev @Component({ selector: "app-execute-query-event", templateUrl: "../base-dynamic-event/base-dynamic-event.component.html", - styleUrls: ["../base-dynamic-event/base-dynamic-event.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class ExecuteQueryEventComponent extends BaseDynamicEventComponent implements OnInit { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/execute-query-event/execute-query-event.source.ts b/src/app/dataset-block/metadata-block/components/event-details/components/execute-query-event/execute-query-event.source.ts index 458776b93..7b7d02c6a 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/execute-query-event/execute-query-event.source.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/execute-query-event/execute-query-event.source.ts @@ -1,5 +1,5 @@ -import { DisplayTimeComponent } from "./../../../../../../components/display-time/display-time.component"; -import { SimplePropertyComponent } from "./../common/simple-property/simple-property.component"; +import { DisplayTimeComponent } from "../../../../../../components/display-time/display-time.component"; +import { SimplePropertyComponent } from "../common/simple-property/simple-property.component"; import { EventRowDescriptorsByField } from "../../dynamic-events/dynamic-events.model"; import { OffsetIntervalPropertyComponent } from "../common/offset-interval-property/offset-interval-property.component"; import { SizePropertyComponent } from "../common/size-property/size-property.component"; diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/seed-event/seed-event.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/seed-event/seed-event.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/seed-event/seed-event.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/seed-event/seed-event.component.ts index d17ce3c58..1aac84aff 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/seed-event/seed-event.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/seed-event/seed-event.component.ts @@ -7,7 +7,6 @@ import { Clipboard } from "@angular/cdk/clipboard"; @Component({ selector: "app-seed-event", templateUrl: "./seed-event.component.html", - styleUrls: ["./seed-event.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SeedEventComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.sass deleted file mode 100644 index c6c1c766d..000000000 --- a/src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.sass +++ /dev/null @@ -1,4 +0,0 @@ -::ng-deep - &.mat-typography - h1 - line-height: 1.2 !important diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.scss b/src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.scss new file mode 100644 index 000000000..14840f30d --- /dev/null +++ b/src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.scss @@ -0,0 +1,7 @@ +::ng-deep { + &.mat-typography { + h1 { + line-height: 1.2 !important; + } + } +} \ No newline at end of file diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.spec.ts b/src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.spec.ts index 250a21136..1c696ffde 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.spec.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.spec.ts @@ -1,4 +1,4 @@ -import { mockSetAttachments } from "./../../mock.events"; +import { mockSetAttachments } from "../../mock.events"; import { NO_ERRORS_SCHEMA } from "@angular/core"; import { ComponentFixture, TestBed } from "@angular/core/testing"; import { SetAttachmentsEventComponent } from "./set-attachments-event.component"; diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.ts index 706057d1d..83137d136 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.ts @@ -1,10 +1,10 @@ -import { SetAttachments } from "./../../../../../../api/kamu.graphql.interface"; +import { SetAttachments } from "../../../../../../api/kamu.graphql.interface"; import { ChangeDetectionStrategy, Component, Input } from "@angular/core"; @Component({ selector: "app-set-attachments-event", templateUrl: "./set-attachments-event.component.html", - styleUrls: ["./set-attachments-event.component.sass"], + styleUrls: ["./set-attachments-event.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SetAttachmentsEventComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/set-info-event/set-info-event.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/set-info-event/set-info-event.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/set-info-event/set-info-event.component.spec.ts b/src/app/dataset-block/metadata-block/components/event-details/components/set-info-event/set-info-event.component.spec.ts index e95faccf1..ed6088e6c 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/set-info-event/set-info-event.component.spec.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/set-info-event/set-info-event.component.spec.ts @@ -1,5 +1,5 @@ -import { CardsPropertyComponent } from "./../common/cards-property/cards-property.component"; -import { mockSetInfo } from "./../../mock.events"; +import { CardsPropertyComponent } from "../common/cards-property/cards-property.component"; +import { mockSetInfo } from "../../mock.events"; import { ComponentFixture, TestBed } from "@angular/core/testing"; import { SetInfoEventComponent } from "./set-info-event.component"; import { BlockRowDataComponent } from "../../../block-row-data/block-row-data.component"; diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/set-info-event/set-info-event.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/set-info-event/set-info-event.component.ts index 187acd3b8..a9f1b2c53 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/set-info-event/set-info-event.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/set-info-event/set-info-event.component.ts @@ -4,7 +4,6 @@ import { SetInfo } from "src/app/api/kamu.graphql.interface"; @Component({ selector: "app-set-info-event", templateUrl: "./set-info-event.component.html", - styleUrls: ["./set-info-event.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SetInfoEventComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/set-license-event/set-license-event.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/set-license-event/set-license-event.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/set-license-event/set-license-event.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/set-license-event/set-license-event.component.ts index 5726421c0..c5611439f 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/set-license-event/set-license-event.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/set-license-event/set-license-event.component.ts @@ -1,10 +1,9 @@ -import { SetLicense } from "./../../../../../../api/kamu.graphql.interface"; +import { SetLicense } from "../../../../../../api/kamu.graphql.interface"; import { ChangeDetectionStrategy, Component, Input } from "@angular/core"; @Component({ selector: "app-set-license-event", templateUrl: "./set-license-event.component.html", - styleUrls: ["./set-license-event.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SetLicenseEventComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/set-polling-source-event/set-polling-source-event.component.spec.ts b/src/app/dataset-block/metadata-block/components/event-details/components/set-polling-source-event/set-polling-source-event.component.spec.ts index d3cd98816..ed225bdeb 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/set-polling-source-event/set-polling-source-event.component.spec.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/set-polling-source-event/set-polling-source-event.component.spec.ts @@ -1,6 +1,6 @@ -import { FetchStepUrl, PrepStepDecompress } from "./../../../../../../api/kamu.graphql.interface"; +import { FetchStepUrl, PrepStepDecompress } from "../../../../../../api/kamu.graphql.interface"; import { findElementByDataTestId } from "src/app/common/base-test.helpers.spec"; -import { CardsPropertyComponent } from "./../common/cards-property/cards-property.component"; +import { CardsPropertyComponent } from "../common/cards-property/cards-property.component"; import { NO_ERRORS_SCHEMA } from "@angular/core"; import { ComponentFixture, TestBed } from "@angular/core/testing"; import { mockSetPollingSourceEvent } from "../../mock.events"; diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/set-polling-source-event/set-polling-source-event.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/set-polling-source-event/set-polling-source-event.component.ts index 3bdedbf26..94983cb59 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/set-polling-source-event/set-polling-source-event.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/set-polling-source-event/set-polling-source-event.component.ts @@ -6,7 +6,6 @@ import { SECTION_BUILDERS_BY_EVENT_TYPE } from "../../dynamic-events/builders/ev @Component({ selector: "app-set-polling-source-event", templateUrl: "../base-dynamic-event/base-dynamic-event.component.html", - styleUrls: ["../base-dynamic-event/base-dynamic-event.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SetPollingSourceEventComponent extends BaseDynamicEventComponent implements OnInit { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/set-polling-source-event/set-polling-source-event.source.ts b/src/app/dataset-block/metadata-block/components/event-details/components/set-polling-source-event/set-polling-source-event.source.ts index be41f427c..1150a472e 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/set-polling-source-event/set-polling-source-event.source.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/set-polling-source-event/set-polling-source-event.source.ts @@ -1,4 +1,4 @@ -import { LinkPropertyComponent } from "./../common/link-property/link-property.component"; +import { LinkPropertyComponent } from "../common/link-property/link-property.component"; import { SeparatorPropertyComponent } from "../common/separator-property/separator-property.component"; import { SimplePropertyComponent } from "../common/simple-property/simple-property.component"; diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/set-transform-event/set-transform-event.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/set-transform-event/set-transform-event.component.ts index 2aab9ed43..76c0c3976 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/set-transform-event/set-transform-event.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/set-transform-event/set-transform-event.component.ts @@ -1,4 +1,4 @@ -import { SetTransform } from "./../../../../../../api/kamu.graphql.interface"; +import { SetTransform } from "../../../../../../api/kamu.graphql.interface"; import { BaseDynamicEventComponent } from "../base-dynamic-event/base-dynamic-event.component"; import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core"; @@ -7,7 +7,6 @@ import { SECTION_BUILDERS_BY_EVENT_TYPE } from "../../dynamic-events/builders/ev @Component({ selector: "app-set-transform-event", templateUrl: "../base-dynamic-event/base-dynamic-event.component.html", - styleUrls: ["../base-dynamic-event/base-dynamic-event.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SetTransformEventComponent extends BaseDynamicEventComponent implements OnInit { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/set-transform-event/set-transform-event.source.ts b/src/app/dataset-block/metadata-block/components/event-details/components/set-transform-event/set-transform-event.source.ts index b1bc42146..ccc85a105 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/set-transform-event/set-transform-event.source.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/set-transform-event/set-transform-event.source.ts @@ -1,5 +1,5 @@ -import { TemporalTablesPropertyComponent } from "./../common/temporal-tables-property/temporal-tables-property.component"; -import { SimplePropertyComponent } from "./../common/simple-property/simple-property.component"; +import { TemporalTablesPropertyComponent } from "../common/temporal-tables-property/temporal-tables-property.component"; +import { SimplePropertyComponent } from "../common/simple-property/simple-property.component"; import { EnginePropertyComponent } from "../common/engine-property/engine-property.component"; import { SqlQueryViewerComponent } from "../common/sql-query-viewer/sql-query-viewer.component"; import { OwnerPropertyComponent } from "../common/owner-property/owner-property.component"; diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/set-vocab-event/set-vocab-event.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/set-vocab-event/set-vocab-event.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/set-vocab-event/set-vocab-event.component.spec.ts b/src/app/dataset-block/metadata-block/components/event-details/components/set-vocab-event/set-vocab-event.component.spec.ts index 348593cb4..7e1705097 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/set-vocab-event/set-vocab-event.component.spec.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/set-vocab-event/set-vocab-event.component.spec.ts @@ -1,4 +1,4 @@ -import { mockSetVocab } from "./../../mock.events"; +import { mockSetVocab } from "../../mock.events"; import { ComponentFixture, TestBed } from "@angular/core/testing"; import { SetVocabEventComponent } from "./set-vocab-event.component"; import { CardsPropertyComponent } from "../common/cards-property/cards-property.component"; diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/set-vocab-event/set-vocab-event.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/set-vocab-event/set-vocab-event.component.ts index 94f2b9dd9..6474056c3 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/set-vocab-event/set-vocab-event.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/set-vocab-event/set-vocab-event.component.ts @@ -4,7 +4,6 @@ import { SetVocab } from "src/app/api/kamu.graphql.interface"; @Component({ selector: "app-set-vocab-event", templateUrl: "./set-vocab-event.component.html", - styleUrls: ["./set-vocab-event.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SetVocabEventComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/set-watermark-event/set-watermark-event.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/set-watermark-event/set-watermark-event.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/set-watermark-event/set-watermark-event.component.spec.ts b/src/app/dataset-block/metadata-block/components/event-details/components/set-watermark-event/set-watermark-event.component.spec.ts index 78d880283..307b3cd6b 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/set-watermark-event/set-watermark-event.component.spec.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/set-watermark-event/set-watermark-event.component.spec.ts @@ -1,4 +1,4 @@ -import { mockSetWatermark } from "./../../mock.events"; +import { mockSetWatermark } from "../../mock.events"; import { ComponentFixture, TestBed } from "@angular/core/testing"; import { SetWatermarkEventComponent } from "./set-watermark-event.component"; diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/set-watermark-event/set-watermark-event.component.ts b/src/app/dataset-block/metadata-block/components/event-details/components/set-watermark-event/set-watermark-event.component.ts index 6ae29f282..f648f72f8 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/components/set-watermark-event/set-watermark-event.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/components/set-watermark-event/set-watermark-event.component.ts @@ -1,10 +1,9 @@ -import { SetWatermark } from "./../../../../../../api/kamu.graphql.interface"; +import { SetWatermark } from "../../../../../../api/kamu.graphql.interface"; import { ChangeDetectionStrategy, Component, Input } from "@angular/core"; @Component({ selector: "app-set-watermark-event", templateUrl: "./set-watermark-event.component.html", - styleUrls: ["./set-watermark-event.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SetWatermarkEventComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/dynamic-events/builders/set-transform-section.builder.ts b/src/app/dataset-block/metadata-block/components/event-details/dynamic-events/builders/set-transform-section.builder.ts index 9f8491a99..2f6fead89 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/dynamic-events/builders/set-transform-section.builder.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/dynamic-events/builders/set-transform-section.builder.ts @@ -1,4 +1,4 @@ -import { Dataset } from "./../../../../../../api/kamu.graphql.interface"; +import { Dataset } from "../../../../../../api/kamu.graphql.interface"; import { SetTransform, TransformInput } from "src/app/api/kamu.graphql.interface"; import { EventSectionBuilder } from "./event-section.builder"; import { SET_TRANSFORM_SOURCE_DESCRIPTORS } from "../../components/set-transform-event/set-transform-event.source"; @@ -30,12 +30,12 @@ export class SetTransformSectionBuilder extends EventSectionBuilder { if (event.__typename && item.dataset.__typename && key !== "__typename") { diff --git a/src/app/dataset-block/metadata-block/components/event-details/event-details.component.sass b/src/app/dataset-block/metadata-block/components/event-details/event-details.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-block/metadata-block/components/event-details/event-details.component.spec.ts b/src/app/dataset-block/metadata-block/components/event-details/event-details.component.spec.ts index 7519cfcb8..8ff22bb17 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/event-details.component.spec.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/event-details.component.spec.ts @@ -1,13 +1,13 @@ import { SetPollingSourceEventComponent } from "./components/set-polling-source-event/set-polling-source-event.component"; import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; -import { BlockService } from "./../../block.service"; +import { BlockService } from "../../block.service"; import { ComponentFixture, TestBed } from "@angular/core/testing"; import { Apollo } from "apollo-angular"; import { DatasetApi } from "src/app/api/dataset.api"; import { EventDetailsComponent } from "./event-details.component"; import { MetadataBlockFragment } from "src/app/api/kamu.graphql.interface"; import { mockGetMetadataBlockQuery } from "src/app/api/mock/dataset.mock"; -import { AddDataEventFragment } from "./../../../../api/kamu.graphql.interface"; +import { AddDataEventFragment } from "../../../../api/kamu.graphql.interface"; import { SharedTestModule } from "src/app/common/shared-test.module"; describe("EventDetailsComponent", () => { diff --git a/src/app/dataset-block/metadata-block/components/event-details/event-details.component.ts b/src/app/dataset-block/metadata-block/components/event-details/event-details.component.ts index 29bea7745..fdf380cb1 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/event-details.component.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/event-details.component.ts @@ -9,7 +9,7 @@ import { SetInfo, SetVocab, SetWatermark, -} from "./../../../../api/kamu.graphql.interface"; +} from "../../../../api/kamu.graphql.interface"; import { SupportedEvents } from "./supported.events"; import { ChangeDetectionStrategy, Component, Input } from "@angular/core"; import { MetadataBlockFragment } from "src/app/api/kamu.graphql.interface"; @@ -20,7 +20,6 @@ import { Observable } from "rxjs"; @Component({ selector: "app-event-details", templateUrl: "./event-details.component.html", - styleUrls: ["./event-details.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class EventDetailsComponent { diff --git a/src/app/dataset-block/metadata-block/components/event-details/mock.events.ts b/src/app/dataset-block/metadata-block/components/event-details/mock.events.ts index ff40023d0..fe9e45308 100644 --- a/src/app/dataset-block/metadata-block/components/event-details/mock.events.ts +++ b/src/app/dataset-block/metadata-block/components/event-details/mock.events.ts @@ -8,7 +8,7 @@ import { SetPollingSource, SetVocab, SetWatermark, -} from "./../../../../api/kamu.graphql.interface"; +} from "../../../../api/kamu.graphql.interface"; import { AddDataEventFragment, DatasetKind, Seed } from "src/app/api/kamu.graphql.interface"; export const mockAddData: AddDataEventFragment = { __typename: "AddData", diff --git a/src/app/dataset-block/metadata-block/components/tooltip-icon/tooltip-icon.component.sass b/src/app/dataset-block/metadata-block/components/tooltip-icon/tooltip-icon.component.sass deleted file mode 100644 index 0bd0629af..000000000 --- a/src/app/dataset-block/metadata-block/components/tooltip-icon/tooltip-icon.component.sass +++ /dev/null @@ -1,19 +0,0 @@ -.tooltip-class - z-index: 1000 - .tooltip-inner - background-color: #f3f4f6 - position: relative - font-size: 12px - border: 1px solid #ced4da - padding: 5px 10px - color: black - text-align: left - width: 150px - -.bs-tooltip-top - .tooltip-arrow - &::before - border-top-color: #ced4da !important - -.tooltip.show - opacity: 1 diff --git a/src/app/dataset-block/metadata-block/components/tooltip-icon/tooltip-icon.component.scss b/src/app/dataset-block/metadata-block/components/tooltip-icon/tooltip-icon.component.scss new file mode 100644 index 000000000..e9f1caa87 --- /dev/null +++ b/src/app/dataset-block/metadata-block/components/tooltip-icon/tooltip-icon.component.scss @@ -0,0 +1,26 @@ +.tooltip-class { + z-index: 1000; + + .tooltip-inner { + background-color: #f3f4f6; + position: relative; + font-size: 12px; + border: 1px solid #ced4da; + padding: 5px 10px; + color: black; + text-align: left; + width: 150px; + } +} + +.bs-tooltip-top { + .tooltip-arrow { + &::before { + border-top-color: #ced4da !important; + } + } +} + +.tooltip.show { + opacity: 1; +} \ No newline at end of file diff --git a/src/app/dataset-block/metadata-block/components/tooltip-icon/tooltip-icon.component.ts b/src/app/dataset-block/metadata-block/components/tooltip-icon/tooltip-icon.component.ts index 0b82a6fd1..e5089875e 100644 --- a/src/app/dataset-block/metadata-block/components/tooltip-icon/tooltip-icon.component.ts +++ b/src/app/dataset-block/metadata-block/components/tooltip-icon/tooltip-icon.component.ts @@ -4,7 +4,7 @@ import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from "@a @Component({ selector: "app-tooltip-icon", templateUrl: "./tooltip-icon.component.html", - styleUrls: ["./tooltip-icon.component.sass"], + styleUrls: ["./tooltip-icon.component.scss"], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/src/app/dataset-block/metadata-block/components/yaml-view-section/yaml-view-section.component.sass b/src/app/dataset-block/metadata-block/components/yaml-view-section/yaml-view-section.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-block/metadata-block/components/yaml-view-section/yaml-view-section.component.spec.ts b/src/app/dataset-block/metadata-block/components/yaml-view-section/yaml-view-section.component.spec.ts index b580b0801..a064475c4 100644 --- a/src/app/dataset-block/metadata-block/components/yaml-view-section/yaml-view-section.component.spec.ts +++ b/src/app/dataset-block/metadata-block/components/yaml-view-section/yaml-view-section.component.spec.ts @@ -1,4 +1,4 @@ -import { BlockService } from "./../../block.service"; +import { BlockService } from "../../block.service"; import { ApolloTestingModule } from "apollo-angular/testing"; import { ComponentFixture, TestBed } from "@angular/core/testing"; import { YamlViewSectionComponent } from "./yaml-view-section.component"; diff --git a/src/app/dataset-block/metadata-block/components/yaml-view-section/yaml-view-section.component.ts b/src/app/dataset-block/metadata-block/components/yaml-view-section/yaml-view-section.component.ts index bdd935d94..5ac0e5506 100644 --- a/src/app/dataset-block/metadata-block/components/yaml-view-section/yaml-view-section.component.ts +++ b/src/app/dataset-block/metadata-block/components/yaml-view-section/yaml-view-section.component.ts @@ -7,7 +7,6 @@ import { Observable } from "rxjs"; @Component({ selector: "app-yaml-view-section", templateUrl: "./yaml-view-section.component.html", - styleUrls: ["./yaml-view-section.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class YamlViewSectionComponent { diff --git a/src/app/dataset-block/metadata-block/metadata-block.component.sass b/src/app/dataset-block/metadata-block/metadata-block.component.sass deleted file mode 100644 index 9701bc6b4..000000000 --- a/src/app/dataset-block/metadata-block/metadata-block.component.sass +++ /dev/null @@ -1,19 +0,0 @@ -mat-button-toggle-group - box-shadow: none - border-bottom: 1px solid - border-radius: 0 !important - -mat-button-toggle - border: 1px rgba(0,0,0,0) solid !important - margin-top: 5px !important - padding: 0 5px !important - z-index: 3 !important - outline: none !important - -.mat-button-toggle-checked - border-left: none - border-top: none - border-right: none - border-bottom: 2px #000 solid !important - border-radius: 0 - background-color: transparent !important diff --git a/src/app/dataset-block/metadata-block/metadata-block.component.scss b/src/app/dataset-block/metadata-block/metadata-block.component.scss new file mode 100644 index 000000000..30b6f2fa2 --- /dev/null +++ b/src/app/dataset-block/metadata-block/metadata-block.component.scss @@ -0,0 +1,22 @@ +mat-button-toggle-group { + box-shadow: none; + border-bottom: 1px solid; + border-radius: 0 !important; +} + +mat-button-toggle { + border: 1px rgba(0, 0, 0, 0) solid !important; + margin-top: 5px !important; + padding: 0 5px !important; + z-index: 3 !important; + outline: none !important; +} + +.mat-button-toggle-checked { + border-left: none; + border-top: none; + border-right: none; + border-bottom: 2px #000 solid !important; + border-radius: 0; + background-color: transparent !important; +} \ No newline at end of file diff --git a/src/app/dataset-block/metadata-block/metadata-block.component.spec.ts b/src/app/dataset-block/metadata-block/metadata-block.component.spec.ts index 519f268ff..8dc08ee7c 100644 --- a/src/app/dataset-block/metadata-block/metadata-block.component.spec.ts +++ b/src/app/dataset-block/metadata-block/metadata-block.component.spec.ts @@ -13,10 +13,10 @@ import { NgMultiSelectDropDownModule } from "ng-multiselect-dropdown"; import { FormsModule } from "@angular/forms"; import { EventDetailsComponent } from "./components/event-details/event-details.component"; import { BlockHeaderComponent } from "./components/block-header/block-header.component"; -import { DatasetViewMenuComponent } from "src/app/dataset-view/dataset-view-menu/dataset-view-menu-component"; +import { DatasetViewMenuComponent } from "src/app/dataset-view/dataset-view-menu/dataset-view-menu.component"; import { MatButtonToggleModule } from "@angular/material/button-toggle"; import { MatMenuModule } from "@angular/material/menu"; -import { DatasetViewHeaderComponent } from "src/app/dataset-view/dataset-view-header/dataset-view-header-component"; +import { DatasetViewHeaderComponent } from "src/app/dataset-view/dataset-view-header/dataset-view-header.component"; import { SearchAdditionalButtonsComponent } from "src/app/components/search-additional-buttons/search-additional-buttons.component"; import { SearchAdditionalButtonsNavComponent } from "src/app/components/search-additional-buttons/search-additional-buttons-nav.component"; import { HttpClientTestingModule } from "@angular/common/http/testing"; diff --git a/src/app/dataset-block/metadata-block/metadata-block.component.ts b/src/app/dataset-block/metadata-block/metadata-block.component.ts index efb33225b..28f15d168 100644 --- a/src/app/dataset-block/metadata-block/metadata-block.component.ts +++ b/src/app/dataset-block/metadata-block/metadata-block.component.ts @@ -1,9 +1,9 @@ -import { DatasetHistoryUpdate } from "./../../dataset-view/dataset.subscriptions.interface"; -import { DatasetService } from "./../../dataset-view/dataset.service"; +import { DatasetHistoryUpdate } from "../../dataset-view/dataset.subscriptions.interface"; +import { DatasetService } from "../../dataset-view/dataset.service"; import { Observable, Subscription, combineLatest } from "rxjs"; import ProjectLinks from "src/app/project-links"; -import { BaseProcessingComponent } from "./../../common/base.processing.component"; -import { DatasetViewTypeEnum } from "./../../dataset-view/dataset-view.interface"; +import { BaseProcessingComponent } from "../../common/base.processing.component"; +import { DatasetViewTypeEnum } from "../../dataset-view/dataset-view.interface"; import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from "@angular/core"; import { DatasetInfo } from "src/app/interface/navigation.interface"; @@ -15,7 +15,7 @@ import { AppDatasetSubscriptionsService } from "src/app/dataset-view/dataset.sub @Component({ selector: "app-metadata-block", templateUrl: "./metadata-block.component.html", - styleUrls: ["./metadata-block.component.sass"], + styleUrls: ["./metadata-block.component.scss"], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/src/app/dataset-block/metadata-block/metadata-block.module.ts b/src/app/dataset-block/metadata-block/metadata-block.module.ts index 7c7caba57..2ea2c22a8 100644 --- a/src/app/dataset-block/metadata-block/metadata-block.module.ts +++ b/src/app/dataset-block/metadata-block/metadata-block.module.ts @@ -1,8 +1,8 @@ -import { SharedModule } from "./../../shared/shared/shared.module"; +import { SharedModule } from "../../shared/shared/shared.module"; import { SeparatorPropertyComponent } from "./components/event-details/components/common/separator-property/separator-property.component"; import { SimplePropertyComponent } from "./components/event-details/components/common/simple-property/simple-property.component"; import { FormsModule } from "@angular/forms"; -import { DisplayTimeModule } from "./../../components/display-time/display-time.module"; +import { DisplayTimeModule } from "../../components/display-time/display-time.module"; import { MatDividerModule } from "@angular/material/divider"; import { EventDetailsComponent } from "./components/event-details/event-details.component"; import { NgModule } from "@angular/core"; diff --git a/src/app/dataset-create/dataset-create.component.sass b/src/app/dataset-create/dataset-create.component.sass deleted file mode 100644 index 5b7d4eed5..000000000 --- a/src/app/dataset-create/dataset-create.component.sass +++ /dev/null @@ -1,117 +0,0 @@ -@import src/assets/styles/var -* - font-size: 18px - -#dataset-create - display: grid - -.dataset-create-content - display: grid - padding: 0 16px - flex-direction: row - width: 70% - grid-template-columns: 1fr 1fr - grid-gap: 24px - > * - display: grid - justify-items: center - overflow: initial - -.dataset-create-container - height: min-content - display: grid - justify-content: center - justify-items: center - align-items: center - align-self: center - align-content: center - width: 100% - -.dataset-create-tipText - font-style: normal - font-weight: normal - font-size: 14px - line-height: 18px - text-align: center - letter-spacing: 0.7px - color: $app-emperor - -.dataset-create-content__image-container - position: relative - >:last-child - position: absolute - top: 0 - left: 28% - height: 100% - -@media (max-width: 768px) - .dataset-create-content - grid-template-columns: 1fr - width: 100% - -hr - margin-top: 1rem - margin-bottom: 1rem - border: 0 - border-top: 1px solid rgba(0, 0, 0, 0.6) - -.layout - max-width: 768px - width: 100% - margin-right: auto - margin-left: auto - padding-bottom: 100px - .divider - margin-top: 30px - .custom-form-control - padding: 5px 12px - font-size: 14px - .title - flex: 1 1 auto !important - font-size: 20px !important - font-weight: 400 !important - margin: 0 !important - .container-monaco - min-width: 100% - .btn-create - background: #2c974b - border-color: rgba(27,31 ,36 ,0.15 ) - color: #ffffff - position: relative - display: inline-block - padding: 5px 16px - font-size: 14px - white-space: nowrap - vertical-align: middle - cursor: pointer - border-radius: 6px - &:hover - background: #34b358 - &:disabled - background: #69e18b - label - span - font-size: 16px - .icon-size - font-size: 28px - height: 28px - width: 28px - - .form-yaml-checkbox-label - font-size: 16px - - .checkbox - height: 16px - width: 16px - - .upload-btn - padding: 3px 12px - font-size: 12px - line-height: 20px - border: 1px solid rgba(27,31,36,0.25 ) - border-radius: 6px - &:hover - background: rgba(27,31,36,0.16 ) - - .fs-12 - font-size: 12px!important diff --git a/src/app/dataset-create/dataset-create.component.scss b/src/app/dataset-create/dataset-create.component.scss new file mode 100644 index 000000000..d27a4dcc3 --- /dev/null +++ b/src/app/dataset-create/dataset-create.component.scss @@ -0,0 +1,157 @@ +@import 'var'; + +* { + font-size: 18px; +} + +#dataset-create { + display: grid; +} + +.dataset-create-content { + display: grid; + padding: 0 16px; + flex-direction: row; + width: 70%; + grid-template-columns: 1fr 1fr; + grid-gap: 24px; + + > * { + display: grid; + justify-items: center; + overflow: initial; + } +} + +.dataset-create-container { + height: min-content; + display: grid; + justify-content: center; + justify-items: center; + align-items: center; + align-self: center; + align-content: center; + width: 100%; +} + +.dataset-create-tipText { + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 18px; + text-align: center; + letter-spacing: 0.7px; + color: $app-emperor; +} + +.dataset-create-content__image-container { + position: relative; + + > :last-child { + position: absolute; + top: 0; + left: 28%; + height: 100%; + } +} + +@media (max-width: 768px) { + .dataset-create-content { + grid-template-columns: 1fr; + width: 100%; + } +} + +hr { + margin-top: 1rem; + margin-bottom: 1rem; + border: 0; + border-top: 1px solid rgba(0, 0, 0, 0.6); +} + +.layout { + max-width: 768px; + width: 100%; + margin-right: auto; + margin-left: auto; + padding-bottom: 100px; + + .divider { + margin-top: 30px; + } + + .custom-form-control { + padding: 5px 12px; + font-size: 14px; + } + + .title { + flex: 1 1 auto !important; + font-size: 20px !important; + font-weight: 400 !important; + margin: 0 !important; + } + + .container-monaco { + min-width: 100%; + } + + .btn-create { + background: #2c974b; + border-color: rgba(27, 31, 36, 0.15); + color: #ffffff; + position: relative; + display: inline-block; + padding: 5px 16px; + font-size: 14px; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + border-radius: 6px; + + &:hover { + background: #34b358; + } + + &:disabled { + background: #69e18b; + } + } + + label { + span { + font-size: 16px; + } + + .icon-size { + font-size: 28px; + height: 28px; + width: 28px; + } + } + + .form-yaml-checkbox-label { + font-size: 16px; + } + + .checkbox { + height: 16px; + width: 16px; + } + + .upload-btn { + padding: 3px 12px; + font-size: 12px; + line-height: 20px; + border: 1px solid rgba(27, 31, 36, 0.25); + border-radius: 6px; + + &:hover { + background: rgba(27, 31, 36, 0.16); + } + } + + .fs-12 { + font-size: 12px !important; + } +} \ No newline at end of file diff --git a/src/app/dataset-create/dataset-create.component.ts b/src/app/dataset-create/dataset-create.component.ts index 7e4753f55..3e26f2c23 100644 --- a/src/app/dataset-create/dataset-create.component.ts +++ b/src/app/dataset-create/dataset-create.component.ts @@ -1,7 +1,7 @@ import { BaseComponent } from "src/app/common/base.component"; /* eslint-disable @typescript-eslint/unbound-method */ import { DatasetKind } from "src/app/api/kamu.graphql.interface"; -import { MaybeNull } from "./../common/app.types"; +import { MaybeNull } from "../common/app.types"; import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from "@angular/core"; import * as monaco from "monaco-editor"; import { FormBuilder, FormGroup, Validators } from "@angular/forms"; @@ -11,7 +11,7 @@ import { Observable } from "rxjs"; @Component({ selector: "app-dataset-create", templateUrl: "./dataset-create.component.html", - styleUrls: ["./dataset-create.component.sass"], + styleUrls: ["./dataset-create.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class DatasetCreateComponent extends BaseComponent { diff --git a/src/app/dataset-create/dataset-create.service.spec.ts b/src/app/dataset-create/dataset-create.service.spec.ts index 867e1683a..d4ed55474 100644 --- a/src/app/dataset-create/dataset-create.service.spec.ts +++ b/src/app/dataset-create/dataset-create.service.spec.ts @@ -1,5 +1,5 @@ -import { CreateDatasetFromSnapshotMutation, CreateEmptyDatasetMutation } from "./../api/kamu.graphql.interface"; -import { mockDatasetBasicsFragment, mockDatasetInfo } from "./../search/mock.data"; +import { CreateDatasetFromSnapshotMutation, CreateEmptyDatasetMutation } from "../api/kamu.graphql.interface"; +import { mockDatasetBasicsFragment, mockDatasetInfo } from "../search/mock.data"; import { TestBed } from "@angular/core/testing"; import { Apollo } from "apollo-angular"; import { of } from "rxjs"; @@ -95,7 +95,7 @@ describe("AppDatasetCreateService", () => { expect(spyNavigateToDatasetView).toHaveBeenCalledWith({ accountName: mockDatasetInfo.accountName, - datasetName: mockDatasetBasicsFragment.name , + datasetName: mockDatasetBasicsFragment.name, tab: DatasetViewTypeEnum.Overview, }); }); @@ -116,7 +116,7 @@ describe("AppDatasetCreateService", () => { expect(spyNavigateToDatasetView).not.toHaveBeenCalledWith({ accountName: mockDatasetInfo.accountName, - datasetName: mockDatasetBasicsFragment.name , + datasetName: mockDatasetBasicsFragment.name, tab: DatasetViewTypeEnum.Overview, }); service.onErrorMessageChanges.subscribe((error) => { diff --git a/src/app/dataset-create/dataset-create.service.ts b/src/app/dataset-create/dataset-create.service.ts index e48474950..0eaaa59f1 100644 --- a/src/app/dataset-create/dataset-create.service.ts +++ b/src/app/dataset-create/dataset-create.service.ts @@ -1,4 +1,4 @@ -import { CreateDatasetFromSnapshotMutation, CreateEmptyDatasetMutation } from "./../api/kamu.graphql.interface"; +import { CreateDatasetFromSnapshotMutation, CreateEmptyDatasetMutation } from "../api/kamu.graphql.interface"; import { Observable, Subject } from "rxjs"; import { DatasetApi } from "src/app/api/dataset.api"; import { Injectable } from "@angular/core"; diff --git a/src/app/dataset-view/additional-components/data-component/data-component.html b/src/app/dataset-view/additional-components/data-component/data.component.html similarity index 100% rename from src/app/dataset-view/additional-components/data-component/data-component.html rename to src/app/dataset-view/additional-components/data-component/data.component.html diff --git a/src/app/dataset-view/additional-components/data-component/data-component.spec.ts b/src/app/dataset-view/additional-components/data-component/data.component.spec.ts similarity index 98% rename from src/app/dataset-view/additional-components/data-component/data-component.spec.ts rename to src/app/dataset-view/additional-components/data-component/data.component.spec.ts index c93d2d6af..702026751 100644 --- a/src/app/dataset-view/additional-components/data-component/data-component.spec.ts +++ b/src/app/dataset-view/additional-components/data-component/data.component.spec.ts @@ -3,7 +3,7 @@ import { CdkAccordionModule } from "@angular/cdk/accordion"; import { ComponentFixture, TestBed, fakeAsync, flush, tick } from "@angular/core/testing"; import { MatIconModule } from "@angular/material/icon"; import { MatMenuModule } from "@angular/material/menu"; -import { DataComponent } from "./data-component"; +import { DataComponent } from "./data.component"; import { emitClickOnElementByDataTestId, findElementByDataTestId } from "src/app/common/base-test.helpers.spec"; import { AppDatasetSubscriptionsService } from "../../dataset.subscriptions.service"; import { mockDataUpdate, mockSqlErrorUpdate } from "../data-tabs.mock"; diff --git a/src/app/dataset-view/additional-components/data-component/data-component.ts b/src/app/dataset-view/additional-components/data-component/data.component.ts similarity index 99% rename from src/app/dataset-view/additional-components/data-component/data-component.ts rename to src/app/dataset-view/additional-components/data-component/data.component.ts index debcb96ee..26c749f29 100644 --- a/src/app/dataset-view/additional-components/data-component/data-component.ts +++ b/src/app/dataset-view/additional-components/data-component/data.component.ts @@ -15,7 +15,7 @@ import { Observable, map, tap } from "rxjs"; @Component({ selector: "app-data", - templateUrl: "./data-component.html", + templateUrl: "./data.component.html", changeDetection: ChangeDetectionStrategy.OnPush, }) export class DataComponent extends BaseComponent implements OnInit { diff --git a/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.sass b/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.sass deleted file mode 100644 index dd8e8badd..000000000 --- a/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.sass +++ /dev/null @@ -1,33 +0,0 @@ -:host - display: flex - align-items: center - min-height: 46px - flex-wrap: wrap - -.small-width - width: 75px - -button - border: 1px solid transparent - transition: background-color .3s ease-in-out - - &:hover:not([disabled]) - background-color: #C4C4C4 - -.btn-toggle - mat-icon - transform: rotate(00deg) - transition: transform .3s ease-in-out - - &.opened - border: 1px solid #000 - - mat-icon - transform: rotate(-90deg) - -.holder - opacity: 1 - transition: opacity .3s ease-in-out - - &.hidden - opacity: 0 diff --git a/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.scss b/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.scss new file mode 100644 index 000000000..28f6b6192 --- /dev/null +++ b/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.scss @@ -0,0 +1,43 @@ +:host { + display: flex; + align-items: center; + min-height: 46px; + flex-wrap: wrap; +} + +.small-width { + width: 75px; +} + +button { + border: 1px solid transparent; + transition: background-color .3s ease-in-out; + + &:hover:not([disabled]) { + background-color: #C4C4C4; + } +} + +.btn-toggle { + mat-icon { + transform: rotate(00deg); + transition: transform .3s ease-in-out; + } + + &.opened { + border: 1px solid #000; + + mat-icon { + transform: rotate(-90deg); + } + } +} + +.holder { + opacity: 1; + transition: opacity .3s ease-in-out; + + &.hidden { + opacity: 0; + } +} \ No newline at end of file diff --git a/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.ts b/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.ts index 39bbba7fd..45f143c09 100644 --- a/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.ts +++ b/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.ts @@ -5,7 +5,7 @@ import AppValues from "../../../../common/app.values"; @Component({ selector: "app-load-more", templateUrl: "./load-more.component.html", - styleUrls: ["./load-more.component.sass"], + styleUrls: ["./load-more.component.scss"], }) export class LoadMoreComponent { public rowsNumber: number = AppValues.SQL_QUERY_LIMIT; diff --git a/src/app/dataset-view/additional-components/data-tabs.mock.ts b/src/app/dataset-view/additional-components/data-tabs.mock.ts index 3b31fa0d8..704397397 100644 --- a/src/app/dataset-view/additional-components/data-tabs.mock.ts +++ b/src/app/dataset-view/additional-components/data-tabs.mock.ts @@ -1,4 +1,4 @@ -import { mockDatasetBasicsFragment } from "./../../search/mock.data"; +import { mockDatasetBasicsFragment } from "../../search/mock.data"; import { DatasetHistoryUpdate, DataSqlErrorUpdate, DataUpdate } from "../dataset.subscriptions.interface"; import { CommitEventToDatasetMutation, diff --git a/src/app/dataset-view/additional-components/history-component/history-component.spec.ts b/src/app/dataset-view/additional-components/history-component/history.component.spec.ts similarity index 96% rename from src/app/dataset-view/additional-components/history-component/history-component.spec.ts rename to src/app/dataset-view/additional-components/history-component/history.component.spec.ts index c65e86b52..ef5d93c4d 100644 --- a/src/app/dataset-view/additional-components/history-component/history-component.spec.ts +++ b/src/app/dataset-view/additional-components/history-component/history.component.spec.ts @@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from "@angular/core/testing"; import { first } from "rxjs/operators"; import { AppDatasetSubscriptionsService } from "../../dataset.subscriptions.service"; import { mockHistoryUpdate } from "../data-tabs.mock"; -import { HistoryComponent } from "./history-component"; +import { HistoryComponent } from "./history.component"; import { SharedTestModule } from "src/app/common/shared-test.module"; describe("HistoryComponent", () => { diff --git a/src/app/dataset-view/additional-components/history-component/history-component.ts b/src/app/dataset-view/additional-components/history-component/history.component.ts similarity index 100% rename from src/app/dataset-view/additional-components/history-component/history-component.ts rename to src/app/dataset-view/additional-components/history-component/history.component.ts diff --git a/src/app/dataset-view/additional-components/lineage-component/lineage-component.html b/src/app/dataset-view/additional-components/lineage-component/lineage.component.html similarity index 100% rename from src/app/dataset-view/additional-components/lineage-component/lineage-component.html rename to src/app/dataset-view/additional-components/lineage-component/lineage.component.html diff --git a/src/app/dataset-view/additional-components/lineage-component/lineage-component.spec.ts b/src/app/dataset-view/additional-components/lineage-component/lineage.component.spec.ts similarity index 93% rename from src/app/dataset-view/additional-components/lineage-component/lineage-component.spec.ts rename to src/app/dataset-view/additional-components/lineage-component/lineage.component.spec.ts index 281532a72..5bae43213 100644 --- a/src/app/dataset-view/additional-components/lineage-component/lineage-component.spec.ts +++ b/src/app/dataset-view/additional-components/lineage-component/lineage.component.spec.ts @@ -1,6 +1,6 @@ -import { mockNode } from "./../../../search/mock.data"; +import { mockNode } from "../../../search/mock.data"; import { ComponentFixture, TestBed } from "@angular/core/testing"; -import { LineageComponent } from "./lineage-component"; +import { LineageComponent } from "./lineage.component"; import { AppDatasetSubscriptionsService } from "../../dataset.subscriptions.service"; import { mockLineageUpdate } from "../data-tabs.mock"; import { first } from "rxjs/operators"; diff --git a/src/app/dataset-view/additional-components/lineage-component/lineage-component.ts b/src/app/dataset-view/additional-components/lineage-component/lineage.component.ts similarity index 98% rename from src/app/dataset-view/additional-components/lineage-component/lineage-component.ts rename to src/app/dataset-view/additional-components/lineage-component/lineage.component.ts index 5088a3a1d..ef2367c1b 100644 --- a/src/app/dataset-view/additional-components/lineage-component/lineage-component.ts +++ b/src/app/dataset-view/additional-components/lineage-component/lineage.component.ts @@ -16,7 +16,7 @@ import { AppDatasetSubscriptionsService } from "../../dataset.subscriptions.serv @Component({ selector: "app-lineage", - templateUrl: "./lineage-component.html", + templateUrl: "./lineage.component.html", changeDetection: ChangeDetectionStrategy.OnPush, }) export class LineageComponent extends BaseComponent implements OnInit { diff --git a/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/add-polling-source.component.sass b/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/add-polling-source.component.sass deleted file mode 100644 index 97cedfe71..000000000 --- a/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/add-polling-source.component.sass +++ /dev/null @@ -1,18 +0,0 @@ - -.container-step - margin-top: 40px - -.layout - max-width: 1200px - width: 100% - margin-right: auto - margin-left: auto - padding: 0 30px 100px - position: relative - -.stepper-header-overlay - position: absolute - top: 0 - left: 0 - width: 100% - height: 100% diff --git a/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/add-polling-source.component.scss b/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/add-polling-source.component.scss new file mode 100644 index 000000000..0d8f060e1 --- /dev/null +++ b/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/add-polling-source.component.scss @@ -0,0 +1,20 @@ +.container-step { + margin-top: 40px; +} + +.layout { + max-width: 1200px; + width: 100%; + margin-right: auto; + margin-left: auto; + padding: 0 30px 100px; + position: relative; +} + +.stepper-header-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/add-polling-source.component.ts b/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/add-polling-source.component.ts index 0a1bad723..7b5302907 100644 --- a/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/add-polling-source.component.ts +++ b/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/add-polling-source.component.ts @@ -2,7 +2,7 @@ /* eslint-disable @typescript-eslint/no-unsafe-assignment */ import { FetchKind, ReadKind, MergeKind, PreprocessStepValue } from "./add-polling-source-form.types"; import { FinalYamlModalComponent } from "../final-yaml-modal/final-yaml-modal.component"; -import { DatasetKind, SetPollingSource } from "./../../../../../api/kamu.graphql.interface"; +import { DatasetKind, SetPollingSource } from "../../../../../api/kamu.graphql.interface"; import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core"; import { FormArray, FormBuilder, FormGroup } from "@angular/forms"; import { NgbModalRef } from "@ng-bootstrap/ng-bootstrap"; @@ -22,7 +22,7 @@ import { MaybeNullOrUndefined } from "src/app/common/app.types"; @Component({ selector: "app-add-polling-source", templateUrl: "./add-polling-source.component.html", - styleUrls: ["./add-polling-source.component.sass"], + styleUrls: ["./add-polling-source.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, providers: [ { diff --git a/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/base-step/base-step.component.sass b/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/base-step/base-step.component.sass deleted file mode 100644 index 8b1378917..000000000 --- a/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/base-step/base-step.component.sass +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/base-step/base-step.component.ts b/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/base-step/base-step.component.ts index 2c83c69a2..ba895bea2 100644 --- a/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/base-step/base-step.component.ts +++ b/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/base-step/base-step.component.ts @@ -14,7 +14,6 @@ import { MaybeNull } from "src/app/common/app.types"; @Component({ selector: "app-base-step", templateUrl: "./base-step.component.html", - styleUrls: ["./base-step.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], }) diff --git a/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/prepare-step/prepare-step.component.sass b/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/prepare-step/prepare-step.component.sass deleted file mode 100644 index a1798c9a6..000000000 --- a/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/prepare-step/prepare-step.component.sass +++ /dev/null @@ -1,8 +0,0 @@ -.prepare-item - color: #0d6efd - text-decoration: none - -.buttons-section - position: absolute - top: 20px - right: 30px diff --git a/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/prepare-step/prepare-step.component.scss b/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/prepare-step/prepare-step.component.scss new file mode 100644 index 000000000..b22e11754 --- /dev/null +++ b/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/prepare-step/prepare-step.component.scss @@ -0,0 +1,10 @@ +.prepare-item { + color: #0d6efd; + text-decoration: none; +} + +.buttons-section { + position: absolute; + top: 20px; + right: 30px; +} \ No newline at end of file diff --git a/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/prepare-step/prepare-step.component.ts b/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/prepare-step/prepare-step.component.ts index 38150e082..83c92beb0 100644 --- a/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/prepare-step/prepare-step.component.ts +++ b/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/prepare-step/prepare-step.component.ts @@ -9,7 +9,7 @@ import { EditPollingSourceService } from "../../edit-polling-source.service"; @Component({ selector: "app-prepare-step", templateUrl: "./prepare-step.component.html", - styleUrls: ["./prepare-step.component.sass"], + styleUrls: ["./prepare-step.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }], }) diff --git a/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/preprocess-step/preprocess-step.component.sass b/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/preprocess-step/preprocess-step.component.sass deleted file mode 100644 index 3038fe238..000000000 --- a/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/preprocess-step/preprocess-step.component.sass +++ /dev/null @@ -1,7 +0,0 @@ -.container-queries - margin: 70px 0 0 50px - -.container-engine - margin: 85px 0 0 20px - display: flex - justify-content: center diff --git a/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/preprocess-step/preprocess-step.component.scss b/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/preprocess-step/preprocess-step.component.scss new file mode 100644 index 000000000..a73fe48a5 --- /dev/null +++ b/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/preprocess-step/preprocess-step.component.scss @@ -0,0 +1,9 @@ +.container-queries { + margin: 70px 0 0 50px; +} + +.container-engine { + margin: 85px 0 0 20px; + display: flex; + justify-content: center; +} \ No newline at end of file diff --git a/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/preprocess-step/preprocess-step.component.ts b/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/preprocess-step/preprocess-step.component.ts index b2cd32448..60e704505 100644 --- a/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/preprocess-step/preprocess-step.component.ts +++ b/src/app/dataset-view/additional-components/metadata-component/components/add-polling-source/steps/preprocess-step/preprocess-step.component.ts @@ -7,7 +7,7 @@ import { BaseComponent } from "src/app/common/base.component"; @Component({ selector: "app-preprocess-step", templateUrl: "./preprocess-step.component.html", - styleUrls: ["./preprocess-step.component.sass"], + styleUrls: ["./preprocess-step.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class PreprocessStepComponent extends BaseComponent implements OnInit { diff --git a/src/app/dataset-view/additional-components/metadata-component/components/final-yaml-modal/final-yaml-modal.component.sass b/src/app/dataset-view/additional-components/metadata-component/components/final-yaml-modal/final-yaml-modal.component.sass deleted file mode 100644 index d4e3bb63e..000000000 --- a/src/app/dataset-view/additional-components/metadata-component/components/final-yaml-modal/final-yaml-modal.component.sass +++ /dev/null @@ -1 +0,0 @@ -@import 'bootstrap/scss/bootstrap' diff --git a/src/app/dataset-view/additional-components/metadata-component/components/final-yaml-modal/final-yaml-modal.component.ts b/src/app/dataset-view/additional-components/metadata-component/components/final-yaml-modal/final-yaml-modal.component.ts index c6dbcb416..1f18d29db 100644 --- a/src/app/dataset-view/additional-components/metadata-component/components/final-yaml-modal/final-yaml-modal.component.ts +++ b/src/app/dataset-view/additional-components/metadata-component/components/final-yaml-modal/final-yaml-modal.component.ts @@ -8,7 +8,6 @@ import { DatasetCommitService } from "../../../overview-component/services/datas @Component({ selector: "app-final-yaml-modal", templateUrl: "./final-yaml-modal.component.html", - styleUrls: ["./final-yaml-modal.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class FinalYamlModalComponent extends BaseComponent { diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/array-keys-field/array-keys-field.component.sass b/src/app/dataset-view/additional-components/metadata-component/components/form-components/array-keys-field/array-keys-field.component.sass deleted file mode 100644 index f756d922a..000000000 --- a/src/app/dataset-view/additional-components/metadata-component/components/form-components/array-keys-field/array-keys-field.component.sass +++ /dev/null @@ -1,5 +0,0 @@ -.add-primary-key-button - outline: none - border: 0 - background: none - color: #0969da diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/array-keys-field/array-keys-field.component.scss b/src/app/dataset-view/additional-components/metadata-component/components/form-components/array-keys-field/array-keys-field.component.scss new file mode 100644 index 000000000..41ba175f1 --- /dev/null +++ b/src/app/dataset-view/additional-components/metadata-component/components/form-components/array-keys-field/array-keys-field.component.scss @@ -0,0 +1,6 @@ +.add-primary-key-button { + outline: none; + border: 0; + background: none; + color: #0969da; +} \ No newline at end of file diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/array-keys-field/array-keys-field.component.ts b/src/app/dataset-view/additional-components/metadata-component/components/form-components/array-keys-field/array-keys-field.component.ts index c0ef237d5..6d2242e0c 100644 --- a/src/app/dataset-view/additional-components/metadata-component/components/form-components/array-keys-field/array-keys-field.component.ts +++ b/src/app/dataset-view/additional-components/metadata-component/components/form-components/array-keys-field/array-keys-field.component.ts @@ -5,7 +5,7 @@ import { BaseField } from "../base-field"; @Component({ selector: "app-array-keys-field", templateUrl: "./array-keys-field.component.html", - styleUrls: ["./array-keys-field.component.sass"], + styleUrls: ["./array-keys-field.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class ArrayKeysFieldComponent extends BaseField { diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/cache-field/cache-field.component.sass b/src/app/dataset-view/additional-components/metadata-component/components/form-components/cache-field/cache-field.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/cache-field/cache-field.component.ts b/src/app/dataset-view/additional-components/metadata-component/components/form-components/cache-field/cache-field.component.ts index b4f97d276..9eae63072 100644 --- a/src/app/dataset-view/additional-components/metadata-component/components/form-components/cache-field/cache-field.component.ts +++ b/src/app/dataset-view/additional-components/metadata-component/components/form-components/cache-field/cache-field.component.ts @@ -5,7 +5,6 @@ import { BaseField } from "../base-field"; @Component({ selector: "app-cache-field", templateUrl: "./cache-field.component.html", - styleUrls: ["./cache-field.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class CacheFieldComponent extends BaseField { diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/checkbox-field/checkbox-field.component.sass b/src/app/dataset-view/additional-components/metadata-component/components/form-components/checkbox-field/checkbox-field.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/checkbox-field/checkbox-field.component.ts b/src/app/dataset-view/additional-components/metadata-component/components/form-components/checkbox-field/checkbox-field.component.ts index d68750608..e756bc52d 100644 --- a/src/app/dataset-view/additional-components/metadata-component/components/form-components/checkbox-field/checkbox-field.component.ts +++ b/src/app/dataset-view/additional-components/metadata-component/components/form-components/checkbox-field/checkbox-field.component.ts @@ -4,7 +4,6 @@ import { BaseField } from "../base-field"; @Component({ selector: "app-checkbox-field", templateUrl: "./checkbox-field.component.html", - styleUrls: ["./checkbox-field.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class CheckboxFieldComponent extends BaseField { diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/input-field/input-field.component.sass b/src/app/dataset-view/additional-components/metadata-component/components/form-components/input-field/input-field.component.sass deleted file mode 100644 index 7dcc57b85..000000000 --- a/src/app/dataset-view/additional-components/metadata-component/components/form-components/input-field/input-field.component.sass +++ /dev/null @@ -1,2 +0,0 @@ -input - text-overflow: ellipsis diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/input-field/input-field.component.scss b/src/app/dataset-view/additional-components/metadata-component/components/form-components/input-field/input-field.component.scss new file mode 100644 index 000000000..7a07be6ca --- /dev/null +++ b/src/app/dataset-view/additional-components/metadata-component/components/form-components/input-field/input-field.component.scss @@ -0,0 +1,3 @@ +input { + text-overflow: ellipsis; +} \ No newline at end of file diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/input-field/input-field.component.ts b/src/app/dataset-view/additional-components/metadata-component/components/form-components/input-field/input-field.component.ts index 3fb2d73bf..d58ce194a 100644 --- a/src/app/dataset-view/additional-components/metadata-component/components/form-components/input-field/input-field.component.ts +++ b/src/app/dataset-view/additional-components/metadata-component/components/form-components/input-field/input-field.component.ts @@ -4,7 +4,7 @@ import { BaseField } from "../base-field"; @Component({ selector: "app-input-field", templateUrl: "./input-field.component.html", - styleUrls: ["./input-field.component.sass"], + styleUrls: ["./input-field.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class InputFieldComponent extends BaseField { diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/key-value-field/key-value-field.component.sass b/src/app/dataset-view/additional-components/metadata-component/components/form-components/key-value-field/key-value-field.component.sass deleted file mode 100644 index f468be338..000000000 --- a/src/app/dataset-view/additional-components/metadata-component/components/form-components/key-value-field/key-value-field.component.sass +++ /dev/null @@ -1,5 +0,0 @@ -.add-header-button - outline: none - border: 0 - background: none - color: #0969da diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/key-value-field/key-value-field.component.scss b/src/app/dataset-view/additional-components/metadata-component/components/form-components/key-value-field/key-value-field.component.scss new file mode 100644 index 000000000..49c6f1e80 --- /dev/null +++ b/src/app/dataset-view/additional-components/metadata-component/components/form-components/key-value-field/key-value-field.component.scss @@ -0,0 +1,6 @@ +.add-header-button { + outline: none; + border: 0; + background: none; + color: #0969da; +} \ No newline at end of file diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/key-value-field/key-value-field.component.ts b/src/app/dataset-view/additional-components/metadata-component/components/form-components/key-value-field/key-value-field.component.ts index e51abcab5..dd0efcb48 100644 --- a/src/app/dataset-view/additional-components/metadata-component/components/form-components/key-value-field/key-value-field.component.ts +++ b/src/app/dataset-view/additional-components/metadata-component/components/form-components/key-value-field/key-value-field.component.ts @@ -5,7 +5,7 @@ import { BaseField } from "../base-field"; @Component({ selector: "app-key-value-field", templateUrl: "./key-value-field.component.html", - styleUrls: ["./key-value-field.component.sass"], + styleUrls: ["./key-value-field.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class KeyValueFieldComponent extends BaseField { diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/order-field/order-field.component.sass b/src/app/dataset-view/additional-components/metadata-component/components/form-components/order-field/order-field.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/order-field/order-field.component.ts b/src/app/dataset-view/additional-components/metadata-component/components/form-components/order-field/order-field.component.ts index cabc16fc3..6998633fc 100644 --- a/src/app/dataset-view/additional-components/metadata-component/components/form-components/order-field/order-field.component.ts +++ b/src/app/dataset-view/additional-components/metadata-component/components/form-components/order-field/order-field.component.ts @@ -7,7 +7,6 @@ import { SourceOrder } from "../../add-polling-source/process-form.service.types @Component({ selector: "app-order-field", templateUrl: "./order-field.component.html", - styleUrls: ["./order-field.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class OrderFieldComponent extends BaseField implements OnInit { diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/schema-field/schema-field.component.sass b/src/app/dataset-view/additional-components/metadata-component/components/form-components/schema-field/schema-field.component.sass deleted file mode 100644 index 3d075b044..000000000 --- a/src/app/dataset-view/additional-components/metadata-component/components/form-components/schema-field/schema-field.component.sass +++ /dev/null @@ -1,54 +0,0 @@ -@import src/assets/styles/var - -.fs-14 - font-size: 14px!important - -#schema-field * - height: 34px -.add-button - border: 1px solid grey - border-radius: 6px - -table - width: 100% - th.mat-header-cell - padding-left: 14px - & .mat-cell - border: 1px solid - color: $app-color-fg-default - padding: 0px - border-color: $app-color-border-default - input - outline: none - border: 0 - padding-left: 10px - padding-right: 10px - width: 100% - - .mat-header-cell - color: $app-color-fg-default - border: 1px solid - font-size: 15px - text-align: left - background: $app-aliceBlue - border-color: $app-color-border-default - .custom-cell - width: 100% - text-align: center - line-height: 155% - padding: 5px - - .icon - vertical-align: text-top - &:hover - cursor: pointer - - input.ng-invalid.ng-touched, input.ng-invalid.ng-dirty - background-color: #dc3545 - color: white - - .order - border: 1px solid black - height: 20px!important - width: 20px!important - border-radius: 50% diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/schema-field/schema-field.component.scss b/src/app/dataset-view/additional-components/metadata-component/components/form-components/schema-field/schema-field.component.scss new file mode 100644 index 000000000..1c7f96028 --- /dev/null +++ b/src/app/dataset-view/additional-components/metadata-component/components/form-components/schema-field/schema-field.component.scss @@ -0,0 +1,72 @@ +@import 'var'; + +.fs-14 { + font-size: 14px !important; +} + +#schema-field * { + height: 34px; +} + +.add-button { + border: 1px solid grey; + border-radius: 6px; +} + +table { + width: 100%; + + th.mat-header-cell { + padding-left: 14px; + } + + & .mat-cell { + border: 1px solid $app-color-border-default; + color: $app-color-fg-default; + padding: 0; + + input { + outline: none; + border: 0; + padding-left: 10px; + padding-right: 10px; + width: 100%; + } + } + + .mat-header-cell { + color: $app-color-fg-default; + border: 1px solid $app-color-border-default; + font-size: 15px; + text-align: left; + background: $app-aliceBlue; + } + + .custom-cell { + width: 100%; + text-align: center; + line-height: 155%; + padding: 5px; + } + + .icon { + vertical-align: text-top; + + &:hover { + cursor: pointer; + } + } + + input.ng-invalid.ng-touched, + input.ng-invalid.ng-dirty { + background-color: #dc3545; + color: white; + } + + .order { + border: 1px solid black; + height: 20px !important; + width: 20px !important; + border-radius: 50%; + } +} \ No newline at end of file diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/schema-field/schema-field.component.ts b/src/app/dataset-view/additional-components/metadata-component/components/form-components/schema-field/schema-field.component.ts index a33deb57b..def292ab9 100644 --- a/src/app/dataset-view/additional-components/metadata-component/components/form-components/schema-field/schema-field.component.ts +++ b/src/app/dataset-view/additional-components/metadata-component/components/form-components/schema-field/schema-field.component.ts @@ -1,4 +1,4 @@ -import { MaybeNull } from "./../../../../../../common/app.types"; +import { MaybeNull } from "../../../../../../common/app.types"; import { AfterViewInit, ChangeDetectionStrategy, Component, QueryList, ViewChild, ViewChildren } from "@angular/core"; import { BaseField } from "../base-field"; import { AbstractControl, FormArray, FormControl, FormGroup, Validators } from "@angular/forms"; @@ -17,7 +17,7 @@ export interface SchemaType { @Component({ selector: "app-schema-field", templateUrl: "./schema-field.component.html", - styleUrls: ["./schema-field.component.sass"], + styleUrls: ["./schema-field.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SchemaFieldComponent extends BaseField implements AfterViewInit { diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/select-date-format-field/select-date-format-field.component.sass b/src/app/dataset-view/additional-components/metadata-component/components/form-components/select-date-format-field/select-date-format-field.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/select-date-format-field/select-date-format-field.component.ts b/src/app/dataset-view/additional-components/metadata-component/components/form-components/select-date-format-field/select-date-format-field.component.ts index ea3d76530..189530ccf 100644 --- a/src/app/dataset-view/additional-components/metadata-component/components/form-components/select-date-format-field/select-date-format-field.component.ts +++ b/src/app/dataset-view/additional-components/metadata-component/components/form-components/select-date-format-field/select-date-format-field.component.ts @@ -7,7 +7,6 @@ import { RxwebValidators } from "@rxweb/reactive-form-validators"; @Component({ selector: "app-select-date-format-field", templateUrl: "./select-date-format-field.component.html", - styleUrls: ["./select-date-format-field.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SelectDateFormatFieldComponent extends BaseField implements OnInit { diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/select-kind-field/select-kind-field.component.sass b/src/app/dataset-view/additional-components/metadata-component/components/form-components/select-kind-field/select-kind-field.component.sass deleted file mode 100644 index e2ea09434..000000000 --- a/src/app/dataset-view/additional-components/metadata-component/components/form-components/select-kind-field/select-kind-field.component.sass +++ /dev/null @@ -1,2 +0,0 @@ -.tooltip - opacity: 1!important diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/select-kind-field/select-kind-field.component.scss b/src/app/dataset-view/additional-components/metadata-component/components/form-components/select-kind-field/select-kind-field.component.scss new file mode 100644 index 000000000..fbfb42e0a --- /dev/null +++ b/src/app/dataset-view/additional-components/metadata-component/components/form-components/select-kind-field/select-kind-field.component.scss @@ -0,0 +1,3 @@ +.tooltip { + opacity: 1 !important; +} diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/select-kind-field/select-kind-field.component.ts b/src/app/dataset-view/additional-components/metadata-component/components/form-components/select-kind-field/select-kind-field.component.ts index 1bc753f4e..83363f16e 100644 --- a/src/app/dataset-view/additional-components/metadata-component/components/form-components/select-kind-field/select-kind-field.component.ts +++ b/src/app/dataset-view/additional-components/metadata-component/components/form-components/select-kind-field/select-kind-field.component.ts @@ -1,5 +1,5 @@ import { FormGroup } from "@angular/forms"; -import { RadioControlType } from "./../../add-polling-source/form-control.source"; +import { RadioControlType } from "../../add-polling-source/form-control.source"; import { ChangeDetectionStrategy, Component, Input } from "@angular/core"; import { NgbTooltipConfig } from "@ng-bootstrap/ng-bootstrap"; import AppValues from "src/app/common/app.values"; @@ -7,7 +7,7 @@ import AppValues from "src/app/common/app.values"; @Component({ selector: "app-select-kind-field", templateUrl: "./select-kind-field.component.html", - styleUrls: ["./select-kind-field.component.sass"], + styleUrls: ["./select-kind-field.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgbTooltipConfig], }) diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/typeahead-field/typeahead-field.component.sass b/src/app/dataset-view/additional-components/metadata-component/components/form-components/typeahead-field/typeahead-field.component.sass deleted file mode 100644 index 8b1378917..000000000 --- a/src/app/dataset-view/additional-components/metadata-component/components/form-components/typeahead-field/typeahead-field.component.sass +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/app/dataset-view/additional-components/metadata-component/components/form-components/typeahead-field/typeahead-field.component.ts b/src/app/dataset-view/additional-components/metadata-component/components/form-components/typeahead-field/typeahead-field.component.ts index b60ecd3f0..ab0dcca4f 100644 --- a/src/app/dataset-view/additional-components/metadata-component/components/form-components/typeahead-field/typeahead-field.component.ts +++ b/src/app/dataset-view/additional-components/metadata-component/components/form-components/typeahead-field/typeahead-field.component.ts @@ -6,7 +6,6 @@ import { debounceTime, distinctUntilChanged, map, filter } from "rxjs/operators" @Component({ selector: "app-typeahead-field", templateUrl: "./typeahead-field.component.html", - styleUrls: ["./typeahead-field.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, }) diff --git a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/components/engine-select/engine-select.component.sass b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/components/engine-select/engine-select.component.sass deleted file mode 100644 index c73ff2002..000000000 --- a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/components/engine-select/engine-select.component.sass +++ /dev/null @@ -1,58 +0,0 @@ -.dropdown - box-sizing: border-box - position: relative - width: 350px - height: 35px - input - position: absolute - top: 0 - left: 0 - width: 100% - height: 100% - cursor: pointer - outline: none - border-radius: 6px - padding-left: 55px - border: 1px solid #ced4da - &:focus - border: 1px solid #86b7fe - box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) - .selectedImage - position: absolute - top: 8px - left: 16px - max-width: 30px - &::before - content: '' - position: absolute - width: 6px - height: 6px - border: 2px solid #333 - right: 20px - top: 15px - z-index: 1000 - border-top: 2px solid #fff - border-right: 2px solid #fff - transform: rotate(-45deg) - transition: 0.5s - pointer-events: none - .option - position: absolute - top: 37px - width: 350px - background: #fff - padding: 6px 10px - border-radius: 5px - overflow: hidden - border: 1px solid #ced4da - div - padding: 10px 10px - cursor: pointer - display: flex - align-items: center - img - margin-right: 10px - max-width: 30px - &:hover - background: #62baea - color: #fff diff --git a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/components/engine-select/engine-select.component.scss b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/components/engine-select/engine-select.component.scss new file mode 100644 index 000000000..931caab80 --- /dev/null +++ b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/components/engine-select/engine-select.component.scss @@ -0,0 +1,75 @@ +.dropdown { + box-sizing: border-box; + position: relative; + width: 350px; + height: 35px; + + input { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + cursor: pointer; + outline: none; + border-radius: 6px; + padding-left: 55px; + border: 1px solid #ced4da; + + &:focus { + border: 1px solid #86b7fe; + box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); + } + } + + .selectedImage { + position: absolute; + top: 8px; + left: 16px; + max-width: 30px; + } + + &::before { + content: ''; + position: absolute; + width: 6px; + height: 6px; + border: 2px solid #333; + right: 20px; + top: 15px; + z-index: 1000; + border-top: 2px solid #fff; + border-right: 2px solid #fff; + transform: rotate(-45deg); + transition: 0.5s; + pointer-events: none; + } + + .option { + position: absolute; + top: 37px; + width: 350px; + background: #fff; + padding: 6px 10px; + border-radius: 5px; + overflow: hidden; + border: 1px solid #ced4da; + + div { + padding: 10px 10px; + cursor: pointer; + display: flex; + align-items: center; + + img { + margin-right: 10px; + max-width: 30px; + } + + &:hover { + background: #62baea; + color: #fff; + } + } + } +} \ No newline at end of file diff --git a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/components/engine-select/engine-select.component.ts b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/components/engine-select/engine-select.component.ts index 8a38b2222..37b01bbd5 100644 --- a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/components/engine-select/engine-select.component.ts +++ b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/components/engine-select/engine-select.component.ts @@ -17,7 +17,7 @@ import { EventPropertyLogo } from "src/app/dataset-block/metadata-block/componen @Component({ selector: "app-engine-select", templateUrl: "./engine-select.component.html", - styleUrls: ["./engine-select.component.sass"], + styleUrls: ["./engine-select.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class EngineSelectComponent implements OnInit { diff --git a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/engine-section.component.sass b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/engine-section.component.sass deleted file mode 100644 index b5ff07059..000000000 --- a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/engine-section.component.sass +++ /dev/null @@ -1,3 +0,0 @@ - -input - text-overflow: ellipsis diff --git a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/engine-section.component.scss b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/engine-section.component.scss new file mode 100644 index 000000000..7a07be6ca --- /dev/null +++ b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/engine-section.component.scss @@ -0,0 +1,3 @@ +input { + text-overflow: ellipsis; +} \ No newline at end of file diff --git a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/engine-section.component.ts b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/engine-section.component.ts index 6313a233d..565f3ef1a 100644 --- a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/engine-section.component.ts +++ b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/engine-section/engine-section.component.ts @@ -15,7 +15,7 @@ import { EngineService } from "src/app/services/engine.service"; @Component({ selector: "app-engine-section", templateUrl: "./engine-section.component.html", - styleUrls: ["./engine-section.component.sass"], + styleUrls: ["./engine-section.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class EngineSectionComponent extends BaseComponent implements OnInit { @@ -66,8 +66,7 @@ export class EngineSectionComponent extends BaseComponent implements OnInit { private initCurrentEngine(): void { if (this.currentSetTransformEvent?.engine) { - const currentEngine: string = this.currentSetTransformEvent.engine; - this.selectedEngine = currentEngine; + this.selectedEngine = this.currentSetTransformEvent.engine; this.onSelectType(this.selectedEngine.toUpperCase().toLowerCase()); } } diff --git a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/queries-section/queries-section.component.sass b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/queries-section/queries-section.component.sass deleted file mode 100644 index 309b181cc..000000000 --- a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/queries-section/queries-section.component.sass +++ /dev/null @@ -1,24 +0,0 @@ -input - text-overflow: ellipsis - -.w-200 - width: 300px !important - -.block-query - padding: 15px 30px 30px - border: 1px solid #dee2e6 - border-radius: 10px - -.button-style - background-image: linear-gradient(#f7f8fa ,#e7e9ec) - border-color: #adb1b8 #a2a6ac #8d9096 - border-style: solid - border-width: 1px - border-radius: 3px - box-shadow: rgba(255,255,255,.6) 0 1px 0 inset - box-sizing: border-box - cursor: pointer - display: inline-block - padding: 3px 10px - &:hover - background-image: linear-gradient(#ebeef6 ,#c5c8cc) diff --git a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/queries-section/queries-section.component.scss b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/queries-section/queries-section.component.scss new file mode 100644 index 000000000..10248a117 --- /dev/null +++ b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/queries-section/queries-section.component.scss @@ -0,0 +1,30 @@ +input { + text-overflow: ellipsis; +} + +.w-200 { + width: 300px !important; +} + +.block-query { + padding: 15px 30px 30px; + border: 1px solid #dee2e6; + border-radius: 10px; +} + +.button-style { + background-image: linear-gradient(#f7f8fa, #e7e9ec); + border-color: #adb1b8 #a2a6ac #8d9096; + border-style: solid; + border-width: 1px; + border-radius: 3px; + box-shadow: rgba(255, 255, 255, .6) 0 1px 0 inset; + box-sizing: border-box; + cursor: pointer; + display: inline-block; + padding: 3px 10px; + + &:hover { + background-image: linear-gradient(#ebeef6, #c5c8cc); + } +} \ No newline at end of file diff --git a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/queries-section/queries-section.component.ts b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/queries-section/queries-section.component.ts index 8c2e1eab5..64071900a 100644 --- a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/queries-section/queries-section.component.ts +++ b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/queries-section/queries-section.component.ts @@ -7,7 +7,7 @@ import { sqlEditorOptions } from "src/app/dataset-block/metadata-block/component @Component({ selector: "app-queries-section", templateUrl: "./queries-section.component.html", - styleUrls: ["./queries-section.component.sass"], + styleUrls: ["./queries-section.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class QueriesSectionComponent { diff --git a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/search-section/search-section.component.sass b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/search-section/search-section.component.sass deleted file mode 100644 index 33cc1ea72..000000000 --- a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/search-section/search-section.component.sass +++ /dev/null @@ -1,38 +0,0 @@ - -.inner-btn - position: absolute - width: 10px - font-weight: 550 - border: none - background-color: transparent - line-height: 35px - left: calc(100% - 30px) - &:hover - color: blue -.node-name-block - width: 335px - white-space: nowrap - .node-link - text-overflow: ellipsis - overflow: hidden - .node-name - white-space: nowrap - text-decoration: none - &:hover - text-decoration: underline - -.example-tree-invisible - display: none - -.tree ul, -.tree li - margin-top: 0 - margin-bottom: 0 - list-style-type: none - -.tree .mat-nested-tree-node div[role=group] - padding-left: 40px - -.tree div[role=group] > .mat-tree-node - padding-left: 25px - padding-bottom: 5px diff --git a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/search-section/search-section.component.scss b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/search-section/search-section.component.scss new file mode 100644 index 000000000..b4f5e6213 --- /dev/null +++ b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/search-section/search-section.component.scss @@ -0,0 +1,52 @@ +.inner-btn { + position: absolute; + width: 10px; + font-weight: 550; + border: none; + background-color: transparent; + line-height: 35px; + left: calc(100% - 30px); + + &:hover { + color: blue; + } +} + +.node-name-block { + width: 335px; + white-space: nowrap; + + .node-link { + text-overflow: ellipsis; + overflow: hidden; + } + + .node-name { + white-space: nowrap; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } +} + +.example-tree-invisible { + display: none; +} + +.tree ul, +.tree li { + margin-top: 0; + margin-bottom: 0; + list-style-type: none; +} + +.tree .mat-nested-tree-node div[role=group] { + padding-left: 40px; +} + +.tree div[role=group] > .mat-tree-node { + padding-left: 25px; + padding-bottom: 5px; +} \ No newline at end of file diff --git a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/search-section/search-section.component.ts b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/search-section/search-section.component.ts index 70e221bc4..cdfaa5a59 100644 --- a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/search-section/search-section.component.ts +++ b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/components/search-section/search-section.component.ts @@ -19,7 +19,7 @@ import { NavigationService } from "src/app/services/navigation.service"; @Component({ selector: "app-search-section", templateUrl: "./search-section.component.html", - styleUrls: ["./search-section.component.sass"], + styleUrls: ["./search-section.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SearchSectionComponent extends BaseComponent { @@ -47,13 +47,13 @@ export class SearchSectionComponent extends BaseComponent { }; public formatter(x: DatasetAutocompleteItem | string): string { - return typeof x !== "string" ? (x.dataset.name ) : x; + return typeof x !== "string" ? x.dataset.name : x; } public onSelectItem(event: NgbTypeaheadSelectItemEvent): void { const value = event.item as DatasetAutocompleteItem; - const id = value.dataset.id ; - const name = value.dataset.name ; + const id = value.dataset.id; + const name = value.dataset.name; const inputDataset = JSON.stringify({ id, name, @@ -68,7 +68,7 @@ export class SearchSectionComponent extends BaseComponent { data.datasets.byId.metadata.currentSchema, ); this.TREE_DATA.push({ - name: value.dataset.name , + name: value.dataset.name, children: schema?.fields, owner, }); diff --git a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/set-transform.component.sass b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/set-transform.component.sass deleted file mode 100644 index 3eb850fcf..000000000 --- a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/set-transform.component.sass +++ /dev/null @@ -1,20 +0,0 @@ - -.section-buttons - margin: 55px 100px 50px 0 - .width-custom - width: 100px - height: 36px - -.error-block - display: flex - justify-content: center - height: 80vh - align-items: center - -@media (max-width: 1335px) - .queries - margin-top: 30px - .left-section - display: flex - flex-direction: column - align-items: center diff --git a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/set-transform.component.scss b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/set-transform.component.scss new file mode 100644 index 000000000..76e97c486 --- /dev/null +++ b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/set-transform.component.scss @@ -0,0 +1,28 @@ +.section-buttons { + margin: 55px 100px 50px 0; + + .width-custom { + width: 100px; + height: 36px; + } +} + +.error-block { + display: flex; + justify-content: center; + height: 80vh; + align-items: center; +} + +@media (max-width: 1335px) { + .queries { + margin-top: 30px; + } + .left-section { + display: flex; + flex-direction: column; + align-items: center; + } +} + +; \ No newline at end of file diff --git a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/set-transform.component.ts b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/set-transform.component.ts index f372b9085..c028dc96c 100644 --- a/src/app/dataset-view/additional-components/metadata-component/components/set-transform/set-transform.component.ts +++ b/src/app/dataset-view/additional-components/metadata-component/components/set-transform/set-transform.component.ts @@ -1,4 +1,4 @@ -import { DatasetBasicsFragment, DatasetKind, TransformInput } from "./../../../../../api/kamu.graphql.interface"; +import { DatasetBasicsFragment, DatasetKind, TransformInput } from "../../../../../api/kamu.graphql.interface"; import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core"; import { NgbModalRef } from "@ng-bootstrap/ng-bootstrap"; import { MatTreeNestedDataSource } from "@angular/material/tree"; @@ -16,7 +16,7 @@ import { BaseMainEventComponent } from "../base-main-event.component"; @Component({ selector: "app-set-transform", templateUrl: "./set-transform.component.html", - styleUrls: ["./set-transform.component.sass"], + styleUrls: ["./set-transform.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SetTransformComponent extends BaseMainEventComponent implements OnInit { diff --git a/src/app/dataset-view/additional-components/metadata-component/components/stepper-navigation/stepper-navigation.component.sass b/src/app/dataset-view/additional-components/metadata-component/components/stepper-navigation/stepper-navigation.component.sass deleted file mode 100644 index 9d0a7d0a4..000000000 --- a/src/app/dataset-view/additional-components/metadata-component/components/stepper-navigation/stepper-navigation.component.sass +++ /dev/null @@ -1,19 +0,0 @@ -@import 'bootstrap/scss/bootstrap' - -.button-save - background: #2c974b - border-color: rgba(27, 31, 36, 0.15) - color: #ffffff - position: relative - display: inline-block - padding: 5px 16px - font-size: 14px - white-space: nowrap - vertical-align: middle - cursor: pointer - border-radius: 6px - &:hover - background: #3fbe63 - transition: .2s cubic-bezier(0.3, 0, 0.5, 1) - &:disabled - background: #69e18b diff --git a/src/app/dataset-view/additional-components/metadata-component/components/stepper-navigation/stepper-navigation.component.scss b/src/app/dataset-view/additional-components/metadata-component/components/stepper-navigation/stepper-navigation.component.scss new file mode 100644 index 000000000..79c3374e8 --- /dev/null +++ b/src/app/dataset-view/additional-components/metadata-component/components/stepper-navigation/stepper-navigation.component.scss @@ -0,0 +1,24 @@ +@import 'bootstrap/scss/bootstrap'; + +.button-save { + background: #2c974b; + border-color: rgba(27, 31, 36, 0.15); + color: #ffffff; + position: relative; + display: inline-block; + padding: 5px 16px; + font-size: 14px; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + border-radius: 6px; + + &:hover { + background: #3fbe63; + transition: .2s cubic-bezier(0.3, 0, 0.5, 1); + } + + &:disabled { + background: #69e18b; + } +} \ No newline at end of file diff --git a/src/app/dataset-view/additional-components/metadata-component/components/stepper-navigation/stepper-navigation.component.ts b/src/app/dataset-view/additional-components/metadata-component/components/stepper-navigation/stepper-navigation.component.ts index 1496fad04..1f50ca060 100644 --- a/src/app/dataset-view/additional-components/metadata-component/components/stepper-navigation/stepper-navigation.component.ts +++ b/src/app/dataset-view/additional-components/metadata-component/components/stepper-navigation/stepper-navigation.component.ts @@ -5,7 +5,7 @@ import { SetPollingSourceSection } from "src/app/shared/shared.types"; @Component({ selector: "app-stepper-navigation", templateUrl: "./stepper-navigation.component.html", - styleUrls: ["./stepper-navigation.component.sass"], + styleUrls: ["./stepper-navigation.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class StepperNavigationComponent { diff --git a/src/app/dataset-view/additional-components/metadata-component/metadata-component.spec.ts b/src/app/dataset-view/additional-components/metadata-component/metadata.component.spec.ts similarity index 96% rename from src/app/dataset-view/additional-components/metadata-component/metadata-component.spec.ts rename to src/app/dataset-view/additional-components/metadata-component/metadata.component.spec.ts index c4d8c35d7..7cd4f0ea0 100644 --- a/src/app/dataset-view/additional-components/metadata-component/metadata-component.spec.ts +++ b/src/app/dataset-view/additional-components/metadata-component/metadata.component.spec.ts @@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from "@angular/core/testing"; import { MetadataSchemaUpdate } from "../../dataset.subscriptions.interface"; import { AppDatasetSubscriptionsService } from "../../dataset.subscriptions.service"; import { mockMetadataSchemaUpdate } from "../data-tabs.mock"; -import { MetadataComponent } from "./metadata-component"; +import { MetadataComponent } from "./metadata.component"; import { ChangeDetectionStrategy } from "@angular/core"; import { mockDatasetBasicsFragment } from "src/app/search/mock.data"; import { BlockRowDataComponent } from "src/app/dataset-block/metadata-block/components/block-row-data/block-row-data.component"; @@ -89,7 +89,7 @@ describe("MetadataComponent", () => { component.navigateToEditPollingSource(); expect(navigateToAddPollingSourceSpy).toHaveBeenCalledWith({ accountName: mockDatasetBasicsFragment.owner.name, - datasetName: mockDatasetBasicsFragment.name , + datasetName: mockDatasetBasicsFragment.name, }); }); @@ -98,7 +98,7 @@ describe("MetadataComponent", () => { component.navigateToEditSetTransform(); expect(navigateToSetTransformSpy).toHaveBeenCalledWith({ accountName: mockDatasetBasicsFragment.owner.name, - datasetName: mockDatasetBasicsFragment.name , + datasetName: mockDatasetBasicsFragment.name, }); }); }); diff --git a/src/app/dataset-view/additional-components/metadata-component/metadata-component.ts b/src/app/dataset-view/additional-components/metadata-component/metadata.component.ts similarity index 97% rename from src/app/dataset-view/additional-components/metadata-component/metadata-component.ts rename to src/app/dataset-view/additional-components/metadata-component/metadata.component.ts index d95f2c556..0d59870c7 100644 --- a/src/app/dataset-view/additional-components/metadata-component/metadata-component.ts +++ b/src/app/dataset-view/additional-components/metadata-component/metadata.component.ts @@ -1,5 +1,5 @@ -import { DataHelpers } from "./../../../common/data.helpers"; -import { DatasetKind } from "./../../../api/kamu.graphql.interface"; +import { DataHelpers } from "../../../common/data.helpers"; +import { DatasetKind } from "../../../api/kamu.graphql.interface"; import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from "@angular/core"; import { DatasetSchema } from "../../../interface/dataset.interface"; import AppValues from "../../../common/app.values"; diff --git a/src/app/dataset-view/additional-components/overview-component/components/edit-details-modal/edit-details-modal.component.sass b/src/app/dataset-view/additional-components/overview-component/components/edit-details-modal/edit-details-modal.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-view/additional-components/overview-component/components/edit-details-modal/edit-details-modal.component.ts b/src/app/dataset-view/additional-components/overview-component/components/edit-details-modal/edit-details-modal.component.ts index bac00075d..50e855b29 100644 --- a/src/app/dataset-view/additional-components/overview-component/components/edit-details-modal/edit-details-modal.component.ts +++ b/src/app/dataset-view/additional-components/overview-component/components/edit-details-modal/edit-details-modal.component.ts @@ -16,7 +16,6 @@ import { DatasetCommitService } from "../../services/dataset-commit.service"; @Component({ selector: "app-details-modal", templateUrl: "./edit-details-modal.component.html", - styleUrls: ["./edit-details-modal.component.sass"], }) export class EditDetailsModalComponent extends BaseComponent implements OnInit { @Input() public currentState?: { diff --git a/src/app/dataset-view/additional-components/overview-component/components/edit-license-modal/edit-license-modal.component.sass b/src/app/dataset-view/additional-components/overview-component/components/edit-license-modal/edit-license-modal.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-view/additional-components/overview-component/components/edit-license-modal/edit-license-modal.component.ts b/src/app/dataset-view/additional-components/overview-component/components/edit-license-modal/edit-license-modal.component.ts index 4b03d1e3c..bf638ee62 100644 --- a/src/app/dataset-view/additional-components/overview-component/components/edit-license-modal/edit-license-modal.component.ts +++ b/src/app/dataset-view/additional-components/overview-component/components/edit-license-modal/edit-license-modal.component.ts @@ -18,7 +18,6 @@ import { DatasetCommitService } from "../../services/dataset-commit.service"; @Component({ selector: "app-edit-license-modal", templateUrl: "./edit-license-modal.component.html", - styleUrls: ["./edit-license-modal.component.sass"], }) export class EditLicenseModalComponent extends BaseComponent implements OnInit { @Input() public datasetBasics?: DatasetBasicsFragment; diff --git a/src/app/dataset-view/additional-components/overview-component/components/edit-watermark-modal/edit-watermark-modal.component.sass b/src/app/dataset-view/additional-components/overview-component/components/edit-watermark-modal/edit-watermark-modal.component.sass deleted file mode 100644 index 1187a7189..000000000 --- a/src/app/dataset-view/additional-components/overview-component/components/edit-watermark-modal/edit-watermark-modal.component.sass +++ /dev/null @@ -1,5 +0,0 @@ -.custom-picker - z-index: 9999!important - -.w-65 - width: 67% !important diff --git a/src/app/dataset-view/additional-components/overview-component/components/edit-watermark-modal/edit-watermark-modal.component.scss b/src/app/dataset-view/additional-components/overview-component/components/edit-watermark-modal/edit-watermark-modal.component.scss new file mode 100644 index 000000000..e46f5141b --- /dev/null +++ b/src/app/dataset-view/additional-components/overview-component/components/edit-watermark-modal/edit-watermark-modal.component.scss @@ -0,0 +1,7 @@ +.custom-picker { + z-index: 9999 !important; +} + +.w-65 { + width: 67% !important; +} \ No newline at end of file diff --git a/src/app/dataset-view/additional-components/overview-component/components/edit-watermark-modal/edit-watermark-modal.component.ts b/src/app/dataset-view/additional-components/overview-component/components/edit-watermark-modal/edit-watermark-modal.component.ts index aa1107604..6fa9777f7 100644 --- a/src/app/dataset-view/additional-components/overview-component/components/edit-watermark-modal/edit-watermark-modal.component.ts +++ b/src/app/dataset-view/additional-components/overview-component/components/edit-watermark-modal/edit-watermark-modal.component.ts @@ -1,4 +1,4 @@ -import { MaybeNullOrUndefined } from "./../../../../../common/app.types"; +import { MaybeNullOrUndefined } from "../../../../../common/app.types"; import { ChangeDetectionStrategy, Component, Input, OnInit } from "@angular/core"; import { OWL_DATE_TIME_FORMATS } from "@danielmoncada/angular-datetime-picker"; import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; @@ -12,7 +12,7 @@ import { DatasetCommitService } from "../../services/dataset-commit.service"; @Component({ selector: "app-edit-watermark-modal", templateUrl: "./edit-watermark-modal.component.html", - styleUrls: ["./edit-watermark-modal.component.sass"], + styleUrls: ["./edit-watermark-modal.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: OWL_DATE_TIME_FORMATS, useValue: MY_MOMENT_FORMATS }], }) diff --git a/src/app/dataset-view/additional-components/overview-component/components/readme-section/readme-section.component.sass b/src/app/dataset-view/additional-components/overview-component/components/readme-section/readme-section.component.sass deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/app/dataset-view/additional-components/overview-component/components/readme-section/readme-section.component.ts b/src/app/dataset-view/additional-components/overview-component/components/readme-section/readme-section.component.ts index b35f3da1f..3c53cdad7 100644 --- a/src/app/dataset-view/additional-components/overview-component/components/readme-section/readme-section.component.ts +++ b/src/app/dataset-view/additional-components/overview-component/components/readme-section/readme-section.component.ts @@ -8,7 +8,6 @@ import { DatasetCommitService } from "../../services/dataset-commit.service"; @Component({ selector: "app-readme-section", templateUrl: "./readme-section.component.html", - styleUrls: ["./readme-section.component.sass"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class ReadmeSectionComponent extends BaseComponent implements OnInit { diff --git a/src/app/dataset-view/additional-components/overview-component/overview-component.sass b/src/app/dataset-view/additional-components/overview-component/overview-component.sass deleted file mode 100644 index 1178a2342..000000000 --- a/src/app/dataset-view/additional-components/overview-component/overview-component.sass +++ /dev/null @@ -1,51 +0,0 @@ -.custom-mat-chip - background: #d0d7de - -.custom-edit - border: 1px solid grey - border-radius: 6px - &:hover - background: #f3f4f6 - border: 1px solid grey - border-radius: 6px - -.no-data-container - background-color: rgba(97,144,195,.15) - -.edit-title - border-bottom: 1px solid #DEDEDE - padding: 10px - .left-part - font-size: 14px - .edit-button - border: none - outline: none - padding: 5px 15px - &:first-child - border-top-left-radius: 5px - border-bottom-left-radius: 5px - &:nth-child(2) - border-top-right-radius: 5px - border-bottom-right-radius: 5px - &.active - background: #fff - font-weight: 500 - border: 1px solid #000 - border-radius: 5px - &:not(.active):hover - background: #DEDEDE - - .right-part - .button-changes - border: none - outline: none - border-radius: 6px - padding: 6px 9px - border: 1px solid #DEDEDE - &:hover:first-child - background-color: #e8e3e3 - &:nth-child(2) - background-color: rgb(26, 127, 55) - color: #fff - &:nth-child(2):disabled - background-color: rgb(148, 211, 162) diff --git a/src/app/dataset-view/additional-components/overview-component/overview-component.html b/src/app/dataset-view/additional-components/overview-component/overview.component.html similarity index 100% rename from src/app/dataset-view/additional-components/overview-component/overview-component.html rename to src/app/dataset-view/additional-components/overview-component/overview.component.html diff --git a/src/app/dataset-view/additional-components/overview-component/overview.component.scss b/src/app/dataset-view/additional-components/overview-component/overview.component.scss new file mode 100644 index 000000000..fceccdbbf --- /dev/null +++ b/src/app/dataset-view/additional-components/overview-component/overview.component.scss @@ -0,0 +1,76 @@ +.custom-mat-chip { + background: #d0d7de; +} + +.custom-edit { + border: 1px solid grey; + border-radius: 6px; + + &:hover { + background: #f3f4f6; + border: 1px solid grey; + border-radius: 6px; + } +} + +.no-data-container { + background-color: rgba(97, 144, 195, .15); +} + +.edit-title { + border-bottom: 1px solid #DEDEDE; + padding: 10px; + + .left-part { + font-size: 14px; + + .edit-button { + border: none; + outline: none; + padding: 5px 15px; + + &:first-child { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + } + + &:nth-child(2) { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } + + &.active { + background: #fff; + font-weight: 500; + border: 1px solid #000; + border-radius: 5px; + } + + &:not(.active):hover { + background: #DEDEDE; + } + } + } + + .right-part { + .button-changes { + outline: none; + border-radius: 6px; + padding: 6px 9px; + border: 1px solid #DEDEDE; + + &:hover:first-child { + background-color: #e8e3e3; + } + + &:nth-child(2) { + background-color: rgb(26, 127, 55); + color: #fff; + } + + &:nth-child(2):disabled { + background-color: rgb(148, 211, 162); + } + } + } +} \ No newline at end of file diff --git a/src/app/dataset-view/additional-components/overview-component/overview-component.spec.ts b/src/app/dataset-view/additional-components/overview-component/overview.component.spec.ts similarity index 95% rename from src/app/dataset-view/additional-components/overview-component/overview-component.spec.ts rename to src/app/dataset-view/additional-components/overview-component/overview.component.spec.ts index 7a4c6e90f..77fc8f45f 100644 --- a/src/app/dataset-view/additional-components/overview-component/overview-component.spec.ts +++ b/src/app/dataset-view/additional-components/overview-component/overview.component.spec.ts @@ -1,11 +1,11 @@ import { ReactiveFormsModule } from "@angular/forms"; import { ApolloModule } from "apollo-angular"; import { Apollo } from "apollo-angular"; -import { mockDatasetBasicsFragment } from "./../../../search/mock.data"; -import { mockMetadataSchemaUpdate, mockOverviewDataUpdate } from "./../data-tabs.mock"; +import { mockDatasetBasicsFragment } from "../../../search/mock.data"; +import { mockMetadataSchemaUpdate, mockOverviewDataUpdate } from "../data-tabs.mock"; import { ComponentFixture, TestBed } from "@angular/core/testing"; import { AppDatasetSubscriptionsService } from "../../dataset.subscriptions.service"; -import { OverviewComponent } from "./overview-component"; +import { OverviewComponent } from "./overview.component"; import { OverviewDataUpdate } from "../../dataset.subscriptions.interface"; import { DatasetKind } from "src/app/api/kamu.graphql.interface"; import { NavigationService } from "src/app/services/navigation.service"; @@ -106,7 +106,7 @@ describe("OverviewComponent", () => { component.navigateToAddPollingSource(); expect(navigateToAddPollingSourceSpy).toHaveBeenCalledWith({ accountName: mockDatasetBasicsFragment.owner.name, - datasetName: mockDatasetBasicsFragment.name , + datasetName: mockDatasetBasicsFragment.name, }); }); }); diff --git a/src/app/dataset-view/additional-components/overview-component/overview-component.ts b/src/app/dataset-view/additional-components/overview-component/overview.component.ts similarity index 96% rename from src/app/dataset-view/additional-components/overview-component/overview-component.ts rename to src/app/dataset-view/additional-components/overview-component/overview.component.ts index 48105dda2..5335301fa 100644 --- a/src/app/dataset-view/additional-components/overview-component/overview-component.ts +++ b/src/app/dataset-view/additional-components/overview-component/overview.component.ts @@ -1,6 +1,6 @@ import { EditLicenseModalComponent } from "./components/edit-license-modal/edit-license-modal.component"; import { OverviewDataUpdate } from "src/app/dataset-view/dataset.subscriptions.interface"; -import { DatasetKind } from "./../../../api/kamu.graphql.interface"; +import { DatasetKind } from "../../../api/kamu.graphql.interface"; import { ChangeDetectionStrategy, Component, @@ -28,8 +28,8 @@ import { EditWatermarkModalComponent } from "./components/edit-watermark-modal/e @Component({ selector: "app-overview", - templateUrl: "overview-component.html", - styleUrls: ["./overview-component.sass"], + templateUrl: "overview.component.html", + styleUrls: ["./overview.component.scss"], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/src/app/dataset-view/additional-components/overview-component/services/dataset-commit.service.spec.ts b/src/app/dataset-view/additional-components/overview-component/services/dataset-commit.service.spec.ts index aba521f7c..a8199417e 100644 --- a/src/app/dataset-view/additional-components/overview-component/services/dataset-commit.service.spec.ts +++ b/src/app/dataset-view/additional-components/overview-component/services/dataset-commit.service.spec.ts @@ -1,4 +1,4 @@ -import { MaybeUndefined } from "./../../../../common/app.types"; +import { MaybeUndefined } from "../../../../common/app.types"; import { TestBed, fakeAsync, flush, tick } from "@angular/core/testing"; import { DatasetCommitService } from "./dataset-commit.service"; import { Apollo, ApolloModule } from "apollo-angular"; diff --git a/src/app/dataset-view/additional-components/settings-component/settings.component.sass b/src/app/dataset-view/additional-components/settings-component/settings.component.sass index 778926992..e69de29bb 100644 --- a/src/app/dataset-view/additional-components/settings-component/settings.component.sass +++ b/src/app/dataset-view/additional-components/settings-component/settings.component.sass @@ -1,141 +0,0 @@ -@import src/assets/styles/var -p - margin: 0 - -.custom-container - display: grid - grid-template-columns: 300px 1fr - -.content-container - padding: 15px 30px 0px - h2 - font-weight: 400 - margin: 0 - dl - margin: 0 - -.p-responsive - padding-left: 16px - a - text-decoration: none - .rename-btn - padding: 3px 12px - font-size: 14px - height: 32px - border: 1px solid rgba(27,31,36,0.25 ) - border-radius: 6px - &:hover - background: rgba(27,31,36,0.16 ) - -.fw-bold-custom - font-weight: 600 - -.action-list - padding: 0 - -.action-list-item - position: relative - list-style: none - border-radius: 6px - text-decoration: none - a - &:hover - cursor: pointer - text-decoration: none - -.action-list-content - position: relative - display: grid - width: 100% - padding: 6px 8px - font-size: 14px - font-weight: 400 - color: $app-color-fg-default - text-align: left - user-select: none - background-color: transparent - border: none - border-radius: 6px - transition: background 33.333ms linear - touch-action: manipulation - grid-template-rows: min-content - grid-template-areas: "leadingAction leadingVisual label trailingVisual trailingAction" - grid-template-columns: min-content max-content - align-items: start - &:hover - background: $app-color-action-list-item-default-selected-bg - -.action-list-item--nav-active - background: $app-color-action-list-item-default-selected-bg - &::after - position: absolute - top: calc(50% - 12px) - left: -8px - width: 4px - height: 24px - content: "" - background: $app-color-accent-fg - border-radius: 6px - a - font-weight: 600 - -.action-list-sectionDivider - &:empty - display: block - height: 1px - padding: 0 - margin: 7px -8px 8px - list-style: none - background: $app-color-action-list-item-inline-divider - border: 0 - &:not(:empty) - display: flex - padding: 6px 8px - font-size: 12px - font-weight: 500 - color: $app-color-fg-muted - flex-direction: column - -.danger-zone__content - padding: 15px - border: 1px solid rgba(27,31,36,0.25 ) - border-radius: 6px - .description - font-weight: 600 - button - color: #CF222E - padding: 3px 12px - font-size: 14px - height: 32px - border: 1px solid rgba(27,31,36,0.25 ) - border-radius: 6px - white-space: nowrap - &:hover - background: rgba(27,31,36,0.16 ) - -.error-block - z-index: 10 - display: inline-block - padding: 4px 8px - font-size: 12px - border-style: solid - border-width: 1px - border-radius: 6px - background: #ffebe9 - border-color: rgba(255, 129, 130, 0.4) - position: relative - &::before - content: "\A" - border-style: solid - border-width: 5px 7px 5px 5px - border-color: transparent rgba(255, 129, 130, 0.4) transparent transparent - position: absolute - left: 15px - top: -10px - transform: rotate(90deg) - -.error-color - color: #CF222E - -.error-border-color - border-color: #dc3545 diff --git a/src/app/dataset-view/additional-components/settings-component/settings.component.scss b/src/app/dataset-view/additional-components/settings-component/settings.component.scss new file mode 100644 index 000000000..95fdc9805 --- /dev/null +++ b/src/app/dataset-view/additional-components/settings-component/settings.component.scss @@ -0,0 +1,186 @@ +@import 'var'; + +p { + margin: 0; +} + +.custom-container { + display: grid; + grid-template-columns: 300px 1fr; +} + +.content-container { + padding: 15px 30px 0; + + h2 { + font-weight: 400; + margin: 0; + } + + dl { + margin: 0; + } +} + +.p-responsive { + padding-left: 16px; + + a { + text-decoration: none; + } + + .rename-btn { + padding: 3px 12px; + font-size: 14px; + height: 32px; + border: 1px solid rgba(27, 31, 36, 0.25); + border-radius: 6px; + + &:hover { + background: rgba(27, 31, 36, 0.16); + } + } +} + +.fw-bold-custom { + font-weight: 600; +} + +.action-list { + padding: 0; +} + +.action-list-item { + position: relative; + list-style: none; + border-radius: 6px; + text-decoration: none; + + a { + &:hover { + cursor: pointer; + text-decoration: none; + } + } +} + +.action-list-content { + position: relative; + display: grid; + width: 100%; + padding: 6px 8px; + font-size: 14px; + font-weight: 400; + color: $app-color-fg-default; + text-align: left; + user-select: none; + background-color: transparent; + border: none; + border-radius: 6px; + transition: background 33.333ms linear; + touch-action: manipulation; + grid-template-rows: min-content; + grid-template-areas: 'leadingAction leadingVisual label trailingVisual trailingAction'; + grid-template-columns: min-content max-content; + align-items: start; + + &:hover { + background: $app-color-action-list-item-default-selected-bg; + } +} + +.action-list-item--nav-active { + background: $app-color-action-list-item-default-selected-bg; + + &::after { + position: absolute; + top: calc(50% - 12px); + left: -8px; + width: 4px; + height: 24px; + content: ''; + background: $app-color-accent-fg; + border-radius: 6px; + } + + a { + font-weight: 600; + } +} + +.action-list-sectionDivider { + &:empty { + display: block; + height: 1px; + padding: 0; + margin: 7px -8px 8px; + list-style: none; + background: $app-color-action-list-item-inline-divider; + border: 0; + } + + &:not(:empty) { + display: flex; + padding: 6px 8px; + font-size: 12px; + font-weight: 500; + color: $app-color-fg-muted; + flex-direction: column; + } +} + +.danger-zone__content { + padding: 15px; + border: 1px solid rgba(27, 31, 36, 0.25); + border-radius: 6px; + + .description { + font-weight: 600; + } + + button { + color: #CF222E; + padding: 3px 12px; + font-size: 14px; + height: 32px; + border: 1px solid rgba(27, 31, 36, 0.25); + border-radius: 6px; + white-space: nowrap; + + &:hover { + background: rgba(27, 31, 36, 0.16); + } + } +} + +.error-block { + z-index: 10; + display: inline-block; + padding: 4px 8px; + font-size: 12px; + border-style: solid; + border-width: 1px; + border-radius: 6px; + background: #ffebe9; + border-color: rgba(255, 129, 130, 0.4); + position: relative; + + &::before { + content: '\A'; + border-style: solid; + border-width: 5px 7px 5px 5px; + border-color: transparent rgba(255, 129, 130, 0.4) transparent transparent; + position: absolute; + left: 15px; + top: -10px; + transform: rotate(90deg); + } +} + +.error-color { + color: #CF222E; +} + +.error-border-color { + border-color: #dc3545; +} \ No newline at end of file diff --git a/src/app/dataset-view/additional-components/settings-component/settings.component.spec.ts b/src/app/dataset-view/additional-components/settings-component/settings.component.spec.ts index fb3607161..093c6b602 100644 --- a/src/app/dataset-view/additional-components/settings-component/settings.component.spec.ts +++ b/src/app/dataset-view/additional-components/settings-component/settings.component.spec.ts @@ -1,4 +1,4 @@ -import { SharedTestModule } from "./../../../common/shared-test.module"; +import { SharedTestModule } from "../../../common/shared-test.module"; import { ComponentFixture, TestBed, fakeAsync, flush, tick } from "@angular/core/testing"; import { SettingsTabComponent } from "./settings.component"; import { ReactiveFormsModule } from "@angular/forms"; diff --git a/src/app/dataset-view/additional-components/settings-component/settings.component.ts b/src/app/dataset-view/additional-components/settings-component/settings.component.ts index fdbf232f4..b35b4deed 100644 --- a/src/app/dataset-view/additional-components/settings-component/settings.component.ts +++ b/src/app/dataset-view/additional-components/settings-component/settings.component.ts @@ -10,7 +10,7 @@ import { Observable, shareReplay } from "rxjs"; @Component({ selector: "app-settings-tab", templateUrl: "./settings.component.html", - styleUrls: ["./settings.component.sass"], + styleUrls: ["./settings.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SettingsTabComponent extends BaseComponent { diff --git a/src/app/dataset-view/dataset-view-header/dataset-view-header.html b/src/app/dataset-view/dataset-view-header/dataset-view-header.component.html similarity index 100% rename from src/app/dataset-view/dataset-view-header/dataset-view-header.html rename to src/app/dataset-view/dataset-view-header/dataset-view-header.component.html diff --git a/src/app/dataset-view/dataset-view-header/dataset-view-header.component.spec.ts b/src/app/dataset-view/dataset-view-header/dataset-view-header.component.spec.ts index 8ea506c8e..fddb74a55 100644 --- a/src/app/dataset-view/dataset-view-header/dataset-view-header.component.spec.ts +++ b/src/app/dataset-view/dataset-view-header/dataset-view-header.component.spec.ts @@ -1,5 +1,5 @@ import { ComponentFixture, TestBed } from "@angular/core/testing"; -import { DatasetViewHeaderComponent } from "./dataset-view-header-component"; +import { DatasetViewHeaderComponent } from "./dataset-view-header.component"; import { mockDatasetInfo } from "src/app/search/mock.data"; import { SearchAdditionalButtonsComponent } from "src/app/components/search-additional-buttons/search-additional-buttons.component"; import { SearchAdditionalButtonsNavComponent } from "src/app/components/search-additional-buttons/search-additional-buttons-nav.component"; diff --git a/src/app/dataset-view/dataset-view-header/dataset-view-header-component.ts b/src/app/dataset-view/dataset-view-header/dataset-view-header.component.ts similarity index 98% rename from src/app/dataset-view/dataset-view-header/dataset-view-header-component.ts rename to src/app/dataset-view/dataset-view-header/dataset-view-header.component.ts index 06d93ca80..957ff2fe1 100644 --- a/src/app/dataset-view/dataset-view-header/dataset-view-header-component.ts +++ b/src/app/dataset-view/dataset-view-header/dataset-view-header.component.ts @@ -6,7 +6,7 @@ import { DatasetInfo } from "src/app/interface/navigation.interface"; @Component({ selector: "app-dataset-view-header", - templateUrl: "./dataset-view-header.html", + templateUrl: "./dataset-view-header.component.html", changeDetection: ChangeDetectionStrategy.OnPush, }) export class DatasetViewHeaderComponent { diff --git a/src/app/dataset-view/dataset-view-menu/dataset-view-menu.html b/src/app/dataset-view/dataset-view-menu/dataset-view-menu.component.html similarity index 100% rename from src/app/dataset-view/dataset-view-menu/dataset-view-menu.html rename to src/app/dataset-view/dataset-view-menu/dataset-view-menu.component.html diff --git a/src/app/dataset-view/dataset-view-menu/dataset-view-menu-component.spec.ts b/src/app/dataset-view/dataset-view-menu/dataset-view-menu.component.spec.ts similarity index 96% rename from src/app/dataset-view/dataset-view-menu/dataset-view-menu-component.spec.ts rename to src/app/dataset-view/dataset-view-menu/dataset-view-menu.component.spec.ts index 2b72dc3c4..a49712544 100644 --- a/src/app/dataset-view/dataset-view-menu/dataset-view-menu-component.spec.ts +++ b/src/app/dataset-view/dataset-view-menu/dataset-view-menu.component.spec.ts @@ -1,9 +1,9 @@ import AppValues from "src/app/common/app.values"; -import { DatasetNavigationInterface } from "./../dataset-view.interface"; +import { DatasetNavigationInterface } from "../dataset-view.interface"; import { FormsModule } from "@angular/forms"; import { ComponentFixture, fakeAsync, flush, TestBed, tick } from "@angular/core/testing"; import { MatMenuModule } from "@angular/material/menu"; -import { DatasetViewMenuComponent } from "./dataset-view-menu-component"; +import { DatasetViewMenuComponent } from "./dataset-view-menu.component"; import { emitClickOnElementByDataTestId, findElementByDataTestId } from "src/app/common/base-test.helpers.spec"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { MatButtonToggleModule } from "@angular/material/button-toggle"; diff --git a/src/app/dataset-view/dataset-view-menu/dataset-view-menu-component.ts b/src/app/dataset-view/dataset-view-menu/dataset-view-menu.component.ts similarity index 98% rename from src/app/dataset-view/dataset-view-menu/dataset-view-menu-component.ts rename to src/app/dataset-view/dataset-view-menu/dataset-view-menu.component.ts index 61ce497e4..58aa8f961 100644 --- a/src/app/dataset-view/dataset-view-menu/dataset-view-menu-component.ts +++ b/src/app/dataset-view/dataset-view-menu/dataset-view-menu.component.ts @@ -8,7 +8,7 @@ import { isMobileView, promiseWithCatch } from "src/app/common/app.helpers"; @Component({ selector: "app-dataset-view-menu", - templateUrl: "./dataset-view-menu.html", + templateUrl: "./dataset-view-menu.component.html", changeDetection: ChangeDetectionStrategy.OnPush, }) export class DatasetViewMenuComponent implements OnInit { diff --git a/src/app/dataset-view/dataset-view.component.sass b/src/app/dataset-view/dataset-view.component.sass deleted file mode 100644 index a57e381f2..000000000 --- a/src/app/dataset-view/dataset-view.component.sass +++ /dev/null @@ -1,108 +0,0 @@ -@import src/assets/styles/var -@import 'node_modules/bootstrap/dist/css/bootstrap.min' -@import 'node_modules/prismjs/themes/prism-okaidia' -@import 'node_modules/prismjs/plugins/line-numbers/prism-line-numbers' -@import 'node_modules/prismjs/plugins/line-highlight/prism-line-highlight' - -.mat-button-toggle-group - width: fit-content - .mat-button-toggle-standalone.mat-button-toggle-appearance-standard, .mat-button-toggle-group-appearance-standard - border-radius: 0 !important - -#dataset-view-history - overflow: visible - -.datatab-expanding-row - background: #fff - border-top: 1px solid rgba(0,0,0,.12) - box-shadow: 0 3px 3px rgb(0 0 0 / 12%) - transition: margin .2s cubic-bezier(0.4, 0, 0.2, 1) - will-change: margin - &-header - color: #000 - font-size: 13px - font-weight: 400 - line-height: 20px - cursor: pointer - display: flex - padding: 4px 10px - &-content - flex-grow: 1 - max-width: calc(100% - 24px) - .datatab-activity-row-summary - display: flex - .datatab-activity-timestamp - color: rgba(0,0,0,.66) - flex-shrink: 0 - text-align: right - width: 62px - margin-right: 10px - .datatab-activity-icon - &-size - font-size: 15px - height: 15px - width: 15px - .datatab-activity-info-container - display: flex - flex-grow: 1 - flex-wrap: wrap - padding-left: 10px - max-width: calc(100% - 86px) - .datatab-activity-title - flex: 1 0 30% - -.sql-query-editor-header - h2 - width: max-content - display: inline-block - .btn-group-parent - float: right - .btn-group-item span - font-size: 17px - font-weight: 600 - -.sql-run-button - color: $app-success - width: min-content - padding: 5px - -mat-button-toggle-group - box-shadow: none - border-bottom: 1px solid - border-radius: 0 !important - -mat-button-toggle - border: 2px transparent solid !important - margin-top: 5px !important - padding: 0 5px !important - z-index: 3 !important - outline: none !important - &:hover - box-shadow: none !important - border-bottom: 1px solid !important - border-radius: 0 !important - &.mat-button-toggle-checked - border-bottom: 2px #000 solid !important - &::ng-deep mat-button-toggle - .mat-button-toggle-focus-overlay - background-color: transparent !important - opacity: 0 !important - -.mat-button-toggle-checked - border-bottom-color: #000 !important - border-radius: 0 - background-color: transparent !important - -.mat-button-toggle-input - background-color: transparent !important - padding-left: 32px !important - -.tab-icon - position: absolute - left: -14px - top: 9px - font-size: 18px - -[data-test-id="searchAdditionalButtons"] - height: inherit - border-radius: inherit diff --git a/src/app/dataset-view/dataset.component.scss b/src/app/dataset-view/dataset.component.scss new file mode 100644 index 000000000..9d33be765 --- /dev/null +++ b/src/app/dataset-view/dataset.component.scss @@ -0,0 +1,146 @@ +@import 'var'; + +.mat-button-toggle-group { + width: fit-content; + + .mat-button-toggle-standalone.mat-button-toggle-appearance-standard, + .mat-button-toggle-group-appearance-standard { + border-radius: 0 !important; + } +} + +#dataset-view-history { + overflow: visible; +} + +.datatab-expanding-row { + background: #fff; + border-top: 1px solid rgba(0, 0, 0, .12); + box-shadow: 0 3px 3px rgb(0 0 0 / 12%); + transition: margin .2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: margin; + + &-header { + color: #000; + font-size: 13px; + font-weight: 400; + line-height: 20px; + cursor: pointer; + display: flex; + padding: 4px 10px; + + &-content { + flex-grow: 1; + max-width: calc(100% - 24px); + } + + .datatab-activity-row-summary { + display: flex; + } + + .datatab-activity-timestamp { + color: rgba(0, 0, 0, .66); + flex-shrink: 0; + text-align: right; + width: 62px; + margin-right: 10px; + } + + .datatab-activity-icon { + &-size { + font-size: 15px; + height: 15px; + width: 15px; + } + } + + .datatab-activity-info-container { + display: flex; + flex-grow: 1; + flex-wrap: wrap; + padding-left: 10px; + max-width: calc(100% - 86px); + } + + .datatab-activity-title { + flex: 1 0 30%; + } + } +} + +.sql-query-editor-header { + + h2 { + width: max-content; + display: inline-block; + } + + .btn-group-parent { + float: right; + + .btn-group-item span { + font-size: 17px; + font-weight: 600; + } + } +} + +.sql-run-button { + color: $app-success; + width: min-content; + padding: 5px; +} + +mat-button-toggle-group { + box-shadow: none; + border-bottom: 1px solid; + border-radius: 0 !important; +} + +mat-button-toggle { + border: 2px transparent solid !important; + margin-top: 5px !important; + padding: 0 5px !important; + z-index: 3 !important; + outline: none !important; + + &:hover { + box-shadow: none !important; + border-bottom: 1px solid !important; + border-radius: 0 !important; + + &.mat-button-toggle-checked { + border-bottom: 2px #000 solid !important; + + &::ng-deep mat-button-toggle { + .mat-button-toggle-focus-overlay { + background-color: transparent !important; + opacity: 0 !important; + } + } + } + } +} + +.mat-button-toggle-checked { + border-bottom-color: #000 !important; + border-radius: 0; + background-color: transparent !important; +} + +.mat-button-toggle-input { + background-color: transparent !important; + padding-left: 32px !important; +} + +.tab-icon { + position: absolute; + left: -14px; + top: 9px; + font-size: 18px; +} + +[data-test-id='searchAdditionalButtons'] { + height: inherit; + border-radius: inherit; +} \ No newline at end of file diff --git a/src/app/dataset-view/dataset.component.spec.ts b/src/app/dataset-view/dataset.component.spec.ts index a1b5e0771..c27e989ca 100644 --- a/src/app/dataset-view/dataset.component.spec.ts +++ b/src/app/dataset-view/dataset.component.spec.ts @@ -1,4 +1,4 @@ -import { mockDatasetBasicsFragment, mockDatasetInfo, mockNode } from "./../search/mock.data"; +import { mockDatasetBasicsFragment, mockDatasetInfo, mockNode } from "../search/mock.data"; import { DatasetService } from "./dataset.service"; import { ComponentFixture, TestBed } from "@angular/core/testing"; import { ActivatedRoute, NavigationEnd, Router } from "@angular/router"; @@ -11,12 +11,12 @@ import { NavigationService } from "../services/navigation.service"; import { DatasetViewTypeEnum } from "./dataset-view.interface"; import { of } from "rxjs"; import { routerMock, routerMockEventSubject } from "../common/base-test.helpers.spec"; -import { OverviewComponent } from "./additional-components/overview-component/overview-component"; -import { DatasetViewMenuComponent } from "./dataset-view-menu/dataset-view-menu-component"; +import { OverviewComponent } from "./additional-components/overview-component/overview.component"; +import { DatasetViewMenuComponent } from "./dataset-view-menu/dataset-view-menu.component"; import { MatMenuModule } from "@angular/material/menu"; import { FormsModule } from "@angular/forms"; import { MatButtonToggleModule } from "@angular/material/button-toggle"; -import { DatasetViewHeaderComponent } from "./dataset-view-header/dataset-view-header-component"; +import { DatasetViewHeaderComponent } from "./dataset-view-header/dataset-view-header.component"; import { SearchAdditionalButtonsComponent } from "../components/search-additional-buttons/search-additional-buttons.component"; import { MatTabsModule } from "@angular/material/tabs"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; diff --git a/src/app/dataset-view/dataset.component.ts b/src/app/dataset-view/dataset.component.ts index 80137325f..525808611 100644 --- a/src/app/dataset-view/dataset.component.ts +++ b/src/app/dataset-view/dataset.component.ts @@ -23,7 +23,7 @@ import { MaybeNull } from "../common/app.types"; @Component({ selector: "app-dataset", templateUrl: "./dataset.component.html", - styleUrls: ["./dataset-view.component.sass"], + styleUrls: ["./dataset.component.scss"], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/src/app/dataset-view/dataset.module.ts b/src/app/dataset-view/dataset.module.ts index 68ec86c36..311e874e8 100644 --- a/src/app/dataset-view/dataset.module.ts +++ b/src/app/dataset-view/dataset.module.ts @@ -19,19 +19,19 @@ import { MatMenuModule } from "@angular/material/menu"; import { MatButtonModule } from "@angular/material/button"; import { MarkdownModule } from "ngx-markdown"; import { MatChipsModule } from "@angular/material/chips"; -import { MetadataComponent } from "./additional-components/metadata-component/metadata-component"; +import { MetadataComponent } from "./additional-components/metadata-component/metadata.component"; import { ClipboardModule } from "@angular/cdk/clipboard"; import { MatTabsModule } from "@angular/material/tabs"; import { MonacoEditorModule } from "ngx-monaco-editor-v2"; -import { DataComponent } from "./additional-components/data-component/data-component"; -import { OverviewComponent } from "./additional-components/overview-component/overview-component"; -import { LineageComponent as LineageComponent } from "./additional-components/lineage-component/lineage-component"; +import { DataComponent } from "./additional-components/data-component/data.component"; +import { OverviewComponent } from "./additional-components/overview-component/overview.component"; +import { LineageComponent as LineageComponent } from "./additional-components/lineage-component/lineage.component"; import { CdkAccordionModule } from "@angular/cdk/accordion"; -import { HistoryComponent } from "./additional-components/history-component/history-component"; +import { HistoryComponent } from "./additional-components/history-component/history.component"; import { TimelineModule } from "../components/timeline-component/timeline.module"; import { CustomPaginationModule } from "../components/custom-pagination-component/custom-pagination.module"; -import { DatasetViewHeaderComponent } from "./dataset-view-header/dataset-view-header-component"; -import { DatasetViewMenuComponent } from "./dataset-view-menu/dataset-view-menu-component"; +import { DatasetViewHeaderComponent } from "./dataset-view-header/dataset-view-header.component"; +import { DatasetViewMenuComponent } from "./dataset-view-menu/dataset-view-menu.component"; import { SideNavModule } from "../sidenav/side-nav.module"; import { RouterModule } from "@angular/router"; import { OverviewHistorySummaryHeaderComponent } from "../components/overview-history-summary-header/overview-history-summary-header.component"; diff --git a/src/app/dataset-view/dataset.service.spec.ts b/src/app/dataset-view/dataset.service.spec.ts index 9f225a459..0671df767 100644 --- a/src/app/dataset-view/dataset.service.spec.ts +++ b/src/app/dataset-view/dataset.service.spec.ts @@ -6,7 +6,7 @@ import { mockDatasetInfo, mockDatasetDataSqlRunInvalidSqlResponse, mockDatasetDataSqlRunInternalErrorResponse, -} from "./../search/mock.data"; +} from "../search/mock.data"; import { TestBed } from "@angular/core/testing"; import { Apollo, ApolloModule } from "apollo-angular"; import { DatasetApi } from "../api/dataset.api"; diff --git a/src/app/dataset-view/dataset.service.ts b/src/app/dataset-view/dataset.service.ts index 51ee6c771..7e21bab83 100644 --- a/src/app/dataset-view/dataset.service.ts +++ b/src/app/dataset-view/dataset.service.ts @@ -1,4 +1,4 @@ -import { SqlExecutionError } from "./../common/errors"; +import { SqlExecutionError } from "../common/errors"; import { DataQueryResultErrorKind, DataQueryResultSuccessViewFragment, @@ -7,8 +7,8 @@ import { DatasetPageInfoFragment, GetDatasetSchemaQuery, SetVocab, -} from "./../api/kamu.graphql.interface"; -import { DatasetInfo } from "./../interface/navigation.interface"; +} from "../api/kamu.graphql.interface"; +import { DatasetInfo } from "../interface/navigation.interface"; import { Injectable } from "@angular/core"; import { Observable, Subject, throwError } from "rxjs"; import { DataRow, DatasetLineageNode, DatasetRequestBySql, DatasetSchema } from "../interface/dataset.interface"; diff --git a/src/app/dataset-view/dataset.subscriptions.interface.ts b/src/app/dataset-view/dataset.subscriptions.interface.ts index bd1760ec5..8c5b93959 100644 --- a/src/app/dataset-view/dataset.subscriptions.interface.ts +++ b/src/app/dataset-view/dataset.subscriptions.interface.ts @@ -1,4 +1,4 @@ -import { DatasetKind, DatasetPageInfoFragment, SetVocab } from "./../api/kamu.graphql.interface"; +import { DatasetKind, DatasetPageInfoFragment, SetVocab } from "../api/kamu.graphql.interface"; import { DatasetBasicsFragment, DatasetDataSizeFragment, diff --git a/src/app/search/mock.data.ts b/src/app/search/mock.data.ts index 11c2a2952..08a91d7aa 100644 --- a/src/app/search/mock.data.ts +++ b/src/app/search/mock.data.ts @@ -1,5 +1,5 @@ -import { CommitEventToDatasetMutation, PageBasedInfo } from "./../api/kamu.graphql.interface"; -import { mockSetVocab } from "./../dataset-block/metadata-block/components/event-details/mock.events"; +import { CommitEventToDatasetMutation, PageBasedInfo } from "../api/kamu.graphql.interface"; +import { mockSetVocab } from "../dataset-block/metadata-block/components/event-details/mock.events"; import { DataBatchFormat, DataQueryResultErrorKind, diff --git a/src/app/search/search.component.sass b/src/app/search/search.component.sass deleted file mode 100644 index d87880582..000000000 --- a/src/app/search/search.component.sass +++ /dev/null @@ -1,20 +0,0 @@ -@import src/assets/styles/var - -::ng-deep - .mat-checkbox-checked - .mat-checkbox-background - background-color: $app-navyBlue - -::ng-deep - &.mat-checkbox-disabled - color: $app-disabled - -nav - &.navbar - &.navbar-expand - * - font-size: 16px - line-height: 27px - .search-result-container__navbar__title - line-height: 32px - font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif diff --git a/src/app/search/search.component.scss b/src/app/search/search.component.scss new file mode 100644 index 000000000..a72c83c2b --- /dev/null +++ b/src/app/search/search.component.scss @@ -0,0 +1,27 @@ +@import 'var'; + +:host { + ::ng-deep { + .mat-checkbox-checked { + .mat-checkbox-background { + background-color: $app-navyBlue; + } + } + + .mat-checkbox-disabled { + color: $app-disabled; + } + } +} + +nav { + .example-list-section { + font-size: 16px; + line-height: 27px; + } + + .search-result-container__navbar__title { + line-height: 32px; + font: 500 20px/32px Roboto, 'Helvetica Neue', sans-serif; + } +} \ No newline at end of file diff --git a/src/app/search/search.component.spec.ts b/src/app/search/search.component.spec.ts index 6d9d22b8d..f0ff1651a 100644 --- a/src/app/search/search.component.spec.ts +++ b/src/app/search/search.component.spec.ts @@ -1,7 +1,7 @@ import { MatChipsModule } from "@angular/material/chips"; -import { DatasetInfo } from "./../interface/navigation.interface"; -import { AuthApi } from "./../api/auth.api"; -import { SearchApi } from "./../api/search.api"; +import { DatasetInfo } from "../interface/navigation.interface"; +import { AuthApi } from "../api/auth.api"; +import { SearchApi } from "../api/search.api"; import { ComponentFixture, TestBed, fakeAsync, flush, tick } from "@angular/core/testing"; import { SearchComponent } from "./search.component"; import { NavigationService } from "../services/navigation.service"; diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts index 3fc193792..43b2c74bb 100644 --- a/src/app/search/search.component.ts +++ b/src/app/search/search.component.ts @@ -13,7 +13,7 @@ import { Observable } from "rxjs"; @Component({ selector: "app-search", templateUrl: "./search.component.html", - styleUrls: ["./search.component.sass"], + styleUrls: ["./search.component.scss"], changeDetection: ChangeDetectionStrategy.OnPush, }) export class SearchComponent extends BaseComponent implements OnInit { diff --git a/src/app/search/search.module.ts b/src/app/search/search.module.ts index 7b94d4bbe..6574f02ea 100644 --- a/src/app/search/search.module.ts +++ b/src/app/search/search.module.ts @@ -1,4 +1,4 @@ -import { DisplayTimeModule } from "./../components/display-time/display-time.module"; +import { DisplayTimeModule } from "../components/display-time/display-time.module"; import { ModuleWithProviders, NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; import { SearchComponent } from "./search.component"; diff --git a/src/app/search/search.service.spec.ts b/src/app/search/search.service.spec.ts index 6ec88970a..58420718c 100644 --- a/src/app/search/search.service.spec.ts +++ b/src/app/search/search.service.spec.ts @@ -1,5 +1,5 @@ import { Apollo } from "apollo-angular"; -import { SearchApi } from "./../api/search.api"; +import { SearchApi } from "../api/search.api"; import { TestBed } from "@angular/core/testing"; import { SearchService } from "./search.service"; import { DatasetAutocompleteItem, DatasetSearchResult } from "../interface/search.interface"; diff --git a/src/app/services/account.service.ts b/src/app/services/account.service.ts index 73beb64d7..e9aab9129 100644 --- a/src/app/services/account.service.ts +++ b/src/app/services/account.service.ts @@ -1,7 +1,7 @@ -import { AccountDetailsFragment } from "./../api/kamu.graphql.interface"; -import { AccountApi } from "./../api/account.api"; +import { AccountDetailsFragment } from "../api/kamu.graphql.interface"; +import { AccountApi } from "../api/account.api"; import { Observable, Subject } from "rxjs"; -import { DatasetApi } from "./../api/dataset.api"; +import { DatasetApi } from "../api/dataset.api"; import { Injectable } from "@angular/core"; import { DatasetsByAccountNameQuery } from "../api/kamu.graphql.interface"; import { DatasetsAccountResponse } from "../interface/dataset.interface"; diff --git a/src/app/services/navigation.service.spec.ts b/src/app/services/navigation.service.spec.ts index 66c31c4ef..6a77873f3 100644 --- a/src/app/services/navigation.service.spec.ts +++ b/src/app/services/navigation.service.spec.ts @@ -1,6 +1,6 @@ -import { SettingsTabs } from "./../auth/settings/settings.constants"; -import { AccountTabs } from "./../auth/account/account.constants"; -import { routes } from "./../app-routing.module"; +import { SettingsTabs } from "../auth/settings/settings.constants"; +import { AccountTabs } from "../auth/account/account.constants"; +import { routes } from "../app-routing.module"; import { RouterTestingModule } from "@angular/router/testing"; import { TestBed } from "@angular/core/testing"; import { NavigationService } from "./navigation.service"; diff --git a/src/app/services/navigation.service.ts b/src/app/services/navigation.service.ts index f626c2967..f072f499f 100644 --- a/src/app/services/navigation.service.ts +++ b/src/app/services/navigation.service.ts @@ -1,5 +1,5 @@ -import { DatasetInfo } from "./../interface/navigation.interface"; -import { AccountTabs } from "./../auth/account/account.constants"; +import { DatasetInfo } from "../interface/navigation.interface"; +import { AccountTabs } from "../auth/account/account.constants"; import { promiseWithCatch } from "src/app/common/app.helpers"; import { Injectable } from "@angular/core"; import { Router } from "@angular/router"; diff --git a/src/app/services/templates-yaml-events.service.ts b/src/app/services/templates-yaml-events.service.ts index 36c305717..1e624859a 100644 --- a/src/app/services/templates-yaml-events.service.ts +++ b/src/app/services/templates-yaml-events.service.ts @@ -1,4 +1,4 @@ -import { SetLicense, SetPollingSource, SetTransform } from "./../api/kamu.graphql.interface"; +import { SetLicense, SetPollingSource, SetTransform } from "../api/kamu.graphql.interface"; import { Injectable } from "@angular/core"; import { MaybeNull } from "../common/app.types"; import { stringify } from "yaml"; diff --git a/src/app/shared/shared/shared.module.ts b/src/app/shared/shared/shared.module.ts index 5d27b2b4a..0fc4bdef5 100644 --- a/src/app/shared/shared/shared.module.ts +++ b/src/app/shared/shared/shared.module.ts @@ -1,4 +1,4 @@ -import { TooltipIconComponent } from "./../../dataset-block/metadata-block/components/tooltip-icon/tooltip-icon.component"; +import { TooltipIconComponent } from "../../dataset-block/metadata-block/components/tooltip-icon/tooltip-icon.component"; import { NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; import { BlockRowDataComponent } from "src/app/dataset-block/metadata-block/components/block-row-data/block-row-data.component"; diff --git a/src/assets/styles/var.sass b/src/assets/styles/var.sass deleted file mode 100644 index 8cefcfd8e..000000000 --- a/src/assets/styles/var.sass +++ /dev/null @@ -1,645 +0,0 @@ -@import '@angular/material/theming' -@include mat-core() - -$app-primary: #F1F1F1 -$app-dark: #1C1C1C -$app-white: #FFFFFF -$app-emperor: #535353 -$app-veryLightGray: #DEDEDE -$app-darkSeaGreen: #86BA90 -$app-navyBlue: #0969da -$app-aliceBlue: #f6f8fa -$app-lightGrayishBlue: #dee2e6 -$app-cloudy: #57606a -$app-nero: #282828 -$secondary: #57606a -$app-disabled: rgba(88, 87, 87, 0.42) -$app-background-btn: #f3f4f6 -$app-versatileBusinessDark: rgba(221, 221, 221, 0.25) -$app-accent: mat-palette($mat-pink, A200, A100, A400) -// The "warn" palette is optional and defaults to red if not specified. -$app-warn: mat-palette($mat-red) -$my-theme: mat-light-theme($app-primary, $app-accent, $app-warn) -$verylightgrey: #cccccc -$darkgreentea: rgb(142,195,79) -$app-success: #1a7f37 -$app-harmonies: #2da44e -$app-naples-yellow: #eac54f -$app-color-btn-counter-bg: #1b1f2414 -$app-color-counter-border: #00000000 -$app-color-neutral-muted: #afb8c133 -$app-color-fg-default: #24292f -$app-color-btn-hover-bg: #f3f4f6 -$app-color-btn-hover-border: #1b1f2426 -$app-color-border-default: #d0d7de -$app-color-select-menu-backdrop-border: #00000000 -$app-color-canvas-overlay: #ffffff -$app-color-canvas-subtle: #f6f8fa -$app-color-border-muted: #d8dee4 -$app-color-shadow-large: 0 8px 24px rgba(140,149,159,0.2) -$app-color-fg-muted: #57606a -$app-color-btn-border: #ced4da -$app-color-timeline-badge-bg: #eaeef2 -$app--color-overview-history-summary-bg: #ddf4ff -$app--color-table-header-bg: #f6f8fa -$app-color-primer-border-active: #fd8c73 -$app-color-action-list-item-default-selected-bg: #d0d7de3d -$app-color-accent-fg: #0969da -$app-color-action-list-item-inline-divider: #d0d7de7a - -.input-group-button - vertical-align: middle - -.color-border-muted - border-color: $app-color-border-muted !important - -.color-bg-default - background-color: $app-color-canvas-overlay !important - -.color-bg-subtle - background-color: $app-color-canvas-subtle !important - -.color-fg-success - color: $app-harmonies - -.color-fg-default - color: $app-color-fg-default - -.color-fg-muted - color: $app-color-fg-muted - -.link--primary - color: $app-color-fg-default !important - &:hover - color: $app-navyBlue !important - -.link--secondary - color: $secondary !important - &:hover - color: $app-navyBlue !important - -.box - &-title - font-size: 20px - line-height: 20px - font-weight: 600 - margin: 0 - &-header - width: 100% - padding: 16px - margin: 0px - background-color: $app-aliceBlue - border-color: $app-color-border-default - border-style: solid - border-width: 1px - border-top-left-radius: 6px - border-top-right-radius: 6px - -.min-width-0 - min-width: 0 !important - -.d-none - display: none - -.position-relative - position: relative !important - -.width-full - width: 100% !important - -.flex-auto - flex: auto !important - -.flex-order-2 - order: 2 !important - -.flex-self-stretch - align-self: stretch !important - -.f6 - font-size: 12px !important - -.color-text-tertiary - color: $app-cloudy - -.color-bg-tertiary - background-color: $app-aliceBlue - -.rounded-1 - border-radius: 4px !important - -.border-white-fade - border-color: $app-versatileBusinessDark - -.rounded-2 - border-radius: 6px !important - -.rounded-top-1 - border-top-left-radius: 6px !important - border-top-right-radius: 6px !important - -.rounded-left-2 - border-bottom-left-radius: 6px !important - border-top-left-radius: 6px !important - -.border-right-0 - border-right: 0 !important - -.border-right-1 - border-right: 1px !important - -.border-left-0 - border-left: 0 !important - -.border-left-1 - border-left: 1px !important - -.rounded-right-2 - border-bottom-right-radius: 6px !important - border-top-right-radius: 6px !important - -.btn-group-parent - float: left - height: 28px - width: max-content - background: none - .btn-group-item - border-right-width: 1px - border-radius: 1px - position: relative - float: left - border-color: $app-color-border-default - height: inherit - background: $app-aliceBlue - &:first-child - &:active,&:disabled - border-color: $app-color-border-default - &:last-child - border-right-width: 1px - border-top-right-radius: 6px - border-bottom-right-radius: 6px - span - font-size: 12px - &:hover - border-color: $app-color-border-default - -.btns-group-item - &:first-child - border-top-left-radius: 6px - border-bottom-left-radius: 6px - &:last-child - border-top-left-radius: 0 - border-top-left-radius: 0 - -.btn - &.btn-gray - background-color: $app-background-btn - border-color: $app-color-btn-border !important - &:hover - background-color: $app-color-btn-hover-border - -.clipboard-btn - height: 100% - &.clipboard-btn--success - border-color: $app-harmonies !important - -.mr-0 - margin-right: 0 !important - -.mr-1 - margin-right: 6px !important - -.mr-2 - margin-right: 8px !important - -.mr-3 - margin-right: 10px !important - -.mr-4 - margin-right: 20px !important - -.ml-3 - margin-left: 16px !important - -.mb-n1 - margin-bottom: -4px !important - -.ml-n1 - margin-left: -4px !important - -.mr-n1 - margin-right: -4px !important - -.mt-n1 - margin-top: -4px !important - -.css-truncate - &.css-truncate-overflow,&.css-truncate-target - overflow: hidden - text-overflow: ellipsis - white-space: nowrap - .css-truncate-overflow,.css-truncate-target - overflow: hidden - text-overflow: ellipsis - white-space: nowrap - -.hx_avatar_stack_commit - .avatar-stack - height: 24px - min-width: 24px - -.avatar-stack - position: relative - min-width: 26px - height: 20px - &__body - position: absolute - display: flex - .avatar - position: relative - z-index: 2 - display: flex - width: 20px - height: 20px - box-sizing: content-box - margin-right: -11px - background-color: $app-color-canvas-overlay - border-right: 1px solid $app-color-canvas-overlay - border-radius: 4px - box-shadow: none - transition: margin .1s ease-in-out - img - border-radius: 4px - &:first-child - z-index: 3 - &:last-child - z-index: 1 - border-right: 0 - -.avatar - display: inline-block - overflow: hidden - line-height: 1 - vertical-align: middle - background-color: $app-color-canvas-overlay - border-radius: 6px - flex-shrink: 0 - box-shadow: 0 0 0 1px $app-color-btn-hover-border - &-user - border-radius: 50% !important - -.counter - display: inline-block - min-width: 20px - padding: 0 6px - font-size: 12px - font-weight: 500 - line-height: 18px - color: $app-color-fg-default - text-align: center - background-color: $app-color-neutral-muted - border: 1px solid $app-color-counter-border - border-radius: 2em - -.btn - .counter - margin-left: 2px - color: inherit - text-shadow: none - vertical-align: top - background-color: $app-color-btn-counter-bg - -.hover-effect - background-color: $app-color-btn-hover-bg - border-color: $app-color-btn-hover-border - transition-duration: .1s - -.btn - &:hover,&.hover - @extend .hover-effect - -[open] - & > .btn - @extend .hover-effect - -.cdk-overlay-pane - box-shadow: $app-color-shadow-large - -.mat-menu-content - &:not(:empty) - padding-top: 0px !important - padding-bottom: 0px !important - -.label - display: inline-block - padding: 0 7px - font-size: 12px - font-weight: 500 - line-height: 18px - border: 1px solid transparent - border-radius: 2em - border-color: $app-color-border-default - &--secondary - color: $app-color-fg-muted - border-color: $app-color-border-default - -.select-menu-modal - position: relative - z-index: 99 - display: flex - max-height: 66% - margin: auto 0 - overflow: hidden - pointer-events: auto - flex-direction: column - background-color: $app-color-canvas-overlay - border: 1px solid $app-color-select-menu-backdrop-border - border-radius: 12px - animation: select-menu-modal-animation .12s cubic-bezier(0, 0.1, 0.1, 1) backwards - -.select-menu-header - display: flex - padding: 16px - flex: none - align-items: center - border-bottom: 1px solid $app-color-border-muted - -.select-menu-title - flex: 1 - font-size: 14px - font-weight: 600 - margin: 0 - -.select-menu-close-btn - padding: 16px - margin: -16px - line-height: 1 - color: $app-color-fg-muted - background-color: transparent - border: 0 - -.select-menu-list - position: relative - padding: 0 - margin: 0 - margin-bottom: -1px - flex: auto - overflow-x: hidden - overflow-y: auto - background-color: $app-color-canvas-overlay - -webkit-overflow-scrolling: touch - -.select-menu-item - display: flex - align-items: center - width: 100% - padding: 16px - overflow: hidden - color: var(--color-fg-default) - text-align: left - cursor: pointer - background-color: $app-color-canvas-overlay - border: 0 - border-bottom: 1px solid $app-color-border-muted - -.select-menu-icon - width: 16px - margin-right: 8px - flex-shrink: 0 - &--check - visibility: hidden - transition: transform .12s cubic-bezier(0.5, 0.1, 1, 0.5),visibility 0s .12s linear - transform: scale(0) - -.select-menu-item[aria-checked="true"] - .select-menu-icon--check - visibility: visible - transition: transform .12s cubic-bezier(0, 0, 0.2, 1),visibility 0s linear - transform: scale(1) - -@keyframes select-menu-modal-animation - 0% - opacity: 0 - transform: translateY(-16px) - -@media (max-width: 480px) - * - font-size: 15px - -@media (max-width: 768px) - .border-sm-top - border-top: 1px solid #dee2e6 !important - border-top-width: 1px !important - border-top-style: solid !important - border-top-color: rgb(222, 226, 230) !important - -@media (min-width: 768px) - .border-md-0 - border-top: none !important - .border-md-top-0 - border-top: 0 !important - .flex-md-row - flex-direction: row !important - .flex-md-self-auto - align-self: auto !important - //margin - .mt-md-n3 - margin-top: -16px !important - .mb-md-n3 - margin-bottom: -16px !important - .mr-md-3 - margin-right: 16px !important - .py-md-3 - padding-top: 16px !important - padding-bottom: 16px !important - -// For Markdown editor -.file - position: relative - margin-top: 16px - margin-bottom: 16px - border: 1px solid $app-color-border-default - border-radius: 6px - .file-header - padding: 5px 10px - background-color: $app-aliceBlue - border-bottom: 1px solid $app-color-border-default - border-top-left-radius: 6px - border-top-right-radius: 6px - .file-info - font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace - font-size: 12px - line-height: 32px - .file-content - padding: 40px 25px - .variable-textarea - width: 100% - min-height: 300px - height: max-content - border: none - outline: none - -markdown - * - font: revert !important - h1 a - text-decoration: none - h1 a:hover - opacity: 0.87 - text-decoration: underline - blockquote - border-left: 3px solid rgba(0,0,0,0.21) - padding-left: 12px - color: rgba(0,0,0,0.54) - -// Material Chip -.app-mat-chip - & ::ng-deep .mat-standard-chip - cursor: pointer - -.mat-standard-chip - min-height: 25px - border-radius: 16px - padding: 10px - -.mat-chip - color: $app-navyBlue - background: $app-aliceBlue - font-size: 12px -// ///// - -.user-mention, .team-mention - font-weight: 600 - color: $app-color-fg-default - white-space: nowrap - - ////// Boxes ///// -.box - background-color: $app-color-canvas-overlay - border-color: $app-color-border-default - border-style: solid - border-width: 1px - border-radius: 6px - &:focus, &:hover - background-color: $app-aliceBlue - &--condensed - line-height: 1.25 - .box__row - padding: 8px 16px - &__row - padding: 16px - margin-top: -1px - list-style-type: none - border-top-color: $app-color-border-muted - border-top-style: solid - border-top-width: 1px - &:first-of-type - border-top-left-radius: 6px - border-top-right-radius: 6px - border-top-color: transparent - &:last-of-type - border-bottom-right-radius: 6px - border-bottom-left-radius: 6px - -.avatar-stack - position: relative - min-width: 26px - height: 20px - &__body - display: flex - background: $app-color-canvas-overlay - .avatar - position: relative - z-index: 2 - display: flex - width: 20px - height: 20px - box-sizing: content-box - margin-right: -11px - background-color: $app-color-canvas-overlay - border-right: 1px solid $app-color-canvas-overlay - border-radius: 4px - box-shadow: none - transition: margin .1s ease-in-out - &:last-child - z-index: 1 - border-right: 0 - &:first-child - z-index: 3 - &:not(:hover) - background-color: transparent - .avatar-stack__body - position: absolute -/////// - -.signer-block-info - z-index: 999 - grid-template-columns: 0.15fr 1fr - -.signed-commit-header - line-height: 1.3 - white-space: normal - grid-template-columns: 0.15fr 1fr - border-top-left-radius: 6px - border-top-right-radius: 6px - * - font-size: 15px - -.signed-commit-signer-name - font-size: 14px - text-align: left - .signer - display: block - font-weight: 600 - font-size: 14px - -.signed-commit-footer - &__id - color: $app-nero - span, a - font-size: 12px - line-height: 1.5 - -.signed-commit-badge - user-select: none - background: none - vertical-align: middle - border-color: $verylightgrey - &.verified - color: $app-success - &:hover - border-color: $app-harmonies - text-decoration: none - -.verified-commit - display: inline-block - overflow: visible !important - vertical-align: text-bottom - fill: currentColor - -.signed-commit-verified-label - color: $app-success - white-space: nowrap - -.signed-commit-badge-small - display: inline-block - padding: 0 7px - font-size: 12px - font-weight: 500 - line-height: 18px - border: 1px solid $verylightgrey - border-radius: 2em - -.signed-commit__popup-header - .mat-typography - h3 - margin: 0 !important - - ::ng-deep ngb-popover-window.bs-popover-left>.arrow - display: none - - ::ng-deep ngb-popover-window .popover-header - margin: 0 - -.overflow-visible - overflow: visible !important diff --git a/src/assets/styles/var.scss b/src/assets/styles/var.scss new file mode 100644 index 000000000..7a1a8c6fb --- /dev/null +++ b/src/assets/styles/var.scss @@ -0,0 +1,790 @@ +@use '@angular/material' as mat; + +@include mat.core(); + +$app-primary: #F1F1F1; +$app-dark: #1C1C1C; +$app-white: #FFFFFF; +$app-emperor: #535353; +$app-veryLightGray: #DEDEDE; +$app-darkSeaGreen: #86BA90; +$app-navyBlue: #0969da; +$app-aliceBlue: #f6f8fa; +$app-lightGrayishBlue: #dee2e6; +$app-cloudy: #57606a; +$app-nero: #282828; +$secondary: #57606a; +$app-disabled: rgba(88, 87, 87, 0.42); +$app-background-btn: #f3f4f6; +$app-versatileBusinessDark: rgba(221, 221, 221, 0.25); +$app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); +// The "warn" palette is optional and defaults to red if not specified. +$app-warn: mat.define-palette(mat.$red-palette); +$my-theme: mat.define-light-theme($app-primary, $app-accent, $app-warn); +$verylightgrey: #cccccc; +$darkgreentea: rgb(142, 195, 79); +$app-success: #1a7f37; +$app-harmonies: #2da44e; +$app-naples-yellow: #eac54f; +$app-color-btn-counter-bg: #1b1f2414; +$app-color-counter-border: #00000000; +$app-color-neutral-muted: #afb8c133; +$app-color-fg-default: #24292f; +$app-color-btn-hover-bg: #f3f4f6; +$app-color-btn-hover-border: #1b1f2426; +$app-color-border-default: #d0d7de; +$app-color-select-menu-backdrop-border: #00000000; +$app-color-canvas-overlay: #ffffff; +$app-color-canvas-subtle: #f6f8fa; +$app-color-border-muted: #d8dee4; +$app-color-shadow-large: 0 8px 24px rgba(140, 149, 159, 0.2); +$app-color-fg-muted: #57606a; +$app-color-btn-border: #ced4da; +$app-color-timeline-badge-bg: #eaeef2; +$app--color-overview-history-summary-bg: #ddf4ff; +$app--color-table-header-bg: #f6f8fa; +$app-color-primer-border-active: #fd8c73; +$app-color-action-list-item-default-selected-bg: #d0d7de3d; +$app-color-accent-fg: #0969da; +$app-color-action-list-item-inline-divider: #d0d7de7a; + +.input-group-button { + vertical-align: middle; +} + +.color-border-muted { + border-color: $app-color-border-muted !important; +} + +.color-bg-default { + background-color: $app-color-canvas-overlay !important; +} + +.color-bg-subtle { + background-color: $app-color-canvas-subtle !important; +} + +.color-fg-success { + color: $app-harmonies; +} + +.color-fg-default { + color: $app-color-fg-default; +} + +.color-fg-muted { + color: $app-color-fg-muted; +} + +.link--primary { + color: $app-color-fg-default !important; + + &:hover { + color: $app-navyBlue !important; + } +} + +.link--secondary { + color: $secondary !important; + + &:hover { + color: $app-navyBlue !important; + } +} + +.box { + &-title { + font-size: 20px; + line-height: 20px; + font-weight: 600; + margin: 0; + } + + &-header { + width: 100%; + padding: 16px; + margin: 0; + background-color: $app-aliceBlue; + border-color: $app-color-border-default; + border-style: solid; + border-width: 1px; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } +} + +.min-width-0 { + min-width: 0 !important; +} + +.d-none { + display: none; +} + +.position-relative { + position: relative !important; +} + +.width-full { + width: 100% !important; +} + +.flex-auto { + flex: auto !important; +} + +.flex-order-2 { + order: 2 !important; +} + +.flex-self-stretch { + align-self: stretch !important; +} + +.f6 { + font-size: 12px !important; +} + +.color-text-tertiary { + color: $app-cloudy; +} + +.color-bg-tertiary { + background-color: $app-aliceBlue; +} + +.rounded-1 { + border-radius: 4px !important; +} + +.border-white-fade { + border-color: $app-versatileBusinessDark; +} + +.rounded-2 { + border-radius: 6px !important; +} + +.rounded-top-1 { + border-top-left-radius: 6px !important; + border-top-right-radius: 6px !important; +} + +.rounded-left-2 { + border-bottom-left-radius: 6px !important; + border-top-left-radius: 6px !important; +} + +.border-right-0 { + border-right: 0 !important; +} + +.border-right-1 { + border-right: 1px !important; +} + +.border-left-0 { + border-left: 0 !important; +} + +.border-left-1 { + border-left: 1px !important; +} + +.rounded-right-2 { + border-bottom-right-radius: 6px !important; + border-top-right-radius: 6px !important; +} + +.btn-group-parent { + float: left; + height: 28px; + width: max-content; + background: none; + + .btn-group-item { + border-right-width: 1px; + border-radius: 1px; + position: relative; + float: left; + border-color: $app-color-border-default; + height: inherit; + background: $app-aliceBlue; + + &:first-child { + &:active, + &:disabled { + border-color: $app-color-border-default; + } + } + + &:last-child { + border-right-width: 1px; + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; + } + + span { + font-size: 12px; + } + + &:hover { + border-color: $app-color-border-default; + } + } +} + +.btns-group-item { + &:first-child { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + } + + &:last-child { + border-top-left-radius: 0; + } +} + +.btn { + &.btn-gray { + background-color: $app-background-btn; + border-color: $app-color-btn-border !important; + + &:hover { + background-color: $app-color-btn-hover-border; + } + } +} + +.clipboard-btn { + height: 100%; + + &.clipboard-btn--success { + border-color: $app-harmonies !important; + } +} + +.mr-0 { + margin-right: 0 !important; +} + +.mr-1 { + margin-right: 6px !important; +} + +.mr-2 { + margin-right: 8px !important; +} + +.mr-3 { + margin-right: 10px !important; +} + +.mr-4 { + margin-right: 20px !important; +} + +.ml-3 { + margin-left: 16px !important; +} + +.mb-n1 { + margin-bottom: -4px !important; +} + +.ml-n1 { + margin-left: -4px !important; +} + +.mr-n1 { + margin-right: -4px !important; +} + +.mt-n1 { + margin-top: -4px !important; +} + +.css-truncate { + &.css-truncate-overflow, + &.css-truncate-target { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .css-truncate-overflow, + .css-truncate-target { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } +} + +.hx_avatar_stack_commit { + .avatar-stack { + height: 24px; + min-width: 24px; + } +} + +.avatar-stack { + position: relative; + min-width: 26px; + height: 20px; + + .avatar { + position: relative; + z-index: 2; + display: flex; + width: 20px; + height: 20px; + box-sizing: content-box; + margin-right: -11px; + background-color: $app-color-canvas-overlay; + border-right: 1px solid $app-color-canvas-overlay; + border-radius: 4px; + box-shadow: none; + transition: margin .1s ease-in-out; + + img { + border-radius: 4px; + } + } +} + +.avatar { + display: inline-block; + overflow: hidden; + line-height: 1; + vertical-align: middle; + background-color: $app-color-canvas-overlay; + border-radius: 6px; + flex-shrink: 0; + box-shadow: 0 0 0 1px $app-color-btn-hover-border; + + &-user { + border-radius: 50% !important; + } +} + +.counter { + display: inline-block; + min-width: 20px; + padding: 0 6px; + font-size: 12px; + font-weight: 500; + line-height: 18px; + color: $app-color-fg-default; + text-align: center; + background-color: $app-color-neutral-muted; + border: 1px solid $app-color-counter-border; + border-radius: 2em; +} + +.btn { + .counter { + margin-left: 2px; + color: inherit; + text-shadow: none; + vertical-align: top; + background-color: $app-color-btn-counter-bg; + } +} + +.hover-effect { + background-color: $app-color-btn-hover-bg; + border-color: $app-color-btn-hover-border; + transition-duration: .1s; +} + +.btn { + &:hover, + &.hover { + @extend .hover-effect; + } +} + +[open] { + & > .btn { + @extend .hover-effect; + } +} + +.cdk-overlay-pane { + box-shadow: $app-color-shadow-large; +} + +.mat-menu-content { + &:not(:empty) { + padding-top: 0 !important; + padding-bottom: 0 !important; + } +} + +.label { + display: inline-block; + padding: 0 7px; + font-size: 12px; + font-weight: 500; + line-height: 18px; + border: 1px solid $app-color-border-default; + border-radius: 2em; + + &--secondary { + color: $app-color-fg-muted; + border-color: $app-color-border-default; + } +} + +.select-menu-modal { + position: relative; + z-index: 99; + display: flex; + max-height: 66%; + margin: auto 0; + overflow: hidden; + pointer-events: auto; + flex-direction: column; + background-color: $app-color-canvas-overlay; + border: 1px solid $app-color-select-menu-backdrop-border; + border-radius: 12px; + animation: select-menu-modal-animation .12s cubic-bezier(0, 0.1, 0.1, 1) backwards; +} + +.select-menu-header { + display: flex; + padding: 16px; + flex: none; + align-items: center; + border-bottom: 1px solid $app-color-border-muted; +} + +.select-menu-title { + flex: 1; + font-size: 14px; + font-weight: 600; + margin: 0; +} + +.select-menu-close-btn { + padding: 16px; + margin: -16px; + line-height: 1; + color: $app-color-fg-muted; + background-color: transparent; + border: 0; +} + +.select-menu-list { + position: relative; + padding: 0; + margin: 0; + margin-bottom: -1px; + flex: auto; + overflow-x: hidden; + overflow-y: auto; + background-color: $app-color-canvas-overlay; + -webkit-overflow-scrolling: touch; +} + +.select-menu-item { + display: flex; + align-items: center; + width: 100%; + padding: 16px; + overflow: hidden; + color: var(--color-fg-default); + text-align: left; + cursor: pointer; + background-color: $app-color-canvas-overlay; + border: 0; + border-bottom: 1px solid $app-color-border-muted; +} + +.select-menu-icon { + width: 16px; + margin-right: 8px; + flex-shrink: 0; + + &--check { + visibility: hidden; + transition: transform .12s cubic-bezier(0.5, 0.1, 1, 0.5), visibility 0s .12s linear; + transform: scale(0); + } +} + +.select-menu-item[aria-checked='true'] { + .select-menu-icon--check { + visibility: visible; + transition: transform .12s cubic-bezier(0, 0, 0.2, 1), visibility 0s linear; + transform: scale(1); + } +} + +@keyframes select-menu-modal-animation { + 0% { + opacity: 0; + transform: translateY(-16px); + } +} + +@media (max-width: 480px) { + * { + font-size: 15px; + } +} + +@media (max-width: 768px) { + .border-sm-top { + border-top: 1px solid #dee2e6 !important; + } +} + +@media (min-width: 768px) { + .border-md-0 { + border-top: none !important; + } + .border-md-top-0 { + border-top: 0 !important; + } + .flex-md-row { + flex-direction: row !important; + } + .flex-md-self-auto { + align-self: auto !important; + } + //margin + .mt-md-n3 { + margin-top: -16px !important; + } + .mb-md-n3 { + margin-bottom: -16px !important; + } + .mr-md-3 { + margin-right: 16px !important; + } + .py-md-3 { + padding-top: 16px !important; + padding-bottom: 16px !important; + } +} + +; +.file { + position: relative; + margin-top: 16px; + margin-bottom: 16px; + border: 1px solid $app-color-border-default; + border-radius: 6px; + + .file-header { + padding: 5px 10px; + background-color: $app-aliceBlue; + border-bottom: 1px solid $app-color-border-default; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + + .file-info { + font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; + font-size: 12px; + line-height: 32px; + } + + .file-content { + padding: 40px 25px; + } + + .variable-textarea { + width: 100%; + min-height: 300px; + height: max-content; + border: none; + outline: none; + } +} + +markdown { + * { + font: revert !important; + } + + h1 a { + text-decoration: none; + } + + h1 a:hover { + opacity: 0.87; + text-decoration: underline; + } + + blockquote { + border-left: 3px solid rgba(0, 0, 0, 0.21); + padding-left: 12px; + color: rgba(0, 0, 0, 0.54); + } +} + +.app-mat-chip { + & ::ng-deep .mat-standard-chip { + cursor: pointer; + } +} + +.mat-standard-chip { + min-height: 25px; + border-radius: 16px; + padding: 10px; +} + +.mat-chip { + color: $app-navyBlue; + background: $app-aliceBlue; + font-size: 12px; +} + +.user-mention, +.team-mention { + font-weight: 600; + color: $app-color-fg-default; + white-space: nowrap; +} + +.box { + background-color: $app-color-canvas-overlay; + border-color: $app-color-border-default; + border-style: solid; + border-width: 1px; + border-radius: 6px; + + &:focus, + &:hover { + background-color: $app-aliceBlue; + } + + &--condensed { + line-height: 1.25; + + .box__row { + padding: 8px 16px; + } + } + + &__row { + padding: 16px; + margin-top: -1px; + list-style-type: none; + border-top-color: $app-color-border-muted; + border-top-style: solid; + border-top-width: 1px; + + &:first-of-type { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + border-top-color: transparent; + } + + &:last-of-type { + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + } + } +} + +.signer-block-info { + z-index: 999; + grid-template-columns: 0.15fr 1fr; +} + +.signed-commit-header { + line-height: 1.3; + white-space: normal; + grid-template-columns: 0.15fr 1fr; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + + * { + font-size: 15px; + } +} + +.signed-commit-signer-name { + font-size: 14px; + text-align: left; + + .signer { + display: block; + font-weight: 600; + font-size: 14px; + } +} + +.signed-commit-footer { + &__id { + color: $app-nero; + } + + span, + a { + font-size: 12px; + line-height: 1.5; + } +} + +.signed-commit-badge { + user-select: none; + background: none; + vertical-align: middle; + border-color: $verylightgrey; + + &.verified { + color: $app-success; + } + + &:hover { + border-color: $app-harmonies; + text-decoration: none; + } +} + +.verified-commit { + display: inline-block; + overflow: visible !important; + vertical-align: text-bottom; + fill: currentColor; +} + +.signed-commit-verified-label { + color: $app-success; + white-space: nowrap; +} + +.signed-commit-badge-small { + display: inline-block; + padding: 0 7px; + font-size: 12px; + font-weight: 500; + line-height: 18px; + border: 1px solid $verylightgrey; + border-radius: 2em; +} + +.signed-commit__popup-header { + .mat-typography { + h3 { + margin: 0 !important; + } + } + + ::ng-deep ngb-popover-window.bs-popover-left > .arrow { + display: none; + } + + ::ng-deep ngb-popover-window .popover-header { + margin: 0; + } +} + +.overflow-visible { + overflow: visible !important; +} \ No newline at end of file diff --git a/src/styles.sass b/src/styles.sass deleted file mode 100644 index e6e6addd4..000000000 --- a/src/styles.sass +++ /dev/null @@ -1,1190 +0,0 @@ - -@import '@angular/material/theming' -@include mat-core() -@import "bootstrap-icons/font/bootstrap-icons.css" -/* Importing Bootstrap SCSS file. */ -@import 'bootstrap/scss/bootstrap' -@import "assets/styles/var" -@import "@danielmoncada/angular-datetime-picker/assets/style/picker.min.css" - -// Use the desired palette -$palette: mat-palette($mat-indigo) -// Create the theme -$theme: mat-light-theme($palette, $palette) - -// Or wrap inside another selector to scope the styles to only one specific component -app-add-polling-source - @include mat-stepper-theme($theme) - -body - font-size: 14px - overflow-x: hidden - -* - font-size: 14px - -.h3-custom - font-size: 20px !important - -.lh-condensed - line-height: 1.25 !important - -a - text-decoration: none - &:hover - text-decoration: underline - cursor: pointer - &:active, &:hover - outline-width: 0 - -.sr-only - display: none - -.color-text-secondary - color: $secondary - -.text-small - font-size: 12px - -.mat-divider - color: $app-lightGrayishBlue - -.card--title - position: relative - padding-top: 11px - padding-bottom: 11px - height: 48px - border-radius: 4px 4px 0px 0px - border-bottom: 1px solid $app-veryLightGray - align-items: center - -.card--row - padding: 11px - -.table-header-background - background-color: $app--color-table-header-bg - -#dataset-viewer - .dataset-info - display: grid - &--subtitle - box-sizing: border-box - font-size: 0.857143em - font-style: inherit - font-weight: 600 - color: $app-emperor - align-items: center - display: flex - margin: 0 - &--text - align-items: center - background-color: transparent - border-color: transparent - border-radius: 3px - border-style: solid - box-sizing: border-box - display: flex - flex: 1 0 auto - font-size: 14px - justify-content: space-between - line-height: 1.42857 - max-width: 100% - overflow: hidden - transition: background-color 0.2s ease-in-out 0s, border-color 0.2s ease-in-out 0s - overflow-wrap: break-word - border-width: 2px - padding: 6px - margin: 0 - &--block - display: flex - flex-direction: row - align-items: center - height: auto - max-height: 100% - outline: 0px - pointer-events: auto - &--sub-block - position: relative - flex-grow: 1 - box-sizing: border-box - padding-right: 10px - min-width: 100px - width: 40% - padding-top: 8px - line-height: 1 - -.dataset-view-type-toggle-group - .mat-button-toggle-disabled - .mat-button-toggle-button - cursor: not-allowed - color: rgb(0 0 0 / 51%) - -.app-active-button - background: $app-darkSeaGreen - border-radius: 4px - border: none - color: $app-white - display: flex - flex-direction: row - align-items: center - padding: 7px 12px - margin: 0 0.3rem - &:hover, &:focus, &:active - text-decoration: none - color: $app-emperor - -.app-header - height: 90px - a - margin: 0 20px - p - color: $app-white - font-style: normal - font-weight: normal - font-size: 18px - .navbar - padding: 0 - -[data-test-id="appLogo"] - background: none - border: none - -.mat-progress-spinner - circle - stroke: $app-darkSeaGreen !important - -.mat-menu-panel - &.app-header__user-menu - background-color: white - border: 1px solid $app-lightGrayishBlue - .mat-menu-item - background-color: white - -#appHeaderLogo - img - height: 32px - width: 32px - -.header-item - display: flex - margin-right: 16px - align-self: stretch - align-items: center - flex-wrap: nowrap - -.header-link - text-decoration: none - -#app-header - z-index: 32 - display: flex - padding: 16px - font-size: 14px - line-height: 1.5 - align-items: center - justify-content: space-between - .details:not(.details--on) - .details-content--hidden-not-important - display: none - .header-item--full - flex: auto - a, button - flex: none - .input-control - position: relative - flex: 1 1 auto - width: 1% - min-width: 0 - margin-bottom: 0 - border-top-right-radius: 0 - border-bottom-right-radius: 0 - height: calc(1.5em + 0.75rem + 2px) - font-size: 1rem - font-weight: 400 - line-height: 1.5 - border: 1px solid #ced4da - -.jump-to-badge-jump - display: none - -.active-search-input - input - color: $app-white - -.octicon - display: inline-block - overflow: visible !important - vertical-align: text-bottom - fill: currentColor - -.header-signout-btn - background: none - border: none - text-align: left - padding: initial - -#navbarNavDropdown - .navbar-nav - width: 100% - .nav-item - width: 100% - transition: all .5s linear - line-height: 150px - .active-search-input - width: 100% - ngb-typeahead-window - width: 100% - line-height: 1 - ngb-highlight - color: $app-nero - .dropdown-item - display: flex - justify-content: space-between - height: 30px - padding-left: 10px - padding-right: 10px - margin: 5px 0 - * - color: $app-nero - button - color: $app-nero - &.active - * - color: $app-white - .jump-to-badge-jump - justify-content: center - align-items: center - display: flex - color: $app-nero - * - color: $app-nero - -.app-brand - grid-area: appBrandArea - > img - width: 77px - height: 55px - -a:visited - color: inherit - -.mat-app-background, .mat-drawer-container - background-color: $app-aliceBlue - -#app-header - background-color: $app-dark - * - color: $app-primary - .navbar-nav - margin: auto - -.details:not(.details--on) - .details-content--hidden-not-important - display: none - -.header-search - max-width: 100% - transition: all .5s linear - -.header-search - &:focus-within - max-width: 100% - width: 100% - -.notification-indicator-container - width: 1.5em - -.app-main-container - height: 100% - width: 100% - .navbar - padding: 20px - -.mat-drawer-inner-container - .navbar-nav - width: 100% - padding: 16px - .nav-item - width: 100% - margin-bottom: 8px - border-radius: 4px - padding: 12px 16px - box-sizing: border-box - color: $app-emperor - .nav-link - &:hover, &:focus - background: $app-darkSeaGreen - color: $app-white - .mat-drawer.mat-drawer-side - width: 208px - .mat-drawer-container - background: inherit - overflow: auto - -.app-content - display: grid - margin: 33px auto - padding: 0 16px - flex-direction: row - width: 100% - grid-template-columns: 1fr - grid-gap: 24px - &--header - grid-template-columns: 1fr 1fr - display: grid - -#dataset-view - a - &:visited - color: inherit - -router-outlet - display: none - -.app-content__card-columns - column-count: 1 - grid-column-gap: 1.25rem - column-gap: 1.25rem - orphans: 1 - widows: 1 - -.app-header__right-column - grid-area: appHeaderArea - display: flex - align-items: center - justify-content: flex-end - color: white - > span - margin-right: 5px - -.app-header__right-column__addnew-block - margin-right: 5% - display: flex - justify-content: space-around - background: none - border: none - > span - &:first-child - margin-right: 10px - -.app-header__right-column__label - display: block - -#appHeaderAdditionalBlock - .button-round - width: 50px - height: 50px - min-width: 50px - border-radius: 35px - overflow: hidden - display: block - padding: 0 - -#matmenu-signed-in-name - white-space: nowrap - overflow: hidden - text-overflow: ellipsis - display: block - line-height: 48px - height: 48px - padding: 0 16px - text-align: left - text-decoration: none - max-width: 100% - position: relative - font-family: Roboto, "Helvetica Neue", sans-serif - font-size: 14px - font-weight: 400 - * - font-family: Roboto, "Helvetica Neue", sans-serif - font-size: 14px - font-weight: 600 - -.img-container-round - width: 50px - height: 50px - background: #C4C4C4 - border: 2px solid $app-white - box-sizing: border-box - border-radius: 35px - overflow: hidden - position: relative - > img - position: absolute - object-fit: cover - height: 100% - top: 0 - left: 0 - -.search-input-container - height: 42.5px - -#searchInput - grid-area: appSearchInputArea - width: 100% - min-height: 28px - line-height: 20px - max-width: 100% - padding: 0 - font-size: inherit - font-weight: 400 - vertical-align: middle - box-shadow: none - @extend .search-input-container - -#mobileMenuButton - &.mobileSearch - grid-area: appMobileMenu - position: relative - i - color: $app-primary - font-size: 30px - -.search-header-container-block - margin-bottom: 20px - -#search - .dataset-full-result-container - grid-template-columns: 1fr - .dataset-result-container, .search-result-container - grid-template-columns: 0.25fr 1fr - ul - list-style-type: none - .mat-checkbox-layout - .mat-checkbox-label - font-size: 16px - -#dataset-viewer - .search-result-container - grid-template-columns: 0.25fr 1fr - .dataset-result-container - grid-template-columns: 1fr 0.35fr - .dataset-view-data-result-container - grid-template-columns: 0.4fr 1fr - -#schema-block-table , #set-polling-source-schema , #set-polling-source-env-variables - * - padding: 0px 8px - font-size: 12px - height: 34px - -#search, #dataset-viewer - .nav-link - cursor: pointer - .nav-tabs - margin-bottom: 14px - border-bottom: none - .search-result-container, .dataset-result-container, .dataset-view-data-result-container - display: grid - align-items: start - grid-gap: 25px - table - width: 100% - .search-header-container-block - width: 100% - display: grid - align-items: center - justify-content: space-between - grid-template-columns: 1fr 0.25fr - grid-gap: 25px - > ul - &:first-child - align-items: center - margin-bottom: 9px - > ul - &:last-child - justify-content: flex-end - .nav-tabs - .nav-link - border: none - background-color: transparent - padding: 0.5rem 0.3rem 0 0.3rem - &.active, &:hover, &:focus - text-decoration: underline - &.active - font-weight: bold - .nav-link - padding: 0.5rem 0.3rem - color: $app-emperor - &:hover, &:focus, &:active - text-decoration: underline - -.search-result-container__content, .container-content - overflow: auto - padding: 20px 28px - background: $app-white - border: 1px solid $app-veryLightGray - box-sizing: border-box - box-shadow: 0px 5px 4px $app-versatileBusinessDark - border-radius: 8px - & [data-test-id="searchInput"] - height: 50px - -.dataset-view-type-toggle-group - width: 100% - overflow: auto - margin-bottom: 20px - -#dataset-viewer, #search - overflow: hidden - -.starred - .starred-button-icon - color: $app-naples-yellow !important - -.search-additional-buttons-minimize-block - .search-additional-buttons__nav - flex-direction: column - background: $app-white - .btn-group-item - width: 100% - .btn-group-parent - width: 100% - .nav-item - width: 100% - margin: 0 !important - padding: 0 !important - -#metadata-block - & .page-item:last-child .page-link, .page-item:first-child .page-link - padding: 1px - & #pagination-block - display: flex - justify-content: flex-end - -/*********** Search Page ******/ -.input-icon - background: none - color: white - position: absolute - top: 0 - left: 0 - z-index: 4 - border: none - padding-top: 0 - padding-bottom: 0 - height: 100% - > i - font-size: 18px - -#typeahead-http - &::placeholder - color: $app-white - -#searchInput - &.searchSidenav - .input-group - & > [data-test-id="searchInput"].form-control - background: $app-white - color: $app-emperor - box-shadow: 0px 5px 4px $app-versatileBusinessDark - -.input-group - & > [data-test-id="searchInput"].form-control - border-radius: 0.25rem - border-color: transparent - background: $app-emperor - color: $app-white - padding: 5px 12px - -.form-control - &:focus - box-shadow: 0 0 0 0.2rem #85bb906e - -.mat-header-cell - font-size: 20px - -[data-test-id="searchInput"], [data-test-id="addNewBlock"], -[data-test-id="openUserInfo"], [data-test-id="appLogo"] - cursor: pointer - -.input-datasets-list - justify-content: left - display: flex - align-items: baseline - & > *:last-child - margin-left: 16px - -.gist - font-size: 16px - color: #333 - text-align: left - direction: ltr - text-rendering: auto - .gist-file - margin-bottom: 1em - font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace - border: 1px solid #ddd - border-bottom: 1px solid #ccc - border-radius: 6px - article - padding: 6px - .gist-data - overflow: auto - word-wrap: normal - background-color: $app-color-canvas-overlay - border-bottom: 1px solid #ddd - border-radius: 6px 6px 0 0 - .markdown-body - font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji" - font-size: 16px - line-height: 1.5 - word-wrap: break-word - pre - padding: 16px - overflow: auto - font-size: 85% - line-height: 1.45 - background-color: $app-color-canvas-subtle - border-radius: 6px - -.search-additional-buttons__nav - justify-content: end - align-items: end - -.search-additional-buttons-minimize-block - ul - background: $app-white - border: 1px solid $app-veryLightGray - box-sizing: border-box - box-shadow: 0 5px 4px $app-versatileBusinessDark - border-radius: 5px - li - border-radius: 0 !important - border: none - border-bottom: 1px solid #d0d7de !important - &:last-child - border-bottom: none !important - .btn-group-item - border: none - .additional-options-btn - border-top: none !important - border-right: none !important - border-bottom: none !important -/*************************/ -@media (max-width: 480px) - .app-header__right-column__label - display: none - - .app-header__right-column__addnew-block - width: 18% - - .app-brand - > img - width: 60px - height: 50px - - .app-active-button__container - margin-top: 7px - -@media (max-width: 768px) - .app-content - grid-template-columns: 1fr - &--header - grid-template-columns: 1fr 0.1fr - display: grid - - #search, #dataset-viewer - .search-result-container, .dataset-view-data-result-container - grid-template-columns: 1fr - - .search-header-container-block - grid-template-columns: 1fr - > ul - &:last-child - justify-content: flex-start - - .search-additional-buttons-block - display: flex - justify-content: flex-end - align-items: flex-end - -@media (max-width: 991px) - #app-header - #appHeaderMenuButton, #appHeaderLogo, #appHeaderAdditionalBlock - order: 0 - #navbarNavDropdown - order: 1 - .navbar-nav - margin: 20px auto - - #dataset-viewer - .dataset-result-container - grid-template-columns: 1fr - -@media (min-width: 768px) - .header-search - max-width: 272px - width: 100% - - .header-search - &:focus-within - max-width: 544px - - #navbarNavDropdown - .navbar-nav - .active-search-input - width: 150% - -.avatar - display: inline-block - overflow: hidden - line-height: 1 - vertical-align: middle - background-color: white - border-radius: 6px - flex-shrink: 0 - box-shadow: 0 0 0 1px #1b1f2426 - -.avatar-2 - width: 20px - height: 20px - -.avatar-user - border-radius: 50% !important - -// MODAL MODULE - -.modal__dialog, .modal__bigtest-dialog - margin: 0 auto - background: white - box-sizing: border-box - max-width: 300px - min-height: 80px - border: 1px solid $app-nero - border-radius: 4px - text-align: center - opacity: 0 - transition: transform 1s linear - animation: ani 1.5s forwards - -.modal__dialog__header-block - width: 100% - padding: 1.5em - -.modal__dialog__footer-block - width: 100% - -.modal__content .modal__bigtest-dialog - width: 90vw - max-width: none - -@keyframes ani - 0% - opacity: 0 - transform: translateY(-50%) - 100% - opacity: 1 - transform: translateY(0%) - -.modal__bigtext-block - display: block - width: 100% - height: 60vh - overflow-y: scroll - margin-bottom: 26px - &__container - text-align: left - font-size: 14pt - font-family: "Helvetica Neue" - a - color: #0087ff - text-decoration: underline - vertical-align: baseline - text-decoration-skip-ink: none - font-style: normal - -.modal__header - font-size: 1.25em - margin-bottom: 1em - &-black - @extend .modal__header - color: black - font-size: 1.4em - &-error - @extend .modal__header - color: red - &-warning - @extend .modal__header - color: $warning - &-ok - @extend .modal__header - color: darkgreen - &-info - @extend .modal__header - color: #4494ff - -.link-green - color: $green-100 - &__inline - border-bottom: 1px $green-100 solid - -.cache-modal - &__content - flex-direction: column - justify-content: center - align-items: center - position: fixed - right: 0 - left: 0 - bottom: 0 - display: flex - z-index: 2000 - max-width: 560px - min-width: 320px - margin: 0 auto - background: white - box-sizing: border-box - border: 1px solid #c9c7cb - &__header - width: 100% - text-align: right - &__dialog - margin: 0 - text-align: center - width: 100% - &__privacy-policy-text - margin: 20px 2% - > a - @extend .link-green - @extend .link-green__inline - &__close-btn - background: transparent - border: none - cursor: pointer - display: flex - justify-content: flex-end - align-items: center - color: $app-nero - font-size: 24px - width: 100% - -.base_modal__content - background: #0000007a - flex-direction: column - justify-content: center - align-items: center - position: fixed - top: 0 - right: 0 - left: 0 - display: flex - -.modal__content - @extend .base_modal__content - bottom: 0 - z-index: 2000 - &__unsupported-account - @extend .base_modal__content - bottom: 0 - z-index: 1001 - -.modal__body - @extend .text-center - margin: 0 auto - background: white - width: 70% - max-width: 320px - min-height: 80px - padding: 1.5em 2em 1em - border-radius: 20px - -.modal__img - display: flex - width: auto - padding: 0 0 1em - min-width: 30% - min-height: 13% - position: relative - background: url(./assets/icons/loadinfo.net.gif) no-repeat center - img - max-height: calc(100vh - 180px) - max-width: 100% - margin: 0 auto - -.modal__dialog__unsupported-account - @extend .modal__dialog - a - color: $blue - -.modal__msg - margin: 1em 0 - word-break: break-word - -.button__default - background-color: white - @extend .button - @extend %border-gray - -.modal__btn - @extend .button__default - border-radius: 0px 0px 4px 4px - min-width: 100% - font-weight: bold - &-first - width: 100% - margin: 0 - &-last - @extend .modal__btn-first - margin-top: 1em - -.upload - background-color: black - -#more-button - background: $app-white - border: 1px solid $app-veryLightGray - box-sizing: border-box - box-shadow: 0 5px 4px $app-versatileBusinessDark - border-radius: 8px - color: $app-emperor - -.button - height: 40px - cursor: pointer - font-family: 'Avenir', sans-serif - &:focus - outline: none - &[disabled] - opacity: 0.7 - img - height: 100% - .fa - color: inherit - &:active - background: linear-gradient(to bottom, rgba(204,204,204,0.8) 100%, #eee 0%) - -.account-container - grid-template-columns: 0.5fr 0.5fr - display: grid !important - -app-account .dropdown-menu - right: 0 - -.account-additional-main-info__list - .mail-outline - .mat-icon - font-size: 20px - height: 20px - width: 20px - -.layout - &.layout--sidebar-position-start - .layout-main - grid-column: 2/span 2 - -.underline-nav - display: flex - overflow-x: auto - overflow-y: hidden - justify-content: space-between - .mat-icon - height: 20px - width: 20px - font-size: 20px - -[role="menu"] - .underline-nav-item - display: flex - justify-content: flex-start - align-items: center - -details summary::-webkit-details-marker, -details summary::marker - display: none - content: "" - -.underline-nav-item - padding: 8px 16px - font-size: 14px - line-height: 30px - color: $app-color-fg-default - text-align: center - white-space: nowrap - background-color: transparent - border: 0 - border-bottom: 2px solid transparent - justify-content: center - align-items: center - display: flex - &.selected - font-weight: 600 - color: $app-color-fg-default - border-bottom-color: $app-color-primer-border-active - outline: 1px dotted transparent - outline-offset: -1px - &:not(.selected):hover, &:not(.selected):focus - color: $app-color-fg-default - text-decoration: none - border-bottom-color: $app-color-neutral-muted - outline: 1px dotted transparent - outline-offset: -1px - transition: border-bottom-color .12s ease-out -/******** MIXINZ ********/ -%border-none - border: 0px - -%border-gray - border: 1px solid $verylightgrey - -%border-green - border-radius: 5px - border: 1px solid #CEE794 - -%border-darkgreentea - border: 1px solid $darkgreentea - -%button-gradient - background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%) - -.sql-error-message - color: red - -.author - a - text-decoration: underline !important - color: $app-navyBlue !important - -.group-box-label - top: -10px - left: 10px - padding: 0 10px - background: white - width: fit-content - font-size: 9px - -.subnav-search-icon - position: absolute - top: 10px - left: 8px - display: block - text-align: center - pointer-events: none - -.fs-10 - font-size: 10px - -.fs-12 - font-size: 12px - -.multiselect-dropdown - .dropdown-btn - color: #6c757d !important - padding-left: 36px !important - -pre - display: flex - margin-top: 0 - margin-bottom: 0 - word-wrap: break-word - code - flex: 1 - line: height 1.5em - min-height: 100% - padding: 1em 1.2em - .hljs - font-size: 15px !important - font-weight: 500 !important - background-color: honeydew !important - -#toast-container - position: fixed - right: 20px - bottom: 20px - -.add-link - font-size: 16px - color: #0969DA!important - -.radio-group - display: flex - flex-wrap: wrap - justify-content: center - gap: 20px - .input-container - position: relative - height: 6rem - width: 12rem - .radio-input - position: absolute - height: 100% - width: 100% - margin: 0 - cursor: pointer - z-index: 2 - opacity: 0 - &:checked - & + .radio-item - border: 2px solid #1461b5f1 - background-color: #f1f5f9f1 - .radio-item - display: flex - flex-direction: column - justify-content: center - align-items: center - border: 1px solid black - height: 100% - border-radius: 10px - transition: all 200ms ease - .mat-icon - color: #1461b5f1 - font-size: 34px - height: 34px - width: 34px - - //////////// drag and drop style -.cdk-drag-preview - box-sizing: border-box - display: flex - justify-content: space-between - align-items: center - box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12) - -.cdk-drag-placeholder - opacity: 0 - -.cdk-drag-animating - transition: transform 250ms cubic-bezier(0, 0, 0.2, 1) - -.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder) - transition: transform 250ms cubic-bezier(0, 0, 0.2, 1) - -.cdk-overlay-container - z-index: 9999 !important - -.cdk-global-scrollblock - overflow: hidden !important - -.mat-tree - .mat-tree-node - .mat-icon-button - background-color: transparent !important - -.w-350 - width: 350px!important - -.button-custom - display: flex - padding: 5px 10px - align-items: center - justify-content: center - border: 1px solid black - border-radius: 5px - &:hover - cursor: pointer - filter: alpha(opacity=90) - -moz-opacity: 0.9 - opacity: 0.9 - -.no-button - border: none - background: transparent - &:hover - cursor: pointer - &:enabled - color: blue - -input - &.ng-invalid - &.ng-touched, &.ng-dirty - border-color: #dc3545 diff --git a/src/styles.scss b/src/styles.scss new file mode 100644 index 000000000..7c7589999 --- /dev/null +++ b/src/styles.scss @@ -0,0 +1,1642 @@ +@use '@angular/material' as mat; + +@include mat.core(); +@import 'bootstrap-icons/font/bootstrap-icons.css'; +/* Importing Bootstrap SCSS file. */ +@import 'bootstrap/scss/bootstrap'; +@import 'var'; +@import '@danielmoncada/angular-datetime-picker/assets/style/picker.min.css'; + +// Use the desired palette +$palette: mat.define-palette(mat.$indigo-palette); +// Create the theme +$theme: mat.define-light-theme($palette, $palette); + +// Or wrap inside another selector to scope the styles to only one specific component +app-add-polling-source { + @include mat.stepper-theme($theme); +} + +body { + font-size: 14px; + overflow-x: hidden; +} + +* { + font-size: 14px; +} + +.h3-custom { + font-size: 20px !important; +} + +.lh-condensed { + line-height: 1.25 !important; +} + +a { + text-decoration: none; + + &:hover { + text-decoration: underline; + cursor: pointer; + } + + &:active, + &:hover { + outline-width: 0; + } +} + +.sr-only { + display: none; +} + +.color-text-secondary { + color: $secondary; +} + +.text-small { + font-size: 12px; +} + +.mat-divider { + color: $app-lightGrayishBlue; +} + +.card--title { + position: relative; + padding-top: 11px; + padding-bottom: 11px; + height: 48px; + border-radius: 4px 4px 0 0; + border-bottom: 1px solid $app-veryLightGray; + align-items: center; +} + +.card--row { + padding: 11px; +} + +.table-header-background { + background-color: $app--color-table-header-bg; +} + +#dataset-viewer { + .dataset-info { + display: grid; + + &--subtitle { + box-sizing: border-box; + font-size: 0.857143em; + font-style: inherit; + font-weight: 600; + color: $app-emperor; + align-items: center; + display: flex; + margin: 0; + } + + &--text { + align-items: center; + background-color: transparent; + border-color: transparent; + border-radius: 3px; + border-style: solid; + box-sizing: border-box; + display: flex; + flex: 1 0 auto; + font-size: 14px; + justify-content: space-between; + line-height: 1.42857; + max-width: 100%; + overflow: hidden; + transition: background-color 0.2s ease-in-out 0s, border-color 0.2s ease-in-out 0s; + overflow-wrap: break-word; + border-width: 2px; + padding: 6px; + margin: 0; + } + + &--block { + display: flex; + flex-direction: row; + align-items: center; + height: auto; + max-height: 100%; + outline: 0; + pointer-events: auto; + } + + &--sub-block { + position: relative; + flex-grow: 1; + box-sizing: border-box; + padding-right: 10px; + min-width: 100px; + width: 40%; + padding-top: 8px; + line-height: 1; + } + } +} + +.dataset-view-type-toggle-group { + .mat-button-toggle-disabled { + .mat-button-toggle-button { + cursor: not-allowed; + color: rgb(0 0 0 / 51%); + } + } +} + +.app-active-button { + background: $app-darkSeaGreen; + border-radius: 4px; + border: none; + color: $app-white; + display: flex; + flex-direction: row; + align-items: center; + padding: 7px 12px; + margin: 0 0.3rem; + + &:hover, + &:focus, + &:active { + text-decoration: none; + color: $app-emperor; + } +} + +.app-header { + height: 90px; + + a { + margin: 0 20px; + } + + p { + color: $app-white; + font-style: normal; + font-weight: normal; + font-size: 18px; + } + + .navbar { + padding: 0; + } +} + +[data-test-id='appLogo'] { + background: none; + border: none; +} + +.mat-progress-spinner { + circle { + stroke: $app-darkSeaGreen !important; + } +} + +.mat-menu-panel { + &.app-header__user-menu { + background-color: white; + border: 1px solid $app-lightGrayishBlue; + + .mat-menu-item { + background-color: white; + } + } +} + +#appHeaderLogo { + img { + height: 32px; + width: 32px; + } +} + +.header-item { + display: flex; + margin-right: 16px; + align-self: stretch; + align-items: center; + flex-wrap: nowrap; +} + +.header-link { + text-decoration: none; +} + +#app-header { + z-index: 32; + display: flex; + padding: 16px; + font-size: 14px; + line-height: 1.5; + align-items: center; + justify-content: space-between; + + .details:not(.details--on) { + .details-content--hidden-not-important { + display: none; + } + } + + .header-item--full { + flex: auto; + } + + a, + button { + flex: none; + } + + .input-control { + position: relative; + flex: 1 1 auto; + width: 1%; + min-width: 0; + margin-bottom: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + height: calc(1.5em + 0.75rem + 2px); + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + border: 1px solid #ced4da; + } +} + +.jump-to-badge-jump { + display: none; +} + +.active-search-input { + input { + color: $app-white; + } +} + +.octicon { + display: inline-block; + overflow: visible !important; + vertical-align: text-bottom; + fill: currentColor; +} + +.header-signout-btn { + background: none; + border: none; + text-align: left; + padding: initial; +} + +#navbarNavDropdown { + .navbar-nav { + width: 100%; + + .nav-item { + width: 100%; + transition: all .5s linear; + line-height: 150px; + + .active-search-input { + width: 100%; + } + + ngb-typeahead-window { + width: 100%; + line-height: 1; + + ngb-highlight { + color: $app-nero; + } + + .dropdown-item { + display: flex; + justify-content: space-between; + height: 30px; + padding-left: 10px; + padding-right: 10px; + margin: 5px 0; + + * { + color: $app-nero; + } + + button { + color: $app-nero; + } + + &.active { + * { + color: $app-white; + } + + .jump-to-badge-jump { + justify-content: center; + align-items: center; + display: flex; + color: $app-nero; + + * { + color: $app-nero; + } + } + } + } + } + } + } +} + +.app-brand { + grid-area: appBrandArea; + + > img { + width: 77px; + height: 55px; + } +} + +a:visited { + color: inherit; +} + +.mat-app-background, +.mat-drawer-container { + background-color: $app-aliceBlue; +} + +#app-header { + background-color: $app-dark; + + * { + color: $app-primary; + } + + .navbar-nav { + margin: auto; + } +} + +.details:not(.details--on) { + .details-content--hidden-not-important { + display: none; + } +} + +.header-search { + max-width: 100%; + transition: all .5s linear; +} + +.header-search { + &:focus-within { + max-width: 100%; + width: 100%; + } +} + +.notification-indicator-container { + width: 1.5em; +} + +.app-main-container { + height: 100%; + width: 100%; + + .navbar { + padding: 20px; + } +} + +.mat-drawer-inner-container { + .navbar-nav { + width: 100%; + padding: 16px; + + .nav-item { + width: 100%; + margin-bottom: 8px; + border-radius: 4px; + padding: 12px 16px; + box-sizing: border-box; + color: $app-emperor; + } + + .nav-link { + &:hover, + &:focus { + background: $app-darkSeaGreen; + color: $app-white; + } + } + } + + .mat-drawer.mat-drawer-side { + width: 208px; + } + + .mat-drawer-container { + background: inherit; + overflow: auto; + } +} + +.app-content { + display: grid; + margin: 33px auto; + padding: 0 16px; + flex-direction: row; + width: 100%; + grid-template-columns: 1fr; + grid-gap: 24px; + + &--header { + grid-template-columns: 1fr 1fr; + display: grid; + } +} + +#dataset-view { + a { + &:visited { + color: inherit; + } + } +} + +router-outlet { + display: none; +} + +.app-content__card-columns { + column-count: 1; + grid-column-gap: 1.25rem; + column-gap: 1.25rem; + orphans: 1; + widows: 1; +} + +.app-header__right-column { + grid-area: appHeaderArea; + display: flex; + align-items: center; + justify-content: flex-end; + color: white; + + > span { + margin-right: 5px; + } +} + +.app-header__right-column__addnew-block { + margin-right: 5%; + display: flex; + justify-content: space-around; + background: none; + border: none; + + > span { + &:first-child { + margin-right: 10px; + } + } +} + +.app-header__right-column__label { + display: block; +} + +#appHeaderAdditionalBlock { + .button-round { + width: 50px; + height: 50px; + min-width: 50px; + border-radius: 35px; + overflow: hidden; + display: block; + padding: 0; + } +} + +#matmenu-signed-in-name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + line-height: 48px; + height: 48px; + padding: 0 16px; + text-align: left; + text-decoration: none; + max-width: 100%; + position: relative; + font-family: Roboto, 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + + * { + font-family: Roboto, 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 600; + } +} + +.img-container-round { + width: 50px; + height: 50px; + background: #C4C4C4; + border: 2px solid $app-white; + box-sizing: border-box; + border-radius: 35px; + overflow: hidden; + position: relative; + + > img { + position: absolute; + object-fit: cover; + height: 100%; + top: 0; + left: 0; + } +} + +.search-input-container { + height: 42.5px; +} + +#searchInput { + grid-area: appSearchInputArea; + width: 100%; + min-height: 28px; + line-height: 20px; + max-width: 100%; + padding: 0; + font-size: inherit; + font-weight: 400; + vertical-align: middle; + box-shadow: none; + @extend .search-input-container; +} + +#mobileMenuButton { + &.mobileSearch { + grid-area: appMobileMenu; + position: relative; + + i { + color: $app-primary; + font-size: 30px; + } + } +} + +.search-header-container-block { + margin-bottom: 20px; +} + +#search { + .dataset-full-result-container { + grid-template-columns: 1fr; + } + + .dataset-result-container, + .search-result-container { + grid-template-columns: 0.25fr 1fr; + + ul { + list-style-type: none; + } + + .mat-checkbox-layout { + .mat-checkbox-label { + font-size: 16px; + } + } + } +} + +#dataset-viewer { + .search-result-container { + grid-template-columns: 0.25fr 1fr; + } + + .dataset-result-container { + grid-template-columns: 1fr 0.35fr; + } + + .dataset-view-data-result-container { + grid-template-columns: 0.4fr 1fr; + } +} + +#schema-block-table, +#set-polling-source-schema, +#set-polling-source-env-variables { + * { + padding: 0 8px; + font-size: 12px; + height: 34px; + } +} + +#search, +#dataset-viewer { + .nav-link { + cursor: pointer; + } + + .nav-tabs { + margin-bottom: 14px; + border-bottom: none; + } + + .search-result-container, + .dataset-result-container, + .dataset-view-data-result-container { + display: grid; + align-items: start; + grid-gap: 25px; + } + + table { + width: 100%; + } + + .search-header-container-block { + width: 100%; + display: grid; + align-items: center; + justify-content: space-between; + grid-template-columns: 1fr 0.25fr; + grid-gap: 25px; + + > ul { + &:first-child { + align-items: center; + margin-bottom: 9px; + } + } + + > ul { + &:last-child { + justify-content: flex-end; + } + } + + .nav-tabs { + .nav-link { + border: none; + background-color: transparent; + padding: 0.5rem 0.3rem 0 0.3rem; + + &.active, + &:hover, + &:focus { + text-decoration: underline; + } + + &.active { + font-weight: bold; + } + } + } + + .nav-link { + padding: 0.5rem 0.3rem; + color: $app-emperor; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } + } + } +} + +.search-result-container__content, +.container-content { + overflow: auto; + padding: 20px 28px; + background: $app-white; + border: 1px solid $app-veryLightGray; + box-sizing: border-box; + box-shadow: 0 5px 4px $app-versatileBusinessDark; + border-radius: 8px; + + & [data-test-id='searchInput'] { + height: 50px; + } +} + +.dataset-view-type-toggle-group { + width: 100%; + overflow: auto; + margin-bottom: 20px; +} + +#dataset-viewer, +#search { + overflow: hidden; +} + +.starred { + .starred-button-icon { + color: $app-naples-yellow !important; + } +} + +.search-additional-buttons-minimize-block { + .search-additional-buttons__nav { + flex-direction: column; + background: $app-white; + + .btn-group-item { + width: 100%; + } + + .btn-group-parent { + width: 100%; + } + + .nav-item { + width: 100%; + margin: 0 !important; + padding: 0 !important; + } + } +} + +#metadata-block { + & .page-item:last-child .page-link, + .page-item:first-child .page-link { + padding: 1px; + } + + & #pagination-block { + display: flex; + justify-content: flex-end; + } +} + +/*********** Search Page ******/ +.input-icon { + background: none; + color: white; + position: absolute; + top: 0; + left: 0; + z-index: 4; + border: none; + padding-top: 0; + padding-bottom: 0; + height: 100%; + + > i { + font-size: 18px; + } +} + +#typeahead-http { + &::placeholder { + color: $app-white; + } +} + +#searchInput { + &.searchSidenav { + .input-group { + & > [data-test-id='searchInput'].form-control { + background: $app-white; + color: $app-emperor; + box-shadow: 0 5px 4px $app-versatileBusinessDark; + } + } + } +} + +.input-group { + & > [data-test-id='searchInput'].form-control { + border-radius: 0.25rem; + border-color: transparent; + background: $app-emperor; + color: $app-white; + padding: 5px 12px; + } +} + +.form-control { + &:focus { + box-shadow: 0 0 0 0.2rem #85bb906e; + } +} + +.mat-header-cell { + font-size: 20px; +} + +[data-test-id='searchInput'], +[data-test-id='addNewBlock'], +[data-test-id='openUserInfo'], +[data-test-id='appLogo'] { + cursor: pointer; +} + +.input-datasets-list { + justify-content: left; + display: flex; + align-items: baseline; + + & > *:last-child { + margin-left: 16px; + } +} + +.gist { + font-size: 16px; + color: #333; + text-align: left; + direction: ltr; + text-rendering: auto; + + .gist-file { + margin-bottom: 1em; + font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; + border: 1px solid #ddd; + border-bottom: 1px solid #ccc; + border-radius: 6px; + + article { + padding: 6px; + } + } + + .gist-data { + overflow: auto; + word-wrap: normal; + background-color: $app-color-canvas-overlay; + border-bottom: 1px solid #ddd; + border-radius: 6px 6px 0 0; + } + + .markdown-body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; + font-size: 16px; + line-height: 1.5; + word-wrap: break-word; + + pre { + padding: 16px; + overflow: auto; + font-size: 85%; + line-height: 1.45; + background-color: $app-color-canvas-subtle; + border-radius: 6px; + } + } +} + +.search-additional-buttons__nav { + justify-content: end; + align-items: end; +} + +.search-additional-buttons-minimize-block { + ul { + background: $app-white; + border: 1px solid $app-veryLightGray; + box-sizing: border-box; + box-shadow: 0 5px 4px $app-versatileBusinessDark; + border-radius: 5px; + } + + li { + border-radius: 0 !important; + border: none; + border-bottom: 1px solid #d0d7de !important; + + &:last-child { + border-bottom: none !important; + } + + .btn-group-item { + border: none; + } + + .additional-options-btn { + border-top: none !important; + border-right: none !important; + border-bottom: none !important; + } + } +} + +/*************************/ +@media (max-width: 480px) { + .app-header__right-column__label { + display: none; + } + .app-header__right-column__addnew-block { + width: 18%; + } + .app-brand { + > img { + width: 60px; + height: 50px; + } + } + .app-active-button__container { + margin-top: 7px; + } +} + +@media (max-width: 768px) { + .app-content { + grid-template-columns: 1fr; + + &--header { + grid-template-columns: 1fr 0.1fr; + display: grid; + } + } + #search, + #dataset-viewer { + .search-result-container, + .dataset-view-data-result-container { + grid-template-columns: 1fr; + } + } + .search-header-container-block { + grid-template-columns: 1fr; + + > ul { + &:last-child { + justify-content: flex-start; + } + } + } + .search-additional-buttons-block { + display: flex; + justify-content: flex-end; + align-items: flex-end; + } +} + +@media (max-width: 991px) { + #app-header { + #appHeaderMenuButton, + #appHeaderLogo, + #appHeaderAdditionalBlock { + order: 0; + } + + #navbarNavDropdown { + order: 1; + } + + .navbar-nav { + margin: 20px auto; + } + } + #dataset-viewer { + .dataset-result-container { + grid-template-columns: 1fr; + } + } +} + +@media (min-width: 768px) { + .header-search { + max-width: 272px; + width: 100%; + } + .header-search { + &:focus-within { + max-width: 544px; + } + } + #navbarNavDropdown { + .navbar-nav { + .active-search-input { + width: 150%; + } + } + } +} + +.avatar { + display: inline-block; + overflow: hidden; + line-height: 1; + vertical-align: middle; + background-color: white; + border-radius: 6px; + flex-shrink: 0; + box-shadow: 0 0 0 1px #1b1f2426; +} + +.avatar-2 { + width: 20px; + height: 20px; +} + +.avatar-user { + border-radius: 50% !important; +} + +// MODAL MODULE + +.modal__dialog, +.modal__bigtest-dialog { + margin: 0 auto; + background: white; + box-sizing: border-box; + max-width: 300px; + min-height: 80px; + border: 1px solid $app-nero; + border-radius: 4px; + text-align: center; + opacity: 0; + transition: transform 1s linear; + animation: ani 1.5s forwards; +} + +.modal__dialog__header-block { + width: 100%; + padding: 1.5em; +} + +.modal__dialog__footer-block { + width: 100%; +} + +.modal__content .modal__bigtest-dialog { + width: 90vw; + max-width: none; +} + +@keyframes ani { + 0% { + opacity: 0; + transform: translateY(-50%); + } + 100% { + opacity: 1; + transform: translateY(0%); + } +} + +.modal__bigtext-block { + display: block; + width: 100%; + height: 60vh; + overflow-y: scroll; + margin-bottom: 26px; + + &__container { + text-align: left; + font-size: 14pt; + font-family: 'Helvetica Neue', serif; + + a { + color: #0087ff; + text-decoration: underline; + vertical-align: baseline; + text-decoration-skip-ink: none; + font-style: normal; + } + } +} + +.modal__header { + font-size: 1.25em; + margin-bottom: 1em; + + &-black { + @extend .modal__header; + color: black; + font-size: 1.4em; + } + + &-error { + @extend .modal__header; + color: red; + } + + &-warning { + @extend .modal__header; + color: $warning; + } + + &-ok { + @extend .modal__header; + color: darkgreen; + } + + &-info { + @extend .modal__header; + color: #4494ff; + } +} + +.link-green { + color: $green-100; + + &__inline { + border-bottom: 1px $green-100 solid; + } +} + +.cache-modal { + &__content { + flex-direction: column; + justify-content: center; + align-items: center; + position: fixed; + right: 0; + left: 0; + bottom: 0; + display: flex; + z-index: 2000; + max-width: 560px; + min-width: 320px; + margin: 0 auto; + background: white; + box-sizing: border-box; + border: 1px solid #c9c7cb; + + &__header { + width: 100%; + text-align: right; + + &__dialog { + margin: 0; + text-align: center; + width: 100%; + + &__privacy-policy-text { + margin: 20px 2%; + + > a { + @extend .link-green; + @extend .link-green__inline; + } + } + } + } + + &__close-btn { + background: transparent; + border: none; + cursor: pointer; + display: flex; + justify-content: flex-end; + align-items: center; + color: $app-nero; + font-size: 24px; + width: 100%; + } + } +} + +.base_modal__content { + background: #0000007a; + flex-direction: column; + justify-content: center; + align-items: center; + position: fixed; + top: 0; + right: 0; + left: 0; + display: flex; +} + +.modal__content { + @extend .base_modal__content; + bottom: 0; + z-index: 2000; + + &__unsupported-account { + @extend .base_modal__content; + bottom: 0; + z-index: 1001; + } +} + +.modal__body { + @extend .text-center; + margin: 0 auto; + background: white; + width: 70%; + max-width: 320px; + min-height: 80px; + padding: 1.5em 2em 1em; + border-radius: 20px; +} + +.modal__img { + display: flex; + width: auto; + padding: 0 0 1em; + min-width: 30%; + min-height: 13%; + position: relative; + background: url(./assets/icons/loadinfo.net.gif) no-repeat center; + + img { + max-height: calc(100vh - 180px); + max-width: 100%; + margin: 0 auto; + } +} + +.modal__dialog__unsupported-account { + @extend .modal__dialog; + + a { + color: $blue; + } +} + +.modal__msg { + margin: 1em 0; + word-break: break-word; +} + +.button__default { + background-color: white; + @extend .button; + @extend %border-gray; +} + +.modal__btn { + @extend .button__default; + border-radius: 0 0 4px 4px; + min-width: 100%; + font-weight: bold; + + &-first { + width: 100%; + margin: 0; + } + + &-last { + @extend .modal__btn-first; + margin-top: 1em; + } +} + +.upload { + background-color: black; +} + +#more-button { + background: $app-white; + border: 1px solid $app-veryLightGray; + box-sizing: border-box; + box-shadow: 0 5px 4px $app-versatileBusinessDark; + border-radius: 8px; + color: $app-emperor; +} + +.button { + height: 40px; + cursor: pointer; + font-family: 'Avenir', sans-serif; + + &:focus { + outline: none; + + &[disabled] { + opacity: 0.7; + } + + img { + height: 100%; + } + + .fa { + color: inherit; + } + + &:active { + background: linear-gradient(to bottom, rgba(204, 204, 204, 0.8) 100%, #eee 0%); + } + } +} + +.account-container { + grid-template-columns: 0.5fr 0.5fr; + display: grid !important; +} + +app-account .dropdown-menu { + right: 0; +} + +.account-additional-main-info__list { + .mail-outline { + .mat-icon { + font-size: 20px; + height: 20px; + width: 20px; + } + } +} + +.layout { + &.layout--sidebar-position-start { + .layout-main { + grid-column: 2/span 2; + } + } +} + +.underline-nav { + display: flex; + overflow-x: auto; + overflow-y: hidden; + justify-content: space-between; + + .mat-icon { + height: 20px; + width: 20px; + font-size: 20px; + } +} + +[role='menu'] { + .underline-nav-item { + display: flex; + justify-content: flex-start; + align-items: center; + } +} + +details summary::-webkit-details-marker, +details summary::marker { + display: none; + content: ''; +} + +.underline-nav-item { + padding: 8px 16px; + font-size: 14px; + line-height: 30px; + color: $app-color-fg-default; + text-align: center; + white-space: nowrap; + background-color: transparent; + border: 0; + border-bottom: 2px solid transparent; + justify-content: center; + align-items: center; + display: flex; + + &.selected { + font-weight: 600; + color: $app-color-fg-default; + border-bottom-color: $app-color-primer-border-active; + outline: 1px dotted transparent; + outline-offset: -1px; + } + + &:not(.selected):hover, + &:not(.selected):focus { + color: $app-color-fg-default; + text-decoration: none; + border-bottom-color: $app-color-neutral-muted; + outline: 1px dotted transparent; + outline-offset: -1px; + transition: border-bottom-color .12s ease-out; + } +} + +/* MIXINS */ +%border-none { + border: 0; +} + +%border-gray { + border: 1px solid $verylightgrey; +} + +%border-green { + border-radius: 5px; + border: 1px solid #CEE794; +} + +%border-darkgreentea { + border: 1px solid $darkgreentea; +} + +%button-gradient { + background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(237, 237, 237, 1) 100%); +} + +.sql-error-message { + color: red; +} + +.author { + a { + text-decoration: underline !important; + color: $app-navyBlue !important; + } +} + +.group-box-label { + top: -10px; + left: 10px; + padding: 0 10px; + background: white; + width: fit-content; + font-size: 9px; +} + +.subnav-search-icon { + position: absolute; + top: 10px; + left: 8px; + display: block; + text-align: center; + pointer-events: none; +} + +.fs-10 { + font-size: 10px; +} + +.fs-12 { + font-size: 12px; +} + +.multiselect-dropdown { + .dropdown-btn { + color: #6c757d !important; + padding-left: 36px !important; + } +} + +pre { + display: flex; + margin-top: 0; + margin-bottom: 0; + word-wrap: break-word; + + code { + flex: 1; + min-height: 100%; + padding: 1em 1.2em; + } + + .hljs { + font-size: 15px !important; + font-weight: 500 !important; + background-color: honeydew !important; + } +} + +#toast-container { + position: fixed; + right: 20px; + bottom: 20px; +} + +.add-link { + font-size: 16px; + color: #0969DA !important; +} + +.radio-group { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; + + .input-container { + position: relative; + height: 6rem; + width: 12rem; + + .radio-input { + position: absolute; + height: 100%; + width: 100%; + margin: 0; + cursor: pointer; + z-index: 2; + opacity: 0; + + &:checked { + & + .radio-item { + border: 2px solid #1461b5f1; + background-color: #f1f5f9f1; + } + } + } + + .radio-item { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border: 1px solid black; + height: 100%; + border-radius: 10px; + transition: all 200ms ease; + + .mat-icon { + color: #1461b5f1; + font-size: 34px; + height: 34px; + width: 34px; + } + + //////////// drag and drop style + } + } +} + +.cdk-drag-preview { + box-sizing: border-box; + display: flex; + justify-content: space-between; + align-items: center; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); +} + +.cdk-drag-placeholder { + opacity: 0; +} + +.cdk-drag-animating { + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); +} + +.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder) { + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); +} + +.cdk-overlay-container { + z-index: 9999 !important; +} + +.cdk-global-scrollblock { + overflow: hidden !important; +} + +.mat-tree { + .mat-tree-node { + .mat-icon-button { + background-color: transparent !important; + } + } +} + +.w-350 { + width: 350px !important; +} + +.button-custom { + display: flex; + padding: 5px 10px; + align-items: center; + justify-content: center; + border: 1px solid black; + border-radius: 5px; + + &:hover { + cursor: pointer; + filter: alpha(opacity=90); + -moz-opacity: 0.9; + opacity: 0.9; + } +} + +.no-button { + border: none; + background: transparent; + + &:hover { + cursor: pointer; + + &:enabled { + color: blue; + } + } +} + +input { + &.ng-invalid { + &.ng-touched, + &.ng-dirty { + border-color: #dc3545; + } + } +} \ No newline at end of file