diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c5a6f4c..46f88ca 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -30,6 +30,7 @@ import { SharedModule } from './shared/shared.module'; import { LoggerModule } from 'ngx-logger'; import { WriteLoggerService } from './shared/logger/writer.logger.service'; import { ServerLoggerService } from './shared/logger/server.logger.service'; +import { ASSET_TYPES } from "./shared/utils/app.constants"; /** * Ng module: App module @@ -85,6 +86,10 @@ import { ServerLoggerService } from './shared/logger/server.logger.service'; useFactory: (configService: AppConfigService) => () => configService.loadConfig(), deps: [AppConfigService], multi: true + }, + { + provide: 'ASSET_TYPES', + useFactory: () => [{id: ASSET_TYPES.dataset, name: ASSET_TYPES.dataset}, {id: ASSET_TYPES.machineLearning, name: ASSET_TYPES.machineLearning}, {id: ASSET_TYPES.service, name: ASSET_TYPES.service}], } ], bootstrap: [AppComponent] diff --git a/src/app/pages/catalog/asset-details/asset-details.component.html b/src/app/pages/catalog/asset-details/asset-details.component.html index 054afd9..0ca1186 100644 --- a/src/app/pages/catalog/asset-details/asset-details.component.html +++ b/src/app/pages/catalog/asset-details/asset-details.component.html @@ -5,7 +5,7 @@
- +

{{ dataset.properties.name }}

Versión {{ dataset.properties.version }} {{ dataset.assetId }} diff --git a/src/app/pages/catalog/asset-details/asset-details.component.scss b/src/app/pages/catalog/asset-details/asset-details.component.scss index cdecdbd..8333e70 100644 --- a/src/app/pages/catalog/asset-details/asset-details.component.scss +++ b/src/app/pages/catalog/asset-details/asset-details.component.scss @@ -1,7 +1,7 @@ .item-detail { padding: 20px; border-radius: 8px; - font-family: Arial, sans-serif; + font-family: "Baloo 2", Helvetica, Arial, sans-serif; .header { display: flex; @@ -10,14 +10,24 @@ margin-bottom: 20px; .icon { + width: 40px; + height: 40px; align-content: center; font-size: 2.5rem; margin-right: 15px; + &.pi-machinelearning { + &::before { + filter: saturate(0) brightness(0.6); + width: 40px; + height: 40px; + } + } } .title { align-content: center; - font-size: 24px; + color: #404040; + font-size: 36px; font-weight: bold; margin: 0; margin-right: 15px; @@ -25,14 +35,14 @@ .version { align-content: center; - font-size: 14px; - color: #888; + font-size: 18px; + color: #777; } .item-id { align-content: center; - font-size: 20px; - color: #888; + font-size: 36px; + color: #A1A1A1; font-weight: bold; flex-grow: 1; text-align: end; @@ -40,43 +50,53 @@ } .short-description { - font-size: 16px; - color: #888; + width: 50%; + font-size: 26px; + letter-spacing: -1px; + color: #A1A1A1; margin-bottom: 35px; } .description { + color: #404040; background-color: #fff; margin-bottom: 40px; + font-family: "Baloo 2", Helvetica, Arial, sans-serif; h2 { + font-family: "Baloo 2", Helvetica, Arial, sans-serif; font-size: 18px; margin-bottom: 10px; } p { + font-family: "Baloo 2", Helvetica, Arial, sans-serif; font-size: 14px; color: #666; } } .details { + font-family: "Baloo 2", Helvetica, Arial, sans-serif; display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; .detail-item { + font-family: "Baloo 2", Helvetica, Arial, sans-serif; flex: 1; min-width: 150px; .detail-title { + font-family: "Baloo 2", Helvetica, Arial, sans-serif; font-weight: bold; color: #333; display: block; } .detail-value { + font-family: "Baloo 2", Helvetica, Arial, sans-serif; font-size: 14px; color: #555; display: block; @@ -86,11 +106,13 @@ .keywords { h3 { + font-family: "Baloo 2", Helvetica, Arial, sans-serif; font-size: 16px; margin-bottom: 0px; } span { + font-family: "Baloo 2", Helvetica, Arial, sans-serif; font-size: 14px; color: #666; display: block; @@ -104,13 +126,17 @@ :host ::ng-deep .p-tabview .p-tabview-nav, :host ::ng-deep .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { + font-family: "Baloo 2", Helvetica, Arial, sans-serif; border: 0; } .clickable { + margin-left: 20px; color: #4367bc; cursor: pointer; - + .pi-arrow-left:before { + font-size: 0.75rem; + } &:hover { color: #435a91; } diff --git a/src/app/pages/catalog/asset-details/asset-details.component.ts b/src/app/pages/catalog/asset-details/asset-details.component.ts index f49d694..b79b1a2 100644 --- a/src/app/pages/catalog/asset-details/asset-details.component.ts +++ b/src/app/pages/catalog/asset-details/asset-details.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { DataOffer } from '../../../shared/models/data-offer'; import { DomSanitizer } from '@angular/platform-browser'; +import { ASSET_TYPES } from 'src/app/shared/utils/app.constants'; @Component({ @@ -33,4 +34,14 @@ export class AssetDetailsComponent implements OnInit { } }); } + + getAssetTypeIconClass(){ + if (ASSET_TYPES.machineLearning == this.dataset.properties.assetType) { + return 'pi-machinelearning'; + } else if (ASSET_TYPES.service == this.dataset.properties.assetType) { + return 'pi-briefcase'; + } else { + return 'pi-box'; + } + } } diff --git a/src/app/pages/catalog/catalog-browser/catalog-browser.component.html b/src/app/pages/catalog/catalog-browser/catalog-browser.component.html index dcec0b0..e4c86ea 100644 --- a/src/app/pages/catalog/catalog-browser/catalog-browser.component.html +++ b/src/app/pages/catalog/catalog-browser/catalog-browser.component.html @@ -35,10 +35,10 @@
Categorías
Formato: PDF
-
+
- -

{{ dataset.properties.name }}

+ +

{{ dataset.properties.name }}

{{ dataset.assetId }}
Versión {{ dataset.properties.version }}
@@ -46,15 +46,15 @@

{{ dataset.properties.name }}

{{ dataset.properties.shortDescription }}

+ +
- - diff --git a/src/app/pages/catalog/catalog-browser/catalog-browser.component.scss b/src/app/pages/catalog/catalog-browser/catalog-browser.component.scss index c7dfdc0..c2de1a6 100644 --- a/src/app/pages/catalog/catalog-browser/catalog-browser.component.scss +++ b/src/app/pages/catalog/catalog-browser/catalog-browser.component.scss @@ -4,7 +4,7 @@ margin: 0 auto; padding: 1rem; max-width: 1200px; - font-family: Arial, sans-serif; + font-family: "Baloo 2", Helvetica, Arial, sans-serif; } .catalog-header { @@ -13,7 +13,8 @@ margin-bottom: 2rem; h1 { - font-size: 2rem; + font-family: "Baloo 2", Helvetica, Arial, sans-serif; + font-size: 40px; margin-top: 0; } @@ -40,13 +41,15 @@ display: flex; .sidebar { - width: 250px; - margin-right: 2rem; + width: 300px; + margin-right: 1rem; background-color: #eeeeee; border-radius: 15px; padding: 1rem; h5 { + font-family: "Baloo 2", Helvetica, Arial, sans-serif; + font-size: 20px; margin-top: 0; } } @@ -56,6 +59,7 @@ .results-header { margin-bottom: 0.75rem; + font-family: "Baloo 2", Helvetica, Arial, sans-serif; font-weight: bold; } @@ -64,11 +68,12 @@ margin-bottom: 1rem; .filter-tag { + font-family: "Baloo 2", Helvetica, Arial, sans-serif; background: #4367bc; color: white; border-radius: 15px; padding: 0.2rem 0.5rem; - font-size: 0.75rem; + font-size: 0.80rem; } .filter-tag:not(:first-child) { @@ -78,13 +83,16 @@ .result-item { + cursor: pointer; background: white; border-radius: 30px; padding: 1rem; margin-bottom: 1rem; + transition: background .2s; .result-item-title { display: flex; + align-items: center; font-size: 1.5rem; color: #4367bc; @@ -95,31 +103,82 @@ } h4 { + font-family: "Baloo 2", Helvetica, Arial, sans-serif; + font-size: 32px; margin: 0; width: 100%; align-content: center; - cursor: pointer; - - &:hover { - color: #435a91; - } + transition: color .2s; } .result-item-id{ - font-size: 0.9rem; + font-family: "Baloo 2", Helvetica, Arial, sans-serif; + font-size: 18px; align-content: center; - color: #666; + color: #A1A1A1; } } .result-item-version { - font-size: 0.70rem; - color: #666; + font-family: "Baloo 2", Helvetica, Arial, sans-serif; + font-size: 14px; + color: #777; + } + + .result-item-description { + font-size: 20px; + color: #404040; + } + + &:hover { + background: #dee6ff; + h4, + .pi::before { + color: #435a91; + } + .pi-machinelearning { + filter: brightness(0.8); + } } } } } -:host ::ng-deep .p-accordion-tab .p-accordion-header-link { - background: white; +:host ::ng-deep .p-accordion-tab { + .p-accordion-header-link { + border: 0px; + border-radius: 16px; + background: white; + .p-accordion-toggle-icon { + position: absolute; + right: 10px; + pointer-events: none; + } + } + .p-toggleable-content { + margin-top: -12px; + .p-accordion-content { + border: 0px; + border-bottom-left-radius: 16px; + border-bottom-right-radius: 16px; + padding: 1rem 1.25rem; + .p-field-checkbox { + margin: 10px 0px; + p-checkbox { + .p-checkbox { + .p-checkbox-box.p-highlight { + border-color: #4367bc; + background: #4367bc; + } + } + .p-checkbox-label { + cursor: pointer; + font-family: "Baloo 2", Helvetica, Arial, sans-serif; + font-size: 18px; + color: #4367bc; + } + } + } + } + } } diff --git a/src/app/pages/catalog/catalog-browser/catalog-browser.component.ts b/src/app/pages/catalog/catalog-browser/catalog-browser.component.ts index 2991d33..c0b28bd 100644 --- a/src/app/pages/catalog/catalog-browser/catalog-browser.component.ts +++ b/src/app/pages/catalog/catalog-browser/catalog-browser.component.ts @@ -4,6 +4,7 @@ import { Router } from '@angular/router'; import { DataOffer } from 'src/app/shared/models/data-offer'; import { QuerySpec } from '@think-it-labs/edc-connector-client'; +import { ASSET_TYPES } from 'src/app/shared/utils/app.constants'; @Component({ @@ -67,4 +68,14 @@ export class CatalogBrowserComponent implements OnInit { } }); } + + getAssetTypeIconClass(assetType: string){ + if (ASSET_TYPES.machineLearning == assetType) { + return 'pi-machinelearning'; + } else if (ASSET_TYPES.service == assetType) { + return 'pi-briefcase'; + } else { + return 'pi-box'; + } + } } diff --git a/src/app/shared/utils/app.constants.ts b/src/app/shared/utils/app.constants.ts index 527bc51..df2bf11 100644 --- a/src/app/shared/utils/app.constants.ts +++ b/src/app/shared/utils/app.constants.ts @@ -20,3 +20,9 @@ export const MESSAGES_ERRORS_REQUIRED: string = translate('messages.errors.requi // Labels export const LABELS_YES: string = translate('labels.yes'); export const LABELS_NO: string = translate('labels.no'); + +export const ASSET_TYPES = { + dataset: 'dataset', + service: 'service', + machineLearning: 'machineLearning' +} diff --git a/src/assets/images/machinelearning.svg b/src/assets/images/machinelearning.svg new file mode 100644 index 0000000..a045bf7 --- /dev/null +++ b/src/assets/images/machinelearning.svg @@ -0,0 +1 @@ + diff --git a/src/styles/_icons.scss b/src/styles/_icons.scss new file mode 100644 index 0000000..fe7e126 --- /dev/null +++ b/src/styles/_icons.scss @@ -0,0 +1,13 @@ +.pi-machinelearning { + position: relative; + height: 26px; + width: 26px; + &::before { + content: url(../assets/images/machinelearning.svg); + position: absolute; + top: 0px; + left: 0px; + height: 26px; + width: 26px; + } +} diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 1491a72..d52670f 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -1,6 +1,7 @@ /* You can add global styles to this file, and also import other style files */ @import "triumph"; @import "typography"; +@import "icons"; body { margin: 0; @@ -48,6 +49,7 @@ button { } .p-menubar { + font-family: "Baloo 2", Helvetica, Arial, sans-serif; justify-content: space-between; background-color: unset; } @@ -73,10 +75,87 @@ button { font-weight: bold; } +.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link.p-menuitem-link-active { + font-weight: bold; +} + +.p-accordion-header-text { + font-family: "Baloo 2", Helvetica, Arial, sans-serif; +} + // style for buttons -.btn { +.btn, +.p-button { + display: flex !important; + border-radius: 1rem !important; + height: 3em; + width: max-content; + min-width: 100px; + align-items: center; + display: flex; + cursor: pointer; font-family: "Baloo 2", Helvetica, Arial, sans-serif; + border-width: 0px !important; + border-style: none; + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; + padding-left: 1rem !important; + padding-right: 1rem !important; + font-size: 1rem !important; + color: var(--surface-0) !important; + background-color: var(--primary-700) !important; +} + +.p-inputtext { + font-family: "Baloo 2", Helvetica, Arial, sans-serif; +} + +.p-paginator { + border-radius: 16px; + .p-paginator-element.p-link { + opacity: 1; + margin: 0 8px; + min-width: 40px; + height: 40px; + border-radius: 8px; + border-color: #4367bc; + &.p-highlight { + background-color: #4367bc; + } + .p-paginator-icon { + filter: brightness(0.6); + } + } + .p-dropdown { + height: 40px; + border-color: #4367bc; + border-radius: 8px; + .p-dropdown-label { + color: #4367bc; + } + } +} + +.p-tabview { + margin-bottom: 28px; + .p-tabview-nav-container { + .p-tabview-nav-content { + border-top-left-radius: 16px; + border-top-right-radius: 16px; + .p-tabview-nav { + .p-tabview-nav-link { + padding: 0.75rem 2rem; + border-top-right-radius: 16px; + border-top-left-radius: 16px; + } + } + } + } + .p-tabview-panels { + border-bottom-right-radius: 16px; + border-bottom-left-radius: 16px; + } } // RESPONSIVE