fix: fixed two column reverseSizing

- added two column reverseSizing example - updated calendar styling to better support scaling
dereekb · Jul 7, 2022 · c298776 · c298776
1 parent f963986
commit c298776
Show file tree

Hide file tree

Showing 13 changed files with 187 additions and 20 deletions.
diff --git a/apps/demo/src/app/modules/doc/doc.ts b/apps/demo/src/app/modules/doc/doc.ts
@@ -19,10 +19,10 @@ export const DOC_ROUTES = [
   DOC_AUTH_ROOT_ROUTE,
   DOC_INTERACTION_ROOT_ROUTE,
   DOC_FORM_ROOT_ROUTE,
+  DOC_EXTENSION_ROOT_ROUTE,
   DOC_LAYOUT_ROOT_ROUTE,
   DOC_ROUTER_ROOT_ROUTE,
-  DOC_TEXT_ROOT_ROUTE,
-  DOC_EXTENSION_ROOT_ROUTE
+  DOC_TEXT_ROOT_ROUTE
 ];
 
 export const DOC_ROOT_ROUTE = {

diff --git a/apps/demo/src/app/modules/doc/modules/extension/container/calendar.component.html b/apps/demo/src/app/modules/doc/modules/extension/container/calendar.component.html
@@ -7,5 +7,20 @@
     <doc-feature-example header="dbx-calendar" hint="Used to render a calendar.">
       <dbx-calendar></dbx-calendar>
     </doc-feature-example>
+    <doc-feature-example header="dbx-calendar in restricted two-column" hint="Example showing a calendar in a two-column view with a set height.">
+      <dbx-two-column dbxTwoColumnContext [reverseSizing]="true" [showRight]="showRight" style="height: 400px">
+        <dbx-two-block class="dbx-content-scroll-lock" left>
+          <dbx-calendar></dbx-calendar>
+        </dbx-two-block>
+        <dbx-two-column-right right header="Right Side Header">
+          <div nav>
+            <button mat-icon-button><mat-icon>list</mat-icon></button>
+          </div>
+          <div style="height: 100%; background: blue">
+            <span>Right</span>
+          </div>
+        </dbx-two-column-right>
+      </dbx-two-column>
+    </doc-feature-example>
   </doc-feature-layout>
 </dbx-content-container>
diff --git a/apps/demo/src/app/modules/doc/modules/extension/container/calendar.component.ts b/apps/demo/src/app/modules/doc/modules/extension/container/calendar.component.ts
@@ -18,6 +18,8 @@ export interface TestCalendarEventData extends DateBlock {
   providers: [DbxCalendarStore]
 })
 export class DocExtensionCalendarComponent implements OnInit {
+  showRight = true;
+
   constructor(readonly calendarStore: DbxCalendarStore<TestCalendarEventData>) {}
 
   ngOnInit(): void {

diff --git a/apps/demo/src/app/modules/doc/modules/layout/container/two.component.html b/apps/demo/src/app/modules/doc/modules/layout/container/two.component.html
@@ -44,11 +44,31 @@ <h4>Example With Full Width</h4>
           </div>
         </dbx-two-column-right>
       </dbx-two-column>
+      <h4>Example With Reverse Sizing</h4>
+      <p>The dbxTwoColumnFullLeft column directive reverse the sizings so that the left is set to grow.</p>
+      <dbx-two-column dbxTwoColumnContext [reverseSizing]="true" [dbxTwoColumnFullLeft]="true" [showRight]="showRight" style="height: 200px">
+        <dbx-two-block left>
+          <dbx-two-column-head top>
+            <span>Left Head</span>
+          </dbx-two-column-head>
+          <div style="height: 100%; background: red">
+            <span>Left</span>
+          </div>
+        </dbx-two-block>
+        <dbx-two-column-right right header="Right Side Header">
+          <div nav>
+            <button mat-icon-button><mat-icon>list</mat-icon></button>
+          </div>
+          <div style="height: 100%; background: blue">
+            <span>Right</span>
+          </div>
+        </dbx-two-column-right>
+      </dbx-two-column>
 
       <h4>Without Headings</h4>
       <p>The example above uses dbx-two-column-head and dbx-two-column-right respectively for the headers. This example uses right and left content directly.</p>
       <button mat-raised-button (click)="showRight = !showRight">Toggle Right Side ({{ showRight }})</button>
-      <dbx-two-column dbxTwoColumnContext [showRight]="showRight" style="height: 400px">
+      <dbx-two-column dbxTwoColumnContext [showRight]="showRight" style="height: 200px">
         <div left style="height: 100%; background: red">
           <span>Left</span>
         </div>

diff --git a/packages/dbx-web/src/lib/extension/calendar/_calendar.scss b/packages/dbx-web/src/lib/extension/calendar/_calendar.scss
@@ -4,17 +4,25 @@
 
 // MARK: Variables
 $calendar-header-height: theming.$content-navbar-height;
-$calendar-week-content-header-height: 52px;
-$calendar-month-content-header-height: 31px;
+$calendar-title-height: 22px;
+$calendar-week-content-header-height: 51px;
+$calendar-month-content-header-height: 29px;
 $calendar-scrollable-content-bottom-padding: 12px;
+$calendar-week-content-all-day-events-height: 110px;
+
+$calendar-title-and-header-height: calc($calendar-header-height + $calendar-title-height);
+$calendar-content-border-consideration: 2px;
 
 // MARK: Mixin
 @mixin core() {
   @include calendar.cal-core();
   @include calendar.cal-theme(());
 
   .dbx-calendar {
+    height: 100%;
+
     .dbx-calendar-title {
+      height: $calendar-title-height;
       font-weight: bold;
       text-align: center;
       margin: 0;
@@ -24,16 +32,100 @@ $calendar-scrollable-content-bottom-padding: 12px;
     .dbx-calendar-header {
       height: $calendar-header-height;
       padding: 0px 8px;
+
+      display: flex;
+      width: 100%;
+      align-items: center;
+      box-sizing: border-box;
+
+      .dbx-calendar-controls {
+        width: 100%;
+      }
     }
 
     .dbx-calendar-content {
+      height: 100%;
+
       &.dbx-calendar-content-week {
+        height: calc(100% - $calendar-title-and-header-height - $calendar-week-content-header-height - $calendar-content-border-consideration);
         margin-top: $calendar-week-content-header-height;
       }
 
       &.dbx-calendar-content-month {
+        height: calc(100% - $calendar-title-and-header-height - $calendar-month-content-header-height - $calendar-content-border-consideration);
         margin-top: $calendar-month-content-header-height;
       }
+
+      &.dbx-calendar-content-day .cal-week-view {
+        height: calc(100% - $calendar-title-and-header-height - $calendar-content-border-consideration);
+        overflow: auto;
+      }
+    }
+
+    .cal-month-view {
+      position: relative;
+      width: 100%;
+      height: 100%;
+
+      .cal-header {
+        margin-top: -$calendar-month-content-header-height;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        box-sizing: border-box;
+      }
+
+      .cal-days {
+        overflow: auto;
+        height: 100%;
+      }
+    }
+
+    // Applies to both the day and week view.
+    .cal-week-view {
+      position: relative;
+      height: 100%;
+      width: 100%;
+
+      .cal-time-events {
+        .cal-day-column {
+          height: 1440px; // 1440 is the combined height of all the content.
+        }
+      }
+    }
+
+    .dbx-calendar-content-week {
+      .cal-week-view {
+        .cal-all-day-events {
+          // Day events set to specific height.
+          height: $calendar-week-content-all-day-events-height;
+        }
+
+        .cal-day-headers {
+          margin-top: -$calendar-week-content-header-height;
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          box-sizing: border-box;
+        }
+
+        .cal-time-events {
+          // Weirdness caused by our hack for using the cal-day-headers as an absolute position.
+          overflow: auto;
+          padding-bottom: $calendar-scrollable-content-bottom-padding;
+          height: 100%;
+          box-sizing: border-box;
+        }
+      }
+    }
+
+    .cal-day-view,
+    .cal-week-view {
+      .cal-event {
+        min-height: 25px;
+      }
     }
   }
 }
@@ -54,20 +146,19 @@ $calendar-scrollable-content-bottom-padding: 12px;
   $event-icon-color: theming.get-color-from-palette($primary, 600);
   $event-bg-color: theming.get-color-from-palette($primary, 800);
   $event-text-color: theming.get-color-from-palette($primary, '800-contrast');
+  $highlight-color: theming.get-color-from-palette($accent, 300);
   $weekend-color: theming.get-color-from-palette($accent, 500);
   $badge-color: theming.get-color-from-palette($accent, 500);
   $current-time-marker-color: theming.get-color-from-palette($accent, 400);
 
-  // @debug $foreground;
-  @debug $background;
-
   #{calendar.$cal-event-icon-color-var}: $event-icon-color; // text/border color
   #{calendar.$cal-event-color-primary-var}: $event-text-color; // text/border color
   #{calendar.$cal-event-color-secondary-var}: $event-bg-color; // event background color
   #{calendar.$cal-border-color-var}: $border-color;
   #{calendar.$cal-bg-primary-var}: $background-color;
   #{calendar.$cal-bg-secondary-var}: $hover-color;
   #{calendar.$cal-bg-active-var}: $hover-color;
+  #{calendar.$cal-bg-highlight-var}: rgba($highlight-color, 0.3);
   #{calendar.$cal-today-bg-var}: $hover-color;
   #{calendar.$cal-weekend-color-var}: $weekend-color;
   #{calendar.$cal-badge-color-var}: $badge-color;

diff --git a/packages/dbx-web/src/lib/extension/calendar/calendar.component.html b/packages/dbx-web/src/lib/extension/calendar/calendar.component.html
@@ -22,7 +22,7 @@ <h3 class="dbx-calendar-title">{{ (viewDate$ | async)! | calendarDate: (displayT
       </span>
     </div>
   </div>
-  <div class="dbx-calendar-content" [ngClass]="'calendar-content-' + (displayType$ | async)!" [ngSwitch]="displayType$ | async">
+  <div class="dbx-calendar-content" [ngClass]="'dbx-calendar-content-' + (displayType$ | async)!" [ngSwitch]="displayType$ | async">
     <mwl-calendar-month-view *ngSwitchCase="'month'" [viewDate]="(viewDate$ | async)!" [events]="(events$ | async)!" [activeDayIsOpen]="(activeDayIsOpen$ | async)!" (dayClicked)="dayClicked($event.day)" (eventClicked)="eventClicked('Clicked', $event.event)"></mwl-calendar-month-view>
     <mwl-calendar-week-view *ngSwitchCase="'week'" [viewDate]="(viewDate$ | async)!" [events]="(events$ | async)!" (eventClicked)="eventClicked('Clicked', $event.event)"></mwl-calendar-week-view>
     <mwl-calendar-day-view *ngSwitchCase="'day'" [viewDate]="(viewDate$ | async)!" [events]="(events$ | async)!" (eventClicked)="eventClicked('Clicked', $event.event)"></mwl-calendar-day-view>

diff --git a/packages/dbx-web/src/lib/extension/calendar/style/_variables.scss b/packages/dbx-web/src/lib/extension/calendar/style/_variables.scss
@@ -6,6 +6,7 @@ $cal-bg-primary-var: --cal-bg-primary;
 $cal-bg-secondary-var: --cal-bg-secondary;
 $cal-bg-active-var: --cal-bg-active;
 $cal-bg-active-dragover-var: --cal-bg-active-dragover;
+$cal-bg-highlight-var: --cal-bg-highlight;
 $cal-today-bg-var: --cal-today-bg;
 $cal-weekend-color-var: --cal-weekend-color;
 $cal-badge-color-var: --cal-badge-color;
@@ -23,6 +24,7 @@ $cal-bg-primary: var($cal-bg-primary-var);
 $cal-bg-secondary: var($cal-bg-secondary-var);
 $cal-bg-active: var($cal-bg-active-var);
 $cal-bg-active-dragover: var($cal-bg-active-dragover-var);
+$cal-bg-highlight: var($cal-bg-highlight-var);
 $cal-today-bg: var($cal-today-bg-var);
 $cal-weekend-color: var($cal-weekend-color-var);
 $cal-badge-color: var($cal-badge-color-var);
@@ -51,6 +53,8 @@ $cal-vars: map-merge(
     bg-secondary: $cal-bg-secondary,
     // the color used when hovering over cells and headers
     bg-active: $cal-bg-active,
+    // the color used when hovering over cells and headers
+    bg-highlight: $cal-bg-highlight,
     // the background color to mark today in the week view header
     today-bg: $cal-today-bg,
     // the color used to indicate a day is a weekend

diff --git a/packages/dbx-web/src/lib/extension/calendar/style/month/calendar-month-view.scss b/packages/dbx-web/src/lib/extension/calendar/style/month/calendar-month-view.scss
@@ -172,6 +172,10 @@
       border-color: map-get($theme, border-color);
     }
 
+    .cal-day-cell.cal-in-month.cal-event-highlight {
+      background: map-get($theme, bg-highlight) !important;
+    }
+
     .cal-day-cell:not(:last-child) {
       border-right-color: map-get($theme, border-color);
 

diff --git a/packages/dbx-web/src/lib/extension/calendar/style/week/calendar-week-view.scss b/packages/dbx-web/src/lib/extension/calendar/style/week/calendar-week-view.scss
@@ -290,7 +290,7 @@
 
     .cal-day-headers {
       border-color: map-get($theme, border-color);
-      border-top: 0;
+      // border-top: 0;
     }
 
     .cal-day-headers .cal-header {

diff --git a/packages/dbx-web/src/lib/layout/column/_column.scss b/packages/dbx-web/src/lib/layout/column/_column.scss
@@ -27,11 +27,6 @@ $two-columns-right-padding-size: 6px;
 
       overflow: auto;
       // background: red;
-
-      .two-column-reverse-sizing & {
-        width: calc(100% - #{$two-column-left-width});
-        overflow: hidden;
-      }
     }
 
     .right-column {
@@ -67,6 +62,23 @@ $two-columns-right-padding-size: 6px;
     }
   }
 
+  .dbx-two-column.two-column-reverse-sizing {
+    .left-column {
+      width: calc(100% - #{$two-column-left-width});
+      overflow: hidden;
+    }
+
+    .right-column {
+      max-width: $two-column-left-width;
+    }
+
+    &.hide-left-column {
+      .right-column {
+        max-width: 100%;
+      }
+    }
+  }
+
   .dbx-two-column-head {
     padding: 0 6px; // only padded on the left
     border-bottom: 1px solid rgba(0, 0, 0, 0.14);

diff --git a/packages/dbx-web/src/lib/layout/column/two/two.column.component.html b/packages/dbx-web/src/lib/layout/column/two/two.column.component.html
@@ -1,6 +1,8 @@
 <dbx-content-container grow="full" padding="none" class="dbx-content dbx-content-auto-height left-column">
+  <div *ngIf="!v.hideLeftColumn && v.reverseSizing" (resized)="onResized($event)"></div>
   <ng-content select="[left]"></ng-content>
 </dbx-content-container>
-<dbx-content-container grow="full" padding="none" class="dbx-content dbx-content-auto-height right-column" *ngIf="v.showRight" (resized)="onResized($event)">
+<dbx-content-container grow="full" padding="none" class="dbx-content dbx-content-auto-height right-column" *ngIf="v.showRight">
+  <div *ngIf="v.hideLeftColumn || !v.reverseSizing" (resized)="onResized($event)"></div>
   <ng-content select="[right]"></ng-content>
 </dbx-content-container>
diff --git a/packages/dbx-web/src/lib/layout/column/two/two.column.component.ts b/packages/dbx-web/src/lib/layout/column/two/two.column.component.ts
@@ -32,9 +32,9 @@ export interface DbxTwoColumnViewState {
 export class DbxTwoColumnComponent extends AbstractSubscriptionDirective implements OnInit, OnDestroy {
   private _view: DbxTwoColumnViewState = { showRight: false, showFullLeft: true, hideLeftColumn: false, reverseSizing: false, inSectionPage: false };
 
-  private _reverseSizing = new BehaviorSubject<boolean>(false);
   private _inSectionPage = new BehaviorSubject<boolean>(false);
 
+  readonly reverseSizing$ = this.twoColumnsContextStore.reverseSizing$;
   readonly hideLeftColumn$: Observable<boolean> = this.twoColumnsContextStore.hideLeft$;
   readonly showRight$: Observable<boolean> = this.twoColumnsContextStore.showRight$;
   readonly showFullLeft$: Observable<boolean> = this.twoColumnsContextStore.showFullLeft$;
@@ -46,7 +46,7 @@ export class DbxTwoColumnComponent extends AbstractSubscriptionDirective impleme
   }
 
   ngOnInit(): void {
-    this.sub = combineLatest([this.showRight$, this.showFullLeft$, this.hideLeftColumn$, this._reverseSizing, this._inSectionPage]).subscribe(([showRight, showFullLeft, hideLeftColumn, reverseSizing, inSectionPage]: [boolean, boolean, boolean, boolean, boolean]) => {
+    this.sub = combineLatest([this.showRight$, this.showFullLeft$, this.hideLeftColumn$, this.reverseSizing$, this._inSectionPage]).subscribe(([showRight, showFullLeft, hideLeftColumn, reverseSizing, inSectionPage]: [boolean, boolean, boolean, boolean, boolean]) => {
       this._view = {
         showRight,
         showFullLeft,
@@ -61,7 +61,6 @@ export class DbxTwoColumnComponent extends AbstractSubscriptionDirective impleme
 
   override ngOnDestroy(): void {
     super.ngOnDestroy();
-    this._reverseSizing.complete();
     this._inSectionPage.complete();
   }
 
@@ -71,7 +70,7 @@ export class DbxTwoColumnComponent extends AbstractSubscriptionDirective impleme
 
   @Input()
   set reverseSizing(reverseSizing: boolean) {
-    this._reverseSizing.next(reverseSizing);
+    this.twoColumnsContextStore.setReverseSizing(reverseSizing);
   }
 
   @Input()