UI for switching calendar view (day/week/month) (#2421)

* UI for switching calendar view (day/week/month)

* darken options on hover

app/internal_packages/main-calendar/lib/core/calendar-constants.ts

@@ -1,5 +1,5 @@
 export enum CalendarView {
-  DAY = 'day',
+  DAY = 'Day',
-  WEEK = 'week',
+  WEEK = 'Week',
-  MONTH = 'month',
+  MONTH = 'Month',
 }

app/internal_packages/main-calendar/lib/core/header-controls.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { Utils } from 'mailspring-exports';
 import { RetinaImg } from 'mailspring-component-kit';
+import { CalendarView } from './calendar-constants';
 
 export class HeaderControls extends React.Component<{
   title: string;
   nextAction: () => void;
   prevAction: () => void;
+  onChangeView: (view: CalendarView) => void;
+  disabledViewButton: string;
 }> {
   static displayName = 'HeaderControls';
 
@@ -35,6 +38,10 @@ export class HeaderControls extends React.Component<{
     );
   }
 
+  _changeView = newView => {
+    this.props.onChangeView(newView);
+  };
+
   render() {
     return (
       <div className="header-controls">
@@ -43,6 +50,28 @@ export class HeaderControls extends React.Component<{
           <span className="title">{this.props.title}</span>
           {this._renderNextAction()}
         </div>
+        <div className="view-controls">
+          {[
+            //{view: CalendarView.DAY, isDisabled: CalendarView.DAY === this.props.disabledViewButton,},
+            {
+              view: CalendarView.WEEK,
+              isDisabled: CalendarView.WEEK === this.props.disabledViewButton,
+            },
+            {
+              view: CalendarView.MONTH,
+              isDisabled: CalendarView.MONTH === this.props.disabledViewButton,
+            },
+          ].map(buttonOptions => (
+            <button
+              key={buttonOptions.view}
+              className={buttonOptions.isDisabled ? 'cur-view-btn' : 'view-btn'}
+              onClick={() => this._changeView(buttonOptions.view)}
+              disabled={buttonOptions.isDisabled}
+            >
+              {buttonOptions.view}
+            </button>
+          ))}
+        </div>
         {this.props.children}
       </div>
     );

app/internal_packages/main-calendar/lib/core/mailspring-calendar.tsx

@@ -26,7 +26,6 @@ import { Disposable } from 'rx-core';
 import { CalendarEventArgs } from './calendar-event-container';
 import { CalendarEventPopover } from './calendar-event-popover';
 
-
 const DISABLED_CALENDARS = 'mailspring.disabledCalendars';
 
 const VIEWS = {

app/internal_packages/main-calendar/lib/core/month-view.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import { MailspringCalendarViewProps } from './mailspring-calendar';
+import { CalendarEventContainer } from './calendar-event-container';
+import { ScrollRegion, InjectedComponentSet } from 'mailspring-component-kit';
 import { CalendarView } from './calendar-constants';
+import { HeaderControls } from './header-controls';
 
 export class MonthView extends React.Component<MailspringCalendarViewProps> {
   static displayName = 'MonthView';
@@ -10,6 +13,35 @@ export class MonthView extends React.Component<MailspringCalendarViewProps> {
   };
 
   render() {
-    return <button onClick={this._onClick}>Change to week</button>;
+    return (
+      <div className="calendar-view month-view">
+        <CalendarEventContainer
+          onCalendarMouseUp={this.props.onCalendarMouseUp}
+          onCalendarMouseDown={this.props.onCalendarMouseDown}
+          onCalendarMouseMove={this.props.onCalendarMouseMove}
+        >
+          <div className="top-banner">
+            <InjectedComponentSet matching={{ role: 'Calendar:Week:Banner' }} direction="row" />
+          </div>
+
+          <HeaderControls
+            title={'Test 2022'}
+            nextAction={() => console.log('Next Month')}
+            prevAction={() => console.log('Previous Month')}
+            onChangeView={this.props.onChangeView}
+            disabledViewButton={CalendarView.MONTH}
+          >
+            <button
+              key="today"
+              className="btn"
+              onClick={() => console.log('Go to today (Month)')}
+              style={{ position: 'absolute', left: 10 }}
+            >
+              Today
+            </button>
+          </HeaderControls>
+        </CalendarEventContainer>
+      </div>
+    );
   }
 }

app/internal_packages/main-calendar/lib/core/week-view.tsx

@@ -12,6 +12,7 @@ import { WeekViewAllDayEvents } from './week-view-all-day-events';
 import { CalendarEventContainer } from './calendar-event-container';
 import { CurrentTimeIndicator } from './current-time-indicator';
 import { Disposable } from 'rx-core';
+import { CalendarView } from './calendar-constants';
 import {
   overlapForEvents,
   maxConcurrentEvents,
@@ -264,6 +265,8 @@ export class WeekView extends React.Component<
             title={headerText}
             nextAction={this._onClickNextWeek}
             prevAction={this._onClickPrevWeek}
+            onChangeView={this.props.onChangeView}
+            disabledViewButton={CalendarView.WEEK}
           >
             <button
               key="today"

app/internal_packages/main-calendar/styles/nylas-calendar.less

@@ -342,6 +342,38 @@ body.platform-win32 {
         vertical-align: baseline;
       }
     }
+
+    .view-controls {
+      position: absolute;
+      right: 10px;
+      border-radius: @border-radius-base;
+      box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.15), 0 -0.5px 0 rgba(0, 0, 0, 0.15),
+        0.5px 0 0 rgba(0, 0, 0, 0.15), -0.5px 0 0 rgba(0, 0, 0, 0.15),
+        0 0.5px 1px rgba(0, 0, 0, 0.15);
+      overflow: hidden;
+
+      .view-btn {
+        width: 60px;
+        border: 0;
+        cursor: default;
+        display: inline-block;
+        color: @btn-default-text-color;
+        background: @background-primary;
+
+        &:hover {
+          background: darken(@background-primary, 5%);
+        }
+      }
+
+      .cur-view-btn {
+        width: 60px;
+        border: 0;
+        cursor: default;
+        display: inline-block;
+        color: @text-color-inverse;
+        background: @accent-primary;
+      }
+    }
   }
 
   .center-controls {