From 69273b938a2237bda6eed9a4fcd62ede53890c4e Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Tue, 19 Apr 2022 13:58:10 +0300 Subject: [PATCH] Metrics base on new theme --- .../metrics/metrics.component.css | 120 ++------- .../metrics/metrics.component.ts | 236 ++++++------------ .../landing-utils/metrics/metrics.module.ts | 3 +- 3 files changed, 101 insertions(+), 258 deletions(-) diff --git a/landingPages/landing-utils/metrics/metrics.component.css b/landingPages/landing-utils/metrics/metrics.component.css index 778b3882..0c751a13 100644 --- a/landingPages/landing-utils/metrics/metrics.component.css +++ b/landingPages/landing-utils/metrics/metrics.component.css @@ -1,116 +1,40 @@ .metrics { position: relative; display: inline-block; + --text-gradient-color: linear-gradient(92deg, var(--primary-light-color) 0, var(--primary-dark-color) 100%); } -.metrics .widget { - position: absolute; - left: -50%; - transform: translateX(25%); - margin-top: -100%; - margin-left: 40px; - width: 350px; - z-index: 3; -} - -.metrics .widget:after { - /*position: absolute;*/ - /*left: 80%;*/ - /*transform: translateX(-65%);*/ - /*top: -10px;*/ - /*width: 0;*/ - /*height: 0;*/ - /*content: '';*/ - /*border-left: 10px solid transparent;*/ - /*border-right: 10px solid transparent;*/ - /*border-bottom: 10px solid #2E2D7A;*/ - +.metrics .uk-dropdown:before { position: absolute; left: 0; transform: translateX(-100%); - top: 25px; + top: 14px; width: 0; height: 0; content: ''; - border-left: 10px solid transparent; - border-right: 10px solid #2E2D7A; - border-bottom: 10px solid transparent; - border-top: 10px solid transparent; + border-left: 21px solid transparent; + border-right: 21px solid var(--muted-color); + border-bottom: 21px solid transparent; + border-top: 21px solid transparent; +} + +.metrics .uk-dropdown:after { + position: absolute; + left: 0; + transform: translateX(-100%); + top: 15px; + width: 0; + height: 0; + content: ''; + border-left: 20px solid transparent; + border-right: 20px solid var(--default-color); + border-bottom: 20px solid transparent; + border-top: 20px solid transparent; } .metrics .m-badge .number { font-size: 18px; - color: #222080; + color: var(--primary-color); font-weight: 700; text-align: center; } - -.metrics .widget > .body { - box-shadow: 0 3px 6px #00000029; - border-radius: 4px 4px 0 4px; - padding: 10px 18px; - background: #2E2D7A no-repeat padding-box; - color: white; - font-size: 12px; - height: inherit; -} - -.metrics .widget > .body > div { - opacity: 0; - height: inherit; - overflow: hidden; -} - -.metrics .widget > .body .charts { - margin-top: 10px; - opacity: 0; -} - -.metrics .widget > .body .charts .uk-slidenav { - background-color: #bbbbca; - color: #49494f; - padding: 5px; - border-radius: 50%; -} - -.metrics .widget > .footer { - background: #FFFFFF; - box-shadow: 0 3px 6px #00000029; - border-radius: 0 0 4px 4px; - font-size: 11px; - padding: 5px 10px; - color: rgba(126, 126, 126, 0.80); - display: inline-block; - float: right; - position: relative; - z-index: -1; - transform: translateY(-80px); -} - -.metrics .widget .footer > *:first-child { - margin-right: 10px; - line-height: 33px; - vertical-align: middle; -} - -.metrics .widget .number { - color: currentColor; - font-weight: 700; - font-size: 18px; -} - -.metrics .uk-grid-divider>:not(.uk-first-column)::before { - border-left: 1px solid #ffffff; -} - -.metrics ul.uk-slider-items > li { - background-color: white; -} - -.metrics .uk-table { - color: #1a1a1a; -} - -.metrics .uk-table th { - color: rgba(26, 26, 26, 0.8); -} diff --git a/landingPages/landing-utils/metrics/metrics.component.ts b/landingPages/landing-utils/metrics/metrics.component.ts index 23393266..a789799f 100644 --- a/landingPages/landing-utils/metrics/metrics.component.ts +++ b/landingPages/landing-utils/metrics/metrics.component.ts @@ -5,7 +5,6 @@ import {ErrorCodes} from '../../../utils/properties/errorCodes'; import {Subscription, zip} from 'rxjs'; import {EnvProperties} from '../../../utils/properties/env-properties'; -import {animate, state, style, transition, trigger} from "@angular/animations"; import {ClickEvent} from "../../../utils/click/click-outside-or-esc.directive"; @Component({ @@ -14,173 +13,92 @@ import {ClickEvent} from "../../../utils/click/click-outside-or-esc.directive"; template: `
-
+ usage counts
{{total | number}}
-
-
-
-
-
- Project metrics - are derived from aggregating individual research results metrics. - + +
+
+
+ Project metrics + are derived from aggregating individual research results metrics. + +
+
+
+
{{metrics.totalDownloads | number}}
+
Downloads
-
-
-
{{metrics.totalDownloads | number}}
-
Downloads
-
-
-
{{pageViews | number}}
-
OpenAIRE views
-
-
-
{{metrics.totalViews | number}}
-
Total views
-
+
+
{{pageViews | number}}
+
OpenAIRE views
-
-
    -
  • - - - - - - - - - - - - - - - -
    FromViewsDownloads
    - - {{metrics.infos.get(key).name}} - - - {{metrics.infos.get(key).numOfViews | number}} - - - {{metrics.infos.get(key).numOfDownloads | number}} - -
    -
    • - -
  • - - -
    • -
  • - - -
    • -
-
- - -
+
+
{{metrics.totalViews | number}}
+
Total views
-
-
- Powered by - - usage counts - +
+
+
+
    +
  • + + + + + + + + + + + + + + + +
    FromViewsDownloads
    + + {{metrics.infos.get(key).name}} + + + {{metrics.infos.get(key).numOfViews | number}} + + + {{metrics.infos.get(key).numOfDownloads | number}} + +
    +
    • + +
  • + +
    • +
  • + +
    • +
+
+ + +
+
+
+ Powered by + + usage counts + +
- `, - animations: [ - trigger('widget', [ - state('-1', style({ - width: '150px', - opacity: 0, - height: '60px', - })), - state('0', style({ - width: '150px', - opacity: 0, - height: '60px', - "margin-top": '-25px' - })), - state('1', style({ - width: '150px', - opacity: 1, - height: '60px', - })), - state('2', style({ - width: '350px', - height: 'auto', - })), - state('3', style({ - width: '350px', - height: 'auto', - })), - state('4', style({ - width: '350px', - height: 'auto', - })), - transition('0 => 1', [ - animate('300ms ease-out') - ]), - transition('1 => 2', [ - animate('400ms cubic-bezier(.18,.89,.56,1)') - ]) - ]), - trigger('body', [ - state('2', style({ - opacity: 1, - height: 'auto', - })), - state('3', style({ - opacity: 1, - height: 'auto' - })), - state('4', style({ - opacity: 1, - height: 'auto' - })), - transition('* => 2', [ - animate('400ms cubic-bezier(.18,.89,.56,1)') - ]) - ]), - trigger('charts', [ - state('3', style({ - opacity: 1 - })), - state('4', style({ - opacity: 1 - })), - transition('* => 3', [ - animate('800ms ease-out') - ]) - ]), - trigger('footer', [ - state('4', style({ - transform: 'translateY(0)' - })), - transition('3 => 4', [ - animate('800ms ease-out') - ]) - ]) - ] + ` }) export class MetricsComponent { diff --git a/landingPages/landing-utils/metrics/metrics.module.ts b/landingPages/landing-utils/metrics/metrics.module.ts index 9d0441c9..37a1fb4f 100644 --- a/landingPages/landing-utils/metrics/metrics.module.ts +++ b/landingPages/landing-utils/metrics/metrics.module.ts @@ -10,10 +10,11 @@ import {MetricsService} from '../../../services/metrics.service'; import {ErrorMessagesModule} from '../../../utils/errorMessages.module'; import {IFrameModule} from "../../../utils/iframe.module"; import {ClickModule} from "../../../utils/click/click.module"; +import {IconsModule} from "../../../utils/icons/icons.module"; @NgModule({ imports: [ - CommonModule, FormsModule, ErrorMessagesModule, IFrameModule, ClickModule + CommonModule, FormsModule, ErrorMessagesModule, IFrameModule, ClickModule, IconsModule ], declarations: [ MetricsComponent