Merge pull request #13 from eksrvb/bugfix/polishing-workspace-design

polishing workspace design

Author: eksrha

projects/lib-workspace/src/app/app.component.html

@@ -1,39 +1,36 @@
-<div class="mat-app-background">
-
-  <mat-toolbar color="primary">
-    Material Calendar
-    <div style="display: flex; justify-content: space-around;">
-      <mat-slide-toggle [formControl]="toggleControl">
-        Toggle Themes
-      </mat-slide-toggle>
-      <mat-slide-toggle [(ngModel)]="placeholder">
-        Days placeholder
-      </mat-slide-toggle>
-    </div>
-  </mat-toolbar>
-
-  <div class="selection">
-    <mat-form-field>
-      <mat-label>Months before</mat-label>
-      <mat-select [(ngModel)]="monthsBefore">
-        <mat-option *ngFor="let num of monthsAfterBefore" [value]="num">{{num}}</mat-option>
-      </mat-select>
-    </mat-form-field>
-    <mat-form-field>
-      <mat-label>Months after</mat-label>
-      <mat-select [(ngModel)]="monthsAfter">
-        <mat-option *ngFor="let num of monthsAfterBefore" [value]="num">{{num}}</mat-option>
-      </mat-select>
-    </mat-form-field>
-    <div>
-      Events: {{ latestEvent | json }}
-    </div>
+<mat-toolbar color="primary">
+  Material Calendar
+  <div style="display: flex; justify-content: space-around;">
+    <mat-slide-toggle [formControl]="toggleControl">
+      Toggle Themes
+    </mat-slide-toggle>
+    <mat-slide-toggle [(ngModel)]="placeholder">
+      Days placeholder
+    </mat-slide-toggle>
   </div>
+</mat-toolbar>
 
+<div class="selection mat-app-background">
+  <mat-form-field>
+    <mat-label>Months before</mat-label>
+    <mat-select [(ngModel)]="monthsBefore">
+      <mat-option *ngFor="let num of monthsAfterBefore" [value]="num">{{num}}</mat-option>
+    </mat-select>
+  </mat-form-field>
+  <mat-form-field>
+    <mat-label>Months after</mat-label>
+    <mat-select [(ngModel)]="monthsAfter">
+      <mat-option *ngFor="let num of monthsAfterBefore" [value]="num">{{num}}</mat-option>
+    </mat-select>
+  </mat-form-field>
   <div>
-    <calendar-panel [placeholderDay]="placeholder" [dataSource]="dataSource" year="2021" month="5"
-      [monthsBefore]="monthsBefore" [monthsAfter]="monthsAfter" [config]="calendarConfig"
-      (clickDate)="testMethod($event)">
-    </calendar-panel>
+    Events: {{ latestEvent | json }}
   </div>
 </div>
+
+<div class="mat-app-background" style="height: 80%;">
+  <calendar-panel [placeholderDay]="placeholder" [dataSource]="dataSource" [year]="2021" [month]="7"
+    [monthsBefore]="monthsBefore" [monthsAfter]="monthsAfter" [config]="calendarConfig"
+    (clickDate)="testMethod($event)">
+  </calendar-panel>
+</div>

projects/lib-workspace/src/app/app.component.ts

@@ -37,32 +37,23 @@ export class AppComponent implements OnInit {
 
   dataSource: DayC[] = [
     {
-      date: 1624312800000,
+      date: 1634594400000,
       backgroundColor: '#0167c7',
       toolTip: 'Test ToolTip First',
-      badgeMode: 'Icon',
-      badgeInt: 5,
-      badgeIcon: 'edit'
     },
     {
-      date: 1624312800000,
+      date: 1634594400000,
       backgroundColor: 'rgb(6, 182, 0)',
       toolTip: 'Test ToolTip Second',
-      badgeMode: 'Icon',
-      badgeInt: 5,
-      badgeIcon: 'edit'
     },
     {
-      date: 1624658400000,
+      date: 1634853600000,
       backgroundColor: 'rgb(6, 182, 0)',
       toolTip: 'Test ToolTip 2',
-      /* badgeMode: 'Icon',
-      badgeInt: 5,
-      badgeIcon: 'edit' */
     },
     {
-      date: 1604199900000,
-      backgroundColor: 'blue'
+      date: 1635544800000,
+      backgroundColor: 'lightblue'
     }
   ]
 

projects/lib-workspace/src/app/app.module.ts

@@ -4,13 +4,13 @@ import { NgModule, LOCALE_ID } from '@angular/core';
 import { AppComponent } from './app.component';
 import { MaterialCalendarModule } from 'projects/material-calendar/src/public-api';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import {MatToolbarModule} from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatSelectModule } from '@angular/material/select';
-import {MatIconModule} from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
@@ -32,7 +32,7 @@ import { MatButtonModule } from '@angular/material/button';
     MaterialCalendarModule
   ],
   providers: [
-    {provide: LOCALE_ID, useValue: 'de-DE' }
+    { provide: LOCALE_ID, useValue: 'de-DE' }
   ],
   bootstrap: [AppComponent]
 })

projects/lib-workspace/src/index.html

@@ -8,17 +8,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-
-  <style>
-    app-root>div {
-      height: 100%
-    }
-  </style>
-
 </head>
 
 <body>
-  <app-root class="mat-app-background"></app-root>
+  <app-root></app-root>
 </body>
 
 </html>