From aecb6446d6dfd6aec250a61b4d9edf5c43f44694 Mon Sep 17 00:00:00 2001 From: bsatarnejad Date: Thu, 17 Mar 2022 21:41:44 +0100 Subject: [PATCH] add viewbox input for wp skeleton view --- .../planner/loading-skeleton-data.ts | 26 +++++++------------ .../planner/team-planner.component.html | 4 +-- .../planner/team-planner.component.ts | 4 +-- ...ard.sass => wp-single-card.component.sass} | 6 ++++- .../wp-single-card.component.ts | 1 + ...-principal-loading-skeleton.component.html | 12 ++++----- ...-principal-loading-skeleton.component.sass | 7 +++++ .../op-wp-loading-skeleton.component.html | 12 ++++----- .../op-wp-loading-skeleton.component.ts | 5 +--- .../content/modules/_team_planner.sass | 4 +-- frontend/src/global_styles/openproject.sass | 1 - 11 files changed, 40 insertions(+), 42 deletions(-) rename frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/{wp-single-card.sass => wp-single-card.component.sass} (97%) diff --git a/frontend/src/app/features/team-planner/team-planner/planner/loading-skeleton-data.ts b/frontend/src/app/features/team-planner/team-planner/planner/loading-skeleton-data.ts index 165913e364..492ca7c883 100644 --- a/frontend/src/app/features/team-planner/team-planner/planner/loading-skeleton-data.ts +++ b/frontend/src/app/features/team-planner/team-planner/planner/loading-skeleton-data.ts @@ -2,20 +2,17 @@ export const skeletonResources = [ { id: 'skeleton-1', title: '', - href:'', - dataLoaded: false, + href: '', }, { id: 'skeleton-2', title: '', - href:'', - dataLoaded: false, + href: '', }, { id: 'skeleton-3', title: '', - href:'', - dataLoaded: false, + href: '', }, ]; @@ -25,35 +22,32 @@ export const skeletonEvents = [ resourceId: skeletonResources[0].id, title: '', start: moment().subtract(1, 'days').toDate(), - end: moment().toDate(), + end: moment().add(1,'day').toDate(), backgroundColor: '#FFFFFF', borderColor: '#FFFFFF', allDay: true, - dataLoaded: false, - viewBox: '0 0 500 80' + viewBox: '0 0 800 80', }, { id: 'skeleton-2', resourceId: skeletonResources[1].id, title: '', start: moment().subtract(3, 'days').toDate(), - end: moment().subtract(1, 'days').toDate(), + end: moment().toDate(), backgroundColor: '#FFFFFF', borderColor: '#FFFFFF', allDay: true, - dataLoaded: false, - viewBox: '0 0 2000 80' + viewBox: '0 0 1200 80', }, { id: 'skeleton-3', resourceId: skeletonResources[2].id, title: '', start: moment().toDate(), - end: moment().add(2, 'days').toDate(), + end: moment().add(3, 'days').toDate(), backgroundColor: '#FFFFFF', borderColor: '#FFFFFF', allDay: true, - dataLoaded: false, - viewBox: '0 0 2000 80' + viewBox: '0 0 1200 80', }, -] +]; diff --git a/frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.html b/frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.html index 2ab8eb03ae..f601a7cc55 100644 --- a/frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.html +++ b/frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.html @@ -89,9 +89,9 @@ - + diff --git a/frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.ts b/frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.ts index 9dffd145d6..4adec4c35e 100644 --- a/frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.ts +++ b/frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.ts @@ -7,7 +7,6 @@ import { OnInit, TemplateRef, ViewChild, - ViewEncapsulation, } from '@angular/core'; import { CalendarOptions, @@ -73,7 +72,6 @@ import { skeletonEvents, skeletonResources } from './loading-skeleton-data'; templateUrl: './team-planner.component.html', styleUrls: ['./team-planner.component.sass'], changeDetection: ChangeDetectionStrategy.OnPush, - // encapsulation: ViewEncapsulation.None, providers: [ EventViewLookupService, OpCalendarService, @@ -242,7 +240,7 @@ export class TeamPlannerComponent extends UntilDestroyedMixin implements OnInit, const api = this.ucCalendar.getApi(); // This also removes the skeleton resources that are rendered initially - //api.getResources().forEach((resource) => resource.remove()); + api.getResources().forEach((resource) => resource.remove()); principals.forEach((principal) => { const id = principal._links.self.href; diff --git a/frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.sass b/frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.sass similarity index 97% rename from frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.sass rename to frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.sass index c9dd49b670..e5dd7a1a63 100644 --- a/frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.sass +++ b/frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.sass @@ -1,3 +1,7 @@ + +@import 'helpers' +@import '../../app/spot/styles/sass/variables' + .op-wp-single-card display: flex user-select: none @@ -150,7 +154,7 @@ opacity: 0 padding-left: 40px - .op-icon--wrapper:not(#{&}_selected) + .op-icon--wrapper:not(&_selected) background: $spot-color-basic-white &.-show diff --git a/frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.ts b/frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.ts index 1ad186bca0..3c0914a96f 100644 --- a/frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.ts +++ b/frontend/src/app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card.component.ts @@ -31,6 +31,7 @@ import { map } from 'rxjs/operators'; @Component({ selector: 'wp-single-card', + styleUrls: ['./wp-single-card.component.sass'], templateUrl: './wp-single-card.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/frontend/src/app/shared/components/op-content-loader/op-principal-loading-skeleton/op-principal-loading-skeleton.component.html b/frontend/src/app/shared/components/op-content-loader/op-principal-loading-skeleton/op-principal-loading-skeleton.component.html index 1ec62ca117..e306ea1ed9 100644 --- a/frontend/src/app/shared/components/op-content-loader/op-principal-loading-skeleton/op-principal-loading-skeleton.component.html +++ b/frontend/src/app/shared/components/op-content-loader/op-principal-loading-skeleton/op-principal-loading-skeleton.component.html @@ -1,8 +1,8 @@
- - - - + + + +
\ No newline at end of file diff --git a/frontend/src/app/shared/components/op-content-loader/op-principal-loading-skeleton/op-principal-loading-skeleton.component.sass b/frontend/src/app/shared/components/op-content-loader/op-principal-loading-skeleton/op-principal-loading-skeleton.component.sass index e69de29bb2..423c2dd1e2 100644 --- a/frontend/src/app/shared/components/op-content-loader/op-principal-loading-skeleton/op-principal-loading-skeleton.component.sass +++ b/frontend/src/app/shared/components/op-content-loader/op-principal-loading-skeleton/op-principal-loading-skeleton.component.sass @@ -0,0 +1,7 @@ +.op-principal-loading-skeleton + width: 100% + position: relative + background: var(--body-background) + font-size: var(--card-font-size) + overflow: hidden + height: 80px \ No newline at end of file diff --git a/frontend/src/app/shared/components/op-content-loader/op-wp-loading-skeleton/op-wp-loading-skeleton.component.html b/frontend/src/app/shared/components/op-content-loader/op-wp-loading-skeleton/op-wp-loading-skeleton.component.html index 0d8b5bb0e0..ee923b098e 100644 --- a/frontend/src/app/shared/components/op-content-loader/op-wp-loading-skeleton/op-wp-loading-skeleton.component.html +++ b/frontend/src/app/shared/components/op-content-loader/op-wp-loading-skeleton/op-wp-loading-skeleton.component.html @@ -1,8 +1,8 @@
- - - - + + + +
\ No newline at end of file diff --git a/frontend/src/app/shared/components/op-content-loader/op-wp-loading-skeleton/op-wp-loading-skeleton.component.ts b/frontend/src/app/shared/components/op-content-loader/op-wp-loading-skeleton/op-wp-loading-skeleton.component.ts index bb18cbcd9c..27336fd481 100644 --- a/frontend/src/app/shared/components/op-content-loader/op-wp-loading-skeleton/op-wp-loading-skeleton.component.ts +++ b/frontend/src/app/shared/components/op-content-loader/op-wp-loading-skeleton/op-wp-loading-skeleton.component.ts @@ -1,8 +1,6 @@ import { ChangeDetectionStrategy, Component, - ViewEncapsulation, - HostBinding, Input, } from '@angular/core'; @@ -13,6 +11,5 @@ import { styleUrls: ['./op-wp-loading-skeleton.component.sass'], }) export class OpWPLoadingComponent { - @HostBinding('class.op-wp-loading-skeleton--loader') className = true; - @Input() public viewBox?:string = '0 0 2000 80'; + @Input() public viewBox?:string = '0 0 800 80'; } diff --git a/frontend/src/global_styles/content/modules/_team_planner.sass b/frontend/src/global_styles/content/modules/_team_planner.sass index 380e9a2cc6..098e80d1f2 100644 --- a/frontend/src/global_styles/content/modules/_team_planner.sass +++ b/frontend/src/global_styles/content/modules/_team_planner.sass @@ -33,6 +33,4 @@ .op-team-planner--wp-loading-skeleton svg - height: 80px - //width: 2000px - //overflow: hidden \ No newline at end of file + height: 80px \ No newline at end of file diff --git a/frontend/src/global_styles/openproject.sass b/frontend/src/global_styles/openproject.sass index a9d275bb06..4c2b06deed 100644 --- a/frontend/src/global_styles/openproject.sass +++ b/frontend/src/global_styles/openproject.sass @@ -10,7 +10,6 @@ @import "./common/openproject-common.module" @import "../app/shared/components/modal/modal.module" @import "../app/shared/directives/search-highlight.directive" -@import "../app/features/work-packages/components/wp-card-view/wp-single-card/wp-single-card" // Dynamically linked plugin styles from Rails plugins @import "../app/features/plugins/linked-plugins.styles"