add viewbox input for wp skeleton view

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',
   },
-]
+];

frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.html

@@ -89,9 +89,9 @@
     </ng-template>
 
     <ng-template #eventContent let-event="event">
-
+  
       <op-wp-loading-skeleton 
-        [viewBox]="event.viewBox"
+        [viewBox]="event.extendedProps.viewBox"
         class="op-team-planner--wp-loading-skeleton"
         *ngIf="event.id.startsWith('skeleton')"
       ></op-wp-loading-skeleton>

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;

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

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,
 })

frontend/src/app/shared/components/op-content-loader/op-principal-loading-skeleton/op-principal-loading-skeleton.component.html

@@ -1,8 +1,8 @@
 <div class="op-principal-loading-skeleton">
-    <op-content-loader
-    viewBox="0 0 200 80"
-    >
-        <svg:rect height="30%" rx="4" ry="4" width="117" x="75" y="30" />
-        <svg:circle cx="35" cy="40" r="35"></circle>
-    </op-content-loader>
+  <op-content-loader
+    viewBox="0 0 180 80"
+  >
+    <svg:rect height="30%" rx="4" ry="4" width="117" x="75" y="30"/>
+    <svg:circle cx="35" cy="42" r="35"></circle>
+  </op-content-loader>
 </div>

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

frontend/src/app/shared/components/op-content-loader/op-wp-loading-skeleton/op-wp-loading-skeleton.component.html

@@ -1,8 +1,8 @@
 <div class="op-wp-loading-skeleton">
-    <op-content-loader
-        [viewBox]="viewBox"
-    >
-        <svg:rect x="0" y="0" rx="3" ry="3" width="30%" height="35%"/>
-        <svg:rect x="0" y="40%" rx="3" ry="3" width="100%" height="35%"/>
-    </op-content-loader>
+  <op-content-loader
+    [viewBox]="viewBox"
+  >
+    <svg:rect x="0" y="0" rx="3" ry="3" width="20%" height="35%"/>
+    <svg:rect x="0" y="40%" rx="3" ry="3" width="100%" height="35%"/>
+  </op-content-loader>
 </div>

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';
 }

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
+      height: 80px

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"